@charset "UTF-8";
/* =============================================================================
   ALLIANCE GYM — Hoja de estilos única del sistema
   -----------------------------------------------------------------------------
   Identidad: escudo negro/carbón con rojo intenso y tipografía condensada.
   Sin fuentes remotas, sin @import, sin URLs externas: todo autocontenido
   para que la app funcione abriendo index.html con doble clic (file://).

   Índice
     01. Reset y cimientos
     02. Variables de tema (oscuro / claro)
     03. Tipografía base y accesibilidad
     04. Barras de desplazamiento y selección
     05. Pantalla de arranque (.boot)
     06. Shell: sidebar, topbar, contenido
     07. Pantalla de acceso (login)
     08. Layout de página y grillas
     09. Tarjetas
     10. KPIs
     11. Botones
     12. Formularios
     13. Tablas
     14. Insignias, chips y píldoras
     15. Avatares
     16. Pestañas
     17. Progreso: barras y anillos
     18. Listas
     19. Estados: vacío, cargando, esqueleto
     20. Modales
     21. Notificaciones flotantes (toasts)
     22. Estrellas de calificación
     23. Línea de tiempo
     24. Tarjetas seleccionables (radio-cards)
     25. Gráficas SVG
     26. Utilidades
     27. Adaptación a pantallas pequeñas
     28. Impresión
     29. Movimiento reducido
     --- Rediseño v2 (menos texto, más ilustración, sesiones y eventos) ---
     30. Tokens complementarios (calma, *-rgb)
     31. Saludo
     32. Tarjeta "Hoy" (.hoy .descanso .alerta)
     33. Tiles
     34. Desplegable
     35. Pasos
     36. Ilustraciones de ejercicio
     37. Agenda de sesiones (chip-dia, slots, sesion-card)
     38. Eventos
     39. Vacío amable
     40. Nutrición: platillo y sustituto
     41. Bienvenida, ánimo y descanso activo
     42. Utilidades de aire (.apretado .aire-lg)
     43. Adaptación móvil del rediseño
     44. Impresión y movimiento reducido del rediseño
   ============================================================================= */


/* =============================================================================
   01. RESET Y CIMIENTOS
   ============================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset { border: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--borde);
  margin: 16px 0;
}


/* =============================================================================
   02. VARIABLES DE TEMA
   ============================================================================= */

:root {
  /* --- Marca --- */
  --rojo:          #E4322B;
  --rojo-2:        #FF4A3D;
  --rojo-oscuro:   #A61B16;
  --rojo-rgb:      228, 50, 43;
  --acento:        #E4322B;

  /* --- Superficies (tema oscuro) --- */
  --negro:         #0E0F11;
  --carbon:        #16181C;
  --carbon-2:      #1A1D22;
  --panel:         #1D2025;
  --panel-2:       #24272E;

  /* --- Bordes --- */
  --borde:         #2B2F36;
  --borde-2:       #3A404A;

  /* --- Texto --- */
  --texto:         #F2F3F5;
  --texto-2:       #A8AEB8;
  --texto-3:       #6E7681;

  /* --- Semánticos --- */
  --ok:            #22C55E;
  --warn:          #F59E0B;
  --error:         #EF4444;
  --info:          #3B82F6;

  /* --- Tintes suaves (fondos de badges, filas, avisos) --- */
  --ok-bg:         rgba(34, 197, 94, .14);
  --warn-bg:       rgba(245, 158, 11, .14);
  --error-bg:      rgba(239, 68, 68, .14);
  --info-bg:       rgba(59, 130, 246, .14);
  --rojo-bg:       rgba(228, 50, 43, .14);
  --neutro-bg:     rgba(168, 174, 184, .12);

  /* --- Sombras --- */
  --sombra:        0 1px 2px rgba(0, 0, 0, .30), 0 4px 14px rgba(0, 0, 0, .28);
  --sombra-lg:     0 8px 24px rgba(0, 0, 0, .38), 0 24px 60px rgba(0, 0, 0, .46);
  --sombra-rojo:   0 6px 20px rgba(228, 50, 43, .32);

  /* --- Formas --- */
  --radio:         14px;
  --radio-sm:      10px;
  --radio-lg:      20px;
  --radio-full:    999px;

  /* --- Movimiento --- */
  --trans:         180ms cubic-bezier(.4, 0, .2, 1);
  --trans-lento:   320ms cubic-bezier(.4, 0, .2, 1);

  /* --- Medidas del shell --- */
  --sidebar-w:     250px;
  --topbar-h:      62px;
  --pad-vista:     24px;

  /* --- Tipografías (100% locales) --- */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
            "Roboto Mono", "SFMono-Regular", Menlo, monospace;

  /* --- Paleta para gráficas SVG (AG.Charts) --- */
  --grid:          rgba(168, 174, 184, .16);
  --eje:           #6E7681;
  --chart-1:       #E4322B;
  --chart-2:       #3B82F6;
  --chart-3:       #22C55E;
  --chart-4:       #F59E0B;
  --chart-5:       #A855F7;
  --chart-6:       #06B6D4;
  --chart-7:       #EC4899;
  --chart-8:       #84CC16;

  color-scheme: dark;
}

/* ------------------------- Tema claro ------------------------- */
[data-tema="claro"] {
  --rojo:          #E4322B;
  --rojo-2:        #FF4A3D;
  --rojo-oscuro:   #A61B16;
  --acento:        #D42921;

  --negro:         #EDEFF3;   /* fondo general de la aplicación */
  --carbon:        #FFFFFF;   /* sidebar y topbar */
  --carbon-2:      #F5F6F8;   /* superficies de hover */
  --panel:         #FFFFFF;   /* tarjetas */
  --panel-2:       #F5F6F8;   /* superficies anidadas e inputs */

  --borde:         #DEE2E9;
  --borde-2:       #C3CAD5;

  --texto:         #14161A;
  --texto-2:       #545C68;
  --texto-3:       #838C99;

  --ok:            #16A34A;
  --warn:          #C2740B;
  --error:         #DC2626;
  --info:          #2563EB;

  --ok-bg:         rgba(22, 163, 74, .12);
  --warn-bg:       rgba(194, 116, 11, .13);
  --error-bg:      rgba(220, 38, 38, .11);
  --info-bg:       rgba(37, 99, 235, .11);
  --rojo-bg:       rgba(228, 50, 43, .10);
  --neutro-bg:     rgba(84, 92, 104, .09);

  --sombra:        0 1px 2px rgba(16, 22, 34, .06), 0 4px 14px rgba(16, 22, 34, .07);
  --sombra-lg:     0 10px 26px rgba(16, 22, 34, .12), 0 26px 60px rgba(16, 22, 34, .14);
  --sombra-rojo:   0 6px 18px rgba(228, 50, 43, .26);

  /* Forma y movimiento: idénticos al tema oscuro, se declaran para que el
     contrato quede completo en ambos temas. */
  --radio:         14px;
  --radio-sm:      10px;
  --radio-lg:      20px;
  --radio-full:    999px;
  --trans:         180ms cubic-bezier(.4, 0, .2, 1);
  --trans-lento:   320ms cubic-bezier(.4, 0, .2, 1);

  --grid:          rgba(20, 22, 26, .10);
  --eje:           #838C99;
  --chart-1:       #E4322B;
  --chart-2:       #2563EB;
  --chart-3:       #16A34A;
  --chart-4:       #C2740B;
  --chart-5:       #9333EA;
  --chart-6:       #0891B2;
  --chart-7:       #DB2777;
  --chart-8:       #65A30D;

  color-scheme: light;
}


/* =============================================================================
   03. TIPOGRAFÍA BASE Y ACCESIBILIDAD
   ============================================================================= */

html, body { height: 100%; }

body {
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--negro);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  transition: background var(--trans), color var(--trans);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--texto);
}

h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
h5 { font-size: 13px; }
h6 { font-size: 12px; }

b, strong { font-weight: 700; }

small { font-size: 12px; }

code, kbd, pre, samp { font-family: var(--fuente-mono); font-size: .92em; }

kbd {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 11px;
}

/* Enfoque accesible visible en todo elemento interactivo */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--rojo-2);
  outline-offset: 2px;
  border-radius: 4px;
}

.btn:focus-visible,
.btn-icono:focus-visible,
.nav-item:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.list-item:focus-visible,
.radio-card:focus-within {
  outline: 2px solid var(--rojo-2);
  outline-offset: 2px;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible { outline: none; }

/* Salto al contenido para lectores de pantalla */
.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =============================================================================
   04. BARRAS DE DESPLAZAMIENTO Y SELECCIÓN
   ============================================================================= */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--borde-2) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: var(--borde-2);
  border-radius: var(--radio-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--texto-3);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner { background: transparent; }

::selection {
  background: rgba(var(--rojo-rgb), .38);
  color: #fff;
}

::placeholder { color: var(--texto-3); opacity: 1; }


/* =============================================================================
   05. PANTALLA DE ARRANQUE
   ============================================================================= */

.boot {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(900px 520px at 50% 20%, rgba(var(--rojo-rgb), .10), transparent 70%),
    var(--negro);
  color: var(--texto-2);
}

.boot p {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
  animation: pulso 1.6s ease-in-out infinite;
}

.boot-logo {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: var(--radio-lg);
  background: linear-gradient(140deg, var(--rojo-2), var(--rojo) 45%, var(--rojo-oscuro));
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
  box-shadow: var(--sombra-rojo);
  position: relative;
  overflow: hidden;
}

.boot-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .28) 50%, transparent 58%);
  transform: translateX(-120%);
  animation: brillo 2.2s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

@keyframes brillo {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}


/* =============================================================================
   06. SHELL: SIDEBAR + TOPBAR + CONTENIDO
   ============================================================================= */

#app { min-height: 100vh; }

.app-shell { display: block; }

.shell {
  min-height: 100vh;
  background: var(--negro);
}

/* ---------------------------- Sidebar ---------------------------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--carbon);
  border-right: 1px solid var(--borde);
  transition: transform var(--trans-lento);
}

.sidebar::after {
  /* Filo rojo tenue que refuerza la marca */
  content: '';
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--rojo) 0%, transparent 38%);
  opacity: .65;
  pointer-events: none;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 16px 15px;
  min-height: var(--topbar-h);
  border-bottom: 1px solid var(--borde);
}

.logo-escudo {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--rojo-2), var(--rojo) 48%, var(--rojo-oscuro));
  color: #fff;
  box-shadow: var(--sombra-rojo);
  position: relative;
  overflow: hidden;
}

.logo-escudo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 55%, rgba(0, 0, 0, .22) 100%);
}

.logo-escudo svg { position: relative; z-index: 1; }
.logo-escudo svg path,
.logo-escudo svg circle,
.logo-escudo svg rect { stroke: currentColor; }

.logo-txt { min-width: 0; display: flex; flex-direction: column; }

.logo-txt b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo-txt span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------ Navegación ------------------------------ */

.nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-grupo {
  margin: 14px 0 6px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.nav-grupo:first-child { margin-top: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--radio-sm);
  color: var(--texto-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: background var(--trans), color var(--trans);
}

.nav-item svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  opacity: .85;
  transition: opacity var(--trans), color var(--trans);
}

.nav-item span,
.nav-item .nav-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item:hover {
  background: var(--carbon-2);
  color: var(--texto);
}

.nav-item:hover svg { opacity: 1; }

.nav-item.active {
  background: linear-gradient(90deg, rgba(var(--rojo-rgb), .20), rgba(var(--rojo-rgb), .05));
  color: var(--texto);
}

.nav-item.active svg { color: var(--rojo-2); opacity: 1; }

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--rojo);
}

.nav-item .nav-contador {
  margin-left: auto;
  min-width: 20px;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--radio-full);
  background: var(--rojo);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
}

/* -------------------------- Pie del sidebar -------------------------- */

.sidebar-pie {
  flex: 0 0 auto;
  padding: 12px;
  border-top: 1px solid var(--borde);
  background: var(--carbon);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radio-sm);
  background: var(--panel-2);
  border: 1px solid var(--borde);
}

.su-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }

.su-txt b {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.su-txt span {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------- Principal ------------------------------- */

.principal {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--negro);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--pad-vista);
  background: color-mix(in srgb, var(--carbon) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--borde);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .topbar { background: var(--carbon); }
}

.topbar-titulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-acciones {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-user {
  display: flex;
  align-items: center;
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--borde);
}

.punto-notif {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 0 2px var(--carbon);
  animation: latido 2s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.25); opacity: .75; }
}

.contenido {
  flex: 1 1 auto;
  min-width: 0;
  padding: 20px var(--pad-vista) 56px;
  animation: entradaVista 260ms ease both;
}

@keyframes entradaVista {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------- Backdrop ------------------------------- */

.backdrop-nav {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--trans), visibility var(--trans);
}

.backdrop-nav.visible { opacity: 1; visibility: visible; }


/* =============================================================================
   07. PANTALLA DE ACCESO (LOGIN)
   ============================================================================= */

.app-login { min-height: 100vh; }

.login-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--negro);
}

/* --- Columna del formulario --- */
.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 48px clamp(20px, 6vw, 72px);
  background:
    radial-gradient(700px 420px at 15% 0%, rgba(var(--rojo-rgb), .10), transparent 65%),
    var(--carbon);
  overflow-y: auto;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.login-emblema {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(140deg, var(--rojo-2), var(--rojo) 48%, var(--rojo-oscuro));
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  box-shadow: var(--sombra-rojo);
  position: relative;
  overflow: hidden;
}

.login-emblema::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 52%, rgba(0, 0, 0, .25) 100%);
}

.login-emblema svg { position: relative; z-index: 1; }

.login-brand h1 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.1;
}

.login-brand p,
.login-brand span {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-top: 3px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 400px;
  width: 100%;
}

.login-form h2 {
  font-size: 19px;
  margin-bottom: -2px;
}

.login-form .btn-primary { margin-top: 4px; }

.login-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radio-sm);
  background: var(--error-bg);
  border: 1px solid rgba(239, 68, 68, .35);
  color: var(--error);
  font-size: 13px;
  font-weight: 600;
  animation: temblor 380ms ease;
}

@keyframes temblor {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* --- Cuentas de demostración --- */
.login-demo {
  max-width: 400px;
  width: 100%;
  border-top: 1px dashed var(--borde);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-demo > p,
.login-demo > .login-demo-titulo {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.demo-cuenta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--panel-2);
  color: var(--texto-2);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans), transform var(--trans), color var(--trans);
}

.demo-cuenta:hover {
  border-color: var(--rojo);
  background: var(--rojo-bg);
  color: var(--texto);
  transform: translateX(3px);
}

