/* ---------------------------------------------------------------------------
   Hoja unica del panel. Sin build, sin framework, sin preprocesador.

   Es una decision de despliegue, no de gusto: en un panel de hosting, cada paso
   de compilacion es un sitio mas donde el despliegue puede fallar en silencio.
   Esto se sube y funciona.

   La paleta y las tipografias salen de brand.css (tokens de identidad de
   marca), que se enlaza antes que esta hoja. Aqui solo se mapean esos tokens a
   los roles semanticos del panel (fondo, texto, estados...).
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;
  --fondo: var(--brand-white, #fafafb);
  --papel: #fff;
  --tinta: var(--brand-graphite, #0e1116);
  --tenue: var(--brand-fog-gray, #8a93a3);
  --linea: #e4e7ec;
  --acento: var(--brand-cyan, #00e5c7);
  --acento-suave: #e0faf6;
  --acento-fuerte: var(--brand-graphite, #0e1116);
  --acento-fuerte-texto: var(--brand-white, #fafafb);
  --vencido: var(--brand-red, #ef4444);
  --critico: var(--brand-amber, #f5a623);
  --proximo: var(--brand-violet, #7c5cff);
  --en-plazo: var(--brand-green, #22c55e);
  --radio: 10px;
  --sombra: 0 1px 3px rgba(14, 17, 22, .08), 0 1px 2px rgba(14, 17, 22, .04);
}

/* El tema sigue al sistema por defecto, salvo que tema.js haya guardado una
   eleccion manual: `data-tema="claro"` la excluye aqui, y `data-tema="oscuro"`
   la fuerza abajo aunque el sistema este en claro. Mismas variables en los dos
   sitios a proposito: son el mismo tema oscuro, elegido por dos caminos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: var(--brand-graphite, #0e1116);
    --papel: #171a20;
    --tinta: var(--brand-white, #fafafb);
    --tenue: var(--brand-fog-gray, #8a93a3);
    --linea: #262a31;
    --acento: var(--brand-cyan, #00e5c7);
    --acento-suave: #0d2e2a;
    --acento-fuerte: var(--brand-cyan, #00e5c7);
    --acento-fuerte-texto: var(--brand-graphite, #0e1116);
    --vencido: var(--brand-red, #ef4444);
    --critico: var(--brand-amber, #f5a623);
    --proximo: var(--brand-violet, #7c5cff);
    --en-plazo: var(--brand-green, #22c55e);
    --sombra: 0 2px 8px rgba(0, 0, 0, .45);
  }
}

:root[data-tema="oscuro"] {
  --fondo: var(--brand-graphite, #0e1116);
  --papel: #171a20;
  --tinta: var(--brand-white, #fafafb);
  --tenue: var(--brand-fog-gray, #8a93a3);
  --linea: #262a31;
  --acento: var(--brand-cyan, #00e5c7);
  --acento-suave: #0d2e2a;
  --acento-fuerte: var(--brand-cyan, #00e5c7);
  --acento-fuerte-texto: var(--brand-graphite, #0e1116);
  --vencido: var(--brand-red, #ef4444);
  --critico: var(--brand-amber, #f5a623);
  --proximo: var(--brand-violet, #7c5cff);
  --en-plazo: var(--brand-green, #22c55e);
  --sombra: 0 2px 8px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.55 var(--brand-font-body, ui-sans-serif), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

code, .mono { font-family: var(--brand-font-mono, ui-monospace), SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; font-family: var(--brand-font-display, inherit); }
a { color: var(--acento-fuerte); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.mb { margin-bottom: 12px; }
.mt { margin-top: 10px; }
.nomargen { margin: 0; }
.menuda { font-size: 13px; }
.rotulo { font-size: 14px; margin: 16px 0 6px; }
.en-linea { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.en-linea input { width: auto; }

/* --- Acceso --------------------------------------------------------------- */
/* Fondo liso. Los dos halos de acento que habia en las esquinas se leian como
   luces encendiendose al cargar —el degradado aparece con la fuente y el
   logo— y en una pantalla de acceso lo unico que debe moverse es el cursor. */
body.acceso {
  min-height: 100dvh; padding: 32px 16px; background: var(--fondo);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
}

.tarjeta {
  width: 100%; max-width: 420px; background: var(--papel);
  border: 1px solid var(--linea); border-radius: calc(var(--radio) + 6px); padding: 32px 30px;
  box-shadow: 0 8px 28px rgba(14, 17, 22, .12);
}
.marca {
  display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tenue); font-weight: 600;
}
.marca .bx { font-size: 18px; color: var(--acento); }
.tarjeta h1 { font-size: 21px; margin: 6px 0 4px; }
.tarjeta .sub { color: var(--tenue); font-size: 13.5px; margin: 0 0 22px; }
.etiqueta-suelta { font-size: 13.5px; margin: 0 0 4px; }

label { display: block; font-size: 12.5px; font-weight: 600; margin: 0 0 6px; color: var(--tenue); letter-spacing: .01em; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--papel); color: var(--tinta); font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select { width: auto; min-width: 240px; max-width: 100%; }

.campo-icono { position: relative; }
.campo-icono .bx {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--tenue); font-size: 16px; pointer-events: none;
}
.campo-icono input { padding-left: 38px; }

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent);
}

.campo { margin-bottom: 14px; }

.btn {
  width: 100%; padding: 11px 16px; border: 1px solid var(--acento-fuerte);
  border-radius: var(--radio); background: var(--acento-fuerte); color: var(--acento-fuerte-texto); font-weight: 600;
  box-shadow: var(--sombra); transition: filter .15s ease, transform .05s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: progress; }

.btn-min {
  display: inline-block; padding: 7px 14px; font-size: 13px; font-weight: 500;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linea);
  border-radius: var(--radio); text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
.btn-min:hover { border-color: var(--acento-fuerte); color: var(--acento-fuerte); }

/* Boton redondo para alternar claro/oscuro. Vive en tema.js, no en panel.js:
   es preferencia de pantalla, no dato que rellene la vista. */
#alternarTema {
  width: 36px; height: 36px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
}
#alternarTema .bx { font-size: 18px; }

.alternar-tema-flotante { position: fixed; top: 18px; right: 18px; z-index: 10; }

.aviso {
  border-left: 3px solid var(--vencido); background: var(--papel);
  padding: 9px 12px; margin: 0 0 14px; font-size: 13.5px;
  border-radius: 0 var(--radio) var(--radio) 0;
}
.aviso.ok { border-left-color: var(--acento); }
.aviso.nota { border-left-color: var(--proximo); }

.pasos { display: flex; gap: 8px; margin: 0 0 20px; font-size: 12px; color: var(--tenue); }
.pasos span {
  flex: 1; text-align: center; padding: 7px 4px; border-radius: 999px;
  background: var(--fondo); border: 1px solid var(--linea); font-weight: 500;
}
.pasos span[data-activo] {
  background: color-mix(in srgb, var(--acento) 18%, var(--papel));
  border-color: var(--acento); color: var(--acento-fuerte); font-weight: 700;
}

/* --- Las casillas del codigo de 6 digitos -----------------------------------
   Una por digito, como en la plantilla. Ancho fijo y cifra centrada: el codigo
   se lee de un vistazo y se ve cuantos faltan sin contarlos.

   `minmax(0, 52px)` y no un ancho fijo: en un movil estrecho las seis casillas
   se encogen en vez de sacar la tarjeta de la pantalla.
   --------------------------------------------------------------------------- */
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: 8px; }

.otp input {
  width: 100%; height: 52px; padding: 0; text-align: center;
  font-family: var(--brand-font-mono, ui-monospace), monospace;
  font-size: 20px; font-weight: 600; line-height: 1;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta);
  transition: border-color .15s ease, box-shadow .15s ease;
  -moz-appearance: textfield;
}

/* Un campo `tel` no saca flechas, pero si el navegador lo trata como numerico
   las quita esto: una flecha arriba/abajo en una casilla de un digito solo
   estorba. */
.otp input::-webkit-outer-spin-button,
.otp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.otp input:focus-visible {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent);
}

/* El otro camino —codigo de respaldo o vuelta a la app— es un enlace, no un
   boton: no es una accion del formulario, es cambiar de campo. */
.otro-modo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }

.enlace {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--acento-fuerte); text-decoration: underline; cursor: pointer;
}
.enlace:hover { filter: brightness(1.15); }
.enlace:focus-visible {
  outline: none; border-radius: 4px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent);
}

@media (max-width: 380px) {
  .otp { gap: 6px; }
  .otp input { height: 46px; font-size: 18px; }
}

.secreto {
  font-family: var(--brand-font-mono, ui-monospace), monospace; font-size: 17px; letter-spacing: .13em;
  word-break: break-all; background: var(--acento-suave);
  padding: 12px; border-radius: var(--radio); margin: 8px 0;
}
.respaldo { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 10px 0; }
.respaldo code { background: var(--acento-suave); padding: 6px 8px; border-radius: 4px; text-align: center; }

/* --- Estructura del panel -------------------------------------------------- */
header.barra {
  background: var(--papel); border-bottom: 1px solid var(--linea);
  padding: 12px 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5; box-shadow: var(--sombra);
}
header.barra .quien { margin-left: auto; text-align: right; font-size: 12.5px; color: var(--tenue); }
#salir:hover { border-color: var(--vencido); color: var(--vencido); }

nav.pestanas {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; background: transparent;
  border-bottom: 0; overflow-y: auto; flex: 1;
}
nav.pestanas a {
  display: flex; align-items: center; gap: 10px; color: var(--tenue); padding: 10px 12px;
  text-decoration: none; border-radius: var(--radio); white-space: nowrap; font-size: 14px;
}
nav.pestanas a .bx { font-size: 17px; flex: none; }
nav.pestanas a:hover { background: var(--acento-suave); color: var(--tinta); }
nav.pestanas a[data-activo] {
  background: var(--acento-fuerte); color: var(--acento-fuerte-texto); font-weight: 600;
}

/* Content wide: sin caja centrada de ancho maximo, el contenido ocupa todo el
   espacio disponible junto al sidebar. */
main { padding: 22px 24px 64px; width: 100%; }

/* --- Estructura: sidebar + navbar -------------------------------------------- */
.shell { display: flex; min-height: 100dvh; align-items: stretch; }

.sidebar {
  width: 250px; flex: none; background: var(--papel); border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}

.sidebar-marca { padding: 20px; border-bottom: 1px solid var(--linea); }
.sidebar-marca .logo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  text-decoration: none; color: var(--tinta);
  font-weight: 700; font-size: 16px; line-height: 1.25; font-family: var(--brand-font-display, inherit);
}
.sidebar-marca .logo .marca-img { width: 100%; max-width: 186px; }
.sidebar-marca .logo small {
  display: block; font-weight: 500; font-size: 10.5px; color: var(--tenue);
  letter-spacing: .09em; text-transform: uppercase;
}

