/* Base Variables & Reset */
:root {
  /* ---------- Brand Violet scale (primary: violet-600) ---------- */
  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;  /* ★ PRIMARY — buttons, CTA, active states */
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;

  /* Legacy brand-* aliases — existing rules keep working, one notch brighter */
  --brand-50:  var(--violet-50);   /* secondary backgrounds, soft cards */
  --brand-100: var(--violet-200);  /* badges, soft chips                */
  --brand-200: var(--violet-300);  /* borders on brand surfaces         */
  --brand-300: var(--violet-400);  /* secondary accents, focus rings    */
  --brand-400: var(--violet-500);  /* hover state of primary            */
  --brand-500: var(--violet-600);  /* primary                           */
  --brand-600: var(--violet-700);  /* active / pressed                  */
  --brand-700: var(--violet-800);  /* dark accents                      */
  --brand-800: var(--violet-800);  /* deep surfaces                     */
  --brand-900: var(--violet-900);  /* deepest brand surfaces            */

  /* ---------- Surfaces ------------------------------------ */
  --app-bg:  #FAF8FF;     /* lavender-tinted app background, not cool gray */
  --card:    #FFFFFF;
  --sidebar: #2E1065;     /* deep rich violet — same on all three dashboards */

  /* ---------- Text ----------------------------------------- */
  --ink:   #1E1B2E;
  --muted: #6B7280;

  /* ---------- Neutrals (lavender undertone) ---------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  var(--app-bg);
  --neutral-100: #EFECF9;
  --neutral-300: #CBC5DD;
  --neutral-500: var(--muted);
  --neutral-700: #4B4563;
  --neutral-900: var(--ink);

  /* ---------- Achievement Amber (XP, level pills, streaks, highlights ONLY —
     buttons stay violet) ------------------------------------ */
  --amber:       #F59E0B;
  --amber-light: #FDE68A;
  --amber-bg:    #FFFBEB;
  /* legacy gold aliases */
  --gold-100: var(--amber-light);
  --gold-500: var(--amber);
  --gold-600: #D97706;    /* darker amber for borders/icons needing depth */

  /* ---------- Hero gradient (banners on all dashboards) ---- */
  --hero-gradient: linear-gradient(135deg, #6D28D9 0%, #9333EA 55%, #C026D3 100%);

  /* ---------- Semantic ------------------------------------ */
  --color-primary:        var(--violet-600);
  --color-primary-hover:  var(--violet-500);
  --color-primary-active: var(--violet-700);
  --color-bg:             var(--app-bg);
  --color-bg-soft:        var(--violet-50); /* explanatory sections, soft cards */
  --color-bg-warm:        var(--amber-bg);  /* warm highlighted sections        */
  --color-surface:        var(--card);
  --color-surface-dark:   var(--sidebar);   /* sidebar / footer w/ white logo   */
  --color-text:           var(--ink);
  --color-heading:        var(--ink);
  --color-text-muted:     var(--muted);
  --color-text-on-brand:  #FFFFFF;
  --color-focus-ring:     var(--violet-400);
  --color-accent-gold:    var(--amber);     /* achievement highlights */
  --color-badge-gold:     var(--gold-600);  /* badges, certifications */

  --color-success: #10B981;  /* the one emerald, everywhere */
  --color-warning: #F59E0B;
  --color-error:   #DC2626;
 
  /* ---------- Typography (placeholder — see note) ---------- */
  --font-heading: "Poppins", system-ui, sans-serif;   /* TO CONFIRM */
  --font-body:    "Inter",   system-ui, sans-serif;   /* TO CONFIRM */
 
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;   /* hero headline */
 
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
 
  --leading-tight:  1.2;   /* headings */
  --leading-normal: 1.6;   /* body     */

  /* ---------- Legacy / Compatibility Mappings ---------- */
  --navy: var(--brand-500);
  --navy-light: var(--brand-600);
  --teal: var(--brand-500);
  --teal-hover: var(--brand-400);
  --cream: var(--neutral-100);
  --light-blue: var(--brand-100);
  --bg-color: var(--neutral-50);
  --text-main: var(--neutral-900);
  --text-muted: var(--neutral-500);
  --white: var(--neutral-0);
  --danger: var(--color-error);
  --success: var(--color-success);
  --border-color: var(--brand-200);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  --radius-md: 8px;
  --radius-lg: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: hidden;
}

/* Perf/CLS (2026-06): reserve a fixed 1em box for icon-font glyphs. With the icon font
   on display=block, the wide fallback ligature text (e.g. "calendar_month") sizes the
   inline-block box until the font loads, then collapses to a ~1em glyph — causing a
   layout shift. Pinning width:1em keeps the box stable (the glyph is 1em by design).
   box-sizing:content-box is REQUIRED: with the global border-box, width:1em would
   include padding, so padded "chip" icons (e.g. .icon-label, padding:10px) would get a
   negative content width and clip the glyph. content-box makes 1em the glyph box and
   lets padding sit outside. width scales with each context's font-size. */
.material-symbols-outlined {
    box-sizing: content-box;
    width: 1em;
    overflow: hidden;
}

/* App Layout & Login */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.login-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #110729; /* Deep Ink space */
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(124, 58, 237, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.08) 0%, transparent 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow-y: auto;
    padding: 2rem 1.5rem;
}

.login-card {
    background: #FFFFFF; /* Pure White */
    padding: 3.5rem 2.5rem 3.25rem;
    border-radius: 24px;
    width: 100%;
    max-width: 440px;
    box-shadow: 
        0 10px 25px -5px rgba(17, 7, 41, 0.3),
        0 20px 48px -10px rgba(17, 7, 41, 0.4),
        0 1px 3px rgba(17, 7, 41, 0.1);
    border: 1px solid rgba(231, 227, 242, 0.8); /* Line */
    text-align: center;
    position: relative;
}

/* FASE 3: Anti-Distorsión Global de Logos */
/* Protege .brand-logo, .login-logo y cualquier img dentro de contenedores de logo.
   Garantiza que el isotipo del logo siempre mantenga su forma circular original. */
.brand-logo,
.login-logo,
.sidebar-logo-section img,
.login-card picture img,
picture img[alt*="Elevionis"] {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: unset !important; /* No forzar ratio, dejar que PNG mande */
}


/* FASE 1: Contenedor picture del login */
.login-logo-wrap {
    display: block;
    text-align: center;
    margin: 0 auto 28px;
    padding: 0 10px;
}


.login-card h2 {
    color: var(--brand-900); /* Ink */
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    letter-spacing: -0.025em;
}

.login-card p {
    color: #64748b;
    font-size: 0.92rem;
    margin-bottom: 2.25rem;
}

.login-card form {
    text-align: left;
}

.login-card .form-group {
    margin-bottom: 1.35rem;
}

.login-card .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-900); /* Ink */
    opacity: 0.8;
}

.login-card .form-control {
    width: 100%;
    padding: 0.8rem 1.1rem;
    border: 1.5px solid var(--neutral-100); /* Line */
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--brand-900); /* Ink */
    background-color: var(--neutral-50); /* Paper */
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-card .form-control:hover {
    border-color: rgba(124, 58, 237, 0.35);
    background-color: #fcfbfe;
}

.login-card .form-control:focus {
    background-color: #FFFFFF;
    border-color: #7C3AED; /* Violet */
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.login-card .form-control::placeholder {
    color: #a0aec0;
    font-size: 0.9rem;
}

.login-card .btn-primary {
    background-color: #7C3AED; /* Violet */
    color: #FFFFFF !important;
    padding: 0.85rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.98rem;
    border: none;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    margin-top: 0.75rem;
    width: 100%;
}

.login-card .btn-primary:hover {
    background-color: #3f12b0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45);
}

.login-card .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}



/* Sidebar — deep rich violet, shared across all three dashboards */
.sidebar {
    width: 260px;
    background-color: var(--sidebar, #2E1065);
    color: var(--white);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    z-index: 10;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-logo {
    max-width: 190px;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 1rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--cream);
}

.sidebar-nav {
    flex: 1;
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--teal) var(--navy);
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: var(--navy);
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: var(--teal);
    border-radius: 10px;
}

.nav-item {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    width: 100%;
    font-weight: 500;
    position: relative;
}

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

.nav-item.active {
    color: var(--white);
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.2) 0%, transparent 100%);
    border-left: 4px solid var(--violet-400, #A78BFA);
}

/* Accordion Nav Styles */
.nav-accordion {
    width: 100%;
}

.nav-accordion-header {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-accordion-header:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.05);
}

.nav-accordion-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-chevron {
    transition: transform 0.3s ease;
}

.nav-accordion.open .nav-chevron {
    transform: rotate(180deg);
}

.nav-accordion.open .nav-accordion-header {
    color: var(--white);
}

.nav-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: rgba(0, 0, 0, 0.15);
    /* Slightly darker to denote nested list */
}

/* Indent nested items slightly */
.nav-accordion-content .nav-item.nested {
    padding-left: 3.5rem;
    font-size: 0.9rem;
}


.sidebar-footer {
    padding: 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}


/* Main Content */
.main-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
}

.content-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.75rem;
    height: 56px;
    min-height: 56px;
    background: var(--white);
    border-bottom: 1px solid var(--border, #e2e8f0);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.content-topbar .topbar-icon {
    color: var(--teal);
    font-size: 1.25rem;
}

.topbar-section-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy);
    letter-spacing: 0.01em;
}

.topbar-spacer { flex: 1; }

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-secondary, #64748b);
}

.topbar-user .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--teal);
}

.main-content > section,
.main-content > .content-section,
.main-content > .view-panel {
    padding: 2rem 3rem;
    flex: 1;
}

/* Hamburger button — hidden on desktop, visible on mobile */
.topbar-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--navy);
    padding: 0;
    line-height: 1;
}

/* Sidebar backdrop overlay */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 999;
}
.sidebar-backdrop.visible { display: block; }

@media (max-width: 768px) {
    .content-topbar {
        display: flex;
        padding: 0 1rem;
        height: 52px;
        min-height: 52px;
    }
    .topbar-hamburger { display: flex; align-items: center; }
    .topbar-user { display: none; }          /* save space on mobile */
    .main-content > section,
    .main-content > .content-section,
    .main-content > .view-panel { padding: 1rem; }
}

.content-section {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.content-section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.section-header h1 {
    font-size: 2rem;
    color: var(--navy);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.section-header .subtitle {
    color: var(--text-muted);
    font-size: 1rem;
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Buttons */
.btn {
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
}

.btn-primary {
    background-color: var(--teal);
    color: var(--white);
    box-shadow: 0 4px 6px rgba(167, 139, 250, 0.2);
}

.btn-primary:hover {
    background-color: var(--teal-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(167, 139, 250, 0.3);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--navy);
    color: var(--navy);
}

.btn-outline:hover {
    background-color: rgba(28, 69, 135, 0.05);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.width-full {
    width: 100%;
    justify-content: center;
}

/* Forms & Inputs */
.form-select,
.form-control {
    padding: 0.6rem 1rem;
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--text-main);
    background-color: var(--white);
    outline: none;
    transition: border-color 0.3s;
}

.form-select:focus,
.form-control:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--navy);
}

/* Cards */
.data-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.card-header h2 {
    font-size: 1.25rem;
    color: var(--navy);
}

/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    background: var(--bg-color);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    border: 1px solid #eee;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    padding-left: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-main);
}

.search-box span {
    color: var(--text-muted);
    font-size: 1.2rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s;
    border-left: 4px solid var(--teal);
}

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

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon span {
    font-size: 2rem;
}

.stat-info h3 {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--navy);
}

/* Tables */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.data-table th {
    background-color: #f8fafc;
    color: var(--navy);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-bottom: 2px solid #e2e8f0;
}

.data-table th:first-child {
    border-top-left-radius: var(--radius-md);
}

.data-table th:last-child {
    border-top-right-radius: var(--radius-md);
}

.data-table tbody tr {
    transition: background-color 0.15s;
}

@keyframes highlightRow {
    0%   { background-color: rgba(167, 139, 250, 0.3); }
    100% { background-color: transparent; }
}

.data-table tbody tr:hover {
    background-color: #f8fafc;
}

.data-table tbody tr:hover td:first-child {
    color: var(--navy);
}

.data-table td.text-center {
    text-align: center;
}

/* Student name cell with avatar initials */
.student-name-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.student-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
}

/* Input cells in tables */
.cell-input {
    width: 100%;
    padding: 0.4rem;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    text-align: center;
}

.cell-input:focus,
.cell-input:hover {
    border-color: var(--teal);
    background: var(--white);
    outline: none;
}

.cell-input:not(:placeholder-shown) {
    background: var(--white);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.status-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}

