/* gestion/documentos/documento.css · ASC-GESTION-DOCUMENTOS-PDF-BRAND-V1
 *
 * Documento A4 (factura / presupuesto) con marca Ascua: carbon / hueso / brasa.
 * Tokens tomados de css/tpv.css (Ember Dark v2 · Aripos Ascua · BRAND-1), con alcance
 * local (.ascua-doc) para no pisar la pagina que lo integre. Sin azul, sin fuentes remotas.
 */

.ascua-doc,
.ascua-doc-body,
.ascua-preview {
  --asc-carbon: #0D0C0A;
  --asc-ash: #1A1815;
  --asc-smoke: #5A554C;
  --asc-borde-fuerte: #6F6A5F;
  --asc-bone: #EFE9E0;
  --asc-surface: #F4EFE7;
  --asc-papel: #FFFFFF;
  --asc-text-2: #4A463E;
  --asc-brasa: #F56820;
  --asc-brasa-texto: #D4530F;
  --asc-danger: #C2401A;
  --asc-borde: rgba(13, 12, 10, 0.12);
  --asc-borde-suave: rgba(13, 12, 10, 0.06);
  --asc-brasa-bg: rgba(245, 104, 32, 0.08);
  --asc-sombra: 0 1px 2px rgba(13, 12, 10, 0.06), 0 12px 32px rgba(13, 12, 10, 0.10);

  --asc-font-display: 'Syne', 'Figtree', system-ui, sans-serif;
  --asc-font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --asc-font-data: 'Outfit', 'Figtree', system-ui, sans-serif;
  --asc-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* -- pagina contenedora (pantalla) ---------------------------------------- */
.ascua-doc-body {
  margin: 0;
  padding: 24px 16px;
  background: var(--asc-bone);
  color: var(--asc-carbon);
  font-family: var(--asc-font-body);
}

/* -- hoja A4 ---------------------------------------------------------------- */
.ascua-doc {
  box-sizing: border-box;
  position: relative;
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  margin: 0 auto;
  padding: 16mm 16mm 14mm;
  display: flex;
  flex-direction: column;
  gap: 8mm;
  background: var(--asc-papel);
  color: var(--asc-carbon);
  font-family: var(--asc-font-body);
  font-size: 10pt;
  line-height: 1.45;
  box-shadow: var(--asc-sombra);
  border-radius: 4px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ascua-doc *,
.ascua-doc *::before,
.ascua-doc *::after { box-sizing: border-box; }
.ascua-doc h1,
.ascua-doc h2,
.ascua-doc p,
.ascua-doc dl,
.ascua-doc dd { margin: 0; }

.doc-banda {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--asc-brasa);
  border-radius: 4px 4px 0 0;
}

.doc-linea { display: block; color: var(--asc-text-2); }
.doc-linea--sub { color: var(--asc-smoke); }

.doc-etiqueta {
  display: block;
  margin-bottom: 2mm;
  font-family: var(--asc-font-body);
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asc-smoke);
}

/* -- cabecera --------------------------------------------------------------- */
.doc-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10mm;
  padding-bottom: 6mm;
  border-bottom: 1px solid var(--asc-borde);
}
.doc-emisor { display: flex; gap: 4mm; align-items: flex-start; min-width: 0; }
.doc-logo { width: auto; height: 14mm; max-width: 40mm; object-fit: contain; flex: none; }
.doc-logo--ascua { width: 12mm; height: 12mm; }
.doc-emisor-datos { min-width: 0; overflow-wrap: anywhere; }
.doc-emisor-nombre {
  display: block;
  margin-bottom: 1mm;
  font-family: var(--asc-font-display);
  font-size: 13pt;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--asc-carbon);
}

