/* ============================================================================
   PANEL Y AULA — Solo en calma
   Componentes de las trece pantallas propias mas las dos de LearnDash.
   Se encola solo en pantallas de aplicacion (ver inc/assets.php).

   Depende de assets/css/tokens.css. Aqui no hay ni un hexadecimal, ni una
   familia tipografica, ni una sombra escritos a mano: todo entra por var().
   Las unicas medidas literales son las del armazon del panel (ancho de barra,
   alto de cabecera, alto de fila), que son decisiones de esta pantalla y no
   valores de marca; van agrupadas abajo para poder cambiarlas en un sitio.

   Tipografia: aqui se usan los clamp() reales del sistema, no los escalones
   por punto de ruptura de la web publica. En el panel no hay editor visual
   que pueda mentir sobre el tamaño, asi que se usa la escala fluida de verdad.

   Los estados del caso se pintan por clase, nunca por color suelto:
   creado · esperando_video · en_cola · en_revision · informe_entregado ·
   cerrado · derivado.
   ============================================================================ */


/* ── 0 · Armazon: medidas propias del panel ─────────────────────────────────
   Vienen del mockup (05-panel-inicio-mockup) y de sus notas. No son tokens de
   marca: describen esta reticula concreta. Se redefinen por punto de ruptura. */
.sc-panel,
.sc-aula {
  --sc-panel-barra: 260px;
  --sc-panel-barra-estrecha: 76px;
  --sc-panel-rail: 340px;
  --sc-panel-cabecera: 72px;
  --sc-panel-nav-movil: 80px;
  --sc-panel-columna: var(--sc-ancho-contenido);
  --sc-panel-marca-activa: 3px;
  --sc-panel-fila: 64px;
  --sc-panel-campo: 48px;
  --sc-panel-opcion: 56px;
  --sc-panel-zona-subida: 240px;
  --sc-panel-anillo: 152px;
  --sc-panel-barra-cajon: 260px;

  /* Filete interior del armazon. El mockup lo pinta como tinta al 8 % para que
     funcione igual sobre crema, sobre elevada y sobre hundida; el borde sutil
     opaco solo acierta sobre una de las tres. */
  --sc-panel-filete: color-mix(in srgb, var(--sc-marron-900) 8%, transparent);
  --sc-panel-filete-fuerte: color-mix(in srgb, var(--sc-marron-900) 12%, transparent);
  --sc-panel-filete-claro: color-mix(in srgb, var(--sc-marron-100) 16%, transparent);
}


/* ── 1 · Armazon ───────────────────────────────────────────────────────────── */

.sc-panel {
  display: grid;
  grid-template-columns: var(--sc-panel-barra) minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--sc-color-superficie);
  color: var(--sc-texto-primario);
  font-family: var(--sc-fuente-lectura);
}

.sc-panel--barra-estrecha {
  --sc-panel-barra: var(--sc-panel-barra-estrecha);
}

.sc-panel--sin-rail {
  --sc-panel-rail: 0px;
}

/* Barra lateral */
.sc-barra {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  background: var(--sc-color-superficie);
  transition: width var(--sc-dur-normal) var(--sc-ease-suave);
}

.sc-barra__marca {
  flex: none;
  display: flex;
  align-items: center;
  height: var(--sc-panel-cabecera);
  padding-inline: var(--sc-espacio-5);
  border-bottom: var(--sc-trazo-fino) solid var(--sc-panel-filete);
}

/* base.css subraya todos los <a> del contenido, y ahi tiene razon. Aqui no:
   la marca, la cabecera y la barra inferior son navegacion, no texto corrido. */
.sc-barra__marca a,
.sc-cabecera__cuenta,
.sc-cabecera__perro,
.sc-cabecera__icono,
.sc-nav-movil__enlace { text-decoration: none; }

.sc-barra__marca img { height: 30px; width: auto; display: block; }

/* Dos marcas en el marcado y el CSS enseña la que cabe: el horizontal con la
   barra ancha y el símbolo solo cuando se pliega, donde el horizontal quedaba
   encogido hasta no leerse. Se cambia con la barra, sin ir al servidor. */
/* Con `.sc-barra__marca` delante y no la clase sola: la regla de arriba es
   `.sc-barra__marca img`, que es 0,1,1 y le ganaba a un 0,1,0. Sin esto, en
   móvil se veían las dos marcas a la vez. */
.sc-barra__marca .sc-barra__logo--simbolo { display: none; }

.sc-panel--barra-estrecha .sc-barra__marca { justify-content: center; padding-inline: var(--sc-espacio-2); }
.sc-panel--barra-estrecha .sc-barra__logo--ancho { display: none; }
.sc-panel--barra-estrecha .sc-barra__logo--simbolo { display: block; height: 32px; }

.sc-barra__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sc-espacio-6);
  padding: var(--sc-espacio-5) var(--sc-espacio-3);
}

.sc-barra__grupo { display: flex; flex-direction: column; gap: var(--sc-espacio-1); }

.sc-barra__rotulo {
  margin: 0 0 var(--sc-espacio-15);
  padding-inline: var(--sc-espacio-3);
  font-size: var(--sc-tipo-etiqueta);
  font-weight: var(--sc-peso-fuerte);
  letter-spacing: var(--sc-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--sc-texto-terciario);
}

.sc-barra__enlace {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-3);
  min-height: var(--sc-toque-minimo);
  padding-inline: var(--sc-espacio-3);
  border-radius: var(--sc-radio-m);
  color: var(--sc-texto-secundario);
  font-size: var(--sc-tipo-cuerpo-s);
  font-weight: var(--sc-peso-medio);
  text-decoration: none;
  transition: background-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

/* base.css colorea todo <a> que no sea de Divi, y `a:visited` (0,1,1) le gana a
   una clase sola (0,1,0): un control ya visitado salia con el marron de enlace
   visitado. Cada componente con forma de control repite aqui su color con
   :is(:link, :visited), que sube a 0,2,0. Va pegado a su regla, y no en una
   seccion aparte, para no adelantarse al estado activo ni al hover, que tambien
   son 0,2,0 y ganan por orden. */

.sc-barra__enlace:is(:link, :visited) { color: var(--sc-texto-secundario); }

.sc-barra__enlace:hover {
  background: var(--sc-capa-hover);
  color: var(--sc-texto-primario);
}

/* La marca de 3 px es lo unico del elemento activo que sobrevive al colapso:
   sin etiqueta, el fondo hundido solo no distingue el destino. */
.sc-barra__enlace::before {
  content: "";
  position: absolute;
  inset-block: var(--sc-espacio-2);
  inset-inline-start: 0;
  width: var(--sc-panel-marca-activa);
  border-radius: var(--sc-radio-pildora);
  background: transparent;
}

.sc-barra__enlace[aria-current="page"] {
  background: var(--sc-color-superficie-hundida);
  color: var(--sc-texto-primario);
  font-weight: var(--sc-peso-fuerte);
}

.sc-barra__enlace[aria-current="page"]::before { background: var(--sc-color-accion); }
.sc-barra__enlace[aria-current="page"] .sc-icono { fill: var(--sc-capa-seleccion); }

.sc-barra__texto { min-width: 0; }
.sc-panel--barra-estrecha .sc-barra__enlace { justify-content: center; }
.sc-panel--barra-estrecha .sc-barra__texto,
.sc-panel--barra-estrecha .sc-barra__rotulo,
.sc-panel--barra-estrecha .sc-barra__aviso { display: none; }

.sc-barra__pie {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sc-espacio-4);
  padding: var(--sc-espacio-4) var(--sc-espacio-3) var(--sc-espacio-5);
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
}

/* Aviso permanente. No se oculta nunca en la barra ancha: es un compromiso
   del producto, no un adorno. */
.sc-barra__aviso {
  margin: 0;
  padding-inline: var(--sc-espacio-3);
  font-size: var(--sc-tipo-etiqueta);
  line-height: var(--sc-linea-compacta);
  color: var(--sc-texto-terciario);
}

/* El velo del cajon de movil es HERMANO de la barra, nunca hijo: un ancestro
   con transform crea contenedor de bloque y el position: fixed del velo
   dejaria de referirse al viewport. */
.sc-barra__velo { display: none; }

/* Cabecera */
.sc-marco { display: flex; flex-direction: column; min-width: 0; }

.sc-cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-4);
  height: var(--sc-panel-cabecera);
  padding-inline: var(--sc-espacio-6);
  border-bottom: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  background: var(--sc-color-superficie);
}

.sc-cabecera__titulo {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-1);
  line-height: var(--sc-linea-titulo);
  letter-spacing: var(--sc-tracking-titulo);
}

.sc-cabecera__hueco { flex: 1; }

.sc-cabecera__separador {
  flex: none;
  width: var(--sc-trazo-fino);
  height: var(--sc-espacio-8);
  background: var(--sc-panel-filete-fuerte);
}

/* Volver lleva escrito el nombre del padre: una flecha sola obliga a recordar
   de donde se venia. */
.sc-volver,
.sc-cabecera__icono,
.sc-cabecera__perro,
.sc-cabecera__cuenta {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-espacio-2);
  border: var(--sc-trazo-normal) solid transparent;
  background: transparent;
  color: var(--sc-texto-secundario);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-cuerpo-s);
  font-weight: var(--sc-peso-semi);
  cursor: pointer;
  transition: background-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              border-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-volver:is(:link, :visited),
.sc-cabecera__icono:is(:link, :visited),
.sc-cabecera__perro:is(:link, :visited),
.sc-cabecera__cuenta:is(:link, :visited) { color: var(--sc-texto-secundario); }

.sc-volver {
  height: 40px;
  padding: 0 var(--sc-espacio-3) 0 var(--sc-espacio-2);
  border-radius: var(--sc-radio-m);
  border-color: var(--sc-color-borde-sutil);
  background: var(--sc-color-superficie-elevada);
}

.sc-volver:hover { border-color: var(--sc-color-borde); color: var(--sc-texto-primario); }

.sc-cabecera__icono {
  width: 40px;
  height: 40px;
  justify-content: center;
  border-radius: var(--sc-radio-m);
}

.sc-cabecera__icono:hover { background: var(--sc-capa-hover); color: var(--sc-texto-primario); }

.sc-cabecera__perro {
  height: 40px;
  padding-inline: var(--sc-espacio-15) var(--sc-espacio-3);
  border-radius: var(--sc-radio-pildora);
  border-color: var(--sc-color-borde-sutil);
  background: var(--sc-color-superficie-elevada);
  color: var(--sc-texto-primario);
}

.sc-cabecera__perro:is(:link, :visited) { color: var(--sc-texto-primario); }

.sc-cabecera__perro:hover { border-color: var(--sc-color-borde); background: var(--sc-color-superficie-hundida); }
.sc-cabecera__perro img { width: 28px; height: 28px; border-radius: var(--sc-radio-circulo); object-fit: cover; }

.sc-cabecera__cuenta {
  height: var(--sc-toque-minimo);
  padding-inline: var(--sc-espacio-2);
  border-radius: var(--sc-radio-m);
  text-align: start;
}

.sc-cabecera__cuenta:hover { background: var(--sc-capa-hover); }

.sc-cabecera__inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--sc-radio-circulo);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde-sutil);
  background: var(--sc-color-superficie-hundida);
  font-size: var(--sc-tipo-nota);
  font-weight: var(--sc-peso-fuerte);
  color: var(--sc-texto-secundario);
}

.sc-cabecera__identidad { display: flex; flex-direction: column; align-items: flex-start; line-height: var(--sc-linea-compacta); }
.sc-cabecera__nombre { font-size: var(--sc-tipo-cuerpo-s); font-weight: var(--sc-peso-semi); color: var(--sc-texto-primario); }
.sc-cabecera__rol { font-size: var(--sc-tipo-etiqueta); color: var(--sc-texto-terciario); }

/* Area de contenido y rail */
.sc-contenido {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sc-panel-rail);
  gap: var(--sc-espacio-6);
  align-items: start;
  padding: var(--sc-espacio-6);
}

.sc-contenido--sin-rail { grid-template-columns: minmax(0, 1fr); }

.sc-columna {
  display: flex;
  flex-direction: column;
  gap: var(--sc-espacio-6);
  min-width: 0;
  max-width: var(--sc-panel-columna);
}

.sc-rail { display: flex; flex-direction: column; gap: var(--sc-espacio-5); min-width: 0; }

/* Rejilla de tarjetas. El numero de columnas es una decision de cada seccion,
   no del componente: por eso va por modificador y no por auto-fit. */
.sc-rejilla { display: grid; gap: var(--sc-espacio-5); }
.sc-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-rejilla--holgada { gap: var(--sc-espacio-6); }

.sc-seccion { display: flex; flex-direction: column; gap: var(--sc-espacio-4); min-width: 0; }

.sc-seccion__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-4);
  flex-wrap: wrap;
}

.sc-seccion__titulo {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-2);
  line-height: var(--sc-linea-titulo);
}

.sc-seccion__meta { font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); }
.sc-seccion__hueco { flex: 1; }

.sc-rotulo {
  margin: 0;
  font-size: var(--sc-tipo-etiqueta);
  font-weight: var(--sc-peso-fuerte);
  letter-spacing: var(--sc-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--sc-texto-terciario);
}

/* Barra inferior de movil: cinco destinos, no siete. Ayuda vive en la cabecera
   y Mis pedidos dentro de Mi cuenta, que es donde se buscan. */
.sc-nav-movil { display: none; }


/* Barra de administracion de WordPress.

   Es `position: fixed` en el 0 del viewport, y el `margin-top` que WordPress le
   pone al <html> para compensarla NO mueve el ancla de un sticky: sin esto la
   cabecera y la barra lateral del panel se pegan justo debajo de ella y quedan
   tapadas. Solo lo ve quien tiene sesion de administrador.

   La altura no se escribe: la sirve el propio WordPress en
   --wp-admin--admin-bar--height (32 px, y 46 por debajo de 782), asi que este
   bloque no puede desincronizarse de admin-bar.css. */
body.admin-bar {
  --sc-barra-admin: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 600px) {
  /* Por debajo de 600 px WordPress la suelta (position: absolute) y se va con
     el scroll: no hay nada que descontar. Medido en admin-bar.css, no supuesto. */
  body.admin-bar { --sc-barra-admin: 0px; }
}

body.admin-bar .sc-panel { min-height: calc(100dvh - var(--sc-barra-admin)); }
body.admin-bar .sc-cabecera { top: var(--sc-barra-admin); }

