/* ============================================================
   SISTEMA DE GESTION ESCOLAR - PCSC
   Diseno: Elegante institucional - Navy + Gold + Slate
   Fuentes: Inter / system UI
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ===== VARIABLES ===== */
:root {
    --navy:       #0d1b2a;
    --navy-mid:   #1a2d42;
    --navy-light: #243b55;
    --gold:       #c8952a;
    --gold-light: #e8b84b;
    --gold-pale:  #fdf3e0;
    --slate:      #e8ecf1;
    --slate-mid:  #cdd5df;
    --white:      #ffffff;
    --text-dark:  #0d1b2a;
    --text-mid:   #4a5568;
    --text-light: #8a9ab0;
    --success:    #27ae60;
    --danger:     #e74c3c;
    --warning:    #f39c12;
    --info:       #2980b9;
    --sidebar-w:  244px;
    --sidebar-collapsed-w: 84px;
    --topbar-h:   64px;
    --radius:     12px;
    --radius-sm:  8px;
    --font-body:  'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-heading: var(--font-body);
    --font-sidebar: var(--font-body);
    --shadow-sm:  0 2px 8px rgba(13,27,42,0.08);
    --shadow-md:  0 4px 20px rgba(13,27,42,0.12);
    --shadow-lg:  0 8px 40px rgba(13,27,42,0.18);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --navy: #07111f;
    --navy-mid: #0f1f33;
    --navy-light: #1b3350;
    --slate: #243244;
    --slate-mid: #35465a;
    --white: #ffffff;
    --text-dark: #edf4ff;
    --text-mid: #bfd0e4;
    --text-light: #8ea2b8;
    --gold-pale: #2b2414;
}

[data-theme="dark"] body {
    background: #07111f;
}

