/* ===============================
  estilos globables
   =============================== */
html {
    overflow-x: hidden;
    overflow-y: hidden;
}

@media (max-width: 767.98px) {
    html {
        overflow-y: auto;
    }
}

/*Campos input*/
.form-control:focus,
.form-select:focus {
    border-color: #007a5e; /* Verde complementario */
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 94, 0.25); /* Verde translúcido */
    outline: none;
}

.form-control::selection {
    background-color: #005840; /* Verde profundo como fondo */
    color: #ffffff; /* Texto blanco */
}

/*Estilos para grids*/

/* Contenedor general */
.tabulator {
    border: 1px solid #198754;
    font-size: 0.95rem;
}

    /* Encabezado */
    .tabulator .tabulator-header {
        background-color: #198754 !important;
        color: #ffffff !important;
        font-weight: bold;
    }

    /* Encabezado: texto de columna */
    .tabulator .tabulator-col .tabulator-col-content {
        color: #ffffff !important;
        background-color: #198754 !important;
    }

    /* Borde entre columnas del encabezado */
    .tabulator .tabulator-col {
        border-right: 1px solid #ffffff !important;
    }

/*Filas*/
.tabulator-row {
    cursor: pointer;
}

    .tabulator-row:hover {
        background-color: #f1f8e9 !important;
    }

/* Zebra striping */
.tabulator-row-odd {
    background-color: #f8f9fa !important;
}

.tabulator-row-even {
    background-color: #ffffff !important;
}
/* Estilo para resaltar la fila seleccionada */
.tabulator-selected {
    background-color: #e8f5e9 !important;
}

/* FOOTER (paginador) */
.tabulator .tabulator-footer {
    background-color: #198754 !important;
    color: #ffffff !important;
    border-top: 1px solid #146c43 !important;
}

    /* Etiquetas, botones e inputs del paginador */
    .tabulator .tabulator-footer * {
        color: #ffffff !important;
        background-color: transparent !important;
        border-color: #ffffff !important;
    }

    /* Página activa */
    .tabulator .tabulator-footer .tabulator-page.active {
        background-color: #ffffff !important;
        color: #198754 !important;
        font-weight: bold;
    }

    /* Hover sobre otras páginas */
    .tabulator .tabulator-footer .tabulator-page:not(.active):hover {
        background-color: #146c43 !important;
        color: #ffffff !important;
    }


/* Estilo personalizado para el loader interno */
.tabulator .ren-tabulator-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

    /* Spinner de Bootstrap: tamaño reducido */
    .tabulator .ren-tabulator-loader .spinner-border {
        width: 1.3rem;
        height: 1.3rem;
    }

/* Cambia el fondo semitransparente del overlay por uno verde suave */
.tabulator .tabulator-alert {
    background: rgba(25, 135, 84, 0.15) !important; /* Verde RENACCAPE con transparencia */
}


    /* 🔥 Neutraliza la caja generada por Tabulator para el loader */
    .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg {
        border: none !important;
        background-color: transparent !important;
        padding: 0 !important;
        font-size: inherit !important;
        font-weight: normal !important;
        box-shadow: none !important;
        color: inherit !important;
    }





/* ===============================
   2. Layout (Navbar, Footer, Main)
   =============================== */

body {
    margin: 0;
    padding: 0;
}

.navbar {
    background-color: #007a5e;
    color: #ffffff;
}

