/* ===========================================================================
   LOS BLOQUES QUE TODAS LAS PANTALLAS REPITEN (F1 §11.2: «componentes propios»)
   Sólo usan variables de diseno/salida/tokens.css. Ningún color ni tamaño suelto: así, cambiar un token cambia
   todas las pantallas a la vez (pedido de Ramiro, 29/10/2026). El auditor (A12) no deja pasar colores sueltos
   en las pantallas.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* UNA SOLA PERILLA DE TAMAÑO (regla aprendida en TCG, tanda zk = la ym de TCG: igual en todos los monitores, letra bien visible).
   --gg-escala la pone la pantalla según el monitor real, el zoom del navegador y el ajuste de la persona (Escala.cs), y va
   como «zoom» de <html>, igual que en TCG: así crece todo junto, lo copiado de TCG (en px) y lo propio de GG360 (en rem).
   Acá todo se mide como en un monitor de 1366 al 100 %. Lo que mide en vw/vh se divide por --tcg-z (la misma escala). */
html { font-size: 16px; zoom: var(--gg-escala, 1); }
body { margin: 0; background: var(--gg-fondo); color: var(--gg-texto); font: var(--gg-letra-base) / 1.4 var(--gg-letra-familia); }
/* LAS COPIAS DE TCG, CON LA LETRA BASE DE TCG (Ramiro, 29/10/2026: «letra igual a TCG»). TCG no le pone tamaño ni
   interlineado al cuerpo (16 px y «normal» del navegador); lo que en tcg.css no dice su tamaño lo hereda de acá. */
.tcg-app { font-size: 16px; line-height: normal; }

/* Pantalla: encabezado del color de la casa, contenido y pie. */
.gg-pantalla { position: relative; display: flex; flex-direction: column; min-height: 100dvh; max-width: var(--gg-pantalla-ancho-maximo); margin: 0 auto; }
.gg-encabezado, .gg-pie { background: var(--gg-casa); color: var(--gg-casa-tinta); padding: var(--gg-espacio-3) var(--gg-espacio-4); }
.gg-encabezado h1 { margin: 0; font-size: var(--gg-letra-titulo); font-weight: var(--gg-letra-peso-titulo); }
/* En el encabezado: la marca, el único menú (los sectores) y la casa elegida. */
.gg-encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gg-espacio-3); }
.gg-marca { color: inherit; text-decoration: none; font-size: var(--gg-letra-titulo); font-weight: var(--gg-letra-peso-titulo); }
.gg-menu { display: flex; flex: 1; gap: var(--gg-espacio-1); overflow-x: auto; }
.gg-menu__item { color: inherit; text-decoration: none; padding: var(--gg-espacio-1) var(--gg-espacio-2); border-radius: var(--gg-boton-radio);
  border: var(--gg-borde-ancho) solid transparent; white-space: nowrap; }
.gg-menu__item.active { border-color: currentColor; font-weight: var(--gg-letra-peso-titulo); }
.gg-casa { min-height: var(--gg-boton-alto); border-radius: var(--gg-boton-radio); border: var(--gg-borde-ancho) solid var(--gg-casa-tinta);
  background: var(--gg-casa); color: var(--gg-casa-tinta); font: inherit; padding: 0 var(--gg-espacio-2); }
@media (max-width: 700px) { .gg-menu { order: 3; flex-basis: 100%; } .gg-casa { margin-left: auto; } }
.gg-contenido { flex: 1; padding: var(--gg-espacio-4) var(--gg-pantalla-gutter-celular); }

/* Solapas con forma de carpeta, debajo del encabezado. */
.gg-solapas { display: flex; gap: var(--gg-espacio-1); border-bottom: var(--gg-borde-ancho) solid var(--gg-borde); overflow-x: auto; }
.gg-solapa { border: var(--gg-borde-ancho) solid var(--gg-borde); border-bottom: none; border-radius: var(--gg-borde-radio) var(--gg-borde-radio) 0 0;
  padding: var(--gg-espacio-2) var(--gg-espacio-3); background: var(--gg-superficie-2); color: var(--gg-texto); font: inherit; cursor: pointer; }
.gg-solapa { text-decoration: none; }
.gg-solapa[aria-selected="true"] { background: var(--gg-casa); color: var(--gg-casa-tinta); }

/* Botones de una misma fila, del mismo tamaño. */
.gg-botones { display: flex; flex-wrap: wrap; gap: var(--gg-espacio-2); }
.gg-boton { min-height: var(--gg-boton-alto); padding: 0 var(--gg-espacio-4); border-radius: var(--gg-boton-radio); border: var(--gg-boton-borde) solid var(--gg-borde);
  background: var(--gg-superficie); color: var(--gg-texto); font: inherit; cursor: pointer; flex: 1 1 0; }
.gg-boton > summary { line-height: var(--gg-boton-alto); list-style: none; text-align: center; cursor: pointer; }
.gg-boton > summary::-webkit-details-marker { display: none; }
/* En el pie, el texto a la izquierda y el botón (solo) a la derecha, de ancho fijo. */
.gg-pie .gg-botones { align-items: center; justify-content: space-between; }
.gg-pie .gg-boton { flex: 0 0 var(--gg-boton-ancho-solo); }
.gg-pie .gg-botones > span { flex: 1; }
.gg-boton--enlace { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.gg-boton--principal { background: var(--gg-casa); color: var(--gg-casa-tinta); border-color: var(--gg-casa); }

/* Ventana (modal). Encabezado y pie: un solo token para todas. Tamaño: un % de quien la abre (--gg-modal-escala),
   así una ventana abierta desde otra ventana nunca es igual o más grande que la que la abrió. */
/* La capa de una ventana va por encima de los títulos y la columna N° fijos de las tablas (z-index 2 a 4): sin esto, una tabla
   de la pantalla de atrás se veía encima de la ventana (Seguimiento de cartera, tanda e05). Los menús de la barra (40) siguen arriba. */
.gg-capa { position: absolute; inset: 0; display: grid; place-items: center; background: var(--gg-sombra); z-index: 20; }
.gg-modal { display: flex; flex-direction: column; width: calc(100% * var(--gg-modal-escala)); height: calc(100% * var(--gg-modal-escala));
  background: var(--gg-superficie); color: var(--gg-texto); border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-modal-radio); overflow: hidden; position: relative; }
.gg-modal__encabezado { background: var(--gg-modal-encabezado); color: var(--gg-modal-encabezado-tinta); padding: var(--gg-espacio-3) var(--gg-espacio-4); font-weight: var(--gg-letra-peso-titulo); }
.gg-modal__cuerpo { flex: 1; overflow: auto; padding: var(--gg-espacio-4); position: relative; }
/* Tanda e2 (E8, Ramiro 09/11/2026): la ventana chica (1 a 3 campos) mide lo que su contenido, con tope del 85 % de quien la abre, y
   el ancho de una ventana angosta; centrada, con el mismo encabezado y pie. */
.gg-modal--chica { width: min(calc(100% * var(--gg-modal-escala)), 34rem); height: auto; max-height: calc(100% * var(--gg-modal-escala)); }
.gg-modal--chica > .gg-modal__cuerpo { flex: 0 1 auto; }
.gg-modal__pie { background: var(--gg-modal-pie); color: var(--gg-modal-pie-tinta); padding: var(--gg-espacio-3) var(--gg-espacio-4); }

/* El botón principal dentro de un pie o encabezado del color de la casa va invertido, para que se vea. */
.gg-modal__pie .gg-boton--principal { background: var(--gg-modal-pie-tinta); color: var(--gg-modal-pie); border-color: var(--gg-modal-pie-tinta); }
.gg-pie .gg-boton--principal { background: var(--gg-casa-tinta); color: var(--gg-casa); border-color: var(--gg-casa-tinta); }

/* Campos: del alto de un botón, con borde marcado. */
.gg-campo, .gg-modal__cuerpo input:not([type=checkbox]):not([type=radio]):not([type=range]), .gg-modal__cuerpo select, .gg-contenido form input, .gg-campo-rotulo select, .gg-campos input:not([type=checkbox]):not([type=radio]) { width: 100%; min-height: var(--gg-boton-alto); padding: 0 var(--gg-espacio-2);
  border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-boton-radio); background: var(--gg-superficie); color: var(--gg-texto); font: inherit; }

/* Campos de una ficha: dos columnas en la PC, una en el celular; el título arriba del campo. */
.gg-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--gg-espacio-3); }
.gg-campos label { display: flex; flex-direction: column; gap: var(--gg-espacio-1); font-weight: var(--gg-letra-peso-titulo); }
.gg-campos input, .gg-campos select { font-weight: normal; }
.gg-contenido form.gg-botones input { width: auto; }

/* Indicadores: título, valor y nota (nunca un número solo). */
.gg-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--gg-espacio-3); }
.gg-indicador { border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-3); background: var(--gg-superficie); color: var(--gg-texto); }
.gg-indicador--enlace { color: inherit; text-decoration: none; }
.gg-indicador__titulo { font-size: var(--gg-letra-chica); font-weight: var(--gg-letra-peso-titulo); text-transform: uppercase; }
.gg-indicador__valor { font-size: var(--gg-letra-titulo); font-weight: var(--gg-letra-peso-titulo); }
.gg-indicador__nota { font-size: var(--gg-letra-chica); }

/* Tablas tipo Excel: N°, una columna por dato, títulos, números y fechas centrados. */
.gg-tabla { width: 100%; border-collapse: collapse; }
.gg-tabla th, .gg-tabla td { border: var(--gg-borde-ancho) solid var(--gg-borde); padding: var(--gg-espacio-2); color: var(--gg-texto); }
.gg-tabla th, .gg-tabla td.num, .gg-tabla td.fecha { text-align: center; }
.gg-tabla td.num, .gg-tabla td.fecha { white-space: nowrap; }
/* En el celular la tabla se corre dentro de su lugar; la pantalla nunca se corre de costado. */
@media (max-width: 700px) { .gg-tabla { display: block; overflow-x: auto; } }
.gg-fila--elegible { cursor: pointer; }
.gg-aviso-error { color: var(--gg-aviso-error); }

/* ===========================================================================
   LA TABLA TIPO EXCEL DE TODO EL PROYECTO (Componentes/TablaExcel.razor; Ramiro, 31/10/2026: «una tabla simple tipo Excel…
   un pack para todo el proyecto igual»). La barra es la de TCG (bt-barra, de tcg.css); la grilla es ésta: líneas finas,
   un renglón sí y uno no, títulos en su banda, N°, números y fechas centrados, letra negra en claro y blanca en oscuro.
   Todo sale de los tokens (tema.claro / tema.oscuro: tabla-linea, tabla-cebra, tabla-cabecera, tabla-elegida; tabla.renglon).
   =========================================================================== */
.gg-tx { width: 100%; min-width: 0; font-family: var(--gg-letra-familia); color: var(--gg-texto); }
.gg-tx .bt-barra { padding-left: 0; padding-right: 0; }
.gg-tx .bt-buscador .ic { width: 14px; height: 14px; display: inline-block; }
.gg-tx .bt-menu-wrap { position: relative; }
.gg-tx .bt-menu { z-index: 41; max-height: 60vh; }
.gg-tx .bt-menu-nombre { display: inline-block; flex: 1; min-width: 0; }
.gg-tx .bt-menu-fila { padding: 1px 0; gap: 6px; }
.gg-tx .bt-menu .bt-mover { gap: 0; }
.gg-tx .bt-menu .bt-mover button { cursor: pointer; min-height: 0; height: 14px; line-height: 1; padding: 0 3px; font-size: 12px; }
.gg-tx .bt-menu input[type=checkbox] { width: 1rem; height: 1rem; margin: 0; }
.gg-tx-velo { position: fixed; inset: 0; z-index: 40; }
.gg-tx-error { margin: 0 0 var(--gg-espacio-2); }
/* La grilla. */
.gg-tx-caja { width: 100%; overflow-x: auto; border: var(--gg-borde-ancho) solid var(--gg-tabla-linea); border-radius: var(--gg-borde-radio); background: var(--gg-superficie); }
.gg-tx-tabla { width: 100%; border-collapse: collapse; font-size: var(--gg-tabla-letra); color: var(--gg-texto); background: var(--gg-superficie); table-layout: auto; }
.gg-tx-tabla th, .gg-tx-tabla td { border: var(--gg-borde-ancho) solid var(--gg-tabla-linea); padding: var(--gg-espacio-1) var(--gg-espacio-2); color: var(--gg-texto); vertical-align: middle; min-height: var(--gg-tabla-renglon); }
.gg-tx-tabla th:first-child, .gg-tx-tabla td:first-child { border-left: 0; }
.gg-tx-tabla th:last-child, .gg-tx-tabla td:last-child { border-right: 0; }
.gg-tx-tabla thead th { position: relative; overflow: visible; text-align: center; font-weight: var(--gg-letra-peso-titulo); background: var(--gg-tabla-cabecera); white-space: nowrap; vertical-align: bottom; text-transform: none; letter-spacing: 0; font-size: var(--gg-tabla-letra); }
.gg-tx-tabla thead th .bt-th-label { cursor: pointer; user-select: none; display: block; text-align: center; }
.gg-tx-tabla thead th.gg-tx-ordenada .bt-th-label { text-decoration: underline; text-decoration-color: var(--gg-casa); text-underline-offset: 3px; }
.gg-tx-tabla thead th .bt-th-filtro { background: var(--gg-superficie); color: var(--gg-texto); border-color: var(--gg-tabla-linea); font-size: var(--gg-tabla-letra); min-height: 1.75rem; }
.gg-tx-tabla tbody tr { height: var(--gg-tabla-renglon); }
.gg-tx-tabla tbody tr:nth-child(even) td { background: var(--gg-tabla-cebra); }
.gg-tx-tabla tbody tr.gg-fila--elegible:hover td { background: var(--gg-tabla-cabecera); }
.gg-tx-tabla tbody tr.gg-tx-elegida td { background: var(--gg-tabla-elegida); }
.gg-tx-tabla td.num, .gg-tx-tabla td.fecha, .gg-tx-tabla th.num, .gg-tx-tabla td.gg-tx-n, .gg-tx-tabla th.gg-tx-n { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gg-tx-tabla td.gg-tx-n, .gg-tx-tabla th.gg-tx-n { width: 3rem; }
.gg-tx-tabla td.gg-tx-n .bt-abrir { min-width: 2rem; color: var(--gg-texto); }
.gg-tx-tabla td.gg-tx-vacio { text-align: center; font-style: italic; padding: var(--gg-espacio-5) var(--gg-espacio-2); background: var(--gg-superficie) !important; }
.gg-tx-tabla td.gg-tx-acc, .gg-tx-tabla th.gg-tx-acc { white-space: nowrap; text-align: center; }
.gg-tx-tabla td.gg-tx-acc .lu-btn, .gg-tx-acciones .lu-btn { min-height: 1.75rem; }
.gg-tx-tabla tfoot td { font-weight: var(--gg-letra-peso-titulo); background: var(--gg-tabla-cabecera); border-top: 2px solid var(--gg-tabla-linea); }
/* El pie: cuántos renglones. */
.gg-tx-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gg-espacio-2); padding: var(--gg-espacio-2) 0; font-size: var(--gg-tabla-letra); color: var(--gg-texto); }
/* Las fichas del celular y el botón Lista/Tabla: sólo en el teléfono. */
.gg-tx-fichas, .gg-tx-vista { display: none; }
.gg-tx-acciones { display: flex; gap: var(--gg-espacio-2); margin-top: var(--gg-espacio-2); }
@media (max-width: 700px) {
  .gg-tx .bt-barra { gap: var(--gg-espacio-1); }
  .gg-tx .bt-barra > .lu-btn, .gg-tx .bt-menu-wrap > .lu-btn, .gg-tx .bt-vista > .lu-btn, .gg-tx-tabla td.gg-tx-n .bt-abrir, .gg-tx-pie .lu-btn { min-height: var(--gg-tabla-renglon); }
  .gg-tx .bt-buscador { flex-basis: 100%; max-width: none; min-height: var(--gg-tabla-renglon); }
  .gg-tx-tabla tbody tr, .gg-tx-tabla thead th { height: var(--gg-tabla-renglon); }
  .gg-tx-tabla td.gg-tx-acc .lu-btn, .gg-tx-acciones .lu-btn { min-height: var(--gg-tabla-renglon); }
  .gg-tx--con-fichas .gg-tx-vista { display: inline-flex; }
  .gg-tx--fichas .gg-tx-caja, .gg-tx--fichas .gg-tx-pie { display: none; }
  .gg-tx--fichas .gg-tx-fichas { display: flex; }
  .gg-tx-fichas .fa-ficha { color: var(--gg-texto); }
  .gg-tx-fichas .gg-tx-vacio { padding: var(--gg-espacio-3); font-style: italic; }
}