[data-theme="dark"] .table-container,
[data-theme="dark"] .form-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .topbar,
[data-theme="dark"] .quick-link-card,
[data-theme="dark"] .notifications-menu,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .role-card {
    background: #101b2a;
    border-color: #26364a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .page-header h1,
[data-theme="dark"] .table-header h2,
[data-theme="dark"] .dashboard-section-title,
[data-theme="dark"] .panel-list-item strong,
[data-theme="dark"] .notifications-menu-header strong,
[data-theme="dark"] .quick-link-card strong,
[data-theme="dark"] .card h3,
[data-theme="dark"] .role-card-title,
[data-theme="dark"] .form-step-btn.active,
[data-theme="dark"] .cal-day-num,
[data-theme="dark"] .topbar-userinfo span {
    color: #edf4ff;
}

[data-theme="dark"] .page-header p,
[data-theme="dark"] .card p,
[data-theme="dark"] .quick-link-card span,
[data-theme="dark"] .panel-list-item span,
[data-theme="dark"] .notification-item small,
[data-theme="dark"] .topbar-userinfo small,
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .form-group label {
    color: #bfd0e4;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #0b1624;
    border-color: #35465a;
    color: #edf4ff;
}

[data-theme="dark"] .search-bar,
[data-theme="dark"] .page-btn,
[data-theme="dark"] .btn-light,
[data-theme="dark"] .cal-day,
[data-theme="dark"] .role-permission-list {
    background: #0b1624;
    border-color: #35465a;
    color: #edf4ff;
}

[data-theme="dark"] tbody tr:nth-child(even) { background: rgba(255,255,255,0.025); }
[data-theme="dark"] tbody tr:hover { background: rgba(200,149,42,0.14); }
[data-theme="dark"] tbody td { color: #edf4ff; }
[data-theme="dark"] .notification-item { border-bottom-color: #243244; }
[data-theme="dark"] .notification-item:hover .notification-item-button { background: #17263a; }
[data-theme="dark"] .notification-item.unread .notification-item-button { background: #251f13; }
[data-theme="dark"] .btn-outline { color: #edf4ff; border-color: #53657a; }
[data-theme="dark"] .btn-outline:hover { background: #243244; border-color: #e8b84b; }
[data-theme="dark"] .icon-btn { color: #d8e5f4; }
[data-theme="dark"] .icon-btn:hover { background: #17263a; color: #ffffff; }

[data-theme="dark"] .dashboard-stats-grid .stat-card-academy,
[data-theme="dark"] .dashboard-stats-grid .stat-card-families,
[data-theme="dark"] .dashboard-stats-grid .stat-card-teachers,
[data-theme="dark"] .dashboard-stats-grid .stat-card-classes,
[data-theme="dark"] .dashboard-stats-grid .stat-card-admin,
[data-theme="dark"] .dashboard-stats-grid .stat-card-messages,
[data-theme="dark"] .dashboard-stats-grid .stat-card-attendance,
[data-theme="dark"] .dashboard-stats-grid .stat-card-calendar,
[data-theme="dark"] .dashboard-stats-grid .stat-card-payments,
[data-theme="dark"] .dashboard-stats-grid .stat-card-indigo,
[data-theme="dark"] .dashboard-stats-grid .stat-card-rose,
[data-theme="dark"] .dashboard-stats-grid .stat-card-amber,
[data-theme="dark"] .dashboard-stats-grid .stat-card-cyan,
[data-theme="dark"] .dashboard-stats-grid .stat-card-lime,
[data-theme="dark"] .dashboard-stats-grid .stat-card-slate {
    background: #122033;
    border-color: #2d4158;
}

[data-theme="dark"] .stat-card::after {
    background: none;
}

[data-theme="dark"] .dashboard-stats-grid .stat-card::after {
    background: none;
}

[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .dashboard-stats-grid .stat-card:hover,
[data-theme="dark"] .card:hover,
[data-theme="dark"] .quick-link-card:hover,
[data-theme="dark"] .role-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

[data-theme="dark"] .stat-content strong,
[data-theme="dark"] .stat-content span {
    color: #f6fbff;
}

[data-theme="dark"] .stat-content small { color: #b7c6d8; }

[data-theme="dark"] .stat-icon,
[data-theme="dark"] .dashboard-stats-grid .stat-icon,
[data-theme="dark"] .card-icon,
[data-theme="dark"] .quick-link-icon {
    background: #1b2d43;
    border: 1px solid #3a4f68;
    box-shadow: none;
}

[data-theme="dark"] .card::before,
[data-theme="dark"] .quick-link-card::before {
    opacity: 0.85;
}

[data-theme="dark"] .dashboard-intro {
    background: #122033;
    border-color: #2d4158;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
    color: #edf4ff;
}

[data-theme="dark"] .dashboard-intro::before {
    background: rgba(255, 255, 255, 0.035);
}

[data-theme="dark"] .dashboard-intro p,
[data-theme="dark"] .dashboard-intro .meta-item {
    color: #bfd0e4;
}

[data-theme="dark"] .dashboard-intro-kicker {
    background: rgba(200,149,42,0.14);
    border-color: rgba(232,184,75,0.35);
    color: #ffd978;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-dark);
    background: #f0f3f8;
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    letter-spacing: 0;
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.layout {
    display: flex;
    min-height: 100vh;
}

.app-layout {
    display: flex;
    min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    width: var(--sidebar-w);
    background: var(--navy);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    overflow: visible;
    z-index: 1000;
    transition: var(--transition);
}

.sidebar.no-transition,
.main-content.no-transition,
.main-wrapper.no-transition {
    transition: none !important;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 10px 18px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 3;
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    flex: 1;
}

.logo-icon {
    width: 68px; height: 68px;
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: var(--navy);
    box-shadow: none;
    flex-shrink: 0;
    position: relative;
}

.logo-badge {
    background: transparent;
    border: none;
}

.logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    max-width: 138px;
    margin-left: -1px;
    text-align: center;
}
.logo-title {
    font-family: var(--font-sidebar);
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
}
.logo-sub {
    font-family: var(--font-sidebar);
    font-size: 9px;
    color: rgba(255,255,255,0.62);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 5px;
    white-space: nowrap;
}

.sidebar-toggle {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--gold-light);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 10px;
    transition: var(--transition);
    flex-shrink: 0;
}
.sidebar-toggle:hover { color: var(--white); background: rgba(255,255,255,0.12); }

.sidebar-mobile-close {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--gold-light);
    cursor: pointer;
    font-size: 22px;
    font-weight: 900;
    padding: 6px;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(13,27,42,0.14);
    transition: var(--transition);
}

.sidebar-mobile-close i {
    font-weight: 900;
    transform: scale(1.08);
}

.sidebar-mobile-close:hover {
    transform: translateY(-1px);
}

/* User block */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.user-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), #a0720f);
    color: var(--navy);
    font-weight: 700;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(200,149,42,0.35);
}

.user-info { display: flex; flex-direction: column; overflow: hidden; }
.user-name {
    font-family: var(--font-sidebar);
    font-size: 12.8px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--white);
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}
.user-role {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 3px;
    width: fit-content;
}

/* Role badge colors */
.badge-administrador { background: rgba(231,76,60,0.2); color: #ff8a80; }
.badge-director      { background: rgba(155,89,182,0.2); color: #ce93d8; }
.badge-secretaria    { background: rgba(41,128,185,0.2); color: #90caf9; }
.badge-profesor      { background: rgba(39,174,96,0.2); color: #a5d6a7; }
.badge-padre         { background: rgba(200,149,42,0.2); color: var(--gold-light); }
.badge-tesoreria     { background: rgba(46, 204, 113, 0.18); color: #9be7b0; }
.badge-gerencia      { background: rgba(99, 102, 241, 0.18); color: #c7d2fe; }
.badge-logistica     { background: rgba(52, 152, 219, 0.2); color: #a7d4ff; }
.badge-auxiliar      { background: rgba(241, 196, 15, 0.18); color: #ffe08a; }

/* Nav */
.sidebar-nav {
    padding: 12px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--navy-light) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--navy-light); border-radius: 4px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10.5px 12px;
    border-radius: 9px;
    color: rgba(255,255,255,0.68);
    text-decoration: none;
    font-family: var(--font-sidebar);
    font-size: 13.2px;
    font-weight: 500;
    line-height: 1.25;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}

.nav-item:hover {
    background: rgba(255,255,255,0.08);
    color: var(--white);
}

.nav-item.active {
    background: linear-gradient(135deg, var(--gold), #a0720f);
    color: var(--navy);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(200,149,42,0.35);
}

.nav-item.active i { color: var(--navy); }

.nav-item i { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; opacity: 0.92; }

.nav-logout { margin-top: auto; color: rgba(231,76,60,0.7); }
.nav-logout:hover { background: rgba(231,76,60,0.12); color: #ff8a80; }

.nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 8px 0;
}

/* Nav Groups (accordion) */
.nav-group { display: flex; flex-direction: column; }

.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10.5px 12px;
    border-radius: 9px;
    color: rgba(255,255,255,0.68);
    font-family: var(--font-sidebar);
    font-size: 13.2px;
    font-weight: 500;
    line-height: 1.25;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: var(--transition);
}
.nav-group-toggle:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.nav-group-toggle.active {
    background: linear-gradient(135deg, var(--gold), #a0720f);
    color: var(--navy);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(200,149,42,0.35);
}
.nav-group-toggle.active i { color: var(--navy); }
.nav-group-toggle.open:not(.active) {
    color: var(--gold-light);
    background: rgba(200,149,42,0.08);
}

.nav-group-toggle i { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; opacity: 0.92; }
.nav-arrow { margin-left: auto !important; font-size: 10px !important; transition: transform 0.25s; }
.nav-group-toggle.open .nav-arrow { transform: rotate(90deg); }

.nav-submenu {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0 4px 28px;
}
.nav-submenu.open { display: flex; }

.nav-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 7px;
    color: rgba(255,255,255,0.58);
    text-decoration: none;
    font-family: var(--font-sidebar);
    font-size: 12.8px;
    font-weight: 500;
    line-height: 1.25;
    transition: var(--transition);
}
.nav-sub-item:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.nav-sub-item.active {
    background: transparent;
    color: var(--gold-light);
    font-weight: 600;
}
.nav-sub-item.active i { color: var(--gold-light); }
.nav-sub-item i { font-size: 12px; width: 14px; }

.badge-count {
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: auto;
}

.profile-photo-preview {
    width: 112px;
    height: 112px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 800;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-page-shell {
    width: min(100%, 1080px);
    margin: 0 auto;
}

.profile-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr);
    gap: 22px;
    align-items: start;
}

.profile-account-card,
.profile-notification-card {
    min-width: 0;
    overflow: hidden;
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 2px 0 24px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--slate-mid);
}

.profile-identity-copy { min-width: 0; }
.profile-identity-copy h3 { margin: 0 0 7px; font-size: 19px; color: var(--text-dark); }
.profile-identity-copy p { margin: 0 0 8px; color: var(--text-mid); overflow-wrap: anywhere; }

.profile-file-input {
    width: 100%;
    min-height: 48px;
    padding: 5px;
    border: 1px solid var(--slate-mid);
    border-radius: 9px;
    background: #f8fafc;
    color: var(--text-mid);
    font-family: var(--font-body);
}

.profile-file-input::file-selector-button {
    min-height: 36px;
    margin-right: 12px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: var(--navy);
    color: #fff;
    font: 700 12px var(--font-body);
    cursor: pointer;
}

.profile-push-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 28px;
}

.profile-push-symbol {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--gold-pale), #f8dfaa);
    color: #a8740e;
    font-size: 23px;
    box-shadow: 0 8px 18px rgba(200,149,42,.16);
}

.profile-push-copy h3 { margin: 0 0 8px; color: var(--text-dark); font-size: 18px; }
.profile-push-copy p { margin: 0; color: var(--text-mid); line-height: 1.65; }

.profile-push-status {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 13px;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    background: #f7f9fc;
    color: #52657a;
    font-size: 12px;
    line-height: 1.45;
}

.profile-push-status i { color: var(--gold); margin-top: 2px; }
.profile-push-action { width: 100%; min-height: 46px; justify-content: center; }
.profile-push-note { display: flex; gap: 7px; color: var(--text-light); line-height: 1.45; }

[data-theme="dark"] .profile-file-input,
[data-theme="dark"] .profile-push-status {
    background: #0b1624;
    border-color: #35465a;
    color: #bfd0e4;
}

[data-theme="dark"] .profile-push-symbol {
    background: #2b2414;
    color: #ffd978;
}

.reservation-year-filter {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid #d9e1eb;
    border-radius: 10px;
    background: rgba(255,255,255,.82);
    box-shadow: var(--shadow-sm);
}

.reservation-year-field {
    display: grid;
    gap: 2px;
}

.reservation-year-field label {
    color: var(--text-mid);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.reservation-year-field input,
.vacancy-number-input {
    height: 34px;
    border: 1.5px solid #c8d3e0;
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.reservation-year-field input { width: 92px; padding: 0 7px; }
.vacancy-number-input { width: 64px; padding: 0 4px; }
.reservation-year-filter .btn { height: 34px; min-height: 34px; padding: 0 13px; }

.reservation-year-field input:focus,
.vacancy-number-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200,149,42,.15);
    background: #fffdf8;
}

.vacancy-update-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 106px;
}

.vacancy-save-button {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
}

[data-theme="dark"] .reservation-year-filter {
    background: #101b2a;
    border-color: #35465a;
}

[data-theme="dark"] .reservation-year-field input,
[data-theme="dark"] .vacancy-number-input {
    background: #0b1624;
    border-color: #455870;
    color: #edf4ff;
}

@media (max-width: 560px) {
    .reservation-year-filter { width: 100%; }
    .reservation-year-field { flex: 1; }
    .reservation-year-field input { width: 100%; }
    .reservation-year-filter .btn { min-height: 34px; }
}

@media (max-width: 940px) {
    .profile-settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .profile-identity { align-items: flex-start; gap: 16px; }
    .profile-photo-preview { width: 88px; height: 88px; border-radius: 20px; font-size: 34px; }
    .profile-push-body { padding: 22px 18px; }
    .profile-account-card .modal-footer { flex-direction: column-reverse; }
    .profile-account-card .modal-footer .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: calc(100% - var(--sidebar-w));
    min-width: 0;
    transition: margin-left 0.25s;
}

.main-wrapper {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: calc(100% - var(--sidebar-w));
    min-width: 0;
    transition: margin-left 0.25s;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
    height: var(--topbar-h);
    background: var(--white);
    border-bottom: 1px solid var(--slate);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.topbar-left { display: flex; align-items: center; gap: 16px; }
.topbar-right { display: flex; align-items: center; gap: 14px; min-width: 0; }

.mobile-toggle {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--gold-light);
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(13,27,42,0.14);
    transition: var(--transition);
}
.mobile-toggle:hover { transform: translateY(-1px); }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-mid);
    font-weight: 500;
}
.breadcrumb i { color: var(--gold); }
.breadcrumb-separator {
    color: var(--text-light);
    font-weight: 700;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: var(--text-mid);
    position: relative;
    transition: var(--transition);
}
.icon-btn:hover { background: var(--slate); }

.topbar-message-link {
    text-decoration: none;
}

.message-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef1f2d;
    color: #fff;
    border: 2px solid var(--white);
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(239, 31, 45, 0.28);
}

.message-badge[hidden],
.notif-dot[hidden] {
    display: none !important;
}

.notif-dot {
    position: absolute;
    top: 7px; right: 7px;
    width: 8px; height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid var(--white);
}

.topbar-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-user-link {
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    padding: 6px 10px;
}
.topbar-user-link:hover {
    background: var(--slate);
}
.topbar-avatar img,
.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}
.topbar-notifications { position: relative; }
.notifications-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: min(360px, calc(100vw - 24px));
    background: var(--white);
    border: 1px solid var(--slate);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: none;
    overflow: hidden;
    z-index: 1200;
}
.notifications-menu.open { display: block; }
.notifications-menu-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--slate);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.notifications-menu-header span { color: var(--text-light); font-size: 12px; }
.notification-item {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(232,236,241,0.8);
}
.notification-item-button {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--text-dark);
    font: inherit;
}
.notification-item:hover .notification-item-button { background: #f7f9fc; }
.notification-item.unread .notification-item-button { background: #fff8eb; }
.notification-category {
    font-size: 10px;
    font-weight: 800;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.notification-item small {
    color: var(--text-mid);
    line-height: 1.4;
}
.notification-empty { padding: 18px 16px; color: var(--text-light); text-align: center; }
.topbar-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--gold-light);
    font-weight: 700;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.topbar-userinfo { display: flex; flex-direction: column; min-width: 0; max-width: 240px; }
.topbar-userinfo span { font-size: 13px; font-weight: 600; color: var(--text-dark); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-userinfo small { font-size: 11px; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) { .topbar-userinfo { max-width: 170px; } }

.alert-acceso-denegado {
    background: #fdecea;
    border-left: 4px solid var(--danger);
    color: #c62828;
    padding: 12px 20px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-alerts {
    border-bottom: 1px solid var(--slate);
    padding: 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.topbar-alerts-warning {
    background: #fff7e6;
    border-bottom-color: #f1d49b;
}

.topbar-alerts-danger {
    background: #fff3f3;
    border-bottom-color: #f0b4b4;
}

.topbar-alert-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.topbar-alert-content {
    min-width: 260px;
    flex: 1;
}

.topbar-alert-title {
    color: #0d1b2a;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.topbar-alert-title i {
    color: var(--gold);
}

.topbar-alerts-danger .topbar-alert-title,
.topbar-alerts-danger .topbar-alert-title i {
    color: #7a1f1f;
}

.topbar-alert-meta {
    display: inline-block;
    font-size: 12.5px;
    color: #4a5568;
    margin-top: 3px;
    line-height: 1.5;
}

.topbar-alert-description {
    font-size: 12.5px;
    color: #66758a;
    margin-top: 2px;
}

.topbar-alert-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.topbar-alert-actions input {
    padding: 8px 10px;
    border: 1px solid #e0c483;
    border-radius: 8px;
    font-size: 12.5px;
    min-width: 170px;
    background: #fff;
    color: #0d1b2a;
}

[data-theme="dark"] .topbar-alerts-warning,
[data-theme="dark"] .topbar-alerts-danger {
    background: #111c2b;
    border-bottom-color: #2a3a50;
}

[data-theme="dark"] .topbar-alert-title,
[data-theme="dark"] .topbar-alerts-danger .topbar-alert-title {
    color: #edf4ff;
}

[data-theme="dark"] .topbar-alert-title i,
[data-theme="dark"] .topbar-alerts-danger .topbar-alert-title i {
    color: #e8b84b;
}

[data-theme="dark"] .topbar-alert-meta,
[data-theme="dark"] .topbar-alert-description {
    color: #bfd0e4;
}

[data-theme="dark"] .topbar-alert-actions input {
    background: #0b1624;
    border-color: #35465a;
    color: #edf4ff;
}

[data-theme="dark"] .topbar-alert-actions .btn-outline {
    background: #17263a;
    color: #edf4ff;
    border-color: #53657a;
}

/* ============================================================
   PAGE CONTENT AREA
   ============================================================ */
.page-content {
    padding: 28px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

.page-header p {
    color: var(--text-mid);
    font-size: 14px;
    margin-top: 4px;
}

/* ============================================================
   CARDS / STATS
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 18px;
    margin-bottom: 28px;
    min-width: 0;
}

.dashboard-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.stat-card {
    background: #f8fafc;
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: 0 10px 26px rgba(13,27,42,0.08);
    border: 1px solid rgba(13,27,42,0.06);
    display: flex;
    align-items: flex-start;
    gap: 18px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    min-height: 132px;
    isolation: isolate;
}

.stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--gold);
    pointer-events: none;
}

.stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.68), transparent 45%),
        linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 0;
}

.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.dashboard-stats-grid .stat-card {
    min-height: 126px;
    padding: 18px;
    align-items: stretch;
    background: var(--white);
    border: 1px solid rgba(13,27,42,0.08);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(13,27,42,0.07);
}

.dashboard-stats-grid .stat-card::before {
    left: 16px;
    right: 16px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 4px;
    border-radius: 0 0 6px 6px;
}

.dashboard-stats-grid .stat-card::after {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.30), transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
}

.dashboard-stats-grid .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(13,27,42,0.12);
}

.stat-card-link {
    text-decoration: none;
    color: inherit;
}

.stat-icon {
    width: 52px; height: 52px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
    position: relative;
    z-index: 1;
}

.dashboard-stats-grid .stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    font-size: 23px;
    box-shadow: none;
}

.stat-content {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.stat-content strong {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 700;
    line-height: 1.06;
    color: var(--navy);
    letter-spacing: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.dashboard-stats-grid .stat-content {
    align-content: end;
    gap: 5px;
}

.dashboard-stats-grid .stat-content strong {
    font-size: clamp(20px, 1.7vw, 28px);
}

.dashboard-stats-grid .stat-content span {
    font-size: 14px;
}

.dashboard-stats-grid .stat-content small {
    font-size: 11px;
}

.stat-content span {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #10233a;
    text-wrap: balance;
}

.stat-content small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: #66758a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-icon.navy    { background: rgba(13,27,42,0.08); color: var(--navy); }
.stat-icon.gold    { background: rgba(200,149,42,0.12); color: var(--gold); }
.stat-icon.success { background: rgba(39,174,96,0.12); color: var(--success); }
.stat-icon.warning { background: rgba(200,149,42,0.12); color: var(--gold); }
.stat-icon.danger  { background: rgba(231,76,60,0.12); color: var(--danger); }
.stat-icon.info    { background: rgba(41,128,185,0.12); color: var(--info); }

.stat-data { display: flex; flex-direction: column; }
.stat-number {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}
.stat-label {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.stat-subtext {
    font-size: 11px;
    color: #94a0b2;
    margin-top: 6px;
}

.stat-icon.academy { background: rgba(247,57,152,0.14); color: #f73998; }
.stat-icon.families { background: rgba(41,128,185,0.14); color: #2980b9; }
.stat-icon.teachers { background: rgba(200,149,42,0.16); color: #c8952a; }
.stat-icon.classes { background: rgba(39,174,96,0.14); color: #27ae60; }
.stat-icon.admin { background: rgba(142,68,173,0.14); color: #8e44ad; }
.stat-icon.messages { background: rgba(231,76,60,0.14); color: #e74c3c; }
.stat-icon.attendance { background: rgba(22,160,133,0.14); color: #16a085; }
.stat-icon.calendar { background: rgba(52,152,219,0.14); color: #3498db; }
.stat-icon.payments { background: rgba(211,84,0,0.14); color: #d35400; }
.stat-icon.indigo { background: rgba(79,70,229,0.14); color: #4f46e5; }
.stat-icon.rose { background: rgba(225,29,72,0.14); color: #e11d48; }
.stat-icon.amber { background: rgba(217,119,6,0.14); color: #d97706; }
.stat-icon.cyan { background: rgba(8,145,178,0.14); color: #0891b2; }
.stat-icon.lime { background: rgba(101,163,13,0.14); color: #65a30d; }
.stat-icon.slate { background: rgba(71,85,105,0.14); color: #475569; }

.stat-card-academy::before { background: #f73998; }
.stat-card-families::before { background: #2980b9; }
.stat-card-teachers::before { background: #c8952a; }
.stat-card-classes::before { background: #27ae60; }
.stat-card-admin::before { background: #8e44ad; }
.stat-card-messages::before { background: #e74c3c; }
.stat-card-attendance::before { background: #16a085; }
.stat-card-calendar::before { background: #3498db; }
.stat-card-payments::before { background: #d35400; }
.stat-card-indigo::before { background: #4f46e5; }
.stat-card-rose::before { background: #e11d48; }
.stat-card-amber::before { background: #d97706; }
.stat-card-cyan::before { background: #0891b2; }
.stat-card-lime::before { background: #65a30d; }
.stat-card-slate::before { background: #475569; }

.stat-card-academy { background: #fde9f5; }
.stat-card-families { background: #eaf4fd; }
.stat-card-teachers { background: #fdf4df; }
.stat-card-classes { background: #e9f8ef; }
.stat-card-admin { background: #f2eafb; }
.stat-card-messages { background: #feeee9; }
.stat-card-attendance { background: #eaf8f5; }
.stat-card-calendar { background: #edf7fe; }
.stat-card-payments { background: #fff1e8; }
.stat-card-indigo { background: #eef0ff; }
.stat-card-rose { background: #fff1f4; }
.stat-card-amber { background: #fff7e8; }
.stat-card-cyan { background: #e8f9fc; }
.stat-card-lime { background: #f1fae8; }
.stat-card-slate { background: #f1f5f9; }

.dashboard-stats-grid .stat-card-academy,
.dashboard-stats-grid .stat-card-families,
.dashboard-stats-grid .stat-card-teachers,
.dashboard-stats-grid .stat-card-classes,
.dashboard-stats-grid .stat-card-admin,
.dashboard-stats-grid .stat-card-messages,
.dashboard-stats-grid .stat-card-attendance,
.dashboard-stats-grid .stat-card-calendar,
.dashboard-stats-grid .stat-card-payments,
.dashboard-stats-grid .stat-card-indigo,
.dashboard-stats-grid .stat-card-rose,
.dashboard-stats-grid .stat-card-amber,
.dashboard-stats-grid .stat-card-cyan,
.dashboard-stats-grid .stat-card-lime,
.dashboard-stats-grid .stat-card-slate {
    border-color: rgba(13,27,42,0.07);
}

.dashboard-stats-grid .stat-card-academy {
    background: linear-gradient(135deg, #f9c2df 0%, #fde4f3 100%);
}

.dashboard-stats-grid .stat-card-families {
    background: linear-gradient(135deg, #bfe2fb 0%, #e4f3ff 100%);
}

.dashboard-stats-grid .stat-card-teachers {
    background: linear-gradient(135deg, #f7d98e 0%, #fff0c8 100%);
}

.dashboard-stats-grid .stat-card-classes {
    background: linear-gradient(135deg, #bceccb 0%, #e2f8e9 100%);
}

.dashboard-stats-grid .stat-card-admin {
    background: linear-gradient(135deg, #dfc0f1 0%, #f2e2fb 100%);
}

.dashboard-stats-grid .stat-card-messages {
    background: linear-gradient(135deg, #ffc9bd 0%, #ffe3dc 100%);
}

.dashboard-stats-grid .stat-card-attendance {
    background: linear-gradient(135deg, #ace9dc 0%, #dcf8f2 100%);
}

.dashboard-stats-grid .stat-card-calendar {
    background: linear-gradient(135deg, #bee5ff 0%, #e2f4ff 100%);
}

.dashboard-stats-grid .stat-card-payments {
    background: linear-gradient(135deg, #ffc79d 0%, #ffe6d1 100%);
}

.dashboard-stats-grid .stat-card-indigo {
    background: linear-gradient(135deg, #c7d2fe 0%, #eef0ff 100%);
}

.dashboard-stats-grid .stat-card-rose {
    background: linear-gradient(135deg, #fecdd6 0%, #fff1f4 100%);
}

.dashboard-stats-grid .stat-card-amber {
    background: linear-gradient(135deg, #fcd89b 0%, #fff3d8 100%);
}

.dashboard-stats-grid .stat-card-cyan {
    background: linear-gradient(135deg, #a5f3fc 0%, #e7fbff 100%);
}

.dashboard-stats-grid .stat-card-lime {
    background: linear-gradient(135deg, #d9f99d 0%, #f2fbdc 100%);
}

.dashboard-stats-grid .stat-card-slate {
    background: linear-gradient(135deg, #cbd5e1 0%, #f1f5f9 100%);
}

.btn-light {
    background: var(--white);
    color: var(--navy);
    border: 1px solid var(--slate-mid);
}

.btn-light:hover {
    background: #f7f9fc;
    border-color: rgba(13,27,42,0.22);
}

/* Cards grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 22px 20px;
    box-shadow: 0 14px 30px rgba(13,27,42,0.08);
    border: 1px solid rgba(13,27,42,0.06);
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    min-height: 220px;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--gold);
    pointer-events: none;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(200,149,42,0.28);
}

.card-icon {
    width: 50px; height: 50px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--gold-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}

.card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.35;
}

.card p {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.5;
}

.card-link {
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.card-academy::before { background: #0d1b2a; }
.card-families::before { background: #2980b9; }
.card-teachers::before { background: #c8952a; }
.card-classes::before { background: #27ae60; }
.card-admin::before { background: #8e44ad; }
.card-support::before { background: #e74c3c; }

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.quick-link-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 22px 20px;
    box-shadow: 0 14px 30px rgba(13,27,42,0.08);
    border: 1px solid rgba(13,27,42,0.06);
    text-decoration: none;
    color: inherit;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.quick-link-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--gold);
}

.quick-link-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(200,149,42,0.28);
}

.quick-link-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.quick-link-card > div:not(.quick-link-icon) {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.quick-link-card strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.35;
}

.quick-link-card span {
    display: block;
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.45;
}

.quick-link-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.35;
}

.quick-link-card p {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.5;
}

.panel-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--slate);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.panel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--slate);
}

.panel-card-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 16px;
}

.panel-card-header h3 i {
    color: var(--gold);
}

.panel-card-body {
    padding: 18px 20px;
}

.panel-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.panel-list-item {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(13,27,42,0.08);
}

.panel-list-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.panel-list-item strong {
    display: block;
    color: var(--navy);
    margin-bottom: 6px;
    line-height: 1.35;
}

.panel-list-item span {
    color: var(--text-light);
    font-size: 12px;
}

/* ============================================================
   LOGISTICA / HORARIO SEMANAL
   ============================================================ */
.logistica-schedule-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, max-content));
    gap: 12px;
    margin-bottom: 20px;
    align-items: end;
}

.logistica-schedule-filters select {
    padding: 10px 14px;
    border: 1.5px solid #cdd5df;
    border-radius: 8px;
    background: #fff;
    min-width: 0;
    width: 100%;
}

.logistica-schedule-filters > .select-search-input,
.logistica-schedule-filters > select {
    width: min(100%, 300px);
    max-width: 300px;
}

.logistica-schedule-filters .select-search-wrap {
    display: block;
    width: min(100%, 420px);
}

.logistica-schedule-filters > .select-search-input,
.logistica-schedule-filters > select {
    display: inline-block;
    vertical-align: bottom;
}

.logistica-schedule-filters > .select-search-input + select {
    margin-left: 8px;
}

.logistica-schedule-filters .btn {
    align-self: end;
}

.schedule-board-container {
    padding: 0;
    overflow: hidden;
}

.schedule-board-header {
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #dbe3ee;
}

.schedule-board-header h2 {
    font-size: 17px;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-board-header h2 i {
    color: var(--gold);
}

.schedule-board-header p {
    font-size: 12.5px;
    color: #66758a;
    margin-top: 4px;
}

[data-theme="dark"] .schedule-board-header {
    border-bottom-color: #2b3c52;
}

[data-theme="dark"] .schedule-board-header h2 {
    color: #edf4ff;
}

[data-theme="dark"] .schedule-board-header p {
    color: #9fb2c8;
}

[data-theme="dark"] .schedule-hour {
    background: #eef3f7;
    color: #10233a;
}

.schedule-board-scroll {
    overflow-x: auto;
}

.schedule-board {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

.schedule-board th,
.schedule-board td {
    border: 1px solid #8d98a7;
    padding: 0;
    vertical-align: middle;
    text-align: center;
}

.schedule-board thead th {
    background: #b7dce5;
    color: #0436d8;
    font-weight: 800;
    height: 32px;
    letter-spacing: 0;
}

.schedule-hour-head {
    width: 132px;
}

.schedule-hour {
    width: 66px;
    background: #eef3f7;
    color: #28384d;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0;
}

.schedule-cell {
    background: #fbfcfe;
    height: 46px;
    padding: 2px;
}

.schedule-break-row td {
    background: #52e2e1;
    color: #0436d8 !important;
    font-weight: 900;
    letter-spacing: 0.45em;
    height: 32px;
}

.schedule-break-row td * {
    color: #0436d8 !important;
}

.schedule-break-row td:first-child,
.schedule-break-row td:nth-child(2) {
    letter-spacing: 0;
    white-space: nowrap;
}

.schedule-chip {
    min-height: 42px;
    border-radius: 2px;
    border: 1px solid rgba(13,27,42,0.18);
    padding: 5px 22px 5px 6px;
    display: grid;
    gap: 2px;
    align-content: center;
    position: relative;
    color: #101820;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}

.schedule-chip + .schedule-chip {
    margin-top: 3px;
}

.schedule-chip strong {
    font-size: 11.5px;
    line-height: 1.2;
}

.schedule-chip span,
.schedule-chip em {
    font-size: 10.5px;
    line-height: 1.15;
    font-style: normal;
    color: rgba(13,27,42,0.76);
}

.schedule-chip-delete {
    position: absolute;
    top: 2px;
    right: 2px;
}

.schedule-chip-delete button {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(13,27,42,0.15);
    color: #0d1b2a;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 10px;
}

.schedule-chip-delete button:hover {
    background: rgba(231,76,60,0.9);
    color: #fff;
}

.schedule-green { background: #8ed24f; }
.schedule-mint { background: #c9f8cf; }
.schedule-yellow { background: #fff9bf; }
.schedule-purple { background: #c9c5ff; }
.schedule-orange { background: #f6be8b; }
.schedule-blue { background: #c9ccff; }
.schedule-pink { background: #ffd1df; }

/* ============================================================
   TABLES
   ============================================================ */
.table-container {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--slate);
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    scrollbar-width: thin;
    scrollbar-color: rgba(13,27,42,0.28) rgba(13,27,42,0.06);
}

.table-container > .filters-form {
    padding: 20px 20px 4px;
    box-sizing: border-box;
}

.table-container > div[style*="overflow-x:auto"] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(13,27,42,0.28) rgba(13,27,42,0.06);
}

.table-container::-webkit-scrollbar,
.table-container > div[style*="overflow-x:auto"]::-webkit-scrollbar {
    height: 12px;
}

.table-container::-webkit-scrollbar-thumb,
.table-container > div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb {
    background: rgba(13,27,42,0.28);
    border: 3px solid rgba(255,255,255,0.88);
    border-radius: 999px;
    transition: background 0.15s ease, border-width 0.15s ease;
}

.table-container::-webkit-scrollbar-thumb:hover,
.table-container > div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb:hover {
    background: rgba(13,27,42,0.5);
    border-width: 2px;
}

.table-container::-webkit-scrollbar-track,
.table-container > div[style*="overflow-x:auto"]::-webkit-scrollbar-track {
    background: rgba(13,27,42,0.06);
}

[data-theme="dark"] .table-container,
[data-theme="dark"] .table-container > div[style*="overflow-x:auto"],
[data-theme="dark"] .schedule-board-scroll {
    scrollbar-width: thin;
    scrollbar-color: #a8b4c2 rgba(143, 161, 181, 0.18);
}

[data-theme="dark"] .table-container::-webkit-scrollbar-track,
[data-theme="dark"] .table-container > div[style*="overflow-x:auto"]::-webkit-scrollbar-track,
[data-theme="dark"] .schedule-board-scroll::-webkit-scrollbar-track {
    background: rgba(143, 161, 181, 0.18);
    border-radius: 999px;
}

[data-theme="dark"] .table-container::-webkit-scrollbar-thumb,
[data-theme="dark"] .table-container > div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb,
[data-theme="dark"] .schedule-board-scroll::-webkit-scrollbar-thumb {
    background: #a8b4c2;
    border: 3px solid #172438;
    border-radius: 999px;
}

[data-theme="dark"] .table-container::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .table-container > div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .schedule-board-scroll::-webkit-scrollbar-thumb:hover {
    background: #c2cedb;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--slate);
}

.table-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
}

.table-actions { display: flex; gap: 10px; align-items: center; }

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 100%;
    table-layout: auto;
}

.table-container > div[style*="overflow-x:auto"] table {
    min-width: max(760px, 100%);
}

thead th {
    background: linear-gradient(180deg, #10233a 0%, var(--navy) 100%);
    color: rgba(255,255,255,0.88);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.25;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

tbody tr {
    border-bottom: 1px solid var(--slate);
    transition: background 0.15s;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:nth-child(even) { background: rgba(248,250,252,0.72); }
tbody tr:hover { background: var(--gold-pale); }

tbody td {
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--text-dark);
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.35;
}

tbody td:last-child {
    white-space: normal;
}

tbody td .btn,
.table-actions .btn {
    white-space: nowrap;
}

.student-name-col {
    min-width: 176px;
    width: 195px;
}

.student-name-cell {
    min-width: 176px;
}

.student-name-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 166px;
}

.student-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d1b2a, #243b55);
    color: #e8b84b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex: 0 0 34px;
}

.student-name-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.22;
}

.student-name-lines strong {
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 800;
}

.student-name-lines span {
    color: var(--text-mid);
    font-size: 12px;
    font-weight: 600;
}

.student-name-lines small {
    color: var(--text-light);
    font-size: 11px;
    font-weight: 500;
}

.students-table {
    min-width: 1180px;
}

.students-table th,
.students-table td {
    white-space: nowrap;
}

.students-table .student-name-cell,
.students-table .student-name-col {
    white-space: normal;
}

.students-table .student-name-lines {
    min-width: 150px;
}

.student-actions-cell {
    min-width: 182px;
}

.student-actions {
    display: grid;
    grid-template-columns: repeat(5, 34px);
    gap: 8px;
    align-items: center;
    width: max-content;
}

.student-actions .btn {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
}

.manage-students-table {
    min-width: 1080px;
}

.manage-students-table th,
.manage-students-table td {
    white-space: nowrap;
}

.manage-students-table td {
    padding-top: 12px;
    padding-bottom: 12px;
    vertical-align: middle;
}

.manage-student-actions-cell {
    width: 282px;
    min-width: 282px;
}

.manage-student-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.manage-student-actions .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 8px;
    box-shadow: none;
}

.manage-student-actions .btn:hover {
    transform: none;
}

.manage-student-actions .btn i {
    margin: 0;
    font-size: 13px;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--slate);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.form-card-header {
    background: var(--navy);
    padding: 18px 24px;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-card-header h2 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
}

.form-card-header i { color: var(--gold-light); font-size: 18px; }

.form-body {
    padding: 28px;
}

.form-section {
    margin-bottom: 28px;
}

.form-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gold-pale);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    min-width: 0;
}

.form-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
    align-items: end;
}

.form-grid-compact .form-group {
    width: min(100%, 260px);
}

.form-grid-compact .form-group.span-2 {
    grid-column: span 2;
    width: min(100%, 560px);
}

.form-grid-compact .form-group.span-3 {
    grid-column: span 3;
    width: min(100%, 840px);
}

.form-grid-compact .form-group.full {
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.form-group.full { grid-column: 1/-1; }

.form-group label.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}

.form-group label.checkbox-inline:hover {
    color: var(--navy);
}

.annual-payment-field {
    justify-content: end;
    padding-bottom: 8px;
}

.form-check-control {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    transition: color 0.18s ease;
}

.form-check-control input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    max-width: 16px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    flex: 0 0 16px;
    padding: 0;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-content: center;
    border: 1.5px solid #b8c3d1;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.form-check-control input[type="checkbox"]::before {
    content: "";
    width: 8px;
    height: 4px;
    border-left: 2px solid #0d1b2a;
    border-bottom: 2px solid #0d1b2a;
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
}

.form-check-control input[type="checkbox"]:checked {
    background: var(--gold);
    border-color: var(--gold);
}

.form-check-control input[type="checkbox"]:checked::before {
    transform: rotate(-45deg) scale(1);
}

.form-check-control input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(200,149,42,0.24);
    outline-offset: 2px;
}

.form-check-control span {
    cursor: default;
    user-select: none;
}

.form-check-control:has(input[type="checkbox"]:checked) {
    color: #8a5700;
}

.annual-payment-check {
    min-height: 42px;
}


.form-group label.checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    max-width: 16px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    flex: 0 0 16px;
    margin: 0;
    accent-color: var(--gold);
}

[data-theme="dark"] .form-group label.checkbox-inline {
    background: transparent;
    border-color: transparent;
    color: var(--text-mid);
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px 14px;
    border: 1.5px solid var(--slate-mid);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--white);
    transition: var(--transition);
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--gold);
    box-shadow: none;
}