.demo-cuenta b {
  color: var(--texto);
  font-weight: 700;
  min-width: 74px;
}

.demo-cuenta span { color: var(--texto-3); }

.demo-cuenta .avatar { flex: 0 0 auto; }

/* --- Columna decorativa --- */
.login-arte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 56px clamp(28px, 5vw, 64px);
  color: #fff;
  background:
    radial-gradient(760px 620px at 78% 12%, rgba(var(--rojo-rgb), .55), transparent 62%),
    linear-gradient(150deg, #1B1D22 0%, #101114 46%, #0A0B0D 100%);
  isolation: isolate;
}

/* Patrón geométrico: franjas diagonales en CSS puro */
.login-arte::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .045) 0 2px,
      transparent 2px 46px),
    repeating-linear-gradient(65deg,
      rgba(var(--rojo-rgb), .16) 0 3px,
      transparent 3px 120px);
  transform: rotate(-4deg);
}

/* Cuñas rojas superpuestas, como en el escudo del logo */
.login-arte::after {
  content: '';
  position: absolute;
  right: -18%;
  top: -14%;
  width: 78%;
  height: 128%;
  z-index: -1;
  background: linear-gradient(155deg,
    rgba(var(--rojo-rgb), .95) 0%,
    rgba(var(--rojo-rgb), .55) 42%,
    rgba(166, 27, 22, 0) 78%);
  clip-path: polygon(38% 0%, 100% 0%, 62% 100%, 0% 100%);
  opacity: .55;
  filter: blur(.4px);
}

.login-arte h2 {
  position: relative;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-shadow: 0 6px 28px rgba(0, 0, 0, .55);
}

.login-arte h2 em {
  font-style: normal;
  color: var(--rojo-2);
  text-shadow: 0 0 24px rgba(var(--rojo-rgb), .55);
}

.login-arte p {
  position: relative;
  max-width: 46ch;
  color: rgba(255, 255, 255, .78);
  font-size: 14.5px;
}

.login-arte .login-arte-datos {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.login-arte .login-arte-datos div b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.login-arte .login-arte-datos div span {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

[data-tema="claro"] .login-arte { color: #fff; }


/* =============================================================================
   08. LAYOUT DE PÁGINA Y GRILLAS
   ============================================================================= */

.page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1560px;
  margin: 0 auto;
  width: 100%;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.page-title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title svg { color: var(--rojo); }

.page-sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--texto-2);
  max-width: 76ch;
}

.page-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ------------------------------- Grillas ------------------------------- */

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.grid.gap-sm { gap: 10px; }
.grid.gap-lg { gap: 24px; }

.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.span-todo { grid-column: 1 / -1; }

/* Colapsos progresivos */
@media (max-width: 1400px) {
  .grid.g5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .grid.g4,
  .grid.g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .grid.g3,
  .grid.g4,
  .grid.g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span3 { grid-column: span 2; }
}

@media (max-width: 700px) {
  .grid.g2,
  .grid.g3,
  .grid.g4,
  .grid.g5 { grid-template-columns: 1fr; }
  .span2,
  .span3 { grid-column: span 1; }
}


/* =============================================================================
   09. TARJETAS
   ============================================================================= */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}

.card.hover-elevar:hover {
  border-color: var(--borde-2);
  box-shadow: var(--sombra-lg);
  transform: translateY(-2px);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde);
  min-height: 52px;
}

.card-head > div { min-width: 0; }

.card-title {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.card-title svg { color: var(--rojo); flex: 0 0 auto; }

.card-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--texto-3);
}

.card-body {
  padding: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.card-body > * + * { margin-top: 0; }

.card-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--panel-2);
  border-radius: 0 0 var(--radio) var(--radio);
}

.card-accion {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-plano { box-shadow: none; }
.card-suave { background: var(--panel-2); }

/* --- Tarjeta destacada con franja diagonal de marca --- */
.card-rojo {
  overflow: hidden;
  border-color: rgba(var(--rojo-rgb), .38);
}

.card-rojo > .card-head {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, rgba(var(--rojo-rgb), .16), rgba(var(--rojo-rgb), .02) 62%);
  border-bottom-color: rgba(var(--rojo-rgb), .30);
}

.card-rojo > .card-head::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(115deg,
    rgba(var(--rojo-rgb), .22) 0 2px,
    transparent 2px 16px);
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 44%, #000 100%);
  opacity: .7;
}

.card-rojo > .card-head > * { position: relative; z-index: 1; }

.card-rojo::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rojo-oscuro), var(--rojo) 40%, var(--rojo-2));
}

.card-rojo .card-title { color: var(--texto); }
.card-rojo .card-title svg { color: var(--rojo-2); }


/* =============================================================================
   10. KPIs
   ============================================================================= */

.kpi {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}

.kpi:hover {
  border-color: var(--borde-2);
  transform: translateY(-2px);
  box-shadow: var(--sombra-lg);
}

.kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rojo);
  opacity: .9;
}

.kpi-icono {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rojo-bg);
  color: var(--rojo);
  border: 1px solid rgba(var(--rojo-rgb), .26);
}

.kpi-datos { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.kpi-val {
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--texto-2);
}

.kpi-trend svg { width: 14px; height: 14px; }
.kpi-trend.up   { color: var(--ok); }
.kpi-trend.down { color: var(--error); }
.kpi-trend.plana { color: var(--texto-3); }

/* Variantes de color del icono */
.kpi.kpi-ok    .kpi-icono { background: var(--ok-bg);    color: var(--ok);    border-color: rgba(34, 197, 94, .30); }
.kpi.kpi-warn  .kpi-icono { background: var(--warn-bg);  color: var(--warn);  border-color: rgba(245, 158, 11, .30); }
.kpi.kpi-info  .kpi-icono { background: var(--info-bg);  color: var(--info);  border-color: rgba(59, 130, 246, .30); }
.kpi.kpi-error .kpi-icono { background: var(--error-bg); color: var(--error); border-color: rgba(239, 68, 68, .30); }

.kpi.kpi-ok::before    { background: var(--ok); }
.kpi.kpi-warn::before  { background: var(--warn); }
.kpi.kpi-info::before  { background: var(--info); }
.kpi.kpi-error::before { background: var(--error); }


/* =============================================================================
   11. BOTONES
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  height: 38px;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  background: var(--panel-2);
  color: var(--texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--trans), border-color var(--trans),
              color var(--trans), transform var(--trans), box-shadow var(--trans);
}

.btn svg { flex: 0 0 auto; width: 17px; height: 17px; }

.btn:hover { background: var(--carbon-2); }
.btn:active { transform: translateY(1px); }

.btn[disabled],
.btn:disabled,
.btn.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Primario (marca) --- */
.btn-primary {
  background: linear-gradient(140deg, var(--rojo-2), var(--rojo) 55%, var(--rojo-oscuro));
  color: #fff;
  border-color: rgba(0, 0, 0, .18);
  box-shadow: 0 2px 10px rgba(var(--rojo-rgb), .28);
}

.btn-primary:hover {
  background: linear-gradient(140deg, #FF5C50, var(--rojo-2) 55%, var(--rojo));
  box-shadow: var(--sombra-rojo);
}

/* --- Fantasma --- */
.btn-ghost {
  background: transparent;
  color: var(--texto-2);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--panel-2);
  color: var(--texto);
}

/* --- Contorno --- */
.btn-outline {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde-2);
}

.btn-outline:hover {
  border-color: var(--rojo);
  color: var(--rojo-2);
  background: var(--rojo-bg);
}

/* --- Semánticos --- */
.btn-danger {
  background: var(--error);
  color: #fff;
  border-color: rgba(0, 0, 0, .18);
}

.btn-danger:hover { background: #DC2626; }

.btn-ok {
  background: var(--ok);
  color: #06240F;
  border-color: rgba(0, 0, 0, .16);
}

.btn-ok:hover { filter: brightness(1.08); }

[data-tema="claro"] .btn-ok { color: #fff; }

/* --- Tamaños --- */
.btn-sm {
  height: 31px;
  padding: 0 11px;
  font-size: 12px;
  gap: 5px;
  border-radius: 8px;
}

.btn-sm svg { width: 15px; height: 15px; }

.btn-lg {
  height: 46px;
  padding: 0 22px;
  font-size: 14.5px;
  border-radius: var(--radio);
}

.btn-lg svg { width: 19px; height: 19px; }

.btn-block { display: flex; width: 100%; }

/* --- Botón de icono --- */
.btn-icono {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}

.btn-icono:hover {
  background: var(--panel-2);
  color: var(--texto);
  border-color: var(--borde);
}

.btn-icono.peligro:hover {
  background: var(--error-bg);
  color: var(--error);
  border-color: rgba(239, 68, 68, .35);
}

.btn-icono.activo {
  background: var(--rojo-bg);
  color: var(--rojo-2);
  border-color: rgba(var(--rojo-rgb), .32);
}

.btn-icono.btn-sm { width: 30px; height: 30px; }

/* Grupo de botones segmentado */
.btn-grupo {
  display: inline-flex;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: var(--panel);
}

.btn-grupo .btn {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--borde);
  background: transparent;
}

.btn-grupo .btn:last-child { border-right: 0; }
.btn-grupo .btn.activo { background: var(--rojo-bg); color: var(--rojo-2); }


/* =============================================================================
   12. FORMULARIOS
   ============================================================================= */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.label .req { color: var(--rojo); font-weight: 800; }

.input,
.select,
.textarea {
  width: 100%;
  min-width: 0;
  padding: 0 12px;
  height: 38px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--panel-2);
  color: var(--texto);
  font-size: 13.5px;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
  appearance: none;
  -webkit-appearance: none;
}

.textarea {
  height: auto;
  min-height: 90px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--borde-2); }

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(var(--rojo-rgb), .18);
  background: var(--panel);
}

.input[disabled],
.select[disabled],
.textarea[disabled],
.input[readonly] {
  opacity: .6;
  cursor: not-allowed;
  background: var(--carbon-2);
}

.input.error,
.select.error,
.textarea.error,
.input:invalid:not(:placeholder-shown) {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .16);
}

/* Flecha del select dibujada solo con degradados (sin URL externa) */
.select {
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-2) 50%),
    linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.select option { background: var(--panel); color: var(--texto); }

/* Inputs nativos de fecha/hora en tema oscuro */
.input[type="date"],
.input[type="month"],
.input[type="time"],
.input[type="datetime-local"] { cursor: pointer; }

:root:not([data-tema="claro"]) .input[type="date"]::-webkit-calendar-picker-indicator,
:root:not([data-tema="claro"]) .input[type="month"]::-webkit-calendar-picker-indicator,
:root:not([data-tema="claro"]) .input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(.85);
  cursor: pointer;
}

.input[type="color"] {
  padding: 3px;
  height: 38px;
  cursor: pointer;
}

.input[type="range"] {
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radio-full);
  background: var(--borde);
}

.input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--rojo);
  border: 2px solid #fff;
  box-shadow: var(--sombra);
}

.input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: var(--radio-full);
  background: var(--borde);
}

.input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rojo);
  border: 2px solid #fff;
}

.help {
  font-size: 11.5px;
  color: var(--texto-3);
  line-height: 1.45;
}

.help.error { color: var(--error); font-weight: 600; }
.help.ok { color: var(--ok); font-weight: 600; }

/* Input con icono a la izquierda (buscadores) */
.input-icono {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.input-icono > svg {
  position: absolute;
  left: 11px;
  width: 17px;
  height: 17px;
  color: var(--texto-3);
  pointer-events: none;
}

.input-icono .input { padding-left: 36px; }

/* Filas y rejillas de formulario */
.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-row > .field { flex: 1 1 180px; min-width: 0; }

.form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.form-grid.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .ancho-total { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .form-grid,
  .form-grid.dos,
  .form-grid.tres { grid-template-columns: 1fr; }
}

/* ------------------------------- Interruptor ------------------------------- */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--texto);
  user-select: none;
}

.switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: var(--radio-full);
  background: var(--borde);
  border: 1px solid var(--borde-2);
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans);
}

.switch input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform var(--trans);
}

.switch input[type="checkbox"]:checked {
  background: var(--rojo);
  border-color: var(--rojo-oscuro);
}

.switch input[type="checkbox"]:checked::after { transform: translateX(18px); }

.switch input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------- Casillas ------------------------------- */

.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--texto);
  user-select: none;
  min-width: 0;
}

.check input[type="checkbox"],
.check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--borde-2);
  background: var(--panel-2);
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans);
}

.check input[type="radio"] { border-radius: 50%; }

.check input[type="checkbox"]:checked,
.check input[type="radio"]:checked {
  background: var(--rojo);
  border-color: var(--rojo);
}

/* Palomita dibujada con bordes (sin imágenes) */
.check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.check input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: #fff;
}

.check input:disabled { opacity: .5; cursor: not-allowed; }


/* =============================================================================
   13. TABLAS
   ============================================================================= */

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  -webkit-overflow-scrolling: touch;
}

.card > .table-wrap,
.card-body > .table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.table {
  width: 100%;
  min-width: 620px;
  font-size: 13px;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--carbon-2);
  color: var(--texto-2);
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 11px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--borde);
}

[data-tema="claro"] .table thead th { background: #F1F3F7; }

.table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
  vertical-align: middle;
}

.table tbody tr { transition: background var(--trans); }
.table tbody tr:hover td { background: var(--carbon-2); }
.table tbody tr:last-child td { border-bottom: 0; }

.table tbody tr.seleccionada td { background: var(--rojo-bg); }
.table tbody tr.clickable { cursor: pointer; }

.table tfoot td {
  padding: 11px 14px;
  background: var(--panel-2);
  font-weight: 700;
  border-top: 1px solid var(--borde);
}

.table .num,
.table .der {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table .cen { text-align: center; }
.table .acciones { text-align: right; white-space: nowrap; width: 1%; }

.table .acciones .btn-icono { vertical-align: middle; }

/* Encabezado ordenable */
th.sortable {
  cursor: pointer;
  user-select: none;
  padding-right: 26px;
  position: sticky;
}

th.sortable:hover { color: var(--texto); }

th.sortable::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  margin-top: -2px;
  border: 4px solid transparent;
  border-top-color: var(--texto-3);
  opacity: .35;
  transition: opacity var(--trans), transform var(--trans);
}

th.sortable:hover::after { opacity: .7; }

th.sortable.asc::after {
  opacity: 1;
  border-top-color: var(--rojo);
  transform: rotate(180deg);
  margin-top: -6px;
}

th.sortable.desc::after {
  opacity: 1;
  border-top-color: var(--rojo);
}