.status-passed {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-failed {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Modals */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.sync-spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid var(--teal);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.modal-backdrop.show {
    opacity: 1;
    pointer-events: all;
}

.modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    /* Flex column with a scrollable body so a tall form never overflows the
       viewport — the header (title) and footer (buttons) stay pinned/visible
       while only the body scrolls. Responsive on desktop and mobile. */
    max-height: min(90vh, 100% - 32px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateY(-20px);
    transition: transform 0.3s;
}

.modal-backdrop.show .modal {
    transform: translateY(0);
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h2 {
    font-size: 1.25rem;
    color: var(--navy);
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}

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

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;        /* the only scrolling region when the form is tall */
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}

.modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Report View Layout */
.report-config-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.report-selector-panel {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
}

.report-preview-panel {
    flex: 1;
}

.report-card-visual {
    background: white;
    box-shadow: var(--shadow-md);
    padding: 2rem;
    border-radius: var(--radius-md);
    min-height: 600px;
    display: flex;
    justify-content: center;
    border: 1px solid #eee;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-align: center;
    margin: auto;
}

.empty-state span {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Grades Legend */
.grades-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--navy);
}

.legend-item {
    background: var(--cream);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

/* Report Card Print Styles - Enhanced Aesthetic */
.official-report-card {
    width: 100%;
    max-width: 850px;
    background: #fff;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    position: relative;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding-bottom: 2rem;
    border-radius: 12px;
    overflow: hidden;
}

.official-report-card::after {
    /* Watermark */
    content: "ELEVIONIS";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 7.5rem;
    color: rgba(30, 41, 59, 0.02);
    font-weight: 800;
    letter-spacing: 0.8rem;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
}

.rc-header {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    color: white;
    padding: 2rem;
    gap: 2rem;
    border-bottom: 4px solid #d97706;
    position: relative;
    z-index: 1;
}

.rc-logo {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    padding: 6px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    object-fit: contain;
}

.rc-title h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.rc-title h3 {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #fbbf24;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.rc-student-info {
    display: flex;
    align-items: center;
    padding: 2.5rem 2rem;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
}

.rc-badge img {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
}

.rc-info h2 {
    color: #64748b;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.rc-info h1 {
    margin: 4px 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 6px;
    text-transform: uppercase;
}

.rc-info p {
    color: #64748b;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
}

.rc-scores-table {
    width: calc(100% - 4rem);
    border-collapse: collapse;
    margin: 0 2rem 2.5rem 2rem;
    position: relative;
    z-index: 1;
}

.rc-scores-table th {
    background: #312e81;
    color: white;
    text-align: left;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rc-scores-table td {
    padding: 14px 24px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 15px;
    color: #334155;
}

.rc-scores-table td.score-val {
    color: #1e3a8a;
    font-weight: 700;
    text-align: right;
    font-size: 16px;
}

.rc-scores-table tr:nth-child(even) td {
    background: rgba(248, 250, 252, 0.8);
}

.rc-final-status {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    background: #f8fafc;
    border-left: 4px solid #312e81;
    margin: 0 2rem 2.5rem 2rem;
    align-items: center;
    position: relative;
    z-index: 1;
    border-radius: 0 8px 8px 0;
}

.rc-final-status h3 {
    margin: 0;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rc-status-val {
    font-size: 20px;
    font-weight: 700;
}

.rc-status-val.passed {
    color: #16a34a;
}

.rc-status-val.failed {
    color: #dc2626;
}

.rc-comments {
    margin: 0 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.rc-comments-title {
    padding: 10px 16px;
    font-size: 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rc-comments-body {
    padding: 16px;
    min-height: 90px;
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
    font-style: italic;
}

.rc-footer {
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 500;
    border-top: 1px solid #e2e8f0;
    background: #1e1b4b;
    color: white;
    display: flex;
    justify-content: space-between;
}

/* Attendance Visual Indicators */
.att-cell-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.att-status-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.att-status-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
}

.att-status-btn.present {
    border-color: var(--success);
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--success);
}

.att-status-btn.late {
    border-color: #ffc107;
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.att-status-btn.absent {
    border-color: var(--danger);
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--danger);
}

/* Justificada (avisó ≥24h) — no consume la hora del plan. */
.att-status-btn.justified {
    border-color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.att-note-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    opacity: 0.5;
}

.att-note-btn:hover {
    color: var(--teal);
    transform: scale(1.1);
    opacity: 1;
}

.att-note-btn.has-note {
    color: #ff9800;
    /* Distinct color to show it has content */
    opacity: 1;
}

/* ====================================================
   Class Schedule – Two-Panel Layout
   Left:  .sched-time-col  (fixed, never scrolls)
   Right: .sched-days-area (scrolls horizontally)
   Heights sync via CSS variables so rows always align.
   ==================================================== */

:root {
    --sched-header-h: 44px;
    --sched-cell-h: 60px;
    --sched-time-w: 72px;
}

#class-schedule-grid {
    width: 100%;
}

/* Outer flex row, clip overflow here */
.sched-wrapper {
    display: flex;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #e0e0e0;
    gap: 2px;
}

/* ── Left: fixed time column ── */
.sched-time-col {
    flex-shrink: 0;
    width: var(--sched-time-w);
    display: flex;
    flex-direction: column;
    background: #f0f4f8;
    gap: 2px;
}

.sched-time-header {
    height: var(--sched-header-h);
    flex-shrink: 0;
    background: var(--light-blue);
    color: var(--navy);
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #b0c4de;
}

.sched-time-cell {
    height: var(--sched-cell-h);
    flex-shrink: 0;
    background: #f8f9fa;
    color: var(--navy);
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 4px;
    border-right: 2px solid #dde;
}

/* ── Right: scrollable days panel ── */
.sched-days-area {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--teal) #eee;
}

.sched-days-area::-webkit-scrollbar {
    height: 5px;
}

.sched-days-area::-webkit-scrollbar-thumb {
    background: var(--teal);
    border-radius: 10px;
}

.sched-days-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    min-width: calc(6 * 110px);
    gap: 2px;
}

.sched-day-header {
    height: var(--sched-header-h);
    background: var(--light-blue);
    color: var(--navy);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

.sched-day-cell {
    height: var(--sched-cell-h);
    background: var(--white);
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Scroll instead of clipping so stacked events (e.g. multiple 1:1 bookings on
       the same weekday) stay reachable; fixed height keeps the time column aligned. */
    overflow-y: auto;
    overflow-x: hidden;
}


/* ── Schedule Events (shared styles) ── */
.schedule-event {
    background: var(--teal);
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.schedule-event:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.schedule-event.status-scheduled {
    background: var(--teal);
}

.schedule-event.status-completed {
    background: var(--success);
}

.schedule-event.status-cancelled {
    background: var(--danger);
    text-decoration: line-through;
    opacity: 0.7;
}

.schedule-event-status-icon {
    font-size: 1rem;
    align-self: flex-end;
}

/* --- Aesthetic Plans Redesign --- */
.plans-management-section {
    font-family: 'Poppins', 'Montserrat', sans-serif;
    /* Si no las tienes, usa sans-serif por defecto */
}

.category-title {
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    letter-spacing: 0.5px;
}

.loading-text {
    color: var(--text-light);
    font-size: 0.9rem;
    font-style: italic;
    grid-column: 1 / -1;
    text-align: center;
}

/* Grid Aesthetic */
.aesthetic-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Plan Card Aesthetic — solid surfaces.
   Previously used backdrop-filter: blur() over a semi-transparent
   background; that combo produced GPU compositing artifacts (a faint
   lavender "ghost" rectangle bleeding through between sections and an
   uneven tint on hovered cards). Solid, opaque surfaces fix it. */
.aesthetic-plan-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.aesthetic-plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Current Plan Highlighting */
.aesthetic-plan-card.current-plan {
    background: #f5f3ff;
    border-color: var(--violet-500, #8B5CF6);
    border-width: 2px;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.15);
}

.current-plan-badge {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    position: absolute;
    top: -12px;
    right: 20px;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
}

/* Plan Card Content */
.plan-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
}

.plan-category-icon {
    font-size: 1.5rem;
    opacity: 0.1;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--text-dark);
}

.plan-details-text {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 5px 0 15px 0;
    line-height: 1.4;
    flex-grow: 1;
}

.plan-price-block {
    margin-top: auto;
    border-top: 1px solid #e2e8f0;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.plan-price-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-teal);
}

.plan-duration {
    font-size: 0.8rem;
    color: var(--text-light);
}

.category-subtitle {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-light);
}

/* Hours-included pill on subscription cards */
.plan-hours-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--violet-50, #F5F3FF);
    color: var(--violet-700, #6D28D9);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
    width: fit-content;
}

/* ── One-time products (certification / exams, e.g. OOPT + CENNI) ──
   Wide horizontal card with the achievement-amber treatment so it reads
   as a distinct product, not another monthly subscription. */
.onetime-grid {
    grid-template-columns: 1fr;
}