.select-search-input {
    width: 100%;
    height: 40px;
    border: 1.5px solid var(--slate-mid);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    margin-bottom: 8px;
    font-size: 13.5px;
    background: #fff;
    color: var(--navy);
    outline: none;
    transition: var(--transition);
}

.select-search-wrap {
    display: grid;
    gap: 8px;
    width: min(100%, 340px);
    min-width: 0;
    position: relative;
}

.select-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--white);
    border: 1.5px solid var(--slate-mid);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(13,27,42,0.14);
    max-height: 220px;
    overflow-y: auto;
    display: none;
    margin-top: 2px;
}

.select-search-suggestions.open { display: block; }

.select-search-suggestions .suggestion-item {
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--text-dark);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select-search-suggestions .suggestion-item:hover,
.select-search-suggestions .suggestion-item.active {
    background: var(--gold-pale);
    color: var(--navy);
}

.select-search-suggestions .suggestion-empty {
    padding: 9px 12px;
    font-size: 13px;
    color: var(--text-light);
    font-style: italic;
    cursor: default;
}

[data-theme="dark"] .select-search-suggestions {
    background: var(--navy-mid);
    border-color: var(--slate-mid);
}

[data-theme="dark"] .select-search-suggestions .suggestion-item {
    color: var(--text-mid);
}

[data-theme="dark"] .select-search-suggestions .suggestion-item:hover,
[data-theme="dark"] .select-search-suggestions .suggestion-item.active {
    background: var(--navy-light);
    color: #fff;
}

.form-group .select-search-wrap {
    width: 100%;
}

.select-search-wrap .select-search-input {
    margin-bottom: 0;
}

.select-search-wrap select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.select-search-input:focus {
    border-color: var(--gold);
    box-shadow: none;
}

.checkbox-search-input {
    margin-top: 4px;
}

.form-group textarea { resize: vertical; min-height: 90px; }

.form-group input[type="file"] {
    padding: 8px;
    cursor: pointer;
}

.form-card label:has(input[type="checkbox"]),
.form-card label:has(input[type="radio"]),
.table-container label:has(input[type="checkbox"]),
.table-container label:has(input[type="radio"]) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.inline-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, max-content));
    align-items: end;
    gap: 12px;
    margin-bottom: 18px;
}

.inline-filter-grid > * {
    width: min(100%, 300px);
}

.inline-filter-grid .search-bar {
    width: min(100%, 340px);
}

.account-filter-card {
    width: 100%;
    max-width: none;
}

.account-filter-grid {
    display: grid;
    grid-template-columns: minmax(640px, 820px);
    gap: 12px;
    align-items: end;
}

.account-filter-grid .form-group,
.account-filter-grid .select-search-wrap {
    width: 100%;
}

.account-filter-grid .select-search-wrap {
    display: block;
    max-width: 820px;
}

@media (max-width: 760px) {
    .account-filter-card {
        max-width: none;
    }

    .account-filter-grid,
    .account-filter-grid .select-search-wrap {
        grid-template-columns: 1fr;
    }
}

.compact-filter-row {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.filter-card .compact-filter-row {
    margin-bottom: 0;
}

.compact-filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
    align-items: end;
    gap: 12px;
}

.compact-filter-row select,
.compact-filter-row input[type="text"],
.compact-filter-row input[type="search"],
.compact-filter-row input[type="date"],
.compact-filter-row input[type="number"] {
    width: 100%;
    height: 40px;
    min-width: 0;
    padding: 0 14px;
    border: 1.5px solid var(--slate-mid);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text-dark);
    font: inherit;
}

.compact-filter-row > select,
.compact-filter-row > input[type="text"],
.compact-filter-row > input[type="search"],
.compact-filter-row > input[type="date"],
.compact-filter-row > input[type="number"] {
    width: min(100%, 220px);
    max-width: 220px;
}

.compact-filter-row .search-bar {
    width: min(100%, 340px);
}

.compact-filter-row .form-group,
.compact-filter-row .compact-filter-field {
    margin: 0;
    width: min(100%, 300px);
}

.compact-filter-panel .form-group,
.compact-filter-panel .compact-filter-field {
    width: 100%;
}

.compact-filter-row .form-group:has(.select-search-wrap),
.compact-filter-row .compact-filter-field:has(.select-search-wrap),
.compact-filter-row .compact-filter-searchable {
    width: min(100%, 430px);
    max-width: 430px;
}

.compact-filter-panel .compact-filter-searchable {
    grid-column: span 2;
    width: 100%;
    max-width: none;
}

.compact-filter-row .select-search-wrap {
    display: block;
    width: 100%;
}

.compact-filter-panel .select-search-wrap {
    display: block;
}

.compact-filter-row:not(.compact-filter-panel):has(.compact-filter-searchable) {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
}

.compact-filter-row > .select-search-input,
.compact-filter-row > select {
    width: min(100%, 300px);
    max-width: 300px;
}

.compact-filter-row > .select-search-input + select {
    margin-left: 8px;
}

.compact-filter-actions {
    display: flex;
    align-items: end;
    gap: 10px;
    min-height: 40px;
}

.compact-filter-actions .btn {
    min-height: 40px;
    white-space: nowrap;
}

.table-inline-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(170px, 0.8fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 520px;
}

.table-inline-form input[type="text"],
.table-inline-form input[type="file"] {
    width: 100%;
    height: 36px;
    border: 1.5px solid var(--slate-mid);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-dark);
    padding: 7px 10px;
    font: inherit;
    min-width: 0;
}

.table-inline-form input[type="file"] {
    padding: 6px 8px;
    font-size: 12px;
}

.table-inline-form .btn {
    min-height: 36px;
    justify-content: center;
}

.attendance-justify-table {
    min-width: 1180px;
}

.attendance-justify-table th,
.attendance-justify-table td {
    vertical-align: middle;
}

.attendance-justify-table td {
    padding-top: 14px;
    padding-bottom: 14px;
}

.attendance-justify-table th:nth-child(1),
.attendance-justify-table .justify-date {
    width: 108px;
    white-space: nowrap;
}

.attendance-justify-table th:nth-child(2),
.attendance-justify-table .justify-student-cell {
    width: 300px;
    min-width: 300px;
}

.attendance-justify-table th:nth-child(3),
.attendance-justify-table .justify-class-cell {
    width: 190px;
    min-width: 190px;
}

.attendance-justify-table th:nth-child(5),
.attendance-justify-table .justify-summary-cell {
    width: 260px;
    min-width: 260px;
}

.attendance-justify-table th:nth-child(6),
.attendance-justify-table .justify-action-cell {
    width: 430px;
    min-width: 430px;
}

.justify-student {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.justify-student-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--gold-light);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(13,27,42,0.14);
}

.justify-student-info {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.justify-student-info strong {
    display: block;
    color: var(--text-dark);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.justify-student-info small,
.justify-class-cell small {
    color: var(--text-light);
    font-size: 11px;
    font-weight: 600;
}

.justify-class-cell {
    color: var(--text-dark);
    font-size: 13px;
    line-height: 1.35;
}

.justify-class-cell span,
.justify-class-cell small {
    display: block;
}

.justify-summary {
    display: grid;
    gap: 7px;
    max-width: 245px;
    color: var(--text-mid);
    font-size: 13px;
    line-height: 1.4;
}

.justify-summary a {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--info);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.justify-summary a:hover {
    color: var(--gold);
}

.justify-inline-form {
    grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.78fr) 94px;
    min-width: 0;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--slate);
    border-radius: 12px;
    background: #f8fafc;
}

.justify-inline-form input[type="text"],
.justify-inline-form input[type="file"] {
    height: 38px;
    background: var(--white);
}

.justify-inline-form input[type="file"] {
    color: var(--text-mid);
}

.justify-inline-form .btn {
    width: 100%;
    min-height: 38px;
    padding-inline: 10px;
    border-radius: 9px;
}

[data-theme="dark"] .select-search-wrap .select-search-input,
[data-theme="dark"] .table-inline-form input[type="text"],
[data-theme="dark"] .table-inline-form input[type="file"] {
    background: #0b1624;
    border-color: #35465a;
    color: #edf4ff;
}

[data-theme="dark"] .justify-student-info strong,
[data-theme="dark"] .justify-class-cell {
    color: #edf4ff;
}

[data-theme="dark"] .justify-student-info small,
[data-theme="dark"] .justify-class-cell small {
    color: #b7c6d8;
}

[data-theme="dark"] .justify-summary {
    color: #d8e5f4;
}

[data-theme="dark"] .justify-inline-form {
    background: #0b1624;
    border-color: #26364a;
}

[data-theme="dark"] .justify-student-avatar {
    background: linear-gradient(135deg, #122033, #1b3350);
    color: #f2c14e;
    border: 1px solid #2d4158;
}

@media (max-width: 768px) {
    .attendance-justify-table {
        min-width: 1040px;
    }

    .attendance-justify-table th:nth-child(2),
    .attendance-justify-table .justify-student-cell {
        width: 260px;
        min-width: 260px;
    }

    .attendance-justify-table th:nth-child(6),
    .attendance-justify-table .justify-action-cell {
        width: 390px;
        min-width: 390px;
    }

    .justify-inline-form {
        grid-template-columns: minmax(170px, 1fr) minmax(130px, 0.75fr) 44px;
    }

    .justify-inline-form .btn span {
        display: none;
    }
}

[data-theme="dark"] .logistica-schedule-filters select {
    background: #0b1624;
    border-color: #35465a;
    color: #edf4ff;
}

[data-theme="dark"] .compact-filter-row select,
[data-theme="dark"] .compact-filter-row input[type="text"],
[data-theme="dark"] .compact-filter-row input[type="search"],
[data-theme="dark"] .compact-filter-row input[type="date"],
[data-theme="dark"] .compact-filter-row input[type="number"] {
    background: #0b1624;
    border-color: #35465a;
    color: #edf4ff;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--white);
    box-shadow: 0 4px 12px rgba(13,27,42,0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(13,27,42,0.3); }

.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--navy);
    box-shadow: 0 4px 12px rgba(200,149,42,0.3);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(200,149,42,0.4); }

.btn-success {
    background: linear-gradient(135deg, var(--success), #2ecc71);
    color: var(--white);
}
.btn-success:hover { transform: translateY(-2px); }

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #c0392b);
    color: var(--white);
}
.btn-danger:hover { transform: translateY(-2px); }

.btn-outline {
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--slate-mid);
}
.btn-outline:hover { background: var(--slate); border-color: var(--navy); }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon { padding: 8px; border-radius: 8px; }

.action-btns { display: flex; gap: 6px; align-items: center; }

/* Search bar */
.search-bar {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--slate-mid);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--white);
    transition: var(--transition);
    max-width: 100%;
    min-width: 0;
}
.search-bar:focus-within { border-color: var(--gold); box-shadow: none; }

.search-bar i { padding: 0 12px; color: var(--text-light); font-size: 14px; }
.search-bar input {
    border: none !important;
    box-shadow: none !important;
    padding: 9px 12px 9px 0;
    min-width: 0;
    width: 100%;
    outline: none;
    font-family: var(--font-body);
    font-size: 13.5px;
}

/* Badges status */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-success { background: rgba(39,174,96,0.12); color: var(--success); }
.badge-danger  { background: rgba(231,76,60,0.12); color: var(--danger); }
.badge-warning { background: rgba(243,156,18,0.12); color: var(--warning); }
.badge-info    { background: rgba(41,128,185,0.12); color: var(--info); }
.badge-navy    { background: rgba(13,27,42,0.1); color: var(--navy); }

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.page-btn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1.5px solid var(--slate-mid);
    background: var(--white);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-mid);
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
    text-decoration: none;
}
.page-btn:hover { border-color: var(--gold); color: var(--gold); }
.page-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.page-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 16px;
    border-top: 1px solid var(--slate);
    flex-wrap: wrap;
}
.table-pagination-info {
    color: var(--text-light);
    font-size: 12px;
    font-weight: 600;
}
.table-pagination-pages {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

[data-theme="dark"] .table-pagination {
    border-top-color: #243244;
}

[data-theme="dark"] .table-pagination-info {
    color: #b7c6d8;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
body.login-page {
    min-height: 100vh;
    padding: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,0.08), transparent 30%),
        linear-gradient(135deg, rgba(7, 18, 38, 0.54), rgba(7, 18, 38, 0.28)),
        url('images/fondo_sistema.JPG') center / cover no-repeat;
    color-scheme: light;
}

