/* Shared design system — aligned with normativa.html (Normativa Redwood 2026–2027) */

:root {
  /* Normativa Redwood palette */
  --navy: #95001C;        /* rojo oscuro institucional — Pantone 200C */
  --navy-deep: #6E0013;
  --redwood: #FF2F3E;     /* rojo primario — Pantone Red 032C */
  --redwood-deep: #D6001F;
  --redwood-soft: #FFE9E6;
  --pink: #FFB4AB;        /* Pantone 169C */
  --paper: #FFF9F8;
  --mist: #FDEEEC;
  --ink: #2B2224;
  --ink-soft: #6E5F61;
  --line: #F3D9D5;
  --white: #FFFFFF;
  --radius: 14px;

  /* legacy aliases mapped onto the normativa palette */
  --paper2: var(--mist);
  --muted: var(--ink-soft);
  --faint: #B08A85;
  --brand: var(--redwood-deep);
  --brand-soft: var(--redwood-soft);
  --c: var(--redwood-deep);
  --on: #fff;
  --ink-c: var(--navy);
  --soft: var(--redwood-soft);
  --bd: #FFC9C2;
  --chip: #FFD9D4;
  --chiptx: var(--navy);
  --shadow: 0 1px 2px rgba(80, 0, 12, .04), 0 8px 24px rgba(80, 0, 12, .07);
  --shadow-lg: 0 16px 48px rgba(80, 0, 12, .16);
  --r: 14px;
  --sidebar: 286px;
  --display: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, 'Hanken Grotesk', Arial, sans-serif;
  --serif: var(--display);
  --sans: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, 'Hanken Grotesk', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 12% -5%, #fff 0%, transparent 45%),
    radial-gradient(circle at 100% 0%, var(--mist) 0%, transparent 38%);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -.01em;
}

a { color: inherit; }

button { font-family: inherit; cursor: pointer; }

::selection { background: #FFD9D4; color: var(--navy); }

:focus-visible { outline: 2px solid var(--redwood); outline-offset: 2px; border-radius: 4px; }

html { -webkit-tap-highlight-color: transparent; }

a, button { touch-action: manipulation; }

/* ---------- reusable components ---------- */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow);
}

.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: .18s;
  font-family: inherit;
}

.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.input::placeholder { color: var(--faint); }

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 18px;
  border: 1px solid transparent;
  transition: .14s;
  text-decoration: none;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: var(--shadow);
}

.btn-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
  filter: none;
}

.btn-ghost {
  background: #fff;
  color: var(--muted);
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn-block { width: 100%; }

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.tab {
  flex: 1;
  font-size: 13.5px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 10px;
  transition: .14s;
}

.tab.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  transition: .14s;
  text-decoration: none;
}

.nav-link:hover {
  background: var(--paper2);
  color: var(--ink);
}

.nav-link.active {
  background: var(--brand);
  color: #fff;
}

.alert {
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.alert-error {
  background: var(--brand-soft);
  color: var(--ink-c);
  border: 1px solid var(--bd);
}

.alert-success {
  background: #eef6ee;
  color: #2d5a2d;
  border: 1px solid #c8dcc8;
}

/* ---------- auth page layout ---------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.auth-wrap {
  width: min(420px, 100%);
}

.auth-brand {
  text-align: center;
  margin-bottom: 28px;
}

.auth-brand h1 {
  font-size: clamp(26px, 5vw, 34px);
  margin-bottom: 6px;
}

.auth-brand h1 em {
  font-style: italic;
  color: var(--brand);
}

.auth-brand p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.auth-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--faint);
}

/* ---------- guide-aligned auth extras (additive) ---------- */

.kicker {
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 800;
  margin: 0 0 10px;
}

.sb-logo {
  width: 100%;
  max-width: 188px;
  display: block;
  margin: 0 auto 8px;
}

.sb-tag {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
  text-align: center;
  margin: 0 0 18px;
}

.auth-card {
  padding-top: 26px;
}

.card-head {
  text-align: center;
  margin-bottom: 22px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.auth-title {
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}

.auth-title em {
  font-style: italic;
  color: var(--brand);
}

.auth-lede {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.5;
}

.link-brand {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .14s;
}

.link-brand:hover {
  opacity: .82;
  text-decoration: underline;
}

.auth-links {
  margin: -6px 0 14px;
  text-align: right;
}

.auth-switch {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}

/* ---------- reservar page (additive) ---------- */

.reserva-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px clamp(20px, 4vw, 48px);
  background: rgba(255, 253, 250, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.reserva-header-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.reserva-back {
  font-size: 13.5px;
}

.reserva-user {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.reserva-user-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.reserva-role {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--bd);
  padding: 3px 9px;
  border-radius: 20px;
}

.reserva-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 48px) 64px;
}

.reserva-page-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  margin: 0 0 24px;
  line-height: 1.1;
}