/* --- La marca ---------------------------------------------------------------
   El logotipo lleva el texto en grafito y el subtitulo en gris: sobre el panel
   oscuro no se leeria. Por eso hay dos archivos y se elige con CSS, con las
   MISMAS tres reglas que el resto del tema (sistema, `data-tema="claro"` que lo
   excluye, `data-tema="oscuro"` que lo fuerza).

   Se hace con CSS y no con JavaScript a proposito: asi el logo correcto ya esta
   puesto en el primer pintado y no se ve el cambiazo al cargar.
   --------------------------------------------------------------------------- */
.marca-img { display: block; height: auto; }
.marca-img.es-oscuro { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca-img.es-claro { display: none; }
  :root:not([data-tema="claro"]) .marca-img.es-oscuro { display: block; }
}

:root[data-tema="oscuro"] .marca-img.es-claro { display: none; }
:root[data-tema="oscuro"] .marca-img.es-oscuro { display: block; }

/* El logo, sobre la tarjeta y centrado: es la marca de la casa, no un campo del
   formulario. Dentro de la tarjeta competia con el titulo de la pantalla.

   `max-width` en pixeles y no un porcentaje: en una pantalla ancha un logo al
   100% saldria desproporcionado sobre una tarjeta de 420 px. */
.marca-logo { display: block; width: 100%; max-width: 300px; margin: 0; }
.marca-logo .marca-img { width: 100%; }

@media (max-width: 380px) {
  .marca-logo { max-width: 240px; }
}

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

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--linea); }
  nav.pestanas { flex-direction: row; overflow-x: auto; padding: 10px 12px; }
}
section > h2 { font-size: 17px; margin-bottom: 3px; }
section > .sub { color: var(--tenue); font-size: 13.5px; margin: 0 0 18px; }

/* El titulo de la seccion y su accion principal, al mismo nivel: el boton no
   empuja el titulo, se alinea con el. */
.encabezado-seccion {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.encabezado-seccion h2 { font-size: 17px; margin: 0 0 3px; }
.encabezado-seccion .sub { color: var(--tenue); font-size: 13.5px; margin: 0; }
.encabezado-seccion .btn-corto { margin-top: 0; flex: none; }

.caja { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--sombra); }
.caja h3 { font-size: 15px; }

/* Los formularios de alta viven en un <dialog>: una tarea aparte, por encima
   de todo lo demas, y no una tarjeta mas compitiendo por la pantalla con la
   lista. Se abren con el boton de "controles"; panel.js sigue decidiendo con
   `hidden` quien tiene la capacidad de verlos siquiera. */
/* `position: fixed` y NO `relative`: el centrado de un <dialog> modal lo hace
   el navegador resolviendo `inset: 0` con margenes automaticos, y eso solo
   ocurre si la caja esta posicionada. Con `relative` la caja volvia al flujo
   del top layer y el centrado quedaba a merced del alto del contenido. */
/* ---------------------------------------------------------------------------
   LA MEDIDA DE UN DIÁLOGO

   Dos anchos y uno solo por defecto. Antes cada caja acababa con el ancho que
   le tocara —había una regla que la ensanchaba si por dentro llevaba una
   rejilla— y el resultado era que abrir dos formularios seguidos movía la caja
   de sitio y de tamaño sin que nada lo hubiera pedido.

   Ahora el tamaño se DECLARA en el diálogo (`data-tamano="amplio"`), no se
   deduce de lo que lleva dentro: así se ve en el blade, se elige a propósito y
   no cambia solo porque alguien añada un campo.

   El alto no se declara: crece con el contenido hasta un tope y a partir de ahí
   rueda el diálogo entero. Rueda el diálogo y no una caja interior a propósito
   —la lista de un Select2 se cuelga del diálogo, y si el que rodara fuera un
   trozo de dentro, esa lista se quedaría recortada o flotando en el sitio
   equivocado.
   --------------------------------------------------------------------------- */
dialog.caja {
  position: fixed; inset: 0; margin: auto;
  width: min(100% - 32px, var(--ancho-dialogo, 560px));
  max-height: min(86dvh, 900px);
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--tinta);
  /* El aire de arriba lo pone la cabecera, que va pegada. */
  padding: 0 22px 22px;
}

dialog.caja[data-tamano="amplio"] { --ancho-dialogo: 820px; }
dialog.caja[data-tamano="estrecho"] { --ancho-dialogo: 460px; }

/* El título y el pie se quedan a la vista mientras el cuerpo rueda: en un
   formulario largo, perder de vista qué se está creando —o el botón de
   guardar— obliga a subir y bajar para comprobarlo. */
dialog.caja > h3 {
  position: sticky; top: 0; z-index: 3;
  margin: 0 -22px 16px; padding: 18px 22px 13px;
  background: var(--papel); border-bottom: 1px solid var(--linea);
}

dialog.caja .acciones-dialogo {
  position: sticky; bottom: 0; z-index: 3;
  margin: 18px -22px -22px; padding: 14px 22px;
  background: var(--papel); border-top: 1px solid var(--linea);
}

/* El último bloque del cuerpo no pega con el pie. */
dialog.caja form > *:last-child { margin-bottom: 0; }

/* El ancho lo pide el formulario, no la caja. Uno de dos columnas necesita
   sitio para las dos; uno de una columna a 700 px deja media caja vacia y
   obliga a cruzar la pantalla para leer el rotulo de un campo. `:has()`
   pregunta por la rejilla, asi que cada formulario nuevo se ajusta solo. */


dialog.caja::backdrop { background: rgba(14, 17, 22, .55); }

/* El pie de un diálogo: la acción principal y Cancelar, siempre en el mismo
   sitio y en el mismo orden.

   Antes cada caja tenía una X arriba a la derecha y alguna además su propio
   Cancelar abajo: dos formas de irse, en sitios distintos según la pantalla.
   Se queda la de abajo, junto a la acción principal, que es donde ya está
   mirando quien acaba de decidir que no guarda. Esc sigue cerrando, que eso lo
   da el navegador y quitarlo sería peor que no tener botón. */
.acciones-dialogo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea);
}
.acciones-dialogo .btn, .acciones-dialogo .btn-corto { margin-top: 0; }
.acciones-dialogo .btn-min:hover { border-color: var(--tenue); color: var(--tinta); }

/* El boton que abre el dialogo desaparece junto con el, para quien no tiene
   la capacidad: :has() lo enlaza con el estado real del <dialog>, sin JS. */
body:has(#cajaAltaSolicitud[hidden]) [data-abrir-dialogo="cajaAltaSolicitud"],
body:has(#cajaAlta[hidden]) [data-abrir-dialogo="cajaAlta"],
body:has(#cajaAltaVulneracion[hidden]) [data-abrir-dialogo="cajaAltaVulneracion"],
body:has(#cajaAltaOperador[hidden]) [data-abrir-dialogo="cajaAltaOperador"] {
  display: none;
}

/* Los formularios de accion (actuar, notificar, tramitar) los inyecta
   panel.js dentro de estos contenedores estaticos. `:empty` ya reacciona sola
   a ese innerHTML: sin contenido no ocupan nada, con contenido se convierten
   en la misma capa modal que los formularios de alta. Cero JS nuevo. */
#accionSolicitud:not(:empty),
#accionDelegado:not(:empty),
#accionTratamiento:not(:empty),
#accionTercero:not(:empty),
#accionImportacion:not(:empty),
#accionVulneracion:not(:empty),
#accionObligacion:not(:empty) {
  position: fixed; inset: 0; z-index: 40; background: rgba(14, 17, 22, .55);
  display: flex; padding: 24px 16px; overflow-y: auto;
}

/* El centrado lo hace `margin: auto` dentro del flex, y no `align-items:
   center`, por una razon que solo se ve con un formulario largo: cuando el
   contenido es mas alto que la ventana, el centrado recorta el borde de
   arriba y el titulo deja de alcanzarse al hacer scroll. Un margen automatico
   se queda en cero cuando no sobra sitio, asi que la caja se pega arriba y la
   capa scrollea entera. */
#accionSolicitud:not(:empty) > .caja,
#accionDelegado:not(:empty) > .caja,
#accionTratamiento:not(:empty) > .caja,
#accionTercero:not(:empty) > .caja,
#accionImportacion:not(:empty) > .caja,
#accionVulneracion:not(:empty) > .caja,
#accionObligacion:not(:empty) > .caja {
  margin: auto; width: min(100%, 560px);
}

#accionSolicitud:not(:empty) > .caja:has(.rejilla),
#accionDelegado:not(:empty) > .caja:has(.rejilla),
#accionTratamiento:not(:empty) > .caja:has(.rejilla),
#accionTercero:not(:empty) > .caja:has(.rejilla),
#accionVulneracion:not(:empty) > .caja:has(.rejilla),
#accionObligacion:not(:empty) > .caja:has(.rejilla),
#accionSolicitud:not(:empty) > .caja:has(.casillas),
#accionDelegado:not(:empty) > .caja:has(.casillas),
#accionTratamiento:not(:empty) > .caja:has(.casillas),
#accionTercero:not(:empty) > .caja:has(.casillas),
#accionVulneracion:not(:empty) > .caja:has(.casillas),
#accionObligacion:not(:empty) > .caja:has(.casillas),
#accionSolicitud:not(:empty) > .caja:has(.literales),
#accionDelegado:not(:empty) > .caja:has(.literales),
#accionTratamiento:not(:empty) > .caja:has(.literales),
#accionTercero:not(:empty) > .caja:has(.literales),
#accionVulneracion:not(:empty) > .caja:has(.literales),
#accionObligacion:not(:empty) > .caja:has(.literales) {
  width: min(100%, 720px);
}

.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dato { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); }
.dato .n { font-size: 24px; font-weight: 600; line-height: 1.1; }
.dato .r { font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }

.fila {
  background: var(--papel); border: 1px solid var(--linea); border-left-width: 3px;
  border-radius: var(--radio); padding: 13px 16px; margin-bottom: 9px;
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  text-decoration: none; color: inherit; box-shadow: var(--sombra);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.fila:hover { border-color: var(--acento); box-shadow: 0 4px 12px rgba(14, 17, 22, .12); }
.fila .titulo { font-weight: 600; }
.fila .meta { color: var(--tenue); font-size: 12.5px; }
.fila .cuando { margin-left: auto; text-align: right; font-size: 13px; }

.nivel-vencido { border-left-color: var(--vencido); }
.nivel-critico { border-left-color: var(--critico); }
.nivel-proximo { border-left-color: var(--proximo); }
.nivel-en_plazo { border-left-color: var(--en-plazo); }

.etq {
  display: inline-block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; font-weight: 700;
  background: color-mix(in srgb, currentColor 16%, var(--papel));
}
.t-vencido { color: var(--vencido); }
.t-critico { color: var(--critico); }
.t-proximo { color: var(--proximo); }
.t-en_plazo { color: var(--en-plazo); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue);
  font-weight: 700; background: var(--fondo);
}
tbody tr:hover td { background: var(--acento-suave); }

