/* ═══════════════════════════════════════════════════════════════════════════
   fnadigital.co · CAPA DE ENTREGA NOMINAL
   Marca de confidencialidad, créditos de autoría y encuadre del mapa.

   Por qué existe como capa y no como edición del HTML: la entrega es nominal
   —un destinatario, una fecha, una firma— y eso caduca; el expediente no. Todo
   lo que aquí se añade lo inserta portada.js en runtime, de modo que retirar
   dos etiquetas devuelve el sitio a su estado neutro sin tocar una sola vista.

   Se carga DESPUÉS de tema.css. Sólo reclama tres cosas del cromo existente
   (el desplazamiento del body, de la nav pegajosa y del drawer) y las reclama
   con la misma especificidad que el <style> en línea del index: gana el orden.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Altura real de la barra. portada.js la mide y la reescribe: en móvil el
     rótulo legal se parte en dos o tres líneas y un valor fijo dejaría la nav
     pegajosa montada encima. El valor de aquí es sólo el arranque, para que no
     haya salto entre el primer pintado y la primera medida. */
  --pt-conf-h: 30px;
  --pt-borde: color-mix(in srgb, var(--alerta, #993a2e) 30%, transparent);
}

/* ══════════════════════ 1 · BARRA DE CONFIDENCIALIDAD ══════════════════════ */

/* Fija, no pegajosa: la marca de un documento clasificado no puede depender de
   dónde esté el scroll.

   z-index 100, y el número no es decorativo: el sitio tiene DOS cajones y dos
   velos —el del expediente (#drawer 70 · #backdrop 65) y el de Decisiones
   (#dc-ficha 91 · #dc-velo 90)—. A 90 la barra quedaba empatada con el velo de
   Decisiones y, por ir antes en el documento, perdía: abrir una ficha de la
   portada tapaba la advertencia con un velo al 72%. Por encima de los cuatro
   —mientras haya algo en pantalla, la advertencia está— y a cambio los dos
   cajones se desplazan (§2) para no perder su botón de cierre. */
.pt-conf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(244, 246, 249, .93));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  /* El filete inferior es el único uso de rojo: no grita, marca. */
  box-shadow: 0 1px 0 var(--pt-borde), 0 12px 26px -22px rgba(16, 36, 64, .35);
}

/* Cinta rayada en los extremos, como el borde de una carpeta clasificada.
   Va a un alfa muy bajo: se percibe al borde del campo visual y nunca compite
   con el texto. Se retira en pantallas estrechas, donde no queda margen. */
.pt-conf::before,
.pt-conf::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 84px;
  pointer-events: none;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--alerta, #993a2e) 22%, transparent) 0 1px,
    transparent 1px 9px);
}
.pt-conf::before {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}
.pt-conf::after {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent);
  mask-image: linear-gradient(270deg, #000, transparent);
}

