/* =========================================================
app-base.css · Sistema de diseño cont@fact (v3)
---------------------------------------------------------
Tokens (paleta, tipografía, espaciado, sombras) +
componentes base reusables. Diseñado para coexistir con
el `dist/css/style.css` del tema legado: se carga DESPUÉS
y solo redefine lo estrictamente necesario.
Componentes prefijados con `cnt-` para no chocar con
clases existentes del tema o de Bootstrap. Usar:
…
Si un módulo añade ``, todo el árbol
adopta tipografía Inter y aplican los componentes.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
/* Tokens compartidos con el dashboard (custom-dashboard.css
ya los redefine; al estar aquí también, los módulos que NO
carguen custom-dashboard.css siguen teniéndolos). */
--c-text: #1a2233;
--c-text-muted: #6b7585;
--c-text-subtle: #9aa3b2;
--c-border: #e6e9ef;
--c-border-soft: #eef0f5;
--c-bg: #f7f8fb;
--c-surface: #ffffff;
--c-surface-alt: #fbfbfd;
--c-brand: #2563eb;
--c-brand-soft: #eef4ff;
--c-success: #0e9f6e;
--c-success-soft: #e6f6f0;
--c-warn: #d39400;
--c-warn-soft: #fcf6e4;
--c-danger: #dc2626;
--c-danger-soft: #fcebec;
--r-sm: 4px; --r-md: 6px; --r-lg: 10px;
--shadow-1: 0 1px 2px rgba(16,24,40,0.04);
--shadow-2: 0 4px 12px rgba(16,24,40,0.06);
--cnt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* =========================================================
Tipografía global
Solo se activa con ``. Si el módulo
no la lleva, el tema legado sigue intacto.
========================================================= */
body.cnt-app {
font-family: var(--cnt-font);
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.cnt-app input, body.cnt-app button, body.cnt-app select, body.cnt-app textarea {
font-family: var(--cnt-font);
}
.cnt-app .num {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
/* =========================================================
Page header (cabecera de cualquier módulo)
========================================================= */
.cnt-page-header {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.cnt-page-header h1 {
font-size: 18px; font-weight: 600; color: var(--c-text);
margin: 0; letter-spacing: -0.01em;
}
.cnt-page-header .subtitle {
font-size: 13px; color: var(--c-text-muted); margin-top: 2px;
}
.cnt-page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* =========================================================
Botones
========================================================= */
.cnt-btn {
padding: 7px 14px; border-radius: var(--r-md); border: 1px solid var(--c-border);
background: var(--c-surface); color: var(--c-text);
font-family: var(--cnt-font); font-size: 13px; font-weight: 500;
cursor: pointer; transition: all .12s; text-decoration: none;
display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
}
.cnt-btn:hover {
border-color: #cdd2dc; background: #f4f6fa; color: var(--c-text);
text-decoration: none;
}
.cnt-btn svg { width: 14px; height: 14px; stroke-width: 2; }
.cnt-btn-primary {
background: var(--c-brand); color: #fff; border-color: var(--c-brand);
}
.cnt-btn-primary:hover {
background: #1d4ed8; color: #fff; border-color: #1d4ed8;
}
.cnt-btn-danger {
background: var(--c-danger); color: #fff; border-color: var(--c-danger);
}
.cnt-btn-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.cnt-btn-ghost { background: transparent; border-color: transparent; }
.cnt-btn-ghost:hover { background: var(--c-surface-alt); border-color: var(--c-border-soft); }
/* =========================================================
Section title
========================================================= */
.cnt-section-title {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--c-text-subtle); font-weight: 600;
margin: 0 0 12px 0;
}
/* =========================================================
Panel (card)
========================================================= */
.cnt-panel {
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--r-md); padding: 20px;
box-shadow: var(--shadow-1); margin-bottom: 16px;
}
.cnt-panel-header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 16px;
}
.cnt-panel-title {
font-size: 14px; font-weight: 600; color: var(--c-text); margin: 0;
}
.cnt-panel-link {
font-size: 12px; color: var(--c-brand); text-decoration: none;
}
.cnt-panel-link:hover { text-decoration: underline; }
/* =========================================================
Tabla profesional
========================================================= */
.cnt-table {
width: 100%; border-collapse: collapse;
font-family: var(--cnt-font); font-size: 13px; color: var(--c-text);
}
.cnt-table thead th {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
font-weight: 600; color: var(--c-text-muted);
padding: 10px 12px; border-bottom: 1px solid var(--c-border);
text-align: left; white-space: nowrap; background: transparent;
}
.cnt-table tbody td {
padding: 10px 12px; border-bottom: 1px solid var(--c-border-soft);
vertical-align: middle;
}
.cnt-table tbody tr:last-child td { border-bottom: 0; }
.cnt-table tbody tr:hover td { background: var(--c-surface-alt); }
.cnt-table tfoot td {
border-top: 1px solid var(--c-border); border-bottom: 0;
font-weight: 600; padding: 10px 12px; background: var(--c-surface-alt);
}
.cnt-table .num, .cnt-table th.num, .cnt-table td.num {
text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cnt-table .text-muted { color: var(--c-text-subtle); }
.cnt-table .text-success, .cnt-table .pos { color: var(--c-success); }
.cnt-table .text-danger, .cnt-table .neg { color: var(--c-danger); }
/* =========================================================
DataTables · estilo profesional v3
---------------------------------------------------------
El plugin del tema envuelve en .dataTables_wrapper y
añade scaffolding propio (length, filter, info, paginate).
Estas reglas adaptan TODO ese scaffolding al sistema cnt-*,
con paleta v3 y soporte modo oscuro automático (vía tokens).
========================================================= */
/* Wrapper: tarjeta limpia con borde y sombra sutil */
body.cnt-app .dataTables_wrapper {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 12px 16px 8px;
box-shadow: var(--shadow-1);
font-family: var(--cnt-font);
}
/* Top bar: length + filter alineados con espaciado consistente */
body.cnt-app .dataTables_wrapper .dataTables_length,
body.cnt-app .dataTables_wrapper .dataTables_filter,
body.cnt-app .dataTables_wrapper .dataTables_info,
body.cnt-app .dataTables_wrapper .dataTables_paginate {
font-family: var(--cnt-font);
font-size: 12px;
color: var(--c-text-muted);
padding: 4px 0;
}
/* Selector "Show N entries": pill compacto integrado */
body.cnt-app .dataTables_wrapper .dataTables_length {
display: flex; align-items: center; gap: 6px;
}
body.cnt-app .dataTables_wrapper .dataTables_length label {
font-size: 11px !important;
color: var(--c-text-subtle) !important;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
margin: 0 !important;
display: inline-flex;
align-items: center;
gap: 6px;
}
body.cnt-app .dataTables_wrapper .dataTables_length select,
body.cnt-app .dataTables_wrapper .dataTables_length .form-select {
border: 1px solid var(--c-border-soft) !important;
border-radius: var(--r-sm) !important;
background: var(--c-surface-alt) !important;
color: var(--c-text) !important;
padding: 3px 22px 3px 8px !important;
font-size: 12px !important;
font-weight: 500 !important;
height: auto !important;
min-height: auto !important;
box-shadow: none !important;
cursor: pointer;
transition: border-color .12s, background .12s;
}
body.cnt-app .dataTables_wrapper .dataTables_length select:hover,
body.cnt-app .dataTables_wrapper .dataTables_length select:focus {
border-color: var(--c-brand) !important;
background: var(--c-surface) !important;
outline: none;
}
/* Buscador */
body.cnt-app .dataTables_wrapper .dataTables_filter input {
border: 1px solid var(--c-border) !important;
border-radius: var(--r-md) !important;
background: var(--c-surface) !important;
color: var(--c-text) !important;
padding: 6px 12px !important;
font-size: 13px !important;
min-width: 220px;
margin-left: 8px !important;
box-shadow: none !important;
transition: border-color .12s, box-shadow .12s;
}
body.cnt-app .dataTables_wrapper .dataTables_filter input:focus {
border-color: var(--c-brand) !important;
box-shadow: 0 0 0 3px var(--c-brand-soft) !important;
outline: none;
}
/* Tabla: encabezados + filas con look pro.
Compacta para que TODAS las columnas quepan sin scroll horizontal:
padding reducido, font-size 12px, table-layout:auto, wrap permitido
en celdas no numéricas. */
body.cnt-app .dataTables_wrapper {
overflow-x: visible !important; /* el wrapper no scrollea */
}
body.cnt-app .dataTables_scrollHead,
body.cnt-app .dataTables_scrollBody {
overflow: visible !important; /* DataTables a veces los pone overflow:auto */
}
body.cnt-app table.cnt-table.dataTable {
border-collapse: separate !important;
border-spacing: 0 !important;
width: 100% !important;
table-layout: auto !important;
margin: 8px 0 !important;
color: var(--c-text);
}
body.cnt-app table.cnt-table.dataTable thead th,
body.cnt-app table.cnt-table.dataTable thead td {
border-bottom: 1px solid var(--c-border) !important;
border-top: 0 !important;
background: var(--c-surface) !important;
color: var(--c-text-muted) !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 8px 8px !important;
text-align: left;
white-space: nowrap;
}
body.cnt-app table.cnt-table.dataTable thead th.sorting,
body.cnt-app table.cnt-table.dataTable thead th.sorting_asc,
body.cnt-app table.cnt-table.dataTable thead th.sorting_desc {
cursor: pointer;
background-image: none !important;
position: relative;
padding-right: 22px !important;
}
/* Apagar las flechas que DataTables 1.10 pinta por defecto en ::before
y ::after (de lo contrario se solapan con la nuestra y aparecen
símbolos extraños cuando la fuente no resuelve bien el codepoint). */
body.cnt-app table.cnt-table.dataTable thead th.sorting::before,
body.cnt-app table.cnt-table.dataTable thead th.sorting_asc::before,
body.cnt-app table.cnt-table.dataTable thead th.sorting_desc::before,
body.cnt-app table.cnt-table.dataTable thead th.sorting_asc_disabled::before,
body.cnt-app table.cnt-table.dataTable thead th.sorting_desc_disabled::before {
content: '' !important;
display: none !important;
}
body.cnt-app table.cnt-table.dataTable thead th.sorting::after,
body.cnt-app table.cnt-table.dataTable thead th.sorting_asc::after,
body.cnt-app table.cnt-table.dataTable thead th.sorting_desc::after {
content: '\2195' !important;
position: absolute !important;
right: 8px !important;
bottom: auto !important;
top: 50% !important;
transform: translateY(-50%);
font-family: Arial, "Segoe UI Symbol", "DejaVu Sans", sans-serif;
font-size: 11px;
opacity: 0.35;
color: var(--c-text-muted);
}
body.cnt-app table.cnt-table.dataTable thead th.sorting_asc::after { content: '\2191' !important; opacity: 1; color: var(--c-brand); }
body.cnt-app table.cnt-table.dataTable thead th.sorting_desc::after { content: '\2193' !important; opacity: 1; color: var(--c-brand); }
body.cnt-app table.cnt-table.dataTable tbody tr {
background: var(--c-surface) !important;
transition: background .08s;
}
body.cnt-app table.cnt-table.dataTable tbody tr:hover td {
background: var(--c-surface-alt) !important;
}
body.cnt-app table.cnt-table.dataTable tbody td {
border-top: 1px solid var(--c-border-soft) !important;
border-bottom: 0 !important;
padding: 8px 8px !important;
font-size: 12px !important;
color: var(--c-text);
background: transparent !important;
vertical-align: middle;
/* Wrap permitido por defecto: las columnas largas se adaptan */
word-break: break-word;
overflow-wrap: anywhere;
max-width: 0; /* hace que table-layout reparta proporcionalmente */
}
/* Cabecera: SIN max-width:0 para que defina anchos preferidos */
body.cnt-app table.cnt-table.dataTable thead th { max-width: none; }
/* Columnas numéricas / con clase num: nowrap (no rompen) */
body.cnt-app table.cnt-table.dataTable tbody td.num,
body.cnt-app table.cnt-table.dataTable tbody td.text-end,
body.cnt-app table.cnt-table.dataTable tbody td.text-right {
white-space: nowrap;
text-align: right;
font-variant-numeric: tabular-nums;
max-width: none;
}
/* Botones de acción dentro de las filas: compactos */
body.cnt-app table.cnt-table.dataTable tbody td .btn,
body.cnt-app table.cnt-table.dataTable tbody td a.btn {
padding: 3px 7px !important;
font-size: 11px !important;
}
body.cnt-app table.cnt-table.dataTable tbody tr.selected,
body.cnt-app table.cnt-table.dataTable tbody tr.selected td {
background: var(--c-brand-soft) !important;
color: var(--c-text) !important;
}
body.cnt-app table.cnt-table.dataTable tbody tr.selected:hover td {
background: var(--c-brand-soft) !important;
}
/* Striping opcional (cuando .stripe está) */
body.cnt-app table.cnt-table.dataTable.stripe tbody tr.odd,
body.cnt-app table.cnt-table.dataTable.stripe tbody tr.odd td {
background: var(--c-surface-alt) !important;
}
/* Footer: info + paginación en la misma línea */
body.cnt-app .dataTables_wrapper .row:last-child {
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid var(--c-border-soft);
}
body.cnt-app .dataTables_wrapper .dataTables_info {
color: var(--c-text-subtle);
font-size: 12px;
padding-top: 6px;
}
/* Paginación: estilo minimalista (sin bordes individuales).
Botones planos. Hover con fondo sutil. Active con fondo
brand-soft + texto brand. Previous/Next como flechas SVG. */
body.cnt-app .dataTables_wrapper .dataTables_paginate {
padding-top: 0;
display: flex;
align-items: center;
gap: 2px;
justify-content: flex-end;
}
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button,
body.cnt-app .dataTables_wrapper .pagination .page-link,
body.cnt-app .dataTables_wrapper .pagination .page-item .page-link {
border-radius: var(--r-sm) !important;
border: 0 !important;
background: transparent !important;
color: var(--c-text-muted) !important;
margin: 0 !important;
padding: 5px 10px !important;
min-width: 28px;
text-align: center;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
transition: all .12s;
box-shadow: none !important;
cursor: pointer;
}
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body.cnt-app .dataTables_wrapper .pagination .page-link:hover {
background: var(--c-surface-alt) !important;
color: var(--c-text) !important;
border: 0 !important;
}
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
body.cnt-app .dataTables_wrapper .pagination .page-item.active .page-link {
background: var(--c-brand-soft) !important;
color: var(--c-brand) !important;
border: 0 !important;
font-weight: 600 !important;
box-shadow: none !important;
}
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
body.cnt-app .dataTables_wrapper .pagination .page-item.disabled .page-link {
color: var(--c-text-subtle) !important;
background: transparent !important;
cursor: not-allowed;
opacity: 0.4;
}
/* Previous / Next como flechas: ocultar el texto y mostrar SVG.
Compatible con DataTables (que usa "Previous"/"Anterior" como texto). */
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button.next {
font-size: 0 !important;
padding: 5px 8px !important;
min-width: 28px;
position: relative;
}
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button.previous::before,
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button.next::before {
content: '';
display: inline-block;
width: 7px; height: 7px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
vertical-align: middle;
transition: transform .1s;
}
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button.previous::before { transform: rotate(-135deg); margin-right: 1px; }
body.cnt-app .dataTables_wrapper .dataTables_paginate .paginate_button.next::before { transform: rotate(45deg); margin-left: 1px; }
/* Header del tema legado con .header-item.bg-info: lo neutralizamos */
body.cnt-app table.cnt-table thead.header-item,
body.cnt-app table.cnt-table thead.header-item.bg-info,
body.cnt-app table.cnt-table thead.bg-info {
background: var(--c-surface) !important;
}
body.cnt-app table.cnt-table thead.header-item th,
body.cnt-app table.cnt-table thead.header-item.bg-info th {
background: var(--c-surface) !important;
color: var(--c-text-muted) !important;
}
/* Checkboxes dentro de la tabla con paleta v3 */
body.cnt-app table.cnt-table .form-check-input:checked {
background-color: var(--c-brand) !important;
border-color: var(--c-brand) !important;
}
/* Botones de acción dentro de las filas (iconos pequeños) */
body.cnt-app table.cnt-table tbody td .btn,
body.cnt-app table.cnt-table tbody td a.btn {
border-radius: var(--r-sm) !important;
padding: 4px 8px !important;
font-size: 12px !important;
line-height: 1.2 !important;
border: 1px solid var(--c-border) !important;
background: var(--c-surface) !important;
color: var(--c-text-muted) !important;
}
body.cnt-app table.cnt-table tbody td .btn:hover {
background: var(--c-surface-alt) !important;
color: var(--c-text) !important;
border-color: var(--c-text-muted) !important;
}
/* =========================================================
"Tablas" hechas con grid Bootstrap (#divTableRec, #tableArt1)
---------------------------------------------------------
Algunos módulos del tema legacy usan filas de Bootstrap como
tabla:
Estos overrides eliminan el fondo azul agresivo y dan look v3.
========================================================= */
body.cnt-app #divTableRec,
body.cnt-app #tableArt1 {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
overflow: hidden;
font-family: var(--cnt-font);
}
/* Cabecera sticky con look v3 */
body.cnt-app #divTableRec .row.bg-info,
body.cnt-app #tableArt1 .row.bg-info,
body.cnt-app #divTableRec .row.bg-info.text-white,
body.cnt-app #tableArt1 .row.bg-info.text-white {
background: var(--c-surface) !important;
border-bottom: 1px solid var(--c-border) !important;
margin: 0 !important;
padding: 6px 0 !important;
}
body.cnt-app #divTableRec .row.bg-info .cab,
body.cnt-app #tableArt1 .row.bg-info .cab,
body.cnt-app #divTableRec .row.bg-info > [class*="col-"].cab,
body.cnt-app #tableArt1 .row.bg-info > [class*="col-"].cab {
color: var(--c-text-muted) !important;
}
body.cnt-app #divTableRec .row.bg-info label,
body.cnt-app #tableArt1 .row.bg-info label,
body.cnt-app #divTableRec .row.bg-info .text-white label,
body.cnt-app #tableArt1 .row.bg-info .text-white label {
color: var(--c-text-muted) !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 !important;
padding: 0 !important;
}
/* Filas (cada línea de la factura/albarán/presupuesto) */
body.cnt-app #divTableRec .row.cl,
body.cnt-app #tableArt1 .row.cl,
body.cnt-app #divTableRec .row.draggable,
body.cnt-app #tableArt1 .row.draggable {
border-bottom: 1px solid var(--c-border-soft) !important;
margin: 0 !important;
padding: 8px 0 !important;
transition: background .08s;
font-size: 13px;
}
body.cnt-app #divTableRec .row.cl:hover,
body.cnt-app #tableArt1 .row.cl:hover,
body.cnt-app #divTableRec .row.draggable:hover,
body.cnt-app #tableArt1 .row.draggable:hover {
background: var(--c-surface-alt) !important;
}
body.cnt-app #divTableRec .row.cl .mb-2,
body.cnt-app #tableArt1 .row.cl .mb-2 {
margin-bottom: 0 !important;
padding: 4px 6px;
color: var(--c-text);
}
/* Última fila (input para añadir): sin border-bottom, padding extra */
body.cnt-app #divTableRec > .row:last-child,
body.cnt-app #tableArt1 > .row:last-child {
border-bottom: 0 !important;
background: var(--c-surface-alt);
padding: 10px !important;
margin: 0 !important;
}
/* Contenedor de botones de acción: en línea, sin wrap */
body.cnt-app #divTableRec .row.cl .form-group,
body.cnt-app #tableArt1 .row.cl .form-group {
display: flex !important;
flex-wrap: nowrap !important;
gap: 4px;
align-items: center;
margin: 0 !important;
white-space: nowrap;
}
/* Botones de acción dentro de las filas (editar / eliminar):
compactos y en línea, sin wrap */
body.cnt-app #divTableRec .row.cl .btn,
body.cnt-app #tableArt1 .row.cl .btn,
body.cnt-app #divTableRec .row.cl a.btn,
body.cnt-app #tableArt1 .row.cl a.btn {
border-radius: var(--r-sm) !important;
padding: 4px 7px !important;
font-size: 12px !important;
border: 1px solid var(--c-border) !important;
background: var(--c-surface) !important;
color: var(--c-text-muted) !important;
margin: 0 !important;
box-shadow: none !important;
transition: all .12s;
flex-shrink: 0;
line-height: 1 !important;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
}
body.cnt-app #divTableRec .row.cl .btn:hover,
body.cnt-app #tableArt1 .row.cl .btn:hover {
background: var(--c-surface-alt) !important;
border-color: var(--c-text-muted) !important;
}
body.cnt-app #divTableRec .row.cl .btn-light-success,
body.cnt-app #divTableRec .row.cl .btn-light-success.text-success,
body.cnt-app #tableArt1 .row.cl .btn-light-success {
color: var(--c-success) !important;
}
body.cnt-app #divTableRec .row.cl .btn-light-success:hover {
background: var(--c-success-soft) !important;
border-color: var(--c-success) !important;
}
body.cnt-app #divTableRec .row.cl .btn-danger,
body.cnt-app #tableArt1 .row.cl .btn-danger {
color: var(--c-danger) !important;
background: var(--c-surface) !important;
border-color: var(--c-border) !important;
}
body.cnt-app #divTableRec .row.cl .btn-danger:hover,
body.cnt-app #tableArt1 .row.cl .btn-danger:hover {
background: var(--c-danger-soft) !important;
border-color: var(--c-danger) !important;
color: var(--c-danger) !important;
}
/* Inputs/selects dentro de divTableRec (compactos) */
body.cnt-app #divTableRec .form-control,
body.cnt-app #tableArt1 .form-control {
padding: 5px 10px !important;
font-size: 12px !important;
height: auto !important;
min-height: 30px !important;
}
/* =========================================================
Modales (Bootstrap) · estilo profesional v3
---------------------------------------------------------
Aplica solo bajo body.cnt-app: el HTML legacy intacto.
========================================================= */
body.cnt-app .modal-content {
background: var(--c-surface) !important;
border: 1px solid var(--c-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: 0 20px 50px rgba(16, 24, 40, .18) !important;
color: var(--c-text);
font-family: var(--cnt-font);
}
/* modal-header default: SOLO si no tiene clase bg-* explícita.
Con bg-info/primary/etc., respetamos el header personalizado del
módulo (ej. modal-kpis con cabecera azul + texto blanco). */
body.cnt-app .modal-header:not([class*=" bg-"]):not([class^="bg-"]) {
background: var(--c-surface) !important;
border-bottom: 1px solid var(--c-border-soft) !important;
padding: 16px 20px !important;
border-top-left-radius: var(--r-lg) !important;
border-top-right-radius: var(--r-lg) !important;
}
/* Headers con bg-* personalizado: mantienen su color, solo
ajustamos padding y radio para que cuadre con el modal-content v3. */
body.cnt-app .modal-header[class*="bg-"] {
padding: 16px 20px !important;
border-top-left-radius: var(--r-lg) !important;
border-top-right-radius: var(--r-lg) !important;
}
body.cnt-app .modal-header:not([class*=" bg-"]):not([class^="bg-"]) .modal-title,
body.cnt-app .modal-header:not([class*=" bg-"]):not([class^="bg-"]) h4,
body.cnt-app .modal-header:not([class*=" bg-"]):not([class^="bg-"]) h5 {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--c-text) !important;
margin: 0 !important;
letter-spacing: -0.01em;
}
/* Headers con bg-* personalizado: respetamos el text-white original
y solo afinamos peso de fuente. */
body.cnt-app .modal-header[class*="bg-"] .modal-title,
body.cnt-app .modal-header[class*="bg-"] h4,
body.cnt-app .modal-header[class*="bg-"] h5 {
font-weight: 600 !important;
margin: 0 !important;
letter-spacing: -0.01em;
}
body.cnt-app .modal-body {
padding: 18px 20px !important;
color: var(--c-text);
font-size: 13px;
}
body.cnt-app .modal-footer {
background: var(--c-surface-alt) !important;
border-top: 1px solid var(--c-border-soft) !important;
padding: 12px 20px !important;
border-bottom-left-radius: var(--r-lg) !important;
border-bottom-right-radius: var(--r-lg) !important;
gap: 8px;
flex-wrap: nowrap !important;
justify-content: flex-end;
}
body.cnt-app .modal-footer .btn,
body.cnt-app .modal-footer button.btn,
body.cnt-app .modal-footer a.btn {
white-space: nowrap !important;
flex-shrink: 0;
}
/* btn-close: minimalista, sin caja */
body.cnt-app .modal-header .btn-close,
body.cnt-app .offcanvas-header .btn-close {
background: none !important;
width: 24px; height: 24px;
padding: 0 !important;
border: 0 !important;
opacity: 0.5;
transition: opacity .12s;
position: relative;
}
body.cnt-app .modal-header .btn-close:hover,
body.cnt-app .offcanvas-header .btn-close:hover { opacity: 1; }
body.cnt-app .modal-header .btn-close::before,
body.cnt-app .modal-header .btn-close::after,
body.cnt-app .offcanvas-header .btn-close::before,
body.cnt-app .offcanvas-header .btn-close::after {
content: ''; position: absolute; left: 50%; top: 50%;
width: 14px; height: 1.5px;
background: var(--c-text-muted);
border-radius: 1px;
}
/* En headers con fondo de color (bg-info/primary/etc.) o con la
clase btn-close-white explícita, la × debe ser blanca. */
body.cnt-app .modal-header[class*="bg-"] .btn-close::before,
body.cnt-app .modal-header[class*="bg-"] .btn-close::after,
body.cnt-app .modal-header .btn-close-white::before,
body.cnt-app .modal-header .btn-close-white::after,
body.cnt-app .offcanvas-header .btn-close-white::before,
body.cnt-app .offcanvas-header .btn-close-white::after {
background: #ffffff !important;
}
body.cnt-app .modal-header .btn-close::before,
body.cnt-app .offcanvas-header .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
body.cnt-app .modal-header .btn-close::after,
body.cnt-app .offcanvas-header .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* Compatibilidad Bootstrap 4 → 5: el botón .close legacy
(× ) se estiliza igual que el .btn-close
moderno para que los archivos que aún no migraron el markup se vean
coherentes. Oculta el "×" textual y dibuja la X con pseudo-elementos. */
body.cnt-app .modal-header .close,
body.cnt-app .offcanvas-header .close {
font-size: 0;
color: transparent;
text-shadow: none;
background: none !important;
width: 24px; height: 24px;
padding: 0 !important;
border: 0 !important;
opacity: 0.5;
transition: opacity .12s;
position: relative;
cursor: pointer;
}
body.cnt-app .modal-header .close:hover,
body.cnt-app .offcanvas-header .close:hover { opacity: 1; }
body.cnt-app .modal-header .close::before,
body.cnt-app .offcanvas-header .close::before,
body.cnt-app .modal-header .close::after,
body.cnt-app .offcanvas-header .close::after {
content: ''; position: absolute; left: 50%; top: 50%;
width: 14px; height: 1.5px;
background: var(--c-text-muted);
border-radius: 1px;
}
body.cnt-app .modal-header .close::before,
body.cnt-app .offcanvas-header .close::before { transform: translate(-50%, -50%) rotate(45deg); }
body.cnt-app .modal-header .close::after,
body.cnt-app .offcanvas-header .close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* Modal backdrop más oscuro y desenfoque sutil */
body.cnt-app .modal-backdrop.show {
background: rgba(15, 18, 24, .45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Botones del footer del modal */
body.cnt-app .modal-footer .btn,
body.cnt-app .modal-footer button.btn,
body.cnt-app .modal-footer a.btn {
border-radius: var(--r-md) !important;
font-family: var(--cnt-font);
font-size: 13px !important;
font-weight: 500 !important;
padding: 7px 14px !important;
border: 1px solid var(--c-border) !important;
background: var(--c-surface) !important;
color: var(--c-text) !important;
transition: all .12s;
box-shadow: none !important;
}
body.cnt-app .modal-footer .btn:hover {
background: var(--c-surface-alt) !important;
border-color: var(--c-text-muted) !important;
}
/* Variantes semánticas: incluyen button.X y a.X para igualar la
especificidad de las reglas genéricas .modal-footer button.btn,
que de otra forma ganarían en el cascade. .btn-info también incluido
porque ptickets/pinvoices/porders/stickets/presup lo usan como
acción primaria en el footer (Guardar, Cerrar factura). */
body.cnt-app .modal-footer .btn-primary,
body.cnt-app .modal-footer button.btn-primary,
body.cnt-app .modal-footer a.btn-primary,
body.cnt-app .modal-footer .btn-success,
body.cnt-app .modal-footer button.btn-success,
body.cnt-app .modal-footer a.btn-success,
body.cnt-app .modal-footer .btn-info,
body.cnt-app .modal-footer button.btn-info,
body.cnt-app .modal-footer a.btn-info {
background: var(--c-brand) !important;
border-color: var(--c-brand) !important;
color: #fff !important;
}
body.cnt-app .modal-footer .btn-primary:hover,
body.cnt-app .modal-footer button.btn-primary:hover,
body.cnt-app .modal-footer a.btn-primary:hover,
body.cnt-app .modal-footer .btn-success:hover,
body.cnt-app .modal-footer button.btn-success:hover,
body.cnt-app .modal-footer a.btn-success:hover,
body.cnt-app .modal-footer .btn-info:hover,
body.cnt-app .modal-footer button.btn-info:hover,
body.cnt-app .modal-footer a.btn-info:hover {
filter: brightness(0.92);
color: #fff !important;
}
body.cnt-app .modal-footer .btn-danger,
body.cnt-app .modal-footer button.btn-danger,
body.cnt-app .modal-footer a.btn-danger,
body.cnt-app .modal-footer .btn-light-danger,
body.cnt-app .modal-footer button.btn-light-danger,
body.cnt-app .modal-footer a.btn-light-danger {
background: var(--c-danger) !important;
border-color: var(--c-danger) !important;
color: #fff !important;
}
body.cnt-app .modal-footer .btn-danger:hover,
body.cnt-app .modal-footer button.btn-danger:hover,
body.cnt-app .modal-footer a.btn-danger:hover {
background: #b91c1c !important;
border-color: #b91c1c !important;
}
/* Modal fullscreen: no aplicar border-radius */
body.cnt-app .modal-fullscreen .modal-content,
body.cnt-app .modal-fullscreen .modal-header,
body.cnt-app .modal-fullscreen .modal-footer {
border-radius: 0 !important;
}
/* =========================================================
Offcanvas (Bootstrap) · estilo profesional v3
========================================================= */
body.cnt-app .offcanvas {
background: var(--c-surface) !important;
color: var(--c-text);
font-family: var(--cnt-font);
border-color: var(--c-border) !important;
}
body.cnt-app .offcanvas-header {
background: var(--c-surface) !important;
border-bottom: 1px solid var(--c-border-soft) !important;
padding: 16px 20px !important;
}
body.cnt-app .offcanvas-title,
body.cnt-app .offcanvas-header h5 {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--c-text) !important;
margin: 0 !important;
letter-spacing: -0.01em;
}
body.cnt-app .offcanvas-body {
padding: 18px 20px !important;
font-size: 13px;
color: var(--c-text);
}
body.cnt-app .offcanvas.offcanvas-end {
box-shadow: -8px 0 20px rgba(16, 24, 40, .12);
}
body.cnt-app .offcanvas.offcanvas-start {
box-shadow: 8px 0 20px rgba(16, 24, 40, .12);
}
/* =========================================================
Formularios (form-control, form-label, form-select, form-check)
Aplicado dentro de body.cnt-app — afecta a TODO el HTML legacy.
========================================================= */
body.cnt-app .form-label,
body.cnt-app label.control-label,
body.cnt-app label.form-label {
font-size: 12px !important;
font-weight: 500 !important;
color: var(--c-text-muted) !important;
margin-bottom: 4px !important;
text-transform: none;
}
body.cnt-app .form-control,
body.cnt-app .form-select,
body.cnt-app input.form-control,
body.cnt-app textarea.form-control,
body.cnt-app select.form-control,
body.cnt-app select.form-select {
border: 1px solid var(--c-border) !important;
border-radius: var(--r-md) !important;
background-color: var(--c-surface) !important;
color: var(--c-text) !important;
font-family: var(--cnt-font);
font-size: 12.5px !important;
line-height: 1.4 !important;
padding: 5px 10px !important;
height: 32px !important;
min-height: 32px !important;
box-shadow: none !important;
transition: border-color .12s, box-shadow .12s;
}
/* textarea: altura auto (multilinea) */
body.cnt-app textarea.form-control {
height: auto !important;
min-height: 60px !important;
padding: 6px 10px !important;
}
body.cnt-app .form-control:focus,
body.cnt-app .form-select:focus,
body.cnt-app textarea.form-control:focus {
border-color: var(--c-brand) !important;
box-shadow: 0 0 0 3px var(--c-brand-soft) !important;
outline: none;
}
body.cnt-app .form-control[disabled],
body.cnt-app .form-control:disabled,
body.cnt-app .form-control[readonly] {
background: var(--c-surface-alt) !important;
color: var(--c-text-muted) !important;
cursor: not-allowed;
}
body.cnt-app .input-group-text {
border: 1px solid var(--c-border) !important;
background-color: var(--c-surface-alt) !important;
color: var(--c-text-muted) !important;
font-size: 12.5px !important;
padding: 5px 10px !important;
border-radius: var(--r-md) !important;
}
/* Checkboxes y radios con paleta v3.
NOTA: usar `background-color` (no shorthand `background`) para no
resetear el `background-image` con el SVG del thumb en form-switch. */
body.cnt-app .form-check-input {
border: 1px solid var(--c-border) !important;
background-color: var(--c-surface);
box-shadow: none !important;
}
body.cnt-app .form-check-input:checked {
background-color: var(--c-brand) !important;
border-color: var(--c-brand) !important;
}
body.cnt-app .form-check-input:focus {
box-shadow: 0 0 0 3px var(--c-brand-soft) !important;
border-color: var(--c-brand) !important;
}
body.cnt-app .form-check-label {
font-size: 13px !important;
color: var(--c-text);
}
/* Variantes "check-outline outline-*" para CHECKBOXES (no switches).
Cuando es .form-check (sin .form-switch) sí aplicamos border + bg.
Cuando es .form-switch, solo cambiamos los colores del border/bg sin
tocar el SVG del thumb (que Bootstrap pone via background-image). */
body.cnt-app .form-check:not(.form-switch) .form-check-input.check-outline.outline-info {
border: 2px solid var(--c-brand) !important;
background-color: var(--c-brand-soft) !important;
}
body.cnt-app .form-check:not(.form-switch) .form-check-input.check-outline.outline-info:checked {
background-color: var(--c-brand) !important;
border-color: var(--c-brand) !important;
}
body.cnt-app .form-check:not(.form-switch) .form-check-input.check-outline.outline-success {
border: 2px solid var(--c-success) !important;
background-color: var(--c-success-soft) !important;
}
body.cnt-app .form-check:not(.form-switch) .form-check-input.check-outline.outline-success:checked {
background-color: var(--c-success) !important;
border-color: var(--c-success) !important;
}
body.cnt-app .form-check:not(.form-switch) .form-check-input.check-outline.outline-warning {
border: 2px solid var(--c-warn) !important;
background-color: var(--c-warn-soft) !important;
}
body.cnt-app .form-check:not(.form-switch) .form-check-input.check-outline.outline-warning:checked {
background-color: var(--c-warn) !important;
border-color: var(--c-warn) !important;
}
body.cnt-app .form-check:not(.form-switch) .form-check-input.check-outline.outline-danger {
border: 2px solid var(--c-danger) !important;
background-color: var(--c-danger-soft) !important;
}
body.cnt-app .form-check:not(.form-switch) .form-check-input.check-outline.outline-danger:checked {
background-color: var(--c-danger) !important;
border-color: var(--c-danger) !important;
}
/* SWITCHES con outline-* / check-outline: el CSS legacy aplica
border 2px y bg colored, lo que ROMPE el SVG del thumb. Reseteamos
border-width a 1px y dejamos el thumb (background-image) intacto. */
body.cnt-app .form-switch .form-check-input.check-outline,
body.cnt-app .form-switch .form-check-input[class*="outline-"] {
border-width: 1px !important;
background-color: rgba(0, 0, 0, .15) !important; /* track gris cuando OFF */
}
/* outline-info: track azul cuando ON */
body.cnt-app .form-switch .form-check-input.outline-info { border-color: rgba(0, 0, 0, .15) !important; }
body.cnt-app .form-switch .form-check-input.outline-info:checked {
background-color: var(--c-brand) !important;
border-color: var(--c-brand) !important;
}
body.cnt-app .form-switch .form-check-input.outline-success { border-color: rgba(0, 0, 0, .15) !important; }
body.cnt-app .form-switch .form-check-input.outline-success:checked {
background-color: var(--c-success) !important;
border-color: var(--c-success) !important;
}
body.cnt-app .form-switch .form-check-input.outline-warning { border-color: rgba(0, 0, 0, .15) !important; }
body.cnt-app .form-switch .form-check-input.outline-warning:checked {
background-color: var(--c-warn) !important;
border-color: var(--c-warn) !important;
}
body.cnt-app .form-switch .form-check-input.outline-danger { border-color: rgba(0, 0, 0, .15) !important; }
body.cnt-app .form-switch .form-check-input.outline-danger:checked {
background-color: var(--c-danger) !important;
border-color: var(--c-danger) !important;
}
/* Select2 (plugin que envuelve ): mismo look y altura que
form-control (32px) para consistencia visual. */
body.cnt-app .select2-container--default .select2-selection--single {
border: 1px solid var(--c-border) !important;
border-radius: var(--r-md) !important;
background-color: var(--c-surface) !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 8px !important;
box-shadow: none !important;
}
body.cnt-app .select2-container--default .select2-selection--multiple {
border: 1px solid var(--c-border) !important;
border-radius: var(--r-md) !important;
background-color: var(--c-surface) !important;
min-height: 32px !important;
padding: 2px 6px !important;
box-shadow: none !important;
}
body.cnt-app .select2-container--default.select2-container--focus .select2-selection,
body.cnt-app .select2-container--default.select2-container--open .select2-selection {
border-color: var(--c-brand) !important;
box-shadow: 0 0 0 3px var(--c-brand-soft) !important;
}
body.cnt-app .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--c-text) !important;
line-height: 30px !important;
font-size: 12.5px;
padding: 0 !important;
}
body.cnt-app .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 30px !important;
}
body.cnt-app .select2-dropdown {
border: 1px solid var(--c-border) !important;
border-radius: var(--r-md) !important;
background: var(--c-surface) !important;
box-shadow: var(--shadow-2);
overflow: hidden;
}
body.cnt-app .select2-results__option {
padding: 8px 12px !important;
font-size: 13px;
color: var(--c-text);
}
body.cnt-app .select2-results__option--highlighted {
background: var(--c-brand) !important;
color: #fff !important;
}
body.cnt-app .select2-search--dropdown .select2-search__field {
border: 1px solid var(--c-border) !important;
border-radius: var(--r-sm) !important;
background: var(--c-surface);
color: var(--c-text);
padding: 6px 10px !important;
}
/* Select2 en el topbar (empresa/ejercicio): más compacto, integrado
con el fondo de la barra (transparente con borde sutil) y sin
ocupar espacio extra vertical. */
body.cnt-app .topbar .select2-container--default .select2-selection--single {
height: 30px !important;
min-height: 30px !important;
padding: 0 8px !important;
border-color: rgba(255, 255, 255, .18) !important;
background-color: rgba(255, 255, 255, .06) !important;
border-radius: 6px !important;
transition: background-color .15s, border-color .15s;
}
body.cnt-app .topbar .select2-container--default .select2-selection--single:hover {
background-color: rgba(255, 255, 255, .12) !important;
border-color: rgba(255, 255, 255, .28) !important;
}
body.cnt-app .topbar .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #fff !important;
line-height: 28px !important;
font-size: 12.5px;
font-weight: 500;
}
body.cnt-app .topbar .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 28px !important;
}
body.cnt-app .topbar .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: rgba(255, 255, 255, .7) transparent transparent transparent !important;
}
body.cnt-app .topbar .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent rgba(255, 255, 255, .7) transparent !important;
}
body.cnt-app .topbar .select2-container--default.select2-container--focus .select2-selection,
body.cnt-app .topbar .select2-container--default.select2-container--open .select2-selection {
box-shadow: 0 0 0 2px rgba(255, 255, 255, .18) !important;
border-color: rgba(255, 255, 255, .35) !important;
}
body.cnt-app .topbar .nav-item > .form-control.select2,
body.cnt-app .topbar .nav-item select.select2 {
/* el original queda oculto por select2, pero por si acaso */
height: 30px !important;
min-height: 30px !important;
}
body.cnt-app .topbar .nav-item { display: flex; align-items: center; }
/* Bootstrap `.d-md-block` aplica `display: block !important` en >=md
y vence la regla anterior, dejando los selects #emp / #cronometro
sin centrado vertical dentro del LI. Forzamos flex con la misma
prioridad para alinear verticalmente todos los items del topbar. */
@media (min-width: 768px) {
body.cnt-app .topbar .navbar-nav > .nav-item {
display: flex !important;
align-items: center;
}
}
/* También centramos el UL contenedor por si algún hijo no es nav-item. */
body.cnt-app .topbar .navbar-nav { align-items: center; }
/* Gauge en el topbar: contenedor compacto y consistente con la altura
del resto de items. El SVG escala al 100% del contenedor. */
body.cnt-app .topbar .gauge-container {
width: 50px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: background-color .15s;
}
body.cnt-app .topbar .gauge-container > .gauge {
width: 100%;
height: 100%;
line-height: 0;
}
body.cnt-app .topbar .gauge-container > .gauge svg { display: block; }
body.cnt-app .topbar .nav-link:hover .gauge-container {
background-color: rgba(26, 37, 53, .05);
}
body.cnt-app.cnt-dark .topbar .nav-link:hover .gauge-container,
body.cnt-app.cnt-novatek-dark .topbar .nav-link:hover .gauge-container {
background-color: rgba(255, 255, 255, .08);
}
.tooltip.gauge-tooltip { --bs-tooltip-max-width: 260px; }
.tooltip.gauge-tooltip .tooltip-inner {
max-width: 260px;
text-align: left;
padding: 8px 12px;
line-height: 1.45;
font-size: 12.5px;
}
.tooltip.gauge-tooltip .tooltip-inner strong { display: block; margin-bottom: 2px; }
/* Topbar claro (cnt-novatek-teal): el bloque anterior asume topbar
oscuro (texto/bordes blancos). En el tema claro el topbar es #fff,
así que invertimos a texto/bordes oscuros para tener contraste. */
body.cnt-app.cnt-novatek-teal .topbar .select2-container--default .select2-selection--single {
border-color: rgba(26, 37, 53, .18) !important;
background-color: rgba(26, 37, 53, .04) !important;
}
body.cnt-app.cnt-novatek-teal .topbar .select2-container--default .select2-selection--single:hover {
background-color: rgba(26, 37, 53, .08) !important;
border-color: rgba(26, 37, 53, .28) !important;
}
body.cnt-app.cnt-novatek-teal .topbar .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #1a2535 !important;
}
body.cnt-app.cnt-novatek-teal .topbar .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: rgba(26, 37, 53, .7) transparent transparent transparent !important;
}
body.cnt-app.cnt-novatek-teal .topbar .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent rgba(26, 37, 53, .7) transparent !important;
}
body.cnt-app.cnt-novatek-teal .topbar .select2-container--default.select2-container--focus .select2-selection,
body.cnt-app.cnt-novatek-teal .topbar .select2-container--default.select2-container--open .select2-selection {
box-shadow: 0 0 0 2px rgba(26, 37, 53, .12) !important;
border-color: rgba(26, 37, 53, .35) !important;
}
/* =========================================================
KPI cards (genéricos, mismo estilo del dashboard pero
con prefix `cnt-` para uso en cualquier módulo)
========================================================= */
.cnt-kpi-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px; margin-bottom: 16px;
}
@media (max-width: 992px) { .cnt-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.cnt-kpi {
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--r-md); padding: 16px 20px;
box-shadow: var(--shadow-1); position: relative;
}
.cnt-kpi::before {
content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
width: 3px; border-radius: 0 2px 2px 0; background: var(--c-brand);
}
.cnt-kpi.cnt-kpi-success::before { background: var(--c-success); }
.cnt-kpi.cnt-kpi-warn::before { background: var(--c-warn); }
.cnt-kpi.cnt-kpi-danger::before { background: var(--c-danger); }
.cnt-kpi.cnt-kpi-muted::before { background: var(--c-text-subtle); }
.cnt-kpi-label { font-size: 12px; color: var(--c-text-muted); font-weight: 500; }
.cnt-kpi-value { font-size: 24px; font-weight: 600; color: var(--c-text); margin-top: 4px; letter-spacing: -0.02em; }
.cnt-kpi-foot { font-size: 12px; color: var(--c-text-muted); margin-top: 6px; }
.cnt-kpi-foot.up { color: var(--c-success); }
.cnt-kpi-foot.down { color: var(--c-danger); }
/* =========================================================
Pills (semáforos / estados pequeños)
========================================================= */
.cnt-pill {
display: inline-block; padding: 2px 8px; border-radius: 10px;
font-size: 11px; font-weight: 500; line-height: 1.4;
background: var(--c-border-soft); color: var(--c-text-muted);
}
.cnt-pill.success { background: var(--c-success-soft); color: var(--c-success); }
.cnt-pill.warn { background: var(--c-warn-soft); color: var(--c-warn); }
.cnt-pill.danger { background: var(--c-danger-soft); color: var(--c-danger); }
.cnt-pill.brand { background: var(--c-brand-soft); color: var(--c-brand); }
/* =========================================================
Toolbar (filtros y acciones secundarias en listados)
========================================================= */
.cnt-toolbar {
display: flex; align-items: center; gap: 8px; padding: 12px 16px;
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--r-md); margin-bottom: 16px;
box-shadow: var(--shadow-1); flex-wrap: wrap;
}
.cnt-toolbar .label {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--c-text-muted); font-weight: 600; margin-right: 4px;
}
.cnt-toolbar .right { margin-left: auto; font-size: 12px; color: var(--c-text-subtle); }
/* =========================================================
Modernización del contenido legacy dentro de .cnt-toolbar
---------------------------------------------------------
Los módulos legacy usan `.btn .btn-rounded .btn-outline-*`.
Estas reglas convierten esos botones al estilo `cnt-btn` SIN
tocar el HTML, así los handlers (dropdowns, modal-toggle,
waves-effect) siguen funcionando intactos.
========================================================= */
.cnt-toolbar .btn,
.cnt-toolbar a.btn,
.cnt-toolbar button.btn,
.cnt-toolbar .nav-link.btn {
border-radius: var(--r-md) !important;
font-family: var(--cnt-font);
font-size: 13px !important;
font-weight: 500 !important;
padding: 7px 12px !important;
border: 1px solid var(--c-border) !important;
background: var(--c-surface) !important;
color: var(--c-text) !important;
transition: all .12s;
box-shadow: none !important;
line-height: 1.2 !important;
text-transform: none !important;
}
.cnt-toolbar .btn:hover {
border-color: var(--c-text-muted) !important;
background: var(--c-surface-alt) !important;
color: var(--c-text) !important;
}
.cnt-toolbar .btn .feather-sm,
.cnt-toolbar .btn i,
.cnt-toolbar .btn svg { width: 14px; height: 14px; vertical-align: middle; }
/* Variantes de color: solo afectan al texto y al hover */
.cnt-toolbar .btn-outline-info,
.cnt-toolbar .btn.btn-outline-info { color: var(--c-brand) !important; }
.cnt-toolbar .btn-outline-info:hover { background: var(--c-brand-soft) !important; border-color: var(--c-brand) !important; }
.cnt-toolbar .btn-outline-warning { color: var(--c-warn) !important; }
.cnt-toolbar .btn-outline-warning:hover { background: var(--c-warn-soft) !important; border-color: var(--c-warn) !important; }
.cnt-toolbar .btn-outline-success { color: var(--c-success) !important; }
.cnt-toolbar .btn-outline-success:hover { background: var(--c-success-soft) !important; border-color: var(--c-success) !important; }
.cnt-toolbar .btn-outline-danger { color: var(--c-danger) !important; }
.cnt-toolbar .btn-outline-danger:hover { background: var(--c-danger-soft) !important; border-color: var(--c-danger) !important; }
/* Estado active (filtros tipo segmented control: Registradas/Anuladas) */
.cnt-toolbar .btn.active,
.cnt-toolbar .nav-link.active.btn,
.cnt-toolbar .nav-pills .nav-link.active.btn {
background: var(--c-text) !important;
color: #fff !important;
border-color: var(--c-text) !important;
}
/* Dropdown-toggle: misma fila que el principal, sin borde extra */
.cnt-toolbar .dropdown-toggle-split {
padding: 7px 8px !important;
border-left: 0 !important;
margin-left: -1px;
}
.cnt-toolbar .btn-group .btn:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.cnt-toolbar .btn-group .btn:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
/* Inputs y form-control dentro del toolbar */
.cnt-toolbar .form-control,
.cnt-toolbar input[type="text"],
.cnt-toolbar input[type="search"] {
border-radius: var(--r-md) !important;
border: 1px solid var(--c-border) !important;
font-size: 13px !important;
padding: 7px 12px !important;
height: auto !important;
background: var(--c-surface) !important;
color: var(--c-text) !important;
box-shadow: none !important;
transition: border-color .12s, box-shadow .12s;
}
.cnt-toolbar .form-control:focus {
border-color: var(--c-brand) !important;
box-shadow: 0 0 0 3px var(--c-brand-soft) !important;
outline: none;
}
/* nav-pills con bg-white interno (caso Crear/Recurrentes) */
.cnt-toolbar .nav-pills.bg-white { background: transparent !important; gap: 6px; }
.cnt-toolbar .nav-pills .nav-item { margin: 0 2px; }
/* Dropdown menu: alineado y limpio */
.cnt-toolbar + .row .dropdown-menu,
.cnt-toolbar .dropdown-menu {
border: 1px solid var(--c-border) !important;
border-radius: var(--r-md) !important;
box-shadow: var(--shadow-2) !important;
padding: 6px !important;
}
.cnt-toolbar .dropdown-item,
.cnt-toolbar + .row .dropdown-item {
border-radius: var(--r-sm);
padding: 6px 10px !important;
font-size: 13px;
color: var(--c-text) !important;
}
.cnt-toolbar .dropdown-item:hover,
.cnt-toolbar + .row .dropdown-item:hover {
background: var(--c-surface-alt) !important;
color: var(--c-brand) !important;
}
/* =========================================================
Empty state
========================================================= */
.cnt-empty {
text-align: center; color: var(--c-text-subtle);
font-size: 13px; padding: 2rem 0;
}
/* =========================================================
Scrollbars finos (Chromium + Firefox)
Solo activos cuando el árbol cuelga de body.cnt-app, así no
alteramos otros temas que conviven en la app.
========================================================= */
body.cnt-app, body.cnt-app * {
scrollbar-width: thin;
scrollbar-color: rgba(120, 130, 145, .45) transparent;
}
body.cnt-app ::-webkit-scrollbar,
body.cnt-app::-webkit-scrollbar {
width: 6px; height: 6px;
}
body.cnt-app ::-webkit-scrollbar-track,
body.cnt-app::-webkit-scrollbar-track {
background: transparent;
}
body.cnt-app ::-webkit-scrollbar-thumb,
body.cnt-app::-webkit-scrollbar-thumb {
background: rgba(120, 130, 145, .35);
border-radius: 4px;
}
body.cnt-app ::-webkit-scrollbar-thumb:hover,
body.cnt-app::-webkit-scrollbar-thumb:hover {
background: rgba(120, 130, 145, .65);
}
body.cnt-app ::-webkit-scrollbar-corner,
body.cnt-app::-webkit-scrollbar-corner {
background: transparent;
}
/* =========================================================
Tema oscuro (cnt-dark)
---------------------------------------------------------
Se activa con ``. Los
componentes `cnt-*` usan tokens, así que adoptan el cambio
automáticamente sin tocar HTML.
Toggle vía cnt-theme.js (`window.cntTheme.toggle()`),
persiste en localStorage y se sincroniza entre pestañas
con `storage` event.
========================================================= */
body.cnt-app.cnt-dark {
--c-text: #e3e7ef;
--c-text-muted: #9aa3b2;
--c-text-subtle: #6b7585;
--c-border: #2a3142;
--c-border-soft: #1f2531;
--c-bg: #0f1218;
--c-surface: #161a23;
--c-surface-alt: #1c2130;
--c-brand: #3b82f6;
--c-brand-soft: rgba(59, 130, 246, .15);
--c-success: #10b981;
--c-success-soft: rgba(16, 185, 129, .15);
--c-warn: #f59e0b;
--c-warn-soft: rgba(245, 158, 11, .15);
--c-danger: #ef4444;
--c-danger-soft: rgba(239, 68, 68, .15);
--shadow-1: 0 1px 2px rgba(0,0,0,.35);
--shadow-2: 0 4px 12px rgba(0,0,0,.5);
color-scheme: dark; /* hint al navegador para form controls nativos */
}
/* Scrollbar más oscuro en modo dark */
body.cnt-app.cnt-dark, body.cnt-app.cnt-dark * {
scrollbar-color: rgba(150, 160, 175, .35) transparent;
}
body.cnt-app.cnt-dark ::-webkit-scrollbar-thumb,
body.cnt-app.cnt-dark::-webkit-scrollbar-thumb {
background: rgba(150, 160, 175, .25);
}
body.cnt-app.cnt-dark ::-webkit-scrollbar-thumb:hover,
body.cnt-app.cnt-dark::-webkit-scrollbar-thumb:hover {
background: rgba(150, 160, 175, .55);
}
/* Mejoras puntuales para tema oscuro en componentes específicos */
body.cnt-app.cnt-dark .cnt-kpi.cnt-kpi-success::before { background: var(--c-success); }
body.cnt-app.cnt-dark .cnt-table tbody tr:hover td { background: var(--c-surface-alt); }
/* Toggle visual del botón de tema (luna ↔ sol) */
.cnt-theme-toggle {
background: transparent; border: 1px solid var(--c-border);
color: var(--c-text-muted); border-radius: var(--r-md);
padding: 6px 10px; cursor: pointer; transition: all .15s;
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--cnt-font); font-size: 12px;
}
.cnt-theme-toggle:hover { color: var(--c-text); border-color: #cdd2dc; }
.cnt-theme-toggle svg { width: 14px; height: 14px; stroke-width: 2; }
.cnt-theme-toggle .cnt-theme-icon-sun { display: none; }
.cnt-theme-toggle .cnt-theme-icon-moon { display: inline-block; }
body.cnt-app.cnt-dark .cnt-theme-toggle .cnt-theme-icon-sun { display: inline-block; }
body.cnt-app.cnt-dark .cnt-theme-toggle .cnt-theme-icon-moon { display: none; }
/* Variante fixed: para colocar el toggle en una esquina del viewport,
FUERA del main-wrapper. Evita el warning de accesibilidad de
Bootstrap (aria-hidden en main-wrapper al abrir modales).
Movido más a la izquierda para no chocar con el avatar de usuario. */
.cnt-theme-toggle--fixed {
position: fixed; top: 8px; right: 90px; z-index: 1080;
background: #ffffff;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 2px 8px rgba(0,0,0,.18);
color: #1a2233;
width: 38px; height: 38px; padding: 0;
border-radius: 50%;
justify-content: center;
transition: transform .15s, box-shadow .15s;
}
.cnt-theme-toggle--fixed:hover {
transform: rotate(15deg);
box-shadow: 0 4px 14px rgba(0,0,0,.25);
color: var(--c-brand);
border-color: var(--c-brand);
}
.cnt-theme-toggle--fixed svg { width: 18px; height: 18px; }
body.cnt-app.cnt-dark .cnt-theme-toggle--fixed {
background: #f7f8fb;
color: #d39400;
border-color: rgba(255,255,255,.15);
box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
body.cnt-app.cnt-dark .cnt-theme-toggle--fixed:hover {
color: #f59e0b;
border-color: #f59e0b;
}
/* =========================================================
Theme picker (botón + dropdown)
---------------------------------------------------------
Reemplaza al toggle simple. Click = ciclo entre temas,
doble-click = abre menú con las 4 opciones.
========================================================= */
.cnt-theme-picker--fixed {
position: fixed; top: 8px; right: 90px; z-index: 1080;
}
.cnt-theme-picker .cnt-theme-toggle {
background: #ffffff;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 2px 8px rgba(0,0,0,.18);
color: #1a2233;
width: 38px; height: 38px; padding: 0;
border-radius: 50%;
justify-content: center;
transition: transform .15s, box-shadow .15s, color .15s;
display: inline-flex; align-items: center;
cursor: pointer;
}
.cnt-theme-picker .cnt-theme-toggle:hover {
transform: rotate(15deg);
box-shadow: 0 4px 14px rgba(0,0,0,.25);
color: var(--c-brand);
border-color: var(--c-brand);
}
.cnt-theme-picker .cnt-theme-toggle svg { width: 18px; height: 18px; stroke-width: 2; }
.cnt-theme-picker .cnt-theme-toggle .cnt-theme-icon-sun { display: none; }
.cnt-theme-picker .cnt-theme-toggle .cnt-theme-icon-moon { display: inline-block; }
body.cnt-app.cnt-dark .cnt-theme-picker .cnt-theme-toggle .cnt-theme-icon-sun { display: inline-block; }
body.cnt-app.cnt-dark .cnt-theme-picker .cnt-theme-toggle .cnt-theme-icon-moon { display: none; }
body.cnt-app.cnt-novatek-dark .cnt-theme-picker .cnt-theme-toggle .cnt-theme-icon-sun { display: inline-block; }
body.cnt-app.cnt-novatek-dark .cnt-theme-picker .cnt-theme-toggle .cnt-theme-icon-moon { display: none; }
body.cnt-app.cnt-dark .cnt-theme-picker .cnt-theme-toggle,
body.cnt-app.cnt-novatek-dark .cnt-theme-picker .cnt-theme-toggle {
background: #f7f8fb;
color: #d39400;
border-color: rgba(255,255,255,.15);
box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
body.cnt-app.cnt-novatek-dark .cnt-theme-picker .cnt-theme-toggle {
color: #00b4d8;
}
.cnt-theme-menu {
position: absolute;
top: 46px; right: 0;
min-width: 200px;
background: #ffffff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
padding: 4px;
display: none;
flex-direction: column;
gap: 1px;
}
.cnt-theme-menu.open { display: flex; }
.cnt-theme-menu button {
display: flex;
align-items: center;
gap: 10px;
background: transparent;
border: 0;
padding: 8px 12px;
font-family: var(--cnt-font);
font-size: 13px;
color: #1a2233;
cursor: pointer;
text-align: left;
border-radius: 4px;
transition: background .12s;
}
.cnt-theme-menu button:hover {
background: #f4f6fa;
}
.cnt-theme-menu button .sw {
width: 16px; height: 16px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,.10);
flex-shrink: 0;
}
body.cnt-app.cnt-dark .cnt-theme-menu,
body.cnt-app.cnt-novatek-dark .cnt-theme-menu {
background: #161a23;
border-color: rgba(255,255,255,.12);
box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
body.cnt-app.cnt-dark .cnt-theme-menu button,
body.cnt-app.cnt-novatek-dark .cnt-theme-menu button {
color: #e3e7ef;
}
body.cnt-app.cnt-dark .cnt-theme-menu button:hover,
body.cnt-app.cnt-novatek-dark .cnt-theme-menu button:hover {
background: rgba(255,255,255,0.06);
}
/* Selector multi-tema (botón + menú desplegable).
Reemplaza el toggle binario por una picker de 4 opciones.
- Clic simple en el botón = ciclo entre temas
- Doble clic = abre el menú para selección directa */
.cnt-theme-picker {
position: relative;
display: inline-block;
}
.cnt-theme-picker--fixed {
position: fixed;
top: 8px;
right: 90px;
z-index: 1080;
}
.cnt-theme-picker--fixed .cnt-theme-toggle {
background: #ffffff;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 2px 8px rgba(0,0,0,.18);
color: #1a2233;
width: 38px; height: 38px; padding: 0;
border-radius: 50%;
justify-content: center;
transition: transform .15s, box-shadow .15s;
}
.cnt-theme-picker--fixed .cnt-theme-toggle:hover {
transform: rotate(15deg);
box-shadow: 0 4px 14px rgba(0,0,0,.25);
color: var(--c-brand);
border-color: var(--c-brand);
}
.cnt-theme-picker--fixed .cnt-theme-toggle svg { width: 18px; height: 18px; }
.cnt-theme-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: var(--c-surface, #fff);
border: 1px solid var(--c-border, #e6e9ef);
border-radius: var(--r-md, 6px);
box-shadow: 0 8px 24px rgba(0,0,0,.18);
min-width: 180px;
padding: 6px;
display: none;
}
.cnt-theme-menu.open { display: block; }
.cnt-theme-menu button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
background: transparent;
border: 0;
color: var(--c-text, #1a2233);
font-family: var(--cnt-font, system-ui);
font-size: 12px;
text-align: left;
border-radius: 4px;
cursor: pointer;
transition: background .12s;
}
.cnt-theme-menu button:hover {
background: var(--c-surface-alt, #f4f6fa);
}
.cnt-theme-menu button .sw {
width: 14px;
height: 14px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,.1);
display: inline-block;
flex-shrink: 0;
}
/* Iconos sol/luna del toggle: visibilidad por tema.
Luna por defecto, sol en cualquier tema oscuro. */
.cnt-theme-toggle .cnt-theme-icon-sun { display: none; }
.cnt-theme-toggle .cnt-theme-icon-moon { display: inline-block; }
body.cnt-app.cnt-dark .cnt-theme-toggle .cnt-theme-icon-sun,
body.cnt-app.cnt-novatek-dark .cnt-theme-toggle .cnt-theme-icon-sun { display: inline-block; }
body.cnt-app.cnt-dark .cnt-theme-toggle .cnt-theme-icon-moon,
body.cnt-app.cnt-novatek-dark .cnt-theme-toggle .cnt-theme-icon-moon { display: none; }
/* Picker en modo oscuro original */
body.cnt-app.cnt-dark .cnt-theme-picker--fixed .cnt-theme-toggle {
background: #f7f8fb;
color: #d39400;
border-color: rgba(255,255,255,.15);
box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
body.cnt-app.cnt-dark .cnt-theme-picker--fixed .cnt-theme-toggle:hover {
color: #f59e0b;
border-color: #f59e0b;
}
/* Picker en Novatek dark */
body.cnt-app.cnt-novatek-dark .cnt-theme-picker--fixed .cnt-theme-toggle {
background: #f4f7fb;
color: #00b4d8;
border-color: rgba(255,255,255,.15);
box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
body.cnt-app.cnt-novatek-dark .cnt-theme-picker--fixed .cnt-theme-toggle:hover {
color: #48cae4;
border-color: #48cae4;
}
/* =========================================================
Overrides puntuales del tema legado para modo oscuro
---------------------------------------------------------
El tema usa atributos `data-sidebarbg`, `data-navbarbg` con
colores hardcoded en `style.css`. Sobrescribimos con
!important porque el tema usa selectores muy específicos.
Solo aplica cuando body.cnt-app.cnt-dark está activo.
========================================================= */
/* Sidebar INVERTIDO: contrasta con el contenido principal.
- Modo claro (default): sidebar OSCURO sobre app clara
- Modo oscuro: sidebar CLARO sobre app oscura
Patrón habitual en dashboards modernos (Notion, Linear). */
/* === Modo claro: sidebar oscuro === */
/* El aside se hace TRANSPARENTE y el `.scroll-sidebar` (su hijo) toma
el fondo. Así, cuando los items no llenan todo el alto, la franja
inferior queda con el fondo del page-wrapper (claro) en lugar del
sidebar oscuro extendido. */
body.cnt-app .left-sidebar,
body.cnt-app .left-sidebar[data-sidebarbg] {
background: transparent !important;
}
body.cnt-app .scroll-sidebar,
body.cnt-app .sidebar-footer {
background: #161a23 !important;
}
body.cnt-app .scroll-sidebar {
height: auto !important;
min-height: auto !important;
max-height: 100% !important;
overflow-y: auto;
}
body.cnt-app .sidebar-nav ul .sidebar-item .sidebar-link,
body.cnt-app .sidebar-nav .has-arrow::after,
body.cnt-app .sidebar-nav .sidebar-link i,
body.cnt-app .sidebar-nav .sidebar-link span {
color: #9aa3b2 !important;
transition: color .12s, background .12s;
}
/* Posición relativa para colocar la barra indicadora */
body.cnt-app .sidebar-nav ul .sidebar-item .sidebar-link {
position: relative;
}
/* Hover: solo cambia color y fondo sutil */
body.cnt-app .sidebar-nav ul .sidebar-item .sidebar-link:hover {
color: #ffffff !important;
background: rgba(255, 255, 255, .04) !important;
}
/* Activo / seleccionado: fondo brand sólido para máximo contraste +
barra lateral 5px con glow + texto blanco bold. */
body.cnt-app .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
body.cnt-app .sidebar-nav ul .sidebar-item .sidebar-link.active {
color: #ffffff !important;
background: #2563eb !important;
font-weight: 600 !important;
box-shadow: 0 2px 8px rgba(59, 130, 246, .35);
}
body.cnt-app .sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
body.cnt-app .sidebar-nav ul .sidebar-item .sidebar-link.active i,
body.cnt-app .sidebar-nav ul .sidebar-item.selected > .sidebar-link span,
body.cnt-app .sidebar-nav ul .sidebar-item .sidebar-link.active span,
body.cnt-app .sidebar-nav ul .sidebar-item.selected > .sidebar-link .has-arrow::after {
color: #ffffff !important;
}
body.cnt-app .sidebar-nav ul .sidebar-item.selected > .sidebar-link::before,
body.cnt-app .sidebar-nav ul .sidebar-item .sidebar-link.active::before {
content: ''; position: absolute; left: -8px; top: 4px; bottom: 4px;
width: 5px; background: #60a5fa; border-radius: 0 3px 3px 0;
box-shadow: 0 0 12px rgba(96, 165, 250, .8);
}
body.cnt-app .sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
body.cnt-app .sidebar-nav ul .sidebar-item .sidebar-link.active i {
color: #3b82f6 !important;
}
body.cnt-app .nav-small-cap,
body.cnt-app .user-profile .profile-text > a {
color: #6b7585 !important;
}
/* === Modo oscuro: sidebar oscuro coherente con el resto === */
body.cnt-app.cnt-dark .left-sidebar,
body.cnt-app.cnt-dark .left-sidebar[data-sidebarbg] {
background: transparent !important;
}
body.cnt-app.cnt-dark .scroll-sidebar,
body.cnt-app.cnt-dark .sidebar-footer {
background: var(--c-bg) !important;
}
body.cnt-app.cnt-dark .sidebar-nav ul .sidebar-item .sidebar-link,
body.cnt-app.cnt-dark .sidebar-nav .has-arrow::after,
body.cnt-app.cnt-dark .sidebar-nav .sidebar-link i,
body.cnt-app.cnt-dark .sidebar-nav .sidebar-link span {
color: #9aa3b2 !important;
}
body.cnt-app.cnt-dark .sidebar-nav ul .sidebar-item .sidebar-link:hover {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.04) !important;
}
/* Activo en modo oscuro: fondo = surface (= navbar) para que el
item activo se vea como "tile elevado" coherente con el topbar.
La barra lateral aporta el único acento de color brand. */
body.cnt-app.cnt-dark .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
body.cnt-app.cnt-dark .sidebar-nav ul .sidebar-item .sidebar-link.active {
color: #ffffff !important;
background: var(--c-surface) !important;
font-weight: 600 !important;
box-shadow: none !important;
}
body.cnt-app.cnt-dark .sidebar-nav ul .sidebar-item.selected > .sidebar-link::before,
body.cnt-app.cnt-dark .sidebar-nav ul .sidebar-item .sidebar-link.active::before {
background: #60a5fa;
box-shadow: 0 0 12px rgba(96, 165, 250, .8);
}
body.cnt-app.cnt-dark .sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
body.cnt-app.cnt-dark .sidebar-nav ul .sidebar-item .sidebar-link.active i,
body.cnt-app.cnt-dark .sidebar-nav ul .sidebar-item.selected > .sidebar-link span,
body.cnt-app.cnt-dark .sidebar-nav ul .sidebar-item .sidebar-link.active span {
color: #ffffff !important;
}
body.cnt-app.cnt-dark .nav-small-cap,
body.cnt-app.cnt-dark .user-profile .profile-text > a {
color: #6b7585 !important;
}
/* Topbar — incluye navbar-collapse y mega-dropdown */
body.cnt-app.cnt-dark .topbar,
body.cnt-app.cnt-dark .topbar .top-navbar,
body.cnt-app.cnt-dark .topbar .top-navbar .navbar-header,
body.cnt-app.cnt-dark .navbar-dark,
body.cnt-app.cnt-dark .navbar-collapse,
body.cnt-app.cnt-dark .navbar-collapse[data-navbarbg],
body.cnt-app.cnt-dark .navbar-header[data-logobg],
body.cnt-app.cnt-dark [data-navbarbg="skin1"],
body.cnt-app.cnt-dark [data-logobg="skin1"] {
background: var(--c-surface) !important;
background-color: var(--c-surface) !important;
border-bottom: 1px solid var(--c-border-soft) !important;
}
body.cnt-app.cnt-dark .topbar .navbar-brand .logo-text,
body.cnt-app.cnt-dark .topbar .top-navbar .navbar-nav > .nav-item > .nav-link,
body.cnt-app.cnt-dark .topbar .top-navbar .navbar-nav > .nav-item > .nav-link.dropdown-toggle {
color: var(--c-text) !important;
}
body.cnt-app.cnt-dark .topbar .navbar-nav .nav-link i,
body.cnt-app.cnt-dark .topbar .nav-link .mdi,
body.cnt-app.cnt-dark .topbar .nav-link .ti,
body.cnt-app.cnt-dark .topbar .nav-link [data-feather] {
color: var(--c-text-muted) !important;
}
/* =====================================================================
Dropdowns del topbar — fix del "salto" inicial y rediseño v3
=====================================================================
Problema: .dropdown-menu-animate-up tiene una animación que anima
`top: 71px → 70px` (style.css:28616). Al combinarse con Popper de
Bootstrap (que usa `transform` para posicionar), el dropdown aparece
primero arriba del todo (top: 71px forzado) y, al acabar la animación
~500ms después, Popper lo reposiciona — de ahí el salto.
La solución: cancelar esa animación y reemplazarla por un fade
suave que no toque `top`/`transform`. Funciona en cualquier tema.
===================================================================== */
body.cnt-app .dropdown-menu-animate-up {
-webkit-animation: cnt-dropdown-fade .15s ease-out 1 !important;
animation: cnt-dropdown-fade .15s ease-out 1 !important;
}
@keyframes cnt-dropdown-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Mailbox dropdown (favoritos +, verifactu) — look v3 del dashboard */
body.cnt-app .topbar .mailbox.dropdown-menu {
width: 320px;
padding: 6px;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
background: var(--c-surface);
box-shadow: var(--shadow-2);
margin-top: 4px;
}
/* Lista interna: quitar el reset de Bootstrap (margins automáticos) */
body.cnt-app .topbar .mailbox.dropdown-menu .list-style-none {
margin: 0; padding: 0; list-style: none;
}
/* Items principales (a directo dentro de li) — los del menú "+" */
body.cnt-app .topbar .mailbox.dropdown-menu > .list-style-none > li > a,
body.cnt-app .topbar .mailbox.dropdown-menu .list-style-none li > a.font-weight-medium {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: var(--r-sm);
font-size: 13px;
font-weight: 500;
color: var(--c-text);
text-decoration: none;
transition: background .12s, color .12s;
margin: 1px 0;
line-height: 1.3;
}
body.cnt-app .topbar .mailbox.dropdown-menu > .list-style-none > li > a:hover,
body.cnt-app .topbar .mailbox.dropdown-menu .list-style-none li > a.font-weight-medium:hover {
background: var(--c-brand-soft);
color: var(--c-brand);
}
/* Iconos feather dentro de los items */
body.cnt-app .topbar .mailbox.dropdown-menu .feather-sm {
width: 16px; height: 16px;
flex-shrink: 0;
color: var(--c-success);
stroke-width: 2;
margin: 0 !important;
}
body.cnt-app .topbar .mailbox.dropdown-menu a:hover .feather-sm {
color: var(--c-brand);
}
/* Header con badge (p.ej. "Cola Verifactu") */
body.cnt-app .topbar .mailbox.dropdown-menu .border-bottom {
border: 0 !important;
border-bottom: 1px solid var(--c-border-soft) !important;
padding: 10px 12px !important;
margin-bottom: 4px;
}
body.cnt-app .topbar .mailbox.dropdown-menu .border-bottom .font-weight-medium {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--c-text);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
body.cnt-app .topbar .mailbox.dropdown-menu .badge {
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 0.02em;
}
/* Footer link (Historial / Ver todo) */
body.cnt-app .topbar .mailbox.dropdown-menu .text-center.border-top {
border: 0 !important;
border-top: 1px solid var(--c-border-soft) !important;
padding: 8px !important;
margin-top: 4px;
color: var(--c-brand) !important;
font-weight: 500;
font-size: 12.5px;
border-radius: var(--r-sm);
transition: background .12s;
}
body.cnt-app .topbar .mailbox.dropdown-menu .text-center.border-top:hover {
background: var(--c-surface-alt);
}
/* Botón "Limpiar todas las notificaciones" */
body.cnt-app .topbar .mailbox.dropdown-menu .btn-clear-all-notifications {
width: 100%;
background: transparent;
border: 1px solid var(--c-danger-soft);
color: var(--c-danger);
border-radius: var(--r-sm);
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
margin-top: 6px;
transition: all .12s;
}
body.cnt-app .topbar .mailbox.dropdown-menu .btn-clear-all-notifications:hover {
background: var(--c-danger-soft);
}
/* Mensaje-center scrollable interno (Verifactu queue) */
body.cnt-app .topbar .mailbox.dropdown-menu .message-center {
border-radius: var(--r-sm);
overflow-y: auto;
padding: 2px 0;
}
body.cnt-app .topbar .mailbox.dropdown-menu .message-center .message-item {
border: 0;
border-radius: var(--r-sm);
padding: 8px 10px !important;
margin: 1px 4px;
transition: background .12s;
font-size: 12.5px;
color: var(--c-text);
display: flex; align-items: center; gap: 10px;
text-decoration: none;
}
body.cnt-app .topbar .mailbox.dropdown-menu .message-center .message-item:hover {
background: var(--c-surface-alt) !important;
}
body.cnt-app .topbar .mailbox.dropdown-menu .message-center .message-item .message-title {
color: var(--c-text) !important;
font-weight: 500;
font-size: 12.5px;
line-height: 1.3;
}
body.cnt-app .topbar .mailbox.dropdown-menu .message-center .message-item .mail-desc,
body.cnt-app .topbar .mailbox.dropdown-menu .message-center .message-item .time {
color: var(--c-text-muted) !important;
font-size: 11.5px;
}
/* Banner de incidencia Verifactu (VFT38/39) */
body.cnt-app .topbar .mailbox.dropdown-menu #vf-incidencia-summary > div {
background: var(--c-warn-soft) !important;
border: 0 !important;
border-bottom: 1px solid var(--c-warn) !important;
border-radius: var(--r-sm);
margin: 2px;
}
body.cnt-app .topbar .mailbox.dropdown-menu #vf-incidencia-summary span {
color: var(--c-warn) !important;
font-size: 12px !important;
}
/* User-dd (menú de usuario superior) — mismo tratamiento */
body.cnt-app .topbar .user-dd.dropdown-menu {
width: 280px;
padding: 6px;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
background: var(--c-surface);
box-shadow: var(--shadow-2);
margin-top: 4px;
}
/* Tema oscuro: tokens ya cambian, pero garantizamos el surface */
body.cnt-app.cnt-dark .topbar .mailbox.dropdown-menu,
body.cnt-app.cnt-novatek-dark .topbar .mailbox.dropdown-menu,
body.cnt-app.cnt-dark .topbar .user-dd.dropdown-menu,
body.cnt-app.cnt-novatek-dark .topbar .user-dd.dropdown-menu {
background: var(--c-surface) !important;
border-color: var(--c-border) !important;
}
/* Mega-dropdown (panel grande con submenús) */
body.cnt-app.cnt-dark .mega-dropdown-menu,
body.cnt-app.cnt-dark .dropdown-menu-animate-up {
background: var(--c-surface) !important;
border-color: var(--c-border) !important;
}
body.cnt-app.cnt-dark .mega-dropdown-menu h4 {
color: var(--c-text) !important;
}
body.cnt-app.cnt-dark .mega-dropdown-menu .list-style-none a,
body.cnt-app.cnt-dark .mega-dropdown-menu li a {
color: var(--c-text-muted) !important;
}
body.cnt-app.cnt-dark .mega-dropdown-menu .list-style-none a:hover,
body.cnt-app.cnt-dark .mega-dropdown-menu li a:hover {
color: var(--c-brand) !important; background: var(--c-surface-alt) !important;
}
/* Page wrapper / iframe contenedor */
body.cnt-app.cnt-dark .page-wrapper,
body.cnt-app.cnt-novatek-dark .page-wrapper,
body.cnt-app.cnt-dark #imain,
body.cnt-app.cnt-novatek-dark #imain {
background: var(--c-bg) !important;
}
/* Cards, dropdowns y modales del tema legado · ambos modos oscuros */
body.cnt-app.cnt-dark .card,
body.cnt-app.cnt-novatek-dark .card,
body.cnt-app.cnt-dark .dropdown-menu,
body.cnt-app.cnt-novatek-dark .dropdown-menu,
body.cnt-app.cnt-dark .modal-content,
body.cnt-app.cnt-novatek-dark .modal-content,
body.cnt-app.cnt-dark .offcanvas,
body.cnt-app.cnt-novatek-dark .offcanvas {
background: var(--c-surface) !important;
color: var(--c-text) !important;
border-color: var(--c-border) !important;
}
body.cnt-app.cnt-dark .dropdown-item,
body.cnt-app.cnt-novatek-dark .dropdown-item {
color: var(--c-text) !important;
}
body.cnt-app.cnt-dark .dropdown-item:hover,
body.cnt-app.cnt-novatek-dark .dropdown-item:hover,
body.cnt-app.cnt-dark .dropdown-item:focus,
body.cnt-app.cnt-novatek-dark .dropdown-item:focus {
background: var(--c-surface-alt) !important;
color: var(--c-text) !important;
}
body.cnt-app.cnt-dark .dropdown-divider,
body.cnt-app.cnt-novatek-dark .dropdown-divider {
border-color: var(--c-border-soft) !important;
}
/* Sidebar inactivo: pasar de weight 300 (heredado) a 500 para
legibilidad sobre el fondo oscuro. El color, hover y activo
ya están definidos arriba en el bloque del rediseño v3. */
body.cnt-app .sidebar-nav ul .sidebar-item .sidebar-link {
font-weight: 500;
}
/* =========================================================
Tema Novatek Teal (cnt-novatek-teal) · variante "claro"
---------------------------------------------------------
Modo claro completo con paleta Novatek: sidebar BLANCO
(texto oscuro, link activo teal-soft), navbar también claro.
Estilo Linear/Notion. Brand teal sobrio #006d8f.
========================================================= */
body.cnt-app.cnt-novatek-teal {
--c-text: #1a2535;
--c-text-muted: #3d4f63;
--c-text-subtle: #556070;
--c-border: #e4eaf2;
--c-border-soft: #eef0f5;
--c-bg: #f4f7fb;
--c-surface: #ffffff;
--c-surface-alt: #f8fafc;
--c-brand: #006d8f;
--c-brand-soft: #d6eef5;
}
/* Sidebar: blanco con texto oscuro */
body.cnt-app.cnt-novatek-teal #main-wrapper .left-sidebar,
body.cnt-app.cnt-novatek-teal #main-wrapper .left-sidebar[data-sidebarbg],
body.cnt-app.cnt-novatek-teal .scroll-sidebar,
body.cnt-app.cnt-novatek-teal .sidebar-footer {
background: #ffffff !important;
border-right: 1px solid #e4eaf2 !important;
}
body.cnt-app.cnt-novatek-teal .sidebar-nav ul .sidebar-item .sidebar-link,
body.cnt-app.cnt-novatek-teal .sidebar-nav .sidebar-link i,
body.cnt-app.cnt-novatek-teal .sidebar-nav .sidebar-link span {
color: #3d4f63 !important;
}
body.cnt-app.cnt-novatek-teal .sidebar-nav ul .sidebar-item .sidebar-link:hover {
color: #1a2535 !important;
background: #f4f7fb !important;
}
body.cnt-app.cnt-novatek-teal .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
body.cnt-app.cnt-novatek-teal .sidebar-nav ul .sidebar-item .sidebar-link.active {
background: #d6eef5 !important;
color: #006d8f !important;
box-shadow: none !important;
}
body.cnt-app.cnt-novatek-teal .sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
body.cnt-app.cnt-novatek-teal .sidebar-nav ul .sidebar-item .sidebar-link.active i,
body.cnt-app.cnt-novatek-teal .sidebar-nav ul .sidebar-item.selected > .sidebar-link span,
body.cnt-app.cnt-novatek-teal .sidebar-nav ul .sidebar-item .sidebar-link.active span {
color: #006d8f !important;
}
body.cnt-app.cnt-novatek-teal .sidebar-nav ul .sidebar-item.selected > .sidebar-link::before,
body.cnt-app.cnt-novatek-teal .sidebar-nav ul .sidebar-item .sidebar-link.active::before {
background: #006d8f !important;
box-shadow: 0 0 8px rgba(0,109,143,0.45);
}
/* =========================================================
Tema Novatek Dark (cnt-novatek-dark)
---------------------------------------------------------
Modo oscuro completo con paleta Novatek: fondo navy muy
oscuro, superficies navy, texto claro, cyan vibrante como
acento. Pensado para sesiones largas mirando datos.
========================================================= */
body.cnt-app.cnt-novatek-dark {
--c-text: #e2e8f0;
--c-text-muted: #94a3b8;
--c-text-subtle: #64748b;
--c-border: #1d2e49;
--c-border-soft: #152a4a;
--c-bg: #080f1d;
--c-surface: #0d1f3c;
--c-surface-alt: #152a4a;
--c-brand: #00b4d8;
--c-brand-soft: rgba(0, 180, 216, .15);
--c-success: #06d6a0;
--c-success-soft: rgba(6, 214, 160, .15);
--c-warn: #fb8500;
--c-warn-soft: rgba(251, 133, 0, .15);
--c-danger: #f87171;
--c-danger-soft: rgba(248, 113, 113, .15);
--shadow-1: 0 1px 2px rgba(0,0,0,.45);
--shadow-2: 0 4px 12px rgba(0,0,0,.6);
color-scheme: dark;
}
body.cnt-app.cnt-novatek-dark, body.cnt-app.cnt-novatek-dark * {
scrollbar-color: rgba(0, 180, 216, .35) transparent;
}
body.cnt-app.cnt-novatek-dark ::-webkit-scrollbar-thumb {
background: rgba(0, 180, 216, .25);
}
body.cnt-app.cnt-novatek-dark ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 180, 216, .55);
}
/* Sidebar: mismo fondo que el body, separado solo por hairline */
body.cnt-app.cnt-novatek-dark #main-wrapper .left-sidebar,
body.cnt-app.cnt-novatek-dark #main-wrapper .left-sidebar[data-sidebarbg],
body.cnt-app.cnt-novatek-dark .scroll-sidebar,
body.cnt-app.cnt-novatek-dark .sidebar-footer {
background: var(--c-bg) !important;
border-right-color: #1d2e49 !important;
}
body.cnt-app.cnt-novatek-dark .sidebar-nav ul .sidebar-item .sidebar-link,
body.cnt-app.cnt-novatek-dark .sidebar-nav .sidebar-link i,
body.cnt-app.cnt-novatek-dark .sidebar-nav .sidebar-link span {
color: #94a3b8 !important;
}
body.cnt-app.cnt-novatek-dark .sidebar-nav ul .sidebar-item .sidebar-link:hover {
color: #ffffff !important;
background: rgba(255,255,255,0.04) !important;
}
body.cnt-app.cnt-novatek-dark .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
body.cnt-app.cnt-novatek-dark .sidebar-nav ul .sidebar-item .sidebar-link.active {
background: var(--c-surface) !important;
color: #ffffff !important;
font-weight: 600 !important;
}
body.cnt-app.cnt-novatek-dark .sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
body.cnt-app.cnt-novatek-dark .sidebar-nav ul .sidebar-item .sidebar-link.active i,
body.cnt-app.cnt-novatek-dark .sidebar-nav ul .sidebar-item.selected > .sidebar-link span,
body.cnt-app.cnt-novatek-dark .sidebar-nav ul .sidebar-item .sidebar-link.active span {
color: #00b4d8 !important;
}
body.cnt-app.cnt-novatek-dark .sidebar-nav ul .sidebar-item.selected > .sidebar-link::before,
body.cnt-app.cnt-novatek-dark .sidebar-nav ul .sidebar-item .sidebar-link.active::before {
background: #00b4d8 !important;
box-shadow: 0 0 12px rgba(0,180,216,0.8);
}
/* =========================================================
Navbar (topbar) · adaptación por tema
---------------------------------------------------------
El theme legado pinta el topbar con `data-navbarbg="skin1"`
= hardcoded #2563eb (azul brand original). Sobrescribimos
con alta especificidad para los temas custom y oscuros.
========================================================= */
body.cnt-app.cnt-dark #main-wrapper .topbar[data-navbarbg],
body.cnt-app.cnt-dark #main-wrapper .topbar .navbar-collapse[data-navbarbg],
body.cnt-app.cnt-dark #main-wrapper .topbar,
body.cnt-app.cnt-dark #main-wrapper .topbar .navbar-header[data-logobg],
body.cnt-app.cnt-dark #main-wrapper .topbar .navbar-header {
background: var(--c-surface) !important;
border-bottom: 1px solid var(--c-border) !important;
}
/* novatek-teal (variante claro): navbar blanco con texto oscuro */
body.cnt-app.cnt-novatek-teal #main-wrapper .topbar[data-navbarbg],
body.cnt-app.cnt-novatek-teal #main-wrapper .topbar .navbar-collapse[data-navbarbg],
body.cnt-app.cnt-novatek-teal #main-wrapper .topbar,
body.cnt-app.cnt-novatek-teal #main-wrapper .topbar .navbar-header[data-logobg],
body.cnt-app.cnt-novatek-teal #main-wrapper .topbar .navbar-header {
background: #ffffff !important;
border-bottom: 1px solid #e4eaf2 !important;
}
body.cnt-app.cnt-novatek-teal .topbar .nav-link,
body.cnt-app.cnt-novatek-teal .topbar .navbar-brand,
body.cnt-app.cnt-novatek-teal .topbar .nav-link i {
color: #1a2535 !important;
}
body.cnt-app.cnt-novatek-dark #main-wrapper .topbar[data-navbarbg],
body.cnt-app.cnt-novatek-dark #main-wrapper .topbar .navbar-collapse[data-navbarbg],
body.cnt-app.cnt-novatek-dark #main-wrapper .topbar,
body.cnt-app.cnt-novatek-dark #main-wrapper .topbar .navbar-header[data-logobg],
body.cnt-app.cnt-novatek-dark #main-wrapper .topbar .navbar-header {
background: var(--c-surface) !important;
border-bottom: 1px solid var(--c-border) !important;
}
/* Texto/iconos del topbar en oscuro: color claro garantizado */
body.cnt-app.cnt-dark .topbar .nav-link,
body.cnt-app.cnt-novatek-dark .topbar .nav-link,
body.cnt-app.cnt-dark .topbar .navbar-brand,
body.cnt-app.cnt-novatek-dark .topbar .navbar-brand,
body.cnt-app.cnt-dark .topbar .nav-link i,
body.cnt-app.cnt-novatek-dark .topbar .nav-link i {
color: var(--c-text) !important;
}
/* =========================================================
Modernización global de clases legacy (Vía 1)
---------------------------------------------------------
Sin tocar markup, hace que los componentes Bootstrap legacy
(.btn-*, .card, .table-*) adopten los tokens v3. Cubre todos
los formularios sin migración manual del HTML.
Sin !important salvo casos justificados, para que reglas
específicas (modal-footer, dashboard-pro, etc.) sigan ganando.
========================================================= */
/* === Base unificada de botones ===
Padding, tipografía y radio coherentes para todos los .btn dentro
de cnt-app. Sin !important para que rules más específicas (toolbar,
modal-footer, dashboard-pro) sigan ganando donde aplican. */
body.cnt-app .btn {
font-family: var(--cnt-font);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
padding: 7px 14px;
border-radius: var(--r-md);
border: 1px solid transparent;
text-transform: none;
transition: background .12s, border-color .12s, color .12s, transform .08s, opacity .12s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
}
body.cnt-app .btn:active { transform: translateY(1px); }
body.cnt-app .btn:focus,
body.cnt-app .btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--c-brand-soft);
}
body.cnt-app .btn:disabled,
body.cnt-app .btn.disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
/* Tamaños: btn-sm y btn-lg proporcionales */
body.cnt-app .btn-sm {
font-size: 12px;
padding: 5px 10px;
line-height: 1.2;
gap: 5px;
}
body.cnt-app .btn-lg {
font-size: 14px;
padding: 9px 18px;
gap: 8px;
}
/* Iconos dentro de botones: tamaño y alineación consistente */
body.cnt-app .btn .mdi,
body.cnt-app .btn .feather,
body.cnt-app .btn .feather-sm,
body.cnt-app .btn svg,
body.cnt-app .btn i[data-feather] {
font-size: 16px;
width: 16px; height: 16px;
flex-shrink: 0;
line-height: 1;
}
body.cnt-app .btn-sm .mdi,
body.cnt-app .btn-sm .feather,
body.cnt-app .btn-sm svg,
body.cnt-app .btn-sm i[data-feather] {
font-size: 14px;
width: 14px; height: 14px;
}
/* === btn-default (legacy, equivale a secondary) === */
body.cnt-app .btn-default {
background: var(--c-surface);
border-color: var(--c-border);
color: var(--c-text);
}
body.cnt-app .btn-default:hover {
background: var(--c-surface-alt);
border-color: var(--c-text-muted);
color: var(--c-text);
}
/* === Variantes light-* (legacy theme) ===
Botones tinted: bg con el color soft del token, color con el sólido.
Se usan mucho como "acción secundaria con énfasis de color". */
body.cnt-app .btn-light-primary,
body.cnt-app .btn-light-info {
background: var(--c-brand-soft);
color: var(--c-brand);
border-color: transparent;
}
body.cnt-app .btn-light-primary:hover,
body.cnt-app .btn-light-info:hover {
background: var(--c-brand);
color: #fff;
}
body.cnt-app .btn-light-success {
background: var(--c-success-soft);
color: var(--c-success);
border-color: transparent;
}
body.cnt-app .btn-light-success:hover {
background: var(--c-success);
color: #fff;
}
body.cnt-app .btn-light-danger {
background: var(--c-danger-soft);
color: var(--c-danger);
border-color: transparent;
}
body.cnt-app .btn-light-danger:hover {
background: var(--c-danger);
color: #fff;
}
body.cnt-app .btn-light-warning {
background: var(--c-warn-soft);
color: var(--c-warn);
border-color: transparent;
}
body.cnt-app .btn-light-warning:hover {
background: var(--c-warn);
color: #fff;
}
body.cnt-app .btn-light,
body.cnt-app .btn-light-secondary {
background: var(--c-surface-alt);
color: var(--c-text-muted);
border-color: var(--c-border-soft);
}
body.cnt-app .btn-light:hover,
body.cnt-app .btn-light-secondary:hover {
background: var(--c-surface);
color: var(--c-text);
border-color: var(--c-border);
}
/* === Utility text-* dentro de botones: respetar token del tema ===
Bootstrap fuerza colores hardcoded (#2563eb, #f59e0b, etc.) en
.text-info/.text-warning/etc. Cuando se usan combinadas con un btn,
sobrescriben el color del btn-light-* y rompen la coherencia con el
tema activo. Forzamos a usar el token correspondiente. */
body.cnt-app .btn.text-info,
body.cnt-app .btn.text-primary { color: var(--c-brand) !important; }
body.cnt-app .btn.text-success { color: var(--c-success) !important; }
body.cnt-app .btn.text-danger { color: var(--c-danger) !important; }
body.cnt-app .btn.text-warning { color: var(--c-warn) !important; }
body.cnt-app .btn.text-muted { color: var(--c-text-muted) !important; }
/* Cuando el btn está en estado hover/sólido (bg con color brand),
el texto debe ser blanco aunque tenga clase text-* */
body.cnt-app .btn.btn-info:hover,
body.cnt-app .btn.btn-primary:hover,
body.cnt-app .btn.btn-success:hover,
body.cnt-app .btn.btn-danger:hover,
body.cnt-app .btn.btn-warning:hover,
body.cnt-app .btn.btn-light-primary:hover,
body.cnt-app .btn.btn-light-info:hover,
body.cnt-app .btn.btn-light-success:hover,
body.cnt-app .btn.btn-light-danger:hover,
body.cnt-app .btn.btn-light-warning:hover {
color: #fff;
}
/* === Botones primarios y semánticos === */
body.cnt-app .btn-primary {
background: var(--c-brand);
border-color: var(--c-brand);
color: #fff;
}
body.cnt-app .btn-primary:hover,
body.cnt-app .btn-primary:focus {
background: var(--c-brand);
border-color: var(--c-brand);
color: #fff;
filter: brightness(0.92);
}
body.cnt-app .btn-info {
background: var(--c-brand);
border-color: var(--c-brand);
color: #fff;
}
body.cnt-app .btn-info:hover { filter: brightness(0.92); color: #fff; }
body.cnt-app .btn-success {
background: var(--c-success);
border-color: var(--c-success);
color: #fff;
}
body.cnt-app .btn-success:hover { filter: brightness(0.92); color: #fff; }
body.cnt-app .btn-danger {
background: var(--c-danger);
border-color: var(--c-danger);
color: #fff;
}
body.cnt-app .btn-danger:hover { filter: brightness(0.92); color: #fff; }
body.cnt-app .btn-warning {
background: var(--c-warn);
border-color: var(--c-warn);
color: #fff;
}
body.cnt-app .btn-warning:hover { filter: brightness(0.92); color: #fff; }
body.cnt-app .btn-secondary {
background: var(--c-surface);
border-color: var(--c-border);
color: var(--c-text);
}
body.cnt-app .btn-secondary:hover {
background: var(--c-surface-alt);
border-color: var(--c-text-muted);
color: var(--c-text);
}
/* btn-rounded: el theme legado lo hace pill (border-radius:60px).
Lo unificamos al border-radius v3 (6px) por coherencia. */
body.cnt-app .btn.btn-rounded { border-radius: var(--r-md); }
/* Botones outline: borde + texto en color del token, fondo transparente */
body.cnt-app .btn-outline-primary,
body.cnt-app .btn-outline-info {
color: var(--c-brand);
border-color: var(--c-brand);
background: transparent;
}
body.cnt-app .btn-outline-primary:hover,
body.cnt-app .btn-outline-info:hover {
background: var(--c-brand);
border-color: var(--c-brand);
color: #fff;
}
body.cnt-app .btn-outline-secondary {
color: var(--c-text-muted);
border-color: var(--c-border);
background: transparent;
}
body.cnt-app .btn-outline-secondary:hover {
background: var(--c-surface-alt);
border-color: var(--c-text-muted);
color: var(--c-text);
}
body.cnt-app .btn-outline-success {
color: var(--c-success);
border-color: var(--c-success);
background: transparent;
}
body.cnt-app .btn-outline-success:hover {
background: var(--c-success);
color: #fff;
}
body.cnt-app .btn-outline-danger {
color: var(--c-danger);
border-color: var(--c-danger);
background: transparent;
}
body.cnt-app .btn-outline-danger:hover {
background: var(--c-danger);
color: #fff;
}
body.cnt-app .btn-outline-warning {
color: var(--c-warn);
border-color: var(--c-warn);
background: transparent;
}
body.cnt-app .btn-outline-warning:hover {
background: var(--c-warn);
color: #fff;
}
/* === Cards / paneles legacy === */
body.cnt-app .card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
box-shadow: var(--shadow-1);
}
body.cnt-app .card-header {
background: var(--c-surface);
border-bottom: 1px solid var(--c-border-soft);
color: var(--c-text);
font-weight: 500;
}
body.cnt-app .card-footer {
background: var(--c-surface-alt);
border-top: 1px solid var(--c-border-soft);
color: var(--c-text-muted);
}
body.cnt-app .card-title {
color: var(--c-text);
font-weight: 600;
}
body.cnt-app .card-body { color: var(--c-text); }
/* === Tablas legacy (table / table-striped / table-bordered) ===
Solo colores y bordes; no toca tipografía para no romper layouts
de tablas que esperan su tamaño/peso original. */
body.cnt-app .table {
color: var(--c-text);
border-color: var(--c-border);
}
body.cnt-app .table > :not(caption) > * > * {
border-bottom-color: var(--c-border-soft);
background-color: transparent;
}
/* El legacy (style_1.css) pone --bs-table-striped-bg:#fff y luego pinta un
box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg) sobre cada celda
→ en oscuro el inset BLANCO tapa el bg dark y deja el texto ilegible
(blanco sobre blanco). Neutralizamos la accent-bg legacy para que el
bg-color real (--c-surface-alt) sea el que pinte la franja. */
body.cnt-app .table {
--bs-table-striped-bg: transparent;
--bs-table-hover-bg: transparent;
--bs-table-active-bg: transparent;
--bs-table-striped-color: var(--c-text);
--bs-table-hover-color: var(--c-text);
--bs-table-active-color: var(--c-text);
}
body.cnt-app .table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: var(--c-surface-alt);
color: var(--c-text);
}
body.cnt-app .table-bordered,
body.cnt-app .table-bordered > :not(caption) > * > * {
border-color: var(--c-border);
}
body.cnt-app .table-hover > tbody > tr:hover > * {
background-color: var(--c-surface-alt);
color: var(--c-text);
}
/* tfoot del tableArt_dt (fila de inputs para añadir línea): el JS le
pone background:#f8f9fa hardcoded inline. En oscuro queda blanco
roto y rompe el tema. Sobrescribimos a token oscuro. */
body.cnt-app.cnt-dark table tfoot tr,
body.cnt-app.cnt-novatek-dark table tfoot tr,
body.cnt-app.cnt-dark table tfoot td,
body.cnt-app.cnt-novatek-dark table tfoot td {
background: var(--c-surface) !important;
color: var(--c-text);
}
/* === Form controls básicos (input, select, textarea) === */
body.cnt-app .form-control,
body.cnt-app .form-select {
color: var(--c-text);
background-color: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
transition: border-color .12s, box-shadow .12s;
}
body.cnt-app .form-control:focus,
body.cnt-app .form-select:focus {
border-color: var(--c-brand);
box-shadow: 0 0 0 3px var(--c-brand-soft);
outline: none;
}
body.cnt-app .form-control:disabled,
body.cnt-app .form-control[readonly],
body.cnt-app .form-select:disabled {
background-color: var(--c-surface-alt);
color: var(--c-text-muted);
}
body.cnt-app .form-label,
body.cnt-app .control-label,
body.cnt-app .col-form-label {
color: var(--c-text);
font-weight: 500;
}
/* === Modo oscuro: contraste de labels y form-check ===
En oscuro, todas las labels (incluidas .control-label/.col-form-label/
.form-label) quedan en var(--c-text-muted)=#9aa3b2, demasiado tenue.
Forzamos color de texto principal. Excluimos .form-check-label
(esos sí pueden ser muted) y dataTables_length (deliberadamente subtle). */
body.cnt-app.cnt-dark label:not(.form-check-label),
body.cnt-app.cnt-novatek-dark label:not(.form-check-label),
body.cnt-app.cnt-dark .form-label,
body.cnt-app.cnt-novatek-dark .form-label,
body.cnt-app.cnt-dark .control-label,
body.cnt-app.cnt-novatek-dark .control-label,
body.cnt-app.cnt-dark .col-form-label,
body.cnt-app.cnt-novatek-dark .col-form-label {
color: var(--c-text) !important;
}
/* Re-baja el subtle en .dataTables_length que es deliberado */
body.cnt-app.cnt-dark .dataTables_wrapper .dataTables_length label,
body.cnt-app.cnt-novatek-dark .dataTables_wrapper .dataTables_length label {
color: var(--c-text-subtle) !important;
}
/* form-check-input (checkbox/switch nativo BS5) en oscuro: el bg y borde
por defecto se confunden con el body. Usamos un borde más grueso y
contrastado para que el estado "no marcado" sea claramente visible. */
body.cnt-app.cnt-dark .form-check-input,
body.cnt-app.cnt-novatek-dark .form-check-input {
background-color: var(--c-surface-alt) !important;
border: 2px solid var(--c-text-muted) !important;
}
body.cnt-app.cnt-dark .form-check-input:hover,
body.cnt-app.cnt-novatek-dark .form-check-input:hover {
border-color: var(--c-text) !important;
}
body.cnt-app.cnt-dark .form-check-input:checked,
body.cnt-app.cnt-novatek-dark .form-check-input:checked {
background-color: var(--c-brand) !important;
border-color: var(--c-brand) !important;
}
body.cnt-app.cnt-dark .form-check-input:focus,
body.cnt-app.cnt-novatek-dark .form-check-input:focus {
box-shadow: 0 0 0 3px var(--c-brand-soft);
}
/* Bootstrap-switch (lib legacy) en oscuro: el wrapper y los handles
son blancos por defecto y desaparecen sobre el fondo oscuro. */
body.cnt-app.cnt-dark .bootstrap-switch,
body.cnt-app.cnt-novatek-dark .bootstrap-switch {
background: var(--c-surface-alt) !important;
border-color: var(--c-border) !important;
}
body.cnt-app.cnt-dark .bootstrap-switch .bootstrap-switch-label,
body.cnt-app.cnt-novatek-dark .bootstrap-switch .bootstrap-switch-label {
background: var(--c-surface) !important;
color: var(--c-text-muted) !important;
}
body.cnt-app.cnt-dark .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on,
body.cnt-app.cnt-novatek-dark .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on,
body.cnt-app.cnt-dark .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
body.cnt-app.cnt-novatek-dark .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
background: var(--c-success) !important;
color: #fff !important;
}
body.cnt-app.cnt-dark .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off,
body.cnt-app.cnt-novatek-dark .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
background: var(--c-text-subtle) !important;
color: #fff !important;
}
/* =========================================================
jQuery-Steps wizard · adaptación a tokens v3
---------------------------------------------------------
La librería pinta los pasos y botones con colores hardcoded
(texto #2f3d4a, botones blancos) que se rompen en cualquier
modo oscuro. Override completo respetando los 4 temas.
========================================================= */
/* Lista de pasos (top): label, número y estado */
body.cnt-app .wizard > .steps > ul > li a,
body.cnt-app .wizard > .steps > ul > li a:hover,
body.cnt-app .wizard > .steps > ul > li a:active {
color: var(--c-text-muted) !important;
background: transparent !important;
}
body.cnt-app .wizard > .steps > ul > li.current a,
body.cnt-app .wizard > .steps > ul > li.done a {
color: var(--c-text) !important;
font-weight: 500;
}
/* Círculo del número */
body.cnt-app .wizard > .steps > ul > li .number {
background: var(--c-surface-alt) !important;
color: var(--c-text-muted) !important;
border: 1px solid var(--c-border) !important;
}
body.cnt-app .wizard > .steps > ul > li.current .number {
background: var(--c-brand) !important;
color: #fff !important;
border-color: var(--c-brand) !important;
}
body.cnt-app .wizard > .steps > ul > li.done .number {
background: var(--c-success) !important;
color: #fff !important;
border-color: var(--c-success) !important;
}
/* Botones de acción (Anterior / Siguiente / Finalizar) */
body.cnt-app .wizard > .actions > ul > li > a {
background: var(--c-brand) !important;
color: #fff !important;
border: 1px solid var(--c-brand) !important;
border-radius: var(--r-md) !important;
padding: 7px 16px !important;
font-weight: 500 !important;
transition: filter .12s, opacity .12s;
}
body.cnt-app .wizard > .actions > ul > li > a:hover {
filter: brightness(0.92);
color: #fff !important;
}
body.cnt-app .wizard > .actions > ul > li.disabled > a,
body.cnt-app .wizard > .actions > ul > li.disabled > a:hover {
background: var(--c-surface-alt) !important;
color: var(--c-text-subtle) !important;
border-color: var(--c-border) !important;
cursor: not-allowed;
filter: none;
}
/* Área de contenido del wizard */
body.cnt-app .wizard > .content {
background: transparent !important;
color: var(--c-text);
border: 1px solid var(--c-border-soft);
border-radius: var(--r-md);
}
body.cnt-app .wizard > .content > .title {
color: var(--c-text) !important;
font-weight: 600;
}
/* =========================================================
Bootstrap utilities con colores hardcoded (.table-light,
.bg-light-*) que rompen los modos oscuros. Override por tema.
========================================================= */
/* .table-light: thead claro hardcoded → texto invisible en oscuro */
body.cnt-app.cnt-dark .table-light,
body.cnt-app.cnt-novatek-dark .table-light,
body.cnt-app.cnt-dark thead.table-light,
body.cnt-app.cnt-novatek-dark thead.table-light,
body.cnt-app.cnt-dark thead.table-light td,
body.cnt-app.cnt-novatek-dark thead.table-light td,
body.cnt-app.cnt-dark thead.table-light th,
body.cnt-app.cnt-novatek-dark thead.table-light th {
background-color: var(--c-surface-alt) !important;
color: var(--c-text-muted) !important;
border-color: var(--c-border) !important;
}
/* .table-responsive: el legacy le pone bg blanco hardcoded.
Usamos surface del token para que adopte el tema. En claro
sigue siendo blanco; en oscuro pasa al surface oscuro. */
body.cnt-app .table-responsive {
background-color: var(--c-surface);
color: var(--c-text);
}
/* .bg-light-* badges: bg muy claro + text-* hardcoded → ilegibles en oscuro
Usamos los tokens *-soft del tema activo para mantener el "tinted" pero
con colores que respetan el tema. */
body.cnt-app.cnt-dark .badge.bg-light-info,
body.cnt-app.cnt-novatek-dark .badge.bg-light-info,
body.cnt-app.cnt-dark .badge.bg-light-primary,
body.cnt-app.cnt-novatek-dark .badge.bg-light-primary {
background-color: var(--c-brand-soft) !important;
color: var(--c-brand) !important;
}
body.cnt-app.cnt-dark .badge.bg-light-success,
body.cnt-app.cnt-novatek-dark .badge.bg-light-success {
background-color: var(--c-success-soft) !important;
color: var(--c-success) !important;
}
body.cnt-app.cnt-dark .badge.bg-light-danger,
body.cnt-app.cnt-novatek-dark .badge.bg-light-danger {
background-color: var(--c-danger-soft) !important;
color: var(--c-danger) !important;
}
body.cnt-app.cnt-dark .badge.bg-light-warning,
body.cnt-app.cnt-novatek-dark .badge.bg-light-warning {
background-color: var(--c-warn-soft) !important;
color: var(--c-warn) !important;
}
body.cnt-app.cnt-dark .badge.bg-light,
body.cnt-app.cnt-novatek-dark .badge.bg-light,
body.cnt-app.cnt-dark .badge.bg-light-secondary,
body.cnt-app.cnt-novatek-dark .badge.bg-light-secondary {
background-color: var(--c-surface-alt) !important;
color: var(--c-text-muted) !important;
}
/* Inputs nativos date/time/number: el calendario nativo usa color-scheme
del tema, pero el input en sí tenía fondo blanco hardcoded en BS4 */
body.cnt-app.cnt-dark input[type="date"],
body.cnt-app.cnt-novatek-dark input[type="date"],
body.cnt-app.cnt-dark input[type="datetime-local"],
body.cnt-app.cnt-novatek-dark input[type="datetime-local"],
body.cnt-app.cnt-dark input[type="time"],
body.cnt-app.cnt-novatek-dark input[type="time"],
body.cnt-app.cnt-dark input[type="number"]:not(.form-control),
body.cnt-app.cnt-novatek-dark input[type="number"]:not(.form-control) {
background-color: var(--c-surface);
color: var(--c-text);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 6px 10px;
color-scheme: dark;
}
/* =========================================================
Badges sin variante de color y .bg-* utilities con colores
hardcoded del legacy → adoptan tokens del tema.
========================================================= */
/* Badge sin clase .bg-* explícita: el default de Bootstrap es
transparente con texto oscuro → invisible en oscuro. Forzamos
un look "secondary tinted". */
body.cnt-app .badge:not([class*="bg-"]):not([class*="text-"]),
body.cnt-app .badge.fw-normal:not([class*="bg-"]) {
background-color: var(--c-surface-alt);
color: var(--c-text-muted);
border: 1px solid var(--c-border);
}
body.cnt-app.cnt-dark .badge:not([class*="bg-"]),
body.cnt-app.cnt-novatek-dark .badge:not([class*="bg-"]) {
background-color: var(--c-surface-alt);
color: var(--c-text);
border: 1px solid var(--c-border-soft);
}
/* .bg-info / .bg-primary / etc. utilities: el legacy tiene colores
hardcoded (#2563eb, #0dcaf0…). En cnt-app usamos los tokens del
tema activo. */
body.cnt-app .bg-info,
body.cnt-app .bg-primary {
background-color: var(--c-brand) !important;
color: #fff !important;
}
body.cnt-app .bg-success {
background-color: var(--c-success) !important;
color: #fff !important;
}
body.cnt-app .bg-warning {
background-color: var(--c-warn) !important;
color: #fff !important;
}
body.cnt-app .bg-danger {
background-color: var(--c-danger) !important;
color: #fff !important;
}
/* =========================================================
DataTables: filas seleccionadas (Select plugin / clase manual)
---------------------------------------------------------
En modo CLARO usamos brand-soft (translúcido suave). En OSCURO
el brand-soft al 15% queda demasiado tenue sobre el navy del
body — la fila seleccionada apenas se distingue de las demás.
En oscuro subimos opacidad a 30% y forzamos texto blanco para
máxima legibilidad.
========================================================= */
/* Light: brand-soft + texto normal */
body.cnt-app table.dataTable tbody tr.selected,
body.cnt-app table.dataTable tbody tr.selected td,
body.cnt-app table.dataTable tbody tr.selected th,
body.cnt-app table.dataTable tbody tr.selected:hover td,
body.cnt-app table.dataTable tbody tr.selected:hover th,
body.cnt-app table.dataTable tbody tr.row-selected,
body.cnt-app table.dataTable tbody tr.row-selected td,
body.cnt-app table.dataTable tbody tr.active,
body.cnt-app table.dataTable tbody tr.active td,
body.cnt-app table.table tbody tr.selected,
body.cnt-app table.table tbody tr.selected td,
body.cnt-app table.table tbody tr.row-selected,
body.cnt-app table.table tbody tr.row-selected td {
background-color: var(--c-brand-soft) !important;
color: var(--c-text) !important;
}
/* Dark: bg más opaco (28%) + texto blanco + barra lateral brand */
body.cnt-app.cnt-dark table.dataTable tbody tr.selected td,
body.cnt-app.cnt-dark table.dataTable tbody tr.selected th,
body.cnt-app.cnt-dark table.dataTable tbody tr.selected:hover td,
body.cnt-app.cnt-dark table.dataTable tbody tr.row-selected td,
body.cnt-app.cnt-dark table.dataTable tbody tr.active td,
body.cnt-app.cnt-dark table.table tbody tr.selected td,
body.cnt-app.cnt-dark table.table tbody tr.row-selected td {
background-color: rgba(59, 130, 246, 0.28) !important;
color: #ffffff !important;
}
body.cnt-app.cnt-novatek-dark table.dataTable tbody tr.selected td,
body.cnt-app.cnt-novatek-dark table.dataTable tbody tr.selected th,
body.cnt-app.cnt-novatek-dark table.dataTable tbody tr.selected:hover td,
body.cnt-app.cnt-novatek-dark table.dataTable tbody tr.row-selected td,
body.cnt-app.cnt-novatek-dark table.dataTable tbody tr.active td,
body.cnt-app.cnt-novatek-dark table.table tbody tr.selected td,
body.cnt-app.cnt-novatek-dark table.table tbody tr.row-selected td {
background-color: rgba(0, 180, 216, 0.28) !important;
color: #ffffff !important;
}
/* Barra lateral del lado izquierdo en filas seleccionadas (afordancia
visual fuerte: "esta fila está seleccionada"). Aplica a todos los
temas — en claro casi pasa desapercibida, en oscuro es el indicador
primario junto con el bg tinted. */
body.cnt-app table.dataTable tbody tr.selected td:first-child,
body.cnt-app table.dataTable tbody tr.row-selected td:first-child,
body.cnt-app table.dataTable tbody tr.active td:first-child,
body.cnt-app table.table tbody tr.selected td:first-child,
body.cnt-app table.table tbody tr.row-selected td:first-child {
box-shadow: inset 3px 0 0 0 var(--c-brand);
}
/* En modo oscuro, los form-control dentro de modales/cards quedan
invisibles porque la regla base usa --c-surface (= bg de la modal).
Subimos a surface-alt y hacemos el borde más visible para que el
input destaque sobre el contenido del que forma parte. */
body.cnt-app.cnt-dark .form-control,
body.cnt-app.cnt-novatek-dark .form-control,
body.cnt-app.cnt-dark .form-select,
body.cnt-app.cnt-novatek-dark .form-select,
body.cnt-app.cnt-dark input.form-control,
body.cnt-app.cnt-novatek-dark input.form-control,
body.cnt-app.cnt-dark textarea.form-control,
body.cnt-app.cnt-novatek-dark textarea.form-control,
body.cnt-app.cnt-dark select.form-control,
body.cnt-app.cnt-novatek-dark select.form-control,
body.cnt-app.cnt-dark select.form-select,
body.cnt-app.cnt-novatek-dark select.form-select {
background-color: var(--c-surface-alt) !important;
border-color: var(--c-text-subtle) !important;
}
/* Stripe alternante para filas de datos en DataTables y tablas
genéricas en oscuro. Las filas pares se tintan ligeramente más
claras que el body, dando el efecto "fila/fila" del listado.
Necesitan !important porque la regla base de cnt-table.dataTable
fuerza tbody td a transparent !important. */
body.cnt-app.cnt-dark table.dataTable tbody tr:nth-child(even) > td,
body.cnt-app.cnt-novatek-dark table.dataTable tbody tr:nth-child(even) > td,
body.cnt-app.cnt-dark table.table tbody tr:nth-child(even) > td,
body.cnt-app.cnt-novatek-dark table.table tbody tr:nth-child(even) > td,
body.cnt-app.cnt-dark #tableArt tbody tr:nth-child(even) > td,
body.cnt-app.cnt-novatek-dark #tableArt tbody tr:nth-child(even) > td {
background-color: rgba(255, 255, 255, 0.035) !important;
}
body.cnt-app.cnt-dark table.dataTable tbody tr:hover > td,
body.cnt-app.cnt-novatek-dark table.dataTable tbody tr:hover > td,
body.cnt-app.cnt-dark table.table tbody tr:hover > td,
body.cnt-app.cnt-novatek-dark table.table tbody tr:hover > td {
background-color: rgba(255, 255, 255, 0.07) !important;
}
/* Excepción: las filas seleccionadas (tr.selected) mantienen su bg
brand-soft definido más arriba — el stripe no debe sobrescribirlo. */
body.cnt-app.cnt-dark table.dataTable tbody tr.selected:nth-child(even) > td,
body.cnt-app.cnt-novatek-dark table.dataTable tbody tr.selected:nth-child(even) > td {
background-color: rgba(0, 180, 216, 0.28) !important;
}
/* =========================================================
Bootstrap 4 → 5 compat: .offcanvas-right (legacy)
---------------------------------------------------------
La clase .offcanvas-right del theme legado define
`transform: translateX(100%)` permanente (sin pareja `.show`).
En BS5 el cierre depende de quitar/poner `.show` con
`transform: none` cuando visible. Forzamos el transform
correcto según el estado .show / .showing / .hiding.
========================================================= */
body.cnt-app .offcanvas.offcanvas-right {
transform: translateX(100%);
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
visibility: hidden;
}
body.cnt-app .offcanvas.offcanvas-right.show,
body.cnt-app .offcanvas.offcanvas-right.showing {
transform: none !important;
visibility: visible !important;
}
body.cnt-app .offcanvas.offcanvas-right.hiding {
transform: translateX(100%) !important;
}
/* =========================================================
Tabs (Bootstrap nav-tabs + nav-pills[role=tablist])
— adaptados al lenguaje dashboard v3 (underline brand)
========================================================= */
body.cnt-app .nav-tabs,
body.cnt-app .nav-pills[role="tablist"] {
border-bottom: 1px solid var(--c-border);
margin: 0 0 14px 0;
padding: 0;
gap: 0;
flex-wrap: wrap;
background: transparent;
}
body.cnt-app .nav-tabs .nav-item,
body.cnt-app .nav-pills[role="tablist"] .nav-item { margin: 0; }
body.cnt-app .nav-tabs .nav-link,
body.cnt-app .nav-pills[role="tablist"] .nav-link {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 10px 14px;
font-size: 13px;
line-height: 1.2;
color: var(--c-text-muted);
margin-bottom: -1px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color .15s ease, border-color .15s ease;
box-shadow: none;
}
body.cnt-app .nav-tabs .nav-link:hover,
body.cnt-app .nav-pills[role="tablist"] .nav-link:hover {
color: var(--c-text);
border-color: transparent;
background: transparent;
}
body.cnt-app .nav-tabs .nav-link.active,
body.cnt-app .nav-tabs .nav-item.show .nav-link,
body.cnt-app .nav-pills[role="tablist"] .nav-link.active,
body.cnt-app .nav-pills[role="tablist"] .nav-item.show .nav-link {
color: var(--c-brand);
border-bottom-color: var(--c-brand);
background: transparent;
font-weight: 500;
}
body.cnt-app .nav-tabs .nav-link:focus,
body.cnt-app .nav-pills[role="tablist"] .nav-link:focus {
outline: 0;
box-shadow: none;
}
body.cnt-app .nav-tabs .nav-link.disabled,
body.cnt-app .nav-pills[role="tablist"] .nav-link.disabled {
color: var(--c-text-subtle);
background: transparent;
border-color: transparent;
}
/* Iconos dentro de los tabs (FontAwesome / feather / inline svg). */
body.cnt-app .nav-tabs .nav-link .fas,
body.cnt-app .nav-tabs .nav-link .far,
body.cnt-app .nav-tabs .nav-link .fab,
body.cnt-app .nav-tabs .nav-link i[data-feather],
body.cnt-app .nav-pills[role="tablist"] .nav-link .fas,
body.cnt-app .nav-pills[role="tablist"] .nav-link .far,
body.cnt-app .nav-pills[role="tablist"] .nav-link .fab {
font-size: 12px;
opacity: .85;
}
body.cnt-app .nav-tabs .nav-link svg,
body.cnt-app .nav-pills[role="tablist"] .nav-link svg {
width: 14px;
height: 14px;
stroke-width: 2;
}
/* tab-content asociada — padding-top consistente cuando sigue a tabs. */
body.cnt-app .nav-tabs + .tab-content,
body.cnt-app .nav-pills[role="tablist"] + .tab-content { padding-top: 4px; }