/* =====================================================================
   La Brújula — Clínica Broa
   Hoja de estilos principal
   =====================================================================
   Separada de index.html el 29 de julio de 2026 (Etapa 1 del plan de
   modernización del frontend). El contenido es EXACTAMENTE el mismo que
   estaba dentro del <style>; lo único que cambió es que se le quitó la
   sangría de 8 espacios que tenía por vivir dentro del HTML. No se
   agregó, quitó ni reordenó ninguna regla en esta separación.

   OJO CON LA CACHÉ: index.html se pide siempre fresco (tiene metas de
   Cache-Control no-cache en el <head>, puestas después de que un
   despliegue quedó "fantasma" porque el navegador seguía corriendo el
   JavaScript viejo). Este archivo NO hereda esas metas: el navegador SÍ
   lo va a guardar en caché. Por eso index.html lo pide con ?v=fecha.
   CADA VEZ QUE EDITES ESTE ARCHIVO, sube también el número de versión
   en el <link> de index.html — si no, la gente seguirá viendo los
   estilos viejos y va a parecer que el cambio no se subió.

   El otro <style> que hay en index.html (el de font-family Calibri) NO
   se tocó a propósito: vive dentro de una plantilla de JavaScript, es
   el estilo del documento de Word que se descarga al guardar una
   conversación. No es de la app.
   ===================================================================== */

:root {
    --broa-primary: #0e5572;
    --broa-primary-dark: #0a3f56;
    --broa-secondary: #50cbff;
    --broa-secondary-tint: #eaf8ff;
    --broa-bg: #f0f9ff;
    --broa-canvas: #f7fafc;
    --broa-ink: #1e293b;
    --broa-ink-soft: #5b6b7d;
    --broa-brass: #8a6220;
    --broa-brass-light: #f3e2c2;
    --broa-border: #e2e8f0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* CRÍTICO para el "desliza para recargar" de más abajo (setupPullToRefresh):
   sin esto, el navegador (sobre todo Chrome en Android) intenta activar
   SU PROPIO gesto nativo de recargar en cuanto detecta que jalas hacia
   abajo estando arriba del todo — compite con nuestro código por el mismo
   toque, y como el documento (html/body) nunca se desplaza de verdad en
   esta app (es un "app shell" fijo, agregando el contenido de #chat-container
   por dentro), el navegador se queda a medias sin completar ni una cosa ni
   la otra: eso explica que "no pasara nada" al deslizar. overscroll-behavior
   le dice al navegador "este documento no jala nada hacia abajo", y deja
   todo el gesto para nuestro código en #chat-container.
*/
html { overscroll-behavior-y: none; }
body { font-family: 'Nunito', sans-serif; background-color: var(--broa-canvas); height: 100vh; height: 100dvh; display: flex; flex-direction: row; overflow: hidden; overscroll-behavior-y: none; }

/* Columna principal (header + chat + input), a la derecha de la barra lateral en escritorio */
#app-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }

/* Panel único de navegación (conversaciones, nueva conversación, planes,
   salir) — mismo componente en móvil y escritorio, controlado por la
   clase .open (25/jul/2026, rediseño pedido por Jorge). Base: drawer
   fijo que se desliza desde la izquierda, empieza cerrado. En
   escritorio (≥900px) vuelve al flujo normal (empuja el contenido en
   vez de taparlo) y empieza abierto — ver "if (isDesktopWidth())
   openSidebar()" al final del script. */
#sidebar {
    display: flex; flex-direction: column; width: 284px; flex-shrink: 0;
    background: white; border-right: 1px solid var(--broa-border);
    padding: 18px 14px; overflow-y: hidden;
    position: fixed; top: 0; left: 0; height: 100%; z-index: 70;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 24px rgba(15,23,42,0.18);
}
#sidebar.open { transform: translateX(0); }
/* Fondo oscuro detrás del panel — solo tiene efecto en móvil (ver
   media query de abajo); en escritorio el panel no tapa nada, así que
   no hace falta oscurecer el resto. */
#sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 65; }
#sidebar-backdrop.show { display: block; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px 16px; }
.sidebar-brand .mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(155deg, var(--broa-primary), var(--broa-primary-dark)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-brand .mark svg { width: 18px; height: 18px; }
.sidebar-brand .name { font-weight: 800; font-size: 0.95rem; color: var(--broa-primary); line-height: 1.2; }
.sidebar-brand .sub { font-size: 0.7rem; color: var(--broa-ink-soft); font-weight: 600; }
.sidebar-close-btn { background: none; border: none; color: var(--broa-ink-soft); font-size: 1.15rem; line-height: 1; cursor: pointer; margin-left: auto; padding: 4px 8px; border-radius: 8px; flex-shrink: 0; }
.sidebar-close-btn:hover { background: var(--broa-secondary-tint); color: var(--broa-primary); }
.sidebar-section-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--broa-ink-soft); padding: 0 4px 8px; }
/* Altura acotada + scroll propio: con hasta 10 conversaciones guardadas
   (tope real del producto), la lista no debe poder crecer más que el
   panel mismo. */
.sidebar-list { max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.sidebar-new-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    background: var(--broa-primary); color: white; border: none; border-radius: 14px;
    padding: 11px; font-family: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer;
    margin-top: 10px; transition: 0.15s; flex-shrink: 0;
}
.sidebar-new-btn:hover { background: var(--broa-primary-dark); }
/* Espacio flexible real entre "Nueva conversación" y el bloque de
   cuenta — así Planes/Salir quedan pegados hasta abajo del panel,
   sin importar cuántas conversaciones haya arriba. */
.sidebar-spacer { flex: 1; }
.sidebar-account { border-top: 1px solid var(--broa-border); margin-top: 12px; padding-top: 10px; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.sidebar-account-name { font-size: 0.8rem; font-weight: 700; color: var(--broa-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px 8px; }
.sidebar-nav-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: none; border: none; border-radius: 12px; padding: 10px 8px;
    font-family: inherit; font-size: 0.88rem; font-weight: 700; color: var(--broa-ink);
    cursor: pointer; transition: 0.15s; text-decoration: none; box-sizing: border-box;
}
.sidebar-nav-btn:hover { background: var(--broa-secondary-tint); color: var(--broa-primary); }

/* Header rediseñado: grid de 3 columnas (menú | logo centrado | espacio
   vacío) — el espacio vacío de la derecha existe a propósito, del
   mismo ancho que la columna del menú, para que el logo quede
   centrado de verdad y no solo "a ojo". */
header { background: white; padding: 10px 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; border-bottom: 1px solid var(--broa-border); box-shadow: 0 1px 3px rgba(15,23,42,0.04); flex-shrink: 0; }

/* Aviso fijo de cuenta desactivada (Fase B del panel, 29/jul/2026).
   Oculto por defecto — revisarCuentaActiva() lo muestra solo si la
   cuenta lo está. Tono ámbar/brass (no rojo): es un aviso, no un
   error del sistema — la persona puede seguir usando la app, solo
   no puede mandar mensajes nuevos. flex-shrink:0 por el mismo motivo
   que el header: este layout es un app-shell fijo, solo #chat-container
   se desplaza por dentro. */
#account-suspended-banner {
    display: none;
    flex-shrink: 0;
    background: var(--broa-brass-light);
    /* 30/jul/2026: --broa-brass (#8a6220) sobre --broa-brass-light daba
       4.28:1 — por debajo del mínimo AA de 4.5:1 (WCAG 1.4.3). #6f4e18
       ya existe en el gradiente de button.send-btn más abajo; reutilizarlo
       aquí da 5.93:1 sin inventar un tono nuevo. */
    color: #6f4e18;
    font-size: 0.83rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    padding: 10px 20px;
    border-bottom: 1px solid var(--broa-border);
}
#account-suspended-banner a { color: inherit; text-decoration: underline; }
.header-logo { height: 72px; width: auto; justify-self: center; }
.header-actions { justify-self: start; display: flex; align-items: center; gap: 6px; }
.menu-trigger {
    background: var(--broa-bg); color: var(--broa-primary); border: 1.5px solid var(--broa-secondary);
    border-radius: 14px; padding: 11px 18px; font-family: inherit; font-size: 0.92rem; font-weight: 700;
    cursor: pointer; transition: 0.15s; white-space: nowrap; display: flex; align-items: center; gap: 7px;
}
.menu-trigger:hover { background: var(--broa-primary-dark); border-color: var(--broa-primary-dark); color: white; }
.menu-trigger .hamburger { font-size: 1.25rem; line-height: 1; }
/* Ícono de guardar/compartir, en la 3ª columna del header (antes vacía,
   usada para que el logo quede centrado de verdad). Reemplaza al botón
   "⬇ Guardar conversación" que vivía en el menú desplegable de antes:
   es una acción sobre la conversación actual, no de navegación, así
   que no le corresponde vivir en el panel lateral. */
