/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 5.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ============================================================
   Deshabilitar clic en flechitas (spinners) de inputs numéricos
   Las flechas siguen visibles pero no son funcionales
   ============================================================ */

/* Chrome, Safari, Edge, Opera: visibles pero sin interacción */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    pointer-events: none;
}
/* Firefox: manejado vía JavaScript */

/* ============================================================
   Paleta SoftTrust: azul marino del dashboard + complementario
   El marino #01476b (tono ~200°) se complementa con un cobre
   (tono ~20°). El cobre sustituye al verde como color de acción;
   el rojo se conserva para acciones destructivas y green-text
   para indicadores de "autorizado/correcto".
   Todos los fondos cumplen contraste AA con texto blanco.
   ============================================================ */
:root {
    --st-primario: #01476b;
    --st-primario-oscuro: #05386d;
    --st-primario-profundo: #022c45;
    --st-primario-medio: #2a6f97;
    --st-primario-medio-claro: #34799f;
    --st-primario-tenue: #e6eff5;
    --st-complementario: #c2571a;
    --st-complementario-oscuro: #9e4513;
    --st-complementario-tenue: #f8e6da;
    --st-neutro: #5f6b76;
    --st-neutro-oscuro: #4a545d;
}

/* Barra superior y pie */
.bgColor,
.page-footer {
    background-color: var(--st-primario) !important;
}

.navbar-main .btn.blue {
    background-color: var(--st-complementario) !important;
}

/* Menú lateral */
#slide-out.green,
.sidenav-main .sidenav {
    background-color: var(--st-primario-profundo) !important;
}

.sidenav li > a.active,
.sidenav li.active > a,
.sidenav li > a:hover {
    background: var(--st-complementario) !important;
    color: #fff !important;
}

/* Mosaicos del dashboard y de los índices de categorías */
.green.lighten-2 {
    background-color: var(--st-complementario) !important;
    transition: background-color .2s ease;
}

a:hover > .green.lighten-2,
.card.green.lighten-2:hover {
    background-color: var(--st-complementario-oscuro) !important;
}

.green.lighten-2 .background-round {
    background-color: rgba(255, 255, 255, .2);
}

/* Botones: acción principal (antes verde) */
.btn.green,
.btn.green.lighten-1,
.btn.green.darken-1,
.btn-floating.green {
    background-color: var(--st-complementario) !important;
}

.btn.green:hover,
.btn.green:focus,
.btn-floating.green:hover {
    background-color: var(--st-complementario-oscuro) !important;
}

/* Botones: acción secundaria (antes azul) */
.btn.blue,
.btn.blue.darken-1,
.btn-floating.blue {
    background-color: var(--st-primario-medio) !important;
}

.btn.blue.lighten-1 {
    background-color: var(--st-primario-medio-claro) !important;
}

.btn.blue:hover,
.btn.blue:focus,
.btn-floating.blue:hover {
    background-color: var(--st-primario) !important;
}

/* Botones: cancelar (antes naranja, chocaba con el cobre) */
.btn.orange {
    background-color: var(--st-neutro) !important;
}

.btn.orange:hover,
.btn.orange:focus {
    background-color: var(--st-neutro-oscuro) !important;
}

/* Controles de formulario: reemplaza el índigo y rosa del tema */
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]),
.select-wrapper input.select-dropdown:focus {
    border-bottom-color: var(--st-primario) !important;
    box-shadow: 0 1px 0 0 var(--st-primario) !important;
}

input:focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label,
.input-field .prefix.active {
    color: var(--st-primario) !important;
}

[type=checkbox]:checked + span:not(.lever):before {
    border-right-color: var(--st-complementario);
    border-bottom-color: var(--st-complementario);
}

[type=checkbox].filled-in:checked + span:not(.lever):after {
    border-color: var(--st-complementario);
    background-color: var(--st-complementario);
}

[type=radio]:checked + span:after,
[type=radio].with-gap:checked + span:before,
[type=radio].with-gap:checked + span:after {
    border-color: var(--st-complementario);
}

[type=radio]:checked + span:after,
[type=radio].with-gap:checked + span:after {
    background-color: var(--st-complementario);
}

.switch label input[type=checkbox]:checked + .lever {
    background-color: var(--st-complementario-tenue);
}

.switch label input[type=checkbox]:checked + .lever:after {
    background-color: var(--st-complementario);
}

.dropdown-content li > a,
.dropdown-content li > span {
    color: var(--st-primario);
}

.tabs .tab a.active,
.tabs .tab a:hover {
    color: var(--st-primario);
}

.tabs .indicator {
    background-color: var(--st-complementario);
}

/* Selector de fechas */
.datepicker-date-display {
    background-color: var(--st-primario);
}

.datepicker-table td.is-selected {
    background-color: var(--st-complementario);
}

.datepicker-table td.is-today {
    color: var(--st-complementario);
}

.datepicker-cancel,
.datepicker-clear,
.datepicker-done,
.datepicker-today {
    color: var(--st-primario);
}

