/* ==========================================================================
   FacturaKey — hoja base: tipografia, tokens y el DOCUMENTO del contrato.
   Lo que vive aqui es lo unico que carga contrato.php, la pagina publica del
   QR, que suele abrirse desde un telefono con datos moviles. El cromo de la
   aplicacion (barra, botones, tarjetas, formularios) vive en panel.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fuentes autoalojadas. Sin CDN a proposito (ARQUITECTURA.md §4): el sitio
   debe funcionar aunque un tercero caiga. Subconjunto Latin-1, que cubre
   acentos, ñ, comillas tipograficas y rayas; lo que quede fuera cae al stack
   de respaldo sin romper nada. font-display:swap para que el texto se lea
   desde el primer pintado.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/assets/fuentes/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/assets/fuentes/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/assets/fuentes/IBMPlexSerif-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/assets/fuentes/IBMPlexMono-Regular.woff2') format('woff2');
}

:root {
  /* Color. --azul es el azul institucional del sistema; si cambia aqui,
     tiene que cambiar tambien la constante AZUL de assets/pdf.js, o el PDF
     descargado sale con otro color de marca que la pagina. */
  --tinta:        #111820;
  --tinta-suave:  #4a5561;
  --tinta-tenue:  #6f7b87;
  --azul:         #12467f;
  --azul-hondo:   #0c3159;
  --acento:       #2b7cd3;
  --papel:        #ffffff;
  --fondo:        #f4f2ee;
  --fondo-hundido:#eae6df;
  --borde:        #d8d3c9;
  --borde-fuerte: #b9b2a5;
  --verde:        #0a6b34;
  --verde-tenue:  #e6f2ea;
  --ambar:        #8a6100;
  --ambar-tenue:  #fdf3dd;
  --rojo:         #a02418;
  --rojo-tenue:   #fbeceb;

  /* Tipografia */
  --sans:  'IBM Plex Sans', ui-sans-serif, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'IBM Plex Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Escala de espaciado (base 4px) */
  --e1: .25rem; --e2: .5rem;  --e3: .75rem; --e4: 1rem;
  --e5: 1.5rem; --e6: 2rem;   --e7: 3rem;   --e8: 4rem;

  --radio:   4px;
  --radio-g: 8px;
  --sombra:   0 1px 2px rgba(17,24,32,.06), 0 2px 8px rgba(17,24,32,.05);
  --sombra-g: 0 2px 4px rgba(17,24,32,.05), 0 12px 32px rgba(17,24,32,.09);
  --ancho-hoja: 820px;
}

* { box-sizing: border-box; }

body {
  font: 400 15px/1.6 var(--sans);
  color: var(--tinta);
  margin: 0;
  padding: var(--e6) var(--e4);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Anillo de foco unico y visible en todo el sitio. Accesibilidad real:
   el panel de firma se recorre entero con teclado. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acento); }

/* --------------------------------------------------------------------------
   EL DOCUMENTO. .hoja es la hoja de papel del contrato: se mantiene sobria a
   proposito, porque es un documento con validez legal que ademas se imprime y
   se replica en el PDF vectorial de pdf.js.
   -------------------------------------------------------------------------- */
.hoja {
  max-width: var(--ancho-hoja);
  margin: 0 auto var(--e5);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra);
  padding: var(--e7) var(--e6);
}

.membrete {
  text-align: center;
  padding-bottom: var(--e4);
  margin-bottom: var(--e6);
  border-bottom: 2px solid var(--azul);
}
.membrete h1 {
  font: 600 13px/1.4 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 var(--e2);
}
.membrete p { margin: 0; font-size: 12px; color: var(--tinta-tenue); }

.hoja h2 {
  font: 600 21px/1.3 var(--serif);
  color: var(--azul);
  text-align: center;
  margin: var(--e6) 0 var(--e4);
}
.hoja h3 {
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azul);
  text-align: left;
  margin: var(--e6) 0 var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--borde);
}
.hoja p { margin: 0 0 var(--e3); font-size: 14px; color: var(--tinta-suave); }
.hoja p strong { color: var(--tinta); }

/* Tablas del contrato */
table { width: 100%; border-collapse: collapse; margin-bottom: var(--e4); font-size: 13px; }
th, td {
  border: 1px solid var(--borde);
  padding: var(--e2) var(--e3);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--fondo-hundido);
  font-weight: 600;
  color: var(--tinta);
}
td { background: var(--papel); }