/* ===========================================================================
   CARGA RÁPIDA Y SEGURA (regla aprendida en TCG: botones bien visibles, sólidos, que den seguridad al cargar)
   =========================================================================== */
/* Dónde está el cursor, siempre a la vista. */
.gg-pantalla :focus-visible { outline: var(--gg-borde-foco) solid var(--gg-casa); outline-offset: 2px; }
/* Rótulo arriba del campo; el obligatorio lleva asterisco del color de aviso. */
.gg-campo-rotulo { display: flex; flex-direction: column; gap: var(--gg-espacio-1); font-weight: var(--gg-letra-peso-rotulo); }
.gg-campo-rotulo input, .gg-campo-rotulo select, .gg-campo-rotulo textarea { font-weight: normal; }
.gg-obligatorio { color: var(--gg-aviso-error); }
.gg-campo-error { color: var(--gg-aviso-error); font-size: var(--gg-letra-chica); font-weight: normal; }
/* Desplegable con buscador y «+ Crear nuevo» al lado, del mismo alto. */
.gg-desplegable { display: flex; gap: var(--gg-espacio-2); position: relative; }
.gg-desplegable > input { flex: 1; }
.gg-desplegable > .gg-boton { flex: 0 0 auto; white-space: nowrap; }
/* Un campo con «+ Crear nuevo» ocupa dos columnas en la PC, así se lee lo elegido (en el celular, una sola). */
@media (min-width: 48rem) { .gg-campos > label:has(.gg-desplegable > .gg-boton) { grid-column: span 2; } }
.gg-opciones { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; max-height: 16rem; overflow: auto; margin: var(--gg-espacio-1) 0 0; padding: 0;
  list-style: none; background: var(--gg-superficie); color: var(--gg-texto); border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-borde-radio); }
.gg-opciones li { padding: var(--gg-espacio-2) var(--gg-espacio-3); cursor: pointer; font-weight: normal; }
.gg-opciones li[aria-selected="true"] { background: var(--gg-casa); color: var(--gg-casa-tinta); }
/* Guardar: mientras guarda no se puede volver a apretar; después confirma. */
.gg-boton[disabled] { cursor: progress; opacity: 0.75; }
.gg-estado-guardado { font-weight: var(--gg-letra-peso-titulo); }
/* Cerrar con cambios sin guardar: se pregunta en el pie, con los dos botones bien visibles. */
.gg-confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gg-espacio-2); width: 100%; }
.gg-confirmar > span { flex: 1 1 100%; font-weight: var(--gg-letra-peso-titulo); }
/* Ajustes de tamaño: la medida del monitor, grande. */
.gg-medida { font-size: var(--gg-letra-titulo); font-weight: var(--gg-letra-peso-titulo); }
.gg-aviso { border: var(--gg-borde-ancho) solid var(--gg-aviso-error); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-2) var(--gg-espacio-3); }
.gg-perilla { width: 100%; accent-color: var(--gg-casa); }

/* Texto largo (pegar una planilla). */
.gg-texto-largo { width: 100%; padding: var(--gg-espacio-2); border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-boton-radio);
  background: var(--gg-superficie); color: var(--gg-texto); font: inherit; font-weight: normal; }
/* Casillas de tilde: del tamaño de la letra, con el texto al lado. */
.gg-pantalla input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--gg-casa); vertical-align: middle; }
.gg-botones > label { display: inline-flex; align-items: center; gap: var(--gg-espacio-2); }
.gg-desplegable > input::placeholder { font-size: var(--gg-letra-chica); }

/* Las solapas en un solo renglón (TCG xm). TCG achica las carpetas según el ancho que tienen en su pantalla, que allá
   llega con el zoom 1,15 que el «Formato» le pone al encabezado; acá no hay ese zoom y una ventana con diez solapas (CRM
   PostVenta) las cortaba. Con diez o más, el mismo paso que TCG usa cuando no entran: letra de 13 y relleno de 10. */
@media (min-width: 701px) {
  .gu-carpetas.gu-carpetas:has(> .gu-carpeta:nth-child(10)) > .gu-carpeta { font-size: 13px; padding-left: 10px; padding-right: 10px; gap: 5px; }
}

/* El detalle de abajo del Ingreso a stock (Ramiro, 30/10/2026: «mejor organizada, colores, fondos y fuentes adecuados, vista
   formal y simétrica»): dos bloques iguales, lado a lado, con la misma altura; el rótulo arriba de cada dato y los campos del
   mismo tamaño. En el celular, uno debajo del otro. */
.ing-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gg-espacio-3); align-items: stretch; margin-top: var(--gg-espacio-3);
  font-family: var(--gg-letra-familia); }
.ing-ficha-bloque { display: flex; flex-direction: column; gap: var(--gg-espacio-2); background: var(--gg-superficie); color: var(--gg-texto);
  border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-3) var(--gg-espacio-4); }
.ing-ficha-bloque--carga { border-top: var(--gg-borde-foco) solid var(--gg-casa); }
.ing-ficha-bloque--apagado { opacity: .6; }
.ing-ficha-tit { margin: 0; padding-bottom: var(--gg-espacio-2); border-bottom: var(--gg-borde-ancho) solid var(--gg-borde);
  font-size: 0.75rem; font-weight: var(--gg-letra-peso-titulo); letter-spacing: .06em; text-transform: uppercase; }
.ing-ficha-datos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gg-espacio-2) var(--gg-espacio-4); margin: 0; }
.ing-ficha-datos div { min-width: 0; }
.ing-ficha-datos dt { font-size: 0.75rem; font-weight: var(--gg-letra-peso-rotulo); text-transform: uppercase; letter-spacing: .04em; }
.ing-ficha-datos dd { margin: var(--gg-espacio-1) 0 0; font-size: var(--gg-letra-chica); font-weight: var(--gg-letra-peso-titulo); overflow-wrap: anywhere; }
.ing-ficha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gg-espacio-2) var(--gg-espacio-4); }
.ing-ficha-campo, .ing-ficha-campo--cat .per-campo { display: flex; flex-direction: column; gap: var(--gg-espacio-1); min-width: 0; margin: 0; }
.ing-ficha-campo > span, .ing-ficha-campo--cat .per-campo > span { font-size: 0.75rem; font-weight: var(--gg-letra-peso-rotulo);
  text-transform: uppercase; letter-spacing: .04em; text-align: left; color: var(--gg-texto); }
.ing-ficha-campo input { height: calc(var(--gg-boton-alto) * .72); width: 100%; padding: 0 var(--gg-espacio-2); font: var(--gg-letra-chica) var(--gg-letra-familia);
  color: var(--gg-texto); background: var(--gg-superficie); border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-boton-radio); }
.ing-ficha-campo input[readonly], .ing-ficha-campo input:disabled { background: var(--gg-superficie-2); }
.ing-ficha-campo input[readonly] { cursor: pointer; font-weight: var(--gg-letra-peso-titulo); user-select: none; }
.ing-ficha-pregunta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gg-espacio-2); padding: var(--gg-espacio-2) var(--gg-espacio-3);
  background: var(--gg-superficie-2); border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-boton-radio); }
.ing-ficha-pregunta span { flex: 1 1 auto; font-size: 0.75rem; font-weight: var(--gg-letra-peso-rotulo); }
.ing-ficha-pregunta .lu-btn { white-space: nowrap; }
.ing-ficha-nota, .ing-ficha-vacio { margin: 0; font-size: 0.75rem; }
@media (max-width: 700px) { .ing-ficha, .ing-ficha-datos, .ing-ficha-campos { grid-template-columns: 1fr; } }
/* En el teléfono, las listas de trabajo pasan a fichas (como TCG): se ve una u otra según el ancho. */
.ing-solo-celu { display: none; }
@media (max-width: 700px) { .ing-solo-celu { display: flex; } .ing-solo-pc { display: none !important; } }
/* Un solo bloque de carga a todo el ancho (Reserva, Cambio de lugar): los campos, en dos columnas. */
.ing-ficha--una { grid-template-columns: 1fr; }
.ing-ficha-campo select { height: calc(var(--gg-boton-alto) * .72); width: 100%; padding: 0 var(--gg-espacio-2); font: var(--gg-letra-chica) var(--gg-letra-familia);
  color: var(--gg-texto); background: var(--gg-superficie); border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-boton-radio); }
.ing-ficha-campo select:disabled { background: var(--gg-superficie-2); }
/* Ingreso de usados con varias tildadas: cada unidad con sus kilómetros y su documentación (TCG: camposPorUnidad), en
   renglones del mismo alto que los campos de al lado. */
.ing-ficha-unidades { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr 1fr; gap: var(--gg-espacio-2) var(--gg-espacio-3); align-items: center; }
.ing-ficha-unidades-rot { font-size: 0.75rem; font-weight: var(--gg-letra-peso-rotulo); text-transform: uppercase; letter-spacing: .04em; }
.ing-ficha-unidades-id { font-size: var(--gg-letra-chica); font-weight: var(--gg-letra-peso-titulo); overflow-wrap: anywhere; }

/* El logo de GG360 en el encabezado (Ramiro, 30/10/2026). El de TCG era una silueta blanca y en modo claro se invertía
   (regla «.tema-claro .tcg-logo» de tcg.css); el de GG360 tiene color y se muestra tal cual en los dos modos. */
.tema-claro .tcg-logo, .tema-claro .tcg-logo img, .tcg-claro .tcg-logo, .tcg-claro .tcg-logo img { filter: none; }
/* Tanda p51 · el modo claro con lo de TCG_CLARO_VARS (1370-ListaUsados.js de TCG): bordes marcados (Ramiro: «resaltar bordes») y el
   ámbar como letra, negro (xp: «modo claro, letra negra»). En TCG va en línea en el armazón; acá, en la clase. */
.tcg-claro { --border: var(--gg-tcg-claro-borde); --ambar-texto: var(--gg-tcg-claro-ambar-texto); }
/* Tanda p51 · Ventana PuedeAgrandar («Tanda de hoy»): el botón arriba a la derecha y, agrandada, ocupa toda la pantalla. */
.per-modal:has(> .gg-ventana-tam) { position: relative; }
.gg-ventana-tam { position: absolute; top: var(--gg-espacio-3); right: 7.5rem; z-index: 2; }
/* La regla general de tcg.css («todas las ventanas miden 1240 px», con !important y once :not) estiraba «Tanda de hoy»: por eso en p50
   quedaba grande o corrida. Acá la medida de TCG (.crm-tanda: 880 px) y la grande, con la clase repetida para ganarle. */
.per-overlay > .per-modal.crm-tanda.crm-tanda.crm-tanda.crm-tanda.crm-tanda.crm-tanda.crm-tanda.crm-tanda.crm-tanda.crm-tanda.crm-tanda.crm-tanda:not(.gg-ventana--grande):not(.av-tanda-modal) { width: min(880px, calc(96vw / var(--tcg-z, 1))) !important; height: auto !important; max-height: calc(88vh / var(--tcg-z, 1)) !important; }
.per-overlay > .per-modal.gg-ventana--grande.gg-ventana--grande.gg-ventana--grande.gg-ventana--grande.gg-ventana--grande.gg-ventana--grande.gg-ventana--grande.gg-ventana--grande.gg-ventana--grande.gg-ventana--grande.gg-ventana--grande.gg-ventana--grande { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; }

/* ===========================================================================
   USUARIOS Y PERMISOS (la maqueta que aprobó Ramiro el 30/10/2026: «práctico a la vista, vista organizada, formal,
   amigable, intuitiva y simétrica»). Bloques numerados, botones de una misma fila del mismo tamaño, letra Montserrat,
   todo negro en modo claro. La celda distinta de lo que da el nivel se pinta con el token «aviso.ajuste».
   =========================================================================== */
.au-ventana { width: 100%; max-width: 73.75rem; margin: 0 auto; background: var(--gg-superficie); color: var(--gg-texto); border: var(--gg-borde-ancho) solid var(--gg-borde);
  border-radius: var(--gg-modal-radio); overflow: hidden; font-family: var(--gg-letra-familia); font-size: var(--gg-letra-chica); line-height: 1.35; }
.au-cab { background: var(--gg-casa); color: var(--gg-casa-tinta); padding: var(--gg-espacio-3) var(--gg-espacio-4); display: flex; align-items: center; gap: var(--gg-espacio-4); flex-wrap: wrap; }
.au-cab h1 { font-size: 1.125rem; margin: 0; flex: 1; font-weight: var(--gg-letra-peso-titulo); min-width: 10rem; }
.au-cab h1 small { display: block; font-weight: var(--gg-letra-peso-rotulo); font-size: 0.75rem; opacity: .9; }
.au-bt { font: inherit; font-weight: var(--gg-letra-peso-titulo); border: 1.5px solid var(--gg-borde); background: var(--gg-superficie); color: var(--gg-texto);
  border-radius: var(--gg-boton-radio); padding: 0 var(--gg-espacio-3); min-height: var(--gg-boton-alto); min-width: 7.5rem; cursor: pointer; }
.au-cab .au-bt, .au-pie .au-bt { border-color: var(--gg-casa-tinta); }
/* Guardar, como en la maqueta: igual a los otros botones del pie (es el principal: lo dispara el doble Enter). */
.au-pie .au-bt--principal { background: var(--gg-superficie); color: var(--gg-texto); border-color: var(--gg-casa-tinta); }
.au-carp { display: flex; gap: 4px; padding: var(--gg-espacio-2) var(--gg-espacio-4) 0; border-bottom: 2px solid var(--gg-casa); }
.au-carp button { padding: var(--gg-espacio-2) var(--gg-espacio-4); border: 1.5px solid var(--gg-borde); border-bottom: 0; border-radius: var(--gg-boton-radio) var(--gg-boton-radio) 0 0;
  font: inherit; font-weight: var(--gg-letra-peso-titulo); background: var(--gg-superficie); color: var(--gg-texto); cursor: pointer; min-height: 2.25rem; }
