/* Radar SECOP · Mesa de decisiones: precisa, serena, trazable. Reglas en docs/DISENO.md. */

@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap;
  src: url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap;
  src: url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap;
  src: url(fonts/source-sans-3-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap;
  src: url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --fondo: oklch(0.975 0.008 85);
  --superficie: oklch(0.995 0.003 85);
  --texto: oklch(0.25 0.020 240);
  --secundario: oklch(0.43 0.020 240);
  --separador: oklch(0.86 0.012 85);
  --borde-control: oklch(0.55 0.020 240);
  --acento: oklch(0.40 0.065 205);
  --critico: oklch(0.43 0.145 28);
  --advertencia: oklch(0.43 0.085 75);
  --confirmacion: oklch(0.39 0.075 155);
  --sobre-acento: oklch(0.995 0.003 85);
  --lamina-filtro: none;

  --e4: 0.25rem; --e8: 0.5rem; --e12: 0.75rem; --e16: 1rem;
  --e24: 1.5rem; --e32: 2rem; --e48: 3rem;
  --t-meta: 0.875rem; --t-cuerpo: 1rem; --t-fila: 1.125rem;
  --t-grupo: 1.3125rem; --t-pagina: 2rem;
  --interfaz: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --titulos: "Source Serif 4", Georgia, serif;
  --control: 2.75rem;
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: oklch(0.19 0.012 240);
  --superficie: oklch(0.24 0.014 240);
  --texto: oklch(0.94 0.008 85);
  --secundario: oklch(0.77 0.015 240);
  --separador: oklch(0.36 0.018 240);
  --borde-control: oklch(0.63 0.020 240);
  --acento: oklch(0.80 0.075 205);
  --critico: oklch(0.79 0.105 28);
  --advertencia: oklch(0.85 0.105 85);
  --confirmacion: oklch(0.80 0.085 155);
  --sobre-acento: oklch(0.19 0.012 240);
  --lamina-filtro: brightness(0.72) contrast(0.92);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: oklch(0.19 0.012 240);
    --superficie: oklch(0.24 0.014 240);
    --texto: oklch(0.94 0.008 85);
    --secundario: oklch(0.77 0.015 240);
    --separador: oklch(0.36 0.018 240);
    --borde-control: oklch(0.63 0.020 240);
    --acento: oklch(0.80 0.075 205);
    --critico: oklch(0.79 0.105 28);
    --advertencia: oklch(0.85 0.105 85);
    --confirmacion: oklch(0.80 0.085 155);
    --sobre-acento: oklch(0.19 0.012 240);
    --lamina-filtro: brightness(0.72) contrast(0.92);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 var(--t-cuerpo)/1.5 var(--interfaz);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
h1, h2 { font-family: var(--titulos); font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-pagina); }
h2 { font-size: var(--t-grupo); }
h3 { font-size: var(--t-fila); font-weight: 600; line-height: 1.3; margin: 0; }
p, ul, ol, dl, pre { margin: 0; }
small { display: block; font-size: var(--t-meta); color: var(--secundario); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--acento); text-underline-offset: 0.15em; transition: color 150ms var(--curva); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 2px; }
summary { cursor: pointer; }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.saltar { position: absolute; left: var(--e16); top: -4rem; padding: var(--e8) var(--e16); background: var(--superficie); }
.saltar:focus { top: var(--e8); }
.tenue { color: var(--secundario); }
.cifra { font-variant-numeric: tabular-nums; }
.simbolo { width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: -0.125em; }

/* Marco de página */
.pagina, .cabecera, .procedencia { max-width: 90rem; margin-inline: auto; padding-inline: var(--e16); }
main.pagina { padding-block: var(--e32) var(--e48); }
.cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e8) var(--e24); padding-block: var(--e12); }
.marca {
  display: inline-flex; align-items: center; gap: var(--e8); min-height: var(--control);
  color: var(--texto); font: 600 var(--t-fila)/1.2 var(--titulos); text-decoration: none;
}
.isotipo { width: 1.5rem; height: 1.5rem; color: var(--acento); }
.menu { display: flex; flex-wrap: wrap; gap: 0 var(--e16); flex: 1 1 auto; }
.menu a {
  display: inline-flex; align-items: center; min-height: var(--control);
  color: var(--secundario); font-weight: 600; text-decoration: none;
}
.menu a[aria-current="page"] { color: var(--texto); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.utilidades { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e16); }
.quien { font-size: var(--t-meta); color: var(--secundario); }
.quien strong { color: var(--texto); font-weight: 600; }
.salir, .tema { display: inline-flex; align-items: center; margin: 0; }
.tema .boton-texto { font-size: var(--t-meta); font-weight: 400; color: var(--secundario); padding-inline: var(--e8); }
.tema .boton-texto[aria-current="true"] { color: var(--texto); font-weight: 600; }

