/* Resguardo — hoja de estilos única.
   Paleta fría y sobria para equipos de cumplimiento; la tipografía
   Atkinson Hyperlegible prioriza la legibilidad por sobre el adorno. */

:root {
  --papel: #EDF1F0;
  --superficie: #FFFFFF;
  --superficie-2: #F6F8F8;
  --tinta: #13232A;
  --tinta-2: #44565C;
  --tinta-3: #5F7075;
  --linea: #D2DBDA;
  --linea-fuerte: #AFBDBC;
  --primario: #0E5A63;
  --primario-oscuro: #093F46;
  --primario-suave: #DDECEC;
  --reserva: #5B3F73;
  --reserva-suave: #EFE8F4;
  --bien: #25603D;
  --bien-suave: #DFF0E5;
  --atencion: #7E4E00;
  --atencion-suave: #FBEBCF;
  --atencion-marca: #C98A1B;
  --mal: #A1261D;
  --mal-suave: #F8E1DE;
  --marca: var(--primario);

  --fuente: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --r-control: 6px;
  --r-panel: 10px;
  --sombra: 0 1px 0 rgba(19, 35, 42, .04), 0 1px 3px rgba(19, 35, 42, .06);
  --foco: 0 0 0 3px var(--superficie), 0 0 0 5px var(--primario);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: 'tnum' 1;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.125rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 .75em; }
a { color: var(--primario); text-underline-offset: 2px; }
a:hover { color: var(--primario-oscuro); }
code { font-family: var(--mono); font-size: .92em; }
small { font-size: .82rem; }
svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tenue { color: var(--tinta-3); }
.meta { color: var(--tinta-3); font-size: .875rem; margin: 0; }
.opcional { font-weight: 400; color: var(--tinta-3); }

.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--tinta); color: #fff; padding: 8px 12px; border-radius: var(--r-control); }
.saltar:focus { top: 8px; color: #fff; }

/* ---------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-control);
  font: inherit; font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.btn-primario { background: var(--primario); color: #fff; }
.btn-primario:hover { background: var(--primario-oscuro); color: #fff; }
.btn-secundario { background: var(--superficie); color: var(--primario); border-color: var(--primario); }
.btn-secundario:hover { background: var(--primario-suave); }
.btn-quieto { background: var(--superficie); color: var(--tinta); border-color: var(--linea-fuerte); }
.btn-quieto:hover { background: var(--superficie-2); color: var(--tinta); }
.btn-peligro { background: var(--mal); color: #fff; }
.btn-reserva { background: var(--reserva); color: #fff; }
.btn-reserva:hover { background: #47305b; }
.btn-grande { min-height: 48px; padding: 0 24px; font-size: 1rem; }
.btn-texto { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .875rem; color: var(--primario); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.btn-icono { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-control); border: 1px solid transparent; background: none; color: var(--tinta-2); cursor: pointer; position: relative; }
.btn-icono:hover { background: var(--superficie-2); border-color: var(--linea); color: var(--tinta); }
.btn-icono svg { width: 20px; height: 20px; }
.btn-archivo { position: relative; overflow: hidden; }
.btn-archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn-archivo:focus-within { box-shadow: var(--foco); }

/* ---------------------------------------------------------------- formularios */
.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; min-width: 0; border: 0; padding: 0; }
.campo > label, .campo > legend, .etiqueta, .filtro > span { font-weight: 700; font-size: .875rem; color: var(--tinta); }
fieldset.campo legend { margin-bottom: 6px; }
input, select, textarea {
  font: inherit; color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-control);
  padding: 9px 11px; min-height: 40px; width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }
select { padding-right: 32px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2344565C' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
select:disabled { opacity: 1; background-image: none; color: var(--tinta); background-color: transparent; border-color: transparent; font-weight: 700; padding-left: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-suave); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--primario); flex: none; }
input[type=color] { padding: 4px; height: 40px; }
input[type=file] { min-height: 0; }
.entrada-num { width: 90px; }
.ayuda { font-size: .82rem; color: var(--tinta-3); margin: 0; }
.error-campo { color: var(--mal); font-size: .875rem; font-weight: 700; margin: 4px 0 0; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .9rem; }
.check input { margin-top: 2px; }
.prefijo, .sufijo { display: flex; align-items: stretch; }
.prefijo span, .sufijo span { display: grid; place-items: center; padding: 0 10px; background: var(--superficie-2); border: 1px solid var(--linea-fuerte); color: var(--tinta-3); font-family: var(--mono); font-size: .85rem; white-space: nowrap; }
.prefijo span { border-right: 0; border-radius: var(--r-control) 0 0 var(--r-control); }
.prefijo input { border-radius: 0 var(--r-control) var(--r-control) 0; }
.sufijo span { border-left: 0; border-radius: 0 var(--r-control) var(--r-control) 0; font-family: var(--fuente); }
.sufijo input { border-radius: var(--r-control) 0 0 var(--r-control); }

