/* =====================================================================
   BRÚJULA · Núcleo Operativo — Grupo QBK S.A.S.
   public/assets/css/brujula.css  ·  Sistema de diseño

   Portado del prototipo aprobado (BRUJULA_prototipo_1.html). Sustituye
   al aspecto genérico de Tailwind por la identidad de la herramienta:
   Fraunces para los títulos, Inter para el cuerpo, IBM Plex Mono para
   los identificadores catastrales (chip, matrícula, NUPRE), que se leen
   dígito a dígito y necesitan ancho fijo.

   El semáforo (verde / ámbar / rojo) se define UNA vez, aquí abajo, en
   las variables. Cambiar el criterio de color es cambiar tres líneas.
   ===================================================================== */

:root {
    --bg:          #FFFFFF;
    --bg-subtle:   #F4F6F9;
    --panel:       #FBFCFD;
    /* Superficies: blanco puro en el tema claro. Van aparte de --panel
       (casi blanco) para que el modo oscuro las cambie en brujula-fase3.css
       sin mover ni un tono del tema claro. */
    --surface:        #FFFFFF;   /* tarjetas, paneles, botones y campos */
    --surface-sunken: #EEF1F5;   /* columnas del tablero y fondos de barras */
    --navy-ink:        #0F2A4A;  /* el navy cuando es texto o línea */
    --navy-fill:       #0F2A4A;  /* el navy cuando es relleno con texto blanco */
    --navy-fill-hover: #081826;
    --line-verde:      #BFE0CD;  /* bordes de avisos y etiquetas */
    --line-amarillo:   #EEDBAE;
    --line-rojo:       #E4C2C2;
    --line-azul:       #C9D8E8;
    --pendiente-ink:   #8B95A3;  /* etiqueta «Pendiente» */
    --descartado-bg:   #F3EEEE;  /* columna de descartados */
    --track:           #E7EBF0;  /* fondo de la barra de progreso */
    --scope-ink:       #8A6A15;  /* etiqueta de alcance */
    --ink:         #0B1626;
    --navy:        #0F2A4A;
    --navy-deep:   #081826;
    --blue:        #2F5C8A;
    --blue-soft:   #E8EEF5;
    --line:        #DDE2E9;
    --line-strong: #C4CCD6;
    --muted:       #5B6472;

    --verde:       #1F7A4D;
    --verde-bg:    #E6F4EC;
    --amarillo:    #9A7418;
    --amarillo-bg: #FBF1DA;
    --rojo:        #9B3B3B;
    --rojo-bg:     #F7EAEA;

    --radius: 10px;
    --shadow: 0 1px 2px rgba(11,22,38,0.04), 0 6px 20px rgba(11,22,38,0.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg-subtle);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

h1, h2, h3, .display {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Anillo de foco único, en el azul institucional. Sin él, el navegador
   pinta el suyo azul-cielo que se pierde sobre el panel navy. */
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 3px;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
::selection { background: var(--blue-soft); }

/* ---------------------------------------------------------------------
   Estructura: barra lateral fija + columna principal
   --------------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--navy);
    color: #EDF2F8;
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
}

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand-word { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 19px; letter-spacing: 0.01em; }
.brand-sub { font-size: 10.5px; color: #9FB3C8; letter-spacing: 0.03em; margin-top: 1px; }

.nav-group { margin-bottom: 22px; }
.nav-label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: #7F93A9; margin-bottom: 8px; padding: 0 8px;
}
.nav-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 8px;
    color: #D9E3EE; font-size: 13px; font-weight: 500;
    margin-bottom: 2px; border: none; background: none;
    width: 100%; text-align: left; text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,0.06); }
.nav-item.active { background: rgba(255,255,255,0.12); color: #fff; }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); }
.foot-row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #9FB3C8; }
.avatar {
    width: 26px; height: 26px; border-radius: 50%; background: #3B6EA5; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
    flex-shrink: 0;
}
.pill-trl {
    font-size: 10px; border: 1px solid rgba(255,255,255,0.25); color: #C7D6E5;
    padding: 3px 8px; border-radius: 20px; display: inline-block; margin-top: 10px;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 14px 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.topbar h1 { font-size: 28px; margin: 0; letter-spacing: -.015em; line-height: 1.15; }

.search {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-subtle); border: 1px solid var(--line);
    border-radius: 8px; padding: 8px 12px; min-width: 230px; color: var(--muted);
}
.search input { border: none; background: none; outline: none; width: 100%; font-size: 13px; color: var(--ink); }

.spacer { flex: 1; }
.content { padding: 22px 28px 60px; overflow-y: auto; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn {
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
    padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.btn:hover { border-color: var(--navy-ink); }
.btn-primary { background: var(--navy-fill); border-color: var(--navy-fill); color: #fff; }
.btn-primary:hover { background: var(--navy-fill-hover); }
.btn-ghost { border-color: transparent; background: none; color: var(--blue); font-weight: 600; }
.btn-danger { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn-danger:hover { background: #7F2F2F; }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   Tablero kanban
   --------------------------------------------------------------------- */
.legend-toggle {
    font-size: 12.5px; color: var(--blue); font-weight: 600; background: none;
    border: none; padding: 0; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 5px;
}
.legend-box {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; margin-bottom: 18px; max-width: 640px;
}
.legend-box h3 { font-size: 13px; margin: 0 0 10px; font-family: 'Inter', sans-serif; font-weight: 700; }

table.matrix { border-collapse: collapse; font-size: 12.5px; width: 100%; }
table.matrix th, table.matrix td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; }
table.matrix th { background: var(--bg-subtle); font-weight: 600; color: var(--muted); font-size: 11.5px; }
.cell-verde    { background: var(--verde-bg);    color: var(--verde);    font-weight: 600; }
.cell-amarillo { background: var(--amarillo-bg); color: var(--amarillo); font-weight: 600; }
.cell-rojo     { background: var(--rojo-bg);     color: var(--rojo);     font-weight: 600; }
.legend-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar select {
    border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px;
    font-size: 12.5px; background: var(--surface); color: var(--ink);
}
.toolbar label {
    font-size: 11.5px; color: var(--muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}

.board { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 20px; }
.col { background: var(--surface-sunken); border-radius: 12px; width: 270px; flex-shrink: 0; padding: 12px; }
.col-descartado { background: var(--descartado-bg); }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.col-title { font-size: 12.5px; font-weight: 700; color: var(--navy-ink); }
.col-count {
    font-size: 11px; background: var(--surface); border: 1px solid var(--line);
    color: var(--muted); padding: 1px 7px; border-radius: 20px;
}
.col-empty { font-size: 12px; color: #9AA4B2; padding: 6px 4px 10px; }

.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    padding: 13px 14px; margin-bottom: 10px; display: block; text-decoration: none;
    box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease;
}
.card:hover { border-color: var(--blue); transform: translateY(-1px); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-chip { font-size: 10.5px; color: var(--muted); }
.card-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 14.5px; margin: 3px 0 6px; line-height: 1.25; }
.badge-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.badge {
    font-size: 10px; background: var(--bg-subtle); border: 1px solid var(--line);
    color: var(--muted); padding: 2px 7px; border-radius: 20px; font-weight: 600;
}
.badge-scope { background: var(--amarillo-bg); border-color: var(--line-amarillo); color: var(--scope-ink); }
.card-meta { font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; margin-bottom: 8px; }
.card-foot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--line); padding-top: 9px; margin-top: 2px;
}
.prio-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.prio-verde     { background: var(--verde-bg);    color: var(--verde); }
.prio-amarillo  { background: var(--amarillo-bg); color: var(--amarillo); }
.prio-rojo      { background: var(--rojo-bg);     color: var(--rojo); }
.prio-pendiente { background: var(--surface-sunken);            color: var(--pendiente-ink); }
.docs-frac { font-size: 11px; color: var(--muted); }

