/* Carril VENT: estilos propios de este carril. Se carga después de estilo.css; solo lo toca su dueño.
   Ventas: la lista, el editor de documentos, la vista previa y el panel VERI*FACTU. Sin colores ni tamaños sueltos: tokens de estilo.css. */

/* ── lista ───────────────────────────────────────────────────────────── */
.filtros .buscar-ventas { min-width: 300px; }
.cli-nombre { font-weight: 500; }
.pie-lista { display: flex; align-items: center; justify-content: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) var(--e4); border-top: 1px solid var(--linea-suave); }

/* ══════════════════════════════════════════════════════════════════════════════
   EL EDITOR: el documento tal como saldrá (15-10, encargo de Iker: «me hace falta ver la parte donde hay que facturar»)
   [ el papel: emisor y número · cliente · líneas · pago, notas y totales ]  [ el panel: lo que pasa al emitir y los botones ]
   Los anchos del papel se miden con consultas de CONTENEDOR (el papel mide lo que le deja el panel, no lo que mide la pantalla).
   ══════════════════════════════════════════════════════════════════════════════ */
:root { --fd-panel: 21rem; --fd-papel: 56rem; --fd-movil: calc(67px + env(safe-area-inset-bottom, 0px)); }      /* --fd-movil: lo que mide la barra de cinco iconos del móvil */
.fd { display: grid; grid-template-columns: minmax(0, 1fr) var(--fd-panel); align-items: start; min-height: 100%; }
.fd-mesa { padding: var(--e5) var(--e4) var(--e6) var(--e5); min-width: 0; }
.fd-papel { container-type: inline-size; max-width: var(--fd-papel); margin: 0 auto; background: var(--card); border: 1px solid var(--linea); border-top: 3px solid var(--acento, var(--marca));
  border-radius: var(--r); padding: var(--e4) var(--e5) var(--e4); }

/* arriba: el emisor (con su logo) y, a la derecha, qué documento es y su número */
.fd-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e5); align-items: start; }
.fd-emisor { display: flex; gap: var(--e3); align-items: flex-start; min-width: 0; }
.fd-logo { max-height: 3.25rem; max-width: 9rem; width: auto; object-fit: contain; flex: none; }
.fd-emisor-datos { display: grid; gap: 1px; min-width: 0; font-size: var(--t-xs); color: var(--tenue); }
.fd-emisor-datos b { font-size: var(--t-md); color: var(--texto); }
.fd-emisor-datos span:empty { display: none; }
.fd-falta { color: var(--no-fg); margin-top: var(--e1); }
.fd-falta a { text-decoration: underline; }
.fd-id { display: grid; gap: 2px; justify-items: end; text-align: right; min-width: 0; }
.fd-id h1 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; margin: 0; }
.fd-k { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.fd-k label { cursor: pointer; }
.fd-num { font: 600 var(--t-md) var(--mono); color: var(--marca); min-height: 1.4em; }
.fd-num.previsto { color: var(--tenue); }
.fd-num-nota { font-size: var(--t-xs); color: var(--tenue); }
.fd-rectifica { color: var(--marca); text-decoration: underline; }
.fd-dato { font-size: var(--t-sm); padding-top: var(--e2); }

/* la franja de datos: serie, fecha, vencimiento y tipo de operación (cada campo con su rótulo encima) */
.fd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--e3); padding: var(--e3) 0; margin-top: var(--e3); border-top: 1px solid var(--linea-suave); }
.fd-meta { align-items: end; }
.fd-meta .campo select, .fd-meta .campo input { width: 100%; min-width: 0; }

