/* =====================================================================
   SIG v2.0.0 — Sistema Integrado de Gestion
   Hoja de estilo unica. Sin dependencias externas.
   ===================================================================== */

:root {
  --fondo:        #f6f7f9;
  --superficie:   #ffffff;
  --superficie-2: #f1f3f6;
  --borde:        #dfe3e9;
  --borde-fuerte: #c3cad4;
  --texto:        #1a2230;
  --texto-2:      #5b6676;
  --texto-3:      #8a94a3;
  --primario:     #1e4e8c;
  --primario-2:   #17406f;
  --primario-sua: #e8f0fa;
  --ok:           #11734a;
  --ok-sua:       #e3f4ec;
  --alerta:       #a45b00;
  --alerta-sua:   #fdf1e0;
  --error:        #b3261e;
  --error-sua:    #fdeceb;
  --info-sua:     #eef2f7;

  --r:    8px;
  --r-sm: 5px;
  --sombra:   0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --sombra-2: 0 4px 12px rgba(16,24,40,.10);

  --menu-ancho: 264px;
  --barra-alto: 58px;

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------
   Tema oscuro.

   Los valores se escriben una sola vez, en --o-*, y se asignan en dos
   sitios: cuando el sistema operativo pide oscuro y la persona no ha
   elegido claro, y cuando la persona ha elegido oscuro explicitamente.
   Duplicar la asignacion es inevitable —CSS no permite combinar una
   media query con un selector en una sola regla— pero duplicar los
   colores si se puede evitar, y es lo que importa: un color se cambia
   en un solo lugar.
   --------------------------------------------------------------------- */

:root {
  --o-fondo:        #12161d;
  --o-superficie:   #191f28;
  --o-superficie-2: #212933;
  --o-borde:        #2c3642;
  --o-borde-fuerte: #3d4a59;
  --o-texto:        #e6eaf0;
  --o-texto-2:      #a3adbb;
  --o-texto-3:      #76828f;
  --o-primario:     #6ba3e8;
  --o-primario-2:   #8dbcf2;
  --o-primario-sua: #1b2b40;
  --o-ok:           #4ec08a;
  --o-ok-sua:       #16302a;
  --o-alerta:       #e0a458;
  --o-alerta-sua:   #332616;
  --o-error:        #f08079;
  --o-error-sua:    #3a1e1d;
  --o-info-sua:     #1d242e;
  --o-sombra:   0 1px 2px rgba(0,0,0,.4);
  --o-sombra-2: 0 4px 14px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:        var(--o-fondo);
    --superficie:   var(--o-superficie);
    --superficie-2: var(--o-superficie-2);
    --borde:        var(--o-borde);
    --borde-fuerte: var(--o-borde-fuerte);
    --texto:        var(--o-texto);
    --texto-2:      var(--o-texto-2);
    --texto-3:      var(--o-texto-3);
    --primario:     var(--o-primario);
    --primario-2:   var(--o-primario-2);
    --primario-sua: var(--o-primario-sua);
    --ok:           var(--o-ok);
    --ok-sua:       var(--o-ok-sua);
    --alerta:       var(--o-alerta);
    --alerta-sua:   var(--o-alerta-sua);
    --error:        var(--o-error);
    --error-sua:    var(--o-error-sua);
    --info-sua:     var(--o-info-sua);
    --sombra:       var(--o-sombra);
    --sombra-2:     var(--o-sombra-2);
  }
}

:root[data-tema="oscuro"] {
  --fondo:        var(--o-fondo);
  --superficie:   var(--o-superficie);
  --superficie-2: var(--o-superficie-2);
  --borde:        var(--o-borde);
  --borde-fuerte: var(--o-borde-fuerte);
  --texto:        var(--o-texto);
  --texto-2:      var(--o-texto-2);
  --texto-3:      var(--o-texto-3);
  --primario:     var(--o-primario);
  --primario-2:   var(--o-primario-2);
  --primario-sua: var(--o-primario-sua);
  --ok:           var(--o-ok);
  --ok-sua:       var(--o-ok-sua);
  --alerta:       var(--o-alerta);
  --alerta-sua:   var(--o-alerta-sua);
  --error:        var(--o-error);
  --error-sua:    var(--o-error-sua);
  --info-sua:     var(--o-info-sua);
  --sombra:       var(--o-sombra);
  --sombra-2:     var(--o-sombra-2);
}

