/* ============================================================
STYLE.CSS - Template base Monarca Computer S.A.S
Todas las variables CSS vienen de cargarTema() en app.js
que las aplica desde la BD (tabla configuracion).
NO editar los valores de :root directamente aquí -
son sobrescritos en tiempo de ejecución por cargarTema().
============================================================ */
/* ── Variables por defecto (fallback si la API no responde) ── */
:root {
--primary: #1a3a5c;
--primary-hover: #2563eb;
--accent: #f59e0b;
--bg: #f1f5f9;
--surface: #ffffff;
--border: #e2e8f0;
--text: #1e293b;
--text-muted: #64748b;
--success: #16a34a;
--danger: #dc2626;
--warning: #d97706;
--radius: 8px;
--sidebar-w: 220px;
--font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-size: 14px;
}
/* ── Modo oscuro ─────────────────────────────────────────── */
/* Se activa agregando data-dark al . Los colores de marca
(--primary, --accent, --success, etc.) se mantienen tal cual. */
html[data-dark] {
--bg: #0f172a;
--surface: #1e293b;
--border: #334155;
--text: #e2e8f0;
--text-muted: #94a3b8;
}
/* Ajustes para alertas en modo oscuro */
html[data-dark] .alert-success { background: rgba(22,163,74,0.15); color: #86efac; }
html[data-dark] .alert-danger { background: rgba(220,38,38,0.15); color: #fca5a5; }
html[data-dark] .alert-warning { background: rgba(217,119,6,0.15); color: #fcd34d; }
html[data-dark] .alert-info { background: rgba(37,99,235,0.15); color: #93c5fd; }
/* Badges en modo oscuro */
html[data-dark] .badge-success { background: rgba(22,163,74,0.2); }
html[data-dark] .badge-danger { background: rgba(220,38,38,0.2); }
html[data-dark] .badge-warning { background: rgba(217,119,6,0.2); }
html[data-dark] .badge-primary { background: rgba(37,99,235,0.2); }
html[data-dark] .badge-muted { background: rgba(255,255,255,0.1); }
/* Sombras más fuertes en superficie oscura */
html[data-dark] .card { box-shadow: 0 1px 6px rgba(0,0,0,0.4); }
html[data-dark] .modal { box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
html[data-dark] .login-card { box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
/* Scroll */
html[data-dark] ::-webkit-scrollbar-track { background: #1e293b; }
html[data-dark] ::-webkit-scrollbar-thumb { background: #475569; }
/* Botón modo oscuro en topbar */
.dark-toggle {
background: none;
border: 1px solid var(--border);
border-radius: 20px;
padding: 4px 12px;
cursor: pointer;
font-size: 0.78rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 5px;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.dark-toggle:hover { background: var(--border); color: var(--text); }
/* Animaciones */
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes modalIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
/* ── Reset y base ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-body);
font-size: var(--font-size);
background: var(--bg);
color: var(--text);
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
line-height: 1.2;
color: var(--text);
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
/* ── Layout principal ─────────────────────────────────────── */
.app-layout {
display: flex;
min-height: 100vh;
}
/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
width: var(--sidebar-w);
background: var(--primary);
color: #fff;
display: flex;
flex-direction: column;
position: fixed;
top: 0; left: 0;
height: 100vh;
z-index: 200;
transition: transform 0.25s ease;
overflow-y: auto;
flex-shrink: 0;
}
.sidebar-brand {
padding: 18px 20px 14px;
border-bottom: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-brand img {
width: 36px;
height: 36px;
object-fit: contain;
border-radius: 6px;
background: rgba(255,255,255,0.1);
padding: 3px;
}
.brand-text {
font-size: 0.88rem;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.brand-accent { color: var(--accent); }
.sidebar-nav { padding: 10px 0; flex: 1; }
.nav-section-label {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
padding: 14px 20px 6px;
}
/* Banner "Administrando {empresa}" - visible cuando un técnico de Monarca entró a una
empresa, para que no olvide en qué contexto está trabajando. */
.admin-banner {
margin: 12px 14px 4px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(255,255,255,0.08);
border-left: 3px solid var(--accent);
font-size: 0.62rem;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.55);
}
.admin-banner strong {
display: block;
font-size: 0.82rem;
letter-spacing: 0;
text-transform: none;
color: #fff;
margin-top: 2px;
}
.nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 20px;
color: rgba(255,255,255,0.75);
font-size: 0.82rem;
font-weight: 500;
transition: background 0.15s, color 0.15s;
cursor: pointer;
text-decoration: none;
}
.nav-link:hover,
.nav-link.active {
background: rgba(255,255,255,0.1);
color: #fff;
}
.nav-link .nav-icon { font-size: 1rem; flex-shrink: 0; opacity: 0.8; }
.nav-link.active .nav-icon { opacity: 1; }
.sidebar-footer {
padding: 14px 20px;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 0.72rem;
color: rgba(255,255,255,0.4);
}
/* ── Overlay móvil ────────────────────────────────────────── */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 150;
}
.sidebar-overlay.show { display: block; }
/* ── Contenido principal ──────────────────────────────────── */
.main-content {
flex: 1;
margin-left: var(--sidebar-w);
display: flex;
flex-direction: column;
min-height: 100vh;
/* min-width:0 es OBLIGATORIO, no cosmético: un flex item vale por defecto
min-width:auto, o sea el ancho de su contenido. Sin esto, una tabla ancha
estira .main-content por encima del viewport en móvil y el overflow-x:auto
de .table-wrap NUNCA se activa - el wrapper queda de adorno y la página
entera scrollea en horizontal. */
min-width: 0;
}
/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 0 24px;
height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.hamburger-btn {
display: none;
background: none;
border: none;
cursor: pointer;
font-size: 1.3rem;
color: var(--text);
padding: 4px;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.user-chip {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--text-muted);
background: var(--bg);
border: 1px solid var(--border);
padding: 5px 12px;
border-radius: 20px;
}
.user-chip strong { color: var(--text); }
/* ── Page content ─────────────────────────────────────────── */
.page-content { padding: 24px; flex: 1; }
.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: 1.15rem; font-weight: 700; }
.page-header p { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; }
/* ── Cards ────────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 24px;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.card-title {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-muted);
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
/* ── Botones ──────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: var(--radius);
font-size: 0.78rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
text-decoration: none;
white-space: nowrap;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary {
background: var(--primary);
color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-secondary {
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { background: var(--border); }
.btn-success {
background: var(--success);
color: #fff;
}
.btn-danger {
background: var(--danger);
color: #fff;
}
.btn-warning {
background: var(--warning);
color: #fff;
}
.btn-sm { padding: 4px 10px; font-size: 0.72rem; }
.btn-lg { padding: 10px 22px; font-size: 0.9rem; }
.btn-full { width: 100%; justify-content: center; }
/* Grupo de botones en tabla (patrón obligatorio) */
.btn-group {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: nowrap;
}
/* ── Formularios ──────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: var(--text);
margin-bottom: 5px;
}
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-control {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.82rem;
color: var(--text);
background: var(--surface);
transition: border-color 0.15s, box-shadow 0.15s;
font-family: var(--font-body);
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(26,58,92,0.1);
}
.form-control::placeholder { color: var(--text-muted); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-hint { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; }
/* ── Tablas ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
}
thead tr { background: var(--primary); }
thead th {
color: #fff;
font-weight: 600;
font-size: 0.72rem;
text-align: left;
padding: 10px 14px;
white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; }
tbody tr:hover { background: var(--bg); }
tbody tr:last-child { border-bottom: none; }
td {
padding: 9px 14px;
vertical-align: middle;
color: var(--text);
}
/* ── Badges ───────────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
}
.badge-success { background: rgba(22,163,74,0.1); color: var(--success); }
.badge-danger { background: rgba(220,38,38,0.1); color: var(--danger); }
.badge-warning { background: rgba(217,119,6,0.1); color: var(--warning); }
.badge-primary { background: rgba(26,58,92,0.1); color: var(--primary); }
.badge-muted { background: rgba(0,0,0,0.06); color: var(--text-muted); }
/* ── Alertas / notificaciones ─────────────────────────────── */
.alert {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 11px 14px;
border-radius: var(--radius);
font-size: 0.78rem;
line-height: 1.6;
margin-bottom: 14px;
}
.alert-success { background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.3); color: #14532d; }
.alert-danger { background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.3); color: #7f1d1d; }
.alert-warning { background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.3); color: #78350f; }
.alert-info { background: rgba(26,58,92,0.06); border: 1px solid rgba(26,58,92,0.2); color: var(--primary); }
/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 300;
align-items: center;
justify-content: center;
padding: 16px;
}
.modal-overlay.show { display: flex; }
/* 🔴 El tope de altura NO es cosmético. El overlay centra con flex y el modal no tenía límite,
así que una ficha larga -empleado, contrato- crecía por igual hacia arriba y hacia abajo hasta
salirse de la pantalla: el título quedaba cortado y los botones Guardar / Cancelar caían FUERA
del viewport, sin forma de alcanzarlos. La página no scrollea porque el overlay es `fixed`.
Resultado: el formulario se veía entero y no se podía enviar. El scroll va DENTRO del modal.
Los 32px son el `padding: 16px` del overlay, arriba y abajo. */
.modal {
background: var(--surface);
border-radius: var(--radius);
width: 100%;
max-width: 480px;
max-height: calc(100vh - 32px);
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
animation: modalIn 0.2s ease;
}
/* Con la estructura canónica, cabecera y pie se quedan fijos y solo el cuerpo scrollea: los
botones siempre visibles, que es el punto. Sin ella, scrollea el modal completo. */
.modal:has(> .modal-body) { display: flex; flex-direction: column; }
.modal:has(> .modal-body) > .modal-header,
.modal:has(> .modal-body) > .modal-footer { flex-shrink: 0; }
.modal:has(> .modal-body) > .modal-body { overflow-y: auto; }
.modal:not(:has(> .modal-body)) { overflow-y: auto; }
@keyframes modalIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 0.9rem; font-weight: 700; }
.modal-close {
background: none; border: none; font-size: 1.2rem;
cursor: pointer; color: var(--text-muted);
}
.modal-body { padding: 20px; }
.modal-footer {
padding: 14px 20px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* ── Utilidades ───────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-primary { color: var(--primary); }
.fw-bold { font-weight: 700; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
/* auto-fit y no 4 columnas fijas: con 4 KPI en una pantalla mediana, las columnas fijas
dejan los números apretados antes de llegar al breakpoint de móvil. */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
/* ── LOGIN ────────────────────────────────────────────────── */
.login-page {
min-height: 100vh;
/* Fondo claro (menos desgaste visual): base azul muy pálida + glow sutil de marca en la
esquina. Mismo criterio que conjuntos, en vez del degradado azul oscuro anterior. */
background:
radial-gradient(circle at bottom right, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 42%),
linear-gradient(160deg, #f7faff 0%, #eef4fd 55%, #e7f0fc 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.login-card {
background: var(--surface);
border-radius: var(--radius);
width: 100%;
max-width: 360px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
padding: 36px 32px 28px;
}
.login-logo-wrap {
text-align: center;
margin-bottom: 20px;
}
.login-logo-wrap img {
max-height: 60px;
max-width: 180px;
object-fit: contain;
}
.login-title {
font-size: 1rem;
font-weight: 700;
color: var(--text);
text-align: center;
margin-bottom: 4px;
}
.login-sub {
font-size: 0.72rem;
color: var(--text-muted);
text-align: center;
margin-bottom: 22px;
}
.btn-login {
background: var(--primary);
color: #fff;
border-radius: var(--radius);
}
.btn-login:hover { background: var(--primary-hover); }
.login-footer {
text-align: center;
margin-top: 18px;
font-size: 0.7rem;
color: var(--text-muted);
}
/* ── Modales con el patrón ANTERIOR (puente de compatibilidad) ────────────────
El canónico de la base es `.modal-header` / `.modal-body` / `.modal-footer`, y el relleno
vive en esos tres. Talentum tiene 33 modales escritos antes de eso: el título cuelga suelto
del `.modal` y los campos van detrás sin envoltorio, así que al traer el CSS de la base se
quedaron SIN relleno -pegados al borde- y sin la línea que separa el título.
Estas dos reglas les dan el mismo aspecto sin tocar los 33 HTML, que es donde se rompen las
cosas. `:has()` detecta si el modal ya usa la estructura nueva y entonces no hace nada.
⚠️ Es un PUENTE, no el destino: un modal nuevo se escribe con la estructura canónica. Al
migrar el último, este bloque se borra. Mientras tanto los dos patrones se ven igual, que es
lo que el usuario necesita hoy.
─────────────────────────────────────────────────────────────────────────── */
.modal:not(:has(> .modal-body)) {
padding: 20px;
}
.modal:not(:has(> .modal-body)) > .modal-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
/* Márgenes negativos para que la línea llegue de borde a borde pese al padding del modal. */
margin: -20px -20px 18px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
/* ══════════════════════════════════════════════════════════════════════════════
COMPONENTES PROPIOS DE TALENTUM
------------------------------------------------------------------------------
Todo lo de arriba viene de `generalFormat` y NO se edita aquí: se corrige en la
base y se vuelve a bajar. Debajo va solo lo del producto -liquidación de
nómina-: el asistente por pasos, la zona de carga del XLSX, los niveles de ARL
y las tarjetas de indicadores.
🔴 AL AÑADIR ALGO AQUÍ, CERRAR SIEMPRE EL COMENTARIO. Un comentario abierto y
sin cerrar se traga en silencio todas las reglas siguientes hasta el próximo
cierre: pasó al reconstruir este archivo y dejó `.hidden` dentro del
comentario, así que las alertas de `login` y `forgot-password` se veían
SIEMPRE - dos barras, roja y verde, sin texto. El navegador no avisa de esto.
══════════════════════════════════════════════════════════════════════════════ */
/* ── Logo y marca del sidebar ─────────────────────────────────────────────────
⚠️ DEBE SUBIR A LA BASE: `generalFormat` usa `![]()
` en su
sidebar y en su login pero NO define la clase, así que allí el logo se pinta
al tamaño natural del archivo. Aquí sí está dimensionada. */
.app-logo {
width: 36px; height: 36px; object-fit: contain;
border-radius: 6px; background: rgba(255,255,255,0.1); padding: 3px; flex-shrink: 0;
}
.brand-name { display: block; }
.brand-sub { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.5); font-weight: 400; }
/* ── Utilidades ───────────────────────────────────────────────────────────────
⚠️ DEBEN SUBIR A LA BASE: son genéricas y las usan todas las pantallas del
producto. La base trae otras equivalentes (`.mb-1`, `.mt-2`, `.grid-3`) pero
no estas, así que hoy conviven las dos familias. Al unificarlas se renombra en
el HTML, no se duplica el CSS. */
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.flex-1 { flex: 1; }
.hidden { display: none !important; }
.btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.badge-info { background: #dbeafe; color: #1d4ed8; }
.badge-secondary { background: #e2e8f0; color: #475569; }
.spinner {
display: inline-block; width: 18px; height: 18px;
border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Dinero: cifras alineadas por columna. */
.cop { font-variant-numeric: tabular-nums; }
/* Nivel de riesgo ARL (I a V): del verde al rojo, como en la tabla del decreto. */
.arl-1 { color: #16a34a; }
.arl-2 { color: #65a30d; }
.arl-3 { color: #d97706; }
.arl-4 { color: #ea580c; }
.arl-5 { color: #dc2626; }
/* ── Tarjetas de resumen de la liquidación ── */
.cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.card-value { font-size: 22px; font-weight: 700; color: var(--primary); }
.card-value.success { color: var(--success); }
.card-value.accent { color: var(--accent); }
.card-value.danger { color: var(--danger); }
.card-sub { font-size: 12px; color: var(--text-muted); }
/* El color del borde dice de qué lado de la nómina es la cifra. */
.card.neto { border-left: 4px solid var(--success); }
.card.devengado { border-left: 4px solid var(--primary); }
.card.deduccion { border-left: 4px solid var(--danger); }
.card.aportes { border-left: 4px solid var(--accent); }
/* ── Panel ── */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.panel-title { font-size: 15px; font-weight: 600; color: var(--primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
/* Acciones dentro de una celda: `nowrap` es crítico o se apilan en pantalla pequeña. */
.td-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.table-wrap { overflow-x: auto; }
/* ── Formularios de dos y tres columnas ── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
/* ── Zona de carga del XLSX de novedades ── */
.upload-zone {
border: 2px dashed var(--border); border-radius: 10px; padding: 32px;
text-align: center; cursor: pointer; transition: all .2s;
}
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--primary); background: #eff6ff; }
.upload-zone svg { width: 40px; height: 40px; color: var(--text-muted); margin-bottom: 10px; }
.upload-zone p { color: var(--text-muted); font-size: 14px; }
.upload-zone strong { color: var(--primary); }
/* ── Asistente por pasos de la liquidación ── */
.steps { display: flex; align-items: center; gap: 0; margin-bottom: 24px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; flex: 1; }
.step-num {
width: 28px; height: 28px; border-radius: 50%; background: var(--border);
color: var(--text-muted); display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.step.active .step-num { background: var(--primary); color: #fff; }
.step.done .step-num { background: var(--success); color: #fff; }
.step-label { font-size: 12px; color: var(--text-muted); }
.step.active .step-label { color: var(--primary); font-weight: 600; }
.step-line { flex: 1; height: 1px; background: var(--border); margin: 0 8px; min-width: 20px; }
/* ── Tarjetas de estadísticas ─────────────────────────────────────────────────
Van AQUÍ, no en el `