.procedencia {
  display: flex; flex-wrap: wrap; gap: var(--e4) var(--e24); padding-block: var(--e8);
  font-size: var(--t-meta); color: var(--secundario);
  border-block: 1px solid var(--separador);
}
.procedencia div { display: flex; gap: var(--e4); }
.procedencia dt::after { content: ":"; }
.procedencia dd { margin: 0; color: var(--texto); }
.incompleta { margin-top: var(--e16); }
.incompleta strong { display: block; }

.pie { padding-block: var(--e24) var(--e32); border-top: 1px solid var(--separador); font-size: var(--t-meta); color: var(--secundario); }
.pie p + p { margin-top: var(--e4); }

/* Bloques comunes */
.encabezado { margin-bottom: var(--e24); }
.bajada { margin-top: var(--e8); max-width: 42rem; color: var(--secundario); }
.conteos { color: var(--texto); }
.bloque { margin-top: var(--e32); }
.bloque > h2, .lateral h2 { margin-bottom: var(--e12); }
.dos-columnas { display: grid; gap: var(--e32); grid-template-columns: minmax(0, 1fr); }
.principal > .bloque:first-child { margin-top: 0; }
.lateral .bloque:first-child { margin-top: 0; }
.lista-simple { padding-left: var(--e16); }
.lista-simple li + li { margin-top: var(--e4); }
.texto-largo { max-width: 42rem; white-space: pre-line; }
.texto-perfil { max-width: 42rem; white-space: pre-wrap; padding: var(--e16); background: var(--superficie); border: 1px solid var(--separador); }
.vacio { padding-block: var(--e32); color: var(--secundario); }
.migas { margin-bottom: var(--e16); font-size: var(--t-meta); }
.nota { margin-top: var(--e8); font-size: var(--t-meta); color: var(--secundario); max-width: 42rem; }
.pestanas { display: flex; flex-wrap: wrap; gap: 0 var(--e24); margin-bottom: var(--e24); border-bottom: 1px solid var(--separador); }
.pestanas a { display: inline-flex; align-items: center; min-height: var(--control); color: var(--secundario); font-weight: 600; text-decoration: none; }
.pestanas a[aria-current="page"] { color: var(--texto); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }

/* Formularios y botones */
.formulario { display: grid; gap: var(--e16); max-width: 42rem; }
.campo { display: grid; gap: var(--e4); align-content: start; min-width: 0; }
label { font-weight: 600; }
input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea {
  width: 100%; min-height: var(--control); padding: var(--e8) var(--e12);
  color: var(--texto); background: var(--superficie); font: inherit;
  border: 1px solid var(--borde-control); border-radius: 4px;
}
textarea { resize: vertical; min-height: 8rem; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--acento); }
.ayuda { font-size: var(--t-meta); color: var(--secundario); }
.error-campo { font-size: var(--t-meta); color: var(--critico); font-weight: 600; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e12); }
.boton, .boton-secundario, .boton-peligro, .boton-texto {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control);
  padding: var(--e8) var(--e16); font: 600 var(--t-cuerpo)/1.2 var(--interfaz);
  text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 4px;
  transition: transform 150ms var(--curva), background-color 150ms var(--curva), color 150ms var(--curva);
}
.boton { color: var(--sobre-acento); background: var(--acento); }
.boton-secundario { color: var(--acento); background: transparent; border-color: var(--borde-control); }
.boton-peligro { color: var(--sobre-acento); background: var(--critico); }
.boton-texto { color: var(--acento); background: transparent; padding-inline: var(--e4); }
.boton:active, .boton-secundario:active, .boton-peligro:active, .boton-texto:active { transform: scale(0.97); }