/* Variante compacta */
.table-compacta { min-width: 0; font-size: 12.5px; }
.table-compacta thead th { padding: 8px 10px; font-size: 10px; }
.table-compacta tbody td { padding: 7px 10px; }
.table-compacta tfoot td { padding: 8px 10px; }

/* Variante sin bordes internos, para listas de resumen */
.table-limpia tbody td { border-bottom: 0; }
.table-limpia tbody tr:nth-child(even) td { background: var(--panel-2); }


/* =============================================================================
   14. INSIGNIAS, CHIPS Y PÍLDORAS
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  height: 22px;
  border-radius: var(--radio-full);
  background: var(--neutro-bg);
  border: 1px solid transparent;
  color: var(--texto-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.badge svg { width: 12px; height: 12px; }

.badge-ok {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: rgba(34, 197, 94, .28);
}

.badge-warn {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: rgba(245, 158, 11, .30);
}

.badge-danger {
  background: var(--error-bg);
  color: var(--error);
  border-color: rgba(239, 68, 68, .30);
}

.badge-info {
  background: var(--info-bg);
  color: var(--info);
  border-color: rgba(59, 130, 246, .30);
}

.badge-muted {
  background: var(--neutro-bg);
  color: var(--texto-3);
  border-color: var(--borde);
}

.badge-rojo {
  background: var(--rojo-bg);
  color: var(--rojo-2);
  border-color: rgba(var(--rojo-rgb), .32);
}

[data-tema="claro"] .badge-rojo { color: var(--rojo-oscuro); }

.badge-solido {
  background: var(--rojo);
  color: #fff;
  border-color: transparent;
}

/* ------------------------------- Chips ------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 30px;
  border-radius: var(--radio-full);
  border: 1px solid var(--borde);
  background: var(--panel-2);
  color: var(--texto-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--trans), color var(--trans), border-color var(--trans), transform var(--trans);
}

.chip svg { width: 14px; height: 14px; }

.chip:hover {
  border-color: var(--borde-2);
  color: var(--texto);
}

.chip.on {
  background: var(--rojo);
  border-color: var(--rojo-oscuro);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--rojo-rgb), .30);
}

.chip.on:hover { background: var(--rojo-2); color: #fff; }

.chip:active { transform: scale(.97); }

.chip.chip-sm { height: 25px; padding: 0 9px; font-size: 11.5px; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ------------------------------- Píldoras ------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: var(--radio-full);
  background: var(--panel-2);
  border: 1px solid var(--borde);
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pill svg { width: 13px; height: 13px; }
.pill b { color: var(--texto); font-weight: 700; }

.pill-rojo { background: var(--rojo-bg); border-color: rgba(var(--rojo-rgb), .28); color: var(--rojo-2); }
.pill-ok   { background: var(--ok-bg);   border-color: rgba(34, 197, 94, .28);  color: var(--ok); }
.pill-warn { background: var(--warn-bg); border-color: rgba(245, 158, 11, .28); color: var(--warn); }
.pill-info { background: var(--info-bg); border-color: rgba(59, 130, 246, .28); color: var(--info); }

[data-tema="claro"] .pill-rojo { color: var(--rojo-oscuro); }


/* =============================================================================
   15. AVATARES
   ============================================================================= */

.avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-2);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  overflow: hidden;
  user-select: none;
  border: 2px solid var(--borde);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .30);
  box-shadow: inset 0 -12px 20px rgba(0, 0, 0, .16);
}

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

.avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 10.5px;
  border-width: 1.5px;
}

.avatar-lg {
  width: 52px;
  height: 52px;
  font-size: 18px;
  border-width: 2px;
}

.avatar-xl {
  width: 84px;
  height: 84px;
  font-size: 29px;
  border-width: 3px;
}

.avatar-grupo {
  display: inline-flex;
  align-items: center;
}

.avatar-grupo .avatar {
  margin-left: -10px;
  border-color: var(--panel);
}

.avatar-grupo .avatar:first-child { margin-left: 0; }

/* Bloque persona: avatar + nombre + detalle */
.persona {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.persona-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.32; }

.persona-txt b {
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.persona-txt span {
  font-size: 11.5px;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =============================================================================
   16. PESTAÑAS
   ============================================================================= */

.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { height: 0; }

.tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  color: var(--texto-3);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radio-sm) var(--radio-sm) 0 0;
  transition: color var(--trans), background var(--trans);
}

.tab svg { width: 16px; height: 16px; }

.tab:hover { color: var(--texto); background: var(--panel-2); }

.tab::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background var(--trans);
}

.tab.active { color: var(--texto); }
.tab.active::after { background: var(--rojo); }

.tab .badge { margin-left: 2px; }

/* Pestañas tipo "segmentos" */
.tabs-pastilla {
  border-bottom: 0;
  gap: 4px;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  display: inline-flex;
}

.tabs-pastilla .tab { border-radius: 7px; padding: 6px 12px; }
.tabs-pastilla .tab::after { display: none; }
.tabs-pastilla .tab.active { background: var(--rojo); color: #fff; }


/* =============================================================================
   17. PROGRESO: BARRAS Y ANILLOS
   ============================================================================= */

.bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: var(--radio-full);
  background: var(--panel-2);
  border: 1px solid var(--borde);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radio-full);
  background: linear-gradient(90deg, var(--rojo-oscuro), var(--rojo) 50%, var(--rojo-2));
  transition: width 700ms cubic-bezier(.22, .8, .28, 1);
  position: relative;
  overflow: hidden;
}

.bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .30) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: barBrillo 2.4s ease-in-out infinite;
}

@keyframes barBrillo {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.bar.bar-gruesa { height: 14px; }
.bar.bar-fina { height: 5px; }

.bar-fill.ok    { background: linear-gradient(90deg, #15803D, var(--ok)); }
.bar-fill.warn  { background: linear-gradient(90deg, #B45309, var(--warn)); }
.bar-fill.error { background: linear-gradient(90deg, #B91C1C, var(--error)); }
.bar-fill.info  { background: linear-gradient(90deg, #1D4ED8, var(--info)); }

.bar-etiqueta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--texto-2);
}

.bar-etiqueta b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ------------------------------- Anillo ------------------------------- */

.anillo {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 132px;
  max-width: 100%;
  margin: 0 auto;
}

.anillo svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.anillo .anillo-centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1px;
  pointer-events: none;
}

.anillo .anillo-val {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.anillo .anillo-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.anillo-sm { width: 84px; }
.anillo-sm .anillo-val { font-size: 16px; }
.anillo-lg { width: 180px; }
.anillo-lg .anillo-val { font-size: 34px; }

.anillos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}


/* =============================================================================
   18. LISTAS
   ============================================================================= */

.list {
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-sm);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--panel);
}

.card-body > .list { background: transparent; }

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
  background: transparent;
  text-align: left;
  transition: background var(--trans);
  min-width: 0;
  position: relative;
}

.list-item:last-child { border-bottom: 0; }

a.list-item,
button.list-item,
.list-item.clickable { cursor: pointer; }

.list-item:hover { background: var(--carbon-2); }

.list-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}

.list-item-main b {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item-main span {
  font-size: 12px;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.list-item-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
  white-space: nowrap;
  color: var(--texto-2);
}

/* Notificación sin leer */
.list-item.no-leida {
  background: rgba(var(--rojo-rgb), .07);
  padding-left: 20px;
}

.list-item.no-leida::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 0 3px rgba(var(--rojo-rgb), .18);
}

.list-item.no-leida:hover { background: rgba(var(--rojo-rgb), .12); }
.list-item.no-leida .list-item-main b { color: var(--texto); }

/* Lista suelta, sin marco */
.list-plana {
  border: 0;
  background: transparent;
  gap: 8px;
}

.list-plana .list-item {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--panel-2);
}


/* =============================================================================
   19. ESTADOS: VACÍO, CARGANDO, ESQUELETO
   ============================================================================= */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 44px 22px;
  text-align: center;
  color: var(--texto-3);
}

.empty-icono {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px dashed var(--borde-2);
  color: var(--texto-3);
}

.empty-texto {
  font-size: 13.5px;
  color: var(--texto-2);
  max-width: 46ch;
  line-height: 1.55;
}

.empty-texto b { color: var(--texto); }

.empty .btn { margin-top: 4px; }

/* ------------------------------ Cargando ------------------------------ */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 34px;
  color: var(--texto-3);
  font-size: 13px;
}

.loading::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--borde-2);
  border-top-color: var(--rojo);
  animation: girar 800ms linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------ Esqueleto ------------------------------ */

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-sm);
  background: var(--panel-2);
  min-height: 14px;
  color: transparent !important;
  user-select: none;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  transform: translateX(-100%);
  animation: esqueleto 1.4s ease-in-out infinite;
}

[data-tema="claro"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .05), transparent);
}

@keyframes esqueleto {
  100% { transform: translateX(100%); }
}

.skeleton + .skeleton { margin-top: 8px; }
.skeleton.alta { height: 90px; }
.skeleton.linea { height: 12px; }
.skeleton.corta { width: 42%; }


/* =============================================================================
   20. MODALES
   ============================================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 7, 9, .62);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  animation: aparecer 180ms ease both;
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-tema="claro"] .modal-backdrop { background: rgba(20, 24, 32, .42); }

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--borde-2);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
  animation: subirModal 240ms cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes subirModal {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.modal-lg { max-width: 720px; }
.modal-xl { max-width: 1000px; }
.modal-sm { max-width: 400px; }

.modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--borde);
  background: var(--panel);
  position: relative;
}

.modal-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rojo-oscuro), var(--rojo) 45%, transparent 92%);
}

.modal-head h3,
.modal-head .modal-titulo {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--texto);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.modal-body > .list,
.modal-body > .table-wrap { margin: -2px 0; }

.modal-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-top: 1px solid var(--borde);
  background: var(--panel-2);
}

.modal-foot .izquierda { margin-right: auto; }

.modal-cerrar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--texto-3);
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}

.modal-cerrar:hover { background: var(--error-bg); color: var(--error); }

/* Bloquea el desplazamiento del fondo mientras hay un modal */
body.modal-abierto { overflow: hidden; }


/* =============================================================================
   21. NOTIFICACIONES FLOTANTES (TOASTS)
   ============================================================================= */

.toast-wrap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
  max-width: 100%;
  padding: 11px 14px;
  border-radius: var(--radio-sm);
  background: var(--panel);
  border: 1px solid var(--borde-2);
  border-left: 4px solid var(--texto-3);
  color: var(--texto);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--sombra-lg);
  animation: toastEntra 260ms cubic-bezier(.2, .9, .3, 1) both;
}

.toast svg { flex: 0 0 auto; width: 18px; height: 18px; }
.toast .toast-txt { min-width: 0; }

.toast.saliendo { animation: toastSale 220ms ease forwards; }

@keyframes toastEntra {
  from { opacity: 0; transform: translateX(28px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes toastSale {
  to { opacity: 0; transform: translateX(28px) scale(.96); }
}

.toast-ok    { border-left-color: var(--ok);    }
.toast-error { border-left-color: var(--error); }
.toast-info  { border-left-color: var(--info);  }
.toast-warn  { border-left-color: var(--warn);  }

.toast-ok svg    { color: var(--ok); }
.toast-error svg { color: var(--error); }
.toast-info svg  { color: var(--info); }
.toast-warn svg  { color: var(--warn); }


/* =============================================================================
   22. ESTRELLAS DE CALIFICACIÓN
   ============================================================================= */

.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.star {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--borde-2);
  font-size: 16px;
  line-height: 1;
  transition: color var(--trans), transform var(--trans);
}

.star svg { width: 100%; height: 100%; }
.star svg * { fill: currentColor; stroke: none; }

.star.on { color: var(--warn); }
.star.media { color: var(--warn); opacity: .55; }

.stars.stars-rojas .star.on { color: var(--rojo); }

.stars-sm .star { width: 14px; height: 14px; font-size: 13px; }
.stars-lg .star { width: 28px; height: 28px; font-size: 26px; }

.stars-valor {
  margin-left: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* Entrada editable: 5 radios que se pintan como estrellas */
.stars-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  direction: rtl;   /* permite iluminar de derecha a izquierda con el hover */
}

.stars-input input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.stars-input label,
.stars-input .star {
  cursor: pointer;
  width: 28px;
  height: 28px;
  color: var(--borde-2);
  transition: color var(--trans), transform var(--trans);
}

.stars-input label:hover,
.stars-input label:hover ~ label,
.stars-input input:checked ~ label,
.stars-input .star:hover,
.stars-input .star:hover ~ .star,
.stars-input .star.on,
.stars-input .star.on ~ .star { color: var(--warn); }

.stars-input label:hover,
.stars-input .star:hover { transform: scale(1.14); }

.stars-input input:focus-visible + label {
  outline: 2px solid var(--rojo-2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Distribución de calificaciones (5→1) */
.dist-cal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 10px;
}

.dist-cal .dist-nivel {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-2);
  white-space: nowrap;
}

.dist-cal .dist-total {
  font-size: 12px;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}


/* =============================================================================
   23. LÍNEA DE TIEMPO
   ============================================================================= */

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 26px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--rojo) 0%, var(--borde) 26%, var(--borde) 100%);
}

.timeline-item {
  position: relative;
  padding: 10px 0 10px 4px;
  min-width: 0;
}

.timeline-item + .timeline-item { border-top: 1px dashed var(--borde); }

.timeline-punto {
  position: absolute;
  left: -26px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--panel);
  border: 3px solid var(--borde-2);
  box-shadow: 0 0 0 3px var(--panel);
  transition: border-color var(--trans);
}

.timeline-item.activo .timeline-punto,
.timeline-punto.rojo  { border-color: var(--rojo); }
.timeline-punto.ok    { border-color: var(--ok); }
.timeline-punto.warn  { border-color: var(--warn); }
.timeline-punto.error { border-color: var(--error); }
.timeline-punto.info  { border-color: var(--info); }

.timeline-item .tl-fecha {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.timeline-item .tl-titulo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--texto);
  margin-top: 2px;
}

.timeline-item .tl-cuerpo {
  font-size: 12.5px;
  color: var(--texto-2);
  margin-top: 2px;
}


/* =============================================================================
   24. TARJETAS SELECCIONABLES (RADIO-CARDS)
   ============================================================================= */

.radio-cards {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.radio-cards.dos  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.radio-cards.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 13px 14px;
  border-radius: var(--radio-sm);
  border: 1.5px solid var(--borde);
  background: var(--panel-2);
  color: var(--texto-2);
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition: border-color var(--trans), background var(--trans),
              color var(--trans), transform var(--trans), box-shadow var(--trans);
}

.radio-card input[type="radio"],
.radio-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.radio-card svg {
  width: 22px;
  height: 22px;
  color: var(--texto-3);
  transition: color var(--trans);
}

