/* Estilos propios sobre Metronic. Mantener chico: lo que es de Metronic se
   configura en style.bundle.css, no se pisa acá. */

/* Importes en tablas: monoespaciada para que alineen las cifras */
.table-amounts td,
.table-amounts-td {
    font-family: 'Chivo Mono', monospace;
    color: black !important;
    font-weight: 300;
}

/* Día de hoy en flatpickr */
.flatpickr-day.today {
    background-color: #d1d3d4;
    color: black;
}

/* Control con foco (app.js agrega .focused) */
.focused {
    outline: 2px solid #007BFF !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5) !important;
}
.select2-container.select2-container--bootstrap5.select2-container--focus .select2-selection,
.select2-container.select2-container--bootstrap5.select2-container--open .select2-selection {
    outline: 2px solid #007BFF !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5) !important;
}

/* ---------------------------------------------------------------------
   Colores de ODONTOCOS: header oscuro (#29324b) y aside claro (#fafafa).
   El aside usa la variante aside-light de Metronic (texto oscuro); acá
   sólo se cambia el fondo. El header de Metronic es blanco: se pinta y se
   pasan a claro el logo mobile, el toggle y los íconos.
   --------------------------------------------------------------------- */
.aside.aside-light {
    background-color: #fafafa;
}
.aside.aside-light .aside-logo {
    background-color: #29324b;   /* mismo color que el header */
}
.aside.aside-light .aside-toggle svg [fill]:not(.permanent):not(g) {
    fill: #ffffff;
}
.aside.aside-light .menu .menu-item .menu-section {
    color: #a1a5b7 !important;
}

#kt_header {
    background-color: #29324b;
}
#kt_header .btn-icon svg [fill]:not(.permanent):not(g) {
    fill: #ffffff;
}
#kt_header .btn-icon.btn-active-light-primary:hover,
#kt_header .btn-icon.btn-active-light-primary:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
#kt_header .header-menu .menu .menu-item .menu-link .menu-title {
    color: #ffffff;
}
#kt_header .header-menu .menu .menu-item .menu-link:hover,
#kt_header .header-menu .menu .menu-item.here > .menu-link {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ---------------------------------------------------------------------
   Color primario de ODONTOCOS: el verde agua del sistema actual
   (ant-btn-primary #00b2b2, hover #1fbfba, oscuro #00888c, claro #daf2ee).
   Metronic trae el violeta #724091 hardcodeado; se pisan los usos comunes.
   --------------------------------------------------------------------- */
:root {
    --bs-primary: #00b2b2;
    --bs-primary-rgb: 0, 178, 178;
}
.btn.btn-primary {
    border-color: #00b2b2;
    background-color: #00b2b2;
}
.btn-check:checked + .btn.btn-primary, .btn-check:active + .btn.btn-primary,
.btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:active:not(.btn-active), .btn.btn-primary.active, .btn.btn-primary.show, .show > .btn.btn-primary {
    border-color: #1fbfba;
    background-color: #1fbfba !important;
}
.btn.btn-light-primary {
    color: #00888c;
    border-color: #daf2ee;
    background-color: #daf2ee;
}
.btn-check:checked + .btn.btn-light-primary, .btn-check:active + .btn.btn-light-primary,
.btn.btn-light-primary:focus:not(.btn-active), .btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light-primary:active:not(.btn-active), .btn.btn-light-primary.active, .btn.btn-light-primary.show, .show > .btn.btn-light-primary {
    color: #ffffff;
    border-color: #00b2b2;
    background-color: #00b2b2 !important;
}
.btn.btn-active-light-primary:hover:not(.btn-active), .btn.btn-active-light-primary:focus:not(.btn-active),
.btn.btn-active-light-primary.active, .btn.btn-active-color-primary:hover:not(.btn-active) {
    color: #00888c;
}
.btn.btn-active-light-primary:hover:not(.btn-active), .btn.btn-active-light-primary:focus:not(.btn-active), .btn.btn-active-light-primary.active {
    background-color: #daf2ee !important;
}
.btn.btn-active-light-primary:hover:not(.btn-active) i, .btn.btn-active-color-primary:hover:not(.btn-active) i {
    color: #00888c;
}
.text-primary, .link-primary, .text-hover-primary:hover {
    color: #00b2b2 !important;
}
.form-check-input:checked {
    background-color: #00b2b2;
    border-color: #00b2b2;
}
.form-control:focus, .form-select:focus {
    border-color: #1fbfba;
}
.page-item.active .page-link {
    background-color: #00b2b2;
}
.page-item:hover:not(.offset) .page-link, .page-item.active .page-link {
    color: #ffffff;
    background-color: #00b2b2;
}
.badge-light-primary {
    color: #00888c;
    background-color: #daf2ee;
}
.menu-state-title-primary .menu-item.hover > .menu-link:not(.disabled):not(.active),
.menu-state-title-primary .menu-item .menu-link:hover:not(.disabled):not(.active),
.menu-state-title-primary .menu-item.hover > .menu-link:not(.disabled):not(.active) .menu-title,
.menu-state-title-primary .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title,
.menu-state-title-primary .menu-item.here > .menu-link .menu-title,
.menu-state-title-primary .menu-item .menu-link.active .menu-title,
.menu-state-title-primary .menu-item.show > .menu-link .menu-title {
    color: #00b2b2;
}
.menu-state-bullet-primary .menu-item .menu-link.active .menu-bullet .bullet,
.menu-state-bullet-primary .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-bullet .bullet {
    background-color: #00b2b2;
}
.menu-state-icon-primary .menu-item .menu-link.active .menu-icon .svg-icon svg [fill]:not(.permanent):not(g),
.menu-state-icon-primary .menu-item.here > .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g),
.menu-state-icon-primary .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #00b2b2;
}
.menu-state-bg .menu-item .menu-link.active, .menu-active-bg .menu-item .menu-link.active {
    background-color: #daf2ee;
    color: #00888c;
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__option--highlighted {
    background-color: #daf2ee;
    color: #00888c;
}
.swal2-confirm.btn-primary, .swal2-styled.swal2-confirm {
    background-color: #00b2b2 !important;
}
.focused {
    outline-color: #00b2b2 !important;
    box-shadow: 0 0 5px rgba(0, 178, 178, 0.5) !important;
}

/* Grilla server-side mientras carga (crud-table.js agrega .crud-loading) */
table.crud-loading tbody {
    opacity: 0.35;
    transition: opacity 0.15s ease;
}

/* Texto siempre negro: Metronic pinta celdas, inputs e info en gris (#7E8299 / #5E6278) */
.text-gray-600, .text-gray-700,
.table tbody, .table tbody td,
.form-control, .form-select, .form-control.form-control-solid, .form-select.form-select-solid,
.dataTables_info, .form-text,
.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    color: #000000 !important;
}

