/* ===============================================================
   TANDA v2 — app-extra.css
   Hoja de overrides para el subdominio app/.
   Carga DESPUES de app.css y neumorphism.css.
   Contiene:
     - Clases que reemplazan los style="..." inline de las plantillas
       originales (regla: nada de CSS inline en HTML)
     - Componentes nuevos agregados durante la migracion a PHP
     - Override del logo cuadrado + nombre al lado
   =============================================================== */

/* Fix scroll en modales de la app del cliente.
   app.css define .modal con align-items: center y .modal-card sin max-height
   ni overflow — cuando el contenido es más alto que la pantalla (modal de
   confirmar tanda con párrafos de términos), la card se extiende fuera del
   viewport y no se puede scrollear. Aquí limitamos el alto y damos scroll
   interno; align-items: flex-start adicional permite que cuando la card
   creza al máximo no se "centre cortada". */
.modal {
    align-items: flex-start;
    overflow-y: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.modal-card {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}


/* ---------------------------------------------------------------
   1. Topbar / placeholders ocultos
   --------------------------------------------------------------- */

/* Boton invisible en la derecha del topbar (placeholder de balance) */
.icon-btn--hidden { visibility: hidden; }


/* ---------------------------------------------------------------
   2. Subtitulos y descripciones bajo topbars
   --------------------------------------------------------------- */

.form-subtitle {
    margin: -0.5rem .25rem 1.5rem;
    font-size: .9rem;
}

.buscar-subtitle {
    margin: -.5rem .25rem 1.5rem;
    font-size: .9rem;
}

.section-tip {
    font-size: .8rem;
    margin-top: var(--sp-5);
    padding: 0 .5rem;
}

.section-tip-pago {
    font-size: .78rem;
    margin-top: var(--sp-4);
}


/* ---------------------------------------------------------------
   3. Banners de auth (registro / sesion cerrada / errores)
   --------------------------------------------------------------- */

.auth-banner {
    padding: .85rem 1.1rem;
    font-size: .9rem;
}
.auth-banner.is-success { color: var(--success); }
.auth-banner.is-info    { color: var(--text-muted); }


/* ---------------------------------------------------------------
   4. Alertas generales (login, registro, perfil, pagar)
   --------------------------------------------------------------- */

.alert {
    padding: .85rem 1.1rem;
    border-radius: 12px;
    font-size: .88rem;
    margin-bottom: 1rem;
    box-shadow: var(--neu-in-sm, inset 4px 4px 8px rgba(0,0,0,.06), inset -4px -4px 8px rgba(255,255,255,.6));
}
.alert.is-danger  { color: var(--danger);  }
.alert.is-success { color: var(--success); }
.alert.is-info    { color: var(--text-muted); }

/* Variante verde oscuro (más legible que el verde token sobre fondo claro) */
.alert.is-success.is-dark { color: #186938; font-weight: 600; }

/* Auto-dismiss: fade-out controlado por JS al expirar data-dismiss-after (ms) */
.alert.auto-dismiss { transition: opacity .4s ease, transform .4s ease; }
.alert.auto-dismiss.is-dismissed { opacity: 0; transform: translateY(-8px); pointer-events: none; }


/* ---------------------------------------------------------------
   5. Errores de campo
   --------------------------------------------------------------- */

.field-hint.is-error { color: var(--danger); }


/* ---------------------------------------------------------------
   6. Inicio (cards de tandas activas — spacing entre cards)
   --------------------------------------------------------------- */

.tanda-status + .tanda-status,
.has-spacer-top {
    margin-top: var(--sp-4);
}


/* ---------------------------------------------------------------
   7. Perfil del cliente
   --------------------------------------------------------------- */

/* Avatar grande del header del perfil */
.avatar-circle--lg {
    width: 84px;
    height: 84px;
    font-size: 1.8rem;
    margin: 0 auto var(--sp-3);
}
.profile-name   { font-size: 1.25rem; }
.profile-since  { font-size: .88rem; }

/* Spacing de bloques del perfil */
.notify-prompt-with-spacer { margin-top: var(--sp-6); }
.form-after-notify         { margin-top: var(--sp-3); }
.btn-cancelar-spacer       { margin-top: var(--sp-3); }
.btn-logout-spacer         { margin-top: var(--sp-6); }


/* ---------------------------------------------------------------
   8. Tanda-numero: modal confirmacion
   --------------------------------------------------------------- */

.confirm-card-flat         { margin-top: 0; }
.confirm-card-title-center {
    text-align: center;
    margin-bottom: var(--sp-2);
}
.confirm-card-subtitle {
    font-size: .85rem;
    margin-bottom: var(--sp-4);
}

.terms-warn-text {
    font-size: .78rem;
    margin-top: var(--sp-4);
}


/* ---------------------------------------------------------------
   9. Pagar: dd con texto pequeno (titular)
   --------------------------------------------------------------- */

.bank-info .dd-narrow { font-size: .95rem; }


/* ---------------------------------------------------------------
   10. Historial: badges de estatus en items
   --------------------------------------------------------------- */

.history-item.is-overdue { /* opcional: borde rojo o tinte */ }
.history-item.is-pending { /* opcional: tinte gris */ }

.history-item .badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    margin-top: .15rem;
}
.history-item .badge.is-success { background: rgba(24,160,88,.12);  color: var(--success); }
.history-item .badge.is-danger  { background: rgba(210,56,56,.12);  color: var(--danger);  }
.history-item .badge.is-overdue { background: rgba(210,56,56,.12);  color: var(--danger);  }
.history-item .badge.is-pending { background: rgba(108,120,145,.12); color: var(--text-muted); }

/* Link rapido "Pagar" en items vencidos del historial */
.pay-link {
    color: var(--accent);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}
.pay-link:hover { text-decoration: underline; }


/* ---------------------------------------------------------------
   11. Historial / Pagar: modal de ver imagen
   --------------------------------------------------------------- */

.preview-img {
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: 12px;
    margin-top: .5rem;
}


/* ---------------------------------------------------------------
   12. Brand: logo cuadrado uniforme + nombre al lado
       Aplica al login/registro del cliente (.app-brand)
   --------------------------------------------------------------- */

.app-brand .app-brand-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
}
.app-brand .app-brand-link img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.app-brand .brand-name {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
    line-height: 1;
}


