/**
 * e-gym — Sistema visual unificado (v12, rediseño UI/UX 2026-10-18)
 *
 * Una sola hoja para admin, profesor, editor, alumno y login.
 * Orden: tokens → base → remapeo de utilidades Tailwind → layout → componentes
 *        → estados → módulos de pantalla → responsive.
 * Decisiones documentadas en design-system/e-gym/MASTER.md (+ pages/*.md).
 *
 * El color de acento se lee siempre de --eg-accent* para respetar el tema
 * personalizado del alumno (eg_tema_accent_css() redefine esas variables);
 * las variantes derivadas usan color-mix() sobre --eg-accent.
 */

/* ═══════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════ */
:root {
  /* Superficies (de más profunda a más elevada) */
  --eg-bg: #06080B;
  --eg-bg-soft: #090C10;
  --eg-bg-alt: #090C10;
  --eg-surface: #10151B;
  --eg-surface-2: #161C24;
  --eg-surface-3: #1D2430;
  --eg-panel: var(--eg-surface);
  --eg-panel-2: var(--eg-surface-2);
  --eg-field: #0A0E13;
  --eg-sidebar: #080B0E;
  --eg-sidebar-2: #080B0E;
  --eg-mobile-nav: #080B0E;
  --eg-mobile-nav-border: rgba(255, 255, 255, 0.09);
  --eg-overlay: rgba(2, 3, 5, 0.74);
  --eg-hover: rgba(255, 255, 255, 0.05);
  --eg-hover-strong: rgba(255, 255, 255, 0.08);

  /* Bordes (los límites de controles cumplen 3:1) */
  --eg-border: rgba(255, 255, 255, 0.09);
  --eg-border-soft: rgba(255, 255, 255, 0.06);
  --eg-border-strong: rgba(255, 255, 255, 0.16);
  --eg-border-field: #5B6577;
  --eg-border-field-hover: #6E7889;

  /* Texto (contraste ≥ 4,5:1 en todas las superficies; cuerpo ≥ 10:1) */
  --eg-text: #F1F4F8;
  --eg-text-2: #C9D1DC;
  --eg-text-muted: #A3ADBC;
  --eg-text-soft: #8D98A9;
  --eg-placeholder: #7D8798;

  /* Acento de marca */
  --eg-accent: #14B8A6;
  --eg-accent-bright: #14B8A6;
  --eg-accent-hover: color-mix(in srgb, var(--eg-accent) 84%, #ffffff);
  --eg-accent-text: var(--eg-accent);
  --eg-accent-soft: rgba(20, 184, 166, 0.12);
  --eg-accent-border: rgba(20, 184, 166, 0.32);
  --eg-accent-ink: #042F2E;
  --eg-focus-ring: color-mix(in srgb, var(--eg-accent) 34%, transparent);

  /* Estados */
  --eg-success: #34D399;
  --eg-success-text: #6EE7B7;
  --eg-success-soft: rgba(52, 211, 153, 0.12);
  --eg-success-border: rgba(52, 211, 153, 0.32);
  --eg-warning: #FBBF24;
  --eg-warning-text: #FCD34D;
  --eg-warning-soft: rgba(251, 191, 36, 0.12);
  --eg-warning-border: rgba(251, 191, 36, 0.32);
  --eg-error: #F87171;
  --eg-danger: #F87171;
  --eg-danger-text: #FCA5A5;
  --eg-danger-soft: rgba(248, 113, 113, 0.12);
  --eg-danger-border: rgba(248, 113, 113, 0.34);
  --eg-info: #60A5FA;
  --eg-info-text: #93C5FD;
  --eg-info-soft: rgba(96, 165, 250, 0.12);
  --eg-info-border: rgba(96, 165, 250, 0.32);

  /* Tipografía: Manrope (texto/UI) + Space Grotesk (display) */
  --eg-font-sans: "Manrope", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --eg-font-display: "Space Grotesk", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --eg-font: var(--eg-font-sans);
  --eg-fs-2xs: 0.6875rem;
  --eg-fs-xs: 0.75rem;
  --eg-fs-sm: 0.8125rem;
  --eg-fs-base: 0.875rem;
  --eg-fs-md: 0.9375rem;
  --eg-fs-lg: 1rem;
  --eg-fs-xl: 1.125rem;
  --eg-fs-2xl: 1.375rem;
  --eg-fs-title: clamp(1.375rem, 1.15rem + 0.75vw, 1.875rem);
  --eg-fs-kpi: clamp(1.5rem, 1.3rem + 0.55vw, 1.875rem);
  --eg-lh-tight: 1.15;
  --eg-lh-snug: 1.3;
  --eg-lh-base: 1.5;

  /* Espaciado (ritmo 4/8) */
  --eg-space-1: 0.25rem;
  --eg-space-2: 0.5rem;
  --eg-space-3: 0.75rem;
  --eg-space-4: 1rem;
  --eg-space-5: 1.25rem;
  --eg-space-6: 1.5rem;
  --eg-space-8: 2rem;
  --eg-space-10: 2.5rem;
  --eg-space-12: 3rem;

  /* Radios */
  --eg-radius-xs: 6px;
  --eg-radius-sm: 8px;
  --eg-radius-md: 10px;
  --eg-radius: 14px;
  --eg-radius-lg: 18px;
  --eg-radius-pill: 999px;

  /* Elevación (OLED: plano con bordes; sombra solo en capas flotantes) */
  --eg-shadow: none;
  --eg-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --eg-shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --eg-shadow-raised: 0 10px 28px rgba(0, 0, 0, 0.5);
  --eg-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.62);

  /* Controles */
  --eg-btn-h: 40px;
  --eg-btn-h-sm: 34px;
  --eg-btn-h-lg: 48px;
  --eg-control-h: 40px;
  --eg-icon-btn: 2rem;
  --eg-icon-glyph: 1.125rem;

  /* Layout */
  --eg-sidebar-w: 16rem;
  --eg-header-h: 3.75rem;
  --eg-header-h-mobile: 3.5rem;

  /* Capas */
  --eg-z-header: 30;
  --eg-z-nav: 40;
  --eg-z-modal: 60;
  --eg-z-toast: 80;

  /* Movimiento */
  --eg-ease: cubic-bezier(0.2, 0, 0, 1);
  --eg-dur-fast: 120ms;
  --eg-dur: 180ms;
  --eg-dur-slow: 260ms;
}

/* Puente con variables legacy (app-tokens / base.css / theme-dark) */
html.theme-dark,
html[data-theme="dark"],
html.dark {
  --egym-bg: var(--eg-bg);
  --egym-bg-alt: var(--eg-bg-soft);
  --egym-surface: var(--eg-surface);
  --egym-surface-elevated: var(--eg-surface-2);
  --egym-surface-hover: var(--eg-surface-3);
  --egym-text: var(--eg-text-2);
  --egym-text-heading: var(--eg-text);
  --egym-text-muted: var(--eg-text-muted);
  --egym-border: var(--eg-border);
  --egym-border-subtle: var(--eg-border-soft);
  --egym-border-hover: var(--eg-border-strong);
  --egym-primary: var(--eg-accent);
  --egym-primary-hover: var(--eg-accent);
  --egym-primary-muted: var(--eg-accent-soft);
  --egym-accent: var(--eg-accent);
  --egym-success: var(--eg-success);
  --egym-warning: var(--eg-warning);
  --egym-danger: var(--eg-danger);
  --egym-nav-bg: var(--eg-mobile-nav);
  --egym-shadow: none;
  --egym-shadow-lg: var(--eg-shadow-overlay);
  --egym-shadow-glow: none;
  --egym-radius: var(--eg-radius);
  --egym-radius-sm: var(--eg-radius-sm);
  --egym-base-bg: var(--eg-bg);
  --egym-base-surface: var(--eg-surface);
  --egym-base-border: var(--eg-border);
  --egym-background-dark: var(--eg-bg);
  --egym-surface-dark: var(--eg-surface);
  --egym-gym-border: var(--eg-border);

  --bg: var(--eg-bg);
  --bg-alt: var(--eg-bg-soft);
  --surface: var(--eg-surface);
  --surface-hover: var(--eg-surface-3);
  --text: var(--eg-text-2);
  --text-muted: var(--eg-text-muted);
  --text-heading: var(--eg-text);
  --border: var(--eg-border);
  --border-hover: var(--eg-border-strong);
  --primary: var(--eg-accent);
  --primary-dark: var(--eg-accent);
  --card-bg: var(--eg-surface);
  --nav-bg: var(--eg-mobile-nav);
  color-scheme: dark;
}

/* ═══════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════ */
html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.theme-dark body,
html[data-theme="dark"] body,
html.dark body,
body.bg-gym-gradient,
body.bg-background-dark {
  background-color: var(--eg-bg);
  color: var(--eg-text-2);
}

body,
input,
select,
textarea,
button {
  font-family: var(--eg-font-sans);
  letter-spacing: -0.006em;
}

body {
  line-height: var(--eg-lh-base);
}

h1, h2, h3, h4,
.page-title,
.card-title,
.eg-title {
  font-family: var(--eg-font-sans);
  letter-spacing: -0.018em;
  font-weight: 700;
  color: var(--eg-text);
  text-wrap: balance;
}

/* Display (Space Grotesk): títulos de página y cifras destacadas */
.eg-display {
  font-family: var(--eg-font-display);
  letter-spacing: -0.025em;
}

.eg-num {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: color-mix(in srgb, var(--eg-accent) 32%, transparent);
  color: var(--eg-text);
}

/* Foco visible y consistente en toda la app (teclado) */
:where(a, button, [role="button"], [tabindex], summary, input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid var(--eg-accent);
  outline-offset: 2px;
  border-radius: var(--eg-radius-xs);
}

:where(a, button, [role="button"]):focus:not(:focus-visible) {
  outline: none;
}

img,
video {
  max-width: 100%;
}

/* Elementos clickeables sin cursor declarado */
:where(button:not(:disabled), [role="button"], summary, label[for], select:not(:disabled), input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)) {
  cursor: pointer;
}

/* Scrollbars discretas */
* {
  scrollbar-width: thin;
  scrollbar-color: #2C3542 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #2C3542; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #3A4554; }
*::-webkit-scrollbar-track { background: transparent; }

/* Carriles horizontales (pestañas, días, semanas): sin barra visible */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  user-select: none;
}

/* Mientras carga la fuente de íconos se ve el nombre de la ligadura ("person_add"):
   la caja de 1em (ancho final del ícono) evita que ensanche botones y barras.
   :where() deja que cualquier utilidad (flex, size-*, hidden, w-*) siga ganando. */
:where(.material-symbols-outlined) {
  display: inline-block;
  width: 1em;
  min-width: 1em; /* con overflow:hidden un ítem flex podría encogerse por debajo del ícono */
  overflow: hidden;
  white-space: nowrap;
  box-sizing: content-box;
}

/* La barra de scroll aparece cuando llega el contenido: reservar su espacio evita el salto horizontal. */
main.overflow-y-auto {
  scrollbar-gutter: stable;
}

.active-icon,
.fill-1 {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ═══════════════════════════════════════
   3. REMAPEO DE UTILIDADES TAILWIND (tema oscuro)
   Las vistas usan utilidades slate-*; acá se traducen a tokens.
   ═══════════════════════════════════════ */

/* Fondos de página */
html.dark .bg-background-dark,
html.dark .dark\:bg-background-dark,
html.dark .bg-gym-deep,
html.dark .dark\:bg-gym-deep {
  background-color: var(--eg-bg);
}

html.dark .bg-slate-950,
html.dark .dark\:bg-slate-950,
html.dark .bg-black\/20,
html.dark .bg-slate-900\/50,
html.dark .dark\:bg-slate-900\/50 {
  background-color: var(--eg-bg-soft);
}

/* Paneles: planos, sin gradiente ni sombra */
html.dark .bg-slate-900,
html.dark .dark\:bg-slate-900,
html.dark .bg-slate-800,
html.dark .dark\:bg-slate-800,
html.dark .bg-slate-800\/50,
html.dark .dark\:bg-slate-800\/50,
html.dark .bg-slate-800\/40,
html.dark .bg-slate-800\/80,
html.dark .dark\:bg-slate-800\/80,
html.dark .bg-surface-dark,
html.dark .dark\:bg-surface-dark,
html.dark .bg-gym-surface,
html.dark .dark\:bg-neutral-dark\/50,
html.dark .bg-white.dark\:bg-surface-dark,
html.dark .bg-white.dark\:bg-slate-800\/50,
html.dark .bg-white.dark\:bg-slate-900 {
  background-color: var(--eg-surface);
  background-image: none;
}

html.dark .bg-slate-700,
html.dark .dark\:bg-slate-700,
html.dark .bg-slate-700\/50,
html.dark .bg-slate-600,
html.dark .dark\:bg-slate-600 {
  background-color: var(--eg-surface-3);
}

html.dark .hover\:bg-slate-700:hover,
html.dark .hover\:bg-slate-700\/50:hover,
html.dark .hover\:bg-slate-600:hover,
html.dark .hover\:bg-slate-800:hover,
html.dark .hover\:bg-slate-800\/50:hover,
html.dark .dark\:hover\:bg-slate-700:hover,
html.dark .dark\:hover\:bg-slate-800:hover,
html.dark .hover\:bg-white\/5:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Bordes */
html.dark .border-slate-800,
html.dark .dark\:border-slate-800,
html.dark .border-slate-700,
html.dark .dark\:border-slate-700,
html.dark .border-slate-700\/50,
html.dark .dark\:border-slate-700\/50,
html.dark .border-gym-border,
html.dark .dark\:border-gym-border,
html.dark .border-slate-200.dark\:border-slate-700,
html.dark .border-slate-200.dark\:border-slate-800,
html.dark .divide-slate-700 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-slate-700 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--eg-border);
}

html.dark .border-slate-600,
html.dark .dark\:border-slate-600,
html.dark .border-slate-500 {
  border-color: var(--eg-border-strong);
}

html.dark .border-l-4 {
  border-left-width: 1px;
}

html.dark .border-primary\/30:not(button):not(a):not(.tab-btn):not(.filtro-alumno):not(.filtro-usuario):not(input):not(select):not(textarea),
html.dark .border-primary\/20:not(button):not(a):not(.tab-btn):not(.filtro-alumno):not(.filtro-usuario):not(input):not(select):not(textarea) {
  border-color: var(--eg-border-strong);
}

/* Texto: jerarquía con contraste AA */
html.dark .text-slate-100,
html.dark .dark\:text-slate-100,
html.dark .text-slate-50,
html.dark .text-white {
  color: var(--eg-text);
}

html.dark .text-slate-200,
html.dark .dark\:text-slate-200 {
  color: #DEE4EB;
}

html.dark .text-slate-300,
html.dark .dark\:text-slate-300 {
  color: var(--eg-text-2);
}

html.dark .text-slate-400,
html.dark .dark\:text-slate-400 {
  color: var(--eg-text-muted);
}

html.dark .text-slate-500,
html.dark .dark\:text-slate-500,
html.dark .text-slate-600:not(.dark\:text-slate-300):not(.dark\:text-slate-400):not(.dark\:text-slate-200) {
  color: var(--eg-text-soft);
}

html.dark .text-primary,
html.dark .dark\:text-primary {
  color: var(--eg-accent-text);
}

html.dark .hover\:text-primary:hover,
html.dark .dark\:hover\:text-primary:hover {
  color: var(--eg-accent-text);
}

html.dark .hover\:text-slate-200:hover,
html.dark .hover\:text-slate-300:hover,
html.dark .hover\:text-white:hover {
  color: var(--eg-text);
}

html.dark .ring-primary,
html.dark .focus\:ring-primary:focus {
  --tw-ring-color: var(--eg-accent-soft);
}

/* ═══════════════════════════════════════
   4. LAYOUT: sidebar, encabezados, navegación móvil
   ═══════════════════════════════════════ */

/* — Sidebar (≥1024px): includes/app-sidebar.php — */
.eg-sidebar {
  flex-direction: column;
  flex-shrink: 0;
  width: 15rem;
  min-height: 0;
  background: var(--eg-sidebar);
  border-right: 1px solid var(--eg-border);
}

@media (min-width: 1280px) {
  .eg-sidebar { width: var(--eg-sidebar-w); }
}

.eg-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--eg-header-h);
  padding: 0 1rem 0 1.25rem;
  border-bottom: 1px solid var(--eg-border-soft);
}

.eg-sidebar__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.25rem;
  margin-left: -0.25rem;
  border-radius: var(--eg-radius-sm);
  color: var(--eg-text);
  text-decoration: none;
}

.eg-sidebar__logo {
  width: auto;
  height: 1.375rem;
  flex-shrink: 0;
}

.eg-sidebar__wordmark {
  font-family: var(--eg-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.eg-sidebar__role {
  flex-shrink: 0;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--eg-radius-pill);
  border: 1px solid var(--eg-accent-border);
  background: var(--eg-accent-soft);
  color: var(--eg-accent-text);
  font-size: var(--eg-fs-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.eg-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.875rem 0.75rem 1rem;
}

.eg-sidebar__group + .eg-sidebar__group {
  margin-top: 0.875rem;
}

.eg-sidebar__group-label {
  margin: 0 0 0.25rem;
  padding: 0 0.75rem;
  font-size: var(--eg-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
}

.eg-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eg-sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.25rem;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--eg-radius-md);
  color: var(--eg-text-muted);
  font-size: var(--eg-fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--eg-dur-fast) var(--eg-ease), color var(--eg-dur-fast) var(--eg-ease);
}

.eg-sidebar__link .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--eg-text-soft);
  transition: color var(--eg-dur-fast) var(--eg-ease);
}

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

.eg-sidebar__link:hover {
  background: var(--eg-hover);
  color: var(--eg-text);
}

.eg-sidebar__link:hover .material-symbols-outlined {
  color: var(--eg-text-2);
}

.eg-sidebar__link[aria-current="page"] {
  background: var(--eg-accent-soft);
  color: var(--eg-text);
  font-weight: 700;
}

@media (pointer: coarse) {
  .eg-sidebar__link { min-height: 2.75rem; }
}

.eg-sidebar__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.4375rem;
  bottom: 0.4375rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--eg-accent);
}

.eg-sidebar__link[aria-current="page"] .material-symbols-outlined {
  color: var(--eg-accent);
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.eg-sidebar__link.is-muted {
  opacity: 0.6;
}

.eg-sidebar__link.is-danger:hover {
  background: var(--eg-danger-soft);
  color: var(--eg-danger-text);
}

.eg-sidebar__link.is-danger:hover .material-symbols-outlined {
  color: var(--eg-danger-text);
}

.eg-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--eg-border-soft);
}

.eg-sidebar__user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.5rem;
  border-radius: var(--eg-radius-md);
  color: var(--eg-text);
  text-decoration: none;
  transition: background-color var(--eg-dur-fast) var(--eg-ease);
}

.eg-sidebar__user:hover {
  background: var(--eg-hover);
}

.eg-sidebar__avatar,
.eg-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  border-radius: var(--eg-radius-pill);
  border: 1px solid var(--eg-border-strong);
  background: var(--eg-surface-3);
  color: var(--eg-accent-text);
  font-weight: 700;
  font-size: var(--eg-fs-md);
}

.eg-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--eg-radius-pill);
  border: 1px solid var(--eg-border-strong);
  background: var(--eg-surface-3);
  color: var(--eg-accent-text);
  font-size: var(--eg-fs-sm);
  font-weight: 700;
}

.eg-sidebar__avatar img,
.eg-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eg-sidebar__user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.eg-sidebar__user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--eg-fs-sm);
  font-weight: 700;
}

.eg-sidebar__user-role {
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

/* Medidor de cupo del plan (profesor) */
.eg-sidebar__meter {
  padding: 0.625rem 0.75rem;
  border-radius: var(--eg-radius-md);
  border: 1px solid var(--eg-border-soft);
  background: var(--eg-surface);
}

.eg-sidebar__meter-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-muted);
}

.eg-sidebar__meter-head strong {
  color: var(--eg-text);
  font-variant-numeric: tabular-nums;
}

.eg-sidebar__meter-track {
  height: 4px;
  margin-top: 0.5rem;
  overflow: hidden;
  border-radius: var(--eg-radius-pill);
  background: var(--eg-surface-3);
}

.eg-sidebar__meter-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--eg-accent);
}

.eg-sidebar__meter.is-full .eg-sidebar__meter-track > span {
  background: var(--eg-warning);
}

/* — Barra de impersonación — */
a[href$="impersonate-stop.php"].shrink-0 {
  min-height: 2.5rem;
  background: var(--eg-warning-soft);
  border-bottom: 1px solid var(--eg-warning-border);
  color: var(--eg-warning-text);
  font-size: var(--eg-fs-sm);
  font-weight: 650;
}

a[href$="impersonate-stop.php"].shrink-0:hover {
  background: rgba(251, 191, 36, 0.18);
}

/* — Encabezados (móvil y escritorio) — */
:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header {
  height: var(--eg-header-h-mobile);
  background: color-mix(in srgb, var(--eg-bg) 90%, transparent);
  border-bottom: 1px solid var(--eg-border);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}

@media (min-width: 1024px) {
  :is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header.eg-topbar {
    height: var(--eg-header-h);
  }
}

.eg-topbar__context {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: var(--eg-fs-sm);
  color: var(--eg-text-soft);
}

.eg-topbar__role {
  font-weight: 600;
  white-space: nowrap;
}

.eg-topbar__sep {
  color: var(--eg-text-soft);
  opacity: 0.6;
}

.eg-topbar__section {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
  margin-left: -0.25rem;
  border-radius: var(--eg-radius-sm);
  color: var(--eg-text);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--eg-dur-fast) var(--eg-ease);
}

.eg-topbar__section .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--eg-accent);
}

.eg-topbar__section:hover {
  background: var(--eg-hover);
}

:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header :is(button, a).relative:not([class*="hidden"]),
:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header button.p-2:not([class*="hidden"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: var(--eg-radius-md);
  color: var(--eg-text-muted);
  transition: background-color var(--eg-dur-fast) var(--eg-ease), color var(--eg-dur-fast) var(--eg-ease);
}

:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header :is(button, a).relative:hover,
:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header button.p-2:hover {
  background: var(--eg-hover-strong);
  color: var(--eg-text);
}

:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header [id^="notif-badge"] {
  top: 0.25rem;
  right: 0.25rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: var(--eg-radius-pill);
  background: var(--eg-accent);
  color: var(--eg-accent-ink);
  font-size: var(--eg-fs-2xs);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--eg-bg);
}

:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header [id^="notif-badge"].hidden {
  display: none;
}

/* Avatar del encabezado */
:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header a[aria-label="Perfil"],
:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header a.size-8,
:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header a.size-9 {
  width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--eg-radius-pill);
  border: 1px solid var(--eg-border-strong);
  background: var(--eg-surface-3);
  color: var(--eg-accent-text);
  font-size: var(--eg-fs-md);
  font-weight: 700;
  transition: border-color var(--eg-dur-fast) var(--eg-ease);
}

:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header a[aria-label="Perfil"]:hover,
:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header a.size-8:hover,
:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header a.size-9:hover {
  border-color: var(--eg-accent-border);
}

:is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header a.size-8 > span {
  background: transparent;
}

/* — Navegación inferior (móvil) — */
nav.lg\:hidden.sticky.bottom-0,
.eg-bottom-nav {
  background: var(--eg-mobile-nav);
  border-top: 1px solid var(--eg-mobile-nav-border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

nav.lg\:hidden.sticky.bottom-0 > div {
  padding: 0.375rem 0.25rem;
  gap: 0.125rem;
}

nav.lg\:hidden.sticky.bottom-0 :is(a, button):not(.hidden) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex: 1 1 0;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.25rem 0.125rem;
  border-radius: var(--eg-radius-md);
  color: var(--eg-text-soft);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--eg-dur-fast) var(--eg-ease);
}

nav.lg\:hidden.sticky.bottom-0 :is(a, button):hover {
  color: var(--eg-text-2);
}

/* Indicador tipo píldora detrás del ícono */
nav.lg\:hidden.sticky.bottom-0 :is(a, button) .material-symbols-outlined {
  font-size: 1.375rem;
  padding: 0.1875rem 1.125rem;
  border-radius: var(--eg-radius-pill);
  transition: background-color var(--eg-dur) var(--eg-ease), color var(--eg-dur) var(--eg-ease);
}

nav.lg\:hidden.sticky.bottom-0 :is(a, button) > span:not(.material-symbols-outlined) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--eg-fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.15;
}

nav.lg\:hidden.sticky.bottom-0 :is(a, button).text-primary,
nav.lg\:hidden.sticky.bottom-0 :is(a, button)[aria-current="page"] {
  color: var(--eg-text);
}