.soltar-archivos {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--linea-fuerte); border-radius: var(--r-panel);
  padding: 18px; color: var(--primario); font-weight: 700; cursor: pointer; background: var(--superficie-2);
  position: relative;
}
.soltar-archivos:hover { border-color: var(--primario); }
.soltar-archivos:focus-within { box-shadow: var(--foco); }
.soltar-archivos input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.adjuntos-previos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.adjuntos-previos li { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--linea); border-radius: var(--r-control); background: var(--superficie); }
.adjuntos-previos img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.adj-ico { display: grid; place-items: center; width: 40px; height: 40px; background: var(--superficie-2); border-radius: 4px; color: var(--tinta-3); }
.adj-nombre { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.adj-nombre small { color: var(--tinta-3); }
.hash { font-family: var(--mono); font-size: .78rem; color: var(--tinta-3); }

/* ---------------------------------------------------------------- insignias */
.estado, .sla, .prio, .chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 5px 8px; border-radius: 999px;
}
.estado { border-radius: 4px; background: var(--superficie-2); color: var(--tinta-2); border: 1px solid var(--linea); }
.estado-nuevo { background: var(--primario); border-color: var(--primario); color: #fff; }
.estado-curso { background: var(--primario-suave); border-color: #bcd8d8; color: var(--primario-oscuro); }
.estado-final { background: transparent; color: var(--tinta-3); }
.sla::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sla-a_tiempo { background: var(--bien-suave); color: var(--bien); }
.sla-por_vencer { background: var(--atencion-suave); color: var(--atencion); }
.sla-vencido { background: var(--mal-suave); color: var(--mal); }
.sla-cerrado { background: transparent; color: var(--tinta-3); padding-left: 0; }
.sla-cerrado::before { display: none; }
.prio { padding: 0; font-weight: 700; color: var(--tinta-2); }
.prio i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid var(--tinta-3); }
.prio-critica i { background: var(--mal); border-color: var(--mal); }
.prio-alta i { background: linear-gradient(to top, var(--atencion-marca) 66%, transparent 66%); border-color: var(--atencion-marca); }
.prio-media i { background: linear-gradient(to top, var(--tinta-3) 40%, transparent 40%); }
.chip { background: var(--superficie-2); color: var(--tinta-2); border: 1px solid var(--linea); padding: 3px 7px; font-size: .72rem; }
.chip-karin { background: var(--reserva-suave); color: var(--reserva); border-color: #d9cbe5; }
.chip-medida { background: var(--primario-suave); color: var(--primario-oscuro); border-color: #bcd8d8; }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primario-suave); color: var(--primario-oscuro); font-weight: 800; font-size: .78rem; flex: none; }
.avatar.chico { width: 24px; height: 24px; font-size: .62rem; }
.persona { display: inline-flex; align-items: center; gap: 8px; }
.reservado { display: inline-flex; align-items: center; gap: 6px; color: var(--reserva); font-weight: 700; font-size: .875rem; }
.num { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.etiqueta-demo { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--atencion); background: var(--atencion-suave); border-radius: 4px; padding: 3px 8px; }

/* ---------------------------------------------------------------- público */
.publico { min-height: 100vh; display: flex; flex-direction: column; }
.pub-cab { display: flex; align-items: center; gap: 16px; padding: 14px 32px; background: var(--superficie); border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.1rem; color: var(--tinta); text-decoration: none; letter-spacing: -.01em; }
.marca svg { width: 26px; height: 26px; color: var(--primario); stroke-width: 2; }
.pub-nav { margin-left: auto; display: flex; gap: 20px; }
.pub-nav a { font-weight: 700; text-decoration: none; }
.pub-nav a:hover { text-decoration: underline; }
.publico main { flex: 1; width: 100%; }
.pub-pie { padding: 20px 32px; color: var(--tinta-3); font-size: .82rem; border-top: 1px solid var(--linea); }
.pub-pie p { margin: 0; max-width: 72ch; }
.bajada { font-size: 1.08rem; color: var(--tinta-2); max-width: 62ch; }
.angosto { max-width: 520px; margin: 48px auto; padding: 0 16px; }

.inicio { max-width: 1120px; margin: 0 auto; padding: 64px 32px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.inicio h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.025em; max-width: 14ch; margin-bottom: 20px; }
.inicio-accesos { display: grid; gap: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); }
.acceso { padding: 22px 24px; border-bottom: 1px solid var(--linea); }
.acceso:last-child { border-bottom: 0; }
.acceso h2 { margin-bottom: 4px; }
.acceso p { color: var(--tinta-2); font-size: .92rem; }
.lista-portales { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lista-portales a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--r-control); text-decoration: none; color: var(--tinta); font-weight: 700; }
.lista-portales a:hover { background: var(--superficie-2); }
.monograma { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: var(--marca); color: #fff; font-weight: 800; font-size: .8rem; flex: none; }
.monograma.grande { width: 56px; height: 56px; font-size: 1.2rem; border-radius: 10px; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.5); }

.portal-banda { background: var(--marca); color: #fff; }
.portal-banda-in { max-width: 1120px; margin: 0 auto; padding: 36px 32px 32px; display: flex; align-items: center; gap: 18px; }
.portal-banda h1 { margin: 0; font-size: 2rem; }
.portal-empresa { margin: 0 0 2px; font-weight: 700; opacity: .92; }
.portal { max-width: 1120px; margin: 0 auto; padding: 32px; display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.portal-guia { position: sticky; top: 24px; }
.portal-guia h2 { font-size: 1rem; }
.garantias { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.garantias li { padding-left: 14px; border-left: 3px solid var(--marca); color: var(--tinta-2); font-size: .92rem; }
.garantias strong { display: block; color: var(--tinta); }
.nota-legal { font-size: .85rem; color: var(--tinta-3); }
.form-denuncia { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 8px 32px 28px; box-shadow: var(--sombra); }
.paso { border: 0; border-bottom: 1px solid var(--linea); margin: 0; padding: 24px 0 12px; min-width: 0; }
.paso legend { font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; float: left; width: 100%; }
.paso legend + * { clear: both; }
.paso-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--marca); color: var(--marca); font-size: .9rem; }
.paso > .ayuda { margin: 4px 0 8px; clear: both; }
.grupo-materias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.opcion-materia { position: relative; }
.opcion-materia input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.opcion-materia span { display: block; padding: 9px 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-control); font-weight: 700; font-size: .92rem; background: var(--superficie); }
.opcion-materia input:checked + span { background: var(--marca); border-color: var(--marca); color: #fff; }
.opcion-materia input:focus-visible + span { box-shadow: var(--foco); }
.aviso-karin { background: var(--reserva-suave); color: #3f2a52; padding: 12px 14px; border-radius: var(--r-control); font-size: .9rem; }
.interruptor-identidad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.interruptor-identidad label { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-control); cursor: pointer; }
.interruptor-identidad label:has(input:checked) { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: var(--superficie-2); }
.interruptor-identidad input { margin-top: 3px; }
.interruptor-identidad small { display: block; color: var(--tinta-3); }
.enviar { padding-top: 22px; display: grid; gap: 14px; justify-items: start; }

.confirmacion { max-width: 640px; margin: 48px auto; padding: 0 16px; }
.comprobante { margin: 28px 0; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r-panel); position: relative; box-shadow: var(--sombra); }
.comprobante-cab { display: flex; justify-content: space-between; gap: 12px; padding: 12px 22px; font-size: .82rem; color: var(--tinta-3); border-bottom: 2px dashed var(--linea-fuerte); flex-wrap: wrap; }
.comprobante::before, .comprobante::after { content: ''; position: absolute; top: 34px; width: 18px; height: 18px; border-radius: 50%; background: var(--papel); border: 1px solid var(--linea-fuerte); }
.comprobante::before { left: -10px; clip-path: inset(0 0 0 50%); }
.comprobante::after { right: -10px; clip-path: inset(0 50% 0 0); }
.comprobante-datos { margin: 0; padding: 22px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.comprobante-datos dt { font-size: .85rem; font-weight: 700; color: var(--tinta-2); margin-bottom: 4px; }
.comprobante-datos dd { margin: 0; }
.codigo { font-family: var(--mono); font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 600; letter-spacing: .06em; color: var(--tinta); }
.comprobante-acciones { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 22px 22px; }
.advertencia { display: flex; gap: 10px; align-items: flex-start; background: var(--atencion-suave); color: #5c3900; padding: 14px 16px; border-radius: var(--r-control); font-size: .92rem; }
.advertencia svg { margin-top: 2px; }
.siguiente { color: var(--tinta-2); }

.acceso-seg h1 { font-size: 1.9rem; }
.form-acceso { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 24px; margin: 20px 0; }
.entrada-codigo { font-family: var(--mono); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; }
.pista-demo { font-size: .88rem; color: var(--tinta-2); border-left: 3px solid var(--atencion-marca); padding: 4px 0 4px 12px; }
.pista-demo code { background: var(--superficie); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--linea); white-space: nowrap; }

.seguimiento { max-width: 1120px; margin: 0 auto; padding: 32px; }
.seg-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.seg-cab .portal-empresa { color: var(--tinta-3); }
.seg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.seg-bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 22px; }
.seg-bloque h2 { margin-top: 22px; }
.seg-bloque h2:first-child { margin-top: 0; }
.lista-simple { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.lista-simple li { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.form-evidencia { display: grid; gap: 10px; }

/* línea de tiempo y mensajes */
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--linea); }
.linea-tiempo li { position: relative; padding: 0 0 14px 4px; }
.linea-tiempo li::before { content: ''; position: absolute; left: -25px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--linea-fuerte); }
.linea-tiempo li.pub::before, .linea-tiempo.publica li::before { border-color: var(--primario); }
.linea-tiempo li:first-child::before { background: var(--primario); border-color: var(--primario); }
.linea-tiempo time { font-size: .8rem; color: var(--tinta-3); }
.linea-tiempo p { margin: 0; }
.linea-tiempo .meta { font-size: .8rem; }
.hilo { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linea); }
.msg p { margin: 0 0 4px; }
.msg-autor { font-size: .8rem; font-weight: 700; color: var(--tinta-2); }
.msg time { font-size: .75rem; color: var(--tinta-3); }
.msg.propio { justify-self: end; background: var(--primario-suave); border-color: #c3dcdc; border-bottom-right-radius: 3px; }
.msg.equipo, .msg.externo { justify-self: start; border-bottom-left-radius: 3px; }
.msg.externo { background: var(--reserva-suave); border-color: #ddd0e8; }
.form-mensaje { display: grid; gap: 8px; justify-items: start; }
.form-mensaje label { font-weight: 700; font-size: .875rem; }

/* ingreso */
.ingreso { max-width: 960px; margin: 0 auto; padding: 48px 32px; }
.rol-grupo { display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--linea); }
.rol-info h2 { margin-bottom: 6px; }
.rol-info p { color: var(--tinta-2); font-size: .9rem; margin: 0; }
.rol-usuarios { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.usuario-demo { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; padding: 10px 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-control); cursor: pointer; color: var(--tinta); }
.usuario-demo:hover { border-color: var(--primario); }
.usuario-demo small { display: block; color: var(--tinta-3); }
.usuario-demo em { margin-left: auto; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--primario); }
.usuario-demo.actual { border-color: var(--primario); box-shadow: inset 3px 0 0 var(--primario); }

