/* ── Portal Clientes — Lavadero Splash ─────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@500;600;700;800&display=swap');

:root {
    --splash-blue:           #173F6D;
    --splash-accent:         #1E6EEB;
    --splash-light:          #EAF2FF;
    --splash-green:          #1E8E5A;
    --splash-green-light:    #E7F5EC;
    --splash-bg:             #F3F5F8;
    --splash-border:         #D9E0E7;
    --splash-text:           #344054;
    --splash-text-secondary: #667085;
    --splash-text-soft:      #8A94A6;
    --splash-text-muted:     #98A2B3;
    --splash-disabled-bg:    #E5E7EB;
    --splash-disabled-text:  #6B7280;
    --splash-amber-bg:       #FFF4E5;
    --splash-amber-text:     #B26A00;
    --sidebar-w:             240px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--splash-bg);
    font-family: 'Nunito Sans', sans-serif;
    min-height: 100vh;
    margin: 0;
    color: var(--splash-text);
}

/* ── Topbar ───────────────────────────────────────────────────── */
.portal-topbar {
    background:
        radial-gradient(circle at 75% 50%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 28%),
        linear-gradient(180deg, #173F6D 0%, #1E4A80 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 4px 14px rgba(23,63,109,0.16);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Left block: logo + brand */
.portal-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.portal-topbar-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 10px;
    /* #1371: la insignia (sobre todo la de aniversario, azul marino oscuro) se
       fundía con el header azul — un halo claro sutil la despega del fondo. */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
}
.portal-topbar-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.portal-topbar-title {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 22px;
    line-height: 24px;
    font-weight: 800;
    letter-spacing: 0.1px;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portal-topbar-subtitle {
    margin: 2px 0 0 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 0.1px;
    color: rgba(255,255,255,0.84);
}

/* Right block: actions */
.portal-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Icon button (bell) */
.portal-topbar-icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,0.86);
    font-size: 20px;
    padding: 0;
    cursor: pointer;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}
.portal-topbar-icon-btn:hover,
.portal-topbar-icon-btn:active {
    background: rgba(255,255,255,0.10);
}

/* Profile dropdown */
.portal-profile-menu {
    position: absolute;
    top: 100%;
    right: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.20);
    min-width: 210px;
    z-index: 300;
    overflow: hidden;
}
.portal-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    color: var(--splash-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
}
.portal-profile-menu-item:hover,
.portal-profile-menu-item:active {
    background: var(--splash-bg);
    color: var(--splash-text);
}
.portal-profile-menu-item i {
    font-size: 16px;
    flex-shrink: 0;
}
.portal-profile-menu-logout {
    color: #dc3545;
}
.portal-profile-menu-logout:hover,
.portal-profile-menu-logout:active {
    color: #dc3545;
}
.portal-profile-menu-divider {
    height: 1px;
    background: var(--splash-border);
    margin: 0;
}

/* Responsive < 390px */
@media (max-width: 390px) {
    .portal-topbar { padding: calc(13px + env(safe-area-inset-top)) 14px 13px; }
    .portal-topbar-logo { width: 40px; height: 40px; }
    .portal-topbar-subtitle { font-size: 13px; line-height: 16px; }
}

/* ── Login ────────────────────────────────────────────────────── */
.portal-login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--splash-blue) 0%, var(--splash-accent) 100%);
}
.portal-login-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2rem 1.75rem 1.75rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
}
.portal-login-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}
.portal-login-logo img {
    border-radius: 16px;
    margin-bottom: .75rem;
}
.portal-login-logo .brand {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--splash-blue);
    line-height: 1.2;
}
.portal-login-logo .sub {
    font-size: .85rem;
    color: var(--splash-text-secondary);
    margin-top: .25rem;
}
.portal-login-footer {
    margin-top: 1rem;
    text-align: center;
    color: rgba(255,255,255,.45);
    font-size: .72rem;
}

/* ── Pagina principal ─────────────────────────────────────────── */
.portal-main {
    max-width: 560px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

/* Desktop: wider content area */
@media (min-width: 768px) {
    .portal-main {
        max-width: 720px;
        padding: 2rem 2rem 3rem;
    }
}
@media (min-width: 1200px) {
    .portal-main {
        max-width: 960px;
    }
}

/* ── Welcome banner ───────────────────────────────────────────── */
.portal-welcome {
    background: #FFFFFF;
    border: 1px solid var(--splash-border);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    box-shadow: 0 2px 8px rgba(23,63,109,0.08);
}
.portal-welcome-name {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--splash-blue);
    line-height: 1.2;
}
.portal-welcome-sub {
    font-size: 15px;
    font-weight: 500;
    color: var(--splash-text-secondary);
    margin-top: .1rem;
}
.portal-welcome-activity {
    font-size: 16px;
    font-weight: 700;
    color: var(--splash-blue);
    margin-top: 4px;
}