.radio-card b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.25;
}

.radio-card span {
  font-size: 11.5px;
  color: var(--texto-3);
  line-height: 1.4;
}

.radio-card:hover {
  border-color: var(--borde-2);
  transform: translateY(-1px);
}

/* Estado seleccionado por clase (siempre disponible) */
.radio-card.on,
.radio-card.activo {
  border-color: var(--rojo);
  background: var(--rojo-bg);
  color: var(--texto);
  box-shadow: 0 0 0 3px rgba(var(--rojo-rgb), .14);
}

.radio-card.on svg,
.radio-card.activo svg { color: var(--rojo-2); }

.radio-card.on::after,
.radio-card.activo::after {
  content: '';
  position: absolute;
  top: -12px;
  right: -12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rojo);
  opacity: .9;
}

/* Mismo estado deducido del radio interno marcado, sin necesidad de JS.
   Se declara aparte para que un motor sin :has() no invalide las reglas de
   arriba, que son las que sí dependen de una clase. */
.radio-card:has(input:checked) {
  border-color: var(--rojo);
  background: var(--rojo-bg);
  color: var(--texto);
  box-shadow: 0 0 0 3px rgba(var(--rojo-rgb), .14);
}

.radio-card:has(input:checked) svg { color: var(--rojo-2); }

.radio-card:has(input:checked)::after {
  content: '';
  position: absolute;
  top: -12px;
  right: -12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rojo);
  opacity: .9;
}

.radio-card:focus-within {
  border-color: var(--rojo);
}

[data-tema="claro"] .radio-card.on svg,
[data-tema="claro"] .radio-card.activo svg { color: var(--rojo); }

[data-tema="claro"] .radio-card:has(input:checked) svg { color: var(--rojo); }


/* =============================================================================
   25. GRÁFICAS SVG (AG.Charts)
   ============================================================================= */

.chart,
.grafica {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.chart svg,
.grafica svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart text,
.grafica text {
  font-family: var(--fuente);
  font-size: 10px;
  fill: var(--texto-3);
}

.chart .eje-linea,
.grafica .eje-linea { stroke: var(--grid); stroke-width: 1; }

.chart .barra,
.grafica .barra { transition: opacity var(--trans); }

.chart .barra:hover,
.grafica .barra:hover { opacity: .82; }

/* Leyenda de gráficas */
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--texto-2);
}

.leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.leyenda-color {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
  background: var(--rojo);
}

/* Mapa de calor de calendario */
.cal-dia { rx: 2; transition: opacity var(--trans); }
.cal-dia:hover { opacity: .75; }


/* =============================================================================
   26. UTILIDADES
   ============================================================================= */

/* --- Disposición --- */
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stack-lg { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row-sm { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row-lg { display: flex; align-items: center; gap: 20px; min-width: 0; }

.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
.flex1 { flex: 1 1 auto; min-width: 0; }
.der { margin-left: auto; }
.arriba { align-items: flex-start; }
.abajo { align-items: flex-end; }

/* --- Texto --- */
.muted { color: var(--texto-2); }
.mini { font-size: 11.5px; line-height: 1.45; }
.micro { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
.bold { font-weight: 700; }
.xbold { font-weight: 800; letter-spacing: -.01em; }
.mono { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
.nums { font-variant-numeric: tabular-nums; }

.txt-ok { color: var(--ok); }
.txt-error { color: var(--error); }
.txt-warn { color: var(--warn); }
.txt-info { color: var(--info); }
.txt-rojo { color: var(--rojo-2); }
.txt-tenue { color: var(--texto-3); }

[data-tema="claro"] .txt-rojo { color: var(--rojo-oscuro); }

.txt-centro { text-align: center; }
.txt-der { text-align: right; }
.txt-izq { text-align: left; }
.mayus { text-transform: uppercase; letter-spacing: .08em; }

.nowrap { white-space: nowrap; }
.truncar {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dos-lineas {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Márgenes --- */
.mt { margin-top: 16px; }
.mt-sm { margin-top: 8px; }
.mt-lg { margin-top: 26px; }
.mb { margin-bottom: 16px; }
.mb-sm { margin-bottom: 8px; }
.mb-lg { margin-bottom: 26px; }
.m0 { margin: 0; }

/* --- Visibilidad --- */
.oculto { display: none !important; }
.invisible { visibility: hidden; }

/* .solo-escritorio no necesita regla propia en escritorio: se muestra como
   corresponda a su etiqueta. Solo se oculta en el punto de quiebre móvil. */
.solo-movil { display: none !important; }

/* --- Desplazamiento --- */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.scroll-y {
  overflow-y: auto;
  max-height: 340px;
  -webkit-overflow-scrolling: touch;
}

/* --- Separadores y superficies auxiliares --- */
.sep {
  height: 1px;
  background: var(--borde);
  border: 0;
  margin: 4px 0;
}

.sep-v {
  width: 1px;
  align-self: stretch;
  background: var(--borde);
}

.caja {
  padding: 12px 14px;
  border-radius: var(--radio-sm);
  background: var(--panel-2);
  border: 1px solid var(--borde);
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--panel-2);
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.5;
}

.aviso svg { flex: 0 0 auto; margin-top: 1px; }
.aviso b { color: var(--texto); }

.aviso.aviso-ok    { background: var(--ok-bg);    border-color: rgba(34, 197, 94, .30);  color: var(--texto); }
.aviso.aviso-warn  { background: var(--warn-bg);  border-color: rgba(245, 158, 11, .32); color: var(--texto); }
.aviso.aviso-error { background: var(--error-bg); border-color: rgba(239, 68, 68, .32);  color: var(--texto); }
.aviso.aviso-info  { background: var(--info-bg);  border-color: rgba(59, 130, 246, .32); color: var(--texto); }
.aviso.aviso-rojo  { background: var(--rojo-bg);  border-color: rgba(var(--rojo-rgb), .34); color: var(--texto); }

.aviso.aviso-ok svg    { color: var(--ok); }
.aviso.aviso-warn svg  { color: var(--warn); }
.aviso.aviso-error svg { color: var(--error); }
.aviso.aviso-info svg  { color: var(--info); }
.aviso.aviso-rojo svg  { color: var(--rojo); }

/* Dato etiquetado (usado en fichas y recibos) */
.dato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dato .dato-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.dato .dato-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
}

.datos-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* Comparativa inicio/fin de mes */
.comparativo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px 12px;
}

.comparativo .cmp-ini,
.comparativo .cmp-fin {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.comparativo .cmp-flecha { color: var(--texto-3); }
.comparativo .mejor { color: var(--ok); }
.comparativo .peor { color: var(--error); }
.comparativo .igual { color: var(--texto-3); }

/* Recibo / hoja imprimible */
.hoja {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  max-width: 760px;
  margin: 0 auto;
}

.hoja-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--rojo);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.solo-impresion { display: none !important; }


/* =============================================================================
   27. ADAPTACIÓN A PANTALLAS PEQUEÑAS
   ============================================================================= */

@media (max-width: 1240px) {
  :root { --sidebar-w: 228px; --pad-vista: 20px; }
}

@media (max-width: 1080px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-arte {
    order: -1;
    min-height: 210px;
    padding: 28px clamp(20px, 5vw, 44px);
    justify-content: center;
  }
  .login-arte h2 { font-size: clamp(24px, 6vw, 36px); }
  .login-arte p { display: none; }
  .login-arte .login-arte-datos { display: none; }
  .login-panel { padding: 32px clamp(18px, 6vw, 44px) 44px; }
}

/* ---- Punto de quiebre del cajón lateral ---- */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-102%);
    box-shadow: none;
    width: min(292px, 86vw);
  }

  .sidebar.abierto {
    transform: translateX(0);
    box-shadow: var(--sombra-lg);
  }

  .sidebar::after { display: none; }

  .principal { margin-left: 0; }

  .solo-movil { display: inline-flex !important; }
  div.solo-movil,
  section.solo-movil,
  p.solo-movil,
  .solo-movil.bloque { display: block !important; }
  .solo-escritorio { display: none !important; }
  /* .oculto siempre gana sobre las utilidades de visibilidad por ancho */
  .oculto { display: none !important; }

  .topbar { padding: 0 14px; gap: 8px; }
  .topbar-titulo { font-size: 15.5px; }
  .contenido { padding: 16px 14px 64px; }

  .anillo { width: 118px; }
}