/* --- Las listas del panel, en tabla ----------------------------------------

   Todas las pantallas que llevan un registro lo enseñan igual: una fila por
   expediente y una columna por dato. Se leen COMPARANDO —cuál vence antes, a
   cuál le falta el contrato—, y una columna pone el mismo dato siempre en la
   misma vertical.

   El nivel del plazo va como filo de color en la primera celda, con
   `box-shadow: inset` y no con `border-left`: con `border-collapse: collapse`
   un borde en la celda desplazaria el contenido de toda la columna. */
.tabla-lista tbody tr[data-ver],
.tabla-lista tbody tr[data-vul],
.tabla-lista tbody tr[data-actividad],
.tabla-lista tbody tr[data-tercero],
.tabla-lista tbody tr[data-obligacion] { cursor: pointer; }

.tabla-lista tbody tr:focus-visible {
  outline: none;
}
.tabla-lista tbody tr:focus-visible td {
  background: var(--acento-suave);
  box-shadow: inset 0 0 0 1px var(--acento);
}

.tabla-lista tbody tr.nivel-vencido td:first-child { box-shadow: inset 3px 0 0 var(--vencido); }
.tabla-lista tbody tr.nivel-critico td:first-child { box-shadow: inset 3px 0 0 var(--critico); }
.tabla-lista tbody tr.nivel-proximo td:first-child { box-shadow: inset 3px 0 0 var(--proximo); }
.tabla-lista tbody tr.nivel-en_plazo td:first-child { box-shadow: inset 3px 0 0 var(--en-plazo); }

/* La fila que se esta mirando queda marcada: sin esto, al recargarse la lista
   se pierde cual era la que estaba abierta abajo. */
.tabla-lista tbody tr[aria-current="true"] td {
  background: var(--acento-suave);
  font-weight: 500;
}

/* Las celdas de una lista no son parrafos: una sola linea de aire basta y
   cabe mas expediente en la pantalla. */
.tabla-lista td { vertical-align: top; line-height: 1.4; }

/* Una fecha partida por el guion —«2026-10-\n01»— se lee como dos cosas. Las
   fechas y los correlativos no se parten; el texto largo, si. */
.tabla-lista td .mono, .tabla-lista td .nb { white-space: nowrap; }
.tabla-lista td .etq { margin-top: 2px; }

/* Las tablas anchas se desplazan dentro de su caja; la pagina no. Con aspecto
   de ficha de datos: borde, esquinas redondeadas y sombra suave. */
.tabla-scroll {
  overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
}
.tabla-scroll table { margin: 0; }

/* Dentro de una ficha a dos columnas la tabla tiene menos sitio, y una de
   cinco columnas se estrujaba hasta partir las palabras. `.tabla-scroll` ya
   existe para esto: se le pone suelo a la tabla y, si no cabe, scrollea a lo
   ancho en vez de volverse ilegible. */
.ficha-cuerpo .tabla-scroll table { min-width: 480px; }
.tabla-scroll tbody tr:last-child td { border-bottom: 0; }

.cita { color: var(--tenue); font-size: 12.5px; }
.vacio { color: var(--tenue); padding: 22px; text-align: center; border: 1px dashed var(--linea); border-radius: var(--radio); }

.parametro { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 10px; }
.parametro-desc { margin: 5px 0; font-size: 13.5px; }

details { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 10px; }
summary { cursor: pointer; font-size: 13.5px; font-weight: 600; }

pre.json {
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 12px; overflow-x: auto; font-size: 12px; margin: 8px 0 0;
}

.controles { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pie { color: var(--tenue); font-size: 12px; text-align: center; padding: 22px 16px 0; }

/* --- Formularios del panel -------------------------------------------------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.btn-corto { width: auto; padding: 8px 18px; margin-top: 6px; }

/* Resultados de busqueda de la actividad economica. Con tope de altura y
   desplazamiento: la consulta devuelve hasta cincuenta y no debe empujar el
   boton de enviar fuera de la pantalla. */
.resultados {
  border: 1px solid var(--linea); border-radius: var(--radio);
  max-height: 240px; overflow-y: auto; margin-top: 6px; box-shadow: var(--sombra);
}
.resultados .resultado {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; border: 0; border-bottom: 1px solid var(--linea);
  background: none; color: inherit; font: inherit; line-height: 1.4;
}
.resultados .resultado:last-child { border-bottom: 0; }
.resultados .resultado:hover,
.resultados .resultado:focus-visible { background: var(--acento-suave); }
.resultados p { padding: 8px 10px; }

/* La clave temporal se muestra UNA vez: tiene que verse y poder copiarse sin
   esfuerzo, porque no hay segunda oportunidad. */
.clave-emitida {
  border: 1px solid var(--acento); border-radius: var(--radio);
  padding: 14px; margin-top: 14px; background: var(--acento-suave); box-shadow: var(--sombra);
}
.clave-emitida .valor {
  font-family: ui-monospace, monospace; font-size: 21px; letter-spacing: .12em;
  margin: 8px 0; word-break: break-all;
}
/* --- Qué toca ahora ---------------------------------------------------------
   Va arriba del expediente y pesa más que las cajas de debajo: es lo primero
   que hay que leer, y la razón por la que alguien abre esta pantalla. Fondo de
   acento y no una caja más, para que no se confunda con el resto de bloques. */
.siguiente {
  background: var(--acento-suave);
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--sombra);
}

.siguiente .rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
  color: var(--acento);
}

.siguiente p { margin: 0; font-size: 15px; }
.siguiente p.cita { font-size: 12.5px; }

/* Lo que espera a un tercero no se pinta como tarea propia. */
.siguiente.espera { background: transparent; border-style: dashed; }
.siguiente.espera .rotulo { color: var(--tenue); }

.siguiente.hecho { background: transparent; border-color: var(--linea); }
.siguiente.hecho .rotulo { color: var(--tenue); }

/* --- Escritura del expediente ARCO ------------------------------------------ */

/* Un campo con su botón al lado: el texto se estira, el botón conserva su
   tamaño. Sin el `min-width:0`, el input impone su ancho natural y el botón se
   sale de la caja en pantallas estrechas. */
.campo-con-boton { display: flex; gap: 6px; align-items: stretch; }
.campo-con-boton input { flex: 1; min-width: 0; }
.campo-con-boton .btn-min { flex: none; white-space: nowrap; }

.controles .filtro { width: auto; min-width: 260px; flex: 1; max-width: 420px; }

textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--papel); color: var(--tinta);
  font: inherit; resize: vertical; min-height: 84px; transition: border-color .15s ease, box-shadow .15s ease;
}
textarea:focus-visible {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent);
}

input[type=date], input[type=datetime-local] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--papel); color: var(--tinta); font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Las causales y requisitos van con su TEXTO, no como letras sueltas: marcar
   «d» a ciegas es lo que producía resoluciones citando el literal equivocado.
   Con tope de altura porque el Art. 22 tiene ocho y cada uno es una frase. */
.literales {
  border: 1px solid var(--linea); border-radius: var(--radio);
  max-height: 380px; overflow-y: auto;
}
.literales .literal {
  display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
  padding: 9px 11px; border-bottom: 1px solid var(--linea);
  font-weight: 400; font-size: 13.5px; margin: 0; line-height: 1.45;
}
.literales .literal:last-child { border-bottom: 0; }
.literales .literal:hover { background: var(--acento-suave); }
.literales .literal input { width: auto; margin-top: 3px; flex: none; }

.acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; }
.acciones-fila select { min-width: 0; width: auto; font-size: 12.5px; padding: 4px 6px; }

/* --- Codigo QR del segundo factor ------------------------------------------ */
.qr {
  display: block;
  width: 200px; height: 200px;
  max-width: 100%;
  margin: 4px auto 14px;
  /* Fondo claro SIEMPRE: un lector de QR necesita contraste entre modulos
     oscuros y fondo claro, y en tema oscuro el SVG quedaria ilegible. */
  background: #fff;
  padding: 10px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
}

/* --- Vulneraciones: el unico plazo que se cuenta en horas -------------------- */

/* Los dos relojes del Art. 25, juntos y arriba. Pesan mas que cualquier tabla
   de la pantalla porque son la razon por la que alguien la abre.

   El tiempo restante va en grande y el vencimiento debajo, en pequeno, y ese
   orden no es estetico: un vencimiento en horas escrito como fecha se lee como
   si quedara el dia entero. */
.relojes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}

.reloj {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left-width: 4px;
  border-radius: var(--radio);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--sombra);
}

/* El numero toma el color del nivel. En una pantalla que se mira de reojo
   mientras pasa otra cosa, el color llega antes que el texto. */
.reloj.nivel-vencido .quedan { color: var(--vencido); }
.reloj.nivel-critico .quedan { color: var(--critico); }
.reloj.nivel-proximo .quedan { color: var(--proximo); }

.reloj .rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--tenue);
}

.reloj .quedan { font-size: 22px; line-height: 1.25; }
.reloj .cita { font-size: 12px; }

/* --- La ficha de un expediente, en las seis pantallas que lo tienen --------

   El detalle a la izquierda; a la derecha, lo que urge y lo que se puede
   hacer. Nacio en Solicitudes y vive aqui, sin nombre de modulo, porque la
   pregunta es la misma en todas: que pasa con esto, y que hago ahora.

   La columna de la derecha no se mueve al bajar por el expediente: el plazo
   es lo que dice que escribir, y un plazo que se va de la pantalla mientras
   se rellena el formulario no sirve de nada. ------------------------------ */
.ficha-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-top: 26px;
}
.ficha-lateral {
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 84px; align-self: start;
  /* Un expediente con dos relojes, seis acciones y sus motivos puede pasar del
     alto de la ventana. Sin este tope, lo de abajo de la columna queda
     inalcanzable: `sticky` la clava y ya no scrollea con la pagina. */
  max-height: calc(100dvh - 104px); overflow-y: auto;
}

/* Dentro de la columna el hueco lo pone el `gap`: los margenes propios de cada
   tarjeta se suman a el y descuadran la pila. */
.ficha-lateral > .siguiente,
.ficha-lateral > .caja,
.ficha-lateral > .relojes { margin-bottom: 0; }

@media (max-width: 900px) {
  .ficha-cuerpo { grid-template-columns: 1fr; }
  .ficha-lateral { position: static; max-height: none; overflow: visible; }
}

/* El rotulo de seccion, centrado entre dos lineas: separa "esto es un
   expediente" del resto de la pantalla sin otra caja mas. */
.ficha-separador { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.ficha-separador::before, .ficha-separador::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.ficha-separador span {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--tenue);
}

.ficha-encabezado {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 10px;
}
.ficha-encabezado h3 { font-size: 18px; margin: 0 0 4px; }
.ficha-fundamento { text-align: right; }
.ficha-fundamento-rotulo {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 2px;
}
.ficha-fundamento-valor { font-size: 13.5px; font-weight: 600; }