.au-carp button[aria-selected="true"] { background: var(--gg-casa); color: var(--gg-casa-tinta); border-color: var(--gg-casa); }
.au-carp button[disabled] { cursor: default; opacity: .6; }
.au-cuerpo { padding: var(--gg-espacio-4); display: grid; gap: var(--gg-espacio-3); }
.au-bloque { border: 1.5px solid var(--gg-borde); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-3); min-width: 0; }
.au-bloque h2 { margin: 0 0 var(--gg-espacio-2); font-size: var(--gg-letra-chica); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: var(--gg-espacio-2); flex-wrap: wrap; }
.au-bloque h2 i { font-style: normal; font-weight: var(--gg-letra-peso-rotulo); text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.au-fila { display: grid; gap: var(--gg-espacio-2); }
.au-c1 { grid-template-columns: 1fr; }
.au-c3 { grid-template-columns: repeat(3, 1fr); }
.au-c4 { grid-template-columns: repeat(4, 1fr); }
.au-c7 { grid-template-columns: repeat(7, 1fr); }
.au-c3-7 { grid-template-columns: 1fr 2fr; gap: var(--gg-espacio-3); }
.au-campo { display: flex; flex-direction: column; gap: var(--gg-espacio-1); font-size: 0.75rem; font-weight: var(--gg-letra-peso-titulo); min-width: 0; }
.au-campo input, .au-campo select, .au-select-vendedor { font: inherit; font-size: var(--gg-letra-base); font-weight: normal; border: 1.5px solid var(--gg-borde); border-radius: var(--gg-boton-radio);
  padding: 0 var(--gg-espacio-2); min-height: var(--gg-boton-alto); color: var(--gg-texto); background: var(--gg-superficie); width: 100%; }
.au-select-vendedor { width: 70%; font-size: var(--gg-letra-chica); min-height: 2.25rem; }
.au-chip { border: 1.5px solid var(--gg-borde); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-2); text-align: center; font: inherit; font-weight: var(--gg-letra-peso-titulo);
  background: var(--gg-superficie); color: var(--gg-texto); min-height: 4rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; cursor: pointer; min-width: 0; }
.au-chip small { font-weight: var(--gg-letra-peso-rotulo); font-size: 0.75rem; line-height: 1.25; }
.au-chip.on { background: var(--gg-casa); color: var(--gg-casa-tinta); border-color: var(--gg-casa); }
.au-chip[disabled] { cursor: default; }
.au-chip--sw { cursor: default; }
/* Lo ajustado lleva su propia tinta (aviso.ajuste-tinta): el amarillo es claro en los dos modos y la letra se tiene que leer también en modo oscuro. */
.au-chip--sw.au-aj { background: var(--gg-aviso-ajuste); color: var(--gg-aviso-ajuste-tinta); }
.au-chip--sw.au-aj .au-sw { color: var(--gg-aviso-ajuste-tinta); }
.au-chip--sw.au-aj .au-sw b { border-color: var(--gg-aviso-ajuste-tinta); background: var(--gg-aviso-ajuste); }
.au-chip--sw.au-aj .au-sw b::after { background: var(--gg-aviso-ajuste-tinta); }
.au-chip--sw.au-aj .au-sw.on b { background: var(--gg-casa); border-color: var(--gg-casa); }
.au-chip--sw.au-aj .au-sw.on b::after { background: var(--gg-casa-tinta); }
.au-tick { font-size: 1rem; }
.au-tick-btn { font: inherit; font-size: 1rem; background: none; border: 0; color: inherit; cursor: pointer; min-width: 2.25rem; min-height: 2.25rem; }
.au-tabla-caja { overflow-x: auto; }
.au-tabla { width: 100%; border-collapse: collapse; font-size: var(--gg-letra-chica); }
.au-tabla th, .au-tabla td { border: 1px solid var(--gg-borde); padding: var(--gg-espacio-2); text-align: center; font-size: var(--gg-letra-chica); color: var(--gg-texto); }
.au-tabla th { background: var(--gg-superficie-2); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; }
.au-tabla td.izq { text-align: left; font-weight: var(--gg-letra-peso-titulo); }
.au-seg { display: inline-flex; border: 1.5px solid var(--gg-borde); border-radius: var(--gg-boton-radio); overflow: hidden; }
.au-seg button { padding: var(--gg-espacio-1) 0; width: 3.875rem; min-height: 2rem; font: inherit; font-weight: var(--gg-letra-peso-titulo); font-size: 0.75rem; border: 0;
  border-right: 1px solid var(--gg-borde); background: var(--gg-superficie); color: var(--gg-texto); cursor: pointer; }
.au-seg button:last-child { border-right: 0; }
.au-seg button.on { background: var(--gg-casa); color: var(--gg-casa-tinta); }
.au-tabla td.au-aj { background: var(--gg-aviso-ajuste); color: var(--gg-aviso-ajuste-tinta); }
.au-marca { display: inline-block; font-size: 0.75rem; font-weight: 800; border: 1px solid var(--gg-borde); border-radius: 999px; padding: 1px var(--gg-espacio-2); margin-left: var(--gg-espacio-2);
  background: var(--gg-aviso-ajuste); color: var(--gg-aviso-ajuste-tinta); border-color: var(--gg-aviso-ajuste-tinta); white-space: nowrap; }
.au-sw { display: inline-flex; align-items: center; gap: var(--gg-espacio-2); font: inherit; font-weight: var(--gg-letra-peso-titulo); background: none; border: 0; color: inherit; cursor: pointer; min-height: 2.25rem; }
.au-sw[disabled] { cursor: default; opacity: .55; }
/* Bloque 7 con más de una casa: un renglón por casa adentro de cada caja. */
.au-chip--sw .au-sw-titulo { font-weight: var(--gg-letra-peso-titulo); }
.au-chip--sw .au-sw-casas { display: grid; gap: 2px; width: 100%; }
.au-chip--sw .au-sw-casa { display: flex; align-items: center; gap: var(--gg-espacio-2); width: 100%; }
.au-chip--sw .au-sw-casa .au-sw { min-height: 1.75rem; }
.au-chip--sw .au-sw-casa > span { font-size: 0.75rem; font-weight: var(--gg-letra-peso-rotulo); white-space: nowrap; }
.au-sw b { width: 2.375rem; height: 1.25rem; border-radius: 999px; border: 1.5px solid var(--gg-borde); position: relative; background: var(--gg-superficie); flex: none; }
.au-sw b::after { content: ""; position: absolute; top: 2px; left: 2px; width: 0.8125rem; height: 0.8125rem; border-radius: 50%; background: var(--gg-texto); }
.au-sw.on b { background: var(--gg-casa); border-color: var(--gg-casa); }
.au-sw.on b::after { left: 1.25rem; background: var(--gg-casa-tinta); }
.au-leyenda { display: flex; gap: var(--gg-espacio-3); font-size: 0.75rem; font-weight: var(--gg-letra-peso-titulo); align-items: center; margin-top: var(--gg-espacio-2); flex-wrap: wrap; }
.au-leyenda > span::before { content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; border: 1px solid var(--gg-borde); margin-right: 6px; vertical-align: -2px; background: var(--gg-aviso-ajuste); }
.au-leyenda .au-bt { margin-left: auto; }
/* Usuarios y permisos › Vendedor de: las opciones puntuales de Plan de ahorro (respuesta 20 de Ramiro, 31/10/2026). */
.au-opciones-plan { margin-top: var(--gg-espacio-3); display: grid; gap: var(--gg-espacio-2); }
.au-opciones-tit { font-size: var(--gg-letra-chica); font-weight: var(--gg-letra-peso-titulo); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gg-espacio-2); }
.au-opciones-tit i { font-style: normal; font-weight: var(--gg-letra-peso-rotulo); }
.au-opciones-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gg-espacio-2); border: 1.5px solid var(--gg-borde); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-2); }
.au-opciones-casa { min-width: 8rem; font-weight: var(--gg-letra-peso-titulo); }
.au-opciones-nota { font-size: var(--gg-letra-chica); }
.au-opcion { min-height: 2.25rem; }
.au-opciones-agregar { width: auto; min-width: 14rem; }
.au-pie { background: var(--gg-casa); padding: var(--gg-espacio-3) var(--gg-espacio-4); display: flex; gap: var(--gg-espacio-2); justify-content: flex-end; flex-wrap: wrap; }
.au-pie .au-bt:first-child { margin-right: auto; }
.au-pie .btn-falta, .au-pie .confirm-armado { font-weight: var(--gg-letra-peso-titulo); }
.au-ayuda { font-size: 0.75rem; font-weight: var(--gg-letra-peso-rotulo); margin: var(--gg-espacio-2) 0 0; }
.au-aviso { border: 1.5px solid var(--gg-borde); border-left: 6px solid var(--gg-aviso-ajuste); background: var(--gg-superficie-2); color: var(--gg-texto); padding: var(--gg-espacio-2) var(--gg-espacio-3);
  border-radius: var(--gg-borde-radio); font-weight: var(--gg-letra-peso-titulo); }
.au-clave { font-size: 1.5rem; font-weight: var(--gg-letra-peso-titulo); letter-spacing: .08em; border: 1.5px solid var(--gg-borde); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-3); text-align: center; }
.au-lista .au-indicadores { margin-bottom: var(--gg-espacio-3); }
.au-lista .gg-tabla { font-family: var(--gg-letra-familia); font-size: var(--gg-letra-chica); }
/* TCG pone «nowrap» y 12 px a toda celda; acá el texto envuelve y la letra es la chica, para que la tabla entre en 1366. */
.au-lista .gg-tabla th { white-space: normal; }
.au-lista .gg-tabla td { color: var(--gg-texto); white-space: normal; font-size: var(--gg-letra-chica); padding: var(--gg-espacio-1) var(--gg-espacio-2); }
.au-lista .gg-tabla td.fecha { white-space: nowrap; }
/* Usuarios y permisos › Traer de TCG (tanda p33): el archivo, la vista previa y el correo que falta, tipeado en la tabla. */
.au-tcg-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gg-espacio-2); margin-bottom: var(--gg-espacio-3); }
.au-tcg-barra .au-ayuda { margin: 0; }
.au-tcg-archivo { display: inline-flex; align-items: center; cursor: pointer; }
.au-tcg .gg-tx-tabla input.au-tcg-correo { width: 100%; min-width: 12rem; min-height: 2rem; padding: 0 var(--gg-espacio-2); border: var(--gg-borde-ancho) solid var(--gg-borde);
  border-radius: var(--gg-boton-radio); background: var(--gg-superficie); color: var(--gg-texto); font: inherit; }
.au-tcg .gg-tx-tabla td.au-tcg-ok { font-weight: var(--gg-letra-peso-titulo); }
.au-tcg .gg-tx-tabla tbody tr td.au-tcg-falta { background: var(--gg-aviso-ajuste); color: var(--gg-aviso-ajuste-tinta); }
.au-lista .gg-botones .gg-boton { flex: 0 1 auto; min-width: 9rem; }
.au-lista .gg-botones input.gg-boton { flex: 1 1 14rem; }
/* El sector que sólo se consulta (Usuarios y permisos: «Ve»): marcado en el menú. */
.tcg-sec--consulta::after { content: " · consulta"; font-size: .75em; font-weight: 500; opacity: .85; }
@media (max-width: 700px) {
  .au-c3, .au-c4, .au-c7, .au-c3-7 { grid-template-columns: 1fr 1fr; }
  /* En el celular, los permisos especiales van de a uno por renglón: cada caja lleva un interruptor y su nota por casa. */
  .au-especiales .au-c4 { grid-template-columns: 1fr; }
  .au-chip--sw .au-sw-casa > span { white-space: normal; text-align: left; }
  .au-seg button { width: 3rem; }
  .au-cab h1 { font-size: 1rem; }
  .au-select-vendedor { width: 100%; }
}

/* Lista de usados sobre el pack (lo que TCG dibujaba con estilos en línea en 1370-ListaUsados.js): la foto que falta, la
   pastilla del estado y el selector de «Retomó» dentro de la celda. */