@media (max-width: 700px) {
  :root { --pad-vista: 14px; }

  h1 { font-size: 22px; }
  h2 { font-size: 19px; }

  .page { gap: 14px; }
  .page-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .page-acciones { width: 100%; }
  .page-acciones .btn { flex: 1 1 auto; }

  .card-head { padding: 12px 13px; }
  .card-body { padding: 13px; }
  .card-foot { padding: 11px 13px; }

  .kpi { padding: 13px; gap: 11px; }
  .kpi-icono { width: 40px; height: 40px; }

  /* Modal a pantalla completa */
  .modal-backdrop { padding: 0; align-items: stretch; }

  .modal,
  .modal-lg,
  .modal-xl,
  .modal-sm {
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    animation: subirModalMovil 240ms cubic-bezier(.2, .9, .3, 1) both;
  }

  .modal-foot { justify-content: stretch; }
  .modal-foot .btn { flex: 1 1 auto; }
  .modal-foot .izquierda { margin-right: 0; width: 100%; }

  /* Toasts arriba en móvil, para no tapar la barra de acciones */
  .toast-wrap {
    top: 10px;
    bottom: auto;
    left: 10px;
    right: 10px;
    align-items: stretch;
    max-width: none;
  }

  .toast { min-width: 0; animation: toastEntraMovil 240ms cubic-bezier(.2, .9, .3, 1) both; }
  .toast.saliendo { animation: toastSaleMovil 200ms ease forwards; }

  .table { min-width: 560px; }
  .table-compacta { min-width: 440px; }

  .hoja { padding: 18px; }
  .anillos { gap: 12px; }
  .radio-cards { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .radio-cards.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@keyframes subirModalMovil {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes toastEntraMovil {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes toastSaleMovil {
  to { opacity: 0; transform: translateY(-22px); }
}

@media (max-width: 420px) {
  body { font-size: 13.5px; }
  .contenido { padding: 14px 11px 70px; }
  .btn { padding: 0 12px; }
  .avatar-xl { width: 68px; height: 68px; font-size: 24px; }
  .anillo { width: 106px; }
  .anillo .anillo-val { font-size: 20px; }
  .datos-grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .login-brand h1 { font-size: 21px; }
}

/* Zonas táctiles cómodas en dispositivos sin puntero fino */
@media (pointer: coarse) {
  .btn-icono { width: 40px; height: 40px; }
  .nav-item { padding: 11px; }
  .list-item { padding: 13px; }
}


/* =============================================================================
   28. IMPRESIÓN — recibos, fichas y reportes
   ============================================================================= */

@media print {
  @page { margin: 14mm; }

  :root,
  [data-tema="claro"],
  [data-tema="oscuro"] {
    --negro: #FFFFFF;
    --carbon: #FFFFFF;
    --carbon-2: #FFFFFF;
    --panel: #FFFFFF;
    --panel-2: #FFFFFF;
    --borde: #BBBBBB;
    --borde-2: #999999;
    --texto: #000000;
    --texto-2: #333333;
    --texto-3: #555555;
    --sombra: none;
    --sombra-lg: none;
    --sombra-rojo: none;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11.5pt;
  }

  /* Elementos que nunca se imprimen */
  .sidebar,
  .backdrop-nav,
  .topbar,
  .toast-wrap,
  .modal-backdrop,
  .sidebar-pie,
  .page-acciones,
  .card-accion,
  .btn,
  .btn-icono,
  .chip,
  .tabs,
  .no-imprimir,
  .punto-notif,
  .login-arte { display: none !important; }

  /* Elementos que solo aparecen en papel */
  .solo-impresion { display: block !important; }

  .principal { margin-left: 0 !important; }
  .contenido { padding: 0 !important; animation: none !important; }
  .shell { min-height: 0 !important; background: #fff !important; }

  .card,
  .kpi,
  .hoja,
  .list,
  .table-wrap,
  .caja,
  .aviso {
    background: #fff !important;
    border: 1px solid #BBB !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .card-rojo::after,
  .card-rojo > .card-head::before,
  .kpi::before,
  .modal-head::after,
  .bar-fill::after { display: none !important; }

  .table-wrap { max-height: none !important; overflow: visible !important; }
  .table { min-width: 0 !important; }
  .table thead th {
    position: static !important;
    background: #EEE !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .table tbody td { border-bottom: 1px solid #DDD !important; color: #000 !important; }

  .badge,
  .pill,
  .star.on,
  .bar-fill,
  .avatar,
  .logo-escudo,
  .login-emblema {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .badge { border: 1px solid #999 !important; color: #000 !important; background: #F2F2F2 !important; }

  .grid.g4,
  .grid.g5 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .page-title { color: #000 !important; }

  a { color: #000 !important; text-decoration: none !important; }

  .hoja-head { border-bottom: 2px solid #000 !important; }

  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
}


/* =============================================================================
   29. MOVIMIENTO REDUCIDO
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .boot-logo::after,
  .bar-fill::after,
  .skeleton::after,
  .punto-notif { animation: none !important; }

  .punto-notif { opacity: 1; }

  .kpi:hover,
  .card.hover-elevar:hover,
  .demo-cuenta:hover,
  .radio-card:hover { transform: none !important; }
}


/* =============================================================================
   30. REDISEÑO v2 — TOKENS COMPLEMENTARIOS
   -----------------------------------------------------------------------------
   Aquí empieza el rediseño pedido por el dueño ("menos texto, más ilustración,
   sesiones con entrenador en vez de clases"). Todo lo anterior queda intacto:
   estas secciones solo AÑADEN componentes y variables.

   "Calma" es el verde azulado de las tarjetas de descanso y de las franjas de
   ánimo: al socio nunca se le regaña en rojo. Los *-rgb permiten tintes con
   rgba(var(--x-rgb), .n) igual que --rojo-rgb.
   ============================================================================= */

:root {
  --calma:         #2DD4BF;
  --calma-2:       #14B8A6;
  --calma-oscuro:  #0F766E;
  --calma-rgb:     20, 184, 166;
  --calma-bg:      rgba(20, 184, 166, .14);
  --warn-rgb:      245, 158, 11;
  --ok-rgb:        34, 197, 94;
  --sombra-calma:  0 6px 20px rgba(20, 184, 166, .28);
}

[data-tema="claro"] {
  --calma:         #0F766E;
  --calma-2:       #14B8A6;
  --calma-oscuro:  #115E59;
  --calma-rgb:     13, 148, 136;
  --calma-bg:      rgba(13, 148, 136, .11);
  --warn-rgb:      194, 116, 11;
  --ok-rgb:        22, 163, 74;
  --sombra-calma:  0 6px 18px rgba(13, 148, 136, .22);
}


/* =============================================================================
   31. SALUDO
   -----------------------------------------------------------------------------
   <div class="saludo">
     <div class="saludo-hola">Hola, <span class="saludo-nombre">Ana</span>
       <span class="saludo-emoji">👋</span></div>
     <div class="saludo-fecha">Hoy es jueves 6 de septiembre</div>
   </div>
   Sin cajas ni bordes: solo aire y un titular cálido.
   ============================================================================= */

.saludo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 0 2px;
  min-width: 0;
}

.saludo-hola {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.saludo-hola .saludo-nombre { color: var(--rojo-2); }
[data-tema="claro"] .saludo-hola .saludo-nombre { color: var(--rojo); }

/* La manita saluda una sola vez al entrar */
.saludo-hola .saludo-emoji {
  display: inline-block;
  letter-spacing: 0;
  margin-left: .12em;
  transform-origin: 70% 70%;
  animation: saludoMano 2.2s ease-in-out 500ms 1 both;
}

@keyframes saludoMano {
  0%, 100% { transform: rotate(0); }
  15%      { transform: rotate(16deg); }
  30%      { transform: rotate(-8deg); }
  45%      { transform: rotate(14deg); }
  60%      { transform: rotate(-4deg); }
  75%      { transform: rotate(8deg); }
}

.saludo-fecha {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* Una línea opcional bajo la fecha ("Te extrañamos", "Semana 3 de tu plan") */
.saludo-sub {
  margin-top: 2px;
  font-size: 14px;
  color: var(--texto-2);
}


/* =============================================================================
   32. TARJETA "HOY" — la única acción principal del día
   -----------------------------------------------------------------------------
   <section class="hoy">
     <span class="hoy-eyebrow">Hoy te toca</span>
     <h2 class="hoy-titulo">Pierna y glúteo</h2>
     <div class="hoy-meta"><span>45 min</span><span>6 ejercicios</span></div>
     <div class="hoy-accion"><button class="btn btn-primary">Empezar</button></div>
     <div class="hoy-ilustra">(svg de AG.Ilustra)</div>
   </section>

   Los hijos pueden ir directos (como arriba) o dentro de un .hoy-cuerpo. La
   ilustración va a la derecha en escritorio y arriba, centrada, en móvil.
   Variantes: .hoy.descanso (verde azulado) y .hoy.alerta (ámbar, membresía).
   ============================================================================= */

.hoy {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0;
  row-gap: 0;
  align-items: center;
  padding: 26px 28px;
  min-width: 0;
  border-radius: var(--radio-lg);
  border: 1px solid rgba(var(--rojo-rgb), .36);
  background:
    linear-gradient(135deg, rgba(var(--rojo-rgb), .22) 0%, rgba(var(--rojo-rgb), .07) 36%, transparent 64%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--sombra-lg);
  overflow: hidden;
  transition: border-color var(--trans), box-shadow var(--trans);
}

[data-tema="claro"] .hoy {
  background:
    linear-gradient(135deg, rgba(var(--rojo-rgb), .13) 0%, rgba(var(--rojo-rgb), .04) 38%, transparent 64%),
    var(--panel);
}

/* Filete de marca arriba */
.hoy::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  z-index: 1;
  background: linear-gradient(90deg, var(--rojo-oscuro), var(--rojo) 40%, var(--rojo-2));
}

/* Resplandor y franjas diagonales tras la ilustración */
.hoy::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(var(--rojo-rgb), .22), transparent 70%),
    repeating-linear-gradient(115deg, rgba(var(--rojo-rgb), .10) 0 2px, transparent 2px 18px);
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
  opacity: .7;
}

.hoy > * {
  grid-column: 1;
  min-width: 0;
}

.hoy-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.hoy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rojo-2);
}

[data-tema="claro"] .hoy-eyebrow { color: var(--rojo-oscuro); }

.hoy-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(var(--rojo-rgb), .18);
  animation: latido 2.2s ease-in-out infinite;
}

.hoy-titulo {
  margin-top: 10px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--texto);
  overflow-wrap: anywhere;
}

/* Una sola línea de contexto, opcional */
.hoy-sub {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto-2);
}

.hoy-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-2);
}

.hoy-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.hoy-meta > * + *:not(.badge):not(.pill)::before {
  content: '·';
  margin: 0 9px;
  color: var(--texto-3);
  font-weight: 800;
}

.hoy-meta svg { width: 15px; height: 15px; color: var(--texto-3); }
.hoy-meta b { color: var(--texto); font-weight: 700; }

.hoy-accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-self: start;
  margin-top: 20px;
}

.hoy-accion .btn,
.btn.hoy-accion {
  height: 48px;
  padding: 0 24px;
  font-size: 14.5px;
  border-radius: var(--radio);
}

.hoy-accion .btn svg,
.btn.hoy-accion svg { width: 19px; height: 19px; }

/* Si .hoy-accion es el propio botón, se comporta como botón */
.btn.hoy-accion,
button.hoy-accion,
a.hoy-accion { display: inline-flex; width: auto; }

/* Renglón de cierre suave ("Si prefieres descansar, también está bien") */
.hoy-nota {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--texto-3);
}

.hoy-ilustra {
  grid-column: 2;
  grid-row: 1 / span 8;
  align-self: center;
  justify-self: end;
  width: clamp(160px, 20vw, 200px);
  aspect-ratio: 1 / 1;
  margin-left: 26px;
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: var(--radio-lg);
  background: radial-gradient(closest-side, rgba(var(--rojo-rgb), .12), transparent);
}

.hoy-ilustra svg,
.hoy-ilustra .ilustra {
  width: 100%;
  height: auto;
  max-height: 100%;
}

.hoy-ilustra .ilustra {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Versión compacta para los inicios de coach y director */
.hoy.compacta { padding: 18px 20px; }
.hoy.compacta .hoy-titulo { font-size: clamp(19px, 2.4vw, 24px); }
.hoy.compacta .hoy-ilustra { width: 120px; margin-left: 18px; }
.hoy.compacta .hoy-accion { margin-top: 14px; }
.hoy.compacta .hoy-accion .btn,
.hoy.compacta .btn.hoy-accion { height: 42px; padding: 0 18px; font-size: 13.5px; }

/* --- Variante DESCANSO (verde azulado, más tranquila) --- */
.hoy.descanso {
  border-color: rgba(var(--calma-rgb), .40);
  background:
    linear-gradient(135deg, rgba(var(--calma-rgb), .20) 0%, rgba(var(--calma-rgb), .06) 36%, transparent 64%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}

[data-tema="claro"] .hoy.descanso {
  background:
    linear-gradient(135deg, rgba(var(--calma-rgb), .12) 0%, rgba(var(--calma-rgb), .03) 38%, transparent 64%),
    var(--panel);
}

.hoy.descanso::before {
  background: linear-gradient(90deg, var(--calma-oscuro), var(--calma-2) 45%, var(--calma));
}

.hoy.descanso::after {
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(var(--calma-rgb), .18), transparent 70%),
    repeating-linear-gradient(115deg, rgba(var(--calma-rgb), .09) 0 2px, transparent 2px 18px);
}

.hoy.descanso .hoy-eyebrow { color: var(--calma); }

.hoy.descanso .hoy-eyebrow::before {
  box-shadow: 0 0 0 3px rgba(var(--calma-rgb), .18);
  animation: none;
}

.hoy.descanso .hoy-ilustra {
  background: radial-gradient(closest-side, rgba(var(--calma-rgb), .12), transparent);
}

.hoy.descanso .btn-primary {
  background: linear-gradient(140deg, #5EEAD4, #2DD4BF 55%, #14B8A6);
  color: #042F2E;
  border-color: rgba(0, 0, 0, .14);
  box-shadow: var(--sombra-calma);
}

.hoy.descanso .btn-primary:hover { filter: brightness(1.05); }

/* --- Variante ALERTA (ámbar: membresía por vencer, pago pendiente) --- */
.hoy.alerta {
  border-color: rgba(var(--warn-rgb), .42);
  background:
    linear-gradient(135deg, rgba(var(--warn-rgb), .20) 0%, rgba(var(--warn-rgb), .06) 36%, transparent 64%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}

[data-tema="claro"] .hoy.alerta {
  background:
    linear-gradient(135deg, rgba(var(--warn-rgb), .13) 0%, rgba(var(--warn-rgb), .04) 38%, transparent 64%),
    var(--panel);
}

.hoy.alerta::before {
  background: linear-gradient(90deg, #B45309, var(--warn) 50%, #FBBF24);
}

.hoy.alerta::after {
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(var(--warn-rgb), .20), transparent 70%),
    repeating-linear-gradient(115deg, rgba(var(--warn-rgb), .09) 0 2px, transparent 2px 18px);
}

.hoy.alerta .hoy-eyebrow { color: var(--warn); }

.hoy.alerta .hoy-eyebrow::before {
  box-shadow: 0 0 0 3px rgba(var(--warn-rgb), .18);
}

.hoy.alerta .hoy-ilustra {
  background: radial-gradient(closest-side, rgba(var(--warn-rgb), .12), transparent);
}

.hoy.alerta .btn-primary {
  background: linear-gradient(140deg, #FCD34D, #F59E0B 55%, #D97706);
  color: #2A1A00;
  border-color: rgba(0, 0, 0, .14);
  box-shadow: 0 6px 20px rgba(var(--warn-rgb), .30);
}

.hoy.alerta .btn-primary:hover { filter: brightness(1.05); }


/* =============================================================================
   33. TILES — número grande + etiqueta corta, sin texto
   -----------------------------------------------------------------------------
   <div class="tiles">
     <a class="tile" href="#/socio/progreso">
       <span class="tile-icono">(svg)</span>
       <span class="tile-val">5</span>
       <span class="tile-label">visitas este mes</span>
     </a>
   </div>
   Cuatro columnas en escritorio, dos en móvil. Toda la tile es el enlace.
   Colores del icono: .tile.ok / .warn / .info / .calma / .neutro / .destacada
   ============================================================================= */

.tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}

.tiles.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 15px;
  min-width: 0;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--texto);
  font: inherit;
  cursor: default;
  overflow: hidden;
  transition: border-color var(--trans), box-shadow var(--trans),
              transform var(--trans), background var(--trans);
}

a.tile,
button.tile,
.tile.clickable { cursor: pointer; }

a.tile:hover,
button.tile:hover,
.tile.clickable:hover {
  border-color: var(--borde-2);
  box-shadow: var(--sombra-lg);
  transform: translateY(-2px);
}

.tile:focus-visible {
  outline: 2px solid var(--rojo-2);
  outline-offset: 2px;
}

/* Flecha discreta que aparece al pasar el cursor */
a.tile::after,
button.tile::after,
.tile.clickable::after {
  content: '';
  position: absolute;
  top: 19px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--texto-3);
  border-right: 2px solid var(--texto-3);
  transform: rotate(45deg) translate(-3px, 3px);
  opacity: 0;
  transition: opacity var(--trans), transform var(--trans);
}

a.tile:hover::after,
button.tile:hover::after,
.tile.clickable:hover::after {
  opacity: .9;
  transform: rotate(45deg) translate(0, 0);
}

.tile-icono {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rojo-bg);
  color: var(--rojo);
  border: 1px solid rgba(var(--rojo-rgb), .22);
  font-size: 18px;
  line-height: 1;
}

.tile-icono svg { width: 18px; height: 18px; }

.tile-datos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  width: 100%;
}

.tile-val {
  display: block;
  max-width: 100%;
  font-size: clamp(28px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile-val small,
.tile-val .tile-unidad {
  font-size: .46em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--texto-2);
  margin-left: 3px;
}

.tile-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--texto-3);
  overflow-wrap: anywhere;
}

/* Dato extra pequeño (tendencia, comparación) */
.tile-extra {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--texto-2);
}

.tile-extra svg { width: 13px; height: 13px; }
.tile-extra.up { color: var(--ok); }
.tile-extra.down { color: var(--error); }

/* Colores del icono */
.tile.ok .tile-icono     { background: var(--ok-bg);     color: var(--ok);      border-color: rgba(var(--ok-rgb), .28); }
.tile.warn .tile-icono   { background: var(--warn-bg);   color: var(--warn);    border-color: rgba(var(--warn-rgb), .28); }
.tile.info .tile-icono   { background: var(--info-bg);   color: var(--info);    border-color: rgba(59, 130, 246, .28); }
.tile.calma .tile-icono  { background: var(--calma-bg);  color: var(--calma);   border-color: rgba(var(--calma-rgb), .28); }
.tile.neutro .tile-icono { background: var(--neutro-bg); color: var(--texto-2); border-color: var(--borde); }

/* Tile destacada con fondo de marca */
.tile.destacada {
  background: linear-gradient(140deg, var(--rojo-2), var(--rojo) 55%, var(--rojo-oscuro));
  border-color: rgba(0, 0, 0, .18);
  color: #fff;
  box-shadow: var(--sombra-rojo);
}

.tile.destacada .tile-icono {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}

.tile.destacada .tile-val { color: #fff; }
.tile.destacada .tile-val small,
.tile.destacada .tile-val .tile-unidad { color: rgba(255, 255, 255, .82); }
.tile.destacada .tile-label { color: rgba(255, 255, 255, .84); }
.tile.destacada .tile-extra { color: rgba(255, 255, 255, .9); }
.tile.destacada::after { border-color: rgba(255, 255, 255, .85); }

.tile.tile-ancha { grid-column: span 2; }
.tile.tile-centrada { align-items: center; text-align: center; }


/* =============================================================================
   34. DESPLEGABLE — el detalle se revela al pulsar
   -----------------------------------------------------------------------------
   Funciona con <details>:
     <details class="desplegable">
       <summary class="desplegable-cab">
         <span class="desplegable-titulo">Mi progreso</span>
         <span class="desplegable-resumen">−1.2 kg</span>
       </summary>
       <div class="desplegable-cuerpo">…</div>
     </details>
   y con divs que alternan la clase .abierto (JS: el.classList.toggle('abierto')):
     <div class="desplegable abierto">
       <button class="desplegable-cab" type="button">…</button>
       <div class="desplegable-cuerpo">…</div>
     </div>
   La cabecera y el cuerpo deben ser hijos DIRECTOS del .desplegable.
   ============================================================================= */

.desplegable {
  position: relative;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: border-color var(--trans), box-shadow var(--trans);
}

.desplegable[open],
.desplegable.abierto { border-color: var(--borde-2); }

.desplegables {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.desplegable-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  user-select: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--trans);
}