/* Punto rojo del descarte automático sobre la tarjeta */
.dot-sae {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--rojo); flex-shrink: 0; margin-right: 5px;
}

/* ---------------------------------------------------------------------
   Aguja de la brújula (semáforo de prioridad)
   --------------------------------------------------------------------- */
.gauge { width: 40px; height: 26px; flex-shrink: 0; }
.gauge.lg { width: 96px; height: 62px; }
.needle { transition: transform .5s cubic-bezier(.2,.9,.3,1); transform-origin: 50px 54px; }

/* Rueda de avance del estudio del lote. Va junto a la aguja: una dice
   si el predio interesa, la otra cuánto trabajo lleva encima. */
.rueda { width: 30px; height: 30px; flex-shrink: 0; }
.rueda.lg { width: 62px; height: 62px; }
.indicadores { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Lista de etapas del avance, en el detalle del expediente */
.etapas { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.etapas li { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--muted); }
.etapas li.hecha { color: var(--ink); font-weight: 600; }
.etapas .marca {
    width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid var(--line-strong); display: flex; align-items: center;
    justify-content: center; font-size: 9px; color: #fff;
}
.etapas li.hecha .marca { background: var(--verde); border-color: var(--verde); }

/* ---------------------------------------------------------------------
   Vista de detalle
   --------------------------------------------------------------------- */
.detail-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 28px 0; }
.back-link {
    font-size: 12.5px; color: var(--blue); font-weight: 600; background: none; border: none;
    display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; padding: 0; text-decoration: none;
}
.detail-title-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; padding-bottom: 16px; flex-wrap: wrap;
}
.detail-title { font-size: 23px; margin: 0 0 4px; }
.detail-sub { font-size: 12.5px; color: var(--muted); }