.reserva-page-title em {
  font-style: italic;
  color: var(--brand);
}

.reserva-tabs {
  flex-wrap: wrap;
}

.reserva-tabs .tab {
  flex: 0 1 auto;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

.panel-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 10px;
}

.panel-placeholder {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/* ---------- admin horario editor (additive) ---------- */

.horario-section {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.horario-section:first-of-type {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

.horario-section-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--ink);
}

.horario-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.horario-inline-field {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.horario-classes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.horario-class-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper2);
  margin-bottom: 8px;
  font-size: 14px;
}

.horario-empty,
.horario-day-empty {
  margin: 0;
  font-size: 13px;
  color: var(--faint);
  font-style: italic;
}

.horario-grade-select {
  max-width: 160px;
}

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

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

.horario-day-col {
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
  min-height: 120px;
}

.horario-day-hd {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 10px;
}

.horario-day-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.horario-slot-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  box-shadow: var(--shadow);
}

.horario-slot-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}

.horario-slot-main strong {
  font-size: 14px;
  color: var(--ink);
}

.horario-slot-time {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
}

.horario-slot-teacher {
  font-size: 12px;
  color: var(--muted);
}

.horario-slot-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.horario-btn-sm {
  font-size: 12px;
  padding: 6px 10px;
}

.horario-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.horario-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.horario-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--redwood-soft);
}

.horario-info-text {
  flex: 1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}

.horario-info-dismiss {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.horario-info-dismiss:hover {
  color: var(--ink);
}

.horario-step-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}

.horario-step-lede {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.horario-step-gate {
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .02);
}

.horario-step-gate p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.horario-step2-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.horario-grade-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.horario-grade-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.horario-schedule-unit {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.horario-placement-block {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--shadow);
}

.horario-form-heading {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--ink);
}

.horario-form-grade {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
}

.horario-form-grade strong {
  color: var(--brand);
  font-weight: 800;
}

.horario-teacher-field {
  grid-column: 1 / -1;
}

.horario-teacher-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.horario-teacher-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.horario-teacher-empty {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  font-style: italic;
}

.horario-teacher-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}

.horario-teacher-toggle:has(.horario-teacher-checkbox:checked) {
  border-color: var(--bd);
  background: var(--redwood-soft);
}

.horario-teacher-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}

.horario-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.horario-multi-fields {
  margin-top: 14px;
}

.horario-multi-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.horario-multi-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.horario-multi-part {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .02);
}

.horario-multi-part legend {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand);
  padding: 0 6px;
}

.horario-slot-card-multi {
  position: relative;
}

.horario-multi-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  padding: 2px 7px;
  background: rgba(176, 41, 52, .1);
  color: var(--brand);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .03em;
}

.horario-multi-split {
  display: grid;
  gap: 10px;
}

.horario-multi-part-display {
  padding: 8px 10px;
  border-left: 3px solid rgba(176, 41, 52, .35);
  background: rgba(176, 41, 52, .04);
  border-radius: 0 8px 8px 0;
}

.horario-multi-part-display strong {
  display: block;
  font-size: 13.5px;
  margin-bottom: 2px;
}

.reservar-part-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--brand);
  background: rgba(176, 41, 52, .1);
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
}

.reservar-slot-row-multi .reservar-slot-class {
  display: inline;
}

.horario-grade-empty {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(180, 120, 40, .3);
  background: rgba(180, 120, 40, .08);
  font-size: 13.5px;
  color: #7a4a12;
}

.horario-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.horario-grid-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.horario-class-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.horario-class-name {
  font-weight: 600;
}

.horario-class-meta {
  font-size: 12px;
  color: var(--muted);
}

.horario-slot-unassigned {
  color: #7a4a12;
  font-weight: 600;
}

.horario-slot-card-unassigned {
  border-color: rgba(180, 120, 40, .35);
  background: rgba(180, 120, 40, .04);
}

.horario-assign-btn {
  align-self: flex-start;
  margin-top: 4px;
  color: var(--brand);
  font-weight: 600;
}

/* ---------- admin usuarios (additive) ---------- */

.usuarios-lede {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
}

.usuarios-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usuarios-empty {
  margin: 0;
  font-size: 14px;
  color: var(--faint);
  font-style: italic;
}