.pt-conf-in {
  max-width: var(--ancho, 1280px);
  margin: 0 auto;
  padding: 8px 32px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-stretch: 78%;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  /* 5,0:1 sobre el blanco de la barra. El terciario del tema (--texto3, 4,1:1)
     no llega a AA a este cuerpo, y este rótulo es la advertencia legal del
     documento: no puede ser el texto menos legible de la página. */
  color: var(--gris, #3f4e60);
}

/* Cuadrado, no círculo ni punto luminoso: el vocabulario del tema reserva el
   disco lleno para «vigente» y el hueco para «cancelado». Esto no es un estado
   de proceso, es una marca de documento, y por eso tiene forma propia. */
.pt-conf-m {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--alerta, #993a2e);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--alerta, #993a2e) 14%, transparent);
}

/* Flujo de texto, no flex. Con flex cada frase y cada separador eran ítems
   independientes: al partirse el rótulo en móvil, una línea podía empezar por
   un «·» huérfano. En flujo normal el punto viaja pegado a su frase —portada.js
   lo antecede de un espacio duro— y ninguna línea arranca con el separador.
   min-width:0 deja que el bloque de texto se estreche dentro del flex padre en
   vez de desbordarlo. */
.pt-conf-t { flex: 1 1 auto; min-width: 0; }
.pt-conf-t b { color: var(--alerta-txt, #993a2e); font-weight: 550; }
.pt-conf-sep { color: var(--gris2, #5c6b7e); }

/* ══════════════════════ 2 · SITIO DESPLAZADO ══════════════════════ */

/* Cuatro piezas del cromo asumen que el borde superior de la ventana está
   libre. Se les descuenta la barra en vez de superponerla. */
body { padding-top: var(--pt-conf-h); }
nav.tabs { top: var(--pt-conf-h); }
#drawer { top: var(--pt-conf-h); }

/* La ficha de la vista Decisiones. Va con `body` delante y no suelta como las
   tres de arriba porque su regla `top:0` no vive en el <style> del index —que
   siempre precede a esta hoja— sino en un <style> que decisiones-app.js inyecta
   en tiempo de ejecución, igual que portada.js inyecta ésta: entre dos hojas
   añadidas por script el orden no está garantizado, y a igual especificidad
   ganaría la última en llegar. Un selector más específico no depende del orden.
   Sin esto, la cabecera de la ficha —con su botón de cerrar— queda debajo de la
   barra en el único sitio del que ya no se puede salir con la tecla de escape
   si el foco se perdió. */
body #dc-ficha { top: var(--pt-conf-h); }

/* El sitio navega con anclas y `scroll-behavior:smooth`: sin esto el destino
   de cada salto queda medio metido bajo la barra y bajo la nav pegajosa. */
html { scroll-padding-top: calc(var(--pt-conf-h) + 56px); }

/* ══════════════════════ 3 · CRÉDITOS DE LA ENTREGA ══════════════════════ */

/* Cuatro celdas con la misma gramática que la .ficha de cabecera —rejilla de
   filetes de 1px, rótulo monoespaciado arriba, dato debajo— pero sobre
   --superficie en vez de --fondo: es una placa apoyada sobre la página, no
   parte del papel. Así se lee como identificación del documento y no como un
   indicador más del expediente. */
.pt-creditos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
  gap: 1px;
  margin-top: 26px;
  background: var(--linea2, rgba(20, 46, 82, .065));
  border: 1px solid var(--linea, rgba(20, 46, 82, .13));
  border-radius: var(--radio, 4px);
  overflow: hidden;                 /* la rejilla dibuja sus filetes con gap: sin recorte, las esquinas se muerden */
  box-shadow: var(--elev-1);
}
.pt-cred {
  background: var(--superficie, #ffffff);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-cred dt {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-stretch: 78%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris2, #5c6b7e);
}
.pt-cred dd {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-stretch: 78%;
  font-variant-numeric: tabular-nums;
  color: var(--texto, #101720);
  line-height: 1.35;
}
/* El cargo del destinatario va en la sans y en el gris de cuerpo: es aposición
   del nombre, no un dato con el mismo rango. */
.pt-cred .pt-cargo {
  display: block;
  margin-top: 5px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 11.5px;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--texto2, #3f4e60);
  line-height: 1.45;
}

/* La clasificación es lo único de la placa que lleva color, y lo lleva con
   etiqueta de texto al lado: el color nunca es el portador del estado. */
.pt-clas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--alerta, #993a2e) 36%, transparent);
  background: color-mix(in srgb, var(--alerta, #993a2e) 9%, transparent);
  color: var(--alerta-txt, #993a2e);
  border-radius: 2px;
  white-space: nowrap;
}
.pt-clas::before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  flex-shrink: 0;
}

/* ══════════════════════ 4 · ENCUADRE DEL MAPA ══════════════════════ */

/* Filete cian, no ámbar: el ámbar es el eje de lo verificado —el expediente— y
   el cian el de lo prospectivo. Este párrafo no aporta un dato más; dice desde
   dónde se lee todo lo demás, y eso mira hacia adelante. */
#pt-encuadre {
  margin-top: 22px;
  max-width: 72ch;
  border-left: 2px solid color-mix(in srgb, var(--pipeline, #145786) 60%, transparent);
  padding-left: 17px;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--texto2, #3f4e60);
}
#pt-encuadre .pt-rot {
  display: block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-stretch: 78%;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pipeline-txt, #145786);
  margin-bottom: 8px;
}
#pt-encuadre b { color: var(--texto, #101720); font-weight: 600; }

/* ══════════════════════ 5 · ESTRECHO ══════════════════════ */

@media (max-width: 760px) {
  .pt-conf::before, .pt-conf::after { display: none; }
  .pt-conf-in { padding: 7px 20px; gap: 9px; letter-spacing: .12em; }
  /* El texto legal se parte en varias líneas y la barra crece: portada.js
     remide y --pt-conf-h se ajusta sola. Ninguna línea se oculta —una
     advertencia recortada deja de ser una advertencia. */
  .pt-creditos { grid-template-columns: 1fr; }
  #pt-encuadre { font-size: 14px; padding-left: 14px; }
}

/* ══════════════════════ 6 · IMPRESIÓN ══════════════════════ */

/* Una copia impresa o en PDF sigue siendo la copia de alguien. La marca encabeza
   la impresión y la filigrana lleva el nombre del destinatario: si el documento
   circula, se sabe de qué copia salió.

   Estas reglas no dan por supuesto el color del papel, y ésa es la corrección
   importante. El sitio es oscuro: si el usuario imprime CON gráficos de fondo,
   el papel sale casi negro y un gris #444 sobre negro no se lee; si imprime SIN
   ellos, el papel sale blanco y el texto claro del tema desaparece. La barra y
   la filigrana son justo las dos piezas que no pueden depender de esa casilla
   del diálogo de impresión, así que la barra pinta su propia placa opaca con
   `print-color-adjust: exact` —que obliga al navegador a imprimir el relleno
   aunque los fondos estén desactivados— y la filigrana usa un gris medio, que
   es el único valor legible tanto sobre blanco como sobre negro. */
.pt-marca { display: none; }

@media print {
  .pt-conf {
    /* Placa blanca propia, no `background:none`: sobre el fondo oscuro del
       sitio, «ninguno» significaba texto gris sobre casi negro. */
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid #999;
  }
  .pt-conf::before, .pt-conf::after { display: none; }
  .pt-conf-in { color: #333; padding: 6px 12px; }
  .pt-conf-t b { color: #000; }
  .pt-conf-m { background: #b3281a; }
  .pt-conf-sep { color: #888; }

  /* La placa de créditos, igual: identifica el documento y tiene que salir
     legible en las dos configuraciones de impresión. */
  .pt-creditos {
    background: #ccc;
    border-color: #999;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pt-cred {
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pt-cred dt { color: #555; }
  .pt-cred dd { color: #000; }
  .pt-cred .pt-cargo { color: #444; }
  .pt-clas { color: #a3241a; border-color: #a3241a; background: none; }

  .pt-marca {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    font-family: var(--mono, monospace);
    font-size: 34px;
    letter-spacing: .24em;
    text-transform: uppercase;
    /* Gris medio translúcido: se lee como filigrana tanto sobre el papel
       blanco de la impresión como sobre el fondo del sitio. Un negro a alfa
       bajo funcionaba sólo en el primer caso. */
    color: rgba(128, 128, 128, .3);
    transform: rotate(-32deg);
    text-align: center;
  }
}

/* ══════════════════════ 7 · MOVIMIENTO CERO ══════════════════════ */

/* Esta capa no anima nada por sí misma; la regla existe para que siga siendo
   verdad si alguien añade una transición más adelante. */
@media (prefers-reduced-motion: reduce) {
  .pt-conf, .pt-creditos, #pt-encuadre, .pt-marca,
  .pt-conf *, .pt-creditos *, #pt-encuadre * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}