/* Copia exacta de INF_CSS (pantallas/04-administracion/2340-InformesGVPanel.js). Se regenera con herramientas/informes/catalogo.mjs. */
.inf-root {
  /* ESTA PALETA CLAVABA EL MODO OSCURO (14/09/2026, Ramiro: «Liquidación no
     se lee»). Acá adentro viven los informes y Liquidación de Comisiones, y
     el bloque repetía la paleta oscura con los colores escritos a mano. Con
     el modo claro prendido quedaba lo peor de los dos mundos: el fondo se
     mantenía oscuro porque salía de acá, y la letra se ponía oscura porque
     la pinta la regla general del tema. Negro sobre negro.
     Ahora no declara fondo ni tinta: los hereda del tema, como el resto. El
     respaldo oscuro sigue en cada uso, para cuando se abra suelto. */
  --green:#4caf6d; --red:#e2574c; --accent-texto:#131824;
  /* LA TINTA APAGADA, MUCHO MÁS CLARA. Ramiro: «en modo oscuro la letra va
     blanca en todos lados, salvo lo que esté marcado en otro color a
     propósito». Estaba en #8b93a1, que se lee pero se ve gris. Sigue un
     escalón por debajo de la tinta plena para que la jerarquía se note, pero
     ahora es casi blanca. */

  /* Faltaba: nueve reglas la usaban y ninguna hoja la declaraba, así que
     siempre caían al respaldo oscuro. En modo claro eso pintaba de negro los
     tildes de Cobranzas, Seguros y compañía, con la letra encima. */

  /* Gris más claro para el texto chico del pie: a 10px el gris apagado
     no se lee, aunque en el papel pase el mínimo de contraste. */
  --text-ind:#ffffff;
  background:var(--bg, #131824); color:var(--text, #ecf0f4); font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  display:flex; flex-direction:column; height:100%; min-height:0; max-height:100%; overflow:hidden; font-size:12px; position:relative;
}
.inf-root * { box-sizing:border-box; }

.inf-root .inf-dealer { display:flex; align-items:center; gap:5px; background:var(--panel); border:1px solid var(--border); color:var(--text); font-family:inherit; font-size:11px; padding:2px 9px 2px 3px; border-radius:14px; cursor:pointer; }
.inf-root .inf-dealer--on { background:var(--panel-2); font-weight:600; }

.inf-root .inf-body { display:flex; flex:1; min-height:0; overflow:hidden; }

.inf-root .inf-side-sec--on { color:var(--text); }
.inf-root .inf-side-item--on { background:var(--panel-2); border-left-color:var(--accent-amber); color:var(--text); font-weight:600; }
.inf-root .inf-tag { font-size:10px; text-transform:uppercase; letter-spacing:.4px; padding:1px 4px; border-radius:4px; background:rgba(76,175,109,.16); color:var(--text); border:1px solid rgba(76,175,109,.35); }
.inf-root .inf-tag--new { background:rgba(226,87,76,.14); color:var(--red); border-color:rgba(226,87,76,.4); }

.inf-root .inf-main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; padding:8px 10px; gap:7px; overflow:hidden; }


