/* /Layout/MainLayout.razor.rz.scp.css */
/* MainLayout - Clean layout without sidebar */
html[b-xcw99u4nke], body[b-xcw99u4nke] {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.page[b-xcw99u4nke] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-xcw99u4nke] {
    flex: 1;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-8mhct3kpel] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-8mhct3kpel] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-8mhct3kpel] {
    font-size: 1.1rem;
}

.bi[b-8mhct3kpel] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-8mhct3kpel] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-8mhct3kpel] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-8mhct3kpel] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-8mhct3kpel] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-8mhct3kpel] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-8mhct3kpel] {
        padding-bottom: 1rem;
    }

    .nav-item[b-8mhct3kpel]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-8mhct3kpel]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-8mhct3kpel]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-8mhct3kpel] {
        display: none;
    }

    .collapse[b-8mhct3kpel] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-8mhct3kpel] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Private/Academico.razor.rz.scp.css */
/* ============================================
   ACADEMICO PAGE - I.E.P. Javier Perez de Cuellar
   Gestion de Grados, Secciones, Cursos, Aulas
   Estilos con CSS Isolation (.razor.css)
   ============================================ */

.academic-page[b-dmmavfo6bd] {
    padding: 1rem;
    min-height: 100%;
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */
.breadcrumb-nav[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.breadcrumb-item[b-dmmavfo6bd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.breadcrumb-item:not(:disabled):hover[b-dmmavfo6bd] {
    background: var(--bg-primary-subtle);
}

.breadcrumb-item:disabled[b-dmmavfo6bd],
.breadcrumb-item.current[b-dmmavfo6bd] {
    color: var(--text-gray);
    cursor: default;
    font-weight: 600;
}

.breadcrumb-item.current:not(button)[b-dmmavfo6bd] {
    background: var(--bg-primary-faint);
}

.breadcrumb-home[b-dmmavfo6bd] {
    width: 16px;
    height: 16px;
}

.breadcrumb-separator[b-dmmavfo6bd] {
    color: var(--text-placeholder);
    font-size: 0.85rem;
    user-select: none;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading-state[b-dmmavfo6bd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    color: var(--text-light);
}

.loading-state .spinner[b-dmmavfo6bd] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-dmmavfo6bd 0.8s linear infinite;
}

@keyframes spin-b-dmmavfo6bd {
    to { transform: rotate(360deg); }
}

/* ============================================
   ACADEMIC HEADER - Tabs y Acciones
   ============================================ */
.academic-header[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.level-tabs[b-dmmavfo6bd] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.level-tab[b-dmmavfo6bd] {
    padding: 0.6rem 1.25rem;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-gray);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.level-tab:hover[b-dmmavfo6bd] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.level-tab.active[b-dmmavfo6bd] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-white);
}

.level-tab .badge[b-dmmavfo6bd] {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.level-tab.active .badge[b-dmmavfo6bd] {
    background: rgba(255, 255, 255, 0.25);
}

.header-actions[b-dmmavfo6bd] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--color-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary:hover:not(:disabled)[b-dmmavfo6bd] {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-dmmavfo6bd] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-primary svg[b-dmmavfo6bd] {
    width: 18px;
    height: 18px;
}

.btn-secondary[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--bg-light);
    color: var(--text-gray);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-secondary:hover[b-dmmavfo6bd] {
    background: var(--bg-gray);
    border-color: var(--border-light);
}

.btn-icon[b-dmmavfo6bd] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white, #ffffff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-gray, #4a5568);
    cursor: pointer;
    transition: all var(--transition-fast, 0.2s ease);
    padding: 0;
    gap: 0;
    font-weight: normal;
}

.btn-icon:hover[b-dmmavfo6bd] {
    border-color: var(--color-primary, #0055A3);
    color: var(--color-primary, #0055A3);
    background: var(--bg-primary-faint, rgba(0, 85, 163, 0.05));
}

.btn-icon svg[b-dmmavfo6bd] {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.btn-icon-sm[b-dmmavfo6bd] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-icon-sm:hover[b-dmmavfo6bd] {
    background: var(--bg-gray);
    color: var(--color-primary);
}

.btn-icon-sm.danger:hover[b-dmmavfo6bd] {
    background: var(--bg-error);
    color: var(--color-error-dark);
}

.btn-icon-sm svg[b-dmmavfo6bd] {
    width: 16px;
    height: 16px;
}

.btn-action[b-dmmavfo6bd] {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--text-white);
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-action:hover[b-dmmavfo6bd] {
    background: var(--color-primary-dark);
}

.btn-back[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-gray);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-back:hover[b-dmmavfo6bd] {
    background: var(--bg-light);
    border-color: var(--border-light);
}

.btn-back svg[b-dmmavfo6bd] {
    width: 16px;
    height: 16px;
}

.btn-manage[b-dmmavfo6bd] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-manage:hover[b-dmmavfo6bd] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-white);
}

.btn-manage svg[b-dmmavfo6bd] {
    width: 16px;
    height: 16px;
}

.btn-add-inline[b-dmmavfo6bd] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--text-white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all var(--transition-fast);
}

.btn-add-inline:hover[b-dmmavfo6bd] {
    background: var(--color-primary-dark);
}

/* ============================================
   GRADES GRID
   ============================================ */
.grades-grid[b-dmmavfo6bd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.grade-card[b-dmmavfo6bd] {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.grade-card:hover[b-dmmavfo6bd] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.grade-header[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grade-header h3[b-dmmavfo6bd] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.grade-actions[b-dmmavfo6bd] {
    display: flex;
    gap: 0.25rem;
}

.grade-stats[b-dmmavfo6bd] {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-hover);
    border-bottom: 1px solid var(--border-hover);
}

.stat[b-dmmavfo6bd] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.stat-value[b-dmmavfo6bd] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.stat-label[b-dmmavfo6bd] {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   SECTION VIEW
   ============================================ */
.section-view[b-dmmavfo6bd],
.courses-view[b-dmmavfo6bd] {
    animation: fadeIn-b-dmmavfo6bd 0.3s ease;
}

@keyframes fadeIn-b-dmmavfo6bd {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-header[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.section-title[b-dmmavfo6bd] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title h2[b-dmmavfo6bd] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-dark);
}

.level-badge[b-dmmavfo6bd] {
    padding: 0.3rem 0.75rem;
    background: var(--color-primary);
    color: var(--text-white);
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ============================================
   SECTIONS LIST
   ============================================ */
.sections-list[b-dmmavfo6bd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.section-card[b-dmmavfo6bd] {
    background: var(--bg-white);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: all var(--transition-fast);
}

.section-card:hover[b-dmmavfo6bd] {
    box-shadow: var(--shadow-md);
}

.section-info[b-dmmavfo6bd] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.section-name h3[b-dmmavfo6bd] {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.section-meta[b-dmmavfo6bd] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.meta-item[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-light);
}

.meta-item svg[b-dmmavfo6bd] {
    width: 14px;
    height: 14px;
}

.section-stats[b-dmmavfo6bd] {
    display: flex;
    gap: 1.5rem;
}

.mini-stat[b-dmmavfo6bd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.mini-stat .value[b-dmmavfo6bd] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.mini-stat .label[b-dmmavfo6bd] {
    font-size: 0.7rem;
    color: var(--text-placeholder);
    text-transform: uppercase;
}

.section-actions[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   COURSES TABLE
   ============================================ */
.courses-table[b-dmmavfo6bd] {
    background: var(--bg-white);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.courses-table table[b-dmmavfo6bd] {
    width: 100%;
    border-collapse: collapse;
}

.courses-table thead[b-dmmavfo6bd] {
    background: var(--bg-light);
}

.courses-table th[b-dmmavfo6bd] {
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-light);
}

.courses-table td[b-dmmavfo6bd] {
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-hover);
}

.courses-table tbody tr:hover[b-dmmavfo6bd] {
    background: var(--bg-light);
}

.courses-table tbody tr:last-child td[b-dmmavfo6bd] {
    border-bottom: none;
}

.course-code[b-dmmavfo6bd] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--bg-gray);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--color-primary);
}

.actions-cell[b-dmmavfo6bd] {
    display: flex;
    gap: 0.25rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state[b-dmmavfo6bd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-placeholder);
}

.empty-state svg[b-dmmavfo6bd] {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p[b-dmmavfo6bd] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

/* ============================================
   MODAL SYSTEM
   ============================================ */
.modal-overlay[b-dmmavfo6bd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: 1rem;
}

.modal[b-dmmavfo6bd] {
    /* Override Bootstrap's .modal defaults */
    display: block;
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    z-index: auto;
    overflow: visible;
    /* Estilos propios */
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-dmmavfo6bd 0.3s ease;
}

.modal-lg[b-dmmavfo6bd] {
    max-width: 600px;
}

.modal-xl[b-dmmavfo6bd] {
    max-width: 650px;
}

.modal-scrollable[b-dmmavfo6bd] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.modal-scrollable .modal-body[b-dmmavfo6bd] {
    overflow-y: auto;
}

@keyframes slideUp-b-dmmavfo6bd {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.modal-header h3[b-dmmavfo6bd] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.btn-close[b-dmmavfo6bd] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 1.5rem;
    color: var(--text-placeholder);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-close:hover[b-dmmavfo6bd] {
    background: var(--bg-light);
    color: var(--text-gray);
}

.modal-body[b-dmmavfo6bd] {
    padding: 1.25rem;
}

.modal-footer[b-dmmavfo6bd] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-light);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group[b-dmmavfo6bd] {
    margin-bottom: 1rem;
}

.form-group:last-child[b-dmmavfo6bd] {
    margin-bottom: 0;
}

.form-label[b-dmmavfo6bd] {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

.form-input[b-dmmavfo6bd],
.form-select[b-dmmavfo6bd] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-dark);
    background: var(--bg-white);
    box-sizing: border-box;
    transition: all var(--transition-fast);
}

.form-input:focus[b-dmmavfo6bd],
.form-select:focus[b-dmmavfo6bd] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.form-select[b-dmmavfo6bd] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.5rem;
}

.form-row[b-dmmavfo6bd] {
    display: flex;
    gap: 0.5rem;
}

.form-row-grid[b-dmmavfo6bd] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.form-input-number[b-dmmavfo6bd] {
    width: 100px;
    padding: 0.6rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.checkbox-label[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-dmmavfo6bd] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

/* ============================================
   INLINE FORM (Aulas, Niveles, Catalogo)
   ============================================ */
.inline-form[b-dmmavfo6bd] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.inline-form .form-group[b-dmmavfo6bd] {
    margin-bottom: 0;
}

.inline-form .form-group-flex[b-dmmavfo6bd] {
    flex: 1;
    min-width: 120px;
}

.inline-form .form-group-fixed[b-dmmavfo6bd] {
    width: 100px;
}

.inline-form .form-group-sm[b-dmmavfo6bd] {
    width: 80px;
}

.inline-form .btn-primary[b-dmmavfo6bd],
.inline-form .btn-secondary[b-dmmavfo6bd] {
    height: 38px;
}

/* ============================================
   ITEM LIST (Aulas, Niveles, Catalogo)
   ============================================ */
.item-list[b-dmmavfo6bd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item-row[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.item-row:hover[b-dmmavfo6bd] {
    background: var(--bg-gray);
}

.item-row.disabled[b-dmmavfo6bd] {
    opacity: 0.7;
}

.item-info[b-dmmavfo6bd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.item-name[b-dmmavfo6bd] {
    font-weight: 600;
    color: var(--text-dark);
}

.item-name-primary[b-dmmavfo6bd] {
    font-weight: 600;
    color: var(--color-primary);
    min-width: 50px;
}

.item-detail[b-dmmavfo6bd] {
    font-size: 0.85rem;
    color: var(--text-light);
}

.item-actions[b-dmmavfo6bd] {
    display: flex;
    gap: 0.25rem;
}

/* Badges para items */
.badge-sm[b-dmmavfo6bd] {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success[b-dmmavfo6bd] {
    background: #c6f6d5;
    color: #22543d;
}

.badge-warning[b-dmmavfo6bd] {
    background: #feebc8;
    color: #c05621;
}

.badge-danger[b-dmmavfo6bd] {
    background: var(--bg-error);
    color: var(--color-error-dark);
}

.badge-info[b-dmmavfo6bd] {
    background: var(--bg-gray);
    color: var(--text-gray);
}

.text-empty[b-dmmavfo6bd] {
    text-align: center;
    color: var(--text-light);
    padding: 1rem;
}

/* ============================================
   SPINNER SMALL
   ============================================ */
.spinner-small[b-dmmavfo6bd] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-dmmavfo6bd 0.8s linear infinite;
    display: inline-block;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media (max-width: 992px) {
    .section-info[b-dmmavfo6bd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .section-card[b-dmmavfo6bd] {
        flex-direction: column;
        align-items: stretch;
    }

    .section-actions[b-dmmavfo6bd] {
        justify-content: flex-end;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-hover);
    }

    .form-row-grid[b-dmmavfo6bd] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {
    .academic-page[b-dmmavfo6bd] {
        padding: 0.75rem;
    }

    .academic-header[b-dmmavfo6bd] {
        flex-direction: column;
        align-items: stretch;
    }

    .level-tabs[b-dmmavfo6bd] {
        justify-content: center;
    }

    .header-actions[b-dmmavfo6bd] {
        justify-content: center;
    }

    .grades-grid[b-dmmavfo6bd] {
        grid-template-columns: 1fr;
    }

    .section-header[b-dmmavfo6bd] {
        flex-direction: column;
        align-items: stretch;
    }

    .section-title[b-dmmavfo6bd] {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }

    .courses-table[b-dmmavfo6bd] {
        overflow-x: auto;
    }

    .courses-table table[b-dmmavfo6bd] {
        min-width: 500px;
    }

    .modal[b-dmmavfo6bd] {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    .inline-form[b-dmmavfo6bd] {
        flex-direction: column;
    }

    .inline-form .form-group-flex[b-dmmavfo6bd],
    .inline-form .form-group-fixed[b-dmmavfo6bd],
    .inline-form .form-group-sm[b-dmmavfo6bd],
    .inline-form .btn-primary[b-dmmavfo6bd],
    .inline-form .btn-secondary[b-dmmavfo6bd] {
        width: 100%;
    }
}
/* /Pages/Private/AcuerdosPago.razor.rz.scp.css */
/* ============================================
   ACUERDOS DE PAGO - I.E.P. Javier Perez de Cuellar
   Estilos de la pagina de acuerdos de pago
   ============================================ */

/* ============================================
   STATS GRID
   ============================================ */
.acuerdos-stats-grid[b-y9ct49bbaq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.acuerdos-stat-card[b-y9ct49bbaq] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-left: 4px solid;
}

.acuerdos-stat-total[b-y9ct49bbaq] { border-left-color: var(--color-primary); }
.acuerdos-stat-amount[b-y9ct49bbaq] { border-left-color: var(--color-highlight); }
.acuerdos-stat-pending[b-y9ct49bbaq] { border-left-color: var(--color-error); }
.acuerdos-stat-average[b-y9ct49bbaq] { border-left-color: var(--color-success); }

.acuerdos-stat-icon[b-y9ct49bbaq] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acuerdos-stat-total .acuerdos-stat-icon[b-y9ct49bbaq] { background: var(--bg-primary-subtle); color: var(--color-primary); }
.acuerdos-stat-amount .acuerdos-stat-icon[b-y9ct49bbaq] { background: var(--bg-highlight-subtle); color: var(--color-highlight); }
.acuerdos-stat-pending .acuerdos-stat-icon[b-y9ct49bbaq] { background: var(--bg-error-subtle); color: var(--color-error); }
.acuerdos-stat-average .acuerdos-stat-icon[b-y9ct49bbaq] { background: var(--bg-success-subtle); color: var(--color-success); }

.acuerdos-stat-info[b-y9ct49bbaq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.acuerdos-stat-value[b-y9ct49bbaq] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acuerdos-stat-label[b-y9ct49bbaq] {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.15rem;
}

/* ============================================
   BUTTON PRIMARY
   ============================================ */
.acuerdos-btn-primary[b-y9ct49bbaq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    background: var(--color-primary);
    color: white;
}

.acuerdos-btn-primary:hover:not(:disabled)[b-y9ct49bbaq] {
    background: var(--color-primary-dark);
}

.acuerdos-btn-primary:disabled[b-y9ct49bbaq] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   FILTERS
   ============================================ */
.acuerdos-filters[b-y9ct49bbaq] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.acuerdos-search-box[b-y9ct49bbaq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.acuerdos-search-box svg[b-y9ct49bbaq] {
    color: #9ca3af;
    flex-shrink: 0;
}

.acuerdos-search-input[b-y9ct49bbaq] {
    border: none;
    background: transparent;
    font-size: 0.9rem;
    width: 100%;
    color: #374151;
}

.acuerdos-search-input:focus[b-y9ct49bbaq] {
    outline: none;
}

.acuerdos-filter-group[b-y9ct49bbaq] {
    min-width: 160px;
}

.acuerdos-filter-group label[b-y9ct49bbaq] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.acuerdos-filter-select[b-y9ct49bbaq] {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.acuerdos-filter-select:focus[b-y9ct49bbaq] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   TABLE
   ============================================ */
.acuerdos-table-container[b-y9ct49bbaq] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.acuerdos-table-wrap[b-y9ct49bbaq] {
    overflow-x: auto;
}

.acuerdos-table[b-y9ct49bbaq] {
    width: 100%;
    border-collapse: collapse;
}

.acuerdos-table th[b-y9ct49bbaq],
.acuerdos-table td[b-y9ct49bbaq] {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.acuerdos-table th[b-y9ct49bbaq] {
    background: #f9fafb;
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.acuerdos-table tbody tr[b-y9ct49bbaq] {
    transition: background 0.2s ease;
}

.acuerdos-table tbody tr:hover[b-y9ct49bbaq] {
    background: #f9fafb;
}

/* ============================================
   TABLE CELLS
   ============================================ */
.acuerdos-persona[b-y9ct49bbaq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.acuerdos-avatar[b-y9ct49bbaq] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-dark);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.acuerdos-persona-info[b-y9ct49bbaq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.acuerdos-persona-name[b-y9ct49bbaq] {
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
}

.acuerdos-amount[b-y9ct49bbaq] {
    font-weight: 600;
    font-family: monospace;
    font-size: 0.9rem;
    color: #1f2937;
    white-space: nowrap;
}

.acuerdos-amount-pending[b-y9ct49bbaq] {
    color: var(--color-error);
}

.acuerdos-cuotas[b-y9ct49bbaq] {
    font-family: monospace;
    background: #f3f4f6;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
}

/* ============================================
   PROGRESS BAR
   ============================================ */
.acuerdos-progress-container[b-y9ct49bbaq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
}

.acuerdos-progress-bar[b-y9ct49bbaq] {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.acuerdos-progress-bar-lg[b-y9ct49bbaq] {
    height: 12px;
    border-radius: 6px;
}

.acuerdos-progress-fill[b-y9ct49bbaq] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.acuerdos-progress-fill.progress-low[b-y9ct49bbaq] {
    background: var(--color-error);
}

.acuerdos-progress-fill.progress-medium[b-y9ct49bbaq] {
    background: var(--color-highlight);
}

.acuerdos-progress-fill.progress-good[b-y9ct49bbaq] {
    background: var(--color-primary);
}

.acuerdos-progress-fill.progress-complete[b-y9ct49bbaq] {
    background: var(--color-success);
}

.acuerdos-progress-text[b-y9ct49bbaq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    min-width: 32px;
    text-align: right;
}

.acuerdos-progress-legend[b-y9ct49bbaq] {
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* ============================================
   BADGES
   ============================================ */
.acuerdos-badge[b-y9ct49bbaq] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.acuerdos-badge-active[b-y9ct49bbaq] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.acuerdos-badge-finished[b-y9ct49bbaq] {
    background: var(--bg-gray-subtle);
    color: #6b7280;
}

/* ============================================
   TABLE ACTIONS
   ============================================ */
.acuerdos-actions[b-y9ct49bbaq] {
    display: flex;
    gap: 0.35rem;
}

.acuerdos-btn-icon[b-y9ct49bbaq] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: white;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.acuerdos-btn-icon:hover[b-y9ct49bbaq] {
    background: #f3f4f6;
}

.acuerdos-btn-view:hover[b-y9ct49bbaq] {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.acuerdos-btn-edit:hover[b-y9ct49bbaq] {
    color: var(--color-highlight);
    border-color: var(--color-highlight);
}

.acuerdos-btn-delete:hover[b-y9ct49bbaq] {
    color: var(--color-error);
    border-color: var(--color-error);
    background: #fef2f2;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.acuerdos-empty[b-y9ct49bbaq] {
    padding: 0 !important;
}

.acuerdos-empty-state[b-y9ct49bbaq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.acuerdos-empty-state svg[b-y9ct49bbaq] {
    color: var(--color-primary);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.acuerdos-empty-state h3[b-y9ct49bbaq] {
    font-size: 1.1rem;
    color: var(--color-primary-dark);
    margin: 0 0 0.5rem 0;
}

.acuerdos-empty-state p[b-y9ct49bbaq] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

/* ============================================
   LOADING
   ============================================ */
.acuerdos-loading[b-y9ct49bbaq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.acuerdos-loading p[b-y9ct49bbaq] {
    color: #6b7280;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.acuerdos-spinner[b-y9ct49bbaq] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: acuerdos-spin-b-y9ct49bbaq 0.8s linear infinite;
}

@keyframes acuerdos-spin-b-y9ct49bbaq {
    to { transform: rotate(360deg); }
}

/* ============================================
   MODALS
   ============================================ */
.modal-overlay[b-y9ct49bbaq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-panel[b-y9ct49bbaq] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-panel.modal-sm[b-y9ct49bbaq] {
    max-width: 420px;
}

.modal-panel.modal-lg[b-y9ct49bbaq] {
    max-width: 700px;
}

.modal-header[b-y9ct49bbaq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.modal-header h2[b-y9ct49bbaq] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.modal-header-primary[b-y9ct49bbaq] {
    background: var(--color-primary);
}

.modal-header-primary h2[b-y9ct49bbaq] {
    color: white;
}

.modal-header-danger[b-y9ct49bbaq] {
    background: var(--color-error);
}

.modal-header-danger h2[b-y9ct49bbaq] {
    color: white;
}

.modal-close-btn[b-y9ct49bbaq] {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-close-btn:hover[b-y9ct49bbaq] {
    background: rgba(255, 255, 255, 0.35);
}

.modal-header:not(.modal-header-primary):not(.modal-header-danger) .modal-close-btn[b-y9ct49bbaq] {
    background: #f3f4f6;
    color: #6b7280;
}

.modal-body[b-y9ct49bbaq] {
    padding: 1.5rem;
}

.modal-footer[b-y9ct49bbaq] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-row[b-y9ct49bbaq] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group[b-y9ct49bbaq] {
    flex: 1;
    margin-bottom: 1rem;
}

.form-group label[b-y9ct49bbaq] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.35rem;
}

.form-group input[b-y9ct49bbaq],
.form-group select[b-y9ct49bbaq] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
    box-sizing: border-box;
    color: #374151;
}

.form-group input:focus[b-y9ct49bbaq],
.form-group select:focus[b-y9ct49bbaq] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.form-group input:disabled[b-y9ct49bbaq],
.form-group select:disabled[b-y9ct49bbaq] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

.acuerdos-textarea[b-y9ct49bbaq] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    color: #374151;
    box-sizing: border-box;
}

.acuerdos-textarea:focus[b-y9ct49bbaq] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.acuerdos-form-preview[b-y9ct49bbaq] {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.acuerdos-preview-item[b-y9ct49bbaq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.acuerdos-preview-label[b-y9ct49bbaq] {
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 500;
}

.acuerdos-preview-value[b-y9ct49bbaq] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    font-family: monospace;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-action[b-y9ct49bbaq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    width: auto;
    height: auto;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-action:disabled[b-y9ct49bbaq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-danger[b-y9ct49bbaq] {
    background: var(--color-error);
    color: white;
}

.btn-danger:hover:not(:disabled)[b-y9ct49bbaq] {
    background: var(--color-error-dark);
}

.btn-cancel[b-y9ct49bbaq] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-y9ct49bbaq] {
    background: #f3f4f6;
}

.confirm-text[b-y9ct49bbaq] {
    font-size: 0.95rem;
    color: #374151;
    text-align: center;
    margin: 0 0 0.5rem 0;
}

.confirm-subtext[b-y9ct49bbaq] {
    font-size: 0.85rem;
    color: #9ca3af;
    text-align: center;
    margin: 0;
}

/* ============================================
   DELETE CONTENT
   ============================================ */
.acuerdos-delete-content[b-y9ct49bbaq] {
    text-align: center;
    padding: 0.5rem 0;
}

.acuerdos-delete-icon[b-y9ct49bbaq] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--color-error);
}

/* ============================================
   DETAIL MODAL
   ============================================ */
.acuerdos-detail-header[b-y9ct49bbaq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.acuerdos-detail-avatar[b-y9ct49bbaq] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-primary-dark);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.acuerdos-detail-info[b-y9ct49bbaq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.acuerdos-detail-info h3[b-y9ct49bbaq] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.acuerdos-detail-grid[b-y9ct49bbaq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.acuerdos-detail-item[b-y9ct49bbaq] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.acuerdos-detail-label[b-y9ct49bbaq] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.acuerdos-detail-value[b-y9ct49bbaq] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.acuerdos-detail-description[b-y9ct49bbaq] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

.acuerdos-detail-description p[b-y9ct49bbaq] {
    margin: 0.35rem 0 0 0;
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
}

/* ============================================
   INSTALLMENT TRACKING
   ============================================ */
.acuerdos-installment-section[b-y9ct49bbaq] {
    border-top: 1px solid #f3f4f6;
    padding-top: 1.25rem;
}

.acuerdos-installment-section h4[b-y9ct49bbaq] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.acuerdos-installment-summary[b-y9ct49bbaq] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.acuerdos-installment-stat[b-y9ct49bbaq] {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.acuerdos-installment-stat.paid[b-y9ct49bbaq] {
    background: var(--bg-success-subtle);
}

.acuerdos-installment-stat.remaining[b-y9ct49bbaq] {
    background: var(--bg-error-subtle);
}

.acuerdos-installment-stat.total[b-y9ct49bbaq] {
    background: var(--bg-primary-subtle);
}

.acuerdos-installment-number[b-y9ct49bbaq] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.acuerdos-installment-stat.paid .acuerdos-installment-number[b-y9ct49bbaq] { color: var(--color-success); }
.acuerdos-installment-stat.remaining .acuerdos-installment-number[b-y9ct49bbaq] { color: var(--color-error); }
.acuerdos-installment-stat.total .acuerdos-installment-number[b-y9ct49bbaq] { color: var(--color-primary); }

.acuerdos-installment-label[b-y9ct49bbaq] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.acuerdos-installment-grid[b-y9ct49bbaq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.acuerdos-installment-dot[b-y9ct49bbaq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: default;
    transition: transform 0.2s;
}

.acuerdos-installment-dot:hover[b-y9ct49bbaq] {
    transform: scale(1.15);
}

.acuerdos-installment-dot.paid[b-y9ct49bbaq] {
    background: var(--color-success);
    color: white;
}

.acuerdos-installment-dot.pending[b-y9ct49bbaq] {
    background: #e5e7eb;
    color: #6b7280;
}

/* ============================================
   RESPONSIVE - 1024px
   ============================================ */
@media (max-width: 1024px) {
    .acuerdos-stats-grid[b-y9ct49bbaq] {
        grid-template-columns: repeat(2, 1fr);
    }

    .acuerdos-detail-grid[b-y9ct49bbaq] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   RESPONSIVE - 768px
   ============================================ */
@media (max-width: 768px) {
    .acuerdos-stats-grid[b-y9ct49bbaq] {
        grid-template-columns: 1fr;
    }

    .acuerdos-filters[b-y9ct49bbaq] {
        flex-direction: column;
    }

    .acuerdos-search-box[b-y9ct49bbaq] {
        min-width: auto;
    }

    .acuerdos-filter-group[b-y9ct49bbaq] {
        min-width: auto;
    }

    .acuerdos-table-container[b-y9ct49bbaq] {
        overflow-x: auto;
    }

    .form-row[b-y9ct49bbaq] {
        flex-direction: column;
    }

    .acuerdos-detail-grid[b-y9ct49bbaq] {
        grid-template-columns: 1fr;
    }

    .acuerdos-installment-summary[b-y9ct49bbaq] {
        flex-direction: column;
    }

    .modal-panel.modal-lg[b-y9ct49bbaq] {
        max-width: 100%;
    }

    .acuerdos-installment-dot[b-y9ct49bbaq] {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }
}

/* ============================================
   DOWNLOAD & PAY BUTTONS
   ============================================ */
.acuerdos-btn-download[b-y9ct49bbaq] {
    color: #6366f1;
}

.acuerdos-btn-download:hover[b-y9ct49bbaq] {
    background: #eef2ff;
    color: #4f46e5;
}

.acuerdos-btn-pay[b-y9ct49bbaq] {
    color: #059669;
}

.acuerdos-btn-pay:hover[b-y9ct49bbaq] {
    background: #ecfdf5;
    color: #047857;
}

.acuerdos-btn-secondary[b-y9ct49bbaq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f1f5f9;
    color: var(--color-primary);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.acuerdos-btn-secondary:hover[b-y9ct49bbaq] {
    background: #e2e8f0;
}

/* ============================================
   PAY MODAL
   ============================================ */
.acuerdos-pay-content[b-y9ct49bbaq] {
    text-align: center;
    padding: 1rem 0;
}

.acuerdos-pay-icon[b-y9ct49bbaq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #ecfdf5;
    border-radius: 50%;
    color: #059669;
    margin-bottom: 1rem;
}

.acuerdos-pay-summary[b-y9ct49bbaq] {
    background: #f8fafc;
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
}

.acuerdos-pay-row[b-y9ct49bbaq] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: #374151;
}

.acuerdos-pay-row + .acuerdos-pay-row[b-y9ct49bbaq] {
    border-top: 1px solid #e5e7eb;
}
/* /Pages/Private/AnoAcademico.razor.rz.scp.css */
/* ============================================
   ANO ACADEMICO - Gestion de Periodos
   CSS Isolation — estilos especificos
   ============================================ */

/* Filtro de ano */
.year-filter[b-7z8br70q4a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.year-filter label[b-7z8br70q4a] {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.year-filter input[type="number"][b-7z8br70q4a] {
    width: 120px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
}

.year-filter .year-nav-btn[b-7z8br70q4a] {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.year-filter .year-nav-btn:hover[b-7z8br70q4a] {
    background: #f0f7ff;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Resumen de periodos */
.period-summary[b-7z8br70q4a] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.summary-card[b-7z8br70q4a] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 160px;
}

.summary-card .summary-icon[b-7z8br70q4a] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-card .summary-icon.total[b-7z8br70q4a] {
    background: #e0edfa;
    color: var(--color-primary);
}

.summary-card .summary-icon.active[b-7z8br70q4a] {
    background: #dcfce7;
    color: #16a34a;
}

.summary-card .summary-icon.inactive[b-7z8br70q4a] {
    background: #f1f5f9;
    color: #94a3b8;
}

.summary-card .summary-info[b-7z8br70q4a] {
    display: flex;
    flex-direction: column;
}

.summary-card .summary-value[b-7z8br70q4a] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.summary-card .summary-label[b-7z8br70q4a] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Botones de accion en tabla */
.actions-cell[b-7z8br70q4a] {
    display: flex;
    gap: 0.35rem;
}

.btn-icon-action[b-7z8br70q4a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-action.btn-edit[b-7z8br70q4a] {
    background: var(--bg-sky);
    color: var(--color-info);
}

.btn-icon-action.btn-edit:hover[b-7z8br70q4a] {
    background: #dbeafe;
    color: #2563eb;
}

.btn-icon-action.btn-toggle-active[b-7z8br70q4a] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.btn-icon-action.btn-toggle-active:hover[b-7z8br70q4a] {
    background: #bbf7d0;
    color: #15803d;
}

.btn-icon-action.btn-toggle-inactive[b-7z8br70q4a] {
    background: var(--bg-gray-subtle);
    color: var(--text-muted);
}

.btn-icon-action.btn-toggle-inactive:hover[b-7z8br70q4a] {
    background: #e2e8f0;
    color: #64748b;
}

.btn-icon-action.btn-delete[b-7z8br70q4a] {
    background: var(--bg-error-subtle);
    color: var(--color-error);
}

.btn-icon-action.btn-delete:hover[b-7z8br70q4a] {
    background: #fee2e2;
    color: var(--color-error-dark);
}

/* Advertencia de eliminacion */
.delete-warning[b-7z8br70q4a] {
    text-align: center;
    padding: 0.5rem 0;
}

.delete-warning svg[b-7z8br70q4a] {
    color: #f59e0b;
    margin-bottom: 0.75rem;
}

.delete-warning p[b-7z8br70q4a] {
    margin: 0.5rem 0;
}

.delete-warning .text-muted[b-7z8br70q4a] {
    font-size: 0.85rem;
    color: #6b7280;
}

@media (max-width: 768px) {
    .year-filter[b-7z8br70q4a] {
        justify-content: center;
    }

    .period-summary[b-7z8br70q4a] {
        justify-content: center;
    }

    .summary-card[b-7z8br70q4a] {
        min-width: 140px;
        flex: 1;
    }
}
/* /Pages/Private/Asistencia.razor.rz.scp.css */
/* ============================================
   ASISTENCIA PAGE
   ============================================ */

/* ============================================
   BOTON PANEL RELOJ BIOMETRICO
   ============================================ */
.btn-clock-panel[b-vhhc5wrclx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-clock-panel:hover[b-vhhc5wrclx] {
    background: var(--color-primary-dark);
    color: white;
    text-decoration: none;
}

.btn-clock-panel svg[b-vhhc5wrclx] {
    width: 18px;
    height: 18px;
}

/* ============================================
   TABS
   ============================================ */
.tabs-container[b-vhhc5wrclx] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: #f7fafc;
    padding: 0.5rem;
    border-radius: 12px;
}

.tab[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: #718096;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab:hover[b-vhhc5wrclx] {
    background: #edf2f7;
    color: #4a5568;
}

.tab.active[b-vhhc5wrclx] {
    background: white;
    color: #1a365d;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.tab svg[b-vhhc5wrclx] {
    width: 20px;
    height: 20px;
}

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid[b-vhhc5wrclx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-vhhc5wrclx] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid;
}

.stat-card.total[b-vhhc5wrclx] { border-left-color: #4299e1; }
.stat-card.presente[b-vhhc5wrclx] { border-left-color: #48bb78; }
.stat-card.tarde[b-vhhc5wrclx] { border-left-color: #ed8936; }
.stat-card.falta[b-vhhc5wrclx] { border-left-color: #f56565; }

.stat-icon[b-vhhc5wrclx] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card.total .stat-icon[b-vhhc5wrclx] { background: #ebf8ff; color: #4299e1; }
.stat-card.presente .stat-icon[b-vhhc5wrclx] { background: #f0fff4; color: #48bb78; }
.stat-card.tarde .stat-icon[b-vhhc5wrclx] { background: #fffaf0; color: #ed8936; }
.stat-card.falta .stat-icon[b-vhhc5wrclx] { background: #fff5f5; color: #f56565; }

.stat-icon svg[b-vhhc5wrclx] {
    width: 24px;
    height: 24px;
}

.stat-info[b-vhhc5wrclx] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-vhhc5wrclx] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a365d;
}

.stat-label[b-vhhc5wrclx] {
    font-size: 0.85rem;
    color: #718096;
}

/* ============================================
   FILTERS
   ============================================ */
.filters-container[b-vhhc5wrclx] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.filters-row[b-vhhc5wrclx] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-group[b-vhhc5wrclx] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 150px;
}

.filter-group label[b-vhhc5wrclx] {
    font-size: 0.85rem;
    color: #4a5568;
    font-weight: 500;
}

.form-select[b-vhhc5wrclx], .form-input[b-vhhc5wrclx] {
    padding: 0.6rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #2d3748;
    background: white;
    transition: border-color 0.2s ease;
}

.form-select:focus[b-vhhc5wrclx], .form-input:focus[b-vhhc5wrclx] {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.search-row[b-vhhc5wrclx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.search-box[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex: 1;
    max-width: 400px;
}

.search-box svg[b-vhhc5wrclx] {
    width: 20px;
    height: 20px;
    color: #a0aec0;
}

.search-input[b-vhhc5wrclx] {
    border: none;
    background: transparent;
    flex: 1;
    font-size: 0.95rem;
    color: #2d3748;
    outline: none;
}

.bulk-actions[b-vhhc5wrclx] {
    display: flex;
    gap: 0.5rem;
}

.btn-bulk[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-bulk.presente[b-vhhc5wrclx] {
    background: #f0fff4;
    color: #276749;
}

.btn-bulk.presente:hover[b-vhhc5wrclx] {
    background: #c6f6d5;
}

.btn-bulk svg[b-vhhc5wrclx] {
    width: 16px;
    height: 16px;
}

/* ============================================
   TABLE
   ============================================ */
.table-container[b-vhhc5wrclx] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.attendance-table[b-vhhc5wrclx] {
    width: 100%;
    border-collapse: collapse;
}

.attendance-table th[b-vhhc5wrclx] {
    background: #f7fafc;
    padding: 1rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
}

.attendance-table td[b-vhhc5wrclx] {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #edf2f7;
    font-size: 0.95rem;
    color: #2d3748;
}

.col-id[b-vhhc5wrclx] { width: 50px; text-align: center; }
.col-name[b-vhhc5wrclx] { min-width: 200px; }
.col-grado[b-vhhc5wrclx] { width: 160px; }
.col-area[b-vhhc5wrclx] { width: 160px; }
.col-status[b-vhhc5wrclx] { width: 380px; }
.col-obs[b-vhhc5wrclx] { min-width: 180px; }

.person-info[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar[b-vhhc5wrclx] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-card-purple);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.avatar.small[b-vhhc5wrclx] {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
}

.status-buttons[b-vhhc5wrclx] {
    display: flex;
    gap: 0.35rem;
}

.status-btn[b-vhhc5wrclx] {
    padding: 0.45rem 0.75rem;
    border: 2px solid transparent;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-btn.presente[b-vhhc5wrclx] { background: #f0fff4; color: #276749; border-color: #c6f6d5; }
.status-btn.presente.active[b-vhhc5wrclx] { background: #48bb78; color: white; border-color: #48bb78; }
.status-btn.presente:hover:not(.active)[b-vhhc5wrclx] { background: #c6f6d5; }

.status-btn.tarde[b-vhhc5wrclx] { background: #fffaf0; color: #c05621; border-color: #feebc8; }
.status-btn.tarde.active[b-vhhc5wrclx] { background: #ed8936; color: white; border-color: #ed8936; }
.status-btn.tarde:hover:not(.active)[b-vhhc5wrclx] { background: #feebc8; }

.status-btn.falta[b-vhhc5wrclx] { background: #fff5f5; color: #c53030; border-color: #fed7d7; }
.status-btn.falta.active[b-vhhc5wrclx] { background: #f56565; color: white; border-color: #f56565; }
.status-btn.falta:hover:not(.active)[b-vhhc5wrclx] { background: #fed7d7; }

.status-btn.justificado[b-vhhc5wrclx] { background: #faf5ff; color: #6b46c1; border-color: #e9d8fd; }
.status-btn.justificado.active[b-vhhc5wrclx] { background: #805ad5; color: white; border-color: #805ad5; }
.status-btn.justificado:hover:not(.active)[b-vhhc5wrclx] { background: #e9d8fd; }

.obs-input[b-vhhc5wrclx] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #2d3748;
    background: #f7fafc;
    transition: all 0.2s ease;
}

.obs-input:focus[b-vhhc5wrclx] {
    outline: none;
    border-color: #4299e1;
    background: white;
}

.row-presente[b-vhhc5wrclx] { background: #f0fff4; }
.row-tarde[b-vhhc5wrclx] { background: #fffaf0; }
.row-falta[b-vhhc5wrclx] { background: #fff5f5; }
.row-justificado[b-vhhc5wrclx] { background: #faf5ff; }

.btn-delete-record[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-record:hover[b-vhhc5wrclx] {
    background: #fef2f2;
    color: var(--color-error);
}

.col-actions[b-vhhc5wrclx] {
    text-align: center;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination-container[b-vhhc5wrclx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e2e8f0;
}

.pagination-info[b-vhhc5wrclx] {
    font-size: 0.85rem;
    color: #718096;
}

.pagination-controls[b-vhhc5wrclx] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.page-btn[b-vhhc5wrclx] {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #4a5568;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-vhhc5wrclx] {
    background: #edf2f7;
}

.page-btn:disabled[b-vhhc5wrclx] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-btn svg[b-vhhc5wrclx] {
    width: 16px;
    height: 16px;
}

.page-num[b-vhhc5wrclx] {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a5568;
    transition: all 0.2s ease;
}

.page-num:hover[b-vhhc5wrclx] {
    background: #edf2f7;
}

.page-num.active[b-vhhc5wrclx] {
    background: #4299e1;
    color: white;
    border-color: #4299e1;
}

.page-size-selector[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #718096;
}

.page-size-selector .form-select[b-vhhc5wrclx] {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #4299e1;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-vhhc5wrclx] {
    background: #3182ce;
}

.btn-primary:disabled[b-vhhc5wrclx] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-vhhc5wrclx] {
    background: #f7fafc;
    border-color: #cbd5e0;
}

.btn-secondary svg[b-vhhc5wrclx], .btn-primary svg[b-vhhc5wrclx] {
    width: 18px;
    height: 18px;
}

.btn-danger[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    color: #e53e3e;
    border: 1px solid #feb2b2;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover[b-vhhc5wrclx] {
    background: #fff5f5;
}

.btn-danger svg[b-vhhc5wrclx] {
    width: 18px;
    height: 18px;
}

.action-buttons[b-vhhc5wrclx] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state[b-vhhc5wrclx] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-icon[b-vhhc5wrclx] {
    margin-bottom: 1rem;
}

.empty-icon svg[b-vhhc5wrclx] {
    width: 64px;
    height: 64px;
    color: #cbd5e0;
}

.empty-state h3[b-vhhc5wrclx] {
    color: #4a5568;
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.empty-state p[b-vhhc5wrclx] {
    color: #a0aec0;
    margin: 0;
    font-size: 0.95rem;
}

/* ============================================
   LOADING
   ============================================ */
.loading-container[b-vhhc5wrclx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.spinner[b-vhhc5wrclx] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #4299e1;
    border-radius: 50%;
    animation: spin-b-vhhc5wrclx 0.8s linear infinite;
}

@keyframes spin-b-vhhc5wrclx {
    to { transform: rotate(360deg); }
}

.loading-container p[b-vhhc5wrclx] {
    color: #718096;
    font-size: 0.95rem;
}

/* ============================================
   RESUMEN TAB
   ============================================ */
.resumen-container[b-vhhc5wrclx] {
    padding: 0;
}

.resumen-filters[b-vhhc5wrclx] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    background: white;
    padding: 1.25rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.summary-bars[b-vhhc5wrclx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bar-item[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bar-label[b-vhhc5wrclx] {
    width: 85px;
    font-size: 0.8rem;
    color: #4a5568;
}

.bar-track[b-vhhc5wrclx] {
    flex: 1;
    height: 7px;
    background: #edf2f7;
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill[b-vhhc5wrclx] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bar-fill.presente[b-vhhc5wrclx] { background: #48bb78; }
.bar-fill.tarde[b-vhhc5wrclx] { background: #ed8936; }
.bar-fill.falta[b-vhhc5wrclx] { background: #f56565; }
.bar-fill.justificado[b-vhhc5wrclx] { background: #805ad5; }

.bar-value[b-vhhc5wrclx] {
    width: 30px;
    text-align: right;
    font-weight: 600;
    font-size: 0.8rem;
    color: #2d3748;
}

/* ============================================
   RESUMEN - TODAY HEADER
   ============================================ */
.resumen-today-header[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.65rem 1.25rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.resumen-today-date[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a365d;
    text-transform: capitalize;
}

.resumen-today-date svg[b-vhhc5wrclx] {
    color: var(--color-primary);
}

/* Date navigation */
.resumen-date-nav[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.date-nav-btn[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.date-nav-btn:hover:not(:disabled)[b-vhhc5wrclx] {
    background: #f1f5f9;
    color: #1a365d;
    border-color: #cbd5e1;
}

.date-nav-btn:disabled[b-vhhc5wrclx],
.date-nav-btn.date-nav-disabled[b-vhhc5wrclx] {
    opacity: 0.3;
    cursor: default;
}

.date-nav-today-badge[b-vhhc5wrclx] {
    padding: 0.2rem 0.6rem;
    margin-left: 0.4rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.date-nav-today-badge:hover[b-vhhc5wrclx] {
    background: var(--color-primary-dark);
}

.btn-refresh-resumen[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f7fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh-resumen:hover[b-vhhc5wrclx] {
    background: #edf2f7;
    color: #1a365d;
}

/* ============================================
   RESUMEN - STAT CARDS (compactas)
   ============================================ */
.resumen-stat-cards[b-vhhc5wrclx] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.resumen-stat[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border-left: 3px solid transparent;
    flex: 1;
    min-width: 120px;
}

.resumen-stat.presente[b-vhhc5wrclx] { border-left-color: #48bb78; }
.resumen-stat.tarde[b-vhhc5wrclx] { border-left-color: #ed8936; }
.resumen-stat.falta[b-vhhc5wrclx] { border-left-color: #f56565; }
.resumen-stat.justificado[b-vhhc5wrclx] { border-left-color: #805ad5; }
.resumen-stat.asistencia-pct[b-vhhc5wrclx] { border-left-color: var(--color-primary, #0055A3); }

.resumen-stat-number[b-vhhc5wrclx] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a365d;
    line-height: 1;
}

.resumen-stat-label[b-vhhc5wrclx] {
    font-size: 0.75rem;
    color: #718096;
}

.resumen-bars-card[b-vhhc5wrclx] {
    background: white;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 1rem;
}

/* ============================================
   RESUMEN - ATTENDEES LIST
   ============================================ */
.resumen-attendees-section[b-vhhc5wrclx] {
    background: white;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-top: 0.75rem;
}

.resumen-attendees-header[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.resumen-attendees-header h3[b-vhhc5wrclx] {
    font-size: 1rem;
    color: #1a365d;
    margin: 0;
}

.resumen-attendees-filters[b-vhhc5wrclx] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.form-select.compact[b-vhhc5wrclx],
.search-input.compact[b-vhhc5wrclx] {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    height: auto;
}

.search-input.compact[b-vhhc5wrclx] {
    width: 200px;
}

.resumen-attendees-table[b-vhhc5wrclx] {
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
}

.resumen-empty[b-vhhc5wrclx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #a0aec0;
    gap: 0.75rem;
}

.resumen-empty p[b-vhhc5wrclx] {
    font-size: 0.95rem;
    margin: 0;
}

.resumen-empty-sub[b-vhhc5wrclx] {
    font-size: 0.8rem;
    color: #cbd5e0;
}

/* Attendee name cell */
.attendee-name-cell[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.attendee-avatar[b-vhhc5wrclx] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    color: white;
    flex-shrink: 0;
}

.attendee-avatar.tipo-alumno[b-vhhc5wrclx] { background: #3182ce; }
.attendee-avatar.tipo-docente[b-vhhc5wrclx] { background: #38a169; }
.attendee-avatar.tipo-colaborador[b-vhhc5wrclx] { background: #d69e2e; }

.attendee-info[b-vhhc5wrclx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.attendee-name[b-vhhc5wrclx] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attendee-detail[b-vhhc5wrclx] {
    font-size: 0.75rem;
    color: #718096;
}

/* Tipo badge */
.tipo-badge[b-vhhc5wrclx] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tipo-badge.tipo-alumno[b-vhhc5wrclx] {
    background: #dbeafe;
    color: #1d4ed8;
}

.tipo-badge.tipo-docente[b-vhhc5wrclx] {
    background: #d1fae5;
    color: #059669;
}

.tipo-badge.tipo-colaborador[b-vhhc5wrclx] {
    background: #fef3c7;
    color: #d97706;
}

/* Estado badge */
.estado-badge[b-vhhc5wrclx] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.estado-badge.presente[b-vhhc5wrclx] { background: #f0fff4; color: #276749; }
.estado-badge.tarde[b-vhhc5wrclx] { background: #fffaf0; color: #c05621; }
.estado-badge.falta[b-vhhc5wrclx] { background: #fff5f5; color: #c53030; }
.estado-badge.justificado[b-vhhc5wrclx] { background: #faf5ff; color: #6b46c1; }
.estado-badge.sin-registro[b-vhhc5wrclx] { background: #f7fafc; color: #a0aec0; font-weight: 400; }

/* Observacion read-only */
.obs-readonly[b-vhhc5wrclx] {
    font-size: 0.85rem;
    color: #718096;
}

/* Row highlights */
.row-falta[b-vhhc5wrclx] { background: #fff5f5 !important; }
.row-tarde[b-vhhc5wrclx] { background: #fffaf0 !important; }

/* Col hora */
.col-hora[b-vhhc5wrclx] {
    width: 70px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #4a5568;
}

.col-tipo[b-vhhc5wrclx] {
    width: 110px;
}

.col-grado-sec[b-vhhc5wrclx] {
    width: 150px;
}

.grado-text[b-vhhc5wrclx] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #2d3748;
}

.seccion-text[b-vhhc5wrclx] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.5rem;
    background: #edf2f7;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5568;
}

.no-grado[b-vhhc5wrclx] {
    color: #cbd5e0;
}

.col-estado[b-vhhc5wrclx] {
    width: 100px;
}

@media (max-width: 768px) {
    .resumen-stat-cards[b-vhhc5wrclx] {
        gap: 0.5rem;
    }

    .resumen-stat[b-vhhc5wrclx] {
        min-width: 90px;
        padding: 0.4rem 0.75rem;
    }

    .resumen-today-header[b-vhhc5wrclx] {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .resumen-today-date span[b-vhhc5wrclx] {
        font-size: 0.9rem;
    }

    .resumen-attendees-header[b-vhhc5wrclx] {
        flex-direction: column;
        align-items: flex-start;
    }

    .resumen-attendees-filters[b-vhhc5wrclx] {
        width: 100%;
    }

    .search-input.compact[b-vhhc5wrclx] {
        flex: 1;
        width: auto;
    }
}

.top-lists[b-vhhc5wrclx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.top-list[b-vhhc5wrclx] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.top-list.warning[b-vhhc5wrclx] {
    border-left: 4px solid #f56565;
}

.top-list h3[b-vhhc5wrclx] {
    font-size: 1rem;
    color: #1a365d;
    margin: 0 0 1rem 0;
}

.list-items[b-vhhc5wrclx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.list-item[b-vhhc5wrclx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f7fafc;
    border-radius: 8px;
}

.rank[b-vhhc5wrclx] {
    width: 28px;
    height: 28px;
    background: #4299e1;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.rank.warning[b-vhhc5wrclx] {
    background: #f56565;
}

.list-item .person-info[b-vhhc5wrclx] {
    flex: 1;
}

.percentage[b-vhhc5wrclx] {
    font-weight: 700;
    font-size: 0.9rem;
}

.percentage.good[b-vhhc5wrclx] { color: #48bb78; }
.percentage.bad[b-vhhc5wrclx] { color: #f56565; }

/* ============================================
   MODAL
   ============================================ */
.modal-overlay[b-vhhc5wrclx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-vhhc5wrclx] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-content.large[b-vhhc5wrclx] {
    max-width: 1200px;
    width: 95%;
}

.modal-header[b-vhhc5wrclx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h2[b-vhhc5wrclx] {
    font-size: 1.25rem;
    color: #1a365d;
    margin: 0;
}

.btn-close[b-vhhc5wrclx] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #718096;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-close:hover[b-vhhc5wrclx] {
    background: #f7fafc;
    color: #1a365d;
}

.btn-close svg[b-vhhc5wrclx] {
    width: 20px;
    height: 20px;
}

.modal-body[b-vhhc5wrclx] {
    padding: 1.5rem;
    overflow-y: auto;
}

.historial-filters[b-vhhc5wrclx] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.historial-filters .form-input[b-vhhc5wrclx] {
    flex: 1;
    min-width: 150px;
}

.historial-table[b-vhhc5wrclx] {
    width: 100%;
    border-collapse: collapse;
}

.historial-table th[b-vhhc5wrclx], .historial-table td[b-vhhc5wrclx] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.historial-table th[b-vhhc5wrclx] {
    background: #f7fafc;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.85rem;
}

.status-badge[b-vhhc5wrclx] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.presente[b-vhhc5wrclx] { background: #c6f6d5; color: #276749; }
.status-badge.tarde[b-vhhc5wrclx] { background: #feebc8; color: #c05621; }
.status-badge.falta[b-vhhc5wrclx] { background: #fed7d7; color: #c53030; }
.status-badge.justificado[b-vhhc5wrclx] { background: #e9d8fd; color: #6b46c1; }

/* ============================================
   HISTORIAL TABS
   ============================================ */
.historial-tabs[b-vhhc5wrclx] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
    background: #f7fafc;
    border-radius: 10px;
    flex-wrap: wrap;
}

.historial-tab[b-vhhc5wrclx] {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.historial-tab:hover[b-vhhc5wrclx] {
    background: #e2e8f0;
    color: #1a365d;
}

.historial-tab.active[b-vhhc5wrclx] {
    background: var(--color-primary, #0055A3);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 85, 163, 0.3);
}

.historial-filters .form-select[b-vhhc5wrclx] {
    flex: 1;
    min-width: 140px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1a365d;
    background: white;
}

.historial-filters .form-select:focus[b-vhhc5wrclx] {
    border-color: var(--color-primary, #0055A3);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

.historial-filters .form-select:disabled[b-vhhc5wrclx] {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.historial-filters .btn-secondary[b-vhhc5wrclx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: white;
    color: #1a365d;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.historial-filters .btn-secondary:hover:not(:disabled)[b-vhhc5wrclx] {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #166534;
}

.historial-filters .btn-secondary:disabled[b-vhhc5wrclx] {
    opacity: 0.5;
    cursor: not-allowed;
}

.historial-result-count[b-vhhc5wrclx] {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .stats-grid[b-vhhc5wrclx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .top-lists[b-vhhc5wrclx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .filters-row[b-vhhc5wrclx] {
        flex-direction: column;
    }

    .filter-group[b-vhhc5wrclx] {
        width: 100%;
    }

    .search-row[b-vhhc5wrclx] {
        flex-direction: column;
    }

    .search-box[b-vhhc5wrclx] {
        max-width: none;
    }

    .status-buttons[b-vhhc5wrclx] {
        flex-wrap: wrap;
    }

    .status-btn[b-vhhc5wrclx] {
        font-size: 0.7rem;
        padding: 0.4rem 0.5rem;
    }

    .pagination-container[b-vhhc5wrclx] {
        flex-direction: column;
        gap: 1rem;
    }

    .historial-tabs[b-vhhc5wrclx] {
        gap: 0.25rem;
    }

    .historial-tab[b-vhhc5wrclx] {
        flex: 1;
        text-align: center;
        font-size: 0.8rem;
        padding: 0.4rem 0.5rem;
    }

    .historial-filters[b-vhhc5wrclx] {
        flex-direction: column;
    }

    .historial-filters .form-input[b-vhhc5wrclx],
    .historial-filters .form-select[b-vhhc5wrclx] {
        width: 100%;
        min-width: unset;
    }

    .resumen-attendees-filters[b-vhhc5wrclx] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ============================================
   TIME COLUMNS (Entrada / Salida)
   ============================================ */
.col-time[b-vhhc5wrclx] {
    width: 90px;
    text-align: center;
    white-space: nowrap;
}

.time-display[b-vhhc5wrclx] {
    font-weight: 600;
    color: #1a365d;
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
}

.time-empty[b-vhhc5wrclx] {
    color: #cbd5e0;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
}

.btn-registrar-salida[b-vhhc5wrclx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-registrar-salida:hover[b-vhhc5wrclx] {
    background: #0369a1;
    color: white;
    border-color: #0369a1;
}

.btn-registrar-salida svg[b-vhhc5wrclx] {
    flex-shrink: 0;
}
/* /Pages/Private/Auditoria.razor.rz.scp.css */
/* ============================================
   AUDITORIA (AUDIT LOG) PAGE
   I.E.P. Javier Perez de Cuellar
   Colors: --color-primary: #0055A3
           --color-primary-dark: #00284D
           --color-highlight: #F5A623
           --color-success: #22c55e
   ============================================ */

/* ---- PAGE CONTAINER ---- */
.auditoria-page[b-rknkl9w0l1] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---- HEADER ---- */
.auditoria-header[b-rknkl9w0l1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.auditoria-header-info h1[b-rknkl9w0l1] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.auditoria-header-info p[b-rknkl9w0l1] {
    color: #64748b;
    margin: 4px 0 0 0;
    font-size: 0.9rem;
}

/* ---- FILTERS BAR ---- */
.auditoria-filters[b-rknkl9w0l1] {
    background: #ffffff;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}
.audit-filter-group[b-rknkl9w0l1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 160px;
}
.audit-filter-group label[b-rknkl9w0l1] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.audit-filter-group select[b-rknkl9w0l1],
.audit-filter-group input[b-rknkl9w0l1] {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1e293b;
    background: #ffffff;
    transition: border-color 0.2s;
}
.audit-filter-group select:focus[b-rknkl9w0l1],
.audit-filter-group input:focus[b-rknkl9w0l1] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}
.audit-filter-actions[b-rknkl9w0l1] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

/* ---- BUTTONS ---- */
.audit-btn[b-rknkl9w0l1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    white-space: nowrap;
}
.audit-btn svg[b-rknkl9w0l1] { width: 16px; height: 16px; }
.audit-btn-primary[b-rknkl9w0l1] {
    background: var(--color-primary);
    color: #ffffff;
}
.audit-btn-primary:hover[b-rknkl9w0l1] { background: var(--color-primary-dark); }
.audit-btn-secondary[b-rknkl9w0l1] {
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.audit-btn-secondary:hover[b-rknkl9w0l1] { background: #f1f5f9; }

/* ---- TABLE CONTAINER ---- */
.auditoria-table-container[b-rknkl9w0l1] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.auditoria-table-header[b-rknkl9w0l1] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.auditoria-table-header h2[b-rknkl9w0l1] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}
.auditoria-count[b-rknkl9w0l1] {
    font-size: 0.8rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 20px;
}

/* ---- DESKTOP TABLE ---- */
.auditoria-table-wrap[b-rknkl9w0l1] {
    overflow-x: auto;
}
.auditoria-table[b-rknkl9w0l1] {
    width: 100%;
    border-collapse: collapse;
}
.auditoria-table th[b-rknkl9w0l1] {
    padding: 10px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.auditoria-table td[b-rknkl9w0l1] {
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}
.auditoria-table tr:hover td[b-rknkl9w0l1] {
    background: #f8fafc;
}
.auditoria-table tr:last-child td[b-rknkl9w0l1] {
    border-bottom: none;
}

/* ---- ACTION BADGES ---- */
.audit-action-badge[b-rknkl9w0l1] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.audit-action-badge.create[b-rknkl9w0l1] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}
.audit-action-badge.update[b-rknkl9w0l1] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}
.audit-action-badge.delete[b-rknkl9w0l1] {
    background: var(--bg-error-subtle);
    color: var(--color-error-dark);
}

/* ---- JSON TOGGLE ---- */
.audit-json-toggle[b-rknkl9w0l1] {
    font-size: 0.75rem;
    color: var(--color-primary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}
.audit-json-toggle:hover[b-rknkl9w0l1] {
    background: var(--bg-primary-faint);
}
.audit-json-content[b-rknkl9w0l1] {
    margin-top: 6px;
    padding: 8px;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: monospace;
    color: #475569;
    max-height: 120px;
    overflow-y: auto;
    word-break: break-all;
    white-space: pre-wrap;
}

/* ---- TIMESTAMP ---- */
.audit-timestamp[b-rknkl9w0l1] {
    white-space: nowrap;
    font-size: 0.8rem;
    color: #64748b;
}

/* ---- IP ADDRESS ---- */
.audit-ip[b-rknkl9w0l1] {
    font-family: monospace;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ---- PAGINATION ---- */
.auditoria-pagination[b-rknkl9w0l1] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
}
.auditoria-pagination button[b-rknkl9w0l1] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.auditoria-pagination button:hover:not(:disabled)[b-rknkl9w0l1] {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}
.auditoria-pagination button:disabled[b-rknkl9w0l1] {
    opacity: 0.4;
    cursor: not-allowed;
}
.auditoria-pagination button.active[b-rknkl9w0l1] {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}
.auditoria-pagination span[b-rknkl9w0l1] {
    font-size: 0.85rem;
    color: #64748b;
    padding: 0 8px;
}

/* ---- MOBILE CARDS ---- */
.auditoria-mobile-list[b-rknkl9w0l1] {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}
.audit-mobile-card[b-rknkl9w0l1] {
    background: #f8fafc;
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.audit-mobile-card-header[b-rknkl9w0l1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.audit-mobile-card-row[b-rknkl9w0l1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}
.audit-mobile-card-row .label[b-rknkl9w0l1] {
    color: #64748b;
    font-weight: 500;
}
.audit-mobile-card-row .value[b-rknkl9w0l1] {
    color: #1e293b;
}

/* ---- EMPTY STATE ---- */
.auditoria-empty[b-rknkl9w0l1] {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
}
.auditoria-empty svg[b-rknkl9w0l1] {
    width: 48px;
    height: 48px;
    margin-bottom: 0.75rem;
}
.auditoria-empty p[b-rknkl9w0l1] {
    margin: 0;
    font-size: 0.9rem;
}

/* ---- LOADING ---- */
.auditoria-loading[b-rknkl9w0l1] {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}
.audit-spinner[b-rknkl9w0l1] {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: audit-spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}
@@keyframes audit-spin {
    to[b-rknkl9w0l1] { transform: rotate(360deg); }
}

/* ---- RESPONSIVE ---- */
@@media (max-width: 768px) {
    .auditoria-filters[b-rknkl9w0l1] {
        flex-direction: column;
    }
    .audit-filter-group[b-rknkl9w0l1] {
        min-width: 100%;
    }
    .audit-filter-actions[b-rknkl9w0l1] {
        width: 100%;
    }
    .audit-filter-actions .audit-btn[b-rknkl9w0l1] {
        flex: 1;
        justify-content: center;
    }
    .auditoria-table-wrap[b-rknkl9w0l1] {
        display: none;
    }
    .auditoria-mobile-list[b-rknkl9w0l1] {
        display: flex;
    }
}
/* /Pages/Private/BancoPreguntas.razor.rz.scp.css */
/* ============================================
   BANCO DE PREGUNTAS - I.E.P. Javier Perez de Cuellar
   Gestion de preguntas por curso
   ============================================ */

/* ============================================
   KPI CARDS ROW
   ============================================ */
.banco-kpi-row[b-ayvsopuj5n] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.banco-kpi-card[b-ayvsopuj5n] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banco-kpi-card:hover[b-ayvsopuj5n] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banco-kpi-icon[b-ayvsopuj5n] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.banco-kpi-total[b-ayvsopuj5n] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

.banco-kpi-multiple[b-ayvsopuj5n] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.banco-kpi-truefalse[b-ayvsopuj5n] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.banco-kpi-open[b-ayvsopuj5n] {
    background: var(--bg-highlight-subtle);
    color: var(--color-highlight);
}

.banco-kpi-info[b-ayvsopuj5n] {
    display: flex;
    flex-direction: column;
}

.banco-kpi-value[b-ayvsopuj5n] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.banco-kpi-label[b-ayvsopuj5n] {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

/* ============================================
   FILTER BAR
   ============================================ */
.banco-filter-bar[b-ayvsopuj5n] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.banco-filter-group[b-ayvsopuj5n] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 200px;
}

.banco-filter-group label[b-ayvsopuj5n] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.banco-filter-group select[b-ayvsopuj5n],
.banco-filter-group input[type="text"][b-ayvsopuj5n] {
    padding: 0.55rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1f2937;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.banco-filter-group select:focus[b-ayvsopuj5n],
.banco-filter-group input[type="text"]:focus[b-ayvsopuj5n] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.banco-filter-group select:disabled[b-ayvsopuj5n],
.banco-filter-group input:disabled[b-ayvsopuj5n] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

.banco-filter-search[b-ayvsopuj5n] {
    flex: 1;
    min-width: 250px;
}

.banco-search-input[b-ayvsopuj5n] {
    position: relative;
    display: flex;
    align-items: center;
}

.banco-search-input svg[b-ayvsopuj5n] {
    position: absolute;
    left: 0.75rem;
    color: #9ca3af;
    pointer-events: none;
}

.banco-search-input input[b-ayvsopuj5n] {
    padding-left: 2.25rem !important;
    width: 100%;
}

/* ============================================
   RESULTS INFO
   ============================================ */
.banco-results-info[b-ayvsopuj5n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0 0.25rem;
}

.banco-results-info span[b-ayvsopuj5n] {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

/* ============================================
   QUESTION CARDS GRID
   ============================================ */
.banco-cards-grid[b-ayvsopuj5n] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.banco-card[b-ayvsopuj5n] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.banco-card:hover[b-ayvsopuj5n] {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

.banco-card-header[b-ayvsopuj5n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1rem 0.5rem;
}

.banco-card-badges[b-ayvsopuj5n] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.banco-card-actions[b-ayvsopuj5n] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.banco-card:hover .banco-card-actions[b-ayvsopuj5n] {
    opacity: 1;
}

.banco-card-body[b-ayvsopuj5n] {
    padding: 0 1rem;
    flex: 1;
}

.banco-card-text[b-ayvsopuj5n] {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

.banco-card-footer[b-ayvsopuj5n] {
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid #f3f4f6;
    margin-top: 0.75rem;
}

.banco-card-meta[b-ayvsopuj5n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.banco-meta-item[b-ayvsopuj5n] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #6b7280;
}

.banco-meta-course[b-ayvsopuj5n] {
    font-weight: 600;
    color: var(--color-primary);
    background: var(--bg-primary-faint);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

/* ============================================
   BADGES
   ============================================ */
.banco-badge[b-ayvsopuj5n] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Type badges */
.banco-badge-multiple[b-ayvsopuj5n] {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.banco-badge-truefalse[b-ayvsopuj5n] {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

.banco-badge-open[b-ayvsopuj5n] {
    background: var(--bg-highlight-subtle);
    color: var(--color-warning-dark);
}

/* Difficulty badges */
.banco-badge-easy[b-ayvsopuj5n] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.banco-badge-medium[b-ayvsopuj5n] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-dark);
}

.banco-badge-hard[b-ayvsopuj5n] {
    background: var(--bg-error-subtle);
    color: var(--color-error-dark);
}

/* Course badge (detail modal) */
.banco-badge-course[b-ayvsopuj5n] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

/* ============================================
   TAGS (PILLS)
   ============================================ */
.banco-tags[b-ayvsopuj5n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.banco-tag[b-ayvsopuj5n] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
.banco-btn-icon[b-ayvsopuj5n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.banco-btn-icon:hover[b-ayvsopuj5n] {
    background: #f3f4f6;
    color: var(--color-primary);
}

.banco-btn-danger:hover[b-ayvsopuj5n] {
    background: var(--bg-error-subtle);
    color: var(--color-error);
}

.banco-btn-sm[b-ayvsopuj5n] {
    width: 28px;
    height: 28px;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.banco-empty-state[b-ayvsopuj5n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.banco-empty-state svg[b-ayvsopuj5n] {
    color: #d1d5db;
    margin-bottom: 1rem;
}

.banco-empty-state h3[b-ayvsopuj5n] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem;
}

.banco-empty-state p[b-ayvsopuj5n] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 1.5rem;
    max-width: 400px;
}

/* ============================================
   LOADING STATE
   ============================================ */
.banco-loading[b-ayvsopuj5n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    color: #718096;
}

.banco-loading .spinner[b-ayvsopuj5n] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: banco-spin-b-ayvsopuj5n 0.8s linear infinite;
}

@keyframes banco-spin-b-ayvsopuj5n {
    to { transform: rotate(360deg); }
}

/* ============================================
   MODAL OVERLAY
   ============================================ */
.banco-modal-overlay[b-ayvsopuj5n] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: banco-fadeIn-b-ayvsopuj5n 0.2s ease;
}

@keyframes banco-fadeIn-b-ayvsopuj5n {
    from { opacity: 0; }
    to { opacity: 1; }
}

.banco-modal[b-ayvsopuj5n] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: banco-slideUp-b-ayvsopuj5n 0.25s ease;
}

@keyframes banco-slideUp-b-ayvsopuj5n {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.banco-modal-sm[b-ayvsopuj5n] { max-width: 480px; }
.banco-modal-md[b-ayvsopuj5n] { max-width: 640px; }
.banco-modal-lg[b-ayvsopuj5n] { max-width: 720px; }

.banco-modal-header[b-ayvsopuj5n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.banco-modal-header h2[b-ayvsopuj5n] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.banco-modal-header-danger[b-ayvsopuj5n] {
    border-bottom-color: rgba(239, 68, 68, 0.2);
}

.banco-modal-header-danger h2[b-ayvsopuj5n] {
    color: var(--color-error);
}

.banco-modal-close[b-ayvsopuj5n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.banco-modal-close:hover[b-ayvsopuj5n] {
    background: #f3f4f6;
    color: #1f2937;
}

.banco-modal-body[b-ayvsopuj5n] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.banco-modal-footer[b-ayvsopuj5n] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.banco-form-grid[b-ayvsopuj5n] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.banco-form-row[b-ayvsopuj5n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.banco-form-group[b-ayvsopuj5n] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.banco-form-full[b-ayvsopuj5n] {
    margin-bottom: 1rem;
}

.banco-form-group label[b-ayvsopuj5n] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.banco-form-group label .required[b-ayvsopuj5n] {
    color: var(--color-error);
}

.banco-form-group select[b-ayvsopuj5n],
.banco-form-group input[type="text"][b-ayvsopuj5n],
.banco-form-group input[type="number"][b-ayvsopuj5n],
.banco-form-group textarea[b-ayvsopuj5n] {
    padding: 0.6rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1f2937;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    resize: vertical;
}

.banco-form-group select:focus[b-ayvsopuj5n],
.banco-form-group input:focus[b-ayvsopuj5n],
.banco-form-group textarea:focus[b-ayvsopuj5n] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.banco-form-hint[b-ayvsopuj5n] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ============================================
   ANSWERS SECTION
   ============================================ */
.banco-answers-section[b-ayvsopuj5n] {
    margin-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

.banco-answers-header[b-ayvsopuj5n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.banco-answers-header h3[b-ayvsopuj5n] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.banco-no-answers[b-ayvsopuj5n] {
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
    padding: 1.5rem 0;
}

.banco-answers-list[b-ayvsopuj5n] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.banco-answer-item[b-ayvsopuj5n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    transition: border-color 0.2s;
}

.banco-answer-item:hover[b-ayvsopuj5n] {
    border-color: #d1d5db;
}

.banco-answer-order[b-ayvsopuj5n] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.banco-answer-content[b-ayvsopuj5n] {
    flex: 1;
}

.banco-answer-content input[b-ayvsopuj5n] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #1f2937;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.banco-answer-content input:focus[b-ayvsopuj5n] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--bg-primary-subtle);
}

.banco-answer-content input:disabled[b-ayvsopuj5n] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

/* Correct checkbox */
.banco-answer-correct[b-ayvsopuj5n] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #4b5563;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.banco-answer-correct input[type="checkbox"][b-ayvsopuj5n] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-success);
    cursor: pointer;
}

/* ============================================
   DETAIL MODAL CONTENT
   ============================================ */
.banco-detail-badges[b-ayvsopuj5n] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.banco-detail-question[b-ayvsopuj5n] {
    margin-bottom: 1.25rem;
}

.banco-detail-question h3[b-ayvsopuj5n] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.5rem;
}

.banco-detail-question p[b-ayvsopuj5n] {
    font-size: 0.95rem;
    color: #1f2937;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.banco-detail-tags[b-ayvsopuj5n] {
    margin-bottom: 1.25rem;
}

.banco-detail-tags h4[b-ayvsopuj5n] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.5rem;
}

.banco-detail-answers[b-ayvsopuj5n] {
    margin-bottom: 1rem;
}

.banco-detail-answers h4[b-ayvsopuj5n] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.75rem;
}

.banco-detail-answers-list[b-ayvsopuj5n] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.banco-detail-answer[b-ayvsopuj5n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    font-size: 0.9rem;
    color: #374151;
}

.banco-answer-correct-item[b-ayvsopuj5n] {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.3);
}

.banco-detail-answer-indicator[b-ayvsopuj5n] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.banco-answer-correct-item .banco-detail-answer-indicator[b-ayvsopuj5n] {
    color: var(--color-success);
}

.banco-detail-answer:not(.banco-answer-correct-item) .banco-detail-answer-indicator[b-ayvsopuj5n] {
    color: #d1d5db;
}

.banco-detail-open-note[b-ayvsopuj5n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    color: #2563eb;
    font-size: 0.875rem;
}

.banco-detail-open-note svg[b-ayvsopuj5n] {
    flex-shrink: 0;
}

/* ============================================
   DELETE CONFIRMATION
   ============================================ */
.banco-delete-warning[b-ayvsopuj5n] {
    text-align: center;
    padding: 1rem 0;
}

.banco-delete-icon[b-ayvsopuj5n] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-error-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--color-error);
}

.banco-delete-warning p[b-ayvsopuj5n] {
    font-size: 0.9rem;
    color: #4b5563;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.banco-delete-question-preview[b-ayvsopuj5n] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.85rem;
}

.banco-delete-question-preview strong[b-ayvsopuj5n] {
    color: #374151;
    margin-right: 0.35rem;
}

.banco-delete-question-preview span[b-ayvsopuj5n] {
    color: #6b7280;
}

/* ============================================
   BUTTONS (page-specific)
   ============================================ */
.btn[b-ayvsopuj5n] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary[b-ayvsopuj5n] {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover[b-ayvsopuj5n] {
    background: var(--color-primary-dark);
}

.btn-primary:disabled[b-ayvsopuj5n] {
    background: #93c5fd;
    cursor: not-allowed;
}

.btn-secondary[b-ayvsopuj5n] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover[b-ayvsopuj5n] {
    background: #e5e7eb;
}

.btn-secondary:disabled[b-ayvsopuj5n] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-danger[b-ayvsopuj5n] {
    background: var(--color-error);
    color: white;
}

.btn-danger:hover[b-ayvsopuj5n] {
    background: var(--color-error-dark);
}

.btn-danger:disabled[b-ayvsopuj5n] {
    background: #fca5a5;
    cursor: not-allowed;
}

.btn-outline[b-ayvsopuj5n] {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-outline:hover[b-ayvsopuj5n] {
    background: var(--bg-primary-faint);
}

.btn-sm[b-ayvsopuj5n] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

/* Spinner inside button */
.spinner-sm[b-ayvsopuj5n] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: banco-spin-b-ayvsopuj5n 0.6s linear infinite;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1200px) {
    .banco-cards-grid[b-ayvsopuj5n] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .banco-kpi-row[b-ayvsopuj5n] {
        grid-template-columns: repeat(2, 1fr);
    }

    .banco-filter-bar[b-ayvsopuj5n] {
        flex-direction: column;
    }

    .banco-filter-group[b-ayvsopuj5n] {
        min-width: 100%;
    }

    .banco-cards-grid[b-ayvsopuj5n] {
        grid-template-columns: 1fr;
    }

    .banco-form-row[b-ayvsopuj5n] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .banco-kpi-row[b-ayvsopuj5n] {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .banco-kpi-card[b-ayvsopuj5n] {
        padding: 1rem;
    }

    .banco-kpi-value[b-ayvsopuj5n] {
        font-size: 1.25rem;
    }

    .banco-modal[b-ayvsopuj5n] {
        max-height: 95vh;
        margin: 0.5rem;
    }

    .banco-modal-lg[b-ayvsopuj5n],
    .banco-modal-md[b-ayvsopuj5n] {
        max-width: 100%;
    }

    .banco-modal-body[b-ayvsopuj5n] {
        padding: 1rem;
    }

    .banco-modal-footer[b-ayvsopuj5n] {
        padding: 0.75rem 1rem;
        flex-direction: column-reverse;
    }

    .banco-modal-footer .btn[b-ayvsopuj5n] {
        width: 100%;
        justify-content: center;
    }

    .page-header[b-ayvsopuj5n] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .banco-answer-item[b-ayvsopuj5n] {
        flex-wrap: wrap;
    }

    .banco-answer-content[b-ayvsopuj5n] {
        flex-basis: 100%;
        order: 3;
    }
}

@media (max-width: 480px) {
    .banco-kpi-row[b-ayvsopuj5n] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Private/Becas.razor.rz.scp.css */
/* ============================================
   BECAS Y DESCUENTOS - I.E.P. Javier Perez de Cuellar
   Estilos de la pagina de becas y descuentos
   ============================================ */

/* ============================================
   TABS
   ============================================ */
.becas-tabs[b-2ium5786df] {
    display: flex;
    gap: 4px;
    background: white;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.becas-tab[b-2ium5786df] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.becas-tab:hover[b-2ium5786df] {
    background: #f3f4f6;
    color: #374151;
}

.becas-tab.active[b-2ium5786df] {
    background: var(--color-primary);
    color: white;
}

.becas-tab svg[b-2ium5786df] {
    width: 16px;
    height: 16px;
}

/* ============================================
   STAT CARDS
   ============================================ */
.becas-stat-content[b-2ium5786df] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.accent-highlight[b-2ium5786df] {
    border-left-color: var(--color-highlight) !important;
}

.accent-highlight .stat-accent-icon[b-2ium5786df] {
    background: var(--bg-highlight-subtle);
    color: var(--color-highlight);
}

/* ============================================
   SECTIONS
   ============================================ */
.becas-section[b-2ium5786df] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.becas-section-header[b-2ium5786df] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.becas-section-header h3[b-2ium5786df] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

/* ============================================
   FILTERS
   ============================================ */
.becas-filters[b-2ium5786df] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.becas-search[b-2ium5786df] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    min-width: 250px;
}

.becas-search:focus[b-2ium5786df] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   TABLE
   ============================================ */
.becas-table-wrap[b-2ium5786df] {
    overflow-x: auto;
}

.becas-table[b-2ium5786df] {
    width: 100%;
    border-collapse: collapse;
}

.becas-table th[b-2ium5786df],
.becas-table td[b-2ium5786df] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.becas-table th[b-2ium5786df] {
    background: #f9fafb;
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.becas-table tbody tr:hover[b-2ium5786df] {
    background: #f9fafb;
}

.becas-empty[b-2ium5786df] {
    text-align: center;
    padding: 2rem !important;
    color: #9ca3af;
    font-style: italic;
}

/* ============================================
   PERSONA CELL
   ============================================ */
.becas-persona[b-2ium5786df] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.becas-avatar[b-2ium5786df] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary-dark);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* ============================================
   BADGES
   ============================================ */
.becas-badge[b-2ium5786df] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-type[b-2ium5786df] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

.badge-active[b-2ium5786df] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.badge-inactive[b-2ium5786df] {
    background: var(--bg-gray-subtle);
    color: #6b7280;
}

.badge-percentage[b-2ium5786df] {
    background: var(--bg-highlight-subtle);
    color: var(--color-warning-dark);
}

/* ============================================
   CODE / MONOSPACE
   ============================================ */
.becas-code[b-2ium5786df] {
    font-family: monospace;
    background: #f3f4f6;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #4b5563;
}

/* ============================================
   PERCENTAGE & AMOUNT
   ============================================ */
.becas-percentage[b-2ium5786df] {
    font-weight: 600;
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--color-primary);
}

.becas-amount[b-2ium5786df] {
    font-weight: 600;
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--color-success);
}

/* ============================================
   VIGENCIA
   ============================================ */
.becas-vigencia[b-2ium5786df] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.becas-separator[b-2ium5786df] {
    color: #9ca3af;
}

/* ============================================
   CONCEPT
   ============================================ */
.becas-concept[b-2ium5786df] {
    display: flex;
    flex-direction: column;
}

.becas-concept small[b-2ium5786df] {
    color: #9ca3af;
    font-size: 0.75rem;
}

/* ============================================
   TABLE ACTIONS
   ============================================ */
.becas-actions[b-2ium5786df] {
    display: flex;
    gap: 0.35rem;
}

.becas-btn-icon[b-2ium5786df] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: white;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.becas-btn-icon:hover[b-2ium5786df] {
    background: #f3f4f6;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-icon-danger:hover[b-2ium5786df] {
    color: var(--color-error) !important;
    border-color: var(--color-error) !important;
    background: #fef2f2 !important;
}

/* ============================================
   MODAL - PRIMARY HEADER
   ============================================ */
.modal-header-primary[b-2ium5786df] {
    background: var(--color-primary);
}

.modal-header-primary h2[b-2ium5786df] {
    color: white;
}

/* ============================================
   TOGGLE GROUP (Monto Fijo / Porcentaje)
   ============================================ */
.becas-toggle-group[b-2ium5786df] {
    display: flex;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.becas-toggle-btn[b-2ium5786df] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: white;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.becas-toggle-btn:first-child[b-2ium5786df] {
    border-right: 1px solid #e5e7eb;
}

.becas-toggle-btn.active[b-2ium5786df] {
    background: var(--color-primary);
    color: white;
}

.becas-toggle-btn:hover:not(.active)[b-2ium5786df] {
    background: #f3f4f6;
}

/* ============================================
   TEXTAREA
   ============================================ */
.becas-textarea[b-2ium5786df] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s;
    box-sizing: border-box;
}

.becas-textarea:focus[b-2ium5786df] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   MODALS (shared with contabilidad pattern)
   ============================================ */
.modal-overlay[b-2ium5786df] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-panel[b-2ium5786df] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-panel.modal-sm[b-2ium5786df] {
    max-width: 420px;
}

.modal-header[b-2ium5786df] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.modal-header h2[b-2ium5786df] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.modal-header-danger[b-2ium5786df] {
    background: var(--color-error);
}

.modal-header-danger h2[b-2ium5786df] {
    color: white;
}

.modal-close-btn[b-2ium5786df] {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header:not(.modal-header-primary):not(.modal-header-danger) .modal-close-btn[b-2ium5786df] {
    background: #f3f4f6;
    color: #6b7280;
}

.modal-body[b-2ium5786df] {
    padding: 1.5rem;
}

.modal-footer[b-2ium5786df] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-row[b-2ium5786df] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group[b-2ium5786df] {
    flex: 1;
    margin-bottom: 1rem;
}

.form-row .form-group[b-2ium5786df] {
    margin-bottom: 0;
}

.form-group label[b-2ium5786df] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.35rem;
}

.form-group input[b-2ium5786df],
.form-group select[b-2ium5786df] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
    box-sizing: border-box;
}

.form-group input:focus[b-2ium5786df],
.form-group select:focus[b-2ium5786df] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
.btn-action[b-2ium5786df] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    width: auto;
    height: auto;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-action:disabled[b-2ium5786df] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary-sm[b-2ium5786df] {
    background: var(--color-primary);
    color: white;
}

.btn-primary-sm:hover:not(:disabled)[b-2ium5786df] {
    background: var(--color-primary-dark);
}

.btn-danger[b-2ium5786df] {
    background: var(--color-error);
    color: white;
}

.btn-danger:hover:not(:disabled)[b-2ium5786df] {
    background: var(--color-error-dark);
}

.btn-cancel[b-2ium5786df] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-2ium5786df] {
    background: #f3f4f6;
}

.confirm-text[b-2ium5786df] {
    font-size: 0.95rem;
    color: #374151;
    text-align: center;
    margin: 0;
}

/* ============================================
   RESPONSIVE - 1024px
   ============================================ */
@media (max-width: 1024px) {
    .becas-section-header[b-2ium5786df] {
        flex-direction: column;
        align-items: stretch;
    }

    .becas-filters[b-2ium5786df] {
        width: 100%;
    }

    .becas-search[b-2ium5786df] {
        min-width: auto;
        width: 100%;
    }

    .becas-vigencia[b-2ium5786df] {
        flex-direction: column;
        gap: 0;
    }

    .becas-separator[b-2ium5786df] {
        display: none;
    }
}

/* ============================================
   RESPONSIVE - 768px
   ============================================ */
@media (max-width: 768px) {
    .becas-tabs[b-2ium5786df] {
        overflow-x: auto;
    }

    .becas-section-header[b-2ium5786df] {
        flex-direction: column;
        align-items: stretch;
    }

    .becas-filters[b-2ium5786df] {
        flex-direction: column;
    }

    .becas-search[b-2ium5786df] {
        min-width: auto;
    }

    .form-row[b-2ium5786df] {
        flex-direction: column;
    }

    .becas-toggle-group[b-2ium5786df] {
        flex-direction: column;
    }

    .becas-toggle-btn:first-child[b-2ium5786df] {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .modal-panel[b-2ium5786df] {
        max-width: 95%;
    }

    .becas-table th:nth-child(5)[b-2ium5786df],
    .becas-table td:nth-child(5)[b-2ium5786df] {
        display: none;
    }

    .becas-persona span[b-2ium5786df] {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .stats-grid-3[b-2ium5786df] {
        grid-template-columns: 1fr;
    }

    .becas-stat-content[b-2ium5786df] {
        padding: 1rem;
    }
}

/* ============================================
   APPLY MODAL - MONTH CHIPS
   ============================================ */
.apply-month-selector[b-2ium5786df] {
    margin-top: 0.5rem;
}

.apply-month-selector label[b-2ium5786df] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    display: block;
}

.apply-month-chips[b-2ium5786df] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.apply-month-chip[b-2ium5786df] {
    padding: 0.4rem 0.85rem;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    background: white;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.apply-month-chip:hover[b-2ium5786df] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.apply-month-chip.selected[b-2ium5786df] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.apply-month-actions[b-2ium5786df] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.apply-month-actions button[b-2ium5786df] {
    padding: 0.3rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    font-size: 0.78rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.apply-month-actions button:hover[b-2ium5786df] {
    background: #e5e7eb;
    color: #374151;
}

.apply-info[b-2ium5786df] {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    color: #0369a1;
}

.becas-btn-apply[b-2ium5786df] {
    color: #059669;
}

.becas-btn-apply:hover[b-2ium5786df] {
    background: #ecfdf5;
    color: #047857;
}
/* /Pages/Private/Biblioteca.razor.rz.scp.css */
/* ============================================
   BIBLIOTECA PAGE - I.E.P. Javier Perez de Cuellar
   Catalogo de libros y recursos
   ============================================ */

/* Layout base (page-container, page-header) en layout.css */

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid[b-y427a2renx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-y427a2renx] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
}

.stat-card:hover[b-y427a2renx] {
    transform: translateY(-2px);
}

.stat-icon[b-y427a2renx] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-y427a2renx] {
    width: 24px;
    height: 24px;
    color: white;
}

.stat-icon.blue[b-y427a2renx] {
    background: var(--color-primary-dark);
}

.stat-icon.green[b-y427a2renx] {
    background: var(--color-success);
}

.stat-icon.orange[b-y427a2renx] {
    background: var(--color-warning);
}

.stat-icon.red[b-y427a2renx] {
    background: var(--color-error);
}

.stat-content[b-y427a2renx] {
    display: flex;
    flex-direction: column;
}

.stat-number[b-y427a2renx] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.stat-label[b-y427a2renx] {
    font-size: 0.85rem;
    color: #718096;
}

/* ============================================
   ACTIONS BAR - Search and Filters
   ============================================ */
.actions-bar[b-y427a2renx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.search-section[b-y427a2renx] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
}

.search-box[b-y427a2renx] {
    position: relative;
    min-width: 280px;
    flex: 1;
    max-width: 400px;
}

.search-box svg[b-y427a2renx] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #a0aec0;
    pointer-events: none;
}

.search-box input[b-y427a2renx] {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.search-box input:focus[b-y427a2renx] {
    outline: none;
    border-color: var(--color-primary);
}

.form-select[b-y427a2renx] {
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.form-select:focus[b-y427a2renx] {
    outline: none;
    border-color: var(--color-primary);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary[b-y427a2renx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-y427a2renx] {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-y427a2renx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary svg[b-y427a2renx] {
    width: 18px;
    height: 18px;
}

.btn-secondary[b-y427a2renx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #edf2f7;
    color: #4a5568;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover:not(:disabled)[b-y427a2renx] {
    background: #e2e8f0;
}

.btn-secondary:disabled[b-y427a2renx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary svg[b-y427a2renx] {
    width: 16px;
    height: 16px;
}

.btn-danger[b-y427a2renx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #e53e3e;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover:not(:disabled)[b-y427a2renx] {
    background: #c53030;
}

.btn-danger:disabled[b-y427a2renx] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading-state[b-y427a2renx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    color: #718096;
}

.loading-state .spinner[b-y427a2renx] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-y427a2renx 0.8s linear infinite;
}

@keyframes spin-b-y427a2renx {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state[b-y427a2renx] {
    text-align: center;
    padding: 3rem 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.empty-icon[b-y427a2renx] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.empty-icon svg[b-y427a2renx] {
    width: 64px;
    height: 64px;
    color: #a0aec0;
}

.empty-state h3[b-y427a2renx] {
    color: #2d3748;
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.empty-state p[b-y427a2renx] {
    color: #718096;
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

/* ============================================
   TABLE
   ============================================ */
.table-container[b-y427a2renx] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.data-table[b-y427a2renx] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-y427a2renx] {
    background: #f7fafc;
    padding: 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td[b-y427a2renx] {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: #2d3748;
}

.data-table tbody tr[b-y427a2renx] {
    transition: background-color 0.15s ease;
}

.data-table tbody tr:hover[b-y427a2renx] {
    background: #f7fafc;
}

.data-table tbody tr:last-child td[b-y427a2renx] {
    border-bottom: none;
}

/* Code Badge */
.code-badge[b-y427a2renx] {
    background: #edf2f7;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5568;
    font-family: monospace;
}

/* Book Info */
.book-info[b-y427a2renx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.book-icon[b-y427a2renx] {
    width: 40px;
    height: 40px;
    background: var(--bg-primary-faint);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.book-icon svg[b-y427a2renx] {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.book-info strong[b-y427a2renx] {
    display: block;
    color: #2d3748;
    font-size: 0.9rem;
}

.book-description[b-y427a2renx] {
    display: block;
    font-size: 0.8rem;
    color: #a0aec0;
    margin-top: 2px;
}

/* Course Badge */
.course-badge[b-y427a2renx] {
    background: #ebf8ff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-primary);
}

/* Condition Badges */
.condition-badge[b-y427a2renx] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-block;
}

.condition-badge.condition-nuevo[b-y427a2renx] {
    background: #c6f6d5;
    color: #22543d;
}

.condition-badge.condition-bueno[b-y427a2renx] {
    background: #bee3f8;
    color: #2a4365;
}

.condition-badge.condition-regular[b-y427a2renx] {
    background: #fefcbf;
    color: #744210;
}

.condition-badge.condition-malo[b-y427a2renx] {
    background: #fed7d7;
    color: #822727;
}

.text-muted[b-y427a2renx] {
    color: #a0aec0;
    font-size: 0.85rem;
}

/* Action Buttons */
.action-buttons[b-y427a2renx] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-y427a2renx] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-action svg[b-y427a2renx] {
    width: 16px;
    height: 16px;
}

.btn-action.edit[b-y427a2renx] {
    background: #fef3c7;
    color: #b45309;
}

.btn-action.edit:hover[b-y427a2renx] {
    background: #fde68a;
}

.btn-action.delete[b-y427a2renx] {
    background: #fee2e2;
    color: var(--color-error-dark);
}

.btn-action.delete:hover[b-y427a2renx] {
    background: #fecaca;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination[b-y427a2renx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}

.pagination-info[b-y427a2renx] {
    font-size: 0.85rem;
    color: #718096;
}

.pagination-controls[b-y427a2renx] {
    display: flex;
    gap: 0.25rem;
}

.page-btn[b-y427a2renx] {
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #4a5568;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-y427a2renx] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.page-btn.active[b-y427a2renx] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.page-btn:disabled[b-y427a2renx] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-btn svg[b-y427a2renx] {
    width: 16px;
    height: 16px;
}

.page-size[b-y427a2renx] {
    width: auto;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay[b-y427a2renx] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fadeIn-b-y427a2renx 0.2s ease;
}

@keyframes fadeIn-b-y427a2renx {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-y427a2renx] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-y427a2renx 0.25s ease;
}

@keyframes slideUp-b-y427a2renx {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-content.modal-sm[b-y427a2renx] {
    max-width: 420px;
}

.modal-header[b-y427a2renx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h3[b-y427a2renx] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-primary-dark);
}

.modal-close[b-y427a2renx] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7fafc;
    border: none;
    border-radius: 8px;
    color: #718096;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-y427a2renx] {
    background: #edf2f7;
    color: #e53e3e;
}

.modal-close svg[b-y427a2renx] {
    width: 18px;
    height: 18px;
}

.modal-body[b-y427a2renx] {
    padding: 1.5rem;
}

.modal-body .form-group[b-y427a2renx] {
    margin-bottom: 1rem;
}

.modal-body .form-group:last-child[b-y427a2renx] {
    margin-bottom: 0;
}

.modal-body .form-group label[b-y427a2renx] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.875rem;
}

.modal-body .form-row[b-y427a2renx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-input[b-y427a2renx] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-y427a2renx] {
    outline: none;
    border-color: var(--color-primary);
}

.modal-body .form-select[b-y427a2renx] {
    width: 100%;
}

.form-textarea[b-y427a2renx] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.form-textarea:focus[b-y427a2renx] {
    outline: none;
    border-color: var(--color-primary);
}

.modal-body p[b-y427a2renx] {
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.modal-body .text-muted[b-y427a2renx] {
    color: #a0aec0;
    font-size: 0.85rem;
}

.modal-footer[b-y427a2renx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f7fafc;
    border-radius: 0 0 12px 12px;
}

/* Delete Confirmation */
.delete-warning[b-y427a2renx] {
    text-align: center;
    padding: 0.5rem 0;
}

.warning-icon[b-y427a2renx] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.warning-icon svg[b-y427a2renx] {
    width: 48px;
    height: 48px;
    color: #e53e3e;
}

.delete-warning p[b-y427a2renx] {
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.delete-warning .text-muted[b-y427a2renx] {
    color: #a0aec0;
    font-size: 0.85rem;
}

/* Button Spinner */
.btn-spinner[b-y427a2renx] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-y427a2renx 0.6s linear infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .stats-grid[b-y427a2renx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid[b-y427a2renx] {
        grid-template-columns: 1fr 1fr;
    }

    .page-header[b-y427a2renx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-actions[b-y427a2renx] {
        width: 100%;
    }

    .header-actions .btn-primary[b-y427a2renx] {
        width: 100%;
        justify-content: center;
    }

    .actions-bar[b-y427a2renx] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-section[b-y427a2renx] {
        flex-direction: column;
    }

    .search-box[b-y427a2renx] {
        min-width: 100%;
        max-width: 100%;
    }

    .form-select[b-y427a2renx] {
        width: 100%;
    }

    .btn-secondary[b-y427a2renx] {
        width: 100%;
        justify-content: center;
    }

    .data-table[b-y427a2renx] {
        display: block;
        overflow-x: auto;
    }

    .pagination[b-y427a2renx] {
        flex-direction: column;
        text-align: center;
    }

    .modal-body .form-row[b-y427a2renx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats-grid[b-y427a2renx] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Private/BusEscolar.razor.rz.scp.css */
    .bus-container[b-z9w7b2uq8h] {
        padding: 24px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .page-header[b-z9w7b2uq8h] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .header-content h1[b-z9w7b2uq8h] {
        font-size: 1.75rem;
        color: #1e293b;
        margin: 0;
    }

    .header-content p[b-z9w7b2uq8h] {
        color: #64748b;
        margin: 4px 0 0 0;
    }

    .header-actions[b-z9w7b2uq8h] {
        display: flex;
        gap: 12px;
    }

    .btn-primary[b-z9w7b2uq8h] {
        background: var(--color-primary);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-primary:hover[b-z9w7b2uq8h] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    .btn-secondary[b-z9w7b2uq8h] {
        background: white;
        color: #475569;
        border: 1px solid #e2e8f0;
        padding: 10px 20px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-secondary:hover[b-z9w7b2uq8h] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .btn-sm[b-z9w7b2uq8h] {
        padding: 6px 12px;
        font-size: 0.85rem;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        background: white;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-sm:hover[b-z9w7b2uq8h] { background: #f8fafc; }
    .btn-sm.primary[b-z9w7b2uq8h] { background: #3b82f6; color: white; border: none; }
    .btn-sm.primary:hover[b-z9w7b2uq8h] { background: #2563eb; }
    .btn-sm.danger[b-z9w7b2uq8h] { color: var(--color-error-dark); border-color: #fecaca; }
    .btn-sm.danger:hover[b-z9w7b2uq8h] { background: #fee2e2; }

    /* Stats Grid */
    .stats-grid[b-z9w7b2uq8h] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }

    .stat-card[b-z9w7b2uq8h] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-left: 4px solid;
        position: relative;
    }

    .stat-card.buses[b-z9w7b2uq8h] { border-color: var(--color-warning); }
    .stat-card.routes[b-z9w7b2uq8h] { border-color: #3b82f6; }
    .stat-card.students[b-z9w7b2uq8h] { border-color: #10b981; }
    .stat-card.drivers[b-z9w7b2uq8h] { border-color: #8b5cf6; }

    .stat-icon[b-z9w7b2uq8h] { font-size: 2rem; }

    .stat-info[b-z9w7b2uq8h] {
        display: flex;
        flex-direction: column;
    }

    .stat-number[b-z9w7b2uq8h] {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
    }

    .stat-label[b-z9w7b2uq8h] {
        color: #64748b;
        font-size: 0.875rem;
    }

    .stat-badge[b-z9w7b2uq8h] {
        position: absolute;
        top: 12px;
        right: 12px;
        background: #f1f5f9;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        color: #64748b;
    }

    .stat-badge.active[b-z9w7b2uq8h] {
        background: #dcfce7;
        color: var(--color-success-dark);
    }

    /* Tabs */
    .tabs-container[b-z9w7b2uq8h] {
        background: white;
        border-radius: 12px;
        padding: 4px;
        margin-bottom: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .tabs[b-z9w7b2uq8h] {
        display: flex;
        gap: 4px;
    }

    .tab[b-z9w7b2uq8h] {
        flex: 1;
        padding: 12px 20px;
        background: transparent;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        color: #64748b;
        transition: all 0.2s;
    }

    .tab:hover[b-z9w7b2uq8h] {
        background: #f8fafc;
    }

    .tab.active[b-z9w7b2uq8h] {
        background: #3b82f6;
        color: white;
    }

    /* Unidades Grid */
    .unidades-grid[b-z9w7b2uq8h] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
    }

    .unidad-card[b-z9w7b2uq8h] {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        transition: all 0.3s;
    }

    .unidad-card:hover[b-z9w7b2uq8h] {
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    }

    .unidad-card.mantenimiento[b-z9w7b2uq8h] {
        border: 2px dashed var(--color-warning);
    }

    .unidad-card.inactivo[b-z9w7b2uq8h] {
        opacity: 0.6;
    }

    .unidad-header[b-z9w7b2uq8h] {
        background: var(--color-warning);
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .unidad-icon[b-z9w7b2uq8h] {
        background: white;
        border-radius: 8px;
        padding: 8px 16px;
    }

    .bus-number[b-z9w7b2uq8h] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-warning-dark);
    }

    .unidad-status[b-z9w7b2uq8h] {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .unidad-status.activo[b-z9w7b2uq8h] { background: rgba(255,255,255,0.9); color: var(--color-success-dark); }
    .unidad-status.mantenimiento[b-z9w7b2uq8h] { background: rgba(255,255,255,0.9); color: var(--color-warning); }
    .unidad-status.inactivo[b-z9w7b2uq8h] { background: rgba(255,255,255,0.9); color: var(--color-error-dark); }

    .unidad-body[b-z9w7b2uq8h] {
        padding: 16px;
    }

    .unidad-body h3[b-z9w7b2uq8h] {
        font-size: 1.25rem;
        color: #1e293b;
        margin: 0 0 4px 0;
    }

    .unidad-model[b-z9w7b2uq8h] {
        color: #64748b;
        font-size: 0.9rem;
        margin: 0 0 16px 0;
    }

    .unidad-details[b-z9w7b2uq8h] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
    }

    .detail-item[b-z9w7b2uq8h] {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
    }

    .detail-label[b-z9w7b2uq8h] { color: #64748b; }
    .detail-value[b-z9w7b2uq8h] { color: #1e293b; font-weight: 500; }

    .unidad-docs[b-z9w7b2uq8h] {
        display: flex;
        gap: 8px;
    }

    .doc-badge[b-z9w7b2uq8h] {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .doc-badge.valid[b-z9w7b2uq8h] { background: #dcfce7; color: var(--color-success-dark); }
    .doc-badge.expired[b-z9w7b2uq8h] { background: #fee2e2; color: var(--color-error-dark); }

    .unidad-actions[b-z9w7b2uq8h] {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        border-top: 1px solid #e2e8f0;
        justify-content: flex-end;
    }

    .action-btn[b-z9w7b2uq8h] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background: white;
        color: #64748b;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .action-btn:hover[b-z9w7b2uq8h] { background: #f8fafc; color: #3b82f6; }
    .action-btn.delete:hover[b-z9w7b2uq8h] { background: #fee2e2; color: var(--color-error-dark); }
    .action-btn.small[b-z9w7b2uq8h] { width: 28px; height: 28px; }

    /* Rutas Container */
    .rutas-container[b-z9w7b2uq8h] {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 24px;
    }

    .rutas-list[b-z9w7b2uq8h] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ruta-card[b-z9w7b2uq8h] {
        background: white;
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.2s;
        border: 2px solid transparent;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .ruta-card:hover[b-z9w7b2uq8h] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .ruta-card.selected[b-z9w7b2uq8h] {
        border-color: #3b82f6;
    }

    .ruta-header[b-z9w7b2uq8h] {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .ruta-color[b-z9w7b2uq8h] {
        width: 12px;
        height: 40px;
        border-radius: 4px;
    }

    .ruta-info h3[b-z9w7b2uq8h] {
        margin: 0;
        font-size: 1rem;
        color: #1e293b;
    }

    .ruta-code[b-z9w7b2uq8h] {
        font-size: 0.8rem;
        color: #64748b;
    }

    .ruta-badge[b-z9w7b2uq8h] {
        margin-left: auto;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .ruta-badge.mañana[b-z9w7b2uq8h] { background: #fef3c7; color: var(--color-warning-dark); }
    .ruta-badge.tarde[b-z9w7b2uq8h] { background: #dbeafe; color: #2563eb; }

    .ruta-stats[b-z9w7b2uq8h] {
        display: flex;
        gap: 16px;
        margin-bottom: 8px;
    }

    .ruta-stat[b-z9w7b2uq8h] {
        text-align: center;
    }

    .ruta-stat .stat-value[b-z9w7b2uq8h] {
        font-weight: 700;
        color: #1e293b;
        display: block;
    }

    .ruta-stat .stat-label[b-z9w7b2uq8h] {
        font-size: 0.75rem;
        color: #64748b;
    }

    .ruta-schedule[b-z9w7b2uq8h] {
        font-size: 0.85rem;
        color: #64748b;
    }

    /* Ruta Details */
    .ruta-details[b-z9w7b2uq8h] {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .details-header[b-z9w7b2uq8h] {
        padding: 20px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-left: 4px solid;
    }

    .details-header h2[b-z9w7b2uq8h] {
        margin: 0;
        font-size: 1.25rem;
        color: #1e293b;
    }

    .details-actions[b-z9w7b2uq8h] {
        display: flex;
        gap: 8px;
    }

    .details-body[b-z9w7b2uq8h] {
        padding: 20px;
    }

    .info-grid[b-z9w7b2uq8h] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }

    .info-item label[b-z9w7b2uq8h] {
        display: block;
        font-size: 0.8rem;
        color: #64748b;
        margin-bottom: 4px;
    }

    .info-item span[b-z9w7b2uq8h] {
        font-weight: 500;
        color: #1e293b;
    }

    .details-body h3[b-z9w7b2uq8h] {
        font-size: 1rem;
        color: #1e293b;
        margin: 0 0 16px 0;
    }

    /* Paradas Timeline */
    .paradas-timeline[b-z9w7b2uq8h] {
        position: relative;
    }

    .parada-item[b-z9w7b2uq8h] {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 16px;
        position: relative;
    }

    .parada-item:not(.last)[b-z9w7b2uq8h]::after {
        content: '';
        position: absolute;
        left: 15px;
        top: 32px;
        bottom: 0;
        width: 2px;
        background: #e2e8f0;
    }

    .parada-marker[b-z9w7b2uq8h] {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .parada-content[b-z9w7b2uq8h] {
        flex: 1;
        background: #f8fafc;
        padding: 12px;
        border-radius: 8px;
    }

    .parada-name[b-z9w7b2uq8h] {
        display: block;
        font-weight: 500;
        color: #1e293b;
    }

    .parada-time[b-z9w7b2uq8h] {
        display: inline-block;
        background: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        color: #3b82f6;
        margin-right: 8px;
    }

    .parada-students[b-z9w7b2uq8h] {
        font-size: 0.8rem;
        color: #64748b;
    }

    .empty-details[b-z9w7b2uq8h] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px;
        text-align: center;
    }

    .empty-details .empty-icon[b-z9w7b2uq8h] { font-size: 3rem; margin-bottom: 12px; }
    .empty-details p[b-z9w7b2uq8h] { color: #64748b; }

    /* Asignaciones Section */
    .asignaciones-section[b-z9w7b2uq8h] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .filters-bar[b-z9w7b2uq8h] {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .search-box[b-z9w7b2uq8h] {
        display: flex;
        align-items: center;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0 12px;
        flex: 1;
        min-width: 200px;
    }

    .search-box input[b-z9w7b2uq8h] {
        border: none;
        outline: none;
        background: transparent;
        padding: 10px 8px;
        width: 100%;
    }

    .search-box svg[b-z9w7b2uq8h] { color: #94a3b8; }

    .filter-select[b-z9w7b2uq8h] {
        padding: 10px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: white;
        font-size: 0.9rem;
        color: #475569;
        cursor: pointer;
    }

    .table-container[b-z9w7b2uq8h] {
        overflow-x: auto;
    }

    .data-table[b-z9w7b2uq8h] {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table th[b-z9w7b2uq8h],
    .data-table td[b-z9w7b2uq8h] {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e2e8f0;
    }

    .data-table th[b-z9w7b2uq8h] {
        background: #f8fafc;
        font-weight: 600;
        color: #64748b;
        font-size: 0.85rem;
    }

    .student-cell[b-z9w7b2uq8h] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .student-avatar[b-z9w7b2uq8h] {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--color-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }

    .route-badge[b-z9w7b2uq8h] {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .turno-badge[b-z9w7b2uq8h] {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .turno-badge.mañana[b-z9w7b2uq8h] { background: #fef3c7; color: var(--color-warning-dark); }
    .turno-badge.tarde[b-z9w7b2uq8h] { background: #dbeafe; color: #2563eb; }

    .contact-info[b-z9w7b2uq8h] {
        display: flex;
        flex-direction: column;
    }

    .contact-info small[b-z9w7b2uq8h] {
        color: #64748b;
        font-size: 0.8rem;
    }

    .status-badge[b-z9w7b2uq8h] {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .status-badge.active[b-z9w7b2uq8h] { background: #dcfce7; color: var(--color-success-dark); }
    .status-badge.inactive[b-z9w7b2uq8h] { background: #f1f5f9; color: #64748b; }

    .table-actions[b-z9w7b2uq8h] {
        display: flex;
        gap: 6px;
    }

    /* Personal Section */
    .personal-section[b-z9w7b2uq8h] {
        padding: 0;
    }

    .personal-grid[b-z9w7b2uq8h] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .personal-column[b-z9w7b2uq8h] {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .column-header[b-z9w7b2uq8h] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .column-header h3[b-z9w7b2uq8h] {
        margin: 0;
        font-size: 1rem;
        color: #1e293b;
    }

    .personal-list[b-z9w7b2uq8h] {
        padding: 12px;
    }

    .personal-card[b-z9w7b2uq8h] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 8px;
        transition: all 0.2s;
    }

    .personal-card:hover[b-z9w7b2uq8h] {
        background: #f8fafc;
    }

    .personal-avatar[b-z9w7b2uq8h] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1.25rem;
        color: white;
    }

    .personal-avatar.driver[b-z9w7b2uq8h] {
        background: var(--color-warning);
    }

    .personal-avatar.auxiliar[b-z9w7b2uq8h] {
        background: #8b5cf6;
    }

    .personal-info[b-z9w7b2uq8h] {
        flex: 1;
    }

    .personal-info h4[b-z9w7b2uq8h] {
        margin: 0 0 4px 0;
        font-size: 0.95rem;
        color: #1e293b;
    }

    .personal-doc[b-z9w7b2uq8h],
    .personal-license[b-z9w7b2uq8h],
    .personal-phone[b-z9w7b2uq8h] {
        display: block;
        font-size: 0.8rem;
        color: #64748b;
    }

    .personal-status[b-z9w7b2uq8h] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .license-type[b-z9w7b2uq8h] {
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .license-type.a-iib[b-z9w7b2uq8h] { background: #dbeafe; color: #2563eb; }
    .license-type.a-iiia[b-z9w7b2uq8h] { background: #dcfce7; color: var(--color-success-dark); }
    .license-type.a-iiib[b-z9w7b2uq8h] { background: #fef3c7; color: var(--color-warning-dark); }

    .unidad-asignada[b-z9w7b2uq8h] {
        font-size: 0.75rem;
        color: #64748b;
        background: #f1f5f9;
        padding: 3px 8px;
        border-radius: 4px;
    }

    .status-dot[b-z9w7b2uq8h] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .status-dot.active[b-z9w7b2uq8h] { background: var(--color-success); }
    .status-dot.inactive[b-z9w7b2uq8h] { background: var(--color-error-dark); }

    .personal-actions[b-z9w7b2uq8h] {
        opacity: 0;
        transition: opacity 0.2s;
    }

    .personal-card:hover .personal-actions[b-z9w7b2uq8h] {
        opacity: 1;
    }

    /* Empty State */
    .empty-state[b-z9w7b2uq8h] {
        text-align: center;
        padding: 40px;
    }

    .empty-state .empty-icon[b-z9w7b2uq8h] {
        font-size: 3rem;
        margin-bottom: 12px;
    }

    .empty-state h3[b-z9w7b2uq8h] {
        color: #1e293b;
        margin: 0 0 8px 0;
    }

    .empty-state p[b-z9w7b2uq8h] {
        color: #64748b;
        margin: 0;
    }

    /* Modal Styles */
    .modal-overlay[b-z9w7b2uq8h] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
    }

    .modal[b-z9w7b2uq8h] {
        background: white;
        border-radius: 16px;
        width: 100%;
        max-width: 550px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal.large[b-z9w7b2uq8h] {
        max-width: 700px;
    }

    .modal-header[b-z9w7b2uq8h] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        border-bottom: 1px solid #e2e8f0;
    }

    .modal-header h2[b-z9w7b2uq8h] {
        margin: 0;
        font-size: 1.25rem;
        color: #1e293b;
    }

    .modal-close[b-z9w7b2uq8h] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: none;
        background: #f1f5f9;
        font-size: 1.25rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-close:hover[b-z9w7b2uq8h] {
        background: #e2e8f0;
    }

    .modal-body[b-z9w7b2uq8h] {
        padding: 24px;
    }

    .form-row[b-z9w7b2uq8h] {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
    }

    .form-row.checkboxes[b-z9w7b2uq8h] {
        gap: 24px;
    }

    .form-group[b-z9w7b2uq8h] {
        flex: 1;
    }

    .form-group.full[b-z9w7b2uq8h] {
        flex: 100%;
    }

    .form-group label[b-z9w7b2uq8h] {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
        color: #374151;
        font-size: 0.9rem;
    }

    .form-group input[b-z9w7b2uq8h],
    .form-group select[b-z9w7b2uq8h] {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.95rem;
        transition: border-color 0.2s;
    }

    .form-group input:focus[b-z9w7b2uq8h],
    .form-group select:focus[b-z9w7b2uq8h] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .form-group input[type="color"][b-z9w7b2uq8h] {
        height: 42px;
        padding: 4px;
        cursor: pointer;
    }

    .checkbox-label[b-z9w7b2uq8h] {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 0.9rem;
        color: #475569;
    }

    .checkbox-label input[b-z9w7b2uq8h] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    /* Paradas Section in Modal */
    .paradas-section[b-z9w7b2uq8h] {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #e2e8f0;
    }

    .section-header[b-z9w7b2uq8h] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .section-header h3[b-z9w7b2uq8h] {
        margin: 0;
        font-size: 1rem;
        color: #1e293b;
    }

    .paradas-list[b-z9w7b2uq8h] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .parada-row[b-z9w7b2uq8h] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .parada-order[b-z9w7b2uq8h] {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #3b82f6;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .parada-row input[type="text"][b-z9w7b2uq8h] {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
    }

    .parada-row input[type="time"][b-z9w7b2uq8h] {
        width: 120px;
        padding: 8px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
    }

    .btn-icon[b-z9w7b2uq8h] {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        border: none;
        background: #f1f5f9;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: #64748b;
    }

    .btn-icon.delete:hover[b-z9w7b2uq8h] {
        background: #fee2e2;
        color: var(--color-error-dark);
    }

    .modal-footer[b-z9w7b2uq8h] {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 16px 24px;
        border-top: 1px solid #e2e8f0;
        background: #f8fafc;
    }

    @media (max-width: 1024px) {
        .stats-grid[b-z9w7b2uq8h] {
            grid-template-columns: repeat(2, 1fr);
        }

        .rutas-container[b-z9w7b2uq8h] {
            grid-template-columns: 1fr;
        }

        .personal-grid[b-z9w7b2uq8h] {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .page-header[b-z9w7b2uq8h] {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .header-actions[b-z9w7b2uq8h] {
            width: 100%;
            flex-direction: column;
        }

        .stats-grid[b-z9w7b2uq8h] {
            grid-template-columns: 1fr;
        }

        .tabs[b-z9w7b2uq8h] {
            flex-wrap: wrap;
        }

        .unidades-grid[b-z9w7b2uq8h] {
            grid-template-columns: 1fr;
        }

        .filters-bar[b-z9w7b2uq8h] {
            flex-direction: column;
        }

        .form-row[b-z9w7b2uq8h] {
            flex-direction: column;
        }
    }
/* /Pages/Private/Calendario.razor.rz.scp.css */
/* ============================================
   CALENDARIO ESCOLAR - SCOPED STYLES
   Migrado de wwwroot/css/pages/calendario.css
   ============================================ */

/* ============================================
   PAGE LAYOUT
   ============================================ */
.calendario-page[b-4j1gu8vvw0] {
    padding: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}

.page-container .page-header[b-4j1gu8vvw0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.page-container .page-header h1[b-4j1gu8vvw0] {
    font-size: 1.75rem;
    color: #1a365d;
    margin: 0;
}

.page-container .subtitle[b-4j1gu8vvw0] {
    color: #718096;
    margin: 0.25rem 0 0 0;
    font-size: 0.95rem;
}

.page-container .header-actions[b-4j1gu8vvw0] {
    display: flex;
    gap: 0.75rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.page-container .btn-primary[b-4j1gu8vvw0],
.page-container .btn-secondary[b-4j1gu8vvw0],
.page-container .btn-danger[b-4j1gu8vvw0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-container .btn-primary[b-4j1gu8vvw0] {
    background: var(--color-primary);
    color: white;
}

.page-container .btn-primary:hover[b-4j1gu8vvw0] {
    background: var(--color-primary-hover);
    box-shadow: 0 4px 12px var(--bg-primary-subtle);
}

.page-container .btn-secondary[b-4j1gu8vvw0] {
    background: white;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

.page-container .btn-secondary:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
}

.page-container .btn-danger[b-4j1gu8vvw0] {
    background: #fff5f5;
    color: #e53e3e;
    border: 1px solid #fed7d7;
}

.page-container .btn-danger:hover[b-4j1gu8vvw0] {
    background: #fed7d7;
}

.page-container .btn-primary svg[b-4j1gu8vvw0],
.page-container .btn-secondary svg[b-4j1gu8vvw0],
.page-container .btn-danger svg[b-4j1gu8vvw0] {
    width: 18px;
    height: 18px;
}

/* ============================================
   CALENDAR LAYOUT
   ============================================ */
.calendar-layout[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
}

/* ============================================
   SIDEBAR
   ============================================ */
.calendar-sidebar[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Mini Calendar */
.mini-calendar[b-4j1gu8vvw0] {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.mini-header[b-4j1gu8vvw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #1a365d;
    text-transform: capitalize;
}

.mini-nav[b-4j1gu8vvw0] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #718096;
    border-radius: 4px;
}

.mini-nav:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
    color: #4a5568;
}

.mini-nav svg[b-4j1gu8vvw0] {
    width: 16px;
    height: 16px;
}

.mini-grid[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mini-day-header[b-4j1gu8vvw0] {
    text-align: center;
    font-size: 0.75rem;
    color: #718096;
    padding: 0.25rem;
    font-weight: 600;
}

.mini-day[b-4j1gu8vvw0] {
    aspect-ratio: 1;
    border: none;
    background: none;
    font-size: 0.8rem;
    color: #2d3748;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.mini-day:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
}

.mini-day.other-month[b-4j1gu8vvw0] {
    color: #cbd5e0;
}

.mini-day.today[b-4j1gu8vvw0] {
    background: #ebf8ff;
    color: #4299e1;
    font-weight: 600;
}

.mini-day.selected[b-4j1gu8vvw0] {
    background: #4299e1;
    color: white;
}

.mini-day.has-events[b-4j1gu8vvw0]::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
    margin: -2px auto 0;
}

/* Filters */
.filters-section[b-4j1gu8vvw0], .upcoming-section[b-4j1gu8vvw0] {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.filters-section h3[b-4j1gu8vvw0], .upcoming-section h3[b-4j1gu8vvw0] {
    font-size: 0.9rem;
    color: #1a365d;
    margin: 0 0 1rem 0;
}

.filter-options[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-checkbox[b-4j1gu8vvw0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.filter-checkbox input[b-4j1gu8vvw0] {
    display: none;
}

.checkmark[b-4j1gu8vvw0] {
    width: 18px;
    height: 18px;
    border: 2px solid;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.filter-label[b-4j1gu8vvw0] {
    font-size: 0.9rem;
    color: #4a5568;
}

/* Upcoming Events */
.upcoming-list[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.upcoming-item[b-4j1gu8vvw0] {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.upcoming-item:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
}

.upcoming-date[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
}

.upcoming-date .day[b-4j1gu8vvw0] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a365d;
}

.upcoming-date .month[b-4j1gu8vvw0] {
    font-size: 0.7rem;
    color: #718096;
    text-transform: uppercase;
}

.upcoming-info[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.upcoming-title[b-4j1gu8vvw0] {
    font-size: 0.9rem;
    color: #2d3748;
    font-weight: 500;
}

.upcoming-type[b-4j1gu8vvw0] {
    font-size: 0.75rem;
    font-weight: 600;
}

.no-events[b-4j1gu8vvw0] {
    color: #718096;
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem;
}

/* ============================================
   MAIN CALENDAR
   ============================================ */
.calendar-main[b-4j1gu8vvw0] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.calendar-header[b-4j1gu8vvw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.header-nav[b-4j1gu8vvw0] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-today[b-4j1gu8vvw0] {
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-today:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
    border-color: #4299e1;
}

.nav-arrows[b-4j1gu8vvw0] {
    display: flex;
    gap: 0.25rem;
}

.btn-arrow[b-4j1gu8vvw0] {
    width: 36px;
    height: 36px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-arrow:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
    border-color: #4299e1;
}

.btn-arrow svg[b-4j1gu8vvw0] {
    width: 18px;
    height: 18px;
    color: #718096;
}

.current-period[b-4j1gu8vvw0] {
    font-size: 1.25rem;
    color: #1a365d;
    margin: 0;
    text-transform: capitalize;
}

.view-toggle[b-4j1gu8vvw0] {
    display: flex;
    background: #f7fafc;
    border-radius: 8px;
    padding: 4px;
}

.view-btn[b-4j1gu8vvw0] {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: #718096;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.view-btn:hover[b-4j1gu8vvw0] {
    color: #4a5568;
}

.view-btn.active[b-4j1gu8vvw0] {
    background: white;
    color: #1a365d;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.calendar-content[b-4j1gu8vvw0] {
    flex: 1;
    overflow: auto;
}

/* ============================================
   MONTH VIEW
   ============================================ */
.month-view[b-4j1gu8vvw0] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.weekday-headers[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid #e2e8f0;
}

.weekday-headers span[b-4j1gu8vvw0] {
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.85rem;
}

.month-grid[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    flex: 1;
}

.month-day[b-4j1gu8vvw0] {
    border-right: 1px solid #f0f4f8;
    border-bottom: 1px solid #f0f4f8;
    padding: 0.5rem;
    min-height: 100px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.month-day:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
}

.month-day.other-month[b-4j1gu8vvw0] {
    background: #fafbfc;
}

.month-day.other-month .day-number[b-4j1gu8vvw0] {
    color: #cbd5e0;
}

.month-day.today[b-4j1gu8vvw0] {
    background: #ebf8ff;
}

.month-day.today .day-number[b-4j1gu8vvw0] {
    background: #4299e1;
    color: white;
}

.month-day.selected[b-4j1gu8vvw0] {
    box-shadow: inset 0 0 0 2px #4299e1;
}

.day-number[b-4j1gu8vvw0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #2d3748;
    border-radius: 50%;
}

.day-events[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.25rem;
}

.event-chip[b-4j1gu8vvw0] {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.event-chip:hover[b-4j1gu8vvw0] {
    filter: brightness(0.9);
}

.more-events[b-4j1gu8vvw0] {
    font-size: 0.75rem;
    color: #718096;
    padding-left: 6px;
}

/* ============================================
   WEEK VIEW
   ============================================ */
.week-view[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.week-header[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    border-bottom: 1px solid #e2e8f0;
}

.time-gutter[b-4j1gu8vvw0] {
    border-right: 1px solid #e2e8f0;
}

.week-day-header[b-4j1gu8vvw0] {
    padding: 0.75rem;
    text-align: center;
    border-right: 1px solid #f0f4f8;
}

.week-day-header.today[b-4j1gu8vvw0] {
    background: #ebf8ff;
}

.week-day-header .day-name[b-4j1gu8vvw0] {
    display: block;
    font-size: 0.8rem;
    color: #718096;
    text-transform: capitalize;
}

.week-day-header .day-num[b-4j1gu8vvw0] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a365d;
}

.week-body[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: 60px 1fr;
    flex: 1;
    overflow-y: auto;
}

.time-column[b-4j1gu8vvw0] {
    border-right: 1px solid #e2e8f0;
}

.time-slot[b-4j1gu8vvw0] {
    height: 60px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: #718096;
    text-align: right;
}

.week-grid[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
}

.week-day-column[b-4j1gu8vvw0] {
    border-right: 1px solid #f0f4f8;
    position: relative;
}

.week-day-column.today[b-4j1gu8vvw0] {
    background: rgba(66, 153, 225, 0.05);
}

.hour-cell[b-4j1gu8vvw0] {
    height: 60px;
    border-bottom: 1px solid #f0f4f8;
    cursor: pointer;
}

.hour-cell:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
}

.week-event[b-4j1gu8vvw0] {
    position: absolute;
    left: 4px;
    right: 4px;
    padding: 4px 6px;
    border-radius: 4px;
    color: white;
    font-size: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

.week-event:hover[b-4j1gu8vvw0] {
    filter: brightness(0.9);
}

.week-event .event-time[b-4j1gu8vvw0] {
    display: block;
    font-weight: 600;
}

.week-event .event-title[b-4j1gu8vvw0] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   DAY VIEW
   ============================================ */
.day-view[b-4j1gu8vvw0] {
    padding: 1rem;
}

.day-header-info[b-4j1gu8vvw0] {
    margin-bottom: 1rem;
    text-transform: capitalize;
}

.day-header-info h3[b-4j1gu8vvw0] {
    font-size: 1.1rem;
    color: #1a365d;
    margin: 0;
}

.day-schedule[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
}

.day-hour[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: 60px 1fr;
    min-height: 80px;
    border-bottom: 1px solid #f0f4f8;
}

.hour-label[b-4j1gu8vvw0] {
    padding: 0.5rem;
    font-size: 0.85rem;
    color: #718096;
    text-align: right;
    border-right: 1px solid #e2e8f0;
}

.hour-content[b-4j1gu8vvw0] {
    padding: 0.5rem;
    cursor: pointer;
    min-height: 60px;
}

.hour-content:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
}

.day-event[b-4j1gu8vvw0] {
    padding: 0.75rem;
    border-radius: 8px;
    color: white;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.day-event .event-header[b-4j1gu8vvw0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
}

.day-event .event-title[b-4j1gu8vvw0] {
    font-weight: 600;
    font-size: 0.95rem;
}

.day-event .event-time[b-4j1gu8vvw0] {
    font-size: 0.8rem;
    opacity: 0.9;
}

.day-event .event-desc[b-4j1gu8vvw0] {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0.25rem 0;
}

.day-event .event-location[b-4j1gu8vvw0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    opacity: 0.9;
}

.day-event .event-location svg[b-4j1gu8vvw0] {
    width: 14px;
    height: 14px;
}

/* ============================================
   AGENDA VIEW
   ============================================ */
.agenda-view[b-4j1gu8vvw0] {
    padding: 1rem;
}

.agenda-group[b-4j1gu8vvw0] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.agenda-date[b-4j1gu8vvw0] {
    display: flex;
    gap: 0.75rem;
    min-width: 120px;
}

.agenda-day[b-4j1gu8vvw0] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a365d;
    line-height: 1;
}

.agenda-date-info[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
}

.agenda-weekday[b-4j1gu8vvw0] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a5568;
    text-transform: capitalize;
}

.agenda-month[b-4j1gu8vvw0] {
    font-size: 0.8rem;
    color: #718096;
    text-transform: capitalize;
}

.agenda-events[b-4j1gu8vvw0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.agenda-event[b-4j1gu8vvw0] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f7fafc;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.agenda-event:hover[b-4j1gu8vvw0] {
    background: #edf2f7;
}

.event-color-bar[b-4j1gu8vvw0] {
    width: 4px;
    border-radius: 2px;
}

.agenda-event-content[b-4j1gu8vvw0] {
    flex: 1;
}

.agenda-event-time[b-4j1gu8vvw0] {
    font-size: 0.8rem;
    color: #718096;
    margin-bottom: 0.25rem;
}

.agenda-event-title[b-4j1gu8vvw0] {
    font-weight: 600;
    color: #1a365d;
}

.agenda-event-location[b-4j1gu8vvw0] {
    font-size: 0.85rem;
    color: #718096;
}

.no-events-message[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    color: #718096;
}

.no-events-message svg[b-4j1gu8vvw0] {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay[b-4j1gu8vvw0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-4j1gu8vvw0] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header[b-4j1gu8vvw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h2[b-4j1gu8vvw0] {
    font-size: 1.25rem;
    color: #1a365d;
    margin: 0;
}

.view-modal .modal-header[b-4j1gu8vvw0] {
    color: white;
    border-bottom: none;
    padding: 1.5rem;
}

.view-modal .modal-header h2[b-4j1gu8vvw0] {
    color: white;
}

.view-header-content[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-type-badge[b-4j1gu8vvw0] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}

.btn-close[b-4j1gu8vvw0] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #718096;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-close:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
    color: #1a365d;
}

.btn-close.light[b-4j1gu8vvw0] {
    color: rgba(255,255,255,0.8);
}

.btn-close.light:hover[b-4j1gu8vvw0] {
    background: rgba(255,255,255,0.1);
    color: white;
}

.btn-close svg[b-4j1gu8vvw0] {
    width: 20px;
    height: 20px;
}

.modal-body[b-4j1gu8vvw0] {
    padding: 1.5rem;
    overflow-y: auto;
}

.view-body[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.view-detail[b-4j1gu8vvw0] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.view-detail svg[b-4j1gu8vvw0] {
    width: 20px;
    height: 20px;
    color: #718096;
    flex-shrink: 0;
    margin-top: 2px;
}

.detail-label[b-4j1gu8vvw0] {
    display: block;
    font-size: 0.8rem;
    color: #718096;
    margin-bottom: 0.15rem;
}

.detail-value[b-4j1gu8vvw0] {
    font-size: 0.95rem;
    color: #1a365d;
    text-transform: capitalize;
}

.view-description[b-4j1gu8vvw0] {
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.view-description p[b-4j1gu8vvw0] {
    margin: 0.5rem 0 0 0;
    color: #4a5568;
    line-height: 1.6;
}

.modal-footer[b-4j1gu8vvw0] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
}

/* Form Styles */
.form-group[b-4j1gu8vvw0] {
    margin-bottom: 1rem;
}

.form-group label[b-4j1gu8vvw0] {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 0.35rem;
}

.form-row[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-input[b-4j1gu8vvw0], .form-select[b-4j1gu8vvw0], .form-textarea[b-4j1gu8vvw0] {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #2d3748;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-4j1gu8vvw0], .form-select:focus[b-4j1gu8vvw0], .form-textarea:focus[b-4j1gu8vvw0] {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.form-textarea[b-4j1gu8vvw0] {
    resize: vertical;
}

.checkbox-label[b-4j1gu8vvw0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-top: 1.5rem;
}

.checkbox-label input[b-4j1gu8vvw0] {
    width: 18px;
    height: 18px;
}

/* ============================================
   LOADING STATE
   ============================================ */
.calendar-loading[b-4j1gu8vvw0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: #718096;
}

.calendar-loading .spinner[b-4j1gu8vvw0] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #4299e1;
    border-radius: 50%;
    animation: spin-b-4j1gu8vvw0 0.8s linear infinite;
    margin-right: 1rem;
}

@keyframes spin-b-4j1gu8vvw0 {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .calendar-layout[b-4j1gu8vvw0] {
        grid-template-columns: 1fr;
    }

    .calendar-sidebar[b-4j1gu8vvw0] {
        display: none;
    }
}

/* ============================================
   HORARIOS - SCHEDULE GRID
   ============================================ */

/* --- Day View Grid --- */
.day-view .day-header[b-4j1gu8vvw0] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.day-view .day-title[b-4j1gu8vvw0] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a365d;
    text-transform: capitalize;
}

.day-view .time-grid[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
}

.time-row[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: 80px 1fr;
    border-bottom: 1px solid #f0f4f8;
    min-height: 56px;
}

.time-row .time-label[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border-right: 1px solid #e2e8f0;
    gap: 2px;
}

.time-label .time-start[b-4j1gu8vvw0] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5568;
}

.time-label .time-end[b-4j1gu8vvw0] {
    font-size: 0.7rem;
    color: #a0aec0;
}

.time-row .time-content[b-4j1gu8vvw0] {
    padding: 0.375rem 0.5rem;
    display: flex;
    align-items: center;
}

/* --- Break Row --- */
.break-row[b-4j1gu8vvw0] {
    background: #fef9e7;
    min-height: 40px !important;
}

.break-row .time-label[b-4j1gu8vvw0] {
    background: #fdf6e3;
}

.break-block[b-4j1gu8vvw0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.375rem 0.75rem;
    background: #f5a623;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.break-name[b-4j1gu8vvw0] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
}

/* --- Class Block (Day View) --- */
.class-block[b-4j1gu8vvw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: white;
    width: 100%;
}

.class-info[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.class-name[b-4j1gu8vvw0] {
    font-weight: 600;
    font-size: 0.85rem;
}

.class-teacher[b-4j1gu8vvw0] {
    font-size: 0.75rem;
    opacity: 0.9;
}

.empty-slot[b-4j1gu8vvw0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    color: #a0aec0;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.empty-slot:hover[b-4j1gu8vvw0] {
    background: #f7fafc;
    color: #718096;
    border-color: #cbd5e0;
}

/* --- Week View Grid --- */
.week-view .week-header[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: 80px repeat(5, 1fr);
    border-bottom: 2px solid #e2e8f0;
}

.day-column-header[b-4j1gu8vvw0] {
    padding: 0.5rem;
    text-align: center;
    border-right: 1px solid #f0f4f8;
}

.day-column-header.today[b-4j1gu8vvw0] {
    background: #ebf8ff;
}

.day-column-header .day-name[b-4j1gu8vvw0] {
    display: block;
    font-size: 0.75rem;
    color: #718096;
    text-transform: capitalize;
}

.day-column-header .day-number[b-4j1gu8vvw0] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a365d;
}

.time-column-header[b-4j1gu8vvw0] {
    border-right: 1px solid #e2e8f0;
}

.week-view .week-body[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
}

.week-row[b-4j1gu8vvw0] {
    display: grid;
    grid-template-columns: 80px repeat(5, 1fr);
    border-bottom: 1px solid #f0f4f8;
    min-height: 48px;
}

.week-row .time-label[b-4j1gu8vvw0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-right: 1px solid #e2e8f0;
    gap: 2px;
}

.week-row .time-label .time-start[b-4j1gu8vvw0] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5568;
}

.week-row .time-label .time-end[b-4j1gu8vvw0] {
    font-size: 0.65rem;
    color: #a0aec0;
}

.week-cell[b-4j1gu8vvw0] {
    padding: 0.25rem;
    border-right: 1px solid #f0f4f8;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
}

.week-cell.today[b-4j1gu8vvw0] {
    background: rgba(66, 153, 225, 0.04);
}

/* --- Break Row (Week View) --- */
.week-row.break-row[b-4j1gu8vvw0] {
    grid-template-columns: 80px 1fr;
    background: #fef9e7;
    min-height: 36px;
}

.week-row.break-row .time-label[b-4j1gu8vvw0] {
    background: #fdf6e3;
}

.week-break-cell[b-4j1gu8vvw0] {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    text-align: center;
}

.week-break-cell .break-name[b-4j1gu8vvw0] {
    background: #f5a623;
    color: white;
    padding: 0.25rem 1.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 auto;
}

/* --- Class Chip (Week View) --- */
.class-chip[b-4j1gu8vvw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    color: white;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: default;
    width: 100%;
    box-sizing: border-box;
}

.class-chip span[b-4j1gu8vvw0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-remove[b-4j1gu8vvw0] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.btn-remove:hover[b-4j1gu8vvw0] {
    color: white;
    background: rgba(0,0,0,0.15);
}

.btn-remove svg[b-4j1gu8vvw0] {
    width: 16px;
    height: 16px;
}

.btn-remove-small[b-4j1gu8vvw0] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.btn-remove-small:hover[b-4j1gu8vvw0] {
    color: white;
}

.btn-remove-small svg[b-4j1gu8vvw0] {
    width: 12px;
    height: 12px;
}

/* --- Class Colors --- */
.color-blue[b-4j1gu8vvw0]    { background: #3182ce; }
.color-green[b-4j1gu8vvw0]   { background: #38a169; }
.color-purple[b-4j1gu8vvw0]  { background: #805ad5; }
.color-orange[b-4j1gu8vvw0]  { background: #dd6b20; }
.color-teal[b-4j1gu8vvw0]    { background: #319795; }
.color-pink[b-4j1gu8vvw0]    { background: #d53f8c; }
.color-indigo[b-4j1gu8vvw0]  { background: #5a67d8; }
.color-cyan[b-4j1gu8vvw0]    { background: #00b5d8; }
.color-red[b-4j1gu8vvw0]     { background: #e53e3e; }
.color-yellow[b-4j1gu8vvw0]  { background: #d69e2e; }

@media (max-width: 768px) {
    .page-container .page-header[b-4j1gu8vvw0] {
        flex-direction: column;
        gap: 1rem;
    }

    .page-container .header-actions[b-4j1gu8vvw0] {
        width: 100%;
    }

    .page-container .header-actions button[b-4j1gu8vvw0] {
        flex: 1;
    }

    .calendar-header[b-4j1gu8vvw0] {
        flex-direction: column;
        gap: 1rem;
    }

    .form-row[b-4j1gu8vvw0] {
        grid-template-columns: 1fr;
    }

    .week-row[b-4j1gu8vvw0] {
        grid-template-columns: 60px repeat(5, 1fr);
    }

    .week-view .week-header[b-4j1gu8vvw0] {
        grid-template-columns: 60px repeat(5, 1fr);
    }

    .time-row[b-4j1gu8vvw0] {
        grid-template-columns: 60px 1fr;
    }
}
/* /Pages/Private/CambiarContrasena.razor.rz.scp.css */
/* ============================================
   CAMBIAR CONTRASEÑA — Layout centrado FUN
   CSS Isolation (scoped automáticamente)
   Variables globales en: css/app.css
   ============================================ */

/* ============================================
   LAYOUT — Full page centrado (crema)
   ============================================ */
.login-page[b-4kmilziih3] {
    min-height: 100vh;
    background: var(--bg-fun-cream, #fffdf7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-content[b-4kmilziih3] {
    width: 100%;
    max-width: 480px;
}

.login-card[b-4kmilziih3] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* ============================================
   LOGO
   ============================================ */
.logo-container[b-4kmilziih3] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.logo-escudo[b-4kmilziih3] {
    width: 80px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
}

.logo-fallback[b-4kmilziih3] {
    width: 80px;
    height: 96px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-fallback svg[b-4kmilziih3] {
    width: 100%;
    height: 100%;
}

/* ============================================
   ALERTA DE ERROR
   ============================================ */
.error-alert[b-4kmilziih3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.error-alert svg[b-4kmilziih3] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ============================================
   FORMULARIO
   ============================================ */
.login-form[b-4kmilziih3] {
    width: 100%;
}

.form-group[b-4kmilziih3] {
    margin-bottom: 1.5rem;
}

.form-group label[b-4kmilziih3] {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.input-wrapper[b-4kmilziih3] {
    position: relative;
    width: 100%;
}

.form-input[b-4kmilziih3] {
    width: 100%;
    padding: 0.85rem 2.75rem 0.85rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: white;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.form-input[b-4kmilziih3]::placeholder {
    color: var(--text-light);
    font-size: 0.9rem;
}

.form-input:focus[b-4kmilziih3] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

/* Password toggle */
.btn-toggle-password[b-4kmilziih3] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    color: var(--text-light);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-toggle-password:hover[b-4kmilziih3] {
    opacity: 1;
}

.btn-toggle-password svg[b-4kmilziih3] {
    width: 20px;
    height: 20px;
}

/* ============================================
   BOTÓN CAMBIAR — Pill naranja
   ============================================ */
.btn-login[b-4kmilziih3] {
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: var(--color-secondary);
    color: white;
    border: none;
    border-radius: 9999px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 159, 28, 0.35);
    margin-top: 0.5rem;
}

.btn-login:hover:not(:disabled)[b-4kmilziih3] {
    background: var(--color-secondary-dark, #e09100);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 159, 28, 0.45);
}

.btn-login:disabled[b-4kmilziih3] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner[b-4kmilziih3] {
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   RESPONSIVE — MOBILE (480px)
   ============================================ */
@media (max-width: 480px) {
    .login-page[b-4kmilziih3] {
        padding: 1.25rem;
    }

    .login-card[b-4kmilziih3] {
        padding: 2rem 1.5rem;
    }

    .logo-escudo[b-4kmilziih3] {
        width: 60px;
        height: 72px;
    }

    .form-input[b-4kmilziih3] {
        padding: 0.75rem 2.5rem 0.75rem 0.85rem;
        font-size: 0.9rem;
    }

    .btn-login[b-4kmilziih3] {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }
}
/* /Pages/Private/Citas.razor.rz.scp.css */
/* ============================================
   CITAS (APPOINTMENTS) PAGE
   I.E.P. Javier Perez de Cuellar
   ============================================ */

/* ---- KPI STAT CARDS ---- */
.citas-stats-grid[b-0um4p1miu1] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.citas-stat-card[b-0um4p1miu1] {
    flex: 1;
    min-width: 200px;
    background: #ffffff;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-left: 4px solid #e5e7eb;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.citas-stat-card:hover[b-0um4p1miu1] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.citas-stat-card.citas-accent-blue[b-0um4p1miu1] { border-left-color: var(--color-primary); }
.citas-stat-card.citas-accent-warning[b-0um4p1miu1] { border-left-color: #f59e0b; }
.citas-stat-card.citas-accent-green[b-0um4p1miu1] { border-left-color: var(--color-success); }
.citas-stat-card.citas-accent-red[b-0um4p1miu1] { border-left-color: #ef4444; }

.citas-stat-icon[b-0um4p1miu1] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.citas-stat-icon svg[b-0um4p1miu1] { width: 24px; height: 24px; }

.citas-accent-blue .citas-stat-icon[b-0um4p1miu1] { background: rgba(0, 85, 163, 0.1); color: var(--color-primary); }
.citas-accent-warning .citas-stat-icon[b-0um4p1miu1] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.citas-accent-green .citas-stat-icon[b-0um4p1miu1] { background: rgba(34, 197, 94, 0.1); color: var(--color-success); }
.citas-accent-red .citas-stat-icon[b-0um4p1miu1] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.citas-stat-info[b-0um4p1miu1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.citas-stat-info h3[b-0um4p1miu1] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1.2;
    margin: 0;
}

.citas-stat-info p[b-0um4p1miu1] {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0.15rem 0 0;
    white-space: nowrap;
}

/* ---- SECTION CARD ---- */
.citas-section-card[b-0um4p1miu1] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.citas-section-header[b-0um4p1miu1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

/* ---- TABS ---- */
.citas-tabs[b-0um4p1miu1] {
    display: flex;
    gap: 0;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 0.25rem;
    flex-shrink: 0;
}

.citas-tab[b-0um4p1miu1] {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.citas-tab:hover[b-0um4p1miu1] {
    color: #374151;
    background: rgba(0, 0, 0, 0.04);
}

.citas-tab.citas-tab-active[b-0um4p1miu1] {
    background: #ffffff;
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.citas-tab.citas-tab-active[b-0um4p1miu1]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
}

/* ---- FILTER GROUP ---- */
.citas-filter-group[b-0um4p1miu1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.citas-filter-select[b-0um4p1miu1] {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #374151;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.citas-filter-select:focus[b-0um4p1miu1] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

/* ---- DATE FILTER ---- */
.citas-date-filter[b-0um4p1miu1] {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f8f9fa;
}

.citas-form-inline[b-0um4p1miu1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.citas-form-inline label[b-0um4p1miu1] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}

.citas-input-date[b-0um4p1miu1] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #374151;
    background: #ffffff;
}

.citas-input-date:focus[b-0um4p1miu1] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

/* ---- TABLE ---- */
.citas-table-responsive[b-0um4p1miu1] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.citas-data-table[b-0um4p1miu1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.citas-data-table thead[b-0um4p1miu1] {
    background: #f8f9fa;
    border-bottom: 2px solid #e5e7eb;
}

.citas-data-table th[b-0um4p1miu1] {
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.citas-data-table td[b-0um4p1miu1] {
    padding: 0.85rem 1rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.citas-data-table tbody tr[b-0um4p1miu1] { transition: background-color 0.15s ease; }
.citas-data-table tbody tr:hover[b-0um4p1miu1] { background-color: #f0f7ff; }
.citas-data-table tbody tr:last-child td[b-0um4p1miu1] { border-bottom: none; }

.citas-td-reason[b-0um4p1miu1] {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- STATUS BADGES ---- */
.citas-badge[b-0um4p1miu1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.citas-badge[b-0um4p1miu1]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.citas-badge-warning[b-0um4p1miu1] { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.citas-badge-warning[b-0um4p1miu1]::before { background: #f59e0b; }

.citas-badge-success[b-0um4p1miu1] { background: rgba(34, 197, 94, 0.1); color: #15803d; }
.citas-badge-success[b-0um4p1miu1]::before { background: var(--color-success); }

.citas-badge-danger[b-0um4p1miu1] { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.citas-badge-danger[b-0um4p1miu1]::before { background: #ef4444; }

.citas-badge-secondary[b-0um4p1miu1] { background: #f3f4f6; color: #4b5563; }
.citas-badge-secondary[b-0um4p1miu1]::before { background: #6b7280; }

/* ---- ACTION BUTTONS (Table Cells) ---- */
.citas-actions-cell[b-0um4p1miu1] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.citas-btn-icon[b-0um4p1miu1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: transparent;
}

.citas-btn-icon svg[b-0um4p1miu1] { width: 16px; height: 16px; }

.citas-btn-icon.citas-btn-view[b-0um4p1miu1] { color: var(--color-primary); border-color: var(--color-primary); }
.citas-btn-icon.citas-btn-view:hover[b-0um4p1miu1] { background: var(--color-primary); color: #fff; }

.citas-btn-icon.citas-btn-confirm[b-0um4p1miu1] { color: var(--color-success); border-color: var(--color-success); }
.citas-btn-icon.citas-btn-confirm:hover[b-0um4p1miu1] { background: var(--color-success); color: #fff; }

.citas-btn-icon.citas-btn-reject[b-0um4p1miu1] { color: #ef4444; border-color: #ef4444; }
.citas-btn-icon.citas-btn-reject:hover[b-0um4p1miu1] { background: #ef4444; color: #fff; }

.citas-btn-icon.citas-btn-cancel[b-0um4p1miu1] { color: #6b7280; border-color: #6b7280; }
.citas-btn-icon.citas-btn-cancel:hover[b-0um4p1miu1] { background: #6b7280; color: #fff; }

.citas-btn-icon.citas-btn-delete[b-0um4p1miu1] { color: #ef4444; border-color: #ef4444; }
.citas-btn-icon.citas-btn-delete:hover[b-0um4p1miu1] { background: #ef4444; color: #fff; }

/* ---- BUTTONS ---- */
.citas-btn[b-0um4p1miu1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.citas-btn:disabled[b-0um4p1miu1] { opacity: 0.6; cursor: not-allowed; }
.citas-btn svg[b-0um4p1miu1] { width: 16px; height: 16px; }

.citas-btn.citas-btn-primary[b-0um4p1miu1] { background: var(--color-primary); color: #fff; box-shadow: 0 2px 6px rgba(0, 85, 163, 0.25); }
.citas-btn.citas-btn-primary:hover:not(:disabled)[b-0um4p1miu1] { background: var(--color-primary-dark); box-shadow: 0 4px 12px rgba(0, 40, 77, 0.3); }

.citas-btn.citas-btn-secondary[b-0um4p1miu1] { background: #fff; color: #6b7280; border: 1.5px solid #e5e7eb; }
.citas-btn.citas-btn-secondary:hover:not(:disabled)[b-0um4p1miu1] { background: #f3f4f6; border-color: #d1d5db; color: #374151; }

.citas-btn.citas-btn-success[b-0um4p1miu1] { background: var(--color-success); color: #fff; }
.citas-btn.citas-btn-success:hover:not(:disabled)[b-0um4p1miu1] { background: #16a34a; box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3); }

.citas-btn.citas-btn-danger[b-0um4p1miu1] { background: #ef4444; color: #fff; }
.citas-btn.citas-btn-danger:hover:not(:disabled)[b-0um4p1miu1] { background: #dc2626; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3); }

.citas-btn.citas-btn-warning[b-0um4p1miu1] { background: #f59e0b; color: #fff; }
.citas-btn.citas-btn-warning:hover:not(:disabled)[b-0um4p1miu1] { background: #d97706; box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3); }

.citas-btn-sm[b-0um4p1miu1] { padding: 0.4rem 0.85rem; font-size: 0.8rem; }

/* ---- MODAL ---- */
.citas-modal-overlay[b-0um4p1miu1] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 40, 77, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: citas-fade-in-b-0um4p1miu1 0.2s ease;
}

@keyframes citas-fade-in-b-0um4p1miu1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.citas-modal-content[b-0um4p1miu1] {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 550px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: citas-slide-up-b-0um4p1miu1 0.3s ease;
    margin: 1rem;
}

.citas-modal-content.citas-modal-small[b-0um4p1miu1] {
    max-width: 440px;
}

@keyframes citas-slide-up-b-0um4p1miu1 {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.citas-modal-header[b-0um4p1miu1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: var(--color-primary-dark);
    color: #ffffff;
    border-radius: 16px 16px 0 0;
}

.citas-modal-header.citas-modal-header-danger[b-0um4p1miu1] {
    background: #dc2626;
}

.citas-modal-header h3[b-0um4p1miu1] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.citas-btn-close[b-0um4p1miu1] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: background 0.2s ease;
}

.citas-btn-close:hover[b-0um4p1miu1] { background: rgba(255, 255, 255, 0.25); }

.citas-modal-body[b-0um4p1miu1] { padding: 1.5rem; }

.citas-modal-footer[b-0um4p1miu1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 16px 16px;
    flex-wrap: wrap;
}

/* ---- FORM ELEMENTS ---- */
.citas-form-group[b-0um4p1miu1] { margin-bottom: 1.15rem; }
.citas-form-group:last-child[b-0um4p1miu1] { margin-bottom: 0; }

.citas-form-group label[b-0um4p1miu1] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.4rem;
}

.citas-char-count[b-0um4p1miu1] {
    font-weight: 400;
    font-size: 0.75rem;
    color: #9ca3af;
}

.citas-form-input[b-0um4p1miu1],
.citas-form-textarea[b-0um4p1miu1] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #374151;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.citas-form-input:focus[b-0um4p1miu1],
.citas-form-textarea:focus[b-0um4p1miu1] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

.citas-form-input[b-0um4p1miu1]::placeholder,
.citas-form-textarea[b-0um4p1miu1]::placeholder { color: #9ca3af; }

.citas-form-textarea[b-0um4p1miu1] { resize: vertical; min-height: 80px; }

/* ---- SEARCH DROPDOWN (Modal) ---- */
.citas-search-container[b-0um4p1miu1] {
    position: relative;
}

.citas-dropdown[b-0um4p1miu1] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 250px;
    overflow-y: auto;
    z-index: 10;
    margin-top: 4px;
}

.citas-dropdown-item[b-0um4p1miu1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.citas-dropdown-item:last-child[b-0um4p1miu1] { border-bottom: none; }
.citas-dropdown-item:hover[b-0um4p1miu1] { background-color: #f0f7ff; }

.citas-dropdown-item strong[b-0um4p1miu1] {
    font-weight: 600;
}

.citas-dropdown-role[b-0um4p1miu1] {
    font-size: 0.75rem;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    flex-shrink: 0;
}

.citas-selected-user[b-0um4p1miu1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-primary);
}

.citas-btn-remove[b-0um4p1miu1] {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 0.25rem;
    transition: color 0.15s;
}

.citas-btn-remove:hover[b-0um4p1miu1] { color: #ef4444; }

/* ---- DETAIL MODAL ---- */
.citas-detail-grid[b-0um4p1miu1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.citas-detail-item[b-0um4p1miu1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.citas-detail-item:nth-child(odd)[b-0um4p1miu1] { padding-right: 1rem; }
.citas-detail-item:nth-child(even)[b-0um4p1miu1] { padding-left: 1rem; border-left: 1px solid #f3f4f6; }

.citas-detail-label[b-0um4p1miu1] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.citas-detail-value[b-0um4p1miu1] {
    font-size: 0.9rem;
    color: #1f2937;
    word-break: break-word;
}

.citas-detail-section[b-0um4p1miu1] {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.citas-detail-section:last-child[b-0um4p1miu1] { border-bottom: none; }

.citas-detail-text[b-0um4p1miu1] {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
    margin: 0.35rem 0 0;
    word-break: break-word;
}

/* ---- DELETE WARNING ---- */
.citas-delete-warning[b-0um4p1miu1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem 0;
}

.citas-delete-warning svg[b-0um4p1miu1] { color: #f59e0b; }

.citas-delete-warning p[b-0um4p1miu1] {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
    margin: 0;
}

.citas-delete-subtext[b-0um4p1miu1] {
    font-size: 0.8rem !important;
    color: #9ca3af !important;
}

/* ---- EMPTY STATE ---- */
.citas-empty-state[b-0um4p1miu1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 2rem;
    text-align: center;
}

.citas-empty-state svg[b-0um4p1miu1] {
    color: #d1d5db;
    margin-bottom: 1rem;
}

.citas-empty-state p[b-0um4p1miu1] {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
}

.citas-empty-state span[b-0um4p1miu1] {
    font-size: 0.85rem;
    color: #9ca3af;
}

/* ---- LOADING ---- */
.citas-loading-container[b-0um4p1miu1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.citas-loading-container p[b-0um4p1miu1] {
    color: #6b7280;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.citas-spinner[b-0um4p1miu1] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: citas-spin-b-0um4p1miu1 0.8s linear infinite;
}

.citas-spinner-small[b-0um4p1miu1] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: citas-spin-b-0um4p1miu1 0.8s linear infinite;
    display: inline-block;
}

@keyframes citas-spin-b-0um4p1miu1 {
    to { transform: rotate(360deg); }
}

/* ---- MOBILE CARDS (hidden on desktop) ---- */
.citas-cards-container[b-0um4p1miu1] {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.citas-card[b-0um4p1miu1] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.citas-card:hover[b-0um4p1miu1] { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }

.citas-card-header[b-0um4p1miu1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #f3f4f6;
}

.citas-card-date[b-0um4p1miu1] {
    font-size: 0.75rem;
    color: #6b7280;
}

.citas-card-body[b-0um4p1miu1] {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.citas-card-detail[b-0um4p1miu1] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #374151;
}

.citas-card-label[b-0um4p1miu1] {
    font-weight: 600;
    color: #6b7280;
    flex-shrink: 0;
}

.citas-card-footer[b-0um4p1miu1] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid #f3f4f6;
    background: #fafbfc;
}

/* ---- RESPONSIVE - TABLET ---- */
@media (max-width: 768px) {
    .citas-stats-grid[b-0um4p1miu1] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .citas-stat-card[b-0um4p1miu1] { min-width: 0; }

    .citas-section-header[b-0um4p1miu1] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .citas-tabs[b-0um4p1miu1] {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .citas-filter-group[b-0um4p1miu1] { margin-left: 0; width: 100%; }
    .citas-filter-select[b-0um4p1miu1] { flex: 1; width: 100%; }

    .citas-table-responsive[b-0um4p1miu1] { display: none; }
    .citas-cards-container[b-0um4p1miu1] { display: flex; }

    .citas-modal-content[b-0um4p1miu1] { max-width: 95%; margin: 0.5rem; }

    .citas-detail-grid[b-0um4p1miu1] {
        grid-template-columns: 1fr;
    }

    .citas-detail-item:nth-child(even)[b-0um4p1miu1] { padding-left: 0; border-left: none; }
    .citas-detail-item:nth-child(odd)[b-0um4p1miu1] { padding-right: 0; }
}

/* ---- RESPONSIVE - MOBILE ---- */
@media (max-width: 480px) {
    .citas-stats-grid[b-0um4p1miu1] { grid-template-columns: 1fr; }
    .citas-stat-card[b-0um4p1miu1] { padding: 1rem; }
    .citas-stat-info h3[b-0um4p1miu1] { font-size: 1.3rem; }

    .citas-tab[b-0um4p1miu1] { padding: 0.45rem 0.75rem; font-size: 0.8rem; }

    .citas-modal-content[b-0um4p1miu1] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 12px;
        margin: 0.5rem;
    }

    .citas-modal-header[b-0um4p1miu1] { border-radius: 12px 12px 0 0; padding: 1rem 1.25rem; }
    .citas-modal-body[b-0um4p1miu1] { padding: 1.25rem; }

    .citas-modal-footer[b-0um4p1miu1] {
        border-radius: 0 0 12px 12px;
        padding: 0.85rem 1.25rem;
        flex-direction: column;
    }

    .citas-modal-footer .citas-btn[b-0um4p1miu1] { width: 100%; justify-content: center; }

    .citas-empty-state[b-0um4p1miu1] { padding: 2.5rem 1.5rem; }

    .citas-card-footer[b-0um4p1miu1] { flex-wrap: wrap; }
}
/* /Pages/Private/Configuracion.razor.rz.scp.css */
/* ============================================
   CONFIGURACION - Estilos scoped
   ============================================ */

/* Tabs de tipo */
.config-tabs[b-3lvwr0o8xl] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0;
}

.config-tab[b-3lvwr0o8xl] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border: none;
    background: none;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.config-tab:hover[b-3lvwr0o8xl] {
    color: var(--color-primary);
}

.config-tab.active[b-3lvwr0o8xl] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

.config-tab .tab-count[b-3lvwr0o8xl] {
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    font-weight: 600;
}

.config-tab.active .tab-count[b-3lvwr0o8xl] {
    background: var(--color-primary);
    color: white;
}

/* Cards de horarios */
.schedule-cards[b-3lvwr0o8xl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.schedule-card[b-3lvwr0o8xl] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.schedule-card:hover[b-3lvwr0o8xl] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.schedule-card-header[b-3lvwr0o8xl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.schedule-card-title[b-3lvwr0o8xl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.schedule-card-title h3[b-3lvwr0o8xl] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.schedule-card-actions[b-3lvwr0o8xl] {
    display: flex;
    gap: 0.25rem;
}

.schedule-card-body[b-3lvwr0o8xl] {
    padding: 1rem;
}

/* Fila de tiempos */
.time-row[b-3lvwr0o8xl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.time-item[b-3lvwr0o8xl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.time-label[b-3lvwr0o8xl] {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-value[b-3lvwr0o8xl] {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
}

.time-value.entry[b-3lvwr0o8xl] {
    background: #dcfce7;
    color: #15803d;
}

.time-value.late[b-3lvwr0o8xl] {
    background: #fef3c7;
    color: #b45309;
}

.time-value.absent[b-3lvwr0o8xl] {
    background: #fee2e2;
    color: #dc2626;
}

.time-value.exit[b-3lvwr0o8xl] {
    background: #e0edfa;
    color: var(--color-primary);
}

.time-separator[b-3lvwr0o8xl] {
    color: #cbd5e1;
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
}

/* Preview en modal */
.time-preview[b-3lvwr0o8xl] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.preview-label[b-3lvwr0o8xl] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
    display: block;
    margin-bottom: 0.5rem;
}

.preview-flow[b-3lvwr0o8xl] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.preview-chip[b-3lvwr0o8xl] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.preview-chip.entry[b-3lvwr0o8xl] {
    background: #dcfce7;
    color: #15803d;
}

.preview-chip.late[b-3lvwr0o8xl] {
    background: #fef3c7;
    color: #b45309;
}

.preview-chip.absent[b-3lvwr0o8xl] {
    background: #fee2e2;
    color: #dc2626;
}

.preview-chip.exit[b-3lvwr0o8xl] {
    background: #e0edfa;
    color: var(--color-primary);
}

.preview-arrow[b-3lvwr0o8xl] {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* Botones de accion en card */
.btn-icon-action[b-3lvwr0o8xl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-action.btn-edit[b-3lvwr0o8xl] {
    background: #e0edfa;
    color: #2563eb;
}

.btn-icon-action.btn-edit:hover[b-3lvwr0o8xl] {
    background: #dbeafe;
    color: #1d4ed8;
}

.btn-icon-action.btn-delete[b-3lvwr0o8xl] {
    background: #fee2e2;
    color: #dc2626;
}

.btn-icon-action.btn-delete:hover[b-3lvwr0o8xl] {
    background: #fecaca;
    color: #b91c1c;
}

/* Advertencia de eliminacion */
.delete-warning[b-3lvwr0o8xl] {
    text-align: center;
    padding: 0.5rem 0;
}

.delete-warning svg[b-3lvwr0o8xl] {
    color: #f59e0b;
    margin-bottom: 0.75rem;
}

.delete-warning p[b-3lvwr0o8xl] {
    margin: 0.5rem 0;
}

.delete-warning .text-muted[b-3lvwr0o8xl] {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Dias laborables - display en cards */
.school-days-display[b-3lvwr0o8xl] {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

.day-chip[b-3lvwr0o8xl] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    background: #f1f5f9;
    color: #94a3b8;
}

.day-chip.active[b-3lvwr0o8xl] {
    background: #e0edfa;
    color: var(--color-primary);
}

/* Dias laborables - selector en modal */
.school-days-selector[b-3lvwr0o8xl] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.day-toggle[b-3lvwr0o8xl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 36px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    transition: all 0.2s;
    user-select: none;
}

.day-toggle input[b-3lvwr0o8xl] {
    display: none;
}

.day-toggle:hover[b-3lvwr0o8xl] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.day-toggle.active[b-3lvwr0o8xl] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .config-tabs[b-3lvwr0o8xl] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .config-tab[b-3lvwr0o8xl] {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    .schedule-cards[b-3lvwr0o8xl] {
        grid-template-columns: 1fr;
    }

    .time-row[b-3lvwr0o8xl] {
        gap: 0.35rem;
    }

    .time-value[b-3lvwr0o8xl] {
        font-size: 0.8rem;
        padding: 0.2rem 0.45rem;
    }
}
/* /Pages/Private/Contabilidad.razor.rz.scp.css */
/* ============================================
   CONTABILIDAD - I.E.P. Javier Perez de Cuellar
   Estilos de la pagina de tesoreria
   ============================================ */

/* ============================================
   MONTH SELECTOR
   ============================================ */
.month-selector[b-zfa89ovusz] {
    display: flex;
    gap: 0.5rem;
}

.month-selector select[b-zfa89ovusz] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
}

.month-selector select:focus[b-zfa89ovusz] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   BALANCE COLORS
   ============================================ */
.balance-positive[b-zfa89ovusz] {
    color: var(--color-success) !important;
}

.balance-negative[b-zfa89ovusz] {
    color: var(--color-error) !important;
}

/* ============================================
   TABS
   ============================================ */
.contab-tabs[b-zfa89ovusz] {
    display: flex;
    gap: 4px;
    background: white;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.contab-tab[b-zfa89ovusz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.contab-tab:hover[b-zfa89ovusz] {
    background: #f3f4f6;
    color: #374151;
}

.contab-tab.active[b-zfa89ovusz] {
    background: var(--color-primary);
    color: white;
}

.contab-tab svg[b-zfa89ovusz] {
    width: 16px;
    height: 16px;
}

/* ============================================
   SECTIONS
   ============================================ */
.contab-section[b-zfa89ovusz] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.contab-section-header[b-zfa89ovusz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.contab-section-header h3[b-zfa89ovusz] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

/* ============================================
   FILTERS
   ============================================ */
.contab-filters[b-zfa89ovusz] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.contab-filter[b-zfa89ovusz] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}

.contab-filter:focus[b-zfa89ovusz] {
    outline: none;
    border-color: var(--color-primary);
}

.contab-search[b-zfa89ovusz] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    min-width: 200px;
}

.contab-search:focus[b-zfa89ovusz] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
.btn-action[b-zfa89ovusz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    width: auto;
    height: auto;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-action:disabled[b-zfa89ovusz] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-success[b-zfa89ovusz] {
    background: var(--color-success);
    color: white;
}

.btn-success:hover:not(:disabled)[b-zfa89ovusz] {
    background: var(--color-success-dark);
}

.btn-danger[b-zfa89ovusz] {
    background: var(--color-error);
    color: white;
}

.btn-danger:hover:not(:disabled)[b-zfa89ovusz] {
    background: var(--color-error-dark);
}

.btn-primary-sm[b-zfa89ovusz] {
    background: var(--color-primary);
    color: white;
}

.btn-primary-sm:hover:not(:disabled)[b-zfa89ovusz] {
    background: var(--color-primary-dark);
}

.btn-cancel[b-zfa89ovusz] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-zfa89ovusz] {
    background: #f3f4f6;
}

/* ============================================
   TABLE
   ============================================ */
.contab-table-wrap[b-zfa89ovusz] {
    overflow-x: auto;
}

.contab-table[b-zfa89ovusz] {
    width: 100%;
    border-collapse: collapse;
}

.contab-table th[b-zfa89ovusz],
.contab-table td[b-zfa89ovusz] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.contab-table th[b-zfa89ovusz] {
    background: #f9fafb;
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.contab-table tbody tr:hover[b-zfa89ovusz] {
    background: #f9fafb;
}

.contab-code[b-zfa89ovusz] {
    font-family: monospace;
    background: #f3f4f6;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #4b5563;
}

.contab-concept[b-zfa89ovusz] {
    display: flex;
    flex-direction: column;
}

.contab-concept small[b-zfa89ovusz] {
    color: #9ca3af;
    font-size: 0.75rem;
}

.contab-badge[b-zfa89ovusz] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-income[b-zfa89ovusz] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.badge-expense[b-zfa89ovusz] {
    background: var(--bg-error-subtle);
    color: var(--color-error-dark);
}

.contab-amount[b-zfa89ovusz] {
    font-weight: 600;
    font-family: monospace;
    font-size: 0.9rem;
}

.amount-positive[b-zfa89ovusz] {
    color: var(--color-success);
}

.amount-negative[b-zfa89ovusz] {
    color: var(--color-error);
}

.contab-empty[b-zfa89ovusz] {
    text-align: center;
    padding: 2rem !important;
    color: #9ca3af;
    font-style: italic;
}

/* ============================================
   TABLE ACTIONS
   ============================================ */
.contab-actions[b-zfa89ovusz] {
    display: flex;
    gap: 0.35rem;
}

.contab-btn-icon[b-zfa89ovusz] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: white;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.contab-btn-icon:hover[b-zfa89ovusz] {
    background: #f3f4f6;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-icon-danger:hover[b-zfa89ovusz] {
    color: var(--color-error) !important;
    border-color: var(--color-error) !important;
    background: #fef2f2 !important;
}

/* ============================================
   TOTAL
   ============================================ */
.contab-total[b-zfa89ovusz] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    margin-top: 0.75rem;
    border-top: 2px solid #f3f4f6;
    font-weight: 600;
}

.contab-total span:first-child[b-zfa89ovusz] {
    color: #6b7280;
    font-size: 0.9rem;
}

.contab-total span:last-child[b-zfa89ovusz] {
    font-size: 1.15rem;
    font-family: monospace;
}

/* ============================================
   CONFIG GRID
   ============================================ */
.config-grid[b-zfa89ovusz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.config-list[b-zfa89ovusz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-item[b-zfa89ovusz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    gap: 0.75rem;
}

.config-item-info[b-zfa89ovusz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.config-item-name[b-zfa89ovusz] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1f2937;
}

.config-item-desc[b-zfa89ovusz] {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.config-empty[b-zfa89ovusz] {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
    font-size: 0.9rem;
}

/* ============================================
   MODALS
   ============================================ */
.modal-overlay[b-zfa89ovusz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-panel[b-zfa89ovusz] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-panel.modal-sm[b-zfa89ovusz] {
    max-width: 420px;
}

.modal-header[b-zfa89ovusz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.modal-header h2[b-zfa89ovusz] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.modal-header-success[b-zfa89ovusz] {
    background: var(--color-success);
}

.modal-header-success h2[b-zfa89ovusz] {
    color: white;
}

.modal-header-danger[b-zfa89ovusz] {
    background: var(--color-error);
}

.modal-header-danger h2[b-zfa89ovusz] {
    color: white;
}

.modal-close-btn[b-zfa89ovusz] {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header:not(.modal-header-success):not(.modal-header-danger) .modal-close-btn[b-zfa89ovusz] {
    background: #f3f4f6;
    color: #6b7280;
}

.modal-body[b-zfa89ovusz] {
    padding: 1.5rem;
}

.modal-footer[b-zfa89ovusz] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-row[b-zfa89ovusz] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group[b-zfa89ovusz] {
    flex: 1;
}

.form-group label[b-zfa89ovusz] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.35rem;
}

.form-group input[b-zfa89ovusz],
.form-group select[b-zfa89ovusz] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
    box-sizing: border-box;
}

.form-group input:focus[b-zfa89ovusz],
.form-group select:focus[b-zfa89ovusz] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.confirm-text[b-zfa89ovusz] {
    font-size: 0.95rem;
    color: #374151;
    text-align: center;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .config-grid[b-zfa89ovusz] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contab-tabs[b-zfa89ovusz] {
        overflow-x: auto;
    }

    .contab-section-header[b-zfa89ovusz] {
        flex-direction: column;
        align-items: stretch;
    }

    .contab-filters[b-zfa89ovusz] {
        flex-direction: column;
    }

    .contab-search[b-zfa89ovusz] {
        min-width: auto;
    }

    .form-row[b-zfa89ovusz] {
        flex-direction: column;
    }

    .month-selector[b-zfa89ovusz] {
        flex-wrap: wrap;
    }
}

/* ============================================
   PAYMENT CONFIG FORM (Config Tab)
   ============================================ */
.payment-config-section[b-zfa89ovusz] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.payment-config-section h3[b-zfa89ovusz] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.config-form-grid[b-zfa89ovusz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.config-form-grid .form-group label[b-zfa89ovusz] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 0.35rem;
    display: block;
}

.config-form-grid .form-group input[b-zfa89ovusz] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
}

.config-form-grid .form-group input:focus[b-zfa89ovusz] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

.contab-btn-ticket[b-zfa89ovusz] {
    color: #6366f1;
}

.contab-btn-ticket:hover[b-zfa89ovusz] {
    background: #eef2ff;
    color: #4f46e5;
}

@media (max-width: 768px) {
    .config-form-grid[b-zfa89ovusz] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Private/Dashboard.razor.rz.scp.css */
/* ============================================
   DASHBOARD - I.E.P. Javier Perez de Cuellar
   CSS Isolation — estilos especificos del dashboard
   ============================================ */

/* ============================================
   LOADING STATE
   ============================================ */
.dash-loading[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #6b7280;
}

.dash-loading p[b-dylgbh1fpo] {
    margin-top: 1rem;
    font-size: 0.95rem;
}

/* ============================================
   STATS GRID VARIANTS
   ============================================ */
.stats-grid-3[b-dylgbh1fpo] {
    grid-template-columns: repeat(3, 1fr);
}

/* ============================================
   STAT CARD ACCENT (KPIs secundarios)
   ============================================ */
.stat-card-accent[b-dylgbh1fpo] {
    position: relative;
    overflow: hidden;
}

.stat-card-accent[b-dylgbh1fpo]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

.accent-green[b-dylgbh1fpo]::before { background: var(--color-success); }
.accent-red[b-dylgbh1fpo]::before { background: var(--color-error); }
.accent-blue[b-dylgbh1fpo]::before { background: var(--color-primary); }

.stat-accent-icon[b-dylgbh1fpo] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-accent-icon svg[b-dylgbh1fpo] {
    width: 24px;
    height: 24px;
}

.accent-green .stat-accent-icon[b-dylgbh1fpo] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.accent-red .stat-accent-icon[b-dylgbh1fpo] {
    background: var(--bg-error-subtle);
    color: var(--color-error-dark);
}

.accent-blue .stat-accent-icon[b-dylgbh1fpo] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

.stat-accent-info h3[b-dylgbh1fpo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.stat-unit[b-dylgbh1fpo] {
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
}

.stat-accent-info p[b-dylgbh1fpo] {
    color: #6b7280;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.stat-detail[b-dylgbh1fpo] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.15rem;
}

/* ============================================
   DASH CARDS (contenedores de seccion)
   ============================================ */
.dash-card[b-dylgbh1fpo] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
}

.dash-card-header[b-dylgbh1fpo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.dash-card-header h3[b-dylgbh1fpo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.dash-card-header h3 svg[b-dylgbh1fpo] {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.dash-link[b-dylgbh1fpo] {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}

.dash-link:hover[b-dylgbh1fpo] {
    text-decoration: underline;
}

.dash-card-body[b-dylgbh1fpo] {
    padding: 1rem 1.25rem;
}

/* ============================================
   GRID LAYOUTS
   ============================================ */
.dash-grid-admin[b-dylgbh1fpo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dash-card-wide[b-dylgbh1fpo] {
    grid-column: 1 / -1;
}

.dash-grid-teacher[b-dylgbh1fpo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dash-grid-teacher > .dash-card:last-child[b-dylgbh1fpo] {
    grid-column: 1 / -1;
}

/* ============================================
   ACTIONS GRID VARIANTS
   ============================================ */
.actions-grid-4[b-dylgbh1fpo] {
    grid-template-columns: repeat(4, 1fr);
}

.actions-grid-6[b-dylgbh1fpo] {
    grid-template-columns: repeat(6, 1fr);
}

/* ============================================
   ATTENDANCE CHART (barras semanales)
   ============================================ */
.attendance-chart[b-dylgbh1fpo] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 0;
    min-height: 180px;
}

.attendance-bar-group[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.attendance-bar-container[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    height: 120px;
    justify-content: flex-end;
    gap: 2px;
}

.attendance-bar[b-dylgbh1fpo] {
    width: 100%;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.5s ease;
}

.bar-present[b-dylgbh1fpo] {
    background: var(--color-success);
}

.bar-absent[b-dylgbh1fpo] {
    background: var(--color-error);
    border-radius: 0;
}

.bar-label[b-dylgbh1fpo] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.bar-value[b-dylgbh1fpo] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-success);
}

/* ============================================
   EVENT LIST (dashboard)
   ============================================ */
.event-list[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-item-dash[b-dylgbh1fpo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f9fafb;
}

.event-item-dash:last-child[b-dylgbh1fpo] {
    border-bottom: none;
}

.event-type-dot[b-dylgbh1fpo] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.event-type-academico[b-dylgbh1fpo] { background: var(--color-primary); }
.event-type-examen[b-dylgbh1fpo] { background: var(--color-error-dark); }
.event-type-reunion[b-dylgbh1fpo] { background: #7c3aed; }
.event-type-feriado[b-dylgbh1fpo] { background: var(--color-warning); }
.event-type-actividad[b-dylgbh1fpo] { background: var(--color-success); }
.event-type-deportivo[b-dylgbh1fpo] { background: #06b6d4; }
.event-type-general[b-dylgbh1fpo] { background: #6b7280; }

.event-detail[b-dylgbh1fpo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.event-title-dash[b-dylgbh1fpo] {
    font-size: 0.88rem;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-date-dash[b-dylgbh1fpo] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.badge-event-type[b-dylgbh1fpo] {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    color: white;
    white-space: nowrap;
}

/* ============================================
   DEGREE LIST (alumnos por grado)
   ============================================ */
.degree-list[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.degree-item[b-dylgbh1fpo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.degree-info[b-dylgbh1fpo] {
    width: 120px;
    flex-shrink: 0;
}

.degree-name[b-dylgbh1fpo] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.degree-level[b-dylgbh1fpo] {
    font-size: 0.7rem;
    color: #9ca3af;
}

.degree-bar-wrapper[b-dylgbh1fpo] {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.degree-bar[b-dylgbh1fpo] {
    height: 100%;
    background: var(--color-primary);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.degree-count[b-dylgbh1fpo] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    width: 36px;
    text-align: right;
}

/* ============================================
   DISCIPLINE LIST (dashboard)
   ============================================ */
.discipline-list[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.discipline-item[b-dylgbh1fpo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f9fafb;
}

.discipline-item:last-child[b-dylgbh1fpo] {
    border-bottom: none;
}

.discipline-priority[b-dylgbh1fpo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.priority-alta[b-dylgbh1fpo] { background: var(--color-error); }
.priority-media[b-dylgbh1fpo] { background: var(--color-warning); }
.priority-baja[b-dylgbh1fpo] { background: var(--color-success); }

.discipline-detail[b-dylgbh1fpo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.discipline-student[b-dylgbh1fpo] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discipline-title[b-dylgbh1fpo] {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discipline-date[b-dylgbh1fpo] {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
}

/* ============================================
   SCHEDULE LIST (horario docente)
   ============================================ */
.schedule-list[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.schedule-item[b-dylgbh1fpo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 3px solid var(--color-primary);
}

.schedule-time[b-dylgbh1fpo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    min-width: 100px;
}

.time-start[b-dylgbh1fpo] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
}

.time-separator[b-dylgbh1fpo] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.time-end[b-dylgbh1fpo] {
    font-size: 0.8rem;
    color: #6b7280;
}

.schedule-detail[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
}

.schedule-course[b-dylgbh1fpo] {
    font-size: 0.88rem;
    font-weight: 500;
    color: #1f2937;
}

.schedule-section[b-dylgbh1fpo] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ============================================
   SECTION LIST (secciones docente)
   ============================================ */
.section-list[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-item[b-dylgbh1fpo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
}

.section-badge[b-dylgbh1fpo] {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.section-detail[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
}

.section-name[b-dylgbh1fpo] {
    font-size: 0.88rem;
    font-weight: 500;
    color: #1f2937;
}

.section-meta[b-dylgbh1fpo] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ============================================
   EMPTY STATE SMALL
   ============================================ */
.empty-state-small[b-dylgbh1fpo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: #9ca3af;
    text-align: center;
}

.empty-state-small svg[b-dylgbh1fpo] {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.empty-state-small p[b-dylgbh1fpo] {
    font-size: 0.85rem;
    margin: 0;
}

/* ============================================
   ACTION ICON COLORS (complementarios)
   ============================================ */
.action-icon.action-blue[b-dylgbh1fpo] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

.action-icon.action-green[b-dylgbh1fpo] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.action-icon.action-orange[b-dylgbh1fpo] {
    background: var(--bg-highlight-subtle);
    color: var(--color-warning-dark);
}

.action-icon.action-purple[b-dylgbh1fpo] {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.action-icon.action-teal[b-dylgbh1fpo] {
    background: rgba(20, 184, 166, 0.1);
    color: #0d9488;
}

.action-icon.action-red[b-dylgbh1fpo] {
    background: var(--bg-error-subtle);
    color: var(--color-error-dark);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .stats-grid-3[b-dylgbh1fpo] { grid-template-columns: repeat(3, 1fr); }
    .dash-grid-admin[b-dylgbh1fpo] { grid-template-columns: 1fr; }
    .dash-grid-teacher[b-dylgbh1fpo] { grid-template-columns: 1fr; }
    .dash-grid-teacher > .dash-card:last-child[b-dylgbh1fpo] { grid-column: auto; }
    .actions-grid-6[b-dylgbh1fpo] { grid-template-columns: repeat(3, 1fr); }
    .actions-grid-4[b-dylgbh1fpo] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .stats-grid-3[b-dylgbh1fpo] { grid-template-columns: 1fr; }
    .actions-grid-6[b-dylgbh1fpo] { grid-template-columns: repeat(2, 1fr); }
    .actions-grid-4[b-dylgbh1fpo] { grid-template-columns: 1fr; }
    .attendance-chart[b-dylgbh1fpo] { gap: 0.75rem; }
    .attendance-bar-container[b-dylgbh1fpo] { width: 30px; height: 80px; }
    .degree-info[b-dylgbh1fpo] { width: 80px; }
    .schedule-time[b-dylgbh1fpo] { min-width: 80px; }
}

@media (max-width: 480px) {
    .actions-grid-6[b-dylgbh1fpo] { grid-template-columns: 1fr; }
}
/* /Pages/Private/Disciplina.razor.rz.scp.css */
/* ============================================
   DISCIPLINA & PERMISOS - SCOPED STYLES
   Migrado de wwwroot/css/pages/disciplina.css
   ============================================ */

/* ============================================
   TABS
   ============================================ */
.tabs-container[b-fpughk5tzn] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: #f7fafc;
    padding: 0.5rem;
    border-radius: 12px;
    flex-wrap: wrap;
}

.tab[b-fpughk5tzn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: #718096;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab:hover[b-fpughk5tzn] {
    background: #edf2f7;
    color: #4a5568;
}

.tab.active[b-fpughk5tzn] {
    background: white;
    color: #1a365d;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.tab svg[b-fpughk5tzn] {
    width: 20px;
    height: 20px;
}

.tab-count[b-fpughk5tzn] {
    padding: 0.15rem 0.5rem;
    background: #e2e8f0;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
}

.tab.active .tab-count[b-fpughk5tzn] {
    background: #667eea;
    color: white;
}

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid[b-fpughk5tzn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-fpughk5tzn] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid;
}

.stat-card.total[b-fpughk5tzn] { border-left-color: #4299e1; }
.stat-card.permisos[b-fpughk5tzn], .stat-card.leve[b-fpughk5tzn] { border-left-color: #48bb78; }
.stat-card.sanciones[b-fpughk5tzn], .stat-card.moderada[b-fpughk5tzn] { border-left-color: #f56565; }
.stat-card.activos[b-fpughk5tzn], .stat-card.grave[b-fpughk5tzn] { border-left-color: #ed8936; }

.stat-icon[b-fpughk5tzn] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card.total .stat-icon[b-fpughk5tzn] { background: #ebf8ff; color: #4299e1; }
.stat-card.permisos .stat-icon[b-fpughk5tzn], .stat-card.leve .stat-icon[b-fpughk5tzn] { background: #f0fff4; color: #48bb78; }
.stat-card.sanciones .stat-icon[b-fpughk5tzn], .stat-card.moderada .stat-icon[b-fpughk5tzn] { background: #fff5f5; color: #f56565; }
.stat-card.activos .stat-icon[b-fpughk5tzn], .stat-card.grave .stat-icon[b-fpughk5tzn] { background: #fffaf0; color: #ed8936; }

.stat-icon svg[b-fpughk5tzn] {
    width: 24px;
    height: 24px;
}

.stat-info[b-fpughk5tzn] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-fpughk5tzn] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a365d;
}

.stat-label[b-fpughk5tzn] {
    font-size: 0.85rem;
    color: #718096;
}

/* ============================================
   FILTERS
   ============================================ */
.filters-container[b-fpughk5tzn] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.search-box[b-fpughk5tzn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex: 1;
    min-width: 200px;
}

.search-box svg[b-fpughk5tzn] {
    width: 20px;
    height: 20px;
    color: #a0aec0;
}

.search-input[b-fpughk5tzn] {
    border: none;
    background: transparent;
    font-size: 0.95rem;
    width: 100%;
    color: #2d3748;
}

.search-input:focus[b-fpughk5tzn] {
    outline: none;
}

.filter-group[b-fpughk5tzn] {
    min-width: 140px;
}

.filter-group label[b-fpughk5tzn] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #718096;
    margin-bottom: 0.25rem;
}

.date-range-row[b-fpughk5tzn] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.date-range-row .filter-group[b-fpughk5tzn] {
    min-width: 130px;
}

.quick-dates[b-fpughk5tzn] {
    display: flex;
    gap: 0.25rem;
}

.quick-date-btn[b-fpughk5tzn] {
    padding: 0.4rem 0.75rem;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    color: #4a5568;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.quick-date-btn:hover[b-fpughk5tzn] {
    background: #f7fafc;
    border-color: #4299e1;
}

.quick-date-btn.active[b-fpughk5tzn] {
    background: #4299e1;
    border-color: #4299e1;
    color: white;
}

/* ============================================
   TABLE
   ============================================ */
.table-container[b-fpughk5tzn] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

.data-table[b-fpughk5tzn] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-fpughk5tzn] {
    background: #f7fafc;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
}

.data-table td[b-fpughk5tzn] {
    padding: 1rem;
    border-bottom: 1px solid #f0f4f8;
    vertical-align: middle;
}

.data-table tbody tr[b-fpughk5tzn] {
    transition: background 0.2s ease;
}

.data-table tbody tr:hover[b-fpughk5tzn] {
    background: #f7fafc;
}

.data-table tbody tr.finalizado[b-fpughk5tzn] {
    opacity: 0.7;
}

.col-id[b-fpughk5tzn] { width: 60px; }
.col-persona[b-fpughk5tzn] { min-width: 180px; }
.col-titulo[b-fpughk5tzn] { min-width: 150px; }
.col-lugar[b-fpughk5tzn] { width: 120px; }
.col-prioridad[b-fpughk5tzn] { width: 100px; }
.col-fechas[b-fpughk5tzn] { width: 180px; }
.col-estado[b-fpughk5tzn] { width: 100px; }
.col-evidencia[b-fpughk5tzn] { width: 80px; text-align: center; }
.col-acciones[b-fpughk5tzn] { width: 120px; }

.persona-info[b-fpughk5tzn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.persona-dni[b-fpughk5tzn] {
    font-size: 0.8rem;
    color: #718096;
}

.avatar[b-fpughk5tzn] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-card-purple);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Priority badges */
.priority-badge[b-fpughk5tzn] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge.leve[b-fpughk5tzn] { background: #c6f6d5; color: #276749; }
.priority-badge.moderada[b-fpughk5tzn] { background: #feebc8; color: #c05621; }
.priority-badge.grave[b-fpughk5tzn] { background: #fed7d7; color: #c53030; }

/* Evidence indicator */
.evidence-indicator[b-fpughk5tzn] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.evidence-indicator svg[b-fpughk5tzn] {
    width: 18px;
    height: 18px;
}

.evidence-indicator.has-evidence[b-fpughk5tzn] { color: #48bb78; }
.evidence-indicator.no-evidence[b-fpughk5tzn] { color: #cbd5e0; }

/* Estado badges */
.estado-badge[b-fpughk5tzn] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.estado-badge.vigente[b-fpughk5tzn] { background: #c6f6d5; color: #276749; }
.estado-badge.finalizado[b-fpughk5tzn] { background: #e2e8f0; color: #718096; }

.fechas-info[b-fpughk5tzn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.fechas-info .separator[b-fpughk5tzn] {
    color: #cbd5e0;
}

/* Action buttons */
.action-buttons[b-fpughk5tzn] {
    display: flex;
    gap: 0.25rem;
}

.action-btn[b-fpughk5tzn] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #718096;
    transition: all 0.2s ease;
}

.action-btn:hover[b-fpughk5tzn] {
    background: #f7fafc;
}

.action-btn.view:hover[b-fpughk5tzn] { color: #4299e1; }
.action-btn.edit:hover[b-fpughk5tzn] { color: #ed8936; }
.action-btn.delete:hover[b-fpughk5tzn] { background: #fff5f5; color: #e53e3e; }

.action-btn svg[b-fpughk5tzn] {
    width: 16px;
    height: 16px;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state[b-fpughk5tzn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-fpughk5tzn] {
    width: 80px;
    height: 80px;
    background: #ebf8ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.empty-icon svg[b-fpughk5tzn] {
    width: 40px;
    height: 40px;
    color: #4299e1;
}

.empty-state h3[b-fpughk5tzn] {
    font-size: 1.25rem;
    color: #1a365d;
    margin-bottom: 0.5rem;
}

.empty-state p[b-fpughk5tzn] {
    color: #718096;
    font-size: 0.95rem;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination-container[b-fpughk5tzn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
}

.pagination-info[b-fpughk5tzn] {
    font-size: 0.9rem;
    color: #718096;
}

.pagination-controls[b-fpughk5tzn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.page-btn[b-fpughk5tzn], .page-num[b-fpughk5tzn] {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    color: #4a5568;
}

.page-btn:hover:not(:disabled)[b-fpughk5tzn], .page-num:hover[b-fpughk5tzn] {
    background: #f7fafc;
    border-color: #4299e1;
}

.page-btn:disabled[b-fpughk5tzn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-btn svg[b-fpughk5tzn] {
    width: 16px;
    height: 16px;
    color: #718096;
}

.page-num.active[b-fpughk5tzn] {
    background: #4299e1;
    border-color: #4299e1;
    color: white;
}

.page-size-selector[b-fpughk5tzn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #718096;
}

.page-size-selector select[b-fpughk5tzn] {
    width: auto;
    padding: 0.4rem 0.6rem;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay[b-fpughk5tzn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 1050);
    padding: 1rem;
}

.modal-overlay .modal-content[b-fpughk5tzn] {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    overflow: visible;
    z-index: auto;
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 550px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header[b-fpughk5tzn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h2[b-fpughk5tzn] {
    font-size: 1.25rem;
    color: #1a365d;
    margin: 0;
}

.btn-close[b-fpughk5tzn] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #718096;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-close:hover[b-fpughk5tzn] {
    background: #f7fafc;
    color: #1a365d;
}

.btn-close svg[b-fpughk5tzn] {
    width: 20px;
    height: 20px;
}

.modal-body[b-fpughk5tzn] {
    padding: 1.5rem;
    overflow-y: auto;
}

.modal-footer[b-fpughk5tzn] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
}

/* Form Styles */
.form-group[b-fpughk5tzn] {
    margin-bottom: 1rem;
}

.form-group label[b-fpughk5tzn] {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 0.35rem;
}

.form-row[b-fpughk5tzn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-textarea[b-fpughk5tzn] {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #2d3748;
    resize: vertical;
    font-family: inherit;
}

.form-textarea:focus[b-fpughk5tzn] {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

/* File upload */
.file-upload-area[b-fpughk5tzn] {
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.file-upload-area:hover[b-fpughk5tzn] {
    border-color: #4299e1;
    background: #ebf8ff;
}

.file-upload-area svg[b-fpughk5tzn] {
    width: 32px;
    height: 32px;
    color: #a0aec0;
    margin-bottom: 0.5rem;
}

.file-upload-area p[b-fpughk5tzn] {
    font-size: 0.85rem;
    color: #718096;
    margin: 0;
}

.file-upload-area .file-name[b-fpughk5tzn] {
    font-weight: 600;
    color: #4299e1;
}

/* Delete confirmation modal */
.delete-modal .modal-content[b-fpughk5tzn] {
    max-width: 400px;
    text-align: center;
}

.delete-icon[b-fpughk5tzn] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.delete-icon svg[b-fpughk5tzn] {
    width: 28px;
    height: 28px;
    color: #e53e3e;
}

.btn-danger[b-fpughk5tzn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: #e53e3e;
    color: white;
    transition: all 0.2s ease;
}

.btn-danger:hover[b-fpughk5tzn] {
    background: #c53030;
}

/* Loading */
.loading-container[b-fpughk5tzn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.spinner[b-fpughk5tzn] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #4299e1;
    border-radius: 50%;
    animation: spin-b-fpughk5tzn 0.8s linear infinite;
}

@keyframes spin-b-fpughk5tzn {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .stats-grid[b-fpughk5tzn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tabs-container[b-fpughk5tzn] {
        flex-direction: column;
    }

    .stats-grid[b-fpughk5tzn] {
        grid-template-columns: 1fr;
    }

    .filters-container[b-fpughk5tzn] {
        flex-direction: column;
    }

    .date-range-row[b-fpughk5tzn] {
        flex-direction: column;
    }

    .table-container[b-fpughk5tzn] {
        overflow-x: auto;
    }

    .pagination-container[b-fpughk5tzn] {
        flex-direction: column;
        gap: 1rem;
    }

    .form-row[b-fpughk5tzn] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Private/Encuestas.razor.rz.scp.css */
/* ============================================
   ENCUESTAS PAGE - I.E.P. Javier Perez de Cuellar
   Gestion de encuestas para la comunidad educativa
   Colors: --color-primary: #0055A3
           --color-primary-dark: #00284D
           --color-highlight: #F5A623
           --color-success: #22c55e
   ============================================ */

/* Layout base (page-container, page-header) en layout.css */

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid[b-kjen499fry] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-kjen499fry] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
}

.stat-card:hover[b-kjen499fry] {
    transform: translateY(-2px);
}

.stat-card.total .stat-icon[b-kjen499fry] {
    background: var(--color-primary-dark);
}

.stat-card.role-stat .stat-icon[b-kjen499fry] {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.stat-icon[b-kjen499fry] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-kjen499fry] {
    width: 24px;
    height: 24px;
    color: white;
}

.stat-info[b-kjen499fry] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-kjen499fry] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.stat-label[b-kjen499fry] {
    font-size: 0.85rem;
    color: #718096;
}

/* ============================================
   FILTERS
   ============================================ */
.filters-container[b-kjen499fry] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-kjen499fry] {
    position: relative;
    min-width: 280px;
    flex: 1;
    max-width: 400px;
}

.search-box svg[b-kjen499fry] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #a0aec0;
    pointer-events: none;
}

.search-input[b-kjen499fry] {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.search-input:focus[b-kjen499fry] {
    outline: none;
    border-color: var(--color-primary);
}

.filter-group[b-kjen499fry] {
    display: flex;
    gap: 0.5rem;
}

.filter-select[b-kjen499fry] {
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.filter-select:focus[b-kjen499fry] {
    outline: none;
    border-color: var(--color-primary);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary[b-kjen499fry] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-kjen499fry] {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-kjen499fry] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary svg[b-kjen499fry] {
    width: 18px;
    height: 18px;
}

.btn-secondary[b-kjen499fry] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #edf2f7;
    color: #4a5568;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover:not(:disabled)[b-kjen499fry] {
    background: #e2e8f0;
}

.btn-secondary:disabled[b-kjen499fry] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-danger[b-kjen499fry] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #e53e3e;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover:not(:disabled)[b-kjen499fry] {
    background: #c53030;
}

.btn-danger:disabled[b-kjen499fry] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-close[b-kjen499fry] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7fafc;
    border: none;
    border-radius: 8px;
    color: #718096;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close:hover[b-kjen499fry] {
    background: #edf2f7;
    color: #e53e3e;
}

.btn-close svg[b-kjen499fry] {
    width: 18px;
    height: 18px;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading-state[b-kjen499fry] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    color: #718096;
}

.loading-state .spinner[b-kjen499fry] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: enc-spin 0.8s linear infinite;
}

@@keyframes enc-spin {
    to[b-kjen499fry] { transform: rotate(360deg); }
}

.spinner-small[b-kjen499fry] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: enc-spin 0.6s linear infinite;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state[b-kjen499fry] {
    text-align: center;
    padding: 3rem 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.empty-icon[b-kjen499fry] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.empty-icon svg[b-kjen499fry] {
    width: 64px;
    height: 64px;
    color: #a0aec0;
}

.empty-state h3[b-kjen499fry] {
    color: #2d3748;
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.empty-state p[b-kjen499fry] {
    color: #718096;
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

/* ============================================
   TABLE
   ============================================ */
.table-container[b-kjen499fry] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.data-table[b-kjen499fry] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-kjen499fry] {
    background: #f7fafc;
    padding: 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td[b-kjen499fry] {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: #2d3748;
}

.data-table tbody tr[b-kjen499fry] {
    transition: background-color 0.15s ease;
}

.data-table tbody tr:hover[b-kjen499fry] {
    background: #f7fafc;
}

.data-table tbody tr:last-child td[b-kjen499fry] {
    border-bottom: none;
}

/* Question Cell */
.question-cell[b-kjen499fry] {
    max-width: 300px;
}

.question-text[b-kjen499fry] {
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
}

/* Role Badge */
.role-badge[b-kjen499fry] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

/* Options */
.options-list-preview[b-kjen499fry] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.option-tag[b-kjen499fry] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.option-more[b-kjen499fry] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 500;
}

.no-options[b-kjen499fry] {
    color: #a0aec0;
    font-size: 0.85rem;
    font-style: italic;
}

/* Date */
.date-text[b-kjen499fry] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #718096;
}

.date-text svg[b-kjen499fry] {
    width: 14px;
    height: 14px;
}

/* Table Actions */
.table-actions[b-kjen499fry] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-kjen499fry] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.action-btn svg[b-kjen499fry] {
    width: 16px;
    height: 16px;
}

.action-btn.edit[b-kjen499fry] {
    background: #fef3c7;
    color: #b45309;
}

.action-btn.edit:hover[b-kjen499fry] {
    background: #fde68a;
}

.action-btn.delete[b-kjen499fry] {
    background: #fee2e2;
    color: var(--color-error-dark);
}

.action-btn.delete:hover[b-kjen499fry] {
    background: #fecaca;
}

/* ============================================
   MOBILE CARDS VIEW
   ============================================ */
.cards-container[b-kjen499fry] {
    display: none;
}

.survey-card[b-kjen499fry] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.survey-card .card-header[b-kjen499fry] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
}

.survey-card .card-actions[b-kjen499fry] {
    display: flex;
    gap: 0.35rem;
}

.survey-card .card-body[b-kjen499fry] {
    padding: 1rem;
}

.survey-card .card-body h3[b-kjen499fry] {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}

.survey-card .card-footer[b-kjen499fry] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e2e8f0;
    background: #f7fafc;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay[b-kjen499fry] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: enc-fadeIn 0.2s ease;
}

@@keyframes enc-fadeIn {
    from[b-kjen499fry] { opacity: 0; }
    to[b-kjen499fry] { opacity: 1; }
}

.modal-content[b-kjen499fry] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: enc-slideUp 0.25s ease;
}

@@keyframes enc-slideUp {
    from[b-kjen499fry] { opacity: 0; transform: translateY(20px); }
    to[b-kjen499fry] { opacity: 1; transform: translateY(0); }
}

.modal-content.modal-small[b-kjen499fry] {
    max-width: 420px;
}

.modal-header[b-kjen499fry] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h2[b-kjen499fry] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-primary-dark);
}

.modal-body[b-kjen499fry] {
    padding: 1.5rem;
}

.modal-footer[b-kjen499fry] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f7fafc;
    border-radius: 0 0 12px 12px;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group[b-kjen499fry] {
    margin-bottom: 1rem;
}

.form-group:last-child[b-kjen499fry] {
    margin-bottom: 0;
}

.form-group label[b-kjen499fry] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.875rem;
}

.form-select[b-kjen499fry] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-select:focus[b-kjen499fry] {
    outline: none;
    border-color: var(--color-primary);
}

.form-textarea[b-kjen499fry] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-textarea:focus[b-kjen499fry] {
    outline: none;
    border-color: var(--color-primary);
}

.form-input[b-kjen499fry] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-kjen499fry] {
    outline: none;
    border-color: var(--color-primary);
}

/* ============================================
   OPTIONS EDITOR (Modal)
   ============================================ */
.options-header[b-kjen499fry] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.btn-add-option[b-kjen499fry] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: #edf2f7;
    color: var(--color-primary);
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-option:hover[b-kjen499fry] {
    background: #e2e8f0;
}

.btn-add-option svg[b-kjen499fry] {
    width: 14px;
    height: 14px;
}

.options-editor[b-kjen499fry] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option-row[b-kjen499fry] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.option-number[b-kjen499fry] {
    width: 24px;
    height: 24px;
    background: #edf2f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #718096;
    flex-shrink: 0;
}

.btn-remove-option[b-kjen499fry] {
    width: 28px;
    height: 28px;
    border: none;
    background: #fee2e2;
    color: var(--color-error-dark);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-remove-option:hover[b-kjen499fry] {
    background: #fecaca;
}

.btn-remove-option svg[b-kjen499fry] {
    width: 14px;
    height: 14px;
}

.options-hint[b-kjen499fry] {
    color: #a0aec0;
    font-size: 0.85rem;
    font-style: italic;
    margin: 0.5rem 0 0;
}

/* ============================================
   DELETE CONFIRMATION
   ============================================ */
.delete-warning[b-kjen499fry] {
    text-align: center;
    padding: 0.5rem 0;
}

.warning-icon[b-kjen499fry] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.warning-icon svg[b-kjen499fry] {
    width: 48px;
    height: 48px;
    color: #e53e3e;
}

.delete-warning p[b-kjen499fry] {
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.delete-question[b-kjen499fry] {
    font-weight: 600;
    color: #1e293b;
    font-style: italic;
}

.delete-note[b-kjen499fry] {
    color: #a0aec0;
    font-size: 0.85rem;
}

/* ============================================
   RESPONSIVE - 1024px
   ============================================ */
@@media (max-width: 1024px) {
    .stats-grid[b-kjen499fry] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   RESPONSIVE - 768px
   ============================================ */
@@media (max-width: 768px) {
    .stats-grid[b-kjen499fry] {
        grid-template-columns: 1fr 1fr;
    }

    .page-header[b-kjen499fry] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-actions[b-kjen499fry] {
        width: 100%;
    }

    .header-actions .btn-primary[b-kjen499fry] {
        width: 100%;
        justify-content: center;
    }

    .filters-container[b-kjen499fry] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-kjen499fry] {
        min-width: 100%;
        max-width: 100%;
    }

    .filter-select[b-kjen499fry] {
        width: 100%;
    }

    /* Hide desktop table, show cards */
    .table-container[b-kjen499fry] {
        display: none;
    }

    .cards-container[b-kjen499fry] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .modal-content[b-kjen499fry] {
        max-width: 95%;
    }
}

/* ============================================
   RESPONSIVE - 480px
   ============================================ */
@@media (max-width: 480px) {
    .stats-grid[b-kjen499fry] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Private/EstadoCuenta.razor.rz.scp.css */
/* ============================================
   ESTADO DE CUENTA - I.E.P. Javier Perez de Cuellar
   Estilos de la pagina de estado de cuenta
   ============================================ */

/* ============================================
   SEARCH SECTION
   ============================================ */
.estado-search-section[b-grt7jhidx6] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.estado-search-group[b-grt7jhidx6] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.estado-search-group label[b-grt7jhidx6] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
}

.estado-select[b-grt7jhidx6] {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.estado-select:focus[b-grt7jhidx6] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   PARENT INFO
   ============================================ */
.estado-parent-info[b-grt7jhidx6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.estado-parent-info svg[b-grt7jhidx6] {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ============================================
   STAT CARD CONTENT (internal layout)
   ============================================ */
.estado-stat-content[b-grt7jhidx6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

/* ============================================
   PROGRESS SECTION
   ============================================ */
.estado-progress-section[b-grt7jhidx6] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.estado-progress-header[b-grt7jhidx6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.estado-progress-title[b-grt7jhidx6] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
}

.estado-progress-value[b-grt7jhidx6] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
}

.estado-progress-bar[b-grt7jhidx6] {
    width: 100%;
    height: 12px;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.estado-progress-fill[b-grt7jhidx6] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}

.estado-progress-paid[b-grt7jhidx6] {
    background: var(--color-success);
}

.estado-progress-legend[b-grt7jhidx6] {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.estado-legend-item[b-grt7jhidx6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.estado-legend-dot[b-grt7jhidx6] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-paid[b-grt7jhidx6] {
    background: var(--color-success);
}

.dot-pending[b-grt7jhidx6] {
    background: var(--color-error);
}

.dot-discount[b-grt7jhidx6] {
    background: var(--color-primary);
}

/* ============================================
   SECTION
   ============================================ */
.estado-section[b-grt7jhidx6] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.estado-section-header[b-grt7jhidx6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.estado-section-header h3[b-grt7jhidx6] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.estado-year-badge[b-grt7jhidx6] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ============================================
   TABLE
   ============================================ */
.estado-table-wrap[b-grt7jhidx6] {
    overflow-x: auto;
}

.estado-table[b-grt7jhidx6] {
    width: 100%;
    border-collapse: collapse;
}

.estado-table th[b-grt7jhidx6],
.estado-table td[b-grt7jhidx6] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.estado-table th[b-grt7jhidx6] {
    background: #f9fafb;
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.estado-table tbody tr[b-grt7jhidx6] {
    transition: background 0.15s;
}

.estado-table tbody tr:hover[b-grt7jhidx6] {
    filter: brightness(0.97);
}

/* Row status colors */
.row-paid[b-grt7jhidx6] {
    background: rgba(34, 197, 94, 0.06);
}

.row-partial[b-grt7jhidx6] {
    background: rgba(245, 166, 35, 0.06);
}

.row-pending[b-grt7jhidx6] {
    background: rgba(239, 68, 68, 0.06);
}

/* ============================================
   TABLE AMOUNTS & BADGES
   ============================================ */
.estado-month-name[b-grt7jhidx6] {
    font-weight: 500;
    color: #1f2937;
}

.estado-amount[b-grt7jhidx6] {
    font-family: monospace;
    font-size: 0.9rem;
    color: #374151;
}

.estado-paid[b-grt7jhidx6] {
    color: var(--color-success);
    font-weight: 600;
}

.estado-discount[b-grt7jhidx6] {
    color: var(--color-primary);
    font-weight: 500;
}

.estado-no-discount[b-grt7jhidx6] {
    color: #d1d5db;
}

.estado-balance-pending[b-grt7jhidx6] {
    color: var(--color-error);
    font-weight: 600;
}

.estado-balance-paid[b-grt7jhidx6] {
    color: var(--color-success);
    font-weight: 600;
}

.estado-badge[b-grt7jhidx6] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-paid[b-grt7jhidx6] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.badge-partial[b-grt7jhidx6] {
    background: var(--bg-highlight-subtle);
    color: #b37a00;
}

.badge-pending[b-grt7jhidx6] {
    background: var(--bg-error-subtle);
    color: var(--color-error-dark);
}

/* ============================================
   TOTAL ROW
   ============================================ */
.estado-total-row[b-grt7jhidx6] {
    background: #f9fafb !important;
    border-top: 2px solid #e5e7eb;
}

.estado-total-row td[b-grt7jhidx6] {
    padding: 0.85rem 0.75rem;
    font-size: 0.9rem;
}

.estado-total-row strong[b-grt7jhidx6] {
    font-family: monospace;
    font-size: 0.95rem;
}

/* ============================================
   EMPTY STATES
   ============================================ */
.estado-empty[b-grt7jhidx6] {
    text-align: center;
    padding: 2rem !important;
    color: #9ca3af;
    font-style: italic;
}

.estado-empty-state[b-grt7jhidx6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    background: white;
    border-radius: 12px;
    padding: 3rem 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.estado-empty-state svg[b-grt7jhidx6] {
    color: #d1d5db;
    margin-bottom: 1rem;
}

.estado-empty-state h3[b-grt7jhidx6] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
}

.estado-empty-state p[b-grt7jhidx6] {
    font-size: 0.9rem;
    color: #9ca3af;
    margin: 0;
    max-width: 320px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .stats-grid-3[b-grt7jhidx6] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .stats-grid-3[b-grt7jhidx6] {
        grid-template-columns: 1fr;
    }

    .estado-progress-legend[b-grt7jhidx6] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .estado-section-header[b-grt7jhidx6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .estado-table th[b-grt7jhidx6],
    .estado-table td[b-grt7jhidx6] {
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
    }

    .estado-amount[b-grt7jhidx6] {
        font-size: 0.8rem;
    }

    .estado-badge[b-grt7jhidx6] {
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
    }

    .estado-stat-content[b-grt7jhidx6] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .estado-parent-info[b-grt7jhidx6] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .estado-table[b-grt7jhidx6] {
        font-size: 0.75rem;
    }

    .estado-table th[b-grt7jhidx6],
    .estado-table td[b-grt7jhidx6] {
        padding: 0.5rem 0.35rem;
    }

    .estado-progress-header[b-grt7jhidx6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* ============================================
   YEAR SELECTOR
   ============================================ */
.estado-year-select[b-grt7jhidx6] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
}

.estado-year-select:focus[b-grt7jhidx6] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

/* ============================================
   STUDENTS SECTION
   ============================================ */
.estado-students-grid[b-grt7jhidx6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.estado-student-card[b-grt7jhidx6] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.estado-student-info[b-grt7jhidx6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.estado-student-avatar[b-grt7jhidx6] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.estado-student-name[b-grt7jhidx6] {
    display: block;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.estado-student-dni[b-grt7jhidx6] {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;
}

.estado-student-plan[b-grt7jhidx6] {
    background: #f8fafc;
    border-radius: 8px;
    padding: 0.75rem;
}

.estado-plan-row[b-grt7jhidx6] {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 0.25rem 0;
    color: #64748b;
}

.estado-plan-row strong[b-grt7jhidx6] {
    color: #1e293b;
}

.estado-plan-progress[b-grt7jhidx6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.estado-plan-counts[b-grt7jhidx6] {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
}

.estado-no-plan[b-grt7jhidx6] {
    font-size: 0.82rem;
    color: #94a3b8;
    font-style: italic;
}

.estado-student-actions[b-grt7jhidx6] {
    display: flex;
    justify-content: flex-end;
}

.estado-btn-pdf[b-grt7jhidx6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.estado-btn-pdf:hover[b-grt7jhidx6] {
    background: var(--color-primary-dark);
}

.estado-btn-pdf:disabled[b-grt7jhidx6] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .estado-students-grid[b-grt7jhidx6] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Private/ExamenesVirtuales.razor.rz.scp.css */
/* ============================================
   EXAMENES VIRTUALES - I.E.P. Javier Perez de Cuellar
   Gestion de evaluaciones en linea
   ============================================ */

/* ============================================
   KPI STAT CARDS
   ============================================ */
.examenes-stats-grid[b-r7vi4207pb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.examenes-stat-card[b-r7vi4207pb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-left: 3px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s;
}

.examenes-stat-card:hover[b-r7vi4207pb] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.examenes-stat-total[b-r7vi4207pb] {
    border-left-color: var(--color-primary);
}

.examenes-stat-published[b-r7vi4207pb] {
    border-left-color: var(--color-success);
}

.examenes-stat-submissions[b-r7vi4207pb] {
    border-left-color: var(--color-highlight);
}

.examenes-stat-average[b-r7vi4207pb] {
    border-left-color: #8b5cf6;
}

.examenes-stat-icon[b-r7vi4207pb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.examenes-stat-icon svg[b-r7vi4207pb] {
    width: 22px;
    height: 22px;
}

.examenes-stat-total .examenes-stat-icon[b-r7vi4207pb] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

.examenes-stat-published .examenes-stat-icon[b-r7vi4207pb] {
    background: var(--bg-success-subtle);
    color: var(--color-success);
}

.examenes-stat-submissions .examenes-stat-icon[b-r7vi4207pb] {
    background: var(--bg-highlight-subtle);
    color: var(--color-highlight);
}

.examenes-stat-average .examenes-stat-icon[b-r7vi4207pb] {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.examenes-stat-info[b-r7vi4207pb] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.examenes-stat-value[b-r7vi4207pb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.examenes-stat-label[b-r7vi4207pb] {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ============================================
   FILTERS
   ============================================ */
.examenes-filters[b-r7vi4207pb] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.examenes-filter-group[b-r7vi4207pb] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 140px;
    flex: 1 1 180px;
}

.examenes-btn-clear-filters[b-r7vi4207pb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    align-self: flex-end;
    white-space: nowrap;
}

.examenes-btn-clear-filters:hover[b-r7vi4207pb] {
    background: #fecaca;
}

.examenes-filter-group label[b-r7vi4207pb] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.examenes-filter-select[b-r7vi4207pb] {
    padding: 0.55rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1f2937;
    background: white;
    transition: border-color 0.2s;
    cursor: pointer;
}

.examenes-filter-select:focus[b-r7vi4207pb] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   LOADING STATE
   ============================================ */
.examenes-loading[b-r7vi4207pb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    color: #718096;
}

.examenes-spinner[b-r7vi4207pb] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: examenes-spin-b-r7vi4207pb 0.8s linear infinite;
}

@keyframes examenes-spin-b-r7vi4207pb {
    to { transform: rotate(360deg); }
}

/* ============================================
   EMPTY STATE
   ============================================ */
.examenes-empty[b-r7vi4207pb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 0.75rem;
    text-align: center;
    color: #6b7280;
    background: white;
    border-radius: 12px;
    padding: 3rem 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.examenes-empty-icon[b-r7vi4207pb] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary-faint);
    border-radius: 50%;
    margin-bottom: 0.5rem;
}

.examenes-empty-icon svg[b-r7vi4207pb] {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
}

.examenes-empty h3[b-r7vi4207pb] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.examenes-empty p[b-r7vi4207pb] {
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
    max-width: 400px;
}

/* ============================================
   TABLE (Desktop)
   ============================================ */
.examenes-table-container[b-r7vi4207pb] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.examenes-table[b-r7vi4207pb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.examenes-table thead th[b-r7vi4207pb] {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.examenes-table tbody td[b-r7vi4207pb] {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.examenes-table tbody tr:hover[b-r7vi4207pb] {
    background-color: #f8fafc;
}

.examenes-td-title[b-r7vi4207pb] {
    font-weight: 500;
    color: #1f2937 !important;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.examenes-td-center[b-r7vi4207pb] {
    text-align: center;
}

/* Points Badge */
.examenes-points-badge[b-r7vi4207pb] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Status Badges */
.examenes-status[b-r7vi4207pb] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.examenes-status-published[b-r7vi4207pb] {
    background: #dcfce7;
    color: #166534;
}

.examenes-status-draft[b-r7vi4207pb] {
    background: #f1f5f9;
    color: #64748b;
}

/* Question Type Badges */
.examenes-type-badge[b-r7vi4207pb] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.examenes-type-multiple[b-r7vi4207pb] {
    background: #dbeafe;
    color: #1e40af;
}

.examenes-type-truefalse[b-r7vi4207pb] {
    background: #fef3c7;
    color: #92400e;
}

.examenes-type-open[b-r7vi4207pb] {
    background: #ede9fe;
    color: #5b21b6;
}

/* Action Buttons */
.examenes-actions[b-r7vi4207pb] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.examenes-action-btn[b-r7vi4207pb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
}

.examenes-action-btn svg[b-r7vi4207pb] {
    width: 16px;
    height: 16px;
}

.examenes-action-edit[b-r7vi4207pb] {
    color: var(--color-primary);
}

.examenes-action-edit:hover[b-r7vi4207pb] {
    background: var(--bg-primary-subtle);
}

.examenes-action-questions[b-r7vi4207pb] {
    color: #8b5cf6;
}

.examenes-action-questions:hover[b-r7vi4207pb] {
    background: rgba(139, 92, 246, 0.1);
}

.examenes-action-results[b-r7vi4207pb] {
    color: var(--color-highlight);
}

.examenes-action-results:hover[b-r7vi4207pb] {
    background: var(--bg-highlight-subtle);
}

.examenes-action-delete[b-r7vi4207pb] {
    color: var(--color-error);
}

.examenes-action-delete:hover[b-r7vi4207pb] {
    background: var(--bg-error-subtle);
}

/* ============================================
   CARDS (Mobile)
   ============================================ */
.examenes-cards-container[b-r7vi4207pb] {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.examenes-card[b-r7vi4207pb] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.examenes-card-header[b-r7vi4207pb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1rem 0.5rem;
    gap: 0.75rem;
}

.examenes-card-header h3[b-r7vi4207pb] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    flex: 1;
}

.examenes-card-body[b-r7vi4207pb] {
    padding: 0 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.examenes-card-detail[b-r7vi4207pb] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #4b5563;
}

.examenes-card-label[b-r7vi4207pb] {
    font-weight: 600;
    color: #374151;
    min-width: 70px;
}

.examenes-card-meta[b-r7vi4207pb] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.examenes-card-count[b-r7vi4207pb] {
    font-size: 0.78rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
}

.examenes-card-footer[b-r7vi4207pb] {
    display: flex;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #f1f5f9;
    justify-content: flex-end;
}

/* ============================================
   MODAL OVERLAY
   ============================================ */
.examenes-modal-overlay[b-r7vi4207pb] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    padding: 1rem;
    animation: examenes-fadeIn-b-r7vi4207pb 0.2s ease;
}

@keyframes examenes-fadeIn-b-r7vi4207pb {
    from { opacity: 0; }
    to { opacity: 1; }
}

.examenes-modal-content[b-r7vi4207pb] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: examenes-slideUp-b-r7vi4207pb 0.25s ease;
}

@keyframes examenes-slideUp-b-r7vi4207pb {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.examenes-modal-sm[b-r7vi4207pb] {
    max-width: 480px;
}

.examenes-modal-md[b-r7vi4207pb] {
    max-width: 600px;
}

.examenes-modal-lg[b-r7vi4207pb] {
    max-width: 850px;
}

.examenes-modal-header[b-r7vi4207pb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.examenes-modal-header h2[b-r7vi4207pb] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.examenes-modal-header-danger[b-r7vi4207pb] {
    border-bottom-color: #fecaca;
}

.examenes-modal-header-danger h2[b-r7vi4207pb] {
    color: var(--color-error-dark);
}

.examenes-modal-subtitle[b-r7vi4207pb] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0.2rem 0 0 0;
}

.examenes-btn-close[b-r7vi4207pb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.examenes-btn-close:hover[b-r7vi4207pb] {
    background: #f3f4f6;
    color: #1f2937;
}

.examenes-btn-close svg[b-r7vi4207pb] {
    width: 18px;
    height: 18px;
}

.examenes-modal-body[b-r7vi4207pb] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.examenes-modal-footer[b-r7vi4207pb] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.examenes-form-group[b-r7vi4207pb] {
    margin-bottom: 1rem;
}

.examenes-form-group label[b-r7vi4207pb] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
}

.examenes-form-input[b-r7vi4207pb],
.examenes-form-select[b-r7vi4207pb],
.examenes-form-textarea[b-r7vi4207pb] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1f2937;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.examenes-form-input:focus[b-r7vi4207pb],
.examenes-form-select:focus[b-r7vi4207pb],
.examenes-form-textarea:focus[b-r7vi4207pb] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.examenes-form-textarea[b-r7vi4207pb] {
    resize: vertical;
    min-height: 70px;
}

.examenes-form-row[b-r7vi4207pb] {
    display: flex;
    gap: 1rem;
}

.examenes-form-row .examenes-form-group[b-r7vi4207pb] {
    flex: 1;
}

/* Checkbox */
.examenes-checkbox-group[b-r7vi4207pb] {
    margin-top: 0.5rem;
}

.examenes-checkbox-label[b-r7vi4207pb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

.examenes-checkbox-label input[type="checkbox"][b-r7vi4207pb] {
    display: none;
}

.examenes-checkbox-custom[b-r7vi4207pb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.examenes-checkbox-label input[type="checkbox"]:checked + .examenes-checkbox-custom[b-r7vi4207pb] {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.examenes-checkbox-label input[type="checkbox"]:checked + .examenes-checkbox-custom[b-r7vi4207pb]::after {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

/* ============================================
   BUTTONS
   ============================================ */
.examenes-btn-primary[b-r7vi4207pb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.examenes-btn-primary:hover:not(:disabled)[b-r7vi4207pb] {
    background: var(--color-primary-dark);
}

.examenes-btn-primary:disabled[b-r7vi4207pb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.examenes-btn-primary svg[b-r7vi4207pb] {
    width: 16px;
    height: 16px;
}

.examenes-btn-secondary[b-r7vi4207pb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.examenes-btn-secondary:hover:not(:disabled)[b-r7vi4207pb] {
    background: #f9fafb;
    border-color: #9ca3af;
}

.examenes-btn-secondary:disabled[b-r7vi4207pb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.examenes-btn-danger[b-r7vi4207pb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.examenes-btn-danger:hover:not(:disabled)[b-r7vi4207pb] {
    background: var(--color-error-dark);
}

.examenes-btn-danger:disabled[b-r7vi4207pb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.examenes-btn-spinner[b-r7vi4207pb] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: examenes-spin-b-r7vi4207pb 0.6s linear infinite;
}

/* ============================================
   DELETE WARNING
   ============================================ */
.examenes-delete-warning[b-r7vi4207pb] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #fef2f2;
    border-radius: 10px;
    border: 1px solid #fecaca;
    align-items: flex-start;
}

.examenes-delete-warning svg[b-r7vi4207pb] {
    width: 24px;
    height: 24px;
    color: var(--color-error);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.examenes-delete-warning p[b-r7vi4207pb] {
    margin: 0;
    font-size: 0.9rem;
    color: #7f1d1d;
    line-height: 1.5;
}

/* ============================================
   EXAM INFO BAR (inside Questions Modal)
   ============================================ */
.examenes-exam-info-bar[b-r7vi4207pb] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: var(--bg-sky);
    border-radius: 10px;
    border: 1px solid #dbeafe;
    margin-bottom: 1.5rem;
}

.examenes-info-item[b-r7vi4207pb] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.examenes-info-label[b-r7vi4207pb] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.examenes-info-value[b-r7vi4207pb] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

/* ============================================
   QUESTIONS LIST
   ============================================ */
.examenes-questions-list[b-r7vi4207pb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.examenes-question-item[b-r7vi4207pb] {
    background: #f9fafb;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    border: 1px solid #e5e7eb;
    transition: border-color 0.2s;
}

.examenes-question-item:hover[b-r7vi4207pb] {
    border-color: #d1d5db;
}

.examenes-question-header[b-r7vi4207pb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.examenes-question-title-row[b-r7vi4207pb] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    flex: 1;
}

.examenes-question-number[b-r7vi4207pb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.examenes-question-text[b-r7vi4207pb] {
    font-size: 0.9rem;
    color: #1f2937;
    font-weight: 500;
    line-height: 1.5;
    padding-top: 0.2rem;
}

.examenes-question-meta[b-r7vi4207pb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Answers list inside question */
.examenes-answers-list[b-r7vi4207pb] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-left: 2.5rem;
}

.examenes-answer-item[b-r7vi4207pb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #4b5563;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    background: white;
    border: 1px solid #e5e7eb;
}

.examenes-answer-correct[b-r7vi4207pb] {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.examenes-answer-icon[b-r7vi4207pb] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.examenes-answer-correct .examenes-answer-icon[b-r7vi4207pb] {
    color: var(--color-success);
}

.examenes-no-questions[b-r7vi4207pb] {
    text-align: center;
    padding: 2rem 1rem;
    color: #6b7280;
    font-size: 0.9rem;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px dashed #d1d5db;
    margin-bottom: 1.5rem;
}

.examenes-no-questions p[b-r7vi4207pb] {
    margin: 0;
}

/* ============================================
   ADD QUESTION SECTION
   ============================================ */
.examenes-add-question-section[b-r7vi4207pb] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    border: 2px solid #e5e7eb;
    border-style: dashed;
}

.examenes-add-question-section h3[b-r7vi4207pb] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 1rem 0;
}

.examenes-answers-editor[b-r7vi4207pb] {
    margin-bottom: 1rem;
}

.examenes-answers-header[b-r7vi4207pb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.examenes-answers-header label[b-r7vi4207pb] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
}

.examenes-btn-add-answer[b-r7vi4207pb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.examenes-btn-add-answer:hover[b-r7vi4207pb] {
    background: var(--bg-primary-faint);
}

.examenes-btn-add-answer svg[b-r7vi4207pb] {
    width: 14px;
    height: 14px;
}

.examenes-answer-editor-row[b-r7vi4207pb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.examenes-answer-correct-check[b-r7vi4207pb] {
    flex-shrink: 0;
}

.examenes-answer-editor-row .examenes-form-input[b-r7vi4207pb] {
    flex: 1;
}

.examenes-btn-remove-answer[b-r7vi4207pb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-error);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.examenes-btn-remove-answer:hover[b-r7vi4207pb] {
    background: var(--bg-error-subtle);
}

.examenes-btn-remove-answer svg[b-r7vi4207pb] {
    width: 16px;
    height: 16px;
}

.examenes-add-question-actions[b-r7vi4207pb] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* ============================================
   RESULTS MODAL
   ============================================ */
.examenes-results-stats[b-r7vi4207pb] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.examenes-result-stat[b-r7vi4207pb] {
    text-align: center;
    padding: 1rem 0.5rem;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.examenes-result-stat-value[b-r7vi4207pb] {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.2rem;
}

.examenes-result-stat-label[b-r7vi4207pb] {
    display: block;
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.examenes-result-avg[b-r7vi4207pb] {
    border-color: #dbeafe;
    background: #eff6ff;
}

.examenes-result-avg .examenes-result-stat-value[b-r7vi4207pb] {
    color: #1e40af;
}

.examenes-result-high[b-r7vi4207pb] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.examenes-result-high .examenes-result-stat-value[b-r7vi4207pb] {
    color: #166534;
}

.examenes-result-low[b-r7vi4207pb] {
    border-color: #fecaca;
    background: #fef2f2;
}

.examenes-result-low .examenes-result-stat-value[b-r7vi4207pb] {
    color: #991b1b;
}

/* Progress Bar */
.examenes-progress-section[b-r7vi4207pb] {
    margin-bottom: 1.5rem;
}

.examenes-progress-label[b-r7vi4207pb] {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #4b5563;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.examenes-progress-bar[b-r7vi4207pb] {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
}

.examenes-progress-fill[b-r7vi4207pb] {
    height: 100%;
    background: var(--color-primary);
    border-radius: 99px;
    transition: width 0.5s ease;
}

/* Results Table Wrapper */
.examenes-results-table-wrapper[b-r7vi4207pb] {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.examenes-results-table-wrapper .examenes-table[b-r7vi4207pb] {
    margin: 0;
}

/* Score display */
.examenes-score[b-r7vi4207pb] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82rem;
}

.examenes-score-high[b-r7vi4207pb] {
    background: #dcfce7;
    color: #166534;
}

.examenes-score-mid[b-r7vi4207pb] {
    background: #fef3c7;
    color: #92400e;
}

.examenes-score-low[b-r7vi4207pb] {
    background: #fee2e2;
    color: #991b1b;
}

.examenes-score-pending[b-r7vi4207pb] {
    font-size: 0.82rem;
    color: #94a3b8;
    font-style: italic;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .examenes-stats-grid[b-r7vi4207pb] {
        grid-template-columns: repeat(2, 1fr);
    }

    .examenes-results-stats[b-r7vi4207pb] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .examenes-stats-grid[b-r7vi4207pb] {
        grid-template-columns: 1fr 1fr;
    }

    .examenes-table-container[b-r7vi4207pb] {
        display: none;
    }

    .examenes-cards-container[b-r7vi4207pb] {
        display: flex;
    }

    .examenes-form-row[b-r7vi4207pb] {
        flex-direction: column;
        gap: 0;
    }

    .examenes-modal-content[b-r7vi4207pb] {
        margin: 0;
        border-radius: 12px;
        max-height: 95vh;
    }

    .examenes-modal-lg[b-r7vi4207pb] {
        max-width: 100%;
    }

    .examenes-results-stats[b-r7vi4207pb] {
        grid-template-columns: repeat(2, 1fr);
    }

    .examenes-results-stats .examenes-result-stat:last-child[b-r7vi4207pb] {
        grid-column: span 2;
    }

    .examenes-exam-info-bar[b-r7vi4207pb] {
        gap: 1rem;
    }

    .examenes-question-header[b-r7vi4207pb] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .examenes-answers-list[b-r7vi4207pb] {
        padding-left: 1rem;
    }

    .examenes-filter-group[b-r7vi4207pb] {
        min-width: 100%;
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .examenes-stats-grid[b-r7vi4207pb] {
        grid-template-columns: 1fr;
    }

    .examenes-stat-card[b-r7vi4207pb] {
        padding: 1rem;
    }

    .examenes-stat-value[b-r7vi4207pb] {
        font-size: 1.25rem;
    }

    .examenes-results-stats[b-r7vi4207pb] {
        grid-template-columns: 1fr 1fr;
    }

    .examenes-modal-body[b-r7vi4207pb] {
        padding: 1rem;
    }

    .examenes-modal-header[b-r7vi4207pb] {
        padding: 1rem;
    }

    .examenes-modal-footer[b-r7vi4207pb] {
        padding: 0.75rem 1rem;
        flex-direction: column;
    }

    .examenes-modal-footer button[b-r7vi4207pb] {
        width: 100%;
        justify-content: center;
    }

    .examenes-answer-editor-row[b-r7vi4207pb] {
        flex-wrap: wrap;
    }

    .examenes-answer-editor-row .examenes-form-input[b-r7vi4207pb] {
        min-width: 0;
    }
}
/* /Pages/Private/Guardian/Asistencia.razor.rz.scp.css */
/* ============================================
   PORTAL GUARDIAN
   ============================================ */
/* Usar .page-container del layout principal */

/* ============================================
   CHILDREN GRID (Dashboard)
   ============================================ */
.children-grid[b-sq1jcclzxe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.child-card[b-sq1jcclzxe] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}

.child-card:hover[b-sq1jcclzxe] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.child-card-header[b-sq1jcclzxe] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.child-avatar[b-sq1jcclzxe] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0055A3, #00284D);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.child-avatar svg[b-sq1jcclzxe] {
    stroke: white;
}

.child-info h3[b-sq1jcclzxe] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.25rem;
}

.child-relation[b-sq1jcclzxe] {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.child-card-details[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row[b-sq1jcclzxe] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.detail-label[b-sq1jcclzxe] {
    color: #6b7280;
    font-weight: 500;
}

.detail-value[b-sq1jcclzxe] {
    color: #111827;
    font-weight: 600;
}

/* ============================================
   QUICK ACCESS SECTION
   ============================================ */
.quick-access-section[b-sq1jcclzxe] {
    margin-top: 2rem;
}

.quick-access-section h2[b-sq1jcclzxe] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #00284D;
    margin: 0 0 1.25rem;
}

.quick-access-grid[b-sq1jcclzxe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.quick-access-card[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.quick-access-card:hover[b-sq1jcclzxe] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.quick-access-card .card-icon[b-sq1jcclzxe] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.quick-access-card:hover .card-icon[b-sq1jcclzxe] {
    transform: scale(1.1);
}

.quick-access-card .card-content[b-sq1jcclzxe] {
    text-align: center;
}

.quick-access-card h3[b-sq1jcclzxe] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.quick-access-card p[b-sq1jcclzxe] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

/* Card Colors */
.schedule-card .card-icon[b-sq1jcclzxe] {
    background: #e0f2fe;
}

.schedule-card .card-icon svg[b-sq1jcclzxe] {
    stroke: #0055A3;
}

.schedule-card:hover[b-sq1jcclzxe] {
    border-color: #0055A3;
}

.schedule-card h3[b-sq1jcclzxe] {
    color: #0055A3;
}

.attendance-card .card-icon[b-sq1jcclzxe] {
    background: #dcfce7;
}

.attendance-card .card-icon svg[b-sq1jcclzxe] {
    stroke: #15803d;
}

.attendance-card:hover[b-sq1jcclzxe] {
    border-color: #15803d;
}

.attendance-card h3[b-sq1jcclzxe] {
    color: #15803d;
}

.grades-card .card-icon[b-sq1jcclzxe] {
    background: #fef3c7;
}

.grades-card .card-icon svg[b-sq1jcclzxe] {
    stroke: #92400e;
}

.grades-card:hover[b-sq1jcclzxe] {
    border-color: #92400e;
}

.grades-card h3[b-sq1jcclzxe] {
    color: #92400e;
}

.account-card .card-icon[b-sq1jcclzxe] {
    background: #fee2e2;
}

.account-card .card-icon svg[b-sq1jcclzxe] {
    stroke: #dc2626;
}

.account-card:hover[b-sq1jcclzxe] {
    border-color: #dc2626;
}

.account-card h3[b-sq1jcclzxe] {
    color: #dc2626;
}

/* Usar clases estándar del sistema:
   - .dash-loading para estados de carga
   - .page-header para encabezados
   - .header-info para información del header
*/

/* Child Selector */
.child-selector[b-sq1jcclzxe] {
    margin-bottom: 1.5rem;
}

.child-selector label[b-sq1jcclzxe] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.child-tabs[b-sq1jcclzxe] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.child-tab[b-sq1jcclzxe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: fit-content;
}

.child-tab:hover[b-sq1jcclzxe] {
    border-color: #0055A3;
    background: #f0f7ff;
}

.child-tab.active[b-sq1jcclzxe] {
    border-color: #0055A3;
    background: #0055A3;
    color: white;
}

.child-tab-avatar[b-sq1jcclzxe] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.child-tab.active .child-tab-avatar[b-sq1jcclzxe] {
    background: rgba(255, 255, 255, 0.2);
}

.child-tab.active .child-tab-avatar svg[b-sq1jcclzxe] {
    stroke: white;
}

.child-tab-info[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
}

.child-tab-name[b-sq1jcclzxe] {
    font-weight: 600;
    font-size: 0.9rem;
}

.child-tab-grade[b-sq1jcclzxe] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Student Info Card */
.student-info-card[b-sq1jcclzxe] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.student-info-header[b-sq1jcclzxe] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.student-avatar-large[b-sq1jcclzxe] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0055A3, #00284D);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.student-avatar-large svg[b-sq1jcclzxe] {
    stroke: white;
}

.student-details h2[b-sq1jcclzxe] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.35rem;
}

.student-meta[b-sq1jcclzxe] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.meta-item[b-sq1jcclzxe] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #6b7280;
}

/* ============================================
   SECTIONS (Collapsible)
   ============================================ */
.portal-section[b-sq1jcclzxe] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.portal-section:hover[b-sq1jcclzxe] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.portal-section.expanded[b-sq1jcclzxe] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-toggle[b-sq1jcclzxe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    transition: background 0.15s;
}

.section-toggle:hover[b-sq1jcclzxe] {
    background: #f9fafb;
}

.section-toggle-left[b-sq1jcclzxe] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.section-toggle-left svg[b-sq1jcclzxe] {
    color: #0055A3;
    flex-shrink: 0;
}

.chevron[b-sq1jcclzxe] {
    transition: transform 0.2s;
    color: #9ca3af;
}

.portal-section.expanded .chevron[b-sq1jcclzxe] {
    transform: rotate(180deg);
}

.section-badge[b-sq1jcclzxe] {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-weight: 500;
    background: #e0f2fe;
    color: #0055A3;
}

.section-badge.badge-success[b-sq1jcclzxe] {
    background: #dcfce7;
    color: #15803d;
}

.section-badge.badge-warning[b-sq1jcclzxe] {
    background: #fef3c7;
    color: #92400e;
}

.section-badge.badge-danger[b-sq1jcclzxe] {
    background: #fee2e2;
    color: #dc2626;
}

.section-content[b-sq1jcclzxe] {
    padding: 0 1.25rem 1.25rem;
    animation: fadeIn-b-sq1jcclzxe 0.2s ease-out;
}

@keyframes fadeIn-b-sq1jcclzxe {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-empty[b-sq1jcclzxe] {
    text-align: center;
    color: #9ca3af;
    font-size: 0.9rem;
    padding: 2rem 0;
}

.subsection-title[b-sq1jcclzxe] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem;
}

/* ============================================
   PORTAL TABLE
   ============================================ */
.portal-table[b-sq1jcclzxe] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.portal-table thead th[b-sq1jcclzxe] {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.portal-table tbody td[b-sq1jcclzxe] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.portal-table tbody tr:hover[b-sq1jcclzxe] {
    background: #f9fafb;
}

/* Grades */
.period-block[b-sq1jcclzxe] {
    margin-bottom: 1.25rem;
}

.period-block h4[b-sq1jcclzxe] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0055A3;
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e5e7eb;
}

.grade-cell[b-sq1jcclzxe] {
    text-align: center;
}

.grade-value[b-sq1jcclzxe] {
    display: inline-block;
    min-width: 32px;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
}

.grade-excellent[b-sq1jcclzxe] {
    background: #dcfce7;
    color: #15803d;
}

.grade-good[b-sq1jcclzxe] {
    background: #e0f2fe;
    color: #0369a1;
}

.grade-regular[b-sq1jcclzxe] {
    background: #fef3c7;
    color: #92400e;
}

.grade-low[b-sq1jcclzxe] {
    background: #fee2e2;
    color: #dc2626;
}

.grade-pending[b-sq1jcclzxe] {
    color: #d1d5db;
    font-weight: 500;
}

/* Attendance */
.attendance-summary[b-sq1jcclzxe] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.att-stat[b-sq1jcclzxe] {
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
}

.att-stat .att-num[b-sq1jcclzxe] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.att-stat .att-label[b-sq1jcclzxe] {
    font-size: 0.75rem;
    font-weight: 500;
}

.att-present[b-sq1jcclzxe] { background: #dcfce7; color: #15803d; }
.att-late[b-sq1jcclzxe] { background: #fef3c7; color: #92400e; }
.att-absent[b-sq1jcclzxe] { background: #fee2e2; color: #dc2626; }
.att-justified[b-sq1jcclzxe] { background: #e0f2fe; color: #0369a1; }

.att-badge[b-sq1jcclzxe] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.att-badge-present[b-sq1jcclzxe] { background: #dcfce7; color: #15803d; }
.att-badge-late[b-sq1jcclzxe] { background: #fef3c7; color: #92400e; }
.att-badge-absent[b-sq1jcclzxe] { background: #fee2e2; color: #dc2626; }
.att-badge-justified[b-sq1jcclzxe] { background: #e0f2fe; color: #0369a1; }

/* Discipline */
.priority-badge[b-sq1jcclzxe] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.priority-high[b-sq1jcclzxe] { background: #fee2e2; color: #dc2626; }
.priority-medium[b-sq1jcclzxe] { background: #fef3c7; color: #92400e; }
.priority-low[b-sq1jcclzxe] { background: #dcfce7; color: #15803d; }
.priority-normal[b-sq1jcclzxe] { background: #f3f4f6; color: #6b7280; }

/* Schedule */
.schedule-day[b-sq1jcclzxe] {
    margin-bottom: 1rem;
}

.schedule-day h4[b-sq1jcclzxe] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0055A3;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.schedule-items[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.schedule-item[b-sq1jcclzxe] {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.85rem;
    align-items: center;
}

.schedule-time[b-sq1jcclzxe] {
    font-weight: 600;
    color: #0055A3;
}

.schedule-course[b-sq1jcclzxe] {
    font-weight: 500;
    color: #111827;
}

.schedule-teacher[b-sq1jcclzxe] {
    color: #6b7280;
    font-size: 0.8rem;
}

/* Account */
.account-overview[b-sq1jcclzxe] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.account-stat[b-sq1jcclzxe] {
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: #f9fafb;
    border-radius: 10px;
}

.account-label[b-sq1jcclzxe] {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.account-value[b-sq1jcclzxe] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
}

.account-value.debt[b-sq1jcclzxe] { color: #dc2626; }
.account-value.paid[b-sq1jcclzxe] { color: #15803d; }
.account-value.discount[b-sq1jcclzxe] { color: #0369a1; }

.text-danger[b-sq1jcclzxe] { color: #dc2626; font-weight: 600; }
.text-success[b-sq1jcclzxe] { color: #15803d; font-weight: 600; }

/* Events */
.events-list[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-item[b-sq1jcclzxe] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 10px;
}

.event-date-badge[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 0.35rem;
    background: #0055A3;
    color: white;
    border-radius: 8px;
    flex-shrink: 0;
}

.event-day[b-sq1jcclzxe] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.event-month[b-sq1jcclzxe] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-info[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.event-info strong[b-sq1jcclzxe] {
    font-size: 0.9rem;
    color: #111827;
}

.event-info span[b-sq1jcclzxe] {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .portal-container[b-sq1jcclzxe] {
        padding: 1rem;
    }

    .portal-header h1[b-sq1jcclzxe] {
        font-size: 1.25rem;
    }

    .child-tabs[b-sq1jcclzxe] {
        flex-direction: column;
    }

    .student-info-header[b-sq1jcclzxe] {
        flex-direction: column;
        text-align: center;
    }

    .student-meta[b-sq1jcclzxe] {
        justify-content: center;
    }

    .attendance-summary[b-sq1jcclzxe] {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-overview[b-sq1jcclzxe] {
        grid-template-columns: repeat(2, 1fr);
    }

    .schedule-item[b-sq1jcclzxe] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .portal-table[b-sq1jcclzxe] {
        font-size: 0.78rem;
    }

    .portal-table thead th[b-sq1jcclzxe],
    .portal-table tbody td[b-sq1jcclzxe] {
        padding: 0.45rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .attendance-summary[b-sq1jcclzxe] {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-overview[b-sq1jcclzxe] {
        grid-template-columns: 1fr 1fr;
    }
}

}

/* ============================================
   CALENDARIO - HORARIO GUARDIAN
   ============================================ */
.calendar-nav[b-sq1jcclzxe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.nav-left[b-sq1jcclzxe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-today[b-sq1jcclzxe] {
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-today:hover[b-sq1jcclzxe] {
    border-color: #0055A3;
    color: #0055A3;
}

.nav-arrows[b-sq1jcclzxe] {
    display: flex;
    gap: 0.25rem;
}

.btn-arrow[b-sq1jcclzxe] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-arrow:hover[b-sq1jcclzxe] {
    border-color: #0055A3;
    color: #0055A3;
}

.btn-arrow svg[b-sq1jcclzxe] {
    width: 18px;
    height: 18px;
}

.nav-center[b-sq1jcclzxe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.calendar-icon[b-sq1jcclzxe] {
    width: 20px;
    height: 20px;
    color: #0055A3;
}

.current-date[b-sq1jcclzxe] {
    font-weight: 600;
    color: #00284D;
    font-size: 1rem;
}

.nav-right[b-sq1jcclzxe] {
    display: flex;
    align-items: center;
}

.view-switcher[b-sq1jcclzxe] {
    display: flex;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.view-btn[b-sq1jcclzxe] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn:hover[b-sq1jcclzxe] {
    color: #0055A3;
}

.view-btn.active[b-sq1jcclzxe] {
    background: #0055A3;
    color: white;
}

.schedule-container-guardian[b-sq1jcclzxe] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.day-view[b-sq1jcclzxe] {
    padding: 1rem;
}

.day-header[b-sq1jcclzxe] {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

.day-title[b-sq1jcclzxe] {
    font-weight: 600;
    color: #00284D;
    text-transform: capitalize;
}

.time-grid[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
}

.time-row[b-sq1jcclzxe] {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    min-height: 60px;
}

.time-row:last-child[b-sq1jcclzxe] {
    border-bottom: none;
}

.time-label[b-sq1jcclzxe] {
    width: 80px;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    border-right: 2px solid #e5e7eb;
    flex-shrink: 0;
}

.time-start[b-sq1jcclzxe] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.time-end[b-sq1jcclzxe] {
    font-size: 0.7rem;
    color: #9ca3af;
}

.time-content[b-sq1jcclzxe] {
    flex: 1;
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.class-block[b-sq1jcclzxe] {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.class-info[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
}

.class-name[b-sq1jcclzxe] {
    font-weight: 600;
    font-size: 0.95rem;
}

.class-teacher[b-sq1jcclzxe] {
    font-size: 0.8rem;
    opacity: 0.9;
}

.empty-slot-readonly[b-sq1jcclzxe] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #e5e7eb;
    border-radius: 6px;
    color: #d1d5db;
}

.time-row.break-row[b-sq1jcclzxe] {
    background: #fef9e7;
    min-height: 40px;
}

.time-row.break-row .time-label[b-sq1jcclzxe] {
    background: #fdf6e3;
}

.break-block[b-sq1jcclzxe] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background: #f5a623;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.break-name[b-sq1jcclzxe] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
}

.week-view[b-sq1jcclzxe] {
    overflow-x: auto;
}

.week-header[b-sq1jcclzxe] {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
}

.time-column-header[b-sq1jcclzxe] {
    width: 80px;
    flex-shrink: 0;
}

.day-column-header[b-sq1jcclzxe] {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e5e7eb;
}

.day-name[b-sq1jcclzxe] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.week-body[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
}

.week-row[b-sq1jcclzxe] {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    min-height: 50px;
}

.week-row .time-label[b-sq1jcclzxe] {
    width: 80px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    border-right: 2px solid #e5e7eb;
    flex-shrink: 0;
    gap: 2px;
}

.week-row .time-label .time-start[b-sq1jcclzxe] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

.week-row .time-label .time-end[b-sq1jcclzxe] {
    font-size: 0.65rem;
    color: #9ca3af;
}

.week-cell[b-sq1jcclzxe] {
    flex: 1;
    min-width: 120px;
    padding: 0.25rem;
    border-left: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
    justify-content: center;
}

.week-cell.today[b-sq1jcclzxe] {
    background: #dbeafe;
}

.week-row.break-row[b-sq1jcclzxe] {
    background: #fef9e7;
    min-height: 36px;
}

.week-row.break-row .time-label[b-sq1jcclzxe] {
    background: #fdf6e3;
}

.week-break-cell[b-sq1jcclzxe] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
}

.week-break-cell .break-name[b-sq1jcclzxe] {
    background: #f5a623;
    color: white;
    padding: 0.25rem 1.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.class-chip[b-sq1jcclzxe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.class-chip span[b-sq1jcclzxe] {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.month-view[b-sq1jcclzxe] {
    padding: 1rem;
}

.month-header[b-sq1jcclzxe] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.month-day-header[b-sq1jcclzxe] {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.month-grid[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.month-week[b-sq1jcclzxe] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.month-cell[b-sq1jcclzxe] {
    min-height: 80px;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
}

.month-cell.other-month[b-sq1jcclzxe] {
    background: #f9fafb;
    opacity: 0.5;
}

.month-cell.today[b-sq1jcclzxe] {
    border-color: #0055A3;
    background: #dbeafe;
}

.cell-day[b-sq1jcclzxe] {
    font-weight: 600;
    color: #00284D;
    font-size: 0.8rem;
}

.cell-courses[b-sq1jcclzxe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.25rem;
}

.course-pill[b-sq1jcclzxe] {
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.more-courses[b-sq1jcclzxe] {
    font-size: 0.6rem;
    color: #6b7280;
    text-align: center;
    font-weight: 500;
}

.color-blue[b-sq1jcclzxe] { background: #4299e1; }
.color-green[b-sq1jcclzxe] { background: #48bb78; }
.color-purple[b-sq1jcclzxe] { background: #9f7aea; }
.color-orange[b-sq1jcclzxe] { background: #ed8936; }
.color-red[b-sq1jcclzxe] { background: #fc8181; }
.color-pink[b-sq1jcclzxe] { background: #ed64a6; }
.color-yellow[b-sq1jcclzxe] { background: #ecc94b; }
.color-teal[b-sq1jcclzxe] { background: #38b2ac; }
.color-indigo[b-sq1jcclzxe] { background: #667eea; }
.color-cyan[b-sq1jcclzxe] { background: #0bc5ea; }
.color-gray[b-sq1jcclzxe] { background: #a0aec0; }

@media (max-width: 768px) {
    .calendar-nav[b-sq1jcclzxe] {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-left[b-sq1jcclzxe], .nav-center[b-sq1jcclzxe], .nav-right[b-sq1jcclzxe] {
        width: 100%;
        justify-content: center;
    }

    .week-view[b-sq1jcclzxe] {
        font-size: 0.85rem;
    }

    .day-column-header[b-sq1jcclzxe] {
        min-width: 100px;
    }

    .week-cell[b-sq1jcclzxe] {
        min-width: 100px;
    }
}
/* /Pages/Private/Guardian/EstadoCuenta.razor.rz.scp.css */
/* ============================================
   ESTADO DE CUENTA - COMPONENT STYLES

   Nota: Este archivo usa CSS Component Isolation (scoped CSS).
   Los estilos estándar del sistema (.page-container, .page-header,
   .dash-loading, etc.) vienen del layout global y NO se redefinen aquí.
   Solo se incluyen estilos específicos de Estado de Cuenta.
   ============================================ */

/* ============================================
   PARENT INFO CARD
   ============================================ */

.estado-parent-info[b-18vxikes18] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.estado-parent-info svg[b-18vxikes18] {
    color: #0055A3;
    flex-shrink: 0;
}

.estado-parent-info span[b-18vxikes18] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
}

/* ============================================
   STATS GRID
   ============================================ */

.stats-grid[b-18vxikes18] {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.stats-grid-3[b-18vxikes18] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.stats-grid-1[b-18vxikes18] {
    grid-template-columns: 1fr;
}

/* ============================================
   STAT CARDS
   ============================================ */

.stat-card[b-18vxikes18] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    transition: box-shadow 0.2s, transform 0.2s;
}

.stat-card:hover[b-18vxikes18] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.stat-card-accent[b-18vxikes18] {
    border-left-width: 4px;
}

.accent-blue[b-18vxikes18] {
    border-left-color: #0055A3;
}

.accent-green[b-18vxikes18] {
    border-left-color: #22c55e;
}

.accent-red[b-18vxikes18] {
    border-left-color: #ef4444;
}

.accent-purple[b-18vxikes18] {
    border-left-color: #a855f7;
}

.estado-stat-content[b-18vxikes18] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.stat-accent-icon[b-18vxikes18] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f3f4f6;
}

.accent-blue .stat-accent-icon[b-18vxikes18] {
    background: #dbeafe;
    color: #0055A3;
}

.accent-green .stat-accent-icon[b-18vxikes18] {
    background: #dcfce7;
    color: #22c55e;
}

.accent-red .stat-accent-icon[b-18vxikes18] {
    background: #fee2e2;
    color: #ef4444;
}

.accent-purple .stat-accent-icon[b-18vxikes18] {
    background: #f3e8ff;
    color: #a855f7;
}

.stat-accent-info[b-18vxikes18] {
    flex: 1;
}

.stat-accent-info h3[b-18vxikes18] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.stat-accent-info p[b-18vxikes18] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.25rem;
}

.stat-detail[b-18vxikes18] {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 400;
}

/* ============================================
   PROGRESS SECTION
   ============================================ */

.estado-progress-section[b-18vxikes18] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.estado-progress-header[b-18vxikes18] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.estado-progress-title[b-18vxikes18] {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.estado-progress-value[b-18vxikes18] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0055A3;
}

.estado-progress-bar[b-18vxikes18] {
    width: 100%;
    height: 12px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.estado-progress-fill[b-18vxikes18] {
    height: 100%;
    transition: width 0.6s ease;
    border-radius: 6px;
}

.estado-progress-paid[b-18vxikes18] {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.estado-progress-legend[b-18vxikes18] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.estado-legend-item[b-18vxikes18] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
}

.estado-legend-dot[b-18vxikes18] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-paid[b-18vxikes18] {
    background: #22c55e;
}

.dot-pending[b-18vxikes18] {
    background: #ef4444;
}

.dot-discount[b-18vxikes18] {
    background: #a855f7;
}

/* ============================================
   TABLE SECTION
   ============================================ */

.estado-section[b-18vxikes18] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.estado-section-header[b-18vxikes18] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
}

.estado-section-header h3[b-18vxikes18] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.estado-year-badge[b-18vxikes18] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: #dbeafe;
    color: #0055A3;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
}

.estado-table-wrap[b-18vxikes18] {
    overflow-x: auto;
}

.estado-table[b-18vxikes18] {
    width: 100%;
    border-collapse: collapse;
}

.estado-table thead[b-18vxikes18] {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.estado-table th[b-18vxikes18] {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.estado-table tbody tr[b-18vxikes18] {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.15s;
}

.estado-table tbody tr:hover[b-18vxikes18] {
    background-color: #f9fafb;
}

.estado-table tbody tr:last-child[b-18vxikes18] {
    border-bottom: none;
}

.estado-table td[b-18vxikes18] {
    padding: 1rem;
    font-size: 0.9rem;
    color: #374151;
}

.estado-month-name[b-18vxikes18] {
    font-weight: 600;
    color: #111827;
}

.estado-concept[b-18vxikes18] {
    color: #6b7280;
}

.estado-amount[b-18vxikes18] {
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

.estado-discount[b-18vxikes18] {
    color: #a855f7;
    font-weight: 600;
}

.estado-no-discount[b-18vxikes18] {
    color: #d1d5db;
}

.estado-paid[b-18vxikes18] {
    color: #22c55e;
}

.estado-balance-pending[b-18vxikes18] {
    color: #ef4444;
    font-weight: 600;
}

.estado-balance-paid[b-18vxikes18] {
    color: #22c55e;
    font-weight: 600;
}

/* ============================================
   BADGES
   ============================================ */

.estado-badge[b-18vxikes18] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge-paid[b-18vxikes18] {
    background: #dcfce7;
    color: #16a34a;
}

.badge-partial[b-18vxikes18] {
    background: #fef3c7;
    color: #d97706;
}

.badge-pending[b-18vxikes18] {
    background: #fee2e2;
    color: #dc2626;
}

/* ============================================
   ROW STATUS CLASSES
   ============================================ */

.row-paid[b-18vxikes18] {
    background-color: #f0fdf4;
}

.row-partial[b-18vxikes18] {
    background-color: #fffbeb;
}

.row-pending[b-18vxikes18] {
    background-color: #fef2f2;
}

.row-paid:hover[b-18vxikes18] {
    background-color: #dcfce7;
}

.row-partial:hover[b-18vxikes18] {
    background-color: #fef3c7;
}

.row-pending:hover[b-18vxikes18] {
    background-color: #fee2e2;
}

/* ============================================
   TABLE FOOTER
   ============================================ */

.estado-total-row[b-18vxikes18] {
    background: #f9fafb;
    border-top: 2px solid #0055A3;
    font-weight: 600;
}

.estado-total-row td[b-18vxikes18] {
    padding: 1.125rem 1rem;
    font-size: 0.95rem;
}

.estado-total-row:hover[b-18vxikes18] {
    background: #f9fafb !important;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.estado-empty-state[b-18vxikes18] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    text-align: center;
}

.estado-empty-state svg[b-18vxikes18] {
    color: #d1d5db;
}

.estado-empty-state h3[b-18vxikes18] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    margin: 0.5rem 0 0;
}

.estado-empty-state p[b-18vxikes18] {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
    max-width: 400px;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .page-container[b-18vxikes18] {
        padding: 1rem;
    }

    .header-info h1[b-18vxikes18] {
        font-size: 1.5rem;
    }

    .stats-grid-3[b-18vxikes18] {
        grid-template-columns: 1fr;
    }

    .estado-stat-content[b-18vxikes18] {
        gap: 0.75rem;
    }

    .stat-accent-icon[b-18vxikes18] {
        width: 40px;
        height: 40px;
    }

    .stat-accent-info h3[b-18vxikes18] {
        font-size: 1.5rem;
    }

    .estado-progress-legend[b-18vxikes18] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .estado-section-header[b-18vxikes18] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .estado-table[b-18vxikes18] {
        font-size: 0.85rem;
    }

    .estado-table th[b-18vxikes18],
    .estado-table td[b-18vxikes18] {
        padding: 0.75rem 0.5rem;
    }

    .estado-table th[b-18vxikes18] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .header-info h1[b-18vxikes18] {
        font-size: 1.25rem;
    }

    .header-info p[b-18vxikes18] {
        font-size: 0.875rem;
    }

    .estado-parent-info[b-18vxikes18] {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .stat-card[b-18vxikes18] {
        padding: 1.25rem;
    }

    .stat-accent-info h3[b-18vxikes18] {
        font-size: 1.375rem;
    }

    .stat-accent-info p[b-18vxikes18] {
        font-size: 0.875rem;
    }

    .estado-progress-section[b-18vxikes18] {
        padding: 1.25rem;
    }

    .estado-table[b-18vxikes18] {
        font-size: 0.8rem;
    }

    .estado-badge[b-18vxikes18] {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
}
/* /Pages/Private/Guardian/Horario.razor.rz.scp.css */
/* ============================================
   PORTAL GUARDIAN
   ============================================ */
/* Usar .page-container del layout principal */

/* ============================================
   CHILDREN GRID (Dashboard)
   ============================================ */
.children-grid[b-mvdyerm85r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.child-card[b-mvdyerm85r] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}

.child-card:hover[b-mvdyerm85r] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.child-card-header[b-mvdyerm85r] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.child-avatar[b-mvdyerm85r] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0055A3, #00284D);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.child-avatar svg[b-mvdyerm85r] {
    stroke: white;
}

.child-info h3[b-mvdyerm85r] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.25rem;
}

.child-relation[b-mvdyerm85r] {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.child-card-details[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row[b-mvdyerm85r] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.detail-label[b-mvdyerm85r] {
    color: #6b7280;
    font-weight: 500;
}

.detail-value[b-mvdyerm85r] {
    color: #111827;
    font-weight: 600;
}

/* ============================================
   QUICK ACCESS SECTION
   ============================================ */
.quick-access-section[b-mvdyerm85r] {
    margin-top: 2rem;
}

.quick-access-section h2[b-mvdyerm85r] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #00284D;
    margin: 0 0 1.25rem;
}

.quick-access-grid[b-mvdyerm85r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.quick-access-card[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.quick-access-card:hover[b-mvdyerm85r] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.quick-access-card .card-icon[b-mvdyerm85r] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.quick-access-card:hover .card-icon[b-mvdyerm85r] {
    transform: scale(1.1);
}

.quick-access-card .card-content[b-mvdyerm85r] {
    text-align: center;
}

.quick-access-card h3[b-mvdyerm85r] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.quick-access-card p[b-mvdyerm85r] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

/* Card Colors */
.schedule-card .card-icon[b-mvdyerm85r] {
    background: #e0f2fe;
}

.schedule-card .card-icon svg[b-mvdyerm85r] {
    stroke: #0055A3;
}

.schedule-card:hover[b-mvdyerm85r] {
    border-color: #0055A3;
}

.schedule-card h3[b-mvdyerm85r] {
    color: #0055A3;
}

.attendance-card .card-icon[b-mvdyerm85r] {
    background: #dcfce7;
}

.attendance-card .card-icon svg[b-mvdyerm85r] {
    stroke: #15803d;
}

.attendance-card:hover[b-mvdyerm85r] {
    border-color: #15803d;
}

.attendance-card h3[b-mvdyerm85r] {
    color: #15803d;
}

.grades-card .card-icon[b-mvdyerm85r] {
    background: #fef3c7;
}

.grades-card .card-icon svg[b-mvdyerm85r] {
    stroke: #92400e;
}

.grades-card:hover[b-mvdyerm85r] {
    border-color: #92400e;
}

.grades-card h3[b-mvdyerm85r] {
    color: #92400e;
}

.account-card .card-icon[b-mvdyerm85r] {
    background: #fee2e2;
}

.account-card .card-icon svg[b-mvdyerm85r] {
    stroke: #dc2626;
}

.account-card:hover[b-mvdyerm85r] {
    border-color: #dc2626;
}

.account-card h3[b-mvdyerm85r] {
    color: #dc2626;
}

/* Usar clases estándar del sistema:
   - .dash-loading para estados de carga
   - .page-header para encabezados
   - .header-info para información del header
*/

/* Child Selector */
.child-selector[b-mvdyerm85r] {
    margin-bottom: 1.5rem;
}

.child-selector label[b-mvdyerm85r] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.child-tabs[b-mvdyerm85r] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.child-tab[b-mvdyerm85r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: fit-content;
}

.child-tab:hover[b-mvdyerm85r] {
    border-color: #0055A3;
    background: #f0f7ff;
}

.child-tab.active[b-mvdyerm85r] {
    border-color: #0055A3;
    background: #0055A3;
    color: white;
}

.child-tab-avatar[b-mvdyerm85r] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.child-tab.active .child-tab-avatar[b-mvdyerm85r] {
    background: rgba(255, 255, 255, 0.2);
}

.child-tab.active .child-tab-avatar svg[b-mvdyerm85r] {
    stroke: white;
}

.child-tab-info[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
}

.child-tab-name[b-mvdyerm85r] {
    font-weight: 600;
    font-size: 0.9rem;
}

.child-tab-grade[b-mvdyerm85r] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Student Info Card */
.student-info-card[b-mvdyerm85r] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.student-info-header[b-mvdyerm85r] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.student-avatar-large[b-mvdyerm85r] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0055A3, #00284D);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.student-avatar-large svg[b-mvdyerm85r] {
    stroke: white;
}

.student-details h2[b-mvdyerm85r] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.35rem;
}

.student-meta[b-mvdyerm85r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.meta-item[b-mvdyerm85r] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #6b7280;
}

/* ============================================
   SECTIONS (Collapsible)
   ============================================ */
.portal-section[b-mvdyerm85r] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.portal-section:hover[b-mvdyerm85r] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.portal-section.expanded[b-mvdyerm85r] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-toggle[b-mvdyerm85r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    transition: background 0.15s;
}

.section-toggle:hover[b-mvdyerm85r] {
    background: #f9fafb;
}

.section-toggle-left[b-mvdyerm85r] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.section-toggle-left svg[b-mvdyerm85r] {
    color: #0055A3;
    flex-shrink: 0;
}

.chevron[b-mvdyerm85r] {
    transition: transform 0.2s;
    color: #9ca3af;
}

.portal-section.expanded .chevron[b-mvdyerm85r] {
    transform: rotate(180deg);
}

.section-badge[b-mvdyerm85r] {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-weight: 500;
    background: #e0f2fe;
    color: #0055A3;
}

.section-badge.badge-success[b-mvdyerm85r] {
    background: #dcfce7;
    color: #15803d;
}

.section-badge.badge-warning[b-mvdyerm85r] {
    background: #fef3c7;
    color: #92400e;
}

.section-badge.badge-danger[b-mvdyerm85r] {
    background: #fee2e2;
    color: #dc2626;
}

.section-content[b-mvdyerm85r] {
    padding: 0 1.25rem 1.25rem;
    animation: fadeIn-b-mvdyerm85r 0.2s ease-out;
}

@keyframes fadeIn-b-mvdyerm85r {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-empty[b-mvdyerm85r] {
    text-align: center;
    color: #9ca3af;
    font-size: 0.9rem;
    padding: 2rem 0;
}

.subsection-title[b-mvdyerm85r] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem;
}

/* ============================================
   PORTAL TABLE
   ============================================ */
.portal-table[b-mvdyerm85r] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.portal-table thead th[b-mvdyerm85r] {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.portal-table tbody td[b-mvdyerm85r] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.portal-table tbody tr:hover[b-mvdyerm85r] {
    background: #f9fafb;
}

/* Grades */
.period-block[b-mvdyerm85r] {
    margin-bottom: 1.25rem;
}

.period-block h4[b-mvdyerm85r] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0055A3;
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e5e7eb;
}

.grade-cell[b-mvdyerm85r] {
    text-align: center;
}

.grade-value[b-mvdyerm85r] {
    display: inline-block;
    min-width: 32px;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
}

.grade-excellent[b-mvdyerm85r] {
    background: #dcfce7;
    color: #15803d;
}

.grade-good[b-mvdyerm85r] {
    background: #e0f2fe;
    color: #0369a1;
}

.grade-regular[b-mvdyerm85r] {
    background: #fef3c7;
    color: #92400e;
}

.grade-low[b-mvdyerm85r] {
    background: #fee2e2;
    color: #dc2626;
}

.grade-pending[b-mvdyerm85r] {
    color: #d1d5db;
    font-weight: 500;
}

/* Attendance */
.attendance-summary[b-mvdyerm85r] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.att-stat[b-mvdyerm85r] {
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
}

.att-stat .att-num[b-mvdyerm85r] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.att-stat .att-label[b-mvdyerm85r] {
    font-size: 0.75rem;
    font-weight: 500;
}

.att-present[b-mvdyerm85r] { background: #dcfce7; color: #15803d; }
.att-late[b-mvdyerm85r] { background: #fef3c7; color: #92400e; }
.att-absent[b-mvdyerm85r] { background: #fee2e2; color: #dc2626; }
.att-justified[b-mvdyerm85r] { background: #e0f2fe; color: #0369a1; }

.att-badge[b-mvdyerm85r] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.att-badge-present[b-mvdyerm85r] { background: #dcfce7; color: #15803d; }
.att-badge-late[b-mvdyerm85r] { background: #fef3c7; color: #92400e; }
.att-badge-absent[b-mvdyerm85r] { background: #fee2e2; color: #dc2626; }
.att-badge-justified[b-mvdyerm85r] { background: #e0f2fe; color: #0369a1; }

/* Discipline */
.priority-badge[b-mvdyerm85r] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.priority-high[b-mvdyerm85r] { background: #fee2e2; color: #dc2626; }
.priority-medium[b-mvdyerm85r] { background: #fef3c7; color: #92400e; }
.priority-low[b-mvdyerm85r] { background: #dcfce7; color: #15803d; }
.priority-normal[b-mvdyerm85r] { background: #f3f4f6; color: #6b7280; }

/* Schedule */
.schedule-day[b-mvdyerm85r] {
    margin-bottom: 1rem;
}

.schedule-day h4[b-mvdyerm85r] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0055A3;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.schedule-items[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.schedule-item[b-mvdyerm85r] {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.85rem;
    align-items: center;
}

.schedule-time[b-mvdyerm85r] {
    font-weight: 600;
    color: #0055A3;
}

.schedule-course[b-mvdyerm85r] {
    font-weight: 500;
    color: #111827;
}

.schedule-teacher[b-mvdyerm85r] {
    color: #6b7280;
    font-size: 0.8rem;
}

/* Account */
.account-overview[b-mvdyerm85r] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.account-stat[b-mvdyerm85r] {
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: #f9fafb;
    border-radius: 10px;
}

.account-label[b-mvdyerm85r] {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.account-value[b-mvdyerm85r] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
}

.account-value.debt[b-mvdyerm85r] { color: #dc2626; }
.account-value.paid[b-mvdyerm85r] { color: #15803d; }
.account-value.discount[b-mvdyerm85r] { color: #0369a1; }

.text-danger[b-mvdyerm85r] { color: #dc2626; font-weight: 600; }
.text-success[b-mvdyerm85r] { color: #15803d; font-weight: 600; }

/* Events */
.events-list[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-item[b-mvdyerm85r] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 10px;
}

.event-date-badge[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 0.35rem;
    background: #0055A3;
    color: white;
    border-radius: 8px;
    flex-shrink: 0;
}

.event-day[b-mvdyerm85r] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.event-month[b-mvdyerm85r] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-info[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.event-info strong[b-mvdyerm85r] {
    font-size: 0.9rem;
    color: #111827;
}

.event-info span[b-mvdyerm85r] {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .portal-container[b-mvdyerm85r] {
        padding: 1rem;
    }

    .portal-header h1[b-mvdyerm85r] {
        font-size: 1.25rem;
    }

    .child-tabs[b-mvdyerm85r] {
        flex-direction: column;
    }

    .student-info-header[b-mvdyerm85r] {
        flex-direction: column;
        text-align: center;
    }

    .student-meta[b-mvdyerm85r] {
        justify-content: center;
    }

    .attendance-summary[b-mvdyerm85r] {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-overview[b-mvdyerm85r] {
        grid-template-columns: repeat(2, 1fr);
    }

    .schedule-item[b-mvdyerm85r] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .portal-table[b-mvdyerm85r] {
        font-size: 0.78rem;
    }

    .portal-table thead th[b-mvdyerm85r],
    .portal-table tbody td[b-mvdyerm85r] {
        padding: 0.45rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .attendance-summary[b-mvdyerm85r] {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-overview[b-mvdyerm85r] {
        grid-template-columns: 1fr 1fr;
    }
}

}

/* ============================================
   CALENDARIO - HORARIO GUARDIAN
   ============================================ */
.calendar-nav[b-mvdyerm85r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.nav-left[b-mvdyerm85r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-today[b-mvdyerm85r] {
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-today:hover[b-mvdyerm85r] {
    border-color: #0055A3;
    color: #0055A3;
}

.nav-arrows[b-mvdyerm85r] {
    display: flex;
    gap: 0.25rem;
}

.btn-arrow[b-mvdyerm85r] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-arrow:hover[b-mvdyerm85r] {
    border-color: #0055A3;
    color: #0055A3;
}

.btn-arrow svg[b-mvdyerm85r] {
    width: 18px;
    height: 18px;
}

.nav-center[b-mvdyerm85r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.calendar-icon[b-mvdyerm85r] {
    width: 20px;
    height: 20px;
    color: #0055A3;
}

.current-date[b-mvdyerm85r] {
    font-weight: 600;
    color: #00284D;
    font-size: 1rem;
}

.nav-right[b-mvdyerm85r] {
    display: flex;
    align-items: center;
}

.view-switcher[b-mvdyerm85r] {
    display: flex;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.view-btn[b-mvdyerm85r] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn:hover[b-mvdyerm85r] {
    color: #0055A3;
}

.view-btn.active[b-mvdyerm85r] {
    background: #0055A3;
    color: white;
}

.schedule-container-guardian[b-mvdyerm85r] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.day-view[b-mvdyerm85r] {
    padding: 1rem;
}

.day-header[b-mvdyerm85r] {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

.day-title[b-mvdyerm85r] {
    font-weight: 600;
    color: #00284D;
    text-transform: capitalize;
}

.time-grid[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
}

.time-row[b-mvdyerm85r] {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    min-height: 60px;
}

.time-row:last-child[b-mvdyerm85r] {
    border-bottom: none;
}

.time-label[b-mvdyerm85r] {
    width: 80px;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    border-right: 2px solid #e5e7eb;
    flex-shrink: 0;
}

.time-start[b-mvdyerm85r] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.time-end[b-mvdyerm85r] {
    font-size: 0.7rem;
    color: #9ca3af;
}

.time-content[b-mvdyerm85r] {
    flex: 1;
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.class-block[b-mvdyerm85r] {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.class-info[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
}

.class-name[b-mvdyerm85r] {
    font-weight: 600;
    font-size: 0.95rem;
}

.class-teacher[b-mvdyerm85r] {
    font-size: 0.8rem;
    opacity: 0.9;
}

.empty-slot-readonly[b-mvdyerm85r] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #e5e7eb;
    border-radius: 6px;
    color: #d1d5db;
}

.time-row.break-row[b-mvdyerm85r] {
    background: #fef9e7;
    min-height: 40px;
}

.time-row.break-row .time-label[b-mvdyerm85r] {
    background: #fdf6e3;
}

.break-block[b-mvdyerm85r] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background: #f5a623;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.break-name[b-mvdyerm85r] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
}

.week-view[b-mvdyerm85r] {
    overflow-x: auto;
}

.week-header[b-mvdyerm85r] {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
}

.time-column-header[b-mvdyerm85r] {
    width: 80px;
    flex-shrink: 0;
}

.day-column-header[b-mvdyerm85r] {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e5e7eb;
}

.day-name[b-mvdyerm85r] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.week-body[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
}

.week-row[b-mvdyerm85r] {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    min-height: 50px;
}

.week-row .time-label[b-mvdyerm85r] {
    width: 80px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    border-right: 2px solid #e5e7eb;
    flex-shrink: 0;
    gap: 2px;
}

.week-row .time-label .time-start[b-mvdyerm85r] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

.week-row .time-label .time-end[b-mvdyerm85r] {
    font-size: 0.65rem;
    color: #9ca3af;
}

.week-cell[b-mvdyerm85r] {
    flex: 1;
    min-width: 120px;
    padding: 0.25rem;
    border-left: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
    justify-content: center;
}

.week-cell.today[b-mvdyerm85r] {
    background: #dbeafe;
}

.week-row.break-row[b-mvdyerm85r] {
    background: #fef9e7;
    min-height: 36px;
}

.week-row.break-row .time-label[b-mvdyerm85r] {
    background: #fdf6e3;
}

.week-break-cell[b-mvdyerm85r] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
}

.week-break-cell .break-name[b-mvdyerm85r] {
    background: #f5a623;
    color: white;
    padding: 0.25rem 1.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.class-chip[b-mvdyerm85r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.class-chip span[b-mvdyerm85r] {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.month-view[b-mvdyerm85r] {
    padding: 1rem;
}

.month-header[b-mvdyerm85r] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.month-day-header[b-mvdyerm85r] {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.month-grid[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.month-week[b-mvdyerm85r] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.month-cell[b-mvdyerm85r] {
    min-height: 80px;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
}

.month-cell.other-month[b-mvdyerm85r] {
    background: #f9fafb;
    opacity: 0.5;
}

.month-cell.today[b-mvdyerm85r] {
    border-color: #0055A3;
    background: #dbeafe;
}

.cell-day[b-mvdyerm85r] {
    font-weight: 600;
    color: #00284D;
    font-size: 0.8rem;
}

.cell-courses[b-mvdyerm85r] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.25rem;
}

.course-pill[b-mvdyerm85r] {
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.more-courses[b-mvdyerm85r] {
    font-size: 0.6rem;
    color: #6b7280;
    text-align: center;
    font-weight: 500;
}

.color-blue[b-mvdyerm85r] { background: #4299e1; }
.color-green[b-mvdyerm85r] { background: #48bb78; }
.color-purple[b-mvdyerm85r] { background: #9f7aea; }
.color-orange[b-mvdyerm85r] { background: #ed8936; }
.color-red[b-mvdyerm85r] { background: #fc8181; }
.color-pink[b-mvdyerm85r] { background: #ed64a6; }
.color-yellow[b-mvdyerm85r] { background: #ecc94b; }
.color-teal[b-mvdyerm85r] { background: #38b2ac; }
.color-indigo[b-mvdyerm85r] { background: #667eea; }
.color-cyan[b-mvdyerm85r] { background: #0bc5ea; }
.color-gray[b-mvdyerm85r] { background: #a0aec0; }

@media (max-width: 768px) {
    .calendar-nav[b-mvdyerm85r] {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-left[b-mvdyerm85r], .nav-center[b-mvdyerm85r], .nav-right[b-mvdyerm85r] {
        width: 100%;
        justify-content: center;
    }

    .week-view[b-mvdyerm85r] {
        font-size: 0.85rem;
    }

    .day-column-header[b-mvdyerm85r] {
        min-width: 100px;
    }

    .week-cell[b-mvdyerm85r] {
        min-width: 100px;
    }
}
/* /Pages/Private/Guardian/Notas.razor.rz.scp.css */
/* ============================================
   PORTAL GUARDIAN
   ============================================ */
/* Usar .page-container del layout principal */

/* ============================================
   CHILDREN GRID (Dashboard)
   ============================================ */
.children-grid[b-c6kwjytf7k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.child-card[b-c6kwjytf7k] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}

.child-card:hover[b-c6kwjytf7k] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.child-card-header[b-c6kwjytf7k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.child-avatar[b-c6kwjytf7k] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0055A3, #00284D);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.child-avatar svg[b-c6kwjytf7k] {
    stroke: white;
}

.child-info h3[b-c6kwjytf7k] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.25rem;
}

.child-relation[b-c6kwjytf7k] {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.child-card-details[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row[b-c6kwjytf7k] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.detail-label[b-c6kwjytf7k] {
    color: #6b7280;
    font-weight: 500;
}

.detail-value[b-c6kwjytf7k] {
    color: #111827;
    font-weight: 600;
}

/* ============================================
   QUICK ACCESS SECTION
   ============================================ */
.quick-access-section[b-c6kwjytf7k] {
    margin-top: 2rem;
}

.quick-access-section h2[b-c6kwjytf7k] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #00284D;
    margin: 0 0 1.25rem;
}

.quick-access-grid[b-c6kwjytf7k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.quick-access-card[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.quick-access-card:hover[b-c6kwjytf7k] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.quick-access-card .card-icon[b-c6kwjytf7k] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.quick-access-card:hover .card-icon[b-c6kwjytf7k] {
    transform: scale(1.1);
}

.quick-access-card .card-content[b-c6kwjytf7k] {
    text-align: center;
}

.quick-access-card h3[b-c6kwjytf7k] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.quick-access-card p[b-c6kwjytf7k] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

/* Card Colors */
.schedule-card .card-icon[b-c6kwjytf7k] {
    background: #e0f2fe;
}

.schedule-card .card-icon svg[b-c6kwjytf7k] {
    stroke: #0055A3;
}

.schedule-card:hover[b-c6kwjytf7k] {
    border-color: #0055A3;
}

.schedule-card h3[b-c6kwjytf7k] {
    color: #0055A3;
}

.attendance-card .card-icon[b-c6kwjytf7k] {
    background: #dcfce7;
}

.attendance-card .card-icon svg[b-c6kwjytf7k] {
    stroke: #15803d;
}

.attendance-card:hover[b-c6kwjytf7k] {
    border-color: #15803d;
}

.attendance-card h3[b-c6kwjytf7k] {
    color: #15803d;
}

.grades-card .card-icon[b-c6kwjytf7k] {
    background: #fef3c7;
}

.grades-card .card-icon svg[b-c6kwjytf7k] {
    stroke: #92400e;
}

.grades-card:hover[b-c6kwjytf7k] {
    border-color: #92400e;
}

.grades-card h3[b-c6kwjytf7k] {
    color: #92400e;
}

.account-card .card-icon[b-c6kwjytf7k] {
    background: #fee2e2;
}

.account-card .card-icon svg[b-c6kwjytf7k] {
    stroke: #dc2626;
}

.account-card:hover[b-c6kwjytf7k] {
    border-color: #dc2626;
}

.account-card h3[b-c6kwjytf7k] {
    color: #dc2626;
}

/* Usar clases estándar del sistema:
   - .dash-loading para estados de carga
   - .page-header para encabezados
   - .header-info para información del header
*/

/* Child Selector */
.child-selector[b-c6kwjytf7k] {
    margin-bottom: 1.5rem;
}

.child-selector label[b-c6kwjytf7k] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.child-tabs[b-c6kwjytf7k] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.child-tab[b-c6kwjytf7k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: fit-content;
}

.child-tab:hover[b-c6kwjytf7k] {
    border-color: #0055A3;
    background: #f0f7ff;
}

.child-tab.active[b-c6kwjytf7k] {
    border-color: #0055A3;
    background: #0055A3;
    color: white;
}

.child-tab-avatar[b-c6kwjytf7k] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.child-tab.active .child-tab-avatar[b-c6kwjytf7k] {
    background: rgba(255, 255, 255, 0.2);
}

.child-tab.active .child-tab-avatar svg[b-c6kwjytf7k] {
    stroke: white;
}

.child-tab-info[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
}

.child-tab-name[b-c6kwjytf7k] {
    font-weight: 600;
    font-size: 0.9rem;
}

.child-tab-grade[b-c6kwjytf7k] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Student Info Card */
.student-info-card[b-c6kwjytf7k] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.student-info-header[b-c6kwjytf7k] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.student-avatar-large[b-c6kwjytf7k] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0055A3, #00284D);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.student-avatar-large svg[b-c6kwjytf7k] {
    stroke: white;
}

.student-details h2[b-c6kwjytf7k] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.35rem;
}

.student-meta[b-c6kwjytf7k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.meta-item[b-c6kwjytf7k] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #6b7280;
}

/* ============================================
   SECTIONS (Collapsible)
   ============================================ */
.portal-section[b-c6kwjytf7k] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.portal-section:hover[b-c6kwjytf7k] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.portal-section.expanded[b-c6kwjytf7k] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-toggle[b-c6kwjytf7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    transition: background 0.15s;
}

.section-toggle:hover[b-c6kwjytf7k] {
    background: #f9fafb;
}

.section-toggle-left[b-c6kwjytf7k] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.section-toggle-left svg[b-c6kwjytf7k] {
    color: #0055A3;
    flex-shrink: 0;
}

.chevron[b-c6kwjytf7k] {
    transition: transform 0.2s;
    color: #9ca3af;
}

.portal-section.expanded .chevron[b-c6kwjytf7k] {
    transform: rotate(180deg);
}

.section-badge[b-c6kwjytf7k] {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-weight: 500;
    background: #e0f2fe;
    color: #0055A3;
}

.section-badge.badge-success[b-c6kwjytf7k] {
    background: #dcfce7;
    color: #15803d;
}

.section-badge.badge-warning[b-c6kwjytf7k] {
    background: #fef3c7;
    color: #92400e;
}

.section-badge.badge-danger[b-c6kwjytf7k] {
    background: #fee2e2;
    color: #dc2626;
}

.section-content[b-c6kwjytf7k] {
    padding: 0 1.25rem 1.25rem;
    animation: fadeIn-b-c6kwjytf7k 0.2s ease-out;
}

@keyframes fadeIn-b-c6kwjytf7k {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-empty[b-c6kwjytf7k] {
    text-align: center;
    color: #9ca3af;
    font-size: 0.9rem;
    padding: 2rem 0;
}

.subsection-title[b-c6kwjytf7k] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem;
}

/* ============================================
   PORTAL TABLE
   ============================================ */
.portal-table[b-c6kwjytf7k] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.portal-table thead th[b-c6kwjytf7k] {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.portal-table tbody td[b-c6kwjytf7k] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.portal-table tbody tr:hover[b-c6kwjytf7k] {
    background: #f9fafb;
}

/* Grades */
.period-block[b-c6kwjytf7k] {
    margin-bottom: 1.25rem;
}

.period-block h4[b-c6kwjytf7k] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0055A3;
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e5e7eb;
}

.grade-cell[b-c6kwjytf7k] {
    text-align: center;
}

.grade-value[b-c6kwjytf7k] {
    display: inline-block;
    min-width: 32px;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
}

.grade-excellent[b-c6kwjytf7k] {
    background: #dcfce7;
    color: #15803d;
}

.grade-good[b-c6kwjytf7k] {
    background: #e0f2fe;
    color: #0369a1;
}

.grade-regular[b-c6kwjytf7k] {
    background: #fef3c7;
    color: #92400e;
}

.grade-low[b-c6kwjytf7k] {
    background: #fee2e2;
    color: #dc2626;
}

.grade-pending[b-c6kwjytf7k] {
    color: #d1d5db;
    font-weight: 500;
}

/* Attendance */
.attendance-summary[b-c6kwjytf7k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.att-stat[b-c6kwjytf7k] {
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
}

.att-stat .att-num[b-c6kwjytf7k] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.att-stat .att-label[b-c6kwjytf7k] {
    font-size: 0.75rem;
    font-weight: 500;
}

.att-present[b-c6kwjytf7k] { background: #dcfce7; color: #15803d; }
.att-late[b-c6kwjytf7k] { background: #fef3c7; color: #92400e; }
.att-absent[b-c6kwjytf7k] { background: #fee2e2; color: #dc2626; }
.att-justified[b-c6kwjytf7k] { background: #e0f2fe; color: #0369a1; }

.att-badge[b-c6kwjytf7k] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.att-badge-present[b-c6kwjytf7k] { background: #dcfce7; color: #15803d; }
.att-badge-late[b-c6kwjytf7k] { background: #fef3c7; color: #92400e; }
.att-badge-absent[b-c6kwjytf7k] { background: #fee2e2; color: #dc2626; }
.att-badge-justified[b-c6kwjytf7k] { background: #e0f2fe; color: #0369a1; }

/* Discipline */
.priority-badge[b-c6kwjytf7k] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.priority-high[b-c6kwjytf7k] { background: #fee2e2; color: #dc2626; }
.priority-medium[b-c6kwjytf7k] { background: #fef3c7; color: #92400e; }
.priority-low[b-c6kwjytf7k] { background: #dcfce7; color: #15803d; }
.priority-normal[b-c6kwjytf7k] { background: #f3f4f6; color: #6b7280; }

/* Schedule */
.schedule-day[b-c6kwjytf7k] {
    margin-bottom: 1rem;
}

.schedule-day h4[b-c6kwjytf7k] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0055A3;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.schedule-items[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.schedule-item[b-c6kwjytf7k] {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.85rem;
    align-items: center;
}

.schedule-time[b-c6kwjytf7k] {
    font-weight: 600;
    color: #0055A3;
}

.schedule-course[b-c6kwjytf7k] {
    font-weight: 500;
    color: #111827;
}

.schedule-teacher[b-c6kwjytf7k] {
    color: #6b7280;
    font-size: 0.8rem;
}

/* Account */
.account-overview[b-c6kwjytf7k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.account-stat[b-c6kwjytf7k] {
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: #f9fafb;
    border-radius: 10px;
}

.account-label[b-c6kwjytf7k] {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.account-value[b-c6kwjytf7k] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
}

.account-value.debt[b-c6kwjytf7k] { color: #dc2626; }
.account-value.paid[b-c6kwjytf7k] { color: #15803d; }
.account-value.discount[b-c6kwjytf7k] { color: #0369a1; }

.text-danger[b-c6kwjytf7k] { color: #dc2626; font-weight: 600; }
.text-success[b-c6kwjytf7k] { color: #15803d; font-weight: 600; }

/* Events */
.events-list[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-item[b-c6kwjytf7k] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 10px;
}

.event-date-badge[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 0.35rem;
    background: #0055A3;
    color: white;
    border-radius: 8px;
    flex-shrink: 0;
}

.event-day[b-c6kwjytf7k] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.event-month[b-c6kwjytf7k] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-info[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.event-info strong[b-c6kwjytf7k] {
    font-size: 0.9rem;
    color: #111827;
}

.event-info span[b-c6kwjytf7k] {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .portal-container[b-c6kwjytf7k] {
        padding: 1rem;
    }

    .portal-header h1[b-c6kwjytf7k] {
        font-size: 1.25rem;
    }

    .child-tabs[b-c6kwjytf7k] {
        flex-direction: column;
    }

    .student-info-header[b-c6kwjytf7k] {
        flex-direction: column;
        text-align: center;
    }

    .student-meta[b-c6kwjytf7k] {
        justify-content: center;
    }

    .attendance-summary[b-c6kwjytf7k] {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-overview[b-c6kwjytf7k] {
        grid-template-columns: repeat(2, 1fr);
    }

    .schedule-item[b-c6kwjytf7k] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .portal-table[b-c6kwjytf7k] {
        font-size: 0.78rem;
    }

    .portal-table thead th[b-c6kwjytf7k],
    .portal-table tbody td[b-c6kwjytf7k] {
        padding: 0.45rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .attendance-summary[b-c6kwjytf7k] {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-overview[b-c6kwjytf7k] {
        grid-template-columns: 1fr 1fr;
    }
}

}

/* ============================================
   CALENDARIO - HORARIO GUARDIAN
   ============================================ */
.calendar-nav[b-c6kwjytf7k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.nav-left[b-c6kwjytf7k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-today[b-c6kwjytf7k] {
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-today:hover[b-c6kwjytf7k] {
    border-color: #0055A3;
    color: #0055A3;
}

.nav-arrows[b-c6kwjytf7k] {
    display: flex;
    gap: 0.25rem;
}

.btn-arrow[b-c6kwjytf7k] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-arrow:hover[b-c6kwjytf7k] {
    border-color: #0055A3;
    color: #0055A3;
}

.btn-arrow svg[b-c6kwjytf7k] {
    width: 18px;
    height: 18px;
}

.nav-center[b-c6kwjytf7k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.calendar-icon[b-c6kwjytf7k] {
    width: 20px;
    height: 20px;
    color: #0055A3;
}

.current-date[b-c6kwjytf7k] {
    font-weight: 600;
    color: #00284D;
    font-size: 1rem;
}

.nav-right[b-c6kwjytf7k] {
    display: flex;
    align-items: center;
}

.view-switcher[b-c6kwjytf7k] {
    display: flex;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.view-btn[b-c6kwjytf7k] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn:hover[b-c6kwjytf7k] {
    color: #0055A3;
}

.view-btn.active[b-c6kwjytf7k] {
    background: #0055A3;
    color: white;
}

.schedule-container-guardian[b-c6kwjytf7k] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.day-view[b-c6kwjytf7k] {
    padding: 1rem;
}

.day-header[b-c6kwjytf7k] {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

.day-title[b-c6kwjytf7k] {
    font-weight: 600;
    color: #00284D;
    text-transform: capitalize;
}

.time-grid[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
}

.time-row[b-c6kwjytf7k] {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    min-height: 60px;
}

.time-row:last-child[b-c6kwjytf7k] {
    border-bottom: none;
}

.time-label[b-c6kwjytf7k] {
    width: 80px;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    border-right: 2px solid #e5e7eb;
    flex-shrink: 0;
}

.time-start[b-c6kwjytf7k] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.time-end[b-c6kwjytf7k] {
    font-size: 0.7rem;
    color: #9ca3af;
}

.time-content[b-c6kwjytf7k] {
    flex: 1;
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.class-block[b-c6kwjytf7k] {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.class-info[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
}

.class-name[b-c6kwjytf7k] {
    font-weight: 600;
    font-size: 0.95rem;
}

.class-teacher[b-c6kwjytf7k] {
    font-size: 0.8rem;
    opacity: 0.9;
}

.empty-slot-readonly[b-c6kwjytf7k] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #e5e7eb;
    border-radius: 6px;
    color: #d1d5db;
}

.time-row.break-row[b-c6kwjytf7k] {
    background: #fef9e7;
    min-height: 40px;
}

.time-row.break-row .time-label[b-c6kwjytf7k] {
    background: #fdf6e3;
}

.break-block[b-c6kwjytf7k] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background: #f5a623;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.break-name[b-c6kwjytf7k] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
}

.week-view[b-c6kwjytf7k] {
    overflow-x: auto;
}

.week-header[b-c6kwjytf7k] {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
}

.time-column-header[b-c6kwjytf7k] {
    width: 80px;
    flex-shrink: 0;
}

.day-column-header[b-c6kwjytf7k] {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e5e7eb;
}

.day-name[b-c6kwjytf7k] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.week-body[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
}

.week-row[b-c6kwjytf7k] {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    min-height: 50px;
}

.week-row .time-label[b-c6kwjytf7k] {
    width: 80px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    border-right: 2px solid #e5e7eb;
    flex-shrink: 0;
    gap: 2px;
}

.week-row .time-label .time-start[b-c6kwjytf7k] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

.week-row .time-label .time-end[b-c6kwjytf7k] {
    font-size: 0.65rem;
    color: #9ca3af;
}

.week-cell[b-c6kwjytf7k] {
    flex: 1;
    min-width: 120px;
    padding: 0.25rem;
    border-left: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
    justify-content: center;
}

.week-cell.today[b-c6kwjytf7k] {
    background: #dbeafe;
}

.week-row.break-row[b-c6kwjytf7k] {
    background: #fef9e7;
    min-height: 36px;
}

.week-row.break-row .time-label[b-c6kwjytf7k] {
    background: #fdf6e3;
}

.week-break-cell[b-c6kwjytf7k] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
}

.week-break-cell .break-name[b-c6kwjytf7k] {
    background: #f5a623;
    color: white;
    padding: 0.25rem 1.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.class-chip[b-c6kwjytf7k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.class-chip span[b-c6kwjytf7k] {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.month-view[b-c6kwjytf7k] {
    padding: 1rem;
}

.month-header[b-c6kwjytf7k] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.month-day-header[b-c6kwjytf7k] {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.month-grid[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.month-week[b-c6kwjytf7k] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.month-cell[b-c6kwjytf7k] {
    min-height: 80px;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
}

.month-cell.other-month[b-c6kwjytf7k] {
    background: #f9fafb;
    opacity: 0.5;
}

.month-cell.today[b-c6kwjytf7k] {
    border-color: #0055A3;
    background: #dbeafe;
}

.cell-day[b-c6kwjytf7k] {
    font-weight: 600;
    color: #00284D;
    font-size: 0.8rem;
}

.cell-courses[b-c6kwjytf7k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.25rem;
}

.course-pill[b-c6kwjytf7k] {
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.more-courses[b-c6kwjytf7k] {
    font-size: 0.6rem;
    color: #6b7280;
    text-align: center;
    font-weight: 500;
}

.color-blue[b-c6kwjytf7k] { background: #4299e1; }
.color-green[b-c6kwjytf7k] { background: #48bb78; }
.color-purple[b-c6kwjytf7k] { background: #9f7aea; }
.color-orange[b-c6kwjytf7k] { background: #ed8936; }
.color-red[b-c6kwjytf7k] { background: #fc8181; }
.color-pink[b-c6kwjytf7k] { background: #ed64a6; }
.color-yellow[b-c6kwjytf7k] { background: #ecc94b; }
.color-teal[b-c6kwjytf7k] { background: #38b2ac; }
.color-indigo[b-c6kwjytf7k] { background: #667eea; }
.color-cyan[b-c6kwjytf7k] { background: #0bc5ea; }
.color-gray[b-c6kwjytf7k] { background: #a0aec0; }

@media (max-width: 768px) {
    .calendar-nav[b-c6kwjytf7k] {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-left[b-c6kwjytf7k], .nav-center[b-c6kwjytf7k], .nav-right[b-c6kwjytf7k] {
        width: 100%;
        justify-content: center;
    }

    .week-view[b-c6kwjytf7k] {
        font-size: 0.85rem;
    }

    .day-column-header[b-c6kwjytf7k] {
        min-width: 100px;
    }

    .week-cell[b-c6kwjytf7k] {
        min-width: 100px;
    }
}
/* /Pages/Private/Guardian/PortalGuardian.razor.rz.scp.css */
/* ============================================
   PORTAL GUARDIAN
   ============================================ */
/* Usar .page-container del layout principal */

/* ============================================
   CHILDREN GRID (Dashboard)
   ============================================ */
.children-grid[b-fx37g09g7u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.child-card[b-fx37g09g7u] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}

.child-card:hover[b-fx37g09g7u] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.child-card-header[b-fx37g09g7u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.child-avatar[b-fx37g09g7u] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0055A3, #00284D);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.child-avatar svg[b-fx37g09g7u] {
    stroke: white;
}

.child-info h3[b-fx37g09g7u] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.25rem;
}

.child-relation[b-fx37g09g7u] {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.child-card-details[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row[b-fx37g09g7u] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.detail-label[b-fx37g09g7u] {
    color: #6b7280;
    font-weight: 500;
}

.detail-value[b-fx37g09g7u] {
    color: #111827;
    font-weight: 600;
}

/* ============================================
   QUICK ACCESS SECTION
   ============================================ */
.quick-access-section[b-fx37g09g7u] {
    margin-top: 2rem;
}

.quick-access-section h2[b-fx37g09g7u] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #00284D;
    margin: 0 0 1.25rem;
}

.quick-access-grid[b-fx37g09g7u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.quick-access-card[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.quick-access-card:hover[b-fx37g09g7u] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.quick-access-card .card-icon[b-fx37g09g7u] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.quick-access-card:hover .card-icon[b-fx37g09g7u] {
    transform: scale(1.1);
}

.quick-access-card .card-content[b-fx37g09g7u] {
    text-align: center;
}

.quick-access-card h3[b-fx37g09g7u] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.quick-access-card p[b-fx37g09g7u] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

/* Card Colors */
.schedule-card .card-icon[b-fx37g09g7u] {
    background: #e0f2fe;
}

.schedule-card .card-icon svg[b-fx37g09g7u] {
    stroke: #0055A3;
}

.schedule-card:hover[b-fx37g09g7u] {
    border-color: #0055A3;
}

.schedule-card h3[b-fx37g09g7u] {
    color: #0055A3;
}

.attendance-card .card-icon[b-fx37g09g7u] {
    background: #dcfce7;
}

.attendance-card .card-icon svg[b-fx37g09g7u] {
    stroke: #15803d;
}

.attendance-card:hover[b-fx37g09g7u] {
    border-color: #15803d;
}

.attendance-card h3[b-fx37g09g7u] {
    color: #15803d;
}

.grades-card .card-icon[b-fx37g09g7u] {
    background: #fef3c7;
}

.grades-card .card-icon svg[b-fx37g09g7u] {
    stroke: #92400e;
}

.grades-card:hover[b-fx37g09g7u] {
    border-color: #92400e;
}

.grades-card h3[b-fx37g09g7u] {
    color: #92400e;
}

.account-card .card-icon[b-fx37g09g7u] {
    background: #fee2e2;
}

.account-card .card-icon svg[b-fx37g09g7u] {
    stroke: #dc2626;
}

.account-card:hover[b-fx37g09g7u] {
    border-color: #dc2626;
}

.account-card h3[b-fx37g09g7u] {
    color: #dc2626;
}

/* Usar clases estándar del sistema:
   - .dash-loading para estados de carga
   - .page-header para encabezados
   - .header-info para información del header
*/

/* Child Selector */
.child-selector[b-fx37g09g7u] {
    margin-bottom: 1.5rem;
}

.child-selector label[b-fx37g09g7u] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.child-tabs[b-fx37g09g7u] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.child-tab[b-fx37g09g7u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: fit-content;
}

.child-tab:hover[b-fx37g09g7u] {
    border-color: #0055A3;
    background: #f0f7ff;
}

.child-tab.active[b-fx37g09g7u] {
    border-color: #0055A3;
    background: #0055A3;
    color: white;
}

.child-tab-avatar[b-fx37g09g7u] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.child-tab.active .child-tab-avatar[b-fx37g09g7u] {
    background: rgba(255, 255, 255, 0.2);
}

.child-tab.active .child-tab-avatar svg[b-fx37g09g7u] {
    stroke: white;
}

.child-tab-info[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
}

.child-tab-name[b-fx37g09g7u] {
    font-weight: 600;
    font-size: 0.9rem;
}

.child-tab-grade[b-fx37g09g7u] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Student Info Card */
.student-info-card[b-fx37g09g7u] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.student-info-header[b-fx37g09g7u] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.student-avatar-large[b-fx37g09g7u] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0055A3, #00284D);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.student-avatar-large svg[b-fx37g09g7u] {
    stroke: white;
}

.student-details h2[b-fx37g09g7u] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.35rem;
}

.student-meta[b-fx37g09g7u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.meta-item[b-fx37g09g7u] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #6b7280;
}

/* ============================================
   SECTIONS (Collapsible)
   ============================================ */
.portal-section[b-fx37g09g7u] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.portal-section:hover[b-fx37g09g7u] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.portal-section.expanded[b-fx37g09g7u] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-toggle[b-fx37g09g7u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    transition: background 0.15s;
}

.section-toggle:hover[b-fx37g09g7u] {
    background: #f9fafb;
}

.section-toggle-left[b-fx37g09g7u] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.section-toggle-left svg[b-fx37g09g7u] {
    color: #0055A3;
    flex-shrink: 0;
}

.chevron[b-fx37g09g7u] {
    transition: transform 0.2s;
    color: #9ca3af;
}

.portal-section.expanded .chevron[b-fx37g09g7u] {
    transform: rotate(180deg);
}

.section-badge[b-fx37g09g7u] {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-weight: 500;
    background: #e0f2fe;
    color: #0055A3;
}

.section-badge.badge-success[b-fx37g09g7u] {
    background: #dcfce7;
    color: #15803d;
}

.section-badge.badge-warning[b-fx37g09g7u] {
    background: #fef3c7;
    color: #92400e;
}

.section-badge.badge-danger[b-fx37g09g7u] {
    background: #fee2e2;
    color: #dc2626;
}

.section-content[b-fx37g09g7u] {
    padding: 0 1.25rem 1.25rem;
    animation: fadeIn-b-fx37g09g7u 0.2s ease-out;
}

@keyframes fadeIn-b-fx37g09g7u {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-empty[b-fx37g09g7u] {
    text-align: center;
    color: #9ca3af;
    font-size: 0.9rem;
    padding: 2rem 0;
}

.subsection-title[b-fx37g09g7u] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem;
}

/* ============================================
   PORTAL TABLE
   ============================================ */
.portal-table[b-fx37g09g7u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.portal-table thead th[b-fx37g09g7u] {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.portal-table tbody td[b-fx37g09g7u] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.portal-table tbody tr:hover[b-fx37g09g7u] {
    background: #f9fafb;
}

/* Grades */
.period-block[b-fx37g09g7u] {
    margin-bottom: 1.25rem;
}

.period-block h4[b-fx37g09g7u] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0055A3;
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e5e7eb;
}

.grade-cell[b-fx37g09g7u] {
    text-align: center;
}

.grade-value[b-fx37g09g7u] {
    display: inline-block;
    min-width: 32px;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
}

.grade-excellent[b-fx37g09g7u] {
    background: #dcfce7;
    color: #15803d;
}

.grade-good[b-fx37g09g7u] {
    background: #e0f2fe;
    color: #0369a1;
}

.grade-regular[b-fx37g09g7u] {
    background: #fef3c7;
    color: #92400e;
}

.grade-low[b-fx37g09g7u] {
    background: #fee2e2;
    color: #dc2626;
}

.grade-pending[b-fx37g09g7u] {
    color: #d1d5db;
    font-weight: 500;
}

/* Attendance */
.attendance-summary[b-fx37g09g7u] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.att-stat[b-fx37g09g7u] {
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
}

.att-stat .att-num[b-fx37g09g7u] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.att-stat .att-label[b-fx37g09g7u] {
    font-size: 0.75rem;
    font-weight: 500;
}

.att-present[b-fx37g09g7u] { background: #dcfce7; color: #15803d; }
.att-late[b-fx37g09g7u] { background: #fef3c7; color: #92400e; }
.att-absent[b-fx37g09g7u] { background: #fee2e2; color: #dc2626; }
.att-justified[b-fx37g09g7u] { background: #e0f2fe; color: #0369a1; }

.att-badge[b-fx37g09g7u] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.att-badge-present[b-fx37g09g7u] { background: #dcfce7; color: #15803d; }
.att-badge-late[b-fx37g09g7u] { background: #fef3c7; color: #92400e; }
.att-badge-absent[b-fx37g09g7u] { background: #fee2e2; color: #dc2626; }
.att-badge-justified[b-fx37g09g7u] { background: #e0f2fe; color: #0369a1; }

/* Discipline */
.priority-badge[b-fx37g09g7u] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.priority-high[b-fx37g09g7u] { background: #fee2e2; color: #dc2626; }
.priority-medium[b-fx37g09g7u] { background: #fef3c7; color: #92400e; }
.priority-low[b-fx37g09g7u] { background: #dcfce7; color: #15803d; }
.priority-normal[b-fx37g09g7u] { background: #f3f4f6; color: #6b7280; }

/* Schedule */
.schedule-day[b-fx37g09g7u] {
    margin-bottom: 1rem;
}

.schedule-day h4[b-fx37g09g7u] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0055A3;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.schedule-items[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.schedule-item[b-fx37g09g7u] {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.85rem;
    align-items: center;
}

.schedule-time[b-fx37g09g7u] {
    font-weight: 600;
    color: #0055A3;
}

.schedule-course[b-fx37g09g7u] {
    font-weight: 500;
    color: #111827;
}

.schedule-teacher[b-fx37g09g7u] {
    color: #6b7280;
    font-size: 0.8rem;
}

/* Account */
.account-overview[b-fx37g09g7u] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.account-stat[b-fx37g09g7u] {
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: #f9fafb;
    border-radius: 10px;
}

.account-label[b-fx37g09g7u] {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.account-value[b-fx37g09g7u] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
}

.account-value.debt[b-fx37g09g7u] { color: #dc2626; }
.account-value.paid[b-fx37g09g7u] { color: #15803d; }
.account-value.discount[b-fx37g09g7u] { color: #0369a1; }

.text-danger[b-fx37g09g7u] { color: #dc2626; font-weight: 600; }
.text-success[b-fx37g09g7u] { color: #15803d; font-weight: 600; }

/* Events */
.events-list[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-item[b-fx37g09g7u] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 10px;
}

.event-date-badge[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 0.35rem;
    background: #0055A3;
    color: white;
    border-radius: 8px;
    flex-shrink: 0;
}

.event-day[b-fx37g09g7u] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.event-month[b-fx37g09g7u] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-info[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.event-info strong[b-fx37g09g7u] {
    font-size: 0.9rem;
    color: #111827;
}

.event-info span[b-fx37g09g7u] {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .portal-container[b-fx37g09g7u] {
        padding: 1rem;
    }

    .portal-header h1[b-fx37g09g7u] {
        font-size: 1.25rem;
    }

    .child-tabs[b-fx37g09g7u] {
        flex-direction: column;
    }

    .student-info-header[b-fx37g09g7u] {
        flex-direction: column;
        text-align: center;
    }

    .student-meta[b-fx37g09g7u] {
        justify-content: center;
    }

    .attendance-summary[b-fx37g09g7u] {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-overview[b-fx37g09g7u] {
        grid-template-columns: repeat(2, 1fr);
    }

    .schedule-item[b-fx37g09g7u] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .portal-table[b-fx37g09g7u] {
        font-size: 0.78rem;
    }

    .portal-table thead th[b-fx37g09g7u],
    .portal-table tbody td[b-fx37g09g7u] {
        padding: 0.45rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .attendance-summary[b-fx37g09g7u] {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-overview[b-fx37g09g7u] {
        grid-template-columns: 1fr 1fr;
    }
}

}

/* ============================================
   CALENDARIO - HORARIO GUARDIAN
   ============================================ */
.calendar-nav[b-fx37g09g7u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.nav-left[b-fx37g09g7u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-today[b-fx37g09g7u] {
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-today:hover[b-fx37g09g7u] {
    border-color: #0055A3;
    color: #0055A3;
}

.nav-arrows[b-fx37g09g7u] {
    display: flex;
    gap: 0.25rem;
}

.btn-arrow[b-fx37g09g7u] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-arrow:hover[b-fx37g09g7u] {
    border-color: #0055A3;
    color: #0055A3;
}

.btn-arrow svg[b-fx37g09g7u] {
    width: 18px;
    height: 18px;
}

.nav-center[b-fx37g09g7u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.calendar-icon[b-fx37g09g7u] {
    width: 20px;
    height: 20px;
    color: #0055A3;
}

.current-date[b-fx37g09g7u] {
    font-weight: 600;
    color: #00284D;
    font-size: 1rem;
}

.nav-right[b-fx37g09g7u] {
    display: flex;
    align-items: center;
}

.view-switcher[b-fx37g09g7u] {
    display: flex;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.view-btn[b-fx37g09g7u] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn:hover[b-fx37g09g7u] {
    color: #0055A3;
}

.view-btn.active[b-fx37g09g7u] {
    background: #0055A3;
    color: white;
}

.schedule-container-guardian[b-fx37g09g7u] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.day-view[b-fx37g09g7u] {
    padding: 1rem;
}

.day-header[b-fx37g09g7u] {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

.day-title[b-fx37g09g7u] {
    font-weight: 600;
    color: #00284D;
    text-transform: capitalize;
}

.time-grid[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
}

.time-row[b-fx37g09g7u] {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    min-height: 60px;
}

.time-row:last-child[b-fx37g09g7u] {
    border-bottom: none;
}

.time-label[b-fx37g09g7u] {
    width: 80px;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    border-right: 2px solid #e5e7eb;
    flex-shrink: 0;
}

.time-start[b-fx37g09g7u] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.time-end[b-fx37g09g7u] {
    font-size: 0.7rem;
    color: #9ca3af;
}

.time-content[b-fx37g09g7u] {
    flex: 1;
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.class-block[b-fx37g09g7u] {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.class-info[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
}

.class-name[b-fx37g09g7u] {
    font-weight: 600;
    font-size: 0.95rem;
}

.class-teacher[b-fx37g09g7u] {
    font-size: 0.8rem;
    opacity: 0.9;
}

.empty-slot-readonly[b-fx37g09g7u] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #e5e7eb;
    border-radius: 6px;
    color: #d1d5db;
}

.time-row.break-row[b-fx37g09g7u] {
    background: #fef9e7;
    min-height: 40px;
}

.time-row.break-row .time-label[b-fx37g09g7u] {
    background: #fdf6e3;
}

.break-block[b-fx37g09g7u] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background: #f5a623;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.break-name[b-fx37g09g7u] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
}

.week-view[b-fx37g09g7u] {
    overflow-x: auto;
}

.week-header[b-fx37g09g7u] {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
}

.time-column-header[b-fx37g09g7u] {
    width: 80px;
    flex-shrink: 0;
}

.day-column-header[b-fx37g09g7u] {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e5e7eb;
}

.day-name[b-fx37g09g7u] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.week-body[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
}

.week-row[b-fx37g09g7u] {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    min-height: 50px;
}

.week-row .time-label[b-fx37g09g7u] {
    width: 80px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    border-right: 2px solid #e5e7eb;
    flex-shrink: 0;
    gap: 2px;
}

.week-row .time-label .time-start[b-fx37g09g7u] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

.week-row .time-label .time-end[b-fx37g09g7u] {
    font-size: 0.65rem;
    color: #9ca3af;
}

.week-cell[b-fx37g09g7u] {
    flex: 1;
    min-width: 120px;
    padding: 0.25rem;
    border-left: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
    justify-content: center;
}

.week-cell.today[b-fx37g09g7u] {
    background: #dbeafe;
}

.week-row.break-row[b-fx37g09g7u] {
    background: #fef9e7;
    min-height: 36px;
}

.week-row.break-row .time-label[b-fx37g09g7u] {
    background: #fdf6e3;
}

.week-break-cell[b-fx37g09g7u] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
}

.week-break-cell .break-name[b-fx37g09g7u] {
    background: #f5a623;
    color: white;
    padding: 0.25rem 1.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.class-chip[b-fx37g09g7u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.class-chip span[b-fx37g09g7u] {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.month-view[b-fx37g09g7u] {
    padding: 1rem;
}

.month-header[b-fx37g09g7u] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.month-day-header[b-fx37g09g7u] {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.month-grid[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.month-week[b-fx37g09g7u] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.month-cell[b-fx37g09g7u] {
    min-height: 80px;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
}

.month-cell.other-month[b-fx37g09g7u] {
    background: #f9fafb;
    opacity: 0.5;
}

.month-cell.today[b-fx37g09g7u] {
    border-color: #0055A3;
    background: #dbeafe;
}

.cell-day[b-fx37g09g7u] {
    font-weight: 600;
    color: #00284D;
    font-size: 0.8rem;
}

.cell-courses[b-fx37g09g7u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.25rem;
}

.course-pill[b-fx37g09g7u] {
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.more-courses[b-fx37g09g7u] {
    font-size: 0.6rem;
    color: #6b7280;
    text-align: center;
    font-weight: 500;
}

.color-blue[b-fx37g09g7u] { background: #4299e1; }
.color-green[b-fx37g09g7u] { background: #48bb78; }
.color-purple[b-fx37g09g7u] { background: #9f7aea; }
.color-orange[b-fx37g09g7u] { background: #ed8936; }
.color-red[b-fx37g09g7u] { background: #fc8181; }
.color-pink[b-fx37g09g7u] { background: #ed64a6; }
.color-yellow[b-fx37g09g7u] { background: #ecc94b; }
.color-teal[b-fx37g09g7u] { background: #38b2ac; }
.color-indigo[b-fx37g09g7u] { background: #667eea; }
.color-cyan[b-fx37g09g7u] { background: #0bc5ea; }
.color-gray[b-fx37g09g7u] { background: #a0aec0; }

@media (max-width: 768px) {
    .calendar-nav[b-fx37g09g7u] {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-left[b-fx37g09g7u], .nav-center[b-fx37g09g7u], .nav-right[b-fx37g09g7u] {
        width: 100%;
        justify-content: center;
    }

    .week-view[b-fx37g09g7u] {
        font-size: 0.85rem;
    }

    .day-column-header[b-fx37g09g7u] {
        min-width: 100px;
    }

    .week-cell[b-fx37g09g7u] {
        min-width: 100px;
    }
}
/* /Pages/Private/Horarios.razor.rz.scp.css */
/* ============================================
   HORARIOS - I.E.P. Javier Perez de Cuellar
   CSS Isolation
   ============================================ */

/* Layout base (page-container, page-header) en layout.css */

/* ============================================
   TABS
   ============================================ */
.tabs-container[b-5onkd97qid] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0;
}

.tab-btn[b-5onkd97qid] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-light);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
}

.tab-btn:hover[b-5onkd97qid] {
    color: var(--color-primary);
}

.tab-btn.active[b-5onkd97qid] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-btn svg[b-5onkd97qid] {
    width: 18px;
    height: 18px;
}

/* ============================================
   FILTROS
   ============================================ */
.filters-bar[b-5onkd97qid] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label[b-5onkd97qid] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-select[b-5onkd97qid] {
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    min-width: 180px;
    background: white;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.form-select:focus[b-5onkd97qid] {
    outline: none;
    border-color: var(--color-primary);
}

.btn-primary[b-5onkd97qid] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary:hover[b-5onkd97qid] {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-5onkd97qid] {
    background: var(--text-placeholder);
    cursor: not-allowed;
    transform: none;
}

.btn-primary svg[b-5onkd97qid] {
    width: 18px;
    height: 18px;
}

.btn-crear-examen[b-5onkd97qid] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-success, #22c55e);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-crear-examen:hover[b-5onkd97qid] {
    background: #16a34a;
    transform: translateY(-1px);
}

.btn-crear-examen svg[b-5onkd97qid] {
    width: 18px;
    height: 18px;
}

.btn-secondary[b-5onkd97qid] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--bg-gray);
    color: var(--text-gray);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-secondary:hover[b-5onkd97qid] {
    background: var(--border-light);
}

.btn-secondary svg[b-5onkd97qid] {
    width: 18px;
    height: 18px;
}

.btn-danger[b-5onkd97qid] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-danger:hover[b-5onkd97qid] {
    background: var(--color-accent-dark);
}

/* ============================================
   INDICADOR DE SELECCION
   ============================================ */
.selection-indicator[b-5onkd97qid] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-sky);
    border: 1px solid #90cdf4;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.selection-indicator svg[b-5onkd97qid] {
    width: 20px;
    height: 20px;
    color: var(--color-success);
}

.selection-indicator span[b-5onkd97qid] {
    font-weight: 600;
    color: var(--color-primary-dark);
    font-size: 0.95rem;
}

/* ============================================
   NAVEGACION CALENDARIO
   ============================================ */
.calendar-nav[b-5onkd97qid] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.nav-left[b-5onkd97qid] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-today[b-5onkd97qid] {
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--text-gray);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-today:hover[b-5onkd97qid] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.nav-arrows[b-5onkd97qid] {
    display: flex;
    gap: 0.25rem;
}

.btn-arrow[b-5onkd97qid] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-arrow:hover[b-5onkd97qid] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-arrow svg[b-5onkd97qid] {
    width: 18px;
    height: 18px;
}

.nav-center[b-5onkd97qid] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.calendar-icon[b-5onkd97qid] {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.current-date[b-5onkd97qid] {
    font-weight: 600;
    color: var(--color-primary-dark);
    font-size: 1rem;
}

.nav-right[b-5onkd97qid] {
    display: flex;
    align-items: center;
}

.view-switcher[b-5onkd97qid] {
    display: flex;
    background: white;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.view-btn[b-5onkd97qid] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.view-btn:hover[b-5onkd97qid] {
    color: var(--color-primary);
}

.view-btn.active[b-5onkd97qid] {
    background: var(--color-primary);
    color: white;
}

/* ============================================
   CONTENEDOR DE HORARIO
   ============================================ */
.schedule-container[b-5onkd97qid] {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* ============================================
   ESTADO VACIO
   ============================================ */
.empty-state[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-5onkd97qid] {
    width: 80px;
    height: 80px;
    background: var(--bg-sky);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.empty-icon svg[b-5onkd97qid] {
    width: 40px;
    height: 40px;
    color: var(--color-primary);
}

.empty-state h3[b-5onkd97qid] {
    font-size: 1.25rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.5rem;
}

.empty-state p[b-5onkd97qid] {
    color: var(--text-light);
    font-size: 0.95rem;
    max-width: 400px;
}

/* ============================================
   VISTA DE DIA
   ============================================ */
.day-view[b-5onkd97qid] {
    padding: 1rem;
}

.day-header[b-5onkd97qid] {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 1rem;
}

.day-title[b-5onkd97qid] {
    font-weight: 600;
    color: var(--color-primary-dark);
    text-transform: capitalize;
}

.time-grid[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
}

.time-row[b-5onkd97qid] {
    display: flex;
    border-bottom: 1px solid var(--border-hover);
    min-height: 60px;
}

.time-row:last-child[b-5onkd97qid] {
    border-bottom: none;
}

.time-label[b-5onkd97qid] {
    width: 80px;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    border-right: 2px solid var(--border-light);
    flex-shrink: 0;
}

.time-start[b-5onkd97qid] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-gray);
}

.time-end[b-5onkd97qid] {
    font-size: 0.7rem;
    color: var(--text-placeholder);
}

.time-content[b-5onkd97qid] {
    flex: 1;
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.class-block[b-5onkd97qid] {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.class-info[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
}

.class-name[b-5onkd97qid] {
    font-weight: 600;
    font-size: 0.95rem;
}

.class-teacher[b-5onkd97qid] {
    font-size: 0.8rem;
    opacity: 0.9;
}

.btn-remove[b-5onkd97qid] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-remove:hover[b-5onkd97qid] {
    background: rgba(255,255,255,0.3);
}

.btn-remove svg[b-5onkd97qid] {
    width: 14px;
    height: 14px;
}

.empty-slot[b-5onkd97qid] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-placeholder);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.empty-slot:hover[b-5onkd97qid] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--bg-sky);
}

.empty-slot-week[b-5onkd97qid] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-light);
    border-radius: 4px;
    color: var(--text-placeholder);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 30px;
}

.empty-slot-week:hover[b-5onkd97qid] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--bg-sky);
}

/* --- Breaks (Day View) --- */
.time-row.break-row[b-5onkd97qid] {
    background: #fef9e7;
    min-height: 40px;
}

.time-row.break-row .time-label[b-5onkd97qid] {
    background: #fdf6e3;
}

.break-block[b-5onkd97qid] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background: #f5a623;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.break-name[b-5onkd97qid] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ============================================
   VISTA DE SEMANA
   ============================================ */
.week-view[b-5onkd97qid] {
    overflow-x: auto;
}

.week-header[b-5onkd97qid] {
    display: flex;
    border-bottom: 2px solid var(--border-light);
    background: var(--bg-light);
}

.time-column-header[b-5onkd97qid] {
    width: 80px;
    flex-shrink: 0;
}

.day-column-header[b-5onkd97qid] {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border-light);
}

.day-name[b-5onkd97qid] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.week-body[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
}

.week-row[b-5onkd97qid] {
    display: flex;
    border-bottom: 1px solid var(--border-hover);
    min-height: 50px;
}

.week-row .time-label[b-5onkd97qid] {
    width: 80px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    border-right: 2px solid var(--border-light);
    flex-shrink: 0;
    gap: 2px;
}

.week-row .time-label .time-start[b-5onkd97qid] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-gray);
}

.week-row .time-label .time-end[b-5onkd97qid] {
    font-size: 0.65rem;
    color: var(--text-placeholder);
}

.week-cell[b-5onkd97qid] {
    flex: 1;
    min-width: 120px;
    padding: 0.25rem;
    border-left: 1px solid var(--border-hover);
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
    justify-content: center;
}

.week-cell.today[b-5onkd97qid] {
    background: var(--bg-sky);
}

.week-row.break-row[b-5onkd97qid] {
    background: #fef9e7;
    min-height: 36px;
}

.week-row.break-row .time-label[b-5onkd97qid] {
    background: #fdf6e3;
}

.week-break-cell[b-5onkd97qid] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
}

.week-break-cell .break-name[b-5onkd97qid] {
    background: #f5a623;
    color: white;
    padding: 0.25rem 1.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.class-chip[b-5onkd97qid] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.class-chip span[b-5onkd97qid] {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-content[b-5onkd97qid] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
}

.chip-content span[b-5onkd97qid] {
    flex: none;
}

.chip-teacher[b-5onkd97qid] {
    font-size: 0.65rem;
    opacity: 0.85;
    font-weight: 400;
}

.class-chip-multi[b-5onkd97qid] {
    padding: 0.2rem 0.5rem;
}

.btn-remove-small[b-5onkd97qid] {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.3);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    padding: 0;
}

.btn-remove-small svg[b-5onkd97qid] {
    width: 10px;
    height: 10px;
}

/* ============================================
   VISTA DE MES
   ============================================ */
.month-view[b-5onkd97qid] {
    padding: 1rem;
}

.month-header[b-5onkd97qid] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.month-day-header[b-5onkd97qid] {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.month-grid[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.month-week[b-5onkd97qid] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.month-cell[b-5onkd97qid] {
    min-height: 80px;
    padding: 0.5rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: white;
}

.month-cell.other-month[b-5onkd97qid] {
    background: var(--bg-light);
    opacity: 0.5;
}

.month-cell.today[b-5onkd97qid] {
    border-color: var(--color-primary);
    background: var(--bg-sky);
}

.cell-day[b-5onkd97qid] {
    font-weight: 600;
    color: var(--color-primary-dark);
    font-size: 0.8rem;
}

.cell-courses[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.25rem;
}

.course-pill[b-5onkd97qid] {
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.more-courses[b-5onkd97qid] {
    font-size: 0.6rem;
    color: var(--text-light);
    text-align: center;
    font-weight: 500;
}

/* ============================================
   COLORES DE CLASES
   ============================================ */
.color-blue[b-5onkd97qid] { background: #4299e1; }
.color-green[b-5onkd97qid] { background: #48bb78; }
.color-purple[b-5onkd97qid] { background: #9f7aea; }
.color-orange[b-5onkd97qid] { background: #ed8936; }
.color-red[b-5onkd97qid] { background: #fc8181; }
.color-pink[b-5onkd97qid] { background: #ed64a6; }
.color-yellow[b-5onkd97qid] { background: #ecc94b; }
.color-teal[b-5onkd97qid] { background: #38b2ac; }
.color-indigo[b-5onkd97qid] { background: #667eea; }
.color-cyan[b-5onkd97qid] { background: #0bc5ea; }
.color-gray[b-5onkd97qid] { background: var(--text-placeholder); }

/* ============================================
   COLORES DE EXAMENES
   ============================================ */
.exam-red[b-5onkd97qid] { background: #e53e3e; }
.exam-orange[b-5onkd97qid] { background: #dd6b20; }
.exam-purple[b-5onkd97qid] { background: #805ad5; }
.exam-teal[b-5onkd97qid] { background: #319795; }
.exam-blue[b-5onkd97qid] { background: #3182ce; }
.exam-pink[b-5onkd97qid] { background: #d53f8c; }

/* ============================================
   EXAMENES - VISTA DIA
   ============================================ */
.exam-day-list[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
}

.exam-block[b-5onkd97qid] {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.exam-block-header[b-5onkd97qid] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exam-block-title[b-5onkd97qid] {
    font-weight: 700;
    font-size: 1rem;
}

.exam-block-badge[b-5onkd97qid] {
    background: rgba(255,255,255,0.25);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.exam-block-details[b-5onkd97qid] {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

.exam-block-meta[b-5onkd97qid] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    opacity: 0.8;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 0.4rem;
}

.exam-empty-day[b-5onkd97qid] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-placeholder);
    font-size: 0.9rem;
}

/* ============================================
   EXAMENES - VISTA SEMANA
   ============================================ */
.exam-week-body[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
}

.exam-week-row[b-5onkd97qid] {
    display: flex;
    min-height: 120px;
}

.exam-chip[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    color: white;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.exam-chip-title[b-5onkd97qid] {
    font-size: 0.72rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exam-chip-course[b-5onkd97qid] {
    font-size: 0.6rem;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   EXAMENES - VISTA MES (pills)
   ============================================ */
.exam-pill[b-5onkd97qid] {
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.month-cell.has-exams[b-5onkd97qid] {
    border-color: var(--color-highlight);
}

/* ============================================
   ACCIONES DE PAGINA
   ============================================ */
.page-actions[b-5onkd97qid] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay[b-5onkd97qid] {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: 1rem;
}

.modal-content[b-5onkd97qid] {
    background: white;
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-xl);
}

.modal-content.modal-sm[b-5onkd97qid] {
    max-width: 400px;
}

.modal-header[b-5onkd97qid] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.modal-header h3[b-5onkd97qid] {
    font-size: 1.1rem;
    color: var(--color-primary-dark);
    margin: 0;
}

.modal-close[b-5onkd97qid] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal-close:hover[b-5onkd97qid] {
    background: var(--bg-gray);
    color: var(--color-error);
}

.modal-close svg[b-5onkd97qid] {
    width: 18px;
    height: 18px;
}

.modal-body[b-5onkd97qid] {
    padding: 1.5rem;
}

.modal-body .form-group[b-5onkd97qid] {
    margin-bottom: 1rem;
}

.modal-body .form-group:last-child[b-5onkd97qid] {
    margin-bottom: 0;
}

.modal-body .form-group label[b-5onkd97qid] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-gray);
    font-size: 0.875rem;
}

.modal-body .form-select[b-5onkd97qid] {
    width: 100%;
}

.modal-body .form-row[b-5onkd97qid] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.modal-body p[b-5onkd97qid] {
    color: var(--text-gray);
    margin-bottom: 0.5rem;
}

.modal-body .text-muted[b-5onkd97qid] {
    color: var(--text-placeholder);
    font-size: 0.85rem;
}

.modal-footer[b-5onkd97qid] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-light);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading-state[b-5onkd97qid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.loading-state p[b-5onkd97qid] {
    color: var(--text-light);
    font-size: 0.95rem;
}

.spinner[b-5onkd97qid] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-light);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin-b-5onkd97qid 0.8s linear infinite;
}

@keyframes spin-b-5onkd97qid {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .filters-bar[b-5onkd97qid] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-5onkd97qid] {
        width: 100%;
    }

    .form-select[b-5onkd97qid] {
        width: 100%;
        min-width: auto;
    }

    .calendar-nav[b-5onkd97qid] {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-left[b-5onkd97qid], .nav-center[b-5onkd97qid], .nav-right[b-5onkd97qid] {
        width: 100%;
        justify-content: center;
    }

    .tabs-container[b-5onkd97qid] {
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .tab-btn[b-5onkd97qid] {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

    .week-view[b-5onkd97qid] {
        font-size: 0.85rem;
    }

    .day-column-header[b-5onkd97qid] {
        min-width: 100px;
    }

    .week-cell[b-5onkd97qid] {
        min-width: 100px;
    }

    .page-actions[b-5onkd97qid] {
        flex-direction: column;
    }

    .page-actions button[b-5onkd97qid] {
        width: 100%;
        justify-content: center;
    }

    .modal-body .form-row[b-5onkd97qid] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PRINT HEADER (hidden on screen)
   ============================================ */
.print-header[b-5onkd97qid] {
    display: none;
}

.print-logo[b-5onkd97qid] {
    display: none;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    *[b-5onkd97qid] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .filters-bar[b-5onkd97qid],
    .calendar-nav[b-5onkd97qid],
    .page-actions[b-5onkd97qid],
    .tabs-container[b-5onkd97qid],
    .btn-remove[b-5onkd97qid],
    .btn-remove-small[b-5onkd97qid],
    .empty-slot[b-5onkd97qid],
    .empty-slot-week[b-5onkd97qid],
    .selection-indicator[b-5onkd97qid],
    .page-header[b-5onkd97qid] {
        display: none !important;
    }

    .print-header[b-5onkd97qid] {
        display: flex !important;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #333;
    }

    .print-logo[b-5onkd97qid] {
        display: block !important;
        width: 60px;
        height: 60px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .print-header-text[b-5onkd97qid] {
        flex: 1;
    }

    .print-header h2[b-5onkd97qid] {
        font-size: 1.4rem;
        font-weight: 700;
        color: #000;
        margin: 0 0 0.25rem;
    }

    .print-subtitle[b-5onkd97qid] {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
        margin: 0 0 0.15rem;
    }

    .print-date[b-5onkd97qid] {
        font-size: 0.8rem;
        color: #666;
        margin: 0;
    }

    .page-container[b-5onkd97qid] {
        max-width: 100%;
        padding: 0;
    }

    .schedule-container[b-5onkd97qid] {
        box-shadow: none !important;
        border: 1px solid #999;
        break-inside: avoid;
    }

    .week-view[b-5onkd97qid],
    .day-view[b-5onkd97qid] {
        font-size: 0.85rem;
    }

    .day-column-header[b-5onkd97qid] {
        background: #f0f0f0 !important;
        color: #000 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .time-label[b-5onkd97qid] {
        color: #333 !important;
    }

    /* Mantener colores en class-block (day view) */
    .class-block[b-5onkd97qid] {
        break-inside: avoid;
        justify-content: center;
        text-align: center;
    }

    .class-block .class-name[b-5onkd97qid],
    .class-block .class-teacher[b-5onkd97qid] {
        color: white !important;
        text-align: center;
    }

    /* Mantener colores en class-chip (week view) */
    .class-chip[b-5onkd97qid] {
        padding: 0.2rem 0.35rem;
        font-size: 0.65rem;
        justify-content: center;
        text-align: center;
    }

    .class-chip span[b-5onkd97qid] {
        color: white !important;
        text-align: center;
    }

    .week-cell[b-5onkd97qid] {
        min-width: 80px;
        padding: 0.15rem;
        align-items: stretch;
        justify-content: center;
    }

    /* Mantener colores en breaks */
    .week-row.break-row[b-5onkd97qid] {
        background: #fef9e7 !important;
    }

    .week-break-cell .break-name[b-5onkd97qid] {
        background: #f5a623 !important;
        color: white !important;
    }

    .break-block[b-5onkd97qid] {
        background: #f5a623 !important;
        color: white !important;
    }

    .time-row.break-row[b-5onkd97qid] {
        background: #fef9e7 !important;
    }

    /* Mantener colores en pills (month view) */
    .course-pill[b-5onkd97qid] {
        color: white !important;
        font-size: 0.5rem;
    }

    .month-cell[b-5onkd97qid] {
        min-height: 50px;
        padding: 0.25rem;
    }

    /* Mantener colores de chips */
    .color-blue[b-5onkd97qid] { background: #4299e1 !important; }
    .color-green[b-5onkd97qid] { background: #48bb78 !important; }
    .color-purple[b-5onkd97qid] { background: #9f7aea !important; }
    .color-orange[b-5onkd97qid] { background: #ed8936 !important; }
    .color-red[b-5onkd97qid] { background: #fc8181 !important; }
    .color-pink[b-5onkd97qid] { background: #ed64a6 !important; }
    .color-yellow[b-5onkd97qid] { background: #ecc94b !important; }
    .color-teal[b-5onkd97qid] { background: #38b2ac !important; }
    .color-indigo[b-5onkd97qid] { background: #667eea !important; }
    .color-cyan[b-5onkd97qid] { background: #0bc5ea !important; }
    .color-gray[b-5onkd97qid] { background: #a0aec0 !important; }

    /* Colores examenes */
    .exam-red[b-5onkd97qid] { background: #e53e3e !important; }
    .exam-orange[b-5onkd97qid] { background: #dd6b20 !important; }
    .exam-purple[b-5onkd97qid] { background: #805ad5 !important; }
    .exam-teal[b-5onkd97qid] { background: #319795 !important; }
    .exam-blue[b-5onkd97qid] { background: #3182ce !important; }
    .exam-pink[b-5onkd97qid] { background: #d53f8c !important; }

    .exam-pill[b-5onkd97qid] {
        color: white !important;
        font-size: 0.5rem;
    }

    .exam-block[b-5onkd97qid] {
        break-inside: avoid;
    }

    /* Comprimir filas para caber en una pagina */
    .time-row[b-5onkd97qid] {
        min-height: 36px;
    }

    .week-row[b-5onkd97qid] {
        min-height: 30px;
    }

    .time-label[b-5onkd97qid] {
        width: 60px;
        padding: 0.25rem;
        font-size: 0.7rem;
    }

    .week-row .time-label[b-5onkd97qid] {
        width: 60px;
        padding: 0.25rem;
        font-size: 0.7rem;
    }

    .time-column-header[b-5onkd97qid] {
        width: 60px;
    }

    .day-column-header[b-5onkd97qid] {
        padding: 0.4rem;
        min-width: 80px;
    }

    .day-name[b-5onkd97qid] {
        font-size: 0.7rem;
    }

    .time-content[b-5onkd97qid] {
        padding: 0.25rem;
    }

    .week-header[b-5onkd97qid] {
        background: #f7fafc !important;
    }
}

@page {
    size: landscape;
    margin: 10mm;
}
/* /Pages/Private/Matricula.razor.rz.scp.css */
/* ============================================
   MATRICULA PAGE - SCOPED STYLES
   Migrado de wwwroot/css/pages/matricula.css
   ============================================ */

/* ============================================
   WIZARD CONTAINER
   ============================================ */
.wizard-container[b-uxolz990ig] {
    background: var(--bg-white);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 0.5rem 1rem;
}

/* ============================================
   STEPPER (Indicador de pasos)
   ============================================ */
.stepper[b-uxolz990ig] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
}

.step[b-uxolz990ig] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.step-circle[b-uxolz990ig] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    color: #a0aec0;
    transition: all 0.3s ease;
}

.step-circle svg[b-uxolz990ig] {
    width: 14px;
    height: 14px;
}

.step.active .step-circle[b-uxolz990ig] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: white;
}

.step.completed .step-circle[b-uxolz990ig] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: white;
}

.step-label[b-uxolz990ig] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #718096;
    text-align: center;
    max-width: 80px;
}

.step.active .step-label[b-uxolz990ig],
.step.completed .step-label[b-uxolz990ig] {
    color: var(--color-primary);
    font-weight: 600;
}

.step.clickable[b-uxolz990ig] {
    cursor: pointer;
}

.step.clickable:hover .step-circle[b-uxolz990ig] {
    transform: scale(1.1);
    box-shadow: 0 2px 8px var(--bg-primary-subtle);
}

.step.clickable:hover .step-label[b-uxolz990ig] {
    text-decoration: underline;
}

.step-line[b-uxolz990ig] {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    margin: 0 0.5rem;
    margin-bottom: 1rem;
    max-width: 80px;
    transition: background 0.3s ease;
}

.step-line.completed[b-uxolz990ig] {
    background: var(--color-primary);
}

/* ============================================
   WIZARD CONTENT
   ============================================ */
.wizard-content[b-uxolz990ig] {
    min-height: auto;
}

.step-content[b-uxolz990ig] {
    animation: fadeIn-b-uxolz990ig 0.3s ease;
}

@keyframes fadeIn-b-uxolz990ig {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   CHECKBOX ROW (Alumno nuevo / Apoderado nuevo)
   ============================================ */
.checkbox-row[b-uxolz990ig] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.custom-checkbox[b-uxolz990ig] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-dark);
    user-select: none;
}

.custom-checkbox input[type="checkbox"][b-uxolz990ig] {
    display: none;
}

.custom-checkbox .checkmark[b-uxolz990ig] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-primary);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark[b-uxolz990ig] {
    background: var(--color-primary);
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark[b-uxolz990ig]::after {
    content: "";
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.search-select[b-uxolz990ig] {
    flex: 1;
    min-width: 200px;
}

/* Dropdown con busqueda */
.search-select-container[b-uxolz990ig] {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-select-container .search-input[b-uxolz990ig] {
    width: 100%;
}

.selected-badge[b-uxolz990ig] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    background: #e0edfa;
    color: #0055A3;
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    pointer-events: auto;
    max-width: calc(100% - 1.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-clear[b-uxolz990ig] {
    background: none;
    border: none;
    color: #0055A3;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.15rem;
    line-height: 1;
}

.search-dropdown[b-uxolz990ig] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background: white;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.search-dropdown-item[b-uxolz990ig] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    gap: 0.5rem;
}

.search-dropdown-item:hover[b-uxolz990ig] {
    background: #f0f7ff;
}

.search-dropdown-item.selected[b-uxolz990ig] {
    background: #e0edfa;
}

.search-dropdown-item .item-name[b-uxolz990ig] {
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-dropdown-item .item-detail[b-uxolz990ig] {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}

.search-dropdown-empty[b-uxolz990ig] {
    padding: 0.75rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.875rem;
}

/* ============================================
   FORM GRID
   ============================================ */
.form-grid[b-uxolz990ig] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem 0.75rem;
}

.form-group[b-uxolz990ig] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.form-group.full-width[b-uxolz990ig] {
    grid-column: 1 / -1;
}

.form-group label[b-uxolz990ig] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-dark);
}

/* ============================================
   FORM EXTRA SECTION (Transporte, etc.)
   ============================================ */
.form-extra-section[b-uxolz990ig] {
    margin-top: 0.75rem;
    padding: 0.5rem 0;
}

/* ============================================
   FORM CREDENTIALS (Usuario/Contraseña autogenerados)
   ============================================ */
.form-credentials[b-uxolz990ig] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
}

/* ============================================
   FORM INPUTS
   ============================================ */
.form-input[b-uxolz990ig],
.form-select[b-uxolz990ig],
.form-textarea[b-uxolz990ig] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-size: 0.85rem;
    color: var(--text-dark);
    background: var(--bg-white);
    transition: all 0.2s ease;
}

.form-input:focus[b-uxolz990ig],
.form-select:focus[b-uxolz990ig],
.form-textarea:focus[b-uxolz990ig] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-faint);
}

.form-input[b-uxolz990ig]::placeholder {
    color: #a0aec0;
}

.form-select[b-uxolz990ig] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-textarea[b-uxolz990ig] {
    resize: vertical;
    min-height: 80px;
}

/* ============================================
   DOCUMENT TYPE ROW (DNI / CE)
   ============================================ */
.doc-type-row[b-uxolz990ig] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.doc-type-select[b-uxolz990ig] {
    width: 80px;
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 0.6rem 0.5rem;
}

/* ============================================
   INPUT WITH CLEAR BUTTON
   ============================================ */
.input-with-clear[b-uxolz990ig] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-clear .form-input[b-uxolz990ig] {
    padding-right: 2.5rem;
}

.btn-clear[b-uxolz990ig] {
    position: absolute;
    right: 0.75rem;
    width: 20px;
    height: 20px;
    border: none;
    background: #e2e8f0;
    color: #718096;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-clear:hover[b-uxolz990ig] {
    background: #cbd5e0;
    color: #4a5568;
}

/* ============================================
   FILE INPUT
   ============================================ */
.file-input-wrapper[b-uxolz990ig] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-file[b-uxolz990ig] {
    padding: 0.6rem 1rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-file:hover[b-uxolz990ig] {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.btn-file input[type="file"][b-uxolz990ig] {
    display: none;
}

.file-name[b-uxolz990ig] {
    font-size: 0.85rem;
    color: #718096;
}

.photo-preview[b-uxolz990ig] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
}

.btn-file.uploading[b-uxolz990ig] {
    pointer-events: none;
    opacity: 0.5;
}

.btn-remove-photo[b-uxolz990ig] {
    background: none;
    border: none;
    color: #e53e3e;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.btn-remove-photo:hover[b-uxolz990ig] {
    color: #c53030;
}

/* ============================================
   CHECKBOX TRANSPORT
   ============================================ */
.checkbox-transport[b-uxolz990ig] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0.5rem;
}

/* ============================================
   FORM ACTIONS
   ============================================ */
.form-actions[b-uxolz990ig] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.form-actions .btn[b-uxolz990ig] {
    min-width: 90px;
    padding: 0.4rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.form-actions .btn-primary[b-uxolz990ig] {
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-actions .btn-primary:hover:not(:disabled)[b-uxolz990ig] {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.form-actions .btn-primary:disabled[b-uxolz990ig] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ============================================
   SEARCHING INDICATOR
   ============================================ */
.searching-indicator[b-uxolz990ig] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-primary);
    margin-left: 0.5rem;
    animation: pulse-b-uxolz990ig 1.5s ease-in-out infinite;
}

@keyframes pulse-b-uxolz990ig {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   SPINNER
   ============================================ */
.spinner-small[b-uxolz990ig] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-uxolz990ig 0.8s linear infinite;
}

@keyframes spin-b-uxolz990ig {
    to { transform: rotate(360deg); }
}

/* ============================================
   ENROLLMENT TABS (Individual / Masiva)
   ============================================ */
.enrollment-tabs[b-uxolz990ig] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.enrollment-tab[b-uxolz990ig] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: var(--bg-white);
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #718096;
    cursor: pointer;
    transition: all 0.2s ease;
}

.enrollment-tab:hover[b-uxolz990ig] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.enrollment-tab.active[b-uxolz990ig] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 2px 8px var(--bg-primary-subtle);
}

.enrollment-tab svg[b-uxolz990ig] {
    flex-shrink: 0;
}

/* ============================================
   BULK MODE - CONTAINER
   ============================================ */
.bulk-container[b-uxolz990ig] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Transfer layout: Origen → Destino */
.bulk-transfer[b-uxolz990ig] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.bulk-section[b-uxolz990ig] {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
}

.bulk-section-title[b-uxolz990ig] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0 0 0.6rem;
}

.bulk-selectors[b-uxolz990ig] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* Flecha central */
.bulk-arrow[b-uxolz990ig] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2.5rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ============================================
   BULK MODE - TABLE
   ============================================ */
.bulk-table-wrapper[b-uxolz990ig] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.bulk-counter[b-uxolz990ig] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.bulk-counter-text[b-uxolz990ig] {
    font-size: 0.85rem;
    color: #718096;
}

.table-responsive[b-uxolz990ig] {
    overflow-x: auto;
}

.students-table[b-uxolz990ig] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.students-table thead[b-uxolz990ig] {
    background: var(--color-primary-dark);
    color: white;
}

.students-table th[b-uxolz990ig] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.students-table td[b-uxolz990ig] {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.th-check[b-uxolz990ig],
.td-check[b-uxolz990ig] {
    width: 40px;
    text-align: center;
}

.student-row[b-uxolz990ig] {
    cursor: pointer;
    transition: background 0.15s ease;
}

.student-row:hover[b-uxolz990ig] {
    background: #f0f7ff;
}

.student-row.selected[b-uxolz990ig] {
    background: #e6f0fa;
}

.student-row.selected:hover[b-uxolz990ig] {
    background: #d6e8f7;
}

.td-student[b-uxolz990ig] {
    font-weight: 600;
    color: var(--text-dark);
}

.td-dni[b-uxolz990ig] {
    font-family: monospace;
    font-size: 0.85rem;
    color: #4a5568;
}

.td-parent[b-uxolz990ig] {
    color: #718096;
}

.td-section[b-uxolz990ig] {
    font-size: 0.8rem;
    color: #a0aec0;
}

/* ============================================
   BULK MODE - LOADING / EMPTY
   ============================================ */
.bulk-loading[b-uxolz990ig] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.bulk-empty[b-uxolz990ig] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem;
    color: #a0aec0;
    text-align: center;
}

.bulk-empty p[b-uxolz990ig] {
    margin: 0;
    font-size: 0.9rem;
}

/* ============================================
   BULK MODE - SUMMARY
   ============================================ */
.bulk-summary[b-uxolz990ig] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #e6f0fa;
    border: 1px solid #b3d4f0;
    border-radius: 8px;
}

.bulk-summary-warning[b-uxolz990ig] {
    background: #fff8e6;
    border-color: #ffd666;
}

.bulk-summary-warning svg[b-uxolz990ig] {
    color: #d4860d;
}

.bulk-summary-info[b-uxolz990ig] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dark);
}

.bulk-summary-info svg[b-uxolz990ig] {
    flex-shrink: 0;
    color: var(--color-primary);
}

.btn-bulk-submit[b-uxolz990ig] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-bulk-submit:hover:not(:disabled)[b-uxolz990ig] {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-bulk-submit:disabled[b-uxolz990ig] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media (max-width: 1200px) {
    .form-grid[b-uxolz990ig] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .wizard-container[b-uxolz990ig] {
        padding: 0.75rem 1rem;
    }

    .step-line[b-uxolz990ig] {
        max-width: 80px;
    }

    .step-label[b-uxolz990ig] {
        font-size: 0.75rem;
        max-width: 90px;
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {

    .wizard-container[b-uxolz990ig] {
        padding: 0.75rem;
        border-radius: 8px;
    }

    .stepper[b-uxolz990ig] {
        flex-wrap: wrap;
        gap: 0.25rem;
        margin-bottom: 0.75rem;
    }

    .step-line[b-uxolz990ig] {
        display: none;
    }

    .step[b-uxolz990ig] {
        flex: 1;
        min-width: 70px;
    }

    .step-circle[b-uxolz990ig] {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .step-label[b-uxolz990ig] {
        font-size: 0.65rem;
    }

    .form-grid[b-uxolz990ig] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .checkbox-row[b-uxolz990ig] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .search-select[b-uxolz990ig],
    .search-select-container[b-uxolz990ig] {
        width: 100%;
    }

    .form-actions[b-uxolz990ig] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-actions .btn[b-uxolz990ig] {
        width: 100%;
    }

    .file-input-wrapper[b-uxolz990ig] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Bulk mode responsive */
    .enrollment-tabs[b-uxolz990ig] {
        flex-direction: column;
    }

    .enrollment-tab[b-uxolz990ig] {
        justify-content: center;
    }

    .bulk-transfer[b-uxolz990ig] {
        flex-direction: column;
    }

    .bulk-arrow[b-uxolz990ig] {
        padding-top: 0;
        transform: rotate(90deg);
    }

    .bulk-selectors[b-uxolz990ig] {
        grid-template-columns: 1fr;
    }

    .bulk-summary[b-uxolz990ig] {
        flex-direction: column;
        text-align: center;
    }

    .btn-bulk-submit[b-uxolz990ig] {
        width: 100%;
        justify-content: center;
    }

    .bulk-counter[b-uxolz990ig] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* ============================================
   RESPONSIVE - MOBILE SMALL
   ============================================ */
@media (max-width: 480px) {
    .step-circle[b-uxolz990ig] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .step-label[b-uxolz990ig] {
        font-size: 0.6rem;
    }

    .form-input[b-uxolz990ig],
    .form-select[b-uxolz990ig] {
        padding: 0.45rem 0.65rem;
        font-size: 0.85rem;
    }

    .form-group label[b-uxolz990ig] {
        font-size: 0.8rem;
    }
}

/* ============================================
   MODO DESMATRICULAR - Colores rojos
   ============================================ */
.unenroll-tab:hover[b-uxolz990ig] {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}

.unenroll-tab.active[b-uxolz990ig] {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
}

.unenroll-summary[b-uxolz990ig] {
    background: #fef2f2;
    border-color: #fca5a5;
}

.unenroll-summary .bulk-summary-info svg[b-uxolz990ig] {
    color: #dc2626;
}

.unenroll-btn[b-uxolz990ig] {
    background: #dc2626 !important;
}

.unenroll-btn:hover:not(:disabled)[b-uxolz990ig] {
    background: #b91c1c !important;
}

.unenroll-confirm-warning[b-uxolz990ig] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    padding: 1rem 0;
}

.unenroll-confirm-warning p[b-uxolz990ig] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.unenroll-cascade-warning[b-uxolz990ig] {
    text-align: left;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #991b1b;
    width: 100%;
}

.unenroll-cascade-warning strong[b-uxolz990ig] {
    color: #7f1d1d;
}

.unenroll-cascade-warning ul[b-uxolz990ig] {
    margin: 0.4rem 0 0;
    padding-left: 1.25rem;
}

.unenroll-cascade-warning li[b-uxolz990ig] {
    margin-bottom: 0.25rem;
}

.unenroll-option-disable[b-uxolz990ig] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid #f3f4f6;
    margin-top: 0.5rem;
}

.unenroll-option-hint[b-uxolz990ig] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-left: 1.6rem;
}

/* ============================================
   BLOQUES DE APODERADO (Principal / Secundario)
   ============================================ */
.parent-block-header[b-uxolz990ig] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary, #0055A3);
}

.parent-block-title[b-uxolz990ig] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary, #0055A3);
}

.parent-block-title.secondary[b-uxolz990ig] {
    color: var(--color-highlight, #F5A623);
}

.parent-block-header .form-group[b-uxolz990ig] {
    margin-bottom: 0;
}

.parent-block-separator[b-uxolz990ig] {
    height: 1px;
    background: linear-gradient(to right, transparent, #e5e7eb, transparent);
    margin: 1.25rem 0;
}

.add-second-parent[b-uxolz990ig] {
    margin: 1rem 0 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
}
/* /Pages/Private/Mensajes.razor.rz.scp.css */
/* ============================================
   MENSAJES - I.E.P. Javier Perez de Cuellar
   Chat / Mensajeria interna
   Solo estilos especificos de esta pagina
   ============================================ */

/* ============================================
   VARIABLES LOCALES
   ============================================ */
:root[b-8ghr4ht09v] {
    --msg-primary: var(--color-primary);
    --msg-primary-dark: var(--color-primary-dark);
    --msg-highlight: var(--color-highlight);
    --msg-success: var(--color-success);
    --msg-bg: #f8f9fa;
    --msg-card-bg: #ffffff;
    --msg-border: #e5e7eb;
    --msg-text: #1f2937;
    --msg-text-secondary: #6b7280;
    --msg-text-muted: #9ca3af;
    --msg-bubble-sent: var(--color-primary);
    --msg-bubble-received: #f0f2f5;
    --msg-danger: var(--color-error);
    --msg-radius-bubble: 12px;
    --msg-radius-card: 8px;
    --msg-sidebar-width: 320px;
    --msg-transition: 0.2s ease;
}

/* ============================================
   CONTAINER PRINCIPAL
   ============================================ */
.msg-container[b-8ghr4ht09v] {
    display: flex;
    flex-direction: row;
    height: calc(100vh - var(--header-height, 60px) - 3rem);
    background-color: var(--msg-bg);
    border-radius: var(--msg-radius-card);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(0, 0, 0, 0.04);
}

/* ============================================
   SIDEBAR - LISTA DE CONVERSACIONES
   ============================================ */
.msg-sidebar[b-8ghr4ht09v] {
    width: var(--msg-sidebar-width);
    min-width: var(--msg-sidebar-width);
    max-width: var(--msg-sidebar-width);
    display: flex;
    flex-direction: column;
    background-color: var(--msg-card-bg);
    border-right: 1px solid var(--msg-border);
    overflow: hidden;
}

/* --- Sidebar Header --- */
.msg-sidebar-header[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--msg-border);
    background-color: var(--msg-card-bg);
    flex-shrink: 0;
}

.msg-sidebar-title[b-8ghr4ht09v],
.msg-sidebar-header h2[b-8ghr4ht09v],
.msg-sidebar-header h3[b-8ghr4ht09v] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--msg-text);
    flex: 1;
}

/* --- Search Box --- */
.msg-search-box[b-8ghr4ht09v] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--msg-border);
    flex-shrink: 0;
    position: relative;
}

.msg-search-icon[b-8ghr4ht09v] {
    position: absolute;
    left: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--msg-text-muted);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.msg-search-input[b-8ghr4ht09v] {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid var(--msg-border);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--msg-text);
    background-color: var(--msg-bg);
    outline: none;
    transition: border-color var(--msg-transition),
                box-shadow var(--msg-transition);
}

.msg-search-input[b-8ghr4ht09v]::placeholder {
    color: var(--msg-text-muted);
}

.msg-search-input:focus[b-8ghr4ht09v] {
    border-color: var(--msg-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

/* --- New Conversation Button --- */
.msg-btn-new[b-8ghr4ht09v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: var(--msg-primary);
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--msg-transition),
                transform var(--msg-transition),
                box-shadow var(--msg-transition);
}

.msg-btn-new:hover[b-8ghr4ht09v] {
    background-color: var(--msg-primary-dark);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 85, 163, 0.3);
}

.msg-btn-new:active[b-8ghr4ht09v] {
    transform: scale(0.95);
}

/* --- Conversation List --- */
.msg-conversation-list[b-8ghr4ht09v] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--msg-border) transparent;
}

.msg-conversation-list[b-8ghr4ht09v]::-webkit-scrollbar {
    width: 6px;
}

.msg-conversation-list[b-8ghr4ht09v]::-webkit-scrollbar-track {
    background: transparent;
}

.msg-conversation-list[b-8ghr4ht09v]::-webkit-scrollbar-thumb {
    background-color: var(--msg-border);
    border-radius: 3px;
}

.msg-conversation-list[b-8ghr4ht09v]::-webkit-scrollbar-thumb:hover {
    background-color: var(--msg-text-muted);
}

/* --- Conversation Item --- */
.msg-conversation-item[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--msg-border);
    transition: background-color var(--msg-transition);
    position: relative;
}

.msg-conversation-item:last-child[b-8ghr4ht09v] {
    border-bottom: none;
}

.msg-conversation-item:hover[b-8ghr4ht09v] {
    background-color: #f0f5ff;
}

.msg-conversation-item.active[b-8ghr4ht09v] {
    background-color: #e8f0fe;
    border-left: 3px solid var(--msg-primary);
    padding-left: calc(1rem - 3px);
}

.msg-conversation-item.active:hover[b-8ghr4ht09v] {
    background-color: #dce8fc;
}

.msg-conversation-item.unread .msg-conversation-name[b-8ghr4ht09v] {
    font-weight: 700;
}

.msg-conversation-item.unread .msg-conversation-preview[b-8ghr4ht09v] {
    color: var(--msg-text);
    font-weight: 500;
}

/* --- Avatar --- */
.msg-avatar[b-8ghr4ht09v] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background-color: var(--msg-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
    flex-shrink: 0;
}

.msg-avatar.msg-avatar-sm[b-8ghr4ht09v] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.8rem;
}

.msg-avatar.msg-avatar-lg[b-8ghr4ht09v] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 1.2rem;
}

.msg-avatar img[b-8ghr4ht09v] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* --- Conversation Info --- */
.msg-conversation-info[b-8ghr4ht09v] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.msg-conversation-top[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.msg-conversation-bottom[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.msg-conversation-name[b-8ghr4ht09v] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--msg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.msg-conversation-preview[b-8ghr4ht09v] {
    font-size: 0.8rem;
    color: var(--msg-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.msg-conversation-time[b-8ghr4ht09v] {
    font-size: 0.7rem;
    color: var(--msg-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.msg-unread-badge[b-8ghr4ht09v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background-color: var(--msg-highlight);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* ============================================
   CHAT AREA - PANEL DERECHO
   ============================================ */
.msg-chat-area[b-8ghr4ht09v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--msg-bg);
}

/* --- Chat Header --- */
.msg-chat-header[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background-color: var(--msg-card-bg);
    border-bottom: 1px solid var(--msg-border);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.msg-btn-back[b-8ghr4ht09v] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--msg-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--msg-transition),
                color var(--msg-transition);
}

.msg-btn-back:hover[b-8ghr4ht09v] {
    background-color: var(--msg-bg);
    color: var(--msg-primary);
}

.msg-chat-header-info[b-8ghr4ht09v] {
    flex: 1;
    min-width: 0;
}

.msg-chat-header-name[b-8ghr4ht09v] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--msg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.msg-typing-indicator[b-8ghr4ht09v] {
    font-size: 0.75rem;
    color: var(--msg-success);
    font-style: italic;
}

/* ============================================
   CHAT MESSAGES AREA
   ============================================ */
.msg-messages-container[b-8ghr4ht09v] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--msg-border) transparent;
}

.msg-messages-container[b-8ghr4ht09v]::-webkit-scrollbar {
    width: 6px;
}

.msg-messages-container[b-8ghr4ht09v]::-webkit-scrollbar-track {
    background: transparent;
}

.msg-messages-container[b-8ghr4ht09v]::-webkit-scrollbar-thumb {
    background-color: var(--msg-border);
    border-radius: 3px;
}

.msg-messages-container[b-8ghr4ht09v]::-webkit-scrollbar-thumb:hover {
    background-color: var(--msg-text-muted);
}

/* --- Date Separator --- */
.msg-date-separator[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    position: relative;
}

.msg-date-separator[b-8ghr4ht09v]::before,
.msg-date-separator[b-8ghr4ht09v]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--msg-border);
}

.msg-date-separator span[b-8ghr4ht09v] {
    padding: 0.25rem 0.75rem;
    font-size: 0.7rem;
    color: var(--msg-text-muted);
    background-color: var(--msg-bg);
    border-radius: 12px;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* --- Load More --- */
.msg-load-more[b-8ghr4ht09v] {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 1rem;
}

.msg-btn-load-more[b-8ghr4ht09v] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border: 1px solid var(--msg-border);
    border-radius: 20px;
    background: var(--msg-card-bg);
    color: var(--msg-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color var(--msg-transition),
                border-color var(--msg-transition),
                color var(--msg-transition);
}

.msg-btn-load-more:hover[b-8ghr4ht09v] {
    background-color: #f0f5ff;
    border-color: var(--msg-primary);
    color: var(--msg-primary);
}

.msg-btn-load-more:disabled[b-8ghr4ht09v] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Bubble Wrapper --- */
.msg-bubble-wrapper[b-8ghr4ht09v] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.5rem;
}

.msg-bubble-wrapper.msg-mine[b-8ghr4ht09v] {
    align-items: flex-end;
}

.msg-bubble-wrapper.msg-theirs[b-8ghr4ht09v] {
    align-items: flex-start;
}

/* --- Message Bubble --- */
.msg-bubble[b-8ghr4ht09v] {
    max-width: 65%;
    padding: 0.6rem 0.85rem;
    border-radius: var(--msg-radius-bubble);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--msg-transition);
}

.msg-bubble:hover[b-8ghr4ht09v] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.msg-bubble.msg-bubble-sent[b-8ghr4ht09v] {
    background-color: var(--msg-bubble-sent);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    margin-left: auto;
}

.msg-bubble.msg-bubble-received[b-8ghr4ht09v] {
    background-color: var(--msg-bubble-received);
    color: var(--msg-text);
    border-bottom-left-radius: 4px;
    margin-right: auto;
}

/* Consecutive bubble radius adjustments */
.msg-bubble-wrapper.msg-mine .msg-bubble + .msg-bubble[b-8ghr4ht09v] {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.msg-bubble-wrapper.msg-mine .msg-bubble:last-child[b-8ghr4ht09v] {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.msg-bubble-wrapper.msg-theirs .msg-bubble + .msg-bubble[b-8ghr4ht09v] {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.msg-bubble-wrapper.msg-theirs .msg-bubble:last-child[b-8ghr4ht09v] {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

/* --- Bubble Text Content --- */
.msg-text[b-8ghr4ht09v] {
    font-size: 0.875rem;
    margin: 0 0 0.15rem;
}

.msg-text a[b-8ghr4ht09v] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.msg-bubble.msg-bubble-sent .msg-text a[b-8ghr4ht09v] {
    color: #dbeafe;
}

/* --- Bubble Footer (Time + Read Status) --- */
.msg-meta[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    margin-top: 0.1rem;
}

.msg-time[b-8ghr4ht09v] {
    font-size: 0.65rem;
    opacity: 0.7;
    white-space: nowrap;
}

.msg-bubble.msg-bubble-sent .msg-time[b-8ghr4ht09v] {
    color: rgba(255, 255, 255, 0.75);
}

.msg-bubble.msg-bubble-received .msg-time[b-8ghr4ht09v] {
    color: var(--msg-text-muted);
}

.msg-read-icon[b-8ghr4ht09v] {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.msg-bubble.msg-bubble-sent .msg-read-icon[b-8ghr4ht09v] {
    color: rgba(255, 255, 255, 0.75);
}

.msg-read-icon.msg-read[b-8ghr4ht09v] {
    color: #60a5fa !important;
}

/* --- File Attachment --- */
.msg-file-attachment[b-8ghr4ht09v] {
    margin-bottom: 0.3rem;
}

.msg-file-link[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--msg-radius-card);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--msg-transition);
}

.msg-bubble.msg-bubble-sent .msg-file-link[b-8ghr4ht09v] {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.msg-bubble.msg-bubble-sent .msg-file-link:hover[b-8ghr4ht09v] {
    background-color: rgba(255, 255, 255, 0.2);
}

.msg-bubble.msg-bubble-received .msg-file-link[b-8ghr4ht09v] {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--msg-text);
}

.msg-bubble.msg-bubble-received .msg-file-link:hover[b-8ghr4ht09v] {
    background-color: rgba(0, 0, 0, 0.08);
}

.msg-file-link svg[b-8ghr4ht09v] {
    flex-shrink: 0;
}

.msg-file-info[b-8ghr4ht09v] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.msg-file-name[b-8ghr4ht09v] {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-file-size[b-8ghr4ht09v] {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* --- Typing Bar (below messages) --- */
.msg-typing-bar[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.8rem;
    color: var(--msg-text-secondary);
    background-color: var(--msg-card-bg);
    border-top: 1px solid var(--msg-border);
}

.msg-typing-dots[b-8ghr4ht09v] {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.msg-typing-dots span[b-8ghr4ht09v] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--msg-text-muted);
    animation: msg-typing-bounce-b-8ghr4ht09v 1.4s infinite ease-in-out both;
}

.msg-typing-dots span:nth-child(1)[b-8ghr4ht09v] {
    animation-delay: 0s;
}

.msg-typing-dots span:nth-child(2)[b-8ghr4ht09v] {
    animation-delay: 0.16s;
}

.msg-typing-dots span:nth-child(3)[b-8ghr4ht09v] {
    animation-delay: 0.32s;
}

@keyframes msg-typing-bounce-b-8ghr4ht09v {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ============================================
   CHAT INPUT AREA
   ============================================ */
.msg-input-area[b-8ghr4ht09v] {
    padding: 0.75rem 1.25rem;
    background-color: var(--msg-card-bg);
    border-top: 1px solid var(--msg-border);
    flex-shrink: 0;
}

/* --- Attached File Preview --- */
.msg-attached-preview[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background-color: #f0f5ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--msg-radius-card);
}

.msg-attached-info[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    font-size: 0.85rem;
    color: var(--msg-text);
}

.msg-attached-info svg[b-8ghr4ht09v] {
    flex-shrink: 0;
    color: var(--msg-primary);
}

.msg-attached-info span[b-8ghr4ht09v] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-attached-size[b-8ghr4ht09v] {
    font-size: 0.75rem;
    color: var(--msg-text-muted);
    flex-shrink: 0;
}

.msg-btn-remove-file[b-8ghr4ht09v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--msg-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--msg-transition),
                color var(--msg-transition);
}

.msg-btn-remove-file:hover[b-8ghr4ht09v] {
    background-color: #fee2e2;
    color: #dc2626;
}

/* --- Input Row --- */
.msg-input-row[b-8ghr4ht09v] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    background-color: var(--msg-bg);
    border: 1px solid var(--msg-border);
    border-radius: 24px;
    padding: 0.35rem 0.5rem 0.35rem 1rem;
    transition: border-color var(--msg-transition),
                box-shadow var(--msg-transition);
}

.msg-input-row:focus-within[b-8ghr4ht09v] {
    border-color: var(--msg-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

textarea.msg-input[b-8ghr4ht09v] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--msg-text);
    resize: none;
    outline: none;
    padding: 0.4rem 0;
    max-height: 120px;
    min-height: 20px;
    line-height: 1.4;
    font-family: inherit;
    scrollbar-width: thin;
}

textarea.msg-input[b-8ghr4ht09v]::placeholder {
    color: var(--msg-text-muted);
}

textarea.msg-input[b-8ghr4ht09v]::-webkit-scrollbar {
    width: 4px;
}

textarea.msg-input[b-8ghr4ht09v]::-webkit-scrollbar-thumb {
    background-color: var(--msg-border);
    border-radius: 2px;
}

.msg-btn-attach[b-8ghr4ht09v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--msg-text-secondary);
    font-size: 1.15rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--msg-transition),
                color var(--msg-transition);
}

.msg-btn-attach:hover[b-8ghr4ht09v] {
    background-color: #f0f5ff;
    color: var(--msg-primary);
}

.msg-btn-send[b-8ghr4ht09v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: var(--msg-primary);
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--msg-transition),
                transform var(--msg-transition),
                box-shadow var(--msg-transition);
}

.msg-btn-send:hover[b-8ghr4ht09v] {
    background-color: var(--msg-primary-dark);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 85, 163, 0.3);
}

.msg-btn-send:active[b-8ghr4ht09v] {
    transform: scale(0.93);
}

.msg-btn-send:disabled[b-8ghr4ht09v] {
    background-color: var(--msg-border);
    color: var(--msg-text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   MODAL - NUEVA CONVERSACION
   ============================================ */
.msg-modal-overlay[b-8ghr4ht09v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    animation: msg-fade-in-b-8ghr4ht09v 0.2s ease;
}

@keyframes msg-fade-in-b-8ghr4ht09v {
    from { opacity: 0; }
    to { opacity: 1; }
}

.msg-modal[b-8ghr4ht09v] {
    background-color: var(--msg-card-bg);
    border-radius: var(--msg-radius-card);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.08);
    animation: msg-slide-up-b-8ghr4ht09v 0.25s ease;
    overflow: hidden;
}

@keyframes msg-slide-up-b-8ghr4ht09v {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.msg-modal-header[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--msg-border);
    flex-shrink: 0;
}

.msg-modal-header h3[b-8ghr4ht09v],
.msg-modal-header h4[b-8ghr4ht09v] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--msg-text);
}

.msg-btn-close[b-8ghr4ht09v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--msg-text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color var(--msg-transition),
                color var(--msg-transition);
}

.msg-btn-close:hover[b-8ghr4ht09v] {
    background-color: var(--msg-bg);
    color: var(--msg-danger);
}

.msg-modal-body[b-8ghr4ht09v] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--msg-border) transparent;
}

.msg-modal-body[b-8ghr4ht09v]::-webkit-scrollbar {
    width: 6px;
}

.msg-modal-body[b-8ghr4ht09v]::-webkit-scrollbar-thumb {
    background-color: var(--msg-border);
    border-radius: 3px;
}

/* Remove the extra border-bottom on search-box inside modal */
.msg-modal-body .msg-search-box[b-8ghr4ht09v] {
    padding: 0 0 0.75rem;
    border-bottom: none;
}

.msg-modal-footer[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--msg-border);
    flex-shrink: 0;
}

/* --- Buttons: Primary & Secondary --- */
.msg-btn-primary[b-8ghr4ht09v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    background-color: var(--msg-primary);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--msg-transition),
                box-shadow var(--msg-transition);
}

.msg-btn-primary:hover[b-8ghr4ht09v] {
    background-color: var(--msg-primary-dark);
    box-shadow: 0 2px 8px rgba(0, 85, 163, 0.3);
}

.msg-btn-primary:disabled[b-8ghr4ht09v] {
    background-color: var(--msg-border);
    color: var(--msg-text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.msg-btn-secondary[b-8ghr4ht09v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--msg-border);
    border-radius: 6px;
    background: transparent;
    color: var(--msg-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--msg-transition),
                border-color var(--msg-transition);
}

.msg-btn-secondary:hover[b-8ghr4ht09v] {
    background-color: var(--msg-bg);
    border-color: var(--msg-text-muted);
}

/* --- User List in Modal --- */
.msg-user-list[b-8ghr4ht09v] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.msg-user-item[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--msg-radius-card);
    cursor: pointer;
    transition: background-color var(--msg-transition);
}

.msg-user-item:hover[b-8ghr4ht09v] {
    background-color: #f0f5ff;
}

.msg-user-item.selected[b-8ghr4ht09v] {
    background-color: #e8f0fe;
    box-shadow: inset 0 0 0 2px var(--msg-primary);
}

.msg-user-info[b-8ghr4ht09v] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.msg-user-name[b-8ghr4ht09v] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--msg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-user-role[b-8ghr4ht09v] {
    font-size: 0.75rem;
    color: var(--msg-text-muted);
}

.msg-check-icon[b-8ghr4ht09v] {
    flex-shrink: 0;
    color: var(--msg-primary);
}

/* --- Initial Message Section --- */
.msg-initial-message[b-8ghr4ht09v] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--msg-border);
}

.msg-label[b-8ghr4ht09v] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--msg-text-secondary);
    margin-bottom: 0.5rem;
}

.msg-initial-message textarea.msg-input[b-8ghr4ht09v] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--msg-border);
    border-radius: var(--msg-radius-card);
    font-size: 0.875rem;
    color: var(--msg-text);
    background-color: var(--msg-bg);
    resize: vertical;
    outline: none;
    min-height: 60px;
    transition: border-color var(--msg-transition),
                box-shadow var(--msg-transition);
}

.msg-initial-message textarea.msg-input:focus[b-8ghr4ht09v] {
    border-color: var(--msg-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

/* ============================================
   EMPTY STATES
   ============================================ */
.msg-empty-state[b-8ghr4ht09v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    flex: 1;
    background-color: var(--msg-bg);
}

.msg-empty-state svg[b-8ghr4ht09v] {
    color: var(--msg-border);
    margin-bottom: 1.25rem;
}

.msg-empty-state h3[b-8ghr4ht09v] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--msg-text);
    margin: 0 0 0.5rem;
}

.msg-empty-state p[b-8ghr4ht09v] {
    font-size: 0.9rem;
    color: var(--msg-text-secondary);
    max-width: 320px;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.msg-empty-state .msg-btn-primary[b-8ghr4ht09v] {
    padding: 0.6rem 1.5rem;
    border-radius: 24px;
    font-size: 0.9rem;
}

/* --- Empty Sidebar --- */
.msg-empty-sidebar[b-8ghr4ht09v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    flex: 1;
    color: var(--msg-text-muted);
}

.msg-empty-sidebar svg[b-8ghr4ht09v] {
    color: var(--msg-border);
    margin-bottom: 0.75rem;
}

.msg-empty-sidebar p[b-8ghr4ht09v] {
    font-size: 0.85rem;
    color: var(--msg-text-muted);
    margin: 0;
}

/* --- Empty Users --- */
.msg-empty-users[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}

.msg-empty-users p[b-8ghr4ht09v] {
    font-size: 0.85rem;
    color: var(--msg-text-muted);
    margin: 0;
}

/* --- No Messages --- */
.msg-no-messages[b-8ghr4ht09v] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    text-align: center;
}

.msg-no-messages p[b-8ghr4ht09v] {
    font-size: 0.875rem;
    color: var(--msg-text-muted);
    margin: 0;
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.msg-loading[b-8ghr4ht09v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    flex: 1;
}

.msg-loading span[b-8ghr4ht09v] {
    font-size: 0.8rem;
    color: var(--msg-text-muted);
}

.msg-spinner[b-8ghr4ht09v] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--msg-border);
    border-top-color: var(--msg-primary);
    border-radius: 50%;
    animation: msg-spin-b-8ghr4ht09v 0.75s linear infinite;
}

.msg-spinner-sm[b-8ghr4ht09v] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--msg-border);
    border-top-color: var(--msg-primary);
    border-radius: 50%;
    animation: msg-spin-b-8ghr4ht09v 0.75s linear infinite;
    display: inline-block;
}

@keyframes msg-spin-b-8ghr4ht09v {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE - TABLET (max-width: 992px)
   ============================================ */
@media (max-width: 992px) {
    .msg-sidebar[b-8ghr4ht09v] {
        --msg-sidebar-width: 280px;
        width: var(--msg-sidebar-width);
        min-width: var(--msg-sidebar-width);
        max-width: var(--msg-sidebar-width);
    }

    .msg-bubble[b-8ghr4ht09v] {
        max-width: 75%;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    .msg-container[b-8ghr4ht09v] {
        flex-direction: column;
        height: calc(100vh - var(--header-height, 60px) - 2rem);
        border-radius: 0;
        box-shadow: none;
        position: relative;
    }

    .msg-btn-back[b-8ghr4ht09v] {
        display: inline-flex;
    }

    /* Sidebar full width on mobile */
    .msg-sidebar[b-8ghr4ht09v] {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .msg-sidebar.msg-sidebar-hidden[b-8ghr4ht09v] {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
    }

    /* Chat full width on mobile */
    .msg-chat-area[b-8ghr4ht09v] {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
    }

    .msg-chat-area.msg-chat-hidden[b-8ghr4ht09v] {
        display: none;
    }

    .msg-bubble[b-8ghr4ht09v] {
        max-width: 85%;
    }

    .msg-messages-container[b-8ghr4ht09v] {
        padding: 0.75rem;
    }

    .msg-input-area[b-8ghr4ht09v] {
        padding: 0.5rem 0.75rem;
    }

    .msg-modal[b-8ghr4ht09v] {
        max-width: 100%;
        max-height: 90vh;
        margin: 0 0.5rem;
        border-radius: 12px;
    }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .msg-conversation-item[b-8ghr4ht09v] {
        padding: 0.6rem 0.75rem;
    }

    .msg-chat-header[b-8ghr4ht09v] {
        padding: 0.65rem 0.75rem;
    }

    .msg-sidebar-header[b-8ghr4ht09v] {
        padding: 0.75rem;
    }

    .msg-search-box[b-8ghr4ht09v] {
        padding: 0.5rem 0.75rem;
    }

    .msg-search-icon[b-8ghr4ht09v] {
        left: 1.5rem;
    }

    .msg-input-row[b-8ghr4ht09v] {
        padding: 0.25rem 0.4rem 0.25rem 0.75rem;
    }

    .msg-btn-send[b-8ghr4ht09v] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .msg-btn-attach[b-8ghr4ht09v] {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .msg-bubble[b-8ghr4ht09v] {
        max-width: 90%;
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
    }
}
/* /Pages/Private/Notas.razor.rz.scp.css */
/* ============================================
   NOTAS - Registro de Calificaciones (CSS Isolation)
   Migrado desde wwwroot/css/pages/notas.css
   ============================================ */

/* Tabs */
.tabs-container[b-no6wz915lc] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0;
}

.tab-btn[b-no6wz915lc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.tab-btn:hover[b-no6wz915lc] {
    color: var(--color-primary);
    background-color: #f0f7ff;
}

.tab-btn.active[b-no6wz915lc] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
    background: transparent;
}

/* Section Card */
.section-card[b-no6wz915lc] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: block;
}

.section-header[b-no6wz915lc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    border-radius: 8px;
}

.section-header h2[b-no6wz915lc] {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

/* Filters */
.grade-filters[b-no6wz915lc],
.search-filters[b-no6wz915lc] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-no6wz915lc] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 180px;
    flex: 1;
}

.filter-group label[b-no6wz915lc] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.filter-group select[b-no6wz915lc],
.filter-group input[type="text"][b-no6wz915lc] {
    padding: 0.55rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1f2937;
    background: white;
    transition: border-color 0.2s;
}

.filter-group select:focus[b-no6wz915lc],
.filter-group input[type="text"]:focus[b-no6wz915lc] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.filter-action[b-no6wz915lc] {
    min-width: auto;
    flex: 0;
}

/* Table */
.table-responsive[b-no6wz915lc] {
    overflow-x: auto;
}

.data-table[b-no6wz915lc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead th[b-no6wz915lc] {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.data-table tbody td[b-no6wz915lc] {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.data-table tbody tr:hover[b-no6wz915lc] {
    background-color: #f8fafc;
}

/* Grade Entry Table */
.grade-entry-table .th-number[b-no6wz915lc] { width: 50px; text-align: center; }
.grade-entry-table .th-student[b-no6wz915lc] { min-width: 200px; }
.grade-entry-table .th-grade[b-no6wz915lc] { width: 100px; text-align: center; }
.grade-entry-table .th-qualitative[b-no6wz915lc] { width: 100px; text-align: center; }
.grade-entry-table .th-observation[b-no6wz915lc] { min-width: 200px; }

.td-number[b-no6wz915lc] { text-align: center; color: #94a3b8; font-size: 0.8rem; }
.td-student[b-no6wz915lc] { font-weight: 500; }
.td-grade[b-no6wz915lc] { text-align: center; }

.grade-input[b-no6wz915lc] {
    width: 70px;
    padding: 0.4rem 0.5rem;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
}

.grade-input:focus[b-no6wz915lc] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.15);
}

.grade-input.grade-passing[b-no6wz915lc] {
    border-color: var(--color-success);
    background-color: #f0fdf4;
    color: #166534;
}

.grade-input.grade-failing[b-no6wz915lc] {
    border-color: var(--color-error);
    background-color: #fef2f2;
    color: #991b1b;
}

.obs-input[b-no6wz915lc] {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #374151;
}

.obs-input:focus[b-no6wz915lc] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--bg-primary-subtle);
}

.row-failing[b-no6wz915lc] {
    background-color: #fff5f5 !important;
}

.row-failing:hover[b-no6wz915lc] {
    background-color: #fee2e2 !important;
}

/* Grade Display (for report) */
.grade-display[b-no6wz915lc] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 42px;
    text-align: center;
}

.grade-display.grade-passing[b-no6wz915lc] {
    background-color: #dcfce7;
    color: #166534;
}

.grade-display.grade-failing[b-no6wz915lc] {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Badges */
.badge[b-no6wz915lc] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.badge-success[b-no6wz915lc] { background: #dcfce7; color: #166534; }
.badge-secondary[b-no6wz915lc] { background: #f1f5f9; color: #64748b; }
.badge-info[b-no6wz915lc] { background: #dbeafe; color: #1e40af; }
.badge-ad[b-no6wz915lc] { background: #dbeafe; color: #1e40af; }
.badge-a[b-no6wz915lc] { background: #dcfce7; color: #166534; }
.badge-b[b-no6wz915lc] { background: #fef3c7; color: #92400e; }
.badge-c[b-no6wz915lc] { background: #fee2e2; color: #991b1b; }

/* Grade Table Info */
.grade-table-info[b-no6wz915lc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #64748b;
    font-size: 0.8rem;
}

.separator-dot[b-no6wz915lc]::before {
    content: "\2022";
    color: #cbd5e1;
}

/* Grade Actions */
.grade-actions[b-no6wz915lc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.grade-summary[b-no6wz915lc] {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.85rem;
    color: #475569;
}

.text-success[b-no6wz915lc] { color: var(--color-success-dark) !important; }
.text-danger[b-no6wz915lc] { color: var(--color-error-dark) !important; }
.text-muted[b-no6wz915lc] { color: #94a3b8; font-size: 0.85rem; }

/* Student Info Card */
.student-info-card[b-no6wz915lc] {
    background: var(--bg-sky);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #dbeafe;
}

.student-info-row[b-no6wz915lc] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.info-item[b-no6wz915lc] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.info-label[b-no6wz915lc] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.info-value[b-no6wz915lc] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1e293b;
}

.info-value.average[b-no6wz915lc] {
    font-size: 1.3rem;
    font-weight: 700;
}

/* Period Section */
.period-section[b-no6wz915lc] {
    margin-bottom: 1.5rem;
}

.period-title[b-no6wz915lc] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dbeafe;
}

/* Report Table */
.report-table .td-observation-text[b-no6wz915lc] {
    color: #64748b;
    font-size: 0.82rem;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-table tfoot .average-row[b-no6wz915lc] {
    background: #f8fafc;
}

.report-table tfoot .average-row td[b-no6wz915lc] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-top: 2px solid #e2e8f0;
}

/* Actions Cell */
.actions-cell[b-no6wz915lc] {
    display: flex;
    gap: 0.35rem;
}

.btn-icon-action[b-no6wz915lc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit[b-no6wz915lc] {
    background: #eff6ff;
    color: #3b82f6;
}

.btn-edit:hover[b-no6wz915lc] {
    background: #dbeafe;
    color: #2563eb;
}

.btn-delete[b-no6wz915lc] {
    background: #fef2f2;
    color: var(--color-error);
}

.btn-delete:hover[b-no6wz915lc] {
    background: #fee2e2;
    color: var(--color-error-dark);
}

/* Buttons */
.btn[b-no6wz915lc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-primary[b-no6wz915lc] {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-no6wz915lc] {
    background: var(--color-primary-dark);
}

.btn-secondary[b-no6wz915lc] {
    background: #f1f5f9;
    color: #475569;
}

.btn-secondary:hover[b-no6wz915lc] {
    background: #e2e8f0;
}

.btn-danger[b-no6wz915lc] {
    background: var(--color-error);
    color: white;
}

.btn-danger:hover:not(:disabled)[b-no6wz915lc] {
    background: var(--color-error-dark);
}

.btn:disabled[b-no6wz915lc] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal */
.modal-overlay[b-no6wz915lc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal-content[b-no6wz915lc] {
    background: white;
    border-radius: 12px;
    width: 95%;
    max-width: 550px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-small[b-no6wz915lc] {
    max-width: 420px;
}

.modal-header[b-no6wz915lc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3[b-no6wz915lc] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.modal-header-danger[b-no6wz915lc] {
    background: #fef2f2;
}

.modal-header-danger h3[b-no6wz915lc] {
    color: #991b1b;
}

.btn-close[b-no6wz915lc] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}

.btn-close:hover[b-no6wz915lc] {
    color: #1f2937;
}

.modal-body[b-no6wz915lc] {
    padding: 1.5rem;
}

.modal-footer[b-no6wz915lc] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Form */
.form-group[b-no6wz915lc] {
    margin-bottom: 1rem;
}

.form-group label[b-no6wz915lc] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
}

.form-group input[b-no6wz915lc],
.form-group select[b-no6wz915lc] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1f2937;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-group input:focus[b-no6wz915lc],
.form-group select:focus[b-no6wz915lc] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.form-row[b-no6wz915lc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-label[b-no6wz915lc] {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-no6wz915lc] {
    width: auto;
    accent-color: var(--color-primary);
}

/* Loading */
.loading-container[b-no6wz915lc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: #64748b;
}

.spinner[b-no6wz915lc] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-no6wz915lc 0.8s linear infinite;
}

.spinner-small[b-no6wz915lc] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-no6wz915lc 0.8s linear infinite;
}

@keyframes spin-b-no6wz915lc {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-no6wz915lc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    gap: 0.75rem;
    color: #94a3b8;
    text-align: center;
}

.empty-state p[b-no6wz915lc] {
    margin: 0;
    font-size: 0.9rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .tabs-container[b-no6wz915lc] {
        overflow-x: auto;
    }

    .tab-btn[b-no6wz915lc] {
        padding: 0.6rem 0.9rem;
        font-size: 0.82rem;
    }

    .grade-filters[b-no6wz915lc],
    .search-filters[b-no6wz915lc] {
        flex-direction: column;
    }

    .filter-group[b-no6wz915lc] {
        min-width: 100%;
    }

    .grade-actions[b-no6wz915lc] {
        flex-direction: column;
        gap: 1rem;
    }

    .grade-summary[b-no6wz915lc] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .student-info-row[b-no6wz915lc] {
        gap: 1rem;
    }

    .info-item[b-no6wz915lc] {
        min-width: 45%;
    }

    .section-header[b-no6wz915lc] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .form-row[b-no6wz915lc] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-no6wz915lc] {
        width: 98%;
        margin: 0.5rem;
    }
}

/* ============================================
   RUBROS (Columnas dinamicas de evaluacion)
   ============================================ */
.th-rubro[b-no6wz915lc] {
    min-width: 90px;
    max-width: 110px;
    text-align: center;
    position: relative;
}

.th-rubro-add[b-no6wz915lc] {
    width: 44px;
    text-align: center;
}

.th-promedio[b-no6wz915lc] {
    width: 100px;
    text-align: center;
    background: #eff6ff !important;
    font-weight: 700 !important;
}

.rubro-header[b-no6wz915lc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}

.rubro-name[b-no6wz915lc] {
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
    display: inline-block;
}

.btn-rubro-delete[b-no6wz915lc] {
    display: none;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.2s;
}

.th-rubro:hover .btn-rubro-delete[b-no6wz915lc] {
    display: inline-block;
}

.btn-rubro-delete:hover[b-no6wz915lc] {
    color: #dc2626;
}

.btn-add-rubro[b-no6wz915lc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1.5px dashed #cbd5e1;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-rubro:hover[b-no6wz915lc] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #eff6ff;
}

.rubro-add-input[b-no6wz915lc] {
    display: flex;
    gap: 0.15rem;
    align-items: center;
}

.rubro-name-input[b-no6wz915lc] {
    width: 100px;
    padding: 0.25rem 0.4rem;
    border: 1.5px solid var(--color-primary);
    border-radius: 5px;
    font-size: 0.75rem;
    outline: none;
}

.btn-rubro-confirm[b-no6wz915lc] {
    background: none;
    border: none;
    color: #22c55e;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    padding: 0 3px;
}

.btn-rubro-cancel[b-no6wz915lc] {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    padding: 0 3px;
}

.td-rubro[b-no6wz915lc] {
    text-align: center;
    padding: 0.4rem 0.3rem !important;
}

.td-rubro-add[b-no6wz915lc] {
    width: 44px;
}

.rubro-input[b-no6wz915lc] {
    width: 58px !important;
    font-size: 0.82rem !important;
    padding: 0.3rem 0.3rem !important;
}

.td-promedio[b-no6wz915lc] {
    text-align: center;
    background: #f0f7ff;
    font-weight: 700;
}

.rubro-initial-add[b-no6wz915lc] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #f0f7ff;
    border-radius: 8px;
    border: 1px dashed #93c5fd;
}

.rubro-initial-add .rubro-name-input[b-no6wz915lc] {
    width: 200px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.btn-sm[b-no6wz915lc] {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.8rem !important;
}

.btn-link-add-rubro[b-no6wz915lc] {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: underline;
    padding: 0;
}

.btn-link-add-rubro:hover[b-no6wz915lc] {
    color: #00284D;
}

.rubros-mode[b-no6wz915lc] {
    min-width: max-content;
}

@media (max-width: 768px) {
    .rubro-initial-add[b-no6wz915lc] {
        flex-direction: column;
        align-items: stretch;
    }

    .rubro-initial-add .rubro-name-input[b-no6wz915lc] {
        width: 100%;
    }

    .rubro-input[b-no6wz915lc] {
        width: 48px !important;
    }
}
/* /Pages/Private/Noticias.razor.rz.scp.css */
    .noticias-container[b-wboud672f8] {
        padding: 24px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .page-header[b-wboud672f8] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .header-content h1[b-wboud672f8] {
        font-size: 1.75rem;
        color: #1e293b;
        margin: 0;
    }

    .header-content p[b-wboud672f8] {
        color: #64748b;
        margin: 4px 0 0 0;
    }

    .btn-primary[b-wboud672f8] {
        background: var(--color-primary);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-primary:hover[b-wboud672f8] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    .btn-secondary[b-wboud672f8] {
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
        padding: 10px 20px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-secondary:hover[b-wboud672f8] {
        background: #e2e8f0;
    }

    .btn-outline[b-wboud672f8] {
        background: white;
        color: #059669;
        border: 2px solid #059669;
        padding: 10px 20px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-outline:hover[b-wboud672f8] {
        background: #059669;
        color: white;
    }

    /* Stats Grid */
    .stats-grid[b-wboud672f8] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }

    .stat-card[b-wboud672f8] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-left: 4px solid;
    }

    .stat-card.published[b-wboud672f8] { border-color: var(--color-success); }
    .stat-card.draft[b-wboud672f8] { border-color: var(--color-warning); }
    .stat-card.featured[b-wboud672f8] { border-color: #8b5cf6; }
    .stat-card.views[b-wboud672f8] { border-color: #3b82f6; }

    .stat-icon[b-wboud672f8] {
        font-size: 2rem;
    }

    .stat-info[b-wboud672f8] {
        display: flex;
        flex-direction: column;
    }

    .stat-number[b-wboud672f8] {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
    }

    .stat-label[b-wboud672f8] {
        color: #64748b;
        font-size: 0.875rem;
    }

    /* Filters */
    .filters-bar[b-wboud672f8] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .filters-left[b-wboud672f8] {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .search-box[b-wboud672f8] {
        display: flex;
        align-items: center;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0 12px;
        width: 280px;
    }

    .search-box input[b-wboud672f8] {
        border: none;
        outline: none;
        padding: 10px 8px;
        width: 100%;
        font-size: 0.9rem;
    }

    .search-box svg[b-wboud672f8] {
        color: #94a3b8;
    }

    .filter-select[b-wboud672f8] {
        padding: 10px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: white;
        font-size: 0.9rem;
        color: #475569;
        cursor: pointer;
    }

    .view-toggle[b-wboud672f8] {
        display: flex;
        background: white;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
    }

    .view-btn[b-wboud672f8] {
        padding: 10px 14px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: #94a3b8;
        transition: all 0.2s;
    }

    .view-btn.active[b-wboud672f8] {
        background: #3b82f6;
        color: white;
    }

    /* Featured Section */
    .featured-section[b-wboud672f8] {
        margin-bottom: 32px;
    }

    .section-title[b-wboud672f8] {
        font-size: 1.1rem;
        color: #1e293b;
        margin-bottom: 16px;
    }

    .featured-grid[b-wboud672f8] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .featured-card[b-wboud672f8] {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        cursor: pointer;
        transition: all 0.3s;
    }

    .featured-card:hover[b-wboud672f8] {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }

    .featured-image[b-wboud672f8] {
        height: 200px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .featured-content[b-wboud672f8] {
        padding: 20px;
    }

    .featured-content h3[b-wboud672f8] {
        font-size: 1.25rem;
        color: #1e293b;
        margin: 0 0 10px 0;
    }

    .featured-content p[b-wboud672f8] {
        color: #64748b;
        margin: 0 0 16px 0;
        line-height: 1.5;
    }

    .featured-meta[b-wboud672f8] {
        display: flex;
        gap: 16px;
        color: #94a3b8;
        font-size: 0.85rem;
    }

    /* Category Badges */
    .category-badge[b-wboud672f8] {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .category-badge.large[b-wboud672f8] {
        bottom: 20px;
        top: auto;
        font-size: 0.85rem;
        padding: 8px 16px;
    }

    .category-badge.small[b-wboud672f8] {
        position: static;
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    .category-badge.academico[b-wboud672f8] { background: #dbeafe; color: #1d4ed8; }
    .category-badge.deportes[b-wboud672f8] { background: #dcfce7; color: var(--color-success-dark); }
    .category-badge.cultural[b-wboud672f8] { background: #fae8ff; color: #a21caf; }
    .category-badge.logros[b-wboud672f8] { background: #fef3c7; color: var(--color-warning-dark); }
    .category-badge.institucional[b-wboud672f8] { background: #e0e7ff; color: #4338ca; }
    .category-badge.comunicados[b-wboud672f8] { background: #fee2e2; color: var(--color-error-dark); }

    /* News Grid */
    .news-grid[b-wboud672f8] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .news-card[b-wboud672f8] {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        transition: all 0.3s;
        position: relative;
    }

    .news-card:hover[b-wboud672f8] {
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    }

    .news-card.draft-card[b-wboud672f8] {
        opacity: 0.8;
    }

    .draft-ribbon[b-wboud672f8], .archived-ribbon[b-wboud672f8] {
        position: absolute;
        top: 12px;
        right: -30px;
        background: var(--color-warning);
        color: white;
        padding: 4px 40px;
        font-size: 0.7rem;
        font-weight: 600;
        transform: rotate(45deg);
        z-index: 10;
    }

    .archived-ribbon[b-wboud672f8] {
        background: #94a3b8;
    }

    .card-image[b-wboud672f8] {
        height: 160px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .news-card .card-actions[b-wboud672f8] {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        gap: 4px;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .news-card:hover .card-actions[b-wboud672f8] {
        opacity: 1;
    }

    .action-btn[b-wboud672f8] {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        border: none;
        background: white;
        color: #475569;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .action-btn:hover[b-wboud672f8] {
        background: #f1f5f9;
    }

    .action-btn.delete:hover[b-wboud672f8] {
        background: #fee2e2;
        color: var(--color-error-dark);
    }

    .card-content[b-wboud672f8] {
        padding: 16px;
        cursor: pointer;
    }

    .card-content h3[b-wboud672f8] {
        font-size: 1rem;
        color: #1e293b;
        margin: 0 0 8px 0;
        line-height: 1.4;
    }

    .card-content p[b-wboud672f8] {
        color: #64748b;
        font-size: 0.875rem;
        margin: 0 0 12px 0;
        line-height: 1.5;
    }

    .card-meta[b-wboud672f8] {
        display: flex;
        justify-content: space-between;
        color: #94a3b8;
        font-size: 0.8rem;
    }

    /* News List */
    .news-list[b-wboud672f8] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .list-item[b-wboud672f8] {
        background: white;
        border-radius: 12px;
        padding: 16px;
        display: flex;
        gap: 16px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .list-item:hover[b-wboud672f8] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .list-item.draft-item[b-wboud672f8] {
        opacity: 0.8;
        border-left: 4px solid var(--color-warning);
    }

    .list-image[b-wboud672f8] {
        width: 120px;
        height: 90px;
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        flex-shrink: 0;
        position: relative;
    }

    .star-badge[b-wboud672f8] {
        position: absolute;
        top: 4px;
        right: 4px;
        background: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
    }

    .list-content[b-wboud672f8] {
        flex: 1;
        min-width: 0;
    }

    .list-header[b-wboud672f8] {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }

    .status-badge[b-wboud672f8] {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .status-badge.publicado[b-wboud672f8] { background: #dcfce7; color: var(--color-success-dark); }
    .status-badge.borrador[b-wboud672f8] { background: #fef3c7; color: var(--color-warning-dark); }
    .status-badge.archivado[b-wboud672f8] { background: #f1f5f9; color: #64748b; }

    .list-content h3[b-wboud672f8] {
        font-size: 1rem;
        color: #1e293b;
        margin: 0 0 6px 0;
    }

    .list-content p[b-wboud672f8] {
        color: #64748b;
        font-size: 0.85rem;
        margin: 0 0 8px 0;
        line-height: 1.4;
    }

    .list-meta[b-wboud672f8] {
        display: flex;
        gap: 16px;
        color: #94a3b8;
        font-size: 0.8rem;
    }

    .list-actions[b-wboud672f8] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Empty State */
    .empty-state[b-wboud672f8] {
        text-align: center;
        padding: 60px 20px;
        background: white;
        border-radius: 12px;
    }

    .empty-icon[b-wboud672f8] {
        font-size: 4rem;
        margin-bottom: 16px;
    }

    .empty-state h3[b-wboud672f8] {
        color: #1e293b;
        margin: 0 0 8px 0;
    }

    .empty-state p[b-wboud672f8] {
        color: #64748b;
        margin: 0 0 20px 0;
    }

    /* Modal Styles */
    .modal-overlay[b-wboud672f8] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
    }

    .modal-view[b-wboud672f8] {
        background: white;
        border-radius: 16px;
        width: 100%;
        max-width: 800px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header-image[b-wboud672f8] {
        height: 250px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .modal-close[b-wboud672f8] {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: white;
        font-size: 1.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .modal-body-view[b-wboud672f8] {
        padding: 24px 32px;
    }

    .modal-body-view h1[b-wboud672f8] {
        font-size: 1.75rem;
        color: #1e293b;
        margin: 0 0 16px 0;
        line-height: 1.3;
    }

    .article-meta[b-wboud672f8] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #e2e8f0;
        margin-bottom: 20px;
    }

    .author-info[b-wboud672f8] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .author-avatar[b-wboud672f8] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--color-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1.25rem;
    }

    .author-name[b-wboud672f8] {
        display: block;
        font-weight: 600;
        color: #1e293b;
    }

    .publish-date[b-wboud672f8] {
        display: block;
        color: #64748b;
        font-size: 0.85rem;
    }

    .article-stats[b-wboud672f8] {
        display: flex;
        gap: 12px;
        color: #64748b;
        font-size: 0.9rem;
    }

    .featured-tag[b-wboud672f8] {
        background: #fef3c7;
        color: var(--color-warning-dark);
        padding: 4px 12px;
        border-radius: 20px;
        font-weight: 500;
    }

    .article-content .lead[b-wboud672f8] {
        font-size: 1.1rem;
        color: #475569;
        line-height: 1.6;
        margin-bottom: 20px;
        font-weight: 500;
    }

    .content-text[b-wboud672f8] {
        color: #1e293b;
        line-height: 1.8;
        white-space: pre-wrap;
    }

    .article-tags[b-wboud672f8] {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #e2e8f0;
    }

    .tag[b-wboud672f8] {
        background: #f1f5f9;
        color: #3b82f6;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
    }

    .modal-footer[b-wboud672f8] {
        padding: 16px 32px;
        background: #f8fafc;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        border-top: 1px solid #e2e8f0;
    }

    /* Modal Edit */
    .modal-edit[b-wboud672f8] {
        background: white;
        border-radius: 16px;
        width: 100%;
        max-width: 700px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header[b-wboud672f8] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        border-bottom: 1px solid #e2e8f0;
    }

    .modal-header h2[b-wboud672f8] {
        margin: 0;
        font-size: 1.25rem;
        color: #1e293b;
    }

    .modal-body[b-wboud672f8] {
        padding: 24px;
    }

    .form-row[b-wboud672f8] {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
    }

    .form-group[b-wboud672f8] {
        flex: 1;
    }

    .form-group.full[b-wboud672f8] {
        flex: 100%;
    }

    .form-group label[b-wboud672f8] {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
        color: #374151;
        font-size: 0.9rem;
    }

    .form-group input[b-wboud672f8],
    .form-group select[b-wboud672f8],
    .form-group textarea[b-wboud672f8] {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.95rem;
        transition: border-color 0.2s;
    }

    .form-group input:focus[b-wboud672f8],
    .form-group select:focus[b-wboud672f8],
    .form-group textarea:focus[b-wboud672f8] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .form-group textarea[b-wboud672f8] {
        resize: vertical;
    }

    .checkbox-group[b-wboud672f8] {
        display: flex;
        align-items: center;
    }

    .checkbox-label[b-wboud672f8] {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-weight: normal !important;
    }

    .checkbox-label input[type="checkbox"][b-wboud672f8] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    @media (max-width: 1024px) {
        .stats-grid[b-wboud672f8] {
            grid-template-columns: repeat(2, 1fr);
        }

        .featured-grid[b-wboud672f8] {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .page-header[b-wboud672f8] {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .stats-grid[b-wboud672f8] {
            grid-template-columns: 1fr;
        }

        .filters-bar[b-wboud672f8] {
            flex-direction: column;
            align-items: stretch;
        }

        .filters-left[b-wboud672f8] {
            flex-direction: column;
        }

        .search-box[b-wboud672f8] {
            width: 100%;
        }

        .news-grid[b-wboud672f8] {
            grid-template-columns: 1fr;
        }

        .list-item[b-wboud672f8] {
            flex-direction: column;
        }

        .list-image[b-wboud672f8] {
            width: 100%;
            height: 150px;
        }

        .list-actions[b-wboud672f8] {
            flex-direction: row;
            justify-content: flex-end;
        }
    }
/* /Pages/Private/Notificaciones.razor.rz.scp.css */
/* ============================================
   NOTIFICACIONES - I.E.P. Javier Perez de Cuellar
   Bandeja de notificaciones del usuario
   ============================================ */

/* ============================================
   STATS GRID
   ============================================ */
.notif-stats[b-04k3rhjvgo] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.notif-stat-card[b-04k3rhjvgo] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-left: 4px solid;
}

.notif-stat-card.stat-total[b-04k3rhjvgo] { border-left-color: var(--color-primary); }
.notif-stat-card.stat-unread[b-04k3rhjvgo] { border-left-color: var(--color-highlight); }
.notif-stat-card.stat-read[b-04k3rhjvgo] { border-left-color: var(--color-success); }

.notif-stat-icon[b-04k3rhjvgo] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-stat-card.stat-total .notif-stat-icon[b-04k3rhjvgo] { background: var(--bg-primary-subtle); color: var(--color-primary); }
.notif-stat-card.stat-unread .notif-stat-icon[b-04k3rhjvgo] { background: var(--bg-highlight-subtle); color: var(--color-highlight); }
.notif-stat-card.stat-read .notif-stat-icon[b-04k3rhjvgo] { background: var(--bg-success-subtle); color: var(--color-success); }

.notif-stat-icon svg[b-04k3rhjvgo] {
    width: 22px;
    height: 22px;
}

.notif-stat-info[b-04k3rhjvgo] {
    display: flex;
    flex-direction: column;
}

.notif-stat-value[b-04k3rhjvgo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.notif-stat-label[b-04k3rhjvgo] {
    font-size: 0.85rem;
    color: #6b7280;
}

/* ============================================
   FILTERS & ACTIONS BAR
   ============================================ */
.notif-toolbar[b-04k3rhjvgo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.notif-filters[b-04k3rhjvgo] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
}

.notif-search[b-04k3rhjvgo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    min-width: 250px;
}

.notif-search svg[b-04k3rhjvgo] {
    width: 18px;
    height: 18px;
    color: #9ca3af;
    flex-shrink: 0;
}

.notif-search input[b-04k3rhjvgo] {
    border: none;
    background: transparent;
    font-size: 0.875rem;
    width: 100%;
    color: #1f2937;
}

.notif-search input:focus[b-04k3rhjvgo] {
    outline: none;
}

.notif-filter-select[b-04k3rhjvgo] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #374151;
    background: white;
    min-width: 140px;
}

.notif-filter-select:focus[b-04k3rhjvgo] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.notif-actions[b-04k3rhjvgo] {
    display: flex;
    gap: 0.5rem;
}

.notif-btn[b-04k3rhjvgo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.notif-btn:disabled[b-04k3rhjvgo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.notif-btn-primary[b-04k3rhjvgo] {
    background: var(--color-primary);
    color: white;
}

.notif-btn-primary:hover:not(:disabled)[b-04k3rhjvgo] {
    background: var(--color-primary-dark);
}

.notif-btn-outline[b-04k3rhjvgo] {
    background: white;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.notif-btn-outline:hover:not(:disabled)[b-04k3rhjvgo] {
    background: #f3f4f6;
    color: #374151;
}

.notif-btn svg[b-04k3rhjvgo] {
    width: 16px;
    height: 16px;
}

/* ============================================
   NOTIFICATIONS LIST
   ============================================ */
.notif-list[b-04k3rhjvgo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notif-card[b-04k3rhjvgo] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

.notif-card:hover[b-04k3rhjvgo] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.notif-card.unread[b-04k3rhjvgo] {
    background: #f0f7ff;
    border-left: 3px solid var(--color-primary);
}

.notif-card.read[b-04k3rhjvgo] {
    border-left: 3px solid transparent;
}

.notif-type-icon[b-04k3rhjvgo] {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 0.5rem;
}

.notif-type-icon svg[b-04k3rhjvgo] {
    width: 20px;
    height: 20px;
}

.notif-type-icon.type-info[b-04k3rhjvgo] { color: var(--color-primary); }
.notif-type-icon.type-warning[b-04k3rhjvgo] { color: var(--color-highlight); }
.notif-type-icon.type-success[b-04k3rhjvgo] { color: var(--color-success); }
.notif-type-icon.type-error[b-04k3rhjvgo] { color: var(--color-error); }
.notif-type-icon.type-system[b-04k3rhjvgo] { color: #6b7280; }

.notif-content[b-04k3rhjvgo] {
    flex: 1;
    padding: 0.85rem 1rem;
    min-width: 0;
}

.notif-header[b-04k3rhjvgo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
    gap: 0.75rem;
}

.notif-title[b-04k3rhjvgo] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-card.unread .notif-title[b-04k3rhjvgo] {
    color: var(--color-primary-dark);
}

.notif-time[b-04k3rhjvgo] {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.notif-message[b-04k3rhjvgo] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-card.unread .notif-message[b-04k3rhjvgo] {
    color: #4b5563;
}

.notif-meta[b-04k3rhjvgo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.notif-type-badge[b-04k3rhjvgo] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.notif-type-badge.type-info[b-04k3rhjvgo] { background: var(--bg-primary-subtle); color: var(--color-primary); }
.notif-type-badge.type-warning[b-04k3rhjvgo] { background: var(--bg-highlight-subtle); color: var(--color-warning-dark); }
.notif-type-badge.type-success[b-04k3rhjvgo] { background: var(--bg-success-subtle); color: var(--color-success-dark); }
.notif-type-badge.type-error[b-04k3rhjvgo] { background: var(--bg-error-subtle); color: var(--color-error); }
.notif-type-badge.type-system[b-04k3rhjvgo] { background: var(--bg-gray-subtle); color: #6b7280; }

.notif-card-actions[b-04k3rhjvgo] {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    gap: 0.25rem;
}

.notif-action-btn[b-04k3rhjvgo] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: all 0.2s;
}

.notif-action-btn:hover[b-04k3rhjvgo] {
    background: #f3f4f6;
    color: var(--color-primary);
}

.notif-action-btn svg[b-04k3rhjvgo] {
    width: 16px;
    height: 16px;
}

/* ============================================
   UNREAD DOT
   ============================================ */
.notif-unread-dot[b-04k3rhjvgo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.notif-empty[b-04k3rhjvgo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.notif-empty-icon[b-04k3rhjvgo] {
    width: 72px;
    height: 72px;
    background: var(--bg-primary-faint);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.notif-empty-icon svg[b-04k3rhjvgo] {
    width: 36px;
    height: 36px;
    color: var(--color-primary);
}

.notif-empty h3[b-04k3rhjvgo] {
    font-size: 1.1rem;
    color: #1f2937;
    margin: 0 0 0.5rem;
}

.notif-empty p[b-04k3rhjvgo] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
    max-width: 350px;
}

/* ============================================
   LOADING
   ============================================ */
.notif-loading[b-04k3rhjvgo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.notif-loading .loading-spinner[b-04k3rhjvgo] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: notif-spin 0.8s linear infinite;
}

.notif-loading p[b-04k3rhjvgo] {
    color: #6b7280;
    font-size: 0.9rem;
}

@@keyframes notif-spin {
    to[b-04k3rhjvgo] { transform: rotate(360deg); }
}

/* ============================================
   MODAL DETAIL
   ============================================ */
.notif-modal-overlay[b-04k3rhjvgo] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.notif-modal[b-04k3rhjvgo] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.notif-modal-header[b-04k3rhjvgo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    background: var(--color-primary);
}

.notif-modal-header h2[b-04k3rhjvgo] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

.notif-modal-close[b-04k3rhjvgo] {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 1.25rem;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-modal-body[b-04k3rhjvgo] {
    padding: 1.5rem;
}

.notif-detail-type[b-04k3rhjvgo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.notif-detail-message[b-04k3rhjvgo] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #374151;
    margin: 0 0 1.5rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

.notif-detail-meta[b-04k3rhjvgo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.notif-detail-row[b-04k3rhjvgo] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.notif-detail-label[b-04k3rhjvgo] {
    color: #9ca3af;
    min-width: 80px;
}

.notif-detail-value[b-04k3rhjvgo] {
    color: #374151;
    font-weight: 500;
}

.notif-modal-footer[b-04k3rhjvgo] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

/* ============================================
   PAGE HEADER (con boton crear)
   ============================================ */
.page-header[b-04k3rhjvgo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ============================================
   MODAL CREAR NOTIFICACION
   ============================================ */
.notif-modal-create[b-04k3rhjvgo] {
    max-width: 560px;
}

.notif-form-group[b-04k3rhjvgo] {
    margin-bottom: 1.25rem;
    position: relative;
}

.notif-form-label[b-04k3rhjvgo] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.4rem;
}

.notif-form-input[b-04k3rhjvgo],
.notif-form-select[b-04k3rhjvgo],
.notif-form-textarea[b-04k3rhjvgo] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1f2937;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

.notif-form-input:focus[b-04k3rhjvgo],
.notif-form-select:focus[b-04k3rhjvgo],
.notif-form-textarea:focus[b-04k3rhjvgo] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle, rgba(0, 85, 163, 0.1));
}

.notif-form-textarea[b-04k3rhjvgo] {
    resize: vertical;
    min-height: 100px;
}

.notif-char-count[b-04k3rhjvgo] {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

.notif-form-error[b-04k3rhjvgo] {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.notif-btn-spinner[b-04k3rhjvgo] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: notif-spin 0.6s linear infinite;
}

/* ============================================
   RESPONSIVE - 1024px
   ============================================ */
@media (max-width: 1024px) {
    .notif-stats[b-04k3rhjvgo] {
        grid-template-columns: repeat(3, 1fr);
    }

    .notif-toolbar[b-04k3rhjvgo] {
        flex-direction: column;
        align-items: stretch;
    }

    .notif-filters[b-04k3rhjvgo] {
        width: 100%;
    }

    .notif-actions[b-04k3rhjvgo] {
        justify-content: flex-end;
    }
}

/* ============================================
   RESPONSIVE - 768px
   ============================================ */
@media (max-width: 768px) {
    .notif-stats[b-04k3rhjvgo] {
        grid-template-columns: 1fr;
    }

    .notif-filters[b-04k3rhjvgo] {
        flex-direction: column;
    }

    .notif-search[b-04k3rhjvgo] {
        min-width: auto;
    }

    .notif-card[b-04k3rhjvgo] {
        flex-direction: column;
    }

    .notif-type-icon[b-04k3rhjvgo] {
        width: auto;
        padding: 0.75rem 1rem 0;
        justify-content: flex-start;
    }

    .notif-card-actions[b-04k3rhjvgo] {
        padding: 0 1rem 0.75rem;
        justify-content: flex-end;
    }

    .notif-header[b-04k3rhjvgo] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .notif-message[b-04k3rhjvgo] {
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .notif-modal[b-04k3rhjvgo] {
        max-width: 95%;
    }
}
/* /Pages/Private/Perfil.razor.rz.scp.css */
/* ============================================
   PERFIL PAGE — CSS Isolation
   Layout dos columnas, datos personales, cuenta, password.
   Base: components.css (spinner, @keyframes spin)
   ============================================ */

.perfil-page[b-s6lxgq3mmo] {
    padding: 1.5rem 1rem;
}

/* ============================================
   GRID DOS COLUMNAS
   ============================================ */
.perfil-grid[b-s6lxgq3mmo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.perfil-col[b-s6lxgq3mmo] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ============================================
   LOADING
   ============================================ */
.perfil-loading[b-s6lxgq3mmo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    color: #64748b;
    gap: 1rem;
}

.perfil-loading .spinner[b-s6lxgq3mmo] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   SECCIONES
   ============================================ */
.perfil-section[b-s6lxgq3mmo] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.section-header[b-s6lxgq3mmo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--color-primary-dark);
    color: white;
}

.section-header svg[b-s6lxgq3mmo] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.section-header h2[b-s6lxgq3mmo] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* ============================================
   CARD CONTENIDO
   ============================================ */
.perfil-card[b-s6lxgq3mmo] {
    padding: 1.5rem;
}

/* ============================================
   AVATAR
   ============================================ */
.perfil-avatar[b-s6lxgq3mmo] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 85, 163, 0.3);
}

.perfil-avatar span[b-s6lxgq3mmo] {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
}

/* ============================================
   GRID DE DATOS
   ============================================ */
.perfil-data-grid[b-s6lxgq3mmo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.perfil-data-grid.datos-personales[b-s6lxgq3mmo] {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.data-item[b-s6lxgq3mmo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.data-item label[b-s6lxgq3mmo] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-item span[b-s6lxgq3mmo] {
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 500;
    word-break: break-word;
}

.badge-role[b-s6lxgq3mmo] {
    display: inline-block;
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
    padding: 0.2rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    width: fit-content;
}

/* ============================================
   NOTA INFORMATIVA
   ============================================ */
.perfil-note[b-s6lxgq3mmo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-sky);
    border: 1px solid #bae6fd;
    border-radius: 8px;
    color: #0369a1;
    font-size: 0.8rem;
    margin-bottom: 1.25rem;
}

.perfil-error-text[b-s6lxgq3mmo] {
    color: var(--color-error);
    text-align: center;
}

.perfil-no-data[b-s6lxgq3mmo] {
    color: #64748b;
    text-align: center;
    grid-column: 1 / -1;
}

/* ============================================
   FORMULARIOS (cuenta + password)
   ============================================ */
.account-form[b-s6lxgq3mmo],
.password-form[b-s6lxgq3mmo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-form .form-group[b-s6lxgq3mmo],
.password-form .form-group[b-s6lxgq3mmo] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.account-form .form-group label[b-s6lxgq3mmo],
.password-form .form-group label[b-s6lxgq3mmo] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}

.account-form .input-wrapper[b-s6lxgq3mmo],
.password-form .input-wrapper[b-s6lxgq3mmo] {
    position: relative;
    display: flex;
    align-items: center;
}

.account-form .form-input[b-s6lxgq3mmo],
.password-form .form-input[b-s6lxgq3mmo] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input.form-input-icon[b-s6lxgq3mmo] {
    padding-left: 2.25rem;
}

.password-form .form-input[b-s6lxgq3mmo] {
    padding-right: 2.5rem;
}

.account-form .form-input:focus[b-s6lxgq3mmo],
.password-form .form-input:focus[b-s6lxgq3mmo] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.account-form .form-input:disabled[b-s6lxgq3mmo],
.password-form .form-input:disabled[b-s6lxgq3mmo] {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Icono dentro del input */
.input-icon[b-s6lxgq3mmo] {
    position: absolute;
    left: 0.65rem;
    width: 16px;
    height: 16px;
    color: #94a3b8;
    pointer-events: none;
    flex-shrink: 0;
}

.field-hint[b-s6lxgq3mmo] {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* ============================================
   PASSWORD TOGGLE
   ============================================ */
.password-form .btn-toggle-password[b-s6lxgq3mmo] {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
}

.password-form .btn-toggle-password svg[b-s6lxgq3mmo] {
    width: 18px;
    height: 18px;
}

.password-form .btn-toggle-password:hover[b-s6lxgq3mmo] {
    color: #475569;
}

/* ============================================
   PASSWORD REQUIREMENTS
   ============================================ */
.password-requirements[b-s6lxgq3mmo] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.25rem;
}

.password-requirements small[b-s6lxgq3mmo] {
    font-size: 0.75rem;
}

.req-met[b-s6lxgq3mmo] {
    color: var(--color-success) !important;
}

.req-unmet[b-s6lxgq3mmo] {
    color: #94a3b8 !important;
}

small.req-unmet[b-s6lxgq3mmo] {
    color: var(--color-error) !important;
}

/* ============================================
   BOTONES
   ============================================ */
.btn-save-account[b-s6lxgq3mmo],
.btn-change-password[b-s6lxgq3mmo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    margin-top: 0.5rem;
    width: fit-content;
}

.btn-save-account[b-s6lxgq3mmo] {
    background: var(--color-primary);
}

.btn-change-password[b-s6lxgq3mmo] {
    background: var(--color-primary-dark);
}

.btn-save-account:hover:not(:disabled)[b-s6lxgq3mmo],
.btn-change-password:hover:not(:disabled)[b-s6lxgq3mmo] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-save-account:disabled[b-s6lxgq3mmo],
.btn-change-password:disabled[b-s6lxgq3mmo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-save-account .spinner[b-s6lxgq3mmo],
.btn-change-password .spinner[b-s6lxgq3mmo] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   ALERTAS
   ============================================ */
.perfil-card .error-alert[b-s6lxgq3mmo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-error);
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: var(--color-error-dark);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.perfil-card .success-alert[b-s6lxgq3mmo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: var(--color-success-dark);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

/* ============================================
   NAV SEPARATOR
   ============================================ */
.nav-separator[b-s6lxgq3mmo] {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 1rem;
}

/* ============================================
   RESPONSIVE - 1024px (single column)
   ============================================ */
@media (max-width: 1024px) {
    .perfil-grid[b-s6lxgq3mmo] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   RESPONSIVE - 640px
   ============================================ */
@media (max-width: 640px) {
    .perfil-page[b-s6lxgq3mmo] {
        padding: 1rem 0.5rem;
    }

    .perfil-card[b-s6lxgq3mmo] {
        padding: 1rem;
    }

    .perfil-data-grid[b-s6lxgq3mmo],
    .perfil-data-grid.datos-personales[b-s6lxgq3mmo] {
        grid-template-columns: 1fr;
    }

    .section-header[b-s6lxgq3mmo] {
        padding: 0.75rem 1rem;
    }
}
/* /Pages/Private/PermisosAcceso.razor.rz.scp.css */
/* ============================================
   PERMISOS DE ACCESO - I.E.P. Javier Perez de Cuellar
   Gestion de permisos granulares por rol
   ============================================ */

/* ============================================
   TABS
   ============================================ */
.perm-tabs[b-t5omn52q61] {
    display: flex;
    gap: 4px;
    background: white;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.perm-tab[b-t5omn52q61] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.perm-tab:hover[b-t5omn52q61] {
    background: #f3f4f6;
    color: #374151;
}

.perm-tab.active[b-t5omn52q61] {
    background: var(--color-primary);
    color: white;
}

.perm-tab svg[b-t5omn52q61] {
    width: 16px;
    height: 16px;
}

/* ============================================
   SECTION
   ============================================ */
.perm-section[b-t5omn52q61] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.perm-section-header[b-t5omn52q61] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.perm-section-header h3[b-t5omn52q61] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

/* ============================================
   PERMISSION LIST TABLE
   ============================================ */
.perm-table-wrap[b-t5omn52q61] {
    overflow-x: auto;
}

.perm-table[b-t5omn52q61] {
    width: 100%;
    border-collapse: collapse;
}

.perm-table th[b-t5omn52q61],
.perm-table td[b-t5omn52q61] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.perm-table th[b-t5omn52q61] {
    background: #f9fafb;
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.perm-table tbody tr:hover[b-t5omn52q61] {
    background: #f9fafb;
}

.perm-empty[b-t5omn52q61] {
    text-align: center;
    padding: 2rem !important;
    color: #9ca3af;
    font-style: italic;
}

/* ============================================
   BADGES
   ============================================ */
.perm-badge[b-t5omn52q61] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.perm-badge-module[b-t5omn52q61] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

.perm-badge-action[b-t5omn52q61] {
    background: var(--bg-highlight-subtle);
    color: var(--color-warning-dark);
}

/* ============================================
   ROLE ASSIGNMENT MATRIX
   ============================================ */
.perm-matrix[b-t5omn52q61] {
    overflow-x: auto;
}

.perm-matrix table[b-t5omn52q61] {
    width: 100%;
    border-collapse: collapse;
}

.perm-matrix th[b-t5omn52q61],
.perm-matrix td[b-t5omn52q61] {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.85rem;
}

.perm-matrix th[b-t5omn52q61] {
    background: #f9fafb;
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    text-align: center;
}

.perm-matrix th:first-child[b-t5omn52q61] {
    text-align: left;
}

.perm-matrix td:not(:first-child)[b-t5omn52q61] {
    text-align: center;
}

.perm-matrix tbody tr:hover[b-t5omn52q61] {
    background: #f9fafb;
}

.perm-check[b-t5omn52q61] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.perm-permission-cell[b-t5omn52q61] {
    display: flex;
    flex-direction: column;
}

.perm-permission-cell .module[b-t5omn52q61] {
    font-weight: 600;
    color: #1f2937;
}

.perm-permission-cell .action[b-t5omn52q61] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ============================================
   ROLE HEADER (in matrix)
   ============================================ */
.perm-role-header[b-t5omn52q61] {
    writing-mode: horizontal-tb;
    font-size: 0.75rem;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   BUTTONS
   ============================================ */
.perm-btn[b-t5omn52q61] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.perm-btn:disabled[b-t5omn52q61] {
    opacity: 0.6;
    cursor: not-allowed;
}

.perm-btn-primary[b-t5omn52q61] {
    background: var(--color-primary);
    color: white;
}

.perm-btn-primary:hover:not(:disabled)[b-t5omn52q61] {
    background: var(--color-primary-dark);
}

.perm-btn-success[b-t5omn52q61] {
    background: var(--color-success);
    color: white;
}

.perm-btn-success:hover:not(:disabled)[b-t5omn52q61] {
    background: var(--color-success-dark);
}

.perm-btn-danger[b-t5omn52q61] {
    background: var(--color-error);
    color: white;
}

.perm-btn-danger:hover:not(:disabled)[b-t5omn52q61] {
    background: var(--color-error-dark);
}

.perm-btn-cancel[b-t5omn52q61] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.perm-btn-cancel:hover[b-t5omn52q61] {
    background: #f3f4f6;
}

.perm-btn svg[b-t5omn52q61] {
    width: 16px;
    height: 16px;
}

.perm-btn-icon[b-t5omn52q61] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: white;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.perm-btn-icon:hover[b-t5omn52q61] {
    background: #f3f4f6;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.perm-btn-icon.danger:hover[b-t5omn52q61] {
    color: var(--color-error) !important;
    border-color: var(--color-error) !important;
    background: #fef2f2 !important;
}

.perm-btn-icon svg[b-t5omn52q61] {
    width: 14px;
    height: 14px;
}

/* ============================================
   MODAL
   ============================================ */
.perm-modal-overlay[b-t5omn52q61] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.perm-modal[b-t5omn52q61] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.perm-modal-header[b-t5omn52q61] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    background: var(--color-primary);
}

.perm-modal-header h2[b-t5omn52q61] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

.perm-modal-close[b-t5omn52q61] {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 1.25rem;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.perm-modal-body[b-t5omn52q61] {
    padding: 1.5rem;
}

.perm-modal-footer[b-t5omn52q61] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

.perm-modal-header-danger[b-t5omn52q61] {
    background: var(--color-error);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.perm-form-group[b-t5omn52q61] {
    margin-bottom: 1rem;
}

.perm-form-group label[b-t5omn52q61] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.35rem;
}

.perm-form-group input[b-t5omn52q61],
.perm-form-group select[b-t5omn52q61] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
    box-sizing: border-box;
}

.perm-form-group input:focus[b-t5omn52q61],
.perm-form-group select:focus[b-t5omn52q61] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.perm-confirm-text[b-t5omn52q61] {
    font-size: 0.95rem;
    color: #374151;
    text-align: center;
    margin: 0;
}

/* ============================================
   LOADING
   ============================================ */
.perm-loading[b-t5omn52q61] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.perm-loading .loading-spinner[b-t5omn52q61] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: perm-spin 0.8s linear infinite;
}

.perm-loading p[b-t5omn52q61] {
    color: #6b7280;
    font-size: 0.9rem;
}

@@keyframes perm-spin {
    to[b-t5omn52q61] { transform: rotate(360deg); }
}

/* ============================================
   ACTIONS ROW
   ============================================ */
.perm-actions-row[b-t5omn52q61] {
    display: flex;
    gap: 0.35rem;
}

/* ============================================
   RESPONSIVE - 768px
   ============================================ */
@@media (max-width: 768px) {
    .perm-tabs[b-t5omn52q61] {
        overflow-x: auto;
    }

    .perm-section-header[b-t5omn52q61] {
        flex-direction: column;
        align-items: stretch;
    }

    .perm-modal[b-t5omn52q61] {
        max-width: 95%;
    }

    .perm-matrix th:not(:first-child)[b-t5omn52q61] {
        min-width: 70px;
    }
}
/* /Pages/Private/PlanesPago.razor.rz.scp.css */
/* ============================================
   PLANES DE PAGO - I.E.P. Javier Perez de Cuellar
   ============================================ */

/* ============================================
   YEAR SELECTOR
   ============================================ */
.year-select[b-tlxzm6hx7h] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
}

.year-select:focus[b-tlxzm6hx7h] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   STAT CARDS
   ============================================ */
.stats-grid-4[b-tlxzm6hx7h] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-content[b-tlxzm6hx7h] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

/* ============================================
   PROGRESS BAR
   ============================================ */
.progress-bar-container[b-tlxzm6hx7h] {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-lg[b-tlxzm6hx7h] {
    height: 12px;
    margin: 0.75rem 0 1.5rem;
    border-radius: 6px;
}

.progress-bar[b-tlxzm6hx7h] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-success[b-tlxzm6hx7h] { background: var(--color-success); }
.progress-info[b-tlxzm6hx7h] { background: var(--color-primary); }
.progress-warning[b-tlxzm6hx7h] { background: #f59e0b; }
.progress-danger[b-tlxzm6hx7h] { background: var(--color-error, #ef4444); }

.progress-label[b-tlxzm6hx7h] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
    display: block;
}

/* ============================================
   TABLE
   ============================================ */
.student-name[b-tlxzm6hx7h] {
    font-weight: 600;
    color: #1e293b;
}

.font-mono[b-tlxzm6hx7h] {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.font-bold[b-tlxzm6hx7h] {
    font-weight: 700;
}

.text-success[b-tlxzm6hx7h] { color: var(--color-success) !important; }
.text-warning[b-tlxzm6hx7h] { color: #f59e0b !important; }
.text-info[b-tlxzm6hx7h] { color: var(--color-primary) !important; }
.text-muted[b-tlxzm6hx7h] { color: #9ca3af !important; }
.text-danger[b-tlxzm6hx7h] { color: var(--color-error, #ef4444) !important; }

/* ============================================
   BADGES
   ============================================ */
.badge[b-tlxzm6hx7h] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-info[b-tlxzm6hx7h] {
    background: #e0f2fe;
    color: #0369a1;
}

.badge-success[b-tlxzm6hx7h] {
    background: #dcfce7;
    color: #166534;
}

.badge-danger[b-tlxzm6hx7h] {
    background: #fee2e2;
    color: #991b1b;
}

/* ============================================
   STATUS BADGES (Installment)
   ============================================ */
.status-badge[b-tlxzm6hx7h] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-paid[b-tlxzm6hx7h] {
    background: #dcfce7;
    color: #166534;
}

.status-partial[b-tlxzm6hx7h] {
    background: #fef3c7;
    color: #92400e;
}

.status-overdue[b-tlxzm6hx7h] {
    background: #fee2e2;
    color: #991b1b;
}

.status-pending[b-tlxzm6hx7h] {
    background: #f3f4f6;
    color: #6b7280;
}

/* ============================================
   INSTALLMENT TABLE ROWS
   ============================================ */
.row-paid[b-tlxzm6hx7h] {
    background: #f0fdf4;
}

.row-overdue[b-tlxzm6hx7h] {
    background: #fef2f2;
}

.concept-label[b-tlxzm6hx7h] {
    font-weight: 600;
    color: #374151;
}

.observation-text[b-tlxzm6hx7h] {
    font-size: 0.8rem;
    color: #6b7280;
    cursor: help;
}

/* ============================================
   PLAN SUMMARY (inside detail modal)
   ============================================ */
.plan-summary[b-tlxzm6hx7h] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.plan-summary-item[b-tlxzm6hx7h] {
    text-align: center;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
}

.plan-summary-item .label[b-tlxzm6hx7h] {
    display: block;
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.plan-summary-item .value[b-tlxzm6hx7h] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
}

.plan-summary-item.text-success .value[b-tlxzm6hx7h] { color: var(--color-success); }
.plan-summary-item.text-warning .value[b-tlxzm6hx7h] { color: #f59e0b; }

/* ============================================
   INSTALLMENT TABLE
   ============================================ */
.installment-table th[b-tlxzm6hx7h] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.installment-table td[b-tlxzm6hx7h] {
    vertical-align: middle;
    font-size: 0.88rem;
}

/* ============================================
   BULK GENERATE MODAL
   ============================================ */
.bulk-confirm-body[b-tlxzm6hx7h] {
    text-align: center;
    padding: 1rem 0;
}

.bulk-icon[b-tlxzm6hx7h] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    color: #f59e0b;
}

.bulk-confirm-body p[b-tlxzm6hx7h] {
    color: #374151;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.bulk-result[b-tlxzm6hx7h] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    margin: 1rem 0;
    background: #f9fafb;
    border-radius: 8px;
}

.bulk-result-item[b-tlxzm6hx7h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.88rem;
}

.bulk-result-item strong[b-tlxzm6hx7h] {
    font-size: 1.5rem;
}

/* ============================================
   MODAL SIZES
   ============================================ */
.modal-lg[b-tlxzm6hx7h] {
    max-width: 1000px;
    width: 95%;
}

.modal-sm[b-tlxzm6hx7h] {
    max-width: 500px;
    width: 90%;
}

.modal-subtitle[b-tlxzm6hx7h] {
    font-size: 0.88rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* ============================================
   INSTALLMENT ACTIONS (botones por cuota)
   ============================================ */
.installment-actions[b-tlxzm6hx7h] {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
}

.btn-icon-pay[b-tlxzm6hx7h] {
    color: #059669;
    border-color: #d1fae5;
}

.btn-icon-pay:hover[b-tlxzm6hx7h] {
    background: #ecfdf5;
    color: #047857;
    border-color: #10b981;
}

/* ============================================
   PAY MODAL
   ============================================ */
.pay-modal-header[b-tlxzm6hx7h] {
    background: #ecfdf5;
    border-bottom: 1px solid #d1fae5;
}

.pay-modal-header h2[b-tlxzm6hx7h] {
    color: #047857;
}

.pay-summary[b-tlxzm6hx7h] {
    background: #f8fafc;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
}

.pay-summary-row[b-tlxzm6hx7h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.88rem;
    color: #374151;
}

.pay-summary-row + .pay-summary-row[b-tlxzm6hx7h] {
    border-top: 1px solid #e5e7eb;
}

.pay-summary-row .label[b-tlxzm6hx7h] {
    color: #6b7280;
    font-weight: 500;
}

.pay-summary-row .value[b-tlxzm6hx7h] {
    color: #1f2937;
    font-weight: 600;
}

.pay-summary-row.text-info .value[b-tlxzm6hx7h] {
    color: var(--color-primary);
}

.pay-summary-row-highlight[b-tlxzm6hx7h] {
    background: #fef3c7;
    margin: 0.25rem -1rem -0.85rem;
    padding: 0.6rem 1rem;
    border-radius: 0 0 8px 8px;
    border-top: 2px solid #fcd34d !important;
}

.pay-summary-row-highlight .label[b-tlxzm6hx7h],
.pay-summary-row-highlight .value[b-tlxzm6hx7h] {
    color: #92400e;
    font-weight: 700;
}

.btn-pay-confirm[b-tlxzm6hx7h] {
    background: #059669 !important;
}

.btn-pay-confirm:hover:not(:disabled)[b-tlxzm6hx7h] {
    background: #047857 !important;
}

/* ============================================
   SPINNER
   ============================================ */
.spinner-sm[b-tlxzm6hx7h] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 0.5rem;
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .stats-grid-4[b-tlxzm6hx7h] {
        grid-template-columns: repeat(2, 1fr);
    }

    .plan-summary[b-tlxzm6hx7h] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid-4[b-tlxzm6hx7h] {
        grid-template-columns: 1fr;
    }

    .plan-summary[b-tlxzm6hx7h] {
        grid-template-columns: 1fr;
    }

    .modal-lg[b-tlxzm6hx7h] {
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }

    .bulk-result[b-tlxzm6hx7h] {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* /Pages/Private/Portafolio.razor.rz.scp.css */
/* ============================================
   PORTAFOLIO ESTUDIANTIL - I.E.P. Javier Perez de Cuellar
   ============================================ */

/* ============================================
   LOADING STATES
   ============================================ */
.portafolio-loading[b-8rfr959anm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #6b7280;
}

.portafolio-loading p[b-8rfr959anm] {
    margin-top: 1rem;
    font-size: 0.95rem;
}

.portafolio-loading-inline[b-8rfr959anm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: #f0f6ff;
    border-radius: 12px;
    color: var(--color-primary);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.loading-spinner-sm[b-8rfr959anm] {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0, 85, 163, 0.15);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-8rfr959anm 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-8rfr959anm {
    to { transform: rotate(360deg); }
}

/* ============================================
   STUDENT SELECTOR CARD
   ============================================ */
.portafolio-selector-card[b-8rfr959anm] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 24px;
    overflow: visible;
    position: relative;
}

.selector-header[b-8rfr959anm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: 0.95rem;
}

.selector-header svg[b-8rfr959anm] {
    color: var(--color-primary);
}

.selector-body[b-8rfr959anm] {
    padding: 16px 20px;
    position: relative;
}

.search-input-wrapper[b-8rfr959anm] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-8rfr959anm] {
    position: absolute;
    left: 14px;
    color: #9ca3af;
    pointer-events: none;
}

.search-input[b-8rfr959anm] {
    width: 100%;
    padding: 12px 40px 12px 42px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #1f2937;
    background: #fafbfc;
    transition: all 0.2s ease;
    outline: none;
}

.search-input:focus[b-8rfr959anm] {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.search-input[b-8rfr959anm]::placeholder {
    color: #9ca3af;
}

.search-clear[b-8rfr959anm] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.search-clear:hover[b-8rfr959anm] {
    color: var(--color-error);
    background: rgba(239, 68, 68, 0.08);
}

/* ============================================
   STUDENT DROPDOWN
   ============================================ */
.student-dropdown[b-8rfr959anm] {
    position: absolute;
    top: calc(100% + 4px);
    left: 20px;
    right: 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
}

.dropdown-item[b-8rfr959anm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f9fafb;
}

.dropdown-item:last-child[b-8rfr959anm] {
    border-bottom: none;
}

.dropdown-item:hover[b-8rfr959anm] {
    background: #f0f6ff;
}

.dropdown-item.active[b-8rfr959anm] {
    background: #e8f0fe;
}

.dropdown-item-avatar[b-8rfr959anm] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-primary-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.dropdown-item-info[b-8rfr959anm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-item-name[b-8rfr959anm] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
}

.dropdown-item-dni[b-8rfr959anm] {
    font-size: 0.8rem;
    color: #6b7280;
}

.dropdown-empty[b-8rfr959anm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* ============================================
   STUDENT HEADER CARD
   ============================================ */
.portafolio-student-header[b-8rfr959anm] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--color-primary-dark);
    border-radius: 14px;
    margin-bottom: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.portafolio-student-header[b-8rfr959anm]::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.portafolio-student-header[b-8rfr959anm]::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: 60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.student-avatar-large[b-8rfr959anm] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.student-header-info[b-8rfr959anm] {
    flex: 1;
    position: relative;
    z-index: 1;
}

.student-header-info h2[b-8rfr959anm] {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.student-header-meta[b-8rfr959anm] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.meta-item[b-8rfr959anm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.meta-item svg[b-8rfr959anm] {
    opacity: 0.7;
}

/* ============================================
   KPI GRID
   ============================================ */
.portafolio-kpi-grid[b-8rfr959anm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.portafolio-kpi-card[b-8rfr959anm] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portafolio-kpi-card:hover[b-8rfr959anm] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.kpi-accent[b-8rfr959anm] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.kpi-accent.kpi-green[b-8rfr959anm] { background: var(--color-success); }
.kpi-accent.kpi-yellow[b-8rfr959anm] { background: var(--color-warning); }
.kpi-accent.kpi-red[b-8rfr959anm] { background: var(--color-error); }

.kpi-icon[b-8rfr959anm] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 4px;
}

.kpi-icon svg[b-8rfr959anm] {
    width: 22px;
    height: 22px;
}

.kpi-icon.kpi-green[b-8rfr959anm] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.kpi-icon.kpi-yellow[b-8rfr959anm] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning-dark);
}

.kpi-icon.kpi-red[b-8rfr959anm] {
    background: var(--bg-error-subtle);
    color: var(--color-error-dark);
}

.kpi-content[b-8rfr959anm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kpi-value[b-8rfr959anm] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.kpi-value.kpi-green[b-8rfr959anm] { color: var(--color-success-dark); }
.kpi-value.kpi-yellow[b-8rfr959anm] { color: var(--color-warning-dark); }
.kpi-value.kpi-red[b-8rfr959anm] { color: var(--color-error-dark); }

.kpi-label[b-8rfr959anm] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.3;
}

.kpi-sub[b-8rfr959anm] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ============================================
   SECTIONS
   ============================================ */
.portafolio-section[b-8rfr959anm] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 24px;
    overflow: hidden;
}

.section-header[b-8rfr959anm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f3f4f6;
}

.section-header h3[b-8rfr959anm] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header h3 svg[b-8rfr959anm] {
    color: var(--color-primary);
}

.section-badge[b-8rfr959anm] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: #e8f0fe;
    padding: 4px 10px;
    border-radius: 20px;
}

/* ============================================
   ATTENDANCE VISUALIZATION
   ============================================ */
.attendance-summary[b-8rfr959anm] {
    padding: 24px;
}

.attendance-stats-row[b-8rfr959anm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.attendance-stat[b-8rfr959anm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 10px;
    background: #fafbfc;
    border: 1px solid #f3f4f6;
}

.att-stat-icon[b-8rfr959anm] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.attendance-stat.present .att-stat-icon[b-8rfr959anm] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.attendance-stat.absent .att-stat-icon[b-8rfr959anm] {
    background: var(--bg-error-subtle);
    color: var(--color-error-dark);
}

.attendance-stat.late .att-stat-icon[b-8rfr959anm] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-dark);
}

.att-stat-info[b-8rfr959anm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.att-stat-value[b-8rfr959anm] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1f2937;
}

.att-stat-label[b-8rfr959anm] {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
}

/* Attendance Bar */
.attendance-bar-container[b-8rfr959anm] {
    margin-top: 8px;
}

.attendance-bar[b-8rfr959anm] {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: #f3f4f6;
}

.att-bar-segment[b-8rfr959anm] {
    height: 100%;
    transition: width 0.5s ease;
    min-width: 0;
}

.att-bar-segment.present[b-8rfr959anm] {
    background: var(--color-success);
}

.att-bar-segment.late[b-8rfr959anm] {
    background: var(--color-warning);
}

.att-bar-segment.absent[b-8rfr959anm] {
    background: var(--color-error);
}

.attendance-bar-legend[b-8rfr959anm] {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    justify-content: center;
}

.legend-item[b-8rfr959anm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #6b7280;
}

.legend-dot[b-8rfr959anm] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-dot.present[b-8rfr959anm] { background: var(--color-success); }
.legend-dot.late[b-8rfr959anm] { background: var(--color-warning); }
.legend-dot.absent[b-8rfr959anm] { background: var(--color-error); }

/* ============================================
   TABLES
   ============================================ */
.portafolio-table-wrapper[b-8rfr959anm] {
    overflow-x: auto;
}

.portafolio-table[b-8rfr959anm] {
    width: 100%;
    border-collapse: collapse;
}

.portafolio-table thead th[b-8rfr959anm] {
    background: #fafbfc;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.portafolio-table tbody tr[b-8rfr959anm] {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
}

.portafolio-table tbody tr:last-child[b-8rfr959anm] {
    border-bottom: none;
}

.portafolio-table tbody tr:hover[b-8rfr959anm] {
    background: #fafbfc;
}

.portafolio-table tbody td[b-8rfr959anm] {
    padding: 14px 16px;
    font-size: 0.88rem;
    color: #374151;
    vertical-align: middle;
}

.course-name[b-8rfr959anm] {
    font-weight: 600;
    color: #1f2937;
}

.period-badge[b-8rfr959anm] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary);
    background: #e8f0fe;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.grade-type-badge[b-8rfr959anm] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Score Badges */
.score-badge[b-8rfr959anm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
}

.score-badge.score-high[b-8rfr959anm] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.score-badge.score-mid[b-8rfr959anm] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-dark);
}

.score-badge.score-low[b-8rfr959anm] {
    background: var(--bg-error-subtle);
    color: var(--color-error-dark);
}

.score-pending[b-8rfr959anm] {
    color: #9ca3af;
    font-weight: 500;
}

.score-max[b-8rfr959anm] {
    color: #9ca3af;
    font-size: 0.78rem;
    font-weight: 500;
    margin-left: 4px;
}

.assignment-score-cell[b-8rfr959anm] {
    display: flex;
    align-items: center;
}

/* ============================================
   EXAM CARDS GRID
   ============================================ */
.portafolio-cards-grid[b-8rfr959anm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 20px;
}

.portafolio-exam-card[b-8rfr959anm] {
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portafolio-exam-card:hover[b-8rfr959anm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.exam-card-header[b-8rfr959anm] {
    padding: 16px 16px 0;
}

.exam-card-header h4[b-8rfr959anm] {
    margin: 0 0 4px 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}

.exam-course[b-8rfr959anm] {
    font-size: 0.78rem;
    color: var(--color-primary);
    font-weight: 600;
}

.exam-card-body[b-8rfr959anm] {
    padding: 12px 16px;
}

.exam-score-display[b-8rfr959anm] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}

.exam-score-value[b-8rfr959anm] {
    font-size: 1.3rem;
    font-weight: 800;
}

.exam-score-value.score-high[b-8rfr959anm] { color: var(--color-success-dark); }
.exam-score-value.score-mid[b-8rfr959anm] { color: var(--color-warning-dark); }
.exam-score-value.score-low[b-8rfr959anm] { color: var(--color-error-dark); }

.exam-score-total[b-8rfr959anm] {
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 500;
}

.exam-score-bar[b-8rfr959anm] {
    margin-top: 4px;
}

.score-bar-track[b-8rfr959anm] {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.score-bar-fill[b-8rfr959anm] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.score-bar-fill.bar-high[b-8rfr959anm] { background: var(--color-success); }
.score-bar-fill.bar-mid[b-8rfr959anm] { background: var(--color-warning); }
.score-bar-fill.bar-low[b-8rfr959anm] { background: var(--color-error); }

.exam-card-footer[b-8rfr959anm] {
    padding: 10px 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.exam-date[b-8rfr959anm] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #9ca3af;
}

.exam-percentage[b-8rfr959anm] {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.exam-percentage.score-high[b-8rfr959anm] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.exam-percentage.score-mid[b-8rfr959anm] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-dark);
}

.exam-percentage.score-low[b-8rfr959anm] {
    background: var(--bg-error-subtle);
    color: var(--color-error-dark);
}

/* ============================================
   STATUS BADGES (Assignments)
   ============================================ */
.assignment-badges[b-8rfr959anm] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.assignment-title[b-8rfr959anm] {
    font-weight: 600;
    color: #1f2937;
}

.status-badge[b-8rfr959anm] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-badge.submitted[b-8rfr959anm] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.status-badge.pending[b-8rfr959anm] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-dark);
}

.status-badge.graded[b-8rfr959anm] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

.status-badge.ungraded[b-8rfr959anm] {
    background: #f3f4f6;
    color: #9ca3af;
}

.date-cell[b-8rfr959anm] {
    font-size: 0.85rem;
    color: #6b7280;
}

.date-cell.overdue[b-8rfr959anm] {
    color: var(--color-error);
    font-weight: 600;
}

/* ============================================
   EMPTY STATES
   ============================================ */
.portafolio-empty-state[b-8rfr959anm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: #9ca3af;
}

.portafolio-empty-state svg[b-8rfr959anm] {
    margin-bottom: 12px;
    opacity: 0.4;
}

.portafolio-empty-state h4[b-8rfr959anm] {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 700;
    color: #6b7280;
}

.portafolio-empty-state p[b-8rfr959anm] {
    margin: 0;
    font-size: 0.85rem;
    color: #9ca3af;
    max-width: 360px;
}

.portafolio-empty-state-full[b-8rfr959anm] {
    min-height: 320px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.portafolio-empty-state-full svg[b-8rfr959anm] {
    color: var(--color-primary);
    opacity: 0.25;
}

.portafolio-empty-state-sm[b-8rfr959anm] {
    padding: 20px;
    text-align: center;
}

.portafolio-empty-state-sm p[b-8rfr959anm] {
    margin: 0;
    font-size: 0.85rem;
    color: #9ca3af;
}

/* Retry Button */
.btn-retry[b-8rfr959anm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 10px 20px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry:hover[b-8rfr959anm] {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 85, 163, 0.3);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .portafolio-kpi-grid[b-8rfr959anm] {
        grid-template-columns: repeat(2, 1fr);
    }

    .portafolio-cards-grid[b-8rfr959anm] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .portafolio-kpi-grid[b-8rfr959anm] {
        grid-template-columns: 1fr;
    }

    .portafolio-student-header[b-8rfr959anm] {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .student-header-meta[b-8rfr959anm] {
        justify-content: center;
    }

    .attendance-stats-row[b-8rfr959anm] {
        grid-template-columns: 1fr;
    }

    .portafolio-cards-grid[b-8rfr959anm] {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .section-header[b-8rfr959anm] {
        padding: 14px 16px;
    }

    .portafolio-table tbody td[b-8rfr959anm],
    .portafolio-table thead th[b-8rfr959anm] {
        padding: 10px 12px;
    }

    .student-header-info h2[b-8rfr959anm] {
        font-size: 1.15rem;
    }

    .assignment-badges[b-8rfr959anm] {
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .portafolio-table thead th[b-8rfr959anm] {
        font-size: 0.72rem;
        padding: 8px 10px;
    }

    .portafolio-table tbody td[b-8rfr959anm] {
        font-size: 0.8rem;
        padding: 10px;
    }

    .kpi-value[b-8rfr959anm] {
        font-size: 1.2rem;
    }

    .kpi-icon[b-8rfr959anm] {
        width: 36px;
        height: 36px;
    }

    .kpi-icon svg[b-8rfr959anm] {
        width: 18px;
        height: 18px;
    }

    .attendance-bar-legend[b-8rfr959anm] {
        flex-wrap: wrap;
        gap: 12px;
    }
}
/* /Pages/Private/Psicologia.razor.rz.scp.css */
/* ============================================
   PSICOLOGIA PAGE
   Colors: --color-primary: #0055A3
           --color-primary-dark: #00284D
           --color-highlight: #F5A623
           --color-success: #22c55e
   ============================================ */

/* ============================================
   TABS
   ============================================ */
.tabs-container[b-0wzxladpbl] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: #f7fafc;
    padding: 0.5rem;
    border-radius: 12px;
    flex-wrap: wrap;
}

.tab[b-0wzxladpbl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: #718096;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    justify-content: center;
}

.tab:hover[b-0wzxladpbl] {
    background: #edf2f7;
    color: #4a5568;
}

.tab.active[b-0wzxladpbl] {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 85, 163, 0.3);
}

.tab svg[b-0wzxladpbl] {
    width: 20px;
    height: 20px;
}

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid[b-0wzxladpbl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-0wzxladpbl] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-left: 4px solid;
}

.stat-card.total[b-0wzxladpbl] {
    border-left-color: var(--color-primary);
}

.stat-card.seguimiento[b-0wzxladpbl] {
    border-left-color: var(--color-highlight);
}

.stat-card.derivados[b-0wzxladpbl] {
    border-left-color: var(--color-success);
}

.stat-icon[b-0wzxladpbl] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card.total .stat-icon[b-0wzxladpbl] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

.stat-card.seguimiento .stat-icon[b-0wzxladpbl] {
    background: var(--bg-highlight-subtle);
    color: var(--color-highlight);
}

.stat-card.derivados .stat-icon[b-0wzxladpbl] {
    background: var(--bg-success-subtle);
    color: var(--color-success);
}

.stat-icon svg[b-0wzxladpbl] {
    width: 24px;
    height: 24px;
}

.stat-info[b-0wzxladpbl] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-0wzxladpbl] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.stat-label[b-0wzxladpbl] {
    font-size: 0.85rem;
    color: #718096;
}

/* ============================================
   LOADING
   ============================================ */
.loading-container[b-0wzxladpbl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.loading-container p[b-0wzxladpbl] {
    color: #718096;
    margin-top: 1rem;
}

.spinner[b-0wzxladpbl] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-0wzxladpbl 0.8s linear infinite;
}

@keyframes spin-b-0wzxladpbl {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   FORM CARD (Tab 0)
   ============================================ */
.form-card[b-0wzxladpbl] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.form-header[b-0wzxladpbl] {
    padding: 1.25rem 1.5rem;
    background: var(--color-primary-dark);
    color: white;
}

.form-header h2[b-0wzxladpbl] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.form-body[b-0wzxladpbl] {
    padding: 1.5rem;
}

.form-section[b-0wzxladpbl] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.form-section:last-child[b-0wzxladpbl] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.form-section h3[b-0wzxladpbl] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(0, 85, 163, 0.15);
}

.form-row[b-0wzxladpbl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row:last-child[b-0wzxladpbl] {
    margin-bottom: 0;
}

.form-group[b-0wzxladpbl] {
    margin-bottom: 0;
}

.form-group label[b-0wzxladpbl] {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 0.35rem;
}

.form-input[b-0wzxladpbl],
.form-select[b-0wzxladpbl],
.form-textarea[b-0wzxladpbl] {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #2d3748;
    font-family: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-0wzxladpbl],
.form-select:focus[b-0wzxladpbl],
.form-textarea:focus[b-0wzxladpbl] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.15);
}

.form-textarea[b-0wzxladpbl] {
    resize: vertical;
    min-height: 80px;
}

.form-footer[b-0wzxladpbl] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #f7fafc;
    border-top: 1px solid #e2e8f0;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary[b-0wzxladpbl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--color-primary);
    color: white;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-0wzxladpbl] {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(0, 85, 163, 0.3);
}

.btn-primary:disabled[b-0wzxladpbl] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary svg[b-0wzxladpbl] {
    width: 18px;
    height: 18px;
}

.btn-secondary[b-0wzxladpbl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    background: white;
    color: #4a5568;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-0wzxladpbl] {
    background: #f7fafc;
    border-color: #cbd5e0;
}

.btn-sm[b-0wzxladpbl] {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
}

.btn-sm-primary[b-0wzxladpbl] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--color-primary);
    color: white;
    transition: all 0.2s ease;
}

.btn-sm-primary:hover[b-0wzxladpbl] {
    background: var(--color-primary-dark);
}

.btn-sm-primary svg[b-0wzxladpbl] {
    width: 16px;
    height: 16px;
}

.btn-danger[b-0wzxladpbl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: #e53e3e;
    color: white;
    transition: all 0.2s ease;
}

.btn-danger:hover[b-0wzxladpbl] {
    background: #c53030;
}

/* ============================================
   HISTORIAL SECTION (Tab 1)
   ============================================ */
.historial-section[b-0wzxladpbl] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.filters-bar[b-0wzxladpbl] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.search-box[b-0wzxladpbl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex: 1;
    min-width: 250px;
}

.search-box svg[b-0wzxladpbl] {
    width: 20px;
    height: 20px;
    color: #a0aec0;
    flex-shrink: 0;
}

.search-input[b-0wzxladpbl] {
    border: none;
    background: transparent;
    font-size: 0.95rem;
    width: 100%;
    color: #2d3748;
}

.search-input:focus[b-0wzxladpbl] {
    outline: none;
}

.filter-select[b-0wzxladpbl] {
    padding: 0.65rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    color: #4a5568;
    cursor: pointer;
    min-width: 180px;
}

.filter-select:focus[b-0wzxladpbl] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.15);
}

/* Consulta cards */
.consultas-list[b-0wzxladpbl] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.consulta-card[b-0wzxladpbl] {
    background: #f7fafc;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.consulta-card:hover[b-0wzxladpbl] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e0;
}

.consulta-header[b-0wzxladpbl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.estudiante-info[b-0wzxladpbl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.estudiante-avatar[b-0wzxladpbl] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary-dark);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

.estudiante-info h3[b-0wzxladpbl] {
    margin: 0;
    font-size: 1rem;
    color: var(--color-primary-dark);
}

.grado-info[b-0wzxladpbl] {
    font-size: 0.85rem;
    color: #718096;
}

.consulta-meta[b-0wzxladpbl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fecha-badge[b-0wzxladpbl] {
    padding: 0.3rem 0.75rem;
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.consulta-body[b-0wzxladpbl] {
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.consulta-detail[b-0wzxladpbl] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.detail-label[b-0wzxladpbl] {
    font-size: 0.75rem;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.detail-value[b-0wzxladpbl] {
    font-size: 0.9rem;
    color: #2d3748;
}

.consulta-detail.derivado .detail-value[b-0wzxladpbl] {
    color: var(--color-success);
    font-weight: 600;
}

.consulta-detail.seguimiento-tag .detail-value[b-0wzxladpbl] {
    color: var(--color-highlight);
    font-weight: 600;
}

.consulta-footer[b-0wzxladpbl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.fecha-registro[b-0wzxladpbl] {
    font-size: 0.8rem;
    color: #a0aec0;
}

.consulta-actions[b-0wzxladpbl] {
    display: flex;
    gap: 0.25rem;
}

.action-btn[b-0wzxladpbl] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #718096;
    transition: all 0.2s ease;
}

.action-btn:hover[b-0wzxladpbl] {
    background: #f7fafc;
}

.action-btn.view:hover[b-0wzxladpbl] {
    color: var(--color-primary);
}

.action-btn.edit:hover[b-0wzxladpbl] {
    color: var(--color-highlight);
}

.action-btn.delete:hover[b-0wzxladpbl] {
    background: #fff5f5;
    color: #e53e3e;
}

.action-btn svg[b-0wzxladpbl] {
    width: 16px;
    height: 16px;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state[b-0wzxladpbl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-0wzxladpbl] {
    width: 80px;
    height: 80px;
    background: var(--bg-primary-faint);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.empty-icon svg[b-0wzxladpbl] {
    width: 40px;
    height: 40px;
    color: var(--color-primary);
}

.empty-state h3[b-0wzxladpbl] {
    font-size: 1.25rem;
    color: var(--color-primary-dark);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-0wzxladpbl] {
    color: #718096;
    font-size: 0.95rem;
    margin: 0;
}

/* ============================================
   CONFIG SECTION (Tab 2)
   ============================================ */
.config-section[b-0wzxladpbl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.config-panel[b-0wzxladpbl] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.config-panel-header[b-0wzxladpbl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
}

.config-panel-header h3[b-0wzxladpbl] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.config-form[b-0wzxladpbl] {
    padding: 1rem 1.25rem;
    background: var(--bg-primary-faint);
    border-bottom: 1px solid #e2e8f0;
}

.config-form .form-group[b-0wzxladpbl] {
    margin-bottom: 0.75rem;
}

.config-form-actions[b-0wzxladpbl] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.config-list[b-0wzxladpbl] {
    max-height: 450px;
    overflow-y: auto;
}

.config-item[b-0wzxladpbl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f0f4f8;
    transition: background 0.2s ease;
}

.config-item:last-child[b-0wzxladpbl] {
    border-bottom: none;
}

.config-item:hover[b-0wzxladpbl] {
    background: #f7fafc;
}

.config-item-info[b-0wzxladpbl] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.config-item-name[b-0wzxladpbl] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #2d3748;
}

.config-item-desc[b-0wzxladpbl] {
    font-size: 0.8rem;
    color: #a0aec0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.config-item-actions[b-0wzxladpbl] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.config-empty[b-0wzxladpbl] {
    padding: 2rem;
    text-align: center;
    color: #a0aec0;
    font-size: 0.9rem;
}

/* ============================================
   MODAL - VIEW DETAIL
   ============================================ */
.modal-overlay[b-0wzxladpbl] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.modal-view[b-0wzxladpbl] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 750px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header[b-0wzxladpbl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h2[b-0wzxladpbl] {
    font-size: 1.25rem;
    color: var(--color-primary-dark);
    margin: 0;
}

.btn-close[b-0wzxladpbl] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #718096;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-close:hover[b-0wzxladpbl] {
    background: #f7fafc;
    color: var(--color-primary-dark);
}

.btn-close svg[b-0wzxladpbl] {
    width: 20px;
    height: 20px;
}

.modal-body[b-0wzxladpbl] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-0wzxladpbl] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f7fafc;
}

/* Detail sections inside modal */
.detail-section[b-0wzxladpbl] {
    margin-bottom: 1.5rem;
}

.detail-section:last-child[b-0wzxladpbl] {
    margin-bottom: 0;
}

.detail-section h3[b-0wzxladpbl] {
    font-size: 1rem;
    color: var(--color-primary);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
}

.detail-grid[b-0wzxladpbl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.detail-item[b-0wzxladpbl] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-item.full[b-0wzxladpbl] {
    grid-column: span 2;
}

.detail-item label[b-0wzxladpbl] {
    font-size: 0.8rem;
    color: #718096;
    font-weight: 500;
}

.detail-item span[b-0wzxladpbl],
.detail-item p[b-0wzxladpbl] {
    color: #2d3748;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.derivado-text[b-0wzxladpbl] {
    color: var(--color-success) !important;
    font-weight: 600;
}

/* ============================================
   MODAL - DELETE CONFIRMATION
   ============================================ */
.delete-modal .modal-content[b-0wzxladpbl] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

.delete-icon[b-0wzxladpbl] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.delete-icon svg[b-0wzxladpbl] {
    width: 28px;
    height: 28px;
    color: #e53e3e;
}

.delete-modal h2[b-0wzxladpbl] {
    margin: 0 0 0.5rem 0;
    color: var(--color-primary-dark);
    font-size: 1.25rem;
}

.delete-message[b-0wzxladpbl] {
    color: #718096;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.delete-actions[b-0wzxladpbl] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .stats-grid[b-0wzxladpbl] {
        grid-template-columns: repeat(3, 1fr);
    }

    .config-section[b-0wzxladpbl] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tabs-container[b-0wzxladpbl] {
        flex-direction: column;
    }

    .tab[b-0wzxladpbl] {
        justify-content: center;
    }

    .stats-grid[b-0wzxladpbl] {
        grid-template-columns: 1fr;
    }

    .form-row[b-0wzxladpbl] {
        grid-template-columns: 1fr;
    }

    .filters-bar[b-0wzxladpbl] {
        flex-direction: column;
    }

    .filter-select[b-0wzxladpbl] {
        width: 100%;
    }

    .consulta-body[b-0wzxladpbl] {
        grid-template-columns: 1fr;
    }

    .detail-grid[b-0wzxladpbl] {
        grid-template-columns: 1fr;
    }

    .detail-item.full[b-0wzxladpbl] {
        grid-column: span 1;
    }

    .config-section[b-0wzxladpbl] {
        grid-template-columns: 1fr;
    }

    .delete-actions[b-0wzxladpbl] {
        flex-direction: column;
    }
}
/* /Pages/Private/Reportes.razor.rz.scp.css */
/* ============================================
   REPORTES PAGE
   I.E.P. Javier Perez de Cuellar
   Colors: --color-primary: #0055A3
           --color-primary-dark: #00284D
           --color-highlight: #F5A623
           --color-success: #22c55e
   ============================================ */

/* ---- PAGE CONTAINER ---- */
.reportes-page[b-693qfyc8g9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---- HEADER ---- */
.reportes-header[b-693qfyc8g9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.reportes-header-info h1[b-693qfyc8g9] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.reportes-header-info p[b-693qfyc8g9] {
    color: #64748b;
    margin: 4px 0 0 0;
    font-size: 0.9rem;
}

/* ---- REPORT CARDS GRID ---- */
.reportes-grid[b-693qfyc8g9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.reporte-card[b-693qfyc8g9] {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid #e5e7eb;
}
.reporte-card:hover[b-693qfyc8g9] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.reporte-card.active[b-693qfyc8g9] {
    border-left-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0, 85, 163, 0.15);
}
.reporte-card.notas[b-693qfyc8g9] { border-left-color: var(--color-primary); }
.reporte-card.nomina[b-693qfyc8g9] { border-left-color: var(--color-success); }
.reporte-card.asistencia[b-693qfyc8g9] { border-left-color: #8b5cf6; }
.reporte-card.siagie[b-693qfyc8g9] { border-left-color: var(--color-warning); }
.reporte-card.carnet-individual[b-693qfyc8g9] { border-left-color: #ec4899; }
.reporte-card.carnet-seccion[b-693qfyc8g9] { border-left-color: #06b6d4; }
.reporte-card.libreta[b-693qfyc8g9] { border-left-color: var(--color-error); }

.reporte-card-icon[b-693qfyc8g9] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.reporte-card-icon svg[b-693qfyc8g9] { width: 24px; height: 24px; }
.reporte-card.notas .reporte-card-icon[b-693qfyc8g9] { background: var(--bg-primary-subtle); color: var(--color-primary); }
.reporte-card.nomina .reporte-card-icon[b-693qfyc8g9] { background: var(--bg-success-subtle); color: var(--color-success); }
.reporte-card.asistencia .reporte-card-icon[b-693qfyc8g9] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.reporte-card.siagie .reporte-card-icon[b-693qfyc8g9] { background: var(--bg-highlight-subtle); color: var(--color-warning); }
.reporte-card.carnet-individual .reporte-card-icon[b-693qfyc8g9] { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
.reporte-card.carnet-seccion .reporte-card-icon[b-693qfyc8g9] { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.reporte-card.libreta .reporte-card-icon[b-693qfyc8g9] { background: var(--bg-error-subtle); color: var(--color-error); }

.reporte-card-info[b-693qfyc8g9] { flex: 1; min-width: 0; }
.reporte-card-info h3[b-693qfyc8g9] {
    margin: 0 0 2px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}
.reporte-card-info p[b-693qfyc8g9] {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- CONFIG PANEL ---- */
.reporte-config[b-693qfyc8g9] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.config-header[b-693qfyc8g9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.config-header-left[b-693qfyc8g9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.config-header-left h2[b-693qfyc8g9] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}
.config-header-left p[b-693qfyc8g9] {
    margin: 2px 0 0 0;
    font-size: 0.8rem;
    color: #64748b;
}
.config-close-btn[b-693qfyc8g9] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: background 0.2s;
}
.config-close-btn:hover[b-693qfyc8g9] {
    background: #fee2e2;
    color: var(--color-error-dark);
}

.config-body[b-693qfyc8g9] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.config-form-row[b-693qfyc8g9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.config-form-group label[b-693qfyc8g9] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 4px;
}
.config-form-group select[b-693qfyc8g9],
.config-form-group input[b-693qfyc8g9] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1e293b;
    background: #ffffff;
    transition: border-color 0.2s;
}
.config-form-group select:focus[b-693qfyc8g9],
.config-form-group input:focus[b-693qfyc8g9] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.config-footer[b-693qfyc8g9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* ---- BUTTONS ---- */
.rep-btn[b-693qfyc8g9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.rep-btn svg[b-693qfyc8g9] { width: 16px; height: 16px; }
.rep-btn-primary[b-693qfyc8g9] {
    background: var(--color-primary);
    color: #ffffff;
}
.rep-btn-primary:hover[b-693qfyc8g9] {
    background: var(--color-primary-dark);
}
.rep-btn-primary:disabled[b-693qfyc8g9] {
    background: #94a3b8;
    cursor: not-allowed;
}
.rep-btn-secondary[b-693qfyc8g9] {
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.rep-btn-secondary:hover[b-693qfyc8g9] {
    background: #f1f5f9;
}
.rep-btn-csv[b-693qfyc8g9] {
    background: var(--color-warning);
    color: #ffffff;
}
.rep-btn-csv:hover[b-693qfyc8g9] {
    background: var(--color-warning-dark);
}
.rep-btn-csv:disabled[b-693qfyc8g9] {
    background: #94a3b8;
    cursor: not-allowed;
}

/* ---- LOADING OVERLAY ---- */
.reportes-loading-overlay[b-693qfyc8g9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.reportes-loading-box[b-693qfyc8g9] {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.reportes-spinner[b-693qfyc8g9] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: rep-spin 0.8s linear infinite;
}
@@keyframes rep-spin {
    to[b-693qfyc8g9] { transform: rotate(360deg); }
}
.reportes-loading-box p[b-693qfyc8g9] {
    margin: 0;
    color: #475569;
    font-size: 0.9rem;
}

/* ---- EMPTY STATE ---- */
.reportes-empty[b-693qfyc8g9] {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
}
.reportes-empty svg[b-693qfyc8g9] {
    width: 48px;
    height: 48px;
    margin-bottom: 0.75rem;
}
.reportes-empty p[b-693qfyc8g9] {
    margin: 0;
    font-size: 0.9rem;
}

/* ---- RESPONSIVE ---- */
@@media (max-width: 768px) {
    .reportes-grid[b-693qfyc8g9] {
        grid-template-columns: 1fr;
    }
    .config-form-row[b-693qfyc8g9] {
        grid-template-columns: 1fr;
    }
    .config-footer[b-693qfyc8g9] {
        flex-direction: column;
    }
    .config-footer .rep-btn[b-693qfyc8g9] {
        width: 100%;
        justify-content: center;
    }
    .reportes-header[b-693qfyc8g9] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Private/ReportesTesoreria.razor.rz.scp.css */
/* ============================================
   REPORTES DE TESORERIA - I.E.P. Javier Perez de Cuellar
   Estilos de la pagina de reportes financieros
   ============================================ */

/* ============================================
   MONTH SELECTOR (same as contabilidad)
   ============================================ */
.month-selector[b-citnjrwf7b] {
    display: flex;
    gap: 0.5rem;
}

.month-selector select[b-citnjrwf7b] {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
}

.month-selector select:focus[b-citnjrwf7b] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   BALANCE COLORS
   ============================================ */
.balance-positive[b-citnjrwf7b] {
    color: var(--color-success) !important;
}

.balance-negative[b-citnjrwf7b] {
    color: var(--color-error) !important;
}

/* ============================================
   STATS GRID OVERRIDE (4 columns for reports)
   ============================================ */
.reportes-stats-grid[b-citnjrwf7b] {
    grid-template-columns: repeat(4, 1fr);
}

.reportes-stat-inner[b-citnjrwf7b] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

/* Orange accent (for morosidad card) */
.accent-orange[b-citnjrwf7b]::before {
    background: var(--color-highlight);
}

.accent-orange .stat-accent-icon[b-citnjrwf7b] {
    background: rgba(245, 166, 35, 0.15);
    color: var(--color-highlight);
}

/* ============================================
   SECTION TITLES
   ============================================ */
.reportes-section-title[b-citnjrwf7b] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.reportes-section-title svg[b-citnjrwf7b] {
    color: var(--color-primary);
}

.reportes-section-title h2[b-citnjrwf7b] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

/* ============================================
   PANEL (white card container)
   ============================================ */
.reportes-panel[b-citnjrwf7b] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

/* ============================================
   CHART LEGEND
   ============================================ */
.reportes-chart-legend[b-citnjrwf7b] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    justify-content: flex-end;
}

.reportes-legend-item[b-citnjrwf7b] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #6b7280;
}

.reportes-legend-dot[b-citnjrwf7b] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.legend-income[b-citnjrwf7b] {
    background: var(--color-success);
}

.legend-expense[b-citnjrwf7b] {
    background: var(--color-error);
}

/* ============================================
   CSS BAR CHART
   ============================================ */
.reportes-chart-container[b-citnjrwf7b] {
    display: flex;
    align-items: flex-end;
    gap: 0;
    height: 280px;
    padding: 0 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    border-left: 2px solid #e5e7eb;
    position: relative;
}

.reportes-chart-group[b-citnjrwf7b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.reportes-chart-bars[b-citnjrwf7b] {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 100%;
    width: 100%;
    justify-content: center;
    padding: 0 2px;
}

.reportes-chart-bar-wrapper[b-citnjrwf7b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    flex: 1;
    max-width: 28px;
    position: relative;
}

.reportes-chart-bar[b-citnjrwf7b] {
    width: 100%;
    min-height: 0;
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
}

.bar-income[b-citnjrwf7b] {
    background: var(--color-success);
}

.bar-income:hover[b-citnjrwf7b] {
    background: var(--color-success-dark);
}

.bar-expense[b-citnjrwf7b] {
    background: var(--color-error);
}

.bar-expense:hover[b-citnjrwf7b] {
    background: var(--color-error-dark);
}

.reportes-bar-tooltip[b-citnjrwf7b] {
    display: none;
    position: absolute;
    top: -8px;
    transform: translateY(-100%);
    background: #1f2937;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

.reportes-chart-bar-wrapper:hover .reportes-bar-tooltip[b-citnjrwf7b] {
    display: block;
}

.reportes-chart-label[b-citnjrwf7b] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Chart Y-axis scale */
.reportes-chart-scale[b-citnjrwf7b] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    height: 280px;
    margin-top: -300px;
    margin-left: -3rem;
    pointer-events: none;
    padding-bottom: 20px;
}

.reportes-chart-scale span[b-citnjrwf7b] {
    font-size: 0.65rem;
    color: #9ca3af;
    text-align: right;
    padding-right: 0.35rem;
    white-space: nowrap;
}

/* ============================================
   COLLECTION TABLE
   ============================================ */
.reportes-table-wrap[b-citnjrwf7b] {
    overflow-x: auto;
}

.reportes-table[b-citnjrwf7b] {
    width: 100%;
    border-collapse: collapse;
}

.reportes-table th[b-citnjrwf7b],
.reportes-table td[b-citnjrwf7b] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.reportes-table th[b-citnjrwf7b] {
    background: #f9fafb;
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.reportes-table tbody tr:hover[b-citnjrwf7b] {
    background: #f9fafb;
}

.reportes-month-cell[b-citnjrwf7b] {
    font-weight: 500;
    color: #1f2937;
}

.reportes-amount[b-citnjrwf7b] {
    font-family: monospace;
    font-size: 0.875rem;
    font-weight: 500;
}

.reportes-discount[b-citnjrwf7b] {
    color: #6b7280;
}

.reportes-paid[b-citnjrwf7b] {
    color: var(--color-success);
    font-weight: 600;
}

.reportes-pending[b-citnjrwf7b] {
    color: var(--color-error);
    font-weight: 600;
}

.reportes-pct[b-citnjrwf7b] {
    text-align: center;
}

.reportes-pct-value[b-citnjrwf7b] {
    font-weight: 700;
    font-size: 0.875rem;
}

.pct-high[b-citnjrwf7b] {
    color: var(--color-success);
}

.pct-medium[b-citnjrwf7b] {
    color: var(--color-highlight);
}

.pct-low[b-citnjrwf7b] {
    color: var(--color-error);
}

.reportes-empty[b-citnjrwf7b] {
    text-align: center;
    padding: 2rem !important;
    color: #9ca3af;
    font-style: italic;
}

/* ============================================
   PROGRESS BARS (in table)
   ============================================ */
.reportes-progress-bar[b-citnjrwf7b] {
    width: 100%;
    min-width: 100px;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.reportes-progress-fill[b-citnjrwf7b] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-high[b-citnjrwf7b] {
    background: var(--color-success);
}

.progress-medium[b-citnjrwf7b] {
    background: var(--color-highlight);
}

.progress-low[b-citnjrwf7b] {
    background: var(--color-error);
}

/* ============================================
   TOTAL ROW
   ============================================ */
.reportes-total-row[b-citnjrwf7b] {
    background: #f0f7ff !important;
}

.reportes-total-row td[b-citnjrwf7b] {
    font-weight: 700 !important;
    color: #1f2937;
    border-top: 2px solid var(--color-primary);
    border-bottom: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .reportes-stats-grid[b-citnjrwf7b] {
        grid-template-columns: repeat(2, 1fr);
    }

    .reportes-chart-container[b-citnjrwf7b] {
        height: 220px;
    }

    .reportes-chart-scale[b-citnjrwf7b] {
        height: 220px;
        margin-top: -240px;
    }

    .reportes-chart-bar-wrapper[b-citnjrwf7b] {
        max-width: 22px;
    }
}

@media (max-width: 768px) {
    .reportes-stats-grid[b-citnjrwf7b] {
        grid-template-columns: 1fr;
    }

    .reportes-panel[b-citnjrwf7b] {
        padding: 1rem;
    }

    .reportes-chart-container[b-citnjrwf7b] {
        height: 180px;
        padding: 0 0.25rem;
    }

    .reportes-chart-scale[b-citnjrwf7b] {
        height: 180px;
        margin-top: -200px;
        margin-left: -2.5rem;
    }

    .reportes-chart-scale span[b-citnjrwf7b] {
        font-size: 0.6rem;
    }

    .reportes-chart-bar-wrapper[b-citnjrwf7b] {
        max-width: 16px;
    }

    .reportes-chart-bars[b-citnjrwf7b] {
        gap: 2px;
    }

    .reportes-chart-label[b-citnjrwf7b] {
        font-size: 0.65rem;
    }

    .reportes-chart-legend[b-citnjrwf7b] {
        justify-content: center;
    }

    .month-selector[b-citnjrwf7b] {
        flex-wrap: wrap;
    }

    .reportes-section-title h2[b-citnjrwf7b] {
        font-size: 1rem;
    }

    .reportes-table th[b-citnjrwf7b],
    .reportes-table td[b-citnjrwf7b] {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .reportes-progress-bar[b-citnjrwf7b] {
        min-width: 60px;
    }
}

/* ============================================
   CATEGORY CHARTS
   ============================================ */
.reportes-category-list[b-citnjrwf7b] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reportes-category-row[b-citnjrwf7b] {
    display: grid;
    grid-template-columns: 180px 1fr 120px;
    align-items: center;
    gap: 1rem;
}

.reportes-category-info[b-citnjrwf7b] {
    display: flex;
    flex-direction: column;
}

.reportes-category-name[b-citnjrwf7b] {
    font-size: 0.88rem;
    font-weight: 500;
    color: #1e293b;
}

.reportes-category-count[b-citnjrwf7b] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.reportes-category-bar-wrap[b-citnjrwf7b] {
    height: 22px;
    background: #f1f5f9;
    border-radius: 11px;
    overflow: hidden;
}

.reportes-category-bar[b-citnjrwf7b] {
    height: 100%;
    border-radius: 11px;
    transition: width 0.6s ease;
    min-width: 4px;
}

.reportes-category-bar.bar-income[b-citnjrwf7b] {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.reportes-category-bar.bar-expense[b-citnjrwf7b] {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.reportes-category-amount[b-citnjrwf7b] {
    font-size: 0.88rem;
    font-weight: 600;
    text-align: right;
}

@media (max-width: 768px) {
    .reportes-category-row[b-citnjrwf7b] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .reportes-category-amount[b-citnjrwf7b] {
        text-align: left;
    }
}
/* /Pages/Private/Students.razor.rz.scp.css */
/* ============================================
   STUDENTS PAGE — CSS Isolation
   Selectores especificos de pagina.
   Base: components.css (modal, table, form, spinner, etc.)
   ============================================ */

.page-container[b-245bvyf7ti] {
    max-width: 1400px;
    margin: 0 auto;
}

/* ID Badge */
.id-badge[b-245bvyf7ti] {
    background: var(--bg-gray);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-gray);
}

/* User cell with avatar */
.user-cell[b-245bvyf7ti] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar[b-245bvyf7ti] {
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: var(--text-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Gender badges */
.gender-badge[b-245bvyf7ti] {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    font-size: 0.8rem;
    font-weight: 500;
}

.gender-badge.male[b-245bvyf7ti] {
    background: #dbeafe;
    color: #1e40af;
}

.gender-badge.female[b-245bvyf7ti] {
    background: #fce7f3;
    color: #be185d;
}

/* Action buttons */
.action-buttons[b-245bvyf7ti] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-245bvyf7ti] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-icon svg[b-245bvyf7ti] { width: 16px; height: 16px; }

.btn-view[b-245bvyf7ti] {
    background: #dbeafe;
    color: #1e40af;
}
.btn-view:hover[b-245bvyf7ti] { background: #bfdbfe; }

.btn-edit[b-245bvyf7ti] {
    background: #fef3c7;
    color: #b45309;
}
.btn-edit:hover[b-245bvyf7ti] { background: #fde68a; }

.btn-delete[b-245bvyf7ti] {
    background: #fee2e2;
    color: var(--color-error-dark);
}
.btn-delete:hover[b-245bvyf7ti] { background: #fecaca; }

/* Modal override — más pequeño que default */
.modal-content[b-245bvyf7ti] {
    max-width: 400px;
}

/* Warning text in modal */
.warning-text[b-245bvyf7ti] {
    color: var(--color-error-dark) !important;
    font-size: 0.9rem;
}
/* /Pages/Private/Tablon.razor.rz.scp.css */
/* ============================================
   TABLON - I.E.P. Javier Perez de Cuellar
   CSS Isolation — red social interna
   Estetica FUN: warm backgrounds, Poppins,
   pill buttons, hover calidos, emojis,
   reacciones juguetonas, cards con personalidad
   ============================================ */

/* ============================================
   LAYOUT 3 COLUMNAS
   ============================================ */
.tablon-layout[b-qq6tcd6jh3] {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    gap: 1.5rem;
}

.tablon-layout > .page-header[b-qq6tcd6jh3] {
    grid-column: 1 / -1;
}

.left-column[b-qq6tcd6jh3],
.right-column[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.center-column[b-qq6tcd6jh3] {
    min-width: 0;
}

/* ============================================
   CARD BASE — estilo FUN calido
   ============================================ */
[b-qq6tcd6jh3] .card {
    background: white;
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 2px 12px rgba(0, 40, 77, 0.06);
    border: 1px solid rgba(0, 85, 163, 0.06);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
}

.widget-card[b-qq6tcd6jh3] {
    border-top: 3px solid var(--color-secondary);
}

/* ============================================
   PERFIL CARD — header con gradiente FUN
   ============================================ */
.profile-card[b-qq6tcd6jh3] {
    text-align: center;
    overflow: hidden;
    padding: 0 !important;
}

.profile-header-bg[b-qq6tcd6jh3] {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-light, #337AB8) 100%);
    height: 80px;
    position: relative;
    overflow: hidden;
}

.profile-doodle[b-qq6tcd6jh3] {
    position: absolute;
    font-size: 1rem;
    opacity: 0.3;
    animation: doodle-float-b-qq6tcd6jh3 4s ease-in-out infinite;
}

.profile-doodle.d1[b-qq6tcd6jh3] { top: 12px; left: 15%; animation-delay: 0s; }
.profile-doodle.d2[b-qq6tcd6jh3] { top: 20px; right: 20%; animation-delay: 0.8s; }
.profile-doodle.d3[b-qq6tcd6jh3] { bottom: 10px; left: 50%; animation-delay: 1.6s; }

@keyframes doodle-float-b-qq6tcd6jh3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.profile-header[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -40px;
    padding: 0 1.25rem 1.25rem;
    position: relative;
}

.profile-logo[b-qq6tcd6jh3] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: contain;
    background: white;
    padding: 6px;
    box-shadow: 0 4px 15px rgba(0, 40, 77, 0.15);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.profile-logo:hover[b-qq6tcd6jh3] {
    transform: rotate(-5deg) scale(1.08);
}

.school-name[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 0.5rem;
}

.school-motto[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0.15rem 0 0;
}

/* ============================================
   WIDGET EMOJI ICON
   ============================================ */
.widget-emoji[b-qq6tcd6jh3] {
    font-size: 0.9rem;
    margin-right: 0.25rem;
}

/* ============================================
   USUARIOS ONLINE
   ============================================ */
.users-online-list[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.user-online-item[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.user-online-item:hover[b-qq6tcd6jh3] {
    background: var(--bg-fun-cream, #fffdf7);
}

.user-online-avatar[b-qq6tcd6jh3] {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-sky, #58B4FF));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
}

.user-online-info[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
}

.user-online-name[b-qq6tcd6jh3] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-dark);
}

.user-online-role[b-qq6tcd6jh3] {
    font-size: 0.65rem;
    padding: 0.1rem 0.5rem;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
    background: var(--bg-highlight-subtle);
    color: var(--color-secondary-dark);
    font-weight: 500;
}

.no-users[b-qq6tcd6jh3] {
    color: #9ca3af;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.75rem 0;
    font-style: italic;
}

/* ============================================
   CALENDAR WIDGET — dia grande con circulo
   ============================================ */
.calendar-widget[b-qq6tcd6jh3] {
    background: white;
    border-top: 3px solid var(--color-primary);
}

.calendar-header[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.calendar-day-circle[b-qq6tcd6jh3] {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light, #337AB8));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.calendar-day[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.calendar-date-info[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.calendar-weekday[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: capitalize;
    font-size: 0.95rem;
}

.calendar-month[b-qq6tcd6jh3] {
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: capitalize;
}

.btn-add-event[b-qq6tcd6jh3] {
    width: 34px;
    height: 34px;
    background: var(--color-secondary);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 3px 10px rgba(245, 166, 35, 0.3);
}

.btn-add-event:hover[b-qq6tcd6jh3] {
    background: var(--color-secondary-dark);
    transform: scale(1.12) rotate(90deg);
    box-shadow: 0 4px 14px rgba(245, 166, 35, 0.4);
}

.btn-add-event svg[b-qq6tcd6jh3] {
    width: 18px;
    height: 18px;
}

.calendar-events[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.no-events-fun[b-qq6tcd6jh3] {
    text-align: center;
    padding: 0.5rem 0;
}

.no-events-emoji[b-qq6tcd6jh3] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.25rem;
    opacity: 0.5;
}

.no-events[b-qq6tcd6jh3] {
    color: #9ca3af;
    font-size: 0.85rem;
    text-align: center;
    margin: 0;
    font-style: italic;
}

.event-item[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-fun-cream, #fffdf7);
    border-radius: 12px;
    border-left: 3px solid var(--color-secondary);
    transition: all 0.2s ease;
}

.event-item:hover[b-qq6tcd6jh3] {
    background: var(--bg-highlight-subtle);
    transform: translateX(3px);
}

.event-time[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
    min-width: 45px;
}

.event-title[b-qq6tcd6jh3] {
    font-size: 0.85rem;
    color: #374151;
    font-weight: 500;
}

/* ============================================
   BIRTHDAY WIDGET — toque FUN con emojis
   ============================================ */
.birthday-widget[b-qq6tcd6jh3] {
    border-top: 3px solid #f472b6;
    overflow: hidden;
}

.birthday-widget .birthday-content[b-qq6tcd6jh3] {
    text-align: center;
    padding: 0.5rem 0;
}

.birthday-fun-header[b-qq6tcd6jh3] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.bday-emoji[b-qq6tcd6jh3] {
    font-size: 1.8rem;
    display: inline-block;
    animation: bday-bounce-b-qq6tcd6jh3 2s ease-in-out infinite;
}

.bday-emoji.bday-1[b-qq6tcd6jh3] { animation-delay: 0s; }
.bday-emoji.bday-2[b-qq6tcd6jh3] { animation-delay: 0.3s; }
.bday-emoji.bday-3[b-qq6tcd6jh3] { animation-delay: 0.6s; }

@keyframes bday-bounce-b-qq6tcd6jh3 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(-5deg); }
    75% { transform: translateY(-3px) rotate(5deg); }
}

.birthday-widget .birthday-title[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-dark);
    margin: 0 0 0.25rem;
}

.birthday-widget .birthday-count[b-qq6tcd6jh3] {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.birthday-widget .birthday-count strong[b-qq6tcd6jh3] {
    color: #ec4899;
    font-size: 1.1rem;
}

.btn-see-all[b-qq6tcd6jh3] {
    background: none;
    border: 2px solid #f472b6;
    color: #ec4899;
    padding: 0.45rem 1.25rem;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-see-all:hover[b-qq6tcd6jh3] {
    background: #ec4899;
    color: white;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3);
}

/* ============================================
   CONTABILIDAD CHART
   ============================================ */
.chart-legend[b-qq6tcd6jh3] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.legend-item[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-light);
}

.legend-color[b-qq6tcd6jh3] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-color.egresos[b-qq6tcd6jh3] {
    background: #f97316;
}

.legend-color.ingresos[b-qq6tcd6jh3] {
    background: var(--color-success);
}

.mini-chart[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-bar[b-qq6tcd6jh3] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    height: 80px;
}

.chart-bar .bar[b-qq6tcd6jh3] {
    width: 30px;
    border-radius: 8px 8px 0 0;
    transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chart-bar .bar.egresos[b-qq6tcd6jh3] {
    background: linear-gradient(to top, #fb923c, #f97316);
}

.chart-bar .bar.ingresos[b-qq6tcd6jh3] {
    background: linear-gradient(to top, #4ade80, var(--color-success));
}

.chart-labels[b-qq6tcd6jh3] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
}

/* ============================================
   SOCIAL LINKS — con bounce FUN
   ============================================ */
.social-links[b-qq6tcd6jh3] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.25rem 1.25rem;
}

.social-btn[b-qq6tcd6jh3] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: socialFloat-b-qq6tcd6jh3 3s ease-in-out infinite;
}

.social-btn:nth-child(2)[b-qq6tcd6jh3] { animation-delay: 0.2s; }
.social-btn:nth-child(3)[b-qq6tcd6jh3] { animation-delay: 0.4s; }
.social-btn:nth-child(4)[b-qq6tcd6jh3] { animation-delay: 0.6s; }

@keyframes socialFloat-b-qq6tcd6jh3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.social-btn:hover[b-qq6tcd6jh3] {
    transform: scale(1.15) rotate(-5deg) !important;
    animation: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.social-btn svg[b-qq6tcd6jh3] {
    width: 18px;
    height: 18px;
}

.social-btn.facebook[b-qq6tcd6jh3] { background: #1877f2; color: white; }
.social-btn.twitter[b-qq6tcd6jh3] { background: #1da1f2; color: white; }
.social-btn.youtube[b-qq6tcd6jh3] { background: #ff0000; color: white; }
.social-btn.instagram[b-qq6tcd6jh3] { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); color: white; }

/* ============================================
   CARD HEADER STYLES
   ============================================ */
.card-header-line[b-qq6tcd6jh3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.card-title[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
}

.card-header-line .card-title[b-qq6tcd6jh3] {
    margin: 0;
}

.online-indicator[b-qq6tcd6jh3] {
    width: 10px;
    height: 10px;
    background: var(--color-success);
    border-radius: 50%;
    animation: pulse-glow-b-qq6tcd6jh3 2s infinite;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
}

@keyframes pulse-glow-b-qq6tcd6jh3 {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ============================================
   REACTION BUTTONS — FUN con bounce
   ============================================ */
.reaction-btn[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-btn:hover[b-qq6tcd6jh3] {
    background: var(--bg-highlight-subtle);
    color: var(--color-secondary-dark);
    transform: scale(1.08);
}

.reaction-btn.liked[b-qq6tcd6jh3] {
    color: #ec4899;
    background: rgba(236, 72, 153, 0.08);
}

.reaction-btn.liked:hover[b-qq6tcd6jh3] {
    background: rgba(236, 72, 153, 0.15);
}

.reaction-btn.active[b-qq6tcd6jh3] {
    color: var(--color-primary);
    background: var(--bg-primary-subtle);
    font-weight: 600;
}

.reaction-btn svg[b-qq6tcd6jh3] {
    width: 18px;
    height: 18px;
}

/* ============================================
   LOADING STATES
   ============================================ */
.loading-card[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.loading-spinner[b-qq6tcd6jh3] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 85, 163, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-qq6tcd6jh3 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-qq6tcd6jh3 {
    to { transform: rotate(360deg); }
}

.loading-card p[b-qq6tcd6jh3] {
    color: var(--text-light);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

/* ============================================
   EMPTY FEED — FUN con emoji
   ============================================ */
.empty-feed[b-qq6tcd6jh3] {
    text-align: center;
    padding: 2.5rem 1.5rem !important;
}

.empty-feed-emoji[b-qq6tcd6jh3] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

.empty-feed-title[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.25rem;
}

.empty-feed-desc[b-qq6tcd6jh3] {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

/* ============================================
   CREAR POST — area calida FUN
   ============================================ */
.create-post[b-qq6tcd6jh3] {
    margin-bottom: 1.5rem;
    border-top: 3px solid var(--color-secondary);
}

.post-input-wrapper[b-qq6tcd6jh3] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.post-avatar[b-qq6tcd6jh3],
.author-avatar[b-qq6tcd6jh3] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-sky, #58B4FF));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
}

.post-input-area[b-qq6tcd6jh3] {
    flex: 1;
}

.post-input-area textarea[b-qq6tcd6jh3] {
    width: 100%;
    border: none;
    resize: none;
    font-size: 0.95rem;
    color: #374151;
    outline: none;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
}

.post-input-area textarea[b-qq6tcd6jh3]::placeholder {
    color: #b0b8c4;
}

.post-attachments[b-qq6tcd6jh3] {
    margin-top: 0.5rem;
}

label.attach-btn[b-qq6tcd6jh3],
.attach-btn[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s;
}

.attach-btn:hover[b-qq6tcd6jh3] {
    color: var(--color-secondary);
}

.attach-btn svg[b-qq6tcd6jh3] {
    width: 18px;
    height: 18px;
}

.post-actions[b-qq6tcd6jh3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 85, 163, 0.06);
}

.post-tools[b-qq6tcd6jh3] {
    display: flex;
    gap: 0.5rem;
}

.btn-publish[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
    color: white;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 3px 12px rgba(245, 166, 35, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-publish[b-qq6tcd6jh3]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: none;
}

.btn-publish:hover:not(:disabled)[b-qq6tcd6jh3] {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 20px rgba(245, 166, 35, 0.4);
}

.btn-publish:hover:not(:disabled)[b-qq6tcd6jh3]::before {
    animation: btn-shimmer-b-qq6tcd6jh3 0.6s ease forwards;
}

@keyframes btn-shimmer-b-qq6tcd6jh3 {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.btn-publish:disabled[b-qq6tcd6jh3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-publish svg[b-qq6tcd6jh3] {
    width: 18px;
    height: 18px;
}

/* ============================================
   POST CARDS — hover calido FUN
   ============================================ */
.post-card[b-qq6tcd6jh3] {
    margin-bottom: 1rem;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
}

.post-card:hover[b-qq6tcd6jh3] {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 85, 163, 0.08);
}

.post-header[b-qq6tcd6jh3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.post-author[b-qq6tcd6jh3] {
    display: flex;
    gap: 0.75rem;
}

.author-info[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
}

.author-name[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--text-dark);
}

.post-date[b-qq6tcd6jh3] {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 500;
}

.post-menu[b-qq6tcd6jh3] {
    display: flex;
    gap: 0.25rem;
}

.post-content p[b-qq6tcd6jh3] {
    color: #374151;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.post-image[b-qq6tcd6jh3] {
    width: 100%;
    border-radius: 14px;
    margin-top: 0.5rem;
}

.post-footer[b-qq6tcd6jh3] {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 85, 163, 0.06);
}

.empty-feed[b-qq6tcd6jh3] {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}

/* ============================================
   ATTACH BUTTON CON ARCHIVO
   ============================================ */
.attach-btn.has-file[b-qq6tcd6jh3] {
    background: var(--bg-primary-subtle);
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
}

.attach-btn .remove-file[b-qq6tcd6jh3],
.attached-file-preview .remove-file[b-qq6tcd6jh3] {
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
}

.attached-file-preview[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-fun-cream, #fffdf7);
    border: 1px solid rgba(245, 166, 35, 0.15);
    border-radius: 12px;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #374151;
}

/* ============================================
   TOOL BUTTONS — circulares FUN
   ============================================ */
label.tool-btn[b-qq6tcd6jh3],
.tool-btn[b-qq6tcd6jh3] {
    width: 38px;
    height: 38px;
    background: var(--bg-fun-cream, #fffdf7);
    border: 1px solid rgba(0, 85, 163, 0.08);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.tool-btn:hover[b-qq6tcd6jh3] {
    background: var(--bg-highlight-subtle);
    color: var(--color-secondary);
    transform: scale(1.12) rotate(-5deg);
    border-color: rgba(245, 166, 35, 0.2);
}

.tool-btn.active[b-qq6tcd6jh3] {
    background: var(--color-secondary);
    color: white;
    border-color: var(--color-secondary);
}

.tool-btn svg[b-qq6tcd6jh3] {
    width: 18px;
    height: 18px;
}

.tool-btn .file-indicator[b-qq6tcd6jh3] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-error);
    color: white;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ============================================
   VIDEO INPUT
   ============================================ */
.video-input-container[b-qq6tcd6jh3] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-fun-cream, #fffdf7);
    border-radius: 14px;
    border: 1px solid rgba(0, 85, 163, 0.06);
}

.video-url-input[b-qq6tcd6jh3] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 0.9rem;
}

.video-url-input:focus[b-qq6tcd6jh3] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.btn-add-video[b-qq6tcd6jh3],
.btn-cancel-video[b-qq6tcd6jh3] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.btn-add-video[b-qq6tcd6jh3] {
    background: var(--color-primary);
    color: white;
}

.btn-add-video:disabled[b-qq6tcd6jh3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel-video[b-qq6tcd6jh3] {
    background: #e5e7eb;
    color: #374151;
}

/* ============================================
   POST DROPDOWN MENU
   ============================================ */
.post-menu[b-qq6tcd6jh3] {
    position: relative;
}

.menu-btn[b-qq6tcd6jh3],
.flag-btn[b-qq6tcd6jh3] {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0b8c4;
    transition: all 0.2s ease;
}

.menu-btn:hover[b-qq6tcd6jh3],
.flag-btn:hover[b-qq6tcd6jh3] {
    background: var(--bg-fun-cream, #fffdf7);
    color: var(--text-dark);
}

.menu-btn svg[b-qq6tcd6jh3],
.flag-btn svg[b-qq6tcd6jh3] {
    width: 18px;
    height: 18px;
}

.post-dropdown-menu[b-qq6tcd6jh3] {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 40, 77, 0.12);
    min-width: 170px;
    z-index: 100;
    overflow: hidden;
    border: 1px solid rgba(0, 85, 163, 0.06);
}

.post-dropdown-menu button[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
}

.post-dropdown-menu button:hover[b-qq6tcd6jh3] {
    background: var(--bg-fun-cream, #fffdf7);
    padding-left: 1.25rem;
}

.post-dropdown-menu button svg[b-qq6tcd6jh3] {
    width: 16px;
    height: 16px;
    color: var(--text-light);
}

/* ============================================
   COMMENTS SECTION — calida FUN
   ============================================ */
.comments-section[b-qq6tcd6jh3] {
    padding: 0.75rem 0 0;
    margin-top: 0.75rem;
    border-top: 1px solid rgba(0, 85, 163, 0.06);
}

.comments-loading[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-light);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.spinner-small[b-qq6tcd6jh3] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 85, 163, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-qq6tcd6jh3 0.8s linear infinite;
}

.no-comments[b-qq6tcd6jh3] {
    color: #b0b8c4;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.75rem 0;
    font-style: italic;
}

.comment-item[b-qq6tcd6jh3] {
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0;
}

.comment-avatar[b-qq6tcd6jh3] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
}

.comment-body[b-qq6tcd6jh3] {
    flex: 1;
    background: var(--bg-fun-cream, #fffdf7);
    padding: 0.5rem 0.85rem;
    border-radius: 16px;
    border: 1px solid rgba(0, 85, 163, 0.04);
}

.comment-author[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-dark);
}

.comment-date[b-qq6tcd6jh3] {
    font-size: 0.7rem;
    color: #b0b8c4;
    margin-left: 0.5rem;
}

.comment-text[b-qq6tcd6jh3] {
    font-size: 0.88rem;
    color: #374151;
    margin: 0.2rem 0 0;
    line-height: 1.5;
}

.add-comment[b-qq6tcd6jh3] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.comment-input[b-qq6tcd6jh3] {
    flex: 1;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border-light);
    border-radius: 50px;
    font-size: 0.88rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.comment-input:focus[b-qq6tcd6jh3] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

.btn-send-comment[b-qq6tcd6jh3] {
    width: 36px;
    height: 36px;
    background: var(--color-secondary);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.25);
}

.btn-send-comment:hover:not(:disabled)[b-qq6tcd6jh3] {
    background: var(--color-secondary-dark);
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35);
}

.btn-send-comment:disabled[b-qq6tcd6jh3] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-send-comment svg[b-qq6tcd6jh3] {
    width: 16px;
    height: 16px;
}

/* ============================================
   MODAL CLOSE
   ============================================ */
.modal-close[b-qq6tcd6jh3] {
    width: 32px;
    height: 32px;
    background: var(--bg-fun-cream, #fffdf7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-close:hover[b-qq6tcd6jh3] {
    background: var(--color-error);
    color: white;
    transform: rotate(90deg) scale(1.1);
}

/* ============================================
   REPORT OPTIONS
   ============================================ */
.report-options[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1rem 0;
}

.report-option[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-option:hover[b-qq6tcd6jh3] {
    border-color: var(--color-primary);
    background: var(--bg-primary-faint);
}

.report-option input[type="radio"][b-qq6tcd6jh3] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.report-description[b-qq6tcd6jh3] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    resize: vertical;
}

.report-description:focus[b-qq6tcd6jh3] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-primary-subtle);
}

/* ============================================
   BIRTHDAY MODAL — tabla FUN
   ============================================ */
.birthday-list[b-qq6tcd6jh3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.birthday-item[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-fun-cream, #fffdf7);
    border-radius: 14px;
    border: 1px solid rgba(236, 72, 153, 0.1);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.birthday-item:hover[b-qq6tcd6jh3] {
    transform: translateX(4px);
}

.birthday-avatar[b-qq6tcd6jh3] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f472b6, #ec4899);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}

.birthday-info[b-qq6tcd6jh3] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.birthday-name[b-qq6tcd6jh3] {
    font-weight: 600;
    color: var(--text-dark);
}

.birthday-date[b-qq6tcd6jh3] {
    font-size: 0.85rem;
    color: var(--text-light);
}

.birthday-type[b-qq6tcd6jh3] {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
    background: #e5e7eb;
    color: #374151;
    font-weight: 600;
}

.birthday-type.badge-estudiante[b-qq6tcd6jh3] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

.birthday-type.badge-docente[b-qq6tcd6jh3] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

/* Birthday Table */
.birthday-table-wrapper[b-qq6tcd6jh3] {
    overflow-x: auto;
    margin-top: 0.75rem;
}

.birthday-table[b-qq6tcd6jh3] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.35rem;
}

.birthday-table thead[b-qq6tcd6jh3] {
    background: none;
}

.birthday-table th[b-qq6tcd6jh3] {
    padding: 0.6rem 1rem;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-light);
}

.birthday-table tbody tr[b-qq6tcd6jh3] {
    background: white;
    transition: all 0.2s ease;
    border-radius: 12px;
}

.birthday-table tbody tr:hover[b-qq6tcd6jh3] {
    background-color: var(--bg-fun-cream, #fffdf7);
    transform: translateX(3px);
}

.birthday-table td[b-qq6tcd6jh3] {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: #374151;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 85, 163, 0.04);
}

.birthday-table .birthday-avatar[b-qq6tcd6jh3] {
    margin: 0;
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
}

.birthday-table .birthday-name[b-qq6tcd6jh3] {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
}

.birthday-table .birthday-date[b-qq6tcd6jh3] {
    display: block;
    font-size: 0.85rem;
    color: var(--text-light);
}

.birthday-table .birthday-grade[b-qq6tcd6jh3] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.85rem;
}

.loading-center[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-light);
}

.no-data[b-qq6tcd6jh3] {
    text-align: center;
    color: #b0b8c4;
    padding: 2rem;
    font-style: italic;
}

/* ============================================
   VIDEO EMBED
   ============================================ */
.video-embed[b-qq6tcd6jh3] {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    margin: 0.75rem 0;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
}

.video-embed iframe[b-qq6tcd6jh3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 14px;
}

/* ============================================
   FILE ATTACHMENT — calido
   ============================================ */
.file-attachment[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background: var(--bg-fun-cream, #fffdf7);
    border: 1px solid rgba(245, 166, 35, 0.15);
    border-radius: 12px;
}

.file-attachment svg[b-qq6tcd6jh3] {
    flex-shrink: 0;
    color: var(--color-secondary);
}

.file-attachment span[b-qq6tcd6jh3] {
    flex: 1;
    font-size: 0.88rem;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-download-btn[b-qq6tcd6jh3] {
    font-size: 0.8rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    background: var(--bg-primary-subtle);
    transition: all 0.2s;
}

.file-download-btn:hover[b-qq6tcd6jh3] {
    background: var(--color-primary);
    color: white;
}

/* ============================================
   URL PREVIEW CARD — calido
   ============================================ */
.url-preview-card[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background: var(--bg-fun-cream, #fffdf7);
    border: 1px solid rgba(0, 85, 163, 0.08);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}

.url-preview-card:hover[b-qq6tcd6jh3] {
    border-color: var(--color-primary);
    background: var(--bg-primary-faint);
    transform: translateX(3px);
}

.url-preview-icon[b-qq6tcd6jh3] {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: var(--bg-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.url-preview-info[b-qq6tcd6jh3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.url-preview-domain[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.url-preview-path[b-qq6tcd6jh3] {
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.url-preview-arrow[b-qq6tcd6jh3] {
    flex-shrink: 0;
    color: #b0b8c4;
    transition: all 0.2s;
}

.url-preview-card:hover .url-preview-arrow[b-qq6tcd6jh3] {
    color: var(--color-primary);
    transform: translateX(3px);
}

/* ============================================
   IMAGE PREVIEW (antes de publicar)
   ============================================ */
.image-preview-container[b-qq6tcd6jh3] {
    position: relative;
    margin-top: 0.5rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.image-preview[b-qq6tcd6jh3] {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    display: block;
}

.remove-preview[b-qq6tcd6jh3] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-preview:hover[b-qq6tcd6jh3] {
    background: var(--color-error);
    transform: scale(1.1);
}

/* ============================================
   DELETE POST CONFIRM — pill buttons
   ============================================ */
.delete-confirm-bar[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    background: var(--bg-error-subtle);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 14px;
    font-size: 0.88rem;
    color: #991b1b;
}

.delete-confirm-bar span[b-qq6tcd6jh3] {
    flex: 1;
    font-weight: 600;
}

.btn-confirm-delete[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 1rem;
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-confirm-delete:hover[b-qq6tcd6jh3] {
    background: var(--color-error-dark);
    transform: translateY(-1px);
}

.btn-confirm-delete:disabled[b-qq6tcd6jh3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel-delete[b-qq6tcd6jh3] {
    padding: 0.4rem 1rem;
    background: transparent;
    color: var(--text-light);
    border: 1px solid #d1d5db;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel-delete:hover[b-qq6tcd6jh3] {
    background: white;
    border-color: #9ca3af;
}

/* ============================================
   DELETE MENU ITEM & COMMENT DELETE
   ============================================ */
.menu-delete[b-qq6tcd6jh3] {
    color: var(--color-error) !important;
}

.menu-delete:hover[b-qq6tcd6jh3] {
    background: var(--bg-error-subtle) !important;
}

.comment-header-line[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-delete-comment[b-qq6tcd6jh3] {
    background: transparent;
    border: none;
    color: #b0b8c4;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    margin-left: auto;
    transition: all 0.2s;
}

.btn-delete-comment:hover[b-qq6tcd6jh3] {
    color: var(--color-error);
    background: var(--bg-error-subtle);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .tablon-layout[b-qq6tcd6jh3] {
        grid-template-columns: 1fr 300px;
    }
    .left-column[b-qq6tcd6jh3] {
        display: none;
    }
}

@media (max-width: 900px) {
    .tablon-layout[b-qq6tcd6jh3] {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
    .right-column[b-qq6tcd6jh3] {
        display: none;
    }
}

@media (max-width: 640px) {
    .tablon-layout[b-qq6tcd6jh3] {
        gap: 1rem;
        padding: 0 0.5rem;
    }

    .post-input-wrapper[b-qq6tcd6jh3] {
        flex-direction: column;
    }

    .post-avatar[b-qq6tcd6jh3],
    .author-avatar[b-qq6tcd6jh3] {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .post-avatar[b-qq6tcd6jh3] {
        align-self: flex-start;
    }

    .post-actions[b-qq6tcd6jh3] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .post-tools[b-qq6tcd6jh3] {
        width: 100%;
        justify-content: flex-start;
    }

    .btn-publish[b-qq6tcd6jh3] {
        width: 100%;
        justify-content: center;
    }

    .post-footer[b-qq6tcd6jh3] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .author-name[b-qq6tcd6jh3] {
        font-size: 0.9rem;
    }

    .post-date[b-qq6tcd6jh3] {
        font-size: 0.75rem;
    }

    .calendar-day-circle[b-qq6tcd6jh3] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .calendar-day[b-qq6tcd6jh3] {
        font-size: 1.2rem;
    }
}

@media (max-width: 400px) {
    .tablon-layout[b-qq6tcd6jh3] {
        padding: 0;
    }

    .post-footer[b-qq6tcd6jh3] {
        justify-content: space-between;
    }
}

/* ============================================
   NOTICIAS EN EL FEED — badge FUN
   ============================================ */
.news-card[b-qq6tcd6jh3] {
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(135deg, white 0%, rgba(0, 85, 163, 0.02) 100%) !important;
}

.news-avatar[b-qq6tcd6jh3] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-sky, #58B4FF)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.news-avatar svg[b-qq6tcd6jh3] {
    width: 20px;
    height: 20px;
}

.news-badge[b-qq6tcd6jh3] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light, #337AB8));
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.2rem 0.7rem;
    border-radius: 50px;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.news-content[b-qq6tcd6jh3] {
    padding: 0 1rem 0.75rem;
}

.news-title[b-qq6tcd6jh3] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.news-image[b-qq6tcd6jh3] {
    border-radius: 14px;
    max-height: 280px;
    object-fit: cover;
    width: 100%;
    margin-bottom: 0.5rem;
}

.news-summary[b-qq6tcd6jh3] {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin: 0 0 0.75rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-meta[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.news-category-badge[b-qq6tcd6jh3] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
}

.news-featured-badge[b-qq6tcd6jh3] {
    background: var(--bg-highlight-subtle);
    color: var(--color-secondary-dark);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
}

.news-views[b-qq6tcd6jh3] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-left: auto;
}
/* /Pages/Private/Tareas.razor.rz.scp.css */
/* ============================================
   TAREAS - I.E.P. Javier Perez de Cuellar
   Gestion de Tareas y Entregas
   ============================================ */

/* ============================================
   KPI STATS GRID
   ============================================ */
.tareas-stats-grid[b-upuqq0483j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tareas-stat-card[b-upuqq0483j] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    border-left: 4px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tareas-stat-card:hover[b-upuqq0483j] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tareas-accent-blue[b-upuqq0483j] {
    border-left-color: var(--color-primary);
}

.tareas-accent-green[b-upuqq0483j] {
    border-left-color: var(--color-success);
}

.tareas-accent-warning[b-upuqq0483j] {
    border-left-color: var(--color-warning);
}

.tareas-accent-highlight[b-upuqq0483j] {
    border-left-color: var(--color-highlight);
}

.tareas-stat-icon[b-upuqq0483j] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tareas-stat-icon svg[b-upuqq0483j] {
    width: 24px;
    height: 24px;
}

.tareas-accent-blue .tareas-stat-icon[b-upuqq0483j] {
    background: var(--bg-primary-subtle);
    color: var(--color-primary);
}

.tareas-accent-green .tareas-stat-icon[b-upuqq0483j] {
    background: var(--bg-success-subtle);
    color: var(--color-success-dark);
}

.tareas-accent-warning .tareas-stat-icon[b-upuqq0483j] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning-dark);
}

.tareas-accent-highlight .tareas-stat-icon[b-upuqq0483j] {
    background: var(--bg-highlight-subtle);
    color: var(--color-highlight);
}

.tareas-stat-info h3[b-upuqq0483j] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    margin: 0;
}

.tareas-stat-info p[b-upuqq0483j] {
    color: #6b7280;
    font-size: 0.82rem;
    margin: 0.2rem 0 0 0;
}

/* ============================================
   SECTION CARD
   ============================================ */
.tareas-section-card[b-upuqq0483j] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tareas-section-header[b-upuqq0483j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.tareas-section-header h2[b-upuqq0483j] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

/* ============================================
   FILTER BAR
   ============================================ */
.tareas-filters[b-upuqq0483j] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.tareas-filter-group[b-upuqq0483j] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 200px;
    flex: 1;
}

.tareas-filter-group label[b-upuqq0483j] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tareas-filter-group select[b-upuqq0483j] {
    padding: 0.55rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1f2937;
    background: white;
    transition: border-color 0.2s;
}

.tareas-filter-group select:focus[b-upuqq0483j] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

/* ============================================
   DATA TABLE
   ============================================ */
.tareas-table-responsive[b-upuqq0483j] {
    overflow-x: auto;
}

.tareas-data-table[b-upuqq0483j] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tareas-data-table thead th[b-upuqq0483j] {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.tareas-data-table tbody td[b-upuqq0483j] {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.tareas-data-table tbody tr:hover[b-upuqq0483j] {
    background-color: #f8fafc;
}

.tareas-td-center[b-upuqq0483j] {
    text-align: center;
}

.tareas-td-preview[b-upuqq0483j] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
    font-size: 0.82rem;
}

/* ============================================
   BADGES
   ============================================ */
.tareas-badge[b-upuqq0483j] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.tareas-badge-success[b-upuqq0483j] {
    background: #dcfce7;
    color: #166534;
}

.tareas-badge-secondary[b-upuqq0483j] {
    background: #f1f5f9;
    color: #64748b;
}

.tareas-badge-info[b-upuqq0483j] {
    background: #dbeafe;
    color: #1e40af;
}

.tareas-badge-warning[b-upuqq0483j] {
    background: #fef3c7;
    color: #92400e;
}

.tareas-badge-danger[b-upuqq0483j] {
    background: #fee2e2;
    color: #991b1b;
}

/* ============================================
   DUE DATE BADGES
   ============================================ */
.tareas-due-badge[b-upuqq0483j] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

.tareas-due-overdue[b-upuqq0483j] {
    background: #fee2e2;
    color: #991b1b;
}

.tareas-due-soon[b-upuqq0483j] {
    background: #fef3c7;
    color: #92400e;
}

.tareas-due-ok[b-upuqq0483j] {
    background: #dcfce7;
    color: #166534;
}

/* ============================================
   GRADE DISPLAY
   ============================================ */
.tareas-grade-display[b-upuqq0483j] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.88rem;
    min-width: 36px;
    text-align: center;
}

.tareas-grade-passing[b-upuqq0483j] {
    background: #dcfce7;
    color: #166534;
}

.tareas-grade-failing[b-upuqq0483j] {
    background: #fee2e2;
    color: #991b1b;
}

/* ============================================
   ACTION BUTTONS (TABLE)
   ============================================ */
.tareas-actions-cell[b-upuqq0483j] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.tareas-btn-icon[b-upuqq0483j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.tareas-btn-edit[b-upuqq0483j] {
    background: #eff6ff;
    color: #3b82f6;
}

.tareas-btn-edit:hover[b-upuqq0483j] {
    background: #dbeafe;
    color: #2563eb;
}

.tareas-btn-view[b-upuqq0483j] {
    background: #f0fdf4;
    color: var(--color-success);
}

.tareas-btn-view:hover[b-upuqq0483j] {
    background: #dcfce7;
    color: var(--color-success-dark);
}

.tareas-btn-delete[b-upuqq0483j] {
    background: #fef2f2;
    color: var(--color-error);
}

.tareas-btn-delete:hover[b-upuqq0483j] {
    background: #fee2e2;
    color: var(--color-error-dark);
}

/* ============================================
   BUTTONS
   ============================================ */
.tareas-btn[b-upuqq0483j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tareas-btn-sm[b-upuqq0483j] {
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
}

.tareas-btn-primary[b-upuqq0483j] {
    background: var(--color-primary);
    color: white;
}

.tareas-btn-primary:hover:not(:disabled)[b-upuqq0483j] {
    background: var(--color-primary-dark);
}

.tareas-btn-secondary[b-upuqq0483j] {
    background: #f1f5f9;
    color: #475569;
}

.tareas-btn-secondary:hover[b-upuqq0483j] {
    background: #e2e8f0;
}

.tareas-btn-danger[b-upuqq0483j] {
    background: var(--color-error);
    color: white;
}

.tareas-btn-danger:hover:not(:disabled)[b-upuqq0483j] {
    background: var(--color-error-dark);
}

.tareas-btn:disabled[b-upuqq0483j] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   FILE LINK
   ============================================ */
.tareas-file-link[b-upuqq0483j] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: color 0.2s;
}

.tareas-file-link:hover[b-upuqq0483j] {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.tareas-text-muted[b-upuqq0483j] {
    color: #94a3b8;
    font-size: 0.82rem;
}

/* ============================================
   SUBMISSION INFO HEADER
   ============================================ */
.tareas-submission-info[b-upuqq0483j] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    background: var(--bg-sky);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #dbeafe;
}

.tareas-submission-info-compact[b-upuqq0483j] {
    gap: 1.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.tareas-info-item[b-upuqq0483j] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tareas-info-label[b-upuqq0483j] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tareas-info-value[b-upuqq0483j] {
    font-size: 0.92rem;
    font-weight: 500;
    color: #1e293b;
}

/* ============================================
   MODAL
   ============================================ */
.tareas-modal-overlay[b-upuqq0483j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
    animation: tareasFadeIn-b-upuqq0483j 0.15s ease-out;
}

.tareas-modal-content[b-upuqq0483j] {
    background: white;
    border-radius: 12px;
    width: 95%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: tareasSlideUp-b-upuqq0483j 0.2s ease-out;
}

.tareas-modal-small[b-upuqq0483j] {
    max-width: 450px;
}

.tareas-modal-large[b-upuqq0483j] {
    max-width: 950px;
}

.tareas-modal-header[b-upuqq0483j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.tareas-modal-header h3[b-upuqq0483j] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.tareas-modal-header-danger[b-upuqq0483j] {
    background: #fef2f2;
}

.tareas-modal-header-danger h3[b-upuqq0483j] {
    color: #991b1b;
}

.tareas-btn-close[b-upuqq0483j] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
    transition: color 0.2s;
}

.tareas-btn-close:hover[b-upuqq0483j] {
    color: #1f2937;
}

.tareas-modal-body[b-upuqq0483j] {
    padding: 1.5rem;
}

.tareas-modal-footer[b-upuqq0483j] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.tareas-form-group[b-upuqq0483j] {
    margin-bottom: 1rem;
}

.tareas-form-group label[b-upuqq0483j] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
}

.tareas-form-group input[type="text"][b-upuqq0483j],
.tareas-form-group input[type="number"][b-upuqq0483j],
.tareas-form-group input[type="date"][b-upuqq0483j],
.tareas-form-group select[b-upuqq0483j],
.tareas-form-group textarea[b-upuqq0483j] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1f2937;
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.tareas-form-group textarea[b-upuqq0483j] {
    resize: vertical;
    min-height: 70px;
}

.tareas-form-group input:focus[b-upuqq0483j],
.tareas-form-group select:focus[b-upuqq0483j],
.tareas-form-group textarea:focus[b-upuqq0483j] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

.tareas-form-row[b-upuqq0483j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.tareas-checkbox-label[b-upuqq0483j] {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500 !important;
}

.tareas-checkbox-label input[type="checkbox"][b-upuqq0483j] {
    width: auto !important;
    accent-color: var(--color-primary);
    transform: scale(1.1);
}

/* ============================================
   DELETE MODAL TEXT
   ============================================ */
.tareas-delete-message[b-upuqq0483j] {
    font-size: 0.95rem;
    color: #374151;
    margin: 0 0 0.75rem 0;
}

.tareas-delete-warning[b-upuqq0483j] {
    font-size: 0.82rem;
    color: var(--color-error);
    background: #fef2f2;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #fecaca;
    margin: 0;
}

/* ============================================
   LOADING & EMPTY STATES
   ============================================ */
.tareas-loading-container[b-upuqq0483j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: #64748b;
}

.tareas-spinner[b-upuqq0483j] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: tareasSpin-b-upuqq0483j 0.8s linear infinite;
}

.tareas-spinner-small[b-upuqq0483j] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: tareasSpin-b-upuqq0483j 0.8s linear infinite;
}

.tareas-empty-state[b-upuqq0483j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    gap: 0.5rem;
    color: #94a3b8;
    text-align: center;
}

.tareas-empty-state p[b-upuqq0483j] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #64748b;
}

.tareas-empty-state span[b-upuqq0483j] {
    font-size: 0.82rem;
    color: #94a3b8;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes tareasSpin-b-upuqq0483j {
    to { transform: rotate(360deg); }
}

@keyframes tareasFadeIn-b-upuqq0483j {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tareasSlideUp-b-upuqq0483j {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .tareas-stats-grid[b-upuqq0483j] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tareas-stats-grid[b-upuqq0483j] {
        grid-template-columns: 1fr;
    }

    .tareas-filters[b-upuqq0483j] {
        flex-direction: column;
    }

    .tareas-filter-group[b-upuqq0483j] {
        min-width: 100%;
    }

    .tareas-section-header[b-upuqq0483j] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .tareas-form-row[b-upuqq0483j] {
        grid-template-columns: 1fr;
    }

    .tareas-modal-content[b-upuqq0483j] {
        width: 98%;
        margin: 0.5rem;
    }

    .tareas-modal-large[b-upuqq0483j] {
        max-width: 98%;
    }

    .tareas-submission-info[b-upuqq0483j] {
        gap: 1rem;
    }

    .tareas-info-item[b-upuqq0483j] {
        min-width: 45%;
    }

    .tareas-actions-cell[b-upuqq0483j] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .tareas-stat-card[b-upuqq0483j] {
        padding: 1rem;
    }

    .tareas-stat-info h3[b-upuqq0483j] {
        font-size: 1.25rem;
    }

    .tareas-section-card[b-upuqq0483j] {
        padding: 1rem;
    }

    .tareas-modal-body[b-upuqq0483j] {
        padding: 1rem;
    }

    .tareas-modal-header[b-upuqq0483j] {
        padding: 1rem;
    }

    .tareas-modal-footer[b-upuqq0483j] {
        padding: 0.75rem 1rem;
        flex-direction: column-reverse;
    }

    .tareas-modal-footer .tareas-btn[b-upuqq0483j] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Private/Teachers.razor.rz.scp.css */
/* ============================================
   TEACHERS PAGE — CSS Isolation
   Selectores especificos de pagina.
   Base: components.css (modal, table, form, spinner, etc.)
   ============================================ */

.page-container[b-lw869tye36] {
    max-width: 1400px;
    margin: 0 auto;
}

/* ID Badge */
.id-badge[b-lw869tye36] {
    background: var(--bg-gray);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-gray);
}

/* User cell with avatar */
.user-cell[b-lw869tye36] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar[b-lw869tye36] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.teacher-avatar[b-lw869tye36] {
    background: var(--color-card-orange);
    color: var(--text-white);
}

/* Phone display */
.phone-display[b-lw869tye36] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-gray);
}

/* Gender badges */
.gender-badge[b-lw869tye36] {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    font-size: 0.8rem;
    font-weight: 500;
}

.gender-badge.male[b-lw869tye36] {
    background: #dbeafe;
    color: #1e40af;
}

.gender-badge.female[b-lw869tye36] {
    background: #fce7f3;
    color: #be185d;
}

/* Action buttons */
.action-buttons[b-lw869tye36] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-lw869tye36] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-icon svg[b-lw869tye36] { width: 16px; height: 16px; }

.btn-view[b-lw869tye36] {
    background: #dbeafe;
    color: #1e40af;
}
.btn-view:hover[b-lw869tye36] { background: #bfdbfe; }

.btn-edit[b-lw869tye36] {
    background: #fef3c7;
    color: #b45309;
}
.btn-edit:hover[b-lw869tye36] { background: #fde68a; }

.btn-delete[b-lw869tye36] {
    background: #fee2e2;
    color: var(--color-error-dark);
}
.btn-delete:hover[b-lw869tye36] { background: #fecaca; }

/* Modal override — más pequeño que default */
.modal-content[b-lw869tye36] {
    max-width: 400px;
}

/* Warning text in modal */
.warning-text[b-lw869tye36] {
    color: var(--color-error-dark) !important;
    font-size: 0.9rem;
}
/* /Pages/Private/Usuarios.razor.rz.scp.css */
/* ============================================
   USUARIOS PAGE STYLES (CSS Isolation)
   Migrado desde wwwroot/css/pages/usuarios.css
   Base: components.css (modal, btn-add, empty-state, spinner)
   ============================================ */

/* Tabs */
.tabs-container[b-zqsqbtywso] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    background: var(--bg-white);
    padding: 0.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    align-items: center;
}

.tab-btn[b-zqsqbtywso] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-gray);
    transition: var(--transition-fast);
}

.tab-btn svg[b-zqsqbtywso] {
    width: 18px;
    height: 18px;
}

.tab-btn:hover[b-zqsqbtywso] {
    background: var(--bg-gray);
    color: var(--text-dark);
}

.tab-btn.active[b-zqsqbtywso] {
    background: var(--color-primary);
    color: white;
}

.tab-btn.management[b-zqsqbtywso] {
    background: #f1f5f9;
    color: #64748b;
}

.tab-btn.management:hover[b-zqsqbtywso] {
    background: #e2e8f0;
    color: #475569;
}

.tab-btn.management.active[b-zqsqbtywso] {
    background: #6366f1;
    color: white;
}

.tab-separator[b-zqsqbtywso] {
    width: 1px;
    height: 28px;
    background: #e2e8f0;
    margin: 0 0.5rem;
    flex-shrink: 0;
}

/* Actions bar */
.actions-bar[b-zqsqbtywso] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.search-section[b-zqsqbtywso] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-box input[b-zqsqbtywso] {
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    min-width: 280px;
    background: var(--bg-white);
}

.search-box input:focus[b-zqsqbtywso] {
    outline: none;
    border-color: var(--color-primary);
}

.btn-search[b-zqsqbtywso] {
    padding: 0.5rem 1.5rem;
    background: var(--color-primary);
    color: white;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-search:hover[b-zqsqbtywso] {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* .btn-add → heredado de components.css */

/* Content */
.content-area[b-zqsqbtywso] {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    min-height: 400px;
}

/* Cards grid */
.cards-grid[b-zqsqbtywso] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.user-card[b-zqsqbtywso] {
    background: var(--bg-white);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    overflow: visible;
    transition: var(--transition-fast);
}

.user-card:hover[b-zqsqbtywso] {
    box-shadow: var(--shadow-md);
}

.card-header[b-zqsqbtywso] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    background: var(--bg-gray);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.user-avatar[b-zqsqbtywso] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.user-type[b-zqsqbtywso] { background: var(--color-primary); }
.teacher-type[b-zqsqbtywso] { background: var(--color-warning); }
.employee-type[b-zqsqbtywso] { background: var(--color-card-purple); }
.student-type[b-zqsqbtywso] { background: var(--color-success); }
.parent-type[b-zqsqbtywso] { background: #ec4899; }

/* Card Actions */
.card-actions[b-zqsqbtywso] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e2e8f0;
    background: var(--bg-light);
    justify-content: center;
}

.btn-action[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-action svg[b-zqsqbtywso] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}

.btn-action.edit[b-zqsqbtywso] {
    background: #dbeafe;
    color: #1d4ed8;
}

.btn-action.edit:hover[b-zqsqbtywso] {
    background: #bfdbfe;
}

.btn-action.key[b-zqsqbtywso] {
    background: #fef3c7;
    color: #b45309;
}

.btn-action.key:hover[b-zqsqbtywso] {
    background: #fde68a;
}

.btn-action.toggle[b-zqsqbtywso] {
    background: #fee2e2;
    color: var(--color-error-dark);
}

.btn-action.toggle:hover[b-zqsqbtywso] {
    background: #fecaca;
}

.btn-action.toggle.activate[b-zqsqbtywso] {
    background: #d1fae5;
    color: #059669;
}

.btn-action.toggle.activate:hover[b-zqsqbtywso] {
    background: #a7f3d0;
}

.btn-action.delete[b-zqsqbtywso] {
    background: #fee2e2;
    color: var(--color-error-dark);
}

.btn-action.delete:hover[b-zqsqbtywso] {
    background: #fecaca;
}

/* Confidential toggle button */
.btn-action.confidential[b-zqsqbtywso] {
    background: #f3e8ff;
    color: #7c3aed;
}

.btn-action.confidential:hover[b-zqsqbtywso] {
    background: #e9d5ff;
}

.btn-action.confidential.active[b-zqsqbtywso] {
    background: #7c3aed;
    color: white;
}

.btn-action.confidential.active:hover[b-zqsqbtywso] {
    background: #6d28d9;
}

/* Confidential card styling */
.confidential-card[b-zqsqbtywso] {
    border: 1.5px solid #c4b5fd;
    background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
}

/* Confidential badge (lock emoji) */
.confidential-badge[b-zqsqbtywso] {
    font-size: 0.85rem;
    line-height: 1;
}

/* Card badges container */
.card-badges[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.card-body[b-zqsqbtywso] {
    padding: 1rem;
}

.card-body h3[b-zqsqbtywso] {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.role-badge[b-zqsqbtywso] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.role-badge.teacher[b-zqsqbtywso] { background: #fef3c7; color: #b45309; }
.role-badge.employee[b-zqsqbtywso] { background: #ede9fe; color: #6d28d9; }
.role-badge.student[b-zqsqbtywso] { background: #d1fae5; color: #065f46; }
.role-badge.parent[b-zqsqbtywso] { background: #fce7f3; color: #be185d; }

.info-row[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-gray);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.info-row svg[b-zqsqbtywso] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.status-badge[b-zqsqbtywso] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.active[b-zqsqbtywso] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.inactive[b-zqsqbtywso] {
    background: #fee2e2;
    color: #991b1b;
}

.user-tag[b-zqsqbtywso], .occupation-tag[b-zqsqbtywso] {
    font-size: 0.8rem;
    color: var(--text-gray);
}

/* Roles grid */
.roles-grid[b-zqsqbtywso] {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.role-card[b-zqsqbtywso] {
    background: var(--bg-white);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition-fast);
}

.role-card:hover[b-zqsqbtywso] {
    box-shadow: var(--shadow-md);
}

.role-icon[b-zqsqbtywso] {
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.role-icon svg[b-zqsqbtywso] {
    width: 24px;
    height: 24px;
    color: white;
}

.role-card h3[b-zqsqbtywso] {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.role-card p[b-zqsqbtywso] {
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-bottom: 1rem;
}

.role-actions[b-zqsqbtywso] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.btn-edit-role[b-zqsqbtywso], .btn-delete-role[b-zqsqbtywso] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-edit-role[b-zqsqbtywso] {
    background: #fef3c7;
    color: #b45309;
}

.btn-edit-role:hover[b-zqsqbtywso] { background: #fde68a; }

.btn-delete-role[b-zqsqbtywso] {
    background: #fee2e2;
    color: var(--color-error-dark);
}

.btn-delete-role:hover[b-zqsqbtywso] { background: #fecaca; }

.btn-edit-role svg[b-zqsqbtywso], .btn-delete-role svg[b-zqsqbtywso] {
    width: 16px;
    height: 16px;
}

/* .loading-state, .empty-state, .spinner → heredados de components.css */

/* Responsive */
@media (max-width: 768px) {
    .tabs-container[b-zqsqbtywso] {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .tab-btn span[b-zqsqbtywso] {
        display: none;
    }

    .actions-bar[b-zqsqbtywso] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-section[b-zqsqbtywso] {
        flex-direction: column;
    }

    .search-box input[b-zqsqbtywso] {
        min-width: 100%;
    }

    .cards-grid[b-zqsqbtywso] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MODALES
   ============================================ */
.modal-backdrop[b-zqsqbtywso] {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}

.modal-content[b-zqsqbtywso] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: var(--z-modal);
}

.modal-content.sm[b-zqsqbtywso] { max-width: 400px; }
.modal-content.md[b-zqsqbtywso] { max-width: 500px; }
.modal-content.lg[b-zqsqbtywso] { max-width: 600px; }

.modal-header[b-zqsqbtywso] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-zqsqbtywso] {
    font-size: 1.1rem;
    color: #1e293b;
    margin: 0;
}

.modal-close[b-zqsqbtywso] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close svg[b-zqsqbtywso] {
    width: 20px;
    height: 20px;
}

.modal-body[b-zqsqbtywso] {
    padding: 1.5rem;
}

.modal-footer[b-zqsqbtywso] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-cancel[b-zqsqbtywso] {
    padding: 0.5rem 1rem;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.btn-cancel:hover[b-zqsqbtywso] {
    background: #e2e8f0;
}

.btn-save[b-zqsqbtywso] {
    padding: 0.5rem 1.5rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.btn-save:hover[b-zqsqbtywso] {
    background: var(--color-primary-dark);
}

.btn-save:disabled[b-zqsqbtywso] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-delete[b-zqsqbtywso] {
    padding: 0.5rem 1.5rem;
    background: var(--color-error-dark);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.btn-delete:hover[b-zqsqbtywso] {
    background: #b91c1c;
}

.form-field[b-zqsqbtywso] {
    margin-bottom: 1rem;
}

.form-field label[b-zqsqbtywso] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-field input[b-zqsqbtywso],
.form-field select[b-zqsqbtywso],
.form-field textarea[b-zqsqbtywso] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
}

.form-field input:focus[b-zqsqbtywso],
.form-field select:focus[b-zqsqbtywso],
.form-field textarea:focus[b-zqsqbtywso] {
    outline: none;
    border-color: var(--color-primary);
}

.form-grid-2[b-zqsqbtywso] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ===== Document Type Row ===== */
.doc-type-row[b-zqsqbtywso] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.doc-type-select[b-zqsqbtywso] {
    width: 80px;
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 0.6rem 0.5rem;
}

/* ===== QR Modal ===== */
.qr-person-info[b-zqsqbtywso] {
    margin-bottom: 1rem;
}

.qr-person-info strong[b-zqsqbtywso] {
    font-size: 1.15rem;
    display: block;
    color: #1e293b;
}

.qr-person-info p[b-zqsqbtywso] {
    color: #64748b;
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.qr-type-badge[b-zqsqbtywso] {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

.qr-type-badge.student[b-zqsqbtywso] {
    background: #dbeafe;
    color: #1d4ed8;
}

.qr-type-badge.teacher[b-zqsqbtywso] {
    background: #d1fae5;
    color: #059669;
}

.qr-type-badge.guardian[b-zqsqbtywso] {
    background: #fef3c7;
    color: var(--color-warning-dark);
}

.qr-type-badge.employee[b-zqsqbtywso] {
    background: #ede9fe;
    color: #7c3aed;
}

.qr-image-container[b-zqsqbtywso] {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-image[b-zqsqbtywso] {
    max-width: 300px;
    height: auto;
    border-radius: 8px;
}

.qr-loading[b-zqsqbtywso] {
    text-align: center;
    color: #64748b;
}

.qr-loading .spinner[b-zqsqbtywso] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 0.75rem;
}

.qr-loading p[b-zqsqbtywso] {
    font-size: 0.85rem;
    margin: 0;
}

.qr-detail-info[b-zqsqbtywso] {
    text-align: left;
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.qr-detail-info .qr-info-title[b-zqsqbtywso] {
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.qr-detail-grid[b-zqsqbtywso] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.qr-detail-row[b-zqsqbtywso] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.qr-detail-row:last-child[b-zqsqbtywso] {
    border-bottom: none;
}

.qr-detail-label[b-zqsqbtywso] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.qr-detail-value[b-zqsqbtywso] {
    font-size: 0.8rem;
    color: #1e293b;
    font-weight: 600;
    text-align: right;
}

/* ===== QR Modal Action Buttons ===== */
.modal-footer .btn-action.download[b-zqsqbtywso],
.modal-footer .btn-action.print[b-zqsqbtywso] {
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.4rem;
    border-radius: 8px;
}

.modal-footer .btn-action.download[b-zqsqbtywso] {
    background: #dbeafe;
    color: #1d4ed8;
}

.modal-footer .btn-action.download:hover[b-zqsqbtywso] {
    background: #bfdbfe;
}

.modal-footer .btn-action.print[b-zqsqbtywso] {
    background: #0055A3;
    color: white;
}

.modal-footer .btn-action.print:hover[b-zqsqbtywso] {
    background: #00284D;
}

.modal-footer .btn-action:disabled[b-zqsqbtywso] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Bulk QR Button ===== */
.btn-bulk-qr[b-zqsqbtywso] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-bulk-qr:hover:not(:disabled)[b-zqsqbtywso] {
    background: #6d28d9;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.btn-bulk-qr:disabled[b-zqsqbtywso] {
    opacity: 0.8;
    cursor: wait;
}

.btn-bulk-qr .spinner-small[b-zqsqbtywso] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Grupo bulk carnet con toggle orientacion */
.bulk-carnet-group[b-zqsqbtywso] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bulk-orientation-btns[b-zqsqbtywso] {
    display: inline-flex;
    border: 1.5px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
}

.btn-orient-sm[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: var(--bg-white);
    color: var(--text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.btn-orient-sm:first-child[b-zqsqbtywso] {
    border-right: 1px solid var(--border-light);
}

.btn-orient-sm:hover[b-zqsqbtywso] {
    background: #f8fafc;
    color: #059669;
}

.btn-orient-sm.active[b-zqsqbtywso] {
    background: #d1fae5;
    color: #059669;
}

.btn-bulk-qr.carnet[b-zqsqbtywso] {
    background: #059669;
}

.btn-bulk-qr.carnet:hover:not(:disabled)[b-zqsqbtywso] {
    background: #047857;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

/* ============================================
   CARNET (FOTOCHECK DNI) - PREVIEW EN MODAL
   ============================================ */
.carnet-orientation-toggle[b-zqsqbtywso] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.btn-orientation[b-zqsqbtywso] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-white);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-orientation:hover[b-zqsqbtywso] {
    border-color: #059669;
    color: #059669;
}

.btn-orientation.active[b-zqsqbtywso] {
    background: #d1fae5;
    border-color: #059669;
    color: #059669;
}

.carnet-preview[b-zqsqbtywso] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.carnet-card-preview[b-zqsqbtywso] {
    border: 2px solid var(--border-gray);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-white);
}

/* Horizontal: proporcion 85.6:54 = ~1.585:1 */
.carnet-card-preview.horizontal[b-zqsqbtywso] {
    width: 370px;
    min-height: 233px;
    display: flex;
    flex-direction: column;
}

/* Vertical: proporcion 54:85.6 = ~0.631:1 */
.carnet-card-preview.vertical[b-zqsqbtywso] {
    width: 240px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
}

/* Header con logo */
.carnet-header-preview[b-zqsqbtywso] {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--text-white);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.carnet-logo-preview[b-zqsqbtywso] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
}

.carnet-header-text-preview[b-zqsqbtywso] {
    flex: 1;
    text-align: center;
}

.carnet-header-text-preview strong[b-zqsqbtywso] {
    font-size: 0.75rem;
    display: block;
}

.carnet-header-text-preview small[b-zqsqbtywso] {
    font-size: 0.55rem;
    opacity: 0.85;
    display: block;
    margin-top: 1px;
}

/* Body horizontal: foto | info | QR en fila */
.carnet-body-preview.horizontal[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
    flex: 1;
}

.carnet-h-left[b-zqsqbtywso] {
    flex-shrink: 0;
}

.carnet-h-center[b-zqsqbtywso] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    text-align: center;
}

.carnet-h-right[b-zqsqbtywso] {
    flex-shrink: 0;
}

/* Body vertical: foto, info, QR en columna */
.carnet-body-preview.vertical[b-zqsqbtywso] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.6rem;
    gap: 0.4rem;
    flex: 1;
}

.carnet-photo-preview[b-zqsqbtywso] {
    width: 84px;
    height: 105px;
    object-fit: cover;
    border-radius: 6px;
    border: 1.5px solid var(--border-light);
}

.carnet-photo-placeholder-preview[b-zqsqbtywso] {
    width: 84px;
    height: 105px;
    border-radius: 6px;
    border: 1.5px solid var(--border-light);
    background: #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carnet-photo-placeholder-preview span[b-zqsqbtywso] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #059669;
}

/* QR con marco redondeado */
.carnet-qr-frame-preview[b-zqsqbtywso] {
    padding: 4px;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-white);
    display: inline-block;
    line-height: 0;
}

.carnet-qr-preview[b-zqsqbtywso] {
    width: 96px;
    height: 96px;
    border-radius: 4px;
    display: block;
}

.carnet-qr-preview.small[b-zqsqbtywso] {
    width: 84px;
    height: 84px;
}

.carnet-info-preview[b-zqsqbtywso] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.carnet-info-preview strong[b-zqsqbtywso] {
    font-size: 0.75rem;
    color: var(--text-dark);
}

.carnet-dni[b-zqsqbtywso] {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: monospace;
}

.carnet-detail-line[b-zqsqbtywso] {
    font-size: 0.6rem;
    color: var(--text-gray);
}

.carnet-footer-preview[b-zqsqbtywso] {
    border-top: 1px solid var(--border-light);
    padding: 0.3rem 0.6rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.55rem;
    color: var(--text-light);
}

/* ============================================
   PAGINACION
   ============================================ */
.pagination-bar[b-zqsqbtywso] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.pagination-info[b-zqsqbtywso] {
    font-size: 0.85rem;
    color: #718096;
}

.pagination-controls[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn[b-zqsqbtywso] {
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #4a5568;
    transition: all 0.15s;
}

.pagination-btn:hover:not(:disabled)[b-zqsqbtywso] {
    background: #f7fafc;
    border-color: #0055A3;
    color: #0055A3;
}

.pagination-btn.active[b-zqsqbtywso] {
    background: #0055A3;
    color: white;
    border-color: #0055A3;
}

.pagination-btn:disabled[b-zqsqbtywso] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .pagination-bar[b-zqsqbtywso] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
}

/* ============================================
   APODERADOS ENLAZADOS (Modal Estudiante)
   ============================================ */
.linked-parents-section[b-zqsqbtywso] {
    margin-top: 0.75rem;
}

.linked-parents-section h4[b-zqsqbtywso] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.parent-badges[b-zqsqbtywso] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.parent-badge[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8rem;
}

.parent-badge-primary[b-zqsqbtywso] {
    border-left: 3px solid var(--color-primary, #0055A3);
    background: #eff6ff;
}

.parent-badge-secondary[b-zqsqbtywso] {
    border-left: 3px solid var(--color-highlight, #F5A623);
    background: #fffbeb;
}

.parent-badge-info[b-zqsqbtywso] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.parent-badge-name[b-zqsqbtywso] {
    font-weight: 600;
    color: #1e293b;
}

.parent-badge-detail[b-zqsqbtywso] {
    color: #64748b;
    font-size: 0.75rem;
}

.parent-badge-tag[b-zqsqbtywso] {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.parent-badge-primary .parent-badge-tag[b-zqsqbtywso] {
    background: #dbeafe;
    color: #1d4ed8;
}

.parent-badge-secondary .parent-badge-tag[b-zqsqbtywso] {
    background: #fef3c7;
    color: #b45309;
}

.btn-set-primary[b-zqsqbtywso] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-set-primary:hover[b-zqsqbtywso] {
    color: #f59e0b;
    background: #fffbeb;
}

.btn-remove-parent[b-zqsqbtywso] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-remove-parent:hover[b-zqsqbtywso] {
    color: #ef4444;
    background: #fef2f2;
}

/* Alumnos vinculados (en modal apoderado) */
.student-badges[b-zqsqbtywso] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.student-badge[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8rem;
}

.student-badge-primary[b-zqsqbtywso] {
    border-left: 3px solid #ec4899;
    background: #fdf2f8;
}

.student-badge-secondary[b-zqsqbtywso] {
    border-left: 3px solid #8b5cf6;
    background: #f5f3ff;
}

.student-badge-info[b-zqsqbtywso] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.student-badge-name[b-zqsqbtywso] {
    font-weight: 600;
    color: #1e293b;
}

.student-badge-detail[b-zqsqbtywso] {
    color: #64748b;
    font-size: 0.75rem;
}

.student-badge-tag[b-zqsqbtywso] {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.student-badge-primary .student-badge-tag[b-zqsqbtywso] {
    background: #fce7f3;
    color: #be185d;
}

.student-badge-secondary .student-badge-tag[b-zqsqbtywso] {
    background: #ede9fe;
    color: #6d28d9;
}

.add-parent-row[b-zqsqbtywso] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.add-parent-row select[b-zqsqbtywso] {
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
}

.add-parent-row select:focus[b-zqsqbtywso] {
    outline: none;
    border-color: var(--color-primary);
}

.add-parent-row select:first-child[b-zqsqbtywso] {
    flex: 1;
    min-width: 0;
}

.add-parent-row select:nth-child(2)[b-zqsqbtywso] {
    width: auto;
    flex-shrink: 0;
}

.btn-add-parent[b-zqsqbtywso] {
    background: var(--color-primary, #0055A3);
    color: white;
    border: none;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.btn-add-parent:hover[b-zqsqbtywso] {
    opacity: 0.9;
}

.btn-add-parent:disabled[b-zqsqbtywso] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   DOCENTES AGRUPADOS POR NIVEL
   ============================================ */
.level-group[b-zqsqbtywso] {
    margin-bottom: 2rem;
}

.level-group:last-child[b-zqsqbtywso] {
    margin-bottom: 0;
}

.level-group-header[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
}

.level-group-header h3[b-zqsqbtywso] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.level-group-count[b-zqsqbtywso] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-xl);
    font-size: 0.8rem;
    font-weight: 600;
}

.level-group-header .level-icon[b-zqsqbtywso] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: var(--color-primary);
}

.level-group-header .level-icon svg[b-zqsqbtywso] {
    width: 18px;
    height: 18px;
}

/* ============================================
   BOTON TOGGLE AGRUPACION
   ============================================ */
.btn-group-toggle[b-zqsqbtywso] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.btn-group-toggle:hover[b-zqsqbtywso] {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-group-toggle.active[b-zqsqbtywso] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.btn-group-toggle.active:hover[b-zqsqbtywso] {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* ============================================
   PHOTO UPLOAD (Modals)
   ============================================ */
.photo-upload-section[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.photo-preview-area[b-zqsqbtywso] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-preview-img[b-zqsqbtywso] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-placeholder[b-zqsqbtywso] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf2f7;
    color: #a0aec0;
}

.photo-placeholder svg[b-zqsqbtywso] {
    width: 36px;
    height: 36px;
}

.photo-actions[b-zqsqbtywso] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.btn-upload-photo[b-zqsqbtywso] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upload-photo:hover[b-zqsqbtywso] {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.btn-upload-photo input[type="file"][b-zqsqbtywso] {
    display: none;
}

.btn-upload-photo svg[b-zqsqbtywso] {
    width: 14px;
    height: 14px;
}

.btn-remove-photo[b-zqsqbtywso] {
    background: none;
    border: none;
    color: #e53e3e;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.btn-remove-photo:hover[b-zqsqbtywso] {
    text-decoration: underline;
}

.photo-hint[b-zqsqbtywso] {
    font-size: 0.7rem;
    color: #a0aec0;
}

/* File input (Curriculum) */
.file-upload-wrapper[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-file-upload[b-zqsqbtywso] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-file-upload:hover[b-zqsqbtywso] {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.btn-file-upload input[type="file"][b-zqsqbtywso] {
    display: none;
}

.file-upload-name[b-zqsqbtywso] {
    font-size: 0.8rem;
    color: #718096;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.btn-remove-file[b-zqsqbtywso] {
    background: none;
    border: none;
    color: #a0aec0;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.btn-remove-file:hover[b-zqsqbtywso] {
    color: #e53e3e;
}

.btn-view-file[b-zqsqbtywso] {
    display: inline-flex;
    align-items: center;
    color: #0055A3;
    padding: 0 0.25rem;
    transition: color 0.2s;
}

.btn-view-file:hover[b-zqsqbtywso] {
    color: #00284D;
}

/* Spinner for photo/file upload */
.spinner-small[b-zqsqbtywso] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #0055A3;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Loading more indicator (progressive rendering) */
.loading-more-indicator[b-zqsqbtywso] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: #64748b;
    font-size: 0.875rem;
}
/* /Pages/Public/Home.razor.rz.scp.css */
/* ============================================================
   HOME / LANDING — I.E.P. Javier Pérez de Cuéllar (Ayacucho)
   Rediseño de diseño 2027 — "Conocimiento y Disciplina"
   Sistema visual: navy + dorado + crema. SIN degradados.
   Sin doodles/emojis. El calor lo cargan las fotos reales.
   CSS Isolation (scoped). Mismas clases/secciones que el markup.
   ============================================================ */

/* Paleta local (heredada por los descendientes de cada sección) */
.hero[b-9uxn7gdrc7], .marquee-section[b-9uxn7gdrc7], .fast-facts[b-9uxn7gdrc7], .quienes-section[b-9uxn7gdrc7], .admision-section[b-9uxn7gdrc7],
.excelencia[b-9uxn7gdrc7], .porque-section[b-9uxn7gdrc7], .propuesta[b-9uxn7gdrc7], .niveles[b-9uxn7gdrc7], .vida-escolar[b-9uxn7gdrc7],
.galeria-section[b-9uxn7gdrc7], .testimonios[b-9uxn7gdrc7], .noticias-section[b-9uxn7gdrc7], .faqs-section[b-9uxn7gdrc7],
.cta-final[b-9uxn7gdrc7], .contacto[b-9uxn7gdrc7] {
    --nv: #0C1836;   /* navy profundo (ancla) */
    --nv2: #14264F;  /* navy medio */
    --blu: #0A6FD0;  /* azul del escudo (primaria) */
    --sky: #2AA9FF;  /* celeste (inicial) */
    --gd: #C81E1E;   /* ACENTO = rojo del escudo (ya no dorado) */
    --gd2: #E0554B;  /* rojo claro (hovers) */
    --red: #C81E1E;  /* rojo (secundaria / CTA) */
    --red-d: #9E1414;
    --cr: #F4F7FB;   /* off-white frío (ya no crema cálida de AP) */
    --ink: #1A2230;  /* tinta */
    --ink2: #5B6472; /* tinta suave */
    --ln: #E6E9EF;   /* línea neutra */
    --rd: #C81E1E;   /* acento rojo */
}

/* ============================================================
   RESET DE "SLOP" — matar decoraciones tipo IA sin tocar markup
   ============================================================ */
.page-doodle[b-9uxn7gdrc7] { display: none !important; }   /* doodles/emojis entre secciones */
.marquee-emoji[b-9uxn7gdrc7] { display: none !important; } /* emojis del ticker */
.fun-doodle[b-9uxn7gdrc7] { display: none !important; }

/* Reveal: contenido SIEMPRE visible (no lo escondemos tras JS) */
.reveal[b-9uxn7gdrc7], .reveal-left[b-9uxn7gdrc7], .reveal-right[b-9uxn7gdrc7], .reveal-scale[b-9uxn7gdrc7] {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .5s ease;
}

/* ============================================================
   UTILIDADES DE SECCIÓN
   ============================================================ */
.fun-section-label[b-9uxn7gdrc7] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: "Fredoka", var(--font-heading);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gd);
    margin-bottom: .6rem;
}
.fun-section-label[b-9uxn7gdrc7]::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--gd);
    display: inline-block;
}
.fun-section-title[b-9uxn7gdrc7],
.fun-section-title-white[b-9uxn7gdrc7] {
    font-family: "Fredoka", var(--font-heading);
    font-size: clamp(1.9rem, 4.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
    text-wrap: balance;
}
.fun-section-title[b-9uxn7gdrc7] { color: var(--nv2); }
.fun-section-title-white[b-9uxn7gdrc7] { color: #fff; }

/* Pretítulos / títulos reutilizados por varias secciones */
.section-pretitle[b-9uxn7gdrc7],
.excel-pretitle[b-9uxn7gdrc7] {
    display: block;
    font-family: "Fredoka", var(--font-heading);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gd);
    margin-bottom: .5rem;
}
.section-pretitle-white[b-9uxn7gdrc7] {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gd2);
    margin-bottom: .5rem;
}
.section-title-dark[b-9uxn7gdrc7],
.section-title-gold[b-9uxn7gdrc7],
.section-title-white[b-9uxn7gdrc7],
.excel-title[b-9uxn7gdrc7],
.niveles-title[b-9uxn7gdrc7],
.porque-titulo[b-9uxn7gdrc7] {
    font-family: "Fredoka", var(--font-heading);
    font-size: clamp(1.9rem, 4.4vw, 2.7rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
    text-wrap: balance;
}
.section-title-dark[b-9uxn7gdrc7], .excel-title[b-9uxn7gdrc7], .niveles-title[b-9uxn7gdrc7], .porque-titulo[b-9uxn7gdrc7] { color: var(--nv2); }
.section-title-gold[b-9uxn7gdrc7] { color: var(--gd); }
.section-title-white[b-9uxn7gdrc7] { color: #fff; }
.section-desc[b-9uxn7gdrc7] {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink2);
    max-width: 60ch;
}

/* Botones base (pill, divertidos pero sobrios; SIN degradado) */
.btn-cta[b-9uxn7gdrc7],
.btn-cta-light[b-9uxn7gdrc7],
.btn-accent-rounded[b-9uxn7gdrc7],
.fun-btn-pill[b-9uxn7gdrc7] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .95rem 1.9rem;
    border-radius: 999px;
    font-family: "Fredoka", var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-cta[b-9uxn7gdrc7], .btn-accent-rounded[b-9uxn7gdrc7] {
    background: var(--gd);
    color: #fff;
    box-shadow: 0 10px 24px rgba(200,30,30,.28);
}
.btn-cta:hover[b-9uxn7gdrc7], .btn-accent-rounded:hover[b-9uxn7gdrc7] {
    background: var(--gd2);
    transform: translateY(-2px);
}
.btn-cta svg[b-9uxn7gdrc7] { width: 20px; height: 20px; }
.btn-cta-light[b-9uxn7gdrc7] {
    background: #fff;
    color: var(--nv);
}
.btn-cta-light:hover[b-9uxn7gdrc7] { background: var(--cr); transform: translateY(-2px); }
.btn-cta-outline[b-9uxn7gdrc7] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .95rem 1.7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    border: 1.5px solid rgba(255,255,255,.55);
    color: #fff;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}
.btn-cta-outline:hover[b-9uxn7gdrc7] { background: rgba(255,255,255,.1); border-color: var(--gd2); }

/* Botón WhatsApp inline / en CTA */
.btn-whatsapp[b-9uxn7gdrc7],
.btn-whatsapp-inline[b-9uxn7gdrc7] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .95rem 1.7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,.4);
    color: #fff;
    transition: background .18s ease, border-color .18s ease;
}
.btn-whatsapp:hover[b-9uxn7gdrc7], .btn-whatsapp-inline:hover[b-9uxn7gdrc7] {
    background: rgba(255,255,255,.1);
    border-color: var(--gd2);
}
.btn-whatsapp-inline[b-9uxn7gdrc7] { color: var(--nv2); border-color: var(--ln); }
.btn-whatsapp-inline:hover[b-9uxn7gdrc7] { background: var(--cr); border-color: var(--gd); }

/* ============================================================
   HERO
   ============================================================ */
.hero[b-9uxn7gdrc7] {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    /* padding-top despeja el header fijo (~72px); nunca queda tapado */
    padding: clamp(88px, 11vh, 128px) 2rem clamp(40px, 7vh, 80px);
    overflow: hidden;
    background: var(--nv);
}
.hero-carousel[b-9uxn7gdrc7] { position: absolute; inset: 0; z-index: 0; }
.hero-slide[b-9uxn7gdrc7] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.hero-slide.active[b-9uxn7gdrc7] { opacity: 1; }
.hero-overlay[b-9uxn7gdrc7] {
    position: absolute;
    inset: 0;
    background: rgba(9,18,42,.66);   /* scrim PLANO, sin degradado */
    z-index: 1;
}
.hero-content[b-9uxn7gdrc7] {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}
.hero-text[b-9uxn7gdrc7] { max-width: 640px; }
.hero-badge[b-9uxn7gdrc7] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.4);
    color: var(--gd2);
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}
.badge-dot[b-9uxn7gdrc7] { width: 8px; height: 8px; border-radius: 50%; background: var(--rd); flex: none; }
.hero-title[b-9uxn7gdrc7] {
    font-family: "Fredoka", var(--font-heading);
    font-size: clamp(2.3rem, 6vw, 4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin-bottom: 1.1rem;
    text-wrap: balance;
}
.hero-title em[b-9uxn7gdrc7] { color: var(--gd2); font-style: italic; }
.hero-desc[b-9uxn7gdrc7] {
    color: #C9D1E2;
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.65;
    margin-bottom: 2rem;
    max-width: 46ch;
}
.hero-buttons[b-9uxn7gdrc7] { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.8rem; }
.hero-dot[b-9uxn7gdrc7], .hero-indicators[b-9uxn7gdrc7] { }
.hero-indicators[b-9uxn7gdrc7] {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .7rem;
    z-index: 3;
}
.hero-dot[b-9uxn7gdrc7] {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.6);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all .25s ease;
}
.hero-dot.active[b-9uxn7gdrc7] { background: var(--gd); border-color: var(--gd); transform: scale(1.25); }

/* ============================================================
   MARQUEE — ticker sobrio dorado (texto, sin emojis)
   ============================================================ */
.marquee-section[b-9uxn7gdrc7] {
    background: var(--nv2);
    border-top: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
    overflow: hidden;
    padding: .85rem 0;
}
.marquee-track[b-9uxn7gdrc7] { display: flex; width: max-content; animation: home-marquee-b-9uxn7gdrc7 34s linear infinite; }
.marquee-content[b-9uxn7gdrc7] { display: flex; flex: none; }
.marquee-item[b-9uxn7gdrc7] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0 2.2rem;
    font-family: "Fredoka", var(--font-heading);
    font-weight: 600;
    font-size: .95rem;
    color: var(--gd2);
    white-space: nowrap;
    position: relative;
}
.marquee-item[b-9uxn7gdrc7]::after {
    content: "•";
    position: absolute;
    right: -.15rem;
    color: rgba(198,162,76,.5);
}
@keyframes home-marquee-b-9uxn7gdrc7 { to { transform: translateX(-50%); } }

/* ============================================================
   FAST FACTS
   ============================================================ */
.fast-facts[b-9uxn7gdrc7] { background: var(--cr); padding: clamp(2.5rem,5vw,3.5rem) 2rem; }
.facts-grid[b-9uxn7gdrc7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.fact-item[b-9uxn7gdrc7] {
    text-align: center;
    padding: 1.4rem 1rem;
    background: #fff;
    border: 1px solid var(--ln);
    border-radius: 16px;
}
.fact-number[b-9uxn7gdrc7] {
    display: block;
    font-family: "Fredoka", var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--gd);
    line-height: 1;
    margin-bottom: .35rem;
}
.fact-label[b-9uxn7gdrc7] { font-size: .9rem; color: var(--ink2); line-height: 1.35; }

/* ============================================================
   QUIÉNES SOMOS
   ============================================================ */
.quienes-section[b-9uxn7gdrc7] { background: #fff; padding: clamp(3.5rem,8vw,6rem) 2rem; }
.quienes-grid[b-9uxn7gdrc7] {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
.quienes-collage[b-9uxn7gdrc7] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.quienes-img[b-9uxn7gdrc7] { border-radius: 16px; overflow: hidden; border: 1px solid var(--ln); }
.quienes-img:first-child[b-9uxn7gdrc7] { grid-column: 1 / -1; aspect-ratio: 16/9; }
.quienes-img[b-9uxn7gdrc7] { aspect-ratio: 1/1; }
.quienes-img img[b-9uxn7gdrc7] { width: 100%; height: 100%; object-fit: cover; }
.quienes-text h2[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: clamp(1.8rem,4vw,2.5rem); font-weight: 800; color: var(--nv2); line-height: 1.14; margin-bottom: 1rem; text-wrap: balance; }
.quienes-text p[b-9uxn7gdrc7] { color: var(--ink2); line-height: 1.7; margin-bottom: 1rem; max-width: 60ch; }
.quienes-stats[b-9uxn7gdrc7] { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 1.6rem 0; }
.quienes-stat-number[b-9uxn7gdrc7] { display: block; font-family: "Fredoka", var(--font-heading); font-size: 1.9rem; font-weight: 800; color: var(--gd); line-height: 1; }
.quienes-stat-label[b-9uxn7gdrc7] { font-size: .85rem; color: var(--ink2); }

/* ============================================================
   ADMISIÓN
   ============================================================ */
.admision-section[b-9uxn7gdrc7] { background: var(--cr); padding: clamp(3.5rem,8vw,6rem) 2rem; }
.admision-header[b-9uxn7gdrc7] { max-width: 1180px; margin: 0 auto 2.5rem; }
.admision-header p[b-9uxn7gdrc7] { color: var(--ink2); line-height: 1.65; max-width: 60ch; }
.admision-steps[b-9uxn7gdrc7] {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
}
.step-card[b-9uxn7gdrc7] {
    flex: 1 1 260px;
    background: #fff;
    border: 1px solid var(--ln);
    border-radius: 18px;
    padding: 2rem 1.6rem;
    position: relative;
}
.step-number[b-9uxn7gdrc7] {
    font-family: "Fredoka", var(--font-heading);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--gd);
    margin-bottom: 1rem;
}
.step-icon[b-9uxn7gdrc7] {
    width: 58px; height: 58px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    color: #fff;
}
.step-icon svg[b-9uxn7gdrc7] { width: 30px; height: 30px; }
.step-icon-blue[b-9uxn7gdrc7] { background: var(--blu); }
.step-icon-orange[b-9uxn7gdrc7] { background: var(--gd); color: #fff; }
.step-icon-green[b-9uxn7gdrc7] { background: var(--nv2); }
.step-card h4[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--nv2); margin-bottom: .5rem; }
.step-card p[b-9uxn7gdrc7] { color: var(--ink2); line-height: 1.55; font-size: .95rem; }
.step-connector[b-9uxn7gdrc7] { display: flex; align-items: center; color: var(--gd); }
.step-connector svg[b-9uxn7gdrc7] { width: 26px; height: 26px; }
.admision-ctas[b-9uxn7gdrc7] { max-width: 1180px; margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.admision-ctas .btn-whatsapp-inline[b-9uxn7gdrc7] { background: #25D366; color: #fff; border-color: transparent; }
.admision-ctas .btn-whatsapp-inline:hover[b-9uxn7gdrc7] { background: #1DA851; }

/* ============================================================
   NOSOTROS / EXCELENCIA (cards con foto real + scrim plano)
   ============================================================ */
.excelencia[b-9uxn7gdrc7] { background: var(--nv2); padding: clamp(3.5rem,8vw,6rem) 2rem; }
.excel-header[b-9uxn7gdrc7] { max-width: 1180px; margin: 0 auto 2.5rem; }
.excel-header p[b-9uxn7gdrc7] { color: #C1CADD; line-height: 1.65; max-width: 60ch; }
.excel-cards[b-9uxn7gdrc7] {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
}
.excel-card[b-9uxn7gdrc7] {
    position: relative;
    min-height: 300px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
    display: flex;
    align-items: flex-end;
}
.excel-card-img[b-9uxn7gdrc7] { background-size: cover; background-position: center; }
.excel-card-overlay[b-9uxn7gdrc7] { position: absolute; inset: 0; }
.excel-overlay-blue[b-9uxn7gdrc7] { background: rgba(12,24,54,.55); }
.excel-overlay-orange[b-9uxn7gdrc7] { background: rgba(20,38,79,.55); }
.excel-overlay-gold[b-9uxn7gdrc7] { background: rgba(12,24,54,.5); }
.excel-card-content[b-9uxn7gdrc7] { position: relative; z-index: 1; padding: 1.6rem; }
.excel-card-content h4[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.excel-card-content p[b-9uxn7gdrc7] { color: #E8EDF5; line-height: 1.55; font-size: .95rem; }

/* ============================================================
   ¿POR QUÉ ELEGIRNOS?
   ============================================================ */
.porque-section[b-9uxn7gdrc7] { background: #fff; padding: clamp(3.5rem,8vw,6rem) 2rem; }
.porque-section .container[b-9uxn7gdrc7] { max-width: 1180px; }
.porque-titulo[b-9uxn7gdrc7] { text-align: center; margin-bottom: 2.5rem; }
.porque-grid[b-9uxn7gdrc7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}
@media (max-width: 900px) { .porque-grid[b-9uxn7gdrc7] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .porque-grid[b-9uxn7gdrc7] { grid-template-columns: 1fr; } }
.porque-item[b-9uxn7gdrc7] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.4rem;
    background: var(--cr);
    border: 1px solid var(--ln);
    border-radius: 16px;
}
.porque-icon[b-9uxn7gdrc7] {
    flex: none;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--nv2);
    color: var(--gd2);
    display: grid;
    place-items: center;
}
.porque-icon svg[b-9uxn7gdrc7] { width: 26px; height: 26px; }
.porque-text h4[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--nv2); margin-bottom: .25rem; }
.porque-text p[b-9uxn7gdrc7] { font-size: .92rem; color: var(--ink2); line-height: 1.5; }

/* ============================================================
   PROPUESTA EDUCATIVA
   ============================================================ */
.propuesta[b-9uxn7gdrc7] { background: var(--cr); padding: clamp(3.5rem,8vw,6rem) 2rem; }
.propuesta-inner[b-9uxn7gdrc7] {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(2rem,4vw,3.5rem);
    align-items: start;
}
.propuesta-values[b-9uxn7gdrc7] { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0; }
.value-tag[b-9uxn7gdrc7] {
    background: var(--nv2);
    color: var(--gd2);
    font-family: "Fredoka", var(--font-heading);
    font-weight: 600;
    font-size: .95rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
}
.propuesta-cards[b-9uxn7gdrc7] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.prop-card[b-9uxn7gdrc7] {
    background: #fff;
    border: 1px solid var(--ln);
    border-radius: 16px;
    padding: 1.5rem;
}
.prop-icon[b-9uxn7gdrc7] {
    width: 52px; height: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    color: #fff;
}
.prop-icon svg[b-9uxn7gdrc7] { width: 28px; height: 28px; }
.prop-icon-orange[b-9uxn7gdrc7] { background: var(--gd); color: #fff; }
.prop-icon-blue[b-9uxn7gdrc7] { background: var(--blu); }
.prop-icon-navy[b-9uxn7gdrc7] { background: var(--nv2); }
.prop-card p[b-9uxn7gdrc7] { color: var(--ink2); line-height: 1.55; font-size: .93rem; }

/* ============================================================
   NIVELES
   ============================================================ */
.niveles[b-9uxn7gdrc7] { background: #fff; padding: clamp(3.5rem,8vw,6rem) 2rem; }
.niveles .container[b-9uxn7gdrc7] { max-width: 1180px; }
.niveles-title[b-9uxn7gdrc7] { text-align: center; }
.niveles-subtitle[b-9uxn7gdrc7] { text-align: center; color: var(--ink2); line-height: 1.6; max-width: 56ch; margin: 0 auto 2.5rem; }
.niveles-grid[b-9uxn7gdrc7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.4rem;
}
.nivel-card[b-9uxn7gdrc7] {
    background: #fff;
    border: 1px solid var(--ln);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nivel-card:hover[b-9uxn7gdrc7] { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,38,79,.13); border-color: var(--gd); }
.nivel-img[b-9uxn7gdrc7] { position: relative; aspect-ratio: 16/11; overflow: hidden; }
.nivel-img img[b-9uxn7gdrc7] { width: 100%; height: 100%; object-fit: cover; }
.nivel-badge[b-9uxn7gdrc7] {
    position: absolute;
    top: 1rem; left: 1rem;
    font-size: .78rem;
    font-weight: 700;
    padding: .35rem .8rem;
    border-radius: 999px;
    color: #fff;
    background: var(--sky);
}
.nivel-badge-inicial[b-9uxn7gdrc7] { background: var(--sky); }
.nivel-badge-primaria[b-9uxn7gdrc7] { background: var(--blu); }
.nivel-badge-secundaria[b-9uxn7gdrc7] { background: var(--red); }
.nivel-body[b-9uxn7gdrc7] { padding: 1.5rem; }
.nivel-body h3[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--nv2); margin-bottom: .5rem; }
.nivel-body p[b-9uxn7gdrc7] { color: var(--ink2); line-height: 1.55; font-size: .95rem; margin-bottom: 1rem; }
.nivel-features[b-9uxn7gdrc7] { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.nivel-features li[b-9uxn7gdrc7] { position: relative; padding-left: 1.4rem; font-size: .9rem; color: var(--ink2); }
.nivel-features li[b-9uxn7gdrc7]::before { content: "✓"; position: absolute; left: 0; color: var(--gd); font-weight: 700; }
.nivel-link[b-9uxn7gdrc7] { display: inline-block; margin-top: .6rem; font-family: "Fredoka", var(--font-heading); font-weight: 600; font-size: .95rem; color: var(--red); text-decoration: none; }
.nivel-link:hover[b-9uxn7gdrc7] { color: var(--red-d); }

/* ============================================================
   VIDA ESCOLAR
   ============================================================ */
.vida-escolar[b-9uxn7gdrc7] { background: var(--nv); padding: clamp(3.5rem,8vw,6rem) 2rem; }
.vida-escolar .container[b-9uxn7gdrc7] { max-width: 1180px; }
.vida-header[b-9uxn7gdrc7] { margin-bottom: 2.5rem; }
.vida-header p[b-9uxn7gdrc7] { color: #C1CADD; line-height: 1.65; max-width: 60ch; }
.vida-grid[b-9uxn7gdrc7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}
.vida-card[b-9uxn7gdrc7] {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    padding: 1.6rem;
    transition: background .2s ease, border-color .2s ease;
}
.vida-card:hover[b-9uxn7gdrc7] { background: rgba(255,255,255,.09); border-color: var(--gd); }
.vida-icon[b-9uxn7gdrc7] { width: 52px; height: 52px; border-radius: 12px; background: rgba(255,255,255,.15); color: var(--gd2); display: grid; place-items: center; margin-bottom: 1rem; }
.vida-icon svg[b-9uxn7gdrc7] { width: 30px; height: 30px; }
.vida-card h4[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.vida-card p[b-9uxn7gdrc7] { color: #C1CADD; line-height: 1.55; font-size: .93rem; }

/* ============================================================
   GALERÍA
   ============================================================ */
.galeria-section[b-9uxn7gdrc7] { background: var(--cr); padding: clamp(3.5rem,8vw,6rem) 2rem; }
.galeria-section .container[b-9uxn7gdrc7] { max-width: 1180px; }
.galeria-header[b-9uxn7gdrc7] { margin-bottom: 1.8rem; }
.galeria-grid[b-9uxn7gdrc7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem;
}
.galeria-item[b-9uxn7gdrc7] {
    aspect-ratio: 1/1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--ln);
}
.galeria-item:first-child[b-9uxn7gdrc7] { grid-column: span 2; grid-row: span 2; }
.galeria-item img[b-9uxn7gdrc7] { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.galeria-item:hover img[b-9uxn7gdrc7] { transform: scale(1.05); }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testimonios[b-9uxn7gdrc7] { background: #fff; padding: clamp(3.5rem,8vw,6rem) 2rem; }
.testimonios .container[b-9uxn7gdrc7] { max-width: 1180px; }
.testimonios-header[b-9uxn7gdrc7] { margin-bottom: 2rem; }
.testimonios-grid[b-9uxn7gdrc7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
}
.testimonio-card[b-9uxn7gdrc7] {
    background: var(--cr);
    border: 1px solid var(--ln);
    border-radius: 18px;
    padding: 1.8rem;
    position: relative;
}
.testimonio-quote[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: 3rem; line-height: .5; color: var(--gd); height: 1.4rem; }
.testimonio-text[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: 1.05rem; line-height: 1.5; color: var(--nv2); margin-bottom: 1.4rem; font-style: italic; }
.testimonio-autor[b-9uxn7gdrc7] { display: flex; align-items: center; gap: .8rem; }
.autor-avatar[b-9uxn7gdrc7] { width: 42px; height: 42px; border-radius: 50%; background: var(--nv2); color: var(--gd2); display: grid; place-items: center; flex: none; }
.autor-avatar svg[b-9uxn7gdrc7] { width: 24px; height: 24px; }
.autor-nombre[b-9uxn7gdrc7] { display: block; font-weight: 700; color: var(--nv2); font-size: .95rem; }
.autor-rol[b-9uxn7gdrc7] { display: block; font-size: .82rem; color: var(--ink2); }

/* ============================================================
   NOTICIAS
   ============================================================ */
.noticias-section[b-9uxn7gdrc7] { background: var(--cr); padding: clamp(3.5rem,8vw,6rem) 2rem; }
.noticias-section .container[b-9uxn7gdrc7] { max-width: 1180px; }
.noticias-header[b-9uxn7gdrc7] { margin-bottom: 2rem; }
.noticias-grid[b-9uxn7gdrc7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
}
.noticia-card[b-9uxn7gdrc7] {
    background: #fff;
    border: 1px solid var(--ln);
    border-radius: 18px;
    overflow: hidden;
}
.noticia-card-top[b-9uxn7gdrc7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem 0;
}
.noticia-fecha[b-9uxn7gdrc7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--nv2);
    color: #fff;
    border-radius: 12px;
    padding: .5rem .8rem;
    line-height: 1;
}
.fecha-dia[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--gd2); }
.fecha-mes[b-9uxn7gdrc7] { font-size: .72rem; letter-spacing: .1em; margin-top: .2rem; }
.noticia-tag[b-9uxn7gdrc7] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gd);
    border: 1px solid var(--gd);
    border-radius: 999px;
    padding: .3rem .7rem;
}
.noticia-content[b-9uxn7gdrc7] { padding: 1.2rem 1.4rem 1.6rem; }
.noticia-content h4[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--nv2); margin-bottom: .5rem; line-height: 1.25; }
.noticia-content p[b-9uxn7gdrc7] { color: var(--ink2); line-height: 1.55; font-size: .92rem; }

/* ============================================================
   FAQs
   ============================================================ */
.faqs-section[b-9uxn7gdrc7] { background: #fff; padding: clamp(3.5rem,8vw,6rem) 2rem; }
.faqs-section .container[b-9uxn7gdrc7] { max-width: 820px; }
.faqs-header[b-9uxn7gdrc7] { margin-bottom: 2rem; text-align: center; }
.faqs-list[b-9uxn7gdrc7] { display: grid; gap: .8rem; }
.faq-item[b-9uxn7gdrc7] {
    background: var(--cr);
    border: 1px solid var(--ln);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    cursor: pointer;
}
.faq-item.active[b-9uxn7gdrc7] { border-color: var(--gd); }
.faq-question[b-9uxn7gdrc7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: "Fredoka", var(--font-heading);
    font-weight: 600;
    color: var(--nv2);
}
.faq-question svg[b-9uxn7gdrc7] { width: 20px; height: 20px; color: var(--gd); flex: none; transition: transform .25s ease; }
.faq-item.active .faq-question svg[b-9uxn7gdrc7] { transform: rotate(180deg); }
.faq-answer[b-9uxn7gdrc7] { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.active .faq-answer[b-9uxn7gdrc7] { max-height: 320px; }
.faq-answer p[b-9uxn7gdrc7] { color: var(--ink2); line-height: 1.6; font-size: .95rem; padding-top: .9rem; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final[b-9uxn7gdrc7] { background: var(--nv); padding: clamp(3.5rem,8vw,6rem) 2rem; }
.cta-final .container[b-9uxn7gdrc7] { max-width: 820px; text-align: center; }
.cta-content h2[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: clamp(1.9rem,4.5vw,2.8rem); font-weight: 800; color: #fff; line-height: 1.12; margin-bottom: 1rem; text-wrap: balance; }
.cta-content p[b-9uxn7gdrc7] { color: #C1CADD; line-height: 1.65; max-width: 56ch; margin: 0 auto 1.8rem; }
.cta-buttons[b-9uxn7gdrc7] { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.cta-buttons .btn-whatsapp[b-9uxn7gdrc7] { background: #25D366; border-color: transparent; }
.cta-buttons .btn-whatsapp:hover[b-9uxn7gdrc7] { background: #1DA851; }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto[b-9uxn7gdrc7] { background: var(--nv2); padding: clamp(3.5rem,8vw,6rem) 2rem; }
.contacto .container[b-9uxn7gdrc7] { max-width: 1180px; }
.contacto-card[b-9uxn7gdrc7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.4rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,.2);
}
.contacto-quote[b-9uxn7gdrc7] { color: #C1CADD; font-style: italic; line-height: 1.6; max-width: 52ch; margin: 0; flex: 1 1 320px; }
.cl-tagline[b-9uxn7gdrc7] { display: block; font-size: .85rem; color: var(--gd2); }
.contacto-grid[b-9uxn7gdrc7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2rem;
}
.contacto-item[b-9uxn7gdrc7] { display: flex; align-items: flex-start; gap: .7rem; color: #C1CADD; margin-bottom: .8rem; line-height: 1.5; font-size: .95rem; }
.contacto-item svg[b-9uxn7gdrc7] { flex: none; color: var(--gd); margin-top: 2px; }
.contacto-item-link[b-9uxn7gdrc7] { color: #C1CADD; text-decoration: none; }
.contacto-item-link:hover[b-9uxn7gdrc7] { color: var(--gd2); }
.contacto-map[b-9uxn7gdrc7] { margin-top: 2rem; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); }
.contacto-map iframe[b-9uxn7gdrc7] { display: block; width: 100%; height: 360px; border: 0; }
.contacto-logo[b-9uxn7gdrc7] { display: flex; align-items: center; gap: 1rem; }
.contacto-logo-img[b-9uxn7gdrc7] { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; }
.cl-name[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-weight: 700; color: #fff; font-size: 1.1rem; line-height: 1.2; }
.contacto-col h4[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gd); margin-bottom: 1rem; }
.contacto-col p[b-9uxn7gdrc7], .contacto-col a[b-9uxn7gdrc7] { color: #C1CADD; line-height: 1.7; font-size: .95rem; text-decoration: none; display: block; }
.contacto-link:hover[b-9uxn7gdrc7] { color: var(--gd2); }
.social-icons[b-9uxn7gdrc7] { display: flex; gap: .7rem; }
.social-icon[b-9uxn7gdrc7] {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    display: grid;
    place-items: center;
    color: #fff;
    transition: background .2s ease, border-color .2s ease;
}
.social-icon:hover[b-9uxn7gdrc7] { background: rgba(198,162,76,.18); border-color: var(--gd); }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.whatsapp-float[b-9uxn7gdrc7] {
    position: fixed;
    right: 20px; bottom: 20px;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
    z-index: 1030;
    transition: transform .2s ease;
}
.whatsapp-float:hover[b-9uxn7gdrc7] { transform: scale(1.08); }
.whatsapp-tooltip[b-9uxn7gdrc7] {
    position: absolute;
    right: 70px;
    background: #14264F;
    color: #fff;
    font-size: .82rem;
    padding: .5rem .8rem;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.whatsapp-float:hover .whatsapp-tooltip[b-9uxn7gdrc7] { opacity: 1; }

/* ============================================================
   MODALES (banner matrícula + lead). Estilos mínimos propios;
   el formulario usa componentes globales de components.css.
   ============================================================ */
.matricula-modal-overlay[b-9uxn7gdrc7],
.modal-overlay[b-9uxn7gdrc7] {
    position: fixed; inset: 0;
    background: rgba(9,18,42,.7);
    display: grid; place-items: center;
    padding: 1.5rem;
    z-index: 1050;
}
.matricula-modal[b-9uxn7gdrc7], .modal-content[b-9uxn7gdrc7] {
    position: relative;
    background: #fff;
    border-radius: 18px;
    max-width: 460px;
    width: 100%;
    overflow: hidden;
}
.matricula-modal img[b-9uxn7gdrc7] { width: 100%; display: block; }
.matricula-modal-footer[b-9uxn7gdrc7] { padding: 1.2rem; text-align: center; }
.matricula-modal-close[b-9uxn7gdrc7], .modal-close[b-9uxn7gdrc7] {
    position: absolute; top: .8rem; right: .8rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.9);
    color: var(--nv2);
    cursor: pointer;
    display: grid; place-items: center;
    z-index: 2;
}
.modal-header[b-9uxn7gdrc7] { padding: 1.6rem 1.6rem 0; }
.modal-header h3[b-9uxn7gdrc7] { font-family: "Fredoka", var(--font-heading); color: var(--nv2); font-size: 1.3rem; margin-bottom: .4rem; }
.modal-header p[b-9uxn7gdrc7] { color: var(--ink2); font-size: .92rem; }
.modal-body[b-9uxn7gdrc7] { padding: 1.2rem 1.6rem; }
.modal-footer[b-9uxn7gdrc7] { padding: 0 1.6rem 1.6rem; }
.btn-submit[b-9uxn7gdrc7] {
    width: 100%;
    background: var(--gd);
    color: var(--nv);
    border: none;
    border-radius: 999px;
    padding: .9rem;
    font-family: "Fredoka", var(--font-heading);
    font-weight: 700;
    cursor: pointer;
}
.btn-submit:hover[b-9uxn7gdrc7] { background: var(--gd2); }
.form-privacy[b-9uxn7gdrc7] { font-size: .78rem; color: var(--ink2); margin-top: .8rem; display: flex; align-items: center; gap: .4rem; }
.modal-success[b-9uxn7gdrc7] { padding: 2rem 1.6rem; text-align: center; }
.success-icon[b-9uxn7gdrc7] { color: #25D366; margin-bottom: 1rem; }
.btn-close-modal[b-9uxn7gdrc7] { margin-top: 1rem; background: none; border: 1px solid var(--ln); border-radius: 999px; padding: .6rem 1.4rem; cursor: pointer; color: var(--ink2); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Tablet */
@media (max-width: 1024px) {
    .hero-title[b-9uxn7gdrc7] { font-size: clamp(2.2rem, 6vw, 3.4rem); }
    .hero-desc[b-9uxn7gdrc7] { font-size: 1.05rem; }
}

/* Móvil */
@media (max-width: 720px) {
    .hero[b-9uxn7gdrc7] { min-height: auto; padding: 92px 1.3rem 3rem; }
    .hero-title[b-9uxn7gdrc7] { font-size: clamp(2rem, 8vw, 2.6rem); }
    .hero-desc[b-9uxn7gdrc7] { max-width: 100%; }
    .hero-buttons[b-9uxn7gdrc7] { flex-direction: column; align-items: stretch; }
    .hero-buttons .btn-cta[b-9uxn7gdrc7], .hero-buttons .btn-cta-outline[b-9uxn7gdrc7] { justify-content: center; }
    .hero-indicators[b-9uxn7gdrc7] { bottom: 16px; }
    .propuesta-cards[b-9uxn7gdrc7] { grid-template-columns: 1fr; }
    .quienes-collage[b-9uxn7gdrc7] { grid-template-columns: 1fr 1fr; }
    .step-connector[b-9uxn7gdrc7] { display: none; }
    .galeria-item:first-child[b-9uxn7gdrc7] { grid-column: span 2; grid-row: auto; }
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .marquee-track[b-9uxn7gdrc7] { animation: none; }
    .hero-slide[b-9uxn7gdrc7] { transition: none; }
    .nivel-card[b-9uxn7gdrc7], .galeria-item img[b-9uxn7gdrc7], .whatsapp-float[b-9uxn7gdrc7] { transition: none; }
}
/* /Pages/Public/Login.razor.rz.scp.css */
/* ============================================
   LOGIN PAGE — Estética FUN (Split Layout)
   CSS Isolation (scoped automáticamente)
   Variables globales en: css/app.css
   @keyframes renombrados para evitar conflictos globales
   ============================================ */

/* ============================================
   LAYOUT — Split Grid
   ============================================ */
.login-page[b-ehlwut8fad] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}

/* ============================================
   PANEL IZQUIERDO — Branding (azul oscuro)
   ============================================ */
.login-brand[b-ehlwut8fad] {
    background: #0C1836;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    overflow: hidden;
}

.login-brand-content[b-ehlwut8fad] {
    position: relative;
    z-index: 2;
    max-width: 380px;
    text-align: center;
}

/* Logo */
.login-logo[b-ehlwut8fad] {
    display: inline-block;
    margin-bottom: 2rem;
}

.login-logo-img[b-ehlwut8fad] {
    width: 100px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
}

/* Greeting */
.login-greeting[b-ehlwut8fad] {
    font-family: "Fredoka", var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.greeting-highlight[b-ehlwut8fad] {
    color: #C81E1E;
    position: relative;
}

.greeting-highlight[b-ehlwut8fad]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 6px;
    background: #C81E1E;
    opacity: 0.3;
    border-radius: 3px;
}

/* Feature chips */
.login-chips[b-ehlwut8fad] {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.login-chip[b-ehlwut8fad] {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Bible quote */
.login-quote[b-ehlwut8fad] {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto;
}

.quote-ref[b-ehlwut8fad] {
    display: block;
    margin-top: 0.25rem;
    font-style: normal;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
}

/* ============================================
   DOODLES — Decoraciones flotantes
   ============================================ */
.login-doodles[b-ehlwut8fad] {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    z-index: 1;
}

.login-doodle[b-ehlwut8fad] {
    position: absolute;
}

.login-doodle.d-1[b-ehlwut8fad] {
    top: 15%;
    left: 10%;
    font-size: 40px;
    transform: rotate(-15deg);
    animation: login-float-b-ehlwut8fad 6s ease-in-out infinite;
}

.login-doodle.d-2[b-ehlwut8fad] {
    bottom: 20%;
    right: 12%;
    font-size: 36px;
    transform: rotate(12deg);
    animation: login-float-b-ehlwut8fad 5s ease-in-out 0.5s infinite;
}

.login-doodle.d-3[b-ehlwut8fad] {
    top: 25%;
    right: 15%;
    font-size: 32px;
    transform: rotate(-8deg);
    animation: login-float-b-ehlwut8fad 7s ease-in-out 1s infinite;
}

.login-doodle.d-circle[b-ehlwut8fad] {
    bottom: 30%;
    left: 15%;
    width: 70px;
    height: 70px;
    border: 4px dashed rgba(255,255,255,0.15);
    border-radius: 50%;
    animation: login-spin-slow-b-ehlwut8fad 25s linear infinite;
}

@keyframes login-float-b-ehlwut8fad {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50% { transform: translateY(-12px) rotate(var(--r, 0deg)); }
}

@keyframes login-spin-slow-b-ehlwut8fad {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   PANEL DERECHO — Formulario (crema)
   ============================================ */
.login-form-panel[b-ehlwut8fad] {
    background: #F4F7FB;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.login-form-container[b-ehlwut8fad] {
    width: 100%;
    max-width: 380px;
}

/* Title */
.login-form-title[b-ehlwut8fad] {
    font-family: "Fredoka", var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 2rem;
}

/* ============================================
   ALERTA DE ERROR
   ============================================ */
.error-alert[b-ehlwut8fad] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.error-alert svg[b-ehlwut8fad] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ============================================
   FORMULARIO
   ============================================ */
[b-ehlwut8fad] .login-form {
    width: 100%;
}

.form-group[b-ehlwut8fad] {
    margin-bottom: 1.5rem;
}

.form-group label[b-ehlwut8fad] {
    display: block;
    font-family: "Fredoka", var(--font-heading);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.input-wrapper[b-ehlwut8fad] {
    position: relative;
    width: 100%;
}

.input-icon[b-ehlwut8fad] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-light);
    pointer-events: none;
}

[b-ehlwut8fad] .form-input {
    width: 100%;
    padding: 0.85rem 0.85rem 0.85rem 2.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: white;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

[b-ehlwut8fad] .form-input::placeholder {
    color: var(--text-light);
    font-size: 0.9rem;
}

[b-ehlwut8fad] .form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.1);
}

/* Password toggle */
.btn-toggle-password[b-ehlwut8fad] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    color: var(--text-light);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-toggle-password:hover[b-ehlwut8fad] {
    opacity: 1;
}

.btn-toggle-password svg[b-ehlwut8fad] {
    width: 20px;
    height: 20px;
}

[b-ehlwut8fad] .validation-error {
    display: block;
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.35rem;
    padding-left: 0.25rem;
}

/* ============================================
   BOTÓN LOGIN — Pill naranja
   ============================================ */
.btn-login[b-ehlwut8fad] {
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: #C81E1E;
    color: white;
    border: none;
    border-radius: 9999px;
    font-family: "Fredoka", var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(200, 30, 30, 0.35);
    margin-top: 0.5rem;
}

.btn-login:hover:not(:disabled)[b-ehlwut8fad] {
    background: #9E1414;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(200, 30, 30, 0.45);
}

.btn-login:disabled[b-ehlwut8fad] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner[b-ehlwut8fad] {
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   FOOTER DEL FORMULARIO
   ============================================ */
.login-form-footer[b-ehlwut8fad] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

.login-home-link[b-ehlwut8fad] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.login-home-link:hover[b-ehlwut8fad] {
    color: var(--color-primary-dark);
}

.login-terms-link[b-ehlwut8fad] {
    color: var(--text-light);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.2s;
}

.login-terms-link:hover[b-ehlwut8fad] {
    color: var(--color-primary);
}

/* ============================================
   RESPONSIVE — TABLET (1024px)
   ============================================ */
@media (max-width: 1024px) {
    .login-page[b-ehlwut8fad] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    /* Panel izquierdo se convierte en header compacto */
    .login-brand[b-ehlwut8fad] {
        padding: 2rem 2rem 1.5rem;
        min-height: auto;
    }

    .login-brand-content[b-ehlwut8fad] {
        max-width: 500px;
    }

    .login-logo-img[b-ehlwut8fad] {
        width: 60px;
        height: 72px;
    }

    .login-greeting[b-ehlwut8fad] {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .login-chips[b-ehlwut8fad] {
        margin-bottom: 1rem;
    }

    .login-quote[b-ehlwut8fad] {
        display: none;
    }

    .login-doodle.d-1[b-ehlwut8fad] { font-size: 28px; top: 10%; left: 5%; }
    .login-doodle.d-2[b-ehlwut8fad] { font-size: 24px; bottom: 15%; right: 5%; }
    .login-doodle.d-3[b-ehlwut8fad] { font-size: 22px; top: 15%; right: 8%; }
    .login-doodle.d-circle[b-ehlwut8fad] { width: 45px; height: 45px; bottom: 20%; left: 8%; }

    .login-form-panel[b-ehlwut8fad] {
        padding: 2rem;
    }

    .login-form-container[b-ehlwut8fad] {
        max-width: 400px;
    }
}

/* ============================================
   RESPONSIVE — MOBILE (768px)
   ============================================ */
@media (max-width: 768px) {
    .login-brand[b-ehlwut8fad] {
        padding: 1.5rem 1.5rem 1.25rem;
    }

    .login-greeting[b-ehlwut8fad] {
        font-size: 1.4rem;
    }

    .login-chip[b-ehlwut8fad] {
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
    }

    .login-doodle.d-1[b-ehlwut8fad] { font-size: 22px; }
    .login-doodle.d-2[b-ehlwut8fad] { font-size: 20px; }
    .login-doodle.d-3[b-ehlwut8fad] { font-size: 18px; }
    .login-doodle.d-circle[b-ehlwut8fad] { width: 35px; height: 35px; border-width: 3px; }

    .login-form-panel[b-ehlwut8fad] {
        padding: 1.5rem;
    }

    .login-form-container[b-ehlwut8fad] {
        max-width: 100%;
    }

    .login-form-title[b-ehlwut8fad] {
        font-size: 1.5rem;
    }
}

/* ============================================
   RESPONSIVE — MOBILE SMALL (480px)
   ============================================ */
@media (max-width: 480px) {
    .login-brand[b-ehlwut8fad] {
        padding: 1.25rem 1rem 1rem;
    }

    .login-logo[b-ehlwut8fad] {
        margin-bottom: 0.75rem;
    }

    .login-logo-img[b-ehlwut8fad] {
        width: 45px;
        height: 54px;
    }

    .login-greeting[b-ehlwut8fad] {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .login-chips[b-ehlwut8fad] {
        gap: 0.4rem;
        margin-bottom: 0;
    }

    .login-chip[b-ehlwut8fad] {
        font-size: 0.65rem;
        padding: 0.25rem 0.6rem;
    }

    .login-doodle.d-3[b-ehlwut8fad], .login-doodle.d-circle[b-ehlwut8fad] { display: none; }
    .login-doodle.d-1[b-ehlwut8fad] { font-size: 18px; }
    .login-doodle.d-2[b-ehlwut8fad] { font-size: 16px; }

    .login-form-panel[b-ehlwut8fad] {
        padding: 1.25rem;
    }

    .login-form-title[b-ehlwut8fad] {
        font-size: 1.35rem;
    }

    [b-ehlwut8fad] .form-input {
        padding: 0.75rem 0.75rem 0.75rem 2.5rem;
        font-size: 0.9rem;
    }

    .btn-login[b-ehlwut8fad] {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }

    .login-form-footer[b-ehlwut8fad] {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

/* ============================================
   LANDSCAPE EN MOBILE
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .login-brand[b-ehlwut8fad] {
        display: none;
    }

    .login-form-panel[b-ehlwut8fad] {
        padding: 1.5rem;
    }

    .login-form-container[b-ehlwut8fad] {
        max-width: 400px;
    }

    .login-form-title[b-ehlwut8fad] {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .form-group[b-ehlwut8fad] {
        margin-bottom: 0.75rem;
    }

    .btn-login[b-ehlwut8fad] {
        margin-top: 0.25rem;
        padding: 0.7rem 1rem;
    }

    .login-form-footer[b-ehlwut8fad] {
        margin-top: 1rem;
        padding-top: 0.75rem;
    }
}
/* /Pages/Public/NotFound.razor.rz.scp.css */
/* ============================================
   404 NOT FOUND — Estética FUN
   CSS Isolation (scoped automáticamente)
   Variables globales en: css/app.css
   ============================================ */

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.not-found-page[b-6ktlqjltlv] {
    min-height: 100vh;
    background: #F4F7FB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 2rem;
}

/* ============================================
   LOGO BAR
   ============================================ */
.nf-logo-bar[b-6ktlqjltlv] {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.nf-logo[b-6ktlqjltlv] {
    width: 60px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
}

/* ============================================
   DOODLES FLOTANTES
   ============================================ */
.nf-doodles[b-6ktlqjltlv] {
    display: none !important;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    z-index: 1;
}

.nf-doodle[b-6ktlqjltlv] {
    position: absolute;
}

.nf-d1[b-6ktlqjltlv] {
    top: 12%;
    left: 8%;
    font-size: 42px;
    transform: rotate(-12deg);
    animation: nf-float-b-6ktlqjltlv 6s ease-in-out infinite;
}

.nf-d2[b-6ktlqjltlv] {
    top: 18%;
    right: 10%;
    font-size: 36px;
    transform: rotate(15deg);
    animation: nf-float-b-6ktlqjltlv 5s ease-in-out 0.5s infinite;
}

.nf-d3[b-6ktlqjltlv] {
    bottom: 15%;
    left: 12%;
    font-size: 44px;
    transform: rotate(8deg);
    animation: nf-float-b-6ktlqjltlv 7s ease-in-out 1s infinite;
}

.nf-d4[b-6ktlqjltlv] {
    bottom: 20%;
    right: 8%;
    font-size: 38px;
    transform: rotate(-10deg);
    animation: nf-float-b-6ktlqjltlv 5.5s ease-in-out 0.8s infinite;
}

@keyframes nf-float-b-6ktlqjltlv {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* ============================================
   CONTENIDO CENTRAL
   ============================================ */
.nf-content[b-6ktlqjltlv] {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 500px;
}

/* ============================================
   NÚMERO 404 GIGANTE
   ============================================ */
.nf-number[b-6ktlqjltlv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.nf-digit[b-6ktlqjltlv] {
    font-family: "Fredoka", var(--font-heading);
    font-size: clamp(6rem, 15vw, 10rem);
    font-weight: 900;
    line-height: 1;
    display: inline-block;
}

.nf-digit-4a[b-6ktlqjltlv] {
    color: var(--color-primary);
    transform: rotate(-8deg);
}

.nf-digit-0[b-6ktlqjltlv] {
    color: #C81E1E;
    transform: rotate(10deg);
    font-size: clamp(7rem, 17vw, 11rem);
}

.nf-digit-4b[b-6ktlqjltlv] {
    color: var(--color-primary);
    transform: rotate(6deg);
}

/* ============================================
   BRÚJULA
   ============================================ */
.nf-compass[b-6ktlqjltlv] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    animation: nf-float-b-6ktlqjltlv 4s ease-in-out infinite;
}

/* ============================================
   BADGE
   ============================================ */
.nf-badge[b-6ktlqjltlv] {
    display: inline-block;
    background: #C81E1E;
    color: white;
    padding: 0.4rem 1.25rem;
    border-radius: 9999px;
    font-family: "Fredoka", var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

/* ============================================
   TEXTOS
   ============================================ */
.nf-title[b-6ktlqjltlv] {
    font-family: "Fredoka", var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.nf-desc[b-6ktlqjltlv] {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   BOTONES
   ============================================ */
.nf-actions[b-6ktlqjltlv] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.nf-btn[b-6ktlqjltlv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.75rem;
    border-radius: 9999px;
    font-family: "Fredoka", var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.nf-btn-primary[b-6ktlqjltlv] {
    background: #C81E1E;
    color: white;
    box-shadow: 0 4px 15px rgba(200, 30, 30, 0.35);
}

.nf-btn-primary:hover[b-6ktlqjltlv] {
    background: #9E1414;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(200, 30, 30, 0.45);
}

.nf-btn-outline[b-6ktlqjltlv] {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.nf-btn-outline:hover[b-6ktlqjltlv] {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
}

/* ============================================
   RESPONSIVE — TABLET (768px)
   ============================================ */
@media (max-width: 768px) {
    .nf-d1[b-6ktlqjltlv], .nf-d2[b-6ktlqjltlv], .nf-d3[b-6ktlqjltlv], .nf-d4[b-6ktlqjltlv] {
        font-size: 28px;
    }

    .nf-compass[b-6ktlqjltlv] {
        font-size: 2.5rem;
    }

    .nf-desc[b-6ktlqjltlv] {
        font-size: 0.9rem;
    }
}

/* ============================================
   RESPONSIVE — MOBILE (480px)
   ============================================ */
@media (max-width: 480px) {
    .not-found-page[b-6ktlqjltlv] {
        padding: 1.5rem 1rem;
    }

    .nf-logo[b-6ktlqjltlv] {
        width: 45px;
        height: 55px;
    }

    .nf-d1[b-6ktlqjltlv] { font-size: 24px; top: 8%; left: 5%; }
    .nf-d2[b-6ktlqjltlv] { font-size: 22px; top: 12%; right: 5%; }
    .nf-d3[b-6ktlqjltlv] { font-size: 26px; bottom: 10%; left: 5%; }
    .nf-d4[b-6ktlqjltlv] { font-size: 22px; bottom: 14%; right: 5%; }

    .nf-compass[b-6ktlqjltlv] {
        font-size: 2rem;
    }

    .nf-badge[b-6ktlqjltlv] {
        font-size: 0.75rem;
        padding: 0.35rem 1rem;
    }

    .nf-desc[b-6ktlqjltlv] {
        font-size: 0.85rem;
    }

    .nf-actions[b-6ktlqjltlv] {
        flex-direction: column;
        align-items: stretch;
    }

    .nf-btn[b-6ktlqjltlv] {
        justify-content: center;
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Rotaciones más sutiles en móvil */
    .nf-digit-4a[b-6ktlqjltlv] { transform: rotate(-5deg); }
    .nf-digit-0[b-6ktlqjltlv] { transform: rotate(6deg); }
    .nf-digit-4b[b-6ktlqjltlv] { transform: rotate(4deg); }
}

/* ============================================
   LANDSCAPE EN MOBILE
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .not-found-page[b-6ktlqjltlv] {
        padding: 1rem;
    }

    .nf-logo-bar[b-6ktlqjltlv] {
        top: 0.5rem;
    }

    .nf-logo[b-6ktlqjltlv] {
        width: 35px;
        height: 40px;
    }

    .nf-digit[b-6ktlqjltlv] {
        font-size: 4rem;
    }

    .nf-digit-0[b-6ktlqjltlv] {
        font-size: 4.5rem;
    }

    .nf-compass[b-6ktlqjltlv] {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .nf-badge[b-6ktlqjltlv] {
        margin-bottom: 0.5rem;
    }

    .nf-title[b-6ktlqjltlv] {
        font-size: 1.2rem;
        margin-bottom: 0.35rem;
    }

    .nf-desc[b-6ktlqjltlv] {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    .nf-actions[b-6ktlqjltlv] {
        flex-direction: row;
    }

    .nf-btn[b-6ktlqjltlv] {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}
/* /Pages/Public/PoliticaPrivacidad.razor.rz.scp.css */
/* ============================================
   POLÍTICA DE PRIVACIDAD — Estética FUN
   CSS Isolation (scoped automáticamente)
   Comparte estructura con Términos y Condiciones
   Variables globales en: css/app.css
   ============================================ */

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.terms-page[b-vflcu6u59i] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-fun-cream, #fffdf7);
}

/* ============================================
   HEADER STICKY
   ============================================ */
.terms-topbar[b-vflcu6u59i] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.terms-topbar-inner[b-vflcu6u59i] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.terms-topbar-left[b-vflcu6u59i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.terms-topbar-logo[b-vflcu6u59i] {
    width: 36px;
    height: 42px;
    object-fit: contain;
}

.terms-topbar-text[b-vflcu6u59i] {
    display: flex;
    flex-direction: column;
}

.terms-topbar-title[b-vflcu6u59i] {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
}

.terms-topbar-subtitle[b-vflcu6u59i] {
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: 500;
}

.terms-topbar-actions[b-vflcu6u59i] {
    display: flex;
    gap: 0.5rem;
}

.terms-topbar-btn[b-vflcu6u59i] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.terms-topbar-btn:hover[b-vflcu6u59i] {
    background: var(--color-primary);
    color: white;
}

/* ============================================
   LAYOUT SIDEBAR + CONTENT
   ============================================ */
.terms-layout[b-vflcu6u59i] {
    flex: 1;
    display: grid;
    grid-template-columns: 260px 1fr;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ============================================
   SIDEBAR NAVEGACIÓN
   ============================================ */
.terms-sidebar[b-vflcu6u59i] {
    border-right: 1px solid #e2e8f0;
    background: white;
}

.terms-sidebar-inner[b-vflcu6u59i] {
    position: sticky;
    top: 65px;
    padding: 1.5rem 1.25rem;
    max-height: calc(100vh - 65px);
    overflow-y: auto;
}

.terms-sidebar-label[b-vflcu6u59i] {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--color-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1rem;
}

.terms-nav[b-vflcu6u59i] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.terms-nav li[b-vflcu6u59i] {
    margin-bottom: 0.15rem;
}

.terms-nav-link[b-vflcu6u59i] {
    display: block;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-gray);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s ease;
    font-weight: 500;
    line-height: 1.4;
}

.terms-nav-link:hover[b-vflcu6u59i] {
    background: var(--bg-fun-orange, #fff4e0);
    color: var(--text-dark);
}

/* ============================================
   CONTENIDO PRINCIPAL
   ============================================ */
.terms-main[b-vflcu6u59i] {
    padding: 2rem 3rem;
    max-width: 800px;
}

.terms-main-header[b-vflcu6u59i] {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-secondary);
}

.terms-main-header h1[b-vflcu6u59i] {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 0.5rem;
}

.terms-meta[b-vflcu6u59i] {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0;
}

/* ============================================
   SECCIONES
   ============================================ */
.terms-section[b-vflcu6u59i] {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f0f0f0;
}

.terms-section:last-child[b-vflcu6u59i] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.terms-section h2[b-vflcu6u59i] {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-secondary);
    display: inline-block;
}

.terms-section h3[b-vflcu6u59i] {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin: 1.25rem 0 0.5rem;
}

.terms-section p[b-vflcu6u59i] {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    line-height: 1.75;
    color: #4b5563;
    margin: 0 0 0.75rem;
    text-align: justify;
}

.terms-section ul[b-vflcu6u59i] {
    margin: 0.5rem 0 0.75rem 0;
    padding-left: 1.25rem;
}

.terms-section li[b-vflcu6u59i] {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 0.35rem;
}

.terms-section li strong[b-vflcu6u59i] {
    color: #1f2937;
}

/* ============================================
   CALLOUT (contacto, info destacada)
   ============================================ */
.terms-callout[b-vflcu6u59i] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--color-primary);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0;
}

.terms-callout p[b-vflcu6u59i] {
    margin: 0.15rem 0;
    font-size: 0.875rem;
    color: #374151;
    text-align: left;
}

/* Important note (yellow) */
.terms-important[b-vflcu6u59i] {
    background: var(--bg-fun-orange, #fff4e0);
    border-left: 4px solid var(--color-secondary);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.6;
}

/* ============================================
   FOOTER — Botón volver
   ============================================ */
.terms-main-footer[b-vflcu6u59i] {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid #e2e8f0;
    text-align: center;
}

.terms-accept-btn[b-vflcu6u59i] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2.5rem;
    background: var(--color-secondary);
    color: white;
    border-radius: 9999px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 159, 28, 0.35);
}

.terms-accept-btn:hover[b-vflcu6u59i] {
    background: var(--color-secondary-dark, #e09100);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 159, 28, 0.45);
}

/* ============================================
   RESPONSIVE — TABLET (1024px)
   ============================================ */
@media (max-width: 1024px) {
    .terms-layout[b-vflcu6u59i] {
        grid-template-columns: 220px 1fr;
    }

    .terms-main[b-vflcu6u59i] {
        padding: 2rem;
    }
}

/* ============================================
   RESPONSIVE — MOBILE (768px)
   ============================================ */
@media (max-width: 768px) {
    .terms-layout[b-vflcu6u59i] {
        grid-template-columns: 1fr;
    }

    .terms-sidebar[b-vflcu6u59i] {
        display: none;
    }

    .terms-main[b-vflcu6u59i] {
        padding: 1.5rem;
    }

    .terms-main-header h1[b-vflcu6u59i] {
        font-size: 1.5rem;
    }

    .terms-topbar-inner[b-vflcu6u59i] {
        padding: 0.6rem 1rem;
    }

    .terms-topbar-title[b-vflcu6u59i] {
        font-size: 0.8rem;
    }

    .terms-topbar-subtitle[b-vflcu6u59i] {
        display: none;
    }
}

/* ============================================
   RESPONSIVE — MOBILE SMALL (480px)
   ============================================ */
@media (max-width: 480px) {
    .terms-main[b-vflcu6u59i] {
        padding: 1.25rem 1rem;
    }

    .terms-main-header h1[b-vflcu6u59i] {
        font-size: 1.3rem;
    }

    .terms-section h2[b-vflcu6u59i] {
        font-size: 1.05rem;
    }

    .terms-section h3[b-vflcu6u59i] {
        font-size: 0.9rem;
    }

    .terms-section p[b-vflcu6u59i],
    .terms-section li[b-vflcu6u59i] {
        font-size: 0.8125rem;
    }

    .terms-accept-btn[b-vflcu6u59i] {
        padding: 0.75rem 2rem;
        font-size: 0.9rem;
    }

    .terms-topbar-logo[b-vflcu6u59i] {
        width: 28px;
        height: 32px;
    }

    .terms-topbar-btn[b-vflcu6u59i] {
        font-size: 0.7rem;
        padding: 0.3rem 0.75rem;
    }
}
/* /Pages/Public/TerminosCondiciones.razor.rz.scp.css */
/* ============================================
   TÉRMINOS Y CONDICIONES — Estética FUN
   CSS Isolation (scoped automáticamente)
   Variables globales en: css/app.css
   ============================================ */

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.terms-page[b-dpqfy79jol] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-fun-cream, #fffdf7);
}

/* ============================================
   HEADER STICKY
   ============================================ */
.terms-topbar[b-dpqfy79jol] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.terms-topbar-inner[b-dpqfy79jol] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.terms-topbar-left[b-dpqfy79jol] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.terms-topbar-logo[b-dpqfy79jol] {
    width: 36px;
    height: 42px;
    object-fit: contain;
}

.terms-topbar-text[b-dpqfy79jol] {
    display: flex;
    flex-direction: column;
}

.terms-topbar-title[b-dpqfy79jol] {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
}

.terms-topbar-subtitle[b-dpqfy79jol] {
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: 500;
}

.terms-topbar-actions[b-dpqfy79jol] {
    display: flex;
    gap: 0.5rem;
}

.terms-topbar-btn[b-dpqfy79jol] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.terms-topbar-btn:hover[b-dpqfy79jol] {
    background: var(--color-primary);
    color: white;
}

/* ============================================
   LAYOUT SIDEBAR + CONTENT
   ============================================ */
.terms-layout[b-dpqfy79jol] {
    flex: 1;
    display: grid;
    grid-template-columns: 260px 1fr;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ============================================
   SIDEBAR NAVEGACIÓN
   ============================================ */
.terms-sidebar[b-dpqfy79jol] {
    border-right: 1px solid #e2e8f0;
    background: white;
}

.terms-sidebar-inner[b-dpqfy79jol] {
    position: sticky;
    top: 65px;
    padding: 1.5rem 1.25rem;
    max-height: calc(100vh - 65px);
    overflow-y: auto;
}

.terms-sidebar-label[b-dpqfy79jol] {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--color-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1rem;
}

.terms-nav[b-dpqfy79jol] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.terms-nav li[b-dpqfy79jol] {
    margin-bottom: 0.15rem;
}

.terms-nav-link[b-dpqfy79jol] {
    display: block;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-gray);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s ease;
    font-weight: 500;
    line-height: 1.4;
}

.terms-nav-link:hover[b-dpqfy79jol] {
    background: var(--bg-fun-orange, #fff4e0);
    color: var(--text-dark);
}

/* ============================================
   CONTENIDO PRINCIPAL
   ============================================ */
.terms-main[b-dpqfy79jol] {
    padding: 2rem 3rem;
    max-width: 800px;
}

.terms-main-header[b-dpqfy79jol] {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-secondary);
}

.terms-main-header h1[b-dpqfy79jol] {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 0.5rem;
}

.terms-meta[b-dpqfy79jol] {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0;
}

/* ============================================
   SECCIONES
   ============================================ */
.terms-body[b-dpqfy79jol] {
    /* container for sections */
}

.terms-section[b-dpqfy79jol] {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f0f0f0;
}

.terms-section:last-child[b-dpqfy79jol] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.terms-section h2[b-dpqfy79jol] {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-secondary);
    display: inline-block;
}

.terms-section h3[b-dpqfy79jol] {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin: 1.25rem 0 0.5rem;
}

.terms-section p[b-dpqfy79jol] {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    line-height: 1.75;
    color: #4b5563;
    margin: 0 0 0.75rem;
    text-align: justify;
}

.terms-section ul[b-dpqfy79jol] {
    margin: 0.5rem 0 0.75rem 0;
    padding-left: 1.25rem;
}

.terms-section li[b-dpqfy79jol] {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 0.35rem;
}

.terms-section li strong[b-dpqfy79jol] {
    color: #1f2937;
}

/* ============================================
   CALLOUT (contacto, info destacada)
   ============================================ */
.terms-callout[b-dpqfy79jol] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--color-primary);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0;
}

.terms-callout p[b-dpqfy79jol] {
    margin: 0.15rem 0;
    font-size: 0.875rem;
    color: #374151;
    text-align: left;
}

/* Important note (yellow) */
.terms-important[b-dpqfy79jol] {
    background: var(--bg-fun-orange, #fff4e0);
    border-left: 4px solid var(--color-secondary);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.6;
}

/* ============================================
   FOOTER — Botón aceptar
   ============================================ */
.terms-main-footer[b-dpqfy79jol] {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid #e2e8f0;
    text-align: center;
}

.terms-accept-btn[b-dpqfy79jol] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2.5rem;
    background: var(--color-secondary);
    color: white;
    border-radius: 9999px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 159, 28, 0.35);
}

.terms-accept-btn:hover[b-dpqfy79jol] {
    background: var(--color-secondary-dark, #e09100);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 159, 28, 0.45);
}

/* ============================================
   RESPONSIVE — TABLET (1024px)
   ============================================ */
@media (max-width: 1024px) {
    .terms-layout[b-dpqfy79jol] {
        grid-template-columns: 220px 1fr;
    }

    .terms-main[b-dpqfy79jol] {
        padding: 2rem;
    }
}

/* ============================================
   RESPONSIVE — MOBILE (768px)
   ============================================ */
@media (max-width: 768px) {
    .terms-layout[b-dpqfy79jol] {
        grid-template-columns: 1fr;
    }

    .terms-sidebar[b-dpqfy79jol] {
        display: none;
    }

    .terms-main[b-dpqfy79jol] {
        padding: 1.5rem;
    }

    .terms-main-header h1[b-dpqfy79jol] {
        font-size: 1.5rem;
    }

    .terms-topbar-inner[b-dpqfy79jol] {
        padding: 0.6rem 1rem;
    }

    .terms-topbar-title[b-dpqfy79jol] {
        font-size: 0.8rem;
    }

    .terms-topbar-subtitle[b-dpqfy79jol] {
        display: none;
    }
}

/* ============================================
   RESPONSIVE — MOBILE SMALL (480px)
   ============================================ */
@media (max-width: 480px) {
    .terms-main[b-dpqfy79jol] {
        padding: 1.25rem 1rem;
    }

    .terms-main-header h1[b-dpqfy79jol] {
        font-size: 1.3rem;
    }

    .terms-section h2[b-dpqfy79jol] {
        font-size: 1.05rem;
    }

    .terms-section h3[b-dpqfy79jol] {
        font-size: 0.9rem;
    }

    .terms-section p[b-dpqfy79jol],
    .terms-section li[b-dpqfy79jol] {
        font-size: 0.8125rem;
    }

    .terms-accept-btn[b-dpqfy79jol] {
        padding: 0.75rem 2rem;
        font-size: 0.9rem;
    }

    .terms-topbar-logo[b-dpqfy79jol] {
        width: 28px;
        height: 32px;
    }

    .terms-topbar-btn[b-dpqfy79jol] {
        font-size: 0.7rem;
        padding: 0.3rem 0.75rem;
    }
}