/* ── CTA buttons ─────────────────────────────────────────────── */
.portal-cta-wrap {
    text-align: center;
}
.portal-cta-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--splash-accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    min-height: 48px;
    padding: 10px 20px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(30,110,235,0.18);
    transition: background .15s;
    text-decoration: none;
}
.portal-cta-primary:hover {
    background: #185CC2;
    color: #fff;
}

.portal-cta-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--splash-disabled-bg);
    color: var(--splash-disabled-text);
    border: none;
    border-radius: 12px;
    min-height: 48px;
    padding: 10px 20px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: default;
    box-shadow: none;
    text-decoration: none;
}

.portal-cta-helper {
    font-size: 13px;
    font-weight: 500;
    color: var(--splash-text-secondary);
    margin-top: 8px;
}

.portal-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--splash-green);
    color: #fff;
    border: none;
    border-radius: 12px;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s;
    text-decoration: none;
}
.portal-wa-btn:hover {
    background: #177a4d;
    color: #fff;
}
.portal-wa-btn--outline {
    background: #fff;
    color: var(--splash-green);
    border: 1px solid #CFE7D8;
}
.portal-wa-btn--outline:hover {
    background: var(--splash-green-light);
    color: var(--splash-green);
}

/* ── Section heading ──────────────────────────────────────────── */
.portal-section-title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--splash-text-secondary);
    margin-top: 8px;
    margin-bottom: 10px;
    padding-left: .1rem;
}

/* ── Retiro card ──────────────────────────────────────────────── */
.portal-retiro-card {
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: .75rem;
    box-shadow: 0 2px 8px rgba(23,63,109,0.08);
    border: 1px solid #E2E8F0;
    border-left: 4px solid #E2E8F0;
    transition: box-shadow .15s;
}
.portal-retiro-card:active { box-shadow: 0 3px 12px rgba(0,0,0,.1); }

.portal-retiro-card.estado-entregado         { border-left-color: var(--splash-green); }
.portal-retiro-card.estado-listo             { border-left-color: var(--splash-accent); }
.portal-retiro-card.estado-listo_pendiente   { border-left-color: #f59e0b; }
.portal-retiro-card.estado-en_lavadero       { border-left-color: var(--splash-accent); }
.portal-retiro-card.estado-pendiente         { border-left-color: var(--splash-text-muted); }
.portal-retiro-card.estado-cancelado         { border-left-color: #DC2626; opacity: .65; }
.portal-retiro-card.estado-entrega_coordinada { border-left-color: var(--splash-accent); }

/* Foto thumbnail en card */
.portal-retiro-foto-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--splash-disabled-bg);
    flex-shrink: 0;
}

/* Variante "Entregado" — se muestra cuando el retiro fue entregado y el cron
   de limpieza ya purgó las fotos. La imagen tiene padding interno, así que
   usamos contain en vez de cover y fondo blanco. */
.portal-retiro-foto-thumb--entregado {
    object-fit: contain;
    background: #fff;
}

.portal-retiro-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .6rem;
}
.portal-retiro-fecha {
    font-size: .75rem;
    color: var(--splash-text-secondary);
    margin-bottom: .2rem;
}
.portal-retiro-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 999px;
}
/* Estado badge color variants */
.portal-retiro-estado-badge.badge-entrega_coordinada {
    background: var(--splash-light);
    color: var(--splash-accent);
}
.portal-retiro-estado-badge.badge-entregado {
    background: var(--splash-green-light);
    color: var(--splash-green);
}
.portal-retiro-estado-badge.badge-listo_pendiente {
    background: var(--splash-amber-bg);
    color: var(--splash-amber-text);
}
.portal-retiro-estado-badge.badge-en_lavadero {
    background: var(--splash-light);
    color: var(--splash-accent);
}
.portal-retiro-estado-badge.badge-pendiente {
    background: var(--splash-bg);
    color: var(--splash-text-secondary);
}
.portal-retiro-estado-badge.badge-cancelado {
    background: #FEE2E2;
    color: #DC2626;
}