.inf-root .inf-filtros { display:flex; align-items:flex-end; flex-wrap:wrap; gap:8px; padding:6px 8px; background:var(--panel); border:1px solid var(--border); border-radius:7px; }
.inf-root .inf-filtro { display:flex; flex-direction:column; gap:2px; }
.inf-root .inf-filtro > span { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text); }
.inf-root .inf-filtro select, .inf-root .inf-filtro input { background:var(--panel-2); border:1px solid var(--border); color:var(--text); font-family:inherit; font-size:11.5px; padding:3px 6px; border-radius:5px; }
.inf-root .inf-filtro input { width:96px; }
/* yp: «Desde / Hasta» con la fecha entera a la vista (con 96 px se cortaba el año). */
.inf-root .inf-filtro input[type="date"] { width:116px; }
.inf-root .inf-filtro--busq input { width:200px; }
.inf-root .inf-filtros-sep { flex:1; }
.inf-root .inf-btn { background:var(--panel-2); border:1px solid var(--border); color:var(--text); font-family:inherit; font-size:11.5px; padding:4px 9px; border-radius:5px; cursor:pointer; }
.inf-root .inf-btn:hover { border-color:var(--accent-amber); color:var(--text); }
.inf-root .inf-btn--print { border-color:var(--accent-blue); color:var(--text); }
.inf-root .inf-btn--abrir { width:100%; padding:8px; background:var(--accent-blue); border-color:var(--accent-blue); color:var(--casa-activa-tinta, #fff); font-size:12px; font-weight:600; }
.inf-root .inf-btn--abrir:hover { color:#fff; filter:brightness(1.12); }

.inf-root .inf-cols-panel { display:flex; flex-wrap:wrap; gap:4px 14px; padding:8px; background:var(--panel-2); border:1px solid var(--border); border-radius:7px; }
.inf-root .inf-cols-nota { width:100%; font-size:10.5px; color:var(--text); margin-bottom:2px; }
.inf-root .inf-col-chk { display:flex; align-items:center; gap:4px; font-size:11px; cursor:pointer; }
.inf-root .inf-cols-sep { width:100%; margin:5px 0 1px; padding-top:5px; border-top:1px solid var(--border); font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--text); }
.inf-root .inf-col-chk--extra { color:var(--text); }

.inf-root .inf-nota { font-size:11px; color:var(--text); background:rgba(232,163,61,.09); border:1px solid rgba(232,163,61,.3); border-radius:6px; padding:5px 8px; }

.inf-root .inf-tabla-wrap { flex:1 1 0; min-height:110px; overflow:auto; border:1px solid var(--border); border-radius:7px; background:var(--panel); }
.inf-root .inf-tabla { display:block; }
.inf-root .inf-thead { display:block; position:sticky; top:0; z-index:5; background:var(--panel-2, #232932); }
.inf-root .inf-tbody { display:block; }
.inf-root .inf-tr { display:flex; }
.inf-root .inf-th { flex:0 0 auto; padding:5px 4px; font-size:10.5px; font-weight:600; text-align:center; border-right:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; }
.inf-root .inf-th > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inf-root .inf-th--n, .inf-root .inf-td--n { width:38px; flex:0 0 38px; color:var(--text); text-align:center; }
.inf-root .inf-td--ficha:hover { background:var(--accent-blue); color:var(--casa-activa-tinta, #fff); }
.inf-root .inf-td { flex:0 0 auto; padding:3.5px 4px; font-size:11px; border-right:1px solid rgba(42,48,56,.6); border-bottom:1px solid rgba(42,48,56,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inf-root .inf-tr--data { cursor:pointer; }
.inf-root .inf-tr--data:hover { background:rgba(79,142,247,.12); }
.inf-root .inf-tr--sel { background:rgba(232,163,61,.16); }
.inf-root .inf-grupo1 { padding:4px 8px; background:var(--panel-2, #2b323c); font-size:11px; font-weight:700; letter-spacing:1px; text-align:center; color:var(--text); border-bottom:1px solid var(--border); position:sticky; left:0; }
.inf-root .inf-grupo2 {
  padding:3px 8px; font-size:11px; font-weight: 700; letter-spacing:.8px; text-align:center;
  /* La marca abre un bloque: tiene que verse como un corte, no como una fila
     más apagada. Texto en el color del sistema y una línea arriba que separe
     del bloque anterior. */
  color:var(--text); background:rgba(255,255,255,.055);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  position:sticky; left:0;
}
.inf-root .inf-vacio { padding:26px; text-align:center; color:var(--text); font-style:italic; }

.inf-root .inf-paneles { display:flex; flex-wrap:wrap; gap:8px; }
.inf-root .inf-panel { flex:1 1 300px; min-width:0; background:var(--panel); border:1px solid var(--border); border-radius:7px; padding:7px 9px; }
.inf-root .inf-panel-tit { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--text); margin-bottom:4px; }
.inf-root .inf-panel-tabla { width:100%; border-collapse:collapse; font-size:10.5px; }
.inf-root .inf-panel-tabla th { text-align:center; color:var(--text); font-weight:600; border-bottom:1px solid var(--border); padding:2px 4px; }
.inf-root .inf-panel-tabla td { padding:1.5px 4px; border-bottom:1px solid rgba(42,48,56,.5); }
.inf-root .inf-panel-tabla .inf-num { text-align:right; }
.inf-root .inf-panel-tabla .inf-venc td { color:var(--red); font-weight:600; }
.inf-root .inf-panel-tot td { font-weight:700; border-top:1px solid var(--border); }
.inf-root .inf-barra-fila { display:flex; align-items:center; gap:7px; margin:3px 0; }
.inf-root .inf-barra-lbl { flex:0 0 158px; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inf-root .inf-barra { flex:1; height:11px; background:var(--panel-2); border-radius:3px; overflow:hidden; }
.inf-root .inf-barra i { display:block; height:100%; background:var(--accent-blue); }

.inf-root .inf-pie { display:flex; align-items:stretch; flex-wrap:wrap; gap:7px; flex:0 0 auto; }
.inf-root .inf-paneles { flex:0 0 auto; max-height:190px; overflow:auto; }
.inf-root .inf-pie-ayuda { display:block; font-size:10px; color:var(--text); margin-top:2px; }
.inf-root .inf-pie-total { display:block; padding:7px 12px; background:var(--panel-2); border:1px solid var(--accent-amber); border-radius:7px; }
.inf-root .inf-ind { flex:1 1 128px; padding:6px 9px; background:var(--panel); border:1px solid var(--border); border-radius:7px; min-width:0; }
.inf-root .inf-ind-label { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text); line-height:1.25; }
.inf-root .inf-ind-valor { font-size:16px; font-weight:700; color:var(--text); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inf-root .inf-ind-nota { font-size:10px; color:var(--text); }

.inf-root .inf-drawer { position:absolute; top:0; right:0; bottom:0; width:340px; display:flex; flex-direction:column; background:var(--panel); border-left:2px solid var(--accent-blue); box-shadow:-10px 0 26px rgba(0,0,0,.45); z-index:40; }
.inf-root .inf-drawer-body { flex:1; min-height:0; overflow:auto; }
.inf-root .inf-drawer-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:var(--panel-2, #232932); border-bottom:1px solid var(--border); font-size:11.5px; color:var(--text); }
.inf-root .inf-drawer-head button { background:transparent; border:0; color:var(--text); font-size:16px; cursor:pointer; }
.inf-root .inf-drawer-body { padding:8px 9px; font-size:11px; color:var(--text); }
.inf-root .inf-cargando { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--text); }
.inf-root .inf-demo { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--accent-texto,#131824); background:var(--accent-amber); border-radius:4px; padding:2px 7px; }
.inf-root .inf-dato { display:flex; gap:8px; padding:2.5px 0; border-bottom:1px solid rgba(42,48,56,.55); }
.inf-root .inf-dato-lbl { flex:0 0 44%; font-size:10.5px; color:var(--text); text-transform:uppercase; letter-spacing:.3px; }
.inf-root .inf-dato-val { flex:1; font-size:11.5px; color:var(--text); word-break:break-word; }
.inf-root .inf-drawer-pie { flex:0 0 auto; padding:9px 10px; border-top:1px solid var(--border); }
.inf-root .inf-ind-label { white-space:normal; }
.inf-root .inf-drawer-body pre { font-size:10.5px; white-space:pre-wrap; word-break:break-all; color:var(--text); margin:6px 0 0; }

@media (max-width: 820px) {
  .inf-root .inf-filtro--busq input { width:130px; }
  .inf-root .inf-drawer { width:100%; }
}

/* Los tres controles que reemplazan a la fila larga de variantes. Van al
   final del bloque: acá adentro, una regla insertada antes de otra de la
   misma especificidad queda pisada y no tiene efecto. */
@media (max-width: 820px) {
}

/* Índice de informes: una lista con el nombre de la sección arriba */
/* Dónde estoy parado: el nombre del informe abre el renglón del buscador.
   Es un rótulo, no un botón: el informe se cambia desde «Informes VN / VO»
   de la barra de arriba, que es el único menú que quedó. */
.inf-root .inf-donde-fila {
  font-weight: 700; font-size: 13px; white-space: nowrap;
  padding-right: 10px; margin-right: 2px;
  border-right: 1px solid var(--border, #2b3348);
}

/* Vistas del informe, al lado del buscador */
.inf-root .inf-vistas { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.inf-root .inf-vista {
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, #2b3348); background: transparent;
  color: var(--text); font-size: 12px; font-family: inherit; white-space: nowrap;
}
.inf-root .inf-vista:hover { color: inherit; border-color: currentColor; }
.inf-root .inf-vista--on {
  background: var(--vnv-marca, var(--accent-amber, #f2c200));
  border-color: var(--vnv-marca, var(--accent-amber, #f2c200));
  color: var(--vnv-marca-txt, #131824); font-weight: 700;
}
/* Raya fina entre las tres tandas de subtemas (vistas · filtros ·
   totalizados): se ve que son cosas distintas sin gastar un rótulo. */
.inf-root .inf-vistas-sep {
  width: 1px; height: 18px; margin: 0 4px 5px;
  background: var(--border, #2b3348);
}
/* «display: contents» hace que los botones sean hijos directos de la fila, no
   un bloque aparte: así arrancan pegados al nombre del informe y siguen
   bajando de línea de a uno. Antes el grupo entero se iba a un renglón propio
   y el nombre quedaba solo arriba. */
.inf-root .inf-vistas { display: contents; }
/* Con muchos subtemas (Stock de 0km tiene trece) los botones bajan de línea
   dentro de SU renglón, sin arrastrar al de abajo. */
.inf-root .inf-filtros { flex-wrap: wrap; }
/* Los dos renglones se pegan uno al otro: son una sola barra partida en dos,
   no dos bloques sueltos. */
.inf-root .inf-filtros--subtemas { padding-bottom: 2px; }
.inf-root .inf-filtros--acciones { padding-top: 2px; border-top: 0; }
/* El buscador tampoco crece acá: lo que sobra se lo lleva el separador y los
   tres botones quedan clavados contra la derecha, informe tras informe. */
.inf-root .inf-filtros--acciones .inf-filtro--busq { flex: 0 1 260px; }
/* El buscador no crece: si creciera se comería el hueco y empujaría a
   Columnas / Excel / Imprimir al renglón de abajo. Lo que sobra se lo lleva
   el separador, que es el que empuja los botones contra la derecha. */
.inf-root .inf-filtro--busq { flex: 0 1 210px; min-width: 150px; }
.inf-root .inf-filtro--busq input { width: 100%; }
.inf-root .inf-filtros-sep { flex: 1 1 0; min-width: 0; }
/* La fila alinea todo por abajo (los filtros tienen su rótulo arriba), así
   que el nombre y los botones bajan un poco para quedar a la misma altura. */
.inf-root .inf-donde-fila { padding-bottom: 4px; }
.inf-root .inf-vistas { padding-bottom: 1px; }

/* Fotos del informe (24/09/2026, Ramiro · kl) */
.inf-root .inf-fotos { padding: 8px 14px 10px; border-bottom: 1px solid var(--border, #252d3f); }
.inf-root .inf-fotos-nota { font-size: 11.5px; color: var(--text); margin: 0 0 6px; }
.inf-root .inf-fotos-env { overflow-x: auto; }
.inf-root .inf-fotos-tabla { border-collapse: collapse; font-size: 12px; min-width: 380px; }
.inf-root .inf-fotos-tabla th, .inf-root .inf-fotos-tabla td {
  border: 1px solid var(--border, #252d3f); padding: 4px 9px; white-space: nowrap; text-align: right; }
.inf-root .inf-fotos-tabla th:first-child, .inf-root .inf-fotos-tabla td:first-child { text-align: left; }
.inf-root .inf-fotos-tabla th { background: var(--panel-2, #151b28); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em; }
.inf-root .inf-dif { font-size: 10.5px; font-weight: 700; margin-left: 4px; }
.inf-root .inf-dif.sube { color: var(--text); }
.inf-root .inf-dif.baja { color: #d05a4f; }
.inf-root .inf-fotos-pie { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }