/* Paleta de «Ruta de estudio». Los colores por actividad se definen en portal.css. */
:root {
  --ruta-azul: #26547c;
  --ruta-tinta: #202d39;
  --ruta-muted: #505e6b;
  --ruta-linea: #d4dfe6;
  --ruta-panel: #f2f6f9;
  --ruta-control: #8295a5;
  --ruta-activo: #e2edf6;
  --ruta-oscuro: #193e60;
  --ink: var(--ruta-tinta);
  --muted: var(--ruta-muted);
  --line: var(--ruta-linea);
  --paper: #fff;
  --card: #fff;
  --forest: var(--ruta-azul);
  --pine: var(--ruta-oscuro);
  --mint: var(--ruta-activo);
  --plum: var(--ruta-azul);
  --lav: var(--ruta-panel);
  --shadow: none;
}

/* Una cabecera reconocible incluso cuando el espacio lo ocupa el estudio. */
body:has(#workspace:not([hidden])) .head-in {
  max-width: 988px;
  min-height: 78px;
  padding-block: .5rem;
}
body:has(#workspace:not([hidden])) .brand img {
  width: clamp(48px, 5.5vw, 64px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14%;
}
body:has(#workspace:not([hidden])) .brand strong {
  color: var(--ink);
  font-size: clamp(1.12rem, 2vw, 1.4rem);
  letter-spacing: -.035em;
}
.study-context, .expanded-study-context {
  background: #eff5fa;
  color: var(--ruta-tinta);
  border-top: 1px solid var(--ruta-linea);
  padding: .3rem max(.8rem, env(safe-area-inset-right)) .3rem max(.8rem, env(safe-area-inset-left));
}
.study-context[hidden], .ceaa-reader:not(.reader-expanded) > .expanded-study-context { display: none; }
.study-context-row {
  max-width: 988px;
  margin-inline: auto;
  line-height: 1.35;
  text-align: center;
  font-size: .86rem;
  overflow-wrap: anywhere;
}
.study-context-label {
  color: var(--ruta-muted);
  margin-inline-end: .4em;
}
.study-context-name::before { content: ' · '; color: var(--ruta-muted); }
.study-context-row + .study-context-row { margin-top: .2rem; }
.study-context-row strong { color: var(--ruta-oscuro); }
.study-sheet-tools:has(.expanded-study-context) {
  display: flex; gap: .4rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.study-sheet-tools .expanded-study-context { padding: .25rem; border: none; background: none; }
@media screen {
  .site-head:has(.study-context:not([hidden])) { position: sticky; top: calc(0px - var(--ceaa-head-row, 78px)); z-index: 4; }
  .barras-de-lectura .site-head:has(.study-context:not([hidden])) { top: 0; }
  .barras-replegadas .site-head:has(.study-context:not([hidden])) {
    transform: translateY(calc(0px - var(--ceaa-head-row, 78px)));
  }
  body:has(#workspace > .va) .study-context { position: absolute; inset-inline: 0; border-bottom: 1px solid var(--ruta-linea); }
  .study-context.also-in-home { visibility: hidden; }
}
.head-person[aria-current=page], .nav-item[aria-current=page] {
  color: var(--ruta-oscuro);
  border-color: var(--ruta-linea);
  background: var(--ruta-activo);
}
body:has(#workspace:not([hidden])) .site-foot { background: var(--ruta-panel); }
.tabbar { box-shadow: 0 -3px 15px rgb(32 45 57 / 4%); }
.volver-arriba {
  position:fixed; z-index:5; inset-inline-end:max(12px,env(safe-area-inset-right));
  bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--alto-navegacion,0px));
  width:44px; height:44px; padding:0; display:grid; place-items:center; flex:none;
  border:1px solid #91aabc; border-radius:50%; background:#fff; color:#245478;
  font:700 1.35rem/1 var(--sans); box-shadow:0 2px 7px rgb(24 52 73 / 14%); cursor:pointer;
}
.volver-arriba:hover { background:#eaf2f8; }
.volver-arriba[hidden] { display:none; }
.volver-arriba.subida-interna {
  position:static; margin:.25rem .4rem .25rem auto; align-self:end;
}
.cal-pie-etapas:has(.subida-interna:not([hidden])) { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
@media print { .volver-arriba { display:none !important; } }
@media screen {
  .barras-de-lectura .site-head {
    position: sticky; top: 0; z-index: 4; background: white;
    transition: transform .16s ease-out;
  }
  .barras-de-lectura #tabbar {
    clip-path: inset(0 0 0); transition: clip-path .16s ease-out;
  }
  .barras-replegadas .site-head { transform: translateY(-102%); pointer-events: none; }
  .barras-replegadas #tabbar { clip-path: inset(100% 0 0); pointer-events: none; }
  html.barras-de-lectura { scroll-padding-top: 5.25rem; }
  html.barras-replegadas { scroll-padding-top: .5rem; }
}
@media (prefers-reduced-motion:reduce) {
  .barras-de-lectura :is(.site-head,#tabbar) { transition: none; }
}
.nav-item:hover, .nav-item:focus-visible { color: var(--ruta-oscuro); background: var(--ruta-panel); }
.nav-item[aria-current=page]:hover { background: var(--ruta-activo); }

/* Controles y mensajes compartidos. */
:focus-visible { outline-color: var(--ruta-azul); }
.btn.primary:hover { background: var(--ruta-oscuro); }
.workspace :is(.field input, .field select, .search-input, .sort-input, .question-report textarea) {
  color: var(--ink);
  border: 1px solid var(--ruta-control);
  border-radius: 9px;
}
.workspace :is(.field input, .field select, .search-input, .sort-input, .question-report textarea):focus {
  border-color: var(--ruta-azul);
}
.workspace .btn.secondary, .head-person, .workspace .mark, dialog .btn.secondary {
  border-color: var(--ruta-control);
}
.workspace .chip[aria-pressed=true] { background: var(--ruta-activo); border-color: var(--ruta-control); }
.workspace :is(.notice, .feedback):not(.error), .workspace .empty {
  background: var(--ruta-panel);
  border-color: var(--ruta-linea);
}
dialog::backdrop, .editor-foto::backdrop, dialog.prep-exit::backdrop { background: rgb(24 42 58 / 58%); }

/* Inicio y acceso a las secciones. */
.dashboard-top .profile-panel { background: var(--card); border-color: var(--line); }
.portrait { background: var(--ruta-activo); color: var(--ruta-oscuro); }
.workspace .continue-panel {
  background: var(--ruta-panel);
  border-color: var(--ruta-panel);
  padding: clamp(1.15rem, 3vw, 2rem);
}
.continue-panel .eyebrow { font-size: .75rem; }
.workspace .continue-panel h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.workspace .continue-panel .btn { align-self: center; }
.workspace .member-entry, .workspace .reader-entry {
  background: var(--card);
  border-color: var(--line);
}
.workspace > .workspace-heading { margin-block-start: clamp(1.5rem, 4vw, 2.85rem); }
.workspace .section-top { margin-top: clamp(1.6rem, 3vw, 2.25rem); }
.workspace .shortcut:hover { background: var(--ruta-panel); border-color: var(--ruta-control); }
.workspace .kind-button:not(.calc-access,.upcoming) {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}
.workspace .kind-button:not(.calc-access,.upcoming) .icon-tile {
  color: var(--tint-ink);
  background: var(--tint);
}
.workspace .kind-button:not(.calc-access,.upcoming) .arrow,
.workspace .kind-button:not(.calc-access,.upcoming) small { color: var(--muted); }
.workspace .kind-button:not(.calc-access,.upcoming):hover { background: var(--ruta-panel); }

/* Membresía, documentos y oferta. */
.legal-brief, .legal-profile-entry, .legal-record, .legal-document,
.offer-plan, .reader-viewport, .random-box {
  background: var(--ruta-panel);
  border-color: var(--ruta-linea);
}
.legal-brief { border-left-color: var(--ruta-azul); }
.legal-document:hover { background: var(--ruta-activo); }
.offer-page .offer-plan { background: var(--card); }
.offer-page .offer-plan.annual { background: var(--ruta-panel); border-color: var(--ruta-linea); }
.offer-status { color: var(--ruta-oscuro); background: var(--ruta-activo); }

/* Colecciones, lectura y progreso. Los anillos y el detalle de aciertos
   mantienen el color específico del material también dentro del nuevo tema. */
.workspace .collection-scope { background: var(--ruta-panel); }
.workspace .collection-scope .chip[aria-pressed=true] { background: var(--ruta-azul); color: #fff; }
.workspace .mistakes-shortcut { border-color: var(--line); }
.workspace .mistakes-shortcut:hover { background: var(--ruta-activo); }
.workspace .study-metric { color: var(--ink); border-color: var(--line); }
.workspace button.study-metric:hover { background: var(--ruta-panel); border-color: var(--study-color); }
.workspace .study-metric small { color: var(--muted); }
.workspace .study-metric.unavailable { background: var(--ruta-panel); }
.workspace .study-metric .ring-track { stroke: var(--ruta-linea); }
.workspace .meter, .workspace .meter::-webkit-progress-bar { background: var(--ruta-linea); }
.ceaa-pdf-page { border-color: var(--line); }

/* La hoja de preparación se carga bajo demanda. Su puntuación final verde,
   el acceso naranja y los factores de colores distinguen funciones de cálculo. */
.workspace .prep-page, dialog.prep-exit { color: var(--ink); }
.workspace .prep-process-choice, .workspace .prep-calculo > h2,
.workspace .prep-panel:not(.prep-factor,.prep-scenario,[class*="prep-tone-"]) {
  color: var(--ink);
  border-color: var(--line);
  background: var(--ruta-panel);
}
.workspace .prep-factor-head small { color: var(--muted); }
.workspace .prep-panel a, .workspace .prep-btn:not(.prep-primary), .prep-exit .prep-btn:not(.prep-primary) {
  color: var(--ruta-azul);
}
.workspace .prep-btn:not(.prep-primary), .prep-exit .prep-btn:not(.prep-primary),
.workspace .prep-label :is(input,select), dialog.prep-exit { border-color: var(--ruta-control); }
.workspace .prep-check input { accent-color: var(--ruta-azul); }

/* Datos administrativos. */
.workspace :is(.admin-metrics > div, .admin-table td, .admin-table th) { border-color: var(--line); }
.workspace .admin-metrics dt { color: var(--muted); }
.workspace .admin-table th, .workspace .admin-secret { background: var(--ruta-panel); color: var(--ink); }

@media (max-width: 480px) {
  body:has(#workspace:not([hidden])) .head-in { min-height: 66px; }
}