/* =============================================================
   BASE-COMPONENTS.CSS  — Colegio Garrido
   Cargado UNA sola vez en app.blade.php.
   Contiene SOLO lo que se repite en 3 o más vistas.
   Cada vista sigue teniendo su CSS para lo específico.
   ============================================================= */

/* ============================================================
   1. VARIABLES GLOBALES
   Definidas aquí, no en cada vista (evita re-declaración x16)
   ============================================================ */
:root {
    --primary:       #2c3e50;
    --secondary:     #3498db;
    --success:       #27ae60;
    --warning:       #f39c12;
    --danger:        #c41e3a;
    --border:        #dee2e6;
    --text:          #2c3e50;
    --text-muted:    #7f8c8d;
    --bg-light:      #f8f9fa;
    --light-bg:      #ecf0f1;

    /* Aliases usados en algunos archivos */
    --primary-color:    #2c3e50;
    --secondary-color:  #3498db;
    --success-color:    #27ae60;
    --warning-color:    #f39c12;
    --danger-color:     #c41e3a;
    --border-color:     #dee2e6;
    --text-color:       #2c3e50;
    --text-light:       #7f8c8d;
}

/* ============================================================
   2. DESKTOP / MOBILE TOGGLE
   Usado en TODAS las vistas index
   ============================================================ */
@media (min-width: 992px) {
    .mobile-view  { display: none !important; }
    .desktop-view { display: block; width: 100%; }
}
@media (max-width: 991px) {
    .desktop-view { display: none !important; }
    .mobile-view  {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
}

/* ============================================================
   3. CONTROLES: BUSCADOR + BOTÓN REGISTRAR
   Presente en fathers, teachers, students, courses, sections,
   enrollments, academic, schedule…
   ============================================================ */
.controls-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 20px;
}