.tabs { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.tab {
    padding: 10px 4px; margin-right: 22px; font-size: 13px; font-weight: 600;
    color: var(--muted); background: none; border: none;
    border-bottom: 2px solid transparent; text-decoration: none; display: inline-block;
}
.tab.active { color: var(--navy-ink); border-bottom-color: var(--navy-ink); }
.tab:hover { color: var(--navy-ink); }

/* ---------------------------------------------------------------------
   Cabecera del expediente

   Una sola pieza: identificación a la izquierda, aguja de prioridad a la
   derecha y las cuatro cifras del predio en una franja inferior. La aguja
   es la misma del tablero, en grande: quien entra al expediente ve de
   inmediato la lectura que traía la tarjeta.
   --------------------------------------------------------------------- */
.exp-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden;
}
.exp-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; padding: 20px 22px 16px; flex-wrap: wrap;
}
.exp-ident { min-width: 240px; flex: 1; }
.exp-code {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); font-weight: 700;
}
.exp-title { font-size: 24px; margin: 5px 0; line-height: 1.15; }
.exp-sub { font-size: 12.5px; color: var(--muted); margin: 0; }
.exp-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 13px; }

/* Aguja + lectura de por qué el predio tiene esa prioridad */
.exp-gauge {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    text-align: center; width: 210px; flex-shrink: 0;
    background: var(--bg-subtle); border-radius: 10px; padding: 14px 16px;
}
.exp-gauge .lectura { font-size: 11px; color: var(--muted); line-height: 1.45; }

.exp-actions {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 0 22px 18px;
}
.exp-actions form { display: inline-flex; margin: 0; }

.exp-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line); background: var(--panel);
}
.exp-stat { padding: 13px 22px; border-right: 1px solid var(--line); min-width: 0; }
.exp-stat:last-child { border-right: none; }
.exp-stat label {
    display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted); font-weight: 600; margin-bottom: 4px;
}
.exp-stat .v {
    font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.15;
}
.exp-stat .u { font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* Barra de pestañas del expediente, pegada bajo la cabecera */
.tabbar {
    background: var(--surface); border: 1px solid var(--line); border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0 22px; display: flex; gap: 0; overflow-x: auto;
}
.tabbar + .tab-body {
    background: var(--bg-subtle); border: 1px solid var(--line); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius); padding: 18px;
}
.tab-body > .brj-tab-panel > .panel:last-child,
.tab-body > .brj-tab-panel > .empty:last-child { margin-bottom: 0; }
.tabbar .tab { margin-right: 22px; white-space: nowrap; }
.tab-count {
    font-size: 10px; background: var(--bg-subtle); border: 1px solid var(--line);
    color: var(--muted); padding: 1px 6px; border-radius: 20px; margin-left: 5px; font-weight: 700;
}
.tab.active .tab-count { background: var(--blue-soft); border-color: var(--line-azul); color: var(--navy-ink); }

/* Encabezado interno de panel: título a la izquierda, acciones a la derecha */
.panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.panel-head .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-sep { border-top: 1px solid var(--line); margin: 16px 0 0; padding-top: 14px; }

