/* ============================================================
   ENERGYM — Design System (CSS compartido)
   App de personal training para mujeres · Trainer + Alumna
   Modo oscuro por defecto · Gradiente fucsia→violeta · Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   ICONOS — Font Awesome 6 Free (Solid), auto-contenido.
   Definimos el @font-face + el mapa de glifos localmente para no
   depender del CSS de la CDN (que se trunca en algunos proxies).
   Solo cargamos el binario .woff2 desde la CDN.
   ============================================================ */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2") format("woff2");
}
.fa-solid, .fa-regular {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
}
.fa-solid::before { content: var(--fa); }
.fa-house::before              { content: "\f015"; }
.fa-dumbbell::before           { content: "\f44b"; }
.fa-clipboard-list::before     { content: "\f46d"; }
.fa-users::before              { content: "\f0c0"; }
.fa-calendar-days::before      { content: "\f073"; }
.fa-chart-line::before         { content: "\f201"; }
.fa-bell::before               { content: "\f0f3"; }
.fa-moon::before               { content: "\f186"; }
.fa-sun::before                { content: "\f185"; }
.fa-play::before               { content: "\f04b"; }
.fa-pen::before                { content: "\f304"; }
.fa-trash::before              { content: "\f1f8"; }
.fa-xmark::before              { content: "\f00d"; }
.fa-check::before              { content: "\f00c"; }
.fa-circle-check::before       { content: "\f058"; }
.fa-hourglass-half::before     { content: "\f252"; }
.fa-bed::before                { content: "\f236"; }
.fa-triangle-exclamation::before { content: "\f071"; }
.fa-fire::before               { content: "\f06d"; }
.fa-medal::before              { content: "\f5a2"; }
.fa-stopwatch::before          { content: "\f2f2"; }
.fa-floppy-disk::before        { content: "\f0c7"; }
.fa-magnifying-glass::before   { content: "\f002"; }
.fa-plus::before               { content: "\2b"; }
.fa-arrow-left::before         { content: "\f060"; }
.fa-arrow-right::before        { content: "\f061"; }
.fa-chevron-up::before         { content: "\f077"; }
.fa-chevron-down::before       { content: "\f078"; }
.fa-chevron-right::before      { content: "\f054"; }
.fa-grip-vertical::before      { content: "\f58e"; }
.fa-trophy::before             { content: "\f091"; }
.fa-user-tie::before           { content: "\f508"; }
.fa-person-running::before     { content: "\f70c"; }
.fa-eye::before                { content: "\f06e"; }
.fa-eye-slash::before          { content: "\f070"; }
.fa-arrow-right-from-bracket::before { content: "\f08b"; }
.fa-arrow-up-from-bracket::before    { content: "\e09a"; }
.fa-user-plus::before          { content: "\f234"; }