nav.lg\:hidden.sticky.bottom-0 :is(a, button).text-primary .material-symbols-outlined,
nav.lg\:hidden.sticky.bottom-0 :is(a, button)[aria-current="page"] .material-symbols-outlined,
nav.lg\:hidden.sticky.bottom-0 :is(a, button)[aria-expanded="true"] .material-symbols-outlined {
  background: var(--eg-accent-soft);
  color: var(--eg-accent);
}

nav.lg\:hidden.sticky.bottom-0 :is(a, button).text-primary > span:not(.material-symbols-outlined),
nav.lg\:hidden.sticky.bottom-0 :is(a, button)[aria-current="page"] > span:not(.material-symbols-outlined) {
  font-weight: 700;
}

nav.lg\:hidden.sticky.bottom-0 .active-icon {
  color: var(--eg-accent);
}

/* — Hoja "Más" (profesor y admin) — */
.eg-more-sheet {
  position: fixed;
  inset: 0;
  z-index: 55;
}

.eg-more-sheet.hidden {
  display: none;
}

.eg-more-sheet__backdrop,
#prof-nav-more-sheet .prof-nav-more-backdrop {
  position: absolute;
  inset: 0;
  background: var(--eg-overlay);
}

.eg-more-sheet__panel,
#prof-nav-more-sheet .prof-nav-more-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--eg-surface);
  border-top: 1px solid var(--eg-border-strong);
  border-radius: var(--eg-radius-lg) var(--eg-radius-lg) 0 0;
  box-shadow: var(--eg-shadow-overlay);
}

.eg-more-sheet__panel::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  margin: 0.25rem auto 0.625rem;
  border-radius: var(--eg-radius-pill);
  background: var(--eg-border-strong);
}

.eg-more-sheet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.eg-more-sheet__item,
#prof-nav-more-sheet .prof-nav-more-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--eg-radius-md);
  border: 1px solid var(--eg-border);
  background: var(--eg-surface-2);
  color: var(--eg-text);
  font-size: var(--eg-fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--eg-dur-fast) var(--eg-ease), border-color var(--eg-dur-fast) var(--eg-ease);
}

.eg-more-sheet__item .material-symbols-outlined,
#prof-nav-more-sheet .prof-nav-more-item .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--eg-accent);
}

.eg-more-sheet__item:hover,
.eg-more-sheet__item:active,
#prof-nav-more-sheet .prof-nav-more-item:hover,
#prof-nav-more-sheet .prof-nav-more-item:active {
  background: var(--eg-surface-3);
  border-color: var(--eg-border-strong);
  color: var(--eg-text);
}

.eg-more-sheet__item[aria-current="page"] {
  border-color: var(--eg-accent-border);
  background: var(--eg-accent-soft);
}

.eg-more-sheet__item[href$="logout.php"] .material-symbols-outlined {
  color: var(--eg-danger-text);
}

.eg-more-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.25rem 0.625rem;
}

.eg-more-sheet__title {
  margin: 0;
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-xl);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--eg-text);
}

.eg-more-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--eg-radius-md);
  color: var(--eg-text-muted);
}

.eg-more-sheet__close:hover {
  background: var(--eg-hover-strong);
  color: var(--eg-text);
}

:is(.admin-app, .profesor-app, .editor-app) main h1:not(.eg-keep-size) {
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-title);
  font-weight: 650;
  line-height: var(--eg-lh-tight);
  letter-spacing: -0.025em;
  color: var(--eg-text);
}

:is(.admin-app, .profesor-app, .editor-app) main h1:not(.eg-keep-size) + p {
  margin-top: 0.375rem;
  font-size: var(--eg-fs-base);
  line-height: 1.45;
  color: var(--eg-text-muted);
}

.alumno-app main h1:not(.eg-profile-hero-name):not(#rutina-titulo-h1):not(.eg-keep-size) {
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-title);
  font-weight: 650;
  line-height: var(--eg-lh-tight);
  letter-spacing: -0.025em;
}

:is(.admin-app, .profesor-app, .editor-app) main h2.text-lg,
:is(.admin-app, .profesor-app, .editor-app) main h2.text-xl,
:is(.admin-app, .profesor-app, .editor-app) main h3.text-lg {
  font-size: var(--eg-fs-lg);
  font-weight: 700;
  letter-spacing: -0.012em;
}

/* Encabezado de página (titulo + acciones), sin caja */
.eg-page-head,
.eg-admin-toolbar:has(> div > h1),
.eg-admin-toolbar:has(> h1),
.eg-prof-toolbar:has(> div > h1) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-height: 0;
  margin-bottom: 1.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.eg-page-head h1,
.eg-admin-toolbar:has(> div > h1) h1,
.eg-prof-toolbar:has(> div > h1) h1 {
  margin: 0;
}

/* Dentro de una columna flex con gap, el gap ya separa el encabezado del contenido */
.flex-col[class*="gap-"] > .eg-page-head {
  margin-bottom: 0;
}

/* Sección dentro de una ficha (debajo de la cabecera y las pestañas): h2 con el mismo layout */
.eg-page-head h2 {
  margin: 0;
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-2xl);
  font-weight: 650;
  line-height: var(--eg-lh-tight);
  letter-spacing: -0.02em;
  color: var(--eg-text);
}

.eg-page-head p,
.eg-admin-toolbar:has(> div > h1) h1 + p,
.eg-prof-toolbar:has(> div > h1) h1 + p {
  margin: 0.375rem 0 0;
  font-size: var(--eg-fs-base);
  color: var(--eg-text-muted);
}

/* ── Patrón único de encabezado (todas las pantallas de listado) ──
   .eg-page-head  → [título + descripción] [.eg-page-actions: secundarias + primaria "Nuevo …"]
   pestañas       → .eg-admin-tabs / .eg-student-tabs (opcional, debajo del encabezado)
   .eg-filters    → buscador + selects + contador, sin caja
   chips          → .eg-admin-filter-bar / .eg-filter-bar */
.eg-page-head > div:first-child {
  min-width: 0;
}

.eg-page-actions,
.eg-admin-toolbar:has(> div > h1) > .eg-admin-toolbar-actions,
.eg-prof-toolbar:has(> div > h1) > .eg-prof-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
}

.eg-page-actions > :is(a, button):not(.hidden),
.eg-admin-toolbar:has(> div > h1) > .eg-admin-toolbar-actions > :is(a, button):not(.hidden),
.eg-prof-toolbar:has(> div > h1) > .eg-prof-toolbar-actions > :is(a, button):not(.hidden),
.eg-page-head > :is(a, button):not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--eg-btn-h);
  padding: 0 1rem;
  border-radius: var(--eg-radius-md);
  font-size: var(--eg-fs-base);
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.eg-page-actions > :is(a, button) .material-symbols-outlined,
.eg-admin-toolbar:has(> div > h1) > .eg-admin-toolbar-actions > :is(a, button) .material-symbols-outlined,
.eg-prof-toolbar:has(> div > h1) > .eg-prof-toolbar-actions > :is(a, button) .material-symbols-outlined {
  font-size: 1.25rem;
}

/* Acciones secundarias del encabezado (las que no son el botón primario): neutras */
.eg-page-actions > :is(a, button):not(.bg-primary):not(.eg-btn--primary):not(.eg-btn--danger):not(.bg-red-500),
.eg-admin-toolbar:has(> div > h1) > .eg-admin-toolbar-actions > :is(a, button):not(.bg-primary):not(.eg-btn--primary),
.eg-prof-toolbar:has(> div > h1) > .eg-prof-toolbar-actions > :is(a, button):not(.bg-primary):not(.eg-btn--primary) {
  border: 1px solid var(--eg-border-strong);
  background-color: var(--eg-surface-2);
  color: var(--eg-text);
}

.eg-page-actions > :is(a, button):not(.bg-primary):not(.eg-btn--primary):not(.eg-btn--danger):not(.bg-red-500):hover,
.eg-admin-toolbar:has(> div > h1) > .eg-admin-toolbar-actions > :is(a, button):not(.bg-primary):not(.eg-btn--primary):hover,
.eg-prof-toolbar:has(> div > h1) > .eg-prof-toolbar-actions > :is(a, button):not(.bg-primary):not(.eg-btn--primary):hover {
  background-color: var(--eg-surface-3);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--eg-text);
}

/* Enlace "volver" de pantallas de detalle/formulario: arriba del título, siempre igual */
.eg-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  margin: 0 0 0.5rem -0.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: var(--eg-radius-sm);
  color: var(--eg-text-muted);
  font-size: var(--eg-fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--eg-dur-fast) var(--eg-ease), background-color var(--eg-dur-fast) var(--eg-ease);
}

.eg-back-link .material-symbols-outlined {
  font-size: 1.125rem;
}

.eg-back-link:hover {
  color: var(--eg-text);
  background: var(--eg-hover);
}

/* Fila de filtros: buscador + selects + contador, sin caja ni fondo */
.eg-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0.75rem;
  margin: 0 0 1rem;
  padding: 0;
  background: transparent;
  border: 0;
}

.eg-filters > :is(input, select) {
  min-height: var(--eg-control-h);
}

.eg-filters > input,
:is(.eg-admin-filter-bar, .eg-filter-bar) > input:is([type="search"], [placeholder^="Buscar"], [placeholder^="Filtrar"]) {
  flex: 0 1 22rem;
  width: 100%;
  max-width: 22rem;
}

.eg-filters__count {
  margin-left: auto;
  font-size: var(--eg-fs-sm);
  color: var(--eg-text-soft);
  white-space: nowrap;
}

/* Todo campo de búsqueda lleva la lupa a la izquierda (salvo los que ya traen su ícono) */
:is(main, .fixed.inset-0, .ag-overlay) input:is([type="search"], [placeholder^="Buscar"], [placeholder^="Filtrar"]):not([class*="pl-"]):not(.eg-map-input):not(.egym-ms-input) {
  padding-left: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A3ADBC'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
  background-size: 1.125rem;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* ═══════════════════════════════════════
   5. BOTONES
   ═══════════════════════════════════════ */
/* Layout interno solo si el botón no está oculto (no pisar `hidden` ni `hidden lg:flex`) */
:is(.btn, .eg-btn, a.bg-primary, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-outline-primary, .btn-outline-secondary, .btn-ghost):not([class*="hidden"]),
button.bg-primary:not(.eg-switch):not([role="switch"]):not(.eg-row-check-btn):not(.ej-entreno-check):not(.comida-check):not(.sup-check):not([class*="hidden"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn,
.eg-btn,
button.bg-primary:not(.eg-switch):not([role="switch"]):not(.eg-row-check-btn):not(.ej-entreno-check):not(.comida-check):not(.sup-check),
a.bg-primary,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-outline-primary,
.btn-outline-secondary,
.btn-ghost {
  min-height: var(--eg-btn-h);
  border-radius: var(--eg-radius-md);
  font-weight: 650;
  font-size: var(--eg-fs-base);
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--eg-dur-fast) var(--eg-ease), border-color var(--eg-dur-fast) var(--eg-ease), color var(--eg-dur-fast) var(--eg-ease), opacity var(--eg-dur-fast) var(--eg-ease), transform 0.1s var(--eg-ease);
}

/* Botones en mayúscula inicial: el texto en mayúsculas dificulta la lectura */
:is(button, a, .btn, .eg-btn).uppercase:not(.eg-keep-case) {
  text-transform: none;
  letter-spacing: 0;
}

/* Primario: acento sólido con tinta oscura */
button.bg-primary:not(.eg-switch):not([role="switch"]):not(.eg-row-check-btn):not(.ej-entreno-check):not(.comida-check):not(.sup-check),
a.bg-primary,
.btn-primary,
.btn.btn-primary,
.btn-primary-sm,
.eg-btn--primary {
  background-color: var(--eg-accent);
  background-image: none;
  color: var(--eg-accent-ink);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

button.bg-primary:not(.eg-switch):not([role="switch"]):not(.eg-row-check-btn):not(.ej-entreno-check):not(.comida-check):not(.sup-check):hover:not(:disabled),
a.bg-primary:hover,
.btn-primary:hover:not(:disabled),
.btn-primary-sm:hover,
.eg-btn--primary:hover:not(:disabled) {
  background-color: var(--eg-accent-hover);
  color: var(--eg-accent-ink);
}

button.bg-primary:not(.eg-switch):not([role="switch"]):not(.eg-row-check-btn):not(.ej-entreno-check):not(.comida-check):not(.sup-check) .material-symbols-outlined,
a.bg-primary .material-symbols-outlined {
  color: inherit;
}

/* Secundario neutro (bg-primary/10, bg-slate-700, btn-secondary) */
button.bg-primary\/10,
a.bg-primary\/10,
button.bg-primary\/20,
a.bg-primary\/20,
.btn-secondary,
.btn-outline-secondary,
.eg-btn--secondary {
  background-color: var(--eg-surface-2);
  color: var(--eg-text);
  border: 1px solid var(--eg-border-strong);
  min-height: var(--eg-btn-h);
}

button.bg-primary\/10:hover,
a.bg-primary\/10:hover,
button.bg-primary\/20:hover,
a.bg-primary\/20:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover,
.eg-btn--secondary:hover {
  background-color: var(--eg-surface-3);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--eg-text);
}

button.bg-primary\/10.text-primary .material-symbols-outlined,
a.bg-primary\/10.text-primary .material-symbols-outlined,
button.bg-primary\/20.text-primary .material-symbols-outlined,
a.bg-primary\/20.text-primary .material-symbols-outlined {
  color: var(--eg-accent);
}

/* Botones "Cancelar" con borde slate */
button[class*="border-slate-600"]:not(.ej-entreno-check):not(.comida-check-dash):not(.sup-check-dash):not(.eg-switch),
a[class*="border-slate-600"].rounded-lg {
  border-color: var(--eg-border-strong);
  color: var(--eg-text-2);
}

button[class*="border-slate-600"]:not(.ej-entreno-check):not(.comida-check-dash):not(.sup-check-dash):not(.eg-switch):hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--eg-text);
}

/* Éxito / peligro (tonos suaves, no bloques saturados) */
.btn-success,
.eg-btn--success,
button.bg-emerald-500\/10,
a.bg-emerald-500\/10,
button.bg-emerald-500\/20,
a.bg-emerald-500\/20 {
  background-color: var(--eg-success-soft);
  color: var(--eg-success-text);
  border: 1px solid var(--eg-success-border);
}

.btn-success:hover,
.eg-btn--success:hover,
button.bg-emerald-500\/10:hover,
button.bg-emerald-500\/20:hover {
  background-color: rgba(52, 211, 153, 0.18);
}

.btn-danger,
.eg-btn--danger,
button.bg-red-500\/20,
button.bg-red-500\/10,
button.bg-rose-500\/10,
button.bg-rose-500\/20,
a.bg-red-500\/20 {
  background-color: var(--eg-danger-soft);
  color: var(--eg-danger-text);
  border: 1px solid var(--eg-danger-border);
}

.btn-danger:hover,
.eg-btn--danger:hover,
button.bg-red-500\/20:hover,
button.bg-red-500\/10:hover,
button.bg-rose-500\/10:hover,
button.bg-rose-500\/20:hover {
  background-color: rgba(248, 113, 113, 0.18);
  color: #FECACA;
}

button.bg-red-500,
button.bg-red-600,
a.bg-red-500 {
  background-color: #DC2626;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: var(--eg-radius-sm);
  font-weight: 650;
}

button.bg-red-500:hover,
button.bg-red-600:hover,
a.bg-red-500:hover {
  background-color: #EF4444;
}

.btn-ghost,
a.btn-ghost,
.eg-btn--ghost {
  background: transparent;
  color: var(--eg-text-2);
  border: 1px solid var(--eg-border-strong);
}

.btn-ghost:hover,
a.btn-ghost:hover,
.eg-btn--ghost:hover {
  background: var(--eg-hover);
  color: var(--eg-text);
}

.btn-sm,
.eg-btn--sm {
  min-height: var(--eg-btn-h-sm);
  padding-inline: 0.75rem;
  font-size: var(--eg-fs-sm);
}

.eg-btn--lg {
  min-height: var(--eg-btn-h-lg);
  padding-inline: 1.25rem;
  font-size: var(--eg-fs-md);
}

.eg-btn {
  padding-inline: 1rem;
}

/* Presión */
:is(.btn, .eg-btn, a.bg-primary, button.bg-primary, button.bg-primary\/10, a.bg-primary\/10):active:not(:disabled) {
  transform: translateY(1px);
}

/* Botón de icono */
.eg-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--eg-icon-btn);
  height: var(--eg-icon-btn);
  min-height: var(--eg-icon-btn);
  padding: 0;
  border-radius: var(--eg-radius-md);
  border: 1px solid transparent;
  color: var(--eg-text-muted);
  background: transparent;
  transition: background-color var(--eg-dur-fast) var(--eg-ease), color var(--eg-dur-fast) var(--eg-ease), border-color var(--eg-dur-fast) var(--eg-ease);
}

.eg-btn-icon:hover {
  color: var(--eg-text);
  background: var(--eg-hover-strong);
  border-color: var(--eg-border);
}

/* Botones de solo ícono en contenido y modales: tamaño mínimo y radio comunes */
:is(main, .fixed.inset-0) button:has(> .material-symbols-outlined:only-child):not(.eg-routine-ico):not(.eg-row-check-btn):not(.ej-entreno-check):not(.comida-check):not(.sup-check):not(.comida-check-dash):not(.sup-check-dash):not(.eg-home-row-check):not(.eg-switch):not([role="switch"]):not(.eg-profile-avatar-edit):not(.eg-routine-head-edit):not(.eg-lib-instr-toggle):not(.bg-primary):not(.eg-page-actions > *):not(.eg-admin-toolbar-actions > *):not(.eg-prof-toolbar-actions > *) {
  min-width: 2rem;
  min-height: 2rem;
  border-radius: var(--eg-radius-md);
}

/* Enlaces de solo ícono dentro de celdas/grupos de acción: mismo tamaño que los botones */
td a:has(> .material-symbols-outlined:only-child),
:is(.eg-admin-action-group, .eg-prof-action-group) > a:has(> .material-symbols-outlined:only-child) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: var(--eg-radius-md);
  vertical-align: middle;
}

td.eg-col-actions > :is(a, button) + :is(a, button) {
  margin-left: 0.25rem;
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) :is(td, th).eg-col-actions {
  padding-inline: 0.625rem !important;
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) td.eg-col-actions :is(.eg-admin-action-group, .eg-prof-action-group) {
  gap: 0.125rem;
}

/* Links de acción */
a.link-action,
.eg-link-action,
.eg-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  color: var(--eg-accent-text);
  font-size: var(--eg-fs-sm);
  font-weight: 650;
  text-decoration: none;
  text-underline-offset: 3px;
}

a.link-action:hover,
.eg-link-action:hover,
.eg-action-link:hover {
  text-decoration: underline;
}

/* Deshabilitado y carga */
button:disabled,
.btn:disabled,
.btn.disabled,
a.disabled,
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

button[data-submit-loading]:disabled,
.is-loading {
  cursor: progress;
}

/* ═══════════════════════════════════════
   6. FORMULARIOS
   ═══════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
select,
textarea,
.form-control,
.form-select {
  background-color: var(--eg-field);
  border: 1px solid var(--eg-border-field);
  color: var(--eg-text);
  border-radius: var(--eg-radius-md);
  min-height: var(--eg-control-h);
  font-size: var(--eg-fs-base);
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--eg-dur-fast) var(--eg-ease), box-shadow var(--eg-dur-fast) var(--eg-ease), background-color var(--eg-dur-fast) var(--eg-ease);
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
html.dark select,
html.dark textarea {
  background-color: var(--eg-field);
  border-color: var(--eg-border-field);
  color: var(--eg-text);
}

textarea {
  min-height: 5.5rem;
  line-height: 1.5;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]):hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--eg-border-field-hover);
}

input::placeholder,
textarea::placeholder {
  color: var(--eg-placeholder);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
html.dark input:not([type="checkbox"]):not([type="radio"]):focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--eg-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--eg-focus-ring);
}

/* Multi-select: la caja (borde, fondo y anillo de foco) es .egym-ms-tags; el input interno va limpio */
.egym-ms .egym-ms-tags input.egym-ms-input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]),
html.dark .egym-ms .egym-ms-tags input.egym-ms-input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]) {
  align-self: stretch;
  min-height: calc(var(--eg-control-h) - 0.625rem);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly]:not([type="checkbox"]):not([type="radio"]) {
  opacity: 0.62;
  cursor: not-allowed;
}

select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23A3ADBC'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1.1rem;
}

select option {
  background-color: var(--eg-surface-2);
  color: var(--eg-text);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--eg-accent);
  width: 1.125rem;
  height: 1.125rem;
}

/* Fotos de tamaño fijo (avatares, miniaturas): con max-width:100% la tabla las podía
   comprimir hasta 2 px de ancho cuando quedaban pocas filas (p. ej. al filtrar) */
img:is([class*="size-"], .eg-ex-thumb, .eg-rx__thumb),
.eg-avatar-fallback {
  max-width: none;
  flex-shrink: 0;
}

/* El plugin forms de Tailwind las dibuja blancas: en tema oscuro, fondo de campo y borde de campo */
html.dark input:is([type="checkbox"], [type="radio"]):not(:checked) {
  background-color: var(--eg-field);
  border-color: var(--eg-border-field);
}

html.dark input:is([type="checkbox"], [type="radio"]):not([class*="text-"]) {
  color: var(--eg-accent);
}

input[type="file"] {
  max-width: 100%;
  font-size: var(--eg-fs-sm);
  color: var(--eg-text-muted);
}

input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--eg-radius-md);
  background: var(--eg-surface-2);
  color: var(--eg-text);
  font: 600 var(--eg-fs-sm) / 1.2 var(--eg-font-sans);
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--eg-surface-3);
}

label,
.form-label {
  color: var(--eg-text-2);
  font-size: var(--eg-fs-sm);
  font-weight: 650;
  letter-spacing: 0;
}

label.uppercase,
.form-label.uppercase {
  font-size: var(--eg-fs-xs);
  letter-spacing: 0.06em;
}

.eg-help-text,
.form-text,
.help-text {
  margin-top: 0.375rem;
  font-size: var(--eg-fs-xs);
  line-height: 1.45;
  color: var(--eg-text-soft);
}

.text-danger,
.error-msg,
.invalid-feedback,
.form-error,
.eg-error-text {
  color: var(--eg-danger-text);
  font-size: var(--eg-fs-xs);
  line-height: 1.45;
}

.eg-error-text {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.eg-error-text::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: var(--eg-radius-pill);
  background: var(--eg-danger-soft);
  border: 1px solid var(--eg-danger-border);
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid,
input.eg-invalid,
.eg-field-error,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: var(--eg-danger);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
}

input.is-valid,
select.is-valid,
textarea.is-valid,
.eg-field-success {
  border-color: rgba(52, 211, 153, 0.7);
}

/* Campo con etiqueta, ayuda y error (markup nuevo) */
.eg-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.eg-field > label {
  margin: 0;
}

.eg-field .eg-help-text,
.eg-field .eg-error-text {
  margin-top: 0;
}

/* ═══════════════════════════════════════
   7. TABLAS
   ═══════════════════════════════════════ */
table,
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--eg-fs-sm);
}

thead th,
.table thead th {
  background-color: var(--eg-surface-2);
  color: var(--eg-text-soft);
  font-size: var(--eg-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--eg-border);
  white-space: nowrap;
  vertical-align: middle;
}

thead th > button {
  min-height: 2rem;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

tbody td,
.table td {
  border-bottom: 1px solid var(--eg-border-soft);
  vertical-align: middle;
  color: var(--eg-text-2);
}

tbody tr:last-child td {
  border-bottom-color: transparent;
}

tbody tr {
  transition: background-color 0.12s var(--eg-ease);
}

tbody tr:hover > td {
  background-color: rgba(255, 255, 255, 0.03);
}

td,
.table td {
  font-variant-numeric: tabular-nums;
}

/* Contenedor estándar de tabla: borde, radio y scroll interno */
.eg-prof-table,
.eg-responsive-table,
.eg-admin-table,
.eg-premium-table {
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  background-color: var(--eg-surface);
  background-image: none;
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
  box-shadow: var(--eg-shadow-card);
}

.eg-prof-table > .overflow-x-auto,
.eg-responsive-table > .overflow-x-auto,
.eg-admin-table > .overflow-x-auto,
.eg-premium-table > .overflow-x-auto,
.eg-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: inherit;
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) table {
  width: 100%;
  min-width: 0;
  font-size: var(--eg-fs-sm);
  border-collapse: separate;
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) thead th {
  height: 2.75rem;
  padding: 0.625rem 1rem !important;
  background-color: var(--eg-surface-2);
  color: var(--eg-text-soft);
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) thead th:first-child {
  border-top-left-radius: calc(var(--eg-radius) - 1px);
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) thead th:last-child {
  border-top-right-radius: calc(var(--eg-radius) - 1px);
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) tbody td {
  height: 3rem;
  padding: 0.5rem 1rem !important;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) tbody td[colspan] {
  max-width: none;
  white-space: normal;
}