.ficha-estado { margin: 0 0 18px; }

.ficha-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px;
  margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--linea);
}
.ficha-datos .ficha-dato-rotulo {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 3px;
}
.ficha-datos p { margin: 0; font-size: 13.5px; }

/* La linea de tiempo: un punto por hecho real, nunca uno inventado. El punto
   gris es lo unico que todavia no paso. */
.linea-tiempo { display: flex; flex-direction: column; }
.paso-tiempo { display: flex; gap: 14px; }
.paso-marca { display: flex; flex-direction: column; align-items: center; }
.paso-punto {
  width: 9px; height: 9px; border-radius: 999px; flex: none; margin-top: 4px;
  background: var(--acento-fuerte);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento-fuerte) 12%, transparent);
}
.paso-punto.pendiente {
  background: var(--tenue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tenue) 15%, transparent);
}
.paso-linea { width: 1px; flex: 1; background: var(--linea); margin: 4px 0; min-height: 22px; }
.paso-cuerpo { padding-bottom: 22px; }
.paso-tiempo:last-child .paso-cuerpo { padding-bottom: 0; }
.paso-titulo { font-size: 13.5px; font-weight: 600; margin: 0; }
.paso-detalle { font-size: 12px; color: var(--tenue); margin: 3px 0 0; }

/* El reloj vive con tinte de acento SIEMPRE: lo que cambia con la urgencia es
   solo el rotulo y la barra, igual que en el original. */
.reloj-cumplimiento {
  background: var(--acento-suave); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 20px;
}
.reloj-cumplimiento .reloj-rotulo {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--acento-fuerte);
}
.reloj-cumplimiento .reloj-rotulo .bx { font-size: 16px; }
.reloj-cumplimiento.nivel-critico .reloj-rotulo,
.reloj-cumplimiento.nivel-vencido .reloj-rotulo { color: var(--vencido); }

.reloj-cumplimiento .reloj-numero {
  font-size: 27px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums;
}
.reloj-cumplimiento .reloj-unidad {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tenue); margin-left: 5px;
}

.reloj-cumplimiento .reloj-barra {
  margin-top: 12px; height: 4px; border-radius: 999px; background: var(--linea); overflow: hidden;
}
.reloj-cumplimiento .reloj-barra span { display: block; height: 100%; border-radius: 999px; background: var(--acento-fuerte); }
.reloj-cumplimiento.nivel-critico .reloj-barra span,
.reloj-cumplimiento.nivel-vencido .reloj-barra span { background: var(--vencido); }

.reloj-cumplimiento .reloj-pie { margin: 10px 0 0; font-size: 10.5px; color: var(--tenue); }

/* Las acciones, apiladas y a ancho completo: se leen, no se escanean como una
   fila de chips. Prorrogar se distingue con el tinte del acento; Archivar va
   aparte porque cierra el expediente para siempre. */
.lista-acciones { display: flex; flex-direction: column; gap: 8px; }
.accion-boton {
  width: 100%; text-align: left; padding: 9px 14px; border-radius: var(--radio);
  border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta);
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.accion-boton:hover { background: var(--acento-suave); border-color: var(--acento); }
.accion-boton.accion-destacada {
  background: var(--acento-suave); border-color: var(--acento); color: var(--acento-fuerte); font-weight: 600;
}

.acciones-archivar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.accion-peligro {
  width: 100%; text-align: left; padding: 9px 14px; border-radius: var(--radio);
  border: 0; background: none; color: var(--vencido); font: inherit; font-size: 13.5px; cursor: pointer;
}
.accion-peligro:hover { background: color-mix(in srgb, var(--vencido) 10%, transparent); }

/* Casillas sugeridas. Mismo aspecto que la lista de literales de ARCO: es la
   misma clase de eleccion, marcar de una lista que NO es cerrada. */
.casillas {
  border: 1px solid var(--linea); border-radius: var(--radio);
  max-height: 260px; overflow-y: auto; margin-bottom: 6px;
}
.casillas .casilla {
  display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
  padding: 8px 11px; border-bottom: 1px solid var(--linea);
  font-weight: 400; font-size: 13.5px; margin: 0; line-height: 1.45;
}
.casillas .casilla:last-child { border-bottom: 0; }
.casillas .casilla:hover { background: var(--acento-suave); }
.casillas .casilla input { width: auto; margin-top: 3px; flex: none; }

/* Un destinatario por fila, con lo que le falta a su oficio y sus botones. */
/* `minmax(0, …)` en las dos columnas: sin eso, el estado del oficio —que trae
   la lista de literales que faltan— empujaba a la columna de la izquierda por
   debajo de su minimo y el nombre del destinatario se partia letra a letra.
   Con la ficha a dos columnas hay menos sitio, y ahi se vio. */
.destinatario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 200px);
  gap: 8px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
  align-items: start;
}
.destinatario:last-child { border-bottom: 0; }
.destinatario .estado-oficio { text-align: right; }
.destinatario .acciones-fila { grid-column: 1 / -1; }

/* El cuerpo del oficio, tal cual se va a mandar. Monoespaciado y respetando los
   saltos: es un documento, no un parrafo de la interfaz. */
.oficio {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
  max-height: 420px;
  overflow-y: auto;
}

/* En una sola columna por debajo de 900 px: la ficha ya no esta partida en dos
   ahi, pero el ancho util sigue siendo el de un movil o el de media pantalla. */
@media (max-width: 900px) {
  .destinatario { grid-template-columns: 1fr; }
  .destinatario .estado-oficio { text-align: left; }
}

/* --- La hoja imprimible ----------------------------------------------------- */

/* En pantalla se ve como una hoja dentro del panel; al imprimir, lo demas
   desaparece y queda solo esto. Es el mismo documento en los dos sitios, que es
   lo que evita la sorpresa al darle a imprimir. */
.hoja {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 34px 38px;
  max-width: 760px;
  margin: 14px auto 0;
  font-size: 14.5px;
  line-height: 1.7;
}

.hoja .membrete {
  border-bottom: 2px solid var(--tinta);
  padding-bottom: 10px;
  margin-bottom: 22px;
}

.hoja .membrete h1 { font-size: 19px; margin: 0 0 2px; letter-spacing: .01em; }
.hoja .membrete .cita { margin: 0; font-size: 12.5px; }

.hoja .lugar-fecha { text-align: right; margin: 0 0 22px; font-size: 13.5px; }

.hoja .titulo-doc {
  font-size: 16px; text-align: center; margin: 0 0 2px; text-transform: uppercase;
  letter-spacing: .04em;
}

.hoja .ref { text-align: center; margin: 0 0 24px; font-size: 13px; color: var(--tenue); }

/* El cuerpo tal cual se guardo: los saltos del texto son parte del documento. */
.hoja .cuerpo { white-space: pre-wrap; text-align: justify; }

/* El espacio de la firma va en blanco a proposito. */
.hoja .firma { margin-top: 56px; text-align: center; }
.hoja .firma .raya {
  width: 280px; max-width: 80%; margin: 0 auto 6px;
  border-bottom: 1px solid var(--tinta);
}
.hoja .firma .cita { margin: 0; font-size: 12.5px; }

.hoja .pie-doc {
  margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--linea);
  font-size: 11px; color: var(--tenue); text-align: center;
}

.documento-vista .controles { justify-content: flex-end; }