.doc-identidad { text-align: right; flex: none; }
.doc-titulo {
  font-family: var(--asc-font-display);
  font-size: 22pt;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--asc-carbon);
}
.doc-titulo::after {
  content: '';
  display: block;
  width: 12mm;
  height: 3px;
  margin: 3mm 0 3mm auto;
  background: var(--asc-brasa);
  border-radius: 2px;
}
.doc-meta { display: grid; gap: 1mm; }
.doc-meta div { display: flex; justify-content: flex-end; gap: 3mm; }
.doc-meta dt { color: var(--asc-smoke); }
.doc-meta dd { font-family: var(--asc-font-data); font-weight: 600; font-variant-numeric: tabular-nums; }

/* -- cliente ---------------------------------------------------------------- */
.doc-partes { display: flex; gap: 8mm; }
.doc-cliente {
  flex: 1 1 auto;
  max-width: 100mm;
  padding: 4mm 5mm;
  background: var(--asc-surface);
  border-left: 3px solid var(--asc-brasa);
  border-radius: 0 3px 3px 0;
  overflow-wrap: anywhere;
}
.doc-cliente-nombre { display: block; font-size: 11pt; font-weight: 700; margin-bottom: 1mm; }

/* -- lineas ----------------------------------------------------------------- */
.doc-tabla-scroll { width: 100%; }
.doc-tabla { width: 100%; border-collapse: collapse; }
.doc-tabla th {
  padding: 2.5mm 2mm;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--asc-bone);
  background: var(--asc-carbon);
}
.doc-tabla th:first-child { border-radius: 3px 0 0 3px; }
.doc-tabla th:last-child { border-radius: 0 3px 3px 0; }
.doc-tabla td {
  padding: 2.5mm 2mm;
  vertical-align: top;
  border-bottom: 1px solid var(--asc-borde-suave);
}
.doc-tabla .col-num {
  text-align: right;
  white-space: nowrap;
  font-family: var(--asc-font-data);
  font-variant-numeric: tabular-nums;
}
.doc-tabla th.col-num { text-align: right; font-family: var(--asc-font-body); }
.doc-tabla .col-concepto { width: 100%; overflow-wrap: anywhere; }
.doc-tabla .col-importe { font-weight: 600; }
.doc-concepto { display: block; font-weight: 600; }
.doc-descripcion { display: block; margin-top: 0.5mm; font-size: 8.5pt; color: var(--asc-smoke); }

/* -- resumen: pago/notas + totales --------------------------------------- */
.doc-resumen { display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm; }
.doc-resumen-izq { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5mm; min-width: 0; overflow-wrap: anywhere; }
.doc-pago dl { display: grid; gap: 1mm; }
.doc-pago dl div { display: flex; gap: 3mm; }
.doc-pago dt { color: var(--asc-smoke); min-width: 28mm; }
.doc-pago dd { font-weight: 600; }
.doc-pago-detalle { margin-top: 2mm; color: var(--asc-text-2); }
.doc-notas p { color: var(--asc-text-2); }