/* ── Precio + estado de pago ────────────────────────────────── */
.portal-retiro-pago {
    display: flex;
    flex-direction: column;
    margin-bottom: .5rem;
    font-family: 'Nunito Sans', sans-serif;
    line-height: 1;
}
.portal-retiro-monto {
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
}
.portal-pago-sub {
    font-size: .7rem;
    font-weight: 500;
    margin-top: .15rem;
}
.portal-retiro-pago.pagado .portal-retiro-monto { color: var(--splash-green); }
.portal-retiro-pago.pagado .portal-pago-sub { color: var(--splash-green); }
.portal-retiro-pago.pendiente .portal-retiro-monto { color: #DC2626; }
.portal-retiro-pago.pendiente .portal-pago-sub { color: #DC2626; }

/* ── Delivery estimate ──────────────────────────────────────── */
.ls-delivery-estimate {
    margin: 6px 0 10px 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
}
.ls-delivery-label {
    color: var(--splash-text-secondary);
    font-weight: 500;
}
.ls-delivery-date {
    color: var(--splash-blue);
    font-weight: 700;
}
.ls-delivery-estimate i {
    color: var(--splash-text-muted);
    font-size: 13px;
}
.ls-delivery-disclaimer {
    font-size: 12px;
    color: var(--splash-text-muted);
    text-align: center;
    margin: 8px 0 0 0;
    font-weight: 500;
}
/* #1362: cuando el lavado ya está lavado/listo, el cliente puede retirarlo en el local. */
.portal-retiro-local-hint {
    font-size: 12px;
    color: var(--splash-text-secondary);
    margin: 4px 0 0 0;
    line-height: 1.35;
}
.portal-retiro-local-hint i {
    color: var(--splash-text-muted);
}

/* ── Stepper ──────────────────────────────────────────────────── */
.portal-stepper {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-top: .5rem;
}
.portal-stepper::before {
    content: '';
    position: absolute;
    top: 13px;
    left: 13px;
    right: 13px;
    height: 2px;
    background: var(--splash-disabled-bg);
    z-index: 0;
}
.portal-step {
    flex: 1;
    /* #1371: sin min-width:0, el min-content del texto más ancho (un rango de
       fecha cross-mes) fija el ancho de la columna y desborda la card en 360px. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
.portal-step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--splash-disabled-bg);
    border: 2px solid var(--splash-disabled-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: .35rem;
}
.portal-step.done .portal-step-dot {
    background: var(--splash-green);
    border-color: var(--splash-green);
}
.portal-step.active .portal-step-dot {
    background: var(--splash-accent);
    border-color: var(--splash-accent);
    box-shadow: 0 0 0 3px rgba(30,110,235,0.18);
}
.portal-step-label {
    font-size: .6rem;
    color: var(--splash-text-muted);
    text-align: center;
    line-height: 1.3;
    padding: 0 2px;
}
.portal-step.done .portal-step-label  { color: var(--splash-green); font-weight: 600; }
.portal-step.active .portal-step-label { color: var(--splash-blue); font-weight: 700; }

/* Stepper — pending (amber) state */
.portal-step.pending .portal-step-dot {
    background: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.2);
}
.portal-step.pending .portal-step-label { color: #d97706; font-weight: 700; }

/* #1371: fecha por etapa (real o estimada con ~) debajo del label. Sin nowrap:
   un rango que cruza mes ("~28 jun–6 jul") debe poder partirse en 2 líneas —
   con nowrap fijaba el min-content de la columna y desbordaba la card en 360px. */
.portal-step-fecha {
    font-size: .6rem;
    color: var(--splash-text-muted);
    text-align: center;
    line-height: 1.2;
    margin-top: 1px;
    max-width: 100%;
    overflow-wrap: anywhere; /* garantía dura: la fecha nunca ensancha la columna */
}
/* En pantallas muy angostas, las etapas ya cumplidas ceden su fecha (aportan poco
   y las 6 columnas quedan justas) */
@media (max-width: 400px) {
    .portal-step.done .portal-step-fecha { display: none; }
}

/* Badge pill variants */
.portal-badge-green {
    background: var(--splash-green-light);
    color: var(--splash-green);
    border: 1px solid #B8E0C8;
}
.portal-badge-blue {
    background: var(--splash-light);
    color: var(--splash-accent);
    border: 1px solid #B8D4FA;
}
.portal-badge-amber {
    background: var(--splash-amber-bg);
    color: var(--splash-amber-text);
    border: 1px solid #fde68a;
}
.portal-badge-red {
    background: #FEE2E2;
    color: #DC2626;
    border: 1px solid #FECACA;
}
.portal-badge-gray {
    background: var(--splash-bg);
    color: var(--splash-text-secondary);
    border: 1px solid var(--splash-disabled-bg);
}

/* ── Collapsible Vertical Timeline ────────────────────────────── */
.portal-tl-wrap { margin-top: .6rem; }

.portal-tl-toggle {
    background: none;
    border: none;
    color: var(--splash-accent);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.portal-tl-toggle:hover { text-decoration: underline; }
.portal-tl-toggle i { font-size: .6rem; }

.portal-tl { margin-top: .5rem; padding-left: .15rem; }

.portal-tl-item {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    position: relative;
    padding-bottom: 12px;
    padding-left: .1rem;
}
/* Connecting vertical line */
.portal-tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: var(--splash-disabled-bg);
}

.portal-tl-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .5rem;
    color: #fff;
    margin-top: 1px;
    position: relative;
    z-index: 1;
}

/* Timeline dot color variants */
.portal-tl-success   .portal-tl-dot { background: var(--splash-green); }
.portal-tl-primary   .portal-tl-dot { background: var(--splash-accent); }
.portal-tl-info      .portal-tl-dot { background: var(--splash-accent); }
.portal-tl-amber     .portal-tl-dot { background: #f59e0b; }
.portal-tl-warning   .portal-tl-dot { background: #f59e0b; }
.portal-tl-secondary .portal-tl-dot { background: var(--splash-text-muted); }

.portal-tl-content {
    display: flex;
    flex-direction: column;
    min-height: 20px;
    justify-content: center;
}
.portal-tl-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--splash-text);
    line-height: 1.3;
}
.portal-tl-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--splash-text-secondary);
    line-height: 1.3;
}

