/* ============================================================================
   AutoAmiga — sistema visual

   Escalas: el espaciado va en multiplos de 4 px (--s1 ... --s8) y el texto en
   pasos fijos (--t-xs ... --t-2xl). Nada de valores sueltos: si un margen no
   sale de la escala, es que el componente necesita replantearse.

   Paleta: fondo grafito azulado y un unico acento ambar-calido. El ambar es
   deliberado: es el color de los testigos del tablero, el dominio de la app.
   ============================================================================ */

:root {
    /* Superficies */
    --bg:          #0B0F14;
    --bg-soft:     #111823;
    --surface:     #151D29;
    --surface-2:   #1B2533;
    --surface-3:   #223044;
    --line:        #24303F;
    --line-soft:   #1D2634;

    /* Texto */
    --text:        #E8EDF3;
    --text-muted:  #93A2B5;
    --text-dim:    #6B7A8D;

    /* Acento y significado */
    --accent:      #FF8A3D;
    --accent-2:    #FFC36B;
    --accent-deep: #E8622A;
    --accent-rgb:  255, 138, 61;
    --bg-rgb:      11, 15, 20;
    --on-accent:   #1A0D03;
    /* Urgencia alta: color propio, no depende del acento de marca */
    --urg-alta:    #FF8A3D;
    --urg-alta-rgb: 255, 138, 61;
    --ok:          #43D17A;
    --warn:        #FFC857;
    --danger:      #FF6B5E;
    --critical:    #FF3B30;

    /* Espaciado (escala de 4 px) */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

    /* Tipografia */
    --t-xs:   0.69rem;
    --t-sm:   0.78rem;
    --t-base: 0.92rem;
    --t-lg:   1.05rem;
    --t-xl:   1.3rem;
    --t-2xl:  1.6rem;

    /* Formas */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-full: 999px;

    --shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.28);

    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================================
   Paleta AutoAmiga (12-oct, decidida por Juan): teal; clara por defecto y oscura si el equipo esta en modo oscuro, regla 60-30-10.
   data-tema="teal-claro" | "teal-oscuro". El acento guia; solo la urgencia alerta.
   ============================================================================ */
:root, :root[data-tema="teal-claro"] {
    --bg: #F3F4F6; --bg-rgb: 243, 244, 246; --bg-soft: #EEF0F3; --surface: #FFFFFF; --surface-2: #F8FAFC; --surface-3: #E8ECF1;
    --line: #D9DEE5; --line-soft: #E6EAF0;
    --text: #0F172A; --text-muted: #475569; --text-dim: #64748B;
    --accent: #0D9488; --accent-2: #14B8A6; --accent-deep: #0F766E; --accent-rgb: 13, 148, 136; --on-accent: #FFFFFF;
    --ok: #16A34A; --warn: #B45309; --danger: #DC2626; --critical: #B91C1C;
    --urg-alta: #EA580C; --urg-alta-rgb: 234, 88, 12;
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.10); --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.08);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="teal-claro"]) {
    --bg: #0F172A; --bg-rgb: 15, 23, 42; --bg-soft: #111C30; --surface: #16213A; --surface-2: #1C2944; --surface-3: #24324F;
    --line: #2A3856; --line-soft: #213049;
    --text: #E8EDF3; --text-muted: #94A3B8; --text-dim: #64748B;
    --accent: #2DD4BF; --accent-2: #5EEAD4; --accent-deep: #14B8A6; --accent-rgb: 45, 212, 191; --on-accent: #042F2E;
    color-scheme: dark;
}
}
:root[data-tema="teal-oscuro"] {
    --bg: #0F172A; --bg-rgb: 15, 23, 42; --bg-soft: #111C30; --surface: #16213A; --surface-2: #1C2944; --surface-3: #24324F;
    --line: #2A3856; --line-soft: #213049;
    --text: #E8EDF3; --text-muted: #94A3B8; --text-dim: #64748B;
    --accent: #2DD4BF; --accent-2: #5EEAD4; --accent-deep: #14B8A6; --accent-rgb: 45, 212, 191; --on-accent: #042F2E;
    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/*
 * REGLA GLOBAL PARA [hidden]. No es un adorno: es un blindaje.
 *
 * El atributo `hidden` solo funciona si ninguna regla CSS le asigna un display.
 * En cuanto una clase pone `display: grid` o `display: inline-flex`, esa regla
 * GANA y el elemento sigue visible aunque el codigo lo marque como oculto.
 *
 * Ya provoco dos fallos reales en este proyecto:
 *   - el badge de administracion se veia como un aro vacio (display: inline-flex)
 *   - el formulario de acceso del panel se quedaba encima del panel ya abierto
 *     (display: grid), y se veia como "el login no hace nada"
 *
 * Con esta regla, `elemento.hidden = true` esconder de verdad SIEMPRE, en toda la
 * aplicacion, sin tener que acordarse de anadir un caso por componente.
 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    font-family: var(--font);
    font-size: var(--t-base);
    line-height: 1.55;
    color: var(--text);
    background:
        radial-gradient(1100px 600px at 10% -12%, rgba(var(--accent-rgb), 0.14), transparent 62%),
        radial-gradient(900px 520px at 96% -4%, rgba(90, 140, 255, 0.10), transparent 58%),
        var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

.app {
    max-width: 940px;
    height: 100dvh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------- cabecera */

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) var(--s5);
    border-bottom: 1px solid var(--line);
    background: rgba(var(--bg-rgb), 0.78);
    backdrop-filter: blur(16px);
    position: sticky; top: 0; z-index: 20;
}

.brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; }

/* La marca hereda el color del texto, asi el SVG no necesita ids ni gradientes
   y se puede repetir en varios sitios sin colisiones. */
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent); flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }

.brand-text h1 {
    font-size: var(--t-lg);
    letter-spacing: -0.02em;
    font-weight: 700;
    line-height: 1.2;
}
.brand-text p { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.3; }

.brand-status { display: flex; align-items: center; gap: var(--s2); }

/* --------------------------------------------------------------- pills */

.pill {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--t-xs); font-weight: 600;
    padding: 6px 11px; border-radius: var(--r-full);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-muted);
    white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* `display: inline-flex` gana al atributo [hidden] del navegador, asi que un pill
   oculto seguiria ocupando sitio y se veria como un aro vacio. Hay que forzarlo. */
.pill[hidden] { display: none; }

/* Semaforo de salud: verde operativo, ambar demostracion, rojo sin conexion.
   Nunca nombra proveedor ni modelo. */
.pill-live  { color: var(--ok);         border-color: rgba(67, 209, 122, 0.35); }
.pill-sim   { color: var(--accent-2);   border-color: rgba(255, 195, 107, 0.35); }
.pill-error { color: var(--danger);     border-color: rgba(255, 107, 94, 0.35); }
.pill-loading .dot { animation: pulse 1.2s ease-in-out infinite; }

.pill-admin {
    color: var(--text-dim);
    border-style: dashed;
    border-color: rgba(107, 122, 141, 0.45);
    background: transparent;
    font-weight: 500;
}

@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.icon-btn {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--surface);
    color: var(--text); cursor: pointer;
    transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.icon-btn svg { width: 17px; height: 17px; display: block; }
.icon-btn:hover { background: var(--surface-2); border-color: var(--surface-3); transform: translateY(-1px); }

/* ------------------------------------------------------------ vehiculo */

.vehicle {
    border-bottom: 1px solid var(--line);
    background: rgba(17, 24, 35, 0.55);
}

.vehicle-toggle {
    width: 100%;
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3) var(--s5);
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: var(--t-sm); color: var(--text-muted);
    text-align: left;
}
.vehicle-toggle:hover { color: var(--text); }

