/* ventana.css — la ventana de reporte (42.6). Cada tarea escribe solo en su archivo.
   Va después de app.css: las reglas con el mismo peso ganan acá. Colores del panel 42.5 (variables de app.css). */

#modal-cuadre {
  --vt-morado: #6b4bb0;
  --vt-morado-claro: #efeafb;
  --vt-rojo-claro: var(--err-light);
}
html[data-theme="dark"] #modal-cuadre {
  --vt-morado: #b9a2ee;
  --vt-morado-claro: #231c38;
  --vt-rojo-claro: #2a1512;
}

/* ===== Marco: cabecera, dos columnas y pie ===== */
.modal-ventana {
  max-width: 1280px;
  width: 96vw;
  height: min(92vh, 920px);
  height: min(92dvh, 920px);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vt-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vt-cab h3 { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
#cuadre-info { font-size: 18px; line-height: 1.3; }
#cuadre-info strong { font-weight: 800; }
.vt-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.vt-meta:empty { display: none; }
.vt-x {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
}
.vt-x:hover { background: var(--line); }

.vt-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; line-height: 1; padding: 5px 10px; border-radius: 999px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
.vt-tag.estado-revisado { background: var(--ok-light); color: var(--ok); border-color: #c4e6cf; }
.vt-tag.estado-enviado { background: #e7f0fb; color: #1a5a9c; border-color: #cfe1f5; }
.vt-tag.rojo { background: var(--err); color: #fff; border-color: transparent; }
/* Tema oscuro: los mismos tonos que las etiquetas de estado de la 42.5 (app.css, .badge-enviado y .badge-revisado) */
html[data-theme="dark"] .vt-tag.estado-enviado { background: #132638; color: #7db4e8; border-color: #1e3a55; }
html[data-theme="dark"] .vt-tag.estado-revisado { background: #122a1b; color: #7fd39a; border-color: #1f4430; }

#cuadre-loading { padding: 40px 0; text-align: center; color: var(--muted); }

#cuadre-split.vt-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 22px;
  flex: 1 1 auto;
  min-height: 0;
}
#cuadre-split[hidden] { display: none !important; }

/* Izquierda: el visor se queda quieto */
.vt-fotos { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
#cuadre-visor:not([hidden]) {
  display: flex; flex: 1 1 auto; min-height: 0; position: static;
  flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius);
  background: var(--ink); color: #fff;
}
html[data-theme="dark"] #cuadre-visor:not([hidden]) { background: #0b1214; border: 1px solid var(--line-strong); }
.vt-fotos .cv-lienzo { height: auto; flex: 1 1 auto; min-height: 240px; }
.vt-fotos .cv-head { min-height: 14px; }
.vt-fotos .cuadre-fotos { margin: 0; }
.vt-fotos .cuadre-fotos:empty { display: none; }
.vt-fotos .cuadre-fotos .nofoto {
  display: block; width: 100%; padding: 36px 12px; text-align: center; font-style: normal;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted);
}
.cv-tira { flex: 0 0 auto; }
.cv-pie .btn.small { min-width: 78px; }

/* Derecha: aviso, placa y pestañas; el contenido se desplaza solo */
.vt-lado { min-height: 0; overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 12px; }
.vt-aviso-caja {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--err-light); color: var(--err); border: 1px solid #f4cfc8; font-weight: 600;
}
.vt-aviso-caja.revisar { border-color: var(--err); }
.vt-aviso-caja .num { font-size: 16px; }
html[data-theme="dark"] .vt-aviso-caja { color: #ff8b7c; border-color: #4b2a24; }

/* La placa de la diferencia */
.vt-placa-caja {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
}
.vt-placa-rotulo { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.vt-placa-cifra { font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.vt-placa-nota { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.vt-placa-caja.faltante { background: var(--vt-rojo-claro); border-color: #f4cfc8; }
.vt-placa-caja.faltante .vt-placa-cifra, .vt-placa-caja.faltante .vt-placa-nota, .vt-placa-caja.faltante .vt-placa-rotulo { color: var(--err); }
.vt-placa-caja.sobrante { background: var(--vt-morado-claro); border-color: #d9cdf3; }
.vt-placa-caja.sobrante .vt-placa-cifra, .vt-placa-caja.sobrante .vt-placa-nota, .vt-placa-caja.sobrante .vt-placa-rotulo { color: var(--vt-morado); }
html[data-theme="dark"] .vt-placa-caja.faltante { border-color: #4b2a24; }
/* N5-02: el rótulo DIFERENCIA quedaba con el rojo claro del tema (3,09 a 1 sobre la placa oscura) mientras la cifra y la nota ya usaban el rojo claro de noche. */
html[data-theme="dark"] .vt-placa-caja.faltante .vt-placa-cifra, html[data-theme="dark"] .vt-placa-caja.faltante .vt-placa-nota,
html[data-theme="dark"] .vt-placa-caja.faltante .vt-placa-rotulo { color: #ff8b7c; }
html[data-theme="dark"] .vt-placa-caja.sobrante { border-color: #3b305c; }
.vt-placa-caja.provisional .vt-placa-rotulo { font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.vt-pendiente { font-size: 13px; font-weight: 700; color: var(--brand-2); text-decoration: underline; width: fit-content; }
html[data-theme="dark"] .vt-pendiente { color: #7ecbd6; }

/* Pestañas */
.vt-pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.vt-pestana {
  border: none; background: none; cursor: pointer; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.vt-pestana:hover { color: var(--ink); }
.vt-pestana.activa { color: var(--brand); border-bottom-color: var(--brand); }
html[data-theme="dark"] .vt-pestana.activa { color: #7ecbd6; border-bottom-color: #7ecbd6; }

/* Contenido de las pestañas */
#cuadre-result[hidden] { display: none !important; }
.vt-titulo { margin: 18px 0 8px; font-size: 13px; font-weight: 800; }
.vt-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vt-sub h4 { margin: 0; font-size: 13px; font-weight: 800; }
.vt-nota { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg); font-size: 13px; }
.vt-nota-ambar { white-space: pre-line; color: #8a6d1a; background: var(--accent-light); }
.vt-aviso { margin: 10px 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bg); font-weight: 600; color: var(--muted); }
.vt-aviso-rojo { background: var(--err-light); color: var(--err); }
html[data-theme="dark"] .vt-aviso-rojo { color: #ff8b7c; }
.vt-total { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bg); font-weight: 700; }
.vt-total strong { font-size: 20px; }
.vt-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 8px 0; }
.vt-cifra { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); }
.vt-cifra span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.vt-cifra strong { font-size: 18px; font-weight: 800; }
.vt-cifra small { color: var(--muted); font-weight: 600; }
.vt-neg { color: var(--err); }
html[data-theme="dark"] .vt-neg { color: #ff8b7c; }

/* Cifras alineadas a la derecha con dígitos de ancho fijo */
#modal-cuadre .num, #modal-cuadre td.num, #modal-cuadre th.num, #modal-cuadre .cuadre-item .value, #modal-cuadre .gasto-monto {
  font-variant-numeric: tabular-nums;
}
#modal-cuadre th.num, #modal-cuadre td.num { text-align: right; }
.vt-tabla { width: 100%; }
.vt-tabla .empty { text-align: center; color: var(--muted); }
.vt-tabla td { white-space: nowrap; }
.vt-tabla td:first-child { white-space: normal; }
.det-cant { width: 90px; padding: 6px 8px; border: 2px solid var(--line); border-radius: 8px; text-align: right; background: #fff; font-size: 13px; }
html[data-theme="dark"] .det-cant { background: #131c1f; color: var(--ink); border-color: var(--line-strong); }
#modal-cuadre .table-wrap { overflow-x: auto; }
#modal-cuadre .cuadre-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#modal-cuadre .cuadre-item:hover { transform: none; }
#modal-cuadre .cuadre-item .value { font-size: 17px; }
#modal-cuadre .oficina-box h4 { font-size: 13px; }
.vt-apertura { margin-bottom: 12px; }
.vt-apertura label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; }
.vt-apertura input { width: 180px; padding: 8px 10px; border: 2px solid #b58a00; border-radius: 8px; font-size: 14px; background: #fff; }
html[data-theme="dark"] .vt-apertura input { background: #131c1f; color: var(--ink); }
.fd-nota { font-size: 11px; color: #8a6d1a; font-weight: 600; }
.fd-tabla input { width: 90px; padding: 5px 8px; border: 2px solid var(--line); border-radius: 8px; text-align: right; font-size: 12px; background: #fff; }
html[data-theme="dark"] .fd-tabla input { background: #131c1f; color: var(--ink); border-color: var(--line-strong); }
#modal-cuadre .oficina-inputs input:disabled { background: var(--bg); }
html[data-theme="dark"] #modal-cuadre .oficina-inputs input:disabled { background: #10181a; color: var(--muted); }
#modal-cuadre .gasto-item { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.version-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg); }
.version-box summary { cursor: pointer; }
.version-box .table-wrap { margin-top: 8px; }
.vt-lista { margin: 8px 0 0; padding-left: 18px; }

/* Pie: una sola barra, la acción principal a la derecha */
.vt-pie { margin-top: 14px; padding-top: 14px; flex-wrap: wrap; }
.vt-pie .btn[hidden] { display: none !important; }

/* ===== Teléfono y pantallas angostas: una columna ===== */
@media (max-width: 900px) {
  .modal-ventana { display: block; width: 100%; height: auto; max-height: 94vh; max-height: 94dvh; padding: 16px; overflow-y: auto; }
  #cuadre-split.vt-cuerpo { display: block; overflow: visible; flex: none; }
  .vt-fotos { margin-bottom: 14px; }
  #cuadre-visor:not([hidden]) { flex: none; }
  .vt-fotos .cv-lienzo { height: 42vh; min-height: 220px; flex: none; }
  .vt-lado { overflow: visible; padding-right: 0; }
  #cuadre-info { font-size: 16px; }
  .vt-placa-cifra { font-size: 32px; }
  .vt-pie { position: sticky; bottom: -16px; background: var(--card); margin: 12px -16px -16px; padding: 12px 16px; }
  .vt-pie .btn { flex: 1 1 auto; justify-content: center; }
  .vt-pie #btn-cuadre-eliminar { margin-right: 0 !important; }
  .vt-pestana { flex: 1 1 0; padding: 10px 6px; }
  #modal-cuadre .oficina-inputs label { flex: 1 1 45%; }
  #modal-cuadre .oficina-inputs input { width: 100%; }
}

/* N3-02: «Guardar cambios y recalcular» mide como los campos de su fila (Efectivo, Caja… Gastos), que van alineados por abajo: el campo
   mide 38 px con la letra de 14 px y 41 px con la de 16 px (tableta y celular, app.css); el botón pequeño medía 29 px y su centro quedaba
   4 px más abajo. El id pesa más que `.btn.small` y que los mínimos de .btn de cada ancho. */
#btn-guardar-factura { min-height: 38px; }
@media (max-width: 1120px) {
  #btn-guardar-factura { min-height: 41px; }
}

/* N-MOV-CIERRE: la tabla «Factura» de un cierre Enviado (con campos de Cantidad y Valor) medía 392 px en una hoja de 289 (celular de 375 px)
   y la columna Valor quedaba fuera de la ventana, que recorta. Campos y relleno más angostos (el campo sigue mostrando entero un valor de siete
   caracteres, «1250.00»), el nombre del producto en varias líneas y, si aun así no cabe (320 px), la hoja se desplaza de lado. Arriba de
   480 px la tabla cabe y no cambia. */
@media (max-width: 480px) {
  .fd-tabla input { width: 80px; padding-left: 4px; padding-right: 4px; }
  .fd-tabla th, .fd-tabla td { padding: 5px 4px; }
  .fd-tabla th:first-child, .fd-tabla td:first-child { white-space: normal; }
  .factura-detalle { overflow-x: auto; }
}

/* N5-04: en «Cierre automático» la tabla de siete columnas (Producto, Anterior, Llegó, Contó, Vendido, Precio, Valor) medía 496 px en una hoja de 331 (celular
   de 375 px): Precio y Valor quedaban fuera de la vista y nada decía que la hoja se desplaza de lado. Solo en esa pestaña (#cuadre-panel-auto), dos cosas:
   de 480 px para abajo el relleno entre columnas baja de 13 a 5 px (unos 110 px menos de tabla; con valores de miles de dólares sigue sin caber del todo) y la
   hoja muestra una sombra en cada borde por donde aún hay tabla: es la sombra de desplazamiento de siempre, dos capas `local` del color de la tarjeta
   (--vt-cubre) que van con la tabla y tapan las dos sombras fijas mientras no hay más tabla de ese lado; sin desbordar no se ve nada. Los encabezados son
   transparentes para que la sombra pase también por la fila de arriba. Medido en Chromium a 375 px, de día y de noche. */
#cuadre-panel-auto { --vt-cubre: 255, 255, 255; --vt-sombra: 23, 38, 43; --vt-sombra-a: 0.22; }
html[data-theme="dark"] #cuadre-panel-auto { --vt-cubre: 23, 33, 36; --vt-sombra: 143, 164, 161; --vt-sombra-a: 0.3; }
#cuadre-panel-auto .table-wrap {
  background:
    linear-gradient(to right, rgb(var(--vt-cubre)) 40%, rgba(var(--vt-cubre), 0)) 0 0 / 36px 100% no-repeat local,
    linear-gradient(to left, rgb(var(--vt-cubre)) 40%, rgba(var(--vt-cubre), 0)) 100% 0 / 36px 100% no-repeat local,
    linear-gradient(to right, rgba(var(--vt-sombra), var(--vt-sombra-a)), rgba(var(--vt-sombra), 0)) 0 0 / 22px 100% no-repeat scroll,
    linear-gradient(to left, rgba(var(--vt-sombra), var(--vt-sombra-a)), rgba(var(--vt-sombra), 0)) 100% 0 / 22px 100% no-repeat scroll;
}
#cuadre-panel-auto .vt-tabla th { background: transparent; }
@media (max-width: 480px) {
  #cuadre-panel-auto .vt-tabla th, #cuadre-panel-auto .vt-tabla td { padding-left: 5px; padding-right: 5px; }
}