/* =====================================================================
ClimIA — consola de trabajo
---------------------------------------------------------------------
Desde el 23-sep-2026 el software se llama ClimIA y la app entera va en
tema oscuro: navy profundo, cyan como acento, bordes finos. Doctor Frío
es la primera empresa que lo usa, y por eso el documento que recibe el
cliente —`.hoja`, más abajo— conserva su propia paleta clara y su
Calibri: el papel es de la empresa, la herramienta es de ClimIA.
Cómo está armado:
- Los colores de marca van una sola vez, con su nombre (`--climia-*`).
Todo lo demás de la hoja sigue pidiendo colores **por rol**
—`--papel`, `--superficie`, `--tinta`, `--frio`, `--calor`…—, igual
que antes del cambio. Por eso pasar a oscuro fue redefinir los roles
y no reescribir cuatro mil líneas: una regla que pedía «la tinta
principal» sigue pidiéndola, y ahora le llega el celeste claro.
- El documento (`.hoja`) vuelve a definir esos mismos roles con los
valores claros de siempre. Cualquier regla genérica —`th`, `a`, `p`,
`h1`— que caiga adentro de una hoja se pinta clara sin saberlo.
- El resplandor es escaso a propósito: la acción principal, lo activo,
el total, el foco y la IA. Una herramienta que se usa ocho horas no
puede ser un cartel luminoso.
Tipografía: Inter para la interfaz y JetBrains Mono para cifras y
códigos, servidas desde `/fuentes` y no desde Google. La app corre en
la red local; una pantalla que cambia de letra cuando no hay internet
no es una mejora.
===================================================================== */
@font-face {
font-family: "Inter";
src: url("/fuentes/inter-latin-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/fuentes/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
:root {
color-scheme: dark;
/* ---------------------------------------------------------- la marca */
--climia-bg-950: #03111f;
--climia-bg-900: #06192b;
--climia-surface-900: #071d31;
--climia-surface-850: #0a243b;
--climia-surface-800: #0c2b47;
--climia-line-700: #123c5d;
--climia-line-600: #0d5c8c;
--climia-blue-500: #087de8;
--climia-cyan-400: #12c8ff;
--climia-cyan-300: #00e5ff;
--climia-text-primary: #eaf8ff;
--climia-text-secondary: #a8c8dc;
--climia-text-muted: #78a8c7;
--climia-text-disabled: #496d83;
--climia-success: #35e8a0;
--climia-warning: #ffc866;
--climia-danger: #ff6b7a;
--climia-overlay: rgba(1, 12, 24, 0.72);
--climia-gradient-panel: linear-gradient(180deg, rgba(12, 43, 71, 0.92), rgba(7, 29, 49, 0.96));
--climia-gradient-brand: linear-gradient(90deg, #087de8 0%, #12c8ff 55%, #00e5ff 100%);
--climia-gradient-accion: linear-gradient(180deg, #0b88d8, #0763a4);
--climia-glow-soft: 0 0 0 1px rgba(18, 200, 255, 0.18), 0 0 18px rgba(18, 200, 255, 0.08);
--climia-glow-active: 0 0 0 1px rgba(18, 200, 255, 0.45), 0 0 20px rgba(18, 200, 255, 0.18);
--climia-glow-primary: 0 0 24px rgba(18, 200, 255, 0.28);
/* La paleta del documento impreso, con su nombre propio. En la app ya
no pinta nada —lo pinta ClimIA—, pero `.hoja` y un par de acentos
heredados la siguen usando. */
--azul-marino: #0D3B66;
--azul-inst: #1B75BC;
--celeste-fondo: #E2EDF7;
--celeste-suave: #EDF3F9;
--ambar-fondo: #FFF3DC;
--ambar-borde: #E8A33D;
--verde-fondo: #E8F4E9;
--verde-borde: #4C9A51;
--borde-ext: #B9CFE3;
--borde-int: #D2E1EE;
/* ------------------------------------------------------------ roles */
--papel: var(--climia-bg-950);
--superficie: var(--climia-surface-900);
--superficie-2: var(--climia-surface-850);
--superficie-3: var(--climia-surface-800);
/* Tres pesos de texto, igual que antes: lo que hay que leer primero, la
lectura normal y lo accesorio. */
--tinta: var(--climia-text-primary);
--tinta-media: var(--climia-text-secondary);
--tinta-suave: var(--climia-text-muted);
--tinta-apagada: var(--climia-text-disabled);
--linea: var(--climia-line-700);
--linea-fuerte: #174d70;
/* Los acentos. Sobre fondo oscuro los «claros» dejan de ser un fondo
pastel y pasan a ser el mismo color casi transparente: un velo que
tiñe sin encender. El borde es un paso más visible que el velo. */
--frio: var(--climia-cyan-400);
--frio-claro: rgba(18, 200, 255, 0.10);
--frio-borde: rgba(18, 200, 255, 0.35);
--calor: var(--climia-warning);
--calor-claro: rgba(255, 200, 102, 0.10);
--calor-claro-fuerte: rgba(255, 200, 102, 0.18);
--calor-borde: rgba(255, 200, 102, 0.40);
--alerta: var(--climia-danger);
--alerta-claro: rgba(255, 107, 122, 0.10);
--alerta-borde: rgba(255, 107, 122, 0.40);
--ok: var(--climia-success);
--ok-claro: rgba(53, 232, 160, 0.10);
--ok-borde: rgba(53, 232, 160, 0.35);
/* La acción principal: el azul de marca en degradé, con letra blanca.
El cyan queda para enlaces, foco y lo activo — un botón cyan con letra
blanca no se lee. */
--accion: var(--climia-blue-500);
--accion-hover: #0a92f5;
--sobre-accion: #ffffff;
/* Semáforo de las columnas de plata del catálogo: los mismos tres
significados —costo, bolivianos, dólares—, en tonos que se leen sobre
navy. */
--plata-rojo: #ff8a95;
--plata-azul: #5cc8ff;
--plata-verde: var(--climia-success);
/* Encabezados de tabla: una franja un paso más oscura que la tarjeta,
con rótulos apagados. Lo que tiene que resaltar son los datos. */
--cabecera: rgba(6, 26, 44, 0.72);
--th-texto: #6fa9c8;
--plomo: #0a2238;
--cebra: rgba(255, 255, 255, 0.018);
--fila-mouse: rgba(18, 200, 255, 0.07);
--fila-elegida: rgba(255, 200, 102, 0.10);
--sombra: rgba(0, 0, 0, 0.45);
/* Fondos y líneas de la pantalla de propuestas que en oscuro son velos
sobre navy y en claro son superficies: van como roles para que el
diseño claro los pueda cambiar. */
--barra-prop-fondo: linear-gradient(180deg, rgba(6, 25, 43, 0.8), rgba(3, 17, 31, 0.74));
--pie-fondo: rgba(6, 25, 43, 0.84);
/* El vidrio de ClimIA (23-sep-2026): el fondo dinámico está para verse,
así que la barra lateral y las tarjetas lo dejan pasar. Sin
backdrop-filter —con algo animado detrás se recalcularía en cada
cuadro—: la transparencia sola, con la opacidad justa para que una
tabla se siga leyendo. Los campos de texto quedan opacos. */
--lateral-fondo: linear-gradient(180deg, rgba(6, 25, 43, 0.72), rgba(3, 17, 31, 0.8));
--panel-vidrio: linear-gradient(180deg, rgba(12, 43, 71, 0.66), rgba(7, 29, 49, 0.76));
--velo: rgba(3, 17, 31, 0.38);
--velo-fuerte: rgba(3, 17, 31, 0.8);
--linea-tenue: rgba(18, 60, 93, 0.68);
--fila-mouse-items: rgba(9, 45, 72, 0.45);
/* Alias que usaba la ficha del técnico y nunca existieron: quedaban en
transparente sin que nadie lo notara. */
--color-fondo-suave: var(--superficie-2);
--color-principal: var(--frio);
--color-texto-suave: var(--tinta-suave);
--color-borde: var(--linea);
--fuente: "Inter", "Segoe UI", system-ui, sans-serif;
--prosa: var(--fuente);
--mono: "JetBrains Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;
/* Radios: controles, tarjetas y píldoras. `--r` es el de siempre y lo
usan decenas de reglas: ahora vale lo de un control. */
--r: 7px;
--r-boton: 8px;
--r-tarjeta: 12px;
--r-panel: 14px;
/* El armazón. */
--ancho-lateral: 196px;
--ancho-riel: 304px;
--alto-cabecera: 0px;
}
@media screen and (max-width: 1439px) {
:root { --ancho-lateral: 176px; --ancho-riel: 284px; }
}
@media screen and (max-width: 1023px) {
:root { --alto-cabecera: 52px; }
}
/* ---------------------------------------------------------- diseño claro
Parámetros → Diseño de la plataforma (desde el 23-sep-2026). ClimIA
tiene dos diseños y los dos se mantienen: el oscuro, que es el de
arriba, y el claro, que es el que tenía la app antes de ClimIA —celeste,
azul institucional, Calibri—. El layout pone `data-tema="claro"` en
`` y este bloque redefine los mismos roles; ninguna regla de la
hoja tiene que saber en qué diseño está.
La barra lateral y la marca son las mismas en los dos. En claro la barra
va en azul marino, como iba la franja de menú de antes: es donde el logo
de ClimIA, que trae su fondo oscuro, se sigue viendo bien. */
:root[data-tema="claro"] {
color-scheme: light;
--climia-bg-950: #E2EDF7;
--climia-bg-900: #ffffff;
--climia-surface-900: #ffffff;
--climia-surface-850: #EDF3F9;
--climia-surface-800: #DCE7F1;
--climia-line-700: #D2E1EE;
--climia-line-600: #9DBBD6;
--climia-blue-500: #1B75BC;
--climia-cyan-400: #1B75BC;
--climia-cyan-300: #1B75BC;
--climia-text-primary: #0D3B66;
--climia-text-secondary: #3D3D3D;
--climia-text-muted: #6B6B6B;
--climia-text-disabled: #9AA7B2;
--climia-success: #3F8144;
--climia-warning: #8A5A12;
--climia-danger: #A32A28;
--climia-overlay: rgba(13, 59, 102, 0.35);
--climia-gradient-panel: linear-gradient(#ffffff, #ffffff);
--climia-gradient-accion: linear-gradient(#1B75BC, #1B75BC);
--climia-glow-soft: 0 0 0 0 transparent;
--climia-glow-active: 0 0 0 0 transparent;
--climia-glow-primary: 0 0 0 0 transparent;
--papel: #E2EDF7;
--superficie: #ffffff;
--superficie-2: #EDF3F9;
--superficie-3: #DCE7F1;
--tinta: #0D3B66;
--tinta-media: #3D3D3D;
--tinta-suave: #6B6B6B;
--tinta-apagada: #9AA7B2;
--linea: #D2E1EE;
--linea-fuerte: #B9CFE3;
--frio: #1B75BC;
--frio-claro: #E2EDF7;
--frio-borde: #A8C9E6;
--calor: #8A5A12;
--calor-claro: #FFF3DC;
--calor-claro-fuerte: #F3DCB6;
--calor-borde: #E9C68C;
--alerta: #A32A28;
--alerta-claro: #FBE7E6;
--alerta-borde: #EFC2C0;
--ok: #3F8144;
--ok-claro: #E8F4E9;
--ok-borde: #B4D9B7;
--accion: #1B75BC;
--accion-hover: #155F9B;
--sobre-accion: #ffffff;
--plata-rojo: #A32A28;
--plata-azul: #1B5FA0;
--plata-verde: #2E7D51;
--cabecera: #1B75BC;
--th-texto: #ffffff;
--plomo: #D6E4F0;
--cebra: #EDF3F9;
--fila-mouse: #CFE2F2;
--fila-elegida: #FFF3DC;
--sombra: rgba(15, 22, 29, 0.14);
--barra-prop-fondo: #ffffff;
--pie-fondo: #ffffff;
--lateral-fondo: #0D3B66;
--panel-vidrio: #ffffff;
--velo: #FBFDFE;
--velo-fuerte: #ffffff;
--linea-tenue: #D2E1EE;
--fila-mouse-items: #E2EDF7;
--fuente: "Calibri", "Carlito", "Segoe UI", system-ui, sans-serif;
--mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", "Menlo", monospace;
--r: 3px;
--r-boton: 3px;
--r-tarjeta: 5px;
--r-panel: 6px;
}
/* El cuerpo de antes: 14 px de Calibri, los 10,5 pt del documento.
Con `:where()` para que pesen lo mismo que `body` y `table` a secas: si
pesaran más, le ganarían a las tablas del documento (`.hoja table`,
`.doc-tabla`) y el PDF saldría con otra letra. Pasó, y lo detectó la
comparación contra `main`. */
:where(:root[data-tema="claro"]) body { font-size: 14px; }
:where(:root[data-tema="claro"]) table { font-size: 13.5px; }
/* La barra lateral en azul marino, con los tonos de la franja de antes. Los
roles se redefinen sólo acá adentro: la barra es oscura en los dos
diseños. */
:root[data-tema="claro"] .lateral {
background: #0D3B66;
border-right-color: #1D5B94;
--tinta: #ffffff;
--tinta-media: #BBD3E8;
--tinta-suave: #7FA3C4;
--tinta-apagada: #7FA3C4;
--linea: #1D5B94;
--linea-fuerte: #1D5B94;
--frio: #8FCBFF;
--frio-claro: #154C80;
--frio-borde: #3C86C8;
--superficie: #0A3257;
--superficie-2: #154C80;
--sombra: rgba(0, 0, 0, 0.35);
}
/* El banner es una foto oscura: su texto va claro en los dos diseños. */
:root[data-tema="claro"] .riel-banner { --tinta: #ffffff; --frio: #8FCBFF; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--papel);
color: var(--tinta-media);
font-family: var(--fuente);
/* 13,5 px de Inter ocupan lo que ocupaban los 14 px de Calibri, que es
bastante más estrecha: con 14 las tablas del catálogo pasaban a
necesitar scroll horizontal. El documento conserva sus 14 px de
Calibri (ver `.hoja`). */
font-size: 13.5px;
line-height: 1.5;
/* Lo que hacía falta de la monoespaciada: que 1.234,50 y 987,00
ocupen lo mismo y las columnas de precio queden a plomo. */
font-variant-numeric: tabular-nums;
}
p, .prosa { font-family: var(--prosa); }
a { color: var(--frio); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible {
outline: 2px solid var(--frio);
outline-offset: 2px;
}
/* ------------------------------------------------------ armazón ClimIA
Barra lateral fija a la izquierda y el contenido al lado. La barra
mide lo que la ventana y se desplaza sola si la lista de Configuración
no entra: el contenido nunca se mueve por ella. */
.app {
display: grid;
grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
min-height: 100vh;
}
.app__principal { min-width: 0; }
.lateral {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 10px 12px;
background:
radial-gradient(120% 40% at 0% 0%, rgba(18, 200, 255, 0.07), transparent 60%),
var(--lateral-fondo);
border-right: 1px solid var(--linea);
overflow-y: auto;
overscroll-behavior: contain;
z-index: 50;
scrollbar-width: thin;
scrollbar-color: var(--linea-fuerte) transparent;
}
.lateral__marca { display: block; padding: 0 4px; }
.lateral__marca img { display: block; width: 100%; height: auto; border-radius: 8px; }
/* El tipo de cambio, en su tarjeta: es un dato que manda sobre todos los
precios de la app, y por eso se ve siempre. */
.lateral__tc {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 9px;
border: 1px solid var(--linea);
border-radius: var(--r-boton);
background: rgba(7, 29, 49, 0.6);
color: var(--tinta-suave);
}
.lateral__tc:hover { text-decoration: none; border-color: var(--frio-borde); }
.lateral__tc:hover .digitos b { border-color: var(--frio-borde); }
.lateral__tc-rotulo,
.lectura__rotulo {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tinta-suave);
}
.lectura__rotulo { margin-bottom: 5px; }
.lateral__nav { display: flex; flex-direction: column; gap: 2px; }
.lateral__nav a,
.lateral__grupo > summary {
display: flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: var(--r-boton);
color: var(--tinta-media);
font-size: 13px;
font-weight: 500;
cursor: pointer;
list-style: none;
user-select: none;
}
.lateral__grupo > summary::-webkit-details-marker { display: none; }
.lateral__icono { flex: none; color: var(--tinta-suave); }
.lateral__nav a:hover,
.lateral__grupo > summary:hover {
color: var(--tinta);
background: rgba(18, 200, 255, 0.05);
text-decoration: none;
}
.lateral__nav a:hover .lateral__icono,
.lateral__grupo > summary:hover .lateral__icono { color: var(--frio); }
/* Lo activo: velo cyan, borde cyan y un resplandor contenido. Es uno de
los pocos lugares donde se permite brillo: dice dónde se está. */
.lateral__nav > a[aria-current="page"],
.lateral__nav > .lateral__grupo > summary[aria-current="page"] {
color: var(--tinta);
background: linear-gradient(90deg, rgba(8, 125, 232, 0.32), rgba(18, 200, 255, 0.08));
border-color: var(--frio-borde);
box-shadow: var(--climia-glow-soft);
}
.lateral__nav > a[aria-current="page"] .lateral__icono,
.lateral__nav > .lateral__grupo > summary[aria-current="page"] .lateral__icono { color: var(--frio); }
/* La flecha del desplegable, dibujada con bordes: gira al abrir. */
.lateral__grupo > summary::after {
content: "";
width: 6px;
height: 6px;
margin-left: auto;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
opacity: 0.6;
transition: transform 120ms ease;
}
.lateral__grupo[open] > summary::after { transform: rotate(45deg); }
.lateral__sub {
display: flex;
flex-direction: column;
gap: 1px;
margin: 2px 0 6px 18px;
padding-left: 10px;
border-left: 1px solid var(--linea);
}
.lateral__sub a,
.lateral__grupo--hondo > summary {
min-height: 30px;
font-size: 12.5px;
font-weight: 400;
padding: 0 8px;
}
.lateral__sub a[aria-current="page"],
.lateral__grupo--hondo > summary[aria-current="page"] {
color: var(--frio);
background: var(--frio-claro);
border-color: transparent;
}
.lateral__sub .lateral__sub { margin-left: 8px; }
.lateral__sub .lateral__sub a { overflow-wrap: anywhere; }
.lateral__rotulo {
padding: 8px 8px 2px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tinta-apagada);
}
.lateral__vacio { padding: 6px 8px; font-size: 12px; color: var(--tinta-suave); }
.lateral__pie { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.lateral__robot {
display: block;
width: 100%;
height: auto;
border-radius: var(--r-tarjeta);
border: 1px solid var(--linea);
}
/* En ventanas bajas el robot cede su lugar: primero está llegar a la
cuenta sin scroll. */
@media screen and (max-height: 900px) { .lateral__robot { display: none; } }
.lateral__yo { position: relative; }
.lateral__yo > summary {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 8px;
border: 1px solid var(--linea);
border-radius: var(--r-boton);
background: rgba(7, 29, 49, 0.6);
cursor: pointer;
list-style: none;
}
.lateral__yo > summary::-webkit-details-marker { display: none; }
.lateral__yo > summary:hover,
.lateral__yo[open] > summary { border-color: var(--frio-borde); }
.lateral__avatar {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex: none;
border-radius: 50%;
border: 1px solid var(--frio-borde);
background: var(--superficie-2);
color: var(--frio);
font-size: 11.5px;
font-weight: 700;
}
.lateral__quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lateral__quien b { font-size: 12.5px; font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral__quien small { font-size: 11px; color: var(--tinta-suave); }
/* El menú de la cuenta abre hacia arriba: está al pie de la barra. */
.lateral__menu-yo {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 6px);
padding: 5px;
background: var(--superficie-2);
border: 1px solid var(--linea-fuerte);
border-radius: var(--r-boton);
box-shadow: 0 10px 28px var(--sombra);
}
.lateral__menu-yo a,
.lateral__menu-yo button {
display: block;
width: 100%;
padding: 7px 9px;
font: inherit;
font-size: 12.5px;
text-align: left;
color: var(--tinta-media);
background: none;
border: none;
border-radius: 6px;
cursor: pointer;
}
.lateral__menu-yo a:hover,
.lateral__menu-yo button:hover { background: var(--frio-claro); color: var(--tinta); text-decoration: none; }
/* ------------------------------------------------ el menú contraído
La flechita asoma sobre el borde derecho de la barra, a la altura del
tipo de cambio: se encuentra sin buscarla y no compite con nada. Va
`fixed` porque la barra se desplaza sola y recortaría lo que asoma. */
.lateral__plegar {
position: fixed;
top: 108px;
left: calc(var(--ancho-lateral) - 12px);
z-index: 55;
display: grid;
place-items: center;
width: 24px;
height: 24px;
padding: 0;
color: var(--tinta-suave);
background: var(--superficie-2);
border: 1px solid var(--linea-fuerte);
border-radius: 50%;
cursor: pointer;
opacity: 0.75;
transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}
.lateral__plegar:hover,
.lateral__plegar:focus-visible { opacity: 1; color: var(--frio); border-color: var(--frio-borde); }
.lateral__plegar svg { transition: transform 160ms ease; }
/* Contraído: 68 px, sólo íconos. El nombre de cada sección sigue ahí para
el lector de pantalla, y al pasar el mouse sale en el `title`. */
/* Sólo desde 1024 px: más angosto, la barra es un panel que se abre
entero y la preferencia de contraerla no aplica. */
@media screen and (min-width: 1024px) {
:root[data-lateral="plegado"] { --ancho-lateral: 68px; }
:root[data-lateral="plegado"] .lateral__plegar svg { transform: rotate(180deg); }
:root[data-lateral="plegado"] .lateral { padding: 14px 8px 12px; }
/* Del logo queda el emblema: la parte izquierda del archivo. */
:root[data-lateral="plegado"] .lateral__marca { padding: 0; height: 38px; overflow: hidden; border-radius: 8px; }
:root[data-lateral="plegado"] .lateral__marca img { width: 150px; max-width: none; margin: -6px 0 0 -9px; border-radius: 0; }
:root[data-lateral="plegado"] .lateral__tc { flex-direction: column; gap: 1px; padding: 5px 2px; }
:root[data-lateral="plegado"] .lateral__tc-rotulo { font-size: 8px; letter-spacing: 0.04em; }
:root[data-lateral="plegado"] .lateral__tc .digitos { gap: 0; }
:root[data-lateral="plegado"] .lateral__tc .digitos b { min-width: 0; padding: 0; font-size: 11.5px; background: none; border: none; }
:root[data-lateral="plegado"] .lateral__nav a,
:root[data-lateral="plegado"] .lateral__grupo > summary { justify-content: center; padding: 0; }
:root[data-lateral="plegado"] .lateral__nav span,
:root[data-lateral="plegado"] .lateral__quien {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
:root[data-lateral="plegado"] .lateral__grupo > summary::after,
:root[data-lateral="plegado"] .lateral__sub,
:root[data-lateral="plegado"] .lateral__robot { display: none; }
:root[data-lateral="plegado"] .lateral__yo > summary { justify-content: center; padding: 6px 0; }
:root[data-lateral="plegado"] .lateral__menu-yo { right: auto; width: 170px; }
}
@media screen and (max-width: 1023px) {
.lateral__plegar { display: none; }
}
.lateral__velo[hidden] { display: none; }
/* La cabecera angosta sólo existe debajo de 1024 px. */
.movil { display: none; }
@media screen and (max-width: 1023px) {
.app { grid-template-columns: minmax(0, 1fr); }
.lateral {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 264px;
transform: translateX(-102%);
transition: transform 160ms ease;
box-shadow: 0 0 40px var(--sombra);
z-index: 70;
}
.lateral-abierta .lateral { transform: none; }
.lateral__velo {
position: fixed;
inset: 0;
z-index: 65;
background: var(--climia-overlay);
}
.movil {
position: sticky;
top: 0;
z-index: 45;
display: flex;
align-items: center;
gap: 12px;
height: var(--alto-cabecera);
padding: 0 12px;
background: var(--climia-bg-900);
border-bottom: 1px solid var(--linea);
}
.movil__menu {
display: grid;
place-items: center;
width: 38px;
height: 38px;
color: var(--tinta);
background: none;
border: 1px solid var(--linea);
border-radius: var(--r-boton);
cursor: pointer;
}
.movil__marca { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--tinta); }
.movil__marca b { color: var(--frio); }
.movil__marca:hover { text-decoration: none; }
.movil__tc { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--tinta); }
.movil__tc small { font-family: var(--fuente); font-size: 10px; color: var(--tinta-suave); }
}
/* Los dígitos del tipo de cambio, en tamaño de lectura. Es el formato de
la pantalla de impacto, donde el número es el asunto de la página. */
.digitos { display: flex; gap: 2px; }
.digitos b {
display: block;
min-width: 25px;
padding: 3px 0 5px;
text-align: center;
font-family: var(--mono);
font-size: 26px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
color: var(--tinta);
background: var(--superficie-2);
border: 1px solid var(--linea);
border-radius: 4px;
}
.digitos b.sep {
min-width: 12px;
background: none;
border-color: transparent;
color: var(--tinta-suave);
}
.digitos--fantasma b { opacity: 0.45; }
/* En la barra el número es referencia, no tema: entra chico. */
.lateral__tc .digitos b {
min-width: 15px;
padding: 2px 0 3px;
font-size: 14px;
background: var(--superficie);
}
.lateral__tc .digitos b.sep { min-width: 6px; background: none; }
/* La franja de lectura de la pantalla de impacto. */
.tablero {
display: flex;
align-items: flex-end;
gap: 28px;
flex-wrap: wrap;
}
/* ------------------------------------------------------------ contenido */
/* 1760 px: el ancho útil de ClimIA en un monitor de 1920 con la barra
lateral al costado. Más ancho, las filas de las tablas se leen mal. */
.contenido {
padding: 22px 28px 64px;
max-width: 1760px;
}
/* --------------------------------------------------------------- textos */
h1 {
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
/* Marino, como los títulos del documento: hasta ahora heredaba el
gris del cuerpo y el título de pantalla no pesaba más que una
fila de la tabla. */
color: var(--tinta);
margin: 0 0 4px;
}
h2 {
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tinta-suave);
font-weight: 600;
margin: 0 0 10px;
}
.bajada {
font-family: var(--prosa);
color: var(--tinta-media);
margin: 0 0 20px;
max-width: 68ch;
}
.encabezado {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 18px;
}
.encabezado > :first-child { flex: 1; min-width: 0; }
/* Encabezado de los informes: título, conteo, columnas y alta en una sola
línea. Sin bajada y sin cabecera de bloque, la tabla arranca ~90 px más
arriba y entran tres o cuatro productos más en la primera pantalla. */
.encabezado--compacto { align-items: center; margin-bottom: 12px; }
.encabezado__barra {
display: flex;
align-items: center;
gap: 12px;
flex: none;
}
.conteo { font-size: 11.5px; color: var(--tinta-media); white-space: nowrap; }
.conteo b { color: var(--tinta); font-weight: 600; }
/* La X de las pantallas que son un desvío: se entra a hacer una cosa y se
vuelve de donde se vino. Arriba a la derecha, donde se la busca. */
.cerrar {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: none;
color: var(--tinta-suave);
border: 1px solid var(--linea-fuerte);
border-radius: 2px;
background: var(--superficie);
}
.cerrar:hover {
color: var(--climia-bg-950);
background: var(--alerta);
border-color: var(--alerta);
text-decoration: none;
}
/* -------------------------------------------------------------- bloques */
.bloque {
background: var(--climia-gradient-panel);
border: 1px solid var(--linea);
border-radius: var(--r-tarjeta);
margin-bottom: 20px;
}
.bloque__cabeza {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 16px;
border-bottom: 1px solid var(--linea);
}
.bloque__cabeza h2 { margin: 0; }
.bloque__cabeza .derecha { margin-left: auto; }
.bloque__cuerpo { padding: 16px; }
.rejilla {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 20px;
}
/* --------------------------------------------------------------- cifras */
.cifra__rotulo {
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tinta-suave);
margin-bottom: 4px;
}
.cifra__valor { font-size: 21px; font-weight: 600; line-height: 1.15; }
.cifra__pie { font-size: 11px; color: var(--tinta-media); margin-top: 3px; }
/* --------------------------------------------------------------- tablas */
/* Una fila que el filtro escondió. El navegador ya lo hace solo con el
atributo `hidden`, pero el `display: table-row` de su propia hoja de
estilos anda cerca en especificidad y no conviene depender de quién
gana: se dice explícito. */
tbody tr[hidden] { display: none; }
.tabla-marco { overflow-x: auto; }
table {
width: 100%;
border-collapse: collapse;
/* 13 px de Inter: la barra lateral de ClimIA le quita a las tablas unos
200 px de ancho, y Inter es más ancha que Calibri. Con el cuerpo de
antes el catálogo perdía dos columnas de precio de la vista. */
font-size: 13px;
}
th {
text-align: left;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--th-texto);
background: var(--cabecera);
font-weight: 700;
padding: 8px 10px;
border-bottom: 1px solid var(--cabecera);
white-space: nowrap;
}
td {
padding: 8px 10px;
border-bottom: 1px solid var(--linea);
vertical-align: baseline;
}
tbody tr:last-child td { border-bottom: none; }
/* Estados de fila, en orden de precedencia creciente. Todos pintan la
celda y no el `tr`, porque el fondo del `tr` queda por debajo del de
las celdas y no se vería. */
tbody tr:nth-child(even) td { background: var(--cebra); }
tbody tr:hover td { background: var(--fila-mouse); }
tbody tr.fila--elegida td { background: var(--fila-elegida); }
.num { text-align: right; white-space: nowrap; }
th.num { text-align: right; }
/* Las columnas de plata van centradas, encabezado y valores. Los importes
ya vienen redondeados a entero, así que no hay comas que alinear: el
centrado deja cada columna como un bloque parejo y hace más fácil
recorrerlas de izquierda a derecha comparando proveedores. */
.moneda, th.moneda { text-align: center; white-space: nowrap; }
/* El valor derivado se ve derivado: la moneda de origen es la verdad. */
.derivado { color: var(--tinta-suave); }
.origen { font-weight: 600; }
/* ------------------------------------------------- semáforo del catálogo
En el catálogo el color no decora: dice qué clase de número es cada
columna, de un vistazo y sin leer el encabezado.
rojo = lo que se paga (costo)
azul = lo que se cobra en bolivianos
verde = lo que se cobra en dólares
La negrita marca, dentro de cada familia, la variante con factura.
Gana sobre .derivado porque acá manda la clase de número, no de dónde
se derivó. */
.plata-costo { color: var(--plata-rojo); }
.plata-costo-iva { color: var(--plata-rojo); font-weight: 700; }
.plata-bob { color: var(--plata-azul); }
.plata-bob-iva { color: var(--plata-azul); font-weight: 700; }
.plata-usd { color: var(--plata-verde); }
.plata-usd-iva { color: var(--plata-verde); font-weight: 700; }
/* La utilidad es el número que el operador busca, así que se destaca el
valor y no el encabezado: la franja verde recorre la columna hacia
abajo y se lee de un saque cuánto deja cada equipo. Sólo se pinta
cuando hay utilidad calculada; un guión o un "sin regla" van sobrios.
Los selectores llevan `tbody tr` adelante para pesar lo mismo que la
cebra y los estados de fila, que están más arriba en la hoja: sin eso
la franja verde desaparecería en las filas pares. */
/* Sobre navy la franja es un velo verde con la cifra en verde, y no un
verde lleno con letra blanca: con el verde de ClimIA, que es claro, el
blanco encima no se leía. */
tbody tr td.plata-utilidad {
background: rgba(53, 232, 160, 0.13);
color: var(--plata-verde);
font-weight: 700;
}
td.plata-utilidad .sub,
td.plata-utilidad .derivado { color: var(--tinta-media); }
/* El hover y la selección pintan la fila; la utilidad mantiene su verde
y sólo cambia de tono para acompañar el resaltado. */
tbody tr:hover td.plata-utilidad { background: rgba(53, 232, 160, 0.2); }
tbody tr.fila--elegida td.plata-utilidad { background: rgba(53, 232, 160, 0.28); }
.sub { display: block; font-size: 10.5px; color: var(--tinta-suave); }
/* El último mensaje de una conversación (panel de WhatsApp) puede ser
un párrafo entero: se corta en una línea, con el resto disponible al
pasar el mouse, en vez de estirar la fila o desbordar la tabla. */
.celda-recorte {
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Lápiz al lado del SKU: lleva a editar el producto sin pasar por la
ficha. Se mantiene tenue hasta que el mouse entra en la fila, para no
competir con los números, que son el motivo de la tabla. */
.lapiz {
display: inline-flex;
vertical-align: -2px;
margin-left: 5px;
color: var(--tinta-suave);
opacity: 0.45;
}
tbody tr:hover .lapiz { opacity: 1; color: var(--frio); }
.lapiz:hover { color: var(--frio); opacity: 1; text-decoration: none; }
/* ------------------------------------------------- ancho de las columnas
Cada encabezado lleva un tirador invisible en su borde derecho. Al
primer arrastre la tabla congela los anchos que tenía en ese momento
(`table-layout: fixed` más un ancho total explícito) y a partir de ahí
cada columna vale lo que el operador diga; el marco se encarga del
scroll horizontal si la suma pasa el ancho de la pantalla. */
th { position: relative; }
.redim {
position: absolute;
top: 0;
right: -3px;
width: 7px;
height: 100%;
cursor: col-resize;
z-index: 2;
user-select: none;
}
/*
* El tirador para cambiar el ancho de una columna.
*
* Va blanco y no en el azul de acento: desde que el encabezado de tabla
* usa el mismo azul institucional que los acentos de la app, un tirador
* de ese color era azul sobre azul y no se veía. Blanco sobre el azul
* del encabezado es el único par que se lee siempre.
*
* Se muestra apenas siempre, para que se sepa que se puede arrastrar, y
* pasa a blanco pleno al apuntarlo o mientras se arrastra.
*/
.redim::after {
content: "";
position: absolute;
top: 25%;
left: 2px;
width: 2px;
height: 50%;
background: rgba(255, 255, 255, 0.35);
}
.redim:hover::after,
.redim--activo::after {
top: 0;
height: 100%;
background: #fff;
}
/* Con anchos fijos el contenido más largo que la columna se recorta en
vez de empujar a las vecinas. */
table.anchos-fijos td,
table.anchos-fijos th { overflow: hidden; }
table.anchos-fijos .sub { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
/* Mientras se arrastra, el cursor no cambia al pasar sobre el texto ni
se selecciona media tabla sin querer. */
body.redimensionando { cursor: col-resize; user-select: none; }
.vacio {
padding: 34px 16px;
text-align: center;
color: var(--tinta-media);
font-family: var(--prosa);
}
.vacio strong { display: block; font-weight: 600; color: var(--tinta); margin-bottom: 6px; }
/* ----------------------------------------------------------------- tags */
.tag {
display: inline-block;
padding: 1px 7px;
border-radius: 5px;
font-weight: 600;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid var(--linea-fuerte);
color: var(--tinta-media);
background: var(--superficie-2);
white-space: nowrap;
}
.tag--usd { color: var(--frio); background: var(--frio-claro); border-color: var(--frio-borde); }
.tag--bob { color: var(--calor); background: var(--calor-claro); border-color: var(--calor-borde); }
.tag--ok { color: var(--ok); background: var(--ok-claro); border-color: var(--ok-borde); }
.tag--aviso{ color: var(--calor); background: var(--calor-claro); border-color: var(--calor-borde); }
.tag--alto { color: var(--alerta);background: var(--alerta-claro); border-color: var(--alerta-borde); }
.tag--mejor{ color: var(--ok); background: var(--ok-claro); border-color: var(--ok-borde); }
/* Para qué sirve algo, no cómo le va: el rol de una foto, por ejemplo. */
.tag--rol { color: var(--frio); background: var(--frio-claro); border-color: var(--frio-borde); }
/* Dado de baja: apagado y no rojo. No es un problema que haya que
atender, es un producto que alguien sacó del catálogo a propósito. */
.tag--baja { color: var(--tinta-media); background: var(--superficie-2); border-color: var(--linea-fuerte); }
/* Estados de una cotización. */
.tag--borrador { color: var(--tinta-media); background: var(--superficie-2); border-color: var(--linea-fuerte); }
.tag--enviada { color: var(--frio); background: var(--frio-claro); border-color: var(--frio-borde); }
.tag--aceptada { color: var(--ok); background: var(--ok-claro); border-color: var(--ok-borde); }
.tag--rechazada { color: var(--alerta); background: var(--alerta-claro); border-color: var(--alerta-borde); }
/* Lo que pidió el cliente, en la lista de servicios: una línea recortada.
Sin el tope, una descripción larga estira la columna y las cifras de
plata —que son la razón de ser de la tabla— se van fuera de la
pantalla. El texto completo va en el `title` y en la ficha. */
.celda-pedido {
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--tinta-media);
}
/* Estados de una orden de servicio.
Éstos van rellenos y con letra blanca, al revés que el resto de los
tags de la app —que son fondo pálido y letra del color—. Es a
propósito: el estado del trabajo es la columna que se barre con la
vista en una lista de treinta órdenes para encontrar las que faltan
hacer, y un tag pálido se pierde entre las demás celdas.
Los tonos no son los «claros» de la paleta sino un paso más oscuros.
El pedido era fondo claro con letra blanca, y eso no se puede tener
las dos cosas: blanco sobre #E8F4E9 es ilegible. Se conservó el matiz
—verde, rojo, naranja, celeste, azul— y se bajó la luminosidad hasta
donde el blanco se lee. Sobre fondo blanco de tabla siguen leyéndose
como colores claros. */
.tag--solicitada { color: #fff; background: #E8934A; border-color: #D67F33; }
.tag--agendada { color: #fff; background: #4FA8D8; border-color: #3691C4; }
.tag--en_curso { color: #fff; background: #2D6FA8; border-color: #1F5B8F; }
.tag--realizada { color: #fff; background: #57A85C; border-color: #43904A; }
.tag--anulada { color: #fff; background: #D26A63; border-color: #BC534C; }
/* Notas al pie de una pantalla: lo que conviene saber, pero no antes de
trabajar. Van sobrias a propósito; un aviso de color arriba compite con
el contenido cada vez que se entra. */
.notas {
margin-top: 26px;
padding-top: 14px;
border-top: 1px solid var(--linea);
max-width: 760px;
}
.notas p {
font-family: var(--prosa);
font-size: 11.5px;
line-height: 1.55;
color: var(--tinta-media);
margin: 0 0 8px;
}
.notas p:last-child { margin-bottom: 0; }
/* ------------------------------------------------------ hoja de cotización
La vista de impresión. En pantalla se ve como una hoja sobre el fondo
plomo; al imprimir desaparece todo lo que no es la hoja —menú, barra
de acciones, avisos— y queda el documento solo. */
/* La hoja en sí está definida más abajo, junto al resto del diseño del
documento. Acá arranca la parte de pantalla: el editor de plantillas. */
code {
font-family: var(--mono);
font-size: 0.92em;
padding: 1px 4px;
background: var(--superficie-2);
border: 1px solid var(--linea);
border-radius: 2px;
}
/* ------------------------------------------------- editor de plantillas */
.rejilla-plantillas {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 20px;
align-items: start;
}
.ayuda-marcadores { position: sticky; top: calc(var(--alto-cabecera) + 16px); }
textarea.codigo {
font-family: var(--mono);
font-size: 11.5px;
line-height: 1.5;
white-space: pre;
overflow-wrap: normal;
overflow-x: auto;
tab-size: 2;
}
.tabla-marcadores { font-size: 11px; }
.tabla-marcadores td { padding: 3px 0; border: none; vertical-align: top; }
.tabla-marcadores td:first-child { padding-right: 10px; white-space: nowrap; }
.tabla-marcadores code { font-size: 10.5px; }
@media screen and (max-width: 1100px) {
.rejilla-plantillas { grid-template-columns: 1fr; }
.ayuda-marcadores { position: static; }
}
/* ============================================================
El documento: propuesta comercial
------------------------------------------------------------
Paleta y escala tipográfica propias, encerradas en `.hoja`.
Van acá adentro y no en `:root` a propósito: la consola de
precios es una herramienta interna —monoespaciada, acero y
ámbar— y el documento que ve el cliente es otra cosa. Mezclar
los dos juegos de variables terminaría tiñendo el catálogo con
los azules de la propuesta, o al revés.
La geometría —cabecera a 10 mm del borde, pie apoyado en el de
abajo, una hoja por página— no se define acá: vive en el bloque
@media print y en `public/impresion.js`.
============================================================ */
.hoja {
/* Geometría. En pantalla es una tarjeta blanca; al imprimir se estira
al alto exacto de la página (`100vh`, en el bloque @media print) para
que la cabecera caiga en el margen de arriba y el pie en el de abajo.
`--hoja-alto` y `--hoja-pie` los escribe `public/impresion.js`, que
es quien puede medir: el primero para que la vista previa muestre
dónde va a caer el pie, el segundo para reservarle su hueco. Sin el
script la hoja mide lo que mide su contenido y no pasa nada malo. */
background: #fff;
border: 1px solid var(--linea);
border-radius: var(--r);
padding: 34px 38px calc(40px + var(--hoja-pie, 0px));
max-width: 820px;
position: relative;
min-height: var(--hoja-alto, auto);
/* Color */
--azul-marino: #0D3B66;
--azul-inst: #1B75BC;
--gris-texto: #3D3D3D;
--gris-claro: #6B6B6B;
--celeste-fondo: #E2EDF7;
--celeste-suave: #EDF3F9;
--ambar-fondo: #FFF3DC;
--ambar-borde: #E8A33D;
--verde-fondo: #E8F4E9;
--verde-borde: #4C9A51;
--borde-ext: #B9CFE3;
--borde-int: #D2E1EE;
/* Los roles de la app, devueltos a los valores claros de antes de
ClimIA. La app es oscura; el papel no. Todo lo genérico que cae
adentro de una hoja —`th`, `a`, `p`, la cebra de las tablas, los
avisos— pide colores por rol, y acá los recibe claros sin que haya
que repetir una sola regla. Sin este bloque el PDF que recibe el
cliente salía con letra celeste sobre blanco. */
color-scheme: light;
--papel: var(--celeste-fondo);
--superficie: #ffffff;
--superficie-2: var(--celeste-suave);
--superficie-3: #DCE7F1;
--tinta: var(--azul-marino);
--tinta-media: #3D3D3D;
--tinta-suave: #6B6B6B;
--linea: var(--borde-int);
--linea-fuerte: var(--borde-ext);
--frio: var(--azul-inst);
--frio-claro: var(--celeste-fondo);
--frio-borde: #A8C9E6;
--calor: #8A5A12;
--calor-claro: var(--ambar-fondo);
--calor-borde: #E9C68C;
--alerta: #A32A28;
--alerta-claro: #FBE7E6;
--alerta-borde: #EFC2C0;
--ok: #3F8144;
--ok-claro: var(--verde-fondo);
--ok-borde: #B4D9B7;
--cabecera: var(--azul-inst);
--th-texto: #ffffff;
--cebra: var(--celeste-suave);
--fila-mouse: #CFE2F2;
--fila-elegida: var(--ambar-fondo);
--plomo: #D6E4F0;
--prosa: var(--fuente);
--mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", "Menlo", monospace;
--r: 3px;
/* Tipografía. En puntos y no en píxeles: el destino es papel, y
un cuerpo de 10,5 pt mide lo mismo impreso salga de la máquina
que salga. Carlito es la métrica-compatible libre de Calibri,
por si el documento se abre donde no hay Office. */
--fuente: "Calibri", "Carlito", "Segoe UI", system-ui, sans-serif;
--fs-portada: 22pt;
--fs-titular: 30pt;
--fs-antetitulo: 11pt;
--fs-bajada: 12pt;
--fs-seccion: 13pt;
--fs-subtitulo: 11.5pt;
--fs-subsub: 10.5pt;
--fs-cuerpo: 10.5pt;
--fs-th: 10pt;
--fs-td: 10pt;
--fs-aux: 9.5pt;
--fs-caption: 8.5pt;
--fs-pie: 8pt;
--fs-cita: 12.5pt;
--lh-cuerpo: 1.32;
--lh-tabla: 1.26;
font-family: var(--fuente);
font-size: var(--fs-cuerpo);
line-height: var(--lh-cuerpo);
color: var(--gris-texto);
}
/* La app le pone `--prosa` a todo `
`; adentro del documento manda
la fuente del documento. Sin esto los párrafos quedarían en otra
familia que los títulos y las tablas. */
.hoja p, .hoja li, .hoja td, .hoja th, .hoja h1, .hoja h2, .hoja h3,
.hoja h4, .hoja figcaption, .hoja blockquote { font-family: inherit; }
.hoja p {
margin: 0 0 2.1mm;
text-align: justify;
/* Justificado sin partir palabras: un guión de corte en medio de
un modelo —«TW12HQ3A»— se leería como parte del código. */
hyphens: none;
orphans: 3;
widows: 3;
}
.hoja td p, .hoja th p, .hoja figcaption { text-align: left; }
.hoja .destacado { color: var(--azul-marino); font-weight: 700; }
/* La app tiene su propia jerarquía de títulos para las pantallas —su `h2`
es una versalita gris de 10 px con 0,2 em de tracking— y esa herencia no
tiene nada que hacer en un documento impreso: dejaba «LAS MARCAS QUE
COTIZAMOS» espaciado como un rótulo de tablero. Se neutraliza de una
vez y cada título del documento define lo suyo más abajo. */
.hoja h1, .hoja h2, .hoja h3, .hoja h4 {
font-size: inherit;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: var(--azul-marino);
margin: 0;
}
/* ---------------------------------------------------- cabecera y pie
Los dos son HTML que escribe el operador en Configuración, así que
acá sólo se define el marco: cuerpo de letra, el filete que los
separa y de dónde arrancan. Lo de adentro es suyo. */
.hoja__plantilla--cabecera {
font-size: var(--fs-aux);
color: var(--gris-texto);
padding-bottom: 3mm;
border-bottom: 1.5pt solid var(--azul-inst);
}
.hoja__plantilla--cabecera b,
.hoja__plantilla--cabecera strong { color: var(--azul-marino); }
/* El margen del primer y del último elemento de la plantilla se anula.
Sin esto un `
` al principio de la cabecera —lo más natural de
escribir— se lleva su margen hacia afuera del bloque y empuja el
membrete un renglón para abajo: la cabecera dejaría de empezar en el
centímetro que se pidió. Lo mismo con el pie contra el borde de abajo.
Adentro el operador sigue maquetando como quiera. */
.hoja__plantilla--cabecera > *:first-child,
.hoja__plantilla--pie > *:first-child { margin-top: 0; }
.hoja__plantilla--cabecera > *:last-child,
.hoja__plantilla--pie > *:last-child { margin-bottom: 0; }
.hoja__plantilla--pie {
font-size: var(--fs-pie);
color: var(--gris-claro);
padding-top: 2.5mm;
border-top: 0.75pt solid var(--borde-ext);
/* Pegado al borde de abajo de la hoja, no al final del texto. El hueco
que ocupa se lo reserva la hoja con `--hoja-pie`, así el contenido
nunca le pasa por encima. Los valores de acá son los de pantalla, que
tiene que respetar el margen de la tarjeta; al imprimir van a cero,
donde el margen lo pone @page. */
position: absolute;
left: 38px;
right: 38px;
bottom: 40px;
}
/* Si el operador arma su membrete con una tabla, es para acomodar el
contenido, no para mostrar una tabla: sale sin bordes ni fondos. */
.hoja__plantilla table { border: none; margin: 0; }
.hoja__plantilla td, .hoja__plantilla th {
border: none;
padding: 0 2mm 0 0;
background: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
white-space: normal;
}
/* ------------------------------------------------------------- portada
Foto a sangre con el titular encima, y abajo, sobre blanco, dos filas:
el logo con la descripción de la empresa, y los datos del cliente
contra las fechas de la cotización.
La proporción es la que hace que funcione: la foto se lleva algo menos
de dos tercios de la hoja y el bloque blanco el resto. Una foto más
chica deja de ser portada y pasa a ser ilustración; una más grande
arrincona los datos contra el borde de abajo.
La estructura la escribe el operador en Configuración → Plantillas, con
estas clases. No está fija en el código a propósito: quién es el
cliente, qué dice el antetítulo y qué datos de la empresa van al pie
son decisiones suyas, no del programa. */
.hoja--caratula {
display: flex;
flex-direction: column;
margin-bottom: 20px;
/* También en pantalla: la portada es a sangre, y una vista previa con
el marco blanco de las otras hojas no muestra lo que se va a
imprimir. */
padding: 0;
}
/* ------------------------------------------------------ la foto y su titular */
.portada__foto {
position: relative;
flex: none;
/* 62 % de la hoja. En pantalla se calcula sobre el alto que
`public/impresion.js` le da a la hoja, así la proporción de la vista
previa es la misma que la del papel; si el script no corrió, un valor
fijo razonable. Al imprimir manda la regla en milímetros de abajo. */
height: calc(var(--hoja-alto, 680px) * 0.62);
overflow: hidden;
background: var(--azul-marino);
}
/* La foto que trae {{imagen_caratula}}. Llena el bloque y se recorta por
el centro: las fotos las sube el operador con el recorte que tengan y
una apaisada no puede decidir el alto de la portada. */
.portada__foto .caratula__foto,
.portada__foto img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
max-height: none;
}
/* Sin velo sobre la foto: el degradado lo dibujaba el navegador en cada
impresión y era lo que más tardaba en aparecer en el PDF. La foto de
portada se sube ya con su capa oscura encima, que además da control
sobre dónde oscurecer. El fondo marino de acá abajo sigue sirviendo de
respaldo para cuando no hay foto cargada. */
.portada__titular {
position: absolute;
left: 15mm;
right: 15mm;
bottom: 12mm;
}
.portada__antetitulo {
font-size: var(--fs-antetitulo);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.22em;
color: #9FC8EA;
margin-bottom: 3mm;
}
/* El titular es lo más grande del documento y por eso tiene su propio
cuerpo, aparte del `--fs-portada` que usa el resto de la portada: a
22 pt un título de cuatro palabras no sostiene media hoja de foto. */
.portada__titulo {
font-size: var(--fs-titular);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.015em;
color: #fff;
margin: 0;
text-wrap: balance;
}
/* ------------------------------------------------------- el bloque blanco */
.portada__ficha {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 7mm;
padding: 10mm 15mm;
background: #fff;
}
/* Primera fila: el logo, un filete y la descripción de la empresa. El
filete separa la marca del dato sin necesidad de una caja. */
.portada__marca {
display: grid;
grid-template-columns: auto 1.5pt minmax(0, 1fr);
align-items: center;
gap: 7mm;
}
.portada__logo { display: flex; align-items: center; }
.portada__marca .documento__logo {
max-height: 18mm;
max-width: 70mm;
}
/* Sin logo cargado no hay nada que separar, y un filete suelto contra el
margen izquierdo se lee como un error.
Se colapsa la retícula entera y no sólo el filete: esconder el filete
con `display: none` lo saca del grid pero **no saca su columna**, así
que el texto de la empresa se corría a la columna de 1,5 pt y se
envolvía a un carácter por renglón. El bloque medía 477 px en vez de
60, la portada se pasaba de largo y salía una página en blanco detrás
de cada propuesta. Con una sola columna el texto ocupa todo el ancho,
que es lo que corresponde cuando no hay logo al lado. */
.portada__marca:has(.portada__logo:empty) {
grid-template-columns: minmax(0, 1fr);
}
.portada__marca:has(.portada__logo:empty) .portada__logo,
.portada__marca:has(.portada__logo:empty) .portada__filete { display: none; }
.portada__filete {
align-self: stretch;
min-height: 14mm;
background: var(--azul-inst);
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.portada__empresa {
font-size: var(--fs-aux);
line-height: 1.45;
color: var(--gris-claro);
}
.portada__empresa b, .portada__empresa strong { color: var(--gris-texto); }
/* Segunda fila: a quién va y hasta cuándo vale. Separadas por una línea
fina, con las fechas alineadas a la derecha para que las dos columnas
se lean como una ficha y no como dos párrafos sueltos. */
.portada__datos {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10mm;
align-items: start;
padding-top: 6mm;
border-top: 0.75pt solid var(--borde-ext);
}
.portada__datos > div:last-child { text-align: right; }
.portada__rotulo {
font-size: var(--fs-caption);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--azul-inst);
margin-bottom: 1.5mm;
}
.portada__valor {
font-size: var(--fs-seccion);
font-weight: 700;
color: var(--azul-marino);
line-height: 1.2;
}
.portada__nota {
font-size: var(--fs-aux);
color: var(--gris-claro);
margin-top: 1.2mm;
}
@media print {
/* En el papel, 173 mm de los 279,4 de la hoja: el 62 %. Va en
milímetros y no en porcentaje porque el porcentaje se mide contra la
altura del padre, y el padre tiene min-height y no height: el
navegador no lo resuelve y la foto queda del alto de la imagen. */
.portada__foto { height: 173mm; }
}
/* La imagen que trae {{logo}}. Alto acotado y ancho libre porque un logo
es apaisado o cuadrado según quién lo diseñó, y forzarle un ancho fijo
lo deformaría; limitando la altura entra bien en una cabecera angosta
o crece sin invadir el resto de la portada. */
.documento__logo {
display: block;
max-height: 16mm;
max-width: 60mm;
width: auto;
height: auto;
}
/* La portada la escribe el operador, así que su jerarquía también se
define por etiqueta: un `
` suyo, fuera de las clases de arriba,
tiene que salir con cuerpo de portada igual. */
.hoja--caratula h1 {
font-size: var(--fs-portada);
font-weight: 700;
color: var(--azul-marino);
line-height: 1.15;
margin: 0 0 2mm;
padding: 0;
border: none;
}
.hoja--caratula h2 {
font-size: var(--fs-antetitulo);
font-weight: 700;
color: var(--azul-inst);
text-transform: uppercase;
letter-spacing: 0.16em;
margin: 0 0 1.5mm;
}
.hoja--caratula p {
font-size: var(--fs-bajada);
text-align: left;
margin: 0 0 1.5mm;
}
/* Un `
` con la clase del titular manda sobre la regla de etiqueta. */
.hoja--caratula h1.portada__titulo {
font-size: var(--fs-titular);
color: #fff;
line-height: 1.08;
margin: 0;
}
@media print {
/* El salto lo pone `.hoja + .hoja`. Repetirlo acá con `page-break-after`
sumaba una hoja en blanco entre la carátula y la cotización. */
/* `100vh` —la página entera— y no los 92vh de antes: ese recorte era
por miedo a que estirar hasta el borde sumara una página, y quedó
probado que no. La carátula centrada en la página completa es lo que
se buscaba desde el principio. */
.hoja--caratula { min-height: 100vh; margin-bottom: 0; }
}
/* ------------------------------------------------- membrete de fábrica
El que sale cuando no hay plantilla de cabecera cargada. */
.hoja__cabeza {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8mm;
padding-bottom: 3mm;
border-bottom: 1.5pt solid var(--azul-inst);
}
.hoja__marca {
font-size: var(--fs-subtitulo);
font-weight: 700;
color: var(--azul-marino);
}
.hoja__numero { text-align: right; }
.hoja__valor { font-size: var(--fs-subtitulo); font-weight: 700; color: var(--azul-marino); }
.hoja__sub { font-size: var(--fs-aux); color: var(--gris-claro); }
.hoja__rotulo {
font-size: var(--fs-caption);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--azul-inst);
margin-bottom: 1mm;
}
/* ------------------------------------------- datos de la cotización
Cliente, validez y número de propuesta, uno al lado del otro sobre
fondo celeste: es la ficha de la operación, y separarla del cuerpo
evita que se lea como un párrafo más de la propuesta.
La tercera columna es angosta a propósito: sólo lleva el número y la
fecha, y darle el mismo ancho que al cliente dejaría un hueco. */
.hoja__datos {
display: grid;
grid-template-columns: 1.15fr 1fr 0.62fr;
gap: 6mm;
margin: 4mm 0;
padding: 3mm 4mm;
background: var(--celeste-suave);
border: 0.75pt solid var(--borde-ext);
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.hoja__propuesta {
font-size: 12pt;
letter-spacing: 0.02em;
color: var(--azul-inst);
}
/* Descripción y condiciones las escribe el operador en un textarea, sin
saber HTML. `pre-line` hace que el Enter que apretó sea el salto que
sale impreso: respeta los saltos escritos, junta los espacios de más y
sigue acomodando cada párrafo al ancho de la hoja. */
.hoja__descripcion,
.hoja__parrafo {
white-space: pre-line;
}
.hoja__descripcion {
margin: 0 0 4mm;
padding: 2.5mm 3.5mm;
/* Verde y no celeste: arriba está el celeste de Cliente/Validez y abajo
el celeste de las filas pares de la tabla. Con el mismo tono la
descripción se perdía entre los dos; el verde la separa de un
vistazo. */
background: var(--verde-fondo);
border-left: 1.5pt solid var(--verde-borde);
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
/* --------------------------------------------------------------- tablas
Se estilan por etiqueta dentro de `.hoja` y no sólo por `.hoja__tabla`:
la cabecera y la garantía las escribe el operador, y una tabla que él
ponga ahí tiene que salir con el mismo formato que la de precios. */
.hoja table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-td);
line-height: var(--lh-tabla);
margin: 0 0 3mm;
border: 0.75pt solid var(--borde-ext);
}
.hoja th {
font-size: var(--fs-th);
font-weight: 700;
color: #fff;
background: var(--azul-inst);
text-align: left;
vertical-align: middle;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
padding: 1.6mm 2.3mm;
border: 0.5pt solid var(--borde-int);
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.hoja td {
padding: 1.6mm 2.3mm;
vertical-align: middle;
border: 0.5pt solid var(--borde-int);
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
/* La cebra es sólo de la tabla de precios: en una tabla de maquetación
—la que el operador usa para poner dos cosas a los costados de la
cabecera— teñiría renglones sin motivo. */
.hoja__tabla { margin-bottom: 4mm; }
/* Las cabeceras de la tabla de precios van en versalitas, y las de las
tres columnas de cifras centradas sobre su columna. El poco tracking
es lo que hace legible una versalita a 10 pt; sin él las mayúsculas se
amontonan. */
.hoja__tabla th {
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hoja__tabla th.num, .hoja__tabla th.moneda { text-align: center; }
/* La cebra va por número de ítem y no por posición de fila: con los
subtítulos de grupo intercalados, `nth-child` teñiría renglones
corridos y el sombreado dejaría de alternar. */
.hoja__tabla tbody tr.par > td { background: var(--celeste-suave); }
/* El subtítulo de un grupo de equipos. No es otra cabecera de columnas:
va en celeste —el color que el documento usa para estructura— con la
tinta institucional, para que se lea como una división de la tabla y
no como el encabezado repetido. */
.hoja__tabla tbody tr.grupo th {
background: var(--celeste-suave);
color: var(--azul-marino);
font-size: var(--fs-caption);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2mm 2.3mm 1.4mm;
/* Un subtítulo al pie de una hoja no encabeza nada. La paginación ya lo
evita al armar las hojas; esto es el cinturón para cuando el
navegador corta por su cuenta. */
break-after: avoid;
page-break-after: avoid;
}
/* La capacidad adentro de un grupo de equipos. Divide al grupo, no abre
uno nuevo: por eso va sin el fondo celeste del subtítulo de arriba,
apenas un poco más chico y con la tinta plomiza de un dato secundario,
como el detalle técnico de cada ítem —una fila menos, no otro título. */
.hoja__tabla tbody tr.subgrupo th {
/* `.hoja th` pone fondo y letra blanca para la cabecera de columnas; acá
se cancelan los dos, si no la tinta plomiza queda invisible. */
background: #fff;
color: var(--gris-claro);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 1.6mm 2.3mm 1mm;
border: none;
border-bottom: 1px solid var(--borde-int);
break-after: avoid;
page-break-after: avoid;
}
.hoja__tabla .sub {
display: block;
font-size: var(--fs-caption);
color: var(--gris-claro);
margin-top: 0.8mm;
line-height: 1.25;
}
.hoja__tabla td.num { text-align: center; font-weight: 700; color: var(--gris-claro); }
.hoja__tabla td.moneda {
text-align: right;
font-weight: 700;
color: var(--azul-marino);
white-space: nowrap;
}
/* ------------------------------------------------------------- totales */
.hoja__totales {
margin-left: auto;
width: 75mm;
border: 0.75pt solid var(--borde-ext);
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.hoja__totales > div {
display: flex;
justify-content: space-between;
gap: 4mm;
padding: 1.5mm 3mm;
border-bottom: 0.5pt solid var(--borde-int);
}
.hoja__total {
border-bottom: none;
background: var(--celeste-fondo);
font-size: var(--fs-subtitulo);
padding: 2.2mm 3mm !important;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.hoja__total span, .hoja__total b { color: var(--azul-marino); font-weight: 700; }
/* La aclaración de la Inversión Total —«(impuesto incluido)»— va debajo
y más chica: es contexto del número, no un segundo importe. La caja se
ensancha un poco porque con centavos «Bs 15.865,00» ya no entra junto
al rótulo en 75 mm. */
.hoja__totales { width: 82mm; }
.hoja__totales small {
display: block;
font-size: 0.82em;
color: var(--tinta-suave);
font-weight: 400;
}
/* ---------------------------------------------------------- condiciones
En ámbar y no en celeste como el resto: es lo único de la hoja que
compromete al cliente a algo —plazos, anticipo, vigencia—. Que se
distinga de un vistazo del material informativo es el punto. */
.hoja__pie {
margin-top: 5mm;
padding: 2.5mm 3.5mm;
background: var(--ambar-fondo);
border-left: 1.5pt solid var(--ambar-borde);
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.hoja__pie .hoja__rotulo { color: #8A5A12; }
.hoja__pie p { margin: 0; }
/* ------------------------------------------------------- anexos del documento
Marcas, galería y preguntas frecuentes. Al imprimir, el conjunto arranca
en página nueva: son material de lectura, no parte de la cotización
comercial, y meterlos a continuación de los totales haría que el cliente
tenga que buscar dónde termina el precio.
Pero entre ellos se dejan fluir. Ver la regla en @media print. */
.hoja--anexo { margin-top: 20px; }
/* En pantalla las hojas se ven una debajo de la otra, así que la segunda
hoja del detalle necesita decir que viene de la anterior. */
.hoja__continua {
font-size: var(--fs-aux);
color: var(--gris-claro);
text-align: left;
margin: 3mm 0 0;
}
/* El título de un anexo es la «sección» de la propuesta: el escalón más
alto de la jerarquía dentro del cuerpo. Va con `.hoja` adelante para
ganarle al reseteo de títulos de arriba, que por llevar la etiqueta
pesa más que una clase sola. */
.hoja .hoja__titulo {
font-size: var(--fs-seccion);
font-weight: 700;
color: var(--azul-marino);
line-height: 1.2;
margin: 0 0 3.2mm;
padding-bottom: 1.6mm;
border-bottom: 1.5pt solid var(--azul-inst);
}
/* La garantía se enmarca en verde, que en este juego de colores es lo
que respalda, y no en el ámbar de lo que condiciona. */
.hoja--garantia .hoja__cuerpo {
padding: 4mm 5mm;
background: var(--verde-fondo);
border-left: 1.5pt solid var(--verde-borde);
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.hoja--garantia h2 {
font-size: var(--fs-seccion);
font-weight: 700;
color: var(--azul-marino);
margin: 0 0 3mm;
}
.hoja--garantia h3 {
font-size: var(--fs-subsub);
font-weight: 700;
color: var(--azul-marino);
margin: 3mm 0 1.2mm;
}
.hoja--garantia p:last-child { margin-bottom: 0; }
.hoja--garantia b { color: var(--azul-marino); }
/* --------------------------------------------------------------- viñetas
Por etiqueta y no por clase: las listas las escribe el operador —en la
descripción de una marca, en la garantía— y no va a acordarse de poner
una clase. La clase se acepta igual, por si alguna vez la usa. */
.hoja ul, .hoja ul.vinetas { margin: 0 0 2.5mm; padding: 0; list-style: none; }
.hoja ul > li {
position: relative;
padding-left: 6mm;
margin-bottom: 1.6mm;
text-align: justify;
break-inside: avoid;
}
.hoja ul > li::before {
content: "";
position: absolute;
left: 2.2mm;
top: 1.6mm;
width: 1.5mm;
height: 1.5mm;
background: var(--azul-inst);
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.hoja ul ul { margin: 1.2mm 0 0; }
.hoja ul ul > li { padding-left: 5mm; }
.hoja ul ul > li::before {
content: "\2013";
background: none;
width: auto;
height: auto;
left: 1mm;
top: 0;
color: var(--azul-inst);
}
/* ------------------------------------------------------------------ cita */
.hoja blockquote, .hoja .cita {
font-size: var(--fs-cita);
font-style: italic;
color: var(--azul-marino);
text-align: center;
line-height: 1.3;
margin: 5mm auto;
max-width: 155mm;
}
/* ---------------------------------------------------------- fichas de marca */
.anexo-marca {
display: grid;
grid-template-columns: 34mm minmax(0, 1fr);
gap: 5mm;
align-items: start;
padding: 4mm 0;
border-bottom: 0.5pt solid var(--borde-int);
}
.anexo-marca:last-child { border-bottom: none; }
.anexo-marca__logo img { max-width: 100%; max-height: 18mm; object-fit: contain; }
.anexo-marca__texto h3 {
font-size: var(--fs-subtitulo);
font-weight: 700;
color: var(--azul-inst);
margin: 0 0 1.8mm;
}
.anexo-marca__texto p:last-child { margin-bottom: 0; }
/* Una foto metida en el HTML que escribe el operador nunca mide más que
media hoja. La descripción de una marca se pega muchas veces desde una
página web, con la foto al 100 % del ancho: la del stand de TOSOT, que es
vertical (1024 × 1536), medía 22 cm de alto dentro de la columna de texto.
Una foto no se parte, así que esa ficha no entraba en ninguna hoja y seis
propuestas imprimían una página sin cabecera ni pie. `contain` conserva la
proporción dentro del tope en vez de estirarla; el ancho que eligió el
operador se respeta siempre que la foto no pase del tope. */
.anexo-marca__texto img,
.prop__parrafo img,
.prop__destacado img,
.prop__bajada img,
.hoja--garantia img {
max-width: 100%;
max-height: 110mm;
object-fit: contain;
object-position: left top;
}
/* Sin logo la ficha usa el ancho completo: una columna vacía de 34 mm
dejaría el texto arrancando en el medio de la hoja sin razón. */
.anexo-marca:not(:has(.anexo-marca__logo)) { grid-template-columns: minmax(0, 1fr); }
/* Dos por fila y no las que entren: son fotos de trabajo terminado, y a
tres por fila un equipo instalado en la pared se ve del tamaño de un
sello. La foto es el argumento de venta; si no se distingue, sobra. */
.anexo-galeria {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5mm;
}
.anexo-galeria figure { margin: 0; }
.anexo-galeria img {
width: 100%;
height: 62mm;
object-fit: cover;
border: 0.75pt solid var(--borde-ext);
display: block;
}
/* En una pantalla angosta dos columnas dejan las fotos ilegibles: ahí sí
conviene una sola. En papel el ancho es siempre el mismo, así que esta
regla no afecta al PDF. */
@media screen and (max-width: 560px) {
.anexo-galeria { grid-template-columns: minmax(0, 1fr); }
}
.anexo-galeria figcaption {
font-size: var(--fs-caption);
color: var(--gris-claro);
margin-top: 1.2mm;
line-height: 1.25;
}
/* ------------------------------------------------------ preguntas frecuentes */
.anexo-faq { margin-bottom: 4mm; }
.anexo-faq:last-child { margin-bottom: 0; }
.anexo-faq h3 {
font-size: var(--fs-caption);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--azul-inst);
margin: 0 0 2.5mm;
}
.anexo-faq__par { margin-bottom: 3mm; }
.anexo-faq__p {
font-size: var(--fs-subsub);
font-weight: 700;
color: var(--azul-marino);
margin-bottom: 1mm;
}
.anexo-faq__r { text-align: justify; }
/* -------------------------------------------- pantallas de contenido de venta */
.ficha-marca {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.ficha-marca__logo { display: flex; flex-direction: column; gap: 10px; }
.ficha-marca__logo img { max-width: 100%; max-height: 80px; object-fit: contain; align-self: flex-start; }
.ficha-marca__sinlogo {
display: grid;
place-items: center;
height: 80px;
border: 1px dashed var(--linea-fuerte);
border-radius: var(--r);
font-size: 11px;
color: var(--tinta-suave);
}
.casilla {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--tinta-media);
cursor: pointer;
}
.rejilla-imagenes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 18px;
}
.tarjeta-imagen { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-imagen--apagada { opacity: 0.5; }
.tarjeta-imagen img {
width: 100%;
height: 140px;
object-fit: cover;
border: 1px solid var(--linea);
border-radius: var(--r);
display: block;
}
.tarjeta-imagen figcaption { font-size: 11.5px; line-height: 1.45; }
.tarjeta-imagen figcaption .sub { display: block; font-size: 10.5px; color: var(--tinta-media); }
/* Un equipo que la lista trae y el catálogo no tiene. Se destaca porque es
la única fila que, confirmada sin mirar, no hace nada. */
.tag--nuevo {
background: var(--frio);
color: #fff;
border-color: var(--frio);
letter-spacing: .06em;
}
.lista-decisiones { margin: 0; padding-left: 18px; color: var(--tinta-media); }
.lista-decisiones li { margin-bottom: 5px; }
.lista-decisiones li:last-child { margin-bottom: 0; }
/* La fórmula del precio, escrita con los porcentajes que están cargados.
Monoespaciada porque son cuentas, no prosa. */
.formula {
background: var(--plomo);
border: 1px solid var(--linea);
border-radius: 3px;
padding: 12px 14px;
font-family: var(--codigo, ui-monospace, "Cascadia Code", Consolas, monospace);
font-size: 11.5px;
line-height: 1.7;
color: var(--tinta-media);
}
.formula b { color: var(--tinta); }
.formula .pista { font-family: inherit; }
/* Bloque al que se acaba de llegar por un enlace con ancla: un borde
marcado, para no tener que buscar en una página de veinte fichas. */
.bloque--destacado { border-color: var(--frio); box-shadow: 0 0 0 3px var(--frio-claro); }
/* Edición en el lugar dentro de una fila de tabla. */
.fila-editar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fila-editar input[type="text"], .fila-editar input:not([type]) { min-width: 160px; }
/* Selección de anexos: tres columnas de casillas, una por clase. */
.rejilla-anexos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
align-items: start;
}
.anexo-opcion {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 5px 0;
font-size: 12px;
line-height: 1.35;
cursor: pointer;
border-bottom: 1px solid var(--linea);
}
.anexo-opcion:last-child { border-bottom: none; }
.anexo-opcion input { margin-top: 2px; flex: none; }
.anexo-opcion .sub { display: block; font-size: 10.5px; color: var(--tinta-media); margin-top: 2px; }
.anexo-opcion--foto img {
width: 44px;
height: 32px;
object-fit: cover;
border: 1px solid var(--linea);
border-radius: 2px;
flex: none;
}
@media screen and (max-width: 720px) {
.ficha-marca, .anexo-marca { grid-template-columns: minmax(0, 1fr); }
}
/* La hoja del PDF. El mismo tamaño y márgenes que usa el navegador al
imprimir, para que el archivo generado y lo que se ve en pantalla al
dar Imprimir sean el mismo documento. */
/* ------------------------------------------- hoja de propuesta comercial */
/* Los bloques del motor de propuestas. La jerarquía es lo que separa una
propuesta de una lista de párrafos: la etiqueta anuncia, el titular
pesa, la bajada explica, y los tres destacados —argumento, beneficio,
diferencial— salen del cuerpo del texto para que se lean incluso al
hojear. Las medidas van en pt como el resto del documento. */
.hoja .prop__etiqueta {
font-size: var(--fs-antetitulo);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--azul-inst);
margin: 0 0 2mm;
}
.hoja .prop__titular {
font-size: var(--fs-portada);
font-weight: 700;
line-height: 1.15;
color: var(--azul-marino);
margin: 0 0 3mm;
}
.hoja .prop__bajada {
font-size: var(--fs-bajada);
line-height: 1.4;
color: var(--gris-texto);
padding-bottom: 4mm;
margin-bottom: 5mm;
border-bottom: 1pt solid var(--borde-ext);
}
/* El rótulo de cada bloque en versalitas y chico: dice de qué habla el
párrafo sin competir con el párrafo. Sin él, seis bloques seguidos son
una pared de texto. */
.hoja .prop__rotulo {
font-size: var(--fs-caption);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--azul-inst);
margin-bottom: 1mm;
}
.hoja .prop__parrafo { margin-bottom: 4.5mm; }
.hoja .prop__parrafo p:last-child,
.hoja .prop__destacado p:last-child { margin-bottom: 0; }
/* El destacado no lleva color de fondo a propósito: la portada ya enseñó
que una capa pintada de lado a lado tarda en salir en el PDF. Un filete
grueso a la izquierda logra lo mismo y se dibuja solo. */
.hoja .prop__destacado {
padding: 3mm 0 3mm 5mm;
margin-bottom: 4.5mm;
border-left: 2.5pt solid var(--azul-inst);
}
/* Cuando se ve en pantalla, la hoja está en px y no en mm: las mismas
proporciones, escritas para el monitor. */
@media screen {
.hoja .prop__bajada { padding-bottom: 12px; margin-bottom: 16px; }
.hoja .prop__parrafo, .hoja .prop__destacado { margin-bottom: 14px; }
.hoja .prop__destacado { padding: 8px 0 8px 15px; }
.hoja .prop__etiqueta { margin-bottom: 6px; }
.hoja .prop__titular { margin-bottom: 9px; }
}
/* --------------------------------- el segmento, en la pantalla de edición */
/* No es un campo: es el resultado de mirar al cliente. Se dibuja como un
dato en reposo y no como una casilla, para que nadie intente escribirlo. */
.segmento {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
padding: 6px 9px;
background: var(--superficie-2);
border: 1px solid var(--linea);
border-radius: 2px;
color: var(--tinta);
}
/* ------------------------------------------------------------- pestañas */
.pestanas {
display: flex;
gap: 4px;
margin-bottom: 12px;
border-bottom: 1px solid var(--linea-fuerte);
}
.pestanas__uno {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
font-size: 12px;
color: var(--tinta-media);
text-decoration: none;
border: 1px solid transparent;
border-bottom: none;
border-radius: var(--r) var(--r) 0 0;
margin-bottom: -1px;
}
.pestanas__uno:hover { color: var(--frio); }
.pestanas__uno--activa {
background: var(--superficie);
border-color: var(--linea-fuerte);
color: var(--tinta);
font-weight: 600;
}
.pestanas__cuenta {
font-size: 10.5px;
color: var(--tinta-suave);
font-variant-numeric: tabular-nums;
}
@page {
size: letter;
/* Sin margen acá: los 10 mm de arriba y abajo y los 15 mm de los
costados los pone `.hoja` como relleno, más abajo.
La diferencia importa por la portada. Con el margen en @page, el
navegador recorta todo lo que se salga del área útil —comprobado
leyendo el PDF: el recorte empezaba a 10,05 mm del borde—, así que
una foto a sangre era imposible. Con el margen en la hoja, el área
pintable es el papel entero y la portada puede sacarse el relleno
para que la foto llegue al filo.
La otra salida —`@page portada { margin: 0 }`, una página con
nombre— parecía la del manual y no sirve: cambia a cuánto equivale
`100vh` en *todo* el documento, y `100vh` es exactamente lo que
mantiene la cabecera y el pie en su lugar en el resto de las hojas.
Se probó: las hojas normales pasaban a ocupar dos páginas. */
margin: 0;
}
@media print {
/* El armazón de ClimIA no sale en el papel: el PDF se genera
imprimiendo la página, y lo único que tiene que quedar es la hoja. */
.lateral, .lateral__velo, .lateral__plegar, .movil, .sin-imprimir, .aviso, .notas { display: none !important; }
.app { display: block; }
/* Y el lienzo vuelve a ser claro. Con `color-scheme: dark` en :root el
navegador pinta el fondo de la página de gris oscuro antes que la hoja
blanca; no se ve, pero el PDF del cliente no tiene por qué llevar una
capa que no es suya. */
:root { color-scheme: light; }
/* Una fila partida entre dos hojas se lee mal y desalinea los precios. */
tr, .hoja__totales, .hoja__pie { page-break-inside: avoid; }
/*
* Cabecera arriba, pie abajo, y sólo el cuerpo se mueve.
*
* La hoja se estira hasta el alto exacto de la página con `100vh`. Que
* sea `vh` y no un número de píxeles calculado en JavaScript es lo que
* hace que funcione: al imprimir, `100vh` es —por definición— el alto
* del área imprimible que el propio navegador está usando, mientras que
* cualquier medida tomada en pantalla es una estimación que puede
* pasarse por uno o dos píxeles. Y pasarse por un píxel no se paga con
* un píxel: la hoja no entra en la página, se parte, y sale una página
* de más que la numeración no contaba. Con `100vh` no hay nada que
* estimar. (Probado imprimiendo de verdad: `min-height: 100vh` da una
* página por hoja, exacta.)
*
* Con la hoja del alto de la página, el pie pegado abajo con
* `position: absolute` cae en el borde físico inferior y la cabecera,
* que es lo primero del flujo, en el superior. Los dos quedan donde
* corresponde sin depender del largo del contenido, que es lo único que
* los movía antes.
*
* Que el cuerpo entre en el hueco que queda lo garantiza
* `public/impresion.js`, que mide y pasa lo que sobra a una hoja nueva
* —con copia de esta misma cabecera y de este mismo pie, para que cada
* hoja conserve su formato—.
*/
.hoja {
min-height: 100vh;
/* Éste es el margen de la propuesta: 10 mm arriba y abajo, 15 a los
costados. Vive acá y no en @page para que la portada pueda
renunciar a él. Medido sobre el PDF: la cabecera arranca a 10,05 mm
del borde de arriba y el pie termina a 9,95 mm del de abajo. */
padding: 10mm 15mm;
padding-bottom: calc(10mm + var(--hoja-pie, 0px));
}
.hoja__plantilla--pie { left: 15mm; right: 15mm; bottom: 10mm; }
/* La portada es la única hoja a sangre: la foto tiene que llegar al
filo del papel, así que renuncia al relleno y cada bloque de adentro
se pone el suyo. */
.hoja--caratula { padding: 0; }
/* Una hoja, una página. Antes se dejaba que dos anexos cortos
compartieran página para no gastar papel; desde que cada hoja lleva su
propia cabecera, su pie y su «2 de 6 páginas», compartir página haría
que esa numeración mienta: dirían ser dos hojas y saldrían impresas en
una. Vale más el papel que un documento que se contradice. */
.hoja + .hoja { page-break-before: always; margin-top: 0; }
.hoja--anexo { margin-top: 0; }
/* Un título solo al pie de la hoja, con su contenido en la siguiente, es
el precio de dejarlos fluir. Se evita. */
.hoja__titulo { page-break-after: avoid; }
/* La ficha de una marca **no** lleva `page-break-inside: avoid`, aunque
una pregunta o una foto sí. Con descripciones largas —las de acá miden
casi una hoja— pedirle al navegador que no la parta lo obliga a
empujarla entera a la hoja siguiente y a dejar media hoja en blanco
atrás. Se contaban dos páginas de más por cotización, y encima el
lector veía el hueco. Cada marca ya arranca en su hoja; si su texto no
entra, que siga en la de al lado es mejor que un salto en el medio. */
.anexo-faq__par, .anexo-galeria figure { page-break-inside: avoid; }
.anexo-faq { page-break-inside: auto; }
thead { display: table-header-group; }
body { background: #fff; }
.contenido { padding: 0; max-width: none; }
.hoja { border: none; border-radius: 0; max-width: none; }
a { text-decoration: none; color: inherit; }
/* El PDF se genera imprimiendo esta misma página, así que todo lo que se
quite acá se pierde también en el archivo. Antes había dos reglas que
borraban el encabezado azul y el rayado de la tabla «porque gastan
tinta en papel»: el efecto real era que la cotización en pantalla
tenía formato y el PDF que recibía el cliente salía en blanco y negro.
La propuesta comercial es lo último que conviene despintar.
`print-color-adjust: exact` es imprescindible: sin él el navegador
descarta los fondos al imprimir y no alcanza con volver a declararlos. */
.hoja, .hoja * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.sube { color: var(--calor); font-weight: 600; }
.baja { color: var(--frio); font-weight: 600; }
.quieto{ color: var(--tinta-suave); }
/* --------------------------------------------------------------- avisos */
.aviso {
display: flex;
gap: 10px;
padding: 11px 14px;
border-radius: var(--r-boton);
border: 1px solid;
margin-bottom: 16px;
font-family: var(--prosa);
}
.aviso b { font-weight: 700; }
.aviso--ok { background: var(--ok-claro); border-color: var(--ok-borde); color: var(--ok); }
.aviso--error { background: var(--alerta-claro); border-color: var(--alerta-borde); color: var(--alerta); }
.aviso--atencion{ background: var(--calor-claro); border-color: var(--calor-borde); color: var(--calor); }
.aviso--info { background: var(--frio-claro); border-color: var(--frio-borde); color: var(--tinta); }
/* ------------------------------------------------------------ formularios */
.campos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px 18px;
}
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* `hidden` tiene que ganarle al `display` de acá arriba. El navegador
esconde con `[hidden] { display: none }`, que pierde por especificidad
contra `.campo`: sin esta regla, los campos que el formulario de
clientes esconde —razón social y NIT cuando el cliente es una persona—
se quedan a la vista. */
.campo[hidden], .campos[hidden], .pista[hidden] { display: none; }
.campo--ancho { grid-column: 1 / -1; }
/* Dos campos por renglón, a mitades. Distinto de dejar que la retícula
acomode sola: acá se quiere exactamente dos, aunque entren tres, porque
los que se emparejan son pares —los dos textos de la cotización, las
dos formas de agregar un ítem— y verlos del mismo ancho es lo que dice
que son alternativas o equivalentes. */
.campos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Tres columnas fijas y no auto-fit: en esta fila —razón social, NIT y
tipo de contacto— los dos primeros desaparecen cuando el cliente es una
persona, y con auto-fit el que queda se estiraba de lado a lado. Con
las columnas fijas conserva su ancho y la fila se lee igual en los dos
casos. */
.campos--fiscal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media screen and (max-width: 720px) {
.campos--fiscal { grid-template-columns: minmax(0, 1fr); }
}
/* Edición masiva (varios productos a la vez): cada campo se activa con su
propia casilla y arranca apagado. Al revés de lo habitual —donde el
campo ya trae un valor y se lo puede borrar— acá el silencio es la
opción seria: sin marcar, ese dato de cada producto no se toca. */
.campo-lote__casilla { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.campo--lote select:disabled,
.campo--lote textarea:disabled,
.campo--lote input:not([type="checkbox"]):disabled {
opacity: 0.45;
background: var(--superficie-2);
}
/* El precio y el botón de agregar: el precio se lleva el ancho de un
campo normal y el botón sólo lo que necesita. */
.campos--agregar { grid-template-columns: 210px auto; justify-content: start; }
.campos--agregar .btn { align-self: start; }
@media screen and (max-width: 720px) {
.campos--dos { grid-template-columns: minmax(0, 1fr); }
}
/* El bloque Cliente de la cotización: columnas un 40 % más angostas
—126 px de mínimo en vez de 210— para que el nombre de la propuesta
entre en el mismo renglón que empresa, contacto, teléfono y correo.
Se puede porque los cuatro son datos cortos. El nombre de la propuesta
sí es una frase, así que se queda con dos columnas. */
.campos--cliente { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
.campos--cliente .campo--doble { grid-column: span 2; }
@media screen and (max-width: 900px) {
.campos--cliente .campo--doble { grid-column: 1 / -1; }
}
/* Descripción comercial y estado en un solo renglón: la descripción se
queda con el ancho que sobra y el estado con lo que necesita un select
de tres valores. Se apilan cuando la ventana no da. */
.campos--desc { grid-template-columns: minmax(0, 1fr) 230px; }
@media screen and (max-width: 720px) { .campos--desc { grid-template-columns: minmax(0, 1fr); } }
/* Los marcadores disponibles, abajo del campo que los usa. */
.marcadores-desc { margin-top: 12px; }
.marcadores-desc__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 8px; }
.chip {
font-family: var(--mono);
font-size: 10.5px;
padding: 2px 7px;
color: var(--frio);
background: var(--frio-claro);
border: 1px solid var(--frio-borde);
border-radius: 2px;
cursor: pointer;
}
.chip:hover { background: var(--frio); color: var(--climia-bg-950); border-color: var(--frio); }
.texto-resuelto { font-family: var(--prosa); color: var(--tinta); }
label, .campo > span:first-child {
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tinta-suave);
}
.pista {
font-size: 11px;
color: var(--tinta-suave);
font-family: var(--prosa);
letter-spacing: 0;
text-transform: none;
}
input, select, textarea {
font: inherit;
font-variant-numeric: tabular-nums;
color: var(--tinta);
background: var(--climia-bg-900);
border: 1px solid var(--linea-fuerte);
border-radius: var(--r);
padding: 6px 9px;
width: 100%;
min-width: 0;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
input::placeholder, textarea::placeholder { color: var(--tinta-apagada); }
input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { border-color: var(--climia-line-600); }
textarea { font-family: var(--prosa); resize: vertical; min-height: 62px; }
/* El foco: borde cyan y un halo que no mueve nada de lugar. Es el único
control que brilla, y sólo mientras se escribe en él. */
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--frio);
box-shadow: 0 0 0 3px rgba(18, 200, 255, 0.14);
}
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] { color: var(--tinta-suave); background: var(--superficie); cursor: default; }
/* Un campo con error dice que lo tiene con el borde y con el texto: el
rojo solo no alcanza para quien no distingue colores. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alerta); }
select option { background: var(--climia-surface-850); color: var(--tinta); }
input[type="checkbox"] { width: auto; }
/* Impuesto y Moneda: dos opciones que se excluyen entre sí, y un
desplegable las hace parecer una lista larga cuando son sólo dos. El
radio nativo con acento ámbar —el mismo tono de "atención" que ya usa
el resto del documento— se lee de un vistazo sin abrir nada. */
.radios {
display: flex;
align-items: center;
gap: 22px;
padding-top: 5px;
min-height: 30px;
}
.radio,
.opcion-check {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--prosa);
font-size: 13px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--tinta);
cursor: pointer;
}
.radio input[type="radio"],
.opcion-check input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--ambar-borde);
cursor: pointer;
}
.radio input:disabled,
.opcion-check input:disabled {
cursor: default;
}
.opcion-check { padding-top: 5px; }
.linea-campos { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.linea-campos .campo { flex: 1 1 150px; }
.acciones {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.acciones--pegadas { margin-top: 0; }
/* --------------------------------------------------------------- botones */
.btn {
display: inline-block;
font: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 6px 14px;
border-radius: var(--r-boton);
border: 1px solid var(--linea-fuerte);
background: var(--superficie-2);
color: var(--tinta);
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.btn:hover { background: var(--superficie-3); border-color: var(--climia-line-600); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* La acción principal: degradé azul de marca, borde cyan y el único
resplandor fijo de una pantalla. */
.btn--principal {
background: var(--climia-gradient-accion);
border-color: var(--frio);
color: var(--sobre-accion);
font-weight: 600;
box-shadow: 0 0 16px rgba(18, 200, 255, 0.18);
}
.btn--principal:hover { background: linear-gradient(180deg, #129af0, #0a74bd); border-color: var(--climia-cyan-300); box-shadow: var(--climia-glow-primary); }
.btn--peligro { color: var(--alerta); border-color: var(--alerta-borde); }
.btn--peligro:hover { background: var(--alerta-claro); border-color: var(--alerta); }
.btn--chico { padding: 3px 8px; font-size: 11px; }
.enlace-sobrio { color: var(--tinta-media); }
/* Un formulario que se abre con un botón, en vez de ocupar la pantalla
mientras no se lo usa. El es el botón. */
.desplegar > summary {
list-style: none;
cursor: pointer;
display: inline-block;
font: inherit;
letter-spacing: 0.04em;
padding: 6px 14px;
border-radius: 2px;
border: 1px solid var(--linea-fuerte);
background: var(--superficie);
color: var(--tinta);
}
.desplegar > summary::-webkit-details-marker { display: none; }
.desplegar > summary:hover { background: var(--superficie-2); border-color: var(--tinta-suave); }
.desplegar[open] > summary { background: var(--superficie-2); }
.desplegar__cuerpo { margin-top: 16px; }
/* Los saltos de línea de un guion son parte del guion. */
.texto-guion { white-space: pre-wrap; }
/* ------------------------------------------------------------- historial */
.barra-var {
display: inline-block;
height: 3px;
vertical-align: middle;
border-radius: 2px;
min-width: 2px;
}
.barra-var--sube { background: var(--calor); }
.barra-var--baja { background: var(--frio); }
/* --------------------------------------------------- selector de columnas */
.ojo { position: relative; }
.ojo summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
font-size: 11px;
border: 1px solid var(--linea-fuerte);
border-radius: 2px;
background: var(--superficie);
color: var(--tinta-media);
}
.ojo summary::-webkit-details-marker { display: none; }
.ojo summary:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.ojo[open] summary { background: var(--superficie-2); color: var(--tinta); }
.ojo__menu {
position: absolute;
right: 0;
top: calc(100% + 6px);
z-index: 20;
min-width: 210px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 7px;
background: var(--superficie);
border: 1px solid var(--linea-fuerte);
border-radius: var(--r);
box-shadow: 0 6px 18px var(--sombra);
}
.ojo__menu label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
letter-spacing: 0;
text-transform: none;
color: var(--tinta);
cursor: pointer;
white-space: nowrap;
}
.ojo__cabeza {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 8px;
margin-bottom: 2px;
border-bottom: 1px solid var(--linea);
}
.ojo__ayuda { font-size: 10.5px; color: var(--tinta-suave); }
/* Cada columna es una fila arrastrable: el tirador a la izquierda, la
casilla de visibilidad y, para quien no quiera arrastrar, dos flechas.
El arrastre es el camino rápido; las flechas son el que siempre está. */
.ojo__fila {
display: flex;
align-items: center;
gap: 6px;
padding: 1px 2px;
border: 1px solid transparent;
border-radius: 2px;
background: var(--superficie);
}
.ojo__fila label { flex: 1; }
.ojo__tirador {
cursor: grab;
color: var(--tinta-suave);
font-size: 11px;
line-height: 1;
padding: 3px 2px;
user-select: none;
}
.ojo__fila:hover { background: var(--superficie-2); }
.ojo__fila--arrastrando { opacity: 0.4; }
.ojo__fila--destino { border-color: var(--frio); }
.ojo__mover {
border: none;
background: none;
cursor: pointer;
color: var(--tinta-suave);
font-size: 10px;
line-height: 1;
padding: 3px 2px;
font-family: var(--mono);
}
.ojo__mover:hover:not(:disabled) { color: var(--tinta); }
.ojo__mover:disabled { opacity: 0.25; cursor: default; }
/* ------------------------------------------------------ selección de filas */
th.sel, td.sel {
width: 30px;
padding-left: 12px;
padding-right: 0;
text-align: center;
}
td.sel { vertical-align: middle; }
tr.fila--elegida td { background: var(--frio-claro); }
/* Barra de acciones sobre la selección. Aparece recién cuando hay algo
elegido: mientras no lo haya, no ocupa lugar ni promete nada. */
.barra-seleccion {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 8px 16px;
background: var(--frio-claro);
border-bottom: 1px solid var(--linea);
}
.barra-seleccion[hidden] { display: none; }
.barra-seleccion form { display: inline; }
.barra-seleccion__conteo { font-size: 12px; color: var(--tinta); }
.barra-seleccion .btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.barra-seleccion .pista { margin-left: auto; }
/* ------------------------------------------------------------ clientes */
/* El permiso para escribirle. Tres estados y tres colores, porque la
diferencia entre ellos decide si se manda un mensaje o no: verde es
que sí, gris es que todavía no lo dio, rojo es que pidió que no. */
.tag--con_permiso { color: var(--ok); background: var(--ok-claro); border-color: var(--ok-borde); }
.tag--sin_permiso { color: var(--tinta-media); background: var(--superficie-2); border-color: var(--linea-fuerte); }
.tag--dado_de_baja { color: var(--alerta); background: var(--alerta-claro); border-color: var(--alerta-borde); }
/* Los datos del cliente, en pares rótulo/valor. Rejilla y no tabla: son
pares sueltos, no filas comparables entre sí. */
.ficha {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px 20px;
margin: 0;
}
.ficha dt {
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tinta-suave);
}
.ficha dd { margin: 2px 0 0; color: var(--tinta); }
/* Cada persona es un bloque con su propio borde: en una empresa con
cuatro contactos, una lista corrida no deja ver dónde termina uno y
empieza el siguiente. */
.persona {
padding: 12px 0;
border-top: 1px solid var(--linea);
}
.persona:first-child { border-top: none; padding-top: 0; }
.persona__cabeza {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.persona__cabeza > div {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.telefonos { list-style: none; margin: 8px 0 0; padding: 0; }
.telefonos li {
display: flex;
align-items: center;
gap: 7px;
padding: 3px 0;
flex-wrap: wrap;
}
.telefonos__numero { font-variant-numeric: tabular-nums; color: var(--tinta); }
/* Editar un contacto es lo raro; verlo es lo común. Los formularios van
plegados para que la ficha se lea de un vistazo y no como una pila de
casillas. */
.persona__mas summary {
list-style: none;
cursor: pointer;
display: inline-block;
margin-top: 6px;
font-size: 11px;
color: var(--tinta-suave);
border-bottom: 1px dashed var(--linea-fuerte);
}
.persona__mas summary::-webkit-details-marker { display: none; }
.persona__mas summary:hover { color: var(--frio); border-bottom-color: var(--frio); }
.persona__menu {
margin-top: 10px;
padding: 12px;
background: var(--superficie-2);
border: 1px solid var(--linea);
border-radius: var(--r);
}
/* ------------------------------- el cliente, dentro de la cotización */
.cliente-elegido {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 10px 12px;
background: var(--frio-claro);
border: 1px solid var(--frio-borde);
border-radius: var(--r);
}
.cliente-elegido__quien { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cliente-elegido__nombre { font-weight: 600; color: var(--tinta); }
.buscador-cliente { position: relative; }
/* El botón de alta se queda del ancho de su texto. `.linea-campos .campo`
reparte el sobrante entre todos, y con dos campos el botón se estiraba
media pantalla y parecía otra casilla de texto. */
.buscador-cliente .linea-campos .campo:last-child { flex: 0 0 auto; }
/* Los resultados se superponen al formulario en vez de empujarlo: la
cotización de abajo tiene datos sin guardar, y que el bloque entero
salte mientras se escribe hace perder de vista lo que se estaba
haciendo. */
.buscador-cliente__lista {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
z-index: 20;
max-height: 280px;
overflow-y: auto;
background: var(--superficie);
border: 1px solid var(--linea-fuerte);
border-radius: var(--r);
box-shadow: 0 6px 18px var(--sombra);
}
.buscador-cliente__lista[hidden] { display: none; }
.buscador-cliente__item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 7px 10px;
border: none;
border-bottom: 1px solid var(--linea);
background: none;
font: inherit;
text-align: left;
cursor: pointer;
color: var(--tinta);
}
.buscador-cliente__item:last-child { border-bottom: none; }
.buscador-cliente__item:hover,
.buscador-cliente__item:focus { background: var(--frio-claro); outline: none; }
.buscador-cliente__dato { font-size: 11px; color: var(--tinta-suave); }
.buscador-cliente__vacio { padding: 10px; font-size: 12px; color: var(--tinta-suave); }
.filtros {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: flex-end;
padding: 12px 16px;
background: var(--plomo);
border: 1px solid var(--linea-fuerte);
border-radius: var(--r);
margin-bottom: 12px;
}
/* La barra creció a ocho controles —nueve en Costos, que suma Proveedor— y
antes cada uno se reservaba 168px fijos: WiFi terminaba solo en el
renglón de abajo, y una barra de filtros partida en dos se lee como si
fueran dos barras distintas. Ahora todos crecen y se encogen juntos
sobre una base chica, así que entran en una línea y se reparten el
sobrante de la pantalla en vez de dejarlo al final. Lo que se recorta es
el rótulo, no el control: `.multi__valor` ya corta con puntos
suspensivos y el menú desplegado conserva su ancho. */
.filtros .campo { flex: 1 1 118px; }
/* El buscador se lleva el doble del espacio sobrante: es el único donde se
escribe, y los demás sólo tienen que mostrar lo elegido. */
.filtros .campo--buscar { flex: 2 1 160px; }
/* Los binarios no necesitan ni esa base: «Con WiFi» entra holgado en menos,
y lo que se ahorra acá lo ganan los otros. */
.filtros .campo--angosto { flex: 0 1 104px; }
/* Filtro de varios valores.
Un con casillas adentro, y no un