/*
 * Admission — the areas explainer, the onboarding and the study calendar.
 *
 * Loaded only on those pages. It is the same chalkboard palette as the rest of
 * the platform; what is new here is one idea repeated everywhere: a number of
 * questions is always drawn as a bar, never only as a digit. "Biología: 8" is a
 * fact a student reads and forgets; a bar twice as long as Trigonometría's is
 * an argument about what to study on Saturday morning.
 *
 * The four block accents are the same four the .stat row already uses, so a
 * student meets no new colour vocabulary.
 */

.block-math {
  --block-accent: var(--ap-board-500);
  --ap-progress-fill: var(--ap-board-500);
}

.block-letters {
  --block-accent: var(--ap-flame-600);
  --ap-progress-fill: var(--ap-flame-600);
}

.block-social {
  --block-accent: #6d9487;
  --ap-progress-fill: #6d9487;
}

.block-natural {
  --block-accent: var(--ap-right-600);
  --ap-progress-fill: var(--ap-right-600);
}

/* Question counts as flex weights.
 *
 * The templates carry no style attribute — the project keeps HTML and CSS
 * apart, and a chart whose proportions live in the markup is a chart nobody
 * can restyle. A count of 8 becomes class "q8" and the flexbox does the
 * arithmetic, which is also why the bars stay correct when the university
 * republishes a distribution: only the number in the class changes.
 */
.q0 { flex-grow: 0; }
.q1 { flex-grow: 1; }
.q2 { flex-grow: 2; }
.q3 { flex-grow: 3; }
.q4 { flex-grow: 4; }
.q5 { flex-grow: 5; }
.q6 { flex-grow: 6; }
.q7 { flex-grow: 7; }
.q8 { flex-grow: 8; }
.q9 { flex-grow: 9; }
.q10 { flex-grow: 10; }
.q11 { flex-grow: 11; }
.q12 { flex-grow: 12; }
.q13 { flex-grow: 13; }
.q14 { flex-grow: 14; }
.q15 { flex-grow: 15; }
.q16 { flex-grow: 16; }
.q17 { flex-grow: 17; }
.q18 { flex-grow: 18; }
.q19 { flex-grow: 19; }
.q20 { flex-grow: 20; }
.q21 { flex-grow: 21; }
.q22 { flex-grow: 22; }
.q23 { flex-grow: 23; }
.q24 { flex-grow: 24; }
.q25 { flex-grow: 25; }
.q26 { flex-grow: 26; }
.q27 { flex-grow: 27; }
.q28 { flex-grow: 28; }
.q29 { flex-grow: 29; }
.q30 { flex-grow: 30; }

/* ------------------------------------------------------------- area cards */
.area-card {
  display: flex;
  flex-direction: row;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .area-card {
    transition: none;
  }
}

.area-card:hover,
.area-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(12, 33, 27, 0.06), 0 10px 24px rgba(12, 33, 27, 0.08);
}

/* The letter is how the university itself names the area, and how it appears
   on every vacancy table the student will ever read. It leads the card. */
.area-code {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--bs-border-radius);
  background: var(--ap-board-700);
  color: var(--ap-chalk);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

.area-code-mh {
  background: var(--ap-flame-600);
}

/* The page heading paints its own light plate behind any decorative span, and
   a chalk-white letter on it is invisible. The badge is the one heading icon
   here that carries text, so it keeps its own plate. */
.page-content h1 > span.area-code[aria-hidden="true"] {
  border: 0;
  background: var(--ap-board-700);
  box-shadow: none;
  color: var(--ap-chalk);
}

.page-content h1 > span.area-code-mh[aria-hidden="true"] {
  background: var(--ap-flame-600);
}

/* ------------------------------------------- the 70 questions, as one bar */
.block-bar {
  display: flex;
  overflow: hidden;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--ap-board-100);
}

/* The flex basis is zero so the segments divide the bar strictly by their
   question counts. Without a "q" class a segment still shows, evenly. */
.block-seg {
  height: 100%;
  flex: 1 1 0;
  background: var(--block-accent);
}

.block-seg + .block-seg {
  border-left: 1px solid var(--bs-body-bg);
}