/* ingreso con correo y contraseña */
.ingreso-real { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; align-items: start; }
.ingreso-form .form-acceso { margin: 20px 0 12px; display: grid; gap: 4px; }
.ingreso-form .form-acceso .btn { justify-self: stretch; margin-top: 6px; }
.cuentas-demo { background: var(--superficie); border: 1px solid var(--linea); border-top: 3px solid var(--atencion-marca); border-radius: var(--r-panel); padding: 20px 22px; }
.cuentas-demo h2 { font-size: 1.05rem; margin-bottom: 6px; }
.cuentas-demo > p { color: var(--tinta-2); font-size: .9rem; margin: 0 0 14px; }
.clave-demo { font-family: var(--mono); font-weight: 600; background: var(--atencion-suave); color: var(--atencion); padding: 2px 8px; border-radius: 4px; font-size: .95rem; }
.demo-roles, .demo-roles ul { list-style: none; margin: 0; padding: 0; }
.demo-roles { display: grid; gap: 14px; }
.demo-rol-nombre { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 6px; }
.demo-rol ul { display: grid; gap: 6px; }
.demo-cuenta { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; padding: 8px 12px; background: var(--papel); border: 1px solid transparent; border-radius: var(--r-control); cursor: pointer; color: var(--tinta); }
.demo-cuenta:hover { border-color: var(--primario); background: var(--superficie); }
.demo-cuenta:focus-visible { outline: none; box-shadow: var(--foco); }
.demo-cuenta strong { display: block; font-size: .92rem; }
.demo-cuenta code { font-family: var(--mono); font-size: .8rem; color: var(--tinta-2); word-break: break-all; }
.error-campo.bloqueado { color: var(--mal); font-weight: 700; }
.recibidos { list-style: none; padding: 0; margin: 12px 0 0; font-size: .85rem; color: var(--tinta-2); display: grid; gap: 4px; }
.recibidos code { font-family: var(--mono); font-size: .78rem; }