/* Lo que se imprime se imprime en claro: la tinta oscura sobre papel
   oscuro no existe, y un informe que sale negro es papel perdido. */
@media print {
  :root, :root[data-tema="oscuro"] {
    --fondo: #fff; --superficie: #fff; --superficie-2: #fff;
    --texto: #000; --texto-2: #333; --texto-3: #555;
    --borde: #bbb; --borde-fuerte: #888;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 14px/1.55 var(--fuente);
  color: var(--texto);
  background: var(--fondo);
}

a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 640; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
p  { margin: 0 0 .8em; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primario); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r) 0;
}
.saltar:focus { left: 0; }

/* ---------------------------------------------------------------- barra */

.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: var(--barra-alto); padding: 0 18px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.marca:hover { text-decoration: none; }
.marca-icono {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--primario); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca-texto strong { font-size: 14px; font-weight: 620; }
.marca-texto small { font-size: 11.5px; color: var(--texto-3); }

.normas-activas { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.chip-norma {
  --c: var(--texto-3);
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 9%, transparent);
}
.chip-norma:hover { text-decoration: none; background: color-mix(in srgb, var(--c) 18%, transparent); }
.chip-norma.aviso { --c: var(--alerta); }

.barra-derecha { display: flex; align-items: center; gap: 14px; }
.usuario { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.en-linea { display: inline; }
.enlace {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--primario); font: inherit;
}
.enlace:hover { text-decoration: underline; }

.icono-boton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px; font-size: 12.5px;
  background: var(--alerta-sua); color: var(--alerta); font-weight: 600;
}
.icono-boton:hover { text-decoration: none; }
.punto {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 99px; background: var(--alerta); color: #fff;
  font-size: 11px; font-weight: 700;
}

.menu-boton { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.menu-boton span { display: block; width: 20px; height: 2px; background: var(--texto); margin: 4px 0; }

/* ---------------------------------------------------------------- menu */

.disposicion { display: flex; align-items: flex-start; }

.menu {
  position: sticky; top: var(--barra-alto);
  width: var(--menu-ancho); flex: 0 0 var(--menu-ancho);
  height: calc(100vh - var(--barra-alto));
  overflow-y: auto; padding: 14px 10px 40px;
  background: var(--superficie); border-right: 1px solid var(--borde);
}
.menu-grupo { margin-bottom: 10px; }

/* Menu de acordeon: cada grupo es un <details>, asi que el plegado no
   necesita JavaScript. Se le quita el triangulo del navegador y se pone uno
   propio, que es lo unico que hay que hacer para que no se vea prestado. */
.menu-titulo {
  margin: 0 0 4px; padding: 5px 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3);
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; border-radius: var(--r-sm);
  list-style: none;
}
.menu-titulo::-webkit-details-marker { display: none; }
.menu-titulo::marker { content: ''; }
.menu-titulo:hover { background: var(--superficie-2); color: var(--texto-2); }
.menu-titulo::before {
  content: ''; flex: 0 0 auto;
  width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .14s ease;
}
details[open] > .menu-titulo::before { transform: rotate(45deg); }
.menu-titulo:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
/* Un punto en el grupo donde esta la pagina actual: al plegar los demas hay
   que poder ver donde se esta sin abrirlos. */
.menu-aqui {
  width: 5px; height: 5px; border-radius: 50%; background: var(--primario);
  margin-left: auto; flex: 0 0 auto;
}

.selector-tema { display: flex; align-items: center; gap: 6px; }
.selector-tema select {
  padding: 4px 8px; font-size: 12.2px; height: auto; width: auto; min-width: 96px;
  background: var(--superficie); color: var(--texto-2);
  border: 1px solid var(--borde); border-radius: var(--r-sm);
}
@media (max-width: 760px) { .selector-tema { display: none; } }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-sm);
  color: var(--texto-2); font-size: 13.2px;
}
.menu li a:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.menu li a.activo {
  background: var(--primario-sua); color: var(--primario); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--primario);
}
.badge {
  min-width: 18px; padding: 1px 6px; border-radius: 99px;
  background: var(--alerta); color: #fff; font-size: 10.5px; font-weight: 700; text-align: center;
}

/* ---------------------------------------------------------------- contenido */

.contenido { flex: 1 1 auto; min-width: 0; padding: 20px 24px 60px; }