.vehicle-state { font-size: 1rem; flex: none; }
.vehicle-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El boton de accion es la pista de que ahi se puede hacer algo. */
.vehicle-cta {
    flex: none; font-size: var(--t-xs); font-weight: 700;
    color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.4);
    padding: 4px 10px; border-radius: var(--r-full);
    background: rgba(var(--accent-rgb), 0.1);
}
.vehicle-completado .vehicle-cta { display: none; }
.vehicle-completado .vehicle-summary { color: var(--text); font-weight: 600; }
.vehicle-completado .vehicle-state { color: var(--ok); }

.chev { width: 16px; height: 16px; flex: none; transition: transform 0.2s; }
.vehicle[data-open="true"] .chev { transform: rotate(180deg); }

.vehicle-panel { padding: 0 var(--s5) var(--s5); }
.vehicle-panel[hidden] { display: none; }

.vehicle-hint {
    font-size: var(--t-sm); color: var(--text-muted);
    margin-bottom: var(--s3); line-height: 1.5;
}

.vehicle-grid {
    display: grid; gap: var(--s3);
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.vehicle-grid label {
    display: flex; flex-direction: column; gap: var(--s1);
    font-size: var(--t-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted);
}

.vehicle-grid input, .vehicle-grid select {
    font: inherit; font-size: var(--t-sm);
    text-transform: none; letter-spacing: normal; font-weight: 400;
    padding: 9px 11px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--bg-soft); color: var(--text);
    outline: none; transition: border-color 0.15s, background 0.15s;
}
.vehicle-grid input:focus, .vehicle-grid select:focus {
    border-color: var(--accent); background: var(--surface);
}
.vehicle-grid input::placeholder { color: var(--text-dim); }

.vehicle-actions {
    display: flex; justify-content: flex-end; gap: var(--s2);
    margin-top: var(--s4);
}

.btn-primary, .btn-ghost {
    font: inherit; font-size: var(--t-sm); font-weight: 600;
    padding: 8px 16px; border-radius: var(--r-sm);
    cursor: pointer; transition: all 0.15s;
}
.btn-primary {
    border: none; color: var(--on-accent);
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost {
    border: 1px solid var(--line); background: transparent; color: var(--text-muted);
}
.btn-ghost:hover { color: var(--text); border-color: var(--surface-3); }

/* ----------------------------------------------------------------- chat */

.chat {
    flex: 1; overflow-y: auto;
    padding: var(--s5) var(--s5) var(--s2);
    display: flex; flex-direction: column; gap: var(--s5);
    scroll-behavior: smooth;
}

/* -------------------------------------------------------------- welcome */

.welcome { text-align: center; padding: var(--s6) var(--s2) var(--s4); margin: auto 0; }

.welcome-mark { display: block; width: 58px; height: 58px; margin: 0 auto var(--s4); color: var(--accent); }
.welcome-mark svg { width: 100%; height: 100%; display: block; }

.welcome h2 { font-size: var(--t-2xl); letter-spacing: -0.025em; margin-bottom: var(--s2); }
.welcome p { color: var(--text-muted); max-width: 520px; margin: 0 auto; font-size: var(--t-base); line-height: 1.6; }

/* Primer paso guiado: el vehiculo antes que el sintoma. */
.welcome-vehicle {
    display: flex; align-items: center; gap: var(--s3);
    width: min(460px, 100%); margin: var(--s6) auto 0;
    padding: var(--s3) var(--s4); cursor: pointer;
    font: inherit; text-align: left;
    border-radius: var(--r-md);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.03));
    color: var(--text);
    transition: transform 0.16s, border-color 0.16s;
}
.welcome-vehicle:hover { transform: translateY(-2px); border-color: var(--accent); }
.welcome-vehicle-icon { font-size: 1.5rem; flex: none; }
.welcome-vehicle-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.welcome-vehicle-text strong { font-size: var(--t-base); }
.welcome-vehicle-text span { font-size: var(--t-sm); color: var(--text-muted); }
.welcome-vehicle-arrow { flex: none; color: var(--accent); font-size: 1.1rem; }

.examples-title {
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-dim); font-weight: 700;
    margin: var(--s6) 0 var(--s3);
}