/* el cliente */
.fd-partes { padding: var(--e3) 0 var(--e4); border-top: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave); }
.fd-cli { min-width: 0; }
.fd-cli-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--e3); min-height: var(--alto-xs); margin-bottom: var(--e1); }
.fd-cli-cab .fd-k { white-space: nowrap; }
.fd-cli-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e1) var(--e5); font-size: var(--t-sm); }
.fd-cli-col { display: grid; gap: 2px; align-content: start; min-width: 0; }
.fd-cli-ficha > .fd-cli-falta { grid-column: 1 / -1; }
.fd-cli-nombre b { font-size: var(--t-md); }
.fd-cli-lin { overflow-wrap: anywhere; }
.fd-cli-falta { margin-top: var(--e2); padding: var(--e2) var(--e3); border-radius: var(--r); background: var(--av-bg); color: var(--av-fg); font-size: var(--t-xs); }
.fd-cli-acc { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e1); margin-right: calc(-1 * var(--e2)); }
.fd-cli-acc button { color: var(--marca); }
.fd-cli-dejar { justify-content: flex-start; margin: var(--e1) 0 0 calc(-1 * var(--e2)); }
.fd-combo { position: relative; }
.fd-cli-q { width: 100%; }
.fd-cli-lista { position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + var(--e1)); max-height: 20rem; overflow-y: auto; padding: var(--e1);
  background: var(--card); border: 1px solid var(--linea-fuerte); border-radius: var(--r); box-shadow: var(--sombra-lg); }
.fd-cli-op { display: flex; width: 100%; height: auto; min-height: var(--alto-md); align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e1) var(--e3);
  background: transparent; color: var(--texto); border: 0; border-radius: var(--r-sm); font-weight: 400; text-align: left; }
.fd-cli-op b { font-weight: 500; overflow-wrap: anywhere; }
.fd-cli-op span { color: var(--tenue); font-size: var(--t-xs); flex: none; max-width: 45%; text-align: right; }
.fd-cli-op svg { width: 1rem; height: 1rem; flex: none; color: var(--marca); margin-right: var(--e2); }
.fd-cli-op:last-child { justify-content: flex-start; border-top: 1px solid var(--linea-suave); border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: var(--e1); }
.fd-cli-op:hover, .fd-cli-op.activo { background: var(--hover); opacity: 1; }
.fd-cli-op.activo { outline: 2px solid var(--foco); outline-offset: -2px; }
.fd-cli-vacio { padding: var(--e2) var(--e3); color: var(--tenue); font-size: var(--t-xs); }

/* las líneas: concepto, cantidad, precio, descuento, IVA e importe (cada celda se teclea en su sitio y el total sigue lo escrito) */
.fd-lineas { margin-top: var(--e1); }
.fd-lin { display: grid; grid-template-columns: minmax(0, 1fr) 7.25rem 7rem 4rem 7.5rem 7rem 2rem; gap: 0 var(--e1); align-items: start; }
.fd-lin-cab { padding: var(--e2) 0; border-bottom: 1px solid var(--linea); font-size: var(--t-2xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.fd-lin-cab > span { padding: 0 var(--e2); }
.fd-lin-cab .n { text-align: right; }
.fd-lin-cuerpo .fd-lin { padding: var(--e1) 0; border-bottom: 1px solid var(--linea-suave); }
.fd-lin-vacia { padding: var(--e4) var(--e2); }
.fd-c { min-width: 0; }
.fd-c > input, .fd-c > select { width: 100%; height: var(--alto-sm); min-height: var(--alto-sm); padding: 0 var(--e2); border-color: transparent; background: transparent; box-shadow: none; }
.fd-c > input:hover, .fd-c > select:hover:not(:disabled) { border-color: var(--linea); }
.fd-c > input:focus, .fd-c > select:focus { border-color: var(--marca); background: var(--card); }
.fd-c > input.n { text-align: right; font-variant-numeric: tabular-nums; }
.fd-c > select { padding-right: var(--e1); }
.fd-v { display: block; padding: var(--e1) var(--e2); overflow-wrap: anywhere; }
.fd-lin .n { font-variant-numeric: tabular-nums; }
.fd-lin > .n:not(.fd-c), .fd-c.n { text-align: right; }
.fd-cant.n, .fd-precio.n, .fd-dto.n, .fd-iva:not(:has(select)), .fd-imp { padding: var(--e1) var(--e2); }
.fd-imp { align-self: center; padding: 0 var(--e2); font-weight: 500; white-space: nowrap; }
.fd-x { display: flex; justify-content: center; align-self: center; }
.fd-x button { color: var(--tenue); }
.fd-x button:hover { color: var(--no-fg); }
.fd-lin .det-linea { padding: 0 var(--e2); font-size: var(--t-xs); color: var(--tenue); }
.fd-lin-cab .c-iva { padding-left: var(--e3); }
.fd-anadir { margin: var(--e2) 0 0 calc(-1 * var(--e1)); }

/* abajo: cómo se paga y las notas, a la izquierda; los totales, a la derecha */
.fd-pie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: var(--e5); margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--linea-suave); align-items: start; }
.fd-pie-izq { display: grid; gap: var(--e3); min-width: 0; }
.fd-pie-izq select, .fd-pie-izq textarea { width: 100%; }
.fd-tot { display: grid; gap: var(--e2); font-size: var(--t-sm); }
.fd-tot .f { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); font-variant-numeric: tabular-nums; }
.fd-tot .f > span:first-child { color: var(--tenue); }
.fd-tot .f label { cursor: pointer; }
.fd-tot .f.t { margin-top: var(--e1); padding-top: var(--e3); border-top: 1.5px solid var(--texto); font-size: var(--t-xl); font-weight: 600; }
.fd-tot .f.t > span:first-child { color: var(--texto); }
.fd-tot .f.neto { color: var(--tenue); font-size: var(--t-xs); }
.fd-tot input { width: 4.5rem; height: var(--alto-xs); min-height: var(--alto-xs); padding: 0 var(--e2); text-align: right; }
.fd-ret { display: inline-flex; align-items: center; gap: var(--e2); }
.fd-ret select { width: auto; max-width: 11rem; height: var(--alto-xs); min-height: var(--alto-xs); padding-top: 0; padding-bottom: 0; }
.fd-desglose { display: grid; gap: var(--e2); }
.fd-abono { margin-top: var(--e2); }
.fd-mas { border-top: 1px solid var(--linea-suave); padding-top: var(--e2); }
.fd-mas summary { cursor: pointer; width: fit-content; padding: var(--e1) 0; font-size: var(--t-xs); font-weight: 500; color: var(--tenue); }
.fd-mas summary:hover { color: var(--texto); }
.fd-mas-cuerpo { display: grid; gap: var(--e3); padding-top: var(--e2); }
.fd-mas .campo input, .fd-mas .campo textarea { width: 100%; }

/* un documento ya emitido (o el que ve un cliente de solo consulta): lo mismo, sin campos */
.fd-papel.bloqueado textarea[readonly] { background: transparent; border-color: transparent; resize: none; padding-left: 0; }

/* el panel de la derecha: el total, los botones y lo que pasa al emitir (queda a la vista mientras se baja por el documento) */
.fd .fd-lateral { position: sticky; top: var(--e5); margin: var(--e5) var(--e5) var(--e5) 0; max-height: calc(100vh - var(--alto-barra) - 2 * var(--e5)); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--e4); padding: var(--e4); background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); }
.fd-lateral .self-ini { justify-self: start; }
.fd-lateral .estado-gr + .grande { margin-top: var(--e2); }
.fd-lateral .fd-acciones button:not(.sm):not(.xs), .fd-lateral .fd-acciones .btn:not(.sm):not(.xs) { width: 100%; }
.fd-h4 { margin: 0; }
.fd-emitir { padding: var(--e3); border-radius: var(--r); background: var(--fondo); }
.fd-emitir h4 { margin: 0; display: inline; }
/* (17-10) plegado: una línea; los pasos al abrirlo */
.fd-emitir summary { cursor: pointer; list-style: none; display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap; font-size: var(--t-xs); }
.fd-emitir summary::-webkit-details-marker { display: none; }
.fd-emitir-res { color: var(--tenue); }
.fd-emitir-res b { color: var(--texto); font-weight: 600; }
.fd-emitir[open] summary { margin-bottom: var(--e2); }
.fd-emitir:not([open]) { padding-top: var(--e2); padding-bottom: var(--e2); }
.fd-pasos { list-style: none; display: grid; gap: var(--e2); font-size: var(--t-xs); color: var(--tenue); }
.fd-pasos li { display: flex; gap: var(--e2); align-items: flex-start; }
.fd-pasos b { color: var(--texto); font-weight: 600; }
.fd-n { flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--marca-suave); color: var(--marca); font-size: var(--t-2xs); font-weight: 600; }
.vista-previa { overflow-x: auto; }       /* la hoja CRECE con las líneas (INTERFAZ-27): el aspect-ratio de .vp-hoja (estilo.css) es su alto mínimo */

