:root{--navy:#102b46;--navy2:#17476b;--blue:#1769aa;--blue2:#eaf4fc;--teal:#148a8a;--ink:#1b2e40;--muted:#617487;--line:#d8e2ec;--paper:#fff;--bg:#f3f6fa;--red:#b42332;--redbg:#fff0f1;--gold:#956500;--goldbg:#fff7e3;--green:#12764b;--greenbg:#e9f8ef;--shadow:0 8px 24px rgba(16,43,70,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 "Segoe UI",Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;border-radius:9px;padding:10px 13px;font-weight:650;transition:transform .08s ease,filter .15s ease}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #83c4fc;outline-offset:1px}.primary{background:var(--blue);color:#fff}.secondary{background:#edf3f8;color:var(--navy);border:1px solid var(--line)}.ghost{background:transparent;color:var(--blue);padding:7px 9px}.danger{background:#fff0f1;color:var(--red);border:1px solid #f1c5ca}.small{padding:6px 8px;font-size:12px;border-radius:7px}.muted{color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:800;color:#78dce3}.app-header{background:linear-gradient(115deg,#102b46 0%,#17476b 64%,#0e737c 100%);color:#fff;padding:22px clamp(16px,4vw,48px) 24px}.topline{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1540px;margin:0 auto}.brand{display:flex;align-items:center;gap:13px}.brand-mark{height:44px;width:44px;border:1px solid rgba(255,255,255,.35);border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:20px;font-weight:900;letter-spacing:-1px}.brand h1{font-size:21px;margin:1px 0 0;font-weight:760;letter-spacing:-.035em}.brand p{font-size:12px;margin:2px 0 0;color:#cfe3f4}.save-state{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:7px 10px;border-radius:999px;font-size:11px;color:#e8f8fa;white-space:nowrap}.save-dot{height:7px;width:7px;border-radius:50%;background:#72e1a2;box-shadow:0 0 0 3px rgba(114,225,162,.14)}.hero{max-width:1540px;margin:25px auto 0;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.hero h2{margin:3px 0 8px;font-size:clamp(22px,3vw,30px);line-height:1.14;letter-spacing:-.04em}.hero p{margin:0;color:#d2e5f5;max-width:660px;font-size:13px}.hero-note{border:1px solid rgba(255,255,255,.24);background:rgba(7,30,52,.22);border-radius:12px;padding:11px 14px;min-width:220px}.hero-note strong{display:block;font-size:12px}.hero-note span{display:block;font-size:11px;color:#d4e5f3;margin-top:4px}.container{max-width:1540px;margin:22px auto 50px;padding:0 clamp(12px,3.2vw,44px)}.toolbar{display:grid;grid-template-columns:minmax(160px,1.2fr) minmax(135px,.8fr) minmax(180px,1fr) auto;gap:12px;align-items:end;background:var(--paper);padding:15px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.field{display:flex;flex-direction:column;gap:5px;min-width:0}.field label{font-size:11px;font-weight:750;color:var(--muted)}.field input,.field select,.session-form input,.session-form select,.manage-panel input,.manage-panel textarea,.note-editor input,.note-editor textarea{border:1px solid #cbd8e4;border-radius:8px;background:#fff;color:var(--ink);padding:9px 10px;min-width:0;width:100%}.field input:focus,.field select:focus,.session-form input:focus,.session-form select:focus,.manage-panel input:focus,.manage-panel textarea:focus,.note-editor input:focus,.note-editor textarea:focus{border-color:#62aee9;outline:2px solid #d5edff}.toolbar-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}.hint-row{margin:10px 2px 17px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}.hint-row strong{color:var(--navy)}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 4px 14px rgba(16,43,70,.035)}.stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;color:var(--muted)}.stat-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--blue2);color:var(--blue);font-size:15px}.stat-value{font-size:25px;font-weight:800;letter-spacing:-.035em;margin-top:7px;color:var(--navy);font-variant-numeric:tabular-nums}.stat-sub{font-size:10px;color:var(--muted);margin-top:2px}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:17px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line)}.panel-heading h3{font-size:15px;margin:0;color:var(--navy);letter-spacing:-.015em}.panel-heading p{font-size:11px;margin:4px 0 0;color:var(--muted)}.session-form{padding:14px 18px;display:grid;grid-template-columns:145px minmax(170px,1.6fr) 150px 130px auto;gap:10px;align-items:end;background:#f9fbfd;border-bottom:1px solid var(--line)}.session-form .field label{font-size:10px}.session-form .field input,.session-form .field select{padding:8px 9px;font-size:12px}.session-form button{white-space:nowrap}.table-wrap{overflow:auto;max-height:65vh}.grade-table{border-collapse:separate;border-spacing:0;min-width:100%;width:max-content;font-size:12px}.grade-table th,.grade-table td{border-right:1px solid #e1e8ef;border-bottom:1px solid #e1e8ef;padding:7px 8px;text-align:center;background:#fff}.grade-table thead th{background:#f1f6fa;color:#30495e;font-size:10px;font-weight:800;vertical-align:top}.grade-table th:first-child,.grade-table td:first-child{position:sticky;left:0;z-index:2;text-align:left;min-width:205px;max-width:260px}.grade-table thead th:first-child{z-index:5;background:#e9f1f8}.grade-table tbody td:first-child{background:#fff;box-shadow:3px 0 5px rgba(16,43,70,.035)}.grade-table .summary-col{min-width:84px;background:#f8fafc}.grade-table .notes-col{min-width:106px}.student-cell{display:flex;align-items:center;gap:9px;min-width:195px}.student-avatar{height:28px;width:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:8px;background:#eaf4fc;color:#1769aa;font-weight:800;font-size:10px}.student-name{font-weight:700;color:#243f56;white-space:normal}.student-mini{font-size:10px;color:#7a8a98;margin-top:1px}.grade-input{width:48px;max-width:100%;height:34px;text-align:center;border:1px solid #c9d7e4;border-radius:7px;background:white;color:var(--navy);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;padding:3px}.grade-input:focus{outline:2px solid #9ccfff;border-color:#4f9ddd}.grade-input.absence{background:var(--redbg);border-color:#e8aab2;color:var(--red)}.grade-input.zero{background:#f0f2f4;border-color:#d7dfe6;color:#5f6c77}.grade-input.pending{background:#fff9e7;border-color:#ead28c}.session-head{min-width:150px;max-width:176px;text-align:left!important}.session-date{display:block;color:var(--blue);font-size:10px;font-weight:800;margin-bottom:4px}.session-title{display:block;max-width:158px;white-space:normal;font-size:11px;line-height:1.25;color:#223f58;min-height:28px}.session-status{font-size:9px;color:var(--green);background:var(--greenbg);display:inline-block;padding:3px 6px;border-radius:5px;margin-top:6px}.session-status.suspended{color:var(--gold);background:var(--goldbg)}.session-controls{display:flex;align-items:center;justify-content:flex-start;gap:4px;margin-top:7px}.session-controls select{max-width:94px;padding:4px 5px;border:1px solid #d4e0e9;border-radius:5px;font-size:9px;background:#fff}.icon-button{padding:4px 6px;border:1px solid #d4e0e9;background:#fff;color:#4b6478;border-radius:5px;font-size:11px;line-height:1.1}.icon-button:hover{background:#edf6fc}.suspended-cell{color:#9b7c2d;font-size:11px;background:#fffcf3!important}.metric{font-variant-numeric:tabular-nums;font-weight:750;color:#27435a}.metric.final{color:var(--blue);font-size:13px}.metric.absences{color:var(--red)}.notes-button{border:1px solid #d1dfeb;background:#fff;color:var(--blue);font-size:10px;padding:6px 8px;border-radius:7px;white-space:nowrap}.notes-button.has-notes{background:#edf8ff;border-color:#9bccea}.empty-state{padding:38px 22px;text-align:center;color:var(--muted)}.empty-icon{margin:0 auto 11px;width:44px;height:44px;border-radius:14px;background:#eaf4fc;color:var(--blue);display:grid;place-items:center;font-size:21px}.empty-state h4{margin:0 0 6px;color:var(--navy);font-size:15px}.empty-state p{max-width:480px;margin:0 auto 14px;font-size:12px}.table-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 16px;border-top:1px solid var(--line);font-size:10px;color:var(--muted);background:#fbfdff}.legend{display:flex;flex-wrap:wrap;gap:12px}.legend span{display:inline-flex;align-items:center;gap:5px}.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid #d5dfe8}.legend .red{background:var(--redbg);border-color:#e7afb7}.legend .gray{background:#f0f2f4}.legend .yellow{background:#fff9e7;border-color:#ead28c}.manage-panel{padding:17px 18px 19px;display:grid;grid-template-columns:minmax(240px,.7fr) minmax(300px,1.3fr);gap:24px}.manage-panel h4{margin:0 0 9px;color:var(--navy);font-size:13px}.manage-panel p{font-size:11px;color:var(--muted);margin:0 0 12px}.manage-row{display:flex;gap:7px}.manage-row input{flex:1}.manage-panel textarea{min-height:120px;resize:vertical;line-height:1.5}.student-manager-list{margin-top:11px;border:1px solid var(--line);border-radius:8px;max-height:250px;overflow:auto}.managed-student{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:7px 8px;border-bottom:1px solid #edf1f5}.managed-student:last-child{border-bottom:0}.managed-student .num{font-size:10px;color:#8092a1;text-align:center}.managed-student input{padding:6px 7px;font-size:12px}.manage-foot{margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}.notes-panel{padding:0}.notes-layout{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(280px,1.2fr)}.note-editor{background:#f8fbfd;padding:16px;border-right:1px solid var(--line)}.note-editor h4{font-size:14px;color:var(--navy);margin:0 0 5px}.note-editor p{font-size:11px;color:var(--muted);margin:0 0 13px}.note-editor .field{margin-bottom:10px}.note-editor textarea{min-height:92px;resize:vertical}.note-list{padding:16px;max-height:320px;overflow:auto}.note-list h4{font-size:13px;margin:0 0 10px;color:var(--navy)}.note-item{border:1px solid var(--line);border-radius:9px;padding:10px 11px;margin-bottom:8px;background:#fff}.note-item-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:5px}.note-item time{font-size:10px;font-weight:800;color:var(--blue)}.note-item p{font-size:12px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.note-item .delete-note{font-size:10px;background:transparent;color:var(--red);padding:3px 5px}.privacy-note{font-size:10px;color:#667e90;background:#f8fbfd;border-top:1px solid var(--line);padding:10px 16px}.results-panel{padding:16px 18px}.results-panel h3{margin:0 0 6px;font-size:15px;color:var(--navy)}.results-panel p{margin:0 0 13px;font-size:11px;color:var(--muted)}.formula-box{background:#edf6fc;border:1px solid #cbe4f6;border-radius:10px;padding:12px 14px;margin-bottom:13px;display:flex;align-items:center;justify-content:space-between;gap:20px}.formula{font-size:15px;font-weight:800;color:#194a70;letter-spacing:.01em}.formula-caption{font-size:10px;color:#4d6b83;margin-top:4px}.result-actions{display:flex;flex-wrap:wrap;gap:8px}.warning-line{font-size:11px;color:#8b6100;background:#fff7df;border:1px solid #f0d890;border-radius:8px;padding:9px 11px;margin-top:10px}.footnote{font-size:10px;color:#6e8293;margin-top:20px;padding:0 3px}.footnote strong{color:#455d70}.toast{position:fixed;right:20px;bottom:20px;z-index:1000;background:#153d5b;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.18);max-width:min(430px,calc(100vw - 40px));font-size:12px;opacity:0;transform:translateY(8px);pointer-events:none;transition:all .2s ease}.toast.show{opacity:1;transform:translateY(0)}.modal-backdrop{position:fixed;inset:0;background:rgba(10,26,43,.55);display:none;align-items:center;justify-content:center;z-index:900;padding:16px}.modal-backdrop.open{display:flex}.modal{background:#fff;border-radius:14px;padding:20px;max-width:460px;width:100%;box-shadow:0 20px 70px rgba(0,0,0,.24)}.modal h3{font-size:16px;color:var(--navy);margin:0 0 8px}.modal p{font-size:12px;color:var(--muted);margin:0 0 16px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:980px){.toolbar{grid-template-columns:1fr 1fr}.toolbar-actions{justify-content:flex-start}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.session-form{grid-template-columns:1fr 2fr}.session-form .field:nth-child(3),.session-form .field:nth-child(4){grid-column:auto}.session-form button{align-self:end}.hero{align-items:flex-start;flex-direction:column}.hero-note{min-width:0;width:100%}.manage-panel{grid-template-columns:1fr}.notes-layout{grid-template-columns:1fr}.note-editor{border-right:0;border-bottom:1px solid var(--line)}}
@media(max-width:560px){.app-header{padding-top:16px}.topline{align-items:flex-start;flex-direction:column}.hero{margin-top:20px}.toolbar{grid-template-columns:1fr}.toolbar-actions{width:100%}.toolbar-actions button{flex:1}.cards{gap:8px}.stat{padding:11px}.stat-value{font-size:22px}.session-form{grid-template-columns:1fr}.session-form .field{grid-column:1!important}.session-form button{width:100%}.panel-heading{align-items:flex-start;flex-direction:column}.table-footer{align-items:flex-start;flex-direction:column}.formula-box{align-items:flex-start;flex-direction:column}.formula{font-size:13px}}
@media print{body{background:#fff}.app-header{background:#fff;color:#111;padding:12px}.hero p,.brand p,.eyebrow,.save-state,.toolbar-actions,.session-form,.manage-panel,.notes-panel,.footnote,.result-actions{display:none!important}.container{padding:0;margin:0}.panel,.stat,.toolbar{box-shadow:none;break-inside:avoid}.table-wrap{max-height:none;overflow:visible}.grade-table th:first-child,.grade-table td:first-child{position:static}.grade-table{font-size:9px}.grade-table th,.grade-table td{padding:4px}.grade-input{border:0;background:transparent!important;color:#111;height:auto}.notes-button{border:0;color:#111;padding:0}.cards{grid-template-columns:repeat(4,1fr)}}
/* Versión con servidor: sesión del docente, estado de guardado y páginas de acceso. */
.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.user-chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#e8f3fb}.user-chip strong{font-weight:700}.logout-form{margin:0}.logout-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);padding:6px 11px;font-size:11px;border-radius:999px}.logout-btn:hover{background:rgba(255,255,255,.2)}.save-dot.saving{background:#ffd36b;box-shadow:0 0 0 3px rgba(255,211,107,.18)}.save-dot.error{background:#ff8a8a;box-shadow:0 0 0 3px rgba(255,138,138,.2)}
.loading-state{padding:38px 22px;text-align:center;color:var(--muted);font-size:12px}
.auth-page{min-height:100vh;display:flex;flex-direction:column}.auth-page .app-header{padding-bottom:70px}.auth-wrap{flex:1;display:flex;justify-content:center;padding:0 16px 40px;margin-top:-48px}.auth-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:24px;width:100%;max-width:420px}.auth-card h2{margin:0 0 4px;font-size:19px;color:var(--navy);letter-spacing:-.02em}.auth-card>p{margin:0 0 18px;font-size:12px;color:var(--muted)}.auth-card .field{margin-bottom:12px}.auth-card .field input{border:1px solid #cbd8e4;border-radius:8px;padding:10px 11px;width:100%}.auth-card .field input:focus{border-color:#62aee9;outline:2px solid #d5edff}.auth-card button[type=submit]{width:100%;margin-top:4px}.auth-alt{margin-top:16px;font-size:12px;color:var(--muted);text-align:center}.auth-alt a{color:var(--blue);font-weight:650}.alert{border-radius:8px;padding:10px 12px;font-size:12px;margin-bottom:14px}.alert.error{background:var(--redbg);border:1px solid #f1c5ca;color:var(--red)}.alert.ok{background:var(--greenbg);border:1px solid #b6e3c9;color:var(--green)}.alert.info{background:var(--blue2);border:1px solid #cbe4f6;color:#194a70}.check-list{margin:0 0 16px;padding:0;list-style:none;font-size:12px}.check-list li{padding:6px 0;border-bottom:1px solid #edf1f5}.check-list li:last-child{border-bottom:0}