@media print {
  /* Fuera todo lo que es aplicacion y no documento. Si esto fallara, el papel
     saldria con la barra de navegacion y el boton de salir. */
  .barra, .pestanas, .pie, .controles, .no-imprimir, #errorPanel { display: none !important; }

  /* La impresora no tiene tema oscuro: tinta negra sobre papel blanco, siempre.
     Sin esto, en modo oscuro saldria una hoja gris con letra clara. */
  :root, body, .hoja {
    background: #fff !important;
    color: #000 !important;
  }

  main { padding: 0 !important; }

  .hoja {
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    max-width: none;
    margin: 0;
    font-size: 12pt;
  }

  .hoja .membrete { border-bottom-color: #000 !important; }
  .hoja .firma .raya { border-bottom-color: #000 !important; }
  .hoja .cita, .hoja .ref, .hoja .pie-doc { color: #333 !important; }

  /* Ni el membrete ni la firma se parten entre dos paginas. */
  .hoja .membrete, .hoja .firma { break-inside: avoid; }

  @page { margin: 2cm; }
}

/* --- La matriz de tratamientos ---------------------------------------------- */

/* De las seis cifras del resumen, solo dos señalan algo que hacer: los datos
   sensibles sin consentimiento acreditado y las actividades incompletas. Van
   marcadas para que se vea la diferencia entre describir y avisar. */
.dato.alerta .n { color: var(--critico); }
.dato.alerta .r { color: var(--critico); }

/* --- Terceros: las dos mitades del registro --------------------------------- */

/* Actividades y terceros viven en la misma pantalla porque son la misma
   pregunta partida en dos. Se distinguen de las pestanas del panel —que son
   URLs de verdad— con un aspecto mas ligero. */
.subpestanas {
  display: flex; gap: 4px; margin: 14px 0 10px;
  border-bottom: 1px solid var(--linea);
}

.subpestanas button {
  font: inherit; font-size: 14px; font-weight: 500;
  background: transparent; border: 0; color: var(--tenue);
  padding: 8px 14px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}

.subpestanas button:hover { color: var(--tinta); }
.subpestanas button[aria-selected="true"] {
  color: var(--acento); border-bottom-color: var(--acento);
}
.subpestanas button:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* Los dos roles, con su definicion. NO es un desplegable a proposito: la
   diferencia entre encargado y receptor decide si hace falta el consentimiento
   del Art. 40, y eso no se elige a ciegas de una lista. */
.roles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }

.opcion-rol {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 11px 13px; font-weight: 400; font-size: 13.5px; line-height: 1.5;
}
.opcion-rol:hover { border-color: var(--acento); }
.opcion-rol input { width: auto; margin-top: 3px; flex: none; }
.opcion-rol:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }

.exigencias { margin: 0 0 4px; padding-left: 20px; font-size: 13.5px; }
.exigencias li { margin-bottom: 4px; }

/* ---------------------------------------------------------------------------
   EL TABLERO (pantalla «Cola»)

   La forma viene del dashboard de logistica de Sneat —tarjetas con borde
   inferior de color y sombra tintada, avatar cuadrado con el icono, barra
   apilada con sus rotulos, listas con cifra a la derecha, linea de tiempo y
   tabla al pie—, pero escrita con los tokens de brand.css y sin Bootstrap.

   Por que no se trajo la plantilla entera: este panel no tiene build. Traer
   Bootstrap + el core de Sneat serian ~600 KB de CSS que redefinen body,
   tipografias y colores, y se llevarian por delante el tema claro/oscuro y la
   identidad de marca. Lo que se copia es el LENGUAJE VISUAL, no el framework.

   Cada color de estado es el mismo semaforo del resto del panel: --vencido,
   --critico, --proximo, --en-plazo. Nada nuevo que aprender.
   --------------------------------------------------------------------------- */

.tablero { display: block; }

/* --- Cabecera de la pantalla ------------------------------------------------ */
.tablero-cabecera { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.tablero-cabecera h2 { font-size: 17px; margin: 0 0 3px; }
.tablero-cabecera .sub { color: var(--tenue); font-size: 13.5px; margin: 0; max-width: 72ch; }
.tablero-sello {
  margin-left: auto; flex: none; font-size: 12px; color: var(--tenue);
  border: 1px solid var(--linea); border-radius: 999px; padding: 5px 12px;
  background: var(--papel); white-space: nowrap;
}
.tablero-sello .bx { font-size: 14px; vertical-align: -2px; margin-right: 4px; }

/* --- Avatar cuadrado con icono (el `avatar-initial` de la plantilla) -------- */
.avatar-etq {
  width: 36px; height: 36px; flex: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
  background: color-mix(in srgb, var(--acento) 16%, var(--papel));
  color: var(--acento-fuerte);
}
.avatar-etq.es-vencido { background: color-mix(in srgb, var(--vencido) 16%, var(--papel)); color: var(--vencido); }
.avatar-etq.es-critico { background: color-mix(in srgb, var(--critico) 18%, var(--papel)); color: var(--critico); }
.avatar-etq.es-proximo { background: color-mix(in srgb, var(--proximo) 16%, var(--papel)); color: var(--proximo); }
.avatar-etq.es-en_plazo { background: color-mix(in srgb, var(--en-plazo) 16%, var(--papel)); color: var(--en-plazo); }
.avatar-etq.es-espera { background: color-mix(in srgb, var(--tenue) 18%, var(--papel)); color: var(--tenue); }

/* --- Las cuatro (cinco) cifras de arriba ------------------------------------ */
.tablero-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 18px;
}

/* El `card-border-shadow-*` de Sneat: el color no invade la tarjeta, solo la
   firma por abajo y tiñe la sombra. */
.kpi {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 15px 16px 14px;
  border-bottom: 2px solid var(--linea);
  box-shadow: var(--sombra);
  transition: box-shadow .18s ease, transform .18s ease;
}
.kpi:hover { transform: translateY(-2px); }
.kpi-cifra { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kpi-cifra .n { font-size: 25px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-rotulo { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; }
.kpi-pie { margin: 0; font-size: 12px; color: var(--tenue); }
.kpi-pie strong { font-weight: 600; color: var(--tinta); }

.kpi.es-vencido { border-bottom-color: var(--vencido); box-shadow: 0 2px 10px color-mix(in srgb, var(--vencido) 22%, transparent); }
.kpi.es-critico { border-bottom-color: var(--critico); box-shadow: 0 2px 10px color-mix(in srgb, var(--critico) 22%, transparent); }
.kpi.es-proximo { border-bottom-color: var(--proximo); box-shadow: 0 2px 10px color-mix(in srgb, var(--proximo) 22%, transparent); }
.kpi.es-en_plazo { border-bottom-color: var(--en-plazo); box-shadow: 0 2px 10px color-mix(in srgb, var(--en-plazo) 22%, transparent); }
.kpi.es-espera { border-bottom-color: var(--tenue); box-shadow: 0 2px 10px color-mix(in srgb, var(--tenue) 20%, transparent); }

/* --- La rejilla de tarjetas -------------------------------------------------- */
.tablero-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tablero-rejilla > .ancho-6 { grid-column: span 6; }
.tablero-rejilla > .ancho-4 { grid-column: span 4; }
.tablero-rejilla > .ancho-8 { grid-column: span 8; }
.tablero-rejilla > .ancho-12 { grid-column: span 12; }

@media (max-width: 1200px) {
  .tablero-rejilla > .ancho-6,
  .tablero-rejilla > .ancho-4,
  .tablero-rejilla > .ancho-8 { grid-column: span 12; }
}

/* La tarjeta con cabecera, como el `card > card-header` de la plantilla. */
.panel-tarjeta {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); display: flex; flex-direction: column; min-width: 0;
}
.panel-tarjeta > .cabecera {
  padding: 16px 18px 0; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.panel-tarjeta > .cabecera h3 { font-size: 15px; margin: 0; }
.panel-tarjeta > .cabecera .cita { display: block; margin-top: 2px; }
.panel-tarjeta > .cabecera .contador {
  margin-left: auto; font-size: 12px; color: var(--tenue); white-space: nowrap;
}
.panel-tarjeta > .cuerpo { padding: 16px 18px 18px; flex: 1; min-width: 0; }
.panel-tarjeta > .cuerpo.sin-aire { padding: 0; }

/* --- Barra apilada con sus rotulos (vehicles overview) ---------------------- */
.barra-rotulos { display: flex; margin-bottom: 10px; font-size: 12.5px; color: var(--tenue); }
.barra-rotulos .rotulo-tramo { position: relative; padding-bottom: 14px; min-width: 0; }
.barra-rotulos .rotulo-tramo span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-rotulos .rotulo-tramo::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 2px; height: 9px; background: var(--linea);
}

.barra-estados {
  display: flex; height: 44px; border-radius: 8px; overflow: hidden;
  background: var(--fondo); border: 1px solid var(--linea); margin-bottom: 16px;
}
.barra-estados .tramo {
  display: flex; align-items: center; padding: 0 10px; font-size: 13px; font-weight: 600;
  color: #fff; white-space: nowrap; overflow: hidden; min-width: 0;
}
.barra-estados .tramo.es-vencido { background: var(--vencido); }
.barra-estados .tramo.es-critico { background: var(--critico); color: #1b1200; }
.barra-estados .tramo.es-proximo { background: var(--proximo); }
.barra-estados .tramo.es-en_plazo { background: var(--en-plazo); color: #06230f; }

/* Tabla ligera dentro de una tarjeta: sin bordes exteriores, solo separadores. */
.tabla-suelta { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-suelta td { padding: 9px 0; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla-suelta tr:last-child td { border-bottom: 0; }
.tabla-suelta .nombre { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.tabla-suelta .nombre .bx { font-size: 17px; color: var(--tenue); }
.tabla-suelta .der { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-suelta .der.fuerte { font-weight: 600; }

/* --- Barras horizontales por modulo (el chart de la plantilla, sin libreria) - */
.barras { display: flex; flex-direction: column; gap: 14px; }
.barras .barra-fila { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.barras .barra-nombre { font-size: 13.5px; display: flex; align-items: center; gap: 7px; min-width: 0; }
.barras .barra-nombre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras .barra-nombre .bx { font-size: 16px; color: var(--tenue); flex: none; }
.barras .barra-valor { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.barras .barra-carril {
  grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--fondo);
  border: 1px solid var(--linea); overflow: hidden;
}
.barras .barra-carril i { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.barras .barra-carril i.es-vencido { background: var(--vencido); }
.barras .barra-carril i.es-critico { background: var(--critico); }
.barras .barra-carril i.es-proximo { background: var(--proximo); }
.barras .barra-carril i.es-en_plazo { background: var(--en-plazo); }

/* --- La rosca (reasons for delivery exceptions) ------------------------------ */
.dona-bloque { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dona {
  --hueco: 62%;
  width: 148px; height: 148px; flex: none; border-radius: 50%;
  position: relative; background: var(--linea);
}
.dona::after {
  content: ''; position: absolute; inset: 19%; border-radius: 50%; background: var(--papel);
}
.dona-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 1;
}
.dona-centro .n { font-size: 24px; font-weight: 700; line-height: 1; }
.dona-centro .r { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); margin-top: 3px; }

.leyenda { display: flex; flex-direction: column; gap: 9px; min-width: 150px; flex: 1; }
.leyenda .clave { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.leyenda .clave .punto { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--tenue); }
.leyenda .clave .punto.es-vencido { background: var(--vencido); }
.leyenda .clave .punto.es-critico { background: var(--critico); }
.leyenda .clave .punto.es-proximo { background: var(--proximo); }
.leyenda .clave .punto.es-en_plazo { background: var(--en-plazo); }
.leyenda .clave .n { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Lista con cifra a la derecha (delivery performance) --------------------- */
.lista-cifras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.lista-cifras li { display: flex; align-items: flex-start; gap: 11px; }
.lista-cifras .texto { min-width: 0; flex: 1; }
.lista-cifras .texto h6 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.lista-cifras .texto small { font-size: 12px; color: var(--tenue); display: block; line-height: 1.4; }
.lista-cifras .texto h6 a { color: var(--tinta); text-decoration: none; }
.lista-cifras .texto h6 a:hover { color: var(--acento-fuerte); }
.lista-cifras .cifra {
  flex: none; max-width: 104px; text-align: right; font-size: 12.5px; font-weight: 600;
  line-height: 1.35; color: var(--tinta);
}

/* --- Linea de tiempo de la espera (orders by countries) ---------------------- */
.envios { list-style: none; margin: 0; padding: 0; }
.envios > li { padding: 14px 18px; border-bottom: 1px dashed var(--linea); }
.envios > li:last-child { border-bottom: 0; }
.envio-hito { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.envio-hito:last-child { padding-bottom: 0; }
.envio-hito .marca { flex: none; width: 26px; display: flex; justify-content: center; position: relative; }
.envio-hito .marca .bx { font-size: 17px; z-index: 1; background: var(--papel); }
.envio-hito:not(:last-child) .marca::after {
  content: ''; position: absolute; top: 20px; bottom: -8px; width: 0;
  border-left: 1px dashed var(--linea);
}
.envio-hito.es-origen .marca .bx { color: var(--en-plazo); }
.envio-hito.es-destino .marca .bx { color: var(--proximo); }
.envio-hito .rotulo {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.envio-hito.es-origen .rotulo { color: var(--en-plazo); }
.envio-hito.es-destino .rotulo { color: var(--proximo); }
.envio-hito h6 { margin: 3px 0 2px; font-size: 13.5px; font-weight: 600; }
.envio-hito p { margin: 0; font-size: 12.5px; color: var(--tenue); }

/* --- La tabla del pie (on route vehicles) ----------------------------------- */
.tabla-tablero { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-tablero thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); font-weight: 700; padding: 12px 14px; border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea); background: var(--fondo); white-space: nowrap;
}
.tabla-tablero td { padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla-tablero tbody tr:last-child td { border-bottom: 0; }
.tabla-tablero tbody tr { cursor: pointer; transition: background-color .12s ease; }
.tabla-tablero tbody tr:hover { background: var(--acento-suave); }
.tabla-tablero tbody tr:focus-within { background: var(--acento-suave); }
.tabla-tablero tbody tr.es-vencido td:first-child { box-shadow: inset 3px 0 0 var(--vencido); }
.tabla-tablero tbody tr.es-critico td:first-child { box-shadow: inset 3px 0 0 var(--critico); }
.tabla-tablero tbody tr.es-proximo td:first-child { box-shadow: inset 3px 0 0 var(--proximo); }
.tabla-tablero tbody tr.es-en_plazo td:first-child { box-shadow: inset 3px 0 0 var(--en-plazo); }
.tabla-tablero .celda-asunto { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tabla-tablero .celda-asunto a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.tabla-tablero .celda-asunto a:hover { color: var(--acento-fuerte); }
.tabla-tablero .celda-asunto .meta { display: block; font-weight: 400; font-size: 12px; color: var(--tenue); }
.tabla-tablero .semaforo { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.tabla-tablero .semaforo .carril {
  flex: 1; height: 6px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--linea); overflow: hidden;
}
.tabla-tablero .semaforo .carril i { display: block; height: 100%; border-radius: 999px; background: var(--tenue); }
.tabla-tablero .semaforo .carril i.es-vencido { background: var(--vencido); }
.tabla-tablero .semaforo .carril i.es-critico { background: var(--critico); }
.tabla-tablero .semaforo .carril i.es-proximo { background: var(--proximo); }
.tabla-tablero .semaforo .carril i.es-en_plazo { background: var(--en-plazo); }

.tabla-tablero .nb { white-space: nowrap; }

.tabla-envoltura { overflow-x: auto; }
.tabla-envoltura .tabla-tablero { min-width: 780px; }

/* En movil las cifras siguen siendo lo primero y la tabla se desliza sola. */
@media (max-width: 640px) {
  .tablero-sello { margin-left: 0; }
  .dona-bloque { justify-content: center; }
}

/* ---------------------------------------------------------------------------
   DataTables, con la ropa del panel

   ESPECIFICIDAD: la hoja del CDN escribe `div.dt-container div.dt-search input`
   —tres clases y un elemento— y un `.dt-container input` de aquí pierde por
   mucho que se cargue después. Por eso cada regla de abajo repite la misma
   forma larga: no es manía, es lo único que hace que el tema gane.

   Los nombres son los de DataTables 2 (`dt-container`, `dt-search`, `dt-paging`,
   `dt-layout-row`…). Si algún día se sube de versión mayor, este bloque es lo
   que hay que revisar.
   --------------------------------------------------------------------------- */
div.dt-container { font-size: 13.5px; color: var(--tinta); width: 100%; }

/* --- Las dos filas de mandos ------------------------------------------------ */
div.dt-container div.dt-layout-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
  padding: 12px 0;
}
div.dt-container div.dt-layout-cell { padding: 0; }
div.dt-container div.dt-layout-cell.dt-layout-end { margin-left: auto; text-align: right; }
div.dt-container div.dt-layout-cell.dt-layout-full { width: 100%; }

/* La fila de abajo se separa de la tabla con la misma raya que separa las filas
   entre sí: sin ella, el recuento y el paginador parecian sueltos en el aire. */
div.dt-container div.dt-layout-row:last-child { border-top: 1px solid var(--linea); }

/* Los mandos, a plomo con la primera columna.

   Toda tabla del panel vive dentro de un marco —la tarjeta del tablero o la
   caja de una lista—, y dentro de ese marco el contenido guarda 18 px. Los
   mandos guardan los mismos, así que el buscador, la cabecera de la tabla y el
   recuento caen todos en la misma vertical. */
.cuerpo.sin-aire div.dt-container > div.dt-layout-row:not(.dt-layout-table),
.tabla-envoltura div.dt-container > div.dt-layout-row:not(.dt-layout-table),
.tabla-scroll div.dt-container > div.dt-layout-row:not(.dt-layout-table) { padding-left: 18px; padding-right: 18px; }

/* El desplazamiento horizontal pasa a la fila de la tabla. Mientras vivía en el
   contenedor de fuera, el buscador y el paginador se iban de viaje con ella al
   arrastrar de lado. */
.tabla-scroll:has(div.dt-container),
.tabla-envoltura:has(div.dt-container) { overflow: hidden; }
/* La fila que lleva la tabla va SIEMPRE a sangre: el aire lo ponen las celdas,
   no el contenedor. Con relleno aquí, la tabla se metía hacia dentro y dejaba
   una franja vacía entre el marco y su primera columna. */
div.dt-container div.dt-layout-row.dt-layout-table { display: block; padding: 0 !important; overflow-x: auto; }
div.dt-container div.dt-layout-row.dt-layout-table > div.dt-layout-cell { width: 100%; }

/* --- Buscador y «ver N filas» ----------------------------------------------- */
div.dt-container div.dt-length,
div.dt-container div.dt-search { display: flex; align-items: center; gap: 7px; margin: 0; }

div.dt-container div.dt-length label,
div.dt-container div.dt-search label {
  margin: 0; color: var(--tenue); font-size: 12.5px; font-weight: 600;
}

div.dt-container div.dt-length select,
div.dt-container div.dt-search input {
  padding: 7px 10px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); font: inherit; font-size: 13.5px;
  width: auto; min-width: 0; margin: 0; box-shadow: none; outline: none;
}
div.dt-container div.dt-search input { min-width: 230px; }
div.dt-container div.dt-search input::placeholder { color: var(--tenue); }

div.dt-container div.dt-length select:focus,
div.dt-container div.dt-search input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent);
}

/* --- Recuento y paginador --------------------------------------------------- */
div.dt-container div.dt-info { color: var(--tenue); font-size: 12.5px; padding: 0; margin: 0; }

div.dt-container div.dt-paging { margin: 0; }
div.dt-container div.dt-paging button.dt-paging-button {
  display: inline-block; padding: 6px 12px; margin: 0 0 0 4px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); font-size: 13px; line-height: 1.3;
  box-shadow: none; cursor: pointer;
}
div.dt-container div.dt-paging button.dt-paging-button:hover:not(.disabled):not(.current) {
  background: var(--acento-suave); border-color: var(--acento); color: var(--tinta);
}
div.dt-container div.dt-paging button.dt-paging-button.current,
div.dt-container div.dt-paging button.dt-paging-button.current:hover {
  background: var(--acento-fuerte); border-color: var(--acento-fuerte);
  color: var(--acento-fuerte-texto); font-weight: 600;
}
div.dt-container div.dt-paging button.dt-paging-button.disabled,
div.dt-container div.dt-paging button.dt-paging-button.disabled:hover {
  background: var(--papel); color: var(--tenue); border-color: var(--linea);
  opacity: .5; cursor: default;
}
div.dt-container div.dt-paging button.dt-paging-button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent);
}

/* --- La tabla --------------------------------------------------------------- */
div.dt-container table.dataTable { border-collapse: collapse; width: 100%; margin: 0; }

div.dt-container table.dataTable > thead > tr > th,
div.dt-container table.dataTable > thead > tr > td {
  background: var(--fondo); color: var(--tenue);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
div.dt-container table.dataTable > tbody > tr { background: transparent; }
div.dt-container table.dataTable > tbody > tr > td,
div.dt-container table.dataTable > tbody > tr > th { border-bottom: 1px solid var(--linea); }
div.dt-container table.dataTable > tbody > tr:last-child > td { border-bottom: 0; }
div.dt-container table.dataTable > tbody > tr:hover > * { box-shadow: none; background: var(--acento-suave); }

/* El sombreado que DataTables pone en la columna ordenada tapa el color de
   nivel de la fila —vencido, crítico— y aquí ese color es información. */
div.dt-container table.dataTable > tbody > tr > .sorting_1,
div.dt-container table.dataTable > tbody > tr > .sorting_2,
div.dt-container table.dataTable > tbody > tr > .sorting_3 { background: transparent; box-shadow: none; }

div.dt-container table.dataTable > thead > tr > th.dt-orderable-asc:hover,
div.dt-container table.dataTable > thead > tr > th.dt-orderable-desc:hover {
  background: var(--acento-suave); color: var(--tinta); outline: none;
}
div.dt-container table.dataTable > thead > tr > th.dt-ordering-asc,
div.dt-container table.dataTable > thead > tr > th.dt-ordering-desc { color: var(--acento-fuerte); }
div.dt-container table.dataTable th.dt-orderable-asc span.dt-column-order:before,
div.dt-container table.dataTable th.dt-orderable-desc span.dt-column-order:after { opacity: .3; }
div.dt-container table.dataTable th.dt-ordering-asc span.dt-column-order:before,
div.dt-container table.dataTable th.dt-ordering-desc span.dt-column-order:after { opacity: 1; }

div.dt-container table.dataTable td.dt-empty {
  color: var(--tenue); padding: 22px; text-align: center; background: transparent;
}

/* --- Aire a los lados ------------------------------------------------------- */
/* La primera y la última columna respiran lo mismo que el marco que las
   contiene. Pegado al borde, el texto parecía salirse de la caja — y con el
   marco tan cerca, la raya de la tabla y la del marco se leían como un borde
   doble. */
.tabla-tablero th:first-child, .tabla-tablero td:first-child,
.tabla-scroll th:first-child, .tabla-scroll td:first-child { padding-left: 18px; }
.tabla-tablero th:last-child, .tabla-tablero td:last-child,
.tabla-scroll th:last-child, .tabla-scroll td:last-child { padding-right: 18px; }

/* --- Un marco, no dos -------------------------------------------------------
   La pantalla de la cola es la referencia: UNA tarjeta alrededor y la tabla a
   sangre dentro. Donde una `.tabla-scroll` —que trae marco propio— cae dentro
   de una `.caja` —que también lo trae—, se veían los dos, uno pegado al otro.

   Gana el de fuera: la tabla suelta el suyo y se estira hasta el borde de la
   caja con un margen negativo del ancho de su relleno, que es justo lo que hace
   que la tabla del tablero llegue de lado a lado.
   --------------------------------------------------------------------------- */
.caja > .tabla-scroll,
.caja > h3 + .tabla-scroll {
  border: 0; border-radius: 0; box-shadow: none;
  margin-left: -20px; margin-right: -20px; width: auto;
}
.caja > .tabla-scroll th:first-child, .caja > .tabla-scroll td:first-child { padding-left: 20px; }
.caja > .tabla-scroll th:last-child, .caja > .tabla-scroll td:last-child { padding-right: 20px; }
.caja > .tabla-scroll div.dt-container > div.dt-layout-row:not(.dt-layout-table) { padding-left: 20px; padding-right: 20px; }

/* La última fila no lleva raya: la del marco —o la del pie con el paginador—
   ya está ahí, y las dos juntas son el borde doble que se veía. */
.tabla-scroll table > tbody > tr:last-child > td,
.tabla-envoltura table > tbody > tr:last-child > td { border-bottom: 0; }

@media (max-width: 640px) {
  div.dt-container div.dt-layout-cell.dt-layout-end { margin-left: 0; text-align: left; }
  div.dt-container div.dt-search { width: 100%; }
  div.dt-container div.dt-search input { flex: 1; min-width: 0; }
  .cuerpo.sin-aire div.dt-container > div.dt-layout-row:not(.dt-layout-table),
  .tabla-envoltura div.dt-container > div.dt-layout-row:not(.dt-layout-table),
  .tabla-scroll div.dt-container > div.dt-layout-row:not(.dt-layout-table) { padding-left: 14px; padding-right: 14px; }
}

/* Al imprimir no hay paginador que valga: el papel lleva la tabla, no los
   mandos para recorrerla. */
@media print {
  div.dt-container div.dt-layout-row:not(.dt-layout-table) { display: none !important; }
}

/* ---------------------------------------------------------------------------
   La banda del calendario (pantalla de obligaciones)

   La forma viene del «Academy dashboard» de la plantilla: una banda de
   bienvenida sin marco, con las cifras en línea a la izquierda y un indicador
   separado por una raya a la derecha; debajo, la rejilla de tarjetas.

   Aquí no hay marco porque no es una tarjeta más: es el encabezado de la
   pantalla, y enmarcarlo lo pondría al mismo nivel que los bloques que sí lo
   son.
   --------------------------------------------------------------------------- */
.banda { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-bottom: 20px; }
.banda h2 { font-size: 19px; margin: 0 0 4px; }
.banda .sub { color: var(--tenue); font-size: 13.5px; margin: 0 0 18px; max-width: 62ch; }

.banda-cifras { display: flex; gap: 28px; flex-wrap: wrap; }
.banda-cifra { display: flex; align-items: center; gap: 11px; }
.banda-cifra p { margin: 0; font-size: 12.5px; color: var(--tenue); }
.banda-cifra .n { display: block; font-size: 20px; font-weight: 700; line-height: 1.15; }
.banda-cifra .n.es-vencido { color: var(--vencido); }
.banda-cifra .n.es-critico { color: var(--critico); }
.banda-cifra .n.es-en_plazo { color: var(--en-plazo); }

/* La raya que parte la banda en dos, como el `card-separator` de la plantilla:
   a la izquierda lo que hay, a la derecha cómo va. */
.banda-medida {
  border-left: 1px solid var(--linea); padding-left: 24px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.banda-medida h5 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.banda-medida .cita { margin: 0 0 10px; display: block; }
.banda-medida .grande { font-size: 26px; font-weight: 700; line-height: 1.1; }
.banda-medida .grande small { color: var(--tenue); font-weight: 500; font-size: 15px; }

@media (max-width: 900px) {
  .banda { grid-template-columns: 1fr; }
  .banda-medida { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); padding-top: 18px; }
}

/* --- La rosca pequeña, una por fila ----------------------------------------
   El «chart-progress» de la plantilla, sin librería: un conic-gradient con el
   agujero pintado encima y la cifra dentro. */
.dona-mini {
  --valor: 0;
  display: inline-block; width: 44px; height: 44px; flex: none;
  border-radius: 50%; position: relative;
  background: conic-gradient(var(--color, var(--acento)) calc(var(--valor) * 1%), var(--linea) 0);
}
.dona-mini::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--papel);
}
.dona-mini span {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dona-mini.es-vencido { --color: var(--vencido); }
.dona-mini.es-critico { --color: var(--critico); }
.dona-mini.es-proximo { --color: var(--proximo); }
.dona-mini.es-en_plazo { --color: var(--en-plazo); }

/* --- La etiqueta de la derecha en las listas -------------------------------- */
.pastilla {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--fondo); border: 1px solid var(--linea);
  font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--tenue);
}
.pastilla.es-vencido { color: var(--vencido); border-color: color-mix(in srgb, var(--vencido) 45%, var(--linea)); }
.pastilla.es-critico { color: var(--critico); border-color: color-mix(in srgb, var(--critico) 45%, var(--linea)); }
.pastilla.es-proximo { color: var(--proximo); border-color: color-mix(in srgb, var(--proximo) 45%, var(--linea)); }
.pastilla.es-en_plazo { color: var(--en-plazo); border-color: color-mix(in srgb, var(--en-plazo) 45%, var(--linea)); }

/* --- La tarjeta de acción (el «webinar» de la plantilla) -------------------- */
.tarjeta-accion .cuerpo { display: flex; flex-direction: column; gap: 12px; }
.tarjeta-accion .cartel {
  background: var(--acento-suave); border-radius: var(--radio);
  padding: 22px; text-align: center; color: var(--acento-fuerte);
}
.tarjeta-accion .cartel .bx { font-size: 40px; }
.tarjeta-accion .cartel .n { display: block; font-size: 28px; font-weight: 700; line-height: 1.2; }
.tarjeta-accion .cuerpo .btn { margin-top: auto; }

/* ---------------------------------------------------------------------------
   El registro de tratamientos (forma del «Analytics dashboard»)

   Dos piezas que aquel tablero tiene y el de la cola no: la tarjeta ancha de
   cabecera y la tarjeta partida en dos por una raya, con el reparto a un lado y
   su medida al otro.
   --------------------------------------------------------------------------- */
.tarjeta-cabecera .cuerpo { display: flex; flex-direction: column; gap: 14px; }
.tarjeta-cabecera h3 { font-size: 17px; margin: 0; }
.tarjeta-cabecera .cita { margin: 0; max-width: 62ch; }
/* Las cifras al pie de la tarjeta: arriba queda el texto y abajo el dato, que
   es como se lee la tarjeta ancha de la plantilla —texto, y la acción al final. */
.tarjeta-cabecera .banda-cifras { margin-top: auto; }

/* La columna de la derecha: dos tarjetas de cifra apiladas, como las pequeñas
   de la plantilla. Ocupan lo mismo que la ancha de al lado. */
.columna-cifras { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.columna-cifras .kpi-suelto { flex: 1; }
.columna-cifras .kpi-suelto .cuerpo { padding: 16px 18px; }
.columna-cifras .kpi-rotulo { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; }
.columna-cifras .kpi-pie { margin: 0; font-size: 12px; color: var(--tenue); }
.columna-cifras .cita { margin: 0; }

/* El borde inferior de color, igual que las cifras del tablero: el color firma
   la tarjeta, no la invade. */
.kpi-suelto.es-vencido { border-bottom: 2px solid var(--vencido); }
.kpi-suelto.es-critico { border-bottom: 2px solid var(--critico); }

/* La tarjeta partida. En la plantilla es `row-bordered`: una raya vertical
   separa el gráfico de su resumen. Debajo de 900 px la raya pasa a horizontal,
   porque en una columna un borde izquierdo no separa nada. */
.panel-tarjeta > .cuerpo.partido {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 230px); gap: 20px;
}
.panel-tarjeta > .cuerpo.partido .lateral {
  border-left: 1px solid var(--linea); padding-left: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: center;
}
.panel-tarjeta > .cuerpo.partido .lateral .dona { margin: 0 auto; }
.panel-tarjeta > .cuerpo.partido .lateral .cita { margin: 0; }

@media (max-width: 900px) {
  .panel-tarjeta > .cuerpo.partido { grid-template-columns: 1fr; }
  .panel-tarjeta > .cuerpo.partido .lateral {
    border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); padding-top: 18px;
  }
}

/* La rejilla del tablero admite un bloque suelto —las cifras de terceros van en
   una rejilla propia dentro de una celda— sin que se rompa la alineación. */
.tablero-rejilla > .tablero-kpis { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   La insignia de estado

   Un estado no es una palabra más de la fila: es lo que se busca al mirar. Va
   en mayúsculas, con fondo tenue del color que le toca y el texto en ese mismo
   color, para que se lea de lejos sin gritar como lo haría un fondo sólido.

   Las mayúsculas las pone el CSS y no el texto. Lo que se copia de la pantalla
   sigue siendo «prevenida», y un lector de pantalla lo lee como palabra en vez
   de deletrearlo.

   Los colores son el mismo semáforo del resto del panel: nada nuevo que
   aprender. El gris —`fin`— es a propósito el color de lo que terminó bien:
   una actividad cesada no es una alarma.
   --------------------------------------------------------------------------- */
.insignia {
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.5;
  text-transform: uppercase; white-space: nowrap;
  color: var(--tenue);
  /* Mismo fondo que `.etq`, la etiqueta que ya usaba el panel: una sola forma
     de chip en toda la aplicación, y el color lo pone `currentColor`. */
  background: color-mix(in srgb, currentColor 16%, var(--papel));
}

.insignia.es-ok { color: var(--en-plazo); }
.insignia.es-malo { color: var(--vencido); }
.insignia.es-aviso { color: var(--critico); }
.insignia.es-curso { color: var(--proximo); }
.insignia.es-fin { color: var(--tenue); }

/* Dentro de una celda, la insignia no arrastra la línea de al lado. */
.tabla-lista td .insignia, .tabla-tablero td .insignia { margin-top: 2px; }

/* En la ficha va a la altura del texto que la introduce («Estado: PREVENIDA»). */
.ficha-estado .insignia { vertical-align: 0; }

/* ---------------------------------------------------------------------------
   Select2, con la ropa del panel

   Misma historia que con DataTables: la hoja del CDN trae sus grises y su azul,
   y aquí manda el tema. Se repiten las mismas formas largas —`.select2-container
   --default .select2-selection--single`— porque así es como escribe sus reglas
   la librería y de otro modo ganan las suyas.

   La altura y el radio se copian del `<select>` de siempre para que un
   desplegable con buscador y uno sin él no se vean como dos controles
   distintos.
   --------------------------------------------------------------------------- */
.select2-container { width: 100% !important; max-width: 100%; }
.controles .select2-container { width: auto !important; min-width: 240px; max-width: 420px; }

.select2-container--default .select2-selection--single {
  /* Las mismas medidas que `input`/`select` del panel: un campo con buscador y
     uno sin él no pueden verse como dos controles distintos en la misma fila. */
  height: auto; min-height: 42px; padding: 10px 12px; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--papel); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--tinta); line-height: 1.35; padding: 0; font: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--tenue); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%; top: 0; right: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--tenue); }