/* ---------------------------------------------------------------
   13. Banners flotantes superiores (activar notif / instalar PWA)
       Markup: _install_banner.php — incluido desde _tabbar.php
       JS:    /assets/js/install-prompt.js
   --------------------------------------------------------------- */

.top-banners {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .65rem .75rem 0;
    pointer-events: none;          /* solo los banners visibles capturan eventos */
}

.top-banner {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    border-radius: 14px;
    background: var(--bg, #e8ecf3);
    box-shadow:
        6px 6px 14px rgba(0,0,0,.10),
        -6px -6px 14px rgba(255,255,255,.75);
    animation: top-banner-in .25s ease-out;
}
.top-banner[hidden] { display: none; }

@keyframes top-banner-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.top-banner-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.55);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,.06),
                inset -2px -2px 5px rgba(255,255,255,.7);
    color: var(--accent, #3b6cf6);
    flex-shrink: 0;
}

.top-banner-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    line-height: 1.25;
}
.top-banner-info strong {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
}
.top-banner-info small {
    font-size: .76rem;
    color: var(--text-muted);
}

.top-banner-btn {
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: .82rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    color: #fff;
    background: var(--accent, #3b6cf6);
    box-shadow: 3px 3px 7px rgba(0,0,0,.15),
                -2px -2px 6px rgba(255,255,255,.6);
    transition: transform .12s ease;
}
.top-banner-btn:active { transform: translateY(1px); }

.top-banner-dismiss {
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.top-banner-dismiss:hover { color: var(--text); }

/* Variantes por tipo (color del icono) */
.top-banner--notif   .top-banner-icon { color: #b88500; }
.top-banner--install .top-banner-icon { color: var(--accent, #3b6cf6); }

/* Empujar el contenido principal cuando hay banners visibles.
   Como los banners son fixed, sumamos un padding-top dinámico a .app-shell
   cuando #topBanners tiene al menos un banner sin [hidden]. Usamos selector
   :has() (soporte amplio en navegadores 2023+). */
@supports selector(:has(*)) {
    body:has(#topBanners .top-banner:not([hidden])) .app-shell {
        padding-top: 4.2rem;
    }
    body:has(#topBanners .top-banner:not([hidden]) ~ .top-banner:not([hidden])) .app-shell {
        padding-top: 8rem;
    }
}


/* ---------------------------------------------------------------
   14. Página standalone /instalar
   --------------------------------------------------------------- */

.install-card {
    text-align: center;
    padding: 1.5rem 1.25rem;
}
.install-illustration {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    margin: 0 auto var(--sp-3);
    background: var(--bg, #e8ecf3);
    box-shadow:
        8px 8px 16px rgba(0,0,0,.10),
        -8px -8px 16px rgba(255,255,255,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
.install-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.install-title {
    margin-bottom: var(--sp-2);
}
.install-lead {
    font-size: .92rem;
    color: var(--text-muted);
    margin-bottom: var(--sp-5);
    line-height: 1.4;
}
.install-steps {
    text-align: left;
    margin-top: var(--sp-3);
}
.install-steps-intro {
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: var(--sp-2);
}
.install-steps ol {
    padding-left: 1.2rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--text);
}
.install-foot {
    margin-top: var(--sp-5);
    font-size: .85rem;
}

/* Badges decorativos de tiendas. Mostramos UNO solo según el SO detectado
   en /assets/js/instalar-page.js — Android → Play, iOS → Apple. Por eso
   el contenedor está siempre centrado y el badge visible queda al medio. */
.store-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--sp-4);
}
.store-badge {
    width: 200px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}
.store-badge[hidden] { display: none; }


/* ---------------------------------------------------------------
   15. Recuperación de contraseña (OTP de voz)
   --------------------------------------------------------------- */

/* Input del código de 6 dígitos: grande, centrado y espaciado */
.otp-input {
    text-align: center;
    font-size: 1.6rem;
    letter-spacing: .5rem;
    font-weight: 700;
    padding-left: .5rem;   /* compensa el letter-spacing del último char */
}
.otp-input::placeholder {
    letter-spacing: .4rem;
    font-size: 1.3rem;
}

/* Check de éxito (pantalla final) */
.success-check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto var(--sp-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #186938;
    background: rgba(24,160,88,.12);
    box-shadow:
        6px 6px 14px rgba(0,0,0,.08),
        -6px -6px 14px rgba(255,255,255,.7);
}


/* ---------------------------------------------------------------
   16. Globo de chat IA (esquina inferior derecha, sobre el tabbar)
       Markup: _chat_widget.php (incluido vía _tabbar.php → autenticadas)
       JS:    /assets/js/chat.js
   --------------------------------------------------------------- */

/* Botón flotante (FAB). Se eleva por encima del tabbar dejando margen
   visible. El tabbar ocupa ~66px del bottom (incluyendo su offset de 16px),
   por eso ponemos el FAB en 96px → ~30px de espacio entre ambos. */
.chat-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: var(--accent, #3b6cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 5px 5px 14px rgba(0,0,0,.22),
                -3px -3px 10px rgba(255,255,255,.5);
    transition: transform .12s ease;
}
.chat-fab:active { transform: scale(.94); }

/* Panel del chat (mismo offset que el FAB para que aparezcan alineados) */
.chat-panel {
    position: fixed;
    right: 1rem;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 96;
    width: min(380px, calc(100vw - 2rem));
    height: min(70vh, 540px);
    display: flex;
    flex-direction: column;
    background: var(--bg, #e8ecf3);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 10px 10px 28px rgba(0,0,0,.22),
                -6px -6px 18px rgba(255,255,255,.55);
    animation: chat-in .2s ease-out;
}
.chat-panel[hidden] { display: none; }

@keyframes chat-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .85rem 1rem;
    background: var(--accent, #3b6cf6);
    color: #fff;
}
.chat-panel-title strong { display: block; font-size: .95rem; }
.chat-panel-title small  {
    display: block;
    font-size: .78rem;
    opacity: 1;
    font-weight: 600;
    color: #1e1e1e;
    text-shadow: 0 0 1px rgba(255,255,255,.45);
    margin-top: 1px;
}
.chat-head-actions {
    display: flex;
    gap: .35rem;
    align-items: center;
}
.chat-finalizar {
    border: 1px solid rgba(255,255,255,.55);
    background: transparent;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .55rem;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
}
.chat-finalizar:hover { background: rgba(255,255,255,.18); }
.chat-finalizar:disabled { opacity: .55; cursor: not-allowed; }

.chat-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: .1rem .35rem;
}

.chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.chat-msg {
    max-width: 82%;
    padding: .55rem .8rem;
    border-radius: 14px;
    font-size: .88rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.chat-msg--bot {
    align-self: flex-start;
    background: #fff;
    color: var(--text, #2a3142);
    border-bottom-left-radius: 4px;
    box-shadow: 2px 2px 6px rgba(0,0,0,.06);
}
.chat-msg--user {
    align-self: flex-end;
    background: var(--accent, #3b6cf6);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg--typing { opacity: .6; font-style: italic; }
.chat-msg .chat-msg-texto { white-space: pre-wrap; word-wrap: break-word; }
.chat-msg .chat-msg-hora {
    font-size: .68rem;
    opacity: .65;
    align-self: flex-end;
    line-height: 1;
}
.chat-msg--user .chat-msg-hora { color: rgba(255,255,255,.85); opacity: .85; }

/* Banner informativo sobre el chat (ej. "Tu consulta fue escalada con X").
   Color informativo (azul), no de error. */
.chat-notice {
    margin: .35rem .85rem;
    padding: .55rem .75rem;
    font-size: .82rem;
    font-weight: 500;
    border-radius: 10px;
    color: #14467a;
    background: #e1ecfa;
    border-left: 3px solid #3b6cf6;
}
.chat-notice[hidden] { display: none; }

.chat-form {
    display: flex;
    gap: .5rem;
    padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg, #e8ecf3);
    border-top: 1px solid rgba(0,0,0,.06);
}
.chat-input {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: .6rem .95rem;
    font-size: .9rem;
    background: #fff;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,.06),
                inset -2px -2px 5px rgba(255,255,255,.7);
}
.chat-input:focus { outline: 2px solid var(--accent, #3b6cf6); outline-offset: 1px; }
.chat-send {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: var(--accent, #3b6cf6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-send:disabled { opacity: .5; cursor: default; }