:root {
  color-scheme: light;
  --ink: #17203a;
  --muted: #68728a;
  --surface: #ffffff;
  --surface-soft: #f4f7fc;
  --line: #dce3ef;
  --primary: #1565c0;
  --primary-dark: #0d47a1;
  --accent: #32a8a0;
  --warning: #fff4d6;
  --warning-line: #e7c765;
  --danger: #b3261e;
  --success: #156c45;
  --shadow: 0 22px 55px rgba(35, 60, 105, 0.13);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 6%, rgba(68, 163, 255, 0.17), transparent 31rem),
    radial-gradient(circle at 92% 92%, rgba(50, 168, 160, 0.12), transparent 27rem),
    var(--surface-soft);
}

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

.topbar {
  min-height: 76px;
  padding: 12px clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(220, 227, 239, 0.9);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: white;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 8px 20px rgba(21, 101, 192, 0.24);
}

.brand strong, .brand small { display: block; }
.brand strong { font-size: 1rem; }
.brand small { margin-top: 2px; color: var(--muted); }

.page-shell {
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(36px, 7vw, 84px) 0;
}

.auth-layout {
  min-height: 600px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(38px, 7vw, 88px);
  align-items: center;
}

.welcome-panel h1,
.dashboard-heading h1 {
  max-width: 720px;
  margin: 12px 0 18px;
  font-size: clamp(2.35rem, 5.6vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.welcome-panel > p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 2vw, 1.25rem);
  line-height: 1.7;
}

.eyebrow {
  color: var(--primary-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feature-list {
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  list-style: none;
  color: #3f4a62;
  font-weight: 650;
}

.feature-list span {
  width: 26px;
  height: 26px;
  margin-right: 8px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--accent);
}

.auth-card, .form-card {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(220, 227, 239, 0.95);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.tabs {
  margin-bottom: 30px;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border-radius: 14px;
  background: #edf2f8;
}

.tab {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-weight: 750;
}

.tab.is-active {
  color: var(--ink);
  background: white;
  box-shadow: 0 4px 14px rgba(31, 52, 88, 0.11);
}

.form-stack { display: grid; gap: 18px; }
.form-stack h2 { margin: 0 0 7px; font-size: 1.65rem; }
.form-stack p { margin: 0; }

label {
  display: grid;
  gap: 8px;
  color: #3e4860;
  font-size: 0.9rem;
  font-weight: 700;
}

.field-help {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #cad4e3;
  border-radius: 12px;
  color: var(--ink);
  background: white;
  outline: none;
  transition: 150ms ease;
}

textarea { padding: 12px 14px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.13);
}

.button {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 780;
}

.button:disabled { cursor: not-allowed; opacity: 0.62; }

.button-primary {
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 9px 20px rgba(21, 101, 192, 0.22);
}

.button-primary:hover { filter: brightness(1.07); }

.button-secondary {
  color: var(--primary-dark);
  border-color: #b9cbea;
  background: #eaf3ff;
}

.button-quiet {
  color: var(--primary-dark);
  border-color: #b9cbea;
  background: white;
}

.button-danger { color: white; background: var(--danger); }
.button-danger-quiet { color: var(--danger); border-color: #e5aaa5; background: white; }

.text-button {
  padding: 3px;
  border: 0;
  color: var(--primary-dark);
  background: transparent;
  font-weight: 700;
}

.muted { color: var(--muted); }

.notice {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #445069;
  background: #f6f8fc;
  line-height: 1.45;
}

.notice.is-error { color: var(--danger); border-color: #eab6b1; background: #fff3f2; }
.notice.is-success { color: var(--success); border-color: #a8d5c0; background: #effaf5; }
.notice.is-warning { color: #8a5a08; border-color: #e6ca85; background: #fff8df; }
.notice-warning { margin-bottom: 28px; border-color: var(--warning-line); background: var(--warning); }
.notice-warning strong, .notice-warning span { display: block; }

.dashboard-heading,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.dashboard-heading { margin-bottom: 42px; }
.dashboard-heading h1 { margin-bottom: 8px; font-size: clamp(2.4rem, 5vw, 4.3rem); }

.status-pill {
  padding: 9px 13px;
  border: 1px solid #b8dcca;
  border-radius: 999px;
  color: var(--success);
  background: #f2fbf6;
  font-size: 0.84rem;
  font-weight: 750;
  white-space: nowrap;
}

.status-pill span {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #25a56b;
}

.onboarding-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(30px, 6vw, 74px);
  align-items: start;
}

.onboarding-copy { padding-top: 18px; }
.onboarding-copy h2 { margin: 18px 0 14px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; }
.onboarding-copy > p { color: var(--muted); font-size: 1.08rem; line-height: 1.65; }

.step-badge {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--primary-dark);
  background: #e4effd;
  font-size: 0.78rem;
  font-weight: 800;
}

.privacy-card {
  margin-top: 28px;
  padding: 18px;
  border-left: 4px solid var(--warning-line);
  border-radius: 4px 14px 14px 4px;
  background: var(--warning);
}

.privacy-card p { margin: 6px 0 0; color: #66531c; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.school-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.school-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  box-shadow: 0 12px 30px rgba(35, 60, 105, 0.09);
}

.school-card h3 { margin: 0 0 8px; font-size: 1.3rem; }
.school-card p { margin: 4px 0; color: var(--muted); }
.school-card .role { margin-top: 18px; color: var(--primary-dark); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; }

.school-card .button { width: 100%; margin-top: 20px; }

.school-hub-heading,
.module-heading {
  margin: 30px 0 42px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.school-hub-heading h1,
.module-heading h1 {
  margin: 10px 0 8px;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.module-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}

.module-card {
  --module-tint: #e5f4e7;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 0.82;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 25px;
  color: inherit;
  background: linear-gradient(145deg, #ffffff 0%, #f6f8fc 64%, var(--module-tint) 145%);
  box-shadow:
    12px 14px 26px rgba(69, 86, 118, 0.16),
    -9px -9px 20px rgba(255, 255, 255, 0.94),
    inset 2px 2px 2px rgba(255, 255, 255, 0.94),
    inset -3px -3px 7px rgba(91, 111, 144, 0.08);
  text-align: center;
  transform: translateZ(0);
  transition: transform 190ms ease, box-shadow 190ms ease;
}

.module-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 118px;
  height: 118px;
  top: -42px;
  right: -40px;
  border-radius: 50%;
  background: var(--module-tint);
  box-shadow: inset 8px 8px 15px rgba(255, 255, 255, 0.5);
  opacity: 0.58;
}

button.module-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow:
    16px 20px 32px rgba(55, 74, 108, 0.21),
    -10px -10px 22px rgba(255, 255, 255, 0.96),
    inset 2px 2px 2px rgba(255, 255, 255, 0.96),
    inset -3px -3px 7px rgba(91, 111, 144, 0.07);
}

button.module-card:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow:
    5px 7px 14px rgba(55, 74, 108, 0.16),
    -5px -5px 12px rgba(255, 255, 255, 0.9),
    inset 3px 3px 8px rgba(91, 111, 144, 0.08);
}

button.module-card:focus-visible {
  outline: 4px solid rgba(21, 101, 192, 0.24);
  outline-offset: 4px;
}

.module-card.is-upcoming { filter: saturate(0.45); opacity: 0.72; }
.module-card[data-module="attendance"],
.module-card[data-module="agenda"],
.module-card[data-module="evaluations"] { --module-tint: #dcecff; }
.module-card[data-module="grades"],
.module-card[data-module="planning"],
.module-card[data-module="documents"] { --module-tint: #fff0c9; }
.module-card[data-module="civic"],
.module-card[data-module="autoCoeval"] { --module-tint: #e4defe; }

.module-artwork {
  width: min(100%, 128px);
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.module-image {
  width: 100%;
  height: 100%;
  max-height: 132px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 11px 9px rgba(28, 40, 62, 0.16));
  transition: transform 190ms ease, filter 190ms ease;
}

button.module-card:hover .module-image {
  transform: translateY(-2px) scale(1.045);
  filter: drop-shadow(0 14px 11px rgba(28, 40, 62, 0.2));
}

.module-card h3 {
  width: 100%;
  min-height: 2.5em;
  margin: 5px 0 0;
  display: grid;
  place-items: center;
  font-size: 0.94rem;
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.classrooms-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.65fr);
  gap: 20px;
  align-items: start;
}

.classroom-sidebar,
.classroom-detail {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
  box-shadow: 0 12px 32px rgba(35, 60, 105, 0.09);
}

.classroom-panel-heading h2,
.classroom-detail-heading h2 { margin: 8px 0 4px; }
.year-filter { margin-top: 18px; }
.year-disclosure { margin-top: 18px; }
.classroom-detail-heading,
.student-form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.student-form-heading { margin-top: 24px; }
.student-form-heading h3 { margin: 7px 0 0; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.classroom-list { margin: 20px 0; display: grid; gap: 9px; }
.classroom-list-empty { padding: 18px 0; color: var(--muted); line-height: 1.5; }

.classroom-list-button {
  width: 100%;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  background: white;
  text-align: left;
}

.classroom-list-button:hover,
.classroom-list-button.is-active { border-color: #94b9e8; background: #edf5ff; }
.classroom-list-button strong,
.classroom-list-button span { display: block; }
.classroom-list-button span { margin-top: 3px; color: var(--muted); font-size: 0.76rem; }
.classroom-count { color: var(--primary-dark); font-size: 0.82rem; font-weight: 800; white-space: nowrap; }

.creation-disclosure { border-top: 1px solid var(--line); padding-top: 18px; }
.creation-disclosure summary { color: var(--primary-dark); cursor: pointer; font-weight: 800; }
.compact-form { margin-top: 18px; }

.action-panel {
  margin-top: 18px;
  padding: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #bad0eb;
  border-radius: 16px;
  background: #f3f8ff;
}
.action-panel.is-danger { border-color: #e7b4af; background: #fff3f2; }
.action-panel strong { color: var(--ink); }
.action-panel p { max-width: 620px; margin: 5px 0 0; color: var(--muted); line-height: 1.5; }
.inline-action-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.inline-action-form label { min-width: 170px; }

.student-form {
  margin: 24px 0;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(120px, 0.7fr)) auto;
  gap: 12px;
  align-items: end;
  border-radius: 16px;
  background: #f5f8fc;
}

.student-table-wrap { overflow-x: auto; }
.student-table { width: 100%; border-collapse: collapse; }
.student-table th,
.student-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.student-table th { color: var(--muted); font-size: 0.76rem; text-transform: uppercase; }
.student-status { color: var(--success); font-size: 0.78rem; font-weight: 800; }
.student-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.student-action-button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #c4d2e7;
  border-radius: 9px;
  color: var(--primary-dark);
  background: white;
  font-size: 0.78rem;
  font-weight: 750;
}
.student-action-button.is-danger { color: var(--danger); border-color: #e5aaa5; }

.empty-state {
  min-height: 190px;
  display: grid;
  place-content: center;
  color: var(--muted);
  text-align: center;
}
.empty-state strong { color: var(--ink); font-size: 1.1rem; }
.empty-state p { max-width: 460px; margin: 8px auto 0; line-height: 1.55; }

.subjects-workspace {
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow);
}

.subjects-toolbar {
  margin-bottom: 28px;
  padding-bottom: 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.subjects-toolbar h2 { margin: 10px 0 6px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.subjects-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.subjects-filters label { min-width: 180px; }

.subjects-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.7fr);
  gap: 24px;
  align-items: start;
}

.subject-list { display: grid; gap: 12px; }
.subject-card {
  padding: 18px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fbfcff;
}

.subject-color {
  min-height: 100%;
  border-radius: 999px;
  background: var(--subject-color);
}

.subject-card h4 { margin: 0 0 5px; font-size: 1.08rem; }
.subject-card p { margin: 0; line-height: 1.45; }
.period-chip-list { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 7px; }
.period-chip {
  padding: 5px 9px;
  border-radius: 999px;
  color: #31547d;
  background: #eaf3ff;
  font-size: 0.73rem;
  font-weight: 800;
}
.period-chip.is-summary { color: #66531c; background: #fff3c7; }
.subject-state {
  width: fit-content;
  margin-top: 13px;
  padding: 6px 9px;
  display: block;
  border-radius: 999px;
  color: #657087;
  background: #edf1f6;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}
.subject-state.is-ready { color: var(--success); background: #eaf8f1; }
.subject-card-content { min-width: 0; }
.subject-open-button { margin-top: 14px; }

.subject-creation-panel {
  padding: 22px;
  border: 1px solid #c9d9ee;
  border-radius: 19px;
  background: #f5f9ff;
}
.subject-creation-panel h3 { margin: 8px 0 6px; }
.subject-creation-panel > p { margin: 0; line-height: 1.5; }
.color-input { min-height: 46px; padding: 5px; cursor: pointer; }
.integrity-note {
  margin-top: 20px;
  padding: 14px;
  border-radius: 13px;
  color: #31547d;
  background: #e7f1ff;
}
.integrity-note p { margin: 5px 0 0; font-size: 0.82rem; line-height: 1.5; }

.gradebook-workspace {
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow);
}

.gradebook-heading,
.gradebook-period-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.gradebook-heading .button { margin-bottom: 24px; }
.gradebook-heading .eyebrow { display: block; }
.gradebook-heading h2 { margin: 9px 0 6px; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.gradebook-heading p { margin: 0; }

.period-status {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #657087;
  background: #edf1f6;
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.period-status.is-open { color: var(--success); background: #eaf8f1; }
.period-status.is-closed { color: #9b2f27; background: #fff0ef; }
.period-status.is-summary { color: #66531c; background: #fff3c7; }

.gradebook-period-bar {
  margin: 28px 0 22px;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 24px;
  align-items: end;
  border: 1px solid #c9d9ee;
  border-radius: 18px;
  background: #f5f9ff;
}

.gradebook-period-tabs {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gradebook-period-tab {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #c4d2e7;
  border-radius: 12px;
  color: #31547d;
  background: white;
  font-weight: 800;
}

.gradebook-period-tab.is-active {
  color: white;
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 7px 16px rgba(21, 101, 192, 0.2);
}

.gradebook-period-tab.is-summary { color: #66531c; border-color: #ead489; background: #fff8df; }
.gradebook-period-tab.is-summary.is-active { color: #4f410f; background: #f5d96e; }

.period-creation-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}

.period-creation-form label { font-size: 0.78rem; }
.period-creation-form input,
.period-creation-form select,
.period-creation-form .button { min-height: 44px; }

.gradebook-term-content {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfcff;
}

.gradebook-period-heading { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.gradebook-period-heading h3 { margin: 8px 0 6px; font-size: 1.55rem; }
.gradebook-period-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.period-weight-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.period-weight-line strong { font-size: 1.1rem; }
.period-weight-line .is-complete { color: var(--success); }
.period-weight-line .is-incomplete { color: #a45f08; }

.period-rename-form {
  margin-top: 18px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid #c9d9ee;
  border-radius: 15px;
  background: #f5f9ff;
}

.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.gradebook-activity-layout {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.72fr);
  gap: 24px;
  align-items: start;
}

.activity-list { display: grid; gap: 11px; }
.activity-card {
  padding: 15px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: white;
}

.activity-card.is-locked { border-color: #d4c37b; background: #fffdf4; }
.activity-order {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--primary-dark);
  background: #eaf3ff;
  font-size: 0.8rem;
  font-weight: 850;
}

.activity-card-content { min-width: 0; }
.activity-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.activity-card-heading h4 { margin: 2px 0 5px; }
.activity-card p { margin: 0; line-height: 1.45; }
.activity-weight { color: var(--primary-dark); white-space: nowrap; }
.activity-comment { margin-top: 9px !important; color: #3f4a62; font-size: 0.88rem; }
.activity-actions { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 6px; }

.activity-editor {
  padding: 20px;
  border: 1px solid #c9d9ee;
  border-radius: 18px;
  background: #f5f9ff;
}

.activity-editor h3 { margin: 8px 0 18px; }
.activity-editor-help { margin: 17px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.activity-editor :disabled { cursor: not-allowed; }

.grade-matrix-section {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.grade-matrix-heading,
.grade-cell-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.grade-matrix-heading h3 { margin: 8px 0 6px; font-size: 1.45rem; }
.grade-matrix-heading p { margin: 0; }
.grade-state-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.grade-state-legend span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #536078;
  background: #edf1f6;
  font-size: 0.72rem;
  font-weight: 750;
}

.grade-state-legend strong { color: var(--primary-dark); }
.grade-group-editor {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #b9cbea;
  border-radius: 17px;
  background: #f5f9ff;
}

.grade-group-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.grade-group-editor-heading h4 { margin: 8px 0 5px; font-size: 1.25rem; }
.grade-group-editor-heading p { margin: 0; }
.grade-group-action-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.grade-group-action-card {
  min-width: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  border: 1px solid #d5e0f0;
  border-radius: 14px;
  background: white;
}

.grade-group-action-card > p { margin: 0; min-height: 42px; font-size: 0.82rem; line-height: 1.45; }
.grade-group-action-card label { display: grid; gap: 6px; font-size: 0.78rem; font-weight: 750; }
.grade-group-action-card .button { margin-top: auto; }
.grade-group-action-card.is-danger-zone { border-color: #edc5c2; background: #fff9f8; }
.grade-group-action-card :disabled { cursor: not-allowed; opacity: 0.55; }
.grade-matrix-table-wrap {
  margin-top: 20px;
  overflow: auto;
  border: 1px solid #c8d8ee;
  border-radius: 16px;
  background: white;
}

.grade-matrix-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
}

.grade-matrix-table th,
.grade-matrix-table td {
  min-width: 150px;
  padding: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

.grade-matrix-table thead th {
  color: #31547d;
  background: #eef5ff;
  font-size: 0.78rem;
}

.grade-matrix-table thead th strong,
.grade-matrix-table thead th span { display: block; }
.grade-matrix-table thead th span { margin-top: 4px; color: var(--muted); font-size: 0.7rem; }
.grade-matrix-table tr:last-child > * { border-bottom: 0; }
.grade-matrix-table tr > *:last-child { border-right: 0; }
.grade-student-heading,
.grade-student-cell {
  min-width: 220px !important;
  position: sticky;
  left: 0;
  z-index: 2;
}

.grade-student-heading { z-index: 3; }
.grade-student-cell {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  background: white;
}

.grade-student-cell > span:first-child {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--primary-dark);
  background: #eaf3ff;
  font-size: 0.75rem;
}

.grade-student-cell strong,
.grade-student-cell small { display: block; }
.grade-student-cell small { margin-top: 4px; color: var(--muted); font-weight: 500; }
.grade-score-cell { background: #fff; }
.grade-score-cell.is-locked { background: #fffdf4; }
.grade-score-cell input { min-height: 40px; padding: 0 9px; text-align: center; font-weight: 800; }
.grade-cell-save {
  width: 100%;
  min-height: 30px;
  margin-top: 6px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
}
.grade-cell-save:disabled { cursor: not-allowed; opacity: 0.52; }
.grade-effective-score { margin-top: 6px; display: block; color: var(--muted); text-align: center; }
.grade-cell-options {
  width: 100%;
  min-height: 32px;
  margin-top: 8px;
  border: 1px solid #c4d2e7;
  border-radius: 9px;
  color: var(--primary-dark);
  background: white;
  font-size: 0.74rem;
  font-weight: 800;
}

.grade-cell-indicators { min-height: 22px; margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.grade-cell-indicators span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 0.68rem;
  font-weight: 900;
}

.grade-cell-indicators .is-recovery { color: #8d301f; background: #ffe5df; }
.grade-cell-indicators .is-comment { color: #31547d; background: #e7f1ff; }
.grade-cell-indicators .is-extra { color: #66531c; background: #fff3c7; }
.grade-period-average {
  color: var(--primary-dark);
  background: #f5f9ff;
  font-size: 1.12rem;
  font-weight: 900;
  text-align: center !important;
}

.grade-average-heading { text-align: center !important; }
.grade-cell-editor {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #b9cbea;
  border-radius: 17px;
  background: #f5f9ff;
}

.grade-cell-editor h4 { margin: 8px 0 5px; font-size: 1.25rem; }
.grade-cell-editor p { margin: 0; }
.grade-cell-editor-heading > .grade-cell-indicators { min-width: 70px; justify-content: flex-end; }
.grade-cell-form {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 14px;
  align-items: end;
}

.grade-cell-comment-field { grid-column: 1 / -1; }
.grade-cell-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px; }

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

.grade-summary-stat {
  padding: 14px;
  border: 1px solid #d5deeb;
  border-radius: 13px;
  background: white;
}

.grade-summary-stat strong,
.grade-summary-stat span { display: block; }
.grade-summary-stat strong { color: var(--primary-dark); font-size: 1.25rem; }
.grade-summary-stat span { margin-top: 4px; color: var(--muted); font-size: 0.75rem; font-weight: 750; }
.grade-summary-stat.is-good { border-color: #a8d5c0; background: #eaf8f1; }
.grade-summary-stat.is-good strong { color: var(--success); }

.final-summary-panel {
  min-height: 330px;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid #ead489;
  border-radius: 20px;
  background: linear-gradient(145deg, #fffdf5, #fff7d7);
}

.final-summary-heading { display: flex; align-items: center; gap: 18px; }

.final-summary-icon {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #66531c;
  background: #f5d96e;
  font-size: 2rem;
  font-weight: 850;
}

.final-summary-panel h3 { margin: 6px 0 5px; font-size: 1.5rem; }
.final-summary-panel p { margin: 0; color: #6f6239; line-height: 1.6; }
.final-summary-table-wrap { margin-top: 18px; background: white; }
.final-summary-table th:not(.grade-student-heading),
.final-summary-table td:not(.grade-student-cell) { min-width: 125px; text-align: center; vertical-align: middle; }
.final-period-score { color: #3f4a62; font-weight: 800; }
.final-score { font-size: 1.08rem; font-weight: 900; }
.final-score.is-good { color: #12663f; background: #eaf8f1; }
.final-score.is-warning { color: #8a5a08; background: #fff4d6; }
.final-score.is-low { color: #9b2f27; background: #fff0ef; }
.final-summary-help { margin-top: 14px !important; font-size: 0.82rem; }

.attendance-heading { margin: 28px 0; }
.attendance-heading h2 { margin: 10px 0 8px; font-size: clamp(2rem, 4vw, 3.2rem); }

.attendance-setup,
.attendance-workspace {
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow);
}

.attendance-setup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.attendance-setup h3,
.attendance-toolbar h3 { margin: 12px 0 6px; font-size: 1.5rem; }
.attendance-setup p { margin: 0; color: var(--muted); }

.attendance-toolbar {
  margin-bottom: 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.attendance-date { width: min(180px, 100%); }
.attendance-actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 12px; }
.attendance-table-wrap { margin-top: 18px; overflow-x: auto; }

.siges-export-panel {
  margin: 0 0 24px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid #a9c7e8;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5faff, #eef6ff);
}

.siges-export-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.siges-export-heading h4 { margin: 10px 0 5px; font-size: 1.3rem; }
.siges-export-heading p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.5; }

.siges-export-form {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(150px, 190px) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 14px;
}

.siges-export-context {
  min-height: 48px;
  padding: 8px 14px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid #c5d7ed;
  border-radius: 12px;
  background: white;
}

.siges-export-context span,
.siges-export-context small { color: var(--muted); font-size: 0.72rem; }
.siges-export-context strong { color: var(--ink); font-size: 0.91rem; }
.siges-export-panel .notice { margin-top: 16px; }
.siges-export-note { margin: 14px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }

.monthly-attendance {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid #c8d8ee;
  border-radius: 20px;
  background: #f8fbff;
}

.monthly-heading,
.daily-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.monthly-heading h4,
.daily-heading h4 {
  margin: 7px 0 4px;
  font-size: 1.35rem;
}

.monthly-help { margin: 0; color: var(--muted); font-size: 0.9rem; }
.monthly-table-wrap { margin-top: 20px; overflow-x: auto; }

.monthly-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: separate;
  border-spacing: 3px;
}

.monthly-table th,
.monthly-table td { padding: 0; text-align: center; }

.monthly-table th:first-child,
.monthly-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 220px;
  padding: 9px 12px;
  border-radius: 9px;
  background: #f8fbff;
  text-align: left;
}

.monthly-table th:first-child { z-index: 3; }
.monthly-student-name { display: block; color: var(--ink); font-size: 0.88rem; }
.monthly-student-nie { display: block; margin-top: 2px; color: var(--muted); font-size: 0.72rem; font-weight: 500; }

.monthly-day-button,
.monthly-status-button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid #d5deeb;
  border-radius: 9px;
  background: white;
  color: var(--muted);
  font-weight: 800;
}

.monthly-day-button { min-height: 48px; font-size: 0.72rem; line-height: 1.2; }
.monthly-day-button span { display: block; color: var(--ink); font-size: 0.9rem; }
.monthly-day-button:hover,
.monthly-status-button:hover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(31, 108, 255, 0.12); }
.monthly-status-button.is-present { color: #12663f; border-color: #a8d5c0; background: #eaf8f1; }
.monthly-status-button.is-absent { color: #9b2f27; border-color: #eab6b1; background: #fff0ef; }
.monthly-status-button.is-excused { color: #8a5a08; border-color: #ebcf91; background: #fff8e7; }
.monthly-status-button.is-unmarked { color: #536078; border-color: #cbd4e2; background: #edf2f8; }

.monthly-legend {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.monthly-legend .is-present { color: #12663f; }
.monthly-legend .is-absent { color: #9b2f27; }
.monthly-legend .is-excused { color: #8a5a08; }
.monthly-legend .is-unmarked { color: #536078; }
.daily-heading { margin-bottom: 18px; }

.attendance-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1080px;
}

.attendance-table th,
.attendance-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.attendance-table th {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.attendance-table select {
  width: 100%;
  min-width: 170px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #cad4e3;
  border-radius: 10px;
  color: var(--ink);
  background: white;
}

.attendance-table input { min-width: 240px; }

.quick-attendance {
  max-width: 760px;
  margin: 18px auto 0;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid #c8d8ee;
  border-radius: 24px;
  background: linear-gradient(145deg, #f8fbff, #eef5ff);
  text-align: center;
}

.quick-progress {
  margin: 0 0 14px;
  color: var(--primary-dark);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quick-attendance h4 { margin: 0 0 7px; font-size: clamp(1.7rem, 4vw, 2.5rem); }

.quick-status-buttons {
  margin: 30px 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.quick-status {
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 800;
}

.quick-status.is-present { color: #12663f; border-color: #a8d5c0; background: #eaf8f1; }
.quick-status.is-absent { color: #9b2f27; border-color: #eab6b1; background: #fff0ef; }
.quick-status.is-unmarked { color: #536078; border-color: #cbd4e2; background: white; }
.quick-status.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 108, 255, 0.18);
}

.quick-permission {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  text-align: left;
}

.quick-permission select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #cad4e3;
  border-radius: 12px;
  background: white;
}

.quick-navigation {
  margin: 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.quick-success span {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--success);
  font-size: 2rem;
}

footer {
  padding: 24px;
  color: var(--muted);
  text-align: center;
  font-size: 0.82rem;
}

[hidden] { display: none !important; }

@media (max-width: 820px) {
  .auth-layout, .onboarding-grid { grid-template-columns: 1fr; }
  .welcome-panel h1 { max-width: 660px; }
  .auth-layout { padding-top: 16px; }
  .attendance-setup, .attendance-toolbar { align-items: stretch; flex-direction: column; }
  .attendance-actions { align-items: stretch; flex-direction: column; }
  .siges-export-heading { flex-direction: column; }
  .siges-export-form { grid-template-columns: 1fr 1fr; }
  .siges-export-context { grid-column: 1 / -1; }
  .siges-export-form .button { grid-column: 1 / -1; }
  .monthly-heading, .daily-heading { align-items: flex-start; flex-direction: column; }
  .school-hub-heading, .module-heading { align-items: flex-start; flex-direction: column; }
  .classrooms-layout { grid-template-columns: 1fr; }
  .subjects-layout { grid-template-columns: 1fr; }
  .subjects-toolbar { align-items: stretch; flex-direction: column; }
  .gradebook-period-bar, .gradebook-activity-layout { grid-template-columns: 1fr; }
  .period-creation-form { grid-template-columns: 1fr 1fr; }
  .period-creation-form .button { grid-column: 1 / -1; }
  .gradebook-heading, .gradebook-period-heading { align-items: stretch; flex-direction: column; }
  .gradebook-period-actions { justify-content: flex-start; }
  .period-rename-form { grid-template-columns: 1fr; }
  .grade-matrix-heading, .grade-cell-editor-heading, .grade-group-editor-heading { align-items: stretch; flex-direction: column; }
  .grade-group-action-grid { grid-template-columns: 1fr; }
  .grade-state-legend { justify-content: flex-start; }
  .grade-cell-form { grid-template-columns: 1fr 1fr; }
  .grade-summary-stats { grid-template-columns: 1fr 1fr; }
  .final-summary-heading { align-items: flex-start; }
  .student-form { grid-template-columns: 1fr 1fr; }
  .student-name-field { grid-column: 1 / -1; }
  .classroom-detail-heading, .student-form-heading, .action-panel { align-items: flex-start; flex-direction: column; }
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .brand small { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .siges-export-form { grid-template-columns: 1fr; }
  .siges-export-context, .siges-export-form .button { grid-column: auto; }
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .auth-card, .form-card { padding: 22px; border-radius: 20px; }
  .quick-status-buttons, .quick-permission { grid-template-columns: 1fr; }
  .subjects-filters { display: grid; grid-template-columns: 1fr; }
  .subjects-filters label { min-width: 0; }
  .period-creation-form { grid-template-columns: 1fr; }
  .period-creation-form .button { grid-column: auto; }
  .gradebook-period-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .gradebook-period-actions .button { padding: 0 10px; }
  .activity-card { grid-template-columns: 30px minmax(0, 1fr); padding: 12px; }
  .activity-order { width: 30px; height: 30px; }
  .grade-cell-form { grid-template-columns: 1fr; }
  .grade-cell-comment-field, .grade-cell-form-actions { grid-column: auto; }
  .grade-summary-stats { grid-template-columns: 1fr; }
  .final-summary-heading { flex-direction: column; }
  .student-form { grid-template-columns: 1fr; }
  .student-name-field { grid-column: auto; }
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .module-card { padding: 8px 7px 10px; border-radius: 20px; }
  .module-card::before { width: 82px; height: 82px; top: -30px; right: -28px; }
  .module-artwork { width: min(100%, 92px); }
  .module-image { max-height: 96px; }
  .module-card h3 { min-height: 2.4em; margin-top: 2px; font-size: 0.78rem; line-height: 1.18; }
}

/* Gradebook V2 · fase 025C */
.grade-score-cell.is-marked,
.grade-period-average.is-marked {
  outline: 2px solid #d9a600;
  outline-offset: -3px;
  background: #fff9dc;
}
.grade-cell-mark {
  width: 100%;
  min-height: 30px;
  margin-top: 6px;
  border: 1px solid #e3c65c;
  border-radius: 9px;
  background: #fffdf2;
  color: #8a6900;
  font-size: 1rem;
  font-weight: 900;
}
.grade-cell-mark.is-active { background: #fff2ad; }
.grade-period-average,
.final-period-score,
.final-score {
  vertical-align: middle;
}
.grade-period-average > strong,
.final-period-score > strong,
.final-score > strong,
.final-score > small {
  display: block;
}
.final-score > small {
  margin-top: 5px;
  font-size: .72rem;
  font-weight: 650;
  opacity: .72;
}

/* -------------------------------------------------------------------------- */
/* 026H · Guiones Web (funcional/provisional; UI final queda para otra fase) */
/* -------------------------------------------------------------------------- */
.planning-web-workspace { display: grid; gap: 18px; }
.planning-web-heading,
.planning-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.planning-web-heading h2,
.planning-editor-heading h3 { margin: 6px 0; }
.planning-web-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.planning-units-panel,
.planning-plans-panel,
.planning-plan-editor {
  border: 1px solid var(--border, #d9dee8);
  border-radius: 16px;
  background: var(--surface, #fff);
  padding: 16px;
}
.planning-unit-filters { display: grid; gap: 8px; margin: 14px 0 18px; }
.planning-unit-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
.planning-unit-filter {
  width: 100%;
  min-width: 0;
  border: 1px solid #d5dbe7;
  border-left: 4px solid var(--planning-unit-accent, #d5dbe7);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: inherit;
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
}
.planning-unit-filter:hover,
.planning-unit-filter.is-active {
  border-top-color: #2f6fed;
  border-right-color: #2f6fed;
  border-bottom-color: #2f6fed;
  background: var(--surface-soft, #eef4ff);
}
.planning-unit-filter-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 800;
}
.planning-unit-filter-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-mini-action {
  border: 1px solid #d5dbe7;
  border-radius: 8px;
  background: var(--surface, #fff);
  color: inherit;
  padding: 6px 8px;
  cursor: pointer;
}
.planning-mini-action:disabled { opacity: .4; cursor: default; }
.planning-mini-action.is-danger { color: #a52a2a; }
.planning-unit-form { position: relative; }
.planning-unit-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 14px;
  min-height: 76px;
  transition: background-color .16s ease, color .16s ease;
}
.planning-unit-preview-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 900;
}
.planning-unit-preview-copy { min-width: 0; display: grid; gap: 4px; }
.planning-unit-preview-copy strong,
.planning-unit-preview-copy span { overflow: hidden; text-overflow: ellipsis; }
.planning-unit-preview-copy span { font-size: .82rem; opacity: .84; }
.planning-unit-style-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 10px;
  align-items: end;
}
.planning-unit-color-input {
  width: 100%;
  min-height: 42px;
  padding: 3px;
  cursor: pointer;
}
.planning-unit-palette {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 0 5px;
  scrollbar-width: thin;
}
.planning-unit-color-swatch {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.planning-unit-color-swatch.is-active {
  border-color: var(--text, #20242b);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.82);
}
.planning-overflow-menu {
  position: relative;
  flex: 0 0 auto;
}
.planning-overflow-trigger {
  list-style: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #d5dbe7;
  border-radius: 9px;
  background: var(--surface, #fff);
  color: inherit;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  user-select: none;
}
.planning-overflow-trigger::-webkit-details-marker { display: none; }
.planning-overflow-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--border, #d9dee8);
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 26px rgba(20, 30, 50, .16);
}
.planning-overflow-action {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.planning-overflow-action:hover { background: rgba(47,111,237,.08); }
.planning-overflow-action:disabled { opacity: .42; cursor: default; }
.planning-overflow-action.is-danger { color: #b3261e; }
.planning-plan-list { display: grid; gap: 10px; }
.planning-plan-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid #d9dee8;
  border-radius: 12px;
  padding: 13px;
}
.planning-plan-card.has-unit-color { border-left: 4px solid var(--planning-plan-unit-color, #d9dee8); }
.planning-plan-card h4 { margin: 0 0 5px; }
.planning-plan-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.planning-plan-updated { margin: 5px 0 0; font-size: .78rem; color: #6b7280; }
.planning-plan-form { margin-top: 14px; }
.planning-block-toolbar {
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: space-between;
  border-top: 1px solid #e1e5ec;
  padding-top: 14px;
}
.planning-block-toolbar label { flex: 1; }
.planning-block-list { display: grid; gap: 10px; }
.planning-block-card {
  border: 1px solid #d9dee8;
  border-radius: 12px;
  padding: 12px;
  background: #fafbfc;
}
.planning-block-card textarea { width: 100%; margin-top: 10px; resize: vertical; }
.planning-block-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.planning-block-actions { display: flex; gap: 5px; }
.planning-advanced-preview {
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f1f3f6;
  border-radius: 8px;
  padding: 10px;
  font-size: .78rem;
}
.planning-media-editor { display: grid; gap: 9px; margin-top: 10px; }
.planning-media-preview {
  display: block;
  width: min(100%, 360px);
  max-height: 240px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #d9dee8;
  background: #fff;
}
.planning-card-fields { display: grid; gap: 9px; margin-top: 10px; }
.planning-table-editor { display: grid; gap: 10px; margin-top: 10px; }
.planning-table-dimensions { display: flex; flex-wrap: wrap; gap: 10px; }
.planning-table-dimensions label { display: grid; gap: 4px; width: 130px; font-size: .82rem; }
.planning-table-dimensions input { width: 100%; }
.planning-table-scroll { overflow-x: auto; border: 1px solid #d9dee8; border-radius: 10px; background: #fff; }
.planning-table-scroll table { width: 100%; min-width: 440px; border-collapse: collapse; }
.planning-table-scroll th,
.planning-table-scroll td { min-width: 140px; padding: 7px; border-right: 1px solid #e1e5ec; border-bottom: 1px solid #e1e5ec; vertical-align: top; }
.planning-table-scroll th { background: #edf3fb; }
.planning-table-scroll tr:last-child td { border-bottom: 0; }
.planning-table-scroll th:last-child,
.planning-table-scroll td:last-child { border-right: 0; }
.planning-table-scroll input,
.planning-table-scroll textarea { width: 100%; min-width: 0; margin: 0; resize: vertical; }
@media (max-width: 900px) {
  .planning-web-layout { grid-template-columns: 1fr; }
  .planning-web-heading,
  .planning-editor-heading { flex-direction: column; }
}

/* -------------------------------------------------------------------------- */
/* 026I · Centro documental / Google Drive (funcional, sin rediseño final)    */
/* -------------------------------------------------------------------------- */
.documents-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.documents-sidebar { display: grid; gap: 14px; }
.documents-card,
.documents-main {
  border: 1px solid var(--border, #d9dee8);
  border-radius: 16px;
  background: var(--surface, #fff);
  padding: 16px;
}
.documents-card h2 { margin: 8px 0; }
.documents-account { font-weight: 700; margin: 8px 0; }
.documents-security-note { font-size: .78rem; color: #6b7280; line-height: 1.45; margin-bottom: 0; }
.documents-list { display: grid; gap: 10px; }
.document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #d9dee8;
  border-radius: 12px;
  padding: 13px;
}
.document-item-main { min-width: 0; }
.document-item-main strong { overflow-wrap: anywhere; }
.document-item-main p { margin: 5px 0; }
.document-item-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.document-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .74rem;
  font-weight: 750;
  background: #eef1f5;
}
.document-status.is-active { background: #e9f7ee; color: #176b35; }
.document-status.is-pending_upload { background: #fff4d9; color: #7a5700; }
.document-status.is-error,
.document-status.is-missing { background: #ffe8e8; color: #9a2626; }
.documents-upload-progress { display: grid; gap: 6px; }
.documents-upload-progress progress { width: 100%; }
.documents-upload-progress span { font-size: .8rem; color: #6b7280; }
.documents-audit-card { display: grid; gap: 10px; }
.documents-audit-card h2 { margin-bottom: 0; }
.documents-audit-ok { color: #176b35; font-weight: 700; margin: 0; }
.documents-audit-warning { color: #9a5a00; font-weight: 700; margin: 0; }
.documents-audit-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.documents-audit-stat { border: 1px solid #e1e5ec; border-radius: 10px; padding: 8px; display: grid; gap: 1px; }
.documents-audit-stat strong { font-size: 1.05rem; }
.documents-audit-stat span { color: #6b7280; font-size: .72rem; }
.documents-audit-issues { display: grid; gap: 7px; }
.documents-audit-issue { border-left: 3px solid #d7a321; padding: 5px 8px; display: grid; gap: 2px; background: #fffaf0; }
.documents-audit-issue.is-error { border-left-color: #c43b3b; background: #fff4f4; }
.documents-audit-issue strong { font-size: .78rem; }
.documents-audit-issue small { color: #6b7280; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .documents-layout { grid-template-columns: 1fr; }
  .document-item { align-items: flex-start; flex-direction: column; }
  .document-item-actions { justify-content: flex-start; }
}

/* 026J · documentos vinculados del guion */
.planning-linked-documents {
  margin-top: 18px;
}


/* -------------------------------------------------------------------------- */
/* 026M · Evaluaciones / Actas y constancias (backend-first, UI funcional)    */
/* -------------------------------------------------------------------------- */
.evaluations-home {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.evaluation-create-card,
.evaluation-processes-panel,
.evaluation-panel {
  border: 1px solid var(--border, #d9dee8);
  border-radius: 16px;
  background: var(--surface, #fff);
  padding: 16px;
}
.evaluation-create-card h2,
.evaluation-panel h3 { margin: 8px 0; }
.evaluation-process-list,
.evaluation-student-list,
.evaluation-catalog-list,
.evaluation-selected-list {
  display: grid;
  gap: 10px;
}
.evaluation-process-card,
.evaluation-catalog-item,
.evaluation-selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #d9dee8;
  border-radius: 12px;
  padding: 13px;
  background: #fff;
}
.evaluation-process-card-main { min-width: 0; }
.evaluation-process-card h3 { margin: 0 0 5px; }
.evaluation-process-card p,
.evaluation-catalog-item p,
.evaluation-selected-item p { margin: 5px 0; }
.evaluation-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.evaluation-chip,
.evaluation-count,
.evaluation-revision {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: .74rem;
  font-weight: 700;
  background: #eef1f5;
  color: #465164;
}
.evaluation-workspace { display: grid; gap: 18px; }
.evaluation-workspace-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.evaluation-workspace-heading h2 { margin: 6px 0; }
.evaluation-workspace-grid {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
  gap: 18px;
  align-items: start;
}
.compact-heading { margin-bottom: 10px; }
.evaluation-student-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #e1e5ec;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.evaluation-student-row:has(input:disabled) { cursor: default; opacity: .72; }
.evaluation-student-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.evaluation-curriculum-panel { display: grid; gap: 14px; }
.evaluation-curriculum-filters {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr .8fr 1fr;
  gap: 10px;
}
.evaluation-curriculum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.evaluation-curriculum-grid h4 { margin: 0 0 10px; }
.evaluation-catalog-list {
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}
.evaluation-catalog-item,
.evaluation-selected-item { align-items: flex-start; }
.evaluation-catalog-item > div,
.evaluation-selected-item > div { min-width: 0; }
.evaluation-manual-box {
  margin-top: 12px;
  border-top: 1px solid #e1e5ec;
  padding-top: 12px;
}
.evaluation-manual-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 1000px) {
  .evaluations-home,
  .evaluation-workspace-grid,
  .evaluation-curriculum-grid { grid-template-columns: 1fr; }
  .evaluation-curriculum-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .evaluation-curriculum-filters,
  .evaluation-manual-row { grid-template-columns: 1fr; }
  .evaluation-process-card,
  .evaluation-catalog-item,
  .evaluation-selected-item,
  .evaluation-workspace-heading { flex-direction: column; align-items: stretch; }
}

/* -------------------------------------------------------------------------- */
/* 026N · Evaluaciones: Refuerzo → Actividad → Instrumento                    */
/* -------------------------------------------------------------------------- */
.evaluation-inline-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: .78rem;
  font-weight: 650;
  color: #667085;
}
.evaluation-inline-toggle input { width: auto; }
.evaluation-workflow-panel { display: grid; gap: 14px; }
.evaluation-workflow-dates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.evaluation-activity-list,
.evaluation-criteria-list {
  display: grid;
  gap: 12px;
}
.evaluation-activity-card,
.evaluation-criterion-card {
  border: 1px solid #dfe4ec;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}
.evaluation-activity-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.evaluation-instrument-head {
  display: grid;
  grid-template-columns: minmax(160px, .7fr) minmax(220px, 1.3fr) auto;
  align-items: end;
  gap: 10px;
}
.evaluation-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}
.evaluation-check-label input { width: auto; }
.evaluation-scale-box {
  border: 1px solid #e1e5ec;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.evaluation-scale-grid,
.evaluation-descriptor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.evaluation-criteria-editor {
  border-top: 1px solid #e1e5ec;
  padding-top: 14px;
  display: grid;
  gap: 12px;
}
.evaluation-instrument-tools {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line, #d7dfeb);
  border-radius: 12px;
  background: var(--surface-soft, #f7f9fc);
}
.evaluation-instrument-tools p { margin: 4px 0 0; }
.evaluation-instrument-tools-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.evaluation-instrument-tools-status { min-height: 1.25em; }
.evaluation-criteria-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.evaluation-new-criterion {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  flex: 1;
  max-width: 620px;
}
.evaluation-criterion-card { display: grid; gap: 10px; }
.evaluation-criterion-card textarea { width: 100%; }

@media (max-width: 900px) {
  .evaluation-workflow-dates,
  .evaluation-scale-grid,
  .evaluation-descriptor-grid { grid-template-columns: 1fr 1fr; }
  .evaluation-instrument-head { grid-template-columns: 1fr 1fr; }
  .evaluation-check-label { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .evaluation-workflow-dates,
  .evaluation-scale-grid,
  .evaluation-descriptor-grid,
  .evaluation-instrument-head,
  .evaluation-new-criterion { grid-template-columns: 1fr; }
}

/* 026O · Documentos de Evaluaciones */
.evaluation-drive-status {
  padding: 10px 12px;
  border: 1px solid var(--line, #d7dfeb);
  border-radius: 12px;
  background: var(--surface-soft, #f7f9fc);
}
.evaluation-document-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line, #d7dfeb);
  border-bottom: 1px solid var(--line, #d7dfeb);
}
.evaluation-document-actions p { margin: 4px 0 0; }
.evaluation-generated-documents { display: grid; gap: 10px; }
.evaluation-generated-document {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #d7dfeb);
  border-radius: 12px;
  background: #fff;
}
.evaluation-generated-document > div { min-width: 0; }
.evaluation-generated-document strong,
.evaluation-generated-document p { overflow-wrap: anywhere; }
.evaluation-generated-document p { margin: 4px 0 0; }
@media (max-width: 760px) {
  .evaluation-document-actions { grid-template-columns: 1fr; }
  .evaluation-generated-document { align-items: stretch; flex-direction: column; }
}


/* 026P.2 · Guardado individual de constancias */
.evaluation-individual-save-block {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line, #d7dfeb);
  border-radius: 12px;
  background: var(--surface-soft, #f7f9fc);
}
.evaluation-individual-save-block p { margin: 4px 0 0; }
.evaluation-individual-document-list { display: grid; gap: 8px; }
.evaluation-individual-document-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line, #d7dfeb);
  border-radius: 10px;
  background: #fff;
}
.evaluation-individual-document-row > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
@media (max-width: 760px) {
  .evaluation-individual-document-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* 026Q · Cierre de Evaluaciones */
.evaluation-closure-list {
  display: grid;
  gap: 12px;
}

.evaluation-closure-row {
  border: 1px solid var(--border-color, #d7dce2);
  border-radius: 12px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.evaluation-closure-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.evaluation-closure-head > div {
  display: grid;
  gap: 3px;
}

.evaluation-closure-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.evaluation-closure-fields label {
  display: grid;
  gap: 5px;
}

.evaluation-result-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .78rem;
  white-space: nowrap;
}

.evaluation-result-chip.is-applied {
  font-weight: 700;
}

.evaluation-closure-result {
  margin: 0;
}

.evaluation-closure-actions,
.evaluation-closure-row-actions {
  margin-top: 4px;
}

.evaluation-optional-documents {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #d7dce2);
  display: grid;
  gap: 10px;
}

@media (max-width: 720px) {
  .evaluation-closure-head {
    flex-direction: column;
  }

  .evaluation-closure-fields {
    grid-template-columns: 1fr;
  }
}

/* 026U · School lifecycle */
.button-row { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
#schoolSettingsDialog { width: min(760px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; border: 1px solid var(--border, #d9d9df); border-radius: 22px; }
#schoolSettingsDialog::backdrop { background: rgba(20, 24, 32, .42); }
.check-row { display: flex; align-items: center; gap: .55rem; }

/* 026V · Agenda compartida */
.agenda-companion {
  position: fixed;
  z-index: 25;
  top: 88px;
  right: 18px;
  width: 300px;
  max-height: calc(100vh - 112px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--border-color, #d7dce2);
  border-radius: 20px;
  background: var(--surface, #fff);
  box-shadow: 0 12px 34px rgba(30, 38, 52, .08);
}
.agenda-companion-head,
.agenda-month-head,
.agenda-preview-head,
.agenda-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.agenda-companion-head > div { display: grid; text-align: center; }
.agenda-icon-button { min-width: 38px; padding-inline: 10px; font-size: 1.35rem; }
.agenda-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.agenda-weekday {
  text-align: center;
  font-size: .74rem;
  font-weight: 750;
  color: var(--muted, #697386);
  padding: 5px 0;
}
.agenda-day {
  border: 1px solid transparent;
  border-radius: 12px;
  min-height: 42px;
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  cursor: pointer;
}
.agenda-day:hover { background: var(--surface-soft, #f6f7fa); }
.agenda-day i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #445fdc); }
.agenda-day.is-selected { background: var(--accent-soft, #e9edff); border-color: var(--accent, #445fdc); font-weight: 750; }
.agenda-day.is-today span { text-decoration: underline; text-underline-offset: 3px; }
.agenda-day.is-empty { min-height: 42px; }
.agenda-calendar.is-compact { gap: 2px; margin-top: 8px; }
.agenda-calendar.is-compact .agenda-day { min-height: 34px; border-radius: 10px; }
.agenda-companion-preview {
  margin-top: 10px;
  padding: 11px;
  border-radius: 14px;
  background: var(--surface-soft, #f6f7fa);
  display: grid;
  gap: 8px;
}
.agenda-preview-head { font-size: .76rem; color: var(--muted, #697386); }
.agenda-preview-event { min-height: 54px; display: grid; gap: 5px; align-content: center; }
.agenda-preview-actions .button-primary { margin-left: auto; }
.agenda-workspace { display: grid; grid-template-columns: minmax(430px, .9fr) minmax(420px, 1.1fr); gap: 22px; align-items: start; }
.agenda-main-calendar-card {
  border: 1px solid var(--border-color, #d7dce2);
  border-radius: 20px;
  padding: 18px;
  background: var(--surface, #fff);
  position: sticky;
  top: 20px;
}
.agenda-month-head { margin-bottom: 12px; }
.agenda-month-head h2 { margin: 0; }
.agenda-calendar-large .agenda-day { min-height: 64px; font-size: 1rem; }
.agenda-event-list { display: grid; gap: 10px; }
.agenda-event-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border-color, #d7dce2);
  border-radius: 16px;
  padding: 12px;
  background: var(--surface, #fff);
}
.agenda-date-badge {
  width: 54px; min-height: 54px; border-radius: 14px;
  display: grid; place-items: center; align-content: center;
  background: var(--surface-soft, #f6f7fa);
}
.agenda-date-badge strong { font-size: 1.2rem; }
.agenda-date-badge span { font-size: .72rem; text-transform: uppercase; color: var(--muted, #697386); }
.agenda-event-copy { min-width: 0; }
.agenda-event-copy h3 { margin: 3px 0; font-size: 1rem; }
.agenda-event-copy p { margin: 3px 0 0; color: var(--muted, #697386); }
.agenda-source { display: inline-flex; width: fit-content; border-radius: 999px; padding: 2px 7px; font-size: .7rem; font-weight: 700; }
.agenda-source.is-fixed { background: #fff2c6; color: #745800; }
.agenda-source.is-manual { background: #e4edff; color: #20458e; }
.agenda-row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.agenda-dialog { width: min(620px, calc(100vw - 28px)); border: 1px solid var(--border-color, #d7dce2); border-radius: 20px; }
.agenda-dialog::backdrop { background: rgba(20, 24, 32, .42); }

/* Reserva lateral sólo cuando el compañero está visible. */
body:has(#agendaCompanion:not([hidden])) #appView { padding-right: 330px; }

@media (max-width: 1180px) {
  body:has(#agendaCompanion:not([hidden])) #appView { padding-right: 0; }
  .agenda-companion {
    position: relative;
    inset: auto;
    width: auto;
    max-height: none;
    margin: 0 0 16px;
    box-shadow: none;
  }
  .agenda-workspace { grid-template-columns: 1fr; }
  .agenda-main-calendar-card { position: static; }
}
@media (max-width: 720px) {
  .agenda-calendar-large .agenda-day { min-height: 46px; }
  .agenda-event-row { grid-template-columns: 52px minmax(0,1fr); }
  .agenda-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}


/* 026W · menciones web normalizadas */
.mention-text { color: var(--accent, #445fdc); font-weight: 800; }
.mention-field { min-width: 0; width: 100%; }
.mention-field > :is(input, textarea) { width: 100%; box-sizing: border-box; }
.mention-field-hint { display: block; margin-top: .4rem; color: var(--muted, #68728a); font-size: .72rem; font-weight: 400; line-height: 1.5; }
.mention-field-preview { margin-top: .6rem; padding: .65rem .8rem; border-radius: .65rem; background: color-mix(in srgb, var(--primary, #3268c8) 6%, transparent); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; font-weight: 400; max-height: 9rem; overflow: auto; }
.mention-field-preview::before { content: 'Vista previa'; display: block; margin-bottom: .25rem; color: var(--muted, #68728a); font-size: .68rem; }
.mention-picker { position: fixed; z-index: 10000; box-sizing: border-box; padding: .4rem; border: 1px solid var(--border, #dce2ec); border-radius: .85rem; background: var(--surface, #fff); color: var(--text, #202b40); box-shadow: 0 12px 36px #14223b29; max-height: min(260px, 60vh); overflow-y: auto; }
.mention-picker[hidden], .mention-field-preview[hidden] { display: none !important; }
.mention-picker-heading { padding: .35rem .5rem; color: var(--muted, #68728a); font-size: .72rem; font-weight: 600; }
.mention-picker > button { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem; border: 0; border-radius: .6rem; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.mention-picker > button:hover, .mention-picker > button[aria-selected="true"] { background: color-mix(in srgb, var(--primary, #3268c8) 12%, transparent); }
.mention-picker-avatar { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; border-radius: 50%; color: var(--primary, #3268c8); background: color-mix(in srgb, var(--primary, #3268c8) 14%, transparent); font-weight: 700; }
.mention-picker strong, .mention-picker small { display: block; overflow-wrap: anywhere; }
.mention-picker strong { font-size: .82rem; }
.mention-picker small { margin-top: .15rem; color: var(--muted, #68728a); font-size: .7rem; }

/* 026W · el calendario acompañante existe sólo en escritorio. */
@media (max-width: 1180px) {
  #agendaCompanion { display: none !important; }
  body:has(#agendaCompanion:not([hidden])) #appView { padding-right: 0 !important; }
}

/* 026W · Lunes Cívicos funcional; la UI final se hará en la fase visual. */
.civic-workspace { display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); gap:18px; align-items:start; }
.civic-history-panel { position:sticky; top:20px; border:1px solid var(--border-color,#d7dce2); background:var(--surface,#fff); border-radius:20px; padding:14px; }
.civic-history-list { display:grid; gap:8px; max-height:calc(100vh - 220px); overflow:auto; }
.civic-history-card { width:100%; text-align:left; border:1px solid var(--border-color,#d7dce2); background:var(--surface,#fff); border-radius:14px; padding:11px; display:grid; gap:3px; color:inherit; cursor:pointer; }
.civic-history-card.is-active { border-color:var(--accent,#445fdc); background:var(--accent-soft,#eef1ff); }
.civic-history-card span,.civic-history-card small { color:var(--muted,#697386); }
.civic-editor { display:grid; gap:16px; }
.civic-form-card { padding:18px; }
.civic-role-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.civic-flag-field { grid-column:1/-1; border:1px solid var(--border-color,#d7dce2); border-radius:14px; padding:10px 12px; }
.civic-flag-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; margin-top:8px; }
.civic-program-grid { display:grid; gap:10px; }
.civic-program-card,.civic-speech-card { border:1px solid var(--border-color,#d7dce2); border-radius:16px; padding:14px; background:var(--surface,#fff); }
.civic-program-card { position:relative; padding-left:58px; }
.civic-number { position:absolute; left:14px; top:14px; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:#f7cb46; font-weight:800; }
.civic-editable { border:1px dashed var(--border-color,#c8ced8); border-radius:10px; min-height:38px; padding:8px; margin-top:4px; white-space:pre-wrap; }
.civic-quote { background:#fbd9f3; font-style:italic; }
.civic-long { min-height:100px; line-height:1.55; }
.civic-speech-card { margin-top:12px; }
.civic-presentation-dialog { width:min(1180px,96vw); height:min(760px,92vh); border:0; border-radius:22px; padding:18px; background:#111827; color:#fff; }
.civic-presentation-dialog::backdrop { background:rgba(0,0,0,.72); }
.civic-presentation-close { float:right; }
.civic-presentation-slide { clear:both; min-height:calc(100% - 90px); display:grid; place-content:center; text-align:center; padding:40px 7vw; }
.civic-presentation-slide h2 { font-size:clamp(2rem,4vw,4rem); margin:0 0 24px; }
.civic-presentation-slide div { white-space:pre-wrap; font-size:clamp(1.1rem,2.1vw,2rem); line-height:1.5; }
.civic-presentation-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; }
@media (max-width:900px){ .civic-workspace{grid-template-columns:1fr}.civic-history-panel{position:static}.civic-role-grid,.civic-flag-grid{grid-template-columns:1fr} }

/* Firebase AI Logic · generación Web compartida con Android */
.planning-ai-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #445fdc) 32%, var(--border-color, #d7dce2));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-soft, #eef1ff) 58%, var(--surface, #fff));
}
.planning-ai-heading,
.planning-ai-actions {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}
.planning-ai-heading h4 { margin: 4px 0 0; }
.planning-ai-heading > label { min-width: 190px; }
.planning-ai-actions .muted { margin: 0; max-width: 62ch; }
@media (max-width:720px) {
  .planning-ai-heading,
  .planning-ai-actions { align-items: stretch; flex-direction: column; }
  .planning-ai-heading > label { min-width: 0; }
}

/* 026W · El calendario acompañante pertenece sólo a Web escritorio y a vistas principales. */
@media (max-width: 1180px) {
  #agendaCompanion { display: none !important; }
}
@media (min-width: 1181px) {
  body:has(#classroomDetail:not([hidden])) #agendaCompanion,
  body:has(#gradebookView:not([hidden])) #agendaCompanion,
  body:has(#planningView:not([hidden])) #agendaCompanion,
  body:has(#evaluationProcessWorkspace:not([hidden])) #agendaCompanion,
  body:has(#autoCoevalDetailPanel:not([hidden])) #agendaCompanion,
  body:has(#quickAttendanceView:not([hidden])) #agendaCompanion {
    display: none !important;
  }
}

/* 026X · Autoevaluación/Coevaluación · panel docente */
.auto-coeval-heading { align-items: flex-start; }
.auto-coeval-panel { margin-top: 18px; }
.auto-coeval-aula-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.auto-coeval-aula-card,.auto-coeval-campaign-card { width:100%; border:1px solid var(--line); background:var(--surface); color:inherit; border-radius:18px; padding:16px; text-align:left; box-shadow:0 8px 24px rgba(35,60,105,.06); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.auto-coeval-aula-card:hover,.auto-coeval-campaign-card:hover { transform:translateY(-2px); border-color:#aac7ec; box-shadow:0 12px 30px rgba(35,60,105,.10); }
.auto-coeval-aula-card { display:grid; grid-template-columns:46px minmax(0,1fr); gap:4px 12px; align-items:center; }
.auto-coeval-aula-icon { grid-row:1/3; width:46px; height:46px; display:grid; place-items:center; border-radius:14px; font-weight:900; color:#0d47a1; background:#e8f2ff; }
.auto-coeval-aula-copy { display:grid; gap:2px; min-width:0; }
.auto-coeval-aula-copy strong { font-size:1.03rem; }
.auto-coeval-aula-copy small,.auto-coeval-aula-stats,.auto-coeval-campaign-card small { color:var(--muted); }
.auto-coeval-aula-stats { grid-column:2; font-size:.84rem; }
.auto-coeval-subheading { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; margin-bottom:14px; }
.auto-coeval-subheading h2 { margin:2px 0 4px; }
.auto-coeval-campaign-list { display:grid; gap:10px; }
.auto-coeval-campaign-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; }
.auto-coeval-campaign-main { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:5px 10px; align-items:center; }
.auto-coeval-campaign-main small { grid-column:2; }
.auto-coeval-campaign-progress { display:grid; grid-template-columns:auto auto; gap:2px 7px; text-align:right; align-items:baseline; }
.auto-coeval-campaign-progress small { font-size:.72rem; }
.status-chip { display:inline-flex; width:max-content; align-items:center; border-radius:999px; padding:5px 9px; background:#edf1f7; color:#4a5568; font-size:.74rem; font-weight:800; }
.status-chip.is-open { background:#dff6e9; color:#12623c; }
.status-chip.is-closed { background:#e4edff; color:#234f9e; }
.status-chip.is-draft { background:#fff2c6; color:#775700; }
.status-chip.is-archived { background:#ececec; color:#666; }
.auto-coeval-detail-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr); gap:14px; }
.auto-coeval-link-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.auto-coeval-link-row input { min-width:0; }
.auto-coeval-status-actions { margin-top:12px; }
.auto-coeval-progress-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.auto-coeval-progress-grid > div { padding:16px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); display:grid; gap:3px; }
.auto-coeval-progress-grid strong { font-size:1.45rem; }
.auto-coeval-progress-grid span { color:var(--muted); font-size:.84rem; }
.auto-coeval-gradebook-card { margin-top:14px; }
.auto-coeval-weight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,220px)); gap:12px; }
.auto-coeval-weight-grid label { display:grid; gap:6px; font-weight:700; }
.percent-input { display:grid; grid-template-columns:minmax(0,1fr) 38px; align-items:center; }
.percent-input input { border-radius:12px 0 0 12px; }
.percent-input span { height:100%; display:grid; place-items:center; border:1px solid var(--line); border-left:0; border-radius:0 12px 12px 0; background:var(--surface-soft); }
.auto-coeval-tables-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.auto-coeval-table td strong,.auto-coeval-table td small { display:block; }
.auto-coeval-table td small { color:var(--muted); margin-top:2px; }
.mini-state { display:inline-flex; margin-left:4px; color:var(--muted); font-size:.75rem; font-weight:700; }
.mini-state.is-ok { color:var(--success); }
.button-small { padding:6px 9px; min-height:auto; font-size:.78rem; }
.button-danger-quiet { color:var(--danger); background:#fff7f6; border:1px solid #f0c5c1; }
.auto-coeval-dialog { width:min(650px,calc(100vw - 28px)); border:1px solid var(--line); border-radius:22px; padding:20px; }
.auto-coeval-dialog::backdrop { background:rgba(20,24,32,.45); }
.auto-coeval-apply-dialog { width:min(820px,calc(100vw - 28px)); }
.auto-coeval-target-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.auto-coeval-target-box { display:grid; gap:10px; padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface-soft); }
.auto-coeval-target-box > label { display:grid; gap:6px; font-weight:700; }
.auto-coeval-target-box .auto-coeval-activity-choice { display:block; padding-bottom:4px; border-bottom:1px solid var(--line); }
.auto-coeval-target-box select { width:100%; }
.auto-coeval-apply-dialog .field-help.is-error { color:var(--danger,#b42318); font-weight:700; }
@media (max-width:900px){
  .auto-coeval-detail-grid,.auto-coeval-tables-grid { grid-template-columns:1fr; }
  .auto-coeval-subheading { grid-template-columns:1fr; }
  .auto-coeval-subheading > .button { width:max-content; }
}
@media (max-width:620px){
  .auto-coeval-link-row,.auto-coeval-campaign-card { grid-template-columns:1fr; }
  .auto-coeval-campaign-progress { justify-content:start; text-align:left; }
  .auto-coeval-weight-grid,.auto-coeval-target-grid { grid-template-columns:1fr; }
}

.auto-coeval-activity-choice > span { display:flex; align-items:center; gap:8px; }
.auto-coeval-activity-choice > span input { width:auto; margin:0; }

/* 026Y · Horarios compartidos */
.schedules-module-heading { align-items: end; }
.schedule-year-control { min-width: 180px; margin: 0; }
.schedule-year-control select { margin-top: .35rem; }
.schedule-tabs {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding: .35rem 0 1rem;
  scrollbar-width: thin;
}
.schedule-tab {
  flex: 0 0 auto;
  border: 1px solid var(--line, #d8dde6);
  background: var(--panel, #fff);
  color: inherit;
  border-radius: 999px;
  padding: .62rem .95rem;
  font: inherit;
  cursor: pointer;
}
.schedule-tab.is-active {
  background: var(--primary-soft, #e7f0ff);
  border-color: var(--primary, #3268c8);
  font-weight: 700;
}
.schedule-workspace { display: grid; gap: 1.4rem; }
.schedule-board-card {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--line, #d8dde6);
  border-radius: 18px;
  background: var(--panel, #fff);
}
.schedule-table-toolbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.schedule-table-toolbar h2 { margin: 0; font-size: 1.05rem; }
.schedule-table-toolbar p { margin: .18rem 0 0; }
.schedule-danger-button { color: var(--danger, #b3261e); }
.schedule-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line, #d8dde6);
  border-radius: 14px;
  background: var(--panel, #fff);
}
.schedule-table {
  width: 100%;
  min-width: 680px;
  table-layout: fixed;
  border-collapse: collapse;
}
.schedule-table th {
  padding: .7rem .45rem;
  background: color-mix(in srgb, var(--primary, #3268c8) 10%, transparent);
  border-bottom: 1px solid var(--line, #d8dde6);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.schedule-table td {
  padding: 0;
  border-right: 1px solid var(--line, #d8dde6);
  border-bottom: 1px solid var(--line, #d8dde6);
  height: 74px;
}
.schedule-table td:last-child, .schedule-table th:last-child { border-right: 0; }
.schedule-table tbody tr:last-child td { border-bottom: 0; }
.schedule-cell-button {
  width: 100%;
  min-height: 74px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: .5rem;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: .2rem;
  text-align: center;
}
.schedule-cell-button:hover { background-color: color-mix(in srgb, var(--primary, #3268c8) 7%, transparent); }
.schedule-cell-button strong { line-height: 1.15; }
.schedule-cell-button small { color: var(--muted, #667085); line-height: 1.15; }
.schedule-cell-empty { font-size: 1.35rem; color: var(--muted, #667085); opacity: .45; }
.schedule-break-row td {
  height: 52px;
  text-align: center;
  background: color-mix(in srgb, #e9b949 20%, var(--panel, #fff));
  color: inherit;
}
.schedule-break-row td strong { letter-spacing: .08em; }
.schedule-break-row td span { margin-left: .55rem; color: var(--muted, #667085); font-size: .8rem; }
.schedule-dialog { width: min(520px, calc(100vw - 2rem)); }

@media (max-width: 760px) {
  .schedule-table-toolbar { align-items: flex-start; }
  .schedule-table-toolbar .button-row { width: 100%; }
  .schedule-year-control { min-width: 150px; }
}

/* 026Z · Diario de campo */
.field-journal-module-heading { align-items: end; }
.field-journal-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.field-journal-card { border:1px solid var(--line,#d8dde6); border-radius:18px; background:var(--panel,#fff); overflow:hidden; }
.field-journal-card-open { width:100%; min-height:180px; border:0; background:transparent; color:inherit; text-align:left; padding:1rem; cursor:pointer; display:grid; align-content:start; gap:.65rem; }
.field-journal-card-open:hover { background:color-mix(in srgb,var(--primary,#3268c8) 6%,transparent); }
.field-journal-card h3 { margin:0; font-size:1.05rem; }
.field-journal-card p { margin:0; color:var(--muted,#667085); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; line-height:1.45; }
.field-journal-card-meta { display:flex; gap:.45rem; flex-wrap:wrap; font-size:.76rem; color:var(--muted,#667085); }
.field-journal-card-meta span,.field-journal-card-meta time { border-radius:999px; background:color-mix(in srgb,var(--primary,#3268c8) 8%,transparent); padding:.25rem .5rem; }
.field-journal-editor-panel { display:grid; gap:1rem; }
.field-journal-editor-head { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; }
.field-journal-editor-head h2 { margin:.1rem 0 0; }
.field-journal-meta-grid { display:grid; grid-template-columns:minmax(160px,.55fr) minmax(280px,1.8fr) minmax(150px,.55fr); gap:.8rem; }
.field-journal-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:.38rem; padding:.55rem; border:1px solid var(--line,#d8dde6); border-radius:14px; background:var(--panel,#fff); position:sticky; top:.5rem; z-index:5; }
.editor-tool { min-height:36px; border:1px solid var(--line,#d8dde6); border-radius:9px; background:transparent; color:inherit; padding:.35rem .55rem; cursor:pointer; font:inherit; }
.editor-tool:hover { background:color-mix(in srgb,var(--primary,#3268c8) 8%,transparent); }
.editor-tool-separator { width:1px; height:28px; background:var(--line,#d8dde6); margin:0 .15rem; }
.editor-tool-select { min-height:36px; width:auto; max-width:240px; margin:0; padding:.35rem .55rem; }
.editor-color-control { display:flex; align-items:center; gap:.35rem; min-height:36px; border:1px solid var(--line,#d8dde6); border-radius:9px; padding:.2rem .45rem; margin:0; font-size:.8rem; }
.editor-color-control input { width:30px; height:26px; border:0; padding:0; margin:0; background:transparent; }
.field-journal-mention-select { max-width:300px; }
.field-journal-body { min-height:460px; padding:1.4rem; border:1px solid var(--line,#d8dde6); border-radius:18px; background:var(--surface,var(--panel,#fff)); outline:none; line-height:1.55; column-rule:1px solid color-mix(in srgb,var(--line,#d8dde6) 65%,transparent); }
.field-journal-body:focus { border-color:var(--primary,#3268c8); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#3268c8) 12%,transparent); }
.field-journal-body:empty::before { content:attr(data-placeholder); color:var(--muted,#667085); pointer-events:none; }
.field-journal-body hr { border:0; border-top:1px solid var(--line,#d8dde6); margin:1.1rem 0; }
.student-mention { display:inline-block; padding:.08rem .35rem; border-radius:999px; background:color-mix(in srgb,var(--primary,#3268c8) 14%,transparent); color:var(--primary,#3268c8); font-weight:700; white-space:nowrap; }
@media (max-width:820px) {
  .field-journal-meta-grid { grid-template-columns:1fr; }
  .field-journal-editor-head { grid-template-columns:1fr; }
  .field-journal-toolbar { position:static; }
  .field-journal-body { column-count:1 !important; min-height:360px; }
}

/* 026Z.1 · color dinámico + sugerencias @ del Diario de campo */
.field-journal-body { color: var(--ink, CanvasText); }
.field-journal-mention-hint {
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:.35rem .62rem;
  border-radius:999px;
  background:color-mix(in srgb,var(--primary,#3268c8) 9%,transparent);
  color:var(--primary,#3268c8);
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}
.field-journal-mention-suggestions {
  position:fixed;
  z-index:1200;
  width:min(300px,calc(100vw - 16px));
  max-height:230px;
  overflow:auto;
  border:1px solid var(--line,#d8dde6);
  border-radius:14px;
  background:var(--surface,#fff);
  color:var(--ink,#17203a);
  box-shadow:0 18px 46px rgba(23,32,58,.18);
  padding:.35rem;
}
.field-journal-mention-suggestions[hidden] { display:none !important; }
.field-journal-mention-header {
  padding:.35rem .55rem .25rem;
  color:var(--muted,#68728a);
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.field-journal-mention-option {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:.65rem;
  width:100%;
  border:0;
  border-radius:10px;
  background:transparent;
  color:inherit;
  padding:.48rem .55rem;
  text-align:left;
}
.field-journal-mention-option:hover,
.field-journal-mention-option:focus-visible {
  background:color-mix(in srgb,var(--primary,#3268c8) 9%,transparent);
  outline:none;
}
.field-journal-mention-option strong,
.field-journal-mention-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field-journal-mention-option strong { font-size:.86rem; }
.field-journal-mention-option small { margin-top:.08rem; color:var(--muted,#68728a); font-size:.7rem; }
.field-journal-mention-avatar {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--primary,#3268c8) 15%,transparent);
  color:var(--primary,#3268c8);
  font-size:.76rem;
  font-weight:900;
}

/* 026Z8H.2C.1 — contenido enriquecido seguro de actividades */
.evaluation-rich-block { display: grid; gap: 7px; }
.evaluation-rich-label { font-size: .83rem; font-weight: 700; color: #344054; }
.evaluation-rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.evaluation-format-button {
  min-width: 34px; min-height: 32px; padding: 5px 9px;
  border: 1px solid #cfd7e3; border-radius: 8px; background: #fff;
  color: #17324d; font: inherit; cursor: pointer;
}
.evaluation-format-button:hover:not(:disabled) { background: #f1f5f9; border-color: #9dafc2; }
.evaluation-format-button:disabled { opacity: .55; cursor: not-allowed; }
.evaluation-format-wide { min-width: auto; font-size: .82rem; font-weight: 700; }
.evaluation-rich-editor {
  min-height: 116px; max-height: 320px; overflow: auto; padding: 10px 12px;
  border: 1px solid #cfd7e3; border-radius: 9px; background: #fff;
  color: #101828; line-height: 1.45; white-space: pre-wrap; outline: none;
}
.evaluation-rich-editor:focus { border-color: #526d88; box-shadow: 0 0 0 3px rgba(50, 77, 104, .10); }
.evaluation-rich-editor:empty::before { content: attr(data-placeholder); color: #98a2b3; pointer-events: none; }
.evaluation-content-panel {
  display: grid; gap: 10px; padding: 12px; border: 1px solid #dfe4ec;
  border-radius: 10px; background: #f8fafc;
}
.evaluation-content-panel[hidden] { display: none; }
.evaluation-content-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.evaluation-table-controls { display: grid; grid-template-columns: 90px 90px auto; gap: 8px; align-items: end; }
.evaluation-table-controls input { width: 100%; }
.evaluation-table-editor { overflow-x: auto; }
.evaluation-table-editor table { width: 100%; border-collapse: collapse; background: #fff; }
.evaluation-table-editor td { min-width: 135px; border: 1px solid #cfd7e3; padding: 0; }
.evaluation-table-editor textarea { width: 100%; min-height: 58px; resize: vertical; border: 0; border-radius: 0; padding: 7px; background: transparent; }
.evaluation-image-editor { display: grid; grid-template-columns: minmax(130px, 220px) 1fr; gap: 14px; align-items: start; }
.evaluation-image-editor > img { width: 100%; max-height: 180px; object-fit: contain; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; }
@media (max-width: 700px) {
  .evaluation-table-controls, .evaluation-image-editor { grid-template-columns: 1fr; }
}

/* 026Z8H.2C.2 · firma documental privada */
.document-signature-settings { display: grid; gap: .55rem; }
.document-signature-preview-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.document-signature-preview { width: 150px; height: 58px; object-fit: contain; border: 1px solid var(--border, #d7dde5); border-radius: 10px; background: #fff; padding: 4px; }
.document-signature-preview-row > div { flex: 1 1 220px; }
.evaluation-instrument-tools-status.is-success {
  color: var(--success, #207a46);
}

.evaluation-instrument-tools-status.is-error {
  color: var(--danger, #a52a2a);
}

@media (max-width: 720px) {
  .planning-unit-style-grid { grid-template-columns: 1fr; }
  .planning-overflow-panel { min-width: 156px; }
}

/* ========================================================================== */
/* 026Z8J · Web UI/UX clay shell · fase 1                                    */
/* Base visual compartida con Android + rail contextual izquierdo.            */
/* ========================================================================== */
:root {
  --clay-bg: #eef3f8;
  --clay-surface: #f8fafc;
  --clay-surface-strong: #ffffff;
  --clay-primary: #1976d2;
  --clay-primary-deep: #0f4f91;
  --clay-primary-soft: #e3f0fd;
  --clay-secondary-soft: #e8f6f4;
  --clay-radius-card: 24px;
  --clay-radius-control: 15px;
  --clay-shadow-light: rgba(255, 255, 255, .92);
  --clay-shadow-dark: rgba(78, 98, 126, .18);
  --clay-card-shadow:
    -7px -7px 16px var(--clay-shadow-light),
    8px 9px 18px var(--clay-shadow-dark),
    inset 1px 1px 1px rgba(255,255,255,.82),
    inset -2px -2px 5px rgba(70,91,120,.045);
  --clay-card-shadow-soft:
    -4px -4px 10px rgba(255,255,255,.84),
    5px 6px 12px rgba(78,98,126,.12);
  --surface: var(--clay-surface-strong);
  --surface-soft: var(--clay-bg);
  --primary: var(--clay-primary);
  --primary-dark: var(--clay-primary-deep);
  --line: #dce4ed;
  --shadow: var(--clay-card-shadow);
}

body {
  background:
    radial-gradient(circle at 0 0, rgba(130,196,252,.20), transparent 31rem),
    radial-gradient(circle at 100% 100%, rgba(144,202,249,.14), transparent 28rem),
    var(--clay-bg);
}

.topbar {
  position: sticky;
  z-index: 60;
  top: 0;
  min-height: 68px;
  padding: 10px clamp(18px, 3vw, 42px);
  border-bottom: 1px solid rgba(205,216,229,.78);
  background: rgba(238,243,248,.88);
  box-shadow: 0 8px 22px rgba(67,86,112,.07);
  backdrop-filter: blur(18px) saturate(1.08);
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: linear-gradient(145deg, #2f8de3, #145a9b);
  box-shadow:
    -3px -3px 8px rgba(255,255,255,.72),
    5px 6px 12px rgba(50,75,105,.25),
    inset 2px 2px 3px rgba(255,255,255,.25),
    inset -3px -3px 6px rgba(4,47,88,.18);
}

.page-shell {
  width: min(1480px, calc(100% - 32px));
  padding: clamp(24px, 4vw, 46px) 0 58px;
}

.button {
  min-height: 44px;
  border-radius: var(--clay-radius-control);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.button-primary {
  border-color: transparent;
  background: var(--clay-primary);
  box-shadow: 0 7px 14px rgba(25,118,210,.20);
}

.button-primary:hover { filter: none; transform: translateY(-1px); }
.button-primary:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(25,118,210,.18); }

.button-secondary,
.button-quiet {
  border-color: rgba(188,204,222,.78);
  background: linear-gradient(145deg, #fbfcfe, #edf2f7);
  box-shadow: var(--clay-card-shadow-soft);
}

.button-quiet:hover,
.button-secondary:hover { transform: translateY(-1px); }

.web-back-button {
  min-height: 40px;
  margin-bottom: 18px;
  padding-inline: 14px;
  font-size: .84rem;
}

.school-hub-shell {
  display: grid;
  grid-template-columns: minmax(275px, 310px) minmax(0, 1fr);
  gap: clamp(22px, 2.4vw, 34px);
  align-items: start;
}

.school-hub-main { min-width: 0; }

.school-hub-heading {
  margin: 0 0 22px;
  padding: 18px 20px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: var(--clay-radius-card);
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(242,246,250,.94));
  box-shadow: var(--clay-card-shadow);
}

.school-hub-heading h1 {
  margin: 6px 0 5px;
  font-size: clamp(1.65rem, 2.4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.school-hub-heading .muted { margin: 0; }
.school-hub-actions { justify-content: flex-end; }

.module-section-heading {
  margin: 4px 2px 14px;
}

.module-section-heading h2 {
  margin: 0 0 3px;
  font-size: 1.16rem;
}

.module-section-heading p { margin: 0; font-size: .86rem; }

/* Módulos: misma jerarquía que Android: card clay + tile de icono profundo. */
.module-grid {
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
}

.module-card {
  --module-tint: transparent;
  aspect-ratio: .87;
  padding: 8px 8px 10px;
  justify-content: flex-start;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 25px;
  background: linear-gradient(145deg, #fbfcfe 0%, #eef2f7 100%);
  box-shadow: var(--clay-card-shadow);
}

.module-card::before { display: none; }

button.module-card:hover {
  transform: translateY(-3px);
  box-shadow:
    -8px -8px 18px rgba(255,255,255,.94),
    10px 12px 22px rgba(66,86,115,.22),
    inset 1px 1px 1px rgba(255,255,255,.84);
}

button.module-card:active {
  transform: translateY(0) scale(.99);
  box-shadow:
    -3px -3px 8px rgba(255,255,255,.84),
    4px 5px 10px rgba(66,86,115,.16),
    inset 2px 2px 5px rgba(66,86,115,.06);
}

.module-artwork {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  aspect-ratio: 1;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 19px;
  background: linear-gradient(145deg, #296eab 0%, #154e82 56%, #0c3b65 100%);
  box-shadow:
    0 7px 13px rgba(23,65,103,.24),
    inset 3px 3px 5px rgba(255,255,255,.15),
    inset -4px -4px 8px rgba(4,31,54,.20);
}

.module-image {
  max-height: none;
  filter: drop-shadow(0 8px 7px rgba(5,25,45,.24));
}

button.module-card:hover .module-image {
  transform: translateY(-1px) scale(1.025);
  filter: drop-shadow(0 10px 8px rgba(5,25,45,.28));
}

.module-card h3 {
  min-height: 0;
  margin: 9px 3px 1px;
  display: block;
  overflow: hidden;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Calendario del hub: deja de flotar a la derecha; ahora es el rail izquierdo. */
.agenda-companion.school-hub-calendar {
  position: sticky;
  z-index: 5;
  top: 86px;
  right: auto;
  width: 100%;
  max-height: calc(100vh - 108px);
  margin: 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: var(--clay-radius-card);
  background: linear-gradient(145deg, #fbfcfe, #eef3f8);
  box-shadow: var(--clay-card-shadow);
}

.agenda-companion-head > div { gap: 2px; }
.agenda-companion-head strong { font-size: .98rem; }
.agenda-icon-button { min-width: 38px; min-height: 38px; padding-inline: 8px; }

.agenda-calendar.is-compact {
  gap: 4px;
  margin-top: 13px;
}

.agenda-calendar.is-compact .agenda-day {
  min-height: 34px;
  border-radius: 11px;
}

.agenda-day:hover { background: #e9f0f7; }
.agenda-day.is-selected {
  border-color: transparent;
  color: #fff;
  background: var(--clay-primary);
  box-shadow: 0 5px 10px rgba(25,118,210,.20);
}
.agenda-day.is-selected i { background: #fff; }

.agenda-companion-preview {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 16px;
  background: linear-gradient(145deg, #f7fafc, #e9eff5);
  box-shadow: inset 2px 2px 5px rgba(90,110,136,.06), inset -2px -2px 5px rgba(255,255,255,.75);
}

.agenda-preview-actions { gap: 6px; }
.agenda-preview-actions .button { min-height: 36px; padding-inline: 11px; }
.agenda-preview-actions .button-primary { margin-left: 0; flex: 1; }

/* El calendario acompañante ya no reserva espacio lateral ni aparece en módulos internos. */
body:has(#agendaCompanion:not([hidden])) #appView { padding-right: 0 !important; }

/* Encabezados internos: más cercanos a la jerarquía Android y menos hero-page. */
.module-heading {
  margin: 6px 0 24px;
  align-items: center;
}

.module-heading h1 {
  margin: 5px 0 5px;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}

/* Rail contextual común: lista izquierda + detalle derecho. */
.classrooms-layout,
.planning-web-layout,
.civic-workspace,
.documents-layout {
  grid-template-columns: minmax(270px, 310px) minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
}

.classroom-sidebar,
.classroom-detail,
.planning-units-panel,
.planning-plans-panel,
.planning-plan-editor,
.civic-history-panel,
.civic-form-card,
.documents-card,
.documents-main,
.subjects-workspace,
.attendance-workspace,
.attendance-setup,
.gradebook-workspace {
  border: 1px solid rgba(255,255,255,.84);
  border-radius: var(--clay-radius-card);
  background: linear-gradient(145deg, #fbfcfe, #eef3f8);
  box-shadow: var(--clay-card-shadow-soft);
}

.classroom-sidebar,
.planning-units-panel,
.civic-history-panel,
.documents-sidebar {
  position: sticky;
  top: 86px;
}

.classroom-list { gap: 10px; }
.classroom-list-button,
.planning-unit-filter,
.civic-history-card,
.document-item,
.subject-card {
  border: 1px solid rgba(204,215,228,.76);
  border-radius: 16px;
  background: linear-gradient(145deg, #fbfcfe, #f0f4f8);
  box-shadow: 0 5px 12px rgba(74,94,121,.08);
}

.classroom-list-button:hover,
.classroom-list-button.is-active,
.planning-unit-filter:hover,
.planning-unit-filter.is-active,
.civic-history-card:hover,
.civic-history-card.is-active {
  border-color: rgba(25,118,210,.34);
  background: var(--clay-primary-soft);
  box-shadow: 0 6px 14px rgba(25,118,210,.10);
}

/* Materias comienza a adoptar el mismo patrón: lista contextual a la izquierda. */
.subjects-layout {
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
}

.subject-list { gap: 10px; }
.subject-card { padding: 14px; }
.subject-creation-panel {
  border: 1px solid rgba(255,255,255,.84);
  border-radius: var(--clay-radius-card);
  background: linear-gradient(145deg, #fbfcfe, #eef3f8);
  box-shadow: var(--clay-card-shadow-soft);
}

/* Formularios/controles: radio y volumen coherentes con Android. */
input,
select,
textarea {
  border-color: #cbd6e2;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--clay-primary);
  box-shadow: 0 0 0 4px rgba(25,118,210,.11);
}

.status-pill,
.step-badge,
.period-chip,
.subject-state,
.document-status,
.status-chip {
  border-radius: 999px;
}

@media (max-width: 1120px) {
  .school-hub-shell { grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
  .module-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .school-hub-actions .status-pill { display: none; }
}

@media (max-width: 900px) {
  .page-shell { width: min(100% - 24px, 820px); padding-top: 20px; }
  .school-hub-shell,
  .classrooms-layout,
  .planning-web-layout,
  .civic-workspace,
  .documents-layout,
  .subjects-layout { grid-template-columns: 1fr; }

  .agenda-companion.school-hub-calendar,
  .classroom-sidebar,
  .planning-units-panel,
  .civic-history-panel,
  .documents-sidebar { position: static; max-height: none; }

  .school-hub-heading { align-items: flex-start; flex-direction: column; }
  .school-hub-actions { justify-content: flex-start; }
}

/* Los @media legados ocultaban el compañero <=1180px; en Módulos debe permanecer visible. */
@media (max-width: 1180px) {
  #schoolHubView:not([hidden]) #agendaCompanion:not([hidden]) { display: block !important; }
}

@media (max-width: 560px) {
  .topbar { padding-inline: 12px; }
  .page-shell { width: min(100% - 18px, 540px); }
  .school-hub-heading { padding: 16px; border-radius: 20px; }
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .module-card { padding: 6px 6px 8px; border-radius: 19px; }
  .module-artwork { padding: 6px; border-radius: 15px; }
  .module-card h3 { margin-top: 7px; font-size: .72rem; }
  .agenda-companion.school-hub-calendar { padding: 13px; border-radius: 20px; }
}

/* Ajustes de jerarquía para vistas que todavía usan encabezado propio. */
.auth-layout,
.onboarding-grid { max-width: 1160px; margin-inline: auto; }

.attendance-heading {
  margin: 6px 0 24px;
}
.attendance-heading h2 {
  margin: 5px 0;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}

/* ========================================================================== */
/* 026Z8J · Apariencia Web local + topbar compacta                           */
/* Tema Sistema/Claro/Oscuro y color primario compatible con la paleta Android. */
/* ========================================================================== */
:root {
  --user-primary: #388e3c;
  --on-user-primary: #ffffff;
  --pastel-yellow: #f4d96b;
  --pastel-yellow-dark: #d9be55;
  --clay-primary: var(--user-primary);
  --clay-primary-deep: color-mix(in srgb, var(--user-primary) 72%, #000);
  --clay-primary-soft: color-mix(in srgb, var(--user-primary) 13%, #fff);
  --primary: var(--user-primary);
  --primary-dark: var(--clay-primary-deep);
  --primary-soft: var(--clay-primary-soft);
  --accent: var(--pastel-yellow);
  --accent-soft: #fff3b5;
  --panel: var(--surface);
  --border: var(--line);
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eaeaea;
  --muted: #bfc3c8;
  --clay-bg: color-mix(in srgb, #151515 95%, var(--user-primary) 5%);
  --clay-surface: color-mix(in srgb, #1c1c1c 95%, var(--user-primary) 5%);
  --clay-surface-strong: color-mix(in srgb, #202020 94%, var(--user-primary) 6%);
  --clay-primary-soft: color-mix(in srgb, var(--user-primary) 24%, #202020);
  --clay-secondary-soft: #514813;
  --surface: var(--clay-surface-strong);
  --surface-soft: var(--clay-bg);
  --line: #444746;
  --panel: var(--clay-surface);
  --border: var(--line);
  --warning: #514813;
  --warning-line: #8f7c30;
  --danger: #ffb4ab;
  --success: #8bd5ad;
  --accent-soft: #514813;
  --clay-shadow-light: rgba(255,255,255,.045);
  --clay-shadow-dark: rgba(0,0,0,.42);
  --clay-card-shadow:
    -5px -5px 13px rgba(255,255,255,.035),
    8px 9px 18px rgba(0,0,0,.36),
    inset 1px 1px 1px rgba(255,255,255,.045),
    inset -2px -2px 5px rgba(0,0,0,.16);
  --clay-card-shadow-soft:
    -3px -3px 9px rgba(255,255,255,.028),
    5px 6px 12px rgba(0,0,0,.28);
  --shadow: var(--clay-card-shadow);
}

body {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--user-primary) 14%, transparent), transparent 31rem),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--user-primary) 8%, transparent), transparent 28rem),
    var(--clay-bg);
}

.topbar {
  border-bottom-color: color-mix(in srgb, var(--line) 78%, transparent);
  background: color-mix(in srgb, var(--clay-bg) 88%, transparent);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.topbar-action {
  min-height: 40px;
  padding-inline: 14px;
  white-space: nowrap;
}

.brand-mark {
  color: var(--on-user-primary);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--user-primary) 86%, #fff),
    var(--clay-primary-deep));
  box-shadow:
    -3px -3px 8px color-mix(in srgb, var(--clay-shadow-light) 84%, transparent),
    5px 6px 12px color-mix(in srgb, var(--user-primary) 28%, rgba(0,0,0,.28)),
    inset 2px 2px 3px rgba(255,255,255,.18),
    inset -3px -3px 6px rgba(0,0,0,.16);
}

.button-primary {
  color: var(--on-user-primary);
  background: linear-gradient(135deg, var(--user-primary), var(--clay-primary-deep));
  box-shadow: 0 7px 14px color-mix(in srgb, var(--user-primary) 28%, transparent);
}

.button-secondary,
.button-quiet {
  color: var(--primary-dark);
  border-color: color-mix(in srgb, var(--line) 82%, var(--user-primary));
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
  box-shadow: var(--clay-card-shadow-soft);
}

html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .button-quiet {
  color: color-mix(in srgb, var(--user-primary) 42%, #fff);
}

#schoolHubBackButton { display: none !important; }

/* El acento seleccionado gobierna también los tiles principales, como en Android. */
.module-artwork {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--user-primary) 78%, #fff) 0%,
    var(--user-primary) 52%,
    var(--clay-primary-deep) 100%);
  box-shadow:
    0 7px 13px color-mix(in srgb, var(--user-primary) 30%, transparent),
    inset 3px 3px 5px rgba(255,255,255,.13),
    inset -4px -4px 8px rgba(0,0,0,.18);
}

.school-hub-heading,
.module-card,
.agenda-companion.school-hub-calendar,
.agenda-companion-preview,
.classroom-sidebar,
.classroom-detail,
.planning-units-panel,
.planning-plans-panel,
.planning-plan-editor,
.civic-history-panel,
.civic-form-card,
.documents-card,
.documents-main,
.subjects-workspace,
.attendance-workspace,
.attendance-setup,
.gradebook-workspace,
.subject-creation-panel,
.auth-card,
.form-card,
.school-card {
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
}

.classroom-list-button,
.planning-unit-filter,
.civic-history-card,
.document-item,
.subject-card {
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
}

.classroom-list-button:hover,
.classroom-list-button.is-active,
.planning-unit-filter:hover,
.planning-unit-filter.is-active,
.civic-history-card:hover,
.civic-history-card.is-active {
  border-color: color-mix(in srgb, var(--user-primary) 48%, var(--line));
  background: var(--clay-primary-soft);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--user-primary) 15%, transparent);
}

.agenda-day:hover { background: color-mix(in srgb, var(--user-primary) 9%, var(--clay-surface)); }
.agenda-day.is-selected {
  color: var(--on-user-primary);
  background: var(--user-primary);
  box-shadow: 0 5px 10px color-mix(in srgb, var(--user-primary) 28%, transparent);
}
.agenda-day.is-selected i { background: var(--on-user-primary); }

input,
select,
textarea {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
  background: color-mix(in srgb, var(--clay-surface-strong) 94%, transparent);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--user-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--user-primary) 14%, transparent);
}

label { color: color-mix(in srgb, var(--ink) 82%, var(--muted)); }
.eyebrow,
.text-button,
.school-card .role,
.classroom-count,
.creation-disclosure summary { color: color-mix(in srgb, var(--user-primary) 72%, var(--ink)); }

.tab.is-active,
.student-action-button,
.gradebook-period-tab,
.grade-group-action-card,
.grade-matrix-table-wrap,
.grade-student-cell,
.grade-score-cell,
.grade-cell-options,
.grade-summary-stat,
.final-summary-table-wrap,
.siges-export-context,
.monthly-day-button,
.monthly-status-button,
.attendance-table select,
.quick-permission select,
.planning-media-preview,
.planning-table-scroll,
.evaluation-catalog-item,
.evaluation-selected-item,
.evaluation-activity-card,
.evaluation-criterion-card,
.evaluation-generated-document,
.evaluation-individual-document-row,
.evaluation-table-editor table,
.evaluation-image-editor > img,
.document-signature-preview {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}

html[data-theme="dark"] .tabs { background: #292b2b; }
html[data-theme="dark"] .tab.is-active { box-shadow: 0 4px 14px rgba(0,0,0,.24); }
html[data-theme="dark"] .feature-list { color: var(--ink); }
html[data-theme="dark"] .feature-list span { color: #302900; background: var(--pastel-yellow-dark); }
html[data-theme="dark"] .planning-table-scroll th { background: #292c2b; }
html[data-theme="dark"] .quick-attendance { background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface)); }
html[data-theme="dark"] .gradebook-period-tab.is-summary { color: #fff1a8; border-color: #776b36; background: #514813; }
html[data-theme="dark"] .gradebook-period-tab.is-summary.is-active { color: #302900; background: var(--pastel-yellow-dark); }
html[data-theme="dark"] .activity-card { background: var(--surface); }
html[data-theme="dark"] .activity-card.is-locked,
html[data-theme="dark"] .grade-score-cell.is-locked { background: #2c291a; }
html[data-theme="dark"] .button-danger-quiet { background: var(--surface); }

/* Apariencia: diálogo local, inspirado en la pantalla Android. */
.appearance-dialog {
  width: min(760px, calc(100% - 28px));
  max-height: min(780px, calc(100vh - 36px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  color: var(--ink);
  background: var(--clay-surface-strong);
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}

.appearance-dialog::backdrop {
  background: rgba(10,16,22,.48);
  backdrop-filter: blur(5px);
}

.appearance-shell {
  max-height: min(780px, calc(100vh - 36px));
  padding: 22px;
  overflow: auto;
}

.appearance-head,
.appearance-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.appearance-head {
  position: sticky;
  z-index: 2;
  top: -22px;
  margin: -22px -22px 0;
  padding: 22px 22px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--clay-surface-strong) 92%, transparent);
  backdrop-filter: blur(16px);
}

.appearance-head h2 { margin: 5px 0 4px; font-size: 1.55rem; }
.appearance-head p,
.appearance-section-title p { margin: 4px 0 0; }
.appearance-close { min-width: 42px; padding: 0; font-size: 1.5rem; line-height: 1; }

.appearance-section { padding-top: 24px; }
.appearance-section + .appearance-section { margin-top: 20px; border-top: 1px solid var(--line); }
.appearance-section h3 { margin: 0; font-size: 1rem; }

.appearance-theme-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.appearance-theme-card {
  min-height: 112px;
  padding: 14px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
  box-shadow: var(--clay-card-shadow-soft);
  text-align: left;
}

.appearance-theme-card small { color: var(--muted); }
.appearance-theme-card.is-selected {
  border-color: color-mix(in srgb, var(--user-primary) 62%, var(--line));
  background: var(--clay-primary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--user-primary) 26%, transparent), var(--clay-card-shadow-soft);
}
.appearance-theme-icon { font-size: 1.35rem; }

.appearance-current-color {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--clay-surface);
  font-size: .76rem;
  font-weight: 800;
}

.appearance-tone-palette {
  margin-top: 14px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(8, minmax(34px, 1fr));
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--clay-surface);
}

.appearance-tone {
  aspect-ratio: 1;
  min-width: 0;
  border: 3px solid transparent;
  border-radius: 13px;
  background: var(--tone);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.12);
}
.appearance-tone.is-selected { border-color: var(--ink); outline: 2px solid var(--surface); outline-offset: -5px; }

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

.appearance-family-swatch {
  min-width: 0;
  padding: 8px 5px;
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--muted);
  background: transparent;
}
.appearance-family-swatch > span {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.12);
}
.appearance-family-swatch small { max-width: 100%; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.appearance-family-swatch.is-selected {
  border-color: color-mix(in srgb, var(--user-primary) 54%, var(--line));
  color: var(--ink);
  background: var(--clay-primary-soft);
}

@media (max-width: 700px) {
  .brand small { display: none; }
  .topbar-actions { gap: 5px; }
  .topbar-action { min-height: 38px; padding-inline: 10px; font-size: .76rem; }
  .appearance-theme-grid { grid-template-columns: 1fr; }
  .appearance-theme-card { min-height: 76px; grid-template-columns: auto 1fr; column-gap: 10px; }
  .appearance-theme-card small { grid-column: 2; }
  .appearance-tone-palette { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 440px) {
  .brand strong { font-size: .86rem; }
  .brand-mark { width: 38px; height: 38px; border-radius: 13px; }
  #logoutButton { display: none !important; }
  .topbar-action { padding-inline: 8px; }
  .appearance-shell { padding: 16px; }
  .appearance-head { top: -16px; margin: -16px -16px 0; padding: 16px 16px 14px; }
}

/* ========================================================================== */
/* 026Z8K · Portada 6 columnas + refinado del modal de escuela                */
/* ========================================================================== */

/* En escritorio ancho mostramos exactamente seis módulos por fila. */
@media (min-width: 1121px) {
  .module-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ========================================================================== */
/* Guiones de clase · materias por grado → guiones → detalle                  */
/* ========================================================================== */
body[data-start-module="planning"] .page-shell {
  width: min(1500px, calc(100% - 28px));
  padding-top: 18px;
  padding-bottom: 46px;
}

body[data-start-module="planning"] .planning-web-workspace { gap: 14px; }

.planning-subject-master-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.planning-subjects-panel {
  position: sticky;
  top: 84px;
  min-width: 0;
  max-height: calc(100vh - 102px);
  padding: 12px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 95%, var(--primary) 5%);
  box-shadow: 0 8px 20px rgba(25, 42, 72, .07);
  scrollbar-width: thin;
}

.planning-subjects-heading {
  padding: 4px 4px 11px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}
.planning-subjects-heading h2 { margin: 3px 0 0; font-size: 1.05rem; }
.planning-subjects-heading small { color: var(--muted); font-size: .68rem; text-align: right; }

.planning-year-control {
  margin: 0 2px 13px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.planning-year-control select {
  width: 100%;
  min-height: 40px;
  color: var(--ink);
  font-size: .8rem;
  text-transform: none;
}

.planning-subject-groups { display: grid; gap: 15px; }
.planning-subject-grade-group { min-width: 0; display: grid; gap: 7px; }
.planning-subject-grade-heading {
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.planning-subject-grade-heading h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.planning-subject-grade-heading span {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: .68rem;
  font-weight: 850;
  text-align: center;
}
.planning-subject-list { display: grid; gap: 7px; }
.planning-subject-card {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 91%, transparent);
  border-radius: 13px;
  color: var(--ink);
  text-align: left;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 3px 9px rgba(25, 42, 72, .045);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.planning-subject-card:hover {
  border-color: color-mix(in srgb, var(--planning-subject-color) 45%, var(--line));
  background: color-mix(in srgb, var(--planning-subject-color) 7%, var(--surface));
  transform: translateY(-1px);
}
.planning-subject-card.is-selected {
  border-color: color-mix(in srgb, var(--planning-subject-color) 62%, var(--line));
  background: color-mix(in srgb, var(--planning-subject-color) 13%, var(--surface));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--planning-subject-color) 12%, transparent);
}
.planning-subject-marker {
  width: 5px;
  border-radius: 999px;
  background: var(--planning-subject-color, var(--primary));
}
.planning-subject-copy { min-width: 0; display: grid; align-content: center; gap: 3px; }
.planning-subject-copy strong,
.planning-subject-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-subject-copy strong { font-size: .84rem; font-weight: 820; }
.planning-subject-copy small { color: var(--muted); font-size: .68rem; font-weight: 650; }
.planning-subject-empty { padding: 13px 9px; }

.planning-subject-main { min-width: 0; }
.planning-subject-main > .planning-web-heading {
  display: none;
}
.planning-subject-main > .notice:not([hidden]) { margin-bottom: 12px; }

.module-context-bar:has(.planning-chrome-controls) {
  min-height: 62px;
  gap: 10px;
}
.planning-chrome-controls {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.planning-chrome-controls[hidden] { display: none !important; }
.planning-chrome-context {
  min-width: 130px;
  max-width: 220px;
  min-height: 42px;
  padding: 6px 10px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
}
.planning-chrome-context small {
  color: var(--muted);
  font-size: .61rem;
  font-weight: 820;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}
.planning-chrome-context strong {
  overflow: hidden;
  color: var(--ink);
  font-size: .77rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-chrome-controls > .button {
  min-height: 42px;
  padding-inline: 15px;
  white-space: nowrap;
}
.planning-detail-action[hidden] { display: none !important; }

body[data-start-module="planning"] .planning-web-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
body[data-start-module="planning"] .planning-plans-panel {
  order: 1;
  min-width: 0;
}
body[data-start-module="planning"] .planning-units-panel {
  position: static;
  order: 2;
  min-width: 0;
}
body[data-start-module="planning"] .planning-plan-card.is-clickable { cursor: pointer; }
body[data-start-module="planning"] .planning-plan-card.is-clickable:hover,
body[data-start-module="planning"] .planning-plan-card.is-clickable:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  outline: none;
  transform: translateY(-1px);
}

body[data-start-module="planning"] .planning-plan-list { gap: 14px; }
.planning-hierarchy-shell {
  position: relative;
  min-width: 0;
}
.planning-hierarchy-unit {
  min-width: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--planning-unit-accent) 30%, var(--line));
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 7px 18px rgba(25, 42, 72, .06);
}
.planning-hierarchy-summary {
  min-height: 72px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  border-radius: 17px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--planning-unit-accent) 12%, var(--surface)),
    color-mix(in srgb, var(--planning-unit-accent) 4%, var(--surface)));
  user-select: none;
}
.planning-hierarchy-summary.has-unit-menu {
  grid-template-columns: 44px minmax(0, 1fr) auto 34px 18px;
}
.planning-hierarchy-unit[open] > .planning-hierarchy-summary {
  border-radius: 17px 17px 0 0;
}
.planning-hierarchy-summary::-webkit-details-marker { display: none; }
.planning-hierarchy-summary:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--planning-unit-accent) 17%, var(--surface)),
    color-mix(in srgb, var(--planning-unit-accent) 7%, var(--surface)));
}
.planning-hierarchy-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 1.08rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.planning-hierarchy-copy { min-width: 0; display: grid; gap: 3px; }
.planning-hierarchy-copy strong,
.planning-hierarchy-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-hierarchy-copy strong { color: var(--ink); font-size: .96rem; font-weight: 850; }
.planning-hierarchy-copy small { color: var(--muted); font-size: .72rem; }
.planning-hierarchy-count {
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--planning-unit-accent) 22%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--planning-unit-accent) 72%, var(--ink));
  background: color-mix(in srgb, var(--planning-unit-accent) 8%, var(--surface));
  font-size: .7rem;
  font-weight: 820;
  white-space: nowrap;
}
.planning-hierarchy-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .16s ease;
}
.planning-hierarchy-unit:not([open]) .planning-hierarchy-chevron {
  transform: rotate(-45deg) translate(-1px, -1px);
}
.planning-hierarchy-body {
  padding: 15px;
  display: grid;
  gap: 13px;
  border-top: 1px solid color-mix(in srgb, var(--planning-unit-accent) 22%, var(--line));
  border-radius: 0 0 17px 17px;
  background: color-mix(in srgb, var(--surface-soft) 42%, var(--surface));
}
.planning-unit-config-menu {
  position: absolute;
  z-index: 12;
  top: 19px;
  right: 49px;
  min-width: 0;
}
.planning-unit-config-menu .planning-overflow-trigger {
  width: 34px;
  height: 34px;
  border-color: color-mix(in srgb, var(--planning-unit-accent) 26%, var(--line));
  background: color-mix(in srgb, var(--planning-unit-accent) 7%, var(--surface));
}
.planning-unit-config-menu .planning-overflow-panel {
  min-width: 190px;
}

.planning-unit-dialog {
  width: min(660px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 22px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}
.planning-unit-dialog::backdrop {
  background: rgba(6, 10, 14, .62);
  backdrop-filter: blur(3px);
}
.planning-unit-dialog-heading {
  padding: 18px 20px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
}
.planning-unit-dialog-heading h2 {
  margin: 5px 0 0;
  font-size: 1.25rem;
}
.planning-unit-dialog .planning-unit-form {
  max-height: calc(100vh - 130px);
  padding: 20px;
  overflow-y: auto;
}
.planning-unit-dialog .form-actions {
  justify-content: flex-end;
}
.planning-quick-plan-dialog {
  width: min(520px, calc(100vw - 28px));
}
.planning-quick-plan-form {
  padding: 20px;
  gap: 15px;
}
.planning-quick-plan-context {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  font-size: .84rem;
  font-weight: 760;
}
.planning-quick-plan-help {
  margin: -3px 0 0;
  font-size: .76rem;
  line-height: 1.45;
}
.planning-quick-plan-form .form-actions {
  justify-content: flex-end;
}
.planning-editor-action-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.planning-editor-action-card {
  min-width: 0;
  min-height: 86px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface));
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.planning-editor-action-card:hover,
.planning-editor-action-card:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(25, 42, 72, .1);
}
.planning-editor-action-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--ink);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.planning-editor-action-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.planning-editor-action-copy strong {
  font-size: .9rem;
  font-weight: 850;
}
.planning-editor-action-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-editor-action-arrow {
  color: var(--muted);
  font-size: 1.45rem;
  line-height: 1;
}
.planning-editor-action-card.is-ai-featured {
  border-color: color-mix(in srgb, #6d5dfc 58%, #20b8d8);
  color: #fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.22), transparent 31%),
    linear-gradient(135deg, #2558d9 0%, #6d45d9 54%, #008fae 100%);
  box-shadow: 0 12px 26px rgba(65, 74, 205, .25);
}
.planning-editor-action-card.is-ai-featured .planning-editor-action-badge {
  color: #fff;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.planning-editor-action-card.is-ai-featured :is(.planning-editor-action-copy small, .planning-editor-action-arrow) {
  color: rgba(255,255,255,.84);
}
.planning-editor-action-card.is-ai-featured.is-ai-unavailable { filter: saturate(.62); }
.planning-plan-settings-dialog { width: min(720px, calc(100vw - 28px)); }
.planning-plan-settings-form {
  max-height: calc(100vh - 130px);
  padding: 20px;
  overflow-y: auto;
}
.planning-plan-settings-form .form-actions { justify-content: flex-end; }
.planning-ai-dialog { width: min(720px, calc(100vw - 28px)); }
.planning-ai-dialog-heading {
  border-bottom-color: color-mix(in srgb, #6d5dfc 42%, var(--line));
  background: linear-gradient(135deg,
    color-mix(in srgb, #2558d9 12%, var(--surface)),
    color-mix(in srgb, #008fae 10%, var(--surface)));
}
.planning-ai-dialog-panel {
  max-height: calc(100vh - 130px);
  margin: 0;
  padding: 20px;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
}
.planning-ai-dialog-panel .planning-ai-actions { justify-content: flex-end; }
.planning-ai-framework-section {
  display: grid;
  gap: 10px;
}
.planning-ai-framework-section > strong,
.planning-ai-apply-section > strong {
  font-size: .78rem;
  font-weight: 850;
}
.planning-ai-framework-options {
  padding-bottom: 3px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.planning-ai-framework-chip,
.planning-ai-mode-button {
  min-height: 36px;
  padding: 8px 12px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, #5e67d7 28%, var(--line));
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  font-size: .76rem;
  font-weight: 780;
  cursor: pointer;
}
.planning-ai-framework-chip:is(:hover, :focus-visible),
.planning-ai-mode-button:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, #5e67d7 62%, var(--line));
  outline: none;
}
.planning-ai-framework-chip.is-active,
.planning-ai-mode-button.is-active {
  border-color: #4d57d6;
  color: #fff;
  background: linear-gradient(135deg, #315ed8, #6950d8);
  box-shadow: 0 6px 14px rgba(66, 77, 200, .2);
}
.planning-ai-framework-preview {
  padding: 13px 14px;
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, #5e67d7 24%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, #5967e7 8%, var(--surface));
}
.planning-ai-framework-preview > strong { font-size: .88rem; }
.planning-ai-framework-preview > p {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
}
.planning-ai-framework-preview > small {
  color: color-mix(in srgb, #4653c5 76%, var(--ink));
  font-size: .69rem;
  font-weight: 750;
}
.planning-ai-framework-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.planning-ai-framework-phases span {
  padding: 4px 7px;
  border-radius: 7px;
  color: var(--ink);
  background: color-mix(in srgb, #5967e7 10%, var(--surface));
  font-size: .65rem;
  font-weight: 700;
}
.planning-ai-assisted-note {
  padding: 11px 13px;
  display: grid;
  gap: 3px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}
.planning-ai-assisted-note strong { font-size: .78rem; }
.planning-ai-assisted-note span { color: var(--muted); font-size: .7rem; }
.planning-ai-primary-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(120px, .55fr);
  gap: 10px;
  align-items: start;
}
.planning-ai-primary-fields label { min-width: 0; }
.planning-ai-primary-fields label small {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 600;
}
.planning-ai-apply-section {
  display: grid;
  gap: 8px;
}
.planning-ai-mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.planning-ai-validation { margin: 0; }
.planning-ai-dialog-panel #planningGenerateAiButton {
  min-width: min(100%, 220px);
  border-color: transparent;
  background: linear-gradient(135deg, #2558d9, #7048dc 58%, #008fae);
  box-shadow: 0 9px 20px rgba(65, 74, 205, .25);
}

/* Editor de bloques · paridad visual con las tarjetas de Android. */
.planning-block-toolbar {
  margin-top: 2px;
  padding: 14px;
  align-items: end;
  border: 1px dashed color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.planning-block-list { gap: 16px; padding: 3px; }
.planning-block-card {
  --planning-block-accent: var(--primary);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--planning-block-accent) 28%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--planning-block-accent) 72%, var(--line));
  border-radius: 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, white 12%);
  box-shadow: 0 8px 22px rgba(21, 35, 56, .13), 0 1px 2px rgba(21, 35, 56, .09);
}
.planning-block-card:is(.is-objetivo, .is-texto) { --planning-block-accent: #3978e8; }
.planning-block-card:is(.is-ejemplo, .is-checklist) { --planning-block-accent: #19a79e; }
.planning-block-card.is-actividad { --planning-block-accent: #d89b15; }
.planning-block-card:is(.is-resaltado, .is-cita) { --planning-block-accent: #8a5ad0; }
.planning-block-card.is-card { --planning-block-accent: #e19e22; }
.planning-block-card:is(.is-tabla, .is-diagrama) { --planning-block-accent: #6f61d8; }
.planning-block-card.is-imagen { --planning-block-accent: #2c9a79; }
.planning-block-heading {
  min-height: 48px;
  padding: 8px 10px 8px 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--planning-block-accent) 18%, var(--line));
  background: color-mix(in srgb, var(--planning-block-accent) 9%, var(--surface));
}
.planning-block-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.planning-block-identity strong {
  overflow: hidden;
  color: color-mix(in srgb, var(--ink) 88%, var(--primary));
  font-size: .74rem;
  font-weight: 880;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.planning-block-position {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: color-mix(in srgb, var(--planning-block-accent) 82%, var(--ink));
  background: color-mix(in srgb, var(--planning-block-accent) 15%, var(--surface));
  font-size: .7rem;
  font-weight: 900;
}
.planning-block-actions { align-items: center; gap: 4px; }
.planning-block-card .planning-mini-action {
  min-height: 31px;
  padding: 5px 9px;
  border-color: transparent;
  color: var(--muted);
  background: transparent;
  font-size: .7rem;
  font-weight: 780;
}
.planning-block-card .planning-mini-action:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  outline: none;
  color: var(--ink);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.planning-block-card .planning-mini-action.is-icon { width: 31px; padding-inline: 0; font-size: .9rem; }
.planning-block-card .planning-mini-action.is-configure {
  color: color-mix(in srgb, var(--primary) 82%, var(--ink));
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.planning-block-card .planning-mini-action.is-danger { color: #bd4b4b; }
.planning-content-surface,
.planning-activity-surface,
.planning-checklist-surface,
.planning-rich-card-editor,
.planning-diagram-preview,
.planning-block-card > .planning-table-editor,
.planning-block-card > .planning-media-editor,
.planning-block-card > .planning-image-size-editor {
  margin: 14px;
}
.planning-content-surface { min-width: 0; }
.planning-block-card textarea.planning-block-textarea {
  width: 100%;
  min-height: 78px;
  margin: 0;
  padding: 12px 14px;
  resize: vertical;
  border: 0;
  border-radius: 12px;
  outline: none;
  color: var(--ink);
  background: transparent;
  font: inherit;
  line-height: 1.52;
}
.planning-block-card textarea.planning-block-textarea:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 34%, transparent);
}
.planning-content-surface.is-texto {
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-soft) 32%, transparent);
}
.planning-content-surface.is-subtitulo .planning-block-textarea {
  min-height: 58px;
  padding: 5px 3px;
  color: color-mix(in srgb, var(--primary) 74%, var(--ink));
  font-size: 1.22rem;
  font-weight: 880;
}
.planning-content-surface.is-texto-negrita .planning-block-textarea { font-weight: 850; }
.planning-content-surface:is(.is-texto-cursiva, .is-cita) .planning-block-textarea { font-style: italic; }
.planning-content-surface-title {
  padding: 13px 14px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.planning-content-surface-title > span {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-weight: 900;
}
.planning-content-surface-title > div { display: grid; gap: 2px; }
.planning-content-surface-title strong { font-size: .72rem; letter-spacing: .1em; }
.planning-content-surface-title small { color: var(--muted); font-size: .67rem; }
.planning-content-surface.is-objetivo {
  border: 1px solid color-mix(in srgb, #2f6fed 30%, var(--line));
  border-radius: 14px;
  color: #2859b5;
  background: color-mix(in srgb, #4d84ec 12%, var(--surface));
}
.planning-content-surface.is-resaltado {
  border: 1px solid color-mix(in srgb, #8d5bd1 28%, var(--line));
  border-radius: 14px;
  color: #7441b9;
  background: color-mix(in srgb, #a66ee9 12%, var(--surface));
}
.planning-content-surface.is-ejemplo {
  border: 1.5px dashed color-mix(in srgb, #19a7a0 68%, var(--line));
  border-radius: 14px;
  color: #168d88;
  background: color-mix(in srgb, #2ab8ae 5%, var(--surface));
}
.planning-content-surface.is-ejemplo .planning-block-textarea { font-style: italic; }
.planning-content-surface.is-cita {
  border-radius: 14px;
  color: color-mix(in srgb, var(--primary) 72%, var(--ink));
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
}
.planning-content-surface.is-cita .planning-block-textarea { font-size: 1.02rem; }
.planning-activity-surface {
  padding: 15px;
  border: 1px solid color-mix(in srgb, #d99d16 31%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, #f0b52d 12%, var(--surface));
}
.planning-activity-heading { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; }
.planning-activity-heading > span {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  color: #745100; background: color-mix(in srgb, #e6a91d 20%, var(--surface)); font-weight: 900;
}
.planning-activity-heading input {
  min-width: 0; padding: 7px 5px; border: 0; outline: none; color: var(--ink); background: transparent;
  font-size: 1rem; font-weight: 880;
}
.planning-dotted-divider { margin: 10px 0 4px; border-top: 1.5px dashed color-mix(in srgb, #be8510 43%, var(--line)); }
.planning-activity-surface .planning-block-textarea { font-family: Georgia, 'Times New Roman', serif; }
.planning-checklist-surface {
  padding: 13px 15px;
  display: grid;
  gap: 9px;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.planning-checklist-row { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 8px; align-items: start; }
.planning-checklist-row > span:first-child { color: var(--primary); font-weight: 900; text-align: center; }
.planning-checklist-row > span:last-child { overflow-wrap: anywhere; line-height: 1.42; }
.planning-block-empty { margin: 0; color: var(--muted); font-size: .78rem; text-align: center; }
.planning-rich-card-editor { display: grid; gap: 12px; }
.planning-rich-card-preview {
  min-width: 0;
  min-height: 132px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
}
.planning-rich-card-preview.has-image.is-landscape { grid-template-columns: minmax(120px, .62fr) minmax(0, 1.38fr); }
.planning-rich-card-preview.is-portrait { width: min(100%, 440px); grid-template-columns: 1fr; }
.planning-rich-card-media {
  min-height: 105px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: color-mix(in srgb, var(--primary) 72%, var(--muted));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.planning-rich-card-media .planning-media-preview { width: 100%; height: 100%; max-height: 190px; border: 0; border-radius: 0; object-fit: contain; }
.planning-rich-card-preview.is-fill .planning-rich-card-media .planning-media-preview { object-fit: cover; }
.planning-rich-card-copy { min-width: 0; padding: 8px 5px; align-self: center; display: grid; gap: 7px; }
.planning-rich-card-copy strong { font-size: 1.02rem; font-weight: 880; }
.planning-rich-card-copy p { margin: 0; color: var(--muted); line-height: 1.5; white-space: pre-wrap; }
.planning-rich-card-editor > .planning-media-editor {
  margin: 0;
  padding: 10px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 12px;
}
.planning-rich-card-editor > .planning-media-editor .planning-media-preview { display: none; }
.planning-rich-card-editor > .planning-media-editor p { margin: 0; }
.planning-image-size-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.planning-image-size-editor > strong { margin-right: 3px; font-size: .74rem; }
.planning-choice-chip {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-soft) 60%, var(--surface));
  font-size: .72rem;
  font-weight: 780;
  cursor: pointer;
}
.planning-choice-chip.is-active { border-color: var(--primary); color: #fff; background: var(--primary); }
.planning-block-card > .planning-media-editor {
  padding: 13px;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.planning-block-card > .planning-media-editor .planning-media-preview {
  width: var(--planning-image-width, min(70%, 680px));
  max-height: 430px;
  justify-self: center;
}
.planning-block-card.is-imagen:has(.planning-choice-chip:nth-of-type(1).is-active) { --planning-image-width: min(42%, 420px); }
.planning-block-card.is-imagen:has(.planning-choice-chip:nth-of-type(3).is-active) { --planning-image-width: 100%; }
.planning-table-editor { gap: 12px; }
.planning-table-dimensions {
  padding: 11px 12px;
  border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.planning-table-scroll { border-color: color-mix(in srgb, var(--primary) 25%, var(--line)); border-radius: 13px; background: var(--surface); }
.planning-table-scroll th { background: color-mix(in srgb, var(--primary) 15%, var(--surface)); }
.planning-table-scroll :is(input, textarea) { border-color: transparent; background: transparent; }
.planning-diagram-preview {
  padding: 15px;
  display: grid;
  gap: 13px;
  border: 1.5px dashed color-mix(in srgb, #7c62d8 49%, var(--line));
  border-radius: 15px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),
    color-mix(in srgb, #765cda 5%, var(--surface));
  background-size: 18px 18px;
}
.planning-diagram-preview > strong { font-size: .95rem; }
.planning-diagram-preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.planning-diagram-preview-heading > strong { min-width: 0; overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.planning-diagram-preview-heading > small { color: var(--muted); font-size: .66rem; white-space: nowrap; }
.planning-diagram-readonly-canvas {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #745bd4 28%, var(--line));
  border-radius: 13px;
  background: var(--surface);
}
.planning-diagram-readonly-canvas svg { display: block; width: 100%; height: 100%; }
.planning-diagram-readonly-node {
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--readonly-node-accent) 32%, var(--line));
  border-radius: 14px;
  color: var(--readonly-node-fg);
  background: var(--readonly-node-bg);
  box-shadow: 0 3px 9px rgba(18, 27, 40, .13);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}
.planning-diagram-readonly-node.is-titulo { font-size: 18px; font-weight: 900; }
.planning-diagram-readonly-node.is-subtitulo { font-size: 15px; font-weight: 820; }
.planning-diagram-readonly-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1.5px dashed color-mix(in srgb, #745bd4 42%, var(--line));
  border-radius: 13px;
  color: var(--muted);
  font-size: .76rem;
  text-align: center;
}
.planning-diagram-flow { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 0 5px; }
.planning-diagram-flow span {
  min-width: 120px; max-width: 210px; padding: 10px 12px; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, #745bd4 32%, var(--line)); border-radius: 11px;
  border-color: color-mix(in srgb, var(--preview-node-accent, #745bd4) 34%, var(--line));
  color: var(--preview-node-fg, var(--ink));
  background: var(--preview-node-bg, var(--surface)); font-size: .75rem; text-align: center;
}
.planning-diagram-flow i { color: #735bd3; font-size: 1.25rem; font-style: normal; font-weight: 900; }
.planning-block-config-dialog { width: min(700px, calc(100vw - 28px)); }
.planning-block-config-form { max-height: calc(100vh - 130px); padding: 20px; overflow-y: auto; }
.planning-block-config-form > .form-actions { justify-content: flex-end; }
.planning-block-config-body { display: grid; gap: 14px; }
.planning-block-config-field { min-width: 0; display: grid; gap: 6px; }
.planning-block-config-field > span { font-size: .78rem; font-weight: 820; }
.planning-block-config-field > small { color: var(--muted); font-size: .68rem; }
.planning-list-style-options { display: flex; flex-wrap: wrap; gap: 7px; }
.planning-media-editor.is-config-media {
  margin: 0;
  padding: 11px;
  border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.planning-media-editor.is-config-media .planning-media-preview { width: min(100%, 330px); justify-self: center; }
.planning-block-toggle {
  padding: 11px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
}
.planning-block-toggle input { margin-top: 3px; }
.planning-block-toggle > span { display: grid; gap: 3px; }
.planning-block-toggle strong { font-size: .78rem; }
.planning-block-toggle small { color: var(--muted); font-size: .68rem; }
.planning-rich-card-preview.is-config-preview { margin-bottom: 2px; }
.planning-card-config-intro { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.planning-card-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.planning-card-preview-heading > strong { font-size: .82rem; }
.planning-card-preview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.planning-card-preview-action {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
  font-size: .67rem;
  font-weight: 790;
  cursor: pointer;
}
.planning-card-preview-action.is-active { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.planning-card-preview-action.is-danger { border-color: color-mix(in srgb, #c94b4b 35%, var(--line)); color: #b83d3d; background: color-mix(in srgb, #d85252 10%, var(--surface)); }
.planning-card-layout-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px;
  gap: 7px;
}
.planning-card-image-button,
.planning-card-orientation-button {
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line));
  border-radius: 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  font-size: .73rem;
  font-weight: 790;
  cursor: pointer;
}
.planning-card-image-button { color: color-mix(in srgb, var(--primary) 82%, var(--ink)); }
.planning-card-orientation-button { display: grid; grid-template-columns: auto auto; place-content: center; align-items: center; gap: 6px; }
.planning-card-orientation-button > span { font-size: 1.15rem; line-height: 1; }
.planning-card-orientation-button > strong { font-size: .68rem; }
.planning-card-orientation-button.is-active {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 15%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.planning-checklist-surface.is-config-preview { margin: 0; }
.planning-config-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  font-size: .72rem;
  line-height: 1.45;
}
.planning-block-config-dialog.is-diagram-editor {
  width: calc(100vw - 24px);
  max-width: 1680px;
  height: calc(100vh - 24px);
  max-height: none;
  display: none;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 18px;
}
.planning-block-config-dialog.is-diagram-editor[open] { display: grid; }
.planning-block-config-dialog.is-diagram-editor .planning-unit-dialog-heading {
  min-height: 62px;
  padding: 10px 14px;
}
.planning-block-config-dialog.is-diagram-editor .planning-unit-dialog-heading > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.planning-block-config-dialog.is-diagram-editor .planning-unit-dialog-heading .step-badge { flex: 0 0 auto; }
.planning-block-config-dialog.is-diagram-editor .planning-unit-dialog-heading h2 {
  margin: 0;
  overflow: hidden;
  font-size: 1.1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-block-config-dialog.is-diagram-editor .planning-block-config-form {
  min-height: 0;
  max-height: none;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
}
.planning-block-config-dialog.is-diagram-editor .planning-block-config-body {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.planning-block-config-dialog.is-diagram-editor .planning-block-config-form > .form-actions {
  min-height: 64px;
  margin: 0;
  padding: 10px 16px;
  align-items: center;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
}
.planning-diagram-editor {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.planning-diagram-toolbar {
  min-height: 54px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  overflow: visible;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
  scrollbar-width: thin;
}
.planning-diagram-tool {
  min-height: 38px;
  padding: 8px 13px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--primary) 21%, var(--line));
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
  box-shadow: 0 2px 6px rgba(20, 30, 44, .08);
  font-size: .72rem;
  font-weight: 790;
  cursor: pointer;
}
.planning-diagram-tool:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); outline: none; }
.planning-diagram-tool.is-active,
.planning-diagram-tool.is-primary { border-color: var(--primary); color: #fff; background: var(--primary); }
.planning-diagram-tool.is-add { color: color-mix(in srgb, var(--primary) 84%, var(--ink)); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.planning-diagram-tool.is-arrange { color: color-mix(in srgb, #8053c8 82%, var(--ink)); background: color-mix(in srgb, #8b5ed2 10%, var(--surface)); }
.planning-diagram-tool.is-danger { border-color: color-mix(in srgb, #d04a4a 38%, var(--line)); color: #bd4141; background: color-mix(in srgb, #dc5555 9%, var(--surface)); }
.planning-diagram-tool:disabled { opacity: .42; cursor: default; }
.planning-diagram-zoom-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
}
.planning-diagram-zoom-group .planning-diagram-tool { min-width: 38px; padding-inline: 9px; border: 0; border-radius: 0; background: transparent; }
.planning-diagram-zoom-group .is-zoom-value { min-width: 56px; font-size: .68rem; }
.planning-diagram-connection-mode {
  padding: 9px 12px;
  display: grid;
  gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}
.planning-diagram-connection-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.planning-diagram-connection-heading > div:first-child { min-width: 0; display: grid; gap: 2px; }
.planning-diagram-connection-heading strong { font-size: .78rem; }
.planning-diagram-connection-heading small { overflow: hidden; color: var(--muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.planning-diagram-mode-actions,
.planning-diagram-connection-options { display: flex; align-items: center; gap: 6px; overflow-x: auto; }
.planning-diagram-swatch {
  width: 31px;
  height: 31px;
  padding: 0;
  flex: 0 0 31px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--swatch-bg);
  cursor: pointer;
}
.planning-diagram-swatch.is-active { border: 3px solid var(--swatch-accent); box-shadow: 0 0 0 2px var(--surface); }
.planning-diagram-workspace {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
}
.planning-diagram-viewport {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
  scrollbar-width: thin;
}
.planning-diagram-stage { position: relative; }
.planning-diagram-layer {
  position: absolute;
  inset: 0 auto auto 0;
  overflow: hidden;
  transform-origin: 0 0;
  background-color: var(--surface);
}
.planning-diagram-layer.has-grid {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}
.planning-diagram-connections-svg {
  position: absolute;
  inset: 0;
  width: 3200px;
  height: 2400px;
  pointer-events: none;
}
.planning-diagram-node {
  position: absolute;
  z-index: 2;
  padding: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  touch-action: none;
  border: 1px solid color-mix(in srgb, var(--node-accent) 30%, var(--line));
  border-radius: 14px;
  color: var(--node-fg);
  background: var(--node-bg);
  box-shadow: 0 3px 9px rgba(18, 27, 40, .13);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  user-select: none;
  cursor: grab;
}
.planning-diagram-node.is-titulo { font-size: 18px; font-weight: 900; }
.planning-diagram-node.is-subtitulo { font-size: 15px; font-weight: 820; }
.planning-diagram-node:is(.is-selected, .is-source) {
  border: 3px solid var(--node-accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--node-accent) 28%, transparent);
}
.planning-diagram-node.is-source { outline: 3px solid color-mix(in srgb, #9c5bd6 55%, transparent); outline-offset: 3px; }
.planning-diagram-node.is-dragging { cursor: grabbing; z-index: 4; }
.planning-diagram-empty-canvas {
  position: absolute;
  left: 90px;
  top: 90px;
  width: 320px;
  min-height: 130px;
  padding: 20px;
  display: grid;
  place-items: center;
  gap: 5px;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  text-align: center;
}
.planning-diagram-empty-canvas strong { color: var(--ink); }
.planning-diagram-empty-canvas span { font-size: .72rem; }
.planning-diagram-inspector {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr);
  gap: 7px 12px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
  box-shadow: 0 -7px 18px rgba(18, 26, 38, .08);
}
.planning-diagram-inspector > strong { grid-column: 1; font-size: .7rem; }
.planning-diagram-inspector textarea { grid-column: 1; min-height: 58px; resize: vertical; }
.planning-diagram-inspector-controls {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}
.planning-diagram-connections-panel {
  width: min(390px, 38vw);
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: var(--surface);
}
.planning-diagram-connections-heading,
.planning-diagram-connection-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.planning-diagram-connections-heading > strong { font-size: .88rem; }
.planning-diagram-connection-card {
  padding: 10px;
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-soft) 60%, var(--surface));
}
.planning-diagram-connection-card > div:first-child strong {
  min-width: 0;
  overflow: hidden;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-diagram-connection-card-options { display: flex; flex-wrap: wrap; gap: 5px; }
@media (max-width: 900px) {
  .planning-block-config-dialog.is-diagram-editor {
    width: calc(100vw - 10px);
    height: calc(100vh - 10px);
    border-radius: 12px;
  }
  .planning-diagram-workspace { position: relative; grid-template-columns: minmax(0, 1fr); }
  .planning-diagram-connections-panel {
    position: absolute;
    z-index: 8;
    inset: 0 0 0 auto;
    width: min(430px, 92vw);
    box-shadow: -14px 0 28px rgba(0, 0, 0, .22);
  }
  .planning-diagram-inspector { grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); }
}
html[data-theme="dark"] .planning-block-card {
  border-color: color-mix(in srgb, var(--planning-block-accent) 42%, var(--line));
  border-left-color: color-mix(in srgb, var(--planning-block-accent) 82%, #fff 8%);
  background: color-mix(in srgb, var(--surface) 91%, white 9%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .035);
}
html[data-theme="dark"] .planning-block-heading {
  background: color-mix(in srgb, var(--planning-block-accent) 13%, var(--surface));
}
.planning-paper-list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 13px;
}
.planning-paper-card {
  position: relative;
  min-width: 0;
  min-height: 170px;
  padding: 22px 17px 15px 29px;
  overflow: visible;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, #c9b98e 68%, var(--line));
  border-left: 4px solid var(--planning-plan-unit-color, #9aa4b1);
  border-radius: 7px 17px 7px 7px;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(216, 95, 95, .19) 18px 19px, transparent 19px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(91, 132, 168, .11) 31px 32px),
    color-mix(in srgb, #fffdf5 92%, var(--surface));
  box-shadow: 0 7px 16px rgba(46, 51, 57, .09);
}
.planning-paper-card::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 27px;
  height: 27px;
  border-left: 1px solid color-mix(in srgb, #c9b98e 68%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, #c9b98e 68%, var(--line));
  border-radius: 0 16px 0 5px;
  background: linear-gradient(225deg, var(--surface-soft) 49%, #e8dfc8 50%);
  pointer-events: none;
}
.planning-paper-content { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.planning-paper-card h4 {
  max-width: calc(100% - 18px);
  margin: 0 0 12px;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-paper-meta { margin: 0; color: var(--muted); font-size: .75rem; font-weight: 680; }
.planning-paper-footer {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.planning-paper-footer small {
  overflow: hidden;
  color: var(--muted);
  font-size: .65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-paper-status {
  padding: 4px 8px;
  border-radius: 999px;
  color: #735800;
  background: #fff0b6;
  font-size: .66rem;
  font-weight: 830;
  white-space: nowrap;
}
.planning-paper-status.is-script-ready,
.planning-paper-status.is-taught { color: #12623c; background: #dff6e9; }
.planning-paper-status.is-preparing { color: #234f9e; background: #e4edff; }
.planning-paper-status.is-needs-reinforcement { color: #8d2b23; background: #fde7e4; }
.planning-paper-card .planning-plan-actions {
  position: absolute;
  z-index: 8;
  top: 31px;
  right: 11px;
  margin: 0;
  padding: 0;
  border: 0;
}
.planning-paper-card .planning-overflow-trigger {
  width: 32px;
  height: 32px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.planning-paper-card .planning-overflow-trigger:hover,
.planning-paper-card .planning-overflow-trigger:focus-visible {
  border-color: transparent;
  outline: none;
  background: color-mix(in srgb, var(--planning-plan-unit-color) 10%, transparent);
}
.planning-paper-card .planning-overflow-panel {
  top: calc(100% + 5px);
  min-width: 190px;
}
.planning-overflow-submenu { position: relative; }
.planning-overflow-submenu > summary {
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: .82rem;
  list-style: none;
  white-space: nowrap;
}
.planning-overflow-submenu > summary::after { content: '›'; color: var(--muted); font-size: 1.05rem; }
.planning-overflow-submenu > summary::-webkit-details-marker { display: none; }
.planning-overflow-submenu > summary:hover { background: rgba(47,111,237,.08); }
.planning-overflow-submenu-panel {
  position: absolute;
  z-index: 24;
  top: -6px;
  right: calc(100% + 5px);
  min-width: 180px;
  max-height: 270px;
  padding: 6px;
  display: grid;
  gap: 3px;
  overflow-y: auto;
  border: 1px solid var(--border, #d9dee8);
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 26px rgba(20, 30, 50, .16);
}

body:has(.planning-web-workspace.is-editor-open) .planning-chrome-controls :is(#planningNewUnitButton, #planningNewPlanButton) { display: none; }
.planning-unit-empty-copy {
  min-height: 92px;
  margin: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--planning-unit-accent) 36%, var(--line));
  border-radius: 13px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  font-size: .8rem;
  text-align: center;
}
.planning-unit-add-plan {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--planning-unit-accent) 45%, var(--line));
  color: color-mix(in srgb, var(--planning-unit-accent) 76%, var(--ink));
  background: color-mix(in srgb, var(--planning-unit-accent) 5%, var(--surface));
}
.planning-unit-add-plan:hover {
  background: color-mix(in srgb, var(--planning-unit-accent) 11%, var(--surface));
}

html[data-theme="dark"] .planning-paper-card {
  border-color: color-mix(in srgb, #a99461 48%, var(--line));
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(231, 118, 118, .16) 18px 19px, transparent 19px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(113, 154, 188, .09) 31px 32px),
    color-mix(in srgb, var(--surface) 94%, #776a43 6%);
}

/* El editor del guion utiliza todo el lienzo y oculta los dos paneles maestros. */
.planning-web-workspace.is-editor-open .planning-subject-master-layout { grid-template-columns: minmax(0, 1fr); }
.planning-web-workspace.is-editor-open .planning-subjects-panel,
.planning-web-workspace.is-editor-open .planning-units-panel { display: none; }
.planning-web-workspace.is-editor-open .planning-plans-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.planning-web-workspace.is-editor-open .planning-plan-editor {
  width: 100%;
  max-width: none;
}
.planning-web-workspace.is-editor-open #planningNewPlanButton { display: none; }

/* Vista de lectura del guion: contenido limpio, sin las cards técnicas del editor. */
.planning-plan-editor.is-view-mode {
  padding: clamp(18px, 2.2vw, 32px);
}
.planning-plan-editor.is-view-mode .planning-editor-heading {
  padding-bottom: 18px;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
}
.planning-plan-editor.is-view-mode .planning-editor-heading h3 {
  margin: 5px 0 4px;
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
}
.planning-plan-editor.is-view-mode .planning-editor-heading p {
  margin: 0;
  font-size: .8rem;
}
.planning-plan-editor.is-view-mode .planning-plan-form { margin-top: 22px; }
.planning-plan-editor.is-view-mode :is(.planning-editor-action-cards, .planning-block-toolbar),
.planning-plan-editor.is-view-mode .planning-plan-form > .form-actions { display: none; }
.planning-plan-editor.is-view-mode .planning-block-list {
  width: min(100%, 1120px);
  margin-inline: auto;
  padding: 0;
  gap: clamp(16px, 2.3vw, 28px);
}
.planning-reading-block {
  min-width: 0;
  margin: 0;
}
.planning-reading-block:is(.is-texto, .is-texto-negrita, .is-texto-cursiva) {
  color: var(--ink);
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
  line-height: 1.72;
  white-space: pre-wrap;
}
.planning-reading-block:is(.is-texto, .is-texto-negrita, .is-texto-cursiva) :is(p, strong, em) {
  margin: 0;
  white-space: pre-wrap;
}
.planning-reading-block.is-subtitulo h3 {
  margin: 4px 0 -4px;
  color: color-mix(in srgb, var(--primary) 74%, var(--ink));
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 900;
  line-height: 1.22;
}
.planning-reading-block:is(.is-objetivo, .is-resaltado, .is-ejemplo) {
  padding: 16px 18px;
  border-radius: 15px;
}
.planning-reading-block.is-objetivo {
  border: 1px solid color-mix(in srgb, #2f6fed 34%, var(--line));
  color: #2859b5;
  background: color-mix(in srgb, #4d84ec 11%, var(--surface));
}
.planning-reading-block.is-resaltado {
  border: 1px solid color-mix(in srgb, #8d5bd1 31%, var(--line));
  color: #7441b9;
  background: color-mix(in srgb, #a66ee9 11%, var(--surface));
}
.planning-reading-block.is-ejemplo {
  border: 1.5px dashed color-mix(in srgb, #19a7a0 68%, var(--line));
  color: #168d88;
  background: color-mix(in srgb, #2ab8ae 5%, var(--surface));
}
.planning-reading-callout-heading {
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.planning-reading-callout-heading > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 11%, transparent);
  font-weight: 900;
}
.planning-reading-callout-heading > strong {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.planning-reading-block:is(.is-objetivo, .is-resaltado, .is-ejemplo) > p {
  margin: 0;
  color: var(--ink);
  line-height: 1.62;
  white-space: pre-wrap;
}
.planning-reading-block.is-ejemplo > p { font-style: italic; }
.planning-reading-block.is-cita {
  padding: 4px 0 4px 19px;
  border-left: 4px solid color-mix(in srgb, var(--primary) 54%, var(--line));
  color: color-mix(in srgb, var(--primary) 68%, var(--ink));
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.65;
}
.planning-reading-block.is-cita p { margin: 0; white-space: pre-wrap; }
.planning-reading-block.is-actividad {
  padding: 17px 18px;
  border: 1px solid color-mix(in srgb, #d99d16 33%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, #f0b52d 11%, var(--surface));
}
.planning-reading-activity-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.planning-reading-activity-heading > span {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #745100;
  background: color-mix(in srgb, #e6a91d 20%, var(--surface));
  font-weight: 900;
}
.planning-reading-activity-heading h3 { margin: 0; font-size: 1.05rem; }
.planning-reading-block.is-actividad > p {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1.5px dashed color-mix(in srgb, #be8510 43%, var(--line));
  line-height: 1.62;
  white-space: pre-wrap;
}
.planning-plan-editor.is-view-mode .planning-checklist-surface { margin: 0; }
.planning-plan-editor.is-view-mode .planning-rich-card-editor { margin: 0; }
.planning-plan-editor.is-view-mode .planning-diagram-preview { margin: 0; }
.planning-reading-table { margin: 0; }
.planning-reading-table th,
.planning-reading-table td {
  padding: 11px 13px;
  color: var(--ink);
  line-height: 1.45;
  white-space: pre-wrap;
}
.planning-reading-image {
  display: grid;
  place-items: center;
}
.planning-reading-image .planning-media-preview {
  width: min(100%, 720px);
  max-height: 520px;
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
  background: var(--surface);
}
.planning-reading-image.is-pequeno .planning-media-preview { width: min(42%, 420px); }
.planning-reading-image.is-grande .planning-media-preview { width: 100%; }
.planning-reading-empty {
  margin: 0;
  padding: 34px;
  border: 1px dashed var(--line);
  border-radius: 15px;
  color: var(--muted);
  text-align: center;
}

/* Modo clase · presentación de escritorio inspirada en la experiencia Android. */
body.is-planning-class-mode { overflow: hidden; }
.planning-class-mode-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: #0d121b;
}
.planning-class-mode-dialog[open] { display: block; }
.planning-class-mode-dialog::backdrop { background: #080b11; }
.planning-class-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 5px auto minmax(0, 1fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 10%, rgba(63, 94, 136, .2), transparent 42%),
    linear-gradient(145deg, #111824, #090d14 72%);
}
.planning-class-time-progress {
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
}
.planning-class-time-progress > span,
.planning-class-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f5c542, #32bb76 52%, #3b91f5);
  transition: width .42s ease;
}
.planning-class-header {
  min-height: 64px;
  padding: 8px clamp(14px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: auto minmax(90px, auto) minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #f5f7fb;
  background: rgba(10, 15, 23, .84);
  backdrop-filter: blur(18px);
}
.planning-class-icon-button,
.planning-class-timer-close,
.planning-class-quick-timer-banner > button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 13px;
  color: inherit;
  background: rgba(255, 255, 255, .06);
  font-size: 1.35rem;
  cursor: pointer;
}
.planning-class-clock-copy { min-width: 0; display: grid; gap: 2px; }
.planning-class-clock-copy strong { font-size: 1.22rem; font-weight: 920; letter-spacing: .02em; }
.planning-class-clock-copy small {
  color: #70dca5;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .13em;
}
.planning-class-clock-copy small.is-paused { color: #ffd15d; }
.planning-class-header-progress {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.planning-class-mode-dialog:not(.is-session-active) .planning-class-header-progress { display: none; }
.planning-class-header-progress-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  color: #aeb9c8;
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .055em;
}
.planning-class-header-progress-copy > strong {
  overflow: hidden;
  color: #eaf0f8;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-class-header-progress-copy > span:nth-of-type(1) { color: #91baff; }
.planning-class-header-progress-copy > span:last-child { color: #f4f7fb; }
.planning-class-header-progress .planning-class-progress-track { height: 6px; }
.planning-class-header-actions { display: flex; align-items: center; gap: 8px; }
.planning-class-header-button {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  color: #eef3fb;
  background: rgba(255, 255, 255, .07);
  font-weight: 820;
  cursor: pointer;
}
.planning-class-header-button.is-finish { color: #ffb8b8; border-color: rgba(255, 123, 123, .3); }
.planning-class-prepare {
  width: min(100% - 32px, 780px);
  min-height: 0;
  margin-inline: auto;
  padding: clamp(28px, 5vh, 64px) 0 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}
.planning-class-ready-card,
.planning-class-duration-block,
.planning-class-help-card {
  padding: 21px 23px;
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  color: #f2f5fa;
  background: rgba(255, 255, 255, .065);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}
.planning-class-ready-label { color: #71a9ff; font-size: .68rem; font-weight: 920; letter-spacing: .12em; }
.planning-class-ready-card h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.55rem); }
.planning-class-ready-card p { margin: 0; color: #aeb9c9; }
.planning-class-duration-block > strong,
.planning-class-help-card > strong { font-size: 1rem; }
.planning-class-duration-options,
.planning-class-timer-presets { display: flex; flex-wrap: wrap; gap: 9px; }
.planning-class-duration-chip {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  color: #e8edf6;
  background: rgba(255, 255, 255, .06);
  font-weight: 800;
  cursor: pointer;
}
.planning-class-duration-chip.is-active {
  border-color: #4b91f1;
  color: #fff;
  background: #286cc9;
  box-shadow: 0 6px 18px rgba(35, 109, 209, .27);
}
.planning-class-help-card span { color: #c7d0dd; line-height: 1.45; }
.planning-class-help-card span::before { content: '•'; margin-right: 9px; color: #6da8ff; }
.planning-class-start-button,
.planning-class-start-timer {
  min-height: 56px;
  padding: 13px 22px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #276ed2, #5b50db);
  box-shadow: 0 13px 28px rgba(45, 90, 210, .31);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}
.planning-class-session {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}
.planning-class-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .11); }
.planning-class-quick-timer-banner {
  margin: 0;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(109, 168, 255, .26);
  border-radius: 13px;
  color: #dceaff;
  background: rgba(42, 98, 164, .28);
}
.planning-class-header > .planning-class-quick-timer-banner { min-width: 166px; }
.planning-class-quick-timer-banner[hidden] { display: none; }
.planning-class-quick-timer-banner.is-complete {
  border-color: rgba(255, 112, 112, .45);
  color: #ffe2e2;
  background: rgba(159, 43, 48, .38);
  animation: planningTimerPulse 1.1s ease-in-out infinite alternate;
}
.planning-class-timer-icon { font-size: 1.45rem; }
.planning-class-quick-timer-banner > div { display: grid; gap: 1px; }
.planning-class-quick-timer-banner > div > strong { font-size: .62rem; }
.planning-class-quick-timer-banner > div > span { font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.planning-class-quick-timer-banner > button { width: 30px; height: 30px; font-size: .9rem; }
@keyframes planningTimerPulse { to { box-shadow: 0 0 0 4px rgba(255, 92, 92, .13); } }
.planning-class-stage {
  min-height: 0;
  padding: clamp(10px, 1.65vw, 22px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.planning-class-slide-frame {
  width: min(100%, 1640px);
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  padding: clamp(26px, 4.2vw, 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 34px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 22px;
  color: var(--ink);
  background:
    radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 35%),
    var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
  scrollbar-width: thin;
}
.planning-class-slide-frame[data-density="compact"] {
  padding: clamp(22px, 3vw, 44px);
  gap: clamp(14px, 1.7vw, 24px);
}
.planning-class-slide-frame[data-density="dense"] {
  padding: clamp(17px, 2.2vw, 32px);
  justify-content: flex-start;
  gap: clamp(11px, 1.3vw, 18px);
}
.planning-class-slide-frame[data-density="ultra"] {
  padding: clamp(12px, 1.5vw, 22px);
  justify-content: flex-start;
  gap: 9px;
}
.planning-class-slide-frame[data-density="visual"] {
  padding: clamp(14px, 1.8vw, 26px);
  justify-content: center;
}
.planning-class-slide-frame.is-entering { animation: planningSlideEnter .22s ease-out; }
@keyframes planningSlideEnter { from { opacity: .35; transform: translateX(18px) scale(.992); } }
.planning-class-slide-frame .planning-class-block:is(.is-texto, .is-texto-negrita, .is-texto-cursiva) {
  font-size: clamp(1.25rem, 2.15vw, 2rem);
  line-height: 1.56;
}
.planning-class-slide-frame[data-density="compact"] .planning-class-block:is(.is-texto, .is-texto-negrita, .is-texto-cursiva) {
  font-size: clamp(1.08rem, 1.65vw, 1.55rem);
}
.planning-class-slide-frame[data-density="dense"] .planning-class-block:is(.is-texto, .is-texto-negrita, .is-texto-cursiva) {
  font-size: clamp(.96rem, 1.35vw, 1.28rem);
  line-height: 1.46;
}
.planning-class-slide-frame[data-density="ultra"] .planning-class-block:is(.is-texto, .is-texto-negrita, .is-texto-cursiva) {
  font-size: clamp(.82rem, 1.05vw, 1.05rem);
  line-height: 1.38;
}
.planning-class-slide-frame .planning-class-block.is-subtitulo h3 {
  font-size: clamp(1.65rem, 3.1vw, 2.9rem);
}
.planning-class-slide-frame[data-density="compact"] .planning-class-block.is-subtitulo h3 { font-size: clamp(1.45rem, 2.35vw, 2.15rem); }
.planning-class-slide-frame[data-density="dense"] .planning-class-block.is-subtitulo h3 { font-size: clamp(1.25rem, 1.85vw, 1.75rem); }
.planning-class-slide-frame[data-density="ultra"] .planning-class-block.is-subtitulo h3 { font-size: clamp(1.05rem, 1.45vw, 1.4rem); }
.planning-class-slide-frame .planning-class-block:is(.is-objetivo, .is-resaltado, .is-ejemplo, .is-actividad) {
  padding: clamp(18px, 2.5vw, 32px);
}
.planning-class-slide-frame .planning-reading-callout-heading > strong { font-size: .82rem; }
.planning-class-slide-frame .planning-class-block:is(.is-objetivo, .is-resaltado, .is-ejemplo, .is-actividad) > p {
  font-size: clamp(1.12rem, 1.75vw, 1.65rem);
}
.planning-class-slide-frame[data-density="compact"] .planning-class-block:is(.is-objetivo, .is-resaltado, .is-ejemplo, .is-actividad) { padding: clamp(14px, 1.8vw, 22px); }
.planning-class-slide-frame[data-density="compact"] .planning-class-block:is(.is-objetivo, .is-resaltado, .is-ejemplo, .is-actividad) > p { font-size: clamp(1rem, 1.4vw, 1.3rem); }
.planning-class-slide-frame[data-density="dense"] .planning-class-block:is(.is-objetivo, .is-resaltado, .is-ejemplo, .is-actividad),
.planning-class-slide-frame[data-density="ultra"] .planning-class-block:is(.is-objetivo, .is-resaltado, .is-ejemplo, .is-actividad) { padding: clamp(10px, 1.25vw, 16px); }
.planning-class-slide-frame[data-density="dense"] .planning-class-block:is(.is-objetivo, .is-resaltado, .is-ejemplo, .is-actividad) > p { font-size: clamp(.9rem, 1.12vw, 1.1rem); line-height: 1.42; }
.planning-class-slide-frame[data-density="ultra"] .planning-class-block:is(.is-objetivo, .is-resaltado, .is-ejemplo, .is-actividad) > p { font-size: clamp(.8rem, .96vw, .98rem); line-height: 1.36; }
.planning-class-slide-frame .planning-checklist-row { font-size: clamp(1.05rem, 1.7vw, 1.55rem); }
.planning-class-slide-frame[data-density="dense"] .planning-checklist-row { font-size: clamp(.88rem, 1.08vw, 1.08rem); }
.planning-class-slide-frame[data-density="ultra"] .planning-checklist-row { font-size: clamp(.78rem, .92vw, .95rem); }
.planning-class-slide-frame .planning-rich-card-preview { min-height: min(44vh, 390px); }
.planning-class-slide-frame[data-density="dense"] .planning-rich-card-preview,
.planning-class-slide-frame[data-density="ultra"] .planning-rich-card-preview { min-height: 0; }
.planning-class-slide-frame .planning-rich-card-copy strong { font-size: clamp(1.3rem, 2.1vw, 2rem); }
.planning-class-slide-frame .planning-rich-card-copy p { font-size: clamp(1.02rem, 1.5vw, 1.38rem); }
.planning-class-slide-frame .planning-diagram-readonly-canvas { height: min(49vh, 470px) !important; }
.planning-class-slide-frame .planning-reading-image .planning-media-preview { max-height: 52vh; }
.planning-class-controls {
  min-height: 58px;
  padding: 6px clamp(14px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) 72px minmax(210px, 1fr) 72px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(8, 13, 20, .9);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .2);
}
.planning-class-control-button {
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 13px;
  color: #eef3fb;
  background: rgba(255, 255, 255, .07);
  font-size: .9rem;
  font-weight: 850;
  cursor: pointer;
}
.planning-class-control-button.is-navigation { font-size: 1.55rem; }
.planning-class-control-button.is-primary { border-color: #397fe2; background: #286cc9; }
.planning-class-control-button:disabled { opacity: .32; cursor: default; }
.planning-class-keyboard-hint { color: #8e9bad; font-size: .7rem; text-align: center; }
.planning-class-timer-panel {
  position: fixed;
  inset: 0;
  z-index: 20;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(3, 6, 11, .72);
  backdrop-filter: blur(8px);
}
.planning-class-timer-panel[hidden] { display: none; }
.planning-class-timer-dialog {
  position: relative;
  width: min(100%, 470px);
  padding: 28px;
  display: grid;
  gap: 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  color: #eef3fb;
  background: #151c27;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .5);
}
.planning-class-timer-close { position: absolute; top: 13px; right: 13px; color: #eef3fb; }
.planning-class-timer-dialog-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: #a9cbff; background: rgba(74, 139, 226, .18); font-size: 1.5rem; }
.planning-class-timer-dialog h2 { margin: 0; font-size: 1.45rem; }
.planning-class-timer-dialog p { margin: -7px 0 1px; color: #aeb9c9; }
.planning-class-timer-dialog label { display: grid; gap: 7px; color: #d9e1ed; font-size: .78rem; font-weight: 800; }
.planning-class-timer-dialog input {
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  color: #f4f7fb;
  background: rgba(255, 255, 255, .06);
  font: inherit;
}
.planning-class-start-timer { min-height: 50px; }
html[data-theme="dark"] .planning-reading-block.is-objetivo { color: #9dbdff; }
html[data-theme="dark"] .planning-reading-block.is-resaltado { color: #d5adff; }
html[data-theme="dark"] .planning-reading-block.is-ejemplo { color: #83ded7; }

html[data-theme="dark"] .planning-subjects-panel,
html[data-theme="dark"] .planning-subject-main > .planning-web-heading {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

@media (max-width: 900px) {
  .planning-subject-master-layout { grid-template-columns: 1fr; }
  .planning-subjects-panel { position: static; max-height: none; }
  .planning-subject-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .module-context-bar:has(.planning-chrome-controls) { flex-wrap: wrap; }
  .planning-chrome-controls { width: 100%; margin-left: 0; }
  .planning-chrome-context { flex: 1 1 150px; max-width: none; }
  .planning-diagram-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .planning-diagram-toolbar::-webkit-scrollbar { display: none; }
  .planning-class-header {
    grid-template-columns: auto minmax(82px, auto) minmax(150px, 1fr) auto auto;
    gap: 9px;
  }
  .planning-class-header-progress-copy { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .planning-class-header-progress-copy > strong { display: none; }
  .planning-class-header > .planning-class-quick-timer-banner { min-width: 145px; gap: 7px; }
  .planning-class-keyboard-hint { display: none; }
  .planning-class-controls { grid-template-columns: minmax(150px, 1fr) 68px 68px; }
}

@media (max-width: 620px) {
  body[data-start-module="planning"] .page-shell { width: min(100% - 18px, 620px); }
  .planning-subject-main > .planning-web-heading { align-items: stretch; }
  .planning-subject-main > .planning-web-heading .button { width: 100%; }
  .planning-subject-list { grid-template-columns: 1fr; }
  .planning-plan-card { align-items: stretch; flex-direction: column; }
  .planning-plan-actions { justify-content: flex-start; }
  .planning-hierarchy-summary { grid-template-columns: 40px minmax(0, 1fr) 16px; }
  .planning-hierarchy-summary.has-unit-menu { grid-template-columns: 40px minmax(0, 1fr) 34px 16px; }
  .planning-hierarchy-count { grid-column: 2; width: max-content; }
  .planning-hierarchy-summary:not(.has-unit-menu) .planning-hierarchy-chevron { grid-column: 3; grid-row: 1 / 3; }
  .planning-hierarchy-summary.has-unit-menu .planning-unit-menu-space { grid-column: 3; grid-row: 1 / 3; }
  .planning-hierarchy-summary.has-unit-menu .planning-hierarchy-chevron { grid-column: 4; grid-row: 1 / 3; }
  .planning-unit-config-menu { top: 19px; right: 45px; }
  .planning-paper-list { grid-template-columns: 1fr; }
  .planning-editor-action-cards { grid-template-columns: 1fr; }
  .planning-ai-primary-fields { grid-template-columns: 1fr; }
  .planning-ai-dialog-panel .planning-ai-actions,
  .planning-ai-dialog-panel #planningGenerateAiButton { width: 100%; }
  .planning-block-toolbar { align-items: stretch; flex-direction: column; }
  .planning-block-toolbar .button { width: 100%; }
  .planning-block-heading { align-items: flex-start; flex-direction: column; }
  .planning-block-actions { width: 100%; justify-content: flex-end; }
  .planning-block-card .planning-mini-action.is-configure { margin-right: auto; }
  .planning-rich-card-preview { grid-template-columns: 1fr; }
  .planning-rich-card-editor > .planning-media-editor { grid-template-columns: 1fr; }
  .planning-card-preview-heading { align-items: flex-start; flex-direction: column; }
  .planning-card-preview-actions { width: 100%; justify-content: flex-start; }
  .planning-card-layout-controls { grid-template-columns: minmax(0, 1fr) repeat(2, 76px); }
  .planning-card-orientation-button > strong { display: none; }
  .planning-plan-editor.is-view-mode { padding: 15px; }
  .planning-plan-editor.is-view-mode .planning-editor-heading { align-items: stretch; }
  .planning-plan-editor.is-view-mode .planning-editor-heading .button { width: 100%; }
  .planning-reading-image.is-pequeno .planning-media-preview { width: min(76%, 420px); }
  .planning-block-config-dialog.is-diagram-editor .planning-unit-dialog-heading { padding: 11px 13px; }
  .planning-block-config-dialog.is-diagram-editor .planning-unit-dialog-heading .step-badge { display: none; }
  .planning-diagram-connection-heading { align-items: flex-start; flex-direction: column; }
  .planning-diagram-mode-actions { width: 100%; }
  .planning-diagram-inspector { grid-template-columns: 1fr; }
  .planning-diagram-inspector > strong,
  .planning-diagram-inspector textarea,
  .planning-diagram-inspector-controls { grid-column: 1; grid-row: auto; }
  .planning-diagram-inspector-controls { padding-bottom: 2px; }
  .planning-block-card > .planning-media-editor .planning-media-preview { width: 100%; }
  .planning-block-config-form .field-row { grid-template-columns: 1fr; }
  .planning-chrome-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planning-chrome-controls > .button { width: 100%; }
  .planning-class-header {
    min-height: 62px;
    padding: 7px 9px;
    grid-template-columns: auto minmax(72px, auto) minmax(0, 1fr) auto;
    gap: 7px;
  }
  .planning-class-clock-copy strong { font-size: 1rem; }
  .planning-class-clock-copy small { font-size: .55rem; letter-spacing: .08em; }
  .planning-class-header-progress { grid-column: 1 / -1; grid-row: 2; gap: 4px; }
  .planning-class-header-progress-copy { grid-template-columns: minmax(0, 1fr) auto; }
  .planning-class-header > .planning-class-quick-timer-banner {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }
  .planning-class-quick-timer-banner .planning-class-timer-icon,
  .planning-class-quick-timer-banner > div > strong { display: none; }
  .planning-class-header-actions { grid-column: 4; grid-row: 1; }
  .planning-class-header-button { min-height: 40px; padding-inline: 10px; font-size: .7rem; }
  .planning-class-header-button.is-finish { display: none; }
  .planning-class-prepare { width: min(100% - 22px, 780px); padding-top: 20px; }
  .planning-class-ready-card,
  .planning-class-duration-block,
  .planning-class-help-card { padding: 17px; }
  .planning-class-stage { padding: 10px; }
  .planning-class-slide-frame {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    padding: 22px 18px;
    justify-content: flex-start;
    border-radius: 16px;
  }
  .planning-class-controls { min-height: 54px; padding: 5px 9px; grid-template-columns: minmax(128px, 1fr) 54px 54px; }
  .planning-class-control-button { min-height: 42px; padding-inline: 8px; font-size: .72rem; }
  .planning-class-timer-dialog { padding: 23px 20px; }
  .planning-overflow-submenu-panel {
    position: static;
    margin: 3px 0 5px;
    max-height: 210px;
    box-shadow: none;
  }
}

/* ========================================================================== */
/* Auto y Coevaluación · navegación aulas → campañas → detalle                */
/* ========================================================================== */
body[data-start-module="autoCoeval"] .page-shell {
  width: min(1500px, calc(100% - 28px));
  padding-top: 24px;
  padding-bottom: 44px;
}

#autoCoevalView {
  display: grid;
  gap: 14px;
}
#autoCoevalView[hidden] { display: none !important; }

.auto-coeval-top-card {
  position: sticky;
  top: 10px;
  z-index: 24;
  min-height: 66px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  box-shadow: 0 9px 24px rgba(25, 42, 72, .08);
  backdrop-filter: blur(16px);
}
.auto-coeval-back-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
}
.auto-coeval-top-identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}
.auto-coeval-top-identity strong,
.auto-coeval-top-identity > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-coeval-top-identity strong { color: var(--ink); font-size: .96rem; font-weight: 850; }
.auto-coeval-top-identity > span:last-child { color: var(--muted); font-size: .8rem; font-weight: 720; }
.auto-coeval-top-separator { color: var(--muted); opacity: .55; }
.auto-coeval-top-controls { display: flex; justify-content: flex-end; }
.auto-coeval-top-controls .button { min-height: 40px; }

.auto-coeval-workspace {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(225px, 270px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}
.auto-coeval-workspace.is-detail { grid-template-columns: minmax(0, 1fr); }
.auto-coeval-classroom-sidebar {
  position: sticky;
  top: 90px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
  box-shadow: 0 7px 18px rgba(25, 42, 72, .065);
}
.auto-coeval-sidebar-heading {
  padding: 3px 4px 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}
.auto-coeval-sidebar-heading small { color: var(--muted); font-size: .68rem; }
.auto-coeval-aula-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.auto-coeval-aula-card {
  width: 100%;
  min-height: 64px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 14px;
  color: var(--ink);
  text-align: left;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 3px 9px rgba(26, 40, 70, .045);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.auto-coeval-aula-card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  transform: translateY(-1px);
}
.auto-coeval-aula-card.is-selected {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  box-shadow: 0 6px 15px color-mix(in srgb, var(--primary) 12%, transparent);
}
.auto-coeval-aula-icon {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 11px;
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 14%, transparent);
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}
.auto-coeval-aula-copy { min-width: 0; display: grid; gap: 2px; }
.auto-coeval-aula-copy strong {
  overflow: hidden;
  font-size: .86rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-coeval-aula-copy small,
.auto-coeval-aula-stats { color: var(--muted); font-size: .69rem; font-weight: 650; }
.auto-coeval-aula-stats { grid-column: 2; }

.auto-coeval-main { min-width: 0; }
.auto-coeval-main > .auto-coeval-panel { margin-top: 0; }
.auto-coeval-section-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 7px 18px rgba(25, 42, 72, .065);
}
.auto-coeval-section-panel .auto-coeval-subheading {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 12px;
}
.auto-coeval-section-panel .auto-coeval-subheading > button[hidden] { display: none !important; }
.auto-coeval-panel-kicker {
  color: var(--primary);
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.auto-coeval-section-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.auto-coeval-section-actions .evaluation-count {
  background: color-mix(in srgb, var(--primary) 11%, var(--surface-soft));
  color: color-mix(in srgb, var(--primary) 78%, var(--ink));
}
.auto-coeval-campaign-list { display: grid; gap: 9px; }
.auto-coeval-campaign-card {
  width: 100%;
  min-height: 78px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  text-align: left;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  box-shadow: none;
}
.auto-coeval-campaign-card:hover {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  transform: translateY(-1px);
}
.auto-coeval-campaign-main { min-width: 0; }
.auto-coeval-campaign-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-coeval-campaign-progress {
  min-width: 88px;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--surface-soft);
}
.auto-coeval-campaign-arrow { color: var(--muted); font-size: 1.6rem; line-height: 1; text-align: right; }
.auto-coeval-detail-panel { min-width: 0; }

.auto-coeval-gradebook-card {
  padding: 0;
  overflow: hidden;
}
.auto-coeval-gradebook-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(390px, .8fr);
  align-items: stretch;
}
.auto-coeval-gradebook-content {
  min-width: 0;
  padding: clamp(20px, 2vw, 28px);
}
.auto-coeval-gradebook-content > .section-heading { margin-bottom: 18px; }
.auto-coeval-gradebook-content > .muted {
  max-width: 880px;
  margin: 0 0 18px;
  line-height: 1.55;
}
.auto-coeval-gradebook-content .auto-coeval-weight-grid {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  max-width: 650px;
  margin-bottom: 16px;
}
.auto-coeval-gradebook-content > .field-help { max-width: 900px; }
.auto-coeval-gradebook-actions {
  min-width: 0;
  padding: clamp(20px, 2vw, 28px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 12px;
  border-left: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 58%, transparent);
}
.auto-coeval-gradebook-actions > .button {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding-inline: 14px;
  justify-content: center;
  text-align: center;
}
.auto-coeval-gradebook-actions #autoCoevalSavePdfEvidence { grid-column: 1 / -1; }

.auto-coeval-tables-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.auto-coeval-table-panel {
  min-width: 0;
  padding: 0;
}
.auto-coeval-table-panel > .section-heading {
  margin: 0;
  padding: 0 5px 11px;
}
.auto-coeval-table-panel > .section-heading h3 { margin-bottom: 0; }
.auto-coeval-classroom-table-wrap {
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-radius: 18px;
  background: var(--clay-surface-strong);
  box-shadow: var(--clay-card-shadow-soft);
}
.auto-coeval-classroom-table {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.auto-coeval-classroom-table.is-pairing th:nth-child(1) { width: 43%; }
.auto-coeval-classroom-table.is-pairing th:nth-child(2) { width: 42%; }
.auto-coeval-classroom-table.is-pairing th:nth-child(3) { width: 15%; }
.auto-coeval-classroom-table.is-results th:nth-child(1) { width: 51%; }
.auto-coeval-classroom-table.is-results th:nth-child(2) { width: 11%; }
.auto-coeval-classroom-table.is-results th:nth-child(3) { width: 22%; }
.auto-coeval-classroom-table.is-results th:nth-child(4) { width: 16%; }
.auto-coeval-classroom-table thead th {
  padding: 12px 11px;
  border-bottom: 0;
  color: var(--on-user-primary);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--user-primary) 84%, white),
    var(--user-primary));
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.auto-coeval-classroom-table tbody td {
  padding: 11px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: color-mix(in srgb, var(--clay-surface-strong) 97%, transparent);
  vertical-align: middle;
}
.auto-coeval-classroom-table thead th:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--on-user-primary) 30%, transparent);
}
.auto-coeval-classroom-table tbody td:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
}
.auto-coeval-classroom-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--user-primary) 4%, var(--clay-surface-strong));
}
.auto-coeval-classroom-table tbody tr:last-child td { border-bottom: 0; }
.auto-coeval-student-name {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-coeval-classroom-table th:first-child,
.auto-coeval-classroom-table td:first-child { text-align: left; }
.auto-coeval-classroom-table th:not(:first-child),
.auto-coeval-classroom-table td:not(:first-child) { text-align: center; }

html[data-theme="dark"] .auto-coeval-top-card,
html[data-theme="dark"] .auto-coeval-classroom-sidebar,
html[data-theme="dark"] .auto-coeval-section-panel {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

@media (max-width: 900px) {
  .auto-coeval-top-card { position: static; }
  .auto-coeval-workspace { grid-template-columns: 1fr; }
  .auto-coeval-classroom-sidebar { position: static; }
  .auto-coeval-aula-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .auto-coeval-gradebook-layout { grid-template-columns: 1fr; }
  .auto-coeval-gradebook-actions {
    border-top: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .auto-coeval-top-card { grid-template-columns: 42px minmax(0, 1fr); }
  .auto-coeval-top-controls { grid-column: 1 / -1; }
  .auto-coeval-top-controls .button { width: 100%; }
  .auto-coeval-section-panel .auto-coeval-subheading { grid-template-columns: 1fr; }
  .auto-coeval-section-actions { justify-content: space-between; }
  .auto-coeval-campaign-card { grid-template-columns: 1fr 24px; }
  .auto-coeval-campaign-progress { grid-column: 1; grid-row: 2; justify-self: start; }
  .auto-coeval-campaign-arrow { grid-column: 2; grid-row: 1 / 3; }
  .auto-coeval-gradebook-content .auto-coeval-weight-grid { grid-template-columns: 1fr; }
  .auto-coeval-gradebook-actions { grid-template-columns: 1fr; }
  .auto-coeval-gradebook-actions #autoCoevalSavePdfEvidence { grid-column: auto; }
}

@media (max-width: 760px) {
  .auto-coeval-tables-grid { grid-template-columns: 1fr; }
}

/* F3 · las cuatro acciones de cada estudiante comparten todo el ancho. */
.evaluation-reference-workspace .evaluation-closure-row-actions {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.evaluation-reference-workspace .evaluation-closure-row-actions > .button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin: 0;
  padding-inline: 12px;
  justify-content: center;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 900px) {
  .evaluation-reference-workspace .evaluation-closure-row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .evaluation-reference-workspace .evaluation-closure-row-actions {
    grid-template-columns: 1fr;
  }
}

/* Los archivos del diálogo institucional necesitan aire propio; el control
   nativo deja de quedar pegado al contorno del campo. */
#schoolSettingsDialog input[type="file"] {
  min-height: 62px;
  padding: 9px 11px;
  overflow: hidden;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--clay-surface-strong) 94%, transparent);
}

#schoolSettingsDialog input[type="file"]::file-selector-button {
  min-height: 40px;
  margin: 0 12px 0 0;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--user-primary));
  border-radius: 11px;
  color: var(--primary-dark);
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
  box-shadow: var(--clay-card-shadow-soft);
  cursor: pointer;
}

html[data-theme="dark"] #schoolSettingsDialog input[type="file"]::file-selector-button {
  color: color-mix(in srgb, var(--user-primary) 42%, #fff);
}

/* Zona destructiva: contraste correcto en ambos temas y separación clara
   entre explicación, confirmación y acción. */
#schoolSettingsDialog .privacy-card {
  display: grid;
  gap: 12px;
  padding: 20px;
}

#schoolSettingsDialog .privacy-card strong {
  color: var(--ink);
}

#schoolSettingsDialog .privacy-card p {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
  line-height: 1.5;
}

#schoolSettingsDialog .privacy-card input {
  margin: 2px 0 0;
}

#schoolSettingsDialog .privacy-card .button-danger {
  width: fit-content;
  min-width: 190px;
  margin-top: 2px;
}

html[data-theme="dark"] #schoolSettingsDialog .privacy-card {
  border-left-color: #b6a34e;
  background: color-mix(in srgb, #514813 78%, var(--clay-surface));
}

html[data-theme="dark"] #schoolSettingsDialog .privacy-card strong {
  color: #fff6cf;
}

html[data-theme="dark"] #schoolSettingsDialog .privacy-card p {
  color: #eee4b4;
}

@media (max-width: 560px) {
  #schoolSettingsDialog .privacy-card .button-danger {
    width: 100%;
  }
}

/* ========================================================================== */
/* 026Z8L · Pulido modal, hover clay y chip de escuela activa                  */
/* ========================================================================== */

/* El diálogo institucional se separa visualmente del contenido de fondo. */
#schoolSettingsDialog::backdrop {
  background: rgba(4, 8, 12, .66);
  backdrop-filter: blur(4px) saturate(.9);
}

/* Hover clay más contenido: conserva profundidad sin el halo blanco fuerte. */
button.module-card:hover {
  box-shadow:
    -4px -4px 10px color-mix(in srgb, var(--clay-surface-strong) 58%, transparent),
    8px 10px 20px rgba(58, 76, 104, .20),
    inset 1px 1px 1px rgba(255, 255, 255, .42);
}

html[data-theme="dark"] button.module-card:hover {
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .30),
    inset 1px 1px 1px rgba(255, 255, 255, .045),
    inset -2px -2px 5px rgba(0, 0, 0, .10);
}

/* Estado activo más sutil y compatible con ambos temas. */
.status-pill {
  border-color: color-mix(in srgb, var(--success) 28%, var(--line));
  color: color-mix(in srgb, var(--success) 70%, var(--ink));
  background: color-mix(in srgb, var(--success) 10%, var(--clay-surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

.status-pill span {
  background: color-mix(in srgb, var(--success) 82%, var(--user-primary));
}

html[data-theme="dark"] .status-pill {
  border-color: color-mix(in srgb, var(--success) 32%, var(--line));
  color: color-mix(in srgb, var(--success) 42%, #f4f8f5);
  background: color-mix(in srgb, var(--success) 13%, var(--clay-surface));
  box-shadow: none;
}

/* ========================================================================== */
/* 026Z8M.1 · Cabecera compacta + carga estable sin bloquear la página         */
/* ========================================================================== */

/* En una página interna el espacio superior debe tener el mismo ritmo que la
   separación entre la cabecera contextual y el contenido. */
body[data-start-module] .page-shell {
  padding-top: 18px;
}

.module-context-bar {
  min-height: 50px;
  margin: 0 0 16px;
  padding: 6px 10px 6px 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 18px;
  color: var(--ink);
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
  box-shadow: var(--clay-card-shadow-soft);
}

.module-context-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
}

.module-context-school {
  max-width: min(34vw, 280px);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 850;
  line-height: 1.2;
}

.module-context-separator {
  color: color-mix(in srgb, var(--muted) 68%, transparent);
  font-size: .75rem;
  line-height: 1;
}

.module-context-name {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 780;
  line-height: 1.2;
}

.module-back-icon-button {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  align-self: center;
  border-radius: 13px;
  color: var(--ink);
  flex: 0 0 auto;
}

/* El botón conserva la clase histórica web-back-button. Su margin-bottom
   antiguo era el responsable de que quedara desalineado dentro de la card. */
.module-context-bar .web-back-button,
.module-context-bar .module-back-icon-button {
  margin: 0 !important;
}

.arrow-back-icon {
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
  fill: currentColor;
  color: currentColor;
  pointer-events: none;
}

.arrow-back-icon path { fill: currentColor; }

.module-heading-compact {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.module-heading-copy-hidden { display: none !important; }

/* Si el encabezado antiguo sólo contenía texto, deja de reservar espacio. */
.module-heading-compact:not(:has(.button-row)) { display: none !important; }

.module-context-actions {
  margin-left: auto;
  flex: 0 1 auto;
  justify-content: flex-end;
}

html[data-theme="dark"] .module-context-bar {
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .18), inset 1px 1px 0 rgba(255,255,255,.025);
}

/* Primera pintura: sólo evitamos el flash del formulario de acceso mientras
   Supabase determina si la sesión persiste. El resto de la app no se bloquea. */
html.pd-session-pending body[data-start-module] #authView {
  visibility: hidden !important;
}

html.pd-session-pending body[data-start-module] .page-shell::before {
  content: "";
  display: block;
  height: 50px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--clay-surface-strong) 72%, white) 50%, transparent 80%),
    var(--clay-surface);
  background-size: 220% 100%, auto;
  animation: pd-module-skeleton 1.05s ease-in-out infinite;
  box-shadow: var(--clay-card-shadow-soft);
}

/* Estado breve y deliberado mientras se resuelve escuela/módulo. Sustituye a
   pintar listas vacías y luego reemplazarlas. */
.module-boot-loading,
.module-loading-state {
  min-height: 104px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 22px;
  color: var(--muted);
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
  box-shadow: var(--clay-card-shadow-soft);
  font-size: .9rem;
  font-weight: 760;
}

.module-boot-loading[hidden],
.module-loading-state[hidden] { display: none !important; }

.module-view-hydrating > :not(.module-context-bar):not(.module-loading-state) {
  display: none !important;
}

.module-loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.module-loading-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--user-primary, var(--primary));
  animation: pd-loading-dot .85s ease-in-out infinite alternate;
}
.module-loading-dots i:nth-child(2) { animation-delay: .14s; }
.module-loading-dots i:nth-child(3) { animation-delay: .28s; }

.module-loading-shimmer {
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--user-primary, var(--primary)) 22%, transparent),
    var(--user-primary, var(--primary)),
    color-mix(in srgb, var(--user-primary, var(--primary)) 22%, transparent));
  background-size: 180% 100%;
  animation: pd-module-skeleton .9s linear infinite;
}

@keyframes pd-module-skeleton {
  from { background-position: 180% 0, 0 0; }
  to { background-position: -40% 0, 0 0; }
}

@keyframes pd-loading-dot {
  from { opacity: .35; transform: translateY(1px); }
  to { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  html.pd-session-pending body[data-start-module] .page-shell::before,
  .module-loading-dots i,
  .module-loading-shimmer { animation: none; }
}

@media (max-width: 860px) {
  .module-context-bar { flex-wrap: wrap; }
  .module-context-actions {
    width: 100%;
    margin-left: 46px;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  body[data-start-module] .page-shell { padding-top: 12px; }
  .module-context-bar { margin-bottom: 12px; }
  .module-context-school { max-width: 42vw; }
  .module-context-name { max-width: 40vw; }
  .module-context-actions {
    margin-left: 0;
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Aulas · UI alineada con Android                                             */
/* -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.android-vector-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.android-vector-icon.icon-add {
  -webkit-mask-image: url('../assets/icons/ic_add.svg');
  mask-image: url('../assets/icons/ic_add.svg');
}
.android-vector-icon.icon-calendar {
  -webkit-mask-image: url('../assets/icons/ic_calendar.svg');
  mask-image: url('../assets/icons/ic_calendar.svg');
}
.android-vector-icon.icon-classrooms {
  -webkit-mask-image: url('../assets/icons/ic_classrooms.svg');
  mask-image: url('../assets/icons/ic_classrooms.svg');
}

.classrooms-module-heading { margin: 0 !important; }
.classroom-context-actions {
  gap: 9px;
  align-items: center;
  flex-wrap: nowrap;
}
.classroom-year-context-control {
  min-width: 132px;
  height: 38px;
  margin: 0;
  padding: 0 8px 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 13px;
  color: var(--muted);
  background: color-mix(in srgb, var(--clay-surface-strong) 76%, transparent);
}
.classroom-year-context-control .android-vector-icon { width: 17px; height: 17px; }
.classroom-year-context-control select {
  width: auto;
  min-width: 82px;
  height: 34px;
  margin: 0;
  padding: 0 28px 0 3px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background-color: transparent;
  box-shadow: none;
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
}
.classroom-year-context-control select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--user-primary) 60%, transparent);
  outline-offset: 1px;
  border-radius: 8px;
}
.classroom-new-button {
  min-height: 38px;
  padding: 8px 13px;
  gap: 7px;
  white-space: nowrap;
}
.classroom-new-button .android-vector-icon { width: 18px; height: 18px; }

/* El rail izquierdo queda exclusivamente para la navegación de aulas. */
.classroom-sidebar {
  padding: 12px;
}
.classroom-sidebar .classroom-list {
  margin: 0;
}
.classroom-list-empty {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
}

.classroom-create-dialog {
  width: min(620px, calc(100vw - 28px));
  max-width: 620px;
  max-height: min(88vh, 760px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 26px;
  color: var(--ink);
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28), var(--clay-card-shadow-soft);
}
.classroom-create-dialog::backdrop {
  background: rgba(6, 10, 14, .62);
  backdrop-filter: blur(3px);
}
.classroom-create-form {
  padding: clamp(20px, 4vw, 28px);
  gap: 16px;
}
.classroom-dialog-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin-bottom: 2px;
}
.classroom-dialog-heading h2 {
  margin: 3px 0 4px;
  font-size: 1.28rem;
  line-height: 1.15;
}
.classroom-dialog-heading p { margin: 0; font-size: .84rem; }
.classroom-dialog-icon {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: var(--on-user-primary);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--user-primary) 80%, white),
    var(--user-primary));
  box-shadow: 0 7px 14px color-mix(in srgb, var(--user-primary) 22%, transparent),
    inset 1px 1px 1px rgba(255,255,255,.22);
}
.classroom-dialog-icon .android-vector-icon { width: 27px; height: 27px; }
.dialog-icon-close {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 13px;
  color: var(--muted);
  background: color-mix(in srgb, var(--clay-surface-strong) 84%, transparent);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.dialog-icon-close:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--user-primary) 34%, var(--line));
}
.classroom-input-with-icon { position: relative; }
.classroom-input-with-icon .android-vector-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.classroom-input-with-icon input { padding-left: 42px; }
.classroom-dialog-actions {
  margin-top: 3px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}
.classroom-dialog-actions .button { gap: 7px; }
.classroom-dialog-actions .android-vector-icon { width: 18px; height: 18px; }

html[data-theme="dark"] .classroom-year-context-control {
  background: color-mix(in srgb, var(--clay-surface-strong) 90%, black 10%);
}
html[data-theme="dark"] .classroom-create-dialog {
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,.025);
}

@media (max-width: 860px) {
  .module-context-actions.classroom-context-actions {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }
}
@media (max-width: 620px) {
  .module-context-bar:has(.classroom-context-actions) {
    align-items: center;
  }
  .module-context-actions.classroom-context-actions {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .classroom-year-context-control { min-width: 0; width: 100%; }
  .classroom-year-context-control select { width: 100%; }
  .classroom-create-dialog .field-row { grid-template-columns: 1fr; }
  .classroom-dialog-heading { align-items: start; }
  .classroom-dialog-icon { width: 44px; height: 44px; border-radius: 14px; }
}

/* -------------------------------------------------------------------------- */
/* Aulas · Fix selector de año + iconos web-safe                              */
/* -------------------------------------------------------------------------- */
/*
 * No dependemos de archivos SVG externos para estos iconos. GitHub Pages,
 * caches o rutas relativas ya no pueden dejarlos como espacios vacíos.
 */
.android-vector-icon.icon-add {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 12h8m-4-4v8M4 16.8V7.2C4 6.08 4 5.52 4.218 5.092A2 2 0 0 1 5.092 4.218C5.52 4 6.08 4 7.2 4h9.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C20 5.52 20 6.08 20 7.2v9.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C18.48 20 17.921 20 16.804 20H7.197c-1.118 0-1.678 0-2.105-.218a2 2 0 0 1-.874-.874C4 18.48 4 17.92 4 16.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 12h8m-4-4v8M4 16.8V7.2C4 6.08 4 5.52 4.218 5.092A2 2 0 0 1 5.092 4.218C5.52 4 6.08 4 7.2 4h9.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C20 5.52 20 6.08 20 7.2v9.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C18.48 20 17.921 20 16.804 20H7.197c-1.118 0-1.678 0-2.105-.218a2 2 0 0 1-.874-.874C4 18.48 4 17.92 4 16.8Z'/%3E%3C/svg%3E");
}
.android-vector-icon.icon-calendar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='M60 4H48c0-2.211-1.789-4-4-4s-4 1.789-4 4H24c0-2.211-1.789-4-4-4s-4 1.789-4 4H4C1.789 4 0 5.789 0 8v52c0 2.211 1.789 4 4 4h56c2.211 0 4-1.789 4-4V8c0-2.211-1.789-4-4-4ZM8 12h8c0 2.211 1.789 4 4 4s4-1.789 4-4h16c0 2.211 1.789 4 4 4s4-1.789 4-4h8v8H8v-8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='M60 4H48c0-2.211-1.789-4-4-4s-4 1.789-4 4H24c0-2.211-1.789-4-4-4s-4 1.789-4 4H4C1.789 4 0 5.789 0 8v52c0 2.211 1.789 4 4 4h56c2.211 0 4-1.789 4-4V8c0-2.211-1.789-4-4-4ZM8 12h8c0 2.211 1.789 4 4 4s4-1.789 4-4h16c0 2.211 1.789 4 4 4s4-1.789 4-4h8v8H8v-8Z'/%3E%3C/svg%3E");
}
.android-vector-icon.icon-classrooms {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M23 22a1 1 0 0 1-2 0 8.964 8.964 0 0 0-6.3-8.588 1 1 0 1 1 .6-1.908A10.956 10.956 0 0 1 23 22ZM23 4v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V9h-4v7a1 1 0 0 1-2 0v-2.941A9.01 9.01 0 0 0 3 22a1 1 0 0 1-2 0 11.01 11.01 0 0 1 10-10.949V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v1h3a1 1 0 0 1 1 1ZM17 3h-4v4h4Zm4 2h-2v4h2ZM10 19a2 2 0 1 0-2 2 2 2 0 0 0 2-2Zm8-1a1 1 0 1 0-1 1 1 1 0 0 0 1-1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M23 22a1 1 0 0 1-2 0 8.964 8.964 0 0 0-6.3-8.588 1 1 0 1 1 .6-1.908A10.956 10.956 0 0 1 23 22ZM23 4v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V9h-4v7a1 1 0 0 1-2 0v-2.941A9.01 9.01 0 0 0 3 22a1 1 0 0 1-2 0 11.01 11.01 0 0 1 10-10.949V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v1h3a1 1 0 0 1 1 1ZM17 3h-4v4h4Zm4 2h-2v4h2ZM10 19a2 2 0 1 0-2 2 2 2 0 0 0 2-2Zm8-1a1 1 0 1 0-1 1 1 1 0 0 0 1-1Z'/%3E%3C/svg%3E");
}

/* Selector de año: control consistente, sin el chrome nativo claro del navegador. */
.classroom-year-context-control {
  position: relative;
  min-width: 168px;
  height: 42px;
  padding: 0 37px 0 12px;
  gap: 9px;
  overflow: visible;
}
.classroom-year-context-control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 17px;
  height: 17px;
  pointer-events: none;
  background: currentColor;
  opacity: .82;
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.classroom-year-context-control .android-vector-icon {
  width: 18px;
  height: 18px;
  color: color-mix(in srgb, var(--user-primary) 82%, var(--ink));
}
.classroom-year-context-control select {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  color: var(--ink);
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.classroom-year-context-control select::-ms-expand { display: none; }
.classroom-year-context-control select option {
  color: var(--ink);
  background: var(--clay-surface-strong);
  font-weight: 700;
}
html[data-theme="dark"] .classroom-year-context-control select {
  color-scheme: dark;
}
html[data-theme="light"] .classroom-year-context-control select {
  color-scheme: light;
}
.classroom-year-context-control:focus-within {
  border-color: color-mix(in srgb, var(--user-primary) 70%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--user-primary) 14%, transparent);
}
.classroom-year-context-control select:focus-visible {
  outline: none;
}

.classroom-new-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.classroom-new-button .android-vector-icon {
  width: 19px;
  height: 19px;
  color: currentColor;
}

@media (max-width: 620px) {
  .classroom-year-context-control { min-width: 0; width: 100%; }
}

/* -------------------------------------------------------------------------- */
/* Aulas · detalle compacto, menú MoreVert y modal de estudiante              */
/* -------------------------------------------------------------------------- */
.classroom-detail-heading-compact {
  align-items: center;
  min-height: 46px;
  margin-bottom: 16px;
}
.classroom-detail-heading-compact > h2 {
  margin: 0;
  min-width: 0;
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  line-height: 1.15;
}
.classroom-detail-toolbar {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.classroom-actions-menu {
  position: relative;
  flex: 0 0 auto;
}
.classroom-actions-menu > summary {
  list-style: none;
}
.classroom-actions-menu > summary::-webkit-details-marker { display: none; }
.classroom-more-button {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--clay-surface-strong) 92%, transparent);
  box-shadow: var(--clay-card-shadow-soft);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.classroom-more-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--user-primary) 38%, var(--line));
  background: color-mix(in srgb, var(--user-primary) 8%, var(--clay-surface-strong));
}
.classroom-more-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--user-primary) 24%, transparent);
  outline-offset: 2px;
}
.classroom-more-button svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}
.classroom-actions-dropdown {
  position: absolute;
  z-index: 70;
  top: calc(100% + 8px);
  right: 0;
  width: min(238px, calc(100vw - 32px));
  padding: 7px;
  display: grid;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 17px;
  background: var(--clay-surface-strong);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .20), var(--clay-card-shadow-soft);
}
.classroom-menu-item {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 11px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
  cursor: pointer;
}
.classroom-menu-item svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  opacity: .78;
}
.classroom-menu-item:hover:not(:disabled) {
  background: color-mix(in srgb, var(--user-primary) 10%, var(--clay-surface));
}
.classroom-menu-item:disabled {
  opacity: .38;
  cursor: default;
}
.classroom-menu-item.is-danger { color: var(--danger, #b34747); }
.classroom-menu-separator {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}
.classroom-add-student-button {
  min-height: 42px;
  padding-inline: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.classroom-add-student-button svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: currentColor;
}

.student-dialog {
  width: min(590px, calc(100vw - 28px));
  max-width: 590px;
  max-height: min(88vh, 720px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 26px;
  color: var(--ink);
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .30), var(--clay-card-shadow-soft);
}
.student-dialog::backdrop {
  background: rgba(6, 10, 14, .64);
  backdrop-filter: blur(3px);
}
.student-dialog-form {
  padding: clamp(20px, 4vw, 28px);
  display: grid;
  gap: 18px;
}
.student-dialog-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
}
.student-dialog-heading h3 {
  margin: 3px 0 0;
  font-size: 1.22rem;
  line-height: 1.18;
}
.student-dialog-icon {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: var(--on-user-primary);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--user-primary) 80%, white),
    var(--user-primary));
  box-shadow: 0 7px 14px color-mix(in srgb, var(--user-primary) 22%, transparent),
    inset 1px 1px 1px rgba(255,255,255,.22);
}
.student-dialog-icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}
.student-dialog-fields {
  display: grid;
  gap: 14px;
}
.student-dialog-fields label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 750;
}
.student-dialog-fields .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.student-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 2px;
}
html[data-theme="dark"] .student-dialog {
  box-shadow: 0 30px 80px rgba(0, 0, 0, .56), inset 1px 1px 0 rgba(255,255,255,.025);
}

@media (max-width: 680px) {
  .classroom-detail-heading-compact {
    align-items: flex-start;
    gap: 12px;
  }
  .classroom-detail-toolbar {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
  .classroom-add-student-button { flex: 1 1 auto; justify-content: center; }
  .student-dialog-fields .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .classroom-add-student-button span { display: none; }
  .classroom-add-student-button { width: 42px; padding: 0; flex: 0 0 42px; }
}


/* -------------------------------------------------------------------------- */
/* Aulas · nómina tipo Android: encabezado primario + columna de acciones     */
/* -------------------------------------------------------------------------- */
.student-table-wrap {
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-radius: 18px;
  background: var(--clay-surface-strong);
  box-shadow: var(--clay-card-shadow-soft);
}
.student-table {
  width: 100%;
  min-width: 660px;
  border-collapse: separate;
  border-spacing: 0;
}
.student-table thead th {
  padding: 13px 12px;
  border-bottom: 0;
  color: var(--on-user-primary);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--user-primary) 84%, white),
    var(--user-primary));
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.student-table thead th:first-child { border-top-left-radius: 17px; }
.student-table thead th:last-child { border-top-right-radius: 17px; }
.student-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: color-mix(in srgb, var(--clay-surface-strong) 97%, transparent);
  vertical-align: middle;
}
.student-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--user-primary) 4%, var(--clay-surface-strong));
}
.student-table tbody tr:last-child td { border-bottom: 0; }
.student-table th:first-child,
.student-table td:first-child {
  width: 72px;
  text-align: center;
  font-weight: 800;
}
.student-table th:nth-child(3),
.student-table td:nth-child(3) {
  width: 150px;
  text-align: center;
}
.student-table th:last-child,
.student-table td:last-child {
  width: 240px;
  text-align: right;
}
.student-table .student-actions {
  justify-content: flex-end;
  align-items: center;
}
html[data-theme="dark"] .student-table-wrap {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 1px 1px 0 rgba(255,255,255,.025);
}


/* -------------------------------------------------------------------------- */
/* Aulas · delimitadores de columnas + modales de traslado/retiro             */
/* -------------------------------------------------------------------------- */
.student-table thead th:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--on-user-primary) 30%, transparent);
}
.student-table tbody td:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
}
.student-table tbody tr:nth-child(even) td:not(:last-child) {
  border-right-color: color-mix(in srgb, var(--line) 82%, var(--user-primary) 8%);
}

.student-action-dialog {
  width: min(520px, calc(100% - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: visible;
  background: transparent;
  color: var(--ink);
}
.student-action-dialog::backdrop {
  background: rgba(5, 10, 8, .64);
  backdrop-filter: blur(3px);
}
.student-action-dialog-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-radius: 24px;
  background: var(--clay-surface-strong);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .24), inset 1px 1px 0 rgba(255,255,255,.08);
}
.student-action-dialog-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.student-action-dialog-heading h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.2;
}
.student-action-dialog-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--user-primary);
  background: color-mix(in srgb, var(--user-primary) 14%, var(--clay-surface-strong));
  border: 1px solid color-mix(in srgb, var(--user-primary) 26%, var(--line));
}
.student-action-dialog-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.student-action-dialog-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.student-action-dialog-field {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 750;
}
.student-action-dialog-field select {
  width: 100%;
  min-height: 48px;
}
.student-action-dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 2px;
}
.student-action-dialog-warning {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 9%, var(--clay-surface-strong));
  color: color-mix(in srgb, var(--danger) 78%, var(--ink));
  font-weight: 700;
  line-height: 1.45;
}
.student-action-dialog.is-danger .student-action-dialog-icon {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--clay-surface-strong));
  border-color: color-mix(in srgb, var(--danger) 26%, var(--line));
}
html[data-theme="dark"] .student-action-dialog-card {
  box-shadow: 0 26px 68px rgba(0, 0, 0, .46), inset 1px 1px 0 rgba(255,255,255,.03);
}
html[data-theme="dark"] .student-table tbody td:not(:last-child) {
  border-right-color: color-mix(in srgb, var(--line) 75%, rgba(255,255,255,.05));
}
@media (max-width: 560px) {
  .student-action-dialog-card { padding: 20px; border-radius: 20px; }
  .student-action-dialog-actions { display: grid; grid-template-columns: 1fr; }
  .student-action-dialog-actions .button { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------- */
/* Aulas · edición y archivado en modales                                     */
/* -------------------------------------------------------------------------- */
.classroom-edit-dialog {
  width: min(660px, calc(100vw - 28px));
  max-width: 660px;
}
.classroom-edit-fields select,
.classroom-edit-fields input {
  width: 100%;
}
.classroom-archive-heading {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}
.classroom-archive-heading .dialog-icon-close {
  align-self: start;
}
.classroom-archive-dialog .button-danger {
  min-width: 142px;
}
@media (max-width: 560px) {
  .classroom-edit-dialog {
    width: min(100% - 20px, 660px);
  }
  .classroom-archive-heading {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 11px;
  }
}

/* -------------------------------------------------------------------------- */
/* Materias · rail de aulas + detalle estilo Android                          */
/* -------------------------------------------------------------------------- */
.subjects-module-heading { margin: 0 !important; }
.subject-context-actions {
  gap: 9px;
  align-items: center;
  flex-wrap: nowrap;
}
.subject-year-context-control { min-width: 168px; }
.subject-new-button {
  min-height: 42px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}
.subject-new-button .android-vector-icon { width: 18px; height: 18px; }

.subjects-master-workspace {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.subjects-master-layout {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.subjects-classroom-sidebar,
.subjects-detail-panel {
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: var(--clay-radius-card, 22px);
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
  box-shadow: var(--clay-card-shadow-soft);
}
.subjects-classroom-sidebar {
  position: sticky;
  top: 86px;
  padding: 12px;
}
.subjects-classroom-list {
  display: grid;
  gap: 9px;
}
.subject-classroom-card {
  width: 100%;
  min-height: 66px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 16px;
  color: var(--ink);
  text-align: left;
  background: color-mix(in srgb, var(--clay-surface-strong) 92%, transparent);
  box-shadow: 0 5px 13px rgba(33, 48, 68, .07);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.subject-classroom-card:hover {
  border-color: color-mix(in srgb, var(--user-primary) 34%, var(--line));
  background: color-mix(in srgb, var(--user-primary) 7%, var(--clay-surface-strong));
  box-shadow: 0 7px 16px rgba(23, 36, 52, .11);
}
.subject-classroom-card.is-selected {
  border-color: color-mix(in srgb, var(--user-primary) 54%, var(--line));
  background: color-mix(in srgb, var(--user-primary) 13%, var(--clay-surface-strong));
  box-shadow: 0 7px 17px color-mix(in srgb, var(--user-primary) 13%, transparent);
}
.subject-classroom-card-icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 13px;
  color: var(--user-primary);
  background-color: color-mix(in srgb, var(--user-primary) 15%, transparent);
  -webkit-mask-size: 22px 22px;
  mask-size: 22px 22px;
}
.subject-classroom-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.subject-classroom-card-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: .94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subject-classroom-card-copy small {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 650;
}

.subjects-detail-panel {
  min-width: 0;
  min-height: 330px;
  padding: 18px;
}
.subjects-detail-heading {
  margin-bottom: 15px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
}
.subjects-detail-heading h2 {
  margin: 4px 0 5px;
  color: var(--ink);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.2;
}
.subjects-detail-heading p { margin: 0; }
.subjects-empty-state { min-height: 230px; }
.subject-master-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.subject-master-card {
  min-width: 0;
  min-height: 168px;
  padding: 15px;
  grid-template-columns: 7px minmax(0, 1fr);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
  box-shadow: 0 7px 17px rgba(36, 51, 70, .08);
}
.subject-master-card .subject-color { border-radius: 999px; }
.subject-master-card .subject-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.subject-master-card h4 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 1.04rem;
}
.subject-master-card .subject-state {
  margin-top: 10px;
  color: color-mix(in srgb, var(--success) 84%, var(--ink));
  background: color-mix(in srgb, var(--success) 10%, var(--clay-surface-strong));
}
.subject-card-actions {
  margin-top: auto;
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.subject-card-action {
  min-height: 36px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .79rem;
}
.subject-action-icon {
  width: 17px;
  height: 17px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.subject-action-edit {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25ZM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25ZM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83Z'/%3E%3C/svg%3E");
}
.subject-action-delete {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12ZM8 9h8v10H8V9Zm7.5-5-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12ZM8 9h8v10H8V9Zm7.5-5-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

/* Modales Materias */
.subject-editor-dialog,
.subject-delete-dialog {
  width: min(560px, calc(100vw - 28px));
  max-width: 560px;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 24px;
  color: var(--ink);
  background: linear-gradient(145deg, var(--clay-surface-strong), var(--clay-surface));
  box-shadow: 0 28px 72px rgba(0, 0, 0, .3), var(--clay-card-shadow-soft);
}
.subject-editor-dialog::backdrop,
.subject-delete-dialog::backdrop {
  background: rgba(5, 9, 13, .64);
  backdrop-filter: blur(3px);
}
.subject-dialog-panel,
.subject-delete-dialog > .form-stack {
  padding: 24px;
}
.dialog-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}
.dialog-title-row h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 1.28rem;
}
.dialog-close-button {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 13px;
  color: var(--muted);
  background: color-mix(in srgb, var(--clay-surface-strong) 84%, transparent);
  font-size: 1.35rem;
  line-height: 1;
}
.dialog-close-button:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--user-primary) 34%, var(--line));
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 2px;
}
.subject-color-field { gap: 8px; }
.subject-color-control {
  min-height: 48px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--clay-surface-strong) 90%, transparent);
}
.subject-color-control .color-input {
  width: 42px;
  min-height: 34px;
  height: 34px;
  padding: 2px;
  border-radius: 10px;
}
.subject-color-value {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.subject-delete-impact {
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 7%, var(--clay-surface-strong));
  line-height: 1.5;
}

html[data-theme="dark"] .subjects-classroom-sidebar,
html[data-theme="dark"] .subjects-detail-panel,
html[data-theme="dark"] .subject-master-card,
html[data-theme="dark"] .subject-editor-dialog,
html[data-theme="dark"] .subject-delete-dialog {
  box-shadow: 0 18px 42px rgba(0,0,0,.30), inset 1px 1px 0 rgba(255,255,255,.025);
}
html[data-theme="dark"] .subject-classroom-card:hover {
  box-shadow: 0 7px 16px rgba(0,0,0,.24);
}

@media (max-width: 960px) {
  .subject-master-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .module-context-actions.subject-context-actions {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .subject-year-context-control { width: 100%; min-width: 0; }
  .subject-year-context-control select { width: 100%; }
  .subjects-master-layout { grid-template-columns: 1fr; }
  .subjects-classroom-sidebar { position: static; }
  .subjects-classroom-list {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}
@media (max-width: 520px) {
  .subject-new-button span:last-child { display: none; }
  .subject-new-button { width: 42px; padding: 0; }
  .subject-dialog-panel,
  .subject-delete-dialog > .form-stack { padding: 20px; }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .dialog-actions .button { width: 100%; justify-content: center; }
}
.subject-master-list.is-loading {
  opacity: .58;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* ═══════════════════════════════════════════════════════════════
   Asistencia · UI compacta con paridad visual Android
   ═══════════════════════════════════════════════════════════════ */
.attendance-heading.module-heading { margin: 0; }
.attendance-context-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}
.attendance-year-context-control { min-width: 158px; }
.attendance-quick-button {
  min-height: 42px;
  gap: 7px;
  white-space: nowrap;
}
.attendance-quick-button svg,
.attendance-export-icon-button svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  flex: 0 0 auto;
}
.attendance-export-icon-button {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  border-radius: 13px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 5px 12px rgba(20, 32, 55, .08);
}
.attendance-export-icon-button:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  transform: translateY(-1px);
}

.attendance-workspace.attendance-workspace-compact {
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.attendance-two-pane-layout {
  display: grid;
  grid-template-columns: minmax(235px, 286px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.attendance-classroom-sidebar {
  position: sticky;
  top: 92px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
  box-shadow: 0 9px 22px rgba(24, 42, 76, .08);
}
.attendance-classroom-list {
  display: grid;
  gap: 9px;
}
.attendance-classroom-card {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 4px 10px rgba(26, 40, 70, .055);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.attendance-classroom-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  box-shadow: 0 7px 14px rgba(26, 40, 70, .08);
}
.attendance-classroom-card.is-selected {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  box-shadow: inset 3px 0 0 var(--primary), 0 5px 12px rgba(26, 40, 70, .06);
}
.attendance-classroom-card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
.attendance-classroom-card-icon svg { width: 21px; height: 21px; fill: currentColor; }
.attendance-classroom-card-copy { min-width: 0; }
.attendance-classroom-card-copy strong,
.attendance-classroom-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attendance-classroom-card-copy strong { font-size: .9rem; }
.attendance-classroom-card-copy small { margin-top: 3px; color: var(--muted); font-size: .73rem; }

.attendance-main-panel { min-width: 0; display: grid; gap: 12px; }
.attendance-main-heading {
  min-width: 0;
  min-height: 72px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(26, 40, 70, .065);
}
.attendance-main-title { min-width: 0; }
.attendance-main-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--primary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.attendance-main-heading h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.attendance-main-heading p { margin: 3px 0 0; font-size: .77rem; }
.attendance-month-control {
  min-width: 168px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.attendance-month-control input {
  min-height: 39px;
  padding: 7px 10px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}
.attendance-table-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 7px 18px rgba(26, 40, 70, .065);
}
.attendance-monthly-heading {
  margin: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.attendance-monthly-heading h4 { margin: 0; font-size: .98rem; }
.attendance-monthly-heading p { margin: 3px 0 0; font-size: .75rem; }
.attendance-compact-legend {
  margin: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.attendance-compact-legend span {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 750;
}

.attendance-real-table-wrap {
  width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}
.attendance-real-table,
.attendance-table.attendance-real-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.attendance-real-table th,
.attendance-real-table td,
.attendance-table.attendance-real-table th,
.attendance-table.attendance-real-table td {
  height: 42px;
  padding: 5px 7px;
  border-right: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  vertical-align: middle;
}
.attendance-real-table tr > *:last-child { border-right: 0; }
.attendance-real-table tbody tr:last-child > * { border-bottom: 0; }
.attendance-real-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  color: var(--ink);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 25%, var(--surface) 75%),
    color-mix(in srgb, var(--primary) 17%, var(--surface) 83%)
  );
  font-size: .68rem;
  font-weight: 850;
  text-align: center;
}
.attendance-real-table .attendance-index-column {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  text-align: center;
}
.attendance-real-table .attendance-student-column {
  width: 184px;
  min-width: 184px;
  max-width: 184px;
  text-align: left;
}
.attendance-real-table thead .attendance-index-column,
.attendance-real-table tbody .attendance-index-column {
  position: sticky;
  left: 0;
  z-index: 5;
}
.attendance-real-table thead .attendance-student-column,
.attendance-real-table tbody .attendance-student-column {
  position: sticky;
  left: 42px;
  z-index: 4;
}
.attendance-real-table tbody .attendance-index-column,
.attendance-real-table tbody .attendance-student-column {
  background: var(--surface);
}
.attendance-real-table tbody tr:nth-child(even) .attendance-index-column,
.attendance-real-table tbody tr:nth-child(even) .attendance-student-column,
.attendance-real-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface) 30%);
}
.attendance-real-table .is-week-end { border-right: 2px solid color-mix(in srgb, var(--primary) 36%, var(--line)); }
.attendance-day-heading { display: grid; place-items: center; gap: 0; min-width: 33px; }
.attendance-day-heading strong { font-size: .7rem; line-height: 1; }
.attendance-day-heading small { margin-top: 3px; font-size: .59rem; opacity: .75; }
.monthly-student-name { display: block; font-size: .78rem; font-weight: 760; line-height: 1.15; }
.monthly-student-nie { display: block; margin-top: 2px; color: var(--muted); font-size: .64rem; font-weight: 500; }
.monthly-status-button {
  position: relative;
  width: 31px;
  height: 31px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 900;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
}
.monthly-status-button:hover { transform: translateY(-1px); box-shadow: 0 4px 9px rgba(20, 35, 65, .12); }
.monthly-status-button.is-present { color: #267a43; background: color-mix(in srgb, #4caf50 18%, var(--surface)); border-color: color-mix(in srgb, #4caf50 30%, transparent); }
.monthly-status-button.is-absent { color: #b73b3b; background: color-mix(in srgb, #ef5350 15%, var(--surface)); border-color: color-mix(in srgb, #ef5350 28%, transparent); }
.monthly-status-button.is-excused { color: #9b6b00; background: color-mix(in srgb, #ffb300 20%, var(--surface)); border-color: color-mix(in srgb, #ffb300 34%, transparent); }
.monthly-status-button.is-unmarked { color: var(--muted); }
.attendance-comment-badge {
  position: absolute;
  top: 2px;
  right: -1px;
  color: var(--primary);
  font-size: .58rem;
  line-height: 1;
  text-shadow: 0 0 0 2px var(--surface);
}

/* Diálogo de estado */
.attendance-status-dialog,
.attendance-comment-editor-dialog,
.attendance-delete-comment-dialog,
.attendance-export-dialog {
  width: min(94vw, 510px);
  max-height: min(86vh, 680px);
  padding: 0;
  overflow: auto;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 26px 68px rgba(8, 15, 29, .32);
}
.attendance-status-dialog::backdrop,
.attendance-comment-editor-dialog::backdrop,
.attendance-delete-comment-dialog::backdrop,
.attendance-export-dialog::backdrop {
  background: rgba(6, 10, 18, .62);
  backdrop-filter: blur(3px);
}
.attendance-status-dialog-inner,
.attendance-export-dialog-inner { padding: 18px; }
.attendance-dialog-heading-row,
.attendance-subsection-heading,
.attendance-comment-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.attendance-dialog-heading-row h2 { margin: 0; font-size: 1.05rem; }
.attendance-dialog-date { margin: 3px 0 0; color: var(--primary); font-size: .78rem; font-weight: 750; }
.attendance-apply-all-row {
  margin: 15px 0;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 80%, var(--primary) 20%);
  font-size: .82rem;
  font-weight: 700;
}
.attendance-apply-all-row input {
  width: 42px;
  height: 23px;
  accent-color: var(--primary);
}
.attendance-status-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.attendance-state-option {
  min-height: 66px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  background: var(--surface-soft);
  font-size: .76rem;
  font-weight: 800;
}
.attendance-state-option svg { width: 24px; height: 24px; fill: currentColor; }
.attendance-state-option .attendance-state-icon { font-size: 1.15rem; font-weight: 900; }
.attendance-state-option.is-current { box-shadow: inset 0 0 0 2px currentColor; }
.attendance-state-option.is-present { color: #2e8548; background: color-mix(in srgb, #4caf50 13%, var(--surface)); }
.attendance-state-option.is-absent { color: #c14444; background: color-mix(in srgb, #ef5350 12%, var(--surface)); }
.attendance-state-option.is-excused { color: #a06f00; background: color-mix(in srgb, #ffb300 17%, var(--surface)); }
.attendance-state-option.is-unmarked { color: var(--muted); }
.attendance-justification-section,
.attendance-comment-section {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.attendance-subsection-heading strong { color: #a06f00; font-size: .8rem; }
.attendance-mini-icon-button {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
}
.attendance-mini-icon-button:hover { background: var(--surface-soft); color: var(--ink); }
.attendance-mini-icon-button.is-danger { color: var(--danger); }
.attendance-mini-icon-button svg { width: 17px; height: 17px; fill: currentColor; }
.attendance-justification-section input[type="search"] {
  width: 100%;
  margin: 8px 0;
  min-height: 39px;
  padding: 8px 10px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}
.attendance-justification-list {
  max-height: 240px;
  display: grid;
  gap: 5px;
  overflow: auto;
}
.attendance-justification-option {
  padding: 9px 10px;
  text-align: left;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
  font-size: .76rem;
}
.attendance-justification-option:hover,
.attendance-justification-option.is-selected {
  color: #8b6100;
  border-color: color-mix(in srgb, #ffb300 42%, var(--line));
  background: color-mix(in srgb, #ffb300 12%, var(--surface));
}
.attendance-comment-empty { text-align: center; }
.attendance-comment-empty p { margin: 0 0 9px; color: var(--muted); font-size: .77rem; }
.attendance-comment-card {
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.attendance-comment-card-head strong { color: var(--primary); font-size: .72rem; }
.attendance-comment-card-head > div { display: flex; gap: 2px; }
.attendance-comment-card p { margin: 6px 0 0; font-size: .78rem; line-height: 1.45; white-space: pre-wrap; }
.attendance-comment-editor-dialog textarea { resize: vertical; min-height: 120px; }

/* Exportación */
.attendance-export-heading { margin-bottom: 14px; }
.attendance-export-range-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 13px;
}
.attendance-export-range-buttons button {
  min-height: 44px;
  padding: 6px 5px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  font-size: .68rem;
  font-weight: 750;
}
.attendance-export-range-buttons button.is-selected {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  background: color-mix(in srgb, var(--primary) 11%, var(--surface));
}
.attendance-export-form { display: grid; gap: 12px; }
.attendance-export-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.attendance-export-date-grid label { display: grid; gap: 5px; color: var(--muted); font-size: .72rem; font-weight: 750; }
.attendance-export-date-grid input { min-height: 40px; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; }
.attendance-export-classroom-card {
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.attendance-export-classroom-card span { color: var(--primary); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.attendance-export-classroom-card strong { font-size: .86rem; }
.attendance-export-classroom-card small { color: var(--muted); font-size: .68rem; }
.attendance-export-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.attendance-drive-export-button { width: 100%; }
.attendance-export-note { margin: 10px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }

.attendance-table.attendance-real-table { width: 100%; }
.attendance-table.attendance-real-table th { white-space: nowrap; }
.attendance-row-status {
  min-width: 84px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: .7rem;
  font-weight: 800;
}
.attendance-row-status.is-present { color: #267a43; background: color-mix(in srgb, #4caf50 15%, var(--surface)); }
.attendance-row-status.is-absent { color: #b73b3b; background: color-mix(in srgb, #ef5350 13%, var(--surface)); }
.attendance-row-status.is-excused { color: #946600; background: color-mix(in srgb, #ffb300 18%, var(--surface)); }
.attendance-row-edit { min-height: 32px; padding: 5px 9px; font-size: .7rem; }

html[data-theme="dark"] .attendance-classroom-sidebar,
html[data-theme="dark"] .attendance-main-heading,
html[data-theme="dark"] .attendance-table-card,
html[data-theme="dark"] .attendance-status-dialog,
html[data-theme="dark"] .attendance-comment-editor-dialog,
html[data-theme="dark"] .attendance-delete-comment-dialog,
html[data-theme="dark"] .attendance-export-dialog {
  border-color: color-mix(in srgb, var(--line) 78%, transparent);
}
html[data-theme="dark"] .attendance-classroom-card,
html[data-theme="dark"] .attendance-real-table tbody .attendance-index-column,
html[data-theme="dark"] .attendance-real-table tbody .attendance-student-column {
  background: var(--surface);
}

@media (max-width: 900px) {
  .attendance-context-actions { width: 100%; justify-content: stretch; }
  .attendance-year-context-control { flex: 1 1 155px; }
  .attendance-quick-button { flex: 1 1 auto; justify-content: center; }
  .attendance-two-pane-layout { grid-template-columns: 1fr; }
  .attendance-classroom-sidebar { position: static; padding: 9px; overflow-x: auto; }
  .attendance-classroom-list { display: flex; gap: 8px; width: max-content; }
  .attendance-classroom-card { width: 210px; flex: 0 0 210px; }
}

@media (max-width: 620px) {
  .attendance-quick-button span { display: none; }
  .attendance-quick-button { width: 42px; min-width: 42px; flex: 0 0 42px; padding: 0; }
  .attendance-main-heading { align-items: stretch; flex-direction: column; }
  .attendance-month-control { width: 100%; }
  .attendance-monthly-heading { align-items: flex-start; flex-direction: column; }
  .attendance-compact-legend { justify-content: flex-start; }
  .attendance-real-table .attendance-student-column { width: 150px; min-width: 150px; max-width: 150px; }
  .attendance-export-range-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-export-date-grid,
  .attendance-export-actions-grid { grid-template-columns: 1fr; }
  .attendance-status-options { grid-template-columns: 1fr 1fr; }
}


/* ================================================================
   Asistencia Fase 6.1 · meses pill + tabla mensual ultracompacta
   Replica la densidad y los estados visuales de Android.
   ================================================================ */
.attendance-main-panel {
  gap: 8px;
}

.attendance-month-pill-shell {
  min-width: 0;
  padding: 2px 0 1px;
  overflow: hidden;
}

.attendance-month-pills {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 1px 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.attendance-month-pills::-webkit-scrollbar { display: none; }

.attendance-month-pill {
  min-width: 43px;
  min-height: 31px;
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  box-shadow: none;
  font: inherit;
  font-size: .67rem;
  font-weight: 790;
  letter-spacing: .025em;
  line-height: 1;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.attendance-month-pill:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.attendance-month-pill.is-selected {
  min-width: 68px;
  padding-inline: 13px;
  color: var(--on-primary, #fff);
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* La tabla mensual comienza inmediatamente después de los pills. */
.attendance-table-card.monthly-attendance {
  border-radius: 16px;
}
.attendance-real-table-wrap {
  width: 100%;
  overflow-x: auto;
  scrollbar-gutter: auto;
}
.attendance-real-table,
.attendance-table.attendance-real-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.attendance-real-table th,
.attendance-real-table td,
.attendance-table.attendance-real-table th,
.attendance-table.attendance-real-table td {
  height: 34px;
  padding: 2px 1px;
  overflow: hidden;
  border-right: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}
.attendance-real-table thead th {
  height: 34px;
  padding: 2px 1px;
  font-size: .61rem;
}
.attendance-real-table .attendance-index-column {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  padding-inline: 0;
  font-size: .68rem;
}
.attendance-real-table .attendance-student-column {
  width: 142px;
  min-width: 142px;
  max-width: 142px;
  padding-inline: 5px;
}
.attendance-real-table thead .attendance-student-column,
.attendance-real-table tbody .attendance-student-column {
  left: 28px;
}
.attendance-day-heading {
  min-width: 0;
  width: 100%;
  gap: 0;
  line-height: 1;
}
.attendance-day-heading strong {
  font-size: .6rem;
  line-height: 1;
}
.attendance-day-heading small {
  margin-top: 2px;
  font-size: .52rem;
  line-height: 1;
}
.monthly-student-name {
  font-size: .68rem;
  font-weight: 760;
  line-height: 1.04;
  white-space: normal;
  overflow-wrap: anywhere;
}
.monthly-student-nie {
  margin-top: 1px;
  font-size: .54rem;
  line-height: 1;
  white-space: nowrap;
}
.monthly-status-button {
  width: 23px;
  height: 23px;
  min-width: 23px;
  min-height: 23px;
  border-radius: 7px;
}
.monthly-status-button:hover {
  transform: none;
  box-shadow: 0 2px 5px rgba(20, 35, 65, .10);
}
.attendance-status-mark,
.attendance-status-svg {
  width: 14px;
  height: 14px;
  display: block;
}
.attendance-status-svg { fill: currentColor; }
.attendance-status-svg.is-outline { fill: none; }
.attendance-comment-badge {
  top: 1px;
  right: 0;
  font-size: .46rem;
  line-height: 1;
}

/* Iconos exactos del vector drawable de Android. */
.android-attendance-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
  fill: currentColor;
}
.android-attendance-icon.is-outline { fill: none; }
.attendance-state-option svg.android-attendance-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.quick-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.quick-status .android-attendance-icon {
  width: 20px;
  height: 20px;
}
.attendance-row-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.attendance-row-status .attendance-status-svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

html[data-theme="dark"] .attendance-month-pill:not(.is-selected) {
  background: color-mix(in srgb, var(--surface-soft) 78%, #000 22%);
}

@media (max-width: 1100px) {
  .attendance-real-table .attendance-student-column {
    width: 124px;
    min-width: 124px;
    max-width: 124px;
  }
  .monthly-student-name { font-size: .64rem; }
}

@media (max-width: 760px) {
  .attendance-month-pills { padding-bottom: 7px; }
  .attendance-real-table,
  .attendance-table.attendance-real-table {
    min-width: 720px;
  }
  .attendance-real-table .attendance-student-column {
    width: 126px;
    min-width: 126px;
    max-width: 126px;
  }
}

/* Las marcas mensuales son iconos puros, como en DetalleAsistenciaScreen Android. */
.monthly-status-button,
.monthly-status-button.is-present,
.monthly-status-button.is-absent,
.monthly-status-button.is-excused,
.monthly-status-button.is-unmarked {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.monthly-status-button.is-present { color: #4caf50; }
.monthly-status-button.is-absent { color: #ef5350; }
.monthly-status-button.is-excused { color: #ffb300; }
.monthly-status-button.is-unmarked { color: color-mix(in srgb, var(--muted) 42%, transparent); }
.monthly-status-button:hover {
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* ================================================================
   Asistencia Fase 6.2 · semana por defecto + selector Semana/Mes
   ================================================================ */
.attendance-view-mode-button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  border-radius: 13px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 5px 12px rgba(20, 32, 55, .08);
}
.attendance-view-mode-button:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  transform: translateY(-1px);
}
.attendance-view-mode-button[aria-pressed="true"] {
  color: var(--on-primary, #fff);
  border-color: var(--primary);
  background: var(--primary);
}
.attendance-view-icon {
  width: 21px;
  height: 21px;
  display: block;
  fill: currentColor;
}

.attendance-period-navigation {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.attendance-month-pill-shell,
.attendance-week-pill-shell {
  min-width: 0;
  padding: 2px 0 1px;
  overflow: hidden;
}
.attendance-month-pills,
.attendance-week-pills {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 5px;
  padding: 2px 1px 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.attendance-month-pills::-webkit-scrollbar,
.attendance-week-pills::-webkit-scrollbar { display: none; }

.attendance-week-pill {
  min-width: 43px;
  min-height: 31px;
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  box-shadow: none;
  font: inherit;
  font-size: .67rem;
  font-weight: 790;
  letter-spacing: .025em;
  line-height: 1;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.attendance-week-pill:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.attendance-week-pill.is-selected {
  min-width: 82px;
  padding-inline: 13px;
  color: var(--on-primary, #fff);
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 20%, transparent);
}
html[data-theme="dark"] .attendance-week-pill:not(.is-selected) {
  background: color-mix(in srgb, var(--surface-soft) 78%, #000 22%);
}

/* En vista mensual la tabla usa todo el ancho; el rail de aulas deja de competir por espacio. */
.attendance-two-pane-layout.is-month-mode {
  grid-template-columns: minmax(0, 1fr);
}
.attendance-two-pane-layout.is-month-mode .attendance-classroom-sidebar {
  display: none;
}

/* Anula el estilo histórico del primer td de .monthly-table que lo convertía visualmente en una card. */
.monthly-table.attendance-real-table th.attendance-index-column:first-child,
.monthly-table.attendance-real-table td.attendance-index-column:first-child {
  padding: 0;
  border-radius: 0;
  text-align: center;
}

/* Semana: tabla cómoda, cinco días visibles y número de lista realmente tabular. */
#attendanceMonthlyView.is-week-view .attendance-real-table th,
#attendanceMonthlyView.is-week-view .attendance-real-table td {
  height: 42px;
  padding: 4px 5px;
}
#attendanceMonthlyView.is-week-view .attendance-real-table .attendance-index-column,
#attendanceMonthlyView.is-week-view .monthly-table.attendance-real-table th.attendance-index-column:first-child,
#attendanceMonthlyView.is-week-view .monthly-table.attendance-real-table td.attendance-index-column:first-child {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding-inline: 0;
  font-size: .72rem;
}
#attendanceMonthlyView.is-week-view .attendance-real-table .attendance-student-column {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  padding-inline: 9px;
}
#attendanceMonthlyView.is-week-view .attendance-real-table thead .attendance-student-column,
#attendanceMonthlyView.is-week-view .attendance-real-table tbody .attendance-student-column {
  left: 36px;
}
#attendanceMonthlyView.is-week-view .monthly-student-name {
  font-size: .78rem;
  line-height: 1.12;
}
#attendanceMonthlyView.is-week-view .monthly-student-nie {
  margin-top: 2px;
  font-size: .62rem;
}
#attendanceMonthlyView.is-week-view .attendance-day-heading strong { font-size: .69rem; }
#attendanceMonthlyView.is-week-view .attendance-day-heading small { font-size: .58rem; }
#attendanceMonthlyView.is-week-view .monthly-status-button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
}
#attendanceMonthlyView.is-week-view .attendance-status-mark,
#attendanceMonthlyView.is-week-view .attendance-status-svg {
  width: 18px;
  height: 18px;
}

/* Mes: conserva la densidad alta, ahora con todo el ancho de la página. */
#attendanceMonthlyView.is-month-view .attendance-real-table .attendance-index-column,
#attendanceMonthlyView.is-month-view .monthly-table.attendance-real-table th.attendance-index-column:first-child,
#attendanceMonthlyView.is-month-view .monthly-table.attendance-real-table td.attendance-index-column:first-child {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  padding-inline: 0;
  font-size: .68rem;
}
#attendanceMonthlyView.is-month-view .attendance-real-table .attendance-student-column {
  width: 142px;
  min-width: 142px;
  max-width: 142px;
}
#attendanceMonthlyView.is-month-view .attendance-real-table thead .attendance-student-column,
#attendanceMonthlyView.is-month-view .attendance-real-table tbody .attendance-student-column {
  left: 28px;
}

@media (max-width: 900px) {
  .attendance-month-pills,
  .attendance-week-pills { justify-content: flex-start; }
  .attendance-two-pane-layout.is-month-mode { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .attendance-view-mode-button,
  .attendance-export-icon-button { width: 40px; height: 40px; min-width: 40px; }
  #attendanceMonthlyView.is-week-view .attendance-real-table .attendance-student-column {
    width: 155px;
    min-width: 155px;
    max-width: 155px;
  }
  #attendanceMonthlyView.is-week-view .attendance-real-table thead .attendance-student-column,
  #attendanceMonthlyView.is-week-view .attendance-real-table tbody .attendance-student-column {
    left: 36px;
  }
}


/* ================================================================
   Asistencia Fase 6.3 · selector mes/año + densidad semanal refinada
   ================================================================ */
.attendance-period-context-control {
  min-width: 170px;
  padding: 0 12px;
  gap: 8px;
}
.attendance-period-context-control input[type="month"] {
  min-width: 132px;
  height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  color-scheme: light;
}
html[data-theme="dark"] .attendance-period-context-control input[type="month"] {
  color-scheme: dark;
}
.attendance-period-context-control input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: .65;
  cursor: pointer;
}

/* Cada modo muestra únicamente su navegación temporal propia. */
.attendance-two-pane-layout.is-week-mode .attendance-month-pill-shell { display: none !important; }
.attendance-two-pane-layout.is-month-mode .attendance-week-pill-shell { display: none !important; }
.attendance-month-pills,
.attendance-week-pills { justify-content: center; }

/* La tabla de asistencia se lee por filas: sin divisores verticales. */
#attendanceMonthlyView .attendance-real-table th,
#attendanceMonthlyView .attendance-real-table td,
#attendanceMonthlyView .attendance-real-table .is-week-end {
  border-right: 0 !important;
}

/* Neutraliza el viejo primer th/td blanco de .monthly-table. */
#attendanceMonthlyView .monthly-table.attendance-real-table thead th.attendance-index-column:first-child {
  color: var(--ink) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 25%, var(--surface) 75%),
    color-mix(in srgb, var(--primary) 17%, var(--surface) 83%)
  ) !important;
  border-radius: 0 !important;
  text-align: center !important;
}

/* Zebra real: el fondo alternado cubre número, estudiante y días por igual. */
#attendanceMonthlyView .attendance-real-table tbody tr:nth-child(odd) > * {
  background: var(--surface) !important;
}
#attendanceMonthlyView .attendance-real-table tbody tr:nth-child(even) > * {
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface) 30%) !important;
}
#attendanceMonthlyView .attendance-real-table tbody .attendance-index-column,
#attendanceMonthlyView .attendance-real-table tbody .attendance-student-column {
  border-radius: 0 !important;
}

/* Semana: nombre amplio y cinco días deliberadamente compactos. */
#attendanceMonthlyView.is-week-view .attendance-real-table .attendance-index-column,
#attendanceMonthlyView.is-week-view .monthly-table.attendance-real-table th.attendance-index-column:first-child,
#attendanceMonthlyView.is-week-view .monthly-table.attendance-real-table td.attendance-index-column:first-child {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
}
#attendanceMonthlyView.is-week-view .attendance-real-table .attendance-student-column {
  width: calc(100% - 34px - 390px);
  min-width: 280px;
  max-width: none;
  padding-inline: 12px;
}
#attendanceMonthlyView.is-week-view .attendance-real-table thead .attendance-student-column,
#attendanceMonthlyView.is-week-view .attendance-real-table tbody .attendance-student-column {
  left: 34px;
}
#attendanceMonthlyView.is-week-view .attendance-real-table .attendance-day-column {
  width: 78px;
  min-width: 64px;
  max-width: 78px;
  padding-inline: 2px;
}
#attendanceMonthlyView.is-week-view .monthly-student-name {
  font-size: .82rem;
  line-height: 1.12;
}
#attendanceMonthlyView.is-week-view .monthly-student-nie {
  font-size: .63rem;
}
#attendanceMonthlyView.is-week-view .monthly-status-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
}
#attendanceMonthlyView.is-week-view .attendance-status-mark,
#attendanceMonthlyView.is-week-view .attendance-status-svg {
  width: 24px;
  height: 24px;
}

/* Mes: mantiene el mes completo visible, pero los iconos ganan presencia. */
#attendanceMonthlyView.is-month-view .attendance-real-table .attendance-student-column {
  width: 188px;
  min-width: 188px;
  max-width: 188px;
}
#attendanceMonthlyView.is-month-view .monthly-status-button {
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
}
#attendanceMonthlyView.is-month-view .attendance-status-mark,
#attendanceMonthlyView.is-month-view .attendance-status-svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 1100px) {
  #attendanceMonthlyView.is-week-view .attendance-real-table .attendance-student-column {
    width: calc(100% - 34px - 340px);
    min-width: 235px;
  }
  #attendanceMonthlyView.is-week-view .attendance-real-table .attendance-day-column {
    width: 68px;
    min-width: 60px;
    max-width: 68px;
  }
}

@media (max-width: 760px) {
  .attendance-period-context-control { min-width: 154px; }
  .attendance-period-context-control input[type="month"] { min-width: 118px; font-size: .76rem; }
  .attendance-month-pills,
  .attendance-week-pills { justify-content: flex-start; }
}

/* ========================================================================== */
/* Calificaciones · escritorio compacto con paridad visual Android            */
/* ========================================================================== */
body[data-start-module="grades"] .page-shell {
  width: min(1500px, calc(100% - 28px));
  padding-top: 24px;
  padding-bottom: 44px;
}

.grades-module-view {
  display: grid;
  gap: 14px;
}

.grades-top-card {
  position: sticky;
  top: 10px;
  z-index: 24;
  min-height: 78px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(210px, 1fr) minmax(430px, auto);
  align-items: center;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  box-shadow: 0 9px 24px rgba(25, 42, 72, .08);
  backdrop-filter: blur(16px);
}
.grades-back-button {
  min-height: 42px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.grades-top-copy { min-width: 0; }
.grades-top-copy .eyebrow { display: block; margin-bottom: 2px; }
.grades-top-copy h1 {
  margin: 0;
  overflow: hidden;
  font-size: clamp(1.18rem, 2vw, 1.52rem);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grades-top-copy p {
  margin: 3px 0 0;
  overflow: hidden;
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grades-top-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.grades-context-control {
  min-height: 42px;
  min-width: 142px;
  padding: 5px 8px 5px 10px;
  display: grid;
  grid-template-columns: 18px auto minmax(74px, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
}
.grades-context-control .android-vector-icon { width: 17px; height: 17px; color: var(--primary); }
.grades-control-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}
.grades-control-label {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.grades-context-control select {
  min-width: 0;
  min-height: 30px;
  padding: 4px 24px 4px 6px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: .79rem;
  font-weight: 760;
}
.grades-subject-control { min-width: 225px; }
.grades-open-subject-button { min-height: 42px; padding-inline: 13px; white-space: nowrap; }

.grades-workspace {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.grades-two-pane-layout {
  display: grid;
  grid-template-columns: minmax(225px, 270px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.grades-classroom-sidebar {
  position: sticky;
  top: 104px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
  box-shadow: 0 7px 18px rgba(25, 42, 72, .065);
}
.grades-sidebar-heading {
  padding: 3px 4px 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}
.grades-sidebar-heading small { color: var(--muted); font-size: .68rem; }
.grades-classroom-list { gap: 8px; }
.grades-classroom-list .subject-classroom-card {
  min-height: 58px;
  padding: 9px 10px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  border-radius: 14px;
  box-shadow: 0 3px 9px rgba(26, 40, 70, .045);
}
.grades-classroom-list .subject-classroom-card-icon {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 11px;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}
.grades-classroom-list .subject-classroom-card-copy strong { font-size: .86rem; }
.grades-classroom-list .subject-classroom-card-copy small { font-size: .69rem; }
.grades-main-panel { min-width: 0; }

.grades-overview-panel,
.grades-gradebook-workspace {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.grades-main-heading,
.grades-gradebook-heading,
.grades-term-summary-card,
.grades-activities-card,
.grades-matrix-card,
.grades-final-summary {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(26, 40, 70, .055);
}
.grades-main-heading {
  min-height: 74px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 18px;
}
.grades-main-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--primary);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.grades-main-heading h2 { margin: 0; font-size: 1.08rem; }
.grades-main-heading p { margin: 3px 0 0; font-size: .75rem; }
.grades-overview-hint {
  max-width: 260px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  text-align: right;
}
.grades-subject-list {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.grades-subject-list .subject-card {
  min-height: 145px;
  padding: 13px;
  border-radius: 17px;
  box-shadow: 0 5px 13px rgba(26, 40, 70, .055);
}
.grades-subject-list .period-chip-list { margin-top: 9px; gap: 5px; }
.grades-subject-list .period-chip,
.grades-subject-list .subject-state { font-size: .68rem; }
.grades-subject-list .subject-open-button { min-height: 36px; margin-top: 10px; padding: 7px 10px; font-size: .76rem; }
.grades-empty-state { margin-top: 12px; min-height: 220px; }

.grades-gradebook-workspace { display: grid; gap: 10px; }
.grades-gradebook-heading {
  min-height: 74px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 18px;
}
.grades-gradebook-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.grades-inline-back { min-height: 36px; padding: 7px 9px; font-size: .74rem; white-space: nowrap; }
.grades-gradebook-title > div { min-width: 0; }
.grades-gradebook-title h2 {
  margin: 1px 0 2px;
  overflow: hidden;
  font-size: 1.08rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grades-gradebook-title p { margin: 0; font-size: .72rem; }
.grades-gradebook-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.grades-gradebook-actions .button { min-height: 36px; padding: 7px 10px; font-size: .74rem; }
.grades-gradebook-actions .period-status { margin: 0; }

.grades-period-strip {
  min-width: 0;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 5px 13px rgba(26, 40, 70, .045);
}
.grades-period-tabs {
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.grades-period-tabs .gradebook-period-tab {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 11px;
  font-size: .72rem;
  white-space: nowrap;
}
.grades-period-strip-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.grades-period-strip-actions .button { min-height: 34px; padding: 6px 9px; font-size: .72rem; }

.grades-term-content {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.grades-term-summary-card {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
}
.grades-term-summary-card h3 { margin: 1px 0 0; font-size: .98rem; }
.grades-weight-line { min-width: 0; justify-content: flex-start; }
.grades-weight-line strong { font-size: 1rem; }
.grades-weight-line .muted { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.grades-term-summary-card > .button { min-height: 36px; padding: 7px 10px; font-size: .74rem; }

.grades-activities-card {
  padding: 11px 12px;
  border-radius: 16px;
}
.grades-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grades-section-heading h3 { margin: 2px 0 0; font-size: .94rem; }
.grades-activity-list {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.grades-activity-list .activity-card {
  min-height: 112px;
  padding: 10px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  border-radius: 14px;
  box-shadow: none;
}
.grades-activity-list .activity-order { width: 28px; height: 28px; font-size: .7rem; }
.grades-activity-list .activity-card-heading { gap: 8px; }
.grades-activity-list .activity-card-heading h4 { font-size: .82rem; }
.grades-activity-list .activity-weight { font-size: .72rem; }
.grades-activity-list .activity-card p { font-size: .68rem; }
.grades-activity-list .activity-comment { display: none; }
.grades-activity-list .activity-actions { margin-top: 8px; gap: 4px; }
.grades-activity-list .student-action-button {
  min-height: 28px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: .63rem;
}
.grades-activity-empty { min-height: 125px; margin-top: 8px; }

.grades-matrix-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 17px;
}
.grades-matrix-heading {
  padding: 11px 13px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.grades-matrix-heading h3 { margin: 2px 0 2px; font-size: .96rem; }
.grades-matrix-heading p { margin: 0; font-size: .71rem; }
.grades-state-legend { margin: 0; gap: 5px; }
.grades-state-legend span { padding: 4px 6px; font-size: .63rem; }
.grades-summary-stats {
  margin: 0;
  padding: 8px 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  border-bottom: 1px solid var(--line);
}
.grades-summary-stats .grade-summary-stat { min-height: 54px; padding: 8px 9px; border-radius: 11px; }
.grades-summary-stats .grade-summary-stat span { font-size: .62rem; }
.grades-summary-stats .grade-summary-stat strong { font-size: .98rem; }

.grades-real-table-wrap {
  width: 100%;
  max-height: min(58vh, 690px);
  overflow: auto;
  scrollbar-gutter: stable;
  border: 0;
  border-radius: 0;
}
.grades-real-table,
.grade-matrix-table.grades-real-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: .74rem;
}
.grades-real-table th,
.grades-real-table td {
  height: 54px;
  padding: 5px 6px;
  border-right: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  vertical-align: middle;
}
.grades-real-table tr > *:last-child { border-right: 0; }
.grades-real-table tbody tr:last-child > * { border-bottom: 0; }
.grades-real-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 48px;
  padding: 6px 7px;
  color: var(--ink);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 20%, var(--surface) 80%),
    color-mix(in srgb, var(--primary) 13%, var(--surface) 87%));
  font-size: .67rem;
  font-weight: 850;
  text-align: center;
}
.grades-real-table .grade-index-heading,
.grades-real-table .grade-index-cell {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  text-align: center;
}
.grades-real-table .grade-student-heading,
.grades-real-table .grade-student-cell {
  width: 206px;
  min-width: 206px;
  max-width: 206px;
  text-align: left;
}
.grades-real-table .grade-activity-heading,
.grades-real-table .grade-score-cell {
  width: 106px;
  min-width: 106px;
  max-width: 106px;
  text-align: center;
}
.grades-real-table .grade-average-heading,
.grades-real-table .grade-period-average {
  width: 96px;
  min-width: 96px;
  max-width: 96px;
  text-align: center;
}
.grades-real-table thead .grade-index-heading,
.grades-real-table tbody .grade-index-cell {
  position: sticky;
  left: 0;
  z-index: 8;
}
.grades-real-table thead .grade-student-heading,
.grades-real-table tbody .grade-student-cell {
  position: sticky;
  left: 42px;
  z-index: 7;
}
.grades-real-table tbody .grade-index-cell,
.grades-real-table tbody .grade-student-cell { background: var(--surface); }
.grades-real-table tbody tr:nth-child(even) td,
.grades-real-table tbody tr:nth-child(even) .grade-index-cell,
.grades-real-table tbody tr:nth-child(even) .grade-student-cell {
  background: var(--ui-surface-subtle, var(--surface-soft));
}
.grades-real-table .grade-student-cell strong,
.grades-real-table .grade-student-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grades-real-table .grade-student-cell strong { font-size: .75rem; }
.grades-real-table .grade-student-cell small { margin-top: 2px; color: var(--muted); font-size: .61rem; font-weight: 520; }
.grades-real-table .grade-activity-heading strong,
.grades-real-table .grade-activity-heading span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grades-real-table .grade-activity-heading span { margin-top: 2px; color: var(--muted); font-size: .58rem; }
.grade-score-cell,
.grade-period-average { position: relative; }
.grade-score-button,
.grade-period-score-button {
  width: 62px;
  min-height: 39px;
  margin: 0 auto;
  padding: 4px 5px;
  display: grid;
  place-items: center;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, var(--primary) 4%);
}
.grade-score-button:hover,
.grade-period-score-button:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}
.grade-score-button strong,
.grade-period-score-button strong { font-size: .86rem; line-height: 1; }
.grade-score-button small,
.grade-period-score-button small { margin-top: 3px; color: var(--muted); font-size: .52rem; line-height: 1; }
.grade-score-button:disabled,
.grade-period-score-button:disabled { cursor: default; opacity: .76; }
.grades-real-table .grade-cell-indicators {
  min-height: 0;
  margin: 3px auto 0;
  justify-content: center;
  gap: 2px;
}
.grades-real-table .grade-cell-indicators span {
  min-width: 14px;
  height: 14px;
  padding: 1px 3px;
  border-radius: 5px;
  font-size: .48rem;
}
.grade-cell-mark-compact {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  font-size: .7rem;
  background: transparent;
}
.grade-cell-mark-compact.is-active { color: #9b6a00; background: #fff2ad; }
.grade-score-cell.is-locked .grade-score-button { border-style: dashed; }
.grade-score-cell.is-marked,
.grade-period-average.is-marked { box-shadow: inset 0 0 0 2px color-mix(in srgb, #e5b000 55%, transparent); }

.grades-final-summary {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 17px;
}
.grades-final-heading { padding: 12px 13px; border-bottom: 1px solid var(--line); }
.grades-final-summary .final-summary-help { margin: 0; padding: 9px 12px; border-top: 1px solid var(--line); font-size: .68rem; }

/* Modales de Calificaciones */
.grades-dialog {
  width: min(620px, calc(100vw - 28px));
  max-width: 620px;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 22px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 28px 72px rgba(0, 0, 0, .28), 0 9px 24px rgba(25, 42, 72, .12);
}
.grades-dialog::backdrop { background: rgba(5, 9, 13, .62); backdrop-filter: blur(3px); }
.grades-dialog > .form-stack,
.grades-dialog > form { padding: 22px; }
.grades-dialog .dialog-title-row h2 { margin: 2px 0 0; font-size: 1.18rem; }
.grades-period-dialog { max-width: 520px; }
.grades-period-settings-dialog { max-width: 560px; }
.grades-activity-dialog { max-width: 610px; }
.grades-group-dialog { width: min(880px, calc(100vw - 28px)); max-width: 880px; }
.grades-cell-dialog { max-width: 600px; }
.grades-period-settings-actions {
  padding-top: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.grades-period-settings-actions .button { width: 100%; justify-content: center; }
.grades-dialog-actions-split { justify-content: flex-start; }
.grades-cell-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grades-cell-form .grade-cell-form-actions { justify-content: flex-end; }
.grades-cell-form .grade-cell-form-actions .button-primary { margin-left: auto; }
.grades-group-dialog .grade-group-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grades-group-dialog .grade-group-action-card { min-height: 220px; }

html[data-theme="dark"] .grades-top-card,
html[data-theme="dark"] .grades-classroom-sidebar,
html[data-theme="dark"] .grades-main-heading,
html[data-theme="dark"] .grades-gradebook-heading,
html[data-theme="dark"] .grades-period-strip,
html[data-theme="dark"] .grades-term-summary-card,
html[data-theme="dark"] .grades-activities-card,
html[data-theme="dark"] .grades-matrix-card,
html[data-theme="dark"] .grades-final-summary,
html[data-theme="dark"] .grades-dialog {
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
html[data-theme="dark"] .grades-real-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .grades-real-table tbody tr:nth-child(even) .grade-index-cell,
html[data-theme="dark"] .grades-real-table tbody tr:nth-child(even) .grade-student-cell {
  background: var(--ui-surface-subtle, var(--surface-soft));
}

@media (max-width: 1180px) {
  .grades-top-card { grid-template-columns: auto minmax(180px, 1fr); }
  .grades-top-controls { grid-column: 1 / -1; justify-content: stretch; }
  .grades-context-control { flex: 1 1 170px; }
  .grades-subject-control { flex: 2 1 240px; }
  .grades-open-subject-button { flex: 0 0 auto; }
  .grades-activity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  body[data-start-module="grades"] .page-shell { width: min(100% - 20px, 1500px); padding-top: 16px; }
  .grades-top-card { position: static; grid-template-columns: auto minmax(0, 1fr); }
  .grades-top-controls { flex-wrap: wrap; }
  .grades-two-pane-layout { grid-template-columns: 1fr; }
  .grades-classroom-sidebar { position: static; }
  .grades-classroom-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .grades-main-heading,
  .grades-gradebook-heading { align-items: flex-start; flex-direction: column; }
  .grades-gradebook-actions { width: 100%; justify-content: flex-start; }
  .grades-term-summary-card { grid-template-columns: 1fr auto; }
  .grades-weight-line { grid-column: 1 / -1; order: 3; }
  .grades-group-dialog .grade-group-action-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grades-top-controls { display: grid; grid-template-columns: 1fr; }
  .grades-context-control,
  .grades-subject-control { width: 100%; min-width: 0; }
  .grades-open-subject-button { width: 100%; }
  .grades-subject-list,
  .grades-activity-list { grid-template-columns: 1fr; }
  .grades-period-strip { align-items: stretch; flex-direction: column; }
  .grades-period-strip-actions { justify-content: flex-end; }
  .grades-term-summary-card { grid-template-columns: 1fr; }
  .grades-term-summary-card > .button { width: 100%; }
  .grades-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grades-cell-form { grid-template-columns: 1fr; }
  .grades-dialog > .form-stack,
  .grades-dialog > form { padding: 18px; }
}

/* Calificaciones · barra superior parity Aulas / Android · overlay 02 */
.android-vector-icon.icon-back {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2Z'/%3E%3C/svg%3E");
}
.android-vector-icon.icon-export {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7ZM5 18v2h14v-2H5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7ZM5 18v2h14v-2H5Z'/%3E%3C/svg%3E");
}

.grades-top-card {
  min-height: 66px;
  padding: 10px 12px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}
.grades-top-controls {
  min-width: 0;
  justify-content: flex-end;
  gap: 8px;
}
.grades-icon-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  flex: 0 0 auto;
}
.grades-icon-button .android-vector-icon {
  width: 20px;
  height: 20px;
}
.grades-back-button {
  padding: 0;
  gap: 0;
}
.grades-year-control { min-width: 150px; }
.grades-subject-control {
  width: min(360px, 38vw);
  min-width: 235px;
}
.grades-export-icon-button { color: var(--primary); }
.grades-add-button .android-vector-icon { width: 21px; height: 21px; }
.grades-icon-button:disabled { opacity: .46; }

.grades-term-summary-card {
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
}

.grades-add-menu-dialog {
  width: min(520px, calc(100vw - 28px));
  max-width: 520px;
  padding: 0;
  overflow: hidden;
}
.grades-add-menu-dialog .grades-dialog-heading {
  padding: 18px 18px 13px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}
.grades-add-menu-dialog .grades-dialog-heading h3 {
  margin: 2px 0 3px;
  font-size: 1.08rem;
}
.grades-add-menu-dialog .grades-dialog-heading p {
  margin: 0;
  font-size: .76rem;
}
.grades-add-menu-options {
  padding: 12px;
  display: grid;
  gap: 9px;
}
.grades-add-menu-option {
  width: 100%;
  min-height: 74px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: var(--surface-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.grades-add-menu-option:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-soft));
}
.grades-add-menu-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.grades-add-menu-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  font-size: 1.2rem;
  font-weight: 900;
}
.grades-add-menu-term-icon { font-size: .88rem; letter-spacing: -.02em; }
.grades-add-menu-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.grades-add-menu-copy strong { font-size: .88rem; }
.grades-add-menu-copy small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.35;
}
.grades-add-menu-arrow {
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
}

@media (max-width: 1180px) {
  .grades-top-card { grid-template-columns: auto minmax(0, 1fr); }
  .grades-top-controls { grid-column: auto; justify-content: flex-end; }
  .grades-context-control { flex: 0 1 auto; }
  .grades-subject-control { flex: 1 1 250px; width: auto; max-width: 360px; }
}
@media (max-width: 700px) {
  .grades-top-card { align-items: start; }
  .grades-top-controls {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr) 42px 42px;
    width: 100%;
  }
  .grades-context-control,
  .grades-subject-control { width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .grades-top-card { grid-template-columns: 42px minmax(0, 1fr); }
  .grades-top-controls { grid-template-columns: 1fr 42px 42px; }
  .grades-year-control { grid-column: 1 / -1; }
  .grades-subject-control { grid-column: 1 / 2; }
}


/* Calificaciones · contexto integrado + materia automática · overlay 03 */
body[data-start-module="grades"] #subjectsView > .module-context-bar {
  display: none !important;
}

.grades-top-card {
  grid-template-columns: 42px minmax(150px, 1fr) minmax(430px, auto);
}

.grades-top-identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  overflow: hidden;
  white-space: nowrap;
}

.grades-top-identity strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: .92rem;
  font-weight: 780;
  text-overflow: ellipsis;
}

.grades-top-identity-separator {
  flex: 0 0 auto;
  color: var(--muted);
  opacity: .72;
}

.grades-top-identity #subjectsModuleEyebrow {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
}

@media (max-width: 1180px) {
  .grades-top-card {
    grid-template-columns: 42px minmax(130px, 1fr) minmax(360px, auto);
  }
  .grades-top-controls {
    grid-column: auto;
  }
}

@media (max-width: 880px) {
  .grades-top-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .grades-top-identity {
    align-self: center;
  }
  .grades-top-controls {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
}

@media (max-width: 560px) {
  .grades-top-identity {
    gap: 5px;
  }
  .grades-top-identity strong {
    font-size: .84rem;
  }
  .grades-top-identity #subjectsModuleEyebrow {
    font-size: .72rem;
  }
}

/* Calificaciones · limpieza de cuaderno + exportación modal + pills · overlay 04 */
.android-vector-icon.icon-settings {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.65.07-.98s-.03-.66-.08-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98L14.5 2.42A.49.49 0 0 0 14 2h-4a.49.49 0 0 0-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.49.49 0 0 0-.61.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.66-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.12.22.38.31.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.04.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.58 1.69-.98l2.49 1c.23.08.49 0 .61-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.65.07-.98s-.03-.66-.08-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98L14.5 2.42A.49.49 0 0 0 14 2h-4a.49.49 0 0 0-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.49.49 0 0 0-.61.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.66-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.12.22.38.31.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.04.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.58 1.69-.98l2.49 1c.23.08.49 0 .61-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
}
.android-vector-icon.icon-download {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7ZM5 18v2h14v-2H5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7ZM5 18v2h14v-2H5Z'/%3E%3C/svg%3E");
}
.android-vector-icon.icon-drive {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.71 3h8.58L22 13h-5.71L12 5.5 7.71 13H2L7.71 3Zm-1.43 12h11.44L20 19H4l2.28-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.71 3h8.58L22 13h-5.71L12 5.5 7.71 13H2L7.71 3Zm-1.43 12h11.44L20 19H4l2.28-4Z'/%3E%3C/svg%3E");
}

.grades-gradebook-workspace {
  gap: 7px;
}

/* Los trimestres viven directamente sobre el fondo, igual que meses/semanas de Asistencia. */
.grades-period-pill-shell {
  position: relative;
  min-width: 0;
  min-height: 38px;
  padding: 2px 48px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.grades-period-tabs {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 2px 1px 5px;
  display: flex;
  align-items: center;
  justify-content: safe center;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.grades-period-tabs::-webkit-scrollbar { display: none; }
.grades-period-tabs .gradebook-period-tab {
  min-width: 74px;
  min-height: 31px;
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  box-shadow: none;
  font-size: .69rem;
  font-weight: 790;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
.grades-period-tabs .gradebook-period-tab:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.grades-period-tabs .gradebook-period-tab.is-active {
  min-width: 92px;
  padding-inline: 14px;
  color: var(--on-primary, #fff);
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 20%, transparent);
}
.grades-period-tabs .gradebook-period-tab.is-summary:not(.is-active) {
  color: var(--muted);
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}
.grades-period-tabs .gradebook-period-tab.is-summary.is-active {
  color: var(--on-primary, #fff);
  border-color: var(--primary);
  background: var(--primary);
}
.grades-period-settings-button {
  position: absolute;
  top: 50%;
  right: 1px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  transform: translateY(-50%);
  border-radius: 999px;
  color: var(--muted);
}
.grades-period-settings-button .android-vector-icon { width: 18px; height: 18px; }
.grades-period-settings-button:hover { color: var(--primary); }

/* La tabla arranca sin cabecera explicativa ni leyenda intermedia. */
.grades-matrix-card > .grades-summary-stats:first-child {
  border-top: 0;
}

/* Modal único de exportación desde el icono de la toolbar. */
.grades-export-dialog {
  width: min(520px, calc(100vw - 28px));
  max-width: 520px;
  padding: 0;
  overflow: hidden;
}
.grades-export-dialog .grades-dialog-heading {
  padding: 18px 18px 13px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}
.grades-export-dialog .grades-dialog-heading h3 {
  margin: 2px 0 3px;
  font-size: 1.08rem;
}
.grades-export-dialog .grades-dialog-heading p {
  margin: 0;
  font-size: .76rem;
}
.grades-export-options {
  padding: 12px;
  display: grid;
  gap: 9px;
}
.grades-export-option {
  width: 100%;
  min-height: 74px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: var(--surface-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.grades-export-option:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-soft));
}
.grades-export-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.grades-export-option-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
.grades-export-option-icon .android-vector-icon {
  width: 21px;
  height: 21px;
}
.grades-export-option-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.grades-export-option-copy strong { font-size: .88rem; }
.grades-export-option-copy small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.35;
}

html[data-theme="dark"] .grades-period-tabs .gradebook-period-tab:not(.is-active) {
  background: color-mix(in srgb, var(--surface-soft) 78%, #000 22%);
}

@media (max-width: 620px) {
  .grades-period-pill-shell { padding-inline: 1px; overflow: visible; }
  .grades-period-tabs { justify-content: flex-start; padding-right: 42px; }
  .grades-period-settings-button { right: 0; }
}

/* Calificaciones: las actividades se administran desde su encabezado en la matriz. */
.grades-real-table .grade-activity-heading.is-interactive {
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}
.grades-real-table .grade-activity-heading.is-interactive:hover,
.grades-real-table .grade-activity-heading.is-interactive:focus-visible {
  outline: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 30%, var(--surface) 70%),
    color-mix(in srgb, var(--primary) 20%, var(--surface) 80%));
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--primary) 72%, transparent);
}

.grades-activity-options-dialog {
  width: min(650px, calc(100vw - 28px));
  max-width: 650px;
}
.grades-activity-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.grades-activity-option {
  width: 100%;
  min-height: 78px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: var(--surface-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.grades-activity-option:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-soft));
}
.grades-activity-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.grades-activity-option > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.grades-activity-option strong { font-size: .84rem; }
.grades-activity-option small {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.35;
}
.grades-activity-option-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  font-size: 1rem;
  font-weight: 900;
}
.grades-activity-option.is-danger {
  border-color: color-mix(in srgb, var(--danger, #d94b4b) 34%, var(--line));
}
.grades-activity-option.is-danger .grades-activity-option-icon,
.grades-activity-option.is-danger strong {
  color: var(--danger, #d94b4b);
}

@media (max-width: 620px) {
  .grades-activity-options-grid { grid-template-columns: 1fr; }
}

/* Calificaciones 06 — celdas y menú alineados con Android */
.grades-real-table .grade-score-cell {
  position: relative;
  height: 52px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition: background .14s ease, box-shadow .14s ease;
}
.grades-real-table .grade-score-cell:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 72%, transparent);
  outline-offset: -2px;
}
.grades-real-table .grade-score-cell:hover {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.grades-real-table tbody tr:nth-child(even) .grade-score-cell:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-soft));
}
.grades-real-table .grade-score-cell.is-locked {
  cursor: context-menu;
}
.grades-real-table .grade-score-cell.is-recovery-active,
.grades-real-table tbody tr:nth-child(even) .grade-score-cell.is-recovery-active {
  background: color-mix(in srgb, #ff9800 13%, var(--surface));
}
.grades-real-table .grade-score-cell.is-recovery-active:hover,
.grades-real-table tbody tr:nth-child(even) .grade-score-cell.is-recovery-active:hover {
  background: color-mix(in srgb, #ff9800 18%, var(--surface));
}
.grades-real-table .grade-score-value {
  width: 100%;
  height: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 16px 0 6px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-size: .86rem;
  font-weight: 850;
  line-height: 1;
}
.grades-real-table .grade-score-cell.is-locked .grade-score-value {
  opacity: .62;
}
.grades-real-table .grade-score-cell .grade-cell-indicators {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: auto;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;
  pointer-events: none;
}
.grades-real-table .grade-score-cell .grade-cell-indicators span {
  width: 15px;
  min-width: 15px;
  height: 14px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: .48rem;
  font-weight: 900;
  line-height: 1;
}
.grades-real-table .grade-score-cell .grade-cell-indicators span:last-child {
  border-bottom-left-radius: 6px;
}
.grades-real-table .grade-score-cell .grade-cell-indicators .is-recovery {
  color: #fff;
  background: #ff9800;
}
.grades-real-table .grade-score-cell .grade-cell-indicators .is-comment {
  color: #fff;
  background: #4caf50;
}
.grades-real-table .grade-score-cell .grade-cell-indicators .is-extra {
  color: #fff;
  background: #2196f3;
}
.grades-real-table .grade-score-cell.is-marked,
.grades-real-table tbody tr:nth-child(even) .grade-score-cell.is-marked {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #ff8a00 72%, transparent);
}
.grades-real-table .grade-score-cell.is-marked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, #ff8a00 30%, transparent);
  border-radius: 4px;
  pointer-events: none;
}
.grade-inline-score-input {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  outline: 2px solid color-mix(in srgb, var(--primary) 75%, transparent);
  outline-offset: -2px;
  color: var(--ink);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  font: inherit;
  font-size: .88rem;
  font-weight: 850;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.grade-inline-score-input::-webkit-outer-spin-button,
.grade-inline-score-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.grades-cell-options-dialog {
  width: min(760px, calc(100vw - 28px));
  max-width: 760px;
}
.grades-cell-options-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 11px;
  max-height: min(570px, 68vh);
  padding: 4px 0;
  overflow: auto;
}
.grades-cell-options-grid::after {
  content: '';
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 50%;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
.grades-cell-options-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.grades-cell-menu-option {
  width: 100%;
  min-height: 48px;
  padding: 7px 12px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 32px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 720;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.grades-cell-menu-option:hover:not(:disabled),
.grades-cell-menu-option:focus-visible:not(:disabled) {
  outline: none;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-soft));
}
.grades-cell-menu-option:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.grades-cell-menu-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-soft));
  font-size: .9rem;
  font-weight: 900;
}
.grades-cell-menu-option.is-recovery .grades-cell-menu-icon {
  color: #d97706;
  background: color-mix(in srgb, #ff9800 15%, var(--surface));
}
.grades-cell-menu-option.is-extra .grades-cell-menu-icon {
  color: #1976d2;
  background: color-mix(in srgb, #2196f3 14%, var(--surface));
}
.grades-cell-menu-option.is-comment .grades-cell-menu-icon {
  color: #2e7d32;
  background: color-mix(in srgb, #4caf50 14%, var(--surface));
}
.grades-cell-menu-option.is-mark .grades-cell-menu-icon {
  color: #d97706;
  background: color-mix(in srgb, #ff9800 14%, var(--surface));
}
.grades-cell-menu-option.is-danger,
.grades-cell-menu-option.is-danger .grades-cell-menu-icon {
  color: var(--danger, #d94b4b);
}
.grades-cell-menu-option.is-danger .grades-cell-menu-icon {
  background: color-mix(in srgb, var(--danger, #d94b4b) 11%, var(--surface));
}

.grades-quick-action-dialog { width: min(440px, calc(100vw - 28px)); max-width: 440px; }
.grades-same-note-dialog { width: min(560px, calc(100vw - 28px)); max-width: 560px; }
.grades-clear-choice-dialog { width: min(560px, calc(100vw - 28px)); max-width: 560px; }
.grades-insight-dialog { width: min(650px, calc(100vw - 28px)); max-width: 650px; }
.grades-same-note-list {
  max-height: 360px;
  display: grid;
  gap: 5px;
  overflow: auto;
}
.grades-same-note-list label,
.grades-choice-row {
  min-height: 48px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  background: var(--surface-soft);
}
.grades-choice-row > span,
.grades-same-note-list label > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.grades-choice-row small,
.grades-same-note-list small {
  color: var(--muted);
  font-size: .68rem;
}
.grades-insight-content,
.grades-insight-sections,
.grades-insight-list {
  display: grid;
  gap: 8px;
}
.grades-insight-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grades-insight-sections h3 { margin: 0 0 5px; font-size: .82rem; }
.grades-insight-row {
  min-height: 42px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 11px;
  background: var(--surface-soft);
}
.grades-insight-row > div { min-width: 0; display: grid; gap: 1px; }
.grades-insight-row strong { font-size: .75rem; }
.grades-insight-row small { color: var(--muted); font-size: .64rem; }
.grades-insight-row > span { flex: 0 0 auto; font-weight: 850; }

@media (max-width: 680px) {
  .grades-cell-options-grid { grid-template-columns: 1fr; }
  .grades-cell-options-grid::after { display: none; }
  .grades-insight-sections { grid-template-columns: 1fr; }
}


/* Calificaciones 07 — tabla primero, advertencia de ponderación y resumen inferior */
/* El bloque visual de "Periodo activo" se eliminó; sus IDs quedan ocultos como contrato JS. */
.grades-term-content {
  gap: 10px;
}

.grades-period-summary-card {
  margin: 0;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 5px 13px rgba(26, 40, 70, .045);
}
.grades-period-summary-card[hidden] { display: none; }
.grades-period-summary-card .grades-summary-stats {
  padding: 0;
  border: 0;
}

/* Equivalente escritorio del aviso de Android bajo la cabecera de la tabla. */
.grades-real-table .grade-weight-warning-row > .grade-weight-warning-cell {
  height: auto;
  min-height: 38px;
  padding: 7px 10px;
  border-right: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--danger, #b3261e) 30%, var(--line));
  color: color-mix(in srgb, var(--danger, #b3261e) 88%, var(--ink));
  background: color-mix(in srgb, var(--danger, #b3261e) 10%, var(--surface));
  text-align: center;
}
.grades-real-table .grade-weight-warning-content {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: .72rem;
  line-height: 1.25;
}
.grades-real-table .grade-weight-warning-mark {
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--surface);
  background: var(--danger, #b3261e);
  font-size: .72rem;
  font-weight: 950;
  line-height: 1;
}
.grades-real-table .grade-weight-warning-content strong {
  color: inherit;
  font-size: inherit;
  font-weight: 800;
}

html[data-theme="dark"] .grades-real-table .grade-weight-warning-row > .grade-weight-warning-cell {
  color: var(--danger, #ffb4ab);
  background: color-mix(in srgb, var(--danger, #ffb4ab) 12%, var(--surface));
}
html[data-theme="dark"] .grades-real-table .grade-weight-warning-mark {
  color: #2b0a08;
  background: var(--danger, #ffb4ab);
}

@media (max-width: 760px) {
  .grades-period-summary-card { padding: 8px; }
  .grades-real-table .grade-weight-warning-content { font-size: .68rem; }
}


/* Calificaciones 08 — matriz completa, columnas fluidas e iconografía Android */
#gradeMatrixTableWrap.grades-real-table-wrap {
  max-height: none;
  overflow: visible;
  scrollbar-gutter: auto;
}

#gradeMatrixTableWrap .grades-real-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

/* Sin scroll interno no hacen falta columnas laterales sticky; esto evita el falso hueco
   que aparecía cuando el navegador ensanchaba la pista de Estudiante. */
#gradeMatrixTableWrap .grades-real-table thead th,
#gradeMatrixTableWrap .grades-real-table thead .grade-index-heading,
#gradeMatrixTableWrap .grades-real-table tbody .grade-index-cell,
#gradeMatrixTableWrap .grades-real-table thead .grade-student-heading,
#gradeMatrixTableWrap .grades-real-table tbody .grade-student-cell {
  position: static;
  left: auto;
}

#gradeMatrixTableWrap .grades-real-table .grade-index-heading,
#gradeMatrixTableWrap .grades-real-table .grade-index-cell {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
}

#gradeMatrixTableWrap .grades-real-table .grade-student-heading,
#gradeMatrixTableWrap .grades-real-table .grade-student-cell {
  width: 32%;
  min-width: 0;
  max-width: none;
}

#gradeMatrixTableWrap .grades-real-table .grade-activity-heading,
#gradeMatrixTableWrap .grades-real-table .grade-score-cell {
  width: auto;
  min-width: 0;
  max-width: none;
}

#gradeMatrixTableWrap .grades-real-table .grade-average-heading,
#gradeMatrixTableWrap .grades-real-table .grade-period-average {
  width: 94px;
  min-width: 82px;
  max-width: 104px;
}

#gradeMatrixTableWrap .grades-real-table .grade-student-cell {
  padding: 8px 10px;
}
#gradeMatrixTableWrap .grades-real-table .grade-student-cell strong {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: .78rem;
  line-height: 1.18;
}
#gradeMatrixTableWrap .grades-real-table .grade-student-cell small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Total se comporta visualmente como cualquier nota: número directamente en la celda. */
#gradeMatrixTableWrap .grade-period-average.grade-total-score-cell {
  position: relative;
  padding: 0;
  cursor: pointer;
  user-select: none;
}
#gradeMatrixTableWrap .grade-period-average.grade-total-score-cell:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 72%, transparent);
  outline-offset: -2px;
}
#gradeMatrixTableWrap .grade-period-average.grade-total-score-cell:hover {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
#gradeMatrixTableWrap tbody tr:nth-child(even) .grade-period-average.grade-total-score-cell:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-soft));
}
#gradeMatrixTableWrap .grade-total-score-value {
  min-height: 54px;
  padding: 0 14px 0 6px;
  font-size: .86rem;
}
#gradeMatrixTableWrap .grade-period-average .grade-cell-indicators {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: auto;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  pointer-events: none;
}
#gradeMatrixTableWrap .grade-period-average .grade-cell-indicators span {
  width: 15px;
  min-width: 15px;
  height: 14px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: .48rem;
  font-weight: 900;
  line-height: 1;
}
#gradeMatrixTableWrap .grade-period-average .grade-cell-indicators span:last-child {
  border-bottom-left-radius: 6px;
}

.grades-period-total-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Los iconos del menú son los mismos VectorDrawable de Android convertidos a SVG-máscara. */
.grades-cell-menu-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: block;
  border-radius: 0;
  background: currentColor;
  -webkit-mask-image: var(--grade-menu-icon);
  mask-image: var(--grade-menu-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.grades-cell-menu-option {
  grid-template-columns: 28px minmax(0, 1fr);
}
.grades-cell-menu-option.is-recovery .grades-cell-menu-icon,
.grades-cell-menu-option.is-extra .grades-cell-menu-icon,
.grades-cell-menu-option.is-comment .grades-cell-menu-icon,
.grades-cell-menu-option.is-mark .grades-cell-menu-icon,
.grades-cell-menu-option.is-danger .grades-cell-menu-icon {
  background-color: currentColor;
}

@media (max-width: 920px) {
  #gradeMatrixTableWrap .grades-real-table .grade-student-heading,
  #gradeMatrixTableWrap .grades-real-table .grade-student-cell { width: 36%; }
  #gradeMatrixTableWrap .grades-real-table .grade-index-heading,
  #gradeMatrixTableWrap .grades-real-table .grade-index-cell { width: 44px; min-width: 44px; max-width: 44px; }
  #gradeMatrixTableWrap .grades-real-table .grade-average-heading,
  #gradeMatrixTableWrap .grades-real-table .grade-period-average { width: 78px; min-width: 72px; max-width: 82px; }
}

/* Calificaciones 09 — corrección de geometría de tabla y nombres */
#gradeMatrixTableWrap.grades-real-table-wrap {
  margin-top: 0;
}

/* La celda de estudiante debe participar del algoritmo nativo de la tabla.
   La regla histórica display:grid separaba visualmente el tbody del thead. */
#gradeMatrixTableWrap .grades-real-table tbody .grade-student-cell {
  display: table-cell;
  box-sizing: border-box;
  vertical-align: middle;
}

#gradeMatrixTableWrap .grades-real-table .grade-student-heading,
#gradeMatrixTableWrap .grades-real-table .grade-student-cell {
  box-sizing: border-box;
}

/* Nombre + NIE compactos, legibles y sin cortes letra por letra. */
#gradeMatrixTableWrap .grades-real-table .grade-student-cell strong {
  display: inline;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  font-size: .78rem;
  line-height: 1.28;
}
#gradeMatrixTableWrap .grades-real-table .grade-student-cell small {
  display: inline-block;
  margin: 0 0 0 10px;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  vertical-align: baseline;
}

/* El thead nace directamente en el borde superior de la card. */
#gradeMatrixTableWrap .grades-real-table {
  margin-top: 0;
}
#gradeMatrixTableWrap .grades-real-table thead,
#gradeMatrixTableWrap .grades-real-table thead tr,
#gradeMatrixTableWrap .grades-real-table thead th {
  margin-top: 0;
}

@media (max-width: 920px) {
  #gradeMatrixTableWrap .grades-real-table .grade-student-cell small {
    display: block;
    margin: 3px 0 0;
  }
}

/* Calificaciones 10 — fondos de celdas fieles a Android + iconos contextuales visibles */
/*
 * Android no usa el bloqueo de columna como estado de color. Una celda normal o
 * bloqueada conserva el fondo de su fila; únicamente la recuperación activa aplica
 * el naranja suave. Las marcas se representan con contorno/estela, no con relleno.
 */
#gradeMatrixTableWrap .grades-real-table tbody tr:nth-child(odd) > .grade-score-cell,
#gradeMatrixTableWrap .grades-real-table tbody tr:nth-child(odd) > .grade-period-average.grade-total-score-cell,
#gradeMatrixTableWrap .grades-real-table tbody tr:nth-child(odd) > .grade-score-cell.is-locked,
#gradeMatrixTableWrap .grades-real-table tbody tr:nth-child(odd) > .grade-score-cell.is-marked,
#gradeMatrixTableWrap .grades-real-table tbody tr:nth-child(odd) > .grade-period-average.grade-total-score-cell.is-marked {
  background: var(--surface) !important;
}

#gradeMatrixTableWrap .grades-real-table tbody tr:nth-child(even) > .grade-score-cell,
#gradeMatrixTableWrap .grades-real-table tbody tr:nth-child(even) > .grade-period-average.grade-total-score-cell,
#gradeMatrixTableWrap .grades-real-table tbody tr:nth-child(even) > .grade-score-cell.is-locked,
#gradeMatrixTableWrap .grades-real-table tbody tr:nth-child(even) > .grade-score-cell.is-marked,
#gradeMatrixTableWrap .grades-real-table tbody tr:nth-child(even) > .grade-period-average.grade-total-score-cell.is-marked {
  background: var(--ui-surface-subtle, var(--surface-soft)) !important;
}

/* Recuperación: único estado de celda que colorea el fondo, igual que Android. */
#gradeMatrixTableWrap .grades-real-table tbody tr > .grade-score-cell.is-recovery-active,
#gradeMatrixTableWrap .grades-real-table tbody tr > .grade-score-cell.is-recovery-active.is-locked,
#gradeMatrixTableWrap .grades-real-table tbody tr > .grade-score-cell.is-recovery-active.is-marked {
  background: color-mix(in srgb, #ff9800 15%, var(--surface)) !important;
}
#gradeMatrixTableWrap .grades-real-table tbody tr > .grade-score-cell.is-recovery-active:hover {
  background: color-mix(in srgb, #ff9800 19%, var(--surface)) !important;
}

/* Total nunca hereda el azul/blanco histórico de .grade-period-average. */
#gradeMatrixTableWrap .grade-period-average.grade-total-score-cell {
  color: var(--ink);
}

/* El bloqueo conserva únicamente el estado funcional/visual del texto; no pinta fondo. */
#gradeMatrixTableWrap .grade-score-cell.is-locked {
  background-image: none !important;
}

/* SVG reales de la app: se renderizan como imágenes para evitar fallos de mask-image. */
.grades-cell-menu-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 0;
  color: inherit;
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.grades-cell-menu-icon-image {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  opacity: .88;
  pointer-events: none;
}
html[data-theme="dark"] .grades-cell-menu-icon-image {
  filter: invert(1);
  opacity: .86;
}
.grades-cell-menu-option:disabled .grades-cell-menu-icon-image {
  opacity: .48;
}

/* Calificaciones 11 — mensajes integrados al tema, NIE en segunda línea y estela Android */

/* Los mensajes del cuaderno no deben convertirse en una franja blanca en tema oscuro. */
#gradebookMessage.notice {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--line) 82%, var(--primary) 18%);
  background: color-mix(in srgb, var(--surface-soft) 92%, var(--primary) 8%);
}
#gradebookMessage.notice.is-success {
  color: color-mix(in srgb, var(--success) 68%, var(--ink) 32%);
  border-color: color-mix(in srgb, var(--success) 36%, var(--line) 64%);
  background: color-mix(in srgb, var(--success) 12%, var(--surface) 88%);
}
#gradebookMessage.notice.is-error {
  color: color-mix(in srgb, var(--danger) 74%, var(--ink) 26%);
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line) 62%);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface) 88%);
}
#gradebookMessage.notice.is-warning {
  color: color-mix(in srgb, #ffb020 72%, var(--ink) 28%);
  border-color: color-mix(in srgb, #ffb020 36%, var(--line) 64%);
  background: color-mix(in srgb, #ffb020 11%, var(--surface) 89%);
}

/* Nombre en primera línea y NIE en una segunda línea, como dato secundario. */
#gradeMatrixTableWrap .grades-real-table .grade-student-cell strong {
  display: block;
}
#gradeMatrixTableWrap .grades-real-table .grade-student-cell small {
  display: block;
  margin: 4px 0 0;
  line-height: 1.15;
  white-space: nowrap;
}

/*
 * Estela de celda marcada replicada desde EstelaCeldaMarcada() de Android:
 * naranja #FF6A00 + rojo #FF2D1A, recorrido diagonal y ciclo lineal de 1650 ms.
 */
@keyframes gradeMarkedTrailSweep {
  0% { transform: translateX(0); }
  100% { transform: translateX(185%); }
}

#gradeMatrixTableWrap .grade-score-cell.is-marked,
#gradeMatrixTableWrap .grade-period-average.grade-total-score-cell.is-marked {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 0, .36) !important;
}

/* Anula el contorno interior estático usado por el parche anterior. */
#gradeMatrixTableWrap .grade-score-cell.is-marked::after,
#gradeMatrixTableWrap .grade-period-average.grade-total-score-cell.is-marked::after {
  content: none !important;
}

#gradeMatrixTableWrap .grade-score-cell.is-marked::before,
#gradeMatrixTableWrap .grade-period-average.grade-total-score-cell.is-marked::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -20%;
  bottom: -20%;
  left: -250%;
  width: 250%;
  pointer-events: none;
  background: linear-gradient(
    45deg,
    transparent 18%,
    rgba(255, 106, 0, .08) 34%,
    rgba(255, 106, 0, .28) 44%,
    rgba(255, 45, 26, .38) 50%,
    rgba(255, 106, 0, .24) 57%,
    transparent 72%
  );
  animation: gradeMarkedTrailSweep 1650ms linear infinite;
  will-change: transform;
}

/* El contenido permanece por encima de la estela, igual que el Canvas bajo el campo en Compose. */
#gradeMatrixTableWrap .grade-score-cell.is-marked .grade-score-value,
#gradeMatrixTableWrap .grade-period-average.grade-total-score-cell.is-marked .grade-score-value {
  position: relative;
  z-index: 1;
}
#gradeMatrixTableWrap .grade-score-cell.is-marked .grade-cell-indicators,
#gradeMatrixTableWrap .grade-period-average.grade-total-score-cell.is-marked .grade-cell-indicators {
  z-index: 3;
}

/* La recuperación conserva su naranja suave; la estela se superpone sin reemplazarlo. */
#gradeMatrixTableWrap .grade-score-cell.is-recovery-active.is-marked {
  background: color-mix(in srgb, #ff9800 15%, var(--surface)) !important;
}

@media (prefers-reduced-motion: reduce) {
  #gradeMatrixTableWrap .grade-score-cell.is-marked::before,
  #gradeMatrixTableWrap .grade-period-average.grade-total-score-cell.is-marked::before {
    animation: none;
    left: -75%;
  }
}

/* ============================================================
   ASISTENCIA — tabla pegada al borde superior de la card
   2026-08-30 overlay 12
   ============================================================ */
#attendanceMonthlyView .monthly-table-wrap.attendance-real-table-wrap {
  margin-top: 0 !important;
}

/* ========================================================================== */
/* Evaluaciones · rail de aulas + procesos por aula (desktop)                 */
/* ========================================================================== */
body[data-start-module="evaluations"] .page-shell {
  width: min(1500px, calc(100% - 28px));
  padding-top: 24px;
  padding-bottom: 44px;
}

#evaluationsView {
  display: grid;
  gap: 14px;
}
#evaluationsView[hidden] { display: none !important; }

.evaluation-top-card {
  position: sticky;
  top: 10px;
  z-index: 24;
  min-height: 76px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  box-shadow: 0 9px 24px rgba(25, 42, 72, .08);
  backdrop-filter: blur(16px);
}
.evaluation-back-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
}
.evaluation-top-identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
  color: var(--ink);
}
.evaluation-top-identity strong,
.evaluation-top-identity > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evaluation-top-identity strong {
  font-size: 1rem;
  font-weight: 850;
}
.evaluation-top-identity > span:last-child {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 760;
}
.evaluation-top-identity-separator { color: var(--muted); opacity: .55; }
.evaluation-top-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.evaluation-year-control {
  min-height: 42px;
  min-width: 176px;
  padding: 5px 8px 5px 10px;
  display: grid;
  grid-template-columns: 18px auto minmax(78px, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.evaluation-year-control .android-vector-icon {
  width: 17px;
  height: 17px;
  color: var(--primary);
}
.evaluation-year-control select {
  min-width: 0;
  min-height: 30px;
  padding: 4px 24px 4px 6px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: .79rem;
  font-weight: 760;
  text-transform: none;
  letter-spacing: normal;
}
.evaluation-refresh-button,
.evaluation-new-process-button { min-height: 42px; white-space: nowrap; }
.evaluation-new-process-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 14px;
}
.evaluation-new-process-button .android-vector-icon { width: 18px; height: 18px; }

.evaluation-list-shell {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.evaluation-list-layout {
  display: grid;
  grid-template-columns: minmax(225px, 270px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.evaluation-classroom-sidebar {
  position: sticky;
  top: 102px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
  box-shadow: 0 7px 18px rgba(25, 42, 72, .065);
}
.evaluation-sidebar-heading {
  padding: 3px 4px 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}
.evaluation-sidebar-heading small { color: var(--muted); font-size: .68rem; }
.evaluation-classroom-list {
  display: grid;
  gap: 8px;
}
.evaluation-classroom-card {
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 14px;
  color: var(--ink);
  text-align: left;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 3px 9px rgba(26, 40, 70, .045);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.evaluation-classroom-card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  transform: translateY(-1px);
}
.evaluation-classroom-card.is-selected {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  box-shadow: 0 6px 15px color-mix(in srgb, var(--primary) 12%, transparent);
}
.evaluation-classroom-card-icon {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 11px;
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 14%, transparent);
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}
.evaluation-classroom-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.evaluation-classroom-card-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evaluation-classroom-card-copy small {
  color: var(--muted);
  font-size: .69rem;
  font-weight: 650;
}

.evaluation-processes-panel.evaluation-processes-main {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 7px 18px rgba(25, 42, 72, .065);
}
.evaluation-processes-heading {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.evaluation-processes-heading h2 {
  margin: 2px 0 0;
  font-size: 1.12rem;
}
.evaluation-processes-heading p { margin: 4px 0 0; font-size: .78rem; }
.evaluation-processes-kicker {
  color: var(--primary);
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.evaluation-processes-main .evaluation-count {
  flex: none;
  margin-top: 2px;
  background: color-mix(in srgb, var(--primary) 11%, var(--surface-soft));
  color: color-mix(in srgb, var(--primary) 78%, var(--ink));
}
.evaluation-processes-main .evaluation-process-card {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  box-shadow: none;
}
.evaluation-processes-main .evaluation-process-card:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}
.evaluation-processes-main .evaluation-chip {
  background: var(--surface-soft);
  color: var(--muted);
}

.evaluation-create-dialog {
  width: min(94vw, 560px);
  max-width: 560px;
  max-height: min(88vh, 720px);
  padding: 0;
  overflow: auto;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 26px 68px rgba(8, 15, 29, .34);
}
.evaluation-create-dialog::backdrop {
  background: rgba(6, 10, 18, .62);
  backdrop-filter: blur(3px);
}
.evaluation-create-dialog > form { padding: 20px; }
.evaluation-dialog-heading {
  margin-bottom: 3px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}
.evaluation-dialog-heading h2 { margin: 3px 0 0; }
.evaluation-dialog-heading p { margin: 4px 0 0; }
.evaluation-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 4px;
}

html[data-theme="dark"] .evaluation-top-card,
html[data-theme="dark"] .evaluation-classroom-sidebar,
html[data-theme="dark"] .evaluation-processes-panel.evaluation-processes-main,
html[data-theme="dark"] .evaluation-create-dialog {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

@media (max-width: 1050px) {
  .evaluation-top-card { grid-template-columns: auto minmax(180px, 1fr); }
  .evaluation-top-controls { grid-column: 1 / -1; justify-content: flex-end; }
  .evaluation-classroom-sidebar { top: 150px; }
}
@media (max-width: 760px) {
  body[data-start-module="evaluations"] .page-shell { width: min(100% - 18px, 1500px); }
  .evaluation-top-card { position: static; grid-template-columns: 42px minmax(0, 1fr); align-items: center; }
  .evaluation-top-controls { justify-content: stretch; flex-wrap: wrap; }
  .evaluation-year-control { flex: 1 1 160px; }
  .evaluation-refresh-button { flex: 0 0 auto; }
  .evaluation-new-process-button { flex: 1 1 190px; justify-content: center; }
  .evaluation-list-layout { grid-template-columns: 1fr; }
  .evaluation-classroom-sidebar { position: static; }
  .evaluation-classroom-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}
@media (max-width: 520px) {
  .evaluation-top-identity-separator { display: none; }
  .evaluation-top-identity { display: grid; gap: 1px; }
  .evaluation-top-identity > span:last-child { font-size: .72rem; }
  .evaluation-refresh-button { width: 100%; }
  .evaluation-new-process-button { width: 100%; }
  .evaluation-processes-heading { align-items: stretch; flex-direction: column; }
  .evaluation-processes-main .evaluation-count { align-self: flex-start; }
  .evaluation-dialog-actions { display: grid; grid-template-columns: 1fr; }
  .evaluation-dialog-actions .button { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------- */
/* Evaluaciones · detalle de proceso / selector de estudiantes en modal       */
/* -------------------------------------------------------------------------- */
.evaluation-workspace-grid {
  align-items: stretch;
}
.evaluation-workspace-grid > .evaluation-panel {
  height: 100%;
}
.evaluation-process-state-panel,
.evaluation-students-summary-panel {
  display: flex;
  flex-direction: column;
}
.evaluation-process-state-form {
  flex: 1;
}
.evaluation-process-state-form > .button:last-child {
  margin-top: auto;
}
.evaluation-students-summary-panel {
  min-width: 0;
}
.evaluation-students-summary-heading {
  align-items: flex-start;
}
.evaluation-students-summary-heading .evaluation-count {
  flex: none;
}
.evaluation-students-summary-body {
  flex: 1;
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 20px 12px;
  text-align: left;
}
.evaluation-students-summary-visual {
  position: relative;
  width: 118px;
  height: 64px;
  flex: 0 0 118px;
}
.evaluation-students-summary-avatar {
  position: absolute;
  top: 8px;
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-soft));
}
.evaluation-students-summary-avatar::before,
.evaluation-students-summary-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--primary) 72%, var(--ink));
}
.evaluation-students-summary-avatar::before {
  top: 10px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.evaluation-students-summary-avatar::after {
  bottom: 9px;
  width: 25px;
  height: 15px;
  border-radius: 14px 14px 9px 9px;
}
.evaluation-students-summary-avatar:nth-child(1) { left: 0; transform: scale(.9); opacity: .72; }
.evaluation-students-summary-avatar:nth-child(2) { left: 33px; z-index: 2; }
.evaluation-students-summary-avatar:nth-child(3) { right: 0; transform: scale(.9); opacity: .72; }
.evaluation-students-summary-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.evaluation-students-summary-copy strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
}
.evaluation-students-summary-copy span {
  font-size: .78rem;
}
.evaluation-students-open-button {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.evaluation-students-dialog {
  width: min(94vw, 820px);
  max-width: 820px;
  max-height: 86vh;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 26px 68px rgba(8, 15, 29, .34);
}
.evaluation-students-dialog::backdrop {
  background: rgba(6, 10, 18, .62);
  backdrop-filter: blur(3px);
}
.evaluation-students-dialog-shell {
  max-height: 86vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.evaluation-students-dialog-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 20px 20px 14px;
}
.evaluation-students-dialog-heading h2 {
  margin: 6px 0 0;
}
.evaluation-students-dialog-heading p {
  margin: 5px 0 0;
  font-size: .78rem;
}
.evaluation-students-dialog-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--line);
}
.evaluation-students-search-field {
  flex: 1 1 360px;
  max-width: 460px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}
.evaluation-students-search-field input {
  width: 100%;
  min-width: 0;
}
.evaluation-student-dialog-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-height: 160px;
  max-height: min(58vh, 540px);
  overflow: auto;
  padding: 14px 20px 18px;
  align-content: start;
}
.evaluation-student-row {
  min-width: 0;
  min-height: 70px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 97%, var(--surface-soft) 3%);
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.evaluation-student-row:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.evaluation-student-row.is-selected {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.evaluation-student-number {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: color-mix(in srgb, var(--primary) 76%, var(--ink));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-soft));
  font-size: .78rem;
  font-weight: 850;
}
.evaluation-student-main {
  gap: 4px;
}
.evaluation-student-main strong {
  overflow: hidden;
  color: var(--ink);
  font-size: .82rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evaluation-student-main small {
  overflow: hidden;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evaluation-student-check {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  margin: 0;
  padding: 0 !important;
  accent-color: var(--primary);
  cursor: pointer;
}
.evaluation-student-empty {
  grid-column: 1 / -1;
  min-height: 170px;
  display: grid;
  place-content: center;
  gap: 5px;
  text-align: center;
}
.evaluation-student-empty strong {
  color: var(--ink);
}
.evaluation-students-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
}
.evaluation-students-dialog-footer p {
  margin: 0;
  font-size: .72rem;
}
.evaluation-students-dialog-footer .button {
  min-width: 110px;
  justify-content: center;
}

html[data-theme="dark"] .evaluation-students-dialog {
  box-shadow: 0 26px 68px rgba(0, 0, 0, .46);
}

@media (max-width: 760px) {
  .evaluation-students-summary-body {
    min-height: 130px;
    justify-content: flex-start;
  }
  .evaluation-student-dialog-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .evaluation-students-summary-body {
    gap: 12px;
    padding-inline: 0;
  }
  .evaluation-students-summary-visual {
    width: 92px;
    flex-basis: 92px;
    transform: scale(.82);
    transform-origin: left center;
  }
  .evaluation-students-dialog-toolbar,
  .evaluation-students-dialog-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .evaluation-students-search-field {
    max-width: none;
  }
  .evaluation-students-dialog-footer .button {
    width: 100%;
  }
}

/* ========================================================================== */
/* Evaluaciones · detalle por secciones · paridad Referencia H2 / Android     */
/* ========================================================================== */
.evaluation-reference-workspace {
  display: grid;
  gap: 14px;
}
.evaluation-reference-workspace[hidden] { display: none !important; }

.evaluation-process-heading {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 4px 2px 8px;
}
.evaluation-process-back {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  font-size: 1.15rem;
}
.evaluation-process-heading-copy {
  min-width: 0;
}
.evaluation-process-heading-copy h2 {
  margin: 3px 0 2px;
  font-size: clamp(1.24rem, 2vw, 1.62rem);
  line-height: 1.15;
}
.evaluation-process-heading-copy p {
  margin: 0;
}
.evaluation-process-heading-copy .evaluation-revision {
  margin-top: 7px;
  background: color-mix(in srgb, var(--user-primary) 10%, var(--surface));
  color: color-mix(in srgb, var(--user-primary) 76%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--user-primary) 22%, var(--line));
}
.evaluation-process-settings-button {
  align-self: center;
  white-space: nowrap;
}

.evaluation-reference-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--user-primary) 54%, var(--line));
  border-radius: 19px;
  background: var(--surface);
  box-shadow: none;
}
.evaluation-reference-card-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  background: var(--user-primary, var(--primary));
  color: var(--on-user-primary, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--user-primary) 70%, var(--line));
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.evaluation-reference-card-header.is-generate {
  background: color-mix(in srgb, var(--accent) 90%, #6e5e16 10%);
  color: #2d2a1d;
  border-bottom-color: color-mix(in srgb, var(--accent) 72%, #8a7826 28%);
}
html[data-theme="dark"] .evaluation-reference-card-header.is-generate {
  background: color-mix(in srgb, var(--accent) 56%, #25220f 44%);
  color: #fff4bd;
  border-bottom-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.evaluation-reference-number {
  flex: none;
  min-width: 34px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 13%, transparent);
  color: inherit;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .02em;
}
.evaluation-reference-title {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.25;
}
.evaluation-reference-count,
.evaluation-reference-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 13%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  color: inherit;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
}
.evaluation-reference-chip.is-required {
  background: #dcfce7;
  color: #14532d;
  border-color: #86efac;
}
.evaluation-reference-chip.is-optional {
  background: #f8fafc;
  color: #334155;
  border-color: #cbd5e1;
}
.evaluation-reference-card-body {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 15px;
  background: color-mix(in srgb, var(--surface-soft) 30%, var(--surface));
}
.evaluation-reference-card-body > :first-child { margin-top: 0; }
.evaluation-reference-card-body > :last-child { margin-bottom: 0; }
.evaluation-reference-intro {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
}
.evaluation-reference-body-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.evaluation-reference-body-heading p { margin: 0; }

.evaluation-reference-icon,
.evaluation-inline-section-icon {
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.evaluation-inline-section-icon {
  width: 17px;
  height: 17px;
}
.evaluation-reference-icon.ic-students,
.evaluation-inline-section-icon.ic-students {
  -webkit-mask-image: url(../assets/evaluation-sections/students.svg);
  mask-image: url(../assets/evaluation-sections/students.svg);
}
.evaluation-reference-icon.ic-curriculum {
  -webkit-mask-image: url(../assets/evaluation-sections/curriculum.svg);
  mask-image: url(../assets/evaluation-sections/curriculum.svg);
}
.evaluation-reference-icon.ic-refuerzo {
  -webkit-mask-image: url(../assets/evaluation-sections/f1_refuerzo.svg);
  mask-image: url(../assets/evaluation-sections/f1_refuerzo.svg);
}
.evaluation-reference-icon.ic-activity {
  -webkit-mask-image: url(../assets/evaluation-sections/actividad_recuperacion.svg);
  mask-image: url(../assets/evaluation-sections/actividad_recuperacion.svg);
}
.evaluation-reference-workspace[data-process-mode="ordinary"] .evaluation-reference-icon.ic-activity {
  -webkit-mask-image: url(../assets/evaluation-sections/actividad_ordinaria.svg);
  mask-image: url(../assets/evaluation-sections/actividad_ordinaria.svg);
}
.evaluation-reference-icon.ic-instrument {
  -webkit-mask-image: url(../assets/evaluation-sections/f2_instrumento.svg);
  mask-image: url(../assets/evaluation-sections/f2_instrumento.svg);
}
.evaluation-reference-icon.ic-result {
  -webkit-mask-image: url(../assets/evaluation-sections/f3_parametros.svg);
  mask-image: url(../assets/evaluation-sections/f3_parametros.svg);
}
.evaluation-reference-icon.ic-generar {
  -webkit-mask-image: url(../assets/evaluation-sections/generar.svg);
  mask-image: url(../assets/evaluation-sections/generar.svg);
}
.evaluation-inline-section-icon.ic-settings {
  -webkit-mask-image: url(../assets/evaluation-sections/general_settings.svg);
  mask-image: url(../assets/evaluation-sections/general_settings.svg);
}

.evaluation-number-ordinary { display: none; }
.evaluation-reference-workspace[data-process-mode="ordinary"] .evaluation-number-recovery { display: none; }
.evaluation-reference-workspace[data-process-mode="ordinary"] .evaluation-number-ordinary { display: inline-grid; }
.evaluation-reference-workspace[data-process-mode="ordinary"] .evaluation-recovery-only { display: none !important; }
.evaluation-reference-workspace[data-process-mode="recovery"] .evaluation-ordinary-only { display: none !important; }

/* Estudiantes: resumen compacto; la lista completa permanece en el modal. */
.evaluation-students-reference-body {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  align-items: center;
}
.evaluation-students-reference-body .evaluation-students-summary-body {
  min-height: 102px;
  justify-content: flex-start;
  padding: 8px 4px;
}
.evaluation-students-reference-body .evaluation-students-open-button {
  margin: 0;
  width: 100%;
  justify-content: center;
}

/* Currículo y contenido interno: superficies discretas dentro de la card principal. */
.evaluation-reference-card .evaluation-curriculum-filters,
.evaluation-reference-card .evaluation-curriculum-grid,
.evaluation-reference-card .evaluation-instrument-tools,
.evaluation-reference-card .evaluation-scale-box,
.evaluation-reference-card .evaluation-manual-box {
  min-width: 0;
}
.evaluation-reference-card .evaluation-catalog-item,
.evaluation-reference-card .evaluation-selected-item,
.evaluation-reference-card .evaluation-activity-card,
.evaluation-reference-card .evaluation-criterion-card,
.evaluation-reference-card .evaluation-generated-document,
.evaluation-reference-card .evaluation-closure-row {
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-soft));
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
}

/* Bloques de generar: las acciones se leen como una sección del flujo, no como otro panel. */
.evaluation-document-reference-body {
  gap: 12px;
}
.evaluation-document-card-tools {
  display: flex;
  justify-content: flex-end;
}
.evaluation-reference-document-actions,
.evaluation-reference-card .evaluation-optional-documents {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
  gap: 10px 18px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}
.evaluation-reference-document-actions > p.field-help {
  grid-column: 1 / -1;
  margin: 0;
}
.evaluation-reference-document-actions > div:first-child > strong,
.evaluation-reference-card .evaluation-optional-documents > div:first-child > strong {
  display: none;
}
.evaluation-reference-document-actions > div:first-child p,
.evaluation-reference-card .evaluation-optional-documents > div:first-child p {
  margin: 0;
}
.evaluation-reference-document-actions .form-actions,
.evaluation-reference-card .evaluation-optional-documents .form-actions {
  justify-content: flex-end;
}

/* Los documentos generados son un registro auxiliar al final del flujo. */
.evaluation-generated-files-card .evaluation-reference-card-header .button {
  min-height: 34px;
  padding: 6px 10px;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.evaluation-generated-files-card .evaluation-drive-status {
  margin: 0;
}
.evaluation-generated-files-card #evaluationDocumentProgress {
  margin: 0;
}

/* Estado/cabecera del proceso y firmantes se editan en modal, como en Android. */
.evaluation-reference-dialog {
  width: min(92vw, 720px);
  max-width: 720px;
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 26px 68px rgba(8, 15, 29, .34);
}
.evaluation-reference-dialog::backdrop {
  background: rgba(6, 10, 18, .62);
  backdrop-filter: blur(3px);
}
.evaluation-reference-dialog-shell {
  max-height: 88vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.evaluation-reference-dialog-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.evaluation-reference-dialog-heading h2 {
  margin: 5px 0 0;
}
.evaluation-reference-dialog-heading p {
  margin: 5px 0 0;
  font-size: .8rem;
}
.evaluation-reference-dialog-body {
  min-height: 0;
  overflow: auto;
  padding: 18px 20px 20px;
}
.evaluation-reference-dialog .evaluation-dialog-actions {
  margin-top: 4px;
  justify-content: flex-end;
}

/* La antigua grilla doble de Estado/Estudiantes ya no participa en el detalle. */
.evaluation-reference-workspace .evaluation-workspace-grid,
.evaluation-reference-workspace .evaluation-process-state-panel,
.evaluation-reference-workspace .evaluation-students-summary-panel {
  display: none !important;
}

@media (max-width: 900px) {
  .evaluation-students-reference-body,
  .evaluation-reference-document-actions,
  .evaluation-reference-card .evaluation-optional-documents {
    grid-template-columns: 1fr;
  }
  .evaluation-reference-document-actions .form-actions,
  .evaluation-reference-card .evaluation-optional-documents .form-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 680px) {
  .evaluation-process-heading {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .evaluation-process-settings-button {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
  .evaluation-reference-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 10px 12px;
  }
  .evaluation-reference-title {
    flex-basis: calc(100% - 82px);
  }
  .evaluation-reference-count,
  .evaluation-reference-chip {
    margin-left: 44px;
  }
  .evaluation-reference-card-body {
    padding: 12px;
  }
  .evaluation-reference-body-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .evaluation-reference-body-heading .button {
    width: 100%;
    justify-content: center;
  }
}

/* Correcciones de especificidad sobre estilos heredados del layout anterior. */
.evaluation-reference-card.evaluation-workflow-panel {
  display: block;
  gap: 0;
}
.evaluation-reference-card .evaluation-optional-documents {
  margin: 0;
  padding: 0;
  border: 0;
}


/* -------------------------------------------------------------------------- */
/* Evaluaciones · réplica visual interna del Generador H2 de referencia · 16 */
/* -------------------------------------------------------------------------- */
.evaluation-reference-workspace {
  width: min(100%, 1120px);
  margin-inline: auto;
  gap: 32px;
}

/* Cabecera de detalle: como el view-head del módulo original, sin ruido técnico. */
.evaluation-reference-workspace .evaluation-process-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 0 2px;
}
.evaluation-reference-workspace .evaluation-process-heading .eyebrow { display: none; }
.evaluation-reference-workspace .evaluation-process-heading-copy h2 {
  margin: 0 0 3px;
  font-size: 1.28rem;
  line-height: 1.18;
}
.evaluation-reference-workspace .evaluation-process-heading-copy p { font-size: .79rem; }
.evaluation-reference-workspace .evaluation-process-heading-copy .evaluation-revision {
  display: inline-flex;
  width: fit-content;
  margin-top: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
}

/* Card real del módulo de referencia: header pegado al cuerpo y padding amplio. */
.evaluation-reference-workspace .evaluation-reference-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--user-primary) 22%, var(--line));
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(8, 15, 29, .06), 0 6px 16px rgba(8, 15, 29, .06);
}
.evaluation-reference-workspace .evaluation-reference-card-header {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.evaluation-reference-workspace .evaluation-reference-number {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: .76;
  font-size: inherit;
  letter-spacing: inherit;
}
.evaluation-reference-workspace .evaluation-reference-title {
  min-width: 0;
  flex: 0 1 auto;
}
.evaluation-reference-workspace .evaluation-reference-count {
  margin-left: auto;
  min-height: 24px;
  padding: 3px 8px;
  font-size: .67rem;
}
.evaluation-reference-workspace .evaluation-reference-chip { margin-left: 0; }
.evaluation-reference-workspace .evaluation-reference-card-body {
  display: grid;
  gap: 20px;
  padding: 24px;
  background: var(--surface);
}
.evaluation-reference-workspace .evaluation-reference-intro {
  max-width: 88ch;
  font-size: .86rem;
  line-height: 1.52;
}

/* Los SVG se dibujan inline: evita los fallos de mask-image vistos en algunos navegadores. */
.evaluation-reference-workspace svg.evaluation-reference-icon,
.evaluation-reference-workspace svg.evaluation-inline-section-icon,
.evaluation-reference-workspace .evaluation-reference-activity-icon svg {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.evaluation-reference-workspace svg.evaluation-inline-section-icon { width: 17px; height: 17px; }
.evaluation-reference-workspace .evaluation-reference-activity-icon {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.evaluation-reference-workspace .evaluation-reference-activity-icon svg { position: absolute; inset: 0; }
.evaluation-reference-workspace .evaluation-reference-activity-svg--ordinary { display: none; }
.evaluation-reference-workspace[data-process-mode="ordinary"] .evaluation-reference-activity-svg--recovery { display: none; }
.evaluation-reference-workspace[data-process-mode="ordinary"] .evaluation-reference-activity-svg--ordinary { display: block; }

/* Tipografía y tamaños de campos del módulo original, aislados a Evaluaciones. */
.evaluation-reference-workspace .evaluation-reference-card label:not(.evaluation-check-label):not(.evaluation-inline-format),
.evaluation-reference-dialog label:not(.evaluation-check-label),
.evaluation-students-dialog label:not(.evaluation-student-row) {
  display: grid;
  gap: .35rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .70rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.evaluation-reference-workspace .evaluation-reference-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.evaluation-reference-workspace .evaluation-reference-card select,
.evaluation-reference-workspace .evaluation-reference-card textarea,
.evaluation-reference-dialog input:not([type="checkbox"]):not([type="radio"]),
.evaluation-reference-dialog select,
.evaluation-reference-dialog textarea,
.evaluation-students-dialog input[type="search"] {
  min-height: 40px;
  padding: .52rem .68rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
}
.evaluation-reference-workspace .evaluation-reference-card textarea,
.evaluation-reference-dialog textarea { min-height: 88px; resize: vertical; }
.evaluation-reference-workspace .evaluation-reference-card input:focus,
.evaluation-reference-workspace .evaluation-reference-card select:focus,
.evaluation-reference-workspace .evaluation-reference-card textarea:focus,
.evaluation-reference-dialog input:focus,
.evaluation-reference-dialog select:focus,
.evaluation-reference-dialog textarea:focus {
  border-color: var(--user-primary, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--user-primary, var(--primary)) 12%, transparent);
}
.evaluation-reference-workspace .evaluation-reference-card .form-stack,
.evaluation-reference-dialog .form-stack { gap: 20px; }
.evaluation-reference-workspace .evaluation-reference-card .compact-form,
.evaluation-reference-dialog .compact-form { margin-top: 0; }
.evaluation-reference-workspace .evaluation-reference-card .field-help {
  margin: 0;
  font-size: .72rem;
  line-height: 1.45;
}

/* Botones más compactos, como btn-secondary/btn-accent del generador original. */
.evaluation-reference-workspace .evaluation-reference-card .button,
.evaluation-reference-dialog .button,
.evaluation-students-dialog .button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: .82rem;
  font-weight: 680;
}

/* Estudiantes: resumen simple, sin una ilustración que compita con el contenido. */
.evaluation-reference-workspace .evaluation-students-reference-body {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.evaluation-reference-workspace .evaluation-students-summary-visual { display: none; }
.evaluation-reference-workspace .evaluation-students-summary-body {
  min-height: 0;
  padding: 0;
}
.evaluation-reference-workspace .evaluation-students-summary-copy strong { font-size: .92rem; }
.evaluation-reference-workspace .evaluation-students-open-button {
  width: auto;
  min-width: 190px;
}

/* Currículo: mismo flujo del original: selectores arriba, búsqueda debajo,
   catálogo primero y selección debajo; no dos paneles compitiendo lado a lado. */
.evaluation-reference-workspace .evaluation-curriculum-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.evaluation-reference-workspace .evaluation-curriculum-search-field { grid-column: 1 / -1; }
.evaluation-reference-workspace .evaluation-inline-toggle {
  min-height: 22px;
  margin-top: 4px;
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 550;
  letter-spacing: normal;
  text-transform: none;
}
.evaluation-reference-workspace .evaluation-inline-toggle input,
.evaluation-reference-workspace .evaluation-check-label input {
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
}
.evaluation-reference-workspace .evaluation-curriculum-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.evaluation-reference-workspace .evaluation-curriculum-grid > div + div {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.evaluation-reference-workspace .evaluation-curriculum-grid h4,
.evaluation-reference-workspace .evaluation-scale-box > strong,
.evaluation-reference-workspace .evaluation-manual-box > strong {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .70rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.evaluation-reference-workspace .evaluation-catalog-list {
  max-height: 360px;
  overflow: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.evaluation-reference-workspace .evaluation-catalog-item,
.evaluation-reference-workspace .evaluation-selected-item {
  min-height: 0;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 0;
  background: transparent;
}
.evaluation-reference-workspace .evaluation-catalog-item:last-child,
.evaluation-reference-workspace .evaluation-selected-item:last-child { border-bottom: 0; }
.evaluation-reference-workspace .evaluation-selected-list {
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.evaluation-reference-workspace .evaluation-manual-box {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.evaluation-reference-workspace .evaluation-manual-row {
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 10px;
}

/* Refuerzo: los cuatro selectores de fecha son una grilla limpia y simétrica. */
.evaluation-reference-workspace .evaluation-workflow-dates {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Actividades: como el original, filas separadas dentro de la sección, no card dentro de card. */
.evaluation-reference-workspace .evaluation-activity-list { gap: 0; }
.evaluation-reference-workspace .evaluation-activity-card {
  padding: 20px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.evaluation-reference-workspace .evaluation-activity-card:first-child {
  padding-top: 0;
  border-top: 0;
}
.evaluation-reference-workspace .evaluation-activity-card:last-child { padding-bottom: 0; }
.evaluation-reference-workspace .evaluation-activity-heading {
  margin-bottom: 12px;
}
.evaluation-reference-workspace .evaluation-activity-heading strong {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .70rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.evaluation-reference-workspace .evaluation-rich-label,
.evaluation-reference-workspace .evaluation-content-panel-head strong {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .70rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.evaluation-reference-workspace .evaluation-content-panel {
  border-color: var(--line);
  border-radius: 3px;
}

/* Instrumento: evita el checkbox flotando al lado de textfields de distinta altura. */
.evaluation-reference-workspace .evaluation-instrument-head {
  grid-template-columns: minmax(170px, .65fr) minmax(260px, 1.35fr);
  align-items: end;
  gap: 16px;
}
.evaluation-reference-workspace .evaluation-instrument-head .evaluation-check-label {
  grid-column: 1 / -1;
}
.evaluation-reference-workspace .evaluation-check-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.evaluation-reference-workspace .evaluation-scale-box,
.evaluation-reference-workspace .evaluation-instrument-tools {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
}
.evaluation-reference-workspace .evaluation-criterion-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
}

/* Generar: disposición original, descripción a la izquierda y acciones a la derecha. */
.evaluation-reference-workspace .evaluation-document-card-tools {
  justify-content: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.evaluation-reference-workspace .evaluation-reference-document-actions,
.evaluation-reference-workspace .evaluation-optional-documents {
  grid-template-columns: minmax(240px, .85fr) minmax(0, 1.6fr);
  gap: 16px 24px;
}
.evaluation-reference-workspace .evaluation-reference-document-actions .form-actions,
.evaluation-reference-workspace .evaluation-optional-documents .form-actions {
  justify-content: flex-end;
  align-items: center;
}
.evaluation-reference-workspace .evaluation-inline-format {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
}
.evaluation-reference-workspace .evaluation-inline-format select {
  width: auto;
  min-width: 78px;
  min-height: 36px;
  padding: 0 28px 0 9px;
}

/* Cierre: campos de cada estudiante con la misma medida y alineación. */
.evaluation-reference-workspace .evaluation-closure-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.evaluation-reference-workspace .evaluation-closure-row {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
}

/* Diálogos: usan los mismos campos compactos de las cards. */
.evaluation-reference-dialog { border-radius: 16px; }
.evaluation-reference-dialog-heading { padding: 18px 20px 14px; }
.evaluation-reference-dialog-body { padding: 20px; }
.evaluation-reference-dialog .field-row { gap: 16px; }
.evaluation-reference-dialog .evaluation-check-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.evaluation-reference-dialog .evaluation-check-label input {
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .evaluation-reference-workspace .evaluation-curriculum-filters,
  .evaluation-reference-workspace .evaluation-workflow-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evaluation-reference-workspace .evaluation-curriculum-search-field { grid-column: 1 / -1; }
  .evaluation-reference-workspace .evaluation-reference-document-actions,
  .evaluation-reference-workspace .evaluation-optional-documents { grid-template-columns: 1fr; }
  .evaluation-reference-workspace .evaluation-reference-document-actions .form-actions,
  .evaluation-reference-workspace .evaluation-optional-documents .form-actions { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .evaluation-reference-workspace { gap: 20px; }
  .evaluation-reference-workspace .evaluation-reference-card-header { padding: .8rem 1rem; }
  .evaluation-reference-workspace .evaluation-reference-card-body { padding: 18px; }
  .evaluation-reference-workspace .evaluation-students-reference-body,
  .evaluation-reference-workspace .evaluation-curriculum-filters,
  .evaluation-reference-workspace .evaluation-workflow-dates,
  .evaluation-reference-workspace .evaluation-instrument-head,
  .evaluation-reference-workspace .evaluation-manual-row,
  .evaluation-reference-workspace .evaluation-closure-fields { grid-template-columns: 1fr; }
  .evaluation-reference-workspace .evaluation-curriculum-search-field { grid-column: auto; }
  .evaluation-reference-workspace .evaluation-students-open-button { width: 100%; }
  .evaluation-reference-workspace .evaluation-reference-title { flex-basis: calc(100% - 72px); }
}


/* ========================================================================== */
/* Evaluaciones · overlay 17                                                  */
/* Toolbar única + contraste dark + catálogo curricular filtrado por grado.   */
/* ========================================================================== */

/* app.js agrega este chrome global a los módulos. Evaluaciones ya tiene su
   toolbar propia, por lo que ocultamos únicamente la copia redundante. */
#evaluationsView > .module-context-bar {
  display: none !important;
}

/* En oscuro, las cards de cada fase/apartado quedan ligeramente más claras
   que los campos para recuperar la jerarquía visual del generador original. */
html[data-theme="dark"] .evaluation-reference-workspace .evaluation-reference-card,
html[data-theme="dark"] .evaluation-reference-workspace .evaluation-reference-card-body {
  background: color-mix(in srgb, var(--surface) 94%, #fff 6%);
}

/* Los controles permanecen sobre el surface base (más oscuro), de modo que
   se distinguen de la card sin introducir un color nuevo o alterar el tema. */
html[data-theme="dark"] .evaluation-reference-workspace .evaluation-reference-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] .evaluation-reference-workspace .evaluation-reference-card select,
html[data-theme="dark"] .evaluation-reference-workspace .evaluation-reference-card textarea {
  background: var(--surface);
}


/* ========================================================================== */
/* Evaluaciones · overlay 18                                                  */
/* Currículo: filtro de grado fiable + alineación de controles.               */
/* ========================================================================== */

.evaluation-reference-workspace .evaluation-curriculum-options-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 28px;
  margin: -2px 0 10px;
}

.evaluation-reference-workspace .evaluation-curriculum-all-grades {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.evaluation-reference-workspace .evaluation-curriculum-all-grades input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.evaluation-reference-workspace .evaluation-curriculum-filters {
  align-items: end;
}

.evaluation-reference-workspace .evaluation-curriculum-filters > label {
  align-self: stretch;
  grid-template-rows: auto 44px;
}

.evaluation-reference-workspace .evaluation-curriculum-filters > label > select,
.evaluation-reference-workspace .evaluation-curriculum-filters > label > input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
}

.evaluation-reference-workspace .evaluation-curriculum-search-field {
  grid-template-rows: auto 44px;
}

/* Un pequeño respiro adicional dentro de Catálogo y Seleccionados. Los
   estados vacíos antes heredaban margin:0/padding:0 y parecían pegados al borde. */
.evaluation-reference-workspace .evaluation-curriculum-grid > div {
  padding-inline: 4px;
}

.evaluation-reference-workspace .evaluation-curriculum-grid h4 {
  padding-inline: 2px;
}

.evaluation-reference-workspace .evaluation-catalog-list > p.muted,
.evaluation-reference-workspace .evaluation-selected-list > p.muted {
  margin: 0;
  padding: 14px 16px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .evaluation-reference-workspace .evaluation-curriculum-options-row {
    justify-content: flex-start;
  }
}

/* ========================================================================== */
/* Evaluaciones · overlay 19                                                  */
/* Currículo compacto + actividad alineada + editor/tablas integrados al tema */
/* ========================================================================== */

/* El texto introductorio y "Ver todos los grados" comparten la misma fila. */
.evaluation-reference-workspace .evaluation-curriculum-intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.evaluation-reference-workspace .evaluation-curriculum-intro-row .evaluation-reference-intro {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.evaluation-reference-workspace .evaluation-curriculum-intro-row .evaluation-curriculum-all-grades {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
/* Neutraliza el layout del overlay anterior por si quedó cacheado junto al CSS. */
.evaluation-reference-workspace .evaluation-curriculum-options-row { display: none; }

/* Actividad ordinaria: título amplio + tipo compacto en la primera fila. */
.evaluation-reference-workspace .evaluation-activity-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(235px, 31%);
  gap: 16px;
  align-items: end;
}
.evaluation-reference-workspace .evaluation-activity-head-row > label,
.evaluation-reference-workspace .evaluation-activity-meta-row > label {
  min-width: 0;
}
.evaluation-reference-workspace .evaluation-activity-type-field select {
  width: 100%;
}

/* Segunda fila: ponderación + las tres fechas, todas con la misma altura. */
.evaluation-reference-workspace .evaluation-activity-meta-row {
  display: grid;
  grid-template-columns: minmax(125px, .62fr) repeat(3, minmax(150px, 1fr));
  gap: 16px;
  align-items: end;
}
.evaluation-reference-workspace .evaluation-activity-meta-row > label > input,
.evaluation-reference-workspace .evaluation-activity-meta-row > label > select,
.evaluation-reference-workspace .evaluation-activity-head-row > label > input,
.evaluation-reference-workspace .evaluation-activity-head-row > label > select {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
}
/* Recuperación no tiene ponderación: sus tres fechas ocupan el ancho por igual. */
.evaluation-reference-workspace[data-process-mode="recovery"] .evaluation-activity-meta-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* El editor enriquecido deja de introducir superficies blancas ajenas al tema. */
.evaluation-reference-workspace .evaluation-format-button {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  color: var(--ink);
  box-shadow: none;
}
.evaluation-reference-workspace .evaluation-format-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--user-primary) 34%, var(--line));
  background: color-mix(in srgb, var(--user-primary) 9%, var(--surface-soft));
}
.evaluation-reference-workspace .evaluation-rich-editor {
  min-height: 126px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}
.evaluation-reference-workspace .evaluation-rich-editor:focus {
  border-color: color-mix(in srgb, var(--user-primary) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--user-primary) 11%, transparent);
}
.evaluation-reference-workspace .evaluation-rich-editor:empty::before {
  color: var(--muted);
}

/* Tabla insertada: una grilla sencilla, sin "textfields blancos" dentro de cada celda. */
.evaluation-reference-workspace .evaluation-content-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-soft) 52%, var(--surface));
}
.evaluation-reference-workspace .evaluation-table-controls {
  grid-template-columns: 86px 86px auto;
  gap: 8px;
}
.evaluation-reference-workspace .evaluation-table-editor {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.evaluation-reference-workspace .evaluation-table-editor table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: transparent;
}
.evaluation-reference-workspace .evaluation-table-editor td {
  min-width: 112px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  vertical-align: top;
}
.evaluation-reference-workspace .evaluation-table-editor tr:last-child td { border-bottom: 0; }
.evaluation-reference-workspace .evaluation-table-editor td:last-child { border-right: 0; }
.evaluation-reference-workspace .evaluation-table-editor textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 9px 10px;
  resize: vertical;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  outline: none;
  line-height: 1.35;
}
.evaluation-reference-workspace .evaluation-table-editor textarea:focus {
  background: color-mix(in srgb, var(--user-primary) 6%, var(--surface)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--user-primary) 50%, var(--line)) !important;
}

@media (max-width: 900px) {
  .evaluation-reference-workspace .evaluation-activity-head-row {
    grid-template-columns: minmax(0, 1fr) minmax(210px, .55fr);
  }
  .evaluation-reference-workspace .evaluation-activity-meta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .evaluation-reference-workspace .evaluation-curriculum-intro-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .evaluation-reference-workspace .evaluation-activity-head-row,
  .evaluation-reference-workspace .evaluation-activity-meta-row,
  .evaluation-reference-workspace[data-process-mode="recovery"] .evaluation-activity-meta-row {
    grid-template-columns: 1fr;
  }
  .evaluation-reference-workspace .evaluation-table-controls {
    grid-template-columns: 1fr 1fr;
  }
  .evaluation-reference-workspace .evaluation-table-controls .button {
    grid-column: 1 / -1;
  }
}

/* ========================================================================== */
/* Evaluaciones · overlay 20                                                  */
/* Tabla autoalto + opciones de imagen fieles a referencia + sembrado visible. */
/* ========================================================================== */

/* Las celdas de tablas de actividad crecen con el contenido y no pueden
   redimensionarse manualmente. */
.evaluation-reference-workspace .evaluation-table-editor textarea {
  min-height: 38px;
  height: 38px;
  resize: none !important;
  overflow-y: hidden;
  line-height: 1.35;
}

/* Imagen: pie arriba; Tamaño y Posición comparten fila, igual al módulo fuente. */
.evaluation-reference-workspace .evaluation-image-options {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.evaluation-reference-workspace .evaluation-image-document-options {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, .8fr);
  gap: 14px;
  align-items: end;
}
.evaluation-reference-workspace .evaluation-image-size-field,
.evaluation-reference-workspace .evaluation-image-position-field {
  min-width: 0;
}
.evaluation-reference-workspace .evaluation-image-position-field {
  display: grid;
  gap: 7px;
}
.evaluation-reference-workspace .evaluation-control-label {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .70rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.evaluation-reference-workspace .evaluation-image-position-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}
.evaluation-reference-workspace .evaluation-image-position-button {
  width: 46px;
  height: 42px;
  padding: 8px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
}
.evaluation-reference-workspace .evaluation-image-position-button svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}
.evaluation-reference-workspace .evaluation-image-position-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--user-primary) 40%, var(--line));
  color: var(--ink);
  background: color-mix(in srgb, var(--user-primary) 6%, var(--surface));
}
.evaluation-reference-workspace .evaluation-image-position-button.is-active {
  border-color: color-mix(in srgb, var(--user-primary) 66%, var(--line));
  color: var(--user-primary);
  background: color-mix(in srgb, var(--user-primary) 12%, var(--surface));
}
.evaluation-reference-workspace .evaluation-image-position-button:disabled {
  cursor: default;
  opacity: .55;
}

/* Sembrar indicadores queda visible junto a Guardar instrumento. La función y
   las mutaciones son las existentes; solo cambia su ubicación visual. */
.evaluation-reference-workspace .evaluation-instrument-main-actions {
  align-items: center;
}
.evaluation-reference-workspace #evaluationSeedCriteria {
  min-width: 176px;
}
.evaluation-reference-workspace .evaluation-criteria-toolbar {
  justify-content: flex-start;
}
.evaluation-reference-workspace .evaluation-new-criterion {
  max-width: 760px;
}

@media (max-width: 760px) {
  .evaluation-reference-workspace .evaluation-image-document-options {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------- */
/* Evaluaciones · Instrumentos: tabla editable + asistente Android (Overlay 21) */
/* -------------------------------------------------------------------------- */
.evaluation-reference-workspace .evaluation-criteria-editor {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.evaluation-reference-workspace .evaluation-instrument-assistant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
  grid-template-areas:
    "copy ai"
    "copy apps"
    "status status";
  align-items: center;
  gap: 10px 18px;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--user-primary) 24%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--user-primary) 7%, var(--surface));
}
.evaluation-reference-workspace .evaluation-instrument-assistant-copy {
  grid-area: copy;
  min-width: 0;
}
.evaluation-reference-workspace .evaluation-instrument-assistant-copy strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}
.evaluation-reference-workspace .evaluation-instrument-assistant-copy p {
  max-width: 760px;
}
.evaluation-reference-workspace .evaluation-ai-instrument-button {
  grid-area: ai;
  width: 100%;
  min-height: 42px;
}
.evaluation-reference-workspace .evaluation-appscript-actions {
  grid-area: apps;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.evaluation-reference-workspace .evaluation-appscript-actions .button {
  min-width: 0;
  min-height: 40px;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.evaluation-reference-workspace .evaluation-appscript-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  object-fit: contain;
}
.evaluation-reference-workspace .evaluation-instrument-tools-status {
  grid-area: status;
  min-height: 1.2em;
  margin: 0;
}

.evaluation-reference-workspace .evaluation-criteria-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.evaluation-reference-workspace .evaluation-criteria-toolbar .button {
  min-height: 38px;
}

.evaluation-reference-workspace .evaluation-criteria-table-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}
.evaluation-reference-workspace .evaluation-criteria-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--ink);
}
.evaluation-reference-workspace .evaluation-criteria-table th,
.evaluation-reference-workspace .evaluation-criteria-table td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
  vertical-align: top;
}
.evaluation-reference-workspace .evaluation-criteria-table th:last-child,
.evaluation-reference-workspace .evaluation-criteria-table td:last-child {
  border-right: 0;
}
.evaluation-reference-workspace .evaluation-criteria-table tbody tr:last-child td {
  border-bottom: 0;
}
.evaluation-reference-workspace .evaluation-criteria-table th {
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}
.evaluation-reference-workspace .evaluation-criteria-table th > span,
.evaluation-reference-workspace .evaluation-criteria-table th > small {
  display: block;
}
.evaluation-reference-workspace .evaluation-criteria-table th > span {
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.evaluation-reference-workspace .evaluation-criteria-table th > small {
  margin-top: 2px;
  font-size: .62rem;
  font-weight: 650;
}
.evaluation-reference-workspace .evaluation-criteria-col-criterion {
  width: 25%;
}
.evaluation-reference-workspace .evaluation-criteria-col-actions {
  width: 44px;
}
.evaluation-reference-workspace .evaluation-criteria-cell-input {
  display: block;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 10px 11px;
  overflow: hidden;
  resize: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
  line-height: 1.35;
}
.evaluation-reference-workspace .evaluation-criteria-cell-input.is-criterion {
  font-weight: 650;
}
.evaluation-reference-workspace .evaluation-criteria-cell-input.is-descriptor {
  color: var(--muted);
  font-size: .79rem;
}
.evaluation-reference-workspace .evaluation-criteria-cell-input:focus {
  background: color-mix(in srgb, var(--user-primary) 7%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--user-primary) 58%, transparent);
}
.evaluation-reference-workspace .evaluation-criterion-source {
  display: block;
  padding: 0 11px 9px;
  color: var(--muted);
  font-size: .65rem;
  line-height: 1.25;
}
.evaluation-reference-workspace .evaluation-checklist-mark,
.evaluation-reference-workspace .evaluation-checklist-observation {
  height: 46px;
  padding: 12px 10px !important;
  color: var(--muted);
  text-align: center;
}
.evaluation-reference-workspace .evaluation-checklist-mark {
  font-size: 1rem;
}
.evaluation-reference-workspace .evaluation-criteria-row-actions {
  width: 44px;
  text-align: center;
  vertical-align: middle !important;
}
.evaluation-reference-workspace .evaluation-criteria-remove {
  width: 32px;
  height: 32px;
  margin: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.evaluation-reference-workspace .evaluation-criteria-remove:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger, #c24132) 10%, transparent);
  color: var(--danger, #c24132);
}
.evaluation-reference-workspace .evaluation-criteria-table tr.is-draft td {
  background: color-mix(in srgb, var(--user-primary) 3.5%, var(--surface));
}
.evaluation-reference-workspace .evaluation-criteria-table tr.is-saving {
  opacity: .72;
}
.evaluation-reference-workspace .evaluation-criteria-empty-row td {
  padding: 18px 14px;
  color: var(--muted);
  font-size: .8rem;
  text-align: center;
}

body.dark .evaluation-reference-workspace .evaluation-instrument-assistant {
  background: color-mix(in srgb, var(--user-primary) 9%, var(--surface));
}
body.dark .evaluation-reference-workspace .evaluation-criteria-table-shell,
body.dark .evaluation-reference-workspace .evaluation-criteria-table {
  background: var(--surface);
}
body.dark .evaluation-reference-workspace .evaluation-criteria-table th {
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

@media (max-width: 900px) {
  .evaluation-reference-workspace .evaluation-instrument-assistant {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "ai"
      "apps"
      "status";
  }
}
@media (max-width: 620px) {
  .evaluation-reference-workspace .evaluation-appscript-actions {
    grid-template-columns: 1fr;
  }
}


/* ========================================================================== */
/* Evaluaciones · overlay 22                                                  */
/* Instrumentos autoalto + asistente compacto + Apps Script alineado.         */
/* ========================================================================== */

/* Ninguna celda del instrumento se redimensiona manualmente. El textarea
   crece solo con scrollHeight desde evaluations.js. */
.evaluation-reference-workspace #evaluationCriteriaList textarea.evaluation-criteria-cell-input {
  resize: none !important;
  overflow: hidden !important;
  min-height: 40px;
  max-height: none !important;
}

/* Los criterios sembrados se presentan como criterios normales. La procedencia
   curricular se conserva en datos, pero no añade una segunda línea visual. */
.evaluation-reference-workspace .evaluation-criterion-source {
  display: none !important;
}

/* Asistente más compacto: sin fila vacía inferior cuando no existe estado. */
.evaluation-reference-workspace .evaluation-instrument-assistant {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  grid-template-areas:
    "copy ai"
    "copy apps"
    "status status";
  gap: 8px 16px;
  padding: 12px 14px;
  align-items: center;
}
.evaluation-reference-workspace .evaluation-instrument-assistant-copy strong {
  margin-bottom: 2px;
}
.evaluation-reference-workspace .evaluation-instrument-assistant-copy p {
  margin: 0;
  line-height: 1.4;
}
.evaluation-reference-workspace .evaluation-ai-instrument-button {
  min-height: 40px;
}
.evaluation-reference-workspace .evaluation-appscript-actions {
  gap: 8px;
}
.evaluation-reference-workspace .evaluation-appscript-actions .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px;
  padding-inline: 12px;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
}
.evaluation-reference-workspace .evaluation-appscript-actions .button > span {
  display: inline-block;
  line-height: 1.1;
  text-decoration: none !important;
}
.evaluation-reference-workspace .evaluation-appscript-icon {
  display: block !important;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  object-fit: contain;
  vertical-align: middle;
}
.evaluation-reference-workspace .evaluation-instrument-tools-status {
  margin: 0;
  min-height: 0;
  line-height: 1.3;
}
.evaluation-reference-workspace .evaluation-instrument-tools-status:empty {
  display: none;
}

@media (max-width: 900px) {
  .evaluation-reference-workspace .evaluation-instrument-assistant {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "ai"
      "apps"
      "status";
  }
}

/* ========================================================================== */
/* Evaluaciones · overlay 23                                                  */
/* Instrumento: celdas limpias + acciones unificadas en una sola fila.        */
/* ========================================================================== */

/* Los campos editables se integran visualmente en la celda: sin borde,
   contorno ni anillo interior, incluso durante la edición. */
.evaluation-reference-workspace #evaluationCriteriaList .evaluation-criteria-cell-input,
.evaluation-reference-workspace #evaluationCriteriaList .evaluation-criteria-cell-input:focus,
.evaluation-reference-workspace #evaluationCriteriaList .evaluation-criteria-cell-input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Agregar/Sembrar quedan a la izquierda y Guardar/Eliminar en el extremo
   derecho de la misma fila. */
.evaluation-reference-workspace .evaluation-criteria-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.evaluation-reference-workspace .evaluation-criteria-toolbar-primary,
.evaluation-reference-workspace .evaluation-instrument-main-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.evaluation-reference-workspace .evaluation-instrument-main-actions {
  margin-left: auto;
}

@media (max-width: 760px) {
  .evaluation-reference-workspace .evaluation-criteria-toolbar-primary,
  .evaluation-reference-workspace .evaluation-instrument-main-actions {
    width: 100%;
  }
  .evaluation-reference-workspace .evaluation-instrument-main-actions {
    justify-content: flex-end;
  }
}

/* ========================================================================== */
/* Evaluaciones · overlay 24                                                  */
/* Ponderación por tipo + estado IA + opción de página en card 05.            */
/* ========================================================================== */

/* Card 05: Firmantes y la preferencia de página comparten la misma fila. */
.evaluation-reference-workspace #evaluationOrdinaryDocuments .evaluation-document-card-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.evaluation-reference-workspace #evaluationOrdinaryDocuments .evaluation-document-new-page-option {
  min-height: 40px;
  margin: 0;
  white-space: nowrap;
}

/* IA: conserva el espacio del botón mientras muestra progreso en su interior. */
.evaluation-reference-workspace .evaluation-ai-instrument-button.is-generating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: progress;
}
.evaluation-reference-workspace .evaluation-ai-spinner {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: evaluation-ai-spin .72s linear infinite;
}
@keyframes evaluation-ai-spin {
  to { transform: rotate(360deg); }
}



/* ========================================================================== */
/* Evaluaciones · overlay 25                                                  */
/* Firmantes en una sola línea.                                               */
/* ========================================================================== */
.evaluation-reference-workspace [data-evaluation-open-signers] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  white-space: nowrap;
}
.evaluation-reference-workspace [data-evaluation-open-signers] > svg.evaluation-inline-section-icon {
  display: block;
  flex: 0 0 17px;
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* Componente compartido · exportar/guardar en Google Drive                   */
/* -------------------------------------------------------------------------- */
.drive-export-button {
  --drive-button-surface: var(--surface, #ffffff);
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--drive-button-surface), var(--drive-button-surface)) padding-box,
    linear-gradient(110deg, #1a73e8, #0f9d58, #f9ab00, #1a73e8) border-box;
  background-size: 100% 100%, 300% 100%;
  color: var(--ink, #172033);
  animation: drive-button-border-flow 8s linear infinite;
  box-shadow: 0 3px 9px rgba(26, 115, 232, .10);
}

.button.drive-export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.drive-export-button:not(.grades-export-option)::before {
  content: "";
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  background: url('../assets/icons/drive_icon.webp') center / contain no-repeat;
}

.drive-export-button .android-vector-icon.icon-drive {
  background: url('../assets/icons/drive_icon.webp') center / contain no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}

.drive-export-button:hover:not(:disabled) {
  --drive-button-surface: color-mix(in srgb, var(--surface, #ffffff) 94%, #1a73e8 6%);
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(26, 115, 232, .15);
}

.drive-export-button:focus-visible {
  outline: 3px solid color-mix(in srgb, #1a73e8 28%, transparent);
  outline-offset: 2px;
}

.drive-export-button:disabled,
.drive-export-button[aria-disabled="true"] {
  animation-play-state: paused;
  box-shadow: none;
  opacity: .48;
}

@keyframes drive-button-border-flow {
  from { background-position: 0 0, 0% 50%; }
  to { background-position: 0 0, 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .drive-export-button { animation: none; }
}

/* Guardado local: vector amarillo tomado del LocalSaveButton de Android. */
.local-save-button {
  --local-button-surface: var(--surface, #ffffff);
  position: relative;
  border: 2px solid #ffca28;
  background: var(--local-button-surface);
  color: var(--ink, #172033);
  box-shadow: 0 3px 9px rgba(255, 160, 0, .12);
}

.button.local-save-button,
.button.preview-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.local-save-button:not(.grades-export-option)::before {
  content: "";
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  background: url('../assets/icons/ic_local_folder.svg') center / contain no-repeat;
}

.local-save-button .android-vector-icon.icon-download {
  background: url('../assets/icons/ic_local_folder.svg') center / contain no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}

.local-save-button:hover:not(:disabled) {
  --local-button-surface: color-mix(in srgb, var(--surface, #ffffff) 93%, #ffca28 7%);
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(255, 160, 0, .17);
}

.local-save-button:focus-visible {
  outline: 3px solid color-mix(in srgb, #ffca28 35%, transparent);
  outline-offset: 2px;
}

/* Vista previa: icono proporcionado y borde celeste sólido. */
.preview-action-button {
  --preview-button-surface: var(--surface, #ffffff);
  position: relative;
  border: 2px solid #29b6f6;
  background: var(--preview-button-surface);
  color: var(--ink, #172033);
  box-shadow: 0 3px 9px rgba(41, 182, 246, .12);
}

.preview-action-button::before {
  content: "";
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border-radius: 5px;
  background: url('../assets/icons/preview.webp') center / contain no-repeat;
}

.preview-action-button:hover:not(:disabled) {
  --preview-button-surface: color-mix(in srgb, var(--surface, #ffffff) 93%, #29b6f6 7%);
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(41, 182, 246, .17);
}

.preview-action-button:focus-visible {
  outline: 3px solid color-mix(in srgb, #29b6f6 30%, transparent);
  outline-offset: 2px;
}

.local-save-button:disabled,
.local-save-button[aria-disabled="true"],
.preview-action-button:disabled,
.preview-action-button[aria-disabled="true"] {
  box-shadow: none;
  opacity: .48;
}

.evaluation-reference-workspace .evaluation-closure-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .evaluation-reference-workspace .evaluation-closure-actions .button {
    flex: 1 1 210px;
  }
}

/* ========================================================================== */
/* Evaluaciones · acciones de documentos como pared de bloques                */
/* ========================================================================== */
.evaluation-reference-workspace :is(
  #evaluationRecoveryDocuments,
  #evaluationRecoveryInstrumentDocuments,
  #evaluationOrdinaryDocuments,
  #evaluationClosureDocumentsCard
) .form-actions {
  width: 100%;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(52px, auto);
  align-items: stretch;
  justify-content: stretch;
  gap: 10px;
}

.evaluation-reference-workspace :is(
  #evaluationRecoveryDocuments,
  #evaluationRecoveryInstrumentDocuments,
  #evaluationOrdinaryDocuments,
  #evaluationClosureDocumentsCard
) .form-actions > .button {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 52px;
  margin: 0;
  padding-inline: 12px;
  border-radius: 6px;
  white-space: normal;
  line-height: 1.2;
}

/* Fila 1 · vista previa y las dos descargas locales ocupan tercios iguales. */
.evaluation-reference-workspace :is(
  #evaluationRecoveryDocuments,
  #evaluationRecoveryInstrumentDocuments,
  #evaluationOrdinaryDocuments,
  #evaluationClosureDocumentsCard
) .form-actions > [id$="PreviewPdf"] {
  grid-column: 1 / 3;
  grid-row: 1;
}
.evaluation-reference-workspace :is(
  #evaluationRecoveryDocuments,
  #evaluationRecoveryInstrumentDocuments,
  #evaluationClosureDocumentsCard
) .form-actions > [id$="DownloadPdf"] {
  grid-column: 3 / 5;
  grid-row: 1;
}
.evaluation-reference-workspace :is(
  #evaluationRecoveryDocuments,
  #evaluationRecoveryInstrumentDocuments,
  #evaluationClosureDocumentsCard
) .form-actions > [id$="DownloadWord"] {
  grid-column: 5 / 7;
  grid-row: 1;
}

/* Fila 2 · selector completo y guardado individual forman dos bloques iguales. */
.evaluation-reference-workspace :is(
  #evaluationRecoveryDocuments,
  #evaluationRecoveryInstrumentDocuments,
  #evaluationClosureDocumentsCard
) .form-actions > .evaluation-inline-format {
  grid-column: 1 / 4;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 4px 4px 4px 14px;
  display: grid;
  grid-template-columns: auto minmax(82px, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--line) 72%, var(--primary) 28%);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: .76rem;
  font-weight: 760;
  text-transform: none;
}
.evaluation-reference-workspace :is(
  #evaluationRecoveryDocuments,
  #evaluationRecoveryInstrumentDocuments,
  #evaluationClosureDocumentsCard
) .form-actions > .evaluation-inline-format select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
  box-shadow: none;
  color: var(--ink);
  font-weight: 820;
}
.evaluation-reference-workspace :is(
  #evaluationRecoveryDocuments,
  #evaluationRecoveryInstrumentDocuments,
  #evaluationClosureDocumentsCard
) .form-actions > [id$="IndividualSave"] {
  grid-column: 4 / 7;
  grid-row: 2;
}

/* Fila 3 · los dos destinos Drive ocupan mitades iguales. */
.evaluation-reference-workspace :is(
  #evaluationRecoveryDocuments,
  #evaluationRecoveryInstrumentDocuments,
  #evaluationOrdinaryDocuments,
  #evaluationClosureDocumentsCard
) .form-actions > .drive-export-button[id$="Pdf"] {
  grid-column: 1 / 4;
  grid-row: 3;
}
.evaluation-reference-workspace :is(
  #evaluationRecoveryDocuments,
  #evaluationRecoveryInstrumentDocuments,
  #evaluationOrdinaryDocuments,
  #evaluationClosureDocumentsCard
) .form-actions > .drive-export-button[id$="Word"] {
  grid-column: 4 / 7;
  grid-row: 3;
}

/* La card ordinaria no tiene selector ni guardado individual: sus tres
   descargas se redistribuyen sin dejar una fila vacía. */
.evaluation-reference-workspace #evaluationOrdinaryDocuments .form-actions > [id$="PreviewPdf"] {
  grid-column: 1 / 4;
  grid-row: 1;
}
.evaluation-reference-workspace #evaluationOrdinaryDocuments .form-actions > [id$="DownloadPdf"] {
  grid-column: 4 / 7;
  grid-row: 1;
}
.evaluation-reference-workspace #evaluationOrdinaryDocuments .form-actions > [id$="DownloadWord"] {
  grid-column: 1 / 7;
  grid-row: 2;
}

@media (max-width: 700px) {
  .evaluation-reference-workspace :is(
    #evaluationRecoveryDocuments,
    #evaluationRecoveryInstrumentDocuments,
    #evaluationOrdinaryDocuments,
    #evaluationClosureDocumentsCard
  ) .form-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .evaluation-reference-workspace :is(
    #evaluationRecoveryDocuments,
    #evaluationRecoveryInstrumentDocuments,
    #evaluationOrdinaryDocuments,
    #evaluationClosureDocumentsCard
  ) .form-actions > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .evaluation-reference-workspace :is(
    #evaluationRecoveryDocuments,
    #evaluationRecoveryInstrumentDocuments,
    #evaluationClosureDocumentsCard
  ) .form-actions > .evaluation-inline-format {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 480px) {
  .evaluation-reference-workspace :is(
    #evaluationRecoveryDocuments,
    #evaluationRecoveryInstrumentDocuments,
    #evaluationOrdinaryDocuments,
    #evaluationClosureDocumentsCard
  ) .form-actions {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== */
/* Evaluaciones · firmantes integrados y resumen de resultado por estudiante  */
/* ========================================================================== */
.evaluation-reference-workspace .evaluation-document-reference-body {
  display: grid;
  grid-template-columns: minmax(240px, .85fr) minmax(0, 1.6fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 8px 24px;
}

.evaluation-reference-workspace .evaluation-document-reference-body > .evaluation-document-card-tools {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  padding: 0;
  display: grid;
  justify-items: center;
  justify-content: stretch;
  gap: 8px;
  border: 0;
}

.evaluation-reference-workspace .evaluation-document-reference-body > .evaluation-document-card-tools [data-evaluation-open-signers] {
  justify-self: center;
}

.evaluation-reference-workspace #evaluationOrdinaryDocuments .evaluation-document-reference-body > .evaluation-document-card-tools {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
  justify-items: center;
  align-items: center;
  gap: 8px;
}

.evaluation-reference-workspace .evaluation-document-reference-body > :is(
  .evaluation-reference-document-actions,
  .evaluation-optional-documents
) {
  display: contents;
}

.evaluation-reference-workspace .evaluation-document-reference-body > :is(
  .evaluation-reference-document-actions,
  .evaluation-optional-documents
) > div:first-child {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  text-align: center;
}

.evaluation-reference-workspace .evaluation-document-reference-body > :is(
  .evaluation-reference-document-actions,
  .evaluation-optional-documents
) > div:first-child p {
  margin: 0 auto;
  max-width: 38ch;
  text-align: center;
  line-height: 1.5;
}

.evaluation-reference-workspace .evaluation-document-reference-body > :is(
  .evaluation-reference-document-actions,
  .evaluation-optional-documents
) > .form-actions {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
}

.evaluation-reference-workspace .evaluation-document-reference-body > .evaluation-reference-document-actions > p.field-help {
  grid-column: 1;
  grid-row: 3;
  margin: 0 auto;
  max-width: 40ch;
  text-align: center;
}

.evaluation-closure-result-summary {
  width: 100%;
  min-width: 0;
  margin: 2px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--primary) 18%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
}

.evaluation-closure-result-summary > div {
  min-width: 0;
  min-height: 66px;
  padding: 10px 14px;
  display: grid;
  align-content: center;
  gap: 3px;
  border-left: 1px solid var(--line);
}

.evaluation-closure-result-summary > div:first-child {
  border-left: 0;
}

.evaluation-closure-result-summary dt,
.evaluation-closure-result-summary dd {
  min-width: 0;
  margin: 0;
}

.evaluation-closure-result-summary dt {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 820;
  letter-spacing: .055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.evaluation-closure-result-summary dd {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.25;
}

.evaluation-closure-result-summary > .is-effect {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.evaluation-closure-result-summary[data-status="IMPROVED"] > .is-effect,
.evaluation-closure-result-summary[data-status="PASSED"] > .is-effect {
  background: color-mix(in srgb, #0f9d58 11%, var(--surface));
}
.evaluation-closure-result-summary[data-status="IMPROVED"] > .is-effect dd,
.evaluation-closure-result-summary[data-status="PASSED"] > .is-effect dd {
  color: color-mix(in srgb, #0f9d58 78%, var(--ink));
}
.evaluation-closure-result-summary[data-status="FAILED"] > .is-effect,
.evaluation-closure-result-summary[data-status="NOT_SUBMITTED"] > .is-effect {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
}
.evaluation-closure-result-summary[data-status="FAILED"] > .is-effect dd,
.evaluation-closure-result-summary[data-status="NOT_SUBMITTED"] > .is-effect dd {
  color: var(--danger);
}

@media (max-width: 900px) {
  .evaluation-reference-workspace .evaluation-document-reference-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .evaluation-reference-workspace .evaluation-document-reference-body > .evaluation-document-card-tools,
  .evaluation-reference-workspace .evaluation-document-reference-body > :is(
    .evaluation-reference-document-actions,
    .evaluation-optional-documents
  ) > div:first-child,
  .evaluation-reference-workspace .evaluation-document-reference-body > :is(
    .evaluation-reference-document-actions,
    .evaluation-optional-documents
  ) > .form-actions,
  .evaluation-reference-workspace .evaluation-document-reference-body > .evaluation-reference-document-actions > p.field-help {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 700px) {
  .evaluation-closure-result-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .evaluation-closure-result-summary > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .evaluation-closure-result-summary > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }
}

/* ========================================================================== */
/* Diario de campo · experiencia de escritorio con paridad visual Android     */
/* ========================================================================== */
.journal-icon {
  --journal-icon-source: none;
  width: 21px;
  height: 21px;
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--journal-icon-source) center / contain no-repeat;
  mask: var(--journal-icon-source) center / contain no-repeat;
}

.journal-icon-bullet-list { --journal-icon-source: url("../assets/field-journal/bullet-list.svg"); }
.journal-icon-number-list { --journal-icon-source: url("../assets/field-journal/number-list.svg"); }
.journal-icon-text-left { --journal-icon-source: url("../assets/field-journal/text-left.svg"); }
.journal-icon-text-center { --journal-icon-source: url("../assets/field-journal/text-center.svg"); }
.journal-icon-text-right { --journal-icon-source: url("../assets/field-journal/text-right.svg"); }
.journal-icon-text-justify { --journal-icon-source: url("../assets/field-journal/text-justify.svg"); }
.journal-icon-one-column { --journal-icon-source: url("../assets/field-journal/one-column.svg"); }
.journal-icon-two-column { --journal-icon-source: url("../assets/field-journal/two-column.svg"); }
.journal-icon-description { --journal-icon-source: url("../assets/field-journal/description.svg"); }
.journal-icon-calendar { --journal-icon-source: url("../assets/field-journal/calendar.svg"); }
.journal-icon-save { --journal-icon-source: url("../assets/field-journal/save.svg"); }
.journal-icon-delete { --journal-icon-source: url("../assets/field-journal/delete.svg"); }
.journal-icon-refresh { --journal-icon-source: url("../assets/field-journal/refresh.svg"); }
.journal-icon-arrow-forward { --journal-icon-source: url("../assets/field-journal/arrow-forward.svg"); }

.field-journal-view {
  --journal-paper: #fffefb;
  --journal-canvas: color-mix(in srgb, var(--user-primary, var(--primary)) 4%, var(--clay-bg, var(--surface-soft)));
}

.field-journal-actions {
  flex-wrap: nowrap;
}

.field-journal-action,
.field-journal-editor-action,
.field-journal-empty-action,
.field-journal-editor-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.field-journal-action {
  min-height: 40px;
  padding-inline: 13px;
  border-radius: 13px;
  white-space: nowrap;
}

.field-journal-action .journal-icon { width: 19px; height: 19px; }
.journal-action-plus {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1;
}

.field-journal-overview {
  position: relative;
  min-height: 148px;
  margin: 0 0 22px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 76%, var(--user-primary, var(--primary)));
  border-radius: 25px;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--user-primary, var(--primary)) 13%, transparent), transparent 15rem),
    linear-gradient(145deg, var(--clay-surface-strong, var(--surface)), var(--clay-surface, var(--surface-soft)));
  box-shadow: var(--clay-card-shadow-soft, 0 10px 28px rgba(35, 60, 105, .10));
}

.field-journal-overview-art {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 25px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--user-primary, var(--primary)) 74%, #fff),
    color-mix(in srgb, var(--user-primary, var(--primary)) 86%, #162d4a));
  box-shadow:
    0 10px 20px color-mix(in srgb, var(--user-primary, var(--primary)) 22%, transparent),
    inset 2px 2px 3px rgba(255,255,255,.18),
    inset -3px -3px 6px rgba(0,0,0,.14);
}

.field-journal-overview-art img {
  width: 76px;
  height: 76px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(14, 29, 50, .18));
}

.field-journal-overview-copy { min-width: 0; }
.field-journal-overview-copy h2 {
  margin: 5px 0 7px;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  letter-spacing: -.035em;
}
.field-journal-overview-copy p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.field-journal-private-badge {
  align-self: start;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--user-primary, var(--primary)) 20%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 8%, var(--surface));
  font-size: .73rem;
  font-weight: 820;
  white-space: nowrap;
}
.field-journal-private-badge > span { font-size: .55rem; }

.field-journal-view:has(.field-journal-editor-panel:not([hidden])) .field-journal-overview {
  display: none;
}

.field-journal-view > .notice { margin-bottom: 16px; }

.field-journal-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field-journal-card {
  min-width: 0;
  border-color: color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--clay-surface-strong, var(--surface)), var(--clay-surface, var(--surface-soft)));
  box-shadow: var(--clay-card-shadow-soft, 0 9px 24px rgba(35, 60, 105, .09));
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.field-journal-card:hover {
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 40%, var(--line));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--user-primary, var(--primary)) 13%, transparent);
  transform: translateY(-2px);
}

.field-journal-card-open {
  min-height: 224px;
  padding: 20px;
  grid-template-columns: 50px minmax(0, 1fr);
  align-content: stretch;
  align-items: start;
  gap: 15px;
  border-radius: inherit;
}

.field-journal-card-open:hover {
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 4%, transparent);
}

.field-journal-card-open:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--user-primary, var(--primary)) 34%, transparent);
  outline-offset: 3px;
}

.field-journal-card-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--user-primary, var(--primary));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 12%, var(--surface));
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.48);
}
.field-journal-card-icon .journal-icon { width: 26px; height: 26px; }

.field-journal-card-content {
  min-width: 0;
  min-height: 184px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.field-journal-card-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 730;
  text-transform: capitalize;
}
.field-journal-card-date .journal-icon { width: 15px; height: 15px; }

.field-journal-card-title {
  margin-top: 10px;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.28;
  letter-spacing: -.018em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.field-journal-card-preview {
  margin-top: 7px;
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.field-journal-card-footer {
  min-width: 0;
  margin-top: auto;
  padding-top: 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.field-journal-card-chip {
  min-height: 27px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 8%, transparent);
  font-size: .68rem;
  font-weight: 780;
  white-space: nowrap;
}
.field-journal-card-chip .journal-icon { width: 15px; height: 15px; }
.field-journal-mention-chip strong { font-size: .86rem; }

.field-journal-card-open-label {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--user-primary, var(--primary));
  font-size: .72rem;
  font-weight: 820;
  white-space: nowrap;
}
.field-journal-card-open-label .journal-icon { width: 16px; height: 16px; transition: transform 160ms ease; }
.field-journal-card:hover .field-journal-card-open-label .journal-icon { transform: translateX(2px); }

.field-journal-empty {
  min-height: 360px;
  padding: 42px 24px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed color-mix(in srgb, var(--user-primary, var(--primary)) 28%, var(--line));
  border-radius: 25px;
  background: color-mix(in srgb, var(--clay-surface-strong, var(--surface)) 78%, transparent);
  box-shadow: var(--clay-card-shadow-soft, 0 9px 24px rgba(35, 60, 105, .08));
}
.field-journal-empty[hidden] { display: none !important; }
.field-journal-empty-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: var(--user-primary, var(--primary));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 12%, var(--surface));
}
.field-journal-empty-icon .journal-icon { width: 35px; height: 35px; }
.field-journal-empty h3 { margin: 0; font-size: 1.24rem; }
.field-journal-empty p { margin: 0 auto; color: var(--muted); }
.field-journal-empty-action { margin-top: 16px; }

.field-journal-editor-panel {
  gap: 14px;
}

.field-journal-editor-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--clay-surface-strong, var(--surface)), var(--clay-surface, var(--surface-soft)));
  box-shadow: var(--clay-card-shadow-soft, 0 9px 24px rgba(35, 60, 105, .08));
}
.field-journal-editor-title { min-width: 0; }
.field-journal-editor-head h2 { font-size: 1.28rem; letter-spacing: -.02em; }
.field-journal-editor-back { min-height: 40px; padding-inline: 13px; border-radius: 13px; }
.field-journal-editor-action { min-height: 40px; border-radius: 13px; }
.field-journal-editor-action .journal-icon { width: 18px; height: 18px; }

.field-journal-meta-grid {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 18px;
  background: var(--clay-surface-strong, var(--surface));
}
.field-journal-meta-grid label { gap: 6px; }
.field-journal-meta-grid label > span:first-child {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 820;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.field-journal-title-control input,
.field-journal-date-control input {
  min-height: 44px;
  border-radius: 11px;
}
.field-journal-title-control input { font-size: 1rem; font-weight: 730; }
.field-journal-date-input { position: relative; display: block; }
.field-journal-date-input > .journal-icon {
  position: absolute;
  z-index: 1;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: var(--user-primary, var(--primary));
  transform: translateY(-50%);
  pointer-events: none;
}
.field-journal-date-input input { padding-left: 40px; }
.field-journal-columns-native[hidden] { display: none !important; }

.field-journal-toolbar {
  top: 10px;
  padding: 7px 8px;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 17px;
  background: color-mix(in srgb, var(--clay-surface-strong, var(--surface)) 92%, transparent);
  box-shadow: 0 10px 24px rgba(34, 51, 78, .11);
  backdrop-filter: blur(16px);
  scrollbar-width: thin;
}

.journal-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.editor-tool {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}
.editor-tool:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 9%, transparent);
}
.editor-tool:active { transform: scale(.95); }
.editor-tool:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--user-primary, var(--primary)) 26%, transparent);
  outline-offset: 1px;
}
.editor-tool .journal-icon { width: 21px; height: 21px; }
.editor-tool-letter { font-size: 1rem; }
.editor-tool-separator { height: 28px; margin-inline: 3px; flex: 0 0 1px; }

.journal-toolbar-options { gap: 5px; }
.journal-size-control {
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
}
.journal-size-label {
  padding-left: 10px;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 800;
  pointer-events: none;
}
.journal-size-control .editor-tool-select {
  width: 100px;
  min-height: 38px;
  margin: 0;
  padding: 0 24px 0 2px;
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 760;
}

.editor-color-control {
  min-width: 66px;
  min-height: 40px;
  padding: 3px 7px 3px 9px;
  display: flex;
  grid-auto-flow: column;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
  color: var(--muted);
  font-size: .72rem;
}
.editor-color-control input {
  width: 27px;
  height: 27px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.journal-divider-symbol { width: 21px; height: 2px; border-radius: 99px; background: currentColor; }

.field-journal-mention-hint {
  min-height: 40px;
  padding: 5px 10px;
  gap: 5px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 8%, transparent);
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: none;
}
.field-journal-mention-hint strong { font-size: 1rem; }

.journal-column-tools {
  padding-left: 3px;
}
.journal-column-label {
  margin-right: 3px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 780;
  text-transform: uppercase;
}
.journal-column-tool.is-selected {
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 82%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--user-primary, var(--primary)) 20%, transparent);
}

.field-journal-paper {
  padding: clamp(14px, 2.7vw, 32px);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(color-mix(in srgb, var(--line) 18%, transparent) 1px, transparent 1px),
    var(--journal-canvas);
  background-size: 100% 32px;
}

.field-journal-body {
  min-height: 610px;
  padding: clamp(30px, 4.6vw, 58px);
  border: 1px solid color-mix(in srgb, #927e58 15%, var(--line));
  border-radius: 14px;
  color: var(--ink);
  background: var(--journal-paper);
  box-shadow: 0 14px 34px rgba(55, 48, 35, .11);
  font-size: 1rem;
  line-height: 1.7;
}
.field-journal-body:focus {
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 54%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--user-primary, var(--primary)) 11%, transparent), 0 16px 38px rgba(55, 48, 35, .12);
}
.field-journal-body:empty::before { opacity: .72; }
.field-journal-body p:first-child { margin-top: 0; }

.field-journal-mention-suggestions {
  border-radius: 16px;
  background: color-mix(in srgb, var(--clay-surface-strong, var(--surface)) 96%, transparent);
  box-shadow: 0 20px 50px rgba(23,32,58,.2);
  backdrop-filter: blur(16px);
}

html[data-theme="dark"] .field-journal-view {
  --journal-paper: #252728;
  --journal-canvas: #1d2021;
}
html[data-theme="dark"] .field-journal-body { box-shadow: 0 16px 38px rgba(0,0,0,.26); }
html[data-theme="dark"] .field-journal-overview-art img { filter: drop-shadow(0 7px 7px rgba(0,0,0,.28)); }

@media (max-width: 980px) {
  .module-context-bar .field-journal-actions .field-journal-action {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }
  .module-context-bar .field-journal-actions .field-journal-action > span:last-child { display: none; }
  .module-context-bar .field-journal-actions .journal-action-plus { display: inline-grid !important; }
  .field-journal-card-open-label { font-size: 0; gap: 0; }
}

@media (max-width: 760px) {
  .field-journal-overview {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 126px;
    padding: 18px;
    gap: 15px;
  }
  .field-journal-overview-art { width: 72px; height: 72px; border-radius: 20px; }
  .field-journal-overview-art img { width: 58px; height: 58px; }
  .field-journal-private-badge { display: none; }
  .field-journal-list { grid-template-columns: 1fr; }
  .field-journal-editor-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .field-journal-editor-title .eyebrow { display: none; }
  .field-journal-editor-head h2 { margin: 0; font-size: 1.05rem; }
  .field-journal-editor-back { width: 40px; min-width: 40px; padding: 0; }
  .field-journal-editor-back > span:last-child,
  .field-journal-editor-action > span:last-child { display: none; }
  .field-journal-editor-action { width: 40px; min-width: 40px; padding: 0; }
  .field-journal-meta-grid { grid-template-columns: 1fr; }
  .field-journal-toolbar { position: sticky; }
  .field-journal-body { min-height: 480px; padding: 28px 24px; }
}

@media (max-width: 520px) {
  .field-journal-overview { grid-template-columns: 1fr; text-align: center; }
  .field-journal-overview-art { display: none; }
  .field-journal-overview-copy p { margin-inline: auto; }
  .field-journal-card-open { min-height: 210px; padding: 17px; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
  .field-journal-card-icon { width: 42px; height: 42px; border-radius: 14px; }
  .field-journal-card-icon .journal-icon { width: 22px; height: 22px; }
  .field-journal-card-content { min-height: 176px; }
  .field-journal-card-chip { font-size: .64rem; }
  .field-journal-paper { padding: 8px; border-radius: 16px; }
  .field-journal-body { min-height: 430px; padding: 24px 18px; border-radius: 11px; }
  .field-journal-mention-hint span { display: none; }
}

/* Diario de campo · ajuste compacto posterior a revisión visual. */
svg.journal-icon {
  overflow: visible;
  background: none;
  fill: currentColor;
  -webkit-mask: none;
  mask: none;
}
svg.journal-icon path { fill: currentColor; }

/* El editor usa una sola cabecera contextual. Las acciones generales vuelven
   a aparecer al regresar a la biblioteca de notas. */
.field-journal-view.is-editor-open > .module-context-bar {
  display: none;
}

.field-journal-editor-panel {
  gap: 10px;
}

.field-journal-editor-head {
  min-height: 60px;
  padding: 9px 11px;
  gap: 10px;
  border-radius: 18px;
}

.field-journal-editor-title .eyebrow {
  display: none;
}

.field-journal-editor-head h2 {
  margin: 0;
  font-size: 1.12rem;
}

.field-journal-editor-back,
.field-journal-editor-action {
  min-height: 38px;
  height: 38px;
  padding-inline: 12px;
}

.field-journal-editor-controls {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 18px;
  background: var(--clay-surface-strong, var(--surface));
  box-shadow: var(--clay-card-shadow-soft, 0 8px 20px rgba(35, 60, 105, .08));
}

.field-journal-editor-controls .field-journal-meta-grid {
  padding: 10px 12px;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.field-journal-editor-controls .field-journal-meta-grid label {
  gap: 4px;
}

.field-journal-editor-controls .field-journal-meta-grid label > span:first-child {
  font-size: .64rem;
}

.field-journal-editor-controls :is(.field-journal-title-control, .field-journal-date-control) input {
  min-height: 40px;
  height: 40px;
}

.field-journal-editor-controls .field-journal-toolbar {
  position: sticky;
  top: 8px;
  margin: 0;
  padding: 5px 7px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 0 0 17px 17px;
  background: color-mix(in srgb, var(--clay-surface-strong, var(--surface)) 96%, transparent);
  box-shadow: none;
}

.field-journal-editor-controls .editor-tool {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  height: 36px;
  border-radius: 10px;
}

.field-journal-editor-controls .editor-tool .journal-icon {
  width: 20px;
  height: 20px;
}

.field-journal-editor-controls .editor-tool-separator {
  height: 24px;
}

.field-journal-editor-controls :is(.journal-size-control, .editor-color-control, .field-journal-mention-hint) {
  min-height: 36px;
  height: 36px;
}

.field-journal-editor-controls .journal-size-control .editor-tool-select {
  min-height: 34px;
  height: 34px;
}

.field-journal-editor-controls .editor-color-control input {
  width: 24px;
  height: 24px;
}

.field-journal-paper {
  padding: clamp(10px, 2vw, 22px);
  border-radius: 18px;
}

@media (max-width: 760px) {
  .field-journal-editor-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .field-journal-editor-controls .field-journal-toolbar {
    position: sticky;
  }
}

/* ========================================================================== */
/* Agenda · navegación mensual, filtro diario y espacios por tipo de evento   */
/* ========================================================================== */
.agenda-month-pill-shell {
  margin: 0 0 12px;
  padding: 5px 7px 1px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 17px;
  background: linear-gradient(145deg, var(--clay-surface-strong, var(--surface)), var(--clay-surface, var(--surface-soft)));
  box-shadow: var(--clay-card-shadow-soft, 0 8px 20px rgba(35, 60, 105, .08));
}

.agenda-month-pills {
  padding-bottom: 5px;
}

.agenda-month-pill {
  min-width: 45px;
}

.agenda-workspace {
  grid-template-columns: minmax(390px, .88fr) minmax(430px, 1.12fr);
  gap: 16px;
}

.agenda-main-calendar-card,
.agenda-events-panel {
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--clay-surface-strong, var(--surface)), var(--clay-surface, var(--surface-soft)));
  box-shadow: var(--clay-card-shadow-soft, 0 9px 24px rgba(35, 60, 105, .08));
}

.agenda-main-calendar-card {
  padding: 14px;
}

.agenda-month-head {
  min-height: 40px;
  margin-bottom: 8px;
}

.agenda-month-head h2 {
  font-size: 1.08rem;
  letter-spacing: -.018em;
}

.agenda-month-head .agenda-icon-button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
}

.agenda-calendar-large .agenda-day {
  min-height: 52px;
  border-radius: 14px;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.agenda-calendar-large .agenda-day:hover {
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 25%, transparent);
  transform: translateY(-1px);
}

.agenda-day-markers {
  width: 16px;
  height: 4px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
}

.agenda-day .agenda-day-markers i {
  width: 7px;
  height: 4px;
  display: block;
  border-radius: 999px;
}

.agenda-day .agenda-day-markers i.is-fixed {
  background: color-mix(in srgb, var(--muted) 70%, transparent);
}

.agenda-day .agenda-day-markers i.is-personal {
  background: var(--user-primary, var(--primary));
}

.agenda-day.is-selected .agenda-day-markers i.is-fixed,
.agenda-day.is-selected .agenda-day-markers i.is-personal {
  background: currentColor;
  opacity: .78;
}

.agenda-calendar-legend {
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  justify-content: center;
  gap: 16px;
  border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 740;
}

.agenda-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agenda-calendar-legend i {
  width: 9px;
  height: 4px;
  border-radius: 999px;
}

.agenda-calendar-legend i.is-fixed { background: color-mix(in srgb, var(--muted) 70%, transparent); }
.agenda-calendar-legend i.is-personal { background: var(--user-primary, var(--primary)); }

.agenda-events-panel {
  min-width: 0;
  padding: 14px;
}

.agenda-event-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agenda-event-type-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agenda-event-type-pill {
  min-height: 34px;
  padding: 5px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.agenda-event-type-pill:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 34%, var(--line));
}

.agenda-event-type-pill.is-selected {
  color: var(--on-primary, #fff);
  border-color: var(--user-primary, var(--primary));
  background: var(--user-primary, var(--primary));
  box-shadow: 0 3px 8px color-mix(in srgb, var(--user-primary, var(--primary)) 20%, transparent);
}

.agenda-event-type-pill strong {
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: inherit;
  background: color-mix(in srgb, currentColor 13%, transparent);
  font-size: .63rem;
}

.agenda-event-type-pill.is-selected strong {
  background: rgba(255,255,255,.18);
}

.agenda-date-filter {
  min-height: 32px;
  padding: 5px 8px 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--user-primary, var(--primary)) 32%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 9%, var(--surface));
  font: inherit;
  font-size: .7rem;
  font-weight: 790;
  white-space: nowrap;
}
.agenda-date-filter[hidden] { display: none !important; }
.agenda-date-filter strong { font-size: 1rem; line-height: 1; }

.agenda-events-heading {
  margin: 14px 0 10px;
  padding: 12px 2px 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.agenda-events-heading h2 {
  margin: 3px 0 0;
  font-size: 1.08rem;
}

.agenda-events-heading p {
  margin: 0;
  max-width: 44ch;
  font-size: .72rem;
  text-align: right;
}

.agenda-event-list {
  gap: 8px;
}

.agenda-event-row {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 10px;
  border-color: color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: none;
}

.agenda-date-badge {
  width: 44px;
  min-height: 44px;
  border-radius: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 7%, var(--surface-soft));
}

.agenda-date-badge strong { font-size: 1.05rem; }
.agenda-date-badge span { font-size: .62rem; }
.agenda-event-copy h3 { margin: 3px 0 0; font-size: .9rem; line-height: 1.35; }

.agenda-source {
  padding: 2px 6px;
  font-size: .62rem;
  text-transform: uppercase;
}

.agenda-source.is-fixed {
  color: color-mix(in srgb, var(--muted) 84%, var(--ink));
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
}

.agenda-source.is-manual {
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 10%, var(--surface));
}

.agenda-row-actions .button {
  min-height: 34px;
  padding-inline: 10px;
  border-radius: 10px;
  font-size: .7rem;
}

.agenda-events-empty {
  min-height: 220px;
  display: grid;
  align-content: center;
  border: 1px dashed color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-soft) 56%, transparent);
}

@media (max-width: 1180px) {
  .agenda-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .agenda-month-pill-shell { margin-inline: 0; }
  .agenda-event-tabs-row,
  .agenda-events-heading { align-items: flex-start; flex-direction: column; }
  .agenda-event-type-tabs { width: 100%; }
  .agenda-event-type-pill { flex: 1 1 0; }
  .agenda-events-heading p { text-align: left; }
  .agenda-date-filter { align-self: flex-start; }
  .agenda-calendar-large .agenda-day { min-height: 44px; border-radius: 12px; }
  .agenda-event-row { grid-template-columns: 44px minmax(0, 1fr); }
  .agenda-row-actions { grid-column: 1 / -1; }
}

/* ========================================================================== */
/* Lunes Cívicos · cards y selectores de participantes alineados a Evaluación */
/* ========================================================================== */
body[data-start-module="civic"] .page-shell {
  width: min(1460px, calc(100% - 28px));
  padding-top: 24px;
  padding-bottom: 44px;
}

#civicMondaysView {
  display: grid;
  gap: 14px;
}
#civicMondaysView[hidden] { display: none !important; }

.civic-module-heading {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(25, 42, 72, .07);
}
.civic-module-heading h1 { margin-block: 4px 3px; }
.civic-module-heading p { margin: 0; }

.civic-workspace {
  grid-template-columns: minmax(238px, 282px) minmax(0, 1fr);
  gap: 14px;
}
.civic-history-panel {
  top: 14px;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 40%, var(--line));
  border-radius: 19px;
  box-shadow: none;
}
.civic-history-panel > .section-heading {
  min-height: 52px;
  margin: 0;
  padding: 11px 14px;
  color: var(--on-user-primary, #fff);
  background: var(--user-primary, var(--primary));
}
.civic-history-panel > .section-heading .eyebrow { color: inherit; opacity: .78; }
.civic-history-panel > .section-heading h2 { margin: 2px 0 0; color: inherit; font-size: .92rem; }
.civic-history-list {
  gap: 8px;
  max-height: calc(100vh - 190px);
  padding: 10px;
  background: color-mix(in srgb, var(--surface-soft) 32%, var(--surface));
}
.civic-history-card {
  position: relative;
  gap: 4px;
  min-height: 82px;
  padding: 11px 12px 11px 15px;
  overflow: hidden;
  border-radius: 13px;
  background: var(--surface);
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.civic-history-card::before {
  content: '';
  position: absolute;
  inset: 8px auto 8px 5px;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
}
.civic-history-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 38%, var(--line)); }
.civic-history-card.is-active {
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 54%, var(--line));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 9%, var(--surface));
}
.civic-history-card.is-active::before { background: var(--user-primary, var(--primary)); }
.civic-history-card strong { font-size: .82rem; line-height: 1.25; }
.civic-history-card span { font-size: .7rem; line-height: 1.35; }
.civic-history-card small {
  width: max-content;
  padding: 3px 7px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 76%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 10%, var(--surface));
  font-size: .64rem;
  font-weight: 800;
}

.civic-editor.civic-reference-workspace { gap: 13px; }
.civic-reference-card { border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 52%, var(--line)); }
.civic-reference-card .evaluation-reference-card-header { letter-spacing: .06em; }
.civic-inline-icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.civic-reference-body { gap: 13px; padding: 15px; }
.civic-reference-body label:not(.civic-student-row) {
  display: grid;
  gap: .35rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.civic-reference-body input:not([type="checkbox"]):not([type="radio"]),
.civic-reference-body select,
.civic-reference-body textarea {
  min-height: 40px;
  padding: .52rem .68rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
}
.civic-reference-body textarea { resize: vertical; }
.civic-reference-body input:focus,
.civic-reference-body select:focus,
.civic-reference-body textarea:focus {
  border-color: var(--user-primary, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--user-primary, var(--primary)) 12%, transparent);
}

.civic-participant-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.civic-participant-summary > div { min-width: 0; display: grid; gap: 3px; }
.civic-participant-summary strong { color: var(--ink); font-size: .9rem; }
.civic-participant-summary .muted { font-size: .72rem; }
.civic-flag-count {
  flex: none;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--user-primary, var(--primary)) 25%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 8%, var(--surface));
  font-size: .68rem;
  font-weight: 850;
  white-space: nowrap;
}

.civic-role-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 0;
}
.civic-participant-card {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.civic-participant-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 38%, var(--line));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 4%, var(--surface));
}
.civic-participant-card.is-assigned {
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 34%, var(--line));
}
.civic-flag-card { grid-column: 1 / -1; }
.civic-role-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 10%, var(--surface-soft));
}
.civic-role-icon svg { width: 22px; height: 22px; fill: currentColor; }
.civic-role-copy { min-width: 0; display: grid; gap: 2px; }
.civic-role-copy small {
  color: var(--muted);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.civic-role-copy strong { overflow: hidden; font-size: .78rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.civic-role-copy > span { overflow: hidden; color: var(--muted); font-size: .7rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.civic-participant-card.is-assigned .civic-role-copy > span { color: color-mix(in srgb, var(--user-primary, var(--primary)) 76%, var(--ink)); font-weight: 720; }
.civic-role-action { display: inline-flex; align-items: center; gap: 5px; color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink)); font-size: .67rem; font-weight: 800; white-space: nowrap; }
.civic-role-action b { font-size: 1.2rem; line-height: 1; }

.civic-creation-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.civic-creation-card {
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
}
.civic-creation-card:hover:not(:disabled) { border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 42%, var(--line)); background: color-mix(in srgb, var(--user-primary, var(--primary)) 5%, var(--surface)); }
.civic-creation-card:disabled { cursor: not-allowed; opacity: .55; }
.civic-creation-card > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.civic-creation-card strong { font-size: .86rem; }
.civic-creation-card small { color: var(--muted); font-size: .7rem; line-height: 1.35; }
.civic-creation-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink)); background: color-mix(in srgb, var(--user-primary, var(--primary)) 10%, var(--surface-soft)); }
.civic-creation-icon svg { width: 23px; height: 23px; fill: currentColor; }
.civic-creation-card.is-primary .civic-creation-icon { color: #685600; background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
.civic-option-arrow { color: var(--muted); font-size: 1.15rem; }
.civic-compatibility-panel { border-top: 1px solid var(--line); padding-top: 11px; }
.civic-compatibility-panel summary { color: var(--muted); font-size: .73rem; font-weight: 780; cursor: pointer; }
.civic-compatibility-content { margin-top: 13px; }

.civic-script-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.civic-script-actions .button { min-height: 31px; padding: 0 10px; border-radius: 5px; font-size: .68rem; text-transform: none; letter-spacing: normal; }
.civic-script-body { padding: 12px; }
.civic-script-body #civicScriptPreview { min-width: 0; }
.civic-program-card,
.civic-speech-card { border-color: var(--line); border-radius: 13px; background: var(--surface); }
.civic-program-card { padding: 13px 13px 13px 53px; }
.civic-program-card h3,
.civic-speech-card h3 { margin-top: 0; }
.civic-number { left: 12px; top: 12px; width: 29px; height: 29px; border-radius: 9px; }
.civic-editable { border-color: var(--line); border-radius: 7px; background: color-mix(in srgb, var(--surface-soft) 48%, var(--surface)); }
.civic-quote { background: color-mix(in srgb, #f7cb46 12%, var(--surface)); }

.civic-student-dialog .evaluation-students-dialog-heading h2 { font-size: 1.2rem; }
.civic-student-dialog .evaluation-students-dialog-footer .button-row { flex-wrap: nowrap; }
.civic-student-dialog .evaluation-students-dialog-footer .button { min-width: 96px; }
.civic-student-row { cursor: pointer; }
.civic-student-row input[type="radio"] { accent-color: var(--user-primary, var(--primary)); }
.civic-student-row .evaluation-student-main { min-width: 0; display: grid; }

html[data-theme="dark"] .civic-module-heading { box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
html[data-theme="dark"] .civic-history-card,
html[data-theme="dark"] .civic-participant-card,
html[data-theme="dark"] .civic-creation-card { background: color-mix(in srgb, var(--surface) 96%, #fff 4%); }

@media (max-width: 980px) {
  .civic-workspace { grid-template-columns: 1fr; }
  .civic-history-panel { position: static; }
  .civic-history-list { max-height: 260px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body[data-start-module="civic"] .page-shell { width: min(100% - 18px, 1460px); }
  .civic-module-heading { align-items: stretch; }
  .civic-module-heading .button-row { width: 100%; }
  .civic-module-heading .button-row .button { flex: 1 1 auto; }
  .civic-history-list,
  .civic-role-grid,
  .civic-creation-options { grid-template-columns: 1fr; }
  .civic-participant-summary { align-items: flex-start; flex-direction: column; }
  .civic-participant-card { grid-template-columns: 40px minmax(0, 1fr); }
  .civic-role-action { grid-column: 2; justify-self: start; }
  .civic-script-card .evaluation-reference-card-header { align-items: flex-start; flex-wrap: wrap; }
  .civic-script-actions { width: 100%; margin-left: 0; }
  .civic-script-actions .button { flex: 1 1 auto; }
  .civic-student-dialog .evaluation-students-dialog-footer { align-items: stretch; flex-direction: column; }
  .civic-student-dialog .evaluation-students-dialog-footer .button-row,
  .civic-student-dialog .evaluation-students-dialog-footer .button { width: 100%; }
}

/* Lunes Cívicos · navegador por aula y editor de ancho completo */
.civic-browser-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.civic-browser-panel[hidden],
.civic-editor-panel[hidden] { display: none !important; }

.civic-classroom-panel,
.civic-scripts-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--user-primary, var(--primary)) 42%, var(--line));
  border-radius: 19px;
  background: var(--surface);
}
.civic-classroom-panel {
  position: sticky;
  top: 14px;
}
.civic-browser-card-heading {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  color: var(--on-user-primary, #fff);
  background: var(--user-primary, var(--primary));
}
.civic-browser-card-heading > div { min-width: 0; }
.civic-browser-card-heading .eyebrow { color: inherit; opacity: .78; }
.civic-browser-card-heading h2 { margin: 2px 0 0; color: inherit; font-size: .86rem; }
.civic-classroom-list {
  display: grid;
  gap: 7px;
  max-height: calc(100vh - 205px);
  overflow: auto;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-soft) 35%, var(--surface));
}
.civic-classroom-card {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.civic-classroom-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 38%, var(--line));
}
.civic-classroom-card.is-active {
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 56%, var(--line));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 9%, var(--surface));
}
.civic-classroom-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 11%, var(--surface));
}
.civic-classroom-icon svg { width: 20px; height: 20px; fill: currentColor; }
.civic-classroom-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.civic-classroom-card strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.civic-classroom-card small { color: var(--muted); font-size: .66rem; }
.civic-classroom-card > b { color: var(--muted); font-size: 1.05rem; }

.civic-scripts-panel { min-height: 430px; }
.civic-scripts-heading {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.civic-scripts-heading > div { min-width: 0; }
.civic-scripts-heading h2 { margin: 3px 0; font-size: 1.08rem; }
.civic-scripts-heading p { margin: 0; font-size: .75rem; }
.civic-scripts-heading .button { flex: none; }
.civic-script-browser-grid.civic-history-list {
  max-height: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  padding: 14px;
  overflow: visible;
  background: color-mix(in srgb, var(--surface-soft) 30%, var(--surface));
}
.civic-script-browser-card.civic-history-card {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface);
}
.civic-script-browser-card::before { content: none; }
.civic-script-date {
  width: 50px;
  height: 58px;
  display: grid;
  place-content: center;
  gap: 0;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--user-primary, var(--primary)) 24%, var(--line));
  border-radius: 12px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 80%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 9%, var(--surface));
}
.civic-script-browser-card .civic-script-date strong { font-size: 1.16rem; line-height: 1; }
.civic-script-browser-card .civic-script-date small { padding: 0; color: inherit; background: transparent; font-size: .62rem; text-transform: uppercase; }
.civic-script-card-copy { min-width: 0; display: grid; gap: 4px; }
.civic-script-browser-card .civic-script-card-copy > small {
  width: max-content;
  padding: 3px 7px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 76%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 10%, var(--surface));
  font-size: .61rem;
  font-weight: 820;
}
.civic-script-browser-card .civic-script-card-copy > strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.civic-script-browser-card .civic-script-card-copy > span { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.civic-script-browser-card .civic-script-card-copy > em { overflow: hidden; color: var(--ink); font-size: .69rem; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.civic-script-card-arrow { color: color-mix(in srgb, var(--user-primary, var(--primary)) 72%, var(--muted)); font-size: 1.05rem; }
.civic-browser-empty { grid-column: 1 / -1; min-height: 300px; }

.civic-editor-panel { min-width: 0; display: grid; gap: 13px; }
.civic-editor-toolbar {
  position: sticky;
  top: 10px;
  z-index: 22;
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 9px 26px rgba(25, 42, 72, .09);
  backdrop-filter: blur(16px);
}
.civic-editor-back { width: 42px; min-width: 42px; height: 42px; padding: 0; }
.civic-editor-toolbar-copy { min-width: 0; }
.civic-editor-toolbar-copy h2 { margin: 2px 0; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.civic-editor-toolbar-copy p { margin: 0; font-size: .7rem; }
.civic-editor-actions { flex-wrap: nowrap; }
.civic-editor-actions .button { min-height: 38px; }
#civicMondaysView.is-editing > .web-back-button,
#civicMondaysView.is-editing > .civic-module-heading { display: none; }
#civicMondaysView.is-editing .civic-editor.civic-reference-workspace { width: 100%; }

html[data-theme="dark"] .civic-classroom-card,
html[data-theme="dark"] .civic-script-browser-card.civic-history-card { background: color-mix(in srgb, var(--surface) 96%, #fff 4%); }
html[data-theme="dark"] .civic-editor-toolbar { box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }

@media (max-width: 920px) {
  .civic-browser-panel { grid-template-columns: 230px minmax(0, 1fr); }
  .civic-script-browser-grid.civic-history-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .civic-browser-panel { grid-template-columns: 1fr; }
  .civic-classroom-panel { position: static; }
  .civic-classroom-list { max-height: 230px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .civic-editor-toolbar { position: static; grid-template-columns: auto minmax(0, 1fr); }
  .civic-editor-actions { grid-column: 1 / -1; width: 100%; }
  .civic-editor-actions .button { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .civic-classroom-list { grid-template-columns: 1fr; }
  .civic-scripts-heading { align-items: stretch; flex-direction: column; }
  .civic-scripts-heading .button { width: 100%; }
  .civic-script-browser-card.civic-history-card { grid-template-columns: 46px minmax(0, 1fr); }
  .civic-script-date { width: 46px; }
  .civic-script-card-arrow { grid-column: 2; justify-self: end; }
}

/* ========================================================================== */
/* Horarios · navegación izquierda y vista de horario a la derecha            */
/* ========================================================================== */
body[data-start-module="schedules"] .page-shell {
  width: min(1540px, calc(100% - 28px));
  padding-top: 24px;
  padding-bottom: 44px;
}
#schedulesView { display: grid; gap: 14px; }
#schedulesView[hidden] { display: none !important; }
.schedules-module-heading {
  margin: 0;
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(25, 42, 72, .07);
}
.schedules-module-heading h1 { margin-block: 4px 3px; }
.schedules-module-heading p { margin: 0; }
.schedules-module-heading .button-row { align-items: end; }
.schedule-year-control {
  min-width: 190px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.schedule-year-control select {
  min-height: 38px;
  margin-top: 5px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: .82rem;
  text-transform: none;
}

.schedule-master-detail {
  min-width: 0;
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}
.schedule-navigation-card {
  position: sticky;
  top: 14px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--user-primary, var(--primary)) 44%, var(--line));
  border-radius: 19px;
  background: var(--surface);
}
.schedule-navigation-heading {
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  color: var(--on-user-primary, #fff);
  background: var(--user-primary, var(--primary));
}
.schedule-navigation-heading-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.schedule-navigation-heading-icon svg { width: 22px; height: 22px; fill: currentColor; }
.schedule-navigation-heading > div { min-width: 0; }
.schedule-navigation-heading .eyebrow { color: inherit; opacity: .76; }
.schedule-navigation-heading h2 { margin: 2px 0 0; color: inherit; font-size: .88rem; }

.schedule-tabs {
  max-height: calc(100vh - 220px);
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface-soft) 34%, var(--surface));
}
.schedule-tab {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.schedule-tab:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 38%, var(--line));
}
.schedule-tab.is-active {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 58%, var(--line));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 9%, var(--surface));
  font-weight: inherit;
}
.schedule-tab-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 10%, var(--surface));
}
.schedule-tab-icon svg { width: 21px; height: 21px; fill: currentColor; }
.schedule-tab-copy { min-width: 0; display: grid; gap: 3px; }
.schedule-tab-copy strong { overflow: hidden; font-size: .78rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.schedule-tab-copy small { overflow: hidden; color: var(--muted); font-size: .63rem; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.schedule-tab-arrow { color: var(--muted); font-size: 1.05rem; line-height: 1; }
.schedule-tab.is-active .schedule-tab-arrow { color: var(--user-primary, var(--primary)); }

.schedule-workspace {
  min-width: 0;
  gap: 14px;
}
.schedule-workspace > .empty-state {
  min-height: 430px;
  align-content: center;
  border: 1px dashed var(--line);
  border-radius: 19px;
  background: color-mix(in srgb, var(--surface-soft) 38%, var(--surface));
}
.schedule-board-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 38%, var(--line));
  border-radius: 19px;
  background: var(--surface);
}
.schedule-table-toolbar {
  min-height: 78px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 28%, var(--surface));
}
.schedule-table-toolbar h2 { font-size: 1rem; }
.schedule-table-toolbar p { max-width: 66ch; font-size: .72rem; }
.schedule-table-toolbar .button-row { gap: 6px; }
.schedule-table-toolbar .button {
  min-height: 34px;
  padding-inline: 10px;
  border-radius: 7px;
  font-size: .68rem;
}
.schedule-table-wrap {
  border: 0;
  border-radius: 0;
  background: var(--surface);
}
.schedule-table { min-width: 760px; }
.schedule-table th {
  height: 42px;
  padding: .55rem .4rem;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 75%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 9%, var(--surface));
  font-size: .69rem;
}
.schedule-table td { height: 68px; }
.schedule-cell-button { min-height: 68px; }
.schedule-cell-button strong { font-size: .78rem; }
.schedule-cell-button small { font-size: .66rem; }
.schedule-cell-empty {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin: auto;
  border: 1px dashed color-mix(in srgb, var(--user-primary, var(--primary)) 36%, var(--line));
  border-radius: 8px;
  color: var(--user-primary, var(--primary));
  font-size: 1rem;
}

html[data-theme="dark"] .schedules-module-heading { box-shadow: 0 12px 30px rgba(0, 0, 0, .24); }
html[data-theme="dark"] .schedule-tab { background: color-mix(in srgb, var(--surface) 96%, #fff 4%); }

@media (max-width: 1040px) {
  .schedule-master-detail { grid-template-columns: 238px minmax(0, 1fr); }
  .schedule-table-toolbar { align-items: flex-start; }
  .schedule-table-toolbar .button-row { width: 100%; }
}

@media (max-width: 760px) {
  body[data-start-module="schedules"] .page-shell { width: min(100% - 18px, 1540px); }
  .schedules-module-heading { align-items: stretch; }
  .schedules-module-heading .button-row { width: 100%; }
  .schedule-year-control { min-width: 0; flex: 1 1 180px; }
  .schedule-master-detail { grid-template-columns: 1fr; }
  .schedule-navigation-card { position: static; }
  .schedule-tabs {
    max-height: 245px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .schedule-tabs { grid-template-columns: 1fr; }
  .schedule-table-toolbar .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-table-toolbar .button { width: 100%; }
}

/* ========================================================================== */
/* Documentos · centro documental equilibrado                                 */
/* ========================================================================== */
body[data-start-module="documents"] .page-shell {
  width: min(1460px, calc(100% - 28px));
  padding-top: 24px;
  padding-bottom: 44px;
}
#documentsView { display: grid; gap: 14px; }
#documentsView[hidden] { display: none !important; }
.documents-heading {
  margin: 0;
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(25, 42, 72, .07);
}
.documents-heading h1 { margin-block: 4px 3px; }
.documents-heading p { margin: 0; }

.documents-connection-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 34%, var(--line));
  border-radius: 18px;
  background: var(--surface);
  box-shadow: none;
}
.documents-connection-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 10%, var(--surface-soft));
}
.documents-connection-icon svg { width: 29px; height: 29px; fill: currentColor; }
.documents-connection-copy { min-width: 0; }
.documents-connection-copy h2 { margin: 4px 0 2px; font-size: 1rem; }
.documents-connection-copy p { margin: 0; font-size: .72rem; }
.documents-connection-copy .documents-account { margin-top: 3px; color: var(--ink); }
.documents-connection-actions { display: flex; align-items: center; gap: 7px; }
.documents-connection-actions .button { min-height: 37px; }
.documents-connection-card > .documents-security-note {
  grid-column: 2 / -1;
  margin: -4px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: .67rem;
}

.documents-center-layout.documents-layout {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.documents-navigation-card.documents-sidebar {
  position: sticky;
  top: 14px;
  display: block;
  max-height: none;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--user-primary, var(--primary)) 42%, var(--line));
  border-radius: 19px;
  background: var(--surface);
  box-shadow: none;
}
.documents-navigation-heading {
  min-height: 61px;
  padding: 12px 14px;
  color: var(--on-user-primary, #fff);
  background: var(--user-primary, var(--primary));
}
.documents-navigation-heading .eyebrow { color: inherit; opacity: .76; }
.documents-navigation-heading h2 { margin: 4px 0 0; color: inherit; font-size: .91rem; }
.documents-navigation {
  display: grid;
  gap: 7px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-soft) 34%, var(--surface));
}
.documents-navigation-item {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.documents-navigation-item:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 38%, var(--line));
}
.documents-navigation-item.is-active {
  border-color: color-mix(in srgb, var(--user-primary, var(--primary)) 58%, var(--line));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 9%, var(--surface));
}
.documents-navigation-item:disabled { cursor: not-allowed; opacity: .5; }
.documents-navigation-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: color-mix(in srgb, var(--user-primary, var(--primary)) 78%, var(--ink));
  background: color-mix(in srgb, var(--user-primary, var(--primary)) 10%, var(--surface));
}
.documents-navigation-icon svg { width: 21px; height: 21px; fill: currentColor; }
.documents-navigation-item > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.documents-navigation-item strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.documents-navigation-item small { overflow: hidden; color: var(--muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.documents-navigation-item > b { color: var(--muted); font-size: 1.05rem; }
.documents-navigation-item.is-active > b { color: var(--user-primary, var(--primary)); }

.documents-content { min-width: 0; }
.documents-content-panel.documents-card,
.documents-content-panel.documents-main {
  min-width: 0;
  min-height: 500px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--user-primary, var(--primary)) 36%, var(--line));
  border-radius: 19px;
  background: var(--surface);
  box-shadow: none;
}
.documents-content-panel[hidden] { display: none !important; }
.documents-content-heading {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 28%, var(--surface));
}
.documents-content-heading > div { min-width: 0; }
.documents-content-heading h2 { margin: 4px 0 2px; font-size: 1rem; }
.documents-content-heading p { margin: 0; font-size: .72rem; }
.documents-content-heading .button { flex: none; }

.documents-content-panel .documents-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-soft) 28%, var(--surface));
}
.documents-content-panel .document-item {
  min-width: 0;
  min-height: 142px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
  gap: 12px;
  padding: 13px;
  border-color: var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
}
.documents-content-panel .document-item-main { display: grid; gap: 5px; }
.documents-content-panel .document-item-main > strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: .82rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.documents-content-panel .document-item-main p { margin: 0; font-size: .68rem; line-height: 1.4; }
.documents-content-panel .document-status { width: max-content; font-size: .62rem; }
.documents-content-panel .document-item-actions { justify-content: flex-start; gap: 6px; }
.documents-content-panel .document-item-actions .button {
  min-height: 33px;
  padding-inline: 10px;
  border-radius: 7px;
  font-size: .67rem;
}
.documents-content-panel > .empty-state {
  min-height: 380px;
  margin: 14px;
  align-content: center;
  border: 1px dashed var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-soft) 38%, var(--surface));
}

.documents-upload-form {
  width: min(720px, calc(100% - 28px));
  margin: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 25%, var(--surface));
}
.documents-upload-form label {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
}
.documents-upload-form input,
.documents-upload-form select { min-height: 41px; border-radius: 8px; }
.documents-upload-form #driveUploadButton { justify-self: start; min-width: 160px; }

.documents-content-panel.documents-audit-card { display: grid; align-content: start; gap: 0; }
.documents-content-panel.documents-audit-card[hidden] { display: none !important; }
.documents-content-panel .documents-audit-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 14px 14px 6px;
}
.documents-content-panel .documents-audit-stat {
  min-height: 72px;
  place-content: center;
  border-color: var(--line);
  border-radius: 12px;
  text-align: center;
  background: color-mix(in srgb, var(--surface-soft) 38%, var(--surface));
}
.documents-content-panel .documents-audit-issues { gap: 8px; padding: 8px 14px 14px; }
.documents-content-panel .documents-audit-issue { border-radius: 8px; background: color-mix(in srgb, #fffaf0 70%, var(--surface)); }
.documents-content-panel .documents-audit-issue.is-error { background: color-mix(in srgb, #fff4f4 70%, var(--surface)); }
.documents-content-panel.documents-audit-card > .documents-security-note { margin: 0 14px 14px; padding-top: 11px; border-top: 1px solid var(--line); }

html[data-theme="dark"] .documents-heading { box-shadow: 0 12px 30px rgba(0, 0, 0, .24); }
html[data-theme="dark"] .documents-navigation-item,
html[data-theme="dark"] .documents-content-panel .document-item { background: color-mix(in srgb, var(--surface) 96%, #fff 4%); }

@media (max-width: 960px) {
  .documents-center-layout.documents-layout { grid-template-columns: 225px minmax(0, 1fr); }
  .documents-content-panel .documents-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body[data-start-module="documents"] .page-shell { width: min(100% - 18px, 1460px); }
  .documents-connection-card { grid-template-columns: 46px minmax(0, 1fr); }
  .documents-connection-icon { width: 46px; height: 46px; }
  .documents-connection-actions,
  .documents-connection-card > .documents-security-note { grid-column: 1 / -1; }
  .documents-center-layout.documents-layout { grid-template-columns: 1fr; }
  .documents-navigation-card.documents-sidebar { position: static; }
  .documents-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .documents-navigation-item { min-height: 76px; grid-template-columns: 34px minmax(0, 1fr); }
  .documents-navigation-icon { width: 34px; height: 34px; }
  .documents-navigation-item > b { display: none; }
}

@media (max-width: 560px) {
  .documents-navigation { grid-template-columns: 1fr; }
  .documents-navigation-item { min-height: 62px; grid-template-columns: 36px minmax(0, 1fr) auto; }
  .documents-navigation-item > b { display: block; }
  .documents-content-panel .documents-audit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .documents-content-heading { align-items: flex-start; flex-direction: column; }
  .documents-content-heading .button { width: 100%; }
  .documents-upload-form .field-row { grid-template-columns: 1fr; }
}