:root {
  --ground:#f4f6f9; --surface:#fff; --surface-2:#eef1f6; --ink:#11151c; --ink-2:#3a4250;
  --muted:#667085; --line:#dde2ea; --brand:#1f5fae; --brand-bg:#e3ecf8;
  --ok:#1b6e48; --ok-bg:#e5f2eb; --warn:#8a5a06; --warn-bg:#fbf1dc; --stop:#a32a22; --stop-bg:#f9e6e4;
  --barra:#12233c;
}
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body {
  background:var(--ground); color:var(--ink);
  font:14.5px/1.55 "IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.mono { font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; }
.num { font-variant-numeric:tabular-nums; }
[hidden] { display:none !important; }

/* ---------------------------------------------------------------- entrada */
.entrada {
  min-height:100%; display:grid; grid-template-columns:1.05fr 1fr;
  /* la foto cruza toda la pantalla; el velo solo aclara la izquierda para que se lea la marca */
  background:
    linear-gradient(100deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.34) 38%, rgba(255,255,255,.06) 58%, rgba(255,255,255,0) 72%),
    url("img/fondo.jpg") center 42% / cover no-repeat, #cfe0f4;
}

/* lado de la marca: el paisaje de fondo, el logo arriba y la mascota abajo, como en el diseño */
.marca-lado {
  position:relative; overflow:hidden; display:grid; align-content:start; justify-items:center;
  padding:38px 30px 0; background:none;
}
.marca-contenido { position:relative; z-index:2; text-align:center; display:grid;
                   justify-items:center; max-width:560px; width:100%; }
.isotipo { width:min(190px,38%); height:auto; display:block;
           filter:drop-shadow(0 8px 16px rgba(16,42,80,.22)); }
.marca-nombre { font-size:clamp(24px,3.6vw,42px); letter-spacing:.05em; color:#123a6b;
                margin:4px 0 0; font-weight:700; text-shadow:0 2px 10px rgba(255,255,255,.75); }
.marca-sub { color:#1f5fae; font-size:clamp(14px,1.7vw,19px); margin:2px 0 0; letter-spacing:.04em;
             text-shadow:0 2px 10px rgba(255,255,255,.7); }
