/* ============================================
   INSTITUTO IE - SISTEMA ADMIN LAYOUT
   Personalización estética sobre AdminLTE 3
   ============================================ */

/* ============================================
   VARIABLES CSS GLOBALES
   ============================================ */
:root {
    /* Colores primarios */
    --admin-primary: #0ea5e9;
    --admin-primary-dark: #0284c7;
    --admin-primary-light: #e0f2fe;

    /* Colores de acento */
    --admin-success: #10b981;
    --admin-warning: #f59e0b;
    --admin-danger: #ef4444;
    --admin-info: #06b6d4;

    /* Colores neutros */
    --admin-dark: #0f172a;
    --admin-gray-900: #1e293b;
    --admin-gray-800: #334155;
    --admin-gray-700: #475569;
    --admin-gray-600: #64748b;
    --admin-gray-500: #94a3b8;
    --admin-gray-400: #cbd5e1;
    --admin-gray-300: #e2e8f0;
    --admin-gray-200: #f1f5f9;
    --admin-gray-100: #f8fafc;
    --admin-white: #ffffff;

    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
}

/* ============================================
   ADAPTACIÓN ESTÉTICA (Sin romper estructura)
   ============================================ */

/* Ajustes sutiles al navbar */
.main-header {
    border-bottom: 1px solid var(--admin-gray-300) !important;
    box-shadow: var(--shadow-sm);
}

/* Colores personalizados para el sidebar */
.main-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--admin-primary) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

/* Cards mejoradas */
.card {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.card:hover {
    box-shadow: var(--shadow-md) !important;
}

/* Botones consistentes */
.btn-primary {
    background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-primary-dark) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--admin-primary-dark) 0%, #0369a1 100%) !important;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

/* ============================================
   ESTABILIZACIÓN DE ICONOS EN EL SIDEBAR
   Garantiza que el icono NO se mueva ni un píxel al expandirse.
   ============================================ */

