/* #region ========== ESTILOS GENERAL ========== */

:root {
    scrollbar-width: thin;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

body {
    --text-color-fondo-claro: #057157;
    --text-color-fondo-oscuro: #ccc;
    --bg-color-claro: #ebebeb;
    --bg-color-oscuro: #00404b;
    font-family: "Open Sans", sans-serif;
    background: var(--bg-color-claro);
    color: var(--text-color-fondo-claro);
}

a {
    color: #4154f1;
    text-decoration: none;
}

a:hover {
    color: #03b548;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Nunito", sans-serif;
}

main {
    flex: 1;
}

.icono-personalizado {
    width: 32px;
    height: 32px;
    filter: invert(30%) sepia(90%) saturate(500%) hue-rotate(90deg);
}

.btn-outline-success:hover .icono-personalizado {
    filter: invert(100%);
}

/* #endregion */

/* #region ========== ESTILOS DEL HEADER ========== */

.logo {
    line-height: 1;
}

@media (min-width: 1200px) {
    .logo {
        width: 280px;
    }
}

.logo img {
    max-height: 45px;
    margin-left: 6px;
}

.logo span {
    font-size: 26px;
    font-weight: 700;
    color: #012970;
    font-family: "Nunito", sans-serif;
}

.header {
    transition: all 0.5s;
    z-index: 997;
    height: 60px;
    box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
    background-color: #fff;
    padding-left: 20px;
}

.header .toggle-sidebar-btn {
    font-size: 32px;
    padding-left: 10px;
    cursor: pointer;
    color: #012970;
}

.header .search-bar {
    min-width: 360px;
    padding: 0 20px;
}

@media (max-width: 1199px) {
    .header .search-bar {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        padding: 20px;
        box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
        background: white;
        z-index: 9999;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
    }

    .header .search-bar-show {
        top: 60px;
        visibility: visible;
        opacity: 1;
    }
}

.header .search-form {
    width: 100%;
}

.header .search-form input {
    border: 0;
    font-size: 14px;
    color: #012970;
    border: 1px solid rgba(1, 41, 112, 0.2);
    padding: 7px 38px 7px 8px;
    border-radius: 3px;
    transition: 0.3s;
    width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
    outline: none;
    box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
    border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
    border: 0;
    padding: 0;
    margin-left: -30px;
    background: none;
}

.header .search-form button i {
    color: #012970;
}

/* #endregion */

/* #region ========== ESTILOS DEL SIDEBAR ========== */

.sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 996;
    transition: all 0.3s;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
    background-color: #ffffff;
}

@media (max-width: 1199px) {
    .sidebar {
        left: -300px;
    }
}

.sidebar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #c7e0e0;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}

@media (min-width: 1200px) {
    #main,
    #footer {
        margin-left: 300px;
    }
}

@media (max-width: 1199px) {
    .toggle-sidebar .sidebar {
        left: 0;
    }
}

@media (min-width: 1200px) {
    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 0;
    }

    .toggle-sidebar .sidebar {
        left: -300px;
    }
}

.sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-item {
    margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
    font-size: 11px;
    text-transform: uppercase;
    color: #899bbd;
    font-weight: 600;
    margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color-fondo-claro);
    transition: 0.3s;
    background: #f6f9ff;
    padding: 10px 15px;
    border-radius: 4px;
    background-color: transparent;
}

.sidebar-nav .nav-link i {
    font-size: 16px;
    margin-right: 10px;
    color: var(--text-color-fondo-claro);
}

.sidebar-nav .nav-link.collapsed {
    color: #012970;
    background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
    color: #899bbd;
}

.sidebar-nav .nav-link:hover {
    color: #03bb6c;
    background: #ddd;
}

.sidebar-nav .nav-link:hover i {
    color: #03bb6c;
}

.sidebar-nav .nav-link .bi-chevron-down {
    margin-right: 0;
    transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

.sidebar-nav .nav-content {
    padding: 5px 0 0 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-content a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-fondo-claro);
    transition: 0.3s;
    padding: 10px 0 10px 40px;
    transition: 0.3s;
}

.sidebar-nav .nav-content a i {
    font-size: 6px;
    margin-right: 8px;
    line-height: 0;
    border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: var(--text-color-fondo-claro);
}

.sidebar-nav .nav-content a.active i {
    background-color: var(--bg-color-oscuro);
}

/* #endregion */

/* #region ========== ESTILOS DEL MAIN ==========*/

#main {
    margin-top: 60px;
    padding: 20px 30px;
    transition: all 0.3s;
}