.aesthetic-plan-card.onetime-plan-card {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--amber-light, #FDE68A);
    background: linear-gradient(135deg, #FFFFFF 65%, var(--amber-bg, #FFFBEB) 100%);
}

.onetime-plan-card:hover {
    border-color: var(--amber, #F59E0B);
    box-shadow: 0 15px 30px rgba(245, 158, 11, 0.12);
}

.onetime-plan-card .onetime-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    flex-shrink: 0;
    background: var(--amber-bg, #FFFBEB);
    border: 1px solid var(--amber-light, #FDE68A);
    color: var(--gold-600, #D97706);
    display: flex;
    align-items: center;
    justify-content: center;
}

.onetime-plan-card .onetime-icon .material-symbols-outlined {
    font-size: 1.7rem;
}

.onetime-plan-card .onetime-body {
    flex: 1;
    min-width: 0;
}

.onetime-badge {
    display: inline-block;
    background: var(--amber-light, #FDE68A);
    color: #92400E;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.onetime-plan-card .plan-price-block.onetime-price-block {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    margin-left: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.onetime-plan-card .plan-price-val {
    color: var(--gold-600, #D97706);
}

@media (max-width: 640px) {
    .aesthetic-plan-card.onetime-plan-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .onetime-plan-card .plan-price-block.onetime-price-block {
        margin-left: 0;
        align-items: flex-start;
        border-top: 1px solid var(--amber-light, #FDE68A);
        padding-top: 12px;
        width: 100%;
    }
}

/* Aesthetic WA Button */
.aesthetic-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366;
    color: white;
    padding: 14px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
    margin-top: 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.aesthetic-wa-btn:hover {
    background: #1ebd57;
    transform: translateX(-50%) translateY(-3px);
    color: white;
}

.aesthetic-wa-btn:active {
    transform: translateX(-50%) translateY(-1px);
}

/* Feedback Timeline Styles */
.feedback-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Custom Scrollbar for the timeline */
.feedback-timeline::-webkit-scrollbar {
    width: 6px;
}

.feedback-timeline::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.feedback-timeline::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.feedback-item {
    position: relative;
    padding: 12px 15px;
    background: #f8fafc;
    border-left: 3px solid var(--primary-teal);
    border-radius: 0 8px 8px 0;
    transition: transform 0.2s, background 0.2s;
}

.feedback-item:hover {
    background: #F5F3FF;
    transform: translateX(3px);
}

.feedback-week-badge {
    display: inline-block;
    background: var(--primary-teal);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.feedback-text {
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.feedback-empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-light);
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
}

/* --- Premium Schedule Cards --- */
.premium-schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.premium-class-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.premium-class-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(124, 58, 237, 0.4);
}

.premium-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.premium-level-badge {
    background: #F5F3FF;
    color: #6D28D9;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

.premium-status-active {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #10b981;
    font-size: 0.8rem;
    font-weight: 600;
}

.premium-status-active::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.premium-card-body {
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: stretch;
}

.premium-time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F5F3FF, #DDD6FE);
    padding: 10px 15px;
    border-radius: 12px;
    min-width: 80px;
    text-align: center;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

.premium-time-day {
    color: var(--teal);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: capitalize;
    margin-bottom: 4px;
}

.premium-time-hours {
    color: var(--teal);
    font-size: 0.8rem;
    font-weight: 600;
}

.premium-details-block {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.premium-course-name {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    color: var(--text-dark);
    font-weight: 700;
}

.premium-teacher-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.premium-teacher-info .material-symbols-outlined {
    font-size: 1.1rem;
    color: #94a3b8;
}

/* Status Widgets */
.status-widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

/* `.bento-card` (student.css, loaded later) forces flex-direction: column.
   Qualify with `.bento-card` so this row layout wins the cascade and the
   icon sits to the LEFT of the label/value instead of stacking centered. */
.bento-card.status-widget {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

.widget-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.widget-icon .material-symbols-outlined {
    font-size: 1.8rem;
}

.hours-icon {
    background: #F5F3FF;
    color: #6D28D9;
}

.payment-icon {
    background: #fce7f3;
    color: #db2777;
}

.widget-label {
    color: var(--text-light);
    font-size: 0.85rem;
    margin: 0 0 4px 0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.widget-value {
    color: var(--text-dark);
    font-size: 1.4rem;
    margin: 0;
    font-weight: 700;
}

/* Fintech Cards */
.fintech-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.fintech-card {
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    color: white;
    overflow: hidden;
}

.fintech-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.bancoppel-card {
    background: linear-gradient(135deg, #1e3a8a, #1e40af);
}

.mercadopago-card {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
}

.paypal-card {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    justify-content: center;
}

.fintech-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.bank-name {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bank-icon {
    font-size: 1.8rem;
    opacity: 0.8;
}

.fintech-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.15);
    padding: 10px 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.data-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    margin-bottom: 3px;
}

.data-value {
    display: block;
    font-size: 1.05rem;
    font-family: monospace;
    font-weight: 500;
    letter-spacing: 1px;
}

/* Modern Copy Button */
.modern-copy-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.modern-copy-btn:hover {
    background: white;
    color: var(--primary-teal);
}

.modern-copy-btn.copied {
    background: #10b981;
    color: white;
}

.paypal-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0079C1;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
    margin-top: 10px;
}

.paypal-action-btn:hover {
    background: #005A93;
}

/* Animaciones para el Mini Navegador */
@keyframes modalZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Removed (perf 2026-06): the ".browser-modal-*" / ".mac-dot*" cluster — a mac-style
   "browser preview" modal that is referenced NOWHERE in any HTML/JS/component (verified
   by full-tree grep). Confident dead old-UI residue. Reversible via git history. */

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        width: 260px;
        transition: transform 0.3s ease;
        z-index: 1001;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
        overflow-y: auto;
        will-change: transform;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Remove flex-grow spacer on mobile so admin items stay in natural order */
    .sidebar-nav > div[style*="flex-grow"] {
        display: none;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 0;
    }

    .section-header {
        padding-left: 0;
        margin-bottom: 1.2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .section-header h1 {
        font-size: 1.5rem;
    }

    .section-header .subtitle {
        font-size: 0.9rem;
    }

    .header-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .login-card {
        padding: 2rem 1.5rem;
    }

    .report-config-layout {
        flex-direction: column;
    }

    .report-selector-panel {
        width: 100%;
        position: static;
    }

    .data-card {
        padding: 1rem;
        margin-bottom: 1.2rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .modal {
        width: 95%;
        max-height: 92vh;          /* body handles scrolling; header/footer stay pinned */
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1.1rem;
    }

    /* On narrow screens the action buttons go full-width and stack so they're
       always tappable below a long, scrollable form. */
    .modal-footer {
        gap: 0.6rem;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
    }

    .data-table th:first-child,
    .data-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 10;
        background-color: var(--white);
    }

    .data-table th:first-child {
        background-color: var(--light-blue);
    }

    /* === Schedule Mobile Overrides === */
    .sched-time-col {
        width: 58px;
    }

    .sched-time-header,
    .sched-time-cell {
        font-size: 0.65rem;
    }

    .sched-day-header {
        font-size: 0.72rem;
        padding: 0 2px;
    }

    .sched-days-grid {
        grid-template-columns: repeat(6, minmax(85px, 1fr));
        min-width: calc(6 * 85px);
    }

    .sched-day-cell {
        padding: 2px 3px;
    }

    .schedule-event {
        font-size: 0.62rem;
        padding: 2px 4px;
    }

    /* Hide teacher name on mobile to save space */
    .schedule-event span:nth-child(3) {
        display: none;
    }

    .schedule-event-status-icon {
        font-size: 0.75rem;
    }

    /* ==========================================================================
        ANALYTICS & PROGRESS STYLES
        ========================================================================== */

    .progress-container {
        width: 100%;
        max-width: 250px;
        background-color: #e2e8f0;
        /* Fondo gris claro */
        border-radius: 10px;
        height: 10px;
        margin-bottom: 6px;
        overflow: hidden;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .progress-bar {
        height: 100%;
        border-radius: 10px;
        /* Animación suave al cargar el porcentaje */
        transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .progress-text {
        font-size: 0.85rem;
        color: #64748b;
        font-weight: 600;
    }
}

/* ==================================================
   OVERRIDES: GOOGLE CUSTOM SEARCH ENGINE (BENTO UI)
   ================================================== */

/* Contenedor Base */
.gsc-control-cse {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.gsc-control-cse form {
    width: 100% !important;
    margin: 0 !important;
}

table.gsc-search-box {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
}

td.gsc-input {
    width: 100% !important;
    padding: 0 !important;
}

/* Caja de Input */
.gsc-input-box {
    border: 1px solid #cbd5e1 !important;
    border-radius: 50px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    height: auto !important;
    padding: 6px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.gsc-input-box:focus-within {
    border-color: var(--teal, #7C3AED) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}

input.gsc-input {
    background: transparent !important;
    font-size: 1.05rem !important;
    color: var(--text-dark, #1e293b) !important;
    padding: 8px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
}

.gsc-input-box table.gsc-input {
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

.gsc-input-box td.gsib_a,
.gsc-input-box td.gsib_b {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Botón de Búsqueda */
.gsc-search-button-v2 {
    background-color: var(--teal, #7C3AED) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 13px 25px !important;
    margin-left: 12px !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.2s !important;
    box-shadow: 0 4px 6px rgba(124, 58, 237, 0.25) !important;
}

.gsc-search-button-v2:hover {
    background-color: var(--teal-hover, #8B5CF6) !important;
    transform: translateY(-2px) !important;
}

.gsc-search-button-v2 svg {
    fill: white !important;
    width: 20px !important;
    height: 20px !important;
}

/* Tarjetas de Resultados (Bento UI) */
.gsc-webResult.gsc-result {
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 20px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.gsc-webResult.gsc-result:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

/* Tipografía de los Resultados */
.gs-title {
    color: var(--teal, #7C3AED) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    letter-spacing: -0.01em !important;
}

.gs-title:hover {
    text-decoration: underline !important;
}

.gs-snippet {
    color: var(--text-light, #475569) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
}

.gsc-url-top {
    color: #10b981 !important;
    /* Verde estético */
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
}

/* Limpieza de Marca Google y ajustes finos */
.gcsc-branding,
.gsc-adBlock {
    display: none !important;
}

.gsc-above-wrapper-area {
    border-bottom: none !important;
    padding: 10px 0 !important;
}

.gsc-result-info {
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    padding-left: 0 !important;
}

.gsc-thumbnail-inside,
.gsc-url-top-padding {
    padding-left: 0 !important;
}

/* ==================================================
   RESPONSIVE FIX: GOOGLE CSE PARA MÓVILES
   ================================================== */

/* Prevención general de desbordamiento de texto */
.gs-title,
.gs-snippet,
.gsc-url-top {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

@media (max-width: 768px) {

    /* 1. Apilar el input de búsqueda y el botón */
    .gsc-control-cse form.gsc-search-box,
    form.gsc-search-box {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    table.gsc-search-box > tbody,
    table.gsc-search-box > tbody > tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    table.gsc-search-box > tbody > tr > td.gsc-input,
    table.gsc-search-box > tbody > tr > td.gsc-search-button {
        display: block !important;
        width: 100% !important;
    }

    .gsc-input-box {
        width: 100% !important;
    }

    .gsc-search-button-v2 {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* 2. Destruir la estructura de tabla de los resultados de Google */
    .gsc-webResult .gsc-result,
    .gsc-table-result,
    .gsc-table-result tbody,
    .gsc-table-result tr,
    td.gsc-table-cell-thumbnail,
    td.gsc-table-cell-snippet {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* 3. Acomodar la miniatura (Thumbnail) arriba del texto */
    td.gsc-table-cell-thumbnail {
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .gsc-thumbnail {
        display: inline-block !important;
        float: none !important;
    }

    /* 4. Separación entre tarjetas en móvil */
    .gsc-webResult.gsc-result {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }
}

/* ── Halo (Botpress v5) — lanzadores propios ─────────────────────────────
   El FAB nativo de Botpress (.bpFabWrapper/.bpFab) se renderiza DENTRO del shadow
   root de <div id="fab-root">, así que este CSS de página NO lo alcanza: la
   supresión real la hace hideNativeFab() inyectando un <style> en ese shadow root
   (ver student.html). Estas reglas quedan sólo como red de seguridad por si una
   futura versión renderizara el FAB en el DOM claro. El único acceso es el
   bottom-nav (móvil) y #halo-fab (desktop); nunca dos botones flotantes. */
.bpFab, .bpFabWrapper { display: none !important; }

/* La ventana del chat, por encima del resto de la UI (desktop). Botpress gestiona su propio
   stacking; sólo garantizamos que quede por encima del contenido (nunca por debajo). */
.bpChatContainer { z-index: 2147483000 !important; }

/* Lanzador flotante propio para desktop (en móvil se oculta vía atributo hidden) */
#halo-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #14b8a6, #7c3aed);
    color: #fff;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
    cursor: pointer;
    z-index: 9990; /* sobre el contenido; por debajo de la ventana del chat (9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#halo-fab[hidden] { display: none !important; }
#halo-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 30px rgba(124, 58, 237, 0.45); }
#halo-fab:active { transform: scale(0.96); }
#halo-fab .material-symbols-outlined { font-size: 30px; line-height: 1; }

/* =========================================
   OPTIMISTIC UI: CLICK-TO-EDIT (Group / Level)
========================================= */
.optimistic-edit-cell {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 6px;
}

.optimistic-value-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.optimistic-edit-icon {
    font-size: 1.1rem !important;
    color: var(--teal);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(-5px);
}

.optimistic-edit-cell:hover {
    background-color: rgba(167, 139, 250, 0.08);
}

.optimistic-edit-cell:hover .optimistic-edit-icon {
    opacity: 1;
    transform: translateX(0);
}

.optimistic-dropdown-container {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 1px solid #e2e8f0;
    z-index: 1000;
    display: none;
    animation: dropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dropIn {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

.optimistic-dropdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
}

.optimistic-dropdown-list li {
    padding: 10px 15px;
    font-size: 0.9rem;
    color: var(--navy);
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.optimistic-dropdown-list li:last-child {
    border-bottom: none;
}

.optimistic-dropdown-list li:hover {
    background: var(--cream);
    color: var(--teal);
    font-weight: 500;
}

/* Spinner temporal UI Optimista */
.optimistic-syncing {
    opacity: 0.6;
    pointer-events: none;
}
.optimistic-syncing .optimistic-edit-icon {
    opacity: 1 !important;
    animation: spin 1s linear infinite;
    transform: translateX(0);
}

/* =========================================
   STUDENT PORTAL: CLASS DETAILS MODAL
========================================= */
.class-details-modal {
    max-width: 420px;
    padding: 1.5rem;
    border-radius: 16px;
}

.class-info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
}

.class-info-item:last-child {
    margin-bottom: 0;
}

.class-info-item .icon-label {
    background: rgba(167, 139, 250, 0.15);
    color: var(--teal);
    padding: 10px;
    border-radius: 8px;
    font-size: 1.2rem;
}

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

.class-info-item .info-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.class-info-item .info-value {
    font-size: 1.05rem;
    color: var(--navy);
    font-weight: 600;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════
   KPI GRID — Dashboard 6-card layout
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   KPI CARDS — Premium redesign
═══════════════════════════════════════════════════ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.kpi-card {
    background: var(--white);
    border-radius: 14px;
    padding: 1.1rem 1.25rem 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: default;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 12px 24px rgba(0,0,0,0.07);
}

.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon span { font-size: 1.4rem; }

.kpi-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 3px 0;
}

.kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
    line-height: 1;
    transition: color 0.3s;
}

/* Accent bar + icon colors */
.kpi-teal::before   { background: var(--teal); }
.kpi-teal .kpi-icon { background: rgba(167,139,250,0.1); color: var(--teal); }

.kpi-navy::before   { background: var(--navy); }
.kpi-navy .kpi-icon { background: rgba(28,69,135,0.08); color: var(--navy); }

.kpi-warning::before { background: #f59e0b; }
.kpi-warning .kpi-icon { background: rgba(245,158,11,0.1); color: #f59e0b; }
.kpi-warning .kpi-value { color: #b45309; }

.kpi-danger::before  { background: #ef4444; }
.kpi-danger .kpi-icon  { background: rgba(239,68,68,0.1); color: #ef4444; }
.kpi-danger .kpi-value { color: #dc2626; }

.kpi-success::before { background: #10b981; }
.kpi-success .kpi-icon { background: rgba(16,185,129,0.1); color: #10b981; }
.kpi-success .kpi-value { color: #059669; }

.kpi-info::before    { background: #6366f1; }
.kpi-info .kpi-icon    { background: rgba(99,102,241,0.1); color: #6366f1; }

/* KPI animated counter flash */
@keyframes kpi-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.kpi-value.kpi-updated {
    animation: kpi-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (max-width: 900px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .kpi-value { font-size: 1.6rem; }
}

@media (max-width: 360px) {
    .kpi-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   SKELETON LOADER
═══════════════════════════════════════════════════ */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.skeleton {
    background: #e2e8f0;
    border-radius: 6px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    display: inline-block;
}

.skeleton-kpi {
    height: 1.9rem;
    width: 60%;
    border-radius: 8px;
}

.skeleton-row td {
    padding: 1rem;
}

.skeleton-row td > span {
    display: block;
    height: 0.9rem;
    border-radius: 6px;
    background: #e2e8f0;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════
   ANALYTICS CHARTS
═══════════════════════════════════════════════════ */
.chart-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 900px) {
    .chart-row { grid-template-columns: 1fr; }
}

.chart-container {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0,0,0,0.05);
}

.chart-container h3 {
    font-size: 0.95rem;
    color: var(--navy);
    margin: 0 0 1.25rem 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-container canvas {
    max-height: 260px;
}

/* ═══════════════════════════════════════════════════
   EARLY WARNING — Redesign (collapsible)
═══════════════════════════════════════════════════ */
.ew-banner {
    border-left: 4px solid #f59e0b;
    margin-top: 1.25rem;
}

.ew-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding-bottom: 0;
    border-bottom: none;
    user-select: none;
}

.ew-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d97706;
    font-size: 1rem;
    font-weight: 600;
}

.ew-count-badge {
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: #ef4444;
    color: white;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ew-count-badge.ew-ok {
    background: #10b981;
}

.ew-chevron {
    color: #94a3b8;
    transition: transform 0.3s ease;
    font-size: 1.2rem !important;
}

.ew-card.ew-open .ew-chevron {
    transform: rotate(180deg);
}

.ew-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding-top 0.3s ease;
}

.ew-card.ew-open .ew-body {
    max-height: 800px;
    padding-top: 1rem;
}

/* ═══════════════════════════════════════════════════
   PLATFORM HEALTH (moved to Admin)
═══════════════════════════════════════════════════ */
.health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    padding: 0.75rem 0 0.25rem;
}

.health-mini-card {
    background: #f0fdf4;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

.health-mini-card .hm-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
    display: block;
}

.health-mini-card .hm-label {
    margin: 0;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 500;
}

.health-mini-card .hm-value {
    margin: 4px 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

/* ═══════════════════════════════════════════════════
   ROTATING ICON ANIMATION
═══════════════════════════════════════════════════ */
@keyframes rotating {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.rotating {
    animation: rotating 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════
   UTILITY CLASSES — replace common inline styles
═══════════════════════════════════════════════════ */
.admin-only      { display: none; }
body:not(.is-admin) .admin-only {
    display: none !important;
}
/* CLS (2026-06): when the body is flagged is-admin pre-paint (see the inline script at
   the top of <body>), reveal admin-only elements from the first paint so the KPI grid /
   nav don't grow after role resolves. Matches app.js's runtime display:flex (idempotent). */
body.is-admin .admin-only {
    display: flex;
}
body:not(.is-admin) .btn-edit-student,
body:not(.is-admin) .btn-delete-student,
body:not(.is-admin) #btn-add-class-schedule,
body:not(.is-admin) #btn-add-student {
    display: none !important;
}
body:not(.is-admin) .optimistic-edit-cell {
    pointer-events: none !important;
    cursor: default !important;
}
body:not(.is-admin) .optimistic-edit-icon {
    display: none !important;
}
.d-flex          { display: flex; }
.flex-center     { display: flex; align-items: center; }
.flex-between    { display: flex; align-items: center; justify-content: space-between; }
.gap-4           { gap: 4px; }
.gap-6           { gap: 6px; }
.gap-8           { gap: 8px; }
.gap-10          { gap: 10px; }
.gap-12          { gap: 12px; }
.gap-15          { gap: 15px; }
.flex-wrap       { flex-wrap: wrap; }
.fw-500          { font-weight: 500; }
.fw-600          { font-weight: 600; }
.fs-xs           { font-size: 0.8rem; }
.fs-sm           { font-size: 0.85rem; }
.fs-md           { font-size: 0.95rem; }
.text-muted-light { color: var(--text-muted); }
.text-navy       { color: var(--navy); }
.text-teal       { color: var(--teal); }
.mb-0  { margin-bottom: 0; }
.mb-5  { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.p-0   { padding: 0; }
.btn-xs { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.w-full { width: 100%; }

/* ═══════════════════════════════════════════════════
   VIEW PANEL — SPA section show/hide + fade-in
═══════════════════════════════════════════════════ */
/* display: none/block is set via inline style in switchView(); this class adds the fade-in */
.view-panel.panel-visible {
    animation: panelFadeIn 0.18s ease both;
}
@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   TEACHER / ADMIN DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
    --teacher-primary: #7C3AED;
    --teacher-accent:  #D97706;
    --teacher-surface: #FAF8FF;
    --teacher-alert:   #F97316;
    --teacher-success: #10B981;
    --teacher-risk:    #F59E0B;
}

/* ═══════════════════════════════════════════════════
   MOBILE BOTTOM NAV — Teacher/Admin
═══════════════════════════════════════════════════ */
.teacher-bottom-nav {
    display: none; /* shown via media query */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Perf (2026-06): dropped backdrop-filter: blur(16px). This nav is position:fixed
       over scrolling content, so the blur recomputed every scroll frame = jank on
       low-spec phones. The background is near-opaque, so a solid 0.97 white is visually
       ~identical without the per-frame GPU cost. Reversible: restore the two
       backdrop-filter lines + 0.92 to bring the frosted look back. */
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    align-items: stretch;
    justify-content: space-around;
}

.teacher-nav-tab {
    flex: 1;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    transition: color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.teacher-nav-tab .material-symbols-outlined {
    font-size: 1.45rem;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.teacher-nav-tab:active .material-symbols-outlined {
    transform: scale(0.88);
}

.teacher-nav-tab.active {
    color: var(--teacher-accent);
}

.teacher-nav-tab.active .material-symbols-outlined {
    transform: scale(1.1);
}

.teacher-nav-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--teacher-accent);
    border-radius: 0 0 4px 4px;
}

/* Main content bottom padding when bottom nav is visible */
@media (max-width: 768px) {
    .teacher-bottom-nav {
        display: flex;
    }

    #main-app-container .main-content {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 1rem);
    }

}

/* ═══════════════════════════════════════════════════
   DARK MODE — Teacher / Admin Dashboard
   Toggle: document.documentElement.setAttribute('data-theme','dark')
   Persist: localStorage key 'fus_dark'
═══════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Violet-tinted dark surfaces — matches the light palette's undertone */
    --bg-color:   #16112A;
    --white:      #221B3E;
    --text-main:  #EDEAF7;
    --text-muted: #A29DB8;
    --border-color: #3A2F63;
    --app-bg:     #16112A;
    --card:       #221B3E;
    --ink:        #EDEAF7;
    --muted:      #A29DB8;
    --color-bg-soft: #2A2151;
    --amber-bg:   #2C2310;
    --shadow-sm:  0 2px 4px rgba(0,0,0,0.5);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.6);
    --shadow-lg:  0 10px 24px rgba(0,0,0,0.7);
}

/* Body */
[data-theme="dark"] body {
    color: var(--text-main);
}

/* Top content bar */
[data-theme="dark"] .content-topbar {
    background: #0f1e35;
    border-bottom-color: #3A3153;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
[data-theme="dark"] .topbar-section-name { color: #e2e8f0; }
[data-theme="dark"] .topbar-user { color: #94a3b8; }
[data-theme="dark"] .topbar-hamburger { color: #e2e8f0; }

/* Data tables */
[data-theme="dark"] .data-table th {
    background-color: #0d1e38;
    color: #93c5fd;
    border-bottom-color: #2d4870;
}
[data-theme="dark"] .data-table th,
[data-theme="dark"] .data-table td {
    border-bottom-color: #3A3153;
}
[data-theme="dark"] .data-table tbody tr:hover {
    background-color: #2A2342;
}

/* Inputs & selects */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #0d1e38;
    border-color: #2d4870;
    color: #e2e8f0;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b;
}

/* Section headers & headings */
[data-theme="dark"] .section-header h1,
[data-theme="dark"] .section-header h2,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 {
    color: var(--text-main);
}
[data-theme="dark"] .subtitle {
    color: var(--text-muted);
}

/* KPI cards — kpi-value colors stay semantic, card surface flips */
[data-theme="dark"] .kpi-card {
    border: 1px solid #2d4870;
}
[data-theme="dark"] .kpi-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.4);
}

/* Early warning chips */
[data-theme="dark"] .ew-chip {
    background: #1a2d4a;
    border-color: #2d4870;
}

/* Mobile bottom nav dark */
[data-theme="dark"] .teacher-bottom-nav {
    background: rgba(15, 23, 42, 0.94);
    border-top-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .teacher-nav-tab {
    color: #64748b;
}
[data-theme="dark"] .teacher-nav-tab.active {
    color: var(--teal);
}

/* Modal overlay */
[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.8);
}
[data-theme="dark"] .modal {
    border: 1px solid #2d4870;
}
[data-theme="dark"] .modal h3 {
    color: var(--text-main);
}
[data-theme="dark"] .modal label {
    color: var(--text-muted);
}

/* Cards and data-cards */
[data-theme="dark"] .data-card,
[data-theme="dark"] .stat-card {
    border: 1px solid #2d4870;
}

/* Stat numbers inside cards */
[data-theme="dark"] .stat-value,
[data-theme="dark"] .stat-number {
    color: var(--text-main);
}

/* Top nav / header bar if present */
[data-theme="dark"] .top-bar {
    background: #1a2d4a;
    border-bottom-color: #3A3153;
}

/* Dark mode toggle button in sidebar */
.btn-dark-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.65);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    width: 100%;
    margin-bottom: 8px;
    transition: background 0.2s, color 0.2s;
    font-family: 'Poppins', sans-serif;
}
.btn-dark-toggle:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.btn-dark-toggle .material-symbols-outlined {
    font-size: 1.1rem;
}

/* Chart containers */
[data-theme="dark"] .chart-container {
    background: #1a2d4a;
    border: 1px solid #2d4870;
}

/* Schedule cards */
[data-theme="dark"] .premium-class-card {
    background: #1a2d4a;
    border-color: #2d4870;
}
[data-theme="dark"] .premium-card-header {
    background: #0d1e38;
    border-bottom-color: #3A3153;
    color: var(--text-main);
}
[data-theme="dark"] .premium-time-block {
    background: linear-gradient(135deg, #0d2a40, #0d3830);
    border-color: rgba(167, 139, 250, 0.3);
}
[data-theme="dark"] .premium-time-day {
    color: var(--teal);
}
[data-theme="dark"] .premium-time-hours {
    color: #5eead4;
}
[data-theme="dark"] .premium-level-badge {
    background: #0c2a4a;
    color: #7dd3fc;
}
[data-theme="dark"] .premium-course-name {
    color: var(--text-main);
}
[data-theme="dark"] .premium-teacher-info {
    color: var(--text-muted);
}
[data-theme="dark"] .premium-teacher-info .material-symbols-outlined {
    color: #64748b;
}

/* Custom dark mode fixes for table text readability, inline style overrides, and schedule grid contrast */
[data-theme="dark"] {
    --navy: #C4B5FD; /* Override navy variable in dark mode to sky blue */
}

/* Sidebar Dark Mode Override: override background color and white text variables locally */
[data-theme="dark"] .sidebar {
    background-color: #0f1e33 !important;
    --white: #ffffff !important;
}

/* Platform Health cards overrides */
[data-theme="dark"] .health-mini-card {
    background: #221B3E !important;
    border-color: #2d4870 !important;
}
[data-theme="dark"] .health-mini-card .hm-value {
    color: #f8fafc !important;
}
[data-theme="dark"] .health-mini-card .hm-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .health-mini-card .hm-label[style*="color:#f43f5e"],
[data-theme="dark"] .health-mini-card .hm-label[style*="color: #f43f5e"] {
    color: #fb7185 !important;
}
[data-theme="dark"] .data-card h2[style*="color: #047857"],
[data-theme="dark"] .data-card h2[style*="color:#047857"] {
    color: #34d399 !important;
}
[data-theme="dark"] #btn-refresh-health {
    color: #34d399 !important;
    border-color: #34d399 !important;
}

/* Status / Role badges overrides in dark mode */
[data-theme="dark"] .status-badge[style*="background:var(--navy)"],
[data-theme="dark"] .status-badge[style*="background: var(--navy)"] {
    background: #1e3a8a !important;
    color: #bfdbfe !important;
}
[data-theme="dark"] .status-badge[style*="background:#f1f5f9"],
[data-theme="dark"] .status-badge[style*="background: #f1f5f9"] {
    background: #3A3153 !important;
    color: #cbd5e1 !important;
}

/* Student Tabs styling (Roster page) */
.student-tabs {
    display: flex;
    gap: 5px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 8px;
}

.btn-tab {
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    background: transparent;
    color: #64748b;
    transition: background-color 0.2s, color 0.2s;
}

.btn-tab.active {
    background: white;
    color: var(--navy);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Early Warning Subtitle style */
.ew-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.ew-subtitle.status-ok {
    color: var(--success, #28a745) !important;
}
.ew-subtitle.status-warning {
    color: var(--danger, #dc3545) !important;
}

/* Dark mode overrides for Student Tabs, Early Warning and search box */
[data-theme="dark"] .student-tabs {
    background: #0d1e38 !important;
    border: 1px solid #2d4870 !important;
}

[data-theme="dark"] .btn-tab {
    color: #94a3b8 !important;
}

[data-theme="dark"] .btn-tab.active {
    background: #221B3E !important;
    color: #A78BFA !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .ew-subtitle.status-ok {
    color: #34d399 !important;
}

[data-theme="dark"] .ew-subtitle.status-warning {
    color: #f87171 !important;
}

[data-theme="dark"] .ew-title-group {
    color: #fbbf24 !important;
}

[data-theme="dark"] .ew-card.ew-open .ew-body {
    border-top-color: #2d4870 !important;
}

[data-theme="dark"] .search-box {
    border-color: #2d4870 !important;
    background-color: #0d1e38 !important;
}

[data-theme="dark"] .search-box input {
    color: var(--text-main) !important;
}

/* Login logo dark theme swap */
[data-theme="dark"] .login-logo-wrap source {
    display: none !important;
}
[data-theme="dark"] .login-logo {
    content: url('../../img/svg/elevionis-horizontal-white.svg') !important;
}

/* Dark Mode Login Overrides */
[data-theme="dark"] .login-wrapper {
    background-color: #070311 !important; /* Very rich deep dark/ink background */
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.25) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(124, 58, 237, 0.2) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 60%) !important;
}

[data-theme="dark"] .login-card {
    background-color: #131b2e !important; /* Premium deep dark navy card */
    border-color: rgba(124, 58, 237, 0.25) !important;
    box-shadow: 
        0 10px 25px -5px rgba(0, 0, 0, 0.5),
        0 20px 48px -10px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .login-card h2 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .login-card p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .login-card .form-group label {
    color: #cbd5e1 !important;
    opacity: 0.95 !important;
}

[data-theme="dark"] .login-card .form-control {
    background-color: #0b0f19 !important; /* Dark slate input background */
    border-color: #223049 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .login-card .form-control:hover {
    border-color: rgba(124, 58, 237, 0.45) !important;
    background-color: #0e1422 !important;
}

[data-theme="dark"] .login-card .form-control:focus {
    background-color: #0b0f19 !important;
    border-color: #7C3AED !important; /* Violet focus */
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.25) !important;
}

[data-theme="dark"] .login-card .form-control::placeholder {
    color: #4b5563 !important;
}

[data-theme="dark"] .login-card .btn-primary {
    background-color: #7C3AED !important; /* Keep Violet in dark mode for premium accent! */
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
}

[data-theme="dark"] .login-card .btn-primary:hover {
    background-color: #4312c4 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.55) !important;
}

[data-theme="dark"] .login-card .btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
}

/* Override hardcoded dark text #555 inside cards and forms in dark mode */
[data-theme="dark"] [style*="color: #555"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555555"],
[data-theme="dark"] [style*="color:#555555"] {
    color: var(--text-muted) !important;
}

/* Force dark card background even if background-color is set inline */
[data-theme="dark"] .data-card[style*="background-color"],
[data-theme="dark"] .data-card[style*="background"] {
    background-color: #221B3E !important;
    background: #221B3E !important;
}

/* Override hardcoded inline colors inside tables or text blocks */
[data-theme="dark"] [style*="color: #001f3f"],
[data-theme="dark"] [style*="color:#001f3f"],
[data-theme="dark"] [style*="color: var(--navy)"],
[data-theme="dark"] [style*="color:var(--navy)"] {
    color: var(--text-main) !important;
}

/* Override hardcoded inline borders */
[data-theme="dark"] [style*="border-color: #001f3f"],
[data-theme="dark"] [style*="border-color:#001f3f"] {
    border-color: #2d4870 !important;
}

/* Ensure data table inputs/selects use dark mode backgrounds & colors */
[data-theme="dark"] .data-table input,
[data-theme="dark"] .data-table select {
    background-color: #0d1e38 !important;
    color: var(--text-main) !important;
    border-color: #2d4870 !important;
}

/* Google Calendar connection button custom dark mode override */
[data-theme="dark"] #btn-connect-gcal {
    background-color: #1a2d4a !important;
    color: #93c5fd !important;
    border-color: #4285F4 !important;
}

/* Attendance status button tweaks */
[data-theme="dark"] .att-status-btn {
    border-color: #475569 !important;
}
[data-theme="dark"] .att-status-btn.late {
    background-color: #f59e0b !important;
    color: #1e293b !important;
    border-color: #f59e0b !important;
}

/* Schedule Grid custom dark mode styles */
[data-theme="dark"] .sched-wrapper {
    background: #16112A !important;
    border-color: #2d4870 !important;
}
[data-theme="dark"] .sched-time-col {
    background: #16112A !important;
}
[data-theme="dark"] .sched-time-header {
    background: #0d1e38 !important;
    color: #93c5fd !important;
    border-right-color: #2d4870 !important;
}
[data-theme="dark"] .sched-time-cell {
    background: #221B3E !important;
    color: #e2e8f0 !important;
    border-right-color: #2d4870 !important;
}
[data-theme="dark"] .sched-day-header {
    background: #0d1e38 !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .sched-day-cell {
    background: #221B3E !important;
}

/* Keep report print area always white */
[data-theme="dark"] .report-card-visual,
[data-theme="dark"] .report-page,
[data-theme="dark"] .rc-table th,
[data-theme="dark"] .rc-table td {
    background: white !important;
    color: #333 !important;
}

/* ───────────────────────────────────────────────────
   Teacher Dashboard (#teacher-dashboard-root) dark mode
   The card surfaces flip via var(--white)/var(--border-color);
   these rules fix the hardcoded light accents built inline.
─────────────────────────────────────────────────── */
/* Class-roster group header (light sky-blue bar -> dark) */
[data-theme="dark"] #teacher-dashboard-root .td-group-header {
    background: #16263f !important;
}
[data-theme="dark"] #teacher-dashboard-root .td-group-header span,
[data-theme="dark"] #teacher-dashboard-root .td-group-header .material-symbols-outlined {
    color: #7dd3fc !important;
}
/* Class-meta sub-labels stay readable on dark */
[data-theme="dark"] #teacher-dashboard-root .td-class-meta {
    color: #94a3b8;
}
/* Chips: navy maps to sky blue automatically; keep WhatsApp green legible */
[data-theme="dark"] #teacher-dashboard-root .td-chip {
    border-color: #3b5e8c;
}
[data-theme="dark"] #teacher-dashboard-root .td-chip.wa {
    color: #4ade80;
    border-color: #4ade80;
}

/* Amber "needs attention" text/headings (#b45309) -> lighter amber for contrast */
[data-theme="dark"] [style*="color:#b45309"],
[data-theme="dark"] [style*="color: #b45309"] {
    color: #fbbf24 !important;
}
/* Health/sparkline green (#047857) -> lighter green for contrast */
[data-theme="dark"] [style*="color:#047857"],
[data-theme="dark"] [style*="color: #047857"] {
    color: #34d399 !important;
}

/* Light hairline row borders in JS-built lists (audit log, failed emails) */
[data-theme="dark"] #audit-log-list > div,
[data-theme="dark"] #failed-emails-list > div {
    border-bottom-color: #2d4870 !important;
}

/* Skeleton shimmer: use dark-friendly grays instead of light ones */
[data-theme="dark"] #teacher-dashboard-root .td-skel {
    background: linear-gradient(90deg, #1e293b 25%, #2d4870 37%, #1e293b 63%);
    background-size: 400% 100%;
}

/* Grades legend chips: hardcoded cream (--cream) -> dark pill in dark mode */
[data-theme="dark"] .grades-legend {
    color: #cbd5e1;
}
[data-theme="dark"] .legend-item {
    background: #16263f;
    color: #cbd5e1;
    border: 1px solid #2d4870;
}
[data-theme="dark"] .legend-item strong {
    color: #7dd3fc;
}

/* ── Student 360° + Detailed-report modals ──
   Both have light inline backgrounds (#f8f9fa + inner `background: white`),
   but dark mode turns their text light → light-on-light = invisible. Flip the
   surfaces to dark so the (light) text becomes readable. The printable report
   card inside #modal-monthly-reports keeps its own white background. */
[data-theme="dark"] #modal-student-360 .modal-body,
[data-theme="dark"] #modal-monthly-reports .modal-body {
    background-color: #16263f !important;
}
/* 360 modal inner white info cards → dark surface + border */
[data-theme="dark"] #modal-student-360 .modal-body [style*="background: white"],
[data-theme="dark"] #modal-student-360 .modal-body [style*="background:white"] {
    background: #1f3253 !important;
    border-color: #2d4870 !important;
}
/* 360 modal progress-bar track → dark */
[data-theme="dark"] #modal-student-360 .progress-container {
    background-color: #0d1e38 !important;
}

/* Faint dark-slate text (#334155, set via inline style) → readable on dark.
   Covers values like the admin teachers-table student counts. */
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #334155"] {
    color: #cbd5e1 !important;
}

/* Tarjetas de métricas del panel de Retención (antes fondo claro fijo). */
.ui-metric {
    flex: 1; min-width: 110px;
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
}
.ui-metric-val { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
[data-theme="dark"] .ui-metric {
    background: #16263f;
    border-color: #2d4870;
}
/* Acentos de los valores → versiones claras solo en modo oscuro (scoped). */
[data-theme="dark"] .ui-metric-val[style*="#0369a1"] { color: #7dd3fc !important; }
[data-theme="dark"] .ui-metric-val[style*="#7c3aed"] { color: #c4b5fd !important; }
[data-theme="dark"] .ui-metric-val[style*="#15803d"] { color: #4ade80 !important; }
[data-theme="dark"] .ui-metric-val[style*="#b45309"] { color: #fbbf24 !important; }

/* Bloque de configuración dentro del modal de plantillas (fondo claro fijo). */
[data-theme="dark"] #intervention-config {
    background: #16263f !important;
    border-color: #2d4870 !important;
}

@media (prefers-reduced-motion: reduce) {
    .kpi-card, .view-panel.panel-visible, .kpi-pop {
        animation: none !important;
        transition: none !important;
    }
}

/* Broadcast Layout Grid */
.broadcast-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 992px) {
    .broadcast-layout {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════
   UI UTILITIES (WS3) — token-based, dark-mode safe.
   Small, high-frequency patterns extracted from inline
   styles in the dashboard / payments / plans views.
═══════════════════════════════════════════════════ */

/* Muted secondary text (uses the theme token so dark mode follows). */
.ui-muted {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.ui-muted-sm {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Friendly empty / loading message cell inside a data table. */
.ui-empty-cell {
    text-align: center;
    color: var(--text-muted);
    padding: 22px 12px;
    font-size: 0.9rem;
}

/* Small action button / chip used in table action columns. */
.ui-btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

/* Inline-flex row of small action buttons. */
.ui-action-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* Pill-style chip link/button (e.g. WhatsApp, 360, report). */
.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--navy);
    color: var(--navy);
}
.ui-chip-wa {
    border-color: #25D366;
    color: #25D366;
}

/* Status/role chip (neutral surface that adapts to the theme). */
.ui-status-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
}

/* Skeleton row span — matches getSkeletonRows() output via a class
   (so inline styles can be dropped). */
.ui-skel-cell {
    display: block;
    height: 0.85rem;
    background: var(--border-color);
    border-radius: 4px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Dark-mode refinements for the chip colors that aren't pure tokens. */
[data-theme="dark"] .ui-chip {
    border-color: #3b5e8c;
    color: #93c5fd;
}
[data-theme="dark"] .ui-chip-wa {
    color: #4ade80;
    border-color: #4ade80;
}
[data-theme="dark"] .ui-skel-cell {
    background: #2d4870;
}

/* ═══════════════════════════════════════════════════
   UI UTILITIES (WS4) — token-based, dark-mode safe.
   Extracted from repeated inline styles across the
   admin / dashboard / payments / plans / profile /
   analytics components. All colors use theme tokens so
   they follow [data-theme="dark"] automatically.
═══════════════════════════════════════════════════ */

/* Card / section heading with leading icon.
   navy -> sky-blue in dark mode via the --navy override. */
.ui-card-title {
    font-size: 1rem;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ui-card-title-lg { font-size: 1.1rem; }

/* Inner padded body of a data-card (form / content block). */
.ui-card-body {
    padding: 15px 20px;
}

/* Small form label used inside the admin/plans config cards. */
.ui-form-label {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Icon-sized material symbol (1rem / 1.2rem variants). */
.ui-icon-sm { font-size: 1rem; }
.ui-icon-md { font-size: 1.2rem; }

/* Small outline/primary button that lays out an icon + label inline. */
.ui-btn-icon {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Compact button paddings (kept distinct so appearance is preserved 1:1). */
.ui-btn-pad-a { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.ui-btn-pad-b { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

/* Uppercase mini KPI label (payments KPI cards). Token-based muted. */
.ui-kpi-mini-label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Tinted data-card surface with a colored left accent bar.
   In light mode the surface is a faint gray; dark mode already
   forces .data-card[style*="background"] to a dark surface, and
   .ui-tinted-card is given the same treatment below so no light
   hex leaks through. */
.ui-tinted-card {
    background-color: #f8f9fa;
}
.ui-accent-navy  { border-left: 4px solid var(--navy); }
.ui-accent-teal  { border-left: 4px solid var(--teal); }
[data-theme="dark"] .ui-tinted-card {
    background-color: #221B3E !important;
}

/* Flush card-header (no bottom margin) — common on config cards. */
.ui-card-header-flush { margin-bottom: 0; }

/* Right-aligned form footer (submit row). */
.ui-form-footer {
    display: flex;
    justify-content: flex-end;
}

/* Vertical form stack with consistent gap. */
.ui-form-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Wrapping flex row of form fields. */
.ui-field-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Slightly enlarged checkbox used in config toggles. */
.ui-checkbox-lg { width: 18px; height: 18px; }

/* Percentage widths for skeleton placeholders. */
.w-50 { width: 50%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }

/* ═══════════════════════════════════════════════════
   MAINT-JS (WS5) — utilities extracted from repeated
   inline styles in Academic / Student / Schedule /
   Admin managers. All colors use theme tokens so they
   follow [data-theme="dark"] automatically. No fixed
   light hex (avoids the dark-mode override bug).
═══════════════════════════════════════════════════ */

/* Tiny font-size helpers (kept 1:1 with the originals). */
.fs-tiny  { font-size: 0.75rem; }
.fs-mini  { font-size: 0.72rem; }
.fs-micro { font-size: 0.68rem; }

/* Bold material-symbol icon used in the attendance status buttons. */
.ui-icon-bold { font-size: 1.1rem; font-weight: bold; }

/* Pass / fail score color (oral assessments, tracking). Token-based so
   they keep their meaning in dark mode. */
.ac-score-pass { color: var(--teal); }
.ac-score-fail { color: #ff0000; }
[data-theme="dark"] .ac-score-fail { color: #f87171; }

/* Schedule event card text rows (replaces per-span inline styles). */
.sched-event-title   { font-weight: bold; display: block; }
.sched-event-sub     { font-size: 0.72rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-event-teacher { font-size: 0.68rem; display: block; opacity: 0.85; }
.sched-event-icon-pos { position: absolute; top: 4px; right: 4px; }
.sched-day-cell-flex { display: flex; flex-direction: column; gap: 4px; padding: 4px; }

/* Dashboard action-buttons cell (gap:5px to match the original 1:1). */
.ui-actions-cell { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

/* Inline payment status icon next to a student name. */
.ui-pay-badge { font-size: 1.1rem; vertical-align: middle; }

/* Material icon sized 1rem, vertically centered, click-through (used inside
   buttons whose own data-* are read by delegated handlers). */
.ui-icon-1rem-mid { font-size: 1rem; vertical-align: middle; pointer-events: none; }

/* Destructive / success outline action buttons (archive / reactivate).
   Colors are intentional semantic accents; given dark variants so they stay
   legible on the dark surface. */
.ui-btn-danger-outline { color: #dc3545; border-color: rgba(220,53,69,0.3); }
.ui-btn-success-outline { color: #10b981; border-color: rgba(16,185,129,0.3); }
[data-theme="dark"] .ui-btn-danger-outline { color: #f87171; border-color: rgba(248,113,113,0.4); }
[data-theme="dark"] .ui-btn-success-outline { color: #34d399; border-color: rgba(52,211,153,0.4); }

/* Teacher-dashboard collapsible group header + roster rows.
   Light hex moved off inline so the dark theme can override them. */
.ui-group-header-row { background-color: #F5F3FF; cursor: pointer; border-bottom: 2px solid #DDD6FE; }
.ui-group-header-info { font-size: 0.85rem; color: #0369a1; }
.ui-roster-row { background-color: #f8fafc; }
[data-theme="dark"] .ui-group-header-row { background-color: #1e3a5f; border-bottom-color: #2d4870; }
[data-theme="dark"] .ui-group-header-info { color: #7dd3fc; }
[data-theme="dark"] .ui-roster-row { background-color: #16233b; }

/* ═══════════════════════════════════════════════════
   MAINT-JS-2 (close) — utilities extracted from repeated
   inline styles in Academic / Admin managers. Token-based
   so dark mode follows; any fixed light hex is paired with
   a [data-theme="dark"] override (avoids the dark-mode bug).
═══════════════════════════════════════════════════ */

/* Generic helpers missing from the existing set. */
.fw-bold { font-weight: bold; }
.ml-5    { margin-left: 5px; }
.ui-col-w220 { width: 220px; }

/* --- AcademicManager --- */

/* "Historial" pill button in the attendance roster (sky-blue accent). */
.ui-history-btn {
    margin-top: 6px;
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--violet-600, #7C3AED);
    border: 1px solid var(--violet-600, #7C3AED);
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
[data-theme="dark"] .ui-history-btn { color: #7dd3fc; border-color: #7dd3fc; }
.ui-icon-09 { font-size: 0.9rem; }

/* Navy-bordered text input (attendance comments). */
.ui-input-navy-border { border-color: var(--navy); }

/* Transparent inline select used in the tracking register (teacher picker). */
.ui-select-inline {
    width: 140px;
    border: 1px solid transparent;
    background: transparent;
    padding: 0.4rem;
    color: var(--navy);
}

/* Fixed-width numeric / text inputs in the tracking register. */
.ui-input-w60  { width: 60px; }
.ui-input-w200 { width: 200px; }

/* Navy primary button (oral-assessment evaluate). */
.ui-btn-navy { background-color: var(--navy); border-color: var(--navy); }

/* Roster filter (teacher view): bold navy label + navy-bordered select. */
.ui-roster-filter-label { font-weight: bold; margin-right: 10px; color: var(--navy); }
.ui-roster-filter-select { display: inline-block; width: auto; min-width: 200px; border-color: var(--navy); }

/* Inline error box (oral assessments load failure). Token-paired for dark. */
.ui-error-box {
    padding: 20px;
    color: #dc2626;
    background: #fee2e2;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #f87171;
}
[data-theme="dark"] .ui-error-box {
    color: #fca5a5;
    background: #3a1c1c;
    border-color: #7f3a3a;
}

/* --- AdminManager (teachers table) --- */

/* Neutral role chip on the teachers table. */
.ui-role-chip {
    background: #f1f5f9;
    color: var(--navy);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
}
[data-theme="dark"] .ui-role-chip { background: #1e293b; }

/* Navy solid badge (Admin header row). */
.ui-badge-navy {
    background: var(--navy);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
}

/* Active/inactive status pill (teacher row + admin row). */
.ui-toggle-pill {
    border: none;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}
.ui-pill-active   { background: #dcfce7; color: #15803d; }
.ui-pill-inactive { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .ui-pill-active   { background: #14331f; color: #4ade80; }
[data-theme="dark"] .ui-pill-inactive { background: #3a1c1c; color: #f87171; }

/* Muted em-dash / "Sin link" placeholder cell. */
.ui-dash-muted { color: var(--text-muted); font-size: 0.85rem; }

/* Teal meeting-link anchor with inline icon. */
.ui-link-teal {
    color: var(--teal);
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Navy outline action button (edit teacher). */
.ui-btn-navy-outline { border-color: var(--navy); color: var(--navy); }

/* Admin header row tint + shimmer skeleton span. */
.ui-admin-row { background-color: rgba(28,69,135,0.04); }
[data-theme="dark"] .ui-admin-row { background-color: rgba(125,211,252,0.06); }
.ui-admin-skel {
    display: inline-block;
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);
    background-size: 400% 100%;
    animation: adminShimmer 1.2s ease-in-out infinite;
}
[data-theme="dark"] .ui-admin-skel {
    background: linear-gradient(90deg,#1e293b 25%,#2d4870 37%,#1e293b 63%);
    background-size: 400% 100%;
}

/* ============================================================== */
/*  STAFF SIDEBAR — grouped sections + account menu (declutter)   */
/* ============================================================== */
.nav-section {
    display: block;
    padding: 1rem 1.5rem 0.35rem;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.4);
    user-select: none;
}
.sidebar-nav > .nav-section:first-child { padding-top: 0.25rem; }

/* Account menu in the sidebar footer */
.staff-account-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    margin-bottom: 0.6rem;
    transition: background 0.2s ease;
}
.staff-account-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.staff-account-toggle > .material-symbols-outlined:first-child { font-size: 1.5rem; flex-shrink: 0; }
.sat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.sat-text strong { font-size: 0.85rem; font-weight: 600; color: #fff; }
.sat-text small { font-size: 0.68rem; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sat-chevron { flex-shrink: 0; font-size: 1.1rem; transition: transform 0.25s ease; }
.staff-account-toggle[aria-expanded="true"] .sat-chevron { transform: rotate(180deg); }
.staff-account-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin: 0 -1.5rem 0.5rem;
    background: rgba(0, 0, 0, 0.15);
}
.staff-account-menu.open { max-height: 150px; }
.staff-account-menu .nav-item { padding: 0.7rem 1.5rem; font-size: 0.9rem; }


/* ═══════════════════════════════════════════════════
   GLOBAL REDUCED-MOTION GUARD (perf audit 2026-06)
   Honors the OS "reduce motion" setting app-wide. Near-zero
   durations keep final layout/state intact but remove motion,
   repaints and reflow churn on low-spec devices. Additive — the
   narrower per-component reduced-motion rules above still apply.
═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════
   PLAN MODALITY — admin Planes de Pago (premium redesign 2026-06, UI-only)
   subscription_plans.modality is the SoT (individual/group/hybrid; NULL → Review).
   Tabs by modality + summary chips + compact card grid + ⋯ action menu.
═══════════════════════════════════════════════════ */
.plans-modality-root { display: flex; flex-direction: column; gap: 14px; }

/* Summary chips */
.pm-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #475569; background: var(--white, #fff); border: 1px solid #e6e2f2; border-radius: 99px; padding: 6px 13px; }
.pm-chip b { color: var(--navy, #1e293b); font-size: 0.95rem; }
.pm-chip--total { background: #f1eefb; border-color: #ddd3f7; }
.pm-chip--total b { color: #6d28d9; }
.pm-chip--ok b { color: #166534; }
.pm-chip--off { background: #f8fafc; }
.pm-chip--off b { color: #64748b; }

/* Tabs */
.pm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid #eceaf4; padding-bottom: 2px; }
.pm-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pm-tab { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; font: inherit; font-size: 0.88rem; font-weight: 600; color: #64748b; padding: 9px 13px; border-radius: 9px 9px 0 0; cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -2px; }
.pm-tab:hover { color: #4c1d95; background: #faf9ff; }
.pm-tab.is-active { color: #6d28d9; border-bottom-color: #7C3AED; }
.pm-tab-n { font-size: 0.72rem; font-weight: 700; background: #f1eefb; color: #6d28d9; border-radius: 99px; padding: 1px 7px; }
.pm-tab.is-active .pm-tab-n { background: #ede9fe; }
.pm-create-ctx { white-space: nowrap; }

/* Grid + premium card */
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 14px; }
.pm-card { position: relative; display: flex; flex-direction: column; gap: 9px; background: var(--white, #fff); border: 1px solid #e9e6f3; border-radius: 16px; padding: 16px 17px 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); transition: box-shadow .18s ease, transform .18s ease; }
.pm-card:hover { box-shadow: 0 8px 22px rgba(80,40,160,0.10); transform: translateY(-2px); }
.pm-card.is-off { background: #fbfbfd; border-style: dashed; box-shadow: none; }
.pm-card.is-off .pm-card-name, .pm-card.is-off .pm-price { opacity: 0.72; }
.pm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pm-card-name { font-weight: 700; color: var(--navy, #1e293b); font-size: 1.02rem; line-height: 1.25; }
.pm-card-price { display: flex; align-items: baseline; gap: 5px; margin-top: -2px; }
.pm-price { font-size: 1.5rem; font-weight: 800; color: var(--navy, #1e293b); letter-spacing: -0.5px; }
.pm-cycle { font-size: 0.78rem; color: #94a3b8; font-weight: 600; }
.pm-card-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; font-size: 0.8rem; color: #64748b; }
.pm-card-meta b { color: #334155; }
.pm-card-perms { list-style: none; padding: 0; margin: 2px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.pm-card-perms li { font-size: 0.78rem; color: #475569; display: flex; align-items: center; gap: 6px; }
.pm-card-perms li .material-symbols-outlined { font-size: 0.98rem; }
.pm-card-perms li.allow .material-symbols-outlined { color: #16a34a; }
.pm-card-perms li.deny .material-symbols-outlined { color: #cbd5e1; }
.pm-card-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.pm-btn-edit { flex: 1; justify-content: center; }

/* State chip */
.state-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 700; border-radius: 99px; padding: 3px 9px; text-transform: uppercase; letter-spacing: 0.3px; }
.state-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.state-dot--on { background: #dcfce7; color: #166534; }
.state-dot--on::before { background: #16a34a; }
.state-dot--off { background: #f1f5f9; color: #64748b; }
.state-dot--off::before { background: #94a3b8; }

/* ⋯ action menu */
.pm-menu { position: relative; }
.pm-kebab { width: 38px; height: 38px; border: 1px solid #e6e2f2; border-radius: 10px; background: var(--white, #fff); color: #64748b; font-size: 1.15rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pm-kebab:hover { background: #faf9ff; color: #6d28d9; border-color: #c4b5fd; }
.pm-menu-list { position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 168px; background: var(--white, #fff); border: 1px solid #e6e2f2; border-radius: 12px; box-shadow: 0 12px 30px rgba(16,24,40,0.16); padding: 6px; z-index: 40; }
.pm-menu-list[hidden] { display: none; }
.pm-menu-item { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 11px; border: 0; background: none; font: inherit; font-size: 0.86rem; color: #334155; border-radius: 8px; cursor: pointer; text-align: left; }
.pm-menu-item:hover { background: #f5f3ff; }
.pm-menu-item .material-symbols-outlined { font-size: 1.05rem; color: #7c3aed; }
.pm-menu-item--danger { color: #dc2626; }
.pm-menu-item--danger .material-symbols-outlined { color: #dc2626; }

/* Empty states */
.pm-empty { color: #94a3b8; font-size: 0.9rem; padding: 28px 0; text-align: center; }
.pm-hybrid-empty { text-align: center; background: linear-gradient(180deg, #f8fbff, #fff); border: 1.5px dashed #bae6fd; border-radius: 16px; padding: 34px 20px; }
.pm-hybrid-empty .material-symbols-outlined { font-size: 2.6rem; color: #38bdf8; }
.pm-hybrid-empty h3 { margin: 8px 0 4px; font-size: 1.05rem; color: var(--navy, #1e293b); }
.pm-hybrid-empty p { margin: 0 auto 16px; font-size: 0.86rem; color: #64748b; max-width: 420px; }

/* Modality badges (shared with PaymentManager + cohort enroll modal) */
.mod-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.66rem; font-weight: 700; border-radius: 99px; padding: 3px 9px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px; }
.mod-badge--individual { background: #ede9fe; color: #6d28d9; }
.mod-badge--group { background: #dcfce7; color: #166534; }
.mod-badge--hybrid { background: #e0f2fe; color: #075985; }
.mod-badge--review { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.state-pill { font-size: 0.64rem; font-weight: 700; border-radius: 99px; padding: 2px 8px; }
.state-pill--active { background: #dcfce7; color: #166534; }
.state-pill--inactive { background: #f1f5f9; color: #64748b; }

/* Dark mode */
[data-theme="dark"] .pm-chip, [data-theme="dark"] .pm-card, [data-theme="dark"] .pm-kebab, [data-theme="dark"] .pm-menu-list { background: #1e2236; border-color: #2d3350; }
[data-theme="dark"] .pm-card.is-off { background: #191c2e; }
[data-theme="dark"] .pm-card-name, [data-theme="dark"] .pm-price, [data-theme="dark"] .pm-chip b, [data-theme="dark"] .pm-card-meta b { color: #e8e7f2; }
[data-theme="dark"] .pm-menu-item { color: #cbd2e8; }
[data-theme="dark"] .pm-menu-item:hover { background: #2a2342; }
[data-theme="dark"] .pm-toolbar { border-color: #2d3350; }

@media (max-width: 640px) {
    .pm-grid { grid-template-columns: 1fr; }
    .pm-toolbar { flex-direction: column; align-items: stretch; }
    .pm-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .pm-tab { white-space: nowrap; }
}

/* ===================== CONTROL DE PAGOS — rediseño operativo (UI-only) ===================== */
/* Métricas compactas */
.pay-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 4px 0 18px; }
.pay-metric { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e9eef5; border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.pay-metric-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; }
.pay-metric-ic .material-symbols-outlined { font-size: 24px; }
.pay-metric-label { margin: 0 0 2px; font-size: 0.78rem; font-weight: 600; color: #64748b; letter-spacing: .2px; }
.pay-metric-value { margin: 0; font-size: 1.55rem; font-weight: 800; line-height: 1.05; color: #0f172a; }
.pay-metric-sub { font-size: 0.72rem; color: #94a3b8; }
.pay-metric--collected .pay-metric-ic { background: #ede9fe; color: #6d28d9; }
.pay-metric--collected .pay-metric-value { color: #6d28d9; }
.pay-metric--pending .pay-metric-ic { background: #fff3e2; color: #c2680c; }
.pay-metric--pending .pay-metric-value { color: #c2680c; }
.pay-metric--overdue .pay-metric-ic { background: #fde8e8; color: #d92d20; }
.pay-metric--overdue .pay-metric-value { color: #d92d20; }

/* Barra de filtros */
.pay-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.pay-search { position: relative; flex: 1 1 240px; min-width: 200px; display: flex; align-items: center; }
.pay-search .material-symbols-outlined { position: absolute; left: 12px; font-size: 20px; color: #94a3b8; pointer-events: none; }
.pay-search input { width: 100%; padding: 0.55rem 0.75rem 0.55rem 2.4rem; border: 1px solid #d8e0ea; border-radius: 10px; font-size: 0.9rem; background: #fff; color: #0f172a; }
.pay-search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,.12); }
.pay-filter-sel { flex: 0 0 auto; min-width: 150px; border-radius: 10px; }

/* Pestañas de estado */
.pay-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid #eef2f7; padding-bottom: 2px; }
.pay-tab { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; font-size: 0.86rem; font-weight: 600; color: #64748b; cursor: pointer; border-radius: 8px 8px 0 0; transition: color .15s, border-color .15s, background .15s; }
.pay-tab:hover { color: #0f172a; background: #f8fafc; }
.pay-tab.is-active { color: var(--teal); border-bottom-color: var(--teal); }
.pay-tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 0.72rem; font-weight: 700; border-radius: 99px; background: #eef2f7; color: #64748b; }
.pay-tab.is-active .pay-tab-n { background: var(--teal); color: #fff; }

/* Tabla limpia */
.pay-table { width: 100%; }
.pay-table th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; font-weight: 700; }
.pay-table td { vertical-align: middle; }
.pay-cell-student { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pay-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #ede9fe; color: #6d28d9; font-size: 0.78rem; font-weight: 800; flex: 0 0 auto; }
.pay-student-name { font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-cell-plan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-plan-name { color: #334155; font-weight: 500; }
.pay-cell-due { color: #475569; font-variant-numeric: tabular-nums; }
.pay-cell-due.is-overdue { color: #d92d20; font-weight: 600; }
.pay-cell-amount { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-mxn { font-size: 0.72rem; font-weight: 600; color: #94a3b8; }
.pay-balance { display: block; font-weight: 500; color: #c2680c; font-size: 0.72rem; margin-top: 2px; }
.pay-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; border-radius: 99px; padding: 4px 11px; white-space: nowrap; }
.pay-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.pay-pill--paid { background: #dcfce7; color: #15803d; }
.pay-pill--pending { background: #fff3e2; color: #c2680c; }
.pay-pill--overdue { background: #fde8e8; color: #d92d20; }
.pay-pill--partial { background: #fef3c7; color: #b45309; }
.pay-view-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0.4rem 0.85rem; font-size: 0.84rem; font-weight: 600; border-color: #d8e0ea; color: var(--navy); border-radius: 9px; }
.pay-view-btn:hover { border-color: var(--teal); color: var(--teal); background: #f0fdfa; }

/* Drawer de detalle */
.pay-drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.42); z-index: 1200; }
.pay-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; background: #fff; box-shadow: -8px 0 30px rgba(15,23,42,.16); z-index: 1201; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.pay-drawer.is-open { transform: translateX(0); }
.pay-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eef2f7; }
.pay-drawer-head h3 { margin: 0; font-size: 1.05rem; color: #0f172a; }
.pay-drawer-close { background: transparent; border: none; cursor: pointer; color: #64748b; display: inline-flex; padding: 4px; border-radius: 8px; }
.pay-drawer-close:hover { background: #f1f5f9; color: #0f172a; }
.pay-drawer-body { padding: 20px; overflow-y: auto; flex: 1; }
.pay-drawer-who { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #f1f5f9; margin-bottom: 16px; }
.pay-drawer-avatar { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #ede9fe; color: #6d28d9; font-weight: 800; font-size: 1rem; flex: 0 0 auto; }
.pay-drawer-name { font-weight: 700; color: #0f172a; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
.pay-drawer-email { font-size: 0.8rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; }
.pay-drawer-dl { margin: 0 0 18px; display: grid; gap: 0; }
.pay-drawer-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed #eef2f7; }
.pay-drawer-dl > div[hidden] { display: none; } /* el display:flex anula el [hidden] de UA: lo restauramos */
.pay-drawer-dl dt { margin: 0; font-size: 0.8rem; color: #94a3b8; font-weight: 500; }
.pay-drawer-dl dd { margin: 0; font-size: 0.88rem; color: #0f172a; font-weight: 600; text-align: right; }
.pay-drawer-actions { display: flex; flex-direction: column; gap: 10px; }
.pay-act { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0.6rem 1rem; font-size: 0.88rem; font-weight: 600; border-radius: 10px; }
.pay-act--paid { background: var(--teal); border-color: var(--teal); color: #fff; }
.pay-act--danger { color: #d92d20; border-color: #f3c5c0; }
.pay-act--danger:hover { background: #fef2f2; border-color: #d92d20; }
.pay-act-status { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.pay-act-label { font-size: 0.78rem; font-weight: 600; color: #64748b; }
.pay-act-status .form-control { border-radius: 10px; }

/* Responsive */
@media (max-width: 980px) { .pay-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .pay-metrics { grid-template-columns: 1fr; }
    .pay-filters { flex-direction: column; align-items: stretch; }
    .pay-filter-sel { width: 100%; max-width: none !important; }
    .pay-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .pay-tab { white-space: nowrap; }
    .pay-drawer { width: 100%; max-width: 100vw; top: auto; bottom: 0; height: 88vh; border-radius: 18px 18px 0 0; transform: translateY(100%); }
    .pay-drawer.is-open { transform: translateY(0); }
}
/* Ultrawide: evita estirar en exceso la zona de lectura */
@media (min-width: 1700px) { .pay-metrics { max-width: 1320px; } }

/* Dark mode */
[data-theme="dark"] .pay-metric { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .pay-metric-value { color: #f1f5f9; }
[data-theme="dark"] .pay-metric-label { color: #94a3b8; }
[data-theme="dark"] .pay-search input { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .pay-tabs { border-bottom-color: #334155; }
[data-theme="dark"] .pay-tab:hover { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .pay-student-name, [data-theme="dark"] .pay-cell-amount, [data-theme="dark"] .pay-drawer-name { color: #f1f5f9; }
[data-theme="dark"] .pay-plan-name, [data-theme="dark"] .pay-cell-due { color: #cbd5e1; }
[data-theme="dark"] .pay-drawer { background: #0f172a; }
[data-theme="dark"] .pay-drawer-head, [data-theme="dark"] .pay-drawer-who { border-color: #334155; }
[data-theme="dark"] .pay-drawer-head h3 { color: #f1f5f9; }
[data-theme="dark"] .pay-drawer-dl > div { border-color: #1e293b; }
[data-theme="dark"] .pay-drawer-dl dd { color: #e2e8f0; }
[data-theme="dark"] .pay-view-btn { color: #e2e8f0; border-color: #334155; }

/* ===================== LEADS / PROSPECTOS - Phase 2 UI shell ===================== */
#leads-root {
    --leads-purple: #7c3aed;
    --leads-purple-dark: #5b21b6;
    --leads-lavender: #f5f3ff;
    --leads-line: #e8e2f7;
    --leads-ink: #1e1b2e;
    --leads-muted: #64748b;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

#leads-root * { box-sizing: border-box; }

#leads-root .leads-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 22px;
    border: 1px solid var(--leads-line);
    border-radius: 18px;
    background: linear-gradient(135deg, #fff 0%, #faf8ff 58%, #f3e8ff 100%);
    box-shadow: 0 16px 40px -32px rgba(76, 29, 149, 0.45);
}

#leads-root .leads-hero-copy { min-width: 0; }
#leads-root .leads-eyebrow {
    display: inline-flex;
    margin-bottom: 7px;
    color: var(--leads-purple);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#leads-root h1,
#leads-root h2,
#leads-root h3,
#leads-root p { margin-top: 0; }

#leads-root h1 {
    margin-bottom: 6px;
    color: var(--leads-ink);
    font-size: 1.85rem;
    line-height: 1.15;
}

#leads-root .leads-hero p {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--leads-muted);
    line-height: 1.55;
}

#leads-root .leads-hero-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

#leads-root .leads-pending-action {
    gap: 8px;
    opacity: 0.78;
    cursor: not-allowed;
}

#leads-root .leads-pending-pill {
    display: inline-flex;
    margin-left: 4px;
    padding: 2px 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.24);
    font-size: 0.66rem;
    font-weight: 800;
}

#leads-root .leads-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 6px;
    border: 1px solid var(--leads-line);
    border-radius: 14px;
    background: #fff;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

#leads-root .leads-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    padding: 9px 12px;
    background: transparent;
    color: var(--leads-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
}

#leads-root .leads-tab:hover {
    background: #faf8ff;
    color: var(--leads-purple-dark);
}

#leads-root .leads-tab.is-active {
    background: var(--leads-lavender);
    color: var(--leads-purple-dark);
    box-shadow: inset 0 0 0 1px #ddd6fe;
}

#leads-root .leads-tab .material-symbols-outlined { font-size: 1.15rem; }

#leads-root .leads-panel { display: none; }
#leads-root .leads-panel.is-active {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

#leads-root .leads-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

#leads-root .leads-metrics-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#leads-root .leads-metric,
#leads-root .leads-card,
#leads-root .leads-stage {
    background: #fff;
    border: 1px solid #ece8f5;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 34px -32px rgba(76, 29, 149, 0.42);
}

#leads-root .leads-metric {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 15px;
}

#leads-root .leads-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

#leads-root .leads-tone-purple { background: #ede9fe; color: #6d28d9; }
#leads-root .leads-tone-orange { background: #fff7ed; color: #c2410c; }
#leads-root .leads-tone-cyan { background: #e0f2fe; color: #0369a1; }
#leads-root .leads-tone-green { background: #dcfce7; color: #166534; }
#leads-root .leads-tone-red { background: #fee2e2; color: #b91c1c; }

#leads-root .leads-metric p {
    margin-bottom: 2px;
    color: var(--leads-muted);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

#leads-root .leads-metric strong {
    display: block;
    color: var(--leads-ink);
    font-size: 1.45rem;
    line-height: 1.05;
}

#leads-root .leads-metric small {
    color: #94a3b8;
    font-size: 0.72rem;
}

#leads-root .leads-grid-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

#leads-root .leads-card {
    min-width: 0;
    padding: 18px;
}

#leads-root .leads-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

#leads-root .leads-card h2,
#leads-root .leads-stage h3 {
    margin-bottom: 0;
    color: var(--leads-ink);
    font-size: 1.02rem;
}

#leads-root .leads-soft-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 99px;
    padding: 4px 10px;
    background: var(--leads-lavender);
    color: var(--leads-purple-dark);
    font-size: 0.72rem;
    font-weight: 800;
}

#leads-root .leads-empty,
#leads-root .leads-table-empty,
#leads-root .leads-stage-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 178px;
    padding: 18px;
    border: 1px dashed #ddd6fe;
    border-radius: 14px;
    background: #faf8ff;
    text-align: center;
    color: var(--leads-muted);
}

#leads-root .leads-empty.compact { min-height: 132px; }

#leads-root .leads-empty .material-symbols-outlined,
#leads-root .leads-table-empty .material-symbols-outlined,
#leads-root .leads-drawer-empty .material-symbols-outlined {
    color: var(--leads-purple);
    font-size: 2rem;
}

#leads-root .leads-empty h3 {
    margin: 8px 0 4px;
    color: var(--leads-ink);
    font-size: 1rem;
}

#leads-root .leads-empty p,
#leads-root .leads-table-empty p {
    max-width: 520px;
    margin-bottom: 0;
}

#leads-root .leads-funnel {
    display: grid;
    gap: 9px;
}

#leads-root .leads-funnel div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: #faf8ff;
    color: var(--leads-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

#leads-root .leads-funnel b { color: var(--leads-purple-dark); }

#leads-root .leads-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 12px;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

#leads-root .leads-stage {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 310px;
    padding: 14px;
}

#leads-root .leads-stage h3 {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1edf9;
    background: #fff;
}

#leads-root .leads-stage-empty {
    min-height: 210px;
    font-size: 0.86rem;
}

#leads-root .leads-stage-empty .material-symbols-outlined {
    color: var(--leads-purple);
    font-size: 1.8rem;
}

#leads-root .leads-stage-empty p {
    margin: 6px 0 0;
}

#leads-root .leads-filter-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

#leads-root .leads-search {
    position: relative;
    display: flex;
    align-items: center;
}

#leads-root .leads-search .material-symbols-outlined {
    position: absolute;
    left: 11px;
    color: #94a3b8;
    pointer-events: none;
}

#leads-root .leads-search input {
    width: 100%;
    padding: 0.55rem 0.75rem 0.55rem 2.35rem;
    border: 1px solid #d8e0ea;
    border-radius: 10px;
    background: #fff;
    color: var(--leads-ink);
}

#leads-root .leads-followup-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

#leads-root .leads-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.42);
}

#leads-root .leads-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    width: clamp(420px, 32vw, 520px);
    max-width: 96vw;
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 30px rgba(15, 23, 42, 0.16);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

#leads-root .leads-drawer.is-open { transform: translateX(0); }

#leads-root .leads-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #eef2f7;
}

#leads-root .leads-drawer-head h2 {
    margin-bottom: 0;
    color: var(--leads-ink);
    font-size: 1.2rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

#leads-root .leads-drawer-close {
    display: inline-flex;
    border: 0;
    border-radius: 8px;
    padding: 5px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

#leads-root .leads-drawer-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

#leads-root .leads-drawer-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    padding: 20px;
}

#leads-root .leads-drawer-empty {
    padding: 22px;
    border: 1px dashed #ddd6fe;
    border-radius: 14px;
    background: #faf8ff;
    text-align: center;
}

#leads-root .leads-drawer-empty h3 {
    margin: 8px 0 5px;
    color: var(--leads-ink);
    font-size: 1rem;
}

#leads-root .leads-drawer-empty p {
    margin-bottom: 0;
    color: var(--leads-muted);
}

#leads-root .leads-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

#leads-root .leads-drawer-actions .btn {
    display: inline-flex;
    justify-content: center;
    gap: 7px;
    width: 100%;
}

[data-theme="dark"] #leads-root .leads-hero,
[data-theme="dark"] #leads-root .leads-tabs,
[data-theme="dark"] #leads-root .leads-metric,
[data-theme="dark"] #leads-root .leads-card,
[data-theme="dark"] #leads-root .leads-stage,
[data-theme="dark"] #leads-root .leads-drawer {
    background: #1f2233;
    border-color: #322c46;
}

[data-theme="dark"] #leads-root .leads-stage h3 {
    background: #1f2233;
}

[data-theme="dark"] #leads-root h1,
[data-theme="dark"] #leads-root h2,
[data-theme="dark"] #leads-root h3,
[data-theme="dark"] #leads-root .leads-metric strong {
    color: #f1f0fb;
}

[data-theme="dark"] #leads-root .leads-empty,
[data-theme="dark"] #leads-root .leads-table-empty,
[data-theme="dark"] #leads-root .leads-stage-empty,
[data-theme="dark"] #leads-root .leads-funnel div,
[data-theme="dark"] #leads-root .leads-drawer-empty {
    background: #262a3d;
    border-color: #3a3654;
}

@media (max-width: 1100px) {
    #leads-root .leads-metrics,
    #leads-root .leads-followup-grid,
    #leads-root .leads-import-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #leads-root .leads-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    #leads-root .leads-hero {
        flex-direction: column;
        padding: 18px;
    }
    #leads-root .leads-hero-actions,
    #leads-root .leads-hero-actions .btn,
    #leads-root .leads-card-head .btn { width: 100%; }
    #leads-root .leads-grid-two,
    #leads-root .leads-metrics,
    #leads-root .leads-metrics-small,
    #leads-root .leads-followup-grid,
    #leads-root .leads-import-source,
    #leads-root .leads-import-metrics,
    #leads-root .leads-filter-row { grid-template-columns: 1fr; }
    #leads-root .leads-import-map-row { grid-template-columns: 1fr; }
    #leads-root .leads-tabs { flex-wrap: nowrap; }
    #leads-root .leads-card-head { align-items: stretch; }
}

@media (max-width: 760px) {
    #leads-root .leads-board {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
        padding-bottom: 0;
    }

    #leads-root .leads-stage {
        min-height: auto;
    }

    #leads-root .leads-stage-empty {
        min-height: 120px;
    }
}

@media (max-width: 600px) {
    #leads-root h1 { font-size: 1.55rem; }
    #leads-root .leads-tab { padding: 8px 10px; font-size: 0.8rem; }
    #leads-root .leads-drawer {
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100vw;
        height: 88vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
    }
    #leads-root .leads-drawer.is-open { transform: translateY(0); }
}

/* Leads drawer is moved to <body> at runtime so it stays viewport-fixed. */
.leads-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.42);
}

.leads-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    width: clamp(480px, 34vw, 560px);
    min-width: 420px;
    max-width: 90vw;
    height: 100dvh;
    max-height: 100dvh;
    background: #fff;
    box-shadow: -10px 0 34px rgba(15, 23, 42, 0.18);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.leads-drawer.is-open { transform: translateX(0); }

.leads-drawer-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #eef2f7;
    background: inherit;
}

.leads-drawer-head h2 {
    margin: 0;
    color: #1e1b2e;
    font-size: 1.18rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.leads-drawer-close {
    display: inline-flex;
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px;
    padding: 5px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.leads-drawer-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.leads-drawer-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 20px 24px;
    -webkit-overflow-scrolling: touch;
}

.leads-drawer #leads-drawer-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.leads-drawer .leads-d-head {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.leads-drawer .leads-d-actions,
.leads-drawer .leads-d-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.leads-drawer .leads-d-actions .btn,
.leads-drawer .leads-chip-btn {
    min-width: 0;
    min-height: 38px;
    justify-content: center;
    gap: 6px;
    padding-inline: 10px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}

.leads-drawer .leads-chip-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e6e2f2;
    border-radius: 10px;
    padding-block: 8px;
    background: #faf9ff;
    color: #5b21b6;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.leads-drawer .leads-d-quick {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 0;
    background: linear-gradient(#fff 84%, rgba(255, 255, 255, 0));
}

.leads-drawer .leads-d-quick .leads-chip-btn--danger { grid-column: 1 / -1; }

.leads-drawer .leads-d-sec {
    border-top: 1px solid #f1edf9;
    padding-top: 14px;
}

.leads-drawer .leads-d-sec h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #7c3aed;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.leads-drawer .leads-d-empty {
    margin: 0;
    color: #64748b;
    font-size: 0.84rem;
}

.leads-drawer .leads-dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.leads-drawer .leads-dl-row {
    display: grid;
    grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px dashed #f1edf9;
    font-size: 0.86rem;
}

.leads-drawer .leads-dl-row dt {
    min-width: 0;
    margin: 0;
    color: #64748b;
}

.leads-drawer .leads-dl-row dd {
    min-width: 0;
    margin: 0;
    color: #1e1b2e;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

[data-theme="dark"] .leads-drawer {
    background: #1f2233;
    border-color: #322c46;
}

[data-theme="dark"] .leads-drawer-head,
[data-theme="dark"] .leads-drawer .leads-d-quick {
    background: #1f2233;
}

[data-theme="dark"] .leads-drawer-head h2,
[data-theme="dark"] .leads-drawer .leads-dl-row dd {
    color: #f1f0fb;
}

[data-theme="dark"] .leads-drawer .leads-d-sec,
[data-theme="dark"] .leads-drawer .leads-dl-row {
    border-color: #322c46;
}

[data-theme="dark"] .leads-drawer .leads-chip-btn {
    background: #262a3d;
    border-color: #3a3654;
    color: #c4b5fd;
}

@media (max-width: 600px) {
    .leads-drawer {
        inset: 0;
        width: 100vw;
        min-width: 0;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        transform: translateX(100%);
    }

    .leads-drawer.is-open { transform: translateX(0); }

    .leads-drawer-head,
    .leads-drawer-body {
        padding-inline: 16px;
    }

    .leads-drawer .leads-d-actions,
    .leads-drawer .leads-d-quick {
        grid-template-columns: 1fr;
    }
}

.leads-drawer .leads-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leads-drawer .leads-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 99px;
    padding: 3px 10px;
    background: #eef0f4;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.leads-drawer .leads-badge--st-nuevo,
.leads-drawer .leads-badge--prop-borrador { background: #ede9fe; color: #6d28d9; }
.leads-drawer .leads-badge--st-contactado,
.leads-drawer .leads-badge--in-medio,
.leads-drawer .leads-badge--pr-normal,
.leads-drawer .leads-badge--demo-agendada,
.leads-drawer .leads-badge--prop-enviada { background: #e0f2fe; color: #075985; }
.leads-drawer .leads-badge--st-diagnostico { background: #cffafe; color: #155e75; }
.leads-drawer .leads-badge--st-clase_muestra,
.leads-drawer .leads-badge--demo-confirmada,
.leads-drawer .leads-badge--prop-vista { background: #e0e7ff; color: #3730a3; }
.leads-drawer .leads-badge--st-propuesta,
.leads-drawer .leads-badge--in-alto,
.leads-drawer .leads-badge--pr-alta,
.leads-drawer .leads-badge--demo-reprogramada,
.leads-drawer .leads-badge--pay-pendiente { background: #fef9c3; color: #854d0e; }
.leads-drawer .leads-badge--st-pago_pendiente { background: #ffedd5; color: #9a3412; }
.leads-drawer .leads-badge--st-convertido,
.leads-drawer .leads-badge--in-muy_alto,
.leads-drawer .leads-badge--demo-realizada,
.leads-drawer .leads-badge--prop-aceptada,
.leads-drawer .leads-badge--prop-pagada,
.leads-drawer .leads-badge--pay-confirmado { background: #dcfce7; color: #166534; }
.leads-drawer .leads-badge--st-perdido,
.leads-drawer .leads-badge--pr-urgente,
.leads-drawer .leads-badge--demo-no_asistio,
.leads-drawer .leads-badge--prop-rechazada,
.leads-drawer .leads-badge--pay-rechazado,
.leads-drawer .leads-badge--danger { background: #fee2e2; color: #b91c1c; }

.leads-drawer .leads-prob {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #5b21b6;
    font-size: 0.8rem;
    font-weight: 800;
}

.leads-drawer .leads-prob .material-symbols-outlined { font-size: 1.05rem; }

.leads-next-step,
.leads-edit-banner {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    padding: 12px;
    background: #faf8ff;
}

.leads-next-step > .material-symbols-outlined,
.leads-edit-banner > .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #ede9fe;
    color: #6d28d9;
}

.leads-next-step strong,
.leads-edit-banner strong {
    display: block;
    color: #1e1b2e;
    font-size: 0.88rem;
}

.leads-next-step p,
.leads-edit-banner p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.leads-drawer .leads-fu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #ece8f5;
    border-radius: 12px;
    background: #fff;
}

.leads-drawer .leads-fu.is-overdue {
    border-color: #fecaca;
    background: #fef5f5;
}

.leads-drawer .leads-fu-main { flex: 1; min-width: 0; }
.leads-drawer .leads-fu-title { color: #1e1b2e; font-size: 0.86rem; font-weight: 700; }
.leads-drawer .leads-fu-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.78rem;
}
.leads-drawer .leads-fu-sub .material-symbols-outlined { font-size: 0.95rem; }
.leads-drawer .leads-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: #f5f3ff;
    color: #5b21b6;
    cursor: pointer;
}
.leads-drawer .leads-mini-btn:hover { background: #ddd6fe; }

.leads-drawer .leads-stage-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 99px;
    background: #f5f3ff;
    color: #5b21b6;
    font-size: 0.72rem;
    font-weight: 800;
}

.leads-drawer .leads-tl {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leads-drawer .leads-tl-item {
    display: flex;
    gap: 11px;
}

.leads-drawer .leads-tl-ic {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
}

.leads-drawer .leads-tl-ic .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f5f3ff;
    color: #5b21b6;
    font-size: 1.05rem;
}

.leads-drawer .leads-tl-item:not(:last-child) .leads-tl-ic::after {
    content: '';
    flex: 1;
    width: 2px;
    margin: 3px 0;
    background: #ece8f5;
}

.leads-drawer .leads-tl-body { min-width: 0; padding-bottom: 14px; }
.leads-drawer .leads-tl-t { color: #1e1b2e; font-size: 0.85rem; }
.leads-drawer .leads-tl-t b { color: #5b21b6; }
.leads-drawer .leads-tl-note { margin-top: 2px; color: #64748b; font-size: 0.82rem; }
.leads-drawer .leads-tl-time { margin-top: 2px; color: #94a3b8; font-size: 0.72rem; }

.leads-drawer .leads-d-convert {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #f1edf9;
}

.leads-drawer .leads-d-convert .btn {
    width: 100%;
    justify-content: center;
    gap: 6px;
}

.leads-drawer .leads-d-convert small {
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.4;
}

.leads-drawer-form {
    display: flex;
    flex-direction: column;
}

.leads-drawer-savebar {
    position: sticky;
    bottom: -24px;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 0 0;
    border-top: 1px solid #f1edf9;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 18%);
}

.leads-drawer-savebar .btn {
    min-width: 150px;
    justify-content: center;
    gap: 6px;
}

[data-theme="dark"] .leads-next-step,
[data-theme="dark"] .leads-edit-banner,
[data-theme="dark"] .leads-drawer .leads-fu {
    background: #262a3d;
    border-color: #3a3654;
}

[data-theme="dark"] .leads-next-step strong,
[data-theme="dark"] .leads-edit-banner strong,
[data-theme="dark"] .leads-drawer .leads-fu-title,
[data-theme="dark"] .leads-drawer .leads-tl-t {
    color: #f1f0fb;
}

[data-theme="dark"] .leads-drawer .leads-tl-item:not(:last-child) .leads-tl-ic::after,
[data-theme="dark"] .leads-drawer .leads-d-convert,
[data-theme="dark"] .leads-drawer-savebar {
    border-color: #322c46;
}

[data-theme="dark"] .leads-drawer-savebar {
    background: linear-gradient(rgba(31, 34, 51, 0), #1f2233 18%);
}

/* ===================== LEADS / PROSPECTOS - Phase 4 (live data) ===================== */
#leads-root .leads-mount { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* banners + spinner */
#leads-root .leads-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 12px;
    background: var(--leads-lavender); color: var(--leads-purple-dark);
    font-size: 0.86rem; font-weight: 600;
}
#leads-root .leads-banner--err { background: #fef2f2; color: #b91c1c; }
#leads-root .leads-spin { animation: leads-spin 0.9s linear infinite; }
@keyframes leads-spin { to { transform: rotate(360deg); } }

/* generic list + lead cards */
#leads-root .leads-list { display: flex; flex-direction: column; gap: 8px; }
#leads-root .leads-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
#leads-root .leads-lead-card {
    display: flex; flex-direction: column; gap: 8px; width: 100%;
    min-height: 150px;
    border: 1px solid #ece8f5; border-radius: 13px; padding: 12px 13px;
    background: #fff; cursor: pointer; text-align: left; font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
#leads-root .leads-lead-card:hover { border-color: #c4b5fd; box-shadow: 0 10px 26px -20px rgba(76, 29, 149, 0.5); transform: translateY(-1px); }
[data-theme="dark"] #leads-root .leads-lead-card { background: #262a3d; border-color: #3a3654; }
#leads-root .leads-lead-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#leads-root .leads-lead-name { font-weight: 700; color: var(--leads-ink); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] #leads-root .leads-lead-name { color: #f1f0fb; }
#leads-root .leads-lead-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#leads-root .leads-lead-sub { display: inline-flex; align-items: center; gap: 5px; color: var(--leads-muted); font-size: 0.78rem; }
#leads-root .leads-lead-sub .material-symbols-outlined { font-size: 1rem; }
#leads-root .leads-prob { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 0.8rem; color: var(--leads-purple-dark); }
#leads-root .leads-prob .material-symbols-outlined { font-size: 1.05rem; }
#leads-root .leads-card-next {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed #ece8f5;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.35;
}
#leads-root .leads-card-next.has-followup { color: #5b21b6; font-weight: 700; }
#leads-root .leads-card-next .material-symbols-outlined { flex: 0 0 auto; font-size: 0.95rem; }

/* badges */
#leads-root .leads-badge { display: inline-flex; align-items: center; border-radius: 99px; padding: 3px 10px; font-size: 0.72rem; font-weight: 800; background: #eef0f4; color: #64748b; white-space: nowrap; }
#leads-root .leads-badge--st-nuevo, #leads-root .leads-badge--prop-borrador { background: #ede9fe; color: #6d28d9; }
#leads-root .leads-badge--st-contactado, #leads-root .leads-badge--in-medio, #leads-root .leads-badge--pr-normal, #leads-root .leads-badge--demo-agendada, #leads-root .leads-badge--prop-enviada { background: #e0f2fe; color: #075985; }
#leads-root .leads-badge--st-diagnostico { background: #cffafe; color: #155e75; }
#leads-root .leads-badge--st-clase_muestra, #leads-root .leads-badge--demo-confirmada, #leads-root .leads-badge--prop-vista { background: #e0e7ff; color: #3730a3; }
#leads-root .leads-badge--st-propuesta, #leads-root .leads-badge--in-alto, #leads-root .leads-badge--pr-alta, #leads-root .leads-badge--demo-reprogramada, #leads-root .leads-badge--pay-pendiente { background: #fef9c3; color: #854d0e; }
#leads-root .leads-badge--st-pago_pendiente { background: #ffedd5; color: #9a3412; }
#leads-root .leads-badge--st-convertido, #leads-root .leads-badge--in-muy_alto, #leads-root .leads-badge--demo-realizada, #leads-root .leads-badge--prop-aceptada, #leads-root .leads-badge--prop-pagada, #leads-root .leads-badge--pay-confirmado { background: #dcfce7; color: #166534; }
#leads-root .leads-badge--st-perdido, #leads-root .leads-badge--pr-urgente, #leads-root .leads-badge--demo-no_asistio, #leads-root .leads-badge--prop-rechazada, #leads-root .leads-badge--pay-rechazado, #leads-root .leads-badge--danger { background: #fee2e2; color: #b91c1c; }

/* tables */
#leads-root .leads-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#leads-root .leads-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
#leads-root .leads-table th { text-align: left; padding: 9px 12px; color: var(--leads-muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #ece8f5; white-space: nowrap; }
#leads-root .leads-table td { padding: 11px 12px; border-bottom: 1px solid #f3f1fa; color: var(--leads-ink); vertical-align: top; }
#leads-root .leads-table tbody tr { cursor: pointer; transition: background 0.12s; }
#leads-root .leads-table tbody tr:hover { background: #faf8ff; }
[data-theme="dark"] #leads-root .leads-table th { border-color: #3a3654; }
[data-theme="dark"] #leads-root .leads-table td { border-color: #2f2b45; color: #e8e7f2; }
[data-theme="dark"] #leads-root .leads-table tbody tr:hover { background: #262a3d; }
[data-theme="dark"] #leads-root .leads-import-file,
[data-theme="dark"] #leads-root .leads-import-map-row {
    background: #262a3d;
    border-color: #3a3654;
}
[data-theme="dark"] #leads-root .leads-import-map-row b { color: #f1f0fb; }
#leads-root .leads-td-name { font-weight: 700; }
#leads-root .leads-td-sub { color: var(--leads-muted); font-size: 0.78rem; }
#leads-root .leads-stage-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--leads-lavender); color: var(--leads-purple-dark); font-size: 0.72rem; font-weight: 800; }
#leads-root .leads-stage-body { display: flex; flex-direction: column; gap: 10px; }

/* follow-up rows */
#leads-root .leads-fu { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #ece8f5; border-radius: 12px; background: #fff; }
[data-theme="dark"] #leads-root .leads-fu { background: #262a3d; border-color: #3a3654; }
#leads-root .leads-fu.is-overdue { border-color: #fecaca; background: #fef5f5; }
[data-theme="dark"] #leads-root .leads-fu.is-overdue { background: #3a2526; border-color: #5b2b2b; }
#leads-root .leads-fu-main { flex: 1; min-width: 0; }
#leads-root .leads-fu-title { font-weight: 700; color: var(--leads-ink); font-size: 0.86rem; }
[data-theme="dark"] #leads-root .leads-fu-title { color: #f1f0fb; }
#leads-root .leads-fu-title a { color: var(--leads-purple-dark); text-decoration: none; }
#leads-root .leads-fu-title a:hover { text-decoration: underline; }
#leads-root .leads-fu-sub { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; color: var(--leads-muted); font-size: 0.78rem; margin-top: 2px; }
#leads-root .leads-fu-sub .material-symbols-outlined { font-size: 0.95rem; }
#leads-root .leads-mini-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--leads-lavender); color: var(--leads-purple-dark); cursor: pointer; }
#leads-root .leads-mini-btn:hover { background: #ddd6fe; }
[data-theme="dark"] #leads-root .leads-mini-btn { background: #2a2342; color: #c4b5fd; }

/* drawer detail */
#leads-root .leads-d-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#leads-root .leads-d-actions,
#leads-root .leads-d-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}
#leads-root .leads-d-actions .btn {
    min-width: 0;
    min-height: 38px;
    justify-content: center;
    gap: 6px;
    padding-inline: 10px;
    white-space: nowrap;
}
#leads-root .leads-chip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 36px;
    border: 1px solid #e6e2f2;
    border-radius: 10px;
    padding: 7px 10px;
    background: #faf9ff;
    color: var(--leads-purple-dark);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}
#leads-root .leads-d-quick .leads-chip-btn--danger { grid-column: 1 / -1; }
#leads-root .leads-chip-btn:hover { background: var(--leads-lavender); border-color: #c4b5fd; }
#leads-root .leads-chip-btn .material-symbols-outlined { font-size: 1rem; }
#leads-root .leads-chip-btn--danger { color: #b91c1c; border-color: #fecaca; background: #fef5f5; }
[data-theme="dark"] #leads-root .leads-chip-btn { background: #262a3d; border-color: #3a3654; color: #c4b5fd; }
#leads-root .leads-d-sec { border-top: 1px solid #f1edf9; padding-top: 14px; }
[data-theme="dark"] #leads-root .leads-d-sec { border-color: #322c46; }
#leads-root .leads-d-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--leads-purple); }
#leads-root .leads-d-empty { color: var(--leads-muted); font-size: 0.84rem; margin: 0; }
#leads-root .leads-dl { display: grid; gap: 0; margin: 0; }
#leads-root .leads-dl-row {
    display: grid;
    grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 7px 0;
    border-bottom: 1px dashed #f1edf9;
    font-size: 0.86rem;
}
[data-theme="dark"] #leads-root .leads-dl-row { border-color: #2f2b45; }
#leads-root .leads-dl-row dt { color: var(--leads-muted); margin: 0; min-width: 0; }
#leads-root .leads-dl-row dd {
    margin: 0;
    min-width: 0;
    text-align: right;
    color: var(--leads-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}
[data-theme="dark"] #leads-root .leads-dl-row dd { color: #e8e7f2; }
#leads-root .leads-d-convert { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid #f1edf9; }
#leads-root .leads-d-convert .btn { width: 100%; justify-content: center; gap: 6px; }
#leads-root .leads-d-convert small { color: var(--leads-muted); font-size: 0.74rem; line-height: 1.4; }

/* timeline */
#leads-root .leads-tl { display: flex; flex-direction: column; gap: 2px; }
#leads-root .leads-tl-item { display: flex; gap: 11px; }
#leads-root .leads-tl-ic { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
#leads-root .leads-tl-ic .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--leads-lavender); color: var(--leads-purple-dark); font-size: 1.05rem; }
#leads-root .leads-tl-item:not(:last-child) .leads-tl-ic::after { content: ''; flex: 1; width: 2px; background: #ece8f5; margin: 3px 0; }
[data-theme="dark"] #leads-root .leads-tl-item:not(:last-child) .leads-tl-ic::after { background: #3a3654; }
#leads-root .leads-tl-body { padding-bottom: 14px; min-width: 0; }
#leads-root .leads-tl-t { font-size: 0.85rem; color: var(--leads-ink); }
[data-theme="dark"] #leads-root .leads-tl-t { color: #e8e7f2; }
#leads-root .leads-tl-t b { color: var(--leads-purple-dark); }
#leads-root .leads-tl-note { font-size: 0.82rem; color: var(--leads-muted); margin-top: 2px; }
#leads-root .leads-tl-time { font-size: 0.72rem; color: #94a3b8; margin-top: 2px; }

/* import workflow */
#leads-root .leads-import-source {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}
#leads-root .leads-import-field .leads-fl { margin-top: 0; }
#leads-root .leads-import-file {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1.5px dashed #c4b5fd;
    border-radius: 12px;
    background: #faf8ff;
    color: var(--leads-purple-dark);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 800;
    overflow: hidden;
}
#leads-root .leads-import-file input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
#leads-root .leads-import-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}
#leads-root .leads-import-map-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #ece8f5;
    border-radius: 12px;
    background: #fff;
}
#leads-root .leads-import-map-row span {
    min-width: 0;
}
#leads-root .leads-import-map-row b,
#leads-root .leads-import-map-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#leads-root .leads-import-map-row b {
    color: var(--leads-ink);
    font-size: 0.84rem;
}
#leads-root .leads-import-map-row small {
    margin-top: 2px;
    color: var(--leads-muted);
    font-size: 0.74rem;
}
#leads-root .leads-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
#leads-root .leads-import-actions .btn {
    gap: 7px;
}
#leads-root .leads-import-actions .form-control {
    min-width: min(100%, 260px);
}
#leads-root .leads-import-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 12px;
}
#leads-root .leads-import-table tbody tr {
    cursor: default;
}

/* modal + forms */
.leads-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(15, 23, 42, 0.55); font-family: "Poppins", system-ui, sans-serif; }
.leads-modal-card { width: min(560px, 96vw); max-height: 92vh; overflow: auto; background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 24px 60px rgba(34, 12, 71, 0.32); }
[data-theme="dark"] .leads-modal-card { background: #1f2233; color: #e7e7ee; }
.leads-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.leads-modal-head h3 { margin: 0; font-size: 1.12rem; color: #1e1b2e; }
[data-theme="dark"] .leads-modal-head h3 { color: #f1f0fb; }
.leads-modal-x { display: inline-flex; border: 0; border-radius: 8px; padding: 5px; background: transparent; color: #64748b; cursor: pointer; }
.leads-modal-x:hover { background: #f1f5f9; color: #0f172a; }
.leads-form .leads-fl { display: flex; flex-direction: column; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8b93a3; margin: 11px 0 5px; }
.leads-form .leads-fl-hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: #94a3b8; margin-top: 2px; }
.leads-form .leads-in { width: 100%; padding: 10px 12px; border: 1.5px solid #e6e2f2; border-radius: 10px; font-size: 0.9rem; font-family: inherit; background: #fcfbff; color: #1e293b; }
.leads-form .leads-in:focus { outline: none; border-color: #a855f7; }
[data-theme="dark"] .leads-form .leads-in { background: #262a3d; border-color: #3a3654; color: #e8e7f2; }
.leads-form textarea.leads-in { resize: vertical; }
.leads-form .leads-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.leads-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 520px) { .leads-form .leads-grid2 { grid-template-columns: 1fr; } }

/* ===== Leads: consent, route/modality, email logs, filters (migration 115) ===== */
#leads-root .leads-consent, .leads-drawer .leads-consent {
    display: inline-flex; align-items: center; border-radius: 99px; padding: 2px 9px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
#leads-root .leads-consent--on, .leads-drawer .leads-consent--on { background: #dcfce7; color: #166534; }
#leads-root .leads-consent--off, .leads-drawer .leads-consent--off { background: #eef0f4; color: #64748b; }
#leads-root .leads-consent--bad, .leads-drawer .leads-consent--bad { background: #fee2e2; color: #b91c1c; }

#leads-root .leads-lead-route, .leads-drawer .leads-d-route { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.leads-drawer .leads-d-route { margin: 8px 0 4px; }
#leads-root .leads-route-chip, .leads-drawer .leads-route-chip {
    display: inline-flex; align-items: center; border-radius: 8px; padding: 3px 9px;
    font-size: 0.72rem; font-weight: 700; background: var(--leads-lavender, #f5f3ff);
    color: var(--leads-purple-dark, #5b21b6); border: 1px solid var(--leads-line, #e8e2f7);
}
#leads-root .leads-route-chip--soft, .leads-drawer .leads-route-chip--soft { background: #fff; color: #64748b; }

#leads-root .leads-filter-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--leads-muted, #64748b); font-weight: 600; white-space: nowrap; }
#leads-root .leads-filter-check input { width: 15px; height: 15px; accent-color: var(--leads-purple, #7c3aed); }

.leads-drawer .leads-consent-note, #leads-modal .leads-consent-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; padding: 10px 12px;
    border-radius: 10px; background: #fff7ed; color: #9a3412; font-size: 0.82rem; line-height: 1.45;
}
.leads-drawer .leads-consent-note .material-symbols-outlined, #leads-modal .leads-consent-note .material-symbols-outlined { font-size: 18px; }

.leads-drawer .leads-test-tag { display: inline-block; border-radius: 6px; padding: 1px 6px; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; background: #fef9c3; color: #854d0e; }
.leads-drawer .leads-fu-err { color: #b91c1c; }

#leads-root .leads-badge--mail-sent, .leads-drawer .leads-badge--mail-sent,
#leads-root .leads-badge--mail-delivered, .leads-drawer .leads-badge--mail-delivered { background: #e0f2fe; color: #075985; }
#leads-root .leads-badge--mail-opened, .leads-drawer .leads-badge--mail-opened,
#leads-root .leads-badge--mail-clicked, .leads-drawer .leads-badge--mail-clicked { background: #dcfce7; color: #166534; }
#leads-root .leads-badge--mail-bounced, .leads-drawer .leads-badge--mail-bounced,
#leads-root .leads-badge--mail-complained, .leads-drawer .leads-badge--mail-complained,
#leads-root .leads-badge--mail-failed, .leads-drawer .leads-badge--mail-failed { background: #fee2e2; color: #b91c1c; }

.leads-form .leads-utm, #leads-modal .leads-utm { margin-top: 12px; border: 1px solid #e6e2f2; border-radius: 10px; padding: 2px 12px 10px; background: #fcfbff; }
.leads-form .leads-utm summary { cursor: pointer; font-size: 0.78rem; font-weight: 700; color: #64748b; padding: 9px 0; }
[data-theme="dark"] .leads-form .leads-utm { background: #262a3d; border-color: #3a3654; }
#leads-root .leads-td-contact, .leads-drawer .leads-td-contact { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ===== Leads: analytics bars + brand PDFs (Fases E/F) ===== */
#leads-root .leads-bars { display: flex; flex-direction: column; gap: 12px; }
#leads-root .leads-bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.84rem; color: var(--leads-ink, #1e1b2e); margin-bottom: 5px; }
#leads-root .leads-bar-top b { color: var(--leads-purple-dark, #5b21b6); font-weight: 800; }
#leads-root .leads-bar-track { height: 8px; border-radius: 99px; background: #eef0f6; overflow: hidden; }
#leads-root .leads-bar-track span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7c3aed, #a855f7); }
[data-theme="dark"] #leads-root .leads-bar-track { background: #2b2f45; }
#leads-root .leads-analytics-note { display: flex; align-items: center; gap: 8px; margin: 14px 2px 0; font-size: 0.8rem; color: var(--leads-muted, #64748b); }
#leads-root .leads-analytics-note .material-symbols-outlined { font-size: 18px; }

.leads-drawer .leads-d-hint { font-size: 0.8rem; color: #6b7180; margin: 0 0 10px; line-height: 1.45; }
.leads-drawer .leads-pdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.leads-drawer .leads-pdf-btn { display: flex; align-items: center; gap: 8px; text-align: left; padding: 11px 12px; border: 1.5px solid #e6e2f2; border-radius: 12px; background: #fcfbff; color: #1e293b; cursor: pointer; font-size: 0.82rem; font-weight: 600; position: relative; }
.leads-drawer .leads-pdf-btn:hover { border-color: #a855f7; background: #f7f4ff; }
.leads-drawer .leads-pdf-btn .material-symbols-outlined { color: #7c3aed; font-size: 20px; flex: 0 0 auto; }
.leads-drawer .leads-pdf-btn-t { flex: 1 1 auto; }
.leads-drawer .leads-pdf-btn.is-rec { border-color: #7c3aed; background: #f5f3ff; }
.leads-drawer .leads-pdf-btn.is-rec em { position: absolute; top: -8px; right: 8px; font-style: normal; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; background: #7c3aed; color: #fff; padding: 2px 7px; border-radius: 99px; }
[data-theme="dark"] .leads-drawer .leads-pdf-btn { background: #262a3d; border-color: #3a3654; color: #e8e7f2; }
@media (max-width: 560px) { .leads-drawer .leads-pdf-grid { grid-template-columns: 1fr; } }

/* Chart.js containers in Métricas (need an explicit height for maintainAspectRatio:false) */
#leads-root .leads-chart-wrap { position: relative; height: 240px; width: 100%; }
#leads-root .leads-chart-wrap canvas { max-height: 240px; }