.usuarios-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper2);
}

.usuarios-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  flex: 1;
  min-width: 200px;
}

.usuarios-name-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 140px;
}

.usuarios-name {
  font-size: 14px;
  color: var(--ink);
}

.usuarios-id,
.usuarios-you {
  font-size: 12px;
  color: var(--faint);
}

.usuarios-you {
  font-weight: 600;
  color: var(--brand);
}

.usuarios-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
}

.usuarios-badge-student {
  color: var(--muted);
}

.usuarios-badge-teacher {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--redwood-soft);
}

.usuarios-badge-admin {
  color: #7a4a12;
  border-color: rgba(180, 120, 40, .3);
  background: rgba(180, 120, 40, .08);
}

.usuarios-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  min-width: 4.5em;
}

.usuarios-row-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.usuarios-role-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.usuarios-role-select {
  min-width: 160px;
  margin: 0;
}

/* ---------- teacher profile (additive) ---------- */

.teacher-profile-lede {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.teacher-profile-section {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.teacher-profile-section:first-of-type {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

.teacher-profile-section-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--ink);
}

.teacher-code-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper2);
}

.teacher-code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--brand);
}

.teacher-code-hint,
.teacher-code-missing {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--faint);
}

.teacher-classes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.teacher-classes-empty {
  margin: 0;
  font-size: 14px;
  color: var(--faint);
  font-style: italic;
}

.teacher-class-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}

.teacher-class-toggle:has(.teacher-class-checkbox:checked) {
  border-color: var(--bd);
  background: var(--redwood-soft);
}

.teacher-class-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}

/* ---------- admin draft panel (additive) ---------- */

.draft-section {
  margin-top: 8px;
}

.draft-section-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}

.draft-subtitle {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--muted);
}

.draft-lede,
.draft-empty {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.draft-empty {
  font-style: italic;
  color: var(--faint);
}

.draft-order-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.draft-order-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.draft-order-buttons {
  display: flex;
  gap: 8px;
}

.draft-teacher-block {
  margin-bottom: 18px;
}

.draft-reorder-list,
.draft-teacher-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.draft-reorder-item,
.draft-teacher-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper2);
  font-size: 14px;
}

.draft-reorder-pos {
  font-weight: 800;
  color: var(--brand);
  min-width: 1.5em;
}

.draft-reorder-name {
  flex: 1;
}

.draft-reorder-actions {
  display: flex;
  gap: 4px;
}

.draft-btn-sm {
  font-size: 12px;
  padding: 4px 8px;
  min-width: 2rem;
}

.draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.draft-live-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.draft-phase-badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.draft-phase-live {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--redwood-soft);
}

.draft-phase-open {
  color: #7a4a12;
  border-color: rgba(180, 120, 40, .35);
  background: rgba(180, 120, 40, .08);
}

.draft-countdown-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.draft-countdown-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
}

.draft-countdown {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

.draft-countdown-expired {
  color: #b45309;
  font-size: 16px;
  letter-spacing: .04em;
}

.draft-turn-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.draft-turn-row {
  display: grid;
  grid-template-columns: 2rem 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

.draft-turn-row-active {
  border-color: var(--bd);
  background: var(--redwood-soft);
  box-shadow: var(--shadow);
}

.draft-turn-pos {
  font-weight: 800;
  color: var(--brand);
}

.draft-turn-name {
  font-weight: 600;
}

.draft-turn-picks {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.draft-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper2);
}

.draft-badge-pending {
  color: var(--muted);
}

.draft-badge-active {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--redwood-soft);
}

.draft-badge-done {
  color: #166534;
  border-color: rgba(22, 101, 52, .25);
  background: rgba(22, 101, 52, .08);
}

.draft-badge-skipped {
  color: var(--faint);
  font-style: italic;
}

/* ---------- teacher reservar draft (additive) ---------- */

.reservar-empty,
.reservar-hint {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.reservar-banner {
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}

.reservar-banner-waiting {
  background: var(--paper2);
}

.reservar-banner-active {
  background: var(--redwood-soft);
  border-color: var(--bd);
}

.reservar-banner-open {
  background: rgba(180, 120, 40, .08);
  border-color: rgba(180, 120, 40, .35);
}

.reservar-banner-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
}

.reservar-banner-text,
.reservar-queue {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
}

.reservar-queue {
  font-size: 13px;
}

.reservar-queue-panel {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: calc(var(--r) - 2px);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--line);
}

.reservar-banner-active .reservar-queue-panel {
  background: rgba(255, 255, 255, .7);
}