/* La barra lateral, ademas del ancla, tiene que devolver esa altura: con
   100dvh sobresalia por abajo justo lo que mide la barra de administracion.
   Vale para los dos modos, sticky en escritorio y cajon fijo en movil. */
body.admin-bar .sc-barra {
  top: var(--sc-barra-admin);
  height: calc(100dvh - var(--sc-barra-admin));
}


/* ── 2 · Tarjetas ──────────────────────────────────────────────────────────── */

.sc-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--sc-espacio-4);
  min-width: 0;
  padding: var(--sc-espacio-6);
  border: var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
  border-radius: var(--sc-radio-l);
  background: var(--sc-color-superficie-elevada);
  box-shadow: var(--sc-sombra-1);
  color: var(--sc-texto-primario);
}

.sc-tarjeta--amplia { padding: var(--sc-espacio-8); }
.sc-tarjeta--hundida { background: var(--sc-color-superficie-hundida); box-shadow: var(--sc-sombra-0); }
.sc-tarjeta--plana { box-shadow: var(--sc-sombra-0); }

/* Tarjeta pulsable. El unico movimiento permitido es 2 px: el sistema no
   celebra, tampoco al pasar el puntero. */
.sc-tarjeta--enlace {
  text-decoration: none;
  cursor: pointer;
  text-align: start;
  font: inherit;
  transition: transform var(--sc-dur-rapida) var(--sc-ease-entrada),
              box-shadow var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-tarjeta--enlace:is(:link, :visited) { color: inherit; }

.sc-tarjeta--enlace:hover { transform: translateY(-2px); box-shadow: var(--sc-sombra-2); }
.sc-tarjeta--enlace:active { transform: scale(var(--sc-escala-pulsada)); }

.sc-tarjeta__titulo {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-2);
  line-height: var(--sc-linea-titulo);
}

.sc-tarjeta__texto {
  margin: 0;
  font-size: var(--sc-tipo-cuerpo-s);
  line-height: var(--sc-linea-cuerpo);
  color: var(--sc-texto-secundario);
  max-width: var(--sc-medida-lectura);
}

.sc-tarjeta__pie {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-4);
  padding-top: var(--sc-espacio-4);
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  font-size: var(--sc-tipo-nota);
  color: var(--sc-texto-terciario);
}

/* Marco de icono de tarjeta */
.sc-marco-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--sc-toque-minimo);
  height: var(--sc-toque-minimo);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-superficie-hundida);
  color: var(--sc-texto-secundario);
}

.sc-marco-icono--grande { width: 56px; height: 56px; }

/* Tarjeta de leccion o de ruta: campo de color liso y la escena en multiply.
   Las ilustraciones llegan en mapa de bits con fondo crema opaco; multiply es
   lo que lo hace desaparecer. Cuando existan en SVG con alfa, esto sobra. */
.sc-tarjeta-ruta { padding: 0; overflow: hidden; gap: 0; }
.sc-tarjeta-ruta__escena { position: relative; display: block; height: 132px; overflow: hidden; background: var(--sc-acento-100); }
.sc-tarjeta-ruta__escena img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.sc-tarjeta-ruta__escena--hundida { background: var(--sc-marron-150); }
.sc-tarjeta-ruta__escena--aviso { background: var(--sc-color-aviso-superficie); }

.sc-tarjeta-ruta__modulo {
  position: absolute;
  inset-block-start: var(--sc-espacio-3);
  inset-inline-start: var(--sc-espacio-3);
  padding: var(--sc-espacio-1) var(--sc-espacio-3);
  border-radius: var(--sc-radio-pildora);
  background: var(--sc-color-superficie);
  color: var(--sc-texto-secundario);
  font-size: var(--sc-tipo-etiqueta);
  font-weight: var(--sc-peso-fuerte);
  letter-spacing: var(--sc-tracking-etiqueta);
  text-transform: uppercase;
}

.sc-tarjeta-ruta__cuerpo { display: flex; flex-direction: column; gap: var(--sc-espacio-3); padding: var(--sc-espacio-4) var(--sc-espacio-5) var(--sc-espacio-5); }

/* Indicador: rotulo, cifra grande y pie. La cifra va en Fraunces con cifras
   tabulares porque es el dato que la persona vino a mirar. */
.sc-indicador { flex-direction: row; align-items: flex-start; gap: var(--sc-espacio-5); }
.sc-indicador__datos { display: flex; flex-direction: column; gap: var(--sc-espacio-1); min-width: 0; }
.sc-indicador__rotulo { margin: 0; font-size: var(--sc-tipo-nota); font-weight: var(--sc-peso-semi); color: var(--sc-texto-terciario); }

.sc-indicador__cifra {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-display-3);
  line-height: 1.1;
  letter-spacing: var(--sc-tracking-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sc-indicador__pie { margin: 0; font-size: var(--sc-tipo-nota); line-height: var(--sc-linea-compacta); color: var(--sc-texto-terciario); }


/* Tarjeta del perro: anillo centrado, nombre debajo y la medida separada por
   un filete. Es la unica tarjeta que centra su contenido. */
.sc-tarjeta--centrada { align-items: center; text-align: center; gap: var(--sc-espacio-2); }
.sc-tarjeta--centrada .sc-anillo { margin-bottom: var(--sc-espacio-3); }

/* El detalle va pegado al nombre. No usa __pie porque ese lleva filete propio,
   y aqui el unico filete de la tarjeta separa la medida. */
/* Acciones al pie de una tarjeta. Es la misma idea que .sc-derivacion__acciones
   y .sc-bloque-hoy__acciones, en la tarjeta corriente. El boton no se estira al
   ancho: una tarjeta con un boton a sangre se lee como una llamada a la accion,
   y esto es una ficha. `margin-top: auto` lo pega abajo para que las tarjetas de
   una rejilla alineen sus botones aunque el texto mida distinto. */
.sc-tarjeta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-espacio-3);
  margin-top: auto;
}

.sc-tarjeta__detalle {
  margin: 0;
  font-size: var(--sc-tipo-nota);
  color: var(--sc-texto-terciario);
}

.sc-tarjeta__medida {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sc-espacio-2);
  width: 100%;
  padding-top: var(--sc-espacio-5);
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
}

/* Accesos del rail: icono en marco, texto y flecha. Se llama asi y no
   .sc-ayuda porque ese nombre ya es el de la nota bajo un campo. */
.sc-accesos { display: flex; flex-direction: column; width: 100%; }

.sc-accesos__enlace {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-4);
  min-height: var(--sc-toque-minimo);
  padding-block: var(--sc-espacio-3);
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  color: var(--sc-texto-primario);
  text-decoration: none;
  transition: color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-accesos__enlace:is(:link, :visited) { color: var(--sc-texto-primario); }

.sc-accesos__enlace:hover { color: var(--sc-texto-enlace); }
.sc-accesos__texto { flex: 1; font-size: var(--sc-tipo-cuerpo-s); font-weight: var(--sc-peso-semi); }


/* ── 3 · Bloque de la accion de hoy ─────────────────────────────────────────
   Superficie inversa, un solo boton primario, ni un emoji ni una exclamacion.
   Es la unica pieza del panel que invierte el color, y por eso manda. */

.sc-bloque-hoy {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-10);
  min-height: 264px;
  padding: var(--sc-espacio-8) var(--sc-espacio-10);
  border-radius: var(--sc-radio-xl);
  background: var(--sc-color-superficie-inversa);
  color: var(--sc-color-tinta-sobre-inversa);
  overflow: hidden;
}

.sc-bloque-hoy__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sc-espacio-4); max-width: 680px; }
.sc-bloque-hoy__saludo { margin: 0; font-size: var(--sc-tipo-cuerpo-s); color: var(--sc-marron-400); }

.sc-bloque-hoy__titulo {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-calido);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-display-3);
  line-height: var(--sc-linea-display);
  letter-spacing: var(--sc-tracking-display);
  color: var(--sc-color-tinta-sobre-inversa);
}

.sc-bloque-hoy__entradilla {
  margin: 0;
  font-size: var(--sc-tipo-cuerpo);
  line-height: var(--sc-linea-cuerpo);
  color: var(--sc-marron-300);
  max-width: var(--sc-medida-corta);
}

.sc-bloque-hoy__acciones { display: flex; align-items: center; gap: var(--sc-espacio-4); flex-wrap: wrap; margin-top: var(--sc-espacio-15); }
.sc-bloque-hoy__nota { font-size: var(--sc-tipo-cuerpo-s); color: var(--sc-marron-400); }

/* Panel crema recortado: sobre el marron oscuro, el multiply mata la escena.
   Aqui va dentro de su propia superficie clara. */
.sc-bloque-hoy__escena { flex: none; width: 340px; height: 204px; border-radius: var(--sc-radio-l); overflow: hidden; background: var(--sc-color-superficie); }
.sc-bloque-hoy__escena img { width: 100%; height: 100%; object-fit: cover; }

.sc-bloque-hoy__cifra {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-display-1);
  line-height: .92;
  letter-spacing: var(--sc-tracking-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--sc-color-tinta-sobre-inversa);
}


/* ── 4 · Tabla ─────────────────────────────────────────────────────────────
   Una sola tabla para pedidos, historial de practicas y datos de la curva.
   Cabecera en versalitas de 12 px, filas de 64 px, separador de 1 px. */