.examples { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }

.chip {
    font: inherit; font-size: var(--t-sm); text-align: left;
    padding: 9px 14px; border-radius: var(--r-full); cursor: pointer;
    border: 1px solid var(--line); background: var(--surface); color: var(--text-muted);
    transition: all 0.16s; max-width: 100%;
}
.chip:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }

/* -------------------------------------------------------------- mensajes */

.msg { display: flex; gap: var(--s3); animation: rise 0.28s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.msg-user { justify-content: flex-end; }
.msg-user .bubble {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: var(--on-accent); font-weight: 500;
    border-radius: var(--r-lg) var(--r-lg) var(--s1) var(--r-lg);
    max-width: min(78%, 620px);
}

.msg-bot .avatar {
    flex: 0 0 32px; width: 32px; height: 32px;
    display: grid; place-items: center;
    padding: 6px;
    border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--accent);
}
.msg-bot .avatar svg { width: 100%; height: 100%; display: block; }

.bubble-wrap { min-width: 0; flex: 1; }
.bubble {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-lg);
    line-height: 1.62;
    overflow-wrap: anywhere;
}
.msg-bot .bubble {
    background: var(--surface); border: 1px solid var(--line);
    border-top-left-radius: var(--s1);
}

/* La tarjeta de diagnostico trae su propio marco: evita el doble padding. */
.msg-bot .bubble:has(> .diagnosis),
.msg-bot .bubble:has(> .aclaracion),
.msg-bot .bubble:has(> .error-card) { padding: 0; background: transparent; border: none; }

.msg-meta { font-size: var(--t-xs); color: var(--text-dim); margin-top: 6px; }
.msg-user .msg-meta { text-align: right; }

.attach-preview { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.attach-preview img {
    width: 88px; height: 66px; object-fit: cover;
    border-radius: var(--r-sm); border: 1px solid var(--line);
}

/* ------------------------------------------------------- progreso real */

.progress { display: flex; flex-direction: column; gap: var(--s2); }
.progress-step {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--t-sm); color: var(--text-dim);
    transition: color 0.2s;
}
.progress-step[data-activo="true"] { color: var(--accent-2); }
.progress-step[data-hecho="true"] { color: var(--text-muted); }

.progress-mark {
    width: 14px; height: 14px; flex: none;
    display: grid; place-items: center;
    font-size: 0.6rem; font-weight: 700;
}
.progress-step[data-activo="true"] .progress-mark::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; animation: pulse 1.1s ease-in-out infinite;
}
.progress-step[data-hecho="true"] .progress-mark::after { content: '✓'; color: var(--ok); }

/* ---------------------------------------------------------- diagnostico */

/* ------------------------------------------------------------ ingreso */

.auth-btn {
    font: inherit; font-size: var(--t-sm); font-weight: 700;
    padding: 7px 14px; border-radius: var(--r-full); cursor: pointer;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-2);
    white-space: nowrap;
    transition: background 0.15s, transform 0.15s;
}
.auth-btn:hover { background: rgba(var(--accent-rgb), 0.2); transform: translateY(-1px); }

.user-btn {
    display: inline-flex; align-items: center; gap: var(--s2);
    font: inherit; font-size: var(--t-sm); cursor: pointer;
    padding: 4px 12px 4px 4px; border-radius: var(--r-full);
    border: 1px solid var(--line); background: var(--surface); color: var(--text);
    max-width: 190px;
    transition: border-color 0.15s, background 0.15s;
}
.user-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.user-avatar {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--on-accent); font-weight: 800; font-size: var(--t-sm);
    text-transform: uppercase;
}
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aviso de correo sin confirmar */
.aviso {
    display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
    padding: var(--s3) var(--s5);
    background: rgba(255, 195, 107, 0.1);
    border-bottom: 1px solid rgba(255, 195, 107, 0.3);
    font-size: var(--t-sm); color: var(--accent-2);
}
.aviso[hidden] { display: none; }
.aviso-icon { font-size: 1.1rem; }
.aviso-texto { flex: 1; min-width: 200px; }
.aviso .mini-btn { border-color: rgba(255, 195, 107, 0.5); color: var(--accent-2); }