@media (min-width: 992px) {
    /* El ancho del sidebar colapsado es 4.6rem (aprox 73.6px) */

    /* 1. Limpiar espacios del link para que no empujen */
    body.sidebar-mini.sidebar-collapse .main-sidebar .nav-link,
    body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link,
    body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* 2. El ICONO se ancla a un espacio fijo de 4.6rem */
    /* De esta forma, su centro siempre está a 2.3rem del borde izquierdo */
    body.sidebar-mini.sidebar-collapse .main-sidebar .nav-icon {
        width: 4.6rem !important;
        min-width: 4.6rem !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        transition: none !important;
    }

    /* Ajuste especial para Logo y Avatar para que NO se estiren */
    body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-image,
    body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .image img {
        width: 34px !important;
        /* Tamaño fijo razonable */
        height: 34px !important;
        max-width: 34px !important;
        margin-left: calc((4.6rem - 34px) / 2) !important;
        /* Centrado exacto manual */
        margin-right: calc((4.6rem - 34px) / 2) !important;
        float: none !important;
        object-fit: contain !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .image {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. El TEXTO se desplaza para que aparezca después del icono */
    body.sidebar-mini.sidebar-collapse .main-sidebar .nav-link p,
    body.sidebar-mini.sidebar-collapse .main-sidebar .brand-text,
    body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .info {
        margin: 0 !important;
        padding-left: 0 !important;
        white-space: nowrap !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* 4. Mostrar texto al expandirse (hover) */
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-link p,
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text,
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .info {
        opacity: 1;
    }

    /* 5. ESPACIADO PARA TÍTULOS (nav-header) EN MODO COLAPSADO */
    /* En lugar de desaparecer, dejan un hueco para separar grupos de iconos */
    body.sidebar-mini.sidebar-collapse .main-sidebar .nav-header {
        height: 30px !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0;
        /* Invisibles pero ocupan espacio */
        transition: opacity 0.3s ease;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-header {
        height: auto !important;
        padding: 20px 20px 10px 20px !important;
        opacity: 1;
        /* Aparecen con el hover */
    }

    /* Asegurar que el el elemento activo tampoco mueva el icono */
    body.sidebar-mini.sidebar-collapse .main-sidebar .nav-link.active::before {
        display: none !important;
    }
}

/* ============================================
   SISTEMA DE DISEÑO DE TABLAS (DataTables)
   Basado en estética premium y limpia
   ============================================ */

/* Contenedor principal de la tabla */
.card-table-modern {
    background: #fff !important;
    border-radius: var(--radius-lg) !important;
    border: none !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
    margin-bottom: 2rem;
}

/* Cabecera del Listado */
.table-header-modern {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--admin-gray-200);
}

.table-title-modern {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--admin-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Barra de Filtros (Segmented Control) */
.filter-bar-modern {
    padding: 1rem 2rem;
    background: var(--admin-gray-100);
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--admin-gray-200);
}

.filter-btn {
    padding: 6px 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--admin-gray-300);
    background: #fff;
    color: var(--admin-gray-600);
    font-size: 0.875rem;
    font-weight: 600;
    transition: var(--transition-normal);
}

.filter-btn:hover {
    background: var(--admin-gray-200);
    color: var(--admin-dark);
}

.filter-btn.active {
    background: var(--admin-primary);
    border-color: var(--admin-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

/* Estilos de la Tabla DataTable */
.table.dataTable-modern {
    margin: 0 !important;
    border: none !important;
}

.table.dataTable-modern thead th {
    background: var(--admin-gray-100);
    color: var(--admin-gray-500);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 12px 20px !important;
    border: none !important;
}

.table.dataTable-modern tbody td {
    padding: 1.25rem 1.5rem !important;
    vertical-align: middle !important;
    border: none !important;
    /* Reset total */
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    /* Casi invisible */
    color: var(--admin-gray-700);
    font-size: 0.9rem;
    background-color: transparent !important;
}

.table.dataTable-modern tbody tr:hover td {
    background-color: #f8fafc !important;
    /* Efecto hover sutil */
}

/* Eliminar bordes dobles */
.table.dataTable-modern {
    border-collapse: collapse !important;
}

/*thumbnails en tablas */
.table-img-modern {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

/* Badges de Estado Modernos */
.badge-modern {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.badge-soft-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-soft-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-soft-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-soft-info {
    background: #e0f2fe;
    color: #075985;
}

/* Botones de Acción Mini */
.btn-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin: 0 2px;
    transition: var(--transition-fast);
}

.btn-edit-modern {
    background: #fff;
    color: var(--admin-warning);
    border: 1px solid var(--admin-warning);
}

.btn-edit-modern:hover {
    background: var(--admin-warning);
    color: #fff;
}

.btn-delete-modern {
    background: #fff;
    color: var(--admin-danger);
    border: 1px solid var(--admin-danger);
}

.btn-delete-modern:hover {
    background: var(--admin-danger);
    color: #fff;
}

.btn-view-modern {
    background: #fff;
    color: var(--admin-info);
    border: 1px solid var(--admin-info);
}

.btn-view-modern:hover {
    background: var(--admin-info);
    color: #fff;
}

/* Personalización de controles DataTables */
.dataTables_wrapper .row:first-child {
    padding: 1.25rem 1.5rem !important;
    margin: 0 !important;
}

.dataTables_wrapper .row:last-child {
    padding: 1.25rem 1.5rem !important;
    margin: 0 !important;
    border-top: 1px solid var(--admin-gray-200);
    align-items: center;
}

.dataTables_length label,
.dataTables_filter label {
    margin-bottom: 0 !important;
    font-weight: 600;
    color: var(--admin-gray-500);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
}

.dataTables_length select {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--admin-gray-300) !important;
    padding: 4px 12px !important;
    margin: 0 10px !important;
    font-weight: 700;
    color: var(--admin-dark);
    height: auto !important;
    min-width: 65px !important;
    /* Más ancho para que el número no sufra */
    cursor: pointer;
}

.dataTables_wrapper .dataTables_filter {
    text-align: right !important;
    float: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--admin-gray-300) !important;
    padding: 6px 14px !important;
    margin-left: 12px !important;
    width: 260px !important;
    /* Un poco más largo para mejor presencia */
    transition: var(--transition-fast);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--admin-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

.dataTables_info {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--admin-gray-500);
    padding-top: 0 !important;
}

/* Dejar que AdminLTE maneje el contenido */
.content-wrapper {
    background: var(--admin-gray-100) !important;
    padding: 1.5rem !important;
    /* Spacing más balanceado */
}

/* Paginación Moderna */
.pagination .page-item .page-link {
    border: none;
    border-radius: var(--radius-sm);
    margin: 0 2px;
    color: var(--admin-gray-600);
}

.pagination .page-item.active .page-link {
    background: var(--admin-primary);
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.2);
}

/* Login Page Customization */
.login-page,
.register-page {
    background: linear-gradient(135deg, var(--admin-gray-900) 0%, var(--admin-dark) 100%) !important;
}

.login-card-body,
.register-card-body {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}