.sc-tabla-envoltorio { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sc-tabla {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sc-tabla th {
  padding: var(--sc-espacio-4) var(--sc-espacio-4) var(--sc-espacio-3);
  border-bottom: var(--sc-trazo-fino) solid var(--sc-panel-filete-fuerte);
  font-size: var(--sc-tipo-etiqueta);
  font-weight: var(--sc-peso-fuerte);
  letter-spacing: var(--sc-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--sc-texto-terciario);
  text-align: start;
  white-space: nowrap;
}

.sc-tabla td {
  padding-inline: var(--sc-espacio-4);
  height: var(--sc-panel-fila);
  border-bottom: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  font-size: var(--sc-tipo-cuerpo-s);
  vertical-align: middle;
}

.sc-tabla th:first-child,
.sc-tabla td:first-child { padding-inline-start: 0; }
.sc-tabla th:last-child,
.sc-tabla td:last-child { padding-inline-end: 0; }

.sc-tabla__cifra { text-align: end; }
.sc-tabla__principal { font-weight: var(--sc-peso-semi); }
.sc-tabla__apagado { color: var(--sc-texto-secundario); }
.sc-tabla tbody tr:last-child td { border-bottom: 0; }
.sc-tabla tbody tr:hover { background: var(--sc-capa-hover); }

.sc-tabla--densa td { height: auto; padding-block: var(--sc-espacio-3); font-size: var(--sc-tipo-nota); }
.sc-tabla--densa th { padding-block: var(--sc-espacio-2); }

/* Etiqueta de tipo de pedido: pildora neutra, no un distintivo de estado. */
.sc-etiqueta-tipo {
  display: inline-flex;
  align-items: center;
  padding: var(--sc-espacio-05) var(--sc-espacio-3);
  border-radius: var(--sc-radio-pildora);
  background: var(--sc-color-superficie-hundida);
  color: var(--sc-texto-terciario);
  font-size: var(--sc-tipo-etiqueta);
  font-weight: var(--sc-peso-fuerte);
  letter-spacing: var(--sc-tracking-etiqueta);
  text-transform: uppercase;
  white-space: nowrap;
}


/* ── 5 · Distintivos de estado ─────────────────────────────────────────────
   El estado se pinta por clase, nunca escribiendo un color en la plantilla.
   Los siete estados del caso son: creado · esperando_video · en_cola ·
   en_revision · informe_entregado · cerrado · derivado.

   Regla de accesibilidad del sistema: el color no es nunca el unico portador.
   Aqui esa regla se cumple por tres vias que no dependen del tono:
     1. El distintivo lleva SIEMPRE texto. Sin excepcion.
     2. Los siete estados del caso llevan delante un punto dibujado con
        ::before cuya FORMA codifica la familia del estado. El criterio
        completo esta en el bloque de los siete estados, mas abajo.
     3. Los tres estados con consecuencia (esperando video, informe entregado,
        derivado) llevan ademas icono en la plantilla. */

.sc-distintivo {
  /* Tracking propio del distintivo: mas apretado que la versalita de rotulo
     (0,12 em) porque en una pildora de 12 px ese tracking la desborda. */
  --sc-distintivo-tracking: .04em;
  /* Punto de familia. Medida propia de esta pildora, no un valor de marca:
     7 px es lo mas pequeño que deja distinguir relleno, hueco y aro grueso
     al lado de una versalita de 12 px. El grosor sale de los trazos del
     sistema; el «relleno» es media anchura por cada lado, que cierra el
     circulo entero. Se dibuja con borde, no con fondo ni con sombra, a
     proposito: el borde es lo unico que sobrevive a forced-colors. */
  --sc-distintivo-punto: 7px;
  --sc-distintivo-punto-relleno: calc(var(--sc-distintivo-punto) / 2);
  --sc-distintivo-punto-aro: var(--sc-trazo-fino);
  --sc-distintivo-punto-aro-grueso: var(--sc-trazo-icono);
  display: inline-flex;
  align-items: center;
  gap: var(--sc-espacio-1);
  padding: var(--sc-espacio-05) var(--sc-espacio-3);
  border: var(--sc-trazo-fino) solid var(--sc-color-borde);
  border-radius: var(--sc-radio-pildora);
  background: var(--sc-color-superficie-hundida);
  color: var(--sc-texto-secundario);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-etiqueta);
  font-weight: var(--sc-peso-fuerte);
  letter-spacing: var(--sc-distintivo-tracking);
  line-height: 1.5;
  white-space: nowrap;
}

.sc-distintivo .sc-icono { width: 13px; height: 13px; stroke-width: 2.5; }

/* Tonos base del sistema */
.sc-distintivo--neutro { background: var(--sc-color-superficie-hundida); color: var(--sc-texto-secundario); border-color: var(--sc-color-borde); }
.sc-distintivo--acento { background: var(--sc-acento-100); color: var(--sc-acento-600); border-color: var(--sc-acento-200); }
.sc-distintivo--confirmacion { background: var(--sc-color-confirmacion-superficie); color: var(--sc-color-confirmacion-texto); border-color: var(--sc-color-confirmacion-borde); }
.sc-distintivo--aviso { background: var(--sc-color-aviso-superficie); color: var(--sc-color-aviso-texto); border-color: var(--sc-color-aviso-borde); }
.sc-distintivo--derivacion { background: var(--sc-color-derivacion-superficie); color: var(--sc-color-derivacion-texto); border-color: var(--sc-color-derivacion-borde); }
.sc-distintivo--info { background: var(--sc-color-info-superficie); color: var(--sc-color-info-texto); border-color: var(--sc-color-info-borde); }

/* Los siete estados del caso, cada uno a su tono ---------------------------
   Tabla ratificada. Se deja escrita entera para que la proxima persona no
   tenga que deducir el criterio a partir del token que ve:

   creado             neutro          superficie hundida · texto 2.º · borde normal.
                                      El caso existe y todavia no pide nada a nadie.
   esperando_video    aviso           superficie, texto y borde de aviso. Ver la
                                      nota de abajo: es el unico cambio.
   en_cola            neutro apagado  superficie hundida · texto 3.º · borde sutil.
                                      Esta en nuestras manos y el tutor no tiene
                                      nada que hacer: se apaga a proposito para
                                      que no reclame atencion.
   en_revision        info            Alguien lo esta mirando. Azul apagado y
                                      contenido, nunca azul de hospital.
   informe_entregado  confirmacion    Oliva, y viene fijado por el sistema. Hay
                                      resultado; no significa «todo bien», y por
                                      eso no es ni puede ser verde de semaforo.
   cerrado            sin fondo       texto 3.º · borde normal. El caso ya no esta
                                      vivo: el distintivo se retira del todo y
                                      solo queda el contorno.
   derivado           derivacion      Oxido, y viene fijado por el sistema. Es lo
                                      mas grave que hay aqui y aun asi NO es una
                                      alarma: dice «parate y busca apoyo», no
                                      «error». Nunca rojo.

   Por que esperando_video pasa de acento a aviso, que es el unico cambio de la
   ratificacion: esperando_video es el unico estado que pide una accion al
   tutor. El acento es el color de la accion —botones y enlaces—; usarlo
   tambien como distintivo compite con los botones y diluye la señal. El ambar
   de aviso dice «falta algo tuyo» sin alarmar, que es exactamente el tono
   correcto. */
.sc-distintivo--creado { background: var(--sc-color-superficie-hundida); color: var(--sc-texto-secundario); border-color: var(--sc-color-borde); }
.sc-distintivo--esperando-video { background: var(--sc-color-aviso-superficie); color: var(--sc-color-aviso-texto); border-color: var(--sc-color-aviso-borde); }
.sc-distintivo--en-cola { background: transparent; color: var(--sc-texto-terciario); border-color: var(--sc-color-borde-sutil); }
.sc-distintivo--en-revision { background: var(--sc-color-info-superficie); color: var(--sc-color-info-texto); border-color: var(--sc-color-info-borde); }
.sc-distintivo--informe-entregado { background: var(--sc-color-confirmacion-superficie); color: var(--sc-color-confirmacion-texto); border-color: var(--sc-color-confirmacion-borde); }
.sc-distintivo--cerrado { background: transparent; color: var(--sc-texto-terciario); border-color: var(--sc-color-borde); }
.sc-distintivo--derivado { background: var(--sc-color-derivacion-superficie); color: var(--sc-color-derivacion-texto); border-color: var(--sc-color-derivacion-borde); }

/* Contraste en modo oscuro.
   Los tonos -300 de estado estan medidos contra la pagina (#2E1A12), pero dentro del
   distintivo el sustrato es la superficie tintada, que es mas clara. Ahi caen por
   debajo de 4,5:1: esperando_video 3,85 · en_revision 3,89 · informe_entregado 3,91 ·
   derivado 4,18. Quitar el fondo los devuelve a AA (5,08 / 5,02 / 5,14 / 5,11 sobre
   pagina; 4,59 / 4,54 / 4,64 / 4,62 sobre superficie elevada) sin inventar un color
   nuevo. El borde y el punto siguen portando el estado, asi que no se pierde senal. */
[data-tema="oscuro"] .sc-distintivo--esperando-video,
[data-tema="oscuro"] .sc-distintivo--en-revision,
[data-tema="oscuro"] .sc-distintivo--informe-entregado,
[data-tema="oscuro"] .sc-distintivo--derivado { background: transparent; }

/* Segunda señal, no cromatica: la forma del punto --------------------------
   Antes de este bloque la unica diferencia entre los siete estados era el
   tono. Ahora cada uno lleva delante un punto de CSS puro —sin imagen y sin
   icono externo— cuya forma agrupa el estado por familia:

     relleno      el caso esta vivo: esperando_video, en_revision,
                  informe_entregado. Algo se mueve, o algo te espera.
     hueco        el caso esta quieto: creado, en_cola, cerrado. Nadie tiene
                  que hacer nada ahora mismo.
     aro grueso   derivado. Unico estado que sale del circuito, y unica forma
                  que no se confunde con las otras dos vista de reojo.

   El punto toma currentColor, asi que hereda el tono del distintivo sin que
   haya que escribir aqui un solo valor de marca. Se dibuja solo con borde
   porque en forced-colors el fondo se fuerza y la sombra se elimina, pero el
   borde se conserva: en contraste forzado el punto sigue estando cuando el
   tono ya no esta.

   Cuando la plantilla ya mete icono —los tres estados con consecuencia— el
   punto se retira: la forma del icono ya es la segunda señal, y dos marcas
   delante del texto amontonan una pildora de 12 px. Si un navegador no
   entendiera :has(), esa ultima regla cae entera y se veran punto e icono a
   la vez: mas ruidoso, nunca menos accesible. */
.sc-distintivo--creado::before,
.sc-distintivo--esperando-video::before,
.sc-distintivo--en-cola::before,
.sc-distintivo--en-revision::before,
.sc-distintivo--informe-entregado::before,
.sc-distintivo--cerrado::before,
.sc-distintivo--derivado::before {
  content: "";
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--sc-distintivo-punto);
  height: var(--sc-distintivo-punto);
  border-radius: var(--sc-radio-circulo);
  border: var(--sc-distintivo-punto-relleno) solid currentColor;
}

/* Familia quieta: el mismo punto, vaciado. */
.sc-distintivo--creado::before,
.sc-distintivo--en-cola::before,
.sc-distintivo--cerrado::before { border-width: var(--sc-distintivo-punto-aro); }

/* Derivacion: aro grueso. */
.sc-distintivo--derivado::before { border-width: var(--sc-distintivo-punto-aro-grueso); }

/* Con icono en la plantilla, el punto sobra. */
.sc-distintivo:has(.sc-icono)::before { display: none; }

/* Las tres decisiones de la practica. Reducir es azul apagado y no ambar a
   proposito: es la decision mas frecuente y no puede parecer una advertencia. */
.sc-distintivo--mantener { background: var(--sc-color-superficie-hundida); color: var(--sc-texto-secundario); border-color: var(--sc-color-borde); }
.sc-distintivo--reducir { background: var(--sc-color-info-superficie); color: var(--sc-color-info-texto); border-color: var(--sc-color-info-borde); }
.sc-distintivo--parar { background: var(--sc-color-aviso-superficie); color: var(--sc-color-aviso-texto); border-color: var(--sc-color-aviso-borde); }

/* Estados de pedido y de envio */
.sc-distintivo--pagado { background: var(--sc-color-confirmacion-superficie); color: var(--sc-color-confirmacion-texto); border-color: var(--sc-color-confirmacion-borde); }
.sc-distintivo--preparando { background: var(--sc-color-superficie-hundida); color: var(--sc-texto-secundario); border-color: var(--sc-color-borde); }
.sc-distintivo--enviado { background: var(--sc-color-info-superficie); color: var(--sc-color-info-texto); border-color: var(--sc-color-info-borde); }
.sc-distintivo--entregado { background: var(--sc-color-confirmacion-superficie); color: var(--sc-color-confirmacion-texto); border-color: var(--sc-color-confirmacion-borde); }
.sc-distintivo--reembolsado { background: transparent; color: var(--sc-texto-terciario); border-color: var(--sc-color-borde); }

/* Variante solida: solo para el distintivo del anillo del rail */
.sc-distintivo--solido {
  background: var(--sc-color-accion);
  border-color: transparent;
  color: var(--sc-color-tinta-sobre-acento);
  box-shadow: var(--sc-sombra-2);
}


/* ── 6 · Barra de progreso ─────────────────────────────────────────────────
   Lineal para lecciones, modulos y subida; anillo para el umbral del rail.
   Nunca lleva porcentaje solo: al lado va siempre la cifra en texto. */

.sc-progreso {
  display: block;
  width: 100%;
  height: var(--sc-espacio-1);
  border-radius: var(--sc-radio-pildora);
  background: var(--sc-panel-filete-fuerte);
  overflow: hidden;
}

.sc-progreso__valor {
  display: block;
  height: 100%;
  width: var(--sc-progreso-valor, 0%);
  border-radius: var(--sc-radio-pildora);
  background: var(--sc-color-accion);
  transition: width var(--sc-dur-calma) var(--sc-ease-suave);
}

.sc-progreso--gruesa { height: var(--sc-espacio-2); }
.sc-progreso--media { height: var(--sc-espacio-15); }

/* Sobre superficie inversa el carril tiene que ser crema translucido: la tinta
   al 12 % desaparece sobre el marron oscuro. */
.sc-progreso--sobre-inverso { background: var(--sc-panel-filete-claro); }
.sc-progreso--sobre-video { background: color-mix(in srgb, var(--sc-marron-100) 28%, transparent); }
.sc-progreso--sobre-video .sc-progreso__valor { background: var(--sc-marron-100); }

/* Anillo del rail. El SVG se gira -90 grados para que arranque arriba. */
.sc-anillo { position: relative; width: var(--sc-panel-anillo); height: var(--sc-panel-anillo); flex: none; }
.sc-anillo svg { display: block; transform: rotate(-90deg); }
.sc-anillo__carril { fill: none; stroke: var(--sc-panel-filete-fuerte); stroke-width: 8; }

.sc-anillo__valor {
  fill: none;
  stroke: var(--sc-color-accion);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray var(--sc-dur-calma) var(--sc-ease-suave);
}

.sc-anillo__retrato {
  position: absolute;
  inset: var(--sc-espacio-4);
  width: calc(100% - var(--sc-espacio-8));
  height: calc(100% - var(--sc-espacio-8));
  border-radius: var(--sc-radio-circulo);
  object-fit: cover;
}

.sc-anillo__cifra {
  position: absolute;
  inset-inline-end: calc(var(--sc-espacio-15) * -1);
  inset-block-end: var(--sc-espacio-3);
  padding: var(--sc-espacio-1) var(--sc-espacio-3);
  border-radius: var(--sc-radio-pildora);
  background: var(--sc-color-accion);
  box-shadow: var(--sc-sombra-2);
  color: var(--sc-color-tinta-sobre-acento);
  font-size: var(--sc-tipo-nota);
  font-weight: var(--sc-peso-fuerte);
  font-variant-numeric: tabular-nums;
}
.sc-anillo--compacto { --sc-panel-anillo: 84px; }
.sc-anillo--compacto .sc-anillo__carril,
.sc-anillo--compacto .sc-anillo__valor { stroke-width: 6; }
.sc-anillo--compacto .sc-anillo__retrato { inset: var(--sc-espacio-3); width: calc(100% - var(--sc-espacio-6)); height: calc(100% - var(--sc-espacio-6)); }


/* ── 7 · Linea de estados del caso ─────────────────────────────────────────
   Cinco nodos en Mi caso, tres en el envio del pedido: el mismo componente.
   El nodo actual lleva halo y ademas el rotulo «estas aqui» — el halo solo
   no distingue lo hecho de lo pendiente para quien no ve el color. */

.sc-linea-estados {
  list-style: none;
  margin: 0;
  --sc-linea-grosor: 2px;
  --sc-linea-eje: calc((var(--sc-espacio-6) - var(--sc-linea-grosor)) / 2);
  display: flex;
  align-items: flex-start;
  padding-inline: var(--sc-espacio-2);
}

.sc-linea-estados__nodo {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sc-espacio-3);
  text-align: center;
  min-width: 0;
}

.sc-linea-estados__nodo::before,
.sc-linea-estados__nodo::after {
  content: "";
  position: absolute;
  inset-block-start: var(--sc-linea-eje);
  height: var(--sc-linea-grosor);
  background: var(--sc-color-borde);
}

.sc-linea-estados__nodo::before { inset-inline-end: 50%; inset-inline-start: 0; }
.sc-linea-estados__nodo::after { inset-inline-start: 50%; inset-inline-end: 0; }
.sc-linea-estados__nodo:first-child::before,
.sc-linea-estados__nodo:last-child::after { display: none; }

/* Los tramos ya recorridos van en acento; los que faltan, en borde normal. */
.sc-linea-estados__nodo--hecho::before,
.sc-linea-estados__nodo--hecho::after,
.sc-linea-estados__nodo--actual::before { background: var(--sc-color-accion); }

.sc-linea-estados__punto {
  position: relative;
  z-index: 2;
  width: var(--sc-espacio-6);
  height: var(--sc-espacio-6);
  border-radius: var(--sc-radio-circulo);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde);
  background: var(--sc-color-superficie-elevada);
}

.sc-linea-estados__nodo--hecho .sc-linea-estados__punto { background: var(--sc-color-accion); border-color: var(--sc-color-accion); }

.sc-linea-estados__nodo--actual .sc-linea-estados__punto {
  border-color: var(--sc-color-accion);
  border-width: var(--sc-trazo-foco);
  box-shadow: 0 0 0 var(--sc-espacio-15) var(--sc-capa-seleccion);
}

.sc-linea-estados__nodo--derivado .sc-linea-estados__punto { background: var(--sc-derivacion-500); border-color: var(--sc-derivacion-500); }
.sc-linea-estados__nodo--derivado::before { background: var(--sc-derivacion-500); }

.sc-linea-estados__texto { font-size: var(--sc-tipo-cuerpo-s); color: var(--sc-texto-terciario); }
.sc-linea-estados__nodo--hecho .sc-linea-estados__texto,
.sc-linea-estados__nodo--actual .sc-linea-estados__texto { color: var(--sc-texto-primario); font-weight: var(--sc-peso-semi); }
.sc-linea-estados__nodo--derivado .sc-linea-estados__texto { color: var(--sc-color-derivacion-texto); }

.sc-linea-estados__fecha { font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); font-variant-numeric: tabular-nums; }

.sc-linea-estados__aqui {
  font-size: var(--sc-tipo-etiqueta);
  font-weight: var(--sc-peso-fuerte);
  letter-spacing: var(--sc-distintivo-tracking, .04em);
  color: var(--sc-color-accion);
}