.desplegable-cab::-webkit-details-marker { display: none; }
.desplegable-cab::marker { content: ''; }
.desplegable-cab:hover { background: var(--carbon-2); }

.desplegable-cab:focus-visible {
  outline: 2px solid var(--rojo-2);
  outline-offset: -2px;
}

.desplegable-cab > svg:first-child {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--rojo);
}

.desplegable-titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desplegable-titulo svg {
  width: 17px;
  height: 17px;
  vertical-align: -3.5px;
  margin-right: 6px;
  color: var(--rojo);
}

.desplegable-sub {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-3);
  overflow: hidden;
  text-overflow: ellipsis;
}

.desplegable-resumen {
  display: block;
  flex: 0 1 auto;
  margin-left: auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desplegable-cab .badge,
.desplegable-cab .pill { flex: 0 0 auto; }

/* Flecha dibujada con bordes; rota al abrir */
.desplegable-cab::after {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: -4px 4px 0 2px;
  border-right: 2px solid var(--texto-3);
  border-bottom: 2px solid var(--texto-3);
  transform: rotate(45deg);
  transition: transform var(--trans-lento), border-color var(--trans), margin var(--trans-lento);
}

details.desplegable[open] > .desplegable-cab::after,
.desplegable.abierto > .desplegable-cab::after {
  transform: rotate(-135deg);
  margin-top: 4px;
  border-color: var(--rojo);
}

/* Si la vista trae su propio icono de flecha (.desplegable-flecha), también rota */
.desplegable-flecha {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--texto-3);
  transition: transform var(--trans-lento), color var(--trans);
}

.desplegable-flecha svg { width: 16px; height: 16px; }

.desplegable-cab:has(.desplegable-flecha)::after { display: none; }

details.desplegable[open] > .desplegable-cab .desplegable-flecha,
.desplegable.abierto > .desplegable-cab .desplegable-flecha {
  transform: rotate(180deg);
  color: var(--rojo);
}

details.desplegable[open] > .desplegable-cab,
.desplegable.abierto > .desplegable-cab { border-bottom: 1px solid var(--borde); }

.desplegable-cuerpo {
  padding: 14px 16px 16px;
  min-width: 0;
  color: var(--texto);
}

/* <details>: entrada suave del cuerpo */
details.desplegable[open] > .desplegable-cuerpo {
  animation: desplegableEntra 260ms cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes desplegableEntra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* <details>: altura animada donde el navegador ya lo permite */
@supports (interpolate-size: allow-keywords) {
  details.desplegable { interpolate-size: allow-keywords; }

  details.desplegable::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size var(--trans-lento), content-visibility var(--trans-lento) allow-discrete;
  }

  details.desplegable[open]::details-content { block-size: auto; }
}

/* Divs con .abierto: altura animada con max-height */
.desplegable:not(details) > .desplegable-cuerpo {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 360ms cubic-bezier(0, 1, 0, 1),
              opacity var(--trans),
              padding var(--trans),
              visibility 0s linear 360ms;
}

.desplegable:not(details).abierto > .desplegable-cuerpo {
  max-height: 2400px;
  padding-top: 14px;
  padding-bottom: 16px;
  opacity: 1;
  visibility: visible;
  transition: max-height 520ms cubic-bezier(.4, 0, .2, 1),
              opacity 260ms ease 40ms,
              padding var(--trans),
              visibility 0s;
}

/* Variante plana, para anidar dentro de una tarjeta */
.desplegable.plano {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.desplegable.plano > .desplegable-cab { padding-left: 0; padding-right: 0; }
.desplegable.plano > .desplegable-cab:hover { background: transparent; color: var(--rojo-2); }
.desplegable.plano > .desplegable-cuerpo { padding-left: 0; padding-right: 0; }
.desplegable.plano + .desplegable.plano { border-top: 1px solid var(--borde); }


/* =============================================================================
   35. PASOS — instrucciones numeradas de un ejercicio
   -----------------------------------------------------------------------------
   <ol class="pasos">
     <li class="paso"><span class="paso-num"></span><span class="paso-txt">Pies al ancho de hombros</span></li>
   </ol>
   Si .paso-num va vacío, el número se pone solo (counter). Estados: .hecho, .actual
   ============================================================================= */

.pasos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  counter-reset: paso;
}

.paso {
  counter-increment: paso;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-width: 0;
  border-radius: var(--radio-sm);
  background: var(--panel-2);
  border: 1px solid var(--borde);
  transition: border-color var(--trans), background var(--trans);
}

.paso-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--rojo-2), var(--rojo) 55%, var(--rojo-oscuro));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(var(--rojo-rgb), .30);
}

.paso-num:empty::before { content: counter(paso); }

.paso-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.paso-txt b { font-weight: 800; }

.paso-txt small,
.paso-sub {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--texto-3);
}

/* Dato a la derecha: "3 × 12", "60 s" */
.paso-lado {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.paso.hecho .paso-num {
  background: linear-gradient(140deg, #4ADE80, var(--ok) 60%, #15803D);
  box-shadow: 0 2px 8px rgba(var(--ok-rgb), .30);
}

.paso.hecho .paso-num:empty::before {
  content: '';
  display: block;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg) translate(-1px, -1px);
}

.paso.hecho .paso-txt { color: var(--texto-2); }

.paso.actual {
  border-color: rgba(var(--rojo-rgb), .45);
  background: var(--rojo-bg);
}

/* Números verde azulado para descanso activo y movilidad */
.pasos.calma .paso-num,
.paso.calma .paso-num {
  background: linear-gradient(140deg, #5EEAD4, var(--calma-2) 60%, var(--calma-oscuro));
  box-shadow: 0 2px 8px rgba(var(--calma-rgb), .30);
}

/* Sin marco, para listas largas dentro de un modal */
.pasos.pasos-limpios { gap: 4px; }
.pasos.pasos-limpios .paso { background: transparent; border: 0; padding: 5px 0; }
.pasos.pasos-limpios .paso-num { width: 26px; height: 26px; font-size: 12px; }


/* =============================================================================
   36. ILUSTRACIONES DE EJERCICIO (contenedor para los SVG de AG.Ilustra)
   -----------------------------------------------------------------------------
   <figure class="ilustra">
     (svg de AG.Ilustra.get(id, {alto: 180, animado: true}))
     <figcaption class="ilustra-cap">Sentadilla con barra</figcaption>
   </figure>

   Con prefers-reduced-motion, AG.Ilustra pinta las dos fases fijas lado a lado:
   <div class="ilustra-fases"><div>(svg inicio)</div><div>(svg fin)</div></div>
   Las etiquetas "Inicio" y "Fin" salen solas; data-etiqueta="…" las cambia.
   ============================================================================= */

.ilustra {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  min-width: 0;
  border-radius: var(--radio);
  background:
    radial-gradient(60% 55% at 50% 62%, rgba(var(--rojo-rgb), .07), transparent 72%),
    var(--panel-2);
  border: 1px solid var(--borde);
  overflow: hidden;
}

.ilustra > svg,
.ilustra-svg,
.ilustra-svg > svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 280px;
}

.ilustra-cap {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  text-align: center;
  color: var(--texto-3);
  max-width: 40ch;
}

.ilustra-cap b { color: var(--texto-2); font-weight: 800; }

.ilustra-fases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.ilustra-fases > * {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 8px 8px 26px;
  border-radius: var(--radio-sm);
  background: var(--panel);
  border: 1px solid var(--borde);
}

.ilustra-fases > * svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
}

.ilustra-fases > *::after {
  content: attr(data-etiqueta);
  position: absolute;
  left: 0; right: 0; bottom: 7px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.ilustra-fases > :first-child:not([data-etiqueta])::after { content: 'Inicio'; }
.ilustra-fases > :last-child:not([data-etiqueta])::after { content: 'Fin'; color: var(--rojo-2); }
[data-tema="claro"] .ilustra-fases > :last-child:not([data-etiqueta])::after { color: var(--rojo-oscuro); }

/* Por si AG.Ilustra alterna las fases con clases en vez de <style> propio */
.ilustra-fase-inicio { animation: ilustraFaseA 3.2s ease-in-out infinite; }
.ilustra-fase-fin    { animation: ilustraFaseB 3.2s ease-in-out infinite; }

@keyframes ilustraFaseA {
  0%, 42%  { opacity: 1; }
  50%, 92% { opacity: 0; }
  100%     { opacity: 1; }
}

@keyframes ilustraFaseB {
  0%, 42%  { opacity: 0; }
  50%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}

/* Tamaños y variantes */
.ilustra.ilustra-sm { padding: 8px; border-radius: var(--radio-sm); }
.ilustra.ilustra-sm > svg { max-height: 140px; }
.ilustra.ilustra-lg > svg { max-height: 360px; }
.ilustra.sin-fondo { background: transparent; border: 0; padding: 0; }

/* Miniatura para listas y tablas de ejercicios */
.ilustra-mini {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: var(--radio-sm);
  background: var(--panel-2);
  border: 1px solid var(--borde);
  overflow: hidden;
}

.ilustra-mini svg { width: 100%; height: 100%; }
.ilustra-mini.grande { width: 84px; height: 84px; }


/* =============================================================================
   37. AGENDA DE SESIONES CON ENTRENADOR
   -----------------------------------------------------------------------------
   Selector de día:
     <div class="chip-dias">
       <button class="chip-dia on"><b>7</b><span>Lun</span></button> …
     </div>
   Horarios:
     <div class="slots">
       <button class="slot libre">07:00</button>
       <button class="slot ocupado" disabled>08:00</button>
       <button class="slot mio">09:00<small>Tu sesión</small></button>
     </div>
   Tarjeta de sesión:
     <div class="sesion-card agendada">
       <div class="sesion-hora">09:00<small>Jue 10</small></div>
       <div class="sesion-info"><b>Entrenamiento con Karla</b><span>60 min · Pierna</span></div>
       <div class="sesion-acciones">…</div>
       <div class="sesion-notas">Notas del coach…</div>   (opcional)
     </div>
   Estados: .agendada (rojo) .completada (verde) .cancelada (gris) .no_asistio (ámbar) .es-hoy
   ============================================================================= */

.chip-dias {
  display: flex;
  gap: 8px;
  padding: 3px 2px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.chip-dias::-webkit-scrollbar { height: 0; }

.chip-dia {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  min-height: 44px;
  padding: 7px 14px;
  border-radius: var(--radio-full);
  border: 1px solid var(--borde);
  background: var(--panel-2);
  color: var(--texto-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--trans), color var(--trans), border-color var(--trans),
              transform var(--trans), box-shadow var(--trans);
}

.chip-dia > b,
.chip-dia-num {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.chip-dia > span,
.chip-dia-nombre {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.chip-dia:hover { border-color: var(--borde-2); color: var(--texto); }
.chip-dia:active { transform: scale(.97); }

.chip-dia:focus-visible {
  outline: 2px solid var(--rojo-2);
  outline-offset: 2px;
}

.chip-dia.on {
  background: var(--rojo);
  border-color: var(--rojo-oscuro);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--rojo-rgb), .32);
}

.chip-dia.on > b,
.chip-dia.on .chip-dia-num { color: #fff; }

.chip-dia.on > span,
.chip-dia.on .chip-dia-nombre { color: rgba(255, 255, 255, .82); }

/* Hoy: el número en rojo */
.chip-dia.es-hoy { border-color: rgba(var(--rojo-rgb), .55); }
.chip-dia.es-hoy > b,
.chip-dia.es-hoy .chip-dia-num { color: var(--rojo-2); }
.chip-dia.es-hoy.on > b,
.chip-dia.es-hoy.on .chip-dia-num { color: #fff; }
[data-tema="claro"] .chip-dia.es-hoy > b,
[data-tema="claro"] .chip-dia.es-hoy .chip-dia-num { color: var(--rojo); }

/* Ese día ya tiene sesión: puntito verde azulado */
.chip-dia.con-sesion::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--calma);
  box-shadow: 0 0 0 2px var(--panel-2);
}

.chip-dia.on.con-sesion::before { box-shadow: 0 0 0 2px var(--rojo); }

.chip-dia[disabled],
.chip-dia:disabled,
.chip-dia.sin-huecos {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* ------------------------------ Horarios ------------------------------ */

.slots {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  min-width: 0;
}

.slot {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  min-height: 46px;
  padding: 6px 10px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde-2);
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--trans), color var(--trans), border-color var(--trans),
              transform var(--trans), box-shadow var(--trans);
}

.slot > small,
.slot-sub {
  display: inline-block;   /* el tachado de .ocupado no lo alcanza */
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--texto-3);
}

.slot.libre:hover {
  border-color: var(--rojo);
  color: var(--rojo-2);
  background: var(--rojo-bg);
  transform: translateY(-1px);
}

[data-tema="claro"] .slot.libre:hover { color: var(--rojo-oscuro); }

.slot:active { transform: scale(.97); }

.slot:focus-visible {
  outline: 2px solid var(--rojo-2);
  outline-offset: 2px;
}

.slot.ocupado,
.slot[disabled],
.slot:disabled {
  color: var(--texto-3);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  border-style: dashed;
  border-color: var(--borde);
  background: transparent;
  opacity: .75;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.slot.mio {
  background: var(--rojo);
  border-color: var(--rojo-oscuro);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--rojo-rgb), .32);
}

.slot.mio > small,
.slot.mio .slot-sub { color: rgba(255, 255, 255, .82); }

.slot.mio::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
  opacity: .95;
}

.slot.mio:hover { background: var(--rojo-2); }

.slot.pasado { opacity: .4; pointer-events: none; }

.slots-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 11.5px;
  color: var(--texto-3);
}

.slots-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }

.slots-leyenda i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid var(--borde-2);
  background: var(--panel);
}

.slots-leyenda i.ocupado { border-style: dashed; background: transparent; }
.slots-leyenda i.mio { background: var(--rojo); border-color: var(--rojo-oscuro); }

/* --------------------------- Tarjeta de sesión --------------------------- */

.sesiones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sesion-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 16px 14px 18px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--texto);
  overflow: hidden;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}

.sesion-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--rojo);
}

a.sesion-card,
.sesion-card.clickable { cursor: pointer; }

a.sesion-card:hover,
.sesion-card.clickable:hover {
  border-color: var(--borde-2);
  box-shadow: var(--sombra-lg);
  transform: translateY(-1px);
}

.sesion-hora {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  padding: 8px 10px;
  border-radius: var(--radio-sm);
  background: var(--rojo-bg);
  border: 1px solid rgba(var(--rojo-rgb), .22);
  color: var(--rojo-2);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-tema="claro"] .sesion-hora { color: var(--rojo-oscuro); }