/* Última columna (Acciones) fija al hacer scroll horizontal */
:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) table > thead > tr > th:last-child,
:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) table > tbody > tr > td:last-child:not([colspan]),
.eg-col-actions {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 1%;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
  background-color: var(--eg-surface);
  box-shadow: inset 1px 0 0 var(--eg-border-soft), -10px 0 12px -10px rgba(0, 0, 0, 0.7);
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) table > thead > tr > th:last-child,
thead .eg-col-actions {
  z-index: 3;
  background-color: var(--eg-surface-2);
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) table > tbody > tr:hover > td:last-child:not([colspan]),
:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) table > tbody > tr:hover > td.eg-col-actions {
  background-color: color-mix(in srgb, var(--eg-surface) 97%, #ffffff);
}

.eg-table-no-sticky table > thead > tr > th:last-child,
.eg-table-no-sticky table > tbody > tr > td:last-child,
.eg-table-no-sticky table > tbody > tr:hover > td:last-child {
  position: static;
  box-shadow: none;
  background-color: transparent;
}

.eg-table-no-sticky table > thead > tr > th:last-child {
  background-color: var(--eg-surface-2);
}

:is(.eg-prof-table, .eg-responsive-table, .eg-admin-table, .eg-premium-table) tbody td :is(.eg-compact-badge, .eg-prof-status, .eg-payment-status, .eg-admin-status) {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pie de tabla (paginado) */
:is(.eg-prof-table, .eg-admin-table, .eg-premium-table) > .border-t,
.eg-prof-table .eg-prof-table-foot {
  background-color: var(--eg-surface);
  border-color: var(--eg-border);
  border-radius: 0 0 var(--eg-radius) var(--eg-radius);
}

/* Contenedores de tabla sin clase estándar */
main .rounded-xl:has(> .overflow-x-auto > table):not(.eg-prof-table):not(.eg-admin-table):not(.eg-premium-table):not(.eg-responsive-table),
main .rounded-xl:has(> table) {
  background-color: var(--eg-surface);
  border-color: var(--eg-border);
}

/* Grupos de acciones: envuelven en paneles; en celdas de tabla quedan en una fila */
.eg-prof-action-group,
.eg-admin-action-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

td .eg-prof-action-group,
td .eg-admin-action-group,
.eg-col-actions .eg-prof-action-group,
.eg-col-actions .eg-admin-action-group {
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.eg-prof-action-group > a,
.eg-prof-action-group > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--eg-radius-sm);
  border: 1px solid var(--eg-border);
  background: var(--eg-surface-2);
  color: var(--eg-text-2);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
  transition: border-color 0.12s var(--eg-ease), color 0.12s var(--eg-ease), background-color 0.12s var(--eg-ease);
}

.eg-prof-action-group > a:hover,
.eg-prof-action-group > button:hover {
  border-color: var(--eg-accent-border);
  color: var(--eg-accent);
  background: var(--eg-accent-soft);
}

.eg-prof-action-group > :is(a, button).eg-action-primary {
  border-color: var(--eg-accent-border);
  color: var(--eg-accent);
}

.eg-admin-action-group > a,
.eg-admin-action-group > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: var(--eg-radius-sm);
  transition: border-color 0.12s var(--eg-ease), color 0.12s var(--eg-ease), background-color 0.12s var(--eg-ease);
}

.eg-admin-action-group > a:hover,
.eg-admin-action-group > button:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Usuarios admin: todas las acciones a la vista, compactas */
#tabla-usuarios .eg-admin-action-group--dense {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.05rem;
}

#tabla-usuarios .eg-admin-action-group--dense > :is(a, button),
#tabla-usuarios .eg-admin-action-group--dense > :is(a, button).eg-icon-only {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.1rem;
  font-size: 1.25rem;
  line-height: 1;
  color: #94a3b8;
}

#tabla-usuarios .eg-admin-action-group--dense > :is(a, button):hover {
  color: var(--eg-accent, #14b8a6);
}

#tabla-usuarios .eg-admin-action-group--dense > .btn-login-as:hover {
  color: #34d399;
}

#tabla-usuarios .eg-admin-action-group--dense > .btn-borrar {
  color: #f87171;
}

#tabla-usuarios :is(th, td).eg-col-actions {
  min-width: 10.25rem;
  padding-inline: 0.5rem !important;
}

/* Menú de acciones secundarias por fila (eg-row-menu.js) */
.eg-row-menu {
  position: relative;
  display: inline-flex;
}

.eg-row-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: var(--eg-radius-md);
  color: var(--eg-text-muted);
  transition: background-color var(--eg-dur-fast) var(--eg-ease), color var(--eg-dur-fast) var(--eg-ease);
}

.eg-row-menu__toggle:hover,
.eg-row-menu__toggle[aria-expanded="true"] {
  background: var(--eg-hover-strong);
  color: var(--eg-text);
}

.eg-row-menu__panel {
  z-index: 70;
  min-width: 13rem;
  padding: 0.375rem;
  border-radius: var(--eg-radius-md);
  border: 1px solid var(--eg-border-strong);
  background: var(--eg-surface-3);
  box-shadow: var(--eg-shadow-raised);
}

.eg-row-menu__panel[hidden] {
  display: none;
}

td.eg-row-menu-host--open,
th.eg-row-menu-host--open {
  z-index: 30 !important;
}

.eg-row-menu__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--eg-radius-sm);
  color: var(--eg-text);
  font-size: var(--eg-fs-sm);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.eg-row-menu__item:hover,
.eg-row-menu__item:focus-visible {
  background: var(--eg-hover-strong);
}

.eg-row-menu__item .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--eg-text-muted);
}

.eg-row-menu__item.is-danger,
.eg-row-menu__item.is-danger .material-symbols-outlined {
  color: var(--eg-danger-text);
}

.eg-row-menu__item.is-danger:hover {
  background: var(--eg-danger-soft);
}

@media (pointer: coarse), (max-width: 1023px) {
  .eg-row-menu__toggle {
    min-width: 2.5rem;
    min-height: 2.5rem;
  }

  .eg-row-menu__item {
    min-height: 2.75rem;
  }
}

/* Tarjetas móviles (listados profesor) */
.eg-prof-mobile-cards {
  display: none;
}

/* ═══════════════════════════════════════
   8. TARJETAS, PANELES Y KPIs
   ═══════════════════════════════════════ */
.card,
.panel,
.eg-card,
.admin-card,
.eg-admin-card,
.eg-prof-panel,
.eg-plan-card,
.eg-admin-form,
.eg-admin-config-panel,
.eg-premium-form.eg-prof-panel,
.eg-dash-section,
.eg-home-panel {
  background-color: var(--eg-surface);
  background-image: none;
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
  box-shadow: var(--eg-shadow-card);
}

a:is(.eg-card, .eg-home-panel, .eg-admin-kpi, .eg-kpi) {
  transition: border-color var(--eg-dur-fast) var(--eg-ease), background-color var(--eg-dur-fast) var(--eg-ease);
}

a:is(.eg-card, .eg-home-panel, .eg-admin-kpi, .eg-kpi):hover {
  border-color: var(--eg-border-strong);
  background-color: color-mix(in srgb, var(--eg-surface) 94%, #ffffff);
}

.eg-admin-card {
  padding: 1.25rem;
}

.eg-admin-card h2,
.eg-dash-section h2,
.eg-dash-section h3 {
  font-size: var(--eg-fs-lg);
  font-weight: 700;
  letter-spacing: -0.012em;
}

.eg-dash-section {
  padding: 1rem;
}

.eg-prof-panel :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.eg-admin-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.eg-admin-config-panel :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background-color: var(--eg-field);
  border-color: var(--eg-border-field);
}

/* Contenedor de tabla genérico */
.overflow-hidden.rounded-xl:has(table) {
  background-color: var(--eg-surface);
  border-color: var(--eg-border);
}

/* KPI admin */
.eg-admin-kpi {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: 1.125rem 1.25rem;
  background-color: var(--eg-surface);
  background-image: none;
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
  box-shadow: var(--eg-shadow-card);
}

.eg-admin-kpi .eg-admin-kpi-label {
  margin: 0 0 0.5rem;
  font-size: var(--eg-fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--eg-text-muted);
}

.eg-admin-kpi .eg-admin-kpi-value {
  margin: 0;
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-kpi);
  font-weight: 600;
  line-height: var(--eg-lh-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--eg-text);
}

.eg-admin-kpi .eg-admin-kpi-meta {
  margin: 0.5rem 0 0;
  font-size: var(--eg-fs-xs);
  line-height: 1.4;
  color: var(--eg-text-soft);
}

.eg-admin-kpi .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--eg-accent);
}

/* Encabezado de KPI: etiqueta + ícono en chip */
.eg-kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.eg-kpi-head > :is(.eg-admin-kpi-label, .eg-kpi-label) {
  min-width: 0;
  padding-top: 0.25rem;
}

.material-symbols-outlined.eg-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  margin: -0.125rem -0.25rem 0 0;
  border-radius: var(--eg-radius-md);
  background: var(--eg-accent-soft);
  color: var(--eg-accent);
  font-size: 1.125rem;
}

.material-symbols-outlined.eg-kpi-icon--warn {
  background: var(--eg-warning-soft);
  color: var(--eg-warning);
}

/* Etiquetas del eje X de los gráficos de línea: legibles y sin cortarse */
[id$="-labels"].flex.justify-between > span.text-\[10px\] {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--eg-text-soft);
}

.eg-admin-card:has([id$="-labels"]) {
  container-type: inline-size;
}

@container (max-width: 36rem) {
  [id$="-labels"].flex.justify-between > span:nth-child(even) {
    visibility: hidden;
    width: 0;
    overflow: hidden;
  }
}

.eg-admin-kpi--link {
  justify-content: center;
}

.eg-admin-warning-panel {
  border: 1px solid var(--eg-warning-border);
  background: var(--eg-warning-soft);
  border-radius: var(--eg-radius-sm);
  color: #FDE68A;
}

.eg-admin-preview,
.eg-admin-map-preview {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: 0;
}

.eg-admin-preview .eg-ex-thumb,
.eg-admin-map-preview .eg-ex-thumb {
  margin: 0;
}

/* Resumen de adherencia (profesor) */
#adh-resumen > div {
  border-color: var(--eg-border);
  background-color: var(--eg-surface);
  border-radius: var(--eg-radius);
}

#adh-resumen > div p:first-child {
  font-size: var(--eg-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
}

/* KPI profesor */
.profesor-app .eg-kpi,
.profesor-app .eg-home-stat {
  padding: 1.125rem 1.25rem;
  border-radius: var(--eg-radius);
  background-color: var(--eg-surface);
  background-image: none;
  border: 1px solid var(--eg-border);
  box-shadow: var(--eg-shadow-card);
}

.profesor-app .eg-kpi-label,
.profesor-app .eg-home-stat .eg-kpi-label {
  margin: 0;
  font-size: var(--eg-fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--eg-text-muted);
}

.profesor-app .eg-kpi-value {
  margin-top: 0.5rem;
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-kpi);
  font-weight: 600;
  line-height: var(--eg-lh-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--eg-text);
}

.profesor-app .eg-kpi .material-symbols-outlined {
  color: var(--eg-accent);
}

.profesor-app .eg-kpi-meta {
  margin-top: 0.375rem;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

.profesor-app .eg-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--eg-radius-sm);
  border: 1px solid var(--eg-border-soft);
  background: var(--eg-surface-2);
  transition: border-color 0.12s var(--eg-ease), background-color 0.12s var(--eg-ease);
}

.profesor-app .eg-list-row:hover {
  border-color: var(--eg-border-strong);
  background: var(--eg-surface-3);
}

/* ═══════════════════════════════════════
   9. BADGES Y ESTADOS
   ═══════════════════════════════════════ */
.eg-badge,
.badge,
.eg-compact-badge,
.eg-prof-status,
.eg-payment-status,
.eg-admin-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1875rem 0.625rem;
  min-height: 1.5rem;
  border-radius: var(--eg-radius-pill);
  border: 1px solid var(--eg-border);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--eg-text-muted);
  font-size: var(--eg-fs-xs);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
}

.eg-badge-success, .badge-success,
.eg-compact-badge--ok, .eg-prof-status--ok, .eg-payment-status--ok, .eg-admin-status--ok {
  background-color: var(--eg-success-soft);
  border-color: var(--eg-success-border);
  color: var(--eg-success-text);
}

.eg-badge-warning, .badge-warning,
.eg-compact-badge--warn, .eg-prof-status--warn, .eg-payment-status--warn, .eg-admin-status--warn {
  background-color: var(--eg-warning-soft);
  border-color: var(--eg-warning-border);
  color: var(--eg-warning-text);
}

.eg-badge-danger, .badge-danger,
.eg-compact-badge--danger, .eg-prof-status--danger, .eg-payment-status--danger, .eg-admin-status--danger {
  background-color: var(--eg-danger-soft);
  border-color: var(--eg-danger-border);
  color: var(--eg-danger-text);
}

.eg-compact-badge--info, .eg-prof-status--info, .eg-payment-status--info, .eg-admin-status--info {
  background-color: var(--eg-accent-soft);
  border-color: var(--eg-accent-border);
  color: var(--eg-accent-text);
}

/* Punto de estado opcional (el texto sigue indicando el estado) */
.eg-badge-dot::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--eg-radius-pill);
  background: currentColor;
  flex-shrink: 0;
}

.eg-badge-muted,
.eg-compact-badge--muted, .eg-prof-status--muted, .eg-admin-status--muted {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--eg-border);
  color: var(--eg-text-soft);
}

.eg-payment-status .material-symbols-outlined {
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════
   10. ALERTAS Y BANNERS
   ═══════════════════════════════════════ */
.eg-alert,
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--eg-radius-md);
  border: 1px solid var(--eg-border);
  background-color: var(--eg-surface-2);
  color: var(--eg-text);
  font-size: var(--eg-fs-base);
  line-height: 1.5;
}

.eg-alert > .material-symbols-outlined:first-child,
.alert > .material-symbols-outlined:first-child {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

.eg-alert-title {
  display: block;
  margin-bottom: 0.125rem;
  font-weight: 700;
  color: var(--eg-text);
}

.eg-alert-success, .alert-success {
  background-color: var(--eg-success-soft);
  border-color: var(--eg-success-border);
  color: #A7F3D0;
}

.eg-alert-success > .material-symbols-outlined:first-child { color: var(--eg-success); }

.eg-alert-warning, .alert-warning {
  background-color: var(--eg-warning-soft);
  border-color: var(--eg-warning-border);
  color: #FDE68A;
}

.eg-alert-warning > .material-symbols-outlined:first-child { color: var(--eg-warning); }

.eg-alert-danger, .alert-danger {
  background-color: var(--eg-danger-soft);
  border-color: var(--eg-danger-border);
  color: #FECACA;
}

.eg-alert-danger > .material-symbols-outlined:first-child { color: var(--eg-danger); }

.eg-alert-info, .alert-info {
  background-color: var(--eg-info-soft);
  border-color: var(--eg-info-border);
  color: #BFDBFE;
}

.eg-alert-info > .material-symbols-outlined:first-child { color: var(--eg-info); }

/* ═══════════════════════════════════════
   11. TABS, FILTROS Y BARRAS DE HERRAMIENTAS
   ═══════════════════════════════════════ */

/* Barra de búsqueda + acciones (control bar) */
.eg-prof-toolbar,
.eg-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 0;
  padding: 0.625rem 0.75rem;
  background-color: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.eg-prof-toolbar .eg-prof-toolbar-search,
.eg-admin-toolbar .eg-admin-toolbar-search {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 32rem;
}

.eg-prof-toolbar-actions,
.eg-admin-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.eg-prof-toolbar .eg-prof-toolbar-actions > :is(button, a),
.eg-admin-toolbar .eg-admin-toolbar-actions > :is(button, a) {
  min-height: var(--eg-btn-h);
  padding-inline: 0.875rem;
  font-size: var(--eg-fs-sm);
}

/* Chips de filtro */
.eg-filter-bar,
.eg-admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.eg-filter-bar :is(.filtro-alumno, .adh-filtro),
.eg-filter-bar > button,
.eg-admin-filter-bar .filtro-usuario,
.eg-admin-filter-bar > button:not(.bg-primary),
.eg-admin-filter-bar > a:not(.bg-primary) {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--eg-border-strong);
  background-color: transparent;
  color: var(--eg-text-muted);
  font-size: var(--eg-fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.12s var(--eg-ease), color 0.12s var(--eg-ease), background-color 0.12s var(--eg-ease);
}

.eg-filter-bar :is(.filtro-alumno, .adh-filtro):hover,
.eg-filter-bar > button:hover,
.eg-admin-filter-bar .filtro-usuario:hover,
.eg-admin-filter-bar > button:not(.bg-primary):hover,
.eg-admin-filter-bar > a:not(.bg-primary):hover {
  color: var(--eg-text);
  border-color: rgba(255, 255, 255, 0.22);
}

.eg-filter-bar :is(.filtro-alumno, .adh-filtro).border-primary,
.eg-filter-bar > button.border-primary,
.eg-filter-bar .filtro-alumno[aria-pressed="true"],
.eg-admin-filter-bar .filtro-usuario.border-primary,
.eg-admin-filter-bar > a.border-primary,
.eg-admin-filter-bar > button.border-primary,
.eg-filter-bar [aria-pressed="true"],
.eg-admin-filter-bar [aria-pressed="true"],
.tab-btn.bg-primary\/20,
.tab-btn.border-primary\/30 {
  border-color: var(--eg-accent-border);
  color: var(--eg-accent-text);
  background-color: var(--eg-accent-soft);
}

.eg-filter-bar :is(select, input[type="text"], input[type="search"], input:not([type])),
.eg-admin-filter-bar :is(select, input[type="text"], input[type="search"], input:not([type])) {
  min-height: 2.25rem;
  font-size: var(--eg-fs-sm);
}

/* Tabs subrayadas */
.eg-admin-tabs,
.eg-student-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--eg-border);
}

.eg-admin-tabs > :is(a, button, span),
.eg-student-tabs > :is(a, span) {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  min-height: 2.5rem;
  padding: 0.5rem 0.875rem;
  margin-bottom: -1px;
  font-size: var(--eg-fs-sm);
  font-weight: 600;
  color: var(--eg-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.12s var(--eg-ease), border-color 0.12s var(--eg-ease);
}

.eg-admin-tabs > :is(a, button):hover,
.eg-student-tabs > a:hover {
  color: var(--eg-text);
}

.eg-admin-tabs > :is(a, button, span).text-primary,
.eg-admin-tabs > :is(a, button).border-primary,
.eg-admin-tabs > [aria-current="page"],
.eg-student-tabs > :is(a, span).text-primary,
.eg-student-tabs > :is(a, span).border-primary {
  color: var(--eg-text);
  border-bottom-color: var(--eg-accent);
  background: transparent;
  font-weight: 700;
}

.eg-admin-tabs > :is(a, button, span).text-primary .material-symbols-outlined,
.eg-student-tabs > :is(a, span).text-primary .material-symbols-outlined {
  color: var(--eg-accent);
}

/* Control segmentado (rangos de fechas, etc.) */
.eg-segmented {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: var(--eg-radius-md);
  border: 1px solid var(--eg-border);
  background: var(--eg-surface);
}

.eg-segmented > :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.25rem 0.875rem;
  border-radius: var(--eg-radius-sm);
  color: var(--eg-text-muted);
  font-size: var(--eg-fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.eg-segmented > :is(a, button):hover {
  color: var(--eg-text);
  background: rgba(255, 255, 255, 0.05);
}

.eg-segmented > :is(a, button)[aria-current="true"],
.eg-segmented > :is(a, button).is-active {
  background: var(--eg-surface-3);
  color: var(--eg-text);
  box-shadow: inset 0 0 0 1px var(--eg-border-strong);
}

/* ═══════════════════════════════════════
   12. MODALES Y HOJAS
   ═══════════════════════════════════════ */
.fixed.inset-0.bg-black\/60,
.fixed.inset-0.bg-black\/50,
.fixed.inset-0.bg-black\/70,
.fixed.inset-0[class*="bg-black/"],
#modal-agregar-ej > .modal-agregar-backdrop {
  background-color: var(--eg-overlay);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* El contenedor del modal no debe tapar la rutina de atrás */
#modal-agregar-ej.fixed.inset-0,
#modal-editar-ej.fixed.inset-0 {
  background: transparent;
}

/* Panel del modal: superficie elevada, radio grande, sombra de capa */
.fixed.inset-0[class*="z-"] > div.fixed:not(.inset-0)[class*="bg-"]:not([class*="bg-black"]),
.fixed.inset-0[class*="z-"] > div.relative[class*="bg-"]:not([class*="bg-black"]),
.fixed.inset-0[class*="z-"] > div.fixed.inset-x-4,
.modal .modal-content {
  background-color: var(--eg-surface);
  background-image: none;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--eg-radius-lg);
  box-shadow: var(--eg-shadow-overlay);
  color: var(--eg-text-2);
}

/* Paneles centrados sin alto máximo: entran en el viewport y desplazan */
.fixed.inset-0[class*="z-"] > div.fixed.inset-x-4:not([class*="max-h-"]):not(.eg-exercise-modal) {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Paneles centrados con -translate: no superar el ancho en escritorio */
.fixed.inset-0[class*="z-"] > div.fixed.inset-x-4:not([class*="max-w-"]) {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.fixed.inset-0[class*="z-"] > div.fixed:not(.inset-0) > .border-b,
.modal .modal-header {
  border-color: var(--eg-border);
}

.fixed.inset-0[class*="z-"] > div.fixed:not(.inset-0) > .border-t,
.modal .modal-footer {
  border-color: var(--eg-border);
}

.fixed.inset-0[class*="z-"] > div.fixed:not(.inset-0) h3,
.modal .modal-title {
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-xl);
  font-weight: 650;
  line-height: var(--eg-lh-snug);
  letter-spacing: -0.02em;
  color: var(--eg-text);
}

/* Botón cerrar de modales: área de 40px y foco claro */
.fixed.inset-0[class*="z-"] :is(button[id$="-close"], button[id*="close"], button[aria-label^="Cerrar"]):has(> .material-symbols-outlined:only-child) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: var(--eg-radius-md);
  color: var(--eg-text-muted);
}

.fixed.inset-0[class*="z-"] :is(button[id$="-close"], button[id*="close"], button[aria-label^="Cerrar"]):has(> .material-symbols-outlined:only-child):hover {
  background: var(--eg-hover-strong);
  color: var(--eg-text);
}

/* Lista de notificaciones (header de admin, profesor y editor) */
#notif-list > li {
  position: relative;
  border-radius: var(--eg-radius-md);
  border: 1px solid var(--eg-border) !important;
  background: var(--eg-surface-2) !important;
  transition: border-color var(--eg-dur-fast) var(--eg-ease), background-color var(--eg-dur-fast) var(--eg-ease);
}

#notif-list > li:hover {
  border-color: var(--eg-border-strong) !important;
  background: var(--eg-surface-3) !important;
}

#notif-list > li.border-2 {
  border-color: var(--eg-accent-border) !important;
  background: color-mix(in srgb, var(--eg-surface-2) 88%, var(--eg-accent)) !important;
  padding-left: 1.125rem;
}

#notif-list > li.border-2::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 1.05rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--eg-radius-pill);
  background: var(--eg-accent);
}

.detail-modal-tab {
  transition: color 0.15s var(--eg-ease), border-color 0.15s var(--eg-ease);
}

.detail-modal-tab.border-primary,
#detailModal .detail-modal-tab.border-primary {
  border-color: transparent;
  border-bottom-color: var(--eg-accent);
  color: var(--eg-text);
  background: transparent;
}

/* Bootstrap modal (media.php) */
.modal .modal-content .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.7;
}

/* ═══════════════════════════════════════
   13. TOASTS
   ═══════════════════════════════════════ */
.eg-toast,
#planes-toast,
.toast .toast-body,
#toast .toast-body {
  border-radius: var(--eg-radius-md);
  border: 1px solid var(--eg-border-strong);
  background-color: var(--eg-surface-3);
  color: var(--eg-text);
  font-size: var(--eg-fs-base);
  font-weight: 600;
  box-shadow: var(--eg-shadow-overlay);
}