/* Paginación (Materialize y DataTables)
   datatables.min.css se carga después y fuerza color #333 !important,
   por eso el prefijo body sube la especificidad. */
body .pagination li.active,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:focus {
    background: var(--st-primario) !important;
    border-color: var(--st-primario) !important;
    color: #fff !important;
}

body .pagination li.active a,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current * {
    color: #fff !important;
}

/* Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--st-primario) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection {
    border-color: var(--st-primario) !important;
}

/* Barras de progreso y spinners */
.progress {
    background-color: var(--st-complementario-tenue);
}

.progress .determinate,
.progress .indeterminate {
    background-color: var(--st-complementario);
}

.spinner-layer {
    border-color: var(--st-complementario);
}

/* ============================================================
   Dashboard (Inicio/Index)
   Todas las opciones usan el diseño del mosaico de Clientes:
   marino con borde cobre.
   ============================================================ */
.st-dashboard-title {
    color: var(--st-primario);
    font-weight: 600;
}

.st-dashboard-subtitle {
    color: var(--st-neutro);
}

.st-tile {
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(1, 71, 107, .25);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

a:hover > .st-tile {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(1, 71, 107, .3);
}

.st-tile .background-round {
    background-color: rgba(255, 255, 255, .2);
}

.st-tile--primario {
    background-color: var(--st-primario);
    border-left: 6px solid var(--st-complementario);
}

a:hover > .st-tile--primario {
    background-color: var(--st-primario-oscuro);
}

.st-tile--primario ul li b {
    color: var(--st-complementario-tenue);
}


/* ============================================================
   Login (Account/Index)
   ============================================================ */
.st-login-card {
    border-top: 5px solid var(--st-complementario);
    box-shadow: 0 10px 30px rgba(2, 44, 69, .45) !important;
}

.st-login-title {
    color: var(--st-primario);
    font-weight: 600;
}

.st-login-card .input-field .prefix {
    color: var(--st-primario-medio);
}

.st-login-card .input-field .prefix.active {
    color: var(--st-complementario);
}

.st-login-card .select-wrapper .caret {
    fill: var(--st-primario);
}

.st-login-btn {
    letter-spacing: .5px;
    box-shadow: 0 4px 10px rgba(194, 87, 26, .35);
}

/* ============================================================
   Logos institucionales (SoftTrust, Expertum, FINH)
   Altura fija y ancho automático para conservar la proporción.
   ============================================================ */

/* Login: encabezado SoftTrust | Expertum */
.st-login-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0 6px;
}

.st-login-logo {
    height: 52px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.st-login-logos-sep {
    width: 1px;
    height: 40px;
    background-color: rgba(1, 71, 107, .25);
}

@media only screen and (max-width: 360px) {
    .st-login-logos-sep {
        display: none;
    }
}

/* Login: FINH al pie de la tarjeta */
.st-login-footer {
    margin-top: 8px;
    padding: 12px 0 14px;
    border-top: 1px solid rgba(1, 71, 107, .15);
    text-align: center;
}

.st-login-footer-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
}

/* Encabezado del menú lateral: SoftTrust | Expertum (mismo patrón que el login) */
.brand-sidebar .logo-wrapper.st-brand {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 18px !important;
    line-height: normal !important;
}

.st-brand-logos {
    display: flex;
    align-items: center;
    gap: 12px;
}

.st-brand-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.st-brand-sep {
    width: 1px;
    height: 32px;
    background-color: rgba(1, 71, 107, .25);
}

/* Menú colapsado (64 px) o versión móvil: solo cabe SoftTrust */
.sidenav-main:not(.nav-expanded) .st-brand-extra {
    display: none;
}

@media only screen and (max-width: 992px) {
    .st-brand-extra {
        display: none;
    }
}

/* Dashboard, variante A: FINH en bloque blanco al fondo del menú lateral.
   El ul#slide-out es fixed y con scroll, por eso el flex se aplica
   sobre él y no sobre el aside. */
#slide-out.leftside-navigation {
    display: flex;
    flex-direction: column;
}

#slide-out.leftside-navigation > li {
    flex-shrink: 0;
}

#slide-out .st-sidebar-logos {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
    margin: auto 16px 16px;
    padding: 10px 12px;
    background-color: #fff;
    border-radius: 8px;
    line-height: 0;
}

.st-sidebar-logo {
    height: 34px;
    width: auto;
    object-fit: contain;
}

/* Menú colapsado (64 px): el bloque no cabe, se oculta */
.sidenav-main:not(.nav-expanded) .st-sidebar-logos {
    display: none !important;
}

/* Dashboard, variante B: franja al pie del contenido.
   Se activa con la clase st-logos-b en el <body> (ver _Layout). */
.st-dashboard-logos {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 4px 0 24px;
    padding: 14px 24px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(1, 71, 107, .15);
}

.st-dashboard-logo {
    height: 34px;
    width: auto;
    object-fit: contain;
}

body.st-logos-b .st-dashboard-logos {
    display: flex;
}

body.st-logos-b .st-sidebar-logos {
    display: none !important;
}