/* =====================================================================
estilo.css — la hoja que comparten las pantallas.
Se extrajo de index.html cuando apareció la segunda pantalla: dos
copias del mismo CSS es lo mismo que dos motores, solo que en
colores. Acá viven los tokens —el sistema es claro y nada más— y las piezas que ya
se repiten: tarjetas, tablas, cajas de aviso, píldoras de estado.
─────────────────────────────────────────────────────────────────────
LAS FUENTES VAN SERVIDAS DE ACÁ, NO DE UN CDN
─────────────────────────────────────────────────────────────────────
El lienzo de diseño las pedía a fonts.googleapis.com. No se hace, por
la misma razón por la que React va empaquetado y no bajado: nada de lo
que una pantalla necesita para dibujarse puede depender de que un
tercero conteste. Y hay una segunda: cada cliente que abre su cuenta
le entregaría su IP a Google sin haberlo pedido.
Son seis archivos woff2, 100 kB en total, con el subconjunto latino
que es lo único que este sistema escribe. `font-display: swap` para
que el texto se lea con la fuente del sistema mientras cargan, en vez
de dejar la pantalla en blanco.
─────────────────────────────────────────────────────────────────────
LOS COLORES Y LAS LETRAS SALEN DEL MANUAL DE MARCA
─────────────────────────────────────────────────────────────────────
«Estación del Valle · Manual de marca · v1». Todo lo de acá abajo que
tenga un número de color o un nombre de fuente sale de ahí, y cuando
este archivo se aparta del manual lo dice y explica por qué. Son dos
apartamientos, los dos por lo mismo que el propio manual concede en
su última página —«adentro manda la legibilidad de las tablas»—:
· LA MONOESPACIADA SE QUEDA. El manual define dos familias, y las
dos son proporcionales. Adentro del sistema hay columnas de
importes que se comparan de un vistazo y códigos de lote que se
leen carácter por carácter: en una proporcional, $1.111.111 y
$8.888.888 no miden lo mismo y la columna deja de alinearse.
IBM Plex Mono queda para ESO —cifras en tablas, códigos, fechas
cortas— y para nada más. Todo lo que es prosa, etiqueta o título
pasó a las dos del manual.
· LOS ENCABEZADOS DE TABLA NO VAN EN OCRE. El manual pide los
sobretítulos en versales ocre, y así quedaron los de las
secciones y los campos. En una tabla de nueve columnas, nueve
rótulos ocres compiten con los datos: van en musgo, que es del
manual y está para eso.
La rampa de cuatro tonos de la antigüedad de la deuda tampoco está en
el manual —no define una escala secuencial— y se mantiene: es color
que significa un dato, no identidad.
===================================================================== */
@font-face {
font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
src: url("fuentes/fraunces-latin-600-normal.woff2") format("woff2");
}
@font-face {
font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fuentes/instrument-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
src: url("fuentes/instrument-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
src: url("fuentes/instrument-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fuentes/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
src: url("fuentes/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
:root {
/* ---------- LA PALETA DEL MANUAL, CON SU NOMBRE AL LADO ----------
Los nombres de la izquierda son los que ya usaban las pantallas;
los de la derecha, los del manual. Se mantuvieron los nuestros
porque describen el PAPEL —qué es el fondo, qué es una línea— y
renombrar ciento cuarenta usos para que digan el color no habría
cambiado un pixel. */
--ground: #F5F0E6; /* marfil · fondo de página. Nunca blanco puro. */
--surface: #FFFFFF; /* blanco · campos y tarjetas */
--surface-2: #EBE4D5; /* arena · secciones alternas */
--ink: #1C2A22; /* tinta · texto principal · 13,5:1 */
--ink-suave: #3F4D45; /* tinta-suave · párrafos · 8,0:1 */
--muted: #56635B; /* musgo · notas al pie · 5,5:1 */
--rule: #DDD4C3; /* lino · líneas y bordes de tarjeta */
--rule-strong: #A9A08C; /* borde-campo */
/* EL VERDE ES LA MARCA; EL OCRE ES EL CONDIMENTO. El manual lo dice
con una proporción: 60 % marfil y arena, 30 % pino, 10 % ocre. Por
eso `--accent` —que tiñe bordes, focos, filas elegidas y la mitad
de los gráficos— es PINO, y el ocre vive aparte, en `--ocre`, que
usa una sola cosa por pantalla: el botón que propone la acción. */
--accent: #23392D; /* pino · marca */
--accent-ink: #17241C; /* pino-profundo */
--accent-soft: color-mix(in srgb, #23392D 9%, #F5F0E6);
--ocre: #A8551E; /* ocre · botón principal · blanco 5,3:1 */
--ocre-ink: #8A4417; /* ocre-texto · sobretítulos y enlaces sobre claro */
--durazno: #E3B58F; /* sobretítulos sobre pino */
--salvia: #5C7A66; /* sierra lejana · solo gráfico */
--salvia-clara: #9DB3A3;
--warn: #8A4417; /* lo que falta no está mal: falta */
--warn-soft: color-mix(in srgb, #E3B58F 40%, #F5F0E6);
--danger: #9B2C1C; /* error · validación en línea */
--exito: #2F6B45; /* confirmaciones */
/* LA BARRA DE ARRIBA tiene sus propios colores, aparte del resto:
es oscura sobre una página clara. Es lo que le da al sistema una
cabeza reconocible en vez de un título suelto sobre el fondo. El
manual la nombra: pino, con los sobretítulos en durazno. */
--barra: #23392D;
--barra-texto: #F5F0E6;
--barra-apagado: #9DB3A3;
--barra-activo: #17241C;
--barra-activo-texto: #E3B58F;
/* EL RADIO TAMBIÉN ES DEL MANUAL: 8 px en botones y campos, 12 en
tarjetas. Estaba en 4 y 6, que no era una decisión sino lo que
había quedado. */
--radio: 8px;
--radio-tarjeta: 12px;
--f-display: "Fraunces", Georgia, "Times New Roman", serif;
--f-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ---------- EL SISTEMA ES CLARO, SIEMPRE ----------
Había un modo oscuro que seguía el tema del sistema operativo. Se
sacó, y no por gusto: no correspondía a ningún diseño —el lienzo es
claro y nada más—, así que era una segunda cara que nadie había
dibujado y que había que revisar en cada pantalla nueva. Con la Mac
en oscuro las nueve pantallas salían casi negras y no se parecían a
lo diseñado.
`color-scheme: light` es la parte que hace falta decir en voz alta:
sin eso, el navegador sigue dibujando LO SUYO en oscuro —los campos
de texto, los desplegables, el calendario del campo de fecha, las
barras de desplazamiento— y quedaban cajas negras sobre una página
clara, que es peor que el oscuro entero. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
/* ---------- `hidden` GANA SIEMPRE ----------
El atributo `hidden` del HTML lo aplica el navegador con
`[hidden] { display: none }`, que es una regla de especificidad
mínima: CUALQUIER regla nuestra que ponga `display` sobre ese mismo
elemento la pisa, y el elemento se ve igual.
Ya pasó: el campo del valor de la UVA en el alta está escrito
`hidden` cuando el plan es en pesos, y se veía igual, porque
`.campo` le pone `display: flex`. Un formulario que muestra un campo
que no corresponde invita a llenarlo.
No hay un caso en el que queramos que algo marcado `hidden` se vea,
así que el `!important` acá no esconde una pelea de estilos: cierra
una clase entera de defectos que no dan error en ningún lado. */
[hidden] { display: none !important; }
/* Fraunces viene en un solo peso, 600, que es el que el manual usa
para todo lo de display. Sin decirlo, un `h1` pedía 700 y el
navegador lo falsificaba engordando los trazos. */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; }
body {
margin: 0; background: var(--ground); color: var(--ink);
font-family: var(--f-body); font-size: 14px; line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* ---------- LA BARRA DE ARRIBA ----------
Sesenta píxeles oscuros con tres cosas: de qué loteo es esto, en qué
pantalla estás, y con qué cuenta estás operando. Nada más.
El TÍTULO DE LA PÁGINA no va acá: va abajo, en el área clara, junto
con los controles de esa pantalla. Mezclarlos obligaba a que un
campo de fecha y un selector convivieran con la navegación, y el ojo
no sabía dónde estaba el borde entre «el sistema» y «esta pantalla». */
header.barra {
height: 60px; flex-shrink: 0; background: var(--barra);
display: flex; align-items: center; gap: 26px; padding: 0 18px;
}
header.barra .marca { display: flex; align-items: center; gap: 12px; }
/* El sello: el fondo claro que el manual le pide al isotipo, con su
área de resguardo adentro. No es «encerrarlo sin resguardo» —eso es
lo que el manual prohíbe—: es darle el marfil sobre el que el
isotipo está dibujado. */
header.barra .marca .sello {
width: 48px; height: 48px; border-radius: var(--radio);
background: var(--ground); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
header.barra .marca .sello img { display: block; width: 32px; height: 32px; }
header.barra .marca .nombre {
font-family: var(--f-display); font-weight: 600; font-size: 17px;
color: var(--barra-texto); white-space: nowrap;
}
/* El título de la pantalla y sus controles, ya sobre el fondo claro. */
.titulo {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 20px 22px 0;
}
.titulo h1 { margin: 0; font-size: 23px; font-weight: 600; }
.titulo .corte { color: var(--muted); font-size: 12.5px; font-family: var(--f-mono); }
/* UN CAMPO ES UN CAMPO, MIRE O NO EL ATRIBUTO `type` (v112).
Esta regla decía `input[type="date"]`, y desde la v108 la fecha se
escribe en un campo de TEXTO —el control del navegador tomaba el
formato de su idioma y mostraba mm/dd/yyyy—. El selector miraba un
atributo que ya no está, así que el campo quedó con el dibujo de
fábrica: trece píxeles, Arial y borde hundido. Es el mismo defecto
que la v101 encontró en Topes, una vuelta más tarde y por otra
puerta. Ahora se nombra lo que NO es un campo de escribir —el tilde,
el radio y el archivo tienen su propio dibujo— y todo lo demás
entra, incluido el que alguien escriba mañana.
VA EN UN SOLO `:not(...)` CON LA LISTA ADENTRO, y no en tres `:not`
encadenados, por el peso del selector: tres suman como tres clases y
el selector pasaba a pesar más que `.celular-en-linea .dos input`,
que le pone `min-width: 0` al prefijo del celular. Con la lista
adentro pesa lo mismo que el `input[type="text"]` que había antes,
así que el resto de la hoja sigue ganando y perdiendo donde ya
ganaba y perdía. La primera versión de este arreglo puso el prefijo
del celular en 240 píxeles y lo encontró la prueba que mide que los
dos campos vayan en el mismo renglón. */
.titulo input:not([type="checkbox"], [type="radio"], [type="file"]) {
font: inherit; font-family: var(--f-mono); font-size: 12.5px;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--radio); padding: 4px 8px;
}
/* LA BARRA PASA A DOS RENGLONES MUCHO ANTES QUE A 720 px, que era el
corte de cuando había cinco pestañas cortas. Con nueve y con los
nombres largos que la marca les dio —«datos del fideicomiso»,
«estudios jurídicos»— la fila entera mide cerca de mil trescientos.
Cortar recién a 720 dejaba media pantalla de usuarios con pestañas
tapadas y sin nada que lo dijera.
Y SUBIÓ A 1520 AL APARECER LA NOVENA PESTAÑA (preventas, v42).
Medido, no estimado: con nueve pestañas, a 1.440 px se cortaban 64 y
a 1.366 px, 138 — y como `.pestanas` scrollea con la barra
escondida, el corte no se veía. Abajo de 1.340 no pasaba nunca,
porque ahí esta misma regla ya le daba su propio renglón: o sea que
la banda rota era 1.341–1.520, justo los anchos de laptop.
El número se mide, no se elige: es lo que miden las nueve pestañas
más la marca y el bloque de quién opera, con aire. Una pestaña más
lo va a volver a romper, y `probar-pantallas.js` lo comprueba a
siete anchos para que se note acá y no en la máquina de alguien. */
@media (max-width: 1520px) {
header.barra { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
.quien-opera { margin-left: 0; }
.pestanas { order: 3; width: 100%; }
}
.cols { display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 0; align-items: start; }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }
/* LA BARRA LATERAL, y solo ella.
Estos estilos eran de un selector `nav` a secas, que funcionaba
mientras hubo una sola pantalla con un solo nav. Al aparecer la
segunda, la barra de pestañas del encabezado heredó el min-height de
60vh y abrió un agujero de seiscientos píxeles arriba de todo. Van
scopeados a la columna: un selector de etiqueta suelto es una regla
que se aplica a lo que todavía no existe. */
.cols > nav { border-right: 1px solid var(--rule); padding: 14px 0 40px; min-height: 60vh; }
@media (max-width: 820px) {
.cols > nav { border-right: 0; border-bottom: 1px solid var(--rule); min-height: 0; }
}
.cols > nav button {
display: block; width: 100%; text-align: left; font: inherit;
background: none; border: 0; border-left: 3px solid transparent;
padding: 9px 16px; cursor: pointer; color: var(--ink);
}
.cols > nav button:hover { background: var(--surface-2); }
.cols > nav button[aria-current="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.cols > nav .lote { font-family: var(--f-mono); font-weight: 600; font-size: 13.5px; }
.cols > nav .quien { color: var(--muted); font-size: 12.5px; display: block; }
.cols > nav .tag {
font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted);
}
/* BUSCAR UNA PERSONA, FUERA DE LA BARRA LATERAL (v50).
Javi comparó los dos buscadores de personas que tiene el sistema
—el de Clientes, que es esta pieza puesta en la columna izquierda,
y el de Preventa, que era un campo con un botón «buscar»— y eligió
éste: «usemos el mismo formato». Así que la misma pieza vive ahora
en dos lugares y los renglones se dibujan igual en los dos; lo
único que cambia es que en la barra lateral van a sangre y acá, al
estar metidos en un formulario, van como tarjetas. Dos estilos
distintos para «gente con un botón al lado» serían dos formas de
leer lo mismo. */
.resultados { display: grid; gap: 4px; margin: 6px 0 14px; }
.resultados button {
display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--radio);
padding: 8px 12px;
}
.resultados button:hover { border-color: var(--accent); background: var(--surface-2); }
.resultados .lote { font-family: var(--f-mono); font-weight: 600; font-size: 13.5px; }
.resultados .quien { color: var(--muted); font-size: 12.5px; display: block; }
.resultados .tag {
font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted);
}
main { padding: 18px 22px 60px; min-width: 0; }
h2 { margin: 0 0 2px; font-size: 1.1rem; }
.sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.tarjetas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.tarjeta {
background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radio-tarjeta);
padding: 13px 16px; min-width: 158px;
}
/* EL SOBRETÍTULO DE LA TARJETA es de los que el manual pinta en ocre:
anuncia un bloque, no rotula un campo. */
.tarjeta .k {
font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ocre-ink); display: block;
}
.tarjeta .v { font-size: 1.12rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tarjeta .u { color: var(--muted); font-size: 12px; display: block; }
.tarjeta.mora .v { color: var(--danger); }
.caja {
border-left: 3px solid var(--accent); background: var(--accent-soft);
border-radius: 0 var(--radio) var(--radio) 0; padding: 12px 15px;
margin: 0 0 18px; font-size: 13.5px;
}
.caja.aviso { border-left-color: var(--warn); background: var(--warn-soft); }
.caja.mal { border-left-color: var(--danger); background: var(--surface); color: var(--danger); }
.caja p { margin: 0 0 6px; } .caja p:last-child { margin: 0; }
h3 { font-size: .95rem; margin: 24px 0 6px; }
.envoltura {
overflow-x: auto; border: 1px solid var(--rule);
border-radius: var(--radio-tarjeta); background: var(--surface);
}
table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 620px; }
th {
text-align: left; font-family: var(--f-body); font-weight: 600; font-size: 10.5px;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
padding: 9px 11px; background: var(--surface-2); border-bottom: 1px solid var(--rule);
white-space: nowrap;
}
td { padding: 7px 11px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
.pagada { color: var(--muted); }
.vencida td { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.pildora {
font-family: var(--f-body); font-weight: 600; font-size: 10.5px; letter-spacing: .04em;
padding: 2px 7px; border-radius: 4px; background: var(--surface-2); color: var(--muted);
}
.pildora.ok { background: var(--accent-soft); color: var(--accent-ink); }
.pildora.deb { background: var(--warn-soft); color: var(--warn); }
.pildora.mal { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.vacio { color: var(--muted); padding: 40px 0; text-align: center; }
/* ---------- LA FICHA DEL CLIENTE ----------
La vista por persona. Se apoya en lo que ya existe —las tarjetas,
las píldoras, la barra de avance, los botones de la columna
izquierda— y agrega solo lo que no tenía nombre: el buscador, la
cabecera de la persona, la tarjeta de un lote y la lista de datos.
Una cosa que se ve en el reparto: cada GRUPO de titularidad es una
sección con su propio encabezado y sus propios totales. No hay un
contenedor que los abrace con un total arriba, y es a propósito —
ese total no existe: el dinero no cruza de un grupo a otro. */
.buscar { padding: 14px 16px 10px; }
.buscar label {
display: block; font-family: var(--f-body); font-weight: 600; font-size: 13px;
color: var(--ink); margin-bottom: 5px;
}
.buscar input {
font: inherit; width: 100%; padding: 10px 12px;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule-strong); border-radius: var(--radio);
}
.buscar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* La cabecera: quién es, de un vistazo y antes que cualquier número. */
.persona { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.persona h2 { font-size: 1.45rem; }
.persona .sub { margin: 2px 0 0; }
.inicial.grande {
width: 46px; height: 46px; font-size: 16px;
background: var(--accent-soft); color: var(--accent-ink);
border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.grupo { margin: 0 0 30px; }
.grupo > header { margin-bottom: 10px; }
.grupo > header h3 { margin: 0; font-size: 1.05rem; }
.grupo > header .sub { margin: 1px 0 0; }
.lotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.tarjeta-lote {
background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radio-tarjeta);
padding: 14px 16px 16px;
}
/* Un plan cancelado no se esconde: se apaga. Sigue estando, y se lee
como lo que es — algo que pasó y terminó. */
.tarjeta-lote.apagada { background: var(--surface-2); color: var(--muted); }
.tarjeta-lote .fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tarjeta-lote .lote { font-family: var(--f-mono); font-weight: 600; font-size: 14px; }
.tarjeta-lote .sub { margin: 6px 0 0; font-family: var(--f-body); }
.tarjeta-lote .barra-avance { margin: 10px 0 12px; }
.tarjeta-lote .pendiente { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.tarjeta-lote .pendiente .k {
font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted);
}
.tarjeta-lote .pendiente .v {
font-size: 1.08rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tarjeta-lote a { font-size: 13px; }
/* Los datos personales, en dos columnas. Las que faltan se dicen. */
.datos { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
.datos dt {
font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted);
}
.datos dd { margin: 2px 0 0; }
.datos dd.falta { color: var(--muted); font-style: italic; }
.cotitular { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.cotitular .inicial {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
background: var(--accent-soft); color: var(--accent-ink);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11.5px;
}
.cotitular button.nombre {
font-family: var(--f-body); font-size: 14px; font-weight: 600;
color: var(--accent-ink); padding: 0;
}
.cotitular .sub { font-size: 12.5px; margin: 0; }
/* ---------- COTEJAR UN PAGO CONTRA SU COMPROBANTE ----------
Dos columnas y no un link: lo que hay que hacer acá es mirar dos
cosas a la vez. Abrir el archivo en otra pestaña obliga a memorizar
el importe, ir, volver y confiar en la memoria — que es exactamente
donde se cuela un error de un dígito. */
.cotejo {
display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, 1fr);
gap: 20px; align-items: start; margin: 18px 0 22px;
background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--radio-tarjeta); padding: 16px 18px;
}
@media (max-width: 900px) { .cotejo { grid-template-columns: 1fr; } }
.cotejo h3 { margin: 0 0 8px; font-size: .95rem; }
.cotejo .visor {
display: block; width: 100%; max-height: 460px; min-height: 260px;
object-fit: contain; background: var(--surface-2);
border: 1px solid var(--rule); border-radius: var(--radio);
}
.cotejo .sub { margin: 8px 0 0; }
.cotejo .datos { grid-template-columns: 1fr; gap: 9px; }
/* ---------- las pestañas, adentro de la barra ---------- */
/* LAS PESTAÑAS SON LO QUE CEDE. En una barra apretada algo tiene que
achicarse, y no puede ser el rincón de la derecha: ahí está «salir»,
que es la única forma de cerrar la sesión. `min-width: 0` es lo que
le permite a este bloque achicarse por debajo de su contenido —sin
eso, un hijo flex se niega y empuja al vecino afuera de la pantalla,
que es exactamente lo que pasaba— y el desplazamiento horizontal
deja llegar a la pestaña que quedó tapada. */
.pestanas {
display: flex; align-items: center; gap: 3px;
min-width: 0; overflow-x: auto; scrollbar-width: none;
/* SE PARTE EN RENGLONES ANTES QUE ESCONDER (v59). Sistema tiene
catorce pestañas, y ni en su propio renglón entran a 1.280 px: con
el desplazamiento escondido, las dos últimas —el padrón y la
auditoría— no se veían y nada lo decía. */
flex-wrap: wrap; row-gap: 2px;
}
.pestanas::-webkit-scrollbar { display: none; }
/* LAS DEL ADMINISTRADOR SON ENLACES; LAS DEL PORTAL, BOTONES (v51).
Se ven igual a propósito: es la misma barra y la misma forma de
moverse. Lo que cambia es que unas van a otra pantalla y las otras
cambian qué se mira de la cuenta, y eso no tiene por qué notarse
mirando. El `button` se desviste —font, fondo, borde— porque un
botón de navegador llega con estilos propios que en esta barra
desentonan. */
.pestanas a, .pestanas button {
font-size: 13.5px; text-decoration: none; color: var(--barra-apagado);
padding: 7px 12px; border-radius: var(--radio); white-space: nowrap;
display: inline-flex; align-items: center; gap: 7px;
}
.pestanas button {
font-family: inherit; background: none; border: 0; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
}
.pestanas a:hover, .pestanas button:hover {
color: var(--barra-texto); background: var(--barra-activo);
}
.pestanas a[aria-current="page"], .pestanas button[aria-current="page"] {
background: var(--barra-activo); color: var(--barra-activo-texto); font-weight: 600;
}
/* El contador. En la tipografía de las cifras, como toda cuenta del
sistema. No cambia de tamaño al ponerse en negrita la pestaña
abierta: un número que salta de lugar al hacer clic se lee como si
hubiera cambiado. */
.pestanas .cuantos {
font-family: var(--f-mono); font-size: 11px; font-weight: 600;
background: rgba(255, 255, 255, .14); border-radius: 999px;
padding: 1px 6px; color: inherit;
}
/* ---------- quién está operando: el andamio del login ---------- */
/* EL NOMBRE A LA VISTA NO ES DECORACIÓN. En una oficina donde se
comparte la computadora, ver de quién es la sesión ANTES de apretar
«acreditar» es lo que evita que una aprobación quede firmada por el
compañero que se olvidó de salir. Por eso va arriba a la derecha,
siempre, y no adentro de un menú. */
/* ESTE RINCÓN NO SE ACHICA NUNCA. `flex-shrink: 0` y el nombre en un
solo renglón: Javi no encontraba «salir», y el motivo era que a
1.200 px el nombre se partía en tres líneas y el botón se iba fuera
del borde derecho. Un botón fuera de la pantalla no da error: no
está, y punto. */
.quien-opera {
display: flex; align-items: center; gap: 10px; margin-left: auto;
font-size: 13px; color: var(--barra-apagado);
flex-shrink: 0; white-space: nowrap;
}
/* El nombre sí puede recortarse con puntos suspensivos si la pantalla
es muy angosta: se pierde el apellido, no el botón. */
.quien-opera #quien { overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.quien-opera .inicial {
width: 29px; height: 29px; border-radius: 50%; flex-shrink: 0;
background: var(--barra-activo); color: var(--barra-activo-texto);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11.5px; letter-spacing: .02em;
}
/* «SALIR» SE VE COMO UN CONTROL, Y NO SIEMPRE FUE ASÍ.
Estaba escrito como texto apagado sin subrayado, con este motivo:
«ya está claro que se puede apretar, es lo único apretable de ese
rincón». Dejó de ser cierto el día que al lado apareció el círculo
con las iniciales, y Javi no lo encontró. Ahora tiene borde: es la
forma que el manual le da a un botón secundario, y en el rincón más
angosto de la pantalla ocupa apenas unos píxeles más. */
.quien-opera button.enlace {
color: var(--barra-texto); text-decoration: none;
font-family: var(--f-body); font-size: 13px; font-weight: 600;
border: 1px solid var(--barra-apagado); border-radius: var(--radio);
padding: 6px 12px; background: none; cursor: pointer; flex-shrink: 0;
}
.quien-opera button.enlace:hover {
background: var(--barra-activo); border-color: var(--barra-texto);
}
/* EL NOMBRE ES APRETABLE PERO NO ES UN BOTÓN (v89). Abre los datos
personales, y si tuviera el borde de «salir» habría dos botones
iguales en el mismo rincón y uno de ellos cierra la sesión. Queda
como texto, con el subrayado punteado que avisa que hace algo. */
.quien-opera #quien {
border: 0; padding: 0; background: none; cursor: pointer;
color: var(--barra-apagado); font-weight: 500;
text-decoration: underline dotted; text-underline-offset: 3px;
}
.quien-opera #quien:hover,
.quien-opera #quien[aria-expanded="true"] {
color: var(--barra-texto); text-decoration-style: solid;
}
.quien-opera { position: relative; }
/* EL PANEL SE ABRE SOBRE FONDO CLARO aunque cuelgue de la barra
oscura: adentro hay una ficha y, para Sistema, un formulario, y son
las mismas fichas y los mismos formularios que en el resto del
sistema. Un formulario oscuro sería una segunda forma de llenar
campos. */
.quien-opera .panel-datos {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
width: min(420px, calc(100vw - 32px)); text-align: left;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--radio);
padding: 16px 18px 18px; box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
white-space: normal;
}
.quien-opera .panel-datos h2 { margin: 0 0 4px; font-size: 16px; }
.mis-datos .rol {
margin: 0 0 10px; font-size: 12px; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted);
}
.mis-datos dl { margin: 0 0 12px; display: grid; gap: 7px; }
.mis-datos dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.mis-datos dt { font-size: 12.5px; color: var(--muted); }
.mis-datos dd { margin: 0; font-size: 13.5px; }
.mis-datos .botonera { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.mis-datos .sub { margin: 8px 0 0; }
/* LO QUE FALTA SE MARCA Y NO SE ESCONDE: al equipo dado de alta antes
de la v89 no se le pidió el domicilio, y un renglón vacío es lo que
hace que alguien lo cargue. Se marca con el color apagado y no con
el rojo de error: que falte no es una falla de nadie. */
.mis-datos .falta dd, .datos-preventa .falta dd { opacity: .75; font-style: italic; }
/* ---------- el detalle del reajuste de tasa (v90) ---------- */
/* LA FILA DEL DETALLE NO SE PINTA COMO UNA CUOTA MÁS: es la
explicación de la de arriba, así que va con el fondo alterno y sin
el borde que separa cuotas. Con el borde puesto parecía una cuota
de importe cero. */
tr.detalle-tasa > td { background: var(--surface-2); padding: 0; }
.reajuste { padding: 14px 16px 16px; font-size: 14px; }
.reajuste p { margin: 0 0 8px; max-width: 74ch; }
.reajuste p:last-child { margin-bottom: 0; }
/* La cuenta se lee de corrido y en una línea cuando entra: es el
renglón que explica de dónde salió el número. */
.reajuste .cuenta {
font-family: var(--f-mono); font-size: 13px; line-height: 1.75;
background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--radio); padding: 9px 12px;
}
.reajuste table.dias-promediados {
margin-top: 10px; width: auto; min-width: 240px; font-size: 13px;
}
.reajuste table.dias-promediados th { font-size: 11.5px; }
.reajuste table.dias-promediados td { padding: 4px 12px; }
/* LA MARCA ES APRETABLE Y NO PARECE UN BOTÓN, igual que el nombre de
la barra: lo que hace es abrir algo ahí mismo. La píldora ya tiene
su forma; el botón solo aporta el cursor y el foco. */
td > button.enlace:has(.pildora) {
border: 0; padding: 0; background: none; cursor: pointer;
}
td > button.enlace .pildora { cursor: pointer; }
td > button.enlace[aria-expanded="true"] .pildora {
outline: 2px solid var(--accent); outline-offset: 1px;
}
/* ---------- botones ---------- */
.acciones { display: flex; gap: 10px; align-items: center; margin: 22px 0 0; flex-wrap: wrap; }
/* EL BOTÓN QUE PROPONE LA ACCIÓN VA EN OCRE, Y ES UNO POR PANTALLA.
Lo dice el manual y es la única aparición del ocre en una pantalla
de trabajo: «el resto, con borde». Alto mínimo 44 px, que es lo que
hace que se pueda apretar con el pulgar. */
/* VALE TAMBIÉN PARA UN QUE HACE DE BOTÓN.
Decía `button.accion` a secas, y los dos botones de acceso.html
—«Entrar», después de elegir la contraseña, e «Ir al ingreso»
cuando el link ya no sirve— son enlaces: no agarraban ninguna de
estas reglas y salían con el azul del navegador. Era el único azul
que quedaba en el sistema, y justo en la primera pantalla que ve un
cliente nuevo. El comentario de acá abajo cuenta que ese azul ya se
había sacado de `main`; esta pantalla no tiene `main`. */
button.accion, a.accion {
font: inherit; font-weight: 600; font-size: 14px;
border-radius: var(--radio); padding: 10px 20px; min-height: 44px; cursor: pointer;
border: 1px solid var(--ocre); background: var(--ocre); color: #fff;
}
a.accion {
display: inline-block; text-decoration: none; text-align: center;
line-height: 22px; box-sizing: border-box;
}
button.accion:hover, a.accion:hover {
background: var(--ocre-ink); border-color: var(--ocre-ink); color: #fff;
}
button.accion[disabled] { opacity: .45; cursor: not-allowed; }
/* EL BOTÓN DISCRETO. `sutil` se usaba en dos lugares y no tenía una
sola regla: salía con el dibujo del navegador, que es justo lo que
el resto del sistema evita. Es para la acción que está ahí pero no
es la principal de la pantalla —abrir un formulario, cancelarlo—,
así que no lleva el ocre: un solo botón ocre por pantalla. */
button.sutil, a.sutil {
font: inherit; font-size: 14px; cursor: pointer;
background: none; color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--radio);
padding: 7px 13px; margin-top: 12px;
}
button.sutil:hover, a.sutil:hover {
border-color: var(--rule-strong); background: var(--surface);
}
button.accion.secundaria, a.accion.secundaria {
background: none; color: var(--danger); border-color: var(--danger);
}
button.accion.secundaria:hover, a.accion.secundaria:hover {
background: var(--danger); color: #fff;
}
/* Dentro de una fila de acciones el `margin-top` de `sutil` lo dejaba
12 px más abajo que el campo de al lado. La fila ya centra todo. */
.acciones button.sutil, .acciones a.sutil { margin-top: 0; }
.acciones input:not([type="checkbox"], [type="radio"], [type="file"]) {
font: inherit; font-size: 14px; flex: 1 1 240px; min-width: 200px;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule-strong); border-radius: var(--radio); padding: 10px 12px;
}
.nota { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
/* ---------- los enlaces de adentro de la página ----------
El azul del navegador era el único color del sistema que no salía de
la paleta, y saltaba a la vista justo en la tabla de recibos, que es
casi toda enlaces. Va scopeado a `main` y `.titulo` a propósito: las
pestañas también son y tienen sus propios colores, que son los
de la barra oscura. */
main a, .titulo a, .alta a, .barra-recibo a {
color: var(--accent-ink); text-decoration-color: var(--rule);
text-underline-offset: 2px;
}
main a:hover, .titulo a:hover, .alta a:hover, .barra-recibo a:hover {
text-decoration-color: currentColor;
}
/* Un botón que se lee como un enlace: para «salir», que no compite con
las acciones de la pantalla pero tiene que estar siempre a mano. */
button.enlace {
font: inherit; font-size: 12.5px;
background: none; border: 0; padding: 0 0 0 10px; cursor: pointer;
color: var(--muted); text-decoration: underline;
}
button.enlace:hover { color: var(--ink); }
/* ANULAR UNA VENTA. Cerrado, abajo de todo y con su propio color: es
la acción más destructiva de la pantalla y no es trabajo diario.
Tiene que estar, y no tiene que estar a mano. */
details.anular {
margin: 28px 0 0; border-top: 1px solid var(--rule); padding-top: 14px;
}
details.anular > summary {
cursor: pointer; color: var(--danger); font-size: 13px;
list-style: none; padding: 4px 0;
}
details.anular > summary::before { content: '▸ '; }
details.anular[open] > summary::before { content: '▾ '; }
details.anular > summary::-webkit-details-marker { display: none; }
/* LOS CAMPOS DE LOS FORMULARIOS DE OPERACIÓN.
Estaban colgados solo de `details.anular`, y el día que las tres
operaciones dejaron de ser los formularios se quedaron sin
formato: la etiqueta y el campo en la misma línea, el textarea del
tamaño de una caja de búsqueda. No daba error en ningún lado, solo
se veía mal. Ahora valen para las dos formas. */
details.anular label,
.cuerpo-operacion label {
display: block; margin: 12px 0 4px; font-size: 13px; color: var(--muted);
}
details.anular textarea,
.cuerpo-operacion textarea {
font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--radio); padding: 8px 11px;
}
details.anular ul,
.cuerpo-operacion ul:not(.elegidos) { margin: 6px 0 0 18px; padding: 0; }
details.anular li,
.cuerpo-operacion ul:not(.elegidos) li { margin: 3px 0; }
details.anular h4,
.cuerpo-operacion h4 {
font-size: 14px; margin: 18px 0 2px; color: var(--ink);
font-family: var(--f-body); font-weight: 600;
}
details.anular h4:first-child,
.cuerpo-operacion h4:first-child { margin-top: 6px; }
details.anular select,
.cuerpo-operacion select {
font: inherit; font-size: 14px; background: var(--surface); color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--radio); padding: 8px 11px; min-width: 240px;
}
/* Los de escribir: el cuerpo de una operación los tenía por estar
dentro de un , y ahora los pide por su cuenta. Sin mirar el
atributo `type`, por lo que explica la regla de `.titulo`: acá vivían
la fecha de la condonación y la del cambio de titularidad, que desde
la v108 son campos de texto. */
.cuerpo-operacion input:not([type="checkbox"], [type="radio"], [type="file"]) {
font: inherit; font-size: 15px; box-sizing: border-box;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--radio); padding: 8px 11px;
min-width: 240px;
}
/* El campo que lleva VARIOS valores —las copias de una derivación— no
puede medir lo mismo que el que lleva una fecha: con dos direcciones
ya no se ve lo que uno escribió. Y al ocupar el renglón entero, el
botón que viene después cae abajo en vez de quedar pegado al lado. */
.cuerpo-operacion input.ancho { width: 100%; max-width: 560px; }
/* EL FILTRO DEL TALONARIO (v66). Una fila de controles sobre la tabla,
que se parte sola en pantallas angostas. No es un formulario: no se
envía, filtra mientras se escribe, así que no lleva botón. */
/* EL FILTRO DEL TALONARIO (v66, redibujado en la v88).
Sus campos ahora son `.campo` dentro de `.fila-campos`, que es la
pieza que usan Auditoría y todos los formularios: el dibujo de un
campo está definido UNA vez y estos lo heredan. Lo que quedaba acá
—label chica en gris, borde por defecto del navegador— era una
segunda definición a medias, y se veía. Acá queda solo lo propio de
este filtro: el ancho del buscador, que tiene que ser mayor que el
de una fecha porque adentro va un nombre. */
.filtro-talonario { margin: 14px 0 6px; }
.filtro-talonario .campo.ancho-buscar { flex: 1 1 280px; }
.filtro-talonario .campo input, .filtro-talonario .campo select { width: 100%; }
.filtro-talonario .sub { margin: 8px 0 0; }
.cuerpo-operacion .dos { display: flex; gap: 16px; flex-wrap: wrap; }
.cuerpo-operacion .dos > div { flex: 1 1 240px; }
/* ===================================================================
EL PORTAL DEL CLIENTE
=================================================================== */
main.portal { max-width: 900px; margin: 0 auto; padding: 22px 20px 60px; }
/* EL MOTIVO DEL RECHAZO, pegado abajo de su pago (v51). Es un renglón
de la misma tabla y no una caja aparte: leerlo lejos de la fila que
explica obliga a aparear de memoria cuál era cuál. Sin borde arriba,
para que se lea como continuación de la fila y no como otra. */
/* El número de recibo es un código: partido en dos renglones se lee
como dos números. Y la aclaración del anticipo necesita aire, porque
pegada a la tabla parece el pie de la última fila. */
#mis-pagos td.recibo { white-space: nowrap; }
#mis-pagos .nota-anticipo { margin-top: 12px; }
.portal tr.motivo td {
border-top: 0; padding-top: 0; font-size: 13.5px; color: var(--danger);
}
.portal .grupo {
background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--radio-tarjeta); padding: 20px 22px 24px; margin: 0 0 18px;
}
.portal .grupo h2 { font-size: 18px; margin: 0 0 2px; }
.portal .grupo h3 { font-size: 15px; margin: 22px 0 6px; }
/* EL NÚMERO QUE VINO A BUSCAR. Grande, en pesos, y con la fecha de la
que salen esos pesos debajo: sin esa línea el número cambia mañana
y nadie sabe por qué. */
.portal .hero { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 4px; }
.portal .hero .k, .portal .total .k {
font-size: 11px; font-family: var(--f-body); font-weight: 600; color: var(--ocre-ink);
text-transform: uppercase; letter-spacing: .16em;
}
.portal .hero .v, .portal .total .v {
font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.portal .hero .u { font-size: 13px; color: var(--muted); }
/* La tarjeta del total consolidado usa las mismas piezas que el hero,
así que necesita la misma caja: sin esto el rótulo y el número
quedaban en la misma línea, pisándose. */
.portal .total {
background: var(--accent-soft); border-color: var(--accent);
display: flex; flex-direction: column; gap: 2px;
}
.portal .total .sub { margin: 6px 0 0; }
.portal .mora-linea { font-size: 14px; margin: 10px 0 0; }
.portal .mora-linea strong { color: var(--danger); }
/* LA BARRA. Dos partes de un todo que sí es un todo —el capital
financiado— y no tres: la mora no es una porción del precio del
lote, es deuda agregada, y meterla acá diría que sí lo es.
Se llama `barra-avance` y no `barra` a secas porque la barra de
arriba también es una barra: dos reglas con el mismo nombre de clase
se pisan en silencio —el `border-radius` y el `overflow` de esta se
le aplicaban al encabezado, que no los pidió— y ese es un defecto
que no da error en ningún lado, solo se ve raro. */
.barra-avance {
height: 10px; border-radius: 5px; background: var(--surface-2);
/* La pista lleva borde. Sin él, sobre una tarjeta blanca queda gris
claro sobre blanco y una barra al 4 % se ve como si no hubiera
barra: el lote que arrancó a pagar se lee igual que el que no
pagó nada. */
border: 1px solid var(--rule);
overflow: hidden; margin: 16px 0 6px;
}
.barra-avance .pagado { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.portal .leyenda { font-size: 13px; color: var(--muted); margin: 0; }
.portal .leyenda .lp, .portal .leyenda .lf {
display: inline-block; width: 9px; height: 9px; border-radius: 2px;
margin: 0 5px 0 0; vertical-align: 0;
}
.portal .leyenda .lf { margin-left: 16px; background: var(--surface-2); border: 1px solid var(--rule); }
.portal .leyenda .lp { background: var(--accent); }
.portal .leyenda .nota { display: block; margin-top: 3px; }
.portal td.mora { color: var(--danger); }
/* Informar un pago: el único formulario que ve un cliente. */
.portal .informar label {
display: block; margin: 14px 0 4px; font-size: 13px; color: var(--muted);
}
/* NO SE MIRA EL ATRIBUTO `type`, y es la regla de toda la hoja desde
la v112. Un sin ese atributo ES de texto para el navegador,
pero el selector `input[type="text"]` mira el ATRIBUTO y no lo
encuentra: los campos que se escriben con `inputMode="decimal"` —los
de Topes, los de Series, los de un poder— quedaban con el dibujo de
fábrica al lado de los que sí lo tienen. Javi: «en topes el formato
es pobre», y más tarde «hay muchas casillas sin formato».
Se arregla en la hoja y no poniéndole `type` a cada campo, por lo de
siempre: el que escriba el próximo input sin `type` tampoco va a
saber que hace falta. Se nombra lo que NO es un campo de escribir
—tilde, radio y archivo, que tienen su propio dibujo— y entra todo
lo demás. */
.portal .informar input:not([type="checkbox"], [type="radio"], [type="file"]),
.portal .informar select {
font: inherit; font-size: 15px; width: 100%; box-sizing: border-box;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--radio); padding: 9px 11px;
}
.portal .informar input[type="file"] { font: inherit; font-size: 14px; }
.portal .informar .dos { display: flex; gap: 16px; flex-wrap: wrap; }
.portal .informar .dos > div { flex: 1 1 200px; }
.portal .informar .nota { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.portal .informar button.accion { margin-top: 18px; }
/* ===================================================================
EL RECIBO
...
Es la única pantalla del sistema pensada para SALIR de la pantalla:
se imprime o se guarda en PDF desde el navegador. Por eso tiene
medidas de papel —un ancho fijo en milímetros— y un bloque @media
print que le saca al documento todo lo que es de la aplicación.
Y por eso NO usa los colores del tema oscuro para el papel: un
recibo impreso desde el modo oscuro saldría con fondo negro o, peor,
con texto claro sobre papel blanco. La hoja es siempre blanca con
tinta oscura, en los dos temas.
=================================================================== */
.hoja {
--papel: #FFFFFF; --tinta: #16191A; --tinta-suave: #5C6560; --linea: #D7DCD8;
background: var(--surface); color: var(--ink);
width: 190mm; max-width: calc(100% - 32px); margin: 24px auto 60px;
border: 1px solid var(--rule); border-radius: var(--radio);
padding: 22mm 20mm; font-size: 14px;
}
.hoja .emisor { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hoja .emisor .quien { max-width: 60%; }
/* EL MEMBRETE. 190 px de ancho —el mínimo del manual para la versión
horizontal son 180— y 16 px de aire abajo, que es el área de
resguardo a este tamaño. `print-color-adjust` para que el navegador
no lo aclare al imprimir: es negro plano, no un fondo decorativo. */
.hoja .membrete {
display: block; width: 190px; height: auto; margin: 0 0 16px;
print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.hoja .emisor h2 { font-size: 17px; margin: 0 0 2px; color: var(--tinta); }
.hoja .emisor .dato { font-size: 12.5px; color: var(--tinta-suave); line-height: 1.45; }
/* EL NÚMERO Y LA FECHA, arriba a la derecha, que es donde los busca
cualquiera que tenga el papel en la mano. */
.hoja .talon { text-align: right; }
.hoja .talon .tipo {
font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--tinta-suave);
}
.hoja .talon .numero {
font-family: var(--f-mono); font-size: 21px; font-weight: 600; letter-spacing: .02em;
}
.hoja .talon .fecha { font-size: 12.5px; color: var(--tinta-suave); }
.hoja hr { border: 0; border-top: 1px solid var(--linea); margin: 18px 0; }
.hoja .campo { margin: 0 0 12px; }
.hoja .campo .k {
font-family: var(--f-body); font-weight: 600; font-size: 10.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--tinta-suave); display: block;
}
.hoja .campo .v { font-size: 15px; }
/* EL IMPORTE, en números y en letras. Las dos veces, porque es lo que
hace que un dígito cambiado después se note. */
.hoja .importe {
border: 1px solid var(--linea); border-radius: var(--radio);
padding: 12px 14px; margin: 18px 0; background: #FAFBFA;
}
.hoja .importe .cifra {
font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.hoja .importe .letras {
font-size: 13.5px; color: var(--tinta-suave); text-transform: uppercase;
letter-spacing: .01em; margin-top: 2px;
}
.hoja .importe .equivalente {
font-size: 12px; color: var(--tinta-suave); font-family: var(--f-mono); margin-top: 6px;
}
.hoja .pie {
margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--linea);
font-size: 11.5px; color: var(--tinta-suave);
}
/* ANULADO. Una banda, no una marca de agua en diagonal: tiene que
leerse igual en una fotocopia mala y no puede tapar el número. */
.hoja.anulada { border-color: var(--danger); }
.hoja .banda-anulado {
border: 2px solid var(--danger); color: var(--danger); border-radius: var(--radio);
padding: 8px 12px; margin: 0 0 18px; font-size: 13.5px;
}
.hoja .banda-anulado strong {
font-family: var(--f-body); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.barra-recibo {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
max-width: 190mm; margin: 18px auto -8px; padding: 0 16px;
}
/* EL ANTICIPO DE UNA PREVENTA (v48). Lo cobrado, lo que falta, y el
formulario para cargar lo que entró. Va encima de las compuertas
porque en el tiempo va antes: el anticipo se cobra y la compuerta
pasa sola. */
section.anticipo {
border-top: 1px solid var(--rule); margin-top: 18px; padding-top: 16px;
}
section.anticipo .tarjeta.ok .v { color: var(--accent-ink); }
section.anticipo .tarjeta.aviso .v { color: var(--warn); }
section.anticipo form.rejilla { margin-top: 14px; }
/* LOS BOLETOS EMITIDOS DE UNA PREVENTA (v47).
Un renglón por boleto: el número, en qué anda, y qué se le puede
hacer. Era una fila de píldoras sueltas y dejó de alcanzar cuando
cada boleto pasó a tener dos acciones propias. */
ul.lista-boletos { list-style: none; margin: 14px 0 0; padding: 0; }
ul.lista-boletos li {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 9px 0; border-top: 1px solid var(--rule);
}
ul.lista-boletos .numero-boleto {
font-family: var(--f-mono); font-size: 13.5px; font-weight: 500;
}
ul.lista-boletos .det { color: var(--muted); font-size: 12.5px; }
ul.lista-boletos .enlace-firmado { font-size: 13px; }
/* UNA PÍLDORA QUE ADEMÁS ES UN ENLACE tiene que verse como un enlace
(v50). El número del recibo era una etiqueta gris y no llevaba a
ninguna parte; ahora abre la hoja, y si se sigue viendo igual que
antes nadie la va a apretar. */
/* La regla valía para cualquier píldora que sea un enlace, no solo
para las de esta lista: desde la v102 las negativas que mandan a la
Cola de Pagos usan la misma pieza. Estaba escrita acá adentro y por
eso la primera que salió de la lista se vio como una etiqueta gris
—exactamente lo que la v50 había arreglado—. Subida a su lugar. */
a.pildora { text-decoration: underline; text-underline-offset: 2px; }
a.pildora:hover { border-color: var(--accent); color: var(--accent-ink); }
/* SUBIR ES UNA ETIQUETA, no un input a la vista: un se dibuja distinto en cada navegador y no se puede
estilar. La etiqueta se ve como los demás controles del sistema y
el input va escondido adentro. */
/* ---------- elegir un archivo, en castellano ----------
Un `` suelto lo dibuja el navegador con SUS
palabras y en SU idioma: «Choose File / No file chosen». No hay CSS
que lo cambie. Se esconde y se pone este control encima, que es
nuestro y está en castellano. Ver pantallas/comun/Archivo.jsx. */
.archivo-campo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
label.archivo {
cursor: pointer; font-family: var(--f-body); font-size: 13px;
border: 1px solid var(--rule-strong); border-radius: var(--radio);
padding: 7px 14px; color: var(--ink); background: var(--surface);
white-space: nowrap; min-height: 36px; display: inline-flex; align-items: center;
}
label.archivo:hover { border-color: var(--accent); background: var(--surface-2); }
label.archivo.apagada { opacity: .5; cursor: not-allowed; border-style: dashed; }
.archivo-nombre {
font-size: 13px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch;
}
label.subir-firmado {
margin-left: auto; cursor: pointer;
font-family: var(--f-body); font-size: 13px;
border: 1px solid var(--rule-strong); border-radius: var(--radio);
padding: 5px 12px; color: var(--ink); background: none;
}
label.subir-firmado:hover { border-color: var(--accent); background: var(--surface-2); }
/* APAGADA mientras falta la fecha de la firma (v51). Es una etiqueta y
no un botón, así que `disabled` no la alcanza: se apaga a mano y se
le saca el cursor de mano, para que no prometa que hace algo. */
label.subir-firmado.apagada {
opacity: .5; cursor: not-allowed; border-style: dashed;
}
label.subir-firmado.apagada:hover { border-color: var(--rule); background: none; }
/* ===================================================================
EL BOLETO DE COMPRAVENTA (v46)
-------------------------------------------------------------------
Usa la misma `.hoja` que el recibo —es el mismo papel del mismo
sistema— y agrega solo lo que un contrato tiene y un comprobante
no: cláusulas numeradas y un pie de firmas.
=================================================================== */
/* EL TÍTULO DEL CONTRATO, centrado y subrayado, como en cualquier
boleto. No es decoración: es lo que hace que una pila de papeles se
pueda ordenar mirando la primera línea de cada uno. */
.hoja .titulo-contrato {
text-align: center; font-family: var(--f-body); font-weight: 600;
font-size: 17px; letter-spacing: .06em; text-transform: uppercase;
border-bottom: 1px solid var(--tinta); display: table; margin: 0 auto 22px;
padding-bottom: 3px; color: var(--tinta);
}
/* LA MARCA DE BORRADOR (v66). Una banda, no una marca de agua: una
marca de agua clara se pierde en una fotocopia y una oscura tapa el
texto, y lo que esto tiene que hacer es que nadie firme la copia
equivocada. Va con el color de aviso del sistema, centrada y con el
ancho de la hoja, y sobrevive al blanco y negro porque además está
escrita con todas las letras. */
.hoja .marca-borrador {
text-align: center;
font-family: var(--f-body);
font-weight: 700;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--warn, #96601A);
border: 2px solid var(--warn, #96601A);
border-radius: 3px;
padding: 7px 10px;
margin: 0 0 20px;
/* Se imprime: es justamente en el papel donde hace falta. */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* LAS CLÁUSULAS. Justificadas y con el nombre en versalitas al
principio del párrafo, que es como se leen los contratos en
Argentina: la palabra PRIMERA arranca el renglón, no un título
aparte. Un contrato con cada cláusula en su propio bloque con
encabezado se lee como un manual, y no es lo que la escribanía
espera recibir. */
.hoja .clausula { text-align: justify; margin: 0 0 12px; line-height: 1.55; }
.hoja .clausula .orden {
font-family: var(--f-body); font-weight: 600; letter-spacing: .06em;
}
.hoja .clausula .hueco {
background: var(--warn-soft); color: var(--warn);
border-bottom: 1px dashed currentColor; padding: 0 3px;
font-family: var(--f-mono); font-size: .9em;
}
/* LAS FIRMAS. Dos columnas que no se parten entre páginas: una firma
sola al pie de una hoja huérfana es un problema real en una
escribanía. */
.hoja .firmas {
display: flex; gap: 40px; margin-top: 46px; break-inside: avoid;
}
.hoja .firmas > div { flex: 1; border-top: 1px solid var(--tinta); padding-top: 6px; }
.hoja .firmas .rol {
font-family: var(--f-body); font-weight: 600; font-size: 10.5px;
letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave);
}
.hoja .firmas .nombre { font-size: 13px; }
/* Bajarse lo que se está mirando (v68). Un renglón discreto: es una
salida, no una acción principal, y el único botón ocre de la
pantalla ya está en otro lado. */
p.bajar {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
margin: 10px 0 18px; font-size: 13px;
}
p.bajar .k {
font-family: var(--f-body); font-weight: 600; font-size: 10.5px;
letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
p.bajar .enlace { padding-left: 0; padding-right: 0; }
p.bajar .enlace[disabled] { color: var(--rule-strong); cursor: default; text-decoration: none; }
/* ===================================================================
EL ESTADO DE CUENTA IMPRESO (v68)
Es la única hoja ANCHA del sistema: el cuadro de cuotas tiene ocho
columnas y el de movimientos siete, y en vertical no entran sin
achicar la letra hasta donde no se lee. Se imprime apaisada.
=================================================================== */
.hoja-cuenta { width: 272mm; padding: 16mm 14mm; }
.hoja-cuenta .cual { text-align: right; }
.hoja-cuenta .cual h1 {
font-size: 21px; margin: 0; color: var(--tinta); letter-spacing: -.01em;
}
.hoja-cuenta .al-dia {
margin: 2px 0 0; font-family: var(--f-mono); font-size: 13px; color: var(--tinta-suave);
}
.hoja-cuenta .a-nombre {
display: flex; gap: 40px; margin: 18px 0 14px;
padding: 12px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.hoja-cuenta .rotulo {
display: block; font-family: var(--f-body); font-weight: 600; font-size: 10px;
letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave);
margin-bottom: 3px;
}
.hoja-cuenta .totales { display: flex; gap: 28px; margin: 0 0 18px; flex-wrap: wrap; }
.hoja-cuenta .totales > div { min-width: 120px; }
.hoja-cuenta .totales strong {
display: block; font-family: var(--f-mono); font-size: 15px; font-variant-numeric: tabular-nums;
}
.hoja-cuenta table.cuadro {
width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 11.5px;
}
.hoja-cuenta table.cuadro caption {
text-align: left; font-family: var(--f-body); font-weight: 600; font-size: 12px;
color: var(--tinta); padding-bottom: 5px;
}
.hoja-cuenta table.cuadro th {
text-align: left; font-family: var(--f-body); font-weight: 600; font-size: 9.5px;
letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave);
border-bottom: 1px solid var(--tinta); padding: 4px 6px; white-space: nowrap;
}
.hoja-cuenta table.cuadro td {
padding: 3.5px 6px; border-bottom: 1px solid var(--linea); vertical-align: top;
}
.hoja-cuenta table.cuadro td.der, .hoja-cuenta table.cuadro th.der {
text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Una cuota pagada se lee más clara: lo que se busca en este papel es
lo que falta, no lo que ya está. */
.hoja-cuenta table.cuadro tr.pagada td { color: var(--tinta-suave); }
.hoja-cuenta table.cuadro td .dato { font-size: 10px; color: var(--tinta-suave); }
.hoja-cuenta .aviso {
border-left: 2px solid var(--warn); padding: 8px 12px; font-size: 12px;
color: var(--tinta-suave); margin: 0 0 14px;
}
.hoja-cuenta .pie-hoja {
margin: 18px 0 0; padding-top: 10px; border-top: 1px solid var(--linea);
font-size: 11px; color: var(--tinta-suave);
}
@media print {
/* Lo que es de la aplicación no va al papel. */
header, .titulo, .barra-recibo, .pestanas { display: none !important; }
body { background: #fff; }
.hoja {
width: auto; max-width: none; margin: 0; border: 0; border-radius: 0;
padding: 0; font-size: 12pt;
}
.hoja .importe { background: none; }
/* El estado de cuenta va apaisado: ocho columnas no entran de otra
forma. El PDF del servidor lo pide igual, para que el papel de
los dos caminos salga idéntico. */
.hoja-cuenta { font-size: 9pt; }
.hoja-cuenta table.cuadro { font-size: 8.5pt; }
.hoja-cuenta table.cuadro tr { break-inside: avoid; }
.hoja-cuenta table.cuadro thead { display: table-header-group; }
.hoja .clausula .hueco { background: none; border-bottom: 1px dashed currentColor; }
@page { margin: 18mm; }
@page hoja-apaisada { size: A4 landscape; }
}
/* ---------- cargar un pago que el cliente no informó ---------- */
/* Arriba de la cola, separado de ella por una línea: es una ACCIÓN,
no uno de los pagos de la lista. Sin el borde se lee como el primer
renglón de la cola, que es justo lo que no es. */
.cols > nav button.cargar-directo {
border-bottom: 1px solid var(--rule);
border-left-color: transparent;
padding-top: 12px; padding-bottom: 12px;
}
.cols > nav button.cargar-directo .lote { color: var(--accent-ink); }
.cols > nav button.cargar-directo[aria-current="true"] {
background: var(--accent-soft); border-left-color: var(--accent);
}
/* El formulario de carga usa las mismas piezas que el de informar un
pago del portal, para que no haya dos formularios de lo mismo con
dos aspectos distintos. */
form.carga label { display: block; margin: 14px 0 4px; font-size: 13px; color: var(--muted); }
form.carga label em { font-style: normal; color: var(--rule-strong); }
form.carga input:not([type="checkbox"], [type="radio"], [type="file"]),
form.carga select {
font: inherit; font-size: 15px; width: 100%; box-sizing: border-box;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--radio); padding: 9px 11px;
}
form.carga input[type="file"] { font: inherit; font-size: 14px; }
form.carga .dos { display: flex; gap: 16px; flex-wrap: wrap; }
form.carga .dos > div { flex: 1 1 220px; }
form.carga .nota { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
/* ---------- INICIO ----------
El tablero de la mañana. Casi todo lo dibuja con piezas que ya
existen —las tarjetas, las cajas de aviso, la tabla, las secciones
de la ficha—. Lo propio es poco: la lista de cosas por hacer y la
barra de antigüedad de lo vencido.
La barra de tramos es el único gráfico del sistema, y es una barra
apilada de cuatro pedazos a propósito: no necesita eje, no necesita
escala, y la pregunta que contesta —¿esto es un atraso de un mes o
una cartera arrastrada?— se lee sin decodificar nada. */
.pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* LOS BORDES VAN EN LONGHAND, Y NO ES UNA PREFERENCIA DE ESTILO.
Estaba escrito `border: 1px solid var(--rule)` y abajo
`border-left: 3px solid var(--rule-strong)`. Dos abreviadas seguidas,
las dos con var() adentro, y Chromium deja el borde en 0: la
sustitución de la segunda invalida lo que había puesto la primera.
El color sí llegaba —se veía en el estilo calculado— pero con ancho
cero, así que no se veía nada y no había error en ningún lado. */
.pendientes li {
display: flex; align-items: center; gap: 14px;
background: var(--surface);
border-style: solid;
border-width: 1px 1px 1px 3px;
border-color: var(--rule) var(--rule) var(--rule) var(--rule-strong);
border-radius: 0 var(--radio) var(--radio) 0; padding: 11px 15px;
}
/* El color vive en el borde izquierdo y no en el fondo: cuatro
renglones con cuatro fondos distintos se leen como cuatro cosas
inconexas, y son una lista. */
.pendientes li.bien { border-left-color: var(--accent); }
.pendientes li.aviso { border-left-color: var(--warn); }
.pendientes li.mal { border-left-color: var(--danger); }
.pendientes li .que { flex: 1; min-width: 0; }
.pendientes li strong { display: block; font-size: 14.5px; font-weight: 600; }
.pendientes li .sub { display: block; margin: 1px 0 0; font-size: 12.5px; }
.pendientes li a { white-space: nowrap; font-size: 13px; }
/* LA RAMPA DE ANTIGÜEDAD.
Cuatro pasos de claro a oscuro, con el tono virando de ámbar a rojo:
no son cuatro categorías, es el mismo problema poniéndose peor, y el
degradé lo dice sin necesidad de leyenda.
ESTÁN ELEGIDOS CON EL VALIDADOR Y NO A OJO. La primera versión los
mezclaba con color-mix() sobre --warn y --danger, y dejaba los dos
tramos rojos a ΔE 3,2: indistinguibles incluso con visión normal, y
bastante peor con daltonismo. Estos cuatro están a 18,3 en el peor
par adyacente, y a 17,1 en simulación de deuteranopía.
Van como valores fijos y no derivados de los tokens del sistema a
propósito: un color validado que se recalcula solo deja de estar
validado. */
.tramo-1, .punto.hasta30, .arco.hasta30 { background: #EFD08A; --tinta: #EFD08A; }
.tramo-2, .punto.hasta60, .arco.hasta60 { background: #C98C2B; --tinta: #C98C2B; }
.tramo-3, .punto.hasta90, .arco.hasta90 { background: #A34A2A; --tinta: #A34A2A; }
.tramo-4, .punto.mas90, .arco.mas90 { background: #5F1F1D; --tinta: #5F1F1D; }
/* LOS DOS GAJOS DE GESTIÓN DE VENTAS. No hacen falta cuatro colores
validados entre sí: son dos, y están separados por LUMINOSIDAD y no
por tono. Un verde oscuro contra un gris claro se distingue con
cualquier visión del color —y también en una impresión en blanco y
negro, que es como alguien va a llevar esta lista al terreno. */
.punto.a-la-venta, .arco.a-la-venta { background: #23392D; --tinta: #23392D; }
.punto.retenido, .arco.retenido { background: #A9A08C; --tinta: #A9A08C; }
/* UN LOTE SIN CONFIGURAR NO ES UN LOTE MÁS: ES UN AGUJERO.
Quien mira un plano de papel pregunta «de la 99, ¿cuáles me
faltan?», y esa fila tiene que saltar sin leerla. */
tr.sin-configurar td { color: var(--muted); }
tr.sin-configurar td:first-child { box-shadow: inset 3px 0 0 #C98C2B; }
.marca-falta {
font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; color: #A34A2A;
}
/* UN GUION NO ES UN DATO. En una lista de ciento ochenta lotes recién
cargados, las celdas vacías son la mayoría de la tinta de la
pantalla: si se dibujan con el mismo color que los números, lo que
se ve es el vacío y no lo que hay. Van en gris claro, para que el
ojo caiga en lo que está escrito. */
.nada { color: var(--rule); }
/* Y el lote al que no se le cargó NADA ocupa una celda que lo dice,
en lugar de siete que no dicen nada. Esa celda va en gris y no en
el color de lo que falta: cuando faltan los ciento ochenta y tres,
ciento ochenta y tres alarmas no son una alarma, son el fondo. Lo
que marca la fila es la barra ámbar de la izquierda, y lo que
cuenta cuántas son es el número de la manzana. */
td.en-blanco .marca-falta { color: var(--muted); }
/* La leyenda de la dona de ventas: dos filas, ancho del contenido.
Sin esto la tabla se estira al ancho de la página y deja los dos
números a cuarenta centímetros de lo que nombran. */
.leyenda-ventas td:first-child { padding-right: 20px; white-space: nowrap; }
.leyenda-ventas .punto {
display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px;
}
.leyenda-ventas td.num { font-weight: 600; font-variant-numeric: tabular-nums; }
/* La cabecera de cada manzana, para que la lista se recorra como el
plano: por manzana y después por lote. Queda pegada arriba al
desplazar, abajo del encabezado de columnas: una manzana que se
salió de la pantalla es una lista de códigos sin manzana. */
tr.manzana td {
background: var(--surface-2);
font-family: var(--f-body); font-weight: 600; font-size: 11.5px; letter-spacing: .12em;
text-transform: uppercase; padding: 10px 11px;
border-top: 1px solid var(--rule);
position: sticky; top: 30px; z-index: 1;
}
tr.manzana .det { color: var(--muted); margin-left: 10px; }
tr.manzana .marca-falta { margin-left: 10px; }
/* EL CUADRO SE DESPLAZA ADENTRO SUYO, Y POR ESO LO PEGADO PEGA.
`position: sticky` se pega al borde del contenedor que desplaza, y
`.envoltura` desplaza —tiene `overflow-x: auto` para las tablas
anchas—, así que sin una altura máxima el contenedor es tan alto
como la tabla entera y nada se pega nunca: la regla quedaría
escrita y muerta. Con el tope, el encabezado y la manzana quedan a
la vista mientras se recorren las ciento ochenta filas, y la tabla
sigue pudiendo correrse a lo ancho en una pantalla angosta. */
.lista-lotes { max-height: 72vh; overflow: auto; }
.lista-lotes thead th { position: sticky; top: 0; z-index: 2; }
/* La fila elegida se marca. Sin esto, con el formulario abierto
arriba, no hay forma de saber sobre cuáles se está por escribir. */
#lista-lotes tbody tr.elegida td { background: var(--accent-soft); }
#lista-lotes .celda-lote { font-family: var(--f-mono); }
#lista-lotes .celda-lote label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
#lista-lotes tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
#lista-lotes tbody tr.elegida:hover td { background: var(--accent-soft); }
/* ---------- LA BARRA DE FILTROS ---------- */
.filtros {
display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--radio-tarjeta); padding: 12px 16px; margin: 0 0 14px;
}
.filtros .campo { min-width: 150px; }
.filtros .cuenta-lista {
margin-left: auto; font-size: 12.5px; color: var(--muted);
}
/* ---------- UN TILDE CON SU EXPLICACIÓN ----------
Una casilla suelta con una frase al lado y otra abajo no se lee como
una decisión. Acá la casilla, el título y el porqué son un bloque:
se puede apretar entero y se entiende sin buscar a qué pertenece el
párrafo de abajo. */
label.tilde {
display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--radio); padding: 12px 14px; max-width: 720px;
}
label.tilde input { margin-top: 3px; flex: 0 0 auto; }
label.tilde em { display: block; color: var(--muted); font-style: normal; font-size: 12.5px; }
label.tilde:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
label.tilde.apretada { border: 0; background: none; padding: 0 0 7px; }
/* Los radios de la comisión, como opciones y no como una lista. */
.opciones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.opciones label {
border: 1px solid var(--rule-strong); border-radius: var(--radio); padding: 9px 13px;
background: var(--surface); cursor: pointer; font-size: 13.5px;
}
.opciones label:has(input:checked) {
border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink);
}
/* El rótulo que parte el formulario en tres decisiones: el piso, en
qué se vende, y cuánto cobra el vendedor. */
h4.rotulo {
font-family: var(--f-body); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ocre-ink); font-weight: 600;
margin: 22px 0 9px; padding-bottom: 5px; border-bottom: 1px solid var(--rule);
}
/* El botón que no es EL botón: mismo tamaño y misma forma que
`.accion`, sin el relleno. Guardar sin habilitar y retirar de la
venta son actos legítimos, pero no son el que la pantalla propone. */
button.accion.neutra {
background: var(--surface); color: var(--ink); border-color: var(--ink);
}
button.accion.neutra:hover { background: var(--surface-2); border-color: var(--accent); }
/* ---------- EL FORMULARIO DE CONDICIONES ----------
Va en una tarjeta y no suelto sobre el fondo: lo que se escribe acá
se aplica a los lotes elegidos, y tiene que verse como un bloque
aparte de la lista y no como la continuación de la página. */
.condiciones {
background: var(--surface); border: 1px solid var(--rule);
border-left: 3px solid var(--accent);
border-radius: var(--radio-tarjeta); padding: 16px 18px 18px; margin: 0 0 18px;
border-top: 1px solid var(--rule);
}
.condiciones > header { margin-bottom: 4px; }
/* La bajada de esta sección es un párrafo que se lee, no un rótulo:
va en la tipografía del texto. `.sub` es de ancho fijo porque
normalmente lleva cifras y códigos; cinco renglones de prosa en
ancho fijo se leen como una pantalla de terminal. */
.condiciones > header .sub {
max-width: 82ch; margin: 2px 0 0;
font-family: var(--f-body); font-size: 13.5px;
}
/* QUÉ LOTES, y no solo cuántos.
Códigos y nada más, así que van en la tipografía de ancho fijo y de
a muchos por renglón: veinte códigos en una lista vertical serían
veinte renglones para leer una manzana. La caja tiene tope de alto y
hace scroll: con una manzana entera elegida no puede empujar el
formulario fuera de la pantalla, que es justo lo que esta sección
vino a arreglar. El que está ocupado se marca, porque a ése los
números se le guardan pero no vuelve a la venta. */
ul.codigos-elegidos {
list-style: none; margin: 8px 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 5px;
max-height: 5.6em; overflow-y: auto;
}
ul.codigos-elegidos li {
font-family: var(--f-mono); font-size: 12px; line-height: 1;
background: var(--surface-2); border: 1px solid var(--rule);
border-radius: 3px; padding: 4px 7px; color: var(--ink);
}
ul.codigos-elegidos li.ocupado {
border-color: var(--warn); color: var(--warn);
}
/* BORRAR LAS CONDICIONES NO ES UNA VARIANTE DE GUARDAR.
Va abajo de todo, separado por una línea y arrancando como enlace y
no como botón: el que viene a guardar no se lo cruza en el camino. */
.condiciones .borrar-condiciones {
margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.condiciones .borrar-condiciones .caja.aviso { margin: 0; }
.condiciones .borrar-condiciones .acciones { margin-top: 10px; }
.condiciones .rejilla { max-width: 860px; }
.condiciones textarea {
font: inherit; font-size: 14.5px; padding: 10px 11px; resize: vertical;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule-strong); border-radius: var(--radio);
}
/* La unidad de un campo —«en pesos», «% anual»— no es parte del
nombre: va abajo del rótulo en minúscula, sin el espaciado de
mayúsculas que haría leer «P R E C I O E N P E S O S». */
.campo label em {
font-style: normal; text-transform: none; letter-spacing: 0;
color: var(--muted); font-size: 10px;
}
/* ---------- LA BARRA DE LO ELEGIDO ----------
Fija abajo, y solo cuando hay algo elegido. La lista tiene ciento
ochenta filas: sin esto, tildar un lote del final abre un
formulario a mil píxeles de distancia, arriba, y nada avisa. */
.barra-eleccion {
position: sticky; bottom: 0; z-index: 3;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
background: var(--barra); color: var(--barra-texto);
border-radius: var(--radio-tarjeta); padding: 12px 16px; margin-top: 14px;
border: 1px solid var(--accent-ink);
}
.barra-eleccion .accion { padding: 7px 14px; font-size: 13.5px; }
.barra-eleccion button.enlace { color: var(--barra-apagado); }
.barra-eleccion button.enlace:hover { color: var(--barra-texto); }
/* Lo que falta cargar no está mal: falta. Va en el ámbar de «esto es
trabajo pendiente» y no en el rojo de «esto está roto». */
.tarjeta.falta .v { color: var(--warn); }
/* Los dos números de la deuda y su desglose, en una fila. */
.deuda-fila {
display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap;
margin-bottom: 18px;
}
.deuda-fila .tarjetas { margin-bottom: 0; }
/* Alineada arriba, no centrada: la leyenda es más alta que las dos
tarjetas de al lado, y centrarla dejaba el anillo flotando por
debajo de la línea de los números que explica. */
.dona { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.dona .anillo { width: 132px; height: 132px; flex: 0 0 auto; margin-top: -4px; }
.dona .arco {
stroke: var(--tinta);
/* El anillo se dibuja con `stroke`, no con `background`: la regla de
arriba sirve para los dos porque cada tramo deja su color en
--tinta. Un solo lugar donde cambiarlo. */
transition: stroke-width .12s ease;
}
.dona .arco:hover { stroke-width: 22; }
.dona .cifra {
text-anchor: middle; font-family: var(--f-display); font-weight: 600;
font-size: 21px; fill: var(--ink);
}
.dona .pie {
text-anchor: middle; font-family: var(--f-body); font-weight: 600; font-size: 8px;
letter-spacing: .1em; text-transform: uppercase; fill: var(--muted);
}
/* LA LEYENDA: UNA LÍNEA POR TRAMO.
Es una y no una lista, porque lo que la hace legible son las
columnas: los cuatro importes alineados a la derecha se comparan de
un vistazo, que es la precisión que la dona no puede dar.
El ancho se lo da el contenido —`width: auto` contra el `width: 100%`
de las tablas de datos del sistema, y sin el `min-width` de 620px que
esas llevan para no romperse en el celular—: acá la tabla convive
con un gráfico al lado y estirarla dejaría la dona sola en un
extremo. */
table.leyenda-tramos {
width: auto; min-width: 0; border-collapse: collapse; font-size: 13px;
}
.leyenda-tramos td { border: 0; padding: 3px 0; vertical-align: baseline; }
.leyenda-tramos td.sw { width: 18px; }
.leyenda-tramos .punto { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.leyenda-tramos td.t {
font-family: var(--f-body); font-weight: 600; font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted);
padding-right: 16px; white-space: nowrap;
}
.leyenda-tramos td.imp {
text-align: right; padding-right: 14px; white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.leyenda-tramos td.imp strong { font-weight: 600; }
.leyenda-tramos td.det { color: var(--muted); font-size: 12px; white-space: nowrap; }
/* La lista de titulares elegidos del cambio de titularidad, y la de
resultados de la búsqueda: la misma pieza, porque son la misma cosa
—gente con un botón al lado— y dos estilos distintos para eso serían
dos formas de leer lo mismo. */
ul.elegidos { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 4px; }
ul.elegidos li {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
background: var(--surface);
border-style: solid; border-width: 1px; border-color: var(--rule);
border-radius: var(--radio); padding: 8px 12px; font-size: 14px;
}
ul.elegidos li .sub { font-size: 12px; margin: 0; }
ul.elegidos li button { font-size: 12.5px; white-space: nowrap; }
ul.elegidos li button[disabled] { color: var(--rule-strong); cursor: default; }
/* ---------- LAS OPERACIONES SOBRE EL LOTE ----------
Estaban como tres al pie, en gris y en mono, y se leían
como letra chica. El lugar estaba bien —primero se miran los
números, después se actúa—; lo que faltaba era que algo dijera que
eso es una sección. La regla de arriba la separa del cuadro, el
título la nombra, y los botones dejan de parecer notas al pie. */
.operaciones { margin-top: 28px; border-top: 1px solid var(--rule-strong); padding-top: 16px; }
.operaciones > h3 { margin: 0 0 2px; font-size: 1.02rem; }
.operaciones > .sub { margin: 0 0 12px; }
.operaciones .fila { display: flex; gap: 8px; flex-wrap: wrap; }
.operaciones .fila button {
font: inherit; font-size: 13.5px; cursor: pointer;
background: var(--surface); color: var(--ink);
border-style: solid; border-width: 1px; border-color: var(--ink);
border-radius: var(--radio); padding: 10px 15px; min-height: 40px;
}
.operaciones .fila button:hover { border-color: var(--accent); color: var(--accent-ink); }
/* El que está abierto se marca, para que en una pantalla larga se
pueda saber a qué corresponde el formulario que se está mirando. */
.operaciones .fila button[aria-pressed="true"] {
background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink);
}
.cuerpo-operacion { margin-top: 16px; }
/* ---------- LA REJILLA DE CAMPOS ----------
Estaba dentro de alta.html, porque el único formulario con varios
campos era el del alta. Desde que el mismo formulario de cliente
nuevo se abre también desde el cambio de titularidad y desde la
pantalla de clientes, vive acá: tres copias del mismo formulario
serían tres formas de cargar la misma persona. */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
/* EL MANUAL DIBUJA LAS ETIQUETAS DE CAMPO EN CAJA NORMAL, no en
versales: «Nombre y apellido *», oscura y arriba del campo. Estaban
en versales monoespaciadas de diez píxeles, que es el rótulo de una
tabla y no el nombre de algo que alguien va a completar. */
.campo label {
font-family: var(--f-body); font-weight: 600; font-size: 13px; color: var(--ink);
}
/* Los campos van sobre BLANCO, no sobre el fondo de la página: el
manual hace el relieve cambiando el fondo —marfil → arena → pino—
y con líneas lino, sin una sola sombra. */
.campo input, .campo select {
font: inherit; font-size: 14.5px; padding: 10px 11px;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule-strong); border-radius: var(--radio);
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.campo.ancho { grid-column: 1 / -1; }
/* LA AYUDA DE UN CAMPO, EN CUALQUIER FORMULARIO.
Estaba definida SOLO adentro de `.campo`, y las tres que viven en el
cuerpo de una operación —la del importe a devolver, «Atajos» y la
del motivo de la rescisión— no están adentro de un `.campo`. Sin la
regla, un `` es inline: el texto salía del tamaño del cuerpo,
arrancando al costado del campo y doblando abajo. Javi, mirando
Rescindir: «el formato está medio flojo». No era el formato de esa
pantalla — era una regla que pedía un contexto que no siempre está.
Ahora `.ayuda` se dibuja igual esté donde esté, que es lo que su
nombre promete. */
.ayuda {
display: block; font-size: 12px; color: var(--muted);
margin-top: 4px; line-height: 1.45;
}
/* ---------- EL DOMICILIO (v55) ----------
Los siete campos van juntos y en el mismo orden en todas las
pantallas: calle y número en el primer renglón con piso y dpto.,
localidad, provincia y código postal en el segundo. Los cortos son
cortos: un número de piso no necesita el ancho de una calle. */
.domicilio { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 14px; margin-top: 12px; }
.domicilio .campo { min-width: 0; }
.domicilio .campo input { width: 100%; box-sizing: border-box; }
.domicilio .d-calle { grid-column: span 6; }
.domicilio .d-corto { grid-column: span 2; }
.domicilio .d-medio { grid-column: span 4; }
.domicilio .d-medio + .d-medio + .d-corto { grid-column: span 4; }
@media (max-width: 640px) {
.domicilio { grid-template-columns: repeat(6, 1fr); }
.domicilio .d-calle, .domicilio .d-medio { grid-column: span 6; }
.domicilio .d-corto { grid-column: span 2; }
.domicilio .d-medio + .d-medio, .domicilio .d-medio + .d-medio + .d-corto { grid-column: span 3; }
}
.cols > nav .cliente-nuevo .domicilio { grid-template-columns: repeat(6, 1fr); }
.cols > nav .cliente-nuevo .domicilio .d-calle,
.cols > nav .cliente-nuevo .domicilio .d-medio { grid-column: span 6; }
.cols > nav .cliente-nuevo .domicilio .d-corto { grid-column: span 2; }
.cols > nav .cliente-nuevo .domicilio .d-medio + .d-medio,
.cols > nav .cliente-nuevo .domicilio .d-medio + .d-medio + .d-corto { grid-column: span 3; }
.subtitulo-form + .domicilio { margin-top: 0; }
h4.subtitulo-form { margin: 16px 0 6px; font-size: 14px; }
/* El formulario de corrección de datos, dentro de la ficha. */
.editar-datos {
background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--radio-tarjeta); padding: 14px 16px; margin: 0 0 14px;
}
/* La rejilla de campos en la columna angosta del buscador: una sola
columna, porque ahí no entran dos. */
.cols > nav .cliente-nuevo .rejilla { grid-template-columns: 1fr; }
.cols > nav .cliente-nuevo { padding: 0 12px 12px; }
/* ---------- ESTUDIOS JURÍDICOS ----------
Una tabla de dos o tres filas que se lee de un vistazo. Lo único
que hizo falta agregar es dónde van los botones: `.acciones` trae
un margen de veintidós píxeles que sirve abajo de un formulario y
abre un agujero adentro de una celda. */
#estudios td { vertical-align: top; }
#estudios td .acciones { margin: 0; gap: 2px; justify-content: flex-end; }
#estudios .sub { display: block; margin: 2px 0 0; font-size: 12px; }
/* El desactivado no se esconde: se apaga, igual que un plan cancelado. */
#estudios tr.pagada strong { color: var(--muted); font-weight: 600; }
/* Eliminar es la única acción de esta pantalla que no se deshace. */
button.enlace.peligro { color: var(--danger); }
button.enlace.peligro:hover { color: var(--danger); font-weight: 600; }
/* Un dato que se copia y se pega —un email, un link, un número de
documento— se lee mejor en la tipografía de ancho fijo. Estaba
usado en las pantallas desde hace rato y no estaba definido en
ningún lado: era una clase que no hacía nada. */
.mono { font-family: var(--f-mono); font-size: 13px; }
/* La bajada y el formulario no ocupan el ancho de la pantalla: un
párrafo de mil trescientos píxeles se lee saltando de renglón, y
cuatro campos estirados a lo ancho no se leen como un formulario
sino como una banda. La tabla sí usa todo el ancho, que es donde
hace falta. */
main.estudios > .sub { max-width: 78ch; }
main.estudios details.cliente-nuevo { max-width: 860px; }
main.estudios details.cliente-nuevo > summary {
font-size: 13px; color: var(--muted);
border-top: 1px solid var(--rule); padding-top: 14px;
}
main.estudios details.cliente-nuevo[open] > summary { color: var(--ink); }
/* USUARIOS (v53). Misma forma que Estudios Jurídicos: bajada angosta,
tabla a lo ancho, alta plegada abajo. Lo único propio es la caja del
link, que tiene que poder leerse y copiarse entero aunque sea largo. */
main.usuarios > .sub { max-width: 78ch; }
main.usuarios details.cliente-nuevo { max-width: 860px; }
main.usuarios details.cliente-nuevo > summary {
font-size: 13px; color: var(--muted);
border-top: 1px solid var(--rule); padding-top: 14px;
}
main.usuarios details.cliente-nuevo[open] > summary { color: var(--ink); }
main.usuarios .link-en-claro {
overflow-wrap: anywhere; background: var(--surface); padding: 8px 10px;
border: 1px solid var(--rule-strong); border-radius: var(--radio); margin: 8px 0 10px;
}
main.usuarios .permisos { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; }
main.usuarios .permisos label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
main.usuarios fieldset { border: 0; padding: 0; margin: 0 0 12px; }
main.usuarios fieldset legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
main.usuarios .elegir-rol label { display: inline-flex; align-items: center; gap: 6px; margin-right: 22px; cursor: pointer; }
main.usuarios .permiso-nuevo { display: block; margin: 6px 0; cursor: pointer; }
/* EL CELULAR EN UN RENGLÓN, EN CUALQUIER FORMULARIO.
Estaba atada a `main.usuarios`, que es la pantalla donde nació en la
v53. Cuando el alta de un cliente pasó a usar la misma pieza, la
regla no la alcanzaba: los dos campos salían uno debajo del otro y
el prefijo con el ancho de un nombre. Una regla escrita con el
nombre de una pantalla adentro solo sirve en esa pantalla. */
.celular-en-linea .dos { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; }
.celular-en-linea .dos input { min-width: 0; }
main.usuarios .pildora.rol-vendedor { background: var(--accent-soft); color: var(--accent-ink); }
button.accion.chica { padding: 4px 10px; font-size: 12.5px; }
/* LA PANTALLA DEL VENDEDOR (v53). Usa las tarjetas del portal
(.grupo); lo propio es la cabecera de cada preventa —el lote y su
estado en un renglón— y la fila de datos, que se lee de un vistazo
de izquierda a derecha como el renglón de un talonario. */
main.vendedor h2.tramo { font-size: 17px; margin: 26px 0 10px; }
main.vendedor .cabeza-preventa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
main.vendedor .cabeza-preventa h2 { margin: 0; font-family: var(--f-mono); }
main.vendedor .nueva-venta .cabeza-preventa h2 { font-family: var(--f-display); }
main.vendedor .nueva-venta .cabeza-preventa { margin-bottom: 12px; }
/* `main.vendedor` NO ES EL ROL, es el nombre de este juego de estilos
de tarjeta. Lo usan tres pantallas: la del vendedor, Comisiones y
—desde la v88— Vendedores, y las dos últimas son de administración.
Renombrar el selector costaría tocar las tres por nada; lo que sí
importa es que no haya una segunda copia con otro nombre. */
main.vendedor dl.datos-preventa {
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px 18px; margin: 14px 0; padding: 12px 0;
border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
main.vendedor dl.datos-preventa dt { font-size: 12px; color: var(--muted); }
main.vendedor dl.datos-preventa dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
main.vendedor .avance p { margin: 6px 0; }
main.vendedor .vence { font-size: 13px; color: var(--muted); }
main.vendedor .vence.vencida { color: var(--warn); }
main.vendedor ul.informados { list-style: none; padding: 0; margin: 10px 0; }
main.vendedor ul.informados li { margin: 4px 0; }
main.vendedor .buscar-dni .en-linea { display: flex; gap: 8px; align-items: center; }
main.vendedor .buscar-dni .en-linea input { max-width: 240px; }
/* La tabla de lotes tiene nueve columnas: la pantalla del vendedor
es más ancha que la del portal para que entren sin cortarse. */
main.portal.vendedor { max-width: 1180px; }
/* COMISIONES (v53). El filtro «A Pagar / Pagadas» son dos botones de
un mismo control, no dos acciones: el apretado se marca, y ninguno
compite con el botón ocre del formulario.
SIN EL NOMBRE DE LA PANTALLA ADELANTE (v112), y es la tercera vez
que esta misma historia se repite en esta hoja. La regla nació en la
pantalla de Comisiones de la administración, con `main.comisiones`
adelante. En la v88 el mismo control pasó a usarse en «Mis
Comisiones» del vendedor y en la ficha de Vendedores —el componente
es uno solo, a propósito— y ahí la regla no llegaba: los dos botones
salían con el dibujo de fábrica del navegador, dos cajitas grises al
lado de todo lo demás. Lo encontró Javi mirando la pantalla de su
vendedora.
Una regla escrita con el nombre de una pantalla adentro solo sirve
en esa pantalla; el componente, en cambio, se usa donde haga falta.
Es el mismo arreglo que ya se le hizo a `.celular-en-linea` y a
`.ayuda`, por el mismo motivo. */
.filtro-comisiones { align-items: center; gap: 10px; }
button.filtro {
font: inherit; font-size: 13.5px; padding: 7px 14px; cursor: pointer;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule-strong); border-radius: var(--radio);
}
button.filtro[aria-pressed="true"] {
background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600;
}
ul.pagos-comision { list-style: none; padding: 0; margin: 8px 0 12px; }
ul.pagos-comision li { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.subir-recibo { display: inline-flex; gap: 12px; align-items: center; }
.subir-recibo label.enlace { cursor: pointer; }
main.vendedor #lotes-a-la-venta td.num { white-space: nowrap; }
main.vendedor #vender .buscar-dni { margin-top: 16px; }
main.vendedor #v-condiciones { margin-top: 18px; }
/* Un lote en la justicia, marcado en la lista de la izquierda. Es la
única etiqueta de esa lista que no describe el plan sino que avisa
de algo, así que va con el color de lo que duele. */
.cols > nav .tag.justicia { color: var(--danger); }
/* ===================================================================
LA PUERTA — /sistema/ingreso.html
===================================================================
Dos mitades: una foto del valle con el logo, y el formulario. Sale
de la referencia visual que vino con el paquete del sitio público,
construida con los tokens de esta hoja y no con una copia de
`sitio.css`: dos hojas con los mismos colores son dos lugares donde
cambiar un color.
Estaba en un `