.reservar-queue-line {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}

.reservar-queue-line:last-child {
  margin-bottom: 0;
}

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

.reservar-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 26, 26, .45);
}

.reservar-success-overlay[hidden] {
  display: none;
}

.reservar-success-dialog {
  width: min(100%, 360px);
  padding: 28px 24px 22px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
  text-align: center;
}

.reservar-success-title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.reservar-success-text {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

.reservar-success-ok {
  min-width: 120px;
}

.reservar-countdown-wrap {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reservar-countdown-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
}

.reservar-countdown {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

.reservar-countdown-expired {
  color: #b45309;
  font-size: 15px;
}

.reservar-section-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}

.reservar-slots-section {
  margin-bottom: 24px;
}

.reservar-slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reservar-slot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.reservar-slot-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.reservar-slot-class {
  font-size: 14px;
  color: var(--ink);
}

.reservar-slot-meta {
  font-size: 12.5px;
  color: var(--muted);
}

.reservar-slot-pick {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}

.reservar-space-picks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reservar-space-pick-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reservar-space-pick-hd {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.reservar-pick-entry {
  display: block;
  margin-bottom: 4px;
}

.reservar-pick-entry:last-child {
  margin-bottom: 0;
}

.reservar-space-select {
  width: 100%;
  margin: 0;
}

.reservar-pick-space {
  font-weight: 700;
  color: var(--brand);
  margin-right: 8px;
}

.reservar-pick-status {
  font-size: 12px;
  color: var(--muted);
}

.reservar-pick-confirmed {
  color: #166534;
  font-weight: 600;
}

.reservar-pick-empty {
  font-size: 13px;
  color: var(--faint);
  font-style: italic;
}

.reservar-confirm-section {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.reservar-confirm-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.reservar-code-input {
  flex: 1;
  min-width: 140px;
  max-width: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  margin: 0;
}

/* ---------- student read-only views (additive) ---------- */

.student-section {
  margin-top: 20px;
}

.student-section:first-of-type {
  margin-top: 12px;
}

.password-field {
  position: relative;
}

.password-field .input {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.reserva-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

.reserva-logo {
  width: auto;
  max-width: 120px;
  max-height: 36px;
  margin: 0;
  flex: 0 0 auto;
}

.horario-view-plano-link {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: var(--r, 12px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.horario-view-plano-btn {
  font-size: 13.5px;
  font-weight: 700;
}

.horario-view-plano-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.horario-view-section {
  margin-top: 20px;
}

.horario-view-section:first-of-type {
  margin-top: 0;
}

.horario-view-grade-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}

.horario-view-draft-banner {
  margin: 0 0 16px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.horario-view-slot .horario-slot-main {
  margin-bottom: 0;
}

.horario-view-space {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
}

.horario-view-space-pending {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--faint);
  font-style: italic;
}

.student-grade-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}

.student-slot-readonly {
  cursor: default;
}

.student-empty {
  margin: 0;
  font-size: 14px;
  color: var(--faint);
  font-style: italic;
}

.student-draft-banner {
  margin: 0 0 16px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.student-reserva-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.student-reserva-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.student-reserva-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.student-reserva-class {
  font-size: 14px;
  color: var(--ink);
}

.student-reserva-meta,
.student-reserva-teacher {
  font-size: 12.5px;
  color: var(--muted);
}

.student-reserva-space {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand);
  padding: 6px 12px;
  background: var(--redwood-soft);
  border: 1px solid var(--bd);
  border-radius: 999px;
}

/* Admin — Espacios de estudio */
.study-admin-section {
  margin-top: 28px;
}

.study-admin-section-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--ink);
}

.study-admin-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.study-admin-field {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
}

.study-admin-empty {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  padding: 12px 0;
}

.study-admin-spaces-list,
.study-admin-bookings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.study-admin-space-row,
.study-admin-booking-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

.study-admin-space-main,
.study-admin-booking-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex: 1;
  min-width: 0;
}

.study-admin-space-name,
.study-admin-booking-requester {
  font-weight: 700;
  color: var(--ink);
}

.study-admin-space-meta,
.study-admin-booking-role,
.study-admin-booking-linked,
.study-admin-booking-when {
  font-size: 13px;
  color: var(--muted);
}

.study-admin-booking-space {
  font-weight: 600;
  color: var(--brand);
}

.study-admin-space-actions,
.study-admin-booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.study-admin-btn-sm {
  font-size: 12px;
  padding: 4px 10px;
}

.study-admin-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.study-admin-badge-active {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--redwood-soft);
}