/* Fila del historial de versiones */
.ver-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line);
    font-size: 12.5px;
}
.ver-row:last-child { border-bottom: none; }
.ver-row .tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Checklist documental con carga en la misma fila */
.doc-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.doc-row:last-of-type { border-bottom: none; }
.doc-row .doc-info { min-width: 220px; flex: 1; }
.doc-row .doc-nombre { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.doc-row .doc-meta { font-size: 11px; color: var(--muted); margin-top: 3px; padding-left: 16px; }
.doc-row .doc-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.doc-dot.ok { background: var(--verde); }

/* Input de archivo compacto, dentro de la fila del checklist */
.file-mini { font-size: 11.5px; color: var(--muted); max-width: 200px; }
.file-mini::file-selector-button {
    font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px;
    padding: 4px 9px; margin-right: 8px; cursor: pointer;
}
.file-mini::file-selector-button:hover { border-color: var(--navy-ink); color: var(--navy-ink); }

/* Enlace de acción en línea (Ver · Descargar) */
.link-accion {
    font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none;
    background: none; border: none; padding: 0;
}
.link-accion:hover { text-decoration: underline; }

/* Casilla de tarea completada. Es un botón dentro de un formulario, no
   un checkbox: marcarla escribe en la base, y un checkbox suelto daría
   a entender que el cambio se guarda solo. */
.tarea-check {
    width: 19px; height: 19px; border-radius: 5px; border: 1.5px solid var(--line-strong);
    background: var(--surface); color: #fff; font-size: 11px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.tarea-check:hover { border-color: var(--verde); }
.tarea-check.hecha { background: var(--verde); border-color: var(--verde); }

.grid-2 { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.panel h2, .panel h3 { margin-top: 0; }
.panel-label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); font-weight: 700; margin-bottom: 12px;
}

.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
.kv-item { min-width: 0; }
.kv-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 3px; }
.kv-v { font-size: 13.5px; color: var(--ink); word-break: break-word; }

/* ---------------------------------------------------------------------
   Tablas de datos
   --------------------------------------------------------------------- */
table.data { border-collapse: collapse; width: 100%; font-size: 13px; }
table.data th {
    text-align: left; font-size: 12px;
    color: var(--muted); font-weight: 640; padding: 11px 10px; border-bottom: 1px solid var(--line);
    background: var(--bg-subtle);
}
table.data td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tbody tr:hover { background: var(--panel); }
table.data tbody tr.clickable { cursor: pointer; }

/* Resaltado de anotaciones del CTL */
tr.row-verde    { background: var(--verde-bg); }
tr.row-rojo     { background: var(--rojo-bg); }
tr.row-amarillo { background: var(--amarillo-bg); }
tr.row-verde:hover, tr.row-rojo:hover, tr.row-amarillo:hover { filter: brightness(0.98); }

/* ---------------------------------------------------------------------
   Banners
   --------------------------------------------------------------------- */
