/* ===========================================================================
   Alma Escriba v2 — capa propia sobre el sistema visual de base.css.

   base.css ya trae los tokens con los CONTRASTES CORREGIDOS (esto no se
   re-inventa acá):
     · #4FBECE (teal-400) NUNCA es texto sobre fondo claro: da 2,19:1 y falla AA.
       Texto/acción teal → --teal-700 #0E7C86 (4,95:1)
       Bordes/foco/iconos → --teal-500 #2A9AAB (3,33:1, cumple SC 1.4.11)
     · navy-700 #0F3F68 → 10,87:1 (AAA)

   Lo que agrega este archivo es lo que v2 tiene y el copiloto no:
     · el ÁMBAR de las frases sin respaldo,
     · el panel del CHECKPOINT (pasivo, persistente, máximo 3),
     · las dos pistas de la teleconsulta.

   Sin CDNs: fuentes y CSS son locales (la CSP de producción bloquea lo externo).
   =========================================================================== */

/* ------------------------------------------------------------------ login */
.login-body { display: grid; place-items: center; min-height: 100vh;
              background: var(--canvas); padding: 20px; }
.login-card { width: 100%; max-width: 400px; background: var(--surface-1);
              border: 1px solid var(--line); border-radius: 14px; padding: 34px 32px;
              box-shadow: 0 1px 2px rgba(15,63,104,.04), 0 10px 30px -10px rgba(15,63,104,.12); }
.login-card img { margin-bottom: 18px; }
.login-card h1 { margin: 0 0 4px; font-family: var(--font-display); font-size: 22px;
                 font-weight: 600; color: var(--navy-700); letter-spacing: -.02em; }
.login-card .sub { margin: 0 0 24px; color: var(--ink-500); font-size: 13.5px; }
.login-card .err { margin-top: 14px; padding: 9px 12px; border-radius: 8px;
                   background: var(--danger-050); color: var(--danger-700);
                   border: 1px solid var(--danger-700); font-size: 13.5px; }

/* --------------------------------------------------------------- el shell */
.tag-v2 { font-size: 10px; font-weight: 700; letter-spacing: .06em;
          color: var(--teal-800); background: var(--teal-050);
          border: 1px solid var(--teal-500); border-radius: 999px; padding: 1px 6px; }

.sidebar { width: 232px; flex: none; border-right: 1px solid var(--line);
           background: var(--surface-1); padding: 16px 12px; display: flex;
           flex-direction: column; overflow-y: auto; }
.nav-grupo { margin-bottom: 18px; }
.nav-grupo .eyebrow { padding: 0 8px; margin: 0 0 6px; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px;
            border-radius: 8px; color: var(--ink-800); text-decoration: none;
            font-size: var(--t-ui); font-weight: 500; }
.nav-item:hover { background: var(--surface-2); }
.nav-item:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 1px; }
.nav-item.on { background: var(--teal-050); color: var(--teal-800); font-weight: 600; }
.nav-item.on .ic { color: var(--teal-700); }
.retencion { margin-top: auto; padding: 10px; border-top: 1px solid var(--line);
             font-size: 11.5px; }

.modulo { flex: 1; min-width: 0; }
.modulo iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------- lienzo del módulo */
.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 24px 80px; }
.wrap h1 { font-family: var(--font-display); font-size: 24px; font-weight: 600;
           color: var(--navy-900); letter-spacing: -.02em; margin: 0 0 4px; }
.wrap .sub { color: var(--ink-500); font-size: var(--t-ui); margin: 0 0 22px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px; margin-bottom: 22px; }
.kpi { background: var(--surface-1); border: 1px solid var(--line); border-radius: 12px;
       padding: 14px 16px; }