/* Etiqueta pequeña sobre el dato, dentro de una celda */
.etq {
  display: block;
  font: 600 10px/1.4 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 2px;
}

.der    { text-align: right; font-variant-numeric: tabular-nums; }
.centro { text-align: center; }
.nota   { font-size: 12px; color: var(--tinta-tenue); }

/* Bloque del sello digital: es dato criptografico, va en monoespaciada */
.sello-caja {
  border: 1px solid var(--borde);
  border-left: 3px solid var(--azul);
  background: var(--fondo);
  border-radius: var(--radio);
  padding: var(--e4);
  margin-top: var(--e6);
  font-size: 12px;
}
.sello-caja table { margin-bottom: var(--e3); }
.sello-caja td { font-family: var(--mono); font-size: 11.5px; }
.sello-caja dt {
  font: 600 10px/1.4 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-top: var(--e3);
}
.sello-caja dd {
  margin: var(--e1) 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--tinta-suave);
  word-break: break-all;
}

/* Cabeza del bloque de sello: QR a la izquierda, datos a la derecha. */
.sello-cabeza { display: flex; gap: var(--e4); align-items: flex-start; }
.sello-cabeza table { flex: 1; margin-bottom: 0; }
.qr { margin: 0; flex: 0 0 150px; text-align: center; }
.qr canvas {
  width: 150px; height: 150px; display: block;
  /* El navegador omite fondos e imagenes al imprimir salvo que se le pida lo
     contrario. Sin esto el QR sale en blanco justo en el papel, que es donde
     mas falta hace. */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.qr figcaption {
  font: 400 9px/1.3 var(--mono); color: var(--tinta-tenue);
  margin-top: var(--e2); word-break: break-all;
}

/* Avisos dentro del documento: cancelado, sustituido, sustituye a. */
.aviso-documento {
  border: 1px solid; border-left-width: 4px; border-radius: var(--radio);
  padding: var(--e3) var(--e4); margin-bottom: var(--e5); font-size: 13.5px;
}
.aviso-documento strong { display: block; margin-bottom: var(--e1); }
.aviso-documento.cancelado  { color: var(--rojo);  background: var(--rojo-tenue);  border-color: var(--rojo); }
.aviso-documento.sustituido { color: var(--ambar); background: var(--ambar-tenue); border-color: var(--ambar); }
.aviso-documento.sustituye  { color: var(--azul);  background: var(--fondo);       border-color: var(--azul); }

@media (max-width: 520px) {
  .sello-cabeza { flex-direction: column; align-items: center; }
}

/* --------------------------------------------------------------------------
   Impresion. .no-imprimir marca todo lo que es interfaz y no documento.
   -------------------------------------------------------------------------- */
@media print {
  body { padding: 0; background: #fff; }
  .no-imprimir { display: none !important; }
  .hoja {
    max-width: none; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
  }
  a { color: inherit; text-decoration: none; }
  .sello-caja { background: #fff; }
  .aviso-documento { background: #fff !important; }
}

@media (max-width: 720px) {
  body { padding: var(--e3) var(--e2); }
  .hoja { padding: var(--e5) var(--e4); border-radius: var(--radio); }
  .hoja h2 { font-size: 18px; }
  th, td { padding: var(--e2); }
  /* Direcciones de correo y domicilios largos no tienen donde partirse por
     omision y empujan la columna. */
  td { overflow-wrap: anywhere; }
}

/* Pantallas muy angostas. Las tablas del contrato tienen tres columnas de
   datos y no bajan de unos 320px por mucho que se reduzca el relleno: es la
   estructura del documento, no un problema de estilos. Antes de eso, lo que
   se rompia era la PAGINA ENTERA -toda la hoja se iba a la derecha y el texto
   se salia del borde-, asi que la tabla pasa a desplazarse sola dentro de su
   caja. El documento sigue completo y legible; el que manda de todos modos es
   el PDF.
   display:block convierte la tabla en una caja de bloque con una tabla
   anonima dentro: el desplazamiento funciona y la maquetacion de filas y
   columnas se conserva. */
@media (max-width: 520px) {
  .hoja table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}