#planes-toast.success,
#planes-toast.eg-toast-success,
.toast.eg-toast-success {
  border-color: var(--eg-success-border);
  color: #A7F3D0;
}

#planes-toast.danger,
#planes-toast.error,
#planes-toast.eg-toast-danger {
  border-color: var(--eg-danger-border);
  color: #FECACA;
}

/* Toast global (modal-utils.js): sobre la barra inferior en móvil, abajo a la derecha en escritorio */
#egym-toast {
  left: 1rem;
  right: 1rem;
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
  #egym-toast {
    left: auto;
    right: 1.5rem;
    width: min(26rem, calc(100vw - 3rem));
  }
}

@media (min-width: 1024px) {
  #egym-toast {
    bottom: 1.5rem;
  }
}

#egym-toast-inner {
  border-radius: var(--eg-radius-md);
  background: var(--eg-surface-3);
  border-color: var(--eg-border-strong);
  box-shadow: var(--eg-shadow-overlay);
}

#egym-toast-inner.eg-toast-success {
  border-color: var(--eg-success-border);
}

#egym-toast-inner.eg-toast-success #egym-toast-icon {
  color: var(--eg-success);
}

#egym-toast-inner.eg-toast-danger {
  border-color: var(--eg-danger-border);
}

#egym-toast-inner.eg-toast-danger #egym-toast-icon {
  color: var(--eg-danger);
}

#egym-toast-msg {
  color: var(--eg-text);
  font-weight: 600;
}

/* Diálogos de modal-utils.js (showAlert / showConfirm / showPrompt) */
.eg-dialog > .fixed.inset-0 {
  background-color: var(--eg-overlay);
}

.eg-dialog__panel {
  padding: 1.5rem;
  border-radius: var(--eg-radius-lg);
  border-color: var(--eg-border-strong);
  background-color: var(--eg-surface);
  box-shadow: var(--eg-shadow-overlay);
}

.eg-dialog__panel h3 {
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-xl);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--eg-text);
}

.eg-dialog__panel h3 + p,
.eg-dialog__panel h3 + div {
  color: var(--eg-text-2);
  font-size: var(--eg-fs-base);
  line-height: 1.55;
}

.eg-dialog__actions {
  gap: 0.5rem;
}

.eg-dialog__actions > button {
  min-height: var(--eg-btn-h);
  padding-inline: 1.125rem;
  border-radius: var(--eg-radius-md);
  font-weight: 650;
}

.eg-dialog__actions > button[data-egym-cancel],
.eg-dialog__actions > button[data-egym-prompt-cancel] {
  border-color: var(--eg-border-strong);
  background: var(--eg-surface-2);
  color: var(--eg-text);
}

.eg-dialog__actions > button[data-egym-cancel]:hover,
.eg-dialog__actions > button[data-egym-prompt-cancel]:hover {
  background: var(--eg-surface-3);
}

.eg-dialog__btn--danger {
  background-color: #DC2626;
  color: #FFFFFF;
}

.eg-dialog__btn--danger:hover {
  background-color: #B91C1C;
}

.eg-dialog__btn--warning,
.eg-dialog__btn--warning:hover {
  background-color: var(--eg-warning);
  color: #1F1500;
}

@media (max-width: 480px) {
  .eg-dialog__actions {
    flex-direction: column-reverse;
  }

  .eg-dialog__actions > button {
    width: 100%;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════
   14. ESTADOS: vacío, carga, skeleton
   ═══════════════════════════════════════ */
.eg-empty-state,
.eg-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 2.25rem 1.25rem;
  text-align: center;
  border-radius: var(--eg-radius);
  border: 1px dashed var(--eg-border-strong);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--eg-text-muted);
}

.eg-empty-state .eg-empty-icon,
.eg-empty-state .material-symbols-outlined.eg-empty-icon,
.eg-empty-state > .material-symbols-outlined:first-child,
.eg-error-state > .material-symbols-outlined:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
  border-radius: var(--eg-radius-pill);
  border: 1px solid var(--eg-border);
  background: var(--eg-surface-2);
  font-size: 1.5rem;
  color: var(--eg-text-muted);
}

.eg-error-state {
  border-style: solid;
  border-color: var(--eg-danger-border);
  background-color: var(--eg-danger-soft);
}

.eg-error-state > .material-symbols-outlined:first-child {
  border-color: var(--eg-danger-border);
  background: rgba(248, 113, 113, 0.16);
  color: var(--eg-danger-text);
}

.eg-empty-state .eg-empty-title,
.eg-error-state .eg-empty-title {
  margin: 0;
  font-size: var(--eg-fs-md);
  font-weight: 700;
  color: var(--eg-text);
}

.eg-empty-state .eg-empty-desc,
.eg-empty-state p,
.eg-error-state p {
  max-width: 24rem;
  margin: 0;
  font-size: var(--eg-fs-sm);
  line-height: 1.5;
  color: var(--eg-text-muted);
}

.eg-empty-state .eg-empty-actions,
.eg-error-state .eg-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

td .eg-empty-state {
  border: 0;
  padding: 1.5rem 0.75rem;
}

#planes-empty,
#rutinas-empty,
#extras-empty,
#pagos-empty,
#notif-empty.eg-empty-state,
.profesor-app [id$="-empty"]:not(.hidden):not(p):not(span) {
  border-color: var(--eg-border-strong);
  background-color: transparent;
  background-image: none;
  border-radius: var(--eg-radius);
}

.eg-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.25rem;
  color: var(--eg-text-muted);
  font-size: var(--eg-fs-sm);
}

.eg-loading::before {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--eg-accent);
}

@keyframes eg-spin { to { transform: rotate(360deg); } }

#alumno-loading,
#modal-pago-loading,
#extras-loading,
#destinatarios-loading,
[id$="-loading"]:not(.eg-loading):not(script) {
  color: var(--eg-text-muted);
  font-size: var(--eg-fs-sm);
}

#alumno-loading.eg-loading,
#modal-pago-loading.eg-loading,
#extras-loading.eg-loading {
  display: flex;
  width: 100%;
}

.eg-skeleton {
  display: block;
  border-radius: var(--eg-radius-xs);
  background: linear-gradient(90deg, var(--eg-surface-2) 0%, var(--eg-surface-3) 45%, var(--eg-surface-2) 100%);
  background-size: 200% 100%;
  color: transparent;
  border: 1px solid var(--eg-border-soft);
  pointer-events: none;
  user-select: none;
}

@keyframes eg-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.eg-skeleton--line { height: 0.75rem; width: 100%; margin: 0.35rem 0; }
.eg-skeleton--title { height: 1.1rem; width: 40%; margin-bottom: 0.75rem; }
.eg-skeleton--thumb { width: 40px; height: 40px; border-radius: var(--eg-radius-sm); flex-shrink: 0; }

.eg-soft-divider {
  height: 1px;
  margin: 1rem 0;
  border: 0;
  background: var(--eg-border);
}

/* ═══════════════════════════════════════
   15. MOVIMIENTO
   ═══════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .eg-loading::before { animation: eg-spin 0.7s linear infinite; }
  .eg-skeleton { animation: eg-shimmer 1.35s ease-in-out infinite; }

  .eg-toast,
  #planes-toast:not(.hidden) {
    animation: eg-toast-in 0.18s var(--eg-ease) both;
  }

  [id*="modal"]:not(.hidden) > .fixed.inset-0[class*="bg-black"],
  [id*="Modal"]:not(.hidden) > .fixed.inset-0[class*="bg-black"] {
    animation: eg-fade-in 0.16s ease both;
  }

  [id*="modal"]:not(.hidden) > .fixed:not(.inset-0),
  [id*="Modal"]:not(.hidden) > .fixed:not(.inset-0),
  .eg-more-sheet:not(.hidden) .eg-more-sheet__panel,
  #prof-nav-more-sheet:not(.hidden) .prof-nav-more-panel {
    animation: eg-fade-in 0.18s var(--eg-ease) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes eg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes eg-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Iconos de estado */
.material-symbols-outlined.text-danger,
.eg-icon-danger { color: var(--eg-danger); }
.eg-icon-success { color: var(--eg-success); }
.eg-icon-accent { color: var(--eg-accent); }

/* El estado oculto (clase `hidden`, la usa el JS) siempre gana sobre el display de los componentes */
:is(.eg-empty-state, .eg-error-state, .eg-alert, .alert, .eg-badge, .badge, .eg-compact-badge, .eg-prof-status, .eg-payment-status, .eg-admin-status,
    .eg-admin-kpi, .eg-prof-action-group, .eg-admin-action-group, .eg-filter-bar, .eg-admin-filter-bar, .eg-admin-tabs, .eg-student-tabs,
    .eg-segmented, .eg-loading, .eg-skeleton, .eg-page-head, .eg-prof-toolbar, .eg-admin-toolbar, .eg-btn-icon, .eg-action-link,
    .eg-link-action, .link-action, .eg-list-row, .eg-admin-preview, .eg-admin-map-preview, .eg-more-sheet__item).hidden,
:is(.eg-prof-action-group, .eg-admin-action-group, .eg-admin-tabs, .eg-student-tabs, .eg-filter-bar, .eg-admin-filter-bar, .eg-segmented) > .hidden {
  display: none !important;
}

/* ═══════════════════════════════════════
   16. LOGIN, REGISTRO Y PÁGINAS PÚBLICAS
   ═══════════════════════════════════════ */
body.login-page,
.login-page,
.bg-gym-gradient {
  background-color: var(--eg-bg);
  background-image: none;
}

/* Halo muy sutil del acento detrás del logo (único "glow" del estilo OLED) */
body.bg-gym-gradient {
  background-image: radial-gradient(ellipse 70% 42% at 50% -6%, color-mix(in srgb, var(--eg-accent) 13%, transparent), transparent 72%);
  background-repeat: no-repeat;
}

/* Acceso (login.php): panel de marca en escritorio + tarjeta con pestañas segmentadas */
body.eg-auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--eg-bg);
  color: var(--eg-text);
}

.eg-auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.eg-auth-brand {
  position: relative;
  display: none;
  overflow: hidden;
  padding: 3rem 3.5rem;
  border-right: 1px solid var(--eg-border);
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--eg-accent) 22%, transparent), transparent 62%),
    radial-gradient(ellipse 70% 55% at 100% 100%, color-mix(in srgb, var(--eg-info) 11%, transparent), transparent 62%),
    var(--eg-bg-soft);
}

.eg-auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 30% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 30% 30%, #000, transparent 75%);
  pointer-events: none;
}

.eg-auth-brand__inner {
  position: relative;
  max-width: 30rem;
}

.eg-auth-brand__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--eg-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--eg-text);
}

.eg-auth-brand__logo img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.eg-auth-brand__title {
  margin: 2.75rem 0 0;
  font-family: var(--eg-font-display);
  font-size: clamp(2rem, 1.1rem + 2vw, 3rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--eg-text);
}

.eg-auth-brand__title span {
  color: var(--eg-accent);
}

.eg-auth-brand__lead {
  margin: 1rem 0 0;
  font-size: var(--eg-fs-lg);
  line-height: 1.55;
  color: var(--eg-text-muted);
}

.eg-auth-brand__list {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.eg-auth-brand__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.eg-auth-brand__list li > .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--eg-accent-border);
  border-radius: var(--eg-radius-md);
  background: var(--eg-accent-soft);
  color: var(--eg-accent);
  font-size: 1.25rem;
}

.eg-auth-brand__list strong {
  display: block;
  font-size: var(--eg-fs-md);
  font-weight: 650;
  color: var(--eg-text);
}

.eg-auth-brand__list li div > span {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--eg-fs-sm);
  line-height: 1.45;
  color: var(--eg-text-soft);
}

.eg-auth-brand__foot {
  margin: 2.75rem 0 0;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

.eg-auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 2rem 1rem;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, color-mix(in srgb, var(--eg-accent) 10%, transparent), transparent 70%);
}

.eg-auth {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 27.5rem;
}

.eg-auth__logo {
  display: flex;
  justify-content: center;
}

.eg-auth__logo img {
  width: auto;
  height: 3.5rem;
}

.eg-auth-card {
  padding: 1.75rem;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--eg-radius-lg);
  background: var(--eg-surface);
  box-shadow: var(--eg-shadow-overlay);
}

.eg-auth-card__head h1 {
  margin: 0;
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-2xl);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--eg-text);
}

.eg-auth-card__head p {
  margin: 0.375rem 0 0;
  font-size: var(--eg-fs-base);
  color: var(--eg-text-muted);
}

.eg-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  margin: 1.25rem 0;
  padding: 0.25rem;
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-md);
  background: var(--eg-bg-soft);
}

.eg-auth-tabs .login-tab {
  min-height: 2.5rem;
  border: 0;
  border-radius: var(--eg-radius-sm);
  background: transparent;
  color: var(--eg-text-muted);
  font-size: var(--eg-fs-base);
  font-weight: 650;
  cursor: pointer;
  transition: background-color var(--eg-dur-fast) var(--eg-ease), color var(--eg-dur-fast) var(--eg-ease);
}

.eg-auth-tabs .login-tab:hover {
  color: var(--eg-text);
}

.eg-auth-tabs .login-tab.active {
  background: var(--eg-surface-3);
  color: var(--eg-text);
  box-shadow: inset 0 0 0 1px var(--eg-border-strong);
}

.eg-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.eg-auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.eg-auth-field.hidden {
  display: none;
}

.eg-auth-field > label,
.eg-auth-field__row > label,
.eg-auth-label {
  font-size: var(--eg-fs-sm);
  font-weight: 650;
  color: var(--eg-text-2);
}

.eg-auth-label small {
  font-weight: 500;
  color: var(--eg-text-soft);
}

.eg-auth-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.eg-auth-field__row a {
  font-size: var(--eg-fs-sm);
  font-weight: 600;
  color: var(--eg-accent-text);
}

.eg-auth-field__row a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eg-auth :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
  width: 100%;
  min-height: 3rem;
}

.eg-auth-input {
  position: relative;
}

.eg-auth-input > .material-symbols-outlined:first-child {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--eg-text-soft);
  pointer-events: none;
  transition: color var(--eg-dur-fast) var(--eg-ease);
}

.eg-auth-input:focus-within > .material-symbols-outlined:first-child {
  color: var(--eg-accent);
}

.eg-auth-input > :is(input, select) {
  padding-left: 2.75rem !important;
}

.eg-auth-input:has(.eg-auth-eye) > input {
  padding-right: 3rem;
}

.eg-auth-eye {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--eg-radius-sm);
  background: transparent;
  color: var(--eg-text-soft);
  cursor: pointer;
}

.eg-auth-eye:hover {
  background: var(--eg-hover-strong);
  color: var(--eg-text);
}

.eg-auth-eye .material-symbols-outlined {
  font-size: 1.25rem;
}

.eg-auth-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--eg-fs-sm);
  color: var(--eg-text-muted);
  cursor: pointer;
}

.eg-auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3rem;
  border: 0;
  border-radius: var(--eg-radius-md);
  background: var(--eg-accent);
  color: var(--eg-accent-ink);
  font-size: var(--eg-fs-md);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--eg-dur-fast) var(--eg-ease), transform var(--eg-dur-fast) var(--eg-ease);
}

.eg-auth-submit:hover {
  background: var(--eg-accent-hover);
}

.eg-auth-submit:active {
  transform: translateY(1px);
}

.eg-auth-submit .material-symbols-outlined {
  font-size: 1.25rem;
}

.eg-auth-forgot {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem;
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-md);
  background: var(--eg-bg-soft);
}

.eg-auth-forgot.hidden {
  display: none;
}

.eg-auth-forgot p {
  margin: 0;
  font-size: var(--eg-fs-sm);
  color: var(--eg-text-muted);
}

.eg-auth-forgot__row {
  display: flex;
  gap: 0.5rem;
}

.eg-auth-forgot__row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--eg-control-h) !important;
}

.eg-auth-forgot__row button {
  flex-shrink: 0;
  min-height: var(--eg-control-h);
  padding: 0 1rem;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--eg-radius-md);
  background: var(--eg-surface-2);
  color: var(--eg-text);
  font-size: var(--eg-fs-sm);
  font-weight: 650;
}

.eg-auth-forgot__row button:hover {
  background: var(--eg-surface-3);
}

.eg-auth-forgot__msg:empty {
  display: none;
}

.eg-auth-forgot__msg {
  font-size: var(--eg-fs-sm);
}

.eg-auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.25rem 0;
  font-size: var(--eg-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
}

.eg-auth-divider::before,
.eg-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--eg-border);
}

.eg-auth-role {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.eg-auth-role legend {
  margin-bottom: 0.375rem;
  padding: 0;
  font-size: var(--eg-fs-sm);
  font-weight: 650;
  color: var(--eg-text-2);
}

.eg-auth-role__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.eg-auth-role__grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.eg-auth-role__grid label {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--eg-radius-md);
  background: var(--eg-surface-2);
  cursor: pointer;
  transition: border-color var(--eg-dur-fast) var(--eg-ease), background-color var(--eg-dur-fast) var(--eg-ease);
}

.eg-auth-role__grid label:hover {
  border-color: var(--eg-accent-border);
}

.eg-auth-role__grid label .material-symbols-outlined {
  margin-bottom: 0.25rem;
  font-size: 1.375rem;
  color: var(--eg-text-soft);
}

.eg-auth-role__grid label strong {
  font-size: var(--eg-fs-base);
  font-weight: 650;
  color: var(--eg-text);
}

.eg-auth-role__grid label small {
  font-size: var(--eg-fs-xs);
  line-height: 1.35;
  color: var(--eg-text-soft);
}

.eg-auth-role__grid input:checked + label {
  border-color: var(--eg-accent);
  background: var(--eg-accent-soft);
  box-shadow: inset 0 0 0 1px var(--eg-accent);
}

.eg-auth-role__grid input:checked + label .material-symbols-outlined {
  color: var(--eg-accent);
}

.eg-auth-role__grid input:focus-visible + label {
  outline: 2px solid var(--eg-accent);
  outline-offset: 2px;
}

.eg-auth-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.eg-auth-prof {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--eg-accent-border);
  border-radius: var(--eg-radius-md);
  background: var(--eg-accent-soft);
  color: var(--eg-text);
  font-size: var(--eg-fs-base);
}

.eg-auth-prof .material-symbols-outlined {
  color: var(--eg-accent);
}

.eg-pass-meter {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.eg-pass-meter__bars {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
}

.eg-pass-meter__bars span {
  height: 0.25rem;
  border-radius: var(--eg-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  transition: background-color var(--eg-dur) var(--eg-ease);
}

.eg-pass-meter[data-level="1"] .eg-pass-meter__bars span:nth-child(-n + 1) { background: var(--eg-danger); }
.eg-pass-meter[data-level="2"] .eg-pass-meter__bars span:nth-child(-n + 2) { background: var(--eg-warning); }
.eg-pass-meter[data-level="3"] .eg-pass-meter__bars span:nth-child(-n + 3) { background: var(--eg-accent); }
.eg-pass-meter[data-level="4"] .eg-pass-meter__bars span { background: var(--eg-success); }

.eg-pass-meter__label {
  min-width: 7.5rem;
  text-align: right;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

.eg-auth-legal {
  margin: 0;
  text-align: center;
  font-size: var(--eg-fs-xs);
  line-height: 1.5;
  color: var(--eg-text-soft);
}

.eg-auth-legal a,
.eg-auth-foot a {
  color: var(--eg-accent-text);
}

.eg-auth-legal a:hover,
.eg-auth-foot a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eg-auth-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem 0.625rem;
  margin: 0;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

@media (min-width: 1024px) {
  .eg-auth-shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .eg-auth-brand {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100dvh;
  }

  .eg-auth-main {
    padding: 3rem 2.5rem;
    background: none;
  }

  .eg-auth__logo {
    display: none;
  }
}

@media (max-width: 420px) {
  .eg-auth-card {
    padding: 1.25rem;
  }

  .eg-auth-role__grid label {
    padding: 0.625rem 0.75rem;
  }
}

/* Select personalizado del registro (botón que imita un select): mismo aspecto que los campos */
.custom-select-trigger {
  border-color: var(--eg-border-field) !important;
  background-color: var(--eg-field) !important;
  border-radius: var(--eg-radius-md) !important;
  color: var(--eg-text);
}

.custom-select-trigger:hover {
  border-color: var(--eg-border-field-hover) !important;
}

.custom-select-trigger:focus-visible,
.custom-select-trigger[aria-expanded="true"] {
  border-color: var(--eg-accent) !important;
  box-shadow: 0 0 0 3px var(--eg-focus-ring);
  outline: none;
}

.custom-select-dropdown {
  border-radius: var(--eg-radius-md);
  border: 1px solid var(--eg-border-strong);
  background: var(--eg-surface-3);
  box-shadow: var(--eg-shadow-raised);
}

.eg-auth .custom-select-trigger {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3rem;
  padding: 0 0.75rem 0 0.875rem;
  border: 1px solid;
  text-align: left;
  font-size: var(--eg-fs-base);
  cursor: pointer;
}

.eg-auth .custom-select-trigger > .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--eg-text-soft);
}

.eg-auth .custom-select-trigger[aria-expanded="true"] > .material-symbols-outlined:first-child {
  color: var(--eg-accent);
}

.eg-auth .custom-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eg-auth .custom-select-chevron {
  transition: transform var(--eg-dur-fast) var(--eg-ease);
}

.eg-auth .custom-select-trigger[aria-expanded="true"] .custom-select-chevron {
  transform: rotate(180deg);
}

.eg-auth .custom-select-option.is-selected {
  color: var(--eg-accent-text);
  font-weight: 650;
}

.login-page .bg-gym-surface,
body.login-page .max-w-md,
.bg-gym-surface {
  background-color: var(--eg-surface);
  background-image: none;
  border-color: var(--eg-border);
  box-shadow: none;
}


/* ═══════════════════════════════════════
   MÓDULOS DE PANTALLA
   Reglas específicas de vistas (rutina, ficha, checkout, mapeo…).
   ═══════════════════════════════════════ */

/* Título de página que en celular ya nombra la barra inferior (alumno: Cardio).
   Se oculta a la vista pero sigue para lectores de pantalla; el contenido arranca
   a la misma altura que en Alimentación y Suplementos. */
@media (max-width: 1023px) {
  .eg-title-desktop {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .eg-title-desktop + * {
    margin-top: 1.5rem;
  }
}

/* ═══════════════════════════════════════
   RUTINA ALUMNO
   ═══════════════════════════════════════ */
.eg-routine-head {
  margin-bottom: 0.75rem;
}

.eg-routine-head-title {
  min-width: 0;
}

#rutina-titulo-h1 {
  margin: 0;
  font-family: var(--eg-font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--eg-text);
}

.eg-routine-profe-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 8px;
  color: var(--eg-accent);
  background: color-mix(in srgb, var(--eg-accent) 16%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.eg-routine-profe-mark:hover,
.eg-routine-profe-mark:focus-visible {
  color: var(--eg-accent);
  background: color-mix(in srgb, var(--eg-accent) 26%, transparent);
}

.eg-routine-profe-mark .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

#dia-selector {
  overflow: visible;
}

#dia-selector .dia-btn {
  overflow: visible;
}

#dia-selector .eg-dia-profe-mark {
  position: absolute;
  top: 0.12rem;
  right: 0.12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.7rem;
  height: 0.7rem;
  color: var(--eg-accent);
  pointer-events: none;
}

#dia-selector .dia-btn.bg-primary .eg-dia-profe-mark {
  color: inherit;
}

#dia-selector .eg-dia-profe-mark .material-symbols-outlined {
  font-size: 0.7rem;
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

#modalRutinaProfePanel {
  background: var(--eg-surface-2) !important;
  border: 1px solid var(--eg-border-strong);
  box-shadow: var(--eg-shadow-overlay);
}

/* Calendario del alumno: una sola forma (recuadro), estados por color */
.eg-cal {
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
  padding: 1rem 0.85rem 1.1rem;
}

.eg-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.eg-cal__nav h2 {
  margin: 0;
  font-family: var(--eg-font-display);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--eg-text);
}

.eg-cal__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--eg-radius-sm);
  color: var(--eg-text-2);
}

.eg-cal__nav-btn:hover {
  background: var(--eg-hover-strong);
  color: var(--eg-text);
}

.eg-cal__board {
  max-width: 22.5rem;
  margin: 0 auto;
}

.eg-cal__weekdays,
.eg-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.32rem;
}

.eg-cal__weekdays {
  margin-bottom: 0.32rem;
}

.eg-cal__wd {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--eg-text-soft);
  padding: 0.15rem 0 0.25rem;
}

.eg-cal__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  aspect-ratio: 1;
  border-radius: var(--eg-radius-xs);
  border: 1px solid transparent;
  background: transparent;
  color: var(--eg-text-muted);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
}