/* -------------------------------------------------------------- modal */

.modal {
    position: fixed; inset: 0; z-index: 80;
    display: grid; place-items: center;
    padding: var(--s4);
}
.modal[hidden] { display: none; }

.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(4, 7, 10, 0.72);
    backdrop-filter: blur(6px);
}

.modal-card {
    position: relative;
    width: min(430px, 100%);
    max-height: calc(100dvh - 2 * var(--s4));
    overflow-y: auto;
    padding: var(--s6);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
    animation: aparecer 0.2s ease-out both;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.modal-x { position: absolute; top: var(--s3); right: var(--s3); }

.modal-marca { width: 44px; height: 44px; color: var(--accent); margin-bottom: var(--s4); }
.modal-marca svg { width: 100%; height: 100%; display: block; }

.modal-card h2 { font-size: var(--t-xl); letter-spacing: -0.02em; margin-bottom: var(--s1); }
.modal-sub { font-size: var(--t-sm); color: var(--text-muted); margin-bottom: var(--s5); line-height: 1.5; }

.auth-form { display: flex; flex-direction: column; gap: var(--s4); }
.auth-form[hidden] { display: none; }

.auth-form label {
    display: flex; flex-direction: column; gap: 5px;
    font-size: var(--t-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted);
}

.auth-form input {
    font: inherit; font-size: var(--t-base); font-weight: 400;
    text-transform: none; letter-spacing: normal;
    padding: 11px 13px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--bg-soft); color: var(--text);
    outline: none; transition: border-color 0.15s, background 0.15s;
}
.auth-form input:focus { border-color: var(--accent); background: var(--surface-2); }
.auth-form input[aria-invalid="true"] { border-color: var(--danger); }

/* Ayuda bajo el campo: normal, acierto o error. El color comunica el estado. */
.campo-aviso {
    font-size: var(--t-xs); font-weight: 400;
    text-transform: none; letter-spacing: normal;
    color: var(--text-dim);
}
.campo-aviso.ok { color: var(--ok); }
.campo-aviso.mal { color: var(--danger); }

.fuerza { display: flex; gap: 4px; margin-top: -8px; }
.fuerza[hidden] { display: none; }
.fuerza i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background 0.2s; }
.fuerza[data-nivel="1"] i:nth-child(-n+1) { background: var(--danger); }
.fuerza[data-nivel="2"] i:nth-child(-n+2) { background: var(--warn); }
.fuerza[data-nivel="3"] i:nth-child(-n+3) { background: var(--accent); }
.fuerza[data-nivel="4"] i { background: var(--ok); }

.btn-ancho { width: 100%; padding: 12px; font-size: var(--t-base); }

.auth-enlaces { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.enlace {
    font: inherit; font-size: var(--t-sm); cursor: pointer;
    background: none; border: none; padding: 0;
    color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
.enlace:hover { color: var(--accent-2); }

.auth-nota { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.55; }

.auth-mensaje {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-sm);
    font-size: var(--t-sm); line-height: 1.55;
    margin-bottom: var(--s4);
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text-muted);
}
.auth-mensaje[hidden] { display: none; }
.auth-mensaje.ok { color: var(--ok); border-color: rgba(67, 209, 122, 0.4); background: rgba(67, 209, 122, 0.08); }
.auth-mensaje.mal { color: var(--danger); border-color: rgba(255, 107, 94, 0.4); background: rgba(255, 107, 94, 0.08); }
.auth-mensaje code {
    display: block; margin-top: 6px; padding: 6px 8px;
    background: var(--bg-soft); border-radius: 6px;
    font-size: var(--t-xs); overflow-wrap: anywhere;
}

.modal-pie {
    margin-top: var(--s5); padding-top: var(--s4);
    border-top: 1px solid var(--line);
    font-size: var(--t-xs); color: var(--text-dim); line-height: 1.5;
}