.header-save-btn {
    justify-self: end; background: var(--broa-bg); color: var(--broa-primary);
    border: 1.5px solid var(--broa-secondary); border-radius: 12px; width: 42px; height: 42px;
    font-size: 1.15rem; line-height: 1; cursor: pointer; transition: 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.header-save-btn:hover { background: var(--broa-primary-dark); border-color: var(--broa-primary-dark); color: white; }
@media (max-width: 640px) {
    .header-logo { height: 52px; }
    .menu-trigger { padding: 9px 12px; font-size: 0.8rem; }
    .header-save-btn { width: 38px; height: 38px; font-size: 1rem; }
}

/* Candado de sesión: pantalla completa hasta que haya cuenta iniciada */
.gate-overlay { display: flex; flex-direction: column; align-items: center; position: fixed; inset: 0; z-index: 40; background: var(--broa-canvas); padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gate-overlay.hidden { display: none; }
.gate-card { max-width: 420px; width: 100%; margin: auto 0; text-align: center; background: white; border-radius: 22px; padding: 34px 26px; box-shadow: 0 12px 40px rgba(15,23,42,0.12); }
.gate-mark { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: linear-gradient(155deg, var(--broa-primary), var(--broa-primary-dark)); display: flex; align-items: center; justify-content: center; }
.gate-logo { display: block; max-width: 240px; width: 80%; height: auto; margin: 0 auto 18px; }
.gate-mark svg { width: 30px; height: 30px; }
.gate-card h2 { color: var(--broa-primary); font-size: 1.15rem; margin: 0 0 10px; }
.gate-card p { color: var(--broa-ink-soft); font-size: 0.88rem; line-height: 1.55; margin-bottom: 22px; }
.gate-google { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border-radius: 24px; border: 1.5px solid var(--broa-border); background: white; color: var(--broa-ink); font-family: inherit; font-weight: 700; font-size: 0.9rem; text-decoration: none; margin-bottom: 10px; transition: 0.15s; }
.gate-google:hover { border-color: var(--broa-secondary); background: var(--broa-secondary-tint); }
.gate-secondary { width: 100%; padding: 12px; border-radius: 24px; border: none; background: var(--broa-primary); color: white; font-family: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer; transition: 0.15s; }
.gate-secondary:hover { background: var(--broa-primary-dark); }
.gate-note { font-size: 0.72rem; color: var(--broa-ink-soft); margin-top: 16px; }
.gate-divider { width: 48px; height: 1px; background: var(--broa-border); margin: 2px auto 14px; }
.gate-checks { list-style: none; text-align: left; margin: 0 0 22px; padding: 0; }
.gate-checks li { font-size: 0.85rem; color: var(--broa-ink-soft); line-height: 1.5; margin-bottom: 9px; }
.gate-checks li:last-child { margin-bottom: 0; }
/* 30/jul/2026: #16a34a daba 3.30:1 sobre blanco — bajo el mínimo AA de
   4.5:1 (WCAG 1.4.3; cuenta como texto porque confirma un beneficio en
   la lista, no es decorativo). #15803d ya existe en .plan-estado.activo;
   reutilizarlo aquí da 5.02:1. */
.gate-checks .check { color: #15803d; font-weight: 800; }
.sidebar-brand .tagline { font-size: 0.62rem; color: var(--broa-ink-soft); font-weight: 600; margin-top: 1px; }

/* Guardar / compartir conversación */
.save-overlay { display: none; flex-direction: column; align-items: center; position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 50; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.save-overlay.open { display: flex; }
.save-modal { background: white; border-radius: 20px; max-width: 360px; width: 100%; margin: auto 0; padding: 24px; box-shadow: 0 16px 44px rgba(15,23,42,0.16); }
.save-modal h2 { font-size: 1.05rem; color: var(--broa-primary); margin-bottom: 4px; }
.save-modal p.hint { font-size: 0.8rem; color: var(--broa-ink-soft); margin-bottom: 16px; line-height: 1.4; }
.save-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--broa-border); background: var(--broa-canvas); font-family: inherit; font-size: 0.9rem; color: var(--broa-ink); cursor: pointer; text-align: left; transition: 0.15s; }
.save-option:hover { background: var(--broa-secondary-tint); border-color: var(--broa-secondary); }
.save-option .icon { font-size: 1.2rem; line-height: 1; }
.save-close { display: block; margin: 10px auto 0; padding: 6px 10px; background: none; border: none; color: var(--broa-ink-soft); font-size: 0.82rem; cursor: pointer; }
.save-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--broa-primary-dark); color: white; padding: 10px 18px; border-radius: 20px; font-size: 0.85rem; box-shadow: 0 4px 14px rgba(0,0,0,0.2); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.save-toast.show { opacity: 1; }

/* Desliza-para-recargar propio. La app usa un "app-shell" fijo (el
   body nunca se desplaza — ver "body { overflow: hidden }" arriba;
   solo #chat-container se desplaza por dentro), a propósito, para
   que el header y la caja de escribir no se vayan con el scroll.
   Eso significa que el gesto nativo del navegador nunca se activa
   (necesita que el documento mismo sea lo que se desplaza), así que
   hay que construirlo a mano — igual que lo hacen Gmail o Twitter en
   su versión web móvil. */
#pull-refresh {
    position: fixed; top: 0; left: 50%; z-index: 45;
    transform: translate(-50%, -100%);
    display: flex; align-items: center; gap: 6px;
    background: white; color: var(--broa-ink-soft); font-size: 0.78rem; font-weight: 700;
    padding: 9px 16px; border-radius: 20px;
    box-shadow: 0 4px 14px rgba(15,23,42,0.16);
    white-space: nowrap; pointer-events: none;
}
#pull-refresh.jalando { transition: none; } /* durante el arrastre, sigue al dedo sin retraso */
#pull-refresh:not(.jalando) { transition: transform 0.2s ease; } /* al soltar, regresa con animación */
#pull-refresh .arrow { display: inline-block; transition: transform 0.15s ease; }
#pull-refresh.listo { color: var(--broa-primary); }
#pull-refresh.listo .arrow { transform: rotate(180deg); }

