/* Acordis — la hoja.
   Estilo único de todo documento que el sistema emite: contrato, recibo,
   liquidación, la hoja que lee el firmante y la vista previa del wizard.
   Requiere acordis-app.css (tokens y sellos) cargada antes.

   Principios:
   - Lo que se ve en pantalla es lo que sale de la impresora: misma medida,
     mismos tamaños, mismo membrete. La hoja mide en pantalla lo que mide
     en papel.
   - Fraunces solo en el título del documento y en los encabezados de
     bloque. El cuerpo va en Public Sans a 11pt con medida de lectura.
   - Mono en lo que se coteja: folio, montos, fechas, huella.
   - El estatus se estampa. Un contrato sin firmas no puede parecer firmado. */

.hoja {
  --hoja-pad: clamp(24px, 5.5vw, 56px);
  position: relative;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-paper);
  box-shadow: 0 0 0 1px var(--doc-edge), 0 2px 4px -2px var(--doc-shadow), 0 22px 44px -20px var(--doc-shadow);
  max-width: 820px; margin: 0 auto 40px;
  padding: var(--hoja-pad);
  font-family: var(--font-ui); font-size: 11pt; line-height: 1.55;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 4;
  orphans: 3; widows: 3;
}
/* Modo lectura (firma.html, vista previa del wizard): la misma hoja, con
   scroll interno y sin la sombra de objeto suelto. */
.hoja--lectura {
  max-height: 60vh; overflow-y: auto; margin-bottom: 0;
  box-shadow: 0 0 0 1px var(--doc-edge), 0 8px 24px -18px var(--doc-shadow);
  scrollbar-gutter: stable;
}

/* ── Membrete ─────────────────────────────────────────────────────────── */
/* En el contrato vive dentro de <thead> para repetirse en cada hoja
   impresa (ver contrato-imprimir.html). En recibo y liquidación es el
   primer bloque. La estructura es la misma en los tres. */
/* table-layout fixed: sin esto una línea larga sin espacios (la huella o el
   folio en el pie) ensancha la tabla y desborda la hoja en móvil. */
.hoja-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hoja-tabla td { padding: 0; }
.hoja-header-celda { padding-bottom: 22px; }
.hoja-membrete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px;
  padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--ink);
}
.hoja-letterhead { font-family: var(--font-display); font-variation-settings: "opsz" 24; font-weight: 600; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.01em; }
.hoja-letterhead img { display: block; max-height: 46px; max-width: 220px; object-fit: contain; }
.hoja-letterhead small { display: block; font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.hoja-membrete__meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint); text-align: right; white-space: nowrap;
}
.hoja-folio { color: var(--ink); font-weight: 600; letter-spacing: .04em; }
.hoja-membrete__meta .sello--estampa { margin: 8px 4px 6px 0; }

/* ── Tipografía del documento ─────────────────────────────────────────── */
.hoja h1 {
  font-family: var(--font-display); font-variation-settings: "opsz" 30;
  font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em;
  text-align: center; margin: 0 0 24px;
}
.hoja h2 {
  font-family: var(--font-display); font-variation-settings: "opsz" 20;
  font-weight: 600; font-size: 1.1rem; letter-spacing: .01em;
  margin: 28px 0 12px; break-after: avoid; page-break-after: avoid;
}
.hoja h3 {
  font-family: var(--font-ui); font-weight: 700; font-size: .95rem;
  margin: 16px 0 6px; break-after: avoid; page-break-after: avoid;
}
/* Justificado, y a lo ancho de la hoja. El max-width de 72ch dejaba el
   texto pegado a la izquierda con un hueco a la derecha, en pantalla y en
   papel: la medida de lectura ya la da el ancho de la hoja (820px en
   pantalla, 170mm entre margenes al imprimir), no hace falta otra encima.
   La justificacion se apoya en el hyphens: auto que .hoja ya trae — sin
   guiones, un renglon con una sola palabra larga abre rios. */