/* Abierto o con el foco puesto: el mismo anillo que cualquier campo del panel. */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent);
}

/* La lista que se despliega. */
.select2-container--default .select2-dropdown {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); overflow: hidden; margin-top: 4px;
}
/* Cuando la lista se abre hacia arriba, el aire va del otro lado. */
.select2-container--default .select2-dropdown--above { margin-top: 0; margin-bottom: 4px; }
.select2-container--default .select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo);
  color: var(--tinta); padding: 8px 10px; font: inherit; font-size: 13.5px; outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--acento);
}

.select2-container--default .select2-results__option {
  color: var(--tinta); padding: 9px 12px; font-size: 13.5px; background: transparent;
}

/* --- Lo elegido y lo señalado -----------------------------------------------
   Select2 pinta las dos cosas con tintes pastel propios, y en el panel «lo
   elegido» ya tiene una forma: fondo de acento fuerte y texto invertido — la
   pestaña activa del menú, la página actual del paginador, el botón principal
   de un formulario. La lista de un desplegable no tiene por qué inventarse otra.

   Se separan a propósito:
   - ELEGIDA: la que está puesta en el campo. Acento fuerte, se ve de un vistazo
     al abrir la lista, que es justo lo que se busca al abrirla.
   - SEÑALADA: sobre la que está el cursor o el teclado. Tinte suave, el mismo
     de cualquier fila viva del panel.

   Si coinciden —abrir la lista y pasar por encima de la que ya estaba— manda la
   elegida: dos fondos claros seguidos harían dudar de cuál está puesta.
   --------------------------------------------------------------------------- */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--acento-suave); color: var(--tinta);
}