@media (max-width: 1199px) {
    #main {
        padding: 20px;
    }
}

/* #endregion*/

/* #region ========== ESTILOS DEL HEADER NAV ========== */

.header-nav ul {
    list-style: none;
}

.header-nav > ul {
    margin: 0;
    padding: 0;
}

.header-nav .nav-icon {
    font-size: 22px;
    color: #012970;
    margin-right: 25px;
    position: relative;
}

.header-nav .nav-profile {
    color: #012970;
}

.header-nav .nav-profile img {
    max-height: 36px;
}

.header-nav .nav-profile span {
    font-size: 14px;
    font-weight: 600;
}

.header-nav .badge-number {
    position: absolute;
    inset: -2px -5px auto auto;
    font-weight: normal;
    font-size: 12px;
    padding: 3px 6px;
}

.header-nav .profile {
    min-width: 240px;
    padding-bottom: 0;
    top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 600;
    color: #444444;
}

.header-nav .profile .dropdown-header span {
    font-size: 14px;
}

.header-nav .profile .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
    background-color: #f6f9ff;
}

/* #endregion */

/* #region ========== ESTILOS DEL CARD ==========*/

.card {
    margin-bottom: 30px;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.card-header,
.card-footer {
    border-color: #ebeef4;
    background-color: #fff;
    color: #798eb3;
    padding: 15px;
}

.card-title {
    padding: 20px 0 15px 0;
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    color: #012970;
    font-family: "Poppins", sans-serif;
}

.card-title span {
    color: #899bbd;
    font-size: 14px;
    font-weight: 400;
}

.card-body {
    padding: 0 20px 20px 20px;
}

.card-img-overlay {
    background-color: rgba(255, 255, 255, 0.6);
}

/*#endregion*/

/* #region ========== ESTILOS DEL FOOTER ========== */

.footer {
    background-color: #013741;
    padding: 20px 0;
    font-size: 1.1rem;
    transition: all 0.3s;
    border-top: 1px solid #cddfff;
    text-align: center;
}

.footer .copyright {
    text-align: center;
    color: var(--text-color-fondo-oscuro);
}

/* #endregion */

/* #region ========== ESTILOS DEL LOGIN ========== */
.login-page {
    background: linear-gradient(135deg, #c1e1d2, #b7ccdc);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 100%;
}

.login-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
}

.password-wrapper {
    position: relative;
}

/* Fondo minimalista */
.login-page {
    background: linear-gradient(135deg, #f0f4f8, #ffffff);
    background-color: #fdf9f3; /* fondo parecido al del logo */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor del formulario */
.login-container {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}

/* Título */
.login-title {
    font-size: 1.75rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--text-color-fondo-claro);
}

/* Input y etiquetas */
.form-label {
    font-weight: 500;
    color: var(--text-color-fondo-claro);
}

.form-control {
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.95rem;
}

/* Botón */
.btn-primary {
    background-color: var(--text-color-fondo-claro);
    border: none;
    font-weight: 600;
    padding: 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

    .btn-primary:hover {
        background-color: #04664d;
    }

/* Icono de ojo */
.password-wrapper {
    position: relative;
}

.password-wrapper .toggle-password {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.1rem;
    color: #6c757d;
}

.login-logo {
    max-width: 160px;
    height: auto;
    margin-bottom: 0.5rem;
}

/* #endregion */

/* #region ========== ESTILOS DE LAS TABLAS ========== */

/* Quita sombreado y asegura colapso de bordes */
table.dataTable {
    border-collapse: collapse !important;
}

/* Separación entre buscador (dom "<'top' f>") y la tabla */
.dataTables_wrapper .top {
    margin-bottom: 12px;
}

/* Largo de input del buscador */
.dataTables_filter input {
    width: 180px;
}

/* Select y buscador: look consistente */
.dataTables_wrapper input[type="search"] {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    margin: 5px 3px;
}

/* =========================
   THEAD (ENCABEZADO)
   ========================= */

/* Fondo blanco y texto verde */
table.dataTable thead,
table.dataTable thead th {
    background-color: #fff !important;
    color: #111;
    font-weight: 600;
    text-align: center;
}

/* Solo borde inferior verde; limpiamos top/left/right */
    table.dataTable thead th {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1.5px solid #111 !important;
        padding: 10px;
    }

/* Si usás scrollY/scrollX (header en contenedor aparte) */
.dataTables_wrapper div.dataTables_scrollHead thead th,
.dataTables_wrapper div.dataTables_scrollHead thead {
    background-color: #fff !important;
    border-bottom: 2px solid #198754 !important;
}

/* Oculta íconos de ordenamiento por defecto */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before {
    display: none !important;
}

/* =========================
   CUERPO Y FOOTER
   ========================= */

/* Fondo blanco para filas de datos y línea separadora suave */
table.dataTable tbody tr {
    background-color: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Elimina bordes sobrantes que agrega DataTables */
table.dataTable tbody {
    border-top: none !important;
    border-bottom: none !important;
}
table.dataTable.no-footer {
    border-bottom: none !important;
}

/* Celdas centradas y con buen vertical align (si querés este look global) */
.table td,
.table th {
    text-align: center;
    vertical-align: middle;
    padding: 10px;
}

th { text-align: left !important; }

/* Alineación de forms dentro de celdas de acción */
.table td form {
    display: flex;
    justify-content: center;
}

/* =========================
   PAGINACIÓN Y LAYOUT INFERIOR
   ========================= */

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 2px 8px !important;
    margin: 0 2px;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    min-width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    color: #198754 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #198754 !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #19875420 !important;
    color: #198754 !important;
}

/* Grid inferior: "Mostrar X", "Mostrando N de M", paginación */
.dataTables_wrapper .row:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.dataTables_wrapper .dataTables_length {
    order: 1;
    flex: 1;
    text-align: left;
}
.dataTables_wrapper .dataTables_info {
    order: 2;
    flex: 1;
    text-align: center;
}
.dataTables_wrapper .dataTables_paginate {
    order: 3;
    flex: 1;
    text-align: right;
}

/* Combo "mostrar N registros" */
.dataTables_wrapper .dataTables_length label{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.dataTables_wrapper .dataTables_length select{
    font-size: 0.85rem;
    min-width: 50px;
    padding: 2px 30px 2px 6px;
    line-height: 1.2;
    height: calc(1.2em + .5rem + 2px);
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    background-color: #fff;
}

/* =========================
   LIMPIEZA / COMPATIBILIDAD
   ========================= */

table.dataTable thead,
table.dataTable thead th,
table.dataTable tfoot {
    border-top: none !important;
}

/* (Opcional) encabezado con marco verde completo, por si querés usarlo en algún caso específico */
.table-header-custom th {
    color: #198754; /* Texto verde */
    background-color: transparent !important;
    border: 2px solid #198754;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}

/* contenedor del pill */
.dt-pill-switch {
    display: inline-flex;
    align-items: center;
}

    /* aspecto "activo" del botón cuando está chequeado */
    .dt-pill-switch .btn.active,
    #toggleMostrarBaja:checked + .btn {
        background-color: #198754;
        color: #fff;
        border-color: #198754;
    }

/* badge suave a juego */
.text-bg-success-subtle {
    background-color: rgba(25, 135, 84, .12) !important;
    color: #198754 !important;
}

.border-success-subtle {
    border-color: rgba(25, 135, 84, .35) !important;
}

/* estado normal (switch apagado) */
#bajaCount {
    background-color: rgba(25,135,84,.12) !important;
    color: #198754 !important;
    border: 1px solid rgba(25,135,84,.35) !important;
}

/* cuando el switch está activo: input:checked + label ... */
#toggleMostrarBaja:checked + label #bajaCount {
    background-color: rgba(255,255,255,.18) !important; /* leve contraste sobre fondo verde */
    color: #fff !important; /* texto/blanco */
    border-color: rgba(255,255,255,.45) !important; /* borde claro */
}

/* opcional: también blanqueá el icono cuando está activo */
#toggleMostrarBaja:checked + label .bi,
#toggleMostrarBaja:checked + label .ri {
    color: #fff !important;
}

/* Pill "Incluir bajas" */
.dt-pill-switch .btn {
    font-size: 0.9rem;
}

/* Espacio entre top (pill + buscador) y la tabla */
.dt-top {
    margin-bottom: 0.5rem;
}

/* ====== Ajustes para pantallas chicas (mobile) ====== */
@media (max-width: 576px) {

    /* Ocultar "Mostrar N registros" en mobile */
    .dataTables_wrapper .dataTables_length {
        display: none;
    }

    /* Que info + paginación queden centrados, uno debajo del otro si hace falta */
    .dataTables_wrapper .bottom {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        width: 100%;
        justify-content: center;
    }
}


.a-fix {
    line-height: 1.5 !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    display: flex;
    align-items: center;
    align-content: center;
}


/* #endregion */