.marca-sub::before, .marca-sub::after { content:""; display:inline-block; width:32px; height:2px;
  background:#e0b23c; vertical-align:middle; margin:0 10px; }
.marca-lema { margin:12px 0 0; color:#2b4a70; font-size:12px; letter-spacing:.22em;
              text-transform:uppercase; line-height:1.9; text-shadow:0 2px 10px rgba(255,255,255,.8); }
.robot { width:min(330px,64%); height:auto; display:block; margin:-6px 0 0;
         filter:drop-shadow(0 22px 26px rgba(12,32,60,.32)); }
.ola { position:absolute; inset:auto -10% -12% -10%; height:34%; z-index:1;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(31,95,174,.20) 0%, rgba(31,95,174,0) 70%);
  border-top-left-radius:60% 100%; border-top-right-radius:40% 100%;
}
.marca-lado::after {   /* filete dorado, como el del diseño */
  content:""; position:absolute; right:-60px; top:0; bottom:0; width:120px; z-index:3;
  background:linear-gradient(180deg,rgba(224,178,60,0) 0%,#e0b23c 45%,rgba(224,178,60,0) 100%);
  transform:skewX(-8deg); opacity:.55;
}

/* lado del acceso */
.acceso-lado { display:grid; place-items:center; padding:40px 26px; }
.entrada form {
  background:rgba(255,255,255,.93); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border-radius:20px; padding:34px 32px 26px;
  width:min(420px,100%); box-shadow:0 26px 70px rgba(4,14,30,.35);
  border:1px solid rgba(255,255,255,.7);
}
.filete { display:block; width:54px; height:3px; border-radius:2px; background:#e0b23c; margin:0 auto 18px; }
.entrada h2 { font-size:27px; margin:0; text-align:center; letter-spacing:-.02em; color:#12233c; }
.entrada p.sub { color:var(--muted); font-size:13.5px; margin:4px 0 22px; text-align:center; }

.campo-icono {
  display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px;
  padding:9px 14px; margin-bottom:13px; background:#fbfcfe; transition:border-color .15s, box-shadow .15s;
}
.campo-icono:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,95,174,.12); }
.campo-icono > svg { width:22px; height:22px; fill:#25518a; flex-shrink:0; }
.campo-icono > div { flex:1; min-width:0; }
.campo-icono label { display:block; font-size:12.5px; color:#25518a; font-weight:600; }
.campo-icono input { width:100%; border:0; background:none; padding:1px 0 0; font-size:14px; }
.campo-icono input:focus { outline:none; }
.con-ojo { position:relative; }
.con-ojo input { padding-right:42px; }
.con-ojo .ver-clave { position:absolute; right:8px; top:50%; transform:translateY(-50%); }
.ver-clave { border:0; background:none; cursor:pointer; padding:2px; line-height:0; }
.ver-clave svg { width:21px; height:21px; fill:#8fa3bd; }
.ver-clave[aria-pressed="true"] svg { fill:#25518a; }

.btn { border:0; background:var(--brand); color:#fff; border-radius:8px; padding:9px 16px;
       font-weight:600; cursor:pointer; }
.btn:disabled { opacity:.6; cursor:wait; }
.btn.ancho { width:100%; }
.btn.sec { background:var(--surface-2); color:var(--ink-2); }
.btn.entrar {
  margin-top:8px; padding:14px 18px; border-radius:30px; font-size:16px; letter-spacing:.02em;
  background:linear-gradient(100deg,#12233c 0%,#1f4e8c 55%,#2f77c9 100%);
  box-shadow:0 10px 24px rgba(18,35,60,.28);
}
.btn.entrar span { margin-left:6px; }
.aviso { margin-top:12px; padding:9px 11px; border-radius:8px; font-size:13px; display:none; }
.aviso.mal { background:var(--stop-bg); color:var(--stop); display:block; }
.aviso.bien { background:var(--ok-bg); color:var(--ok); display:block; }

.separador { display:flex; align-items:center; gap:12px; margin:22px 0 12px; }
.separador::before, .separador::after { content:""; flex:1; height:1px; background:#e6c98a; }
.separador span { font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:#9b8757; }
.pie { display:flex; gap:9px; align-items:flex-start; font-size:11.5px; color:var(--muted);
       text-align:left; margin:0; }
.escudo { width:20px; height:20px; fill:#9fb0c6; flex-shrink:0; }

@media (max-width: 900px) {
  .entrada { grid-template-columns:1fr;
    background:
      linear-gradient(180deg, rgba(10,25,48,.30) 0%, rgba(10,25,48,.55) 46%, rgba(10,25,48,.72) 100%),
      url("img/fondo.jpg") center 42% / cover no-repeat, #12233c; }
  .marca-lado { padding:20px 20px 0; min-height:210px; background:none; }
  .marca-lado::after, .ola { display:none; }
  .isotipo { width:84px; }
  .marca-nombre { color:#fff; font-size:24px; text-shadow:0 2px 12px rgba(0,0,0,.5); }
  .marca-sub { color:#dbe9fb; font-size:14px; text-shadow:0 2px 12px rgba(0,0,0,.5); }
  .marca-lema { color:#c3d6ee; font-size:10.5px; letter-spacing:.16em; margin-top:8px;
                text-shadow:0 2px 12px rgba(0,0,0,.5); }
  .robot { width:150px; margin-top:4px; }
  .acceso-lado { padding:10px 16px 34px; }
}

/* ---------------------------------------------------------------- armazon */
.app { display:grid; grid-template-columns:232px 1fr; grid-template-rows:auto 1fr;
       grid-template-areas:"marca cabecera" "menu vista"; height:100%; }
.marca { grid-area:marca; background:var(--barra); color:#fff; padding:14px 16px; }
.marca strong { display:block; font-size:14px; letter-spacing:.02em; }
.marca span { font-size:11px; color:#9fb4d0; }
nav { grid-area:menu; background:var(--barra); padding:6px 10px 20px; overflow-y:auto; }
nav button {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0; cursor:pointer;
  background:none; color:#c9d7e8; padding:9px 11px; border-radius:6px; font-size:13.5px;
}
nav button:hover { background:rgba(255,255,255,.08); color:#fff; }
nav button[aria-current="true"] { background:var(--brand); color:#fff; font-weight:600; }
nav .grupo { color:#7f95b1; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
             padding:14px 11px 4px; }
header.top { grid-area:cabecera; background:var(--surface); border-bottom:1px solid var(--line);
             display:flex; align-items:center; gap:14px; padding:10px 18px; }
header.top .quien { margin-left:auto; text-align:right; font-size:12.5px; line-height:1.3; }
header.top .quien strong { display:block; font-size:13px; }
header.top .quien span { color:var(--muted); }
main { grid-area:vista; overflow-y:auto; padding:20px 22px 60px; }
.limite { max-width:1080px; }
h2.titulo { font-size:19px; margin:0 0 3px; letter-spacing:-.01em; }
p.desc { color:var(--muted); margin:0 0 18px; }

.tarjetas { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); }
.tarjeta { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.tarjeta .k { font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.tarjeta .v { font-size:25px; font-weight:600; letter-spacing:-.02em; margin-top:4px; }
.tarjeta .n { font-size:12px; color:var(--muted); margin-top:3px; }
.tarjeta.alto { border-left:3px solid var(--stop); }
.tarjeta.medio { border-left:3px solid var(--warn); }

/* ------------------------------------------------------- panel de gestión */
.saludo { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.saludo > div:first-child { flex:1 1 320px; }
.saludo p.desc { margin-bottom:0; }
.rapidas { display:flex; gap:6px; flex-wrap:wrap; }
.rapidas .btn { padding:6px 12px; font-size:12.5px; }

.busca-panel { position:relative; margin:16px 0 18px; }
#sugerencias:not(:empty) { position:absolute; z-index:5; left:0; right:0; margin-top:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:0 12px 28px rgba(8,22,44,.14); }
#sugerencias button { display:flex; gap:10px; align-items:baseline; width:100%; text-align:left;
  border:0; border-bottom:1px solid var(--line); background:none; cursor:pointer; padding:9px 12px; }
#sugerencias button:last-child { border-bottom:0; }
#sugerencias button:hover { background:var(--brand-bg); }
#sugerencias strong { font-weight:600; }

.grupo-ind { margin-bottom:16px; }
.grupo-ind h3 { font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
                margin:0 0 8px; font-weight:600; }
/* una tarjeta que se puede pulsar: el número es la puerta a esa lista de clientes */
.tarjeta.enlace { cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit;
                  transition:border-color .12s, box-shadow .12s, transform .12s; }
.tarjeta.enlace:hover { border-color:var(--brand); box-shadow:0 6px 16px rgba(8,22,44,.08);
                        transform:translateY(-1px); }
.tarjeta.enlace:hover .v { color:var(--brand); }
.tarjeta.alto .v { color:var(--stop); }
.tarjeta.medio .v { color:var(--warn); }

.dos-columnas { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
                align-items:start; }
.dos-columnas .panel { margin-top:14px; }

.tabla-atencion td.prio { width:26px; font-size:13px; }
.tabla-atencion .abrir { color:var(--brand); font-size:12.5px; white-space:nowrap; }
.vacio.ok { color:var(--ok); background:var(--ok-bg); }

.barra-cartera { display:flex; height:10px; border-radius:999px; overflow:hidden; gap:2px;
                 background:var(--surface-2); margin-bottom:12px; }
.t-ok { background:var(--ok); } .t-info { background:var(--brand); }
.t-warn { background:var(--warn); } .t-stop { background:var(--stop); } .t-gris { background:#98a2b3; }
.lista-cartera { list-style:none; margin:0; padding:0; }
.lista-cartera button { display:flex; align-items:center; gap:9px; width:100%; border:0; background:none;
  cursor:pointer; padding:6px 6px; border-radius:6px; border-bottom:1px solid var(--line); }
.lista-cartera li:last-child button { border-bottom:0; }
.lista-cartera button:hover { background:var(--brand-bg); }
.lista-cartera .punto { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.lista-cartera .et { flex:1; text-align:left; font-size:13.5px; }
.lista-cartera .num { font-weight:600; font-variant-numeric:tabular-nums; }
.lista-cartera .pct { min-width:34px; text-align:right; }

/* Contador que cada módulo puede colgar al lado de su título, en la cabecera. */
.insignia { display:inline-block; margin-left:9px; vertical-align:2px; padding:2px 9px;
  border-radius:999px; background:var(--brand-bg); color:var(--brand); font-size:11.5px;
  font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.insignia.vacia { background:var(--surface-2); color:var(--muted); }

/* Marca de revisión de ATC. Va siempre acompañada de su texto: un triángulo solo se
   confundiría con la restricción legal, que es otra cosa y la única que prohíbe contactar. */
.tri-atc { color:var(--stop); font-size:13px; line-height:1; }
.ok-atc { color:var(--ok); font-size:13px; line-height:1; }

.caja-atc { border-radius:8px; padding:12px 14px; margin-bottom:14px; border:1px solid var(--line);
  border-left-width:4px; }
.caja-atc h4 { margin:0 0 6px; font-size:14px; }
.caja-atc p { margin:0 0 6px; font-size:13.5px; }
.caja-atc p:last-child { margin-bottom:0; }
.caja-atc.auditoria { background:var(--stop-bg); border-left-color:var(--stop); }
.caja-atc.auditoria h4 { color:var(--stop); }
.caja-atc.verificado { background:var(--ok-bg); border-left-color:var(--ok); }
.caja-atc.verificado h4 { color:var(--ok); }
.caja-atc.sinrevisar { background:var(--surface-2); border-left-color:#98a2b3; }
.obs-atc { white-space:pre-line; background:var(--surface); border-radius:6px; padding:9px 11px;
  font-size:13px; line-height:1.55; }

/* Lo que una persona leyó en el expediente, punto por punto. Numerado porque así se escribe
   y así se discute: "el punto 3 dice que la cláusula no le aplica". */
/* Cada documento escaneado con su propio enlace: minuta, contrato y adendas por separado. */
.docs-escaneados { list-style:none; margin:0 0 12px; padding:0; }
.docs-escaneados li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:7px 0;
  border-bottom:1px dashed var(--line); font-size:13.5px; }
.docs-escaneados li:last-child { border-bottom:0; }
.docs-escaneados .chip { flex-shrink:0; }
.docs-escaneados a { overflow-wrap:anywhere; }
.ver-carpeta { font-weight:500; font-size:12.5px; margin-left:8px; text-transform:none;
  letter-spacing:0; }

.hallazgos { margin:0 0 12px; padding-left:22px; }
.hallazgos li { font-size:13.5px; line-height:1.6; padding:5px 0; border-bottom:1px dashed var(--line); }
.hallazgos li:last-child { border-bottom:0; }
.hallazgos li::marker { color:var(--brand); font-weight:700; }

/* Lo que no existe en ningún archivo: se enumera para que un campo vacío no se lea como
   "este cliente no tiene documento". */
.falta-archivo { list-style:none; margin:0; padding:0; }
.falta-archivo li { padding:8px 0 8px 15px; border-left:3px solid var(--warn); margin-bottom:8px;
  font-size:13.5px; background:var(--warn-bg); border-radius:0 6px 6px 0; }
.falta-archivo li:last-child { margin-bottom:0; }

.actividad { list-style:none; margin:0; padding:0; }
.actividad li { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.actividad li:last-child { border-bottom:0; }
.actividad .hora { color:var(--muted); font-size:12px; flex-shrink:0; }
.enlace-dni { border:0; background:none; padding:0; color:var(--brand); cursor:pointer; font:inherit;
              text-align:left; }
.enlace-dni:hover { text-decoration:underline; }
.ver-mas { color:var(--brand); font-size:13px; text-decoration:none; }
.ver-mas:hover { text-decoration:underline; }

.aviso-accion { background:var(--brand-bg); border:1px solid var(--brand); border-radius:8px;
  padding:10px 14px; margin-bottom:14px; font-size:13.5px; display:flex; gap:12px;
  align-items:center; flex-wrap:wrap; }
.aviso-accion .btn { margin-left:auto; padding:4px 10px; font-size:12.5px; }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:8px;
         padding:16px 18px; margin-top:14px; }
.panel h3 { margin:0 0 4px; font-size:15px; }
.panel p.hint { color:var(--muted); font-size:13px; margin:0 0 12px; }
.vacio { color:var(--muted); background:var(--surface-2); border-radius:8px; padding:26px;
         text-align:center; }
.construccion { border:1px dashed var(--line); border-radius:8px; padding:24px; text-align:center;
                color:var(--muted); background:var(--surface); }
.construccion strong { display:block; color:var(--ink); margin-bottom:4px; }

/* ------------------------------------------------------- buscador y ficha */
.buscador { width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px;
            background:var(--ground); font-size:15px; }
.buscador:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,95,174,.12); }
/* el estado es uno solo; las situaciones especiales se cruzan con cualquiera de ellos */
.filtros-grupos { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:12px; }
.filtros-grupo { display:flex; flex-direction:column; gap:5px; }
.fg-tit { font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }
.filtros-grupo + .filtros-grupo { padding-left:28px; border-left:1px solid var(--line); }
.filtros-grupo .filtros-linea { margin-top:0; }
.filtros-linea { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.filtros-linea button { border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:3px 11px; font-size:12.5px; color:var(--ink-2); cursor:pointer; }
.filtros-linea button[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:#fff; }
.hint { color:var(--muted); font-size:12.5px; }

/* bandeja de clientes: lo justo para saber quién es y en qué situación está */
.tabla-clientes td { vertical-align:top; }
.tabla-clientes .chip { white-space:nowrap; }
.tabla-clientes td:nth-child(3) { min-width:150px; }
.tabla-clientes td.der.num { white-space:nowrap; }
.lote-linea { font-size:13px; }
.lote-linea + .lote-linea { margin-top:6px; }
/* la etiqueta ocupa su propia línea; el lote va debajo y nunca se encima */
.pl { display:block; width:fit-content; font-size:9.5px; text-transform:uppercase;
      letter-spacing:.07em; font-weight:600; padding:1px 5px; border-radius:3px;
      margin-bottom:2px; line-height:1.35; }
.pl em { display:block; font-style:normal; font-size:8.5px; letter-spacing:.06em; opacity:.75; }
.lote-val { display:block; }
.pl.nuevo { background:var(--brand-bg); color:var(--brand); }
.pl.prop { background:var(--warn-bg); color:var(--warn); }
.pl.ant { background:var(--surface-2); color:var(--muted); }
.lote-linea:has(.pl.ant) .lote-val { color:var(--muted); font-size:12.5px; }
.der { text-align:right; }
tr.fila-cliente { cursor:pointer; }
tr.fila-cliente:hover td { background:var(--brand-bg); }
tr.total td { font-weight:600; background:var(--surface-2); }
tr.nosuma td { color:var(--muted); }

.conf-ficha { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em;
              text-transform:uppercase; color:var(--stop); margin:14px 0 8px; }
.ficha-cab { background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--brand);
             border-radius:8px; padding:16px 18px; }
.ficha-cab h2 { margin:0; font-size:21px; letter-spacing:-.01em; }
.ficha-cab .id { color:var(--ink-2); font-size:12.5px; margin-top:2px; }
/* cabecera de la ficha: quién es, en qué situación está y qué se puede hacer */
.cab-linea { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.cab-linea > div:first-child { flex:1 1 300px; }
.cab-botones { display:flex; gap:8px; flex-wrap:wrap; }
.cab-botones .btn { padding:7px 13px; font-size:13px; }

/* botón pequeño de la tabla de clientes */
.mini { border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:3px 9px;
        font-size:11.5px; color:var(--ink-2); cursor:pointer; white-space:nowrap; }
.mini:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-bg); }
.tabla-clientes .proc { margin-top:3px; }

/* diálogo de cambio de situación */
.modal-fondo { position:fixed; inset:0; background:rgba(8,22,44,.45); display:flex;
               align-items:center; justify-content:center; padding:20px; z-index:60; }
.modal { background:var(--surface); border-radius:10px; padding:20px 22px; width:min(480px,100%);
         max-height:90vh; overflow-y:auto; box-shadow:0 24px 60px rgba(8,22,44,.35); }
.modal h3 { margin:0 0 2px; font-size:17px; }
.modal .sit-actual { margin:12px 0 4px; font-size:13px; color:var(--ink-2); }
.modal fieldset { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:12px 0; }
.modal legend { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
                padding:0 5px; }
.modal .radio { display:flex; gap:9px; align-items:flex-start; padding:6px 4px; cursor:pointer;
                border-radius:6px; }
.modal .radio:hover { background:var(--surface-2); }
.modal .radio input { margin-top:3px; }
.modal label[for] { display:block; font-size:11.5px; color:var(--muted); margin:10px 0 3px; }
.modal textarea { width:100%; min-height:74px; padding:8px 10px; border:1px solid var(--line);
                  border-radius:6px; resize:vertical; }
.modal-pie { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.modal input[type="text"], .modal select { width:100%; padding:8px 10px; border:1px solid var(--line);
  border-radius:6px; background:var(--surface); }
.perm-grupo { margin-bottom:8px; }
.perm-grupo .radio { padding:2px 4px; font-size:13px; }
.perm-grupo .radio span { font-family:"IBM Plex Mono",monospace; font-size:12px; }

.chips-ficha { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chips-ficha .chip { font-weight:600; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); }
.ficha-sec { background:var(--surface); border:1px solid var(--line); border-radius:8px;
             padding:14px 18px; margin-top:12px; }
.ficha-sec h3 { font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--brand); margin:0 0 10px; }
.ficha-sec h3 small { color:var(--muted); font-weight:500; letter-spacing:0; text-transform:none; font-size:12px; }
dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:3px 18px; margin:0; }
dl div { display:flex; gap:8px; border-bottom:1px dashed var(--line); padding:4px 0; min-width:0;
         overflow:hidden; }
/* Un texto largo ocupa la fila entera: así corre a lo ancho en vez de apilarse en una columna
   estrecha. El recorte se levanta, porque aquí sí queremos que crezca hacia abajo. */
dl div.ancho { grid-column:1 / -1; overflow:visible; align-items:flex-start; }
dl div.ancho dd { line-height:1.55; font-weight:400; }
/* En pantalla angosta no hay ancho que repartir: la etiqueta se va arriba y el texto se queda
   con la línea entera, que es la única forma de que no vuelva a leerse en vertical. */
@media (max-width:560px) {
  dl div.ancho { flex-direction:column; gap:2px; }
  dl div.ancho dt { max-width:100%; }
}
dt { color:var(--muted); min-width:130px; max-width:45%; font-size:12.5px; flex-shrink:0; }
dd { margin:0; font-weight:500; min-width:0; overflow-wrap:anywhere; }
/* un chip largo dentro de un dato no debe desbordar sobre la columna de al lado */
dd .chip { display:inline-block; max-width:100%; overflow-wrap:anywhere; }

/* las alertas van en su propia franja, a todo el ancho: son textos largos */
.cab-alertas { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.cab-alertas > span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
                      color:var(--muted); margin-bottom:5px; }
.cab-alertas .chips { display:flex; flex-wrap:wrap; gap:5px; }
.cab-alertas .chip { max-width:100%; overflow-wrap:anywhere; }
.alerta-ficha { border-left:3px solid var(--warn); padding:3px 0 3px 10px; margin:6px 0; }
.alerta-ficha.stop { border-left-color:var(--stop); }
.legal-caja { background:var(--stop-bg); border:1px solid var(--stop); border-left-width:6px;
              border-radius:8px; padding:13px 16px; margin-bottom:12px; }
.legal-caja h3 { margin:0 0 4px; font-size:13px; color:var(--stop); text-transform:uppercase; letter-spacing:.05em; }
.legal-caja .grande { font-size:15px; font-weight:600; margin:0 0 8px; }
.legal-caja dt { color:var(--stop); }
.legal-caja .no { margin:8px 0 0; font-weight:600; color:var(--stop); }

/* expediente: el resumen va una vez; las actuaciones viven en la línea de tiempo */
.expediente { border:1px solid var(--line); border-left:4px solid var(--stop); border-radius:8px;
              padding:12px 14px; margin-bottom:12px; background:var(--surface-2); }
.exp-cab { display:flex; gap:12px; align-items:center; justify-content:space-between;
           flex-wrap:wrap; margin-bottom:6px; }
.exp-ent { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
           display:block; }
.exp-cab strong { font-size:14px; }
.exp-resumen { margin:0 0 10px; font-size:13.5px; }

.version-nueva { position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff; padding:10px 18px; border-radius:999px; font-size:13.5px;
  box-shadow:0 10px 26px rgba(8,22,44,.35); z-index:50; }

/* ficha maestra: índice en columna, situaciones y resumen */
/* el índice va a la derecha, en vertical, y acompaña la lectura sin cortarla */
.ficha { display:grid; grid-template-columns:minmax(0,1fr) 182px; column-gap:22px; align-items:start; }
.ficha > * { grid-column:1; min-width:0; }
.ficha > .indice-ficha { grid-column:2; grid-row:1 / span 400; position:sticky; top:0; align-self:start;
  display:flex; flex-direction:column; gap:1px; max-height:calc(100vh - 96px); overflow-y:auto;
  padding:2px 0 14px; }
.indice-ficha .btn { width:100%; justify-content:center; margin-bottom:10px; }
.indice-titulo { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
                 padding:0 8px 5px; }
.indice-ficha a { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2);
                  text-decoration:none; padding:5px 9px; border-radius:6px;
                  border-left:2px solid transparent; }
.indice-ficha a em { font-style:normal; font-size:10.5px; color:var(--muted); min-width:14px;
                     text-align:right; font-variant-numeric:tabular-nums; }
.indice-ficha a:hover { background:var(--surface-2); color:var(--brand); }
.indice-ficha a.aqui { background:var(--brand-bg); color:var(--brand); font-weight:600;
                       border-left-color:var(--brand); }
.indice-ficha a.aqui em { color:var(--brand); }
/* la ficha gana el ancho que ocupa la columna del índice: el texto no se angosta */
.limite.ficha { max-width:1284px; }

/* pantallas angostas: el índice vuelve a ser una tira arriba, pero deslizable */
@media (max-width: 1150px) {
  .ficha { display:block; }
  .ficha > .indice-ficha { position:sticky; top:0; z-index:3; flex-direction:row; align-items:center;
    gap:4px; max-height:none; overflow-x:auto; overflow-y:hidden; background:var(--ground);
    border-bottom:1px solid var(--line); padding:6px 0 8px; }
  .indice-ficha .btn { width:auto; margin:0 8px 0 0; flex-shrink:0; }
  .indice-titulo { display:none; }
  .indice-ficha a { flex-shrink:0; border-left:0; border-radius:999px; background:var(--surface);
                    border:1px solid var(--line); padding:3px 9px; font-size:12px; }
  .indice-ficha a em { display:none; }
  .indice-ficha a.aqui { border-color:var(--brand); }
}
.ficha-sec h4 { font-size:13px; margin:14px 0 6px; color:var(--ink-2); }
.ficha-sec h4:first-of-type { margin-top:4px; }
.situaciones { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
               margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.situaciones > div { display:flex; flex-direction:column; gap:1px; }
.situaciones span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.situaciones strong { font-size:13px; font-weight:500; }
.resumen-eje h4 { margin:12px 0 4px; color:var(--brand); font-size:13.5px; }
.resumen-eje h4:first-child { margin-top:0; }
.resumen-eje ul { margin:4px 0 0; padding-left:20px; }
/* cada hecho con su fecha delante: quien no conoce el caso lo lee en orden */
.resumen-eje ul.hechos { list-style:none; padding-left:0; }
.resumen-eje ul.hechos li { display:flex; gap:10px; padding:4px 0;
                            border-bottom:1px dashed var(--line); }
.resumen-eje ul.hechos li:last-child { border-bottom:0; }
.resumen-eje .cuando { color:var(--muted); font-size:12px; flex-shrink:0; min-width:78px; }
.ficha .ficha-sec, .ficha .ficha-cab { scroll-margin-top:14px; }
@media (max-width: 1150px) { .ficha .ficha-sec, .ficha .ficha-cab { scroll-margin-top:60px; } }

/* formularios de gestión dentro de la ficha */
.f-linea { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
           background:var(--surface-2); border-radius:8px; padding:12px 14px; margin-bottom:14px; }
.f-linea .full { grid-column:1 / -1; }
.f-linea label { display:block; font-size:11.5px; color:var(--muted); margin-bottom:3px; }
.f-linea input, .f-linea select, .f-linea textarea {
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.f-linea textarea { min-height:70px; resize:vertical; }
.f-linea button { align-self:end; }

.entrada-hist { border-bottom:1px dashed var(--line); padding:9px 0; }
.entrada-hist:last-child { border-bottom:0; }
.entrada-hist .q { font-size:12px; color:var(--muted); }
.entrada-hist p { margin:3px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }

.compromiso { display:flex; gap:12px; align-items:flex-start; border-bottom:1px dashed var(--line);
              padding:9px 0; }
.compromiso:last-child { border-bottom:0; }
.compromiso .t { flex:1; min-width:0; }
.compromiso .q { font-size:12px; color:var(--muted); margin-top:2px; }
.compromiso.hecho .t > div:first-child { color:var(--muted); text-decoration:line-through; }

table { border-collapse:collapse; width:100%; font-size:13.5px; }
th, td { text-align:left; padding:7px 9px; border-bottom:1px solid var(--line); vertical-align:top; }
thead th { background:var(--surface-2); font-size:10.5px; text-transform:uppercase;
           letter-spacing:.06em; color:var(--muted); }
.scroller { overflow-x:auto; }
.chip { font-size:11px; font-weight:700; padding:1px 7px; border-radius:3px; white-space:nowrap; }
.chip.ok { background:var(--ok-bg); color:var(--ok); }
.chip.warn { background:var(--warn-bg); color:var(--warn); }
.chip.stop { background:var(--stop-bg); color:var(--stop); }
.chip.info { background:var(--brand-bg); color:var(--brand); }

@media (max-width: 820px) {
  .app { grid-template-columns:1fr; grid-template-areas:"cabecera" "vista"; }
  .marca, nav { display:none; }
  .app.menu-abierto { grid-template-areas:"marca" "menu"; }
  .app.menu-abierto .marca, .app.menu-abierto nav { display:block; }
  .app.menu-abierto header.top, .app.menu-abierto main { display:none; }
  main { padding:16px; }
}
.menu-btn { display:none; border:1px solid var(--line); background:var(--surface); border-radius:6px;
            padding:6px 10px; cursor:pointer; }
@media (max-width: 820px) { .menu-btn { display:inline-block; } }