/* Links del contenido en el verde agua (no botones, ni menú, ni paginación) */
#kt_content a:not(.btn):not(.menu-link):not(.page-link):not(.nav-link),
#kt_content a.text-gray-800:not(.btn) {
    color: #00b2b2 !important;
}
#kt_content a:not(.btn):not(.menu-link):not(.page-link):not(.nav-link):hover {
    color: #00888c !important;
}

/* Fuente: Roboto (la del ODONTOCOS actual) en lugar de Poppins */
body, .btn, .form-control, .form-select, .table, .menu-title, .menu-section, h1, h2, h3, h4, h5, h6, .swal2-popup {
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Menú lateral: ítems en mayúsculas */
.aside-menu .menu .menu-item .menu-link .menu-title {
    text-transform: uppercase;
}

/* Ítem activo del menú lateral (Metronic sólo lo pinta en aside-dark) */
.aside-light .menu .menu-item .menu-link.active,
.aside-light .menu .menu-item.here > .menu-link {
    background-color: #00b2b2;
    border-radius: 0;
}
.aside-light .menu .menu-item .menu-link.active .menu-title,
.aside-light .menu .menu-item.here > .menu-link .menu-title {
    color: #ffffff;
}
.aside-light .menu .menu-item .menu-link.active .menu-icon .svg-icon svg [fill]:not(.permanent):not(g),
.aside-light .menu .menu-item.here > .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #ffffff;
}
.aside-light .menu .menu-item .menu-link.active .menu-bullet .bullet {
    background-color: #ffffff;
}

/* Logo + texto "OdontoCos" (aside y header en fondo oscuro; login en fondo claro) */
.logo-texto {
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: #ffffff;
    letter-spacing: 0.02em;
}
.logo-texto-sm {
    font-size: 1.05rem;
}
.logo-texto-lg {
    font-size: 2.2rem;
    color: #29324b;
}
[data-kt-aside-minimize="on"] .aside-logo .logo-texto {
    display: none;
}