.banner {
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px;
    display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.5;
}
.banner-icon { font-size: 16px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.banner-verde    { background: var(--verde-bg);    color: var(--verde);    border: 1px solid var(--line-verde); }
.banner-amarillo { background: var(--amarillo-bg); color: var(--amarillo); border: 1px solid var(--line-amarillo); }
.banner-rojo     { background: var(--rojo-bg);     color: var(--rojo);     border: 1px solid var(--line-rojo); }
.banner-azul     { background: var(--blue-soft);   color: var(--navy-ink);     border: 1px solid var(--line-azul); }
.banner-sub { font-size: 11.5px; opacity: .85; margin-top: 4px; font-weight: 400; }

/* Banner global de descarte SAE: rojo pleno arriba del contenido.
   Ya no es `sticky`: acompañaba el scroll en todas las pantallas y
   terminaba siendo ruido. Se puede minimizar y se puede cerrar. */
.banner-sae {
    background: #8E2F2F; color: #fff; border: none; border-radius: 0;
    padding: 12px 28px; margin: 0; z-index: 40;
    display: flex; align-items: flex-start; gap: 12px; font-size: 13px;
}
.banner-sae a { color: #FFD9D9; text-decoration: underline; }
.banner-sae.min .banner-sae-body { display: none; }
.banner-sae-acciones { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.banner-sae-toggle {
    background: rgba(255,255,255,0.15); border: none; color: #fff;
    border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.banner-sae-toggle:hover { background: rgba(255,255,255,0.28); }

/* Botón de cierre de los mensajes flash. Lo inyecta app.js. */
.flash { position: relative; padding-right: 40px; }
.flash-cerrar {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; color: inherit; opacity: .55;
    font-size: 13px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.flash-cerrar:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.input, .field input[type=text], .field input[type=number], .field input[type=email],
.field input[type=password], .field select, .field textarea {
    width: 100%; border: 1px solid var(--line-strong); border-radius: 8px;
    padding: 9px 11px; font-size: 13.5px; color: var(--ink); background: var(--surface); outline: none;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,92,138,0.12);
}
.field textarea { resize: vertical; line-height: 1.55; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }

/* ---------------------------------------------------------------------
   Chips de filtro
   --------------------------------------------------------------------- */
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
    font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted);
}
.chip:hover { border-color: var(--navy-ink); color: var(--navy-ink); }
.chip.active { background: var(--navy-fill); border-color: var(--navy-fill); color: #fff; }

/* ---------------------------------------------------------------------
   Panel de documentos (checklist)
   --------------------------------------------------------------------- */
.doc-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.doc-item:last-child { border-bottom: none; }
.doc-check { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.doc-recibido { color: var(--ink); }
.doc-recibido .doc-nombre { text-decoration: line-through; opacity: .65; }
.doc-pendiente .doc-nombre { color: var(--ink); }

.progress { height: 6px; background: var(--track); border-radius: 20px; overflow: hidden; margin: 6px 0 4px; }
.progress > span { display: block; height: 100%; background: var(--verde); border-radius: 20px; }

/* ---------------------------------------------------------------------
   Barras del potencial edificable
   --------------------------------------------------------------------- */
.bar-row {
    display: grid; grid-template-columns: 150px 1fr 90px;
    align-items: center; gap: 12px; margin-bottom: 10px; font-size: 12.5px;
}
.bar-label { color: var(--muted); }
.bar-track { background: var(--surface-sunken); border-radius: 4px; height: 9px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 4px; }
.bar-value { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }

/* ---------------------------------------------------------------------
   Componentes de la ficha normativa (prototipo)
   --------------------------------------------------------------------- */

/* Título de panel: en Inter, no en Fraunces. Es una etiqueta, no un titular. */
.panel h3 {
    font-family: 'Inter', sans-serif; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin: 0 0 14px;
}

/* Cuatro cifras clave de la edificabilidad */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card { background: var(--bg-subtle); border-radius: 10px; padding: 14px 16px; }
.stat-card label {
    display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted); font-weight: 600; margin-bottom: 5px;
}
.stat-card .v { font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 600; line-height: 1.1; }
.stat-card .u { font-size: 12px; color: var(--muted); font-weight: 400; }

/* Franja navy con el tiempo de análisis y el veredicto */
.banner-analisis {
    background: var(--navy-fill); color: #fff; border-radius: var(--radius);
    padding: 14px 18px; display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.banner-analisis .t1 { font-size: 13.5px; font-weight: 600; }
.banner-analisis .t2 { font-size: 11.5px; color: #9FB3C8; margin-top: 2px; }
.banner-analisis .arrow {
    margin-left: auto; font-size: 12px; font-weight: 700;
    background: rgba(255,255,255,0.12); padding: 5px 11px; border-radius: 20px;
}

/* Limitación detectada */
.limit-card { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.limit-icn { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--amarillo); }
.limit-title { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.limit-detail { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 6px; }
.src-tag {
    font-size: 10.5px; background: var(--bg-subtle); border: 1px solid var(--line);
    padding: 2px 8px; border-radius: 20px; color: var(--muted); display: inline-block;
}

/* Fuentes consultadas */
.source-row {
    display: flex; align-items: center; gap: 8px; font-size: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--line);
}
.source-row:last-child { border-bottom: none; }
.source-row .name { flex: 1; min-width: 0; }
.source-row .time { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.check-ok { color: var(--verde); flex-shrink: 0; display: flex; }
/* Este icono dice que falta un documento, asi que tiene que verse:
   con --line-strong quedaba a 1.7:1 sobre el papel, por debajo del
   3:1 que necesita cualquier icono que signifique algo. */
.check-no { color: var(--muted); flex-shrink: 0; display: flex; }

/* Confianza del análisis */
.confidence-big { font-family: 'Fraunces', Georgia, serif; font-size: 38px; font-weight: 600; line-height: 1; }
.confidence-bar { background: var(--surface-sunken); border-radius: 4px; height: 7px; overflow: hidden; margin: 8px 0 6px; }
.confidence-fill { height: 100%; background: var(--navy-fill); }
.disclaimer {
    background: var(--bg-subtle); border-radius: 8px; padding: 12px 14px;
    font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 14px;
}

/* Rejilla de campos con etiqueta encima */
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; }
.field-grid .field { margin-bottom: 0; }
.field-grid label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted); font-weight: 600; margin-bottom: 3px; display: block;
}
.field-grid .val { font-size: 14px; font-weight: 600; word-break: break-word; }

/* Estado vacío dentro de un panel */
.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-state svg { width: 34px; height: 34px; color: var(--line-strong); margin-bottom: 12px; }
.empty-state p { max-width: 460px; margin: 0 auto 16px; font-size: 13px; line-height: 1.6; }

@media (max-width: 900px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .bar-row { grid-template-columns: 110px 1fr 78px; gap: 8px; font-size: 11.5px; }
}

/* ---------------------------------------------------------------------
   Estados vacíos, mensajes flash y utilidades
   --------------------------------------------------------------------- */
.empty {
    border: 1px dashed var(--line-strong); border-radius: var(--radius);
    background: var(--surface); padding: 40px 24px; text-align: center; color: var(--muted);
}
.empty h3 { font-size: 15px; color: var(--ink); margin: 0 0 6px; }

.flash { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-size: 13px; font-weight: 500; }
.flash-success { background: var(--verde-bg);    color: var(--verde);    border: 1px solid var(--line-verde); }
.flash-error   { background: var(--rojo-bg);     color: var(--rojo);     border: 1px solid var(--line-rojo); }
.flash-warning { background: var(--amarillo-bg); color: var(--amarillo); border: 1px solid var(--line-amarillo); }
.flash-info    { background: var(--blue-soft);   color: var(--navy-ink);     border: 1px solid var(--line-azul); }

.muted { color: var(--muted); }
.text-sm { font-size: 12.5px; }
.text-xs { font-size: 11.5px; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }

/* Las pestañas del expediente y el velo de carga del listado se ocultan
   y se muestran con estas dos clases. Se declaran aquí y no se heredan de
   Tailwind: si el CDN no carga —y en el hosting del cliente puede no
   cargar— se verían las cinco pestañas a la vez y el velo permanente.
   app.js nunca pone las dos a la vez. */
.flex { display: flex; }
.hidden { display: none; }

/* Zona de arrastrar y soltar archivos */
.brj-dropzone {
    border: 1px dashed var(--line-strong); border-radius: 8px; padding: 14px;
    background: var(--panel); text-align: center; position: relative; transition: border-color .15s ease, background .15s ease;
}
.brj-dropzone:hover { border-color: var(--blue); }
.brj-dropzone.arrastrando { border-color: var(--blue); background: var(--blue-soft); }
.brj-dropzone.tiene-archivo { border-style: solid; border-color: var(--verde); background: var(--verde-bg); }
.brj-dropzone input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.brj-dropzone-hint { font-size: 12px; color: var(--muted); pointer-events: none; }
.brj-dropzone.tiene-archivo .brj-dropzone-hint { color: var(--verde); font-weight: 600; }

/* Modal */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(11,22,38,0.45);
    display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px;
}
.modal {
    background: var(--surface); border-radius: 12px; padding: 24px; width: 100%; max-width: 520px;
    box-shadow: 0 20px 60px rgba(11,22,38,0.25); max-height: 90vh; overflow-y: auto;
}
.modal h2 { font-size: 17px; margin: 0 0 6px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .grid-2 { grid-template-columns: 1fr; }
    .kv { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .sidebar { display: none; }
    .content, .topbar, .detail-head { padding-left: 16px; padding-right: 16px; }
    .kv, .form-grid, .form-grid-2 { grid-template-columns: 1fr; }
    .bar-label { width: 110px; }
}

/* ---------------------------------------------------------------------
   Accesibilidad: saltar al contenido y textos solo para lectores
   El enlace vive fuera de la pantalla hasta que alguien lo enfoca con el
   teclado. Quien navega con tabulador no tiene que recorrer todo el menu
   en cada pagina para llegar a lo que vino a hacer.
   --------------------------------------------------------------------- */
.qbk-saltar{
  position:absolute;left:-9999px;top:0;z-index:100000;
  background:#0E1B21;color:#fff;padding:10px 16px;border-radius:0 0 4px 0;
  font:600 14px/1 ui-sans-serif,"Segoe UI",system-ui,sans-serif;text-decoration:none;
}
.qbk-saltar:focus{left:0;}
.qbk-solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =====================================================================
   EMBUDO · hasta dónde llegan los predios
   El tablero dice qué hay en cada columna; esto dice dónde se cae el
   proceso. La barra mide cuántos alcanzaron la fase, y el escalón entre
   una barra y la siguiente es lo que se quedó atrás.
   ===================================================================== */

.embudo{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px 20px;
  margin-bottom: 20px;
}
.embudo-cab{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.embudo-t{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}
.embudo-s{
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}
.embudo-s strong{ color: var(--navy-ink); font-weight: 700; }

.embudo-cuerpo{ padding-top: 14px; }

.embudo-fase{
  display: grid;
  grid-template-columns: 148px minmax(0,1fr) 116px;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.embudo-fase:last-child{ margin-bottom: 0; }

.embudo-fase-t{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
  line-height: 1.3;
}
/* La fase con gente parada ahora mismo se distingue de la que ya pasaron */
.embudo-fase.con-gente .embudo-fase-t{ color: var(--ink); }

.embudo-riel{
  height: 30px;
  background: var(--bg-subtle);
  border-radius: 6px;
  overflow: hidden;
}
.embudo-barra{
  height: 100%;
  min-width: 30px;
  background: linear-gradient(90deg, var(--navy-fill), var(--blue));
  border-radius: 0 6px 6px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}
.embudo-n{
  font: 700 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.embudo-lado{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.embudo-aqui{
  font-weight: 700;
  color: var(--navy-ink);
  background: var(--blue-soft);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}
.embudo-vacia{ color: var(--line-strong); }
/* La caída se lee como pérdida: va en el rojo del sistema, no en gris */
.embudo-caida{
  font-weight: 700;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 760px){
  .embudo{ padding: 15px 14px 16px; }
  .embudo-fase{
    grid-template-columns: minmax(0,1fr) 104px;
    gap: 8px 10px;
  }
  /* En pantalla angosta el rotulo se pone encima y el riel ocupa el ancho */
  .embudo-fase-t{ grid-column: 1 / -1; text-align: left; }
  .embudo-riel{ height: 26px; }
}

/* =====================================================================
   GUIA "COMO SE USA"
   Un boton fijo abajo a la derecha abre un panel que se desliza desde
   el borde y cuenta, en lenguaje llano, para que sirve la aplicacion y
   como se usa.

   Va con una casilla oculta y etiquetas (no <details> ni guion): la
   politica de seguridad de esta app no admite scripts en linea, asi que
   abre y cierra con puro CSS.
   ===================================================================== */

.b-guia-sw{ position: absolute; opacity: 0; pointer-events: none; }

.b-guia-btn{
  position: fixed; right: 22px; bottom: 22px; z-index: 85;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy-fill); color: #fff;
  border-radius: 24px; padding: 11px 18px;
  font: 650 13.5px/1 inherit;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.b-guia-btn:hover{ background: var(--blue); transform: translateY(-1px); box-shadow: 0 24px 60px rgba(11,22,38,.30); }
.b-guia-sw:focus-visible + .b-guia-btn{ outline: 2px solid var(--navy-ink); outline-offset: 3px; }

/* Todo el panel vive oculto hasta que la casilla se marca */
.b-guia-todo{ display: none; }
.b-guia-sw:checked ~ .b-guia-todo{ display: block; }

.b-guia-velo{
  position: fixed; inset: 0; z-index: 90; cursor: pointer;
  background: rgba(15,32,39,.5); backdrop-filter: blur(2px);
  animation: b-fade-guia 140ms ease-out;
}

.b-guia-panel{
  position: fixed; top: 0; right: 0; z-index: 91;
  width: min(440px, 92vw); height: 100vh;
  background: var(--bg);
  box-shadow: -14px 0 44px rgba(15,32,39,.28);
  display: flex; flex-direction: column;
  animation: q-guia-entra 200ms cubic-bezier(.2,.7,.3,1);
}
@keyframes q-guia-entra{ from{ transform: translateX(100%); } to{ transform: none; } }

.b-guia-cab{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--line);
}
.b-guia-cab-ic{
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  background: var(--blue-soft); color: var(--navy-ink);
  display: grid; place-items: center;
}
.b-guia-cab h2{ margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.b-guia-cab p{ margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.b-guia-cerrar{
  margin-left: auto; flex: 0 0 auto; cursor: pointer;
  color: var(--muted); padding: 4px; border-radius: 7px;
  display: grid; place-items: center;
}
.b-guia-cerrar:hover{ background: var(--bg-subtle); color: var(--ink); }

.b-guia-cuerpo{ padding: 20px 22px 32px; overflow-y: auto; }

.b-guia-intro{
  font-size: 14px; line-height: 1.6; color: var(--ink);
  padding: 14px 16px; background: var(--bg-subtle);
  border-left: 3px solid var(--navy-ink); border-radius: 0 8px 8px 0;
  margin-bottom: 22px;
}

.b-guia-sec{
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin: 22px 0 12px;
}

.b-guia-paso{ display: flex; gap: 13px; margin-bottom: 16px; }
.b-guia-paso-n{
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy-fill); color: #fff;
  font: 700 12px/1 ui-monospace,Menlo,Consolas,monospace; display: grid; place-items: center;
}
.b-guia-paso-t{ font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.b-guia-paso-t strong{ color: var(--ink); font-weight: 650; }

.b-guia-punto{ display: flex; gap: 11px; margin-bottom: 13px; }
.b-guia-punto-ic{ flex: 0 0 auto; color: var(--navy-ink); margin-top: 1px; }
.b-guia-punto-t{ font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.b-guia-punto-t strong{ color: var(--ink); font-weight: 650; }

.b-guia-nota{
  font-size: 12.5px; line-height: 1.55; color: var(--ink);
  padding: 12px 14px; background: var(--amarillo-bg);
  border-radius: 8px; margin-top: 20px;
}

@media (max-width: 640px){
  .b-guia-btn{ right: 14px; bottom: 14px; padding: 13px; border-radius: 50%; }
  .b-guia-btn span{ display: none; }
}
@media print{ .b-guia-btn, .b-guia-todo{ display: none !important; } }

@keyframes b-fade-guia{ from{ opacity: 0; } to{ opacity: 1; } }
.b-guia-sw:checked ~ .b-guia-todo{ display: block !important; }


/* Bell de notificaciones */
.bell{position:relative;display:inline-flex;}
.bell-btn{position:relative;}
.bell-contador{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#D64545;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1;letter-spacing:0;}
.bell-panel{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid #E4E1D9;border-radius:12px;box-shadow:0 20px 60px -20px rgba(11,22,38,.25);z-index:50;overflow:hidden;}
.bell-cab{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #E4E1D9;}
.bell-cab-t{font-weight:700;font-size:13px;color:#0B1626;}
.bell-marcar{background:transparent;border:0;color:#1F3F5E;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;}
.bell-marcar:hover{text-decoration:underline;}
.bell-lista{max-height:400px;overflow-y:auto;}
.bell-item{display:block;padding:12px 16px;border-bottom:1px solid #E4E1D9;text-decoration:none;color:#171B21;cursor:pointer;transition:background .12s;}
.bell-item:hover{background:#F5F3EE;}
.bell-item .m{font-size:13px;line-height:1.35;color:#0B1626;}
.bell-item .h{font-size:11px;color:#7C837E;margin-top:3px;}
.bell-vacio{padding:24px 16px;text-align:center;color:#7C837E;font-size:12.5px;font-style:italic;font-family:Georgia,serif;}
.bell-permiso{padding:12px 16px;background:#DDECEC;color:#163E40;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.bell-permiso button{background:#163E40;color:#fff;border:0;padding:6px 12px;border-radius:6px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;}

/* =====================================================================
   Comité Q3 (2026-10-27): documentos «se tiene / falta / no aplica»
   y pestaña «Comentarios y actas». Solo variables: el modo oscuro las
   redefine en brujula-fase3.css.
   ===================================================================== */

.doc-dot.na { background: transparent; border: 1.5px dashed var(--line-strong); }
.doc-row.doc-no-aplica .doc-nombre { color: var(--muted); }
.doc-estado {
    font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px;
    border: 1px solid var(--line); white-space: nowrap;
}
.doc-estado-ok    { color: var(--verde);    background: var(--verde-bg);    border-color: var(--line-verde); }
.doc-estado-falta { color: var(--amarillo); background: var(--amarillo-bg); border-color: var(--line-amarillo); }
.doc-estado-na    { color: var(--muted);    background: var(--bg-subtle); }

.doc-na-menu { position: relative; }
.doc-na-menu > summary { cursor: pointer; list-style: none; }
.doc-na-menu > summary::-webkit-details-marker { display: none; }
.doc-na-caja {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(300px, 80vw);
    display: grid; gap: 8px; padding: 12px; background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow);
}

.nota-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.nota-tipo { cursor: pointer; }
.nota-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.nota-tipo span {
    display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 12px;
    border: 1px solid var(--line-strong); border-radius: 20px; color: var(--muted); background: var(--surface);
}
.nota-tipo input:checked + span { color: #fff; background: var(--navy-fill); border-color: var(--navy-fill); }
.nota-tipo input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.nota { padding: 14px 0 14px 12px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--line); }
.nota:last-child { border-bottom: none; }
.nota-acta     { border-left-color: var(--blue); }
.nota-decision { border-left-color: var(--verde); }
.nota-alerta   { border-left-color: var(--rojo); }
.nota-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.nota-cuerpo { font-size: 13px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; margin-top: 4px; }
.nota-borrar { margin-top: 6px; }

/* Contraste con fuentes oficiales (comité Q3, 2026-10-28) */
.contraste-coincide    { color: var(--verde);    background: var(--verde-bg);  border-color: var(--line-verde); }
.contraste-revisar     { color: var(--rojo);     background: var(--rojo-bg);   border-color: var(--line-rojo); }
.contraste-sin_dato    { color: var(--muted);    background: var(--bg-subtle); }
.contraste-informativo { color: var(--blue);     background: var(--blue-soft); border-color: var(--line-azul); }
.contraste-tabla td { vertical-align: top; }