/* Modal de confirmación propio (mismo patrón que save-overlay). Sustituye
   al confirm() del navegador, que se veía como una alerta del sistema —
   ajeno a la página y sin los colores de la marca. */
.confirm-overlay { display: none; flex-direction: column; align-items: center; justify-content: center; position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 80; padding: 20px; }
.confirm-overlay.open { display: flex; }
.confirm-modal { background: white; border-radius: 20px; max-width: 360px; width: 100%; padding: 24px; box-shadow: 0 16px 44px rgba(15,23,42,0.16); }
.confirm-modal h2 { font-size: 1.05rem; color: var(--broa-primary); margin-bottom: 10px; line-height: 1.35; }
.confirm-modal p { font-size: 0.87rem; color: var(--broa-ink); line-height: 1.5; margin-bottom: 8px; }
.confirm-modal p.aviso { font-size: 0.8rem; color: var(--broa-ink-soft); }
.confirm-actions { display: flex; gap: 8px; margin-top: 18px; }
.confirm-actions button { flex: 1; padding: 11px; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: 0.87rem; cursor: pointer; transition: 0.15s; border: none; }
.confirm-cancel { background: var(--broa-canvas); color: var(--broa-ink); border: 1px solid var(--broa-border) !important; }
.confirm-cancel:hover { background: var(--broa-secondary-tint); }
.confirm-ok { background: var(--broa-primary); color: white; }
.confirm-ok:hover { background: var(--broa-primary-dark); }
/* Variante para acciones que destruyen algo: el botón deja de ser del
   color de marca, para que no se confirme en automático por costumbre. */