.migas { font-size: 12.5px; color: var(--texto-3); margin-bottom: 10px; }
.migas a::after, .migas span::after { content: "›"; margin: 0 7px; color: var(--texto-3); }
.migas :last-child::after { content: ""; }

.aviso {
  padding: 10px 14px; border-radius: var(--r); margin-bottom: 14px;
  border: 1px solid; font-size: 13.5px;
}
.aviso-ok    { background: var(--ok-sua);    border-color: color-mix(in srgb, var(--ok) 30%, transparent);    color: var(--ok); }
.aviso-error { background: var(--error-sua); border-color: color-mix(in srgb, var(--error) 30%, transparent); color: var(--error); }
.aviso-alerta{ background: var(--alerta-sua);border-color: color-mix(in srgb, var(--alerta) 30%, transparent);color: var(--alerta); }
.aviso-info  { background: var(--info-sua);  border-color: var(--borde); color: var(--texto-2); }

/* ---------------------------------------------------------------- encabezado de pagina */

.pagina-cabecera {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.pagina-cabecera .texto { flex: 1 1 420px; min-width: 0; }
.pagina-cabecera p.descripcion {
  margin: 4px 0 0; color: var(--texto-2); font-size: 13.3px; max-width: 78ch;
}
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- botones */

.boton, button.boton, a.boton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 13.2px; font-weight: 550; cursor: pointer;
  white-space: nowrap;
}
.boton:hover { background: var(--superficie-2); text-decoration: none; }
.boton.boton-primario, a.boton.boton-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.boton.boton-primario:hover, a.boton.boton-primario:hover { background: var(--primario-2); border-color: var(--primario-2); }
.boton.boton-peligro, a.boton.boton-peligro { border-color: color-mix(in srgb, var(--error) 45%, transparent); color: var(--error); }
.boton.boton-peligro:hover, a.boton.boton-peligro:hover { background: var(--error-sua); }
.boton.boton-sm, a.boton.boton-sm { padding: 4px 9px; font-size: 12.2px; }
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: var(--sombra);
  margin-bottom: 16px;
}
.tarjeta > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--borde);
}
.tarjeta > header h2, .tarjeta > header h3 { margin: 0; }
.tarjeta .cuerpo { padding: 16px; }
.tarjeta .cuerpo.sin-relleno { padding: 0; }

.rejilla { display: grid; gap: 16px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------------------------------------------------------------- indicadores */

.metrica {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 14px 16px;
}
.metrica .etiqueta {
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--texto-3); margin: 0 0 4px;
}
.metrica .valor { font-size: 26px; font-weight: 680; line-height: 1.1; letter-spacing: -.02em; }
.metrica .pie { font-size: 12px; color: var(--texto-3); margin: 3px 0 0; }
.metrica.ok     .valor { color: var(--ok); }
.metrica.alerta .valor { color: var(--alerta); }
.metrica.error  .valor { color: var(--error); }

/* barra de progreso */
.progreso {
  position: relative; height: 7px; border-radius: 99px;
  background: var(--superficie-2); overflow: hidden; margin-top: 8px;
}
.progreso > i {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: var(--v, 0%); border-radius: 99px; background: var(--c, var(--primario));
}
.barra-mini {
  display: inline-block; position: relative; width: 54px; height: 6px;
  border-radius: 99px; background: var(--superficie-2); vertical-align: middle;
}
.barra-mini > i {
  position: absolute; inset: 0 auto 0 0; width: var(--v, 0%);
  border-radius: 99px; background: var(--primario);
}

/* ---------------------------------------------------------------- tablas */

.tabla-envoltura { overflow-x: auto; }

table.datos { width: 100%; border-collapse: collapse; font-size: 13.2px; }
table.datos th, table.datos td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--borde);
}
table.datos thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--superficie-2); color: var(--texto-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
table.datos tbody tr:hover { background: var(--superficie-2); }
table.datos td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.datos td.acciones-fila { text-align: right; white-space: nowrap; }
table.datos .vacio { color: var(--texto-3); }

.codigo {
  font-family: var(--mono); font-size: 12.2px; font-weight: 600;
  color: var(--texto-2); white-space: nowrap;
}

/* ---------------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 11.5px; font-weight: 620; line-height: 1.5; white-space: nowrap;
}
.e-ok      { background: var(--ok-sua);     color: var(--ok); }
.e-alerta  { background: var(--alerta-sua); color: var(--alerta); }
.e-error   { background: var(--error-sua);  color: var(--error); }
.e-neutro  { background: var(--superficie-2); color: var(--texto-2); }
.e-info    { background: var(--primario-sua); color: var(--primario); }

.si { color: var(--ok); font-weight: 600; }
.no { color: var(--texto-3); }

/* ---------------------------------------------------------------- formularios */

form.sig { max-width: 1180px; }

.seccion-form { margin-bottom: 20px; }
.seccion-form > h3 {
  padding-bottom: 7px; margin-bottom: 12px; border-bottom: 1px solid var(--borde);
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2);
}