body.login-page .login-shell {
    position: relative;
    z-index: 2;
    width: min(855px, 100%);
    height: 595px;
    min-height: 0;
    max-height: calc(100vh - 28px);
    display: grid;
    grid-template-columns: minmax(405px, 1fr) minmax(300px, 0.76fr);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(2, 8, 23, 0.42);
}

body.login-page .login-institution-panel {
    position: relative;
    min-height: 100%;
    padding: 38px 42px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(7, 26, 51, 0.98) 0%, rgba(10, 42, 79, 0.9) 42%, rgba(10, 42, 79, 0.28) 58%, rgba(10, 42, 79, 0) 78%),
        linear-gradient(0deg, rgba(7, 18, 38, 0.18), rgba(7, 18, 38, 0.18)),
        url('images/img_login.jpg') center bottom / cover no-repeat;
}

body.login-page .login-institution-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(210, 159, 49, 0.9) 0 4px, transparent 4px),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 26%);
    pointer-events: none;
}

body.login-page .login-institution-panel > * {
    position: relative;
    z-index: 1;
}

body.login-page .login-brand-mark {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    box-shadow: 0 18px 36px rgba(0,0,0,0.18);
    backdrop-filter: blur(2px);
}

body.login-page .login-brand-mark img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

body.login-page .login-brand-copy {
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
}

body.login-page .login-brand-copy span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    margin-bottom: 14px;
    color: #f8d36a;
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

body.login-page .login-brand-copy h1 {
    margin: 0 auto;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    text-wrap: balance;
}

body.login-page .login-brand-copy p {
    max-width: 390px;
    margin: 14px auto 0;
    color: rgba(255,255,255,0.86);
    font-size: 13.5px;
    line-height: 1.55;
    text-align: center;
}

body.login-page .login-container {
    width: 100%;
    min-height: 100%;
    padding: 38px 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    scrollbar-width: thin;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

body.login-page .login-container:has(.login-notice) {
    justify-content: center;
}

body.login-page .login-container:has(.login-notice) .login-logo {
    margin-bottom: 14px;
}

body.login-page .login-container:has(.login-notice) .login-field {
    margin-bottom: 10px;
}

body.login-page .login-container:has(.login-notice) .login-options {
    margin-bottom: 12px;
}

body.login-page .login-container > .login-logo,
body.login-page .login-container > form,
body.login-page .login-container > .login-footer {
    width: min(100%, 330px);
}

body.login-page .login-logo {
    margin-bottom: 18px;
    text-align: center;
}

body.login-page .login-logo-icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

body.login-page .login-logo-icon i {
    color: #071a33;
    font-size: 34px;
    line-height: 1;
}

body.login-page .login-logo-image {
    width: 74px;
    height: 74px;
    object-fit: contain;
}

body.login-page .login-logo h2,
body.login-page .login-logo h1 {
    margin: 0;
    color: #071a33;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

body.login-page .login-logo p {
    margin: 6px auto 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

body.login-page .login-field {
    margin-bottom: 12px;
}

body.login-page .login-field label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

body.login-page .login-input-wrap {
    min-height: 46px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1.5px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    box-shadow: none;
    transition: var(--transition);
}

body.login-page .login-input-wrap:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200,149,42,0.14);
}

body.login-page .login-input-wrap i {
    width: 44px;
    color: #7a8798;
    font-size: 14px;
    text-align: center;
}

body.login-page .login-input-wrap input {
    min-width: 0;
    flex: 1;
    padding: 11px 12px 11px 0;
    color: #0d1b2a;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
}

body.login-page .login-input-wrap input::placeholder {
    color: #8a9ab0;
    font-weight: 500;
}

body.login-page .login-input-wrap input:-webkit-autofill,
body.login-page .login-input-wrap input:-webkit-autofill:hover,
body.login-page .login-input-wrap input:-webkit-autofill:focus,
body.login-page .login-input-wrap input:-webkit-autofill:active {
    -webkit-text-fill-color: #0f172a;
    caret-color: #0f172a;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
}

body.login-page .password-toggle {
    width: 44px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7a8798;
    background: transparent;
    border: 0;
    cursor: pointer;
}

body.login-page .password-toggle:hover,
body.login-page .password-toggle:focus-visible {
    color: var(--gold);
}

body.login-page .login-options {
    margin: 0 0 14px;
}

body.login-page .remember-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

body.login-page .remember-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.login-page .remember-check {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 4px;
    border: 1.5px solid #b8c2d2;
    background: #fff;
    box-shadow: none;
    transition: var(--transition);
}

body.login-page .remember-check::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #123b6d;
    transform: scale(0);
    transition: transform 0.2s ease;
}

body.login-page .remember-option input:focus-visible + .remember-check {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

body.login-page .remember-option input:checked + .remember-check {
    border-color: #123b6d;
}

body.login-page .remember-option input:checked + .remember-check::before {
    transform: scale(1);
}

body.login-page .login-btn {
    width: 100%;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, #071a33 0%, #123b6d 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 20px rgba(7, 26, 51, 0.18);
    transition: var(--transition);
}

body.login-page .login-btn span {
    text-transform: uppercase;
}

body.login-page .login-btn:hover {
    background: linear-gradient(135deg, #0a2547 0%, #18518f 100%);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

body.login-page.error-mantenimiento .login-logo-icon {
    width: 96px;
    height: 96px;
    margin-bottom: 14px;
}

body.login-page.error-mantenimiento .login-logo-icon i {
    font-size: 58px;
}

body.login-page .login-notice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    max-height: 70px;
    margin: 10px 0 0;
    overflow: auto;
    padding: 9px 12px 9px 42px;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    background: #fff7ed;
    color: #9a3412;
    box-shadow: none;
}

body.login-page .login-notice-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ea580c;
    font-size: 16px;
}

body.login-page .login-notice-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

body.login-page .login-notice-copy strong,
body.login-page .login-notice-copy span {
    color: #9a3412;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
}

body.login-page .login-notice-copy span {
    display: -webkit-box;
    overflow: hidden;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.login-page .login-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 820px) {
    body.login-page {
        padding: 14px;
        overflow-y: auto;
    }

    body.login-page .login-shell {
        max-width: 440px;
        max-height: none;
        height: auto;
        min-height: auto;
        grid-template-columns: 1fr;
    }

    body.login-page .login-institution-panel {
        min-height: 340px;
        padding: 30px 24px;
        background:
            linear-gradient(180deg, rgba(7, 26, 51, 0.98) 0%, rgba(10, 42, 79, 0.88) 48%, rgba(10, 42, 79, 0.2) 72%, rgba(10, 42, 79, 0) 100%),
            linear-gradient(0deg, rgba(7, 18, 38, 0.18), rgba(7, 18, 38, 0.18)),
            url('images/img_login.jpg') center bottom / cover no-repeat;
    }

    body.login-page .login-container {
        padding: 32px 24px 24px;
    }
}

@media (max-width: 420px) {
    body.login-page {
        padding: 12px;
    }

    body.login-page .login-brand-copy h1 {
        font-size: 22px;
    }

    body.login-page .login-container {
        padding: 28px 18px 22px;
    }

    body.login-page .login-logo h2,
    body.login-page .login-logo h1 {
        font-size: 26px;
    }
}
/* ============================================================
   DASHBOARD INTRO
   ============================================================ */
.dashboard-intro {
    background:
        linear-gradient(135deg, #ffffff 0%, #f7fbff 58%, #fff3d6 100%);
    border-radius: var(--radius);
    padding: 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: var(--navy);
    border: 1px solid #dbe4ef;
    box-shadow: var(--shadow-md);
}

.dashboard-intro::before {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 44%;
    background:
        linear-gradient(135deg, transparent 0%, rgba(200,149,42,0.16) 46%, rgba(13,27,42,0.07) 100%);
    clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
}

.dashboard-intro::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), #e8b84b, rgba(13,27,42,0.08));
}

.dashboard-intro-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
}

.dashboard-intro-copy {
    min-width: 0;
}

.dashboard-intro-kicker {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(200,149,42,0.35);
    border-radius: 999px;
    color: #8a600f;
    background: rgba(253,243,224,0.85);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-intro h1 {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px;
}

.dashboard-intro h1 span { color: #b77f12; }

.dashboard-intro h1 small {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    color: rgba(255,255,255,0.68);
}

.dashboard-intro p {
    color: var(--text-mid);
    font-size: 14px;
    max-width: 560px;
}

.dashboard-section-title {
    font-family: var(--font-heading);
    font-size: 18px;
    color: #0d1b2a;
    margin-bottom: 14px;
}

.dashboard-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) 310px;
    gap: 18px;
    align-items: start;
}

.dashboard-main-panel,
.dashboard-side-panel {
    min-width: 0;
}

.dashboard-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-side-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dashboard-side-card .panel-card-body {
    padding-top: 18px;
    padding-bottom: 18px;
}

.dashboard-intro-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-mid);
}

.meta-item i { color: var(--gold-light); }

.dashboard-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
    justify-content: flex-end;
    align-self: center;
}

.dashboard-intro-actions .btn {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   NO DATA / EMPTY STATE
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}
.empty-state i { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.empty-state p { font-size: 14px; }

/* ============================================================
   ALERTS
   ============================================================ */
body .swal2-container .swal2-popup,
body .swal2-container .pcsc-swal-compact {
    width: min(390px, calc(100vw - 28px)) !important;
    padding: 18px 22px 18px !important;
    border-radius: 10px !important;
    font-family: var(--font-body) !important;
}

body .swal2-container .swal2-title,
body .swal2-container .pcsc-swal-title {
    padding: 0 6px !important;
    font-family: var(--font-body) !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

body .swal2-container .swal2-html-container,
body .swal2-container .pcsc-swal-text {
    margin: 10px 6px 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body .swal2-container .swal2-icon,
body .swal2-container .pcsc-swal-icon {
    transform: scale(0.78);
    margin: 0 auto 2px !important;
}

body .swal2-container .swal2-actions,
body .swal2-container .pcsc-swal-actions {
    margin-top: 16px !important;
    gap: 8px !important;
}

body .swal2-container .swal2-styled,
body .swal2-container .pcsc-swal-button {
    min-width: 0 !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

.alert {
    position: relative;
    padding: 12px 16px 12px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    background: var(--white);
    border: 1px solid var(--slate);
    box-shadow: var(--shadow-sm);
    color: var(--text-dark);
    line-height: 1.45;
}
.alert::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: var(--info);
}
.alert > i:first-child {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    background: rgba(41,128,185,0.12);
    color: var(--info);
    margin-top: -2px;
}
.alert strong {
    color: inherit;
}
.alert-success::before { background: var(--success); }
.alert-danger::before  { background: var(--danger); }
.alert-warning::before { background: var(--warning); }
.alert-info::before    { background: var(--info); }
.alert-success > i:first-child { background: rgba(39,174,96,0.12); color: var(--success); }
.alert-danger > i:first-child  { background: rgba(231,76,60,0.12); color: var(--danger); }
.alert-warning > i:first-child { background: rgba(243,156,18,0.14); color: #9a6500; }
.alert-info > i:first-child    { background: rgba(41,128,185,0.12); color: var(--info); }
.alert-success { border-color: rgba(39,174,96,0.22); }
.alert-danger  { border-color: rgba(231,76,60,0.24); }
.alert-warning { border-color: rgba(243,156,18,0.26); }
.alert-info    { border-color: rgba(41,128,185,0.22); }

.notice-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
}
.notice-strip-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 8px;
}
.notice-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.notice-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff8eb;
    border: 1px solid rgba(200,149,42,0.24);
    color: #6f4a00;
    font-size: 12.5px;
    font-weight: 650;
}
.notice-chip strong {
    color: #a06b00;
}

.priority-alert {
    position: relative;
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid rgba(243,156,18,0.34);
    border-left: 5px solid var(--warning);
    border-radius: 12px;
    background: linear-gradient(180deg, #fffdf8 0%, #fff8eb 100%);
    box-shadow: var(--shadow-sm);
}

.priority-alert-top {
    margin: -28px -28px 22px;
    padding: 12px 16px;
    border-left-width: 0;
    border-right: 0;
    border-top: 3px solid #d92d20;
    border-bottom: 1px solid #f0a29a;
    border-radius: 0;
    background: linear-gradient(180deg, #ffd8d2 0%, #ffe3df 100%);
    box-shadow: 0 8px 18px rgba(217,45,32,0.1);
}

.priority-alert-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.priority-alert-top .priority-alert-head {
    margin-bottom: 8px;
}

.priority-alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffc5bd;
    color: #b42318;
    flex: 0 0 36px;
}

.priority-alert-head strong {
    display: block;
    color: var(--navy);
    font-size: 15px;
    letter-spacing: 0;
}

.priority-alert-head span {
    color: var(--text-mid);
    font-size: 12.5px;
}

.priority-alert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.priority-alert-top .priority-alert-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid #f3aaa3;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.42);
}

.priority-alert-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(231,76,60,0.16);
    border-radius: 10px;
    background: rgba(255,255,255,0.72);
}

.priority-alert-top .priority-alert-item {
    border: 0;
    border-bottom: 1px solid #f3aaa3;
    border-radius: 0;
    background: rgba(255,255,255,0.5);
    box-shadow: none;
}

.priority-alert-top .priority-alert-item:last-child {
    border-bottom: 0;
}

.priority-alert-top .priority-alert-count {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #b42318;
    color: #fff;
}

.priority-alert-count {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #c8952a;
    color: var(--navy);
    font-weight: 800;
}

.priority-alert-copy {
    min-width: 0;
}

.priority-alert-copy strong {
    display: block;
    color: var(--navy);
    line-height: 1.25;
}

.priority-alert-copy strong i {
    color: #c0392b;
    margin-right: 4px;
}

.priority-alert-copy span {
    display: block;
    color: var(--text-mid);
    font-size: 12px;
    line-height: 1.35;
    margin-top: 2px;
}

/* === Aviso institucional === */
.avisos-sistema-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.aviso-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--info);
    background: #eaf4fb;
}

.aviso-banner-icon {
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
    color: var(--info);
    flex: none;
}

.aviso-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aviso-banner-body strong {
    font-size: 14px;
    color: var(--text-dark);
}

.aviso-banner-body span {
    font-size: 13.5px;
    color: var(--text-mid);
    line-height: 1.45;
    white-space: pre-line;
}

.aviso-banner-close {
    margin: 0;
    flex: none;
}

.aviso-banner-close button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: var(--transition);
}

.aviso-banner-close button:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-dark);
}

.aviso-importante {
    border-left-color: var(--warning);
    background: var(--gold-pale);
}
.aviso-importante .aviso-banner-icon { color: var(--warning); }

.aviso-urgente {
    border-left-color: var(--danger);
    background: #fdecea;
}
.aviso-urgente .aviso-banner-icon { color: var(--danger); }

[data-theme="dark"] .aviso-banner { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .aviso-banner-body strong { color: #fff; }
[data-theme="dark"] .aviso-banner-body span { color: var(--text-mid); }
[data-theme="dark"] .aviso-banner-close button:hover { background: rgba(255,255,255,0.08); color: #fff; }

.roles-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}

.roles-checklist label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-dark);
    cursor: pointer;
    background: transparent;
    transition: var(--transition);
    min-height: 28px;
}

.roles-checklist label:hover { color: var(--navy); }
.roles-checklist label.todos-roles { color: var(--navy); }

.roles-checklist input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--gold);
}

.urgencia-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.urgencia-badge.informativo { background: #eaf4fb; color: var(--info); }
.urgencia-badge.importante { background: var(--gold-pale); color: #a9720f; }
.urgencia-badge.urgente { background: #fdecea; color: var(--danger); }

.reminder-card .table-header {
    border-bottom: 0;
    padding-bottom: 8px;
}
.reminder-list {
    display: grid;
    gap: 10px;
}
.reminder-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--slate);
    border-radius: 10px;
    background: #fbfcfe;
}
.reminder-date {
    min-height: 42px;
    border-radius: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--gold-pale);
    color: #8a5b00;
    font-weight: 800;
    line-height: 1.05;
}
.reminder-date small {
    font-size: 10px;
    text-transform: uppercase;
    color: inherit;
}
.reminder-item strong {
    display: block;
    color: var(--navy);
    line-height: 1.25;
}
.reminder-item span {
    color: var(--text-mid);
    font-size: 12px;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    padding: 24px 12px;
    background: rgba(13,27,42,0.7);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
    background: var(--white);
    border-radius: var(--radius);
    width: 90%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    box-shadow: var(--shadow-lg);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }

.modal-header {
    background: var(--navy);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--white);
    flex-shrink: 0;
}
.modal-header h3 { font-family: var(--font-heading); font-size: 18px; }
.modal-close {
    background: none; border: none; color: rgba(255,255,255,0.6);
    font-size: 18px; cursor: pointer; transition: color 0.2s;
}
.modal-close:hover { color: var(--white); }

.modal-body { padding: 24px; overflow-y: auto; min-height: 0; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--slate); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }

