/* ============================================================================
SISTEMA DE CONTROL — ACANTILADA E.I.R.L.
Hoja de estilos ÚNICA del sistema · assets/css/sistema.css
----------------------------------------------------------------------------
Todas las páginas cargan SOLO este archivo (vía _comun/plantilla/header.php).
No crear hojas de estilo por módulo con colores fijos: usar las variables
--ia-* de abajo, así cada módulo cambia solo con el tema.
TEMAS (atributo data-tema en , lo cambia el botón de la barra superior)
· verde → tema actual: grafito oscuro con acento turquesa (por defecto)
· oscuro → noche: todo negro, acento azul acero
· claro → día: todo blanco, acento azul petróleo
Índice
§T Tokens de los tres temas
§B Base global (tipografía, Bootstrap / SB Admin en todas las páginas)
§1… Componentes del sistema (sidebar, topbar, modales, tablas, KPIs …)
§Z Selector de tema + utilidades nuevas
============================================================================ */
/* ============================================================
§T — TOKENS DE TEMA
============================================================ */
:root,
:root[data-tema="verde"] {
--ia-bg: #0f1419;
--ia-bg-rgb: 15 20 25;
--ia-panel: #1a212b;
--ia-panel-rgb: 26 33 43;
--ia-panel2: #222b37;
--ia-line: #2a3441;
--ia-text: #e6edf3;
--ia-muted: #2dd4bf;
--ia-accent: #2dd4bf;
--ia-accent-rgb: 45 212 191;
--ia-accent-b: #14b8a6;
--ia-accent-d: #06302b; /* texto sobre fondo acento */
--ia-accent-h: #5eead4; /* hover del acento */
--ia-accent2: #f59e0b;
--ia-accent2-rgb: 245 158 11;
--ia-accent2-bg: #3d2900;
--ia-danger: #f70000;
--ia-danger-rgb: 241 0 0;
--ia-info: #60a5fa;
--ia-info-rgb: 96 165 250;
--ia-success: #34d399;
--ia-success-rgb: 52 211 153;
--ia-warn: #f8fb24;
--ia-warn-rgb: 248 251 36;
--ia-chip: #374151;
--ia-overlay-rgb: 255 255 255; /* realces sutiles sobre fondo */
--ia-sidebar-top: #0a0e13;
--ia-input-bg: #222b37;
--ia-shadow: 0 4px 12px rgba(0,0,0,.35);
--ia-shadow-lg: 0 8px 24px rgba(0,0,0,.5);
--ia-radius: 8px;
--ia-radius-sm: 4px;
--ia-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
color-scheme: dark;
}
/* NOCHE — todo negro */
:root[data-tema="oscuro"] {
--ia-bg: #000000;
--ia-bg-rgb: 0 0 0;
--ia-panel: #0d0e10;
--ia-panel-rgb: 13 14 16;
--ia-panel2: #17191c;
--ia-line: #2a2d32;
--ia-text: #ededed;
--ia-muted: #7cb8ff;
--ia-accent: #7cb8ff;
--ia-accent-rgb: 124 184 255;
--ia-accent-b: #4f9cf5;
--ia-accent-d: #04192e;
--ia-accent-h: #a9d0ff;
--ia-accent2: #f5a524;
--ia-accent2-rgb: 245 165 36;
--ia-accent2-bg: #2e2005;
--ia-danger: #f70000;
--ia-danger-rgb: 241 0 0;
--ia-info: #7cb8ff;
--ia-info-rgb: 124 184 255;
--ia-success: #4ade80;
--ia-success-rgb: 74 222 128;
--ia-warn: #f8fb24;
--ia-warn-rgb: 248 251 36;
--ia-chip: #2a2d32;
--ia-overlay-rgb: 255 255 255;
--ia-sidebar-top: #000000;
--ia-input-bg: #121316;
--ia-shadow: 0 4px 12px rgba(0,0,0,.6);
--ia-shadow-lg: 0 8px 24px rgba(0,0,0,.8);
color-scheme: dark;
}
/* DÍA — todo blanco */
:root[data-tema="claro"] {
--ia-bg: #f3f5f7;
--ia-bg-rgb: 243 245 247;
--ia-panel: #ffffff;
--ia-panel-rgb: 255 255 255;
--ia-panel2: #f6f8fa;
--ia-line: #d8dee4;
--ia-text: #1b2631;
--ia-muted: #0b6e7f;
--ia-accent: #0b6e7f;
--ia-accent-rgb: 11 110 127;
--ia-accent-b: #0e8a9e;
--ia-accent-d: #ffffff;
--ia-accent-h: #095866;
--ia-accent2: #b45309;
--ia-accent2-rgb: 180 83 9;
--ia-accent2-bg: #fdf1dc;
--ia-danger: #f70000;
--ia-danger-rgb: 241 0 0;
--ia-info: #1d5fc9;
--ia-info-rgb: 29 95 201;
--ia-success: #13795b;
--ia-success-rgb: 19 121 91;
--ia-warn: #f8fb24;
--ia-warn-rgb: 248 251 36;
--ia-chip: #e6eaee;
--ia-overlay-rgb: 15 23 42;
--ia-sidebar-top: #ffffff;
--ia-input-bg: #ffffff;
--ia-shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
--ia-shadow-lg: 0 10px 24px rgba(16,24,40,.12);
color-scheme: light;
}
/* ============================================================
§B — BASE GLOBAL
Se aplica a todas las páginas, estén o no dentro de .ia-tema
============================================================ */
html, body { background: var(--ia-bg); }
body, body#page-top {
font-family: var(--ia-font);
color: var(--ia-text);
font-size: .925rem;
-webkit-font-smoothing: antialiased;
}
body#page-top, #wrapper, #content-wrapper, #content { background: var(--ia-bg) !important; }
#content { min-height: 100vh; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ia-text); font-weight: 600; letter-spacing: -.005em; }
a { color: var(--ia-accent); }
a:hover { color: var(--ia-accent-h); }
hr { border-top-color: var(--ia-line); }
::selection { background: rgb(var(--ia-accent-rgb) / .3); }
/* Números alineados en tablas y KPIs */
table, .table, .kpi, .stat, .num, input[type="number"] { font-variant-numeric: tabular-nums; }
/* Foco visible para teclado */
:focus-visible { outline: 2px solid var(--ia-accent); outline-offset: 2px; }
/* Utilidades de color de SB Admin / Bootstrap que asumían fondo blanco */
.text-gray-100, .text-gray-200, .text-gray-300 { color: var(--ia-muted) !important; }
.text-gray-400, .text-gray-500, .text-gray-600 { color: var(--ia-muted) !important; }
.text-gray-700, .text-gray-800, .text-gray-900, .text-dark { color: var(--ia-text) !important; }
.text-muted { color: var(--ia-muted) !important; }
.text-primary { color: var(--ia-accent) !important; }
.text-info { color: var(--ia-info) !important; }
.text-success { color: var(--ia-success) !important; }
.text-danger { color: var(--ia-danger) !important; }
.text-warning { color: var(--ia-warn) !important; }
.bg-white, .bg-light, .bg-gray-100, .bg-gray-200 { background-color: var(--ia-panel) !important; color: var(--ia-text); }
.bg-dark { background-color: var(--ia-panel) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--ia-line) !important; }
.shadow, .shadow-sm { box-shadow: var(--ia-shadow) !important; }
/* Tarjetas */
.card {
background: var(--ia-panel);
border: 1px solid var(--ia-line);
border-radius: var(--ia-radius);
color: var(--ia-text);
margin-bottom: 1.25rem;
box-shadow: var(--ia-shadow);
}
.card-header {
background: var(--ia-panel2);
border-bottom: 1px solid var(--ia-line);
color: var(--ia-text);
font-weight: 600;
padding: .8rem 1.1rem;
}
.card-header:first-child { border-radius: calc(var(--ia-radius) - 1px) calc(var(--ia-radius) - 1px) 0 0; }
.card-footer { background: var(--ia-panel2); border-top: 1px solid var(--ia-line); }
.card-body { color: var(--ia-text); }
/* Formularios */
.form-control, .custom-select, select.form-control, textarea.form-control {
background-color: var(--ia-input-bg);
color: var(--ia-text);
border: 1px solid var(--ia-line);
border-radius: 6px;
}
.form-control:focus, .custom-select:focus {
background-color: var(--ia-input-bg);
color: var(--ia-text);
border-color: var(--ia-accent);
box-shadow: 0 0 0 3px rgb(var(--ia-accent-rgb) / .18);
}
.form-control::placeholder { color: var(--ia-muted); opacity: .8; }
.form-control:disabled, .form-control[readonly] { background-color: var(--ia-panel2); color: var(--ia-muted); }
select option { background: var(--ia-panel); color: var(--ia-text); }
label, .col-form-label { color: var(--ia-text); font-weight: 500; }
.input-group-text { background: var(--ia-panel2); border-color: var(--ia-line); color: var(--ia-muted); }
.custom-control-label::before { background-color: var(--ia-input-bg); border-color: var(--ia-line); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ia-accent); border-color: var(--ia-accent); }
/* Botones Bootstrap con los colores del tema */
.btn { border-radius: 6px; font-weight: 500; }
.btn-primary { background: var(--ia-accent); border-color: var(--ia-accent); color: var(--ia-accent-d); }
.btn-primary:hover, .btn-primary:focus { background: var(--ia-accent-h); border-color: var(--ia-accent-h); color: var(--ia-accent-d); }
.btn-outline-primary { color: var(--ia-accent); border-color: var(--ia-accent); }
.btn-outline-primary:hover { background: var(--ia-accent); color: var(--ia-accent-d); }
.btn-secondary, .btn-light { background: var(--ia-panel2); border-color: var(--ia-line); color: var(--ia-text); }
.btn-secondary:hover, .btn-light:hover { background: var(--ia-line); border-color: var(--ia-line); color: var(--ia-text); }
.btn-info { background: var(--ia-info); border-color: var(--ia-info); color: #fff; }
.btn-success { background: var(--ia-success); border-color: var(--ia-success); color: #fff; }
.btn-danger { background: var(--ia-danger); border-color: var(--ia-danger); color: #fff; }
.btn-warning { background: var(--ia-warn); border-color: var(--ia-warn); color: #1b1300; }
:root[data-tema="verde"] .btn-success, :root:not([data-tema]) .btn-success,
:root[data-tema="oscuro"] .btn-success { color: #04261a; }
:root[data-tema="verde"] .btn-info, :root:not([data-tema]) .btn-info,
:root[data-tema="oscuro"] .btn-info { color: #071a33; }
/* Tablas genéricas */
.table { color: var(--ia-text); }
.table th, .table td { border-color: var(--ia-line); vertical-align: middle; }
.table thead th { background: var(--ia-panel2); color: var(--ia-muted); border-bottom: 1px solid var(--ia-line); font-weight: 600; font-size: .8rem; }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--ia-line); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgb(var(--ia-overlay-rgb) / .025); }
.table-hover tbody tr:hover { background-color: rgb(var(--ia-accent-rgb) / .07); color: var(--ia-text); }
.table-dark, .thead-dark th { background: var(--ia-panel2) !important; color: var(--ia-text) !important; border-color: var(--ia-line) !important; }
.table-light, .thead-light th { background: var(--ia-panel2) !important; color: var(--ia-muted) !important; }
/* Listas, menús, pestañas, paginación, alertas */
.list-group-item { background: var(--ia-panel); border-color: var(--ia-line); color: var(--ia-text); }
.dropdown-menu { background: var(--ia-panel); border: 1px solid var(--ia-line); color: var(--ia-text); box-shadow: var(--ia-shadow-lg); }
.dropdown-item { color: var(--ia-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ia-panel2); color: var(--ia-accent); }
.dropdown-header { color: var(--ia-muted); }
.dropdown-divider { border-top-color: var(--ia-line); }
.nav-tabs { border-bottom-color: var(--ia-line); }
.nav-tabs .nav-link { color: var(--ia-muted); }
.nav-tabs .nav-link:hover { border-color: var(--ia-line); color: var(--ia-text); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: var(--ia-panel); color: var(--ia-accent); border-color: var(--ia-line) var(--ia-line) var(--ia-panel); }
.nav-pills .nav-link.active { background: var(--ia-accent); color: var(--ia-accent-d); }
.page-link { background: var(--ia-panel); border-color: var(--ia-line); color: var(--ia-text); }
.page-link:hover { background: var(--ia-panel2); color: var(--ia-accent); border-color: var(--ia-line); }
.page-item.active .page-link { background: var(--ia-accent); border-color: var(--ia-accent); color: var(--ia-accent-d); }
.page-item.disabled .page-link { background: var(--ia-panel); border-color: var(--ia-line); color: var(--ia-muted); }
.alert { border-radius: var(--ia-radius); border-width: 1px; }
.alert-info { background: rgb(var(--ia-info-rgb) / .1); border-color: rgb(var(--ia-info-rgb) / .35); color: var(--ia-text); }
.alert-success { background: rgb(var(--ia-success-rgb) / .1); border-color: rgb(var(--ia-success-rgb) / .35); color: var(--ia-text); }
.alert-warning { background: rgb(var(--ia-warn-rgb) / .12); border-color: rgb(var(--ia-warn-rgb) / .4); color: var(--ia-text); }
.alert-danger { background: rgb(var(--ia-danger-rgb) / .1); border-color: rgb(var(--ia-danger-rgb) / .35); color: var(--ia-text); }
.badge-primary { background: var(--ia-accent); color: var(--ia-accent-d); }
.badge-secondary, .badge-light { background: var(--ia-chip); color: var(--ia-text); }
.progress { background: var(--ia-panel2); }
.progress-bar { background: var(--ia-accent); }
.close { color: var(--ia-text); text-shadow: none; }
.close:hover { color: var(--ia-danger); }
.tooltip-inner { background: var(--ia-text); color: var(--ia-bg); }
.popover { background: var(--ia-panel); border-color: var(--ia-line); }
.popover-body { color: var(--ia-text); }
/* Modales Bootstrap genéricos (todos, no solo .ia-modal) */
.modal-content { background: var(--ia-panel); color: var(--ia-text); border: 1px solid var(--ia-line); border-radius: var(--ia-radius); }
.modal-header { background: var(--ia-panel2); border-bottom: 1px solid var(--ia-line); color: var(--ia-text); }
.modal-footer { background: var(--ia-panel2); border-top: 1px solid var(--ia-line); }
.modal-title { color: var(--ia-text); }
/* DataTables fuera de .ia-tema */
.dataTables_wrapper, .dataTables_wrapper label, .dataTables_info { color: var(--ia-muted) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
background: var(--ia-input-bg) !important; color: var(--ia-text) !important;
border: 1px solid var(--ia-line) !important; border-radius: 6px;
}
table.dataTable tbody tr { background-color: transparent; }
table.dataTable.no-footer { border-bottom-color: var(--ia-line); }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--ia-text) !important; }
/* SweetAlert2 */
.swal2-popup, .swal2-modal { background: var(--ia-panel) !important; color: var(--ia-text) !important; border: 1px solid var(--ia-line); }
.swal2-title, .swal2-content, .swal2-html-container { color: var(--ia-text) !important; }
.swal2-input, .swal2-textarea, .swal2-select { background: var(--ia-input-bg) !important; color: var(--ia-text) !important; border-color: var(--ia-line) !important; }
.swal2-styled.swal2-confirm { background-color: var(--ia-accent) !important; color: var(--ia-accent-d) !important; }
/* Tema claro: la sombra de la topbar y el sidebar debe ser suave */
:root[data-tema="claro"] .navbar.topbar { box-shadow: 0 1px 0 var(--ia-line) !important; }
:root[data-tema="claro"] .sidebar.bg-dark,
:root[data-tema="claro"] .sidebar.sidebar-dark { background: #ffffff !important; }
:root[data-tema="claro"] .sidebar .sidebar-brand img { filter: none; }
:root[data-tema="claro"] .modal-backdrop.show { opacity: .35; }
:root[data-tema="claro"] footer.footer-tools .tool { filter: grayscale(1) brightness(.6); opacity: .35; }
:root[data-tema="claro"] .scroll-to-top i { color: #fff !important; }
/* Alias cortos usados por componentes antiguos (--bg, --line, --text…) */
:root {
--bg: var(--ia-bg); --panel: var(--ia-panel); --panel2: var(--ia-panel2);
--line: var(--ia-line); --text: var(--ia-text); --muted: var(--ia-muted);
--accent: var(--ia-accent); --accent2: var(--ia-accent2);
--danger: var(--ia-danger); --info: var(--ia-info); --success: var(--ia-success); --warn: var(--ia-warn);
}
/* Tema claro: texto blanco sobre botones/insignias de color sólido
(en los temas oscuros esos colores son pastel y llevan texto oscuro) */
:root[data-tema="claro"] .ia-tema .btn-ia.danger,
:root[data-tema="claro"] .ia-tema .btn-ia.warn,
:root[data-tema="claro"] .ia-modal .btn-danger,
:root[data-tema="claro"] #modalEliminar .btn-danger,
:root[data-tema="claro"] #backup-app .btn-ia.danger,
:root[data-tema="claro"] #backup-app .btn-ia.warn,
:root[data-tema="claro"] .ia-modal .modal-footer .btn-success,
:root[data-tema="claro"] .ia-tema .btn-aprobados,
:root[data-tema="claro"] .btn-success,
:root[data-tema="claro"] .btn-warning { color: #fff !important; }
:root[data-tema="claro"] .ia-tema .btn-ia.danger:hover,
:root[data-tema="claro"] .ia-modal .btn-danger:hover,
:root[data-tema="claro"] #modalEliminar .btn-danger:hover { background: #a61f1f !important; }
:root[data-tema="claro"] .ia-tema .btn-ia.warn:hover { background: #8a4f06 !important; }
/* SweetAlert v5 (swal()) usa .swal2-modal y otros nombres de clase */
.swal2-modal h2, .swal2-modal .swal2-content { color: var(--ia-text) !important; }
.swal2-modal .swal2-input, .swal2-modal .swal2-textarea, .swal2-modal select { background: var(--ia-input-bg) !important; color: var(--ia-text) !important; border-color: var(--ia-line) !important; }
.swal2-modal .swal2-confirm { background-color: var(--ia-accent) !important; color: var(--ia-accent-d) !important; }
.swal2-modal .swal2-cancel { background-color: var(--ia-panel2) !important; color: var(--ia-text) !important; border: 1px solid var(--ia-line) !important; }
.swal2-overlay, .swal2-container.swal2-shown { background-color: rgb(0 0 0 / .45) !important; }
/* ============================================================
§C — COMPATIBILIDAD con estilos antiguos (ex css/styles.css)
Se mantienen solo las reglas de diseño (sin colores fijos)
============================================================ */
.mb-4, .my-4 { margin-bottom: 1.5rem !important; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-clip: border-box; }
.card:not([class*="bg-"]) .card-header { color: var(--ia-accent); }
.datatable table.dataTable thead, .datatable table.dataTable tfoot,
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting { color: var(--ia-accent); }
.btn .feather, .feather { margin-top: -1px !important; height: .875rem !important; width: .875rem !important; }
.btn-icon .feather { margin-top: 0 !important; }
.datatable .btn-datatable { height: 20px !important; width: 20px !important; font-size: .75rem; border-radius: .35rem !important; }
.btn-transparent-dark { background-color: transparent; border-color: transparent; color: var(--ia-muted) !important; line-height: 1; }
.btn-icon { padding: 0; justify-content: center; overflow: hidden; border-radius: 100%; flex-shrink: 0; }
.fade:not(.show) { opacity: 1 !important; }
.table th, .table td { padding: .65rem; }
.selecto { background: var(--ia-input-bg); color: var(--ia-text); margin: 0; width: 130px; font-size: 12px; border: 1px solid var(--ia-line); height: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.dataTables_length { float: left; }
.dataTables_info { float: left; }
.btn-group { float: right; margin-left: 5px; }
@media (max-width: 641px) {
.dataTables_length, .dataTables_info { float: none; }
.btn-group { float: none; margin-bottom: 5px; width: 100%; }
}
/* Íconos de acciones (bd/iconos.php) */
.sc-ic { margin-right: 5px; color: inherit; }
.sc-ic-puntos { font-size: 18px; margin-right: 0; }
.sc-ic-info { color: var(--ia-info); }
.sc-ic-warn { color: var(--ia-warn); }
.sc-ic-danger { color: var(--ia-danger); }
.sc-ic-accent { color: var(--ia-accent); }
.sc-ic-accent2 { color: var(--ia-accent2); }
.sc-ic-muted { color: var(--ia-muted); }
/* Barra superior: filtros sin saltos de línea en pantallas medianas */
.navbar.topbar .sc-filtros { flex-wrap: nowrap; }
.navbar.topbar .sc-filtros .input-group { flex-wrap: nowrap; align-items: center; }
@media (max-width: 1399.98px) {
.navbar.topbar .sc-filtros .input-group > span { display: none !important; }
.navbar.topbar select.form-control-sm { min-width: 120px !important; }
}
/* ============================================================================
TEMA IA — Acantilada E.I.R.L
Hoja de estilos centralizada · Tema dark/turquesa
----------------------------------------------------------------------------
Uso:
1) Incluir en cualquier página añadiendo en el (o tras el menu.php):
... contenido ...
Estructura del archivo:
§1 Variables CSS (colores, tipografía)
§2 Reset / Body / wrapper general
§3 Sidebar (SB Admin 2 override)
§4 Topbar (SB Admin 2 override)
§5 Modal de logout y modales genéricos
§6 Footer con herramientas animadas
§7 Scrollbar y scroll-to-top
§8 Card-header genérico (compatibilidad legacy)
§9 Wrapper de módulo .ia-tema (cajas, alertas, botones)
§10 KPIs y tarjetas resumen
§11 Gráficos (Chart.js, selector de tipo, contenedores)
§12 Tablas (HTML simples + DataTables override)
§13 Filtros, formularios, inputs
§14 Badges, pills, días transcurridos
§15 Barra de progreso y log
§16 Marquee / carrusel de texto
§17 Iframes y mapas embed
§18 Responsive
============================================================================ */
/* ============================================================
§1 — Variables
============================================================ */
/* (variables movidas a la sección TEMAS) */
/* ============================================================
§2 — Body / wrapper general
============================================================ */
body#page-top { background: var(--ia-bg) !important; color: var(--ia-text); }
#wrapper { background: var(--ia-bg); }
#content-wrapper { background: var(--ia-bg) !important; }
#content { background: var(--ia-bg); min-height: 100vh; }
/* ============================================================
§3 — Sidebar (override SB Admin 2)
============================================================ */
.sidebar.bg-dark, .sidebar.sidebar-dark {
background: linear-gradient(180deg, var(--ia-sidebar-top) 0%, var(--ia-panel) 100%) !important;
border-right: 1px solid var(--ia-line);
}
.sidebar .sidebar-brand {
background: rgb(var(--ia-accent-rgb) / .05);
border-bottom: 1px solid var(--ia-line);
padding: 18px 10px;
}
.sidebar .sidebar-brand img { max-width: 70%; height: auto; }
.sidebar .sidebar-heading {
color: var(--ia-accent) !important;
font-size: .7rem;
letter-spacing: .5px;
text-transform: uppercase;
padding: 12px 16px 6px;
}
.sidebar hr.sidebar-divider { border-color: var(--ia-line) !important; margin: 8px 12px; }
.sidebar .nav-item .nav-link {
color: var(--ia-muted) !important;
padding: 10px 16px;
font-size: .88rem;
border-left: 3px solid transparent;
transition: background .15s, color .15s, border-color .15s;
}
.sidebar .nav-item .nav-link i {
color: var(--ia-muted) !important;
width: 20px; margin-right: 8px;
font-size: .95rem; transition: color .15s;
}
.sidebar .nav-item .nav-link:hover {
background: rgb(var(--ia-accent-rgb) / .07) !important;
color: var(--ia-text) !important;
border-left-color: var(--ia-accent);
}
.sidebar .nav-item .nav-link:hover i { color: var(--ia-accent) !important; }
.sidebar .nav-item.active .nav-link {
background: rgb(var(--ia-accent-rgb) / .1) !important;
color: var(--ia-accent) !important;
border-left-color: var(--ia-accent);
font-weight: 600;
}
.sidebar .nav-item.active .nav-link i { color: var(--ia-accent) !important; }
.sidebar .nav-item .collapse,
.sidebar .nav-item .collapsing {
background: var(--ia-panel2) !important;
margin: 0 8px 4px;
border-radius: 6px;
border: 1px solid var(--ia-line);
}
.sidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapsing .collapse-inner {
background: transparent !important;
box-shadow: none !important;
}
.sidebar .nav-item .collapse .collapse-item,
.sidebar .nav-item .collapsing .collapse-item {
color: var(--ia-muted) !important;
background: transparent !important;
padding: 7px 14px;
font-size: .83rem;
border-radius: 4px;
margin: 2px 4px;
}
.sidebar .nav-item .collapse .collapse-item:hover,
.sidebar .nav-item .collapsing .collapse-item:hover {
background: rgb(var(--ia-accent-rgb) / .08) !important;
color: var(--ia-accent) !important;
}
.sidebar .nav-item .collapse .collapse-item.active {
color: var(--ia-accent) !important;
background: rgb(var(--ia-accent-rgb) / .12) !important;
font-weight: 600;
}
.sidebar .collapse-header {
color: var(--ia-accent) !important;
font-size: .7rem;
padding: 6px 14px 2px;
}
#sidebarToggle {
background: var(--ia-panel2) !important;
color: var(--ia-accent) !important;
border: 1px solid var(--ia-line) !important;
}
#sidebarToggle:hover { background: var(--ia-accent) !important; color: var(--ia-accent-d) !important; }
/* ============================================================
§4 — Topbar (override SB Admin 2)
============================================================ */
.navbar.topbar.bg-dark, .navbar.topbar {
background: var(--ia-panel) !important;
border-bottom: 1px solid var(--ia-line) !important;
box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
.navbar.topbar #sidebarToggleTop { color: var(--ia-accent) !important; }
.navbar.topbar #sidebarToggleTop:hover { background: var(--ia-panel2) !important; }
.navbar.topbar #sidebarToggleTop i { color: var(--ia-accent) !important; }
.topbar-divider {
border-right: 1px solid var(--ia-line) !important;
margin: 0 8px;
height: 2.5rem;
}
.navbar.topbar .text-gray-500,
.navbar.topbar .text-gray-600,
.navbar.topbar .text-gray-100 {
color: var(--ia-muted) !important;
font-size: .75rem !important;
text-transform: uppercase;
letter-spacing: .3px;
font-weight: 600;
}
.navbar.topbar .text-white { color: var(--ia-text) !important; }
.navbar.topbar select.form-control,
.navbar.topbar select.form-control-sm {
background-color: var(--ia-panel2) !important;
color: var(--ia-text) !important;
border: 1px solid var(--ia-line) !important;
border-radius: 5px !important;
font-size: .83rem !important;
min-width: 140px;
padding: 4px 8px !important;
height: auto !important;
transition: border-color .15s;
}
.navbar.topbar select.form-control:focus,
.navbar.topbar select.form-control-sm:focus {
border-color: var(--ia-accent) !important;
box-shadow: 0 0 0 2px rgb(var(--ia-accent-rgb) / .2) !important;
outline: none;
}
.navbar.topbar select option {
background: var(--ia-panel) !important;
color: var(--ia-text) !important;
}
.navbar.topbar .badge-counter {
background: var(--ia-danger) !important;
color: #fff !important;
font-size: .65rem !important;
padding: 3px 6px !important;
border-radius: 10px !important;
}
.navbar.topbar .fa-bell.text-danger { color: var(--ia-danger) !important; }
.navbar.topbar .fa-user-alt { color: var(--ia-accent) !important; }
.navbar.topbar .img-profile {
width: 36px; height: 36px;
border: 2px solid var(--ia-accent);
box-shadow: 0 0 0 1px rgb(var(--ia-accent-rgb) / .2);
}
.navbar.topbar .dropdown-menu {
background: var(--ia-panel) !important;
border: 1px solid var(--ia-line) !important;
border-radius: 8px !important;
box-shadow: var(--ia-shadow-lg) !important;
padding: 6px;
}
.navbar.topbar .dropdown-item {
color: var(--ia-text) !important;
border-radius: 4px;
padding: 8px 12px !important;
font-size: .85rem;
transition: background .15s;
}
.navbar.topbar .dropdown-item:hover {
background: var(--ia-panel2) !important;
color: var(--ia-accent) !important;
}
.navbar.topbar .dropdown-item i.text-gray-400 { color: var(--ia-muted) !important; }
.navbar.topbar .dropdown-item:hover i { color: var(--ia-accent) !important; }
.navbar.topbar .dropdown-divider { border-top: 1px solid var(--ia-line) !important; }
#notification-latest {
background: var(--ia-panel) !important;
border: 1px solid var(--ia-line) !important;
border-radius: 8px;
color: var(--ia-text);
padding: 6px;
box-shadow: var(--ia-shadow-lg);
}
#notification-latest .dropdown-item,
#notification-latest a {
color: var(--ia-text) !important;
border-radius: 4px;
padding: 8px 12px;
}
#notification-latest .dropdown-item:hover,
#notification-latest a:hover {
background: var(--ia-panel2) !important;
color: var(--ia-accent) !important;
}
/* ============================================================
§5 — Modales (logout + genéricos)
============================================================ */
/* Backdrop: solo cambiamos el color base (negro puro). Bootstrap
maneja la opacidad por sí solo con las clases .modal-backdrop
(opacity 0) y .modal-backdrop.show (opacity 0.5) más la
transición. Si forzamos opacity con !important, Bootstrap NO
puede animar el cierre y el backdrop queda colgado, bloqueando
la página tras cerrar/cancelar el modal. */
.modal-backdrop { background-color: #000; }
/* Doble selector (.ia-modal y .ia-modal.fade) para subir la
especificidad por encima de inline-styles legacy que JS antiguo
pudiera estar inyectando con .css(...). Combinado con !important
garantiza que el modal NUNCA quede transparente o ilegible. */
#logoutModal .modal-content,
.ia-modal .modal-content,
.ia-modal.fade .modal-content {
background: var(--ia-panel) !important;
border: 1px solid var(--ia-line) !important;
color: var(--ia-text) !important;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
#logoutModal .modal-header,
.ia-modal .modal-header,
.ia-modal.fade .modal-header,
.ia-modal .modal-header[style] {
background: var(--ia-panel2) !important;
border-bottom: 1px solid var(--ia-line) !important;
color: var(--ia-accent) !important;
}
#logoutModal .modal-header .modal-title,
.ia-modal .modal-header .modal-title {
color: var(--ia-accent) !important;
font-weight: 600;
font-size: 1rem;
display: flex; align-items: center; gap: 8px;
}
/* Variantes contextuales pintadas con clase (no con .css() inline) */
.ia-modal .modal-header.head-edit { background: linear-gradient(90deg, var(--ia-info), #2563eb) !important; color: #fff !important; }
.ia-modal .modal-header.head-edit .modal-title { color: #fff !important; }
.ia-modal .modal-header.head-email { background: linear-gradient(90deg, var(--ia-info), #2563eb) !important; color: #fff !important; }
.ia-modal .modal-header.head-email .modal-title { color: #fff !important; }
.ia-modal .modal-header.head-ok { background: linear-gradient(90deg, var(--ia-success), #059669) !important; color: #fff !important; }
.ia-modal .modal-header.head-ok .modal-title { color: #fff !important; }
#logoutModal .modal-header .close,
.ia-modal .modal-header .close {
color: var(--ia-text) !important;
opacity: .7; text-shadow: none;
}
#logoutModal .modal-header .close:hover,
.ia-modal .modal-header .close:hover { opacity: 1; color: var(--ia-danger) !important; }
.ia-modal .modal-header.head-edit .close,
.ia-modal .modal-header.head-email .close,
.ia-modal .modal-header.head-ok .close { color: #fff !important; }
#logoutModal .modal-body,
.ia-modal .modal-body {
background: var(--ia-panel) !important;
color: var(--ia-text) !important;
padding: 22px 20px;
font-size: .95rem;
}
#logoutModal .modal-body p,
.ia-modal .modal-body p { color: var(--ia-text) !important; }
.ia-modal .modal-body .text-muted { color: var(--ia-muted) !important; }
.ia-modal .modal-body .text-danger { color: var(--ia-danger) !important; }
.ia-modal .modal-body strong { color: var(--ia-accent); }
#logoutModal .modal-footer,
.ia-modal .modal-footer {
background: var(--ia-panel2) !important;
border-top: 1px solid var(--ia-line) !important;
}
#logoutModal .btn-secondary,
.ia-modal .btn-secondary {
background: var(--ia-panel) !important;
color: var(--ia-muted) !important;
border: 1px solid var(--ia-line) !important;
}
#logoutModal .btn-secondary:hover,
.ia-modal .btn-secondary:hover {
background: var(--ia-line) !important;
color: var(--ia-text) !important;
}
#logoutModal .btn-primary,
.ia-modal .btn-success {
background: var(--ia-accent) !important;
color: var(--ia-accent-d) !important;
border: none !important;
font-weight: 600;
}
#logoutModal .btn-primary:hover,
.ia-modal .btn-success:hover { background: var(--ia-accent-h) !important; color: var(--ia-accent-d) !important; }
.ia-modal .btn-danger {
background: var(--ia-danger) !important;
color: #4a0a0a !important;
border: none !important;
font-weight: 600;
}
.ia-modal .btn-danger:hover { background: #fca5a5 !important; }
/* ============================================================
§6 — Footer con herramientas animadas
============================================================ */
footer.footer-tools {
background: linear-gradient(180deg, var(--ia-panel) 0%, var(--ia-sidebar-top) 100%) !important;
border-top: 1px solid var(--ia-line);
padding: 14px 0 10px;
margin-top: 30px;
}
footer.footer-tools .tools-container {
filter: drop-shadow(0 0 1px rgb(var(--ia-accent-rgb) / .3));
opacity: .55;
}
footer.footer-tools .tool {
filter: brightness(.85) sepia(.4) hue-rotate(125deg) saturate(2.5);
opacity: .7;
transition: opacity .3s;
}
footer.footer-tools:hover .tool { opacity: .95; }
footer.footer-tools .footer-text {
color: var(--ia-muted) !important;
font-size: .78rem;
text-align: center;
margin-top: 10px;
letter-spacing: .5px;
}
footer.footer-tools .footer-text #year { color: var(--ia-accent); font-weight: 600; }
/* ============================================================
§7 — Scrollbar + scroll-to-top
============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ia-bg); }
::-webkit-scrollbar-thumb {
background: var(--ia-line);
border-radius: 5px;
border: 2px solid var(--ia-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ia-accent); }
.scroll-to-top {
background: var(--ia-accent) !important;
color: var(--ia-accent-d) !important;
box-shadow: 0 4px 14px rgb(var(--ia-accent-rgb) / .4) !important;
border: none !important;
}
.scroll-to-top:hover { background: var(--ia-accent-h) !important; transform: translateY(-2px); }
.scroll-to-top i { color: var(--ia-accent-d) !important; }
/* ============================================================
§8 — Card-header genérico (compatibilidad legacy)
Para páginas que aún usan