.hoja p { margin: 0 0 10px; text-align: justify; text-wrap: pretty; }
.hoja ul, .hoja ol { margin: 0 0 10px; padding-left: 22px; }
.hoja li { text-align: justify; }
.hoja strong, .hoja b { font-weight: 700; }
.hoja .firma-lugar-fecha { text-align: right; font-style: italic; margin-top: 30px; max-width: none; }
.clausula { break-inside: avoid; page-break-inside: avoid; }
.bloque-cierre { break-inside: avoid; page-break-inside: avoid; }

/* Datos etiquetados (recibo, liquidación): quién, qué, cuándo, cuánto. */
.hoja-datos {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 22px;
  margin: 0 0 24px; font-size: .95rem;
}
.hoja-datos dt { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding-top: 4px; }
.hoja-datos dd { margin: 0; }
.hoja-datos dd .mono { font-family: var(--font-mono); font-size: .9rem; }
.hoja-monto {
  font-family: var(--font-mono); font-size: 2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1;
  margin: 4px 0 6px;
}
.hoja-monto small { display: block; font-family: var(--font-ui); font-size: .82rem; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); margin-top: 6px; }
.hoja-monto-letra { font-size: .88rem; color: var(--ink-soft); font-style: italic; margin-bottom: 20px; }