.lu-foto-vacia { width: 42px; height: 32px; background: var(--gg-tabla-cabecera); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.lu-estado { display: inline-block; font-size: 12px; font-weight: 700; white-space: nowrap; border-radius: 999px; padding: 2px 8px; }
.lu-select { appearance: none; -webkit-appearance: none; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; color: inherit; font-size: 13px; font-family: inherit; }
.gg-tx-tabla td.lu-td-edit { padding: 2px 3px; }
.gg-tx-tabla tr.gg-tx-detalle > td { background: var(--gg-superficie) !important; padding: var(--gg-espacio-3); position: sticky; left: 0; }
/* Adentro de las ventanas copiadas de TCG que no traen aire a los costados, la tabla lo pone. */
.com-lista-tabla > .gg-tx, .cvn-tabla-cont > .gg-tx, .ing-tabla-cont > .gg-tx, .vn-tabla-wrap > .gg-tx, .pv-lista-caja > .gg-tx, .cjs-tabla-caja > .gg-tx { padding: 0 var(--gg-espacio-3); }

/* ====================================================================
   TANDA zk · ESTÉTICA Y TAMAÑOS POR MONITOR (la ym de TCG; Ramiro aprobó las 14 propuestas el 31/10/2026). Lo de TCG viene en
   tcg.css (copia exacta); acá va lo que GG360 tiene encima, con los tokens.
   =========================================================================== */
/* El menú: «más abajo ▾» sólo cuando la lista no entra ni en el modo junto (lo mide el ayudante de index.html). */
.tcg-side-mas { display: none; }
.tcg-side--mas > .tcg-side-mas { display: block; }
/* Los sectores de arriba, en un renglón y sin «…». */
.tcg-sec { white-space: nowrap; flex: 0 0 auto; }

/* Las solapas propias de GG360 (gg-solapas y las de los procesos) también en una fila: si no entran, la tira se desliza. */
.gu-carpetas--desliza { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.gu-carpetas--desliza > * { flex: 0 0 auto !important; }
.gg-solapa { white-space: nowrap; flex: 0 0 auto; font-size: var(--gg-tabla-letra); }
@media (max-width: 899px) {
  .gu-carpetas, .gg-solapas, .proc-solapas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  .gu-carpetas > *, .gg-solapas > *, .proc-solapas > * { flex: 0 0 auto; }
  /* Al deslizarse, la tira es una caja con su propio scroll: dentro de una ventana con mucho contenido (Presupuesto, tanda e33)
     se achicaba y las solapas quedaban cortadas. Mantiene su alto, como en TCG. */
  .per-modal > .gu-carpetas { flex-shrink: 0; }
}

/* Indicadores: 4 por fila y del mismo alto (de a 2 en el celular); título en mayúscula, valor grande, nota corta; el que
   avisa algo malo, con borde rojo. */
.gg-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.gg-indicador { display: flex; flex-direction: column; min-width: 0; }
.gg-indicador__titulo { letter-spacing: .04em; }
.gg-indicador--mal { border-color: var(--gg-aviso-error); box-shadow: inset 0 0 0 1px var(--gg-aviso-error); }
@media (max-width: 899px) { .gg-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Compañías de seguro › Panel de control · la PC del motor (tanda p24): la barra con sus cuatro botones del mismo tamaño, los
   indicadores, la vista elegida y la tabla. En el celular, los botones de a dos por renglón. */
.seg-motor-barra { flex-wrap: wrap; }
.seg-motor-barra .ag-barra-txt { flex: 1 1 100%; margin-right: 0; }
.seg-motor-barra .ag-barra-txt span { font-size: var(--gg-letra-chica); }
.seg-motor-barra > .pvx-btn { flex: 1 1 0; min-height: var(--gg-boton-alto); justify-content: center; }
.seg-motor-ind { margin: var(--gg-espacio-3) 0; }
/* Tanda motor3: el Panel del motor tiene cinco indicadores (se suma «Claude este mes»): en la PC van en una sola fila. */
@media (min-width: 900px) { .seg-motor-ind { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.seg-motor-vistas { margin-bottom: var(--gg-espacio-2); }
.seg-motor-est { display: inline-flex; align-items: center; gap: var(--gg-espacio-2); }
.seg-motor-ayuda { margin-top: var(--gg-espacio-2); }
.seg-motor-ya td { opacity: .6; }
.seg-motor-rev-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gg-espacio-2); margin-bottom: var(--gg-espacio-2); }
.seg-motor-vinc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gg-espacio-3); }
.seg-motor-llave .ag-llave-txt { display: block; word-break: break-all; user-select: all; }
@media (max-width: 899px) {
  .seg-motor-barra > .pvx-btn { flex: 1 1 calc(50% - var(--gg-espacio-2)); }
  .seg-motor-vinc { grid-template-columns: 1fr; }
  .seg-motor-vistas { display: flex; width: 100%; }
  .seg-motor-vistas .pvx-seg-op { flex: 1 1 0; justify-content: center; padding-left: var(--gg-espacio-1); padding-right: var(--gg-espacio-1); }
}

/* La tabla de trabajo (TablaExcel): a todo el ancho, títulos fijos al bajar, N° y la columna clave fijos a la izquierda,
   «N renglones» chico y pegado, la ayuda corta abajo. */
.gg-tx .bt-barra--acc { flex-wrap: wrap; row-gap: var(--gg-espacio-1); }
.gg-tx .bt-acciones { flex: 1 0 100%; }
.gg-tx .bt-acciones > .lu-btn, .gg-tx .bt-acciones > button { min-height: var(--gg-tabla-renglon); font-size: var(--gg-tabla-letra); }
.gg-tx-pie { padding: var(--gg-espacio-1) 2px 0; font-size: 0.75rem; }
.gg-tx-ayuda { margin: var(--gg-espacio-1) 2px 0; font-size: 0.75rem; }
.gg-tx-tabla td.gg-tx-vacio .tcg-vacia { margin: 0; }
@media (min-width: 900px) {
  .gg-tx-caja { max-height: calc(100dvh / var(--tcg-z, 1) - 13rem); overflow: auto; }
  .gg-tx-tabla thead th { position: sticky; top: 0; z-index: 3; }
  .gg-tx-tabla td.gg-tx-n, .gg-tx-tabla th.gg-tx-n { position: sticky; left: 0; z-index: 2; width: 3rem; min-width: 3rem; max-width: 3rem; background: var(--gg-superficie); }
  .gg-tx-tabla th.gg-tx-n { z-index: 4; background: var(--gg-tabla-cabecera); }
  .gg-tx--clave .gg-tx-tabla td.gg-tx-n + td, .gg-tx--clave .gg-tx-tabla th.gg-tx-n + th { position: sticky; left: 3rem; z-index: 2; background: var(--gg-superficie); }
  .gg-tx--clave .gg-tx-tabla th.gg-tx-n + th { z-index: 4; background: var(--gg-tabla-cabecera); }
  .gg-tx-tabla tbody tr:nth-child(even) td.gg-tx-n, .gg-tx--clave .gg-tx-tabla tbody tr:nth-child(even) td.gg-tx-n + td { background: var(--gg-tabla-cebra); }
  .gg-tx-tabla tbody tr.gg-tx-elegida td.gg-tx-n, .gg-tx--clave .gg-tx-tabla tbody tr.gg-tx-elegida td.gg-tx-n + td { background: var(--gg-tabla-elegida); }
}
/* Monitores bajos (menos de 800 px reales): renglones más finos, así a 1366×638 se ven al menos 8. */
html.tcg-bajo .gg-tx-tabla tbody tr { height: auto; }
html.tcg-bajo .gg-tx-tabla td { padding-top: 1px !important; padding-bottom: 1px !important; }
html.tcg-bajo .gg-tx-caja { max-height: calc(100dvh / var(--tcg-z, 1) - 11rem); }

/* Modo oscuro: bordes blancos marcados en los campos y botones propios de GG360. */
[data-tema="oscuro"] .gg-boton, [data-tema="oscuro"] .gg-campo, [data-tema="oscuro"] .gg-solapa { border-color: var(--gg-borde); }
/* La barra del pulgar (teléfono) queda siempre abajo, a mano, aunque la pantalla sea larga. */
@media (max-width: 700px) { .tcg-pulgar { position: sticky; bottom: 0; z-index: 50; } }
/* Las pantallas de trabajo de Plan (Cobranzas): a todo el ancho del lienzo, con 16 px de margen (en TCG se abren fuera del
   lienzo; acá el lienzo las centraba a lo que medía su contenido). */
.tcg-lienzo > .pa-compacto:has(> .cym) { width: 100%; box-sizing: border-box; }
/* Propuesta 2 (tanda zk): el orden de una pantalla de trabajo es solapas, indicadores, barra de tabla, tabla, ayuda corta y
   pie. En Lista de usados tcg.css manda los indicadores al final (order: 90); acá vuelven arriba de la tabla. */
.lu-modulo > .lu-indicadores { order: 0; padding-top: 4px; }
/* Cartera en el celular: la nota de cada tarjeta de «Qué se mira» baja de renglón y no se corta. */
@media (max-width: 899px) {
  .car-cortes--iguales .car-corte { white-space: normal; overflow: visible; }
  .car-cortes--iguales .car-corte span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
/* Monitores bajos (menos de 800 px reales, como TCG ym): los indicadores de Lista de usados en una línea, la foto más chica y
   las acciones de la tabla al costado de la barra, así a 1366×638 se ven al menos 8 renglones con los indicadores arriba. */
html.tcg-bajo .lu-modulo > .lu-indicadores { gap: 8px; padding-bottom: 6px; }
html.tcg-bajo .lu-ind { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; padding: 4px 10px; }
html.tcg-bajo .lu-ind .lu-ind-nota { display: none; }
html.tcg-bajo .lu-ind .lu-ind-valor { font-size: 18px; }
html.tcg-bajo .lu-foto-vacia { height: 18px; }
/* Con margen (paquete 1): a 1366×638 entraban 8 justo y en GitHub, con otra letra del sistema, 7. En monitores bajos el renglón
   y la fila de acciones de Lista de usados se aprietan un poco más (sin bajar de 36 px los botones), así entran 9. */
html.tcg-bajo .gg-tx-tabla td { line-height: 1.15; }
html.tcg-bajo .lu-estado { padding-top: 1px; padding-bottom: 1px; line-height: 1.15; }
html.tcg-bajo .lu-acciones .lu-acc { padding-top: 6px; padding-bottom: 6px; min-height: 36px; }
html.tcg-bajo .lu-casas .lu-casa { padding-top: 5px; padding-bottom: 5px; }
/* Lo que estira el renglón son los campos de las celdas que se escriben (Retomó, Fecha OP…): en monitores bajos, más finos. */
html.tcg-bajo .gg-tx-tabla td input, html.tcg-bajo .gg-tx-tabla td select { min-height: 0; height: 24px; padding-top: 1px; padding-bottom: 1px; line-height: 1.15; }
/* Lo que de verdad estira el renglón (lo midió revisar.mjs): el botón del N° que abre la ficha. En monitores bajos, 28 px, el mínimo
   de un botón dentro de una celda. */
html.tcg-bajo .gg-tx-tabla td.gg-tx-n .bt-abrir { min-height: 28px !important; height: 28px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important; }
/* La causa de fondo (medida en revisar.mjs): lo que hay adentro de la celda (el botón del N°, la foto, la pastilla del estado) se
   apoya sobre la línea del texto y le suma el espacio de las letras que bajan. Centrado, el renglón mide lo que mide su contenido. */
html.tcg-bajo .gg-tx-tabla td > * { vertical-align: middle; }
html.tcg-bajo .gg-tx-tabla td.gg-tx-n { line-height: 1; }
/* Lo de arriba de la tabla en monitores bajos (Lista de usados): encabezado, casas y acciones e indicadores más apretados. */
html.tcg-bajo .lu-modulo > .lu-cab { padding-top: 4px; padding-bottom: 4px; align-items: center; }
html.tcg-bajo .lu-modulo > .lu-cab .per-sub { display: none; }
html.tcg-bajo .lu-modulo > .lu-barra { padding-top: 4px; padding-bottom: 4px; }
html.tcg-bajo .lu-modulo > .lu-indicadores { padding-top: 0; padding-bottom: 4px; }
html.tcg-bajo .lu-ind { padding-top: 2px; padding-bottom: 2px; }
html.tcg-bajo .lu-ind .lu-ind-valor { font-size: 16px; }
html.tcg-bajo .lu-modulo .lu-barra { padding-top: 6px; padding-bottom: 6px; }
html.tcg-bajo .gg-tx .bt-acciones { flex: 1 1 auto; }
/* El pack de tablas: los renglones que manda la API y no son un dato (tanda zo, Deudas clientes): el título de un bloque, de lado a
   lado, y los subtotales, en negrita sobre el fondo de los títulos. No llevan N° ni cuentan en «N renglones». */
.gg-tx-tabla tbody tr.gg-tx-especial td { background: var(--gg-tabla-cabecera); font-weight: var(--gg-letra-peso-titulo); border-top: 2px solid var(--gg-tabla-linea); }
.gg-tx-tabla tbody tr.gg-tx-especial--titulo td { background: var(--gg-superficie-2); text-align: left; letter-spacing: .06em; padding-top: var(--gg-espacio-2); }
/* Tesorería › Deudas clientes: la unidad con su interno o dominio más chico, en la misma celda; la entregada que todavía debe, en
   rojo (el token del aviso de error: si cambia el rojo, cambia acá también). */
.dc-unidad { display: block; }
.dc-ident { display: block; font-size: 0.85em; font-weight: 400; font-variant-numeric: tabular-nums; }
.gg-tx-tabla td.dc-entregada { background: var(--gg-aviso-error) !important; color: var(--gg-aviso-error-tinta); font-weight: var(--gg-letra-peso-titulo); }
.dc-filtros { display: flex; gap: var(--gg-espacio-3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--gg-espacio-2); }
.dc-filtros label { display: flex; flex-direction: column; gap: 2px; font-size: var(--gg-letra-chica); }
.dc-filtros select.per-buscar { flex: 0 0 auto; min-width: 13rem; height: 2.25rem; }
/* La planilla de Ramiro tiene nueve columnas: la ventana de TCG (900 px) se ensancha para que entren sin correrse de costado. */
.per-modal.dc-modal { max-width: min(73rem, 100%); }
@media (max-width: 700px) { .dc-filtros label, .dc-filtros select { width: 100%; } }

/* Una ventana dentro de otra nunca es más alta que el lugar que tiene (paquete 1, 01/11/2026). Medido a 1366 con el
   navegador al 75 %: la ficha de una formación medía 922 (el 92 % de la pantalla, regla de tcg.css) y su capa 859; centrada,
   la cabecera con «Cerrar» quedaba debajo de la franja de arriba y no se podía cerrar. Con «min» nunca crece: sólo se
   achica cuando no entra, y entonces se desplaza su cuerpo. «com-modal» repetida: tcg.css le pone el 92 % con «!important»
   y una regla de once clases (los «:not» de la línea 20582); hace falta una más para ganarle sin tocar la copia de TCG. */
.tcg-app .gv-root .gv-panel-proceso .per-overlay .per-overlay > .per-modal.com-modal.com-modal.com-modal.com-modal.com-modal.com-modal { max-height: min(calc(92vh / var(--tcg-z, 1)), 100%) !important; }

/* Tesorería, el resto (tanda zq): Caja diaria y posición, Saldo diario, Seguimiento de cheques y Caja por sector. Lo que tcg.css no
   trae (el Saldo diario de TCG traía su CSS adentro de la pantalla, con colores sueltos) va acá, con los tokens. Clases «tz-» o las de
   TCG adentro de «.tz-sd»; no toca nada de las pantallas que no son estas cuatro. */
.tz-pantalla { display: flex; flex-direction: column; gap: var(--gg-espacio-3); }
.tz-neg { color: var(--gg-aviso-error) !important; }
.tz-pos { color: var(--gg-tcg-ok); }
.tz-in, .tz-pantalla .tesoreria-input-num { width: 100%; }
.tesoreria-kpi .tz-kpi-nota, .tz-kpi-nota { font-size: .72em; line-height: 1.25; opacity: .85; }
input.tz-neg, .tesoreria-tabla input.tz-neg { color: var(--gg-aviso-error) !important; }
.tz-botones { display: flex; gap: var(--gg-espacio-2); margin-top: var(--gg-espacio-3); flex-wrap: wrap; }
.tz-sd { background: var(--gg-superficie); color: var(--gg-tabla-letra); border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-borde-radio);
  padding: var(--gg-espacio-3); display: flex; flex-direction: column; gap: var(--gg-espacio-3); }
.tz-sd .sd-header { display: flex; justify-content: space-between; align-items: center; gap: var(--gg-espacio-3); flex-wrap: wrap; padding: var(--gg-espacio-3);
  border-radius: var(--gg-borde-radio); }
.tz-sd .sd-header h2 { margin: 0; font-size: var(--gg-letra-titulo); }
.tz-sd .sd-header p { margin: 2px 0 0; font-size: var(--gg-letra-chica); }
.tz-sd .sd-header-kpi { margin-left: auto; text-align: right; }
.tz-sd .sd-header-kpi span { display: block; font-size: var(--gg-letra-chica); }
.tz-sd .sd-neg { color: var(--gg-aviso-error); }
.tz-sd .sd-header--casa .sd-neg { color: inherit; text-decoration: underline; }
.tz-sd .sd-cargando { padding: var(--gg-espacio-4); text-align: center; }
.tz-sd .sd-solapas, .tz-sd .sd-tabla-barra-izq, .tz-sd .sd-tna { display: flex; align-items: center; gap: var(--gg-espacio-2); flex-wrap: wrap; }
.tz-sd .sd-solapas { margin-top: var(--gg-espacio-2); }
.tz-sd .sd-tabla-bloque, .tz-sd .sd-panel { border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-3); background: var(--gg-fondo); }
.tz-sd .sd-tabla-barra { margin-bottom: var(--gg-espacio-2); }
.tz-sd .sd-chip { border: var(--gg-borde-ancho) solid var(--gg-casa); border-radius: 999px; padding: 2px var(--gg-espacio-3); font-weight: var(--gg-letra-peso-titulo); }
.tz-sd .sd-btn { min-height: var(--gg-boton-alto); }
.tz-sd .sd-btn--del { border-color: var(--gg-aviso-error); color: var(--gg-aviso-error); }
.tz-sd .sd-in { width: 100%; min-width: 5rem; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: center; padding: 2px 4px; }
.tz-sd .sd-in:focus { border-color: var(--gg-borde-foco); outline: none; background: var(--gg-superficie); }
.tz-sd .tz-tna { width: 5.5rem; border: var(--gg-borde-ancho) solid var(--gg-borde); }
.tz-sd .sd-arrastrado, .tz-sd td.sd-arrastrado { font-style: italic; opacity: .8; }
.tz-sd td.sd-calc { font-weight: var(--gg-letra-peso-titulo); }
.tz-sd td.sd-manual { box-shadow: inset 0 0 0 2px var(--gg-tcg-ambar); }
.tz-sd tr.tz-sd-vacia td { opacity: .75; }
.tz-sd .sd-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--gg-espacio-3); flex-wrap: wrap; margin-top: var(--gg-espacio-2); }
.tz-sd .sd-pie-izq, .tz-sd .sd-pie-der { display: flex; align-items: center; gap: var(--gg-espacio-3); flex-wrap: wrap; }
.tz-sd .sd-pie-item { text-align: right; }
.tz-sd .sd-pie-item span { display: block; font-size: var(--gg-letra-chica); text-transform: uppercase; }
.tz-sd .sd-panel-head h3 { margin: 0; font-size: var(--gg-letra-base); }
.tz-sd .sd-panel-sub { font-size: var(--gg-letra-chica); }
.tz-sd .sd-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gg-espacio-2); margin-top: var(--gg-espacio-2); }
.tz-sd .sd-ind { border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-2) var(--gg-espacio-3); background: var(--gg-superficie); }
.tz-sd .sd-ind-tit { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-size: var(--gg-letra-chica); text-transform: uppercase; text-decoration: underline; cursor: pointer; text-align: left; min-height: 0; }
.tz-sd .sd-ind-valor { font-size: var(--gg-letra-titulo); font-weight: var(--gg-letra-peso-titulo); margin-top: var(--gg-espacio-1); }
.tz-sd .sd-ind-sub, .tz-sd .sd-ind-nota { font-size: var(--gg-letra-chica); }
.tz-sd .sd-ind-nota { font-style: italic; margin-top: var(--gg-espacio-1); }
.tz-sd .rec-route { display: flex; gap: var(--gg-espacio-2); overflow-x: auto; padding: var(--gg-espacio-1) 0; }
.tz-sd .rec-route-stop { cursor: pointer; text-align: center; min-width: 3.5rem; }
.tz-sd-vacio .sd-btn { margin-left: var(--gg-espacio-2); }
.tz-sd-ficha { display: flex; flex-direction: column; gap: var(--gg-espacio-1); }
.tz-sd-ficha .sd-campo { display: flex; justify-content: space-between; align-items: center; gap: var(--gg-espacio-3); }
.tz-sd-ficha .sd-in { max-width: 14rem; border: var(--gg-borde-ancho) solid var(--gg-borde); }
.tz-sd-det-valor { margin-bottom: var(--gg-espacio-2); }
.tz-sch-otra-tanda, .tz-por-hacer { padding: var(--gg-espacio-4); text-align: center; }
.tz-cjs-movs, .tz-ord-todas, .tz-ord-sector-tabla { margin-top: var(--gg-espacio-2); }
.tz-ord-acc { display: inline-flex; gap: var(--gg-espacio-1); }
.tz-orden { display: flex; flex-direction: column; gap: var(--gg-espacio-1); }
.tz-orden-fila { display: flex; justify-content: space-between; gap: var(--gg-espacio-3); border-bottom: 1px solid var(--gg-tabla-linea); padding: 2px 0; }
.tz-orden-letras { font-style: italic; padding: var(--gg-espacio-2) 0; }
.tz-orden-firmas { display: flex; justify-content: space-between; gap: var(--gg-espacio-4); padding-top: var(--gg-espacio-5); }
.tz-orden-firmas span { flex: 1; border-top: 1px solid var(--gg-borde); text-align: center; font-size: var(--gg-letra-chica); }
/* Pedido de Ramiro (01/11/2026), sólo en estas pantallas: en el celular ningún indicador queda colgado. De a dos por renglón; si quedan
   impares, el último ocupa todo el ancho (el componente común de indicadores lo cambia la tanda zk, no se toca acá). */
@media (max-width: 700px) {
  .tz-kpis { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--gg-espacio-2) !important; }
  .tz-kpis > * { min-width: 0 !important; width: auto !important; margin: 0 !important; }
  .tz-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tz-sd .sd-header-kpi { margin-left: 0; text-align: left; }
}
/* Agenda de formaciones (tanda e02): las seis solapas en una sola fila (en el celular se deslizan dentro de su caja, la página no
   se corre), el «vale por» angosto al cargar un curso y la tilde de la matriz centrada en su celda. */
.per-barra.for-solapas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.per-barra.for-solapas > * { flex: 0 0 auto; white-space: nowrap; }
.per-buscar.for-vale { flex: 0 0 9rem; }
.for-matriz .ret-tilde.for-tilde { margin: 0 auto; }
.for-recert-kpis, .for-persona-kpis { margin-bottom: var(--gg-espacio-2); }
.for-link-txt { display: block; max-width: 17rem; white-space: normal; overflow-wrap: anywhere; word-break: break-all; text-align: left; }

/* Ventas › Entrega de unidades (tanda p03, copia de TCG 0480-EntregaVNPantalla): lo que tcg.css no trae. El renglón atrasado (la entrega
   estimada ya pasó) y el aviso de deuda van con el token del aviso de ajuste; las observaciones ocupan el renglón entero. */
.ent-barra { display: flex; align-items: center; flex-wrap: wrap; }
.gg-tx-tabla tbody tr.ent-atrasada td { background: var(--gg-aviso-ajuste); color: var(--gg-aviso-ajuste-tinta); }
.ent-modal .ing-grid--edit .ent-obs { grid-column: 1 / -1; }
.ent-estado { margin: var(--gg-espacio-2) 9px 0; font-size: var(--gg-letra-chica); }
.ent-estado--deuda { background: var(--gg-aviso-ajuste); color: var(--gg-aviso-ajuste-tinta); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-2); font-weight: var(--gg-letra-peso-titulo); }
/* Tanda p05: el «listo» y los gastos del área debajo de la carga, y el título de cada grupo de la Programación de entregas (TCG prog-grupo-tit). */
.ent-lge { margin: var(--gg-espacio-2) 9px 0; }
.gg-tx-tabla tbody tr.prog-grupo-fila td { text-transform: uppercase; }
@media (max-width: 720px) { .per-overlay > .per-modal.ing-modal.ent-modal > .com-cuerpo { flex: 0 0 auto; overflow: visible; } .ent-modal .prog-envoltura .ing-tabla-cont { max-height: none; overflow: visible; } }
/* En el celular las fichas van enteras (TCG las dibuja fuera de la caja con alto máximo) y lo que se carga, debajo. */
@media (max-width: 720px) { .per-overlay > .per-modal.ing-modal.ent-modal { overflow-y: auto; } .per-overlay > .per-modal.ing-modal.ent-modal > * { flex: 0 0 auto; } .per-overlay > .per-modal.ing-modal.ent-modal > .ing-tabla-cont { max-height: none; overflow: visible; } .per-overlay > .per-modal.ing-modal.ent-modal > .per-pie { margin-top: auto; } .ent-modal .ing-grid--edit { grid-template-columns: 1fr; } .ent-modal .ing-grid--edit .per-campo { grid-template-columns: 1fr; } .ent-modal .ing-grid--edit .per-campo > span { text-align: left; } }
/* Tanda e32 · Préstamos: en el celular las fichas van enteras (TCG las dibuja fuera de la caja de la tabla) y lo que se carga, debajo;
   la ventana se corre entera, como en TCG. Se reconoce por sus pasos (prest-pasos), así el DOM queda igual al de TCG. */
@media (max-width: 720px) { .per-overlay > .per-modal.ing-modal:has(> .proc-herramientas .prest-pasos) { overflow-y: auto; } .per-overlay > .per-modal.ing-modal:has(> .proc-herramientas .prest-pasos) > * { flex: 0 0 auto; } .per-overlay > .per-modal.ing-modal:has(> .proc-herramientas .prest-pasos) > .ing-tabla-cont { max-height: none; overflow: visible; } .per-overlay > .per-modal.ing-modal:has(> .proc-herramientas .prest-pasos) > .per-pie { margin-top: auto; } }
/* Ventas › Imágenes de la venta (copia de TCG 0400-VentaImagenes): el nombre de «otra imagen» se escribe antes de elegirla (TCG lo
   pedía en una ventanita del navegador); sin nombre, la caja queda apagada. El alta del usado desde la venta: la nota de abajo. */
.vi-nombre { width: 100%; margin-bottom: var(--gg-espacio-2); }
.vi-vacia--apagada { opacity: .5; cursor: not-allowed; }
.gg-nota { margin: var(--gg-espacio-3) 0 0; font-size: var(--gg-letra-chica); }
/* El modal de ventas: «WhatsApp» es un enlace (wa.me) con la forma de los botones del pie. */
.vnv-pie a.lu-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* La documentación de la venta (tanda p06, TCG doc-modal): los datos del comprador y del usado debajo de sus fotos; lo que vino de una
   foto, marcado «de la foto» (como TCG bsm-c--foto) hasta que la persona lo cambia. */
.doc-datos { margin-top: var(--gg-espacio-2); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--gg-espacio-2); }
.doc-datos .doc-dato { font-size: var(--gg-letra-chica); }
.doc-dato--foto input { background: var(--gg-aviso-ajuste) !important; color: var(--gg-aviso-ajuste-tinta) !important; border-color: var(--gg-tcg-ambar) !important; }
.doc-defoto { font-style: normal; font-weight: var(--gg-letra-peso-titulo); margin-left: var(--gg-espacio-1); padding: 0 var(--gg-espacio-1); border-radius: var(--gg-boton-radio);
  background: var(--gg-aviso-ajuste); color: var(--gg-aviso-ajuste-tinta); }
.doc-acc--usado { margin-top: var(--gg-espacio-2); justify-content: flex-end; }
.doc-item-tit .doc-aviso { font-weight: normal; }
@media (max-width: 600px) { .doc-modal .doc-grilla--2 { grid-template-columns: 1fr 1fr; } .doc-agregar { flex-wrap: wrap; } }
/* Tanda p09 · la precarga en el modal de ventas de 0 km (la venta sin unidad): marca, modelo, versión y color en el panel de la unidad,
   dos por renglón, con el rótulo arriba. El panel no cambia de tamaño (el modal es fijo). */
.vnv-precarga-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gg-espacio-2); align-content: start; padding-top: var(--gg-espacio-2); }
.vnv-modal .vnp-cuerpo.vnv-pila { display: grid; }
.vnv-pila > * { grid-area: 1 / 1; }
.vnv-pila-oculta { visibility: hidden; display: flex; flex-direction: column; }
.vnv-modal .vnv-precarga-campos .per-campo { display: flex; flex-direction: column; align-items: stretch; gap: var(--gg-espacio-1); }
.vnv-modal .vnv-precarga-campos .per-campo > span { text-align: left; }
.vnv-modal .vnv-precarga-campos .per-campo > span { font-size: var(--gg-letra-chica); }
.vnv-modal .vnv-precarga-campos input { font-size: var(--gg-letra-base); }

/* Tanda p08 · Unidades no entregadas (solapa de Entrega de unidades y ventana de opciones, como el sistema viejo de la empresa). p14: sin
   renglones de título; entre el bloque de arriba y el de abajo, una línea fina (el ancho del borde común); la F. E. Entrega vencida, con
   un recuadro rojo suave (el rojo de los avisos, aclarado) y la letra normal. */
.gg-tx-tabla td.ne-estimada-vencida { box-shadow: inset 0 0 0 calc(var(--gg-borde-ancho) * 2) color-mix(in srgb, var(--gg-aviso-error) 45%, transparent); }
/* La línea va también como sombra de abajo: con las celdas pegadas, el borde de la fila siguiente la taparía. */
.gg-tx-tabla tbody tr.ne-fin-bloque td { border-bottom: var(--gg-borde-ancho) solid var(--gg-texto); box-shadow: inset 0 calc(var(--gg-borde-ancho) * -1) 0 var(--gg-texto); }
.gg-tx-tabla tbody tr.ne-fin-bloque td.ne-estimada-vencida { box-shadow: inset 0 calc(var(--gg-borde-ancho) * -1) 0 var(--gg-texto),
  inset 0 0 0 calc(var(--gg-borde-ancho) * 2) color-mix(in srgb, var(--gg-aviso-error) 45%, transparent); }
.fa-ficha.ne-fin-bloque { margin-bottom: var(--gg-espacio-3); }
.ne-cuerpo .ne-barra { align-items: flex-end; }
.ne-cuerpo .ne-barra input.per-buscar { flex: 0 0 auto; width: 8rem; height: 2.25rem; }
.ne-cuerpo .ne-barra .ne-abrir { margin-left: auto; }
.ent-ne-lado { margin-left: var(--gg-espacio-2); }
.ne-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gg-espacio-3); }
.ne-grupo { border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-2) var(--gg-espacio-3); margin: 0;
            display: flex; flex-direction: column; gap: var(--gg-espacio-2); }
.ne-grupo legend { font-weight: var(--gg-letra-peso-titulo); padding: 0 var(--gg-espacio-1); }
.ne-opcion { display: flex; align-items: center; gap: var(--gg-espacio-2); min-height: 2.25rem; }
.ne-opcion input { width: 1.1rem; height: 1.1rem; }
.ne-grupo select { min-height: 2.25rem; }
.ne-nota { font-size: var(--gg-letra-chica); }
.ne-ok { margin: var(--gg-espacio-2) 0 0; }
@media (max-width: 700px) { .ne-opciones { grid-template-columns: 1fr; } .ne-cuerpo .ne-barra .ne-abrir { margin-left: 0; width: 100%; } }
/* La ventana de opciones se abre desde una solapa o desde Informes: tapa toda la pantalla (si no, el pie de la ventana de TCG queda encima). */
.ne-capa { position: fixed; inset: 0; z-index: 60; }
/* En el celular los lados de Entrega de unidades (ahora cinco, con «No entregadas») bajan de renglón en vez de salirse de costado. */
@media (max-width: 720px) {
  .ent-modal > .per-cab .mo-cab-btns { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .ent-modal > .per-cab .ent-lados { flex-wrap: wrap; flex: 1 1 100%; max-width: 100%; border-radius: var(--gg-borde-radio); }
}
/* ── Legajo de usados (tanda t21, Gestoría › Transferencias): la tabla formal y simétrica que pidió Ramiro. Sí/No como un par fijo del
   mismo ancho en todas las filas (sin dorado: el color de la casa y el rojo de los avisos); «Ver» y «Subir» dos botones iguales con el
   contador en su lugar fijo; textos a la izquierda, fechas centradas. ── */
.leg-boton { min-width: 7.5rem; font-weight: var(--gg-letra-peso-titulo); white-space: nowrap; }
.leg-boton--completo { border-color: var(--gg-tcg-ok); }
.leg-sino { display: inline-grid; grid-template-columns: 3.25rem 3.25rem; border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-boton-radio); overflow: hidden; }
.leg-sino button { min-height: 2.25rem; border: 0; background: var(--gg-superficie); color: var(--gg-texto); font: inherit; cursor: pointer; }
.leg-sino button + button { border-left: var(--gg-borde-ancho) solid var(--gg-borde); }
.leg-sino .leg-si.on { background: var(--gg-casa); color: var(--gg-casa-tinta); font-weight: var(--gg-letra-peso-titulo); }
.leg-sino .leg-no.on { background: var(--gg-aviso-error); color: var(--gg-aviso-error-tinta); font-weight: var(--gg-letra-peso-titulo); }
.leg-sino button:disabled { cursor: default; }
.leg-img { display: inline-grid; grid-template-columns: 3rem 4.5rem 4.5rem; gap: var(--gg-espacio-2); align-items: center; }
.leg-img-n { text-align: right; font-variant-numeric: tabular-nums; }
.leg-img-btn { width: 4.5rem; min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.leg-img-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.leg-fecha { width: 9.5rem; min-height: 2.25rem; text-align: center; }
.leg-obs { width: 100%; min-height: 2.25rem; text-align: left; }
.leg-sub { margin: 0 0 var(--gg-espacio-3); font-size: var(--gg-letra-chica); }
.leg-agregar { display: flex; align-items: center; gap: var(--gg-espacio-2); margin-top: var(--gg-espacio-3); flex-wrap: wrap; }
.leg-agregar input { min-height: 2.25rem; width: 22rem; max-width: 100%; }
.leg-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--gg-espacio-3); }
.leg-fotos img { width: 100%; height: auto; border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-borde-radio); }
.leg-fotos figcaption { font-size: var(--gg-letra-chica); text-align: center; }
.leg-ventana .gg-tx-tabla td.leg-col-texto { text-align: left; }
.leg-ventana .leg-sino { grid-template-columns: 3rem 3rem; }
.leg-ventana .leg-img { grid-template-columns: 2.5rem 4rem 4rem; }
.leg-ventana .leg-img-btn { width: 4rem; }
.leg-ventana .leg-fecha { width: 8.5rem; }
/* Bajas › «Libre deuda» (leído del Legajo de usados): el Sí/No con su día y «Ver» las fotos, del mismo ancho en todas las filas. */
.leg-libre { display: inline-grid; grid-template-columns: 6.5rem 4.5rem; gap: var(--gg-espacio-2); align-items: center; }
.leg-libre .leg-img-btn { width: 4.5rem; }
.leg-libre-si { text-align: center; }
.leg-libre-si.on { font-weight: var(--gg-letra-peso-titulo); }