.campos { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.campo { padding: 0 8px 14px; width: 100%; }
.col-2  { width: 16.666%; } .col-3 { width: 25%; }  .col-4 { width: 33.333%; }
.col-5  { width: 41.666%; } .col-6 { width: 50%; }  .col-8 { width: 66.666%; }
.col-9  { width: 75%; }     .col-12 { width: 100%; }

.campo label {
  display: block; margin-bottom: 4px;
  font-size: 12.5px; font-weight: 620; color: var(--texto-2);
}
.campo .req { color: var(--error); }

input[type=text], input[type=email], input[type=url], input[type=number],
input[type=password], input[type=date], input[type=datetime-local],
select, textarea {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 13.4px;
}
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--primario) 45%, transparent);
  outline-offset: 1px; border-color: var(--primario);
}
input:disabled, select:disabled, textarea:disabled,
input[readonly] {
  background: var(--superficie-2); color: var(--texto-2); cursor: not-allowed;
}
.campo .ayuda { margin: 4px 0 0; font-size: 12px; color: var(--texto-3); line-height: 1.45; }
.campo .sufijo { margin-left: 6px; color: var(--texto-3); font-size: 12.5px; }

.interruptor { display: inline-flex; align-items: center; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor span {
  position: relative; display: block; width: 40px; height: 22px;
  background: var(--borde-fuerte); border-radius: 99px; transition: background .15s;
}
.interruptor span::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s;
}
.interruptor input:checked + span { background: var(--primario); }
.interruptor input:checked + span::after { transform: translateX(18px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--primario); outline-offset: 2px; }

.error-campo { color: var(--error); font-size: 12.2px; margin-top: 3px; }

.form-pie {
  display: flex; gap: 10px; align-items: center;
  padding-top: 14px; border-top: 1px solid var(--borde); margin-top: 4px;
}

/* ---------------------------------------------------------------- filtros */

.filtros {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  padding: 12px 16px; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r); margin-bottom: 14px;
}
.filtros .campo { width: auto; min-width: 150px; padding-bottom: 0; }
.filtros .busca { min-width: 240px; flex: 1 1 240px; }

/* ---------------------------------------------------------------- paginacion */

