/* =====================================================================
custom-metronic.css (Metronic 1.3.2 - Safe Modern Overrides)
Objetivo:
- Mantener el look y colores originales de Metronic
- Modernizar con: radios, sombras, focus ring, micro-interacciones,
inputs/botones/tablas más limpios
- Evitar cambiar: colores base del sidebar/topbar/body
Uso:
1) Cargar ESTE archivo después de los CSS de Metronic (último en el )
2) No requiere cambios de HTML.
===================================================================== */
/* -------------------------
1) Tokens (sin tocar colores del tema)
------------------------- */
:root {
--m-radius-lg: 10px;
--m-radius-md: 8px;
--m-radius-sm: 6px;
--m-border: rgba(15, 23, 42, .10);
--m-border-2: rgba(15, 23, 42, .16);
--m-shadow-sm: 0 4px 14px rgba(16,24,40,.10);
--m-shadow: 0 10px 28px rgba(16,24,40,.12);
/* Focus ring neutro: se “mezcla” con el color primario del tema */
--m-focus: 0 0 0 4px rgba(54, 108, 243, .16);
}
/* Mejor render tipográfico (no cambia la fuente del tema) */
html, body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Links: no cambiamos color; solo mejoramos subrayado al hover */
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* -------------------------
2) Cards / Portlets (Metronic)
------------------------- */
/* Metronic suele usar m-portlet; también cubrimos .card/.panel por si tu proyecto mezcla Bootstrap */
.m-portlet,
.card,
.panel,
.portlet,
.widget,
.box,
.well,
.thumbnail {
border-radius: var(--m-radius-xl);
overflow: hidden;
}
/* Sombra moderna sin alterar color/fondo del componente */
.m-portlet,
.card,
.panel,
.portlet,
.widget,
.box {
box-shadow: var(--m-shadow-sm);
border: 1px solid var(--m-border);
transition: transform .14s ease, box-shadow .14s ease;
}
/* Hover sutil (no cambia colores) */
.m-portlet:hover,
.card:hover,
.panel:hover,
.portlet:hover,
.widget:hover,
.box:hover {
transform: translateY(-2px);
box-shadow: var(--m-shadow);
}
/* Headers (no cambiamos background del tema; solo borde y padding más limpio) */
.m-portlet__head,
.card-header,
.panel-heading,
.portlet-title {
border-bottom: 1px solid var(--m-border);
}
/* -------------------------
3) Formularios / Inputs
------------------------- */
.form-control,
.m-input,
select.form-control,
textarea.form-control {
border-radius: var(--m-radius-sm);
border-color: var(--m-border-2);
transition: box-shadow .15s ease, border-color .15s ease;
}
/* Focus ring moderno (mantiene el color primario del tema) */
.form-control:focus,
.m-input:focus,
select.form-control:focus,
textarea.form-control:focus {
box-shadow: var(--m-focus);
}
/* Inputs readonly/disabled (más elegante, sin “apagarlos” demasiado) */
.form-control[readonly],
.m-input[readonly] {
background-color: rgba(17, 24, 39, .04);
border-color: rgba(17, 24, 39, .14);
color: rgba(17, 24, 39, .55);
cursor: not-allowed;
opacity: 1;
}
.form-control:disabled,
.m-input:disabled {
background-color: rgba(17, 24, 39, .06);
border-color: rgba(17, 24, 39, .14);
color: rgba(17, 24, 39, .55);
cursor: not-allowed;
opacity: 1;
}
/* Placeholders más suaves */
.form-control::placeholder,
.m-input::placeholder {
opacity: .75;
}
/* Labels un poco más firmes (no cambia color) */
label {
font-weight: 600;
}
/* -------------------------
4) Botones (sin cambiar paleta)
------------------------- */
.btn,
.m-btn {
border-radius: var(--m-radius-sm);
font-weight: 600;
letter-spacing: .1px;
transition: transform .08s ease, box-shadow .15s ease;
}
.btn:hover,
.m-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(16,24,40,.12);
}
.btn:active,
.m-btn:active {
transform: translateY(0);
box-shadow: none;
}
/* Botones outline: borde más fino */
.btn-outline,
.m-btn--outline {
border-width: 1px;
}
.btn-print:not(.btn-outline) {
color: #fff;
background-color: #f2784b;
border-color: #f2784b;
}
.btn-print:not(.btn-outline):focus, .btn-print:not(.btn-outline).focus {
color: #fff;
background-color: #ef541b;
border-color: #b1390d;
}
.btn-print:not(.btn-outline):hover {
color: #fff;
background-color: #ef541b;
border-color: #ee4d12;
}
.btn-print:not(.btn-outline):active, .btn-print:not(.btn-outline).active, .open > .btn-print:not(.btn-outline).dropdown-toggle {
color: #fff;
background-color: #ef541b;
border-color: #ee4d12;
}
.btn-print:not(.btn-outline):active:hover, .btn-print:not(.btn-outline):active:focus, .btn-print:not(.btn-outline):active.focus, .btn-print:not(.btn-outline).active:hover, .btn-print:not(.btn-outline).active:focus, .btn-print:not(.btn-outline).active.focus, .open > .btn-print:not(.btn-outline).dropdown-toggle:hover, .open > .btn-print:not(.btn-outline).dropdown-toggle:focus, .open > .btn-print:not(.btn-outline).dropdown-toggle.focus {
color: #fff;
background-color: #d74510;
border-color: #b1390d;
}
.btn-print:not(.btn-outline):active, .btn-print:not(.btn-outline).active, .open > .btn-print:not(.btn-outline).dropdown-toggle {
background-image: none;
}
.btn-print:not(.btn-outline).disabled:hover, .btn-print:not(.btn-outline).disabled:focus, .btn-print:not(.btn-outline).disabled.focus, .btn-print:not(.btn-outline)[disabled]:hover, .btn-print:not(.btn-outline)[disabled]:focus, .btn-print:not(.btn-outline)[disabled].focus, fieldset[disabled] .btn-print:not(.btn-outline):hover, fieldset[disabled] .btn-print:not(.btn-outline):focus, fieldset[disabled] .btn-print:not(.btn-outline).focus {
background-color: #f2784b;
border-color: #f2784b;
}
.btn-print:not(.btn-outline) .badge {
color: #f2784b;
background-color: #fff;
}
.btn.btn-outline.yellow-casablanca {
border-color: #f2784b;
color: #f2784b;
background: none;
}
.btn.btn-outline.yellow-casablanca:hover, .btn.btn-outline.yellow-casablanca:active, .btn.btn-outline.yellow-casablanca:active:hover, .btn.btn-outline.yellow-casablanca:active:focus, .btn.btn-outline.yellow-casablanca:focus, .btn.btn-outline.yellow-casablanca.active {
border-color: #f2784b;
color: #fff;
background-color: #f2784b;
}
.btn-print-stripe {
border-left: 4px solid #f2784b !important;
}
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #eea236;
}
.btn-warning.focus, .btn-warning:focus {
color: #fff;
background-color: #ec971f;
border-color: #985f0d;
}
.btn-warning:hover {
color: #fff;
background-color: #ec971f;
border-color: #d58512;
}
.btn-warning.active, .btn-warning:active, .open > .dropdown-toggle.btn-warning {
color: #fff;
background-color: #ec971f;
border-color: #d58512;
}
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .dropdown-toggle.btn-warning.focus, .open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning:hover {
color: #fff;
background-color: #d58512;
border-color: #985f0d;
}
.btn-warning.active, .btn-warning:active, .open > .dropdown-toggle.btn-warning {
background-image: none;
}
.btn-warning.disabled.focus, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled].focus, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover {
background-color: #f0ad4e;
border-color: #eea236;
}
.btn-warning .badge {
color: #f0ad4e;
background-color: #fff;
}
.btn-success {
color: #fff;
background-color: #00A600;
border-color: #4cae4c;
}
.btn-success.focus, .btn-success:focus {
color: #fff;
background-color: #008F00;
border-color: #255625;
}
.btn-success:hover {
color: #fff;
background-color: #008F00;
border-color: #398439;
}
.btn-success.active, .btn-success:active, .open > .dropdown-toggle.btn-success {
color: #fff;
background-color: #007500;
border-color: #398439;
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover {
color: #fff;
background-color: #007500;
border-color: #255625;
}
.btn-success.active, .btn-success:active, .open > .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
background-color: #007500;
border-color: #4cae4c;
}
.btn-success .badge {
color: #5cb85c;
background-color: #fff;
}
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info.focus, .btn-info:focus {
color: #fff;
background-color: #31b0d5;
border-color: #1b6d85;
}
.btn-info:hover {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
.btn-info.active, .btn-info:active, .open > .dropdown-toggle.btn-info {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .dropdown-toggle.btn-info.focus, .open > .dropdown-toggle.btn-info:focus, .open > .dropdown-toggle.btn-info:hover {
color: #fff;
background-color: #269abc;
border-color: #1b6d85;
}
.btn-info.active, .btn-info:active, .open > .dropdown-toggle.btn-info {
background-image: none;
}
.btn-info.disabled.focus, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info[disabled].focus, .btn-info[disabled]:focus, .btn-info[disabled]:hover, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:hover {
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info .badge {
color: #5bc0de;
background-color: #fff;
}
/* -------------------------
5) Tablas / DataTables
------------------------- */
.table,
table.dataTable {
border-radius: var(--m-radius-lg);
overflow: hidden;
}
/* Encabezado: mejor separación y tipografía, sin cambiar colores del tema */
.table thead > tr > th,
table.dataTable thead th {
border-bottom: 1px solid var(--m-border);
font-weight: 700;
}
/* Filas: bordes suaves */
.table tbody > tr > td,
table.dataTable tbody td {
border-top: 1px solid rgba(15, 23, 42, .08);
}
/* Hover: solo leve realce */
.table-hover > tbody > tr:hover > td,
table.dataTable tbody tr:hover {
filter: brightness(0.99);
}
/* DataTables: inputs/selector redondos */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
border-radius: var(--m-radius-sm);
border-color: var(--m-border-2);
padding: 6px 10px;
transition: box-shadow .15s ease, border-color .15s ease;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
box-shadow: var(--m-focus);
}
/* DataTables: paginación más moderna (sin tocar colores “current”) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: var(--m-radius-sm);
border: 1px solid var(--m-border-2);
margin: 0 2px;
}
/* -------------------------
6) Modales / Dropdowns (sin cambiar paleta)
------------------------- */
.modal-content,
.dropdown-menu {
border-radius: var(--m-radius-lg);
border: 1px solid var(--m-border);
box-shadow: var(--m-shadow);
}
.dropdown-menu > li > a {
border-radius: var(--m-radius-sm);
}
/* -------------------------
7) Scrollbar (solo donde aplique)
------------------------- */
* {
scrollbar-width: thin;
scrollbar-color: rgba(17,24,39,.25) transparent;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-thumb {
background: rgba(17,24,39,.25);
border-radius: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
/* -------------------------
8) Sidebar/Topbar: NO colores
Solo micro-detalles (borde/sombra) para “premium”
------------------------- */
/* Sidebar (Metronic old) */
.m-aside-left,
.m-aside-menu {
box-shadow: 10px 0 24px rgba(16,24,40,.06);
}
/* Topbar/Header */
.m-header,
.m-brand,
.navbar,
.navbar-fixed-top {
box-shadow: 0 6px 18px rgba(16,24,40,.06);
}
/* Menú activo: NO color, solo radios (si el tema ya pinta el active) */
.m-menu__item--active > .m-menu__link,
.m-menu__item--open > .m-menu__link {
border-radius: var(--m-radius-sm);
}
/* -------------------------
9) Compatibilidad: Bootstrap 3 paneles (por si tu app los usa)
------------------------- */
.panel {
border: 1px solid var(--m-border);
box-shadow: var(--m-shadow-sm);
}
.panel-heading {
padding: 14px 16px;
}
.panel-body {
padding: 16px;
}
/* FIN */
/* =========================================================
DATATABLES PAGINATION - Estilo Metronic moderno (como tu 2da imagen)
HTML: ul.pagination > li.paginate_button > a
========================================================= */
/* Quitar líneas / bordes extra */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
table.dataTable.no-footer {
border-bottom: 0 !important;
}
/* Alinear a la derecha */
.dataTables_wrapper .dataTables_paginate {
width: 100% !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
float: none !important;
margin-top: 10px !important;
}
/* Contenedor UL SIN “burbuja” */
.dataTables_wrapper .dataTables_paginate ul.pagination {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Reset LI */
.dataTables_wrapper .dataTables_paginate ul.pagination > li {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* Botón rectangular compacto (como Metronic) */
.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 34px !important;
min-width: 34px !important;
padding: 0 10px !important;
border-radius: 6px !important; /* <- rectangular suave */
border: 1px solid rgba(15,23,42,.14) !important;
background: #fff !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: 0 1px 2px rgba(16,24,40,.06) !important; /* sombra mínima */
transition: background-color .15s ease, border-color .15s ease, transform .12s ease !important;
}
/* Hover limpio */
.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button > a:hover {
background: rgba(17,24,39,.03) !important;
transform: translateY(-1px) !important;
}
/* Activo: azul sólido (como tu 2da imagen) */
.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.active > a {
background: #2f80ed !important; /* si querés lo ajustamos al azul exacto */
border-color: #2f80ed !important;
color: #fff !important;
box-shadow: 0 6px 14px rgba(47,128,237,.18) !important;
transform: none !important;
}
/* Disabled (Anterior/Siguiente cuando no aplica) */
.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.disabled > a {
opacity: .45 !important;
cursor: not-allowed !important;
box-shadow: none !important;
transform: none !important;
}
/* Focus accesible */
.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button > a:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(47,128,237,.18) !important;
}
/* =========================================================
METRONIC MODERNO - Controles redondeados (sin cambiar paleta)
Pegar AL FINAL del custom css
========================================================= */
:root {
--ui-radius-xl: 12px; /* cards, paneles */
--ui-radius-lg: 10px; /* alerts, modales */
--ui-radius-md: 8px; /* inputs, selects */
--ui-radius-sm: 6px; /* botones pequeños */
--ui-border: rgba(15,23,42,.12);
--ui-border-2: rgba(15,23,42,.16);
--ui-shadow-sm: 0 6px 16px rgba(16,24,40,.08);
--ui-shadow: 0 14px 30px rgba(16,24,40,.10);
/* focus ring neutro (se ve pro sin forzar colores) */
--ui-focus: 0 0 0 4px rgba(47,128,237,.16);
}
/* ---------- Cards / Paneles / Portlets ---------- */
.m-portlet,
.card,
.panel,
.portlet,
.widget,
.box,
.well,
.thumbnail {
border-radius: var(--ui-radius-xl) !important;
border: 1px solid var(--ui-border) !important;
box-shadow: var(--ui-shadow-sm) !important;
overflow: hidden;
background-clip: padding-box;
}
.m-portlet__head,
.card-header,
.panel-heading {
border-bottom: 1px solid rgba(15,23,42,.08) !important;
padding: 16px 18px !important;
}
.m-portlet__body,
.card-body,
.panel-body {
padding: 18px !important;
}
/* Hover suave (opcional, se siente premium) */
.m-portlet:hover,
.card:hover,
.panel:hover {
box-shadow: var(--ui-shadow) !important;
transform: translateY(-1px);
transition: box-shadow .15s ease, transform .15s ease;
}
/* ---------- Inputs / Selects / Textareas ---------- */
.form-control,
.m-input,
select.form-control,
textarea.form-control,
.select2-container--default .select2-selection--single {
border-radius: var(--ui-radius-md) !important;
border: 1px solid var(--ui-border-2) !important;
box-shadow: none !important;
transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
/* Altura y padding más modernos (sin romper layout) */
.form-control,
.m-input,
select.form-control {
min-height: 40px;
padding: 10px 12px !important;
}
textarea.form-control {
padding: 12px !important;
}
/* Focus pro */
.form-control:focus,
.m-input:focus,
select.form-control:focus,
textarea.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
outline: none !important;
box-shadow: var(--ui-focus) !important;
border-color: rgba(47,128,237,.45) !important;
}
/* Readonly / Disabled elegante */
.form-control[readonly],
.m-input[readonly],
.form-control:disabled,
.m-input:disabled {
background-color: rgba(17,24,39,.04) !important;
color: rgba(17,24,39,.55) !important;
border-color: rgba(17,24,39,.14) !important;
opacity: 1 !important;
cursor: not-allowed;
}
/* Placeholders suaves */
.form-control::placeholder,
.m-input::placeholder {
opacity: .7;
}
/* ---------- Botones ---------- */
.btn,
.m-btn {
border-radius: var(--ui-radius-md) !important;
font-weight: 600;
padding: 9px 14px !important;
transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover,
.m-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 22px rgba(16,24,40,.10);
}
.btn:active,
.m-btn:active {
transform: translateY(0);
box-shadow: none;
}
/* Botones tipo “chip” (por si usas btn-sm) */
.btn.btn-sm,
.m-btn.m-btn--sm {
border-radius: var(--ui-radius-sm) !important;
padding: 7px 12px !important;
}
/* ---------- Alerts / cajas informativas ---------- */
.alert,
.m-alert {
border-radius: var(--ui-radius-lg) !important;
border: 1px solid rgba(15,23,42,.10) !important;
box-shadow: 0 8px 18px rgba(16,24,40,.08) !important;
}
/* ---------- Tablas (solo bordes suaves, sin cambiar colores) ---------- */
.table,
table.dataTable {
border-radius: var(--ui-radius-xl);
overflow: hidden;
}
.table thead th,
table.dataTable thead th {
border-bottom: 1px solid rgba(15,23,42,.10) !important;
font-weight: 700;
}
/* Filas: separadores suaves */
.table tbody td,
table.dataTable tbody td {
border-top: 1px solid rgba(15,23,42,.06) !important;
}
/* ===== Compatibilidad Falcon (BS5) -> Metronic (BS3) ===== */
.form-select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background: #fff;
border: 1px solid #ccc;
border-radius: 12px;
}
.mb-2 {
margin-bottom: 10px !important;
}
.me-2 {
margin-right: 10px !important;
}
.col-12 {
width: 100%;
float: left;
}
/* ===== Choices.js estilo “nítido” redondeado ===== */
.choices {
margin-bottom: 0 !important;
}
.choices__inner {
border-radius: 12px !important;
border: 1px solid rgba(15,23,42,.16) !important;
background: #fff !important;
min-height: 40px !important;
padding: 6px 10px !important;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
box-shadow: 0 0 0 4px rgba(47,128,237,.16) !important;
border-color: rgba(47,128,237,.45) !important;
}
/* tags */
.choices__list--multiple .choices__item {
border-radius: 10px !important;
padding: 4px 10px !important;
border: 1px solid rgba(47,128,237,.25) !important;
background: rgba(47,128,237,.12) !important;
color: rgba(15,23,42,.85) !important;
}
/* botón x */
.choices__list--multiple .choices__item .choices__button {
border-left: 1px solid rgba(47,128,237,.18) !important;
opacity: .85;
filter: brightness(0); /* Esto fuerza a que cualquier color de icono sea negro */
}
.choices__list--multiple .choices__item .choices__button:hover {
opacity: 1;
}
/* dropdown */
.choices__list--dropdown {
border-radius: 14px !important;
border: 1px solid rgba(15,23,42,.12) !important;
box-shadow: 0 14px 30px rgba(16,24,40,.10) !important;
overflow: hidden;
}
.choices__list--dropdown .choices__item--selectable {
padding: 10px 12px !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
background: rgba(17,24,39,.04) !important;
}
/* =========================================================
METRONIC 1.3.2 - SIDEBAR / MENU moderno (sin cambiar paleta)
========================================================= */
/* Sidebar: separador suave y “profundidad” */
.page-sidebar {
box-shadow: 10px 0 24px rgba(16,24,40,.06);
}
/* Menu: más aire y clicks más cómodos */
.page-sidebar .page-sidebar-menu > li > a {
border-radius: 10px;
margin: 4px 10px;
padding: 10px 12px !important;
transition: background-color .15s ease, transform .12s ease;
}
/* Hover: no cambiamos color, solo realce sutil */
.page-sidebar .page-sidebar-menu > li > a:hover {
transform: translateX(2px);
filter: brightness(1.02);
}
/* Texto del menú un poco más “clean” */
.page-sidebar .page-sidebar-menu > li > a .title {
font-weight: 600;
letter-spacing: .1px;
}
/* Iconos: centrados y con mejor proporción */
.page-sidebar .page-sidebar-menu > li > a > i {
margin-right: 10px;
font-size: 16px;
opacity: .9;
}
/* Submenú: indent y tarjetas sutiles */
.page-sidebar .page-sidebar-menu .sub-menu {
margin: 6px 10px 10px 18px;
padding: 6px;
border-radius: 12px;
border: 1px solid rgba(15,23,42,.08);
background: rgba(255,255,255,.03);
}
/* Items del submenú */
.page-sidebar .page-sidebar-menu .sub-menu > li > a {
border-radius: 10px;
padding: 9px 12px !important;
margin: 3px 4px;
transition: background-color .15s ease, transform .12s ease;
}
.page-sidebar .page-sidebar-menu .sub-menu > li > a:hover {
transform: translateX(2px);
filter: brightness(1.02);
}
/* Activo: NO forzamos color, solo “forma” más moderna */
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
border-radius: 10px;
box-shadow: 0 8px 18px rgba(16,24,40,.10);
}
/* Flecha del submenú: más discreta */
.page-sidebar .page-sidebar-menu > li > a .arrow:before,
.page-sidebar .page-sidebar-menu > li > a .arrow.open:before {
opacity: .65;
}
/* Separadores (si usas headings) */
.page-sidebar .page-sidebar-menu > li.heading {
margin: 14px 12px 6px 12px;
opacity: .8;
}
/* Sidebar “compact”: evita que se rompan textos largos */
.page-sidebar .page-sidebar-menu > li > a .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =========================================================
METRONIC 1.3.2 - TOPBAR moderno (sin cambiar paleta)
========================================================= */
.page-header.navbar {
box-shadow: 0 6px 18px rgba(16,24,40,.06);
}
/* Botones/links del topbar más “clickables” */
.page-header.navbar .top-menu .navbar-nav > li.dropdown > a {
border-radius: 10px;
transition: background-color .15s ease;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown > a:hover {
filter: brightness(1.02);
}
/* ===== DASHBOARD STAT V2 - Moderno sin cambiar paleta ===== */
.dashboard-stat.dashboard-stat-v2 {
border-radius: var(--ui-radius-xl, 18px);
overflow: hidden;
box-shadow: var(--ui-shadow-sm, 0 6px 16px rgba(16,24,40,.08));
border: 1px solid var(--ui-border, rgba(15,23,42,.12));
min-height: 120px;
position: relative;
}
.dashboard-stat.dashboard-stat-v2 .visual {
display: flex;
align-items: center;
justify-content: center;
width: 92px;
height: 100%;
opacity: .22; /* mantiene el estilo “watermark” */
}
.dashboard-stat.dashboard-stat-v2 .visual i {
font-size: 42px;
line-height: 1;
}
.dashboard-stat.dashboard-stat-v2 .details {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 120px;
padding: 18px 18px 18px 0;
}
.dashboard-stat.dashboard-stat-v2 .details .number {
font-size: 40px;
font-weight: 800;
letter-spacing: .2px;
margin-bottom: 6px;
}
.dashboard-stat.dashboard-stat-v2 .details .desc {
font-weight: 700;
opacity: .95;
line-height: 1.2;
}
.dashboard-stat.dashboard-stat-v2 .details .desc small {
display: inline-block;
margin-top: 6px;
font-weight: 600;
opacity: .9;
}
/* hover/focus “pro” */
.dashboard-stat.dashboard-stat-v2:hover {
transform: translateY(-1px);
box-shadow: var(--ui-shadow, 0 14px 30px rgba(16,24,40,.10));
transition: transform .15s ease, box-shadow .15s ease;
}
/* Si el stat es clicable (si lo envuelves con ) */
.dashboard-stat-link {
display: block;
color: inherit;
text-decoration: none;
}
.dashboard-stat-link:focus {
outline: none;
box-shadow: var(--ui-focus, 0 0 0 4px rgba(47,128,237,.16));
border-radius: var(--ui-radius-xl, 18px);
}
/* Responsive: reduce el número en pantallas pequeñas */
@media (max-width: 768px) {
.dashboard-stat.dashboard-stat-v2 .details .number {
font-size: 34px;
}
.dashboard-stat.dashboard-stat-v2 .visual {
width: 80px;
}
}
/* ===== TILES - Moderno, consistente y accesible ===== */
.tiles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
/* responsive */
@media (max-width: 992px) {
.tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.tiles {
grid-template-columns: 1fr;
}
}
/* Link que envuelve el tile */
.tiles > a {
display: block;
text-decoration: none;
color: inherit;
}
.tiles .tile {
border-radius: var(--ui-radius-xl, 18px);
overflow: hidden;
min-height: 120px;
border: 1px solid rgba(255,255,255,.22); /* sutil sobre fondos de color */
box-shadow: var(--ui-shadow-sm, 0 6px 16px rgba(16,24,40,.08));
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tiles .tile .tile-body {
display: flex;
align-items: center;
justify-content: center;
padding: 18px 10px 6px 10px;
}
.tiles .tile .tile-body i {
font-size: 44px;
opacity: .95;
}
.tiles .tile .tile-object {
padding: 10px 12px 14px 12px;
}
.tiles .tile .tile-object .name {
font-weight: 800;
letter-spacing: .2px;
}
/* hover/focus */
.tiles > a:hover .tile {
transform: translateY(-2px);
box-shadow: var(--ui-shadow, 0 14px 30px rgba(16,24,40,.10));
filter: brightness(1.03);
}
.tiles > a:focus {
outline: none;
}
.tiles > a:focus .tile {
box-shadow: var(--ui-shadow, 0 14px 30px rgba(16,24,40,.10)), var(--ui-focus, 0 0 0 4px rgba(47,128,237,.16));
}
/* ===== FIX: STATS NO CORTADOS ===== */
.dashboard-stat.dashboard-stat-v2 {
height: auto !important;
min-height: 130px; /* ajusta si quieres más alto */
overflow: visible !important;
display: flex;
align-items: stretch;
}
/* En metronic v2 a veces .details es absolute; lo volvemos normal */
.dashboard-stat.dashboard-stat-v2 .details {
position: relative !important;
height: auto !important;
flex: 1;
padding: 16px 18px 14px 0; /* espacio abajo para que NO corte */
display: flex;
flex-direction: column;
justify-content: center;
}
/* Visual a la izquierda con alto completo */
.dashboard-stat.dashboard-stat-v2 .visual {
position: relative !important;
width: 90px;
min-height: 130px;
display: flex;
align-items: center;
justify-content: center;
}
/* Evita que el número “choque” con el contenido */
.dashboard-stat.dashboard-stat-v2 .number {
line-height: 1.05;
margin-bottom: 6px;
}
/* Si tu 2da/3ra línea es pequeña, que no quede pegada al borde */
.dashboard-stat.dashboard-stat-v2 .desc small {
display: inline-block;
margin-top: 6px;
}
/* ===== FIX: TILES ORDENADOS EN GRILLA ===== */
.tiles {
display: flex;
flex-wrap: wrap;
gap: 18px; /* espacio entre tiles */
justify-content: center; /* centra en la fila */
align-items: stretch;
}
/* Los tiles de metronic suelen usar float; lo anulamos */
.tiles .tile {
float: none !important;
margin: 0 !important; /* el gap ya controla el espacio */
width: 160px; /* tamaño uniforme */
height: 140px; /* alto uniforme */
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Asegura que el sea “block” y clicable completo */
.tiles > a {
display: block;
text-decoration: none;
}
/* Centrado del ícono */
.tiles .tile .tile-body {
display: flex;
align-items: center;
justify-content: center;
padding-top: 18px;
}
/* Texto inferior */
.tiles .tile .tile-object {
padding: 10px 12px 14px 12px;
text-align: center;
}
/* Responsive */
@media (max-width: 768px) {
.tiles {
justify-content: center;
}
.tiles .tile {
width: 48vw; /* 2 por fila */
max-width: 220px;
}
}
@media (max-width: 420px) {
.tiles .tile {
width: 100%; /* 1 por fila */
max-width: none;
}
}
/* ===== RESTAURAR ICONO DE FONDO (WATERMARK) SIN RECORTE ===== */
.dashboard-stat.dashboard-stat-v2 {
position: relative; /* necesario para el absolute del watermark */
overflow: hidden !important; /* recorta SOLO el watermark, no el contenido */
}
.dashboard-stat.dashboard-stat-v2 .visual {
position: absolute !important;
top: 50%;
left: 14px;
transform: translateY(-50%);
width: 92px;
height: 92px;
display: flex;
align-items: center;
justify-content: center;
opacity: .95 !important; /* nivel típico de watermark */
pointer-events: none; /* no estorba clicks */
}
.dashboard-stat.dashboard-stat-v2 .visual i {
font-size: 150px !important; /* prueba 64 / 72 / 80 */
text-shadow: 0 2px 6px rgba(0,0,0,.12);
line-height: 1;
}
/* Garantiza que el texto quede encima del watermark */
.dashboard-stat.dashboard-stat-v2 .details {
position: relative !important;
z-index: 1;
padding-left: 110px; /* deja espacio para el watermark */
}
/* En pantallas pequeñas, reduce el watermark para que no quite espacio */
@media (max-width: 768px) {
.dashboard-stat.dashboard-stat-v2 .visual {
width: 72px;
height: 72px;
left: 10px;
opacity: .16;
}
.dashboard-stat.dashboard-stat-v2 .visual i {
font-size: 54px;
}
.dashboard-stat.dashboard-stat-v2 .details {
padding-left: 92px;
}
}
/* ===== PNOTIFY 2026 - Toast limpio ===== */
.ui-pnotify {
position: fixed !important;
z-index: 9999 !important;
}
.ui-pnotify .ui-pnotify-container {
border-radius: 14px !important;
padding: 14px 14px 14px 16px !important;
border: 1px solid rgba(15, 23, 42, .10) !important;
box-shadow: 0 12px 28px rgba(16,24,40,.14) !important;
position: relative !important;
overflow: hidden;
min-width: 320px;
max-width: 420px;
}
/* Tipografía */
.ui-pnotify .ui-pnotify-title {
font-weight: 800 !important;
font-size: 18px !important;
margin-bottom: 10px !important;
letter-spacing: .2px;
}
.ui-pnotify .ui-pnotify-text {
font-size: 15px !important;
line-height: 1.35 !important;
text-shadow: none !important;
opacity: .95;
}
.ui-pnotify .ui-pnotify-icon {
margin-right: 10px !important;
opacity: .95;
}
.ui-pnotify .ui-pnotify-closer,
.ui-pnotify .ui-pnotify-sticker {
opacity: .7;
transition: opacity .15s ease, transform .15s ease;
}
.ui-pnotify .ui-pnotify-closer:hover,
.ui-pnotify .ui-pnotify-sticker:hover {
opacity: 1;
transform: translateY(-1px);
}
/* Quitar “rayado” viejo en error (brighttheme) */
.brighttheme-error {
background-image: none !important;
}
/* ===== COLORES SUAVES (2026) ===== */
.brighttheme-notice {
background-color: rgba(255, 248, 215, .96) !important; /* ámbar suave */
color: #3b2f00 !important;
border-color: rgba(245, 158, 11, .25) !important;
}
.brighttheme-info {
background-color: rgba(224, 242, 254, .96) !important;
color: #0b2a33 !important;
border-color: rgba(2, 132, 199, .22) !important;
}
.brighttheme-success {
background-color: rgba(220, 252, 231, .96) !important;
color: #0f2f12 !important;
border-color: rgba(34, 197, 94, .22) !important;
}
.brighttheme-error {
background-color: rgba(254, 226, 226, .96) !important;
color: #3b0c0a !important;
border-color: rgba(239, 68, 68, .22) !important;
}
/* ===== Barra lateral por tipo ===== */
.ui-pnotify .ui-pnotify-container {
position: relative;
}
.brighttheme-notice.ui-pnotify-container:before,
.brighttheme-info.ui-pnotify-container:before,
.brighttheme-success.ui-pnotify-container:before,
.brighttheme-error.ui-pnotify-container:before {
content: "";
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
width: 5px;
opacity: .9;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.brighttheme-notice.ui-pnotify-container:before {
background: rgba(245, 158, 11, .9);
}
.brighttheme-info.ui-pnotify-container:before {
background: rgba(2, 132, 199, .9);
}
.brighttheme-success.ui-pnotify-container:before {
background: rgba(34, 197, 94, .9);
}
.brighttheme-error.ui-pnotify-container:before {
background: rgba(239, 68, 68, .9);
}
/* deja espacio para la barra */
.ui-pnotify .ui-pnotify-container {
padding-left: 16px !important;
}
/* =========================================================
OVERRIDE FUERTE - REDONDEO INTERMEDIO (PX DIRECTO)
Pegar AL FINAL del Custom.css
========================================================= */
/* Cards / paneles / portlets / contenedores */
body .m-portlet,
body .card,
body .panel,
body .portlet,
body .widget,
body .box,
body .well,
body .thumbnail,
body .dashboard-stat.dashboard-stat-v2,
body .tiles .tile,
body .modal-content,
body .dropdown-menu {
border-radius: 10px !important; /* <- intermedio */
}
/* Inputs / selects / textareas + select2/choices */
body .form-control,
body .m-input,
body select.form-control,
body textarea.form-control,
body .form-select,
body .select2-container--default .select2-selection--single,
body .choices__inner {
border-radius: 8px !important; /* <- intermedio */
}
/* Botones */
body .btn,
body .m-btn {
border-radius: 8px !important;
}
body .btn.btn-sm,
body .m-btn.m-btn--sm {
border-radius: 6px !important;
}
/* Tablas */
body .table,
body table.dataTable {
border-radius: 10px !important;
overflow: hidden;
}
/* Paginación DataTables */
body .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button > a {
border-radius: 6px !important;
}
/* Badges / Labels (Bootstrap/Metronic) */
body .badge,
body .label,
body .m-badge,
body .m-badge--wide,
body .m-badge--rounded {
border-radius: 6px !important; /* intermedio */
}
/* Opcional: chips/tags (si usas Select2/Choices) */
body .select2-selection__choice,
body .choices__list--multiple .choices__item {
border-radius: 6px !important;
}