/* ── Tanda p21 · carga rápida del modal de Ventas y de Operaciones (Ramiro, 02/11/2026: «hay botones de desplegar y de sumar uno
   nuevo que son chicos, sobre todo en el de ventas… que no sea difícil ni inseguro»). El modal de Ventas NO cambia de tamaño: los
   renglones miden lo mismo (28 px, los de TCG); lo que crece es cada blanco dentro de su renglón (revisar.mjs compara la caja). ── */
/* «+ Nuevo» con su nombre («+ Cliente nuevo» al pasar el mouse), del alto del campo y alcanzable con Tab (antes un «+» de 26 px). */
.cvn-cat-elegir > .lu-btn.cat-nuevo { flex: 0 0 auto; align-self: stretch; white-space: nowrap; font-weight: 700; }
.vnv-fijo .vnb .cvn-cat-elegir > .lu-btn.cat-nuevo { height: 28px !important; min-width: 76px; padding: 0 10px !important; font-size: 14px; }
/* La flecha que abre la lista: todo el alto del campo, más ancha y separada con una raya (antes 24 px sin borde). */
.vnv-fijo .vnb .cvn-cat-elegir .cat-flecha-btn { width: 34px; border-left: 1px solid var(--gg-borde); border-radius: 0 7px 7px 0; }
.vnv-fijo .vnb .cvn-cat-elegir .cat-disparador { padding-right: 40px !important; }
.vnv-fijo .vnb .cat-flecha { font-size: 16px; }
/* El alta de agente, vendedor o financiera en el mismo renglón, del mismo alto y con letra que se lee. */
.vnv-fijo .vnb .cvn-cat-alta > input { height: 28px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 17px; }
.vnv-fijo .vnb .cvn-cat-alta > .lu-btn { height: 28px !important; min-width: 36px; padding: 0 10px !important; font-size: 14px; }
/* «✓ creado»: dentro del campo, junto al cliente recién dado de alta. */
.cat-disparador .cat-marca { flex: 0 0 auto; margin-left: auto; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.5;
  background: var(--gg-tcg-ok); color: var(--gg-tcg-sobre-color); white-space: nowrap; }
/* Lo marcado con las flechas, bien visible (en la lista del desplegable y en la de localidades de la ficha). */
.cat-op.cat-op--foco, .cat-op-nuevo.cat-op--foco, .vna-loc-op.vna-loc-op--foco { outline: 2px solid var(--gg-casa); outline-offset: -2px; background: var(--gg-tabla-elegida); }
/* Pie: botones de 36 px; el pie mide lo mismo (se le saca relleno). */
.vnv-fijo .per-pie { padding-top: 3px !important; padding-bottom: 3px !important; }
.vnv-fijo .per-pie .lu-btn, .vnv-fijo .per-pie button { height: 36px !important; }
/* Buscador: las píldoras del alto del buscador (36 px, el renglón ya medía eso). */
.vnv-fijo .vnvb-pill { height: 36px !important; }
.vnv-fijo .vnvb-pill--doble > button { height: 34px !important; }
/* «+ Cargar usado»: el alto del título de su tarjeta y letra que se lee (antes 22 px y 11 px). */
.vnv-fijo .vnv-usado .vnv-cargar-usado { height: 26px !important; font-size: 13px; }
.vnv-fijo .vnv-usado > .vnb-cab { padding-top: 1px !important; padding-bottom: 1px !important; }   /* 26 + 2 = el mismo alto de antes (22 + 6) */
/* Tanda p26 · hasta dos usados en parte de pago en el MISMO renglón (Ramiro: el modal no cambia de tamaño ni de letra): los dos desplegables
   se reparten el ancho del campo, con la misma letra que el desplegable de siempre (13 px); el rótulo entero va en el título. */
.vnv-fijo .vnb .vnv-usado-dos { display: flex; gap: 4px; min-width: 0; }
.vnv-fijo .vnb .vnv-usado-dos > select { flex: 1 1 0; min-width: 0; width: auto !important; font-size: 13px !important; letter-spacing: -.1px; text-overflow: ellipsis; padding-right: 22px; }
/* Vendida, el rótulo de los dos usados empieza por el primer dominio y se corta al final con «…» (el entero, en el título). */
.vnv-fijo .vnb .vnv-usado-sel > .vnv-usado-txt { display: block !important; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
/* «Soltar unidad» se leía blanco sobre blanco en modo claro. */
.vnv-fijo .per-cab .vnvb-acciones .vnvb-pill.vnvb-pill--soltar > span.vnvb-largo,
.vnv-fijo .per-cab .vnvb-acciones .vnvb-pill.vnvb-pill--soltar > span.vnvb-corto { color: var(--gg-casa-sobre-claro) !important; }
/* Operaciones: el cliente ocupa el renglón entero (el nombre no se parte y entra «+ Nuevo»); desplegables y «+ Nuevo» de 36 px. */
.opx-modal .opx-bloque-cuerpo > .opx-cliente { grid-column: 1 / -1; }
.opx-modal .cvn-cat-elegir .cat-disparador { min-height: 36px; }
.opx-modal .cvn-cat-elegir > .lu-btn, .opx-modal .cvn-cat-alta > .lu-btn, .opx-modal .cvn-cat-alta > input { min-height: 36px; }
.opx-modal .cvn-cat-elegir > .lu-btn.cat-nuevo { width: auto !important; min-width: 36px; padding: 0 10px; font-size: 14px; }
/* Gestoría › Estimación · «Editar operación»: la localidad del titular (cambia su ficha), con la lista del padrón debajo del campo. */
.pat-ed-loc { position: relative; }
.pat-ed-loc .pat-ed-loc-lista { position: absolute; top: 100%; left: 0; right: 0; z-index: 70; margin: 2px 0 0; background: var(--gg-superficie); color: var(--gg-texto);
  border: 1px solid var(--gg-borde); border-radius: 8px; box-shadow: var(--gg-sombra); max-height: 260px; overflow-y: auto; }
.pat-ed-ficha-tit b { color: var(--gg-casa-sobre-claro); }
.vna-loc-op, .vna-loc-op span, .vna-loc-op em { font-size: 14px; }
.cat-pie.cat-pie--aviso { color: var(--gg-aviso-error-tinta); background: var(--gg-aviso-error); font-weight: 700; }
/* El DNI / CUIT dentro del campo del cliente (antes un renglón debajo que agrandaba el modal 17 px al elegirlo). */
.cat-disparador .cat-valor { flex: 1 1 auto; min-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-disparador .cat-nota { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--gg-texto); }
.vnv-fijo .vnb .cat-disparador .cat-nota, .vnv-fijo .vnb .cat-disparador .cat-marca { font-size: 13px !important; line-height: 1.5 !important; }
.cat-disparador .cat-nota--falta { color: var(--gg-aviso-error-tinta); background: var(--gg-aviso-error); padding: 0 6px; border-radius: 999px; }
.cat-disparador .cat-nota + .cat-marca { margin-left: 6px; }
/* «+ Cliente nuevo» al final de la lista del desplegable: se ve como una opción más, en negrita. */
.cat-op-nuevo { text-transform: none; letter-spacing: normal; display: block; width: 100%; padding: 6px 10px; background: none; border: 0; border-top: 1px solid var(--gg-borde); color: inherit; text-align: left;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.cat-op-nuevo:hover { background: var(--gg-tabla-elegida); }
/* (en el modal de Ventas la letra del campo va negra con -webkit-text-fill-color: las notas llevan el suyo) */
.vnv-modal .vnb .cat-disparador > span.cat-marca.cat-marca { color: var(--gg-tcg-sobre-color) !important; -webkit-text-fill-color: var(--gg-tcg-sobre-color); }
.vnv-modal .vnb .cat-disparador > span.cat-nota--falta.cat-nota--falta { color: var(--gg-aviso-error-tinta) !important; -webkit-text-fill-color: var(--gg-aviso-error-tinta); }
.vnv-fijo .vnv-pie .vnv-pie-nota.vnv-pie-nota--ok { font-weight: 800; }
/* En el celular las píldoras del buscador del modal decían su nombre corto en 11 px: 13 px, la letra mínima. */
@media (max-width: 899px) { .vnv-fijo .vnvb-pill, .vnv-fijo .vnvb-pill--doble > button { font-size: 13px !important; } }
.cvn-cat .cat-op-nuevo .cat-op-txt { text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: inherit; color: inherit; }

/* ── Tanda p23 · el nombre de «Entrega en cheques» y «Pagaré» se cambia en cada venta (Ramiro, 02/11/2026: «no podemos poner todas las
   descripciones que usan los concesionarios»). Quieto se ve igual que el rótulo de siempre (la misma letra, el mismo alto de 28 px: el
   modal no cambia de tamaño); al pasar el mouse aparece una línea punteada debajo y, con el foco, una línea llena. Los !important le
   ganan al «.tcg-claro input { … !important }» de tcg.css (la caja blanca con borde de todos los campos del modo claro). ── */
.vnv-modal .vnb .per-campo > .vnv-rot-edit { display: block; min-width: 0; overflow: visible; }
.vnv-modal .vnb .per-campo .vnv-rot-edit > input,
.vnv-modal .vnb .per-campo .vnv-rot-edit > input:disabled {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding-left: 0; padding-right: 2px; min-height: 0;
  background: transparent !important; border: 0 !important; border-bottom: var(--gg-borde-ancho) dashed transparent !important; border-radius: 0; box-shadow: none;
  font: inherit; font-size: inherit; font-weight: inherit; color: inherit !important; -webkit-text-fill-color: currentColor; opacity: 1;
  text-align: inherit; text-overflow: ellipsis; cursor: text;
}
.vnv-modal .vnb .per-campo .vnv-rot-edit > input:disabled { cursor: default; }
.vnv-modal .vnb .per-campo .vnv-rot-edit > input:hover:not(:disabled) { border-bottom-color: var(--gg-borde) !important; }
.vnv-modal .vnb .per-campo .vnv-rot-edit > input:focus { outline: none; border-bottom-style: solid !important; border-bottom-color: var(--gg-borde-foco) !important; }

/* Tanda p28 · Comisiones pendientes con importe provisorio: cómo se sacó, lo cobrado de menos y la ventana del cobro.
   Suscripción y contrato (Configuración y actualización) y Adjudicados: la fecha que sale de otro módulo y la tipeada de respaldo. */
.com-nota { display: block; margin-top: 3px; font-size: var(--gg-letra-chica); color: var(--gg-texto); }
.com-menos { color: var(--gg-aviso-error) !important; font-weight: var(--gg-letra-peso-titulo); }
.com-reclamar td { background: var(--gg-superficie-2); }
.com-cobro { display: grid; gap: var(--gg-espacio-3); }
.com-cobro p { margin: 0; }
.adj-origen { display: block; font-size: var(--gg-letra-chica); color: var(--gg-texto); white-space: nowrap; }
.adj-unidad { display: flex; gap: var(--gg-espacio-2); align-items: center; flex-wrap: wrap; }
.adj-unidad input { min-width: 11rem; }
.un-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--gg-espacio-3); margin: var(--gg-espacio-3) 0; }
.un-bloque { margin-top: var(--gg-espacio-4); }
.un-bloque h4 { margin: 0 0 var(--gg-espacio-2); }
.un-elegida td { background: var(--gg-aviso-ajuste); color: var(--gg-aviso-ajuste-tinta); }
.un-barra { display: flex; gap: var(--gg-espacio-2); align-items: center; flex-wrap: wrap; margin: var(--gg-espacio-2) 0; }
/* El mes de comisiones (tanda p27): el indicador del estado y «Cerrar mes» / «Reabrir mes», en una banda formal. Cerrado, el borde
   del color de la casa. No sale en la hoja impresa. */
.gg-cierre { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--gg-espacio-3); margin: var(--gg-espacio-3) 0; font-family: var(--gg-letra-familia); }
.gg-cierre .gg-indicador { flex: 1 1 18rem; }
.gg-cierre--cerrado .gg-indicador { border-color: var(--gg-casa); box-shadow: inset var(--gg-espacio-1) 0 0 var(--gg-casa); }
.gg-cierre__acciones { display: flex; align-items: center; flex: 0 0 auto; }
.gg-cierre__boton { flex: 0 0 var(--gg-boton-ancho-solo); min-width: var(--gg-boton-ancho-solo); font-weight: var(--gg-letra-peso-titulo); }
.gg-cierre__ayuda { font-size: var(--gg-letra-chica); color: var(--gg-texto); }
.gg-cierre__error { flex-basis: 100%; margin: 0; padding: var(--gg-espacio-2); background: var(--gg-aviso-error); color: var(--gg-aviso-error-tinta); }
/* Tanda p36: Gerencia corrige con el mes cerrado, con un motivo obligatorio. */
.gg-cierre__correccion { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gg-espacio-3); flex: 1 1 100%; }
.gg-cierre__correccion .gg-cierre__boton { flex: 0 0 auto; white-space: nowrap; padding: 0 var(--gg-espacio-4); }
.gg-cierre__motivo { display: flex; flex-direction: column; gap: var(--gg-espacio-1); flex: 1 1 22rem; font-size: var(--gg-letra-chica); color: var(--gg-texto); }
.gg-cierre__motivo input { min-height: var(--gg-boton-alto); padding: 0 var(--gg-espacio-2); font: inherit; font-size: var(--gg-letra-base); color: var(--gg-texto); background: var(--gg-superficie); border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-boton-radio); }
@media (max-width: 40rem) { .gg-cierre__acciones, .gg-cierre__boton, .gg-cierre__correccion .gg-cierre__boton { flex: 1 1 100%; } }
@media print { .gg-cierre { display: none; } }

/* Tanda p31 · Comisiones pendientes: el bloque «Cumplimiento del mes» (la administradora, el mes, el % y Guardar) entre la barra y los
   indicadores; en el celular, uno debajo del otro. */
.com-cumpl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gg-espacio-2) var(--gg-espacio-3); padding: var(--gg-espacio-3) var(--gg-espacio-4);
  border-bottom: var(--gg-borde-ancho) solid var(--gg-borde); background: var(--gg-superficie-2); font-family: var(--gg-letra-familia); }
.com-cumpl-tit { flex: 1 1 100%; font-weight: var(--gg-letra-peso-titulo); }
.com-cumpl .per-campo { margin: 0; }
.com-cumpl-mes select { min-width: 10rem; }
.com-cumpl-pct input { width: 8rem; text-align: center; }
.com-cumpl-btn { min-width: 8rem; }
.com-cumpl-nota { flex: 1 1 100%; margin: 0; font-size: var(--gg-letra-chica); }
@media (max-width: 720px) { .com-cumpl > .per-campo, .com-cumpl-btn { flex: 1 1 100%; } .com-cumpl-mes select, .com-cumpl-pct input { width: 100%; } }
/* Tanda p29 · Tesorería › Saldos a favor (pantalla propia, con la ventana de Deudas clientes): los indicadores arriba de la barra, el estado
   en palabras (pendiente en rojo, parcial en ámbar) y los resueltos más apagados; en la ventana de resolver, las dos solapas. */
.saf-indicadores { margin: var(--gg-espacio-3) 0; }
.gg-tx-tabla td.saf-estado--pendiente { color: var(--gg-aviso-error) !important; font-weight: var(--gg-letra-peso-titulo); }
.gg-tx-tabla td.saf-estado--parcial { background: var(--gg-aviso-ajuste) !important; color: var(--gg-aviso-ajuste-tinta); font-weight: var(--gg-letra-peso-rotulo); }
.saf-resuelto td { background: var(--gg-superficie-2); }
.saf-modos { margin: var(--gg-espacio-2) 0 var(--gg-espacio-3); }
.saf-resumen { margin: 0 0 var(--gg-espacio-2); }
.saf-aviso, .saf-error { margin: 0 0 var(--gg-espacio-2); }
.per-modal.saf-modal { max-width: min(86rem, 100%); }