/* ── 8 · Pasos de fase ─────────────────────────────────────────────────────
   Cuatro pasos numerados y pulsables dentro de una tarjeta (Subir video).
   Se mantiene aparte de la linea de estados porque es interactivo y numerado;
   aquella es de lectura y lleva fechas. */

.sc-pasos { display: flex; gap: var(--sc-espacio-2); }

.sc-pasos__paso {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-3);
  min-height: var(--sc-toque-minimo);
  padding: var(--sc-espacio-3) var(--sc-espacio-4);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde-sutil);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-superficie-elevada);
  color: var(--sc-texto-terciario);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-cuerpo-s);
  font-weight: var(--sc-peso-semi);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              background-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-pasos__paso:hover { background: var(--sc-capa-hover); }

.sc-pasos__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--sc-espacio-6);
  height: var(--sc-espacio-6);
  border-radius: var(--sc-radio-circulo);
  border: var(--sc-trazo-normal) solid currentColor;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-size: var(--sc-tipo-etiqueta);
  font-variant-numeric: tabular-nums;
}

.sc-pasos__paso--hecho { color: var(--sc-texto-primario); border-color: var(--sc-color-borde); }
.sc-pasos__paso--hecho .sc-pasos__numero { background: var(--sc-color-accion); border-color: var(--sc-color-accion); color: var(--sc-color-tinta-sobre-acento); }
.sc-pasos__paso--actual { color: var(--sc-texto-primario); border-color: var(--sc-color-borde-acento); background: var(--sc-color-superficie-tintada); }
.sc-pasos__paso[aria-disabled="true"] { cursor: not-allowed; color: var(--sc-color-tinta-inactiva); }


/* ── 9 · Tarjeta de derivacion ─────────────────────────────────────────────
   La pieza mas delicada del sistema. Oxido profundo, nunca alarma. Mismo peso
   tipografico y misma reticula que cualquier otra tarjeta: no es una pantalla
   de consolacion. Y no admite ni una oferta dentro, por construccion. */

.sc-derivacion {
  display: flex;
  flex-direction: column;
  gap: var(--sc-espacio-5);
  padding: var(--sc-espacio-8);
  border: var(--sc-trazo-normal) solid var(--sc-color-derivacion-borde);
  border-radius: var(--sc-radio-l);
  background: var(--sc-color-superficie-elevada);
}

.sc-derivacion__cabecera { display: flex; align-items: flex-start; gap: var(--sc-espacio-4); }

.sc-derivacion__marco {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--sc-toque-minimo);
  height: var(--sc-toque-minimo);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-derivacion-superficie);
  color: var(--sc-color-derivacion-texto);
}

.sc-derivacion__titulo {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-1);
  line-height: var(--sc-linea-titulo);
  color: var(--sc-texto-primario);
}

.sc-derivacion__texto {
  margin: 0;
  font-size: var(--sc-tipo-cuerpo);
  line-height: var(--sc-linea-cuerpo);
  color: var(--sc-texto-secundario);
  max-width: var(--sc-medida-lectura);
}

.sc-derivacion__pasos { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.sc-derivacion__paso {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-espacio-3);
  padding-block: var(--sc-espacio-3);
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  font-size: var(--sc-tipo-cuerpo-s);
  line-height: var(--sc-linea-cuerpo);
  color: var(--sc-texto-primario);
}

.sc-derivacion__paso .sc-icono { color: var(--sc-color-derivacion-texto); margin-top: .15em; }
.sc-derivacion__acciones { display: flex; align-items: center; gap: var(--sc-espacio-3); flex-wrap: wrap; }

/* Firma y fecha, como en el informe: es la marca cumpliendo su promesa. */
.sc-derivacion__firma {
  margin: 0;
  padding-top: var(--sc-espacio-4);
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  font-size: var(--sc-tipo-nota);
  color: var(--sc-texto-terciario);
  font-variant-numeric: tabular-nums;
}

/* Bloque de reembolso: visible, con su boton, nunca escondido en un enlace. */
.sc-reembolso__importe {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-1);
}


/* ── 10 · Avisos ───────────────────────────────────────────────────────────
   Cuatro tonos: info · confirmacion · aviso · derivacion. Ni verde de semaforo
   ni rojo de error. El tono acompaña siempre a un texto que dice que hacer. */

.sc-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-espacio-4);
  padding: var(--sc-espacio-4) var(--sc-espacio-5);
  border: var(--sc-trazo-fino) solid var(--sc-color-info-borde);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-info-superficie);
  color: var(--sc-texto-primario);
  font-size: var(--sc-tipo-cuerpo-s);
  line-height: var(--sc-linea-cuerpo);
}

.sc-aviso .sc-icono { flex: none; margin-top: .12em; color: var(--sc-color-info-texto); }
.sc-aviso__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sc-espacio-1); }
.sc-aviso__titulo { margin: 0; font-weight: var(--sc-peso-fuerte); }
.sc-aviso__texto { margin: 0; }
.sc-aviso__accion { flex: none; }

.sc-aviso--info { border-color: var(--sc-color-info-borde); background: var(--sc-color-info-superficie); }
.sc-aviso--info .sc-icono { color: var(--sc-color-info-texto); }
.sc-aviso--confirmacion { border-color: var(--sc-color-confirmacion-borde); background: var(--sc-color-confirmacion-superficie); }
.sc-aviso--confirmacion .sc-icono { color: var(--sc-color-confirmacion-texto); }
.sc-aviso--aviso { border-color: var(--sc-color-aviso-borde); background: var(--sc-color-aviso-superficie); }
.sc-aviso--aviso .sc-icono { color: var(--sc-color-aviso-texto); }
.sc-aviso--derivacion { border-color: var(--sc-color-derivacion-borde); background: var(--sc-color-derivacion-superficie); }
.sc-aviso--derivacion .sc-icono { color: var(--sc-color-derivacion-texto); }

/* Tira sin accion, al pie de una columna: proxima revision, dato del programa. */
.sc-tira {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-4);
  padding: var(--sc-espacio-5) var(--sc-espacio-6);
  border: var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
  border-radius: var(--sc-radio-l);
  background: var(--sc-color-superficie-hundida);
  font-size: var(--sc-tipo-cuerpo-s);
  color: var(--sc-texto-secundario);
}

.sc-tira .sc-icono { flex: none; color: var(--sc-texto-secundario); }
.sc-tira__hueco { flex: 1; }
.sc-tira strong { color: var(--sc-texto-primario); font-weight: var(--sc-peso-fuerte); }


/* ── 11 · Formularios y campos ─────────────────────────────────────────────
   Campo de 48 px, texto de 16 px para que iOS no haga zoom al enfocar.
   El mensaje de error dice que hacer, no que esta mal. */

.sc-formulario { display: flex; flex-direction: column; gap: var(--sc-espacio-5); max-width: var(--sc-ancho-formulario); }
.sc-formulario--ancho { max-width: none; }
.sc-grupo { display: flex; flex-direction: column; gap: var(--sc-espacio-2); }

.sc-etiqueta {
  font-size: var(--sc-tipo-cuerpo-s);
  font-weight: var(--sc-peso-semi);
  color: var(--sc-texto-primario);
}

.sc-etiqueta__opcional { font-weight: var(--sc-peso-medio); color: var(--sc-texto-terciario); }

.sc-campo {
  width: 100%;
  height: var(--sc-panel-campo);
  padding-inline: var(--sc-espacio-4);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde-campo);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-superficie-sobre-superficie);
  color: var(--sc-texto-primario);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-cuerpo);
  transition: border-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              box-shadow var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-campo::placeholder { color: var(--sc-texto-terciario); }
.sc-campo:hover { border-color: var(--sc-color-borde-campo-hover); }

.sc-campo:focus-visible {
  outline: none;
  border-color: var(--sc-color-borde-acento);
  box-shadow: 0 0 0 3px var(--sc-color-foco-halo);
}

.sc-campo:disabled {
  background: var(--sc-color-superficie-hundida);
  color: var(--sc-color-tinta-inactiva);
  cursor: not-allowed;
}

.sc-campo--area { height: auto; min-height: calc(var(--sc-panel-campo) * 2.5); padding-block: var(--sc-espacio-3); resize: vertical; line-height: var(--sc-linea-cuerpo); }

.sc-campo--select {
  appearance: none;
  padding-inline-end: var(--sc-espacio-10);
  cursor: pointer;
}

.sc-ayuda { font-size: var(--sc-tipo-nota); line-height: var(--sc-linea-compacta); color: var(--sc-texto-terciario); }

/* Error: etiqueta, borde de 2 px, icono y mensaje. Cuatro señales, no una. */
.sc-grupo--error .sc-etiqueta { color: var(--sc-color-derivacion-texto); }
.sc-grupo--error .sc-campo { border-width: var(--sc-trazo-foco); border-color: var(--sc-color-derivacion-borde); }
.sc-grupo--error .sc-campo:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-derivacion-500) 18%, transparent); }

.sc-error {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-2);
  font-size: var(--sc-tipo-nota);
  font-weight: var(--sc-peso-semi);
  color: var(--sc-color-derivacion-texto);
}

.sc-error .sc-icono { flex: none; width: 16px; height: 16px; }

/* Casilla y opcion. La casilla absoluta (menores identificables) lleva filete
   izquierdo en aviso; la del uso formativo, caja de borde discontinuo. */
.sc-casilla { display: flex; align-items: flex-start; gap: var(--sc-espacio-3); padding-block: var(--sc-espacio-2); cursor: pointer; }
.sc-casilla input { flex: none; width: var(--sc-espacio-5); height: var(--sc-espacio-5); margin-top: .12em; accent-color: var(--sc-color-accion); }
.sc-casilla__texto { font-size: var(--sc-tipo-cuerpo-s); line-height: var(--sc-linea-cuerpo); color: var(--sc-texto-secundario); }
.sc-casilla--absoluta { padding-inline-start: var(--sc-espacio-4); border-inline-start: var(--sc-panel-marca-activa) solid var(--sc-color-aviso-borde); }
.sc-casilla--aparte { padding: var(--sc-espacio-4); border: var(--sc-trazo-normal) dashed var(--sc-color-borde); border-radius: var(--sc-radio-m); }

/* Tarjeta seleccionable de 56 px: sustituye al radio pequeño en el cuestionario. */
.sc-opcion {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-3);
  min-height: var(--sc-panel-opcion);
  padding: var(--sc-espacio-3) var(--sc-espacio-5);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde-sutil);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-superficie-elevada);
  color: var(--sc-texto-primario);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-cuerpo);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              background-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-opcion:hover { background: var(--sc-capa-hover); }
.sc-opcion[aria-checked="true"],
.sc-opcion:has(input:checked) {
  border-width: var(--sc-trazo-foco);
  border-color: var(--sc-color-borde-acento);
  background: var(--sc-color-superficie-tintada);
}

/* Pastillas de un solo valor: 48 px, pensadas para el pulgar en el rellano.
   Sustituyen al campo numerico, que ahi no funciona. */
.sc-pastillas { display: flex; flex-wrap: wrap; gap: var(--sc-espacio-2); }

.sc-pastilla {
  min-height: var(--sc-panel-campo);
  padding-inline: var(--sc-espacio-5);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde);
  border-radius: var(--sc-radio-pildora);
  background: var(--sc-color-superficie-elevada);
  color: var(--sc-texto-secundario);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-cuerpo);
  font-weight: var(--sc-peso-semi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              background-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-pastilla:hover { background: var(--sc-capa-hover); }
.sc-pastilla[aria-pressed="true"] {
  background: var(--sc-color-accion);
  border-color: var(--sc-color-accion);
  color: var(--sc-color-tinta-sobre-acento);
}

/* Pastillas, chips y decisiones como CONTROLES DE FORMULARIO.
   El CSS original los penso como <button> con aria-pressed, que necesita
   JavaScript. El panel funciona sin JavaScript —el resto de sus formularios son
   POST y redireccion—, asi que aqui se marca el estado desde el input, que
   ademas trae gratis el teclado, el foco y el envio.
   El input se oculta a la vista pero NO al lector de pantalla ni al tabulador:
   nada de display:none, que lo sacaria de los dos. */
.sc-pastilla,
.sc-chip,
.sc-decision { position: relative; }

.sc-pastilla input,
.sc-chip input,
.sc-decision input {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--sc-espacio-2);
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sc-pastilla { display: inline-flex; align-items: center; justify-content: center; }

.sc-pastilla:has(input:checked) {
  background: var(--sc-color-accion);
  border-color: var(--sc-color-accion);
  color: var(--sc-color-tinta-sobre-acento);
}

/* El foco se pinta sobre la pastilla, no sobre el input escondido. */
.sc-pastilla:has(input:focus-visible),
.sc-chip:has(input:focus-visible),
.sc-decision:has(input:focus-visible) {
  outline: var(--sc-trazo-foco) solid var(--sc-color-foco);
  outline-offset: var(--sc-espacio-05);
}

.sc-chip:has(input:checked) {
  border-width: var(--sc-trazo-foco);
  border-color: var(--sc-color-accion);
  color: var(--sc-texto-primario);
}

.sc-decision:has(input:checked) {
  border-width: var(--sc-trazo-foco);
  border-color: var(--sc-color-accion);
  background: var(--sc-color-superficie-tintada);
}

/* Chips de seleccion multiple: no se despliegan, se tocan. El seleccionado
   engorda el borde a 2 px, asi que la seleccion se ve sin depender del color. */
.sc-chips { display: flex; flex-wrap: wrap; gap: var(--sc-espacio-2); }

.sc-chip {
  min-height: var(--sc-toque-minimo);
  padding-inline: var(--sc-espacio-4);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde);
  border-radius: var(--sc-radio-pildora);
  background: var(--sc-color-superficie-elevada);
  color: var(--sc-texto-secundario);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-cuerpo-s);
  font-weight: var(--sc-peso-semi);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              border-width var(--sc-dur-instante) var(--sc-ease-entrada),
              background-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-chip:hover { background: var(--sc-capa-hover); }
.sc-chip[aria-pressed="true"] {
  border-width: var(--sc-trazo-foco);
  border-color: var(--sc-color-borde-acento);
  background: var(--sc-color-superficie-tintada);
  color: var(--sc-texto-primario);
}