.paginacion { display: flex; gap: 5px; align-items: center; justify-content: center; margin: 18px 0; }
.paginacion a, .paginacion span {
  padding: 5px 11px; border-radius: var(--r-sm); font-size: 13px;
  border: 1px solid var(--borde); color: var(--texto-2);
}
.paginacion a:hover { background: var(--superficie-2); text-decoration: none; }
.paginacion .actual { background: var(--primario); border-color: var(--primario); color: #fff; font-weight: 600; }
.paginacion .salto { border: 0; padding: 5px 2px; color: var(--texto-3); }

/* ---------------------------------------------------------------- pie del listado */

.lista-pie {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: center; justify-content: space-between; margin: 14px 0 4px;
}
.lista-pie .conteo { margin: 0; }
.lista-pie .paginacion { margin: 0; }
.lista-pie .por-pagina { margin: 0; font-size: 12.5px; color: var(--texto-3); }
.lista-pie .por-pagina a, .lista-pie .por-pagina .actual {
  display: inline-block; padding: 2px 7px; margin: 0 1px; border-radius: var(--r-sm);
  border: 1px solid var(--borde); font-size: 12.5px;
}
.lista-pie .por-pagina a:hover { background: var(--superficie-2); text-decoration: none; }
.lista-pie .por-pagina .actual {
  background: var(--superficie-2); border-color: var(--primario);
  color: var(--texto-1); font-weight: 600;
}

/* ---------------------------------------------------------------- orden por columna */

table.datos th a.orden {
  display: inline-flex; align-items: center; gap: 4px;
  color: inherit; font: inherit; text-decoration: none; white-space: nowrap;
}
table.datos th a.orden:hover { color: var(--primario); text-decoration: none; }
table.datos th a.orden .flecha { font-size: 9px; line-height: 1; color: var(--primario); }
/* El hueco de la flecha se reserva siempre, para que la fila de encabezados
   no se mueva al cambiar de columna. */
table.datos th a.orden .flecha:empty::before { content: '↕'; color: var(--texto-3); opacity: .45; }
table.datos th.ordenada { color: var(--texto-1); }
table.datos th.col-codigo { width: 70px; }

.filtro-tareas { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }

/* ---------------------------------------------------------------- matriz de riesgo */

.matriz-riesgo { border-collapse: collapse; font-size: 12.5px; }
.matriz-riesgo th { padding: 6px 9px; color: var(--texto-2); font-size: 11.5px; font-weight: 600; }
.matriz-riesgo td {
  width: 74px; height: 54px; text-align: center; vertical-align: middle;
  border: 2px solid var(--superficie); border-radius: 3px;
  font-weight: 700; color: #fff;
}
.matriz-riesgo td.vacia { color: rgba(255,255,255,.55); font-weight: 500; }

/* ---------------------------------------------------------------- correspondencia */

.matriz-corr { font-size: 12.5px; }
.matriz-corr td.concepto { max-width: 280px; }
.matriz-corr td.concepto strong { display: block; font-weight: 600; }
.matriz-corr td.concepto code { font-size: 11px; color: var(--texto-3); }
.clausula {
  display: inline-block; padding: 1px 6px; margin: 1px 2px 1px 0;
  border-radius: var(--r-sm); font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  background: color-mix(in srgb, var(--c, var(--texto-3)) 12%, transparent);
  color: var(--c, var(--texto-2));
  border: 1px solid color-mix(in srgb, var(--c, var(--texto-3)) 28%, transparent);
}
.clausula:hover { text-decoration: none; background: color-mix(in srgb, var(--c) 22%, transparent); }
.fila-capitulo td {
  background: var(--superficie-2); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2);
}

/* ---------------------------------------------------------------- ficha */

.ficha-rejilla { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); gap: 16px; }
@media (max-width: 1080px) { .ficha-rejilla { grid-template-columns: 1fr; } }

dl.datos-ficha { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 8px 18px; margin: 0; }
dl.datos-ficha dt { font-size: 12.5px; font-weight: 620; color: var(--texto-2); }
dl.datos-ficha dd { margin: 0; font-size: 13.4px; min-width: 0; overflow-wrap: anywhere; }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li {
  padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 13.2px;
}
.lista-simple li:last-child { border-bottom: 0; }

.vacio-estado {
  padding: 34px 20px; text-align: center; color: var(--texto-3);
  border: 1px dashed var(--borde-fuerte); border-radius: var(--r);
}
.vacio-estado p { margin: 0 0 10px; }

/* ---------------------------------------------------------------- acceso */

.acceso {
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
  background: var(--fondo);
}
.acceso .caja {
  width: 100%; max-width: 400px; padding: 28px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: var(--sombra-2);
}
.acceso h1 { font-size: 19px; margin-bottom: 4px; }
.acceso .sub { color: var(--texto-2); font-size: 13px; margin-bottom: 20px; }

/* ---------------------------------------------------------------- pie */

.pie {
  padding: 18px 24px; border-top: 1px solid var(--borde);
  color: var(--texto-3); font-size: 12.2px; background: var(--superficie);
}
.pie p { margin: 0; }
.pie .nota { margin-top: 3px; font-size: 11.5px; }

/* ---------------------------------------------------------------- responsivo */

@media (max-width: 900px) {
  .menu-boton { display: block; }
  .menu {
    position: fixed; left: 0; top: var(--barra-alto); z-index: 30;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: var(--sombra-2);
  }
  .menu.abierto { transform: translateX(0); }
  .contenido { padding: 16px; }
  .normas-activas { display: none; }
  .col-2, .col-3, .col-4, .col-5, .col-6, .col-8, .col-9 { width: 100%; }
  .marca-texto small { display: none; }
}