.eg-cal__num {
  display: block;
}

.eg-cal__hora {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.55rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0.92;
}

.eg-cal__profe {
  position: absolute;
  top: 0.08rem;
  right: 0.08rem;
  width: 0.65rem;
  height: 0.65rem;
  color: var(--eg-accent);
  pointer-events: none;
}

.eg-cal__profe .material-symbols-outlined {
  font-size: 0.65rem;
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.eg-cal__day.is-done .eg-cal__profe,
.eg-cal__day.is-done .eg-cal__hora {
  color: inherit;
}

.eg-cal__day.is-profe:not(.is-done):not(.is-plan) {
  background: color-mix(in srgb, var(--eg-accent) 18%, var(--eg-surface-2));
  border-color: color-mix(in srgb, var(--eg-accent) 42%, transparent);
  color: var(--eg-accent-text);
}

.eg-cal__day.is-out {
  color: var(--eg-text-soft);
  opacity: 0.28;
  pointer-events: none;
}

.eg-cal__day.is-plan {
  background: color-mix(in srgb, var(--eg-accent) 18%, var(--eg-surface-2));
  border-color: color-mix(in srgb, var(--eg-accent) 42%, transparent);
  color: var(--eg-accent-text);
}

.eg-cal__day.is-done {
  background: var(--eg-accent);
  border-color: var(--eg-accent);
  color: var(--eg-accent-ink);
  font-weight: 750;
}

.eg-cal__day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--eg-accent);
}

.eg-cal__day.is-done.is-today {
  box-shadow: inset 0 0 0 1.5px var(--eg-accent-ink);
}

a.eg-cal__day:hover {
  filter: brightness(1.08);
}

.eg-cal__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem 1.15rem;
  margin: 0.95rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--eg-border);
  list-style: none;
}

.eg-cal__legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--eg-text-soft);
}

.eg-cal__swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 4px;
  border: 1px solid var(--eg-border-strong);
  background: transparent;
}

.eg-cal__swatch.is-done {
  background: var(--eg-accent);
  border-color: var(--eg-accent);
}

.eg-cal__swatch.is-plan {
  background: color-mix(in srgb, var(--eg-accent) 18%, var(--eg-surface-2));
  border-color: color-mix(in srgb, var(--eg-accent) 42%, transparent);
}

.eg-cal__swatch.is-today {
  box-shadow: inset 0 0 0 1.5px var(--eg-accent);
}

.eg-cal__swatch.is-profe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: color-mix(in srgb, var(--eg-accent) 42%, transparent);
  color: var(--eg-accent);
}

.eg-cal__swatch.is-profe .material-symbols-outlined {
  font-size: 0.7rem;
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.eg-cal-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
  text-decoration: none;
  color: inherit;
}

.eg-cal-next:hover {
  border-color: var(--eg-accent-border);
  background: var(--eg-surface-2);
}

.eg-cal-next__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.15rem;
  padding: 0.4rem 0.45rem;
  border-radius: var(--eg-radius-xs);
  background: var(--eg-accent);
  color: var(--eg-accent-ink);
}

.eg-cal-next__date span {
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.03em;
}

.eg-cal-next__date strong {
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.1;
}

.eg-cal-next__txt {
  min-width: 0;
  flex: 1;
}

.eg-cal-next__txt p:first-child {
  margin: 0;
  font-weight: 700;
  color: var(--eg-text);
}

.eg-cal-next__txt p:last-child,
.eg-cal-next__meta {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: var(--eg-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eg-cal-next__meta {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}

.eg-cal-next__meta .material-symbols-outlined {
  font-size: 1rem;
  color: var(--eg-accent);
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.eg-cal-next > .material-symbols-outlined {
  color: var(--eg-accent);
}

.eg-cal-stats {
  margin-top: 1.15rem;
}

.eg-cal-stats h3 {
  margin: 0 0 0.65rem;
  font-family: var(--eg-font-display);
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--eg-text);
}

.eg-cal-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.eg-cal-stats article {
  padding: 0.9rem 0.95rem;
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
}

.eg-cal-stats article > p {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--eg-text-soft);
}

.eg-cal-stats__num {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.eg-cal-stats__num strong {
  font-family: var(--eg-font-display);
  font-size: 1.65rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--eg-accent);
}

.eg-cal-stats__num span {
  font-size: 0.72rem;
  color: var(--eg-text-soft);
}

.eg-cal-stats__bar {
  margin-top: 0.7rem;
  height: 4px;
  border-radius: 2px;
  background: var(--eg-surface-3);
  overflow: hidden;
}

.eg-cal-stats__bar i {
  display: block;
  height: 100%;
  background: var(--eg-accent);
}

.eg-cal-stats__hint {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.72rem;
  color: var(--eg-text-soft);
}

.eg-routine-head-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--eg-text-soft);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.eg-routine-head-edit .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}

.eg-routine-head-edit:hover {
  color: var(--eg-accent);
  background: var(--eg-accent-soft);
}

.eg-routine-head-meta {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--eg-text-soft);
}

.eg-routine-head-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ej-card {
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-border) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ej-card:hover {
  border-color: var(--eg-border-strong) !important;
  background: var(--eg-panel-2) !important;
}

.ej-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ej-meta-display {
  font-size: 0.8125rem;
}

.eg-ex-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--eg-border);
  background: var(--eg-bg-alt);
  align-self: center;
}

.eg-ex-thumb--sm {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.eg-ex-modal-media {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 10px;
  background: #FFF;
  border: 1px solid var(--eg-border);
}

.eg-ex-attribution {
  font-size: 0.65rem;
  color: var(--eg-text-muted);
  margin-top: 0.35rem;
}

/* Day selector */
#rutina-main .flex.justify-between.items-center.rounded-xl {
  background: var(--eg-panel) !important;
  border-color: var(--eg-border) !important;
  padding: 0.3rem !important;
}

#rutina-main .flex.justify-between.items-center.rounded-xl > a {
  border-radius: 8px;
  font-size: 0.75rem;
  min-height: 40px;
  justify-content: center;
}

#rutina-main .flex.justify-between.items-center.rounded-xl > a.bg-primary {
  background: var(--eg-accent) !important;
  color: var(--eg-accent-ink) !important;
  font-weight: 700;
  box-shadow: none !important;
}

/* Iniciar / en curso — panel compacto */
.eg-workout-start {
  margin-bottom: 1rem;
}

.eg-workout-start-btn,
#btn-iniciar.eg-workout-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: 10px;
  background: var(--eg-accent) !important;
  color: var(--eg-accent-ink) !important;
  font-family: var(--eg-font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: none !important;
  filter: none !important;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.eg-workout-start-btn .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
}

.eg-workout-start-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--eg-accent) 86%, #fff) !important;
}

.eg-workout-start-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.eg-workout-live {
  margin-bottom: 1rem;
}

.eg-workout-live-card {
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--eg-border);
  background: var(--eg-panel);
}

.eg-workout-live-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.eg-workout-live-timer-wrap {
  min-width: 0;
}

.eg-workout-live-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
  margin-bottom: 0.1rem;
}

.eg-workout-live-timer,
#entreno-timer {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--eg-accent);
  font-variant-numeric: tabular-nums;
}

.eg-workout-live-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.eg-workout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 2rem;
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--eg-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.eg-workout-btn .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}

.eg-workout-btn-finish,
#btn-finalizar.eg-workout-btn-finish {
  background: rgba(20, 184, 166, 0.14);
  color: rgba(248, 250, 252, 0.45);
  border-color: rgba(20, 184, 166, 0.18);
  cursor: not-allowed;
}

.eg-workout-btn-finish.is-ready:not(:disabled),
#btn-finalizar.eg-workout-btn-finish.is-ready:not(:disabled) {
  background: var(--eg-accent) !important;
  color: var(--eg-accent-ink) !important;
  border-color: transparent;
  cursor: pointer;
}

.eg-workout-btn-finish.is-ready:not(:disabled):hover {
  background: color-mix(in srgb, var(--eg-accent) 86%, #fff) !important;
}

.eg-workout-btn-cancel,
#btn-cancelar.eg-workout-btn-cancel {
  background: var(--eg-surface-3);
  color: var(--eg-text-muted);
  border-color: var(--eg-border);
}

.eg-workout-btn-cancel:hover:not(:disabled) {
  color: var(--eg-text);
  border-color: var(--eg-border-strong);
  background: #12161C;
}

.eg-workout-progress-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.eg-workout-progress-bar,
#entreno-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--eg-accent) !important;
  transition: width 0.28s ease;
}

.eg-workout-progress-text,
#entreno-progress-text {
  margin: 0.35rem 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--eg-text-soft);
}

.eg-workout-done {
  text-align: center;
}

.eg-workout-done-btn,
#btn-finalizado-tap.eg-workout-done-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  min-height: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--eg-accent-border);
  background: var(--eg-accent-soft);
  color: var(--eg-accent);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.eg-workout-done-btn:hover {
  background: rgba(20, 184, 166, 0.16);
  border-color: rgba(20, 184, 166, 0.35);
}

.eg-workout-done-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eg-accent);
}

.eg-workout-done-time,
#entreno-finalizado-tiempo {
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--eg-text);
}

.eg-workout-done-hint {
  margin: 0.4rem 0 0;
  font-size: 0.6875rem;
  color: var(--eg-text-soft);
}

.ej-entreno-check {
  border-width: 1.5px !important;
}

.comida-check-dash,
.sup-check-dash {
  border-width: 1.5px !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
}

/* ═══════════════════════════════════════
   PREMIUM 3 — v4 (pantallas reales + media)
   ═══════════════════════════════════════ */

/* Fila rutina: thumb + contenido compacto */
.ej-card.eg-routine-row,
.eg-routine-row.ej-card {
  align-items: center;
  gap: 0;
  min-height: 0 !important;
}

.eg-routine-row .eg-ex-thumb {
  width: 36px;
  height: 36px;
  margin: 0 0 0 0.5rem;
  align-self: center;
  object-fit: cover;
  object-position: center;
  background: var(--eg-bg-soft);
  flex-shrink: 0;
}

.eg-routine-row .eg-routine-body {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.55rem 0.4rem 0.55rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}

.eg-routine-row .ej-title-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 0;
  line-height: 1.15;
}

.eg-routine-row h3 {
  font-size: 0.875rem;
  line-height: 1.15;
  margin: 0;
}

/* Iconos inline (desc / video): misma caja, sin min-height de .eg-btn-icon */
.eg-routine-row .eg-routine-ico,
.eg-routine-row .ej-btn-desc.eg-routine-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--eg-text-soft);
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.eg-routine-row button.eg-routine-ico:hover,
.eg-routine-row .ej-btn-desc.eg-routine-ico:hover {
  color: var(--eg-accent);
  background: transparent !important;
}

.eg-routine-row .eg-routine-ico .material-symbols-outlined,
.eg-routine-row .ej-title-row .material-symbols-outlined {
  font-size: 0.95rem !important;
  line-height: 1 !important;
  width: 1em;
  height: 1em;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.eg-routine-variant {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--eg-text-soft);
}

.eg-routine-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.05rem;
}

.eg-routine-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.3rem;
  font-size: 0.6875rem;
  line-height: 1.2;
}

.eg-routine-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  background: var(--eg-surface-2);
  border: 1px solid var(--eg-border);
  color: var(--eg-text-muted);
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.25;
}

.eg-routine-meta-chip--primary {
  background: var(--eg-surface-3);
  border-color: var(--eg-border-strong);
  color: var(--eg-text);
  font-weight: 600;
}

/* Check fila — línea a la altura del botón (no full-height de la card) */
.eg-row-check {
  display: flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  margin: 0 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--eg-border);
}

.eg-row-check--warm {
  border-left-color: rgba(251, 146, 60, 0.35);
}

.eg-row-check-btn,
.eg-row-check .ej-entreno-check,
.eg-row-check .comida-check,
.eg-row-check .sup-check,
button.ej-entreno-check,
button.comida-check,
button.sup-check {
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
  max-width: 2.75rem !important;
  max-height: 2.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 2px !important;
  border-radius: 9999px !important;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  overflow: hidden;
}

.eg-row-check-btn:hover,
.eg-row-check-btn:active,
.eg-row-check-btn:focus,
.eg-row-check-btn:focus-visible,
.ej-entreno-check:hover,
.ej-entreno-check:active,
.ej-entreno-check:focus,
.comida-check:hover,
.comida-check:active,
.comida-check:focus,
.sup-check:hover,
.sup-check:active,
.sup-check:focus,
.eg-row-check-btn.bg-primary,
.ej-entreno-check.bg-primary,
.comida-check.bg-primary,
.sup-check.bg-primary,
.ej-entreno-btns[data-state="1"] .ej-entreno-check,
.ej-entreno-btns[data-state="2"] .ej-entreno-check {
  border-radius: 9999px !important;
  min-height: 2.75rem !important;
  min-width: 2.75rem !important;
}

.eg-routine-row .ej-entreno-btns.eg-row-check {
  display: flex;
  align-items: center;
  align-self: center;
  margin-block: 0;
}

.eg-routine-row .ej-entreno-check {
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-width: 2px !important;
  border-radius: 9999px !important;
  flex-shrink: 0;
}

.eg-mobile-toolbar {
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-border) !important;
  border-radius: 10px;
  padding: 0.28rem !important;
}

.eg-mobile-toolbar > a {
  min-height: 40px;
  border-radius: 8px;
}

/* Modal ejercicio — siempre arriba, centrado horizontal (no bottom sheet) */
#detailModal > .eg-exercise-modal,
#detailModal > div.fixed.inset-x-4 {
  top: max(0.75rem, calc(env(safe-area-inset-top, 0px) + 0.5rem)) !important;
  bottom: auto !important;
  left: 1rem !important;
  right: 1rem !important;
  width: min(calc(100vw - 2rem), 28rem) !important;
  max-width: min(calc(100vw - 2rem), 28rem) !important;
  max-height: min(90vh, 720px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  border-radius: 14px !important;
  border: 1px solid var(--eg-border) !important;
  background: var(--eg-panel) !important;
}

.eg-exercise-modal {
  border-radius: 14px !important;
  border: 1px solid var(--eg-border) !important;
  background: var(--eg-panel) !important;
  max-height: min(90vh, 720px);
}

.eg-exercise-modal-header,
#detailModal .flex.items-center.justify-between.p-3.border-b {
  padding: 0.85rem 1rem !important;
  background: var(--eg-surface-3);
  border-bottom-color: var(--eg-border) !important;
}

#detailModalTitle {
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--eg-text);
}

#detailLibMediaWrap.eg-exercise-modal-media,
.eg-exercise-modal-media#detailLibMediaWrap {
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  border-radius: 12px;
  background: #05080C;
  border: 1px solid var(--eg-border);
}

#detailLibGif.eg-ex-modal-media,
.eg-ex-modal-media {
  display: block;
  width: 100%;
  max-width: 280px;
  max-height: 180px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
  background: #FFF;
  border: 1px solid var(--eg-border-soft);
}

#detailLibInstructions,
.eg-lib-instr {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #CBD5E1;
  margin-top: 0.65rem;
  padding: 0 0.15rem;
  white-space: pre-line;
  word-break: break-word;
}

#detailLibInstructions.is-clamped:not(.is-expanded),
.eg-lib-instr.is-clamped:not(.is-expanded) {
  display: block;
  max-height: calc(1.5em * 3);
  overflow: hidden;
}

#detailLibInstructions.is-expanded,
.eg-lib-instr.is-expanded {
  display: block;
  max-height: none;
  overflow: visible;
}

.eg-lib-instr-toggle {
  display: inline;
  margin: 0.1rem 0 0;
  padding: 0 !important;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.15;
  font-family: var(--eg-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--eg-accent);
  cursor: pointer;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
}

.eg-lib-instr-toggle:hover {
  color: color-mix(in srgb, var(--eg-accent) 80%, #fff);
}

.eg-lib-instr-toggle.hidden {
  display: none !important;
}

/* Nota / comentario del profesor en modal ejercicio */
.eg-prof-note {
  margin-top: 0.15rem;
  padding: 0.7rem 0.8rem 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--eg-accent-border);
  border-left: 3px solid var(--eg-accent);
  background: var(--eg-accent-soft);
}

.eg-prof-note-label {
  margin: 0 0 0.3rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eg-accent);
}

.eg-prof-note-text,
#detailDesc {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--eg-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.eg-prof-note.hidden {
  display: none !important;
}

#detailLibAttribution,
.eg-ex-attribution {
  font-size: 0.625rem;
  color: var(--eg-text-soft);
  margin-top: 0.4rem;
  text-align: center;
}

#detailSaveBtn {
  min-height: var(--eg-btn-h-lg);
  border-radius: 10px !important;
  box-shadow: none !important;
}

#detailModal .detail-modal-tab {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 0.8125rem;
}

/* Alumno home: filas comida/sup más compactas */
.comida-check-dash,
.sup-check-dash {
  width: 2.15rem !important;
  height: 2.15rem !important;
}

@media (max-width: 430px) {
  .eg-routine-row .eg-ex-thumb {
    width: 36px;
    height: 36px;
    margin-left: 0.4rem;
  }

  .eg-routine-row h3 {
    font-size: 0.9rem;
  }

  .eg-routine-meta-line {
    font-size: 0.7rem;
  }

  #detailLibGif.eg-ex-modal-media,
  .eg-ex-modal-media {
    max-height: 160px;
    max-width: 220px;
  }

  #detailModal > div.fixed.inset-x-4 {
    inset-inline: 0.75rem;
  }
}

.eg-student-header {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: 12px;
}

@media (min-width: 768px) {
  .eg-student-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.eg-student-header #alumno-foto,
.eg-student-header .eg-student-avatar {
  width: 5.5rem !important;
  height: 5.5rem !important;
  border-radius: 14px !important;
  border: 2px solid rgba(20, 184, 166, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.eg-student-header h1 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0;
}

.eg-student-header .eg-prof-action-group {
  justify-content: flex-start;
}

/* Acciones de la cabecera de ficha: misma altura que las acciones de encabezado de página */
.eg-student-header :is(.eg-admin-action-group, .eg-prof-action-group) > :is(a, button):not(.hidden) {
  min-height: var(--eg-btn-h);
  border-radius: var(--eg-radius-md);
  font-size: var(--eg-fs-base);
}

.eg-student-header #btn-desvincular:not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--eg-btn-h);
  height: var(--eg-btn-h);
  padding: 0;
}

.eg-student-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.eg-student-summary > div,
.eg-student-summary .eg-student-stat {
  padding: 0.7rem 0.8rem;
  border-radius: 9px;
  border: 1px solid var(--eg-border-soft);
  background: rgba(8, 11, 16, 0.45);
}

.eg-student-summary .eg-student-stat-label,
.eg-student-summary > div > p:first-child {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
  margin: 0 0 0.2rem;
}

.eg-plan-card {
  border: 1px solid var(--eg-border) !important;
  border-radius: 12px !important;
  background: var(--eg-panel) !important;
  padding: 1rem !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.eg-plan-card:hover {
  border-color: var(--eg-border-strong) !important;
  background: var(--eg-surface-3) !important;
}

.eg-plan-card h4,
.eg-plan-card .eg-plan-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--eg-text);
  margin: 0;
}

.eg-plan-card .eg-plan-card-meta {
  font-size: 0.75rem;
  color: var(--eg-text-muted);
  margin-top: 0.25rem;
}

/* Historial pagos: filas grid densas + Acciones sticky */
.eg-prof-table.eg-payment-list > .eg-table-scroll > .eg-payment-row:first-child,
#pagos-list > .eg-payment-row:first-child {
  background: var(--eg-surface-3) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.04em;
}

.eg-prof-table.eg-payment-list > .eg-table-scroll > .eg-payment-row,
#pagos-list > .eg-payment-row {
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
}

.eg-payment-list .eg-payment-row > .eg-col-actions {
  position: static;
  box-shadow: none;
  background: transparent;
}

@media (min-width: 768px) {
  .eg-payment-list .eg-payment-row > .eg-col-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--eg-surface);
    box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
  }

  .eg-payment-list .eg-payment-row:first-child > .eg-col-actions {
    z-index: 3;
    background: var(--eg-surface-2);
  }
}


/* Modal ejercicio: recortar GIF blanco / sin franja lateral */
#detailLibMediaWrap.eg-exercise-modal-media,
.eg-exercise-modal-media#detailLibMediaWrap {
  overflow: hidden;
  isolation: isolate;
}

#detailLibGif.eg-ex-modal-media,
.eg-ex-modal-media {
  overflow: hidden;
  max-width: min(100%);
  box-sizing: border-box;
}

#detailModal > div.fixed.inset-x-4 {
  max-width: min(100vw - 2rem, 28rem);
  overflow: hidden;
}

#detailModal .overflow-y-auto {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Títulos de ejercicio: truncado limpio sin empujar check */
.eg-routine-row h3,
.ej-card h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eg-routine-row,
.ej-card {
  min-width: 0;
}

/* Home alumno — mismos paneles que empty-state */
.eg-home-panel {
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.eg-home-panel:hover,
.eg-home-panel.group:hover {
  border-color: var(--eg-border-strong) !important;
}

.eg-home-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--eg-border-soft);
  border-radius: 9px;
}

.eg-home-row--next {
  margin-bottom: 0.55rem;
}

.eg-home-row-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--eg-border-soft);
  color: var(--eg-text-soft);
}

.eg-home-row-ico .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

.eg-home-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.eg-home-row-title-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.eg-home-row-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--eg-text);
}

.eg-home-row-desc {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.25;
  color: var(--eg-text-soft);
}

.eg-home-row-check,
.eg-home .comida-check-dash,
.eg-home .sup-check-dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem !important;
  height: 2rem !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(148, 163, 184, 0.45);
  background: transparent;
  color: #94A3B8;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.eg-home-row-check .material-symbols-outlined,
.eg-home .comida-check-dash .material-symbols-outlined,
.eg-home .sup-check-dash .material-symbols-outlined {
  font-size: 1.05rem;
  line-height: 1;
}

.eg-home-row-check.is-on,
.eg-home .comida-check-dash.is-on,
.eg-home .sup-check-dash.is-on {
  background: var(--eg-accent) !important;
  border-color: var(--eg-accent) !important;
  color: var(--eg-accent-ink) !important;
}

/* Home feed — títulos / listas densas */
.eg-home-feed-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--eg-text);
}

.eg-home-feed-title .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
}

.eg-home-feed-title.mb-0 {
  margin-bottom: 0;
}

.eg-home-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.eg-home-feed-sub {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--eg-text-soft);
}

.eg-home-feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.eg-home-feed-empty,
.eg-home-feed-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--eg-text-muted);
}

.eg-home-feed-hint {
  margin-bottom: 0.45rem;
}

.eg-home-feed-time {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--eg-accent);
  background: var(--eg-accent-soft);
  border: 1px solid var(--eg-accent-border);
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
}

.eg-home-feed-time--sm {
  padding: 0.1rem 0.3rem;
  font-size: 0.625rem;
}

/* Perfil alumno — tiles / stats con mismo fondo home */
.eg-profile-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 0.65rem;
  text-decoration: none;
  cursor: pointer;
  min-height: 5.25rem;
}

button.eg-profile-tile {
  font: inherit;
  width: 100%;
}

.eg-profile-tile-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: var(--eg-accent-soft);
  color: var(--eg-accent);
  transition: transform 0.15s ease;
}

.eg-profile-tile-ico .material-symbols-outlined {
  font-size: 1.2rem;
  line-height: 1;
}

.eg-profile-tile:hover .eg-profile-tile-ico,
.eg-profile-tile.group:hover .eg-profile-tile-ico {
  transform: scale(1.06);
}

.eg-profile-tile-label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--eg-text);
}

.eg-profile-tile--muted {
  opacity: 0.72;
}

.eg-profile-tile--muted .eg-profile-tile-ico {
  background: rgba(255, 255, 255, 0.04);
  color: var(--eg-text-soft);
}

.eg-profile-tile--muted .eg-profile-tile-label {
  color: var(--eg-text-muted);
}

.eg-profile-section-label {
  margin: 0 0 0.55rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
}

.eg-profile-stat-label {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
}

.eg-profile-stat-value {
  margin: 0.1rem 0 0;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--eg-accent);
}

.eg-profile-stat-div {
  width: 1px;
  height: 1.75rem;
  background: var(--eg-border);
  flex-shrink: 0;
}

.eg-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  background: var(--eg-danger-soft);
  color: #FCA5A5;
  font-family: var(--eg-font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.eg-logout-btn .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
}

.eg-logout-btn:hover {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.16);
  color: #FECACA;
}

