/* ────────────────────────────────────────────────────────────────────────────
Paleta Contab — sobria, pensada para leer números todo el día.
Regla: nada saturado. El color se RESERVA para significar algo (cuadra vs.
descuadra, un asiento resaltado); no se usa para decorar. Un contador mira
estas pantallas ocho horas, y el chillido cansa y esconde la señal.
──────────────────────────────────────────────────────────────────────────── */
:root {
--contab-tinta: #26313c; /* texto principal, casi negro azulado */
--contab-tinta-suave: #5c6772; /* rótulos, texto secundario */
--contab-acento: #2f6b73; /* teal apagado: un solo acento para botones, enlaces y activo */
--contab-acento-oscuro: #24545b;
--contab-acento-tenue: #e7eff0;
--contab-panel: #22303c; /* sidebar: pizarra profunda, sin gradiente ni morado */
--contab-panel-borde: #2c3b48;
--contab-linea: #e3e7ea; /* bordes de tablas y separadores */
--contab-fondo: #f6f7f8; /* fondo de página, apenas fuera del blanco */
--contab-ok: #3f7d5c; /* verde apagado: cuadra */
--contab-ok-tenue: #e9f1ec;
--contab-alerta: #a9524a; /* ladrillo apagado: descuadra, no un rojo de semáforo */
--contab-alerta-tenue: #f3e8e7;
--contab-aviso: #a97d2e; /* ámbar apagado: resaltado, advertencia */
--contab-aviso-tenue: #f7f0dc;
/* ── Un solo radio para todas las superficies ────────────────────────────
Antes convivían cuatro en la misma pantalla: la tarjeta de login 12px, las
.card de Bootstrap 6px, el panel de Definiciones 4px y las tablas 0. Eso no
se lee como una decisión, se lee como cuatro. Y se notaba de frente en
/admin/empresas: una tarjeta redondeada justo encima de una tabla a escuadra.
6px y no más: una tabla de contabilidad es una planilla, y un radio grande
la disfraza de tarjeta de marketing. El único que se sale es la tarjeta de
login, a propósito —ver Entrar.razor.css—. */
--contab-radio: 6px;
}
html, body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--contab-tinta);
background-color: var(--contab-fondo);
}
/* ── Encabezados: más chicos que el default de Bootstrap ──
2.5rem para un
es un póster, no una app. Un tamaño discreto deja que
los datos, no los títulos, sean lo que se ve. */
h1 {
font-size: 1.55rem;
font-weight: 600;
letter-spacing: -0.01em;
}
h2, .h5 {
font-weight: 600;
}
/* ── El único acento ──────────────────────────────────────────────────────── */
a, .btn-link {
color: var(--contab-acento);
text-decoration-color: rgba(47, 107, 115, 0.35);
text-underline-offset: 2px;
}
a:hover, .btn-link:hover {
color: var(--contab-acento-oscuro);
}
.btn-primary {
color: #fff;
background-color: var(--contab-acento);
border-color: var(--contab-acento);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: var(--contab-acento-oscuro);
border-color: var(--contab-acento-oscuro);
}
.btn-primary:disabled, .btn-primary.disabled {
background-color: var(--contab-acento);
border-color: var(--contab-acento);
opacity: 0.45;
}
.btn-secondary {
color: var(--contab-tinta);
background-color: #eceef0;
border-color: #dce0e4;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
color: var(--contab-tinta);
background-color: #e0e3e6;
border-color: #cfd4d9;
}
.btn-outline-secondary {
color: var(--contab-tinta-suave);
border-color: #cfd4d9;
}
.btn-outline-secondary:hover {
color: var(--contab-tinta);
background-color: #eceef0;
border-color: #bcc2c8;
}
/* Anillo de foco discreto, en el acento y no en un azul eléctrico. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.2rem rgba(47, 107, 115, 0.18);
border-color: var(--contab-acento);
}
/* ── Badges: el color ES el mensaje, así que se apaga para que no grite ────── */
.badge.bg-success {
background-color: var(--contab-ok) !important;
}
.badge.bg-danger {
background-color: var(--contab-alerta) !important;
}
.badge.bg-warning {
background-color: var(--contab-aviso) !important;
color: #fff !important;
}
.badge.bg-secondary {
background-color: #7c8892 !important;
}
/* ── Tablas: donde vive el trabajo ────────────────────────────────────────── */
.table {
--bs-table-hover-bg: var(--contab-acento-tenue);
color: var(--contab-tinta);
/* Cifras tabulares: los dígitos ocupan el mismo ancho, así las columnas de
montos alinean unidad con unidad. Es la diferencia entre una planilla y
un volante. */
font-variant-numeric: tabular-nums;
/* Marco exterior. Bootstrap solo dibuja las líneas ENTRE filas, así que una
tabla quedaba con los costados y el pie al aire: en una página con fondo
gris claro no se leía como un bloque, se leía como texto suelto que por
casualidad estaba alineado. El marco la cierra. */
border: 1px solid var(--contab-linea);
background-color: #fff;
/* ── Y por qué `separate` en vez del `collapse` de Bootstrap ──────────────
Con `border-collapse: collapse` el navegador IGNORA el border-radius de la
tabla: los bordes de las celdas se fusionan con el de la tabla y las
esquinas salen a escuadra igual. Tampoco sirve `overflow: hidden`, que
sobre un
no recorta de forma confiable.
Con `separate` + `border-spacing: 0` las celdas siguen pegadas —se ve
idéntico— pero el radio de la tabla vuelve a aplicarse, y basta redondear
las cuatro celdas de las esquinas para que el fondo del encabezado y el
hover de la última fila queden recortados en vez de asomarse por fuera. */
border-collapse: separate;
border-spacing: 0;
border-radius: var(--contab-radio);
}
/* Las cuatro esquinas. `:first-child`/`:last-child` sobre las celdas y no
sobre la tabla: el radio de la tabla dibuja el borde, pero el FONDO de la
celda es el que hay que recortar.
Se apunta a la primera y la última SECCIÓN (`> :first-child`), no a thead
y tbody por nombre: nueve tablas del sistema no tienen thead —el F29, la
RLI, el F22, los estados financieros y el portal son listas de conceptos,
no grillas— y con `thead > ...` sus esquinas de arriba quedaban a escuadra
contra un borde redondeado. */
.table > :first-child > tr:first-child > *:first-child {
border-top-left-radius: var(--contab-radio);
}
.table > :first-child > tr:first-child > *:last-child {
border-top-right-radius: var(--contab-radio);
}
.table > :last-child > tr:last-child > *:first-child {
border-bottom-left-radius: var(--contab-radio);
}
.table > :last-child > tr:last-child > *:last-child {
border-bottom-right-radius: var(--contab-radio);
}
/* ── table-bordered: sus líneas horizontales las pone sobre el
───────
Bootstrap reparte los bordes entre la fila (arriba/abajo) y la celda
(izquierda/derecha). Eso funciona con `collapse`, pero en `separate` el CSS
IGNORA los bordes puestos sobre filas y grupos de filas: solo pintan los de
las celdas. Al cambiar a `separate` para poder redondear, el Balance de 8
columnas perdió TODOS sus separadores de fila sin que nada avisara — y es
justo la tabla donde hacen falta, porque hay que seguir una cuenta a lo
ancho de ocho columnas.
Se rehacen sobre la celda: cada una dibuja su borde derecho e inferior. El
de la última columna sobra —ahí está el marco— y el de la última fila ya lo
quita la regla de más arriba. */
.table-bordered > :not(caption) > * > * {
border-width: 0 var(--bs-border-width, 1px) var(--bs-border-width, 1px) 0;
}
.table-bordered > :not(caption) > tr > *:last-child {
border-right-width: 0;
}
/* La última fila de la tabla no necesita su propia línea: ya está el marco.
Sin esto quedan dos rayas juntas al pie. `:last-child` sobre la SECCIÓN y
no sobre tbody: así vale igual para las tablas que cierran con tfoot
—Balance, digitación—, donde la última fila son los totales. */
.table > :last-child > tr:last-child > * {
border-bottom-width: 0;
}
.table > thead th {
color: var(--contab-tinta-suave);
font-weight: 600;
background-color: #fbfcfc;
border-bottom: 2px solid var(--contab-linea);
}
/* Una columna de montos termina justo en el borde de su celda, y si la de al
lado empieza justo en el suyo, el número y el texto se tocan: en Activo fijo
se leía "5.000.001 Instantánea" como si fuera un solo dato. Medio rem de aire
a la derecha de toda celda alineada al final lo separa, y en la última columna
además despega la cifra del marco. */
.table .text-end {
padding-right: 0.65rem;
}
.table > tbody td, .table > tbody th, .table > tfoot td {
border-color: var(--contab-linea);
}
.table > tbody tr.table-light > * {
--bs-table-bg: #f1f3f5;
}
/* El resaltado del drill-down (Mayor → Diario): ámbar tenue, no el amarillo
fosforescente del default. Marca la fila sin arruinar la lectura del resto. */
.table > tbody tr.table-warning > * {
--bs-table-bg: var(--contab-aviso-tenue);
}
/* ── Tablas anchas: scrollean ANTES de comprimirse ───────────────────────────
Bootstrap le pone `width: 100%` a toda tabla, así que dentro de un
`.table-responsive` una tabla densa primero se aprieta y solo desborda cuando
ya no puede más. En el Balance de 8 columnas eso significaba partir "Banco
cuenta corriente" en cuatro renglones antes de aparecer la barra de scroll —
técnicamente responsive, ilegible en la práctica.
`min-width` fija el piso: por debajo de eso la tabla deja de encogerse y el
contenedor scrollea. El valor NO está estimado: se midió en el navegador la
suma del ancho de contenido de cada columna, descontando la más ancha —la de
texto libre, que sí puede envolver— y dándole 14 rem. Dio 40-42 rem para las
de seis columnas; de ahí el default de 44 con holgura.
Solo se marcan las tablas que lo necesitan. Ponerlo global obligaría a
scrollear a las angostas, que caben de sobra. */
.tabla-ancha {
min-width: var(--tabla-min, 44rem);
}
/* Los códigos de cuenta: monoespaciados y discretos, para que el ojo los use
como ancla sin que compitan con el nombre. */
code {
color: var(--contab-tinta-suave);
background: none;
font-size: 0.9em;
}
/* Las .card comparten el token y el mismo gris de borde que las tablas: son la
misma clase de superficie —un bloque de contenido sobre el fondo de página— y
antes se distinguían por un borde más oscuro que el de las tablas, sin ninguna
razón. */
.card {
border-color: var(--contab-linea);
border-radius: var(--contab-radio);
}
/* ── Sparkline y gráfico de barras (GraficosFinancieros, usado por Home.razor y
Portal/PortalResumen.razor): global y no scoped a un componente, porque cada .razor recibe su
propio atributo de scope de Blazor CSS isolation y una regla en la hoja scoped de uno no llegaría
al otro aunque compartan el nombre de clase. El resto del estilo del sparkline/barras (línea,
punto, barras, guías) se fija inline en GraficosFinancieros, con style= y no class=: un