/* Las tres decisiones del dia siguiente, como opciones altas con descripcion. */
.sc-decisiones { display: flex; flex-direction: column; gap: var(--sc-espacio-3); }
.sc-decision { flex-direction: column; align-items: flex-start; gap: var(--sc-espacio-05); min-height: 60px; }
.sc-decision__titulo { font-size: var(--sc-tipo-cuerpo); font-weight: var(--sc-peso-fuerte); }
.sc-decision__pie { font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); }
.sc-decision--reducir[aria-checked="true"] { border-color: var(--sc-color-info-borde); background: var(--sc-color-info-superficie); }
.sc-decision--reducir[aria-checked="true"] .sc-decision__titulo { color: var(--sc-color-info-texto); }
.sc-decision--parar[aria-checked="true"] { border-color: var(--sc-color-aviso-borde); background: var(--sc-color-aviso-superficie); }
.sc-decision--parar[aria-checked="true"] .sc-decision__titulo { color: var(--sc-color-aviso-texto); }

/* Los mismos tonos, marcados desde el input. Reducir va en info y no en ambar
   a proposito: es la decision mas frecuente y no puede parecer una advertencia. */
.sc-decision--reducir:has(input:checked) { border-color: var(--sc-color-info-borde); background: var(--sc-color-info-superficie); }
.sc-decision--reducir:has(input:checked) .sc-decision__titulo { color: var(--sc-color-info-texto); }
.sc-decision--parar:has(input:checked) { border-color: var(--sc-color-aviso-borde); background: var(--sc-color-aviso-superficie); }
.sc-decision--parar:has(input:checked) .sc-decision__titulo { color: var(--sc-color-aviso-texto); }

/* Barra de accion fija al pie del formulario en movil. */
.sc-formulario__pie {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-4);
  padding-top: var(--sc-espacio-5);
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
}

.sc-formulario__pie .sc-formulario__hueco { flex: 1; }


/* ── 12 · Boton ────────────────────────────────────────────────────────────
   Cinco variantes: primaria · secundaria · terciaria · texto · derivacion.
   La de derivacion esta reservada a «buscar apoyo profesional»; no se usa
   para nada mas, y menos aun para borrar cosas por gusto.
   Un solo boton primario por bloque. */

.sc-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-espacio-elemento);
  min-height: var(--sc-toque-minimo);
  padding: var(--sc-espacio-3) var(--sc-espacio-5);
  border: var(--sc-trazo-normal) solid transparent;
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-accion);
  color: var(--sc-color-tinta-sobre-acento);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-cuerpo);
  font-weight: var(--sc-peso-semi);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              border-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              color var(--sc-dur-rapida) var(--sc-ease-entrada),
              transform var(--sc-dur-instante) var(--sc-ease-salida);
}

.sc-boton:is(:link, :visited) { color: var(--sc-color-tinta-sobre-acento); }

.sc-boton:hover { background: var(--sc-color-accion-hover); border-color: var(--sc-color-accion-hover); color: var(--sc-color-tinta-sobre-acento); }
.sc-boton:active { background: var(--sc-color-accion-pulsada); transform: scale(var(--sc-escala-pulsada)); }

/* Tamaños. La s queda por debajo del objetivo tactil, asi que solo en
   escritorio denso: nunca en una pantalla que se toque con el pulgar. */
.sc-boton--s { min-height: 38px; padding: var(--sc-espacio-2) var(--sc-espacio-4); font-size: var(--sc-tipo-cuerpo-s); }
.sc-boton--l { min-height: 56px; padding: var(--sc-espacio-4) var(--sc-espacio-8); font-size: var(--sc-tipo-titulo-3); }
.sc-boton--ancho { width: 100%; }

.sc-boton--secundaria {
  background: transparent;
  border-color: var(--sc-color-borde-fuerte);
  color: var(--sc-texto-primario);
}

.sc-boton--secundaria:is(:link, :visited) { color: var(--sc-texto-primario); }

.sc-boton--secundaria:hover { background: var(--sc-capa-hover); border-color: var(--sc-marron-700); color: var(--sc-texto-primario); }
.sc-boton--secundaria:active { background: var(--sc-capa-pulsada); }

.sc-boton--terciaria { background: var(--sc-color-superficie-hundida); color: var(--sc-texto-secundario); border-color: transparent; }
.sc-boton--terciaria:is(:link, :visited) { color: var(--sc-texto-secundario); }

.sc-boton--terciaria:hover { background: var(--sc-marron-200); border-color: transparent; color: var(--sc-texto-primario); }

.sc-boton--texto {
  min-height: 0;
  padding: var(--sc-espacio-15) var(--sc-espacio-1);
  background: transparent;
  border-color: transparent;
  color: var(--sc-color-enlace);
}

.sc-boton--texto:is(:link, :visited) { color: var(--sc-color-enlace); }

.sc-boton--texto:hover { background: transparent; border-color: transparent; color: var(--sc-color-enlace-hover); text-decoration: underline; }

.sc-boton--derivacion { background: var(--sc-derivacion-500); border-color: var(--sc-derivacion-500); color: var(--sc-blanco); }
.sc-boton--derivacion:is(:link, :visited) { color: var(--sc-blanco); }

.sc-boton--derivacion:hover { background: var(--sc-derivacion-600); border-color: var(--sc-derivacion-600); color: var(--sc-blanco); }

/* Contorno de derivacion: para borrar la cuenta. Nunca relleno: un boton
   solido de ese color en una accion destructiva se lee como alarma. */
.sc-boton--derivacion-contorno { background: transparent; border-color: var(--sc-derivacion-500); color: var(--sc-color-derivacion-texto); }
.sc-boton--derivacion-contorno:is(:link, :visited) { color: var(--sc-color-derivacion-texto); }

.sc-boton--derivacion-contorno:hover { background: var(--sc-color-derivacion-superficie); border-color: var(--sc-derivacion-500); color: var(--sc-color-derivacion-texto); }

/* Sobre superficie inversa: contorno crema, nunca acento sobre marron oscuro. */
.sc-boton--sobre-inverso { background: transparent; border-color: var(--sc-marron-100); color: var(--sc-marron-100); }
.sc-boton--sobre-inverso:is(:link, :visited) { color: var(--sc-marron-100); }

.sc-boton--sobre-inverso:hover { background: var(--sc-panel-filete-claro); border-color: var(--sc-marron-100); color: var(--sc-marron-100); }

/* Deshabilitado sin opacidad global: la opacidad arrastra tambien al texto de
   al lado y deja el boton ilegible. Se apaga con color propio. */
.sc-boton:disabled,
.sc-boton[aria-disabled="true"] {
  background: var(--sc-color-accion-inactiva);
  border-color: transparent;
  color: var(--sc-color-accion-tinta-inactiva);
  cursor: not-allowed;
  transform: none;
}

.sc-boton--secundaria:disabled,
.sc-boton--texto:disabled { background: transparent; border-color: var(--sc-color-borde); }

.sc-boton[aria-busy="true"] .sc-icono { animation: sc-girar 1.1s linear infinite; }

/* Boton cuadrado de icono: paginacion, carrusel de la ruta, cerrar. */
.sc-boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: var(--sc-trazo-normal) solid var(--sc-color-borde-sutil);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-superficie-elevada);
  color: var(--sc-texto-secundario);
  cursor: pointer;
  transition: border-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              background-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-boton-icono:is(:link, :visited) { color: var(--sc-texto-secundario); }

.sc-boton-icono:hover { border-color: var(--sc-color-borde); background: var(--sc-color-superficie-hundida); }
.sc-boton-icono:disabled { color: var(--sc-color-tinta-inactiva); cursor: not-allowed; }

/* Selector de rango en pildora (14 dias · 30 dias · todo) */
.sc-segmentado { display: inline-flex; gap: var(--sc-espacio-1); padding: var(--sc-espacio-05); border-radius: var(--sc-radio-pildora); background: var(--sc-color-superficie-hundida); }

.sc-segmentado__opcion {
  padding: var(--sc-espacio-15) var(--sc-espacio-4);
  border: 0;
  border-radius: var(--sc-radio-pildora);
  background: transparent;
  color: var(--sc-texto-secundario);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-nota);
  font-weight: var(--sc-peso-semi);
  cursor: pointer;
}

.sc-segmentado__opcion[aria-pressed="true"] { background: var(--sc-color-superficie-elevada); color: var(--sc-texto-primario); box-shadow: var(--sc-sombra-1); }
.sc-segmentado__opcion:disabled { color: var(--sc-color-tinta-inactiva); cursor: not-allowed; }


/* ── 13 · Zona de subida ───────────────────────────────────────────────────
   240 px, borde discontinuo. El video no pasa por PHP: sube del navegador al
   almacenamiento con URL firmada, asi que la fila de progreso es progreso real
   de bytes, no una animacion de cortesia. */

.sc-subida {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sc-espacio-3);
  min-height: var(--sc-panel-zona-subida);
  padding: var(--sc-espacio-6);
  border: var(--sc-trazo-foco) dashed var(--sc-color-borde);
  border-radius: var(--sc-radio-l);
  background: var(--sc-color-superficie-hundida);
  text-align: center;
  transition: border-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              background-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-subida[data-arrastrando="true"] { border-color: var(--sc-color-borde-acento); background: var(--sc-color-superficie-tintada); }

.sc-subida__titulo {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-2);
}

.sc-subida__pie { margin: 0; font-size: var(--sc-tipo-cuerpo-s); color: var(--sc-texto-terciario); }

.sc-subida__fila { display: flex; align-items: center; gap: var(--sc-espacio-5); }

.sc-subida__miniatura {
  position: relative;
  flex: none;
  width: 132px;
  height: 78px;
  border-radius: var(--sc-radio-s);
  background: var(--sc-marron-950);
  overflow: hidden;
}

.sc-subida__miniatura img { width: 100%; height: 100%; object-fit: cover; }

/* Capsula legible sobre el fotograma. El sistema prefiere capsula a degradado
   de proteccion salvo sobre video, que es justo este caso. */
.sc-capsula {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-espacio-15);
  padding: var(--sc-espacio-05) var(--sc-espacio-2);
  border-radius: var(--sc-radio-xs);
  background: var(--sc-capsula-fondo);
  backdrop-filter: var(--sc-desenfoque-capsula);
  color: var(--sc-marron-100);
  font-size: var(--sc-tipo-etiqueta);
  font-weight: var(--sc-peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.sc-subida__miniatura .sc-capsula { position: absolute; inset-inline-end: var(--sc-espacio-15); inset-block-end: var(--sc-espacio-15); }

.sc-subida__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sc-espacio-15); }
.sc-subida__nombre { margin: 0; font-size: var(--sc-tipo-cuerpo-s); font-weight: var(--sc-peso-semi); overflow-wrap: anywhere; }
.sc-subida__meta { margin: 0; font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); font-variant-numeric: tabular-nums; }
.sc-subida__cifra-bloque { flex: none; text-align: end; }

.sc-subida__cifra {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}


/* ── 14 · Estado vacio ─────────────────────────────────────────────────────
   Ilustracion de marca, una frase que dice que va a aparecer ahi y un solo
   boton. Ninguno usa la palabra «vacio» ni reprocha nada. */

.sc-vacio {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-8);
  padding: var(--sc-espacio-8) var(--sc-espacio-10);
  border-radius: var(--sc-radio-xl);
  background: var(--sc-color-superficie);
  box-shadow: var(--sc-sombra-2);
}

.sc-vacio__escena {
  flex: none;
  width: 132px;
  height: 132px;
  border-radius: var(--sc-radio-l);
  background: var(--sc-marron-150);
  overflow: hidden;
}

.sc-vacio__escena img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.sc-vacio__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sc-espacio-3); align-items: flex-start; }

.sc-vacio__titulo {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-1);
  line-height: var(--sc-linea-titulo);
}

.sc-vacio__texto { margin: 0; font-size: var(--sc-tipo-cuerpo-s); line-height: var(--sc-linea-cuerpo); color: var(--sc-texto-secundario); max-width: var(--sc-medida-corta); }
.sc-vacio--centrado { flex-direction: column; text-align: center; padding-block: var(--sc-espacio-16); }
.sc-vacio--centrado .sc-vacio__cuerpo { align-items: center; }
.sc-vacio--centrado .sc-vacio__escena { width: 196px; height: 196px; }


/* ── 15 · Esqueleto de carga ───────────────────────────────────────────────
   Esqueleto, no ruleta. Una ruleta no dice cuanto queda ni que va a aparecer;
   el esqueleto dibuja la forma de lo que viene y baja el pulso en vez de
   subirlo. Barrido calido y lento, sin destello blanco. */

.sc-esqueleto { display: grid; gap: var(--sc-espacio-2); }

.sc-esqueleto__barra {
  display: block;
  height: var(--sc-esqueleto-alto, var(--sc-espacio-4));
  width: 100%;
  border-radius: var(--sc-radio-s);
  background: linear-gradient(90deg,
    var(--sc-color-superficie-hundida) 0%,
    var(--sc-marron-200) 42%,
    var(--sc-color-superficie-hundida) 84%);
  background-size: 220% 100%;
  animation: sc-esqueleto 1.6s var(--sc-ease-calma) infinite;
}

.sc-esqueleto__barra:last-child:not(:only-child) { width: 62%; }
.sc-esqueleto__barra--titulo { --sc-esqueleto-alto: var(--sc-espacio-6); border-radius: var(--sc-radio-m); width: 46%; }
.sc-esqueleto__barra--bloque { --sc-esqueleto-alto: 180px; border-radius: var(--sc-radio-l); width: 100%; }
.sc-esqueleto__barra--cifra { --sc-esqueleto-alto: var(--sc-espacio-10); border-radius: var(--sc-radio-m); width: 30%; }
.sc-esqueleto__barra--grafico { --sc-esqueleto-alto: 240px; border-radius: var(--sc-radio-l); }
.sc-esqueleto__barra--anillo { --sc-esqueleto-alto: var(--sc-panel-anillo); width: var(--sc-panel-anillo); border-radius: var(--sc-radio-circulo); justify-self: center; }

/* Esqueleto de fila de tabla: mantiene el alto de 64 px para que la tabla no
   salte al llegar los datos. */
.sc-esqueleto--tabla { gap: 0; }
.sc-esqueleto--tabla .sc-esqueleto__barra { height: var(--sc-espacio-4); margin-block: calc((var(--sc-panel-fila) - var(--sc-espacio-4)) / 2); }

@keyframes sc-esqueleto { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@keyframes sc-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sc-esqueleto__barra { animation: none; background: var(--sc-color-superficie-hundida); }
  .sc-boton[aria-busy="true"] .sc-icono { animation: none; }
}