.study-admin-badge-inactive {
  color: var(--muted);
  background: rgba(0, 0, 0, .04);
}

.study-admin-status-badge {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.study-admin-status-pending {
  color: #7a4a12;
  border-color: rgba(180, 120, 40, .35);
  background: rgba(180, 120, 40, .08);
}

.study-admin-status-approved {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--redwood-soft);
}

.study-admin-status-rejected {
  color: #9f1239;
  border-color: rgba(159, 18, 57, .25);
  background: rgba(159, 18, 57, .06);
}

.study-admin-status-cancelled {
  color: var(--muted);
  background: rgba(0, 0, 0, .04);
}

.study-admin-decided-wrap {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.study-admin-decided-summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
  user-select: none;
}

.study-admin-decided-summary:hover {
  color: var(--ink);
}

/* Student/teacher — Espacios de estudio */
.study-book-section {
  margin-top: 28px;
}

.study-book-section-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--ink);
}

.study-book-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.study-book-field {
  margin: 0;
}

.study-book-student-cap {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  padding: 8px 12px;
  background: var(--redwood-soft);
  border: 1px solid var(--bd);
  border-radius: 8px;
}

.study-book-taken-wrap {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .02);
}

.study-book-taken-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--muted);
}

.study-book-taken-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.study-book-taken-item {
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
}

.study-book-taken-empty {
  font-size: 13px;
  color: var(--muted);
}

.study-book-empty {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  padding: 12px 0;
}

.study-book-own-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.study-book-own-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

.study-book-own-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex: 1;
  min-width: 0;
}

.study-book-own-space {
  font-weight: 700;
  color: var(--ink);
}

.study-book-own-linked,
.study-book-own-when {
  font-size: 13px;
  color: var(--muted);
}

.study-book-own-actions {
  display: flex;
  gap: 6px;
}

.study-book-btn-sm {
  font-size: 12px;
  padding: 4px 10px;
}

.study-book-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.study-book-status-badge {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.study-book-status-pending {
  color: #7a4a12;
  border-color: rgba(180, 120, 40, .35);
  background: rgba(180, 120, 40, .08);
}

.study-book-status-approved {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--redwood-soft);
}

.study-book-status-rejected {
  color: #9f1239;
  border-color: rgba(159, 18, 57, .25);
  background: rgba(159, 18, 57, .06);
}

.study-book-status-cancelled {
  color: var(--muted);
  background: rgba(0, 0, 0, .04);
}