.search-group {
    flex: 1;
    min-width: 220px;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: white;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.search-input::placeholder { color: #aaa; }

/* Filtro select (academic, students, schedule, enrollments…) */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 140px;
}

.filter-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.filter-select {
    padding: 11px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 0.92rem;
    background: white;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.3s;
}

.filter-select:hover  { border-color: var(--secondary); }
.filter-select:focus  { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(52,152,219,.12); }

/* Botón registrar genérico */
.btn-register {
    padding: 11px 22px;
    background: linear-gradient(135deg, var(--secondary), #2980b9);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: fit-content;
}
.btn-register:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(52,152,219,.35); color: white; text-decoration: none; }

/* ============================================================
   4. TABLA DESKTOP — estructura compartida
   ============================================================ */
.table-container {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    width: 100%;
    box-sizing: border-box;
}

/* Thead oscuro estándar — la mayoría de tablas lo usan igual */
.table-container table thead {
    background: linear-gradient(135deg, var(--primary) 0%, #1a252f 100%);
    color: white;
}

.table-container table th {
    padding: 15px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.88rem;
    border-bottom: 2px solid var(--secondary);
    white-space: nowrap;
}

.table-container table th i { margin-right: 6px; color: var(--secondary); }

.table-container table td {
    padding: 13px 12px;
    text-align: center;
    border-bottom: 1px solid var(--bg-light);
    font-size: 0.9rem;
    vertical-align: middle;
    color: var(--text);
}

.table-container table tbody tr:hover { background: rgba(52,152,219,.04); }

/* ============================================================
   5. BADGES COMUNES
   ============================================================ */
.badge-id {
    background: var(--secondary);
    color: white;
    padding: 4px 11px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-block;
}

.dni-badge,
.phone-badge {
    background: var(--light-bg);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
    font-family: 'Courier New', monospace;
    color: var(--primary);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
}

.badge-success  { background: rgba(39,174,96,.15);  color: var(--success); }
.badge-danger   { background: rgba(196,30,58,.15);  color: var(--danger);  }
.badge-warning  { background: rgba(243,156,18,.15); color: var(--warning); }
.badge-info     { background: rgba(52,152,219,.15); color: var(--secondary); }

/* ============================================================
   6. BOTONES DE ACCIÓN EN TABLA (edit / delete / view)
   ============================================================ */
.actions-group {
    display: flex;
    justify-content: center;
    gap: 7px;
}

.action-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.action-btn:hover { transform: scale(1.1); opacity: 0.9; }

.edit-btn    { background: rgba(243,156,18,.15); color: var(--warning); }
.delete-btn  { background: rgba(196,30,58,.15);  color: var(--danger);  }
.view-btn    { background: rgba(52,152,219,.15); color: var(--secondary); }
.details-btn { background: rgba(52,152,219,.15); color: var(--secondary); }
.approve-btn { background: rgba(243,156,18,.15); color: var(--warning); }

.edit-btn:hover    { background: var(--warning);   color: white; }
.delete-btn:hover  { background: var(--danger);    color: white; }
.view-btn:hover    { background: var(--secondary); color: white; }
.details-btn:hover { background: var(--secondary); color: white; }
.approve-btn:hover { background: var(--warning);   color: white; }

/* ============================================================
   7. TARJETAS MÓVIL — estructura común
   Usada en fathers, teachers, courses, sections, enrollments,
   academic, schedule, students (modo card)
   ============================================================ */
@media (max-width: 991px) {

    /* Reset secciones en móvil */
    [class$="-section"] {
        padding: 10px 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        overflow-x: hidden;
    }

    /* Controles en columna */
    .controls-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .search-group,
    .filter-group,
    .btn-register {
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
    }

    .btn-register { justify-content: center; }

    /* Tarjeta genérica */
    .admin-card {
        background: white;
        margin: 0 auto 18px auto;
        width: 92%;
        max-width: 460px;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0,0,0,.08);
        border: 1px solid var(--border);
        box-sizing: border-box;
    }

    /* Card-header oscuro */
    .card-header {
        background: var(--primary);
        color: white;
        padding: 12px 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header-text {
        font-weight: 700;
        font-size: 0.8rem;
        opacity: 0.8;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    /* Card body */
    .card-body { padding: 14px 18px; }

    .data-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #f1f1f1;
    }
    .data-row:last-child { border-bottom: none; }

    .label {
        color: var(--secondary);
        font-weight: 800;
        font-size: 0.73rem;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        flex-shrink: 0;
        margin-right: 12px;
        min-width: 65px;
    }

    .value {
        color: var(--text);
        font-weight: 500;
        text-align: right;
        flex: 1;
        font-size: 0.9rem;
    }

    /* Card footer */
    .card-footer {
        padding: 13px 18px;
        background: var(--bg-light);
        border-top: 1px solid var(--border);
    }

    .card-footer .actions-group {
        display: flex !important;
        gap: 10px;
        width: 100%;
    }

    /* Botones de tarjeta a ancho completo */
    .btn-action-card {
        flex: 1;
        padding: 11px;
        border-radius: 9px;
        font-weight: 700;
        font-size: 0.88rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-action-card:hover      { opacity: 0.88; transform: translateY(-1px); }
    .btn-action-card.edit-btn   { background: var(--warning);   color: white; }
    .btn-action-card.delete-btn { background: var(--danger);    color: white; }
    .btn-action-card.view-btn   { background: var(--secondary); color: white; }
    .btn-action-card.approve-btn{ background: var(--warning);   color: white; }
}

/* ============================================================
   8. PAGINACIÓN — misma en todas las vistas
   ============================================================ */
.pagination-container {
    display: flex;
    justify-content: center;
    padding: 16px 12px;
    background: var(--bg-light);
    box-sizing: border-box;
}

/* Estilos para la paginación de Laravel */
.pagination {
    display: flex;
    gap: 6px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination li { display: inline-block; }

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: all 0.25s;
    background: white;
    cursor: pointer;
}

.pagination a:hover {
    background: var(--secondary);
    color: white;
    border-color: var(--secondary);
    transform: translateY(-2px);
}

.pagination .active span {
    background: var(--secondary);
    color: white;
    border-color: var(--secondary);
}

.pagination .disabled span,
.pagination .disabled a {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
    background: var(--bg-light);
}
.pagination .disabled a:hover { background: var(--bg-light); transform: none; }



/* Controlar el tamaño gigante de las flechas SVG de Laravel */
.pagination svg {
    width: 20px !important;
    height: 20px !important;
    display: inline-block;
}

/* Opcional: Arreglar el texto "Showing 1 to 10 of 16 results" para que no se vea desordenado */
.pagination-container nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pagination-container p.text-sm {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
    text-align: center;
}
/* ============================================================
   ESTILOS PERSONALIZADOS PARA EL SCROLL DE LA TABLA (MÁS GRUESO)
   ============================================================ */
/* Aplicamos a ambos contenedores por seguridad */
.table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 16px !important; /* Más alto (grueso) para agarrar fácil con el mouse */
    width: 16px !important;
}

/* El "carril" por donde se mueve la barra */
.table-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: #f8fafc; 
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* La barra gris que agarras con el mouse */
.table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #94a3b8; 
    border-radius: 8px;
    /* Reducimos este borde de 3px a 2px para que la franja gris ocupe más espacio visible */
    border: 2px solid #f8fafc; 
}

/* Cuando le pasas el mouse por encima a la barra */
.table-container::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #64748b; 
}