@media print {
  .barra, .menu, .acciones, .filtros, .paginacion, .pie, .saltar { display: none !important; }
  .contenido { padding: 0; }
  .tarjeta { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  body { background: #fff; font-size: 11pt; }
}

/* ------------------------------------------------------------------
   Gestor documental: editor y vista del documento
   ------------------------------------------------------------------ */

.editor-barra {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--borde);
  background: var(--fondo-2); position: sticky; top: 0; z-index: 5;
}
.editor-barra .eb {
  border: 1px solid var(--borde); background: #fff; color: var(--texto-2);
  border-radius: 6px; padding: 5px 10px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; line-height: 1.2;
}
.editor-barra .eb:hover { border-color: var(--primario); color: var(--primario); }
.editor-barra .eb-sep { width: 1px; height: 20px; background: var(--borde); margin: 0 4px; }

.editor-zona { min-height: 420px; outline: none; }
.editor-zona:focus { outline: none; }

.documento-vista { font-size: 14px; line-height: 1.68; color: var(--texto); }
.documento-vista h2 {
  font-size: 17px; margin: 22px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--borde); font-weight: 680;
}
.documento-vista h3 { font-size: 14.5px; margin: 18px 0 6px; font-weight: 660; }
.documento-vista h4 { font-size: 13.5px; margin: 14px 0 4px; font-weight: 640; }
.documento-vista h2:first-child, .documento-vista h3:first-child { margin-top: 0; }
.documento-vista p { margin: 0 0 11px; }
.documento-vista ul, .documento-vista ol { margin: 0 0 12px; padding-left: 24px; }
.documento-vista li { margin: 3px 0; }
.documento-vista blockquote {
  margin: 12px 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--borde-fuerte, #cbd5e1);
  color: var(--texto-2);
}
.documento-vista hr { border: 0; border-top: 1px solid var(--borde); margin: 18px 0; }
.documento-vista table { border-collapse: collapse; width: 100%; margin: 6px 0 16px; font-size: 13px; }
.documento-vista th, .documento-vista td {
  border: 1px solid var(--borde); padding: 7px 9px; text-align: left; vertical-align: top;
}
.documento-vista th { background: var(--fondo-2); font-weight: 640; }

@media (max-width: 720px) {
  .editor-barra { position: static; }
  .documento-vista table { display: block; overflow-x: auto; }
}

/* Marca: logo de la organizacion */
.marca-logo { height: 32px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.acceso-logo { max-height: 64px; max-width: 260px; margin: 0 auto 18px; display: block; }
.pie-propiedad { font-size: 11.5px; color: var(--texto-3); }

/* Selector multiple de controles del riesgo */
.selector-controles .lista-controles{max-height:420px;overflow:auto;border:1px solid var(--borde);
  border-radius:var(--r-sm);padding:6px 10px;margin-top:4px}
.selector-controles .marco-controles{margin:10px 0 2px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--texto-3)}
.selector-controles .tema-cabecera{display:flex;align-items:center;gap:10px;margin:10px 0 4px;font-size:13px}
.selector-controles .control-opcion{display:flex;gap:8px;align-items:center;padding:4px 2px;font-size:12.8px;
  cursor:pointer;border-bottom:1px solid var(--borde-suave, rgba(0,0,0,.04))}
.selector-controles .control-opcion input{width:auto;margin:0}
.selector-controles .control-opcion .codigo{min-width:44px}
.selector-controles .control-opcion .nombre{flex:1}
.selector-controles .control-opcion[hidden],.selector-controles .tema-controles[hidden]{display:none}
.control-ajuste{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.control-ajuste select,.control-ajuste input{width:auto;padding:3px 6px;font-size:12px}
.control-ajuste input[type=number]{width:64px}
.control-ajuste input[type=text]{min-width:160px;flex:1}
#controles table.datos td:first-child{min-width:200px}
#controles .control-ajuste{max-width:360px}

/* Tareas */
.tarea-fila{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--borde);flex-wrap:wrap}
.tarea-fila:last-child{border-bottom:0}
.tarea-datos{flex:1;min-width:260px}
.tarea-cierre .control-ajuste{justify-content:flex-end}
.tarea-cierre input[type=text]{min-width:200px}

/* ---------------------------------------------------------------- detalle de una fila */

table.datos tr.destacada > td { background: var(--superficie-2); }
table.datos tr.detalle-abierto > td {
  background: var(--superficie-2); padding: 14px 12px;
  border-bottom: 2px solid var(--borde);
}
table.datos tr.detalle-abierto label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-3);
}