.confirm-ok.peligro { background: #b91c1c; }
.confirm-ok.peligro:hover { background: #991b1b; }

/* Modales de cuenta / login-registro / historial (mismo patrón que save-overlay) */
.account-overlay, .auth-overlay, .historial-overlay { display: none; flex-direction: column; align-items: center; position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 50; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.account-overlay.open, .auth-overlay.open, .historial-overlay.open { display: flex; }
.account-modal, .auth-modal, .historial-modal { background: white; border-radius: 20px; max-width: 380px; width: 100%; margin: auto 0; padding: 24px; box-shadow: 0 16px 44px rgba(15,23,42,0.16); }
.account-modal h2, .auth-modal h2, .historial-modal h2 { font-size: 1.05rem; color: var(--broa-primary); margin-bottom: 4px; }
.account-modal p.hint, .auth-modal p.hint, .historial-modal p.hint { font-size: 0.8rem; color: var(--broa-ink-soft); margin-bottom: 16px; line-height: 1.4; }
.account-close, .auth-close, .historial-close { display: block; margin: 14px auto 0; padding: 6px 10px; background: none; border: none; color: var(--broa-ink-soft); font-size: 0.82rem; cursor: pointer; }

.account-name { font-weight: 700; color: var(--broa-ink); margin-top: 6px; }
.account-email { font-size: 0.82rem; color: var(--broa-ink-soft); margin-bottom: 16px; }
.account-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--broa-border); background: var(--broa-canvas); font-family: inherit; font-size: 0.9rem; color: var(--broa-ink); cursor: pointer; text-align: left; transition: 0.15s; }
.account-option:hover { background: var(--broa-secondary-tint); border-color: var(--broa-secondary); }

/* --- Modal de planes y suscripción --- */
.plans-modal { max-width: 400px; }
.plan-card { border: 1px solid var(--broa-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; background: var(--broa-canvas); }
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.plan-name { font-weight: 800; color: var(--broa-primary); font-size: 0.95rem; }
.plan-badge { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--broa-brass); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.plan-price { font-weight: 700; color: var(--broa-ink); font-size: 1.05rem; margin-bottom: 4px; }
.plan-price span { font-weight: 500; font-size: 0.76rem; color: var(--broa-ink-soft); }
.plan-desc { font-size: 0.79rem; color: var(--broa-ink-soft); line-height: 1.4; margin-bottom: 10px; }
.plan-btn { width: 100%; padding: 11px; border: none; border-radius: 12px; background: var(--broa-primary); color: #fff; font-family: inherit; font-weight: 700; font-size: 0.87rem; cursor: pointer; transition: 0.15s; }
.plan-btn:hover { background: var(--broa-primary-dark); }
.plan-btn:disabled { opacity: 0.6; cursor: default; }

/* Estado real del plan de la persona (bloque 5) */
.plan-estado { border-radius: 14px; padding: 13px 15px; margin-bottom: 14px; font-size: 0.83rem; line-height: 1.5; }
.plan-estado.activo { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.plan-estado.cancelada { background: var(--broa-secondary-tint); border: 1px solid var(--broa-secondary); color: var(--broa-primary); }
.plan-estado.gratis { background: var(--broa-canvas); border: 1px solid var(--broa-border); color: var(--broa-ink-soft); }
.plan-estado strong { color: inherit; }
.plan-cancel-btn { width: 100%; padding: 11px; border: 1.5px solid var(--broa-border); border-radius: 12px; background: white; color: var(--broa-ink-soft); font-family: inherit; font-weight: 700; font-size: 0.84rem; cursor: pointer; transition: 0.15s; }
.plan-cancel-btn:hover { border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }
.plan-cancel-btn:disabled { opacity: 0.6; cursor: default; }
/* Aviso del articulo 76 Bis de la LFPC — obligatorio junto al boton de pago */
.plan-aviso-legal { font-size: 0.72rem; line-height: 1.5; color: var(--broa-ink-soft); background: var(--broa-canvas); border: 1px solid var(--broa-border); border-radius: 12px; padding: 11px 13px; margin-top: 4px; }
.plan-aviso-legal strong { color: var(--broa-ink); }

.auth-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.auth-tab { flex: 1; padding: 9px; border-radius: 12px; border: 1px solid var(--broa-border); background: var(--broa-canvas); color: var(--broa-ink-soft); font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.auth-tab.active { background: var(--broa-primary); color: white; border-color: var(--broa-primary); }
.auth-field { display: block; font-size: 0.8rem; color: var(--broa-ink-soft); font-weight: 600; margin: 10px 0 4px; }
.auth-field input { width: 100%; border: 1.5px solid var(--broa-border); border-radius: 12px; padding: 10px 12px; font-family: inherit; font-size: 0.9rem; color: var(--broa-ink); outline: none; }
.auth-field input:focus { border-color: var(--broa-secondary); box-shadow: 0 0 0 3px var(--broa-secondary-tint); }
.auth-submit { width: 100%; margin-top: 14px; background: var(--broa-primary); color: white; border: none; border-radius: 24px; padding: 12px; font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: 0.15s; }
.auth-submit:hover { background: var(--broa-primary-dark); }
.auth-submit:disabled { opacity: 0.6; cursor: default; }
.auth-forgot-link { display: block; text-align: right; font-size: 0.76rem; font-weight: 700; color: var(--broa-ink-soft); text-decoration: none; margin: -2px 0 2px; padding: 7px 0; }
.auth-forgot-link:hover { color: var(--broa-primary); text-decoration: underline; }
.retro-textarea { width: 100%; border: 1.5px solid var(--broa-border); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 0.9rem; color: var(--broa-ink); outline: none; resize: vertical; min-height: 120px; line-height: 1.55; }
.retro-textarea:focus { border-color: var(--broa-secondary); box-shadow: 0 0 0 3px var(--broa-secondary-tint); }
.retro-contador { text-align: right; font-size: 0.72rem; color: var(--broa-ink-soft); margin-top: 5px; }
.retro-aviso { border-radius: 10px; padding: 11px 13px; font-size: 0.82rem; line-height: 1.55; margin-bottom: 12px; }
.retro-aviso.ok { background: var(--broa-secondary-tint); color: var(--broa-primary-dark); }
.retro-aviso.error { background: #fdecea; color: #b42318; }
.auth-divider { text-align: center; font-size: 0.75rem; color: var(--broa-ink-soft); margin: 16px 0; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border-radius: 24px; border: 1.5px solid var(--broa-border); background: white; color: var(--broa-ink); font-family: inherit; font-size: 0.88rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: 0.15s; }
.auth-google:hover { border-color: var(--broa-secondary); background: var(--broa-secondary-tint); }
.auth-msg { font-size: 0.82rem; border-radius: 12px; padding: 9px 12px; margin-top: 10px; display: none; }
.auth-msg.error { display: block; background: #fef2f2; color: #b91c1c; }
.auth-msg.success { display: block; background: #f0fdf4; color: #15803d; }

/* Casillas de consentimiento (Cambio 1 de la auditoría de privacidad) */
.consent-check { display: flex; align-items: flex-start; gap: 9px; text-align: left; margin: 12px 0; cursor: pointer; }
.consent-check input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--broa-primary); cursor: pointer; }
.consent-check span { font-size: 0.76rem; line-height: 1.45; color: var(--broa-ink-soft); }
.consent-check span a { color: var(--broa-primary); font-weight: 700; }

/* Enlaces (no son <button>, así que no aceptan "disabled" de verdad) que
   quedan visualmente bloqueados hasta marcar la casilla obligatoria */

.historial-item { display: block; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--broa-border); background: var(--broa-canvas); font-family: inherit; cursor: pointer; transition: 0.15s; }
.historial-item:hover { background: var(--broa-secondary-tint); border-color: var(--broa-secondary); }
.historial-item.active { background: var(--broa-secondary-tint); border-color: var(--broa-secondary); }
.historial-item .titulo { font-size: 0.9rem; color: var(--broa-ink); font-weight: 600; display: block; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historial-item .fecha { font-size: 0.74rem; color: var(--broa-ink-soft); }
.historial-empty { font-size: 0.85rem; color: var(--broa-ink-soft); text-align: center; padding: 20px 0; }
/* La conversación y su botón de borrar van en una fila con posición
   relativa, y el botón va encima en absoluto: un <button> no puede
   contener otro <button> (marcado inválido), así que son hermanos. */
.historial-row { position: relative; }
.historial-row .historial-item { padding-right: 42px; }
.historial-del {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    background: none; border: none; color: var(--broa-ink-soft); font-size: 0.9rem;
    line-height: 1; padding: 7px; border-radius: 9px; cursor: pointer; transition: 0.15s;
}
.historial-del:hover { background: #fee2e2; color: #b91c1c; }
#sidebar .historial-item { padding: 10px 12px; margin-bottom: 4px; }

/* Chat */
#chat-container { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto; width: 100%; }
.message-row { display: flex; align-items: flex-end; }
.message-row.user { justify-content: flex-end; }
.message-row.bot { justify-content: flex-start; }
.avatar { height: 36px; width: 36px; margin-right: 8px; }
.bubble { padding: 14px 16px; max-width: 85%; box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 4px 12px rgba(15,23,42,0.04); font-size: 0.95rem; line-height: 1.58; }
.bot .bubble { background: white; color: var(--broa-ink); border: none; border-radius: 4px 18px 18px 18px; }
.user .bubble { background: var(--broa-primary); color: white; border-radius: 18px 4px 18px 18px; box-shadow: 0 2px 8px rgba(14,85,114,0.22); }
.age-btn { background: var(--broa-bg); color: var(--broa-primary); font-size: 0.88rem; font-weight: 700; padding: 9px 16px; border-radius: 20px; border: 1.5px solid transparent; cursor: pointer; transition: 0.15s; }
/* El transform/sombra del 29/jul/2026 va DENTRO de :not(:disabled),
   no en un .age-btn:hover suelto: si no, los botones ya deshabilitados
   (los de las edades que no se eligieron) también crecerían al pasar
   el cursor, dando a entender que se pueden tocar. */
.age-btn:hover:not(:disabled) { background: var(--broa-secondary-tint); border-color: var(--broa-secondary); transform: scale(1.02); box-shadow: 0 2px 8px rgba(14,85,114,0.15); }
.age-btn:disabled { opacity: 0.4; cursor: default; }

/* Chips de temas frecuentes y feedback */
.topic-row { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 40px; }
.topic-btn { background: var(--broa-secondary-tint); color: var(--broa-primary-dark); border: 1.5px solid var(--broa-secondary); font-family: inherit; font-size: 0.83rem; font-weight: 700; padding: 8px 14px; border-radius: 18px; cursor: pointer; transition: 0.15s; }
.topic-btn:hover { background: var(--broa-secondary); color: white; }
.feedback-row { display: flex; align-items: center; gap: 10px; margin-left: 40px; font-size: 0.85rem; color: var(--broa-ink-soft); }
.feedback-btn { background: white; border: 1.5px solid var(--broa-border); border-radius: 50%; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; transition: 0.15s; }
.feedback-btn:hover { border-color: var(--broa-secondary); transform: scale(1.08); }

/* Input */
footer { background: var(--broa-canvas); padding: 10px 20px 14px; flex-shrink: 0; }
/* Color y peso subidos el 29/jul/2026: el gris anterior (#94a3b8)
   quedaba por debajo del contraste mínimo recomendado. Va en la regla
   base, no en la media query de escritorio, porque el problema de
   contraste existe igual en móvil. */
.footer-links { text-align: center; font-size: 0.72rem; color: #64748b; font-weight: 600; margin-top: 10px; }
.footer-links a { color: var(--broa-ink-soft); font-weight: 600; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.input-wrapper {
    display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto;
    background: white; border: 1.5px solid var(--broa-border); border-radius: 28px;
    padding: 6px 6px 6px 18px; box-shadow: 0 2px 10px rgba(15,23,42,0.05);
}
/* 30/jul/2026: input[type="text"] de abajo quita el outline nativo
   (outline:none, sin borde propio) y no tenía NINGÚN reemplazo — quien
   navega por teclado no podía saber si el campo de mensaje, el más
   usado de toda la app, tenía el foco. Mismo patrón visual que ya usan
   .auth-field input:focus y .retro-textarea:focus, aplicado aquí al
   contenedor con :focus-within porque el borde vive en .input-wrapper,
   no en el <input> mismo. */
.input-wrapper:focus-within { border-color: var(--broa-secondary); box-shadow: 0 0 0 3px var(--broa-secondary-tint); }
input[type="text"] { flex: 1; border: none; outline: none; color: var(--broa-ink); font-size: 0.96rem; font-family: inherit; background: transparent; padding: 8px 0; }
/* 29/jul/2026: el placeholder por defecto del navegador queda muy
   tenue. Va en la regla base — el problema de legibilidad es igual
   en móvil que en escritorio. */
input::placeholder { opacity: 0.85; }
button.send-btn {
    background: linear-gradient(155deg, var(--broa-brass), #6f4e18); color: white;
    border-radius: 50%; width: 42px; height: 42px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(138,98,32,0.32); transition: 0.15s;
}
button.send-btn:hover:not(:disabled) { transform: scale(1.05); }
button.send-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
button.send-btn svg { width: 19px; height: 19px; }

/* "Escribiendo…": la aguja de una brújula en vez de puntitos */
/* El display:flex va atado al id #typing-indicator, no solo a la clase,
   a propósito: ese id se quita en cuanto la fila deja de ser el
   indicador y pasa a ser la respuesta. Así, aunque alguien olvidara
   quitar la clase typing-bubble al reutilizar la fila, el flex ya no
   aplica y la respuesta no se puede volver a partir en columnas. */
#typing-indicator .typing-bubble { display: flex; align-items: center; gap: 8px; }
.compass-spin { width: 20px; height: 20px; flex-shrink: 0; }
.compass-spin .needle { transform-origin: 12px 12px; animation: compassWobble 1.8s ease-in-out infinite; }
@keyframes compassWobble { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@media (prefers-reduced-motion: reduce) { .compass-spin .needle { animation: none; } }
.typing-label { font-size: 0.82rem; color: var(--broa-ink-soft); font-style: italic; }

/* ================================================================
   MEDIA QUERIES DE ESCRITORIO — AL FINAL DEL BLOQUE, A PROPÓSITO
   ================================================================
   Movidas aquí el 29/jul/2026. Antes vivían arriba, junto a los
   estilos del panel lateral, y por eso NO funcionaban: una media
   query no agrega especificidad, así que cuando la regla base del
   mismo selector aparece DESPUÉS en el archivo, la base gana. Los
   tamaños de escritorio que se subieron el 28 de julio nunca se
   llegaron a ver por esto — .sidebar-brand .name (1.08rem) quedaba
   pisada por la regla base de más abajo (0.95rem). Al estar al
   final, todo lo de aquí gana sin necesidad de !important.

   REGLA PARA EL FUTURO: cualquier ajuste de escritorio va AQUÍ,
   nunca a media camino del archivo. */
@media (min-width: 900px) {
    #sidebar {
        position: relative; height: 100%; z-index: 1; box-shadow: none;
        transform: none; transition: width 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
        width: 310px; /* un poco más ancho que en móvil, para que el texto más grande no se apriete */
        padding: 24px 18px; /* 29/jul/2026: un poco más de aire alrededor del texto ya más grande */
    }
    #sidebar:not(.open) { width: 0; padding-left: 0; padding-right: 0; overflow: hidden; border-right-color: transparent; }
    #sidebar-backdrop { display: none !important; }

    /* Textos del panel lateral, más grandes solo en escritorio —
       pedido de Jorge el 28 de julio ("en escritorio los veo muy
       chicos") y subidos otro poco el 29. Los valores del 28 nunca
       se llegaron a ver: la media query vivía antes de las reglas
       base y quedaba pisada (ver la nota grande de arriba). */
    .sidebar-brand .name { font-size: 1.15rem; }
    .sidebar-brand .sub { font-size: 0.82rem; }
    .sidebar-section-label { font-size: 0.78rem; }
    .sidebar-new-btn { font-size: 1rem; padding: 13px; }
    .sidebar-account-name { font-size: 0.9rem; }
    .sidebar-nav-btn { font-size: 1.05rem; padding: 12px 10px; gap: 10px; }
    .historial-item .titulo { font-size: 1.08rem; }
    .historial-item .fecha { font-size: 0.82rem; }

    /* ---- Segunda subida de tamaños en escritorio (29/jul/2026) ----
       Pedido de Jorge: "todavía es muy chica" en escritorio, y que se
       vea bien en pantallas de 13 a 20 pulgadas. TODO va dentro de
       esta media query (≥900px): en móvil no cambia absolutamente
       nada. */

    /* Chat */
    .bubble { font-size: 1.05rem; line-height: 1.65; padding: 16px 20px; max-width: 80%; }
    #chat-container { padding: 28px 32px; gap: 20px; }

    /* Mensaje de bienvenida: que destaque del resto */
    #welcome-row .bubble {
        background: linear-gradient(135deg, #ffffff, #f0f9ff);
        border: 1px solid var(--broa-border);
        font-size: 1.08rem;
        padding: 18px 22px;
    }

    /* Campo de texto (aplica también al del registro, a propósito) */
    input[type="text"] { font-size: 1rem; }

    /* Botones de edad y de temas frecuentes */
    .age-btn { font-size: 0.95rem; }
    .topic-btn { font-size: 0.92rem; padding: 10px 16px; }
    .topic-row { gap: 10px; margin-left: 48px; }

    /* Pie */
    .footer-links { font-size: 0.82rem; }

    /* Header */
    header { padding: 14px 24px; }
    .header-logo { height: 90px; }

    /* Panel lateral: los tamaños del 29 de julio ya quedaron
       consolidados arriba, en el bloque del panel — no se repiten
       aquí para no dejar la misma regla escrita dos veces. */

    /* Modal de inicio de sesión */
    .gate-card { max-width: 480px; padding: 40px 32px; }
    .gate-card h2 { font-size: 1.3rem; }
    .gate-card p { font-size: 0.95rem; line-height: 1.65; }
}

/* Pantallas grandes (monitores de 20"+): la columna de lectura crece
   un poco. Sin esto, subir el tamaño de letra SIN darle más ancho al
   contenedor deja las líneas más cortas que antes — más renglones
   partidos, no mejor lectura. Ver la nota de la entrega del 29 de
   julio: por eso NO se aplicó el max-width de 65% que se había
   propuesto para .bubble. */
@media (min-width: 1280px) {
    #chat-container { max-width: 860px; }
}

