:root {
    --primary-color: #003366;
    /* Deep Navy Blue */
    --primary-light: #004d99;
    --accent-color: #D4AF37;
    /* Metallic Gold */
    --text-dark: #2C3E50;
    --text-light: #FFFFFF;
    --bg-light: #F4F6F9;
    --bg-white: #FFFFFF;
    --danger-color: #E74C3C;
    --success-color: #27AE60;
    --warning-color: #F39C12;
    --gray-light: #E0E0E0;
    --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.1);
    --radius-md: 8px;
    --radius-lg: 12px;
    --font-main: 'Montserrat', sans-serif;
    --sidebar-width: 250px;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-light);
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
    /* Prevent body scroll, use container. reset for mobile */
}

/* --- LAYOUT --- */
.app-container {
    display: flex;
    height: 100vh;
}

/* --- SIDEBAR --- */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--primary-color);
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.logo-container {
    margin-bottom: 3rem;
    text-align: center;
}

.logo-container h2 {
    font-size: 1.5rem;
    margin: 0;
    color: var(--text-light);
    letter-spacing: 1px;
}

.logo-container p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

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

.sidebar nav li {
    margin-bottom: 1rem;
}

.nav-link {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.nav-link i {
    margin-right: 1rem;
    width: 20px;
}

.nav-link:hover,
.nav-link.active {
    background-color: var(--primary-light);
    color: var(--accent-color);
    font-weight: 600;
}

.user-profile {
    margin-top: auto;
    display: flex;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.avatar {
    width: 40px;
    height: 40px;
    background-color: var(--accent-color);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 1rem;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-info .name {
    font-size: 0.9rem;
    font-weight: 600;
}

.user-info .role {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* --- MAIN CONTENT --- */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Changed in mobile */
}

.top-bar {
    background-color: var(--bg-white);
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
    /* padding-bottom: 4rem; Ensure space for mobile scrolling */
}

/* --- SECTIONS ANIMATION --- */
section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: none;
    /* Hidden by default */
}

section.active-section {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.section-header h2 {
    margin: 0;
    color: var(--primary-color);
}

#back-to-classes {
    margin-right: 1rem;
}

/* --- CLASSSES GRID --- */
.nivel-section {
    margin-bottom: 3rem;
}

.nivel-title {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--gray-light);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.class-card {
    background-color: var(--bg-white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid var(--accent-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.class-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    background-color: var(--primary-color);
    border-left-color: var(--bg-white);
}

.class-card .class-info {
    display: flex;
    flex-direction: column;
}

.class-card .grade {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
}

.class-card .section {
    font-size: 0.9rem;
    color: #7f8c8d;
}

.class-card:hover .grade,
.class-card:hover .section {
    color: var(--text-light);
}

.arrow-icon {
    color: var(--gray-light);
    transition: color 0.3s ease;
}

.class-card:hover .arrow-icon {
    color: var(--accent-color);
}

/* --- UPLOAD CARD --- */
.card-upload {
    background: var(--bg-white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    max-width: 600px;
    margin: 0 auto;
}

.file-drop-zone {
    border: 2px dashed var(--primary-color);
    border-radius: var(--radius-md);
    padding: 2rem;
    text-align: center;
    background-color: rgba(0, 51, 102, 0.02);
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
}

.file-drop-zone:hover {
    background-color: rgba(0, 51, 102, 0.05);
}

.file-drop-zone i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.file-drop-zone input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-note {
    background-color: #e8f4f8;
    color: #2980b9;
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

/* --- TABLES --- */
.table-container {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

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

.modern-table th {
    background-color: #f8f9fa;
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 1.2rem;
    text-align: left;
    border-bottom: 2px solid var(--gray-light);
}

.modern-table td {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--gray-light);
    vertical-align: middle;
}

.modern-table tr:hover {
    background-color: #fcfcfc;
}

.modern-table tr.en-reposo td {
    background-color: #f2f2f2;
    color: #999;
    font-style: italic;
}

/* --- FORMS & INPUTS --- */
.modern-select,
.modern-input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ced4da;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}

.modern-select:focus,
.modern-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.form-row {
    margin-bottom: 1rem;
}

.form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

/* --- BUTTONS --- */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger {
    border: none;
    border-radius: var(--radius-md);
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-secondary {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-secondary:hover {
    background-color: #f0f4f8;
}

/* --- CALENDAR / HISTORIAL COMPACT --- */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    /* Reduced gap */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.calendar-header {
    font-weight: 700;
    text-align: center;
    color: var(--primary-color);
    padding: 0.3rem;
    background-color: #f0f4f8;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

.calendar-day {
    height: 50px;
    /* Fixed height instead of aspect-ratio to save space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    position: relative;
    cursor: default;
    transition: all 0.2s ease;
}

/* Mobile adjustment for calendar */
@media (max-width: 768px) {
    .calendar-day {
        height: 45px;
        font-size: 0.8rem;
    }
}

.calendar-day.empty {
    border: none;
    background: transparent;
}

.calendar-day.present {
    background-color: #e8f5e9;
    color: var(--success-color);
    border-color: var(--success-color);
    font-weight: 600;
}

.calendar-day.absent {
    background-color: #ffebee;
    color: var(--danger-color);
    border-color: var(--danger-color);
    font-weight: 600;
}

.calendar-day.reposo {
    background-color: #fff8e1;
    color: var(--warning-color);
    border-color: var(--warning-color);
    font-weight: 600;
}

.status-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 2px;
}

.reposo .status-dot {
    background-color: var(--warning-color);
}

.calendar-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.nav-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0.5rem;
}

/* --- MODALS & Message Styling --- */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    overflow: hidden;
    /* Prevent body scroll interaction */
    /* Flex to center content vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* JS typically sets display: block, which breaks flex centering.
   However, we can keep the modal container fixed and use margin:auto 
   on the content if we can't change JS. 
   BUT since we are rewriting CSS, we can also ensure that if JS enforces block,
   we handle it. Most JS just sets display: block. 
   So we will use the old margin technique but with vh constraints.
*/

.modal[style*="display: block"] {
    display: flex !important;
    /* Force flex to maintain centering */
}

.modal-content {
    background-color: var(--bg-white);
    margin: 0;
    /* Centered by flex parent */
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    max-height: 95vh;
    /* Strict constraint */
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

.large-modal {
    max-width: 650px;
}

.extra-large-modal {
    max-width: 800px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.modal-body {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
    /* Allows body to scroll if needed */
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-light);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.close-btn {
    font-size: 1.5rem;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}

.close-btn:hover {
    color: var(--danger-color);
}

/* Improved Textarea for Messages */
#texto-mensaje {
    width: 100%;
    min-height: 150px;
    /* Reduced min-height */
    padding: 1rem;
    border: 1px solid #ced4da;
    border-radius: var(--radius-md);
    background-color: #fcfcfc;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-dark);
    resize: vertical;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

#texto-mensaje:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #fff;
}

/* --- TOASTS --- */
.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3000;
    min-width: 300px;
    border-left: 5px solid;
    animation: slideInRight 0.4s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification-toast.success {
    border-left-color: var(--success-color);
}

.notification-toast.error {
    border-left-color: var(--danger-color);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-toast.success i {
    color: var(--success-color);
}

.notification-toast.error i {
    color: var(--danger-color);
}

.close-toast {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #999;
}

/* --- TOOLTIP --- */
.tooltip {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #333;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    text-align: center;
}

.tooltip::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

/* --- RESPONSIVE TABLE (CARD VIEW) --- */
@media (max-width: 768px) {

    /* Fix Body Scroll: Allow body to scroll */
    body {
        overflow: auto;
        height: auto;
    }

    .app-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .sidebar {
        width: 100%;
        height: auto;
        padding: 1rem;
        box-shadow: none;
        position: relative;
    }

    .sidebar nav ul {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .sidebar nav li {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .user-profile {
        display: none;
    }

    .main-content {
        overflow: visible;
        height: auto;
    }

    .content-wrapper {
        padding: 1rem;
        overflow: visible;
    }

    .modern-table thead {
        display: none;
    }

    .modern-table tbody {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Layout Logic for Card Row */
    .modern-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "name name"
            "info info"
            "actions actions";
        gap: 1rem;
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-soft);
        padding: 1.5rem;
        position: relative;
        /* For absolute positioning of history if needed */
        border-top: 4px solid var(--primary-color);
        /* Premium accent */
    }

    /* NAME CELL (Header) */
    .modern-table td:nth-child(1) {
        grid-area: name;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 0.8rem;
        margin-bottom: 0.5rem;
        display: block;
        text-align: left;
        width: 100%;
        padding: 0;
    }

    .modern-table td:nth-child(1) .student-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* DAYS ABSENT & REPOSO (Info Row) */
    /* We'll use the second and third cells in a flex row within the 'info' area 
       OR just place them in grid columns. Let's try explicit columns if they exist.
       But since tr is the grid container, cell 2 and 3 are items. 
       Let's put cell 2 in the first column of row 2, and cell 3 in the second column. */

    /* Override grid areas for info row cells specially */
    .modern-table td:nth-child(2) {
        grid-column: 1 / 2;
        border: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .modern-table td:nth-child(3) {
        grid-column: 2 / 3;
        border: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        /* Align reposo text to right */
        text-align: right;
    }

    /* LABELS via ::before */
    .modern-table td:nth-child(2)::before {
        content: 'Días Ausentes';
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #999;
        margin-bottom: 0.3rem;
        font-weight: 600;
    }

    .modern-table td:nth-child(3)::before {
        content: 'Estado';
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #999;
        margin-bottom: 0.3rem;
        font-weight: 600;
    }

    /* ACTIONS (Full width bottom) */
    .modern-table td:nth-child(4) {
        grid-area: actions;
        border: none;
        padding: 0;
        margin-top: 0.5rem;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }

    .action-buttons button {
        width: 100%;
        justify-content: center;
        padding: 0.7rem;
    }

    /* HISTORY BUTTON (Top Right Absolute) */
    .modern-table td:nth-child(5) {
        position: absolute;
        top: 1.2rem;
        right: 1.2rem;
        border: none;
        padding: 0;
        width: auto;
    }

    .modern-table td:nth-child(5) button {
        background: transparent;
        color: var(--primary-color);
        border: 1px solid var(--gray-light);
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
        border-radius: 20px;
    }

    .modern-table td:nth-child(5) button:hover {
        background-color: var(--bg-light);
        color: var(--accent-color);
        border-color: var(--accent-color);
    }

    /* Ensure modal content fits on mobile */
    .modal-content {
        margin: 0;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}