/* «Vista previa» en grande y la lista de facturas a rectificar (un abono) */
.fd-vista-pdf { display: grid; place-items: center; min-height: 12rem; padding: var(--e3); background: var(--fondo); border-radius: var(--r); }
.fd-vista-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linea); background: var(--papel); }
.fd-rect-it { width: 100%; height: auto; min-height: var(--alto-md); background: transparent; color: var(--texto); border: 0; border-radius: var(--r-sm); font-weight: 400; text-align: left; justify-content: space-between; }
.fd-rect-it:hover { background: var(--hover); opacity: 1; }

/* la barra de abajo (solo cuando el panel queda debajo del documento): el total y los botones de siempre, a mano sin bajar a buscarlos */
.fd-barra { display: none; }

/* en la pantalla justa, el panel pasa debajo del documento y sus botones, a la barra de abajo */
@media (max-width: 1100px) {
  .fd { grid-template-columns: minmax(0, 1fr); }
  .fd .fd-lateral { position: static; max-height: none; overflow: visible; margin: 0 var(--e5) var(--e5); }
  .fd-mesa { padding-bottom: var(--e4); padding-right: var(--e5); }
  .fd-barra { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e5); background: var(--card); border-top: 1px solid var(--linea); }
  .fd-barra-tot { display: grid; line-height: 1.25; flex: none; }
  .fd-barra-tot b { font-size: var(--t-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .fd-barra-acc { display: flex; flex: 1; justify-content: flex-end; gap: var(--e2); min-width: 0; }
  .fd-barra-acc button { white-space: nowrap; }
  .fd .vista-previa { display: none; }              /* con el panel debajo, la miniatura es una hoja entera de alto: queda el botón «Ver el PDF en grande» */
}
@media (max-width: 720px) {
  .fd-mesa { padding: var(--e3) var(--e3) var(--e4); }
  .fd .fd-lateral { margin: 0 var(--e3) var(--e4); }
  .fd-papel { padding: var(--e4) var(--e3) var(--e3); }
  .fd-barra { bottom: var(--fd-movil); margin-bottom: var(--fd-movil); padding: var(--e2) var(--e3); }        /* por encima de la barra de cinco iconos del móvil */
  body:has(.fd-barra:not([hidden])) #avisos { bottom: calc(var(--fd-movil) + 4.25rem); }                          /* y los avisos, por encima de la barra de acciones: no tapan «Emitir» */
}

/* el papel se parte según lo que mide él (no la pantalla): sin el panel al lado cabe más, con el panel y el menú ancho cabe menos */
@container (max-width: 680px) {
  .fd-cab { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .fd-id { justify-items: start; text-align: left; }
  .fd-cli-ficha, .fd-pie { grid-template-columns: minmax(0, 1fr); }
  .fd-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-lin-cab { display: none; }
  .fd-lin { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); padding: var(--e3) 0; position: relative; }
  .fd-lin .fd-con { grid-column: 1 / -1; padding-right: 2.25rem; }
  .fd-lin .fd-iva { grid-column: span 2; }
  .fd-lin .fd-x { position: absolute; top: var(--e2); right: 0; }
  .fd-lin .fd-x:empty { display: none; }
  .fd-lin .fd-c[data-et]::before { content: attr(data-et); display: block; margin-bottom: 2px; font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
  .fd-lin .fd-c > input, .fd-lin .fd-c > select { border-color: var(--linea); background: var(--card); }
  .fd-lin .fd-imp { align-self: end; font-size: var(--t-md); }
  .fd-lin .fd-cant.n, .fd-lin .fd-precio.n, .fd-lin .fd-dto.n, .fd-lin .fd-iva:not(:has(select)) { padding: 0; }
  .fd-lin .fd-c > select { padding-left: var(--e2); }
}

/* ── el título del editor es un h1 (INTERFAZ-23) y el sello de «simulado» es lila también en la vista previa (ESTETICA1-26) ──────────── */
.vp-hoja .vp-qr.sim { border: 1px dashed var(--sim-borde); background: var(--sim-fondo); border-radius: var(--r-xs); padding: 3px 6px; color: var(--sim-tinta); text-align: center; justify-items: center; }
.vp-hoja .vp-qr.sim span { color: var(--sim-tinta); }
.lateral .self-ini { justify-self: start; }
.lateral .estado-gr + .grande { margin-top: var(--e2); }
.fila.arriba { align-items: flex-start; }
.fila.fila-nw .corto { width: 70px; }

/* Los dos botones grandes del cuadro de rectificar: el texto se parte en varias líneas y va a la izquierda */
.opcion-grande { height: auto; padding: 14px; justify-content: flex-start; text-align: left; white-space: normal; }

/* ── panel VERI*FACTU ────────────────────────────────────────────────── */
.vf-cuerpo { gap: var(--e3); }
/* El QR va siempre sobre blanco, también en oscuro: sin su margen claro un lector no lo lee */
.vf-qr { width: 84px; height: 84px; flex: none; background: var(--papel); border-radius: var(--r-sm); padding: var(--e1); border: 1px solid var(--linea); }
.vf-cuerpo .lista-mini { min-width: 0; }

/* ── la lista de facturas en tarjetas (la caja de la tabla estrecha): el cliente ocupa toda la línea de debajo del número (con tres columnas de
   por medio el nombre se quedaba en «AJUNTAMEN…»), el nombre se parte en vez de cortarse y «Simulada (no enviada)» no ensancha el estado ── */
@container (max-width: 760px) {
  .tabla-ventas tr { grid-template-areas: "chk num estado acc" "chk cli cli acc" "chk fecha total acc" "chk pend pend acc"; }
  .tabla-ventas td.cli-c b { white-space: normal; overflow-wrap: anywhere; }
  .tabla-ventas .vf-sim-txt { white-space: normal; }
}

/* ── la lista de facturas en tarjetas (ESTETICA-27 y ESTETICA-28) ──────────────────────────────────────────────────────────────────────────
   Al pasar la tabla a tarjetas, el total y lo pendiente se quedaban sin rótulo (dos importes iguales apilados sin decir cuál es cuál) y
   las facturas cobradas dejaban un «—» suelto. Ahora cada importe lleva su rótulo (data-et) y lo pendiente que no existe no se pinta.
   «vence 18/02/2026» va en su propia línea bajo la fecha y no se repite si es el mismo día (se omite en ventas.js). */
@container (max-width: 760px) {
  .tabla-ventas td[data-et]::before { content: attr(data-et); margin-right: var(--e2); font-size: var(--t-2xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
  .tabla-ventas td.sin-pend { display: none; }
  .tabla-ventas td.c-fecha .solo-m { display: block; white-space: nowrap; }
}

/* (17-10) «Más acciones» del panel de la factura: lo que no se usa a diario, plegado (fd-otras: «fd-mas» ya es el «Más opciones» del pie del papel) */
.fd-otras { border-top: 1px solid var(--linea); margin-top: var(--e2); padding-top: var(--e2); }
.fd-otras summary { cursor: pointer; list-style: none; font-size: var(--t-sm); font-weight: 500; color: var(--tenue); padding: var(--e1) 0; display: flex; align-items: center; gap: var(--e1); }
.fd-otras summary::-webkit-details-marker { display: none; }
.fd-otras summary::after { content: "▾"; font-size: var(--t-xs); }
.fd-otras[open] summary::after { content: "▴"; }
.fd-otras-lista { display: grid; gap: var(--e1); margin-top: var(--e1); }
.fd-otras-lista > :is(button, .btn) { width: 100%; justify-content: flex-start; }
.fd-otras-lista > :is(button, .btn).fan { background: var(--card); border-color: var(--linea-fuerte); box-shadow: var(--sombra-xs); }  /* parejo con los demás */

/* (18-10) El enlace para el cliente: lo que ha hecho con él, en el resumen de la factura */
.fd-enlace { line-height: 1.6; }
.pl-texto { white-space: pre-wrap; }      /* la vista previa de una plantilla de correo (plantillas.js): respeta los saltos de línea del texto */

/* ── Tu propio diseño de factura (diseno_factura.js): la hoja con sus recuadros arrastrables ── */
.dis-pt { margin-left: var(--e2); }
.dis-subir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e4); }
.dis-subir > div { flex: 1 1 22rem; min-width: 0; }
.dis-editor { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--e4); align-items: start; }
.dis-barra { margin-bottom: var(--e3); }
.dis-lienzo-caja { max-width: 46rem; }
.dis-lienzo { position: relative; width: 100%; aspect-ratio: 210 / 297; background-color: var(--papel); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; border: 1px solid var(--linea); border-radius: var(--r-sm); overflow: hidden; touch-action: none; user-select: none; }
.dis-zona { position: absolute; box-sizing: border-box; border: 1.5px dashed var(--marca); background: color-mix(in srgb, var(--marca) 12%, transparent); color: var(--marca); font-size: var(--t-xs); line-height: 1.2; padding: 1px var(--e1); overflow: hidden; cursor: move; }
.dis-zona > span { pointer-events: none; font-weight: 600; }
.dis-zona.sel { border-style: solid; background: color-mix(in srgb, var(--marca) 24%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 45%, transparent); z-index: 2; }
.dis-zona.apagada { display: none; }
.dis-zona.fija { cursor: grab; }
.dis-zona:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.dis-asa { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; background: var(--marca); cursor: nwse-resize; border-top-left-radius: var(--r-xs); }
.dis-der { display: grid; gap: var(--e3); }
.dis-lista { display: grid; gap: var(--e1); }
.dis-item { padding: var(--e1) var(--e2); border-radius: var(--r-sm); cursor: pointer; }
.dis-item:hover { background: var(--fondo); }
.dis-item.sel { background: color-mix(in srgb, var(--marca) 14%, transparent); }
.dis-chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.dis-previa img { display: block; width: 100%; height: auto; border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--papel); }
@media (max-width: 980px) { .dis-editor { grid-template-columns: minmax(0, 1fr); } .dis-lienzo-caja { max-width: none; } }