.sesion-hora > small {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.sesion-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sesion-info > b,
.sesion-titulo {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sesion-info > span,
.sesion-sub {
  font-size: 12.5px;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sesion-info .persona { margin-top: 2px; }

.sesion-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.sesion-notas {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-radius: var(--radio-sm);
  background: var(--panel-2);
  border: 1px dashed var(--borde-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-2);
}

.sesion-notas b { color: var(--texto); }

/* Estados */
.sesion-card.completada::before { background: var(--ok); }

.sesion-card.completada .sesion-hora {
  background: var(--ok-bg);
  border-color: rgba(var(--ok-rgb), .24);
  color: var(--ok);
}

.sesion-card.cancelada,
.sesion-card.no_asistio { opacity: .8; }

.sesion-card.cancelada::before { background: var(--texto-3); }

.sesion-card.cancelada .sesion-hora {
  background: var(--neutro-bg);
  border-color: var(--borde);
  color: var(--texto-3);
  text-decoration: line-through;
}

.sesion-card.no_asistio::before { background: var(--warn); }

.sesion-card.no_asistio .sesion-hora {
  background: var(--warn-bg);
  border-color: rgba(var(--warn-rgb), .26);
  color: var(--warn);
}

.sesion-card.es-hoy {
  border-color: rgba(var(--rojo-rgb), .45);
  box-shadow: 0 0 0 3px rgba(var(--rojo-rgb), .12), var(--sombra);
}


/* =============================================================================
   38. EVENTOS ESPECIALES
   -----------------------------------------------------------------------------
   <article class="evento" style="--evento-color:#3B82F6">
     <div class="evento-fecha"><span>Sep</span><b>14</b><small>Sáb</small></div>
     <div class="evento-info">
       <b>Clínica de peso muerto</b>
       <div class="evento-meta"><span>10:00</span><span>Sala 2</span></div>
       <div class="evento-cupo">
         <div class="evento-cupo-txt"><span><b>12</b> de 20</span><span>8 lugares</span></div>
         <div class="evento-cupo-barra"><i class="evento-cupo-fill" style="width:60%"></i></div>
       </div>
     </div>
     <div class="evento-acciones">…</div>
   </article>
   Estados: .inscrito (verde azulado) .pasado (atenuado) .cancelado
   Variante .evento-fila para paneles de inicio.
   ============================================================================= */

.eventos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  min-width: 0;
}

.evento {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px 14px;
  padding: 14px 16px 14px 18px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--texto);
  overflow: hidden;
  transition: border-color var(--trans), box-shadow var(--trans),
              transform var(--trans), opacity var(--trans);
}

.evento::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--evento-color, var(--rojo));
}

a.evento,
.evento.clickable { cursor: pointer; }

a.evento:hover,
.evento.clickable:hover {
  border-color: var(--borde-2);
  box-shadow: var(--sombra-lg);
  transform: translateY(-2px);
}

/* Bloque de fecha tipo calendario: el mes siempre arriba, aunque el
   marcado lo ponga después */
.evento-fecha {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  width: 58px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--panel-2);
  text-align: center;
  overflow: hidden;
}

.evento-fecha > span,
.evento-mes {
  order: 1;
  display: block;
  padding: 4px 4px 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--evento-color, var(--rojo));
}

.evento-fecha > b,
.evento-dia {
  order: 2;
  display: block;
  padding: 8px 4px 7px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.evento-fecha > small,
.evento-diasemana {
  order: 3;
  display: block;
  padding: 0 4px 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.evento-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.evento-info > b,
.evento-nombre {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.evento-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--texto-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evento-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-2);
}

.evento-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.evento-meta > * + *:not(.badge):not(.pill)::before {
  content: '·';
  margin: 0 7px;
  color: var(--texto-3);
  font-weight: 800;
}

.evento-meta svg { width: 14px; height: 14px; color: var(--texto-3); }

.evento-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Barra de ocupación */
.evento-cupo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 3px;
  min-width: 0;
  font-size: 11.5px;
  color: var(--texto-3);
}

.evento-cupo-txt {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.evento-cupo-txt b { color: var(--texto); font-weight: 700; }

.evento-cupo-barra {
  position: relative;
  height: 6px;
  border-radius: var(--radio-full);
  background: var(--panel-2);
  border: 1px solid var(--borde);
  overflow: hidden;
}

.evento-cupo-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radio-full);
  background: linear-gradient(90deg, var(--calma-oscuro), var(--calma-2) 60%, var(--calma));
  transition: width 700ms cubic-bezier(.22, .8, .28, 1);
}

.evento-cupo.casi-lleno .evento-cupo-fill { background: linear-gradient(90deg, #B45309, var(--warn)); }
.evento-cupo.lleno .evento-cupo-fill { background: linear-gradient(90deg, var(--rojo-oscuro), var(--rojo)); }
.evento-cupo .bar { height: 6px; }

.evento-acciones {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.evento-info .evento-acciones { grid-column: auto; margin-top: 4px; }

/* Estados */
.evento.inscrito { border-color: rgba(var(--calma-rgb), .45); }
.evento.inscrito::before { background: var(--calma-2); }
.evento.inscrito .evento-fecha { border-color: rgba(var(--calma-rgb), .35); }
.evento.inscrito .evento-fecha > span,
.evento.inscrito .evento-mes { background: var(--calma-2); }

.evento.pasado { opacity: .62; }
.evento.pasado::before,
.evento.pasado .evento-fecha > span,
.evento.pasado .evento-mes { background: var(--texto-3); }
.evento.pasado .evento-fecha > b,
.evento.pasado .evento-dia { color: var(--texto-2); }
.evento.pasado:hover { transform: none; box-shadow: var(--sombra); }

.evento.cancelado { opacity: .62; }
.evento.cancelado .evento-info > b,
.evento.cancelado .evento-nombre { text-decoration: line-through; }

/* Fila compacta para los paneles de inicio */
.evento.evento-fila {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 10px 12px 10px 14px;
  box-shadow: none;
}

.evento.evento-fila .evento-fecha { width: 50px; }
.evento.evento-fila .evento-fecha > b,
.evento.evento-fila .evento-dia { font-size: 20px; padding: 6px 4px 5px; }
.evento.evento-fila .evento-acciones { grid-column: auto; }


/* =============================================================================
   39. VACÍO AMABLE
   -----------------------------------------------------------------------------
   <div class="vacio-amable">
     <div class="vacio-amable-icono">(svg o emoji)</div>
     <p>Todavía no tienes sesión esta semana</p>
     <span>Agenda una con tu entrenador, toma 10 segundos.</span>
     <button class="btn btn-primary">Agendar</button>
   </div>
   ============================================================================= */

.vacio-amable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 22px;
  min-width: 0;
  text-align: center;
  border-radius: var(--radio-lg);
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(var(--calma-rgb), .10), transparent 70%),
    var(--panel);
  border: 1px dashed var(--borde-2);
  color: var(--texto-2);
}

.vacio-amable-icono {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  color: var(--calma);
  font-size: 40px;
  line-height: 1;
  box-shadow: var(--sombra);
}

.vacio-amable-icono svg { width: 40px; height: 40px; }
.vacio-amable-icono.rojo { color: var(--rojo); }

.vacio-amable .ilustra {
  width: 100%;
  max-width: 220px;
  background: transparent;
  border: 0;
  padding: 0;
}

.vacio-amable-frase,
.vacio-amable > p,
.vacio-amable > b {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--texto);
  max-width: 32ch;
}

.vacio-amable-sub,
.vacio-amable > span,
.vacio-amable > small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-2);
  max-width: 40ch;
}

.vacio-amable > .btn { margin-top: 4px; }

.vacio-amable-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.vacio-amable.compacto {
  padding: 22px 16px;
  gap: 9px;
  border-radius: var(--radio);
}

.vacio-amable.compacto .vacio-amable-icono { width: 58px; height: 58px; font-size: 28px; }
.vacio-amable.compacto .vacio-amable-icono svg { width: 26px; height: 26px; }
.vacio-amable.compacto .vacio-amable-frase,
.vacio-amable.compacto > p,
.vacio-amable.compacto > b { font-size: 14.5px; }


/* =============================================================================
   40. NUTRICIÓN MEXICANA: PLATILLO Y SUSTITUTO
   -----------------------------------------------------------------------------
   <div class="platillo ahora">
     <div class="platillo-cab">
       <span class="platillo-momento">Desayuno</span>
       <span class="platillo-hora">08:00</span>
     </div>
     <div class="platillo-nombre">2 huevos a la mexicana con frijoles y 2 tortillas</div>
     <div class="platillo-casera">2 huevos · ½ taza de frijoles · 2 tortillas de maíz</div>
     <div class="platillo-macros">
       <span class="kcal"><b>420</b> kcal</span><span class="proteina">P <b>24 g</b></span>
       <span class="carbos">C <b>38 g</b></span><span class="grasa">G <b>18 g</b></span>
     </div>
     <details class="platillo-detalle"><summary>Ver ingredientes</summary>
       <ul class="platillo-ingredientes"><li><span>Huevo</span><span>100 g</span></li></ul>
     </details>
     <div class="sustituto">…</div>
   </div>
   ============================================================================= */

.platillos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  min-width: 0;
}

.platillo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: border-color var(--trans), box-shadow var(--trans);
}

.platillo-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.platillo-momento {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rojo-2);
}

[data-tema="claro"] .platillo-momento { color: var(--rojo-oscuro); }

.platillo-momento svg { width: 14px; height: 14px; }

.platillo-hora {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.platillo-icono {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rojo-bg);
  color: var(--rojo);
  border: 1px solid rgba(var(--rojo-rgb), .22);
  font-size: 18px;
  line-height: 1;
}

.platillo-icono svg { width: 18px; height: 18px; }

.platillo-nombre {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.platillo-casera {
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-2);
}

.platillo-casera ul,
.platillo-casera ol,
.platillo-casera li { display: inline; }

.platillo-casera li + li::before {
  content: ' · ';
  color: var(--texto-3);
  font-weight: 800;
}

.platillo-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.platillo-macros > *,
.macro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radio-full);
  background: var(--panel-2);
  border: 1px solid var(--borde);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.platillo-macros b,
.macro b { color: var(--texto); font-weight: 800; }

.platillo-macros .kcal,     .macro.kcal     { background: var(--rojo-bg);  border-color: rgba(var(--rojo-rgb), .26);  color: var(--rojo-2); }
.platillo-macros .proteina, .macro.proteina { background: var(--calma-bg); border-color: rgba(var(--calma-rgb), .30); color: var(--calma); }
.platillo-macros .carbos,   .macro.carbos   { background: var(--info-bg);  border-color: rgba(59, 130, 246, .28);     color: var(--info); }
.platillo-macros .grasa,    .macro.grasa    { background: var(--warn-bg);  border-color: rgba(var(--warn-rgb), .28);  color: var(--warn); }

[data-tema="claro"] .platillo-macros .kcal,
[data-tema="claro"] .macro.kcal { color: var(--rojo-oscuro); }

.platillo-macros .kcal b,     .macro.kcal b,
.platillo-macros .proteina b, .macro.proteina b,
.platillo-macros .carbos b,   .macro.carbos b,
.platillo-macros .grasa b,    .macro.grasa b { color: inherit; }

/* Ingredientes con gramos: en pequeño y colapsados */
.platillo-detalle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--texto-3);
}

.platillo-detalle > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--texto-3);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.platillo-detalle > summary::-webkit-details-marker { display: none; }
.platillo-detalle > summary::marker { content: ''; }
.platillo-detalle > summary:hover { color: var(--texto-2); }

.platillo-detalle > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: -3px 0 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--trans), margin var(--trans);
}

.platillo-detalle[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.platillo-ingredientes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.platillo-ingredientes > li,
.platillo-ingrediente {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--borde);
  font-size: 12px;
  color: var(--texto-2);
}

.platillo-ingredientes > li:last-child { border-bottom: 0; }

.platillo-ingredientes > li > span:last-child,
.platillo-ingrediente .gramos {
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Estados */
.platillo.ahora {
  border-color: rgba(var(--rojo-rgb), .42);
  box-shadow: 0 0 0 3px rgba(var(--rojo-rgb), .10), var(--sombra);
}

.platillo.hecho { opacity: .7; }
.platillo.hecho .platillo-nombre { text-decoration: line-through; text-decoration-color: var(--texto-3); }

.platillo.pre-entreno .platillo-momento,
.platillo.post-entreno .platillo-momento { color: var(--calma); }

/* --------------- Sustituto: producto del gimnasio, sin insistir --------------- */

.sustituto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-width: 0;
  border-radius: var(--radio-sm);
  background: var(--calma-bg);
  border: 1px dashed rgba(var(--calma-rgb), .42);
  color: var(--texto-2);
  font-size: 12.5px;
  line-height: 1.4;
}

.sustituto-icono {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--calma-rgb), .16);
  color: var(--calma);
  font-size: 17px;
  line-height: 1;
}

.sustituto-icono svg { width: 17px; height: 17px; }

.sustituto-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sustituto-nombre,
.sustituto-txt > b {
  font-size: 13px;
  font-weight: 800;
  color: var(--texto);
}

.sustituto-linea,
.sustituto-txt > span {
  font-size: 12px;
  color: var(--texto-2);
}

.sustituto-precio {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--radio-full);
  background: var(--panel);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sustituto > .btn { flex: 0 0 auto; }
.sustituto.no-disponible { opacity: .6; }


/* =============================================================================
   41. BIENVENIDA, ÁNIMO Y DESCANSO ACTIVO
   -----------------------------------------------------------------------------
   Bienvenida (primera vez del socio, 3 preguntas):
     <div class="bienvenida-pantalla">
       <div class="bienvenida">
         <div class="bienvenida-paso"><i class="hecho"></i><i class="on"></i><i></i><span>2 de 3</span></div>
         <h2 class="bienvenida-pregunta">¿Cuántos días a la semana quieres venir?</h2>
         <div class="bienvenida-cuerpo"><div class="radio-cards grandes">…</div></div>
         <div class="bienvenida-acciones">
           <button class="btn btn-ghost">Atrás</button><button class="btn btn-primary">Siguiente</button>
         </div>
       </div>
     </div>
   Ánimo (verde azulado, nunca rojo):
     <div class="animo"><span class="animo-icono">💪</span>
       <div class="animo-txt"><b>Te extrañamos.</b><span>Hoy es un buen día para volver.</span></div>
       <button class="btn btn-sm btn-outline">Empezar con 20 min</button></div>
   Descanso activo:
     <div class="descanso-opciones">
       <button class="descanso-opcion">(ilustra) <b>Cardio ligero</b><span>20 min</span>
         <span class="btn btn-primary">Elegir</span></button> …
     </div>
   ============================================================================= */