.block-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.block-legend li {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

.block-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--block-accent);
}

/* ------------------------------------------------------ one course's weight */
.weight-row {
  display: grid;
  gap: 0.15rem 0.6rem;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 0.5rem 0;
}

.weight-row + .weight-row {
  border-top: 1px solid var(--bs-border-color);
}

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

/* The count is the point of the row, so it is the only thing set in tabular
   figures: eight rows of numbers that do not line up are eight rows nobody
   compares. */
.weight-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

/* A <progress> rather than a div: the value is data, and a screen reader that
   announces "8 de 8" is telling the student exactly what the bar means. It
   takes its colour from the block class on the row. */
.weight-track {
  /* Set here rather than inherited from the row: .ap-progress declares its own
     fill, and a declaration on the element beats an inherited value. */
  --ap-progress-fill: var(--block-accent);
  grid-column: 1 / -1;
  height: 0.4rem;
}

/* A course nobody can study here yet is dimmed rather than hidden. The student
   is owed an honest map of the exam, including the parts we have not built. */
.weight-pending .weight-name,
.weight-pending .weight-count {
  color: var(--ap-board-400);
}

.weight-pending .weight-track {
  --ap-progress-fill: var(--ap-board-300);
}

/* The question count leads each row of the exam structure, so the labels next
   to it have to line up whether the count is 10 or 70. */
.exam-part-count {
  min-width: 2.5rem;
}

/* --------------------------------------------------------------- onboarding */
.step-dots {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.step-dots li {
  height: 0.3rem;
  flex: 1;
  border-radius: 999px;
  background: var(--ap-board-100);
}

.step-dots li.is-done {
  background: var(--ap-board-500);
}

.step-dots li.is-current {
  background: var(--ap-flame-500);
}

/* A whole card is the tap target, not a 20px radio. Thumbs on a cheap phone
   miss small circles, and a missed tap on step one of onboarding is a student
   who never reaches step two. */
.pick {
  display: block;
  cursor: pointer;
}

.pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pick .card {
  border-width: 2px;
}

.pick input:checked + .card {
  border-color: var(--ap-flame-500);
  background: var(--ap-flame-100);
}

.pick input:focus-visible + .card {
  outline: 3px solid var(--ap-flame-500);
  outline-offset: 2px;
}

/* Seven checkboxes reading "lunes…domingo" do not fit a phone; seven initials
   do, and they are the shape of a week the student already recognises. */
.day-picker {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.day-picker label {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  align-items: center;
  border: 2px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  cursor: pointer;
  font-weight: 700;
  justify-items: center;
}

.day-picker li {
  flex: 1;
}

.day-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.day-picker input:checked + label {
  border-color: var(--ap-board-600);
  background: var(--ap-board-600);
  color: var(--ap-chalk);
}

.day-picker input:focus-visible + label {
  outline: 3px solid var(--ap-flame-500);
  outline-offset: 2px;
}

/* ----------------------------------------------------------- the calendar */
.plan-week {
  padding: 0;
  overflow: hidden;
}

.plan-week-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--ap-board-50);
}

.plan-week-current .plan-week-head {
  background: var(--ap-flame-100);
}

.plan-week-past {
  opacity: 0.72;
}

.plan-item {
  display: flex;
  /* Spelled out: .card ships column, and a .plan-item that is also a card —
     the skipped list — would inherit it. Same reason as .area-card above. */
  flex-direction: row;
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
}

.plan-item + .plan-item {
  border-top: 1px solid var(--bs-border-color);
}

.plan-item-body {
  min-width: 0;
  flex: 1 1 auto;
}

/* Move and skip sit together and stay small: they are corrections to a plan,
   not the reason the page exists. Still 2.25rem, which is a real thumb target. */
.plan-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.25rem;
}

.plan-actions button {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  padding: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  color: var(--ap-board-600);
  cursor: pointer;
  justify-items: center;
  line-height: 1;
}

.plan-actions button:hover:not(:disabled) {
  border-color: var(--ap-board-400);
  background: var(--ap-board-50);
}

.plan-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ----------------------------------------------------- classic month grid */
.plan-month {
  padding: 1rem 1rem 0.85rem;
  overflow: hidden;
}