.doc-totales { flex: 0 0 72mm; }
.doc-totales dl { display: grid; }
.doc-total {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
  padding: 1.6mm 0;
  border-bottom: 1px solid var(--asc-borde-suave);
}
.doc-total dt { color: var(--asc-text-2); }
.doc-total dd { font-family: var(--asc-font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-total--desc dd,
.doc-total--ret dd { color: var(--asc-danger); }
.doc-total--base dt,
.doc-total--base dd { font-weight: 600; color: var(--asc-carbon); }
.doc-total--final {
  margin-top: 2mm;
  padding: 3mm 4mm;
  border: 0;
  border-radius: 3px;
  background: var(--asc-carbon);
  align-items: baseline;
}
.doc-total--final dt {
  color: var(--asc-bone);
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.doc-total--final dd {
  color: var(--asc-brasa);
  font-family: var(--asc-font-display);
  font-size: 16pt;
  font-weight: 800;
}

/* -- verifactu (solo si el payload trae QR/huella) --------------------------- */
.doc-verifactu {
  display: flex;
  gap: 5mm;
  align-items: center;
  padding: 4mm;
  border: 1px solid var(--asc-borde);
  border-radius: 3px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.doc-qr { width: 28mm; height: 28mm; flex: none; image-rendering: pixelated; }
.doc-verifactu-txt { display: flex; flex-direction: column; gap: 1mm; min-width: 0; overflow-wrap: anywhere; }
.doc-huella code { font-family: var(--asc-font-mono); font-size: 7.5pt; color: var(--asc-text-2); word-break: break-all; }
.doc-huella .doc-etiqueta { display: inline; margin: 0; }

/* -- pie -------------------------------------------------------------------- */
.doc-pie {
  margin-top: auto;
  padding-top: 4mm;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8mm;
  border-top: 1px solid var(--asc-borde);
  font-size: 7.5pt;
  color: var(--asc-smoke);
}
.doc-legal { max-width: 130mm; }
.doc-marca {
  display: inline-flex;
  align-items: center;
  gap: 1.5mm;
  white-space: nowrap;
  font-weight: 600;
  color: var(--asc-text-2);
}
.doc-marca-ico { width: 3mm; height: 3mm; }

/* -- preview responsive (pantalla) ------------------------------------------ */
@media screen and (max-width: 820px) {
  .ascua-doc-body { padding: 12px 8px; }
  .ascua-doc {
    width: 100%;
    min-height: 0;
    padding: 20px 16px;
    gap: 20px;
    font-size: 13px;
  }
  .doc-cabecera,
  .doc-resumen { flex-direction: column; }
  .doc-identidad { text-align: left; }
  .doc-titulo::after { margin-left: 0; }
  .doc-meta div { justify-content: flex-start; }
  .doc-cliente { max-width: none; }
  .doc-totales { flex: 1 1 auto; width: 100%; }
  .doc-pie { flex-direction: column; align-items: flex-start; }
}

@media screen and (max-width: 560px) {
  /* La tabla pasa a tarjetas: una fila por linea, etiqueta a la izquierda. */
  .doc-tabla thead { display: none; }
  .doc-tabla,
  .doc-tabla tbody,
  .doc-tabla tr,
  .doc-tabla td { display: block; width: 100%; }
  .doc-tabla tr { padding: 10px 0; border-bottom: 1px solid var(--asc-borde); }
  .doc-tabla td { border: 0; padding: 2px 0; }
  .doc-tabla td.col-num { display: flex; justify-content: space-between; }
  .doc-tabla td.col-num::before {
    content: attr(data-label);
    font-family: var(--asc-font-body);
    color: var(--asc-smoke);
  }
}

/* -- impresion / PDF --------------------------------------------------------- */
/* Margenes en @page para que cada pagina de un documento largo los respete. */
/* ASC-GESTION-PDF-PAGINACION-V1 · cajas de margen (motor de impresion de Chromium 131+):
   - arriba, en las paginas 2..n: identificacion del documento y de la sociedad, desde --asc-doc-ident
     (la pone renderPagina o la preview en el elemento raiz). Sin la variable, la caja queda vacia: nunca
     un texto inventado. En la pagina 1 no se repite: ya esta la cabecera completa.
   - abajo a la derecha, en todas: «Pagina n de m», con los contadores del propio motor (sin numeros fijos).
   Viven en el margen de la pagina: no pueden tapar contenido. Motores sin cajas de margen las ignoran. */
@page {
  size: A4;
  margin: 14mm 16mm 12mm;
  @top-left {
    content: var(--asc-doc-ident, "");
    vertical-align: bottom;
    padding-bottom: 3mm;
    font: 7.5pt system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #5A554C;
  }
  @bottom-right {
    content: "P\0000E1gina " counter(page) " de " counter(pages);
    vertical-align: top;
    padding-top: 3mm;
    font: 7.5pt system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #5A554C;
  }
}
@page :first {
  @top-left { content: none; }
}

@media print {
  html,
  body,
  .ascua-doc-body {
    margin: 0;
    padding: 0;
    background: var(--asc-papel);
  }
  .ascua-doc {
    width: auto;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 4mm 0 0;
    font-size: 10pt;
    box-shadow: none;
    border-radius: 0;
  }
  .doc-banda { border-radius: 0; }
  .doc-tabla thead { display: table-header-group; }
  .doc-fila,
  .doc-totales,
  .doc-pago,
  .doc-pie { break-inside: avoid; page-break-inside: avoid; }
  /* PAGINACION-V1 · las notas son texto libre y pueden ocupar casi una pagina: se dejan partir (cada pagina
     ya va identificada) para no dejar paginas casi vacias, sin huerfanas ni viudas y con su etiqueta unida. */
  .doc-notas p { orphans: 3; widows: 3; }
  .doc-notas .doc-etiqueta { break-after: avoid; page-break-after: avoid; }
  /* El pie (datos registrales, aviso legal, marca) nunca queda solo en una pagina: viaja con el bloque anterior. */
  .doc-pie { break-before: avoid; page-break-before: avoid; }
  .ascua-preview-barra { display: none !important; }
}

/* -- ASC-GESTION-DISENO-V1 · estilos elegibles por la sociedad ----------------
 * El color de acento llega como --asc-brasa (y --asc-sobre-acento, el texto legible encima) desde quien pinta.
 * «clasica» es el diseño de siempre. */
.ascua-doc { --asc-sobre-acento: #FFFFFF; }

/* Moderna: cabecera a todo color y tabla con el acento. */
.ascua-doc--estilo-moderna .doc-banda { display: none; }
.ascua-doc--estilo-moderna .doc-cabecera {
  margin: -16mm -16mm 0;
  padding: 12mm 16mm 9mm;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--asc-brasa);
  color: var(--asc-sobre-acento);
}
.ascua-doc--estilo-moderna .doc-emisor-nombre,
.ascua-doc--estilo-moderna .doc-titulo,
.ascua-doc--estilo-moderna .doc-cabecera .doc-linea,
.ascua-doc--estilo-moderna .doc-meta dt,
.ascua-doc--estilo-moderna .doc-meta dd { color: var(--asc-sobre-acento); }
.ascua-doc--estilo-moderna .doc-cabecera .doc-linea--sub,
.ascua-doc--estilo-moderna .doc-meta dt { opacity: .8; }
.ascua-doc--estilo-moderna .doc-titulo::after { background: var(--asc-sobre-acento); }
.ascua-doc--estilo-moderna .doc-logo { background: #FFFFFF; padding: 1.5mm; border-radius: 3px; }
.ascua-doc--estilo-moderna .doc-tabla th { background: var(--asc-brasa); color: var(--asc-sobre-acento); }
.ascua-doc--estilo-moderna .doc-total--final { background: var(--asc-brasa); }
.ascua-doc--estilo-moderna .doc-total--final dt,
.ascua-doc--estilo-moderna .doc-total--final dd { color: var(--asc-sobre-acento); }

/* Minimal: blanco y negro, líneas finas; el acento solo en el total. */
.ascua-doc--estilo-minimal .doc-banda,
.ascua-doc--estilo-minimal .doc-titulo::after { display: none; }
.ascua-doc--estilo-minimal .doc-titulo { font-size: 18pt; font-weight: 700; letter-spacing: .04em; margin-bottom: 3mm; }
.ascua-doc--estilo-minimal .doc-tabla th {
  background: transparent; color: var(--asc-carbon);
  border-bottom: 1.5px solid var(--asc-carbon); border-radius: 0;
}
.ascua-doc--estilo-minimal .doc-total--final {
  background: transparent; border-top: 1.5px solid var(--asc-carbon); border-radius: 0; padding: 3mm 0;
}
.ascua-doc--estilo-minimal .doc-total--final dt { color: var(--asc-carbon); }
.ascua-doc--estilo-minimal .doc-total--final dd { color: var(--asc-brasa-texto); }