@media (max-width: 620px) {
    .modal-card { padding: var(--s5); }
    .auth-btn { padding: 6px 11px; font-size: var(--t-xs); }
    .user-btn { padding: 3px 8px 3px 3px; max-width: 120px; }
    .user-name { font-size: var(--t-xs); }
}

.diagnosis { display: flex; flex-direction: column; gap: var(--s4); }
.dx-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.urgency {
    font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-full);
    border: 1px solid currentColor;
}
.urgency-baja     { color: var(--ok);       background: rgba(67, 209, 122, 0.1); }
.urgency-media    { color: var(--warn);     background: rgba(255, 200, 87, 0.1); }
.urgency-alta     { color: var(--urg-alta); background: rgba(var(--urg-alta-rgb), 0.12); }
.urgency-critica  { color: var(--critical); background: rgba(255, 59, 48, 0.14); animation: critical 1.6s ease-in-out infinite; }

@keyframes critical {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.35); }
    50% { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); }
}

.confidence {
    font-size: var(--t-xs); color: var(--text-muted);
    border: 1px solid var(--line); padding: 5px 10px; border-radius: var(--r-full);
}
.sim-tag {
    font-size: var(--t-xs); color: var(--accent-2);
    border: 1px dashed rgba(255, 195, 107, 0.5);
    padding: 4px 9px; border-radius: var(--r-full);
}

.dx-summary { line-height: 1.68; }

.dx-block h4 {
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-bottom: var(--s2);
}
.dx-block ul, .dx-block ol {
    padding-left: var(--s5);
    display: flex; flex-direction: column; gap: 6px;
    line-height: 1.58; font-size: var(--t-base);
}

.dx-causes ul { list-style: none; padding-left: 0; }
.dx-causes li {
    padding: var(--s3);
    border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line);
}
.cause-top { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; }
.cause-name { font-weight: 600; }
.cause-why { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--s1); line-height: 1.55; }

.prob {
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em;
    padding: 3px 8px; border-radius: var(--r-full);
    border: 1px solid currentColor; white-space: nowrap;
}
.prob-alta  { color: var(--danger); }
.prob-media { color: var(--warn); }
.prob-baja  { color: var(--text-dim); }

.dx-avoid li::marker { color: var(--danger); }
.dx-actions li::marker { color: var(--ok); font-weight: 700; }

/* Secciones plegables: las largas o secundarias se colapsan para que la
   tarjeta no obligue a un scroll eterno. */
.dx-fold { border-top: 1px solid var(--line-soft); padding-top: var(--s2); }
.dx-fold summary {
    display: flex; align-items: center; gap: var(--s2);
    cursor: pointer; list-style: none;
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 600;
    padding: var(--s1) 0;
}
.dx-fold summary::-webkit-details-marker { display: none; }
.dx-fold summary:hover { color: var(--text); }
.dx-fold summary::after {
    content: '▾'; margin-left: auto; font-size: 0.75rem;
    transition: transform 0.2s;
}
.dx-fold[open] summary::after { transform: rotate(180deg); }
.dx-fold .dx-content { padding-top: var(--s2); }

.dx-foot {
    display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
    font-size: var(--t-xs); color: var(--text-muted);
    border-top: 1px solid var(--line); padding-top: var(--s3);
}
.dx-actions-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

.mini-btn {
    font: inherit; font-size: var(--t-sm);
    padding: 6px 12px; cursor: pointer;
    border-radius: var(--r-full);
    border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text-muted);
    transition: all 0.15s;
}
.mini-btn:hover { color: var(--text); border-color: var(--accent); }

/* --------------------------------------------------------- aclaracion */

.aclaracion { display: flex; flex-direction: column; gap: var(--s4); }
.aclaracion-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.aclaracion-badge {
    font-size: var(--t-xs); font-weight: 700;
    padding: 5px 11px; border-radius: var(--r-full);
    color: var(--accent-2);
    background: rgba(255, 195, 107, 0.1);
    border: 1px solid rgba(255, 195, 107, 0.35);
}