/* ── 16 · Curva de umbral ──────────────────────────────────────────────────
   El activo visual de la marca: los segundos que aguanta, medicion a medicion.
   El SVG lo pinta PHP con su propio viewBox por tamaño (900x240 en el panel,
   900x380 en Mis practicas, 900x260 en el informe, 342x150 en movil): el
   lienzo crece con el alto y no escalando el ancho, porque escalar engorda el
   trazo de 2,5 a 2,9 y la curva se ve mas pesada de lo que es.
   Aqui solo van color, grosor, patron y tamaño de punto.

   Decisiones cerradas que este bloque implementa:
   · El tramo que retrocede va PUNTEADO y su punto de llegada queda HUECO. El
     color nunca es el unico portador: se lee por patron y por forma tambien.
   · Un retroceso NO es rojo. Va en marron calido.
   · NO hay zona segura translucida. Pintar una banda de «bien» arrastra la
     semantica de bien/mal que este producto no quiere: aqui se sube por
     tramos y a veces se baja, y ninguna de las dos cosas es una nota.
   · La rejilla es solo horizontal. Ninguna vertical salvo la guia del umbral.
   · Junto a la curva va siempre la cifra en texto: el grafico no es la unica
     forma de leer el umbral, y el SVG lleva role="img" con todos los valores. */

.sc-curva {
  --sc-curva-trazo: 2.5px;
  --sc-curva-punto: 5px;         /* radio del punto de medicion */
  --sc-curva-punto-actual: 8px;  /* radio del punto actual */
  position: relative;
  width: 100%;
}

.sc-curva svg { display: block; width: 100%; height: auto; overflow: visible; }

.sc-curva__rejilla {
  stroke: var(--sc-color-umbral-rejilla);
  stroke-width: var(--sc-trazo-fino);
  fill: none;
}

/* Hito de revision: vertical tenue, la unica que se permite. */
.sc-curva__hito { stroke: var(--sc-panel-filete-fuerte); stroke-width: var(--sc-trazo-fino); }
.sc-curva__hito-punto { fill: var(--sc-color-umbral-eje); opacity: .5; }

/* Objetivo del tramo: discontinua, nunca continua — una linea continua se
   confunde con un dato medido. */
.sc-curva__objetivo {
  stroke: var(--sc-color-umbral-eje);
  stroke-width: var(--sc-trazo-normal);
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  fill: none;
}

.sc-curva__area {
  fill: color-mix(in srgb, var(--sc-color-umbral-linea) 8%, transparent);
  stroke: none;
}

/* Con la definicion de degradado en el marcado, el area desvanece a cero. */
.sc-curva__area--degradado { fill: url(#sc-area-umbral); }

.sc-curva__linea {
  fill: none;
  stroke: var(--sc-color-umbral-linea);
  stroke-width: var(--sc-curva-trazo);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El tramo que baja: mismo grosor, marron calido y punteado.
   dasharray 0 con linecap round da puntos redondos separados. */
.sc-curva__linea--retroceso {
  stroke: var(--sc-color-umbral-retroceso);
  stroke-dasharray: 0 calc(var(--sc-curva-trazo) * 2.2);
  stroke-linecap: round;
}

/* Guia del unico punto: vertical discontinua desde el punto hasta el objetivo. */
.sc-curva__guia {
  stroke: var(--sc-color-umbral-linea);
  stroke-width: var(--sc-trazo-normal);
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  opacity: .7;
}

/* Puntos. Huecos por defecto (relleno de superficie) para que respiren.
   El radio se pone por CSS y no por atributo r del marcado: asi el tamaño del
   punto viaja con el tema y con el punto de ruptura, no con el HTML. */
.sc-curva__punto {
  r: var(--sc-curva-punto);
  fill: var(--sc-color-superficie-elevada);
  stroke: var(--sc-color-umbral-linea);
  stroke-width: var(--sc-trazo-foco);
}

.sc-curva__punto--actual {
  r: var(--sc-curva-punto-actual);
  fill: var(--sc-color-umbral-linea);
  stroke: var(--sc-color-umbral-linea);
}

/* Punto de llegada de un retroceso: hueco y con el borde del retroceso.
   Es la segunda señal, independiente del color, de que ese tramo bajo. */
.sc-curva__punto--retroceso {
  fill: var(--sc-color-superficie-elevada);
  stroke: var(--sc-color-umbral-retroceso);
}

.sc-curva__punto--actual.sc-curva__punto--retroceso {
  fill: var(--sc-color-superficie-elevada);
  stroke: var(--sc-color-umbral-retroceso);
  stroke-width: var(--sc-trazo-grueso);
}

/* Capa de rotulos por encima del SVG, posicionada en porcentajes desde PHP. */
.sc-curva__rotulos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--sc-color-umbral-eje);
  font-size: var(--sc-tipo-etiqueta);
}

/* Las marcas del eje Y van ENCIMA del area, no en un canal propio a la
   izquierda: la capa de rotulos se posiciona en porcentajes sobre el mismo
   cuadro que el SVG, y reservarles sitio con un padding desalinearia el uno
   respecto a la otra. Con su fondo propio se leen sobre la rejilla, igual que
   hace el rotulo del objetivo. */
.sc-curva__eje-y {
  position: absolute;
  inset-inline-start: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  padding-inline: var(--sc-espacio-1);
  background: var(--sc-color-superficie-elevada);
}
.sc-curva__eje-x { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sc-curva__eje-x--ultimo { font-weight: var(--sc-peso-fuerte); color: var(--sc-texto-secundario); }
.sc-curva__rotulo-objetivo {
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
  /* Fondo propio: la linea discontinua del objetivo pasa justo por detras y
     sin esto el rotulo sale tachado. */
  padding-inline: var(--sc-espacio-1);
  background: var(--sc-color-superficie-elevada);
}

.sc-curva__sin-datos {
  position: absolute;
  inset-inline: 14% 16%;
  inset-block-start: 44%;
  text-align: center;
  font-size: var(--sc-tipo-cuerpo-s);
  line-height: var(--sc-linea-cuerpo);
  color: var(--sc-texto-secundario);
}

/* Emergente al pasar el puntero */
.sc-curva__banda { position: absolute; inset-block: 0; cursor: default; }
.sc-curva__plomada { position: absolute; inset-block: 10% 12%; width: var(--sc-trazo-fino); background: var(--sc-color-borde); pointer-events: none; }

.sc-curva__emergente {
  position: absolute;
  transform: translate(-50%, -124%);
  min-width: 150px;
  padding: var(--sc-espacio-3) var(--sc-espacio-4);
  border: var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-superficie-sobre-superficie);
  box-shadow: var(--sc-sombra-3);
  pointer-events: none;
}

.sc-curva__emergente-fecha { margin: 0 0 var(--sc-espacio-1); font-size: var(--sc-tipo-etiqueta); color: var(--sc-texto-terciario); }

.sc-curva__emergente-cifra {
  margin: 0 0 var(--sc-espacio-15);
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sc-curva__nota { margin: 0; font-size: var(--sc-tipo-nota); line-height: var(--sc-linea-cuerpo); color: var(--sc-texto-terciario); max-width: var(--sc-medida-lectura); }

.sc-curva__pie {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-espacio-6);
  margin-top: var(--sc-espacio-4);
  padding-top: var(--sc-espacio-4);
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
}


/* ── 17 · Linea de tiempo del umbral ───────────────────────────────────────
   Los veinte minutos del video, evento a evento. Opcion A del estudio del
   grafico: barra de 20 minutos con marcas cada 5.

   El eje vertical NO lleva cifras y aqui ni siquiera existe: nadie ha
   cuantificado la intensidad en una escala numerica, y esta marca vende justo
   lo contrario — el umbral en segundos, medido. El unico numero es el umbral.

   La banda de intensidad es pelaje al 25 %, decorativa y sin texto encima: el
   pelaje no puede llevar ni texto ni icono informativo (2,72 sobre crema).
   Debajo va siempre la misma informacion como lista cronologica, que es la
   que se copia y se lleva al veterinario. La lista no se sustituye por el
   grafico: es su equivalente en tabla. */

.sc-umbral-tiempo {
  --sc-umbral-barra: 10px;
  --sc-umbral-punto: 6px;          /* diametro de un evento */
  --sc-umbral-punto-primera: 10px; /* diametro de la primera señal */
  position: relative;
  height: 150px;
  margin-inline: var(--sc-espacio-3);
}

.sc-umbral-tiempo__barra {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 82px;
  height: var(--sc-umbral-barra);
  border-radius: var(--sc-radio-pildora);
  background: var(--sc-color-superficie-hundida);
}

.sc-umbral-tiempo__banda {
  position: absolute;
  inset-block-start: 82px;
  height: var(--sc-umbral-barra);
  background: var(--sc-color-umbral-banda-intensidad);
}

.sc-umbral-tiempo__marca {
  position: absolute;
  inset-block-start: 98px;
  transform: translateX(-50%);
  font-size: var(--sc-tipo-etiqueta);
  color: var(--sc-color-umbral-eje);
  font-variant-numeric: tabular-nums;
}

/* Los rotulos van escalonados en dos alturas: con cinco eventos y dos de ellos
   a 48 s de distancia, en una sola fila se pisan. */
.sc-umbral-tiempo__evento {
  position: absolute;
  inset-block: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 146px;
  padding-top: var(--sc-umbral-alto, 0);
  text-align: center;
}

.sc-umbral-tiempo__evento--bajo { --sc-umbral-alto: var(--sc-espacio-8); }
.sc-umbral-tiempo__hora { font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); font-variant-numeric: tabular-nums; }
.sc-umbral-tiempo__texto { margin-top: var(--sc-espacio-05); font-size: var(--sc-tipo-nota); line-height: var(--sc-linea-compacta); color: var(--sc-texto-secundario); max-width: 140px; }
.sc-umbral-tiempo__vastago { flex: 1; width: var(--sc-trazo-fino); margin-top: var(--sc-espacio-15); background: var(--sc-color-borde); }

.sc-umbral-tiempo__punto {
  width: var(--sc-umbral-punto);
  height: var(--sc-umbral-punto);
  margin-bottom: calc((var(--sc-umbral-barra) - var(--sc-umbral-punto)) / 2);
  border-radius: var(--sc-radio-circulo);
  background: var(--sc-color-umbral-eje);
}

/* La primera señal es el umbral: es el unico dato medido del grafico y por eso
   es el unico que va en acento y a mayor tamaño. */
.sc-umbral-tiempo__evento--primera .sc-umbral-tiempo__texto { color: var(--sc-texto-primario); font-weight: var(--sc-peso-fuerte); }
.sc-umbral-tiempo__evento--primera .sc-umbral-tiempo__hora { color: var(--sc-color-umbral-linea); font-weight: var(--sc-peso-fuerte); }

.sc-umbral-tiempo__evento--primera .sc-umbral-tiempo__punto {
  width: var(--sc-umbral-punto-primera);
  height: var(--sc-umbral-punto-primera);
  margin-bottom: calc((var(--sc-umbral-barra) - var(--sc-umbral-punto-primera)) / 2);
  background: var(--sc-color-umbral-linea);
}

/* La lista cronologica de debajo. Equivalente en tabla del grafico. */
.sc-umbral-lista { margin-top: var(--sc-espacio-6); border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete); }

.sc-umbral-lista__fila {
  display: flex;
  align-items: baseline;
  gap: var(--sc-espacio-6);
  padding-block: var(--sc-espacio-4);
  border-bottom: var(--sc-trazo-fino) solid var(--sc-panel-filete);
}

.sc-umbral-lista__hora {
  flex: none;
  width: 64px;
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-cuerpo);
  font-variant-numeric: tabular-nums;
  color: var(--sc-texto-terciario);
}

.sc-umbral-lista__fila--primera .sc-umbral-lista__hora { color: var(--sc-color-umbral-linea); }
.sc-umbral-lista__que { flex: none; width: 230px; font-size: var(--sc-tipo-cuerpo-s); }
.sc-umbral-lista__fila--primera .sc-umbral-lista__que { font-weight: var(--sc-peso-fuerte); }
.sc-umbral-lista__detalle { flex: 1; font-size: var(--sc-tipo-cuerpo-s); line-height: var(--sc-linea-cuerpo); color: var(--sc-texto-secundario); }

/* Barras de constancia por semana. Pelaje: decorativo, sin texto encima. */
/* `align-items: stretch` y el dia a `height: 100%` no son adorno: la barra mide
   su alto en POR CIENTO, y un porcentaje necesita un padre con altura resuelta.
   Con `flex-end` el dia se encogia a su contenido, el porcentaje no tenia contra
   que calcularse y las siete barras salian a cero. Se veian los rotulos y ni una
   barra, con el pie diciendo «5 de 7 dias con practica registrada». */
.sc-constancia { display: flex; align-items: stretch; gap: var(--sc-espacio-2); height: 80px; }
.sc-constancia__dia {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sc-espacio-15);
  height: 100%;
}

.sc-constancia__barra {
  display: block;
  width: 100%;
  max-width: var(--sc-espacio-4);
  height: var(--sc-constancia-alto, 0);
  /* Sitio para el rotulo del dia: sin esto, el dia al 100 % lo empuja fuera. */
  max-height: calc(100% - var(--sc-espacio-5));
  border-radius: var(--sc-radio-xs) var(--sc-radio-xs) 0 0;
  background: var(--sc-marron-500);
}

.sc-constancia__barra--vacia { background: var(--sc-color-superficie-hundida); }
.sc-constancia__dia-rotulo { font-size: var(--sc-tipo-etiqueta); color: var(--sc-texto-terciario); }
.sc-constancia__dia--hoy .sc-constancia__dia-rotulo { color: var(--sc-texto-primario); font-weight: var(--sc-peso-fuerte); }


/* ── 18 · Acordeon, pestañas, paginacion e historial ───────────────────────
   Un solo patron de acordeon para los modulos de Mi ruta y las preguntas de
   Ayuda. No se duplica. */

.sc-acordeon { display: flex; flex-direction: column; gap: var(--sc-espacio-4); }
.sc-acordeon__pieza { border: var(--sc-trazo-fino) solid var(--sc-color-borde-sutil); border-radius: var(--sc-radio-l); background: var(--sc-color-superficie-elevada); box-shadow: var(--sc-sombra-1); overflow: hidden; }

.sc-acordeon__resumen {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-5);
  width: 100%;
  padding: var(--sc-espacio-5) var(--sc-espacio-6);
  border: 0;
  background: transparent;
  color: var(--sc-texto-primario);
  font-family: var(--sc-fuente-lectura);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-acordeon__resumen:hover { background: var(--sc-capa-hover); }