/* Tabla de conceptos */
.hoja table.detalle { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: .92rem; }
.hoja table.detalle th {
  text-align: left; font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
  padding: 0 0 8px; border-bottom: 1px solid var(--ink);
}
.hoja table.detalle td { padding: 8px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.hoja table.detalle :is(td, th).monto { text-align: right; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hoja table.detalle tfoot td { border-bottom: none; border-top: 2px solid var(--ink); padding-top: 12px; font-weight: 700; font-size: 1rem; }
.hoja table.detalle tfoot td.monto { font-size: 1.05rem; }

/* ── Firmas ───────────────────────────────────────────────────────────── */
/* display:block + inline-block a propósito: flex y grid se parten mal en
   los saltos de página de Chrome. */
.firmas-digitales, .hoja-firmas {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  break-inside: avoid; page-break-inside: avoid;
}
.firmas-digitales h2, .hoja-firmas h2 { margin: 0 0 18px; font-size: 1rem; }
.firmas-digitales__grid { display: block; }
.firma-bloque {
  display: inline-block; vertical-align: top; width: 210px;
  margin: 0 28px 20px 0; break-inside: avoid; page-break-inside: avoid;
}
.firma-bloque__img {
  display: block; max-width: 200px; max-height: 70px; object-fit: contain;
  border-bottom: 1px solid var(--ink); margin-bottom: 6px;
}
.firma-bloque__linea { height: 54px; border-bottom: 1px solid var(--ink); margin-bottom: 6px; }
.firma-bloque__pendiente {
  height: 54px; border-bottom: 1px dashed var(--line); margin-bottom: 6px;
  display: flex; align-items: flex-end; padding-bottom: 4px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.firma-bloque__nombre { font-weight: 700; font-size: .88rem; }
.firma-bloque__rol { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.firma-bloque__fecha { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft); margin-top: 3px; }
.firma-bloque__acciones { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.firma-bloque__acciones button {
  background: none; border: 1px solid var(--line); color: var(--ink-soft); border-radius: var(--radius);
  padding: 0 10px; font-size: .72rem; cursor: pointer; min-height: 30px; font-family: var(--font-ui);
}
.firma-bloque__acciones button:hover { border-color: var(--brand); color: var(--brand-deep); }
/* Recibo y liquidación: firmas centradas o en dos columnas. */
.hoja-firmas--dos { display: block; text-align: center; }
.hoja-firmas--dos .firma-bloque { margin: 0 20px 10px; text-align: center; }
.hoja-firmas--dos .firma-bloque__img { margin-inline: auto; }

/* ── Constancia de integridad ─────────────────────────────────────────── */
/* La pieza con valor probatorio, compuesta como tal y no como letra chica. */
.constancia-integridad {
  margin-top: 26px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-paper);
  font-size: .8rem; line-height: 1.5; color: var(--ink-soft);
  break-inside: avoid; page-break-inside: avoid; max-width: none;
}
.constancia-integridad__t {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-variation-settings: "opsz" 20; font-weight: 600;
  font-size: .98rem; color: var(--ink); margin-bottom: 8px;
}
.constancia-integridad .huella {
  display: block; font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  color: var(--ink); letter-spacing: .04em; word-spacing: .35em; overflow-wrap: anywhere;
  margin: 4px 0 8px;
}
.constancia-integridad .huella-completa { font-size: .62rem; font-weight: 400; color: var(--ink-faint); letter-spacing: .02em; word-spacing: .2em; }
.constancia-integridad p { margin: 0 0 6px; max-width: none; }
.constancia-integridad ul { list-style: none; margin: 8px 0 0; padding: 0; max-width: none; }
.constancia-integridad li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
  padding: 5px 0; border-top: 1px solid var(--line-soft); color: var(--ink);
}
.constancia-integridad li .m { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-soft); white-space: nowrap; }
/* IP, ubicación y prueba de vida: renglón propio a todo lo ancho, porque es
   más largo que la fecha y en una hoja carta no cabe sin partirse. */
.constancia-integridad li .m--evidencia { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }
.constancia-integridad--alerta { border-color: var(--err); color: var(--err); font-weight: 600; }
.constancia-integridad--alerta .constancia-integridad__t { color: var(--err); }

/* Firmas al margen (tfoot): miniaturas repetidas en cada hoja + folio. */
.hoja-footer-celda { padding-top: 10px; border-top: 1px solid var(--line); }
.hoja-margen {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: .64rem; color: var(--ink-faint); letter-spacing: .04em;
}
.hoja-margen-firmas { display: flex; justify-content: flex-end; gap: 14px; }
.hoja-margen-firmas img { height: 20px; max-width: 80px; object-fit: contain; opacity: .85; }

/* Nota al pie de recibo/liquidación */
.nota-pie { margin-top: 28px; font-size: .78rem; color: var(--ink-faint); line-height: 1.5; max-width: none; }

/* ── Barra de acciones en pantalla ────────────────────────────────────── */
.hoja-toolbar {
  max-width: 820px; margin: 0 auto 16px; padding-top: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.hoja-toolbar__info { font-size: var(--t-sm); color: var(--ink-soft); }
.hoja-toolbar__acciones { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Impresión ────────────────────────────────────────────────────────── */
/* Márgenes de 18/20mm dejan ~170mm de columna; con el cuerpo a 11pt y la
   medida de 72ch del párrafo, la línea queda dentro del rango legible. El
   folio se repite en el pie por el <tfoot>; el número de página lo pone
   el navegador en la caja de margen cuando la soporta. */
.hoja-folio { string-set: folio content(text); }
@media print {
  body { background: #fff !important; }
  .no-print, .hoja-toolbar, #toolbar, #login-overlay, .puerta, .firma-panel, .firma-bloque__acciones, .toast-zone, #toast-zone { display: none !important; }
  .hoja {
    box-shadow: none; margin: 0; padding: 0; max-width: none; border-radius: 0;
    background: #fff; max-height: none; overflow: visible;
  }
  .hoja--lectura { max-height: none; overflow: visible; }
  .sello--estampa { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page {
    margin: 18mm 20mm 22mm;
    @bottom-right {
      content: "Página " counter(page) " de " counter(pages);
      font-family: 'IBM Plex Mono', monospace; font-size: 8pt; color: #676e5b;
    }
    @bottom-left {
      content: string(folio);
      font-family: 'IBM Plex Mono', monospace; font-size: 8pt; color: #676e5b;
    }
  }
}