/* Tanda p34 · la firma de la suscripción (SusFirma: el lienzo de TCG, 300 × 130, dibujado sin JavaScript), el texto de cada plan en
   la tanda del aviso mensual (en varios renglones, como le llega al cliente). */
.sus-firma { width: fit-content; max-width: 100%; }
.sus-firma-lienzo { display: block; width: 18.75rem; height: 8.125rem; flex: none; border-radius: 0.4375rem; background: var(--gg-superficie);
  border: var(--gg-borde-ancho) solid var(--gg-borde); touch-action: none; cursor: crosshair; }
.sus-firma-lienzo * { pointer-events: none; }
.sus-firma-lienzo polyline { fill: none; stroke: var(--gg-texto); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.av-tanda-msj { white-space: pre-wrap; display: block; min-width: 16rem; text-align: left; }

/* La tanda del aviso mensual lleva el texto de cada plan: la ventana de TCG (880 px) se agranda para que entre la fila entera. */
.per-modal.crm-tanda.av-tanda-modal { width: min(75rem, calc(96vw / var(--tcg-z, 1))); }
/* La documentación de la suscripción se abre desde el formulario (que vive en la página): la ventana cubre la pantalla y mide lo de TCG. */
.sus-form .per-overlay.doc-overlay { position: fixed; inset: 0; padding: var(--gg-espacio-3); }
.sus-form .per-overlay.doc-overlay > .per-modal.doc-modal { width: min(45rem, 100%); max-width: min(45rem, 100%); }
/* Tanda p36 (Ramiro, 03/11/2026): el saldo a favor del cliente, arriba de su ficha (indicador y el detalle). */
.vna-saldo { display: flex; flex-direction: column; gap: var(--gg-espacio-2); padding-bottom: var(--gg-espacio-2); border-bottom: var(--gg-borde-ancho) solid var(--gg-borde); }

/* LA SEGUNDA LLAVE (tanda p39): el QR para escanear con el celular (siempre negro sobre blanco, como lo arma la API), la clave para
   tipearla a mano y los códigos de recuperación, en letra de máquina para no confundir letras. */
.gg-llave { display: grid; gap: var(--gg-espacio-3); max-width: 34rem; }
.gg-llave__qr { width: 13rem; height: 13rem; image-rendering: pixelated; border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-borde-radio); }
.gg-llave__clave, .gg-llave__codigos { font-family: ui-monospace, Consolas, monospace; font-size: var(--gg-letra-base); letter-spacing: 0.06em; }
.gg-llave__codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--gg-espacio-1) var(--gg-espacio-3); margin: 0; padding: var(--gg-espacio-3); list-style: none;
    border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-borde-radio); }
.gg-llave__codigo { max-width: 12rem; letter-spacing: 0.2em; }
.gg-enlace-boton { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; min-height: var(--gg-boton-alto); }

/* Lo apagado por una clave externa (Componentes/CartelCredencial.razor, tanda p46): no es «falta hacer», es «falta la clave». */
.gg-credencial { display: flex; gap: var(--gg-espacio-2); align-items: baseline; flex-wrap: wrap; border: var(--gg-borde-ancho) dashed var(--gg-borde); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-2) var(--gg-espacio-3); background: var(--gg-superficie); color: var(--gg-texto); font-size: var(--gg-letra-chica); }
.gg-credencial__estado { font-weight: var(--gg-letra-peso-titulo); text-transform: uppercase; border: var(--gg-borde-ancho) solid var(--gg-borde); border-radius: var(--gg-boton-radio); padding: 0 var(--gg-espacio-2); }
.gg-credencial--on { border-style: solid; }
.gg-credencial--on .gg-credencial__estado { border-color: var(--gg-casa); }

/* ── PostVenta › Compañías de seguro (tanda p48) · tanda p51: lo de TCG yw ya está en tcg.css (copiado en p50 con catalogo.mjs); acá
   quedan sólo las dos reglas de GG360 que TCG no tiene. */
.seg-rep-sub { margin-bottom: var(--gg-espacio-2); }
.ag-pcs-casa .pvx-tit-fila, .ag-avisos .pvx-tit-fila { display: flex; flex-wrap: wrap; gap: var(--gg-espacio-2); align-items: baseline; justify-content: space-between; margin-bottom: var(--gg-espacio-2); }
/* ── Tanda p52 (varias PCs por casa, pedido de Ramiro para GG360; TCG todavía no la tiene): el Motor de la casa suma «Sesión única» y
   «En qué PC», así que su grilla pasa de 4 a 6 columnas. En el teléfono la tabla corre dentro de su caja, como las demás. */
.seg-motor-pl--unica .seg-alt-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.6fr) minmax(0, 1fr) 2.5rem; }
@media (max-width: 700px) { .seg-motor-pl--unica { overflow-x: auto; } .seg-motor-pl--unica .seg-alt-fila { min-width: 56rem; } }
/* ── Plan › Seguimiento de cartera (tanda dr): en el ⚙, cada solapa con su tilde (mostrar u ocultar) y ↑ ↓ para ordenarla (TCG sólo
   arrastraba; con las flechas también se ordena en el teléfono). El orden y lo escondido son de la persona y los guarda la API. */
.sc-config-item-tilde { display: flex; align-items: center; gap: var(--gg-espacio-2); flex: 1; min-width: 0; cursor: pointer; }
.sc-config-mover { min-width: 2rem; padding: 0 var(--gg-espacio-1); }

/* ── Compañías de seguro › Configuración, bloque 6 (tanda e2, R1 de Ramiro 09/11/2026: «Vista formal por bloques aprovechando los
   espacios»): una tarjeta por plataforma, en grilla que usa el ancho (con una sola, la tarjeta ocupa todo el ancho y sus datos van en dos columnas); adentro, renglones rótulo | valor (nada cortado: el texto baja
   de renglón) y «Actualizar ahora» al pie con el motivo si está apagado. En el celular, una tarjeta debajo de la otra. */
.seg-sincro-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--gg-espacio-3); margin-top: var(--gg-espacio-2); }
.seg-sincro-tarjeta { display: flex; flex-direction: column; gap: var(--gg-espacio-2); border: 1px solid var(--border); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-3) var(--gg-espacio-4); min-width: 0; }
.seg-sincro-tarjeta__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gg-espacio-1) var(--gg-espacio-3); padding-bottom: var(--gg-espacio-2); border-bottom: 1px solid var(--border); }
.seg-sincro-tarjeta__cab b { font-size: var(--gg-letra-base); }
.seg-sincro-estado { font-size: var(--gg-letra-chica); font-weight: var(--gg-letra-peso-rotulo); }
.seg-sincro-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); column-gap: var(--gg-espacio-5); }
.seg-sincro-dato { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); align-items: center; gap: var(--gg-espacio-3); padding: var(--gg-espacio-2) 0; border-bottom: 1px solid var(--border); }

.seg-sincro-dato > span:first-child { font-size: var(--gg-letra-chica); font-weight: var(--gg-letra-peso-rotulo); text-transform: uppercase; letter-spacing: .04em; }
.seg-sincro-dato > span { min-width: 0; overflow-wrap: anywhere; }
.seg-sincro-dato .seg-sincro-cada { width: 6rem; }
.seg-sincro-horario { display: inline-flex; align-items: center; gap: var(--gg-espacio-2); flex-wrap: wrap; }
.seg-sincro-hora { width: 6.5rem; }
.seg-sincro-acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gg-espacio-2) var(--gg-espacio-3); padding-top: var(--gg-espacio-1); }
.seg-sincro-acc .seg-sincro-ahora { min-height: var(--gg-boton-alto); }
.seg-sincro-porque { flex: 1 1 14rem; font-size: var(--gg-letra-chica); }
@media (max-width: 599px) { .seg-sincro-dato { grid-template-columns: minmax(0, 1fr); gap: var(--gg-espacio-1); } }

/* ── Ficha de una unidad, 0 km y usado (tanda e2, E3; tanda e3, Ramiro 09/11/2026: «ordenar bien la pantalla, vista formal con bloques»
   y «que las pantallas con la misma función en VN y VO sean iguales»): un solo marco (Componentes/FichaMarco.razor) con el aspecto de
   la Lista de usados (copia de TCG). Ancho de las ventanas de TCG; en la cabecera el título y el estado en una línea; los indicadores de
   la Lista sin su margen de página; en Datos, bloques con título (tarjetas como las de Seguros › Configuración, R1) que aprovechan el
   ancho, cada uno con sus datos en grilla pareja de dos columnas (rótulo arriba, valor abajo; si quedan impares, el último ocupa el
   renglón); las acciones abajo, en una franja fija sobre el pie, todas del mismo tamaño y «Dar de baja» aparte a la derecha. En el
   celular, un bloque debajo del otro y las acciones de a dos. */
.per-modal.fu-ficha { max-width: 1156px; width: 100%; }
.fu-ficha .fu-cab-tit { flex: 1 1 auto; min-width: 0; align-items: center; overflow-wrap: anywhere; }
.fu-estado { font-size: var(--gg-letra-chica); font-weight: var(--gg-letra-peso-titulo); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  border: 1px solid currentColor; border-radius: var(--gg-borde-radio); padding: 2px var(--gg-espacio-2); }
.fu-ficha .fu-indicadores { padding: 0; order: 0; }
/* En la ficha los indicadores van completos (título, valor y nota) también en los monitores bajos: la ficha tiene lugar. */
html.tcg-bajo .fu-ficha .lu-ind { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 3px; padding: 11px 13px; }
html.tcg-bajo .fu-ficha .lu-ind .lu-ind-nota { display: block; }
html.tcg-bajo .fu-ficha .lu-ind .lu-ind-valor { font-size: 19px; }
.fu-ficha .lu-ind-valor { overflow-wrap: anywhere; }
.fu-ficha .gu-carpetas { margin-top: var(--gg-espacio-1); }
.fu-solapa { display: flex; flex-direction: column; gap: var(--gg-espacio-3); min-width: 0; }
.fu-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--gg-espacio-3); align-items: start; }
.fu-bloque { border: 1px solid var(--border); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-2) var(--gg-espacio-4) var(--gg-espacio-1); min-width: 0; }
.fu-bloque-tit { margin: 0; padding: var(--gg-espacio-1) 0 var(--gg-espacio-2); border-bottom: 2px solid var(--border); font-size: var(--gg-letra-base); font-weight: var(--gg-letra-peso-titulo); }
.fu-bloque-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gg-espacio-4); }
.fu-bloque-datos > .fu-dato:last-child:nth-child(odd), .fu-bloque-datos > .fu-dato--ancho { grid-column: 1 / -1; }
.fu-bloque-datos > .gg-tx { grid-column: 1 / -1; margin: var(--gg-espacio-2) 0; }
.fu-dato { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--border); }
.fu-bloque-datos > .fu-dato:last-child, .fu-bloque-datos > .fu-dato:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.fu-dato-rot { font-size: var(--gg-letra-chica); font-weight: var(--gg-letra-peso-titulo); text-transform: uppercase; letter-spacing: .04em; }
.fu-dato-val { font-size: var(--gg-letra-base); font-weight: var(--gg-letra-peso-rotulo); overflow-wrap: anywhere; }
.fu-acciones { display: flex; flex-wrap: wrap; gap: var(--gg-espacio-2); align-items: center; padding: var(--gg-espacio-2) 16px; border-top: 1px solid var(--border); }
.fu-acciones > .lu-btn { min-height: var(--gg-boton-alto); flex: 1 1 0; min-width: 0; max-width: 11rem; justify-content: center; }
.fu-acciones-sep { flex: 1 1 auto; }
@media (max-width: 599px) {
  .fu-ficha .lu-ind .lu-ind-valor { font-size: 16px; }
  .fu-acciones > .lu-btn { flex: 1 1 calc(50% - var(--gg-espacio-2)); min-width: 0; max-width: none; }
  .fu-acciones-sep { display: none; }
  .fu-bloque { padding: var(--gg-espacio-1) var(--gg-espacio-3) 0; }
  /* En el celular la ventana entera corre junta (cabecera, indicadores, solapas, bloques, acciones y pie): con la franja fija de las
     acciones no quedaba lugar para los datos. */
  .per-overlay > .per-modal.fu-ficha { overflow-y: auto !important; }
  .per-overlay > .per-modal.fu-ficha > * { flex-shrink: 0; }
  .per-overlay > .per-modal.fu-ficha > .com-cuerpo { flex: 0 0 auto !important; overflow: visible !important; }
}

/* ── Tanda e4 (Ramiro, 09/11/2026: «Las tres [Cargar a mano, Comprar usado y la Ficha del usado] tienen que usar esta base [la de Comprar
   usado: bloques azules UNIDAD / OPERACIÓN / MARCAS DE LA OPERACIÓN / CANAL DE COMPRA, un dato por renglón a todo el ancho] y agregar
   "+ Crear nuevo" como lo tienen las otras»): los bloques de datos del usado (BloqueDatos / LineaDato sobre las clases ret-* de tcg.css,
   que no se toca). En la ventana de carga (ret-modal, el ancho de TCG) van uno debajo del otro; en la ficha (fu-ficha, ancha) los
   bloques se reparten en dos columnas y cada dato sigue en su renglón: rótulo a la izquierda, valor a la derecha. */
.du-bloques { display: flex; flex-direction: column; gap: var(--gg-espacio-1); min-width: 0; }
/* El cuerpo de la ventana de carga ocupa todo el alto que le queda entre la cabecera y el pie (tcg.css lo deja en un alto fijo y abajo
   quedaba un hueco en blanco) y corre adentro; nunca más alto que la pantalla. */
.ret-modal .ret-body:has(.du-bloques) { flex: 1 1 auto; min-height: 0; max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 200px); }
.du-bloque { min-width: 0; }
.du-bloque > .ret-seccion { margin: var(--gg-espacio-2) 0 var(--gg-espacio-2); }
.du-bloque .ret-linea { margin-bottom: 7px; }
.du-bloque .ret-rot { text-align: left; font-weight: var(--gg-letra-peso-rotulo); }
.du-linea--lectura { align-items: baseline; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.du-valor { display: block; min-width: 0; overflow-wrap: anywhere; font-size: var(--gg-letra-base); font-weight: var(--gg-letra-peso-rotulo); color: var(--text); }
.du-foto { display: block; width: 84px; height: 64px; object-fit: cover; border-radius: var(--gg-borde-radio); border: 1px solid var(--border); }
.du-canal.ret-tildes--fila .ret-tilde { flex: 1 1 0; }
/* «+ Crear nuevo» al lado del desplegable, claro y del alto del campo (tcg.css lo deja en 34 px de ancho para el «+» chiquito: acá se pisa). */
.ret-modal .ret-ctrl .lu-btn.cat-nuevo { flex: 0 0 auto !important; width: auto !important; padding: 0 10px; white-space: nowrap; }
.ret-modal .ret-ctrl .cvn-cat-alta .lu-btn:first-of-type { flex: 0 0 auto !important; width: auto !important; padding: 0 10px; white-space: nowrap; }
.du-bloque .cvn-cat-elegir { display: flex; width: 100%; gap: 4px; align-items: center; }
.du-bloque .cvn-cat-elegir .cat-disparador { flex: 1 1 auto; }
/* En la ficha (tanda e7, Ramiro, 10/11/2026: «mejorar la vista, fuente de letras y números iguales (…) Ordenar en dos bloques iguales de
   tamaño y simétricos con vista bien formal»): UNIDAD y OPERACIÓN lado a lado, del mismo ancho y del mismo alto (la grilla los estira al
   más alto); debajo, Marcas de la operación y Canal de compra a la izquierda y Valores a la derecha, también parejos. Cada bloque con su
   marco; cada renglón de la misma altura, con la misma línea divisoria, el rótulo a la izquierda con ancho fijo (los nombres de la Lista,
   «Info (Infoauto)», «Ganancia Bruta») y seguido de dos puntos, el valor a la derecha: rótulo y valor con la misma letra (Montserrat), el
   mismo tamaño y el mismo peso; nada en negrita salvo la franja del título. En el celular, un bloque debajo del otro. */
.fu-ficha .du-bloques--lectura { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gg-espacio-3); align-items: stretch; }
/* Los cinco bloques del usado: Marcas y Canal, uno sobre el otro, miden juntos lo mismo que Valores (la ficha del 0 km, con cuatro
   bloques, usa las dos columnas sin más). */
