/*
 * ECPRYM · Estilos del Asistente IA público (js/chat_publico.js).
 *
 * Reutiliza los tokens de institucional.css (--ecp-*), con valores de
 * respaldo por si se cargara sin ella. Prefijo `eca-` para no colisionar con
 * ningún estilo de la SPA. El lanzador se sitúa sobre el control de audio
 * (#ecp-audio, abajo a la derecha) y por debajo del lector (#reader-overlay).
 */
:root {
    --eca-fondo: var(--ecp-marino, #0B192C);
    --eca-fondo-2: var(--ecp-marino-2, #16304F);
    --eca-papel: var(--ecp-papel, #F7F9FC);
    --eca-tinta: #1B2430;
    --eca-tenue: #5B6676;
    --eca-borde: var(--ecp-borde, rgba(11, 25, 44, 0.12));
    --eca-acento: var(--ecp-agua, #1C6DD0);
    --eca-sans: var(--ecp-sans, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
    --eca-mono: var(--ecp-mono, 'JetBrains Mono', ui-monospace, Consolas, monospace);
    /* Semáforo epistémico: color de trazo / fondo claro. */
    --eca-verde: #00875A;   --eca-verde-c: #E4F4EE;
    --eca-azul: #1C6DD0;    --eca-azul-c: #E6F0FB;
    --eca-naranja: #C2570C; --eca-naranja-c: #FCEBDD;
    --eca-amarillo: #9A7100; --eca-amarillo-c: #FBF2DE;
    --eca-rojo: #B3261E;    --eca-rojo-c: #FBE7E6;
}

.eca-lanzador {
    position: fixed; right: 16px; bottom: 76px; z-index: 2500;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px; cursor: pointer;
    background: var(--eca-fondo); color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    font: 600 14px/1 var(--eca-sans); letter-spacing: .01em;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.eca-lanzador:hover { background: var(--eca-fondo-2); }
.eca-lanzador:focus-visible, .eca-panel button:focus-visible, .eca-entrada:focus-visible {
    outline: 3px solid var(--eca-acento); outline-offset: 2px;
}
.eca-lanzador-icono { font-size: 18px; }

.eca-panel {
    position: fixed; right: 16px; bottom: 76px; z-index: 2600;
    width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100vh - 110px));
    display: flex; flex-direction: column;
    background: var(--eca-papel); color: var(--eca-tinta);
    border: 1px solid var(--eca-borde); border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .40);
    font: 400 14px/1.5 var(--eca-sans);
}
.eca-panel[hidden] { display: none; }

.eca-cabecera {
    display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
    padding: 14px 16px; background: var(--eca-fondo); color: #fff;
}
.eca-titulo { margin: 0; font-size: 16px; font-weight: 700; }
/* Aviso de pantalla del asistente: oculto salvo en pantallas estrechas (ver la media query). */
.eca-aviso-pantalla { display: none; margin: 0; padding: 8px 16px; font-size: 12px; line-height: 1.4;
    color: #6b4a00; background: #fff6df; border-bottom: 1px solid #f0dca8; }
@media (max-width: 640px) { .eca-aviso-pantalla { display: block; } }
.eca-aviso { margin: 4px 0 0; font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.eca-cerrar {
    flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 20px; line-height: 1;
}
.eca-cerrar:hover { background: rgba(255, 255, 255, .24); }

.eca-mensajes {
    flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 14px 16px; list-style: none;
    display: flex; flex-direction: column; gap: 12px;
}
.eca-msg { max-width: 92%; padding: 10px 12px; border-radius: 10px; }
.eca-msg p, .eca-msg blockquote { margin: 0 0 6px; }
.eca-msg p:last-of-type { margin-bottom: 0; }
.eca-msg ul { margin: 4px 0 6px; padding-left: 18px; }
.eca-msg blockquote {
    padding-left: 10px; border-left: 3px solid var(--eca-borde); color: var(--eca-tinta); font-style: italic;
}
.eca-usuario { align-self: flex-end; background: var(--eca-fondo-2); color: #fff; }
.eca-sistema { align-self: flex-start; background: #fff; border: 1px solid var(--eca-borde); }
.eca-espera { color: var(--eca-tenue); font-style: italic; }
.eca-autor {
    display: block; margin-bottom: 4px; font: 600 10.5px/1.2 var(--eca-sans);
    text-transform: uppercase; letter-spacing: .06em; opacity: .7;
}
.eca-extracto-titulo { font-size: 12px; color: var(--eca-tenue); }
/* Redacción con IA: aviso mientras se redacta y extracto literal plegado bajo la respuesta. */
.eca-redactando { margin-top: 8px !important; font-size: 12px; color: var(--eca-tenue); font-style: italic; }
.eca-literal { margin-top: 8px; font-size: 12px; color: var(--eca-tenue); }
.eca-literal summary { cursor: pointer; }
.eca-literal blockquote { margin: 6px 0 0; font-size: 12.5px; }

.eca-pie {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--eca-borde);
}
.eca-fuentes { font-size: 12px; color: var(--eca-tenue); }
.eca-fuentes code { font: 11px var(--eca-mono); }
.eca-cita {
    padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--eca-acento); font: inherit; text-decoration: underline;
}

/* ── Insignias del semáforo epistémico ── */
.eca-insignia {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor;
    font: 700 10.5px/1.2 var(--eca-sans); letter-spacing: .05em; white-space: nowrap;
}
.eca-insignia svg { width: 9px; height: 9px; fill: currentColor; }
.eca-documentado    { color: var(--eca-verde);    background: var(--eca-verde-c); }
.eca-propuesta      { color: var(--eca-azul);     background: var(--eca-azul-c); }
.eca-estimacion     { color: var(--eca-naranja);  background: var(--eca-naranja-c); }
.eca-pendiente      { color: var(--eca-amarillo); background: var(--eca-amarillo-c); }
.eca-no_determinado { color: var(--eca-rojo);     background: var(--eca-rojo-c); }

.eca-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.eca-sugerencias[hidden] { display: none; }
.eca-sugerencia {
    padding: 6px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--eca-borde); background: #fff; color: var(--eca-tinta);
    font: 500 12px/1.3 var(--eca-sans); text-align: left;
}
.eca-sugerencia:hover { border-color: var(--eca-acento); color: var(--eca-acento); }

.eca-leyenda { padding: 0 16px 8px; font-size: 12px; color: var(--eca-tenue); }
.eca-leyenda summary { cursor: pointer; font-weight: 600; }
.eca-leyenda ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }

.eca-formulario { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--eca-borde); background: #fff; }
.eca-entrada {
    flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: 8px;
    border: 1px solid var(--eca-borde); font: 400 14px var(--eca-sans); color: var(--eca-tinta);
}
.eca-enviar {
    flex: none; padding: 9px 14px; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--eca-fondo); color: #fff; font: 600 13px var(--eca-sans);
}
.eca-enviar:disabled { opacity: .5; cursor: wait; }
.eca-privacidad { margin: 0; padding: 6px 16px 10px; font-size: 10.5px; color: var(--eca-tenue); background: #fff; }

@media (max-width: 640px) {
    .eca-lanzador { right: 10px; bottom: 66px; padding: 9px 11px; }
    /* En el móvil el lanzador queda en su icono: el rótulo tapaba el texto. El rótulo sigue
       en el DOM, oculto sólo a la vista, y da nombre accesible al botón. */
    .eca-lanzador > span:not(.eca-lanzador-icono) {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .eca-panel { right: 16px; left: 16px; bottom: 16px; width: auto; height: calc(100vh - 32px); }
}
@media (prefers-reduced-motion: no-preference) {
    .eca-panel:not([hidden]) { animation: eca-entrada .18s ease-out; }
    @keyframes eca-entrada { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}