/* Plan actual (alumno/profesor) — módulo completo */
.eg-plan-module {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.eg-plan-actual-head {
  width: 100%;
  min-width: 0;
}

.eg-plan-actual-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.eg-plan-actual-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-accent);
}

.eg-plan-actual-badge {
  flex-shrink: 0;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--eg-accent-soft);
  color: var(--eg-accent);
  border: 1px solid var(--eg-accent-border);
}

.eg-plan-actual-badge--warn {
  background: rgba(251, 191, 36, 0.12);
  color: #FCD34D;
  border-color: rgba(251, 191, 36, 0.28);
}

.eg-plan-actual-badge--danger {
  background: rgba(248, 113, 113, 0.12);
  color: #FCA5A5;
  border-color: rgba(248, 113, 113, 0.28);
}

.eg-plan-actual-title {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--eg-text);
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.eg-plan-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.eg-plan-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
  border: 1px solid var(--eg-border-soft);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}

.eg-plan-meta-item .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--eg-accent);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.eg-plan-meta-k {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
  margin-bottom: 0.1rem;
}

.eg-plan-meta-v {
  display: block;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--eg-text);
  word-break: break-word;
}

.eg-plan-checkout-empty {
  padding-top: 0.75rem;
  border-top: 1px solid var(--eg-border);
}

.eg-plan-checkout-empty p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--eg-text-muted);
  font-style: italic;
}

/* Checkout premium */
.eg-checkout.checkout-root {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--eg-border);
}

.eg-checkout-kicker {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-accent);
}

.eg-checkout-block-title {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--eg-text);
}

.eg-checkout-block-sub {
  margin: -0.15rem 0 0.45rem;
  font-size: 0.6875rem;
  color: var(--eg-text-soft);
}

.eg-checkout-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.eg-checkout-option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--eg-border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.eg-checkout-option:hover {
  border-color: var(--eg-border-strong);
  background: rgba(255, 255, 255, 0.045);
}

.eg-checkout-option:has(input:checked) {
  border-color: var(--eg-accent-border);
  background: var(--eg-accent-soft);
}

.eg-checkout-option input {
  margin-top: 0.2rem;
  accent-color: var(--eg-accent);
  flex-shrink: 0;
}

.eg-checkout-option-body {
  flex: 1;
  min-width: 0;
}

.eg-checkout-option-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.eg-checkout-option-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--eg-text);
}

.eg-checkout-option-tag {
  font-size: 0.625rem;
  font-weight: 600;
  color: #6EE7B7;
}

.eg-checkout-option-price {
  margin: 0.15rem 0 0;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--eg-accent);
}

.eg-checkout-option--extra .eg-checkout-option-price {
  margin: 0;
  align-self: center;
  font-size: 0.875rem;
}

.eg-checkout-option-hint {
  margin: 0.15rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--eg-text-soft);
}

.eg-checkout-option-note {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.3rem;
  font-size: 0.625rem;
  color: #FCD34D;
}

.eg-checkout-option-note .material-symbols-outlined {
  font-size: 0.85rem;
  line-height: 1;
}

.eg-checkout-cart {
  padding: 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--eg-accent-border);
  background: var(--eg-accent-soft);
}

.eg-checkout-cart-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.eg-checkout-cart-head .material-symbols-outlined {
  font-size: 1.15rem;
  color: var(--eg-accent);
}

.eg-checkout-cart-head h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--eg-text);
}

.eg-checkout-cart-list {
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--eg-text-muted);
}

.eg-checkout-cart-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.eg-checkout-cart-list li span:last-child {
  font-weight: 700;
  color: var(--eg-text);
}

.eg-checkout-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0;
  margin-bottom: 0.65rem;
  border-top: 1px solid var(--eg-border);
  font-size: 0.8125rem;
  color: var(--eg-text-muted);
}

.eg-checkout-cart-total .checkout-total-display {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--eg-accent);
}

.eg-checkout-cart-hint {
  margin: 0 0 0.45rem;
  font-size: 0.6875rem;
  color: var(--eg-text-soft);
}

.eg-checkout-mp-btns,
.checkout-mp-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.checkout-mp-pay,
.eg-checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: 10px;
  font-family: var(--eg-font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.checkout-mp-pay {
  background: var(--eg-accent) !important;
  color: var(--eg-accent-ink) !important;
}

.checkout-mp-pay:hover {
  background: color-mix(in srgb, var(--eg-accent) 86%, #fff) !important;
}

.checkout-mp-pay .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

.eg-checkout-btn--ghost {
  background: var(--eg-surface-3);
  color: var(--eg-text-muted);
  border: 1px solid var(--eg-border);
}

.eg-checkout-btn--ghost:hover {
  color: var(--eg-text);
  border-color: var(--eg-border-strong);
}

.eg-checkout-btn--wa {
  background: #059669;
  color: #fff;
}

.eg-checkout-btn--wa:hover {
  background: #047857;
  color: #fff;
}

.eg-checkout-transfer {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.eg-checkout-transfer-alert {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: #FCD34D;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.22);
}

.eg-checkout-transfer-info {
  padding: 0.65rem 0.75rem;
  border-radius: 9px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--eg-text-muted);
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--eg-border);
}

.eg-checkout-empty {
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--eg-text-soft);
  font-style: italic;
}

.eg-checkout-recover {
  margin: 0;
}

.eg-checkout-recover summary {
  font-size: 0.6875rem;
  color: var(--eg-text-soft);
  cursor: pointer;
  list-style: none;
}

.eg-checkout-recover summary::-webkit-details-marker {
  display: none;
}

.eg-checkout-recover summary:hover {
  color: var(--eg-accent);
}

.eg-checkout-recover-body {
  margin-top: 0.45rem;
  padding: 0.65rem 0.75rem;
  border-radius: 9px;
  border: 1px solid var(--eg-border);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.eg-checkout-recover-body p {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--eg-text-soft);
}

.eg-checkout-recover-body .checkout-ya-pague-payment-id {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--eg-border);
  background: var(--eg-bg);
  color: var(--eg-text);
  font-size: 0.6875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 380px) {
  .eg-plan-meta {
    grid-template-columns: 1fr;
  }
}

/* Switch notificación — tamaño fijo, sin min-height de botones */
button.eg-switch,
.eg-switch[role="switch"] {
  position: relative;
  display: inline-block;
  width: 2.75rem !important;
  height: 1.5rem !important;
  min-width: 2.75rem !important;
  min-height: 0 !important;
  max-height: 1.5rem !important;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  border-radius: 999px !important;
  background: #475569 !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease;
}

button.eg-switch.is-on,
button.eg-switch[aria-checked="true"],
.eg-switch.is-on,
.eg-switch[aria-checked="true"] {
  background: var(--eg-accent) !important;
}

button.eg-switch > span,
.eg-switch > span {
  position: absolute !important;
  top: 0.125rem !important;
  left: 0.125rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin: 0 !important;
  border-radius: 999px;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transform: translateX(0) !important;
  transition: transform 0.18s ease;
  pointer-events: none;
}

button.eg-switch.is-on > span,
button.eg-switch[aria-checked="true"] > span,
.eg-switch.is-on > span,
.eg-switch[aria-checked="true"] > span {
  transform: translateX(1.25rem) !important;
}

.eg-row-check-btn .material-symbols-outlined,
.ej-entreno-check .material-symbols-outlined,
.comida-check .material-symbols-outlined,
.sup-check .material-symbols-outlined {
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

/* Badge sobre la foto de la ficha: contraste real */
.eg-student-header #alumno-badge,
.eg-student-header .relative > .eg-admin-status {
  z-index: 2;
  padding: 0.2rem 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.eg-student-header #alumno-badge.eg-admin-status--ok,
.eg-student-header #alumno-badge.eg-admin-status--info,
.eg-student-header #alumno-badge.eg-compact-badge,
.eg-student-header .relative > .eg-admin-status--ok {
  background: rgba(6, 78, 59, 0.95) !important;
  border-color: rgba(52, 211, 153, 0.55) !important;
  color: #A7F3D0 !important;
}

.eg-student-header .relative > .eg-admin-status--warn {
  background: rgba(120, 53, 15, 0.95) !important;
  border-color: rgba(251, 191, 36, 0.55) !important;
  color: #FDE68A !important;
}

/* Secundario del header alumno (Mensaje): no usar bg-slate-800 (se funde con el panel) */
.eg-student-header #btn-mensaje,
.eg-student-header .eg-student-btn-secondary {
  background: var(--eg-surface-3) !important;
  border: 1px solid var(--eg-border-strong) !important;
  color: var(--eg-text) !important;
  box-shadow: none !important;
}

.eg-student-header #btn-mensaje:hover,
.eg-student-header .eg-student-btn-secondary:hover {
  background: var(--eg-surface-3) !important;
  border-color: var(--eg-border-strong) !important;
  color: #fff !important;
}

/* Controles de semanas (color / + / − / clonar): botones compactos y neutros */
#plan-semanas-controles {
  gap: 0.25rem;
}

#plan-semanas-controles button:not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--eg-icon-btn);
  height: var(--eg-icon-btn);
  min-width: var(--eg-icon-btn);
  min-height: 0;
  padding: 0;
  border-radius: var(--eg-radius-md);
  font-size: 0.875rem;
  font-weight: 700;
}

#plan-semanas-controles button:not(#plan-semana-color-btn) {
  background: var(--eg-surface-2);
  color: var(--eg-text);
  border: 1px solid var(--eg-border-strong);
}

#plan-semanas-controles button:not(#plan-semana-color-btn):hover {
  background: var(--eg-surface-3);
}

#plan-semanas-controles #plan-semana-color-btn {
  border: 2px solid rgba(255, 255, 255, 0.28);
}

#plan-semanas-controles button .material-symbols-outlined {
  font-size: var(--eg-icon-glyph) !important;
}

/* Semanas planificadas — Blackout: color solo como acento, no borde grueso */
.eg-week-pills-wrap {
  position: relative;
  min-width: 0;
}

.eg-week-pills-wrap.is-scroll::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1.75rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--eg-bg, #06080B));
}

.eg-week-pills {
  gap: 0.35rem;
}

.eg-week-pills.is-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-right: 1.25rem;
}

.eg-week-pills.is-scroll::-webkit-scrollbar {
  display: none;
}

.eg-week-pills.is-scroll .eg-week-pill,
.eg-week-pills.is-scroll .semana-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 3.5rem;
  padding: 0.45rem 0.75rem;
  scroll-snap-align: start;
}

.eg-week-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.45rem 0.2rem;
  border-radius: 10px;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--eg-text-muted);
  background: var(--eg-surface-2);
  border: 1px solid var(--eg-border);
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--eg-week-color, #14B8A6) 55%, transparent);
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.eg-week-pill:hover {
  color: var(--eg-text);
  border-color: var(--eg-border-strong);
  background: var(--eg-surface-3);
}

.eg-plan-reset-btn {
  min-height: 2.25rem;
  min-width: 2.25rem;
}

.eg-plan-reset-btn.is-highlight {
  color: var(--eg-accent, #14B8A6);
  border-color: color-mix(in srgb, var(--eg-accent, #14B8A6) 45%, transparent);
  background: color-mix(in srgb, var(--eg-accent, #14B8A6) 12%, transparent);
}

.eg-week-pill.is-active {
  color: var(--eg-text);
  background: color-mix(in srgb, var(--eg-week-color, #14B8A6) 16%, #06080B);
  border-color: color-mix(in srgb, var(--eg-week-color, #14B8A6) 35%, rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 -2px 0 0 var(--eg-week-color, #14B8A6);
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .eg-week-pill {
    box-shadow: inset 0 -2px 0 0 var(--eg-week-color, #14B8A6);
    opacity: 0.92;
  }
  .eg-week-pill.is-active {
    background: var(--eg-surface-3);
    border-color: var(--eg-border-strong);
    box-shadow: inset 0 -2px 0 0 var(--eg-week-color, #14B8A6);
    opacity: 1;
  }
}

/* ─── Perfil alumno — hero avatar (Blackout) ─── */
.eg-profile-hero {
  position: relative;
}

.eg-profile-hero-public {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--eg-text-muted);
  background: var(--eg-surface-2);
  border: 1px solid var(--eg-border);
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.eg-profile-hero-public .material-symbols-outlined {
  font-size: 1.125rem;
  line-height: 1;
}

.eg-profile-hero-public:hover {
  color: var(--eg-accent);
  border-color: var(--eg-accent-border);
  background: var(--eg-accent-soft);
}

.eg-profile-hero-row {
  padding-right: 2.25rem;
}

.eg-profile-avatar-wrap {
  width: 5.25rem;
  height: 5.25rem;
  /* El botón edit sobresale: no recortar en cards con overflow */
  overflow: visible;
}

.eg-admin-form .eg-profile-avatar-wrap,
.eg-admin-card .eg-profile-avatar-wrap {
  margin: 0.15rem;
}

.eg-profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--eg-surface-3);
  border: 1px solid var(--eg-border-strong);
  box-shadow:
    0 0 0 3px var(--eg-bg),
    0 0 0 4px var(--eg-accent-border);
}

.eg-profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.eg-profile-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--eg-accent);
  background: var(--eg-surface-3);
}

.eg-profile-avatar-edit {
  position: absolute;
  right: -0.1rem;
  bottom: -0.1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--eg-accent-ink);
  background: var(--eg-accent);
  border: 2px solid var(--eg-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background-color 0.16s ease, transform 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

.eg-profile-avatar-edit .material-symbols-outlined {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.eg-profile-avatar-edit:hover {
  background: var(--eg-accent-bright);
  filter: brightness(1.08);
}

.eg-profile-avatar-edit:active {
  transform: scale(0.96);
}

.eg-profile-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.eg-profile-hero-name {
  margin: 0;
  font-family: var(--eg-font-sans);
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--eg-text);
}

.eg-profile-hero-since {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--eg-text-soft);
}

/* ═══════════════════════════════════════
   MI PERFIL (admin, profesor, editor)
   Tarjeta de identidad a la izquierda (arriba en móvil) y formulario en paneles.
   ═══════════════════════════════════════ */
.eg-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.eg-account__aside,
.eg-account__main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.eg-account-id {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
  background: var(--eg-surface);
}

.eg-account-id .eg-profile-avatar-wrap {
  width: 4.5rem;
  height: 4.5rem;
}

.eg-account-id__text {
  min-width: 0;
}

.eg-account-id__name {
  margin: 0;
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-lg);
  font-weight: 650;
  line-height: 1.25;
  color: var(--eg-text);
}

.eg-account-id__email {
  margin: 0.125rem 0 0;
  font-size: var(--eg-fs-sm);
  color: var(--eg-text-soft);
  overflow-wrap: anywhere;
}

.eg-account-id__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.eg-account-id__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.eg-account-id__hint {
  margin: 0.5rem 0 0;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

.eg-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem 1rem;
}

.eg-form-stack {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.eg-field__opt {
  margin-left: 0.25rem;
  font-weight: 500;
  color: var(--eg-text-soft);
}

.eg-field__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.eg-field__row > :is(input, select) {
  flex: 1 1 auto;
  min-width: 0;
}

/* Interruptor compacto (visibilidad de un dato, preferencias) */
.eg-switch-ui {
  position: relative;
  flex-shrink: 0;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: var(--eg-radius-pill);
  background: var(--eg-surface-3);
  box-shadow: inset 0 0 0 1px var(--eg-border-strong);
  transition: background-color var(--eg-dur-fast) var(--eg-ease);
}

.eg-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--eg-text-soft);
  transition: transform var(--eg-dur-fast) var(--eg-ease), background-color var(--eg-dur-fast) var(--eg-ease);
}

:is(.eg-vis, .eg-pref) > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

:is(.eg-vis, .eg-pref) > input:checked + .eg-switch-ui {
  background: var(--eg-accent);
  box-shadow: none;
}

:is(.eg-vis, .eg-pref) > input:checked + .eg-switch-ui::after {
  transform: translateX(1rem);
  background: var(--eg-accent-ink);
}

:is(.eg-vis, .eg-pref) > input:focus-visible + .eg-switch-ui {
  outline: 2px solid var(--eg-accent);
  outline-offset: 2px;
}

/* "Visible / Oculto" al lado del campo */
.eg-vis {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--eg-control-h);
  padding: 0 0.625rem;
  border: 1px solid var(--eg-border-field);
  border-radius: var(--eg-radius-md);
  background: var(--eg-field);
  color: var(--eg-text-soft);
  font-size: var(--eg-fs-xs);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--eg-dur-fast) var(--eg-ease), color var(--eg-dur-fast) var(--eg-ease), background-color var(--eg-dur-fast) var(--eg-ease);
}

.eg-vis:hover {
  border-color: var(--eg-border-field-hover);
}

.eg-vis:has(> input:checked) {
  border-color: var(--eg-accent-border);
  background: var(--eg-accent-soft);
  color: var(--eg-accent-text);
}

.eg-vis__on,
.eg-vis:has(> input:checked) .eg-vis__off {
  display: none;
}

.eg-vis:has(> input:checked) .eg-vis__on {
  display: inline;
}

/* Fila de preferencia (texto + interruptor) */
.eg-pref-list {
  display: flex;
  flex-direction: column;
}

.eg-pref {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--eg-border);
  font-size: var(--eg-fs-base);
  color: var(--eg-text);
  cursor: pointer;
}

.eg-pref:last-child {
  border-bottom: 0;
}

/* Barra de guardado: fija abajo en PC, al final del formulario en móvil */
.eg-account-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.eg-account-save__hint {
  margin: 0 auto 0 0;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

@media (max-width: 1023px) {
  .eg-account-save > .eg-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .eg-account-save__hint {
    display: none;
  }
}

@media (min-width: 640px) {
  .eg-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eg-form-grid > .is-wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .eg-account {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 1.5rem;
  }

  .eg-account__aside {
    position: sticky;
    top: 0;
  }

  .eg-account-id {
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.25rem;
    text-align: center;
  }

  .eg-account-id .eg-profile-avatar-wrap {
    width: 6rem;
    height: 6rem;
  }

  .eg-account-id__badges,
  .eg-account-id__actions {
    justify-content: center;
  }

  .eg-account-save {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 0.75rem 1rem;
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    background: color-mix(in srgb, var(--eg-surface) 90%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

@media (min-width: 1280px) {
  .eg-account__duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }
}

@media (max-width: 1279px) {
  .eg-account__duo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

/* ═══════════════════════════════════════
   Admin — Mapeo catálogo (desktop pro)
   ═══════════════════════════════════════ */
.eg-map-desk {
  width: 100%;
}
.eg-map-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--eg-border, rgba(255,255,255,0.08));
  background: var(--eg-surface);
}
.eg-map-kpi-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
}
.eg-map-kpi-value {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.eg-map-filters {
  flex: 1;
  min-width: 0;
}
.eg-map-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--eg-surface-2);
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 650;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.eg-map-filter:hover {
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.16);
}
.eg-map-filter.is-active {
  color: var(--eg-accent-ink);
  background: var(--eg-accent, #14b8a6);
  border-color: transparent;
}
.eg-map-filter em {
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  font-variant-numeric: tabular-nums;
}
.eg-map-filter.is-active em {
  background: rgba(0, 0, 0, 0.2);
}
.eg-map-input {
  background: var(--eg-field);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  font-size: 0.875rem;
  color: #f1f5f9;
  min-width: 200px;
}
.eg-map-input:focus {
  outline: none;
  border-color: rgba(20, 184, 166, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}
.eg-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--eg-surface-2);
  color: #cbd5e1;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.eg-map-btn:hover {
  color: #f8fafc;
  border-color: rgba(255,255,255,0.2);
}
.eg-map-btn--primary {
  background: var(--eg-accent, #14b8a6);
  border-color: transparent;
  color: var(--eg-accent-ink);
}
.eg-map-btn--primary:hover {
  filter: brightness(1.06);
  color: var(--eg-accent-ink);
}
.eg-map-btn--accent {
  border-color: rgba(20, 184, 166, 0.4);
  color: var(--eg-accent, #14b8a6);
  background: rgba(20, 184, 166, 0.08);
}
.eg-map-btn--ghost {
  background: transparent;
}
.eg-map-btn--lg {
  padding: 0.7rem 1.15rem;
  font-size: 0.9rem;
}
.eg-map-btn--sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  border-radius: 8px;
  border-color: rgba(20, 184, 166, 0.35);
  color: var(--eg-accent, #14b8a6);
  background: rgba(20, 184, 166, 0.1);
}
.eg-map-list-item {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.eg-map-list-item:hover {
  background: rgba(255,255,255,0.03);
}
.eg-map-list-item.is-selected {
  background: rgba(20, 184, 166, 0.1);
  box-shadow: inset 3px 0 0 var(--eg-accent, #14b8a6);
}
.eg-map-list-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--eg-surface-2);
  border: 1px solid rgba(255,255,255,0.08);
}
.eg-map-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eg-map-list-thumb-empty {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--eg-text-soft);
}
.eg-map-list-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.25;
}
.eg-map-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--eg-text-soft);
}
.eg-map-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--eg-surface-2);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: lowercase;
  color: #94a3b8;
}
.eg-map-badge--ok {
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
}
.eg-map-badge--warn {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.1);
}
.eg-map-badge--info {
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.1);
}
.eg-map-badge--muted {
  color: var(--eg-text-soft);
  border-color: rgba(100, 116, 139, 0.35);
}
.eg-map-side-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
  margin-bottom: 0.4rem;
}
.eg-map-detail-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f8fafc;
  line-height: 1.2;
  margin: 0;
}
.eg-map-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  color: #94a3b8;
}
.eg-map-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.eg-map-hint {
  font-size: 0.75rem;
  color: var(--eg-text-soft);
  line-height: 1.4;
}
.eg-map-hint strong {
  color: #94a3b8;
  font-weight: 700;
}
.eg-map-preview-block {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.eg-map-gif-frame {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.eg-map-gif-frame--empty {
  background: var(--eg-surface-2);
  color: var(--eg-text-soft);
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
}
.eg-map-gif-frame--empty .material-symbols-outlined {
  font-size: 1.75rem;
  opacity: 0.7;
}
.eg-map-gif {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.eg-map-catalog-name {
  font-size: 1.05rem;
  font-weight: 750;
  color: #f1f5f9;
  margin: 0;
  line-height: 1.25;
}
.eg-map-instr summary {
  font-size: 0.75rem;
  color: #94a3b8;
  cursor: pointer;
}
.eg-map-instr p {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: #cbd5e1;
  white-space: pre-wrap;
  line-height: 1.45;
}
.eg-map-lib-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin: 0;
}
.eg-map-lib-row:last-child {
  border-bottom: 0;
}
.eg-map-lib-row.is-current {
  background: rgba(56, 189, 248, 0.06);
}
.eg-map-lib-row-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--eg-surface-2);
  border: 1px solid rgba(255,255,255,0.08);
}
.eg-map-lib-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 1024px) {
  .eg-map-workspace {
    min-height: 0;
  }
  .eg-map-list-panel,
  .eg-map-detail-panel {
    min-height: calc(100vh - 15.5rem);
    max-height: calc(100vh - 15.5rem);
  }
  .eg-map-gif-frame {
    max-width: 360px;
  }
}
@media (max-width: 1023px) {
  .eg-map-list-panel {
    max-height: 280px;
  }
  .eg-map-desk main,
  main:has(.eg-map-desk) {
    overflow-y: auto;
  }
}

.eg-map-lib-row-thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--eg-surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  color: inherit;
}
.eg-map-lib-row-thumb:disabled {
  cursor: default;
  opacity: 0.7;
}
.eg-map-lib-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eg-map-gif-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem !important;
  color: #fff;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.eg-map-lib-row-thumb:hover .eg-map-gif-play,
