/* Las doce hojas de `ui/` se traían desde aquí con @import y ahora van en
   `base.html`, cada una con su `<link>`. Auditoría 14/08/2026, punto 1.4.

   El motivo es de red: el navegador no puede descubrir un @import hasta haber
   descargado y analizado el fichero que lo contiene, así que eran **dos rondas
   seriadas de peticiones bloqueantes** en lugar de una. Con doce `<link>` los
   ve todos en el primer análisis del HTML y los pide en paralelo.

   De regalo desaparece una trampa: la versión de estas hojas era un contador
   aparte que había que subir a mano dentro de este fichero, porque
   STATIC_ASSET_VERSION solo viajaba en el `<link>` del padre. Ahora las doce
   cuelgan de `static_asset_version` como todo lo demás.

   **Este fichero tiene que seguir siendo el último de los tres globales**: sus
   reglas iban después de los @import y ganan empates de especificidad por orden
   de carga. En `base.html` va detrás de las doce, que es donde estaba.

   ══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   PAGE HEADER

   Esta cabecera llevaba degradado de tres paradas, dos resplandores radiales
   de 340 y 260 px, doble sombra, icono de 68 px y 1,6/1,8 rem de relleno. Y
   estaba en las 47 pantallas de la app.

   El coste no era el CSS: eran unos 180 px de alto y toda la carga visual de
   la pantalla gastados, antes de ver el primer dato, en un bloque que casi
   siempre se limita a repetir el título que ya está en el menú lateral.

   Así que la compacta pasa a ser la de serie y la completa se pide con
   `is-hero`. Se invirtió en este sentido y no al revés a propósito: si el
   adorno hay que pedirlo, se pide donde aporta; si hay que quitarlo, se queda
   en todas partes por inercia.
═══════════════════════════════════════════════ */
.page-header-modern {
  background: var(--ui-header-surface);
  border: 1px solid var(--ui-header-borde);
  box-shadow: 0 4px 16px var(--ui-sombra-1);
  padding: 1.05rem 1.3rem;
  border-radius: var(--ui-radius-surface);
  margin-bottom: 1.15rem;
  position: relative;
  overflow: hidden;
}

/* Portada y ficha de curso: aquí la cabecera sí es el contenido, porque
   resume el curso entero y es donde se aterriza. */
.page-header-modern.is-hero {
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 32px var(--ui-sombra-2), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}

.page-header-modern.is-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -5%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-dark) 30%, transparent), transparent 65%);
  pointer-events: none;
}

.page-header-modern.is-hero::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: 15%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%);
  pointer-events: none;
}

.page-header-modern .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.page-header-modern .header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.page-header-modern .header-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--ui-radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-dark) 70%, transparent) 0%, rgba(7, 48, 56, 0.85) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}

.page-header-modern .header-icon .material-symbols-rounded {
  font-size: 22px;
  color: inherit;
}

.page-header-modern.is-hero .header-icon {
  width: 68px;
  height: 68px;
  border-radius: var(--ui-radius-surface);
  border-width: 2px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--brand-dark) 35%, transparent), inset 0 0 20px color-mix(in srgb, var(--accent) 8%, transparent);
}

.page-header-modern.is-hero .header-icon .material-symbols-rounded {
  font-size: 2rem;
}

.page-header-modern .header-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.page-header-modern.is-hero .header-main {
  gap: 0.45rem;
}

.page-header-modern .header-title {
  color: #ffffff;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
}

.page-header-modern.is-hero .header-title {
  font-size: clamp(1.6rem, 3vw, 2rem);
  letter-spacing: -0.03em;
}

.page-header-modern .header-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  max-width: 72ch;
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.header-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.82rem;
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-text-xs);
  font-weight: 700;
  color: #ffffff;
  background: var(--ui-velo-3);
  border: 1px solid var(--ui-velo-4);
}

.header-stat-chip .material-symbols-rounded {
  font-size: var(--ui-text-base);
  color: var(--brand);
}