/* ── Empty state ──────────────────────────────────────────────── */
.portal-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--splash-text-muted);
}
.portal-empty-icon { font-size: 3rem; margin-bottom: .75rem; line-height: 1; }
.portal-empty-title { font-weight: 600; color: var(--splash-text-secondary); font-size: .95rem; }
.portal-empty-sub   { font-size: .82rem; margin-top: .35rem; color: var(--splash-text-soft); }

/* ── Barra de navegacion inferior ────────────────────────────── */
.portal-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(68px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--splash-disabled-bg);
    display: flex;
    align-items: stretch;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,.07);
}
.portal-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--splash-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 env(safe-area-inset-bottom);
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
}
.portal-bottom-nav-item i {
    font-size: 1.25rem;
    line-height: 1;
}
.portal-bottom-nav-item.active,
.portal-bottom-nav-item:hover {
    color: var(--splash-blue);
    font-weight: 700;
}
.portal-bottom-nav-item .portal-nav-label {
    font-size: 12px;
    font-weight: 700;
}
/* Espacio para que el contenido no quede tapado por la barra */
.portal-main-with-bottom-nav {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
}

/* ── Footer / Social ─────────────────────────────────────────── */
.portal-footer-seguinos {
    font-size: 15px;
    font-weight: 600;
    color: var(--splash-text-secondary);
}
.portal-footer-social-icon {
    font-size: 1.75rem;
    color: var(--splash-text-secondary);
    transition: color .15s;
}
.portal-footer-social-icon:hover {
    color: var(--splash-blue);
}
.portal-footer-legal {
    font-size: 12px;
    font-weight: 500;
    color: var(--splash-text-muted);
}

/* ── Push notification banner ────────────────────────────────── */
.portal-push-banner {
    background: var(--splash-blue);
    color: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: .88rem;
}