.aclaracion-texto { line-height: 1.68; }

.aclaracion-bloque {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line);
}
.aclaracion-bloque h4 {
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-bottom: var(--s2);
}
.aclaracion-bloque ol {
    padding-left: var(--s5); display: flex; flex-direction: column; gap: 7px;
    line-height: 1.58; font-size: var(--t-base);
}
.aclaracion-bloque li::marker { color: var(--accent-2); font-weight: 700; }

.aclaracion-nota {
    font-size: var(--t-sm); color: var(--text-muted); line-height: 1.55;
    border-top: 1px solid var(--line); padding-top: var(--s3);
}

/* -------------------------------------------------------------- error */

.error-card { display: flex; flex-direction: column; gap: var(--s2); }
.error-title { font-weight: 700; color: var(--danger); display: flex; align-items: center; gap: var(--s2); }
.error-detail { font-size: var(--t-sm); color: var(--text-muted); }

/* ----------------------------------------------------------- indice */

.index {
    position: fixed; left: max(12px, calc((100vw - 940px) / 2 - 180px)); top: 108px;
    width: 168px; max-height: 60dvh; overflow-y: auto;
    padding: var(--s3);
    border-left: 2px solid var(--line);
}
.index[hidden] { display: none; }
.index-title {
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-dim); font-weight: 700; display: block; margin-bottom: var(--s2);
}
.index ol { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.index button {
    font: inherit; font-size: var(--t-sm); text-align: left;
    width: 100%; padding: 6px var(--s2); cursor: pointer;
    background: none; border: none; border-left: 2px solid transparent;
    color: var(--text-dim); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.index button:hover { color: var(--text); border-left-color: var(--accent); }

/* ----------------------------------------------------------- composer */

.composer {
    padding: var(--s3) var(--s5) var(--s4);
    border-top: 1px solid var(--line);
    background: rgba(var(--bg-rgb), 0.86);
    backdrop-filter: blur(16px);
    position: sticky; bottom: 0;
}

.attachments { display: flex; gap: var(--s2); flex-wrap: wrap; padding-bottom: var(--s3); }
.attachment { position: relative; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.attachment img { display: block; width: 74px; height: 56px; object-fit: cover; }
.attachment button {
    position: absolute; top: 3px; right: 3px; width: 19px; height: 19px;
    border-radius: 50%; border: none; cursor: pointer; line-height: 1;
    background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.72rem;
}

.composer-row {
    display: flex; align-items: flex-end; gap: var(--s2);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 7px;
    transition: border-color 0.16s, box-shadow 0.16s;
}
.composer-row:focus-within {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}

.tool-btn {
    flex: 0 0 36px; width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid transparent; background: var(--surface-2);
    color: var(--text-muted); cursor: pointer;
    transition: all 0.15s;
}
.tool-btn svg { width: 18px; height: 18px; display: block; }
.tool-btn:hover { background: var(--surface-3); color: var(--text); }
.tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tool-btn.recording {
    background: rgba(255, 59, 48, 0.18); border-color: var(--critical);
    color: var(--critical);
    animation: rec 1.1s infinite;
}
@keyframes rec {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
}

#input {
    flex: 1; resize: none; border: none; outline: none; background: transparent;
    color: var(--text); font: inherit; font-size: var(--t-base); line-height: 1.5;
    max-height: 148px; padding: 9px var(--s1);
}
#input::placeholder { color: var(--text-dim); }

.send-btn {
    flex: 0 0 36px; width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: var(--r-sm); border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--on-accent);
    transition: transform 0.15s, opacity 0.15s, filter 0.15s;
}
.send-btn svg { width: 17px; height: 17px; display: block; }
.send-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.composer-foot {
    display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
    padding: var(--s2) var(--s1) 0;
    font-size: var(--t-sm); color: var(--text-muted);
}

.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.switch input { accent-color: var(--accent); }

.hint { margin-left: auto; }
.hint.rec { color: var(--critical); font-weight: 600; }

/* -------------------------------------------------------------- footer */

.footer {
    padding: var(--s2) var(--s5) var(--s3);
    font-size: var(--t-xs); color: var(--text-dim);
    text-align: center; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: var(--s1); align-items: center;
}
.footer-note { color: var(--accent-2); font-weight: 600; }
.footer-note[hidden] { display: none; }
.footer-disclaimer { opacity: 0.9; }

/* ---------------------------------------------- panel de administracion */

.admin-panel {
    position: fixed; top: var(--s3); right: var(--s3); z-index: 60;
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px); overflow-y: auto;
    padding: var(--s4);
    border-radius: var(--r-md);
    border: 1px dashed rgba(107, 122, 141, 0.5);
    background: rgba(17, 24, 35, 0.97);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow);
}
.admin-panel[hidden] { display: none; }