/* `--selected` es Select2 4.1; `aria-selected` cubre 4.0 por si algún día se
   baja de versión. */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
  background: var(--acento-fuerte); color: var(--acento-fuerte-texto); font-weight: 600;
}

.select2-container--default .select2-results__message { color: var(--tenue); }
/* La lista, acotada a lo que cabe: con doscientos países, 260 px o el 40 % de
   la pantalla —lo que sea menor— y el resto rueda dentro de la propia lista.
   Dentro de un diálogo, además, nunca pasa de la mitad de su alto. */
.select2-container--default .select2-results > .select2-results__options {
  max-height: min(260px, 40dvh); overscroll-behavior: contain;
}
dialog .select2-container--default .select2-results > .select2-results__options {
  max-height: min(240px, 34dvh);
}

/* Dentro de un <dialog> modal, la lista se cuelga del propio diálogo (lo hace
   selects.js). Esto la deja por encima de lo demás del diálogo. */
dialog .select2-container { z-index: 10; }

/* Al imprimir, el documento lleva el valor, no el control. */
@media print { .select2-container { display: none !important; } }

/* --- Los datos del segundo factor, cuando se teclea en vez de escanear ------
   Dos columnas: el nombre del campo tal como lo pregunta la aplicación y el
   valor listo para copiar. El valor va en monoespaciada porque son cifras y
   claves, donde un cero y una O no pueden parecerse. */
