/* ============================================================
   RESPONSIVE.CSS
   ------------------------------------------------------------
   IMPORTAR EN EL LAYOUT PRINCIPAL:

   <link rel="stylesheet" href="{{ asset('css/responsive.css') }}">

   ============================================================ */



/* ============================================================
   RESPONSIVE - CONTENEDOR GENERAL
   ------------------------------------------------------------
   USO EN LA VISTA:

   <div class="container responsive-container">

   Sirve como contenedor general para módulos que usarán
   tablas responsivas y tabs responsivos.
   ============================================================ */

.responsive-container {
    width: 100%;
}



/* ============================================================
   RESPONSIVE - TABLAS
   ------------------------------------------------------------
   USO EN LA VISTA:

   <table class="table table-striped table-bordered responsive-table">

   IMPORTANTE:
   Cada <td> debe llevar data-label para que en móvil
   se muestre el nombre de la columna.

   Ejemplo:
   <td data-label="Estudiante">Juan Pérez</td>
   ============================================================ */

.responsive-table {
    width: 100%;
    border-collapse: collapse;
}



/* ============================================================
   RESPONSIVE - ENCABEZADO DE TABLA
   ------------------------------------------------------------
   Se aplica automáticamente al usar .responsive-table
   ============================================================ */

.responsive-table thead th {
    /* background-color: #24547a; */
    /* color: #ffffff; */
    font-weight: 600;
    text-align: center;
}



/* ============================================================
   RESPONSIVE - CELDAS
   ------------------------------------------------------------
   Se aplica automáticamente al usar .responsive-table
   ============================================================ */

.responsive-table td,
.responsive-table th {
    /* padding: 10px;
    vertical-align: middle; */
}



/* ============================================================
   RESPONSIVE - FILAS ALTERNADAS
   ------------------------------------------------------------
   Se aplica automáticamente al usar .responsive-table
   ============================================================ */

.responsive-table tbody tr:nth-child(even) {
    background-color: #f7f9fb;
}



/* ============================================================
   RESPONSIVE - TABS DEL SISTEMA
   ------------------------------------------------------------
   USO EN LA VISTA:

   <ul class="nav nav-tabs responsive-tabs">

   Sirve para tabs con fondo, hover y tab activo estilizado.
   ============================================================ */

.responsive-tabs {
    border-bottom: none;
    background: #f4f6f9;
    padding: 5px;
    border-radius: 6px;
}



/* ============================================================
   RESPONSIVE - ELIMINAR BORDE INFERIOR DE BOOTSTRAP EN NAV TABS
   ------------------------------------------------------------
   Se aplica cuando el <ul> tiene:
   class="nav nav-tabs responsive-tabs"
   ============================================================ */

.responsive-tabs.nav-tabs {
    border-bottom: none !important;
}



/* ============================================================
   RESPONSIVE - ITEM TAB
   ------------------------------------------------------------
   Se aplica automáticamente dentro de .responsive-tabs
   ============================================================ */

.responsive-tabs .nav-item {
    margin-bottom: 0;
}



/* ============================================================
   RESPONSIVE - LINK TAB
   ------------------------------------------------------------
   Se aplica automáticamente a los <a class="nav-link">
   dentro de .responsive-tabs
   ============================================================ */

.responsive-tabs .nav-link {
    background: #e9edf2;
    border: 1px solid #d3d9df;
    color: #333;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 6px;
}



/* ============================================================
   RESPONSIVE - HOVER TAB
   ------------------------------------------------------------
   Se aplica automáticamente a los tabs al pasar el mouse
   ============================================================ */

.responsive-tabs .nav-link:hover {
    background: #dfe6ee;
    color: #000;
}



/* ============================================================
   RESPONSIVE - TAB ACTIVO
   ------------------------------------------------------------
   Se aplica automáticamente al tab activo
   ============================================================ */

.responsive-tabs .nav-link.active {
    background: #24547a;
    color: #ffffff;
    border-color: #24547a;
    font-weight: 600;
}