.fu-ficha .du-bloques--usado { grid-template-areas: "unidad operacion" "marcas valores" "canal valores"; }
.fu-ficha .du-bloques--usado > .du-bloque:nth-child(1) { grid-area: unidad; }
.fu-ficha .du-bloques--usado > .du-bloque:nth-child(2) { grid-area: operacion; }
.fu-ficha .du-bloques--usado > .du-bloque:nth-child(3) { grid-area: marcas; }
.fu-ficha .du-bloques--usado > .du-bloque:nth-child(4) { grid-area: canal; }
.fu-ficha .du-bloques--usado > .du-bloque:nth-child(5) { grid-area: valores; }
.fu-ficha .du-bloque { display: flex; flex-direction: column; min-width: 0; border: var(--gg-borde-ancho) solid var(--border); border-radius: var(--gg-borde-radio); padding: 0 var(--gg-espacio-3) var(--gg-espacio-2); }
.fu-ficha .du-bloque > .ret-seccion { margin: var(--gg-espacio-2) 0; font-size: var(--gg-letra-chica); }
.fu-ficha .du-bloque .ret-linea { margin: 0; padding: 0; min-height: 2rem; align-items: center; gap: var(--gg-espacio-2); border-bottom: var(--gg-borde-ancho) solid var(--border); }
.fu-ficha .du-bloque .ret-linea:last-child { border-bottom: 0; }
.fu-ficha .du-bloque .ret-rot { flex: 0 0 9.5rem; }
/* La ficha del usado lleva el renglón de la venta con su botón: el rótulo más angosto, para que la venta y el cliente entren enteros. */
.fu-ficha .du-bloques--usado .ret-rot { flex: 0 0 8.5rem; }
.fu-ficha .du-bloque .ret-rot, .fu-ficha .du-bloque .du-valor { font-family: var(--gg-letra-familia); font-size: var(--gg-letra-base); font-weight: normal; line-height: 1.3; color: var(--text); }
.fu-ficha .du-bloque .ret-rot::after { content: ":"; }
.fu-ficha .du-foto { height: 1.75rem; width: 2.5rem; margin: 2px 0; }
/* «Operación de» (tanda e6, Ramiro, 09/11/2026: el usado en parte de pago «queda relacionado a la operación de venta por la cual entró»;
   tanda e7, Ramiro, 10/11/2026: «mejorar especialmente» ese renglón): la venta y el cliente, enteros (nada cortado: si no entran siguen en
   la línea de abajo), y el botón «Ver» (corto, para que entren enteros) a la derecha del renglón, del alto del renglón, sin romper la grilla; la unidad vendida va en el
   renglón siguiente. En el celular el botón baja de renglón. */
.du-linea--venta .ret-ctrl { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--gg-espacio-1); min-width: 0; }
.du-valor--venta { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.du-linea--venta .du-venta-btn { flex: 0 0 auto; margin-left: auto; width: auto; white-space: nowrap; height: calc(2rem - 6px); padding: 0 var(--gg-espacio-1); font-size: var(--gg-letra-chica); line-height: 1; }
@media (max-width: 599px) {
  .fu-ficha .du-bloques--lectura { grid-template-columns: minmax(0, 1fr); }
  .fu-ficha .du-bloques--usado { grid-template-areas: "unidad" "operacion" "marcas" "canal" "valores"; }
  .fu-ficha .du-bloque .ret-rot { flex: 0 0 8.5rem; }
  .du-linea--venta .ret-ctrl { flex-wrap: wrap; }
  .du-valor--venta { flex-basis: 100%; }
}

/* ── Tanda e2 (E9, maqueta aprobada por Ramiro el 09/11/2026): el aviso de error en palabras se ve como un aviso (recuadro rojo, letra
   negra, en la misma línea de aviso de la pantalla), y si la pantalla entera se cae, un cartel centrado con «Volver a cargar». */
.gg-aviso-falla, p.gg-aviso-error, div.gg-aviso-error { color: var(--gg-texto); background: color-mix(in srgb, var(--gg-aviso-error) 10%, var(--gg-superficie));
    border: 2px solid var(--gg-aviso-error); border-radius: var(--gg-borde-radio); padding: var(--gg-espacio-2) var(--gg-espacio-3); font-weight: var(--gg-letra-peso-rotulo); }
.gg-caida { max-width: 34rem; margin: 10vh auto; padding: var(--gg-espacio-5); text-align: center; background: var(--gg-superficie); color: var(--gg-texto);
    border: 2px solid var(--gg-aviso-error); border-radius: var(--gg-modal-radio); display: flex; flex-direction: column; gap: var(--gg-espacio-3); align-items: center; }
.gg-caida p { margin: 0; }
.gg-caida__titulo { font-size: var(--gg-letra-titulo); font-weight: var(--gg-letra-peso-titulo); }
.gg-caida__boton { min-width: 12rem; flex: 0 0 auto; }

/* Gestoría › Programación (tanda e2, E5): el bloque de la programación a todo el ancho de la ventana de Gestoría, con su cabecera del color
   de la casa (como la maqueta aprobada). */
.gu-prog { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.gu-prog > .gu-prog-cab { background: var(--gg-casa); border-bottom: 0; }
.gu-prog > .gu-prog-cab .per-titulo, .gu-prog > .gu-prog-cab .per-sub { color: var(--gg-casa-tinta); }
.gu-prog .prog-envoltura { padding: var(--gg-espacio-3); display: flex; flex-direction: column; gap: var(--gg-espacio-2); }

/* R3 en Análisis por marca, país y zona (tanda e2): la tarjeta «Zona vs. País» es un indicador más de la fila, con la forma de los otros
   (am-ind-card); se le saca el brillo y el borde de color propios de la copia de TCG. */
.am-indicadores-marca > .am-ind-card.am-brecha-card { box-shadow: none; margin-bottom: 0; order: 0; }
.am-indicadores-marca .am-ind-titulo.am-brecha-titulo { text-shadow: none; }

/* ── R2 y R3 (Ramiro, 09/11/2026), tanda e2: «En ningún lado del proyecto puede haber un indicador colgado: ajustar para que quede una
   sola línea o dos. Nunca uno colgado.» y «Los indicadores deben ser iguales, nunca distintos.» Una sola regla para TODAS las filas de
   indicadores (las propias y las copias de TCG; tcg.css no se toca porque es copia exacta: acá se pisa):
   · con N indicadores, si entran en una línea (N × --ind-min) van en una; si no, en dos con la misma cantidad (o la de arriba con uno
     más); con 3, siempre una línea (en dos quedaría uno solo);
   · todos del mismo ancho y del mismo alto (grid con renglones de 1fr);
   · en el celular, de a dos; si N es impar, el primero ocupa el renglón entero (nunca uno solo al final).
   La cantidad la cuenta el CSS (:has); el ancho de la columna sale de clamp(): N columnas si entran, si no las de dos líneas.
   Toda fila de indicadores nueva se suma a esta lista: herramientas/pantallas/revisar.mjs la lee (la línea que sigue a
   «filas-de-indicadores:») y mide cada fila en cada pantalla, a 1366 y a 360 px.
   Registro de ventas y Liquidación de comisiones (Ramiro, 09/11/2026: «Registro y liquidación sí podés tocar con la regla de no
   indicador colgado») van en el bloque de abajo, sólo en la pantalla (la hoja impresa de la Liquidación sigue como TCG). Queda afuera
   el Informe de ventas (ivj-, no se toca sin preguntar) y la columna de Tesorería (tesoreria-kpis-columna), uno debajo del otro a
   propósito. */
/* filas-de-indicadores: */
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis) {
    --n: 1; --n2: 1;
    --ind-w1: calc((100% - (var(--n) - 1) * var(--ind-g, 10px)) / var(--n));
    --ind-w2: calc((100% - (var(--n2) - 1) * var(--ind-g, 10px)) / var(--n2));
    --ind-t: calc(var(--n) * var(--ind-min, 8.5rem) + (var(--n) - 1) * var(--ind-g, 10px));
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(calc(clamp(var(--ind-w1), (var(--ind-t) - 100%) * 999, var(--ind-w2)) - 1px), 1fr)) !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: var(--ind-g, 10px) !important;
}
.cip-inds { --ind-g: 0px; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis) > * { grid-column: auto !important; align-self: stretch !important; height: auto !important; min-width: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; box-sizing: border-box; }
/* La cantidad (N) y las columnas en dos líneas (la de arriba con uno más). */
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(2)) { --n: 2; --n2: 2; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(3)) { --n: 3; --n2: 3; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(4)) { --n: 4; --n2: 2; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(5)) { --n: 5; --n2: 3; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(6)) { --n: 6; --n2: 3; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(7)) { --n: 7; --n2: 4; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(8)) { --n: 8; --n2: 4; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(9)) { --n: 9; --n2: 5; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(10)) { --n: 10; --n2: 5; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(11)) { --n: 11; --n2: 6; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(12)) { --n: 12; --n2: 6; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(13)) { --n: 13; --n2: 7; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(14)) { --n: 14; --n2: 7; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(15)) { --n: 15; --n2: 8; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(16)) { --n: 16; --n2: 8; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(17)) { --n: 17; --n2: 9; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(18)) { --n: 18; --n2: 9; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(19)) { --n: 19; --n2: 10; }
:is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(20)) { --n: 20; --n2: 10; }
/* En el celular, de a dos; con N impar el primero va a todo el ancho. */
@media (max-width: 599px) {
    :is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    :is(.gg-indicadores, .sc-indicadores, .lu-indicadores, .pvx-kpis:not(:has(> .seg-kpis-fila)), .lead-kpis, .cjs-inds, .cip-inds, .cpb-inds, .fom-viab-inds, .un-indicadores, .sd-indicadores, .ta-kpis, .seg-kpis-fila, .sch-tarjetas, .rob-inds, .pda-kpis, .pat-kpi-row:not(.pat-kpi-row--split), .tesoreria-kpis, .tesoreria-kpis-fechas, .am-indicadores-marca, .asg-ind-fila, .car-inds, .inf-pie:not(.per-pie), .tz-kpis):has(> :last-child:nth-child(odd)) > :first-child { grid-column: 1 / -1 !important; }
}

/* ── R2 en Registro de ventas y Liquidación de comisiones (tanda e2; Ramiro, 09/11/2026: «Registro y liquidación sí podés tocar con la
   regla de no indicador colgado»). Sólo cómo se acomodan: los cinco totales del Registro y las tarjetas de los vendedores de la
   Liquidación, con la misma regla de arriba; sólo en la pantalla (la hoja impresa de la Liquidación sigue con sus 4 por fila de TCG).
   Las tarjetas de la Liquidación piden 290 px (su ancho de TCG) para ir en una línea; en el celular, una por renglón (ninguna sola al
   lado de otra). revisar.mjs lee también esta lista (la línea que sigue a «filas-de-indicadores-pantalla:»). */
@media screen {
/* filas-de-indicadores-pantalla: */
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)) {
    --n: 1; --n2: 1;
    --ind-w1: calc((100% - (var(--n) - 1) * var(--ind-g, 10px)) / var(--n));
    --ind-w2: calc((100% - (var(--n2) - 1) * var(--ind-g, 10px)) / var(--n2));
    --ind-t: calc(var(--n) * var(--ind-min, 8.5rem) + (var(--n) - 1) * var(--ind-g, 10px));
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(calc(clamp(var(--ind-w1), (var(--ind-t) - 100%) * 999, var(--ind-w2)) - 1px), 1fr)) !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: var(--ind-g, 10px) !important;
}
.lc-grid { --ind-min: 290px; }
/* Las tarjetas de la Liquidación no se estiran más de 420 px (con un solo vendedor queda del tamaño de TCG, a la izquierda). */
.lc-grid:not(.lc-grid--resumen) > .lc-card.lc-card { max-width: 420px !important; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)) > * { grid-column: auto !important; align-self: stretch !important; min-width: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; box-sizing: border-box; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(2)) { --n: 2; --n2: 2; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(3)) { --n: 3; --n2: 3; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(4)) { --n: 4; --n2: 2; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(5)) { --n: 5; --n2: 3; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(6)) { --n: 6; --n2: 3; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(7)) { --n: 7; --n2: 4; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(8)) { --n: 8; --n2: 4; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(9)) { --n: 9; --n2: 5; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(10)) { --n: 10; --n2: 5; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(11)) { --n: 11; --n2: 6; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(12)) { --n: 12; --n2: 6; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(13)) { --n: 13; --n2: 7; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(14)) { --n: 14; --n2: 7; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(15)) { --n: 15; --n2: 8; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(16)) { --n: 16; --n2: 8; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(17)) { --n: 17; --n2: 9; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(18)) { --n: 18; --n2: 9; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(19)) { --n: 19; --n2: 10; }
:is(.rv-root .rv-tot, .lc-grid:not(.lc-grid--resumen)):has(> :last-child:nth-child(20)) { --n: 20; --n2: 10; }
}
@media screen and (max-width: 599px) {
    .rv-root .rv-tot { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .rv-root .rv-tot:has(> :last-child:nth-child(odd)) > :first-child { grid-column: 1 / -1 !important; }
    .lc-grid:not(.lc-grid--resumen) { grid-template-columns: minmax(0, 1fr) !important; }
    .lc-grid:not(.lc-grid--resumen) > .lc-card.lc-card { max-width: none !important; }
}

/* Tanda fotos · la foto en grande (FotoGrande, «doc-grande»: Ventas, Suscripción, Facturación, Compañías de seguro, Fomentación) mantiene
   su proporción en cualquier pantalla. En el celular tcg.css pone «.per-overlay { align-items: stretch }» (las ventanas ocupan la pantalla
   entera) y eso estiraba la imagen a todo el alto. Acá la foto queda centrada, con su tamaño natural achicado hasta entrar, nunca estirada. */
.per-overlay.doc-grande { align-items: center; justify-content: center; }
.per-overlay.doc-grande > img { align-self: center; flex: 0 1 auto; width: auto; height: auto; min-width: 0; min-height: 0;
    max-width: min(100%, calc(94vw / var(--tcg-z, 1))); max-height: min(100%, calc(90vh / var(--tcg-z, 1))); object-fit: contain; }

/* Aplicaciones conectadas (tanda f-oidc): una aplicación revocada queda en la lista, apagada; el secreto y el identificador se muestran
   como la clave temporal de Usuarios (.au-clave), una sola vez; las casas de un sistema, una por renglón tildable. */
.gg-tx-tabla tbody tr.apc-revocada td { opacity: .55; }
.apc-casas { display: flex; flex-wrap: wrap; gap: var(--gg-espacio-2) var(--gg-espacio-4); }
.apc-casa { display: inline-flex; align-items: center; gap: var(--gg-espacio-1); }
.apc-secreto, .apc-identificador { word-break: break-all; }
/* Tanda f-plan (F2 §10.1): la nota de la comisión corregida («Valor anterior … · Corregida el … por …») va en el renglón de «% Comisión» del
   modal de ventas (de NO TOCAR: no cambia de tamaño), entre el rótulo y el porcentaje, en dos renglones chicos que entran en el alto del
   campo; el texto entero está en el title. */
.vnv-modal .vnb .per-campo.vnv-pct--corregida { grid-template-columns: 128px 1fr 7rem; }
.vnv-modal .vnb .vnv-pct .vnv-comision-correccion { min-width: 0; max-height: 2.4em; overflow: hidden; line-height: 1.15; text-align: right; }