:root {
  /* Marca */
  --eg-pink:          #ff0080;
  --eg-pink-soft:     #e040fb;
  --eg-pink-deep:     #c0177a;
  --eg-purple:        #7c3aed;
  --eg-purple-deep:   #6200ea;
  --eg-purple-mid:    #9b2de8;
  --eg-gradient:      linear-gradient(135deg, #ff0080 0%, #7c3aed 100%); /* @kind color */
  --eg-gradient-soft: linear-gradient(135deg, rgba(255,0,128,0.15), rgba(124,58,237,0.15)); /* @kind color */

  /* Dark mode (default) */
  --eg-bg:          #0f0f1a;
  --eg-surface:     #1a1a2e;
  --eg-surface-2:   #252540;
  --eg-border:      rgba(255,255,255,0.08);
  --eg-text:        #f0f0f5;
  --eg-text-muted:  #8888aa;

  /* Estado */
  --eg-success:     #22c55e;
  --eg-warning:     #fbbf24;
  --eg-danger:      #ef4444;
  --eg-rest:        #8888aa;

  /* Grupos musculares */
  --eg-m-piernas:   #7c3aed;
  --eg-m-espalda:   #3b82f6;
  --eg-m-pecho:     #ef4444;
  --eg-m-hombros:   #f59e0b;
  --eg-m-core:      #22c55e;
  --eg-m-gluteos:   #ff0080;
  --eg-m-brazos:    #06b6d4;
  --eg-m-fullbody:  #ff0080;

  /* Sombras */
  --eg-shadow-shell: 0 0 60px rgba(0,0,0,0.5);
  --eg-shadow-card:  0 2px 12px rgba(0,0,0,0.25);
  --eg-shadow-glow:  0 6px 24px rgba(255,0,128,0.30);
}

[data-theme="light"] {
  --eg-bg:         #f4f4f8;
  --eg-surface:    #ffffff;
  --eg-surface-2:  #f0f0f5;
  --eg-border:     rgba(0,0,0,0.08);
  --eg-text:       #1a1a2e;
  --eg-text-muted: #6666aa;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #0a0a0a;
  color: var(--eg-text);
  -webkit-font-smoothing: antialiased;
}

/* Contenedor que simula el teléfono */
.app-shell {
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  background: var(--eg-bg);
  box-shadow: var(--eg-shadow-shell);
}

/* Área scrolleable de contenido */
.app-content { padding: 16px 16px 110px; }
.pb-form { padding-bottom: 130px; }

/* ---------- Header ---------- */
.eg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--eg-bg);
  border-bottom: 1px solid var(--eg-border);
}
.eg-header-title { font-weight: 700; font-size: 18px; }
.eg-icon-btn {
  background: none; border: none; color: var(--eg-text);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.eg-back { font-size: 22px; }

/* Logo wordmark */
.eg-wordmark { font-weight: 800; letter-spacing: 0.5px; }
.eg-wordmark .gym,
.eg-grad-text {
  background: var(--eg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Botón primario ---------- */
.btn-energym {
  background: var(--eg-gradient);
  border: none;
  color: #fff;
  border-radius: 14px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 15px;
  width: 100%;
  letter-spacing: 0.3px;
  box-shadow: var(--eg-shadow-glow);
  transition: opacity 0.2s, transform 0.1s;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-energym:active { opacity: 0.85; transform: scale(0.98); }
.btn-energym:disabled { opacity: 0.45; cursor: not-allowed; }

/* Botón outline con gradiente suave */
.btn-energym-outline {
  background: var(--eg-gradient-soft);
  border: 1px solid rgba(255,0,128,0.45);
  color: var(--eg-text);
  border-radius: 14px;
  padding: 13px 20px;
  font-weight: 700;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity 0.2s, transform 0.1s;
}
.btn-energym-outline:active { opacity: 0.85; transform: scale(0.98); }

/* Botón "+" circular */
.btn-plus {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--eg-gradient); color: #fff; border: none;
  font-size: 20px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--eg-shadow-glow);
}

/* ---------- Cards ---------- */
.eg-card {
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: 20px;
  padding: 16px;
}
.eg-card-hero {
  background: var(--eg-gradient-soft);
  border: 1px solid rgba(255,0,128,0.3);
  border-radius: 20px;
  padding: 18px;
}
.eg-card-tap { cursor: pointer; transition: transform 0.1s; }
.eg-card-tap:active { transform: scale(0.99); }

/* ---------- Avatar ---------- */
.eg-avatar {
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; flex-shrink: 0; letter-spacing: 0.5px;
  width: 44px; height: 44px; font-size: 16px;
}
.eg-avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.eg-avatar-sm { width: 40px; height: 40px; font-size: 15px; }
.eg-avatar-grad { background: var(--eg-gradient); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 9999px; padding: 4px 10px;
  font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.chip-success { background: rgba(34,197,94,0.15);  color: var(--eg-success); }
.chip-warning { background: rgba(251,191,36,0.15); color: var(--eg-warning); }
.chip-danger  { background: rgba(239,68,68,0.15);  color: var(--eg-danger); }
.chip-rest    { background: rgba(136,136,170,0.15);color: var(--eg-rest); }
.chip-brand   { background: rgba(255,0,128,0.15);  color: var(--eg-pink); }
.chip-muted   { background: var(--eg-surface-2);   color: var(--eg-text-muted); }

/* Chips de dificultad (alias semánticos) */
.chip-principiante { background: rgba(34,197,94,0.15);  color: var(--eg-success); }
.chip-intermedio   { background: rgba(251,191,36,0.15); color: var(--eg-warning); }
.chip-avanzado     { background: rgba(255,0,128,0.15);  color: var(--eg-pink); }

/* Chips de grupo muscular */
.chip-m { display:inline-flex; align-items:center; border-radius:9999px; padding:3px 10px; font-size:12px; font-weight:600; white-space:nowrap; }
.chip-m-piernas  { background: rgba(124,58,237,0.18); color: var(--eg-m-piernas); }
.chip-m-espalda  { background: rgba(59,130,246,0.18); color: var(--eg-m-espalda); }
.chip-m-pecho    { background: rgba(239,68,68,0.18);  color: var(--eg-m-pecho); }
.chip-m-hombros  { background: rgba(245,158,11,0.18); color: var(--eg-m-hombros); }
.chip-m-core     { background: rgba(34,197,94,0.18);  color: var(--eg-m-core); }
.chip-m-gluteos  { background: rgba(255,0,128,0.18);  color: var(--eg-m-gluteos); }
.chip-m-brazos   { background: rgba(6,182,212,0.18);  color: var(--eg-m-brazos); }
.chip-m-fullbody { background: var(--eg-gradient); color: #fff; }

/* Swatch cuadrado por grupo muscular (biblioteca de ejercicios) */
.muscle-tile {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.mt-piernas  { background: rgba(124,58,237,0.22); color: var(--eg-m-piernas); }
.mt-espalda  { background: rgba(59,130,246,0.22); color: var(--eg-m-espalda); }
.mt-pecho    { background: rgba(239,68,68,0.22);  color: var(--eg-m-pecho); }
.mt-hombros  { background: rgba(245,158,11,0.22); color: var(--eg-m-hombros); }
.mt-core     { background: rgba(34,197,94,0.22);  color: var(--eg-m-core); }
.mt-gluteos  { background: rgba(255,0,128,0.22);  color: var(--eg-m-gluteos); }
.mt-brazos   { background: rgba(6,182,212,0.22);  color: var(--eg-m-brazos); }
.mt-fullbody { background: var(--eg-gradient); color: #fff; }

/* Eyebrow / label */
.eg-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--eg-pink); }
.eg-section-title { font-size: 18px; font-weight: 700; }
.eg-link { color: var(--eg-pink); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.text-muted-eg { color: var(--eg-text-muted); }

/* ---------- Filtros (pills scrolleables) ---------- */
.filter-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  background: var(--eg-surface-2); color: var(--eg-text-muted);
  border: none; border-radius: 20px; padding: 6px 16px;
  font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.filter-chip.active { background: var(--eg-gradient); color: #fff; }

/* Fade a la derecha para indicar que la fila tiene scroll horizontal */
.filter-row-fade {
  -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, #000 86%, transparent 100%);
}

/* ---------- Input de archivo estilizado ---------- */
.file-upload { display: flex; align-items: center; gap: 12px; }
.file-upload input[type="file"] { display: none; }
.file-upload .file-upload-btn {
  width: auto; padding: 10px 16px; font-size: 13px; flex-shrink: 0;
}
.file-upload .file-upload-name {
  font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Inputs / formularios ---------- */
.eg-label {
  display: block; color: var(--eg-text-muted);
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.eg-field {
  width: 100%;
  background: var(--eg-surface-2);
  border: 1px solid var(--eg-border);
  border-radius: 12px;
  color: var(--eg-text);
  font-family: inherit; font-size: 15px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.eg-field::placeholder { color: var(--eg-text-muted); opacity: 0.7; }
.eg-field:focus { border-color: var(--eg-pink); box-shadow: 0 0 0 3px rgba(255,0,128,0.15); }
.eg-field.is-invalid { border-color: var(--eg-danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
select.eg-field { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238888aa' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* Search field con icono */
.eg-search { display: flex; align-items: center; gap: 10px; background: var(--eg-surface-2);
  border: 1px solid var(--eg-border); border-radius: 14px; padding: 0 14px; height: 46px; }
.eg-search input { flex: 1; background: none; border: none; outline: none; color: var(--eg-text); font-family: inherit; font-size: 14px; }
.eg-search input::placeholder { color: var(--eg-text-muted); }

/* ---------- Stat cards ---------- */
.stat-card {
  background: var(--eg-surface); border: 1px solid var(--eg-border);
  border-radius: 16px; padding: 12px; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card .ic { font-size: 20px; line-height: 1; }
.stat-card .val { font-size: 22px; font-weight: 800; line-height: 1.1; }
.stat-card .lbl { font-size: 11px; color: var(--eg-text-muted); font-weight: 500; }

/* ---------- Bottom nav ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px;
  background: var(--eg-surface); border-top: 1px solid var(--eg-border);
  display: flex; padding: 10px 0 18px; z-index: 100;
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--eg-text-muted);
  cursor: pointer; text-decoration: none; background: none; border: none;
}
.bottom-nav-item .ic { font-size: 20px; }
.bottom-nav-item.active { color: var(--eg-pink); }

/* Sticky save bar */
.save-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px;
  background: var(--eg-bg); border-top: 1px solid var(--eg-border);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); z-index: 90;
}

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--eg-border); border: none; margin: 8px 0; }
.row-gap { display: flex; gap: 10px; }
.col-gap { display: flex; flex-direction: column; gap: 10px; }
.meta { font-size: 13px; color: var(--eg-text-muted); }

/* Empty state */
.empty-state { text-align: center; padding: 48px 20px; }
.empty-state .emoji { font-size: 52px; }
.empty-state h3 { font-size: 18px; font-weight: 700; margin: 14px 0 6px; }
.empty-state p { color: var(--eg-text-muted); font-size: 14px; margin: 0 0 18px; }

/* ---------- Iconos (Font Awesome) ---------- */
.eg-icon-btn i { font-size: 18px; }
.eg-back i { font-size: 18px; }
.btn-plus i { font-size: 17px; }
.bottom-nav-item .ic i { font-size: 19px; }
.stat-card .ic { color: var(--eg-pink); }
.eg-search span i { color: var(--eg-text-muted); }
/* chips: el icono hereda el color del texto del chip */
.chip i, .chip-m i { font-size: 11px; }
/* Insignia de celebración */
.eg-celebrate-badge {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--eg-gradient);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--eg-shadow-glow);
}
.eg-celebrate-badge i { font-size: 44px; color: #fff; }

/* Animaciones */
@keyframes eg-pulse { 0%,100% { box-shadow: 0 0 0 2px var(--eg-pink); } 50% { box-shadow: 0 0 0 6px rgba(255,0,128,0.25); } }
@keyframes eg-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.eg-pop { animation: eg-pop 0.5s cubic-bezier(0.22,1,0.36,1); }

/* Toast */
.eg-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px);
  background: var(--eg-surface); color: var(--eg-text); border: 1px solid var(--eg-border);
  border-radius: 14px; padding: 12px 20px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4); opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s; z-index: 200; max-width: 90%;
}
.eg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   PRELOADER — feedback de carga entre vistas (app multipágina)
   Barra de progreso superior + overlay con spinner de marca.
   El overlay tiene fade con delay: en navegaciones rápidas no llega
   a aparecer; solo se ve si la carga tarda.
   ============================================================ */
#eg-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--eg-gradient);
  box-shadow: 0 0 12px rgba(255,0,128,0.7), 0 0 4px rgba(124,58,237,0.6);
  z-index: 10000; opacity: 0; pointer-events: none;
  transition: width 0.3s ease, opacity 0.3s ease;
}
#eg-progress.on { opacity: 1; }

#eg-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,15,26,0.72);
  background: color-mix(in srgb, var(--eg-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease; transition-delay: 0.12s;
}
#eg-preloader.on { opacity: 1; pointer-events: auto; }
.eg-spinner {
  width: 54px; height: 54px; border-radius: 50%;
  border: 3px solid var(--eg-surface-2);
  border-top-color: var(--eg-pink);
  border-right-color: var(--eg-purple);
  animation: eg-spin 0.8s linear infinite;
}
@keyframes eg-spin { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE — versión de escritorio (sidebar + grillas)
   Breakpoints alineados con la guía ui-ux-pro-max: 768 / 1024 / 1440.
   Base (<768px) = layout mobile original, intacto.
   ============================================================ */

/* ---------- Sidebar de escritorio (oculta en mobile) ---------- */
.side-nav { display: none; }
.side-nav {
  flex-direction: column; gap: 4px;
  padding: 22px 12px;
  background: var(--eg-surface);
  border-right: 1px solid var(--eg-border);
}
.side-nav-logo {
  font-weight: 800; font-size: 20px; letter-spacing: 0.5px;
  padding: 6px 14px 20px;
}
.side-nav-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px; border-radius: 12px;
  color: var(--eg-text-muted); text-decoration: none;
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.side-nav-item i { font-size: 18px; width: 22px; text-align: center; }
.side-nav-item.active { background: var(--eg-gradient-soft); color: var(--eg-text); }
.side-nav-item.active i { color: var(--eg-pink); }
.side-nav-sep { flex: 1; } /* empuja items inferiores hacia abajo */

/* ---------- Utilidades responsive ---------- */
.eg-grid-cards { display: flex; flex-direction: column; gap: 10px; } /* mobile = pila */
.eg-two-col { display: flex; flex-direction: column; gap: 16px; }    /* mobile = pila */

/* ---------- Estados de calidad (foco + hover + motion) ---------- */
/* Foco visible para teclado — clave en escritorio (a11y, contraste de marca) */
a:focus-visible, button:focus-visible,
.filter-chip:focus-visible, .eg-card-tap:focus-visible,
.side-nav-item:focus-visible, .bottom-nav-item:focus-visible {
  outline: 2px solid var(--eg-pink); outline-offset: 2px; border-radius: 10px;
}
/* Hover solo en dispositivos con puntero (no rompe el táctil) */
@media (hover: hover) {
  .eg-card-tap:hover { border-color: rgba(255,0,128,0.35); }
  .filter-chip:hover { color: var(--eg-text); }
  .bottom-nav-item:hover { color: var(--eg-text); }
  .side-nav-item:hover { background: var(--eg-surface-2); color: var(--eg-text); }
  .btn-energym:hover { opacity: 0.92; }
  .btn-energym-outline:hover { opacity: 0.9; }
  .btn-plus:hover { opacity: 0.92; }
  .eg-link:hover { text-decoration: underline; }
  .eg-icon-btn:hover { color: var(--eg-pink); }
}
/* Respetar "reducir movimiento" */
@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;
  }
}

/* ============================================================
   TABLET (768–1023px): shell más ancho, listas en grilla,
   bottom-nav todavía presente.
   ============================================================ */
@media (min-width: 768px) {
  .eg-grid-cards {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: start;
  }
  .eg-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  /* Elementos que deben ocupar todo el ancho dentro de una grilla de cards */
  .eg-grid-cards > .month-sep,
  .eg-grid-cards > .eg-grid-full { grid-column: 1 / -1; }
  /* Auth (login / recuperar / reset): tarjeta centrada y angosta */
  .app-shell:has(.login-wrap) { max-width: 460px; box-shadow: var(--eg-shadow-shell); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .app-shell { max-width: 720px; }
  .bottom-nav, .save-bar { max-width: 720px; }
}

/* ============================================================
   ESCRITORIO (≥1024px): aparece la sidebar, el shell se vuelve
   grid fluido a todo el ancho y desaparece la bottom-nav.
   Se aplica solo a páginas con sidebar (:has(.side-nav)); las de
   auth quedan fuera y se centran aparte.
   ============================================================ */
@media (min-width: 1024px) {
  /* Sidebar fija a la izquierda; el resto del contenido fluye a la derecha
     gracias al padding-left del shell. Robusto ante hijos extra (#empty, etc.). */
  .app-shell:has(.side-nav) {
    max-width: none;
    padding-left: 240px;
    box-shadow: none;
  }
  .app-shell:has(.side-nav) > .side-nav {
    display: flex;
    position: fixed; left: 0; top: 0;
    width: 240px; height: 100dvh; overflow-y: auto;
    z-index: 50;
  }
  .app-shell:has(.side-nav) .bottom-nav { display: none; }
  .app-shell:has(.side-nav) .app-content { padding: 24px 32px 40px; }
  .app-shell:has(.side-nav) .app-content.pb-form { padding-bottom: 130px; }

  /* La barra de guardado se acota a la columna de contenido */
  .app-shell:has(.side-nav) .save-bar {
    left: 240px; right: 0; width: auto; max-width: none; transform: none;
    display: flex; justify-content: center;
  }
  .app-shell:has(.side-nav) .save-bar > * { width: 100%; max-width: 680px; }

  /* Formularios y pantallas de foco: ancho de lectura cómodo y centrado */
  .eg-form-narrow { max-width: 680px; margin-inline: auto; }
  .eg-focus-narrow { max-width: 820px; margin-inline: auto; }

  /* Toast centrado en la columna de contenido, no en toda la ventana */
  .app-shell:has(.side-nav) .eg-toast { left: calc(50% + 120px); }

  /* Pantalla de foco (entrenamiento): centrada y acotada, sin sidebar */
  .app-shell:has(.train-wrap) { max-width: 820px; box-shadow: var(--eg-shadow-shell); }
}

@media (min-width: 1440px) {
  .eg-grid-cards {
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .app-shell:has(.side-nav) .app-content { padding: 28px 48px 48px; }
}