/* ==========================================================================
Cenva · Tema de marca para Bootstrap 5.3 · PALETA COSTA RICA (activa)
--------------------------------------------------------------------------
Cargar DESPUÉS del CSS de Bootstrap y ANTES de tus estilos propios:
La paleta VENEZUELA (azul/amarillo/rojo) queda al final, comentada,
por si se quiere alternar: reemplazá el bloque :root de TOKENS por ese.
========================================================================== */
/* ==========================================================================
1. TOKENS DE MARCA · Costa Rica (tinta + ámbar)
========================================================================== */
:root {
/* Marca */
--cv-tinta: #141B34; /* primario / superficies oscuras (sidebar, login) */
--cv-tinta-700: #0E1426; /* hover de tinta */
--cv-tinta-300: #3551C8; /* azul de enlace / foco */
--cv-ambar: #FFC24B; /* acento / CTA / cumbre del logo */
--cv-ambar-600: #EFA431; /* hover de ámbar / degradado */
/* Neutrales */
--cv-papel: #F6F5F1; /* fondo de app */
--cv-papel-2: #FBFAF7; /* cabeceras de tabla / cards sutiles */
--cv-tinta-texto: #141B34; /* titulares */
--cv-cuerpo: #3D4360; /* texto de cuerpo */
--cv-suave: #7A8095; /* texto secundario */
--cv-borde: #ECEAE2; /* bordes / divisores */
--cv-borde-2: #DAD7CE; /* bordes de inputs */
/* Estados semánticos */
--cv-ok: #0FB5A4; --cv-ok-bg:#E4F7F4; --cv-ok-fg:#0A7D72;
--cv-warn: #FFC24B; --cv-warn-bg:#FFF3D6; --cv-warn-fg:#9A6B00;
--cv-err: #F2685E; --cv-err-bg:#FDECEA; --cv-err-fg:#C53B33;
/* Tipografía */
--cv-font-display: 'Space Grotesk', system-ui, sans-serif;
--cv-font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
--cv-font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Radios */
--cv-r-sm: 8px; --cv-r-md: 11px; --cv-r-lg: 16px;
/* ---------- Mapeo a Bootstrap 5.3 ---------- */
--bs-primary: var(--cv-tinta);
--bs-primary-rgb: 20, 27, 52;
--bs-link-color: var(--cv-tinta-300);
--bs-link-color-rgb: 53, 81, 200;
--bs-link-hover-color: var(--cv-tinta-700);
--bs-body-color: var(--cv-cuerpo);
--bs-body-color-rgb: 61, 67, 96;
--bs-body-bg: var(--cv-papel);
--bs-border-color: var(--cv-borde);
--bs-border-radius: var(--cv-r-md);
--bs-font-sans-serif: var(--cv-font-ui);
--bs-success: var(--cv-ok);
--bs-warning: var(--cv-ambar);
--bs-danger: var(--cv-err);
}
/* ==========================================================================
2. TIPOGRAFÍA
========================================================================== */
body { font-family: var(--cv-font-ui); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,.h1,.h2,.h3,.display-1,.display-2,.fw-display {
font-family: var(--cv-font-display);
letter-spacing: -0.02em;
color: var(--cv-tinta-texto);
}
.text-mono, .clave, code, .fm { font-family: var(--cv-font-mono); }
/* ==========================================================================
3. BOTONES
========================================================================== */
.btn { border-radius: var(--cv-r-md); font-weight: 600; }
/* CTA principal = ÁMBAR con texto tinta ("Nueva factura") */
.btn-primary, .btn-cv-cta {
--bs-btn-color:#141B34; --bs-btn-bg:var(--cv-ambar); --bs-btn-border-color:var(--cv-ambar);
--bs-btn-hover-color:#141B34; --bs-btn-hover-bg:var(--cv-ambar-600); --bs-btn-hover-border-color:var(--cv-ambar-600);
--bs-btn-active-bg:var(--cv-ambar-600);
font-weight: 700;
}
/* Sólido = TINTA con texto blanco ("Guardar", "Emitir") */
.btn-cv-tinta {
--bs-btn-color:#fff; --bs-btn-bg:var(--cv-tinta); --bs-btn-border-color:var(--cv-tinta);
--bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--cv-tinta-700); --bs-btn-hover-border-color:var(--cv-tinta-700);
}
/* Terciario = contorno ("Cancelar") */
.btn-outline-secondary {
--bs-btn-color: var(--cv-cuerpo);
--bs-btn-border-color: var(--cv-borde-2);
--bs-btn-hover-bg: var(--cv-papel-2);
--bs-btn-hover-color: var(--cv-tinta);
--bs-btn-hover-border-color: var(--cv-borde-2);
}
/* ==========================================================================
4. SIDEBAR (fondo tinta)
========================================================================== */
.cv-sidebar { background: var(--cv-tinta); color:#9AA1BD; width:244px; padding:22px 16px; }
.cv-sidebar .nav-link {
color:#9AA1BD; font-weight:500; border-radius:var(--cv-r-md);
padding:11px 12px; display:flex; align-items:center; gap:12px; margin-bottom:3px;
}
.cv-sidebar .nav-link:hover { color:#fff; background:rgba(255,255,255,.06); }
.cv-sidebar .nav-link.active {
color:#fff; background:rgba(255,194,75,.12); position:relative; font-weight:600;
}
.cv-sidebar .nav-link.active::before {
content:""; position:absolute; left:0; top:9px; bottom:9px;
width:3px; border-radius:3px; background:var(--cv-ambar);
}
.cv-sidebar .nav-link.active i { color: var(--cv-ambar); }
/* ==========================================================================
5. BADGES / PÍLDORAS DE ESTADO
========================================================================== */
.cv-badge {
display:inline-flex; align-items:center; gap:6px;
font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px;
}
.cv-badge::before { content:""; width:6px; height:6px; border-radius:50%; }
.cv-badge-ok { background:var(--cv-ok-bg); color:var(--cv-ok-fg); }
.cv-badge-ok::before { background:var(--cv-ok); }
.cv-badge-warn { background:var(--cv-warn-bg); color:var(--cv-warn-fg); }
.cv-badge-warn::before { background:var(--cv-warn); }
.cv-badge-err { background:var(--cv-err-bg); color:var(--cv-err-fg); }
.cv-badge-err::before { background:var(--cv-err); }
/* ==========================================================================
6. CARDS / KPI / TABLAS
========================================================================== */
.card, .cv-card { border:1px solid var(--cv-borde); border-radius:var(--cv-r-lg); background:#fff; }
.cv-kpi-value { font-family:var(--cv-font-display); font-size:30px; font-weight:600; color:var(--cv-tinta); letter-spacing:-.02em; }
.cv-kpi-label { font-size:13px; color:var(--cv-suave); font-weight:500; }
.table thead th {
background:var(--cv-papel-2); font-size:11px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:#9AA0B0; border-bottom:1px solid var(--cv-borde);
}
.table td { vertical-align:middle; }
/* ==========================================================================
7. INPUTS
========================================================================== */
.form-control, .form-select {
border:1px solid var(--cv-borde-2); border-radius:var(--cv-r-md);
font-family:var(--cv-font-ui); color:var(--cv-tinta);
}
.form-control:focus, .form-select:focus {
border-color:var(--cv-tinta-300); box-shadow:0 0 0 3px rgba(53,81,200,.15);
}
/* ==========================================================================
PALETA ALTERNATIVA · Venezuela (azul/amarillo/rojo)
Para activarla, reemplazá el bloque :root de TOKENS por:
--------------------------------------------------------------------------
:root {
--cv-tinta:#00247D; --cv-tinta-700:#001B5E; --cv-tinta-300:#1E50C8;
--cv-ambar:#FFCC00; --cv-ambar-600:#F2B600;
--cv-tinta-texto:#00247D;
--cv-err:#CF142B; --cv-err-bg:#FDECEA; --cv-err-fg:#C53B33;
--bs-primary:#00247D; --bs-primary-rgb:0,36,125;
... (resto idéntico)
}
Y agregá la franja tricolor .cv-flag-bar (amarillo/azul/rojo) en el login,
más el renglón inferior rojo en el logo (usar cenva-mark de la versión VE).
========================================================================== */
/* ==========================================================================
RESPONSIVE · Targets táctiles (mín. 44px en móvil/tablet < lg)
Mejora la accesibilidad táctil sin alterar el layout de escritorio.
inline-flex en .btn conserva el ancho según contenido (no lo vuelve block).
========================================================================== */
@media (max-width: 991.98px) {
.btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sidebar-menu a,
.dropdown-item {
min-height: 44px;
display: flex;
align-items: center;
}
}