/* ============================================================
   RESPONSIVE - ICONOS EN TABS
   ------------------------------------------------------------
   Se aplica automáticamente a íconos dentro de nav-link
   ============================================================ */

.responsive-tabs .nav-link i {
    margin-right: 6px;
}



/* ============================================================
   RESPONSIVE - MODAL GRANDE
   ------------------------------------------------------------
   USO EN LA VISTA:

   <div class="modal-dialog modal-xl responsive-programas-modal">

   Sirve para modales grandes.
   ============================================================ */

.responsive-programas-modal {
    max-width: 90%;
}



/* ============================================================
   RESPONSIVE - MODAL MEDIANO
   ------------------------------------------------------------
   USO EN LA VISTA:

   <div class="modal-dialog modal-lg responsive-help-modal">

   Sirve para modales medianos.
   ============================================================ */

.responsive-help-modal {
    max-width: 50%;
}



/* ============================================================
   RESPONSIVE - COMPORTAMIENTO EN DISPOSITIVOS MÓVILES
   ------------------------------------------------------------
   Cuando la pantalla es menor a 768px:

   - La tabla se convierte en tarjetas (cards)
   - Cada fila se muestra como bloque
   - Cada columna muestra su nombre usando data-label
   - Los tabs se acomodan en varias filas
   - Los modales usan más ancho disponible
   ============================================================ */

@media (max-width: 768px) {



    /* ========================================================
       RESPONSIVE - OCULTAR HEADER DE TABLA
       --------------------------------------------------------
       Se aplica automáticamente a .responsive-table
       ======================================================== */

    .responsive-table thead {
        display: none;
    }



    /* ========================================================
       RESPONSIVE - TABLA COMO BLOQUE
       --------------------------------------------------------
       Se aplica automáticamente a .responsive-table
       ======================================================== */

    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
    }



    /* ========================================================
       RESPONSIVE - CARD POR FILA
       --------------------------------------------------------
       Se aplica automáticamente a cada <tr> de la tabla
       ======================================================== */

    .responsive-table tr {
        margin-bottom: 15px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e4e7eb;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        padding: 10px;
    }



    /* ========================================================
       RESPONSIVE - CELDAS EN MÓVIL
       --------------------------------------------------------
       Se aplica automáticamente a cada <td>
       ======================================================== */

    .responsive-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }



    /* ========================================================
       RESPONSIVE - ÚLTIMA CELDA
       --------------------------------------------------------
       Quita la línea inferior de la última celda
       ======================================================== */

    .responsive-table td:last-child {
        border-bottom: none;
    }



    /* ========================================================
       RESPONSIVE - ETIQUETA DE COLUMNA
       --------------------------------------------------------
       Usa el valor de data-label en cada <td>
       ======================================================== */

    .responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        width: 45%;
        text-align: left;
        font-weight: 600;
        color: #333;
    }



    /* ========================================================
       RESPONSIVE - TABS EN MÓVIL
       --------------------------------------------------------
       Se aplica automáticamente a .responsive-tabs
       ======================================================== */

    .responsive-tabs {
        display: flex;
        flex-wrap: wrap;
    }

    .responsive-tabs .nav-item {
        flex: 1 1 50%;
        text-align: center;
    }

    .responsive-tabs .nav-link {
        font-size: 14px;
        padding: 8px;
    }



    /* ========================================================
       RESPONSIVE - MODAL GRANDE EN MÓVIL
       --------------------------------------------------------
       Se aplica a .responsive-programas-modal
       ======================================================== */

    .responsive-programas-modal {
        max-width: 96%;
        margin: 1rem auto;
    }



    /* ========================================================
       RESPONSIVE - MODAL MEDIANO EN MÓVIL
       --------------------------------------------------------
       Se aplica a .responsive-help-modal
       ======================================================== */

    .responsive-help-modal {
        max-width: 96%;
        margin: 1rem auto;
    }

}