/* Tablas */
.tabla-marco { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: var(--t-meta); font-weight: 600; color: var(--secundario); }
.tabla th, .tabla td { padding: var(--e8) var(--e16) var(--e8) 0; border-bottom: 1px solid var(--separador); vertical-align: top; }
.tabla .num { text-align: right; padding-right: 0; }
.tabla .titulo { display: block; font-weight: 600; }
.tabla .entidad { display: block; font-size: var(--t-meta); color: var(--secundario); }
.tabla .fila-extra td { padding-top: 0; }
.ref { font-size: var(--t-meta); }

/* Estado, avisos y datos */
.estado { font-size: var(--t-meta); font-weight: 600; }
.estado-bien { color: var(--confirmacion); }
.estado-alerta { color: var(--advertencia); }
.estado-falla { color: var(--critico); }
.estado-neutro { color: var(--secundario); }
.aviso {
  max-width: 48rem; padding: var(--e12) var(--e16); margin-block: var(--e12);
  background: var(--superficie); border: 1px solid var(--advertencia); border-radius: 4px;
}
.aviso-falla { border-color: var(--critico); }
.aviso-exito { border-color: var(--confirmacion); }
.credencial {
  display: block; padding: var(--e16); font: 600 var(--t-grupo)/1.3 ui-monospace, Menlo, monospace;
  background: var(--superficie); border: 1px solid var(--borde-control); border-radius: 4px; user-select: all;
}
.meta { display: grid; gap: var(--e8) var(--e24); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.meta dt { font-size: var(--t-meta); color: var(--secundario); }
.meta dd { margin: 0; }
.datos { display: grid; gap: var(--e8); }
.datos dt { font-size: var(--t-meta); color: var(--secundario); }
.datos dd { margin: 0; }
.lista-datos { padding-left: var(--e16); }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e12); margin-top: var(--e8); font-size: var(--t-meta); color: var(--secundario); }
.diferencia { padding: var(--e12); font: 400 var(--t-meta)/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; background: var(--superficie); border: 1px solid var(--separador); }
.diferencia span { display: block; }
.linea-anadida { color: var(--confirmacion); }
.linea-eliminada { color: var(--critico); }
.linea-igual { color: var(--secundario); }
.pasos { display: flex; flex-wrap: wrap; gap: var(--e8) var(--e24); padding: 0; list-style: none; counter-reset: paso; }
.paso { counter-increment: paso; color: var(--secundario); }
.paso::before { content: counter(paso) ". "; }
.paso-hecho { color: var(--confirmacion); }
.paso-hecho::before { content: "\2713\00a0"; }
.paso-actual { color: var(--texto); font-weight: 600; }
.mas-datos, .seccion-ficha { margin-top: var(--e12); }
.seccion-ficha + .seccion-ficha { border-top: 1px solid var(--separador); padding-top: var(--e12); }
.seccion-ficha summary, .mas-datos summary { min-height: var(--control); display: flex; align-items: center; font-weight: 600; }
.historia { display: grid; gap: var(--e12); padding: 0; margin-top: var(--e16); list-style: none; }
.historia strong, .historia span { display: block; }

/* Portada */
.busqueda { display: grid; gap: var(--e12); margin-bottom: var(--e16); }
.busqueda-fila { display: flex; gap: var(--e8); align-items: end; }
.busqueda-fila .campo { flex: 1; }
.filtros summary { display: flex; align-items: center; min-height: var(--control); font-weight: 600; color: var(--acento); }
.filtros-campos { display: grid; gap: var(--e12); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.activos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e12); padding: 0; list-style: none; font-size: var(--t-meta); }
.activos li:first-child { color: var(--secundario); }
.activos a { display: inline-flex; align-items: center; min-height: var(--control); }