.eg-map-lib-row-thumb:focus-visible .eg-map-gif-play {
  opacity: 1;
}
.eg-map-gif-pop {
  position: fixed;
  z-index: 80;
  width: min(320px, calc(100vw - 1.5rem));
  max-height: min(70vh, 420px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--eg-field);
  box-shadow: var(--eg-shadow-overlay);
  overflow: hidden;
  pointer-events: auto;
}
.eg-map-gif-pop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem 0.45rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.75rem;
  font-weight: 650;
  color: #cbd5e1;
}
.eg-map-gif-pop-frame {
  background: #fff;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eg-map-gif-pop-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* Profesor: ficha del alumno */

/* Ficha alumno */
.profesor-app .eg-student-header {
  gap: 0.85rem !important;
  margin-bottom: 1rem !important;
  padding: 0.85rem 1rem !important;
  border-radius: 12px !important;
}

.profesor-app .eg-student-header #alumno-foto,
.profesor-app .eg-student-header .eg-student-avatar {
  width: 4.25rem !important;
  height: 4.25rem !important;
  border-radius: 12px !important;
}

.profesor-app .eg-student-header .eg-prof-action-group > a,
.profesor-app .eg-student-header .eg-prof-action-group > button {
  min-height: 32px;
  padding: 0.3rem 0.7rem !important;
  font-size: 0.75rem !important;
}

.profesor-app .eg-student-tabs {
  margin-bottom: 1rem !important;
  gap: 0.1rem;
  border-color: var(--eg-border) !important;
}

.profesor-app .eg-student-tabs > a,
.profesor-app .eg-student-tabs > span {
  padding: 0.55rem 0.8rem !important;
  font-size: 0.8125rem !important;
  font-weight: 650 !important;
}

.profesor-app .eg-student-tabs > a:hover {
  color: #E2E8F0 !important;
}

/* ═══════════════════════════════════════
   PREMIUM 9.1 — Ficha alumno profe (mobile compact = look alumno)
   ═══════════════════════════════════════ */

@media (max-width: 1023px) {
  /* Columna: identidad arriba, acciones abajo (no apretar todo en una fila) */
  .profesor-app .eg-student-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.7rem !important;
    margin-bottom: 0.75rem !important;
    padding: 0.75rem !important;
  }

  .profesor-app .eg-student-header > .flex.items-center {
    gap: 0.7rem !important;
    min-width: 0;
    width: 100%;
  }

  .profesor-app .eg-student-header #alumno-foto,
  .profesor-app .eg-student-header .eg-student-avatar {
    width: 3.25rem !important;
    height: 3.25rem !important;
    border-radius: 11px !important;
  }

  .profesor-app .eg-student-header h1,
  .profesor-app .eg-student-header #alumno-nombre {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }

  .profesor-app .eg-student-header #alumno-meta {
    font-size: 0.7rem !important;
    margin-top: 0.15rem !important;
    gap: 0.25rem !important;
  }

  .profesor-app .eg-student-header #alumno-meta .mx-2 {
    margin-left: 0.2rem !important;
    margin-right: 0.2rem !important;
  }

  .profesor-app .eg-student-header #alumno-ultima-sesion {
    display: block;
    font-size: 0.65rem !important;
    margin-top: 0.15rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profesor-app .eg-student-header .eg-prof-action-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 0.4rem !important;
  }

  .profesor-app .eg-student-header .eg-prof-action-group > a,
  .profesor-app .eg-student-header .eg-prof-action-group > button {
    min-height: 34px;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.75rem !important;
  }

  .profesor-app .eg-student-header .eg-prof-action-group .material-symbols-outlined {
    font-size: 1rem !important;
  }

  /* En Datos: botones más legibles; texto corto en "Actualizar Rutina" si hace falta */
  .profesor-app .eg-student-header #btn-rutina {
    flex: 1 1 auto;
  }

  .profesor-app .eg-student-tabs {
    margin-bottom: 0.65rem !important;
  }

  .profesor-app .eg-student-tabs > a,
  .profesor-app .eg-student-tabs > span {
    padding: 0.45rem 0.55rem !important;
    font-size: 0.72rem !important;
  }

  .profesor-app #comidas-list > div,
  .profesor-app #suplementos-list > div {
    padding: 0.65rem 0.75rem !important;
    border-radius: 10px !important;
  }

  /* Banners de plan: más chicos */
  .profesor-app #rutina-sin-plan-banner,
  .profesor-app #rutina-limite-plan-banner,
  .profesor-app #dieta-plan-banner {
    padding: 0.65rem 0.75rem !important;
    margin-bottom: 0.65rem !important;
    gap: 0.65rem !important;
  }

  .profesor-app #rutina-sin-plan-banner .material-symbols-outlined,
  .profesor-app #rutina-limite-plan-banner .material-symbols-outlined,
  .profesor-app #dieta-plan-banner .material-symbols-outlined {
    font-size: 1.35rem !important;
  }
}


/* ═══════════════════════════════════════
   ANÁLISIS (reportes y paneles): filtro de período, KPI con variación y tendencia,
   paneles con encabezado, leyendas, medidores, alertas accionables y tablas de datos.
   JS: assets/js/eg-analytics.js (EgFmt, EgSpark, EgTable, EgCharts).
   ═══════════════════════════════════════ */
.eg-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0.75rem;
  margin-bottom: 1.25rem;
}

.eg-range__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.eg-range__custom.hidden {
  display: none;
}

.eg-range__custom input[type="date"] {
  width: auto;
  min-width: 9.75rem;
  color-scheme: dark;
}

.eg-range__sep {
  font-size: var(--eg-fs-sm);
  color: var(--eg-text-soft);
}

.eg-range__label {
  margin-left: auto;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

.eg-range__label strong {
  font-weight: 650;
  color: var(--eg-text-2);
}

.eg-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.eg-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
  padding: 1rem 1.125rem 0;
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
}

.eg-stat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.eg-stat__label {
  margin: 0;
  padding-top: 0.25rem;
  font-size: var(--eg-fs-sm);
  font-weight: 600;
  color: var(--eg-text-muted);
}

.eg-stat__value {
  margin: 0.25rem 0 0;
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-kpi);
  font-weight: 600;
  line-height: var(--eg-lh-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--eg-text);
}

.eg-stat__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  min-height: 1.5rem;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

.eg-stat__spark {
  height: 2.75rem;
  margin: 0.5rem -1.125rem 0;
  color: var(--eg-accent);
}

.eg-stat__spark--info { color: var(--eg-info); }
.eg-stat__spark--warn { color: var(--eg-warning); }

.eg-spark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.eg-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.0625rem 0.4375rem 0.0625rem 0.3125rem;
  border-radius: var(--eg-radius-pill);
  font-size: var(--eg-fs-2xs);
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.eg-delta .material-symbols-outlined {
  font-size: 0.9375rem;
  color: inherit;
}

/* Tarjetas KPI existentes (admin y profesor) con variación y minigráfico al pie */
:is(.eg-admin-kpi, .eg-kpi) > .eg-stat__foot {
  margin-top: 0.5rem;
}

:is(.eg-admin-kpi, .eg-kpi) > .eg-stat__spark {
  height: 2.5rem;
  margin: auto -1.25rem -1.125rem;
  padding-top: 0.5rem;
}

:is(.eg-admin-kpi, .eg-kpi):has(> .eg-stat__spark) {
  overflow: hidden;
}

.eg-delta--good { background: var(--eg-success-soft); color: var(--eg-success-text); }
.eg-delta--bad { background: var(--eg-danger-soft); color: var(--eg-danger-text); }
.eg-delta--flat { background: rgba(255, 255, 255, 0.06); color: var(--eg-text-muted); }

.eg-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
}

.eg-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.125rem 0.5rem;
}

.eg-panel__title {
  margin: 0;
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--eg-text);
}

.eg-panel__sub {
  margin: 0.125rem 0 0;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

.eg-panel__value {
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-2xl);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--eg-text);
  white-space: nowrap;
}

.eg-panel__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}

.eg-panel__body {
  min-width: 0;
  padding: 0.5rem 1.125rem 1.125rem;
}

.eg-panel__body--flush {
  padding: 0;
}

.eg-panel > .eg-admin-tabs {
  margin: 0;
  padding: 0 1.125rem;
}

.eg-chart {
  position: relative;
  height: 15rem;
}

.eg-chart--sm {
  height: 12.5rem;
}

.eg-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  text-align: center;
  font-size: var(--eg-fs-sm);
  color: var(--eg-text-soft);
}

.eg-chart-empty.hidden {
  display: none;
}

.eg-chart-empty .material-symbols-outlined {
  font-size: 1.75rem;
  opacity: 0.7;
}

.eg-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.eg-legend--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin: 0 0 0.625rem;
}

.eg-legend__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--eg-fs-sm);
}

.eg-legend--inline .eg-legend__row {
  font-size: var(--eg-fs-xs);
}

.eg-legend__dot {
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
  border-radius: 3px;
}

.eg-legend__label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--eg-text-2);
}

.eg-legend--inline .eg-legend__label {
  flex: 0 1 auto;
  color: var(--eg-text-muted);
}

.eg-legend__val {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--eg-text);
}

.eg-legend__pct {
  width: 2.75rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--eg-text-soft);
}

.eg-kv {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 0 0;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

.eg-kv strong {
  margin-left: 0.25rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--eg-text-2);
}

.eg-kv .is-warn {
  color: var(--eg-warning-text);
}

.eg-meter + .eg-meter {
  margin-top: 0.875rem;
}

.eg-meter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  font-size: var(--eg-fs-sm);
}

.eg-meter__label {
  color: var(--eg-text-2);
}

.eg-meter__val {
  font-size: var(--eg-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--eg-text-soft);
  white-space: nowrap;
}

.eg-meter__val strong {
  font-size: var(--eg-fs-sm);
  font-weight: 650;
  color: var(--eg-text);
}

.eg-meter__track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--eg-radius-pill);
  background: rgba(255, 255, 255, 0.06);
}

.eg-meter__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--eg-accent);
  transition: width var(--eg-dur-slow) var(--eg-ease);
}

.eg-meter__fill--warn { background: var(--eg-warning); }
.eg-meter__fill--danger { background: var(--eg-danger); }
.eg-meter__fill--info { background: var(--eg-info); }

.eg-insights {
  display: flex;
  flex-direction: column;
}

.eg-insight {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--eg-border-soft);
  color: inherit;
  text-decoration: none;
}

.eg-insight:first-child {
  padding-top: 0.25rem;
  border-top: 0;
}

.eg-insight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--eg-radius-md);
  background: var(--eg-warning-soft);
  color: var(--eg-warning);
}

.eg-insight__icon .material-symbols-outlined { font-size: 1.25rem; }
.eg-insight__icon--danger { background: var(--eg-danger-soft); color: var(--eg-danger); }
.eg-insight__icon--info { background: var(--eg-info-soft); color: var(--eg-info); }
.eg-insight__icon--ok { background: var(--eg-success-soft); color: var(--eg-success); }

.eg-insight__body {
  flex: 1 1 auto;
  min-width: 0;
}

.eg-insight__title {
  display: block;
  margin: 0;
  font-size: var(--eg-fs-sm);
  font-weight: 650;
  color: var(--eg-text);
}

.eg-insight__desc {
  display: block;
  margin: 0.125rem 0 0;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
}

.eg-insight__count {
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--eg-text);
}

.eg-insight__chev {
  font-size: 1.25rem;
  color: var(--eg-text-soft);
}

a.eg-insight:hover .eg-insight__title,
a.eg-insight:hover .eg-insight__chev {
  color: var(--eg-accent-text);
}

.eg-dt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.875rem 1.125rem;
}

.eg-dt-toolbar > input[type="search"] {
  flex: 0 1 18rem;
  min-width: 0;
}

.eg-dt-toolbar > select {
  width: auto;
  min-width: 11rem;
}

.eg-dt-toolbar__count {
  margin-left: auto;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
  white-space: nowrap;
}

.eg-dt-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--eg-control-h);
  padding: 0 0.875rem;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--eg-radius-md);
  background: var(--eg-surface-2);
  color: var(--eg-text);
  font-size: var(--eg-fs-sm);
  font-weight: 650;
  white-space: nowrap;
}

.eg-dt-toolbar__btn:hover {
  background: var(--eg-surface-3);
}

.eg-dt-toolbar__btn .material-symbols-outlined {
  font-size: 1.125rem;
}

.eg-dt__scroll {
  max-height: 34rem;
  overflow: auto;
  border-top: 1px solid var(--eg-border);
}

.eg-dt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--eg-fs-sm);
}

.eg-dt thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.625rem 0.875rem;
  background: var(--eg-surface-2);
  border-bottom: 1px solid var(--eg-border);
  text-align: left;
  font-size: var(--eg-fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
  white-space: nowrap;
}

.eg-dt tbody td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--eg-border-soft);
  color: var(--eg-text-2);
  vertical-align: middle;
}

.eg-dt tbody tr:last-child td {
  border-bottom: 0;
}

.eg-dt tbody tr:hover td {
  background: var(--eg-hover);
}

.eg-dt :is(th, td):first-child { padding-left: 1.125rem; }
.eg-dt :is(th, td):last-child { padding-right: 1.125rem; }

.eg-dt .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.eg-dt .is-muted {
  color: var(--eg-text-soft);
}

.eg-dt__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.eg-dt .is-num .eg-dt__sort {
  flex-direction: row-reverse;
}

.eg-dt__sort .material-symbols-outlined {
  font-size: 0.9375rem;
  opacity: 0.4;
}

.eg-dt__sort:hover,
.eg-dt__sort.is-active {
  color: var(--eg-text);
}

.eg-dt__sort.is-active .material-symbols-outlined {
  opacity: 1;
  color: var(--eg-accent);
}

.eg-dt__empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--eg-text-soft);
}

.eg-dt__foot {
  display: flex;
  justify-content: center;
  padding: 0.75rem;
  border-top: 1px solid var(--eg-border-soft);
}

.eg-dt__more {
  min-height: 2.25rem;
  padding: 0 1rem;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--eg-radius-md);
  background: var(--eg-surface-2);
  color: var(--eg-text);
  font-size: var(--eg-fs-sm);
  font-weight: 650;
}

.eg-dt__more:hover {
  background: var(--eg-surface-3);
}

.eg-dt__more span {
  font-weight: 500;
  color: var(--eg-text-soft);
}

.eg-person {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.eg-person__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--eg-radius-pill);
  background: var(--eg-accent-soft);
  color: var(--eg-accent-text);
  font-size: var(--eg-fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.eg-person__text {
  min-width: 0;
}

.eg-person__name {
  display: block;
  overflow: hidden;
  font-weight: 650;
  color: var(--eg-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eg-person__sub {
  display: block;
  overflow: hidden;
  font-size: var(--eg-fs-2xs);
  color: var(--eg-text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eg-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 8rem;
}

.eg-bar__track {
  flex: 1 1 auto;
  min-width: 3rem;
  height: 0.375rem;
  overflow: hidden;
  border-radius: var(--eg-radius-pill);
  background: rgba(255, 255, 255, 0.07);
}

.eg-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--eg-accent);
}

.eg-bar__fill--warn { background: var(--eg-warning); }
.eg-bar__fill--danger { background: var(--eg-danger); }
.eg-bar__fill--info { background: var(--eg-info); }

.eg-bar__val {
  width: 2.75rem;
  text-align: right;
  font-size: var(--eg-fs-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--eg-text-2);
}

.eg-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--eg-radius-xs);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--eg-fs-2xs);
  font-weight: 700;
  color: var(--eg-text-muted);
}

.eg-rank--top {
  background: var(--eg-accent-soft);
  color: var(--eg-accent-text);
}

@media (max-width: 1279px) {
  .eg-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .eg-range > .eg-segmented {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .eg-range > .eg-segmented::-webkit-scrollbar {
    display: none;
  }

  .eg-range__label {
    width: 100%;
    margin-left: 0;
  }

  .eg-stat-grid {
    gap: 0.5rem;
  }

  .eg-stat {
    padding: 0.875rem 0.875rem 0;
  }

  .eg-stat__spark {
    height: 2.25rem;
    margin-inline: -0.875rem;
  }

  .eg-panel__head {
    flex-wrap: wrap;
  }

  .eg-dt-toolbar > input[type="search"] {
    flex: 1 1 100%;
  }

  .eg-dt-toolbar__count {
    margin-left: 0;
  }
}

/* ═══════════════════════════════════════
   BOTÓN DE ÍCONO ESTÁNDAR
   Un solo tamaño en toda la app: --eg-icon-btn (32 px escritorio, 40 px táctil).
   .eg-icon-btn en marcado nuevo; eg-a11y.js marca con .eg-icon-only los botones
   de solo ícono existentes. Quedan fuera los que fijan su propio tamaño (w-/h-/size-),
   los que van dentro de un campo (absolute) y los controles especiales listados.
   ═══════════════════════════════════════ */
.eg-icon-btn:not(.hidden) {
  display: inline-flex;
}

/* Solo tamaño: nunca se fija display (cada botón conserva cómo se muestra u oculta) */
.eg-icon-btn:not(.hidden),
:is(main, .fixed.inset-0) :is(button, a).eg-icon-only:not(.absolute):not([class*="hidden"]):not([class*="fab"]):not([class^="w-"]):not([class*=" w-"]):not([class^="h-"]):not([class*=" h-"]):not([class^="size-"]):not([class*=" size-"]):not(.bg-primary):not(.eg-routine-head-edit):not(.eg-profile-avatar-edit):not(.ej-btn-desc):not(.eg-routine-ico):not(.eg-row-check-btn):not(.ej-entreno-check):not(.comida-check):not(.sup-check):not(.comida-check-dash):not(.sup-check-dash):not(.eg-home-row-check):not(.eg-lib-instr-toggle):not(.eg-switch) {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--eg-icon-btn);
  height: var(--eg-icon-btn);
  min-width: var(--eg-icon-btn);
  min-height: var(--eg-icon-btn);
  padding: 0;
  border-radius: var(--eg-radius-md);
  line-height: 1;
}

.eg-icon-btn > .material-symbols-outlined,
:is(main, .fixed.inset-0) :is(button, a).eg-icon-only:not(.absolute):not([class*="hidden"]):not([class*="fab"]):not([class^="w-"]):not([class*=" w-"]):not([class^="h-"]):not([class*=" h-"]):not([class^="size-"]):not([class*=" size-"]):not(.bg-primary):not(.eg-routine-head-edit):not(.eg-profile-avatar-edit):not(.ej-btn-desc):not(.eg-routine-ico):not(.eg-row-check-btn):not(.ej-entreno-check):not(.comida-check):not(.sup-check):not(.comida-check-dash):not(.sup-check-dash):not(.eg-home-row-check):not(.eg-lib-instr-toggle):not(.eg-switch) > .material-symbols-outlined {
  font-size: var(--eg-icon-glyph);
  line-height: 1;
}

.eg-icon-btn {
  border: 1px solid var(--eg-border-strong);
  background: var(--eg-surface-2);
  color: var(--eg-text-2);
  cursor: pointer;
  transition: background-color var(--eg-dur-fast) var(--eg-ease), color var(--eg-dur-fast) var(--eg-ease), border-color var(--eg-dur-fast) var(--eg-ease);
}

.eg-icon-btn:hover:not(:disabled) {
  background: var(--eg-surface-3);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--eg-text);
}

.eg-icon-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--eg-text-muted);
}

.eg-icon-btn--ghost:hover:not(:disabled) {
  border-color: transparent;
  background: var(--eg-hover-strong);
}

.eg-icon-btn--danger {
  border-color: var(--eg-danger-border);
  background: transparent;
  color: var(--eg-danger-text);
}

.eg-icon-btn--danger:hover:not(:disabled) {
  border-color: var(--eg-danger-border);
  background: var(--eg-danger-soft);
  color: #FECACA;
}

.eg-icon-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════
   EDITOR DE RUTINA (profesor y admin): semanas, días, ejercicios y acciones del día
   ═══════════════════════════════════════ */
.eg-rx-editor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.eg-rx-plan {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

.eg-rx-plan__label {
  font-size: var(--eg-fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-text-soft);
}

/* Semanas: pastillas del mismo alto que los botones de ícono */
.eg-rx-editor #semana-row:not(.hidden) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.eg-rx-editor #plan-semanas-controles {
  align-self: center;
  gap: 0.375rem;
}

.eg-rx-editor .semana-btn {
  min-height: var(--eg-icon-btn);
  padding: 0 0.75rem;
  border-width: 1px !important;
  border-radius: var(--eg-radius-md) !important;
  font-size: var(--eg-fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Días: control segmentado de 7 columnas */
.eg-rx-editor #dia-selector {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
  width: 100%;
  padding: 0.25rem !important;
  overflow: visible;
  background: var(--eg-surface) !important;
  border: 1px solid var(--eg-border) !important;
  border-radius: var(--eg-radius-md) !important;
}

.eg-rx-editor #dia-selector .dia-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.25rem 0;
  border: 0 !important;
  border-radius: var(--eg-radius-sm) !important;
  background: transparent !important;
  color: var(--eg-text-soft) !important;
  font-weight: 650;
  line-height: 1.1;
}

.eg-rx-editor #dia-selector .dia-btn.has-ej {
  color: var(--eg-text-2) !important;
}

.eg-rx-editor #dia-selector .dia-btn:hover {
  background: var(--eg-hover-strong) !important;
  color: var(--eg-text) !important;
}

.eg-rx-editor #dia-selector .dia-btn.bg-primary {
  background: var(--eg-accent) !important;
  color: var(--eg-accent-ink) !important;
}

.eg-rx-editor #dia-selector .dia-btn > span:first-child {
  font-size: var(--eg-fs-sm);
  font-weight: 700;
}

.eg-rx-editor #dia-selector .dia-btn > span + span:not(.dia-override-dot) {
  font-size: 0.625rem;
  font-weight: 600;
  opacity: 0.8;
}

/* Rutina pre-armada: etiqueta + selector y botón en una fila */
.eg-rx-plantilla {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
}

.eg-rx-plantilla__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: var(--eg-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--eg-text-muted);
}

.eg-rx-plantilla__label .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--eg-accent);
}

.eg-rx-plantilla__row {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.eg-rx-plantilla__row > select {
  flex: 1 1 auto;
  min-width: 0;
}

.eg-rx-plantilla__row > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  min-height: var(--eg-control-h);
  padding: 0 1rem;
  border: 1px solid var(--eg-accent-border);
  border-radius: var(--eg-radius-md);
  background: var(--eg-accent-soft);
  color: var(--eg-accent-text);
  font-size: var(--eg-fs-base);
  font-weight: 650;
  white-space: nowrap;
}

.eg-rx-plantilla__row > button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--eg-accent) 22%, transparent);
}

.eg-rx-plantilla__row > button .material-symbols-outlined {
  font-size: 1.125rem;
}

/* Encabezado del día */
.eg-rx-editor .eg-routine-head {
  margin: 0 0 0.5rem;
}

.eg-rx-editor .eg-routine-head h3 {
  margin: 0;
  font-family: var(--eg-font-display);
  font-size: var(--eg-fs-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--eg-text);
}

.eg-rx-editor #rutina-cant-ej {
  font-size: var(--eg-fs-xs);
  font-weight: 600;
  color: var(--eg-text-soft);
}

.eg-rx-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* Tarjeta de ejercicio: orden · contenido · super serie · acciones (una fila en escritorio) */
.eg-rx {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "order main ss actions";
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  background: var(--eg-surface) !important;
  border: 1px solid var(--eg-border) !important;
  border-radius: var(--eg-radius);
  box-shadow: none !important;
}

.eg-rx:hover {
  border-color: var(--eg-border-strong) !important;
}

.eg-rx:not(:has(> .eg-rx__ss)) {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "order main actions";
}

.eg-rx__order {
  grid-area: order;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.eg-rx__main {
  grid-area: main;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.eg-rx__ss {
  grid-area: ss;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--eg-icon-btn);
  padding: 0 0.75rem;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--eg-radius-md);
  color: var(--eg-text-muted);
  font-size: var(--eg-fs-xs);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.eg-rx__ss input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border-radius: 4px;
  color: var(--eg-warning) !important;
  cursor: pointer;
}

.eg-rx__ss:has(input:checked) {
  border-color: var(--eg-warning-border);
  background: var(--eg-warning-soft);
  color: var(--eg-warning-text);
}

.eg-rx__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.eg-rx__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem !important;
  height: 3rem !important;
  margin: 0 !important;
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-sm);
  background: var(--eg-surface-2);
  object-fit: cover;
  color: var(--eg-text-soft);
}

.eg-rx__thumb .material-symbols-outlined {
  font-size: 1.375rem;
}

.eg-rx__thumb-btn,
.ej-agregar-thumb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--eg-radius-sm);
}

.eg-rx__thumb-btn:focus-visible,
.ej-agregar-thumb-btn:focus-visible {
  outline: 2px solid var(--eg-accent);
  outline-offset: 2px;
}

.eg-rx__thumb-play,
.ej-agregar-thumb-play {
  position: absolute;
  right: 1px;
  bottom: 1px;
  font-size: 16px !important;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.ej-agregar-thumb-btn .ej-agregar-thumb {
  display: block;
}

.eg-rx__body {
  flex: 1 1 auto;
  min-width: 0;
}

.eg-rx__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.eg-rx__title h4 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--eg-fs-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--eg-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eg-rx__badge,
.eg-rx__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--eg-radius-xs);
  background: transparent;
  color: var(--eg-accent);
}

.eg-rx__info {
  color: var(--eg-text-soft);
  cursor: pointer;
}

.eg-rx__info:hover {
  color: var(--eg-text);
  background: var(--eg-hover-strong);
}

.eg-rx__badge .material-symbols-outlined,
.eg-rx__info .material-symbols-outlined {
  font-size: 1.0625rem;
}

