/*
 * Atlas modern learning theme
 * Serious, warm and energetic e-learning. Loaded after the legacy stylesheet
 * so the visual system can evolve without changing the HTML contract.
 */

:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --ink: #172033;
  --muted: #69748a;
  --line: #e2e7f0;
  --nav: #17243d;
  --nav-raised: #223251;
  --nav-muted: #b2bed2;
  --brand: #425fe8;
  --brand-strong: #334bc6;
  --cyan: #22b8b2;
  --yellow: #f7c85b;
  --coral: #f47a68;
  --soft-blue: #e8f0ff;
  --soft-mint: #e3f7f3;
  --soft-yellow: #fff7df;
  --soft-coral: #fff0ed;
  --danger: #b83f5d;
  --shadow-sm: 0 8px 24px rgba(34, 50, 81, .07);
  --shadow-md: 0 16px 44px rgba(34, 50, 81, .1);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  background-image: none;
  color: var(--ink);
  font-family: "Inter", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }

/* Shell */
.sidebar {
  width: 248px;
  padding: 28px 16px 22px;
  background: var(--nav);
  color: #fff;
  border: 0;
}
.brand {
  gap: 12px;
  margin: 0 12px 44px;
  padding: 0;
  color: #fff;
  font-family: "Inter", sans-serif;
}
.brand-mark {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  box-shadow: none;
}
.brand-copy strong {
  font: 800 25px/1 "Inter", sans-serif;
  letter-spacing: -.035em;
}
.brand-copy small {
  margin-top: 5px;
  color: #a8b5cd;
  font: 600 8px/1 "Inter", sans-serif;
  letter-spacing: .1em;
}
.nav { gap: 4px; }
.nav-label {
  margin: 26px 12px 9px;
  color: #7f90af;
  font-size: 9px;
  letter-spacing: .12em;
}
.nav-item {
  min-height: 44px;
  padding: 11px 13px;
  color: var(--nav-muted);
  border: 0;
  border-radius: 12px;
  font-weight: 500;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-item.active {
  background: var(--nav-raised);
  color: #fff;
  border: 0;
  box-shadow: none;
}
.nav-item svg { color: #8293b0; }
.nav-item.active svg { color: var(--yellow); }
.nav-dot { width: 9px; height: 9px; }
.profile { padding: 20px 12px 0; border-top: 1px solid #344563; }
.avatar { width: 38px; height: 38px; background: var(--yellow); color: var(--nav); }
.profile small, .profile svg { color: #8fa0bc; }
.sidebar-backdrop { display: none; }
.main { margin-left: 248px; background: var(--bg); }
.topbar {
  height: 82px;
  padding: 0 46px;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.topbar-context { color: var(--ink); }
.topbar-context span { color: var(--brand); border-right-color: var(--line); }
.topbar-context strong { font: 600 14px "Inter", sans-serif; }
.icon-button, .more-button { color: var(--muted); border: 0; border-radius: 50%; }
.icon-button:hover, .more-button:hover { background: var(--soft-blue); color: var(--brand); }
.notification-dot { background: var(--coral); }
.notification-button.active { color: var(--brand); background: var(--soft-blue); }
.notification-count {
  position: absolute; top: -3px; right: -4px; min-width: 19px; height: 19px;
  display: grid; place-items: center; padding: 0 5px; color: #fff; background: var(--coral);
  border: 2px solid #fff; border-radius: 999px; font-size: 9px; font-weight: 850; line-height: 1;
}
.page { max-width: 1320px; padding: 46px 54px 84px; }
.eyebrow {
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
}

/* Dashboard */
.welcome-row { margin-bottom: 32px; }
.welcome-row h1, .topic-hero h1 {
  margin: 9px 0 7px;
  color: var(--ink);
  font: 800 38px/1.12 "Inter", sans-serif;
  letter-spacing: -.045em;
}
.welcome-row p, .topic-hero p { color: var(--muted); font-size: 15px; }
.pwa-install-card { display: none; }
.pwa-install-dialog {
  width: min(480px, calc(100vw - 30px));
  padding: 34px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(21, 33, 57, .25);
}
.pwa-install-dialog::backdrop { background: rgba(17, 28, 49, .58); backdrop-filter: blur(5px); }
.pwa-install-dialog > form:first-child { position: absolute; top: 15px; right: 15px; }
.pwa-dialog-close { width: 38px; height: 38px; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); border: 0; border-radius: 50%; }
.pwa-dialog-close svg { width: 17px; }
.pwa-dialog-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 19px; color: var(--brand); background: var(--soft-blue); border-radius: 18px; }
.pwa-dialog-icon svg { width: 27px; }
.pwa-install-dialog h2 { margin: 7px 0 8px; font: 800 29px/1.08 "Inter", sans-serif; letter-spacing: -.04em; }
.pwa-install-dialog > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.pwa-ios-steps { display: grid; gap: 9px; margin: 23px 0; padding: 0; list-style: none; }
.pwa-ios-steps[hidden], .pwa-generic-help[hidden] { display: none !important; }
.pwa-ios-steps li { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; padding: 12px; background: #f8faff; border: 1px solid var(--line); border-radius: 14px; }
.pwa-ios-steps li > span { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 12px; font-size: 12px; font-weight: 850; }
.pwa-ios-steps li > span svg { width: 19px; }
.pwa-ios-steps li > div { display: grid; gap: 3px; }
.pwa-ios-steps small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.pwa-generic-help { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; margin: 23px 0; padding: 16px; color: #3d4f71; background: var(--soft-blue); border-radius: 14px; }
.pwa-generic-help > svg { width: 22px; }
.pwa-generic-help p { margin: 0; font-size: 13px; line-height: 1.5; }
.pwa-dialog-done { width: 100%; margin-top: 2px; }
.weekly-chip {
  padding: 9px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: none;
}
.chip-icon { border-radius: 50%; background: var(--soft-yellow); color: #a77408; }
.recommendation {
  min-height: 290px;
  padding: 38px 42px;
  color: #fff;
  background: linear-gradient(118deg, var(--brand) 0%, #566ff0 72%, #5275ef 100%);
  border: 0;
  border-radius: 28px;
  box-shadow: none;
}
.recommendation::before {
  background:
    radial-gradient(circle at 82% 12%, rgba(113, 152, 255, .65) 0 120px, transparent 121px),
    radial-gradient(circle at 98% 100%, rgba(34, 184, 178, .8) 0 100px, transparent 101px);
  opacity: 1;
}
.recommendation::after { display: none; }
.rec-copy { max-width: 650px; }
.rec-label {
  display: inline-flex;
  width: auto;
  padding: 9px 14px;
  color: var(--nav);
  background: var(--yellow);
  border-radius: 999px;
  border: 0;
  font-size: 10px;
  letter-spacing: .08em;
}
.recommendation h2 {
  max-width: 620px;
  margin: 22px 0 12px;
  color: #fff;
  font: 800 38px/1.06 "Inter", sans-serif;
  letter-spacing: -.04em;
}
.recommendation p { max-width: 610px; color: #e7ebff; font-size: 14px; }
.rec-meta { color: #dfe5ff; }
.primary-button, .secondary-button, .ghost-button, .complete-button {
  min-height: 42px;
  padding: 12px 17px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}
.primary-button { background: var(--brand); color: #fff; }
.recommendation .primary-button { background: #fff; color: var(--brand); }
.recommendation .primary-button { border: 0; }
.primary-button:hover { background: var(--brand-strong); filter: none; transform: translateY(-1px); }
.recommendation .primary-button:hover { background: #f2f5ff; }
.secondary-button { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.secondary-button:hover { border-color: #b8c5dc; background: var(--soft-blue); }
.ghost-button {
  color: #eef1ff;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
}
.rec-visual { width: 300px; }
.orb { display: none; }
.visual-card {
  width: 210px;
  height: 190px;
  color: var(--ink);
  background: rgba(255, 255, 255, .97);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  transform: none;
}
.visual-card::before {
  content: "PROGRESO DEL TEMA";
  color: var(--brand);
  font: 700 9px "Inter", sans-serif;
}
.visual-card svg { color: var(--topic); }
.visual-card span { color: var(--ink); font: 800 32px "Inter", sans-serif; }
.section-block { margin-top: 52px; }
.section-heading, .panel-heading { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.section-heading h2, .panel-heading h2 {
  margin-top: 7px;
  color: var(--ink);
  font: 800 25px/1.1 "Inter", sans-serif;
}
.text-button { color: var(--brand); }
.topic-grid { gap: 15px; }
.topic-card {
  min-height: 285px;
  padding: 25px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: none;
}
.topic-card:hover {
  border-color: color-mix(in srgb, var(--topic) 45%, var(--line));
  box-shadow: var(--shadow-sm);
}
.topic-icon, .hero-icon {
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--topic) 12%, #fff);
}
.topic-subtitle { color: var(--topic); font-size: 10px; letter-spacing: .09em; }
.topic-card h3 { font: 800 20px/1.15 "Inter", sans-serif; }
.topic-card p { color: var(--muted); }
.progress-track { height: 6px; background: var(--surface-2); }
.topic-footer { color: var(--muted); }
.topic-footer a { color: var(--brand); }
.lower-grid { gap: 15px; }
.panel {
  padding: 27px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: none;
}
.metric strong { font: 800 28px "Inter", sans-serif; }
.bar { background: var(--surface-2); border-radius: 5px; }
.bar span { background: var(--brand); border-radius: 5px; }
.connection-panel {
  background: linear-gradient(145deg, var(--soft-mint), #f7fffd);
  border-color: #cceae5;
}
.connection-icon { color: #16827c; background: #fff; border-radius: 14px; }
.connection-panel h2 { font: 800 22px "Inter", sans-serif; }
.toast { background: var(--nav); border-radius: 12px; box-shadow: var(--shadow-md); }

/* Topic and roadmap */
.back-link { color: var(--muted); }
.topic-hero {
  padding: 32px;
  background: var(--soft-blue);
  border: 1px solid #ccd9f5;
  border-radius: 22px;
  box-shadow: none;
}
.topic-summary {
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
}
.ring::before { background: var(--surface); }
.summary-divider { background: var(--line); }
.diagnosis-strip {
  padding: 18px 20px;
  background: var(--soft-yellow);
  border: 1px solid #efdfac;
  border-radius: 18px;
  box-shadow: none;
}
.diagnosis-strip.is-complete { background: var(--soft-mint); border-color: #bfe5dd; }
.diagnosis-strip-icon { background: #fff; color: var(--brand); border: 0; }
.diagnosis-strip strong { color: var(--ink); font: 700 16px "Inter", sans-serif; }
.phase { grid-template-columns: 48px 1fr; }
.phase:not(:last-child)::before { left: 23px; background: #ccd5e4; }
.phase-marker span {
  width: 48px;
  height: 48px;
  color: #fff;
  background: var(--topic);
  border: 0;
  border-radius: 15px;
  box-shadow: none;
  font: 700 12px "Inter", sans-serif;
}
.phase.future .phase-marker span { color: #8090aa; background: #e9edf4; }
.phase-body {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
}
.phase-header h3 { font: 800 19px "Inter", sans-serif; }
.phase-count, .roadmap-objectives li, .phase-objectives li {
  color: var(--brand);
  background: var(--soft-blue);
  border: 1px solid #cfdbf5;
  border-radius: 999px;
}
.lesson-list, .outline-list, .roadmap-preview-lessons, .single-lesson-review {
  border-top: 1px solid var(--line);
}
.lesson-row, .outline-row { border-bottom: 1px solid var(--line); }
.lesson-row:hover, .outline-row:hover { background: #f8faff; }
.lesson-status, .outline-row > span {
  color: var(--brand);
  background: var(--soft-blue);
  border: 0;
  border-radius: 10px;
}
.outline-row.published > span { background: var(--soft-mint); }
.outline-row p, .outline-row em { color: var(--brand); }
.planned-content, .roadmap-empty {
  background: #f8faff;
  border: 1px dashed #b9c5d8;
  border-radius: 18px;
}
.roadmap-empty-icon { color: var(--brand); background: var(--soft-blue); border: 0; }

/* Lesson */
.lesson-page {
  max-width: 1220px;
  grid-template-columns: 210px minmax(0, 790px);
  gap: 68px;
  padding-top: 54px;
}
.lesson-toc nav { border-color: #ccd5e4; }
.lesson-toc nav a { color: #8190a8; }
.lesson-toc nav a.active { color: var(--ink); border-left-color: var(--brand); }
.lesson-header { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.lesson-header h1 {
  margin: 14px 0;
  color: var(--ink);
  font: 800 45px/1.08 "Inter", sans-serif;
  letter-spacing: -.05em;
}
.lesson-header > p { color: var(--muted); font: 400 18px/1.55 "Inter", sans-serif; }
.lesson-kicker { color: var(--brand); }
.lesson-badges span, .lesson-badges a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.reading-body {
  padding-top: 38px;
  color: #2f3b50;
  font: 400 17px/1.82 "Inter", sans-serif;
}
.reading-body p {
  margin: 0;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
.reading-body p strong { color: var(--ink); font-weight: 750; }
.reading-body h2, .reading-body h3 {
  color: var(--ink);
  text-wrap: balance;
  letter-spacing: -.035em;
}
.reading-body h2 {
  margin: 0 0 16px;
  font: 800 clamp(1.65rem, 3vw, 2.15rem)/1.16 "Inter", sans-serif;
}
.reading-body h3 {
  margin: 0 0 13px;
  font: 780 clamp(1.25rem, 2vw, 1.55rem)/1.25 "Inter", sans-serif;
}
.reading-block {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.reading-block:last-child { border-bottom: 0; }
.reading-objectives {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 17px;
  margin: 0 0 16px;
  padding: 24px;
  background: var(--soft-blue);
  border: 1px solid #cad9f6;
  border-radius: 18px;
}
.reading-objectives h2 { margin-bottom: 13px; font-size: 1.35rem; }
.reading-objectives ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.reading-objectives li { position: relative; padding-left: 20px; line-height: 1.55; }
.reading-objectives li::before {
  content: "";
  position: absolute;
  top: .65em;
  left: 2px;
  width: 7px;
  height: 7px;
  background: var(--brand);
  border-radius: 50%;
}
.reading-block-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: #fff;
  border-radius: 14px;
}
.reading-block-icon svg { width: 21px; }
.reading-block-example, .reading-block-note {
  margin: 22px 0;
  padding: 25px 27px;
  border: 1px solid #efdca4;
  border-radius: 18px;
  background: var(--soft-yellow);
}
.reading-block-note { border-color: #c6e5df; background: var(--soft-mint); }
.reading-reflection {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  padding: 18px 20px;
  color: #40516a;
  background: #f6f8fc;
  border-left: 4px solid var(--brand);
  border-radius: 4px 14px 14px 4px;
}
.reading-reflection > svg { width: 20px; flex: 0 0 auto; color: var(--brand); }
.reading-reflection strong { display: block; margin-bottom: 3px; color: var(--ink); }
.reading-reflection p { font-size: 15px; line-height: 1.65; }
.concept-box {
  background: color-mix(in srgb, var(--topic) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--topic) 20%, var(--line));
  border-radius: 18px;
}
.concept-list span {
  background: rgba(255, 255, 255, .9);
  border: 1px solid color-mix(in srgb, var(--topic) 18%, var(--line));
  border-radius: 999px;
}
.resources-section { margin: 46px 0 18px; padding-top: 32px; border-top: 1px solid var(--line); }
.resources-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 19px; }
.resources-heading h2 { margin: 5px 0 4px; font: 800 24px "Inter", sans-serif; letter-spacing: -.025em; }
.resources-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.resources-count { padding: 7px 10px; color: color-mix(in srgb, var(--topic) 76%, #222); background: color-mix(in srgb, var(--topic) 9%, #fff); border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.resource-card { display: flex; flex-direction: column; min-height: 180px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; transition: transform .18s, border-color .18s, box-shadow .18s; }
.resource-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--topic) 35%, var(--line)); box-shadow: 0 14px 35px rgba(39, 50, 70, .08); }
.resource-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; color: var(--topic); }
.resource-card-top small { font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.resource-card-top svg { width: 17px; }
.resource-card > strong { font-size: 15px; line-height: 1.35; }
.resource-card > p { margin: 6px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.resource-card-action { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--topic); font-size: 11px; font-weight: 800; }
.resource-card-action svg { width: 14px; }
.question label { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.quiz-section {
  padding: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(37, 55, 88, .08);
}
.quiz-heading { align-items: flex-start; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.quiz-icon { width: 52px; height: 52px; flex: 0 0 auto; color: var(--brand); background: var(--soft-blue); border-radius: 16px; }
.quiz-heading h2 { font: 800 25px "Inter", sans-serif; }
.question {
  margin: 28px 0 0;
  padding: 27px;
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 19px;
}
.question + .question { margin-top: 17px; }
.question-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.question-meta span {
  color: var(--brand);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.question-meta small { color: var(--muted); font-size: 10px; }
.question legend {
  width: 100%;
  margin: 0 0 18px;
  color: var(--ink);
  font: 750 16px/1.5 "Inter", sans-serif;
}
.quiz-options { display: grid; gap: 9px; }
.question .quiz-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  gap: 12px;
  min-height: 54px;
  margin: 0;
  padding: 9px 14px 9px 10px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.question .quiz-option:hover { border-color: #a9b9d2; transform: translateY(-1px); }
.quiz-option input { position: absolute; opacity: 0; pointer-events: none; }
.option-letter {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #62718a;
  background: #edf1f7;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 850;
}
.option-copy { color: #344157; font-size: 13px; line-height: 1.45; }
.quiz-option > svg { width: 19px; color: transparent; }
.question label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand) 25%, transparent); outline-offset: 2px; }
.question label:has(input:checked) { border-color: var(--brand); background: var(--soft-blue); }
.question label:has(input:checked) .option-letter { color: #fff; background: var(--brand); }
.question label.correct { border-color: #65bba7; background: #effaf7; }
.question label.correct .option-letter { color: #fff; background: #168f76; }
.question label.correct > svg { color: #168f76; }
.question label.wrong { border-color: #dc8494; background: #fff3f5; }
.question label.wrong .option-letter { color: #fff; background: #c8586d; }
.explanation {
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  background: var(--bg);
  border-radius: 13px;
}
.explanation.show { display: flex; }
.explanation-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--brand);
  background: #fff;
  border-radius: 10px;
}
.explanation-icon svg { width: 16px; }
.explanation strong { color: var(--ink); font-size: 12px; }
.explanation p { margin: 3px 0 0; color: #58667c; font-size: 12px; line-height: 1.55; }
.quiz-actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.quiz-actions p { margin: 0; color: var(--muted); font-size: 11px; }
.quiz-submit { margin: 0; }
.quiz-result {
  display: none;
  margin-top: 17px;
  padding: 15px 17px;
  border-radius: 13px;
  font: 700 13px/1.5 "Inter", sans-serif;
}
.quiz-result.show { display: block; }
.quiz-result.is-perfect { color: #126f5d; background: var(--soft-mint); border: 1px solid #bde0d8; }
.quiz-result.needs-review { color: #845f18; background: var(--soft-yellow); border: 1px solid #ead79c; }
.complete-button { background: var(--brand); }

/* Truthful dashboard summary */
.progress-total {
  color: var(--brand);
  font: 850 28px/1 "Inter", sans-serif;
}
.overall-progress {
  height: 9px;
  margin-top: 25px;
  overflow: hidden;
  background: #e9edf4;
  border-radius: 999px;
}
.overall-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--cyan));
  border-radius: inherit;
}
.progress-caption { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.switch-panel { background: linear-gradient(145deg, #f3f7ff, #fff); }
.switch-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
}
.switch-icon svg { width: 19px; }
.switch-panel h2 { margin: 7px 0 16px; font: 800 21px/1.25 "Inter", sans-serif; }
.switch-panel > p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.topic-switch-list { display: grid; gap: 8px; }
.topic-switch-list a {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.topic-switch-list .nav-dot { background: var(--topic); }
.topic-switch-list div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.topic-switch-list strong, .topic-switch-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-switch-list strong { color: var(--ink); font-size: 12px; }
.topic-switch-list small { color: var(--muted); font-size: 10px; }
.topic-switch-list em { color: var(--brand); font-size: 11px; font-style: normal; font-weight: 800; }
.topic-switch-list svg { width: 15px; color: var(--muted); }
.dashboard-empty { grid-column: 1 / -1; min-height: 260px; }

/* Forms, setup, diagnosis, history and editors */
.setup-hero, .editor-hero, .history-hero, .concepts-hero {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.setup-hero h1, .editor-hero h1, .history-hero h1, .concepts-hero h1 {
  color: var(--ink);
  font: 800 clamp(2.35rem, 5vw, 4.3rem)/1 "Inter", sans-serif;
  letter-spacing: -.055em;
}
.setup-mode {
  background: var(--soft-blue);
  border: 1px solid #cdd9f4;
  border-radius: 16px;
  box-shadow: none;
}
.setup-fields, .setup-summary, .diagnosis-question, .diagnosis-result,
.draft-history-panel, .editor-phase-card, .lesson-editor-form, .revision-panel,
.concept-column, .concept-cards article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
}
.setup-summary { background: var(--soft-blue); border-color: #ccd9f5; }
.setup-summary li > span, .roadmap-preview-number, .diagnosis-question legend span,
.draft-version-number { color: var(--brand); background: var(--soft-blue); border: 0; }
.field input, .field textarea, .cost-config input:not([type=checkbox]),
.cost-config select, .editor-outline-card input, .editor-outline-card textarea,
.lesson-editor-form input, .lesson-editor-form textarea {
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd7e4;
  border-radius: 12px;
}
.field input:focus, .field textarea:focus, .cost-config input:focus, .cost-config select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(66, 95, 232, .12);
}
.level-options span, .setup-mode-options span, .compact-choice-options span,
.format-options span, .final-level-field span, .diagnosis-options span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
.level-options input:checked + span, .setup-mode-options input:checked + span,
.compact-choice-options input:checked + span, .format-options input:checked + span,
.final-level-field input:checked + span, .diagnosis-options input:checked + span {
  color: var(--brand);
  background: var(--soft-blue);
  border-color: var(--brand);
  box-shadow: none;
  transform: none;
}
.advanced-setup-fields, .editor-outline-list, .editor-save-bar { border-top: 1px solid var(--line); }
.advanced-section-heading h2, .draft-history-heading h2, .revision-panel h2,
.generation-history-list h2, .editor-card-heading > strong { font-family: "Inter", sans-serif; }
.diagnosis-result, .revision-panel { background: var(--soft-blue); border-color: #cbd8f5; }
.diagnosis-recommendation, .revision-list > div, .draft-version-row,
.generation-history-list article, .editor-outline-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
.evaluation-status {
  background: var(--soft-yellow);
  border: 1px solid #eedda4;
  border-radius: 12px;
}
.evaluation-status.passed { background: var(--soft-mint); border-color: #bce1da; }
.lesson-completion-dialog {
  width: min(520px, calc(100vw - 34px));
  max-height: calc(100dvh - 34px);
  overflow-y: auto;
  padding: 38px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(21, 33, 57, .24);
}
.lesson-completion-dialog::backdrop {
  background: rgba(17, 28, 49, .56);
  backdrop-filter: blur(5px);
}
.lesson-completion-dialog > form { position: absolute; top: 16px; right: 16px; }
.completion-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface-2);
  border: 0;
  border-radius: 50%;
}
.completion-close svg { width: 17px; }
.completion-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: #17866f;
  background: var(--soft-mint);
  border-radius: 18px;
}
.completion-icon svg { width: 29px; height: 29px; }
.lesson-completion-dialog h2 {
  margin: 7px 0 10px;
  font: 800 30px/1.1 "Inter", sans-serif;
  letter-spacing: -.035em;
}
.lesson-completion-dialog > p { margin: 0; color: var(--muted); line-height: 1.6; }
.completion-next {
  margin: 25px 0;
  padding: 18px;
  background: var(--soft-blue);
  border: 1px solid #ccd9f5;
  border-radius: 16px;
}
.completion-next > span {
  display: block;
  margin-bottom: 6px;
  color: var(--brand);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.completion-next strong { display: block; font-size: 15px; }
.completion-next p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.completion-actions { display: flex; gap: 10px; }
.lesson-footer-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.lesson-feedback {
  display: grid;
  gap: 15px;
  margin-top: 24px;
  padding: 20px;
  background: #fafbff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.lesson-feedback-intro h3 { margin: 4px 0 3px; font: 800 18px "Inter", sans-serif; }
.lesson-feedback-intro p { margin: 0; color: var(--muted); font-size: 12px; }
.lesson-feedback-form { display: grid; gap: 14px; }
.lesson-feedback-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.lesson-feedback-form legend { margin-bottom: 7px; font-size: 12px; font-weight: 800; }
.feedback-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.feedback-options label { min-width: 0; cursor: pointer; }
.feedback-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.feedback-options span {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 7px 9px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}
.feedback-options input:checked + span {
  color: var(--brand);
  background: var(--soft-blue);
  border-color: var(--brand);
}
.feedback-options input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.feedback-comment { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 750; }
.feedback-comment textarea {
  width: 100%;
  resize: vertical;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 12px/1.45 "Inter", sans-serif;
}
.lesson-feedback-submit { justify-self: start; }
.lesson-feedback-thanks {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  color: #176b58;
  background: var(--soft-mint);
  border-radius: 12px;
}
.lesson-feedback-thanks[hidden] { display: none; }
.lesson-feedback-thanks > svg { width: 21px; flex: 0 0 auto; }
.lesson-feedback-thanks strong { display: block; font-size: 12px; }
.lesson-feedback-thanks p { margin: 3px 0 0; color: #4b746a; font-size: 11px; }
.history-hero, .editor-hero, .concepts-hero {
  background: var(--soft-blue);
  border: 1px solid #ccd9f5;
  border-radius: 24px;
  box-shadow: none;
}
.history-kind, .concept-status-dot { border: 0; border-radius: 12px; }
.concept-column { background: #f8faff; }
.concept-column > header { border-bottom: 1px solid var(--line); }
.concept-cards label { border-top: 1px solid var(--line); }
.concept-cards select { border: 1px solid #cfd7e4; }

/* Generation and previews */
.prompt-hero, .generation-preview, .roadmap-preview-phase, .generated-lesson-card {
  border-color: var(--line);
  box-shadow: none;
}
.roadmap-preview-phase {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.roadmap-preview-number { font-family: "Inter", sans-serif; }
.validation-report, .lesson-guidance { border-radius: 12px; }

/* Roadmap candidates */
.roadmap-candidates {
  display: grid;
  gap: 24px;
  margin-top: 34px;
}
.roadmap-candidate {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 4vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}
.roadmap-candidate-header {
  display: grid;
  gap: 8px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.roadmap-candidate-label {
  color: var(--brand);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}
.roadmap-candidate-header h2 {
  max-width: 820px;
  margin: 0;
  color: var(--ink);
  font: 800 clamp(1.65rem, 3vw, 2.45rem)/1.08 "Inter", sans-serif;
  letter-spacing: -.04em;
}
.roadmap-candidate-header p {
  max-width: 850px;
  margin: 2px 0 0;
  color: var(--muted);
  line-height: 1.6;
}
.candidate-phases { display: grid; }
.candidate-phase {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.candidate-phase:first-child { padding-top: 0; }
.candidate-phase:last-child { padding-bottom: 0; border-bottom: 0; }
.candidate-phase-number {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--soft-blue);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 850;
}
.candidate-phase-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.candidate-phase-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.candidate-phase-heading h3 {
  margin: 0;
  color: var(--ink);
  font: 800 1rem/1.3 "Inter", sans-serif;
}
.candidate-phase-count {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: var(--brand);
  background: var(--soft-blue);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.candidate-phase-copy > p {
  max-width: 850px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.roadmap-candidate > .choose-roadmap-button {
  justify-self: start;
  margin-top: 2px;
}
.candidate-error {
  margin: 0;
  padding: 13px 15px;
  color: #923b4e;
  background: #fff0f3;
  border: 1px solid #efc1cd;
  border-radius: 12px;
}

/* Owner AI control */
.cost-page { padding: 34px clamp(22px, 4vw, 54px) 72px; }
.cost-hero {
  padding: 38px;
  color: #fff;
  background: linear-gradient(118deg, var(--brand), #657bf0);
  border: 0;
  border-radius: 26px;
  box-shadow: none;
}
.cost-hero h1 {
  max-width: 800px;
  color: #fff;
  font: 800 clamp(2.7rem, 5.6vw, 5.6rem)/.94 "Inter", sans-serif;
  letter-spacing: -.065em;
}
.cost-hero p { color: #e6ebff; }
.cost-hero .eyebrow { color: var(--yellow); }
.cost-hero-state {
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.cost-hero-state svg { color: var(--brand); }
.cost-hero-state strong { font: 800 25px "Inter", sans-serif; }
.cost-saved, .cost-error, .cost-warning { border: 1px solid transparent; border-radius: 12px; }
.cost-saved { background: var(--soft-mint); border-color: #bce1da; }
.cost-error { background: #fff0f3; border-color: #efc1cd; }
.cost-warning { background: var(--soft-yellow); border-color: #eedda4; }
.cost-periods a {
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
}
.cost-periods a.active { color: #fff; background: var(--nav); border-color: var(--nav); }
.cost-metric, .cost-panel, .cost-config, .operation-limit-grid > article,
.pricing-table article, .pricing-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
}
.cost-metric.primary, .pricing-form { background: var(--soft-blue); }
.cost-metric > strong, .cost-panel > header h2, .pricing-form h3 {
  color: var(--ink);
  font-family: "Inter", sans-serif;
}
.budget-track, .cost-bar { background: var(--surface-2); border: 0; }
.budget-track span, .cost-columns > div > span { background: var(--brand); }
.cost-bar span { background: var(--cyan); }
.cost-kind-list > div { border: 1px solid var(--line); border-radius: 12px; }
.cost-kind-icon { color: var(--brand); background: var(--soft-blue); border: 0; }
.cost-columns { border-bottom: 1px solid var(--line); }
.cost-columns > div > span { border: 0; }
.cost-config { background: #f8faff; }
.cost-config[open] > summary { border-bottom: 1px solid var(--line); }
.cost-toggle, .operation-limit-grid > article, .pricing-table article { border: 1px solid var(--line); }
.cost-toggle > span, .mini-switch > span { background: #d5dce8; border: 0; }
.cost-toggle > span::after, .mini-switch > span::after {
  top: 4px;
  left: 4px;
  border: 0;
  box-shadow: 0 1px 3px rgba(23, 36, 61, .22);
}
.cost-toggle input:checked + span, .mini-switch input:checked + span { background: var(--cyan); }
.pricing-table a { color: var(--brand); }
.cost-event-head { border-bottom: 1px solid var(--line); }
.event-status { border: 0; background: var(--soft-mint); }
.event-status.status-failed { background: #fff0f3; }
.event-status.status-blocked { background: var(--soft-yellow); }

@media (max-width: 1050px) {
  .sidebar { width: 232px; }
  .main { margin-left: 232px; }
  .page { padding-inline: 36px; }
  .recommendation h2 { font-size: 34px; }
}

@media (max-width: 760px) {
  body.mobile-nav-open { overflow: hidden; }
  .sidebar {
    width: min(82vw, 300px);
    padding-top: calc(28px + env(safe-area-inset-top));
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    padding-left: calc(16px + env(safe-area-inset-left));
    transition: transform .22s ease;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    display: block;
    visibility: hidden;
    padding: 0;
    border: 0;
    background: rgba(17, 28, 49, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
  }
  body.mobile-nav-open .sidebar-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .main { margin-left: 0; }
  .topbar {
    height: calc(68px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) calc(18px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left));
  }
  .icon-button, .more-button { width: 44px; height: 44px; }
  .page {
    padding: 34px calc(17px + env(safe-area-inset-right)) calc(70px + env(safe-area-inset-bottom)) calc(17px + env(safe-area-inset-left));
  }
  .welcome-row h1 { font-size: 34px; }
  .pwa-install-card {
    position: relative;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 15px;
    margin: -8px 0 24px;
    padding: 20px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #293f9d 0%, #5367e8 58%, #7559ef 100%);
    border-radius: 23px;
    box-shadow: 0 18px 40px rgba(66, 83, 190, .22);
  }
  .pwa-install-card[hidden] { display: none; }
  .pwa-install-card::after { content: ""; position: absolute; width: 145px; height: 145px; right: -62px; top: -74px; background: rgba(255,255,255,.1); border-radius: 50%; }
  .pwa-install-visual { position: relative; width: 68px; height: 82px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.62); border-radius: 17px; }
  .pwa-install-visual > svg { width: 30px; opacity: .4; }
  .pwa-install-visual > span { position: absolute; width: 38px; height: 38px; display: grid; place-items: center; color: var(--brand); background: #fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(17,28,73,.24); }
  .pwa-install-visual > span svg { width: 20px; }
  .pwa-install-copy { position: relative; z-index: 1; }
  .pwa-install-copy .eyebrow { color: #cbd3ff; }
  .pwa-install-copy h2 { margin: 5px 0 6px; color: #fff; font: 800 21px/1.1 "Inter", sans-serif; letter-spacing: -.03em; }
  .pwa-install-copy p { margin: 0; color: #e0e5ff; font-size: 12px; line-height: 1.45; }
  .pwa-install-button { position: relative; z-index: 1; grid-column: 1 / -1; min-height: 47px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #263a91; background: #fff; border: 0; border-radius: 13px; font: 800 12px "Inter", sans-serif; }
  .pwa-install-button svg { width: 16px; }
  .pwa-install-dialog { padding: 31px 21px 22px; }
  .pwa-install-dialog h2 { padding-right: 30px; font-size: 26px; }
  .recommendation { padding: 28px 22px; min-height: 0; }
  .recommendation h2 { font-size: 31px; }
  .rec-label { font-size: 9px; }
  .rec-actions { flex-direction: column; }
  .section-heading h2, .panel-heading h2 { font-size: 23px; }
  .topic-card { min-height: 270px; }
  .topic-hero h1 { font-size: 37px; }
  .lesson-header h1 { font-size: 37px; }
  .reading-body { font-size: 16px; line-height: 1.76; }
  .reading-body p { text-align: justify; hyphens: auto; }
  .reading-objectives { grid-template-columns: 1fr; padding: 21px; }
  .reading-block { padding-block: 24px; }
  .reading-block-example, .reading-block-note { padding: 21px; }
  .resources-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: 165px; }
  .quiz-section { padding: 20px 15px; }
  .quiz-heading { gap: 12px; }
  .quiz-icon { width: 44px; height: 44px; }
  .question { padding: 21px 15px; }
  .question .quiz-option { grid-template-columns: 32px minmax(0, 1fr) 18px; padding-right: 10px; }
  .option-letter { width: 32px; height: 32px; }
  .quiz-actions { align-items: stretch; flex-direction: column; }
  .quiz-submit { width: 100%; }
  .metric-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .metric:last-child { grid-column: 1 / -1; }
  .metric strong { font-size: 21px; }
  .phase-header { flex-direction: column; gap: 13px; }
  .phase-count { align-self: flex-start; }
  .users-grid { grid-template-columns: minmax(0, 1fr); }
  .toast {
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 34px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    text-align: center;
  }
  .lesson-completion-dialog { padding: 31px 22px 23px; }
  .completion-actions { flex-direction: column; }
  .completion-actions a { width: 100%; }
  .roadmap-candidate { gap: 18px; padding: 22px 19px; border-radius: 20px; }
  .roadmap-candidate-header { padding-bottom: 18px; }
  .roadmap-candidate-header h2 { font-size: 1.75rem; }
  .candidate-phase { grid-template-columns: 37px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  .candidate-phase-number { width: 35px; height: 35px; border-radius: 10px; }
  .candidate-phase-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .candidate-phase-count { padding: 5px 8px; }
  .candidate-phase-copy > p { font-size: 12px; line-height: 1.58; }
  .roadmap-candidate > .choose-roadmap-button { width: 100%; }
  .cost-hero { padding: 26px 23px; }
  .cost-hero h1 { font-size: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Focused owner controls and assisted lesson modifications */
.cost-page-simplified { max-width: 1240px; margin: 0 auto; }
.cost-simple-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 14px 0 26px;
}
.cost-simple-header h1 { margin: 5px 0 4px; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .95; }
.cost-simple-header p { margin: 0; color: var(--muted); }
.generation-state {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px;
  border-radius: 999px; color: #087d66; background: var(--soft-mint); font-weight: 800;
}
.generation-state.is-paused { color: #a44453; background: #fff0f3; }
.budget-overview { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; margin: 18px 0 24px; }
.budget-donut-card {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 34px;
  padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-radius: 24px;
  background: linear-gradient(135deg, #fff, var(--soft-blue)); box-shadow: var(--shadow-sm);
}
.budget-donut {
  width: 190px; aspect-ratio: 1; padding: 20px; border-radius: 50%;
  background: conic-gradient(var(--brand) var(--budget-used), #e3e8f2 0);
}
.budget-donut > div {
  width: 100%; height: 100%; display: grid; place-content: center; text-align: center;
  border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
}
.budget-donut strong { font: 850 2.15rem "Inter", sans-serif; color: var(--nav); }
.budget-donut span { color: var(--muted); font-size: .78rem; }
.budget-donut-copy h2 { margin: 7px 0 10px; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.budget-donut-copy p { margin: 0 0 10px; color: var(--muted); }
.budget-donut-copy small { color: var(--muted); }
.cost-quick-stats { display: grid; gap: 10px; }
.cost-quick-stats article {
  min-height: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px;
  padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.cost-quick-stats svg { grid-row: 1 / 3; color: var(--brand); }
.cost-quick-stats span { color: var(--muted); font-size: .75rem; text-transform: uppercase; font-weight: 800; }
.cost-quick-stats strong { font-size: 1.25rem; }
.openai-balance-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: center; gap: 30px;
  margin: 0 0 24px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line);
  border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm);
}
.openai-balance-copy h2 { margin: 6px 0 7px; font-size: clamp(1.55rem, 3vw, 2.2rem); }
.openai-balance-copy p { margin: 0; color: var(--muted); }
.openai-balance-copy small { display: block; margin-top: 8px; color: var(--muted); }
.openai-balance-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.openai-balance-form label { grid-column: 1 / -1; font-size: .76rem; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.openai-balance-form > div {
  display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fbfcff;
}
.openai-balance-form > div span { padding-left: 12px; color: var(--muted); font-weight: 800; }
.openai-balance-form input {
  width: 100%; min-width: 0; padding: 12px 10px 12px 5px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit;
}
.openai-balance-form .primary-button { white-space: nowrap; }
.cost-advanced { grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 14px; }
.cost-advanced > summary { cursor: pointer; font-weight: 800; color: var(--muted); }
.pricing-compact { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pricing-compact > summary { cursor: pointer; font-weight: 800; }
.pricing-current { display: grid; gap: 7px; margin: 14px 0; }
.pricing-current p { display: flex; justify-content: space-between; gap: 18px; margin: 0; padding: 9px 0; color: var(--muted); }
.pricing-current strong { color: var(--text); }
.pricing-compact-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pricing-compact-form label { display: grid; gap: 6px; font-size: .78rem; font-weight: 800; }
.pricing-compact-form input { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.lesson-modification { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 18px; }
.lesson-modification a { display: inline-flex; align-items: center; gap: 8px; color: var(--topic); font-weight: 800; text-decoration: none; }
.lesson-modification small { color: var(--muted); }
.lesson-regenerator {
  display: grid; gap: 22px; max-width: 860px; margin: 24px auto 0; padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm);
}
.regeneration-target { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.regeneration-target h2 { margin: 5px 0 7px; }
.regeneration-target p, .regeneration-note { margin: 0; color: var(--muted); }
.regeneration-instruction { display: grid; gap: 8px; font-weight: 800; }
.regeneration-instruction textarea {
  width: 100%; resize: vertical; padding: 14px; border: 1px solid var(--line);
  border-radius: 13px; background: #fbfcff; color: var(--text); font: inherit;
}
.regeneration-instruction textarea:focus { outline: 3px solid color-mix(in srgb, var(--topic) 18%, transparent); border-color: var(--topic); }
.regeneration-instruction small { color: var(--muted); font-weight: 500; }

/* Owner notifications */
.notification-page { max-width: 1180px; display: grid; gap: 24px; margin: 0 auto; padding: 46px 54px 84px; }
.notification-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
  padding: clamp(25px, 4vw, 38px); overflow: hidden; border: 1px solid #d9e1ef;
  border-radius: 26px; background: radial-gradient(circle at 92% 0, #e5e2ff 0, transparent 31%), linear-gradient(135deg, #edf3ff, #fff 57%, #eefaf5);
}
.notification-hero h1 { margin: 7px 0 8px; font: 800 clamp(2.15rem, 5vw, 3.9rem)/1 "Inter", sans-serif; letter-spacing: -.055em; }
.notification-hero p { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.6; }
.notification-hero .secondary-button { flex: 0 0 auto; }
.notification-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.notification-summary article {
  display: flex; align-items: center; gap: 14px; min-width: 0; padding: 19px;
  border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm);
}
.notification-summary article > div { display: grid; gap: 3px; min-width: 0; }
.notification-summary small { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.notification-summary strong { overflow: hidden; font-size: clamp(1.25rem, 3vw, 1.75rem); text-overflow: ellipsis; }
.notification-summary-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; }
.notification-summary-icon svg { width: 21px; }
.notification-summary-icon.is-requests { color: var(--brand); background: var(--soft-blue); }
.notification-summary-icon.is-success { color: #148469; background: #e6f8f2; }
.notification-summary-icon.is-cost { color: #a06a06; background: #fff5cf; }
.notification-feed { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); }
.notification-feed-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.notification-feed-header h2 { margin: 5px 0 0; font-size: 1.45rem; letter-spacing: -.03em; }
.notification-filters { display: flex; align-items: center; gap: 5px; padding: 4px; background: #f3f5f9; border-radius: 11px; }
.notification-filters a { padding: 8px 11px; color: var(--muted); border-radius: 8px; font-size: .72rem; font-weight: 750; }
.notification-filters a:hover, .notification-filters a.active { color: var(--brand); background: #fff; box-shadow: 0 3px 12px rgba(36, 51, 82, .08); }
.notification-list { display: grid; }
.notification-event { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.notification-event:last-child { border-bottom: 0; }
.notification-event:hover { background: #fafbfe; }
.notification-event-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; }
.notification-event-icon svg { width: 20px; }
.notification-event-icon.status-success { color: #148469; background: #e6f8f2; }
.notification-event-icon.status-failed { color: #a64056; background: #fff0f3; }
.notification-event-icon.status-blocked { color: #a06a06; background: #fff5cf; }
.notification-event-main { min-width: 0; }
.notification-event-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.notification-event-title > strong { font-size: .9rem; }
.notification-event-main p { margin: 4px 0; color: #4d5c74; font-size: .8rem; }
.notification-event-main small { display: block; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.notification-event-usage { display: grid; justify-items: end; gap: 3px; padding-left: 15px; }
.notification-event-usage strong { font-size: .93rem; }
.notification-event-usage span { color: var(--muted); font-size: .67rem; }
.notification-empty { display: grid; justify-items: center; padding: 58px 24px; text-align: center; }
.notification-empty svg { width: 29px; color: var(--brand); }
.notification-empty h3 { margin: 12px 0 5px; }
.notification-empty p { margin: 0; color: var(--muted); font-size: .82rem; }
.notification-disclaimer { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.notification-disclaimer svg { width: 16px; flex: 0 0 auto; }

/* Owner content quality */
.quality-page { max-width: 1240px; display: grid; gap: 24px; margin: 0 auto; padding: 46px 54px 84px; }
.quality-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
  padding: clamp(27px, 4vw, 42px);
  overflow: hidden;
  background: radial-gradient(circle at 92% 4%, #fff1c9 0, transparent 29%), linear-gradient(135deg, #edf3ff, #fff 58%, #edf9f4);
  border: 1px solid #d9e1ef;
  border-radius: 27px;
}
.quality-hero h1 { margin: 7px 0 9px; font: 800 clamp(2.35rem, 5vw, 4.4rem)/.98 "Inter", sans-serif; letter-spacing: -.055em; }
.quality-hero p { max-width: 710px; margin: 0; color: var(--muted); line-height: 1.6; }
.quality-method {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 300px;
  padding: 15px 17px;
  color: #486057;
  background: rgba(255,255,255,.85);
  border: 1px solid #dbe7e2;
  border-radius: 16px;
  font-size: .75rem;
  line-height: 1.45;
}
.quality-method svg { width: 23px; flex: 0 0 auto; color: #16866e; }
.quality-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.quality-summary article {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: var(--shadow-sm);
}
.quality-summary article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #a6afbd; }
.quality-summary .is-attention::before { background: #cf536b; }
.quality-summary .is-observe::before { background: #d89a25; }
.quality-summary .is-healthy::before { background: #20a080; }
.quality-summary small { color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.quality-summary strong { font-size: 2rem; letter-spacing: -.04em; }
.quality-summary span { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.quality-panel { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
.quality-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 25px 27px; border-bottom: 1px solid var(--line); }
.quality-panel h2 { margin: 5px 0 0; font-size: 1.5rem; letter-spacing: -.035em; }
.quality-panel > header > p { max-width: 330px; margin: 0; color: var(--muted); font-size: .75rem; text-align: right; }
.quality-list { display: grid; }
.quality-lesson {
  display: grid;
  grid-template-columns: 74px minmax(250px, 1fr) minmax(280px, .75fr) auto;
  align-items: center;
  gap: 20px;
  padding: 22px 27px;
  border-bottom: 1px solid var(--line);
}
.quality-lesson:last-child { border-bottom: 0; }
.quality-lesson:hover { background: #fbfcff; }
.quality-score {
  width: 68px;
  height: 68px;
  display: grid;
  place-content: center;
  justify-items: center;
  color: #667185;
  background: #f2f4f7;
  border-radius: 20px;
}
.status-attention .quality-score { color: #a33c51; background: #fff0f3; }
.status-observe .quality-score { color: #956315; background: #fff6d9; }
.status-healthy .quality-score { color: #14745f; background: #e8f8f2; }
.quality-score strong { font-size: 1.35rem; line-height: 1; }
.quality-score span { margin-top: 3px; font-size: .6rem; }
.quality-lesson-main { min-width: 0; }
.quality-lesson-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.quality-status { padding: 5px 8px; color: #5b6578; background: #f0f2f6; border-radius: 999px; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.status-attention .quality-status { color: #98394d; background: #fff0f3; }
.status-observe .quality-status { color: #8b5b10; background: #fff5d1; }
.status-healthy .quality-status { color: #126b58; background: #e6f7f1; }
.quality-lesson-heading small { color: var(--muted); font-size: .65rem; }
.quality-lesson h3 { margin: 8px 0 3px; font-size: .98rem; }
.quality-lesson-main > p { margin: 0; color: var(--muted); font-size: .71rem; }
.quality-lesson ul { display: grid; gap: 4px; margin: 10px 0 0; padding-left: 17px; color: #536075; font-size: .7rem; }
.quality-no-signals { margin-top: 9px !important; line-height: 1.45; }
.quality-lesson dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; }
.quality-lesson dl > div { min-width: 0; padding: 10px; background: #f6f8fb; border-radius: 10px; }
.quality-lesson dt { color: var(--muted); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.quality-lesson dd { margin: 4px 0 0; font-size: .78rem; font-weight: 800; }
.quality-lesson > a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.quality-lesson > a svg { width: 15px; }
.quality-empty { display: grid; justify-items: center; padding: 58px 24px; text-align: center; }
.quality-empty svg { width: 30px; color: var(--brand); }
.quality-empty h3 { margin: 12px 0 5px; }
.quality-empty p { margin: 0; color: var(--muted); }

@media (max-width: 800px) {
  .cost-simple-header { align-items: flex-start; flex-direction: column; }
  .budget-overview { grid-template-columns: 1fr; }
  .budget-donut-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; }
  .budget-donut { width: 165px; }
  .cost-quick-stats { grid-template-columns: repeat(3, 1fr); }
  .openai-balance-card { grid-template-columns: 1fr; gap: 20px; }
  .pricing-compact-form { grid-template-columns: 1fr 1fr; }
  .notification-page { padding: 34px 22px 72px; }
  .notification-hero { align-items: flex-start; flex-direction: column; }
  .notification-summary { grid-template-columns: 1fr; }
  .notification-feed-header { align-items: flex-start; flex-direction: column; }
  .notification-filters { width: 100%; overflow-x: auto; }
  .notification-filters a { flex: 1 0 auto; text-align: center; }
  .quality-page { padding: 34px 22px 72px; }
  .quality-hero { grid-template-columns: 1fr; }
  .quality-method { max-width: none; }
  .quality-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-panel > header { align-items: flex-start; flex-direction: column; }
  .quality-panel > header > p { text-align: left; }
  .quality-lesson { grid-template-columns: 68px minmax(0, 1fr); }
  .quality-lesson dl, .quality-lesson > a { grid-column: 2; }
}
@media (max-width: 560px) {
  .phase { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .phase:not(:last-child)::before { display: none; }
  .phase-marker { padding-left: 2px; }
  .phase-body { min-width: 0; }
  .cost-quick-stats { grid-template-columns: 1fr; }
  .openai-balance-form { grid-template-columns: 1fr; }
  .budget-donut-card { padding: 24px 18px; }
  .pricing-compact-form { grid-template-columns: 1fr; }
  .pricing-current p { align-items: flex-start; flex-direction: column; gap: 3px; }
  .cost-event-head { display: none; }
  .cost-event-table { overflow: visible; }
  .cost-event-table article {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    margin-top: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  .cost-event-table article > .event-status,
  .cost-event-table article > div { grid-column: 1 / -1; }
  .cost-event-table article > span:nth-child(3)::before,
  .cost-event-table article > span:nth-child(4)::before,
  .cost-event-table article > strong:last-child::before {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .cost-event-table article > span:nth-child(3)::before { content: "Modelo"; }
  .cost-event-table article > span:nth-child(4)::before { content: "Uso"; }
  .cost-event-table article > strong:last-child::before { content: "Coste"; }
  .cost-event-table article > strong:last-child { text-align: right; }
  .notification-page { padding: 28px 16px calc(70px + env(safe-area-inset-bottom)); gap: 17px; }
  .notification-hero { padding: 24px 20px; border-radius: 21px; }
  .notification-hero h1 { font-size: 2.45rem; }
  .notification-hero .secondary-button { width: 100%; }
  .notification-summary { gap: 9px; }
  .notification-summary article { padding: 15px; }
  .notification-feed-header { padding: 20px 17px; }
  .notification-event { grid-template-columns: 41px minmax(0, 1fr); gap: 12px; padding: 16px 17px; }
  .notification-event-icon { width: 40px; height: 40px; }
  .notification-event-usage { grid-column: 2; justify-items: start; padding: 7px 0 0; border-top: 1px solid var(--line); }
  .lesson-footer-actions { width: 100%; justify-content: stretch; }
  .lesson-footer-actions > button { flex: 1 1 100%; justify-content: center; }
  .lesson-completion-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .feedback-options { gap: 5px; }
  .feedback-options span { padding-inline: 5px; font-size: 10px; }
  .lesson-feedback { padding: 16px; }
  .lesson-feedback-submit { width: 100%; justify-content: center; }
  .quality-page { padding: 28px 16px calc(70px + env(safe-area-inset-bottom)); gap: 17px; }
  .quality-hero { padding: 25px 20px; border-radius: 21px; }
  .quality-hero h1 { font-size: 2.55rem; }
  .quality-summary { gap: 9px; }
  .quality-summary article { padding: 16px; }
  .quality-summary span { white-space: normal; }
  .quality-panel > header { padding: 21px 18px; }
  .quality-lesson { grid-template-columns: 58px minmax(0, 1fr); gap: 13px; padding: 18px; }
  .quality-score { width: 56px; height: 56px; border-radius: 17px; }
  .quality-lesson dl { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-lesson > a { grid-column: 1 / -1; justify-content: center; padding: 10px; background: var(--soft-blue); border-radius: 10px; }
}
/* Private pilot: access and owner controls */
.auth-page{min-height:100vh;background:radial-gradient(circle at 10% 5%,#efe8ff 0,transparent 34%),radial-gradient(circle at 90% 90%,#dff8ef 0,transparent 35%),#faf8f3;color:#24202d}
.auth-shell{width:min(100% - 32px,520px);margin:0 auto;padding:64px 0}
.auth-brand{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none;margin-bottom:24px}
.auth-brand>span:last-child{display:flex;flex-direction:column}.auth-brand small{color:#746d7c}
.auth-card{padding:38px;border:1px solid #ded8e5;border-radius:28px;background:rgba(255,255,255,.92);box-shadow:0 24px 70px rgba(62,45,80,.12)}
.auth-card h1{font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.05;margin:.45rem 0 1rem}
.auth-intro{color:#67606e;line-height:1.65;margin-bottom:26px}
.auth-form{display:grid;gap:18px}.auth-form label,.invite-form label,.user-budget-form label{display:grid;gap:7px;font-weight:650;font-size:.88rem}
.auth-form input,.invite-form input,.invitation-result input,.user-budget-form input{min-height:46px;border:1px solid #d8d1df;border-radius:12px;padding:0 13px;background:#fff;color:#27222e;font:inherit}
.auth-form input:focus,.invite-form input:focus,.user-budget-form input:focus{outline:3px solid rgba(125,87,255,.16);border-color:#7d57ff}
.auth-error{padding:13px 15px;border-radius:12px;background:#fff0f0;color:#9a3030;margin:16px 0}
.field-error{color:#a63737}.auth-form small{font-weight:500;color:#78707f}
.logout-button{width:100%;border:0;background:transparent;cursor:pointer}.sidebar-bottom form{margin-top:6px}
.owner-users-page{display:grid;gap:24px}
.owner-setup-card{max-width:820px;margin:4vh auto;display:grid;grid-template-columns:70px 1fr;gap:26px;padding:clamp(28px,5vw,52px);border:1px solid #d8dfea;border-radius:28px;background:linear-gradient(145deg,#f2f6ff,#fff 58%,#effbf7);box-shadow:0 20px 65px rgba(38,55,85,.1)}
.owner-setup-icon{width:70px;height:70px;display:grid;place-items:center;color:#fff;background:var(--brand);border-radius:21px}.owner-setup-icon svg{width:31px}
.owner-setup-card h1{margin:.35rem 0 .8rem;font-size:clamp(2rem,5vw,3.6rem);line-height:1.02}.owner-setup-card p:not(.eyebrow){max-width:650px;color:var(--muted);line-height:1.65}
.owner-setup-card ul{display:grid;gap:8px;margin:22px 0;padding:0;list-style:none}.owner-setup-card li{position:relative;padding-left:24px;color:#46536a}.owner-setup-card li:before{content:"✓";position:absolute;left:0;color:#168f76;font-weight:800}
.owner-users-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:34px;border-radius:26px;background:linear-gradient(130deg,#edf3ff,#fff 55%,#ebf9f4);border:1px solid #d8e0ec}
.owner-users-hero h1{margin:.25rem 0;font-size:clamp(2.2rem,5vw,4rem);line-height:1}.owner-users-hero>div:first-child>p:last-child{max-width:620px;margin-bottom:0;color:var(--muted);line-height:1.55}
.pilot-summary{display:grid;grid-template-columns:repeat(3,115px);gap:9px}.pilot-summary article{display:grid;gap:3px;padding:15px;background:rgba(255,255,255,.88);border:1px solid #dfe5ee;border-radius:15px}.pilot-summary strong{font-size:1.55rem}.pilot-summary span{color:var(--muted);font-size:.7rem;line-height:1.25}
.owner-users-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.owner-users-guide article{display:flex;gap:13px;padding:17px 19px;border:1px solid var(--line);border-radius:16px;background:#fff}.owner-users-guide article>span{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;color:#fff;background:var(--brand);border-radius:9px;font-size:.75rem;font-weight:800}.owner-users-guide article div{display:grid;gap:3px}.owner-users-guide p{margin:0;color:var(--muted);font-size:.75rem;line-height:1.45}
.invite-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);align-items:end;gap:28px;padding:26px;border:1px solid var(--line);border-radius:20px;background:#fff}.invite-panel h2{margin:.3rem 0}.invite-panel p:not(.eyebrow){margin:0;color:var(--muted);font-size:.82rem}.invite-form{display:flex;align-items:end;gap:10px;min-width:0}.invite-form label{flex:1}.invite-form button{white-space:nowrap}
.invitation-result{display:grid;grid-template-columns:1fr minmax(340px,1.3fr);gap:20px;align-items:center;padding:20px;border-radius:18px;background:#ebfaf4;border:1px solid #bfe8d9}.invitation-result p{margin:.3rem 0 0;color:#54736a;font-size:.8rem}.invitation-copy{display:grid;grid-template-columns:1fr auto;gap:8px}.invitation-copy input{min-width:0}.invitation-copy button{white-space:nowrap}
.owner-account-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;border:1px solid var(--line);border-radius:18px;background:#f8faff}.owner-account-panel>div{display:flex;align-items:center;gap:12px}.owner-account-panel>div>div{display:grid;gap:2px}.owner-account-panel small{color:var(--muted)}.owner-account-panel>p{max-width:430px;margin:0;color:var(--muted);font-size:.78rem;text-align:right}.owner-account-panel a{color:var(--brand);font-weight:750}
.learner-management{display:grid;gap:17px;padding-top:8px}.learner-management .section-heading{margin-bottom:0}.learner-management .section-heading>small{max-width:360px;color:var(--muted);text-align:right}
.users-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
.user-control-card{padding:22px;border-radius:20px;border:1px solid #dce2eb;background:#fff;box-shadow:0 10px 35px rgba(39,50,70,.06)}
.user-control-card header{display:flex;align-items:center;gap:11px}.user-control-card header>div{display:grid;min-width:0;flex:1}.user-control-card header small{overflow:hidden;color:#777f8e;text-overflow:ellipsis}
.status-pill{padding:5px 9px;border-radius:999px;background:#e8f8f2;color:#16745f;font-size:.68rem;font-weight:750}.status-pill.is-paused{color:#954052;background:#fff0f3}
.user-usage{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.user-usage>div{display:grid;padding:12px;border-radius:12px;background:#f5f7fa}.user-usage small{color:#737d8d;font-size:.7rem}.user-usage strong{font-size:1.05rem}
.user-budget-form{display:grid;gap:14px}.user-budget-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.user-budget-fields small{color:var(--muted);font-size:.68rem;font-weight:500}
.user-permissions{display:grid;gap:8px}.permission-row{display:flex!important;align-items:flex-start;gap:10px!important;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe}.permission-row input{min-height:auto!important;width:18px;height:18px;margin-top:2px}.permission-row span{display:grid;gap:2px}.permission-row small{color:var(--muted);font-size:.68rem;font-weight:500;line-height:1.4}
.user-budget-form>button{justify-self:start}.users-empty{display:grid;place-items:center;padding:38px;text-align:center;border:1px dashed #c9d2e0;border-radius:20px;background:#f9fbff}.users-empty svg{width:30px;color:var(--brand)}.users-empty h3{margin:10px 0 4px}.users-empty p{margin:0;color:var(--muted)}
.owner-success{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid #bfe8d9;border-radius:14px;background:#ebfaf4;color:#236b58}.owner-success svg{width:20px;flex:0 0 auto}
.admin-topic-management{display:grid;gap:17px;padding-top:8px}.admin-topic-management .section-heading{margin-bottom:0}.admin-topic-management .section-heading>small{color:var(--muted)}
.admin-topic-warning{display:flex;align-items:flex-start;gap:9px;margin:0;padding:12px 14px;border:1px solid #ead9bd;border-radius:13px;background:#fff9ed;color:#775d32;font-size:.76rem;line-height:1.5}.admin-topic-warning svg{width:18px;flex:0 0 auto}
.admin-topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}.admin-topic-card{display:grid;gap:16px;padding:20px;border:1px solid #dce2eb;border-radius:18px;background:#fff;box-shadow:0 9px 28px rgba(39,50,70,.05)}.admin-topic-card header{display:flex;align-items:center;gap:12px}.admin-topic-card header>div{display:grid;gap:3px;min-width:0}.admin-topic-card header small{overflow:hidden;color:var(--muted);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.admin-topic-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:#f0ecff;color:var(--brand)}.admin-topic-icon svg{width:20px}
.admin-topic-card dl{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}.admin-topic-card dl>div{display:grid;gap:3px;padding:11px;border-radius:11px;background:#f6f8fb}.admin-topic-card dt{color:var(--muted);font-size:.65rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em}.admin-topic-card dd{display:grid;gap:2px;margin:0;font-size:.78rem;font-weight:700}.admin-topic-card dd small{overflow:hidden;color:var(--muted);font-size:.65rem;font-weight:500;text-overflow:ellipsis}
.topic-delete-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;justify-self:start;padding:9px 12px;border:1px solid #ebc5cd;border-radius:10px;background:#fff7f8;color:var(--danger);font:inherit;font-size:.75rem;font-weight:750;cursor:pointer}.topic-delete-button:hover{border-color:#d99cab;background:#fff0f3}.topic-delete-button svg{width:16px}
.pending-invitations{padding:22px;border-radius:20px;background:#fff;border:1px solid #e0e5ed}.pending-invitations h2{margin:.3rem 0}.pending-invitations article{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid #e9edf3}.pending-invitations article>span{display:grid;gap:3px}.pending-invitations small{color:var(--muted)}
@media(max-width:900px){.owner-users-hero,.invite-panel{grid-template-columns:1fr;display:grid}.pilot-summary{grid-template-columns:repeat(3,1fr)}.owner-users-guide{grid-template-columns:1fr}.invite-panel{align-items:stretch}.invitation-result{grid-template-columns:1fr}}
@media(max-width:760px){.auth-shell{padding:calc(28px + env(safe-area-inset-top)) 0 calc(28px + env(safe-area-inset-bottom))}.auth-card{padding:25px}.owner-setup-card{grid-template-columns:1fr}.owner-setup-icon{width:58px;height:58px}.pilot-summary{grid-template-columns:1fr}.invite-form,.invitation-copy{display:grid}.owner-account-panel{align-items:flex-start;flex-direction:column}.owner-account-panel>p{text-align:left}.learner-management .section-heading,.admin-topic-management .section-heading{align-items:flex-start;flex-direction:column}.learner-management .section-heading>small{text-align:left}.users-grid,.admin-topic-grid{grid-template-columns:minmax(0,1fr)}.user-budget-fields{grid-template-columns:1fr}.admin-topic-card dl{grid-template-columns:1fr}.topic-delete-button{width:100%}.pending-invitations article{align-items:flex-start;flex-direction:column}}
.topic-limit-page{display:grid;gap:22px}.topic-limit-card{max-width:720px;margin:5vh auto;padding:clamp(30px,6vw,64px);text-align:center;border:1px solid #ded7e5;border-radius:30px;background:radial-gradient(circle at 50% 0,#efe8ff 0,transparent 44%),#fff;box-shadow:0 22px 70px rgba(56,41,68,.1)}
.topic-limit-card h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.04;margin:.55rem 0 1rem}.topic-limit-card p:not(.eyebrow){max-width:570px;margin:0 auto;color:#6e6675;line-height:1.7}.topic-limit-icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 18px;border-radius:19px;background:#7d57ff;color:#fff}.topic-limit-icon svg{width:28px;height:28px}.topic-limit-actions{display:flex;justify-content:center;margin-top:28px}

/* Arranque automático del itinerario y de las primeras lecciones (ADR-029). */
.roadmap-startup-page{display:flex;align-items:center;justify-content:center;min-height:60vh}
.roadmap-startup{display:flex;flex-direction:column;align-items:center;gap:.85rem;text-align:center;max-width:34rem;
  padding:2.75rem 1.75rem;border-radius:var(--radius-lg,20px);background:var(--surface,#fff);
  border:1px solid var(--border,rgba(20,20,40,.08))}
.roadmap-startup h1{margin:0;font-size:clamp(1.5rem,4vw,2rem)}
.roadmap-startup p{margin:0;color:var(--text-soft,#555b70);max-width:30rem}
.roadmap-startup-icon{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;
  background:var(--topic-soft,#e8e2ff);color:var(--topic,#7d57ff)}
.roadmap-startup-hint{font-size:.85rem;opacity:.75}
.roadmap-startup-progress,.lesson-startup-progress{position:relative;overflow:hidden;width:100%;max-width:22rem;
  height:4px;border-radius:999px;background:var(--topic-soft,#e8e2ff)}
.roadmap-startup-progress span,.lesson-startup-progress span{position:absolute;inset:0;width:40%;border-radius:999px;
  background:var(--topic,#7d57ff);animation:atlas-startup-slide 1.4s ease-in-out infinite}
@keyframes atlas-startup-slide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.roadmap-startup.has-error .roadmap-startup-progress,.lesson-startup.has-error .lesson-startup-progress{display:none}
.roadmap-startup.has-error .primary-button{margin-top:.5rem}
.lesson-startup{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.25rem 0;padding:1.1rem 1.25rem;
  border-radius:var(--radius-lg,20px);background:var(--surface,#fff);border:1px solid var(--border,rgba(20,20,40,.08))}
.lesson-startup>div{flex:1 1 16rem;display:flex;flex-direction:column;gap:.2rem}
.lesson-startup strong{font-size:1rem}
.lesson-startup p{margin:0;font-size:.88rem;color:var(--text-soft,#555b70)}
.lesson-startup-icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--topic-soft,#e8e2ff);color:var(--topic,#7d57ff);flex:none}
@media (max-width:640px){
  .roadmap-startup{padding:2rem 1.15rem}
  .lesson-startup{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .roadmap-startup-progress span,.lesson-startup-progress span{animation:none;width:100%}
}

/* Detalle de una cuenta del piloto: contenido, gasto y eliminación. */
.user-detail-link{display:inline-flex;align-items:center;gap:.4rem;margin:.15rem 0 .35rem;font-size:.86rem;
  font-weight:600;color:var(--accent,#5367e8);text-decoration:none}
.user-detail-link:hover{text-decoration:underline}
.owner-user-hero{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.4rem 1.5rem;margin-bottom:1.25rem;
  border-radius:var(--radius-lg,20px);background:var(--surface,#fff);border:1px solid var(--border,rgba(20,20,40,.08))}
.owner-user-hero>div{flex:1 1 16rem}
.owner-user-hero h1{margin:.1rem 0;font-size:clamp(1.3rem,3.5vw,1.75rem)}
.owner-user-hero p{margin:0;color:var(--text-soft,#555b70);font-size:.9rem}
.owner-user-metrics{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));margin-bottom:1.5rem}
.owner-user-metrics article{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1rem;
  border-radius:var(--radius-md,14px);background:var(--surface,#fff);border:1px solid var(--border,rgba(20,20,40,.08))}
.owner-user-metrics span{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft,#555b70)}
.owner-user-metrics strong{font-size:1.25rem;line-height:1.2}
.owner-user-metrics small{font-size:.75rem;color:var(--text-soft,#555b70)}
.owner-topic-block{margin-bottom:1rem;padding:1rem 1.15rem;border-radius:var(--radius-lg,20px);
  background:var(--surface,#fff);border:1px solid var(--border,rgba(20,20,40,.08))}
.owner-topic-block>header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.owner-topic-block>header small{display:block;color:var(--text-soft,#555b70);font-size:.82rem}
.owner-topic-empty{margin:.6rem 0 0;font-size:.86rem;color:var(--text-soft,#555b70)}
.owner-lesson-list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.owner-lesson-list li{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem;border-radius:var(--radius-md,14px);
  background:var(--surface-soft,rgba(20,20,40,.03))}
.owner-lesson-list li>div{flex:1 1 auto;min-width:0}
.owner-lesson-list strong{display:block;font-size:.92rem}
.owner-lesson-list small{color:var(--text-soft,#555b70);font-size:.78rem}
.owner-lesson-state{display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;flex:none;
  background:var(--surface,#fff);color:var(--text-soft,#555b70)}
.owner-lesson-state.is-done{background:#e6f7f0;color:#1a8f66}
.lesson-delete-button{display:grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:#b3261e}
.lesson-delete-button:hover{background:rgba(179,38,30,.1)}
.owner-activity-list{display:flex;flex-direction:column;gap:.4rem}
.owner-activity-row{display:flex;align-items:center;gap:.85rem;padding:.6rem .85rem;border-radius:var(--radius-md,14px);
  background:var(--surface,#fff);border:1px solid var(--border,rgba(20,20,40,.08))}
.owner-activity-row>div{flex:1 1 auto;min-width:0}
.owner-activity-row strong{display:block;font-size:.9rem}
.owner-activity-row small{color:var(--text-soft,#555b70);font-size:.78rem}
.owner-activity-kind{flex:none;padding:.2rem .55rem;border-radius:999px;font-size:.74rem;font-weight:600;
  background:var(--surface-soft,rgba(20,20,40,.05))}
.owner-activity-row.is-failed .owner-activity-kind{background:#fdecea;color:#b3261e}
.owner-activity-row.is-blocked .owner-activity-kind{background:#fff4e0;color:#a35b00}
.owner-activity-cost{flex:none;text-align:right;font-weight:600;font-size:.88rem}
.owner-activity-cost small{display:block;font-weight:400}
.owner-user-danger{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.5rem;padding:1.15rem 1.35rem;border-radius:var(--radius-lg,20px);
  background:rgba(179,38,30,.05);border:1px solid rgba(179,38,30,.25)}
.owner-user-danger h2{margin:.15rem 0}
.owner-user-danger p{margin:0;max-width:44rem;font-size:.88rem;color:var(--text-soft,#555b70)}
@media (max-width:640px){
  .owner-user-hero,.owner-user-danger{flex-direction:column;align-items:flex-start}
  .owner-user-hero>div{flex:0 0 auto;width:100%}
  .owner-user-metrics{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr))}
  .owner-activity-row{flex-wrap:wrap}
  .owner-activity-cost{text-align:left}
}

/* ==========================================================================
 * SMOOTH LECTIO — identidad De Stijl / Mondrian
 * Rejilla negra, campos crema y bloques en rojo, azul y amarillo primarios.
 * Se aplica sobre los tokens existentes para no tocar el contrato HTML.
 * ========================================================================== */

:root {
  --bg: #f2efe4;
  --surface: #fffdf7;
  --surface-2: #f7f3e6;
  --ink: #14140f;
  --muted: #5d5b52;
  --line: #14140f;
  --nav: #14140f;
  --nav-raised: #24241d;
  --nav-muted: #b9b5a6;
  --brand: #1b4fa5;
  --brand-strong: #143a7c;
  --cyan: #1b4fa5;
  --yellow: #f3b700;
  --coral: #e02b20;
  --soft-blue: #e6ecf8;
  --soft-mint: #eef3fb;
  --soft-yellow: #fdf3d6;
  --soft-coral: #fbe7e5;
  --danger: #e02b20;
  --shadow-sm: 0 2px 0 rgba(20, 20, 15, .9);
  --shadow-md: 0 3px 0 rgba(20, 20, 15, .9);
  --radius: 4px;
  --radius-lg: 4px;
  --radius-md: 3px;
  --border: #14140f;
  --text-soft: #5d5b52;
  --accent: #1b4fa5;
  --surface-soft: #f7f3e6;
}

/* Rejilla: superficies con línea negra y esquinas rectas. */
.topic-hero, .topic-summary, .roadmap-empty, .visual-card,
.phase, .outline-row, .lesson-row, .prompt-hero, .api-generator,
.owner-users-hero, .owner-account-panel, .user-control-card, .admin-topic-card,
.invite-panel, .invitation-result, .owner-setup-card, .users-empty,
.owner-user-hero, .owner-user-metrics article, .owner-topic-block,
.owner-activity-row, .lesson-startup, .roadmap-startup, .diagnosis-strip,
.pilot-summary article, .owner-users-guide article, .auth-card,
.section-heading, .quiz-card, .resource-card, .feedback-card {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

/* Botones: bloque plano con contorno, sin degradados ni elevación. */
.primary-button, .secondary-button, .ghost-button, .complete-button {
  border-radius: var(--radius);
  border: 2px solid var(--line);
  box-shadow: none;
  font-weight: 700;
  letter-spacing: .01em;
}
.primary-button { background: var(--brand); color: #fff; }
.primary-button:hover { background: var(--brand-strong); transform: none; }
.secondary-button { background: var(--surface); color: var(--ink); }
.secondary-button:hover { background: var(--soft-yellow); border-color: var(--line); }

/* Barra lateral negra con acentos primarios. */
.sidebar { background: var(--nav); border-right: 2px solid var(--line); }
.nav-item { border-radius: var(--radius); }
.nav-item.active { background: rgba(255, 255, 255, .1); }
.nav-item.active svg { color: var(--yellow); }
.brand-mark {
  background: var(--surface);
  border: 2px solid var(--surface);
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-copy strong { letter-spacing: .02em; }
.brand-copy small { color: var(--nav-muted); letter-spacing: .18em; text-transform: uppercase; font-size: 9px; }

/* Acentos primarios repartidos, como los bloques del logotipo. */
.ring { --ring-color: var(--brand); }
.status-pill { border: 2px solid var(--line); border-radius: var(--radius); background: var(--soft-blue); }
.status-pill.is-paused { background: var(--soft-coral); }
.eyebrow { color: var(--coral); letter-spacing: .16em; font-weight: 700; }
.owner-user-metrics article:nth-child(3n+1) { border-top: 6px solid var(--coral); }
.owner-user-metrics article:nth-child(3n+2) { border-top: 6px solid var(--brand); }
.owner-user-metrics article:nth-child(3n+3) { border-top: 6px solid var(--yellow); }
.phase:nth-child(3n+1) .phase-marker span { background: var(--coral); color: #fff; }
.phase:nth-child(3n+2) .phase-marker span { background: var(--brand); color: #fff; }
.phase:nth-child(3n+3) .phase-marker span { background: var(--yellow); color: var(--ink); }
.topic-hero { border-top: 8px solid var(--coral); }
.topic-summary { border-top: 8px solid var(--brand); }

/* Tipografía del titular: peso alto y compacto, como el wordmark. */
h1 { letter-spacing: -.02em; font-weight: 800; }
h2, h3 { letter-spacing: -.01em; font-weight: 700; }

/* Segunda pasada: sustituir degradados y adornos heredados por campos planos. */
.recommendation {
  background: var(--brand);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}
.recommendation::before, .recommendation::after { display: none; }
.rec-visual, .visual-card { background: var(--surface); }
.switch-panel, .owner-setup-card, .owner-users-hero, .topic-limit-card,
.auth-card, .quality-hero, .notification-hero {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.auth-page { background: var(--bg); color: var(--ink); }
.auth-brand .brand-mark { background: var(--nav); border: 2px solid var(--line); }
.progress-bar > span, .budget-bar > span { background: var(--brand); }
.ring { background: conic-gradient(var(--brand) calc(var(--percent, 0) * 1%), var(--surface-2) 0); }
.ring::before { background: var(--surface); }

/* Bloque de marca: "SMOOTH" pequeño sobre "LECTIO.", como el logotipo. */
.brand-copy, .auth-brand span:last-child { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.brand-copy strong, .auth-brand strong { font-size: 17px; font-weight: 800; letter-spacing: .01em; line-height: 1.05; }
.brand-copy small, .auth-brand small { letter-spacing: .3em; font-size: 9px; font-weight: 600; }
.brand-mark { width: 44px; height: 44px; padding: 0; }
.auth-brand .brand-mark { width: 46px; height: 46px; }
.auth-brand .brand-mark img { width: 100%; height: 100%; }

/* Formularios: campos rectos con contorno negro y foco azul primario. */
.auth-form input, .invite-form input, .invitation-result input, .user-budget-form input,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
select, textarea {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.auth-form input:focus, .invite-form input:focus, .user-budget-form input:focus,
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(27, 79, 165, .25);
  border-color: var(--brand);
}
.button.primary, button.primary, .button {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-weight: 700;
}
.button.primary, button.primary {
  background: var(--brand);
  color: #fff;
}
.button.primary:hover, button.primary:hover { background: var(--brand-strong); }
.field-error { color: var(--danger); font-weight: 600; }

/* Tarjetas de tema: bloques primarios alternos, sustituyendo los pasteles
 * heredados de una iteración anterior que seguían fijados en styles.css. */
.topic-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-top: 8px solid var(--topic, var(--brand));
  border-radius: var(--radius);
  box-shadow: none;
}
.topic-card:nth-child(3n+1) { background: #eef2fa; }
.topic-card:nth-child(3n+2) { background: #fdf3d6; }
.topic-card:nth-child(3n+3) { background: #fbe7e5; }
.topic-card:hover { transform: none; box-shadow: 4px 4px 0 var(--line); border-color: var(--line); }
.topic-icon, .hero-icon { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.lesson-status, .quiz-icon { border: 2px solid var(--line); border-radius: var(--radius); }
.phase-body { border: 2px solid var(--line); border-radius: var(--radius); }
.phase-marker span { border: 2px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.phase-count, .lesson-badges span, .concept-list span { border: 2px solid var(--line); border-radius: var(--radius); }
.planned-content { border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--muted); }
.toast { border: 2px solid var(--surface); border-radius: var(--radius); }

/* Módulo de instalación móvil en el lenguaje de la marca. */
.pwa-install-card {
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.pwa-install-card h2, .pwa-install-card p, .pwa-install-card .eyebrow { color: var(--ink); }
.pwa-install-card::before, .pwa-install-card::after { display: none; }
.pwa-install-card .pwa-install-icon,
.pwa-install-card [class*="icon"] {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  color: var(--brand);
}
.pwa-install-dialog { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pwa-dialog-icon { border: 2px solid var(--line); border-radius: var(--radius); background: var(--soft-yellow); color: var(--ink); }
.pwa-dialog-close { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* ==========================================================================
 * Ajustes de revisión: página blanca, barra lateral pastel y sello centrado.
 * ========================================================================== */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f2e6;
  --nav: #f4efe1;
  --nav-raised: #ebe4d2;
  --nav-muted: #6b665a;
}

/* Barra lateral clara: la rejilla negra la separa del contenido. */
.sidebar {
  background: var(--nav);
  color: var(--ink);
  border-right: 2px solid var(--line);
}
.brand, .brand-copy strong { color: var(--ink); }
.brand-copy small { color: var(--nav-muted); }
.nav-item { color: #4a463c; font-weight: 600; }
.nav-item svg { color: #6b665a; }
.nav-item:hover { background: rgba(20, 20, 15, .06); color: var(--ink); }
.nav-item.active {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--line);
  font-weight: 700;
}
.nav-item.active svg { color: var(--brand); }
.nav-label { color: var(--nav-muted); }
.sidebar .profile, .sidebar-bottom { border-color: rgba(20, 20, 15, .16); }
.sidebar .profile strong, .sidebar-bottom strong { color: var(--ink); }
.sidebar .profile small, .sidebar-bottom small { color: var(--nav-muted); }
.sidebar .avatar { background: var(--yellow); color: var(--ink); border: 2px solid var(--line); }
.sidebar .profile svg, .sidebar-bottom svg { color: #4a463c; }
.sidebar a, .sidebar button { color: inherit; }

/* La barra superior acompaña al fondo blanco. */
.topbar { background: rgba(255, 255, 255, .92); border-bottom: 2px solid var(--line); }

/* Sello de marca: encaja completo y centrado en su caja. */
.brand-mark {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 10px;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.auth-brand .brand-mark { background: transparent; border: 0; }

/* Sello en línea, sustituyendo el icono de brújula anterior. */
.brand-glyph {
  width: 1.15em;
  height: 1.15em;
  border-radius: 3px;
  object-fit: contain;
  vertical-align: -.2em;
  flex: none;
}
.pwa-install-visual .brand-glyph { width: 26px; height: 26px; border-radius: 5px; }

/* Las cifras del panel de progreso son texto, no tarjetas. */
.metric { border: 0; background: transparent; box-shadow: none; padding: 0; }

/* Paneles del inicio dentro de la misma rejilla. */
.panel, .connection-panel {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.connection-icon { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; color: var(--brand); }
.progress-track { background: var(--surface-2); border: 2px solid var(--line); border-radius: var(--radius); height: 10px; }
.progress-track span { background: var(--brand); border-radius: 0; }

/* ==========================================================================
 * Paleta tomada directamente del logotipo original, no aproximada.
 * Rojo #df1915 · Azul #1d3e9a · Amarillo #f6c025 · Fondo #fdfbfa · Tinta #000
 * ========================================================================== */

:root {
  --bg: #fdfbfa;
  --surface: #ffffff;
  --surface-2: #f4f1ea;
  --line: #000000;
  --brand: #1d3e9a;
  --brand-strong: #152f78;
  --cyan: #1d3e9a;
  --accent: #1d3e9a;
  --yellow: #f6c025;
  --coral: #df1915;
  --danger: #df1915;
  --soft-blue: #e6eaf5;
  --soft-yellow: #fdf4dc;
  --soft-coral: #fbe4e3;
  --nav: #f4f1ea;
  --nav-raised: #eae5da;
  --border: #000000;
}

/* El sello ya trae su propio fondo, así que no necesita caja. */
.brand-mark { border-radius: 9px; }
.brand-mark img { border-radius: 9px; }
.brand-glyph { border-radius: 3px; }

/* ==========================================================================
 * Revisión: barra lateral oscura con el sello en negativo, menos marcos
 * anidados y cajas que se ajustan al contenido.
 * ========================================================================== */

:root {
  --nav: #0d0d0d;
  --nav-raised: #1c1c1a;
  --nav-muted: #9b968a;
}

/* Barra lateral oscura: el sello en negativo se funde con ella. */
.sidebar { background: var(--nav); color: #ffffff; border-right: 2px solid var(--line); }
.brand, .brand-copy strong { color: #ffffff; }
.brand-copy small { color: var(--nav-muted); }
.nav-item { color: #c9c5ba; font-weight: 600; }
.nav-item svg { color: #9b968a; }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #ffffff; }
.nav-item.active {
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, .22);
}
.nav-item.active svg { color: var(--yellow); }
.nav-label { color: #7d786c; }
.sidebar .profile, .sidebar-bottom { border-color: rgba(255, 255, 255, .14); }
.sidebar .profile strong, .sidebar-bottom strong { color: #ffffff; }
.sidebar .profile small, .sidebar-bottom small { color: var(--nav-muted); }
.sidebar .avatar { background: var(--yellow); color: #14140f; border: 2px solid #14140f; }
.sidebar .profile svg, .sidebar-bottom svg { color: #c9c5ba; }

/* La caja del sello se ajusta exactamente al icono, sin margen sobrante. */
.brand-mark {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }
.brand-glyph { border-radius: 4px; object-fit: cover; }

/* Logotipo horizontal en el acceso. */
.auth-wordmark { display: block; width: min(230px, 60vw); height: auto; margin-bottom: 6px; }

/* Menos marcos: los encabezados de sección son texto, no tarjetas. */
.section-heading, .panel-heading {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

/* El roadmap deja de anidar cajas: solo enmarca la fase, no cada lección. */
.phase { border: 0; background: transparent; border-radius: 0; box-shadow: none; }
.outline-row, .lesson-row {
  border: 0;
  border-bottom: 1px solid rgba(20, 20, 15, .12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.outline-row:last-child, .lesson-row:last-child { border-bottom: 0; }
.outline-row:hover, .lesson-row:hover { background: var(--surface-2); }
.outline-list, .lesson-list { border-top: 1px solid rgba(20, 20, 15, .12); }

/* Todo el pie de la barra lateral hereda el contraste claro. */
.sidebar .profile, .sidebar form, .sidebar .logout-button, .sidebar-bottom > * { color: #c9c5ba; }
.sidebar .logout-button { background: transparent; border: 0; }
.sidebar .logout-button:hover { background: rgba(255, 255, 255, .08); color: #ffffff; }
.auth-wordmark { width: min(270px, 66vw); }

/* El sello llena su caja en el módulo de instalación: sin marco sobrante. */
.pwa-install-visual > span {
  padding: 0;
  background: transparent;
  border: 0;
  overflow: hidden;
  border-radius: 11px;
}
.pwa-install-visual .brand-glyph { width: 100%; height: 100%; border-radius: 11px; }

/* La caja del módulo de instalación es el propio sello, sin marco exterior. */
.pwa-install-visual {
  width: 64px;
  height: 64px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: stretch;
  flex: none;
  box-shadow: none;
}
.pwa-install-visual > i, .pwa-install-visual svg { display: none; }
.pwa-install-visual > span { width: 100%; height: 100%; border-radius: 0; }
.pwa-install-visual .brand-glyph { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }

/* ==========================================================================
 * Barra lateral colapsable. La preferencia se recuerda por navegador.
 * ========================================================================== */

.sidebar, .main { transition: width .18s ease, margin-left .18s ease, padding .18s ease; }

.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: #9b968a;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.sidebar-toggle:hover { background: rgba(255, 255, 255, .08); color: #ffffff; }
.sidebar-toggle svg { width: 18px; flex: none; transition: transform .18s ease; }

/* Estado contraído: solo iconos, con el ancho justo para pulsarlos. */
.app-shell.rail .sidebar { width: 78px; padding-left: 12px; padding-right: 12px; }
.app-shell.rail .main { margin-left: 78px; }
.app-shell.rail .brand { justify-content: center; margin: 0 0 26px; }
.app-shell.rail .brand-copy,
.app-shell.rail .nav-label,
.app-shell.rail .sidebar-toggle span,
.app-shell.rail .nav-item > span:not(.nav-dot),
.app-shell.rail .profile > div,
.app-shell.rail .sidebar-bottom strong,
.app-shell.rail .sidebar-bottom small,
.app-shell.rail .logout-button span { display: none; }
.app-shell.rail .nav-item,
.app-shell.rail .sidebar-toggle,
.app-shell.rail .logout-button { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
.app-shell.rail .sidebar-toggle svg { transform: rotate(180deg); }
.app-shell.rail .profile { justify-content: center; }
.app-shell.rail .nav-dot { width: 11px; height: 11px; }

/* Evita el salto visual mientras app.js todavía no ha corrido. */
html.rail-preload .sidebar { width: 78px; }
html.rail-preload .main { margin-left: 78px; }

/* En móvil la barra es un panel deslizante: el modo contraído no aplica. */
@media (max-width: 760px) {
  .app-shell.rail .sidebar { width: 270px; padding-left: 20px; padding-right: 20px; }
  .app-shell.rail .main { margin-left: 0; }
  .app-shell.rail .brand { justify-content: flex-start; }
  .app-shell.rail .brand-copy,
  .app-shell.rail .profile > div { display: flex; }
  .app-shell.rail .nav-label,
  .app-shell.rail .sidebar-bottom strong,
  .app-shell.rail .sidebar-bottom small { display: block; }
  .app-shell.rail .nav-item > span:not(.nav-dot),
  .app-shell.rail .logout-button span { display: inline; }
  .app-shell.rail .nav-item,
  .app-shell.rail .logout-button { justify-content: flex-start; gap: 12px; padding-left: 12px; padding-right: 12px; }
  .sidebar-toggle { display: none; }
  html.rail-preload .sidebar { width: 270px; }
  html.rail-preload .main { margin-left: 0; }
}

/* ==========================================================================
 * Reproductor de la lección narrada.
 * ========================================================================== */

.narration {
  margin: 0 0 26px;
  padding: 20px 22px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}
.narration-intro { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.narration-intro > div { flex: 1 1 16rem; }
.narration-intro h2 { margin: 0; font-size: 1.05rem; }
.narration-intro p { margin: .2rem 0 0; font-size: .86rem; color: var(--muted); }
.narration-icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--soft-yellow); color: var(--ink);
}
.narration-status { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }
.narration-status.is-error { color: var(--danger); font-weight: 600; }

.narration-player { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.narration-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.narration-button {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;           /* objetivo táctil mínimo en iOS */
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.narration-button:hover { background: var(--soft-yellow); }
.narration-button:focus-visible { outline: 3px solid rgba(29, 62, 154, .35); outline-offset: 2px; }
.narration-button.is-primary { background: var(--brand); color: #fff; width: 52px; height: 52px; }
.narration-button.is-primary:hover { background: var(--brand-strong); }
.narration-button svg { width: 19px; }
.narration-button span { position: absolute; bottom: 3px; font-size: 8px; font-weight: 700; }
.narration-speed { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: .8rem; font-weight: 600; }
.narration-speed select { min-height: 44px; padding: 0 10px; }

.narration-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.narration-progress input[type="range"] { flex: 1 1 12rem; min-height: 44px; accent-color: var(--brand); }
.narration-time { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }

@media (max-width: 640px) {
  .narration { padding: 16px; }
  .narration-intro .primary-button { width: 100%; justify-content: center; }
  .narration-speed { margin-left: 0; width: 100%; justify-content: space-between; }
  .narration-progress { gap: 8px; }
}

/* `display` no debe ganar al atributo hidden mientras el audio no está listo. */
.narration-player[hidden], .narration-status[hidden] { display: none; }
.narration [hidden] { display: none; }

/* Control de IA: cupo gratuito de Azure y gasto por partida (ADR-035). */
.azure-free-tier {
  display: grid; gap: 14px;
  margin: 0 0 24px; padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
}
.azure-free-tier-copy h2 { margin: 6px 0 7px; font-size: clamp(1.55rem, 3vw, 2.2rem); }
.azure-free-tier-copy p { margin: 0; color: var(--muted); max-width: 65ch; }
.azure-free-tier-copy p strong { color: var(--ink); }
.azure-free-tier-copy small { display: block; margin-top: 8px; color: var(--muted); max-width: 70ch; }
.azure-free-tier-meter { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.azure-free-tier-meter span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--brand); }
.azure-free-tier.is-high .azure-free-tier-meter span { background: var(--coral); }
.azure-free-tier.is-high h2 { color: var(--danger); }

.cost-categories {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 18px 0 20px;
}
.cost-category {
  display: grid; align-content: start; gap: 12px;
  padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
}
.cost-category > header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.cost-category > header .cost-kind-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; }
.cost-category > header .cost-kind-icon svg { width: 19px; }
.cost-category > header strong { display: block; }
.cost-category > header small { color: var(--muted); font-size: .8rem; }
.cost-category > b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.cost-category dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.cost-category dl div { display: grid; gap: 2px; }
.cost-category dt { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cost-category dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cost-category-note { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.cost-analytics.is-single { grid-template-columns: minmax(0, 1fr); }
.cost-estimated { display: block; color: var(--muted); font-size: .7rem; font-weight: 600; }

@media (max-width: 900px) {
  .cost-categories { grid-template-columns: minmax(0, 1fr); }
}

/* Control de IA: elegir un mes natural junto a los periodos de días. */
.cost-periods { flex-wrap: wrap; }
.cost-month-picker { display: flex; align-items: center; gap: 6px; }
.cost-month-picker label { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cost-month-picker select {
  min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: .8rem;
}
.cost-month-picker .secondary-button { min-height: 34px; padding: 0 12px; }
.cost-month-picker.is-auto .secondary-button { display: none; }
@media (max-width: 760px) {
  .cost-periods { overflow-x: visible; }
  .cost-month-picker { width: 100%; }
  .cost-month-picker select { flex: 1 1 auto; min-width: 0; }
}

/* Control de IA como dashboard: indicadores, evolución, proveedores y detalle. */
.ai-dash {
  --ai-text: var(--brand);
  --ai-script: var(--yellow);
  --ai-voice: var(--coral);
  --ai-rule: #e4dfd3;
  display: grid; gap: 18px;
}
.ai-dash > * { min-width: 0; }
.ai-dash .cost-saved, .ai-dash .cost-error, .ai-dash .cost-warning { margin: 0; }
.ai-dash-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 6px; }
.ai-dash-header h1 { margin: 6px 0 6px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.03em; }
.ai-dash-header p { margin: 0; color: var(--muted); max-width: 62ch; }

.ai-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0;
  padding: 10px 12px 10px 16px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.ai-toolbar > .ai-toolbar-label { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 750; }
.ai-toolbar-label svg { width: 17px; color: var(--brand); }
.ai-segmented { display: inline-flex; padding: 3px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.ai-toolbar .ai-segmented a {
  padding: 6px 12px; border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--muted); font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.ai-toolbar .ai-segmented a.active { color: #fff; background: var(--ink); }

.ai-card {
  padding: 22px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: none;
}
.ai-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ai-card-head h2 { margin: 4px 0 0; font-size: 1.15rem; letter-spacing: -.01em; }
.ai-card-head > svg { width: 20px; color: var(--muted); }
.ai-muted { color: var(--muted); font-size: .82rem; }
.ai-mono { overflow: hidden; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .76rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }

/* Indicadores */
.ai-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ai-kpi {
  display: grid; align-content: start; gap: 8px; padding: 16px 20px 18px;
  border: 2px solid var(--line); border-top: 6px solid var(--brand); border-radius: var(--radius); background: var(--surface);
}
.ai-kpi:nth-child(2) { border-top-color: var(--yellow); }
.ai-kpi:nth-child(3) { border-top-color: var(--coral); }
.ai-kpi:nth-child(4) { border-top-color: var(--ink); }
.ai-kpi > header { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.ai-kpi > header span { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ai-kpi > header svg { width: 18px; color: var(--ink); }
.ai-kpi strong { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ai-kpi small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.ai-kpi-budget-body { display: flex; align-items: center; gap: 14px; }
.ai-kpi-budget-body > div:last-child { display: grid; gap: 2px; min-width: 0; }
.ai-ring.budget-donut { width: 58px; min-width: 58px; padding: 6px; }
.ai-ring.budget-donut > div { box-shadow: none; }
.ai-ring b { font-size: .78rem; color: var(--ink); }
.ai-projection { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--ai-rule); }
.ai-projection svg { width: 15px; color: var(--brand); }
.ai-projection.is-over { color: var(--danger); }
.ai-projection.is-over svg { color: var(--danger); }
.ai-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: middle; }
.ai-dot.is-good { background: var(--brand); }

/* Evolución y reparto */
.ai-grid-main { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 14px; }
.ai-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .78rem; }
.ai-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ai-swatch { display: inline-block; width: 11px; height: 11px; min-width: 11px; border: 1.5px solid var(--line); border-radius: 2px; }
.ai-swatch.is-text, .is-text.ai-provider-icon { background: var(--ai-text); }
.ai-swatch.is-script { background: var(--ai-script); }
.ai-swatch.is-voice, .is-voice.ai-provider-icon { background: var(--ai-voice); }
.ai-chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.ai-chart-axis {
  display: flex; flex-direction: column; justify-content: space-between; height: 220px;
  color: var(--muted); font-size: .7rem; text-align: right; font-variant-numeric: tabular-nums;
}
.ai-chart-axis span { transform: translateY(-50%); }
.ai-chart-axis span:last-child { transform: translateY(50%); }
.ai-chart-plot {
  display: flex; align-items: flex-start; gap: 3px; height: 244px; padding-bottom: 24px;
  background:
    linear-gradient(var(--ai-rule), var(--ai-rule)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--ai-rule), var(--ai-rule)) 0 110px / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 219px / 100% 2px no-repeat;
}
.ai-chart-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 220px; }
.ai-chart-col:hover .ai-chart-bar { filter: brightness(1.08); }
.ai-chart-bar { display: flex; flex-direction: column; min-height: 0; border-radius: 2px 2px 0 0; overflow: hidden; }
.ai-chart-bar span { display: block; flex-grow: 0; flex-shrink: 0; }
.ai-chart-bar .is-text { background: var(--ai-text); }
.ai-chart-bar .is-script { background: var(--ai-script); }
.ai-chart-bar .is-voice { background: var(--ai-voice); }
.ai-chart-col small {
  position: absolute; top: 100%; left: 50%; margin-top: 6px; transform: translateX(-50%);
  color: var(--muted); font-size: .68rem; white-space: nowrap;
}
.ai-split-card { display: grid; align-content: start; }
.ai-split-ring { width: 168px; aspect-ratio: 1; margin: 0 auto 18px; padding: 20px; border: 2px solid var(--line); border-radius: 50%; }
.ai-split-ring > div {
  display: grid; place-content: center; gap: 2px; width: 100%; height: 100%;
  border: 2px solid var(--line); border-radius: 50%; background: var(--surface); text-align: center;
}
.ai-split-ring b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ai-split-ring span { color: var(--muted); font-size: .72rem; }
.ai-split-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ai-split-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--ai-rule); }
.ai-split-list strong, .ai-split-list small { display: block; }
.ai-split-list strong { font-size: .9rem; }
.ai-split-list small { color: var(--muted); font-size: .74rem; }
.ai-split-value { text-align: right; font-variant-numeric: tabular-nums; }
.ai-split-value b { font-size: .9rem; }

/* Proveedores */
.ai-providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ai-provider { display: grid; align-content: start; gap: 18px; }
.ai-provider-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ai-provider-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--line); border-radius: var(--radius); color: #fff; }
.ai-provider-icon.is-voice { color: #fff; }
.ai-provider-icon svg { width: 20px; }
.ai-provider-head h2 { margin: 0; font-size: 1.1rem; }
.ai-provider-head small { color: var(--muted); font-size: .78rem; }
.ai-provider-head > b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.ai-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.ai-stats > div { display: grid; gap: 4px; padding: 12px 14px; min-width: 0; }
.ai-stats > div + div { border-left: 1px solid var(--ai-rule); }
.ai-stats dt { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ai-stats dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ai-stats dd small { color: var(--muted); font-weight: 600; }
.ai-provider-section { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ai-rule); }
.ai-provider-section p { margin: 0; color: var(--muted); font-size: .88rem; }
.ai-provider-section p strong { color: var(--ink); }
.ai-provider-section small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.ai-meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ai-provider-section h3, .ai-meter-row h3 { margin: 0; font-size: 1.05rem; }
.ai-meter-row > span { color: var(--muted); font-weight: 750; font-variant-numeric: tabular-nums; }
.ai-meter { height: 12px; overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.ai-meter span { display: block; height: 100%; min-width: 2px; background: var(--ai-text); }
.ai-provider-voice .ai-meter span { background: var(--ai-voice); }
.ai-provider.is-high .ai-meter span { background: var(--ink); }
.ai-provider.is-high .ai-meter-row h3 { color: var(--danger); }
.ai-balance .openai-balance-copy { display: grid; gap: 10px; }
.ai-balance .openai-balance-copy small { margin: 0; }
.ai-balance .openai-balance-form { margin-top: 4px; }
.ai-balance .openai-balance-form > div { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ai-balance .openai-balance-form input { border: 0; border-radius: 0; box-shadow: none; outline: 0; background: transparent; }

/* Voz de Azure: capa gratuita (rayada, solo referencia) frente a pago por uso (sólido). */
.ai-dash { --ai-free: repeating-linear-gradient(135deg, var(--coral) 0 3px, var(--soft-coral) 3px 7px); }
.ai-swatch.is-free { background: var(--ai-free); }
.ai-swatch.is-paid { background: var(--coral); }
.ai-tier-bar { display: flex; height: 14px; overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.ai-tier-bar span { display: block; height: 100%; }
.ai-tier-bar .is-free { background: var(--ai-free); }
.ai-tier-bar .is-paid { background: var(--coral); }
.ai-tier-bar .is-free + .is-paid[style*="min-width"] { border-left: 2px solid var(--line); }
.ai-tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-tier { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--ai-rule); border-radius: var(--radius); background: var(--bg); }
.ai-tier header { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ai-tier strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.ai-tier strong small { display: inline; color: var(--muted); font-size: .76rem; font-weight: 600; }
.ai-provider-section .ai-tier p { font-size: .84rem; }
.ai-tier p b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .ai-tier-grid { grid-template-columns: minmax(0, 1fr); } }

/* Tablas */
.ai-table { display: grid; }
.ai-table-row { display: grid; align-items: center; gap: 14px; padding: 11px 4px; border-top: 1px solid var(--ai-rule); font-size: .86rem; }
.ai-table-head { border-top: 0; border-bottom: 2px solid var(--line); padding-top: 0; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ai-table-row > [role="cell"] { min-width: 0; font-variant-numeric: tabular-nums; }
.ai-ops-row { grid-template-columns: minmax(150px, 1.4fr) minmax(110px, 1fr) 90px minmax(110px, 1fr) 100px 100px minmax(120px, 1fr); }
.ai-ops-row > [data-label="Operación"] { display: inline-flex; align-items: center; gap: 9px; }
.ai-share { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.ai-share-bar { flex: 1; height: 8px; overflow: hidden; border: 1.5px solid var(--line); border-radius: 2px; background: var(--surface-2); }
.ai-share-bar span { display: block; height: 100%; min-width: 2px; }
.ai-share-bar .is-text { background: var(--ai-text); }
.ai-share-bar .is-script { background: var(--ai-script); }
.ai-share-bar .is-voice { background: var(--ai-voice); }
.ai-events-row { grid-template-columns: 104px minmax(220px, 2fr) minmax(110px, 1fr) minmax(140px, 1.1fr) minmax(110px, .9fr) 110px; }
.ai-events-row .event-status { display: inline-block; padding: 4px 8px; border: 1.5px solid var(--line); border-radius: var(--radius-md); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.ai-event-title strong, .ai-event-title small { display: block; }
.ai-card-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.ai-card-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 750; color: var(--brand); }
.ai-card-foot svg { width: 16px; }
.ai-event-title small { margin-top: 3px; color: var(--muted); font-size: .74rem; }
.ai-events-row > strong[role="cell"], .ai-ops-row > strong[role="cell"] { font-weight: 750; }

/* Distribuciones */
.ai-grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ai-bars > div > div:first-child { font-size: .86rem; }
.ai-bars > div > div:first-child span { font-variant-numeric: tabular-nums; color: var(--muted); }
.ai-bars small { font-size: .72rem; color: var(--muted); }
.ai-bars .cost-bar { height: 10px; border: 2px solid var(--line); border-radius: var(--radius); }
.ai-bars .cost-bar span { background: var(--brand); border-radius: 0; }
.ai-dash .cost-config, .ai-dash .cost-disclaimer { margin: 0 auto; width: 100%; }
.ai-dash .cost-config { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
.ai-dash .cost-disclaimer { max-width: 900px; font-size: .78rem; }

@media (max-width: 1100px) {
  .ai-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-grid-main, .ai-providers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ai-table-head { display: none; }
  .ai-ops-row, .ai-events-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 14px 4px; }
  .ai-ops-row > [data-label="Operación"], .ai-events-row > [data-label="Contenido"] { grid-column: 1 / -1; }
  .ai-table-row > [role="cell"][data-label]:not([data-label="Operación"]):not([data-label="Contenido"]):not([data-label="Estado"])::before {
    content: attr(data-label); display: block; margin-bottom: 2px; font-family: "Inter", "Segoe UI", sans-serif;
    color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  }
  .ai-events-row > [data-label="Estado"] { grid-column: 1 / -1; order: -1; }
  .ai-grid-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ai-dash-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .ai-toolbar { padding: 12px; }
  .ai-toolbar > .ai-toolbar-label { display: inline-flex; width: 100%; }
  .ai-segmented { width: 100%; }
  .ai-toolbar .ai-segmented a { flex: 1; text-align: center; padding: 7px 4px; }
  .ai-kpis { grid-template-columns: minmax(0, 1fr); }
  .ai-card { padding: 18px; }
  .ai-card-head { flex-wrap: wrap; gap: 10px; }
  .ai-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-stats > div:nth-child(3) { border-left: 0; }
  .ai-stats > div:nth-child(n+3) { border-top: 1px solid var(--ai-rule); }
  .ai-provider-head { grid-template-columns: auto minmax(0, 1fr); }
  .ai-provider-head > b { grid-column: 1 / -1; }
  .ai-chart-axis { display: none; }
  .ai-chart { grid-template-columns: minmax(0, 1fr); }
  .ai-chart-plot { gap: 2px; }
  /* En móvil solo caben las fechas de los extremos. */
  .ai-chart-col small { display: none; }
  .ai-chart-col:first-child small, .ai-chart-col:last-child small { display: block; }
  .ai-chart-col:first-child small { left: 0; transform: none; }
  .ai-chart-col:last-child small { right: 0; left: auto; transform: none; }
}