.sc-acordeon__resumen::-webkit-details-marker { display: none; }

.sc-acordeon__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--sc-toque-minimo);
  height: var(--sc-toque-minimo);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-superficie-hundida);
  color: var(--sc-texto-secundario);
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-3);
  font-variant-numeric: tabular-nums;
}

.sc-acordeon__numero--hecho { background: var(--sc-color-confirmacion-superficie); color: var(--sc-color-confirmacion-texto); }
.sc-acordeon__numero--actual { background: var(--sc-color-superficie-tintada); color: var(--sc-acento-600); }
.sc-acordeon__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sc-espacio-1); }

.sc-acordeon__titulo {
  font-family: var(--sc-fuente-display);
  font-variation-settings: var(--sc-ejes-sobrio);
  font-weight: var(--sc-peso-semi);
  font-size: var(--sc-tipo-titulo-3);
}

.sc-acordeon__meta { font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); font-variant-numeric: tabular-nums; }

/* Bloqueado dice POR QUE lo esta. Un candado sin razon es una puerta cerrada,
   y el panel no enseña puertas cerradas sin explicarlas. */
.sc-acordeon__bloqueo { display: flex; align-items: center; gap: var(--sc-espacio-2); max-width: 280px; font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); text-align: end; }

.sc-acordeon__flecha { flex: none; display: flex; align-items: center; justify-content: center; width: var(--sc-espacio-8); height: var(--sc-espacio-8); color: var(--sc-texto-terciario); transition: transform var(--sc-dur-rapida) var(--sc-ease-suave); }
.sc-acordeon__pieza[open] .sc-acordeon__flecha,
.sc-acordeon__resumen[aria-expanded="true"] .sc-acordeon__flecha { transform: rotate(180deg); }
.sc-acordeon__cuerpo { padding: 0 var(--sc-espacio-6) var(--sc-espacio-2); }

.sc-lista-lecciones { display: flex; flex-direction: column; }

.sc-lista-lecciones__item {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-4);
  width: 100%;
  padding-block: var(--sc-espacio-4);
  border: 0;
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  background: transparent;
  color: var(--sc-texto-primario);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-cuerpo-s);
  text-align: start;
  cursor: pointer;
}

.sc-lista-lecciones__item:hover { color: var(--sc-color-enlace); }
.sc-lista-lecciones__titulo { flex: 1; min-width: 0; }
.sc-lista-lecciones__item--actual .sc-lista-lecciones__titulo { font-weight: var(--sc-peso-fuerte); }
.sc-lista-lecciones__duracion { font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); font-variant-numeric: tabular-nums; }
.sc-lista-lecciones__estado { width: 96px; text-align: end; font-size: var(--sc-tipo-nota); font-weight: var(--sc-peso-semi); color: var(--sc-texto-terciario); }
.sc-lista-lecciones__item--vista .sc-lista-lecciones__estado { color: var(--sc-color-confirmacion-texto); }

/* Pestañas de Mi cuenta */
.sc-pestanas { display: flex; gap: var(--sc-espacio-15); border-bottom: var(--sc-trazo-fino) solid var(--sc-panel-filete-fuerte); overflow-x: auto; }

.sc-pestanas__opcion {
  padding: var(--sc-espacio-4) var(--sc-espacio-5);
  border: 0;
  border-bottom: var(--sc-panel-marca-activa) solid transparent;
  border-radius: var(--sc-radio-s) var(--sc-radio-s) 0 0;
  background: transparent;
  color: var(--sc-texto-secundario);
  font-family: var(--sc-fuente-lectura);
  font-size: var(--sc-tipo-cuerpo-s);
  font-weight: var(--sc-peso-semi);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sc-dur-rapida) var(--sc-ease-entrada),
              border-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-pestanas__opcion:hover { color: var(--sc-texto-primario); background: var(--sc-capa-hover); }
.sc-pestanas__opcion[aria-selected="true"] { color: var(--sc-texto-primario); border-bottom-color: var(--sc-color-accion); }

/* Paginacion */
.sc-paginacion { display: flex; align-items: center; gap: var(--sc-espacio-2); justify-content: flex-end; }
.sc-paginacion__cuenta { margin-inline-end: auto; font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); font-variant-numeric: tabular-nums; }
.sc-paginacion__pagina { min-width: 38px; }
.sc-paginacion__pagina[aria-current="page"] { background: var(--sc-color-accion); border-color: var(--sc-color-accion); color: var(--sc-color-tinta-sobre-acento); }

/* Migas: en el panel si, en las paginas de venta nunca. */
.sc-migas { display: flex; align-items: center; gap: var(--sc-espacio-2); font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); }
.sc-migas a { color: inherit; }
.sc-migas [aria-current="page"] { color: var(--sc-texto-primario); font-weight: var(--sc-peso-semi); }

/* Historial del caso: fecha, hecho y estado. Filas sin accion. */
.sc-historial { list-style: none; margin: 0; padding: 0; }

.sc-historial__fila {
  display: flex;
  align-items: baseline;
  gap: var(--sc-espacio-5);
  padding-block: var(--sc-espacio-4);
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
}

.sc-historial__fecha { flex: none; width: 150px; font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); font-variant-numeric: tabular-nums; }
.sc-historial__texto { flex: 1; font-size: var(--sc-tipo-cuerpo-s); }
.sc-historial__estado { font-family: var(--sc-fuente-numeros); font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); }


/* ── 19 · Aula ─────────────────────────────────────────────────────────────
   La barra lateral del panel sigue visible dentro de /aula: es lo primero que
   se pierde al implementar con LearnDash y por eso vive en el mismo armazon.
   La leccion es la unica pantalla donde el rail cambia de contenido: en lugar
   del perro, el indice del curso. */

.sc-reproductor {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sc-radio-l);
  background: var(--sc-marron-950);
  overflow: hidden;
}

.sc-reproductor img,
.sc-reproductor video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-reproductor__poster { opacity: .55; }

.sc-reproductor__play {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 0;
  border-radius: var(--sc-radio-circulo);
  background: var(--sc-capsula-fondo);
  backdrop-filter: var(--sc-desenfoque-capsula);
  color: var(--sc-marron-100);
  cursor: pointer;
  transition: background-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-reproductor__play .sc-icono { width: 34px; height: 34px; fill: currentColor; stroke: none; }

/* Unico sitio del sistema donde se admite degradado: sobre un fotograma. */
.sc-reproductor__barra {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-4);
  padding: var(--sc-espacio-5) var(--sc-espacio-6);
  background: var(--sc-velo-video);
  color: var(--sc-marron-100);
}

.sc-reproductor__tiempo { font-size: var(--sc-tipo-nota); font-variant-numeric: tabular-nums; }

.sc-indice { display: flex; flex-direction: column; gap: var(--sc-espacio-2); }
.sc-indice__cabecera { display: flex; align-items: baseline; gap: var(--sc-espacio-3); }
.sc-indice__pct { margin-inline-start: auto; font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); font-variant-numeric: tabular-nums; }

.sc-indice__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-espacio-3);
  width: 100%;
  padding: var(--sc-espacio-4) var(--sc-espacio-3);
  margin-inline: calc(var(--sc-espacio-3) * -1);
  border: 0;
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  border-radius: var(--sc-radio-s);
  background: transparent;
  color: var(--sc-texto-primario);
  font-family: var(--sc-fuente-lectura);
  text-align: start;
  cursor: pointer;
}

.sc-indice__item:hover { background: var(--sc-capa-hover); }
.sc-indice__item--actual { background: var(--sc-color-superficie-hundida); }
.sc-indice__item--actual .sc-indice__titulo { font-weight: var(--sc-peso-fuerte); }
.sc-indice__titulo { font-size: var(--sc-tipo-cuerpo-s); line-height: var(--sc-linea-compacta); }
.sc-indice__meta { font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); font-variant-numeric: tabular-nums; }
.sc-indice__item--vista .sc-indice__marca { color: var(--sc-color-confirmacion-texto); }

.sc-materiales { display: flex; flex-direction: column; }

.sc-materiales__item {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-4);
  padding-block: var(--sc-espacio-4);
  border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  color: var(--sc-texto-primario);
  text-decoration: none;
}

.sc-materiales__item:hover { color: var(--sc-color-enlace); }
.sc-materiales__nombre { flex: 1; font-size: var(--sc-tipo-cuerpo-s); font-weight: var(--sc-peso-semi); }
.sc-materiales__peso { font-size: var(--sc-tipo-nota); color: var(--sc-texto-terciario); }

/* Cuerpo de leccion: medida de lectura larga y interlinea de leccion. */
.sc-leccion__cuerpo {
  font-size: var(--sc-tipo-leccion);
  line-height: var(--sc-linea-leccion);
  color: var(--sc-texto-secundario);
  max-width: var(--sc-medida-leccion);
}


/* ── 20 · Iconos ───────────────────────────────────────────────────────────
   SVG en linea con la geometria de Lucide: reticula de 24, trazo 2,25 y
   terminaciones redondeadas. Ni CDN ni fuente de iconos: por RGPD no entra
   nada de terceros, y ademas un icono que llega tarde deja un hueco.
   Sin relleno salvo en el destino activo de la barra. */

.sc-icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--sc-trazo-icono);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sc-icono--s { width: 18px; height: 18px; }
.sc-icono--m { width: 21px; height: 21px; }
.sc-icono--l { width: 26px; height: 26px; }

/* A partir de 32 px el trazo sube a 3; por debajo de 18 no se usan iconos. */
.sc-icono--xl { width: 34px; height: 34px; stroke-width: var(--sc-trazo-grueso); }
.sc-icono--relleno { fill: currentColor; stroke: none; }
.sc-icono--apagado { color: var(--sc-texto-terciario); }


/* ── 21 · Foco ─────────────────────────────────────────────────────────────
   Anillo visible en todo lo que se pueda enfocar. No se quita nunca, y se
   dibuja con desplazamiento para que no lo coma el borde del componente. */

.sc-panel :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.sc-aula :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--sc-trazo-foco) solid var(--sc-color-foco);
  outline-offset: var(--sc-desplazamiento-foco);
  border-radius: var(--sc-radio-s);
}

.sc-boton:focus-visible,
.sc-pastilla:focus-visible,
.sc-chip:focus-visible { border-radius: var(--sc-radio-pildora); }
.sc-boton--s:focus-visible,
.sc-boton--l:focus-visible,
.sc-boton-icono:focus-visible { border-radius: var(--sc-radio-m); }

/* Solo para lectores de pantalla. Lo usan el rotulo de la barra colapsada y el
   equivalente textual de la curva. */
.sc-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ============================================================================
   22 · PUNTOS DE RUPTURA
   Cuatro escalones: 1440 · 1200 · 1024 · por debajo de 1024.
   Cada layout multicolumna dice explicitamente como colapsa. Nada al azar.
   ============================================================================ */

/* ── 1440 y por encima ─────────────────────────────────────────────────────
   El panel va a sangre, ocupando el ancho completo (decision de Jefferson,
   2026-08-27). El mockup lo dibujaba como un contenedor flotante con margen de
   24, radio xl y sombra, pero eso era el marco del ENTREGABLE —la forma de
   enseñar una maqueta sobre un fondo—, no una decision del producto: en la
   aplicacion real deja dos franjas muertas a los lados y encoge la unica
   columna que importa.

   Lo que si se conserva del mockup es el tope de lectura: .sc-columna sigue
   parando en 1.180, asi que el texto no se estira aunque la pantalla crezca. */
@media (min-width: 1440px) {
  .sc-contenido { padding: var(--sc-espacio-8); }
}

/* ── 1200 a 1439 ───────────────────────────────────────────────────────────
   La reticula de columnas no cambia — barra 260 y rail 340 siguen cabiendo —,
   pero las rejillas de cuatro pasan a tres: por debajo de 1.400 una tarjeta de
   cuatro columnas baja de 240 px y el titular de dos lineas se parte en cuatro. */