/* ---------------------------------------------------------------- panel interno */
.interno { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.lateral { background: var(--superficie); border-right: 1px solid var(--linea); display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; }
.lateral .marca { padding: 4px 8px 20px; }
.nav { display: grid; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-control); color: var(--tinta-2); font-weight: 700; text-decoration: none; }
.nav-item:hover { background: var(--superficie-2); color: var(--tinta); }
.nav-item[aria-current="page"] { background: var(--primario-suave); color: var(--primario-oscuro); box-shadow: inset 3px 0 0 var(--primario); }
.nav-item svg { width: 20px; height: 20px; }
.lateral-pie { margin-top: auto; display: grid; gap: 8px; justify-items: start; padding: 0 8px; }
.lateral-pie .btn-texto { font-size: .8rem; text-align: left; }
.columna { min-width: 0; display: flex; flex-direction: column; }
.barra { display: flex; align-items: center; gap: 12px; padding: 10px 28px; background: var(--superficie); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 20; }
.selector-empresa select { min-width: 250px; font-weight: 700; }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.quien { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); padding: 4px 8px; border-radius: var(--r-control); }
.quien:hover { background: var(--superficie-2); color: var(--tinta); }
.quien-txt { display: grid; line-height: 1.2; }
.quien-txt strong { font-size: .88rem; }
.quien-txt small { color: var(--tinta-3); font-size: .76rem; }
.campana-wrap { position: relative; }
.contador { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mal); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--superficie); }
.panel-notif { position: absolute; right: 0; top: 46px; width: 380px; max-height: 70vh; overflow: auto; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r-panel); box-shadow: 0 12px 32px rgba(19,35,42,.16); z-index: 30; }
.panel-notif-cab { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--superficie); }
.panel-notif-cab h2 { margin: 0; font-size: 1rem; }
.panel-notif ul { list-style: none; margin: 0; padding: 0; }
.panel-notif li a { display: grid; gap: 2px; padding: 10px 16px 10px 20px; text-decoration: none; color: var(--tinta); border-bottom: 1px solid var(--linea); position: relative; }
.panel-notif li a:hover { background: var(--superficie-2); }
.panel-notif li.no-leida a::before { content: ''; position: absolute; left: 7px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--primario); }
.panel-notif li.no-leida .notif-texto { font-weight: 700; }
.notif-tipo { font-size: .74rem; font-weight: 700; color: var(--tinta-3); }
.notif-vencido .notif-tipo { color: var(--mal); }
.notif-por_vencer .notif-tipo { color: var(--atencion); }
.notif-mensaje .notif-tipo, .notif-nueva_denuncia .notif-tipo { color: var(--reserva); }
.panel-notif time { font-size: .75rem; color: var(--tinta-3); }
.panel-notif .vacio { padding: 20px 16px; color: var(--tinta-3); }
.solo-movil { display: none; }