.plan-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.plan-month-title {
  margin: 0;
  color: var(--ap-board-900);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}

.plan-month-nav-btn {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid var(--ap-line);
  border-radius: 0.75rem;
  background: var(--ap-surface);
  color: var(--ap-board-700);
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
}

.plan-month-nav-btn:hover {
  border-color: var(--ap-board-400);
  background: var(--ap-board-50);
  color: var(--ap-board-900);
}

.plan-month-meta {
  margin-bottom: 0.85rem;
  color: var(--ap-board-400);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.plan-month-weekdays,
.plan-month-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.plan-month-weekdays {
  margin-bottom: 0.35rem;
}

.plan-month-weekdays span {
  color: var(--ap-board-400);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.plan-month-row + .plan-month-row {
  margin-top: 0.3rem;
}

.plan-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 2.55rem;
  padding: 0.2rem;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  color: var(--ap-board-800);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.plan-day-number {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.plan-day-dot {
  width: 0.28rem;
  height: 0.28rem;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: var(--ap-board-400);
}

.plan-day-muted {
  color: var(--ap-board-300);
  opacity: 0.55;
}

.plan-day-planned {
  background: color-mix(in srgb, var(--ap-board-100) 80%, transparent);
  border-color: color-mix(in srgb, var(--ap-board-300) 35%, transparent);
}

.plan-day-done {
  background: color-mix(in srgb, var(--ap-right-600) 14%, #fff);
  border-color: color-mix(in srgb, var(--ap-right-600) 35%, transparent);
  color: var(--ap-board-900);
}

.plan-day-done .plan-day-dot {
  background: var(--ap-right-600);
}

.plan-day-today {
  box-shadow: inset 0 0 0 1.5px var(--ap-flame-500);
}

.plan-day-selected {
  border-color: var(--ap-board-600);
  background: var(--ap-board-800);
  color: #fff;
  box-shadow: 0 8px 18px rgba(12, 33, 27, 0.16);
}

.plan-day-selected .plan-day-dot {
  background: #fff;
}

.plan-day-selected.plan-day-done {
  background: var(--ap-board-800);
  border-color: var(--ap-right-600);
}

@media (hover: hover) and (pointer: fine) {
  .plan-day:hover {
    border-color: color-mix(in srgb, var(--ap-board-500) 40%, var(--ap-line));
    background: color-mix(in srgb, var(--ap-board-50) 85%, #fff);
    transform: translateY(-1px);
  }

  .plan-day-selected:hover {
    background: var(--ap-board-800);
    color: #fff;
  }
}

.plan-month-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ap-line);
  color: var(--ap-board-400);
  font-size: 0.72rem;
  font-weight: 600;
}

.plan-legend-swatch {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.25rem;
  border-radius: 0.2rem;
  vertical-align: -0.05rem;
}

.plan-legend-done {
  background: color-mix(in srgb, var(--ap-right-600) 55%, #fff);
  border: 1px solid color-mix(in srgb, var(--ap-right-600) 40%, transparent);
}

.plan-legend-planned {
  background: var(--ap-board-100);
  border: 1px solid var(--ap-board-200);
}

.plan-legend-topic {
  background: var(--ap-board-400);
  border-radius: 50%;
}

.plan-day-panel {
  padding: 1rem 1.1rem 1.05rem;
}

.plan-day-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.plan-day-panel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.plan-day-topics > li + li {
  margin-top: 0.55rem;
}

.plan-day-topic {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--ap-line);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--ap-board-50) 55%, var(--ap-surface));
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .plan-day-topic:hover {
    border-color: color-mix(in srgb, var(--ap-board-500) 40%, var(--ap-line));
    background: var(--ap-surface);
    transform: translateY(-1px);
  }
}

[data-bs-theme="dark"] .plan-month-nav-btn,
[data-bs-theme="dark"] .plan-day-topic {
  border-color: #294a40;
  background: #10241f;
  color: #edf6f1;
}

[data-bs-theme="dark"] .plan-day-planned {
  background: #16362d;
  border-color: #396256;
}

[data-bs-theme="dark"] .plan-day-done {
  background: rgba(11, 155, 119, 0.18);
  border-color: rgba(11, 155, 119, 0.4);
  color: #edf6f1;
}

[data-bs-theme="dark"] .plan-day-selected {
  background: #1b4639;
  border-color: #74aa98;
}

[data-bs-theme="dark"] .plan-month-legend {
  border-top-color: #294a40;
  color: #8fb3a6;
}

/* --------------------------------------------------------- score simulator */
.sim-fields {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
}

/* The derived one, styled as a readout rather than a field: it is an answer,
   and making it look editable invites a student to fight the arithmetic. */
.sim-blank {
  display: block;
  padding: 0.375rem 0.75rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--ap-board-400);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}