/* ── PWA Install banner ─────────────────────────────────────── */
.portal-install-banner {
    background: #fff;
    border: 1px solid var(--splash-accent);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(30,110,235,0.10);
}
.portal-install-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.portal-install-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--splash-light);
    color: var(--splash-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.portal-install-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.portal-install-banner-text strong {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--splash-blue);
}
.portal-install-banner-text span {
    font-size: 13px;
    color: var(--splash-text-secondary);
}
.portal-install-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.portal-install-btn {
    flex: 1;
    background: var(--splash-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s;
}
.portal-install-btn:hover {
    background: #185CC2;
}
.portal-install-dismiss {
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--splash-border);
    border-radius: 10px;
    color: var(--splash-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: background .15s;
}
.portal-install-dismiss:hover {
    background: var(--splash-bg);
}

/* Footer install link */
.portal-install-footer-link {
    font-size: .88rem;
    color: var(--splash-accent) !important;
    font-weight: 700;
}
.portal-install-footer-link:hover {
    text-decoration: underline !important;
}

/* ── iOS Install Modal ──────────────────────────────────────── */
.portal-ios-install-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    animation: fadeIn .2s ease;
}
.portal-ios-install-modal {
    background: #fff;
    border-radius: 18px;
    padding: 24px 20px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    animation: slideUp .25s ease;
}
.portal-ios-install-title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--splash-blue);
    margin-bottom: 16px;
    text-align: center;
}
.portal-ios-install-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}
.portal-ios-install-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--splash-text);
    line-height: 1.4;
}
.portal-ios-install-num {
    width: 28px;
    height: 28px;
    background: var(--splash-light);
    color: var(--splash-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}
.portal-ios-install-close {
    width: 100%;
    background: var(--splash-accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Photo gallery badge ────────────────────────────────────── */
.portal-retiro-top a[class*="glightbox"] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.portal-foto-count {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
}

/* Botón "Descargar comprobante" del card de retiro (portal cliente) */
.portal-comprobante-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    padding: 10px 16px;
    background: #FFFFFF;
    color: var(--splash-accent);
    border: 1.5px solid var(--splash-accent);
    border-radius: 12px;
    font-family: 'Nunito Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.portal-comprobante-btn:hover { background: var(--splash-light); }
.portal-comprobante-btn:active { background: #D6E5FF; }
.portal-comprobante-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}
/* #902: aclaración cuando el comprobante todavía no está disponible. */
.portal-comprobante-hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--splash-text-secondary);
    text-align: center;
}
.portal-comprobante-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 1.05rem;
    line-height: 1;
}
.portal-comprobante-btn.is-loading .portal-comprobante-icon i { display: none; }
.portal-comprobante-btn.is-loading .portal-comprobante-icon::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--splash-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: portal-spin .8s linear infinite;
}
@keyframes portal-spin { to { transform: rotate(360deg); } }

/* Cancelación de retiro pendiente */
.portal-cancel-retiro-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    padding: 10px 16px;
    background: #FFFFFF;
    color: #DC2626;
    border: 1.5px solid #DC2626;
    border-radius: 12px;
    font-family: 'Nunito Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.portal-cancel-retiro-btn:hover { background: #FEF2F2; }
.portal-cancel-retiro-btn:active { background: #FEE2E2; }
.portal-cancel-retiro-btn + .portal-comprobante-btn { margin-top: 8px; }

body.portal-modal-open { overflow: hidden; }

.portal-cancel-modal[hidden] { display: none !important; }
.portal-cancel-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
}
.portal-cancel-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .48);
}
.portal-cancel-modal-panel {
    position: relative;
    width: min(100%, 440px);
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .22);
    padding: 18px;
    animation: portal-cancel-sheet-in .16s ease-out;
}
.portal-cancel-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.portal-cancel-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #FEE2E2;
    color: #DC2626;
    font-size: 1.15rem;
}
.portal-cancel-modal h2 {
    margin: 0 0 4px 0;
    font-family: 'Nunito Sans', system-ui, sans-serif;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--splash-text);
    font-weight: 800;
}
.portal-cancel-modal p {
    margin: 0;
    color: var(--splash-text-secondary);
    font-size: .92rem;
    line-height: 1.35;
}
.portal-cancel-note-label {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 800;
    color: var(--splash-text-secondary);
}
.portal-cancel-note {
    width: 100%;
    min-height: 82px;
    resize: vertical;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: .95rem;
    line-height: 1.35;
    color: var(--splash-text);
}
.portal-cancel-note:focus {
    outline: none;
    border-color: var(--splash-accent);
    box-shadow: 0 0 0 3px rgba(30, 110, 235, .16);
}
.portal-cancel-error {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #FECACA;
    border-radius: 10px;
    background: #FEF2F2;
    color: #B91C1C;
    font-size: .85rem;
    line-height: 1.35;
    font-weight: 700;
}
.portal-cancel-error[hidden] { display: none !important; }
.portal-cancel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}
.portal-cancel-secondary,
.portal-cancel-primary {
    min-height: 44px;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Nunito Sans', system-ui, sans-serif;
    font-size: .95rem;
    line-height: 1.2;
    font-weight: 800;
    cursor: pointer;
}
.portal-cancel-secondary {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: var(--splash-text-secondary);
}
.portal-cancel-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #DC2626;
    border: 1px solid #DC2626;
    color: #FFFFFF;
}
.portal-cancel-primary:disabled {
    opacity: .75;
    cursor: not-allowed;
}
.portal-cancel-primary.is-loading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid #FFFFFF;
    border-top-color: transparent;
    border-radius: 50%;
    animation: portal-spin .8s linear infinite;
}

@keyframes portal-cancel-sheet-in {
    from { transform: translateY(18px); opacity: .92; }
    to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 640px) {
    .portal-cancel-modal {
        align-items: center;
    }
}