.navbar-brand {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

    /*    .navbar-brand span {
        font-weight: 700;
        font-size: 1.2rem;
    }*/

    .navbar-brand span {
        font-weight: 700;
        font-size: 1.2rem;
        white-space: normal; /* permite saltos de línea */
        word-break: break-word; /* rompe correctamente palabras largas */
    }

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.nav-link {
    font-size: 0.9rem;
    color: #ffffff;
}

    .nav-link:hover {
        color: #bff2d8;
    }

.dropdown-menu {
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

    .dropdown-menu a {
        color: #007a5e;
    }

        .dropdown-menu a:hover {
            background-color: #bff2d8;
            color: #005840;
        }

footer.footer {
    background-color: #005840 !important;
    color: #ffffff !important;
    font-size: 0.9rem;
    border-top: 3px solid #007a5e;
}

.language-selector {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 150px;
}

    .language-selector select {
        padding-left: 32px;
        background-repeat: no-repeat;
        background-position: 8px center;
        background-size: 20px 20px;
        font-size: 0.7rem;
    }


/*Controles personalizados*/

/*Toggle 3*/


/* Estructura base del grupo de toggle */
.renac-toggle-group {
    display: flex;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 28px;
    align-items: center;
}

    /* Botones base */
    .renac-toggle-group .btn {
        border-radius: 0;
        font-weight: 500;
        color: #212529;
        background-color: white;
        border: 1px solid #ced4da;
        padding: 0.375rem 1rem;
        font-size: 0.89rem;
        flex: 1 1 calc(100% / var(--btn-count, 3));
        text-align: center;
    }

        /* Bordes redondeados en extremos */
        .renac-toggle-group .btn:first-of-type {
            border-top-left-radius: 0.375rem;
            border-bottom-left-radius: 0.375rem;
        }

        .renac-toggle-group .btn:last-of-type {
            border-top-right-radius: 0.375rem;
            border-bottom-right-radius: 0.375rem;
        }




/* Estados activos por color */
.btn-check:checked + .btn-renac-red {
    background-color: #dc3545 !important;
    color: white !important;
    border-color: #dc3545 !important;
}

.btn-check:checked + .btn-renac-green {
    background-color: #198754 !important;
    color: white !important;
    border-color: #198754 !important;
}

.btn-check:checked + .btn-renac-yellow {
    background-color: #ffc107 !important;
    color: #212529 !important;
    border-color: #ffc107 !important;
}

.btn-check:checked + .btn-renac-blue {
    background-color: #0d6efd !important; /* Bootstrap primary blue */
    color: #fff !important;
    border-color: #0d6efd !important;
}

.btn-check:checked + .btn-renac-orange {
    background-color: #fd7e14 !important; /* Bootstrap orange */
    color: #fff !important;
    border-color: #fd7e14 !important;
}



/* Hover: botón asociado al color verde */
.renac-toggle-group .btn-renac-green:hover {
    background-color: rgba(25, 135, 84, 0.1); /* Verde #198754 con 10% de opacidad */
    border-color: #ced4da;
}

/* Hover: botón asociado al color rojo */
.renac-toggle-group .btn-renac-red:hover {
    background-color: rgba(220, 53, 69, 0.1); /* Rojo #dc3545 con 10% de opacidad */
    border-color: #ced4da;
}

/* Hover: botón asociado al color amarillo */
.renac-toggle-group .btn-renac-yellow:hover {
    background-color: rgba(255, 193, 7, 0.2); /* Amarillo #ffc107 con 20% de opacidad (más visible) */
    border-color: #ced4da;
}

.renac-toggle-group .btn-renac-blue:hover {
    background-color: rgba(13, 110, 253, 0.1); /* Azul #0d6efd con 10% de opacidad */
    border-color: #ced4da;
}
.renac-toggle-group .btn-renac-orange:hover {
    background-color: rgba(253, 126, 20, 0.1); /* Naranja #fd7e14 con 10% de opacidad */
    border-color: #ced4da;
}



/*Select2*/
/* Contenedor de selección (single y multiple) */
/* Foco forzado para el contenedor principal cuando el dropdown está abierto */
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #007a5e !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 94, 0.25) !important;
    outline: none !important;
}


/* Input interno del search en dropdown (select2-search__field) */
.select2-dropdown.select2-dropdown--below .select2-search__field:focus,
.select2-dropdown.select2-dropdown--above .select2-search__field:focus {
    border-color: #007a5e !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 94, 0.25) !important;
    outline: none !important;
}

/* También aplica a inputs inline en modo tags (si usas select2-multiple) */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field:focus {
    border-color: #007a5e !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 94, 0.25) !important;
    outline: none !important;
}

/* Ajusta altura y padding para que coincida con .form-select de Bootstrap */
.select2-container--bootstrap-5 .select2-selection--single {
    min-height: 30px !important;
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
}

.select2-container--bootstrap-5:focus-within .select2-selection {
    border-color: #007a5e !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 94, 0.25) !important;
    outline: none !important;
}

/*tabs*/
.nav-tabs .nav-link:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 94, 0.25); /* Verde translúcido */
    border-color: #007a5e !important;
}