/* ============================================================
   9. SIN RESULTADOS
   ============================================================ */
.no-results {
    text-align: center;
    padding: 55px 20px;
    color: var(--text-muted);
}

.no-results i {
    font-size: 3.5rem;
    color: var(--border);
    margin-bottom: 15px;
    display: block;
    opacity: 0.5;
}

.no-results p {
    font-size: 1rem;
    font-weight: 500;
}

/* ============================================================
   10. MODALES — estructura base compartida
   Usada en editstudent, editacademic, registerschedule,
   indexattendance (justificación)…
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    animation: bcFadeIn 0.3s ease;
    overflow: hidden;
}

@keyframes bcFadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    width: 90%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    animation: bcSlideUp 0.35s ease;
}

@keyframes bcSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.modal-header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    padding: 28px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header h3 i { font-size: 1.6rem; }

.modal-header .btn-close {
    background: rgba(255,255,255,.22);
    border: none;
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 7px 11px;
    border-radius: 6px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.modal-header .btn-close:hover { background: rgba(255,255,255,.4); transform: scale(1.15) rotate(90deg); }

.modal-body {
    padding: 35px 28px;
}

.modal-footer {
    background: var(--bg-light);
    padding: 18px 28px;
    display: flex;
    justify-content: center;
    gap: 12px;
    border-top: 1px solid #e9ecef;
}

/* Botones de modal */
.btn-primary {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: white;
    border: none;
    padding: 11px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.97rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(30,60,114,.2);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(30,60,114,.38); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    background: white;
    color: var(--danger);
    border: 2px solid var(--danger);
    padding: 11px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.97rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-secondary:hover { background: var(--danger); color: white; transform: translateY(-2px); }

/* Formulario dentro de modal */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-label {
    font-weight: 600;
    color: #1e3c72;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 7px;
}
.form-label i { color: #2a5298; }

.form-control,
.form-select {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 0.97rem;
    transition: all 0.3s;
    width: 100%;
    background: white;
    box-sizing: border-box;
}
.form-control:focus, .form-select:focus {
    border-color: #1e3c72;
    box-shadow: 0 0 0 3px rgba(30,60,114,.18);
    outline: none;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545; }

.invalid-feedback { color: #dc3545; font-size: 0.84rem; display: block; margin-top: 4px; }

.alert           { padding: 14px; margin-bottom: 18px; border-radius: 8px; border: 1px solid transparent; }
.alert-danger    { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }

/* Responsive modal */
@media (max-width: 768px) {
    .modal-content  { width: 95%; }
    .modal-header   { padding: 22px 18px; }
    .modal-body     { padding: 26px 18px; }
    .modal-footer   { padding: 14px 18px; flex-direction: column; }
    .btn-primary,
    .btn-secondary  { width: 100%; justify-content: center; }
    .form-row       { grid-template-columns: 1fr; gap: 14px; }
}
/* ============================================================
   AJUSTES PARA TABLAS GENERALES (Ej: Lista de Estudiantes)
   ============================================================ */

/* 1. Botones de acción grandes, cuadrados y proporcionados */
.action-btn {
    width: 62px !important;  /* Antes estaba en 72px, 42px los hace cuadrados y grandes */
    height: 42px !important;
    font-size: 1.25rem !important; /* Tamaño de ícono perfecto */
    border-radius: 8px !important;
}

/* 2. Proteger la columna de Acciones para que nunca se exprima */
.table-container table th:last-child,
.table-container table td:last-child {
    min-width: 160px !important; /* Asegura espacio para los 3 botones */
    white-space: nowrap !important;
}

.actions-group {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

/* 3. Alinear el Encabezado y el Contenido de la columna "NOMBRE" a la izquierda */
.table-container table th:nth-child(2),
.table-container table td:nth-child(2) {
    text-align: left !important;
    padding-left: 25px !important;
}

/* 4. Alinear el contenedor del nombre y su ícono de usuario */
.table-container table td:nth-child(2) > div,
.table-container table td:nth-child(2) > span {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
}

.table-container {
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch; 
}

/* LA MAGIA: Esto asegura que los 950px SOLO apliquen en computadoras y tablets grandes. 
   En celulares (menos de 992px), la tabla volverá a ser 100% adaptable. */
@media (min-width: 992px) {
    .table-container table {
        min-width: 950px !important; 
        width: 100% !important;
    }
}