:root { 
            --bg-mac: #f0f9ff; --text-mac: #0f172a; --blue-mac: #0ea5e9; --glass-bg: rgba(255, 255, 255, 0.45);
            --glass-border: rgba(255, 255, 255, 0.6); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
            --glass-shadow: 0 8px 32px rgba(14, 165, 233, 0.1); --sidebar-bg: rgba(240, 249, 255, 0.5);
        }
        body.dark { 
            --bg-mac: #082f49; --text-mac: #f8fafc; --glass-bg: rgba(15, 23, 42, 0.55);
            --glass-border: rgba(255, 255, 255, 0.08); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
            --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); --sidebar-bg: rgba(8, 47, 73, 0.6);
        }
        body { 
            background-color: var(--bg-mac);
            background-image: linear-gradient(135deg, var(--bg-mac) 0%, rgba(255,255,255,0.8) 100%);
            color: var(--text-mac); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
            overflow: hidden; margin: 0; padding: 0;
            transition: background-color 0.4s, background-image 0.4s, color 0.4s;
            -webkit-font-smoothing: antialiased;
        }
        body.dark { background-image: linear-gradient(135deg, var(--bg-mac) 0%, #020617 100%); }
        .glass-panel {
            background-color: var(--glass-bg); backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow), var(--glass-highlight);
            border-radius: 24px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .glass-panel:hover {
            box-shadow: 0 16px 48px rgba(14, 165, 233, 0.15), var(--glass-highlight);
            transform: translateY(-2px);
        }
        body.dark .glass-panel:hover {
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), var(--glass-highlight);
            transform: translateY(-2px);
        }
        .glass-sidebar {
            background-color: var(--sidebar-bg);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            border-right: 1px solid var(--glass-border);
        }
        .custom-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { 
            background: rgba(14, 165, 233, 0.25); border-radius: 9999px; border: 3px solid transparent;
            background-clip: padding-box;
        }
        body.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }
        .custom-scrollbar:hover::-webkit-scrollbar-thumb { background: rgba(14, 165, 233, 0.6); border-width: 2px; }

        .modal-overlay {
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0, 0, 0, 0.25);
            display: flex; align-items: center; justify-content: center;
            padding: 1.5rem;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            animation: fadeInOverlay 0.3s ease-out forwards;
        }
        .modal-box {
            background: var(--glass-bg);
            backdrop-filter: blur(50px) saturate(200%);
            -webkit-backdrop-filter: blur(50px) saturate(200%);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-highlight), 0 25px 50px -12px rgba(14, 165, 233, 0.25);
            width: 100%; max-width: 700px;
            border-radius: 32px;
            animation: appleSpringModal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            max-height: 90vh;
            display: flex; flex-direction: column; overflow: hidden;
            position: relative;
        }
        body.dark .modal-box { box-shadow: var(--glass-highlight), 0 25px 50px -12px rgba(0, 0, 0, 0.7); }
        button { transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s, opacity 0.2s, border-color 0.2s, color 0.2s; cursor: pointer; }
        button:active { transform: scale(0.95); }

        @keyframes fadeInOverlay { 0% { opacity: 0; background: rgba(0,0,0,0); } 100% { opacity: 1; background: rgba(0,0,0,0.25); } }
        @keyframes appleSpringModal { 0% { opacity: 0; transform: scale(0.85) translateY(30px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
        @keyframes fadeInRouter { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

        .toast { animation: appleSpringModal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
        .fade-enter { animation: fadeInRouter 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

        input, textarea, select {
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid var(--glass-border);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
            transition: all 0.3s ease;
            color: var(--text-mac);
            font-family: inherit;
            font-size: 16px;
        }
        input:focus, textarea:focus, select:focus {
            background: rgba(255, 255, 255, 0.95);
            outline: none;
            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2), inset 0 1px 2px rgba(0,0,0,0.02);
            border-color: var(--blue-mac);
        }
        body.dark input, body.dark textarea, body.dark select { 
            background: rgba(0, 0, 0, 0.3); color: #f8fafc; border-color: rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
        }
        body.dark input:focus, body.dark textarea:focus, body.dark select:focus { 
            background: rgba(0, 0, 0, 0.7); border-color: #0ea5e9;
            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.3), inset 0 1px 2px rgba(0,0,0,0.2);
        }

        table { width: 100%; border-collapse: separate; border-spacing: 0; }
        th { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; text-align: left; }

        @media print {
            .no-print, aside, button, input, textarea, select, .toast, .modal-overlay, .hamburger-btn { display: none !important; }
            body { overflow: visible !important; background: white !important; background-image: none !important; color: black !important; }
            .glass-panel { border: 1px solid #ccc !important; box-shadow: none !important; background: transparent !important; backdrop-filter: none !important; }
            #main-scroll-container { overflow: visible !important; padding: 0 !important; }
            #app-layout { display: block !important; height: auto !important; }
            main { display: block !important; }
            .text-emerald-500 { color: #10b981 !important; }
            .text-rose-500 { color: #f43f5e !important; }
            .text-amber-500 { color: #f59e0b !important; }
        }

        @media (max-width: 768px) {
            #sidebar-container {
                position: fixed; left: -280px; top: 0; bottom: 0; width: 280px; z-index: 1000;
                transition: left 0.3s ease;
                background: var(--sidebar-bg); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
                border-right: 1px solid var(--glass-border); box-shadow: 4px 0 30px rgba(0,0,0,0.1);
            }
            #sidebar-container.open { left: 0; }
            #sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 999; backdrop-filter: blur(4px); }
            #sidebar-backdrop.active { display: block; }
            .hamburger-btn { display: flex !important; }
            .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        }
        .hamburger-btn {
            display: none;
            position: fixed; top: 12px; left: 12px; z-index: 1100;
            background: var(--glass-bg); backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border); border-radius: 16px;
            padding: 10px 12px; box-shadow: var(--glass-shadow);
            color: var(--text-mac); font-size: 1.5rem; cursor: pointer;
        }
        .hamburger-btn:hover { background: rgba(255,255,255,0.8); }
        body.dark .hamburger-btn { background: rgba(15,23,42,0.7); color: #f8fafc; }

        .help-tip {
            position: relative;
            display: inline-block;
            cursor: help;
        }
        .help-tip .help-text {
            visibility: hidden;
            width: 260px;
            background: #1e293b;
            color: #f8fafc;
            text-align: left;
            border-radius: 12px;
            padding: 12px 16px;
            position: absolute;
            z-index: 100;
            bottom: 130%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.8rem;
            font-weight: 500;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            border: 1px solid rgba(255,255,255,0.1);
            backdrop-filter: blur(8px);
        }
        .help-tip .help-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -6px;
            border-width: 6px;
            border-style: solid;
            border-color: #1e293b transparent transparent transparent;
        }
        .help-tip:hover .help-text {
            visibility: visible;
            opacity: 1;
        }
        body.dark .help-tip .help-text {
            background: #2d3748;
            border-color: #4a5568;
        }
        body.dark .help-tip .help-text::after {
            border-color: #2d3748 transparent transparent transparent;
        }
    
        /* ===== DocenteOS V13 · Consolidated Teacher Suite ===== */
        :root{
            --ios-glass: rgba(255,255,255,.34);
            --ios-glass-strong: rgba(255,255,255,.52);
            --ios-stroke: rgba(255,255,255,.72);
            --ios-shadow: 0 18px 55px rgba(30,64,175,.13), inset 0 1px 0 rgba(255,255,255,.82);
        }
        body::before, body::after{content:"";position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(10px)}
        body::before{width:46vw;height:46vw;left:-14vw;top:-18vw;background:radial-gradient(circle,rgba(56,189,248,.26),transparent 68%);animation:ambientFloat 16s ease-in-out infinite alternate}
        body::after{width:48vw;height:48vw;right:-15vw;bottom:-20vw;background:radial-gradient(circle,rgba(167,139,250,.20),transparent 68%);animation:ambientFloat 20s ease-in-out infinite alternate-reverse}
        @keyframes ambientFloat{to{transform:translate3d(5vw,3vh,0) scale(1.08)}}
        .glass-panel,.modal-box,.glass-sidebar,.ios-surface{
            background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(255,255,255,.16)) !important;
            border:1px solid var(--ios-stroke) !important;
            box-shadow:var(--ios-shadow) !important;
            backdrop-filter:blur(34px) saturate(190%) !important;
            -webkit-backdrop-filter:blur(34px) saturate(190%) !important;
            position:relative;
        }
        .glass-panel::before,.ios-surface::before{
            content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
            background:linear-gradient(120deg,rgba(255,255,255,.48),transparent 24%,transparent 72%,rgba(255,255,255,.16));
            opacity:.42;
        }
        body.dark .glass-panel,body.dark .modal-box,body.dark .glass-sidebar,body.dark .ios-surface{
            background:linear-gradient(145deg,rgba(30,41,59,.72),rgba(2,6,23,.42)) !important;
            border-color:rgba(255,255,255,.12) !important;
            box-shadow:0 20px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.10) !important;
        }
        .ios-press{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease}
        .ios-press:active{transform:scale(.965)!important}
        .teacher-timeline{position:relative;padding-left:24px}.teacher-timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(#0ea5e9,#a78bfa);opacity:.32}.teacher-dot{position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%;background:#0ea5e9;border:4px solid rgba(255,255,255,.9);box-shadow:0 0 0 2px rgba(14,165,233,.18)}
        .grade-sheet input{min-width:72px}
        .schedule-now{box-shadow:0 0 0 3px rgba(14,165,233,.14),0 18px 45px rgba(14,165,233,.18)!important}
        .floating-save{position:fixed;right:22px;bottom:22px;z-index:9000;padding:9px 14px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:rgba(15,23,42,.78);color:white;backdrop-filter:blur(20px);opacity:.88}
        @media(max-width:768px){.floating-save{right:12px;bottom:12px}.mobile-sheet{border-radius:30px 30px 0 0!important;align-self:end}.modal-overlay{align-items:flex-end!important;padding:0!important}}
        @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

    
        /* ===== V11 visual consolidation ===== */
        .static-glass:hover{transform:none!important;box-shadow:var(--ios-shadow)!important}
        .interactive-card{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background .2s ease}
        .interactive-card:hover{transform:translateY(-2px)}
        table.glass-panel:hover,.table-responsive.glass-panel:hover{transform:none!important}
        #content-area h1,#content-area h2,#content-area h3{letter-spacing:-.025em}
        #content-area p,#content-area td,#content-area label{font-weight:500}
        .glass-panel{transition:box-shadow .22s ease,border-color .22s ease,background .22s ease}
        @media(pointer:fine){.glass-panel:not(.static-glass):hover{transform:none}}

        /* ===== V12 responsive simple ===== */
        :root{--mobile-nav-h:76px;--content-max:1480px}
        .mobile-bottom-nav{display:none}
        .touch-button{min-height:44px;min-width:44px}
        .simple-card{background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.56);border-radius:22px;backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%)}
        body.dark .simple-card{background:rgba(15,23,42,.44);border-color:rgba(255,255,255,.09)}
        .mobile-page-title{font-size:clamp(1.9rem,8vw,2.55rem);line-height:1.02;font-weight:800;letter-spacing:-.045em}
        .mobile-section-title{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
        .mobile-grade-input{width:74px;height:48px;text-align:center;font-size:1rem;font-weight:800;border-radius:14px!important}
        .mobile-status-btn{width:46px;height:46px;border-radius:14px;font-weight:800}
        @media(max-width:900px){
            html,body{overscroll-behavior:none}
            #app-layout{height:100dvh!important}
            #sidebar-container,#sidebar-backdrop,.hamburger-btn{display:none!important}
            #main-scroll-container{padding:18px 14px calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 24px)!important;scroll-padding-bottom:calc(var(--mobile-nav-h) + 24px)}
            #content-area{width:100%;max-width:100%;overflow-x:hidden}
            .mobile-bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));height:68px;z-index:9500;padding:6px;border-radius:24px;background:rgba(248,250,252,.72);border:1px solid rgba(255,255,255,.78);box-shadow:0 14px 45px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%)}
            body.dark .mobile-bottom-nav{background:rgba(15,23,42,.78);border-color:rgba(255,255,255,.11)}
            .mobile-nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:18px;font-size:10px;font-weight:700;color:#64748b;min-width:0;padding:5px 2px}
            .mobile-nav-btn svg{width:21px;height:21px}.mobile-nav-btn.active{color:#0284c7;background:rgba(14,165,233,.12)}
            body.dark .mobile-nav-btn.active{color:#7dd3fc;background:rgba(14,165,233,.14)}
            .glass-panel{border-radius:22px!important}
            .modal-overlay{align-items:flex-end!important;padding:0!important}
            .modal-box,.mobile-sheet{width:100%!important;max-width:none!important;border-radius:28px 28px 0 0!important;max-height:92dvh!important;padding-bottom:env(safe-area-inset-bottom)}
            input,select,textarea{font-size:16px!important}button,a{touch-action:manipulation}
            h1.text-5xl,h1.text-6xl{font-size:2.35rem!important;line-height:1!important}.floating-save{display:none!important}
            #toast-container{bottom:calc(var(--mobile-nav-h) + 18px + env(safe-area-inset-bottom))!important}
        }
        @media(min-width:901px){#main-scroll-container{padding:28px clamp(24px,3vw,48px)!important}}
        @media(min-width:901px) and (max-width:1180px){.glass-sidebar{width:250px!important;padding:20px!important}#main-scroll-container{padding:24px!important}}
        @media(min-width:1600px){#content-area>div{max-width:var(--content-max)!important}}
        @media(max-width:430px){#main-scroll-container{padding-left:12px!important;padding-right:12px!important}.mobile-bottom-nav{left:8px;right:8px}.mobile-nav-btn{font-size:9px}.mobile-page-title{font-size:2.15rem}}

        /* ===== V13: calificaciones, tema y motion ===== */
        @keyframes viewEnter{from{opacity:0;transform:translate3d(10px,0,0) scale(.995)}to{opacity:1;transform:none}}
        @keyframes sheetEnter{from{opacity:0;transform:translate3d(0,18px,0) scale(.985)}to{opacity:1;transform:none}}
        @keyframes mobileSheetEnter{from{transform:translate3d(0,100%,0)}to{transform:none}}
        @keyframes overlayIn{from{opacity:0}to{opacity:1}}
        .fade-enter{animation:viewEnter .24s cubic-bezier(.22,.61,.36,1) both!important}
        .modal-overlay{animation:overlayIn .2s ease-out both!important}
        .modal-box{animation:sheetEnter .26s cubic-bezier(.22,.61,.36,1) both!important}
        .modal-closing{opacity:0!important;transition:opacity .2s ease!important}.modal-closing .modal-box{transform:translateY(12px) scale(.985);opacity:0;transition:.2s ease!important}
        button:active{transform:scale(.98)!important}
        .grades-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:24px}.grades-header h1{font-size:clamp(2.4rem,4vw,4.2rem);line-height:.95;font-weight:800;letter-spacing:-.055em}.grades-header p{margin-top:8px;color:#64748b;font-weight:600}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:#64748b;font-weight:800;margin-bottom:6px}
        .trajectory-legend,.mobile-trajectory-legend{display:flex;gap:8px;flex-wrap:wrap}.trajectory-legend span,.mobile-trajectory-legend span,.trajectory-badge{padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}.tea{background:rgba(2,132,199,.12);color:#0284c7}.tep{background:rgba(16,185,129,.12);color:#059669}.ted{background:rgba(244,63,94,.12);color:#e11d48}.trajectory-badge.neutral{background:rgba(100,116,139,.1);color:#64748b}
        .grades-toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:14px}.search-field{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.5);border:1px solid var(--glass-border);border-radius:16px;padding:0 14px;min-width:250px}.search-field svg{width:17px;color:#94a3b8}.search-field input{background:transparent!important;box-shadow:none!important;border:0!important;padding:12px 0!important;width:100%}.month-strip{display:flex;gap:6px;overflow-x:auto;padding:5px}.month-chip{padding:9px 13px;border-radius:12px;font-size:11px;font-weight:800;text-transform:uppercase;color:#64748b;white-space:nowrap}.month-chip.active{background:#0ea5e9;color:white;box-shadow:0 7px 18px rgba(14,165,233,.22)}
        .grades-shell{overflow:hidden}.grades-scroll{overflow:auto;max-height:calc(100dvh - 275px)}.grades-table{width:100%;border-collapse:separate;border-spacing:0}.grades-table th{position:sticky;top:0;z-index:20;padding:15px;text-align:left;background:rgba(248,250,252,.9);backdrop-filter:blur(18px);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#64748b}.dark .grades-table th{background:rgba(15,23,42,.92)}.grades-table td{padding:15px;border-top:1px solid rgba(148,163,184,.16);vertical-align:middle}.student-sticky{position:sticky;left:0;z-index:10;background:rgba(248,250,252,.84);backdrop-filter:blur(16px);min-width:210px}.dark .student-sticky{background:rgba(15,23,42,.88)}.student-name-btn{font-weight:800;text-align:left}.grade-records{display:flex;gap:9px;flex-wrap:wrap}.grade-record{width:150px;min-height:92px;text-align:left;padding:12px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.45)}.dark .grade-record{background:rgba(30,41,59,.5)}.grade-record-type,.record-kind{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#64748b;font-weight:800}.grade-record-title{font-size:12px;font-weight:800;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grade-score{font-size:27px;font-weight:850;margin-top:8px}.delivery-badge{display:inline-flex;padding:6px 9px;border-radius:10px;font-size:10px;font-weight:800;margin-top:10px}.delivery-badge.done{background:rgba(16,185,129,.12);color:#059669}.delivery-badge.missing{background:rgba(244,63,94,.12);color:#e11d48}.avg-cell{text-align:center;min-width:112px}.avg-number{font-size:25px;font-weight:850}.add-grade-btn{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#0ea5e9;color:white;box-shadow:0 8px 22px rgba(14,165,233,.24)}.add-grade-btn svg{width:20px}.empty-state{padding:60px!important;text-align:center;color:#64748b}
        .modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid rgba(148,163,184,.16)}.modal-head h2{font-size:24px;font-weight:850;letter-spacing:-.03em}.modal-close{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.38)}.modal-body{padding:24px;overflow:auto}.field-group{margin-bottom:18px}.field-group>label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#64748b;margin-bottom:8px}.field-group input,.field-group select{width:100%;padding:14px;border-radius:15px}.delivery-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:rgba(148,163,184,.1);padding:5px;border-radius:17px}.delivery-toggle button{padding:12px;border-radius:13px;font-weight:800;color:#64748b}.delivery-toggle .delivered{background:#10b981;color:white}.delivery-toggle .missing{background:#f43f5e;color:white}.score-input-wrap{display:flex;align-items:center;gap:10px;max-width:250px}.score-input-wrap input{font-size:28px;font-weight:850;text-align:center}.score-input-wrap span{font-weight:800;color:#64748b}.field-help{font-size:11px;color:#64748b;margin-top:7px}.modal-actions{display:flex;gap:10px;padding-top:8px}.primary-action{flex:1;padding:14px;background:#0ea5e9;color:white;border-radius:15px;font-weight:800}.danger-icon{width:50px;border-radius:15px;color:#e11d48;background:rgba(244,63,94,.08)}
        .theme-sheet{max-width:520px}.theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:22px}.theme-option{min-height:105px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:rgba(255,255,255,.34);border:1px solid var(--glass-border);font-weight:800}.theme-option svg{width:25px}.theme-option.active{background:rgba(14,165,233,.12);color:#0284c7;border-color:rgba(14,165,233,.35)}.mobile-theme-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.42);border:1px solid var(--glass-border);flex:none}.mobile-theme-inline{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}.mobile-theme-inline button{display:flex;gap:5px;align-items:center;padding:6px 8px;border-radius:10px;background:rgba(148,163,184,.1);font-size:10px;font-weight:800}.mobile-theme-inline svg{width:13px}
        .mobile-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}.mobile-grade-student{padding:15px}.mobile-grade-student-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.mobile-grade-records{display:grid;gap:7px;margin-top:11px}.mobile-record-row{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:11px;border-radius:14px;background:rgba(255,255,255,.32);border:1px solid rgba(148,163,184,.12)}.mobile-record-row b{display:block;font-size:13px;margin-top:2px}.mobile-score{font-size:23px;font-weight:850}.mobile-trajectory-legend{margin:0 0 12px 2px}
        @media(max-width:900px){.modal-box{animation:mobileSheetEnter .3s cubic-bezier(.22,.61,.36,1) both!important}.grades-header,.grades-toolbar{display:block}.search-field{min-width:0}.theme-options{padding:16px}.grade-modal .modal-body{padding:18px}.trajectory-badge{padding:4px 7px;font-size:9px}}
        @media(min-width:901px) and (max-width:1180px){.glass-sidebar{width:92px!important;padding:16px 10px!important}.sidebar-brand-copy,.sidebar-course-tools,.sidebar-label,.sidebar-section-label{display:none!important}.glass-sidebar nav button{justify-content:center!important;padding-left:10px!important;padding-right:10px!important}.glass-sidebar nav button svg{width:23px;height:23px}.glass-sidebar details summary{justify-content:center!important}.glass-sidebar details summary span{display:none}.glass-sidebar details>div{display:block!important}}
        @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}



/* ===== DocenteOS 1.0 RC1 · login, cloud, onboarding ===== */
.auth-gate{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 20% 10%,rgba(56,189,248,.2),transparent 36%),radial-gradient(circle at 90% 90%,rgba(139,92,246,.14),transparent 34%),rgba(241,245,249,.82);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%)}
.dark .auth-gate{background:radial-gradient(circle at 20% 10%,rgba(14,165,233,.16),transparent 36%),rgba(2,6,23,.86)}.auth-gate.hidden{display:none!important}.auth-card{width:min(520px,100%);padding:34px;border-radius:32px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.85);box-shadow:0 35px 100px rgba(15,23,42,.22),inset 0 1px rgba(255,255,255,.9);text-align:center}.dark .auth-card{background:rgba(15,23,42,.8);border-color:rgba(255,255,255,.1)}.auth-logo{width:76px;height:76px;margin:0 auto 18px;border-radius:22px;overflow:hidden;box-shadow:0 15px 35px rgba(14,165,233,.25)}.auth-logo img{width:100%;height:100%}.auth-eyebrow{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#0ea5e9}.auth-card h1{font-size:clamp(28px,6vw,40px);line-height:1.02;letter-spacing:-.045em;font-weight:850;margin:8px 0 12px}.auth-copy{color:#64748b;line-height:1.55;margin:0 auto 18px;max-width:430px}.auth-security{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:13px 14px;border-radius:16px;background:rgba(14,165,233,.08);color:#475569;font-size:12px;line-height:1.45;margin-bottom:16px}.dark .auth-security{color:#cbd5e1}.auth-security svg{width:19px;flex:none;color:#0284c7}.google-login-btn,.offline-login-btn{width:100%;min-height:52px;border-radius:16px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:11px}.google-login-btn{background:#fff;color:#1f2937;border:1px solid #dbe2ea;box-shadow:0 8px 20px rgba(15,23,42,.08)}.google-login-btn:disabled{opacity:.55}.google-g{font-size:20px;font-weight:900;color:#4285f4}.offline-login-btn{margin-top:9px;background:rgba(148,163,184,.1);color:#64748b}.auth-status{min-height:20px;margin-top:14px;font-size:12px;color:#64748b}.auth-status[data-kind="error"]{color:#e11d48}.auth-status[data-kind="success"]{color:#059669}.auth-foot{font-size:10px;color:#94a3b8;margin-top:10px}.google-account-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:17px;background:rgba(255,255,255,.38);border:1px solid rgba(148,163,184,.14)}.google-account-row.muted{color:#64748b}.google-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(14,165,233,.12);flex:none}.google-avatar img{width:100%;height:100%;object-fit:cover}.google-account-row b,.google-account-row span{display:block}.google-account-row span{font-size:11px;color:#64748b;margin-top:2px}.cloud-status-strip{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px;padding:10px 12px;border-radius:14px;background:rgba(148,163,184,.08);font-size:11px;color:#64748b}.cloud-status-strip span{font-weight:800}.cloud-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 14px;border-radius:13px;background:rgba(255,255,255,.45);border:1px solid rgba(148,163,184,.18);font-weight:800;font-size:12px}.dark .cloud-action{background:rgba(30,41,59,.6)}.cloud-action.primary{background:#0ea5e9;color:#fff;border-color:#0ea5e9}.cloud-action.secondary{background:#6366f1;color:#fff}.cloud-action.danger{color:#e11d48}.cloud-action svg{width:16px;height:16px}.cloud-backup-list{max-height:60vh;overflow:auto}.cloud-backup-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid rgba(148,163,184,.14)}.cloud-backup-row b,.cloud-backup-row small{display:block}.cloud-backup-row small{font-size:10px;color:#64748b;margin-top:3px}.cloud-backup-row button{padding:9px 12px;border-radius:11px;background:#0ea5e9;color:#fff;font-size:11px;font-weight:800}.onboarding-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.onboarding-grid>div{padding:18px;border-radius:18px;background:rgba(255,255,255,.35);border:1px solid rgba(148,163,184,.13)}.onboarding-grid span{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#0ea5e9;color:#fff;font-weight:900;margin-bottom:12px}.onboarding-grid b{display:block}.onboarding-grid p{font-size:12px;color:#64748b;margin-top:5px}.legal-copy{font-size:14px;line-height:1.65;color:#475569}.dark .legal-copy{color:#cbd5e1}.legal-copy p+p{margin-top:14px}.boot-error{max-width:480px;margin:auto;padding:30px;border-radius:24px;background:white;box-shadow:0 20px 60px rgba(15,23,42,.15);text-align:center;color:#334155}.boot-error h2{font-size:24px;font-weight:850}.boot-error p{margin:10px 0;color:#e11d48}.boot-error button{padding:11px 18px;background:#0ea5e9;color:#fff;border-radius:13px;font-weight:800}.boot-error small{display:block;margin-top:12px;color:#64748b}.field-label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;color:#64748b;margin-bottom:8px}
@media(max-width:640px){.auth-gate{padding:12px;align-items:end}.auth-card{padding:26px 20px 24px;border-radius:30px 30px 18px 18px}.onboarding-grid{grid-template-columns:1fr}.cloud-status-strip{display:block}.cloud-status-strip small{display:block;margin-top:4px}}