:root {
      --ink: #0f172a;
      --muted: #64748b;
      --line: #dbe3ee;
      --paper: #ffffff;
      --soft: #f7fbff;
      --nav: #9f1239;
      --brand: #f43f5e;
      --brand-2: #fb7185;
      --blue: #2563eb;
      --blue-2: #38bdf8;
      --blue-soft: #e0f2fe;
      --teal: #14b8a6;
      --amber: #f59e0b;
      --red: #f43f5e;
      --violet: #8b5cf6;
      --green: #22c55e;
      --cyan: #06b6d4;
      --shadow: 0 18px 46px rgba(37, 99, 235, .12), 0 9px 26px rgba(244, 63, 94, .09);
    }

    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    .hero[hidden],
    .stats[hidden] {
      display: none !important;
    }

    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at top left, rgba(251, 113, 133, .20), transparent 30%),
        radial-gradient(circle at top right, rgba(56, 189, 248, .20), transparent 34%),
        radial-gradient(circle at 70% 80%, rgba(250, 204, 21, .13), transparent 28%),
        linear-gradient(180deg, #fff9fb 0%, #f0f9ff 52%, #f0fdf4 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 282px minmax(0, 1fr);
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      background:
        linear-gradient(180deg, #fff1f5 0%, #ffe4e6 35%, #e0f2fe 72%, #dcfce7 100%);
      color: #6f2732;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      border-right: 1px solid rgba(143,47,59,.10);
      box-shadow: 18px 0 44px rgba(31,94,168,.06);
    }

    .mobile-menu {
      display: none;
      width: 42px;
      height: 42px;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--nav);
      background: white;
      font-weight: 900;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 6px 8px 12px;
      border-bottom: 1px solid rgba(255,255,255,.18);
    }

    .brand-mark {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #ffffff;
      border: 2px solid rgba(255,255,255,.92);
      box-shadow: 0 12px 28px rgba(143, 47, 59, .16), 0 8px 18px rgba(31, 94, 168, .12);
      overflow: hidden;
    }

    .brand-mark img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .brand strong { display: block; font-size: 17px; line-height: 1.15; }
    .brand small { color: #1f5ea8; }

    .sidebar-profile {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      padding: 12px;
      border: 1px solid rgba(255,255,255,.78);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.58));
      box-shadow: 0 12px 28px rgba(143,47,59,.10), 0 9px 22px rgba(31,94,168,.07);
      backdrop-filter: blur(14px);
    }

    .sidebar-avatar {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 16px;
      color: #fff;
      background: linear-gradient(145deg, #ef7886, #d94c5c 58%, #1f5ea8);
      border: 2px solid rgba(255,255,255,.92);
      box-shadow: 0 9px 20px rgba(143,47,59,.18);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: .04em;
    }

    .sidebar-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .sidebar-profile-copy {
      min-width: 0;
    }

    .sidebar-profile-copy strong,
    .sidebar-profile-copy span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sidebar-profile-copy strong {
      color: #61242d;
      font-size: 13px;
      line-height: 1.25;
    }

    .sidebar-profile-copy span {
      margin-top: 4px;
      color: #667085;
      font-size: 11px;
    }

    .sidebar-online {
      display: inline-flex !important;
      align-items: center;
      gap: 5px;
      margin-top: 7px !important;
      color: #13865f !important;
      font-weight: 800;
    }

    .sidebar-online::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #16b77f;
      box-shadow: 0 0 0 3px rgba(22,183,127,.12);
    }
    .sidebar-online.saving::before { background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.16); }
    .sidebar-online.pending::before { background:#f97316; box-shadow:0 0 0 4px rgba(249,115,22,.16); }
    .sidebar-online.error::before { background:#dc2626; box-shadow:0 0 0 4px rgba(220,38,38,.16); }

    .role {
      padding: 11px;
      border-radius: 18px;
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(31,94,168,.14);
    }

    .role span {
      display: block;
      color: #8b5963;
      font-size: 12px;
      margin-bottom: 6px;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .role select {
      width: 100%;
      color: #6f2732;
      border: 1px solid rgba(143,47,59,.16);
      background: rgba(255,255,255,.72);
      border-radius: 16px;
      padding: 9px 10px;
      font-weight: 750;
    }

    .role .logout-inline {
      width: 100%;
      margin-top: 10px;
      border-radius: 16px;
      border: 1px solid #cf4353;
      background: linear-gradient(135deg, #f08a95 0%, #d94c5c 66%, #1f5ea8 100%);
      color: white;
      padding: 10px 12px;
      box-shadow: 0 10px 20px rgba(217,76,92,.20), 0 8px 18px rgba(31,94,168,.12);
      font-weight: 800;
    }

    .nav {
      display: grid;
      gap: 8px;
    }

    .nav-section-label {
      margin: 2px 8px -2px;
      color: #9b6570;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .nav-main-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 6px;
      width: 100%;
    }

    .nav-main-actions .nav-main-button {
      width: 100%;
      min-width: 0;
      min-height: 38px;
      padding: 8px 7px;
      gap: 6px;
      justify-content: center;
      font-size: 12px;
    }

    .nav-main-actions .nav-main-button span {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav-main-actions .nav-main-button svg {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
    }

    .nav-groups {
      display: grid;
      gap: 8px;
    }

    .nav-group {
      min-width: 0;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 15px;
      background: rgba(255,255,255,.035);
      overflow: hidden;
    }

    .nav-group summary {
      min-height: 38px;
      padding: 9px 11px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fda4af;
      cursor: pointer;
      list-style: none;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      user-select: none;
    }

    .nav-group summary::-webkit-details-marker {
      display: none;
    }

    .nav-group summary::before {
      content: "";
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-radius: 2px;
      background: linear-gradient(135deg, #fb7185, #e11d48);
      box-shadow: 0 0 0 3px rgba(225,29,72,.12);
    }

    .nav-group summary::after {
      content: "›";
      margin-left: auto;
      color: #93c5fd;
      font-size: 18px;
      line-height: 1;
      transform: rotate(90deg);
      transition: transform .14s ease;
    }

    .nav-group:not([open]) summary::after {
      transform: rotate(0);
    }

    .nav-group-items {
      display: grid;
      gap: 4px;
      padding: 0 6px 7px;
    }

    .nav-group-items button {
      min-height: 36px;
      padding: 8px 10px;
      border-radius: 11px;
      font-size: 12px;
    }

    .nav-group-items button svg {
      width: 17px;
      height: 17px;
      flex: 0 0 17px;
    }

    .nav button {
      position: relative;
      width: 100%;
      border: 1px solid transparent;
      color: #6f2732;
      background: rgba(255,255,255,.56);
      border-radius: 999px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
      transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
    }

    .nav button span {
      border-radius: 999px;
      transition: color .12s ease, background .12s ease, padding .12s ease, text-shadow .12s ease;
    }

    .nav button:hover,
    .nav button.active {
      color: #ffffff;
      background: linear-gradient(135deg, #f08a95 0%, #d94c5c 64%, #1f5ea8 100%);
      border-color: rgba(255,255,255,.64);
      box-shadow: 0 10px 24px rgba(217, 76, 92, .22), 0 9px 18px rgba(31, 94, 168, .12);
    }

    .nav button:hover {
      transform: translateY(-1px);
    }

    .nav button:hover span {
      padding: 2px 8px;
      background: rgba(255,255,255,.18);
      text-shadow: 0 1px 8px rgba(255,255,255,.22);
    }

    .nav-sub {
      display: grid;
      gap: 6px;
      margin: -3px 0 3px 34px;
      padding-left: 10px;
      border-left: 2px solid rgba(217, 76, 92, .24);
    }

    .nav-sub button {
      min-height: 34px;
      padding: 8px 11px;
      border-radius: 8px;
      color: #9a3f11;
      background: #fff7f1;
      border-color: #ffd8bf;
      font-size: 12px;
      font-weight: 850;
      justify-content: flex-start;
    }

    .nav-sub button.active,
    .nav-sub button:hover {
      color: #ffffff;
      background: linear-gradient(135deg, #ff9b54, #f06b2d);
      border-color: #f3b382;
    }

    .nav svg, .icon {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
    }

    .system-note {
      margin-top: auto;
      color: #8b5963;
      font-size: 12px;
      line-height: 1.5;
      padding: 12px;
      border-radius: 18px;
      border: 1px solid rgba(154,64,80,.14);
      background: rgba(255,255,255,.58);
    }

    main {
      min-width: 0;
      padding: 22px;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .search {
      max-width: 620px;
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 18px;
    }

    .search input {
      width: 100%;
      border: 0;
      outline: 0;
      color: var(--ink);
    }

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

    .ghost, .primary, .danger {
      border-radius: 999px;
      padding: 10px 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid #e5c1c8;
      background: #ffffff;
      color: var(--ink);
      min-height: 40px;
      box-shadow: 0 7px 16px rgba(143, 47, 59, .08), 0 5px 14px rgba(31, 94, 168, .06);
      font-weight: 750;
    }

    .primary {
      border-color: #cf4353;
      background: linear-gradient(135deg, #f08a95 0%, #d94c5c 64%, #1f5ea8 100%);
      color: white;
      box-shadow: 0 12px 24px rgba(217,76,92,.24), 0 8px 18px rgba(31,94,168,.14);
    }

    .danger {
      color: white;
      background: var(--red);
      border-color: var(--red);
      box-shadow: 0 12px 24px rgba(217,76,92,.22);
    }

    .hero {
      min-height: 235px;
      border-radius: 24px;
      background:
        linear-gradient(115deg, rgba(105, 38, 50, .74), rgba(217, 76, 92, .42) 48%, rgba(31, 94, 168, .38)),
        url("https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=1800&q=80");
      background-size: cover;
      background-position: center;
      color: white;
      padding: 28px;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 20px;
      align-items: end;
    }

    main.attendance-mode {
      padding-top: 14px;
    }

    .hero h1 {
      margin: 0 0 10px;
      font-size: clamp(30px, 4vw, 52px);
      line-height: 1.02;
      letter-spacing: 0;
    }

    .hero p {
      max-width: 720px;
      margin: 0;
      color: #dce8f6;
      line-height: 1.6;
    }

    .hero-panel {
      border-radius: 20px;
      padding: 16px;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(12px);
    }

    .hero-panel strong {
      display: block;
      font-size: 24px;
      margin-top: 6px;
    }

    .featured-document {
      margin-bottom: 16px;
      overflow: hidden;
    }

    .document-link {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr) auto;
      gap: 22px;
      align-items: center;
      min-height: 190px;
      padding: 22px;
      color: inherit;
      text-decoration: none;
      background:
        linear-gradient(135deg, rgba(255, 247, 248, .96), rgba(234, 243, 255, .94)),
        #ffffff;
    }

    .document-link img {
      width: 170px;
      max-width: 100%;
      display: block;
      filter: drop-shadow(0 14px 20px rgba(31, 94, 168, .14));
    }

    .document-link h2 {
      margin: 0;
      font-size: clamp(28px, 3.5vw, 42px);
      letter-spacing: 0;
      color: #8f2f3b;
      line-height: 1.05;
    }

    .document-link p {
      margin: 10px 0 0;
      color: var(--muted);
      max-width: 640px;
      line-height: 1.55;
    }

    .document-link .open-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 14px;
      border-radius: 999px;
      background: #d94c5c;
      color: white;
      font-weight: 900;
      white-space: nowrap;
      box-shadow: 0 12px 24px rgba(217, 76, 92, .22);
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }

    .stat, .panel, .card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 8px 24px rgba(16, 25, 40, .045);
    }

    .stat {
      padding: 15px;
      min-height: 106px;
    }

    .stat span {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 13px;
      gap: 8px;
    }

    .stat strong {
      display: block;
      font-size: 28px;
      margin: 11px 0 3px;
    }

    .stat small { color: var(--teal); }

    .view {
      display: none;
      margin-top: 16px;
    }

    .view.active {
      display: block;
      content-visibility: auto;
      contain-intrinsic-size: auto 900px;
    }

    .enrollment-module-panel { max-width: 980px; margin: 0 auto; }
    .enrollment-module-head { align-items: center; gap: 24px; }
    .enrollment-module-head h2 { margin: 8px 0 4px; }
    .enrollment-module-head p { margin: 0; color: var(--muted); }
    .enrollment-generated-id { min-width:245px; padding:14px 16px; border:1px solid #cbdbea; border-radius:12px; background:#f5f9fd; text-align:center; }
    .enrollment-generated-id span { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
    .enrollment-generated-id strong { color:#17365d; overflow-wrap:anywhere; }
    .enrollment-form { border:1px solid #d9e3ee; border-radius:14px; padding:20px; }
    .enrollment-form h3 { margin:10px 0 0; padding-bottom:7px; border-bottom:1px solid #dce5ee; color:#17365d; font-size:15px; }
    .enrollment-form h3:first-child { margin-top:0; }
    .enrollment-form input[readonly] { background:#eef4fa; color:#17365d; font-weight:700; }

    @media (max-width: 720px) {
      .enrollment-module-head { align-items:stretch; flex-direction:column; }
      .enrollment-generated-id { min-width:0; width:100%; }
    }

    .table-wrap {
      contain: layout paint;
    }

    .table-wrap tbody tr {
      content-visibility: auto;
      contain-intrinsic-size: auto 44px;
    }

    .students-convivencia-banner {
      margin-bottom: 16px;
      display: flex;
      justify-content: flex-end;
    }

    .convivencia-doc-button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 9px 14px;
      border: 1px solid rgba(217, 76, 92, .34);
      border-radius: 999px;
      background: #fff;
      color: #8f2f3b;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 8px 20px rgba(143, 47, 59, .08);
    }

    .convivencia-doc-button:hover {
      transform: translateY(-1px);
      border-color: rgba(217, 76, 92, .72);
      box-shadow: 0 12px 24px rgba(143, 47, 59, .14);
    }

    .convivencia-doc-icon {
      position: relative;
      width: 22px;
      height: 26px;
      border: 2px solid currentColor;
      border-radius: 5px;
      background: linear-gradient(180deg, #fff 0%, #fff6f7 100%);
      flex: 0 0 auto;
    }

    .convivencia-doc-icon::before {
      content: "";
      position: absolute;
      right: -2px;
      top: -2px;
      width: 9px;
      height: 9px;
      border-left: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      border-radius: 0 4px 0 3px;
      background: #fff;
    }

    .convivencia-doc-icon::after {
      content: "";
      position: absolute;
      left: 5px;
      right: 5px;
      top: 12px;
      height: 2px;
      background: currentColor;
      box-shadow: 0 5px 0 currentColor;
    }

    .grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
      gap: 16px;
      align-items: start;
    }

    #accountView .grid {
      gap: 8px 16px;
      grid-auto-rows: auto;
    }

    #accountView .grid > .panel:nth-child(2) {
      grid-column: 2;
      grid-row: 1 / span 3;
    }

    #accountView .grid > .panel:nth-child(3) {
      grid-column: 1;
      grid-row: 2;
    }

    #accountView .grid > .panel:nth-child(4) {
      grid-column: 1;
      grid-row: 3;
    }

    .attendance-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }

    .attendance-main {
      min-height: 520px;
    }

    .attendance-qr-panel {
      padding: 10px 12px;
      position: static;
      display: grid;
      grid-template-columns: minmax(140px, 170px) minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .attendance-qr-panel .panel-head {
      margin-bottom: 9px;
      align-items: start;
    }

    .attendance-qr-panel h2 {
      font-size: 13px;
      line-height: 1.15;
    }

    .attendance-qr-panel .muted,
    .attendance-qr-panel p {
      font-size: 11px;
      line-height: 1.35;
    }

    .attendance-manual-panel {
      margin-top: 12px;
    }

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

    .panel {
      padding: 17px;
      min-width: 0;
    }

    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: 0;
    }

    h3 {
      margin: 0 0 8px;
      font-size: 15px;
    }

    .muted { color: var(--muted); font-size: 13px; }

    .class-teacher-name {
      color: var(--ink);
      font-size: 15px;
      font-weight: 900;
      line-height: 1.35;
    }

    #classAdminTeacher,
    #classAdminTeacher option {
      font-size: 14px;
      font-weight: 800;
    }

    #classStudentSheetNote {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: baseline;
      font-size: 14px;
    }


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

    .form.full { grid-template-columns: 1fr; }

    label.field {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .field input,
    .field select,
    .field textarea,
    .inline-input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 10px 11px;
      background: white;
      color: var(--ink);
      outline-color: var(--brand);
    }

    .field textarea { min-height: 86px; resize: vertical; }

    .span-2 { grid-column: 1 / -1; }
    .optional { color: var(--muted); font-size: .78rem; font-weight: 500; }
    .teacher-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; border: 1px solid rgba(124, 58, 237, .18); border-radius: 16px; background: rgba(124, 58, 237, .035); }
    .teacher-fields.hidden { display: none; }
    .teacher-fields select[multiple] { min-height: 128px; }
    .checkbox-picker { min-height: 128px; max-height: 190px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); }
    .checkbox-option { display: flex; align-items: center; gap: 9px; padding: 6px 7px; border-radius: 8px; cursor: pointer; font-size: .9rem; }
    .checkbox-option:hover { background: rgba(124, 58, 237, .07); }
    .checkbox-option input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #7c3aed; }
    .teacher-fields small { color: var(--muted); margin-top: 4px; }
    .create-area-button { align-self: end; justify-self: start; }
    .tutor-check { flex-direction: row; align-items: center; gap: 9px; align-self: center; }
    .tutor-check input { width: 18px; height: 18px; }
    @media (max-width: 760px) { .teacher-fields { grid-template-columns: 1fr; } }

    table {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      font-size: 13px;
    }

    th, td {
      border-bottom: 1px solid var(--line);
      padding: 10px 9px;
      text-align: left;
      vertical-align: top;
    }

    th {
      color: var(--muted);
      font-size: 12px;
      background: #ffffff;
    }

    td[contenteditable="true"] {
      background: #ffffff;
      outline-color: var(--amber);
    }

    .table-wrap {
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 18px;
    }

    .grade-register {
      padding: 0;
      overflow: hidden;
    }

    .grade-register > *:not(.grade-title):not(.grade-filters) {
      margin-left: 14px;
      margin-right: 14px;
    }

    .grade-title {
      min-height: 36px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      color: #2d2d2d;
      background: #ff7f2a;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .grade-title::before {
      content: "☷";
      margin-right: 6px;
      font-size: 14px;
    }

    .grade-filters {
      display: grid;
      grid-template-columns: 230px minmax(260px, 1fr) 210px 62px;
      gap: 8px 14px;
      align-items: center;
      padding: 8px 12px 10px;
      background: #f8f8f8;
      border-bottom: 1px solid var(--line);
    }

    .grade-filters label {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px;
      align-items: center;
      font-size: 12px;
      font-weight: 800;
    }

    .grade-filters label.wide {
      grid-column: span 2;
    }

    .grade-filters label.check {
      grid-template-columns: auto auto;
      justify-content: center;
    }

    .grade-filters select,
    .grade-filters input[type="text"],
    .grade-filters input:not([type]) {
      width: 100%;
      min-height: 28px;
      border: 1px solid #cfd3d8;
      border-radius: 3px;
      background: white;
      padding: 0 10px;
      font: inherit;
      font-weight: 500;
    }

    .grade-filters input[readonly] {
      color: #374151;
      background: #e9e9e9;
    }

    .teacher-photo-mini {
      width: 60px;
      height: 62px;
      display: grid;
      place-items: center;
      border: 1px solid #d7d7d7;
      border-radius: 4px;
      background: white;
      color: #a0a0a0;
      font-size: 36px;
    }

    .grade-schedule-wrap {
      margin-top: 14px;
    }

    .submodule-strip,
    .class-management-toolbar,
    .gradebook-toolbar {
      display: grid;
      grid-template-columns: repeat(4, minmax(130px, 1fr));
      gap: 10px;
      align-items: end;
      margin-bottom: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--soft);
    }

    .submodule-strip {
      grid-template-columns: repeat(4, max-content);
      align-items: center;
      overflow-x: auto;
      background: #fff7f1;
      border-color: #ffd8bf;
    }

    .submodule-tab {
      min-height: 36px;
      border: 1px solid #f3b382;
      border-radius: 8px;
      background: white;
      color: #9a3f11;
      padding: 8px 12px;
      font-weight: 850;
      white-space: nowrap;
    }

    .submodule-tab.active {
      color: #ffffff;
      background: linear-gradient(135deg, #ff9b54, #f06b2d);
      border-color: #f06b2d;
    }

    [data-grade-panel] { display: none; }
    [data-grade-panel].active { display: block; }

    .class-management-toolbar {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      align-items: end;
    }

    #academicView {
      gap: 18px;
    }

    #academicView.active { display: flex; flex-direction: column; }

    #academicView .academic-assignment-panel { order: -1; }

    .academic-summary {
      grid-template-columns: repeat(4, minmax(130px, 1fr));
    }

    .academic-summary .card strong {
      display: block;
      margin-top: 6px;
      font-size: 25px;
      color: var(--navy);
    }

    .academic-config-grid {
      align-items: start;
    }

    .academic-assignment-form {
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 16px;
    }

    .assignment-step {
      border: 1px solid #dce5f0;
      border-radius: 16px;
      padding: 16px;
      background: #fbfdff;
    }

    .assignment-step-head {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      margin-bottom: 13px;
    }

    .assignment-step-number {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      border-radius: 50%;
      background: var(--navy);
      color: white;
      font-weight: 900;
    }

    .assignment-step-head strong { display: block; color: var(--navy); }
    .assignment-step-head p { margin: 2px 0 0; font-size: 12px; }

    .assignment-step-fields {
      display: grid;
      grid-template-columns: repeat(3, minmax(170px, 1fr));
      gap: 11px;
    }

    .academic-assignment-form .assignment-competencies {
      grid-column: 1 / -1;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
      background: #f8fafc;
    }
    .academic-assignment-form .full { grid-column: 1 / -1; }

    .assignment-competency-toolbar,
    .assignment-submit-row,
    .assignment-list-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .assignment-selection-summary {
      flex: 1 1 420px;
      padding: 12px 14px;
      border-radius: 12px;
      background: #eef5ff;
      color: var(--navy);
      font-size: 13px;
      font-weight: 750;
    }

    .assignment-submit-row .primary { min-width: 230px; }

    .assignment-schedule-list { display: grid; gap: 10px; }
    .assignment-schedule-row {
      display: grid;
      grid-template-columns: minmax(150px, 1fr) minmax(130px, .75fr) minmax(130px, .75fr) auto;
      gap: 10px;
      align-items: end;
      padding: 12px;
      border: 1px solid #dce5f0;
      border-radius: 13px;
      background: white;
    }

    .assignment-list-heading {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .assignment-list-heading h3 { margin: 0; color: var(--navy); }
    .assignment-list-heading p { margin: 3px 0 0; }

    .assignment-competency-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      margin-top: 10px;
    }

    .assignment-competency-option {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 10px 12px;
      border: 1px solid #dbe3ef;
      border-radius: 11px;
      background: white;
      color: var(--navy);
      font-size: 13px;
      line-height: 1.35;
    }

    .assignment-competency-option input { margin-top: 2px; }

    .academic-assignment-filters {
      display: grid;
      grid-template-columns: repeat(3, minmax(160px, 1fr));
      gap: 10px;
      margin-top: 18px;
      padding: 12px;
      border-radius: 14px;
      background: #f8fafc;
    }

    @media (max-width: 980px) {
      .academic-summary,
      .assignment-step-fields {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
      }
      .academic-assignment-filters { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
      .assignment-competency-grid { grid-template-columns: 1fr; }
    }

    .class-teacher-assignments {
      display: grid;
      gap: 5px;
      min-width: 250px;
    }

    .class-teacher-assignment {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: baseline;
    }

    .class-teacher-assignment small {
      color: var(--muted);
      font-weight: 700;
    }

    @media (max-width: 760px) {
      .class-management-toolbar {
        grid-template-columns: 1fr;
      }
      .assignment-step-fields,
      .academic-assignment-filters { grid-template-columns: 1fr; }
      .assignment-schedule-row { grid-template-columns: 1fr; }
      .assignment-submit-row .primary { width: 100%; }
    }

    .incident-filter-toolbar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      align-items: end;
      margin-bottom: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--soft);
    }

    .incident-layout {
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    }

    .incident-results {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
    }

    .incident-card {
      display: grid;
      gap: 10px;
    }

    .incident-card h3 {
      margin: 0;
      font-size: 16px;
    }

    .incident-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }

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

    .incident-pdf-preview {
      width: min(220px, 100%);
      border: 1px solid #efb5bf;
      border-radius: 10px;
      overflow: hidden;
      background: #fff7f8;
      cursor: pointer;
      text-align: left;
      padding: 0;
    }

    .incident-pdf-preview iframe {
      width: 100%;
      height: 128px;
      display: block;
      border: 0;
      background: #fff;
      pointer-events: none;
    }

    .incident-pdf-preview-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 9px;
      color: #8b1025;
      font-size: 11px;
      font-weight: 900;
    }

    .incident-pdf-preview-footer span:first-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #incidentForm input[type="file"] {
      min-height: 52px;
      padding: 13px;
      border: 2px dashed #e7b9bf;
      background: #fff7f8;
      font-weight: 750;
    }

    #incidentForm input[type="file"]::file-selector-button {
      margin-right: 12px;
      border: 1px solid #d94c5c;
      border-radius: 8px;
      background: #d94c5c;
      color: white;
      padding: 9px 13px;
      font-weight: 850;
      cursor: pointer;
    }

    .incident-person-search {
      margin-top: -4px;
    }

    .incident-person-search input {
      min-height: 34px;
      border-radius: 13px;
      border-color: #efb5bf;
      background: #fff;
      font-size: 12px;
    }

    .student-row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }

    #classesView .grid {
      grid-template-columns: 1fr;
    }

    .class-management-toolbar .ghost {
      width: 100%;
      min-height: 38px;
    }

    .class-admin-table table,
    .gradebook-table table {
      min-width: 980px;
    }

    .class-admin-table .compact-select,
    .class-admin-table .compact-input {
      min-width: 0;
    }

    .class-admin-table thead th,
    .gradebook-table thead th {
      position: sticky;
      top: 0;
      z-index: 3;
      background: #ffffff;
      box-shadow: 0 2px 0 var(--line);
      white-space: nowrap;
    }

    .class-filter-empty {
      display: none;
      margin-top: 12px;
      padding: 18px;
      border: 1px dashed #e2b9bf;
      border-radius: 14px;
      background: #fff8f8;
      color: #8f2f3b;
      font-weight: 850;
      text-align: center;
    }

    .class-filter-empty.active {
      display: block;
    }

    .compact-select,
    .compact-input {
      width: 100%;
      min-width: 118px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: white;
      color: var(--ink);
      padding: 7px 8px;
      font-size: 12px;
      outline-color: var(--brand);
    }

    .class-actions,
    .grade-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
      gap: 7px;
      align-items: stretch;
    }

    .class-actions button,
    .grade-actions button {
      width: 100%;
    }

    .mini.warn {
      border-color: #f2a93b;
      color: #8a5a08;
      background: #fff7df;
    }

    .mini.danger-mini {
      border-color: #f0b9be;
      color: #a8323c;
      background: #fff0f1;
    }

    .class-assignment-panel {
      margin-top: 16px;
    }

    .class-assignment-panel .form {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .single-column-form {
      grid-template-columns: 1fr;
    }

    .single-column-form .span-2 {
      grid-column: auto;
    }

    .student-create-panel {
      align-self: start;
    }

    .student-create-panel .panel-head {
      align-items: center;
      margin-bottom: 10px;
    }

    .student-form-tools {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .student-form-size {
      display: inline-flex;
      gap: 4px;
      padding: 3px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
    }

    .student-form-size button {
      min-height: 28px;
      border: 0;
      border-radius: 999px;
      padding: 5px 9px;
      background: transparent;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .student-form-size button.active {
      background: #fff0f1;
      color: var(--nav);
    }

    #studentForm {
      grid-template-columns: repeat(4, minmax(130px, 1fr));
      gap: 8px;
    }

    #studentForm .span-2 {
      grid-column: span 2;
    }

    #studentForm label.field {
      gap: 3px;
      font-size: 11px;
    }

    #studentForm .field input,
    #studentForm .field select,
    #studentForm .field textarea {
      min-height: 34px;
      border-radius: 10px;
      padding: 7px 9px;
      font-size: 12px;
    }

    #studentForm .field textarea {
      min-height: 56px;
    }

    #studentForm button[type="submit"] {
      min-height: 36px;
      padding: 8px 12px;
    }

    body.student-form-roomy #studentForm {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 11px;
    }

    body.student-form-roomy #studentForm .field input,
    body.student-form-roomy #studentForm .field select,
    body.student-form-roomy #studentForm .field textarea {
      min-height: 40px;
      border-radius: 16px;
      padding: 10px 11px;
      font-size: 13px;
    }

    body.student-form-dense #studentForm {
      grid-template-columns: repeat(5, minmax(112px, 1fr));
      gap: 6px;
    }

    body.student-form-dense #studentForm label.field {
      font-size: 10px;
    }

    body.student-form-dense #studentForm .field input,
    body.student-form-dense #studentForm .field select,
    body.student-form-dense #studentForm .field textarea {
      min-height: 30px;
      padding: 5px 7px;
      font-size: 11px;
    }

    body.student-form-dense #studentForm .field textarea {
      min-height: 42px;
    }

    @media (max-width: 980px) {
      #studentForm,
      body.student-form-dense #studentForm,
      body.student-form-roomy #studentForm {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      #studentForm,
      body.student-form-dense #studentForm,
      body.student-form-roomy #studentForm {
        grid-template-columns: 1fr;
      }

      #studentForm .span-2 {
        grid-column: auto;
      }
    }

    .class-student-sheet {
      margin-top: 16px;
    }

    .class-student-sheet table {
      min-width: 920px;
    }

    .class-student-sheet th,
    .class-student-sheet td {
      white-space: nowrap;
    }

    .user-staff-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staff-detail {
      margin-top: 14px;
    }

    .staff-profile {
      min-height: 300px;
    }

    .staff-photo {
      width: 72px;
      height: 72px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #fff0f1, #eaf3ff);
      color: var(--brand);
      font-weight: 900;
      font-size: 28px;
      border: 1px solid var(--line);
      overflow: hidden;
    }

    .staff-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .staff-facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .staff-facts span {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px 10px;
      background: #fff;
      color: var(--muted);
      font-size: 13px;
    }

    .library-upload-panel { min-width:0; }
    .library-upload-panel > .panel-head { padding:18px 18px 8px; }
    .library-form { padding:10px 18px 18px; }
    .library-filter-box { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:13px; border:1px solid #d8e1f4; border-radius:12px; background:#f7f9ff; }
    .library-filter-title { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:4px; }
    .library-filter-title strong { color:#244fc4; font-size:13px; }
    .library-filter-title span { color:var(--muted); font-size:10px; text-align:right; }
    .library-teacher-search { display:grid; gap:5px; }
    .library-teacher-search small,.library-file-field small { color:var(--muted); font-size:10px; line-height:1.4; }
    .library-course-field { position:relative; }
    .library-course-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:6px; }
    .library-course-actions button { width:100%; min-height:32px; padding:6px 9px; font-size:10px; }
    .library-all-courses.active { border-color:#244fc4; color:#244fc4; background:#eef3ff; }
    .library-add-course { border-color:#9bd5c1 !important; color:#11795a !important; background:#f1faf6 !important; }
    .library-new-course { display:grid; grid-template-columns:minmax(170px,.8fr) minmax(220px,1.2fr) auto; align-items:end; gap:10px; padding:12px; border:1px solid #9bd5c1; border-radius:11px; background:#f1faf6; }
    .library-new-course[hidden] { display:none; }
    .library-new-course > div:first-child { display:grid; gap:3px; align-self:center; }
    .library-new-course strong { color:#11795a; font-size:12px; }
    .library-new-course span { color:var(--muted); font-size:10px; }
    .library-new-course-actions { display:flex; gap:6px; }
    .library-new-course-actions button { min-height:38px; white-space:nowrap; }
    .library-file-field input[type="file"] { padding:8px; border:1px dashed #9fb2dd; background:#f8faff; }
    .library-file-field input[type="file"]::file-selector-button { border:0; border-radius:7px; margin-right:10px; padding:8px 11px; background:#244fc4; color:#fff; font-weight:800; cursor:pointer; }
    .library-form-summary { border:1px solid #d8e1f4; border-radius:9px; padding:9px 11px; background:#f7f9ff; color:var(--muted); font-size:11px; }
    .library-form-summary.ready { border-color:#9bd5c1; background:#f1faf6; color:#11795a; font-weight:800; }
    .library-resource-meta { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
    .library-resource-file { display:inline-flex; align-items:center; gap:5px; border:0; border-radius:8px; padding:7px 10px; background:#eef3ff; color:#244fc4; font-weight:800; cursor:pointer; }
    @media(max-width:700px){.library-filter-box{grid-template-columns:1fr}.library-filter-title{align-items:flex-start;flex-direction:column}.library-filter-title span{text-align:left}.library-new-course{grid-template-columns:1fr}.library-new-course-actions{justify-content:flex-end}}

    .treasury-shell { display:grid; gap:14px; }
    .treasury-main-tabs { display:flex; gap:6px; padding:5px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:12px; background:#fff; }
    .treasury-main-tabs button { border:0; border-radius:8px; padding:10px 16px; background:transparent; color:var(--muted); font-weight:800; cursor:pointer; }
    .treasury-main-tabs button.active { color:#fff; background:#244fc4; box-shadow:0 5px 14px rgba(36,79,196,.2); }
    .treasury-dashboard { display:none; }
    .treasury-dashboard.active { display:block; }
    .treasury-daily-grid { display:grid; grid-template-columns:minmax(330px,.75fr) minmax(560px,1.4fr); gap:14px; }
    .treasury-income-form-panel,.treasury-daily-panel { min-width:0; }
    .treasury-income-form-panel { padding:16px; }
    .treasury-student-picker { display:grid; gap:5px; }
    .treasury-student-picker select { margin-top:0; }
    .treasury-student-picker small { color:var(--muted); font-size:10px; }
    .treasury-daily-panel .panel-head { padding:16px 16px 8px; }
    .treasury-daily-panel .panel-head > strong { color:#11795a; font-size:20px; }
    .treasury-daily-filters { display:grid; grid-template-columns:150px 220px minmax(180px,1fr); gap:8px; padding:8px 16px 13px; }
    .treasury-daily-filters input,.treasury-daily-filters select { min-height:38px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; }
    .treasury-daily-table { max-height:470px; overflow:auto; }
    .treasury-expense-grid { display:grid; grid-template-columns:minmax(330px,.72fr) minmax(600px,1.45fr); gap:14px; }
    .treasury-expense-form-panel { min-width:0; padding:16px; }
    .treasury-expense-auto-check { display:grid; gap:2px; padding:10px 11px; border:1px solid #b9e8d5; border-radius:10px; background:#effaf5; }
    .treasury-expense-auto-check strong { color:#087653; font-size:12px; }
    .treasury-expense-auto-check span { color:#477065; font-size:10px; line-height:1.35; }
    .treasury-expense-report-panel { min-width:0; overflow:hidden; }
    .treasury-expense-report-head { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 16px 10px; }
    .treasury-expense-report-head h2 { margin:0 0 3px; }
    .treasury-expense-periods { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:10px; background:#f7f9fd; }
    .treasury-expense-periods button { border:0; border-radius:7px; padding:8px 12px; background:transparent; color:var(--muted); font-weight:800; cursor:pointer; }
    .treasury-expense-periods button.active { color:#fff; background:#244fc4; }
    .treasury-expense-reference { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:0 16px 12px; }
    .treasury-expense-reference label { display:grid; gap:4px; color:var(--muted); font-size:11px; font-weight:700; }
    .treasury-expense-reference input { min-height:38px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; color:var(--ink); }
    .treasury-expense-reference > span { color:#244fc4; font-size:12px; font-weight:800; text-align:right; }
    .treasury-expense-weekdays { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 13px; }
    .treasury-expense-weekdays button { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:7px 10px; background:#fff; color:var(--muted); font-size:11px; font-weight:800; cursor:pointer; }
    .treasury-expense-weekdays button.active { border-color:#244fc4; color:#244fc4; background:#eef3ff; }
    .treasury-expense-day-selection { flex:1 0 100%; color:#244fc4; font-size:10px; font-weight:800; padding:2px 3px 0; }
    .treasury-expense-weekdays.hidden { display:none; }
    .treasury-expense-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 16px 13px; }
    .treasury-expense-kpis > div { border:1px solid var(--line); border-radius:10px; padding:10px 11px; background:#fff; }
    .treasury-expense-kpis span { display:block; color:var(--muted); font-size:10px; }
    .treasury-expense-kpis strong { display:block; margin-top:3px; color:#9a3541; font-size:17px; }
    .treasury-expense-custom-category { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; padding:11px; border:1px dashed #9db2e7; border-radius:10px; background:#f6f8ff; }
    .treasury-expense-custom-category.hidden { display:none; }
    .treasury-expense-custom-actions { display:flex; gap:7px; padding-bottom:1px; }
    .treasury-expense-evidence input[type="file"] { min-height:38px; padding:6px 8px; border:1px dashed #9db2e7; border-radius:8px; background:#f8faff; font-size:10px; }
    .treasury-expense-evidence span { color:var(--muted); font-size:9px; font-weight:600; line-height:1.3; }
    .treasury-expense-category-section { margin:0 16px 13px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fafbfe; }
    .treasury-expense-category-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:9px; }
    .treasury-expense-category-head strong { color:#17335f; font-size:13px; }
    .treasury-expense-category-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; max-height:238px; overflow:auto; }
    .treasury-expense-category-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-height:48px; padding:8px 9px; border:1px solid #dbe3f3; border-radius:9px; background:#fff; }
    .treasury-expense-category-card span { color:#445574; font-size:10px; line-height:1.25; }
    .treasury-expense-category-card strong { color:#9a3541; font-size:12px; white-space:nowrap; }
    .treasury-expense-chart { display:grid; grid-template-columns:repeat(7,minmax(42px,1fr)); align-items:end; gap:7px; min-height:142px; margin:0 16px 13px; padding:14px 12px 9px; border:1px solid var(--line); border-radius:10px; background:#fafbfe; }
    .treasury-expense-bar { display:grid; grid-template-rows:18px 82px 16px; align-items:end; gap:4px; min-width:0; text-align:center; }
    .treasury-expense-bar strong { color:#9a3541; font-size:10px; overflow:hidden; text-overflow:ellipsis; }
    .treasury-expense-bar i { display:block; width:min(28px,75%); min-height:3px; margin:0 auto; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#ef777f,#bd2938); }
    .treasury-expense-bar span { color:var(--muted); font-size:10px; font-weight:800; }
    .treasury-expense-example-note { margin:0 16px 12px; border:1px solid #ecd28c; border-radius:8px; padding:8px 10px; background:#fffaf0; color:#795a14; font-size:11px; }
    .treasury-expense-example-note.hidden { display:none; }
    .treasury-expense-form-actions { display:flex; gap:10px; align-items:center; }
    .treasury-expense-form-actions .primary { flex:1; }
    .treasury-expense-ledger-head { padding:14px 16px 10px; border-top:1px solid var(--line); }
    .treasury-expense-ledger-head h3 { margin:0 0 4px; color:#17345f; }
    .treasury-expense-table { max-height:380px; overflow:auto; border-top:1px solid var(--line); }
    .treasury-expense-table table { white-space:nowrap; font-size:11px; }
    .treasury-expense-table th { position:sticky; top:0; z-index:1; background:#f7f9fd; }
    .treasury-expense-table td:nth-child(2) { white-space:normal; min-width:180px; }
    .treasury-expense-actions { display:flex; gap:6px; }
    .treasury-expense-edit { border:1px solid #9bb9ef; background:#edf4ff; color:#164fbb; border-radius:8px; padding:6px 9px; cursor:pointer; }
    .treasury-expense-audit { border-top:1px solid var(--line); padding:14px 16px; }
    .treasury-expense-audit-list { display:grid; gap:7px; margin-top:10px; max-height:230px; overflow:auto; }
    .treasury-expense-audit-item { display:grid; grid-template-columns:125px 100px minmax(150px,1fr) minmax(200px,2fr); gap:10px; align-items:center; border:1px solid #dbe5f5; border-radius:9px; padding:8px 10px; background:#fbfdff; font-size:11px; }
    .treasury-expense-audit-item strong { color:#17345f; text-transform:capitalize; }
    .treasury-expense-audit-item span:last-child { white-space:normal; }
    .treasury-expense-delete { border:0; border-radius:7px; padding:6px 8px; background:#fff0f2; color:#98253a; font-weight:800; cursor:pointer; }
    .treasury-finance-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:0 16px 14px; }
    .treasury-finance-kpis > div { position:relative; overflow:hidden; border:1px solid transparent; border-radius:14px; padding:12px; box-shadow:0 8px 20px rgba(37,99,235,.08); }
    .treasury-finance-kpis > div::after { content:""; position:absolute; right:-18px; bottom:-24px; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.45); }
    .treasury-finance-kpis span { display:block; font-size:10px; font-weight:800; color:#334155; }
    .treasury-finance-kpis strong { display:block; margin-top:5px; font-size:18px; color:#0f172a; }
    .treasury-finance-kpis .income { background:linear-gradient(135deg,#bbf7d0,#6ee7b7); border-color:#4ade80; }
    .treasury-finance-kpis .balance { background:linear-gradient(135deg,#bae6fd,#7dd3fc); border-color:#38bdf8; }
    .treasury-finance-kpis .pending { background:linear-gradient(135deg,#fef08a,#fcd34d); border-color:#facc15; }
    .treasury-finance-kpis .receivable { background:linear-gradient(135deg,#ddd6fe,#c4b5fd); border-color:#a78bfa; }
    .treasury-smart-alerts { margin:0 16px 14px; padding:13px; border:1px solid #fdba74; border-radius:14px; background:linear-gradient(135deg,#fff7ed,#fffbeb); }
    #treasuryExpenseAlerts { display:grid; gap:7px; }
    .treasury-alert-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 10px; border-radius:9px; background:#fff; border-left:4px solid #f59e0b; font-size:11px; }
    .treasury-alert-row.danger { border-left-color:#f43f5e; background:#fff1f2; }
    .treasury-alert-row.ok { border-left-color:#22c55e; background:#f0fdf4; }
    .treasury-control-center { margin:0 16px 14px; border:1px solid #c4b5fd; border-radius:16px; background:linear-gradient(145deg,#faf5ff,#eff6ff 55%,#ecfeff); overflow:hidden; }
    .treasury-control-title { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px; background:linear-gradient(100deg,#7c3aed,#2563eb,#0891b2); color:#fff; }
    .treasury-control-title h3 { margin:0 0 3px; }
    .treasury-control-title span { font-size:10px; opacity:.9; }
    .treasury-export-actions { display:flex; gap:7px; }
    .treasury-export-actions .mini { background:#fff; color:#4338ca; border-color:#fff; }
    .treasury-control-center details { border-top:1px solid rgba(99,102,241,.16); background:rgba(255,255,255,.72); }
    .treasury-control-center summary { padding:11px 14px; color:#3730a3; font-size:12px; font-weight:900; cursor:pointer; }
    .treasury-mini-form { display:grid; grid-template-columns:repeat(5,minmax(110px,1fr)); gap:7px; padding:0 13px 11px; }
    .treasury-mini-form input,.treasury-mini-form select { min-width:0; min-height:36px; border:1px solid #c7d2fe; border-radius:9px; padding:7px 9px; background:#fff; }
    .treasury-control-list { display:grid; gap:6px; padding:0 13px 12px; }
    .treasury-control-row { display:grid; grid-template-columns:minmax(180px,1fr) repeat(3,auto); align-items:center; gap:9px; padding:8px 10px; border:1px solid #dbeafe; border-radius:10px; background:#fff; font-size:10px; }
    .treasury-control-row strong { color:#1e3a8a; }
    .treasury-progress { height:7px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
    .treasury-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#22c55e,#eab308,#f43f5e); }
    .expense-status { display:inline-flex; border-radius:999px; padding:4px 8px; font-size:9px; font-weight:900; }
    .expense-status.pagado { background:#dcfce7; color:#15803d; }.expense-status.aprobado{background:#dbeafe;color:#1d4ed8}.expense-status.pendiente{background:#fef3c7;color:#a16207}.expense-status.observado{background:#ffedd5;color:#c2410c}.expense-status.anulado{background:#ffe4e6;color:#be123c}
    .treasury-expense-approve,.treasury-expense-pay,.treasury-expense-observe,.treasury-expense-rectify { border:0; border-radius:7px; padding:6px 8px; font-size:10px; font-weight:800; cursor:pointer; }
    .treasury-expense-approve{background:#dbeafe;color:#1d4ed8}.treasury-expense-pay{background:#dcfce7;color:#15803d}.treasury-expense-observe{background:#ffedd5;color:#c2410c}.treasury-expense-rectify{background:#ede9fe;color:#6d28d9}
    .treasury-expense-form-panel { background:linear-gradient(180deg,#ffffff,#fff7ed 54%,#f0fdf4); border-color:#fed7aa; }
    .treasury-expense-report-panel { background:linear-gradient(180deg,#ffffff,#f0f9ff); border-color:#bae6fd; }
    @media print {
      body.treasury-print #treasuryExpensesDashboard,
      body.treasury-print #treasuryExpensesDashboard * { visibility:visible !important; }
      body.treasury-print #treasuryExpensesDashboard { position:absolute; inset:0; display:block !important; width:100%; background:#fff; }
      body.treasury-print .treasury-expense-form-panel,
      body.treasury-print .treasury-main-tabs,
      body.treasury-print .treasury-export-actions,
      body.treasury-print .treasury-expense-actions { display:none !important; }
      body.treasury-print .treasury-expense-grid { display:block; }
      body.treasury-print .treasury-expense-report-panel { border:0; box-shadow:none; }
      body.treasury-print .treasury-expense-table { max-height:none; overflow:visible; }
    }
    .treasury-header-panel { padding:16px; }
    .treasury-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
    .treasury-kpi { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff; }
    .treasury-kpi span,.treasury-kpi small { display:block; color:var(--muted); font-size:11px; }
    .treasury-kpi strong { display:block; font-size:24px; margin:3px 0; color:var(--ink); }
    .treasury-workspace { display:grid; grid-template-columns:minmax(560px,1.55fr) minmax(360px,1fr); gap:14px; min-width:0; }
    .treasury-list-panel,.treasury-detail-panel { min-width:0; overflow:hidden; }
    .treasury-tools { display:grid; grid-template-columns:minmax(180px,1fr) 145px 175px; gap:8px; padding:13px; border-bottom:1px solid var(--line); }
    .treasury-tools input,.treasury-tools select { min-height:38px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; color:var(--ink); }
    .treasury-table-wrap { max-height:610px; overflow:auto; }
    .treasury-table-wrap table { white-space:nowrap; font-size:12px; }
    .treasury-table-wrap th { position:sticky; top:0; z-index:1; background:#f7f9fd; }
    .treasury-table-wrap td,.treasury-table-wrap th { padding:9px 10px; }
    .treasury-table-wrap tr[data-treasury-id] { cursor:pointer; }
    .treasury-table-wrap tr[data-treasury-id]:hover,.treasury-table-wrap tr.selected { background:#eef3ff; }
    .treasury-name { font-weight:800; display:block; }
    .treasury-person { display:flex; gap:11px; align-items:center; padding:15px; color:#fff; background:linear-gradient(135deg,#161d40,#27376f); }
    .treasury-person h3 { margin:0; font-size:16px; }
    .treasury-person span { color:#cbd4ef; font-size:11px; }
    .treasury-avatar { width:44px; height:44px; flex:0 0 44px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#16204b; font-weight:900; }
    .treasury-tabs { display:flex; overflow:auto; border-bottom:1px solid var(--line); padding:0 9px; }
    .treasury-tabs button { border:0; border-bottom:2px solid transparent; background:none; padding:11px 8px 9px; color:var(--muted); font-weight:800; font-size:11px; cursor:pointer; white-space:nowrap; }
    .treasury-tabs button.active { color:#244fc4; border-color:#244fc4; }
    .treasury-pane { display:none; padding:14px; max-height:535px; overflow:auto; }
    .treasury-pane.active { display:block; }
    .treasury-facts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .treasury-fact { border:1px solid var(--line); border-radius:8px; padding:8px 9px; min-width:0; }
    .treasury-fact span { display:block; color:var(--muted); font-size:10px; margin-bottom:3px; }
    .treasury-fact strong { display:block; font-size:12px; overflow-wrap:anywhere; }
    .treasury-months { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .treasury-month { border:1px solid var(--line); border-radius:8px; padding:8px; font-size:10px; }
    .treasury-month.paid { border-color:#9bd5c1; background:#f1faf6; }
    .treasury-month.pending { border-color:#ecc679; background:#fffaf0; }
    .treasury-month b,.treasury-month span { display:block; }
    .treasury-alert { border-radius:8px; padding:9px 10px; margin-bottom:7px; background:#fff0f2; color:#98253a; font-size:11px; }
    .treasury-payment-edit { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
    .treasury-payment-edit label { color:var(--muted); font-size:10px; }
    .treasury-payment-edit input,.treasury-payment-edit select { width:100%; margin-top:3px; border:1px solid var(--line); border-radius:7px; padding:7px; }
    .treasury-payment-edit button { grid-column:1/-1; }
    @media(max-width:1050px){.treasury-workspace,.treasury-daily-grid,.treasury-expense-grid{grid-template-columns:1fr}.treasury-detail-panel{order:-1}.treasury-kpis{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:700px){.treasury-tools,.treasury-daily-filters{grid-template-columns:1fr}.treasury-kpis,.treasury-expense-kpis,.treasury-finance-kpis{grid-template-columns:1fr 1fr}.treasury-facts,.treasury-months{grid-template-columns:1fr}.treasury-payment-edit{grid-template-columns:1fr}.treasury-main-tabs{width:100%;overflow:auto}.treasury-main-tabs button{flex:1 0 auto}.treasury-expense-report-head{align-items:flex-start;flex-direction:column}.treasury-expense-periods{width:100%}.treasury-expense-periods button{flex:1}.treasury-expense-custom-category{grid-template-columns:1fr}.treasury-expense-category-summary{grid-template-columns:1fr 1fr}.treasury-expense-category-head,.treasury-control-title{align-items:flex-start;flex-direction:column}.treasury-mini-form{grid-template-columns:1fr}.treasury-control-row{grid-template-columns:1fr}.treasury-expense-chart{gap:3px;padding-left:6px;padding-right:6px}.treasury-expense-bar strong{font-size:9px}}

    .payment-receipt {
      border: 2px solid #b20d18;
      border-radius: 18px;
      padding: 22px;
      background: #ffffff;
      color: #1f1f1f;
      box-shadow: 0 18px 35px rgba(178, 13, 24, .08);
    }

    .receipt-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: start;
      border-bottom: 1px solid #ef4b55;
      padding-bottom: 14px;
    }

    .receipt-brand h2 {
      margin: 0;
      color: #b20d18;
      font-family: Georgia, serif;
      font-size: 34px;
      letter-spacing: 2px;
    }

    .payment-concept-field { position:relative; }
    .payment-concept-choices { display:flex; gap:5px; position:absolute; right:0; top:-4px; }
    .payment-concept-choices button { border:1px solid #cfd9ef; border-radius:999px; padding:3px 8px; background:#fff; color:var(--muted); font-size:9px; font-weight:800; cursor:pointer; }
    .payment-concept-choices button:hover { border-color:#244fc4; color:#244fc4; }
    .payment-concept-choices button.active { border-color:#244fc4; background:#eef3ff; color:#244fc4; }
    .payment-family-toggle { display:flex; gap:10px; align-items:center; border:1px solid #cfe0f7; border-radius:10px; padding:10px 12px; background:#f7faff; cursor:pointer; }
    .payment-family-toggle input { width:18px; height:18px; accent-color:#244fc4; }
    .payment-family-toggle span { display:grid; gap:2px; }
    .payment-family-toggle small { color:var(--muted); }
    .payment-family-panel { border:1px solid #bdd3f2; border-radius:12px; padding:12px; background:#f9fbff; }
    .payment-family-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px; }
    .payment-family-head > div { display:grid; gap:3px; }
    .payment-family-head span { color:var(--muted); font-size:11px; }
    #paymentFamilyAllocations { display:grid; gap:8px; }
    .payment-family-allocation { display:grid; grid-template-columns:22px minmax(180px,1fr) 130px 110px; gap:10px; align-items:center; border:1px solid #dce7f6; border-radius:9px; padding:8px 10px; background:#fff; }
    .payment-family-allocation input[type="checkbox"] { width:17px; height:17px; accent-color:#244fc4; }
    .payment-family-allocation label { display:grid; gap:2px; }
    .payment-family-allocation small { color:var(--muted); }
    .payment-family-allocation input[type="number"] { min-width:0; }
    .payment-family-totals { display:flex; justify-content:space-between; gap:12px; margin-top:10px; border-top:1px solid #dce7f6; padding-top:10px; }
    .payment-family-totals span { color:var(--muted); }
    .payment-family-totals .bad { color:#b4233a; }
    .payment-family-totals .ok { color:#08734f; }
    .treasury-family-detail summary { cursor:pointer; color:#194b9b; font-weight:800; }
    .treasury-family-detail div { display:grid; gap:3px; padding-top:5px; white-space:normal; }
    @media (max-width:760px) { .payment-family-allocation { grid-template-columns:22px 1fr; } .payment-family-allocation input[type="number"], .payment-family-allocation .pill { grid-column:2; } }

    .receipt-brand span {
      display: block;
      color: #b20d18;
      letter-spacing: 7px;
      font-weight: 800;
      margin-top: 4px;
    }

    .receipt-number {
      border: 1px solid #ef4b55;
      border-radius: 10px;
      overflow: hidden;
      min-width: 190px;
      text-align: center;
    }

    .receipt-number strong {
      display: block;
      color: #fff;
      background: #b20d18;
      padding: 10px;
      font-family: Georgia, serif;
      font-size: 20px;
    }

    .receipt-number span {
      display: block;
      color: #b20d18;
      padding: 16px;
      font-size: 24px;
      font-weight: 900;
    }

    .receipt-lines {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }

    .receipt-line {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 16px;
      align-items: end;
    }

    .receipt-line b {
      color: #b20d18;
      font-family: Georgia, serif;
      text-transform: uppercase;
    }

    .receipt-value {
      min-height: 34px;
      border-bottom: 1px solid #ef4b55;
      padding: 4px 0;
      font-size: 18px;
    }

    .receipt-amount-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items: center;
    }

    .receipt-amount {
      font-size: 28px;
      font-weight: 900;
    }

    .receipt-methods {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 6px;
      color: #222;
    }

    .receipt-methods span::before {
      content: "";
      display: inline-block;
      width: 13px;
      height: 13px;
      border: 1px solid #b20d18;
      margin-right: 5px;
      vertical-align: -2px;
    }

    .receipt-methods span.active::before {
      background: #b20d18;
      box-shadow: inset 0 0 0 3px #fff;
    }

    .receipt-footer {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: end;
      margin-top: 24px;
    }

    .receipt-thanks {
      border-radius: 10px;
      background: #fff0f1;
      padding: 14px;
      color: #8f0b14;
    }

    .receipt-sign {
      text-align: center;
      border-top: 1px solid #b20d18;
      padding-top: 10px;
      color: #8f0b14;
      font-weight: 800;
    }

    .payment-control-panel {
      grid-column: 1 / -1;
    }

    .payment-control-panel .panel-head {
      align-items: end;
    }

    .payment-control-tools {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 180px 150px;
      gap: 8px;
      margin: 12px 0;
    }

    .payment-control-tools input,
    .payment-control-tools select {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      background: #fff;
      color: var(--ink);
      font-size: 13px;
    }

    .payment-control-panel table {
      font-size: 12px;
    }

    .user-directory-tools {
      display: grid;
      gap: 10px;
      margin: 12px 0;
    }

    .user-workspace {
      display: grid;
      gap: 16px;
    }

    .user-workspace-header {
      display: grid;
      grid-template-columns: minmax(250px, .7fr) minmax(560px, 1.3fr);
      gap: 18px;
      align-items: center;
      padding: 12px 14px;
      border-color: #dce7f7;
      border-top: 3px solid #b7183b;
      background: linear-gradient(135deg, #ffffff 0%, #f8faff 64%, #fff8f9 100%);
    }

    .user-workspace-heading h2,
    .user-panel-heading h2 {
      margin: 3px 0 0;
      color: #172033;
    }

    .user-workspace-heading p,
    .user-panel-heading p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .user-workspace-kicker,
    .user-panel-eyebrow {
      color: #b01835;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .user-workspace-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      padding: 4px;
      border: 1px solid #dfe5ef;
      border-radius: 14px;
      background: #f2f5fa;
      box-shadow: inset 0 1px 2px rgba(33, 46, 73, .04);
    }

    .user-workspace-tab {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 50px;
      padding: 7px 10px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: #526078;
      text-align: left;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .user-workspace-tab:hover { background: rgba(255, 255, 255, .72); color: #90102a; }
    .user-workspace-tab.active {
      border-color: #e6d2d8;
      background: #fff;
      color: #97112e;
      box-shadow: 0 5px 14px rgba(63, 74, 96, .11);
    }
    .user-workspace-tab.active::after {
      content: "";
      position: absolute;
      right: 10px;
      top: 9px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #c11940;
      box-shadow: 0 0 0 4px rgba(193, 25, 64, .09);
    }
    .user-workspace-tab-icon {
      display: grid;
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      place-items: center;
      border: 1px solid #dce3ed;
      border-radius: 10px;
      background: #fff;
      color: #68758b;
    }
    .user-workspace-tab-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
    .user-workspace-tab.active .user-workspace-tab-icon { border-color: transparent; background: linear-gradient(145deg, #c61c43, #8f102b); color: #fff; box-shadow: 0 4px 10px rgba(143, 16, 43, .18); }
    .user-workspace-tab-text { display: grid; gap: 1px; min-width: 0; }
    .user-workspace-tab-title { font-size: 13px; font-weight: 850; }
    .user-workspace-tab-copy { overflow: hidden; font-size: 10px; opacity: .78; text-overflow: ellipsis; white-space: nowrap; }

    .user-workspace-panel { min-width: 0; padding: 16px; }
    .user-panel-heading { align-items: flex-start; gap: 18px; }
    .user-panel-heading > div { min-width: 0; }
    .user-create-form { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .user-create-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }
    .user-create-actions .primary { min-width: 180px; }
    .user-directory-panel .table-wrap { max-height: min(62vh, 680px); }
    .user-directory-panel table { min-width: 1180px; }

    .user-staff-panel {
      display: grid;
      gap: 16px;
      padding: 0;
    }

    .user-staff-panel.hidden { display: none; }

    .user-staff-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      border-color: #dce7f7;
      background: linear-gradient(135deg, #fff 0%, #f8faff 62%, #fff4f6 100%);
    }

    .user-staff-summary h2 { margin: 3px 0 0; }
    .user-staff-summary p { max-width: 780px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
    .user-staff-summary .primary { flex: 0 0 auto; }
    .user-staff-filters { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr); gap: 10px; }

    #usersView #teacherUserFields {
      grid-template-columns: minmax(150px, .62fr) minmax(230px, 1fr) minmax(230px, 1fr);
      grid-template-areas:
        "level areas classes"
        "add areas classes"
        "tutor tutor-class tutor-class";
      gap: 9px 12px;
      align-items: start;
      padding: 12px;
      border-radius: 13px;
      background: linear-gradient(135deg, rgba(124, 58, 237, .025), rgba(190, 24, 61, .025));
    }
    #usersView #teacherUserFields .teacher-level-field { grid-area: level; align-self: start; }
    #usersView #teacherUserFields .teacher-areas-field { grid-area: areas; }
    #usersView #teacherUserFields #createTeacherArea { grid-area: add; align-self: start; margin-top: 2px; padding: 6px 9px; min-height: 31px; font-size: 11px; }
    #usersView #teacherUserFields .teacher-classes-field { grid-area: classes; }
    #usersView #teacherUserFields .tutor-check { grid-area: tutor; min-height: 38px; margin: 0; }
    #usersView #teacherUserFields .teacher-tutor-class { grid-area: tutor-class; }
    #usersView #teacherUserFields .teacher-level-field select,
    #usersView #teacherUserFields .teacher-tutor-class select { min-height: 38px; height: 38px; }
    #usersView #teacherUserFields .checkbox-picker { min-height: 0; height: 126px; max-height: 126px; padding: 5px; border-radius: 10px; }
    #usersView #teacherUserFields .checkbox-option { gap: 7px; padding: 4px 6px; font-size: 12px; }
    #usersView #teacherUserFields small { display: none; }

    .user-directory-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .user-directory-filters button[aria-pressed="true"] {
      background: linear-gradient(135deg, #f45268, #9a1029);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 8px 18px rgba(154, 16, 41, .18);
    }

    .user-directory-search {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      background: #fff;
      color: var(--ink);
      font-size: 13px;
      width: 100%;
      max-width: 620px;
    }

    .user-directory-search-row {
      display: grid;
      grid-template-columns: minmax(260px, 620px) auto auto;
      gap: 8px;
      align-items: center;
    }

    .user-directory-search-row .user-directory-search { max-width: none; }
    .user-directory-search-row .primary,
    .user-directory-search-row .ghost { min-height: 38px; white-space: nowrap; }

    @media (max-width: 1050px) {
      .user-workspace-header { grid-template-columns: 1fr; }
      .user-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 900px) {
      #usersView #teacherUserFields {
        grid-template-columns: minmax(145px, .55fr) minmax(240px, 1fr);
        grid-template-areas:
          "level areas"
          "add areas"
          "classes classes"
          "tutor tutor-class";
      }
    }

    @media (max-width: 680px) {
      .user-workspace-header,
      .user-workspace-panel { padding: 14px; }
      .user-create-form { grid-template-columns: 1fr; }
      .user-create-form .span-2 { grid-column: auto; }
      .user-create-actions { align-items: stretch; flex-direction: column; }
      .user-create-actions .primary { width: 100%; }
      .user-panel-heading { align-items: flex-start; flex-direction: column; }
      .user-workspace-tabs { grid-template-columns: 1fr; }
      .user-directory-search-row { grid-template-columns: 1fr; }
      .user-directory-search-row .primary,
      .user-directory-search-row .ghost { width: 100%; }
      .user-staff-grid, .user-staff-filters { grid-template-columns: 1fr; }
      .user-staff-summary { align-items: stretch; flex-direction: column; }
      .user-staff-summary .primary { width: 100%; }
      #usersView #teacherUserFields {
        grid-template-columns: 1fr;
        grid-template-areas: "level" "areas" "classes" "add" "tutor" "tutor-class";
      }
      #usersView #teacherUserFields .checkbox-picker { height: 112px; max-height: 112px; }
    }

    @media (max-width: 480px) {
      .user-workspace-heading p,
      .user-workspace-tab-copy { display: none; }
      .user-workspace-tab { min-height: 46px; padding: 6px 8px; }
      .user-workspace-tab-icon { flex-basis: 30px; width: 30px; height: 30px; }
      .user-workspace-tab-title { font-size: 12px; }
    }

    .payment-control-panel th,
    .payment-control-panel td {
      padding: 8px 9px;
    }

    @media (max-width: 860px) {
      .payment-control-tools {
        grid-template-columns: 1fr;
      }
    }

    @media print {
      body * { visibility: hidden !important; }
      #paymentReceipt, #paymentReceipt * { visibility: visible !important; }
      #paymentReceipt {
        position: absolute;
        inset: 0;
        width: 100%;
        box-shadow: none;
      }
    }

    .grade-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: 14px;
    }

    .grade-summary .stat {
      min-height: 88px;
      border-radius: 12px;
    }

    .gradebook-score {
      width: 78px;
      border: 1px solid #cfd3d8;
      border-radius: 8px;
      padding: 7px 8px;
      text-align: center;
      font-weight: 850;
    }

    .gradebook-score.low { border-color: #f0b9be; background: #fff4f4; color: #ad2632; }
    .gradebook-score.mid { border-color: #f0d28b; background: #fff9e8; color: #875707; }
    .gradebook-score.high { border-color: #b7e4d8; background: #effdf8; color: #08745d; }

    .grade-attendance-panel {
      margin: 14px;
      padding: 13px;
      border: 1px solid #dbe6f5;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    }

    .grade-attendance-toolbar {
      display: grid;
      grid-template-columns: minmax(190px, 1.4fr) 130px 150px 150px repeat(3, max-content);
      gap: 10px;
      align-items: end;
      margin: 12px 0;
    }

    .grade-attendance-table {
      max-height: 460px;
      overflow: auto;
      border: 1px solid #d8e4f2;
      border-radius: 12px;
      background: white;
    }

    .grade-attendance-table table {
      min-width: 980px;
      font-size: 12px;
    }

    .grade-attendance-table th {
      position: sticky;
      top: 0;
      z-index: 2;
      color: #1f365c;
      background: #eef6ff;
      border-bottom: 2px solid #c8d9ef;
      text-align: center;
      white-space: nowrap;
    }

    .grade-attendance-table td {
      text-align: center;
      vertical-align: middle;
    }

    .grade-attendance-table .student-name {
      min-width: 230px;
      text-align: left;
      font-weight: 800;
    }

    .grade-attendance-code {
      display: inline-flex;
      min-width: 32px;
      min-height: 28px;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      border: 1px solid #c9d7e8;
      background: #f8fbff;
      color: #334155;
      font-weight: 900;
    }

    .grade-attendance-code[data-code="A"] { color: #08745d; background: #effdf8; border-color: #b7e4d8; }
    .grade-attendance-code[data-code="T"],
    .grade-attendance-code[data-code="TI"],
    .grade-attendance-code[data-code="TJ"] { color: #875707; background: #fff9e8; border-color: #f0d28b; }
    .grade-attendance-code[data-code="F"],
    .grade-attendance-code[data-code="FI"],
    .grade-attendance-code[data-code="FJ"] { color: #ad2632; background: #fff4f4; border-color: #f0b9be; }
    .grade-attendance-code[data-code="P"] { color: #1f5ea8; background: #eaf3ff; border-color: #b7d4ff; }

    .competency-matrix {
      margin: 14px;
      padding: 13px;
      border: 1px solid #dbe6f5;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      box-shadow: 0 10px 24px rgba(31, 94, 168, .07);
    }

    .competency-matrix-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .competency-matrix-head h2 {
      font-size: 16px;
    }

    .competency-matrix-table {
      max-height: 420px;
      overflow: auto;
      border: 1px solid #d8e4f2;
      border-radius: 12px;
      background: white;
    }

    .competency-matrix-table table {
      min-width: 1180px;
      font-size: 12px;
    }

    .competency-matrix-table th {
      position: sticky;
      top: 0;
      z-index: 2;
      color: #1f365c;
      background: #eef6ff;
      border-bottom: 2px solid #c8d9ef;
      text-align: center;
    }

    .competency-matrix-table td {
      border-color: #e2e8f0;
      vertical-align: middle;
    }

    .competency-area {
      width: 132px;
      color: #7c2431;
      background: linear-gradient(135deg, #ffe4e7 0%, #f8b7bf 58%, #f39aa6 100%);
      font-weight: 900;
      text-align: center;
      border-right: 2px solid #fff7f8;
    }

    .competency-text {
      width: 310px;
      color: #172033;
      font-weight: 750;
      line-height: 1.28;
    }

    .competency-fill {
      width: 54px;
      min-height: 34px;
      border: 1.5px solid #b9cce4;
      border-radius: 8px;
      padding: 6px 8px;
      background: #fbfdff;
      color: #172033;
      font-size: 13px;
      font-weight: 850;
      line-height: 1;
      text-align: center;
      outline-color: var(--blue);
    }

    .competency-fill::placeholder {
      color: #9aaac0;
      font-weight: 750;
    }

    .competency-fill:focus {
      border-color: #1f5ea8;
      box-shadow: 0 0 0 3px rgba(31, 94, 168, .12);
    }

    .class-link-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 5px 9px;
      background: var(--blue-soft);
      color: var(--blue);
      font-size: 12px;
      font-weight: 850;
    }

    .students-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .student-filter-toolbar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 10px;
      align-items: end;
      margin-bottom: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--soft);
    }

    .student-filter-toolbar .field {
      min-width: 0;
    }

    .student-filter-toolbar .field:has(#notesStudentFilter),
    .student-filter-toolbar .field:has(#intranetNotesStudent) {
      grid-column: span 2;
      min-width: 270px;
    }

    #notesStudentFilter,
    #intranetNotesStudent {
      min-width: 0;
      font-size: 12.5px;
    }

    .student-filter-toolbar .ghost {
      justify-self: start;
      white-space: nowrap;
    }

    .student-filter-toolbar > button {
      min-height: 40px;
      justify-self: start;
      white-space: nowrap;
    }

    @media (max-width: 760px) {
      .student-filter-toolbar .field:has(#notesStudentFilter),
      .student-filter-toolbar .field:has(#intranetNotesStudent) {
        grid-column: 1 / -1;
        min-width: 0;
      }
    }

    .official-report {
      margin-top: 16px;
      border: 1px solid #9aa7b7;
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      transform-origin: top left;
    }

    .official-report-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 14px;
      background: #f3f6fa;
      border-bottom: 1px solid #9aa7b7;
    }

    .official-report-head h3 {
      margin: 0;
      font-size: 15px;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #182235;
    }

    .initial-document-header {
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr) 108px;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border: 0;
      background: #fff;
    }

    .initial-document-center {
      min-width: 0;
      border: 0;
    }

    .initial-document-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      min-height: 118px;
      padding: 4px;
      border: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .initial-document-logo img {
      display: block;
      width: 100%;
      max-width: 92px;
      max-height: 108px;
      object-fit: contain;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
    }

    .initial-document-logo.school img {
      max-width: 88px;
      max-height: 105px;
    }

    .initial-document-center .official-form-grid {
      border-bottom: 0;
    }

    .official-form-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-bottom: 1px solid #9aa7b7;
    }

    .official-field {
      min-height: 54px;
      padding: 7px 9px;
      border-right: 1px solid #c5ccd5;
      border-bottom: 1px solid #d9dee5;
      background: #fff;
    }

    .official-field.wide {
      grid-column: span 2;
    }

    .official-field label {
      display: block;
      margin-bottom: 4px;
      color: #4b5565;
      font-size: 10px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .official-field input,
    .official-field select {
      width: 100%;
      border: 0;
      border-bottom: 1px solid #aeb7c2;
      border-radius: 0;
      padding: 2px 0;
      background: #fff9d8;
      font-size: 12px;
      font-weight: 750;
      color: #111827;
    }

    .official-field input[readonly] {
      cursor: default;
      background: #f3f6fa;
      color: #1f2937;
      border-bottom-color: #c5ccd5;
    }

    .official-table-wrap {
      overflow-x: auto;
      scrollbar-width: none;
    }

    .official-table-wrap::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .official-table-scroll-top {
      height: 19px;
      overflow-x: auto;
      overflow-y: hidden;
      border: 0;
      background: transparent;
      scrollbar-color: #8a9098 #edf1f5;
      scrollbar-width: auto;
    }

    .official-table-scroll-top > div {
      height: 1px;
    }

    .official-table {
      min-width: 1540px;
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }

    .official-table th,
    .official-table td {
      border: 1px solid #9aa7b7;
      padding: 5px;
      vertical-align: top;
    }

    .official-table th {
      background: #e9eef5;
      color: #1f2937;
      text-align: center;
      font-weight: 900;
    }

    .official-table .area-cell {
      width: 130px;
      background: #f8fafc;
      font-weight: 900;
      text-transform: uppercase;
      text-align: center;
      vertical-align: middle;
    }

    .official-table .competency-cell {
      width: 260px;
      font-weight: 650;
    }

    .official-table .nl-cell {
      width: 54px;
    }

    .official-table .desc-cell {
      width: 190px;
    }

    @media screen {
      .official-table tr.area-total-row > td,
      .official-table tr.area-total-row select {
        background: #dbeafe;
      }

      .official-table tr.area-total-row > td {
        color: #163a69;
        font-weight: 900;
        font-size: 12.5px;
      }

      .official-table tr.area-total-row select {
        font-size: 12px;
        font-weight: 800;
      }
    }

    .official-table select,
    .official-table textarea {
      width: 100%;
      border: 1px solid #c8d0da;
      border-radius: 4px;
      background: #fff9d8;
      font-size: 11px;
    }

    .official-table textarea {
      min-height: 58px;
      resize: vertical;
    }

    .initial-native-notebook .official-table {
      min-width: 920px;
    }

    .initial-native-notebook .official-table .desc-cell {
      width: 420px;
      position: relative;
      padding: 0;
      background: #fff9d8;
      vertical-align: stretch;
    }

    .initial-native-notebook .official-table .desc-cell textarea {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 72px;
      margin: 0;
      padding: 5px;
      border: 0;
      border-radius: 0;
      background: #fff9d8;
      box-shadow: none;
    }

    .primary-native-notebook {
      max-width: 1120px;
      margin-inline: auto;
      border-color: #6f7885;
      box-shadow: 0 18px 45px rgba(19, 33, 57, .12);
    }

    .primary-native-notebook .official-report-head {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      padding: 15px 24px 12px;
      text-align: center;
      background: #fff;
      border-bottom: 2px solid #566171;
    }

    .primary-native-notebook .official-report-head h3 {
      font-family: "Times New Roman", serif;
      font-size: 18px;
      color: #111;
    }

    .primary-native-notebook .official-report-head .muted {
      display: block;
      max-width: 680px;
      font-size: 10px;
      line-height: 1.35;
      text-align: center;
    }

    .primary-native-notebook .official-form-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      background: #fff;
    }

    .primary-native-notebook .official-form-grid > .official-field {
      grid-column: span 3;
      padding: 8px 10px;
    }

    .primary-native-notebook .official-form-grid > .official-field:nth-child(5),
    .primary-native-notebook .official-form-grid > .official-field:nth-child(8) {
      grid-column: span 6;
    }

    .primary-native-notebook .official-form-grid > .official-field:nth-child(11) {
      grid-column: 1 / -1;
      border-right: 0;
    }

    .primary-native-notebook .official-field label {
      min-height: 14px;
      text-align: center;
    }

    .primary-native-notebook .official-field input {
      min-height: 25px;
      padding: 4px 7px;
      text-align: center;
    }

    .academic-document-header {
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr) 108px;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      background: #fff;
      border: 0;
    }

    .academic-document-center {
      min-width: 0;
      border: 0;
      background: #fff;
    }

    .academic-document-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      min-height: 118px;
      padding: 4px;
      border: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .academic-document-logo img {
      display: block;
      width: 100%;
      max-width: 92px;
      max-height: 108px;
      object-fit: contain;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
    }

    .academic-document-logo.ministry img {
      max-width: 88px;
      max-height: 105px;
    }

    .primary-native-notebook .academic-document-center .official-report-head,
    .secondary-native-notebook .academic-document-center .official-report-head {
      min-height: 34px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2px;
      padding: 5px 8px;
      text-align: center;
      background: #fff;
      border-bottom: 1px solid #7f8b9b;
    }

    .primary-native-notebook .academic-document-center .official-report-head h3,
    .secondary-native-notebook .academic-document-center .official-report-head h3 {
      font-family: "Times New Roman", serif;
      font-size: 12px;
      line-height: 1.1;
      color: #111;
    }

    .academic-document-center .official-report-head .muted {
      max-width: 620px;
      font-size: 7px;
      line-height: 1.15;
    }

    .primary-native-notebook .academic-document-center .official-form-grid,
    .secondary-native-notebook .academic-document-center .official-form-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      border-bottom: 0;
    }

    .primary-native-notebook .academic-document-center .official-form-grid > .official-field,
    .secondary-native-notebook .academic-document-center .official-form-grid > .official-field {
      grid-column: span 3;
      min-height: 29px;
      padding: 3px 5px;
    }

    .primary-native-notebook .academic-document-center .official-form-grid > .official-field:nth-child(5),
    .primary-native-notebook .academic-document-center .official-form-grid > .official-field:nth-child(8),
    .secondary-native-notebook .academic-document-center .official-form-grid > .official-field:nth-child(5),
    .secondary-native-notebook .academic-document-center .official-form-grid > .official-field:nth-child(8) {
      grid-column: span 6;
    }

    .primary-native-notebook .academic-document-center .official-form-grid > .official-field:nth-child(11),
    .secondary-native-notebook .academic-document-center .official-form-grid > .official-field:nth-child(11) {
      grid-column: 1 / -1;
      border-right: 0;
    }

    .academic-document-center .official-field label {
      min-height: 0 !important;
      margin-bottom: 1px;
      font-size: 7px;
      line-height: 1;
      text-align: center;
    }

    .academic-document-center .official-field input,
    .academic-document-center .official-field select {
      min-height: 14px !important;
      padding: 1px 2px !important;
      border-bottom: 0;
      background: #fff !important;
      font-size: 9px;
      line-height: 1.1;
      text-align: center;
    }

    .primary-native-notebook .official-table {
      width: 720px;
      max-width: 100%;
      min-width: 720px;
      margin-inline: auto;
      table-layout: fixed;
      font-family: Arial, sans-serif;
      font-size: 10px;
    }

    .secondary-native-notebook {
      max-width: 1120px;
      margin-inline: auto;
    }

    .primary-native-notebook,
    .secondary-native-notebook,
    .initial-native-notebook {
      border: 0;
      box-shadow: none;
    }

    .secondary-native-notebook .official-table {
      width: 100%;
      min-width: 740px;
      table-layout: fixed;
    }

    .secondary-a4-layout {
      display: block;
      min-width: 0;
      padding: 18px;
      background: #fff;
      font-family: Arial, sans-serif;
    }

    .secondary-notebook-main,
    .secondary-notebook-side {
      min-width: 0;
    }

    .secondary-native-notebook .secondary-notebook-main .academic-document-header {
      grid-template-columns: 108px minmax(0, 1fr) 108px;
      gap: 10px;
      min-height: 118px;
      padding: 8px 10px 12px;
    }

    .secondary-native-notebook .secondary-notebook-main .academic-document-logo {
      min-height: 108px;
      padding: 4px;
    }

    .secondary-native-notebook .secondary-notebook-main .academic-document-logo img {
      max-width: 88px;
      max-height: 102px;
    }

    .secondary-native-notebook .secondary-notebook-main .official-form-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      border: 1px solid #4d4d4d;
    }

    .secondary-native-notebook .secondary-notebook-main .official-form-grid > .official-field,
    .secondary-native-notebook .secondary-notebook-main .official-form-grid > .official-field:nth-child(5),
    .secondary-native-notebook .secondary-notebook-main .official-form-grid > .official-field:nth-child(8),
    .secondary-native-notebook .secondary-notebook-main .official-form-grid > .official-field:nth-child(11) {
      grid-column: span 3;
      min-height: 34px;
      padding: 5px 7px;
      border-color: #555;
    }

    .secondary-native-notebook .secondary-notebook-main .official-form-grid > .official-field.wide {
      grid-column: span 6;
    }

    .secondary-native-notebook .secondary-notebook-main .official-form-grid > .official-field.full {
      grid-column: 1 / -1;
    }

    .secondary-native-notebook .secondary-notebook-main .official-field label {
      float: none;
      width: auto;
      margin: 0 0 3px;
      color: #111;
      font-size: 8px;
      text-align: center;
    }

    .secondary-native-notebook .secondary-notebook-main .official-field input {
      float: none;
      width: 100%;
      min-height: 20px !important;
      padding: 2px 4px !important;
      font-size: 9px;
      font-weight: 650;
      text-align: center;
    }

    .secondary-native-notebook .secondary-notebook-main .official-field.wide input,
    .secondary-native-notebook .secondary-notebook-main .official-field.full input {
      width: 100%;
    }

    .secondary-native-notebook .secondary-notebook-main .official-field.wide label,
    .secondary-native-notebook .secondary-notebook-main .official-field.full label {
      width: auto;
    }

    .secondary-native-notebook .secondary-notebook-main .official-table-scroll-top {
      display: none;
    }

    .secondary-native-notebook .secondary-notebook-main .official-table {
      min-width: 0;
      border: 1px solid #333;
      font-size: 9px;
    }

    .secondary-native-notebook .secondary-notebook-main .official-table th,
    .secondary-native-notebook .secondary-notebook-main .official-table td {
      padding: 3px 4px;
      border-color: #555;
      line-height: 1.15;
      vertical-align: middle;
    }

    .secondary-native-notebook .secondary-notebook-main .official-table th,
    .secondary-native-notebook .secondary-notebook-main .official-table .area-cell {
      background: #c6c6c6;
      color: #111;
    }

    .secondary-native-notebook .secondary-notebook-main .official-table th {
      font-size: 8px;
      overflow-wrap: anywhere;
    }

    .secondary-native-notebook .secondary-notebook-main .official-table .competency-cell {
      font-size: 9px;
    }

    .secondary-native-notebook .secondary-notebook-main .official-table tr.area-total-row > td,
    .secondary-native-notebook .secondary-notebook-main .official-table tr.area-total-row select {
      background: #dedede;
      color: #111;
      font-weight: 850;
    }

    .secondary-native-notebook .secondary-notebook-main .official-table select {
      min-height: 24px;
      height: 24px;
      border: 0;
      border-radius: 0;
      background: transparent;
      font-size: 9px;
    }

    .secondary-behavior-row th {
      text-transform: uppercase;
      letter-spacing: .02em;
    }

    .secondary-notebook-side {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 18px;
      margin-top: 22px;
      padding: 20px;
      border-top: 2px solid #566171;
      background: #fff;
    }

    .secondary-notebook-side table {
      width: 100%;
      border-collapse: collapse;
      color: #111;
      font-size: 10px;
    }

    .secondary-notebook-side th,
    .secondary-notebook-side td {
      height: 28px;
      padding: 5px 7px;
      border: 1px solid #555;
      text-align: center;
      vertical-align: middle;
    }

    .secondary-notebook-side th {
      background: #c6c6c6;
      font-weight: 700;
      text-transform: uppercase;
    }

    .secondary-behavior-scale {
      grid-column: 9 / -1;
      width: 100%;
      max-width: none;
    }

    .secondary-behavior-scale th {
      width: 52%;
    }

    .secondary-tutor-appreciation {
      grid-column: 1 / -1;
      margin-top: 0;
    }

    .secondary-tutor-appreciation th:first-child {
      width: 24%;
    }

    .secondary-tutor-appreciation th:last-child,
    .secondary-tutor-appreciation .secondary-signature-cell {
      width: 18%;
    }

    .secondary-tutor-appreciation textarea,
    .secondary-tutor-appreciation input,
    .secondary-attendance-statistics input {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 17px;
      margin: 0;
      padding: 1px 2px;
      border: 0;
      border-radius: 0;
      background: #fff9d8;
      color: #111;
      font-size: 8px;
      resize: none;
    }

    .secondary-attendance-block {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 74%) minmax(0, 26%);
      margin-top: 0;
    }

    .secondary-attendance-statistics th,
    .secondary-attendance-statistics td {
      height: 15px;
      padding: 1px 2px;
      font-size: 7px;
    }

    .secondary-director-signature {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 112px;
      padding: 0 8px 4px;
      border: 1px solid #555;
      border-left: 0;
      text-align: center;
      font-size: 7px;
    }

    .secondary-director-signature span {
      display: block;
      margin-bottom: 5px;
      border-top: 1px solid #111;
    }

    .secondary-statistics-legend {
      grid-column: 1 / -1;
      margin: 5px 2px 0;
      font-size: 9px;
      line-height: 1.35;
    }

    @media (max-width: 900px) {
      .secondary-a4-layout {
        padding: 10px;
      }

      .secondary-native-notebook .secondary-notebook-main .academic-document-header {
        grid-template-columns: 76px minmax(0, 1fr) 76px;
      }

      .secondary-behavior-scale {
        grid-column: 1 / -1;
        max-width: 420px;
        margin-left: auto;
      }
    }

    .primary-native-notebook .official-table th {
      background: #d9e2f3;
      color: #111;
      padding: 2px 1px;
      font-size: 8px;
      line-height: 1.05;
      overflow-wrap: anywhere;
      vertical-align: middle;
    }

    .primary-native-notebook .official-table .competency-cell {
      width: 390px;
      padding: 2px 4px;
      font-size: 8px;
      line-height: 1.15;
      vertical-align: middle;
    }

    .primary-native-notebook .official-table .nl-cell {
      width: 58px;
      vertical-align: middle;
    }

    .primary-native-notebook .official-table .area-cell {
      padding: 3px 2px;
      font-size: 7.5px;
      line-height: 1.15;
      overflow-wrap: anywhere;
      word-break: normal;
      vertical-align: middle;
    }

    .primary-native-notebook .official-table .nl-cell,
    .secondary-native-notebook .official-table .nl-cell {
      width: 36px;
      padding-inline: 1px;
      vertical-align: middle;
    }

    .primary-native-notebook .official-table select {
      width: 100%;
      min-width: 28px;
      min-height: 20px;
      height: 20px;
      padding: 1px 0;
      font-size: 8.5px;
      text-align: center;
      font-weight: 850;
    }

    .secondary-native-notebook .official-table select {
      width: 100%;
      min-width: 28px;
      min-height: 20px;
      height: 20px;
      padding: 1px 0;
      font-size: 8.5px;
      text-align: center;
      font-weight: 850;
    }

    .primary-notebook-section {
      padding: 14px;
      border-top: 1px solid #7a8492;
      background: #fff;
    }

    .primary-notebook-section h4 {
      margin: 0 0 8px;
      color: #111827;
      font-size: 12px;
      text-align: center;
      text-transform: uppercase;
    }

    .primary-summary-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }

    .primary-summary-table th,
    .primary-summary-table td {
      border: 1px solid #7a8492;
      padding: 5px;
      text-align: center;
    }

    .primary-summary-table th {
      background: #d9e2f3;
    }

    .primary-summary-table textarea,
    .primary-summary-table input {
      width: 100%;
      min-height: 34px;
      border: 0;
      background: #fff9d8;
      resize: vertical;
    }

    .attendance-summary-table input {
      min-height: 28px;
      text-align: center;
    }

    .primary-signatures {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 70px;
      padding: 52px 12% 28px;
      background: #fff;
      text-align: center;
      font-size: 11px;
    }

    .primary-signatures span {
      display: block;
      border-top: 1px solid #111;
      margin-bottom: 7px;
    }

    @media (max-width: 760px) {
      .primary-native-notebook .official-form-grid > .official-field,
      .primary-native-notebook .official-form-grid > .official-field:nth-child(5),
      .primary-native-notebook .official-form-grid > .official-field:nth-child(8) {
        grid-column: span 6;
      }

      .primary-native-notebook .official-form-grid > .official-field:nth-child(11) {
        grid-column: 1 / -1;
      }
    }

    .official-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-top: 1px solid #c5ccd5;
      background: #fbfcfe;
    }

    .achievement-scale {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 10px 12px;
      background: #fff;
      border-top: 1px solid #c5ccd5;
      font-size: 11px;
    }

    .achievement-scale strong {
      display: block;
      color: #102a56;
    }

    .intranet-shell {
      display: grid;
      gap: 16px;
    }

    .intranet-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding-top: 14px;
    }

    .intranet-pagination button {
      min-width: 96px;
    }

    .intranet-notebook-preview {
      display: grid;
      gap: 22px;
      margin-top: 16px;
      justify-items: center;
      overflow-x: auto;
      padding: 12px;
      background: #e9edf3;
      border-radius: 12px;
    }

    .intranet-notes-loading {
      display: grid;
      justify-items: center;
      gap: 7px;
      width: min(520px, 100%);
      margin: 28px auto;
      padding: 30px 20px;
      border: 1px solid #cbd9eb;
      border-radius: 14px;
      background: #fff;
      color: #1d3557;
      text-align: center;
      box-shadow: 0 8px 24px rgba(39, 69, 106, .08);
    }

    .intranet-notes-loading > span {
      width: 28px;
      height: 28px;
      border: 3px solid #dbe7f5;
      border-top-color: #2563b8;
      border-radius: 50%;
      animation: intranet-notes-spin .75s linear infinite;
    }

    .intranet-notes-loading strong { font-size: 14px; }
    .intranet-notes-loading small { color: #66768c; font-size: 11px; }

    @keyframes intranet-notes-spin { to { transform: rotate(360deg); } }

    .intranet-notes-browser {
      display: grid;
      gap: 14px;
      margin: 4px 0 18px;
      padding: 16px;
      border: 1px solid #d9e2ef;
      border-radius: 14px;
      background: linear-gradient(145deg, #f8fbff, #f7f5ff);
    }

    .intranet-step-heading,
    .intranet-print-config-head {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .intranet-step-heading > span,
    .intranet-print-config-head > span {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      border-radius: 50%;
      background: #1f4da5;
      color: #fff;
      font-size: 12px;
      font-weight: 900;
    }

    .intranet-step-heading > div,
    .intranet-print-config-head > div { display: grid; gap: 1px; }
    .intranet-step-heading strong,
    .intranet-print-config-head strong { color: #18233f; font-size: 14px; }
    .intranet-step-heading small,
    .intranet-print-config-head small { color: #69778d; font-size: 11px; }

    .intranet-level-picker {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .intranet-level-picker button {
      display: grid;
      gap: 3px;
      min-height: 68px;
      padding: 12px 14px;
      border: 1px solid #d6dfeb;
      border-radius: 13px;
      background: #fff;
      color: #26354d;
      text-align: left;
      box-shadow: 0 5px 16px rgba(31, 54, 88, .06);
    }

    .intranet-level-picker button strong { font-size: 15px; }
    .intranet-level-picker button small { color: #748197; font-size: 11px; }

    .intranet-level-picker button.active {
      border-color: #315fca;
      background: linear-gradient(135deg, #173f91, #6c4fd8);
      color: #fff;
      box-shadow: 0 10px 24px rgba(55, 71, 157, .22);
    }

    .intranet-level-picker button.active small { color: #e9e7ff; }

    .intranet-room-picker-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .intranet-room-picker {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 9px;
    }

    .intranet-room-card {
      display: grid;
      gap: 4px;
      min-height: 68px;
      padding: 11px 12px;
      border: 1px solid #d7e0ec;
      border-radius: 11px;
      background: #fff;
      color: #26354d;
      text-align: left;
    }

    .intranet-room-card strong { font-size: 12px; }
    .intranet-room-card span { color: #718096; font-size: 10px; line-height: 1.35; }
    .intranet-room-card.active { border-color: #0a9b5d; background: #eafaf2; color: #08633e; box-shadow: 0 0 0 2px rgba(10, 155, 93, .1); }
    .intranet-room-card.active span { color: #23805b; }
    .intranet-room-card.pending { border-color: #f1b8bd; background: #fff6f6; }
    .intranet-room-card.pending strong { color: #8d2630; }
    .intranet-room-card.pending.active { border-color: #d95864; background: #ffe9eb; color: #7f1d28; box-shadow: 0 0 0 2px rgba(217, 88, 100, .12); }
    .intranet-room-card.pending.active span { color: #87525a; }
    .intranet-room-card.printed { border-color: #78c9a1; background: #ecfaf3; }
    .intranet-room-card.printed strong { color: #07643d; }
    .intranet-room-card.printed.active { border-color: #079455; background: #dff7eb; color: #075b39; box-shadow: 0 0 0 2px rgba(7, 148, 85, .14); }
    .intranet-room-card.printed span { color: #39725a; }
    .intranet-room-print-status {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      margin-top: 3px;
      padding: 3px 7px;
      border-radius: 999px;
      font-size: 9.5px;
      font-style: normal;
      font-weight: 850;
    }
    .intranet-room-card.pending .intranet-room-print-status { background: #fbd7da; color: #a62d38; }
    .intranet-room-card.printed .intranet-room-print-status { background: #c9f0dc; color: #087347; }
    .intranet-room-empty { grid-column: 1 / -1; padding: 12px; color: #69778d; font-size: 12px; text-align: center; }

    #intranetNotesFilters {
      grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(250px, 1.4fr) minmax(210px, 1fr);
      gap: 12px;
      background: #f8fafc;
    }

    #intranetNotesFilters .intranet-print-config-head { grid-column: 1 / -1; }
    #intranetNotesFilters .intranet-technical-filter { display: none; }
    #intranetNotesFilters .intranet-student-choice { grid-column: auto; min-width: 0; }

    .intranet-individual-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      align-items: end;
    }

    .intranet-individual-actions > span {
      grid-column: 1 / -1;
      color: #526077;
      font-size: 11px;
      font-weight: 800;
    }

    .intranet-individual-actions button { width: 100%; min-height: 40px; padding-inline: 8px; }

    #intranetNotesFilters > .intranet-class-print {
      border-color: #087a4a;
      background: #087a4a;
      color: #fff;
      width: 100%;
      min-height: 58px;
      align-self: end;
      justify-self: stretch;
      white-space: normal;
      line-height: 1.2;
    }

    #intranetNotesFilters > .intranet-class-print:hover { background: #05683e; }

    @media (max-width: 900px) {
      #intranetNotesFilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #intranetNotesFilters > .intranet-class-print { min-height: 48px; }
    }

    @media (max-width: 640px) {
      .intranet-level-picker, .intranet-room-picker { grid-template-columns: 1fr; }
      #intranetNotesFilters { grid-template-columns: 1fr; }
      .intranet-room-picker-head { align-items: flex-start; }
    }

    .intranet-notebook-preview .intranet-notebook-term {
      box-sizing: border-box;
      width: 210mm;
      max-width: 100%;
      min-height: 297mm;
      padding: 7mm;
      background: #fff;
      box-shadow: 0 3px 14px rgba(15, 23, 42, .14);
    }

    .intranet-notebook-preview[data-page-orientation="landscape"] .intranet-notebook-term {
      width: 297mm;
      min-height: 210mm;
    }

    .intranet-notebook-preview .official-report {
      width: 100%;
      max-width: none;
      margin: 0;
      zoom: 1 !important;
      break-after: page;
    }

    .intranet-notebook-preview .official-table {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      table-layout: fixed;
      font-size: 9.5px;
    }

    .intranet-notebook-preview .primary-native-notebook .official-table {
      width: 720px;
      max-width: 100%;
      margin-inline: auto;
    }

    .intranet-notebook-preview .official-table th {
      padding: 3px 2px;
      font-size: 8.5px;
      line-height: 1.1;
    }

    .intranet-notebook-preview .official-table td {
      padding: 3px;
      line-height: 1.2;
    }

    .intranet-notebook-preview .official-table .area-cell {
      width: 11%;
      padding-inline: 3px;
      font-size: 8.5px;
      line-height: 1.15;
    }

    .intranet-notebook-preview .official-table .competency-cell {
      width: auto;
      max-width: 0;
      padding-inline: 5px;
      font-size: 10px;
      line-height: 1.25;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
      hyphens: auto;
    }

    .intranet-notebook-preview .official-table .nl-cell {
      padding-inline: 1px;
      font-size: 8.5px;
    }

    .intranet-notebook-term-label {
      margin: 0 0 8px;
      padding: 9px 14px;
      border-radius: 10px;
      background: #18233f;
      color: #fff;
      font-size: 13px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .intranet-notebook-preview input,
    .intranet-notebook-preview textarea,
    .intranet-notebook-preview select {
      pointer-events: none;
    }

    .intranet-notebook-preview.intranet-notebook-editable input:not([readonly]):not([disabled]),
    .intranet-notebook-preview.intranet-notebook-editable textarea:not([readonly]):not([disabled]),
    .intranet-notebook-preview.intranet-notebook-editable select:not([disabled]) {
      pointer-events: auto;
      cursor: pointer;
    }

    @media print {
      .official-report[data-official-notes-form] {
        zoom: 1 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }

      .official-report[data-official-notes-form] .official-table {
        border-collapse: collapse !important;
      }

      .official-report[data-official-notes-form] .official-table th,
      .official-report[data-official-notes-form] .official-table td {
        border: 1px solid #68788d !important;
      }

      .official-report[data-official-notes-form] .official-table tr.area-total-row > td {
        background: #fff !important;
        color: #111 !important;
      }

      .intranet-notebook-term-label,
      .official-view-note,
      .official-sheet-badge {
        display: none !important;
      }

      .academic-document-header,
      .academic-document-logo,
      .academic-document-logo img,
      .initial-document-header,
      .initial-document-center,
      .initial-document-logo,
      .initial-document-logo img {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
      }

      .official-report[data-official-notes-form] select,
      .intranet-notebook-preview select {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #111 !important;
        opacity: 1 !important;
        text-align: center;
      }

      .official-report[data-official-notes-form] textarea,
      .intranet-notebook-preview textarea {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        resize: none !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #111 !important;
        opacity: 1 !important;
      }
    }

    .notebook-term-multiselect {
      position: relative;
      align-self: end;
      grid-column: span 2;
      width: 100%;
      min-width: 0;
    }

    .notebook-term-multiselect summary {
      display: grid;
      gap: 3px;
      min-height: 58px;
      padding: 7px 34px 7px 11px;
      border: 1px solid #cfd8e6;
      border-radius: 10px;
      background: #fff;
      cursor: pointer;
      list-style: none;
    }

    .notebook-term-multiselect summary::-webkit-details-marker {
      display: none;
    }

    .notebook-term-multiselect summary::after {
      content: "⌄";
      position: absolute;
      top: 25px;
      right: 12px;
      color: #31578a;
      font-size: 18px;
      line-height: 1;
    }

    .notebook-term-multiselect[open] summary {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

    .notebook-term-multiselect summary span {
      color: #526077;
      font-size: 11px;
      font-weight: 800;
    }

    .notebook-term-multiselect summary strong {
      overflow: hidden;
      color: #18233f;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .notebook-term-menu {
      position: absolute;
      z-index: 40;
      top: calc(100% + 5px);
      left: 0;
      display: grid;
      gap: 3px;
      width: 100%;
      padding: 7px;
      border: 1px solid #cfd8e6;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 14px 30px rgba(24, 35, 63, .18);
    }

    .notebook-term-option {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 38px;
      padding: 7px 9px;
      border-radius: 7px;
      color: #18233f;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .notebook-term-option:hover,
    .notebook-term-option:has(input:checked) {
      background: #eefbf4;
      color: #08783e;
    }

    .notebook-term-option input {
      width: 21px;
      height: 21px;
      flex: 0 0 21px;
      margin: 0;
      accent-color: #08a957;
      cursor: pointer;
    }

    #intranetNotesFilters > button {
      width: 100%;
      min-width: 0;
      justify-content: center;
      padding-right: 12px;
      padding-left: 12px;
    }

    .intranet-welcome {
      padding: 22px;
      border: 1px solid #d9e1ec;
      border-radius: 16px;
      background: linear-gradient(135deg, #fff 0%, #f7f4ff 58%, #eef5ff 100%);
    }

    .intranet-welcome h2 {
      margin: 0;
      color: #182235;
      font-size: 25px;
    }

    .intranet-welcome p {
      margin: 6px 0 0;
      color: #647184;
    }

    .intranet-module-tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .intranet-module-tab {
      display: grid;
      gap: 4px;
      min-height: 82px;
      padding: 14px;
      border: 1px solid #d7dfeb;
      border-radius: 14px;
      background: #fff;
      color: #344054;
      text-align: left;
      box-shadow: 0 8px 20px rgba(30, 46, 76, .06);
    }

    .intranet-module-tab strong {
      color: #182235;
      font-size: 14px;
    }

    .intranet-module-tab span {
      color: #7b8798;
      font-size: 11px;
      line-height: 1.35;
    }

    .intranet-module-tab.active {
      border-color: #d94c5c;
      background: linear-gradient(135deg, #e81246, #7857e7);
      color: #fff;
      box-shadow: 0 12px 25px rgba(173, 43, 102, .22);
    }

    .intranet-module-tab.active strong,
    .intranet-module-tab.active span {
      color: #fff;
    }

    .intranet-report-panel {
      overflow: hidden;
    }

    .intranet-export-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      gap: 8px;
    }

    @media (max-width: 980px) {
      .intranet-module-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      .intranet-module-tabs {
        grid-template-columns: 1fr;
      }
    }

    .official-sheet-badge {
      flex: 0 0 auto;
      align-self: center;
      padding: 4px 8px;
      border: 1px solid #9aa7b7;
      border-radius: 999px;
      background: #fff;
      color: #334155;
      font-size: 10px;
      font-weight: 850;
      white-space: nowrap;
    }

    .initial-second-sheet {
      padding: 18px 20px 24px;
      border-top: 8px solid #e8edf4;
      background: #fff;
    }

    .initial-second-sheet-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .initial-second-sheet-head h4 {
      margin: 0;
      color: #182235;
      font-size: 14px;
      text-transform: uppercase;
    }

    .initial-general-comment {
      margin-top: 16px;
    }

    .initial-general-comment textarea {
      width: 100%;
      min-height: 92px;
      padding: 9px;
      border: 1px solid #9aa7b7;
      border-radius: 4px;
      background: #fff9d8;
      resize: vertical;
    }

    .initial-final-status {
      display: grid;
      grid-template-columns: minmax(220px, .8fr) minmax(260px, 1.2fr);
      margin: 16px auto 0;
      max-width: 760px;
      border: 1px solid #7a8492;
    }

    .initial-final-status label {
      padding: 9px;
      background: #d9e2f3;
      font-size: 11px;
      font-weight: 850;
      text-align: center;
    }

    .initial-final-status input {
      min-height: 38px;
      padding: 7px;
      border: 0;
      border-left: 1px solid #7a8492;
      background: #fff9d8;
    }

    .initial-emission {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 20px;
    }

    .initial-emission .official-field {
      border: 1px solid #c5ccd5;
    }

    .initial-second-sheet .primary-signatures {
      padding-bottom: 12px;
    }

    @media (max-width: 760px) {
      .initial-document-header {
        grid-template-columns: 82px minmax(0, 1fr) 82px;
        gap: 6px;
        padding: 5px;
        overflow: visible;
      }

      .initial-document-logo {
        min-height: 96px;
        padding: 3px;
      }

      .initial-final-status,
      .initial-emission {
        grid-template-columns: 1fr;
      }

      .initial-final-status input {
        border-left: 0;
        border-top: 1px solid #7a8492;
      }
    }

    .student-table-wrap {
      position: relative;
      overflow-x: auto;
      overflow-y: auto;
      max-height: 58vh;
      scrollbar-gutter: stable;
    }

    .student-table-wrap table {
      min-width: 1320px;
      border-collapse: separate;
      border-spacing: 0;
      overflow: visible;
    }

    .student-table-wrap thead th {
      position: sticky;
      top: 0;
      z-index: 5;
      background: #ffffff;
      border-top: 0;
      box-shadow: 0 2px 0 var(--line), 0 6px 12px rgba(23, 32, 51, .06);
      white-space: nowrap;
    }

    .student-status-select {
      min-width: 122px;
      border: 1px solid #b7e4d8;
      border-radius: 999px;
      padding: 6px 28px 6px 9px;
      background: #eafaf6;
      color: #067f66;
      font-size: 12px;
      font-weight: 800;
      outline-color: var(--teal);
    }

    .student-status-select[data-status="Traslado"] {
      border-color: #f0d28b;
      background: #fff6df;
      color: #9d6811;
    }

    .student-status-select[data-status="En proceso"] {
      border-color: #d9b9f1;
      background: #f8efff;
      color: #7b2bb7;
    }

    .student-status-select[data-status="Retirado"] {
      border-color: #f0b9be;
      background: #fff0f1;
      color: #b43d46;
    }

    .student-status-select:disabled {
      cursor: not-allowed;
      opacity: .72;
    }

    .student-results-summary {
      margin-top: 12px;
      display: block;
    }

    .student-create-panel {
      padding: 0;
      overflow: hidden;
    }

    .student-create-panel > summary {
      margin: 0;
      padding: 17px;
      cursor: pointer;
      list-style: none;
    }

    .student-create-panel > summary::-webkit-details-marker {
      display: none;
    }

    .student-create-panel > summary::after {
      content: "Mostrar formulario";
      color: var(--blue);
      font-size: 12px;
      font-weight: 800;
    }

    .student-create-panel[open] > summary::after {
      content: "Ocultar formulario";
    }

    .student-create-panel .form {
      padding: 0 17px 17px;
    }

    .parents-dashboard {
      display: grid;
      gap: 14px;
    }

    .parent-child-card {
      display: grid;
      gap: 14px;
    }

    .parent-child-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 10px;
    }

    .parent-info-tile {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    .parent-info-tile span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      margin-bottom: 5px;
    }

    .parent-info-tile strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.25;
    }

    .parent-child-sections {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .parent-mini-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }

    .parent-mini-panel h3 {
      margin: 0;
      padding: 12px;
      border-bottom: 1px solid var(--line);
      background: #fff8f8;
      color: #8f2f3b;
      font-size: 15px;
    }

    .parent-mini-panel .table-wrap {
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .parent-empty {
      padding: 18px;
      border: 1px dashed #e2b9bf;
      border-radius: 8px;
      background: #fff8f8;
      color: #8f2f3b;
      font-weight: 850;
      text-align: center;
    }

    .attendance-sheet {
      border-radius: 8px;
      background: #f8fafc;
      border-color: #b8c9df;
      min-height: 360px;
      max-height: 56vh;
    }

    .attendance-sheet table {
      min-width: 1060px;
      border-collapse: separate;
      border-spacing: 0;
    }

    .attendance-sheet th,
    .attendance-sheet td {
      border-right: 1px solid #d7dde6;
      border-bottom: 1px solid #d7dde6;
      padding: 4px 5px;
      font-size: 12px;
      white-space: nowrap;
      text-align: center;
    }

    .attendance-sheet th {
      background: linear-gradient(180deg, #edf3fa, #dce7f4);
      color: #1f334f;
      font-weight: 800;
    }

    .attendance-sheet td.student-name,
    .attendance-sheet th.student-name {
      min-width: 205px;
      text-align: left;
      position: sticky;
      left: 0;
      z-index: 2;
      background: #ffffff;
      box-shadow: 1px 0 0 #d7dde6;
    }

    .attendance-code {
      width: 48px;
      min-height: 26px;
      border: 1px solid #c6ced8;
      border-radius: 4px;
      background: #ffffff;
      color: #172033;
      font-size: 12px;
      font-weight: 800;
      box-shadow: inset 0 1px 2px rgba(23, 32, 51, .08);
    }

    .attendance-code[data-code="A"] { background: #ffffff; }
    .attendance-code[data-code="P"] { background: #bfefff; color: #075985; border-color: #58c7e8; }
    .attendance-code[data-code="TI"],
    .attendance-code[data-code="TJ"] { background: #fff600; border-color: #d7c900; }
    .attendance-code[data-code="FI"] { background: #ff7276; color: #7b1018; border-color: #f05a61; }
    .attendance-code[data-code="FJ"] { background: #ffd0bd; color: #8a3418; border-color: #f1aa8d; }

    .attendance-weekend {
      background: #d7dbe1 !important;
      color: #6b7280 !important;
      cursor: not-allowed;
    }

    .attendance-weekend .attendance-code {
      border-color: transparent;
      background: transparent;
      color: #6b7280;
      box-shadow: none;
      pointer-events: none;
    }

    .attendance-count {
      font-weight: 900;
      text-align: center;
      min-width: 30px;
    }

    .count-a { background: #ffffff; }
    .count-p { background: #bfefff; color: #075985; }
    .count-ti { background: #ffff7a; }
    .count-tj { background: #ffe978; }
    .count-fi { background: #ff757c; color: #7b1018; }
    .count-fj { background: #ffc3ad; color: #8a3418; }

    .bulk-toolbar {
      border: 1px solid #d7dde6;
      border-radius: 8px;
      overflow: hidden;
      background: #ffffff;
      margin-top: 14px;
    }

    .bulk-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      background: #f3f6f9;
      color: #687386;
      font-size: 12px;
      text-transform: uppercase;
    }

    .bulk-actions {
      display: flex;
      gap: 8px;
      margin-left: auto;
    }

    .bulk-actions button {
      border: 0;
      border-radius: 6px;
      background: #f47b2f;
      color: #ffffff;
      padding: 8px 11px;
      font-size: 12px;
      font-weight: 900;
    }

    .bulk-actions button.secondary {
      background: #ffd6bf;
      color: #9b3d13;
    }

    .attendance-cascade {
      display: grid;
      grid-template-columns: 58px minmax(330px, 1.4fr) 58px minmax(150px, .7fr) 105px minmax(190px, .9fr);
      gap: 8px;
      align-items: center;
      padding: 10px 9px;
      border-bottom: 1px solid #e8edf3;
      background: #f8fafc;
    }

    .attendance-cascade label,
    .attendance-filter-label {
      font-size: 12px;
      font-weight: 800;
      text-align: right;
    }

    .attendance-level-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .attendance-level-tabs button {
      min-height: 36px;
      border: 1px solid #cbd5e1;
      border-radius: 7px;
      background: #ffffff;
      color: #475569;
      font-size: 12px;
      font-weight: 850;
    }

    .attendance-level-tabs button:hover {
      border-color: #f47b2f;
      color: #9b3d13;
    }

    .attendance-level-tabs button.active,
    .attendance-level-tabs button[aria-pressed="true"] {
      border-color: #f47b2f;
      background: #f47b2f;
      color: #ffffff;
      box-shadow: 0 5px 12px rgba(244, 123, 47, .2);
    }

    .attendance-cascade select {
      min-height: 36px;
      min-width: 0;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 8px;
      background: #ffffff;
    }

    .attendance-cascade select:disabled {
      background: #eef2f6;
      color: #7b8798;
      cursor: not-allowed;
    }

    .attendance-month-policy {
      padding: 7px 12px;
      border-bottom: 1px solid #dbe6f2;
      background: #eef7ff;
      color: #24547d;
      font-size: 12px;
      font-weight: 750;
    }

    .attendance-code.locked {
      color: #94a3b8;
      cursor: not-allowed;
    }

    .bulk-grid {
      display: grid;
      grid-template-columns: 64px minmax(160px, 1fr) 58px minmax(135px, .8fr) 58px minmax(118px, .7fr) 58px minmax(118px, .7fr) 42px auto 48px auto 38px minmax(108px, .65fr);
      gap: 7px;
      align-items: center;
      padding: 9px;
      background: #ffffff;
    }

    .bulk-grid label {
      font-weight: 800;
      font-size: 12px;
      text-align: right;
    }

    .bulk-grid input,
    .bulk-grid select {
      min-height: 32px;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      padding: 5px 7px;
      background: #ffffff;
    }

    .bulk-grid .readonly {
      background: #eeeeee;
      color: #667085;
    }

    .attendance-empty-row td {
      padding: 34px 18px !important;
      color: #64748b;
      text-align: center;
      font-weight: 700;
      background: #fbfcfe;
    }

    @media (max-width: 1100px) {
      .attendance-cascade {
        grid-template-columns: 58px minmax(300px, 1fr) 58px minmax(150px, 1fr);
      }

      .attendance-cascade label[for="attendanceClassFilter"] {
        grid-column: 1;
      }

      #attendanceClassFilter {
        grid-column: 2 / -1;
      }
    }

    @media (max-width: 700px) {
      .attendance-cascade {
        grid-template-columns: 1fr;
      }

      .attendance-cascade label,
      .attendance-filter-label,
      .attendance-cascade label[for="attendanceClassFilter"],
      #attendanceClassFilter {
        grid-column: auto;
        text-align: left;
      }
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      border-radius: 999px;
      padding: 6px 9px;
      font-size: 12px;
      background: #fff7f9;
      color: #9a4050;
      font-weight: 700;
    }

    .ok { background: #eafaf6; color: #067f66; }
    .warn { background: #fff6df; color: #9d6811; }
    .bad { background: #fff0f1; color: #b43d46; }
    .violet { background: #fff0f6; color: #b3125a; }

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

    .class-level-group {
      display: grid;
      gap: 12px;
      align-content: start;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
    }

    .class-level-inicial {
      background: linear-gradient(180deg, #eaf5ff 0%, #cfe8ff 54%, #b7dbff 100%);
      border-color: #9fc9f3;
    }

    .class-level-primaria {
      background: #ffffff;
      border-color: #e7dce0;
    }

    .class-level-secundaria {
      background: linear-gradient(180deg, #ffe7ea 0%, #f58b96 48%, #d94c5c 100%);
      border-color: #c83d4e;
    }

    #classCards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      align-items: start;
    }

    .class-level-head {
      display: grid;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,.86);
      box-shadow: 0 8px 18px rgba(16,25,40,.06);
    }

    .class-level-head h3 {
      margin: 0;
      font-size: 17px;
    }

    .class-level-head span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .class-filter,
    .class-filter-select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px 10px;
      background: #ffffff;
      color: var(--ink);
      outline-color: var(--brand);
      font-size: 13px;
    }

    .class-filter-row {
      display: grid;
      gap: 8px;
    }

    .class-level-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .class-level-grid .card {
      min-height: 120px;
    }

    .card {
      padding: 15px;
      min-height: 140px;
    }

    .card-top {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: start;
      margin-bottom: 10px;
    }

    .mini-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .file-input {
      width: 100%;
      margin-top: 12px;
      border: 1px dashed #e0aab2;
      border-radius: 8px;
      padding: 14px;
      background: #fff8f9;
      color: var(--ink);
    }

    .account-profile-card {
      display: grid;
      grid-template-columns: 132px 1fr;
      gap: 16px;
      align-items: start;
      margin-bottom: 14px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .passport-photo {
      width: 112px;
      aspect-ratio: 3 / 4;
      border: 1px solid #e0aab2;
      border-radius: 8px;
      background: #fff8f9;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
      padding: 8px;
    }

    .passport-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .account-file-meta {
      display: grid;
      gap: 6px;
      font-size: 13px;
    }

    .account-help {
      font-size: 12px;
      color: var(--muted);
      margin: -4px 0 4px;
    }

    .preview-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .preview-summary .card {
      min-height: auto;
      padding: 12px;
    }

    .preview-summary strong {
      display: block;
      font-size: 24px;
      margin-top: 4px;
    }

    .mini {
      border: 1px solid #e7b9bf;
      background: #ffffff;
      border-radius: 999px;
      padding: 7px 9px;
      font-size: 12px;
      color: #6f2732;
      box-shadow: 0 5px 12px rgba(143, 47, 59, .08);
      font-weight: 750;
    }

    .qr-box {
      min-height: 220px;
      border-radius: 22px;
      border: 1px dashed #ff9daa;
      display: grid;
      place-items: center;
      background: #ffffff;
      padding: 16px;
      text-align: center;
    }

    .attendance-qr-panel .qr-box {
      min-height: 104px;
      padding: 8px;
      border-radius: 12px;
    }

    .attendance-qr-panel .qr-code {
      width: 92px;
      height: 92px;
      margin: 0 auto 6px;
    }

    .attendance-qr-panel .mini-actions {
      gap: 6px;
      margin-top: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attendance-qr-panel .mini-actions select,
    .attendance-qr-panel .mini-actions input {
      grid-column: 1 / -1;
    }

    #downloadSelectedQrBtn {
      grid-column: 1 / -1;
    }

    .attendance-qr-panel .inline-input,
    .attendance-qr-panel .primary,
    .attendance-qr-panel .ghost {
      min-height: 32px;
      border-radius: 10px;
      padding: 6px 8px;
      font-size: 12px;
    }

    .qr-scanner-overlay { position: fixed; top: max(8px, env(safe-area-inset-top)); right: 8px; bottom: auto; left: 8px; z-index: 1200; display: grid; grid-template-rows: auto clamp(210px, 46vh, 390px) auto; grid-template-rows: auto clamp(210px, 46dvh, 390px) auto; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: hidden; border-radius: 18px; background: #050505; color: #fff; box-shadow: 0 18px 55px rgba(0,0,0,.55); overscroll-behavior: contain; }
    body.qr-scanner-open { overflow: hidden; }
    .qr-scanner-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; background: rgba(7, 13, 24, .96); }
    .qr-scanner-head div { min-width: 0; display: grid; gap: 1px; }
    .qr-scanner-head strong { font-size: clamp(15px, 4.2vw, 19px); line-height: 1.15; }
    .qr-scanner-head span { color: #dbe3ee; font-size: 11px; line-height: 1.2; }
    .qr-scanner-close { min-height: 38px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font-size: 13px; font-weight: 800; }
    .qr-scanner-stage { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #000; }
    .qr-scanner-stage video { width: 100%; height: 100%; min-height: 0; object-fit: cover; background: #000; }
    .qr-scan-guide { position: absolute; width: min(60vw, 32vh, 270px); width: min(60vw, 32dvh, 270px); aspect-ratio: 1; border: 3px solid rgba(255,255,255,.95); border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0,0,0,.28), inset 0 0 24px rgba(255,255,255,.12); pointer-events: none; }
    .qr-scan-confirmation { position: absolute; z-index: 2; left: 50%; bottom: 14px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: rgba(8,120,63,.94); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.28); font-size: 14px; font-weight: 900; letter-spacing: .01em; opacity: 0; transform: translate3d(-50%, 5px, 0) scale(.96); pointer-events: none; will-change: opacity, transform; }
    .qr-scanner-status { min-height: 48px; display: grid; place-items: center; padding: 9px 12px; background: #142033; color: #fff; text-align: center; font-size: 14px; line-height: 1.25; font-weight: 800; }
    .qr-scanner-status.success { background: #08783f; }
    .qr-scanner-status.error { background: #a11f2f; }
    @media (min-width: 900px) {
      .qr-scanner-overlay { inset: 3vh max(3vw, calc((100vw - 980px) / 2)); grid-template-rows: auto minmax(0, 1fr) auto; max-height: none; border-radius: 22px; box-shadow: 0 24px 90px rgba(0,0,0,.5); }
      .qr-scanner-head { gap: 16px; padding: 14px 16px; }
      .qr-scanner-head div { gap: 3px; }
      .qr-scanner-head strong { font-size: 24px; }
      .qr-scanner-head span { font-size: 13px; }
      .qr-scanner-close { min-height: 44px; padding: 10px 16px; border-radius: 12px; font-size: 14px; }
      .qr-scan-guide { width: min(50vw, 430px); border-width: 4px; border-radius: 24px; }
      .qr-scanner-status { min-height: 62px; padding: 13px 18px; font-size: 16px; }
    }

    .qr-code {
      width: 154px;
      height: 154px;
      padding: 10px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 18px;
      margin: 0 auto 10px;
    }

    .qr-code canvas,
    .qr-code img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .student-qr-actions {
      display: grid;
      gap: 6px;
      justify-items: start;
    }

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      max-width: 380px;
      background: var(--nav);
      color: white;
      padding: 13px 15px;
      border-radius: 18px;
      box-shadow: var(--shadow);
      display: none;
      z-index: 20;
      line-height: 1.4;
    }

    .toast.show { display: block; }

    .toast.center-alert {
      left: 50%;
      right: auto;
      bottom: auto;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(720px, calc(100vw - 32px));
      max-width: min(720px, calc(100vw - 32px));
      padding: 26px 30px;
      border-radius: 16px;
      background: #9f2f43;
      color: #ffffff;
      font-size: 22px;
      font-weight: 800;
      line-height: 1.35;
      text-align: center;
      box-shadow: 0 26px 80px rgba(23, 32, 51, .30), 0 12px 30px rgba(159, 47, 67, .28);
      z-index: 80;
    }

    @media (max-width: 620px) {
      .toast.center-alert {
        font-size: 18px;
        padding: 22px 20px;
      }
    }

    .hidden { display: none !important; }

    .login-screen {
      --mx: 50%;
      --my: 50%;
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      place-items: center;
      padding: clamp(18px, 4vw, 46px);
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.32), transparent 22%),
        radial-gradient(circle at 18% 16%, rgba(255,255,255,.30), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(96,165,250,.30), transparent 28%),
        linear-gradient(135deg, #ffc2ca 0%, #e95866 46%, #c92f42 72%, #1f5ea8 100%);
      transition: background-position .25s ease;
    }

    .login-screen::before,
    .login-screen::after {
      content: "COLEGIO ALFRED NOBEL";
      position: absolute;
      top: 50%;
      z-index: 0;
      color: rgba(255,255,255,.30);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(52px, 7.6vw, 112px);
      font-weight: 900;
      letter-spacing: .10em;
      line-height: .9;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: translateY(-50%);
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }

    .login-screen::before {
      left: clamp(16px, 4vw, 56px);
    }

    .login-screen::after {
      right: clamp(16px, 4vw, 56px);
      transform: translateY(-50%) rotate(180deg);
    }

    .login-panel {
      position: relative;
      z-index: 1;
      width: min(100%, 540px);
      background: #ffffff;
      padding: clamp(24px, 4vw, 34px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 24px;
      box-shadow: 0 30px 80px rgba(15, 23, 42, .28), 0 0 0 1px rgba(255,255,255,.78);
      transition: transform .18s ease, box-shadow .18s ease;
      will-change: transform;
    }

    .login-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      min-width: 0;
      text-align: center;
    }

    .login-logo > div:last-child {
      width: 100%;
      display: grid;
      justify-items: center;
    }

    .login-logo .brand-mark {
      width: 76px;
      height: 76px;
      border-width: 3px;
    }

    .login-logo strong {
      display: block;
      color: #172033;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(28px, 6vw, 40px);
      line-height: 1.05;
      letter-spacing: .01em;
      text-wrap: balance;
    }

    .login-logo small {
      display: block;
      width: 100%;
      margin: 7px auto 0;
      color: #1f5ea8;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .14em;
      text-align: center;
      text-transform: uppercase;
    }

    .login-panel h1 {
      margin: 0 0 10px;
      font-size: clamp(20px, 4vw, 24px);
      line-height: 1.05;
      letter-spacing: 0;
      text-align: center;
      color: #334155;
    }

    .login-panel p {
      margin: 0 0 12px;
      color: var(--muted);
      line-height: 1.55;
      text-align: center;
      font-size: 13px;
    }

    .login-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      width: min(100%, 420px);
      margin: 10px auto 0;
    }

    .login-social {
      grid-column: 1 / -1;
    }

    .login-form label.field {
      text-align: center;
      color: #172033;
      font-size: 15px;
      font-weight: 850;
      letter-spacing: .03em;
    }

    .login-form .field input,
    .login-form .field select {
      margin-top: 7px;
      min-height: 52px;
      text-align: center;
      font-size: 16px;
      font-weight: 750;
      color: #172033;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 2px solid rgba(31, 94, 168, .18);
      border-radius: 14px;
      box-shadow: 0 14px 26px rgba(31, 94, 168, .13), inset 0 1px 0 rgba(255,255,255,.9);
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .login-form .field input:focus,
    .login-form .field select:focus {
      border-color: rgba(217, 76, 92, .62);
      box-shadow: 0 16px 30px rgba(217, 76, 92, .18), 0 0 0 4px rgba(217, 76, 92, .12);
      transform: translateY(-1px);
    }

    .login-form .primary {
      width: min(100%, 300px);
      min-height: 50px;
      margin: 4px auto 0;
      border: 0;
      background: linear-gradient(135deg, #f08a95 0%, #d94c5c 58%, #1f5ea8 100%);
      box-shadow: 0 16px 28px rgba(217, 76, 92, .22), 0 10px 20px rgba(31, 94, 168, .16);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: .08em;
      font-family: Inter, "Segoe UI", Arial, sans-serif;
      text-transform: uppercase;
    }

    .login-social {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 6px;
    }

    .social-btn {
      width: 100%;
      min-height: 62px;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border-radius: 16px;
      border: 2px solid rgba(255,255,255,.92);
      color: #ffffff;
      text-decoration: none;
      box-shadow:
        0 0 0 1px rgba(16, 25, 40, .08),
        0 8px 14px rgba(16, 25, 40, .12);
      justify-self: center;
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .social-btn:hover {
      transform: translateY(-2px);
      box-shadow:
        0 0 0 2px rgba(255,255,255,.98),
        0 14px 24px rgba(16, 25, 40, .18);
    }

    .social-btn svg {
      width: 25px;
      height: 25px;
      display: block;
      fill: currentColor;
      stroke: currentColor;
      flex: 0 0 auto;
    }

    .social-btn span {
      font-size: 12px;
      font-weight: 850;
      line-height: 1.1;
      white-space: nowrap;
    }

    .social-whatsapp { background: linear-gradient(135deg, #27c56f, #0f9f55); }
    .social-facebook { background: linear-gradient(135deg, #4f8df7, #1d4ed8); }
    .social-instagram { background: linear-gradient(135deg, #f97316, #db2777 56%, #7c3aed); }
    .social-tiktok { background: linear-gradient(135deg, #23272f, #0f172a); }

    .login-help {
      margin-top: 12px;
      font-size: 12px;
      color: var(--muted);
      text-align: center;
    }

    .login-help summary {
      cursor: pointer;
      font-weight: 800;
      color: #334155;
      list-style: none;
    }

    .login-help summary::-webkit-details-marker {
      display: none;
    }

    .login-help summary::after {
      content: " +";
      color: #3b82f6;
      font-weight: 900;
    }

    .login-help[open] summary::after {
      content: " -";
    }

    .login-help div {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 8px;
    }

    .login-help code {
      color: #9a1029;
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 8px;
      display: inline-flex;
      margin: 2px 4px 2px 0;
    }

    .login-side {
      width: min(100%, 620px);
      margin-top: 18px;
      color: white;
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      text-shadow: 0 2px 16px rgba(0,0,0,.26);
    }

    .login-side h2 {
      font-size: clamp(24px, 5vw, 42px);
      line-height: 1.08;
      margin: 0 0 10px;
    }

    .login-side p {
      max-width: 560px;
      margin: 0;
      line-height: 1.55;
    }

    .session-badge {
      background: #ffffff;
      color: #9a1029;
      border: 1px solid #ffd0d8;
      border-radius: 999px;
      padding: 9px 12px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    /* Paleta moderna 2026: slate + azul eléctrico + rojo institucional */
    .sidebar {
      color: #e2e8f0;
      background:
        radial-gradient(circle at 8% 10%, rgba(225,29,72,.30), transparent 30%),
        radial-gradient(circle at 92% 88%, rgba(37,99,235,.30), transparent 36%),
        linear-gradient(165deg, #111827 0%, #0f172a 58%, #172554 100%);
      border-right-color: rgba(255,255,255,.08);
      box-shadow: 18px 0 50px rgba(15,23,42,.18);
    }

    .brand {
      border-bottom-color: rgba(255,255,255,.12);
    }

    .brand strong {
      color: #ffffff;
    }

    .brand small {
      color: #bfdbfe;
    }

    .brand-mark {
      border-color: rgba(255,255,255,.95);
      box-shadow: 0 12px 28px rgba(225,29,72,.24), 0 8px 22px rgba(37,99,235,.18);
    }

    .sidebar-profile {
      border-color: rgba(255,255,255,.13);
      background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
      box-shadow: 0 16px 32px rgba(0,0,0,.18);
    }

    .sidebar-profile-copy strong {
      color: #ffffff;
    }

    .sidebar-profile-copy span {
      color: #cbd5e1;
    }

    .sidebar-online {
      color: #6ee7b7 !important;
    }

    .role {
      border-color: rgba(255,255,255,.12);
      background: rgba(255,255,255,.07);
    }

    .role span,
    .nav-section-label {
      color: #fda4af;
    }

    .role select {
      color: #f8fafc;
      border-color: rgba(255,255,255,.16);
      background: rgba(15,23,42,.72);
    }

    .role select option {
      color: #0f172a;
      background: #ffffff;
    }

    .nav button {
      color: #dbeafe;
      border-color: rgba(255,255,255,.06);
      background: rgba(255,255,255,.055);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

    .nav button:hover,
    .nav button.active {
      color: #ffffff;
      border-color: rgba(255,255,255,.28);
      background: linear-gradient(135deg, #be123c 0%, #e11d48 44%, #2563eb 100%);
      box-shadow: 0 12px 28px rgba(225,29,72,.28), 0 8px 22px rgba(37,99,235,.18);
    }

    .nav-sub {
      border-left-color: rgba(251,113,133,.45);
    }

    .nav-sub button {
      color: #dbeafe;
      border-color: rgba(255,255,255,.08);
      background: rgba(255,255,255,.055);
    }

    .topbar,
    .panel,
    .card,
    .stat {
      border-color: #e2e8f0;
      box-shadow: var(--shadow);
    }

    .topbar {
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(16px);
    }

    .primary {
      border-color: #e11d48;
      background: linear-gradient(135deg, #be123c 0%, #e11d48 52%, #2563eb 120%);
      box-shadow: 0 10px 24px rgba(225,29,72,.22);
    }

    .primary:hover {
      filter: saturate(1.12) brightness(1.03);
      box-shadow: 0 14px 30px rgba(225,29,72,.28);
    }

    .ghost {
      color: #1d4ed8;
      border-color: #bfdbfe;
      background: #eff6ff;
    }

    .pill {
      border-color: #bfdbfe;
      background: #eff6ff;
      color: #1d4ed8;
    }

    .login-screen {
      background:
        linear-gradient(145deg, rgba(15,23,42,.80), rgba(30,41,59,.54)),
        radial-gradient(circle at 18% 18%, rgba(225,29,72,.50), transparent 30%),
        radial-gradient(circle at 82% 76%, rgba(37,99,235,.44), transparent 34%),
        #0f172a;
    }

    .login-panel {
      border-color: rgba(255,255,255,.82);
      box-shadow: 0 28px 80px rgba(15,23,42,.32), 0 18px 42px rgba(225,29,72,.12);
    }

    .login-form .primary {
      background: linear-gradient(135deg, #be123c 0%, #e11d48 58%, #2563eb 100%);
    }

    main {
      background:
        radial-gradient(circle at 96% 4%, rgba(37,99,235,.08), transparent 26%),
        radial-gradient(circle at 8% 94%, rgba(225,29,72,.06), transparent 24%);
    }

    .topbar {
      border-radius: 18px;
      margin-bottom: 18px;
      padding: 12px 14px;
    }

    .search {
      border-color: #dbeafe;
      background: #f8fafc;
      box-shadow: inset 0 1px 0 #ffffff;
    }

    .search:focus-within {
      border-color: #60a5fa;
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(37,99,235,.10);
    }

    .search .icon {
      color: #2563eb;
    }

    .session-badge {
      color: #be123c;
      border-color: #fecdd3;
      background: #fff1f2;
    }

    .hero {
      border: 1px solid rgba(255,255,255,.76);
      background:
        linear-gradient(112deg, rgba(15,23,42,.92), rgba(30,41,59,.76)),
        radial-gradient(circle at 88% 18%, rgba(37,99,235,.54), transparent 34%),
        radial-gradient(circle at 12% 84%, rgba(225,29,72,.48), transparent 34%);
      box-shadow: 0 24px 58px rgba(15,23,42,.20);
    }

    .hero .primary {
      background: linear-gradient(135deg, #e11d48, #be123c);
    }

    .hero-panel {
      border-color: rgba(255,255,255,.18);
      background: rgba(255,255,255,.12);
      box-shadow: 0 18px 36px rgba(0,0,0,.14);
      backdrop-filter: blur(14px);
    }

    .stats {
      gap: 12px;
    }

    .stat {
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      background: linear-gradient(145deg, #ffffff, #f8fafc);
    }

    .stat::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      background: linear-gradient(180deg, #e11d48, #2563eb);
    }

    .stat strong {
      color: #0f172a;
    }

    .stat span,
    .stat small {
      color: #64748b;
    }

    .panel,
    .card {
      border-radius: 18px;
      background: linear-gradient(150deg, #ffffff 0%, #ffffff 72%, #f8fafc 100%);
    }

    .panel-head {
      padding-bottom: 10px;
      border-bottom: 1px solid #eef2f7;
    }

    .panel-head h2,
    .panel-head h3 {
      color: #0f172a;
      letter-spacing: -.02em;
    }

    .panel-head h2::after {
      content: "";
      display: block;
      width: 38px;
      height: 3px;
      margin-top: 7px;
      border-radius: 99px;
      background: linear-gradient(90deg, #e11d48, #2563eb);
    }

    input,
    select,
    textarea {
      color: #0f172a;
      border-color: #dbe3ee;
      background: #f8fafc;
    }

    input:hover,
    select:hover,
    textarea:hover {
      border-color: #bfdbfe;
      background: #ffffff;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: #3b82f6;
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(37,99,235,.11);
    }

    .field {
      color: #334155;
      font-weight: 750;
    }

    .field > span,
    .muted {
      color: #64748b;
    }

    .form-grid,
    .student-filter-toolbar,
    .grade-attendance-toolbar {
      border-color: #e2e8f0;
    }

    .student-filter-toolbar,
    .grade-attendance-toolbar,
    .attendance-toolbar {
      border-radius: 16px;
      background: linear-gradient(135deg, #f8fafc, #eff6ff);
    }

    .table-wrap {
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 8px 22px rgba(15,23,42,.045);
    }

    table {
      color: #334155;
    }

    th {
      color: #334155;
      background: linear-gradient(180deg, #f8fafc, #f1f5f9);
      border-bottom-color: #dbe3ee;
      font-size: 11px;
      letter-spacing: .045em;
      text-transform: uppercase;
    }

    td {
      border-bottom-color: #eef2f7;
    }

    tbody tr {
      transition: background .12s ease, box-shadow .12s ease;
    }

    tbody tr:hover {
      background: #f8fbff;
      box-shadow: inset 3px 0 0 #2563eb;
    }

    button {
      transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
    }

    button:active {
      transform: translateY(1px);
    }

    .mini {
      color: #1d4ed8;
      border-color: #bfdbfe;
      background: #eff6ff;
    }

    .mini:hover {
      color: #ffffff;
      border-color: #2563eb;
      background: #2563eb;
      box-shadow: 0 8px 18px rgba(37,99,235,.20);
    }

    .danger {
      color: #be123c;
      border-color: #fecdd3;
      background: #fff1f2;
    }

    .danger:hover {
      color: #ffffff;
      border-color: #e11d48;
      background: #e11d48;
    }

    .pill.ok {
      color: #047857;
      border-color: #a7f3d0;
      background: #ecfdf5;
    }

    .pill.warn {
      color: #b45309;
      border-color: #fde68a;
      background: #fffbeb;
    }

    .pill.bad {
      color: #be123c;
      border-color: #fecdd3;
      background: #fff1f2;
    }

    .pill.violet {
      color: #6d28d9;
      border-color: #ddd6fe;
      background: #f5f3ff;
    }

    .quick-card,
    .parent-mini-panel,
    .incident-card,
    .class-card {
      border-color: #e2e8f0;
      background: linear-gradient(145deg, #ffffff, #f8fafc);
    }

    .quick-card:hover,
    .incident-card:hover,
    .class-card:hover {
      border-color: #bfdbfe;
      box-shadow: 0 16px 32px rgba(37,99,235,.10);
      transform: translateY(-2px);
    }

    .attendance-main,
    .grade-attendance-panel {
      border-top: 4px solid #2563eb;
    }

    .attendance-qr-panel {
      border-top: 4px solid #0d9488;
    }

    .payment-control-panel {
      border-top: 4px solid #f59e0b;
    }

    #incidentsView .panel {
      border-top: 4px solid #e11d48;
    }

    #materialsView .panel {
      border-top: 4px solid #7c3aed;
    }

    .notes-empty-state {
      min-height: 420px;
      display: grid;
      place-items: center;
      padding: 34px;
      text-align: center;
      border-top: 4px solid #7c3aed;
      background:
        radial-gradient(circle at 50% 16%, rgba(124,58,237,.10), transparent 32%),
        linear-gradient(145deg, #ffffff, #f8fafc);
    }

    .notes-empty-content {
      width: min(100%, 620px);
    }

    .notes-empty-icon {
      width: 72px;
      height: 72px;
      margin: 0 auto 18px;
      display: grid;
      place-items: center;
      border-radius: 22px;
      color: #ffffff;
      background: linear-gradient(145deg, #e11d48, #7c3aed 58%, #2563eb);
      box-shadow: 0 18px 38px rgba(124,58,237,.22);
    }

    .notes-empty-icon svg {
      width: 34px;
      height: 34px;
    }

    .notes-empty-content h2 {
      margin: 0;
      color: #0f172a;
      font-size: clamp(24px, 4vw, 34px);
    }

    .notes-empty-content p {
      margin: 12px auto 0;
      color: #64748b;
      line-height: 1.65;
    }

    .notes-empty-badge {
      display: inline-flex;
      margin-top: 18px;
      padding: 8px 12px;
      border: 1px solid #ddd6fe;
      border-radius: 999px;
      color: #6d28d9;
      background: #f5f3ff;
      font-size: 12px;
      font-weight: 850;
    }

    #databaseView .panel {
      border-top: 4px solid #0f172a;
    }

    .admin-center-hero {
      padding: clamp(22px, 4vw, 38px);
      border: 1px solid #dbeafe;
      border-radius: 24px;
      color: #eff6ff;
      background:
        radial-gradient(circle at 88% 12%, rgba(96,165,250,.42), transparent 32%),
        linear-gradient(135deg, #0f172a, #1e3a8a 58%, #2563eb);
      box-shadow: 0 24px 60px rgba(30,58,138,.20);
    }
    .admin-center-hero h2 { margin: 0; color: #fff; font-size: clamp(26px, 4vw, 38px); }
    .admin-center-hero p { max-width: 760px; margin: 10px 0 0; color: #dbeafe; line-height: 1.65; }
    .admin-center-status { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
    .admin-center-status span { padding:8px 12px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(255,255,255,.10); font-weight:800; }
    .admin-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px; }
    .admin-metric { padding:18px; border:1px solid #e2e8f0; border-radius:18px; background:#fff; }
    .admin-metric span { color:#64748b; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
    .admin-metric strong { display:block; margin-top:6px; color:#0f172a; font-size:30px; }
    .admin-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .admin-workspace-tabs { display:flex; gap:8px; overflow-x:auto; padding:8px; margin-bottom:18px; border:1px solid #dbeafe; border-radius:18px; background:#eff6ff; scrollbar-width:thin; }
    .admin-workspace-tabs button { flex:0 0 auto; border-color:transparent; color:#1e3a8a; background:transparent; }
    .admin-workspace-tabs button:hover, .admin-workspace-tabs button.active { color:#fff; background:#2563eb; box-shadow:0 8px 18px rgba(37,99,235,.22); }
    .admin-context-bar { display:flex; align-items:center; gap:14px; position:sticky; top:8px; z-index:25; margin:0 0 16px; padding:12px 14px; border:1px solid #bfdbfe; border-radius:18px; background:rgba(239,246,255,.96); box-shadow:0 12px 30px rgba(30,64,175,.12); backdrop-filter:blur(12px); }
    .admin-context-copy { min-width:180px; }
    .admin-context-copy strong { display:block; color:#172554; }
    .admin-context-copy span { color:#64748b; font-size:12px; }
    .admin-context-bar .admin-workspace-tabs { flex:1; margin:0; padding:4px; border:0; background:transparent; }
    .admin-action-card { display:flex; min-height:160px; flex-direction:column; align-items:flex-start; padding:20px; border:1px solid #dbeafe; border-radius:20px; background:linear-gradient(145deg,#fff,#f8fbff); }
    .admin-action-card h3 { margin:0; color:#172554; }
    .admin-action-card p { flex:1; color:#64748b; line-height:1.55; }
    .admin-health-list { display:grid; gap:10px; }
    .admin-health-item { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:#f8fafc; }
    .admin-health-item::before { content:""; width:10px; height:10px; border-radius:50%; background:#16a34a; }
    .admin-health-item.warning::before { background:#f59e0b; }
    .admin-health-item.error::before { background:#dc2626; }
    .coord-command-bar { display:grid; grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(150px,.7fr)) auto; gap:12px; align-items:end; margin-top:20px; padding:16px; border:1px solid rgba(255,255,255,.22); border-radius:20px; background:rgba(15,23,42,.28); backdrop-filter:blur(12px); }
    .coord-command-bar label { display:grid; gap:6px; color:#dbeafe; font-size:12px; font-weight:850; }
    .coord-command-bar input, .coord-command-bar select { width:100%; min-height:44px; border:1px solid rgba(255,255,255,.28); border-radius:13px; color:#0f172a; background:#fff; }
    .coord-command-bar button { min-height:44px; border-color:#fff; color:#1e3a8a; background:#fff; }
    .coord-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
    .coord-section-heading h2 { margin:0; color:#0f172a; }
    .coord-section-heading p { margin:5px 0 0; color:#64748b; }
    .coord-task-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
    .coord-task { position:relative; display:flex; min-height:178px; flex-direction:column; align-items:flex-start; overflow:hidden; padding:20px; border:1px solid #e2e8f0; border-radius:20px; background:#fff; box-shadow:0 12px 28px rgba(15,23,42,.06); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
    .coord-task:hover { transform:translateY(-3px); border-color:#93c5fd; box-shadow:0 18px 34px rgba(30,64,175,.12); }
    .coord-task::after { content:""; position:absolute; width:90px; height:90px; right:-34px; top:-34px; border-radius:50%; background:var(--task-color,#dbeafe); opacity:.72; }
    .coord-task-icon { display:grid; width:42px; height:42px; place-items:center; border-radius:14px; color:#1d4ed8; background:#eff6ff; font-size:20px; font-weight:900; }
    .coord-task h3 { margin:14px 0 5px; color:#172554; font-size:17px; }
    .coord-task p { flex:1; margin:0 0 14px; color:#64748b; line-height:1.45; }
    .coord-task button { padding:8px 0; border:0; color:#1d4ed8; background:transparent; box-shadow:none; }
    .coord-insight-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
    .coord-alert-list,.coord-result-list { display:grid; gap:10px; }
    .coord-alert,.coord-result { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border:1px solid #e2e8f0; border-radius:15px; background:#f8fafc; }
    .coord-alert.warning { border-color:#fde68a; background:#fffbeb; }
    .coord-alert strong,.coord-result strong { display:block; color:#0f172a; }
    .coord-alert span,.coord-result span { display:block; margin-top:2px; color:#64748b; font-size:12px; }
    .coord-result button,.coord-alert button { flex:0 0 auto; }
    .coord-empty { padding:22px; border:1px dashed #cbd5e1; border-radius:16px; color:#64748b; text-align:center; }
    .coord-context-pill { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:999px; color:#1e3a8a; background:#eff6ff; font-size:12px; font-weight:850; }
    @media (max-width:1050px) { .coord-task-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .coord-command-bar { grid-template-columns:1fr 1fr; } .coord-command-bar .coord-search { grid-column:1/-1; } }
    @media (max-width:760px) { .coord-task-grid,.coord-insight-grid,.coord-command-bar { grid-template-columns:1fr; } .coord-command-bar .coord-search { grid-column:auto; } }
    .academic-builder { overflow:hidden; border-color:#bfdbfe; background:linear-gradient(145deg,#fff,#f5f9ff); }
    .academic-builder-head { display:flex; justify-content:space-between; gap:18px; margin-bottom:18px; }
    .academic-builder-head h2 { margin:0; color:#172554; font-size:22px; }
    .academic-builder-head p { max-width:760px; margin:7px 0 0; color:#64748b; line-height:1.55; }
    .academic-builder-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
    .academic-builder-form .wide { grid-column:span 2; }
    .academic-builder-form .full { grid-column:1/-1; }
    .academic-builder-options { display:flex; flex-wrap:wrap; gap:10px; padding:13px; border:1px solid #dbeafe; border-radius:15px; background:#eff6ff; }
    .academic-builder-options label { display:flex; align-items:center; gap:7px; color:#1e3a8a; font-size:13px; font-weight:800; }
    .academic-builder-options input { width:auto; }
    .academic-builder-preview { min-height:48px; padding:13px 15px; border:1px dashed #93c5fd; border-radius:15px; color:#475569; background:#fff; }
    .competency-chip { display:inline-flex; margin:3px 5px 3px 0; padding:6px 9px; border-radius:999px; color:#5b21b6; background:#f3e8ff; font-size:12px; font-weight:800; }
    @media (max-width:1000px) { .academic-builder-form { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:680px) { .academic-builder-form { grid-template-columns:1fr; } .academic-builder-form .wide,.academic-builder-form .full { grid-column:auto; } }
    @media (max-width: 900px) { .admin-metric-grid { grid-template-columns:repeat(2,1fr); } .admin-action-grid { grid-template-columns:1fr; } }
    @media (max-width: 760px) { .admin-context-bar { position:static; align-items:stretch; flex-direction:column; } .admin-context-copy { display:flex; align-items:center; justify-content:space-between; } }

    ::selection {
      color: #ffffff;
      background: #e11d48;
    }

    @media (max-width: 1180px) {
      .login-screen::before,
      .login-screen::after {
        font-size: clamp(42px, 7vw, 76px);
        opacity: .72;
      }

      .app { grid-template-columns: 92px minmax(0, 1fr); }
      .brand div:last-child, .nav span, .role, .system-note { display: none; }
      .brand { justify-content: center; padding: 6px 0 14px; }
      .sidebar-profile {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 8px;
      }
      .sidebar-profile-copy,
      .nav-section-label {
        display: none;
      }
      .nav-group {
        border: 0;
        background: transparent;
        overflow: visible;
      }
      .nav-group summary {
        display: none;
      }
      .nav-group-items {
        padding: 0;
      }
      .nav button { justify-content: center; }
      .nav button[data-label]:hover::after {
        content: attr(data-label);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 40;
        min-width: max-content;
        max-width: 220px;
        padding: 8px 11px;
        border-radius: 8px;
        background: #ffffff;
        color: #8f2f3b;
        border: 1px solid rgba(217, 76, 92, .28);
        box-shadow: 0 12px 24px rgba(16,25,40,.18);
        font-size: 12px;
        font-weight: 900;
        line-height: 1.1;
        pointer-events: none;
      }
      .hero, .grid { grid-template-columns: 1fr; }
      #accountView .grid > .panel:nth-child(2),
      #accountView .grid > .panel:nth-child(3),
      #accountView .grid > .panel:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
      }
      .document-link { grid-template-columns: 150px minmax(0, 1fr); }
      .document-link .open-badge { grid-column: 2; justify-self: start; }
      .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .cards, .three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #classCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grade-attendance-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .convivencia-map {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: auto;
      }
      .convivencia-map::before { display: none; }
      .convivencia-node.main { grid-column: 1 / -1; grid-row: auto; }
      .convivencia-node.top-left,
      .convivencia-node.top-right,
      .convivencia-node.mid.one,
      .convivencia-node.mid.two,
      .convivencia-node.mid.three,
      .convivencia-node.mid.four,
      .convivencia-node.bottom.early,
      .convivencia-node.bottom.uniform,
      .convivencia-note {
        grid-column: auto;
        grid-row: auto;
      }
      .convivencia-note { grid-column: span 2; }
      .student-filter-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 760px) {
      .login-screen {
        grid-template-columns: 1fr;
        align-items: start;
        padding: 14px;
      }

      .login-screen::before,
      .login-screen::after {
        display: none;
      }

      .login-panel {
        border-radius: 18px;
        padding: 22px 18px;
        width: min(100%, 520px);
      }

      .login-logo {
        align-items: center;
      }

      .login-logo .brand-mark {
        width: 48px;
        height: 48px;
      }

      .login-help {
        gap: 6px;
      }

      .login-help code {
        border-radius: 10px;
        white-space: normal;
      }

      .login-form {
        grid-template-columns: 1fr;
      }

      .login-social {
        grid-template-columns: 1fr;
      }

      .login-side {
        display: block;
        margin-top: 14px;
        padding: 0 6px;
      }

      .login-side h2 {
        font-size: 22px;
      }

      .login-side p {
        font-size: 13px;
      }

      .app { display: block; }
      .mobile-menu { display: inline-grid; place-items: center; }
      .app.nav-collapsed .sidebar { display: none; }
      .sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        padding: 12px;
      }
      .brand { flex: 0 0 auto; border-bottom: 0; }
      .nav { grid-auto-flow: column; grid-auto-columns: max-content; }
      .nav button[data-label]:hover::after {
        left: 50%;
        top: calc(100% + 8px);
        transform: translateX(-50%);
      }
      main { padding: 14px; }
      .topbar { flex-direction: column; align-items: stretch; }
      .top-actions { justify-content: space-between; }
      .hero { min-height: 360px; padding: 22px; }
      .document-link {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 18px;
        text-align: center;
      }
      .document-link img {
        width: 150px;
        margin: 0 auto;
      }
      .document-link .open-badge {
        grid-column: auto;
        justify-self: center;
      }
      .stats, .cards, .three, .form { grid-template-columns: 1fr; }
      #classCards { grid-template-columns: 1fr; }
      .grade-attendance-toolbar { grid-template-columns: 1fr; }
      .parent-child-sections { grid-template-columns: 1fr; }
      .students-convivencia-banner { padding: 16px; }
      .convivencia-map {
        min-width: 0;
        grid-template-columns: 1fr;
        gap: 13px;
        min-height: 0;
      }
      .convivencia-node,
      .convivencia-node.main,
      .convivencia-node.top-left,
      .convivencia-node.top-right,
      .convivencia-node.mid.one,
      .convivencia-node.mid.two,
      .convivencia-node.mid.three,
      .convivencia-node.mid.four,
      .convivencia-node.bottom.early,
      .convivencia-node.bottom.uniform,
      .convivencia-note {
        grid-column: 1;
      }
      .convivencia-node::before,
      .convivencia-node::after {
        display: none;
      }
      .student-filter-toolbar { grid-template-columns: 1fr; }
      .notebook-term-multiselect { grid-column: 1; }
      .span-2 { grid-column: auto; }
    }

    /* Vista compacta general: aprovecha mejor pantallas al 100 % de zoom. */
    @media (min-width: 761px) {
      body { font-size: 14px; }
      .app { grid-template-columns: 232px minmax(0, 1fr); }
      .sidebar { padding: 13px 11px; gap: 8px; }
      .brand { gap: 9px; padding: 4px 6px 9px; }
      .brand-mark { width: 45px; height: 45px; }
      .brand strong { font-size: 15px; }
      .sidebar-profile {
        grid-template-columns: 43px minmax(0, 1fr);
        gap: 8px;
        padding: 9px;
        border-radius: 14px;
      }
      .sidebar-avatar { width: 43px; height: 43px; font-size: 13px; }
      .sidebar-profile-copy strong { font-size: 12px; }
      .sidebar-profile-copy span { font-size: 10px; margin-top: 2px; }
      .sidebar-online { margin-top: 4px !important; }
      .role { padding: 8px; border-radius: 14px; }
      .role span { font-size: 10px; margin-bottom: 4px; }
      .role select { padding: 7px 9px; border-radius: 12px; font-size: 12px; }
      .role .logout-inline { margin-top: 7px; padding: 7px 10px; border-radius: 12px; font-size: 12px; }
      .nav { gap: 6px; }
      .nav-groups { gap: 6px; }
      .nav-group { border-radius: 12px; }
      .nav-group summary { min-height: 32px; padding: 7px 9px; font-size: 9px; }
      .nav-group-items { gap: 3px; padding: 0 5px 5px; }
      .nav-group-items button { min-height: 30px; padding: 6px 8px; font-size: 11px; }
      .nav-main-actions .nav-main-button { min-height: 32px; padding: 6px; font-size: 11px; }
      main { padding: 14px; }
      .topbar { gap: 10px; margin-bottom: 10px; }
      .search { max-width: 700px; gap: 8px; padding: 8px 11px; border-radius: 14px; }
      .top-actions { gap: 7px; }
      .ghost, .primary, .danger { min-height: 34px; padding: 7px 11px; font-size: 12px; }
      .session-badge { padding: 7px 10px; font-size: 11px; }
      .hero {
        min-height: 178px;
        grid-template-columns: minmax(0, 1fr) 275px;
        gap: 14px;
        padding: 19px 22px;
        border-radius: 18px;
      }
      .hero h1 { margin-bottom: 7px; font-size: clamp(29px, 3.3vw, 40px); }
      .hero p { max-width: 680px; line-height: 1.45; font-size: 13px; }
      .hero-panel { padding: 12px; border-radius: 15px; }
      .hero-panel strong { margin-top: 4px; font-size: 20px; }
      .stats { gap: 9px; margin-top: 10px; }
      .stat, .panel, .card { border-radius: 14px; }
      .stat { min-height: 80px; padding: 11px; }
      .stat span { font-size: 11px; }
      .stat strong { margin: 6px 0 1px; font-size: 22px; }
      .view { margin-top: 11px; }
    }

    @media (max-width: 760px) {
      body { font-size: 13px; }
      main { padding: 8px; }
      .sidebar { padding: 8px; gap: 7px; }
      .topbar { gap: 7px; margin-bottom: 8px; }
      .search { padding: 7px 9px; border-radius: 12px; }
      .top-actions { gap: 5px; flex-wrap: wrap; }
      .ghost, .primary, .danger { min-height: 32px; padding: 6px 9px; font-size: 11px; }
      .session-badge { padding: 6px 8px; font-size: 10px; }
      .hero {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 15px;
        border-radius: 15px;
      }
      .hero h1 { margin-bottom: 6px; font-size: clamp(25px, 9vw, 32px); }
      .hero p { line-height: 1.4; font-size: 12px; }
      .hero-panel { padding: 10px; border-radius: 12px; }
      .hero-panel strong { font-size: 18px; }
      .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
      .stat { min-height: 72px; padding: 9px; }
      .stat span { font-size: 10px; }
      .stat strong { margin: 5px 0 1px; font-size: 20px; }
      .panel, .card { border-radius: 12px; }
      .view { margin-top: 8px; }
    }

    /* Experiencia móvil completa: navegación táctil y contenido legible. */
    .mobile-nav-backdrop { display: none; }

    @media (max-width: 760px) {
      html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      body { min-height: 100dvh; }
      body.mobile-nav-open { overflow: hidden; }
      .app { min-height: 100dvh; }
      .app main {
        width: 100%;
        min-width: 0;
        padding: 8px;
      }

      .sidebar {
        display: flex !important;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1002;
        width: min(86vw, 330px);
        height: 100dvh;
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(0);
        transition: transform .22s ease;
        box-shadow: 24px 0 60px rgba(15, 23, 42, .28);
      }

      .app.nav-collapsed .sidebar {
        display: flex !important;
        transform: translateX(-105%);
        box-shadow: none;
      }

      .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1001;
        border: 0;
        padding: 0;
        background: rgba(15, 23, 42, .42);
        opacity: 1;
        transition: opacity .22s ease;
      }

      .app.nav-collapsed .mobile-nav-backdrop {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
      }

      .brand {
        justify-content: flex-start;
        padding: 5px 4px 11px;
        border-bottom: 1px solid rgba(143,47,59,.14);
      }
      .brand div:last-child,
      .sidebar-profile-copy,
      .nav-section-label,
      .role,
      .system-note,
      .nav span {
        display: block;
      }
      .sidebar-profile {
        grid-template-columns: 44px minmax(0, 1fr);
        justify-items: stretch;
      }
      .nav {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow: visible;
      }
      .nav-groups { display: grid; }
      .nav-group {
        display: block;
        border: 1px solid rgba(143,47,59,.12);
        background: rgba(255,255,255,.5);
        overflow: hidden;
      }
      .nav-group summary {
        display: flex;
      }
      .nav-group-items {
        display: grid;
        padding: 0 6px 6px;
      }
      .nav button,
      .nav-group-items button,
      .nav-main-actions .nav-main-button {
        justify-content: flex-start;
        min-height: 44px;
        width: 100%;
      }
      .nav button[data-label]:hover::after { display: none; }

      .topbar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        gap: 7px;
        position: sticky;
        top: 0;
        z-index: 50;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 8px 22px rgba(15,23,42,.08);
      }
      .mobile-menu {
        display: inline-grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border-radius: 12px;
        font-size: 20px;
      }
      .search {
        min-width: 0;
        width: 100%;
        max-width: none;
        min-height: 44px;
      }
      .search input { min-width: 0; }
      .top-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: stretch;
      }
      .top-actions > * { min-width: 0; }
      .session-badge {
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      input,
      select,
      textarea {
        max-width: 100%;
        font-size: 16px !important;
      }
      button,
      .ghost,
      .primary,
      .danger {
        min-height: 44px;
        touch-action: manipulation;
      }
      .panel { padding: 12px; }
      .panel-head {
        align-items: flex-start;
        gap: 8px;
        flex-wrap: wrap;
      }
      .panel-head h2 { font-size: 17px; }
      .class-management-toolbar,
      .gradebook-toolbar,
      .incident-filter-toolbar,
      .student-filter-toolbar,
      .attendance-filter-toolbar,
      .bulk-toolbar,
      .grade-filters {
        grid-template-columns: 1fr !important;
      }
      .form,
      .grid,
      .cards,
      .three {
        min-width: 0;
      }
      .table-wrap,
      .official-table-wrap,
      .student-table-wrap,
      .attendance-sheet {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
      }
      table { font-size: 11px; }
      th, td { padding: 7px 6px; }
      .official-report[data-official-notes-form] {
        width: 100%;
        max-width: 100%;
        zoom: 1 !important;
      }
      .official-table {
        min-width: 720px;
      }
      .official-table-scroll-top {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .official-actions {
        flex-direction: column;
        align-items: stretch;
      }
      .official-actions button { width: 100%; }
      .toast {
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
      }
    }

    @media (max-width: 420px) {
      .top-actions {
        grid-template-columns: 1fr 1fr;
      }
      .top-actions .session-badge {
        grid-column: 1 / -1;
      }
      .hero h1 { font-size: 25px; }
      .stats { grid-template-columns: 1fr 1fr; }
      .stat { min-width: 0; }
      .stat strong { font-size: 18px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .sidebar,
      .mobile-nav-backdrop {
        transition: none !important;
      }
    }
    .notes-submodule-tabs {
      display: flex;
      gap: 8px;
      margin: 4px 0 14px;
      padding: 5px;
      width: fit-content;
      border: 1px solid #d9e2f2;
      border-radius: 14px;
      background: #f4f7fc;
    }
    .notes-submodule-tabs button {
      border: 0;
      border-radius: 10px;
      padding: 9px 15px;
      color: #40506a;
      background: transparent;
      font-weight: 800;
      cursor: pointer;
    }
    .notes-submodule-tabs button.active {
      color: #fff;
      background: linear-gradient(135deg, #155eef, #5b55df);
      box-shadow: 0 5px 14px rgba(32, 87, 210, .22);
    }
    .notes-submodule-tabs button:disabled {
      color: #8a93a2;
      background: #dfe3e8;
      box-shadow: none;
      cursor: not-allowed;
      opacity: 1;
    }
    .notes-register-only { display: none !important; }
    .notes-import-only { display: none !important; }
    .notes-comments-only { display: none !important; }
    #notesView[data-notes-mode="register"] #notesRegisterTermsFilter,
    #notesView[data-notes-mode="register"] #notesRegisterAreaFilterField,
    #notesView[data-notes-mode="register"] #saveNotesRegister,
    #notesView[data-notes-mode="register"] #openRegisterIntranet { display: flex !important; }
    #notesView[data-notes-mode="register"] #notesRegisterWorkspace {
      display: block !important;
      width: 100%;
      min-width: 0;
      margin-top: 14px;
    }
    #notesView[data-notes-mode="register"] #notesStudentFilterField,
    #notesView[data-notes-mode="register"] #notesTermsFilter,
    #notesView[data-notes-mode="register"] #saveOfficialNotes,
    #notesView[data-notes-mode="register"] #notesIndividualWorkspace { display: none !important; }
    #notesView[data-notes-mode="import"] #notesImportWorkspace { display: block !important; }
    #notesView[data-notes-mode="import"] #notesRegisterTermsFilter { display: flex !important; }
    #notesView[data-notes-mode="import"] #notesStudentFilterField,
    #notesView[data-notes-mode="import"] #notesTermsFilter,
    #notesView[data-notes-mode="import"] #saveOfficialNotes,
    #notesView[data-notes-mode="import"] #saveNotesRegister,
    #notesView[data-notes-mode="import"] #openRegisterIntranet,
    #notesView[data-notes-mode="import"] #notesIndividualWorkspace,
    #notesView[data-notes-mode="import"] #notesRegisterWorkspace { display: none !important; }
    #notesView[data-notes-mode="individual"] #notesCommentsTermFilter,
    #notesView[data-notes-mode="individual"] #saveNotesComments { display: flex !important; }
    #notesView[data-notes-mode="individual"] #notesCommentsWorkspace {
      display: block !important;
      margin-top: 16px;
    }
    #notesView[data-notes-mode="individual"] #notesStudentFilterField,
    #notesView[data-notes-mode="individual"] #notesTermsFilter,
    #notesView[data-notes-mode="individual"] #saveOfficialNotes,
    #notesView[data-notes-mode="individual"] #notesIndividualWorkspace { display: none !important; }
    .notes-comments-card {
      overflow: hidden;
      border: 1px solid #b8c8e2;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(29, 65, 128, .08);
    }
    .notes-comments-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      border-bottom: 1px solid #d7e0ef;
      background: linear-gradient(135deg, #edf4ff, #f8faff);
    }
    .notes-comments-head h3 { margin: 0 0 4px; color: #17396f; }
    .notes-comments-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .notes-comments-table th,
    .notes-comments-table td { border-bottom: 1px solid #d7e0ef; padding: 10px 12px; }
    .notes-comments-table thead th {
      color: #294a7a;
      background: #eef4fd;
      font-size: 12px;
      letter-spacing: .025em;
      text-align: left;
    }
    .notes-comments-table .comments-number { width: 54px; text-align: center; }
    .notes-comments-table .comments-student { width: 34%; font-weight: 800; color: #162b4d; }
    .notes-comments-table .comments-average { width: 145px; text-align: center; }
    .comments-average-value {
      display: inline-flex;
      min-width: 78px;
      min-height: 34px;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border: 1px solid #c5d3e8;
      border-radius: 999px;
      background: #f4f7fc;
      color: #65748b;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    .notes-comments-table textarea {
      width: 100%;
      min-height: 72px;
      resize: vertical;
      border: 1px solid #afc0dd;
      border-radius: 10px;
      padding: 10px 12px;
      color: #1d2d47;
      background: #fff;
      font: inherit;
      line-height: 1.4;
    }
    .notes-comments-table textarea:focus {
      outline: 3px solid rgba(21, 94, 239, .14);
      border-color: #155eef;
    }
    @media (max-width: 760px) {
      .notes-comments-table .comments-student { width: 34%; }
      .notes-comments-table .comments-average { width: 108px; }
      .comments-average-value { min-width: 68px; padding: 5px 7px; }
      .notes-comments-table th,
      .notes-comments-table td { padding: 8px; }
    }
    .notes-import-drop { border:2px dashed #9bb3df;border-radius:16px;padding:30px;text-align:center;background:#f6f9ff;margin:16px 0; }
    .notes-import-summary { display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:16px 0; }
    .notes-import-stat { padding:14px;border-radius:12px;background:#f1f5fb; }
    .notes-import-stat strong { display:block;font-size:24px; }
    .notes-import-actions { display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px; }
    .notes-import-notice { padding:12px 14px;border-radius:12px;background:#eef5ff;color:#30415f;margin-top:14px; }
    .notes-register-scroll {
      display: block !important;
      width: 100%;
      max-width: 100%;
      overflow-x: scroll;
      overflow-y: visible;
      scrollbar-gutter: stable;
      border: 1px solid #7386a4;
      border-radius: 10px;
      background: #fff;
    }
    .notes-register-top-scroll {
      display: block !important;
      width: 100%;
      height: 17px;
      margin-bottom: 5px;
      overflow-x: scroll;
      overflow-y: hidden;
      scrollbar-gutter: stable;
      border: 1px solid #c4cfdf;
      border-radius: 8px;
      background: #eef3fa;
    }
    .notes-register-top-scroll-inner { height: 1px; }
    .notes-register-table {
      width: max-content;
      min-width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      color: #17233a;
      font-size: 11px;
    }
    .notes-register-table th,
    .notes-register-table td {
      border: 1px solid #7386a4;
      padding: 0;
      text-align: center;
    }
    .notes-register-table thead th {
      height: 46px;
      min-width: 40px;
      width: 40px;
      vertical-align: middle;
      background: #edf2f9;
    }
    .notes-register-table thead .register-area-group {
      height: 30px;
      padding: 5px 8px;
      background: #d8e3f3;
      color: #1c3f70;
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
    }
    .notes-register-table .register-number {
      position: sticky;
      left: 0;
      z-index: 4;
      width: 36px;
      min-width: 36px;
      background: #fff;
    }
    .notes-register-table .register-student {
      position: sticky;
      left: 36px;
      z-index: 3;
      width: 235px;
      min-width: 235px;
      padding: 7px 9px;
      text-align: left;
      background: #fff;
      font-weight: 700;
    }
    .notes-register-table thead .register-number,
    .notes-register-table thead .register-student {
      z-index: 6;
      vertical-align: middle;
      background: #dfe7f3;
      font-size: 10px;
    }
    .notes-register-table .register-course-label {
      display: block;
      width: 100%;
      padding: 5px 3px;
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.05;
      font-size: 7px;
      font-weight: 800;
    }
    .notes-register-table .register-average {
      min-width: 62px;
      width: 62px;
      background: #dbe7f7;
    }
    .notes-register-table .register-average .register-course-label {
      color: #174b89;
      font-size: 9px;
    }
    .notes-register-table .register-conclusion {
      width: 190px;
      min-width: 190px;
      background: #fff8dc;
    }
    .notes-register-table .register-conclusion .register-course-label {
      color: #745000;
      font-size: 8px;
    }
    .register-competency-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-width: 42px;
      margin: 3px auto 1px;
      padding: 2px 4px;
      border: 1px solid #5a8fee;
      border-radius: 999px;
      background: #eaf2ff;
      color: #1454b8;
      font: 800 7px/1 Arial, sans-serif;
      cursor: pointer;
    }
    .register-competency-toggle::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #1769e8;
    }
    .register-competency-toggle[aria-pressed="false"] {
      border-color: #9ba3af;
      background: #eceff3;
      color: #626b78;
    }
    .register-competency-toggle[aria-pressed="false"]::before { background: #8c949f; }
    .register-competency-toggle:disabled { opacity: .55; cursor: not-allowed; }
    .notes-register-table .register-competency-inactive {
      background: #e6e9ee !important;
      color: #687282 !important;
    }
    .notes-register-table td.register-competency-inactive select,
    .notes-register-table td.register-competency-inactive input {
      background: #dfe3e8 !important;
      color: #717986 !important;
      cursor: not-allowed;
    }
    .notes-register-table .register-conclusion textarea {
      display: block;
      width: 100%;
      min-width: 190px;
      min-height: 48px;
      box-sizing: border-box;
      padding: 5px 7px;
      border: 0;
      resize: vertical;
      background: #fffdf2;
      color: #26364f;
      font: 11px/1.25 Arial, sans-serif;
    }
    .notes-register-table .register-conclusion textarea:focus {
      outline: 2px solid #1f6feb;
      outline-offset: -2px;
      background: #fff;
    }
    .notes-register-table .register-conclusion textarea:disabled {
      background: #eef1f5;
      color: #7b8494;
    }
    .notes-register-table tbody tr { height: 32px; }
    /* Separador reforzado entre alumnos: se conserva al imprimir el registro. */
    .notes-register-table tbody tr + tr > td {
      border-top: 2px solid #244a7c;
    }
    @media print {
      .notes-register-table tbody tr + tr > td {
        border-top: .45mm solid #111 !important;
      }
    }
    .notes-register-table input {
      display: block;
      width: 100%;
      min-width: 38px;
      height: 30px;
      box-sizing: border-box;
      padding: 2px 3px;
      border: 0;
      outline: 0;
      text-align: center;
      background: #fffdf1;
      color: #173d78;
      font: 900 14px/1 Arial, sans-serif;
      appearance: textfield;
      -moz-appearance: textfield;
    }
    .notes-register-table input::-webkit-inner-spin-button,
    .notes-register-table input::-webkit-outer-spin-button {
      margin: 0;
      -webkit-appearance: none;
    }
    .notes-register-table .register-letter-select {
      width: 32px;
      height: 25px;
      padding: 1px;
      border: 0;
      outline: 0;
      background: #fffdf1;
      color: #173d78;
      text-align: center;
      font: 900 10px/1 Arial, sans-serif;
    }
    .notes-register-table .register-letter-select:focus {
      background: #e9f5ff;
      box-shadow: inset 0 0 0 2px #1f6feb;
    }
    .notes-register-table input:focus {
      background: #e9f5ff;
      box-shadow: inset 0 0 0 2px #1f6feb;
    }
    .notes-register-table input.register-low { color: #d42435; }
    .notes-register-table input:disabled { background: #f1f3f6; color: #7b8494; }
    .notes-register-scroll.register-term-locked {
      border-color: #8793a5;
      background: #e8ecf2;
    }
    .register-term-locked .notes-register-table td,
    .register-term-locked .notes-register-table .register-student,
    .register-term-locked .notes-register-table .register-number {
      background: #e5e9ef;
    }
    .register-term-locked .notes-register-table input {
      background: #d8dde5;
      color: #536071;
      cursor: not-allowed;
    }
    .register-lock-notice {
      position: sticky;
      left: 0;
      z-index: 8;
      padding: 9px 14px;
      border-bottom: 1px solid #8793a5;
      background: #dce3ec;
      color: #354256;
      font-size: 11px;
      font-weight: 900;
    }
    .notes-register-average-value {
      display: grid;
      place-items: center;
      min-height: 31px;
      color: #0c4c8a;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    [data-grade-color="AD"] {
      background-color: transparent !important;
      color: #075f9b !important;
    }
    [data-grade-color="A"] {
      background-color: transparent !important;
      color: #078341 !important;
    }
    [data-grade-color="B"] {
      background-color: transparent !important;
      color: #9a6700 !important;
    }
    [data-grade-color="C"] {
      background-color: transparent !important;
      color: #c51f2d !important;
    }
    .notes-register-average-value[data-grade-color] {
      min-height: 25px;
      margin: 0;
      border-radius: 0;
    }
    .official-table select[data-grade-color] {
      font-weight: 900;
    }
    @media (max-width: 760px) {
      .notes-submodule-tabs { width: 100%; }
      .notes-submodule-tabs button { flex: 1; padding: 9px 7px; font-size: 11px; }
      .notes-register-table .register-student { width: 175px; min-width: 175px; }
      .notes-register-table thead th { height: 50px; }
    }

    /* Exámenes: navegación ordenada con la carga como primera pestaña. */
    .library-shell { display:grid; gap:14px; }
    .library-main-tabs { display:flex; gap:6px; padding:5px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:12px; background:#fff; }
    .library-main-tabs button { border:0; border-radius:8px; padding:10px 16px; background:transparent; color:var(--muted); font-weight:800; cursor:pointer; white-space:nowrap; }
    .library-main-tabs button.active { color:#fff; background:#244fc4; box-shadow:0 5px 14px rgba(36,79,196,.2); }
    .library-dashboard { display:none; }
    .library-dashboard.active { display:block; }
    .library-dashboard > .panel { min-width:0; }
    #materialsView .library-list-panel #materialCards {
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap:10px;
    }
    .exam-library-card { display:grid; grid-template-rows:100px minmax(0,1fr); min-width:0; overflow:hidden; border:1px solid #d8e1f4; border-radius:11px; background:#fff; box-shadow:0 5px 16px rgba(35,65,125,.07); }
    .exam-card-preview { position:relative; display:grid; place-items:center; overflow:hidden; padding:8px; background:linear-gradient(135deg,#eaf0ff,#f8faff); }
    .exam-card-preview::before,.exam-card-preview::after { content:""; position:absolute; width:85px; height:85px; border-radius:50%; background:rgba(255,255,255,.45); }
    .exam-card-preview::before { left:-34px; top:-42px; }
    .exam-card-preview::after { right:-37px; bottom:-45px; }
    .exam-preview-sheet { position:relative; z-index:1; display:grid; gap:4px; width:58px; min-height:74px; padding:7px; border-radius:4px; background:#fff; box-shadow:0 6px 14px rgba(34,55,99,.18); transform:rotate(-2deg); }
    .exam-preview-sheet span { justify-self:start; border-radius:3px; padding:2px 4px; background:#244fc4; color:#fff; font-size:9px; font-weight:900; letter-spacing:.04em; }
    .exam-preview-sheet strong { color:#253858; font-size:10px; letter-spacing:.05em; }
    .exam-preview-sheet i { display:block; height:3px; border-radius:999px; background:#dce4f4; }
    .exam-preview-sheet i:nth-of-type(2) { width:78%; }
    .exam-preview-sheet i:nth-of-type(3) { width:90%; }
    .exam-preview-sheet i:nth-of-type(4) { width:62%; }
    .exam-card-preview > small { position:absolute; z-index:2; right:7px; bottom:5px; left:7px; overflow:hidden; color:#435473; font-size:10px; font-weight:800; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
    .exam-preview-pdf { background:linear-gradient(135deg,#ffe9ec,#fff7f8); }
    .exam-preview-pdf .exam-preview-sheet span { background:#c52b3a; }
    .exam-preview-word { background:linear-gradient(135deg,#e1ecff,#f5f8ff); }
    .exam-preview-excel { background:linear-gradient(135deg,#dcf5e9,#f4fcf8); }
    .exam-preview-excel .exam-preview-sheet span { background:#188153; }
    .exam-preview-slides { background:linear-gradient(135deg,#ffe8d8,#fff8f2); }
    .exam-preview-slides .exam-preview-sheet span { background:#d15c24; }
    .exam-preview-image { background:linear-gradient(135deg,#e4f6f5,#f5fcfc); }
    .exam-preview-image .exam-preview-sheet span,.exam-preview-video .exam-preview-sheet span { background:#11795a; }
    .exam-card-content { display:flex; flex-direction:column; min-width:0; padding:9px; }
    .exam-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
    .exam-card-heading > div { min-width:0; }
    .exam-card-heading h3 { margin:0 0 2px; overflow:hidden; color:#1d2b45; font-size:15px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
    .exam-card-heading span { display:block; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
    .exam-card-heading [data-delete] { flex:0 0 auto; padding:4px 6px; font-size:11px; }
    .exam-library-card .library-resource-meta { gap:3px; margin:6px 0; }
    .exam-library-card .library-resource-meta .pill { padding:3px 5px; font-size:9px; }
    .exam-library-card .exam-bimester-pill { background:#eef3ff; color:#244fc4; }
    .exam-card-description { min-height:15px; margin:1px 0 5px; overflow:hidden; color:#5b6982; font-size:11px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
    .exam-card-teacher { display:grid; gap:1px; margin-top:auto; }
    .exam-card-teacher span { color:var(--muted); font-size:9px; text-transform:uppercase; }
    .exam-card-teacher strong { overflow:hidden; color:#334462; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
    .exam-card-uploaded { display:grid; gap:1px; margin-top:5px; padding-top:5px; border-top:1px solid #edf1f8; }
    .exam-card-uploaded span { color:var(--muted); font-size:8px; text-transform:uppercase; }
    .exam-card-uploaded strong { color:#435473; font-size:10px; }
    .exam-card-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:5px; margin-top:8px; }
    .exam-card-actions .library-resource-file { justify-content:center; min-height:29px; padding:5px; font-size:10px; }
    .exam-card-actions .exam-view-button { border:1px solid #b9caf2; }
    .exam-card-actions .exam-download-button { background:#1f8a62; color:#fff; }
    .exam-card-actions button:disabled { opacity:.5; cursor:not-allowed; }
    .exam-viewer-filter {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
      padding: 14px;
      border: 1px solid #d8e1f4;
      border-radius: 12px;
      background: #f7f9ff;
    }
    .exam-viewer-status {
      grid-column: 1 / -2;
      align-self: center;
      color: #4f5f7d;
      font-size: 11px;
      font-weight: 700;
    }
    .exam-viewer-filter > button {
      justify-self: end;
    }
    .exam-download-button {
      background: #1f8a62;
      color: #fff;
    }
    @media (max-width: 960px) {
      #materialsView .library-list-panel #materialCards { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
      .exam-viewer-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .exam-viewer-status { grid-column: 1; }
    }
    @media (max-width: 560px) {
      .library-main-tabs { width:100%; overflow:auto; }
      .library-main-tabs button { flex:1 0 auto; }
      #materialsView .library-list-panel #materialCards { grid-template-columns: 1fr; }
      .exam-viewer-filter { grid-template-columns: 1fr; }
      .exam-viewer-status { grid-column: 1; }
      .exam-viewer-filter > button { justify-self: stretch; }
      .exam-library-card { grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto; }
      .exam-card-preview { min-height:210px; }
      .exam-preview-sheet { width:72px; min-height:94px; }
      .exam-card-actions { grid-template-columns:1fr; }
    }

    /* Pulido móvil transversal: seguro, táctil y sin desbordamientos. */
    @media (max-width: 760px) {
      html {
        min-height: 100%;
        scroll-padding-top: 72px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }

      body {
        min-height: 100svh;
        min-height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overscroll-behavior-y: none;
      }

      .login-screen {
        min-height: 100svh;
        min-height: 100dvh;
        padding:
          max(12px, env(safe-area-inset-top, 0px))
          max(12px, env(safe-area-inset-right, 0px))
          max(16px, env(safe-area-inset-bottom, 0px))
          max(12px, env(safe-area-inset-left, 0px));
      }
      .login-panel {
        width: 100%;
        max-width: 520px;
        padding: 18px 16px;
      }
      .login-panel h1 { margin-block: 14px 6px; }
      .login-panel > p { margin-block: 0 14px; }
      .login-social {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .login-social .social-btn {
        min-width: 0;
        min-height: 48px;
        padding-inline: 10px;
      }
      .login-side { display: none; }

      .app,
      .app main,
      .view,
      .view > *,
      .grid,
      .grid > *,
      .panel,
      .panel > *,
      .card,
      form,
      fieldset {
        min-width: 0;
        max-width: 100%;
      }

      .app main {
        padding-right: max(8px, env(safe-area-inset-right, 0px));
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
        padding-left: max(8px, env(safe-area-inset-left, 0px));
      }
      .sidebar {
        width: min(90vw, 340px);
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        overscroll-behavior: contain;
      }
      .topbar {
        top: env(safe-area-inset-top, 0px);
      }

      :where(button, a, input, select, textarea, summary):focus-visible {
        outline: 3px solid rgba(37, 99, 235, .32);
        outline-offset: 2px;
      }
      :where(button, a, summary) {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      button:not(.mobile-nav-backdrop),
      summary {
        min-height: 44px !important;
      }
      .students-convivencia-banner {
        width: 100%;
        padding: 0;
      }
      .convivencia-doc-button {
        width: 100%;
        max-width: 100%;
        justify-content: center;
      }
      .class-isolation-note {
        display: block;
        padding: 12px;
        border-radius: 12px;
        background: #f8fafc;
        color: #475569;
        line-height: 1.5;
      }
      .class-isolation-note > strong {
        display: inline;
        margin: 0;
        color: #7f1d1d;
        font-size: inherit;
      }

      .user-workspace-tabs,
      .admin-workspace-tabs,
      .notes-submodule-tabs,
      .attendance-level-tabs,
      .library-main-tabs,
      .treasury-main-tabs,
      .treasury-tabs {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
      }
      .user-workspace-tabs > *,
      .admin-workspace-tabs > *,
      .notes-submodule-tabs > *,
      .attendance-level-tabs > *,
      .library-main-tabs > *,
      .treasury-main-tabs > *,
      .treasury-tabs > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
      }
      .user-workspace-tabs > button,
      .admin-workspace-tabs > button,
      .notes-submodule-tabs > button,
      .attendance-level-tabs > button,
      .library-main-tabs > button,
      .treasury-main-tabs > button,
      .treasury-tabs > button {
        flex: 0 0 auto !important;
        min-width: max-content;
      }

      .mini-actions,
      .student-row-actions,
      .bulk-actions,
      .intranet-export-actions,
      .intranet-individual-actions,
      .notes-import-actions,
      .official-actions,
      .library-new-course-actions,
      .treasury-export-actions,
      .treasury-expense-form-actions,
      .treasury-expense-custom-actions {
        max-width: 100%;
        flex-wrap: wrap;
      }

      .table-wrap,
      .official-table-wrap,
      .student-table-wrap,
      .attendance-sheet,
      .notes-register-scroll {
        position: relative;
        border-radius: 10px;
        scrollbar-width: thin;
      }

      dialog {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px);
        margin: auto;
        overflow: auto;
        overscroll-behavior: contain;
      }
      dialog::backdrop { background: rgba(15, 23, 42, .52); }
    }

    @media (max-width: 480px) {
      .top-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .top-actions .session-badge { grid-column: 1 / -1; }
      .top-actions button { width: 100%; }
      .panel { padding: 10px; }
      .panel-head > * { min-width: 0; }
      .panel-head h2,
      .panel-head h3 { overflow-wrap: anywhere; }

      .mini-actions > button,
      .student-row-actions > button,
      .bulk-actions > button,
      .intranet-export-actions > button,
      .intranet-individual-actions > button,
      .notes-import-actions > button,
      .official-actions > button,
      .library-new-course-actions > button,
      .treasury-export-actions > button,
      .treasury-expense-form-actions > button,
      .treasury-expense-custom-actions > button {
        flex: 1 1 145px;
        min-width: 0;
      }

      dialog {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 16px);
        border-radius: 18px !important;
      }
    }

    @media (max-width: 360px) {
      .login-social { grid-template-columns: 1fr; }
      .stats { grid-template-columns: 1fr; }
      .topbar { grid-template-columns: 42px minmax(0, 1fr); }
      .mobile-menu { width: 42px; height: 42px; }
    }

    @media (max-height: 560px) and (orientation: landscape) {
      .login-screen { align-items: start; }
      .login-logo .brand-mark { width: 40px; height: 40px; }
      .login-panel h1 { margin-block: 8px 4px; font-size: 22px; }
      .login-social { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .login-social .social-btn { min-height: 44px; }
      .login-help { margin-top: 8px; }
    }

    @media screen and (max-width: 760px) {
      .payment-receipt {
        width: 100%;
        max-width: 100%;
        padding: 14px;
        border-radius: 14px;
        overflow: hidden;
      }
      .receipt-head {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .receipt-brand h2 { font-size: 28px; }
      .receipt-brand span { letter-spacing: 5px; }
      .receipt-number {
        width: 100%;
        min-width: 0;
      }
      .receipt-number span {
        padding: 10px;
        font-size: 20px;
      }
      .receipt-line {
        grid-template-columns: 1fr;
        gap: 3px;
        align-items: start;
      }
      .receipt-line b { font-size: 12px; }
      .receipt-value {
        min-width: 0;
        font-size: 16px;
        overflow-wrap: anywhere;
      }
      .receipt-amount-row,
      .receipt-footer {
        grid-template-columns: 1fr;
      }
      .receipt-methods {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
    }