.kpi .n { font-family: var(--font-display); font-size: 26px; font-weight: 600;
          color: var(--navy-700); font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

/* ---------------------------------------------------------------- pasos */
.pasos { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.paso { display: flex; align-items: center; gap: 7px; padding: 6px 12px;
        border: 1px solid var(--line); border-radius: 999px; background: var(--surface-1);
        font-size: 12.5px; color: var(--ink-500); }
.paso .n { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3);
           color: var(--ink-600); display: grid; place-items: center; font-size: 11px;
           font-weight: 700; }
.paso.on { border-color: var(--teal-500); background: var(--teal-050);
           color: var(--teal-800); font-weight: 600; }
.paso.on .n { background: var(--teal-700); color: #fff; }
.paso.ok { color: var(--ok-700); border-color: var(--ok-700); background: var(--ok-050); }
.paso.ok .n { background: var(--ok-700); color: #fff; }

/* ----------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab { padding: 8px 14px; border: 0; background: none; font: inherit; font-size: var(--t-ui);
       color: var(--ink-500); cursor: pointer; border-bottom: 2px solid transparent;
       margin-bottom: -1px; }
.tab:hover { color: var(--ink-900); }
.tab[aria-selected="true"] { color: var(--teal-800); font-weight: 600;
                             border-bottom-color: var(--teal-700); }

/* -------------------------------------------------- captura / dos pistas */
.pistas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .pistas { grid-template-columns: 1fr; } }
.pista { border: 1px solid var(--line); border-radius: 10px; padding: 14px;
         background: var(--surface-1); }
.pista h3 { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.pista .hint { margin: 0 0 10px; }
.pista .nivel { height: 4px; border-radius: 2px; background: var(--surface-3);
                overflow: hidden; margin-top: 10px; }
.pista .nivel i { display: block; height: 100%; width: 0; background: var(--teal-500);
                  transition: width .1s linear; }
.pista.rec { border-color: var(--danger-700); }
.pista.rec h3::after { content: " · grabando"; color: var(--danger-700); font-weight: 700; }

.vivo { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px;
        background: var(--surface-2); padding: 12px; max-height: 260px; overflow-y: auto;
        font-size: 13.5px; line-height: 1.6; }
.vivo .t { margin-bottom: 6px; }
.vivo .who { font-weight: 700; font-size: 11px; letter-spacing: .04em;
             text-transform: uppercase; margin-right: 6px; }
.vivo .who.medico { color: var(--navy-600); }
.vivo .who.paciente { color: var(--teal-800); }
.vivo .ts { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500);
            margin-right: 6px; }

/* ------------------------------------------------- la nota + trazabilidad */
.editor { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .editor { grid-template-columns: 1fr; } }

.seccion { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1);
           margin-bottom: 12px; overflow: hidden; }
.seccion > header { display: flex; align-items: center; justify-content: space-between;
                    gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line);
                    background: var(--surface-2); }
.seccion > header h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-900);
                       letter-spacing: -.01em; }
.seccion .cuerpo { padding: 12px 14px; font-size: var(--t-body);
                   line-height: var(--t-body-lh); }
.seccion textarea { width: 100%; }

/* LA FRASE ANCLADA. El puntero a su segmento no es decoración: es la única forma
   de saber de dónde salió cada afirmación. */
.claim { border-bottom: 1px dotted var(--line-strong); cursor: pointer; }
.claim:hover { background: var(--teal-050); }
.claim .ancla { font-family: var(--font-mono); font-size: 10.5px; color: var(--teal-800);
                background: var(--teal-050); border: 1px solid var(--teal-500);
                border-radius: 4px; padding: 0 3px; margin-left: 4px;
                vertical-align: 1px; white-space: nowrap; }

/* ÁMBAR — lo que la IA NO pudo anclar a nada de lo que se dijo. Nunca se comunica
   sólo por color: lleva subrayado propio y la etiqueta de texto "sin respaldo". */
.claim.amber { background: var(--warn-050);
               border-bottom: 2px solid var(--warn-700); }
.claim.amber .ancla { color: var(--warn-700); background: #FFF3D6;
                      border-color: var(--warn-700); }

/* ---------------------------------------------- EL CHECKPOINT (pasivo) --- */
.check { position: sticky; top: 16px; border: 1px solid var(--line); border-radius: 12px;
         background: var(--surface-1); overflow: hidden; }
.check > header { padding: 12px 14px; border-bottom: 1px solid var(--line);
                  background: var(--surface-2); }
.check h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.check .n { font-family: var(--font-display); font-size: 30px; font-weight: 600;
            color: var(--navy-700); line-height: 1; }