@media (max-width: 1439px) {
  .sc-rejilla--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 1024 a 1199 ───────────────────────────────────────────────────────────
   Se colapsa la barra a 76 px (solo iconos, con el nombre en title y la marca
   de 3 px como unica señal del destino activo) y el rail se estrecha a 300.
   Con eso la columna central conserva mas de 620 px, que es el minimo para que
   la curva no comprima once mediciones.
   Las rejillas de tres y de cuatro pasan a dos. La tabla ya no cabe entera:
   se desplaza dentro de su envoltorio, nunca empujando la pagina. */
@media (max-width: 1199px) {
  .sc-panel { --sc-panel-barra: var(--sc-panel-barra-estrecha); --sc-panel-rail: 300px; }
  .sc-barra__texto,
  .sc-barra__rotulo,
  .sc-barra__aviso { display: none; }
  .sc-barra__marca { justify-content: center; padding-inline: var(--sc-espacio-2); }
  .sc-barra__enlace { justify-content: center; }

  .sc-rejilla--3,
  .sc-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sc-cabecera__identidad { display: none; }
  .sc-bloque-hoy { gap: var(--sc-espacio-6); padding-inline: var(--sc-espacio-8); }
  .sc-bloque-hoy__escena { width: 260px; height: 170px; }
  .sc-umbral-lista__que { width: 180px; }
}

/* ── Por debajo de 1024 ────────────────────────────────────────────────────
   Aqui el panel deja de ser una aplicacion de escritorio y pasa a ser la app.

   · La barra lateral sale del flujo y se convierte en cajon: fuera de pantalla,
     entra con transform y se cierra con el velo. Ocupa 260 px, no el ancho
     completo, para que se vea que hay pantalla detras.
   · Aparece la barra inferior de cinco destinos. Cinco, no siete: Ayuda vive en
     la cabecera y esta en todas las pantallas, y Mis pedidos vive dentro de Mi
     cuenta, que es donde la gente lo busca. Y obedece a lo comprado igual que
     la lateral: en el estado B son cuatro, no cinco con uno apagado.
   · El rail deja de ser columna y baja debajo del contenido. No se mete arriba
     porque entonces la accion de hoy quedaria bajo el pliegue.
   · Todas las rejillas a una columna.
   · La linea de estados pasa a vertical: es la unica forma de que quepan cinco
     nodos con fecha en 390 px.
   · La linea de tiempo de los veinte minutos tambien pasa a vertical: en 390 px
     una barra horizontal con cinco eventos no se lee. Queda la lista, que es su
     equivalente y la que se lleva al veterinario.
   · Las tablas anchas se apilan por fila con la cabecera como etiqueta. */
@media (max-width: 1023px) {
  .sc-panel {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--sc-panel-nav-movil);
  }

  .sc-barra {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    width: var(--sc-panel-barra-cajon);
    height: 100dvh;
    background: var(--sc-color-superficie-elevada);
    box-shadow: var(--sc-sombra-4);
    transform: translateX(-100%);
    /* visibility, y no solo transform: un cajon fuera de pantalla con transform
       SIGUE recibiendo foco. Medido el 2026-08-27 a 390 px: con el cajon cerrado,
       nueve enlaces invisibles capturaban el tabulador antes de llegar a la barra
       inferior. Es el mismo fallo que se corrigio en el frente publico en agosto.
       visibility se hereda y saca a los descendientes del orden de foco, y va en
       la transicion para que la barra no desaparezca a medio cerrar. */
    visibility: hidden;
    transition: transform var(--sc-dur-normal) var(--sc-ease-suave),
                visibility var(--sc-dur-normal);
  }

  .sc-barra[data-abierta="true"] { transform: none; visibility: visible; }
  .sc-barra__texto,
  .sc-barra__rotulo,
  .sc-barra__aviso { display: revert; }
  .sc-barra__marca { justify-content: flex-start; padding-inline: var(--sc-espacio-5); }
  /* El cajón del móvil siempre va ancho, aunque la barra recuerde que estaba
     plegada en escritorio: ahí el símbolo solo sería una marca sin nombre. */
  .sc-panel--barra-estrecha .sc-barra__logo--ancho { display: block; }
  .sc-panel--barra-estrecha .sc-barra__logo--simbolo { display: none; }
  .sc-barra__enlace { justify-content: flex-start; }

  .sc-barra__velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--sc-color-superficie-velo);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sc-dur-normal) var(--sc-ease-entrada), visibility var(--sc-dur-normal);
  }

  .sc-barra__velo[data-abierta="true"] { opacity: 1; visibility: visible; }

  .sc-cabecera { padding-inline: var(--sc-espacio-4); gap: var(--sc-espacio-3); }
  .sc-cabecera__titulo { font-size: var(--sc-tipo-titulo-2); }
  .sc-cabecera__separador { display: none; }
  .sc-volver span { display: none; }

  .sc-contenido {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sc-espacio-5);
    padding: var(--sc-espacio-4);
  }

  .sc-columna { max-width: none; gap: var(--sc-espacio-5); }
  .sc-rail { flex-direction: row; flex-wrap: wrap; }
  .sc-rail > * { flex: 1 1 300px; }

  .sc-rejilla--2,
  .sc-rejilla--3,
  .sc-rejilla--4 { grid-template-columns: minmax(0, 1fr); }

  /* La accion de hoy se apila y la escena pasa arriba, a lo ancho. */
  .sc-bloque-hoy { flex-direction: column-reverse; align-items: stretch; gap: var(--sc-espacio-5); padding: var(--sc-espacio-6); min-height: 0; }
  .sc-bloque-hoy__escena { width: 100%; height: 160px; }
  .sc-bloque-hoy__texto { max-width: none; }
  .sc-bloque-hoy__acciones .sc-boton { width: 100%; }

  .sc-indicador { flex-direction: row; }
  .sc-derivacion { padding: var(--sc-espacio-6); }
  .sc-derivacion__acciones .sc-boton { width: 100%; }

  .sc-vacio { flex-direction: column; text-align: center; padding: var(--sc-espacio-8) var(--sc-espacio-6); }
  .sc-vacio__cuerpo { align-items: center; }

  .sc-formulario { max-width: none; }
  .sc-formulario__pie { position: sticky; inset-block-end: 0; padding: var(--sc-espacio-4); margin-inline: calc(var(--sc-espacio-4) * -1); background: var(--sc-color-superficie-elevada); }
  .sc-formulario__pie .sc-boton { width: 100%; }

  /* Linea de estados en vertical. Rejilla de dos columnas —punto y texto— en
     lugar de fila: con el marcado plano del escritorio, una fila pondria la
     fecha y el rotulo al lado del titulo en vez de debajo. */
  .sc-linea-estados { flex-direction: column; align-items: stretch; padding-inline: 0; }

  .sc-linea-estados__nodo {
    display: grid;
    grid-template-columns: var(--sc-espacio-6) minmax(0, 1fr);
    column-gap: var(--sc-espacio-4);
    row-gap: var(--sc-espacio-05);
    align-items: start;
    text-align: start;
    padding-bottom: var(--sc-espacio-5);
  }

  .sc-linea-estados__punto { grid-row: 1 / -1; }

  .sc-linea-estados__texto,
  .sc-linea-estados__fecha,
  .sc-linea-estados__aqui { grid-column: 2; }

  .sc-linea-estados__nodo::before,
  .sc-linea-estados__nodo::after {
    inset-block-start: auto;
    inset-inline: var(--sc-linea-eje) auto;
    width: var(--sc-linea-grosor);
    height: auto;
  }

  .sc-linea-estados__nodo::before { inset-block: 0 50%; inset-inline-end: auto; }
  .sc-linea-estados__nodo::after { inset-block: 50% 0; inset-inline-start: var(--sc-linea-eje); }
  .sc-linea-estados__nodo:last-child { padding-bottom: 0; }
  .sc-linea-estados__nodo:last-child::after { display: none; }

  /* Linea de tiempo del video en vertical */
  .sc-umbral-tiempo { display: none; }
  .sc-umbral-lista { margin-top: 0; border-top: 0; }
  .sc-umbral-lista__fila { flex-direction: column; align-items: flex-start; gap: var(--sc-espacio-1); }
  .sc-umbral-lista__hora,
  .sc-umbral-lista__que { width: auto; }

  .sc-curva { --sc-curva-punto: 4px; --sc-curva-punto-actual: 7px; }
  .sc-curva__pie { flex-direction: column; gap: var(--sc-espacio-3); }

  /* Tabla apilada. Cada celda lleva su cabecera en data-etiqueta. */
  .sc-tabla--apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sc-tabla--apilable tbody tr {
    display: grid;
    gap: var(--sc-espacio-2);
    padding: var(--sc-espacio-4) 0;
    border-bottom: var(--sc-trazo-fino) solid var(--sc-panel-filete);
  }

  .sc-tabla--apilable td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sc-espacio-4);
    height: auto;
    padding: 0;
    border: 0;
    text-align: end;
  }

  .sc-tabla--apilable td::before {
    content: attr(data-etiqueta);
    flex: none;
    font-size: var(--sc-tipo-etiqueta);
    font-weight: var(--sc-peso-fuerte);
    letter-spacing: var(--sc-tracking-etiqueta);
    text-transform: uppercase;
    color: var(--sc-texto-terciario);
    text-align: start;
  }

  /* Aula: el indice del curso baja debajo del reproductor. */
  .sc-aula__leccion { display: flex; flex-direction: column; gap: var(--sc-espacio-5); }
  .sc-indice { order: 2; }

  /* Barra inferior de cinco destinos */
  .sc-nav-movil {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 40;
    display: flex;
    align-items: flex-start;
    height: var(--sc-panel-nav-movil);
    padding: var(--sc-espacio-3) var(--sc-espacio-1) 0;
    border-top: var(--sc-trazo-fino) solid var(--sc-panel-filete);
    background: var(--sc-color-superficie-elevada);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sc-nav-movil__enlace {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sc-espacio-1);
    min-height: var(--sc-toque-minimo);
    padding-top: var(--sc-espacio-15);
    color: var(--sc-texto-terciario);
    font-size: var(--sc-tipo-etiqueta);
    text-decoration: none;
  }

  .sc-nav-movil__enlace:is(:link, :visited) { color: var(--sc-texto-terciario); }

  .sc-nav-movil__enlace[aria-current="page"] { color: var(--sc-texto-primario); font-weight: var(--sc-peso-fuerte); }
  .sc-nav-movil__enlace[aria-current="page"] .sc-icono { fill: var(--sc-capa-seleccion); }
}

/* ── Por debajo de 640 ─────────────────────────────────────────────────────
   Ajuste fino de una sola cosa: el rail deja de repartirse en dos y se apila.
   No es un quinto punto de ruptura del panel, es la consecuencia de que una
   tarjeta de rail por debajo de 300 px deja de leerse. */
@media (max-width: 639px) {
  .sc-rail { flex-direction: column; }
  .sc-rail > * { flex: 1 1 auto; }
  .sc-subida__fila { flex-direction: column; align-items: stretch; }
  .sc-subida__miniatura { width: 100%; height: 140px; }
  .sc-subida__cifra-bloque { text-align: start; }
  .sc-pasos { flex-direction: column; }
}

/* ── 23 · Impresion ────────────────────────────────────────────────────────
   Lo que se imprime del panel es el informe, y el informe se guarda en PDF.
   Antes de esto salian la barra lateral, la cabecera y el menu inferior encima
   del contenido, porque no habia ni una regla de impresion en el tema.

   Es la misma pagina, impresa: no hay plantilla aparte ni ruta ?print. Una
   segunda plantilla se queda desincronizada del informe a la primera semana. */

@media print {

  /* El armazon desaparece: navegar no significa nada en papel. Tambien se van
     la barra de administracion de WordPress y el salto al contenido. */
  .sc-barra,
  .sc-barra__velo,
  .sc-cabecera,
  .sc-nav-movil,
  .sc-rail,
  .sc-oculto { display: none; }

  /* `html #wpadminbar` y no `#wpadminbar` a secas: admin-bar.css no trae ni una
     regla de impresion, y con la misma especificidad el resultado dependeria de
     que WordPress encole su hoja antes o despues que esta. El punto de mas lo
     resuelve; !important, aqui, seria taparlo. */
  html #wpadminbar { display: none; }

  .sc-panel {
    display: block;
    min-height: 0;
    background: none;
  }

  .sc-marco,
  .sc-contenido,
  .sc-columna {
    display: block;
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  /* Tinta sobre papel: los fondos crema y el marron oscuro del bloque del
     umbral se comen un cartucho y bajan el contraste del texto impreso. */
  .sc-bloque-hoy,
  .sc-tarjeta,
  .sc-derivacion__marco {
    background: none;
    box-shadow: none;
    border: var(--sc-trazo-fino) solid var(--sc-color-borde);
    color: var(--sc-texto-primario);
  }

  .sc-bloque-hoy__saludo,
  .sc-bloque-hoy__entradilla,
  .sc-bloque-hoy__nota,
  .sc-bloque-hoy__cifra,
  .sc-derivacion__titulo,
  .sc-derivacion__texto,
  .sc-derivacion__cabecera { color: var(--sc-texto-primario); }

  /* Nada que solo sirva en pantalla. El reproductor imprime un rectangulo negro
     y el video no cabe en una hoja. */
  .sc-reproductor,
  .sc-boton { display: none; }

  /* Los cortes. Lo que se parte a la mitad en un PDF es lo que se lee dos veces
     para entenderlo, asi que ninguna pieza cruza de pagina. */
  .sc-seccion,
  .sc-tarjeta,
  .sc-bloque-hoy,
  .sc-derivacion,
  .sc-umbral-tiempo,
  .sc-umbral-lista__fila { break-inside: avoid; }

  /* La linea de tiempo del umbral empieza en hoja propia: es la pieza alta del
     informe y arrastrada media pagina pierde la escala. */
  .sc-umbral-tiempo { break-before: page; }

  /* Un titulo no se queda solo al pie de una hoja. */
  .sc-seccion__titulo,
  .sc-seccion__cabecera { break-after: avoid; }

  h1, h2, h3 { break-after: avoid; }
  p { orphans: 3; widows: 3; }

  /* El enlace del informe se imprime con su destino: en papel un enlace sin URL
     no lleva a ningun sitio. Solo los del contenido, no los del armazon. */
  .sc-columna a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--sc-tipo-nota);
    color: var(--sc-texto-secundario);
    word-break: break-all;
  }
}

/* ── Campo de retrato del perro ─────────────────────────────────────────────
   La foto no vive en `wp_sc_perros`: es un adjunto marcado con `_sc_perro_id`.
   Aquí solo está el campo. */
.sc-retrato-campo {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-espacio-5);
  flex-wrap: wrap;
}

.sc-retrato-campo__marco {
  flex: none;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: var(--sc-radio-circulo);
  background: var(--sc-color-superficie-hundida);
  /* El mismo aro que el retrato del rail, para que se reconozca como el mismo. */
  box-shadow: 0 0 0 var(--sc-trazo-grueso) var(--sc-color-acento);
}

.sc-retrato-campo__imagen { width: 100%; height: 100%; object-fit: cover; }

.sc-retrato-campo__vacio {
  font-family: var(--sc-fuente-display);
  font-size: var(--sc-tipo-titulo-1);
  color: var(--sc-texto-terciario);
}

.sc-retrato-campo__control {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: var(--sc-espacio-2);
}

/* El selector de archivo nativo: solo se le pone el botón en marca, sin
   esconderlo tras un `label` falso. Escondido pierde el foco de teclado y el
   nombre del archivo elegido, que es justo lo que confirma que se subió. */
.sc-campo--archivo { padding: 0; border: 0; background: none; font-size: var(--sc-tipo-cuerpo-s); }

.sc-campo--archivo::file-selector-button {
  margin-inline-end: var(--sc-espacio-3);
  padding: var(--sc-espacio-2) var(--sc-espacio-4);
  min-height: var(--sc-toque-minimo);
  font: inherit;
  color: var(--sc-color-acento);
  background: var(--sc-color-superficie-tintada);
  border: var(--sc-trazo-normal) solid var(--sc-color-acento);
  border-radius: var(--sc-radio-pildora);
  cursor: pointer;
}

.sc-campo--archivo::file-selector-button:hover { background: var(--sc-color-acento); color: var(--sc-color-tinta-sobre-acento); }

/* ── El aula dentro del panel ───────────────────────────────────────────────
   Lo de dentro lo pinta LearnDash. Aquí solo se le da caja y se corrigen las
   dos cosas que se le escapan al meterlo en una columna estrecha: las tablas
   de su temario y sus vídeos incrustados. */
.sc-aula__cuerpo > *:first-child { margin-block-start: 0; }
.sc-aula__cuerpo > *:last-child { margin-block-end: 0; }

/* El temario y las listas de LearnDash desbordaban la tarjeta a 375 px. */
.sc-aula__cuerpo table { display: block; overflow-x: auto; max-width: 100%; }
.sc-aula__cuerpo img,
.sc-aula__cuerpo video,
.sc-aula__cuerpo iframe { max-width: 100%; height: auto; }