/* ---------- reservar app polish (additive) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper2);
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
}

.badge--pending,
.study-book-status-pending,
.study-admin-status-pending,
.draft-badge-pending {
  color: var(--chiptx);
  border-color: var(--bd);
  background: var(--brand-soft);
}

.badge--approved,
.badge--active,
.study-book-status-approved,
.study-admin-status-approved,
.study-admin-badge-active,
.draft-badge-active {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--brand-soft);
}

.badge--done,
.draft-badge-done {
  color: var(--chiptx);
  border-color: var(--chip);
  background: var(--paper2);
}

.badge--rejected,
.study-book-status-rejected,
.study-admin-status-rejected {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--soft);
}

.badge--cancelled,
.badge--skipped,
.badge--inactive,
.study-book-status-cancelled,
.study-admin-status-cancelled,
.draft-badge-skipped {
  color: var(--faint);
  border-color: var(--line);
  background: var(--paper2);
  font-style: italic;
}

.badge--role {
  text-transform: uppercase;
  letter-spacing: .1em;
}

.badge--role-student,
.usuarios-badge-student {
  color: var(--muted);
  border-color: var(--line);
  background: #fff;
}

.badge--role-teacher,
.usuarios-badge-teacher {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--brand-soft);
}

.badge--role-admin,
.usuarios-badge-admin {
  color: var(--chiptx);
  border-color: var(--chip);
  background: var(--soft);
}

.badge--phase-live,
.draft-phase-live {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--brand-soft);
}

.badge--phase-open,
.draft-phase-open {
  color: var(--chiptx);
  border-color: var(--chip);
  background: var(--soft);
}

.badge--state-waiting {
  color: var(--muted);
  border-color: var(--line);
  background: #fff;
}

.badge--state-your-turn {
  color: var(--brand);
  border-color: var(--bd);
  background: var(--brand-soft);
}

.badge--state-open {
  color: var(--chiptx);
  border-color: var(--chip);
  background: var(--soft);
}

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: var(--chip);
  color: var(--chiptx);
  line-height: 1.2;
}

.chip--muted,
.horario-view-space-pending {
  font-weight: 600;
  font-style: italic;
  color: var(--faint);
  border-color: var(--line);
  background: var(--paper2);
}

.reserva-header {
  padding: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.reserva-header-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px clamp(20px, 4vw, 48px);
  max-width: 1200px;
  margin: 0 auto;
}

.reserva-header-start {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.reserva-header-actions {
  flex-shrink: 0;
}

.reserva-logout {
  font-size: 13.5px;
}

.reserva-role.badge {
  font-size: 10px;
  padding: 3px 9px;
}

.reserva-main {
  max-width: 1080px;
}

.reserva-tabs {
  gap: 6px;
  padding: 4px;
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 24px;
}

.reserva-tabs .tab,
.reserva-tab {
  flex: 0 1 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}

.reserva-tabs .tab:hover,
.reserva-tab:hover {
  background: rgba(255, 255, 255, .7);
  color: var(--ink);
}

.reserva-tabs .tab.active,
.reserva-tab.active {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow);
}

.panel.card {
  padding: 32px 32px 28px;
}

.panel-title {
  font-size: 24px;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.app-form-section {
  margin-top: 28px;
}

.app-form-card {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper2);
}

.horario-slot-class {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.horario-slot-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.horario-view-slot .horario-slot-main {
  gap: 8px;
}

.horario-view-slot .chip {
  align-self: flex-start;
  margin-top: 2px;
}

.horario-day-col {
  background: #fff;
  box-shadow: var(--shadow);
}

.horario-day-hd {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.horario-view-slot {
  transition: border-color .15s, box-shadow .15s;
}

.horario-view-slot:hover {
  border-color: var(--bd);
  box-shadow: var(--shadow);
}

.horario-day-empty {
  padding: 12px 8px;
  text-align: center;
}

.draft-countdown-panel,
.reservar-countdown-panel {
  padding: 14px 18px;
  border-radius: var(--r);
  border: 1px solid var(--bd);
  background: var(--brand-soft);
}

.reservar-countdown-panel--active,
.draft-countdown-panel {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--shadow);
}

.draft-countdown-wrap,
.reservar-countdown-wrap {
  align-items: flex-start;
}

.draft-countdown,
.reservar-countdown {
  font-size: clamp(32px, 5vw, 42px);
  color: var(--brand);
  letter-spacing: .04em;
}

.draft-turn-row-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--shadow);
}

.draft-turn-row-active .draft-turn-pos {
  color: var(--brand);
}

.reservar-banner {
  position: relative;
  padding-top: 36px;
}

.reservar-state-badge {
  position: absolute;
  top: 14px;
  right: 16px;
}

.reservar-banner-waiting {
  border-left: 4px solid var(--line);
}

.reservar-banner-active {
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  border-color: var(--bd);
}

.reservar-banner-open {
  border-left: 4px solid var(--chip);
  background: var(--soft);
  border-color: var(--bd);
}

.study-book-own-row,
.study-admin-booking-row,
.study-admin-space-row,
.reservar-slot-row {
  border-radius: var(--r);
  transition: border-color .15s;
}

.study-book-own-row:hover,
.study-admin-booking-row:hover,
.reservar-slot-row:hover {
  border-color: var(--bd);
}

.horario-placement-block,
.draft-reorder-item,
.teacher-code-box {
  border-radius: var(--r);
}

@media (max-width: 640px) {
  .reserva-header-band {
    flex-direction: column;
    align-items: stretch;
  }

  .reserva-header-actions {
    width: 100%;
  }

  .reserva-logout {
    width: 100%;
  }

  .reserva-tabs {
    flex-direction: column;
  }

  .reserva-tabs .tab,
  .reserva-tab {
    width: 100%;
    text-align: center;
  }
}


/* ═══════════════ Normativa Redwood skin — app polish layer (additive) ═══════════════ */

body::-webkit-scrollbar { width: 11px; }
body::-webkit-scrollbar-track { background: var(--paper); }
body::-webkit-scrollbar-thumb { background: #E9B7B0; border-radius: 8px; border: 3px solid var(--paper); }
body::-webkit-scrollbar-thumb:hover { background: var(--redwood); }

button:active { transform: scale(.975); }

.btn {
  border-radius: 11px;
  transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease,
    color .18s ease, border-color .18s ease, filter .18s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--redwood), var(--redwood-deep));
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(255, 47, 62, .25);
}

.btn-primary:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 47, 62, .32);
}

.btn-primary:disabled {
  transform: none;
  box-shadow: none;
}