/* Ayuda guiada y preferencias de uso */
.topbar-help-button { color: var(--gold-dark); }
.context-help-modal { max-width: 590px; }
.context-help-intro { margin: 0 0 18px; color: var(--text-mid); line-height: 1.65; }
.context-help-steps { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.context-help-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--slate); border-radius: 12px; background: #f8fafc; }
.context-help-steps li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; }
.context-help-steps p { margin: 0; color: var(--text-dark); line-height: 1.45; }
.context-help-note { display: flex; gap: 10px; margin-top: 18px; padding: 13px 15px; border-radius: 12px; background: var(--gold-pale); color: #745015; line-height: 1.45; }
.profile-help-card { grid-column: 1 / -1; }
.profile-help-body { display: grid; gap: 14px; }
.profile-help-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.profile-help-intro h3, .profile-help-intro p { margin: 0; }
.profile-help-intro p { margin-top: 4px; color: var(--text-mid); line-height: 1.5; }
.profile-help-symbol { display: grid; place-items: center; flex: 0 0 50px; height: 50px; border-radius: 15px; background: var(--gold-pale); color: var(--gold-dark); font-size: 21px; }
.preference-toggle, .preference-reset { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 15px 16px; border: 1px solid var(--slate); border-radius: 12px; cursor: pointer; }
.preference-toggle span, .preference-reset span { display: grid; gap: 3px; }
.preference-toggle small, .preference-reset small { color: var(--text-mid); line-height: 1.4; }
.preference-toggle input { width: 21px; height: 21px; accent-color: var(--gold); flex: 0 0 auto; }
.preference-reset { justify-content: flex-start; background: #f8fafc; }
.preference-reset input { width: 18px; height: 18px; accent-color: var(--navy); }
.profile-help-actions { padding: 12px 0 0; }
[data-form-help="0"] .form-group > small, [data-form-help="0"] .form-help-text { display: none !important; }
.dashboard-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 14px; }
.dashboard-section-heading span { color: var(--gold-dark); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-section-heading .dashboard-section-title { margin: 3px 0 0; }
.dashboard-section-heading > small { color: var(--text-light); }
.dashboard-more-tools { margin-top: 16px; border: 1px solid var(--slate); border-radius: 14px; background: #fff; overflow: hidden; }
.dashboard-more-tools summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 17px; cursor: pointer; color: var(--navy); font-weight: 750; }
.dashboard-more-tools summary::marker { color: var(--gold); }
.dashboard-more-tools summary span { display: flex; align-items: center; gap: 9px; }
.dashboard-more-tools summary small { color: var(--text-light); font-weight: 500; }
.dashboard-secondary-grid { padding: 0 15px 15px; grid-template-columns: repeat(3,minmax(0,1fr)); }
[data-theme="dark"] .context-help-steps li, [data-theme="dark"] .preference-reset, [data-theme="dark"] .dashboard-more-tools { background: #142338; border-color: #2a3c52; }
[data-theme="dark"] .context-help-steps p { color: #e4edf7; }

@media (max-width: 700px) {
    .dashboard-section-heading { align-items: flex-start; flex-direction: column; }
    .dashboard-secondary-grid { grid-template-columns: 1fr; }
    .preference-toggle { align-items: flex-start; }
    .context-help-modal .modal-footer { flex-direction: column-reverse; }
    .context-help-modal .modal-footer .btn { width: 100%; justify-content: center; }
}

.inactivity-modal {
    max-width: 520px;
}

.inactivity-copy {
    font-size: 15px;
    color: var(--text-dark);
    line-height: 1.7;
}

.inactivity-subcopy {
    font-size: 13px;
    color: var(--text-mid);
    margin-top: 10px;
}

/* ============================================================
   CALENDAR
   ============================================================ */
.calendar-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.cal-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important;
    align-items: start;
}
.calendar-nav { display: flex; gap: 8px; }
.calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 8px;
    min-width: 0;
}
.calendar-grid-header > div { min-width: 0; }
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
}
.cal-day {
    min-height: 70px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--slate);
    background: var(--white);
    font-size: 12px;
    position: relative;
    cursor: pointer;
    transition: var(--transition);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.cal-day:hover { border-color: var(--gold); background: var(--gold-pale); }
.cal-day.other-month { opacity: 0.4; }
.cal-day.today { border-color: var(--gold); background: var(--gold-pale); }
.cal-day-num { font-weight: 700; font-size: 13px; color: var(--navy); }
.cal-event {
    font-size: 9px; font-weight: 600;
    padding: 2px 5px; border-radius: 4px;
    margin-top: 3px;
    color: white;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   ROLES PAGE
   ============================================================ */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.role-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--slate);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.role-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.role-card-header {
    background: var(--navy);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
}

.role-card-header i { font-size: 20px; color: var(--gold-light); }
.role-card-header h3 { font-size: 15px; font-weight: 600; }

.role-card-body { padding: 16px 20px; }
.role-card-body p { font-size: 13px; color: var(--text-mid); margin-bottom: 12px; }

.role-users-list { display: flex; flex-direction: column; gap: 8px; }
.role-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--slate);
    font-size: 13px;
}
.role-user-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold-light);
    font-weight: 700;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
    .dashboard-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dashboard-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quick-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .sidebar {
        width: min(88vw, 320px);
        transform: translateX(-100%);
        box-shadow: none;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 0 0 0 9999px rgba(13,27,42,0.45), var(--shadow-lg);
    }
    .main-content { margin-left: 0; }
    .main-wrapper { margin-left: 0; }
    .main-content,
    .main-wrapper { width: 100%; }
    .mobile-toggle { display: flex; }
    .sidebar-mobile-close { display: flex; }
    .page-content {
        padding: 16px;
        max-width: 100vw;
        overflow-x: hidden;
    }
    .page-content > * {
        max-width: 100%;
        min-width: 0;
    }
    .form-card,
    .table-container,
    .stats-grid,
    .cards-grid,
    .dashboard-content-grid {
        min-width: 0;
        max-width: 100%;
    }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-grid-compact .form-group,
    .form-grid-compact .form-group.span-2,
    .form-grid-compact .form-group.span-3 {
        grid-column: 1;
        width: 100%;
    }
    .inline-filter-grid {
        grid-template-columns: 1fr;
    }
    .inline-filter-grid > *,
    .inline-filter-grid .search-bar,
    .logistica-schedule-filters .select-search-wrap,
    .compact-filter-row .select-search-wrap {
        width: 100%;
    }
    .logistica-schedule-filters .select-search-wrap {
        display: block;
    }
    .compact-filter-row .select-search-wrap {
        display: block;
    }
    .compact-filter-panel {
        grid-template-columns: 1fr;
    }
    .compact-filter-panel .compact-filter-searchable {
        grid-column: 1;
    }
    .compact-filter-panel .select-search-wrap {
        display: block;
    }
    .compact-filter-actions,
    .compact-filter-actions .btn {
        width: 100%;
    }
    .table-inline-form {
        grid-template-columns: 1fr;
        width: 100%;
        min-width: 0;
    }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-chart-grid { grid-template-columns: 1fr !important; }
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }
    .dashboard-stats-grid .stat-card {
        min-height: 118px;
        padding: 12px 10px;
        gap: 9px;
        flex-direction: column;
    }
    .dashboard-stats-grid .stat-card::before {
        left: 10px;
        right: 10px;
    }
    .dashboard-stats-grid .stat-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
    .dashboard-stats-grid .stat-content {
        align-content: start;
        gap: 3px;
    }
    .dashboard-stats-grid .stat-content strong {
        font-size: 18px;
    }
    .dashboard-stats-grid .stat-content span {
        font-size: 11px;
        line-height: 1.2;
    }
    .dashboard-stats-grid .stat-content small {
        font-size: 9px;
        line-height: 1.2;
    }
    .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar { padding: 0 14px; }
    .topbar-userinfo { display: none; }
    .breadcrumb { max-width: calc(100vw - 150px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .sidebar-toggle { display: none; }
    .table-header { flex-wrap: wrap; gap: 10px; }
    .table-actions,
    .action-btns { flex-wrap: wrap; }
    .form-card .btn,
    .table-container .btn {
        white-space: normal;
        min-width: 0;
    }
    .form-card [style*="min-width"],
    .form-card [style*="width:"],
    .modal [style*="min-width"],
    .modal [style*="width:"],
    .table-container form [style*="min-width"],
    .table-container form [style*="width:"] {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .form-card input,
    .form-card select,
    .form-card textarea,
    .modal input,
    .modal select,
    .modal textarea,
    .table-container form input,
    .table-container form select,
    .table-container form textarea {
        max-width: 100%;
    }
    .priority-alert-top { margin: -16px -16px 20px; }
    .form-body { padding: 20px 16px; }
    .form-card-header { padding: 16px 18px; }
    .dashboard-intro { padding: 24px 18px; }
    .dashboard-intro-content { grid-template-columns: 1fr; gap: 16px; }
    .dashboard-intro-actions { justify-content: flex-start; }
    .dashboard-intro h1 { font-size: 24px; }
    .dashboard-intro-meta { gap: 12px; }
    .dashboard-content-grid { grid-template-columns: 1fr; }
    .dashboard-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modal { width: calc(100% - 20px); max-width: none; }
    .modal-body { padding: 18px 16px; }
    .modal-footer { padding: 14px 16px; flex-wrap: wrap; }
    .btn { justify-content: center; }
    .quick-links-grid { grid-template-columns: 1fr; }
    .panel-card-header,
    .panel-card-body { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   DARK MODE - capa final de contraste para formularios y paneles
   ============================================================ */
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .form-card,
[data-theme="dark"] .form-body,
[data-theme="dark"] .table-container,
[data-theme="dark"] .table-header,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .panel-card-header,
[data-theme="dark"] .panel-card-body,
[data-theme="dark"] .dashboard-main-panel,
[data-theme="dark"] .dashboard-side-panel,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .calendar-grid,
[data-theme="dark"] .role-card-body {
    color: #edf4ff;
}

[data-theme="dark"] .table-header,
[data-theme="dark"] .panel-card-header,
[data-theme="dark"] .panel-list-item,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] tbody tr {
    border-color: #243244 !important;
}

[data-theme="dark"] .table-header h2,
[data-theme="dark"] .panel-card-header h3,
[data-theme="dark"] .chart-card h3,
[data-theme="dark"] .calendar-header h2,
[data-theme="dark"] .role-card-body,
[data-theme="dark"] .role-user-item,
[data-theme="dark"] .inactivity-copy {
    color: #f6fbff !important;
}

[data-theme="dark"] .role-card-body p,
[data-theme="dark"] .inactivity-subcopy,
[data-theme="dark"] .calendar-grid-header,
[data-theme="dark"] .table-pagination-info {
    color: #b7c6d8 !important;
}

[data-theme="dark"] tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.025) !important;
}

[data-theme="dark"] tbody tr:hover {
    background: rgba(232, 184, 75, 0.14) !important;
}

[data-theme="dark"] tbody td,
[data-theme="dark"] tbody td strong,
[data-theme="dark"] tbody td b {
    color: #edf4ff !important;
}

[data-theme="dark"] thead th {
    background: linear-gradient(180deg, #17263a 0%, #0b1624 100%) !important;
    color: #f6fbff !important;
    border-bottom-color: #35465a !important;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .select-search-input,
[data-theme="dark"] .modal input,
[data-theme="dark"] .modal select,
[data-theme="dark"] .modal textarea,
[data-theme="dark"] .table-container input,
[data-theme="dark"] .table-container select,
[data-theme="dark"] .table-container textarea,
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="file"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #0b1624 !important;
    border-color: #53657a !important;
    color: #f6fbff !important;
    caret-color: #e8b84b;
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder,
[data-theme="dark"] .modal input::placeholder,
[data-theme="dark"] .modal textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #aebed1 !important;
    opacity: 1;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .select-search-input:focus,
[data-theme="dark"] .modal input:focus,
[data-theme="dark"] .modal select:focus,
[data-theme="dark"] .modal textarea:focus {
    border-color: #e8b84b !important;
    box-shadow: none !important;
}

[data-theme="dark"] select option {
    background: #0b1624;
    color: #f6fbff;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.4);
    opacity: 0.9;
}

[data-theme="dark"] .modal-header {
    background: #07111f;
    border-bottom-color: #243244;
}

[data-theme="dark"] .modal-header h3,
[data-theme="dark"] .modal-close,
[data-theme="dark"] .form-card-header h2,
[data-theme="dark"] .form-section-title {
    color: #f6fbff;
}

[data-theme="dark"] .modal-footer {
    background: #111c2b;
    border-top-color: #243244;
}

[data-theme="dark"] .empty-state,
[data-theme="dark"] .empty-state p,
[data-theme="dark"] code,
[data-theme="dark"] small,
[data-theme="dark"] td small,
[data-theme="dark"] p {
    color: #b7c6d8;
}

[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: #07111f !important;
    color: #f6fbff !important;
    border-color: #35465a !important;
}

[data-theme="dark"] .search-bar {
    background: #0b1624 !important;
    border-color: #53657a !important;
}

[data-theme="dark"] .search-bar i {
    color: #b7c6d8 !important;
}

[data-theme="dark"] .page-btn {
    background: #0b1624 !important;
    border-color: #53657a !important;
    color: #edf4ff !important;
}

[data-theme="dark"] .page-btn:hover {
    border-color: #e8b84b !important;
    color: #f7d58d !important;
}

[data-theme="dark"] .page-btn.active {
    background: #e8b84b !important;
    border-color: #e8b84b !important;
    color: #07111f !important;
}

[data-theme="dark"] .badge-navy {
    background: rgba(232, 184, 75, 0.16);
    color: #f7d58d;
}

[data-theme="dark"] .badge-success { background: rgba(39,174,96,0.22); color: #9be7b0; }
[data-theme="dark"] .badge-danger  { background: rgba(231,76,60,0.22); color: #ffb1aa; }
[data-theme="dark"] .badge-warning { background: rgba(243,156,18,0.22); color: #ffd68a; }
[data-theme="dark"] .badge-info    { background: rgba(41,128,185,0.24); color: #a7d4ff; }

[data-theme="dark"] .alert {
    background: #101b2a;
    border-color: #26364a;
    color: #edf4ff;
}

[data-theme="dark"] .alert-success { border-color: rgba(39,174,96,0.36); }
[data-theme="dark"] .alert-danger { border-color: rgba(231,76,60,0.36); }
[data-theme="dark"] .alert-warning { border-color: rgba(243,156,18,0.38); }
[data-theme="dark"] .alert-info { border-color: rgba(41,128,185,0.38); }
[data-theme="dark"] .alert-success > i:first-child { background: rgba(39,174,96,0.2); color: #9be7b0; }
[data-theme="dark"] .alert-danger > i:first-child { background: rgba(231,76,60,0.2); color: #ffb1aa; }
[data-theme="dark"] .alert-warning > i:first-child { background: rgba(243,156,18,0.22); color: #ffd68a; }
[data-theme="dark"] .alert-info > i:first-child { background: rgba(41,128,185,0.22); color: #a7d4ff; }

[data-theme="dark"] .notice-strip-title,
[data-theme="dark"] .reminder-item strong {
    color: #f6fbff;
}

[data-theme="dark"] .notice-chip {
    background: #251f13;
    border-color: rgba(232,184,75,0.32);
    color: #f7d58d;
}

[data-theme="dark"] .notice-chip strong {
    color: #ffe0a3;
}

[data-theme="dark"] .priority-alert {
    background: #151d29;
    border-color: rgba(232,184,75,0.34);
    border-left-color: #e8b84b;
}

[data-theme="dark"] .priority-alert-top {
    background: linear-gradient(180deg, #3a1717 0%, #281819 100%);
    border-top-color: #ff7a6c;
    border-bottom-color: rgba(255,122,108,0.34);
    border-left-color: rgba(255,122,108,0.34);
}

[data-theme="dark"] .priority-alert-item {
    background: #0b1624;
    border-color: #35465a;
}

[data-theme="dark"] .priority-alert-top .priority-alert-grid {
    background: rgba(255,122,108,0.08);
    border-color: rgba(255,122,108,0.28);
}

[data-theme="dark"] .priority-alert-top .priority-alert-item {
    background: rgba(11,22,36,0.78);
    border-bottom-color: rgba(255,122,108,0.24);
}

[data-theme="dark"] .priority-alert-top .priority-alert-count {
    background: #ff7a6c;
    color: #07111f;
}

[data-theme="dark"] .priority-alert-head strong,
[data-theme="dark"] .priority-alert-copy strong {
    color: #f6fbff;
}

[data-theme="dark"] .priority-alert-head span,
[data-theme="dark"] .priority-alert-copy span {
    color: #b7c6d8;
}

[data-theme="dark"] .priority-alert-icon {
    background: rgba(231,76,60,0.22);
    color: #ffb1aa;
}

[data-theme="dark"] .priority-alert-copy strong i {
    color: #ffb1aa;
}

[data-theme="dark"] .reminder-item {
    background: #0b1624;
    border-color: #35465a;
}

[data-theme="dark"] .reminder-date {
    background: #251f13;
    color: #f7d58d;
}

[data-theme="dark"] .reminder-item span {
    color: #b7c6d8;
}

[data-theme="dark"] .cal-day {
    background: #0b1624;
    border-color: #35465a;
    color: #edf4ff;
}

[data-theme="dark"] .cal-day:hover,
[data-theme="dark"] .cal-day.today {
    background: #251f13;
    border-color: #e8b84b;
}

[data-theme="dark"] .role-user-item,
[data-theme="dark"] .role-permission-list {
    background: #0b1624;
    border-color: #35465a;
}

[data-theme="dark"] .sol-checks label,
[data-theme="dark"] .sol-user-option,
[data-theme="dark"] label[style*="background:#fff"],
[data-theme="dark"] label[style*="background: #fff"],
[data-theme="dark"] label[style*="background:white"],
[data-theme="dark"] label[style*="background: white"],
[data-theme="dark"] .form-card label:not(.form-label):has(input[type="checkbox"]),
[data-theme="dark"] .form-card label:not(.form-label):has(input[type="radio"]),
[data-theme="dark"] .table-container label:not(.form-label):has(input[type="checkbox"]),
[data-theme="dark"] .table-container label:not(.form-label):has(input[type="radio"]) {
    background: #0b1624 !important;
    border-color: #53657a !important;
    color: #edf4ff !important;
}

[data-theme="dark"] .sol-checks label strong,
[data-theme="dark"] .sol-user-option strong,
[data-theme="dark"] .sol-user-option span,
[data-theme="dark"] .form-card label:has(input[type="checkbox"]) span,
[data-theme="dark"] .form-card label:has(input[type="radio"]) span {
    color: #f6fbff !important;
}

[data-theme="dark"] .sol-user-option small,
[data-theme="dark"] .sol-muted,
[data-theme="dark"] .form-card label:has(input[type="checkbox"]) small,
[data-theme="dark"] .form-card label:has(input[type="radio"]) small {
    color: #b7c6d8 !important;
}

[data-theme="dark"] .sol-feed-item p,
[data-theme="dark"] .sol-feed-item strong {
    color: #f6fbff;
}

[data-theme="dark"] .sol-feed-item a {
    color: #f7d58d;
    font-weight: 800;
}

[data-theme="dark"] .sol-feed-item a:hover {
    color: #e8b84b;
}

[data-theme="dark"] .sol-feed-item .sol-muted {
    color: #d8e5f4 !important;
}

[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    accent-color: #e8b84b;
}

[data-theme="dark"] .sol-checks label:has(input:checked),
[data-theme="dark"] .sol-user-option:has(input:checked),
[data-theme="dark"] .form-card label:has(input[type="checkbox"]:checked),
[data-theme="dark"] .form-card label:has(input[type="radio"]:checked),
[data-theme="dark"] .table-container label:has(input[type="checkbox"]:checked),
[data-theme="dark"] .table-container label:has(input[type="radio"]:checked) {
    background: #251f13 !important;
    border-color: #e8b84b !important;
    color: #ffe0a3 !important;
}

[data-theme="dark"] .sol-checks label:hover,
[data-theme="dark"] .sol-user-option:hover,
[data-theme="dark"] .form-card label:has(input[type="checkbox"]):hover,
[data-theme="dark"] .form-card label:has(input[type="radio"]):hover {
    border-color: #e8b84b !important;
    background: #111c2b !important;
}

[data-theme="dark"] .form-group label.checkbox-inline,
[data-theme="dark"] .form-group label.checkbox-inline:has(input[type="checkbox"]:checked),
[data-theme="dark"] .form-group label.checkbox-inline:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: #edf4ff !important;
}

[data-theme="dark"] .roles-checklist label,
[data-theme="dark"] .roles-checklist label:has(input[type="checkbox"]:checked),
[data-theme="dark"] .roles-checklist label:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: #edf4ff !important;
}

[data-theme="dark"] .upload-zone {
    background: #0b1624;
    border-color: #53657a;
    color: #edf4ff;
}

[data-theme="dark"] .upload-zone:hover {
    background: #111c2b;
    border-color: #e8b84b;
    color: #f7d58d;
}

[data-theme="dark"] .msg-panel,
[data-theme="dark"] .doc-sheet,
[data-theme="dark"] .boletin-card,
[data-theme="dark"] .boleta-sheet,
[data-theme="dark"] .student-search-results,
[data-theme="dark"] .student-search-option,
[data-theme="dark"] .student-search-empty,
[data-theme="dark"] .op-mini-list article {
    background: #101b2a !important;
    border-color: #26364a !important;
    color: #edf4ff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) !important;
}

[data-theme="dark"] .student-search-option:hover,
[data-theme="dark"] .student-search-option:focus,
[data-theme="dark"] .op-mini-list article:hover {
    background: #17263a !important;
}

[data-theme="dark"] .doc-sheet h1,
[data-theme="dark"] .doc-sheet h2,
[data-theme="dark"] .doc-sheet h3,
[data-theme="dark"] .boletin-card h1,
[data-theme="dark"] .boletin-card h2,
[data-theme="dark"] .boletin-card h3,
[data-theme="dark"] .boleta-sheet h1,
[data-theme="dark"] .boleta-sheet h2,
[data-theme="dark"] .boleta-sheet h3,
[data-theme="dark"] .msg-panel strong,
[data-theme="dark"] .op-mini-list article strong,
[data-theme="dark"] .student-search-option strong {
    color: #f6fbff !important;
}

[data-theme="dark"] .doc-sheet p,
[data-theme="dark"] .doc-sheet span,
[data-theme="dark"] .boletin-card p,
[data-theme="dark"] .boletin-card span,
[data-theme="dark"] .boleta-sheet p,
[data-theme="dark"] .boleta-sheet span,
[data-theme="dark"] .msg-panel span,
[data-theme="dark"] .op-mini-list article span,
[data-theme="dark"] .student-search-option small,
[data-theme="dark"] .student-search-empty {
    color: #b7c6d8 !important;
}

[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"] {
    background: #111c2b !important;
}

[data-theme="dark"] [style*="color:#0d1b2a"],
[data-theme="dark"] [style*="color: #0d1b2a"],
[data-theme="dark"] [style*="color:#10233a"],
[data-theme="dark"] [style*="color: #10233a"],
[data-theme="dark"] [style*="color:var(--navy)"],
[data-theme="dark"] [style*="color: var(--navy)"],
[data-theme="dark"] [style*="color:var(--text-dark)"],
[data-theme="dark"] [style*="color: var(--text-dark)"] {
    color: #f6fbff !important;
}

[data-theme="dark"] [style*="color:#4a5568"],
[data-theme="dark"] [style*="color: #4a5568"],
[data-theme="dark"] [style*="color:#66758a"],
[data-theme="dark"] [style*="color: #66758a"],
[data-theme="dark"] [style*="color:#42526b"],
[data-theme="dark"] [style*="color: #42526b"],
[data-theme="dark"] [style*="color:#8a9ab0"],
[data-theme="dark"] [style*="color: #8a9ab0"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:var(--text-mid)"],
[data-theme="dark"] [style*="color: var(--text-mid)"],
[data-theme="dark"] [style*="color:var(--text-light)"],
[data-theme="dark"] [style*="color: var(--text-light)"] {
    color: #b7c6d8 !important;
}

[data-theme="dark"] .table-container a:not(.btn):not(.action-btn),
[data-theme="dark"] .panel-card a:not(.btn):not(.action-btn),
[data-theme="dark"] .doc-sheet a:not(.btn):not(.action-btn),
[data-theme="dark"] .msg-panel a:not(.btn):not(.action-btn) {
    color: #f7d58d;
}

[data-theme="dark"] .table-container a:not(.btn):not(.action-btn):hover,
[data-theme="dark"] .panel-card a:not(.btn):not(.action-btn):hover,
[data-theme="dark"] .doc-sheet a:not(.btn):not(.action-btn):hover,
[data-theme="dark"] .msg-panel a:not(.btn):not(.action-btn):hover {
    color: #e8b84b;
}

[data-theme="dark"] [style*="border:1px solid #e8ecf1"],
[data-theme="dark"] [style*="border: 1px solid #e8ecf1"],
[data-theme="dark"] [style*="border-bottom:1px solid #e8ecf1"],
[data-theme="dark"] [style*="border-bottom: 1px solid #e8ecf1"],
[data-theme="dark"] [style*="border-top:1px solid #e8ecf1"],
[data-theme="dark"] [style*="border-top: 1px solid #e8ecf1"] {
    border-color: #243244 !important;
}

@media (max-width: 1080px) {
    .cal-layout { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-chart-grid { grid-template-columns: 1fr !important; }
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }
    .dashboard-stats-grid .stat-card {
        min-height: 108px;
        padding: 11px 9px;
        gap: 8px;
    }
    .dashboard-stats-grid .stat-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
    .dashboard-stats-grid .stat-content strong {
        font-size: 17px;
    }
    .dashboard-stats-grid .stat-content span {
        font-size: 10.5px;
    }
    .dashboard-stats-grid .stat-content small {
        font-size: 8.5px;
    }
    .cards-grid { grid-template-columns: 1fr; }
    .dashboard-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .dashboard-quick-grid .card {
        min-height: 160px;
        padding: 16px 12px;
        gap: 9px;
    }
    .dashboard-quick-grid .card-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .dashboard-quick-grid .card h3 {
        font-size: 13px;
        line-height: 1.25;
    }
    .dashboard-quick-grid .card p {
        font-size: 11px;
        line-height: 1.35;
    }
    .dashboard-quick-grid .card-link {
        font-size: 10px;
    }
    .topbar-right { gap: 8px; }
    .topbar-user { gap: 6px; }
    .page-header h1 { font-size: 22px; }
    .page-header { margin-bottom: 18px; }
    .page-header p { font-size: 13px; }
    .topbar { height: 58px; }
    .breadcrumb { font-size: 13px; max-width: calc(100vw - 130px); }
    .table-container { border-radius: 10px; }
    thead th, tbody td { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   NOTAS - Tabla de calificaciones
   ============================================================ */
.nota-cell {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
    min-width: 36px;
}
.nota-alta    { background: rgba(39,174,96,0.12);  color: #1e7e4e; }
.nota-media   { background: rgba(243,156,18,0.12); color: #7d5a00; }
.nota-baja    { background: rgba(231,76,60,0.12);  color: #b71c1c; }

/* ============================================================
   ASISTENCIA - Estados
   ============================================================ */
.asist-presente   { color: #27ae60; font-weight: 700; }
.asist-ausente    { color: #e74c3c; font-weight: 700; }
.asist-tardanza   { color: #f39c12; font-weight: 700; }
.asist-justificado{ color: #2980b9; font-weight: 700; }

/* ============================================================
   COMPORTAMIENTO - Tipo
   ============================================================ */
.comp-positivo { background: rgba(39,174,96,0.12);  color: #1e7e4e; }
.comp-negativo { background: rgba(231,76,60,0.12);  color: #b71c1c; }
.comp-neutro   { background: rgba(41,128,185,0.12); color: #0d47a1; }

/* ============================================================
   REPORTES - Chart cards
   ============================================================ */
.chart-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--slate);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}
.chart-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chart-card h3 i { color: var(--gold); }

.chart-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-title.compact {
    margin-bottom: 6px;
}

.chart-title i {
    color: var(--gold);
}

.chart-subtitle {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 14px;
}

[data-theme="dark"] .chart-title {
    color: #f6fbff !important;
}

[data-theme="dark"] .chart-title i {
    color: #f2c14e !important;
}

[data-theme="dark"] .chart-subtitle {
    color: #b7c6d8 !important;
}

[data-theme="dark"] .table-container .chart-title + canvas,
[data-theme="dark"] .table-container .chart-subtitle + canvas {
    color-scheme: dark;
}

[data-theme="dark"] .table-container,
[data-theme="dark"] .quick-link-card,
[data-theme="dark"] .stat-card {
    color: #edf4ff;
}

button.card {
    font-family: inherit;
    text-align: left;
    width: 100%;
    border: 1px solid transparent;
    cursor: pointer;
}

.director-insights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0;
}
.director-chart-card {
    min-width: 0;
    padding: 0;
    overflow: hidden;
}
.director-chart-card .table-header {
    padding: 16px 18px 8px;
    border-bottom: 0;
}
.director-chart-card .table-header h2 {
    font-size: 15px;
}
.director-chart-wrap {
    height: 260px;
    padding: 4px 16px 18px;
}
.topbar-notifications.has-new-notification .icon-btn {
    animation: bellPulse 0.9s ease-in-out 2;
}
@keyframes bellPulse {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(200, 149, 42, 0.16); }
}

@media (max-width: 1120px) {
    .director-insights-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .director-insights-grid { grid-template-columns: 1fr; }
    .director-chart-wrap { height: 230px; }
}

/* ============================================================
   SIDEBAR COLLAPSED (desktop)
   ============================================================ */
.sidebar.collapsed {
    width: var(--sidebar-collapsed-w);
}
.sidebar.collapsed .logo-text,
.sidebar.collapsed .user-info,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-group-toggle span,
.sidebar.collapsed .nav-arrow,
.sidebar.collapsed .logo-sub,
.sidebar.collapsed .badge-count {
    display: none;
}
.sidebar.collapsed .sidebar-header {
    flex-direction: row;
    justify-content: space-between;
    gap: 2px;
    padding: 14px 8px 12px 2px;
}
.sidebar.collapsed .sidebar-logo {
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-start;
}
.sidebar.collapsed .logo-icon {
    width: 48px;
    height: 48px;
    margin: 0;
}
.sidebar.collapsed .sidebar-toggle {
    width: 26px;
    height: 30px;
    margin: 0;
    padding: 2px;
    border-radius: 9px;
    font-size: 14px;
}
.sidebar.collapsed .sidebar-user {
    justify-content: center;
    flex-direction: column;
    padding: 16px 10px;
}
.sidebar.collapsed .sidebar-nav {
    padding: 12px 8px;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar.collapsed .nav-group {
    position: relative;
}
.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-group-toggle { justify-content: center; padding: 12px 10px; }
.sidebar.collapsed .nav-item i,
.sidebar.collapsed .nav-group-toggle i:first-child { width: auto; font-size: 18px; }
.sidebar.collapsed .nav-submenu {
    display: none !important;
    position: fixed;
    top: var(--flyout-top, 80px);
    left: var(--flyout-left, calc(var(--sidebar-collapsed-w) + 10px));
    z-index: 1200;
    min-width: 230px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(226, 181, 63, 0.18);
    border-radius: 8px;
    background: rgba(8, 23, 43, 0.98);
    box-shadow: 0 18px 36px rgba(2, 8, 23, 0.32);
}
.sidebar.collapsed .nav-group:hover > .nav-submenu,
.sidebar.collapsed .nav-group:focus-within > .nav-submenu,
.sidebar.collapsed .nav-group.flyout-open > .nav-submenu {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
}
.sidebar.collapsed .nav-submenu::before {
    content: '';
    position: absolute;
    top: 10px;
    left: -10px;
    width: 10px;
    height: 44px;
}
.sidebar.collapsed .nav-sub-item {
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    white-space: nowrap;
}
.sidebar.collapsed .nav-sub-item span {
    display: inline;
}
.sidebar.collapsed .nav-sub-item i {
    width: 18px;
    min-width: 18px;
    text-align: center;
}
.main-content.expanded { margin-left: var(--sidebar-collapsed-w); width: calc(100% - var(--sidebar-collapsed-w)); }
.main-wrapper.expanded { margin-left: var(--sidebar-collapsed-w); width: calc(100% - var(--sidebar-collapsed-w)); }

/* ============================================================
   FORM card para agregar/editar con secciones
   ============================================================ */
.form-steps {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--slate);
    overflow-x: auto;
}
.form-step-btn {
    padding: 12px 20px;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: var(--transition);
}
.form-step-btn.active { color: var(--navy); border-bottom-color: var(--gold); }
.form-step-btn:hover  { color: var(--navy); background: var(--slate); }

[data-theme="dark"] .form-step-btn {
    color: #b7c6d8;
}

[data-theme="dark"] .form-step-btn.active {
    color: #f7d58d;
    border-bottom-color: #e8b84b;
}

[data-theme="dark"] .form-step-btn:hover {
    color: #f6fbff;
    background: #17263a;
}

/* ============================================================
   UPLOAD ZONE
   ============================================================ */
.upload-zone {
    border: 2px dashed var(--slate-mid);
    border-radius: var(--radius-sm);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-light);
    font-size: 13px;
}
.upload-zone:hover { border-color: var(--gold); color: var(--navy); background: var(--gold-pale); }
.upload-zone i { font-size: 28px; display: block; margin-bottom: 8px; }

[data-theme="dark"] .nota-alta {
    background: rgba(39,174,96,0.22);
    color: #9be7b0;
}

[data-theme="dark"] .nota-media {
    background: rgba(243,156,18,0.22);
    color: #ffd68a;
}

[data-theme="dark"] .nota-baja {
    background: rgba(231,76,60,0.22);
    color: #ffb1aa;
}

[data-theme="dark"] .comp-positivo {
    background: rgba(39,174,96,0.22);
    color: #9be7b0;
}

[data-theme="dark"] .comp-negativo {
    background: rgba(231,76,60,0.22);
    color: #ffb1aa;
}

[data-theme="dark"] .comp-neutro {
    background: rgba(41,128,185,0.24);
    color: #a7d4ff;
}

[data-theme="dark"] .asist-presente { color: #9be7b0; }
[data-theme="dark"] .asist-ausente { color: #ffb1aa; }
[data-theme="dark"] .asist-tardanza { color: #ffd68a; }
[data-theme="dark"] .asist-justificado { color: #a7d4ff; }

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .sidebar, .topbar, .btn, .action-btns, .modal-overlay { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .main-wrapper { margin-left: 0 !important; }
    body { background: white; }
    table { font-size: 12px; }
    thead th { background: #0d1b2a !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ============================================================
   CAMBIO OBLIGATORIO DE CONTRASENA
   ============================================================ */
body.password-reset-page {
    min-height: 100vh;
    background: #0d1b2a;
    overflow: hidden;
}

.password-reset-backdrop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    filter: blur(8px);
    transform: scale(1.02);
    opacity: 0.82;
    pointer-events: none;
}

.password-reset-backdrop::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 42, 0.42);
}

.password-reset-app-preview {
    min-height: 100vh;
}

.password-reset-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.password-reset-panel {
    width: min(760px, 100%);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 18px;
    box-shadow: 0 26px 80px rgba(13, 27, 42, 0.34);
    padding: 30px 28px 26px;
    position: relative;
    overflow: visible;
}

.password-reset-heading,
.password-reset-form,
.password-reset-alert {
    position: relative;
    z-index: 1;
}

.password-reset-heading {
    padding: 0 0 18px;
}

.password-reset-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gold);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.password-reset-heading h1 {
    font-family: var(--font-body);
    font-size: 21px;
    line-height: 1.25;
    margin-bottom: 8px;
    color: var(--navy);
}

.password-reset-heading p {
    color: #53687f;
    font-size: 14px;
    line-height: 1.6;
}

.password-reset-alert {
    margin: 0 0 16px;
}

.password-reset-alert.login-notice-error {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff1f0;
    border: 1px solid rgba(220, 53, 69, 0.34);
    border-left: 5px solid #dc3545;
    box-shadow: 0 12px 26px rgba(220, 53, 69, 0.12);
    padding: 14px 16px 14px 52px;
}

.password-reset-alert .login-notice-icon {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dc3545;
    color: #fff;
    box-shadow: 0 8px 18px rgba(220, 53, 69, 0.22);
}

.password-reset-alert .login-notice-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.password-reset-alert .login-notice-copy strong {
    color: #8f1722;
    font-size: 13.5px;
}

.password-reset-alert .login-notice-copy span {
    color: #5f1f25;
    font-size: 12.5px;
}

.password-reset-errors {
    display: grid;
    gap: 6px;
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}

.password-reset-errors li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    color: #7a1f1f;
    font-size: 12.5px;
    line-height: 1.35;
}

.password-reset-errors i {
    color: #dc3545;
    margin-top: 2px;
}

.password-reset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.password-reset-input {
    height: 48px;
    border: 1px solid #c8d3df;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    transition: var(--transition);
}

.password-reset-input:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(200, 149, 42, 0.12);
}

.password-reset-input > i {
    color: var(--gold);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.password-reset-input input {
    flex: 1;
    border: 0;
    outline: 0;
    width: auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: var(--text-dark);
    caret-color: var(--text-dark);
    font: inherit;
    background: #fff;
    box-shadow: none;
    appearance: none;
}

.password-reset-input input::placeholder {
    color: #7b8da3;
    opacity: 1;
}

.password-reset-input input:-webkit-autofill,
.password-reset-input input:-webkit-autofill:hover,
.password-reset-input input:-webkit-autofill:focus,
.password-reset-input input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-dark);
    caret-color: var(--text-dark);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 9999s ease-out;
}

.password-reset-input .password-toggle {
    position: static;
    transform: none;
    width: 34px;
    height: 34px;
    min-height: 34px;
    border: 0;
    border-radius: 9px;
    background: #f4f7fb;
    color: #64748b;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.password-reset-input .password-toggle:hover,
.password-reset-input .password-toggle:focus-visible {
    background: #eaf0f7;
    color: var(--gold-dark);
}

body.password-reset-page,
[data-theme="dark"] body.password-reset-page {
    color-scheme: light;
}

body.password-reset-page .password-reset-input,
[data-theme="dark"] body.password-reset-page .password-reset-input {
    background: #fff !important;
    border-color: #c8d3df !important;
}

body.password-reset-page .password-reset-input input,
[data-theme="dark"] body.password-reset-page .password-reset-input input,
[data-theme="dark"] body.password-reset-page input[type="password"] {
    background: #fff !important;
    color: var(--text-dark) !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    caret-color: var(--text-dark) !important;
}

body.password-reset-page .password-reset-input input::placeholder,
[data-theme="dark"] body.password-reset-page .password-reset-input input::placeholder {
    color: #7b8da3 !important;
}

body.password-reset-page .password-reset-input input:-webkit-autofill,
body.password-reset-page .password-reset-input input:-webkit-autofill:hover,
body.password-reset-page .password-reset-input input:-webkit-autofill:focus,
[data-theme="dark"] body.password-reset-page .password-reset-input input:-webkit-autofill,
[data-theme="dark"] body.password-reset-page .password-reset-input input:-webkit-autofill:hover,
[data-theme="dark"] body.password-reset-page .password-reset-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-dark) !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
}

[data-theme="dark"] body.password-reset-page .password-reset-input .password-toggle {
    background: #f4f7fb !important;
    color: #64748b !important;
    border: 0 !important;
}

.password-reset-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 0 0;
}

.password-reset-actions .btn {
    min-height: 42px;
    border-radius: 12px;
    padding: 0 18px;
}

@media (max-width: 768px) {
    body.password-reset-page {
        overflow-y: auto;
    }

    .password-reset-overlay {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .password-reset-panel {
        border-radius: 18px;
        padding: 24px 18px 20px;
    }

    .password-reset-heading,
    .password-reset-grid,
    .password-reset-actions,
    .password-reset-alert {
        padding-left: 0;
        margin-left: 0;
    }

    .password-reset-alert.login-notice-error {
        padding-left: 52px;
    }

    .password-reset-grid {
        grid-template-columns: 1fr;
    }

    .password-reset-actions {
        justify-content: stretch;
        flex-direction: column-reverse;
    }

    .password-reset-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   POLISH FINAL - contraste, responsive y estados interactivos
   ============================================================ */
button,
.btn,
.action-btn,
.page-btn,
.icon-btn,
input,
select,
textarea,
a {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.action-btn:focus-visible,
.page-btn:focus-visible,
.icon-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
}

.btn,
.action-btn,
.icon-btn,
.page-btn {
    min-height: 34px;
}

.btn-outline {
    background: #ffffff;
    color: #0d1b2a;
    border-color: #b8c3d1;
}

.btn-outline:hover {
    background: #eef3f8;
    border-color: #0d1b2a;
    color: #0d1b2a;
}

.badge {
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.badge-success { background: #e8f7ef; color: #17683a; border-color: #bfe8d0; }
.badge-danger  { background: #fdecea; color: #a6372d; border-color: #f5c3bd; }
.badge-warning { background: #fff4d9; color: #8a5700; border-color: #f1d18a; }
.badge-info    { background: #eaf4fb; color: #155f8d; border-color: #bdddf1; }
.badge-navy    { background: #e9eef5; color: #0d1b2a; border-color: #c7d1df; }

thead th {
    color: #ffffff;
    font-weight: 800;
}

tbody td {
    color: #1f2e43;
    vertical-align: middle;
}

tbody td small {
    color: #64748b;
}

.table-actions,
.action-btns,
.manage-student-actions {
    min-width: 0;
}

.table-actions .btn,
.action-btns .btn,
.manage-student-actions .btn {
    flex: 0 0 auto;
}

.form-group label.checkbox-inline,
.roles-checklist label {
    width: fit-content;
    max-width: 100%;
}

.form-group label.checkbox-inline:has(input[type="checkbox"]:checked),
.roles-checklist label:has(input[type="checkbox"]:checked) {
    color: #0d1b2a;
}

.roles-checklist label.todos-roles {
    font-weight: 800;
}

.roles-checklist input[type="checkbox"],
.form-group label.checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    max-width: 16px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    flex: 0 0 16px;
    margin: 0;
    accent-color: var(--gold);
}

.urgencia-badge.informativo { background: #eaf4fb; color: #155f8d; border: 1px solid #bdddf1; }
.urgencia-badge.importante { background: #fff4d9; color: #8a5700; border: 1px solid #f1d18a; }
.urgencia-badge.urgente { background: #fdecea; color: #a6372d; border: 1px solid #f5c3bd; }

.attendance-note-input {
    width: clamp(190px, 24vw, 280px);
    max-width: 100%;
    padding: 7px 10px;
    border: 1.5px solid #cdd5df;
    border-radius: 8px;
    font-size: 12.5px;
    color: #0d1b2a;
    background: #ffffff;
    outline: none;
}

.attendance-note-input:focus {
    border-color: #c8952a;
    box-shadow: 0 0 0 3px rgba(200,149,42,0.14);
}

[data-theme="dark"] .btn-outline {
    background: #0b1624 !important;
    border-color: #6b7f96 !important;
    color: #f6fbff !important;
}

[data-theme="dark"] .btn-outline:hover {
    background: #17263a !important;
    border-color: #e8b84b !important;
    color: #ffe0a3 !important;
}

[data-theme="dark"] .badge {
    border-color: rgba(255,255,255,0.12);
}

[data-theme="dark"] .badge-success { background: rgba(39,174,96,0.24); color: #a8f0bf; border-color: rgba(155,231,176,0.35); }
[data-theme="dark"] .badge-danger  { background: rgba(231,76,60,0.24); color: #ffc1bb; border-color: rgba(255,177,170,0.35); }
[data-theme="dark"] .badge-warning { background: rgba(243,156,18,0.24); color: #ffe0a3; border-color: rgba(255,214,138,0.35); }
[data-theme="dark"] .badge-info    { background: rgba(41,128,185,0.26); color: #bfe3fb; border-color: rgba(167,212,255,0.35); }
[data-theme="dark"] .badge-navy    { background: rgba(232,184,75,0.18); color: #ffe0a3; border-color: rgba(232,184,75,0.34); }

[data-theme="dark"] tbody td small {
    color: #b7c6d8 !important;
}

[data-theme="dark"] .urgencia-badge.informativo { background: rgba(41,128,185,0.24); color: #bfe3fb; border-color: rgba(167,212,255,0.34); }
[data-theme="dark"] .urgencia-badge.importante { background: rgba(243,156,18,0.22); color: #ffe0a3; border-color: rgba(255,214,138,0.34); }
[data-theme="dark"] .urgencia-badge.urgente { background: rgba(231,76,60,0.24); color: #ffc1bb; border-color: rgba(255,177,170,0.34); }

[data-theme="dark"] .attendance-note-input {
    background: #0b1624 !important;
    border-color: #53657a !important;
    color: #f6fbff !important;
}

[data-theme="dark"] .attendance-note-input:focus {
    border-color: #e8b84b !important;
    box-shadow: 0 0 0 3px rgba(232,184,75,0.18) !important;
}

[data-theme="dark"] .form-group label.checkbox-inline:has(input[type="checkbox"]:checked),
[data-theme="dark"] .roles-checklist label:has(input[type="checkbox"]:checked),
[data-theme="dark"] .roles-checklist label.todos-roles {
    color: #ffe0a3 !important;
}

[data-theme="dark"] .form-check-control {
    color: #edf4ff;
}

[data-theme="dark"] .form-check-control:has(input[type="checkbox"]:checked) {
    color: #ffe0a3;
}

[data-theme="dark"] .form-check-control input[type="checkbox"] {
    background: #f6fbff;
    border-color: #8ea2b8;
}

[data-theme="dark"] .form-check-control input[type="checkbox"]:checked {
    background: #e8b84b;
    border-color: #e8b84b;
}

@media (max-width: 768px) {
    .table-header {
        align-items: stretch;
    }

    .table-header h2,
    .table-header h3 {
        line-height: 1.25;
    }

    .table-actions,
    .action-btns,
    .manage-student-actions {
        width: 100%;
        gap: 8px;
    }

    .table-actions .btn,
    .action-btns .btn {
        min-width: 42px;
    }

    .roles-checklist {
        gap: 8px 14px;
    }

    .roles-checklist label {
        min-height: 30px;
    }

    .compact-filter-row {
        align-items: stretch;
    }

    .compact-filter-row > *,
    .compact-filter-panel > * {
        min-width: 0;
    }

    .attendance-note-input {
        width: min(220px, 54vw);
    }
}

@media (max-width: 480px) {
    .page-content {
        padding: 12px;
    }

    .form-body {
        padding: 18px 14px;
    }

    .table-header,
    .panel-card-header {
        padding: 15px 14px;
    }

    thead th,
    tbody td {
        padding-left: 12px;
        padding-right: 12px;
    }

    .btn {
        min-height: 38px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .badge,
    .urgencia-badge {
        white-space: normal;
        text-align: center;
    }
}
/* Role-aware sidebar priorities. Lower order appears first without duplicating menus. */
.sidebar-nav .nav-home { order: -100; }
.sidebar-nav .nav-config-divider { order: 80; }
.sidebar-nav .nav-configuracion { order: 81; }
.sidebar-nav .nav-salir { order: 90; }

.sidebar-nav-role-tesoreria .nav-pagos { order: -92; }
.sidebar-nav-role-tesoreria .nav-students { order: -82; }
.sidebar-nav-role-tesoreria .nav-padres { order: -78; }
.sidebar-nav-role-tesoreria .nav-comunicados { order: -72; }
.sidebar-nav-role-tesoreria .nav-reportes { order: -68; }
.sidebar-nav-role-tesoreria .nav-rrhh { order: -62; }
.sidebar-nav-role-tesoreria .nav-calendario { order: -56; }
.sidebar-nav-role-tesoreria .nav-solicitudes { order: -50; }

.sidebar-nav-role-secretaria .nav-center-secretaria { order: -92; }
.sidebar-nav-role-secretaria .nav-matriculas { order: -88; }
.sidebar-nav-role-secretaria .nav-students { order: -84; }
.sidebar-nav-role-secretaria .nav-padres { order: -78; }
.sidebar-nav-role-secretaria .nav-comunicados { order: -72; }
.sidebar-nav-role-secretaria .nav-solicitudes { order: -66; }
.sidebar-nav-role-secretaria .nav-operaciones { order: -60; }

.sidebar-nav-role-director .nav-center-director,
.sidebar-nav-role-gerencia .nav-center-director { order: -92; }
.sidebar-nav-role-director .nav-reportes,
.sidebar-nav-role-gerencia .nav-reportes { order: -88; }
.sidebar-nav-role-director .nav-pagos,
.sidebar-nav-role-gerencia .nav-pagos { order: -84; }
.sidebar-nav-role-director .nav-students,
.sidebar-nav-role-gerencia .nav-students { order: -80; }
.sidebar-nav-role-director .nav-docentes,
.sidebar-nav-role-gerencia .nav-docentes { order: -76; }
.sidebar-nav-role-director .nav-calendario,
.sidebar-nav-role-gerencia .nav-calendario { order: -70; }

.sidebar-nav-role-profesor .nav-mi-aula { order: -92; }
.sidebar-nav-role-profesor .nav-cursos { order: -86; }
.sidebar-nav-role-profesor .nav-comunicados { order: -78; }
.sidebar-nav-role-profesor .nav-calendario { order: -72; }
.sidebar-nav-role-profesor .nav-solicitudes { order: -66; }

.sidebar-nav-role-auxiliar .nav-monitoreo { order: -92; }
.sidebar-nav-role-auxiliar .nav-asistencia { order: -88; }
.sidebar-nav-role-auxiliar .nav-students { order: -80; }
.sidebar-nav-role-auxiliar .nav-observaciones { order: -74; }
.sidebar-nav-role-auxiliar .nav-comunicados { order: -68; }
.sidebar-nav-role-auxiliar .nav-solicitudes { order: -62; }

.sidebar-nav-role-logistica .nav-logistica-workbench { order: -94; }
.sidebar-nav-role-logistica .nav-logistica { order: -92; }
.sidebar-nav-role-logistica .nav-cursos { order: -86; }
.sidebar-nav-role-logistica .nav-docentes { order: -80; }
.sidebar-nav-role-logistica .nav-students { order: -74; }
.sidebar-nav-role-logistica .nav-reportes { order: -68; }
.sidebar-nav-role-logistica .nav-operaciones { order: -62; }

.sidebar-nav-role-administrador .nav-center-director { order: -92; }
.sidebar-nav-role-administrador .nav-pagos { order: -88; }
.sidebar-nav-role-administrador .nav-matriculas { order: -84; }
.sidebar-nav-role-administrador .nav-students { order: -80; }
.sidebar-nav-role-administrador .nav-reportes { order: -74; }

/* ===== Portal familiar: experiencia mobile-first ===== */
.parent-portal-page {
    background: #f3f6fa;
}

.parent-portal {
    max-width: 1320px;
    margin: 0 auto;
    padding-bottom: 48px;
}

.parent-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 200px;
    padding: 34px 38px;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 20%, rgba(232,184,75,.3), transparent 27%),
        linear-gradient(135deg, #0b1726 0%, #142b45 58%, #1d4264 100%);
    box-shadow: 0 18px 45px rgba(13,27,42,.18);
}

.parent-hero::after {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    right: -90px;
    bottom: -150px;
    border: 36px solid rgba(255,255,255,.055);
    border-radius: 50%;
}

.parent-hero-copy,
.parent-hero-summary { position: relative; z-index: 1; }
.parent-eyebrow,
.parent-card-kicker,
.parent-section-heading span,
.parent-panel-header span {
    display: block;
    margin-bottom: 7px;
    color: #a87312;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.parent-eyebrow { color: #f4ca70; }
.parent-eyebrow i { margin-right: 6px; }
.parent-hero h1 { margin: 0; color: #fff; font-size: clamp(27px, 3vw, 42px); line-height: 1.12; }
.parent-hero p { max-width: 620px; margin: 11px 0 0; color: #d8e2ec; font-size: 15px; line-height: 1.65; }
.parent-hero-summary { display: flex; gap: 10px; flex-shrink: 0; }
.parent-hero-summary div {
    display: grid;
    min-width: 112px;
    padding: 18px 16px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 17px;
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(8px);
    text-align: center;
}
.parent-hero-summary strong { color: #f5c963; font-size: 28px; line-height: 1; }
.parent-hero-summary span { margin-top: 8px; color: #e4ebf2; font-size: 11px; }

.parent-push-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 17px;
    margin-top: 18px;
    padding: 20px 22px;
    border: 1px solid #dce6ef;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(36,59,85,.07);
}
.parent-push-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, #c8952a, #e8b84b);
    box-shadow: 0 8px 18px rgba(200,149,42,.25);
    font-size: 19px;
}
.parent-push-copy h2 { margin: 0; color: #17283b; font-size: 17px; }
.parent-push-copy p { margin: 5px 0 0; color: #68798c; font-size: 13px; }
.parent-push-copy small { display: block; margin-top: 5px; color: #3b7b5d; font-weight: 600; }
.parent-push-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: #0d1b2a;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}
.parent-push-button:hover { background: #1b3652; transform: translateY(-1px); }
.parent-push-button:disabled { cursor: not-allowed; opacity: .55; transform: none; }

.parent-section { margin-top: 30px; scroll-margin-top: 85px; }
.parent-section-heading,
.parent-panel-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.parent-section-heading h2,
.parent-panel-header h2 { margin: 0; color: #17283b; font-size: 21px; }
.parent-section-heading small { color: #7a8999; font-size: 12px; }
.parent-children {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 12px;
}
.parent-child-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 82px;
    padding: 14px;
    border: 1px solid #dce5ee;
    border-radius: 18px;
    color: inherit;
    background: #fff;
    box-shadow: 0 5px 18px rgba(36,59,85,.05);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.parent-child-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(36,59,85,.1); }
.parent-child-card.active { border-color: #d6a33b; box-shadow: 0 0 0 3px rgba(232,184,75,.15), 0 8px 25px rgba(36,59,85,.09); }
.parent-child-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #f1c45d;
    background: linear-gradient(145deg, #142b45, #254e72);
    font-size: 20px;
    font-weight: 800;
}
.parent-child-avatar img { width: 100%; height: 100%; object-fit: cover; }
.parent-child-avatar-all { background: linear-gradient(145deg, #9a6d17, #d29c2f); color: #fff; }
.parent-child-data { min-width: 0; }
.parent-child-data strong,
.parent-child-data small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parent-child-data strong { color: #17283b; font-size: 14px; }
.parent-child-data small { margin-top: 5px; color: #728195; font-size: 11px; }
.parent-child-check { color: #c8952a; opacity: 0; }
.parent-child-card.active .parent-child-check { opacity: 1; }

.parent-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 18px;
    margin-top: 24px;
}
.parent-panel {
    overflow: hidden;
    border: 1px solid #dce5ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(36,59,85,.06);
    scroll-margin-top: 85px;
}
.parent-panel-header { align-items: center; margin: 0; padding: 20px 21px 14px; border-bottom: 1px solid #edf1f5; }
.parent-panel-header h2 { font-size: 18px; }
.parent-count { padding: 6px 9px; border-radius: 999px; color: #8b6417; background: #fff4d9; font-size: 10px; }
.parent-feed { padding: 4px 18px 12px; }
.parent-feed-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 15px 3px;
    border-bottom: 1px solid #edf1f5;
    color: inherit;
    text-decoration: none;
}
.parent-feed-item:last-child { border-bottom: 0; }
.parent-feed-item.is-unread::before { content: ''; position: absolute; left: -9px; width: 4px; height: 28px; border-radius: 6px; background: #d5a238; }
.parent-feed-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: #245071; background: #e9f2f8; }
.parent-feed-item.is-unread .parent-feed-icon { color: #8c6414; background: #fff3d6; }
.parent-feed-meta { display: block; margin-bottom: 4px; color: #8996a4; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.parent-feed-content strong { display: block; color: #223449; font-size: 13px; }
.parent-feed-content p { display: -webkit-box; overflow: hidden; margin: 5px 0 0; color: #68798b; font-size: 11.5px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.parent-feed-arrow { color: #aeb9c4; font-size: 11px; }

.parent-communication { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 17px 3px; border-bottom: 1px solid #edf1f5; }
.parent-communication[hidden] { display: none; }
.parent-communication:last-of-type { border-bottom: 0; }
.parent-communication-date { display: grid; align-content: center; width: 45px; height: 52px; border-radius: 13px; color: #17324c; background: #edf3f8; text-align: center; }
.parent-communication-date span { font-size: 17px; font-weight: 800; line-height: 1; }
.parent-communication-date small { margin-top: 4px; color: #718294; font-size: 8px; font-weight: 800; }
.parent-communication-copy strong { color: #223449; font-size: 14px; }
.parent-communication-copy p { display: -webkit-box; overflow: hidden; margin: 7px 0 0; color: #66778a; font-size: 12px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.parent-communication.expanded p { display: block; overflow: visible; }
.parent-read-more { margin-top: 8px; padding: 0; border: 0; color: #986b17; background: none; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.parent-read-more i { margin-left: 4px; font-size: 9px; }
.parent-empty { display: flex; align-items: center; gap: 13px; padding: 25px 8px; color: #728195; }
.parent-empty > i { display: grid; place-items: center; flex: 0 0 45px; height: 45px; border-radius: 14px; color: #65809a; background: #edf3f8; }
.parent-empty strong { color: #34475b; font-size: 13px; }
.parent-empty p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; }
.parent-empty-warning { border: 1px solid #f0d797; border-radius: 17px; background: #fff9e9; }
.parent-mobile-nav { display: none; }

@media (max-width: 980px) {
    .parent-dashboard-grid { grid-template-columns: 1fr; }
    .parent-hero { min-height: 180px; padding: 28px; }
}

@media (max-width: 768px) {
    .parent-portal-page .sidebar { display: none; }
    .parent-portal-page .main-content { margin-left: 0 !important; width: 100% !important; }
    .parent-portal-page .topbar { height: 58px; padding: 0 15px; }
    .parent-portal-page .mobile-toggle { display: none; }
    .parent-portal-page .page-content.parent-portal { padding: 14px 14px calc(94px + env(safe-area-inset-bottom)); }
    .parent-hero { display: block; min-height: auto; padding: 25px 21px; border-radius: 20px; }
    .parent-hero h1 { font-size: 28px; }
    .parent-hero p { font-size: 13px; line-height: 1.55; }
    .parent-hero-summary { margin-top: 21px; }
    .parent-hero-summary div { min-width: 0; flex: 1; padding: 13px 10px; }
    .parent-hero-summary strong { font-size: 23px; }
    .parent-push-card { grid-template-columns: auto 1fr; padding: 16px; border-radius: 17px; }
    .parent-push-icon { width: 43px; height: 43px; border-radius: 13px; }
    .parent-push-copy h2 { font-size: 14px; }
    .parent-push-copy p { font-size: 11.5px; }
    .parent-push-button { grid-column: 1 / -1; width: 100%; min-height: 47px; }
    .parent-section { margin-top: 24px; }
    .parent-section-heading h2 { font-size: 19px; }
    .parent-section-heading small { display: none; }
    .parent-children { display: flex; overflow-x: auto; gap: 10px; margin: 0 -14px; padding: 3px 14px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .parent-children::-webkit-scrollbar { display: none; }
    .parent-child-card { flex: 0 0 238px; scroll-snap-align: start; }
    .parent-dashboard-grid { gap: 14px; margin-top: 17px; }
    .parent-panel { border-radius: 18px; }
    .parent-panel-header { padding: 18px 16px 13px; }
    .parent-feed { padding: 3px 14px 10px; }
    .parent-mobile-nav {
        position: fixed;
        z-index: 1200;
        right: 10px;
        bottom: calc(9px + env(safe-area-inset-bottom));
        left: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        min-height: 66px;
        padding: 7px 5px;
        border: 1px solid rgba(222,230,238,.9);
        border-radius: 20px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 12px 35px rgba(13,27,42,.22);
        backdrop-filter: blur(14px);
    }
    .parent-mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 14px; color: #8290a0; font-size: 9px; font-weight: 700; text-decoration: none; }
    .parent-mobile-nav a > i,
    .parent-mobile-badge-wrap > i { font-size: 17px; }
    .parent-mobile-nav a.active { color: #9b6b12; background: #fff5dc; }
    .parent-mobile-badge-wrap { position: relative; }
    .parent-mobile-badge-wrap b { position: absolute; top: -8px; right: -10px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #d24a4a; font-size: 8px; }
}

@media (max-width: 390px) {
    .parent-portal-page .page-content.parent-portal { padding-right: 10px; padding-left: 10px; }
    .parent-hero { padding: 22px 17px; }
    .parent-hero-summary span { font-size: 9px; }
    .parent-push-card { padding: 14px; }
    .parent-child-card { flex-basis: 220px; }
    .parent-feed-item { gap: 9px; }
    .parent-feed-icon { width: 35px; height: 35px; }
    .parent-mobile-nav { right: 6px; left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .parent-portal *, .parent-mobile-nav * { scroll-behavior: auto !important; transition: none !important; }
}

[data-theme="dark"] .parent-portal-page { background: #0d1723; }
[data-theme="dark"] .parent-push-card,
[data-theme="dark"] .parent-child-card,
[data-theme="dark"] .parent-panel { border-color: #2a3c50; background: #172433; }
[data-theme="dark"] .parent-push-copy h2,
[data-theme="dark"] .parent-section-heading h2,
[data-theme="dark"] .parent-panel-header h2,
[data-theme="dark"] .parent-child-data strong,
[data-theme="dark"] .parent-feed-content strong,
[data-theme="dark"] .parent-communication-copy strong { color: #edf3f8; }
[data-theme="dark"] .parent-feed-item,
[data-theme="dark"] .parent-panel-header,
[data-theme="dark"] .parent-communication { border-color: #2a3c50; }

/* Autocomplete para buscadores */
.pcsc-autocomplete-anchor {
    position: relative;
    overflow: visible;
}

.pcsc-suggestions {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 80;
    background: var(--white);
    border: 1px solid var(--slate-mid);
    border-radius: var(--radius-sm);
    box-shadow: 0 14px 32px rgba(13, 27, 42, 0.16);
    padding: 6px;
    max-height: 292px;
    overflow-y: auto;
}

.pcsc-suggestions.open {
    display: block;
}

.pcsc-suggestion-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-dark);
    display: grid;
    gap: 2px;
    padding: 10px 11px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
}

.pcsc-suggestion-item span {
    font-weight: 800;
    font-size: 13.5px;
    line-height: 1.25;
}

.pcsc-suggestion-item small {
    color: var(--text-light);
    font-size: 12px;
    line-height: 1.25;
}

.pcsc-suggestion-item:hover,
.pcsc-suggestion-item.active {
    background: var(--gold-pale);
    color: var(--navy);
}

.pcsc-suggestion-empty {
    padding: 10px 11px;
    color: var(--text-light);
    font-size: 13px;
}

[data-theme="dark"] .pcsc-suggestions {
    background: var(--navy-mid);
    border-color: #53657a;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
}

[data-theme="dark"] .pcsc-suggestion-item {
    color: #edf4ff;
}

[data-theme="dark"] .pcsc-suggestion-item small,
[data-theme="dark"] .pcsc-suggestion-empty {
    color: #bfd0e4;
}

[data-theme="dark"] .pcsc-suggestion-item:hover,
[data-theme="dark"] .pcsc-suggestion-item.active {
    background: rgba(232, 184, 75, 0.16);
    color: #ffe0a3;
}
/* Ajustes finos de buscador/autocomplete */
.pcsc-suggestions {
    top: calc(100% + 4px);
    border-color: #d7dee8;
    box-shadow: 0 8px 20px rgba(13, 27, 42, 0.11);
    padding: 4px;
}

.pcsc-suggestion-item {
    padding: 9px 10px;
}

.pcsc-suggestion-name {
    display: block;
    min-width: 0;
    color: var(--text-dark);
    font-size: 13.5px;
    line-height: 1.25;
}

.pcsc-suggestion-name strong {
    font-weight: 800;
}

.pcsc-suggestion-name em {
    font-style: normal;
    font-weight: 500;
}

.pcsc-suggestion-item:hover,
.pcsc-suggestion-item.active {
    background: #f5f7fa;
    color: var(--text-dark);
}

[data-theme="dark"] .search-bar:focus-within {
    border-color: #e8b84b !important;
    box-shadow: none !important;
}

[data-theme="dark"] .pcsc-suggestion-name {
    color: #edf4ff;
}

[data-theme="dark"] .pcsc-suggestion-item:hover,
[data-theme="dark"] .pcsc-suggestion-item.active {
    background: #17283d;
    color: #edf4ff;
}
.search-bar input:focus,
.search-bar input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
/* Unified field focus */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus,
.select-search-input:focus,
.student-search input:focus,
input[data-student-input]:focus {
    border-color: var(--gold) !important;
    outline: none !important;
    box-shadow: none !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none !important;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .modal input:focus,
[data-theme="dark"] .modal select:focus,
[data-theme="dark"] .modal textarea:focus,
[data-theme="dark"] .select-search-input:focus,
[data-theme="dark"] .student-search input:focus,
[data-theme="dark"] input[data-student-input]:focus {
    border-color: #e8b84b !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================================
   EXPERIENCIA PROFESIONAL UNIFICADA
   ============================================================ */
.page-content {
    padding: clamp(18px, 2.25vw, 32px);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-header > div:first-child,
.page-header > section:first-child {
    min-width: 0;
}

.page-header h1 {
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.page-header p {
    max-width: 760px;
    line-height: 1.55;
}

.table-container,
.form-card,
.panel-card {
    border-color: rgba(13, 27, 42, 0.09);
    border-radius: 15px;
    box-shadow: 0 12px 34px rgba(13, 27, 42, 0.065);
}

.table-container + .table-container,
.form-card + .form-card {
    margin-top: 18px;
}

.table-header {
    min-height: 64px;
    padding: 16px 20px;
    gap: 14px;
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
}

.table-header h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    line-height: 1.35;
}

.table-header h2 i { color: var(--gold); }

.pcsc-table-shell {
    position: relative;
    isolation: isolate;
}

.pcsc-table-shell table {
    border-spacing: 0;
}

.pcsc-table-shell thead th {
    padding: 13px 16px;
    font-size: 10.5px;
    letter-spacing: .065em;
}

.pcsc-table-shell tbody td {
    padding: 15px 16px;
    line-height: 1.45;
}

.pcsc-table-shell tbody tr {
    background: #fff;
}

.pcsc-table-shell tbody tr:nth-child(even) {
    background: #fafbfd;
}

.pcsc-table-shell tbody tr:hover {
    background: #fff8e8;
}

.pcsc-table-shell tbody tr:focus-within {
    background: #fff8e8;
    box-shadow: inset 3px 0 0 var(--gold);
}

.pcsc-table-actions-cell .btn,
.pcsc-table-actions-cell button {
    min-height: 34px;
}

.filters-form,
.compact-filter-panel,
.inline-filter-grid {
    background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
    border: 1px solid rgba(13,27,42,.075);
    border-radius: 13px;
    padding: 16px;
}

.table-container > .filters-form {
    margin: 16px;
    padding: 16px;
}

.form-card-header {
    min-height: 60px;
    padding: 16px 22px;
    background: linear-gradient(135deg, #0d1b2a 0%, #162b43 100%);
}

.form-body {
    padding: clamp(20px, 2.4vw, 30px);
}

.form-section:not(:last-child) {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(13,27,42,.075);
}

.form-group label {
    line-height: 1.35;
}

.form-group input,
.form-group select,
.form-group textarea,
.select-search-input {
    min-height: 43px;
    border-radius: 9px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.form-group textarea { min-height: 104px; }

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover,
.select-search-input:hover {
    border-color: #aebbd0;
}

.modal {
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 28px 80px rgba(4, 13, 24, .3);
}

.modal-header { min-height: 60px; }

[data-theme="dark"] .table-header,
[data-theme="dark"] .filters-form,
[data-theme="dark"] .compact-filter-panel,
[data-theme="dark"] .inline-filter-grid {
    background: #101d2d;
    border-color: #2a3c52;
}

[data-theme="dark"] .pcsc-table-shell tbody tr { background: #0f1b2b; }
[data-theme="dark"] .pcsc-table-shell tbody tr:nth-child(even) { background: #122033; }
[data-theme="dark"] .pcsc-table-shell tbody tr:hover,
[data-theme="dark"] .pcsc-table-shell tbody tr:focus-within { background: #203049 !important; }

@media (max-width: 680px) {
    .page-content { padding: 14px; }
    .page-header { align-items: flex-start; margin-bottom: 18px; }
    .page-header h1 { font-size: 22px; }
    .page-header .btn, .page-header > form { width: 100%; }
    .page-header > form .btn { width: 100%; }

    .table-container,
    .form-card,
    .panel-card { border-radius: 13px; }

    .table-header { min-height: 58px; padding: 14px 15px; }
    .table-header .table-actions { width: 100%; }
    .table-header .table-actions .btn { flex: 1 1 auto; }

    .pcsc-table-shell {
        overflow: visible;
        padding: 10px;
        background: #eef2f7;
    }

    .pcsc-responsive-table,
    .pcsc-responsive-table tbody,
    .pcsc-responsive-table tr { display: block; width: 100%; min-width: 0 !important; }

    .pcsc-responsive-table thead { display: none; }

    .pcsc-responsive-table tbody tr {
        margin: 0 0 11px;
        border: 1px solid rgba(13,27,42,.1);
        border-radius: 12px;
        background: #fff !important;
        box-shadow: 0 5px 16px rgba(13,27,42,.055);
        overflow: hidden;
    }

    .pcsc-responsive-table tbody tr:last-child { margin-bottom: 0; }

    .pcsc-responsive-table tbody td[data-label] {
        display: grid;
        grid-template-columns: minmax(96px, 38%) minmax(0, 62%);
        align-items: center;
        gap: 12px;
        width: 100% !important;
        min-width: 0 !important;
        padding: 11px 12px;
        border: 0;
        border-bottom: 1px solid #edf0f4;
        text-align: right;
        white-space: normal !important;
    }

    .pcsc-responsive-table tbody td[data-label]::before {
        content: attr(data-label);
        color: #66758a;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .055em;
        line-height: 1.3;
        text-align: left;
        text-transform: uppercase;
    }

    .pcsc-responsive-table tbody td[data-label] > * { margin-left: auto; max-width: 100%; }
    .pcsc-responsive-table tbody td[data-label]:last-child { border-bottom: 0; }
    .pcsc-responsive-table .pcsc-table-actions-cell { background: #f8fafc; }
    .pcsc-responsive-table .pcsc-table-actions-cell form,
    .pcsc-responsive-table .pcsc-table-actions-cell .action-btns,
    .pcsc-responsive-table .pcsc-table-actions-cell > div { justify-content: flex-end; flex-wrap: wrap; }
    .pcsc-responsive-table .pcsc-table-empty-cell { display: block; padding: 22px 14px; text-align: center; }

    .filters-form,
    .compact-filter-panel,
    .inline-filter-grid,
    .table-container > .filters-form {
        margin: 10px;
        padding: 13px;
        border-radius: 11px;
    }

    .form-body { padding: 18px 15px; }
    .form-grid { gap: 14px; }
    .form-group input,
    .form-group select,
    .select-search-input { min-height: 45px; font-size: 16px; }
    .form-group textarea { font-size: 16px; }
    .modal-footer .btn { flex: 1 1 100%; }

    [data-theme="dark"] .pcsc-table-shell { background: #0b1624; }
    [data-theme="dark"] .pcsc-responsive-table tbody tr { background: #122033 !important; border-color: #30435a; }
    [data-theme="dark"] .pcsc-responsive-table tbody td[data-label] { border-bottom-color: #26394f; }
    [data-theme="dark"] .pcsc-responsive-table tbody td[data-label]::before { color: #aebed1; }
    [data-theme="dark"] .pcsc-responsive-table .pcsc-table-actions-cell { background: #101d2d; }
}

@media print {
    .pcsc-responsive-table { display: table !important; }
    .pcsc-responsive-table thead { display: table-header-group !important; }
    .pcsc-responsive-table tbody { display: table-row-group !important; }
    .pcsc-responsive-table tr { display: table-row !important; }
    .pcsc-responsive-table td { display: table-cell !important; }
    .pcsc-responsive-table td::before { display: none !important; }
}