.bienvenida-pantalla {
  min-height: calc(100vh - var(--topbar-h) - 96px);
  display: grid;
  place-items: center;
  padding: 8px 0 24px;
}

.bienvenida {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 4vw, 38px);
  text-align: center;
  background: linear-gradient(160deg, rgba(var(--rojo-rgb), .12), transparent 42%), var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
}

.bienvenida::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rojo-oscuro), var(--rojo) 40%, var(--rojo-2));
}

.bienvenida-titulo,
.bienvenida > h1,
.bienvenida > h2:not(.bienvenida-pregunta) {
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.bienvenida-sub {
  margin-top: -8px;
  font-size: 14px;
  color: var(--texto-2);
}

.bienvenida .avatar,
.bienvenida .avatar-xl { margin: 0 auto; }

/* Indicador 1/3 · 2/3 · 3/3 */
.bienvenida-paso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.bienvenida-paso i {
  display: block;
  width: 26px;
  height: 5px;
  border-radius: var(--radio-full);
  background: var(--borde-2);
  transition: background var(--trans), width var(--trans-lento);
}

.bienvenida-paso i.on { width: 40px; background: var(--rojo); }
.bienvenida-paso i.hecho { background: rgba(var(--rojo-rgb), .55); }
.bienvenida-paso > span { margin-left: 4px; }

.bienvenida-pregunta {
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.bienvenida-ayuda {
  margin-top: -10px;
  font-size: 13px;
  color: var(--texto-2);
}

.bienvenida-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: entradaVista 260ms ease both;
}

/* Radio-cards grandes e ilustradas (también sirven fuera de la bienvenida) */
.bienvenida .radio-cards,
.radio-cards.grandes {
  gap: 12px;
  text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.bienvenida .radio-card,
.radio-cards.grandes .radio-card {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 104px;
  padding: 16px 12px;
  border-radius: var(--radio);
}

.bienvenida .radio-card svg,
.radio-cards.grandes .radio-card svg { width: 32px; height: 32px; }

.bienvenida .radio-card b,
.radio-cards.grandes .radio-card b { font-size: 14.5px; }

.bienvenida .radio-card span,
.radio-cards.grandes .radio-card span { font-size: 11.5px; }

.radio-emoji {
  font-size: 30px;
  line-height: 1;
}

.bienvenida .radio-card:hover,
.radio-cards.grandes .radio-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

.bienvenida-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.bienvenida-acciones .btn-primary { min-width: 170px; }
.bienvenida-acciones .btn-primary:only-child { margin-left: auto; }

.bienvenida-nota {
  font-size: 12px;
  color: var(--texto-3);
}

/* ------------------------- Franja de ánimo ------------------------- */

.animo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-width: 0;
  border-radius: var(--radio);
  background:
    linear-gradient(100deg, rgba(var(--calma-rgb), .18), rgba(var(--calma-rgb), .05) 70%),
    var(--panel);
  border: 1px solid rgba(var(--calma-rgb), .35);
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.animo-icono {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--calma-rgb), .18);
  color: var(--calma);
  font-size: 20px;
  line-height: 1;
}

.animo-icono svg { width: 20px; height: 20px; }

.animo-txt {
  flex: 1 1 auto;
  min-width: 0;
}

.animo-txt > b,
.animo-titulo { font-weight: 800; }

.animo-txt > span,
.animo-sub {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto-2);
}

.animo > .btn {
  flex: 0 0 auto;
  margin-left: auto;
}

.animo .bar { margin-top: 7px; }

.animo .bar-fill {
  background: linear-gradient(90deg, var(--calma-oscuro), var(--calma-2) 60%, var(--calma));
}

.animo.grande {
  padding: 16px 20px;
  font-size: 15px;
  border-radius: var(--radio-lg);
}

.animo.grande .animo-icono { width: 48px; height: 48px; font-size: 24px; }
.animo.grande .animo-icono svg { width: 24px; height: 24px; }

/* ------------------------ Descanso activo ------------------------ */

.descanso-opciones {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.descanso-opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 14px;
  min-width: 0;
  width: 100%;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}

.descanso-opcion:hover {
  border-color: rgba(var(--calma-rgb), .5);
  box-shadow: var(--sombra-lg);
  transform: translateY(-2px);
}

.descanso-opcion:focus-visible,
.descanso-opcion:focus-within {
  outline: 2px solid var(--calma);
  outline-offset: 2px;
}

.descanso-opcion > .ilustra,
.descanso-opcion > svg {
  width: 100%;
  max-width: 170px;
  height: auto;
  background: transparent;
  border: 0;
  padding: 0;
}

.descanso-opcion > b,
.descanso-opcion-titulo {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.descanso-opcion > span:not(.btn),
.descanso-opcion-sub {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--texto-2);
}

.descanso-opcion .btn {
  width: 100%;
  margin-top: auto;
}

.descanso-opcion .btn-primary {
  background: linear-gradient(140deg, #5EEAD4, #2DD4BF 55%, #14B8A6);
  color: #042F2E;
  border-color: rgba(0, 0, 0, .14);
  box-shadow: var(--sombra-calma);
}

.descanso-opcion .btn-primary:hover { filter: brightness(1.05); }

.descanso-nota {
  text-align: center;
  font-size: 12.5px;
  color: var(--texto-3);
}


/* =============================================================================
   42. UTILIDADES DE AIRE Y SECCIONES CORTAS
   -----------------------------------------------------------------------------
   .apretado  → menos espacio (paneles densos de director/coach)
   .aire-lg   → más espacio (pantallas del socio que deben respirar)
   .seccion-cab → "Título corto ........ Ver todo" antes de un bloque
   ============================================================================= */

.apretado { gap: 8px; }
.apretado .card-body { padding: 10px 12px; }
.apretado .card-head { padding: 10px 12px; min-height: 44px; }
.apretado .tiles,
.apretado .grid { gap: 8px; }
.apretado .tile { padding: 12px; gap: 6px; }
.apretado .tile-val { font-size: 24px; }
.apretado .hoy { padding: 18px 20px; }
.apretado .desplegable-cab { padding: 11px 13px; }
.apretado .desplegable-cuerpo { padding: 10px 13px 13px; }
.apretado .paso { padding: 7px 10px; }

.aire { gap: 22px; }
.aire-lg { gap: 28px; }
.page.aire-lg { gap: 28px; }
.aire-lg .card-body { padding: 22px; }
.aire-lg .card-head { padding: 16px 22px; }
.aire-lg .tiles { gap: 16px; }
.aire-lg .hoy { padding: 32px 34px; }
.aire-lg .saludo { padding: 12px 0 6px; }
.aire-lg .desplegable-cuerpo { padding: 18px 20px 20px; }
.aire-arriba { margin-top: 24px; }
.aire-abajo { margin-bottom: 24px; }

.seccion-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  min-width: 0;
}

.seccion-cab h2,
.seccion-cab h3,
.seccion-titulo {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seccion-cab a,
.seccion-link,
.ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--rojo-2);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}

.seccion-cab a svg,
.seccion-link svg,
.ver-mas svg { width: 14px; height: 14px; }

.seccion-cab a:hover,
.seccion-link:hover,
.ver-mas:hover { text-decoration: underline; text-underline-offset: 3px; }

[data-tema="claro"] .seccion-cab a,
[data-tema="claro"] .seccion-link,
[data-tema="claro"] .ver-mas { color: var(--rojo-oscuro); }


/* =============================================================================
   43. ADAPTACIÓN MÓVIL DEL REDISEÑO (380 px debe verse bien)
   ============================================================================= */

@media (max-width: 900px) {
  .tiles.tiles-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hoy { padding: 22px; }
  .hoy-ilustra { width: clamp(140px, 24vw, 180px); margin-left: 20px; }
}

@media (max-width: 700px) {
  .saludo { padding-top: 2px; }
  .saludo-hola { font-size: clamp(24px, 7vw, 30px); }

  /* HOY: ilustración arriba y centrada, botón a lo ancho */
  .hoy {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 18px 18px;
  }

  .hoy-ilustra {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: clamp(130px, 40vw, 160px);
    margin: 0 0 14px;
  }

  .hoy-cuerpo { align-items: stretch; }
  .hoy-titulo { font-size: clamp(21px, 6vw, 26px); }
  .hoy-meta { font-size: 12.5px; }

  .hoy-accion {
    width: 100%;
    justify-self: stretch;
  }

  .hoy-accion .btn,
  .btn.hoy-accion {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
  }

  .hoy.compacta { padding: 18px 16px; }
  .hoy.compacta .hoy-ilustra { width: 110px; margin: 0 0 10px; }

  /* Tiles: dos columnas; una tile suelta al final ocupa el ancho */
  .tiles,
  .tiles.tiles-3,
  .tiles.tiles-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .tiles > .tile:last-child:nth-child(odd) { grid-column: span 2; }
  .tile { padding: 14px; }
  .tile-val { font-size: 27px; }

  .desplegable-cab { padding: 12px 13px; font-size: 13.5px; }
  .desplegable-cuerpo { padding: 12px 13px 14px; }
  .desplegable:not(details).abierto > .desplegable-cuerpo { padding-top: 12px; padding-bottom: 14px; }

  .slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }

  .sesion-card {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px 13px 12px 16px;
  }

  .sesion-acciones {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .sesion-acciones .btn { flex: 1 1 auto; }

  .eventos { grid-template-columns: 1fr; }
  .evento { padding: 13px 13px 13px 16px; }
  .evento-acciones .btn { flex: 1 1 auto; }

  .platillos { grid-template-columns: 1fr; }
  .platillo { padding: 14px; }
  .platillo-nombre { font-size: 17px; }
  .sustituto { flex-wrap: wrap; }
  .sustituto-precio { margin-left: auto; }

  .bienvenida-pantalla { min-height: 0; padding: 0 0 16px; }

  .bienvenida {
    padding: 22px 16px 18px;
    gap: 16px;
    border-radius: var(--radio);
  }

  .bienvenida .radio-cards,
  .radio-cards.grandes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .bienvenida .radio-cards > .radio-card:last-child:nth-child(odd),
  .radio-cards.grandes > .radio-card:last-child:nth-child(odd) { grid-column: span 2; }

  .bienvenida .radio-card,
  .radio-cards.grandes .radio-card { min-height: 92px; padding: 14px 10px; }

  .bienvenida-acciones {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .bienvenida-acciones .btn { width: 100%; }
  .bienvenida-acciones .btn-primary { min-width: 0; }

  .animo { flex-wrap: wrap; padding: 12px 14px; }
  .animo > .btn { flex: 1 1 100%; margin-left: 0; }
  .animo.grande { padding: 14px 16px; }

  .vacio-amable { padding: 28px 16px; }
  .vacio-amable-icono { width: 72px; height: 72px; font-size: 34px; }

  .aire-lg,
  .page.aire-lg { gap: 22px; }
  .aire-lg .card-body { padding: 18px 16px; }
  .aire-lg .card-head { padding: 14px 16px; }
  .aire-lg .hoy { padding: 24px 20px; }
}

@media (max-width: 420px) {
  .saludo-hola { font-size: 24px; }

  .hoy { padding: 18px 15px 16px; border-radius: var(--radio); }
  .hoy-ilustra { width: 128px; }

  .tiles { gap: 8px; }
  .tile { padding: 12px 12px 11px; gap: 8px; }
  .tile-val { font-size: 25px; }
  .tile-icono { width: 34px; height: 34px; }
  .tile-icono svg { width: 16px; height: 16px; }

  .chip-dia { min-width: 58px; padding: 6px 11px; }

  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slot { min-height: 42px; font-size: 13px; padding: 5px 6px; }

  .sesion-hora { min-width: 58px; font-size: 15px; padding: 7px 8px; }

  .evento-fecha { width: 52px; }
  .evento-fecha > b,
  .evento-dia { font-size: 21px; }

  .platillo-macros > *,
  .macro { height: 22px; padding: 0 7px; font-size: 11px; }

  .bienvenida-pregunta { font-size: 19px; }

  /* Descanso activo: una columna, ilustración a la izquierda */
  .descanso-opciones { grid-template-columns: 1fr; }

  .descanso-opcion {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    text-align: left;
    padding: 12px;
  }

  .descanso-opcion > .ilustra,
  .descanso-opcion > svg {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 92px;
    max-width: 92px;
  }

  .descanso-opcion > b,
  .descanso-opcion > span:not(.btn) { grid-column: 2; }

  .descanso-opcion > .btn {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}


/* =============================================================================
   44. IMPRESIÓN Y MOVIMIENTO REDUCIDO DEL REDISEÑO
   ============================================================================= */

@media print {
  .hoy,
  .tile,
  .desplegable,
  .sesion-card,
  .evento,
  .platillo,
  .sustituto,
  .bienvenida,
  .animo,
  .vacio-amable,
  .descanso-opcion,
  .ilustra,
  .paso {
    background: #fff !important;
    border: 1px solid #BBB !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hoy::after,
  .hoy-eyebrow::before,
  .tile::after { display: none !important; }

  .hoy-accion,
  .chip-dias,
  .slots,
  .slots-leyenda,
  .sesion-acciones,
  .evento-acciones,
  .bienvenida-acciones,
  .vacio-amable-acciones,
  .seccion-cab a,
  .seccion-link,
  .ver-mas { display: none !important; }

  .desplegable:not(details) > .desplegable-cuerpo {
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 12px 16px !important;
  }

  .saludo-hola,
  .hoy-titulo,
  .tile-val,
  .platillo-nombre { color: #000 !important; }

  .paso-num,
  .evento-fecha > span,
  .evento-mes,
  .chip-dia.on,
  .slot.mio,
  .evento-cupo-fill,
  .tile.destacada {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saludo-hola .saludo-emoji,
  .hoy-eyebrow::before,
  .ilustra-fase-inicio,
  .ilustra-fase-fin,
  .ilustra svg *,
  .hoy-ilustra svg * { animation: none !important; }

  .ilustra-fase-inicio { opacity: 1 !important; }
  .ilustra-fase-fin { opacity: 0 !important; }

  a.tile:hover,
  button.tile:hover,
  .tile.clickable:hover,
  a.evento:hover,
  .evento.clickable:hover,
  a.sesion-card:hover,
  .sesion-card.clickable:hover,
  .descanso-opcion:hover,
  .slot.libre:hover,
  .bienvenida .radio-card:hover,
  .radio-cards.grandes .radio-card:hover,
  .chip-dia:active,
  .slot:active { transform: none !important; }

  .desplegable:not(details) > .desplegable-cuerpo { transition: none !important; }
}