/* vendedores.css — la página Vendedores, la hoja de la vendedora y la lista de Reportes (42.6).
   Usa los colores y medidas de app.css; el modo oscuro sale de las mismas variables. */

.vend, .vr, .vh, .vend-ventana { --sobra: #6b4fb3; --sobra-fondo: #f1ecfb; }
html[data-theme="dark"] .vend, html[data-theme="dark"] .vr, html[data-theme="dark"] .vh, html[data-theme="dark"] .vend-ventana { --sobra: #b7a2f0; --sobra-fondo: #231d38; }

/* ===== Página ===== */
.vend-cab { gap: 8px 10px; }
.vend-cab select { min-width: 190px; }
.vend-fecha { display: inline-flex; align-items: center; gap: 6px; }
.vend-acciones { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; }
.vend-nueva { margin-left: 4px; }
/* Los botones de la cabecera miden lo mismo: la flecha ◀ sale de otra letra y con el alto de línea normal agrandaba el suyo. */
.vend-cab .btn { line-height: 1; }
.vend-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.vend-tabs button {
  border: none; background: none; cursor: pointer; padding: 9px 16px; font: inherit; font-weight: 700; font-size: 13px;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 40px;
}
.vend-tabs button:hover { color: var(--ink); }
.vend-tabs button.activa { color: var(--brand-2); border-bottom-color: var(--brand-2); }
/* N5-03: de noche --brand-2 sobre la tarjeta daba 3,9 a 1 en la pestaña activa (Hoja); el verde azulado claro de las demás pestañas de noche da 8,9. */
html[data-theme="dark"] .vend-tabs button.activa { color: #7ecbd6; border-bottom-color: #7ecbd6; }
.vend .alert { align-items: center; justify-content: space-between; }
.vend-saldo { font-size: 18px; font-variant-numeric: tabular-nums; }
.vend-pie { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.vend-arranque td { color: var(--muted); }
.vend-orden { width: 70px; }
.vend-productos td input:not([type="checkbox"]), .vend-productos td select {
  font: inherit; font-size: 13px; padding: 6px 8px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); min-height: 34px; max-width: 220px;
}
.vend-productos input[type="checkbox"] { width: 18px; height: 18px; }

/* ===== Ventanas ===== */
.vh-modal:focus { outline: none; }
.vh-modal .vh-pregunta { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.vh-modal .form input { width: 100%; }
.vh-modal .form [aria-invalid="true"] { border-color: var(--err); }
.vend-ventana { max-width: 1100px; }
.vend-ventana-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vend-ventana-cab h3 { margin: 0; }
.vend-ventana-cifra { margin-left: auto; font-size: 20px; font-variant-numeric: tabular-nums; }

/* ===== La hoja: un solo recuadro con los apartados adentro ===== */
.vh { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); min-width: 0; }
.vh-sec { padding: 14px 16px; min-width: 0; }
.vh-sec + .vh-sec { border-top: 1px solid var(--line); }
/* Con «.vh» delante: `.modal h3` de app.css pesa más que una sola clase y agrandaría los títulos dentro de la ventana de Reportes. */
.vh .vh-tit { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.vh-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.vh-valor { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; }
.vh-et { font-size: 12px; font-weight: 700; color: var(--muted); }
.vh-tot { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.vh-cifra { display: inline-block; line-height: 34px; font-variant-numeric: tabular-nums; }

.vh-in {
  font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; width: 84px; min-height: 34px; padding: 5px 8px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}
.vh-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 79, 90, 0.1); }
.vh-cel { width: 66px; }
.vh-det, .vh-largo, .vh-nota { text-align: left; width: 100%; }

/* 1) Productos: una sola tabla. Cada producto es su propio tbody: la fila principal, sus precios 2 a 4 y su error. */
.vh-tabla-caja { overflow-x: auto; max-width: 100%; }
/* app.css da a las celdas «nowrap», relleno de 10px 13px, th fijo arriba y fondo al pasar el mouse: dentro de la hoja no. */
.vh .vh-tabla th, .vh .vh-tabla td { white-space: normal; border-bottom: 0; text-align: left; vertical-align: top; }
.vh .vh-tabla th { position: static; }
.vh .vh-tabla tbody tr:hover td, .vh .vh-tabla tbody tr:active td { background: transparent; }
.vh .vh-tabla .vh-grupo td { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.vh .vh-tabla .vh-linea-error td { font-size: 12px; font-weight: 700; color: var(--err); }

.vh-nombre { display: block; padding-top: 7px; font-size: 13.5px; font-weight: 800; line-height: 20px; }
.vh-sub { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.vh-uni + .vh-bultos:not(:empty)::before { content: ' · '; }
.vh-pesos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vh-celdas { display: flex; flex-wrap: wrap; gap: 5px; }
.vh-suma { font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.vh-suma::before { content: '= '; }
.vh-refs { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.vh-ref { white-space: nowrap; }
/* Lo facturable al precio 1 (el total menos los precios 2 a 4): solo con precios 2 a 4, para poder seguir la cuenta del renglón. */
.vh-cant1 { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.vh-cant1:empty { display: none; }
.vh-mas { display: flex; margin: 6px 0 0 auto; white-space: nowrap; }
.vh-tramo .vh-et { display: block; padding-left: 14px; line-height: 34px; }

/* Escritorio y tableta: si la tabla no cabe, se desplaza de lado dentro de su caja (nunca la página). */
@media (min-width: 641px) {
  .vh .vh-tabla { min-width: 680px; }
  .vh .vh-tabla th, .vh .vh-tabla td { padding: 8px 7px; }
  .vh .vh-tabla th:first-child, .vh .vh-tabla td:first-child { padding-left: 10px; }
  .vh .vh-tabla th:last-child, .vh .vh-tabla td:last-child { padding-right: 10px; }
  .vh .vh-tabla .num { text-align: right; }
  .vh .vh-tabla th { padding-top: 2px; border-bottom: 1.5px solid var(--line-strong); }
  .vh .vh-tabla .vh-grupo td { padding-top: 16px; padding-bottom: 6px; }
  .vh .vh-tabla thead + .vh-grupo td { padding-top: 10px; }
  .vh .vh-tabla .vh-prod > tr:first-child > td { border-top: 1px solid var(--line); }
  .vh .vh-tabla .vh-con-error > tr:first-child > td:first-child { box-shadow: inset 3px 0 0 var(--err); }
  .vh .vh-tabla .vh-tramo td, .vh .vh-tabla .vh-linea-error td { padding-top: 0; }
  .vh .vh-tabla tfoot td { padding-top: 6px; padding-bottom: 4px; border-top: 1.5px solid var(--line-strong); font-weight: 800; line-height: 34px; }
}
/* Tableta y pantallas medianas: casillas más angostas y dos pesos por línea para que quepan las siete columnas sin desplazar la tabla. */
@media (min-width: 641px) and (max-width: 1259px) {
  .vh-sec { padding-left: 12px; padding-right: 12px; }
  .vh .vh-tabla .vh-cel { width: 58px; }
  .vh .vh-tabla td.num .vh-in { width: 72px; }
  .vh .vh-tabla td[data-et="Entregado"] .vh-pesos, .vh .vh-tabla td[data-et="Devuelto"] .vh-pesos { min-width: 121px; }
}
@media (min-width: 641px) and (max-width: 880px) {
  .vh .vh-tabla th, .vh .vh-tabla td { padding-left: 5px; padding-right: 5px; }
}
/* Pantalla ancha: el nombre en una o dos líneas, dos pesos en Devuelto, tres en Entregado y las dos referencias en una sola línea. */
@media (min-width: 1260px) {
  .vh .vh-tabla th:first-child, .vh .vh-tabla .vh-c-prod { min-width: 132px; }
  .vh .vh-tabla th:nth-child(6), .vh .vh-tabla td[data-et="Precio"] { min-width: 148px; }
  .vh .vh-tabla td[data-et="Entregado"] .vh-pesos { min-width: 198px; }
  .vh .vh-tabla td[data-et="Devuelto"] .vh-pesos { min-width: 137px; }
}

/* 2) Cobros, Créditos y Gastos */
.vh-tres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.vh-movs { min-width: 0; }
.vh-filas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.vh-mov { display: flex; align-items: center; gap: 6px; }
.vh-mov .vh-in:first-child { flex: 0 0 96px; }
.vh-mov .vh-det { flex: 1 1 auto; min-width: 0; }
.vh-quitar { font-size: 18px; line-height: 1; padding: 2px 8px; }

/* 3) Cierre: el efectivo y el crédito a la izquierda; el resumen, como un comprobante, a la derecha */
.vh-cierre { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.vh-cierre-izq { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding-right: 24px; }
.vh-billetes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 10px; }
.vh-bill { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "et tot" "in in"; align-items: baseline; gap: 3px 8px; min-width: 0; }
.vh-bill .vh-et { grid-area: et; }
.vh-bill .vh-tot { grid-area: tot; text-align: right; }
.vh-bill .vh-in { grid-area: in; width: 100%; }
.vh-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.vh-fila.vh-corta { grid-template-columns: 96px auto; justify-content: start; }

.vh-resumen { align-self: stretch; min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.vh-resumen .vh-tit { margin-bottom: 6px; }
.vh-r { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: baseline; gap: 0 8px; padding: 5px 0; font-size: 13px; }
.vh-signo { text-align: center; font-weight: 700; color: var(--muted); }
.vh-r b { text-align: right; font-variant-numeric: tabular-nums; }
.vh-cuadrar { grid-column: 2 / -1; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.vh-cuadrar b { font-weight: 700; }
.vh-r[data-r="esperado"], .vh-r[data-r="anterior"] { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-strong); }
.vh-r[data-r="esperado"], .vh-r[data-r="final"] { font-weight: 800; }
.vh-r[data-r="diferencia"] b { font-size: 18px; }
.vh-r[data-r="diferencia"].vh-falta b { color: var(--err); }
.vh-r[data-r="diferencia"].vh-sobra b { color: var(--sobra); }
.vh-avisos { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.vh-avisos:empty { display: none; }
.vh-aviso, .vh-aviso-error { font-size: 12px; font-weight: 700; border-radius: 8px; padding: 6px 9px; }
.vh-aviso { background: var(--warn-light); color: var(--warn); }
.vh-aviso-error { background: var(--err-light); color: var(--err); }

/* Solo lectura: sin cajas, solo las cifras */
.vh-ro .vh-in { border-color: transparent; background: transparent; box-shadow: none; padding: 5px 4px; cursor: default; }
.vh-ro .vh-cel { width: auto; min-width: 34px; max-width: 70px; }
.vh-ro .vh-bill .vh-in { padding-left: 0; text-align: left; }
.vh-ro .vh-in[value=""] { display: none; }
/* De noche, `.modal input` de app.css (más específica) les devolvía la caja dentro de la ventana de Reportes. */
html[data-theme="dark"] .vh-ro .vh-in { border-color: transparent; background: transparent; }

/* Dentro de la ventana de Reportes el recuadro va sin borde ni sombra: la ventana ya es el recuadro. */
.vend-ventana .vh { border: none; border-radius: 0; box-shadow: none; }
.vend-ventana .vh-sec { padding-left: 0; padding-right: 0; }

/* Pantalla ancha: los tres movimientos lado a lado */
@media (min-width: 1080px) {
  .vh-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* Teléfono: una columna, y la tabla se apila (cada producto es un bloque con sus campos rotulados) */
@media (max-width: 640px) {
  .vend-cab select { width: 100%; min-width: 0; }
  .vend-fecha { width: 100%; }
  .vend-fecha input { flex: 1 1 auto; min-width: 0; }
  .vend-acciones { margin-left: 0; width: 100%; }
  .vend-acciones .btn { flex: 1 1 auto; }
  .vend-nueva { margin-left: 0; }
  .vend-ventana-cifra { margin-left: 0; }

  .vh-sec { padding: 12px; }
  .vh-in { min-height: 40px; font-size: 16px; }
  .vh-cifra { line-height: 40px; }
  .vh-quitar { min-width: 40px; min-height: 40px; }

  .vh-tabla-caja { overflow-x: visible; }
  .vh .vh-tabla, .vh .vh-tabla tbody, .vh .vh-tabla tfoot, .vh .vh-tabla tr, .vh .vh-tabla td { display: block; }
  .vh .vh-tabla thead { display: none; }
  .vh .vh-tabla td { padding: 0; }
  .vh .vh-tabla td:empty { display: none; }
  .vh .vh-tabla td[data-et]::before { content: attr(data-et); display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
  .vh .vh-tabla td.vh-c-prod[data-et]::before, .vh .vh-tabla td.vh-c-total[data-et]::before { content: none; }
  .vh .vh-tabla .vh-grupo td { padding: 14px 0 6px; }
  .vh .vh-tabla thead + .vh-grupo td { padding-top: 4px; }
  .vh .vh-tabla .vh-prod { padding: 12px 0 6px; border-top: 1px solid var(--line); }
  .vh .vh-tabla .vh-con-error { padding-left: 10px; box-shadow: inset 3px 0 0 var(--err); }

  /* La fila principal: nombre y total arriba; después los campos, de a uno o de a dos */
  .vh .vh-tabla .vh-fila-prin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: start; }
  .vh .vh-tabla .vh-fila-prin > td { order: 2; }
  .vh .vh-tabla .vh-fila-prin > [data-et="Producto"] { order: 0; }
  .vh .vh-tabla .vh-fila-prin > [data-et="Total"] { order: 1; text-align: right; }
  .vh .vh-tabla .vh-fila-prin > [data-et="Entregado"], .vh .vh-tabla .vh-fila-prin > [data-et="Devuelto"], .vh .vh-tabla .vh-fila-prin > [data-et="Precio"] { grid-column: 1 / -1; }
  .vh-nombre { padding-top: 0; font-size: 15px; }
  .vh-c-total .vh-cifra { line-height: 20px; font-size: 15px; }
  .vh-refs { display: inline-block; margin: 0 0 0 8px; vertical-align: middle; }
  /* Precio: la casilla, las referencias y «Otro precio» en una línea y centrados entre sí (alineados por la línea base, el botón de 36 px
     quedaba 2.5 px más abajo que la casilla de 40). El rótulo «Precio» ocupa su propia línea. */
  .vh .vh-tabla td[data-et="Precio"] { display: flex; align-items: center; flex-wrap: wrap; }
  .vh .vh-tabla td[data-et="Precio"]::before { flex: 0 0 100%; }
  .vh-mas { display: inline-flex; margin: 0 0 0 8px; }

  .vh .vh-tabla .vh-tramo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 8px 0 0 10px; padding-left: 10px; border-left: 2px solid var(--line); }
  .vh .vh-tabla .vh-tramo > [data-et="Producto"], .vh .vh-tabla .vh-tramo > [data-et="Detalle"] { grid-column: 1 / -1; }
  .vh-tramo .vh-et { padding-left: 0; line-height: 1.4; font-size: 13px; }
  .vh .vh-tabla .vh-linea-error td { padding-top: 8px; }

  .vh .vh-tabla tfoot tr { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1.5px solid var(--line-strong); }
  .vh .vh-tabla tfoot td { font-weight: 800; }

  /* Solo lectura: las cifras a la izquierda, debajo de su rótulo, y no se rotula lo que está vacío */
  .vh-ro .vh-tabla .vh-in { padding-left: 0; text-align: left; }
  .vh-ro .vh-tabla .vh-cel { max-width: 56px; }
  .vh-ro .vh-tabla td[data-et="Entregado"]:not(:has(.vh-cel)), .vh-ro .vh-tabla td[data-et="Devuelto"]:not(:has(.vh-cel)),
  .vh-ro .vh-tabla td[data-et="Falto"]:has(> .vh-in[value=""]), .vh-ro .vh-tabla td[data-et="Precio"]:has(> .vh-in[value=""]) { display: none; }

  .vh-cierre { grid-template-columns: minmax(0, 1fr); }
  .vh-cierre-izq { padding-right: 0; }
  .vh-resumen { margin-top: 18px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
/* Pantallas muy angostas: con subtotales de cuatro cifras («1,200.00») el subtotal no cabe al lado del rótulo y se pega al de la columna
   siguiente. Siguen las tres columnas: rótulo, casilla y, debajo, el subtotal (con su alto reservado para que la hoja no salte al escribir). */
@media (max-width: 360px) {
  .vh-bill { grid-template-columns: minmax(0, 1fr); grid-template-areas: "et" "in" "tot"; }
  .vh-bill .vh-tot { min-height: 16px; line-height: 16px; }
  .vh-ro .vh-bill .vh-tot { text-align: left; }
}

/* ===== Lista en Reportes ===== */
.vr-hoy { margin-bottom: 14px; padding: 12px 16px; }
.vr-hoy .card-header { margin-bottom: 8px; padding-bottom: 8px; }
.vr-fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.vr-ficha { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line-strong); background: var(--card); }
.vr-ficha.con { color: var(--brand); background: var(--brand-light); border-color: transparent; }
.vr-totales { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 13px; }
.vr-totales:empty { display: none; }
.vr-tot span { color: var(--muted); font-weight: 600; }
.vr-tot b { font-variant-numeric: tabular-nums; }
.vr-vacio { text-align: center; color: var(--muted); padding: 28px 12px; }
.vr-acc { text-align: right; }
.vr-mas { display: flex; justify-content: center; margin-top: 12px; }
tbody tr.vr-sobrante td { background: var(--sobra-fondo); }
tbody tr.vr-sobrante:hover td { background: var(--sobra-fondo); filter: brightness(0.97); }
tbody tr.vr-sobrante td:first-child { box-shadow: inset 3px 0 0 var(--sobra); }
tbody tr.fila-alerta .vr-dif { color: var(--err); font-weight: 800; }
tbody tr.vr-sobrante .vr-dif { color: var(--sobra); font-weight: 800; }
html[data-theme="dark"] tbody tr.fila-alerta td { background: #2a1c1a; }