/* =============================================================================
   Sistema público de MiOposición: primitivas visuales compartidas
   -----------------------------------------------------------------------------
   Capa común de las páginas públicas de exploración: /organismos/ y sus
   directorios, /territorios/, /empleo-publico/ y los hubs de comunidad y
   provincia. Aquí solo vive lo que es GENERAL del producto (superficies,
   cabecera, marcas, panel de cifras, navegación contextual, tarjetas de ruta,
   de territorio y de resumen, chips, barra de filtros). Lo propio de un
   dominio vive en su hoja: organismos-components.css (tarjeta de organismo,
   tarjeta de tipo, navegación del directorio de organismos).

   Prefijo `mo-` = MiOposición (no «organismos»): no colisiona con las clases
   heredadas de app-premium.css. Esta hoja es autocontenida: no depende de
   clases de otros dominios (.organism-*), solo de los tokens globales de
   app-premium.css (--text, --muted, --border, --primary, --shadow-sm...).

   Índice: TOKENS · SURFACES · HERO · MARKS · STATS · NAVIGATION · CARDS ·
           FILTERS · RESPONSIVE
   ========================================================================== */

/* ============================== TOKENS =================================== */
:root {
  /* Paleta de tonos (700: texto AA sobre blanco y sobre su propio tinte). */
  --tone-navy: #1e3a8a;
  --tone-blue: #1a56db;
  --tone-cyan: #0e7490;
  --tone-green: #047857;
  --tone-violet: #6d28d9;
  --tone-amber: #b45309;
  --tone-red: #be123c;
  --tone-slate: #475569;

  /* Tipos de contenido (mismos colores que las fichas: organism-metric--*).
     `-text` = tono AA para texto; el base, para puntos, iconos y bordes. */
  --metric-oposiciones: #1e63ff;
  --metric-oposiciones-text: #1550c2;
  --metric-bolsas: #079d72;
  --metric-bolsas-text: #057a58;
  --metric-examenes: #7c3aed;
  --metric-examenes-text: #6d28d9;
  --metric-oep: #ea6c0b;
  --metric-oep-text: #a8480a;
  --metric-organismos: #64748b;
  --metric-organismos-text: #475569;
  /* Clasificación (tipos de plaza / tipos de organismo): ámbar, distinto del
     naranja de las ofertas públicas. */
  --metric-tipos: #b45309;
  --metric-tipos-text: #92400e;

  /* Superficies. */
  --mo-surface: #fff;
  --mo-surface-tinted: linear-gradient(145deg, rgba(30, 99, 255, .045), #fff 42%);
  --mo-sheet-border: rgba(30, 99, 255, .12);
  --mo-card-border: rgba(15, 23, 42, .09);
  --mo-card-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  --mo-card-shadow-hover: 0 10px 24px rgba(2, 17, 48, .08);
  --mo-panel-shadow: 0 12px 30px rgba(2, 17, 48, .05);

  --mo-link: #1747c8;
  --mo-focus: 0 0 0 3px #fff, 0 0 0 6px rgba(30, 99, 255, .55);
  /* Ritmo vertical: entre secciones de la pila (hero -> hojas -> cierre). */
  --mo-section-gap: 28px;
  /* Medidas de prosa: normal (texto de apoyo) y ancha (explicaciones y
     respuestas de FAQ dentro de hojas anchas). Nunca justificado. */
  --mo-measure: 75ch;
  --mo-measure-wide: 100ch;
}

/* Tono (tipo de organismo, hub, contenido): una sola variable --tone. */
.mo-tone--navy { --tone: var(--tone-navy); }
.mo-tone--blue { --tone: var(--tone-blue); }
.mo-tone--cyan { --tone: var(--tone-cyan); }
.mo-tone--green { --tone: var(--tone-green); }
.mo-tone--violet { --tone: var(--tone-violet); }
.mo-tone--amber { --tone: var(--tone-amber); }
.mo-tone--red { --tone: var(--tone-red); }
.mo-tone--slate { --tone: var(--tone-slate); }
.mo-tone--oposiciones { --tone: var(--metric-oposiciones-text); }
.mo-tone--bolsas { --tone: var(--metric-bolsas-text); }
.mo-tone--examenes { --tone: var(--metric-examenes-text); }
.mo-tone--oep { --tone: var(--metric-oep-text); }

/* Icono (sprite inline, core/includes/mo_icon.html) + icon box. */
.mo-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Mismo tratamiento que .organism-metric__icon de la ficha. */
.mo-icon-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 11px;
  background: color-mix(in srgb, currentColor 9%, white);
  color: var(--tone, var(--tone-blue));
}

.mo-icon-box .mo-icon { width: 21px; height: 21px; }
.mo-icon-box--sm { width: 34px; height: 34px; border-radius: 10px; }
.mo-icon-box--sm .mo-icon { width: 19px; height: 19px; }
.mo-icon-box--lg { width: 52px; height: 52px; border-radius: 14px; }
.mo-icon-box--lg .mo-icon { width: 26px; height: 26px; }

.mo-eyebrow {
  margin: 0;
  color: var(--primary, #1e63ff);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Punto de tono (opciones de filtro, leyendas). */
.mo-tone-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--tone, #94a3b8);
  vertical-align: 1px;
}

/* ====== FICHA DE OPOSICIÓN / BOLSA (contenido) ====== */
/* Antes oposicion-detail-2026.css; ahora parte del sistema común con prefijo mo-. */
/* Public Oposición / Bolsa detail page. Scoped to `.mo-ficha-*` so it
   never leaks into the process listings or the plaza detail page (which keeps
   using the older `.oposition-*` rules in app-premium.css). Shares the visual
   language of organism-detail-2026.css and the .exam-detail-* blocks:
   same tokens, same escudo container, same card rhythm.

   Composition (3rd pass, 2026-09-13): the page reads as an editorial ficha,
   not a dashboard. There is no page-long sidebar -- Seguimiento/Organismo is
   an auxiliary column only next to Datos, and every section below that goes
   back to using the full page width. The hero is one surface (identity +
   estado share a border/shadow), not two floating pieces. */

/* One surface: identity+CTAs on the flexible track, estado on a stable
   right rail -- both inside the same bordered/shadowed card so the hero
   reads as a single composition instead of "content block + floating
   status widget". minmax(300px,340px) keeps the rail legible without
   starving long H1s of width; the collapse point is proven at 960px (see
   the responsive block below). */

.mo-ficha-follow-btn.is-following {
  color: #087a5a;
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}

/* Part of the same card as identity: a vertical divider + a whisper of tone
   color is enough to read as "the other half of one composition" instead of
   a second card. Tone matches the state pill's semantics (open=green,
   closed=neutral, everything else=primary blue). */

/* Staff toolbar: a discreet secondary strip outside the public hero card,
   so it never affects that card's height or is mistaken for public UI
   (§12). */
.mo-ficha-staff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.mo-ficha-staff > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ---------- Page rhythm ---------- */
/* No more page-long main/sidebar split (§4): the page is a vertical stack of
   full-width sections, and a handful of them pair up into their own 2-column
   row. Each row is scoped to its own content, so there is never an empty
   column running past where the auxiliary content ends (§2). */
.mo-ficha-page {
  display: grid;
  gap: 30px;
  margin: 28px 0 40px;
}

.mo-ficha-row {
  display: grid;
  gap: 28px;
  align-items: start;
}

.mo-ficha-row--top {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
}

.mo-ficha-row--consulta {
  grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
}

/* Up to 3 independent cards now (Cronología / Sobre esta convocatoria / OEP,
   each conditional) -- auto-fit instead of a fixed 2-column split so any
   count from 1 to 3 lays out cleanly at every width (§7-§10). */
.mo-ficha-row--editorial {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* A row with only one section (e.g. Requisitos absent, or only Cronología)
   lets that section take the full row instead of hugging one column. */
.mo-ficha-row--consulta > *:only-child,
.mo-ficha-row--editorial > *:only-child {
  grid-column: 1 / -1;
}

/* ---------- Cards ---------- */
/* No box-shadow at rest -- the hero already carries the page's one
   "elevated" surface. Everything else reads as "delimited content to
   consult" via border + fill, same reference as organism-detail-2026.css
   (.organism-latest-card). */
.mo-ficha-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.mo-ficha-card > h2 {
  margin: 0 0 14px;
  color: var(--text);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}

.mo-ficha-card__intro {
  margin: -6px 0 14px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
}

.mo-ficha-muted {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

/* ---------- Shared label/value field list ---------- */
/* Used by "Datos de la convocatoria" (per group) and "Requisitos": plain
   label + value rows, cero mini-cards. Alignment comes from CSS Grid, not
   from a bordered cell per field. */
.mo-ficha-fieldlist {
  display: grid;
  /* Capped at 42% (not `auto`) so a long label -- "Publicación en boletín
     autonómico o provincial" -- wraps onto its own line instead of eating
     the value column's width down to nothing inside the narrower halves of
     the 2x2 datos grid. */
  grid-template-columns: minmax(84px, 42%) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 11px;
  margin: 0;
}

.mo-ficha-fieldlist dt {
  grid-column: 1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.35;
  padding-top: 2px;
}

.mo-ficha-fieldlist dd {
  grid-column: 2;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.mo-ficha-fieldlist dt.mo-ficha-fieldlist__wide,
.mo-ficha-fieldlist dd.mo-ficha-fieldlist__wide {
  grid-column: 1 / -1;
}

.mo-ficha-fieldlist dd.mo-ficha-fieldlist__wide {
  margin-top: -3px;
}

.mo-ficha-fieldlist--extra {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}

/* Data-value links: a link because the value happens to point somewhere,
   not a call to action -- dark text with an underline (so the link
   affordance never depends on color alone) that only turns primary blue on
   hover/focus (§28). */
.mo-ficha-fieldlist dd a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}

.mo-ficha-fieldlist dd a:hover,
.mo-ficha-fieldlist dd a:focus-visible {
  color: var(--primary);
  text-decoration-color: currentColor;
}

.mo-ficha-data__longtext > summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 650;
  font-size: 14px;
}

.mo-ficha-data__longtext > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.mo-ficha-data__longtext[open] > summary {
  margin-bottom: 6px;
}

/* ---------- Datos de la convocatoria ---------- */
/* One outer card, one internal 2x2 grid of labelled groups (Proceso/Acceso
   over Administración/Fechas), a single vertical divider between the two
   columns and a single horizontal divider between the two row-groups -- not
   four bordered mini-cards (§13). The divider row spans both columns so the
   horizontal rule stays a straight line even when Proceso and Acceso have a
   different number of fields (grid items stretch to the row's full height,
   so the vertical border on the right column also spans correctly). */
.mo-ficha-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "proceso acceso"
    "divider divider"
    "administracion fechas";
  column-gap: 32px;
}

.mo-ficha-data-grid__divider {
  grid-area: divider;
  height: 1px;
  background: var(--border-light);
  margin: 22px 0;
}

.mo-ficha-data-grid__group[data-group="proceso"] { grid-area: proceso; }
.mo-ficha-data-grid__group[data-group="acceso"] { grid-area: acceso; }
.mo-ficha-data-grid__group[data-group="administracion"] { grid-area: administracion; }
.mo-ficha-data-grid__group[data-group="fechas"] { grid-area: fechas; }

.mo-ficha-data-grid__group[data-group="acceso"],
.mo-ficha-data-grid__group[data-group="fechas"] {
  padding-left: 32px;
  border-left: 1px solid var(--border-light);
}

.mo-ficha-data__group {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Documentos ---------- */
/* A flat list with a divider between rows -- not a card per document
   (§18). Only the primary/prioritary document gets a soft highlight; every
   other row is a plain line (§19). */
.mo-ficha-doclist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-ficha-doc-row {
  border-bottom: 1px solid var(--border-light);
}

.mo-ficha-doc-row:last-child {
  border-bottom: none;
}

.mo-ficha-doc-row__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 2px;
  text-decoration: none;
  color: inherit;
}

.mo-ficha-doc-row.is-primary {
  background: rgba(30, 99, 255, 0.045);
  margin: 0 -10px;
  border-radius: 10px;
  border-bottom-color: transparent;
}

.mo-ficha-doc-row.is-primary .mo-ficha-doc-row__link {
  padding: 13px 10px;
}

.mo-ficha-doc-row__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(30, 99, 255, 0.08);
  color: var(--primary);
  flex: 0 0 auto;
}

.mo-ficha-doc-row__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mo-ficha-doc-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mo-ficha-doc-row__body strong {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  overflow-wrap: anywhere;
}