.datos-totp {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  margin: 12px 0 18px; font-size: 12.5px;
}
.datos-totp dt { color: var(--tenue); font-weight: 600; }
.datos-totp dd {
  margin: 0; color: var(--tinta); overflow-wrap: anywhere;
  font-family: var(--brand-font-mono, ui-monospace), monospace;
}

/* ---------------------------------------------------------------------------
   Importar la matriz desde Excel

   El informe es ancho: tres hojas, y en cada fila qué se hará y por qué. Se
   lee de arriba abajo, así que cada hoja es una lista y no una tabla de diez
   columnas que obligue a hacer scroll lateral.
   --------------------------------------------------------------------------- */
#accionImportacion:not(:empty) > .caja { width: min(100%, 860px); }

.importacion-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.importacion-cifras .dato { padding: 10px 12px; }
.importacion-cifras .dato .n { font-size: 20px; }

.importacion-hoja { margin-top: 16px; }
.importacion-hoja > h4 { font-size: 13.5px; margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.importacion-filas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio); }
.importacion-filas > li { padding: 8px 12px; border-top: 1px solid var(--linea); display: grid; grid-template-columns: 56px 1fr auto; gap: 4px 12px; align-items: start; }
.importacion-filas > li:first-child { border-top: 0; }
.importacion-filas .num { color: var(--tenue); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.importacion-filas .que { min-width: 0; }
.importacion-filas .que strong { overflow-wrap: anywhere; }
.importacion-filas .que ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; }
.importacion-filas .que .error { color: var(--vencido); }
.importacion-filas .que .aviso-fila { color: var(--critico); }
.importacion-filas .que .cita { margin: 2px 0 0; }
.importacion-filas > li.con-error { background: color-mix(in srgb, var(--vencido) 6%, transparent); }

@media (max-width: 560px) {
  .importacion-filas > li { grid-template-columns: 1fr auto; }
  .importacion-filas .num { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Siguiente paso sugerido

   Arriba de la columna lateral de la ficha, antes del reloj: es lo primero que
   hay que mirar. Usa la tarjeta `.siguiente` que ya tienen el Delegado y las
   vulneraciones, para que «qué toca ahora» se vea igual en todo el panel.
   --------------------------------------------------------------------------- */
.siguiente.sugerencia { gap: 6px; }
.siguiente.sugerencia .sug-titulo { font-size: 15px; margin: 0; }
.siguiente.sugerencia .sug-etiquetas { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.siguiente.sugerencia .acciones-fila { margin-top: 4px; }
.sug-apoyo { margin: 2px 0 0; padding-left: 16px; font-size: 12.5px; }
.sug-apoyo li { margin: 2px 0; }
.sug-citas { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.sug-citas span {
  font-size: 11.5px; color: var(--tenue); border: 1px solid var(--linea);
  border-radius: 999px; padding: 1px 8px;
}
.sug-otras { margin-top: 8px; border-top: 1px solid var(--linea); padding-top: 8px; }
.sug-otras > summary { cursor: pointer; font-size: 12.5px; color: var(--tenue); }
.sug-otra { border-top: 1px dashed var(--linea); padding-top: 8px; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sug-otra .sug-titulo { font-size: 14px; }
.sug-pie { font-size: 11.5px !important; color: var(--tenue); margin-top: 6px !important; }
.sug-literales { border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px 12px; }
.sug-literales legend { font-size: 13px; padding: 0 4px; }
.sug-literales label { display: block; margin: 4px 0; font-size: 13px; }

/* --- Siguiente paso con IA (fase 2) ---------------------------------------- */
.sug-ia {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  font-size: 10px; letter-spacing: .06em; color: var(--papel); background: var(--acento);
  vertical-align: 1px;
}
.siguiente.sugerencia.refinando .sug-titulo { opacity: .75; }
.sug-refinando { animation: sug-pulso 1.4s ease-in-out infinite; }
@keyframes sug-pulso { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sug-refinando { animation: none; } }
.sug-categoria { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--linea); font-size: 13px; }
.sug-categoria label { font-size: 12px; color: var(--tenue); }
.sug-categoria input { min-width: 0; }
.sug-redactado { color: var(--acento) !important; }

/* Opcion B: la vista previa de lo que saldria hacia el modelo. Mas ancha que
   un formulario: se lee texto corrido y una tabla de sustituciones. */
#accionSolicitud:not(:empty) > .caja.sug-previa,
#accionVulneracion:not(:empty) > .caja.sug-previa { width: min(100%, 760px); }
.sug-escrito { margin: 12px 0; }
.sug-escrito-rotulo { font-size: 12px; color: var(--tenue); margin: 0 0 4px; font-weight: 600; }
.sug-texto {
  white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; padding: 10px 12px;
  border: 1px solid var(--linea); border-radius: 8px; max-height: 260px; overflow-y: auto;
}
mark.sug-marca {
  background: color-mix(in srgb, var(--acento, #14b8a6) 18%, transparent); color: inherit;
  border-radius: 4px; padding: 0 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
}
.sug-tabla-marcas td { vertical-align: top; font-size: 12.5px; }
.sug-tabla-marcas td:nth-child(3) { word-break: break-word; }

/* Ficha del Delegado: a donde le llegan los avisos por correo. */
.nota-avisos { margin: 10px 0 4px; font-size: 13px; }
.nota-avisos .rotulo { margin-right: 6px; }

/* Avisos por correo: filtros en una fila y la tabla. */
.filtros-fila { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.filtros-fila .campo { margin: 0; min-width: 170px; }
.tabla-avisos td { font-size: 13px; }
.tabla-avisos td.mono { white-space: nowrap; }

/* Un aviso que acaba de cambiar de estado (pendiente → enviado) se resalta
   un momento al recargarse solo la lista. */
@keyframes aviso-cambio { from { background: color-mix(in srgb, var(--acento) 22%, transparent); } to { background: transparent; } }
.tabla-avisos tr.aviso-cambio td { animation: aviso-cambio 3s ease-out; }
@media (prefers-reduced-motion: reduce) { .tabla-avisos tr.aviso-cambio td { animation: none; background: color-mix(in srgb, var(--acento) 12%, transparent); } }

/* Tipo de titular: el campo de «Otra…» va justo debajo del selector. */
.mt-min { margin-top: 6px; }

/* Datos del titular del formulario publico: lo que escribio, tal cual. */
.texto-libre { margin: 0 0 10px; max-width: 72ch; overflow-wrap: anywhere; }
#cajaDatosTitular .rotulo .bx { vertical-align: -2px; }

/* --- Pendiente de su aprobacion ---------------------------------------------
   Tarjetas y no tabla: lo que se lee es el porque de la propuesta, y en una
   celda no cabe. Lo que pide atencion lleva el borde de color a la izquierda,
   como las filas vencidas del tablero.
   --------------------------------------------------------------------------- */
.pend-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 8px; }
.pend-cifra {
  display: flex; align-items: baseline; gap: 8px; padding: 12px 16px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: 13.5px; color: var(--tenue);
}
.pend-cifra .n { font-family: var(--brand-font-display, inherit); font-size: 26px; font-weight: 700; color: var(--tinta); }
.pend-cifra.es-en_plazo .n { color: var(--en-plazo); }
.pend-cifra.es-critico .n { color: var(--critico); }
.pend-cifra.es-proximo .n { color: var(--proximo); }

.pend-lista { display: flex; flex-direction: column; gap: 12px; }
.pend-tarjeta {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 16px 18px; box-shadow: var(--sombra);
}
.pend-tarjeta.con-atencion { box-shadow: inset 3px 0 0 var(--critico), var(--sombra); }
.pend-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pend-cabecera h3 { font-size: 16px; margin: 0 0 2px; }
.pend-propuesta { margin: 12px 0 0; padding: 12px 14px; background: var(--fondo); border-radius: var(--radio); }
.pend-titulo { margin: 0 0 4px; font-weight: 600; }
.pend-porque { margin: 0 0 6px; font-size: 14px; max-width: 80ch; }
.rotulo-min {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tenue); margin-right: 4px;
}
.pend-tarjeta a.btn { text-decoration: none; display: inline-block; text-align: center; }
.pend-tarjeta .aviso { border-left-color: var(--critico); }
@media (max-width: 520px) {
  .pend-resumen { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .pend-cifra { flex-direction: column; gap: 0; padding: 10px; font-size: 12px; }
}

/* Notas «Para tener en cuenta» del siguiente paso: a la vista, debajo de la
   accion principal, no plegadas entre las alternativas. */
.sug-notas { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--linea); }
.sug-notas .rotulo-min { display: block; margin-bottom: 6px; }

/* Enlace copiable (consulta al responsable) */
.fila-enlace { display: flex; gap: 8px; align-items: center; }
.fila-enlace input { flex: 1; min-width: 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; }