/* oficina.css — Oficina Automatizada.
   Se carga DESPUÉS de /socios/partner.css y /servicios/landing.css, y solo añade lo que aquellas
   no cubren. Casi todo lo de esta página ya existe en landing.css: las secciones, el kicker, las
   tarjetas, la línea temporal (.dgm-time/.tstep, el quinto con .mine), la comparación (.vs) y la
   tabla comparativa (.ptable.cmp), el panel de números (.stats), la tabla de precios (.ptable),
   el acordeón y el formulario entero con su calendario.

   Aquí queda solo lo que es propio de esta página y de ninguna otra:

     · la factura: el borrador contable que se escribe línea a línea.

   Misma paleta: las variables las declara landing.css (--bronze, --surface, --stone…) y aquí no se
   redefine ninguna. */

/* ---------- 02 · la factura ----------
   Reutiliza .ficha (landing.css) SOLO por la animación de escritura: el JS le pone .typing y va
   encendiendo cada span[data-l] con .on. El diseño del contenido va aquí, en columnas reales
   (grid) y no en espacios monoespaciados: las columnas de importe, subcuenta y totales cuadran
   siempre, también si JetBrains Mono no llega a cargar o las etiquetas miden distinto. La base
   .ficha deja span[data-l] en white-space:pre-wrap; aquí se vuelve normal y cada tipo de línea
   toma su propio grid. */
.ficha.factura{font-size:clamp(12px,1.05vw,14px); line-height:1.65}
.ficha.factura span[data-l]{white-space:normal}

/* encabezados de bloque: el índice de la factura */
.ficha.factura .fhead{display:block; color:var(--bronze); letter-spacing:.12em;
  margin-top:clamp(14px,2vh,20px)}
.ficha.factura .fhead:first-child{margin-top:0}

/* filas de cabecera (proveedor / Nº factura / régimen): etiqueta · valor · nota alineados a la
   derecha. La nota queda vacía en la fila de régimen y su columna simplemente reserva espacio. */
.ficha.factura .frow{display:grid; grid-template-columns:8.5em minmax(0,1fr) auto;
  gap:0 16px; align-items:baseline; padding:3px 0}
.ficha.factura .fk{color:var(--gray)}
.ficha.factura .fn{color:var(--gray); text-align:right}

/* líneas de gasto: concepto a la izquierda, importe a la derecha, y debajo la subcuenta (en
   bronce) con su descripción. Es la disposición de una factura real, y la que mejor sobrevive al
   ancho: si la descripción es larga, envuelve sin desalinear los importes. */
.ficha.factura .fitem{display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:3px 16px; align-items:baseline; padding:9px 0; border-top:1px solid var(--line-2)}
.ficha.factura .fitem:first-of-type{border-top:0; padding-top:6px}
.ficha.factura .fd{color:var(--stone)}
.ficha.factura .fa{color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.ficha.factura .fc{grid-column:1/-1; font-size:.9em; color:var(--gray)}
.ficha.factura .fc .fp{color:var(--bronze); margin-right:10px}

/* totales: etiqueta e importe emparejados a la derecha, cantidades tabulares para que cuadren
   con los de las líneas de arriba. */
.ficha.factura .ftot{display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:0 18px; align-items:baseline; padding:3px 0; color:var(--stone)}
.ficha.factura .ftot span:first-child{text-align:right}
.ficha.factura .ftot span:last-child{color:var(--ink); font-variant-numeric:tabular-nums}

/* el TOTAL: el remate de la factura, con filete bronce y en tinta. Mismo grid que los totales. */
.ficha.factura .ft{display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:0 18px; align-items:baseline; margin-top:6px; padding-top:10px;
  border-top:1px solid var(--bronze-line); color:var(--ink); font-weight:400}
.ficha.factura .ft span:first-child{text-align:right}
.ficha.factura .ft span:last-child{font-variant-numeric:tabular-nums}

/* ---------- responsive ---------- */
@media (max-width:520px){
  /* la columna de etiqueta de cabecera se estrecha para que quepa el valor en un móvil */
  .ficha.factura .frow{grid-template-columns:7em minmax(0,1fr) auto; gap:0 10px}
}