/* Unidad de una línea (precio por hora…) y títulos de sección */
.fd-cant { display: flex; gap: 2px; align-items: center; }
.fd-cant > input { flex: 1 1 0; width: auto; min-width: 0; }
.fd-c > select.fd-u { flex: none; width: 3.4rem; padding-left: var(--e1); color: var(--tenue); font-size: var(--t-xs); }
.fd-c > select.fd-u:focus, .fd-c > select.fd-u:hover:not(:disabled) { color: var(--texto); }
.fd-lin.fd-titulo { grid-template-columns: minmax(0, 1fr) 2rem; }
.fd-titulo .fd-c > input { font-weight: 600; font-size: var(--t-md); }
.fd-titulo .fd-v { display: block; padding: var(--e2) var(--e2) 0; font-size: var(--t-md); }
.fd-anadir-fila { display: flex; flex-wrap: wrap; gap: var(--e2); }
.vp-lin .vp-titulo td { padding-top: var(--e2); }
@media (max-width: 720px) {
  .fd-lin.fd-titulo { grid-template-columns: minmax(0, 1fr); }
  .fd-lin.fd-titulo .fd-con { padding-right: 2.25rem; }
  .fd-lin .fd-cant { grid-column: span 1; }
}


/* ── Lista de facturas y demás documentos, estilo hoja de cálculo como la de gastos (20-10, Iker): rayas entre columnas, cabecera con fondo y una sola línea por fila.
   La nota del cliente, lo cobrado y lo demás van al título de la celda (el texto que sale al pasar el ratón). Con la caja estrecha sigue siendo una tarjeta por documento. ── */
@container (min-width: 761px) {
  .tabla-ventas th, .tabla-ventas td { border-right: 1px solid var(--linea-suave); }
  .tabla-ventas th:last-child, .tabla-ventas td:last-child { border-right: 0; }
  .tabla-ventas thead th { background: var(--sub); }
  .tabla-ventas td { padding-top: 4px; padding-bottom: 4px; }
  .tabla-ventas td .sub2:not(.aviso-validez) { display: none; }
  .tabla-ventas tbody tr:hover td { background: var(--hover); }
}