/* =====================================================================
LA TIPOGRAFÍA, SERVIDA DESDE AQUÍ
=====================================================================
Antes venía de Google Fonts. Dos razones para traerla:
1. El sistema se usa desde la red de la oficina. Si se cae internet
—que pasa— la letra se desmoronaba a media sesión y todo saltaba
a la fuente del sistema, con otros anchos y otros renglones.
2. Es una petición menos a un servidor ajeno en cada carga, y una
cosa menos que Google sepa de quién entra al sistema.
Es la fuente VARIABLE de Inter: un solo archivo cubre del peso 400 al
700, así que pesa 136 KB en total en vez de los ~530 KB que serían
cuatro archivos sueltos. Por eso el `font-weight` del @font-face es un
rango y no un número.
------------------------------------------------------------------ */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/inter-latin.woff2') format('woff2');
/* El español cabe entero aquí; el resto solo se descarga si hace falta. */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==========================================================
style.css — SEISA Eléctrica
Hoja de estilos única, pensada primero para celular (la
mayoría va a abrir esto desde el navegador del teléfono en
la obra) y que también se ve bien en escritorio.
========================================================== */
/* ==========================================================
PALETAS — claro y oscuro
==========================================================
Todo el color del sistema pasa por estas variables. Una regla que
escriba un #hex directo se rompe al cambiar de tema, así que si hace
falta un color nuevo, se agrega aquí y se usa con var().
El tema lo elige cada persona en Sistema > Configuración y se guarda
en `responsables.tema`. `header.php` lo escribe en el ANTES de
pintar nada: si se aplicara con JavaScript, la página cargaría en
blanco un instante y luego se oscurecería — el parpadeo que se ve
especialmente mal justo en modo oscuro.
`auto` no fija nada y deja que mande el sistema operativo, vía
prefers-color-scheme. Es lo que la mayoría espera hoy.
========================================================== */
:root {
--azul-oscuro: #1b2733; /* header / menú */
--azul-medio: #29394a;
/* EL acento del sistema. Es el rojo de la marca de SEISA. Manda en los
botones primarios, el activo del menú y el foco del teclado.
El rojo de ERROR se distingue por TRATAMIENTO, no por tono: los
avisos de error llevan fondo tenue y una barra a la izquierda, cosa
que ningún botón primario tiene. Así se resuelve el choque que
estaba anotado como pendiente desde agosto. */
--acento: #df231d;
--acento-tx: #ffffff; /* texto SOBRE el rojo sólido */
--acento-legible: #a81b14; /* el acento COMO texto, sobre fondo claro */
--acento-suave: rgba(223,35,29,.10);
--amarillo: #f4b400; /* segundo acento: la cifra que manda en una pantalla */
--enlace: #29394a; /* color de los enlaces del contenido */
--fondo: #f5f6f8;
--tarjeta: #ffffff;
--texto: #1f2733;
--texto-suave: #6b7480;
--borde: #dde1e6;
--verde: #2e7d32;
--verde-bg: #e8f5e9;
--rojo: #c62828;
--rojo-solido: #c62828; /* fondo del botón de peligro: oscuro en AMBOS temas */
--rojo-bg: #fdecea;
--gris-bg: #eceff1;
--barra-bg: #e3e7ea; /* canal de la barra de porcentaje */
--grupo-bg: #dde3e9; /* fila de grupo de las tablas agrupables */
--linea-fuerte:#b9c0c7; /* separadores marcados */
/* El radio era 2px, "casi cuadrado", buscando verse utilitario. En la
práctica es lo que más hacía ver el sistema anticuado: las esquinas
duras leen como panel de administración de hace quince años. 6 px en
los controles y 10 en las tarjetas se ve actual sin volverse una app
de celular. (Decisión revisada el 09/09/2026 a petición del dueño.) */
--radio: 6px;
--radio-tarjeta: 10px;
/* Elevación en vez de borde duro: una tarjeta que flota un milímetro
se distingue del fondo sin necesidad de encerrarla en una línea. */
--sombra: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px rgba(16,24,40,.07);
--sombra-alta: 0 2px 4px rgba(16,24,40,.06), 0 8px 20px rgba(16,24,40,.10);
--borde-suave: rgba(16,24,40,.07);
--fila-alt: #f7f8fa; /* zebra de tablas */
/* Tres tintes, tres significados. El porqué está abajo, en ZONAS
CLICABLES: "estás en este renglón", "este renglón va a algún lado"
y "esta celda es la que se va a abrir". */
--fila-lectura: #f1f3f6;
--fila-hover: #e6eefa;
--zona-bg: #d0e2f8;
--zona-acento: var(--acento); /* la barrita del destino */
--zona-borde: rgba(41, 57, 74, .16);
--th-bg: #e4e8ec;
/* Semáforo de constancias y badges de estado. */
--sem-verde-bg: #d9ead3; --sem-verde-tx: #274e13;
--sem-ambar-bg: #fff2cc; --sem-ambar-tx: #7f6000;
--sem-rojo-bg: #f4c7c3; --sem-rojo-tx: #8b1a10;
--sem-gris-bg: #f1f1f1;
/* Campos calculados (el importe de caja chica) y avisos. */
--calculado-bg: #f4f7fb;
--info-bg: #eaf2fb;
--info-borde: #b9d3ee;
--info-tx: #1c3c5e;
/* Entradas de formulario. */
--campo-bg: #ffffff;
/* Tirador para cambiar el ancho de una columna. */
--tirador: #c3cad2; /* al pasar el mouse por el encabezado */
--tirador-activo:#f4b400; /* mientras se arrastra */
}
/* ---------- Tema oscuro ----------
No es "invertir" el tema claro: los fondos son grises azulados —no
negro puro, que cansa la vista y hace que los bordes desaparezcan— y
los colores del semáforo se rehacen con fondos apagados y texto
claro. Un #d9ead3 sobre gris oscuro se vería como un parche que
brilla, y el semáforo es justo lo que hay que poder leer de un
vistazo. */
html[data-tema="oscuro"] {
--acento: #ff5a52;
--acento-tx: #1a0f0e; /* texto SOBRE el rojo sólido */
--acento-legible: #ff8a84; /* el acento COMO texto, sobre fondo oscuro */
--acento-suave: rgba(255,90,82,.14);
--sombra: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.28);
--sombra-alta: 0 2px 6px rgba(0,0,0,.40), 0 10px 26px rgba(0,0,0,.38);
--borde-suave: rgba(255,255,255,.06);
--azul-oscuro: #10161d;
--azul-medio: #1c2836;
--amarillo: #f0b429;
--enlace: #7fb3e8; /* claro: sobre fondo oscuro debe leerse */
--fondo: #151a20;
--tarjeta: #1c222a;
--texto: #e3e7ec;
--texto-suave: #97a1ad;
--borde: #2e3742;
--verde: #7fd18a;
--verde-bg: #1b3222;
--rojo: #ff8a80;
--rojo-solido: #a52520;
--rojo-bg: #3a1f1e;
--gris-bg: #272e37;
--barra-bg: #2b333d;
--grupo-bg: #2d3742;
--linea-fuerte:#3d4854;
--fila-alt: #1f262e;
--fila-lectura: #222a33;
--fila-hover: #2b3949;
--zona-bg: #35485d;
--zona-acento: var(--acento-legible); /* el rojo de marca sobre fondo oscuro da 3.06:1; el legible, 4.12 */
--zona-borde: rgba(255, 255, 255, .16);
--th-bg: #232b35;
--sem-verde-bg: #1e3a26; --sem-verde-tx: #9ad9a5;
--sem-ambar-bg: #3d3218; --sem-ambar-tx: #f0c96a;
--sem-rojo-bg: #43201e; --sem-rojo-tx: #ffa39e;
--sem-gris-bg: #262c34;
--calculado-bg: #1f2831;
--info-bg: #172633;
--info-borde: #2c4a63;
--info-tx: #a8c8e4;
--campo-bg: #232b34;
--tirador: #495563;
--tirador-activo:#f0b429;
}
/* Con el tema en "auto" no se escribe data-tema y manda el sistema
operativo. El :not() evita que esto pise una elección explícita. */
@media (prefers-color-scheme: dark) {
html[data-tema="auto"] {
--acento: #ff5a52;
--acento-tx: #1a0f0e; /* texto SOBRE el rojo sólido */
--acento-legible: #ff8a84; /* el acento COMO texto, sobre fondo oscuro */
--acento-suave: rgba(255,90,82,.14);
--sombra: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.28);
--sombra-alta: 0 2px 6px rgba(0,0,0,.40), 0 10px 26px rgba(0,0,0,.38);
--borde-suave: rgba(255,255,255,.06);
--azul-oscuro: #10161d;
--azul-medio: #1c2836;
--amarillo: #f0b429;
--enlace: #7fb3e8;
--fondo: #151a20;
--tarjeta: #1c222a;
--texto: #e3e7ec;
--texto-suave: #97a1ad;
--borde: #2e3742;
--verde: #7fd18a;
--verde-bg: #1b3222;
--rojo: #ff8a80;
--rojo-solido: #a52520;
--rojo-bg: #3a1f1e;
--gris-bg: #272e37;
--barra-bg: #2b333d;
--grupo-bg: #2d3742;
--linea-fuerte:#3d4854;
--fila-alt: #1f262e;
--fila-lectura: #222a33;
--fila-hover: #2b3949;
--zona-bg: #35485d;
--zona-acento: var(--acento-legible);
--zona-borde: rgba(255, 255, 255, .16);
--th-bg: #232b35;
--sem-verde-bg: #1e3a26; --sem-verde-tx: #9ad9a5;
--sem-ambar-bg: #3d3218; --sem-ambar-tx: #f0c96a;
--sem-rojo-bg: #43201e; --sem-rojo-tx: #ffa39e;
--sem-gris-bg: #262c34;
--calculado-bg: #1f2831;
--info-bg: #172633;
--info-borde: #2c4a63;
--info-tx: #a8c8e4;
--campo-bg: #232b34;
--tirador: #495563;
--tirador-activo:#f0b429;
}
}
* { box-sizing: border-box; }
body {
margin: 0;
/* Inter: dibujada para interfaces, legible a tamaño chico y con cifras
tabulares (los números de una columna quedan alineados aunque
cambien de dígito). Si no carga —sin internet— cae en la fuente del
sistema y nada se rompe. */
font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-feature-settings: "cv05" 1, "tnum" 1;
-webkit-font-smoothing: antialiased;
background: var(--fondo);
color: var(--texto);
font-size: 14px;
line-height: 1.35;
}
a { color: var(--enlace); }
/* ---------- Layout general con sidebar ---------- */
.app { display: flex; align-items: stretch; min-height: 100vh; }
.app-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-cuerpo .contenido { flex: 1; }
/* ---------- Sidebar lateral ---------- */
.sidebar {
background: var(--azul-oscuro);
/* 200px alcanzaban con la fuente del sistema; Inter es un poco más
ancha y partía "Solicitudes de material" en dos renglones. */
width: 216px;
flex: none;
display: flex;
flex-direction: column;
position: sticky; /* el menú no se va al hacer scroll */
top: 0;
height: 100vh;
overflow-y: auto;
}
.sidebar-nav { padding: 0.5rem 0 1rem; flex: 1; }
/* La regla vieja era `display: none`, que no se puede interpolar: el
grupo desaparecía de golpe. Ahora colapsa con altura animada — ver
el bloque "Menú lateral — versión con movimiento" más abajo. */
.sidebar-link {
display: block;
color: #dce3ea;
text-decoration: none;
font-size: 0.85rem;
padding: 0.35rem 0.9rem 0.35rem 1.4rem;
border-left: 3px solid transparent;
}
/* Los links sin grupo (Inicio) no llevan la sangría de los hijos. */
.sidebar-nav > .sidebar-link:first-child { padding-left: 0.9rem; }
.sidebar-link:hover { background: var(--azul-medio); color: #fff; }
.sidebar-link.activo {
background: var(--azul-medio);
color: var(--amarillo);
border-left-color: var(--amarillo);
font-weight: 600;
}
/* Pestañas compartidas (Facturas / Estimaciones, etc.) — mismo
contraste fijo en claro y oscuro, no dependen de --azul-oscuro
(que en oscuro es casi negro y se vuelve ilegible). */
.pestanas { display: flex; gap: 0.3rem; background: var(--gris-bg); border-radius: var(--radio); margin-bottom: 1rem; padding: 0.35rem; }
.pestana { display: inline-block; padding: 0.35rem 0.8rem; border-radius: var(--radio); color: var(--texto-suave); text-decoration: none; font-weight: 400; }
.pestana:hover { background: var(--azul-medio); color: #fff; }
.pestana.activa { background: var(--azul-medio); color: var(--amarillo); font-weight: 700; }
.sidebar-fondo { display: none; }
/* En celular: el sidebar entra desde la izquierda sobre el contenido */
@media (max-width: 900px) {
.app { display: block; }
.sidebar {
position: fixed;
top: 0;
left: 0;
z-index: 40;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.18s ease-out;
}
body.sidebar-abierto .sidebar { transform: translateX(0); }
.sidebar-fondo {
display: block;
position: fixed;
inset: 0;
z-index: 30;
background: rgba(0, 0, 0, 0.45);
}
.sidebar-fondo[hidden] { display: none; }
}
/* ---------- Contenido general ---------- */
.contenido {
/* Sin tope de ancho: las tablas densas usan toda la pantalla. */
max-width: none;
margin: 0;
padding: 0.9rem 1rem 2.5rem;
}
h1 { font-size: 1.15rem; margin: 0 0 0.15rem; font-weight: 700; }
h2 { font-size: 0.98rem; margin: 1.1rem 0 0.4rem; font-weight: 700; }
.subtitulo { color: var(--texto-suave); margin: 0 0 0.8rem; font-size: 0.82rem; }
.piepagina {
text-align: left;
color: var(--texto-suave);
font-size: 0.72rem;
padding: 0.6rem 1rem 1rem;
}
/* ---------- Tarjetas / cajas ---------- */
.tarjeta {
background: var(--tarjeta);
border: 1px solid var(--borde-suave);
border-radius: var(--radio-tarjeta);
box-shadow: var(--sombra);
padding: 0.85rem 1rem;
margin-bottom: 0.8rem;
}
/* ---------- Formularios ---------- */
form.form-simple {
background: var(--tarjeta);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: 1.25rem;
max-width: 480px;
}
label {
display: block;
font-weight: 600;
font-size: 0.78rem;
margin: 0.6rem 0 0.2rem;
}
label:first-child { margin-top: 0; }
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 0.3rem 0.45rem;
border: 1px solid var(--borde);
border-radius: var(--radio);
font-size: 0.82rem;
/* Los controles de formulario NO heredan la tipografía: el navegador
les pone la suya —Arial en Windows— y hay que pedírsela. Sin esta
línea, TODO lo que se teclea en el sistema salía en otra letra que
el resto de la pantalla. Ya estaba parchado suelto en
`.tabla-buscar`; aquí vale para todos.
Que quede claro que esto NO es lo que cortaba el "Buscar por código
o descripción…" de Insumos: medido, ese texto pide 197.6 px en Arial
y 213.2 en Inter, o sea que la letra buena es la MÁS ancha. Lo que
lo cortaba era el ancho de la caja, y eso se arregla abajo. */
font-family: inherit;
background: var(--campo-bg);
color: var(--texto);
}
textarea { resize: vertical; }
.ayuda-campo { color: var(--texto-suave); font-size: 0.8rem; margin-top: 0.2rem; }
/* ---------- Botones ---------- */
.btn {
display: inline-block;
padding: 0.38rem 0.8rem;
border-radius: var(--radio);
border: 1px solid transparent;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
text-align: center;
}
.btn-primario { background: var(--azul-oscuro); color: #fff; }
.btn-primario:hover { background: var(--azul-medio); }
.btn-acento { background: var(--amarillo); color: var(--azul-oscuro); }
/* El texto va con --texto y no con --azul-oscuro: en tema oscuro ese
azul es casi negro y sobre la tarjeta oscura daba 1.14:1 de
contraste — el botón se volvía invisible. */
.btn-secundario { background: var(--tarjeta); color: var(--texto); border-color: var(--borde); }
.btn-peligro { background: var(--rojo-solido); color: #fff; }
.btn-chico { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
/* ---------- Tablas densas (estilo ERP / Opus) ----------
Renglones apretados, rayado de zebra, lineas verticales entre
columnas y encabezado que se queda pegado al hacer scroll. La
idea es poder leer 30-40 renglones sin scrollear. */
.tabla-wrap {
overflow: auto;
max-height: calc(100vh - 190px); /* el scroll vive en la tabla */
border: 1px solid var(--borde);
background: var(--tarjeta);
}
table {
width: 100%;
border-collapse: separate; /* separate: necesario para th pegajoso */
border-spacing: 0;
background: var(--tarjeta);
}
th, td {
text-align: left;
/* 0.22rem apretaba los renglones al punto de que la tabla se leía como
un bloque. 0.32 da aire sin perder la densidad que el oficio pide. */
padding: 0.32rem 0.55rem;
border-bottom: 1px solid var(--borde);
/* Sin línea vertical entre columnas. Una tabla con reja completa se lee
como hoja de cálculo; sin ella, la alineación y el renglón hacen el
trabajo y se lee como producto. (Además el #eceff1 que había era un
color fijo: en tema oscuro no correspondía.) */
font-size: 0.8rem;
white-space: nowrap;
vertical-align: top;
}
th {
position: sticky;
top: 0;
z-index: 2;
background: var(--th-bg);
font-size: 0.68rem;
/* Era 700 y leía como una franja gris pesada encima de cada tabla.
600 con más espaciado entre letras se lee igual de bien y pesa menos. */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
/* El encabezado de tabla: era #4a545e fijo y sobre el fondo oscuro
daba 1.85:1. Va con la variable, que ya distingue los dos temas. */
color: var(--texto-suave);
border-bottom: 1px solid var(--borde);
padding: 0.3rem 0.45rem;
}
/* Zebra: en tablas interactivas la pone el JS al repintar (las filas
se reordenan y se insertan filas de grupo, asi que nth-child no
sirve). En las demas, nth-child alcanza. */
tr.fila-alt td { background: var(--fila-alt); }
table:not(.tabla-interactiva) tbody tr:nth-child(even) td { background: var(--fila-alt); }
/* El renglón donde está el ratón, en CUALQUIER tabla: un tinte tenue que
solo sirve para no perder la línea en una tabla de catorce columnas.
El tinte fuerte (`--fila-hover`) se lo gana el renglón que sí lleva a
algún lado; ver ZONAS CLICABLES más abajo. Antes los dos eran el
mismo color, así que iluminarse no significaba nada. */
tbody tr:hover td { background: var(--fila-lectura); }
tr.fila-grupo:hover td { background: inherit; }
/* Columnas de numeros: alineadas a la derecha y monoespaciadas, para
poder comparar cantidades de un vistazo. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-family: "Consolas", "SF Mono", monospace; font-size: 0.78rem; }
/* Celda que puede ser larga (descripciones, notas): se deja cortar. */
td.ancha { white-space: normal; min-width: 200px; }
td.tenue, .tenue { color: var(--texto-suave); }
/* ---------- Etiquetas de estatus ---------- */
.badge {
display: inline-block;
padding: 0.02rem 0.35rem;
border-radius: 2px;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.badge-pendiente { background: var(--gris-bg); color: var(--texto); }
.badge-pendiente_compra { background: var(--sem-ambar-bg); color: var(--sem-ambar-tx); }
.badge-atendida { background: var(--verde-bg); color: var(--verde); }
.badge-cancelada { background: var(--rojo-bg); color: var(--rojo); }
.badge-activo { background: var(--verde-bg); color: var(--verde); }
.badge-inactivo { background: var(--rojo-bg); color: var(--rojo); }
.badge-cotizando { background: var(--gris-bg); color: var(--texto); }
.badge-comparada { background: var(--sem-ambar-bg); color: var(--sem-ambar-tx); }
.badge-ordenada { background: var(--sem-ambar-bg); color: var(--sem-ambar-tx); }
.badge-cerrada { background: var(--verde-bg); color: var(--verde); }
.badge-emitida { background: var(--sem-ambar-bg); color: var(--sem-ambar-tx); }
.badge-recibida { background: var(--verde-bg); color: var(--verde); }
.badge-descartada { background: var(--rojo-bg); color: var(--rojo); }
/* ---------- Mensajes ---------- */
.alerta {
padding: 0.75rem 1rem;
border-radius: var(--radio);
margin-bottom: 1rem;
font-size: 0.92rem;
}
.alerta-error { background: var(--rojo-bg); color: var(--rojo); }
.alerta-exito { background: var(--verde-bg); color: var(--verde); }
/* ---------- Login ---------- */
.login-wrap {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.login-caja { width: 100%; max-width: 360px; text-align: center; }
/* Recuadro blanco igual que el del sidebar: el logo es navy sobre
transparente y en tema oscuro, sin el recuadro, solo se veía la
estrella roja. */
.login-marca {
display: inline-block;
background: #fff;
padding: 0.7rem 1.1rem;
border-radius: var(--radio);
margin-bottom: 1.25rem;
}
.login-marca img { height: 34px; width: auto; }
/* ---------- Dashboard de obra ---------- */
.stat-grid {
display: grid;
/* 150px y no 115: con contratos de decenas de millones,
"$32,303,555" necesita 128px y en 115 salía cortado a la
mitad. Más vale que una tarjeta se baje de renglón a que un
importe se lea incompleto. */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.4rem;
margin-bottom: 0.8rem;
}
/* La cifra manda: número grande, etiqueta discreta y una franja de color
arriba que dice de qué se trata. La sombra la despega del fondo sin
encerrarla en una línea dura. */
.stat-card {
background: var(--tarjeta);
border: 1px solid var(--borde-suave);
border-radius: var(--radio-tarjeta);
box-shadow: var(--sombra);
padding: 0.75rem 0.9rem;
border-top: 3px solid var(--azul-medio);
transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.stat-card.stat-alerta { border-top-color: var(--rojo); }
.stat-num {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--texto);
}
.stat-card.stat-alerta .stat-num { color: var(--rojo); }
/* Tarjeta destacada: ocupa dos lugares de la rejilla y trae el número
más grande. Es para LA cifra de la pantalla — si se usa en dos
tarjetas a la vez deja de destacar ninguna. El amarillo es el color
de acento del sistema, que existe justo para esto y se usa poco. */
.stat-card.stat-destacada {
grid-column: span 2;
border-top-color: var(--amarillo);
border-top-width: 3px;
}
.stat-card.stat-destacada .stat-num { font-size: 2rem; }
.stat-nota {
display: block;
font-size: 0.7rem;
line-height: 1.25;
margin-top: 0.15rem;
color: var(--texto-suave);
}
.stat-etiqueta {
color: var(--texto-suave);
font-size: 0.82rem;
margin-top: 0.3rem;
}
.barra-stock {
background: var(--gris-bg);
border-radius: 999px;
height: 6px;
width: 100%;
overflow: hidden;
margin-top: 0.3rem;
}
.barra-stock-relleno {
background: var(--rojo);
height: 100%;
border-radius: 999px;
}
.fila-insumo {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.2rem;
border-bottom: 1px solid var(--borde);
}
.fila-insumo:last-child { border-bottom: none; }
.fila-insumo .info { flex: 1; }
.fila-insumo .info small { color: var(--texto-suave); display: block; }
.fila-insumo input[type="number"] { width: 90px; }
/* ---------- Tablas responsivas ----------
Tabla densa normal en escritorio/iPad (comprador, bodeguero). En
celular (<768px) se reacomoda sola en tarjetas apiladas, una por
fila, sin tocar el PHP más que agregar la clase "tabla-responsive"
a la tabla y data-label="..." a cada | . La fila de encabezado
(siempre la primera | , este sistema no usa ) se oculta
en celular — el label de cada celda hace su trabajo. */
@media (max-width: 767px) {
.tabla-responsive thead,
.tabla-responsive tr:first-child { display: none; }
.tabla-responsive,
.tabla-responsive tr,
.tabla-responsive td { display: block; width: 100%; }
.tabla-responsive { border: none; background: none; }
.tabla-responsive tr {
margin-bottom: 0.75rem;
border: 1px solid var(--borde);
border-radius: var(--radio);
background: var(--tarjeta);
overflow: hidden;
}
.tabla-responsive td {
border-bottom: 1px solid var(--borde);
padding: 0.55rem 0.75rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
text-align: right;
}
.tabla-responsive td:last-child { border-bottom: none; }
.tabla-responsive td::before {
content: attr(data-label);
font-weight: 600;
color: var(--texto-suave);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.03em;
text-align: left;
flex-shrink: 0;
}
.tabla-responsive td[data-label=""]::before { content: none; }
}
/* ---------- Barra de estado tipo semáforo ---------- */
.semaforo {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: 0.5rem 0 0.8rem;
border: 1px solid var(--borde);
border-radius: var(--radio);
overflow: hidden;
}
.semaforo-paso {
flex: 1;
min-width: 90px;
padding: 0.3rem 0.4rem;
text-align: center;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
background: var(--gris-bg);
color: var(--texto-suave);
border-right: 1px solid var(--borde);
}
.semaforo-paso:last-child { border-right: none; }
.semaforo-paso.semaforo-hecho { background: var(--verde-bg); color: var(--verde); }
.semaforo-paso.semaforo-actual { background: var(--azul-oscuro); color: #fff; }
.semaforo-paso.semaforo-cancelado { background: var(--rojo-bg); color: var(--rojo); }
@media (max-width: 767px) { .semaforo { display: none; } }
/* ---------- Tabla interactiva (filtro, orden, agrupación) ---------- */
.franja-agrupacion {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
border: 1px dashed var(--linea-fuerte);
border-radius: var(--radio);
padding: 0.25rem 0.5rem;
margin-bottom: 0.35rem;
background: var(--gris-bg);
min-height: 1.9rem;
}
.franja-agrupacion-sobre { border-color: var(--azul-medio); background: #e3e9ee; }
.franja-agrupacion-texto { color: var(--texto-suave); font-size: 0.74rem; }
.franja-agrupacion-vacia .franja-agrupacion-texto { display: inline; }
.franja-agrupacion:not(.franja-agrupacion-vacia) .franja-agrupacion-texto { display: none; }
.franja-agrupacion-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; }
.chip-agrupacion {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: var(--azul-oscuro);
color: #fff;
border-radius: 2px;
padding: 0.1rem 0.25rem 0.1rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
}
.chip-agrupacion button {
background: rgba(255,255,255,0.2);
border: none;
color: #fff;
border-radius: 50%;
width: 1.1rem;
height: 1.1rem;
line-height: 1;
cursor: pointer;
font-size: 0.85rem;
}
.franja-agrupacion-botones { display: flex; gap: 0.4rem; margin-left: auto; }
.th-ordenable { cursor: pointer; user-select: none; }
.th-ordenable:hover { color: var(--amarillo); }
.th-orden-indicador { font-size: 0.7rem; }
.th-arrastrable { cursor: grab; }
.th-arrastrable:active { cursor: grabbing; }
/* ---------- Ancho de columna arrastrable (como Excel) ----------
Con anchos por hace falta table-layout:fixed: si no, el
navegador vuelve a repartir el espacio según el contenido y el
arrastre no se nota. El texto que ya no cabe se corta con "…",
que es justo la señal de que a esa columna le falta ancho. */
table.tabla-redimensionable { table-layout: fixed; }
table.tabla-redimensionable th,
table.tabla-redimensionable td { overflow: hidden; text-overflow: ellipsis; }
/* Franja de 6px sobre el borde derecho del encabezado. Solo se ve
al pasar el mouse por esa columna: siempre visible sería una
reja de líneas encima de una tabla que ya tiene sus bordes. */
.th-redimension {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 6px;
cursor: col-resize;
user-select: none;
background: transparent;
}
th:hover > .th-redimension { background: var(--tirador); }
th > .th-redimension-activo,
th:hover > .th-redimension-activo { background: var(--tirador-activo); }
/* Mientras se arrastra: el cursor no debe cambiar al pasar sobre
otros elementos, ni debe seleccionarse texto de la página. */
body.redimensionando-columna { user-select: none; }
body.redimensionando-columna * { cursor: col-resize !important; }
.fila-filtro td {
background: #eef1f4;
padding: 0.15rem 0.25rem;
position: sticky; /* el JS le pone el top exacto */
z-index: 1;
border-bottom: 1px solid var(--linea-fuerte);
}
.fila-filtro input {
width: 100%;
padding: 0.12rem 0.3rem;
border: 1px solid #c3c9cf;
border-radius: 2px;
font-size: 0.72rem;
background: var(--campo-bg);
}
.fila-filtro input::-webkit-search-cancel-button { cursor: pointer; }
.fila-grupo { background: var(--grupo-bg); cursor: pointer; }
.fila-grupo td { font-size: 0.76rem; padding: 0.2rem 0.5rem; background: var(--grupo-bg); border-right: none; }
.fila-grupo-flecha { display: inline-block; width: 1rem; color: var(--texto-suave); }
.rango-precio { color: var(--texto-suave); font-size: 0.78rem; }
.precio-fuera-rango { color: var(--rojo); font-weight: 700; }
.badge-fuera-rango {
display: inline-block;
background: var(--rojo-bg);
color: var(--rojo);
border-radius: 999px;
padding: 0.05rem 0.4rem;
font-size: 0.7rem;
font-weight: 700;
margin-left: 0.3rem;
}
/* En celular la tabla ya se vuelve tarjetas — arrastrar encabezados
no aplica, así que ocultamos la franja de agrupación (el select de
respaldo por pantalla lo agrega cada página que lo necesite). El
filtro por columna se queda oculto también: en tarjetas no hay
encabezados visibles para saber qué filtra cada input. */
.tabla-interactiva-movil { display: none; }
@media (max-width: 767px) {
.franja-agrupacion { display: none; }
.tabla-responsive .fila-filtro { display: none; }
.th-redimension { display: none; }
table.tabla-redimensionable { table-layout: auto; width: 100% !important; }
.tabla-interactiva-movil {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.tabla-interactiva-movil select {
flex: 1;
padding: 0.5rem;
border: 1px solid var(--borde);
border-radius: var(--radio);
background: var(--campo-bg);
font-size: 0.85rem;
}
}
/* ---------- Encabezado de pantalla y barra de filtros ----------
Patrón compartido por Inventario, Requisiciones y Bitácora: el
título y las acciones en una sola línea, y debajo una barra de
filtros horizontal en vez de un formulario en bloque. Ahorra dos
renglones de alto en cada pantalla, que es lo que se convierte en
filas visibles de tabla. */
.barra-titulo {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.barra-titulo h1 { margin: 0; }
.barra-acciones { margin-left: auto; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.filtros-barra {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.5rem;
padding: 0.35rem 0.5rem;
background: var(--gris-bg);
border: 1px solid var(--borde);
border-radius: var(--radio);
}
/* Los que eligen de una lista se quedan del tamaño de lo que muestran. */
.filtros-barra select,
.filtros-barra input[type="date"] {
width: auto;
min-width: 130px;
max-width: 240px;
}
/* La caja de texto libre, en cambio, crece con lo que sobre del renglón.
Medido en Insumos: la caja daba 184 px —su ancho natural; ni siquiera
llegaba al máximo de 240 que decía este mismo bloque— el texto pedía
213 y quedaban 492 px de barra vacía a la derecha. Un campo apretado
junto a medio renglón en blanco no se sostiene.
El `flex-basis` es el ancho al que aspira; encoge en pantallas
angostas hasta el mínimo y, como la barra envuelve, abajo se lleva el
renglón completo. El tope evita que en un monitor ancho la caja se
estire sola de lado a lado. Es el mismo trato que ya tenía la búsqueda
de las tablas interactivas (`.tabla-buscar`, `flex: 0 1 22rem`). */
.filtros-barra input[type="search"],
.filtros-barra input[type="text"] {
flex: 1 1 17rem;
width: auto;
min-width: 11rem;
max-width: 26rem;
}
.filtros-barra .btn { margin: 0; }
.filtro-check {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin: 0;
font-size: 0.76rem;
font-weight: 600;
white-space: nowrap;
}
.filtro-check input { width: auto; margin: 0; }
.filtro-sep {
color: var(--texto-suave);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-left: 0.35rem;
}
/* Material que viene en camino: se distingue del resto sin gritar. */
.en-camino { color: var(--enlace); font-weight: 700; }
/* ---------- Barra de porcentaje dentro de una celda ----------
El número solo se lee renglón por renglón; la barra se lee de un
escaneo vertical. Se muestran los dos. */
.barra-pct {
position: relative;
display: block;
min-width: 54px;
height: 13px;
background: var(--barra-bg);
border-radius: 2px;
overflow: hidden;
}
.barra-pct-relleno {
position: absolute;
inset: 0 auto 0 0;
background: var(--azul-medio);
}
.barra-pct.completa .barra-pct-relleno { background: var(--verde); }
.barra-pct.vacia .barra-pct-relleno { background: transparent; }
.barra-pct-texto {
position: relative;
display: block;
text-align: center;
font-size: 0.66rem;
font-weight: 700;
line-height: 13px;
color: var(--texto);
font-variant-numeric: tabular-nums;
}
/* ---------- Semáforo compacto, para meterlo en una fila ---------- */
.semaforo-mini { display: inline-flex; gap: 2px; vertical-align: middle; }
.semaforo-mini span {
width: 12px;
height: 8px;
background: #d5dade;
border-radius: 1px;
}
.semaforo-mini span.hecho { background: var(--verde); }
.semaforo-mini span.actual { background: var(--azul-oscuro); }
.semaforo-mini span.cancelado { background: var(--rojo); }
/* ---------- Fila expandible (ver partidas sin salir de la lista) ---------- */
.fila-expandible td:first-child { cursor: pointer; }
.expandir-flecha {
display: inline-block;
width: 0.8rem;
color: var(--texto-suave);
font-size: 0.7rem;
}
tr.fila-detalle > td {
background: #f0f4f8;
padding: 0.4rem 0.5rem 0.5rem 1.6rem;
white-space: normal;
}
tr.fila-detalle table {
width: auto;
min-width: 380px;
border: 1px solid var(--borde);
}
tr.fila-detalle th { background: var(--grupo-bg); }
tr.fila-detalle td { background: var(--campo-bg); }
/* ---------- Acciones dentro de una celda ---------- */
td .acciones-fila { display: inline-flex; gap: 0.3rem; white-space: nowrap; }
td .acciones-fila a { text-decoration: none; font-size: 0.74rem; }
/* El subrayado al pasar encima lo reemplaza la pastilla de `.zona-chica`
(ZONAS CLICABLES): una celda de acciones son varias funciones juntas y
cada una tiene que iluminarse sola. */
/* ---------- Totales al pie de una tabla ---------- */
tr.fila-totales td {
background: var(--grupo-bg) !important;
font-weight: 700;
border-top: 2px solid var(--linea-fuerte);
position: sticky;
bottom: 0;
z-index: 1;
}
/* ---------- Paginación ---------- */
.paginacion {
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
font-size: 0.78rem;
}
.paginacion a, .paginacion span {
padding: 0.15rem 0.45rem;
border: 1px solid var(--borde);
border-radius: 2px;
text-decoration: none;
background: var(--campo-bg);
}
.paginacion .actual { background: var(--azul-oscuro); color: #fff; border-color: var(--azul-oscuro); }
.paginacion .inerte { color: var(--texto-suave); background: var(--gris-bg); }
/* En celular las barras de filtros se apilan a lo ancho completo. */
@media (max-width: 767px) {
.filtros-barra select,
.filtros-barra input[type="search"],
.filtros-barra input[type="date"],
.filtros-barra input[type="text"] { max-width: none; width: 100%; }
.barra-acciones { margin-left: 0; width: 100%; }
.tabla-wrap { max-height: none; border: none; }
}
/* ---------- Selección múltiple y columnas de control ---------- */
.barra-seleccion {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.3rem 0.5rem;
margin-bottom: 0.35rem;
background: #e3e9ee;
border: 1px solid var(--azul-medio);
border-radius: var(--radio);
font-size: 0.78rem;
}
.barra-seleccion[hidden] { display: none; }
th.col-sel, td.col-sel, th.col-exp, td.col-exp {
width: 1.4rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
text-align: center;
}
td.col-sel input, th.col-sel input { width: auto; margin: 0; cursor: pointer; }
.btn-expandir {
background: none;
border: none;
cursor: pointer;
color: var(--texto-suave);
font-size: 0.7rem;
padding: 0;
line-height: 1;
}
.btn-expandir:hover { color: var(--azul-medio); }
/* La fila de detalle no se raya ni se resalta como fila normal. */
tr.fila-detalle td { border-right: none; }
tr.fila-detalle:hover td { background: #f0f4f8; }
tr.fila-detalle[hidden] { display: none; }
/* ---------- Alta rápida de insumo desde la requisición ---------- */
.panel-alta {
border-left: 3px solid var(--azul-medio);
background: #f7f9fb;
}
.aviso-parecidos {
background: #fff6e0;
border: 1px solid #e6cf9a;
border-radius: var(--radio);
padding: 0.5rem 0.7rem;
margin-top: 0.5rem;
font-size: 0.8rem;
}
.aviso-parecidos ul { margin: 0.35rem 0; padding-left: 1.1rem; }
.aviso-parecidos li { margin-bottom: 0.15rem; }
.aviso-parecidos code {
background: var(--campo-bg);
border: 1px solid var(--borde);
padding: 0 0.2rem;
font-size: 0.74rem;
}
.aviso-parecidos p { margin: 0.35rem 0 0; }
.fila-insumo-nuevo { background: #eef7ee; }
/* Recepción incompleta: ámbar, no verde — el material llegó a medias
y la orden sigue abierta. */
.badge-recibida_parcial { background: var(--sem-ambar-bg); color: var(--sem-ambar-tx); }
tr.fila-completa td { opacity: 0.62; }
/* ---------- Rejilla de campos para fichas con muchos datos ---------- */
.rejilla-campos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0.35rem 0.9rem;
}
.rejilla-campos label:first-child { margin-top: 0; }
.rejilla-campos .ayuda-campo { margin-bottom: 0.3rem; }
@media (max-width: 600px) {
.rejilla-campos { grid-template-columns: 1fr; }
}
/* ---------- Bitácora del sistema ---------- */
.celda-cambios { font-size: 0.74rem; line-height: 1.5; min-width: 260px; }
.valor-antes { color: var(--rojo); text-decoration: line-through; }
.valor-despues { color: var(--verde); font-weight: 600; }
/* ---------- Documento enlazado desde una celda de tabla ---------- */
/* El icono se pinta con ::before y no como texto a propósito: la tabla
interactiva agrupa y filtra leyendo el textContent de la celda, así
que un carácter suelto ahí volvería el grupo "4509680882" en
"4509680882 ⤓". Como pseudo-elemento no entra en textContent. */
a.ico-bajar {
display: inline-block;
width: 1.05em;
text-align: center;
margin-left: 0.35rem;
color: var(--texto-suave);
text-decoration: none;
vertical-align: baseline;
}
a.ico-bajar::before { content: "\2913"; } /* ⤓ flecha hacia una línea */
a.ico-bajar:hover { color: var(--azul-medio); }
/* Superíndice cuando hay más de una versión del mismo documento.
El número se pinta con ::before desde data-n, por la misma razón que
el icono: como pseudo-elemento no entra en el textContent que la
tabla interactiva usa para agrupar. */
span.doc-versiones {
font-size: 0.62rem;
font-weight: 700;
color: var(--sem-ambar-tx); /* mismo ámbar del badge de recepción parcial */
vertical-align: super;
margin-left: 0.1rem;
cursor: help;
}
span.doc-versiones::before { content: attr(data-n); }
/* ---------- Archivos adjuntos a una factura de cliente ----------
Van dentro de una celda de tabla, no en una tarjeta: cada factura
puede traer varios (el PDF, el complemento de pago, el acuse del
portal) y se listan uno por renglón dentro de su celda. */
.doc-linea {
display: flex;
align-items: baseline;
gap: 0.3rem;
flex-wrap: wrap;
margin-bottom: 0.15rem;
}
.doc-linea .tenue { font-size: 0.7rem; }
/* Quitar un adjunto: una × discreta y no un botón rojo de tamaño
completo — en una celda con tres archivos, tres botones "Quitar"
pesarían más que los archivos mismos. Se confirma antes de borrar. */
.doc-quitar {
background: none;
border: none;
color: var(--texto-suave);
cursor: pointer;
font-size: 0.9rem;
line-height: 1;
padding: 0 0.15rem;
}
.doc-quitar:hover { color: var(--rojo); }
details.doc-adjuntar { margin-top: 0.25rem; }
details.doc-adjuntar > summary {
cursor: pointer;
color: var(--texto-suave);
font-size: 0.72rem;
}
details.doc-adjuntar > summary:hover { color: var(--enlace); }
details.doc-adjuntar form {
margin-top: 0.35rem;
padding: 0.4rem;
border: 1px solid var(--borde);
border-radius: var(--radio);
background: var(--calculado-bg);
min-width: 15rem;
}
details.doc-adjuntar label {
display: block;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--texto-suave);
margin-top: 0.3rem;
}
details.doc-adjuntar select,
details.doc-adjuntar input[type="text"],
details.doc-adjuntar input[type="file"] { width: 100%; font-size: 0.75rem; }
details.doc-adjuntar .ayuda-campo { margin: 0.15rem 0 0; }
details.doc-adjuntar button { margin-top: 0.45rem; }
/* ---------- Semáforo de vigencia de constancias (matriz DC3) ---------- */
/* Cuatro estados, no tres: "no la tiene" (gris) no es lo mismo que "se
le venció" (rojo). El DC3 de maquinaria pesada no le aplica a un
electricista; pintarlo de rojo llenaría la pantalla de alarmas que
nadie debe atender, y el rojo dejaría de significar algo.
Los tonos son los mismos del Excel que esto reemplaza. */
td.celda-sem {
text-align: center;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* El selector lleva td.celda-sem a propósito: la zebra es
`tr.fila-alt td` (0,1,1) y le ganaba a un `.sem-x` suelto (0,1,0),
así que en las filas alternas —la mitad de la tabla— el color del
semáforo desaparecía. Con td.celda-sem.sem-x (0,2,1) siempre gana. */
td.celda-sem.sem-vigente { background: var(--sem-verde-bg); color: var(--sem-verde-tx); }
td.celda-sem.sem-por_vencer { background: var(--sem-ambar-bg); color: var(--sem-ambar-tx); }
td.celda-sem.sem-vencido { background: var(--sem-rojo-bg); color: var(--sem-rojo-tx); font-weight: 700; }
td.celda-sem.sem-sin_constancia { background: var(--sem-gris-bg); color: var(--texto-suave); }
/* En la ficha del trabajador el estado se pinta sobre un . */
strong.celda-sem.sem-vigente { background: var(--sem-verde-bg); color: var(--sem-verde-tx); }
strong.celda-sem.sem-por_vencer { background: var(--sem-ambar-bg); color: var(--sem-ambar-tx); }
strong.celda-sem.sem-vencido { background: var(--sem-rojo-bg); color: var(--sem-rojo-tx); }
/* La leyenda usa cuadros sueltos, no celdas: van sin td. */
.sem-cuadro.sem-vigente { background: var(--sem-verde-bg); }
.sem-cuadro.sem-por_vencer { background: var(--sem-ambar-bg); }
.sem-cuadro.sem-vencido { background: var(--sem-rojo-bg); }
.sem-cuadro.sem-sin_constancia { background: var(--sem-gris-bg); }
/* Leyenda de arriba de la matriz. */
.leyenda-semaforo {
font-size: 0.76rem;
color: var(--texto-suave);
margin: 0.5rem 0 0.3rem;
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.leyenda-semaforo .sem-cuadro {
display: inline-block;
width: 0.85rem;
height: 0.85rem;
border: 1px solid var(--borde);
margin-left: 0.7rem;
}
.leyenda-semaforo .sem-cuadro:first-child { margin-left: 0; }
/* Botón de subir dentro de una celda: tiene que caber sin engordar el
renglón, así que va como texto pequeño y no como botón de verdad. */
.btn-subir-constancia {
background: none;
border: 1px dashed var(--borde);
color: var(--texto-suave);
font-size: 0.7rem;
padding: 0.05rem 0.3rem;
cursor: pointer;
border-radius: var(--radio);
}
.btn-subir-constancia:hover { color: var(--azul-medio); border-color: var(--azul-medio); }
/* Los dos botones de una celda que YA tiene constancia. Ambos se
pintan por CSS y no como texto, para no meterse en el nombre del
grupo al agrupar — igual que el icono de descarga.
.falta-archivo hay fecha pero nadie subió el papel -> clip
.renovar está completa; se reemplaza al vencer -> flecha
El de renovar es la respuesta a algo que faltaba: sin él, una
constancia vencida solo se podía reemplazar entrando a la ficha del
trabajador, cuando la pantalla donde SE VE que venció es la matriz. */
.btn-subir-constancia.falta-archivo,
.btn-subir-constancia.renovar {
border: none;
margin-left: 0.3rem;
padding: 0;
opacity: 0.45;
}
.btn-subir-constancia.falta-archivo::before { content: "\1F4CE"; }
.btn-subir-constancia.renovar::before { content: "\21BB"; font-size: 0.95rem; }
.btn-subir-constancia.falta-archivo:hover,
.btn-subir-constancia.renovar:hover { opacity: 1; }
/* Vencida o por vencer: el botón deja de ser discreto — es justo lo que
hay que hacer hoy con ese renglón. */
.btn-subir-constancia.urge { opacity: 1; font-weight: 700; }
/* La matriz es ancha: la primera columna se queda fija al desplazarse
a la derecha, si no se pierde de vista de quién es el renglón. */
.matriz-dc3 td:first-child,
.matriz-dc3 th:first-child {
position: sticky;
left: 0;
background: var(--tarjeta);
z-index: 2;
}
.matriz-dc3 tr.fila-alt td:first-child { background: var(--fila-alt); }
/* Panel de captura de constancia: en la misma página, no flotante —
en iPad un modal se pelea con el teclado. */
.panel-constancia { margin-top: 0.8rem; border-left: 3px solid var(--azul-medio); }
/* ---------- Caja chica / viáticos ---------- */
/* La tabla del papel es densa y con muchas columnas de dinero: se
aprieta más que el resto y los montos van monoespaciados para que
las cifras se alineen por columna, como en la hoja impresa. */
.tabla-caja td, .tabla-caja th { font-size: 0.76rem; padding: 0.18rem 0.35rem; }
.tabla-caja .num { font-variant-numeric: tabular-nums; }
/* El UUID de un CFDI mide 36 caracteres. Antes se recortaba con "…" y el
completo quedaba en el `title` — mala idea: el folio fiscal es el dato
con el que el contador amarra el gasto con la factura del SAT, y uno
que hay que adivinar con el ratón encima no sirve. Se muestra COMPLETO.
Cabe sin ensanchar la tabla porque se parte solo: el navegador corta
después de los guiones del UUID, así que cada tramo queda entero
(6B279E1B-E06C-4677-82A0- / 7700FA85DC0F) en vez de a media palabra.
Monoespaciado para poder comparar hexadecimal carácter por carácter. */
.folio-cfdi {
max-width: 12rem;
font-family: ui-monospace, Consolas, monospace;
font-size: 0.7rem;
line-height: 1.25;
/* Explícito porque `th, td` de más arriba impone `nowrap` a toda celda.
Sin esta línea el folio no se parte: se desborda encima de la columna
de Proveedor. Medido. */
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
}
/* El importe es CALCULADO: se marca visualmente para que se lea distinto
de los campos que sí se teclean. */
.importe-calc { background: var(--calculado-bg); }
.fila-total td {
background: var(--th-bg);
font-weight: 700;
border-top: 2px solid var(--borde);
}
/* Gasto fiscal sin su factura adjunta: no bloquea el cierre, pero no
puede pasar desapercibido. */
.falta-factura { color: var(--rojo); font-weight: 700; font-size: 0.72rem; }
/* La marca del XML del CFDI, al lado del enlace de la factura. Va como
pastilla y no como enlace azul para que se lea como una etiqueta —"este
gasto tiene su XML"— y no como una segunda factura. */
.etiqueta-xml {
display: inline-block;
margin-left: 0.3rem;
padding: 0 0.3rem;
border: 1px solid var(--borde);
border-radius: 4px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--texto-suave);
text-decoration: none;
vertical-align: 1px;
}
.etiqueta-xml:hover {
color: var(--acento-legible);
border-color: var(--acento);
}
.btn-editar-gasto, .btn-quitar-gasto {
background: none;
border: none;
color: var(--texto-suave);
cursor: pointer;
font-size: 0.72rem;
padding: 0 0.15rem;
}
.btn-editar-gasto:hover { color: var(--azul-medio); text-decoration: underline; }
.btn-quitar-gasto:hover { color: var(--rojo); }
/* Barra del fondo asignado */
.barra-fondo { padding: 0.5rem 0.7rem; }
.fondo-cifras {
display: flex;
gap: 1.4rem;
flex-wrap: wrap;
font-size: 0.8rem;
margin-bottom: 0.35rem;
}
.fondo-cifras .excedido, .excedido { color: var(--rojo); font-weight: 700; }
.barra-cont {
height: 0.55rem;
background: var(--gris-bg);
border: 1px solid var(--borde);
overflow: hidden;
}
.barra-usado { height: 100%; background: var(--verde); }
.barra-usado.barra-excedida { background: var(--rojo); }
/* Cierre del documento: las tres cifras que se firman */
.cierre-caja { margin-top: 0.8rem; max-width: 30rem; }
.tabla-cierre { width: 100%; }
.tabla-cierre td { border: none; padding: 0.15rem 0.3rem; font-size: 0.82rem; }
.tabla-cierre .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-cierre .negativo { color: var(--rojo); font-weight: 700; }
.tabla-cierre .fila-reembolso td {
border-top: 2px solid var(--texto);
font-size: 0.9rem;
padding-top: 0.3rem;
}
/* El importe que se recalcula mientras se teclea en el panel */
.importe-vivo {
margin: 0.5rem 0 0;
font-size: 0.85rem;
padding: 0.3rem 0.5rem;
background: var(--calculado-bg);
border-left: 3px solid var(--azul-medio);
}
.importe-vivo .tenue { font-size: 0.74rem; margin-left: 0.5rem; }
.alerta-info {
background: var(--info-bg);
border: 1px solid var(--info-borde);
color: var(--info-tx);
padding: 0.5rem 0.7rem;
margin-bottom: 0.7rem;
border-radius: var(--radio);
font-size: 0.84rem;
}
/* Campo obligatorio en el panel de captura de gastos. */
.obligatorio {
font-size: 0.68rem;
font-weight: 700;
color: var(--rojo);
text-transform: uppercase;
margin-left: 0.3rem;
}
/* ==========================================================
Configuración
========================================================== */
/* --- Selector de tema: tres tarjetas con una miniatura de cómo se ve.
Una miniatura dice más que la palabra "oscuro", y de paso enseña
el contraste real antes de aplicarlo. --- */
.temas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 0.6rem;
}
.tema-opcion {
display: block;
border: 2px solid var(--borde);
border-radius: var(--radio);
padding: 0.6rem;
cursor: pointer;
margin: 0;
font-weight: 400;
background: var(--tarjeta);
}
.tema-opcion:hover { border-color: var(--azul-medio); }
.tema-opcion.elegido { border-color: var(--azul-medio); background: var(--fila-hover); }
.tema-opcion input { margin-right: 0.4rem; }
.tema-nombre { font-weight: 700; font-size: 0.85rem; display: inline; }
.tema-ayuda { display: block; font-size: 0.74rem; color: var(--texto-suave); margin-top: 0.15rem; }
/* La miniatura: una barra de menú y dos renglones de contenido. */
.tema-muestra {
display: block;
height: 44px;
border: 1px solid var(--borde);
border-radius: 2px;
overflow: hidden;
margin-bottom: 0.45rem;
}
.tema-muestra .tm-barra { display: block; height: 11px; }
.tema-muestra .tm-cuerpo { display: block; height: 33px; padding: 5px; }
.tema-muestra .tm-linea { display: block; height: 4px; margin-bottom: 4px; border-radius: 2px; }
.tema-muestra .tm-linea.corta { width: 55%; }
.tema-claro .tm-barra { background: #1b2733; }
.tema-claro .tm-cuerpo { background: #f5f6f8; }
.tema-claro .tm-linea { background: #c9cfd6; }
.tema-oscuro .tm-barra { background: #10161d; }
.tema-oscuro .tm-cuerpo { background: #151a20; }
.tema-oscuro .tm-linea { background: #39434f; }
/* "Automático" se pinta a la mitad de cada uno: es exactamente lo que
hace — seguir al equipo, que puede estar en cualquiera de los dos. */
.tema-auto .tm-barra { background: linear-gradient(90deg, #1b2733 50%, #10161d 50%); }
.tema-auto .tm-cuerpo { background: linear-gradient(90deg, #f5f6f8 50%, #151a20 50%); }
.tema-auto .tm-linea { background: linear-gradient(90deg, #c9cfd6 50%, #39434f 50%); }
/* --- Los ajustes: rótulo y explicación a la izquierda, campo a la
derecha. Un ajuste que no explica qué hace obliga a probarlo para
averiguarlo, que con la configuración de un sistema es caro. --- */
.grupo-ajustes h3 {
margin: 0 0 0.5rem;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--texto-suave);
border-bottom: 1px solid var(--borde);
padding-bottom: 0.3rem;
}
.ajuste {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 0.6rem 0;
border-bottom: 1px solid var(--borde);
flex-wrap: wrap;
}
.ajuste:last-child { border-bottom: none; padding-bottom: 0; }
.ajuste-texto { flex: 1 1 320px; min-width: 0; }
.ajuste-texto label { margin: 0; font-size: 0.86rem; }
.ajuste-desc { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--texto-suave); }
.ajuste-ayuda {
margin: 0.2rem 0 0;
font-size: 0.74rem;
color: var(--texto-suave);
border-left: 2px solid var(--borde);
padding-left: 0.5rem;
}
.ajuste-campo { flex: 0 0 200px; text-align: right; }
.ajuste-campo input, .ajuste-campo select { text-align: right; }
.ajuste-rango { display: block; font-size: 0.72rem; color: var(--texto-suave); margin-top: 0.15rem; }
/* El nombre técnico queda a la vista pero discreto: sirve para buscarlo
en el código, no para que sea lo primero que se lee. */
.ajuste-clave {
display: block;
font-family: ui-monospace, Consolas, monospace;
font-size: 0.66rem;
color: var(--texto-suave);
opacity: 0.65;
margin-top: 0.1rem;
word-break: break-all;
}
@media (max-width: 600px) {
.ajuste-campo { flex: 1 1 100%; text-align: left; }
.ajuste-campo input, .ajuste-campo select { text-align: left; }
}
/* ==========================================================
Aviso ámbar: "hay algo que revisar", sin ser un error.
Antes se pintaba con colores fijos en línea (#fff6e0) que en tema
oscuro salían como un parche blanco. Usa las variables del semáforo
ámbar, que ya están definidas en los dos temas.
========================================================== */
.alerta-aviso {
background: var(--sem-ambar-bg);
color: var(--sem-ambar-tx);
border: 1px solid var(--sem-ambar-tx);
}
.alerta-aviso a { color: inherit; font-weight: 600; }
/* ==========================================================
Estado vacío: una tabla sin renglones debe decir qué hacer,
no solo "no hay datos". Va dentro de la celda que ocupa toda
la fila, para no romper la estructura de la tabla.
========================================================== */
.estado-vacio {
text-align: center;
padding: 1.6rem 1rem;
color: var(--texto-suave);
}
.estado-vacio strong { display: block; color: var(--texto); font-size: 0.95rem; margin-bottom: 0.25rem; }
.estado-vacio p { margin: 0 0 0.6rem; font-size: 0.85rem; }
.estado-vacio .btn { margin-top: 0.2rem; }
/* ==========================================================
Utilidades de espaciado. Reemplazan los style="margin-top:…"
que se repetían en 49 archivos. Llevan !important a propósito:
un estilo en línea siempre ganaba, y estas clases tienen que
seguir ganando para que nada cambie de lugar al sustituirlos.
========================================================== */
.mt-0 { margin-top: 0 !important; }
.mt-05 { margin-top: 0.5rem !important; }
.mt-06 { margin-top: 0.6rem !important; }
.mt-08 { margin-top: 0.8rem !important; }
.mt-1 { margin-top: 1rem !important; }
.sin-tope { max-height: none !important; } /* .tabla-wrap sin scroll propio */
.en-linea { display: inline !important; } /*