.check .n.limpio { color: var(--ok-700); }
.check .lista { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

/* Un punto por revisar. NO es un modal: vive acá, y sigue acá hasta que se
   resuelve. Máximo 3 activos; el resto se pliega. */
.punto { border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
         padding: 9px 11px; background: var(--surface-1); }
.punto .cab { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.punto .et { font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
             text-transform: uppercase; }
.punto .tx { font-size: 13px; color: var(--ink-900); line-height: 1.45; }
.punto .de { font-size: 12px; color: var(--ink-500); margin-top: 3px; line-height: 1.45; }
.punto .sec { font-size: 11px; color: var(--ink-500); margin-top: 4px; }
.punto footer { margin-top: 7px; }

/* El color acompaña; la ETIQUETA de texto y el ícono son los que informan. */
.punto[data-t="omision"]     { border-left-color: var(--danger-700); }
.punto[data-t="omision"] .et { color: var(--danger-700); }
.punto[data-t="alucinacion"]     { border-left-color: var(--danger-700); }
.punto[data-t="alucinacion"] .et { color: var(--danger-700); }
.punto[data-t="sin_respaldo"]     { border-left-color: var(--warn-700); }
.punto[data-t="sin_respaldo"] .et { color: var(--warn-700); }
.punto[data-t="completitud"]     { border-left-color: var(--ink-500); }
.punto[data-t="completitud"] .et { color: var(--ink-600); }
.punto[data-t="ges"]     { border-left-color: var(--info-700); background: var(--info-050); }
.punto[data-t="ges"] .et { color: var(--info-700); }
.punto.visto { opacity: .5; }

.plegados { border: 0; background: none; font: inherit; font-size: 12.5px;
            color: var(--teal-800); text-decoration: underline; cursor: pointer;
            padding: 6px; text-align: left; }

/* ------------------------------------------------------- transcripción */
.fuente { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1);
          margin-top: 12px; }
.fuente > header { padding: 10px 14px; border-bottom: 1px solid var(--line);
                   background: var(--surface-2); font-size: 13px; font-weight: 600; }
.fuente .segs { max-height: 320px; overflow-y: auto; padding: 8px; }
.seg { display: flex; gap: 8px; padding: 5px 7px; border-radius: 6px; font-size: 13px;
       line-height: 1.5; }
.seg:hover { background: var(--surface-2); }
.seg.mark { background: var(--teal-050); outline: 1px solid var(--teal-500); }
.seg .i { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500);
          flex: none; min-width: 58px; }

/* -------------------------------------------------------------- tablas */
table.lista { width: 100%; border-collapse: collapse; background: var(--surface-1);
              border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.lista th { text-align: left; font-size: 11px; text-transform: uppercase;
                 letter-spacing: .04em; color: var(--ink-500); font-weight: 600;
                 padding: 10px 14px; background: var(--surface-2);
                 border-bottom: 1px solid var(--line); }
table.lista td { padding: 11px 14px; font-size: 13.5px; border-bottom: 1px solid var(--line);
                 color: var(--ink-800); }
table.lista tr:last-child td { border-bottom: 0; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px;
        border-radius: 999px; border: 1px solid; }
.pill.aprobado { color: var(--ok-700); background: var(--ok-050); border-color: var(--ok-700); }
.pill.borrador { color: var(--warn-700); background: var(--warn-050); border-color: var(--warn-700); }
.pill.capturado { color: var(--ink-600); background: var(--surface-2); border-color: var(--line-strong); }

/* ------------------------------------------------------------- avisos */
.aviso { display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px;
         border: 1px solid var(--line); border-radius: 10px; font-size: 13px;
         line-height: 1.5; margin-bottom: 14px; }
.aviso.info { background: var(--info-050); border-color: var(--info-700); color: var(--info-700); }
.aviso.warn { background: var(--warn-050); border-color: var(--warn-700); color: var(--warn-700); }
.aviso.err  { background: var(--danger-050); border-color: var(--danger-700); color: var(--danger-700); }
.aviso.ok   { background: var(--ok-050); border-color: var(--ok-700); color: var(--ok-700); }
.aviso b { font-weight: 700; }

.acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* Teclado primero: el foco SIEMPRE se ve, en cualquier control. */
:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; border-radius: 4px; }