.grupo { margin-top: var(--e48); }
.grupo > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e4) var(--e12); padding-bottom: var(--e8); }
.grupo > summary h2 { display: inline-flex; align-items: center; gap: var(--e8); }
.grupo-detalle { font-size: var(--t-meta); color: var(--secundario); }
.grupo-rojo h2, .plazo-rojo { color: var(--critico); }
.grupo-naranja h2, .plazo-naranja, .grupo-confirmar h2, .plazo-confirmar { color: var(--advertencia); }
.plazo { display: inline-flex; align-items: baseline; gap: var(--e4); font-size: var(--t-meta); font-weight: 600; }
.plazo-amarillo, .plazo-gris, .plazo-sin_plazo, .plazo-descartado { color: var(--secundario); font-weight: 400; }
.filas { padding: 0; list-style: none; }
.fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e8); padding-block: var(--e16); border-top: 1px solid var(--separador); }
.f-objeto .titulo { font-size: var(--t-fila); font-weight: 600; line-height: 1.3; text-decoration: none; color: var(--texto); }
.f-objeto .entidad, .f-modalidad .tenue { font-size: var(--t-meta); color: var(--secundario); }
.rotulo-dato { font-size: var(--t-meta); color: var(--secundario); }
.motivo { font-size: var(--t-meta); max-width: 42rem; }
.encaje { font-weight: 600; }
.encaje-alto { color: var(--confirmacion); }
.encaje-no { color: var(--secundario); }

/* Detalle */
.ficha-decision { display: grid; gap: var(--e16); padding-block: var(--e16); border-block: 1px solid var(--separador); }

/* Acceso: login y activar */
.acceso { display: grid; gap: var(--e32); align-items: center; }
.lamina { display: none; filter: var(--lamina-filtro); }
.entrada { max-width: 28rem; }
.entrada > * + * { margin-top: var(--e16); }
.entrada form { display: grid; gap: var(--e12); }
.codigo { font-size: var(--t-meta); color: var(--secundario); }

/* Tablas densas como bloques de lista en móvil */
@media (max-width: 47.99rem) {
  .tabla-bloques thead { display: none; }
  .tabla-bloques, .tabla-bloques tbody, .tabla-bloques tr, .tabla-bloques td { display: block; width: 100%; }
  .tabla-bloques tr { padding-block: var(--e12); border-bottom: 1px solid var(--separador); }
  .tabla-bloques td, .tabla-bloques .num { padding: var(--e4) 0; border: 0; text-align: left; }
  .tabla-bloques td[data-et]::before { content: attr(data-et) ": "; color: var(--secundario); font-size: var(--t-meta); }
}

@media (min-width: 48rem) {
  .pagina, .cabecera, .procedencia { padding-inline: var(--e32); }
  .fila { grid-template-columns: 6fr 3fr 3fr; gap: var(--e12) var(--e24); }
  .f-ia { grid-column: 1; }
  .f-seguimiento { grid-column: 2 / -1; }
  .dos-columnas { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .acceso { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e48); }
  .lamina { display: block; width: 100%; max-height: 75vh; object-fit: cover; }
  .ficha-decision { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* En escritorio los filtros quedan a la vista; en móvil siguen plegados. */
@supports selector(::details-content) {
  @media (min-width: 60rem) {
    .filtros > summary { display: none; }
    .filtros::details-content { content-visibility: visible; display: contents; }
  }
}

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--texto); }
  .f-objeto .titulo:hover { color: var(--acento); }
  .menu a:hover, .pestanas a:hover { color: var(--texto); }
  .boton:hover, .boton-peligro:hover { color: var(--superficie); }
  .boton-secundario:hover, .boton-texto:hover { color: var(--texto); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .boton:active, .boton-secundario:active, .boton-peligro:active, .boton-texto:active { transform: none; }
}

@media print {
  .cabecera, .tema, .salir, .filtros, .busqueda, .pie { display: none; }
}

/* Ajustes tras la revisión visual */
.tabla th { overflow-wrap: normal; white-space: nowrap; }
.tabla td { overflow-wrap: break-word; }
.tabla form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e8); margin: 0 var(--e8) var(--e8) 0; }
.tabla select { width: auto; min-width: 11rem; }
.tabla .boton-peligro { background: none; color: var(--critico); border: 1px solid var(--critico); }
.desplegable > summary { cursor: pointer; font-weight: 600; color: var(--acento); min-height: 44px; display: flex; align-items: center; }
.grupo > summary { cursor: pointer; }
.grupo:not([open]) > summary::after { content: "Ver procesos"; margin-left: var(--e8); font-size: var(--t-meta); font-weight: 600; color: var(--acento); }