.eg-rx__variant {
  margin: 0.125rem 0 0;
  overflow: hidden;
  font-size: var(--eg-fs-xs);
  color: var(--eg-text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eg-rx__sets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.375rem;
  margin-top: 0.375rem;
}

.eg-rx__set {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--eg-radius-pill);
  background: var(--eg-accent-soft);
  color: var(--eg-accent-text);
  font-size: var(--eg-fs-xs);
  font-weight: 650;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.eg-rx__set.is-empty {
  background: rgba(255, 255, 255, 0.05);
  color: var(--eg-text-soft);
}

/* Super serie: bloque con cabecera ámbar; se mueve entero y cada ejercicio conserva sus acciones */
.eg-rx-super {
  min-width: 0;
  overflow: hidden;
  background: var(--eg-surface);
  border: 1px solid var(--eg-warning-border);
  border-radius: var(--eg-radius);
}

.eg-rx-super__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: var(--eg-warning-soft);
  border-bottom: 1px solid var(--eg-warning-border);
}

.eg-rx-super__badge {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  font-size: var(--eg-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--eg-warning-text);
}

.eg-rx-super__badge .material-symbols-outlined {
  font-size: 1.125rem;
}

.eg-rx-super__split {
  display: inline-flex;
  align-items: center;
  min-height: var(--eg-icon-btn);
  padding: 0 0.75rem;
  border: 1px solid var(--eg-warning-border);
  border-radius: var(--eg-radius-md);
  background: transparent;
  color: var(--eg-warning-text);
  font-size: var(--eg-fs-xs);
  font-weight: 650;
  white-space: nowrap;
}

.eg-rx-super__split:hover {
  background: rgba(251, 191, 36, 0.16);
}

.eg-rx-super__items > .eg-rx {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main actions";
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
}

.eg-rx-super__items > .eg-rx + .eg-rx {
  border-top: 1px solid var(--eg-border) !important;
}

/* Calentamiento del día */
.eg-rx-warmup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: var(--eg-radius);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), transparent 60%), var(--eg-surface);
}

.eg-rx-warmup__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--eg-radius-sm);
  background: rgba(249, 115, 22, 0.16);
  color: #FB923C;
}

.eg-rx-warmup__body {
  flex: 1 1 auto;
  min-width: 0;
}

.eg-rx-warmup__label {
  margin: 0;
  font-size: var(--eg-fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FDBA74;
}

.eg-rx-warmup__text {
  margin: 0.125rem 0 0;
  font-size: var(--eg-fs-sm);
  line-height: 1.45;
  color: var(--eg-text-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Acciones del día */
.eg-rx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.eg-rx-actions > button:not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: var(--eg-btn-h);
  padding: 0 1rem;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--eg-radius-md);
  background: var(--eg-surface-2);
  color: var(--eg-text);
  font-size: var(--eg-fs-base);
  font-weight: 650;
}

.eg-rx-actions > button:hover {
  background: var(--eg-surface-3);
}

.eg-rx-actions > button .material-symbols-outlined {
  font-size: 1.25rem;
}

.eg-rx-actions > #btn-add-ejercicio {
  border-color: var(--eg-accent);
  background: var(--eg-accent);
  color: var(--eg-accent-ink);
}

.eg-rx-actions > #btn-add-ejercicio:hover {
  background: var(--eg-accent-hover);
}

.eg-rx-actions > #btn-calentamiento-fab .material-symbols-outlined {
  color: #FB923C;
}

/* Teléfono: contenido arriba a todo el ancho y barra de acciones abajo */
@media (max-width: 767px) {
  .eg-rx {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "main main main"
      "order ss actions";
    gap: 0;
    padding: 0;
  }

  .eg-rx__main {
    padding: 0.75rem;
  }

  .eg-rx__order,
  .eg-rx__ss,
  .eg-rx__actions {
    border-top: 1px solid var(--eg-border);
  }

  .eg-rx__order {
    padding: 0.5rem 0.375rem 0.5rem 0.5rem;
  }

  .eg-rx__ss {
    align-self: stretch;
    margin: 0;
    padding: 0 0.5rem;
    border-width: 1px 0 0;
    border-color: var(--eg-border);
    border-radius: 0;
    background: transparent;
  }

  .eg-rx__ss:has(input:checked) {
    border-color: var(--eg-border);
    background: var(--eg-warning-soft);
  }

  .eg-rx__actions {
    padding: 0.5rem 0.5rem 0.5rem 0;
  }

  .eg-rx:not(:has(> .eg-rx__ss)) {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "main main"
      "order actions";
  }

  .eg-rx-super__items > .eg-rx {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "actions";
  }

  .eg-rx-super__items > .eg-rx .eg-rx__actions {
    padding-left: 0.5rem;
  }

  .eg-rx-warmup {
    align-items: flex-start;
  }

  .eg-rx-warmup .eg-rx__actions {
    flex-direction: column;
    padding: 0;
    border-top: 0;
  }

  .eg-rx-actions > #btn-add-ejercicio {
    flex: 1 1 100%;
  }

  .eg-rx-actions > button:not(#btn-add-ejercicio) {
    flex: 1 1 0;
  }

  .eg-rx-plantilla__row > button {
    padding: 0 0.875rem;
  }
}

/* ═══════════════════════════════════════
   SERIES (modal editar/agregar ejercicio)
   Escritorio: una fila con encabezado de columnas. Teléfono: cada serie es una tarjeta;
   arriba Reps · Kilos · Seg y abajo Descanso · RIR, cada campo con su etiqueta.
   ═══════════════════════════════════════ */
.eg-series-head,
.eg-series-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 4rem 6rem 3.5rem var(--eg-icon-btn);
  align-items: end;
  gap: 0.5rem;
}

.eg-series-head {
  margin-bottom: 0.375rem;
  font-size: var(--eg-fs-xs);
  font-weight: 650;
  color: var(--eg-text-muted);
}

.eg-series-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.eg-series-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
}

.eg-series-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.eg-series-field > input {
  width: 100%;
  min-width: 0;
  padding-inline: 0.625rem !important;
}

.eg-series-field--num > input {
  text-align: center;
}

.eg-series-remove {
  align-self: end;
  border-color: transparent;
  background: transparent;
  color: var(--eg-text-muted);
}

.eg-series-remove:hover:not(:disabled) {
  border-color: transparent;
  background: var(--eg-danger-soft);
  color: var(--eg-danger-text);
}

@media (max-width: 640px) {
  .eg-series-head {
    display: none;
  }

  .eg-series-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "sets peso tiempo"
      "rest rir remove";
    gap: 0.625rem 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius-md);
    background: var(--eg-surface-2);
  }

  .eg-series-field--sets { grid-area: sets; }
  .eg-series-field--peso { grid-area: peso; }
  .eg-series-field--tiempo { grid-area: tiempo; }
  .eg-series-field--rest { grid-area: rest; }
  .eg-series-field--rir { grid-area: rir; }

  .eg-series-remove {
    grid-area: remove;
    justify-self: end;
  }

  .eg-series-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: var(--eg-fs-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--eg-text-muted);
  }
}

/* ═══════════════════════════════════════
   RESPONSIVE (consolidado)
   ═══════════════════════════════════════ */

/* Enlaces de texto secundarios: área clicable mínima de ~24px sin desplazar el layout */
:is(main, .fixed.inset-0) :is(a, button):is(.text-primary, [class*="hover:underline"]):is(.text-xs, .text-sm, .text-\[10px\], .text-\[11px\], .text-\[12px\]):not([class*=" py-"]):not([class^="py-"]):not([class*=" p-"]):not([class^="p-"]):not([class*=" h-"]):not([class*="min-h"]):not(.eg-action-link):not(.eg-link-action) {
  padding-block: 0.3125rem;
  margin-block: -0.3125rem;
}

/* Táctil o ancho reducido: objetivos de 44px en acciones principales */
@media (max-width: 1023px), (pointer: coarse) {
  :root {
    --eg-btn-h: 44px;
    --eg-btn-h-sm: 40px;
    --eg-control-h: 44px;
    --eg-icon-btn: 2.5rem;
    --eg-icon-glyph: 1.25rem;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
  select,
  textarea {
    font-size: 1rem;
  }

  :is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header :is(button, a).relative,
  :is(.admin-app, .profesor-app, .editor-app, .alumno-app) > header button.p-2 {
    width: 2.75rem;
    height: 2.75rem;
  }

  .eg-prof-action-group > a,
  .eg-prof-action-group > button,
  .eg-admin-action-group > a,
  .eg-admin-action-group > button,
  td a:has(> .material-symbols-outlined:only-child),
  :is(main, .fixed.inset-0) button:has(> .material-symbols-outlined:only-child):not(.eg-routine-ico):not(.eg-row-check-btn):not(.ej-entreno-check):not(.comida-check):not(.sup-check):not(.comida-check-dash):not(.sup-check-dash):not(.eg-home-row-check):not(.eg-switch):not([role="switch"]):not(.eg-profile-avatar-edit):not(.eg-routine-head-edit):not(.eg-lib-instr-toggle):not(.bg-primary):not(.eg-page-actions > *):not(.eg-admin-toolbar-actions > *):not(.eg-prof-toolbar-actions > *) {
    min-width: 2.5rem;
    min-height: 2.5rem;
  }

  #tabla-usuarios .eg-admin-action-group--dense > :is(a, button),
  #tabla-usuarios .eg-admin-action-group--dense > :is(a, button).eg-icon-only {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
  }

  #tabla-usuarios :is(th, td).eg-col-actions {
    min-width: 12.5rem;
  }

  .eg-filter-bar :is(.filtro-alumno, .adh-filtro),
  .eg-filter-bar > button,
  .eg-admin-filter-bar .filtro-usuario,
  .eg-admin-filter-bar > button:not(.bg-primary),
  .eg-admin-filter-bar > a:not(.bg-primary) {
    min-height: 2.25rem;
    padding-inline: 0.75rem;
  }

  .eg-segmented > :is(a, button) {
    min-height: 2.5rem;
  }

  .eg-admin-tabs > :is(a, button, span),
  .eg-student-tabs > :is(a, span) {
    min-height: 2.75rem;
  }

  a.link-action,
  .eg-link-action,
  .eg-action-link {
    min-height: 2.5rem;
  }

  /* Enlaces de texto secundarios: área táctil ampliada sin desplazar el layout */
  :is(main, .fixed.inset-0) :is(a, button):is(.text-primary, [class*="hover:underline"]):is(.text-xs, .text-sm, .text-\[10px\], .text-\[11px\], .text-\[12px\]):not([class*=" py-"]):not([class^="py-"]):not([class*=" p-"]):not([class^="p-"]):not([class*=" h-"]):not([class*="min-h"]):not(.eg-action-link):not(.eg-link-action) {
    padding-block: 0.625rem;
    margin-block: -0.625rem;
  }

  /* Barra del editor enriquecido (Quill): quill.snow.css se carga después */
  .ql-snow.ql-toolbar .ql-formats > button {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.4rem;
  }

  .ql-snow.ql-toolbar .ql-formats > .ql-picker {
    height: 2.25rem;
  }

  .ql-snow.ql-toolbar .ql-formats > .ql-picker .ql-picker-label {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 1023px) {
  :is(.admin-app, .profesor-app, .editor-app) main h1:not(.eg-keep-size) + p {
    font-size: var(--eg-fs-sm);
  }

  .eg-page-head,
  .eg-admin-toolbar:has(> div > h1),
  .eg-prof-toolbar:has(> div > h1) {
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  /* Chips de filtro: la colección envuelve en varias filas (ninguna opción queda fuera de pantalla) */
  .eg-admin-filter-bar:not(:has(input, select)),
  .eg-filter-bar:not(:has(input, select)) {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .eg-admin-filter-bar:has(input, select) > :is(input, select),
  .eg-filter-bar:has(input, select) > :is(input, select) {
    flex: 1 1 10rem;
    min-width: 0;
    max-width: none;
  }

  /* Pestañas: scroll horizontal con snap y desvanecido en el borde para indicar que hay más */
  .eg-admin-tabs,
  .eg-student-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }

  .eg-admin-tabs > *,
  .eg-student-tabs > * {
    scroll-snap-align: start;
  }

  .eg-admin-tabs::-webkit-scrollbar,
  .eg-student-tabs::-webkit-scrollbar {
    display: none;
  }

  .eg-prof-toolbar:not(:has(> div > h1)),
  .eg-admin-toolbar:not(:has(> div > h1)) {
    padding: 0.5rem;
  }

  /* Modales: margen lateral uniforme y altura máxima real */
  .fixed.inset-0[class*="z-"] > div.fixed.inset-x-4 {
    left: 0.75rem;
    right: 0.75rem;
  }

  /* Botones flotantes y toasts por encima de la barra inferior */
  :is(.admin-app, .profesor-app, .editor-app) .fixed.bottom-6.right-6 {
    right: 1rem;
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  #planes-toast {
    left: 1rem;
    right: 1rem;
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 768px) {
  .eg-prof-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .eg-prof-toolbar .eg-prof-toolbar-search {
    flex: none;
    max-width: none;
    width: 100%;
  }

  .eg-prof-toolbar .eg-prof-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    width: 100%;
  }

  .eg-prof-toolbar .eg-prof-toolbar-actions > :is(button, a) {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .eg-prof-desktop-table {
    display: none !important;
  }

  .eg-prof-mobile-cards {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
  }

  .eg-prof-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.5rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--eg-radius);
    border: 1px solid var(--eg-border);
    background: var(--eg-surface);
  }

  .eg-prof-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--eg-surface-3);
    border: 1px solid var(--eg-border-strong);
    color: var(--eg-accent);
    font-weight: 700;
    font-size: var(--eg-fs-md);
  }

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

  .eg-prof-card-body {
    flex: 1;
    min-width: 0;
  }

  .eg-prof-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--eg-fs-md);
    font-weight: 700;
    color: var(--eg-text);
  }

  .eg-prof-card-meta {
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--eg-text-muted);
  }

  .eg-prof-card-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
  }

  .eg-prof-card-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }

  .eg-prof-card-actions :is(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--eg-radius-sm);
    color: var(--eg-text-muted);
  }

  .eg-prof-card-actions :is(a, button):hover {
    color: var(--eg-accent);
    background: rgba(255, 255, 255, 0.05);
  }
}

#alumno-meta > .mx-2 {
  color: var(--eg-text-soft);
}

@media (max-width: 767px) {
  .eg-student-header :is(.eg-admin-action-group, .eg-prof-action-group) {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  /* El separador "|" queda colgando cuando los datos envuelven */
  #alumno-meta > .mx-2 {
    display: none;
  }

  .eg-admin-card {
    padding: 1rem;
  }

  .eg-dash-section {
    padding: 0.875rem;
  }

  .eg-admin-kpi,
  .profesor-app .eg-kpi,
  .profesor-app .eg-home-stat {
    padding: 0.875rem;
  }

  .eg-admin-toolbar:not(:has(> div > h1)) .eg-admin-toolbar-actions {
    width: 100%;
  }

  .eg-admin-toolbar:not(:has(> div > h1)) .eg-admin-toolbar-actions > :is(button, a) {
    flex: 1 1 auto;
    justify-content: center;
  }

  .eg-admin-toolbar:has(> div > h1) .eg-admin-toolbar-actions,
  .eg-prof-toolbar:has(> div > h1) .eg-prof-toolbar-actions,
  .eg-page-actions {
    width: 100%;
  }

  .eg-admin-toolbar:has(> div > h1) .eg-admin-toolbar-actions > :is(button, a),
  .eg-prof-toolbar:has(> div > h1) .eg-prof-toolbar-actions > :is(button, a),
  .eg-page-actions > :is(button, a) {
    flex: 1 1 auto;
  }

  .eg-filters > input,
  :is(.eg-admin-filter-bar, .eg-filter-bar) > input:is([type="search"], [placeholder^="Buscar"], [placeholder^="Filtrar"]) {
    flex: 1 1 100%;
    max-width: none;
  }

  .eg-filters > select {
    flex: 1 1 9rem;
    min-width: 0;
  }
}

/* Teléfonos: cada fila de tabla responsiva se muestra como tarjeta (ver eg-responsive-tables.js) */
@media (max-width: 639px) {
  .eg-responsive-table table.eg-rt-ready,
  .eg-responsive-table table.eg-rt-ready tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  .eg-responsive-table table.eg-rt-ready thead {
    display: none;
  }

  .eg-responsive-table table.eg-rt-ready tbody tr:not(:has(> td[colspan])) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    padding: 0.875rem;
    border-bottom: 1px solid var(--eg-border);
  }

  .eg-responsive-table table.eg-rt-ready tbody tr:last-child {
    border-bottom: 0;
  }

  .eg-responsive-table table.eg-rt-ready tbody tr:hover > td {
    background: transparent;
  }

  .eg-responsive-table table.eg-rt-ready tbody tr:not(:has(> td[colspan])) > td:not(.hidden) {
    display: block;
    position: static;
    flex: 1 1 calc(50% - 0.75rem);
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 0 !important;
    border: 0;
    background: transparent !important;
    box-shadow: none;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    font-size: var(--eg-fs-sm);
    color: var(--eg-text-2);
  }

  .eg-responsive-table table.eg-rt-ready tbody tr:not(:has(> td[colspan])) > td[data-label]:not(.eg-rt-media):not(.eg-rt-title):not(.eg-rt-actions)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.125rem;
    font-size: var(--eg-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eg-text-soft);
  }

  .eg-responsive-table table.eg-rt-ready tbody tr:not(:has(> td[colspan])) > td.eg-rt-media:not(.hidden) {
    flex: 0 0 auto;
  }

  /* Datos largos (email, descripción) a ancho completo: evita cortes a mitad de palabra */
  .eg-responsive-table table.eg-rt-ready tbody tr:not(:has(> td[colspan])) > td:is([data-label="Email"], [data-label="Correo"], [data-label="Descripción"], [data-label="Detalle"]):not(.hidden) {
    flex-basis: 100%;
    overflow-wrap: break-word;
  }

  .eg-responsive-table table.eg-rt-ready tbody tr:not(:has(> td[colspan])) > td.eg-rt-title:not(.hidden) {
    flex: 1 1 calc(100% - 4rem);
    align-self: center;
    font-size: var(--eg-fs-md);
    font-weight: 700;
    color: var(--eg-text);
    overflow-wrap: anywhere;
  }

  .eg-responsive-table table.eg-rt-ready tbody tr:not(:has(> td[colspan])) > td.eg-rt-actions:not(.hidden) {
    flex: 1 1 100%;
    padding-top: 0.625rem !important;
    border-top: 1px solid var(--eg-border-soft);
  }

  .eg-responsive-table table.eg-rt-ready tbody tr > td.eg-rt-actions :is(.eg-prof-action-group, .eg-admin-action-group),
  .eg-responsive-table table.eg-rt-ready tbody tr > td.eg-rt-actions > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.375rem;
  }

  .eg-responsive-table table.eg-rt-ready tbody tr > td.eg-rt-actions .eg-prof-action-group.hidden,
  .eg-responsive-table table.eg-rt-ready tbody tr > td.eg-rt-actions > div.hidden {
    display: none;
  }

  .eg-responsive-table .eg-table-scroll,
  .eg-responsive-table > .overflow-x-auto {
    overflow-x: visible;
  }
}

@media (max-width: 380px) {
  nav.lg\:hidden.sticky.bottom-0 :is(a, button) > span:not(.material-symbols-outlined) {
    font-size: 0.6875rem;
    letter-spacing: 0;
  }

  nav.lg\:hidden.sticky.bottom-0 :is(a, button) .material-symbols-outlined {
    font-size: 1.25rem;
    padding-inline: 0.875rem;
  }
}

@media (min-width: 1024px) {
  .eg-more-sheet,
  #prof-nav-more-sheet {
    display: none !important;
  }

  /* Alumno: vistas pensadas para móvil; en escritorio, columna de lectura centrada */
  .alumno-app > main > :not(.fixed):not(script):not(style):not(template) {
    width: 100%;
    max-width: 56rem;
    margin-inline: auto;
  }
}

/* Foto del catálogo (profesor) + aviso de imagen incorrecta */
.eg-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.eg-media-foto-btn,
.eg-media-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.eg-media-foto-btn { color: var(--eg-accent, #14b8a6); }
.eg-media-foto-btn:hover { text-decoration: underline; }
.eg-media-report-btn { color: #94a3b8; }
.eg-media-report-btn:hover { color: #fbbf24; text-decoration: underline; }

.eg-catalog-foto {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.eg-catalog-foto.hidden { display: none; }
.eg-catalog-foto__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
.eg-catalog-foto__panel {
  position: relative;
  width: min(36rem, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.75rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.eg-catalog-foto__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid #334155;
}
.eg-catalog-foto__head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #f1f5f9;
}
.eg-catalog-foto__sub {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eg-catalog-foto__close,
.eg-catalog-foto__preview-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.eg-catalog-foto__close:hover,
.eg-catalog-foto__preview-close:hover { color: #fff; background: rgba(255,255,255,.06); }
.eg-catalog-foto__preview {
  position: relative;
  padding: 0.75rem 1rem 0;
}
.eg-catalog-foto__preview img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: #fff;
  border-radius: 0.6rem;
}
.eg-catalog-foto__preview-close {
  position: absolute;
  top: 0.9rem;
  right: 1.15rem;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
}
.eg-catalog-foto__search {
  position: relative;
  padding: 0.85rem 1rem 0.6rem;
  border-bottom: 1px solid #334155;
}
.eg-catalog-foto__search-ico {
  position: absolute;
  left: 1.7rem;
  top: 1.45rem;
  color: #64748b;
  font-size: 1.25rem;
  pointer-events: none;
}
.eg-catalog-foto__search input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.55rem;
  padding: 0.65rem 0.85rem 0.65rem 2.4rem;
  color: #f1f5f9;
  font-size: 0.875rem;
}
.eg-catalog-foto__search input:focus {
  outline: none;
  border-color: var(--eg-accent, #14b8a6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--eg-accent, #14b8a6) 25%, transparent);
}
.eg-catalog-foto__meta {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  color: #64748b;
}
.eg-catalog-foto__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.85rem 1rem;
}
.eg-catalog-foto__empty {
  margin: 1.5rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: #64748b;
}
.eg-catalog-foto__empty.is-error { color: #f87171; }
.eg-catalog-foto__section {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.eg-catalog-foto__item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}
.eg-catalog-foto__pick {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.eg-catalog-foto__pick:hover {
  background: color-mix(in srgb, var(--eg-accent, #14b8a6) 12%, transparent);
}
.eg-catalog-foto__item.is-recommended .eg-catalog-foto__pick {
  border-color: rgba(20, 184, 166, 0.45);
  background: rgba(20, 184, 166, 0.08);
}
.eg-catalog-foto__pick img,
.eg-catalog-foto__ph {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.eg-catalog-foto__ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 22px;
}
.eg-catalog-foto__name {
  display: block;
  font-weight: 600;
  color: #f1f5f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eg-catalog-foto__meta-line {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eg-catalog-foto__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--eg-accent, #14b8a6);
  cursor: pointer;
  flex-shrink: 0;
}
.eg-catalog-foto__play:hover { background: rgba(20, 184, 166, 0.12); }
.eg-catalog-foto__foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid #334155;
}
.eg-catalog-foto__clear,
.eg-catalog-foto__cancel {
  padding: 0.5rem 0.85rem;
  border-radius: 0.55rem;
  border: 1px solid #475569;
  background: transparent;
  color: #94a3b8;
  font-size: 0.875rem;
  cursor: pointer;
}
.eg-catalog-foto__cancel { margin-left: auto; }
.eg-catalog-foto__clear:hover,
.eg-catalog-foto__cancel:hover { background: #334155; color: #e2e8f0; }

.eg-map-reports {
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.07);
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
}
.eg-map-reports__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.eg-map-reports__head h2 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fbbf24;
}
.eg-map-reports__head span {
  font-size: 0.72rem;
  color: #94a3b8;
}
.eg-map-reports__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.eg-map-reports__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.55rem;
  background: rgba(15, 23, 42, 0.45);
}
.eg-map-reports__name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #e2e8f0;
}
.eg-map-reports__meta {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  color: #94a3b8;
}
.eg-map-reports__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.eg-map-reports__go,
.eg-map-reports__ok,
.eg-map-reports__drop {
  padding: 0.3rem 0.6rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid #475569;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  text-decoration: none;
}
.eg-map-reports__go { border-color: var(--eg-accent, #14b8a6); color: var(--eg-accent, #14b8a6); }
.eg-map-reports__ok { border-color: #34d399; color: #34d399; }
.eg-map-reports__drop { color: #f87171; border-color: rgba(248, 113, 113, 0.4); }