.mo-ficha-doc-row__body small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.mo-ficha-doc-row__action {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.mo-ficha-details {
  margin-top: 14px;
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
}

.mo-ficha-details > summary {
  cursor: pointer;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  list-style: revert;
}

.mo-ficha-details > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.mo-ficha-linklist {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.mo-ficha-linklist a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.mo-ficha-linklist a:hover {
  text-decoration: underline;
}

.mo-ficha-linklist small {
  color: var(--muted);
  font-weight: 500;
}

/* ---------- Requisitos de acceso ---------- */
/* Neutral stone accent -- a local, editorial treatment of this one section,
   not a new semantic color category (32° vs the OEP orange's 26° hue was
   too close; stone reads as neutral). One surface, no inner card (§17). */
.mo-ficha-req {
  border-color: rgba(120, 113, 108, 0.28);
  background: linear-gradient(135deg, rgba(120, 113, 108, 0.06), transparent);
}

.mo-ficha-req__titulacion {
  white-space: pre-line;
}

.mo-ficha-req__note {
  margin-top: 14px;
}

/* ---------- Temario oficial ---------- */
/* Capped reading width so a full-width card (there is no sidebar to
   constrain it anymore) doesn't stretch topic lines edge-to-edge on wide
   desktops (§20-21). */
.mo-ficha-temario__body {
  max-width: 1000px;
}

.mo-ficha-temario__bloque + .mo-ficha-temario__bloque {
  margin-top: 20px;
}

.mo-ficha-temario__bloque-title {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mo-ficha-temario__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.mo-ficha-temario__list + .mo-ficha-details .mo-ficha-temario__list {
  margin-top: 14px;
}

.mo-ficha-temario__item {
  padding-left: 0;
}

.mo-ficha-temario__item + .mo-ficha-temario__item {
  border-top: 1px solid var(--border-light);
  padding-top: 14px;
}

.mo-ficha-temario__text {
  margin: 0;
  display: grid;
  grid-template-columns: 2.8em minmax(0, 1fr);
  gap: 0 4px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

.mo-ficha-temario__num {
  font-weight: 700;
  color: var(--text-secondary);
}

.mo-ficha-temario__text-body {
  min-width: 0;
}

.mo-ficha-temario__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 13px;
}

.mo-ficha-temario__link-label {
  color: var(--muted);
  font-weight: 650;
}

.mo-ficha-chip {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg, #f6f8fc);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
}

.mo-ficha-temario__count {
  color: var(--muted);
  font-weight: 500;
}

/* ---------- Editorial sections (cardless) ---------- */
/* Narrative/secondary sections (Cronología, Sobre esta convocatoria, the
   empty Exámenes state, Relacionados) sit directly on the page background
   instead of inside another white card -- a divider rule above the heading
   gives them rhythm without adding another identical box (§22, §26). */
.mo-ficha-editorial {
  padding: 0;
}

.mo-ficha-editorial__heading {
  margin: 0 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}

/* Inside a 2-column editorial row, only the left section needs its own
   top divider from whatever precedes the row -- the right section already
   reads as paired with it via the shared row and the vertical gap. Both
   still get the divider for a consistent top edge across the row. */

.mo-ficha-editorial--compact {
  margin-top: -4px;
}

.mo-ficha-editorial--compact .mo-ficha-editorial__heading {
  margin-bottom: 8px;
  padding-top: 20px;
  font-size: 16px;
}

.mo-ficha-editorial--compact__empty {
  margin: 0;
}

.mo-ficha-editorial--compact__empty a {
  margin-left: 6px;
  color: var(--primary);
  font-weight: 650;
  text-decoration: none;
}

.mo-ficha-editorial--compact__empty a:hover {
  text-decoration: underline;
}

/* ---------- Cronología ---------- */
.mo-ficha-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-ficha-timeline__item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 18px;
}

.mo-ficha-timeline__item:last-child {
  padding-bottom: 0;
}

.mo-ficha-timeline__date {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-top: 1px;
}

.mo-ficha-timeline__body {
  position: relative;
  min-width: 0;
  padding: 0 0 4px 18px;
  border-left: 2px solid var(--border);
}

.mo-ficha-timeline__item:last-child .mo-ficha-timeline__body {
  border-left-color: transparent;
}

.mo-ficha-timeline__marker {
  position: absolute;
  left: -8px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--card);
}

.mo-ficha-timeline__head {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.mo-ficha-timeline__kind {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}

.mo-ficha-timeline__desc {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.mo-ficha-timeline__link {
  display: inline-block;
  margin-top: 8px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mo-ficha-timeline__link:hover {
  text-decoration: underline;
}

/* ---------- Sobre esta convocatoria (+ Oferta Pública de Empleo) ---------- */
.mo-ficha-about {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
}

.mo-ficha-about :first-child {
  margin-top: 0;
}

.mo-ficha-about :last-child {
  margin-bottom: 0;
}

.mo-ficha-oep__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-ficha-oep__list > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.mo-ficha-oep__list > li:last-child {
  border-bottom: none;
}

.mo-ficha-oep__list strong {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
}

.mo-ficha-oep__list small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.mo-ficha-oep__link {
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mo-ficha-oep__link:hover {
  text-decoration: underline;
}

/* ---------- Exámenes ---------- */
/* If there's a list, a light card holds flat internal rows (exams are
   actionable content, so they keep a delimited surface) -- but each exam is
   a row with a divider, not another bordered box (§24). */
.mo-ficha-examlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Procesos relacionados ---------- */
/* Pure-CSS responsive grid -- no backend branching on item count (§25). One
   item fills the width, two sit side by side once there's room, and so on. */
.mo-ficha-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Zero related processes: a single discreet line, never a section/H2 (§15). */
.mo-ficha-related__fallback {
  margin: -6px 0 0;
}

.mo-ficha-related__fallback a {
  color: var(--primary);
  font-weight: 650;
  text-decoration: none;
}

.mo-ficha-related__fallback a:hover {
  text-decoration: underline;
}

/* ---------- Row auxiliar: Seguimiento + Organismo ---------- */
/* The only lateral auxiliary block left in the page, scoped to the top row
   next to Datos -- not a page-long sidebar (§4, §15). Sticky within that
   row only: position:sticky can't escape its own containing block, so it
   naturally stops being sticky once the row ends. */
.mo-ficha-sidegroup {
  display: grid;
  position: sticky;
  top: 88px;
}

.mo-ficha-sidegroup__block--divider {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}

.mo-ficha-side > h2 {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 16px;
}

.mo-ficha-side__link {
  display: block;
  margin-top: 10px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.mo-ficha-side__link:hover {
  text-decoration: underline;
}

.mo-ficha-follow p {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.mo-ficha-follow form {
  margin: 0;
}

.mo-ficha-orgcard__body {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 650;
}

.mo-ficha-orgcard__logo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 5px;
}

.mo-ficha-orgcard__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mo-ficha-orgcard__logo img + svg {
  display: none;
}

.mo-ficha-orgcard__logo svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mo-ficha-orgcard .mo-ficha-side__link:first-of-type {
  margin-top: 14px;
}

/* ---------- Responsive ---------- */
/* Every 2-column row in the page (hero, datos+auxiliar, requisitos+
   documentación, cronología+sobre) collapses at the same 960px breakpoint,
   proven against real short and long H1s in the previous pass and re-
   checked here for the requisitos/documentación 38%/62% split, which is
   narrower and would cramp earlier if it didn't share the same point. */
@media (max-width: 960px) {
  

  

  .mo-ficha-row--top,
  .mo-ficha-row--consulta,
  .mo-ficha-row--editorial {
    grid-template-columns: 1fr;
  }

  .mo-ficha-sidegroup {
    position: static;
  }
}

@media (max-width: 640px) {
  /* The hero was consuming most of the first mobile viewport on its own
     (measured ~525px of a 390x844 screen -- Situación actual wasn't even
     fully visible without scrolling). Tighter spacing throughout, not
     smaller tap targets: every control keeps its full-size hit area. */

  

  

  

  

  

  

  

  

  

  

  

  /* Only the official action stays full-width/dominant. Seguir is
     secondary in priority so it shouldn't match it stretch-for-stretch --
     auto width keeps it visually and semantically lighter. */

  

  .mo-ficha-card {
    padding: 18px 16px;
  }

  .mo-ficha-fieldlist {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .mo-ficha-fieldlist dt,
  .mo-ficha-fieldlist dd {
    grid-column: 1 / -1;
  }

  .mo-ficha-fieldlist dd {
    margin-top: -6px;
  }

  /* The 2x2 datos grid stacks into the four groups in their natural order;
     every group gets the same top divider instead of only the bottom row,
     since there are no more columns to separate with a vertical rule. */
  .mo-ficha-data-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "proceso"
      "acceso"
      "administracion"
      "fechas";
  }

  .mo-ficha-data-grid__divider {
    display: none;
  }

  .mo-ficha-data-grid__group[data-group="acceso"],
  .mo-ficha-data-grid__group[data-group="fechas"] {
    padding-left: 0;
    border-left: 0;
  }

  .mo-ficha-data-grid__group[data-group="acceso"],
  .mo-ficha-data-grid__group[data-group="administracion"],
  .mo-ficha-data-grid__group[data-group="fechas"] {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
  }

  .mo-ficha-editorial__heading {
    padding-top: 20px;
    font-size: 17px;
  }

  .mo-ficha-doc-row__link {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .mo-ficha-doc-row__action {
    grid-column: 2;
  }

  .mo-ficha-timeline__item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .mo-ficha-timeline__body {
    border-left: 0;
    padding-left: 0;
  }

  .mo-ficha-timeline__marker {
    display: none;
  }
}

/* ====== FICHA DE EXAMEN (contenido y cuestionario) ====== */
/* Antes exam-detail-2026.css; ahora parte del sistema común con prefijo mo-. */
/* Ficha pública de detalle de examen (/examenes/<slug>/).
   Mismo lenguaje visual que la ficha de organismo (organism-detail-2026.css)
   -- proporciones, densidad, hero, identidad -- pero SIN cargar ni copiar ese
   archivo: reutiliza los componentes globales (card, modern-card, pill, btn,
   public-eyebrow, breadcrumbs) y los tokens globales, y sólo define aquí las
   clases propias de esta página, con el prefijo `mo-examen-`. */

/* ---------- LAYOUT PRINCIPAL ---------- */
.mo-examen-main {
  display: grid;
  gap: 18px;
  margin-bottom: 32px;
}

.mo-examen-content,
.mo-examen-attempts,
.mo-examen-run,
.mo-examen-staff {
  padding: 24px;
}

.mo-examen-content__head,
.mo-examen-section__head,
.mo-examen-more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  margin-bottom: 16px;
}

.mo-examen-content h2,
.mo-examen-attempts h2,
.mo-examen-run h2,
.mo-examen-more h2,
.mo-examen-staff h2 {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--text);
}

.mo-examen-content__summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---------- CONTENIDO DEL EXAMEN (materias) ---------- */
.mo-examen-materias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.mo-examen-materia__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 14px;
}

.mo-examen-materia__name {
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.mo-examen-materia__count {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mo-examen-materia__track {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-light);
  overflow: hidden;
}

.mo-examen-materia__bar {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #1f7db5);
}

.mo-examen-materia--none .mo-examen-materia__name {
  color: var(--muted);
}

.mo-examen-section__head a {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.mo-examen-section__head a:hover {
  text-decoration: underline;
}

/* ---------- ÚLTIMOS INTENTOS (autenticado) ---------- */
.mo-examen-attempts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.mo-examen-attempt {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.mo-examen-attempt__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
}

.mo-examen-attempt dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  margin: 10px 0;
}

.mo-examen-attempt dt {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mo-examen-attempt dd {
  margin: 0;
  font-weight: 800;
}

/* ---------- REALIZA EL EXAMEN ---------- */
.mo-examen-correccion {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft, rgba(15, 23, 42, 0.02));
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mo-examen-correccion strong {
  color: var(--text);
}

.mo-examen-run__lead {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.mo-examen-run__lead a {
  color: var(--primary);
}

.mo-examen-run__empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
}

.mo-examen-run__empty p {
  margin: 0 0 12px;
  color: var(--text-secondary);
}

.mo-examen-run__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.mo-examen-run__actions .btn {
  min-height: 44px;
}

.mo-examen-shuffle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.mo-examen-shuffle input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.mo-examen-shuffle span {
  display: block;
}

.mo-examen-shuffle small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

/* ---------- PROGRESO (anónimo) ---------- */
.mo-examen-progress {
  margin: 0 0 18px;
}

.mo-examen-progress__text {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
}

.mo-examen-progress__track {
  height: 8px;
  border-radius: 999px;
  background: var(--border-light);
  overflow: hidden;
}

.mo-examen-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #1f7db5);
  transition: width 0.2s ease;
}

.mo-examen-progress__hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

/* ---------- RESULTADO (corrección anónima) ---------- */
.mo-examen-result {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

.mo-examen-result > div {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}

.mo-examen-result strong {
  display: block;
  color: var(--primary);
  font-size: 1.5rem;
  line-height: 1;
}

.mo-examen-result span {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

/* ---------- PREGUNTAS ---------- */
.mo-examen-form {
  display: grid;
  gap: 14px;
}

.mo-examen-q {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.mo-examen-q__legend {
  display: block;
  width: 100%;
  padding: 0;
}

.mo-examen-q__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.mo-examen-q__num {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mo-examen-q__tema {
  max-width: 100%;
  padding: 3px 10px;
  font-size: 0.72rem;
  white-space: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mo-examen-q__text {
  display: block;
  color: var(--text);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.5;
}

.mo-examen-q__options {
  counter-reset: xdetopt;
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.mo-examen-opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mo-examen-opt:hover {
  border-color: rgba(30, 99, 255, 0.3);
  background: rgba(30, 99, 255, 0.04);
}

.mo-examen-opt input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--primary);
}

.mo-examen-opt__mark {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.mo-examen-opt__mark::after {
  counter-increment: xdetopt;
  content: counter(xdetopt, upper-alpha) ")";
}

.mo-examen-opt__text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mo-examen-opt__flag {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.78rem;
  font-weight: 800;
}

.mo-examen-opt__flag--ok {
  color: #047857;
}

.mo-examen-opt__flag--ko {
  color: #b91c1c;
}

.mo-examen-opt.is-correct {
  border-color: rgba(4, 120, 87, 0.5);
  background: rgba(16, 185, 129, 0.08);
}

.mo-examen-opt.is-wrong {
  border-color: rgba(185, 28, 28, 0.5);
  background: rgba(239, 68, 68, 0.07);
}

/* Foco visible, teclado. El label es la superficie clicable; el foco del
   input real se refleja en todo el recuadro. */
.mo-examen-opt:focus-within {
  outline: 3px solid rgba(30, 99, 255, 0.4);
  outline-offset: 2px;
}

.mo-examen-form__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.mo-examen-form__footer .btn {
  min-height: 44px;
}

/* ---------- MÁS EXÁMENES ---------- */
.mo-examen-more {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.mo-examen-more__head a {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.mo-examen-more__head a:hover {
  text-decoration: underline;
}

.mo-examen-more__list {
  display: grid;
  gap: 10px;
}

/* ---------- STAFF ---------- */
.mo-examen-staff__list {
  padding-left: 20px;
  display: grid;
  gap: 12px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
  .mo-examen-result {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  

  

  .mo-examen-content,
  .mo-examen-attempts,
  .mo-examen-run,
  .mo-examen-more,
  .mo-examen-staff {
    padding: 18px;
  }

  .mo-examen-q {
    padding: 14px;
  }

  .mo-examen-run__actions .btn,
.mo-examen-form__footer .btn {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   Preguntas anuladas por el tribunal (contenido de transparencia)
   ------------------------------------------------------------------------- */
.mo-examen-annulled {
  padding: 24px;
}

.mo-examen-annulled h2 {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--text);
}

.mo-examen-annulled__intro {
  margin: 0 0 16px;
  color: var(--muted, #6b7280);
  font-size: 0.95rem;
}

.mo-examen-annulled__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.mo-examen-annulled__item {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 16px 18px;
}

.mo-examen-annulled__q {
  margin: 0;
}

.mo-examen-annulled__temas {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mo-examen-annulled__options {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.mo-examen-annulled__opt {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
}

.mo-examen-annulled__opt.is-provisional {
  font-weight: 600;
  color: var(--text);
}

.mo-examen-annulled__letter {
  flex: 0 0 auto;
  color: var(--muted, #6b7280);
}

.mo-examen-annulled__flag {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #92400e;
  background: #fef3c7;
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.mo-examen-annulled__reason {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--surface-muted, #f9fafb);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 0.92rem;
}

/* ============================== SURFACES ================================= */
/* Pila vertical de secciones de una página: un único ritmo entre bloques. */
.mo-stack { display: grid; gap: var(--mo-section-gap); margin-bottom: var(--mo-section-gap); }
.mo-stack > * { min-width: 0; margin-top: 0; margin-bottom: 0; }

/* Hoja de sección: superficie blanca (o tintada) con borde azul suave. */
.mo-sheet {
  min-width: 0;
  padding: 24px 28px 28px;
  scroll-margin-top: calc(var(--header-height, 72px) + 16px);
  background: var(--mo-surface);
  border: 1px solid var(--mo-sheet-border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

/* Section shell = hoja: cabecera de sección + la colección que introduce
   (rejilla de tarjetas) forman UNA superficie. Variantes: normal (blanca),
   --tinted (degradado suave) y «plain» (sin .mo-sheet: cabecera sobre el
   fondo de la página, p. ej. un bloque editorial suelto). */
.mo-sheet--tinted { background: var(--mo-surface-tinted); }

/* Cabecera de sección: icon box + eyebrow + H2 + intro (+ enlace lateral). */
.mo-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(30, 99, 255, .1);
}

.mo-section-head > .mo-icon-box {
  width: 44px;
  height: 44px;
  border-color: rgba(30, 99, 255, .13);
  border-radius: 13px;
  background: rgba(30, 99, 255, .1);
  color: var(--primary, #1e63ff);
}

/* El texto nunca se estrecha por el enlace lateral: si no caben, el enlace
   baja a su propia línea (alineado con el texto). */
.mo-section-head__text { flex: 1 1 0; min-width: min(200px, 100%); }

.mo-section-head .mo-section-head__title {
  margin: 2px 0 6px;
  color: var(--text, #0f172a);
  font-size: clamp(21px, 1rem + .6vw, 26px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.mo-section-head__intro {
  max-width: 68ch;
  margin: 0;
  color: var(--text-secondary, #3b4356);
  font-size: 15px;
  line-height: 1.55;
}

.mo-section-head__aside { flex: none; align-self: center; }

/* Variante sin filete (secciones cortas, p. ej. «Practicar»). */
.mo-section-head--flat { margin-bottom: 16px; padding-bottom: 0; border-bottom: 0; }

.mo-subheading {
  margin: 22px 0 12px;
  color: var(--text-secondary, #3b4356);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mo-subheading:first-child { margin-top: 0; }

/* Título de un bloque sin cabecera de sección completa (H2). */
.mo-block-title {
  margin: 0 0 14px;
  color: var(--text, #0f172a);
  font-size: clamp(19px, .9rem + .5vw, 22px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* Preguntas frecuentes: <details>/<summary> nativo (sin JS, contenido
   siempre en el HTML). */
.mo-faq details { border-top: 1px solid var(--border, #e2e8f0); }
.mo-faq details:last-of-type { border-bottom: 0; }

.mo-sheet.mo-faq { padding: 20px 24px 14px; }
.mo-faq .mo-section-head { margin-bottom: 8px; }

.mo-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 10px 2px;
  color: var(--text, #0f172a);
  font-size: 15.5px;
  font-weight: 750;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.mo-faq summary::-webkit-details-marker { display: none; }

.mo-faq summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-right: 2px solid var(--muted, #64748b);
  border-bottom: 2px solid var(--muted, #64748b);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.mo-faq details[open] > summary::after { transform: rotate(-135deg); }
.mo-faq summary:hover { color: var(--mo-link); }
.mo-faq summary:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--mo-focus); }

/* Respuestas breves: misma regla que .mo-prose--fill. */
.mo-faq details > p {
  max-width: 100%;
  margin: 0 2px 16px;
  color: var(--text-secondary, #3b4356);
  font-size: 15px;
  line-height: 1.6;
}

.mo-faq details > p a { color: var(--mo-link); font-weight: 700; }

/* Enlaces de cierre de página (vuelta en la jerarquía). */
.mo-more-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* Franja compacta (cierre «Seguir explorando»): etiqueta + píldoras. */
.mo-sheet--band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 20px;
  background: var(--mo-surface-tinted);
}

.mo-sheet--band .mo-subheading { margin: 0; }
.mo-filter-pill__arrow { display: inline-grid; margin-left: 2px; color: var(--muted, #64748b); }
.mo-filter-pill__arrow .mo-icon { width: 14px; height: 14px; }
.mo-filter-pill:hover .mo-filter-pill__arrow { color: var(--mo-link); }


/* Prosa: alineada a la izquierda, nunca justificada.
   - .mo-prose: texto de apoyo (--mo-measure, ~75ch).
   - .mo-prose--wide: prosa editorial larga dentro de hojas anchas
     (--mo-measure-wide): limitar la línea sí mejora la lectura.
   - .mo-prose--fill: prosa BREVE (2-4 líneas) en una superficie ancha
     (cobertura territorial, respuestas de FAQ): ocupa todo el ancho de su
     contenedor. Nunca para heros, intros de cabecera ni artículos largos. */
.mo-prose { max-width: var(--mo-measure); margin: 0; color: var(--text-secondary, #3b4356); font-size: 15px; line-height: 1.65; text-align: left; }
.mo-prose + .mo-prose { margin-top: 12px; }
.mo-prose--wide { max-width: var(--mo-measure-wide); }
.mo-prose--fill { max-width: 100%; }
.mo-prose a { color: var(--mo-link); font-weight: 700; }

/* =============================== HERO ==================================== */
/* Cabecera común (directorios, territorios, empleo público): marca en el
   hueco del logo (96 px), badges, H1 de la escala común (--mo-title-lg,
   app-premium.css), acciones y panel de cifras a la derecha; zona inferior
   opcional de navegación contextual. Include: core/includes/mo_hero.html. */
.mo-hero {
  padding: 18px 0 calc(var(--mo-section-gap) - 8px);
  background:
    radial-gradient(circle at 70% 12%, rgba(30, 99, 255, .07), transparent 32%),
    linear-gradient(180deg, rgba(248, 250, 253, .98), rgba(239, 246, 255, .6));
  border-bottom: 1px solid rgba(30, 99, 255, .1);
}

.mo-hero__breadcrumbs { margin-bottom: 10px; }
.mo-hero__breadcrumbs .breadcrumbs__link { overflow-wrap: anywhere; }

.mo-hero__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 18px 36px;
  align-items: center;
  padding: 24px 30px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(2, 17, 48, .07);
}

/* Sin panel de cifras: el texto ocupa toda la tarjeta. */
.mo-hero__card--solo { grid-template-columns: minmax(0, 1fr); }

.mo-hero__identity {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.mo-hero__text { min-width: 0; }

.mo-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mo-badges span,
.mo-badges a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(30, 99, 255, .1);
  /* #145cff: el azul de marca un punto más oscuro para AA con 12 px. */
  color: #145cff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.mo-badges a:hover { background: rgba(30, 99, 255, .18); text-decoration: underline; text-underline-offset: 2px; }
.mo-badges a:focus-visible { outline: none; box-shadow: var(--mo-focus); }

.mo-hero .mo-hero__title {
  margin: 10px 0;
  color: var(--text, #0f172a);
  font-size: var(--mo-title-lg);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.mo-hero .mo-hero__lead {
  max-width: 640px;
  margin: 0;
  color: var(--text-secondary, #3b4356);
  font-size: 16px;
  line-height: 1.6;
}

.mo-hero .mo-hero__lead + .mo-hero__lead { margin-top: 8px; }

.mo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Enlaces secundarios discretos (p. ej. calendario del territorio). */
.mo-hero__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; }
.mo-hero__links .mo-link-arrow { font-size: 14px; }

/* Zona inferior de la tarjeta: navegación contextual (tipos de un hub de
   organismos, secciones de un territorio). Etiqueta en la misma línea que
   las píldoras en escritorio: la cabecera no crece una fila por la etiqueta. */
.mo-hero__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 2px -30px -24px;
  padding: 12px 30px 14px;
  border-top: 1px solid rgba(30, 99, 255, .1);
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, rgba(239, 246, 255, .7), rgba(248, 250, 253, .9));
}

.mo-hero__context { align-items: flex-start; }
.mo-hero__context .mo-subheading { flex: none; margin: 0; padding-top: 8px; }
.mo-hero__context > ul { flex: 1 1 0; gap: 6px; min-width: 0; }
.mo-hero__context .mo-filter-pill { min-height: 32px; padding: 3px 11px; font-size: 13px; gap: 7px; }

/* =============================== MARKS =================================== */
/* Marca de la cabecera: bandera/escudo del territorio en caja blanca
   (object-fit: contain, horizontal o vertical sin deformar) o icono del
   tipo/sección en icon box grande con su tono. Include: mo_mark.html. */
.mo-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 16px;
}

.mo-mark--simbolo {
  padding: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
}

.mo-mark--simbolo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mo-mark.mo-icon-box .mo-icon { width: 44px; height: 44px; stroke-width: 1.6; }

/* Identidad visual en tarjetas: mismo cuadrado para escudos verticales y
   logos/banderas horizontales (object-fit: contain). */
.mo-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  background: #fff;
}

.mo-logo img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* Fallback: icono con su tono (sin iniciales). */
.mo-logo .mo-icon-box {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.mo-logo .mo-icon-box .mo-icon { width: 26px; height: 26px; }
.mo-logo.has-img .mo-icon-box { display: none; }

/* =============================== STATS =================================== */
/* Panel de cifras: filas icon box + cifra + etiqueta (como la ficha de
   organismo). Include: mo_stat_panel.html. Las filas no son enlaces: la
   navegación va en las acciones y en la franja contextual. */
.mo-stat-aside { display: grid; align-self: center; min-width: 0; }

.mo-stat-panel {
  display: grid;
  align-self: start;
  padding: 6px 16px;
  border: 1px solid rgba(30, 99, 255, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--mo-panel-shadow);
}

.mo-stat-panel .mo-stat-panel__title {
  margin: 6px 0 0;
  color: var(--text-secondary, #3b4356);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.mo-stat-list { margin: 0; padding: 0; list-style: none; }
.mo-stat-list li + li { border-top: 1px solid var(--border, #e2e8f0); }

/* Separador entre grupos de cifras (p. ej. cobertura geográfica / actividad). */
.mo-stat-list li.mo-stat-list__group { margin-top: 6px; padding-top: 6px; border-top: 2px solid rgba(30, 99, 255, .14); }

/* Etiqueta de grupo: el separador pasa a la etiqueta y la primera fila del
   grupo ya no lleva filete propio. */
.mo-stat-list li.mo-stat-list__label {
  margin-top: 6px;
  padding: 10px 0 2px;
  border-top: 2px solid rgba(30, 99, 255, .14);
  color: var(--text-secondary, #3b4356);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mo-stat-list li.mo-stat-list__label + li.mo-stat-list__group { margin-top: 0; padding-top: 0; border-top: 0; }

.mo-stat {
  display: grid;
  grid-template-columns: 34px max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 5px 0;
  color: var(--text, #0f172a);
}

.mo-stat > .mo-icon-box { width: 34px; height: 34px; border-radius: 10px; color: var(--tone); }
.mo-stat > .mo-icon-box .mo-icon { width: 19px; height: 19px; }

.mo-stat__value {
  color: var(--text, #0f172a);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mo-stat__label {
  color: var(--text-secondary, #3b4356);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

/* Fila navegable: la FILA ENTERA es el enlace (icono + cifra + etiqueta +
   chevron). Realce discreto; el foco se ve siempre. Solo filas con destino
   (lo decide el presentador: `url` en el stat). */
.mo-stat--link {
  grid-template-columns: 34px max-content minmax(0, 1fr) 16px;
  margin: 0 -10px;
  padding: 5px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background-color .15s ease;
}

.mo-stat--link:hover { background: rgba(30, 99, 255, .05); }
.mo-stat--link:hover .mo-stat__label { color: var(--mo-link); }
.mo-stat--link:focus-visible { outline: none; box-shadow: var(--mo-focus); }
.mo-stat__chevron { display: grid; place-items: center; color: #94a3b8; }
.mo-stat__chevron .mo-icon { width: 16px; height: 16px; }
.mo-stat--link:hover .mo-stat__chevron { color: var(--mo-link); }

/* Cifra 0: dato visible para comparar, sin interacción ni énfasis. */
.mo-stat--empty .mo-stat__value,
.mo-stat--empty .mo-stat__label { color: var(--muted, #64748b); }
.mo-stat--empty > .mo-icon-box { opacity: .55; }

/* Tono del icono por métrica: organismos/territorio neutros; procesos con
   los colores de contenido de todo el sitio; plazo abierto en cian (estado). */
.mo-stat--organismos { --tone: var(--tone-slate); }
.mo-stat--oposiciones { --tone: var(--metric-oposiciones); }
.mo-stat--bolsas { --tone: var(--metric-bolsas); }
.mo-stat--examenes { --tone: var(--metric-examenes); }
.mo-stat--oep { --tone: var(--metric-oep); }
.mo-stat--territorio { --tone: var(--tone-slate); }
.mo-stat--plazo { --tone: var(--tone-cyan); }
.mo-stat--tipos { --tone: var(--metric-tipos); }
.mo-stat--familias { --tone: var(--tone-violet); }
.mo-stat--procesos { --tone: var(--metric-oposiciones); }
.mo-stat--finalizadas { --tone: var(--tone-slate); }
.mo-stat--tramite { --tone: var(--tone-amber); }
.mo-stat--historico { --tone: var(--tone-violet); }

/* «Actualizado el…» fuera del panel, como en la ficha. */
.mo-updated {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 2px 0;
  padding-left: 16px;
  color: var(--text-secondary, #3b4356);
  font-size: 12px;
  font-weight: 600;
}

.mo-updated__icon { display: inline-flex; flex: none; }
.mo-updated__icon .mo-icon { width: 15px; height: 15px; }

/* ============================ NAVIGATION ================================= */
/* Píldoras (facetas, secciones de un territorio, filtros activos). Con
   punto de tono por defecto; --all / --plain sin punto. */
.mo-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--mo-card-border);
  border-radius: 999px;
  background: #fff;
  color: var(--text, #0f172a);
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.mo-filter-pill::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone, #94a3b8);
}

.mo-filter-pill--all::before,
.mo-filter-pill--plain::before { display: none; }
.mo-filter-pill__count { color: var(--muted, #64748b); font-size: 12.5px; font-weight: 700; }
.mo-filter-pill:hover { border-color: color-mix(in srgb, var(--tone, #1e63ff) 45%, white); }
.mo-filter-pill:focus-visible { outline: none; box-shadow: var(--mo-focus); }

.mo-filter-pill[aria-current="true"],
.mo-filter-pill[aria-current="page"] {
  border-color: var(--tone, var(--mo-link));
  background: color-mix(in srgb, var(--tone, #1e63ff) 8%, white);
  color: var(--tone, var(--mo-link));
}

/* Píldora con icono (navegación de secciones de un territorio). */
.mo-filter-pill .mo-icon { width: 16px; height: 16px; color: var(--tone, var(--muted, #64748b)); }

/* Enlace secundario con flecha (acción textual, no botón). */
.mo-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  color: var(--mo-link);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.mo-link-arrow .mo-icon { width: 16px; height: 16px; transition: transform .15s ease; }
.mo-link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.mo-link-arrow:hover .mo-icon { transform: translateX(3px); }
.mo-link-arrow:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--mo-focus); }

/* Tarjeta de ruta: un destino de navegación (icono + nombre + descripción
   breve + chevron). Toda la tarjeta es el enlace. Include: mo_route_card.html. */
.mo-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-route-grid > li { display: flex; min-width: 0; }

.mo-route-card {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 76px;
  padding: 14px 14px 14px 16px;
  background: #fff;
  border: 1px solid var(--mo-card-border);
  border-radius: 14px;
  box-shadow: var(--mo-card-shadow);
  color: var(--text, #0f172a);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.mo-route-card:hover {
  border-color: color-mix(in srgb, var(--tone, #1e63ff) 30%, white);
  box-shadow: var(--mo-card-shadow-hover);
  transform: translateY(-2px);
}

.mo-route-card:focus-visible { outline: none; box-shadow: var(--mo-focus); }

.mo-route-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }

.mo-route-card__name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.mo-route-card__desc {
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.mo-route-card__arrow {
  display: grid;
  flex: none;
  place-items: center;
  color: #94a3b8;
  transition: color .15s ease, transform .15s ease;
}

.mo-route-card__arrow .mo-icon { width: 16px; height: 16px; }
.mo-route-card:hover .mo-route-card__arrow { color: var(--tone, var(--mo-link)); transform: translateX(2px); }

/* Variante compacta (sección secundaria, p. ej. «Practicar»). */
.mo-route-grid--compact .mo-route-card { min-height: 60px; padding: 10px 12px; }
.mo-route-grid--compact .mo-route-card__name { font-size: 14px; }

/* =============================== CARDS =================================== */
.mo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-card-grid > li { display: flex; min-width: 0; }

/* Rejilla de provincias: columnas de al menos 300 px que se reparten el
   ancho (3 en escritorio grande, 2 en tablet, 1 en móvil). auto-fill
   conserva las columnas vacías: una sola provincia ocupa SU columna
   (~360-390 px), alineada a la izquierda, sin estirarse a todo el ancho. */
.mo-card-grid--fixed {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  justify-content: start;
}
.mo-territory-grid { margin-bottom: var(--mo-section-gap); }
.mo-sheet .mo-territory-grid,
.mo-stack .mo-territory-grid { margin-bottom: 0; }

/* Chips de métrica (oposiciones/bolsas/exámenes/ofertas/organismos). */
.mo-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-metric {
  --metric: var(--metric-organismos);
  --metric-text: var(--metric-organismos-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--metric) 22%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--metric) 8%, white);
  color: var(--metric-text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}

.mo-metric::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--metric);
}

.mo-metric--oposiciones { --metric: var(--metric-oposiciones); --metric-text: var(--metric-oposiciones-text); }
.mo-metric--bolsas { --metric: var(--metric-bolsas); --metric-text: var(--metric-bolsas-text); }
.mo-metric--examenes { --metric: var(--metric-examenes); --metric-text: var(--metric-examenes-text); }
.mo-metric--oep { --metric: var(--metric-oep); --metric-text: var(--metric-oep-text); }
.mo-metric--organismos { --metric: var(--metric-organismos); --metric-text: var(--metric-organismos-text); }
.mo-metric--tipos { --metric: var(--metric-tipos); --metric-text: var(--metric-tipos-text); }

a.mo-metric:hover {
  border-color: color-mix(in srgb, var(--metric) 45%, white);
  background: color-mix(in srgb, var(--metric) 14%, white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.mo-metric:focus-visible { outline: none; box-shadow: var(--mo-focus); }

/* Cero: dato presente pero sin destino -- gris, sin interacción. */
.mo-metric.is-empty {
  border-color: rgba(15, 23, 42, .07);
  background: #f5f7fb;
  color: var(--muted, #64748b);
  font-weight: 600;
}

.mo-metric.is-empty::before { background: #cbd5e1; }

/* Estado (p. ej. «47 con plazo abierto»): información viva, distinta de las
   métricas históricas -- contorno + punto, sin tinte de contenido. */
.mo-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 3px 11px;
  border: 1px solid rgba(14, 116, 144, .35);
  border-radius: 999px;
  background: #fff;
  color: #155e75;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.mo-status-pill::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0e7490;
  box-shadow: 0 0 0 3px rgba(14, 116, 144, .15);
}

a.mo-status-pill:hover { background: #ecfeff; text-decoration: underline; text-underline-offset: 2px; }
a.mo-status-pill:focus-visible { outline: none; box-shadow: var(--mo-focus); }

/* Sin procesos abiertos ahora: mismo sitio, sin punto vivo. */
.mo-status-pill.is-idle { border-color: rgba(15, 23, 42, .12); color: var(--muted, #64748b); }
.mo-status-pill.is-idle::before { background: #cbd5e1; box-shadow: none; }

.mo-count-pill.mo-count-pill--muted {
  border-color: rgba(15, 23, 42, .1);
  background: #f5f7fb;
  color: var(--muted, #64748b);
}

/* Recuento secundario (no clicable). */
.mo-count-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid rgba(30, 99, 255, .14);
  border-radius: 999px;
  background: rgba(30, 99, 255, .07);
  color: var(--mo-link);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Tarjeta de territorio (comunidad en /territorios/ y en /empleo-publico/,
   provincia en el hub de su comunidad). No es un enlace: lo son la
   bandera/nombre, cada métrica y cada provincia. Include: mo_territory_card. */
.mo-territory-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--mo-card-border);
  border-radius: 16px;
  box-shadow: var(--mo-card-shadow);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Acento de identidad del territorio (mo-tone--*, core.territorio_identidad):
   tarjeta blanca + filete superior de 3 px, borde del símbolo y CTA en su
   tono, como las tarjetas de administración de /organismos/. Nunca el fondo
   ni las métricas (que conservan sus colores semánticos). */
.mo-territory-card { overflow: hidden; }

.mo-territory-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--tone, var(--tone-slate));
}

.mo-territory-card:hover,
.mo-territory-card:focus-within {
  border-color: color-mix(in srgb, var(--tone, #1e63ff) 28%, white);
  box-shadow: var(--mo-card-shadow-hover);
  transform: translateY(-1px);
}

.mo-territory-card .mo-logo { border-color: color-mix(in srgb, var(--tone, #475569) 22%, white); }
.mo-territory-card .mo-logo .mo-icon-box { color: var(--tone, var(--tone-slate)); }
.mo-territory-card__foot .mo-link-arrow { color: var(--tone, var(--mo-link)); }

.mo-territory-card__head { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.mo-territory-card__main { flex: 1 1 auto; min-width: 0; }

.mo-territory-card__title {
  margin: 0;
  color: var(--text, #0f172a);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.mo-territory-card__title a { color: inherit; text-decoration: none; }
.mo-territory-card__title a:hover { color: var(--mo-link); text-decoration: underline; text-underline-offset: 3px; }
.mo-territory-card__title a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--mo-focus); }

.mo-territory-card__meta {
  margin: 4px 0 0;
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.mo-territory-card .mo-metrics { margin-top: auto; }
.mo-territory-card .mo-logo img { width: 46px; height: 34px; }
/* Escudo (provincia sin bandera oficial): vertical, sin proporción de bandera. */
.mo-territory-card .mo-logo--escudo img { width: 34px; height: 46px; }
.mo-mark--escudo { padding: 8px; }
.mo-territory-card__status { margin-top: 8px; }

.mo-territory-card__provincias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Provincias: enlaces inequívocos (color de enlace + subrayado suave
   siempre visible), sin competir con el CTA de la tarjeta. */
.mo-territory-card__provincias a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 3px 11px;
  border: 1px solid rgba(23, 71, 200, .2);
  border-radius: 999px;
  background: #fff;
  color: var(--mo-link);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(23, 71, 200, .3);
  text-underline-offset: 3px;
  cursor: pointer;
}

.mo-territory-card__provincias a:hover { border-color: var(--mo-link); background: rgba(30, 99, 255, .05); text-decoration-color: currentColor; }
.mo-territory-card__provincias .mo-territory-card__more { border-style: dashed; color: var(--text-secondary, #3b4356); }
.mo-territory-card__provincias a:focus-visible { outline: none; box-shadow: var(--mo-focus); }

.mo-territory-card__foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, .06);
}

/* Tarjeta de resumen de un tipo de proceso en un ámbito («Oposiciones en
   Galicia»): estado vivo (plazo abierto) destacado, total histórico aparte,
   acción al listado. Include: mo_summary_card.html. */
.mo-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-summary-grid > li { display: flex; min-width: 0; }

/* Sin altura igualada: una tarjeta vacía no se estira hasta la de al lado. */
.mo-summary-grid { align-items: start; }

.mo-summary-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px 22px;
  background: var(--mo-surface-tinted);
  border: 1px solid var(--mo-sheet-border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.mo-summary-card__head { display: flex; align-items: center; gap: 12px; }
.mo-summary-card__head .mo-icon-box { color: var(--tone); }

.mo-summary-card__title {
  margin: 0;
  color: var(--text, #0f172a);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

.mo-summary-card__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
}

.mo-summary-card__total {
  color: var(--text-secondary, #3b4356);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mo-summary-card__text { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14.5px; line-height: 1.55; }
.mo-summary-card__foot { margin-top: auto; }

/* Estado vacío compacto: «0 registradas» + frase, sin CTA. */
.mo-summary-card--empty {
  gap: 10px;
  padding: 16px 20px;
  background: #fff;
  box-shadow: none;
}

.mo-summary-card--empty .mo-summary-card__head .mo-icon-box { opacity: .6; }
.mo-summary-card--empty .mo-summary-card__title { color: var(--text-secondary, #3b4356); font-size: 17px; }

/* ========================= NAVEGACIÓN TERRITORIAL ======================== */
/* Páginas verticales de un territorio (mo_territory_nav.html): etiqueta
   «En Asturias» + secciones; la actual marcada (aria-current) y sin enlace.
   Una sola fila; en móvil se desplaza horizontalmente. */
.mo-territory-nav {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 var(--mo-section-gap);
  padding: 10px 14px;
  background: var(--mo-surface);
  border: 1px solid var(--mo-sheet-border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.mo-territory-nav__label {
  flex: none;
  margin: 0;
  color: var(--text-secondary, #3b4356);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mo-territory-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-territory-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text, #0f172a);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mo-territory-nav__item .mo-icon { width: 16px; height: 16px; color: var(--muted, #64748b); }
a.mo-territory-nav__item:hover { background: rgba(30, 99, 255, .06); color: var(--mo-link); }
a.mo-territory-nav__item:focus-visible { outline: none; box-shadow: var(--mo-focus); }
.mo-territory-nav__item.is-current {
  background: rgba(30, 99, 255, .08);
  border-color: rgba(30, 99, 255, .25);
  color: var(--mo-link);
}
.mo-territory-nav__item.is-current .mo-icon { color: currentColor; }

@media (max-width: 760px) {
  .mo-territory-nav { flex-direction: column; align-items: stretch; padding: 10px 12px; }
  .mo-territory-nav__list { flex-wrap: nowrap; margin: 0 -12px; padding: 0 12px 4px; overflow-x: auto; scrollbar-width: thin; }
  .mo-territory-nav__list > li { flex: none; }
}

/* ============================== NOTICE =================================== */
/* Aviso discreto (independencia, alcance de los datos): nunca una tarjeta
   grande. Include inline: <aside class="mo-notice"> + icono info + <p>. */
.mo-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(15, 23, 42, .03);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 14px;
  color: var(--text-secondary, #3b4356);
}

.mo-notice .mo-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--muted, #64748b); }
.mo-notice p { max-width: var(--mo-measure-wide); margin: 0; font-size: 13.5px; line-height: 1.55; }
.mo-notice a { color: var(--mo-link); font-weight: 700; }

/* Estado vacío dentro de una hoja. */
.mo-empty { padding: 18px 0 4px; text-align: left; }
.mo-empty p { margin: 0 0 12px; color: var(--text-secondary, #3b4356); }
.mo-empty .mo-empty__title { color: var(--text, #0f172a); font-size: 17px; font-weight: 800; }

/* ============================== PRÁCTICA ================================= */
/* Catálogo de temas (/preguntas/por-tema/): tarjeta de tema = nombre (H3, sin
   enlace: los temas no tienen landing propia) + nº de preguntas UNA vez +
   acción «Practicar». Misma familia que las tarjetas de organismo. */
.mo-stat--materias,
.mo-stat--preguntas { --tone: var(--tone-violet); }

.mo-topic-search__actions { display: flex; gap: 10px; }
.mo-topic-search__actions:has(.mo-filterbar__field) { align-items: flex-end; }
.mo-topic-search__actions .mo-filterbar__field { flex: 0 0 140px; }
.mo-topic-search .mo-filterbar__top { grid-template-columns: minmax(0, 1fr) auto; }

.mo-topic-guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 0 0 18px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--tone-violet) 6%, white);
  border: 1px solid color-mix(in srgb, var(--tone-violet) 20%, white);
  border-radius: 14px;
}

.mo-topic-guest p { margin: 0; color: var(--text, #0f172a); font-size: 15px; }
.mo-topic-guest__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

.mo-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-topic-grid > li { display: flex; min-width: 0; }

/* Tarjeta de tema: ligera (sin filete de color ni botón pesado). Nombre
   arriba; abajo, en una línea, la cifra (una vez) y «Practicar». */
.mo-topic-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--mo-surface);
  border: 1px solid var(--mo-card-border);
  border-radius: 14px;
  box-shadow: var(--mo-card-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.mo-topic-card:hover,
.mo-topic-card:focus-within { border-color: color-mix(in srgb, var(--tone-violet) 35%, white); box-shadow: var(--mo-card-shadow-hover); }

.mo-topic-card .mo-topic-card__title {
  margin: 0;
  color: var(--text, #0f172a);
  font-size: 15.5px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mo-topic-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.mo-topic-card__count { margin: 0; color: var(--text-secondary, #3b4356); font-size: 13.5px; }
.mo-topic-card__count strong { color: var(--metric-examenes-text); font-variant-numeric: tabular-nums; }

/* «Practicar»: enlace/botón con aspecto de enlace con flecha (mismo lenguaje
   que .mo-link-arrow), no un botón primario repetido en cada tarjeta. */
.mo-topic-card__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--tone-violet) 7%, white);
  border: 1px solid color-mix(in srgb, var(--tone-violet) 22%, white);
  border-radius: 999px;
  color: var(--metric-examenes-text);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.mo-topic-card__action .mo-icon { width: 16px; height: 16px; transition: transform .15s ease; }
.mo-topic-card__action:hover { background: color-mix(in srgb, var(--tone-violet) 12%, white); }
.mo-topic-card__action:hover .mo-icon { transform: translateX(2px); }
.mo-topic-card__action:focus-visible { outline: none; box-shadow: var(--mo-focus); }

/* Grupo de opciones excluyentes (radios nativos con aspecto de píldora):
   «Tipo de proceso» en plazo abierto, «Preguntas por test» en temas.
   Formulario real: teclado y sin JS. */
.mo-choice-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.mo-choice-group > legend { float: left; margin: 0 6px 0 0; padding: 0; }
.mo-choice { position: relative; }
.mo-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mo-choice span {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--mo-card-border);
  border-radius: 999px;
  background: #fff;
  color: var(--text, #0f172a);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.mo-choice input:checked + span {
  background: rgba(30, 99, 255, .08);
  border-color: rgba(30, 99, 255, .35);
  color: var(--mo-link);
}

.mo-choice input:focus-visible + span { box-shadow: var(--mo-focus); }
.mo-choice span:hover { border-color: rgba(30, 99, 255, .25); }
.mo-topic-size .mo-choice input:checked + span {
  background: color-mix(in srgb, var(--tone-violet) 10%, white);
  border-color: color-mix(in srgb, var(--tone-violet) 45%, white);
  color: var(--metric-examenes-text);
}
.mo-topic-size { margin-bottom: 16px; }


/* Barra de filtros de una sola búsqueda (sin selector de orden). */
.mo-filterbar__top.mo-filterbar__top--solo { grid-template-columns: minmax(0, 1fr); }

/* «Más filtros» en flujo (fila propia bajo los principales): para filtros
   que son a su vez desplegables (organismo, tipo de plaza). */
.mo-filterbar__more.mo-filterbar__more--inline { flex: 1 1 100%; }
.mo-filterbar__more-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.mo-filterbar__more-grid > .filter-multi { flex: 1 1 260px; min-width: 0; }

/* Cierre de plazo en la tarjeta de proceso (plazo abierto): fecha + cuánto
   queda, siempre en texto. Urgencia por tono SOLO en el texto «queda»:
   hoy (rojo), 1-3 días (rojo suave), 4-7 (ámbar), más (neutro). */
.result-card__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 10px 0 0;
  font-size: 14px;
}

.result-card__cierre-fecha { color: var(--text, #0f172a); font-weight: 700; }
.result-card__cierre-quedan {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 1px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  color: var(--text-secondary, #3b4356);
  font-size: 13px;
  font-weight: 750;
}

.result-card__cierre.is-hoy .result-card__cierre-quedan { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.result-card__cierre.is-pronto .result-card__cierre-quedan { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.result-card__cierre.is-semana .result-card__cierre-quedan { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.result-card__cierre.is-pendiente .result-card__cierre-quedan { border-style: dashed; color: var(--muted, #64748b); }

/* Tipo real del proceso (process_card.attach_tipo_publico). */
.pill.pill--tipo { border-color: color-mix(in srgb, var(--tone) 30%, white); background: color-mix(in srgb, var(--tone) 8%, white); color: var(--tone); font-weight: 700; }

/* Acción de staff: icono discreto, nunca un tercer botón equivalente. */
.result-card__staff-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 10px;
  color: var(--muted, #64748b);
}

.result-card__staff-icon .mo-icon { width: 17px; height: 17px; }
.result-card__staff-icon:hover { border-style: solid; border-color: var(--mo-link); color: var(--mo-link); }
.result-card__staff-icon:focus-visible { outline: none; box-shadow: var(--mo-focus); }

/* Tarjeta de plazo abierto: acciones en una fila (Ver detalle, Seguir y,
   para staff, el icono de edición) para una tarjeta más baja; en móvil
   mantienen el apilado común de .result-card. */
.result-card--deadline { padding-top: 14px; padding-bottom: 14px; }
@media (min-width: 901px) {
  .result-card--deadline .result-card__actions { flex-direction: row; align-items: center; min-width: 0; }
  .result-card--deadline .result-card__actions .btn { width: auto; white-space: nowrap; }
  .result-card--deadline .result-card__actions .inline-form { display: inline-flex; }
}

/* Filtros de plazo abierto: pastillas de tipo un punto más bajas. */
.mo-plazo-filters .mo-choice-group { margin-bottom: 10px; }
.mo-plazo-filters .mo-choice span { min-height: 36px; }

/* Mis seguimientos (privada): mismas piezas que los listados públicos. */
.mo-seg-tabs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 14px; }
.mo-stat--listas { --tone: var(--tone-amber); }
.mo-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.result-card__hito {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 10px 0 0;
  color: var(--text-secondary, #3b4356);
  font-size: 14px;
}
.result-card__hito-label { color: var(--text, #0f172a); font-weight: 700; }
.result-card__fuente { color: var(--mo-link); font-weight: 700; }
.result-card__fuente:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--mo-focus); }
/* «Dejar de seguir»: secundaria discreta, nunca roja ni al mismo peso que
   «Ver detalle». */
.result-card__unfollow.btn-secondary { border-color: transparent; background: transparent; color: var(--text-secondary, #3b4356); box-shadow: none; }
.result-card__unfollow.btn-secondary:hover { border-color: var(--border, #e2e8f0); background: #fff; color: var(--text, #0f172a); }
.result-card--tracked-org .mo-metrics { margin-top: 8px; }
@media (min-width: 901px) {
  .result-card--tracked-org .result-card__actions { flex-direction: row; align-items: center; min-width: 0; }
  .result-card--tracked-org .result-card__actions .btn { width: auto; white-space: nowrap; }
}

/* Paginación dentro de la hoja de resultados. */
.mo-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 20px; }

/* «Finalizan hoy»: rojo accesible solo con cifra > 0; con 0, neutro. */
.mo-stat--hoy { --tone: var(--tone-red); }
.mo-stat--hoy:not(.mo-stat--empty) .mo-stat__value { color: var(--tone-red); }
.mo-stat--hoy.mo-stat--empty { --tone: var(--tone-slate); }

@media (max-width: 760px) {
  .mo-filterbar__more-grid { flex-direction: column; }
  .mo-filterbar__more-grid > .filter-multi { flex: none; }
  .mo-choice-group > legend { float: none; width: 100%; margin-bottom: 4px; }
}

/* Hero compacto (hero.variant = "compact"; p. ej. plazo abierto): misma
   composición, menos aire vertical. H1 y panel conservan su escala. */
.mo-hero--compact { padding: 12px 0 14px; }
.mo-hero--compact .mo-hero__actions { margin-top: 14px; }
.mo-hero--compact .mo-stat { min-height: 42px; padding: 3px 0; }

@media (min-width: 901px) {
  .mo-hero--compact .mo-hero__card { padding: 18px 26px; gap: 14px 32px; }
  .mo-hero--compact .mo-mark { width: 84px; height: 84px; }
  .mo-hero--compact .mo-mark.mo-icon-box .mo-icon { width: 38px; height: 38px; }
}

/* Panel sin título visible: la primera etiqueta de grupo abre el panel sin
   filete superior. */
.mo-stat-panel__title.sr-only + .mo-stat-list > .mo-stat-list__label:first-child {
  margin-top: 0;
  padding-top: 10px;
  border-top: 0;
}

/* Tonos de filas de panel añadidos en esta capa. */
.mo-stat--semana { --tone: var(--tone-blue); }
.mo-stat--publicaciones { --tone: var(--tone-slate); }

@media (max-width: 640px) {
  .mo-topic-search .mo-filterbar__top { grid-template-columns: 1fr; }
  .mo-topic-search__actions .btn { flex: 1 1 auto; }
  .mo-topic-guest { padding: 12px 14px; }
}

/* ============================== FILTERS ================================== */
/* Barra de filtros horizontal sobre resultados a ancho completo (directorios
   de organismos). Parámetros GET + .filter-multi y su script. */
.mo-filterbar {
  margin: 20px 0 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--mo-sheet-border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.mo-filterbar__label {
  display: block;
  margin: 0 0 5px;
  color: var(--text-secondary, #3b4356);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mo-filterbar__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 250px);
  align-items: end;
  gap: 14px;
}

.mo-filterbar__search-field { position: relative; }

.mo-filterbar__search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  display: grid;
  color: var(--muted, #64748b);
  transform: translateY(-50%);
  pointer-events: none;
}

.mo-filterbar__search-icon .mo-icon { width: 18px; height: 18px; }

.mo-filterbar .mo-filterbar__search-field input {
  min-height: 46px;
  padding-left: 42px;
  font-size: 15px;
}

.mo-filterbar .mo-filterbar__order select { min-height: 46px; }

.mo-filterbar__filters { margin-top: 12px; }

/* En escritorio los filtros siempre están abiertos: el conmutador sobra. */
.mo-filterbar__toggle { display: none; }

.mo-filterbar__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.mo-filterbar__grid > .filter-multi { flex: 1 1 190px; min-width: 0; }
.mo-filterbar .filter-multi__trigger { min-height: 44px; min-width: 0; }

/* «Más filtros»: <details> nativo con los checkboxes en un panel
   desplegable en escritorio; en flujo en móvil. */
.mo-filterbar__more { position: relative; flex: none; }

.mo-filterbar__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--input-border, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  color: var(--text, #0f172a);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.mo-filterbar__more-toggle::-webkit-details-marker { display: none; }

.mo-filterbar__more-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid var(--muted, #64748b);
  border-bottom: 2px solid var(--muted, #64748b);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.mo-filterbar__more[open] > .mo-filterbar__more-toggle::after { margin-top: 3px; transform: rotate(-135deg); }
.mo-filterbar__more-toggle:hover { border-color: rgba(30, 99, 255, .25); }
.mo-filterbar__more-toggle:focus-visible { outline: none; box-shadow: var(--mo-focus); }

.mo-filterbar .mo-filterbar__checks {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 45;
  width: 300px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.mo-filterbar .mo-filterbar__checks .organismos-filter-check { min-height: 32px; }

.mo-filterbar__actions { flex: none; }
.mo-filterbar__actions .btn { min-height: 44px; padding: 0 18px; white-space: nowrap; }

/* Filtros activos: chips que quitan un filtro cada uno (server-side). */
.mo-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.mo-active-filters__label {
  margin: 0;
  color: var(--text-secondary, #3b4356);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mo-filter-pill--remove { --tone: var(--mo-link); }
.mo-filter-pill--remove::before { display: none; }
.mo-filter-pill__x { margin-left: 2px; color: var(--muted, #64748b); font-size: 16px; line-height: 1; }
.mo-filter-pill--remove:hover .mo-filter-pill__x { color: var(--mo-link); }

.mo-active-filters__clear {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--mo-link);
  font-size: 14px;
  font-weight: 700;
}

/* Cabecera de resultados: un solo título, recuento secundario. */
.mo-results { margin-bottom: var(--mo-section-gap); }

.mo-results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 12px;
}

.mo-results .mo-results__title {
  margin: 0;
  color: var(--text, #0f172a);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.mo-results__count {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 14px;
  font-weight: 600;
}

/* ======================= COLECCIONES Y DOCUMENTOS ======================== */
/* Glifo de clasificación (familia profesional, tipo de plaza, categoría de
   examen): el dibujo es la máscara `category-icon--<clave>` (app-premium.css,
   sin SVG inline por tarjeta: hay listas de cientos de elementos) dentro del
   icon box común. Color y fondo salen de las variables de esa clave. */
.mo-glyph {
  border-color: color-mix(in srgb, var(--category-icon-color, var(--tone-blue)) 28%, white);
  background: var(--category-icon-bg, rgba(30, 99, 255, .08));
}

.mo-glyph .category-icon__glyph { width: 20px; height: 20px; }
.mo-icon-box--sm.mo-glyph .category-icon__glyph { width: 18px; height: 18px; }
.mo-mark.mo-glyph .category-icon__glyph { width: 44px; height: 44px; }
.mo-hero--compact .mo-mark.mo-glyph .category-icon__glyph { width: 38px; height: 38px; }
@media (max-width: 640px) {
  .mo-mark.mo-glyph .category-icon__glyph { width: 36px; height: 36px; }
}

/* Buscador dentro de una hoja (filtra la colección que la hoja presenta):
   sin segunda tarjeta, solo un fondo tenue. */
.mo-sheet > .mo-filterbar { margin: 0 0 18px; padding: 14px 16px; box-shadow: none; background: rgba(30, 99, 255, .03); border-color: rgba(30, 99, 255, .1); }

/* Tarjeta de elemento: glifo + nombre + descripción/meta + chevron (CSS, sin
   SVG). Toda la tarjeta es el enlace. Para colecciones largas (tipos de plaza,
   categorías): marcado inline en el bucle, sin include por elemento. */
.mo-item-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-item-grid > li { display: flex; min-width: 0; }
.mo-item-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.mo-item-card {
  display: flex;
  position: relative;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
  padding: 11px 34px 11px 12px;
  background: #fff;
  border: 1px solid var(--mo-card-border);
  border-radius: 14px;
  box-shadow: var(--mo-card-shadow);
  color: var(--text, #0f172a);
  text-decoration: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.mo-item-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #94a3b8;
  border-right: 2px solid #94a3b8;
  transform: translateY(-50%) rotate(45deg);
  transition: border-color .15s ease, right .15s ease;
}

.mo-item-card:hover { border-color: rgba(30, 99, 255, .28); box-shadow: var(--mo-card-shadow-hover); }
.mo-item-card:hover::after { right: 13px; border-color: var(--mo-link); }
.mo-item-card:focus-visible { outline: none; box-shadow: var(--mo-focus); }

.mo-item-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.mo-item-card__name { font-size: 14.5px; font-weight: 800; line-height: 1.3; overflow-wrap: break-word; }
.mo-item-card__desc { color: var(--text-secondary, #3b4356); font-size: 13.5px; line-height: 1.45; }
.mo-item-card__meta { color: var(--muted, #64748b); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.mo-item-card__meta strong { color: var(--text, #0f172a); font-variant-numeric: tabular-nums; }

/* Tarjetas «ricas» (categorías con descripción): icono arriba a la izquierda. */
.mo-item-grid--wide .mo-item-card { align-items: flex-start; min-height: 0; padding: 16px 38px 16px 16px; }
.mo-item-grid--wide .mo-item-card__name { font-size: 15.5px; }

/* Rejilla de conceptos: bloques cortos (título + texto + ejemplo + enlace).
   --flow: jerárquico con el siguiente (conector →/↓); --aside: dimensión
   transversal, fondo tenue. */
.mo-concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-concept {
  display: grid;
  position: relative;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--mo-card-border);
  border-radius: 14px;
}

.mo-concept--aside { background: rgba(30, 99, 255, .045); border-color: rgba(30, 99, 255, .16); }

.mo-concept--flow::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -13px;
  color: var(--muted, #64748b);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

.mo-concept .mo-concept__title { margin: 0; color: var(--text, #0f172a); font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.mo-concept p { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14px; line-height: 1.55; }
.mo-concept .mo-concept__example { color: var(--text, #0f172a); font-weight: 700; }
.mo-concept__example span {
  display: block;
  margin-bottom: 1px;
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mo-concept .mo-link-arrow { min-height: 32px; font-size: 13.5px; }

/* Tarjeta de clasificación (familia profesional, nivel): identidad (glifo o
   código con su color), descripción, tipos de plaza representativos, cifras
   y enlace a la ficha. */
.mo-class-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-class-grid > li { display: flex; min-width: 0; }

.mo-class-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--mo-card-border);
  border-radius: 16px;
  box-shadow: var(--mo-card-shadow);
  transition: box-shadow .18s ease, border-color .18s ease;
}

.mo-class-card:hover { border-color: rgba(30, 99, 255, .22); box-shadow: var(--mo-card-shadow-hover); }
.mo-class-card__head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.mo-class-card__head > div { min-width: 0; }
.mo-class-card .mo-class-card__title { margin: 0 0 4px; font-size: 17px; font-weight: 800; line-height: 1.25; }
.mo-class-card__title a { color: var(--text, #0f172a); text-decoration: none; }
.mo-class-card__title a:hover { color: var(--mo-link); text-decoration: underline; text-underline-offset: 3px; }
.mo-class-card__title a:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--mo-focus); }
.mo-class-card__desc { margin: 0; color: var(--text-secondary, #3b4356); font-size: 13.5px; line-height: 1.5; }
.mo-class-card .mo-metrics { gap: 5px; margin-top: auto; }
.mo-class-card .mo-metric { min-height: 28px; padding: 3px 8px; font-size: 12px; gap: 5px; }
.mo-class-card > .mo-link-arrow { align-self: flex-start; min-height: 44px; margin: -6px 0 -10px; }

/* Lista de enlaces-chip (tipos representativos de una familia, materias). */
.mo-chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mo-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 10px;
  border: 1px solid var(--mo-card-border);
  border-radius: 999px;
  background: rgba(15, 23, 42, .025);
  color: var(--text, #0f172a);
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
}
a.mo-chip:hover { border-color: rgba(30, 99, 255, .35); color: var(--mo-link); }
a.mo-chip:focus-visible { outline: none; box-shadow: var(--mo-focus); }
.mo-chip-list__more { color: var(--muted, #64748b); font-size: 12.5px; font-weight: 700; }

/* Respuesta de FAQ con varios bloques (párrafos, listas): misma medida y
   color que la respuesta simple (`details > p`). */
.mo-faq .mo-faq__answer {
  max-width: var(--mo-measure-wide);
  margin: 0 0 16px;
  padding-right: 32px;
  color: var(--text-secondary, #3b4356);
  font-size: 15px;
  line-height: 1.65;
}
.mo-faq__answer > * { margin: 0; }
.mo-faq__answer > * + * { margin-top: 10px; }
.mo-faq__answer ul { padding-left: 20px; }
.mo-faq__answer li + li { margin-top: 4px; }
.mo-faq__answer strong { color: var(--text, #0f172a); }
.mo-faq__answer a { color: var(--mo-link); font-weight: 700; }
.mo-faq__answer .mo-faq__note { color: var(--muted, #64748b); font-size: 14px; }

/* Aviso con título (independencia, alcance): mismo aviso discreto. */
.mo-notice--danger { border-color: color-mix(in srgb, var(--tone-red) 25%, white); background: rgba(190, 18, 60, .05); }
.mo-notice--danger .mo-icon { color: var(--tone-red); }
.mo-notice__title { display: block; margin-bottom: 2px; color: var(--text, #0f172a); font-weight: 800; }

/* Pregunta de examen en modo lectura (preguntas anuladas): enunciado,
   materias, opciones con la respuesta de la plantilla provisional marcada y
   motivo del tribunal. */
.mo-question-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.mo-question {
  min-width: 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--mo-card-border);
  border-radius: 14px;
}

.mo-question__statement { margin: 0; color: var(--text, #0f172a); font-size: 15px; line-height: 1.6; }
.mo-question__num { font-weight: 800; }
.mo-question .mo-chip-list { margin-top: 10px; }
.mo-question__options { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.mo-question__opt { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: 8px; color: var(--text-secondary, #3b4356); font-size: 14.5px; line-height: 1.5; }
.mo-question__letter { flex: none; color: var(--muted, #64748b); font-weight: 700; }
.mo-question__opt.is-provisional { background: rgba(180, 83, 9, .06); color: var(--text, #0f172a); font-weight: 650; }
.mo-question__flag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.mo-question__opt.is-correct { background: rgba(4, 120, 87, .07); color: var(--text, #0f172a); font-weight: 650; }
.mo-question__flag--ok { background: #d1fae5; color: #065f46; }
.mo-question__reason {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--tone-amber);
  border-radius: 0 10px 10px 0;
  background: rgba(15, 23, 42, .03);
  color: var(--text-secondary, #3b4356);
  font-size: 14px;
  line-height: 1.55;
}
.mo-question__reason strong { color: var(--text, #0f172a); }

/* Documento (textos legales): hoja con prosa + índice lateral de documentos. */
.mo-doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: var(--mo-section-gap); margin-bottom: var(--mo-section-gap); }
.mo-doc-layout > * { min-width: 0; }
.mo-sheet.mo-doc { padding: 28px 36px 32px; }
.mo-doc__updated { margin: 0 0 8px; color: var(--muted, #64748b); font-size: 13px; font-weight: 600; }
.mo-doc .mo-prose > * { margin: 0; }
.mo-doc .mo-prose > * + * { margin-top: 12px; }
.mo-doc .mo-prose h2 {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(30, 99, 255, .1);
  color: var(--text, #0f172a);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}
.mo-doc .mo-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mo-doc .mo-prose h3 { margin-top: 18px; color: var(--text, #0f172a); font-size: 16px; font-weight: 800; }
.mo-doc .mo-prose ul,
.mo-doc .mo-prose ol { padding-left: 22px; }
.mo-doc .mo-prose li + li { margin-top: 4px; }
.mo-doc .mo-prose strong { color: var(--text, #0f172a); }
.mo-doc .mo-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mo-doc .mo-prose th,
.mo-doc .mo-prose td { padding: 8px 10px; border-bottom: 1px solid var(--border, #e2e8f0); text-align: left; vertical-align: top; }

.mo-doc-nav { position: sticky; top: calc(var(--header-height, 72px) + 16px); display: grid; gap: 12px; }
.mo-doc-nav .mo-sheet { padding: 18px 16px; }
.mo-doc-nav .mo-subheading { margin: 0 0 8px 12px; }
.mo-doc-nav__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mo-doc-nav__list a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 10px;
  color: var(--text-secondary, #3b4356);
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: none;
}
.mo-doc-nav__list a:hover { background: rgba(30, 99, 255, .06); color: var(--mo-link); }
.mo-doc-nav__list a:focus-visible { outline: none; box-shadow: var(--mo-focus); }
.mo-doc-nav__list a[aria-current="page"] { background: rgba(30, 99, 255, .09); color: var(--mo-link); font-weight: 800; }

@media (max-width: 1100px) {
  .mo-item-grid,
  .mo-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mo-doc-layout { grid-template-columns: 1fr; }
  .mo-doc-nav { position: static; }
  .mo-concept-grid { grid-template-columns: 1fr; gap: 20px; }
  .mo-concept--flow::after { content: "↓"; top: auto; right: auto; bottom: -17px; left: 50%; transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .mo-item-grid,
  .mo-item-grid--wide,
  .mo-class-grid { grid-template-columns: 1fr; }
  .mo-sheet.mo-doc { padding: 20px 18px 24px; }
  /* Tarjeta de clasificación: icono y título en una fila; la descripción
     baja a todo el ancho (no queda encajonada junto al icono). */
  .mo-class-card__head { flex-wrap: wrap; align-items: center; }
  .mo-class-card__head > div { display: contents; }
  .mo-class-card .mo-class-card__title { flex: 1 1 0; margin: 0; }
  .mo-class-card__desc { flex: 1 1 100%; }
  .mo-question { padding: 14px; }
  .mo-faq .mo-faq__answer { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-item-card,
  .mo-item-card::after,
  .mo-class-card { transition: none; }
}

/* ========================= FORMULARIOS Y TABLAS ========================== */
/* Formulario dentro de una hoja (contacto; reutilizable en el área privada):
   campos apilados, etiqueta encima, filas de dos columnas y acciones. Los
   errores de campo usan .field-error. */
.mo-form { display: grid; gap: 16px; }
.field-error { margin-top: 4px; color: var(--tone-red, #be123c); font-size: 13px; font-weight: 700; line-height: 1.4; }
.mo-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mo-form__field { display: grid; gap: 6px; min-width: 0; }
.mo-form label { color: var(--text, #0f172a); font-size: 14px; font-weight: 700; }
.mo-form input[type="text"],
.mo-form input[type="email"],
.mo-form input[type="url"],
.mo-form input[type="password"],
.mo-form select,
.mo-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--input-border, #e2e8f0);
  border-radius: 12px;
  background: var(--input-bg, #fff);
  color: var(--text, #0f172a);
  font: inherit;
  font-size: 15px;
}
.mo-form select { appearance: auto; }
.mo-form textarea { min-height: 140px; resize: vertical; }
.mo-form input:focus,
.mo-form select:focus,
.mo-form textarea:focus { outline: none; border-color: rgba(30, 99, 255, .5); box-shadow: 0 0 0 3px rgba(30, 99, 255, .16); }
.mo-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.mo-form__actions p { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14px; }
.mo-form__actions a { color: var(--mo-link); font-weight: 700; }

/* Dos columnas: contenido principal + lateral (formulario y ayudas). */
.mo-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: var(--mo-section-gap); }
.mo-split > * { min-width: 0; }
.mo-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mo-split__aside { display: grid; gap: 16px; }
.mo-split__aside .mo-sheet { padding: 20px; }
.mo-split__aside .mo-block-title { font-size: 18px; }
.mo-split__aside p { margin: 0 0 14px; color: var(--text-secondary, #3b4356); font-size: 14.5px; line-height: 1.55; }
.mo-split__aside .mo-hero__actions { margin-top: 0; }

/* Tabla de referencia (p. ej. nivel → titulación): filas separadas, cabecera
   discreta, desplazamiento horizontal propio en pantallas estrechas. */
.mo-table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--mo-card-border); border-radius: 14px; }
.mo-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mo-table th,
.mo-table td { padding: 12px 16px; border-bottom: 1px solid var(--mo-card-border); text-align: left; vertical-align: top; }
.mo-table tbody tr:last-child > * { border-bottom: 0; }
.mo-table thead th { background: rgba(15, 23, 42, .03); color: var(--text-secondary, #3b4356); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mo-table tbody th { color: var(--text, #0f172a); font-weight: 700; white-space: nowrap; }
.mo-table td { color: var(--text-secondary, #3b4356); line-height: 1.55; }
.mo-table__note { margin: 12px 0 0; color: var(--muted, #64748b); font-size: 13.5px; line-height: 1.55; }

/* Código corto en caja (nivel A1, A2…): mismo cuadrado que el icon box. */
.mo-code { font-size: 15px; font-weight: 900; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mo-table .mo-code { display: inline-grid; place-items: center; min-width: 34px; height: 26px; margin-right: 8px; padding: 0 6px; border-radius: 8px; background: rgba(30, 99, 255, .08); color: var(--mo-link); font-size: 13px; }

/* Barra de filtros con desplegables sencillos (sin búsqueda ni multi). */
.mo-filterbar__field { display: grid; flex: 1 1 190px; gap: 0; min-width: 0; }
.mo-filterbar__field select { width: 100%; min-height: 44px; }
.mo-filterbar--simple .mo-choice-group { margin-bottom: 12px; }

/* Página no encontrada: ruta solicitada en el aviso. */
.mo-notice code { padding: 1px 6px; border-radius: 6px; background: rgba(15, 23, 42, .06); color: var(--text, #0f172a); font-size: 13px; word-break: break-all; }

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

@media (max-width: 760px) {
  .mo-filterbar--simple .mo-filterbar__form { display: block; }
  .mo-filterbar--simple .mo-filterbar__grid { gap: 10px; }
  /* En columna, el flex-basis del campo sería su ALTURA: tamaño natural. */
  .mo-filterbar--simple .mo-filterbar__field { flex: none; }
  .mo-filterbar--simple .mo-filterbar__actions .btn { width: 100%; }
}

@media (max-width: 640px) {
  .mo-form__row { grid-template-columns: 1fr; }
  .mo-form input[type="text"],
  .mo-form input[type="email"],
  .mo-form input[type="url"],
  .mo-form select,
  .mo-form textarea { font-size: 16px; }
  .mo-form__actions .btn { width: 100%; justify-content: center; }
  .mo-table th,
  .mo-table td { padding: 10px 12px; }
  /* --stack: tabla de dos columnas apilada (etiqueta arriba, valor debajo),
     sin scroll horizontal; la cabecera queda solo para lectores de pantalla. */
  .mo-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mo-table--stack tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--mo-card-border); }
  .mo-table--stack tbody tr:last-child { border-bottom: 0; }
  .mo-table--stack,
  .mo-table--stack tbody { display: block; }
  .mo-table--stack tbody th,
  .mo-table--stack tbody td { display: block; padding: 0; border: 0; white-space: normal; }
  .mo-table--stack tbody th { margin-bottom: 4px; }
  .mo-table--stack tbody td[data-label]::before { content: attr(data-label) ": "; color: var(--muted, #64748b); font-size: 12.5px; font-weight: 700; }
  .mo-table--stack tbody td[data-label] ul { display: inline; }
}

/* ============================ CUENTA Y ACCESO ============================ */
/* Tarjeta de acceso centrada (login, registro, contraseñas, confirmaciones):
   una sola hoja estrecha con cabecera propia (icon box + H1 + entradilla),
   formulario .mo-form y pie con enlaces secundarios. */
.mo-auth { display: grid; justify-items: center; padding: 28px 0 var(--mo-section-gap); }
.mo-auth__card { width: min(100%, 480px); padding: 28px 30px 24px; }
.mo-auth--wide .mo-auth__card { width: min(100%, 720px); }
.mo-auth__head { display: grid; justify-items: start; gap: 10px; margin-bottom: 22px; }
.mo-auth__head .mo-icon-box { width: 48px; height: 48px; border-radius: 14px; }
.mo-auth .mo-auth__title { margin: 4px 0 0; color: var(--text, #0f172a); font-size: clamp(24px, 1.2rem + .8vw, 30px); font-weight: 850; line-height: 1.2; letter-spacing: -.015em; }
.mo-auth__lead { margin: 0; color: var(--text-secondary, #3b4356); font-size: 15px; line-height: 1.55; }
.mo-auth__body > * + * { margin-top: 14px; }
.mo-auth__body p { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14.5px; line-height: 1.55; }
.mo-auth__body p a { color: var(--mo-link); font-weight: 700; }
.mo-auth .mo-form > .btn,
.mo-auth__body > .btn { width: 100%; justify-content: center; min-height: 46px; }
.mo-auth__foot {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(30, 99, 255, .1);
  color: var(--text-secondary, #3b4356);
  font-size: 14px;
  text-align: center;
}
.mo-auth__foot p { margin: 0; }
.mo-auth__foot a:not(.btn) { color: var(--mo-link); font-weight: 700; }
.mo-auth__foot .btn { width: 100%; justify-content: center; }

/* Acceso con proveedor externo + separador «o con…». */
.mo-auth__social .btn { width: 100%; justify-content: center; min-height: 46px; }
.mo-auth__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted, #64748b); font-size: 13px; font-weight: 600; }
.mo-auth__divider::before,
.mo-auth__divider::after { content: ""; flex: 1 1 0; height: 1px; background: var(--mo-card-border); }

/* Casilla con texto (recordarme, aceptar términos, confirmar baja). */
.mo-form__check { display: flex; align-items: flex-start; gap: 10px; color: var(--text, #0f172a); font-size: 14.5px; font-weight: 600; line-height: 1.5; cursor: pointer; }
.mo-form__check input { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.mo-form__check a { color: var(--mo-link); font-weight: 700; }
.mo-form__help { margin: 0; color: var(--muted, #64748b); font-size: 13px; line-height: 1.5; }
.mo-form .field-required::after { content: " *"; color: var(--tone-red); }
.mo-form .form-error { color: var(--tone-red); font-size: 13px; font-weight: 600; }
.mo-form__section + .mo-form__section { padding-top: 18px; border-top: 1px solid rgba(30, 99, 255, .1); }
.mo-form__section > .mo-block-title { margin-bottom: 6px; }
.mo-form__section > p { margin: 0 0 14px; color: var(--text-secondary, #3b4356); font-size: 14.5px; line-height: 1.55; }
.mo-form__section > p a { color: var(--mo-link); font-weight: 700; }

/* Hoja de acción irreversible (darse de baja): borde y título en rojo. */
.mo-sheet--danger { border-color: color-mix(in srgb, var(--tone-red) 30%, white); }
.mo-sheet--danger .mo-block-title { color: var(--tone-red); }
.mo-sheet ul.mo-list { margin: 0 0 14px; padding-left: 20px; color: var(--text-secondary, #3b4356); font-size: 14.5px; line-height: 1.6; }

@media (max-width: 640px) {
  .mo-auth { padding-top: 12px; }
  .mo-auth__card { padding: 22px 18px 20px; }
}

/* ============================== MI ESPACIO =============================== */
/* Fila de lista dentro de una hoja (preguntas para revisar o falladas,
   reclamaciones, alertas): cuerpo (título enlazado, etiquetas, origen) +
   lateral (estado, fecha, acciones). Filas separadas por un filete. */
.mo-row-list { display: grid; margin: 0; padding: 0; list-style: none; }
.mo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--mo-card-border);
}
.mo-row-list > li:first-child > .mo-row,
.mo-row-list > .mo-row:first-child { border-top: 0; padding-top: 4px; }
.mo-row__body { display: grid; gap: 8px; min-width: 0; }
.mo-row .mo-row__title { margin: 0; color: var(--text, #0f172a); font-size: 15.5px; font-weight: 750; line-height: 1.45; }
.mo-row__title a { color: inherit; text-decoration: none; }
.mo-row__title a:hover { color: var(--mo-link); text-decoration: underline; text-underline-offset: 3px; }
.mo-row__title a:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--mo-focus); }
.mo-row__text { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14.5px; line-height: 1.55; }
.mo-row__meta { margin: 0; color: var(--muted, #64748b); font-size: 13px; line-height: 1.5; }
.mo-row__meta strong { color: var(--text, #0f172a); font-weight: 700; }
.mo-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.mo-row__side small { color: var(--muted, #64748b); font-size: 12.5px; }
.mo-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.mo-row__actions form { margin: 0; }
.mo-row__actions--start { justify-content: flex-start; }
.mo-row__response { margin: 0; padding: 10px 14px; border-left: 3px solid var(--tone-green); border-radius: 0 10px 10px 0; background: rgba(4, 120, 87, .05); color: var(--text-secondary, #3b4356); font-size: 14px; line-height: 1.55; }
.mo-row--muted .mo-row__title { color: var(--text-secondary, #3b4356); }

/* Datos en pares etiqueta/valor (criterios de una alerta, estadísticas de
   un intento). */
.mo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin: 0; }
.mo-facts dt { color: var(--muted, #64748b); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mo-facts dd { margin: 2px 0 0; color: var(--text, #0f172a); font-size: 14.5px; font-weight: 600; line-height: 1.45; }

/* Etiqueta de estado con tono (activa/pausada, pendiente/aceptada, nº de
   fallos…). El color sale de .mo-tone--*. */
.mo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--tone, var(--tone-slate)) 30%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone, var(--tone-slate)) 8%, white);
  color: var(--tone, var(--tone-slate));
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

/* Barra de acciones de una hoja (botón que envía un formulario POST, p. ej.
   «Hacer simulacro» con la lista): bajo la cabecera de sección. */
.mo-sheet__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: -6px 0 18px; }
.mo-sheet__toolbar p { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14px; }
.mo-sheet__toolbar form { margin: 0; }

/* Cabeceras de tabla ordenables (↑ ↓) y cifras con significado. */
.mo-sort-links a { color: var(--mo-link); font-weight: 700; }
.mo-sort-links a[aria-current="true"] { color: var(--text, #0f172a); text-decoration: none; pointer-events: none; }
.mo-table th .mo-sort { display: inline-grid; place-items: center; min-width: 22px; min-height: 22px; border-radius: 6px; color: var(--muted, #64748b); text-decoration: none; }
.mo-table th .mo-sort:hover { background: rgba(30, 99, 255, .08); color: var(--mo-link); }
.mo-table th .mo-sort:focus-visible { outline: none; box-shadow: var(--mo-focus); }
.mo-table th .mo-sort[aria-current="true"] { color: var(--mo-link); }
.mo-num { font-variant-numeric: tabular-nums; }
.mo-num--ok { color: var(--tone-green); font-weight: 700; }
.mo-num--bad { color: var(--tone-red); font-weight: 700; }
.mo-table a { color: var(--mo-link); font-weight: 650; }

/* Texto libre del usuario (motivo, respuesta): respeta saltos de línea. */
.mo-pre { margin: 0; color: var(--text, #0f172a); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .mo-row { grid-template-columns: 1fr; }
  .mo-row__side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  .mo-row__actions { justify-content: flex-start; }
}

/* ================================ STAFF =================================== */
/* Herramientas internas (escáneres de boletines, revisión, importación):
   mismas hojas y tablas que el resto, más densas. */
.mo-scan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.mo-scan-form { align-content: start; padding: 16px 18px; border: 1px solid var(--mo-card-border); border-radius: 14px; background: rgba(15, 23, 42, .015); }
.mo-scan-form .mo-subheading { margin: 0; }
.mo-scan-foot { margin-top: 14px; }
.mo-scan-foot a { color: var(--mo-link); font-weight: 700; }
.mo-scan .mo-block-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }

.mo-progress { height: 10px; margin: 12px 0 6px; overflow: hidden; border-radius: 999px; background: rgba(30, 99, 255, .12); }
.mo-progress__bar { display: block; height: 100%; border-radius: inherit; background: var(--primary, #1e63ff); transition: width .2s ease; }

.mo-table--compact th,
.mo-table--compact td { padding: 9px 12px; font-size: 14px; }
.mo-table th.mo-check,
.mo-table td.mo-check { width: 36px; padding-right: 0; }
.mo-check input { width: 16px; height: 16px; }
.mo-cell-title { display: block; margin-top: 4px; color: var(--text, #0f172a); font-weight: 700; line-height: 1.4; text-decoration: none; }
a.mo-cell-title:hover { color: var(--mo-link); text-decoration: underline; }
.mo-table a.mo-cell-title { color: var(--text, #0f172a); }
.mo-table a.mo-cell-title:hover { color: var(--mo-link); }
.mo-cell-meta { display: block; margin-top: 3px; color: var(--muted, #64748b); font-size: 12.5px; line-height: 1.45; }
.mo-cell-wrap { max-width: 340px; overflow-wrap: anywhere; }
.mo-cell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; white-space: nowrap; }
.mo-cell-actions form { margin: 0; }
.mo-link-danger { padding: 0; border: 0; background: none; color: var(--tone-red); font: inherit; font-weight: 700; cursor: pointer; }
.mo-link-danger:hover { text-decoration: underline; }
.mo-link-danger:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--mo-focus); }

.mo-details { margin-top: 10px; }
.mo-details > summary { color: var(--mo-link); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.mo-details > summary:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--mo-focus); }
.mo-details[open] > summary { margin-bottom: 8px; }
.mo-details--inline { margin-top: 4px; }
.mo-details--inline > summary { font-size: 12.5px; }

.mo-pre--box { padding: 12px 14px; border-radius: 10px; background: rgba(15, 23, 42, .035); font-size: 14px; max-height: 360px; overflow-y: auto; }
.mo-pre--small { font-size: 12.5px; line-height: 1.5; }
.mo-pre + .mo-subheading { margin-top: 16px; }

.mo-danger-zone > summary { color: var(--tone-red); font-size: 14px; font-weight: 800; cursor: pointer; }
.mo-danger-zone > summary:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--mo-focus); }
.mo-danger-zone[open] > summary { margin-bottom: 12px; }
.mo-danger-zone .mo-sheet__toolbar { margin: 0; }
.mo-danger-zone .mo-sheet__toolbar + .mo-sheet__toolbar { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mo-card-border); }

/* Edición de preguntas (importar examen/genéricas, corregir examen): una hoja
   por pregunta con enunciado, temas, opciones (radio = correcta) y, al
   corregir, anulación. Las clases importar-*/corregir-* se conservan como
   ganchos de su validación en JavaScript. */
.mo-qedit { display: grid; gap: 14px; }
.mo-qedit__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.mo-qedit__head .mo-block-title { margin: 0; }
.mo-qedit select[multiple] { min-height: 108px; padding: 6px; }
.mo-qedit__opts { display: grid; gap: 8px; }
.mo-qedit__opt { display: flex; align-items: center; gap: 10px; }
.mo-qedit__radio { display: inline-flex; flex: none; align-items: center; gap: 6px; font-weight: 800; cursor: pointer; }
.mo-qedit__radio input { width: 18px; height: 18px; }
.mo-qedit__letter { min-width: 1.4em; }
.mo-qedit__opt input[type="text"] { flex: 1 1 auto; min-width: 0; }
.mo-qedit input.is-invalid { border-color: var(--tone-red); box-shadow: 0 0 0 3px rgba(190, 18, 60, .12); }
.mo-qedit__warn { margin: 0; color: var(--tone-amber); font-size: 14px; font-weight: 700; }
.importar-error-msg { margin-top: 6px; color: var(--tone-red); font-size: 13.5px; font-weight: 600; }
.mo-qedit__anulada { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--tone-red) 22%, white); border-radius: 12px; background: rgba(190, 18, 60, .03); }
.mo-form .mo-qedit__anulada textarea { min-height: 64px; }
.btn.mo-btn-danger { border: 1px solid color-mix(in srgb, var(--tone-red) 45%, white); background: #fff; color: var(--tone-red); box-shadow: none; }
.btn.mo-btn-danger:hover { background: var(--tone-red); color: #fff; }
.mo-qedit-save { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border: 1px solid var(--mo-sheet-border); border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: var(--mo-panel-shadow); }
.mo-qedit-save p { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14px; }

@media (max-width: 760px) {
  .mo-scan-grid { grid-template-columns: 1fr; }
}

/* ============================ FILA DE PROCESO ============================ */
/* Vista previa de un proceso o examen en fichas (familia, nivel, organismo)
   y en la portada: fecha · título + metadatos · estado + acción. El filete
   izquierdo lleva el color de la familia de estado (abierto / en trámite /
   finalizado). Include: core/includes/mo_process_row.html. */
.mo-process-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mo-process-row {
  --row-accent: var(--tone-amber);
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  padding: 12px 16px 12px 14px;
  border: 1px solid var(--mo-card-border);
  border-left: 4px solid var(--row-accent);
  border-radius: 14px;
  background: #fff;
}
/* Cabecera de organismo: etiquetas bajo el H1, aviso de plazo abierto y
   enlaces oficiales (mo_hero). */
.mo-hero__title-tag { vertical-align: middle; font-size: 13px; }
.mo-hero__notas { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; }
.mo-hero__notas .mo-tag { text-decoration: none; }
.mo-hero__aviso { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #166534; font-size: 14px; font-weight: 750; text-decoration: none; }
.mo-hero__aviso:hover { text-decoration: underline; text-underline-offset: 3px; }
.mo-hero__aviso-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone-green) 18%, transparent); }
.mo-hero__fuentes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; font-size: 13.5px; }
.mo-hero__fuentes-label { color: var(--muted, #64748b); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mo-hero__fuentes a { color: var(--mo-link); font-weight: 700; text-decoration: none; }
.mo-hero__fuentes a:hover { text-decoration: underline; }
/* Organismo y datos clave bajo el H1 (fichas de proceso y examen). */
.mo-hero__org { margin: 6px 0 0; font-size: 16px; font-weight: 750; }
.mo-hero__org a { color: var(--mo-link); text-decoration: none; }
.mo-hero__org a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mo-hero__facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; color: var(--text-secondary, #3b4356); font-size: 14.5px; font-weight: 650; }
.mo-hero__facts span + span::before { content: "·"; margin-right: 14px; color: var(--muted, #64748b); }
/* Panel «Situación actual» (mo_status_panel). */
.mo-status-panel { padding: 16px 18px; gap: 6px; }
.mo-status-panel--open { border-color: color-mix(in srgb, var(--tone-green) 35%, white); background: color-mix(in srgb, var(--tone-green) 6%, white); }
.mo-status-panel--closed { border-color: #e2e8f0; background: #f8fafc; }
.mo-status-panel .mo-status-panel__titulo { margin: 2px 0 0; color: var(--text, #0f172a); font-size: 20px; font-weight: 850; line-height: 1.25; }
.mo-status-panel--open .mo-status-panel__titulo { color: #166534; }
.mo-status-panel__cuerpo { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14px; line-height: 1.5; }
.mo-status-panel__fechas { display: grid; gap: 0; margin: 8px 0 0; }
.mo-status-panel__fechas div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--mo-card-border); font-size: 14px; }
.mo-status-panel__fechas dt { color: var(--text-secondary, #3b4356); font-weight: 650; }
.mo-status-panel__fechas dd { margin: 0; color: var(--text, #0f172a); font-weight: 800; font-variant-numeric: tabular-nums; }
.mo-status-panel__fechas .is-destacada dt, .mo-status-panel__fechas .is-destacada dd { color: #166534; }
.mo-mark--logo { background: #fff; }
.mo-mark--logo img { width: 100%; height: 100%; object-fit: contain; }

/* Escudo del organismo (solo en listados con varios organismos). */
.mo-process-row--con-logo { grid-template-columns: 92px 40px minmax(0, 1fr) auto; }
.mo-process-row__logo {
  display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden;
  border: 1px solid var(--mo-card-border); border-radius: 10px; background: #fff;
  color: var(--text-secondary, #3b4356); font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
}
.mo-process-row__logo img { width: 32px; height: 32px; object-fit: contain; }
.mo-process-row--abierto { --row-accent: var(--tone-green); }
.mo-process-row--finalizada { --row-accent: #cbd5e1; }
.mo-process-row--examen { --row-accent: var(--metric-examenes); }
.mo-process-row__date { display: grid; gap: 1px; color: var(--text, #0f172a); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mo-process-row__date span { color: var(--muted, #64748b); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.mo-process-row__main { display: grid; gap: 5px; min-width: 0; }
.mo-process-row__title { color: var(--text, #0f172a); font-size: 15px; font-weight: 750; line-height: 1.4; text-decoration: none; overflow-wrap: break-word; }
.mo-process-row__title:hover { color: var(--mo-link); text-decoration: underline; text-underline-offset: 3px; }
.mo-process-row__title:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--mo-focus); }
.mo-process-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; color: var(--muted, #64748b); font-size: 13px; line-height: 1.4; }
.mo-process-row__meta a:not(.mo-tag) { color: var(--text-secondary, #3b4356); font-weight: 650; text-decoration: none; }
.mo-process-row__meta a:not(.mo-tag):hover { color: var(--mo-link); text-decoration: underline; }
.mo-process-row__meta .mo-tag { min-height: 22px; padding: 1px 8px; font-size: 12px; text-decoration: none; }
.mo-process-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.mo-process-row__side .mo-link-arrow { min-height: 32px; font-size: 13.5px; }
/* Plazo restante (solo procesos con plazo abierto): texto siempre explícito. */
.mo-process-row__deadline { color: var(--text-secondary, #3b4356); font-size: 12.5px; font-weight: 700; }
.mo-process-row__deadline.is-soon { color: #b45309; }
.mo-process-row__deadline.is-urgent { color: #b91c1c; }
/* Cierre protagonista (plazo abierto): texto siempre explícito. */
.mo-process-row__cierre { font-size: 13.5px; }
.mo-process-row__cierre.is-hoy { color: #b91c1c; }
.mo-process-row__cierre.is-pronto { color: #b45309; }
.mo-process-row__cierre.is-semana { color: #92400e; }
.mo-process-row__cierre.is-pendiente { color: var(--muted, #64748b); font-weight: 600; }
.mo-process-row__actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; }
.mo-process-row__actions form { margin: 0; }
/* Seguir / Siguiendo: acción secundaria discreta junto a «Ver detalle». */
.mo-follow {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px;
  border: 1px solid var(--mo-card-border); border-radius: 999px; background: #fff;
  color: var(--text-secondary, #3b4356); font: inherit; font-size: 13px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.mo-follow .mo-icon { width: 15px; height: 15px; }
.mo-follow:hover { border-color: color-mix(in srgb, var(--mo-link) 45%, white); color: var(--mo-link); }
.mo-follow:focus-visible { outline: none; box-shadow: var(--mo-focus); }
.mo-follow.is-following { border-color: color-mix(in srgb, var(--tone-green) 40%, white); background: color-mix(in srgb, var(--tone-green) 8%, white); color: #166534; }
.mo-process-row__staff { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted, #64748b); }
.mo-process-row__staff .mo-icon { width: 16px; height: 16px; }
.mo-link-button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
/* Fila de intento (Mi historial): el resultado es el dato protagonista. */
.mo-attempt-row { --row-accent: var(--tone-slate); }
.mo-attempt-row--good { --row-accent: var(--tone-green); }
.mo-attempt-row--medium { --row-accent: var(--tone-amber); }
.mo-attempt-row--low { --row-accent: var(--tone-red); }
.mo-attempt-row__score { display: inline-flex; align-items: baseline; gap: 6px; }
.mo-attempt-row__score strong { color: var(--text, #0f172a); font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; }
.mo-attempt-row--good .mo-attempt-row__score strong { color: #166534; }
.mo-attempt-row--low .mo-attempt-row__score strong { color: #b91c1c; }
.mo-attempt-row__score span { color: var(--text-secondary, #3b4356); font-size: 12.5px; font-weight: 700; }
.mo-process-row__staff:hover { background: rgba(30, 99, 255, .08); color: var(--mo-link); }
/* Objetivos táctiles de 44 px en pantallas táctiles. */
@media (pointer: coarse) {
  .mo-follow, .mo-process-row__side .mo-link-arrow, .mo-process-row__staff { min-height: 44px; }
  .mo-process-row__staff { width: 44px; }
}

/* Listado de procesos dentro de una hoja (fichas de nivel y organismo):
   pestañas de estado, barra de filtros embebida y cabecera de resultados. */
.mo-process-tabs { margin: 0 0 14px; }
.mo-filter-pill.is-empty { color: var(--muted, #64748b); background: transparent; border-style: dashed; cursor: default; }
.mo-filterbar--inset { margin: 0 0 14px; padding: 14px 16px; background: var(--mo-surface-tinted, #f8fafc); box-shadow: none; }
.mo-filterbar--inset + .mo-active-filters { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 14px; }
.mo-sheet > .mo-results__head { margin-top: 4px; }
.mo-disclaimer { color: var(--muted, #64748b); font-size: 14px; }
.levels-anchor-alias { display: block; width: 0; height: 0; overflow: hidden; }

/* Fila de Oferta Pública de Empleo (ficha de organismo): año + cifras. */
.mo-process-row--oep { --row-accent: var(--metric-oep); }
.mo-process-row--novedad { --row-accent: var(--tone-blue); }
.mo-process-row--organismo { --row-accent: var(--tone-slate); }
.mo-process-row--organismo .mo-process-row__date span { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
/* «Dejar de seguir» discreto (Mi espacio): mismo botón, tono neutro. */
.mo-follow.mo-unfollow { border-color: var(--mo-card-border); background: #fff; color: var(--text-secondary, #3b4356); }
.mo-follow.mo-unfollow:hover { border-color: #fca5a5; color: #b91c1c; }
.mo-process-row--news-bolsa { --row-accent: var(--metric-bolsas); }
.mo-process-row--news-examen { --row-accent: var(--metric-examenes); }
.mo-process-row--news-plazo { --row-accent: var(--tone-green); }
.mo-process-row--news-listas { --row-accent: var(--tone-amber); }
.mo-process-row--news-novedad { --row-accent: #cbd5e1; }
.mo-process-row--oep .mo-process-row__date strong { font-size: 16px; }
.mo-process-row__note { margin: 0; color: var(--text-secondary, #3b4356); font-size: 13px; line-height: 1.5; }
.mo-facts--inline { grid-template-columns: repeat(auto-fit, minmax(130px, max-content)); gap: 6px 22px; margin-top: 4px; }
.mo-facts--inline dd { font-size: 14px; font-weight: 800; }

/* Cabecera simple de una hoja lateral (título + «Ver todas»). */
.mo-sheet__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 12px; }
.mo-sheet__head .mo-block-title { margin: 0; }

/* Llamada a colaborar: texto + acciones en una fila. */
.mo-collab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.mo-collab p { margin: 4px 0 0; color: var(--text-secondary, #3b4356); }
.mo-collab .mo-hero__actions { margin: 0; }

/* Acción interna de staff sobre un listado (fuera de las acciones públicas). */
.mo-staff-hint { display: flex; justify-content: flex-end; margin: 0; }
.mo-staff-hint > .mo-follow, .mo-staff-hint > button { flex: none; width: auto; }
.mo-staff-hint.mo-ficha-staff { align-items: center; gap: 10px; margin: 12px 0 0; }

@media (max-width: 640px) {
  .mo-process-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
  .mo-process-row__date { display: flex; align-items: baseline; gap: 8px; }
  .mo-process-row__side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  .mo-process-row__actions { justify-content: flex-start; }
  .mo-process-row--con-logo { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .mo-process-row--con-logo .mo-process-row__date,
  .mo-process-row--con-logo .mo-process-row__side { grid-column: 1 / -1; }
  .mo-process-row--con-logo .mo-process-row__logo { align-self: start; }
}

/* ====================== SEGUIR ORGANISMO / NOVEDADES ====================== */
/* Banda «Sigue este organismo» (ficha de organismo). Los formularios y textos
   alternos se conmutan con follow-toggle.js (.follow-toggle__form.is-hidden). */
.mo-follow-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px;
  padding: 16px 20px; border-color: color-mix(in srgb, var(--mo-link) 22%, white);
  background: linear-gradient(145deg, color-mix(in srgb, var(--mo-link) 7%, white), #fff);
}
.mo-follow-banner.is-active { border-color: color-mix(in srgb, var(--tone-green) 30%, white); background: linear-gradient(145deg, color-mix(in srgb, var(--tone-green) 7%, white), #fff); }
.mo-follow-banner__copy .mo-block-title { margin: 0; font-size: 17px; }
.mo-follow-banner__copy p { margin: 4px 0 0; color: var(--text-secondary, #3b4356); font-size: 14px; line-height: 1.5; }
.mo-follow-banner__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; }
.mo-follow-banner__actions form { margin: 0; }
.mo-follow-banner__actions .follow-toggle__feedback { flex-basis: 100%; margin: 0; color: var(--text-secondary, #3b4356); font-size: 13px; text-align: right; }
.mo-follow-banner__actions .follow-toggle__feedback:empty { display: none; }
@media (max-width: 760px) {
  .mo-follow-banner { grid-template-columns: auto minmax(0, 1fr); }
  .mo-follow-banner__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .mo-follow-banner__actions .follow-toggle__feedback { text-align: left; }
}

/* Fila compacta (columna lateral de novedades): fecha encima en estrecho. */
.mo-process-row--compact { grid-template-columns: 86px minmax(0, 1fr); padding: 10px 12px; }
.mo-process-row--compact .mo-process-row__title { font-size: 14px; }
.mo-split__aside .mo-process-row--compact, .mo-split > aside .mo-process-row--compact { grid-template-columns: 1fr; gap: 4px; }
.mo-split > aside .mo-process-row--compact .mo-process-row__date { display: flex; gap: 8px; }
.mo-process-row--news-opposition { --row-accent: var(--metric-oposiciones); }
.mo-process-row--news-job-pool { --row-accent: var(--metric-bolsas); }
.mo-process-row--news-exam { --row-accent: var(--metric-examenes); }
.mo-process-row--news-public-offer { --row-accent: var(--metric-oep); }

/* ============================ PORTADA PÚBLICA ============================= */
/* Buscador dentro de la cabecera (mo_hero + hero_extra) y remates de la home. */
.mo-home-search { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--mo-card-border); border-radius: 16px; background: var(--mo-surface-tinted, #f8fafc); }
.mo-home-search .mo-home-search__title { margin: 0 0 10px; color: var(--text, #0f172a); font-size: 16px; font-weight: 800; }
.mo-home-search__form { display: flex; gap: 10px; }
.mo-home-search__form .mo-filterbar__search-field { flex: 1 1 auto; min-width: 0; }
.mo-home-search__form .btn { flex: none; width: auto; min-height: 46px; padding-inline: 22px; }
.mo-home-search__form .mo-filterbar__search-field input { width: 100%; min-height: 46px; padding-left: 42px; font-size: 15px; }
.mo-home-search__examples { margin: 8px 0 0; color: var(--muted, #64748b); font-size: 13px; }
.mo-home-search__note { margin: 10px 0 0; color: var(--muted, #64748b); font-size: 12.5px; line-height: 1.45; }
.mo-route-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mo-route-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mo-home-practice-note { margin: 14px 0 0; }
.mo-home-faq-more { margin: 14px 0 0; }
.mo-home-final__login { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14px; }
@media (max-width: 900px) { .mo-route-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .mo-route-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .mo-home-search__form { flex-direction: column; }
  .mo-home-search__form .btn { width: 100%; }
}

/* ===================== REVISIÓN DE INTENTO Y PREGUNTA ===================== */
/* Revisión de un simulacro/examen (privada): filtros en pastillas y una
   tarjeta por pregunta con acento por resultado; detalle de una pregunta
   fallada con la opción correcta y la última respuesta marcadas. */
.mo-stat--slate { --tone: var(--tone-slate); }
.mo-review-count { color: var(--muted, #64748b); font-variant-numeric: tabular-nums; font-weight: 800; }
.mo-filter-pill[aria-current="page"] .mo-review-count { color: inherit; }
.mo-review-note { margin: 0 0 14px; }
.mo-review-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mo-review-item {
  --row-accent: var(--tone-slate);
  min-width: 0;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--mo-card-border);
  border-left: 4px solid var(--row-accent);
  border-radius: 14px;
}
.mo-review-item--ok { --row-accent: var(--tone-green); }
.mo-review-item--fail { --row-accent: var(--tone-red); }
.mo-review-item__head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.mo-review-item__num { color: var(--text, #0f172a); font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums; }
.mo-review-item__statement { display: block; color: var(--text, #0f172a); font-size: 15px; line-height: 1.55; text-decoration: none; }
.mo-review-item__statement:hover { color: var(--mo-link); text-decoration: underline; }
.mo-review-item__statement:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--mo-focus); }
.mo-review-item__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.mo-review-item__answer { min-width: 0; padding: 8px 12px; border-radius: 10px; background: rgba(15, 23, 42, .03); }
.mo-review-item__answer dt { color: var(--muted, #64748b); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mo-review-item__answer dd { margin: 2px 0 0; color: var(--text-secondary, #3b4356); font-size: 14px; line-height: 1.5; }
.mo-review-item__answer.is-correct { background: rgba(4, 120, 87, .07); }
.mo-review-item__answer.is-correct dd { color: var(--text, #0f172a); font-weight: 650; }
.mo-review-item__answer.is-wrong { background: rgba(190, 18, 60, .06); }
.mo-review-item__answer.is-wrong dd { color: #9f1239; font-weight: 650; }
.mo-question__opt.is-wrong { background: rgba(190, 18, 60, .06); color: var(--text, #0f172a); }
.mo-question__flag--wrong { background: #ffe4e6; color: #9f1239; }
.mo-notice--amber { border-color: color-mix(in srgb, var(--tone-amber) 25%, white); background: rgba(180, 83, 9, .05); }
.mo-notice--amber .mo-icon { color: var(--tone-amber); }
.mo-pregunta-sin-tema { margin-top: 14px; }
.mo-report > summary { list-style: none; cursor: pointer; }
.mo-report > summary::-webkit-details-marker { display: none; }
.mo-report[open] > summary { margin-bottom: 14px; }
.mo-report__body > p { max-width: var(--mo-measure-wide); margin: 0 0 10px; color: var(--text-secondary, #3b4356); font-size: 14px; line-height: 1.55; }
.mo-report__body .mo-form { margin-top: 14px; }
@media (max-width: 640px) {
  .mo-review-item { padding: 12px 14px; }
  .mo-review-item__answers { grid-template-columns: 1fr; }
}

/* ============================== PANEL PRIVADO ============================= */
/* «/» con sesión: hojas mo- en columna principal + calendario y novedades en
   el lateral. La navegación de Mi espacio vive en el contexto del hero. */
.mo-panel-lead { margin: 0 0 12px; color: var(--text-secondary, #3b4356); font-size: 14.5px; line-height: 1.55; }
.mo-panel-more { margin: 14px 0 0; }
.mo-panel-status { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mo-panel-status > li,
.mo-panel-status > div {
  --dot: var(--tone-slate);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border, #e2e8f0);
  color: var(--text-secondary, #3b4356);
  font-size: 14.5px;
}
.mo-panel-status > :first-child { border-top: 0; }
.mo-panel-status > li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.mo-panel-status > li > span,
.mo-panel-status dt { flex: 1 1 auto; }
.mo-panel-status strong,
.mo-panel-status dd { margin: 0; color: var(--text, #0f172a); font-size: 16px; font-weight: 850; font-variant-numeric: tabular-nums; }
.mo-panel-status > .mo-panel-status--green { --dot: var(--tone-green); }
.mo-panel-status > .mo-panel-status--amber { --dot: var(--tone-amber); }
.mo-panel-status > .mo-panel-status--red { --dot: var(--tone-red); }
.mo-panel-kpis .mo-panel-status--green dd { color: var(--tone-green); }
.mo-panel-kpis .mo-panel-status--red dd { color: var(--tone-red); }
.mo-panel-card { border-top: 4px solid var(--panel-accent, var(--tone-slate)); }
.mo-panel-card--red { --panel-accent: var(--tone-red); }
.mo-panel-card--green { --panel-accent: var(--tone-green); }
.mo-panel-quote {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--tone-red);
  border-radius: 0 10px 10px 0;
  background: rgba(190, 18, 60, .04);
  color: var(--text, #0f172a);
  font-size: 14.5px;
  line-height: 1.55;
}
.mo-panel-count { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; color: var(--muted, #64748b); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mo-panel-count strong { color: var(--tone-red); font-size: 22px; letter-spacing: 0; }
.mo-panel-next-title { margin: 0 0 4px; color: var(--text, #0f172a); font-size: 16px; font-weight: 800; }

.mo-minical { margin: 12px 0 0; }
.mo-minical__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.mo-minical__month { color: var(--text, #0f172a); font-size: 15px; font-weight: 800; text-decoration: none; text-transform: capitalize; }
.mo-minical__month:hover { color: var(--mo-link); }
.mo-minical__arrow {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  color: var(--mo-link);
  font-weight: 800;
  text-decoration: none;
}
.mo-minical__arrow:hover { border-color: var(--mo-link); }
.mo-minical__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mo-minical__wd { padding: 2px 0 4px; color: var(--muted, #64748b); font-size: 11.5px; font-weight: 800; text-align: center; }
.mo-minical__day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 9px;
  color: var(--text-secondary, #3b4356);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
a.mo-minical__day:hover { background: rgba(15, 23, 42, .05); color: var(--text, #0f172a); }
.mo-minical__day.has-events { background: color-mix(in srgb, var(--mo-link) 8%, white); color: var(--mo-link); }
.mo-minical__day.has-events::after { content: ""; position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--mo-link); }
.mo-minical__day.is-today { box-shadow: inset 0 0 0 2px var(--mo-link); color: var(--mo-link); }
.mo-minical__day:focus-visible { outline: none; box-shadow: var(--mo-focus); }

.mo-panel-hits { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border, #e2e8f0); }
.mo-panel-hits__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mo-panel-hits__head h3 { margin: 0; color: var(--text, #0f172a); font-size: 15px; font-weight: 800; }
.mo-panel-hits__head .mo-block-title { margin: 0; }
.mo-panel-hits__head a { color: var(--mo-link); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.mo-panel-hits ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mo-panel-hits li { display: grid; gap: 2px; font-size: 13.5px; }
.mo-panel-hits time { color: var(--muted, #64748b); font-size: 12px; font-weight: 800; }
.mo-panel-hits li a { color: var(--text, #0f172a); font-weight: 700; text-decoration: none; }
.mo-panel-hits li a:hover { color: var(--mo-link); text-decoration: underline; }
.mo-panel-hits li span { color: var(--muted, #64748b); }
.mo-split__aside .mo-panel-hits p { margin: 0; font-size: 13.5px; }
.mo-panel .mo-split__aside .mo-process-row__meta { margin: 4px 0 0; font-size: 12.5px; }
@media (max-width: 1100px) { .mo-panel.mo-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .mo-panel .mo-split--even { grid-template-columns: minmax(0, 1fr); }
}

/* ================================ SIMULACRO =============================== */
/* /simulacros/: landing pública, creador y simulacro en curso. Las clases de
   la pregunta (q-*, opt*) y de la barra las genera o usa el script de la
   página, por eso van acotadas bajo .mo-sim. */
.mo-sim-text { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14.5px; line-height: 1.55; }
.mo-sim-subtitle { margin: 0 0 10px; color: var(--text, #0f172a); font-size: 15.5px; font-weight: 800; }
.mo-sim-count { margin-left: 4px; color: var(--muted, #64748b); font-weight: 800; }
.mo-sim-intro { align-items: center; }
.mo-sim-callout { padding: 18px 20px; border: 1px solid var(--mo-card-border); border-radius: 14px; background: var(--mo-surface-tinted, #f8fafc); }
.mo-sim-callout__title { margin: 0 0 4px; color: var(--text, #0f172a); font-size: 16px; font-weight: 800; }
.mo-sim-callout p { margin: 0 0 12px; color: var(--text-secondary, #3b4356); font-size: 14.5px; }
.mo-sim-callout .mo-hero__actions { margin: 0; }

.mo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: mo-step; }
.mo-steps > li {
  position: relative;
  min-width: 0;
  padding: 16px 16px 16px 60px;
  border: 1px solid var(--mo-card-border);
  border-radius: 14px;
  background: #fff;
  counter-increment: mo-step;
}
.mo-steps > li::before {
  content: counter(mo-step);
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mo-link) 10%, white);
  color: var(--mo-link);
  font-weight: 850;
}
.mo-steps > li:nth-child(2)::before { background: rgba(180, 83, 9, .1); color: var(--tone-amber); }
.mo-steps > li:nth-child(3)::before { background: rgba(4, 120, 87, .1); color: var(--tone-green); }
.mo-steps h3 { margin: 0 0 4px; color: var(--text, #0f172a); font-size: 15px; font-weight: 800; }
.mo-steps p { margin: 0; color: var(--text-secondary, #3b4356); font-size: 14px; line-height: 1.5; }

.mo-sim-loading { text-align: center; }
.mo-sim-loading p { margin: 0 0 16px; color: var(--text-secondary, #3b4356); font-size: 16px; }
.mo-sim-spinner { display: block; width: 40px; height: 40px; margin: 0 auto; border: 3px solid var(--border, #e2e8f0); border-top-color: var(--mo-link); border-radius: 50%; animation: mo-sim-spin .8s linear infinite; }
@keyframes mo-sim-spin { to { transform: rotate(360deg); } }

.mo-sim-fields { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 14px; }
.mo-sim-fields__submit { min-height: 44px; white-space: nowrap; }
.mo-sim .mo-form select,
.mo-sim .mo-form input[type="number"] {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  color: var(--text, #0f172a);
  font: inherit;
  font-size: 14.5px;
}
.mo-sim .mo-form select:focus-visible,
.mo-sim .mo-form input:focus-visible { outline: none; border-color: var(--mo-link); box-shadow: var(--mo-focus); }

.mo-sim-topics { margin: 22px 0 18px; padding-top: 18px; border-top: 1px solid var(--border, #e2e8f0); }
.mo-sim-topics__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 12px; }
.mo-sim-topics__status { display: flex; align-items: center; gap: 12px; color: var(--text, #0f172a); font-size: 14px; white-space: nowrap; }
.mo-sim-linkbtn { padding: 0; border: 0; background: none; color: var(--mo-link); font: inherit; font-weight: 700; cursor: pointer; }
.mo-sim-linkbtn:hover { text-decoration: underline; }
.mo-sim-native { display: none; }
.mo-sim-topics__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.mo-sim-topics__browser .mo-filterbar__search-field input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px 9px 42px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font: inherit;
  font-size: 14.5px;
}
.mo-sim-topics__options { display: grid; gap: 6px; max-height: 320px; margin-top: 10px; padding-right: 4px; overflow-y: auto; }
.mo-sim-topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--mo-card-border);
  border-radius: 10px;
  background: #fff;
  color: var(--text, #0f172a);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.mo-sim-topic small { flex: none; color: var(--muted, #64748b); font-size: 12.5px; font-weight: 700; }
.mo-sim-topic:hover { border-color: var(--mo-link); }
.mo-sim-topic.is-selected { border-color: var(--mo-link); background: color-mix(in srgb, var(--mo-link) 8%, white); color: var(--mo-link); }
.mo-sim-topic[hidden] { display: none; }
.mo-sim-topics__selection { min-width: 0; padding: 14px; border: 1px dashed var(--border, #e2e8f0); border-radius: 12px; background: var(--mo-surface-tinted, #f8fafc); }
.mo-sim-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-sim-empty { margin: 0; color: var(--muted, #64748b); font-size: 14px; }
.mo-sim-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--mo-card-border);
  border-radius: 999px;
  background: #fff;
  color: var(--text, #0f172a);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mo-sim-chip--selected { border-color: color-mix(in srgb, var(--mo-link) 35%, white); background: color-mix(in srgb, var(--mo-link) 8%, white); color: var(--mo-link); }
.mo-sim-chip:disabled { opacity: .45; cursor: default; }
.mo-sim-suggestions { margin-top: 14px; }
.mo-sim-suggestions > span { display: block; margin-bottom: 6px; color: var(--muted, #64748b); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mo-sim-suggestions > div { display: flex; flex-wrap: wrap; gap: 6px; }

.mo-sim .toast { display: none; margin-top: 12px; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.mo-sim .toast.ok { background: #ecfdf5; border: 1px solid #a7f3d0; }
.mo-sim .toast.bad { background: #fef2f2; border: 1px solid #fecaca; color: #9f1239; }

.mo-sim-status { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--border, #e2e8f0); }
.mo-sim-status .pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--mo-card-border);
  border-radius: 999px;
  background: var(--mo-surface-tinted, #f8fafc);
  color: var(--text, #0f172a);
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.mo-sim #pillTimer { font-weight: 850; }
.mo-sim #pillTimer.timer-warning { border-color: #f59e0b; background: #fef3c7; color: #b45309; animation: mo-sim-pulse 1s ease-in-out infinite; }
.mo-sim #pillTimer.timer-critical { border-color: #ef4444; background: #fee2e2; color: #b91c1c; animation: mo-sim-pulse .5s ease-in-out infinite; }
@keyframes mo-sim-pulse { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .mo-sim #pillTimer { animation: none !important; } }

.mo-sim-question { padding-top: 16px; }
.mo-sim .q-header { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 10px; }
.mo-sim .q-bar { flex: none; padding: 5px 12px; border-radius: 999px; background: var(--mo-link); color: #fff; font-size: 13.5px; font-weight: 800; }
.mo-sim .q-bar-context { min-width: 0; overflow: hidden; color: var(--muted, #64748b); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.mo-sim .qtitle { margin: 4px 0 0; color: var(--text, #0f172a); font-size: 17px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.mo-sim .options { display: grid; gap: 8px; margin-top: 14px; }
.mo-sim .opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--mo-card-border);
  border-radius: 12px;
  background: #fff;
  color: var(--text-secondary, #3b4356);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.mo-sim .opt:hover { border-color: color-mix(in srgb, var(--mo-link) 45%, white); background: #fbfcff; }
.mo-sim .opt-label { flex: none; color: var(--muted, #64748b); font-weight: 800; text-transform: lowercase; }
.mo-sim .opt--selected { border-color: var(--mo-link); background: color-mix(in srgb, var(--mo-link) 7%, white); color: var(--text, #0f172a); font-weight: 650; }
.mo-sim .opt--selected .opt-label { color: var(--mo-link); }
.mo-sim .opt.correct { border-color: var(--tone-green); background: #f0fdf4; }
.mo-sim .opt.wrong { border-color: var(--tone-red); background: #fef2f2; }
.mo-sim .q-revisar-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #e2e8f0); }
.mo-sim .q-revisar-row label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary, #3b4356); font-size: 14px; cursor: pointer; }
.mo-sim .q-revisar-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mo-link); }
.mo-sim .muted { color: var(--muted, #64748b); }

.mo-sim-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border, #e2e8f0); }
.mo-sim-bar .bar-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.mo-sim-bar .btn,
.mo-sim-modal .btn,
#summaryCard .btn { width: auto; min-width: 110px; }
.mo-sim-finish.btn-secondary { border-color: transparent; background: #475569; color: #fff; }
.mo-sim-finish.btn-secondary:hover { background: #334155; color: #fff; }

.mo-sim-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .45); }
.mo-sim-modal.show { display: flex; }
.mo-sim-modal .modal-revisar { width: 100%; max-width: 440px; padding: 22px; border-radius: 16px; background: #fff; box-shadow: 0 24px 48px rgba(15, 23, 42, .2); }
.mo-sim-modal .mo-block-title { margin: 0 0 14px; font-size: 18px; }
.mo-sim-modal .revisar-row { margin-bottom: 12px; font-size: 14px; }
.mo-sim-modal .revisar-row strong { display: block; margin-bottom: 2px; color: var(--text, #0f172a); }
.mo-sim-modal .revisar-nums { color: var(--muted, #64748b); overflow-wrap: anywhere; }
.mo-sim-modal .revisar-nums.respondidas { color: var(--tone-green); }
.mo-sim-modal .revisar-nums.sin-responder { color: var(--tone-red); }
.mo-sim-modal .revisar-link { margin-right: 2px; color: var(--mo-link); font-weight: 700; text-decoration: underline; }
.mo-sim-modal .mo-hero__actions { margin-top: 18px; }
.mo-sim-danger.btn-primary { border-color: var(--tone-red); background: var(--tone-red); }
.mo-sim-danger.btn-primary:hover { background: #9f1239; }

/* Con el simulacro en marcha (creado sin recargar) sobran las hojas de ayuda. */
.mo-sim:has(#simCard:not(.d-none)) .mo-sim-support { display: none; }
@media (max-width: 1100px) { .mo-sim-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mo-sim-fields__submit { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .mo-steps,
  .mo-sim-topics__grid { grid-template-columns: minmax(0, 1fr); }
  .mo-sim-fields { grid-template-columns: minmax(0, 1fr); }
  .mo-sim-bar { flex-direction: column; align-items: stretch; }
  .mo-sim-bar .bar-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-sim-bar .bar-nav .btn,
  .mo-sim-finish { width: 100%; min-width: 0; }
  .mo-sim .qtitle { font-size: 16px; }
}

/* ================================ MAPA ==================================== */
/* Mapa de concejos de Asturias (Leaflet) dentro de una hoja. */
.mo-map-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0; list-style: none; color: var(--text-secondary, #3b4356); font-size: 13.5px; font-weight: 700; }
.mo-map-legend li { display: inline-flex; align-items: center; gap: 7px; }
.mo-map-legend__dot { width: 12px; height: 12px; border: 2px solid; border-radius: 50%; }
.mo-map-legend__dot--open { border-color: #15803d; background: #22c55e; }
.mo-map-legend__dot--has { border-color: #1e63ff; background: color-mix(in srgb, #1e63ff 60%, white); }
.mo-map-legend__dot--empty { border-color: #64748b; background: #cbd5e1; }
#asturias-map.mo-map,
#asturias-map.mo-map.leaflet-container {
  width: 100%; height: min(70vh, 680px); min-height: 420px;
  overflow: hidden; border: 1px solid var(--mo-card-border); border-radius: 14px;
  background: #e8eef5; font: inherit; z-index: 1;
}
.mo-map .leaflet-popup-content { margin: 12px 14px; font-size: 13.5px; line-height: 1.5; }
.mo-map .leaflet-popup-content a { color: var(--mo-link); font-weight: 700; }
.mo-map .leaflet-popup-content ul { margin: 6px 0 0 18px; padding: 0; }
.mo-map-popup-muted { color: var(--muted, #64748b); }
.mo-map-source { margin: 10px 0 0; font-size: 12.5px; }
.mo-map-open-list { margin-top: 6px; text-align: left; font-weight: 600; }
.mo-map-open-list ul { display: grid; gap: 4px; margin: 6px 0 0 16px; padding: 0; }
@media (max-width: 640px) {
  #asturias-map.mo-map, #asturias-map.mo-map.leaflet-container { height: 62vh; min-height: 360px; }
}

/* ============================= RESPONSIVE ================================ */
@media (max-width: 1100px) {
  .mo-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mo-hero__card { grid-template-columns: 1fr; padding: 22px 24px; }
  .mo-hero__context { margin: 2px -24px -22px; padding: 12px 24px 14px; }
}

@media (max-width: 760px) {
  :root { --mo-section-gap: 20px; }

  .mo-sheet { padding: 20px 18px 22px; border-radius: 18px; }
  .mo-section-head { gap: 12px; margin-bottom: 18px; padding-bottom: 16px; }
  .mo-section-head > .mo-icon-box { width: 40px; height: 40px; border-radius: 12px; }
  .mo-section-head__intro { font-size: 14.5px; }
  .mo-section-head__aside { flex: 1 1 100%; align-self: flex-start; padding-left: 52px; }

  .mo-summary-grid { grid-template-columns: 1fr; }
  .mo-summary-card { padding: 18px; }

  /* Barra de filtros: [Buscar] a todo el ancho; debajo [Filtros (N)] y
     [Ordenar] en la misma fila (el <details> ocupa la fila y su summary solo
     la mitad izquierda; al abrirse, el panel se despliega a todo el ancho). */
  .mo-filterbar { padding: 14px; }
  .mo-filterbar__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .mo-filterbar__top { display: contents; }
  .mo-filterbar__search { grid-column: 1 / -1; grid-row: 1; }
  .mo-filterbar__order { position: relative; z-index: 1; grid-column: 2; grid-row: 2; align-self: start; }
  .mo-filterbar__order .mo-filterbar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mo-filterbar .mo-filterbar__order select { min-height: 44px; }
  .mo-filterbar .mo-filterbar__search-field input { font-size: 16px; }
  .mo-filterbar__filters { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .mo-filterbar__filters > .mo-filterbar__toggle { width: calc(50% - 5px); }
  .mo-filterbar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid var(--input-border, #e2e8f0);
    border-radius: 12px;
    background: #fff;
    color: var(--text, #0f172a);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
  }
  .mo-filterbar__toggle::-webkit-details-marker { display: none; }
  .mo-filterbar__toggle:focus-visible { outline: none; box-shadow: var(--mo-focus); }
  .mo-filterbar__filters[open] > .mo-filterbar__toggle { margin-bottom: 12px; }
  .mo-filterbar__grid { flex-direction: column; align-items: stretch; }
  .mo-filterbar__grid > .filter-multi { flex: none; }
  .mo-filterbar__more-toggle { width: 100%; justify-content: space-between; }
  .mo-filterbar .mo-filterbar__checks { position: static; width: auto; margin-top: 8px; box-shadow: none; }
  .mo-filterbar__actions .btn { width: 100%; }
}

@media (max-width: 640px) {
  .mo-hero { padding-top: 12px; }
  .mo-hero__card { padding: 20px 18px; border-radius: 18px; }
  .mo-hero__context { display: block; margin: 2px -18px -20px; padding: 12px 18px 14px; border-radius: 0 0 18px 18px; }
  .mo-hero__context .mo-subheading { margin-bottom: 8px; }
  /* En móvil la franja contextual va en una sola fila desplazable: el hero
     no crece con cada píldora y el contenido queda más arriba. */
  .mo-hero__context .mo-filter-pills {
    flex-wrap: nowrap;
    margin: 0 -18px;
    padding: 2px 18px 6px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .mo-hero__context .mo-filter-pill { flex: none; white-space: nowrap; }
  .mo-hero__identity { flex-direction: column; gap: 14px; }
  .mo-mark { width: 76px; height: 76px; border-radius: 14px; }
  .mo-mark--simbolo { padding: 10px; }
  .mo-mark.mo-icon-box .mo-icon { width: 36px; height: 36px; }
  .mo-hero .mo-hero__title { margin: 8px 0; }
  .mo-hero .mo-hero__lead { font-size: 15.5px; }
  .mo-hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .mo-stat-panel { box-shadow: none; }

  .mo-route-grid { grid-template-columns: 1fr; }
  .mo-territory-card { padding: 16px; }
  .mo-logo { width: 48px; height: 48px; border-radius: 12px; }
  .mo-logo img { width: 38px; height: 38px; }
  .mo-territory-card .mo-logo img { width: 40px; height: 30px; }
  .mo-territory-card .mo-logo--escudo img { width: 30px; height: 40px; }
}

@media (max-width: 380px) {
  .mo-sheet { padding: 18px 14px 20px; }
  .mo-section-head { flex-direction: column; }
  .mo-section-head__aside { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-metric,
  .mo-link-arrow .mo-icon,
  .mo-territory-card,
  .mo-filter-pill,
  .mo-route-card,
  .mo-route-card__arrow,
  .mo-stat--link,
  .mo-faq summary::after,
  .mo-topic-card,
  .mo-topic-card__action .mo-icon,
  .mo-filterbar__more-toggle::after { transition: none; }
  .mo-topic-card__action:hover .mo-icon { transform: none; }
  .mo-route-card:hover,
  .mo-route-card:hover .mo-route-card__arrow,
  .mo-territory-card:hover,
  .mo-link-arrow:hover .mo-icon { transform: none; }
}