dentro de una tabla con border-collapse:collapse no funciona bien en
Chrome y por eso quedaba en blanco. La de Detalle de Ventas no la fija.
3) overflow:hidden en las celdas escondía el contenido en vez de dejarlo
salir. Detalle de Ventas no lo usa.
--------------------------------------------------------------------- */
.sc-table { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; }
.sc-table tbody td { overflow: visible !important; text-overflow: clip !important; }
.sc-cant-col { position: static !important; box-shadow: none !important; z-index: auto !important; }
.sc-table thead th.sc-cant-col, .sc-table tbody td.sc-cant-col { background: color-mix(in srgb, var(--accent-blue) 10%, var(--panel-2)) !important; }
.sc-table tbody td.sc-cant-col { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 13px; color: var(--text); }
/* --------- Indicadores de Asignación: grilla en vez de posición libre ------
Antes cada tarjeta tenía coordenadas propias en píxeles: quedaba prolijo en
una pantalla y desarmado en otra, con huecos y tarjetas encimadas. Ahora
cada una ocupa un bloque de una grilla que se reacomoda sola: siempre
alineadas entre sí y sin espacios muertos. */
.asg-indicadores {
display: grid !important; position: static !important; height: auto !important;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
grid-auto-rows: 110px; gap: 12px; grid-auto-flow: row dense; overflow: visible;
}
.asg-ind-card {
position: relative !important; left: auto !important; top: auto !important;
width: auto !important; height: auto !important; min-height: 0; overflow: hidden;
display: flex; flex-direction: column;
}
.asg-ind-card--arrastrando { outline: 2px dashed var(--accent-amber); outline-offset: -3px; }
.asg-ind-cuerpo-scroll { flex: 1; min-height: 0; overflow: auto; }
.asg-ind-medida {
position: absolute; right: 8px; bottom: 6px; font-size: 12px; color: var(--text);
opacity: 0; transition: opacity 0.15s ease; pointer-events: none; font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
}
.asg-ind-card:hover .asg-ind-medida { opacity: 0.75; }
/* Barras para ajustar el tamaño: una a la derecha, otra abajo, y la esquina. */
.asg-ind-resize { position: absolute; z-index: 3; background: transparent; }
.asg-ind-resize--der { top: 8px; bottom: 8px; right: 0; width: 10px; cursor: col-resize; border-right: 3px solid transparent; }
.asg-ind-resize--abajo { left: 8px; right: 8px; bottom: 0; height: 10px; cursor: row-resize; border-bottom: 3px solid transparent; }
.asg-ind-resize--esquina { right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; display: flex; align-items: flex-end; justify-content: flex-end; font-size: 12px; color: var(--text); opacity: 1; }
.asg-ind-card:hover .asg-ind-resize--der { border-right-color: color-mix(in srgb, var(--accent-amber) 55%, transparent); }
.asg-ind-card:hover .asg-ind-resize--abajo { border-bottom-color: color-mix(in srgb, var(--accent-amber) 55%, transparent); }
.asg-ind-resize--der:hover { border-right-color: var(--accent-amber) !important; }
.asg-ind-resize--abajo:hover { border-bottom-color: var(--accent-amber) !important; }
.asg-ind-card:hover .asg-ind-resize--esquina { opacity: 1; color: var(--text); }
/* Columna "Fila": el botón de borrar ahora es un tacho y el tirador de alto
una flecha vertical. Antes eran una "×" y unas rayas que no se entendían. */
.sc-acciones .sc-btn-icon { font-size: 13px; }
.sc-acciones .asg-resize-fila {
width: auto !important; height: auto !important; border: none !important;
font-size: 12px; color: var(--text); opacity: 1; line-height: 1;
display: inline-flex; align-items: center; cursor: row-resize; touch-action: none;
}
.sc-acciones .asg-resize-fila:hover { opacity: 1; color: var(--text); }
/* Cuando una fila se agranda a mano, el texto largo pasa a verse completo en
varias líneas. Si no, el alto de más era espacio vacío y parecía que
agrandar la fila no servía para nada. */
.sc-table tbody tr[style*="height"] td { white-space: normal; vertical-align: top; }
.sc-acciones .asg-resize-fila { cursor: ns-resize; padding: 0 3px; }
/* El botón de vaciar se distingue del resto: borra todo lo cargado. */
.rv-btn--peligro { border-color: color-mix(in srgb, #ff5d5d 55%, transparent) !important; color: #ff8a8a !important; }
.rv-btn--peligro:hover { background: color-mix(in srgb, #ff5d5d 14%, transparent) !important; border-color: #ff5d5d !important; }
/* Sin cambios de aspecto: la celda se ve igual que siempre hasta que se
corrige un valor a mano, y ahí sí aparece el borde ámbar. */
.lc-aviso-menu { margin-top: 8px; font-size: 10.5px; line-height: 1.45; color: var(--text); border-top: 1px solid var(--border); padding-top: 8px; }
/* Lista de Usados: fechas sin el "dd/mm/aaaa" cuando están vacías. */
.lu-fecha { background: transparent; border: 1px solid var(--border, #2c2f36); border-radius: 6px; color: var(--text, #c7cbd3); font: inherit; font-size: 12px; padding: 3px 5px; }
.lu-fecha:focus { outline: none; border-color: var(--accent-amber); }
.lu-fecha--vacia::-webkit-datetime-edit { color: transparent; }
.lu-fecha--vacia:hover::-webkit-datetime-edit, .lu-fecha--vacia:focus::-webkit-datetime-edit { color: var(--text); }
/* Lista de Usados: indicadores arriba de la tabla. */
.lu-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; padding: 0 20px 14px; }
.lu-ind { display: flex; flex-direction: column; gap: 3px; background: var(--bg, #14181d); border: 1px solid var(--border, #2c2f36); border-left: 3px solid var(--border, #2c2f36); border-radius: 10px; padding: 11px 13px; min-width: 0; }
.lu-ind--alerta { border-left-color: #ff5d5d; }
.lu-ind-titulo { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .3px; }
.lu-ind-valor { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 19px; font-weight: 700; color: var(--text, #f0eee9); }
.lu-ind--alerta .lu-ind-valor { color: #ff5d5d; }
.lu-ind-nota { font-size: 12px; color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
/* Lista de Usados: barra de scroll también arriba de la tabla. */
.lu-tabla-zona { position: relative; }
.lu-scroll-arriba {
overflow-x: auto; overflow-y: hidden; position: sticky; top: 0; z-index: 4;
background: var(--panel, #161c2a); border-bottom: 1px solid var(--border, #252d3f);
/* Sin alto fijo el contenedor colapsa a 2px y la barra queda invisible:
el contenido interno mide 1px y la barra del navegador no siempre
ocupa lugar. Con esto siempre se ve y se puede agarrar. */
height: 14px; min-height: 14px;
scrollbar-width: thin; scrollbar-color: #4a5260 var(--panel, #1b2233);
}
.lu-scroll-arriba::-webkit-scrollbar { height: 12px; }
.lu-scroll-arriba::-webkit-scrollbar-track { background: var(--panel-2, #1b2027); }
.lu-scroll-arriba::-webkit-scrollbar-thumb { background: var(--panel, #4a5260); border-radius: 8px; }
.lu-scroll-arriba::-webkit-scrollbar-thumb:hover { background: var(--accent-amber); }
.lu-tabla-scroll { overflow-x: auto; }
/* Con la barra de arriba visible, la de abajo sobra: dos barras que hacen
lo mismo confunden. La tabla sigue desplazándose con rueda y gesto. */
.lu-tabla-scroll { scrollbar-width: none; }
.lu-tabla-scroll::-webkit-scrollbar { height: 0; }
.lu-tabla-scroll::-webkit-scrollbar { height: 12px; }
.lu-tabla-scroll::-webkit-scrollbar-track { background: var(--panel-2, #1b2027); }
.lu-tabla-scroll::-webkit-scrollbar-thumb { background: var(--panel, #4a5260); border-radius: 8px; }
/* Lista de Usados · pantalla de limpieza de dominios repetidos */
.lu-limpieza { padding: 0 20px 30px; }
.lu-limpieza-barra { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.lu-limpieza-titulo { color: var(--text, #f0eee9); margin: 0 0 4px; font-size: 17px; }
.lu-limpieza-sub { color: var(--text); margin: 0; font-size: 12.5px; line-height: 1.5; max-width: 720px; }
.lu-limpieza-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.lu-btn { background: transparent; border: 1px solid var(--border, #2c2f36); color: var(--text, #c7cbd3); border-radius: 8px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.lu-btn:hover { border-color: var(--accent-amber); }
.lu-btn--peligro { border-color: #E0725F; color: #E0725F; }
.lu-btn--peligro:hover { background: color-mix(in srgb, #E0725F 14%, transparent); }
.lu-grupo { border: 1px solid var(--border, #2c2f36); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.lu-grupo-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 12px; background: var(--panel-2, #1b2027); border-bottom: 1px solid var(--border, #2c2f36); }
.lu-grupo-dom { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 700; color: var(--text); }
.lu-grupo-meta { font-size: 12px; color: var(--text); }
.lu-grupo-scroll { overflow-x: auto; }
.lu-grupo-tabla { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.lu-grupo-tabla th { text-align: center; padding: 6px 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; color: var(--text); border-bottom: 1px solid var(--border, #2c2f36); }
.lu-grupo-tabla td { padding: 6px 8px; color: var(--text, #c7cbd3); border-bottom: 1px solid #24262C; text-align: center; }
.lu-fila-elegida td { background: color-mix(in srgb, #3ddc97 12%, transparent); }
.lu-celda-difiere { color: var(--text) !important; font-weight: 700; }
.lu-radio { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; color: var(--text); }
.lu-aviso-dup { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
margin: 0 20px 14px; padding: 10px 13px; border: 1px solid var(--accent-amber); border-radius: 10px;
background: color-mix(in srgb, var(--accent-amber) 10%, transparent); color: var(--text, #c7cbd3); font-size: 12.5px; line-height: 1.5; }
.lu-aviso-dup b { color: var(--text); }
/* Usados · solapas de vista e informes */
.lu-solapas { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 20px 12px; }
.lu-solapa { background: var(--bg, #14181d); border: 1px solid var(--border, #2c2f36); color: var(--text); border-radius: 8px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.lu-solapa:hover { border-color: var(--accent-amber); color: var(--text, #c7cbd3); }
.lu-solapa--activa { background: color-mix(in srgb, var(--accent-amber) 16%, var(--bg, #14181d)); border-color: var(--accent-amber); color: var(--text, #f0eee9); font-weight: 700; }
.lu-solapa-n { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px; opacity: 1; }
.lu-totales { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; padding: 0 20px 14px; }
.lu-total-card { background: var(--bg, #14181d); border: 1px solid var(--border, #2c2f36); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.lu-total-titulo { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.lu-total-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.lu-total-tabla td { padding: 3px 4px; color: var(--text, #c7cbd3); border-bottom: 1px solid #24262C; }
.lu-total-tabla td:first-child { color: var(--text); }
.lu-total-anti { font-size: 12px; color: var(--text, #c7cbd3); margin-top: 8px; line-height: 1.5; }
.lu-total-nota { color: var(--text); }
.lu-informe { padding: 0 20px 30px; }
.lu-corte { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.lu-corte-label { font-size: 12px; color: var(--text); text-transform: uppercase; letter-spacing: .3px; }
.lu-chip { background: transparent; border: 1px solid var(--border, #2c2f36); color: var(--text); border-radius: 20px; padding: 4px 11px; font-size: 12px; cursor: pointer; font-family: inherit; }
.lu-chip--activo { border-color: var(--accent-amber); color: var(--text); font-weight: 700; }
.lu-informe-scroll { overflow-x: auto; border: 1px solid var(--border, #2c2f36); border-radius: 10px; }
.lu-informe-tabla { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.lu-informe-tabla thead th { position: sticky; top: 0; background: var(--panel-2, #1b2027); text-align: center; padding: 7px 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text); border-bottom: 1px solid var(--border, #2c2f36); border-right: 1px solid #24262C; }
.lu-informe-tabla tbody td { padding: 6px 8px; color: var(--text, #c7cbd3); border-bottom: 1px solid #24262C; border-right: 1px solid #1e2026; }
.lu-informe-tabla tbody tr:hover td { background: color-mix(in srgb, var(--accent-amber) 6%, transparent); }
.lu-inf-num { text-align: right; font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }
.lu-inf-cant { width: 46px; text-align: center; color: var(--text); font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }
.lu-inf-click { cursor: pointer; }
.lu-inf-click:hover { color: var(--text); }
.lu-inf-viejo { color: #ff5d5d !important; font-weight: 700; }
.lu-inf-atrasada td:first-child { box-shadow: inset 3px 0 0 #ff5d5d; }
.lu-inf-vacio { text-align: center; color: var(--text); padding: 22px; }
.lu-informe-pie { font-size: 12px; color: var(--text); margin: 9px 0 0; line-height: 1.5; }
/* Peritaje */
.per-acc { display: inline-flex; gap: 4px; align-items: center; }
.per-btn { background: transparent; border: 1px solid var(--border, #2c2f36); color: var(--text); border-radius: 6px; padding: 3px 7px; font-size: 12px; cursor: pointer; font-family: inherit; }
.per-btn:hover { border-color: var(--accent-amber); color: var(--text, #c7cbd3); }
.per-btn--hecho { border-color: #3ddc97; color: var(--text); }
.per-dif { color: #ff5d5d; font-size: 12px; font-weight: 700; }
/* Calidad - Contacto Clientes y Encuestas como pantalla completa: entra en el
tablero en vez de flotar encima de los indicadores (antes se superponían). */
/* Barra superior: concesionario + filtros del tema, todo junto. */
.cc-barra-sup { display: flex; align-items: stretch; gap: 18px; flex-wrap: wrap;
padding: 12px 16px; border-bottom: 1px solid var(--border, #2c2f36); background: rgba(255,255,255,.015); }
.cc-barra-sup .cc-selector-dealer { padding: 0; border-bottom: 0; flex: 0 0 auto; }
.cc-filtros { display: flex; align-items: center; gap: 10px; flex: 1 1 340px; min-width: 260px; }
.cc-filtros .cc-select-tema { min-height: 40px; font-size: 13px; font-weight: 600; padding: 0 10px;
border-radius: 8px; border: 1px solid var(--border, #2c2f36); background: var(--panel-2, #171c22); color: var(--text); min-width: 210px; }
.cc-filtros .cvn-buscar { flex: 1 1 auto; }
.cc-filtros .cvn-buscar input { min-height: 40px; width: 100%; box-sizing: border-box; }
.cc-filtros .res-toggle { white-space: nowrap; font-size: 12px; }
/* Solapas más grandes y con el activo bien marcado. */
.cc-modal .cc-solapas { gap: 8px; padding: 12px 16px 0; }
.cc-modal .cc-solapas .pre-accion { font-size: 13.5px; font-weight: 600; padding: 10px 20px; border-radius: 10px 10px 0 0;
border-bottom: 2px solid transparent; }
.cc-modal .cc-solapas .pre-accion:hover { border-color: #3a3f47; border-bottom-color: transparent; color: var(--text); }
.cc-modal .cc-solapas .pre-accion--on { background: rgba(224,164,58,.12); border-color: rgba(224,164,58,.5);
border-bottom-color: var(--accent-amber); color: var(--text); }
.cc-pantalla-wrap { width: 100%; }
.cc-pantalla { background: var(--bg, #14181d); border: 1px solid var(--border, #2c2f36); border-radius: 14px; width: 100%;
min-height: calc(calc(100dvh / var(--tcg-z, 1)) - 210px); display: flex; flex-direction: column; overflow: hidden; }
.cc-selector-dealer { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
padding: 12px 16px; border-bottom: 1px solid var(--border, #2c2f36); }
.cc-selector-tit { align-self: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
color: var(--text); margin-right: 4px; }
.cc-selector-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 168px;
padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border, #2c2f36); background: var(--panel-2, #171c22); cursor: pointer;
text-align: left; transition: border-color .15s, background .15s; }
.cc-selector-btn b { font-size: 13px; color: var(--text); }
.cc-selector-btn span { font-size: 12px; color: var(--text); }
.cc-selector-btn:hover { border-color: var(--accent-amber); }
.cc-selector-btn--on { border-color: var(--accent-amber); background: rgba(224,164,58,.10); }
.cc-selector-btn--on b { color: var(--text); }
/* Modales de venta: más angostos y más altos (tirando a cuadrado), con las
celdas más grandes para que se cargue cómodo. */
.vnv-modal { max-width: 976px; max-height: calc(96vh / var(--tcg-z, 1)); }
.vnv-modal .per-campo input, .vnv-modal .per-campo select { min-height: 34px; font-size: 13px; padding: 6px 9px; }
.vnv-modal .per-campo > span { font-size: 11px; }
/* Cliente: se ve de lejos si está cargado o si falta. */
.vnv-cliente { border-radius: 8px; padding: 4px; border: 1px solid transparent; background: rgba(224,164,58,.07); }
.vnv-cliente .per-campo > span { color: var(--text); }
.vnv-cliente--cargado { background: rgba(76,175,111,.10); border-color: rgba(76,175,111,.45); }
.vnv-cliente--cargado .per-campo > span { color: var(--text); }
.vnv-cliente--cargado .per-campo input, .vnv-cliente--cargado .per-campo select { font-weight: 700; }
/* El importe del usado: se muestra, no se pide. El número vive en la
unidad —«Costo de compra» del modal de compra del usado en parte de
pago— y acá se lee. Se dibuja como un dato, no como un campo, para que
se note que no se escribe. */
/* El usado elegido se nombra entero: dominio, marca, modelo, versión y año.
No entra con el cuerpo de letra del resto de los campos —un «AB 123 CD ·
Toyota Corolla XEI Pack 2019» son casi cuarenta caracteres— así que acá
se achica. Vale en el monitor, la tablet y el teléfono: es el mismo
desplegable y el mismo texto. */
/* Con «!important» a propósito: hay tres reglas más específicas peleando
por este mismo desplegable —una lo pone en 17px en el monitor y otra en
16px en el teléfono— y ganarles por especificidad pedía cadenas de cuatro
clases que después nadie entiende.
Los tamaños salen de medir el caso peor —«AB 123 CD · Volkswagen Amarok
Highline V6 Extreme 2021», 53 caracteres— contra el ancho real del
desplegable: 13px entran en el monitor y la tablet, 11px en el teléfono. */
.vnv-usado-sel > select {
font-size: 13px !important; letter-spacing: -.1px;
text-overflow: ellipsis; padding-right: 26px;
}
/* El importe del usado: un renglón FIJO con la misma pinta que los demás
campos —rótulo y caja—, se haya elegido un usado o no. No se escribe: el
número se carga en la compra del usado, en «Costo de compra». Pero se ve
siempre, porque es el que va al boleto.
La caja imita al campo de al lado a propósito: si pareciera otra cosa,
habría que explicarla, y una leyenda debajo de cada renglón es ruido.
La tinta es la del texto, no la apagada: en gris no se leía. */
/* Sin «background» ni «border» propios: los toma de la misma regla que los
campos de al lado. Ponérselos acá era lo que lo dejaba de otro color. */
.vnv-usado-importe > output {
display: block; box-sizing: border-box; width: 100%;
line-height: 21px;
font-size: 13px; font-weight: 700;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ---- Entrega: el selector de 0km / usados --------------------------- */
/* Va dentro de la cabecera, no flotando: un botón fijo en una esquina le
roba el clic a lo que tenga debajo. */
.ent-lados {
display: inline-flex; gap: 3px; padding: 3px; flex: 0 0 auto;
background: var(--panel, #1b2233); border: 1px solid var(--border, #2b3348);
border-radius: 999px;
}
.ent-lados button {
border: 0; background: transparent; color: var(--text, #ecf0f4);
border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.ent-lados button.on {
background: var(--vnv-marca, #6c7684); color: var(--vnv-marca-txt, #fff); font-weight: 700;
}
/* ---- Programación de entregas ---------------------------------------- */
.prog-envoltura { margin-top: 6px; }
.prog-ayuda { font-size: 12px; color: var(--text); }
.prog-grupo { margin-top: 14px; }
.prog-grupo-tit {
padding: 6px 10px; border-radius: 8px 8px 0 0;
background: var(--vnv-marca, #6c7684); color: var(--vnv-marca-txt, #fff);
font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.prog-grupo-tit span { opacity: 1; font-weight: 400; }
.prog-vacio {
margin: 0; padding: 8px 10px; font-size: 12px; color: var(--text);
border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px;
}
.prog-tabla th, .prog-tabla td { white-space: nowrap; }
.prog-tabla .prog-n { text-align: right; }
.prog-tabla .prog-total-celda { font-weight: 700; color: var(--text); }
.prog-tabla tfoot td {
border-top: 2px solid var(--border); font-weight: 700;
background: var(--panel-2);
}
/* ---- Gestoría · el detalle de gastos antes de entregar --------------- */
.proc-gastos { display: grid; gap: 10px; margin-top: 10px; }
.proc-gastos-bloque {
padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
background: var(--panel-2);
}
.proc-gastos-tit {
margin: 6px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .6px;
text-transform: uppercase; color: var(--text);
}
.proc-gasto-fila { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.proc-gasto-fila input {
flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px;
background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
color: var(--text); font: inherit; font-size: 13px;
}
.proc-gasto-fila .pg-signo { color: var(--text); font-weight: 700; }
.proc-gasto-fila .pg-importe {
flex: 0 0 130px; text-align: right;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
}
.proc-gasto-fila .pg-x {
flex: 0 0 26px; height: 30px; border: 1px solid var(--border); border-radius: 8px;
background: transparent; color: var(--text); cursor: pointer; font-size: 14px;
}
.proc-gasto-fila .pg-x:hover { color: #e2574c; border-color: #e2574c; }
.proc-gastos-pie {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
padding-top: 8px; border-top: 1px solid var(--border);
}
.proc-gastos-pie .pg-total {
margin-left: auto; font-size: 12.5px; color: var(--text);
}
.proc-gastos-pie .pg-total b {
margin-left: 6px; font-size: 15px; color: var(--text);
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
}
/* ---- Gestoría · herramientas del listado ----------------------------
Los dos botones al registro y el orden, en la misma franja que ya usa el
buscador. En el teléfono se apilan solos porque envuelven. */
.proc-herramientas {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 6px 0 4px;
}
.proc-orden { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.proc-orden > span {
font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
color: var(--text);
}
.proc-orden select {
height: 30px; padding: 0 8px; border-radius: 8px; font: inherit; font-size: 13px;
background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
}
/* El total por agente: el número que se mira para saber a quién reclamarle. */
.proc-total-agente {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
margin: 8px 0 2px; padding: 8px 10px;
background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px;
font-size: 12px;
}
.proc-total-agente .pta-item b {
font-weight: 700; letter-spacing: .3px; color: var(--text);
}
.proc-total-agente .pta-total {
margin-left: auto; font-weight: 700;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
}
/* El porcentaje de comisión se lee del mismo lado que el importe: los dos
son números y se comparan por la derecha. Misma tipografía que la plata,
por lo mismo. Vale en monitor y en teléfono. */
.vnv-pct input {
text-align: right;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
}
/* Usado en parte de pago: mismo ancho que el resto de las celdas. */
.vnv-usado select, .vnv-usado input { width: 100%; box-sizing: border-box; }
.vnv-usado { max-width: 100%; }
.per-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.68); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 14px; }
/* 1156 y no 1080: dos centímetros más de ancho, pedido de Ramiro. */
.per-modal { background: var(--bg, #14181d); border: 1px solid var(--border, #2c2f36); border-radius: 14px; width: 100%; max-width: 1156px; max-height: calc(92vh / var(--tcg-z, 1)); display: flex; flex-direction: column; overflow: hidden; }
.per-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border, #2c2f36); }
.per-titulo { margin: 0; color: var(--text, #f0eee9); font-size: 16px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.per-dom { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; color: var(--text); font-size: 14px; }
.per-sub { margin: 3px 0 0; color: var(--text); font-size: 12px; line-height: 1.5; }
/* CINCO COLUMNAS FIJAS. Con «auto-fit» cada campo caía donde entraba y la
fila se rearmaba sola al cambiar el ancho: nunca estaban dos veces en el
mismo lugar. Maqueta aprobada por Ramiro (maqueta_peritaje.html). */
.per-datos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border, #2c2f36); }
/* Los nombres de cliente son largos: dos columnas. */
.per-campo--ancho { grid-column: span 2; }
/* EL AVISO, EN UN RENGLÓN. Antes era una tarjeta que ocupaba una celda de la
grilla, rompía la fila y dejaba un hueco de tres columnas al costado. */
.per-aviso-fila {
grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
padding: 7px 11px; border-radius: 8px; font-size: 12px; min-height: 36px;
}
.per-aviso-fila--traba { background: rgba(255,93,93,.10); border: 1px solid rgba(255,93,93,.55); color: #ff8a8a; }
.per-aviso-fila--recompra { background: rgba(61,220,151,.10); border: 1px solid rgba(61,220,151,.45); color: var(--text); }
.per-aviso-ico { font-size: 14px; flex: none; }
.per-aviso-txt { flex: 1 1 auto; min-width: 0; color: var(--text, #ecf0f4); }
.per-aviso-fila .ret-tilde { flex: none; margin: 0; }
.per-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.per-campo span { font-size: 12px; color: var(--text); text-transform: uppercase; letter-spacing: .3px; }
.per-campo input { background: var(--panel-2, #202940); border: 1px solid var(--border, #2c2f36); border-radius: 8px; color: var(--text, #c7cbd3); padding: 6px 8px; font-size: 13px; font-family: inherit; }
.per-campo input:focus { outline: none; border-color: var(--accent-amber); }
/* RENGLÓN FIJO, igual que la barra de atajos de más abajo. Con «wrap» las
pastillas de colores se pasaban a un segundo renglón según el ancho y todo
lo de abajo —secciones e ítems— subía y bajaba. Pedido de Ramiro. */
.per-resumen {
display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border, #2c2f36);
overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.per-resumen::-webkit-scrollbar { display: none; }
.per-resumen > * { flex: 0 0 auto; white-space: nowrap; }
.per-pill { font-size: 12px; border: 1px solid var(--border, #2c2f36); border-radius: 20px; padding: 3px 10px; color: var(--text); }
.per-pill--ok { border-color: #3ddc97; color: var(--text); }
.per-pill--det { border-color: #f0b429; color: var(--text); }
.per-pill--rep { border-color: #ff8a4c; color: #ff8a4c; }
.per-pill--gra { border-color: #ff5d5d; color: #ff5d5d; }
.per-cuerpo { display: flex; min-height: 0; flex: 1; }
.per-secciones { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 12px; border-right: 1px solid var(--border, #2c2f36); overflow-y: auto; min-width: 190px; }
.per-sec-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: transparent; border: 1px solid transparent; color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 12px; cursor: pointer; text-align: left; font-family: inherit; }
.per-sec-btn:hover { background: var(--panel-2, #1b2027); color: var(--text, #c7cbd3); }
.per-sec-btn--activa { background: color-mix(in srgb, var(--accent-amber) 14%, var(--bg, #14181d)); border-color: var(--accent-amber); color: var(--text, #f0eee9); font-weight: 700; }
.per-sec-n { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px; opacity: 1; margin-left: auto; }
/* Sin colores por avance: se probó rojo/ámbar/verde y quedaba ruidoso.
Letra blanca, y cada sección con su renglón marcado. */
.per-secciones .per-sec-btn {
color: var(--text, #f0eee9); text-align: left; justify-content: flex-start;
border-bottom: 1px solid var(--border, #2c2f36); border-radius: 0;
padding: 9px 10px;
}
.per-secciones .per-sec-btn:last-child { border-bottom: none; }
.per-secciones .per-sec-btn:hover { background: rgba(255,255,255,.05); }
.per-secciones .per-sec-btn--activa { background: rgba(255,255,255,.07); font-weight: 700; }
/* Las tres columnas del peritaje, centradas. */
.per-tabla th, .per-tabla td { text-align: center; vertical-align: middle; }
.per-tabla .per-estados { justify-content: center; }
/* Menos en el editor de ítems, que es un listado y se lee a la izquierda. */
.per-ed-tabla th, .per-ed-tabla td { text-align: left; }
.per-ed-tabla .per-ed-acc { text-align: right; }
/* La lista de pendientes de peritaje se lee a la izquierda, y el renglón
entero abre el peritaje. */
.per-tabla-lista th, .per-tabla-lista td { text-align: left; }
.per-sinper-wrap { max-height: 300px; }
.per-fila-abrir { cursor: pointer; }
.per-fila-abrir:hover td { background: rgba(255,255,255,.06); }
/* Sin relleno arriba: los dos renglones quietos —la ayuda y la barra— se
pegan al borde del panel. Si hubiera relleno, quedarían flotando y por el
hueco se verían pasar los ítems. */
.per-detalle { flex: 1; overflow: auto; padding: 0 16px 12px; min-width: 0; }
/* Alto fijo: la ayuda de cada sección tiene largos distintos y, al cambiar
de sección, corría la barra de atajos y la tabla hacia abajo. Con un alto
fijo, la lista de partes de la izquierda y los ítems de la derecha
arrancan siempre en el mismo renglón. Pedido de Ramiro. */
/* LOS DOS BLOQUES, CON TÍTULO Y A LA MISMA ALTURA. Antes la columna de
partes arrancaba pegada al borde y los ítems más abajo, después de una
leyenda de largo variable: al cambiar de sección todo se corría. Ahora
cada bloque tiene su título, del mismo alto y los dos quietos arriba, así
la primera parte y el primer ítem quedan siempre en el mismo renglón.
Pedido de Ramiro con captura. */
.per-bloque-tit {
height: 42px; display: flex; align-items: center; flex: none;
font-size: 12px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--text);
position: sticky; top: 0; z-index: 4; background: var(--panel, #1a2130);
}
/* En la columna de partes el título va solo y lleva su propia línea abajo. */
.per-secciones > .per-bloque-tit { border-bottom: 1px solid var(--border, #2c2f36); margin-bottom: 8px; }
/* EL TÍTULO Y LOS ATAJOS, EN UN RENGLÓN. Así los ítems arrancan a la misma
altura que la primera parte de la izquierda en vez de un renglón más abajo.
Todo el renglón queda quieto mientras la lista corre por debajo. */
.per-bloque-cab {
display: flex; align-items: center; gap: 12px;
position: sticky; top: 0; z-index: 4; background: var(--panel, #1a2130);
border-bottom: 1px solid var(--border, #2c2f36); margin-bottom: 8px;
}
.per-bloque-cab > .per-bloque-tit { position: static; white-space: nowrap; }
.per-bloque-cab > .per-barra-fija { position: static; flex: 1 1 auto; min-width: 0; margin: 0; border: 0; background: none; }
.per-ayuda { margin: 0 0 8px; font-size: 12px; color: var(--text); line-height: 1.4; }
.per-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.per-tabla th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; color: var(--text); padding: 5px 6px; border-bottom: 1px solid var(--border, #2c2f36); }
.per-tabla td { padding: 5px 6px; border-bottom: 1px solid #24262C; vertical-align: middle; }
.per-item { color: var(--text, #c7cbd3); white-space: nowrap; }
/* Los cinco estados en UN renglón. Con «flex-wrap: wrap» el quinto
—«No tiene / falta»— caía abajo y cada fila ocupaba el doble de alto:
la pantalla se leía como un bloque continuo sin principio ni fin.
Ahora no envuelven y los botones se achican parejo si hace falta. */
.per-estados { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
.per-est {
background: transparent; border: 1px solid var(--border, #2c2f36); color: var(--text);
border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer;
font-family: inherit; white-space: nowrap; flex: 0 1 auto; min-width: 0;
transition: border-color .12s, color .12s, background .12s;
}
.per-est:hover { border-color: #4a5260; color: var(--text, #c7cbd3); background: rgba(255,255,255,.04); }
.per-est--activo { font-weight: 700; background: rgba(255,255,255,.05); }
/* Los renglones se distinguen: raya más marcada, y el que está bajo el
cursor se sombrea entero. Antes eran 57 ítems sin separación visible. */
.per-tabla tbody tr { border-bottom: 1px solid var(--border, #2c2f36); }
.per-tabla tbody tr:hover td { background: rgba(255,255,255,.045); }
.per-tabla tbody tr:hover .per-item { color: var(--text, #f0eee9); }
.per-tabla td { border-bottom: none; }
.per-tabla tbody tr:last-child { border-bottom: none; }
/* Una fila ya resuelta se atenúa: lo que queda por revisar salta a la vista. */
.per-tabla tbody tr.per-fila--lista .per-item { color: var(--text); }
/* La columna del estado no se comprime: es la que tiene que entrar entera. */
.per-tabla td:nth-child(2) { width: 1%; white-space: nowrap; }
/* En documentación son dos botones: se los deja anchos para que se toquen bien. */
.per-tabla--presencia .per-est { padding: 4px 18px; font-size: 12px; }
/* Marcar toda una sección de una: en un auto impecable son 57 clics para
decir lo mismo. */
.per-todos {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 8px 0 10px; border-bottom: 1px solid var(--border, #2c2f36); margin-bottom: 8px;
}
.per-todos .com-ayuda { margin: 0 4px 0 0; }
.per-todos-btn {
border: 1.5px solid #3ddc97 !important; color: var(--text) !important;
background: color-mix(in srgb, #3ddc97 12%, transparent) !important; font-weight: 700;
}
.per-todos-btn:hover:not(:disabled) { background: color-mix(in srgb, #3ddc97 22%, transparent) !important; }
.per-todos-btn:disabled { opacity: .35; }
.per-planilla-ver { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.per-planilla-ver .com-ayuda { flex: 1 1 220px; }
/* ── Editor de ítems y calificaciones ───────────────────────────────── */
/* La fila de «marcar todos»: separada de la tabla, para no confundirla con
los botones de un ítem. */
.per-todos {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 7px 9px; margin-bottom: 8px; border-radius: 8px;
background: rgba(255,255,255,.035); border: 1px dashed var(--border, #2c2f36);
}
.per-todos .com-ayuda { margin: 0 4px 0 0; }
.per-todos-btn { background: transparent !important; font-weight: 700; }
.per-todos-btn:disabled { opacity: .35; }
.per-sec-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.per-sec-barra .per-ayuda { flex: 1 1 auto; margin: 0; }
.per-todos { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; flex-wrap: wrap; }
.per-todos-btn { border-width: 1px; font-weight: 600; }
.per-todos-btn:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.per-btn-items { flex: 0 0 auto; white-space: nowrap; }
.per-ed-alta { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.per-ed-alta .per-obs { flex: 1 1 auto; }
.per-ed-tabla td { vertical-align: middle; }
.per-ed-acc { width: 1%; white-space: nowrap; text-align: right; }
.per-ed-propio {
margin-left: 7px; padding: 1px 6px; border-radius: 999px; font-size: 12px;
text-transform: uppercase; letter-spacing: .04em;
border: 1px solid currentColor; opacity: 1;
}
.per-ed-escondidos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.per-ed-tit { margin: 16px 0 4px; font-size: 13px; }
.per-ed-estados { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.per-obs, .per-vida { width: 100%; background: transparent; border: 1px solid var(--border, #2c2f36); border-radius: 6px; color: var(--text, #c7cbd3); padding: 4px 6px; font-size: 12px; font-family: inherit; }
.per-vida { width: 62px; text-align: right; }
.per-obs:focus, .per-vida:focus { outline: none; border-color: var(--accent-amber); }
.per-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.per-foto { border: 1px dashed var(--border, #2c2f36); border-radius: 10px; aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; overflow: hidden; position: relative; }
.per-foto:hover { border-color: var(--accent-amber); }
.per-foto--cargada { border-style: solid; border-color: #3ddc97; }
.per-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.per-foto-mas { font-size: 22px; color: #000; }
.per-foto-nombre { position: relative; z-index: 1; font-size: 12px; color: var(--text, #c7cbd3); background: rgba(0,0,0,.62); padding: 2px 6px; border-radius: 6px; text-align: center; }
.per-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border, #2c2f36); }
/* El pie del peritaje NO se desplaza con el contenido: Guardar tiene que
estar siempre a la vista. El cuerpo tiene 57 ítems y una lista de fotos;
al bajar, el pie se iba de la pantalla y parecía que no existía. */
/* El pie SIEMPRE a la vista, en los dos modales del peritaje.
El «position: sticky» solo no alcanzaba: para que pegue, el que se
desplaza tiene que ser el CUERPO, no el modal. Si el modal entero crece
y se desplaza la página, el pie se va con él. Por eso el modal se fija en
alto, el cuerpo se lleva el sobrante con «min-height: 0» —sin eso un hijo
flex no se encoge nunca— y el pie queda afuera del área que se mueve. */
.per-modal-peritaje,
.per-modal.com-modal--angosto {
display: flex; flex-direction: column; max-height: calc(92vh / var(--tcg-z, 1)); overflow: hidden;
}
.per-modal-peritaje > .per-cab,
.per-modal.com-modal--angosto > .per-cab { flex: 0 0 auto; }
.per-modal-peritaje > .per-cuerpo,
.per-modal-peritaje .per-cuerpo,
.per-modal.com-modal--angosto > .com-cuerpo {
flex: 1 1 auto; min-height: 0; overflow: auto;
}
.per-modal-peritaje > .per-pie,
.per-modal-peritaje > .per-pie-avisos,
.per-modal.com-modal--angosto > .per-pie {
flex: 0 0 auto;
background: var(--panel, #1b2233);
box-shadow: 0 -6px 14px rgba(0,0,0,.35);
}
/* Los botones nunca se encogen ni se van del ancho. */
.per-pie-acciones { flex: 0 0 auto; margin-left: auto; }
.per-pie-acciones .lu-btn { white-space: nowrap; }
/* Los avisos ocupan su propio renglón completo, debajo de todo. */
.per-pie-avisos { flex: 1 1 100%; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.per-obsgral { flex: 1; min-width: 200px; background: var(--panel-2, #202940); border: 1px solid var(--border, #2c2f36); border-radius: 8px; color: var(--text, #c7cbd3); padding: 7px 9px; font-size: 12.5px; font-family: inherit; }
.per-obsgral:focus { outline: none; border-color: var(--accent-amber); }
.per-pie-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.per-aviso { font-size: 12px; color: var(--text); }
.lu-btn--ok { border-color: #3ddc97; color: var(--text); }
.lu-btn--ok:hover { background: color-mix(in srgb, #3ddc97 14%, transparent); }
.per-comp { border: 1px solid var(--border, #2c2f36); border-radius: 10px; padding: 11px 13px; margin: 0 20px 14px; }
.per-comp--alerta { border-color: #ff5d5d; background: color-mix(in srgb, #ff5d5d 8%, transparent); }
/* Los colores iban escritos a mano y todos eran del tema OSCURO: #C7CBD3
sobre la tarjeta blanca del tema claro da 1,63 de contraste y el mínimo es
4,5. Es la pantalla que dice qué empeoró entre la cotización y el ingreso:
si no se lee, no sirve. Ahora usa los tokens, que cada tema ya define. */
.per-comp-titulo { font-size: 12.5px; color: var(--text, #ecf0f4); font-weight: 700; margin-bottom: 8px; }
.per-comp-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.per-comp-tabla th { text-align: left; color: var(--text); font-size: 13px; text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--border, #2c2f36); }
.per-comp-tabla td { padding: 4px 6px; color: var(--text, #ecf0f4); border-bottom: 1px solid var(--border, #24262C); }
/* El rojo de «empeoró» también estaba pensado para fondo oscuro. Medidos:
#ea6a60 da 5,09 sobre el panel oscuro y #b3261e da 6,54 sobre blanco. */
.per-comp-peor { color: #ea6a60; font-weight: 700; }
.mo-claro .per-comp-peor { color: #b3261e; }
.per-nota-valor { font-size: 12px; color: var(--text); max-width: 480px; line-height: 1.45; }
/* Usados · barra de acciones y modal de compra */
.lu-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 20px 12px; }
.lu-btn--accion { border-color: var(--accent-amber); color: var(--text); font-weight: 700; }
.lu-btn--accion:hover { background: color-mix(in srgb, var(--accent-amber) 14%, transparent); }
.lu-acciones-nota { font-size: 12px; color: var(--text); }
.com-modal { max-width: 900px; }
.com-cuerpo { overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.com-origen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.com-op { text-align: left; background: var(--panel-2, #202940); border: 1px solid var(--border, #2c2f36); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 3px; }
.com-op b { color: var(--text, #c7cbd3); font-size: 13px; }
.com-op span { color: var(--text); font-size: 12px; line-height: 1.4; }
.com-op--activa { border-color: var(--accent-amber); background: color-mix(in srgb, var(--accent-amber) 10%, var(--panel-2, #202940)); }
.com-op--activa b { color: var(--text); }
.com-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.com-ancho { width: 100%; }
.com-ayuda { font-size: 12px; color: var(--text); line-height: 1.4; }
.per-campo select { background: var(--panel-2, #202940); border: 1px solid var(--border, #2c2f36); border-radius: 8px; color: var(--text, #c7cbd3); padding: 6px 8px; font-size: 13px; font-family: inherit; }
.per-campo select:focus { outline: none; border-color: var(--accent-amber); }
.com-ingreso { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--border, #2c2f36); border-radius: 10px; padding: 10px 12px; }
.com-check { display: inline-flex; align-items: center; gap: 7px; color: var(--text, #c7cbd3); font-size: 12.5px; cursor: pointer; }
.com-nota { margin: 0; font-size: 12px; color: var(--text); line-height: 1.5; flex: 1; min-width: 220px; }
.com-nota b { color: var(--text, #c7cbd3); }
.com-aviso { border: 1px solid var(--accent-amber); background: color-mix(in srgb, var(--accent-amber) 10%, transparent); color: var(--text, #c7cbd3); border-radius: 8px; padding: 9px 11px; font-size: 12px; line-height: 1.5; }
.com-aviso--error { border-color: #ff5d5d; background: color-mix(in srgb, #ff5d5d 12%, transparent); }
.lu-btn:disabled { opacity: .4; cursor: not-allowed; }
/* Usados · modal de ingreso */
.lu-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 8px; background: var(--accent-amber); color: var(--bg, #14181d); font-size: 12px; font-weight: 700; }
.ing-lista { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.ing-item { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; gap: 2px 10px; text-align: left; background: var(--panel-2, #202940); border: 1px solid var(--border, #2c2f36); border-radius: 8px; padding: 8px 11px; cursor: pointer; font-family: inherit; }
.ing-item:hover { border-color: var(--accent-amber); }
.ing-dom { grid-row: span 2; align-self: center; font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 700; color: var(--text); }
.ing-desc { color: var(--text, #c7cbd3); font-size: 12.5px; }
.ing-meta { color: var(--text); font-size: 12px; }
.ing-bloque { border: 1px solid var(--border, #2c2f36); border-radius: 10px; padding: 10px 12px; }
.ing-bloque-tit { font-size: 12px; font-weight: 700; color: var(--text, #c7cbd3); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.ing-bloque-nota { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); }
.ing-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ing-chip { background: transparent; border: 1px solid var(--border, #2c2f36); color: var(--text); border-radius: 20px; padding: 4px 11px; font-size: 12px; cursor: pointer; font-family: inherit; }
.ing-chip:hover { border-color: #4a5260; color: var(--text, #c7cbd3); }
.ing-chip--si { border-color: #3ddc97; color: var(--text); font-weight: 700; }
.com-aviso--neutro { border-color: var(--border, #2c2f36); background: transparent; color: var(--text); }
/* Usados · transferencia y bajas */
.gest-tramites { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.gest-tramite { border: 1px solid var(--border, #2c2f36); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.gest-tramite--hecho { border-color: #3ddc97; background: color-mix(in srgb, #3ddc97 7%, transparent); }
.gest-tramite-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text, #c7cbd3); font-weight: 700; }
.gest-tramite-est { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--text); }
.gest-tramite--hecho .gest-tramite-est { color: var(--text); }
.gest-tramite input { background: var(--panel-2, #202940); border: 1px solid var(--border, #2c2f36); border-radius: 8px; color: var(--text, #c7cbd3); padding: 6px 8px; font-size: 13px; font-family: inherit; }
.gest-tramite input:focus { outline: none; border-color: var(--accent-amber); }
.gest-limpiar { background: transparent; border: none; color: var(--text); font-size: 12px; cursor: pointer; text-align: left; padding: 0; font-family: inherit; }
.gest-limpiar:hover { color: #ff5d5d; }
.ing-item--gest .ing-item-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.gest-falta { font-size: 12px; border: 1px solid #ff5d5d; color: #ff5d5d; border-radius: 20px; padding: 1px 7px; white-space: nowrap; }
.lu-inf-falta { color: #ff5d5d !important; }
.lu-inf-falta::after { content: "falta"; font-size: 12px; opacity: 1; }
.lu-guardado { font-size: 12px; color: var(--text); min-width: 74px; }
.per-btn--vender { border-color: var(--accent-amber); color: var(--text); }
.per-btn--vender:hover { background: color-mix(in srgb, var(--accent-amber) 15%, transparent); }
/* Compra y asignación de 0km */
.vn-checks { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 4px; }
.vn-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text, #c7cbd3); cursor: pointer; }
.vn-busca { margin-bottom: 10px; }
.vn-busca input[type=text], .vn-busca > input { width: 100%; }
.vn-criterios { display: flex; gap: 14px; margin-top: 6px; }
.vn-criterios label { font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.vn-criterios label.active { color: var(--text); }
.vn-tabla-wrap { max-height: 260px; overflow: auto; border: 1px solid var(--border, #2c2f36); border-radius: 10px; }
.vn-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.vn-tabla thead th { position: sticky; top: 0; background: var(--bg, #14181d); text-align: left; padding: 7px 9px;
color: var(--text); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border, #2c2f36); }
.vn-tabla tbody td { padding: 6px 9px; border-bottom: 1px solid #22262d; color: var(--text, #c7cbd3); }
.vn-tabla tbody tr { cursor: pointer; }
.vn-tabla tbody tr:hover { background: var(--panel-2, #1b2027); }
.vn-tabla tbody tr.activa { background: color-mix(in srgb, var(--accent-amber) 16%, var(--bg, #14181d)); }
.vn-tabla tbody tr.activa td { color: var(--text, #f0eee9); }
.vn-mono { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }
.vn-estado { font-size: 12px; color: var(--text); }
.vn-vacio { padding: 20px 10px !important; text-align: center; color: var(--text); }
.vn-asig-datos { margin-top: 14px; border-top: 1px solid var(--border, #2c2f36); padding-top: 12px; }
.vn-asig-modal { max-width: 900px; }
.proc-solapas { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.proc-solapas > button { background: transparent; border: 1px solid var(--border, #2c2f36); color: var(--text); border-radius: 8px;
padding: 6px 12px; font-family: inherit; font-size: 12px; cursor: pointer; }
.proc-solapas > button.active { background: color-mix(in srgb, var(--accent-amber) 16%, transparent);
border-color: var(--accent-amber); color: var(--text); font-weight: 700; }
.proc-buscar { flex: 1 1 160px; min-width: 130px; }
.proc-check-col { width: 34px; text-align: center; }
.proc-elegidas { display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 12px; color: var(--text); font-weight: 700; margin-bottom: 10px; }
.proc-por-unidad { display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
max-height: 320px; overflow-y: auto; }
.proc-unidad-bloque { border: 1px solid var(--border, #2c2f36); border-radius: 10px; padding: 10px 12px; background: var(--bg, #14181d); }
.proc-unidad-tit { font-size: 12px; color: var(--text, #f0eee9); font-weight: 700; margin-bottom: 8px; }
.vn-bloque-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 12px; color: var(--text, #f0eee9); font-weight: 700; margin: 0 0 8px; }
.vn-bloque-titulo--sep { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border, #2c2f36); }
.vn-ok { font-size: 12px; color: var(--text); margin: 0 0 4px; }
.vn-celda-carga { display: flex; gap: 6px; align-items: center; }
.vn-celda-carga input { width: 110px; }
.vn-resumen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px;
background: var(--bg, #14181d); border: 1px solid var(--border, #2c2f36); border-radius: 10px; padding: 10px 14px; }
.vn-resumen > div { display: flex; flex-direction: column; }
.vn-resumen span { font-size: 12px; color: var(--text); text-transform: uppercase; letter-spacing: .5px; }
.vn-resumen b { font-size: 15px; color: var(--text, #f0eee9); }
.vn-rojo { color: #f17176; }
.vn-fila-vencida td { background: color-mix(in srgb, #e5484d 10%, transparent); }
.vn-pagada { font-size: 12px; color: var(--text); }
.com-ayuda--alerta { color: var(--text); }
/* Franjas horizontales de procesos (Nuevos / Usados) */
.mp-franjas { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.mp-franja { display: flex; align-items: center; gap: 10px; background: var(--bg, #14181d); border: 1px solid var(--border, #2c2f36);
border-radius: 10px; padding: 6px 10px; min-width: 0; }
.mp-franja-tag { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
border-radius: 6px; padding: 4px 10px; cursor: default; }
.mp-franja--nuevos .mp-franja-tag { background: color-mix(in srgb, var(--accent-amber) 18%, var(--bg, #14181d)); color: var(--text); }
.mp-franja--usados .mp-franja-tag { background: color-mix(in srgb, #57B6AC 18%, var(--bg, #14181d)); color: var(--text); }
.mp-franja-items { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px;
overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border, #2c2f36) transparent; padding-bottom: 2px; }
.mp-franja-items::-webkit-scrollbar { height: 6px; }
.mp-franja-items::-webkit-scrollbar-track { background: transparent; }
.mp-franja-items::-webkit-scrollbar-thumb { background: var(--border, #2c2f36); border-radius: 6px; }
.mp-franja-items:hover::-webkit-scrollbar-thumb { background: var(--panel, #3d4149); }
.mp-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: transparent;
border: 1px solid transparent; color: var(--text, #c7cbd3); border-radius: 8px; padding: 5px 9px; cursor: pointer;
font-family: inherit; font-size: 12px; white-space: nowrap; }
.mp-chip:hover:not(:disabled) { background: var(--panel-2, #1b2027); border-color: var(--border, #2c2f36); }
.mp-chip:disabled { color: var(--text); cursor: default; }
.mp-chip--modal { color: var(--text, #f0eee9); }
.mp-chip--pantalla { color: var(--text); }
.mp-icono { font-size: 13px; line-height: 1; }
.mp-label { line-height: 1; }
.mp-pend { font-size: 12px; color: var(--text); border: 1px solid var(--border, #2c2f36); border-radius: 20px; padding: 1px 5px; }
.mp-aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 200; background: var(--panel-2, #1b2027);
border: 1px solid var(--accent-amber); color: var(--text, #f0eee9); border-radius: 10px; padding: 10px 16px; font-size: 12.5px;
box-shadow: 0 8px 28px rgba(0,0,0,.5); max-width: calc(90vw / var(--tcg-z, 1)); }
/* Buscador multi-campo */
.bu-input { width: 100%; background: var(--panel-2, #202940); border: 1px solid var(--border, #2c2f36); border-radius: 8px; color: var(--text, #c7cbd3); padding: 9px 11px; font-size: 13px; font-family: inherit; }
.bu-input:focus { outline: none; border-color: var(--accent-amber); }
.bu-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 7px 0; }
.bu-chip { background: transparent; border: 1px solid var(--border, #2c2f36); color: var(--text); border-radius: 20px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.bu-chip--activo { border-color: var(--accent-amber); color: var(--text); font-weight: 700; }
.bu-ayuda { font-size: 12px; color: var(--text); margin-left: 4px; }
.bu-lista { max-height: 250px; overflow-y: auto; border: 1px solid var(--border, #2c2f36); border-radius: 8px; }
.bu-item { display: grid; grid-template-columns: 96px 1fr 190px; gap: 9px; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid #24262C; color: var(--text, #c7cbd3); padding: 8px 10px; cursor: pointer; font-family: inherit; font-size: 12px; align-items: center; }
.bu-item--cursor { background: color-mix(in srgb, var(--accent-amber) 12%, transparent); }
.bu-dom { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; color: var(--text); }
.bu-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-meta { color: var(--text); display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.bu-donde { font-size: 12px; color: var(--text); }
.bu-vacio { color: var(--text); font-size: 12px; padding: 18px; text-align: center; margin: 0; }
/* Panel de estado de la unidad */
.pe { border: 1px solid var(--border, #2c2f36); border-radius: 10px; padding: 11px 12px; background: var(--panel-3, #12151a); font-size: 12px; overflow-y: auto; }
.pe--vacio { color: var(--text); text-align: center; padding: 24px 12px; }
.pe-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pe-dom { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 15px; font-weight: 700; color: var(--text); }
.pe-etapa { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text, #c7cbd3); border: 1px solid var(--border, #2c2f36); border-radius: 20px; padding: 2px 8px; }
.pe-sub { color: var(--text); font-size: 12px; margin: 2px 0 10px; line-height: 1.4; }
.pe-bloque { border-top: 1px solid #24262C; padding-top: 7px; margin-top: 7px; }
.pe-tit { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.pe-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 0; }
.pe-k { color: var(--text); font-size: 12px; flex: 0 0 auto; }
.pe-v { color: var(--text, #c7cbd3); text-align: right; overflow-wrap: anywhere; }
.pe-v--ok { color: var(--text); }
.pe-v--alerta { color: #ff5d5d; }
.mod-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.mod-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mod-split .pe { max-height: calc(52vh / var(--tcg-z, 1)); }
/* Estimación de Patentamientos · recorrido compacto y tabla más grande */
.pat-section-title { margin: 2px 0 6px !important; font-size: 12px !important; }
.pat-controlrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pat-seg button { padding: 4px 9px !important; font-size: 12px !important; }
/* Los meses van en una sola línea: el punto y el nombre uno al lado del otro. */
.pat-route { padding: 2px 2px; }
.pat-route-stop { flex-direction: row !important; align-items: center; gap: 5px !important; padding: 3px 8px !important; }
.pat-route-dot { width: 7px !important; height: 7px !important; }
.pat-route-label { font-size: 12px !important; }
.pat-scroll-arriba { overflow-x: auto; overflow-y: hidden; position: sticky; top: 0; z-index: 5;
background: var(--panel, #14181d); border-bottom: 1px solid var(--border, #2C2F36); }
.pat-scroll-arriba::-webkit-scrollbar { height: 12px; }
.pat-scroll-arriba::-webkit-scrollbar-track { background: var(--panel-2, #1b2027); }
.pat-scroll-arriba::-webkit-scrollbar-thumb { background: var(--panel, #4a5260); border-radius: 8px; }
.pat-scroll-arriba::-webkit-scrollbar-thumb:hover { background: var(--accent-amber); }
.pat-table-scroll::-webkit-scrollbar { height: 12px; }
.pat-table-scroll::-webkit-scrollbar-thumb { background: var(--panel, #4a5260); border-radius: 8px; }
/* Fijada, la tabla ocupa lo que queda de pantalla y la rueda no arrastra la página. */
.pat-table-scroll--fijo { max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 300px) !important; overscroll-behavior: contain; }
.pat-btn { background: transparent; border: 1px solid var(--border, #2C2F36); color: var(--text, #C7CBD3);
border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.pat-btn:hover { border-color: var(--accent-amber); }
.pat-det-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pat-det-scroll { overflow: auto; max-height: calc(58vh / var(--tcg-z, 1)); border: 1px solid var(--border, #2C2F36); border-radius: 8px; }
.pat-det-tabla { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.pat-det-tabla th { position: sticky; top: 0; background: var(--panel-2, #1b2027); text-align: center; padding: 6px 8px; font-size: 13px;
text-transform: uppercase; letter-spacing: .3px; color: var(--text); border-bottom: 1px solid var(--border, #2c2f36); }
.pat-det-tabla td { padding: 5px 8px; border-bottom: 1px solid #24262C; color: var(--text, #c7cbd3); }
.pat-det-tabla tbody tr { cursor: pointer; }
.pat-det-tabla tbody tr:hover td { background: color-mix(in srgb, var(--accent-amber) 9%, transparent); }
.pat-det-num { text-align: right; font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }
.pat-modal { max-width: 900px !important; }
/* ============================================================
GESTIÓN DE VENTAS — módulo de gestión (pantalla principal)
Réplica de la organización del sistema clásico: menú arriba,
accesos con ícono a la izquierda, área de trabajo al centro.
Todo prefijado con .gv-root para no pisar el resto de la app.
============================================================ */
.gv-root {
--gv-side-w: 150px;
display: flex; flex-direction: column;
border: 1px solid var(--border, #252d3f);
border-radius: 10px; overflow: hidden;
background: var(--panel, #1b2233);
min-height: calc(calc(100dvh / var(--tcg-z, 1)) - 190px);
}
/* --- Barra de menú superior --- */
.gv-root .gv-menubar {
display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
padding: 0 8px; min-height: 34px;
background: var(--panel, #161c2a); border-bottom: 1px solid var(--border, #252d3f);
position: relative; z-index: 30;
}
.gv-root .gv-menu-drop-flecha { font-size: 12px; opacity: 1; }
/* --- Chips de concesionario (vista unificada) --- */
.gv-root .gv-chips {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
padding: 7px 10px; background: var(--panel, #191d23); border-bottom: 1px solid var(--border, #252d3f);
}
.gv-root .gv-chips-label { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text); }
.gv-root .gv-chip {
background: transparent; border: 1px solid var(--border, #252d3f); color: var(--text, #ecf0f4);
font-family: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.gv-root .gv-chip:hover { border-color: var(--accent-amber, #f2c200); }
.gv-root .gv-chip--on {
border-color: var(--accent-amber, #f2c200);
background: color-mix(in srgb, var(--accent-amber, #f2c200) 16%, transparent);
color: var(--text);
}
.gv-root .gv-chip-marca { font-size: 12px; opacity: 1; margin-left: 4px; }
/* --- Cuerpo --- */
.gv-root .gv-body { display: flex; flex: 1; min-height: 0; }
/* --- Barra lateral --- */
.gv-root .gv-side {
width: var(--gv-side-w); flex: 0 0 var(--gv-side-w);
background: var(--panel, #191d23); border-right: 1px solid var(--border, #252d3f);
display: flex; flex-direction: column; overflow-y: auto;
}
/* --- Área de trabajo --- */
.gv-root .gv-main { flex: 1; min-width: 0; padding: 14px; overflow: auto; }
.gv-root .gv-main--informe { padding: 0; overflow: hidden; display: flex; min-height: 0; }
.gv-root .gv-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 14px; }
.gv-root .gv-vacio-logo { height: 52px; width: auto; opacity: .5; margin-bottom: 12px; }
.gv-root .gv-vacio-titulo {
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 19px; letter-spacing: .5px;
text-transform: uppercase; margin: 0 0 7px; color: var(--text, #ecf0f4);
}
.gv-root .gv-vacio-texto { font-size: 12.5px; color: var(--text); max-width: 520px; margin: 0 0 18px; line-height: 1.5; }
.gv-root .gv-vacio-guia {
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 9px; width: 100%; max-width: 760px;
}
.gv-root .gv-vacio-guia-item {
border: 1px solid var(--border, #252d3f); border-radius: 8px; background: var(--panel, #191d23);
padding: 10px 12px; text-align: left; display: flex; flex-direction: column; gap: 4px;
}
.gv-root .gv-vacio-guia-item b { font-size: 12px; color: var(--text); text-transform: uppercase; letter-spacing: .4px; }
.gv-root .gv-vacio-guia-item span { font-size: 12px; color: var(--text); line-height: 1.45; }
.gv-root .gv-panel { border: 1px solid var(--border, #252d3f); border-radius: 10px; background: var(--panel, #191d23); overflow: hidden; }
.gv-root .gv-panel-head {
display: flex; align-items: flex-start; gap: 10px;
padding: 11px 13px; border-bottom: 1px solid var(--border, #252d3f); background: var(--panel, #1b2233);
}
.gv-root .gv-panel-head-txt { flex: 1; min-width: 0; }
.gv-root .gv-panel-origen { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text); margin-bottom: 3px; }
.gv-root .gv-panel-titulo {
display: flex; align-items: center; gap: 7px; margin: 0;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 16px; letter-spacing: .4px; text-transform: uppercase; color: var(--text, #ecf0f4);
}
.gv-root .gv-panel-ico { color: var(--text); display: flex; }
.gv-root .gv-panel-cerrar {
background: transparent; border: 1px solid var(--border, #252d3f); color: var(--text);
border-radius: 8px; padding: 5px 7px; cursor: pointer; display: flex;
}
.gv-root .gv-panel-cerrar:hover { border-color: #ee776c; color: #ee776c; }
.gv-root .gv-panel-body { padding: 22px 14px 26px; }
.gv-root .gv-panel-pendiente { font-size: 12.5px; color: var(--text, #ecf0f4); margin: 0 0 7px; line-height: 1.5; }
.gv-root .gv-panel-pendiente--muted { color: var(--text); font-size: 12px; margin: 0; }
/* ------------------------------------------------------------------ */
/* GESTIÓN DE VENTAS — ajustes de estética. */
/* Van al final del bloque a propósito: reglas del mismo peso escritas */
/* antes no pisan a las de arriba. */
/* ------------------------------------------------------------------ */
.gv-root { --gv-side-w: 172px; }
/* Menú de arriba (Tablas / Informes / Salir): más grande y más marcado. */
.gv-root .gv-menubar { min-height: 46px; padding: 0 12px; gap: 4px; }
/* Concesionarios: botones grandes, no chips finitos. */
.gv-root .gv-chips { padding: 11px 12px; gap: 10px; }
.gv-root .gv-chips-label { font-size: 12px; letter-spacing: .6px; }
.gv-root .gv-chip {
font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: 10px;
display: inline-flex; align-items: center; gap: 8px; transition: background .15s, border-color .15s, transform .1s;
}
.gv-root .gv-chip:hover { background: var(--panel-2, #202940); transform: translateY(-1px); }
.gv-root .gv-chip-marca { font-size: 12px; opacity: 1; margin-left: 0; }
.gv-root .gv-chip--on { box-shadow: 0 0 0 1px var(--accent-amber, #f2c200) inset; }
/* Barra lateral: iconos y texto más grandes, y el acceso activo bien visible. */
.gv-root .gv-side-head { font-size: 13.5px; padding: 12px 12px; letter-spacing: .7px; }
/* Pantalla de inicio: sin cartelería, con el fondo del proyecto. */
.gv-root .gv-main { padding: 0; }
.gv-root .gv-panel { padding: 14px; }
.gv-root .gv-vacio {
position: relative; justify-content: center; min-height: 100%; padding: 40px 20px;
background:
radial-gradient(120% 90% at 50% 0%, rgba(224,164,58,.07) 0%, transparent 58%),
linear-gradient(180deg, var(--panel, #161c2a) 0%, #12161b 100%);
}
.gv-root .gv-vacio-fondo {
position: absolute; inset: 0; pointer-events: none; opacity: 1;
background-image:
linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(75% 65% at 50% 45%, #000 0%, transparent 100%);
-webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 0%, transparent 100%);
}
.gv-root .gv-vacio-logo { position: relative; height: 92px; opacity: .8; margin-bottom: 18px; }
.gv-root .gv-vacio-titulo { position: relative; font-size: 30px; letter-spacing: 2.5px; margin: 0; color: var(--text); }
/* ---- Compras de 0km: lista + formulario ---- */
.cvn-modal { max-width: 1080px; width: calc(96vw / var(--tcg-z, 1)); }
.cvn-barra {
display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
padding: 10px 14px; border-bottom: 1px solid var(--border, #252d3f);
}
.cvn-buscar { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 200px; }
.cvn-buscar span { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text); }
.cvn-buscar input {
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f); border-radius: 8px;
padding: 7px 9px; color: inherit; font-size: 13px; width: 100%;
}
.cvn-tabla-cont {
overflow: auto; max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 300px);
overscroll-behavior: contain; scrollbar-width: auto;
}
.cvn-tabla-cont::-webkit-scrollbar { height: 14px; width: 14px; }
.cvn-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cvn-tabla th {
position: sticky; top: 0; z-index: 2;
background: var(--panel-2, #161c2a); text-align: center;
padding: 7px 9px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
color: var(--text); border-bottom: 1px solid var(--border, #252d3f); white-space: nowrap;
}
.cvn-tabla td { padding: 7px 9px; border-bottom: 1px solid #21262e; white-space: nowrap; }
.cvn-tabla tbody tr { cursor: pointer; }
.cvn-tabla tbody tr:hover { background: color-mix(in srgb, var(--accent-amber, #f2c200) 8%, transparent); }
.cvn-fila--sel, .cvn-tabla tbody tr.cvn-fila--sel:hover {
background: color-mix(in srgb, var(--accent-amber, #f2c200) 20%, transparent);
}
.cvn-interno { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }
.cvn-pendiente { color: var(--text); font-style: italic; font-family: inherit; }
.cvn-vacio { text-align: center; padding: 26px 10px; color: var(--text); font-style: italic; }
.cvn-pie {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 8px 14px; border-top: 1px solid var(--border, #252d3f);
font-size: 12px; color: var(--text);
}
.cvn-pie-nota { font-style: italic; }
.cvn-cat-elegir, .cvn-cat-alta { display: flex; gap: 5px; align-items: center; }
.cvn-cat-elegir select, .cvn-cat-alta input { flex: 1; min-width: 0; }
.per-campo--check { flex-direction: row; align-items: center; gap: 7px; }
/* ---- Venta de 0km ---- */
.vnv-modal { max-width: 1316px; width: calc(97vw / var(--tcg-z, 1)); }
.vnv-buscador {
display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
padding: 10px 14px; border-bottom: 1px solid var(--border, #252d3f);
}
.vnv-resultado-est { margin-left: auto; font-size: 10.5px; color: var(--text); }
.vnv-cuerpo {
display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 16px;
padding: 14px; overflow: auto; max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 300px); overscroll-behavior: contain;
}
.vnv-col { display: flex; flex-direction: column; gap: 8px; }
.vnv-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vnv-fila3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.per-campo--calc strong {
background: var(--panel-2, #161c2a); border: 1px dashed var(--border, #252d3f); border-radius: 8px;
padding: 7px 9px; font-size: 13px; color: var(--text);
}
.vnv-usado { border: 1px solid var(--border, #252d3f); border-radius: 8px; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.vnv-usado-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vnv-usado-cab span { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text); }
.vnv-unidad {
border: 1px solid var(--border, #252d3f); border-radius: 8px; padding: 11px;
display: flex; flex-direction: column; gap: 7px;
background: color-mix(in srgb, var(--panel-2, #161c2a) 60%, transparent);
align-self: start;
}
.vnv-unidad-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vnv-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vnv-dato > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text); }
.vnv-dato > strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnv-dato--edit input {
background: var(--panel-2, #161c2a); border: 1px solid var(--accent-amber, #f2c200);
border-radius: 6px; padding: 4px 7px; color: inherit; font-size: 12.5px;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; width: 100%;
}
.vnv-nota { font-size: 10.5px; color: var(--text); line-height: 1.35; font-style: italic; }
.vnv-nota--alerta { color: var(--text); font-style: normal; }
.vnv-aviso { margin: 9px 14px 0; padding: 7px 10px; border-radius: 8px; font-size: 12px; }
.vnv-aviso--anulada { background: color-mix(in srgb, #d9534f 18%, transparent); border: 1px solid #d9534f; }
.vnv-pie { flex-wrap: wrap; gap: 7px; }
.vnv-fecha-inline { display: inline-flex; gap: 5px; align-items: center; }
.vnv-fecha-inline input {
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f);
border-radius: 6px; padding: 5px 7px; color: inherit; font-size: 12px;
}
.vnv-usado-alta { display: flex; flex-direction: column; gap: 7px; }
.vnv-usado-alta-pie { display: flex; gap: 6px; justify-content: flex-end; }
.com-ayuda--alerta { color: var(--text); }
/* ---- Buscador por aproximacion ---- */
.bap { position: relative; flex: 1; min-width: 220px; }
.bap-input {
width: 100%; background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f);
border-radius: 8px; padding: 9px 11px; color: inherit; font-size: 13px;
}
.bap-input:focus { border-color: var(--accent-amber, #f2c200); outline: none; }
.bap-lista {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
background: var(--panel, #12161b); border: 1px solid var(--border, #252d3f); border-radius: 8px;
max-height: 300px; overflow: auto; box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.bap-item {
display: flex; gap: 9px; align-items: center; width: 100%; text-align: left;
background: none; border: none; border-bottom: 1px solid var(--panel-2, #21262e);
padding: 8px 11px; color: inherit; font-size: 12.5px; cursor: pointer;
}
.bap-item:last-child { border-bottom: none; }
.bap-item:hover { background: color-mix(in srgb, var(--accent-amber, #f2c200) 14%, transparent); }
.bap-item strong { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; min-width: 84px; flex-shrink: 0; }
.bap-item > span:not(.bap-donde):not(.vnv-resultado-est) {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bap-donde {
margin-left: auto; flex-shrink: 0; font-size: 10.5px; text-transform: uppercase;
letter-spacing: .4px; color: var(--text);
border: 1px solid var(--border, #252d3f); border-radius: 999px; padding: 1px 7px;
}
.bap-vacio { padding: 14px 11px; text-align: center; color: var(--text); font-style: italic; font-size: 12px; }
.vnv-buscador { align-items: center; }
/* ---- Compactar Compras y Ventas de 0km ----
Va al final del bloque de estilos para ganarle al CSS de arriba.
Criterio: etiqueta al costado del campo (como el sistema original) en vez
de arriba, y todo lo que no es dato ocupa lo mínimo. */
.cvn-modal .per-cab, .vnv-modal .per-cab { padding: 8px 12px; }
.cvn-modal .per-titulo, .vnv-modal .per-titulo { font-size: 15px; margin: 0; }
.cvn-modal .per-sub, .vnv-modal .per-sub { font-size: 12px; margin: 1px 0 0; }
.cvn-modal .per-pie, .vnv-modal .per-pie { padding: 7px 12px; }
.vnv-buscador { padding: 7px 12px; gap: 8px; }
.bap-input { padding: 6px 9px; font-size: 12.5px; }
.vnv-cuerpo { padding: 10px 12px; gap: 12px; }
.vnv-col { gap: 3px; }
/* Etiqueta a la izquierda, campo a la derecha */
.vnv-col .per-campo, .vnv-usado .per-campo {
display: grid; grid-template-columns: 104px 1fr; align-items: center;
gap: 7px; margin: 0;
}
.vnv-col .per-campo > span, .vnv-usado .per-campo > span {
font-size: 10.5px; text-align: right; text-transform: none; letter-spacing: 0;
line-height: 1.2; white-space: normal;
}
.vnv-col .per-campo > input,
.vnv-col .per-campo > select,
.vnv-usado .per-campo > input,
.vnv-usado > select {
padding: 4px 7px; font-size: 12px; min-height: 0; height: auto;
}
.vnv-col .per-campo > small, .vnv-usado .per-campo > small { grid-column: 2; margin-top: -1px; }
.vnv-col .cvn-cat-elegir, .vnv-col .cvn-cat-alta, .vnv-usado .cvn-cat-elegir { gap: 4px; }
.vnv-col .cvn-cat-elegir select { padding: 4px 7px; font-size: 12px; }
.vnv-col .lu-btn--sm, .vnv-usado .lu-btn--sm { padding: 3px 7px; font-size: 11px; }
.per-campo--calc strong { padding: 4px 7px; font-size: 12.5px; }
.vnv-col .com-ayuda { font-size: 10.5px; line-height: 1.25; }
.vnv-fila2 { gap: 6px; }
.vnv-usado { padding: 7px; gap: 5px; }
.vnv-usado-cab span { font-size: 10.5px; }
/* Panel de la unidad */
.vnv-unidad { padding: 8px 9px; gap: 4px; }
.vnv-unidad-cab, .vnv-unidad .vnv-fila2, .vnv-unidad .vnv-fila3 { gap: 6px; }
.vnv-dato > span { font-size: 10.5px; }
.vnv-dato > strong { font-size: 11.5px; }
.vnv-dato--edit input { padding: 3px 6px; font-size: 11.5px; }
.vnv-nota { font-size: 10.5px; }
/* Apagado, pero legible. Al 55% el rótulo daba 2,90 de contraste en tema
claro —el mínimo es 4,5— y el modal entero se veía velado: es la «letra
que no se nota» del modo claro. Medido componiendo el color sobre el
fondo: 0,75 es el primer valor que pasa, y sigue leyéndose como
«todavía no elegiste la unidad». */
.vnv-cuerpo--vacio .vnv-col, .vnv-cuerpo--vacio .vnv-unidad { opacity: 1; }
/* Compras */
.cvn-barra { padding: 7px 12px; gap: 6px; }
.cvn-buscar span { font-size: 12px; }
.cvn-buscar input { padding: 5px 8px; font-size: 13px; }
.cvn-tabla th { padding: 5px 8px; font-size: 13px; }
.cvn-tabla td { padding: 5px 8px; font-size: 13px; }
.cvn-pie { padding: 6px 12px; font-size: 12px; }
.cvn-modal .com-cuerpo { padding: 10px 12px; }
.cvn-modal .com-grid, .com-modal .com-grid { gap: 7px 10px; }
.com-modal .per-campo { margin: 0; }
.com-modal .per-campo > span { font-size: 12px; }
.com-modal .per-campo > input, .com-modal .per-campo > select { padding: 5px 7px; font-size: 13px; }
.com-modal .vn-checks { gap: 12px; margin: 6px 0; }
.com-modal .com-ayuda { font-size: 12px; line-height: 1.25; }
/* Mes/año en un solo campo, para que no desborde sobre el panel de la derecha */
.vnv-mesanio { display: grid; grid-template-columns: 46px 8px 1fr; align-items: center; gap: 3px; min-width: 0; }
.vnv-mesanio > span { text-align: center; color: var(--text); font-size: 11px; }
.vnv-mesanio input { min-width: 0; width: 100%; padding: 4px 6px; font-size: 12px; }
/* El panel de datos existentes llega hasta abajo y no se cruza con la columna
del medio: cada columna tiene su propio ancho mínimo y no se desborda. */
.vnv-unidad { align-self: stretch; }
.vnv-cuerpo { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(250px,.95fr); align-items: stretch; }
.vnv-col { min-width: 0; }
.vnv-col .per-campo > input, .vnv-col .per-campo > select,
.vnv-col .cvn-cat-elegir, .vnv-col .cvn-cat-elegir select { min-width: 0; max-width: 100%; }
/* Dos colores: lo que ya existe vs. lo que se carga.
Mismo criterio que en el sistema de referencia. */
.pnl-existente {
background: color-mix(in srgb, #4a90d9 12%, transparent);
border: 1px solid color-mix(in srgb, #4a90d9 34%, transparent);
border-radius: 8px;
}
.pnl-editable {
background: color-mix(in srgb, var(--panel-2, #161c2a) 70%, transparent);
border: 1px solid var(--border, #252d3f); border-radius: 8px;
}
/* Rótulo de los paneles de carga. Antes era un texto gris suelto, distinto
del rótulo de sección del resto del módulo. Ahora es la misma banda con el
color del concesionario, así todas las pantallas se leen igual. */
.pnl-titulo {
display: inline-block; margin: 8px 9px 5px; padding: 3px 8px; border-radius: 6px;
background: var(--vnv-marca, #6c7684); color: var(--vnv-marca-txt, #fff);
font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
/* El panel de una unidad que ya existía se distingue por el borde, no por el
color del rótulo: si no, perdería el color del concesionario. */
.pnl-existente .pnl-titulo { color: var(--vnv-marca-txt, #fff); }
/* ---- Ingreso de stock / Reserva / Cambio de lugar ---- */
.ing-modal { max-width: 1080px; width: calc(96vw / var(--tcg-z, 1)); }
.ing-cuenta { font-size: 12px; color: var(--text); white-space: nowrap; }
.ing-tabla-cont {
overflow: auto; max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 430px); min-height: 120px;
overscroll-behavior: contain; border-bottom: 1px solid var(--border, #252d3f);
}
.ing-tabla-cont::-webkit-scrollbar { height: 12px; width: 12px; }
.ing-detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px; }
.ing-pnl { padding: 0 0 8px; margin: 0 12px 10px; }
.ing-detalle .ing-pnl { margin: 0; }
.ing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 6px 9px 0; }
.ing-grid--edit .per-campo {
display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 7px; margin: 0;
}
.ing-grid--edit .per-campo > span { font-size: 12px; text-align: right; text-transform: none; letter-spacing: 0; }
.ing-grid--edit .per-campo > input, .ing-grid--edit .per-campo > select { padding: 4px 7px; font-size: 13px; }
.ing-grid--edit .per-campo > small { grid-column: 2; }
.ing-grid--edit .cvn-cat-elegir select { padding: 4px 7px; font-size: 13px; }
.res-barra { gap: 12px; }
.res-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; font-size: 12px; }
.res-toggle input { width: 15px; height: 15px; accent-color: var(--accent-amber, #f2c200); }
.res-pie-datos { margin-top: 10px; }
/* ---- Segunda pasada de compactado: Ventas de 0km ----
Objetivo: que entre en pantalla sin scroll y sirva también para el botón
"nueva" del Registro de Ventas. */
.vnv-modal { max-width: 1156px; }
.vnv-modal .per-cab { padding: 6px 10px; }
.vnv-modal .per-titulo { font-size: 13.5px; }
.vnv-modal .per-sub { font-size: 10.5px; }
.vnv-modal .per-pie { padding: 6px 10px; gap: 6px; }
.vnv-buscador { padding: 5px 10px; }
.vnv-modal .bap-input { padding: 5px 8px; font-size: 12px; }
.vnv-cuerpo { padding: 8px 10px; gap: 9px; }
.vnv-col { gap: 2px; }
.vnv-col .per-campo, .vnv-usado .per-campo { grid-template-columns: 88px 1fr; gap: 5px; }
.vnv-col .per-campo > span, .vnv-usado .per-campo > span { font-size: 10.5px; }
.vnv-col .per-campo > input,
.vnv-col .per-campo > select,
.vnv-col .cvn-cat-elegir select,
.vnv-usado .per-campo > input,
.vnv-usado > select,
.vnv-mesanio input { padding: 3px 6px; font-size: 11.5px; }
.per-campo--calc strong { padding: 3px 6px; font-size: 12px; }
.vnv-col .com-ayuda { font-size: 10.5px; line-height: 1.2; }
.vnv-usado { padding: 6px; gap: 4px; }
.vnv-unidad { padding: 7px 8px; gap: 3px; }
.vnv-dato > span { font-size: 10px; }
.vnv-dato > strong { font-size: 11px; }
.vnv-modal .lu-btn { padding: 5px 10px; font-size: 11.5px; }
.vnv-modal .lu-btn--sm { padding: 2px 6px; font-size: 10.5px; }
/* Punto de estado en los accesos: verde = rehecho, rojo = modal viejo */
/* ---- Modo claro de los modales ----
Solo dentro del modal marcado: el resto de TCG sigue oscuro. */
.mo-cab-btns { display: flex; gap: 6px; align-items: center; }
.mo-tema { padding: 4px 8px !important; font-size: 13px !important; line-height: 1; }
.mo-claro {
--panel: #ffffff; --panel-2: #f2f4f7; --panel-3: #eaedf2; --text-muted: #000000;
/* Faltaba «--text», y es la causa de que el buscador saliera velado en
las tres casas. El tema claro pisaba «--panel» a blanco pero dejaba la
tinta del tema oscuro (#ecf0f4, casi blanca): todo lo que se pinta con
«background: var(--panel); color: var(--text)» —el campo de búsqueda,
entre otros— quedaba blanco sobre blanco, 1,04 de contraste. Es el
mismo #1f2937 que esta misma regla ya declara dos renglones abajo. */
--text: #000000; --border: #d7dbe0;
/* Mismo caso que «.ivj-claro»: sin «--bg» lo que se pinte con el fondo del
tema sale oscuro adentro de un modal claro. */
--bg: #ffffff;
background: #ffffff; color: #000;
}
.mo-claro .per-cab, .mo-claro .per-pie,
.mo-claro .cvn-barra, .mo-claro .vnv-buscador,
.mo-claro .cvn-pie, .mo-claro .ing-tabla-cont { border-color: #d7dbe0; }
/* 23/09/2026 (Ramiro: «en modo claro no se ve el color del encabezado» en
Ingreso y Entrega). Estos modales se pintan con «mo-claro», que aclaraba
TODO, cabecera incluida. La banda vuelve a ser de la casa, con su tinta y
su logo, igual que en el resto del sistema. */
.mo-claro > .per-cab, .mo-claro > .per-pie {
background: var(--vnv-marca, var(--accent-blue)) !important;
color: var(--vnv-marca-txt, #ffffff) !important;
border-color: color-mix(in srgb, var(--vnv-marca-txt, #fff) 30%, transparent) !important;
}
/* ESTA ERA LA QUE FALTABA (24/09/2026, Ramiro). El modo claro de esta
pantalla no es el tema general «tcg-claro» sino «mo-claro», el del propio
modal, y esta regla no exceptuaba nada: le ponía a TODO lo que cuelga de la
franja la tinta de la franja, con «!important». El desplegable del buscador
vive adentro de la franja y es blanco, así que quedaba blanco sobre blanco.
Arreglé dos veces las reglas de «tcg-claro» sin darme cuenta de que la que
estaba pegando era ésta. Van las mismas excepciones que las otras tres: los
campos y la lista del buscador tienen fondo propio y tinta propia. */
.mo-claro > .per-cab *:not(input):not(select):not(textarea):not(.bap-lista):not(.bap-lista *),
.mo-claro > .per-pie *:not(input):not(select):not(textarea) { color: var(--vnv-marca-txt, #ffffff) !important; }
.mo-claro > .per-cab .lu-btn, .mo-claro > .per-pie .lu-btn {
background: transparent !important;
border-color: color-mix(in srgb, var(--vnv-marca-txt, #fff) 55%, transparent) !important;
}
.mo-claro > .per-cab .lu-btn--accion, .mo-claro > .per-pie .lu-btn--accion {
background: var(--vnv-marca-txt, #fff) !important;
color: var(--vnv-marca-fuerte, var(--vnv-marca, #0b4f96)) !important;
border-color: transparent !important;
}
.mo-claro > .per-cab input, .mo-claro > .per-cab select {
background: rgba(255,255,255,.92) !important; color: #000 !important; border-color: transparent !important;
}
.mo-claro .per-titulo { color: #000; }
.mo-claro .per-sub, .mo-claro .com-ayuda, .mo-claro .vnv-nota,
.mo-claro .cvn-pie, .mo-claro .ing-cuenta, .mo-claro .pnl-titulo,
.mo-claro .vnv-dato > span, .mo-claro .cvn-tabla th { color: #000; }
.mo-claro .vnv-dato > strong, .mo-claro .cvn-tabla td { color: #000; }
.mo-claro input, .mo-claro select, .mo-claro textarea {
background: #ffffff; color: #000; border-color: #cbd2d9;
}
.mo-claro input:disabled, .mo-claro select:disabled { background: #eef1f4; color: var(--text); }
.mo-claro .lu-btn { background: #f2f4f7; color: #000; border-color: #cbd2d9; }
.mo-claro .lu-btn:hover:not(:disabled) { background: #e6eaef; }
.mo-claro .lu-btn--accion { background: #f2c200; color: #000; border-color: #d0902f; }
.mo-claro .cvn-tabla th { background: #eef1f4; border-bottom-color: #d7dbe0; }
.mo-claro .cvn-tabla td { border-bottom-color: #e6e9ed; }
.mo-claro .cvn-tabla tbody tr:hover { background: #fdf3e2; }
.mo-claro .cvn-fila--sel, .mo-claro .cvn-tabla tbody tr.cvn-fila--sel:hover { background: #fbe6c2; }
.mo-claro .pnl-existente { background: #e8f0fb; border-color: #b8d0ee; }
.mo-claro .vnv-trio { background: #ffffff; border-color: #d9dee5; }
.mo-claro .vnv-trio input, .mo-claro .vnv-trio .vn-monto { color: #000; }
.mo-claro .pnl-existente .pnl-titulo { color: #000; }
.mo-claro .pnl-editable { background: #f7f8fa; border-color: #d7dbe0; }
.mo-claro .vnv-usado, .mo-claro .vnv-unidad { border-color: #d7dbe0; }
.mo-claro .per-campo--calc strong { background: #f2f4f7; border-color: #cbd2d9; color: var(--text); }
.mo-claro .bap-lista { background: #ffffff; border-color: #cbd2d9; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.mo-claro .bap-item { border-bottom-color: #e6e9ed; color: #000; }
.mo-claro .bap-item:hover { background: #fdf3e2; }
.mo-claro .bap-donde, .mo-claro .bap-vacio, .mo-claro .cvn-vacio, .mo-claro .cvn-pendiente { color: #000; }
.mo-claro .bap-donde { border-color: #cbd2d9; }
.mo-claro .vnv-nota--alerta, .mo-claro .com-ayuda--alerta { color: var(--text); }
.mo-claro .vnv-aviso--anulada { background: #fde8e7; border-color: #e8a09d; color: #000; }
.mo-claro .res-toggle { color: #000; }
.ing-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
/* Marca R de unidad en reparación */
.rep-marca {
display: inline-block; margin-left: 6px; font-family: inherit;
background: #d9534f; color: #fff; font-size: 12px; font-weight: 700;
width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 6px;
}
.rep-grid { grid-template-columns: 1fr 1fr; }
.rep-obs { grid-column: 1 / -1; }
/* ---- Preentrega ---- */
.pre-acciones { display: flex; gap: 4px; }
.pre-accion {
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f); color: inherit;
border-radius: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.pre-accion--on { border-color: var(--accent-amber, #f2c200); color: var(--text); }
.ing-tabla-cont--chica { max-height: 190px; }
.pre-detalle { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; padding: 10px 12px; overflow: auto; }
.pre-detalle .ing-pnl { margin: 0; }
.pre-cab-edit { display: flex; gap: 14px; align-items: center; padding: 6px 9px; flex-wrap: wrap; }
.pre-cab-edit .per-campo { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 6px; margin: 0; }
.pre-cab-edit .per-campo > span { font-size: 12px; text-align: right; text-transform: none; letter-spacing: 0; }
.pre-cab-edit input[type=date] { padding: 4px 7px; font-size: 13px; }
.pre-listo-chk span { font-size: 12px; }
.pre-listo { color: var(--text); font-size: 12px; }
.pre-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 9px 6px; }
.pre-lista { border: 1px solid var(--border, #252d3f); border-radius: 8px; overflow: hidden; }
.pre-lista-tit {
font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text);
padding: 5px 8px; border-bottom: 1px solid var(--border, #252d3f); background: var(--panel-2, #161c2a);
}
.pre-lista-cuerpo { max-height: 170px; overflow: auto; }
.pre-item {
display: flex; align-items: center; gap: 6px; padding: 4px 8px;
font-size: 12px; border-bottom: 1px solid #21262e; cursor: pointer;
}
.pre-item:last-child { border-bottom: none; }
.pre-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pre-item input { width: 14px; height: 14px; accent-color: var(--accent-amber, #f2c200); }
.pre-item--si { color: var(--text); }
.pre-item--falta { color: #d9534f; }
.pre-mover {
background: none; border: 1px solid var(--border, #252d3f); border-radius: 6px; color: inherit;
cursor: pointer; padding: 0 6px; font-size: 12px; line-height: 18px;
}
.pre-mover:hover { border-color: var(--accent-amber, #f2c200); color: var(--text); }
.pre-alta-acc { padding: 0 9px 6px; }
.pre-alta-acc .per-campo { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 7px; margin: 0; }
.pre-alta-acc .per-campo > span { font-size: 12px; text-align: right; text-transform: none; letter-spacing: 0; }
.pre-alta-acc .per-campo > small { grid-column: 2; }
.pre-obs { display: grid !important; grid-template-columns: 92px 1fr; align-items: center; gap: 7px; margin: 0 9px 8px !important; }
.pre-obs > span { font-size: 12px; text-align: right; text-transform: none; letter-spacing: 0; }
.pre-obs > input { padding: 4px 7px; font-size: 13px; }
.mo-claro .pre-accion { background: #f2f4f7; border-color: #cbd2d9; }
.mo-claro .pre-lista, .mo-claro .pre-item, .mo-claro .pre-lista-tit { border-color: #d7dbe0; }
.mo-claro .pre-lista-tit { background: #eef1f4; }
/* Pago de unidades */
.pag-buscar { flex: 1; min-width: 200px; }
.pag-buscar input {
width: 100%; background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f);
border-radius: 8px; padding: 5px 8px; color: inherit; font-size: 13px;
}
.pag-fecha { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pag-fecha span { font-size: 12px; color: var(--text); }
.pag-fecha input {
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f);
border-radius: 8px; padding: 4px 7px; color: inherit; font-size: 13px;
}
/* ---- Órdenes de accesorios ---- */
/* EL CATÁLOGO NECESITA MÁS ANCHO QUE UNA ORDEN (12/09/2026, Ramiro).
El modal estaba pensado para una orden de trabajo —unas pocas columnas—
y con 1080px alcanzaba. El catálogo tiene ocho columnas: accesorio, parte,
modelos, tipo, precio, detalle, foto y el tilde de publicar, y las dos
últimas quedaban cortadas afuera de la pantalla.
Se le da el ancho de la pantalla con un margen, y tope: pasados los
1600px la línea de texto se hace incómoda de leer. */
.acc-modal { max-width: 1080px; }
/* EL CATÁLOGO, ADENTRO DEL MODAL (13/09/2026, Ramiro).
Se salía por abajo: la tabla de doscientos renglones empujaba el modal
más allá de la pantalla y el bloque de «Agregar un accesorio» terminaba
flotando encima de las filas. Se le da alto de pantalla al modal y el
que se desplaza es el cuerpo, no el modal entero. */
.per-modal.acc-modal--catalogo { max-width: min(1600px, calc(calc(100vw / var(--tcg-z, 1)) - 48px)); width: 100%;
height: calc(calc(100vh / var(--tcg-z, 1)) - 40px); max-height: calc(calc(100vh / var(--tcg-z, 1)) - 40px);
display: flex; flex-direction: column; }
.per-modal.acc-modal--catalogo > .per-cab,
.per-modal.acc-modal--catalogo > .vnv-buscador { flex: 0 0 auto; }
.per-modal.acc-modal--catalogo > .com-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Y la tabla se desplaza adentro de su caja, con el encabezado pegado. */
.acc-cat .cjs-tabla-caja { max-height: calc(calc(100vh / var(--tcg-z, 1)) - 430px); overflow: auto; }
.acc-cat .cjs-tabla thead th { position: sticky; top: 0; z-index: 3;
background: var(--panel-2, #1b2233); }
.acc-orden-cab {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 7px 12px; border-bottom: 1px solid var(--border, #252d3f);
}
.acc-nro { font-size: 12.5px; color: var(--text); }
.acc-nro strong { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 14px; color: var(--text); }
.acc-cerrada {
margin-left: 9px; font-size: 12px; letter-spacing: .5px;
border: 1px solid #4caf50; color: var(--text); border-radius: 999px; padding: 1px 8px;
}
.acc-cuerpo {
display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; padding: 10px 12px;
overflow: auto; max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 250px); overscroll-behavior: contain;
}
.acc-col { display: flex; flex-direction: column; gap: 10px; }
.acc-cuerpo .ing-pnl { margin: 0; }
.acc-ancho { grid-column: 1 / -1; }
.acc-buscar-unidad { position: relative; padding: 6px 9px 9px; }
.acc-buscar-unidad input {
width: 100%; background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f);
border-radius: 8px; padding: 6px 9px; color: inherit; font-size: 13px;
}
.acc-lista-unidades { max-height: 220px; }
.acc-cambiar-unidad { margin: 4px 9px 8px; }
.acc-agregar { padding: 6px 9px 0; }
.acc-agregar .per-campo { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 7px; margin: 0; }
.acc-agregar .per-campo > span { font-size: 12px; text-align: right; text-transform: none; letter-spacing: 0; }
.acc-items { padding: 6px 9px 9px; display: flex; flex-direction: column; gap: 4px; }
.acc-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.acc-item-n {
width: 18px; flex-shrink: 0; text-align: center; font-size: 12px;
color: var(--text); border: 1px solid var(--border, #252d3f); border-radius: 6px;
}
.acc-item-nom { flex: 0 0 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-item-obs {
flex: 1; min-width: 0; background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f);
border-radius: 6px; padding: 3px 7px; color: inherit; font-size: 12px;
}
.acc-pie { flex-wrap: wrap; }
.mo-claro .acc-item-n, .mo-claro .acc-item-obs { border-color: #d7dbe0; }
/* ---- Calidad - Contacto Clientes y Encuestas ---- */
.cc-modal { max-width: 1150px; }
/* Resultado del contacto en el listado, para verlo sin abrirlo. */
.cc-res { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
border: 1px solid transparent; white-space: nowrap; }
.cc-res--bien { color: var(--text); border-color: rgba(76,175,111,.5); background: rgba(76,175,111,.12); }
.cc-res--medio { color: var(--text); border-color: rgba(232,163,61,.5); background: rgba(232,163,61,.12); }
.cc-res--mal { color: #ee776c; border-color: rgba(226,87,76,.5); background: rgba(226,87,76,.12); }
.cc-res--vacio { color: var(--text); border-color: var(--border, #2c2f36); }
.cc-col-tema { font-size: 12px; color: var(--text); }
/* Buscador y "ver contactados": pegados a la lista que filtran. */
.cc-solapas { align-items: center; }
.cc-filtros-lista { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-right: 16px;
flex: 1 1 240px; min-width: 0; justify-content: flex-end; }
.cc-filtros-lista .res-toggle { white-space: nowrap; font-size: 12px; }
.cc-filtros-lista .cvn-buscar { flex: 0 1 320px; min-width: 0; }
.cc-filtros-lista .cvn-buscar input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 34px; }
/* ------------------------------------------------------------------ */
/* Calidad - Contacto Clientes y Encuestas: correcciones de ancho. */
/* Va después de .ing-modal y .cc-modal a propósito, porque son las que */
/* limitan el ancho: escrito antes, no las pisa. */
/* ------------------------------------------------------------------ */
/* Como pantalla ocupa TODO el ancho disponible: antes heredaba el tope
de 1150px del modal y quedaba media pantalla vacía a la derecha. */
.cc-pantalla-wrap .cc-pantalla.cc-modal.ing-modal {
max-width: none; width: 100%; margin: 0;
}
/* Los hijos de un flex no achican por debajo de su contenido salvo que
se les diga: sin esto el buscador se salía de la barra. */
.cc-barra-sup { min-width: 0; }
.cc-barra-sup .cc-filtros { min-width: 0; }
.cc-barra-sup .cc-filtros .cvn-buscar { min-width: 0; flex: 1 1 160px; }
.cc-barra-sup .cc-filtros .cvn-buscar input { width: 100%; min-width: 0; box-sizing: border-box; }
.cc-barra-sup .cc-filtros .cc-select-tema { flex: 0 1 auto; max-width: 260px; }
/* La tabla también acompaña el ancho de la pantalla. */
.cc-pantalla .ing-tabla-cont { width: 100%; }
.cc-solapas { display: flex; gap: 4px; padding: 7px 12px 0; }
.cc-select-tema {
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f); color: inherit;
border-radius: 8px; padding: 5px 9px; font-size: 12px; max-width: 260px;
}
.cc-tema-info {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
padding: 5px 12px 7px; font-size: 12px; color: var(--text);
border-bottom: 1px solid var(--border, #252d3f);
}
.cc-tipo {
font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.cc-tipo--encuesta { border: 1px solid #4a90d9; color: var(--text); }
.cc-tipo--gestion { border: 1px solid var(--accent-amber, #f2c200); color: var(--text); }
.cc-metodo { margin-left: auto; }
.cc-cuerpo {
display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; padding: 10px 12px;
overflow: auto; max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 260px); overscroll-behavior: contain;
}
.cc-cuerpo .ing-pnl { margin: 0; }
.cc-comunicar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 9px; }
.cc-wa { border-color: #25d366 !important; color: var(--text) !important; }
.cc-tel { display: grid !important; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; margin: 0 !important; flex: 1; min-width: 150px; }
.cc-tel > span { font-size: 12px; text-align: right; text-transform: none; letter-spacing: 0; }
.cc-tel > input { padding: 4px 7px; font-size: 13px; }
.cc-preguntas { padding: 6px 9px; display: flex; flex-direction: column; gap: 9px; }
.cc-pregunta { border-bottom: 1px solid #21262e; padding-bottom: 8px; }
.cc-pregunta:last-child { border-bottom: none; }
.cc-pregunta--ppal .cc-pregunta-txt { color: var(--text); }
.cc-pregunta-txt { font-size: 12px; margin-bottom: 5px; display: flex; gap: 7px; align-items: center; }
.cc-badge {
font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
border: 1px solid currentColor; border-radius: 999px; padding: 0 6px;
}
.cc-opciones { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-op {
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f); color: inherit;
border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; min-width: 30px;
}
.cc-op:hover { border-color: var(--accent-amber, #f2c200); }
.cc-op--on { background: var(--accent-amber, #f2c200); color: #000; border-color: var(--accent-amber, #f2c200); font-weight: 600; }
/* Indicadores */
.cc-indicadores {
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px;
padding: 12px; overflow: auto; max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 230px);
}
.cc-ind-card { border: 1px solid var(--border, #252d3f); border-radius: 8px; padding: 11px; }
.cc-ind-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cc-ind-nombre { font-size: 13px; font-weight: 600; }
.cc-ind-metodo { font-size: 12px; color: var(--text); margin-top: 2px; }
.cc-ind-valor { font-size: 26px; font-weight: 700; line-height: 1; white-space: nowrap; }
.cc-ind-valor--ok, .cc-ok { color: var(--text); }
.cc-ind-valor--medio, .cc-medio { color: var(--text); }
.cc-ind-valor--mal, .cc-mal { color: #d9534f; }
.cc-ind-detalle { font-size: 12px; color: var(--text); margin: 6px 0 8px; }
.cc-ind-preguntas { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid #21262e; padding-top: 7px; }
.cc-ind-fila { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.cc-ind-fila span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ind-fila strong { font-size: 12px; }
.cc-ind-fila small { font-size: 12px; color: var(--text); white-space: nowrap; }
/* Editor de temas */
.cc-editor { padding: 10px 12px; overflow: auto; max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 250px); display: flex; flex-direction: column; gap: 7px; }
.cc-tema-card { border: 1px solid var(--border, #252d3f); border-radius: 8px; overflow: hidden; }
.cc-tema-head {
display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
background: var(--panel-2, #161c2a); border: none; color: inherit;
padding: 8px 10px; cursor: pointer; font-size: 12.5px;
}
.cc-tema-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tema-meta { font-size: 12px; color: var(--text); white-space: nowrap; }
.cc-tema-body { padding: 9px; border-top: 1px solid var(--border, #252d3f); }
.cc-preg-editor { margin-top: 9px; border-top: 1px dashed var(--border, #252d3f); padding-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.cc-preg-fila { display: flex; gap: 5px; align-items: center; }
.cc-preg-fila input {
flex: 1; min-width: 0; background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f);
border-radius: 6px; padding: 4px 7px; color: inherit; font-size: 13px;
}
.cc-preg-ppal {
background: none; border: 1px solid var(--border, #252d3f); border-radius: 6px; color: var(--text);
cursor: pointer; padding: 0 7px; font-size: 12px; line-height: 20px;
}
.cc-preg-ppal--on { color: var(--text); border-color: var(--accent-amber, #f2c200); }
.cc-tema-pie { margin-top: 9px; display: flex; justify-content: flex-end; }
.mo-claro .cc-tema-card, .mo-claro .cc-ind-card, .mo-claro .cc-op,
.mo-claro .cc-preg-fila input, .mo-claro .cc-select-tema { border-color: #d7dbe0; }
.mo-claro .cc-tema-head { background: #eef1f4; }
/* ---- Encuesta pública (lo que ve el cliente) ---- */
.enc-wrap {
min-height: calc(100dvh / var(--tcg-z, 1)); display: flex; align-items: center; justify-content: center;
padding: 18px 14px; background: var(--panel, #161c2a);
}
.enc-card {
width: 100%; max-width: 560px; background: var(--panel, #161c2a); border: 1px solid var(--border, #252d3f);
border-radius: 14px; padding: 20px 18px; color: var(--text, #e8eaed);
}
.enc-card--ok { text-align: center; padding: 40px 20px; }
.enc-tilde {
width: 58px; height: 58px; line-height: 58px; margin: 0 auto 14px;
border-radius: 50%; background: #4caf50; color: #fff; font-size: 30px;
}
.enc-cab { border-bottom: 1px solid var(--border, #252d3f); padding-bottom: 13px; margin-bottom: 15px; }
.enc-titulo { font-size: 19px; margin: 0 0 6px; line-height: 1.25; }
.enc-msg { font-size: 13.5px; line-height: 1.5; color: var(--text); margin: 0; }
.enc-conce { font-size: 12px; color: var(--text); margin: 7px 0 0; text-transform: uppercase; letter-spacing: .5px; }
.enc-preguntas { display: flex; flex-direction: column; gap: 17px; }
.enc-pregunta-txt { font-size: 14px; margin-bottom: 9px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.35; }
.enc-n {
flex-shrink: 0; width: 21px; height: 21px; line-height: 21px; text-align: center;
border-radius: 50%; background: var(--border, #252d3f); font-size: 12px; color: var(--text);
}
.enc-opciones { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 30px; }
.enc-op {
background: var(--panel-2, #1e232a); border: 1px solid var(--border, #252d3f); color: var(--text, #e8eaed); border-radius: 8px;
padding: 9px 14px; font-size: 14px; cursor: pointer; min-width: 44px; min-height: 42px;
}
.enc-op:active { transform: scale(.97); }
.enc-op--on { background: var(--accent-amber, #f2c200); color: #000; border-color: var(--accent-amber, #f2c200); font-weight: 600; }
.enc-texto {
width: 100%; margin-left: 30px; max-width: calc(100% - 30px);
background: var(--panel-2, #1e232a); border: 1px solid var(--border, #252d3f); border-radius: 8px;
padding: 9px 11px; color: var(--text, #e8eaed); font-size: 13.5px; font-family: inherit; resize: vertical;
}
.enc-pie {
margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border, #252d3f);
display: flex; flex-direction: column; gap: 9px; align-items: stretch;
}
.enc-faltan { font-size: 12px; color: var(--text); text-align: center; }
.enc-enviar {
background: var(--accent-amber, #f2c200); color: #000; border: none; border-radius: 10px;
padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.enc-enviar:disabled { background: var(--border, #252d3f); color: #000; cursor: default; }
/* ---- Gerencia de Calidad ---- */
.gcal-root { padding: 14px 16px 30px; }
.gcal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 6px 0 14px; }
.gcal-titulo { font-size: 22px; margin: 0; }
.gcal-sub { font-size: 12px; color: var(--text); margin: 3px 0 0; }
.gcal-resumen {
display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px;
}
.gcal-kpi {
border: 1px solid var(--border, #252d3f); border-radius: 8px; padding: 9px 13px; min-width: 150px;
display: flex; flex-direction: column; gap: 1px;
}
.gcal-kpi > span { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text); }
.gcal-kpi > b { font-size: 21px; }
.gcal-kpi > small { font-size: 12px; color: var(--text); }
.gcal-toggle { margin-left: auto; }
.gcal-grid { padding: 0; max-height: none; }
.mo-claro.gcal-root { background: #fff; color: #000; }
.mo-claro .gcal-kpi { border-color: #d7dbe0; }
.cc-enviada { color: var(--text) !important; }
.cc-rescate { display: flex; gap: 5px; align-items: center; width: 100%; margin-top: 4px; }
.cc-rescate input {
flex: 1; min-width: 0; background: var(--panel-2, #161c2a); border: 1px dashed var(--border, #252d3f);
border-radius: 8px; padding: 4px 8px; color: inherit; font-size: 13px;
}
/* Sugerencias del padrón de localidades en la ficha de cliente. Va al final
del bloque a propósito: insertado antes, lo pisan las reglas de .per-campo. */
.rv-loc-sug {
position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
max-height: 190px; overflow-y: auto; margin-top: 2px;
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f);
border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.rv-loc-sug button {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
width: 100%; padding: 6px 9px; background: none; border: 0;
border-bottom: 1px solid #23282f; color: inherit; text-align: left; cursor: pointer;
}
.rv-loc-sug button:last-child { border-bottom: 0; }
.rv-loc-sug button:hover { background: var(--panel-3, #1e242c); }
.rv-loc-sug strong { font-size: 12px; font-weight: 600; }
.rv-loc-sug span { font-size: 10.5px; color: var(--text); }
/* ---------------------------------------------------------------
Celdas editables (tabla ↔ modal) y motor de migración.
Van al FINAL del bloque: reglas insertadas antes de otras de la
misma especificidad quedan pisadas y no hacen nada.
---------------------------------------------------------------- */
.tb-celda {
min-height: 24px; padding: 2px 5px; border-radius: 6px; cursor: pointer;
display: flex; align-items: center; gap: 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-celda:hover { background: rgba(232,163,61,0.13); box-shadow: inset 0 0 0 1px rgba(232,163,61,0.4); }
.tb-celda--fija { cursor: default; }
.tb-celda--fija:hover { background: none; box-shadow: none; }
.tb-celda-vacia { color: var(--text); font-style: italic; }
.tb-celda--edit { padding: 0; background: none; box-shadow: none; }
.tb-celda--edit:hover { background: none; box-shadow: none; }
.tb-celda--edit input,
.tb-celda--edit select {
width: 100%; min-width: 70px; padding: 2px 5px; font: inherit;
color: inherit; background: var(--panel-2, #202940);
border: 1px solid var(--accent-amber, #f2c200); border-radius: 6px;
}
.tb-celda--cat { display: flex; align-items: center; gap: 3px; }
.tb-celda-btn {
flex: 0 0 auto; padding: 2px 6px; font: inherit; line-height: 1.1;
color: inherit; background: var(--panel-2, #202940);
border: 1px solid var(--border, #252d3f); border-radius: 6px; cursor: pointer;
}
.tb-celda-btn:hover { border-color: var(--accent-amber, #f2c200); }
.mig-badge {
margin-left: 5px; padding: 0 4px; border-radius: 6px;
font-size: 12px; font-weight: 700; letter-spacing: .04em;
color: var(--bg, #131824); background: var(--accent-amber, #f2c200);
}
.cvn-tabla--edit td { padding: 2px 4px; vertical-align: middle; }
.cvn-tabla--edit th { text-align: center; }
.cvn-col-n { width: 62px; text-align: center; cursor: pointer; }
.cvn-col-abrir { width: 34px; text-align: center; }
.cvn-abrir {
padding: 1px 5px; font: inherit; color: inherit; cursor: pointer;
background: none; border: 1px solid var(--border, #252d3f); border-radius: 6px;
}
.cvn-abrir:hover { border-color: var(--accent-amber, #f2c200); }
.cvn-fila--mig td { background: rgba(232,163,61,0.05); }
.cvn-filtro-origen { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.cvn-filtro-origen select {
padding: 3px 6px; font: inherit; color: inherit;
background: var(--panel-2, #202940); border: 1px solid var(--border, #252d3f); border-radius: 6px;
}
/* --- Motor de migración --- */
.mig-modal { width: min(1180px, calc(96vw / var(--tcg-z, 1))); }
.mig-pasos { display: flex; gap: 6px; padding: 0 14px 8px; flex-wrap: wrap; }
.mig-paso {
padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer;
color: var(--text); background: var(--panel-2, #202940);
border: 1px solid var(--border, #252d3f); border-radius: 6px;
}
.mig-paso b { color: inherit; margin-right: 4px; }
.mig-paso--act { color: var(--text, #ecf0f4); border-color: var(--accent-amber, #f2c200); }
.mig-paso:disabled { opacity: .45; cursor: default; }
.mig-aviso { margin: 0 14px 8px; }
.mig-cuerpo { max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 250px); overflow: auto; }
.mig-bloque { display: flex; flex-direction: column; gap: 14px; }
.mig-bloque-sub { display: flex; flex-direction: column; gap: 6px; }
.mig-bloque-sub > b { font-size: 12.5px; }
.mig-file {
display: flex; flex-direction: column; gap: 6px; padding: 14px;
border: 1px dashed var(--border, #252d3f); border-radius: 8px;
}
.mig-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mig-chips input {
padding: 4px 8px; font: inherit; color: inherit;
background: var(--panel-2, #202940); border: 1px solid var(--border, #252d3f); border-radius: 6px;
}
.mig-tabla-wrap { max-height: 340px; overflow: auto; border: 1px solid var(--border, #252d3f); border-radius: 8px; }
.mig-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.mig-tabla th {
position: sticky; top: 0; z-index: 1; text-align: left; padding: 6px 8px;
background: var(--panel-2, #202940); border-bottom: 1px solid var(--border, #252d3f);
}
.mig-tabla td { padding: 4px 8px; border-bottom: 1px solid rgba(42,48,56,0.6); }
.mig-tabla select {
width: 100%; padding: 3px 5px; font: inherit; color: inherit;
background: var(--panel-2, #202940); border: 1px solid var(--border, #252d3f); border-radius: 6px;
}
.mig-fila--vo td { background: rgba(79,142,247,0.06); }
.mig-fila--pend td { background: rgba(226,87,76,0.08); }
.mig-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.mig-card {
display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
background: var(--panel-2, #202940); border: 1px solid var(--border, #252d3f); border-radius: 8px;
}
.mig-card b { font-size: 20px; line-height: 1.1; }
.mig-card span { font-size: 12px; color: var(--text); }
.mig-card--alerta { border-color: var(--red, #e2574c); }
.mig-cat { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mig-cat-titulo { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; }
.mig-cat-cuenta { font-size: 12px; font-weight: 400; color: var(--text); }
.mig-tag { padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.mig-tag--ok { color: var(--text); background: rgba(76,175,109,0.12); }
.mig-tag--duda { color: var(--text); background: rgba(232,163,61,0.12); }
.mig-tag--nuevo { color: var(--text); background: rgba(79,142,247,0.12); }
.mig-avisos { margin: 0; padding-left: 18px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.mig-avisos li.mig-aviso--abierto { color: var(--text); }
.mig-offsets { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.mig-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* --- Tablas (ABM de catálogos) --- */
.abm-modal { width: min(1080px, calc(96vw / var(--tcg-z, 1))); }
.abm-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 8px; }
.abm-tab {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer;
color: var(--text); background: var(--panel-2, #202940);
border: 1px solid var(--border, #252d3f); border-radius: 6px;
}
.abm-tab--act { color: var(--text, #ecf0f4); border-color: var(--accent-amber, #f2c200); }
.abm-tab-n {
min-width: 18px; padding: 0 4px; border-radius: 8px; text-align: center;
font-size: 12px; background: rgba(255,255,255,0.07);
}
.abm-cuerpo { max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 250px); overflow: auto; }
.abm-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.abm-buscar {
min-width: 190px; padding: 5px 9px; font: inherit; color: inherit;
background: var(--panel-2, #202940); border: 1px solid var(--border, #252d3f); border-radius: 6px;
}
.abm-acciones { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.abm-acciones input {
min-width: 150px; padding: 3px 6px; font: inherit; color: inherit;
background: var(--panel-2, #202940);
border: 1px solid var(--accent-amber, #f2c200); border-radius: 6px;
}
.abm-fila--modelo td { background: rgba(255,255,255,0.035); }
.abm-fijo {
margin-left: 6px; padding: 0 5px; border-radius: 6px; font-size: 12px;
color: var(--text); background: rgba(255,255,255,0.06);
}
.lu-inf-mig td { background: rgba(232,163,61,0.05); }
/* Solapa Modelos del ABM: aviso de versión compartida entre modelos y el
total global al lado del uso de este modelo. Al final del bloque, como el
resto de lo agregado después. */
.abm-nota { margin-left: 9px; font-weight: 400; }
.abm-asignar {
background: var(--panel-3, #1e242c); border: 1px solid var(--border, #252d3f); border-radius: 8px;
padding: 3px 6px; color: inherit; font-size: 12px;
}
.cvn-bloqueo { color: var(--text); }
/* EL SELLO. Es el renglón que dice si el navegador está mostrando la última
publicación. Con un texto largo se salía del borde y se veía cortado, que
es justo lo contrario de lo que tiene que hacer: dar confianza. Se recorta
con puntos suspensivos y el texto entero queda en el cartelito. */
.tcg-version {
font-size: 12px; color: var(--text); letter-spacing: .2px;
padding: 2px 7px; border: 1px solid var(--border, #252d3f); border-radius: 20px;
white-space: nowrap; max-width: min(calc(46vw / var(--tcg-z, 1)), 420px); overflow: hidden;
text-overflow: ellipsis;
/* Fondo y tinta propios, y del mismo par: el sello se dibuja encima de
cualquier pantalla y no puede depender de lo que tenga debajo. */
background: var(--panel, #1b2233); color: var(--text);
}
.abm-recuperar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 7px 10px; margin-bottom: 8px;
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #262c35); border-radius: 8px;
}
.abm-sep { width: 1px; height: 16px; background: var(--border, #252d3f); }
.abm-tab-comp {
margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--text);
border: 1px solid #2f4358; border-radius: 20px; padding: 0 4px;
}
.abm-bloqueado {
font-size: 12px; color: var(--text); background: var(--panel-2, #3a3320); border-radius: 20px;
padding: 2px 7px; white-space: nowrap;
}
.cat-disparador {
display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
background: var(--panel-3, #1e242c); border: 1px solid var(--border, #252d3f); border-radius: 8px;
padding: 5px 9px; color: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.cat-disparador:disabled { opacity: .5; cursor: default; }
.cat-placeholder { color: var(--text); }
.cat-flecha { font-size: 12px; color: var(--text); }
.cat-buscador {
/* Arranca sobre la propia celda (no debajo): el campo de búsqueda tapa al
campo original y la lista cae desde ahí. Así no se va al fondo de la
pantalla ni tapa los campos de abajo. */
position: absolute; top: -1px; left: -1px; right: -1px; z-index: 60;
background: var(--panel-2, #161c2a); border: 1px solid #2f3742; border-radius: 8px;
box-shadow: 0 10px 26px rgba(0,0,0,.5); overflow: hidden;
}
.cat-buscar {
width: 100%; background: var(--panel-3, #1e242c); border: 0; border-bottom: 1px solid var(--border, #252d3f);
padding: 7px 10px; color: inherit; font-size: 15.5px;
}
.cat-lista { max-height: 260px; overflow-y: auto; }
.cat-op {
display: block; width: 100%; padding: 6px 10px; background: none; border: 0;
border-bottom: 1px solid #23282f; color: inherit; text-align: left;
font-size: 15px; cursor: pointer;
}
.cat-op:last-child { border-bottom: 0; }
.cat-op:hover { background: var(--panel-3, #1e242c); }
.cat-op--act { color: var(--text); font-weight: 600; }
.cat-vacio, .cat-mas { padding: 7px 10px; font-size: 13.5px; color: var(--text); }
.cat-mas { border-top: 1px solid #23282f; }
.cvn-cat { position: relative; }
.cvn-cat-elegir { position: relative; display: flex; gap: 5px; align-items: center; }
.cvn-cat-elegir .cat-disparador { flex: 1; min-width: 0; }
.tb-celda--cat { position: relative; }
/* ============================================================
Ventas de 0km: legibilidad, dos colores y carga rápida.
Va al final del bloque para ganarle a la compactación de arriba.
Ámbar = lo que se carga acá. Azul = lo que ya existe y llega de compra,
ingreso, asignación, gestoría y entrega.
============================================================ */
.vnv-modal { --vnv-carga: #f2c200; --vnv-existe: #5aa2e8; }
/* El cuerpo de 0km quedó en dos columnas: la ficha de la unidad va abajo de la
primera, no en una tercera columna. Sin esto queda una columna vacía a la
derecha, porque la grilla original tiene tres. */
.vnv-cuerpo--2col { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
.vnv-cuerpo--2col .vnv-col { display: flex; flex-direction: column; }
/* El emparejado de las columnas está definido UNA sola vez, más abajo.
Acá había una regla que repartía el sobrante entre los campos de cada
tarjeta: los separaba con huecos enormes en vez de dejarlos juntos. */
/* Encabezado: el bloque de consultas, separado de las acciones */
.vnv-consultas {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
padding: 4px 8px 4px 10px; margin-right: 4px;
border: 1px solid #2f3742; border-radius: 8px; background: rgba(255,255,255,.03);
}
.vnv-consultas-tit {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
color: var(--text); margin-right: 2px;
}
/* Bloques del formulario */
.vnb {
border: 1px solid #2c333d; border-left: 3px solid var(--vnv-carga);
border-radius: 8px; background: rgba(255,255,255,.015); overflow: visible;
}
.vnb + .vnb, .vnv-col > .vnb + .vnv-unidad { margin-top: 9px; }
.vnb-cab {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 6px 10px; border-radius: 9px 9px 0 0;
background: rgba(255,255,255,.03);
border-bottom: 1px solid color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca, #6c7684)) 45%, transparent);
}
.vnb-cab h4 {
margin: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; white-space: nowrap;
color: var(--text);
}
.vnb-cab .vnb-nota { color: var(--text); }
.vnb-nota { font-size: 10px; color: var(--text); white-space: nowrap; }
.vnb-body { padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; }
/* Etiquetas y celdas: legibles, en una sola línea */
.vnv-modal .vnb .per-campo,
.vnv-modal .vnv-usado .per-campo { grid-template-columns: 128px 1fr; gap: 9px; align-items: center; }
.vnv-modal .vnb .per-campo > span {
font-size: 11.5px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vnv-modal .vnb .per-campo > input,
.vnv-modal .vnb .per-campo > select,
/* «output» es el importe del usado y «.vnv-trio» los gastos de
otorgamiento. No son «input», así que quedaban afuera de esta regla y
tomaban otra superficie: se veían de un color distinto que los campos de
al lado, en el monitor y en el teléfono. */
.vnv-modal .vnb .per-campo > output,
.vnv-modal .vnb .per-campo > .vnv-trio,
.vnv-modal .vnb .cat-disparador,
.vnv-modal .vnv-mesanio input {
min-height: 31px; padding: 5px 9px; font-size: 13px; border-radius: 8px;
background: var(--bg, #10151c); color: var(--text, #e9eef6); border: 1px solid #3b4450;
}
.vnv-modal .vnb .per-campo > input:hover:not(:disabled),
.vnv-modal .vnb .cat-disparador:hover:not(:disabled) { border-color: #57616f; }
.vnv-modal .vnb .per-campo > input:focus,
.vnv-modal .vnb .per-campo > select:focus,
.vnv-modal .vnb .cat-disparador:focus,
.vnv-modal .vnv-mesanio input:focus {
outline: none; border-color: var(--vnv-carga);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--vnv-carga) 30%, transparent);
}
.vnv-modal .vnb .per-campo > input:disabled,
.vnv-modal .vnb .per-campo > select:disabled,
.vnv-modal .vnb .cat-disparador:disabled,
.vnv-modal .vnv-mesanio input:disabled {
background: var(--panel-2, #171c23); color: var(--text); border-color: var(--border, #252d3f); opacity: 1;
}
.vnv-modal .vnb .com-ayuda { font-size: 10.5px; color: var(--text); }
/* Cliente resaltado */
.vnv-cliente { padding: 4px 6px; border-radius: 8px; border: 1.5px solid var(--vnv-carga); background: color-mix(in srgb, var(--vnv-carga) 9%, transparent); }
.vnv-cliente .per-campo > span { color: var(--text); font-weight: 700; }
.vnv-cliente--cargado { border-color: #4fbe86; background: color-mix(in srgb, #4fbe86 9%, transparent); }
.vnv-cliente--cargado .per-campo > span { color: var(--text); }
/* Neto */
.vnv-modal .per-campo--calc strong {
font-size: 14px; font-weight: 700; padding: 5px 9px; min-height: 31px;
display: flex; align-items: center; border-style: solid; border-radius: 8px;
color: var(--text); border-color: color-mix(in srgb, var(--vnv-carga) 45%, transparent);
background: color-mix(in srgb, var(--vnv-carga) 10%, transparent);
}
/* Buscador con los resultados en dos grupos */
.bap-rotulo {
padding: 6px 9px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .1em; color: var(--text);
}
.bap-grupo--apagado { border-top: 1px solid #2c333d; margin-top: 4px; }
.bap-grupo--apagado .bap-rotulo { color: var(--text); }
.bap-grupo--apagado .bap-item { opacity: 1; }
.bap-grupo--apagado .bap-item:hover, .bap-grupo--apagado .bap-item--foco { opacity: 1; }
.bap-item--foco { background: color-mix(in srgb, var(--accent-amber, #f2c200) 16%, transparent); }
/* Lista de catálogo: opción resaltada, alta y bloqueo */
.cat-op--foco { background: color-mix(in srgb, var(--accent-amber, #f2c200) 18%, transparent); }
.cat-op--crear { color: var(--text); font-weight: 700; }
.cat-op--crear.cat-op--foco { background: var(--accent-amber, #f2c200); color: #000; }
.cat-pie {
/* 22/09/2026 (Ramiro): todo lo que se lee adentro del buscador, tres
puntos más grande. La ayuda del pie también: se leía con lupa. */
padding: 5px 9px; font-size: 13px; color: var(--text);
background: rgba(255,255,255,.03); border-top: 1px solid #2c333d;
}
.cat-pie--bloqueo { color: var(--text); font-style: italic; }
/* Borrar de la tabla, o la cantidad de veces que el valor está en uso */
.cat-op { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-op-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-borrar {
flex-shrink: 0; width: 20px; height: 20px; line-height: 18px; text-align: center;
border-radius: 6px; font-size: 14px; color: var(--text); opacity: 0; cursor: pointer;
}
.cat-op:hover .cat-borrar, .cat-op--foco .cat-borrar { opacity: 1; }
.cat-borrar:hover { background: #b5443a; color: #fff; }
.cat-usos {
flex-shrink: 0; min-width: 20px; padding: 0 6px; border-radius: 999px;
font-size: 12px; font-weight: 700; color: var(--text); border: 1px solid #3b4450;
}
/* Alta de cliente */
.vna-sub { margin: 12px 14px 0; font-size: 12px; color: var(--text); line-height: 1.45; }
.vna-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; overflow: visible; }
.vna-modal .per-campo { grid-template-columns: 118px 1fr; align-items: center; }
.vna-modal .per-campo > input {
min-height: 31px; padding: 5px 9px; font-size: 13px; border-radius: 8px;
background: var(--bg, #10151c); color: var(--text, #e9eef6); border: 1px solid #3b4450;
}
.vna-modal .per-campo > input:focus {
outline: none; border-color: var(--accent-amber, #f2c200);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-amber, #f2c200) 30%, transparent);
}
.vna-loc { position: relative; }
.vna-loc-lista {
position: absolute; z-index: 30; top: 100%; left: 118px; right: 0; margin-top: 2px;
background: var(--panel-3, #161b22); border: 1px solid var(--accent-amber, #f2c200); border-radius: 8px;
max-height: 190px; overflow-y: auto;
}
.vna-loc-op {
display: grid; grid-template-columns: 1fr auto 52px; gap: 8px; align-items: center;
width: 100%; padding: 6px 9px; font-size: 12.5px; font-family: inherit; text-align: left;
background: none; border: 0; border-bottom: 1px solid #2c333d; color: var(--text, #e9eef6); cursor: pointer;
}
.vna-loc-op:last-child { border-bottom: 0; }
.vna-loc-op:hover { background: color-mix(in srgb, var(--accent-amber, #f2c200) 16%, transparent); }
.vna-loc-op span { color: var(--text); font-size: 12px; }
.vna-loc-op em { color: var(--text); font-style: normal; font-size: 12px; text-align: right; }
.vna-pie-btns { display: flex; gap: 8px; }
.mo-claro .vna-modal .per-campo > input { background: #fff; color: #000; border-color: #a8b3c2; }
.mo-claro .vna-loc-lista { background: #fff; }
.mo-claro .vna-loc-op { color: #000; border-bottom-color: #e2e6ec; }
.mo-claro .cat-usos { border-color: #ccd3dc; color: #000; }
/* Panel de la unidad: azul, tamaño fijo, cierra abajo a la par */
.vnv-modal .vnv-unidad.pnl-existente {
flex: 1; display: flex; flex-direction: column; padding: 0; overflow: hidden;
background: color-mix(in srgb, var(--vnv-existe) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--vnv-existe) 45%, transparent);
border-radius: 8px;
}
.vnp-cab {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 7px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .09em; color: var(--text);
background: color-mix(in srgb, var(--vnv-existe) 16%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--vnv-existe) 35%, transparent);
}
.vnp-chip {
padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700;
text-transform: none; letter-spacing: 0; border: 1px solid currentColor;
}
.vnp-hero {
display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 9px 10px;
border-bottom: 1px solid color-mix(in srgb, var(--vnv-existe) 30%, transparent);
}
.vnp-interno {
flex-shrink: 0; min-width: 62px; text-align: center; padding: 3px 9px;
font-size: 16px; font-weight: 700; color: var(--text); border-radius: 8px;
background: color-mix(in srgb, var(--vnv-existe) 18%, transparent);
}
.vnp-interno--vacio { color: var(--text); background: transparent; border: 1px dashed color-mix(in srgb, var(--vnv-existe) 40%, transparent); }
.vnp-interno-input {
flex-shrink: 0; width: 86px; height: 32px; padding: 0 8px; text-align: center;
font-size: 15px; font-weight: 700; font-family: inherit; color: var(--text);
background: var(--bg, #10151c); border: 1.5px solid var(--vnv-carga); border-radius: 8px; outline: none;
}
.vnp-hero strong { display: block; font-size: 13px; line-height: 1.25; }
.vnp-hero p { margin: 2px 0 0; font-size: 11.5px; color: var(--text); }
.vnp-cuerpo { flex: 1; padding: 2px 10px 0; display: flex; flex-direction: column; }
.vnp-grupo { display: flex; flex-direction: column; }
.vnp-grupo + .vnp-grupo { margin-top: 7px; }
.vnp-grupo h5 {
margin: 0 0 2px; padding: 6px 0 3px; font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
color: var(--text);
border-bottom: 1.5px solid color-mix(in srgb, var(--vnv-existe) 42%, transparent);
}
.vnp-lista { margin: 0; padding: 2px 0; flex: 1; display: flex; flex-direction: column; }
.vnp-lista > div {
flex: 1 1 auto; display: flex; justify-content: space-between; gap: 10px; align-items: center;
min-height: 23px; padding: 3px 0;
border-bottom: 1px dashed color-mix(in srgb, var(--vnv-existe) 28%, transparent);
}
.vnp-lista > div:last-child { border-bottom: none; }
.vnp-lista dt {
font-size: 10px; font-weight: 600; color: var(--text);
text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.vnp-lista dd { margin: 0; font-size: 12px; text-align: right; }
.vnp-lista dd b { font-weight: 700; color: var(--text, #eff5fc); }
.vnp-sindato { color: var(--text); font-style: italic; font-size: 11.5px; }
.vnv-modal .vnv-unidad .vnv-nota { display: block; padding: 8px 10px 10px; font-size: 10.5px; color: var(--text); }
/* Pie: solo acciones de esta venta */
.vnv-pie-nota { margin-left: auto; font-size: 11px; color: var(--text); }
/* Listados y consulta */
.vnl-overlay { z-index: 10000; }
.vnl-modal, .vnd-modal { width: min(1080px, calc(95vw / var(--tcg-z, 1))); max-height: calc(88vh / var(--tcg-z, 1)); }
.vna-modal { width: min(560px, calc(95vw / var(--tcg-z, 1))); max-height: calc(88vh / var(--tcg-z, 1)); overflow: visible; }
.vnl-tipo {
margin: 0 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
color: var(--text); font-weight: 700;
}
.vnl-barra { display: flex; align-items: center; gap: 10px; padding: 11px 14px 2px; flex-wrap: wrap; }
.vnl-buscar {
flex: 1; min-width: 220px; height: 34px; padding: 0 10px; font-size: 13px; font-family: inherit;
color: var(--text, #e9eef6); background: var(--bg, #10151c); border: 1px solid #3b4450; border-radius: 8px; outline: none;
}
.vnl-buscar:focus { border-color: var(--accent-amber, #f2c200); }
.vnl-cuenta { font-size: 12px; color: var(--text); white-space: nowrap; }
.vnl-tabla-cont { margin: 10px 14px; overflow: auto; border: 1px solid #2c333d; border-radius: 8px; min-height: 90px; }
.vnl-tabla { width: 100%; table-layout: auto; }
.vnl-tabla th { position: sticky; top: 0; z-index: 1; text-align: center; white-space: nowrap; }
.vnl-tabla td { white-space: nowrap; }
/* La columna de la versión absorbe el ancho sobrante para que la tabla llegue
al borde del modal y no queden huecos a la derecha. */
.vnl-col-ancha { width: 100%; white-space: normal; }
.vnl-col-accion { width: 1%; text-align: center; }
.vnl-th-n, .vnl-td-n { width: 42px; text-align: center; color: var(--text); }
.vnl-th-num, .vnl-td-num { text-align: right; }
.vnl-tabla tfoot td { font-weight: 700; text-align: right; border-top: 1px solid #3a4250; }
.vnd-tabs { display: flex; border: 1px solid #3b4450; border-radius: 8px; overflow: hidden; }
.vnd-tab {
padding: 0 13px; height: 34px; font-size: 12px; font-weight: 700; font-family: inherit;
background: transparent; color: var(--text); border: 0; cursor: pointer;
}
.vnd-tab + .vnd-tab { border-left: 1px solid #3b4450; }
.vnd-tab--act { background: var(--accent-amber, #f2c200); color: #000; }
.vnd-campo { flex: 1; min-width: 230px; max-width: 400px; }
.vnd-campo .per-campo { grid-template-columns: 62px 1fr; align-items: center; }
.vnd-kpis { display: flex; gap: 9px; padding: 8px 14px 0; flex-wrap: wrap; }
.vnd-kpi { flex: 1; min-width: 140px; padding: 8px 11px; border-radius: 8px; border: 1px solid #2c333d; }
.vnd-kpi strong { display: block; font-size: 16px; font-weight: 700; }
.vnd-kpi span { font-size: 12px; color: var(--text); }
/* ---- Modo claro ---- */
.vnv-modal.mo-claro .vnb { border-color: #d9dee5; background: #fbfcfe; }
.vnv-modal.mo-claro .vnb-cab {
background: var(--vnv-marca); border-bottom-color: var(--vnv-marca);
}
.vnv-modal.mo-claro .vnb-cab h4 { color: var(--vnv-marca-txt); }
.vnv-modal.mo-claro .vnb-cab .lu-btn { color: var(--vnv-marca-txt); }
.vnv-modal.mo-claro .vnb .per-campo > span { color: #000; }
.vnv-modal.mo-claro .vnb .per-campo > input,
.vnv-modal.mo-claro .vnb .per-campo > select,
/* «output» es el importe del usado y «.vnv-trio» los gastos de
otorgamiento: no son «input», así que estas reglas no los tomaban y
caían en otra superficie. Se veían de otro color que los campos de al
lado, en el monitor y en el teléfono. */
.vnv-modal.mo-claro .vnb .per-campo > output,
.vnv-modal.mo-claro .vnb .per-campo > .vnv-trio,
.vnv-modal.mo-claro .vnb .cat-disparador,
.vnv-modal.mo-claro .vnv-mesanio input { background: #ffffff; color: #000; border-color: #a8b3c2; }
.vnv-modal.mo-claro .vnb .per-campo > input:disabled,
.vnv-modal.mo-claro .vnb .per-campo > select:disabled,
.vnv-modal.mo-claro .vnb .cat-disparador:disabled,
.vnv-modal.mo-claro .vnv-mesanio input:disabled { background: #eef1f5; color: var(--text); border-color: #ccd3dc; }
.vnv-modal.mo-claro .per-campo--calc strong { color: var(--text); border-color: #e0b674; background: #fdf4e4; }
.vnv-modal.mo-claro .vnv-consultas { border-color: #d9dee5; background: #f6f8fb; }
.vnv-modal.mo-claro .vnv-unidad.pnl-existente { background: #e9f1fc; border-color: #a9c9ee; }
.vnv-modal.mo-claro .vnp-cab { background: #d9e8fa; color: #000; }
.vnv-modal.mo-claro .vnp-grupo h5 { color: #000; }
.vnv-modal.mo-claro .vnp-lista dt { color: #000; }
.vnv-modal.mo-claro .vnp-lista dd b { color: #000; }
.vnv-modal.mo-claro .vnp-interno { color: #000; }
.vnv-modal.mo-claro .vnv-unidad .vnv-nota { color: #000; }
.mo-claro .vnl-buscar { background: #ffffff; color: #000; border-color: #a8b3c2; }
.mo-claro .vnl-tabla-cont { border-color: #d7dbe0; }
.mo-claro .vnd-kpi { border-color: #d7dbe0; background: #f6f8fa; }
.mo-claro .cat-pie { background: #f1f4f8; border-top-color: #d9dee5; color: #000; }
/* ============================================================
Ventas de 0km: color de la marca y modo compacto.
El color sale del concesionario elegido, y se usa de fondo en los títulos
de los bloques para ubicarse de un vistazo en cuál se está cargando.
============================================================ */
.vnv-modal { --vnv-marca: #6c7684; --vnv-marca-luz: #96a1b3; --vnv-marca-txt: #ffffff; --vnv-marca-fuerte: #3c434f; }
.vnv-modal.vnv-marca--renault { --vnv-marca: #f2c200; --vnv-marca-luz: #f2c200; --vnv-marca-txt: #1d1a06; --vnv-marca-fuerte: #6b5500; }
.vnv-modal.vnv-marca--peugeot { --vnv-marca: #0b4f96; --vnv-marca-luz: #4f8ef7; --vnv-marca-txt: #ffffff; --vnv-marca-fuerte: #0b4f96; }
.vnv-modal.vnv-marca--toyota { --vnv-marca: #cf2126; --vnv-marca-luz: #e2574c; --vnv-marca-txt: #ffffff; --vnv-marca-fuerte: #b3231a; }
.vnv-modal .vnb { border-left-color: var(--vnv-marca-luz, var(--vnv-marca)); }
/* Banda del color de la casa con la letra en contraste, igual que la ficha
de la unidad. La vez anterior quedó ilegible porque el fondo iba con el
color de la casa Y la letra también: ahora la letra usa --vnv-marca-txt,
que es blanco o casi negro según la marca. */
.vnv-modal .vnb-cab {
background: var(--vnv-marca);
border-bottom: 1px solid var(--vnv-marca-luz, var(--vnv-marca));
border-radius: 7px 7px 0 0;
}
.vnv-modal .vnb-cab h4 { color: var(--vnv-marca-txt); }
.vnv-modal .vnb-nota { color: var(--vnv-marca-txt); opacity: 1; }
.vnv-modal .vnb-cab .lu-btn {
border-color: color-mix(in srgb, var(--vnv-marca-txt) 45%, transparent);
color: var(--vnv-marca-txt);
}
.vnv-modal .vnb-cab .lu-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--vnv-marca-txt) 18%, transparent); }
.vnv-modal .vnp-cab { background: var(--vnv-marca); color: var(--vnv-marca-txt); border-bottom-color: var(--vnv-marca); }
.vnv-modal .vnp-chip { color: var(--vnv-marca-txt); }
.vnv-modal .vnv-unidad.pnl-existente { border-color: color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca)) 45%, transparent); }
.vnv-modal .vnp-grupo h5 { border-bottom-color: color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca)) 40%, transparent); }
.vnv-modal .vnp-lista > div { border-bottom-color: color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca)) 24%, transparent); }
/* ---- Modo compacto: entra todo de una, sin barra de scroll ---- */
.vnv-compacto .vnv-cuerpo--2col {
max-height: none; overflow: hidden; padding: 8px 10px; gap: 10px;
}
/* Si en una pantalla muy baja algo no entrara, se puede seguir bajando con la
rueda; lo que se saca es la barra, no el desplazamiento. */
.vnv-compacto .vnv-cuerpo--2col { overflow-y: auto; scrollbar-width: none; }
.vnv-compacto .vnv-cuerpo--2col::-webkit-scrollbar { width: 0; height: 0; }
.vnv-compacto .per-cab { padding: 8px 12px; }
.vnv-compacto .per-titulo { font-size: 15px; }
.vnv-compacto .vnv-buscador { padding: 6px 10px 4px; }
.vnv-compacto .vnb-body { padding: 6px 8px; gap: 4px; }
.vnv-compacto .vnb-cab { padding: 4px 8px; }
.vnv-compacto .vnb-cab h4 { font-size: 10.5px; letter-spacing: .07em; }
.vnv-compacto .vnb-nota { font-size: 10.5px; }
.vnv-compacto .vnb + .vnb, .vnv-compacto .vnv-col > .vnb + .vnv-unidad { margin-top: 6px; }
.vnv-compacto .vnb .per-campo { grid-template-columns: 112px 1fr; gap: 7px; }
.vnv-compacto .vnb .per-campo > span { font-size: 10.5px; }
.vnv-compacto .vnb .per-campo > input,
.vnv-compacto .vnb .per-campo > select,
.vnv-compacto .vnb .cat-disparador,
.vnv-compacto .vnv-mesanio input {
min-height: 25px; padding: 3px 7px; font-size: 11.5px; border-radius: 6px;
}
.vnv-compacto .per-campo--calc strong { min-height: 25px; padding: 3px 7px; font-size: 12.5px; }
.vnv-compacto .vnb .com-ayuda { font-size: 10.5px; line-height: 1.25; }
.vnv-compacto .vnv-consultas { padding: 3px 6px 3px 8px; gap: 4px; }
.vnv-compacto .vnv-consultas-tit { font-size: 10px; }
.vnv-compacto .lu-btn--sm { padding: 2px 6px; font-size: 10px; }
.vnv-compacto .per-pie { padding: 7px 12px; }
.vnv-compacto .vnp-cab { padding: 4px 8px; font-size: 10.5px; }
.vnv-compacto .vnp-hero { min-height: 42px; padding: 6px 8px; gap: 8px; }
.vnv-compacto .vnp-interno { font-size: 14px; padding: 2px 8px; min-width: 54px; }
.vnv-compacto .vnp-interno-input { height: 26px; width: 76px; font-size: 13px; }
.vnv-compacto .vnp-hero strong { font-size: 11.5px; }
.vnv-compacto .vnp-hero p { font-size: 10px; }
.vnv-compacto .vnp-cuerpo { padding: 0 8px; }
.vnv-compacto .vnp-grupo + .vnp-grupo { margin-top: 4px; }
.vnv-compacto .vnp-grupo h5 { font-size: 10px; padding: 4px 0 2px; }
.vnv-compacto .vnp-lista > div { min-height: 19px; padding: 2px 0; }
.vnv-compacto .vnp-lista dt { font-size: 10.5px; }
.vnv-compacto .vnp-lista dd { font-size: 10.5px; }
.vnv-compacto .vnp-sindato { font-size: 10.5px; }
.vnv-compacto .vnv-unidad .vnv-nota { padding: 5px 8px 7px; font-size: 10.5px; }
/* En claro, los bloques y el panel se apoyan sobre blanco */
.vnv-modal.mo-claro .vnb { background: #ffffff; border-color: #dde3ea; }
.vnv-modal.mo-claro .vnb .per-campo > span { color: #000; }
.vnv-modal.mo-claro .vnv-unidad.pnl-existente { background: color-mix(in srgb, var(--vnv-marca) 8%, #ffffff); }
.vnv-modal.mo-claro .vnp-grupo h5 { color: var(--text); }
.vnv-modal.mo-claro .vnp-lista dt { color: var(--text); }
.vnv-modal.mo-claro .vnp-lista dd b { color: #000; }
.vnv-modal.mo-claro .vnv-cliente { background: color-mix(in srgb, #b87510 8%, #ffffff); }
/* ---- Buscadores: son la puerta de entrada, tienen que verse ---- */
.vnv-compacto .vnv-buscador { padding: 9px 12px 8px; }
.vnv-modal .bap-input,
.vnl-buscar,
.vnv-compacto .bap-input {
height: 38px; padding: 0 13px; font-size: 14px; font-weight: 600;
border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca, #6c7684)) 55%, transparent);
background: color-mix(in srgb, var(--vnv-marca, #6c7684) 7%, transparent);
}
.vnv-modal .bap-input::placeholder, .vnl-buscar::placeholder { font-size: 13px; opacity: .75; }
.vnv-modal .bap-input:hover, .vnl-buscar:hover { border-color: var(--vnv-marca-luz, var(--vnv-marca, #6c7684)); }
.vnv-modal .bap-input:focus, .vnl-buscar:focus {
outline: none; border-color: var(--accent-amber, #f2c200);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-amber, #f2c200) 26%, transparent);
}
.mo-claro .vnv-modal .bap-input, .mo-claro .vnl-buscar { background: #ffffff; }
.vnv-modal.mo-claro .bap-input { background: #ffffff; }
.vnl-barra .vnl-buscar { min-width: 260px; }
/* Elegir columnas del listado */
.vnl-columnas {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 8px 14px 0; padding: 8px 10px;
border: 1px solid #2c333d; border-radius: 8px; background: rgba(255,255,255,.03);
}
.vnl-col-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; }
.vnl-col-chk input { width: 14px; height: 14px; accent-color: var(--accent-amber, #f2c200); }
.vnl-col-chk--fija { opacity: 1; cursor: default; }
.vnl-col-nota { font-size: 12px; color: var(--text); font-style: italic; margin-left: auto; }
.mo-claro .vnl-columnas { background: #f6f8fb; border-color: #d9dee5; }
/* ---- Consulta de ventas: buscador grande, con la lista siempre a la vista ---- */
.vnd-barra { align-items: flex-start; gap: 12px; }
.vnd-busca { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.vnd-buscar { width: 100%; height: 44px; font-size: 15px; padding: 0 14px; }
.vnd-sug {
display: flex; flex-wrap: wrap; gap: 5px; max-height: 108px; overflow-y: auto;
padding: 2px 0;
}
.vnd-sug-op {
padding: 5px 11px; border-radius: 999px; font-size: 12px; font-family: inherit;
background: transparent; color: var(--text, #c9d2e0); border: 1px solid #3b4450; cursor: pointer;
white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.vnd-sug-op:hover, .vnd-sug-op--foco {
border-color: var(--accent-amber, #f2c200); color: var(--text);
background: color-mix(in srgb, var(--accent-amber, #f2c200) 14%, transparent);
}
.vnd-sug-vacio { font-size: 12px; color: var(--text); font-style: italic; padding: 4px 2px; }
.vnd-elegido {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
height: 44px; padding: 0 8px 0 14px; border-radius: 8px;
border: 1.5px solid var(--accent-amber, #f2c200);
background: color-mix(in srgb, var(--accent-amber, #f2c200) 12%, transparent);
}
.vnd-elegido span {
font-size: 15px; font-weight: 700; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vnd-tabs { height: 44px; }
.vnd-tab { height: 42px; font-size: 13px; padding: 0 16px; }
.mo-claro .vnd-sug-op { color: #000; border-color: #ccd3dc; }
.mo-claro .vnd-buscar { background: #ffffff; }
/* Los buscadores de los listados, del mismo tamaño que este */
.vnl-buscar { height: 44px; font-size: 15px; padding: 0 14px; }
.vnv-modal .bap-input { height: 44px; font-size: 15px; padding: 0 14px; }
.vnv-modal .bap-input::placeholder, .vnl-buscar::placeholder { font-size: 13.5px; }
/* Aviso de ámbito de la solapa abierta en Tablas. Va al final del bloque a
propósito: puesto antes, las reglas de .com-ayuda de arriba lo pisaban. */
.abm-modal .abm-ambito {
padding: 6px 10px; margin: 0 0 8px;
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #262c35);
border-left: 3px solid #2f4358; border-radius: 8px;
}
.abm-modal .abm-ambito .com-ayuda { font-size: 12px; line-height: 1.45; }
.abm-modal .abm-ambito b { color: inherit; }
/* rt · Tablas en listas (Marcas → Modelos → Versiones). Cada lista se
elige tocando y abajo tiene las mismas acciones. */
.abm3 { display: flex; flex-direction: column; gap: 8px; }
.abm3-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
height: max(260px, calc(calc(100dvh / var(--tcg-z, 1)) - 480px)); } /* xd: las solapas ocupan dos renglones */
.abm3-cols--una { grid-template-columns: minmax(0, 560px); }
.abm3-col { display: flex; flex-direction: column; min-height: 0;
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f); border-radius: 10px; overflow: hidden; }
.abm3-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 11px; font-size: 13px; border-bottom: 1px solid var(--border, #252d3f); color: var(--text, #ecf0f4); }
.abm3-cab b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abm3-n { font-size: 12px; padding: 0 7px; border-radius: 10px; background: rgba(127,127,127,.16); }
.abm3-lista { flex: 1 1 auto; overflow: auto; padding: 4px; min-height: 0; }
.abm3-vacio { padding: 14px 10px; font-size: 12.5px; color: var(--text); }
.abm3-it { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
padding: 7px 9px; margin: 0 0 2px; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
color: var(--text, #ecf0f4); background: transparent; border: 1px solid transparent; border-radius: 7px; }
.abm3-it:hover { background: rgba(127,127,127,.10); }
.abm3-it--sel { background: rgba(242,194,0,.14); border-color: var(--accent-amber, #f2c200); font-weight: 700; }
.abm3-it--rep .abm3-nom { color: var(--text); }
.abm3-it--pend .abm3-nom { font-style: italic; color: var(--text); }
.abm3-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abm3-sub { flex: 0 0 auto; font-size: 12px; font-weight: 400; color: var(--text); }
.abm3-rep { margin-left: 6px; padding: 0 6px; border-radius: 10px; font-size: 12px; font-weight: 700;
color: #000; background: #e8a23d; vertical-align: 1px; }
.abm3-pie { flex: 0 0 auto; padding: 8px 10px; border-top: 1px solid var(--border, #252d3f);
display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text, #ecf0f4); }
.abm3-elegido { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abm3-botones { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.abm3-botones .lu-btn { font-size: 12px; }
.abm3-editor { display: flex; flex-direction: column; gap: 6px; }
.abm3-ed-lbl { font-size: 12px; color: var(--text); }
.abm3-input { width: 100%; box-sizing: border-box; padding: 6px 9px; font: inherit; font-size: 13px; color: inherit;
background: var(--panel-3, #1e242c); border: 1px solid var(--accent-amber, #f2c200); border-radius: 7px; }
.abm3-une { font-size: 12px; color: var(--text); }
.abm3-repetidos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 11px;
font-size: 12.5px; color: var(--text, #ecf0f4);
background: rgba(232,162,61,.10); border: 1px solid rgba(232,162,61,.55); border-radius: 9px; }
.abm3-rep-tx { flex: 1 1 260px; }
.abm3-ayuda { margin: 0; font-size: 12px; }
/* ══ rv · MODAL DE VENTAS «A» (08/10/2026, Ramiro eligió la A: «más prolijo»).
Mismo orden y mismas tarjetas; menos aire entre renglones, títulos y
buscador más finos y la tarjeta de Usado alineada con las demás. Con los
renglones dobles y la unidad en dos columnas, la letra llega a ~13,7 px en
un monitor de 1366 × 768 (antes 8,4). ══ */
.vnv-fijo .vnv-buscador { padding: 4px 8px !important; }
.vnv-fijo .vnvb-caja { padding: 2px 4px 2px 0 !important; }
.vnv-fijo .bap-input { height: 36px !important; font-size: 17px; }
.vnv-fijo .vnvb-pill { height: 32px !important; min-height: 0 !important; }
.vnv-fijo .vnvb-pill--doble > button { height: 30px !important; min-height: 0 !important; }
.vnv-fijo .per-cab { padding: 4px 10px !important; }
.vnv-fijo .vnb-cab { padding: 3px 12px !important; min-height: 0 !important; }
.vnv-fijo .vnb-cab h4 { font-size: 16px; }
.vnv-fijo .vnb-body { padding: 5px 12px 5px !important; gap: 3px !important; }
.vnv-fijo .vnb .per-campo { grid-template-rows: 28px !important; min-height: 0 !important; }
.vnv-fijo .vnb .per-campo > span:first-child { font-size: 17px; }
.vnv-fijo .vnb .per-campo input, .vnv-fijo .vnb .per-campo select, .vnv-fijo .vnb .per-campo output,
.vnv-fijo .vnb .cat-disparador, .vnv-fijo .vnb .vnv-usado-txt { height: 28px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 17px; }
.vnv-fijo .vnb .lu-btn--sm { height: 26px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.vnv-fijo .vnv-cargar-usado { height: 24px !important; padding: 0 10px !important; }
.vnv-fijo .vnv-cuerpo { gap: 6px !important; padding: 6px 8px !important; }
.vnv-fijo .per-pie { padding: 5px 12px !important; }
.vnv-fijo .per-pie .lu-btn, .vnv-fijo .per-pie button { min-height: 0 !important; height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* La tarjeta de Usado tenía su título metido para adentro y más alto que los demás. */
.vnv-fijo .vnb.vnv-usado { padding: 0 !important; gap: 0 !important; }
.vnv-fijo .vnb.vnv-usado > .vnb-body { padding: 5px 12px !important; }
.vnv-fijo .vnv-cargar-usado { height: 22px !important; font-size: 11px; line-height: 1 !important; }
.vnv-fijo .vnv-usado > .vnb-cab { padding-top: 3px !important; padding-bottom: 3px !important; min-height: 0 !important; }
.vnv-fijo .vnv-usado .vnv-cargar-usado { min-height: 0 !important; height: 22px !important; padding: 0 8px !important; margin: 0 !important; }
/* ry: la ficha de la unidad en UNA columna, con 9 datos (Ramiro, 08/10). */
@media (min-width: 900px) {
.vnv-fijo .vnv-unidad .vnp-cab { padding: 3px 12px !important; min-height: 0 !important; }
.vnv-fijo .vnv-unidad .vnp-hero { padding: 3px 10px !important; }
.vnv-fijo .vnv-unidad .vnp-hero p { display: none !important; }
.vnv-fijo .vnv-unidad .vnp-cuerpo { padding: 0 12px 4px !important; overflow: hidden !important; }
.vnv-fijo .vnv-unidad .vnp-grupo > h5 { display: none !important; }
.vnv-fijo .vnv-unidad .vnp-lista > div { padding: 2px 0 !important; border-bottom: 1px dashed rgba(127,127,127,.25); }
.vnv-fijo .vnv-unidad .vnp-lista dt { font-size: 14px; }
.vnv-fijo .vnv-unidad .vnp-lista dd { font-size: 15px; }
}
/* Renglón doble: rótulo · caja · rótulo · caja. Los controles son hijos
directos del renglón, así toman la misma caja que todos los demás, y la
primera columna mide lo mismo que en los renglones simples: queda alineado. */
.vnv-fijo .vnb .per-campo.per-campo--par { grid-template-columns: min(182px, 40%) minmax(0, 1fr) auto minmax(0, 1fr) !important; }
.vnv-fijo[data-fuente-on="1"] .vnb .per-campo.per-campo--par { grid-template-columns: min(calc(182px * var(--vnv-f, 1)), 46%) minmax(0, 1fr) auto minmax(0, 1fr) !important; }
.vnv-fijo .vnb .per-campo--par > * { min-width: 0; }
.vnv-fijo .vnb .per-campo--par > .vnv-par-rot { font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: normal; white-space: nowrap; padding: 0 2px; }
.vnv-fijo .vnb .per-campo--par > input { height: 28px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 17px; width: 100%; box-sizing: border-box; }
@media (max-width: 899px) {
.vnv-fijo .vnb .per-campo.per-campo--par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.vnv-fijo .vnb .per-campo--par > span:first-child, .vnv-fijo .vnb .per-campo--par > .vnv-par-rot { grid-column: auto; }
}
/* rx · Cuentas corrientes */
.ctc-cuerpo .pvx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ctc-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ctc-dos > * { min-width: 0; }
.ctc-tabla td, .ctc-tabla th { white-space: nowrap; padding-left: 7px; padding-right: 7px; }
.ctc-bloque .ctc-tabla { width: 100%; }
.ctc-tabla { font-variant-numeric: tabular-nums; }
.ctc-tabla th { text-align: right; } .ctc-tabla th:first-child { text-align: left; }
.ctc-n { text-align: right; }
.ctc-p { text-align: right; color: var(--text); font-size: 12px; }
.ctc-p--mal { color: #ef8b8b !important; font-weight: 700; }
.mo-claro .ctc-p--mal { color: #b42323 !important; }
.ctc-total td { font-weight: 800; border-top: 2px solid currentColor; }
.ctc-aum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 12.5px; color: var(--text); }
.ctc-aum-m { display: inline-flex; align-items: center; gap: 4px; }
.ctc-aum .ctc-aum-in { width: 64px !important; min-width: 0; flex: 0 0 64px; text-align: right; padding: 2px 6px; height: 26px; box-sizing: border-box; }
.ctc-mes { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ctc-mes-sel { padding: 3px 8px; }
.ctc-cli { text-align: left; padding: 0; font-weight: 600; }
.ctc-wsp { padding: 2px 10px; }
.ctc-tabla-deu td:first-child { white-space: normal; min-width: 180px; }
.ctc-cli-sel { max-width: 360px; }
.ctc-mes-carga { max-width: 200px; }
@media (max-width: 900px) {
.ctc-cuerpo .pvx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ctc-dos { grid-template-columns: 1fr; }
}
/* rv · Servicios conectados (Ginza) */
.sc-cuerpo .pvx-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sc-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0; }
.sc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.sc-chips .mc-chip b { margin-left: 4px; font-weight: 800; }
.sc-buscar { flex: 1 1 260px; min-width: 0; max-width: 460px; }
.sc-fila { cursor: pointer; }
.sc-fila:hover td { background: rgba(127,127,127,.08); }
.sc-fila--sel td { background: rgba(242,194,0,.14) !important; }
.sc-fila--fuera td { opacity: 1; }
.sc-tabla-caja { overflow-x: auto; }
.sc-tabla td, .sc-tabla th { white-space: nowrap; }
.sc-tabla td:nth-child(3), .sc-tabla td:nth-child(4) { white-space: normal; min-width: 130px; }
.sc-tabla td, .sc-tabla th { padding-left: 7px; padding-right: 7px; }
.sc-tabla { font-size: 12.5px; }
.sc-tabla th { font-size: 13px; }
.sc-estado--gestion { background: rgba(232,162,61,.14); color: var(--text); }
.mo-claro .sc-estado--gestion { color: #000; }
.sc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.sc-estado { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap;
background: rgba(127,127,127,.18); color: var(--text); }
.sc-estado--activo { background: rgba(80,180,120,.18); color: var(--text); }
.sc-estado--sin { background: rgba(239,107,107,.16); color: #ef8b8b; }
.sc-estado--fugado { background: rgba(232,162,61,.18); color: var(--text); }
.sc-estado--entregreventa { background: rgba(90,162,232,.18); color: var(--text); }
.mo-claro .sc-estado--activo { color: #000; }
.mo-claro .sc-estado--sin { color: #b42323; }
.mo-claro .sc-estado--fugado { color: #000; }
.mo-claro .sc-estado--entregreventa { color: #000; }
.sc-wsp-fila { padding: 2px 10px; }
.sc-ficha-grilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 2fr); gap: 8px; margin: 6px 0 8px; }
.sc-ficha .pvx-fila { justify-content: space-between; flex-wrap: wrap; }
.sc-msj { width: 100%; box-sizing: border-box; }
.sc-subir { display: inline-flex; align-items: center; cursor: pointer; }
.sc-previa { margin-top: 10px; }
.sc-tabla-ind td, .sc-tabla-ind th { text-align: right; }
.sc-tabla-ind td:first-child, .sc-tabla-ind th:first-child { text-align: left; }
@media (max-width: 900px) {
.sc-cuerpo .pvx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-ficha-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* rt · Compañías de seguro */
.seg-cuerpo .pvx-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.seg-filtro { flex-direction: row; align-items: center; gap: 6px; }
/* rx · bloque del filtro y «+ Nuevo siniestro» (va antes que .pvx-bloque y
.pvx-campo en la hoja: por eso los selectores llevan .seg-cuerpo). */
.seg-cuerpo .seg-acciones { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
border: 1px solid color-mix(in srgb, var(--casa, #2f6fbf) 70%, transparent);
background: color-mix(in srgb, var(--casa, #2f6fbf) 12%, var(--panel, #161c29)); }
.tcg-claro .seg-cuerpo .seg-acciones { background: color-mix(in srgb, var(--casa, #2f6fbf) 7%, #ffffff); }
.seg-cuerpo .seg-acciones .seg-filtro { flex-direction: row; align-items: center; gap: 8px; }
.seg-cuerpo .seg-acciones .seg-filtro span { font-size: 13px; font-weight: 700; color: var(--text, #e6eaf0); }
.tcg-claro .seg-cuerpo .seg-acciones .seg-filtro span { color: #000; }
.seg-cuerpo .seg-acciones .seg-filtro .pvx-in { height: 34px; min-width: 200px; }
.seg-cuerpo .seg-acciones .seg-nuevo { margin-left: auto; height: 34px; min-width: 170px; }
.seg-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.seg-grilla--veh { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.seg-fila { cursor: pointer; }
.seg-fila:hover td { background: rgba(127,127,127,.08); }
.seg-fila--sel td { background: rgba(242,194,0,.14) !important; }
.seg-tabla-sin { max-height: 300px; overflow: auto; }
.seg-tabla-rep { max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 380px); overflow: auto; }
.seg-hoy { color: var(--text); font-weight: 700; }
.seg-vencido { color: #ef6b6b; font-weight: 700; }
.seg-estado { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.seg-estado--pendiente { background: rgba(239,107,107,.16); color: #ef8b8b; }
.seg-estado--cotizando { background: rgba(232,162,61,.18); color: var(--text); }
.seg-estado--cotizada { background: rgba(80,180,120,.18); color: var(--text); }
.seg-estado--enviada { background: rgba(127,127,127,.18); color: var(--text); }
.mo-claro .seg-estado--pendiente { color: #b42323; }
.mo-claro .seg-estado--cotizando, .mo-claro .seg-hoy { color: #000; }
.mo-claro .seg-estado--cotizada { color: #000; }
.mo-claro .seg-vencido { color: #b42323; }
.seg-piezas { table-layout: fixed; width: 100%; }
.seg-piezas td { padding: 3px 4px; }
/* sa · 11 columnas: código, descripción, cant., público, margen, % desc., Orion, disponibilidad, origen, confirmada, quitar. */
.seg-piezas-viejo th:nth-child(1) { width: 122px; }
.seg-piezas-viejo th:nth-child(2) { width: auto; }
.seg-piezas-viejo th:nth-child(3) { width: 48px; }
.seg-piezas-viejo th:nth-child(4) { width: 104px; }
.seg-piezas-viejo th:nth-child(5) { width: 62px; }
.seg-piezas-viejo th:nth-child(6) { width: 54px; }
.seg-piezas-viejo th:nth-child(7) { width: 112px; }
.seg-piezas-viejo th:nth-child(8) { width: 124px; }
.seg-piezas-viejo th:nth-child(9) { width: 104px; }
.seg-piezas-viejo th:nth-child(10) { width: 84px; }
.seg-piezas-viejo th:nth-child(11) { width: 38px; }
.seg-piezas th { font-size: 13px; white-space: normal !important; line-height: 1.15; }
.seg-piezas td:nth-child(1) .pvx-in, .seg-piezas td:nth-child(2) .pvx-in { text-align: left; }
.seg-subir { display: inline-flex; align-items: center; }
.seg-piezas .pvx-in { width: 100%; box-sizing: border-box; min-width: 0; }
.seg-in-cod { min-width: 110px !important; }
.seg-in-n { max-width: 64px; text-align: center; }
.seg-in-plata { max-width: 120px; text-align: right; }
.seg-de-lista { border-color: rgba(80,180,120,.6) !important; }
.seg-de-dicc { border-color: rgba(90,162,232,.7) !important; }
/* rf: a confirmar, discontinuada, fecha de la consulta */
.seg-pieza--conf td { background: rgba(224,166,58,.13); }
.seg-confirmar { background: #e0a63a !important; border-color: #e0a63a !important; color: #000 !important; font-weight: 700; padding: 3px 10px !important; }
.seg-conf-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; opacity: 1; cursor: pointer; white-space: nowrap; }
.seg-conf-td { text-align: center; }
.seg-disp-fecha { display: block; font-size: 12px; opacity: 1; margin-top: 2px; white-space: nowrap; }
.seg-disc { color: #c0392b !important; font-weight: 700; }
.seg-viejo { margin: 6px 0; }
.crm-scroll-arriba { overflow-x: auto; overflow-y: hidden; height: 14px; margin: 4px 0 2px; }
.crm-env-emisor { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: rgba(34,197,94,.14); color: var(--text); }
.crm-env-emisor--falta { background: rgba(224,166,58,.18); color: var(--text); }
.comu-emisor .pvx-campos { align-items: flex-end; }
.comu-emisor-ok { align-self: center; }
/* rg: fotos del perito, reemplazos, devoluciones */
.seg-fotos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.seg-fotos-tit { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.seg-foto { position: relative; display: inline-flex; }
.seg-foto-mini { position: relative; padding: 0; border: 1px solid rgba(127,127,127,.4); border-radius: 6px; overflow: hidden; width: 64px; height: 48px; background: #000; cursor: zoom-in; }
.seg-foto-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seg-foto-mini b { position: absolute; left: 3px; bottom: 2px; font-size: 12px; color: #fff; background: rgba(0,0,0,.55); border-radius: 4px; padding: 0 4px; }
.seg-foto-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0 !important; border-radius: 50%; font-size: 12px; line-height: 1; }
.seg-fotos-agregar { cursor: pointer; }
.seg-foto-grande { cursor: zoom-out; display: flex; align-items: center; justify-content: center; }
.seg-foto-grande img { max-width: calc(92vw / var(--tcg-z, 1)); max-height: calc(90vh / var(--tcg-z, 1)); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.seg-piezas td { white-space: normal !important; vertical-align: top; }
.seg-piezas td > .pvx-in, .seg-piezas td > select.pvx-in { display: block; }
.seg-piezas .seg-conf-ok input[type=checkbox] { width: 16px !important; height: 16px !important; min-width: 0 !important; margin: 0; }
.seg-piezas .seg-conf-td { vertical-align: middle; }
.seg-pz-foto { display: flex !important; }
.seg-in-equiv { margin-top: 3px; font-size: 12px !important; height: 24px !important; opacity: 1; }
.seg-precio-de { display: block; font-size: 12px; color: #000; margin-top: 2px; }
.seg-pz-foto { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; }
.seg-pz-mini { padding: 0; border: 1px solid rgba(127,127,127,.4); border-radius: 4px; overflow: hidden; width: 34px; height: 26px; cursor: zoom-in; background: #000; }
.seg-pz-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seg-pz-foto-sel { font: inherit; font-size: 12px; padding: 1px 4px; border-radius: 4px; border: 1px solid rgba(127,127,127,.4); background: transparent; color: inherit; }
.seg-devuelta { color: #c0392b; font-weight: 700; opacity: 1; }
.seg-devs { margin: 6px 0 10px; }
.seg-sug { display: block; margin-top: 3px; padding: 1px 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
color: var(--text); background: rgba(90,162,232,.12); border: 1px solid rgba(90,162,232,.45); border-radius: 10px; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-claro .seg-sug { color: #000; }
.seg-pieza--falta td:first-child { box-shadow: inset 3px 0 0 #e8a23d; }
.seg-quitar { padding: 2px 8px; }
.seg-pegar-caja { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.seg-pegar-tx { width: 100%; box-sizing: border-box; font-family: inherit; }
.seg-totales { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 10px 0; }
.seg-total { margin-left: auto; font-size: 15px; }
.seg-total b { font-size: 18px; margin-left: 6px; }
.seg-acciones { justify-content: flex-end; flex-wrap: wrap; }
.seg-acciones .pvx-nota { margin-right: auto; }
.seg-buscar { width: min(420px, 100%); margin: 6px 0; }
.seg-subir { cursor: pointer; }
@media (max-width: 900px) {
.seg-cuerpo .pvx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg-grilla--veh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mo-claro .abm3-en-uso, .mo-claro .abm3-une, .mo-claro .abm3-it--rep .abm3-nom { color: #000; }
.mo-claro .abm3-en-uso { background: #fbefd2; }
@media (max-width: 760px) {
.abm3-cols { grid-template-columns: 1fr; height: auto; }
.abm3-lista { max-height: 260px; }
}
.mo-claro .abm-ambito { background: #f2f5f9; border-color: #d6dde6; border-left-color: #8fb6d8; }
/* Alta encadenada marca · modelo · versión */
.veh-alta {
display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
padding: 9px 10px; margin-bottom: 9px;
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #262c35); border-radius: 8px;
}
.veh-alta .per-campo { flex: 1 1 150px; min-width: 130px; margin: 0; }
.veh-alta .per-campo input { width: 100%; }
.veh-alta-ayuda { flex: 1 1 100%; }
.mo-claro .veh-alta { background: #f2f5f9; border-color: #d6dde6; }
/* Árbol de vehículos */
.abm-arbol .abm-fila--marca td {
background: var(--panel-3, #1e242c); font-size: 13px; letter-spacing: .3px;
border-top: 1px solid #2f3742;
}
.abm-arbol .abm-celda-modelo { padding-left: 18px; font-weight: 600; }
.abm-arbol .abm-fila--version td:nth-child(2) { padding-left: 36px; color: var(--text); }
.abm-arbol .abm-version-pend { color: var(--text); font-style: italic; }
.mo-claro .abm-arbol .abm-fila--marca td { background: #e8edf3; }
/* Separar modelo y versión */
.ord-check { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.ord-tabla .ord-input {
width: 100%; min-width: 90px; background: var(--panel-3, #1e242c);
border: 1px solid var(--border, #252d3f); border-radius: 6px; padding: 4px 7px;
color: inherit; font-size: 12px; text-transform: uppercase;
}
.ord-tabla .ord-input--falta { border-color: #7a5a2a; background: var(--panel-2, #2a2418); }
.ord-tabla .ord-fila--duda td:first-child { border-left: 3px solid #e0c58a; }
.mo-claro .ord-tabla .ord-input { background: #ffffff; border-color: #ccd3dc; }
.mo-claro .ord-tabla .ord-input--falta { background: #fdf6e6; border-color: #d8b877; }
.ord-resultado {
display: flex; align-items: flex-start; gap: 10px; justify-content: space-between;
margin: 0 14px 8px; padding: 8px 11px; font-size: 12px; line-height: 1.5;
background: rgba(111,191,138,0.10); border: 1px solid #2f5a41;
border-left: 3px solid #6fbf8a; border-radius: 8px;
}
.ord-resultado--error { background: rgba(224,138,138,0.10); border-color: #5a2f2f; border-left-color: #e08a8a; }
.ord-resultado button { flex: none; }
.mo-claro .ord-resultado { background: #eef7f1; border-color: #cfe3d6; border-left-color: #4c9d70; }
.mo-claro .ord-resultado--error { background: #fdeeee; border-color: #e6cfcf; border-left-color: #c25b5b; }
/* Elegir 0km o usado antes de abrir el modal de venta */
.rvl-elegir { width: min(520px, calc(94vw / var(--tcg-z, 1))); }
.rvl-opciones { display: flex; gap: 12px; padding: 4px 14px 10px; }
.rvl-op {
flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center;
padding: 18px 12px; cursor: pointer; font: inherit; color: inherit;
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f); border-radius: 10px;
}
.rvl-op:hover:not(:disabled) { border-color: var(--amber, #e0a458); background: var(--panel-3, #1e242c); }
.rvl-op:disabled { opacity: .5; cursor: default; }
.rvl-op-tit { font-size: 17px; font-weight: 700; letter-spacing: .3px; }
.rvl-op-sub { font-size: 12px; color: var(--text); }
.rvl-nota { display: block; padding: 0 14px 14px; line-height: 1.5; }
.rvl-aviso { pointer-events: none; position: fixed; left: 50%; transform: translateX(-50%); top: 14px; z-index: 1200; }
/* Alta del usado retomado. Modal chico y de una sola columna: rótulo a la
izquierda y campo a la derecha, como el sistema de referencia. Todo un punto
más chico que el resto de la app: es una carga corta y de paso, no una
pantalla donde uno se queda. */
/* 505px y no 392: Ramiro pidió tres centímetros más de ancho —unos 113px a
96 puntos por pulgada— porque quedaba muy angosto. El «min» con 95vw se
mantiene para que en el teléfono siga entrando. */
.ret-modal { width: min(505px, calc(95vw / var(--tcg-z, 1))); display: flex; flex-direction: column; font-size: 12px; }
/* El rótulo de sección con su botón a la derecha. */
.ret-seccion--conbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Los cuatro canales de compra en UN renglón: son excluyentes y verlos juntos
deja claro que se elige uno. Con el modal más ancho ahora entran. */
.ret-canal .ret-tildes { flex-wrap: nowrap; }
.ret-canal .ret-tilde { min-width: 0; flex: 1 1 0; padding: 3px 6px; }
.ret-canal .ret-tilde span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El renglón del usado en parte de pago: dice qué auto tiene la venta —o que
no tiene— y al lado el botón que abre el modal. Antes acá había un
desplegable con los peritajes, que dejaba elegir un auto sin poder
completarlo. */
/* Los peritajes sin tomar, a la vista al abrir el modal: son pocos y hay que
ver si hay alguno sin tener que adivinar que se puede buscar. */
.ret-peritados { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ret-peritados-tit { font-size: 12px; color: var(--text); width: 100%; }
.ret-peritados-mas { font-size: 12px; color: var(--text); }
/* Por qué falta cada peritaje. Un renglón por auto: se lee de arriba abajo. */
.ret-peritados-motivo { width: 100%; font-size: 12px; color: var(--text); }
.ret-peritados-motivo b { color: var(--text, #ecf0f4); font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }
/* ── LAS VISTAS DE LA PANTALLA, EN EL ENCABEZADO ────────────────────
OJO: esto no elige concesionario —eso lo hace el selector único del menú—.
Son las vistas propias de una pantalla, como los dos unificados de la
Liquidación. Va pegado al título porque dice de QUÉ se está mirando.
La tinta sale de «--casa-tinta», que es la que el encabezado ya calculó
para ir sobre la banda de la casa: en Jorge Giorgi el amarillo pide tinta
oscura y en las otras dos, clara. Usar un color fijo acá es exactamente el
error que dejaba los botones del buscador invisibles en dos casas. */
.enc-vistas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* ── SIN HUECOS ENTRE EL ENRUTADOR, EL ENCABEZADO Y EL TRABAJO ──────
Pedido de Ramiro: los botones van DENTRO del encabezado y no tiene que
sobrar aire entre las tres bandas. El encabezado se pega arriba y abajo, y
la barra de la pantalla —que antes flotaba con su propio margen— se apoya
contra él. */
.tcg-lienzo .tcg-envoltura { margin: 0 0 8px; border-radius: 0 0 10px 10px; }
/* LA FRANJA QUE CIERRA LA CAJA ABAJO (23/09/2026). El encabezado de la
pantalla queda pegado arriba y la caja terminaba en el aire: una línea del
color de la casa la cierra. Va en el «::after» del lienzo y no en un
elemento propio, porque el tablero tiene varios ternarios anidados y un div
que los cruce no cierra donde abre. */
.tcg-lienzo-pad:has(> .tcg-envoltura)::after {
content: ""; display: block; height: 4px; margin-top: -4px;
border-radius: 0 0 10px 10px;
background: var(--casa-activa, var(--accent-blue, #4f8ef7)); opacity: 1;
}
.tcg-lienzo .tcg-envoltura + .ivj-toolbar,
.tcg-lienzo .tcg-envoltura + .lc-panel > .ivj-toolbar { margin-top: 0; }
.lc-panel > .tcg-envoltura { margin-bottom: 8px; }
/* La barra de acciones de la pantalla pierde el margen de arriba: el aire lo
pone el encabezado, una sola vez, y no cada bloque por su cuenta. */
.ivj-toolbar { margin-top: 0; }
.enc-vista {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 11px; border-radius: 999px; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
color: var(--casa-tinta, #ecf0f4);
background: color-mix(in srgb, var(--casa-tinta, #ecf0f4) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--casa-tinta, #ecf0f4) 35%, transparent);
}
.enc-vista:hover { background: color-mix(in srgb, var(--casa-tinta, #ecf0f4) 20%, transparent); }
/* La elegida se rellena con la tinta y escribe con el color de la banda: es
el mismo gesto de la pastilla encendida del buscador. */
.enc-vista--on {
background: var(--casa-tinta, #ecf0f4);
color: var(--casa, #14181d);
border-color: var(--casa-tinta, #ecf0f4);
}
/* Sin punto de color: no son casas. */
.enc-vista-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--casa-punto, currentColor); flex: none; }
.enc-vista--on .enc-vista-punto { box-shadow: 0 0 0 1px color-mix(in srgb, var(--casa, #14181d) 45%, transparent); }
/* «Unificado» no tiene punto: no es una casa, es la suma de las tres. */
/* «Sin peritar» en la columna «Cuándo» de la tabla de pendientes: ocupa el
mismo lugar que la pastilla de momento de la tabla de arriba, pero apagado,
porque no es un momento sino la falta de uno. */
.per-sin { color: var(--text); font-style: italic; }
/* La misma caja QUE LOS DEMÁS CAMPOS del modal, no una parecida. Antes usaba
«--panel-2» y un filo distinto, así que en las tres casas se veía de otro
color que «Importe usado», justo debajo. Ramiro lo reportó con foto. Ahora
copia exactamente la superficie, el filo y el alto de «.per-campo > input».*/
.vnv-usado-txt {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
display: block; min-height: 31px; padding: 5px 9px; line-height: 20px;
background: var(--bg, #10151c); color: var(--text, #e9eef6);
border: 1px solid #3b4450; border-radius: 8px; font-size: 13px;
}
.vnv-usado-txt:empty::before { content: "Sin usado"; color: var(--text); }
.ret-modal .per-titulo { font-size: 13.5px; }
.ret-cab { align-items: center; padding: 10px 12px 6px; }
.ret-quien {
margin: 0 12px 7px; padding: 4px 8px; font-size: 12px; line-height: 1.4;
color: var(--text); background: var(--panel-2, #161c2a);
border-radius: 6px; border-left: 3px solid var(--vnv-marca-luz, var(--vnv-marca, #6c7684));
}
.ret-quien b { color: inherit; font-weight: 700; }
.ret-seccion {
padding: 3px 8px; margin: 0 0 5px; border-radius: 6px;
background: var(--vnv-marca, #6c7684); color: var(--vnv-marca-txt, #fff);
font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.ret-body { padding: 0 12px; overflow: auto; max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 320px); }
.ret-linea { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ret-rot { flex: 0 0 104px; text-align: right; font-size: 12px; line-height: 1.2; color: var(--text); }
.ret-ctrl { flex: 1; min-width: 0; }
.ret-nota { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; }
/* Todos los controles del renglón, iguales. Van prefijados con .ret-modal
porque si no, la regla .vnv-modal .per-campo input (34px) le gana a los
desplegables y los inputs sueltos se quedan sin estilo y salen blancos. */
.ret-modal .ret-ctrl { display: block; }
.ret-modal .ret-ctrl .per-campo { display: block; width: 100%; margin: 0; }
.ret-modal .ret-ctrl .per-campo > span { display: none; }
.ret-modal .ret-ctrl input,
.ret-modal .ret-ctrl select,
.ret-modal .ret-ctrl .cat-disparador {
box-sizing: border-box; width: 100%; min-width: 0;
height: 27px; min-height: 27px; padding: 0 7px;
font-size: 13px; font-family: inherit; line-height: 25px;
background: var(--panel-2, #202940); border: 1px solid var(--border, #2c2f36); border-radius: 6px; color: var(--text, #c7cbd3);
}
.ret-modal .ret-ctrl input:focus,
.ret-modal .ret-ctrl .cat-disparador:focus { outline: none; border-color: var(--vnv-marca-luz, var(--vnv-marca, #6c7684)); }
.ret-modal .ret-ctrl .cvn-cat-elegir { display: flex; width: 100%; gap: 4px; align-items: center; }
.ret-modal .ret-ctrl .cvn-cat-elegir .cat-disparador { flex: 1 1 auto; }
.ret-modal .ret-ctrl .cvn-cat-alta { display: flex; width: 100%; gap: 4px; align-items: center; }
.ret-modal .ret-ctrl .lu-btn {
flex: 0 0 27px; width: 27px; height: 27px; min-height: 27px;
padding: 0; font-size: 13px; line-height: 25px; text-align: center;
}
/* El dominio es lo que identifica a un usado, así que se ve distinto al resto */
.ret-modal .ret-linea--dom .ret-rot { color: var(--text, #e6e9ee); font-weight: 700; }
.ret-modal .ret-linea--dom .ret-ctrl input {
height: 33px; min-height: 33px; line-height: 31px;
font-size: 14px; font-weight: 700; letter-spacing: 1.1px;
text-align: center; border-color: var(--vnv-marca-luz, var(--vnv-marca, #6c7684));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vnv-marca, #6c7684) 30%, transparent);
}
.ret-marcas { padding: 7px 12px 0; }
.ret-tildes { display: flex; flex-wrap: wrap; gap: 5px; }
/* Los cuatro canales entran en un solo renglón: son excluyentes y verlos
juntos es lo que deja claro que se elige uno. */
.ret-tildes--fila { flex-wrap: nowrap; }
.ret-tildes--fila .ret-tilde { min-width: 0; padding: 3px 6px; }
.ret-tildes--fila .ret-tilde span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ret-canal { margin-top: 6px; }
.ret-canal-tit {
display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700;
letter-spacing: .4px; text-transform: uppercase; color: var(--text);
}
.ret-tilde {
display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
padding: 3px 8px; font: inherit; font-size: 12px; line-height: 1.5;
/* «inherit» dejaba la letra a merced de lo que hubiera arriba: si el padre
era una franja de color, el tilde se llevaba una tinta que no combinaba
con su propio fondo. Ahora usa la del tema, igual que el fondo. */
color: var(--text, #ecf0f4);
white-space: nowrap;
background: var(--panel-3, #1e242c); border: 1px solid var(--border, #252d3f); border-radius: 6px;
}
.ret-tilde:hover { border-color: var(--vnv-marca-luz, var(--vnv-marca, #6c7684)); }
.ret-tilde-caja {
flex: none;
display: inline-flex; align-items: center; justify-content: center;
width: 13px; height: 13px; border-radius: 6px; font-size: 12px; font-weight: 700;
border: 1px solid #3a424e; background: transparent;
}
.ret-tilde--on { border-color: var(--vnv-marca-luz, var(--vnv-marca, #6c7684)); }
.ret-tilde--on .ret-tilde-caja {
background: var(--vnv-marca, #6c7684); color: var(--vnv-marca-txt, #fff); border-color: transparent;
}
.ret-pie { justify-content: flex-end; gap: 7px; padding: 9px 12px; }
.ret-pie .lu-btn { font-size: 12px; padding: 5px 11px; }
.mo-claro .ret-quien { background: #f2f5f9; }
.mo-claro .ret-tilde { background: #ffffff; border-color: #ccd3dc; }
.mo-claro .ret-tilde-caja { border-color: #ccd3dc; }
/* La pantalla de separar necesita más ancho y más alto que un modal común:
son seis columnas y tres de ellas se editan. Sin anchos fijos, la columna
del texto original se comía a las demás y los inputs se superponían. */
.ord-modal { width: min(1280px, calc(98vw / var(--tcg-z, 1))); }
.ord-tabla-wrap { max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 330px); }
.ord-tabla { table-layout: fixed; font-size: 12px; }
.ord-tabla th, .ord-tabla td { padding: 5px 8px; vertical-align: top; word-break: break-word; }
.ord-tabla th:nth-child(1), .ord-tabla td:nth-child(1) { width: 24%; }
.ord-tabla th:nth-child(2), .ord-tabla td:nth-child(2) { width: 15%; }
.ord-tabla th:nth-child(3), .ord-tabla td:nth-child(3) { width: 20%; }
.ord-tabla th:nth-child(4), .ord-tabla td:nth-child(4) { width: 25%; }
.ord-tabla th:nth-child(5), .ord-tabla td:nth-child(5) { width: 6%; text-align: right; }
.ord-tabla th:nth-child(6), .ord-tabla td:nth-child(6) { width: 10%; }
.ord-tabla .ord-celda-texto { line-height: 1.5; }
.ord-tabla .ord-ok { color: var(--text); margin-right: 5px; font-weight: 700; }
.ord-tabla .ord-fila--ok td:first-child { border-left: 3px solid transparent; }
.ord-tabla small.com-ayuda { display: block; margin-top: 3px; line-height: 1.35; }
/* ── PRUEBA: procesos como panel fijo en el centro ──────────────────────────
Dentro de .gv-panel-proceso, los overlays de las pantallas dejan de ser
ventanas flotantes y pasan a llenar el espacio libre del área de trabajo.
Para volver a las ventanas flotantes: borrar este bloque y la rama
panelProceso del render de GestionVentasModulo. */
.gv-root .gv-panel-proceso { flex: 1; min-width: 0; min-height: 0; display: flex; position: relative; }
.gv-root .gv-panel-proceso > * { flex: 1; min-width: 0; min-height: 0; display: flex; }
.gv-root .gv-panel-proceso > .per-overlay {
position: absolute; inset: 0; background: transparent; z-index: 1;
/* El aire de arriba y abajo hace que el panel no toque los bordes. */
padding: 8px 0 12px;
/* «flex-start» y no «stretch»: estirado, el modal tomaba el alto de la
pantalla aunque tuviera poco adentro, y quedaba un vacío largo entre las
tarjetas y el pie. Ahora el modal mide lo que mide su contenido; si no
entra, se desplaza por dentro contra el max-height.
Es lo que hacía que la misma pantalla se viera distinta al 75% y al 100%
de zoom: no cambiaba el modal, cambiaba cuánto sobraba. */
display: flex; align-items: flex-start; justify-content: center;
overflow: hidden;
}
.gv-root .gv-panel-proceso > .per-overlay > .per-modal {
width: 100%; max-width: none; max-height: 100%;
border: 0; border-radius: 0; box-shadow: none; background: transparent;
/* Sin esto el modal no puede achicarse por debajo de su contenido: la
tabla de gestoría lo empuja más ancho que el panel y se recorta. */
min-width: 0;
display: flex; flex-direction: column;
}
/* El panel tapa lo que hay atrás. Antes era transparente y sólo medía lo
que medía su contenido, así que debajo asomaba el menú del módulo y la
pantalla parecía cortada al medio. */
.gv-root .gv-panel-proceso > .per-overlay { background: var(--bg, #131824); }
/* La tabla se desplaza sola, sin arrastrar la barra de herramientas. Antes,
al correrla a la derecha se iba también el «⚙ Columnas». */
/* Las OCHO clases de cuerpo, no dos: cobranzas usa .com-cuerpo y por eso
su tabla desbordaba el modal y el overlay la recortaba al costado. */
.gv-root .gv-panel-proceso .per-modal > .per-cuerpo,
.gv-root .gv-panel-proceso .per-modal > .com-cuerpo,
.gv-root .gv-panel-proceso .per-modal > .vnp-cuerpo,
.gv-root .gv-panel-proceso .per-modal > .vnv-cuerpo,
.gv-root .gv-panel-proceso .per-modal > .acc-cuerpo,
.gv-root .gv-panel-proceso .per-modal > .cc-cuerpo,
.gv-root .gv-panel-proceso .per-modal > .mic-cuerpo,
.gv-root .gv-panel-proceso .per-modal > .abm-cuerpo { min-width: 0; overflow: auto; flex: 1; }
.gv-root .gv-panel-proceso .per-modal .per-cab,
.gv-root .gv-panel-proceso .per-modal .per-pie { flex: 0 0 auto; }
/* El cuerpo crece con lo que tiene adentro y se desplaza si no entra. */
.gv-root .gv-panel-proceso .vnv-cuerpo--2col { align-content: start; }
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .vnv-cuerpo {
flex: 0 1 auto; min-height: 0; overflow-y: auto;
}
/* El aviso flotante sí se queda arriba de todo. */
.gv-root .gv-panel-proceso .mp-aviso { position: absolute; top: 10px; right: 10px; z-index: 20; }
/* ── PRUEBA: Gestión de Ventas a pantalla completa ─────────────────────────
El módulo trae su propia barra con Salir, así que la franja de "Volver" de
arriba sólo gastaba alto. Se oculta y el módulo arranca pegado al borde.
Para volver atrás: borrar este bloque y el enGestionVentas de TCG. */
.back-btn--oculto { display: none; }
.app-shell--modulo { padding: 0 !important; max-width: none !important; height: calc(100dvh / var(--tcg-z, 1)); overflow: hidden; display: flex; flex-direction: column; }
.app-shell--modulo > .gv-root,
.app-shell--modulo .gv-root { flex: 1; min-height: 0; border: 0; border-radius: 0; }
/* Encabezado de las pantallas de ventas en una sola línea:
título · buscador · consultas · modo · salir. */
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab { align-items: center; gap: 10px; padding: 7px 12px; flex-wrap: wrap; }
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab .per-titulo { font-size: 14px; white-space: nowrap; }
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab .vnv-buscador { flex: 1 1 260px; min-width: 200px; padding: 0; border: 0; }
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab .mo-cab-btns { flex-wrap: wrap; justify-content: flex-end; }
/* El scroll tiene que estar en el cuerpo, no en un alto calculado contra la
ventana: dentro del panel el alto disponible lo manda el contenedor. */
.gv-root .gv-panel-proceso > .per-overlay > .per-modal { display: flex; flex-direction: column; }
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .vnv-buscador,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .vnv-aviso,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-pie,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .vnv-pie { flex: 0 0 auto; }
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .vnv-cuerpo,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cuerpo {
flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto;
}
/* Los modales que se abren DESDE el panel (consultas, listados) vuelven a ser
flotantes y por encima de todo. */
.gv-root .gv-panel-proceso .per-modal .per-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.68); padding: 14px; align-items: center; justify-content: center; }
.gv-root .gv-panel-proceso .per-modal .per-overlay > .per-modal { width: 100%; max-width: 1080px; height: auto; max-height: calc(92vh / var(--tcg-z, 1)); border: 1px solid var(--border, #2c2f36); border-radius: 14px; background: var(--bg, #14181d); }
/* Botones de la pantalla abierta, dentro de la barra del módulo. */
.gv-root .gv-slot-barra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gv-root .gv-slot-barra .mo-cab-btns { gap: 5px; }
.gv-root .gv-slot-barra .vnv-consultas { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.gv-root .gv-slot-barra .vnv-consultas-tit { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text); }
.gv-root .gv-slot-barra .lu-btn { padding: 3px 8px; font-size: 12px; }
/* Con los botones arriba, el encabezado del panel queda: título + buscador. */
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab .per-titulo {
font-size: 12px; letter-spacing: 1px; color: var(--text); white-space: nowrap;
}
/* ── Ajustes de la sesión: barra, pie, cliente y anchos ─────────────────── */
/* Barra del módulo en negro, no gris. */
.gv-root .gv-menubar { background: var(--bg, #131824); }
/* Cargar venta / Cancelar / Guardar cambios van a la derecha; la nota queda
a la izquierda ocupando el espacio libre. */
.gv-root .gv-panel-proceso .vnv-pie { justify-content: flex-end; }
.gv-root .gv-panel-proceso .vnv-pie-nota { margin-left: 0; margin-right: auto; }
/* Cliente sin recuadro ni fondo: misma celda que Agente y Vendedor. */
.gv-root .gv-panel-proceso .vnv-cliente,
.gv-root .gv-panel-proceso .vnv-cliente--cargado {
background: transparent; border-color: transparent; padding: 0; border-radius: 0;
}
.gv-root .gv-panel-proceso .vnv-cliente .per-campo > span,
.gv-root .gv-panel-proceso .vnv-cliente--cargado .per-campo > span { color: var(--text); }
.gv-root .gv-panel-proceso .vnv-cliente--cargado .per-campo input,
.gv-root .gv-panel-proceso .vnv-cliente--cargado .per-campo select { font-weight: 400; }
/* El panel de ventas no ocupa todo el ancho: se centra con un tope.
El «margin: 0 auto» de acá era el que corría el modal a la derecha. Dentro
de un contenedor flex, los márgenes automáticos se comen todo el espacio
libre ANTES de que actúe justify-content, y como el escalado ya había
achicado el bloque, el margen izquierdo se quedaba con casi 900px. El
centrado lo hace el contenedor (justify-content: center) y el origen del
escalado; el margen automático sobra y estorba. */
.gv-root .gv-panel-proceso > .per-overlay > .per-modal.vnv-modal {
max-width: 1080px; margin: 0;
border: 1px solid var(--border, #252d3f); border-radius: 10px;
}
/* La consulta de agente y cliente, un poco más grande. */
.gv-root .gv-panel-proceso .per-modal .per-overlay > .per-modal { max-width: 1260px; max-height: calc(94vh / var(--tcg-z, 1)); }
/* ── Navegación de informes en la barra superior (sin panel vertical) ────── */
/* ── Informes: navegación en una sola barra ─────────────────────────────── */
/* Secciones dentro de la barra del módulo, en el hueco que quedaba libre. */
/* Informes de la sección: una sola fila de pestañas, sin contadores. */
.inf-root .inf-informes { display: flex; flex-wrap: wrap; gap: 3px; }
.inf-root .inf-inf {
display: flex; align-items: center; gap: 5px;
background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
color: var(--text); font-family: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer;
}
.inf-root .inf-inf:hover { border-color: var(--accent-blue); }
.inf-root .inf-inf--on {
background: var(--panel-2); border-color: var(--accent-blue);
color: var(--text); font-weight: 600;
}
/* Las etiquetas «falta» y «nuestro» pasan a ser un punto con tooltip. */
.inf-root .inf-cargando, .inf-root .inf-demo { margin-left: 6px; }
/* ── Buscador de ventas: mitad buscador, mitad consultas ────────────────── */
.gv-root .gv-panel-proceso .vnv-buscador { display: flex; align-items: center; gap: 8px; }
.gv-root .gv-panel-proceso .vnv-buscador > .mo-cab-btns { flex: 0 0 auto; }
.gv-root .gv-panel-proceso .vnv-buscador .vnv-consultas { border: 0; padding: 0; margin: 0; gap: 4px; }
.gv-root .gv-panel-proceso .vnv-buscador .vnv-consultas-tit { display: none; }
/* Coincidencias del buscador en columnas alineadas. */
.bap-item {
display: grid !important;
grid-template-columns: 92px minmax(0, 1fr) 128px 150px;
align-items: center; gap: 10px; text-align: left;
}
.bap-item > strong { text-align: left; }
.bap-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bap-item .vnv-resultado-est { text-align: center; }
.bap-donde { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.bap-donde b { font-weight: 600; font-size: 11.5px; color: var(--text, #ecf0f4); }
.bap-donde i { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; opacity: 1; }
/* Celda de catálogo: botón para salir y borrado con confirmación. */
.cat-cab { display: flex; align-items: stretch; border-bottom: 1px solid var(--border, #252d3f); }
.cat-cab .cat-buscar { flex: 1; border-bottom: 0; }
.cat-cerrar {
flex: 0 0 auto; width: 30px; background: transparent; border: 0; border-left: 1px solid var(--border, #252d3f);
color: var(--text); font-size: 13px; cursor: pointer;
}
.cat-cerrar:hover { background: var(--border, #252d3f); color: var(--text, #ecf0f4); }
.cat-borrar {
flex: 0 0 auto; font-size: 12px; padding: 1px 6px; border-radius: 6px;
border: 1px solid transparent; color: var(--text); white-space: nowrap; cursor: pointer;
}
.cat-borrar:hover { color: #ee776c; border-color: rgba(226,87,76,.45); }
.cat-borrar--confirmar {
background: var(--red, #e2574c); border-color: #ee776c; color: #fff; font-weight: 600;
animation: catParpadeo .7s ease-in-out infinite alternate;
}
@keyframes catParpadeo { from { opacity: 1; } to { opacity: .55; } }
/* Listados: clic en la fila y flechas para ordenar columnas. */
.vnl-fila { cursor: pointer; }
.vnl-fila:hover > td { background: rgba(79,142,247,.14); }
.vnl-col-chk { display: inline-flex; align-items: center; gap: 3px; }
/* ── Reordenar arrastrando (estilo solapas del navegador) ───────────────── */
.arr { cursor: grab; touch-action: none; transition: opacity .12s, transform .12s; }
.arr:active { cursor: grabbing; }
/* La que se está moviendo queda fantasma. */
.arr--tomada { opacity: .35 !important; }
/* Sobre la que va a caer: una línea de color marca dónde entra. */
.arr--encima { box-shadow: inset 3px 0 0 var(--accent-amber, #f2c200) !important; }
th.arr--encima, td.arr--encima { box-shadow: inset 3px 0 0 var(--accent-amber, #f2c200) !important; }
/* El agarre ⠿ de los chips de columnas. */
.vnl-col-agarre { color: var(--text); font-size: 12px; line-height: 1; letter-spacing: -1px; }
.vnl-col-chk { padding: 1px 4px; border-radius: 6px; }
.vnl-col-chk.arr--encima { box-shadow: inset 0 -2px 0 var(--accent-amber, #f2c200) !important; }
.vnl-col-chk label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
/* Los encabezados de tabla avisan que se pueden agarrar. */
.vnl-tabla thead th.arr:hover { background: rgba(232,163,61,.14) !important; }
/* ── Buscador y consultas: dos bloques enteros, uno al lado del otro ─────
El buscador NO se corta: ocupa todo lo que sobra y el texto de adentro
entra completo. Las consultas van en un solo bloque segmentado, del
mismo alto. */
.gv-root .gv-panel-proceso .vnv-buscador { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.gv-root .gv-panel-proceso .vnv-buscador > .bap { flex: 1 1 auto; min-width: 260px; }
.gv-root .gv-panel-proceso .vnv-buscador > .bap .bap-input { width: 100%; text-overflow: ellipsis; }
.gv-root .gv-panel-proceso .vnv-buscador .vnv-consultas {
display: flex; align-items: stretch; gap: 0;
border: 1px solid #3b4450; border-radius: 8px; overflow: hidden;
flex: 0 0 auto; height: 44px;
}
.gv-root .gv-panel-proceso .vnv-buscador .vnv-consultas .lu-btn {
display: inline-flex; align-items: center;
height: 100%; padding: 0 14px; margin: 0;
background: transparent; border: 0; border-radius: 0;
color: var(--text); font-family: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.gv-root .gv-panel-proceso .vnv-buscador .vnv-consultas .lu-btn + .lu-btn { border-left: 1px solid #3b4450; }
.gv-root .gv-panel-proceso .vnv-buscador .vnv-consultas .lu-btn:hover {
background: var(--accent-amber, #f2c200); color: #000;
}
/* El botón de tema queda del mismo alto, pegado al grupo. */
.gv-root .gv-panel-proceso .vnv-buscador .mo-cab-btns { display: flex; align-items: stretch; gap: 6px; height: 44px; }
.gv-root .gv-panel-proceso .vnv-buscador .mo-cab-btns > .lu-btn,
.gv-root .gv-panel-proceso .vnv-buscador .mo-cab-btns > button:not(.vnv-consultas *) {
height: 44px; display: inline-flex; align-items: center;
}
/* Encabezados de tabla arrastrables: el agarre no debe pisar la manija de
resize, que vive en el borde derecho del
. */
th.arr { user-select: none; }
th.arr:hover { background: rgba(232,163,61,.12) !important; }
th.arr .asg-resize-col { touch-action: none; }
.asg-tabla th.arr--encima, .sc-tabla th.arr--encima, .pat-tabla th.arr--encima,
.rv-tabla th.arr--encima, table th.arr--encima { box-shadow: inset 3px 0 0 var(--accent-amber, #f2c200) !important; }
/* En el motor de informes el encabezado es un div, no un th. */
/* --- Informes: ancho y alineación de columnas --------------------------
El tirador se monta sobre el separador, sobresaliendo 7px de cada lado
para que sea agarrable sin apuntar al pixel. El encabezado tiene que
quedar en overflow visible: si se recorta, el tirador desaparece; el
texto se recorta en el span de adentro. */
.inf-root .inf-th { position: relative; overflow: visible; }
.inf-root .inf-th-tirador {
position: absolute; top: 0; right: -7px; width: 14px; height: 100%;
cursor: col-resize; z-index: 3; touch-action: none;
}
.inf-root .inf-th-tirador::after {
content: ""; position: absolute; top: 15%; left: 6px; width: 2px; height: 70%;
background: transparent; border-radius: 1px;
}
.inf-root .inf-th-tirador:hover::after { background: var(--accent-amber, #f2c200); }
/* Fila del panel de columnas: el tilde a la izquierda, la alineación a la
derecha, para que la lista se lea como una columna de nombres. */
.inf-root .inf-col-fila {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.inf-root .inf-col-fila .inf-col-chk { flex: 1 1 auto; min-width: 0; }
.inf-root .inf-alinea { display: flex; gap: 2px; flex: 0 0 auto; }
.inf-root .inf-alinea-b {
background: transparent; border: 1px solid var(--border, #2c3340); color: var(--text);
border-radius: 6px; padding: 0 5px; font-size: 12px; line-height: 18px; cursor: pointer;
}
.inf-root .inf-alinea-b:hover { color: var(--text); }
.inf-root .inf-alinea-b--on {
background: var(--accent-amber, #f2c200); border-color: var(--accent-amber, #f2c200); color: #000;
}
/* Botón Excel de la barra de informes: mismo cuerpo que Imprimir, con el
verde de planilla para distinguirlo de un vistazo. */
.inf-root .inf-btn--excel { border-color: #1f7a45; color: var(--text); }
.inf-root .inf-btn--excel:hover { background: var(--panel, #1f7a45); color: var(--text, #fff); }
.inf-root .inf-th.arr { cursor: grab; }
.inf-root .inf-th.arr--encima { box-shadow: inset 3px 0 0 var(--accent-amber, #f2c200) !important; }
/* ── Secciones con lista desplegable ────────────────────────────────────── */
/* El informe elegido se lee en el propio botón: no hace falta otra fila. */
/* ── Informes: solo lectura, con el acceso en el número de fila ─────────────
La edición en línea se sacó a propósito: en una tabla de consulta con
desplegables de catálogo era muy fácil cambiar un dato de otra fila sin
darse cuenta. Para modificar se abre el legajo. */
.cvn-tabla--consulta td { padding: 4px 6px; vertical-align: middle; }
.cvn-tabla--consulta th { text-align: center; }
.cvn-tabla--consulta tbody tr:hover > td { background: rgba(79,142,247,.08); }
.cvn-sin { font-style: italic; color: var(--text); }
/* El número de fila es el botón para entrar: se ve como tal. */
.cvn-col-n--abrir, .lu-inf-abrir {
cursor: pointer; position: relative; text-align: center;
color: var(--text); font-weight: 700;
}
.cvn-col-n--abrir:hover, .lu-inf-abrir:hover {
background: var(--accent-blue, #4f8ef7) !important; color: var(--casa-activa-tinta, #fff);
}
.cvn-n-abrir, .lu-n-icono { display: none; margin-left: 3px; font-size: 12px; }
.cvn-col-n--abrir:hover .cvn-n-num, .lu-inf-abrir:hover .lu-n-num { display: none; }
.cvn-col-n--abrir:hover .cvn-n-abrir, .lu-inf-abrir:hover .lu-n-icono { display: inline; font-size: 13px; }
/* Un borde a la izquierda avisa que esa columna es la puerta de entrada. */
.cvn-tabla--consulta tbody td.cvn-col-n--abrir { box-shadow: inset 3px 0 0 rgba(79,142,247,.55); }
.lu-informe-tabla tbody td.lu-inf-abrir { box-shadow: inset 3px 0 0 rgba(79,142,247,.55); }
/* ── Listados de consulta: la única puerta a la operación es el N° ───────
Se sacó la edición de celdas de estas tablas (una marca se cambió sola de
PEUGEOT a CHEVROLET al pasar por encima de un desplegable). Para modificar
hay que abrir el legajo, que muestra el contexto completo. */
.cvn-tabla--consulta tbody td.cvn-col-n--abrir,
.lu-informe-tabla tbody td.lu-inf-abrir {
box-shadow: inset 4px 0 0 var(--accent-blue, #4f8ef7) !important;
background: rgba(79,142,247,.10) !important;
}
.cvn-col-n--abrir, .lu-inf-abrir { font-size: 12.5px; }
/* El resto de las celdas no invita a hacer clic. */
.cvn-tabla--consulta tbody td:not(.cvn-col-n--abrir):not(.cvn-col-abrir) { cursor: default; }
/* ── Buscador único: un solo recuadro con los botones adentro ──────────────
Antes eran tres bloques cortados (campo · grupo de consultas · tema) y a la
vista parecían tres cosas distintas. Ahora hay una sola cápsula: el campo
ocupa lo que sobra y los botones son píldoras redondeadas apoyadas adentro,
sin ninguna línea que parta el renglón. Va al final del bloque a propósito,
para ganarle a las reglas de .bap-input y .vnv-consultas de más arriba. */
.vnv-buscador.vnvb-uni {
display: flex; align-items: center; gap: 0; flex-wrap: nowrap;
padding: 8px 12px;
/* Sin la línea de abajo: la cápsula del buscador ya delimita el renglón,
y la raya quedaba como un subrayado suelto de color. */
border-bottom: 0;
}
.vnv-buscador.vnvb-uni > .vnvb-caja { flex: 1 1 auto; min-width: 0; }
/* La raya que quedaba debajo del buscador no era del buscador: era del
contenedor que lo envuelve (.per-cab), que trae su propio borde inferior.
Son dos elementos, uno adentro del otro; sacarla del de adentro no alcanzaba. */
.vnv-modal > .per-cab:has(> .vnv-buscador.vnvb-uni),
.gv-root .gv-panel-proceso .vnv-modal > .per-cab:has(.vnv-buscador.vnvb-uni) { border-bottom: 0; }
/* La cápsula: el único borde de todo el renglón. */
.vnvb-caja {
position: relative;
display: flex; align-items: center; gap: 8px;
min-height: 46px; padding: 4px 5px 4px 0;
border: 1.5px solid color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca, #6c7684)) 55%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--vnv-marca, #6c7684) 7%, transparent);
transition: border-color .12s, box-shadow .12s;
}
.vnvb-caja:hover { border-color: var(--vnv-marca-luz, var(--vnv-marca, #6c7684)); }
/* El resaltado de foco es de la cápsula entera, no del campo solo. */
.vnvb-caja:focus-within {
border-color: var(--vnv-marca-luz, var(--vnv-marca, #f2c200));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca, #f2c200)) 24%, transparent);
}
/* El campo pierde su propio marco: el marco ahora es la cápsula. */
.vnvb-caja > .bap { position: static; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.vnvb-caja .bap-input,
.vnv-modal .vnvb-caja .bap-input,
.vnv-compacto .vnvb-caja .bap-input {
width: 100%; height: 38px; margin: 0; padding: 0 6px 0 16px;
/* Fondo propio: antes era transparente y se comía el amarillo de la
cápsula, así que el renglón entero parecía una sola mancha y no se
veía dónde escribir. El aro y las píldoras no se tocan. */
background: var(--panel, #1b2233);
border: 0; border-radius: 999px; box-shadow: none;
/* 23/09/2026 (Ramiro): dos puntos más grande. Es el campo que más se usa
en el día y se leía chico. */
font-size: 16.5px; font-weight: 600; color: inherit;
text-overflow: ellipsis;
}
.vnvb-caja .bap-input:hover, .vnvb-caja .bap-input:focus {
background: var(--panel, #1b2233); border: 0; box-shadow: none; outline: none;
}
/* Las coincidencias caen debajo de toda la cápsula, no debajo del campo. */
.vnvb-caja .bap-lista { top: calc(100% + 6px); left: 0; right: 0; }
/* Botones: píldoras sueltas apoyadas adentro del mismo renglón. */
.vnvb-acciones { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.vnvb-pill {
display: inline-flex; align-items: center; justify-content: center;
height: 32px; padding: 0 14px; margin: 0;
background: color-mix(in srgb, var(--vnv-marca, #6c7684) 14%, transparent);
border: 1px solid transparent; border-radius: 999px;
color: var(--text); font-family: inherit; font-size: 12px; font-weight: 700;
white-space: nowrap; cursor: pointer; transition: background .12s, color .12s;
}
.vnvb-pill:hover { background: color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca, #f2c200)) 18%, transparent);
color: var(--text); }
.vnvb-pill--soltar {
background: color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca, #f2c200)) 20%, transparent);
color: var(--text);
}
/* El de cliente · agente es una sola píldora partida al medio. */
.vnvb-pill--doble { padding: 0; overflow: hidden; gap: 0; }
.vnvb-pill--doble:hover { background: color-mix(in srgb, var(--vnv-marca, #6c7684) 14%, transparent); }
.vnvb-pill--doble > button {
height: 100%; padding: 0 13px; margin: 0;
background: transparent; border: 0; border-radius: 0;
color: inherit; font-family: inherit; font-size: 12px; font-weight: 700;
white-space: nowrap; cursor: pointer;
}
.vnvb-pill--doble > button + button {
border-left: 1px solid color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca, #6c7684)) 45%, transparent);
}
.vnvb-pill--doble > button:hover { background: color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca, #f2c200)) 18%, transparent);
color: var(--text); }
/* El botón de tema entra como píldora redonda, al ras de la cápsula. */
.vnvb-acciones .mo-tema {
width: 32px; height: 32px; padding: 0; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--vnv-marca, #6c7684) 14%, transparent);
border: 1px solid transparent; border-radius: 999px; font-size: 13px; line-height: 1;
}
.vnvb-acciones .mo-tema:hover { background: var(--vnv-marca-luz, var(--vnv-marca, #f2c200)); }
/* Modo claro */
.mo-claro .vnvb-caja { background: #eef2f7; border-color: #ccd3dc; }
.mo-claro .vnvb-caja .bap-input,
.mo-claro .vnvb-caja .bap-input:hover,
.mo-claro .vnvb-caja .bap-input:focus { background: #ffffff; }
.mo-claro .vnvb-pill, .mo-claro .vnvb-acciones .mo-tema { background: #eef2f7; color: #000; }
.mo-claro .vnvb-pill--doble:hover { background: #eef2f7; }
.mo-claro .vnvb-pill--doble > button + button { border-left-color: #ccd3dc; }
/* ── Carga ágil: fecha en el buscador, ventana del usado y foco visible ──── */
/* La fecha de la venta baja debajo del estado, en la misma columna. */
.bap-item .vnv-resultado-est { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.bap-fecha {
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 11px; font-weight: 600;
color: var(--text, #ecf0f4); margin-top: 1px;
}
.bap-grupo--apagado .bap-fecha { color: var(--text); }
/* El alta del usado en parte de pago vuelve a ser una ventana chica.
Se abre DESDE el panel de ventas, y la regla general de los modales
anidados (.per-modal .per-overlay > .per-modal) la estiraba a 1080px. */
.gv-root .gv-panel-proceso .per-modal .per-overlay > .per-modal.ret-modal {
height: auto; max-height: calc(92vh / var(--tcg-z, 1));
}
/* Con el teclado hay que ver en qué botón del pie está parado el foco, porque
el primer Enter sólo llega al botón y el segundo es el que confirma. */
.vnv-pie .lu-btn:focus-visible,
.per-pie .lu-btn:focus-visible,
.ret-pie .lu-btn:focus-visible {
outline: none;
border-color: var(--accent-amber, #f2c200);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-amber, #f2c200) 32%, transparent);
}
.vnv-pie .lu-btn--accion:focus-visible,
.per-pie .lu-btn--accion:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--green, #4caf6d) 38%, transparent);
}
/* ── Aviso de guardado: una sola línea, abajo ──────────────────────────
Antes ocupaba hasta el 90% del ancho y se ponía arriba a la derecha del panel,
así que un texto largo ("0km cargado en Vesubio: 3008 GT PACK HDI interno
133.") armaba un cartel enorme encima del formulario. Ahora es una franja de
un renglón, centrada abajo, y lo que no entra se corta con puntos suspensivos.
El texto completo queda en el title, por si hace falta leerlo entero. */
.mp-aviso {
max-width: min(620px, calc(78vw / var(--tcg-z, 1)));
padding: 7px 14px; font-size: 12px; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Dentro del panel de procesos vuelve abajo y al medio: arriba a la derecha
tapaba las consultas del encabezado. */
.gv-root .gv-panel-proceso .mp-aviso {
position: absolute; top: auto; right: auto;
bottom: 12px; left: 50%; transform: translateX(-50%);
z-index: 20; max-width: min(620px, 70%);
}
/* La opción resaltada muestra siempre su tacho, para que con el teclado se vea
qué valor va a sacar Supr. */
.cat-op--foco .cat-borrar { opacity: 1; }
.cat-borrar--confirmar { color: #ee776c; font-weight: 700; }
/* Campo que no se elige: el concesionario en el que ya estás parado. Se ve como
dato cargado, no como celda vacía que hay que completar. */
.com-fijo {
display: block; padding: 6px 9px; border-radius: 8px;
background: color-mix(in srgb, var(--accent-amber, #f2c200) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-amber, #f2c200) 34%, transparent);
color: var(--text, #ecf0f4); font-size: 12.5px; font-weight: 700;
}
.mo-claro .com-fijo { background: #fdf3e2; border-color: #e6c68a; color: #000; }
/* Renombre de columna en el propio encabezado (reemplaza al viejo prompt).
Va al final del bloque a propósito: acá adentro las reglas que se insertan
antes de otras de la misma especificidad quedan pisadas. */
.ct-col-input {
width: 100%; min-width: 70px; box-sizing: border-box;
padding: 2px 5px; margin: 0;
background: var(--panel-2, #202940);
border: 1px solid var(--accent-amber, #f2c200);
border-radius: 6px;
color: var(--text, #ecf0f4);
font-size: inherit; font-weight: inherit; font-family: inherit;
text-align: center;
outline: none;
}
.ct-col-input::placeholder { color: var(--text); font-weight: 400; }
/* Agente de la operación en los resultados del buscador. Va al final del
bloque para ganarle a la regla que estira los del resultado. */
.bap-item .bap-agente {
flex: 0 0 auto; overflow: visible; white-space: nowrap;
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
border-radius: 999px; padding: 2px 8px;
background: color-mix(in srgb, var(--accent-amber, #f2c200) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-amber, #f2c200) 42%, transparent);
color: var(--text);
}
/* La venta directa no es un agente: se muestra en gris para que el ojo
distinga de un vistazo lo que salió por reventa de lo que salió del salón. */
.bap-item .bap-agente--dir {
background: transparent;
border-color: var(--border, #252d3f);
color: var(--text);
font-weight: 600;
}
.mo-claro .bap-item .bap-agente--dir { border-color: #cbd2d9; color: #000; }
/* Cantidad de operaciones y facturación total en el recibo del vendedor.
Se distinguen del TOTAL A COBRAR: son el contexto de la comisión, no la
cifra que se cobra. */
.lc-recibo-subtotal td {
font-weight: 700; font-size: 12px;
color: var(--text, #ecf0f4);
background: color-mix(in srgb, var(--panel-2, #202940) 70%, transparent);
border-top: 1px solid var(--border, #252d3f);
}
.mo-claro .lc-recibo-subtotal td { color: #000; background: #f1f3f5; border-top-color: #d5dbe1; }
/* ---- Seguimiento de Cheques (Tesorería / Administración) ----
Todas las reglas van prefijadas con .sch-root para ganarle en
especificidad a los estilos globales de la app. */
.sch-root { padding: 4px 2px 24px; }
.sch-root .sch-header {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 14px; margin-bottom: 14px;
}
.sch-root .sch-titulo { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; }
.sch-root .sch-sub { margin-top: 3px; font-size: 12px; color: var(--text); }
.sch-root .sch-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.sch-root .sch-btn {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600;
}
.sch-root .sch-btn:hover { border-color: var(--accent-amber); }
.sch-root .sch-btn:disabled { opacity: 0.55; cursor: default; }
.sch-root .sch-btn--fuerte { background: var(--accent-amber); border-color: var(--accent-amber); color: #000; }
.sch-root .sch-girando { animation: sch-giro 1s linear infinite; }
@keyframes sch-giro { to { transform: rotate(360deg); } }
.sch-root .sch-aviso {
position: relative; margin-bottom: 12px; padding: 10px 34px 10px 12px;
background: rgba(255, 193, 7, 0.10); border: 1px solid rgba(255, 193, 7, 0.35);
border-radius: 8px; font-size: 12.5px; line-height: 1.5;
}
.sch-root .sch-aviso-x {
position: absolute; top: 7px; right: 8px; background: none; border: none;
color: var(--text); cursor: pointer; display: inline-flex; padding: 3px;
}
.sch-root .sch-tarjetas {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px; margin-bottom: 16px;
}
.sch-root .sch-tarjeta {
background: var(--panel-2); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 14px;
}
.sch-root .sch-tarjeta--mal { border-color: rgba(220, 38, 38, 0.45); }
.sch-root .sch-tarjeta--bien { border-color: rgba(16, 185, 129, 0.35); }
.sch-root .sch-tarjeta-valor { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sch-root .sch-tarjeta-valor--chico { font-size: 17px; }
.sch-root .sch-tarjeta--mal .sch-tarjeta-valor { color: #F87171; }
.sch-root .sch-tarjeta--bien .sch-tarjeta-valor { color: var(--text); }
.sch-root .sch-tarjeta-label {
margin-top: 3px; font-size: 12px; text-transform: uppercase;
letter-spacing: 0.6px; color: var(--text); font-weight: 600;
}
.sch-root .sch-tarjeta-nota { margin-top: 2px; font-size: 12px; color: var(--text); opacity: 1; }
.sch-root .sch-solapas {
display: flex; gap: 2px; border-bottom: 1px solid var(--border);
margin-bottom: 14px; overflow-x: auto;
}
.sch-root .sch-solapa {
background: none; border: none; border-bottom: 2px solid transparent;
color: var(--text); cursor: pointer; font-size: 12px; font-weight: 600;
padding: 8px 14px; white-space: nowrap; margin-bottom: -1px;
}
.sch-root .sch-solapa.activa { color: var(--text); border-bottom-color: var(--accent-amber); }
.sch-root .sch-badge {
display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
background: var(--panel-2); border: 1px solid var(--border);
font-size: 12px; font-variant-numeric: tabular-nums;
}
.sch-root .sch-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.sch-root .sch-buscador {
display: flex; align-items: center; gap: 6px; flex: 1 1 260px;
background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
padding: 5px 10px; color: var(--text);
}
.sch-root .sch-buscador input {
flex: 1; background: transparent; border: none; outline: none;
color: var(--text); font-size: 13px;
}
.sch-root .sch-select {
background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
border-radius: 8px; padding: 6px 10px; font-size: 12px;
}
.sch-root .sch-tabla-scroll {
overflow-x: auto; overflow-y: auto; max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 400px);
border: 1px solid var(--border); border-radius: 8px;
}
.sch-root .sch-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sch-root .sch-tabla th {
position: sticky; top: 0; z-index: 2; background: var(--panel-2);
border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
padding: 7px 8px; font-size: 13px; font-weight: 700; text-align: center;
text-transform: uppercase; letter-spacing: 0.4px; color: var(--text); white-space: nowrap;
}
.sch-root .sch-tabla th:last-child { border-right: none; }
.sch-root .sch-tabla td {
border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
padding: 2px 4px; vertical-align: middle;
}
.sch-root .sch-tabla td:last-child { border-right: none; }
.sch-root .sch-tabla tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.sch-root .sch-tabla tbody tr:focus-within td {
box-shadow: inset 0 1px 0 var(--accent-amber), inset 0 -1px 0 var(--accent-amber);
}
.sch-root .sch-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.sch-root .sch-td-acciones { text-align: center; }
.sch-root .sch-input {
width: 100%; background: transparent; border: 1px solid transparent; color: var(--text);
border-radius: 6px; padding: 4px 6px; font-size: 12.5px; font-family: inherit;
}
.sch-root .sch-input:hover { border-color: var(--border); }
.sch-root .sch-input:focus { outline: none; border-color: var(--accent-amber); background: var(--panel-2); }
.sch-root .sch-input--num { text-align: right; font-variant-numeric: tabular-nums; }
.sch-root .sch-input--fecha::-webkit-datetime-edit { color: transparent; }
.sch-root .sch-input--fecha:hover::-webkit-datetime-edit,
.sch-root .sch-input--fecha:focus::-webkit-datetime-edit { color: var(--text); }
.sch-root .sch-input--fecha:not(:placeholder-shown)::-webkit-datetime-edit { color: var(--text); }
.sch-root .sch-input--fecha[value]:not([value=""])::-webkit-datetime-edit { color: var(--text); }
.sch-root .sch-btn-icono {
background: none; border: none; color: var(--text); cursor: pointer;
display: inline-flex; align-items: center; padding: 4px; border-radius: 6px;
}
.sch-root .sch-btn-icono:hover { color: var(--red, #F87171); }
.sch-root .sch-pastilla {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
margin-right: 6px; vertical-align: middle;
}
.sch-root .sch-pie { margin-top: 8px; font-size: 12px; color: var(--text); }
.sch-root .sch-estado {
display: inline-block; padding: 2px 7px; border-radius: 8px;
font-size: 12px; font-weight: 700; white-space: nowrap;
}
.sch-root .sch-estado--bien { background: rgba(16, 185, 129, 0.14); color: var(--text); }
.sch-root .sch-estado--medio { background: rgba(255, 193, 7, 0.14); color: var(--text); }
.sch-root .sch-estado--mal { background: rgba(220, 38, 38, 0.16); color: #F87171; }
.sch-root .sch-estado--gris { background: var(--panel-2); color: var(--text); }
.sch-root .sch-vacio {
padding: 34px 20px; text-align: center; font-size: 12.5px;
color: var(--text); line-height: 1.6;
}
.sch-root .sch-sin-novedades {
display: flex; align-items: center; gap: 14px; padding: 22px 20px;
background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 10px; color: var(--text); font-size: 12.5px; line-height: 1.6;
}
.sch-root .sch-sin-novedades div div { color: var(--text); }
.sch-root .sch-alertas { display: flex; flex-direction: column; gap: 10px; }
.sch-root .sch-alerta {
border: 1px solid rgba(255, 193, 7, 0.35); border-radius: 10px;
overflow: hidden; background: var(--panel-2);
}
.sch-root .sch-alerta--critica { border-color: rgba(220, 38, 38, 0.5); }
.sch-root .sch-alerta-titulo {
display: flex; align-items: center; gap: 6px; padding: 6px 12px;
background: rgba(255, 193, 7, 0.12); color: var(--text);
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.sch-root .sch-alerta--critica .sch-alerta-titulo { background: rgba(220, 38, 38, 0.14); color: #F87171; }
.sch-root .sch-alerta-cuerpo {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 18px; padding: 12px 14px; flex-wrap: wrap;
}
.sch-root .sch-alerta-nombre { font-weight: 700; font-size: 13.5px; }
.sch-root .sch-alerta-cuit { font-size: 12px; color: var(--text); margin-bottom: 7px; }
.sch-root .sch-alerta-datos {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2px 22px; font-size: 12px;
}
.sch-root .sch-dato span { color: var(--text); font-size: 12px; }
.sch-root .sch-alerta-importe { text-align: right; }
.sch-root .sch-importe { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sch-root .sch-importe--mal { color: #F87171; }
.sch-root .sch-alerta-label {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text);
}
.sch-root .sch-consulta-caja {
background: var(--panel-2); border: 1px solid var(--border);
border-radius: 10px; padding: 14px; margin-bottom: 14px;
}
.sch-root .sch-consulta-caja label {
display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px; color: var(--text);
}
.sch-root .sch-consulta-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.sch-root .sch-input-grande {
flex: 1 1 220px; background: var(--panel); border: 1px solid var(--border);
color: var(--text); border-radius: 8px; padding: 8px 12px;
font-size: 16px; letter-spacing: 1px; font-variant-numeric: tabular-nums;
}
.sch-root .sch-input-grande:focus { outline: none; border-color: var(--accent-amber); }
.sch-root .sch-error {
margin-top: 9px; padding: 8px 11px; border-radius: 8px; font-size: 12px; line-height: 1.5;
background: rgba(220, 38, 38, 0.10); border: 1px solid rgba(220, 38, 38, 0.35); color: #F87171;
}
.sch-root .sch-resultado {
border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel-2);
}
.sch-root .sch-resultado--mal { border-color: rgba(220, 38, 38, 0.45); }
.sch-root .sch-resultado--bien { border-color: rgba(16, 185, 129, 0.35); }
.sch-root .sch-resultado-cabecera {
display: flex; justify-content: space-between; align-items: center;
gap: 16px; padding: 13px 15px; flex-wrap: wrap;
}
.sch-root .sch-resultado-cuenta { text-align: right; }
.sch-root .sch-situacion {
padding: 9px 15px; border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.sch-root .sch-periodo { color: var(--text); font-size: 12px; }
.sch-root .sch-entidad { font-size: 12px; color: var(--text); }
.sch-root .sch-fuente {
padding: 8px 15px; border-top: 1px solid var(--border);
font-size: 12px; color: var(--text);
}
/* ---- Seguimiento de Cheques: ancho de columnas y menú ---- */
.sch-root .sch-tabla th { overflow: visible; position: sticky; }
.sch-root .sch-th-label {
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sch-root .sch-resize {
position: absolute; top: 0; right: -7px; width: 14px; height: 100%;
cursor: col-resize; z-index: 3; touch-action: none;
}
.sch-root .sch-resize:hover { background: rgba(255, 193, 7, 0.35); }
.sch-root .sch-tabla th { position: sticky; }
.sch-root .sch-menu-col { position: relative; }
.sch-root .sch-menu-col-lista {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
padding: 8px 10px; min-width: 190px; max-height: 320px; overflow-y: auto;
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.sch-root .sch-menu-col-lista label {
display: flex; align-items: center; gap: 7px; padding: 3px 0;
font-size: 12px; cursor: pointer; white-space: nowrap;
}
.sch-root .sch-ok { color: var(--text); }
.sch-root .sch-mal { color: #F87171; }
/* ---- Seguimiento de Cheques: detalle de indicadores y avisos en rojo ---- */
.sch-root .sch-tarjeta {
text-align: left; width: 100%; font: inherit; cursor: pointer;
transition: border-color 0.12s, transform 0.08s;
}
.sch-root .sch-tarjeta:hover { border-color: var(--accent-amber); }
.sch-root .sch-tarjeta:active { transform: translateY(1px); }
.sch-root .sch-fila--mal td { background: rgba(220, 38, 38, 0.10) !important; }
.sch-root .sch-fila--mal td:first-child { box-shadow: inset 3px 0 0 #F87171; }
.sch-root .sch-fila--medio td { background: rgba(255, 193, 7, 0.07) !important; }
.sch-root .sch-fila--medio td:first-child { box-shadow: inset 3px 0 0 #FBBF24; }
.sch-root .sch-negativo { color: #F87171; font-weight: 600; }
.sch-root .sch-menu-col-titulo {
font-size: 12px; color: var(--text); margin-bottom: 6px; line-height: 1.4;
white-space: normal;
}
.sch-root .sch-menu-col-fila { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.sch-root .sch-menu-col-nombre {
flex: 1; min-width: 0; background: transparent; border: 1px solid transparent;
color: var(--text); border-radius: 6px; padding: 3px 5px; font-size: 12px; font-family: inherit;
}
.sch-root .sch-menu-col-nombre:hover { border-color: var(--border); }
.sch-root .sch-menu-col-nombre:focus {
outline: none; border-color: var(--accent-amber); background: var(--panel);
}
.sch-root .sch-menu-col-fija { width: 21px; text-align: center; color: var(--text); }
.sch-root .sch-menu-col-agregar {
display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 7px;
background: var(--panel); border: 1px dashed var(--border); color: var(--text);
border-radius: 6px; padding: 5px 8px; font-size: 12px; cursor: pointer;
}
.sch-root .sch-menu-col-agregar:hover { border-color: var(--accent-amber); color: var(--text); }
/* El modal usa position:static al imprimir; la impresión real sale por
ventana aparte, así que acá no hace falta ninguna regla @media print. */
.sch-root .sch-overlay {
position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.6);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sch-root .sch-modal {
background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
width: min(1240px, calc(96vw / var(--tcg-z, 1))); max-height: calc(88vh / var(--tcg-z, 1)); display: flex; flex-direction: column;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.sch-root .sch-modal-cab {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.sch-root .sch-modal-cab h3 { margin: 0; font-size: 15.5px; }
.sch-root .sch-modal-nota { margin-top: 3px; font-size: 12px; color: var(--text); }
.sch-root .sch-modal-acciones { display: flex; gap: 7px; }
.sch-root .sch-modal-tabla { border: none; border-radius: 0; max-height: none; flex: 1; }
.sch-root .sch-modal-tabla tfoot td {
position: sticky; bottom: 0; background: var(--panel-2);
border-top: 1px solid var(--border); font-weight: 700;
}
/* rj · Seguimiento de cheques: acciones en un bloque, ventanas con la casa */
.sch-root .sch-header { border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: 12px; padding: 8px 12px; background: var(--panel-2, rgba(127,127,127,.06)); margin-bottom: 12px; }
.sch-root .sch-carpetas { margin: 6px 0 12px; }
.sch-root .sch-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sch-header-tit { font-weight: 700; font-size: 13px; letter-spacing: .03em; margin-right: auto; }
.sch-root .sch-header .sch-acciones { margin-left: auto; }
.sch-root .sch-modal { overflow: hidden; }
.sch-root .sch-modal-cab { background: var(--casa, var(--panel-2)); color: var(--casa-tinta, inherit); align-items: center; border-bottom: 0; }
.sch-root .sch-modal-cab > div:not(.sch-modal-acciones) { margin-right: auto; }
.sch-root .sch-modal-cab h3, .sch-root .sch-modal-cab .sch-modal-nota { color: var(--casa-tinta, inherit) !important; }
.sch-root .sch-modal-cab .sch-modal-nota { opacity: 1; }
.sch-root .sch-modal-cab .sch-btn { background: transparent; color: var(--casa-tinta, inherit); border-color: var(--casa-tinta, var(--border)); }
.sch-root .sch-modal > .cip-pie { flex: none; border-radius: 0; }
/* ---- Seguimiento de Cheques: correcciones de color y detalle por fila ---- */
/* Los indicadores pasaron a ser botones y heredaban el negro del navegador. */
.sch-root .sch-tarjeta { color: var(--text); }
.sch-root .sch-tarjeta .sch-tarjeta-valor { color: var(--text); }
.sch-root .sch-tarjeta--mal .sch-tarjeta-valor { color: #F87171; }
.sch-root .sch-tarjeta--bien .sch-tarjeta-valor { color: var(--text); }
/* Los antecedentes también son un dato negativo: rojo, más suave que el
rechazo propio para poder distinguirlos de un vistazo. */
.sch-root .sch-estado--medio { background: rgba(220, 38, 38, 0.12); color: #FCA5A5; }
.sch-root .sch-fila--medio td { background: rgba(220, 38, 38, 0.06) !important; }
.sch-root .sch-fila--medio td:first-child { box-shadow: inset 3px 0 0 #FCA5A5; }
.sch-root .sch-fila--mal td { background: rgba(220, 38, 38, 0.14) !important; }
/* Entrar a la línea */
.sch-root .sch-fila-abrir {
background: transparent; border: 1px solid transparent; color: var(--text);
border-radius: 6px; padding: 2px 6px; font: inherit; cursor: pointer;
font-variant-numeric: tabular-nums; min-width: 30px;
}
.sch-root .sch-fila-abrir:hover {
border-color: var(--accent-amber); color: var(--text); background: var(--panel-2);
}
.sch-root .sch-estado-btn {
background: none; border: none; padding: 0; cursor: pointer; font: inherit;
}
.sch-root .sch-fila--clic { cursor: pointer; }
.sch-root .sch-fila--clic:hover td { filter: brightness(1.25); }
.sch-root .sch-este { color: #F87171; font-weight: 700; font-size: 12px; }
/* Tirador de ancho: antes era invisible y nadie lo encontraba. */
.sch-root .sch-resize::after {
content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px;
width: 2px; background: var(--border); border-radius: 1px;
}
.sch-root .sch-resize:hover::after { background: var(--accent-amber); width: 3px; }
.sch-root .sch-th-mas {
background: transparent; border: 1px dashed var(--border); color: var(--text);
border-radius: 6px; padding: 2px 5px; cursor: pointer; display: inline-flex;
}
.sch-root .sch-th-mas:hover { border-color: var(--accent-amber); color: var(--text); }
/* Ficha del cheque dentro del detalle de fila */
.sch-root .sch-modal--fila { width: min(920px, calc(96vw / var(--tcg-z, 1))); }
.sch-root .sch-modal-cuerpo { padding: 14px 16px; overflow-y: auto; }
.sch-root .sch-modal-sub {
margin: 16px 0 8px; font-size: 12px; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--text); font-weight: 700;
}
.sch-root .sch-modal-cuerpo > .sch-modal-sub:first-child { margin-top: 0; }
.sch-root .sch-ficha {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 7px 20px;
}
.sch-root .sch-ficha-item {
display: flex; justify-content: space-between; gap: 12px;
border-bottom: 1px dotted var(--border); padding-bottom: 3px; font-size: 12.5px;
}
.sch-root .sch-ficha-item span { color: var(--text); font-size: 12px; }
.sch-root .sch-alerta--suelta { margin-bottom: 4px; }
/* ---- Seguimiento de Cheques: orden de columnas ---- */
.sch-root .sch-menu-col-mover { display: flex; flex-direction: column; gap: 1px; }
.sch-root .sch-menu-col-mover button {
background: transparent; border: 1px solid transparent; color: var(--text);
border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1;
padding: 1px 3px; width: 18px;
}
.sch-root .sch-menu-col-mover button:hover:not(:disabled) {
border-color: var(--accent-amber); color: var(--text);
}
.sch-root .sch-menu-col-mover button:disabled { opacity: 0.25; cursor: default; }
.sch-root .sch-menu-col-lista { min-width: 260px; }
/* ---- Seguimiento de Cheques: destinatarios del informe ---- */
.sch-root .sch-dest-dealers { display: flex; gap: 4px; flex-wrap: wrap; }
.sch-root .sch-chip {
background: transparent; border: 1px solid var(--border); color: var(--text);
border-radius: 20px; padding: 3px 9px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.sch-root .sch-chip.activo { background: var(--panel-2); border-width: 2px; font-weight: 600; }
.sch-root .sch-chip:hover { color: var(--text); }
.sch-root .sch-dest-activo {
display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer;
}
.sch-root .sch-nota-larga {
font-size: 12px; color: var(--text); line-height: 1.6;
background: var(--panel-2); border: 1px solid var(--border);
border-radius: 8px; padding: 11px 13px;
}
/* ---- Modales de ventas: ajustes de prolijidad ---------------------
Van al final para ganarle a las reglas de arriba. */
/* Coincidencias del buscador: la grilla fija de 4 columnas descuadraba
cuando el render emitía 3 elementos (clientes) en vez de 4 (unidades).
Ahora las columnas de la derecha solo ocupan lugar si existen. */
.bap-item {
display: grid !important;
grid-template-columns: 92px minmax(0, 1fr) auto auto;
align-items: center; gap: 8px 12px; text-align: left;
padding: 6px 11px;
}
.bap-item > strong { text-align: left; }
.bap-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bap-item .bap-agente { min-width: 96px; text-align: left; }
.bap-item .vnv-resultado-est { min-width: 118px; text-align: left; }
/* La referencia queda pegada al borde derecho y en una sola línea:
el valor y el campo separados por un punto, no apilados. */
.bap-donde {
display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px;
margin-left: 0; justify-self: end; white-space: nowrap;
border: 0; padding: 0; line-height: 1.2;
}
.bap-donde b { font-weight: 600; font-size: 11.5px; color: var(--text, #ecf0f4); }
.bap-donde i {
font-style: normal; font-size: 10.5px; text-transform: uppercase;
letter-spacing: .4px; opacity: 1;
}
.bap-donde i::before { content: "· "; }
/* Cabecera de la unidad: el interno editable en letra chica, para que no
compita con el interno real cuando la unidad sí lo tiene. */
.vnp-interno-input--cargar {
font-size: 12px !important; letter-spacing: .2px;
padding: 4px 7px !important; max-width: 118px;
}
.vnp-interno-input--cargar::placeholder { font-size: 11px; opacity: .7; }
.vnv-cuerpo--2col .vnv-col { display: flex; flex-direction: column; gap: 10px; }
/* Un respiro antes de cerrar la tarjeta. */
.vnv-cuerpo--2col .vnb-body { padding-bottom: 10px; }
/* Modal de cliente nuevo: más angosto y con las celdas más cortas.
Antes cada campo ocupaba todo el ancho aunque el dato fuera un CP. */
.vna-modal { width: min(430px, calc(95vw / var(--tcg-z, 1))); }
.vna-modal .per-campo { grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.vna-modal .per-campo > input { max-width: 240px; }
.vna-modal .vna-sub { font-size: 12px; line-height: 1.45; }
/* ---- Altura de las tarjetas del modal de ventas -------------------
La columna izquierda (Cliente · Fechas · Unidad) tiene que cortar a la
misma altura que la derecha (Importes · Forma de pago · Financiación).
Unidad es la que más crece porque lista todos los datos de la unidad,
así que se le pone tope con desplazamiento propio, y Fechas se estira
para ocupar lo que queda. */
/* Fechas: respira más entre campos y se estira si sobra lugar. */
.vnv-cuerpo--2col .vnv-col > .vnb.vnb--fechas { flex: 0 0 auto; }
.vnv-cuerpo--2col .vnv-col > .vnb.vnb--fechas > .vnb-body {
padding-top: 12px; padding-bottom: 14px; gap: 10px;
}
/* Unidad: no empuja la columna. Si el detalle no entra, se desplaza adentro. */
.vnv-cuerpo--2col .vnv-col > .vnb.vnb--unidad {
flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.vnv-cuerpo--2col .vnv-col > .vnb.vnb--unidad .vnv-unidad {
flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.vnv-cuerpo--2col .vnv-col > .vnb.vnb--unidad .vnp-cuerpo {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
/* El panel de unidad va suelto en la columna, sin section que lo envuelva:
se le da el mismo tratamiento apuntando al bloque directamente. */
.vnv-cuerpo--2col .vnv-col > .vnv-unidad {
flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.vnv-cuerpo--2col .vnv-col > .vnv-unidad .vnp-cuerpo {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
/* Datos de la unidad más compactos: son de consulta, no de carga. */
.vnv-cuerpo--2col .vnp-cuerpo .vnp-grupo-tit { margin-top: 8px; }
.vnv-cuerpo--2col .vnp-cuerpo dl > div { padding: 2px 0; }
/* ---- Tarjetas emparejadas por fila --------------------------------
Cliente ↔ Importes · Fechas ↔ Forma de pago · Unidad ↔ Financiación.
Las dos columnas eran contenedores separados, así que cada tarjeta
empezaba donde terminaba la anterior de SU columna y los bloques nunca
coincidían. Con display:contents las tarjetas pasan a ser hijas de la
grilla y se les da fila explícita: ahí sí arrancan emparejadas. */
@media (min-width: 981px) {
.vnv-cuerpo--2col {
display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
/* Las cinco filas se declaran a propósito: sin filas explícitas, un
grid-row negativo apunta al principio en vez de al final y las
tarjetas terminan encimadas. */
grid-template-rows: repeat(5, auto);
}
.vnv-cuerpo--2col > .vnv-col { display: contents; }
/* Columna izquierda: Cliente · Fechas · Unidad */
.vnv-cuerpo--2col > .vnv-col:first-child > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.vnv-cuerpo--2col > .vnv-col:first-child > *:nth-child(2) { grid-column: 1; grid-row: 2; }
/* La unidad arranca a la altura de Financiación y termina abajo de
Datos adicionales: ocupa las tres últimas filas de una sola pieza. */
.vnv-cuerpo--2col > .vnv-col:first-child > *:nth-child(3) {
grid-column: 1; grid-row: 3 / -1; align-self: stretch; height: 100%;
}
/* Columna derecha: Importes · Forma de pago · Financiación · Usado · … */
.vnv-cuerpo--2col > .vnv-col:last-child > *:nth-child(1) { grid-column: 2; grid-row: 1; }
.vnv-cuerpo--2col > .vnv-col:last-child > *:nth-child(2) { grid-column: 2; grid-row: 2; }
.vnv-cuerpo--2col > .vnv-col:last-child > *:nth-child(3) { grid-column: 2; grid-row: 3; }
.vnv-cuerpo--2col > .vnv-col:last-child > *:nth-child(4) { grid-column: 2; grid-row: 4; }
.vnv-cuerpo--2col > .vnv-col:last-child > *:nth-child(5) { grid-column: 2; grid-row: 5; }
}
/* La flecha pasó a ser su propio botón para que el clic en el campo no
abra la lista. Se la monta DENTRO del recuadro del campo, así visualmente
sigue siendo un solo control. */
.cvn-cat-elegir { position: relative; }
.cvn-cat-elegir > .cat-disparador { padding-right: 26px; }
.cat-flecha-btn {
position: absolute; top: 1px; right: 1px; bottom: 1px; width: 24px;
background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0 6px 6px 0;
display: inline-flex; align-items: center; justify-content: center;
}
.cat-flecha-btn:disabled { cursor: default; opacity: .5; }
.cat-flecha-btn:hover { background: rgba(255,255,255,.05); }
.cat-flecha-btn:hover .cat-flecha { color: var(--text, #ecf0f4); }
/* ---- Detalle de la unidad sin barra de desplazamiento -------------
El contenido entra completo, así que la barra sólo ensuciaba. Se
mantiene el desplazamiento por si en una pantalla chica no entra,
pero sin barra a la vista. */
.vnv-cuerpo--2col .vnv-unidad .vnp-cuerpo {
scrollbar-width: none;
-ms-overflow-style: none;
}
.vnv-cuerpo--2col .vnv-unidad .vnp-cuerpo::-webkit-scrollbar { width: 0; height: 0; }
/* ---- Estética de las pantallas de trabajo -------------------------
Estaba todo del mismo gris: los títulos de cada bloque no se
distinguían del contenido. Se los pinta con el acento del
concesionario, que ya cambia de color por marca. */
.gv-root .gv-panel-origen {
color: var(--text); opacity: 1; font-weight: 700;
}
.gv-root .gv-panel-titulo { color: var(--text, #ecf0f4); }
.gv-root .gv-panel-ico { color: var(--text); }
.gv-root .gv-panel-head {
border-bottom: 2px solid var(--accent-amber, #f2c200);
}
/* Títulos de sección dentro de cualquier pantalla de trabajo. */
.gv-root .gv-panel h3,
.gv-root .gv-panel h4,
.gv-root .gv-panel .vnb-cab h4,
.gv-root .gv-panel .per-titulo {
color: var(--text);
}
/* Encabezados de tabla: el mismo acento, más apagado para no gritar. */
.gv-root .gv-panel thead th {
color: var(--text);
border-bottom: 1px solid color-mix(in srgb, var(--accent-amber, #f2c200) 45%, transparent);
background: color-mix(in srgb, var(--accent-amber, #f2c200) 7%, var(--panel, #191d23));
}
/* Rótulos de grupo dentro de los paneles de consulta. */
.gv-root .gv-panel .vnp-grupo-tit,
.gv-root .gv-panel .cvn-grupo-tit {
color: var(--text); opacity: 1;
}
/* ---- Logos del menú más grandes ---------------------------------- */
.gv-root .gv-chip { font-size: 12.5px; padding: 6px 13px; }
.gv-root .gv-chip-marca { font-size: 12px; opacity: 1; }
.gv-root .gv-chips-label { font-size: 12px; }
.gv-root .gv-vacio-logo { height: 120px; }
.admin-usuarios-logo-btn img { height: 30px !important; }
/* ---- Barra de herramientas de tablas ------------------------------
Buscador, columnas, Excel y PDF. Se usa en todas las pantallas de
trabajo de Gestión de Ventas. Va al final para ganarle en
especificidad a las reglas de cada pantalla. */
/* La barra tiene que pasar desapercibida: es una herramienta, no el
contenido. Sin fondo propio, sin línea divisoria, con los botones
apenas insinuados hasta que se los toca. */
.bt-barra {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 7px 12px 9px; background: none; border: 0;
}
.bt-buscador {
display: flex; align-items: center; gap: 7px; flex: 1 1 190px; max-width: 320px;
background: none; border: 0; border-bottom: 1px solid var(--border, #252d3f);
border-radius: 0; padding: 4px 2px; color: var(--text);
transition: border-color .15s;
}
.bt-buscador:focus-within { border-bottom-color: var(--accent-amber, #f2c200); }
.bt-buscador svg { opacity: .55; }
.bt-buscador input {
flex: 1; min-width: 0; background: none; border: 0; outline: none;
color: var(--text, #ecf0f4); font: inherit; font-size: 13px;
}
.bt-buscador input::placeholder { color: var(--text); opacity: .55; }
/* Botones de la barra: apenas texto hasta que se los toca. */
.bt-barra > .lu-btn, .bt-menu-wrap > .lu-btn {
background: none; border: 1px solid transparent; color: var(--text);
padding: 4px 9px; font-size: 13px; font-weight: 600; border-radius: 6px;
display: inline-flex; align-items: center; gap: 5px;
}
.bt-barra > .lu-btn:hover, .bt-menu-wrap > .lu-btn:hover {
color: var(--text, #ecf0f4);
background: color-mix(in srgb, var(--accent-amber, #f2c200) 10%, transparent);
border-color: transparent;
}
.bt-barra > .lu-btn svg, .bt-menu-wrap > .lu-btn svg { opacity: .8; }
.bt-cuenta {
font-size: 12px; color: var(--text); opacity: 1;
margin-left: auto; font-variant-numeric: tabular-nums;
}
.bt-menu-wrap { position: relative; }
.bt-menu {
position: absolute; top: calc(100% + 5px); left: 0; z-index: 40;
background: var(--panel-2, #191d23); border: 1px solid var(--border, #252d3f);
border-radius: 8px; padding: 9px 11px; min-width: 285px;
max-height: 340px; overflow-y: auto; box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.bt-menu-nota {
font-size: 12px; color: var(--text);
line-height: 1.45; margin-bottom: 7px; white-space: normal;
}
.bt-menu-fila { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.bt-mover { display: flex; flex-direction: column; gap: 1px; }
.bt-mover button {
background: none; border: 1px solid transparent; color: var(--text);
border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1;
padding: 1px 3px; width: 18px;
}
.bt-mover button:hover:not(:disabled) {
border-color: var(--accent-amber, #f2c200); color: var(--text, #ecf0f4);
}
.bt-mover button:disabled { opacity: .25; cursor: default; }
.bt-menu-nombre {
flex: 1; min-width: 0; background: none; border: 1px solid transparent;
color: var(--text, #ecf0f4); border-radius: 6px; padding: 3px 5px;
font: inherit; font-size: 12px;
}
.bt-menu-nombre:hover { border-color: var(--border, #252d3f); }
.bt-menu-nombre:focus {
outline: none; border-color: var(--accent-amber, #f2c200); background: var(--panel, #14181d);
}
.bt-ico {
background: none; border: 0; color: var(--text); cursor: pointer;
display: inline-flex; padding: 3px; border-radius: 6px; width: 21px; justify-content: center;
}
.bt-ico:hover { color: #f87171; }
.bt-ico--fija { cursor: default; }
.bt-menu-agregar {
display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 7px;
background: var(--panel, #14181d); border: 1px dashed var(--border, #252d3f);
color: var(--text); border-radius: 6px; padding: 5px 8px;
font: inherit; font-size: 12px; cursor: pointer;
}
.bt-menu-agregar:hover { border-color: var(--accent-amber, #f2c200); color: var(--text, #ecf0f4); }
.bt-menu-reset {
width: 100%; margin-top: 5px; background: none; border: 0;
color: var(--text); font: inherit; font-size: 12px;
cursor: pointer; padding: 4px; text-decoration: underline;
}
.bt-menu-reset:hover { color: var(--text, #ecf0f4); }
/* Encabezados con tirador de ancho. El th tiene que quedar overflow:visible
o el recorte del texto tapa el tirador y el arrastre deja de andar. */
.bt-th-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-resize {
position: absolute; top: 0; right: -7px; width: 14px; height: 100%;
cursor: col-resize; z-index: 3; touch-action: none;
}
.bt-resize::after {
content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px;
width: 2px; background: var(--border, #252d3f); border-radius: 1px;
}
.bt-resize:hover::after { background: var(--accent-amber, #f2c200); width: 3px; }
/* El número de fila abre la ficha de esa unidad. */
.bt-abrir {
background: none; border: 1px solid transparent; color: var(--text);
border-radius: 6px; padding: 2px 7px; font: inherit; cursor: pointer;
font-variant-numeric: tabular-nums; min-width: 28px;
}
.bt-abrir:hover {
border-color: var(--accent-amber, #f2c200); color: var(--text, #ecf0f4);
background: var(--panel-2, #191d23);
}
/* Encabezados con el color del concesionario, como el resto del módulo. */
/* Encabezados: el acento se nota en la línea de abajo, no en un bloque de
color. Así la tabla se lee y el color ubica sin gritar. */
.vnl-tabla thead th, .cvn-tabla thead th {
position: relative; overflow: visible;
color: var(--text);
background: var(--panel, #191d23);
border-bottom: 2px solid color-mix(in srgb, var(--accent-amber, #f2c200) 55%, transparent);
}
/* ---- Ajustes de tamaño pedidos ------------------------------------ */
/* Menú lateral de Gestión de Ventas: un poco más de aire. */
.gv-root { --gv-side-w: 218px; }
/* Logo dentro de los modales de trabajo. */
.per-modal .per-logo, .vnv-modal .vnv-logo, .mo-cab img { height: 34px; width: auto; }
/* El menú de columnas, más liviano. */
.bt-menu { border-radius: 10px; padding: 10px 12px; }
.bt-menu-fila { padding: 3px 0; }
/* ---- Tres estados en el menú lateral -------------------------------
Verde: el modal está rehecho y revisado.
Ámbar: abre, pero todavía con el modal viejo.
Sin punto: no abre nada todavía.
El ámbar no es un error: la pantalla funciona, sólo falta rehacerla. */
/* ---- Ficha de unidad dentro de un modal de proceso ---------------- */
.proc-ficha-overlay { z-index: 70; }
.proc-ficha { width: min(680px, calc(96vw / var(--tcg-z, 1))); max-height: calc(86vh / var(--tcg-z, 1)); display: flex; flex-direction: column; }
.proc-ficha-cuerpo {
padding: 14px 16px; overflow-y: auto;
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 20px;
}
.proc-ficha-item {
display: flex; justify-content: space-between; gap: 12px;
border-bottom: 1px dotted var(--border, #252d3f); padding-bottom: 4px; font-size: 12.5px;
}
.proc-ficha-item span { color: var(--text); font-size: 12px; }
/* Número de fila en los modales de proceso. */
.proc-n-col { width: 46px; text-align: center; }
/* ---- Ficha de usado: un solo ancho ---------------------------------
La ficha se usa en dos lugares: suelta (compra de usado) y anidada
dentro del modal de ventas (usado en parte de pago). El ancho se
declara UNA sola vez para los dos, así no pueden quedar distintos.
Los dos selectores van juntos a propósito: el segundo existe porque
los modales anidados tienen una regla propia que los estira. */
.per-modal.ret-modal,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal.ret-modal,
.gv-root .gv-panel-proceso .per-overlay > .per-modal.ret-modal,
.gv-root .gv-panel-proceso .per-modal .per-overlay > .per-modal.ret-modal {
width: min(392px, calc(95vw / var(--tcg-z, 1))); max-width: 480px;
}
.ret-modal .ret-rot { flex: 0 0 104px; font-size: 12px; }
/* Todas las celdas del mismo ancho: con anchos distintos por tipo de dato
la ficha se veía despareja y costaba seguir la columna. */
.ret-modal .ret-linea .ret-ctrl { max-width: none; }
.ret-modal .ret-linea .ret-ctrl input,
.ret-modal .ret-linea .ret-ctrl select { width: 100%; }
/* Las tildes y el canal de compra, en dos columnas para no estirar. */
/* Con el modal a 505px entran los tres de «Marcas» y los cuatro del canal en
UN renglón. Antes eran dos columnas fijas porque el modal medía 392 y no
daba el ancho. Es una GRILLA y no un flex: por eso el «flex-wrap: nowrap»
escrito más arriba no hacía nada. */
.ret-modal .ret-tildes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 6px; }
.ret-modal .ret-canal .ret-tildes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ret-modal .ret-tildes .ret-tilde { min-width: 0; padding: 3px 6px; }
.ret-modal .ret-tildes .ret-tilde span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ret-modal .ret-tilde { font-size: 12px; padding: 3px 5px; }
/* ---- Compra de 0km con el mismo formato de ficha que la de usados ---
Antes eran dos columnas con el rótulo arriba de cada campo, así que el
modal salía ancho y los rótulos se leían como títulos. Ahora es una
sola columna con el rótulo a la izquierda, igual que la ficha del usado. */
/* Mismo criterio que la ficha de usado: la regla del panel de procesos
estira a 100% cualquier modal, así que hay que nombrar los contextos.
Éste va más ancho que la ficha de usado porque tiene el doble de campos
y varias notas al pie de renglón que a 392px se cortaban. */
.per-modal.com-modal--ficha,
.per-modal.vnv-modal.com-modal--ficha,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal.com-modal--ficha,
.gv-root .gv-panel-proceso .per-overlay > .per-modal.com-modal--ficha {
width: min(470px, calc(95vw / var(--tcg-z, 1))); max-width: 480px;
}
.com-modal--ficha .com-grid { display: block; }
/* Cada campo es un renglón: rótulo a la izquierda, celda a la derecha.
flex-direction: row es imprescindible, porque .per-campo trae column y
sin cambiarlo el rótulo queda arriba y todo centrado.
Vale igual para los campos simples y para los de catálogo, que usan la
misma clase pero traen un contenedor propio adentro. */
.com-modal--ficha .per-campo {
display: flex; flex-direction: row; align-items: center;
gap: 7px; margin-bottom: 4px; flex-wrap: wrap;
}
.com-modal--ficha .per-campo > span {
flex: 0 0 108px; text-align: right; font-size: 12px; line-height: 1.2;
color: var(--text); text-transform: none; letter-spacing: 0;
}
/* Nada de desplazamiento horizontal: lo que no entra baja de renglón. */
.com-modal--ficha .com-cuerpo { overflow-x: hidden; }
.com-modal--ficha .com-grid { min-width: 0; }
/* Todas las celdas terminan en la misma línea vertical. Los campos de
catálogo traen un botón "+" al costado, así que los demás reservan ese
mismo espacio: si no, unos quedan más largos que otros. */
.com-modal--ficha .per-campo > input,
.com-modal--ficha .per-campo > select,
.com-modal--ficha .per-campo > .cvn-cat-elegir,
.com-modal--ficha .per-campo > .cvn-cat-alta,
.com-modal--ficha .per-campo > .vn-monto {
flex: 1 1 auto; width: auto; min-width: 0; max-width: none;
height: 27px; min-height: 27px; padding: 0 7px; font-size: 13px;
box-sizing: border-box;
}
.com-modal--ficha .per-campo > input,
.com-modal--ficha .per-campo > select,
.com-modal--ficha .per-campo > .vn-monto,
.com-modal--ficha .per-campo > .com-fijo {
margin-right: 31px;
}
/* El campo de catálogo trae adentro el botón y el "+": se reparten el
mismo espacio que ocupa cualquier otra celda. */
.com-modal--ficha .per-campo > .cvn-cat-elegir,
.com-modal--ficha .per-campo > .cvn-cat-alta {
display: flex; gap: 4px; align-items: center; padding: 0;
}
.com-modal--ficha .cvn-cat-elegir > .cat-disparador,
.com-modal--ficha .cvn-cat-alta > input {
flex: 1 1 auto; min-width: 0; height: 27px; min-height: 27px;
padding: 0 7px; font-size: 13px;
}
.com-modal--ficha .cvn-cat-elegir > .lu-btn,
.com-modal--ficha .cvn-cat-alta > .lu-btn {
flex: 0 0 27px; width: 27px; height: 27px; min-height: 27px;
padding: 0; font-size: 13px; line-height: 25px; text-align: center;
}
/* rp (Maxi, 07/10): «Agregar» lleva texto; a 27 px quedaba tapado por la ×. */
.com-modal--ficha .cvn-cat-alta > .lu-btn:not(:last-child) {
flex: 0 0 auto; width: auto; padding: 0 10px; font-size: 12px;
}
/* Los textos de ayuda cuelgan debajo de la celda, alineados con ella, y
bajan de renglón en vez de estirar el modal. */
.com-modal--ficha .com-ayuda {
flex: 1 0 100%; margin-left: 115px; margin-top: 1px;
font-size: 12px; line-height: 1.35;
white-space: normal; overflow-wrap: anywhere;
}
/* El concesionario fijo se muestra como pastilla: mismo alto que una celda. */
.com-modal--ficha .per-campo > .com-fijo {
display: inline-flex; align-items: center; height: 27px;
padding: 0 10px; border-radius: 8px; font-size: 12px;
}
.com-modal--ficha .com-ancho { grid-column: auto; }
.com-modal--ficha .com-seccion { margin: 12px 0 5px; }
/* El pie con lo que falta cargar, sin pisar los botones. */
.com-modal--ficha .com-pie { flex-wrap: wrap; gap: 6px; }
/* ---- Compras de usados: lista y acciones -------------------------- */
.per-modal.com-lista, .per-modal.vnv-modal.com-lista { width: min(1156px, calc(96vw / var(--tcg-z, 1))); max-width: 1156px; }
.com-lista-btns { display: flex; gap: 7px; align-items: center; }
.com-lista-tabla { overflow: auto; flex: 1 1 auto; min-height: 0; }
.com-lista-acciones { display: flex; gap: 5px; justify-content: flex-end; white-space: nowrap; }
.com-lista .vnl-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/* Selector de estado dentro de la barra de compras. */
.cvn-filtro-select {
background: var(--panel-2, #191d23); border: 1px solid var(--border, #252d3f);
color: var(--text, #ecf0f4); border-radius: 8px; padding: 5px 9px;
font: inherit; font-size: 12px;
}
/* ---- Color en los títulos de TODOS los modales de trabajo ----------
El bloque anterior apuntaba a .gv-panel, pero los modales se montan
como overlay fuera de ese contenedor, así que nunca lo alcanzaban.
Estas reglas van sobre .per-modal, que es lo que todos comparten. */
.per-modal .per-titulo { color: var(--text); }
/* Sin la línea gruesa de color: en el modal de ventas quedaba como un
subrayado suelto justo debajo del buscador. Alcanza con la separación. */
.per-modal .per-cab { border-bottom: 1px solid var(--border, #2C2F36); }
/* Encabezados de tabla dentro de cualquier modal: el acento en la línea
de abajo y un tono suave en el texto, sin bloque de color. */
.per-modal thead th {
color: var(--text);
border-bottom: 2px solid color-mix(in srgb, var(--vnv-marca-luz, var(--vnv-marca, var(--accent-amber, #f2c200))) 55%, transparent);
}
/* La tabla se dibuja aunque no haya filas: los encabezados dicen qué se va a
cargar. Esconderla entera deja la pantalla muda. */
.per-modal .vn-vacio {
text-align: center; padding: 22px 12px;
color: var(--text); font-style: italic;
}
/* Rótulos de sección dentro de los modales.
Ojo: .ret-seccion y .com-seccion tienen FONDO de color, así que su texto
va en claro. Pintarlos con el acento los dejaba del mismo color que su
propio fondo y no se leían. */
/* Sólo para los modales SIN banda de color. Antes decía «.per-modal .vnb-cab
h4» a secas: misma especificidad que la regla del modal de ventas y, por
estar más abajo en el archivo, le ganaba y pintaba la letra del mismo color
que la banda. Por eso el título no se leía en ninguna tarjeta salvo la de
la unidad, que usa otra clase. */
.per-modal:not(.vnv-modal) .vnb-cab h4 {
color: var(--text);
}
.per-modal .per-grupo-tit { color: var(--text); }
.per-modal .ret-seccion,
.per-modal .com-seccion {
color: var(--vnv-marca-txt, #fff);
}
/* Las secciones de la compra de 0km, con la misma barra que las de usados. */
.com-modal--ficha .com-seccion {
padding: 3px 8px; border-radius: 6px;
background: var(--vnv-marca, #6c7684); color: var(--vnv-marca-txt, #fff);
font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
/* Las solapas activas del modal también toman el acento. */
.per-modal .proc-tab.activa,
.per-modal .lu-tab.activa {
color: var(--text);
border-bottom-color: var(--accent-amber, #f2c200);
}
/* Buscador dentro de la ficha de compra. */
.ret-buscador { padding: 0 12px 8px; }
.ret-buscador .bap-caja { width: 100%; }
.ret-buscador input { width: 100%; font-size: 13px; }
/* ---- Barra de compras de usados ------------------------------------
El buscador ocupaba todo el ancho y el botón quedaba pegado al borde
derecho de la pantalla. Se le pone tope y el botón queda al lado. */
.com-lista .cvn-barra { justify-content: flex-start; }
.com-lista .cvn-buscar { flex: 0 1 340px; max-width: 340px; }
.com-lista .cvn-filtro-origen { margin-left: auto; }
/* ---- Lugar físico destacado en la entrega --------------------------
Es el dato que decide a dónde sale la unidad, así que la celda se
distingue del resto del renglón. */
.ing-destacado {
border: 1px solid color-mix(in srgb, var(--accent-amber, #f2c200) 55%, transparent);
background: color-mix(in srgb, var(--accent-amber, #f2c200) 7%, transparent);
border-radius: 8px; padding: 6px 8px;
}
.ing-destacado .per-campo > span { color: var(--text); font-weight: 700; }
.ing-grid--2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* El destacado también funciona sobre un campo suelto, no sólo envolviéndolo. */
.per-campo.ing-destacado > span { color: var(--text); font-weight: 700; }
/* ---- Resultados del buscador: mismo alineado en 0km y usados -------
Cada pantalla emite distinta cantidad de datos por renglón, así que
la grilla se arma sola en vez de tener columnas fijas. */
.bap-item {
grid-template-columns: 92px minmax(0, 1fr) repeat(auto-fit, minmax(0, max-content));
}
.bap-donde i::before { content: ""; }
.bap-donde { opacity: 1; }
/* ---- Datos de la entrega: la tarjeta entera destacada ---------------
Antes se marcaba sólo un campo. Lo que se está por confirmar es todo el
bloque, así que el recuadro abarca los tres datos. */
.proc-destacado {
/* Amarillo pleno, como la barra de acciones: es el bloque que se está por
confirmar y tiene que saltar a la vista. Al 6% no se notaba nada. */
border: 1px solid var(--accent-amber, #f2c200);
background: var(--accent-amber, #f2c200);
/* Fino a propósito: es una barra de acción, no un panel. */
border-radius: 8px; padding: 8px 12px;
}
.proc-destacado .per-campo { gap: 2px; }
.proc-destacado .per-campo > span { font-size: 12px; letter-spacing: .3px; }
.proc-destacado input, .proc-destacado select { padding: 5px 9px; }
/* Sobre el amarillo el texto va OSCURO: el mismo amarillo sobre amarillo
era ilegible. */
.proc-destacado .per-campo > span {
color: var(--accent-texto, #131824); font-weight: 700;
}
/* La leyenda se saca de la franja: engordaba el bloque un renglón entero.
La información pasa al globito del campo (atributo title), así sigue
estando para quien la busque sin ocupar lugar. Fuera de la franja, la
leyenda se sigue mostrando como siempre. */
.proc-destacado .com-ayuda { display: none; }
/* Los campos vuelven al fondo oscuro para que se distingan del relleno. */
.proc-destacado input, .proc-destacado select {
background: var(--panel-2, #202940); color: var(--text, #ecf0f4);
border: 1px solid color-mix(in srgb, var(--accent-texto, #131824) 30%, transparent);
}
/* Buscador arriba de la lista en los modales de proceso. */
.proc-buscador { padding: 8px 14px 0; }
.proc-buscador .bap-caja, .proc-buscador input { width: 100%; }
/* ---- Alta de cliente: opciones y bloque desplegable ---------------- */
.vna-opts { display: flex; gap: 5px; flex-wrap: wrap; }
.vna-op {
display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px;
background: var(--panel-2, #161c2a); border: 1px solid var(--border, #252d3f);
color: inherit; border-radius: 6px; padding: 3px 8px; cursor: pointer; min-height: 25px;
}
.vna-op--on { border-color: var(--accent-amber, #f2c200); color: var(--text); }
.vna-cj {
width: 11px; height: 11px; border: 1px solid var(--muted, #5a626d); border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1;
}
.vna-op--on .vna-cj {
background: var(--accent-amber, #f2c200); border-color: var(--accent-amber, #f2c200);
color: #000;
}
.vna-agregar {
width: 100%; margin: 7px 0 3px; font: inherit; font-size: 12px; cursor: pointer;
background: transparent; border: 1px dashed var(--accent-amber, #f2c200);
color: var(--text); border-radius: 8px; padding: 7px;
}
.vna-bloque {
border: 1px solid color-mix(in srgb, var(--accent-amber, #f2c200) 45%, transparent);
background: color-mix(in srgb, var(--accent-amber, #f2c200) 6%, transparent);
border-radius: 8px; padding: 8px 10px 4px; margin: 6px 0 3px;
}
.vna-bloque-cab {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text);
}
.vna-quitar { background: none; border: 0; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
/* Sale desde el modal de ventas: angosto y con las celdas parejas. */
.per-modal.vna-modal { width: min(400px, calc(95vw / var(--tcg-z, 1))); max-width: 480px; }
.vna-modal .per-campo { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.vna-modal .per-campo > span { flex: 0 0 104px; text-align: right; font-size: 12px; line-height: 1.25; }
.vna-modal .per-campo > input,
.vna-modal .per-campo > .vna-opts { flex: 1 1 auto; min-width: 0; height: 27px; min-height: 27px; font-size: 13px; }
.vna-modal .per-campo > .vna-opts { height: auto; }
.vna-modal .com-ayuda, .vna-modal .vna-loc-lista { flex: 1 0 100%; margin-left: 112px; }
/* ---- Gastos de otorgamiento: tres importes en una sola celda ------- */
/* El renglón de gastos de otorgamiento tiene cuatro importes adentro y
quedaba con otro fondo que el resto de las celdas. Ahora es una celda
como cualquier otra, con los cuatro campos adentro sin caja propia. */
.per-campo--trio { align-items: center; }
/* ---- Botón "+" de los catálogos -----------------------------------
El campo y el botón viven en un flex, pero el botón no tenía ancho
propio: al achicarse la columna el flex lo comprimía y quedaba montado
sobre el borde del campo. Ahora tiene tamaño fijo y no se deja apretar.
Va sin prefijo de pantalla a propósito: el mismo campo se usa en los dos
modales de ventas y en las seis pantallas de proceso, y el problema es el
mismo en todas. */
.cvn-cat-elegir, .cvn-cat-alta {
display: flex; align-items: center; gap: 5px; min-width: 0;
}
.cvn-cat-elegir > .cat-disparador,
.cvn-cat-elegir > select,
.cvn-cat-alta > input {
flex: 1 1 auto; min-width: 0;
}
.cvn-cat-elegir > .lu-btn,
.cvn-cat-alta > .lu-btn {
flex: 0 0 auto; width: 26px; min-width: 26px; padding: 0;
text-align: center; line-height: 24px;
}
/* El de "Agregar" sí lleva texto: ése no se achica a 26 px. */
.cvn-cat-alta > .lu-btn:not(:last-child) {
width: auto; min-width: 0; padding: 3px 8px;
}
/* La ficha de usado tiene su propio alto de renglón: se respeta. */
.ret-modal .cvn-cat-elegir > .lu-btn,
.ret-modal .cvn-cat-alta > .lu-btn { height: 27px; line-height: 25px; }
/* ---- La flecha ▾ va dentro del campo, no sobre el botón "+" --------
.cat-flecha-btn se posiciona con right:1px, pero su referencia es
.cvn-cat-elegir, que contiene el campo Y el botón. Con botón, esa
esquina derecha es la del botón: la flecha le quedaba encima.
Se envuelve el campo en su propio contenedor relativo, así la flecha
se ancla al borde derecho del campo y no al del conjunto. */
.cvn-cat-elegir { position: static; }
.cat-campo {
position: relative; flex: 1 1 auto; min-width: 0; display: flex;
}
.cat-campo > .cat-disparador { flex: 1 1 auto; min-width: 0; }
/* ---- Gastos de otorgamiento: UNA celda con los cuatro importes -----
Cada importe es un con su propio recuadro, así que se veían
cuatro celdas separadas. Ahora el recuadro lo dibuja el contenedor y
los campos van sin borde ni fondo adentro: se lee como un solo control
del mismo alto que los demás. */
.vnv-trio {
display: flex; align-items: center; gap: 2px; min-width: 0; flex-wrap: nowrap;
/* Mismo fondo, borde, radio y alto que cualquier campo del modal: la celda
se veía de otro color porque usaba --panel-2, que es más claro. */
background: var(--panel-2, #202940); border: 1px solid var(--border, #2c2f36);
border-radius: 8px; padding: 0 7px; min-height: 30px; box-sizing: border-box;
}
.vnv-trio input, .vnv-trio .vn-monto {
background: none !important; border: 0 !important; border-radius: 0 !important;
height: 100%; min-height: 0; padding: 0 2px; box-shadow: none !important;
flex: 1 1 0; min-width: 0; text-align: right; font-size: 11px; color: inherit;
}
.vnv-trio input:focus, .vnv-trio .vn-monto:focus {
outline: none; background: rgba(255,255,255,.05) !important; border-radius: 3px !important;
}
/* El total va primero, más ancho y separado del desglose por una línea. */
.vnv-trio > input:first-child { flex: 1.5 1 0; font-weight: 600; font-size: 12px; }
.vnv-trio-par { flex: 0 0 auto; font-size: 11px; color: var(--text); }
.vnv-trio-p { flex: 0 0 auto; font-size: 10.5px; color: var(--text); white-space: nowrap; }
.per-campo--trio > .vnv-trio { width: 100%; }
/* ---- Boleto: las leyendas, todas juntas al pie ---------------------
Estaban repartidas entre las secciones y hacían ruido. Van en una sola
tarjeta antes de las firmas: arriba quedan sólo los datos. */
.bol .leyendas p { margin: 0 0 3px; font-size: .72em; line-height: 1.35; text-align: justify; }
.bol .leyendas p:last-of-type { margin-bottom: 5px; }
.bol .leyendas .final { border-top: 1px solid #c9ced4; padding-top: 4px; margin-top: 0; }
/* Un poco más de aire entre tarjetas: se leen como bloques separados. */
.bol .tarjeta { margin-bottom: 5px; }
.bol .eco-tarjeta { margin-top: 5px; }
/* Anchos de dato en el boleto: sp2 y sp3 completan la fila de cuatro. */
.bol .sp3 { grid-column: span 3; }
/* Condiciones generales: una cláusula por renglón, no un bloque corrido. */
.bol .leyendas .ley-tit {
font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
color: var(--text); margin-bottom: 3px;
}
.bol .leyendas p {
margin: 0 0 2px; font-size: .7em; line-height: 1.3; text-align: justify;
}
.bol .leyendas .ley-cierre { margin-top: 4px; padding-top: 3px; border-top: 1px solid #c9ced4; }
/* ---- Ficha de detalle por unidad (reserva, gastos, contactos) ----
La ficha crece: además de los datos de la unidad lleva su tabla de
renglones, con el total al pie y el botón de agregar al lado del
contador, como el resto de las tablas del sistema. */
.proc-ficha--detalle { max-width: 1080px; width: calc(96vw / var(--tcg-z, 1)); }
.pd-bloque { padding: 10px 14px 4px; border-top: 1px solid var(--linea, #252d3f); }
.pd-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-cab h4 { margin: 0; font-size: 14px; }
.pd-tabla td { padding: 2px 4px; }
.pd-tabla input, .pd-tabla select { width: 100%; min-width: 90px; }
.pd-tabla .pd-num { text-align: right; font-variant-numeric: tabular-nums; }
.pd-tabla .pd-ancha { min-width: 220px; }
.pd-tabla .pd-acc { width: 44px; text-align: center; }
.proc-det-col { width: 118px; text-align: center; white-space: nowrap; }
/* Emparejar fotos con accesorios */
.acc-empa { display: grid; gap: 8px; margin-top: 8px; }
.acc-empa-fila { display: grid; grid-template-columns: 74px minmax(180px, 1fr) minmax(220px, 1.2fr) auto auto; gap: 10px; align-items: center;
border: 1px solid var(--border, #2a3345); border-radius: 10px; padding: 8px 10px; }
.acc-empa-foto { width: 74px; height: 56px; object-fit: contain; background: var(--panel-2, #1c2432); border-radius: 8px; }
.tcg-claro .acc-empa-foto { background: #f4f6fa; }
.acc-empa-nom { font-size: 13px; font-weight: 600; color: var(--text, #e6eaf0); min-width: 0; }
.acc-empa-nom small { display: block; font-weight: 400; font-size: 12px; color: var(--text); }
.pd-tabla tfoot td { position: sticky; bottom: 0; font-weight: 700;
background: var(--panel, #14181d); border-top: 2px solid var(--accent-amber, #f2c200); }
.pd-tabla tfoot .pd-total { text-align: right; font-variant-numeric: tabular-nums; }
/* El botón de agregar va junto al contador, al pie de la tabla. */
.pd-pie { display: flex; align-items: center; gap: 10px; padding: 6px 0 2px; }
.pd-pie .lu-btn { margin-left: auto; }
/* ---- Una sola tabla para todo el módulo -------------------------------
0km usaba .cvn-tabla y usados .vn-tabla: dos aspectos para la misma cosa,
con encabezados distintos, uno alineado a la izquierda y otro al centro,
y sólo uno con el encabezado fijo. Acá quedan iguales, con el estándar
aprobado: título centrado en el color del concesionario sobre fondo
tenue, encabezado fijo al desplazar y ancho de columna arrastrable.
Va al final para ganarle a las declaraciones de arriba. */
.vn-tabla, .cvn-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.vn-tabla thead th, .cvn-tabla thead th {
position: sticky; top: 0; z-index: 2;
/* overflow visible o el tirador de ancho queda recortado y no se arrastra. */
overflow: visible;
/* Fondo sólido primero: si el navegador no entiende color-mix, el
encabezado fijo quedaría transparente y las filas se verían pasar
por debajo al desplazar. */
background: var(--panel-2, #161c2a);
background: color-mix(in srgb, var(--accent-amber, #f2c200) 7%, var(--panel-2, #161c2a));
color: var(--text);
text-align: center; padding: 6px 9px; font-size: 13px;
text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
border-bottom: 1px solid var(--border, #2c2f36);
}
.vn-tabla tbody td, .cvn-tabla tbody td {
padding: 6px 9px; border-bottom: 1px solid #22262d; color: var(--text, #c7cbd3); white-space: nowrap;
}
.vn-tabla tbody tr, .cvn-tabla tbody tr { cursor: pointer; }
.vn-tabla tbody tr:hover, .cvn-tabla tbody tr:hover {
background: color-mix(in srgb, var(--accent-amber, #f2c200) 8%, transparent);
}
.vn-tabla tbody tr.activa, .cvn-tabla tbody tr.cvn-fila--sel,
.vn-tabla tbody tr.activa:hover, .cvn-tabla tbody tr.cvn-fila--sel:hover {
background: color-mix(in srgb, var(--accent-amber, #f2c200) 20%, transparent);
}
.vn-tabla tbody tr.activa td { color: var(--text, #f0eee9); }
/* Las dos variantes que van más apretadas conservan su relleno. */
.cvn-tabla--edit tbody td { padding: 2px 4px; vertical-align: middle; }
.cvn-tabla--consulta tbody td { padding: 4px 6px; vertical-align: middle; }
/* La columna del número y la de casillas no se pintan como dato. */
.vn-tabla .proc-n-col, .cvn-tabla .proc-n-col,
.vn-tabla .sel-col, .cvn-tabla .sel-col { text-align: center; }
/* El color de cada concesionario, para cualquier modal que lo pida. Estaba
sólo dentro de .vnv-modal, así que otras pantallas no podían usarlo. */
.vnv-marca--renault { --vnv-marca: #f2c200; --vnv-marca-luz: #f2c200; --vnv-marca-txt: #1d1a06; --vnvb-sobre-marca: #1d1a06; }
.vnv-marca--peugeot { --vnv-marca: #0b4f96; --vnv-marca-luz: #4f8ef7; --vnv-marca-txt: #ffffff; --vnvb-sobre-marca: #ffffff; }
.vnv-marca--toyota { --vnv-marca: #cf2126; --vnv-marca-luz: #e2574c; --vnv-marca-txt: #ffffff; --vnv-marca-fuerte: #b3231a; --vnvb-sobre-marca: #ffffff; }
/* ---- Logo del concesionario ----
Sin recuadro: el logo ya viene recortado y en versión clara, así que se
apoya directo sobre el fondo del sistema. Alto parejo para los tres, que
tienen anchos distintos. */
.logo-dealer { flex: 0 0 auto; display: inline-flex; align-items: center; margin-right: 12px; }
.logo-dealer img { height: var(--logo-alto, 26px); width: auto; display: block; }
/* ---- Cuerpo de los modales ----
Es una columna flexible, y por defecto los bloques de adentro se encogen
cuando el contenido no entra: en vez de aparecer la barra, cada bloque se
aplasta y se corta. Con esto conservan su alto y el cuerpo desplaza. */
.com-cuerpo > * { flex-shrink: 0; }
/* ---- Columna de casillas ----
Angosta, centrada y del mismo ancho en todas las tablas, así la primera
columna de datos arranca siempre en el mismo lugar. */
.sel-col { width: 34px; text-align: center; padding: 2px 4px !important; }
.sel-col input[type="checkbox"] { cursor: pointer; margin: 0; }
/* ---- Un solo aspecto para todos los campos ----------------------------
Había tres a la vez en la misma pantalla: el input de formulario (fondo
casi negro), el disparador de catálogo (gris más claro y 1px más bajo) y
el buscador (otro gris, otro radio, otra letra). Se veían como tres
sistemas distintos. Ahora los tres comparten fondo, borde, alto y foco.
Va al final para ganarle a las reglas de arriba. */
.per-campo input, .per-campo select, .per-campo textarea,
.cat-disparador, .cvn-cat-alta input, .bap-input {
box-sizing: border-box; min-height: 30px;
background: var(--panel-2, #202940); border: 1px solid var(--border, #2c2f36); border-radius: 8px;
color: var(--text, #c7cbd3); padding: 6px 9px; font-size: 13px; font-family: inherit;
}
.per-campo input:focus, .per-campo select:focus, .per-campo textarea:focus,
.cat-disparador:focus, .cvn-cat-alta input:focus, .bap-input:focus {
outline: none; border-color: var(--accent-amber, #f2c200);
}
/* El botón de alta al costado, del mismo alto que el campo. */
.cvn-cat-elegir > .lu-btn { min-height: 30px; padding: 0 9px; flex: 0 0 auto; }
/* El buscador emergente arranca sobre la celda: mismo ancho y mismo borde. */
.cat-buscar { background: var(--panel-2, #202940); font-size: 15.5px; padding: 7px 9px; }
/* ---- Subastas ----
Cada lote es una tarjeta con su nombre, su base y su mínimo arriba, las
unidades adentro y el resultado al pie. La oferta ganadora se lee sola. */
.sub-lote { border: 1px solid var(--linea, #252d3f); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.sub-lote-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 7px 10px; background: color-mix(in srgb, var(--accent-amber, #f2c200) 6%, transparent); }
.sub-lote-tit { flex: 1; min-width: 140px; background: transparent; border: 0;
border-bottom: 1px dotted #5a626d; color: var(--text);
font: inherit; font-size: 13px; font-weight: 700; padding: 2px 0; }
.per-campo.sub-mini { flex: 0 0 auto; }
.per-campo.sub-mini input { width: 130px; }
/* La tabla del lote va en su propio marco: si no entra a lo ancho se
desplaza ella sola, sin llevarse puesto lo que está abajo. Antes, con el
navegador al 100%, el selector para sumar autos quedaba fuera de vista. */
.sub-tabla-wrap { overflow-x: auto; }
.sub-tabla { margin: 0; min-width: 100%; }
.sub-tabla input, .sub-tabla select { width: 100%; min-width: 90px; }
/* Los dos selectores de unidades: uno arma un lote de varias, el otro
subasta un auto por su cuenta. Van arriba, siempre a la vista. */
.sub-sumar, .sub-suelta { flex: 0 0 auto; max-width: 260px; font-size: 12px;
text-transform: none; letter-spacing: 0; font-weight: 400; }
.sub-suelta { margin-left: auto; }
.sub-vacio { padding: 8px 10px; }
.sub-clave { letter-spacing: 2px; font-weight: 700; white-space: nowrap; }
.sub-clave .lu-btn { margin-left: 6px; letter-spacing: 0; font-weight: 400; padding: 1px 7px; }
tr.sub-gana td { background: color-mix(in srgb, #7fc78f 16%, transparent); font-weight: 700; }
.sub-resultado { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
padding: 8px 10px; border-top: 1px solid var(--linea, #252d3f); }
.sub-resultado > div { display: flex; flex-direction: column; }
.sub-resultado span { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text); }
.sub-resultado b { font-size: 13px; font-variant-numeric: tabular-nums; }
.sub-si { color: var(--text); }
.sub-no { color: #cf7b7b; }
.sub-adjudicado { margin-left: auto; text-align: right; }
.sub-adjudicado b { color: var(--text); font-size: 14px; }
/* La celda de fotos: la miniatura abre la galería, y al lado los dos modos
de conseguirlas —del peritaje o subidas a mano—. */
.sub-fotos-celda { white-space: nowrap; }
.sub-portada-btn { position: relative; background: none; border: 0; padding: 0; margin-right: 6px;
cursor: pointer; vertical-align: middle; }
.sub-portada { width: 42px; height: 32px; object-fit: cover; border-radius: 6px; display: block; }
.sub-portada--vacia { display: flex; align-items: center; justify-content: center;
border: 1px dashed var(--linea, #252d3f); color: var(--text); font-size: 14px; }
.sub-portada-btn span { position: absolute; right: -4px; bottom: -4px; background: var(--panel, #14181d);
border: 1px solid var(--linea, #252d3f); border-radius: 10px; font-size: 12px; padding: 0 4px;
color: var(--text); }
.sub-fotos-celda .lu-btn { padding: 2px 7px; font-size: 12px; margin-left: 3px; }
/* El modal tiene alto máximo y reparte: encabezado y pie fijos, las fotos
con su propio scroll. Sin esto, con dos fotos ya se cortaba sin barra. */
.sub-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px; padding: 12px 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.sub-galeria figure { margin: 0; position: relative; }
.sub-galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px;
border: 1px solid var(--linea, #252d3f); display: block; }
.sub-galeria figcaption { font-size: 12px; color: var(--text); margin-top: 3px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-galeria .lu-btn { position: absolute; top: 5px; right: 5px; padding: 1px 7px; font-size: 12px;
background: rgba(14,17,20,.85); }
.sub-traer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sub-traer-nota { margin-left: auto; }
.sub-web { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text);
border: 1px solid #3f7a4a; border-radius: 20px; padding: 1px 7px; }
/* ---- Fichas de carga en columna ---------------------------------------
Una celda debajo de la otra, con el rótulo a la izquierda. Se carga
bajando con Enter, sin saltar de una columna a la otra buscando con el
mouse. El campo se corta en 22 caracteres, que es lo más largo que se
carga acá: un modal ancho para escribir un año de cuatro cifras es
incómodo, hay que barrer media pantalla con la vista. */
.com-grid--vertical { grid-template-columns: 1fr; gap: 6px; }
.com-grid--vertical .per-campo {
display: grid; grid-template-columns: 150px minmax(0, 22ch); align-items: center; gap: 10px;
}
/* Nada ocupa doble ancho acá: si algo lo pidiera, la grilla se partiría en
dos columnas y dejaría de ser una lista. */
.com-grid--vertical .per-campo,
.com-grid--vertical .pre-sp2 { grid-column: 1; }
.com-grid--vertical .per-campo > span { text-align: right; }
.com-grid--vertical .per-campo > small { grid-column: 2; }
/* El desplegable de catálogo trae su propia caja: se alinea igual. */
.com-grid--vertical .cvn-cat .cvn-cat-elegir { min-width: 0; }
.com-modal--angosto { width: auto; max-width: min(480px, calc(96vw / var(--tcg-z, 1))); }
/* ---- Presupuestos ----
Cada tarjeta lleva su título, lo que le corresponda al costado y el rayo
de carga rápida, que abre esos mismos campos uno debajo del otro. En la
tarjeta se carga de izquierda a derecha con Tab o con Enter. */
.pre-tarjeta { margin-bottom: 10px; }
.pre-sec-tit { flex: 0 0 auto; }
.pre-rapida {
margin-left: auto; background: rgba(255, 255, 255, .16); border: 0; border-radius: 6px;
color: inherit; font: inherit; font-size: 12px; line-height: 1; padding: 3px 8px; cursor: pointer;
}
.pre-rapida:hover { background: rgba(255, 255, 255, .3); }
/* El tilde de stock y la referencia van en la misma línea del título. */
.pre-tilde { display: inline-flex; align-items: center; gap: 5px; text-transform: none;
letter-spacing: 0; font-weight: 600; font-size: 12px; cursor: pointer; }
.pre-tilde input { margin: 0; cursor: pointer; }
.pre-ref { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 1;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px; }
.pre-sec .com-ayuda { color: inherit; opacity: 1; }
/* Los selectores que van en el rótulo, en tono con la banda. */
.sub-sumar, .sub-suelta { background: rgba(255, 255, 255, .14); border: 0; color: inherit;
border-radius: 6px; padding: 3px 7px; }
.sub-sumar option, .sub-suelta option { color: #000; }
.pre-cliente { min-width: 0; }
/* Mismo rótulo de sección que el resto del sistema (ver .ret-seccion): el
color de la marca en pleno, letra chica y clara. La banda clara que tenía
antes no se parecía a nada del proyecto. */
.pre-sec { margin: 12px 0 5px; padding: 3px 8px; border-radius: 6px;
background: var(--vnv-marca, #6c7684); color: var(--vnv-marca-txt, #fff);
font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pre-sec .com-ayuda { text-transform: none; letter-spacing: 0; font-weight: 400; }
.per-campo.pre-sp2 { grid-column: span 2; }
.pre-variantes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px; align-items: start; }
.pre-var { border: 1px solid var(--linea, #252d3f); border-radius: 8px; padding: 8px 10px; }
.pre-var-cab { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.pre-var-tit { flex: 1; background: transparent; border: 0; border-bottom: 1px dotted #5a626d;
color: var(--text); font: inherit; font-size: 13px; font-weight: 700; padding: 2px 0; }
.pre-var-campos { display: grid; gap: 4px; }
.pre-var-total { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px;
padding-top: 6px; border-top: 2px solid var(--accent-amber, #f2c200); font-size: 12px; }
.pre-var-total b { font-variant-numeric: tabular-nums; margin-left: 5px; }
.pre-agregar { align-self: start; }
/* Acciones del renglón: la principal (pasar a venta) destacada. */
/* Las acciones van todas en la misma línea. Con ancho fijo y wrap, en cuanto
una llevaba texto («Ofertas», «→ Venta») se partían en dos renglones y la
fila quedaba desalineada con las de al lado. */
.pre-acc-col { width: 1%; white-space: nowrap; }
.pre-acciones { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
.pre-acciones .lu-btn { padding: 2px 8px; font-size: 13px; line-height: 1.35; white-space: nowrap; }
.pre-chip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 20px; border: 1px solid; }
.pre-c-vig { color: var(--text); border-color: #3f7a4a; }
.pre-c-ven { color: var(--text); border-color: #7a5f2a; }
.pre-c-acp { color: var(--text); border-color: #2f5f8a; }
.pre-c-rec { color: #cf7b7b; border-color: #7a3a3a; }
/* Las mismas pastillas, en tema claro. Los cuatro colores de arriba están
hechos para el panel oscuro: sobre blanco el verde da 2,01 de contraste y
los otros tres andan por ahí. El mínimo legible es 4,5.
No es de la ficha: pasa igual en las tablas desde siempre, sólo que ahí la
pastilla era una columna más y en la ficha es LA señal de estado.
Medido en Chromium sobre #ffffff: 5,6 · 6,0 · 6,2 · 6,4. */
.mo-claro .pre-c-vig { color: #000; border-color: #8dc79c; }
.mo-claro .pre-c-ven { color: #000; border-color: #d8bd83; }
.mo-claro .pre-c-acp { color: #000; border-color: #93bede; }
.mo-claro .pre-c-rec { color: #000; border-color: #d9a2a2; }
.pre-motivos { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px; }
/* ---- Registro de boletos emitidos ----
Las acciones van juntas al final del renglón, con el botón principal
(reimprimir) primero. Un boleto anulado se lee tachado y apagado, pero
no se borra: el número tiene que seguir a la vista. */
.bol-acc-col { width: 168px; white-space: nowrap; text-align: center; }
.bol-acciones { display: flex; gap: 3px; justify-content: center; }
.bol-acciones .lu-btn { padding: 2px 7px; font-size: 13px; line-height: 1.3; }
tr.bol-anulado td { opacity: 1; text-decoration: line-through; }
tr.bol-anulado td.bol-acc-col { opacity: 1; text-decoration: none; }
/* ===== Tienda online: pantalla de publicacion ===== */
.tnd-seccion {
margin: 14px 0 8px;
padding: 3px 9px;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: 6px;
background: var(--vnv-marca, var(--accent-amber));
color: var(--vnv-marca-txt, #131824);
display: inline-block;
}
.tnd-conf {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
align-items: flex-end;
margin-bottom: 6px;
}
.tnd-campo { display: flex; flex-direction: column; gap: 3px; min-width: 190px; }
.tnd-campo--ancho { flex: 1 1 300px; }
.tnd-campo > span { font-size: 12px; color: var(--text); }
.tnd-campo input {
height: 30px;
padding: 0 8px;
border: 1px solid var(--border, #252d3f);
border-radius: 6px;
background: var(--panel-2, #202940);
color: inherit;
font-size: 13px;
}
.tnd-enlace { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.tnd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tnd-url {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tnd-url code {
flex: 1 1 260px;
padding: 6px 9px;
border: 1px dashed var(--border, #252d3f);
border-radius: 6px;
background: var(--panel-2, #202940);
font-size: 12px;
word-break: break-all;
}
.tnd-tilde-col { width: 1%; white-space: nowrap; text-align: center; }
.tnd-tilde-col .ret-tilde { padding: 2px 4px; }
.tnd-fila--on { background: rgba(76, 175, 109, .07); }
/* ===== Album de fotos de la unidad ===== */
.fu { margin: 6px 0 12px; }
.fu-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fu-subir { cursor: pointer; }
.fu-cuenta { font-size: 12px; color: var(--text); }
.fu-grilla {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.fu--compacto .fu-grilla { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.fu-item {
margin: 0; position: relative;
border: 1px solid var(--border, #252d3f); border-radius: 8px;
overflow: hidden; background: var(--panel-2, #202940);
}
.fu-item--portada { border-color: var(--accent-amber, #f2c200); }
.fu-mini {
display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
aspect-ratio: 4 / 3; background: var(--panel-3, #10131a);
}
.fu-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fu-item figcaption {
display: flex; flex-direction: column; gap: 1px; padding: 5px 7px 6px;
}
.fu-titulo {
font-size: 12px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fu-origen { font-size: 12px; color: var(--text); }
.fu-acciones {
position: absolute; right: 4px; top: 4px;
display: flex; gap: 3px; opacity: 0; transition: opacity .14s ease;
}
.fu-item:hover .fu-acciones, .fu-item:focus-within .fu-acciones { opacity: 1; }
.fu-item--portada .fu-acciones { opacity: 1; }
.fu-acciones .lu-btn { padding: 1px 6px; font-size: 12px; line-height: 1.5; }
.fu-lupa {
position: fixed; inset: 0; z-index: 60;
background: rgba(10,13,18,.86); display: grid; place-items: center; padding: 20px;
}
.fu-lupa img { max-width: 100%; max-height: calc(92vh / var(--tcg-z, 1)); object-fit: contain; border-radius: 8px; }
/* Casillero con nombre del peritaje: la × va montada arriba de la foto */
.per-foto-caja { position: relative; }
.per-foto-x {
position: absolute; right: -5px; top: -5px;
width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%;
background: #e0725f; color: #fff; font-size: 12px; line-height: 19px;
cursor: pointer;
}
/* El panel de fotos se monta encima de la pantalla de publicación */
.tnd-fotos-overlay { z-index: 50; }
.tnd-fotos-overlay .per-modal { max-width: 900px; }
/* La columna Fotos es la puerta de entrada al álbum */
.tnd-fotos-btn {
padding: 3px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--border, #252d3f);
background: var(--panel-2, #202940); color: inherit;
font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tnd-fotos-btn:hover { border-color: var(--accent-amber, #f2c200); }
.tnd-fotos-btn--vacia {
border-style: dashed;
border-color: var(--accent-amber, #f2c200);
color: var(--text);
}
/* Publicar: el estado es el botón, para que no haya que buscarlo */
.tnd-estado {
padding: 3px 11px; border-radius: 999px; cursor: pointer;
font-size: 12px; font-weight: 700; white-space: nowrap;
border: 1px solid var(--border, #252d3f);
background: var(--panel-2, #202940); color: inherit;
}
.tnd-estado--off { border-color: var(--accent-blue, #4f8ef7); color: var(--text); }
.tnd-estado--off:hover { background: var(--accent-blue, #4f8ef7); color: #000; }
.tnd-estado--on {
border-color: var(--green, #4caf6d); color: var(--text);
background: rgba(76, 175, 109, .12);
}
.tnd-estado[disabled] { opacity: .5; cursor: default; }
/* El botón de guardar contesta solo, sin cartel arriba de todo */
.tnd-guardar { min-width: 130px; transition: background .16s ease, color .16s ease; }
.tnd-guardar--listo {
background: var(--green, #4caf6d) !important;
border-color: var(--green, #4caf6d) !important;
color: #000 !important;
}
.tnd-guardar--error {
background: #e0725f !important; border-color: #e0725f !important; color: #000 !important;
}
/* Borrar y elegir tapa: siempre visibles. Escondidos detrás del mouse,
en una tablet no existen y nadie los encuentra. */
.fu-acciones {
position: static; opacity: 1;
display: flex; gap: 5px; padding: 0 6px 7px;
}
.fu-accion {
flex: 1; padding: 4px 6px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--border, #252d3f);
background: var(--panel, #1b2233); color: var(--text);
font-size: 12px; font-weight: 600; white-space: nowrap;
}
.fu-accion:hover { border-color: var(--accent-amber, #f2c200); color: var(--text); }
.fu-accion--portada {
border-color: var(--accent-amber, #f2c200); color: var(--text);
background: rgba(232,163,61,.12);
}
.fu-accion--borrar:hover { border-color: #e0725f; color: #e0725f; }
.fu-item:hover .fu-acciones, .fu-item--portada .fu-acciones { opacity: 1; }
/* Accesos de la Lista de usados, con el color del concesionario */
.lu-acc {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 17px; border-radius: 999px; cursor: pointer;
font-size: 12.5px; font-weight: 700;
border: 1px solid var(--border, #252d3f);
background: var(--panel-2, #202940); color: inherit;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lu-acc:hover { border-color: var(--accent-amber, #f2c200); }
.lu-acc[disabled] { opacity: .45; cursor: default; }
.lu-acc--marca {
background: var(--accent-amber, #f2c200);
border-color: var(--accent-amber, #f2c200);
color: var(--vnv-marca-txt, #131824);
}
.lu-acc--marca:hover { filter: brightness(1.08); }
.lu-oculta, .inf-oculta { display: none; }
/* El acceso a la web va pegado a la derecha del encabezado, separado del
título: es una salida de la pantalla, no un dato más de la cabecera. */
.tnd-ver-web, .sub-ver-web { margin-left: auto; flex: 0 0 auto; align-self: center; }
/* 22/09/2026 (Ramiro: «el botón se ve tapado»). «Ver la web» va sobre la
banda de color de la casa: queda con el fondo de la tinta de la banda y la
letra del color de la casa, así se lee en las tres y en los dos modos. */
.per-modal > .per-cab .lu-btn--accion.tnd-ver-web,
.per-modal > .per-cab .lu-btn--accion.sub-ver-web {
background: var(--vnv-marca-txt, #ffffff) !important;
color: var(--vnv-marca-fuerte, var(--vnv-marca, #0b4f96)) !important;
border-color: transparent !important; font-weight: 700; min-width: 120px; justify-content: center;
}
/* Los bloques de la tienda, parejos: mismo aire entre uno y otro y los
botones de cada bloque alineados a la derecha, del mismo ancho. */
.tnd-seccion { margin-top: 16px; }
.tnd-guardar-fila { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 4px;
padding-top: 10px; border-top: 1px solid var(--border, #2a3345); }
.tnd-guardar-fila .lu-btn, .tnd-enlace .tnd-url .lu-btn { min-width: 130px; justify-content: center; }
.tnd-enlace .tnd-url { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tnd-enlace .tnd-url code { flex: 1 1 320px; min-width: 0; }
.tnd-chip-n { margin-left: 6px; font-size: 12px; opacity: 1; }
.acc-cat { margin: 14px 0 0; }
/* Y si aun así no entra —pantalla chica, columnas anchas—, la tabla se
arrastra de costado en vez de cortarse. */
.acc-cat .cjs-tabla-caja { overflow-x: auto; }
.acc-cat .cjs-tabla { min-width: 1020px; }
.acc-cat-precio { width: 110px; text-align: right; }
.acc-cat-detalle { width: 100%; min-width: 170px; }
.acc-cat-parte { width: 118px; text-align: center; font-variant-numeric: tabular-nums; }
.acc-cat-modelos { width: 100%; min-width: 150px; }
.acc-cat-ops { display: block; font-size: 12px; color: var(--text); margin-top: 2px; }
.acc-cat-desde { font-size: 12px; color: var(--text); }
.acc-cat-foto { width: 38px; height: 28px; object-fit: cover; border-radius: 4px; }
.acc-cat-foto-caja { position: relative; display: inline-flex; align-items: center; }
.acc-cat-foto-x { position: absolute; top: -6px; right: -8px; width: 16px; height: 16px;
line-height: 14px; padding: 0; border-radius: 50%; border: 1px solid var(--border, #2b3348);
background: var(--panel, #161c2a); color: var(--text); cursor: pointer; font-size: 12px; }
.acc-cat-foto-x:hover { color: var(--red, #e2574c); }
.acc-cat-foto-poner { display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 28px; border: 1px dashed var(--border, #2b3348); border-radius: 4px;
color: var(--text); cursor: pointer; }
.acc-cat-foto-poner:hover { border-color: var(--accent-amber, #f2c200); color: var(--text); }
.acc-cat-nombre { width: 100%; min-width: 180px; }
.acc-cat-nombre-txt { cursor: text; }
.acc-cat-nombre-txt:hover { text-decoration: underline dotted; }
.acc-cat-alta { border-top: 1px dashed var(--border, #2b3348); padding-top: 8px; margin-top: 6px; }
.acc-alta-modelos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; }
.acc-alta-modelos .ret-tilde { font-size: 12px; padding: 3px 9px; }
/* Los tres niveles de comunicación */
/* El plan que pasó a otro concesionario: se lee igual, pero se distingue de
un vistazo (una marca al costado y un fondo apenas tocado). */
.car-fila-plan--otroce > td:first-child { box-shadow: inset 4px 0 0 var(--accent-amber, #f2c200); }
.car-fila-plan--otroce > td { background: color-mix(in srgb, var(--accent-amber, #f2c200) 9%, transparent); }
.tcg-claro .car-fila-plan--otroce > td { background: #fdf6dc; }
.ac-otroce { margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--accent-amber, #f2c200);
background: color-mix(in srgb, var(--accent-amber, #f2c200) 12%, transparent); font-size: 13px; }
.crm-tanda { width: min(880px, calc(96vw / var(--tcg-z, 1))); max-height: calc(88vh / var(--tcg-z, 1)); overflow: auto; padding: 16px 18px; }
.crm-tanda-tit { font-size: 17px; }
/* za: la «Tanda de hoy» a toda la pantalla (se elige con «Agrandar» / «Achicar», por persona). */
/* Con !important porque la regla general de los modales (más abajo) fija 1240 px y 90 % de alto con !important. */
.per-overlay.crm-tanda-fondo--grande { padding: 6px !important; align-items: stretch !important; justify-content: stretch !important; }
.per-overlay > .per-modal.crm-tanda.crm-tanda--grande { flex: 1 1 auto !important; align-self: stretch !important; width: auto !important; max-width: none !important;
height: auto !important; max-height: none !important; border-radius: 10px; display: block !important; }
.crm-tanda--grande .adj2-caja { max-height: calc(100vh / var(--tcg-z, 1) - 240px) !important; }
.crm-tanda-botones { display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0; }
.crm-tanda-botones .pvx-btn { min-width: 104px; }
.comu-niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.comu-nivel { text-align: left; border: 1px solid var(--border, #2a3345); border-radius: 12px; padding: 12px 14px;
background: var(--panel, #161c29); color: var(--text, #e6eaf0); cursor: pointer; font: inherit; }
.tcg-claro .comu-nivel { background: #ffffff; }
.comu-nivel.on { border-color: var(--casa-activa, #4f8ef7); box-shadow: inset 3px 0 0 var(--casa-activa, #4f8ef7); }
.comu-nivel b { display: block; font-size: 15px; margin-bottom: 4px; }
.comu-nivel span { font-size: 12.5px; color: var(--text); }
.comu-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.comu-lista li { color: var(--text); }
.comu-lista li.es-ok { color: var(--text); font-weight: 600; }
.comu-estado { font-size: 12px; font-weight: 700; border: 1px solid var(--border, #2a3345); border-radius: 999px; padding: 2px 10px; color: var(--text); }
.comu-estado.on { color: var(--text); border-color: var(--green, #4caf6d); }
/* Los dos registros de boletos: alto fijo y el botón de nuevo en el pie. */
.bad-registro { display: flex; flex-direction: column; min-height: min(calc(78vh / var(--tcg-z, 1)), 720px); }
.bad-registro .tnd-tabla-caja, .bad-registro .tnd-vacio { flex: 1 1 auto; min-height: 220px; }
.bad-registro .bad-nuevo-arriba { display: none; }
/* El pie de la casa dentro de PDA, que trae su propia hoja de estilos. */
/* La caja de Transferencia: alto fijo, como las demás del sector. */
.trf-caja { display: flex; flex-direction: column; min-height: min(calc(78vh / var(--tcg-z, 1)), 760px); }
.trf-caja .ac-sub-intro { padding: 12px 16px 0; }
.trf-caja > .cip-pie { margin-top: auto; }
.bad-pie-acciones { display: flex; align-items: center; gap: 12px; padding: 10px 2px 0; margin-top: auto; }
.acc-cat-mod-celda { display: flex; gap: 4px; align-items: center; }
.acc-cat-mod-celda .acc-cat-modelos { flex: 1 1 auto; min-width: 0; }
.acc-cat-mod-mas { flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--border, #2a3345); border-radius: 6px;
background: var(--panel-2, #1c2432); color: var(--text, #e6eaf0); cursor: pointer; font: inherit; line-height: 1; }
.tcg-claro .acc-cat-mod-mas { background: #f4f6fa; }
.acc-cat-mo { align-items: flex-end; gap: 10px; }
.acc-cat-mo-celda select { font-size: 13px; max-width: 132px; }
.acc-cat-mo-valor { width: 92px; text-align: right; }
.acc-cat-puesto b { font-variant-numeric: tabular-nums; } /* la columna «Colocado» */
/* El renglón con mano de obra propia, marcado por el fondo: un cartel al
lado de la cifra ensucia la columna y las cifras dejan de leerse en
línea. */
.acc-cat-fila--propia td { background: color-mix(in srgb, var(--accent-amber, #f2c200) 6%, transparent); }
/* Transferencia de plan: el vacío se ve apagado, no listo para usar. */
.transf-vacio { margin-top: 14px; padding: 16px; border: 1px dashed var(--border, #252d3f);
border-radius: 10px; }
.transf-vacio-tit { font-weight: 700; margin-bottom: 4px; }
.transf-vacio p { color: var(--text); font-size: 12.5px; margin: 0 0 12px; max-width: 560px; }
.transf-nuevo--off { opacity: 1; pointer-events: none; }
/* Envío bloqueado: el motivo se escribe en la misma fila, y la lista de
bloqueadas se distingue de un vistazo. */
.env-motivo { width: 100%; min-width: 170px; }
.env-bloq-fila td { background: color-mix(in srgb, var(--red, #e2574c) 7%, transparent); }
/* El tilde de cambio de titularidad, en la misma línea del título del
bloque: es una excepción del caso normal, no un dato más del cliente. */
.sus-tilde { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px;
font-size: 12px; font-weight: 400; color: var(--text); cursor: pointer; }
.sus-tilde input { margin: 0; }
/* Las tres solapas del modal de accesorios. Con bajada, porque el nombre
solo no alcanza para saber qué hay adentro de cada una. */
.pv-solapas { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--border, #252d3f); }
.pv-sol { padding: 8px 16px; border: 1px solid var(--border, #252d3f); border-bottom: 0;
border-radius: 9px 9px 0 0; background: var(--panel-2, #1b2233); color: var(--text);
cursor: pointer; text-align: left; font-size: 13px; }
.pv-sol small { display: block; font-size: 12px; font-weight: 400; color: var(--text); }
.pv-sol.es-on { background: var(--panel, #161c2a); color: var(--text, #ecf0f4); font-weight: 700;
box-shadow: inset 0 2px 0 var(--accent-amber, #f2c200); }
/* LAS SOLAPAS NO SE VAN Y EL MODAL NO SALTA (13/09/2026, Ramiro).
Dos cosas que se notan al usarlo y no al mirarlo:
1. Al recorrer una lista larga las solapas se iban para arriba con el
scroll, y para cambiar de solapa había que volver al principio. Quedan
pegadas al tope.
2. Cada solapa tiene distinto largo —la lista de clientes es larga, la
web son cuatro renglones—, así que el modal se achicaba y se agrandaba
en cada clic. Se le da el alto de la más grande y no se mueve: el ojo
no tiene que volver a buscar dónde está todo. */
/* LAS SOLAPAS NO SE VAN. Estaban FUERA del contenedor que se desplaza, así
que «sticky» no tenía contra qué pegarse: el que scrollea es el cuerpo del
modal. Se fija el modal al alto de la pantalla, las solapas quedan arriba
sin moverse y lo único que se desplaza es lo de abajo. */
.per-modal.pv-modal-alto { height: min(calc(88vh / var(--tcg-z, 1)), 900px); max-height: min(calc(88vh / var(--tcg-z, 1)), 900px);
display: flex; flex-direction: column; }
.per-modal.pv-modal-alto > .per-cab,
.per-modal.pv-modal-alto > .pv-solapas { flex: 0 0 auto; }
.per-modal.pv-modal-alto > .com-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; }
.pv-solapas { background: var(--panel, #161c2a); }
.pv-cuerpo { min-height: 0; }
.acc-cat-mo-txt { display: block; font-size: 12px; color: var(--text); margin-top: 2px; }
.acc-cat-publicar { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.acc-cat-barra { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
margin: 12px 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--border, #252d3f); }
.acc-cat-buscar { min-width: 240px; }
.acc-cat-espacio { flex: 1 1 auto; }
/* Cada cosa que se toca de vez en cuando, en su caja y con su nombre. Antes
estaban una abajo de la otra sin aire y no se sabía dónde terminaba una. */
.acc-cat-bloque { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px;
background: color-mix(in srgb, var(--panel-2, #1b2233) 60%, transparent);
border: 1px solid var(--border, #252d3f); }
.acc-cat-bloque-tit { font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text); margin-bottom: 6px; }
.acc-cat-donde { font-weight: 600; letter-spacing: .3px; }
.acc-cat-borrar { color: var(--text); }
.acc-cat-borrar:hover { color: var(--red, #e2574c); }
.acc-cat-sinfoto { color: var(--text); }
.acc-import, .acc-precios { margin: 8px 0 0; }
.acc-cat-solapas { margin: 10px 0 4px; }
.tnd-chip-n--cero { color: var(--red, #e2574c); opacity: 1; font-weight: 700; }
/* La solapa que se está arrastrando se ve levantada, y la de abajo del dedo
marca dónde va a caer. Sin esas dos señales, arrastrar es adivinar. */
.sc-tab-btn[draggable="true"] { cursor: grab; }
.sc-tab-btn[draggable="true"]:active { cursor: grabbing; }
.sc-tab-btn.sc-tab--arrastrando { opacity: .45; }
/* Cuando la lista de fichas está dibujada, la tabla se va. Se mira con «:has»
para no tener que llevar un estado más en cada una de las 21 pantallas. */
.sc-fichas { padding: 0 4px 10px; }
.sc-ver-entregadas { display: flex; align-items: center; gap: 6px; padding: 0 0 8px;
font-size: 12px; color: var(--text); cursor: pointer; }
.sc-panel:has(.sc-fichas) .sc-table-wrap { display: none; }
.inf-fichas { padding: 0 10px 10px; }
.lu-elegir-casa { max-width: 420px; padding: 16px 18px 18px; }
.lu-elegir-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lu-acc--tienda {
border-color: var(--accent-blue, #4f8ef7); color: var(--text);
}
.lu-acc--tienda:hover:not([disabled]) { background: var(--accent-blue, #4f8ef7); color: #000; }
.lu-publica {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 30px 20px 40px; text-align: center;
}
.lu-publica-tit { margin: 0; font-size: 16px; font-weight: 700; }
.tnd-campos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.tnd-guardar-fila { display: flex; justify-content: flex-end; margin: 14px 0 4px; }
/* Subasta de varias casas */
.sub-casas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ret-tilde--fijo { opacity: 1; cursor: default; }
.sub-anfitrion {
margin-left: 6px; padding: 1px 6px; border-radius: 999px;
background: var(--accent-amber, #f2c200); color: var(--vnv-marca-txt, #131824);
font-size: 12px; font-style: normal; font-weight: 700; text-transform: uppercase;
}
.sub-casa-chip {
display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
border: 1px solid var(--border, #252d3f); font-size: 12px; font-weight: 700;
color: var(--text);
}
/* Lista de usados: concesionarios que se suman, y acciones en una línea */
.lu-casas {
display: flex; gap: 9px; justify-content: center; align-items: center;
flex-wrap: wrap; padding: 10px 20px 6px;
}
.lu-casa {
display: inline-flex; align-items: center; gap: 7px;
padding: 10px 20px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--border, #2C2F36);
background: transparent; color: var(--text);
font-weight: 700; font-size: 13px;
}
.lu-casa:hover { border-color: var(--vnv-marca-luz, var(--vnv-marca, var(--accent-amber))); color: var(--text, #c7cbd3); }
.lu-casa--on {
background: var(--vnv-marca, var(--accent-amber));
border-color: var(--vnv-marca-luz, var(--vnv-marca, var(--accent-amber)));
color: var(--vnv-marca-txt, #171410);
}
.lu-casa-tilde {
display: inline-grid; place-items: center;
width: 15px; height: 15px; border-radius: 6px;
border: 1px solid currentColor; font-size: 12px; line-height: 1;
}
.lu-casas-nota { font-size: 12px; color: var(--text); }
.lu-acciones {
display: flex; gap: 10px; justify-content: center; align-items: center;
flex-wrap: nowrap; padding: 6px 20px 16px;
}
.lu-acciones .lu-acc { padding: 12px 24px; font-size: 13.5px; }
.tnd-n {
margin-left: 8px; padding: 1px 8px; border-radius: 999px;
background: rgba(0,0,0,.22); font-size: 12px; font-weight: 700;
}
.lu-acc--vender {
border-color: var(--green, #4caf6d); color: var(--text);
}
.lu-acc--vender:hover:not([disabled]) { background: var(--green, #4caf6d); color: #000; }
/* Fuera de alcance: apagado, no escondido. El día que se habilite a alguien
es prender un permiso, no rehacer la pantalla. */
.ret-tilde--off, .lu-casa--off {
opacity: 1; cursor: not-allowed; filter: grayscale(1);
}
.ret-tilde--off:hover, .lu-casa--off:hover { border-color: inherit; color: inherit; }
.sub-avisos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; grid-column: 1 / -1; }
/* Celdas de la Lista que abren un modal en vez de escribirse solas */
.lu-celda-modal {
width: 100%; padding: 4px 8px; border-radius: 6px; cursor: pointer;
border: 1px solid transparent; background: transparent;
color: inherit; font-size: 13px; font-family: inherit; text-align: left;
}
.lu-celda-modal:hover { border-color: #57B6AC; background: var(--panel-2, #202940); }
.lu-celda-modal--vacia { color: var(--text); font-weight: 600; }
.vnb-ancho { grid-column: 1 / -1; }
/* Peritajes pendientes */
.per-tarde { color: #ff5d5d; font-weight: 700; }
.per-hechas { display: flex; flex-wrap: wrap; gap: 7px; }
.per-hecha {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 11px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--border, #252d3f);
background: var(--panel-2, #202940); color: var(--text);
font-size: 12px;
}
.per-hecha:hover { border-color: var(--accent-amber, #f2c200); color: inherit; }
/* Presupuesto de reparación dentro del peritaje */
.per-modo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.per-renglon { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.per-renglon input:first-child { flex: 1 1 240px; }
.per-renglon input:nth-child(2) { width: 130px; text-align: right; }
.per-total {
margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border, #252d3f);
text-align: right; font-size: 14px;
}
.per-total b { font-size: 17px; margin-left: 8px; }
.per-campo--total input { font-size: 17px; text-align: right; }
.per-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.per-buscar {
flex: 1 1 220px; height: 30px; padding: 0 9px; font-size: 12.5px;
border: 1px solid var(--border, #252d3f); border-radius: 6px;
background: var(--panel-2, #202940); color: inherit;
}
/* Columna «Cuándo» de Peritajes hechos: todas las pastillas arrancan en el
mismo lugar, lleven o no el agregado de «de un cliente». */
.per-col-momento { text-align: left !important; white-space: nowrap; }
.per-mom-chip { display: inline-block; min-width: 132px; text-align: center; }
.per-ajeno {
margin-left: 6px; padding: 1px 7px; border-radius: 999px;
border: 1px dashed var(--border, #252d3f); font-size: 12px;
color: var(--text);
}
.per-vista {
margin: 0; padding: 11px 13px; border-radius: 8px;
background: var(--panel-2, #202940); border: 1px solid var(--border, #252d3f);
font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
max-height: 260px; overflow: auto; font-family: inherit;
}
/* Leads — no compra */
.lead-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lead-kpi {
display: flex; flex-direction: column; gap: 2px;
padding: 9px 15px; border-radius: 10px;
border: 1px solid var(--border, #252d3f); background: var(--panel-2, #202940);
}
.lead-kpi span { font-size: 12px; color: var(--text); }
.lead-kpi b { font-size: 17px; }
.lead-kpi--dest { border-color: var(--green, #4caf6d); }
.lead-kpi--dest b { color: var(--text); }
.lead-tel { color: var(--text); text-decoration: none; }
.lead-tel:hover { text-decoration: underline; }
.lead-hist { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.7; }
/* Cambio de asignación */
.asig-acciones { display: flex; gap: 9px; flex-wrap: wrap; margin: 12px 0 4px; }
.asig-columnas { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.asig-lista { max-height: 420px; overflow: auto; }
/* ── Asignación / Desasignación ────────────────────────────────────────
Los dos bloques, uno debajo del otro y a ancho completo. */
.asig-bloques { display: flex; flex-direction: column; gap: 18px; }
.asig-bloque { min-width: 0; }
.asig-bloque .asig-lista { max-height: 340px; }
/* La barra horizontal se ve siempre: con nueve columnas hay que desplazar, y
una barra escondida no avisa que hay más a la derecha. */
.asig-bloque .vn-tabla-wrap { overflow-x: auto; overflow-y: auto; }
.asig-bloque .vn-tabla-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.asig-bloque .vn-tabla-wrap::-webkit-scrollbar-thumb {
background: color-mix(in srgb, currentColor 28%, transparent); border-radius: 8px;
}
.asig-bloque .vn-tabla { min-width: max-content; }
.asig-sec-ayuda { margin-left: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; }
/* El buscador estirado, en tres pantallas a la vez ─────────────────────
«.per-buscar» trae «flex: 1 1 220px», pensado para vivir en una barra
horizontal. Dentro de «.com-cuerpo», que es una COLUMNA, ese 220px es
ALTO y el flex-grow lo estira todavía más: salía un cajón de 240px de
alto en Asignación, en Enviar a reventas y en el contacto de un lead.
Como hijo directo del cuerpo no crece ni encoge. */
.com-cuerpo > .per-buscar { flex: 0 0 auto; }
.asig-falta { color: var(--text); font-weight: 700; }
.asig-pedido {
margin: 10px 0 4px; padding: 12px 14px; border-radius: 10px;
border: 1px dashed var(--accent-amber, #f2c200);
background: var(--panel-2, #202940);
}
.proc-embebido { display: block; }
.lead-kpi--rojo { border-color: #e0725f; }
.lead-kpi--rojo b { color: #e0725f; }
/* Comparativo con dos lados: período anterior y mismo período del año pasado */
.rv-comp-card--doble { border-left: 0 !important; }
.rv-comp-card--doble .rv-comp-label {
font-size: 14px;
margin-bottom: 9px;
}
/* Dos columnas, no tres: la grilla tenía una columna de 1px para el separador
pero sólo hay dos tarjetas, así que la segunda caía en esa columna y salía
apretada en una tira. El separador es el borde de la primera. */
.rv-comp-lados {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;
}
.rv-comp-lado { min-width: 0; }
.rv-comp-lado .rv-comp-valor { white-space: nowrap; }
.rv-comp-lado:nth-child(1) { border-right: 1px solid var(--border, #252d3f); padding-right: 12px; }
.rv-comp-lado--sube .rv-comp-valor { color: var(--text); }
.rv-comp-lado--baja .rv-comp-valor { color: #e0725f; }
.rv-comp-lado--igual .rv-comp-valor { color: var(--text); }
.rv-comp-lado--neutro .rv-comp-valor { color: var(--text); font-size: 17px; }
.rv-comp-lado .rv-comp-periodo { margin: 2px 0 3px; }
.rv-comp-lado .rv-comp-detalle { margin: 0; }
.rv-comp-aviso {
margin: 0 0 8px; font-size: 11.5px; color: var(--text);
}
.rv-comp-valor--dif { font-size: 20px; }
/* Dónde estoy parado en el menú: el ítem queda encendido y hundido, con el
ícono en el color del concesionario. Antes, al abrir un modal, no quedaba
ninguno marcado y no se sabía de dónde se había entrado. */
.gv-root .gv-side-item--on {
background: rgba(255,255,255,.07);
box-shadow: inset 2px 0 0 var(--vnv-marca, var(--accent-amber, #f2c200));
}
/* Formaciones */
.for-anio { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.for-mes {
border: 1px solid var(--border, #252d3f); border-radius: 8px;
padding: 8px 9px; background: var(--panel-2, #202940); min-height: 92px;
}
.for-mes-tit {
font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
opacity: 1; margin-bottom: 6px; display: flex; justify-content: space-between;
}
.for-item {
display: flex; align-items: baseline; gap: 7px; width: 100%;
padding: 5px 7px; margin-bottom: 4px; border-radius: 6px; cursor: pointer;
border: 0; border-left: 3px solid var(--txt-2, #9aa4b2);
background: rgba(255,255,255,.04); color: inherit;
font-size: 12px; font-family: inherit; text-align: left;
}
.for-item:hover { background: rgba(255,255,255,.09); }
.for-item b { font-size: 13px; min-width: 18px; }
.for-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.for-item i { font-style: normal; font-size: 12px; opacity: 1; }
.for-item--planificada { border-left-color: var(--txt-2, #9aa4b2); }
.for-item--confirmada { border-left-color: var(--accent-amber, #f2c200); }
.for-item--realizada { border-left-color: var(--green, #4caf6d); }
.for-item--cancelada { border-left-color: #e0725f; opacity: 1; text-decoration: line-through; }
.for-vacio {
width: 100%; padding: 6px; border: 1px dashed var(--border, #252d3f);
border-radius: 6px; background: transparent; color: var(--text);
font-size: 12px; cursor: pointer; font-family: inherit;
}
.for-vacio:hover { border-color: var(--accent-amber, #f2c200); color: inherit; }
.for-avisos { display: flex; flex-direction: column; gap: 7px; }
.for-aviso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.for-barra {
position: relative; height: 18px; border-radius: 999px;
background: rgba(255,255,255,.07); overflow: hidden; min-width: 120px;
}
.for-barra span {
position: absolute; left: 0; top: 0; bottom: 0;
background: var(--green, #4caf6d); opacity: 1;
}
.for-barra b {
position: relative; display: block; text-align: center;
font-size: 12px; line-height: 18px;
}
.for-doc {
display: grid; place-items: center; font-size: 30px;
text-decoration: none; color: inherit; background: var(--panel-3, #10131a);
}
/* Las tarjetas terminan parejas: la última de cada columna se estira hasta
el borde de abajo, así las tres columnas cierran a la misma altura. */
.vnv-cuerpo .vnv-col { display: flex; flex-direction: column; gap: 16px; }
.vnv-cuerpo .vnv-col > .vnb:last-child { flex: 1; }
.vnv-cuerpo .vnv-col > .vnb:last-child > .vnb-body { height: 100%; }
.bol-cuenta {
display: inline-block; margin: 0 5px 0 10px; padding: 1px 8px;
border-radius: 999px; background: rgba(255,255,255,.09);
font-size: 12px; font-weight: 700;
}
.bol-cuenta--falta { background: var(--accent-amber, #f2c200); color: var(--vnv-marca-txt, #131824); }
.bol-mes { min-width: 130px; }
/* Menú de informes colgado del botón del grupo */
.gv-root .gv-menu-drop--informes { min-width: 268px; padding: 4px 0; }
/* BUG encontrado (las dos barras de desplazamiento): el submenú salía flotando
al costado (position: absolute; left: 100%), pero vivía adentro del
desplegable, que tiene "overflow-y: auto". Cuando un eje deja de ser
"visible", el otro pasa a "auto" solo: por eso aparecía una barra
horizontal en el desplegable —y encima recortaba el submenú, que se salía
por la derecha—, más la barra propia del submenú. Dos barras, ninguna útil.
El submenú ahora se abre hacia abajo, indentado, adentro del mismo panel
—igual que los submenús de Tablas, que nunca dieron problema. Sin nada
que sobresalga, no hay barra horizontal que mostrar. */
.gv-root .gv-inf-sub {
margin: 2px 0 5px 9px; padding-left: 8px;
border-left: 1px solid var(--border, #252d3f);
}
/* Raya al pie del grupo abierto: marca dónde terminan los subtemas y dónde
vuelve a arrancar la lista principal. Sin ella, los subtemas indentados y
los informes de abajo se leen como una sola tirada y hay que contar la
sangría para saber dónde cortó. Va en la fila entera (no en el submenú,
que está indentado) para que cruce todo el ancho del panel. */
.gv-root .gv-inf-fila:has(.gv-inf-sub) {
border-bottom: 1px solid rgba(255,255,255,.16);
padding-bottom: 6px; margin-bottom: 6px;
}
/* Cinturón y tiradores: aunque hoy no sobresalga nada, si mañana algo se pasa
de ancho preferimos que baje de línea antes que volver a la barra. */
.gv-root .gv-menu-drop { overflow-x: hidden; }
/* Dónde estoy parado */
.gv-root .gv-menu-drop-item--aca {
background: var(--vnv-marca, var(--accent-amber, #f2c200));
color: var(--vnv-marca-txt, #131824);
font-weight: 700;
}
/* ---- Modal de ventas: columnas parejas ---------------------------
Las dos columnas crecían cada una según lo que tenía adentro, así que
una terminaba mucho más abajo que la otra y quedaba un hueco largo.
Ahora la última tarjeta de cada columna estira hasta el piso y las dos
terminan a la misma altura. */
.vnv-cuerpo--2col { align-items: stretch; }
.vnv-cuerpo--2col > .vnv-col { min-height: 0; }
/* Las dos columnas cierran a la misma altura: el último elemento de cada una
—la última tarjeta o la ficha de la unidad— se lleva el sobrante.
La ficha de la unidad además se ACHICA si hace falta, porque lista muchos
datos y si no la columna izquierda terminaba mucho más abajo. Se desplaza
por dentro y nunca baja de un alto mínimo, así no desaparece como pasaba
cuando se la dejaba encoger sin piso. */
.vnv-cuerpo--2col > .vnv-col > :last-child { flex: 1 1 auto; min-height: 0; }
.vnv-cuerpo--2col > .vnv-col > .vnv-unidad {
display: flex; flex-direction: column; min-height: 150px;
}
.vnv-cuerpo--2col > .vnv-col > .vnv-unidad > .vnp-cuerpo {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
/* ---- Las dos columnas comparten los renglones -----------------------
Emparejar tarjeta por tarjeta retocando alturas no funciona: cada una
tiene distinta cantidad de campos y cualquier cambio lo desacomoda de
nuevo. Lo que hace falta es que las dos columnas usen LAS MISMAS
líneas de renglón, y de eso se encarga subgrid.
renglón 1 Cliente ↔ Importes
renglón 2 Fechas y tipo ↔ Forma de pago
renglón 3 Unidad ────────────↔ Financiación
renglón 4 │ Usado en parte de pago
renglón 5 └───────────────Datos adicionales y comisiones
La ficha de la unidad ocupa del renglón 3 al último: arranca con
Financiación y cierra con Datos adicionales, y lo que no entre se
desplaza por dentro.
Si el navegador no soporta subgrid queda el apilado de arriba, que
funciona igual aunque no empareje. */
@supports (grid-template-rows: subgrid) {
.vnv-cuerpo--2col { grid-template-rows: repeat(5, auto); align-content: start; }
.vnv-cuerpo--2col > .vnv-col {
display: grid; grid-row: 1 / -1; grid-template-rows: subgrid;
align-content: start;
}
/* OJO: nada de min-height:0 acá. Con eso los renglones se achicaban por
debajo de lo que tenían adentro y las tarjetas quedaban cortadas: a
Cliente le faltaba Vendedor 2 y a Importes, Bonificación. */
.vnv-cuerpo--2col > .vnv-col > * { min-width: 0; }
/* La ficha de la unidad, del tercer renglón hasta el final. Es la única que
puede achicarse, y lo que no entra se desplaza por dentro. */
.vnv-cuerpo--2col > .vnv-col:first-child > .vnv-unidad {
grid-row: 3 / -1; min-height: 0; overflow: hidden;
}
}
/* ============================================================
Modales de compra: más cortos y con el teclado bien encaminado
============================================================ */
/* Demo · Prioritario · Invisible, en un solo renglón y sin leyenda debajo.
Antes Invisible arrastraba dos líneas de texto y empujaba el pie fuera de
la pantalla. */
.vn-checks--fila { flex-wrap: nowrap; align-items: center; gap: 22px; margin: 8px 0 2px; }
.vn-checks--fila .vn-check { white-space: nowrap; }
/* ============================================================
Pie del modal de ventas: el lugar que no se mueve
------------------------------------------------------------
El bloque de la derecha tiene ancho fijo y ordena sus botones desde la
izquierda. Así el PRIMER botón cae siempre en el mismo punto, haya dos
botones o cuatro: se confirma la venta y el clic siguiente, sin mover la
mano, es el boleto. Alineado a la derecha no serviría: los botones se
correrían según cuántos haya.
============================================================ */
.vnv-pie-acciones {
display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
flex: 0 0 auto; min-width: 372px; justify-content: flex-start;
}
/* El rótulo del medio es lo único elástico del renglón: se achica y recorta
con puntos suspensivos antes que dejar que un botón baje de línea. */
.gv-root .gv-panel-proceso .vnv-pie-nota,
.vnv-pie > .vnv-pie-nota {
flex: 1 1 40px; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
/* ============================================================
Modal de ventas: tamaño fijo, y el zoom escala el conjunto
------------------------------------------------------------
El modal se dibuja siempre de 1010 × 812 y se achica entero con transform
cuando no entra. Antes se estiraba con vw/vh y cruzaba los cortes de
980 / 900 / 760px al cambiar el zoom: por eso al 75% se veía bien y al
100% se cortaba la última tarjeta y la de unidad se movía sola.
Las reglas van al final para ganarle por orden a las de más arriba.
============================================================ */
.vnv-modal.vnv-fijo,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal.vnv-modal.vnv-fijo {
width: 1278px !important; max-width: 1278px !important;
height: 812px !important; max-height: 812px !important;
transform-origin: top center;
display: flex; flex-direction: column; overflow: hidden;
flex: 0 0 auto;
/* El escalado deja un margen inferior NEGATIVO —de hasta 300px— para que el
layout no vea el hueco que sobra debajo del modal achicado. El efecto de
lado es que lo que venga después sube y se monta sobre el PIE del modal,
que es justo donde está el botón de cerrar: se ve, pero el clic se lo
lleva lo que quedó encima. Con posición propia y z-index, manda el modal. */
position: relative; z-index: 3;
}
/* Y el botón de salida, por encima de todo lo del propio pie. */
.vnv-pie-salir { position: relative; z-index: 4; flex: 0 0 auto; }
/* El overlay ancla arriba a la izquierda: con el escalado, centrar por flex
deja el modal corrido, porque el navegador reserva el tamaño sin escalar. */
/* Se centra: el hueco que deja el escalado ya se descuenta con los márgenes
negativos que pone useEscalaFija, así que la caja de maquetado mide lo mismo
que lo que se ve y el centrado por flex vuelve a funcionar. Antes quedaba
pegado arriba a la izquierda. */
.per-overlay:has(> .vnv-fijo) { align-items: center; justify-content: center; padding: 8px; }
/* Adentro nada se estira: el cuerpo reparte lo que hay y cada columna se
desplaza sola si le sobra contenido. Así la tarjeta de unidad deja de
crecer y encoger según lo que tenga al lado. */
.vnv-fijo > .vnv-cuerpo { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.vnv-fijo .vnv-cuerpo--2col > .vnv-col { min-height: 0; overflow: auto; }
.vnv-fijo .vnv-unidad.pnl-existente { min-height: 0; }
/* Y el panel de unidad no cambia de alto al pasarle el mouse por encima. */
.vnv-fijo .vnv-unidad.pnl-existente:hover { padding: 0; border-width: 1px; }
/* ============================================================
Un solo criterio de color para todas las pantallas internas
------------------------------------------------------------
Antes cada pantalla resolvía su cabecera por su cuenta: unas con logo,
otras sin él, unas con banda de color, otras grises. Ahora es siempre lo
mismo, en las 54 cabeceras: la franja de arriba —la del logo y el título—
va apenas teñida con el color del concesionario y cerrada por una línea
sólida de ese color. La barra del buscador, que está justo abajo, queda
neutra: si las dos llevaran color, ninguna de las dos diría nada.
Se elige la de arriba y no la del buscador porque es la que contesta
"¿dónde estoy?", que es lo que hay que ver al entrar.
============================================================ */
/* (El tinte suave de la franja quedó sin efecto: ahora la cabecera va plena.
Las reglas viven más abajo, en el bloque del criterio único.) */
/* Los submodales que se abren encima (alta de cliente, carga rápida, motivo
del rechazo) no repiten la banda: sería la tercera franja de color en la
misma pantalla y ya no distinguiría nada. */
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal > .per-cab {
background: transparent; border-bottom: 1px solid var(--border, #2C2F36);
}
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal > .per-cab .per-titulo { color: inherit; }
/* ============================================================
Un solo criterio de color para cabecera y pie de TODO modal
------------------------------------------------------------
Antes cada pantalla resolvía esto por su cuenta: algunas tenían la
cabecera pintada y el pie no, otras al revés, otras ninguna. Visualmente
quedaba desparejo. El criterio único es:
· CABECERA: siempre plena con el color de la casa. El color va ATRAS
del logo y del título, no sobre las letras.
· PIE: por defecto un tinte fuerte del mismo color con línea sólida
arriba, para que acompañe sin competir. Con el botón de la barra
pasa a pleno, igual que la cabecera.
· Los submodales que se abren encima no repiten ninguna de las dos.
· El buscador NUNCA se pinta: es un campo donde se escribe y necesita
fondo propio para leerse. Si cae adentro de la cabecera, se hunde.
============================================================ */
.per-modal > .per-cab {
background: var(--vnv-marca, var(--accent-amber, #f2c200));
border-bottom: none;
}
.per-modal > .per-cab .per-titulo,
.per-modal > .per-cab .per-sub,
.per-modal > .per-cab .per-titulo .per-dom { color: var(--vnv-marca-txt, #131824); }
.per-modal > .per-cab .per-sub { opacity: 1; }
.per-modal .per-pie {
background: color-mix(in srgb, var(--vnv-marca, var(--accent-amber, #f2c200)) 26%, var(--bg, #131824));
border-top: 2px solid var(--vnv-marca-luz, var(--vnv-marca, var(--accent-amber, #f2c200)));
color: #ffffff;
}
.per-modal .per-pie .com-ayuda,
.per-modal .per-pie .vnv-nota,
.per-modal .per-pie small { color: #fff; }
/* El pie va pleno, igual que la cabecera. Se probó con un tinte atenuado y
quedaba desparejo: un solo criterio para las dos franjas. */
.per-modal > .per-cab .lu-btn,
.per-modal > .per-pie .lu-btn {
color: var(--vnv-marca-txt, #131824);
border-color: color-mix(in srgb, var(--vnv-marca-txt, #131824) 45%, transparent);
}
.per-modal > .per-cab .lu-btn--accion,
.per-modal > .per-pie .lu-btn--accion {
background: var(--vnv-marca-txt, #131824);
color: var(--vnv-marca-luz, var(--vnv-marca, var(--accent-amber, #f2c200)));
border-color: var(--vnv-marca-txt, #131824);
}
.per-modal > .per-cab .vnv-buscador input,
.per-modal > .per-cab input[type="text"],
.per-modal > .per-cab input[type="search"] {
background: var(--bg, #131824);
border: 1px solid rgba(0,0,0,.45);
color: var(--text, #f0eee9);
}
.mo-claro .per-modal > .per-cab .vnv-buscador input,
.mo-claro .per-modal > .per-cab input[type="text"],
.mo-claro .per-modal > .per-cab input[type="search"] {
background: #ffffff; border-color: rgba(0,0,0,.25); color: #000;
}
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal > .per-cab {
background: transparent; color: inherit;
border-bottom: 1px solid var(--border, #2C2F36);
}
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .per-pie {
background: transparent; color: inherit;
border-top: 1px solid var(--border, #2C2F36);
}
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal > .per-cab .per-titulo,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal > .per-cab .per-sub { color: inherit; }
/* (El bloque de tarjetas de la tanda anterior vivía acá. Usaba
«.vista-cards > .vista-card», dos clases con hijo directo, y le ganaba por
peso al bloque nuevo: por eso la tarjeta seguía midiendo 236 y el contenido
seguía apilado. Se saca entero; la definición única está más abajo.) */
/* ============================================================
Las tarjetas, todas iguales en todo el proyecto
------------------------------------------------------------
Las de concesionario eran más chicas y de otro fondo que las de área, y en
las pantallas de segunda línea salían distintas de las de la portada.
Ahora hay una sola tarjeta:
· el mismo tamaño, más grande que antes (268 × 148 contra 236 × 132),
· el ícono o el logo SIEMPRE al costado, nunca apilado. Con el elemento
al costado, el nombre arranca en el mismo punto en todas y la mirada
baja en línea recta; apilado, cada título empezaba a distinta altura
según cuántos renglones ocupara,
· una escuadra de color arriba y a la derecha: azul del sistema en las
de área, color de la casa en las de concesionario. Sin esa escuadra la
tarjeta es un rectángulo gris más y no se lee como algo en lo que se
puede entrar,
· el concesionario no repite el nombre: el logo ya lo dice. Al lado va
la marca, que es el dato que falta.
El fondo es un azul noche con el brillo entrando en diagonal desde arriba
a la izquierda. Se arma con blancos translúcidos sobre un degradé propio,
así funciona igual sobre cualquiera de los temas.
============================================================ */
/* Tres por fila. Con el ancho libre entraban seis y la pantalla quedaba una
tira horizontal larguísima: el ojo tiene que barrer de punta a punta y
después volver. Con tres, las once tarjetas de un concesionario arman un
bloque compacto que se lee de arriba abajo.
El tope sale de la cuenta: 3 × 268 + 2 × 16 de separación. */
.vista-cards { display: flex; flex-wrap: wrap; flex-direction: row;
justify-content: center; align-items: stretch; gap: 16px; margin-bottom: 18px;
max-width: 880px; margin-left: auto; margin-right: auto; }
.vista-card {
--c: var(--accent-blue, #4f8ef7);
flex: 0 0 268px; max-width: 268px; min-height: 148px;
padding: 20px 18px; border-radius: 16px;
display: flex; flex-direction: row; align-items: center;
justify-content: flex-start; text-align: left; gap: 15px;
background:
linear-gradient(135deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.022) 30%, rgba(255,255,255,0) 58%),
/* Estaba fijo en var(--panel-2, #21262e): en modo claro las tarjetas quedaban oscuras
sobre fondo blanco y no se leía ningún título. */
var(--panel-2, #21262e);
border: 1px solid var(--border, rgba(255,255,255,.085));
border-top: 3px solid var(--c);
border-right: 3px solid var(--c);
box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -14px 24px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.32);
transition: transform .12s ease, filter .12s ease;
}
.vista-card:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
.vista-card:disabled { opacity: .5; }
.vista-card.active {
box-shadow: inset 0 1px 0 rgba(255,255,255,.09),
0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent);
}
.vista-card--giorgi { --c: #f2c200; }
.vista-card--vesubio { --c: #0b4f96; }
.vista-card--ginza { --c: #cf2126; }
/* El «min-width: 0» es lo que evita que el texto se salga de la tarjeta.
Por defecto un hijo de flex no se achica más allá de su contenido, así que
un título largo —«Informe de Ventas Concesionarios»— empujaba el bloque y
se desbordaba por la derecha en vez de partirse en dos renglones. El
overflow oculto del contenedor es la red de seguridad. */
.vista-card { overflow: hidden; }
.vista-card-body { display: flex; flex-direction: row; align-items: center; gap: 15px; text-align: left; flex: 1 1 auto; min-width: 0; }
.vista-card-body > * { min-width: 0; }
.vista-card-title { overflow-wrap: anywhere; }
.vista-card-icon { color: var(--c); flex-shrink: 0; }
.vista-card-title { font-family: inherit; font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: 0; line-height: 1.25; }
.vista-card-sub { font-family: inherit; font-size: 12px; color: var(--text);
text-transform: none; letter-spacing: 0; margin-top: 4px; }
.vista-card-badge { align-self: center; }
/* El logo va al costado, a la misma altura que el ícono de las de área, y la
marca al lado. Sin alto propio por concesionario: las tres iguales. */
.vista-card-logo-wrap { display: flex; align-items: center; flex: 0 0 auto; padding: 0; }
.vista-card-logo-wrap img { height: 30px; width: auto; max-width: 120px; }
.vista-card--logo .vista-card-sub { margin-top: 0; letter-spacing: .06em; font-size: 12.5px; }
/* La pantalla de entrada tenía su propio juego de reglas: tres columnas
fijas, alto distinto para los concesionarios y todo apilado en vertical.
Ahora la tarjeta es una sola en todas las pantallas, así que ese bloque se
neutraliza en vez de dejarlo compitiendo. */
@media (min-width: 860px) {
/* «max-width: none» era para anular las tres columnas fijas de la regla
vieja, pero de paso mataba el tope de tres por fila y entraban cinco o
seis. El tope vuelve: 3 × 268 + 2 × 16 de separación. */
.vista-cards--entrada {
display: flex; grid-template-columns: none; gap: 16px;
max-width: 880px; margin-left: auto; margin-right: auto;
}
.vista-cards--entrada .vista-card,
.vista-cards--entrada.vista-cards--dealers .vista-card {
min-height: 148px; padding: 20px 18px; align-items: center; text-align: left;
justify-content: flex-start; gap: 15px;
}
/* El «flex: 0 0 auto» de la regla vieja le prohibía encogerse, y por eso el
título largo salía de la tarjeta en vez de partirse en dos renglones. */
.vista-cards--entrada .vista-card-body {
flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px;
flex: 1 1 auto; min-width: 0;
}
.vista-cards--entrada .vista-card-icon { margin-top: 0; }
.vista-cards--entrada .vista-card-title { margin-top: 0; }
.vista-cards--entrada.vista-cards--dealers { max-width: 880px; }
}
/* El grupo de tarjetas se lee como un bloque, no como piezas sueltas
flotando sobre el fondo: un recuadro tenue las envuelve. El recuadro se
dibuja sobre el contenedor, así que crece con la cantidad de tarjetas y no
hay que tocarlo cuando se agrega una. */
.vista-cards {
padding: 18px; border-radius: 16px;
border: 1px solid rgba(255,255,255,.06);
background: rgba(255,255,255,.014);
}
/* Sin tarjetas no se dibuja el recuadro vacío. */
.vista-cards:empty { display: none; }
/* ============================================================
La barra del buscador, adentro de la franja de color
------------------------------------------------------------
La cápsula y las píldoras estaban pensadas para vivir sobre el panel
oscuro: filo gris y letra gris claro. Al quedar sobre el color de la casa
desaparecían — en Jorge Giorgi directamente no se leían, porque el
amarillo es claro y la letra también.
Además convivían dos amarillos: el de la marca (#f2c200) y el ámbar del
sistema (#f2c200), que se colaba en el foco, en el hover y en las
píldoras. Acá se usa uno solo: el de la casa.
El filo es «la tinta de la franja», no un blanco fijo: en Ginza y Vesubio
da blanco, y en Jorge Giorgi da negro, que es lo único que se lee sobre
amarillo.
============================================================ */
.per-modal > .per-cab .vnvb-caja,
.vnv-fijo .vnvb-caja {
border: 1px solid color-mix(in srgb, var(--vnv-marca-txt, #131824) 55%, transparent);
color: var(--vnv-marca-txt, #131824);
}
.vnv-fijo .vnvb-caja:hover {
border-color: color-mix(in srgb, var(--vnv-marca-txt, #131824) 80%, transparent);
}
.vnv-fijo .vnvb-caja:focus-within {
border-color: var(--vnv-marca-txt, #131824);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--vnv-marca-txt, #131824) 22%, transparent);
}
.vnv-fijo .vnvb-caja .bap-input { color: var(--vnv-marca-txt, #131824); }
.vnv-fijo .vnvb-caja .bap-input::placeholder {
color: color-mix(in srgb, var(--vnv-marca-txt, #131824) 62%, transparent);
}
/* Píldoras: filo de la tinta y letra de la tinta. Al pasar por encima se
invierten, que es la única forma de que se note el cambio sin meter un
tercer color. */
/* LA PASTILLA SE APOYA EN LA FRANJA DE COLOR DE LA CASA, NO EN EL PANEL.
Por eso su tinta es «--vnv-marca-txt», que es justamente la tinta pensada
para ir sobre el color pleno: blanca en Vesubio y Ginza, casi negra en
Jorge Giorgi.
OJO CON ESTO. En la versión «bv» yo lo cambié a «var(--text)» creyendo que
la pastilla se apoyaba en el panel. Lo había medido, pero en una página de
prueba armada a mano donde la franja no tenía fondo, así que la medición
decía cualquier cosa. El resultado en la aplicación real fue el contrario
del buscado: en modo claro «--text» es oscuro y quedaba oscuro sobre azul
en Vesubio y Ginza, y en modo oscuro es casi blanco y quedaba blanco sobre
amarillo en Jorge Giorgi. Ramiro lo reportó con fotos de las dos cosas.
Si hay que volver a tocar esto, medir sobre la franja pintada. */
.vnv-fijo .vnvb-pill,
.vnv-fijo .vnvb-pill--doble > button {
background: transparent;
border: 1px solid color-mix(in srgb, var(--vnv-marca-txt, #131824) 55%, transparent);
color: var(--vnv-marca-txt, #131824);
}
/* Al pasar el mouse se rellenaban con la tinta entera: en Jorge Giorgi eso
es casi negro y quedaba un bloque oscuro sobre el amarillo, más pesado que
el resto de la barra. Ahora el relleno es un velo de esa misma tinta —se
nota el cambio sin tapar nada— y lo que marca el foco es el filo, que pasa
a pleno. Vale para las tres casas, así el gesto es el mismo en todas. */
.vnv-fijo .vnvb-pill:hover,
.vnv-fijo .vnvb-pill--doble > button:hover {
background: color-mix(in srgb, var(--vnv-marca-txt, #131824) 16%, transparent);
color: var(--vnv-marca-txt, #131824);
border-color: var(--vnv-marca-txt, #131824);
}
.vnv-fijo .vnvb-acciones .mo-tema:hover {
background: color-mix(in srgb, var(--vnv-marca-txt, #131824) 16%, transparent);
color: var(--vnv-marca-txt, #131824);
}
.vnv-fijo .vnvb-pill--doble { border: 1px solid color-mix(in srgb, var(--vnv-marca-txt, #131824) 55%, transparent); }
.vnv-fijo .vnvb-pill--doble > button { border: 0; }
.vnv-fijo .vnvb-pill--doble > button + button {
border-left: 1px solid color-mix(in srgb, var(--vnv-marca-txt, #131824) 45%, transparent);
}
/* La consulta activa queda rellena, como en Vesubio. */
/* La encendida sí se rellena con el color de la casa, y la tinta es la que
corresponde a ese color pleno: para eso existe «--vnvb-sobre-marca». */
.vnv-fijo .vnvb-pill--soltar,
.vnv-fijo .vnvb-pill.activa {
background: var(--vnv-marca, #6c7684);
color: var(--vnvb-sobre-marca, #ffffff);
border-color: var(--vnv-marca, #6c7684);
}
/* No hay reglas de «mo-claro» para estas pastillas a propósito: la franja es
del color de la casa en los DOS modos, así que la tinta correcta es la de
la franja y no la del tema. Acá hubo un bloque que las pintaba de gris
claro con letra oscura y rompía Jorge Giorgi. */
.vnv-fijo .vnvb-acciones .mo-tema {
background: transparent; color: var(--vnv-marca-txt, #131824);
border: 1px solid color-mix(in srgb, var(--vnv-marca-txt, #131824) 55%, transparent);
}
/* Un solo amarillo adentro del modal: el ámbar del sistema deja de asomar. */
.vnv-fijo .vnb-cab { background: var(--vnv-marca, var(--accent-amber, #f2c200)); }
.vnv-fijo .vnb-cab h4 { color: var(--vnv-marca-txt, #131824); }
.vnv-fijo .vnb { border-left-color: var(--vnv-marca, var(--accent-amber, #f2c200)); }
/* ============================================================
Que el color de la franja no se tape con el color del texto
------------------------------------------------------------
El título salía invisible: hay reglas anteriores que lo pintan con
var(--accent-amber), y adentro de Gestión de Ventas ese ámbar se
reemplaza por el color de la casa. O sea, letra del color de la casa
sobre franja del color de la casa. En Ginza se veía rojo oscuro sobre
rojo, y en Jorge Giorgi directamente no se veía.
No alcanza con escribirlo de nuevo: esas reglas tienen cinco clases y
ganan por especificidad. Hay que repetir la cadena entera.
Lo mismo con el pie, que se quedaba con el fondo del panel.
============================================================ */
.per-modal .per-titulo,
.per-modal > .per-cab .per-titulo,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab .per-titulo,
.gv-root .gv-panel .per-modal > .per-cab .per-titulo {
color: var(--vnv-marca-txt, #131824);
}
.per-modal > .per-cab .per-titulo .per-dom,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab .per-titulo .per-dom {
color: var(--vnv-marca-txt, #131824); opacity: .8;
}
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab {
background: var(--vnv-marca, var(--accent-amber, #f2c200));
border-bottom: none;
}
.gv-root .gv-panel-proceso > .per-overlay > .per-modal .per-pie {
background: var(--vnv-marca, var(--accent-amber, #f2c200));
border-top: none;
color: var(--vnv-marca-txt, #131824);
}
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-pie .lu-btn {
color: var(--vnv-marca-txt, #131824);
border-color: color-mix(in srgb, var(--vnv-marca-txt, #131824) 45%, transparent);
}
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-pie .lu-btn--accion {
background: var(--vnv-marca-txt, #131824);
color: var(--vnv-marca, var(--accent-amber, #f2c200));
border-color: var(--vnv-marca-txt, #131824);
}
/* ============================================================
Menú lateral
------------------------------------------------------------
Va fijo a la izquierda y la aplicación se corre para dejarle lugar. En vez
de tocar cada pantalla, se empuja el contenido del shell con un padding.
Cuando Gestión de Ventas está abierta, el menú se pliega a un rail de
íconos: el módulo tiene su propio menú y no entran los dos. El rail no
desaparece —salir tiene que estar siempre a mano— y con el ☰ se despliega
ENCIMA del contenido, no empujándolo, para que el módulo no se reacomode
entero cada vez que se abre.
============================================================ */
:root { --ml-ancho: 196px; --ml-rail: 52px; }
/* Gestión de Ventas primero y separada: no es un área más. */
.ml-item--gv .ml-ico { color: var(--text); }
/* El logo pasa de 22 a 46px: era casi ilegible y es lo primero que se mira. */
.ml-marca { height: 46px; width: auto; max-width: 100%; object-fit: contain; }
/* Los concesionarios con el logo en miniatura, sin punto de color. */
.ml-casa-logo { height: 15px; width: auto; max-width: 108px; object-fit: contain; }
/* Los tres niveles. La sangría es lo único que los distingue: un color o un
filo por nivel serían tres señales para decir lo mismo. */
.ml-grupo { display: flex; flex-direction: column; }
/* El punto lleva el color de la casa: es lo que se sigue viendo cuando el
menú está plegado a rail y el nombre desaparece. */
.ml-punto {
width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
background: var(--casa, #6c7684);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--casa, #6c7684) 28%, transparent);
}
/* El menú lateral viejo repetía los tres colores a mano. Son los mismos de
CASA_COLORES; se dejan apuntando a las variables del tema para que cambiar
un color de casa siga siendo tocar UN solo lugar. */
.ml-casa--giorgi { --casa: var(--tcg-casa-giorgi, #f2c200); }
/* El contenido se corre para no quedar debajo del menú. */
.app-shell { padding-left: calc(var(--ml-ancho) + 18px); }
/* El módulo reservaba siempre 52px (el riel plegado), pero con el menú
abierto son 196px: por eso la barra de Volver / Datos / Tablas quedaba
tapada. Ahora el hueco acompaña el estado del menú. */
.app-shell--modulo { padding-left: var(--ml-rail) !important; }
/* Si el menú se abre ENCIMA (plegado y desplegado a mano), no se corre nada:
flota sobre el contenido y se cierra solo al elegir. */
.app-shell--modulo:has(.ml-root--encima) { padding-left: var(--ml-rail) !important; }
@media print {
.app-shell { padding-left: 0 !important; } }
/* El aviso de guardado caído. Va abajo a la izquierda, del lado opuesto a la
pastilla de versión, y por encima de todo: si no se guarda, es lo más
importante que hay en pantalla. */
.aviso-guardado {
/* Sin esto el cartel se come los clics del rincón de abajo a la izquierda,
que ahora es donde va «Nueva compra». Sólo la cruz de cerrar recibe. */
pointer-events: none;
position: fixed; left: 14px; bottom: 14px; z-index: 9999;
display: flex; align-items: flex-start; gap: 10px; max-width: 380px;
background: var(--panel-2, #3a1113); border: 1px solid var(--red, #e2574c); border-left: 4px solid var(--red, #e2574c);
color: #fff; border-radius: 10px; padding: 11px 12px;
font-size: 12.5px; line-height: 1.45;
box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.aviso-guardado b { color: #fff; }
.aviso-guardado-punto {
width: 9px; height: 9px; border-radius: 50%; background: var(--red, #e2574c); flex: 0 0 auto;
margin-top: 4px; animation: aviso-late 1.6s ease-in-out infinite;
}
@keyframes aviso-late { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.aviso-guardado-det { color: var(--text); font-size: 12px; margin-top: 3px; }
.aviso-guardado-x {
pointer-events: auto;
background: none; border: 0; color: var(--text); font-size: 17px; line-height: 1;
cursor: pointer; padding: 0 2px; margin-left: auto;
}
.aviso-guardado-x:hover { color: #fff; }
@media print { .aviso-guardado { display: none; } }
/* «res-pie-datos» y «pre-acciones» llevan «pie» o «acciones» en el nombre
pero están en el MEDIO de su pantalla: son un panel de datos de Reserva y
una fila de botones del cuerpo de Preentrega, no la franja de abajo. Se
dejan neutras a propósito, y la prueba que recorre las pantallas avisa si
alguna vuelve a pintarse. */
.per-modal .res-pie-datos,
.per-modal .pre-acciones { background: transparent; }
/* ============================================================
Lista de Usados: barra de trabajo en vez de portada
------------------------------------------------------------
Era la única pantalla que se presentaba como portada: título centrado
grande, bajada debajo, y los botones sueltos flotando en el medio. Con
nueve elementos en tres alturas distintas, encontrar «Vender usado»
costaba más que en cualquier otra pantalla.
Ahora es una barra de trabajo como el resto: franja arriba con el título,
los concesionarios y las acciones en un renglón, y la tabla enseguida.
============================================================ */
.lu-modulo {
max-width: 1600px; margin: 0 auto;
border: 1px solid color-mix(in srgb, var(--vnv-marca, var(--accent-amber, #f2c200)) 58%, transparent);
border-radius: 12px; overflow: hidden;
}
.lu-modulo .lu-cab { align-items: flex-start; }
.lu-cab-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* El Excel es temporal: chico, arriba y separado de las acciones de abajo,
para que no se confunda con el trabajo de todos los días. */
.lu-excel-chico {
display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
font-size: 12px; font-weight: 600; border-radius: 6px; padding: 4px 10px;
color: var(--vnv-marca-txt, #131824);
border: 1px solid color-mix(in srgb, var(--vnv-marca-txt, #131824) 50%, transparent);
background: transparent;
}
.lu-excel-chico:hover { background: color-mix(in srgb, var(--vnv-marca-txt, #131824) 16%, transparent); }
.lu-aviso-carga { margin: 8px 14px 0; font-size: 12px; color: var(--text); }
/* Concesionarios y acciones en un solo renglón. */
.lu-modulo .lu-casas { padding: 10px 14px 0; justify-content: flex-start; }
.lu-modulo .lu-acciones {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 10px 14px 12px; justify-content: flex-start;
}
.lu-modulo .lu-guardado { margin-left: auto; }
/* ============================================================
Informes: el mismo encuadre y las mismas franjas que el resto
------------------------------------------------------------
Los informes se montan por su cuenta, con CSS propio, y por eso quedaron
afuera de todo lo que hicimos: sin recuadro, sin color arriba y sin color
abajo. No tienen «per-cab» ni «per-pie», pero sí dos bloques que cumplen
esa función: el renglón con el nombre del informe y sus subtemas, y el pie
con los totales. Se les da el mismo tratamiento.
============================================================ */
.gv-root .inf-root {
max-width: 1600px; margin: 0 auto;
border: 1px solid color-mix(in srgb, var(--vnv-marca, var(--accent-amber, #f2c200)) 58%, transparent);
border-radius: 12px; overflow: hidden;
}
/* El renglón del nombre del informe hace de franja de arriba.
Alto FIJO: sin esto la franja crece o se achica según cuántos subtemas
tenga cada informe —Stock tiene catorce, otros dos— y todo lo de abajo se
corre de lugar al cambiar de informe. El usuario pierde de vista dónde
estaban los botones. Con el alto clavado, los subtemas se acomodan adentro
y la pantalla de abajo no se mueve nunca.
El alto son dos renglones de botones: es lo que necesita el informe con
más subtemas. Si algún día hace falta un tercero, se cambia acá y en un
solo lado. */
.gv-root .inf-root .inf-filtros--subtemas {
background: var(--vnv-marca, var(--accent-amber, #f2c200));
color: var(--vnv-marca-txt, #131824);
border-radius: 0; padding: 8px 12px; margin: 0;
min-height: var(--inf-alto-subtemas, 78px);
align-content: flex-start;
overflow: auto;
}
.gv-root .inf-root .inf-filtros--subtemas .inf-donde-fila {
color: var(--vnv-marca-txt, #131824); font-weight: 700; font-size: 13.5px;
}
.gv-root .inf-root .inf-filtros--subtemas button {
color: var(--vnv-marca-txt, #131824);
border-color: color-mix(in srgb, var(--vnv-marca-txt, #131824) 55%, transparent);
background: transparent;
}
.gv-root .inf-root .inf-filtros--subtemas button:hover {
background: color-mix(in srgb, var(--vnv-marca-txt, #131824) 16%, transparent);
border-color: var(--vnv-marca-txt, #131824);
}
.gv-root .inf-root .inf-filtros--subtemas button.active,
.gv-root .inf-root .inf-filtros--subtemas .inf-vista--on {
background: var(--vnv-marca-txt, #131824);
color: var(--vnv-marca, var(--accent-amber, #f2c200));
border-color: var(--vnv-marca-txt, #131824);
}
/* Y el pie de totales hace de franja de abajo. */
.gv-root .inf-root .inf-pie {
background: var(--vnv-marca, var(--accent-amber, #f2c200));
color: var(--vnv-marca-txt, #131824);
border-top: none; padding: 8px 12px;
}
.gv-root .inf-root .inf-pie *:not(input):not(select):not(textarea) { color: inherit; }
.gv-root .inf-root .inf-pie .inf-btn {
background: transparent;
border: 1px solid color-mix(in srgb, var(--vnv-marca-txt, #131824) 55%, transparent);
}
/* El renglón del buscador queda neutro: es donde se escribe. */
.gv-root .inf-root .inf-filtros--acciones { background: transparent; }
/* ============================================================
Encuadre de módulo: ninguna pantalla de punta a punta
------------------------------------------------------------
Peritajes se veía mejor que Entregas y la diferencia no era el ancho: era
que estaba metida en una caja con borde y aire alrededor. Las que ocupaban
toda la ventana parecían dos franjas sueltas y no una pantalla.
Una sola regla para todas: tope de ancho, centrado, borde y esquinas.
La excepción son las de tabla. Registro de Ventas, Stock o Asignación
tienen quince o veinte columnas, y con el tope de formulario quedarían con
barra horizontal permanente. Se las detecta con :has(table) y se les da un
tope más grande; siguen leyéndose como módulo porque lo que lo define es el
borde y el aire, no el ancho.
============================================================ */
.gv-root .gv-panel-proceso > .per-overlay { padding: 14px 16px 18px; }
.gv-root .gv-panel-proceso > .per-overlay > .per-modal {
max-width: var(--ancho-modulo, 1180px);
/* El filo gris no se veía contra el fondo negro: el módulo parecía flotar
sin bordes. Se pinta del color de la casa, fino, para que envuelva el
modal y se entienda dónde empieza y dónde termina. */
border: 1px solid color-mix(in srgb, var(--vnv-marca, var(--accent-amber, #f2c200)) 58%, transparent);
border-radius: 12px;
overflow: hidden;
}
/* Las de tabla respiran. */
.gv-root .gv-panel-proceso > .per-overlay > .per-modal:has(table) {
--ancho-modulo: 1600px;
}
/* El modal de ventas ya tiene su propio tamaño de diseño y se escala: no
entra en esta regla. */
.gv-root .gv-panel-proceso > .per-overlay > .per-modal.vnv-fijo {
max-width: 1278px !important;
}
/* ============================================================
Modal de ventas: que se lea
------------------------------------------------------------
El modo compacto había bajado la letra hasta 8,5–10,5px para que entrara
todo en los 812px de alto que tenía clavados. Ya no hace falta: el alto lo
pone el contenido y el bloque se escala entero. Con la letra chica y
además escalada al 86%, los rótulos quedaban en 9px reales.
Los títulos de las tarjetas eran lo peor: 9,5px en mayúsculas y con
interletrado, casi ilegibles. Suben a 13 y en negrita.
============================================================ */
.vnv-fijo .vnb-cab { padding: 7px 12px; }
.vnv-fijo .vnb-cab h4 { font-size: 16.5px; font-weight: 700; letter-spacing: .03em; }
.vnv-fijo .vnb-body { padding: 10px 12px; gap: 7px; }
.vnv-fijo .vnb .per-campo { grid-template-columns: 158px 1fr; gap: 10px; }
.vnv-fijo .vnb .per-campo > span { font-size: 16px; }
.vnv-fijo .vnb .per-campo > input,
.vnv-fijo .vnb .per-campo > select,
.vnv-fijo .vnb .cat-disparador,
.vnv-fijo .vnv-mesanio input { min-height: 34px; padding: 5px 10px; font-size: 17px; }
.vnv-fijo .per-campo--calc strong { min-height: 34px; padding: 5px 10px; font-size: 17.5px; }
.vnv-fijo .vnb .com-ayuda { font-size: 13.5px; }
.vnv-fijo .per-titulo { font-size: 19px; }
/* El panel de la unidad, que es media pantalla, también estaba en letra
de 8,5 y 9px. */
.vnv-fijo .vnp-cab { padding: 7px 12px; font-size: 15px; }
.vnv-fijo .vnp-grupo h5 { font-size: 14.5px; letter-spacing: .03em; padding: 7px 0 4px; }
.vnv-fijo .vnp-lista > div { min-height: 24px; }
.vnv-fijo .vnp-lista dt { font-size: 14.5px; }
.vnv-fijo .vnp-lista dd { font-size: 16px; }
.vnv-fijo .vnp-sindato { font-size: 14.5px; }
.vnv-fijo .vnp-hero strong { font-size: 17px; }
.vnv-fijo .vnp-hero p { font-size: 15px; }
/* ============================================================
Todo lo que va sobre la franja usa la tinta de la casa
------------------------------------------------------------
Quedaban textos en blanco sobre el amarillo de Jorge Giorgi: la nota del
pie, la ayuda, los rótulos. Cada uno tenía su color propio puesto a mano.
En vez de perseguirlos uno por uno, la franja fija el color y todo lo de
adentro lo hereda. Lo único que se exceptúa son los campos, que tienen
fondo propio.
============================================================ */
.per-modal > .per-cab,
.per-modal .per-pie,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal .per-pie {
color: var(--vnv-marca-txt, #131824);
}
.per-modal > .per-cab *:not(input):not(select):not(textarea):not(.bap-lista):not(.bap-lista *),
.per-modal .per-pie *:not(input):not(select):not(textarea),
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab *:not(input):not(select):not(textarea):not(.bap-lista):not(.bap-lista *),
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-pie *:not(input):not(select):not(textarea) {
color: inherit;
}
/* La nota de ayuda se distingue por opacidad, no por otro color. */
.per-modal .per-pie .vnv-pie-nota,
.per-modal .per-pie .com-ayuda,
.per-modal > .per-cab .per-sub { opacity: 1; }
/* Los botones del pie: filo de la tinta, y el principal relleno. Antes se
perdían contra la franja porque conservaban el filo gris del panel. */
.per-modal .per-pie .lu-btn,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-pie .lu-btn {
background: transparent;
border: 1px solid color-mix(in srgb, var(--vnv-marca-txt, #131824) 60%, transparent);
}
.per-modal .per-pie .lu-btn:hover:not(:disabled),
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-pie .lu-btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--vnv-marca-txt, #131824) 14%, transparent);
border-color: var(--vnv-marca-txt, #131824);
}
.per-modal .per-pie .lu-btn--accion,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-pie .lu-btn--accion {
background: var(--vnv-marca-txt, #131824) !important;
color: var(--vnv-marca, var(--accent-amber, #f2c200)) !important;
border-color: var(--vnv-marca-txt, #131824);
font-weight: 700;
}
/* «Cargar venta» arranca deshabilitado hasta que se elige la unidad, y salía
apagado como si estuviera roto. Se lo deja con el mismo aspecto que
habilitado —es el destino del recorrido y tiene que verse— pero sigue sin
responder al clic: sólo cambia el cursor. */
.per-modal .per-pie .lu-btn--accion:disabled,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-pie .lu-btn--accion:disabled {
opacity: 1; cursor: not-allowed;
}
/* ============================================================
La franja de abajo, para TODAS las pantallas
------------------------------------------------------------
Veníamos agregando clases de a una cada vez que aparecía una pantalla sin
color abajo, y siempre faltaba otra. Inventarié el archivo entero buscando
clases con «pie», «footer» o «acciones»: hay setenta. Estas son las que
hacen de franja de abajo de una pantalla — el resto son barras internas de
tabla o filas de botones dentro del cuerpo, que NO se pintan.
Están todas acá, en un solo lugar. Cuando aparezca una nueva, se agrega a
esta lista y no en una regla aparte.
============================================================ */
.per-modal .per-pie,
.per-modal .cvn-pie,
.per-modal .vnv-pie,
.per-modal .mig-pie,
.per-modal .sch-pie,
.per-modal .ret-pie,
.per-modal .acc-pie,
.per-modal .enc-pie,
.per-modal .pd-pie,
.per-modal .sd-pie,
.per-modal .sd-modal-pie,
.per-modal .bp-modal-pie,
.per-modal .inf-pie,
.per-modal .lu-informe-pie,
.per-modal .lu-pie,
.per-modal .bt-pie,
.per-modal .rv-footer,
.per-modal .pat-footer,
.per-modal .pda-footer,
.per-modal .sc-modal-footer,
.per-modal .am-tabla-pie,
.per-modal .asg-fila-botones-pie,
.per-modal .asg-form-acciones,
.per-modal .sch-modal-acciones,
.per-modal .vna-pie-btns {
background: var(--vnv-marca, var(--accent-amber, #f2c200));
border-top: none;
color: var(--vnv-marca-txt, #131824);
}
.per-modal .per-pie *:not(input):not(select):not(textarea),
.per-modal .cvn-pie *:not(input):not(select):not(textarea),
.per-modal .vnv-pie *:not(input):not(select):not(textarea),
.per-modal .mig-pie *:not(input):not(select):not(textarea),
.per-modal .sch-pie *:not(input):not(select):not(textarea),
.per-modal .ret-pie *:not(input):not(select):not(textarea),
.per-modal .acc-pie *:not(input):not(select):not(textarea),
.per-modal .enc-pie *:not(input):not(select):not(textarea),
.per-modal .pd-pie *:not(input):not(select):not(textarea),
.per-modal .sd-pie *:not(input):not(select):not(textarea),
.per-modal .sd-modal-pie *:not(input):not(select):not(textarea),
.per-modal .bp-modal-pie *:not(input):not(select):not(textarea),
.per-modal .inf-pie *:not(input):not(select):not(textarea),
.per-modal .lu-informe-pie *:not(input):not(select):not(textarea),
.per-modal .lu-pie *:not(input):not(select):not(textarea),
.per-modal .bt-pie *:not(input):not(select):not(textarea),
.per-modal .rv-footer *:not(input):not(select):not(textarea),
.per-modal .pat-footer *:not(input):not(select):not(textarea),
.per-modal .pda-footer *:not(input):not(select):not(textarea),
.per-modal .sc-modal-footer *:not(input):not(select):not(textarea),
.per-modal .am-tabla-pie *:not(input):not(select):not(textarea),
.per-modal .asg-fila-botones-pie *:not(input):not(select):not(textarea),
.per-modal .asg-form-acciones *:not(input):not(select):not(textarea),
.per-modal .sch-modal-acciones *:not(input):not(select):not(textarea),
.per-modal .vna-pie-btns *:not(input):not(select):not(textarea) { color: inherit; }
.per-modal .per-pie .lu-btn,
.per-modal .cvn-pie .lu-btn,
.per-modal .vnv-pie .lu-btn,
.per-modal .mig-pie .lu-btn,
.per-modal .sch-pie .lu-btn,
.per-modal .ret-pie .lu-btn,
.per-modal .acc-pie .lu-btn,
.per-modal .enc-pie .lu-btn,
.per-modal .pd-pie .lu-btn,
.per-modal .sd-pie .lu-btn,
.per-modal .sd-modal-pie .lu-btn,
.per-modal .bp-modal-pie .lu-btn,
.per-modal .inf-pie .lu-btn,
.per-modal .lu-informe-pie .lu-btn,
.per-modal .lu-pie .lu-btn,
.per-modal .bt-pie .lu-btn,
.per-modal .rv-footer .lu-btn,
.per-modal .pat-footer .lu-btn,
.per-modal .pda-footer .lu-btn,
.per-modal .sc-modal-footer .lu-btn,
.per-modal .am-tabla-pie .lu-btn,
.per-modal .asg-fila-botones-pie .lu-btn,
.per-modal .asg-form-acciones .lu-btn,
.per-modal .sch-modal-acciones .lu-btn,
.per-modal .vna-pie-btns .lu-btn {
background: transparent;
border: 1px solid color-mix(in srgb, var(--vnv-marca-txt, #131824) 60%, transparent);
}
.per-modal .per-pie .lu-btn--accion,
.per-modal .cvn-pie .lu-btn--accion,
.per-modal .vnv-pie .lu-btn--accion,
.per-modal .mig-pie .lu-btn--accion,
.per-modal .sch-pie .lu-btn--accion,
.per-modal .ret-pie .lu-btn--accion,
.per-modal .acc-pie .lu-btn--accion,
.per-modal .enc-pie .lu-btn--accion,
.per-modal .pd-pie .lu-btn--accion,
.per-modal .sd-pie .lu-btn--accion,
.per-modal .sd-modal-pie .lu-btn--accion,
.per-modal .bp-modal-pie .lu-btn--accion,
.per-modal .inf-pie .lu-btn--accion,
.per-modal .lu-informe-pie .lu-btn--accion,
.per-modal .lu-pie .lu-btn--accion,
.per-modal .bt-pie .lu-btn--accion,
.per-modal .rv-footer .lu-btn--accion,
.per-modal .pat-footer .lu-btn--accion,
.per-modal .pda-footer .lu-btn--accion,
.per-modal .sc-modal-footer .lu-btn--accion,
.per-modal .am-tabla-pie .lu-btn--accion,
.per-modal .asg-fila-botones-pie .lu-btn--accion,
.per-modal .asg-form-acciones .lu-btn--accion,
.per-modal .sch-modal-acciones .lu-btn--accion,
.per-modal .vna-pie-btns .lu-btn--accion {
background: var(--vnv-marca-txt, #131824) !important;
color: var(--vnv-marca, var(--accent-amber, #f2c200)) !important;
border-color: var(--vnv-marca-txt, #131824);
}
/* Gestoría de usados mete adentro un proceso «embebido» —Transferencias,
Bajas— que es una pantalla entera metida como solapa. Ese proceso trae su
propio pie, y la regla de la franja lo pintaba: quedaba una banda de color
en el MEDIO de la pantalla, y encima el recuadro parecía envolver la tabla
en vez del modal. El pie de un proceso embebido no es la franja de abajo
del módulo: es una fila de acciones más, y va neutra. */
.proc-embebido .per-pie,
.proc-embebido .vnv-pie,
.proc-embebido .cvn-pie {
background: transparent;
color: inherit;
border-top: 1px solid var(--border, #2C2F36);
}
.proc-embebido .per-pie *:not(input):not(select):not(textarea),
.proc-embebido .vnv-pie *:not(input):not(select):not(textarea) { color: inherit; }
.proc-embebido .per-pie .lu-btn,
.proc-embebido .vnv-pie .lu-btn {
border-color: var(--border, #2C2F36);
}
.proc-embebido .per-pie .lu-btn--accion,
.proc-embebido .vnv-pie .lu-btn--accion {
background: var(--vnv-marca-luz, var(--accent-amber, #f2c200)) !important;
color: var(--accent-texto, #131824) !important;
border-color: var(--vnv-marca-luz, var(--accent-amber, #f2c200));
}
/* Estas son la fila de botones DENTRO del pie, no el pie. No se pintan —el
pie ya tiene color— pero tienen que quedar transparentes: con fondo propio
tapaban la franja justo donde están los botones, y la pantalla parecía sin
color abajo. */
.per-modal .vnv-pie-acciones,
.per-modal .per-pie-acciones,
.per-modal .cvn-pie-nota,
.per-modal .vnv-pie-nota { background: transparent; color: inherit; }
/* Los submodales que se abren encima no repiten la franja. */
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .per-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .cvn-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .vnv-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .mig-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .sch-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .ret-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .acc-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .enc-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .pd-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .sd-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .sd-modal-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .bp-modal-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .inf-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .lu-informe-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .lu-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .bt-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .rv-footer,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .pat-footer,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .pda-footer,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .sc-modal-footer,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .am-tabla-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .asg-fila-botones-pie,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .asg-form-acciones,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .sch-modal-acciones,
.per-overlay .per-overlay:not(.vnl-pantalla) .per-modal .vna-pie-btns {
background: transparent; color: inherit;
border-top: 1px solid var(--border, #2C2F36);
}
/* EL LOGO DE GIORGI YA VIENE CON LA TINTA QUE CORRESPONDE (24/09/2026, Ramiro).
Acá se invertía el logo de Renault, porque la regla suponía que en la franja
iba la silueta BLANCA —cierto para Vesubio y Ginza, que tienen tinta blanca—.
Pero «LogoDealer» elige el logo por la tinta de la casa, y Giorgi tiene tinta
OSCURA: le manda el logo a COLOR, que ya es la tinta correcta para su banda
amarilla. Invertirlo lo volvía blanco, y blanco sobre amarillo casi no se
lee: así se veía el logo lavado en Accesorios y en todas las pantallas de
Giorgi. Se saca la inversión; el logo va como viene. */
/* El buscador de compras no tiene por qué ocupar media pantalla: con eso el
botón de Nueva compra se iba al medio y había que ir a buscarlo. */
.cvn-modal .cvn-barra .cvn-buscar { flex: 0 1 300px; max-width: 300px; min-width: 170px; }
/* ============================================================
Buscadores de catálogo: la opción marcada tiene que LEERSE
------------------------------------------------------------
El renglón resaltado se pintaba con el color de la marca del concesionario
y la letra encima quedaba tapada — en Peugeot, texto ámbar sobre azul.
El resalte pasa a ser neutro (una gris clara que funciona con las tres
marcas) y el color de la casa queda como un filo a la izquierda, que marca
igual de bien sin comerse el texto.
============================================================ */
.cat-op--foco {
background: rgba(255,255,255,.10) !important;
color: var(--text, #e8ecf2) !important;
box-shadow: inset 3px 0 0 var(--vnv-marca, var(--accent-amber, #f2c200));
}
.cat-op--crear { color: var(--text); font-weight: 700; }
.cat-op--crear.cat-op--foco {
background: rgba(232,163,61,.16) !important;
color: var(--text) !important;
}
.cat-op--act { color: var(--text); font-weight: 600; }
.cat-op--act.cat-op--foco { color: var(--text) !important; }
/* Y el tema claro, donde el blanco translúcido no se ve. */
.mo-claro .cat-op--foco { background: rgba(0,0,0,.07) !important; color: var(--bg, #131824) !important; }
/* Volver al vencimiento automático después de haberlo puesto a mano. */
.pre-recalc {
font: inherit; font-size: 12px; background: none; border: 0; padding: 2px 0 0;
color: var(--text); cursor: pointer; text-align: left;
}
/* ============================================================
PostVenta · venta de accesorios
============================================================ */
/* Importe por accesorio: es lo que permite medir pesos, no sólo órdenes. */
.acc-item-imp { width: 108px; text-align: right; flex: 0 0 auto; }
/* Días que pasaron sin llamar / sin colocar: pasado el plazo, en rojo. */
.pv-viejo { color: #e0725f; font-weight: 700; }
.pv-compro td { background: color-mix(in srgb, var(--vnv-marca, #4caf6d) 9%, transparent); }
/* El renglón para anotar qué contestó el cliente, debajo de su fila. */
.pv-registro { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 7px 4px; }
.pv-obs { flex: 1 1 220px; min-width: 150px; }
/* La cotización del dólar vive con los indicadores: se toca poco y se mira
cada vez que se lee una cifra en US$. */
.pv-dolar { cursor: text; }
.pv-dolar input {
width: 100%; font-size: 19px; font-weight: 700; text-align: left;
background: transparent; border: none; border-bottom: 1px dashed var(--border, #252d3f);
color: inherit; padding: 1px 0;
}
.lead-kpi i { display: block; font-style: normal; font-size: 12px; opacity: 1; margin-top: 2px; }
.per-barra--der { justify-content: flex-end; }
/* Marcador de versión: chico, abajo a la derecha, arriba de todo lo demás.
Se pone legible al pasar el mouse; el resto del tiempo casi no se nota.
No se imprime ni tapa nada porque no recibe clics. */
.tcg-version {
/* Se mudó de abajo-DERECHA a abajo-IZQUIERDA. En la derecha está el botón
de cerrar de casi todos los pies: aunque ya no roba el clic, lo tapaba y
no se veía. La izquierda del pie lleva conteos y notas —texto, no
botones—, así que ahí no estorba a ninguna acción.
Además va chica y atenuada: sirve para confirmar de un vistazo qué
versión está publicada, no para leerla todo el día. */
position: fixed; left: 10px; bottom: 8px; z-index: 100000;
font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1;
padding: 4px 9px; border-radius: 999px; opacity: 1;
background: var(--bg, #131824); color: var(--text);
border: 1px solid color-mix(in srgb, var(--accent-amber, #f2c200) 55%, transparent);
/* VUELVE a pointer-events:none. Cuando se la hizo tocable pasó a robar los
clics: está fija abajo a la derecha, con z-index 100000, y ése es
justamente el rincón donde vive el botón de cerrar de casi todos los
pies. Medido en la captura de Ventas VN: la chapa tapa el «Cerrar» y el
clic lo recibe ella. Por eso «el botón no funciona».
Ningún rincón de la pantalla es seguro para un elemento fijo y tocable:
arriba a la derecha están los cerrar de cabecera, abajo a la izquierda
ahora va «Nueva compra». Así que la chapa vuelve a ser sólo información,
y el diagnóstico se abre desde el panel de ajustes (el engranaje). */
pointer-events: none;
user-select: none; white-space: nowrap;
}
.mo-claro .tcg-version, .app-shell--claro .tcg-version { background: #ffffff; color: var(--text); border-color: #d8a24a; }
/* Y con un modal o un panel de procesos abierto, la chapa se esconde. Es la
única solución que no se muda de un problema a otro: los dos rincones de
abajo tienen botones —a la derecha el cerrar, a la izquierda «Nueva
compra»— y no hay esquina libre mientras hay un modal en pantalla.
El marcador se mira en la portada, al volver de publicar; ahí no hay nada
que tapar. Los navegadores sin :has() la siguen mostrando, y no molestan
porque no recibe clics. */
.app-shell:has(.per-overlay) .tcg-version,
.app-shell:has(.gv-panel-proceso) .tcg-version,
.app-shell:has(.gv-pantalla-suelta) .tcg-version { display: none; }
@media print { .tcg-version { display: none !important; } }
/* ── Tesorería sigue el color de la casa ────────────────────────────────
Se aplica al encabezado y al marco. Las dos tarjetas de adentro conservan
sus acentos —azul para Caja, ámbar para Posición— porque ahí el color es
lo que las distingue, no decoración. */
.tesoreria-panel--casa {
border: 1px solid color-mix(in srgb, var(--casa) 45%, transparent);
border-radius: 14px; padding: 4px 12px 12px;
}
.tesoreria-panel--casa .tesoreria-cab-casa {
background: var(--casa); color: var(--casa-tinta);
margin: 0 -12px 14px; padding: 12px 16px; border-radius: 12px 12px 0 0;
}
.tesoreria-panel--casa .tesoreria-cab-casa .tesoreria-titulo-principal {
margin: 0; color: var(--casa-tinta);
}
/* La franja de abajo, igual que la de arriba: el marco cierra. Sin esto el
panel quedaba con el color sólo en la cabecera y abierto abajo. */
.tesoreria-panel--casa::after {
content: ""; display: block; height: 34px; margin: 14px -12px -12px;
background: var(--casa); border-radius: 0 0 12px 12px;
}
/* ── El acceso a cargar el usado en parte de pago ───────────────────────
Era un botón chico («lu-btn--sm») dentro de un encabezado pintado con el
color de la casa. En Jorge Giorgi quedaba negro sobre negro —el mismo
choque de siempre— y encima era el más difícil de acertar de la pantalla,
siendo una de las acciones que más se usan. Ahora es grande, con el
contraste resuelto a mano y sin depender de ninguna variable. */
.vnv-usado .vnb-cab { gap: 10px; }
.vnv-usado-alta {
font-size: 13px !important; font-weight: 700 !important;
padding: 7px 16px !important; border-radius: 8px !important;
white-space: nowrap; flex: 0 0 auto;
background: var(--panel-3, #131824) !important; color: var(--text, #f5f7fa) !important;
border: 1.5px solid rgba(255,255,255,.5) !important;
}
.vnv-usado-alta:hover:not(:disabled) { background: var(--panel, #2a3346) !important; border-color: #fff !important; }
.vnv-usado-alta:disabled { opacity: .45; }
/* ── El alta del usado, con la pinta de los demás ────────────────────
Era angosto y con los rótulos pegados a la derecha en dos columnas, que es
un formato de planilla vieja: al lado del modal de ventas parecía de otro
sistema. Más ancho, esquinas del mismo radio, sombra para que se despegue
del que tiene detrás, y los rótulos a la izquierda como en el resto.
No cambia el orden de los campos: cambia cómo se ve. */
.ret-modal {
width: min(560px, calc(96vw / var(--tcg-z, 1))) !important;
border-radius: 14px;
box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
border: 1px solid var(--border, #252d3f);
}
/* La superficie del alta, la MISMA que la de los demás modales.
Se pintaba con «var(--bg)», y «.mo-claro» redefine «--panel» pero NO
«--bg»: en tema claro quedaba un modal oscuro con la tinta oscura del
tema claro encima. Medido: 1,21 de contraste en los rótulos, el mínimo
es 4,5. Era la «letra gris que no se nota» y también por qué este modal
parecía de otra época que el resto de la venta. */
.ret-modal { background: var(--panel, #1b2233) !important; }
.ret-modal .ret-rot {
text-align: left;
font-size: 12px; color: var(--text, #ecf0f4); font-weight: 600;
}
.ret-modal .ret-linea { margin-bottom: 7px; }
.ret-modal .ret-ctrl input,
.ret-modal .ret-ctrl select,
.ret-modal .ret-ctrl textarea {
height: 34px !important; min-height: 34px !important;
border-radius: 8px; font-size: 13px;
}
.ret-modal .ret-ctrl .lu-btn {
flex: 0 0 34px !important; width: 34px !important;
height: 34px !important; min-height: 34px !important;
line-height: 32px !important; border-radius: 8px;
}
/* Las franjas de sección, como las del modal de ventas: redondeadas y
separadas, no rectángulos pegados a todo lo ancho. */
.ret-modal .ret-seccion { border-radius: 8px; margin: 12px 0 8px; letter-spacing: .4px; }
/* El modal de compra del usado que sale de acá: un centímetro más ancho
—de 392 a 430px— para que los campos respiren. En celular sigue mandando
el 95% de la pantalla, así que ahí no cambia nada. */
.ret-modal { width: min(468px, calc(95vw / var(--tcg-z, 1))); }
.ret-modal .ret-rot { flex: 0 0 130px; }
/* ═══════════════════════════════════════════════════════════════════════
CELULAR
Dos pantallas quedaban inusables en el teléfono. Van al final para que
ganen a todo lo anterior, que es lo que manda con @media.
═══════════════════════════════════════════════════════════════════════ */
/* ── Pantalla de ingreso ────────────────────────────────────────────────
El teclado tenía las columnas en píxeles fijos (3 × 84 = 252 más las
separaciones y el relleno del marco). En una pantalla de 320 no entraba
y los botones se salían del borde. Ahora las columnas se reparten el
ancho disponible, así entra en cualquier teléfono. */
/* Compra directa de usado: sin texto adentro, el renglón no tiene que ocupar
lugar. Se apaga entero en vez de dejar una barra vacía. */
.ret-quien--vacia { display: none; }
/* «Elegí primero el modelo…» ocupaba un renglón fijo debajo de Versión desde
que se abre el modal. El motivo sigue estando en el globito del botón «+»,
que además está apagado: se ve igual, sin gastar alto. Sólo acá: en otras
pantallas el renglón no molesta. */
.com-modal--ficha .cvn-bloqueo { display: none; }
/* ============================================================
Informe de Ventas: los cuatro indicadores al pie
------------------------------------------------------------
Plan de Ahorro dejó de ser un bloque suelto debajo de los otros tres y
pasó a ser el cuarto indicador, adentro de la misma grilla. Se corrige
de paso lo que salía cortado en la hoja impresa. Va al final de baseCss
porque tiene que ganarle por orden al bloque de impresión de más arriba.
============================================================ */
/* Los cuatro indicadores en una sola línea, del mismo ancho y ocupando todo
el renglón. Con «auto-fit + minmax» el navegador decidía cuántos entraban y
cambiaba de tres a cuatro columnas según el ancho; con cuatro fijas siempre
son cuatro y se reparten el total. */
.ivj-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.ivj-ind-card { display: flex; flex-direction: column; min-width: 0; }
/* Las dos tarjetas cortas (comparación y Plan de Ahorro) tienen poco adentro y
quedaban mucho más bajas que el ranking. Se estiran para cerrar parejas. */
.ivj-ind-card--vs .ivj-vs-caja, .ivj-ind-card--plan .ivj-plan-filas { flex: 1 1 auto; }
.ivj-ind-card--vs .ivj-vs-valor { font-size: calc(var(--ivj-letra, 1) * 34px); }
.ivj-ind-card--vs .ivj-vs-caja, .ivj-ind-card--plan .ivj-plan-filas {
display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.ivj-ind-card--plan .ivj-plan-fila {
border-top: 1px solid var(--border); border-bottom: none; padding: 7px 2px;
}
.ivj-ind-card--plan .ivj-plan-fila:first-of-type { border-top: none; }
@media print {
/* 1) La hoja se arma como una columna: encabezado, tabla, y los cuatro
indicadores empujados al pie con "margin-top: auto". Antes iban
pegados abajo de la tabla y el espacio sobrante quedaba al final. */
.ivj-reporte {
display: flex !important; flex-direction: column !important;
min-height: 196mm !important;
}
/* Se saca el "zoom: .78" de más arriba: achicaba TODO el informe, que es
justo lo contrario de lo que hace falta. El tamaño se controla ahora
tipografía por tipografía, más abajo. */
/* Sólo para el que NO fue medido: al que lleva «data-ajuste» le puso el
zoom la medición de ivjAjustarAUnaHoja y esa medida tiene que ganar. */
.ivj-panel > .ivj-reporte:not([data-ajuste]) { zoom: 1 !important; }
.ivj-indicadores {
/* Con la tabla estirada (punto 5) los indicadores ya quedan abajo
solos; acá sólo se separa del último renglón para que no se peguen.
Los cuatro en una línea, repartiéndose el ancho de la hoja. */
margin-top: 5mm !important; margin-bottom: 0 !important;
gap: 5px !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
align-items: stretch !important;
}
/* 2) Nada de recortes. El tope de alto con "overflow: hidden" era lo que
cortaba el último puesto del ranking y de localidades, y también la
línea de aclaración de cada tarjeta. */
.ivj-ind-card { max-height: none !important; overflow: visible !important; padding: 4px 6px !important; }
.ivj-rank-list { overflow: visible !important; }
.ivj-rank-nombre { overflow: visible !important; text-overflow: clip !important; }
/* La tabla arrastraba de la pantalla un alto máximo de 560px con recorte:
con muchos vendedores, las últimas filas no se imprimían. */
.ivj-tabla-scroll { max-height: none !important; overflow: visible !important; }
/* 3) El doble renglón del encabezado (Retoma → x VN · % · x VO · % ·
Total · %) se veía pisado: los th quedan "sticky" de la pantalla y
al imprimir se superponen entre sí. En papel no hay nada que fijar. */
.ivj-tabla thead th, .ivj-tabla .ivj-th-sub th {
position: static !important; top: auto !important; z-index: auto !important;
vertical-align: middle !important; white-space: nowrap !important;
overflow: visible !important; line-height: 1.25 !important;
}
.ivj-tabla .ivj-th-sub th { padding: 3px 5px !important; font-size: calc(var(--ivj-letra, 1) * 12px) !important; font-weight: 700 !important; }
/* 4) Las columnas de % de Retoma salían en gris clarito, casi ilegibles
en papel: son las únicas celdas que NO son un input, así que la
regla que pinta de negro los inputs (.ivj-celda) nunca las tocaba y
se quedaban con el gris del tema oscuro. */
.ivj-tabla tbody td, .ivj-tabla tbody td .ivj-num { color: #000 !important; }
/* 5) La tabla se estira hasta donde arrancan los indicadores. Sin esto
quedaba una franja blanca larga en el medio de la hoja: los
indicadores abajo, la tabla arriba y nada entre medio. Estirándola,
los renglones quedan más altos y más fáciles de leer. */
.ivj-tabla-scroll { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; }
.ivj-tabla { flex: 1 1 auto !important; height: auto !important; }
/* 6) Letras y números más grandes, que es lo que se pidió. Con el zoom
apagado hay lugar de sobra: antes todo esto se veía al 78%. */
.ivj-tabla { font-size: calc(var(--ivj-letra, 1) * 26px) !important; }
.ivj-tabla thead th { font-size: calc(var(--ivj-letra, 1) * 14px) !important; padding: 4px 6px !important; }
.ivj-tabla tbody td { font-size: calc(var(--ivj-letra, 1) * 26px) !important; padding: 3px 4px !important; }
.ivj-num, .ivj-celda { font-size: calc(var(--ivj-letra, 1) * 26px) !important; font-weight: 700 !important; }
.ivj-col-vendedor { font-size: calc(var(--ivj-letra, 1) * 16px) !important; }
/* Ancho fijo también en papel: las columnas no cambian de tamaño según
lo que tengan adentro. */
.ivj-celda { min-width: 30px !important; }
.ivj-fila-totales td { font-size: calc(var(--ivj-letra, 1) * 29px) !important; }
.ivj-fila-totales td .ivj-celda, .ivj-fila-totales td .ivj-num { font-size: calc(var(--ivj-letra, 1) * 29px) !important; }
.ivj-fila-totales td.ivj-col-destacada .ivj-celda { font-size: calc(var(--ivj-letra, 1) * 33px) !important; }
/* 7) Las tarjetas del pie, legibles: antes el ranking se leía a 7,5px. */
.ivj-ind-titulo { font-size: calc(var(--ivj-letra, 1) * 11.5px) !important; margin-bottom: 3px !important; }
.ivj-ind-card--vs .ivj-vs-valor { font-size: calc(var(--ivj-letra, 1) * 30px) !important; }
.ivj-ind-nota { font-size: calc(var(--ivj-letra, 1) * 8px) !important; margin-top: 3px !important; line-height: 1.25 !important; }
.ivj-ind-vacio { font-size: calc(var(--ivj-letra, 1) * 9px) !important; }
.ivj-vs-valor { font-size: calc(var(--ivj-letra, 1) * 20px) !important; }
.ivj-rank-fila { padding: 2px 0 !important; gap: 4px !important; }
.ivj-rank-pos { font-size: calc(var(--ivj-letra, 1) * 8.5px) !important; width: 12px !important; }
.ivj-rank-nombre { font-size: calc(var(--ivj-letra, 1) * 10px) !important; margin-bottom: 2px !important; }
.ivj-rank-valor { font-size: calc(var(--ivj-letra, 1) * 9px) !important; }
.ivj-rank-pct { font-size: calc(var(--ivj-letra, 1) * 8px) !important; }
.ivj-rank-barra-track { height: 3px !important; }
/* 8) Plan de Ahorro, ya como cuarta tarjeta: se apagan los estilos del
bloque suelto que tenía antes (borde grueso, ancho de 240px). */
.ivj-ind-card--plan { border-left: 3px solid var(--accent-amber, #f2c200) !important; max-width: none !important; }
.ivj-ind-card--plan .ivj-plan-fila { padding: 5px 2px !important; border-top-color: #ddd !important; }
/* Suscripciones y Facturaciones son dato de negocio, no adorno: Ramiro los
manda por correo todas las semanas y a 11 y 17px no se leían. Suben los
dos, el rótulo y el número. */
.ivj-plan-label { font-size: calc(var(--ivj-letra, 1) * 14px) !important; font-weight: 700 !important; }
.ivj-ind-card--plan .ivj-ind-titulo { font-size: calc(var(--ivj-letra, 1) * 14px) !important; }
.ivj-plan-input {
width: 74px !important; font-size: calc(var(--ivj-letra, 1) * 24px) !important; font-weight: 700 !important;
padding: 2px 5px !important; border: 1px solid #bbb !important; border-radius: 5px !important;
color: #000 !important; background: #fff !important;
}
/* 8 bis) EL PIE NO SE IMPRIME. En pantalla cierra el envoltorio y dice de
qué casa y de qué mes es lo que se está mirando. En papel eso ya está
en el título de la hoja, así que el pie sólo robaría alto —y el alto
es justo lo que decide cuánto hay que achicar la letra—. Ramiro:
«envoltorio sí, perder espacio por un pie no». */
.ivj-pie { display: none !important; }
/* 9) LA TABLA ENTRA EN LA HOJA, DE PUNTA A PUNTA.
Medido en Chromium con la hoja A4 apaisada y los ocho modelos de
Ginza: la tabla daba 1154px dentro de un hueco de 1097, o sea que se
salía 58px por la derecha y el impresor recortaba la última columna
de Retoma. Eso es lo que veía Ramiro.
Dos reglas alcanzan: el ancho al 100% del hueco, y que los
encabezados puedan partirse en dos renglones —el punto 3 les había
puesto «nowrap», que es lo que empujaba la tabla hacia afuera—.
NO se usa «table-layout: fixed»: eso fue lo que rompió Ginza en la
tanda del 28/08.
Va al final del bloque a propósito: dentro de un mismo @media manda
la última regla escrita, y este es además el último @media print del
proyecto. */
/* El ancho del reporte lo pone la medición (ivjAjustarAUnaHoja) como un
estilo en línea, y un «!important» de la hoja se lo comería. Por eso la
regla no toca al que ya fue medido. */
.ivj-reporte:not([data-ajuste]) { width: 100% !important; max-width: 100% !important; }
.ivj-tabla-scroll { width: 100% !important; max-width: 100% !important; }
.ivj-tabla { width: 100% !important; max-width: 100% !important; }
.ivj-tabla thead th, .ivj-tabla .ivj-th-sub th {
white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere;
}
}
/* ============================================================
Modal de ventas: nada se desplaza adentro, se escala el bloque
------------------------------------------------------------
El alto estaba clavado en 812px. Como el contenido necesita más, cada
columna se desplazaba por su cuenta: dos barras adentro del modal, la
tarjeta de usado en parte de pago cortada al medio y las tarjetas
corridas hacia la derecha. Ahora el alto lo pone el contenido y el
escalado se calcula sobre ese alto medido (ver useEscalaFija), así que:
· no hay barras de desplazamiento adentro,
· las tres tarjetas de arriba arrancan a la misma altura,
· la de UNIDAD se estira hasta terminar donde termina la última
tarjeta de la derecha,
· el zoom agranda o achica el bloque entero, sin reacomodar nada.
============================================================ */
.vnv-modal.vnv-fijo,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal.vnv-modal.vnv-fijo {
height: auto !important; max-height: none !important;
border: 1px solid color-mix(in srgb, var(--vnv-marca, var(--accent-amber, #f2c200)) 58%, transparent);
}
.vnv-fijo > .vnv-cuerpo { flex: 0 0 auto; min-height: 0; overflow: visible; }
/* Adentro de Gestión de Ventas hay una regla con cuatro clases y dos «>» que
le pone overflow-y: auto al cuerpo. Le gana por especificidad a cualquier
cosa que escribamos con dos clases, así que hay que repetir la cadena
entera para poder desactivarla. */
.gv-root .gv-panel-proceso > .per-overlay > .per-modal.vnv-fijo > .vnv-cuerpo {
flex: 0 0 auto; min-height: 0; overflow: visible;
}
.vnv-fijo .vnv-cuerpo--2col { max-height: none; overflow: visible; align-items: stretch; }
.vnv-fijo .vnv-cuerpo--2col > .vnv-col { min-height: 0; overflow: visible; }
/* La tarjeta de la unidad ocupa el sobrante de su columna: así las dos
columnas terminan a la misma altura en vez de dejar un hueco abajo. */
.vnv-fijo .vnv-cuerpo--2col > .vnv-col > .vnv-unidad.pnl-existente { flex: 1 1 auto; }
/* ---- Boleto papel: espejo del Registro de Ventas, no es un campo ----
Es un renglón igual a los otros diecisiete de la ficha; lo único propio
es el color del SÍ y del NO. Medidos en los dos temas: verde 5,79 oscuro
y 5,33 claro · rojo 4,31 y 5,92. El mínimo legible es 4,5. */
.bpp-dato--si { color: var(--text); }
.bpp-dato--no { color: #e2574c; }
.mo-claro .bpp-dato--si { color: #000; }
.mo-claro .bpp-dato--no { color: #b8332a; }
/* ============================================================
PANTALLA DE ENTRADA
------------------------------------------------------------
Reusa .vista-card tal cual, para que la entrada no parezca de otro
sistema: mismo grafito, misma escuadra de 3px arriba y a la derecha,
mismo Oswald en el titulo y JetBrains Mono en el renglon de abajo.
Lo unico propio es la franja de tres colores: es la unica pantalla
que no es de una casa sino de las tres.
Va al final de baseCss a proposito: las reglas de igual peso que se
insertan antes pierden contra las que ya estaban.
============================================================ */
.ent-todo { min-height: calc(100dvh / var(--tcg-z, 1)); display: flex; flex-direction: column; }
.ent-franja { height: 4px; width: 100%; flex: 0 0 auto; display: flex; }
.ent-franja i { flex: 1 1 0; display: block; }
.ent-franja i:nth-child(1) { background: var(--accent-amber, #f2c200); }
.ent-franja i:nth-child(2) { background: var(--panel, #0b4f96); }
.ent-franja i:nth-child(3) { background: #cf2126; }
.ent-centro { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 26px 18px; }
.ent-caja {
/* 880px con el contenido en 292: el marco quedaba a media pantalla de
distancia. Ahora abraza el panel. */
width: 100%; max-width: 420px;
}
.ent-marca { display: flex; justify-content: center; margin-bottom: 28px; }
.ent-marca img { width: 210px; max-width: calc(60vw / var(--tcg-z, 1)); height: auto; display: block; }
/* El logo se limpió: la imagen original tenía un 37% de píxeles de halo gris
que sobre fondo claro se veían como una mancha. Ahora no hace falta ningún
filtro y se ve igual de bien en los dos modos. */
.ent-grupo {
display: block; margin-bottom: 0;
/* El borde toma el color del modo: es lo primero que se ve y anticipa
cómo va a verse el resto. */
padding: 26px 24px 20px;
border: 1px solid color-mix(in srgb, var(--accent-amber, #f2c200) 42%, transparent);
border-radius: 16px;
background: var(--panel, #1b2233);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
0 8px 28px rgba(0,0,0,.34),
0 0 0 1px color-mix(in srgb, var(--accent-amber, #f2c200) 9%, transparent);
}
.ent-rotulo {
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 600;
letter-spacing: .05em; text-transform: uppercase; color: var(--text);
text-align: center; margin: 0 0 16px;
}
.ent-cargando { text-align: center; color: var(--text); font-size: 13.5px; margin: 6px 0 4px; }
.ent-fila { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.ent-persona { position: relative; cursor: pointer; }
.ent-inicial {
flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
display: grid; place-items: center;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 18px; font-weight: 600;
background: color-mix(in srgb, var(--c, #4f8ef7) 14%, transparent);
color: var(--c, #4f8ef7);
border: 1px solid color-mix(in srgb, var(--c, #4f8ef7) 30%, transparent);
}
.ent-cuerpo { min-width: 0; flex-direction: column; align-items: flex-start; gap: 0; }
.ent-casas { position: absolute; left: 17px; bottom: 13px; display: flex; gap: 5px; }
.ent-casas i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.ent-cab { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.ent-volver {
background: var(--panel, #1b2233); border: 1px solid var(--border, #252d3f);
color: var(--text); width: 36px; height: 36px; border-radius: 10px;
cursor: pointer; font-size: 17px; line-height: 1; flex: 0 0 auto;
}
.ent-volver:hover { border-color: var(--accent-amber, #f2c200); color: var(--text); }
.ent-cab-nom { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 18px; font-weight: 600; }
.ent-cab-rol {
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px; color: var(--text);
margin-top: 2px; text-transform: uppercase; letter-spacing: .02em;
}
.ent-puntos { display: flex; gap: 13px; justify-content: center; margin: 4px 0 14px; }
.ent-punto {
width: 15px; height: 15px; border-radius: 50%;
border: 1.5px solid var(--border, #252d3f); background: transparent; transition: all .13s;
}
.ent-punto.on { background: var(--accent-amber, #f2c200); border-color: var(--accent-amber, #f2c200); }
.ent-punto.mal { background: transparent; border-color: #ee776c; }
.ent-error { text-align: center; color: #f08a80; font-size: 13px; min-height: 19px; margin-bottom: 10px; }
.ent-sacudir { animation: entSac .34s; }
@keyframes entSac {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-8px); }
40% { transform: translateX(8px); }
60% { transform: translateX(-5px); }
80% { transform: translateX(5px); }
}
.ent-pad { display: grid; grid-template-columns: repeat(3, 86px); gap: 11px; justify-content: center; }
.ent-tecla {
height: 60px; border-radius: 12px; border: 1px solid rgba(255,255,255,.085);
background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
var(--panel-2, #21262e);
color: var(--text, #e8ecf2); font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 600;
/* Sin esto el navegador suaviza con subpíxeles y los números salen con
matices rojos y azules, como si estuvieran mal impresos. */
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); transition: filter .12s;
}
.ent-tecla:hover:not(:disabled) { filter: brightness(1.18); }
.ent-tecla:active:not(:disabled) { filter: brightness(.9); }
.ent-tecla:disabled { opacity: .55; cursor: default; }
.ent-tecla--chica { font-size: 17px; color: var(--text); }
.ent-tecla--vacia { border: none; background: none; box-shadow: none; }
.ent-ayuda {
text-align: center; font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px;
color: var(--text); margin: 18px 0 0; text-transform: uppercase; letter-spacing: .02em;
}
/* ══ MODO CLARO · PANTALLA DE ENTRADA (20/09/2026, Ramiro: «letra negra y
resaltar bordes») ════════════════════════════════════════════════════
Las teclas estaban pensadas para fondo oscuro: se dibujan con un brillo
blanco encima del panel. Sobre blanco ese brillo no se ve y quedaban sin
borde, planas y apagadas. Acá tienen borde propio, letra negra y se hunden
al apretarlas. Los rótulos gris claro pasan a la tinta oscura. Todo va
colgado de «.tcg-claro», así que el modo oscuro queda igual que hoy. */
.tcg-claro .ent-tecla {
background: #ffffff; border: 1.5px solid var(--border, #d6dbe4);
color: var(--text, #0e1116); box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.tcg-claro .ent-tecla:hover:not(:disabled) { filter: none; background: var(--panel-2, #f4f6fa); border-color: var(--accent-blue, #2563eb); }
.tcg-claro .ent-tecla:active:not(:disabled) { filter: none; background: var(--panel-3, #e9edf4); box-shadow: inset 0 2px 4px rgba(15,23,42,.14); }
.tcg-claro .ent-tecla--chica { color: var(--text, #0e1116); }
/* El hueco del teclado no es una tecla: sin esto el borde nuevo le dibujaba
un cuadrado vacío al lado del cero. */
.tcg-claro .ent-tecla--vacia { border: none; background: none; box-shadow: none; }
.tcg-claro .ent-grupo {
border-color: var(--border, #d6dbe4);
box-shadow: 0 1px 3px rgba(15,23,42,.10), 0 10px 30px rgba(15,23,42,.10);
}
.tcg-claro .ent-rotulo, .tcg-claro .ent-ayuda, .tcg-claro .ent-cab-rol,
.tcg-claro .ent-cargando, .tcg-claro .ent-o { color: var(--text); }
.tcg-claro .ent-punto { border-color: #8b93a1; }
/* El punto lleno en ámbar sobre blanco no se veía: en claro va tinta oscura. */
.tcg-claro .ent-punto.on { background: var(--accent-blue, #2563eb); border-color: var(--accent-blue, #2563eb); }
.tcg-claro .ent-error { color: var(--red, #c0392b); }
.tcg-claro .ent-google { background: #ffffff; border-color: var(--border, #d6dbe4); color: var(--text, #0e1116); }
.tcg-claro .ent-google:hover:not(:disabled) { border-color: var(--accent-blue, #2563eb); }
.tcg-claro .ent-volver { color: var(--text, #0e1116); border-color: var(--border, #d6dbe4); }
.tcg-claro .ent-volver:hover { border-color: var(--accent-blue, #2563eb); color: var(--text); }
.tcg-claro .ent-cab-select { color: var(--text, #0e1116); }
/* Quien sos y el boton de salir, en la portada */
.sesion-quien { font-weight: 600; color: var(--text, #e8ecf2); }
.sesion-salir {
margin-left: 12px; background: var(--panel, #1b2233); border: 1px solid var(--border, #252d3f);
color: var(--text); padding: 5px 14px; border-radius: 8px; cursor: pointer;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px;
text-transform: uppercase; letter-spacing: .05em;
}
.sesion-salir:hover { border-color: var(--accent-amber, #f2c200); color: var(--text); }
.sesion-aviso {
max-width: 620px; margin: 10px auto 0; padding: 9px 14px; border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--accent-amber, #f2c200) 45%, transparent);
background: color-mix(in srgb, var(--accent-amber, #f2c200) 9%, transparent);
color: var(--text); font-size: 12.5px; text-align: center;
}
/* La clave, en Administracion de Usuarios */
.pin-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.pin-campo {
width: 108px; background: var(--panel-2, #202940); border: 1px solid var(--border, #252d3f);
color: var(--text, #e8ecf2); border-radius: 8px; padding: 9px 12px;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 15px; letter-spacing: .28em; text-align: center;
}
.pin-campo:focus { outline: none; border-color: var(--accent-amber, #f2c200); }
.pin-estado { font-size: 12.5px; color: var(--text); }
.pin-estado.ok { color: var(--text); }
.pin-estado.mal { color: #f08a80; }
/* ============================================================
MI CLAVE · cuadro para cambiarse la clave propia
Va al final de baseCss a proposito: las reglas de igual peso
que se insertan antes pierden contra las que ya estaban.
============================================================ */
.mic-overlay {
position: fixed; inset: 0; z-index: 400;
background: rgba(0,0,0,.62);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mic-modal {
background: var(--bg, #14181d); border: 1px solid var(--border, #2c2f36); border-radius: 14px;
width: 100%; max-width: 480px; overflow: hidden;
box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.mic-cab { background: var(--accent-amber, #f2c200); color: #000; padding: 12px 16px; }
.mic-cab h3 { margin: 0; font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 600; }
.mic-cab p { margin: 2px 0 0; font-size: 12px; opacity: 1; }
.mic-cuerpo { padding: 18px 16px 6px; }
.mic-campo { display: block; margin-bottom: 14px; }
.mic-campo > span {
display: block; font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px;
text-transform: uppercase; letter-spacing: .05em;
color: var(--text); margin-bottom: 5px;
}
.mic-campo > input {
width: 100%; background: var(--panel-2, #202940);
border: 1px solid var(--border, #252d3f); color: var(--text, #e8ecf2);
border-radius: 8px; padding: 11px 13px;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 17px;
letter-spacing: .42em; text-align: center;
}
.mic-campo > input:focus { outline: none; border-color: var(--accent-amber, #f2c200); }
.mic-campo > input:disabled { opacity: .55; }
.mic-pista { font-size: 12px; color: var(--text); margin: -8px 0 14px; line-height: 1.5; }
.mic-error { color: #f08a80; font-size: 12.5px; min-height: 18px; margin-bottom: 8px; }
.mic-ok { color: var(--text); font-size: 12.5px; min-height: 18px; margin-bottom: 8px; }
.mic-pie {
background: var(--accent-amber, #f2c200); padding: 10px 16px;
display: flex; gap: 10px; justify-content: flex-end;
}
.mic-btn-pri {
background: var(--panel-3, #1a1207); color: var(--text); border: none;
padding: 9px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.mic-btn-sec {
background: transparent; color: #000; border: 1px solid rgba(0,0,0,.4);
padding: 9px 18px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.mic-btn-pri:disabled, .mic-btn-sec:disabled { opacity: .55; cursor: default; }
/* El boton Mi clave se destaca cuando la persona todavia no tiene clave propia */
.sesion-salir--destaca {
border-color: var(--accent-amber, #f2c200) !important;
color: var(--text) !important;
}
.sesion-aviso-link {
background: none; border: none; padding: 0; cursor: pointer;
color: inherit; font: inherit; text-decoration: underline;
}
/* Dado de baja, en la ficha de Administracion de Usuarios */
.admin-usuarios-card-baja {
border-color: color-mix(in srgb, var(--red, #e2574c) 45%, transparent) !important;
background: color-mix(in srgb, var(--red, #e2574c) 7%, transparent) !important;
}
.admin-usuarios-nota-baja {
font-size: 12px; color: var(--text);
line-height: 1.55; margin: 8px 0 0;
}
/* ============================================================
LISTA DE USADOS · la estetica del resto del sistema
------------------------------------------------------------
Era la unica pantalla sin franja de casa arriba y abajo, con
dos filas de botones en cuatro estilos distintos y las
tarjetas antes de la tabla. Ahora sigue el mismo patron que
gestoria: franja, modulo cerrado, UNA barra, y los numeros
despues de la tabla.
============================================================ */
/* El modulo cerrado, centrado y con borde, como los demas. */
.lu-modulo {
display: flex; flex-direction: column;
max-width: 1560px; width: 100%; margin: 0 auto;
background: var(--bg, #14181d); border: 1px solid var(--border, #2c2f36); border-radius: 14px;
overflow: hidden;
}
/* Franja de la casa arriba. */
.lu-modulo .lu-cab {
background: var(--vnv-marca, var(--accent-amber));
color: var(--vnv-marca-txt, var(--casa-activa-tinta, #1a1207));
padding: 10px 16px; border-radius: 0; border: 0;
}
.lu-modulo .lu-cab .per-titulo,
.lu-modulo .lu-cab .per-sub { color: inherit; }
.lu-modulo .lu-cab .per-sub { opacity: 1; }
.lu-modulo .lu-cab .lu-excel-chico {
border-color: rgba(0,0,0,.42); color: var(--vnv-marca-txt, var(--casa-activa-tinta, #1a1207));
}
/* Franja de la casa abajo. */
.lu-pie {
background: var(--vnv-marca, var(--accent-amber));
color: var(--vnv-marca-txt, var(--casa-activa-tinta, #1a1207));
padding: 8px 16px; display: flex; align-items: center; gap: 12px;
font-size: 12px; margin-top: auto;
}
.lu-pie span { opacity: 1; }
.lu-pie .lu-pie-sp { flex: 1; }
/* Una sola barra: casas + acciones en la misma linea. */
.lu-barra {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 13px 20px 0;
}
.lu-barra .lu-casas,
.lu-barra .lu-acciones { padding: 0; margin: 0; }
/* Los concesionarios, como selector segmentado: se lee como UNA eleccion,
no como tres tildes sueltas. */
.lu-casas {
display: flex; background: var(--panel-2, #202940);
border: 1px solid var(--border, #252d3f); border-radius: 8px; padding: 3px; gap: 2px;
}
.lu-casa {
background: none; border: none; color: var(--text);
padding: 6px 13px; border-radius: 8px; cursor: pointer;
font-size: 12.5px; font-family: inherit;
}
.lu-casa:hover { color: var(--text, #e8ecf2); }
.lu-casa--on {
background: var(--vnv-marca, var(--accent-amber));
color: var(--vnv-marca-txt, var(--casa-activa-tinta, #1a1207)); font-weight: 600;
}
.lu-casa--off { opacity: 1; cursor: default; }
.lu-casa-tilde { display: none; } /* el segmentado ya dice cual esta elegida */
/* De las cuatro acciones, UNA sola es la principal. El resto comparte forma:
antes cada boton tenia su color y ninguno resaltaba. */
.lu-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lu-acc {
background: var(--panel, #1b2233); border: 1px solid var(--border, #252d3f);
color: var(--text, #e8ecf2); padding: 7px 14px; border-radius: 8px;
cursor: pointer; font-size: 12.5px; font-family: inherit;
display: flex; align-items: center; gap: 7px;
}
.lu-acc:hover:not(:disabled) {
border-color: var(--vnv-marca, var(--accent-amber));
color: var(--text);
}
.lu-acc:disabled { opacity: .45; cursor: default; }
.lu-acc--marca:first-child {
background: var(--vnv-marca, var(--accent-amber));
border-color: var(--vnv-marca, var(--accent-amber));
color: var(--vnv-marca-txt, var(--casa-activa-tinta, #1a1207)); font-weight: 600;
}
.lu-acc--marca:first-child:hover:not(:disabled) {
color: var(--vnv-marca-txt, var(--casa-activa-tinta, #1a1207)); filter: brightness(1.07);
}
/* Comprar e Ingresar traian los dos el color de la casa: dos botones pintados
compiten y ninguno se lee como el principal. Queda pintado el primero. */
.lu-acciones .lu-acc--marca:not(:first-child) {
background: var(--panel, #1b2233);
border-color: var(--border, #252d3f);
color: var(--text, #e8ecf2);
font-weight: 400;
}
.lu-acciones .lu-acc--marca:not(:first-child):hover:not(:disabled) {
border-color: var(--vnv-marca, var(--accent-amber));
color: var(--text);
}
.lu-acc--vender, .lu-acc--tienda { color: var(--text, #e8ecf2); }
.lu-guardado { margin-left: auto; font-size: 12px; color: var(--text); }
/* Los numeros van DESPUES de la tabla. Se hace por orden y no moviendo el
bloque de JSX: mismo resultado, sin riesgo de romper el render. */
.lu-indicadores { order: 90; }
.lu-pie { order: 95; }
/* ============================================================
GESTORIA UNICA · carpetas y tramites con acuse
============================================================ */
/* Estimacion y Cobranzas eran pantallas sueltas con su propio overlay y su
propio encabezado. Adentro de una carpeta eso sobra: el encabezado ya lo
pone la gestoria. En vez de tocarles el JSX (y arriesgar romperlas), se les
apaga el overlay por CSS, con el mismo criterio que ya se usa en
.gv-panel-proceso. Asi siguen andando iguales abiertas de forma suelta. */
/* Sin esto el modal embebido abre una capa fija sobre todo el módulo y no
hay forma de cerrarla: es lo que pasaba en gestoría y pasaba en cobranzas.
La regla equivalente ya existía para .gu-insc pero faltaba acá. */
.gu-embebido > .per-overlay {
position: static; inset: auto; background: none; padding: 0; display: block;
}
.gu-embebido > .per-overlay > .per-modal {
width: 100%; max-width: none; max-height: none;
border: 0; border-radius: 0; box-shadow: none; background: transparent;
transform: none;
/* Sin min-width:0 el modal no puede achicarse por debajo de su contenido:
la tabla de cobranzas mide casi 2000px y lo empuja más ancho que el
panel, que lo recorta. Es el mismo arreglo que necesitó gestoría. */
min-width: 0; display: flex; flex-direction: column;
}
.gu-embebido > .per-overlay > .per-modal > .per-cab { display: none; }
/* La tabla ancha se desplaza dentro de su cuerpo en vez de que el panel la
recorte. Sin esto la pantalla "se iba al costado". */
.gu-embebido > .per-overlay > .per-modal > .per-cuerpo,
.gu-embebido > .per-overlay > .per-modal > .com-cuerpo,
.gu-embebido > .per-overlay > .per-modal > .vnp-cuerpo,
.gu-embebido > .per-overlay > .per-modal > .vnv-cuerpo,
.gu-embebido > .per-overlay > .per-modal > .acc-cuerpo,
.gu-embebido > .per-overlay > .per-modal > .cc-cuerpo,
.gu-embebido > .per-overlay > .per-modal > .mic-cuerpo,
.gu-embebido > .per-overlay > .per-modal > .abm-cuerpo,
.gu-embebido .com-tabla-cont { min-width: 0; overflow-x: auto; }
.gu-embebido > .per-overlay > .per-modal > .com-cuerpo { padding-left: 0; padding-right: 0; }
.gu-insc > .per-overlay { position: static; inset: auto; background: none; padding: 0; display: block; }
.gu-insc > .per-overlay > .per-modal {
width: 100%; max-width: none; max-height: none;
border: 0; border-radius: 0; box-shadow: none; background: transparent; transform: none;
/* Mismo arreglo que gestoría y cobranzas: sin esto la tabla ancha empuja
el modal más allá del panel y la pantalla se recorta al costado. */
min-width: 0; display: flex; flex-direction: column;
}
/* Y la tabla ancha se desplaza dentro del cuerpo, igual que en cobranzas. */
.gu-insc > .per-overlay > .per-modal > .per-cuerpo,
.gu-insc > .per-overlay > .per-modal > .com-cuerpo,
.gu-insc > .per-overlay > .per-modal > .vnp-cuerpo,
.gu-insc > .per-overlay > .per-modal > .vnv-cuerpo,
.gu-insc > .per-overlay > .per-modal > .acc-cuerpo,
.gu-insc > .per-overlay > .per-modal > .cc-cuerpo,
.gu-insc > .per-overlay > .per-modal > .mic-cuerpo,
.gu-insc > .per-overlay > .per-modal > .abm-cuerpo,
.gu-insc .ing-tabla-cont { min-width: 0; overflow-x: auto; }
.gu-insc > .per-overlay > .per-modal > .per-cab { display: none; }
/* Las carpetas nunca se parten en dos renglones: la fila se desliza. */
/* LAS SOLAPAS NO SE DESPLAZAN (28/09/2026 · nd, Ramiro: «no va scroll con
las solapas»). Estaban en una sola línea con barra: en un monitor de 1366
la barra aparecía debajo de las carpetas y, además de fea, escondía
solapas que nadie iba a buscar corriendo una barrita. Ahora bajan de
renglón. Las carpetas se ven todas y la barra no existe. */
.gu-carpetas {
display: flex; gap: 3px; flex-wrap: wrap; row-gap: 0;
border-bottom: 2px solid var(--vnv-marca, var(--accent-amber));
margin-bottom: 14px;
}
.gu-carpeta {
background: var(--panel, #1b2233);
border: 1px solid var(--border, #252d3f); border-bottom: none;
color: var(--text);
padding: 8px 14px; border-radius: 9px 9px 0 0; cursor: pointer;
font-size: 13px; font-family: inherit;
display: flex; align-items: center; gap: 7px;
white-space: nowrap; flex: 0 0 auto;
}
.gu-carpeta:hover { color: var(--text, #e8ecf2); }
.gu-carpeta--on {
background: var(--vnv-marca, var(--accent-amber));
color: var(--vnv-marca-txt, var(--casa-activa-tinta, #1a1207));
border-color: var(--vnv-marca, var(--accent-amber));
font-weight: 600;
}
.gu-carpeta--on .tnd-n { background: rgba(0,0,0,.28); }
/* --- tramites con acuse (Prendas y REU) --- */
.tac-sub { margin: 0 0 12px; }
.tac-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tac-chip {
background: var(--panel, #1b2233); border: 1px solid var(--border, #252d3f);
color: var(--text); padding: 5px 13px; border-radius: 999px;
cursor: pointer; font-size: 12px; font-family: inherit;
}
.tac-chip:hover { color: var(--text, #e8ecf2); }
.tac-chip.on {
background: var(--vnv-marca, var(--accent-amber));
border-color: var(--vnv-marca, var(--accent-amber));
color: var(--vnv-marca-txt, var(--casa-activa-tinta, #1a1207)); font-weight: 600;
}
.tac-busca {
width: 100%; background: var(--panel-2, #202940);
border: 1px solid var(--border, #252d3f); color: var(--text, #e8ecf2);
border-radius: 8px; padding: 10px 13px; font-size: 13px;
font-family: inherit; margin-bottom: 10px;
}
.tac-busca:focus { outline: none; border-color: var(--vnv-marca, var(--accent-amber)); }
.tac-tabla-caja { overflow-x: auto; }
.tac-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tac-tabla th {
text-align: left; padding: 7px 9px; white-space: nowrap;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 13px;
text-transform: uppercase; letter-spacing: .05em;
color: var(--text);
background: color-mix(in srgb, var(--vnv-marca, #f2c200) 7%, transparent);
border-bottom: 1px solid var(--border, #252d3f);
}
.tac-tabla td { padding: 7px 9px; border-bottom: 1px solid #22272e; }
.tac-fila { cursor: pointer; }
.tac-fila:hover td { background: var(--panel-2, #1a1f26); }
.tac-n, .tac-mono { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }
.tac-c { text-align: center; }
.tac-vacio { color: var(--text); font-style: italic; }
.tac-nada { text-align: center; color: var(--text);
font-style: italic; padding: 24px 0; }
.tac-ficha {
margin-top: 16px; border: 1px solid color-mix(in srgb, var(--vnv-marca, #f2c200) 42%, transparent);
border-radius: 10px; padding: 14px 16px;
}
.tac-ficha-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tac-ficha-cab > div { flex: 1; min-width: 0; }
.tac-ficha-sub { display: block; font-size: 12px; color: var(--text);
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; margin-top: 2px; }
.tac-pasos { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.tac-paso {
background: var(--panel-2, #202940); border: 1px solid var(--border, #252d3f);
color: var(--text); padding: 6px 13px; border-radius: 999px;
cursor: pointer; font-size: 12px; font-family: inherit;
}
.tac-paso--on, .tac-paso.on {
background: var(--vnv-marca, var(--accent-amber));
border-color: var(--vnv-marca, var(--accent-amber));
color: var(--vnv-marca-txt, var(--casa-activa-tinta, #1a1207)); font-weight: 600;
}
.tac-campos { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tac-campo { display: flex; flex-direction: column; gap: 5px; }
.tac-campo--ancho { flex: 1 1 260px; }
.tac-campo > span {
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px;
text-transform: uppercase; letter-spacing: .05em;
color: var(--text);
}
.tac-campo > input {
background: var(--bg, #131824); border: 1px solid var(--border, #252d3f);
color: var(--text, #e8ecf2); border-radius: 8px; padding: 8px 11px;
font-size: 13px; font-family: inherit; min-width: 170px;
}
.tac-campo > input:focus { outline: none; border-color: var(--vnv-marca, var(--accent-amber)); }
.tac-fotos { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.tac-foto { display: flex; flex-direction: column; gap: 6px; }
.tac-foto-rot {
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px;
text-transform: uppercase; letter-spacing: .05em; color: var(--text);
}
.tac-foto img {
width: 148px; height: 108px; object-fit: cover; border-radius: 8px;
border: 1px solid var(--border, #252d3f); cursor: zoom-in; display: block;
}
.tac-foto-vacia {
width: 148px; height: 108px; border-radius: 8px; cursor: pointer;
border: 1px dashed color-mix(in srgb, var(--vnv-marca, #f2c200) 45%, transparent);
background: color-mix(in srgb, var(--vnv-marca, #f2c200) 5%, transparent);
display: grid; place-items: center;
color: var(--text); font-size: 12px;
}
.tac-foto-vacia:hover { background: color-mix(in srgb, var(--vnv-marca, #f2c200) 11%, transparent); }
.tac-foto-quitar { align-self: flex-start; }
.tac-foto-aviso { font-size: 12px; color: var(--text); align-self: center; }
.tac-nota { font-size: 12px; color: var(--text); margin: 10px 0 0; }
.admin-usuarios-tag-baja {
display: inline-block; margin-left: 9px; padding: 1px 8px; border-radius: 999px;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px;
text-transform: uppercase; letter-spacing: .06em;
color: #f08a80; border: 1px solid color-mix(in srgb, var(--red, #e2574c) 45%, transparent);
background: color-mix(in srgb, var(--red, #e2574c) 12%, transparent);
vertical-align: middle;
}
/* ============================================================
Modal de ventas: los botones tienen que LEERSE
------------------------------------------------------------
Dos cosas distintas pasaban acá.
1) "Soltar unidad" no se leía porque la letra tenía EL MISMO color que el
fondo. La regla que le daba contraste es ".vnv-fijo .vnvb-pill--soltar"
(dos clases) y más abajo hay un ".per-modal > .per-cab * { color:
inherit }" que le gana por especificidad y le pisaba el color. Lo mismo
con el campo de búsqueda, que en Jorge Giorgi quedaba negro sobre negro.
Se repite la cadena entera para poder ganarle.
2) El resto eran chicos de verdad: el cuerpo del modal está a 16-17px y
estas píldoras estaban a 12, los botones del pie a 11,5. Encima el
modal se escala para entrar en la pantalla, así que en una notebook
bajaban a 10,7. Suben a un tamaño acorde al resto del modal.
El ancho sobra: la cápsula usaba 876px de los 1278 que hay.
============================================================ */
/* --- 1. Contraste: que la letra no sea del color del fondo --- */
.per-modal > .per-cab .vnvb-pill--soltar,
.per-modal > .per-cab .vnvb-pill.activa,
.vnv-fijo .vnvb-pill--soltar,
.vnv-fijo .vnvb-pill.activa,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab .vnvb-pill--soltar {
background: var(--vnv-marca-txt, #131824);
color: var(--vnv-marca, var(--accent-amber, #f2c200)) !important;
border-color: var(--vnv-marca-txt, #131824);
}
/* El campo tiene fondo propio: sin él se confundía con la cápsula y no se
veía dónde escribir.
Y arregla algo peor que estaba escondido: el texto usaba --vnv-marca-txt,
que en Giorgi es #1d1a06, casi negro. La cápsula no es amarillo pleno sino
un 7% sobre el panel oscuro (#2a2d2f), así que daba 1,26:1: lo que se
escribía era invisible. El color de texto de la marca sirve sobre el color
PLENO de la marca, no sobre un 7% de ella. */
.per-modal > .per-cab .vnvb-caja .bap-input,
.vnv-fijo .vnvb-caja .bap-input,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .per-cab .vnvb-caja .bap-input {
background: var(--panel, #1b2233);
border: 0;
box-shadow: none;
border-radius: 999px;
color: var(--text, #ecf0f4);
}
.mo-claro .per-modal > .per-cab .vnvb-caja .bap-input,
.mo-claro .vnv-fijo .vnvb-caja .bap-input {
background: #ffffff; color: #000;
}
/* --- 2. Tamaños: acordes al cuerpo del modal --- */
.vnv-fijo .vnvb-caja { min-height: 54px; }
.vnv-fijo .vnvb-caja .bap-input,
.vnv-modal .vnv-fijo .vnvb-caja .bap-input,
.vnv-compacto .vnvb-caja .bap-input { height: 44px; font-size: 16px; padding: 0 8px 0 20px; }
.vnv-fijo .vnvb-caja .bap-input::placeholder { font-size: 15px; }
.vnv-fijo .vnvb-acciones { gap: 7px; }
.vnv-fijo .vnvb-pill { height: 38px; padding: 0 16px; font-size: 14px; }
.vnv-fijo .vnvb-pill--doble > button { padding: 0 15px; font-size: 14px; }
.vnv-fijo .vnvb-acciones .mo-tema { width: 38px; height: 38px; font-size: 16px; }
/* La cápsula ocupa el renglón entero. Antes se quedaba en 876 de 1278 y al
campo le sobraban 207px: el texto de ayuda salía cortado en "clien...". */
.vnv-fijo > .per-cab { display: block; }
.vnv-fijo > .per-cab > .vnv-buscador.vnvb-uni { width: 100%; }
/* El pie, con la misma vara. */
.vnv-fijo .vnv-pie .lu-btn,
.per-modal .vnv-pie .lu-btn,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .vnv-pie .lu-btn {
padding: 9px 16px; font-size: 14px;
}
.vnv-fijo .vnv-pie .lu-btn--sm { padding: 5px 11px; font-size: 12.5px; }
.vnv-fijo .vnv-pie-nota,
.per-modal .per-pie .vnv-pie-nota { font-size: 13px; }
.vnv-fijo .vnv-fecha-inline input { font-size: 13.5px; padding: 6px 9px; }
.vnv-fijo .per-pie { padding: 9px 14px; }
/* El bloque de la derecha arranca siempre en el mismo punto, así el botón de
boleto cae bajo el mismo lugar de la pantalla. Al crecer los botones, el
ancho reservado tiene que crecer con ellos o el truco se pierde. */
.vnv-fijo .vnv-pie-acciones { min-width: 440px; gap: 8px; }
/* ============================================================
Menú lateral: los logos de las casas
------------------------------------------------------------
Estaban a 15px de alto. Con logos de proporción 3:1 eso da unos 50px de
ancho, contra los 46 de alto del logo de TCG que está tres renglones más
arriba: al lado parecían una miniatura. Suben a 30, que es lo que entra
cómodo en el ancho del menú.
============================================================ */
.ml-casa-logo { height: 30px; width: auto; max-width: 100%; object-fit: contain; }
/* Plegado a rail es donde peor estaban, y es justo cuando más se los mira:
con Gestión de Ventas abierta el menú vive plegado. En 52px de ancho un
logo apaisado no entra —quedaba de 9px de alto o cortado—, así que el rail
pasa a 84. Ahí el ancho manda y el alto sale solo, sin deformar.
Cada logo se apoya en una tarjeta del color de su casa: es lo que permite
distinguirlas de un vistazo cuando no hay nombre al lado. */
:root { --ml-rail: 84px; }
/* ============================================================
El hueco del medio: las tarjetas de la derecha eran 100px más angostas
------------------------------------------------------------
Las dos columnas se emparejan fila a fila (Cliente↔Importes,
Fechas↔Forma de pago, Unidad↔Financiación) gracias a un display:contents
sobre .vnv-col, que hace que las tarjetas pasen a ser hijas directas de la
grilla del cuerpo. Esa regla vive en un @media y quedó pisada por una
.vnv-cuerpo .vnv-col { display:flex } escrita más abajo, con la misma
especificidad y por lo tanto ganadora por orden.
Al no haber display:contents, la columna volvió a ser una caja, pero sus
tarjetas conservaron el grid-column: 2 del emparejado. Resultado: adentro
de la columna derecha se armó una PISTA FANTASMA de 84px vacíos a la
izquierda, y las tarjetas quedaron de 523px contra los 623px de la
izquierda. Eso es el hueco del medio.
============================================================ */
.vnv-fijo .vnv-cuerpo--2col > .vnv-col { display: contents; }
/* Panel de Unidad: sin los títulos de grupo.
Los rótulos de cada renglón ya dicen qué es cada dato ("Boleto de compra",
"Perit. cotización"), así que el título del grupo repetía lo que ya se lee.
Para que los grupos no se conviertan en una lista larga y pareja, quedan
separados por un filo finito: cuesta 9px en vez de 28. */
.vnv-fijo .vnp-grupo h5 { display: none; }
.vnv-fijo .vnp-grupo + .vnp-grupo {
margin-top: 5px; padding-top: 5px;
border-top: 1px solid color-mix(in srgb, var(--vnv-marca, #6c7684) 30%, transparent);
}
/* "Boleto" era un título de grupo con un solo renglón que dice "Boleto papel":
el título repetía la fila. Queda la fila sola. */
/* Las filas 3 a 5 las manda la ficha de Unidad, no la derecha: pide 573px y
las tres tarjetas de enfrente juntas piden 478. Esos 95px de diferencia son
los que la derecha reparte como aire. Se los saca a la ficha, que tiene 17
renglones de una línea: 3px por renglón alcanzan. */
.vnv-fijo .vnp-lista > div { min-height: 21px; }
.vnv-fijo .vnp-grupo + .vnp-grupo { margin-top: 3px; padding-top: 3px; }
.vnv-fijo .vnp-cab { padding: 5px 12px; }
/* ============================================================
Ficha de Unidad: que la separación de grupos SE NOTE
------------------------------------------------------------
El filo entre grupos no se distinguía porque cada renglón trae su propio
filo punteado y el del grupo era del mismo grosor: con diecisiete líneas
iguales, una más no dice nada. Las de los renglones quedan como estaban;
la del grupo pasa a ser más gruesa, entera (no punteada) y con el color
de la casa a pleno. Es la única diferencia, y alcanza para leerla como
separación.
============================================================ */
.vnv-fijo .vnp-grupo + .vnp-grupo {
margin-top: 6px; padding-top: 6px;
border-top: 3px solid color-mix(in srgb, var(--vnv-marca, #6c7684) 70%, transparent);
}
/* El cartel de estado estaba en 10px: escalado quedaba en 6 y no se leía. */
.vnv-fijo .vnp-chip { font-size: 14px; padding: 3px 12px; }
/* La cabecera de la ficha usaba dos renglones para decir una sola cosa.
El nombre y la ayuda van en la misma línea. */
.vnv-fijo .vnp-hero { min-height: 0; padding: 7px 10px; }
.vnv-fijo .vnp-hero > div {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0;
}
.vnv-fijo .vnp-hero p { margin: 0; }
/* ============================================================
PROPUESTA — apretar el aire entre tarjetas y gastarlo arriba y abajo
------------------------------------------------------------
Ningún dato se saca y ninguna tarjeta cambia de columna. Lo único que se
toca es el espacio VACÍO: el relleno de cada tarjeta, el hueco entre
campos y el hueco entre tarjetas. Son 1 o 2 píxeles por renglón, como
dijo Ramiro, pero multiplicados por 19 campos y 5 tarjetas dan de sobra
para agrandar el buscador y el pie y ADEMÁS bajar el alto del modal.
Bajar el alto del modal es lo que más se nota: el modal se dibuja fijo y
después se escala para entrar en la pantalla, así que cada píxel que baja
sube la escala y agranda TODO, no sólo los botones.
============================================================ */
/* --- 1. El aire de las tarjetas (lo que se recupera) --- */
.vnv-fijo .vnb-cab { padding: 5px 12px; }
.vnv-fijo .vnb-body { padding: 8px 12px; gap: 5px; }
.vnv-fijo .vnv-cuerpo--2col .vnb-body { padding-bottom: 8px; }
.vnv-fijo .vnv-cuerpo--2col .vnv-col { gap: 11px; }
.vnv-fijo .vnb .per-campo > input,
.vnv-fijo .vnb .per-campo > select,
.vnv-fijo .vnb .cat-disparador,
.vnv-fijo .vnv-mesanio input { min-height: 32px; padding: 4px 10px; }
.vnv-fijo .per-campo--calc strong { min-height: 32px; padding: 4px 10px; }
/* Fechas respiraba de más porque se estiraba para emparejar columnas; eso
ahora lo hace sola la tarjeta de Unidad, que es la que tiene lugar. */
.vnv-fijo .vnv-cuerpo--2col .vnv-col > .vnb.vnb--fechas > .vnb-body {
padding-top: 9px; padding-bottom: 10px; gap: 7px;
}
/* --- 2. Adónde va lo recuperado: arriba --- */
.vnv-fijo .vnvb-caja { min-height: 60px; }
.vnv-fijo .vnvb-caja .bap-input,
.vnv-modal .vnv-fijo .vnvb-caja .bap-input,
.vnv-compacto .vnvb-caja .bap-input { height: 48px; font-size: 17.5px; padding: 0 8px 0 20px; }
.vnv-fijo .vnvb-caja .bap-input::placeholder { font-size: 16.5px; }
.vnv-fijo .vnvb-pill { height: 42px; padding: 0 18px; font-size: 16px; }
.vnv-fijo .vnvb-pill--doble > button { padding: 0 17px; font-size: 16px; }
.vnv-fijo .vnvb-acciones { gap: 8px; }
.vnv-fijo .vnvb-acciones .mo-tema { width: 42px; height: 42px; font-size: 18px; }
/* --- 3. Y abajo --- */
.vnv-fijo .vnv-pie .lu-btn,
.per-modal .vnv-pie .lu-btn,
.gv-root .gv-panel-proceso > .per-overlay > .per-modal > .vnv-pie .lu-btn {
padding: 10px 18px; font-size: 16px;
}
.vnv-fijo .vnv-pie .lu-btn--sm { padding: 6px 12px; font-size: 14px; }
.vnv-fijo .vnv-pie-nota,
.per-modal .per-pie .vnv-pie-nota { font-size: 14.5px; }
.vnv-fijo .vnv-fecha-inline input { font-size: 15px; padding: 7px 10px; }
.vnv-fijo .per-pie { padding: 10px 14px; }
.vnv-fijo .vnv-pie-acciones { min-width: 480px; gap: 9px; }
/* Con las tarjetas convertidas en hijas de la grilla, la separación entre
filas la da el row-gap del cuerpo. El margin-top que traían de cuando cada
columna era una caja se suma encima: separa de más y deja a la ficha de
Unidad seis píxeles más abajo que la última tarjeta de enfrente. */
.vnv-fijo .vnv-cuerpo--2col .vnb + .vnb,
.vnv-fijo .vnv-cuerpo--2col .vnv-col > .vnb + .vnv-unidad { margin-top: 0; }
/* Logos del menú: sólo la silueta blanca, sin tarjeta de color detrás, y un
punto más grandes. Lo que marca en cuál casa estás parado sigue siendo el
filo de color de la izquierda, que ya estaba. */
.ml-casa-logo { height: 31px; width: auto; max-width: 100%; object-fit: contain; }
/* ============================================================
Informe de Ventas en modo claro
------------------------------------------------------------
Casi todo el informe está escrito con las variables del tema (--panel,
--panel-2, --border, --text, --text-muted), así que el modo claro se
resuelve redefiniéndolas sobre el panel. Sólo quedan a mano los pocos
colores que estaban puestos fijos.
La paleta es la MISMA que ya usaba la impresión, a propósito: lo que se ve
en pantalla en modo claro es lo que sale por la impresora.
============================================================ */
.ivj-panel.ivj-claro {
/* «--bg» faltaba y por eso Liquidación de Comisiones quedaba con el fondo
del tema oscuro y la tinta de este panel claro: negro sobre negro. */
--bg: #ffffff;
--panel: #ffffff;
--panel-2: #eeeeee;
--panel-3: #e6e6e6;
--border: #c9ced6;
--text: #000000;
--text-muted: #000000;
background: #ffffff; color: #000;
}
.ivj-claro .ivj-reporte { background: #ffffff; border-color: #c9ced6; box-shadow: 0 1px 3px rgba(16,20,28,.08); }
.ivj-claro .ivj-header { background: #f2f2f2; border-radius: 8px 8px 0 0; padding: 8px 10px; }
.ivj-claro .ivj-tabla thead th { background: #d8d8d8; color: #000; }
.ivj-claro .ivj-tabla .ivj-th-sub th { background: #d8d8d8; color: #000; }
.ivj-claro .ivj-tabla tbody tr:nth-child(even) td { background: #f6f6f6; }
/* El cebrado de las filas pares tapaba el resaltado: una fila sí y otra no.
Las cuatro columnas que se leen tienen que estar pintadas en TODAS. */
.ivj-claro .ivj-tabla tbody tr:nth-child(even) td.ivj-col-destacada,
.ivj-claro .ivj-tabla tbody tr:hover td.ivj-col-destacada { background: #fbe37a; }
.ivj-claro .ivj-tabla tbody tr:hover td { background: #e9eef5; }
.ivj-claro .ivj-fila-totales td { background: #e4e4e4; }
/* Las cuatro cifras que se leen: Total VN, OM, VO y Total Ventas. */
.ivj-claro .ivj-th-destacada, .ivj-claro .ivj-col-destacada { background: #fbe37a; }
.ivj-claro .ivj-col-destacada, .ivj-claro .ivj-col-destacada .ivj-celda { color: #000; font-weight: 700; }
.ivj-claro .ivj-fila-totales td.ivj-col-destacada { background: var(--accent-amber, #f2c200); }
/* La fila de TOTALES tiene su propio color de número, ámbar, puesto con un
selector más específico que el de las otras filas. Sobre el naranja del
modo claro quedaba ámbar sobre ámbar: no se leía. Hay que repetir la
cadena entera para poder ganarle. */
.ivj-claro .ivj-fila-totales td.ivj-col-destacada .ivj-celda { color: #000; }
/* El título de las tarjetas estaba en blanco fijo: sobre claro desaparecía. */
.ivj-claro .ivj-ind-titulo { color: #000; }
.ivj-claro .ivj-ind-card { background: #f4f6f8; border-color: #c9ced6; }
.ivj-claro .ivj-celda { color: #000; background: transparent; border-color: transparent; }
.ivj-claro .ivj-celda:hover, .ivj-claro .ivj-celda:focus { background: #ffffff; border-color: #9aa4b2; }
.ivj-claro .ivj-plan-input { background: #ffffff; color: #000; border-color: #9aa4b2; }
.ivj-claro .ivj-mes-select { background: #ffffff; color: #000; border-color: #9aa4b2; }
.ivj-claro .ivj-rank-barra-track { background: #dde2e8; }
.ivj-claro .ivj-vs-valor { color: #000; }
/* ============================================================
El resaltado de las cuatro cifras, en TODAS las filas
------------------------------------------------------------
Hay un cebrado general para cualquier tabla del sistema:
tr:nth-child(2n) td { background: rgba(255,255,255,0.015) }
Ese selector pesa más que ".ivj-col-destacada", así que en las filas pares
pintaba encima y el resaltado desaparecía: quedaba una fila sí y una no.
Pasaba en los dos temas y no lo habíamos visto porque en oscuro el gris es
muy suave. Se sube la especificidad nombrando la tabla y la celda.
============================================================ */
.ivj-tabla tbody tr td.ivj-col-destacada {
background: color-mix(in srgb, var(--accent-amber) 24%, transparent);
}
.ivj-tabla tbody tr.ivj-fila-totales td.ivj-col-destacada {
background: color-mix(in srgb, var(--accent-amber) 50%, var(--panel-2));
}
.ivj-claro .ivj-tabla tbody tr td.ivj-col-destacada { background: #fbe37a; }
.ivj-claro .ivj-tabla tbody tr.ivj-fila-totales td.ivj-col-destacada { background: var(--accent-amber, #f2c200); }
/* ============================================================
Impresión: ninguna columna puede cortar el número
------------------------------------------------------------
El ancho de cada columna lo reparte el navegador según el texto del
encabezado. "Total VN" y "Total Ventas" son largos y se llevan lugar de
sobra; "OM" y "VO" tienen dos letras y quedaban en 37px. Ahí entra un
dígito, pero la fila de TOTALES se imprime a 19px y "11" pide 34: salía
partido al medio, como se ve en la foto.
No se arregla columna por columna: probado con un mes de tres dígitos
también cortaban KWID y las de Retoma. Se le pone el mismo piso a TODAS
las celdas numéricas, calculado para que entre el número más grande que
puede aparecer al tamaño del total. Sobra ancho en la hoja: la tabla usa
1136px de los ~1390 que da el A4 apaisado con el zoom de impresión.
============================================================ */
@media print {
.ivj-tabla tbody td.ivj-num,
.ivj-tabla thead .ivj-th-destacada { min-width: 66px !important; }
/* El campo ocupa la celda entera: sin esto conserva su propio mínimo de
18px y sigue recortando aunque la columna sea más ancha. */
.ivj-tabla td.ivj-num .ivj-celda { min-width: 100% !important; width: 100% !important; }
/* Y el resaltado, también en papel. El cebrado de la impresión lleva
!important, así que le pisaba el color a las cuatro columnas en las filas
pares: en la foto se ve BUSTO y JALIL sin pintar y las otras sí. */
.ivj-tabla tbody tr:nth-child(even) td.ivj-col-destacada { background: #fbe37a !important; }
}
/* ============================================================
Detalle de Suscripciones · barra de arriba y encabezado inmóvil
============================================================ */
/* --- La barra de arriba, con el color de la casa --- */
.sc-barra-tit {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 16px; margin: 0 0 10px;
border-radius: 10px;
background: color-mix(in srgb, var(--casa-color, #4f8ef7) 14%, var(--panel-2));
border: 1px solid color-mix(in srgb, var(--casa-color, #4f8ef7) 45%, transparent);
border-left: 5px solid var(--casa-color, #4f8ef7);
}
.sc-barra-tit-h {
margin: 0; font-size: 22px; font-weight: 700; letter-spacing: .2px;
color: var(--text, #e8ecf2);
}
.sc-barra-tit-casa {
font-size: 19px; font-weight: 700; letter-spacing: .3px;
color: var(--text);
}
.sc-barra-tit-sep { flex: 1; }
.sc-barra-tit-cant { font-size: 13px; color: var(--text); white-space: nowrap; }
/* --- Los títulos de las columnas: más grandes y con el color de la casa --- */
.sc-panel .sc-table thead th {
font-size: 13px; font-weight: 700; letter-spacing: .3px;
color: var(--text, #e8ecf2);
background: color-mix(in srgb, var(--casa-color, #4f8ef7) 20%, var(--panel-2));
border-bottom: 2px solid var(--casa-color, #4f8ef7);
}
/* La primera columna se fija también a la izquierda, así que necesita su
propio fondo o las celdas de al lado se le ven por debajo al desplazar. */
.sc-panel .sc-table thead th.sc-cant-col {
background: color-mix(in srgb, var(--casa-color, #4f8ef7) 28%, var(--panel-2)) !important;
z-index: 3;
}
/* --- Encabezado inmóvil ---
El "position: sticky" ya estaba en el CSS, pero cada th traía un
"position: relative" EN LÍNEA (hacía falta para montar la manija de ancho
de columna) y el inline le gana a cualquier hoja de estilos. Por eso el
título se iba con el scroll. En el JSX pasa a ser sticky; acá se asegura
el top y la altura para que no lo tape nada. */
.sc-panel .sc-table thead th { top: 0; }
/* La columna "Cant." está despegada A PROPÓSITO con un
".sc-cant-col { position: static !important }": sticky sobre un
con
border-collapse:collapse se ve en blanco en Chrome. Pero esa regla no
distingue el cuerpo del encabezado, así que también despegaba el TÍTULO y
al bajar quedaba la fila de títulos completa menos "Cant.".
El cuerpo se deja como está —ahí el problema es real— y se vuelve a fijar
sólo el th, y sólo en vertical (left: auto). */
.sc-panel .sc-table thead th.sc-cant-col {
position: sticky !important; top: 0 !important; left: auto !important; z-index: 3 !important;
}
/* --- Fijar tablero --- */
.sc-btn--fijar { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sc-btn--fijar input { margin: 0; cursor: pointer; }
.sc-table-scroll--fija {
max-height: calc(calc(100dvh / var(--tcg-z, 1)) - 150px);
overscroll-behavior: contain; /* la rueda no arrastra la pantalla entera */
}
/* ============================================================
Detalle de Suscripciones · filtro por casa e indicador de origen
============================================================ */
.sc-filtro-casa {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 10px; border-radius: 8px;
background: var(--panel-2); border: 1px solid var(--border);
font-size: 12px; color: var(--text); white-space: nowrap;
}
.sc-filtro-casa select {
background: transparent; border: 0; color: var(--text);
font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; outline: none;
}
/* La cifra que se mira: cuántas aportó otra casa. */
.sc-origen-valor {
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700;
color: var(--text); line-height: 1.1;
}
.sc-origen-pct { font-size: 15px; font-weight: 700; margin-left: 7px; opacity: 1; }
.sc-origen-sub { font-size: 12px; color: var(--text); margin: 2px 0 8px; }
/* Una sola barra con el reparto, para verlo de un vistazo. */
.sc-origen-barra {
display: flex; height: 9px; border-radius: 999px; overflow: hidden;
background: var(--panel); margin-bottom: 8px;
}
.sc-origen-barra-propia { background: var(--accent-blue, #4f8ef7); }
.sc-origen-barra-otras { background: var(--accent-amber, #f2c200); }
.sc-origen-barra-sd { background: color-mix(in srgb, var(--text-muted, #8b95a5) 55%, transparent); }
.sc-origen-lista { display: flex; flex-direction: column; gap: 3px; }
.sc-origen-fila {
display: flex; align-items: center; gap: 7px; font-size: 12px;
padding: 2px 0; border-bottom: 1px solid var(--border);
}
.sc-origen-fila:last-child { border-bottom: none; }
.sc-origen-punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sc-origen-punto--propia { background: var(--accent-blue, #4f8ef7); }
.sc-origen-punto--otras { background: var(--accent-amber, #f2c200); }
.sc-origen-punto--sd { background: color-mix(in srgb, var(--text-muted, #8b95a5) 55%, transparent); }
.sc-origen-nom { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-origen-fila b { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; color: var(--text); }
.sc-origen-fila i { font-style: normal; color: var(--text); min-width: 42px; text-align: right; }
/* ── Botones para elegir tema ──────────────────────────────────────────
El botón ES el color: mitad acento, mitad superficie, así se ve de un
vistazo cómo queda el tema. Antes era una cajita del tono del panel con
un punto chico adentro y sobre fondo oscuro no se distinguía.
Va en baseCss: la primera vez quedó en otra hoja y no llegaba. */
.gv-temas { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.gv-tema {
width: 26px; height: 26px; min-width: 26px; min-height: 26px;
padding: 0; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
border: 2px solid rgba(255,255,255,.28); display: inline-block;
transition: transform .12s, box-shadow .12s, border-color .12s;
}
.gv-tema:hover { transform: scale(1.12); border-color: rgba(255,255,255,.6); }
.gv-tema--on {
border-color: #ffffff;
box-shadow: 0 0 0 3px rgba(255,255,255,.22), 0 1px 4px rgba(0,0,0,.5);
}
.tcg-temas-fijo {
position: fixed; top: 10px; right: 14px; z-index: 99998;
display: flex; align-items: center; gap: 6px;
padding: 5px 9px; border-radius: 999px;
background: var(--panel, #1b2233);
border: 1px solid var(--border, #252d3f);
box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
@media print { .tcg-temas-fijo { display: none !important; } }
/* ── Indicadores del pie de los informes ───────────────────────────────
Se veían bien aislados pero no en la pantalla: alguna regla de más arriba
les pisaba el color. Van con prioridad y en la hoja global para que no
dependa de cuál gana. Los rótulos y las notas a 10,5px con gris claro;
el valor en el acento. */
.inf-root .inf-ind, .inf-pie .inf-ind {
background: var(--panel-2, #202940) !important;
border: 1px solid var(--border, #252d3f) !important;
}
.inf-root .inf-ind-label, .inf-pie .inf-ind-label,
.inf-root .inf-ind-nota, .inf-pie .inf-ind-nota,
.inf-root .inf-pie-ayuda, .inf-pie .inf-pie-ayuda {
color: var(--text) !important;
}
.inf-root .inf-ind-label, .inf-pie .inf-ind-label {
font-size: 12px !important; font-weight: 600 !important;
}
.inf-root .inf-ind-nota, .inf-pie .inf-ind-nota { font-size: 12px !important; }
.inf-root .inf-ind-valor, .inf-pie .inf-ind-valor {
color: var(--text, #ecf0f4) !important; font-size: 16px !important; font-weight: 700 !important;
}
.inf-root .inf-pie-total, .inf-pie .inf-pie-total {
background: var(--panel-2, #202940) !important;
color: var(--text, #ecf0f4) !important;
}
/* En modo claro se invierte: gris oscuro sobre superficie clara. */
.tema-claro .inf-ind, .tema-claro .inf-pie-total {
background: #ffffff !important; border-color: #d5dbe5 !important;
}
.tema-claro .inf-ind-label, .tema-claro .inf-ind-nota,
.tema-claro .inf-pie-ayuda { color: #000 !important; }
.tema-claro .inf-ind-valor, .tema-claro .inf-pie-total { color: #000 !important; }
/* ── Modal embebido dentro de otro modal ───────────────────────────────
Cobranzas e Inscripciones se abren adentro del modal de gestoría. Su
overlay tomaba el ancho de la VENTANA (1680px medidos) en vez del hueco
que le toca (1046px), así que el contenido se corría al costado y el
panel lo recortaba.
Con prioridad y en la hoja global a propósito: las reglas equivalentes
existían en otra de las cinco hojas del archivo y no llegaban. */
.gu-embebido, .gu-insc { min-width: 0 !important; width: 100%; }
.gu-embebido > .per-overlay,
.gu-insc > .per-overlay {
position: static !important; inset: auto !important;
width: 100% !important; max-width: 100% !important;
padding: 0 !important; background: none !important;
display: block !important; overflow: visible !important;
}
.gu-embebido > .per-overlay > .per-modal,
.gu-insc > .per-overlay > .per-modal {
width: 100% !important; max-width: 100% !important; min-width: 0 !important;
transform: none !important; box-shadow: none !important;
}
/* ── Tablas anchas dentro de un panel ──────────────────────────────────
El envoltorio de tabla tiene overflow-x:auto, pero al ser hijo de un
contenedor flex su min-width vale "auto": no se achica por debajo de su
contenido, se estira con la tabla y el desplazamiento nunca se activa.
El panel entonces recorta lo que sobra y la pantalla se va al costado.
Medido en cobranzas: tabla de 1800px dentro de 1046, se salía 449px.
Va al final de baseCss a propósito. El archivo tiene cinco hojas de
estilos distintas; ésta es la global. Las veces anteriores la escribí en
otra hoja y dentro de un @media de 720px, así que sólo corría en celular. */
.vn-tabla-wrap, .com-tabla-cont, .ing-tabla-cont,
.per-modal [class$="-tabla-wrap"], .per-modal [class$="-tabla-cont"] {
min-width: 0 !important; max-width: 100%; overflow-x: auto;
}
/* Entrar con Google. Todavía no está habilitado: se deja el lugar hecho
para no rehacer el diseño cuando Vesubio termine de configurar Workspace. */
.ent-o {
display: flex; align-items: center; gap: 12px;
margin: 20px auto 14px; max-width: 292px;
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px;
color: var(--text); text-transform: uppercase;
}
.ent-o::before, .ent-o::after {
content: ""; flex: 1; height: 1px; background: var(--border, #252d3f);
}
.ent-google {
display: flex; align-items: center; justify-content: center; gap: 9px;
width: 100%; max-width: 292px; margin: 0 auto 16px;
padding: 11px 14px; border-radius: 10px;
border: 1px solid var(--border, #252d3f);
background: var(--panel-2, #202940);
color: var(--text, #ecf0f4);
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 600;
cursor: pointer; transition: border-color .13s;
}
.ent-google:hover:not(:disabled) { border-color: var(--accent-amber, #f2c200); }
.ent-google:disabled { opacity: .5; cursor: not-allowed; }
.ent-google-pronto {
font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
padding: 2px 7px; border-radius: 20px;
background: var(--border, #252d3f); color: var(--text);
}
/* Elegir usuario, arriba de la clave. Tiene su propia zona con una línea
que la separa del teclado: antes el desplegable flotaba encima y se
superponía con «Tu clave». */
.ent-cab {
/* Centrada, en la misma columna que el teclado y los puntos: pegada a la
izquierda la pantalla quedaba desbalanceada. */
display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 0 0 18px; margin: 0 0 24px;
border-bottom: 1px solid var(--border, #252d3f);
}
.ent-cab-sel { min-width: 0; width: 100%; max-width: 292px; text-align: center; }
.ent-cab-select {
appearance: none; -webkit-appearance: none;
/* 292px = las tres columnas del teclado (86×3) más sus separaciones:
el desplegable queda exactamente del ancho del pad. */
width: 100%; max-width: 292px;
/* Con caja propia, no flotando: el desplegable es el control principal de
esta pantalla y tiene que verse como tal. */
padding: 11px 38px 11px 14px; margin: 0;
border-radius: 10px;
background: var(--panel-2, #202940);
border: 1px solid var(--border, #252d3f);
cursor: pointer;
/* Un