.admin-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); margin-bottom: var(--s3);
}
.admin-head h2 { font-size: var(--t-base); letter-spacing: -0.01em; }
.admin-head .icon-btn { width: 28px; height: 28px; }

.admin-list {
    display: grid; grid-template-columns: auto 1fr;
    gap: 7px var(--s3); font-size: var(--t-sm); align-items: baseline;
}
.admin-list dt { color: var(--text-muted); }
.admin-list dd { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

/* Quien no es administrador ve un aviso claro en vez de un panel vacio. */
.admin-denegado {
    grid-column: 1 / -1;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--warn);
    background: rgba(255, 200, 87, 0.08);
    border: 1px solid rgba(255, 200, 87, 0.3);
    border-radius: var(--r-sm);
    padding: var(--s3);
}

.admin-voice {
    margin-top: var(--s4); padding-top: var(--s3);
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 6px;
}
.admin-voice label {
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); font-weight: 600;
}
.admin-voice select {
    font: inherit; font-size: var(--t-sm); width: 100%;
    padding: 7px 9px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--bg-soft); color: var(--text);
}
.admin-voice select:disabled { opacity: 0.5; }

.admin-foot {
    margin-top: var(--s4); padding-top: var(--s3);
    border-top: 1px solid var(--line);
    font-size: var(--t-xs); color: var(--text-muted); line-height: 1.55;
}
.admin-foot code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* ------------------------------------------------------------ scrollbar */

.chat::-webkit-scrollbar, .admin-panel::-webkit-scrollbar, .index::-webkit-scrollbar { width: 9px; }
.chat::-webkit-scrollbar-thumb, .admin-panel::-webkit-scrollbar-thumb, .index::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 9px;
}
.chat::-webkit-scrollbar-thumb:hover { background: var(--surface-3); }

/* -------------------------------------------------------------- adaptativo */

/* El indice lateral solo cabe si hay margen a los lados. */
@media (max-width: 1320px) { .index { display: none; } }

@media (max-width: 620px) {
    .topbar { padding: var(--s2) var(--s3); }
    .brand-text p { display: none; }
    .pill { padding: 5px 9px; }
    .chat { padding: var(--s4) var(--s3) var(--s2); gap: var(--s4); }
    .composer { padding: var(--s2) var(--s3) var(--s3); }
    .vehicle-toggle, .vehicle-panel { padding-left: var(--s3); padding-right: var(--s3); }
    .welcome h2 { font-size: var(--t-xl); }
    .msg-user .bubble { max-width: 88%; }
    .dx-actions-row { width: 100%; }
    .footer { padding-left: var(--s3); padding-right: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .chat { scroll-behavior: auto; }
}

@media print {
    .topbar, .composer, .vehicle, .footer, .index, .dx-actions-row, .admin-panel { display: none !important; }
    body { background: #fff; color: #000; }
    .chat { overflow: visible; }
    .msg-user { display: none; }
    .bubble, .dx-causes li, .aclaracion-bloque { border: 1px solid #ccc; background: #fff; }
    .dx-fold { display: block; }
    .dx-fold > summary { display: none; }
    .dx-fold .dx-content { display: block !important; }
}