.btn-danger {
  background: var(--redwood-deep);
  color: #fff;
  border-color: transparent;
}

.btn-danger:hover {
  background: var(--navy);
}

.btn-danger:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.tab.active,
.reserva-tabs .tab.active,
.reserva-tab.active {
  background: var(--navy);
  color: #fff;
}

.panel-title,
.horario-step-title,
.horario-section-title,
.teacher-profile-section-title,
.draft-section-title,
.reservar-section-title,
.reservar-banner-title,
.reservar-success-title,
.study-admin-section-title,
.study-book-section-title,
.auth-title,
.reserva-page-title {
  color: var(--navy);
  letter-spacing: -.015em;
}

.auth-title em,
.reserva-page-title em {
  color: var(--redwood);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--redwood);
}

.reserva-main > .kicker::after {
  content: "";
  flex: 0 0 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--redwood), transparent);
}

.card {
  border-radius: 16px;
}

.panel.card {
  position: relative;
  overflow: hidden;
}

.panel.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--redwood), #FF8A80);
  border-radius: 16px 16px 0 0;
}

.auth-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--redwood), #FF8A80);
}

.reserva-header {
  position: relative;
}

.reserva-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--redwood), #FF7A6E);
  box-shadow: 0 0 10px rgba(255, 47, 62, .35);
}

.horario-slot-card,
.horario-view-slot {
  border-radius: 12px;
}

.horario-view-slot:hover {
  box-shadow: 0 10px 26px rgba(149, 0, 28, .10);
  transform: translateY(-1px);
}

.horario-view-slot {
  transition: border-color .15s, box-shadow .2s, transform .2s;
}

.horario-day-hd {
  color: var(--navy);
}

.horario-slot-time {
  color: var(--redwood-deep);
}

.horario-info {
  border: 1px solid var(--bd);
  background: linear-gradient(135deg, #FFF0EE, #FFE4E0);
}

.horario-grade-empty {
  border: 1px solid rgba(180, 120, 40, .3);
  background: rgba(180, 120, 40, .08);
}

/* ---------- admin horario UX overhaul (C2, additive) ---------- */

.horario-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow);
  margin-top: 22px;
}

.horario-step:first-of-type {
  padding-top: 22px;
}

.horario-step .horario-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.horario-step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--redwood-soft);
  color: var(--redwood-deep);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

.horario-step-gate {
  border: 1px dashed var(--bd);
  background: var(--paper);
  border-radius: 12px;
  padding: 18px 20px;
}

.horario-gate-title {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
}

.horario-gate-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.horario-gate-steps li::marker {
  color: var(--redwood);
  font-weight: 800;
}

/* day pills */
.horario-day-field {
  grid-column: 1 / -1;
}

.horario-day-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.horario-day-checks .horario-day-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  text-transform: none;
  letter-spacing: .01em;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}

.horario-day-checks .horario-day-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.horario-day-checks .horario-day-check:hover {
  border-color: var(--redwood);
  color: var(--redwood-deep);
}

.horario-day-checks .horario-day-check:has(input:checked) {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 4px 12px rgba(149, 0, 28, .22);
}

.horario-day-checks .horario-day-check:has(input:disabled) {
  opacity: .45;
  cursor: not-allowed;
}

.horario-day-checks .horario-day-check:has(input:disabled):hover {
  border-color: var(--line);
  color: var(--muted);
}

.horario-day-checks .horario-day-check:has(input:checked):has(input:disabled),
.horario-day-checks .horario-day-check:has(input:checked)[data-locked] {
  opacity: 1;
}

.horario-day-hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--faint);
}

/* time quick-picks */
.horario-time-presets-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 4px 0 14px;
}

.horario-presets-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
}

.horario-time-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.horario-time-preset {
  border: 1px solid #F0C6C0;
  background: #fff;
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(80, 0, 12, .05);
  transition: all .15s;
}

.horario-time-preset:hover {
  border-color: var(--redwood);
  color: var(--redwood);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(214, 0, 31, .12);
}

.horario-time-preset.active {
  background: var(--redwood-soft);
  border-color: var(--redwood);
  color: var(--redwood-deep);
}

/* click-to-add */
.horario-day-col {
  cursor: default;
}

.horario-day-add {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--bd);
  border-radius: 10px;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  transition: all .15s;
}

.horario-day-add:hover {
  border-color: var(--redwood);
  color: var(--redwood-deep);
  background: var(--redwood-soft);
}

.horario-day-col-clickable {
  transition: border-color .15s, box-shadow .15s;
}