/* ── Estados del distintivo ──
   «Acceso pendiente», «Acceso cerrado», «Nuevo», «sin leer»… se escribían con
   un `style=""` que pisaba el fondo y el color, nueve veces y con nueve
   parejas de valores distintas para tres estados. Y con hex de paleta clara
   (#d4a017, #dc3545, #198754), heredados de otro sistema.

   Como modificadores salen de los tokens semánticos, cambian con el tema y el
   icono deja de ir en lima —que sobre un fondo ámbar al 12 % no se distingue—
   para tomar el color del propio estado. */
.header-stat-chip.is-ok,
.header-stat-chip.is-warn,
.header-stat-chip.is-bad,
.header-stat-chip.is-info {
  border-color: color-mix(in srgb, currentColor 32%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.header-stat-chip.is-ok    { color: var(--ui-success); }
.header-stat-chip.is-warn  { color: var(--ui-warning); }
.header-stat-chip.is-bad   { color: var(--ui-danger); }
.header-stat-chip.is-info  { color: var(--ui-info); }

/* Un distintivo que además es enlace («N sin corregir» lleva a Calificaciones):
   sin esto hereda el subrayado y el azul de enlace y deja de parecer un chip. */
a.header-stat-chip {
  text-decoration: none;
}
a.header-stat-chip:hover,
a.header-stat-chip:focus-visible {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.header-stat-chip.is-ok .material-symbols-rounded,
.header-stat-chip.is-warn .material-symbols-rounded,
.header-stat-chip.is-bad .material-symbols-rounded,
.header-stat-chip.is-info .material-symbols-rounded {
  color: currentColor;
}

.header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════
   HEADER BUTTONS
═══════════════════════════════════════════════ */
.btn-header {
  padding: 0.7rem 1.15rem;
  border-radius: var(--ui-radius-control);
  font-weight: 700;
  font-size: var(--ui-text-md);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-header-primary {
  background: var(--brand);
  color: var(--brand-contrast);
  box-shadow: 0 4px 16px var(--ui-sombra-1);
}

.btn-header-primary:hover {
  background: var(--brand-hover);
  color: var(--brand-contrast);
  transform: translateY(-1px);
}

.btn-header-secondary {
  background: var(--ui-velo-4);
  color: #ffffff;
  border: 1px solid var(--ui-velo-4);
}

.btn-header-secondary:hover {
  background: var(--ui-velo-5);
  color: #ffffff;
}

.btn-header-danger {
  background: rgba(255, 87, 87, 0.14);
  color: #ffb3b3;
  border: 1px solid rgba(255, 87, 87, 0.3);
}

.btn-header-danger:hover {
  background: var(--accent-orange);
  color: #ffffff;
}

/* Lo que destruye datos se separa de lo que no. El hueco es el aviso: si el
   botón de borrar está pegado al de crear, la única defensa contra un clic
   torcido es la pantalla de confirmación, y eso ya es tarde. */
.btn-header.is-apartado {
  margin-left: auto;
}

@media (max-width: 767.98px) {
  /* Apilados no hay «a la derecha del todo», así que el hueco se hace arriba. */
  .btn-header.is-apartado {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

.icon-inline {
  font-size: var(--ui-text-base);
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════
   STATS GRID — colorful tiles
═══════════════════════════════════════════════ */
.stats-grid-modern {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card-modern {
  border-radius: var(--ui-radius-surface);
  padding: 1.4rem 1.5rem;
  box-shadow: 0 10px 28px var(--ui-sombra-2);
  border: 1px solid var(--ui-velo-2);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px var(--ui-sombra-2);
}

.stat-card-modern::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--ui-velo-2);
  pointer-events: none;
}

/* Teal — Cursos */
.stat-card-modern:nth-child(1) {
  background: linear-gradient(135deg, #071a1e 0%, var(--brand-dark) 100%);
}

/* Cyan — Tutoriales */
.stat-card-modern:nth-child(2) {
  background: linear-gradient(135deg, #164e63 0%, #0891b2 100%);
}

/* Red — Sesiones */
.stat-card-modern:nth-child(3) {
  background: linear-gradient(135deg, #5c1010 0%, var(--accent-orange) 100%);
}

.stat-card-modern .stat-label {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--ui-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.stat-card-modern .stat-value {
  color: #ffffff;
  font-family: var(--xestio-font);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ═══════════════════════════════════════════════
   PANELS
═══════════════════════════════════════════════ */
.panel-shell {
  background: var(--ui-surface-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--ui-radius-surface);
  box-shadow: 0 10px 28px var(--ui-sombra-1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.panel-shell-body {
  padding: 1.25rem;
}

.panel-shell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-shell-title {
  margin: 0;
  font-size: var(--ui-text-base);
  font-weight: 700;
  color: var(--text);
}

/* ═══════════════════════════════════════════════
   GRID LAYOUT
═══════════════════════════════════════════════ */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.panel-col-4 { grid-column: span 4; }
.panel-col-5 { grid-column: span 5; }
.panel-col-6 { grid-column: span 6; }
.panel-col-7 { grid-column: span 7; }
.panel-col-8 { grid-column: span 8; }
.panel-col-12 { grid-column: span 12; }

/* ═══════════════════════════════════════════════
   RESOURCE CARDS
═══════════════════════════════════════════════ */
.resource-card {
  background: var(--ui-surface-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--ui-radius-surface);
  padding: 1.15rem;
  box-shadow: 0 8px 24px var(--ui-sombra-1);
  height: 100%;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.resource-card:hover {
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  transform: translateY(-2px);
}

.resource-card.course-active {
  border-color: rgba(52, 211, 153, 0.3);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
}

.resource-card .resource-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.resource-card .resource-tag {
  display: inline-flex;
  padding: 0.34rem 0.72rem;
  border-radius: var(--ui-radius-pill);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: var(--ui-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  align-items: center;
  gap: 0.25rem;
}

/* Sin esto el icono hereda los 24 px de `.material-symbols-rounded` y revienta
   la altura del distintivo. Lo llevaba cada plantilla en su `style=""`. */
.resource-card .resource-tag .material-symbols-rounded {
  font-size: 14px;
}

/* El distintivo del curso que se está dando ahora. Se escribía a mano en la
   plantilla con `color:#2e7d32`, un verde de paleta clara: sobre la superficie
   de la tarjeta daba 3,6:1, por debajo del 4,5:1 que pide AA, y justo en el
   dato que dice qué curso tienes en marcha. */
.resource-card .resource-tag-activo {
  background: rgba(52, 211, 153, 0.14);
  color: var(--ui-success);
  border-color: rgba(52, 211, 153, 0.32);
}

.resource-card h2,
.resource-card h3 {
  margin-bottom: 0.55rem;
  color: var(--text);
}

.resource-card p {
  margin-bottom: 1rem;
  color: var(--muted);
}

/* ── Avatar con la inicial ──
   Se escribía en línea en dos sitios con `color:#fff` sobre `var(--brand)`:
   blanco sobre el lima de marca da 1,25:1 y la inicial no se leía. */
.avatar-inicial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--ui-text-md);
  flex-shrink: 0;
}

.avatar-inicial.is-grande {
  width: 36px;
  height: 36px;
}

/* ── Menú flotante ──
   El de «compartir en» del tablón se pintaba con `background:#fff`: una caja
   blanca saliendo de una aplicación oscura, y con texto gris encima —2,6:1—,
   porque el fondo venía de una paleta y el texto de otra. */
.menu-flotante {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  background: var(--ui-surface-solid);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-control);
  padding: 14px;
  width: max-content;
  max-width: min(600px, 90vw);
  box-shadow: 0 4px 20px var(--ui-sombra-2);
}

/* ═══════════════════════════════════════════════
   TARJETA DE CURSO — cifras, calendario y datos

   La tarjeta era distintivo, título, descripción y un botón: con catorce
   cursos, catorce rectángulos que había que leer de uno en uno. Esto le da la
   misma estructura que las fichas de Gesttation, que es donde el profesorado
   ya sabe mirar: dos cifras arriba, una barra, y los datos con su icono.
═══════════════════════════════════════════════ */

/* Caja de cifras: recuadro propio para que los dos números no compitan con el
   título ni con los datos de abajo. */
.curso-cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.9rem 0.6rem;
  border-radius: var(--ui-radius-control);
  background: var(--ui-velo-1);
  border: 1px solid var(--ui-line-subtle);
}

.curso-cifra {
  text-align: center;
  min-width: 0;
}

.curso-cifra-valor {
  display: block;
  font-family: var(--xestio-font);
  font-size: var(--ui-text-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.curso-cifra-pie {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--ui-text-xs);
  color: var(--ui-text-faint);
}

/* Lo que queda, por tramos. El color ahorra la comparación: en verde no pide
   nada, en rojo ya se acabó. Va con el número, que es el que se mira. */
.curso-cifra.is-holgado   .curso-cifra-valor { color: var(--ui-success); }
.curso-cifra.is-proximo   .curso-cifra-valor { color: var(--ui-warning); }
.curso-cifra.is-ultimos   .curso-cifra-valor { color: var(--accent-orange); }
.curso-cifra.is-terminado .curso-cifra-valor { color: var(--ui-danger); }

/* Barra del calendario */
.curso-barra-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: var(--ui-text-xs);
  color: var(--ui-text-faint);
}

.curso-barra-pct {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.curso-barra {
  height: 7px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-velo-3);
  overflow: hidden;
  margin-bottom: 1rem;
}

.curso-barra-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-dark), var(--accent));
}

/* Datos con icono. El icono no decora: es lo que permite encontrar la fecha
   sin leer la etiqueta, que es como se recorre una rejilla de tarjetas. */
.curso-datos {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}

.curso-datos > div {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.curso-datos dt {
  flex: 0 0 auto;
  line-height: 1;
}

.curso-datos dt .material-symbols-rounded {
  font-size: 18px;
  color: var(--accent);
}

.curso-datos dd {
  margin: 0;
  min-width: 0;
  font-size: var(--ui-text-md);
  color: var(--ui-text-soft);
  font-variant-numeric: tabular-nums;
}

/* La descripción se corta a dos líneas: es lo único de largo variable, y sin
   tope una tarjeta con párrafo desalinea toda la fila. */
.curso-dato-descripcion {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-card .resource-footer {
  margin-top: auto;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════
   STACK LIST (items within panels)
═══════════════════════════════════════════════ */
.stack-list {
  display: grid;
  gap: 0.6rem;
}

.stack-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.88rem 1rem;
  border-radius: var(--ui-radius-surface);
  background: var(--ui-surface-alt);
  border: 1px solid color-mix(in srgb, var(--brand-dark) 10%, transparent);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

a.stack-item {
  text-decoration: none;
  cursor: pointer;
}

.stack-item:hover,
a.stack-item:hover {
  background: color-mix(in srgb, var(--brand-dark) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateX(2px);
}

.stack-item.course-active {
  border-color: rgba(52, 211, 153, 0.25);
  background: rgba(16, 185, 129, 0.06);
}

.stack-item-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stack-item-title {
  color: var(--text);
  font-weight: 700;
}

.stack-item-subtitle {
  color: var(--muted);
  font-size: var(--ui-text-md);
}

/* ═══════════════════════════════════════════════
   FEATURE CALLOUT
═══════════════════════════════════════════════ */
.feature-callout {
  background: linear-gradient(135deg, #071a1e 0%, var(--brand-dark) 60%, #0e4a53 100%);
  color: #ffffff;
  border-radius: var(--ui-radius-surface);
  padding: 1.25rem 1.4rem;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-dark) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.feature-callout p,
.feature-callout h2,
.feature-callout h3 {
  color: inherit;
}

.feature-callout .btn-outline-primary {
  background: var(--ui-velo-4);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
}

.feature-callout .btn-outline-primary:hover {
  background: var(--brand);
  color: var(--brand-contrast);
}

/* ═══════════════════════════════════════════════
   FORM PANELS
═══════════════════════════════════════════════ */
.form-shell {
  max-width: 840px;
  margin: 0 auto;
}

.form-panel {
  background: var(--ui-surface-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--ui-radius-surface);
  overflow: hidden;
  box-shadow: 0 14px 34px var(--ui-sombra-2);
}

.form-panel-header {
  padding: 1.25rem 1.35rem;
  background: linear-gradient(135deg, #040c0e 0%, #092830 55%, var(--brand-dark) 130%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.form-panel-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-dark) 35%, transparent), transparent 65%);
  pointer-events: none;
}

.form-panel-header h1 {
  margin: 0.25rem 0 0;
  color: #ffffff;
  font-size: var(--ui-text-2xl);
  position: relative;
  z-index: 1;
}

.form-panel-header p {
  margin: 0.4rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  position: relative;
  z-index: 1;
}

.form-panel-body {
  padding: 1.35rem;
}

.form-section-title {
  margin: 0 0 0.8rem;
  color: var(--brand);
  font-size: var(--ui-text-base);
}

/* ═══════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════ */
.empty-state-shell {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--ui-radius-surface);
  border: 1px dashed color-mix(in srgb, var(--accent) 20%, transparent);
  background: color-mix(in srgb, var(--brand-dark) 4%, transparent);
}

.empty-state-shell .text-secondary,
.empty-state-shell p {
  color: var(--muted);
}

/* ═══════════════════════════════════════════════
   ACTION STRIP
═══════════════════════════════════════════════ */
.action-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* ═══════════════════════════════════════════════
   STEP CARDS
═══════════════════════════════════════════════ */
.step-card-shell {
  background: var(--ui-surface-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--ui-radius-surface);
  box-shadow: 0 10px 24px var(--ui-sombra-1);
}

.step-card-shell + .step-card-shell {
  margin-top: 1rem;
}

.step-card-shell.is-current {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--brand-dark) 25%, transparent);
}

.step-card-body {
  padding: 1.25rem;
}

.step-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.step-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--muted);
  font-size: var(--ui-text-md);
  text-align: right;
}

.step-card-footer {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ═══════════════════════════════════════════════
   CONTENT BLOCKS
═══════════════════════════════════════════════ */
.content-block-modern {
  padding: 1rem 1.1rem;
  background: var(--ui-surface-alt);
  border: 1px solid color-mix(in srgb, var(--brand-dark) 12%, transparent);
  border-radius: var(--ui-radius-surface);
}

.content-block-modern + .content-block-modern {
  margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════
   QUESTION CARDS
═══════════════════════════════════════════════ */
.question-list {
  display: grid;
  gap: 0.75rem;
}

.question-card {
  padding: 0.95rem 1rem;
  background: var(--ui-surface-alt);
  border: 1px solid color-mix(in srgb, var(--brand-dark) 12%, transparent);
  border-radius: var(--ui-radius-surface);
}

.question-card p:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════
   SPLIT PANEL
═══════════════════════════════════════════════ */
.split-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 1rem;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .stats-grid-modern {
    grid-template-columns: 1fr;
  }

  .split-panel-grid {
    grid-template-columns: 1fr;
  }

  .panel-col-4,
  .panel-col-5,
  .panel-col-6,
  .panel-col-7,
  .panel-col-8,
  .panel-col-12 {
    grid-column: span 12;
  }
}

@media (max-width: 767.98px) {
  .page-header-modern .header-content,
  .panel-shell-header,
  .stack-item,
  .step-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header-modern .header-left {
    align-items: flex-start;
  }

  .step-card-meta {
    text-align: left;
  }
}