.sim-result {
  text-align: center;
}

.sim-score {
  font-size: clamp(2.25rem, 12vw, 3.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.sim-score-max {
  margin-left: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.65;
}

.sim-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.6rem 0.9rem;
}

.sim-row > :first-child {
  min-width: 6.5rem;
}

.sim-row-score {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.tip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 40em) {
  .tip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tip {
  --tip-ink: var(--ap-board-700);
  --tip-wash: var(--ap-board-100);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--tip-ink) 16%, var(--ap-line));
  border-radius: var(--ap-radius, 1rem);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--tip-wash) 70%, #fff) 0%,
      var(--ap-surface) 55%
    );
  box-shadow: var(--ap-shadow-sm);
}

.tip-priority { --tip-ink: #285d4e; --tip-wash: #e2f0eb; }
.tip-balance  { --tip-ink: #40566f; --tip-wash: #e7ecf2; }
.tip-urgency  { --tip-ink: #8a4a2f; --tip-wash: #f7e8df; }
.tip-date     { --tip-ink: #23596b; --tip-wash: #deeef4; }
.tip-skills   { --tip-ink: #5f4489; --tip-wash: #ece6f6; }
.tip-missing  { --tip-ink: #6e591c; --tip-wash: #f4eeda; }

.tip-mark {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--tip-ink);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tip-ink) 28%, transparent);
}

.tip-mark-index {
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.tip-mark-svg {
  width: 1.15rem;
  height: 1.15rem;
}

.tip-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.tip-title {
  color: var(--ap-board-900);
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.tip-body {
  color: color-mix(in srgb, var(--tip-ink) 55%, var(--ap-board-500));
  font-size: 0.82rem;
  line-height: 1.45;
}

.tip-simulator {
  --tip-ink: var(--ap-flame-600, #cb842b);
  --tip-wash: #f8ecdc;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.tip-simulator .tip-copy {
  flex: 1 1 auto;
}

.tip-chevron {
  color: var(--ap-board-300);
  font-size: 1.15rem;
  line-height: 1;
  transition: color 140ms ease, transform 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .tip-simulator:hover {
    border-color: color-mix(in srgb, var(--tip-ink) 40%, var(--ap-line));
    box-shadow: 0 12px 28px rgba(12, 33, 27, 0.1);
    transform: translateY(-2px);
  }

  .tip-simulator:hover .tip-chevron {
    color: var(--ap-board-700);
    transform: translateX(2px);
  }
}

[data-bs-theme="dark"] .tip {
  border-color: #294a40;
  background: rgba(16, 36, 31, 0.97);
}

[data-bs-theme="dark"] .tip-title {
  color: #edf6f1;
}

[data-bs-theme="dark"] .tip-body {
  color: #9fc0b4;
}

[data-bs-theme="dark"] .tip-simulator:hover {
  border-color: #c79145;
  background: #16362d;
}

/* --------------------------------------------------------------- dark mode */
[data-bs-theme="dark"] .block-bar,
[data-bs-theme="dark"] .weight-track {
  background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .plan-week-head {
  background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .plan-week-current .plan-week-head {
  background: rgba(245, 158, 11, 0.16);
}

[data-bs-theme="dark"] .pick input:checked + .card {
  background: rgba(245, 158, 11, 0.16);
}

[data-bs-theme="dark"] .day-picker label,
[data-bs-theme="dark"] .plan-actions button {
  background: transparent;
  color: var(--ap-board-200);
}

[data-bs-theme="dark"] .step-dots li {
  background: rgba(255, 255, 255, 0.12);
}