.horario-day-col-clickable:hover {
  border-color: var(--bd);
}

/* success toast */
.horario-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: var(--navy);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(80, 0, 12, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 1200;
  max-width: min(92vw, 560px);
  text-align: center;
}

.horario-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.horario-toast strong {
  color: var(--pink);
  font-weight: 700;
}

/* confirm dialog */
.horario-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(43, 7, 12, .45);
}

.horario-confirm-overlay[hidden] {
  display: none;
}

.horario-confirm-dialog {
  width: min(100%, 400px);
  padding: 24px 24px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 64px rgba(80, 0, 12, .3);
}

.horario-confirm-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

.horario-confirm-text {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.horario-confirm-text strong {
  color: var(--redwood-deep);
}

.horario-confirm-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--redwood-soft);
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 16px;
}

.horario-confirm-ack[hidden] {
  display: none;
}

.horario-confirm-ack input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--redwood-deep);
  cursor: pointer;
  flex-shrink: 0;
}

.horario-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Horario view — real-time week dates (additive)
   ============================================================ */

.horario-week-label {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.horario-day-col--today {
  border-color: var(--redwood);
  box-shadow: inset 0 0 0 1px var(--redwood), var(--shadow);
}

.horario-day-col--today .horario-day-hd {
  color: var(--redwood-deep);
}

.horario-today-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--redwood-soft);
  color: var(--redwood-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  vertical-align: middle;
}

/* ---------- student guide page (additive) ---------- */

.student-subnav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 249, 248, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.student-subnav-in {
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px 18px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.student-subnav a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 8px;
  transition: background .14s, color .14s;
}

.student-subnav a:hover {
  background: #fff;
  color: var(--navy);
}

/* ---------- admin delete user (additive) ---------- */

.usuarios-delete-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: var(--redwood-deep);
  cursor: pointer;
  transition: background .14s, transform .14s, box-shadow .14s;
}

.usuarios-delete-btn:hover:not(:disabled) {
  background: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(149, 0, 28, .22);
}

.usuarios-delete-btn:active:not(:disabled) {
  transform: none;
  box-shadow: none;
}

.usuarios-delete-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------- study timeline (additive) ---------- */

.study-tl {
  margin: 2px 0 6px;
}

.study-tl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.study-tl-inner {
  min-width: 748px; /* 22 segments x ~34px so touch targets stay usable */
  padding-top: 30px; /* room for the CSS tooltip above the track */
}

.study-tl-track {
  position: relative;
  display: flex;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.study-tl-seg {
  flex: 1 1 0;
  min-width: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
}

.study-tl-seg:last-child {
  border-right: 0;
}

.study-tl-seg--free {
  cursor: pointer;
  transition: background .12s;
}

.study-tl-seg--free:hover {
  background: var(--mist);
}

.study-tl-seg--free:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-radius: 4px;
}

.study-tl-seg--busy {
  background: var(--mist);
}

.study-tl-block {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 6px;
  min-width: 6px;
  cursor: default;
}

/* pending: soft striped fill using the pending-badge tokens (--brand-soft / --chip / --bd) */
.study-tl-block--pending {
  background: repeating-linear-gradient(
    45deg,
    var(--brand-soft) 0 6px,
    var(--chip) 6px 12px
  );
  border: 1px solid var(--bd);
}

/* approved: solid fill using the approved-badge accent token (--brand) */
.study-tl-block--approved {
  background: var(--brand);
  border: 1px solid var(--brand);
}

/* current user's own booking: subtle ring (paper gap + navy line) visible on both fills */
.study-tl-block--own {
  box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--navy);
}

/* small CSS tooltip (also mirrored in title/aria-label); shows on hover and on tap via focus */
.study-tl-block::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 6;
}

.study-tl-block:hover::after,
.study-tl-block:focus::after,
.study-tl-block:focus-visible::after {
  opacity: 1;
}

.study-tl-block:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.study-tl-hours {
  position: relative;
  height: 15px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--faint);
}

.study-tl-hour {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.study-tl-hour--start {
  transform: translateX(0);
}

.study-tl-hour--end {
  transform: translateX(-100%);
}

.study-tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

.study-tl-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.study-tl-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.study-tl-swatch--pending {
  background: repeating-linear-gradient(
    45deg,
    var(--brand-soft) 0 3px,
    var(--chip) 3px 6px
  );
  border-color: var(--bd);
}

.study-tl-swatch--approved {
  background: var(--brand);
  border-color: var(--brand);
}

.study-tl-swatch--own {
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--navy);
}