.contenido { padding: 28px; max-width: 1400px; width: 100%; }
.cabecera-seccion { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cabecera-seccion h1 { margin-bottom: 2px; }
.acciones-cab { display: flex; gap: 10px; flex-wrap: wrap; }
.miga { margin: 0 0 6px; font-size: .88rem; color: var(--tinta-3); }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 20px; overflow-x: auto; }
.pestanas a, .pestanas button { padding: 10px 14px; font: inherit; font-weight: 700; color: var(--tinta-2); text-decoration: none; border: 0; background: none; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.pestanas a:hover, .pestanas button:hover { color: var(--tinta); }
.pestanas [aria-current="page"], .pestanas [aria-selected="true"] { color: var(--primario-oscuro); border-bottom-color: var(--primario); }
.pestanas a span { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 9px; background: var(--superficie-2); border: 1px solid var(--linea); font-size: .75rem; }
.nota-reserva { display: flex; gap: 10px; align-items: flex-start; background: var(--reserva-suave); color: #3f2a52; padding: 12px 14px; border-radius: var(--r-control); font-size: .9rem; max-width: 90ch; }
.nota-reserva svg { margin-top: 2px; }

.contadores { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.contador-caja { width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 14px 16px; display: grid; gap: 2px; color: var(--tinta); }
.contador-caja:hover { border-color: var(--linea-fuerte); }
.contador-caja strong { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.contador-caja span { font-size: .85rem; color: var(--tinta-2); font-weight: 700; }
.contador-caja.por_vencer { border-left: 4px solid var(--atencion-marca); }
.contador-caja.vencido { border-left: 4px solid var(--mal); }
.contador-caja.vencido strong { color: var(--mal); }

.filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px 12px; align-items: end; margin-bottom: 14px; padding: 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); }
.filtros-extra { display: contents; }
.filtro { display: grid; gap: 4px; min-width: 0; }
.filtro > span { font-size: .78rem; color: var(--tinta-2); }
.filtro select, .filtro input { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: .9rem; min-width: 0; }
.filtro select { text-overflow: ellipsis; }
.filtro-busqueda { grid-column: span 2; }
.res-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.res-cab .filtro { grid-template-columns: auto auto; align-items: center; gap: 8px; }
.res-cab .conteo { margin: 0; }
.conteo { font-size: .85rem; color: var(--tinta-3); margin: 0 0 8px; }
.empresa-unica { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

table { border-collapse: collapse; width: 100%; }
.tabla-casos, .tabla-bitacora, .tabla-config { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.tabla-casos th, .tabla-bitacora th, .tabla-config th { text-align: left; font-size: .78rem; font-weight: 700; color: var(--tinta-2); padding: 10px 12px; background: var(--superficie-2); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla-casos td, .tabla-bitacora td, .tabla-config td { padding: 11px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; font-size: .9rem; }
.tabla-casos tbody tr:last-child td, .tabla-bitacora tbody tr:last-child td, .tabla-config tbody tr:last-child td { border-bottom: 0; }
.tabla-casos tbody tr { cursor: pointer; }
.tabla-casos tbody tr:hover td { background: var(--superficie-2); }
.tabla-casos tr.fila-vencido td:first-child { box-shadow: inset 3px 0 0 var(--mal); }
.tabla-casos tr.fila-por_vencer td:first-child { box-shadow: inset 3px 0 0 var(--atencion-marca); }
.celda-asunto { max-width: 380px; font-weight: 700; }
.tabla-casos td small { display: block; margin-top: 3px; }

.vacio-bloque { text-align: center; padding: 48px 16px; background: var(--superficie); border: 1px dashed var(--linea-fuerte); border-radius: var(--r-panel); color: var(--tinta-2); }

/* ---------------------------------------------------------------- caso */
.caso-cab { margin-bottom: 22px; }
.caso-cab h1 { font-size: 1.6rem; max-width: 50ch; }
.caso-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 16px; }
.caso-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.caso-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.caso-principal { display: grid; gap: 16px; min-width: 0; }
.caso-ficha { display: grid; gap: 16px; position: sticky; top: 76px; }
.bloque, .ficha-bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 20px 22px; min-width: 0; }
.ficha-bloque { padding: 18px; }
.ficha-bloque h2 { font-size: 1rem; }
.ficha-bloque h3 { font-size: .92rem; margin-top: 16px; }
.ficha-bloque .campo { margin-bottom: 12px; }
.ficha-bloque .campo p { margin: 0; }
.bloque-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.bloque-cab h2 { margin: 0; }
.relato { white-space: pre-line; font-size: 1rem; max-width: 75ch; }
.hechos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linea); }
.hechos dt { font-size: .8rem; font-weight: 700; color: var(--tinta-3); }
.hechos dd { margin: 0; }
.bloque-reservado { background: var(--reserva-suave); border-color: #ddd0e8; color: #3f2a52; }
.bloque-reservado h2 { display: flex; gap: 8px; align-items: center; }
.bloque-resolucion { border-left: 4px solid var(--primario); }
.bloque-notas { background: #FBFAF4; border-color: #E6E1CC; }
.notas { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.notas li { border-left: 3px solid #D8CFA8; padding-left: 12px; }
.notas p { margin: 0; }

.evidencias { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.evidencia { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--linea); border-radius: var(--r-control); }
.ev-vista img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid var(--linea); }
.ev-ico { display: grid; place-items: center; width: 64px; height: 64px; background: var(--superficie-2); border-radius: 4px; color: var(--tinta-3); }
.ev-nombre { font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.ev-hash { margin: 6px 0 0; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.ev-hash span { font-size: .72rem; font-weight: 700; color: var(--tinta-3); flex: none; }
.ev-hash code { font-size: .76rem; color: var(--tinta-2); overflow-wrap: anywhere; word-break: break-all; }
.custodia { margin-top: 6px; font-size: .85rem; }
.custodia summary { cursor: pointer; color: var(--primario); font-weight: 700; }
.custodia ol { margin: 6px 0 0; padding-left: 18px; }

.identidad-cerrada, .identidad-abierta { border-color: #d9cbe5; }
.identidad-cerrada p:first-of-type, .identidad-anonima { display: flex; gap: 8px; align-items: center; color: var(--reserva); font-weight: 700; }
.identidad-cerrada .ayuda { margin-top: 8px; }
.identidad-abierta { background: var(--reserva-suave); }
.ficha-dl { margin: 0 0 10px; display: grid; gap: 8px; }
.ficha-dl dt { font-size: .76rem; font-weight: 700; color: var(--tinta-3); }
.ficha-dl dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.nota-auditoria { font-size: .82rem; color: var(--reserva); font-weight: 700; }
.karin { border-top: 4px solid var(--reserva); }
.alerta-dt { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--atencion); background: var(--atencion-suave); padding: 8px 10px; border-radius: var(--r-control); margin: 8px 0 0; }
.alerta-dt svg { margin-top: 2px; }
.medidas { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.medidas li { padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r-control); font-size: .9rem; }
.medidas li p { margin: 0 0 4px; }
.medidas li.finalizada { opacity: .75; }
.auditoria-caso { margin-top: 14px; }
.auditoria-caso summary { cursor: pointer; font-weight: 700; color: var(--primario); }
.tabla-mini { font-size: .82rem; margin-top: 10px; }
.tabla-mini th, .tabla-mini td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }

/* regla de plazo: cada celda es un día hábil */
.regla { margin: 0; }
.regla figcaption { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.regla-titulo { font-weight: 700; font-size: .92rem; }
.regla-fechas { font-size: .8rem; color: var(--tinta-3); }
.regla-celdas { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 26px; }
.regla-celdas li { border-radius: 2px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); }
.regla-celdas li.usado { background: var(--primario); box-shadow: none; }
.regla-por_vencer .regla-celdas li.usado { background: var(--atencion-marca); }
.regla-vencido .regla-celdas li.usado { background: var(--tinta-3); }
.regla-celdas li.hoy { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--tinta); }
.regla-celdas li.atraso { background: var(--mal); box-shadow: none; }
.regla-cerrada .regla-celdas li.usado { background: var(--linea-fuerte); }
.regla-resumen { margin: 8px 0 0; font-weight: 700; font-size: .9rem; }
.regla-vencido .regla-resumen { color: var(--mal); }
.regla-por_vencer .regla-resumen { color: var(--atencion); }
.regla-nota { margin: 4px 0 0; font-size: .76rem; color: var(--tinta-3); }

/* ---------------------------------------------------------------- diálogo y avisos */
.dialogo { border: 0; padding: 0; border-radius: var(--r-panel); width: min(560px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(19,35,42,.3); color: var(--tinta); }
.dialogo::backdrop { background: rgba(19,35,42,.45); }
.dialogo-cab { padding: 20px 22px 0; }
.dialogo-cab h2 { font-size: 1.2rem; }
.dialogo-cuerpo { padding: 8px 22px; }
.dialogo-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; border-top: 1px solid var(--linea); }
.avisos { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 1000; width: min(460px, calc(100vw - 32px)); pointer-events: none; }
.aviso { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: var(--r-control); background: var(--tinta); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: 0 8px 24px rgba(19,35,42,.25); animation: entrar .18s ease-out; transition: opacity .4s; overflow-wrap: anywhere; }
.aviso svg { color: #9fd3c7; }
.aviso-error { background: var(--mal); }
.aviso-error svg { color: #fff; }
.aviso.saliendo { opacity: 0; }
@keyframes entrar { from { transform: translateY(8px); opacity: 0; } }

/* ---------------------------------------------------------------- bitácora */
.cadena-explicacion { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 16px 20px; margin-bottom: 14px; }
.cadena-explicacion p { margin: 0; color: var(--tinta-2); font-size: .9rem; max-width: 70ch; }
.cadena { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.cadena li { display: grid; gap: 1px; padding: 8px 12px; border: 1.5px solid var(--primario); border-radius: 6px; background: var(--primario-suave); position: relative; }
.cadena li + li { margin-left: 22px; }
.cadena li + li::before { content: ''; position: absolute; left: -23px; top: 50%; width: 22px; border-top: 2px solid var(--primario); }
.cadena code { font-weight: 600; color: var(--primario-oscuro); }
.cadena small, .eslabon-n { font-size: .7rem; color: var(--tinta-3); }
.verificacion { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r-panel); margin-bottom: 14px; overflow-wrap: anywhere; }
.verificacion svg { width: 24px; height: 24px; margin-top: 1px; }
.verificacion.ok { background: var(--bien-suave); color: #173f28; border: 1px solid #b7dbc4; }
.verificacion.mal { background: var(--mal-suave); color: #6d1812; border: 1px solid #ecb8b2; }
.tabla-bitacora td { font-size: .84rem; }
.tabla-bitacora code { font-size: .74rem; color: var(--tinta-3); white-space: nowrap; }
.celda-detalle { max-width: 420px; overflow-wrap: anywhere; }
.accion { font-weight: 700; }
.fila-identidad td { background: var(--reserva-suave); }
.fila-identidad .accion { color: var(--reserva); }

/* ---------------------------------------------------------------- reportes */
.kpis { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 14px 16px; display: grid; gap: 2px; }
.kpi strong { font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.kpi span { font-size: .84rem; color: var(--tinta-2); }
.kpi-alerta strong { color: var(--mal); }
.graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grafico { margin: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 16px 18px; min-width: 0; }
.grafico-ancho { grid-column: 1 / -1; }
.grafico figcaption { font-weight: 700; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.grafico figcaption small { font-weight: 400; color: var(--tinta-3); }
.grafico svg { width: 100%; height: auto; display: block; stroke: none; }

.grafico .eje { font-size: 12px; fill: var(--tinta-2); font-family: var(--fuente); }
.grafico .valor { font-size: 12px; fill: var(--tinta); font-weight: 700; font-family: var(--fuente); }
.grafico .valor.chico { font-size: 11px; }
.grafico .marca { fill: var(--primario); }
.grafico .marca-alerta { fill: var(--mal); }
.grafico .serie-a { fill: var(--primario); }
.grafico .serie-b { fill: #8C6BA8; }
.grafico .base { stroke: var(--linea-fuerte); stroke-width: 1; }
.grafico .grilla { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 2 3; }
.grafico .barra-g:hover .marca { opacity: .8; }
.leyenda { display: inline-flex; gap: 14px; font-weight: 400; font-size: .84rem; color: var(--tinta-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-a { background: var(--primario); }
.sw-b { background: #8C6BA8; }
.tabla-datos { margin-top: 16px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 12px 16px; }
.tabla-datos summary { cursor: pointer; font-weight: 700; color: var(--primario); }

/* ---------------------------------------------------------------- configuración */
.config { display: grid; gap: 16px; }
.form-panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 22px; max-width: 820px; }
.config .form-panel, .bloque .form-panel { border: 0; padding: 0; background: none; }
.form-linea { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-top: 16px; }
.form-linea .campo { margin: 0; }
.form-linea .check { margin-bottom: 10px; }
.tabla-config td { font-size: .9rem; }
.tabla-config select { min-width: 200px; }
.muestra-color { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; }
.checks-empresas { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.checks-empresas .check { font-size: .84rem; }
.matriz-scroll { overflow-x: auto; }
.matriz { font-size: .86rem; border: 1px solid var(--linea); }
.matriz th, .matriz td { padding: 8px 10px; border: 1px solid var(--linea); text-align: center; }
.matriz thead th { background: var(--superficie-2); font-size: .78rem; }
.matriz tbody th { text-align: left; background: var(--superficie-2); white-space: nowrap; }
.matriz .diag { color: var(--linea-fuerte); background: var(--superficie-2); }
.matriz-permisos td { font-size: .82rem; }
.lista-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lista-chips li { padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; font-size: .88rem; background: var(--superficie-2); }
.sla-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.sla-grid .btn { grid-column: 1 / -1; justify-self: start; }
.lista-plazos { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; max-width: 480px; }
.lista-plazos li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--linea); padding: 6px 0; }
.segmentado { display: flex; flex-wrap: wrap; gap: 8px; }
.segmentado label { position: relative; }
.segmentado input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.segmentado span { display: block; padding: 8px 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-control); font-weight: 700; font-size: .9rem; }
.segmentado small { display: block; font-weight: 400; color: var(--tinta-3); font-size: .76rem; }
.segmentado input:checked + span { background: var(--primario-suave); border-color: var(--primario); box-shadow: inset 0 0 0 1px var(--primario); }
.segmentado input:focus-visible + span { box-shadow: var(--foco); }
.acciones-form { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------------------------------------------------------------- informe */
.informe { background: var(--papel); min-height: 100vh; padding: 24px 16px 48px; }
.informe-barra { max-width: 820px; margin: 0 auto 16px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.informe-hoja { max-width: 820px; margin: 0 auto; background: #fff; padding: 48px 56px; border: 1px solid var(--linea); box-shadow: var(--sombra); font-size: 14px; }
.informe-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--tinta); padding-bottom: 14px; margin-bottom: 18px; }
.informe-cab h1 { font-size: 1.5rem; margin: 0; }
.informe-marca { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tinta-2); margin-bottom: 6px; }
.informe-conf { font-weight: 800; color: var(--reserva); border: 1.5px solid var(--reserva); padding: 3px 10px; border-radius: 4px; margin: 0; }
.informe-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 0 0 18px; }
.informe-datos dt { font-size: .76rem; font-weight: 700; color: var(--tinta-3); }
.informe-datos dd { margin: 0; }
.informe-hoja h2 { font-size: 1.05rem; margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--linea); }
.informe-hoja table { font-size: .82rem; }
.informe-hoja th, .informe-hoja td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.informe-hoja td code { font-size: .7rem; word-break: break-all; }
.informe-pie { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--linea); font-size: .78rem; color: var(--tinta-3); }

.error-fatal { padding: 32px; color: var(--mal); }

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caso-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 980px) {
  .interno { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50; transform: translateX(-100%); transition: transform .2s; box-shadow: none; }
  .lateral.abierto { transform: none; box-shadow: 0 0 0 100vmax rgba(19,35,42,.4); }
  .solo-movil { display: inline-grid; }
  .caso-grid { grid-template-columns: 1fr; }
  .caso-ficha { position: static; grid-row: 1; }
  .portal { grid-template-columns: 1fr; gap: 24px; }
  .portal-guia { position: static; }
  .inicio { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; }
  .seg-grid { grid-template-columns: 1fr; }
  .graficos { grid-template-columns: 1fr; }
  .rol-grupo { grid-template-columns: 1fr; gap: 12px; }
  .ingreso-real { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  h1 { font-size: 1.45rem; }
  .pub-cab { padding: 12px 16px; gap: 8px 12px; }
  .pub-nav { gap: 14px; margin-left: 0; width: 100%; }
  .pub-cab .etiqueta-demo { margin-left: auto; }
  .pub-pie { padding: 16px; }
  .inicio { padding: 28px 16px; }
  .portal-banda-in { padding: 24px 16px; }
  .portal-banda h1 { font-size: 1.6rem; }
  .portal { padding: 20px 16px; }
  .form-denuncia { padding: 4px 16px 20px; }
  .fila-2, .interruptor-identidad { grid-template-columns: 1fr; }
  .comprobante-datos { grid-template-columns: 1fr; }
  .seguimiento { padding: 20px 16px; }
  .seg-bloque { padding: 16px; }
  .ingreso { padding: 28px 16px; }
  .barra { padding: 8px 12px; gap: 6px; }
  .selector-empresa { flex: 1; min-width: 0; }
  .selector-empresa select { min-width: 0; width: 100%; font-size: .85rem; }
  .quien-txt { display: none; }
  .quien { padding: 2px; }
  .panel-notif { position: fixed; left: 8px; right: 8px; top: 58px; width: auto; }
  .contenido { padding: 18px 16px; }
  .contadores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .contador-caja { padding: 10px 12px; }
  .contador-caja strong { font-size: 1.4rem; }
  .filtros { padding: 10px; gap: 8px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .grafico { overflow-x: auto; }
  .grafico svg { min-width: 480px; }
  .grafico-ancho svg { min-width: 640px; }
  .filtros:not(.abiertos) .filtros-extra { display: none; }
  .filtro-busqueda { grid-column: 1; }
  .boton-filtros { min-height: 36px; }
  .filtros:has(.boton-filtros) .filtro-busqueda { grid-column: 1; }
  .filtros:not(:has(.boton-filtros)) .filtro-busqueda { grid-column: 1 / -1; }
  /* tablas como tarjetas */
  .tabla-casos, .tabla-bitacora, .tabla-config { border: 0; background: none; overflow: visible; }
  .tabla-casos thead, .tabla-bitacora thead, .tabla-config thead { display: none; }
  .tabla-casos, .tabla-casos tbody, .tabla-casos tr, .tabla-casos td,
  .tabla-bitacora, .tabla-bitacora tbody, .tabla-bitacora tr, .tabla-bitacora td,
  .tabla-config, .tabla-config tbody, .tabla-config tr, .tabla-config td { display: block; width: 100%; }
  .tabla-casos tr, .tabla-bitacora tr, .tabla-config tr { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); margin-bottom: 10px; padding: 10px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .tabla-casos td, .tabla-bitacora td, .tabla-config td { border: 0; padding: 3px 0; font-size: .86rem; }
  .tabla-casos td::before, .tabla-bitacora td::before, .tabla-config td::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 700; color: var(--tinta-3); }
  .tabla-casos td[data-label="Número"], .tabla-casos td[data-label="Asunto"],
  .tabla-bitacora td[data-label="Detalle"], .tabla-config td[data-label="Persona"], .tabla-config td[data-label="Empresas"], .tabla-config td[data-label="Empresa"] { grid-column: 1 / -1; }
  .tabla-casos td[data-label="Número"]::before, .tabla-casos td[data-label="Asunto"]::before { display: none; }
  .tabla-casos td[data-label="Asunto"] { font-size: .95rem; }
  .tabla-casos tr.fila-vencido { box-shadow: inset 4px 0 0 var(--mal); }
  .tabla-casos tr.fila-por_vencer { box-shadow: inset 4px 0 0 var(--atencion-marca); }
  .tabla-casos tr.fila-vencido td:first-child, .tabla-casos tr.fila-por_vencer td:first-child { box-shadow: none; }
  .tabla-casos tbody tr:hover td { background: none; }
  .celda-asunto { max-width: none; }
  .tabla-config select { min-width: 0; }
  .caso-cab h1 { font-size: 1.3rem; }
  .caso-acciones .btn { flex: 1 1 auto; }
  .bloque, .ficha-bloque { padding: 16px; }
  .hechos { grid-template-columns: 1fr; }
  .evidencia { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; }
  .ev-vista img, .ev-ico { width: 48px; height: 48px; }
  .cadena-explicacion { grid-template-columns: 1fr; }
  .cadena li { padding: 6px 8px; }
  .cadena li + li { margin-left: 14px; }
  .cadena li + li::before { left: -15px; width: 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi strong { font-size: 1.4rem; }
  .sla-grid { grid-template-columns: 1fr 1fr; }
  .informe { padding: 12px 0 32px; }
  .informe-barra { padding: 0 16px; }
  .informe-hoja { padding: 24px 18px; }
  .informe-datos { grid-template-columns: 1fr; }
  .msg { max-width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- impresión */
@media print {
  @page { margin: 16mm; }
  body { background: #fff; font-size: 11pt; }
  .no-imprimir, .avisos, .saltar, .pub-cab, .pub-nav, .pub-pie, .comprobante-acciones, .lateral, .barra { display: none !important; }
  .informe { padding: 0; background: #fff; }
  .informe-hoja { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .informe-hoja h2 { break-after: avoid; }
  .informe-hoja tr { break-inside: avoid; }
  .confirmacion { margin: 0; }
  .comprobante { box-shadow: none; }
  a { color: inherit; text-decoration: none; }
}
.recibidos svg { width: 14px; height: 14px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; }