/* =====================================================================
   FitCamp · Diseño nuevo
   Basado en las guías de Emil Kowalski: github.com/emilkowalski/skills
   (emil-design-eng · mobile-native · find-animation-opportunities).

   La marca NO cambia: lima, noche, papel, Bebas Neue, Montserrat y los
   banners inclinados. Lo que cambia es cómo se SIENTE en el teléfono:
   botones que responden al dedo, menús y ventanas que salen de donde
   vienen, sombras suaves en vez de bordes, y los detalles de "app".
   Va después de styles.css y halloween.css; si se borra, se pierden estos detalles
   (la app sigue funcionando igual). La versión de antes está en version-antes-del-diseno/.
   ===================================================================== */

/* ---------- Curvas, sombras y colores de las pestañas ---------- */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* entrar y responder: arranca rápido */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* algo que se mueve dentro de la pantalla */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);  /* hojas que suben desde abajo (como iOS) */

  --aro: rgba(18, 17, 24, .07);
  --sombra: 0 0 0 1px var(--aro), 0 1px 2px rgba(18, 17, 24, .05), 0 6px 16px -6px rgba(18, 17, 24, .10);
  --sombra-on: 0 0 0 1px rgba(18, 17, 24, .22), 0 2px 4px rgba(18, 17, 24, .06), 0 10px 24px -8px rgba(18, 17, 24, .18);
  --sombra-alta: 0 0 0 1px var(--aro), 0 4px 10px -2px rgba(0, 0, 0, .10), 0 24px 48px -12px rgba(0, 0, 0, .30);
  --tab-on: var(--night);
  --tab-on-txt: #fff;
  --giro: var(--night);
}
@media (prefers-color-scheme: dark) {
  :root {
    --aro: rgba(255, 255, 255, .08);
    --sombra: 0 0 0 1px var(--aro), 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-on: 0 0 0 1px rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-alta: 0 0 0 1px rgba(255, 255, 255, .10), 0 24px 48px -12px rgba(0, 0, 0, .8);
    --tab-on: var(--lime);
    --tab-on-txt: var(--night);
    --giro: var(--lime);
  }
}
html[data-tema="halloween"] {
  --aro: rgba(255, 255, 255, .08);
  --sombra: 0 0 0 1px var(--aro), 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-on: 0 0 0 1px rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-alta: 0 0 0 1px rgba(255, 255, 255, .10), 0 24px 48px -12px rgba(0, 0, 0, .8);
  --tab-on: var(--lime);
  --tab-on-txt: var(--night);
  --giro: var(--lime);
}

/* ---------- Que se sienta app y no página web (mobile-native) ---------- */
/* Sin el flash gris al tocar: cada botón ya tiene su propio "apretado" abajo */
html { -webkit-tap-highlight-color: transparent; }
/* Toque inmediato (sin la espera de doble toque) */
button, a, summary, [role="button"], .switch, .radio, .check { touch-action: manipulation; }
/* Mantener el dedo en un botón no selecciona su texto */
button, [role="button"], summary, .tabs, .pill, .etiqueta, .enlace, .letra, .r-go, .timer {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Al llegar al final de una lista con scroll, la página de atrás no se mueve */
.checks, .table-wrap, .tira, dialog { overscroll-behavior: contain; }
/* Mientras anotas un entreno o editas una rutina, jalar hacia abajo no recarga la página */
html:has(> body.con-barra) { overscroll-behavior-y: none; }
/* Con el teléfono acostado, nada queda debajo del notch */
main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
/* La tira de fotos se detiene en cada foto */
.tira { scroll-snap-type: x proximity; }
.mini { scroll-snap-align: start; }
/* Portada (entrar / crear cuenta / nueva contraseña): la tarjeta queda al centro de la pantalla,
   sin el hueco vacío abajo. Si no cabe (teclado abierto, pantalla chica) se ve desde arriba como siempre. */
body:has(> main > :is(#vAuth, #vNewPass):not([hidden])) { display: flex; flex-direction: column; }
body:has(> main > :is(#vAuth, #vNewPass):not([hidden])) > main { flex: 1; width: 100%; display: flex; flex-direction: column; }
#vAuth, #vNewPass { flex: 1; display: flex; flex-direction: column; justify-content: center; }
#vAuth .auth-card, #vNewPass .auth-card { width: 100%; margin-top: 0; }

/* ---------- Botones que responden al dedo ---------- */
.btn, .rutina, .client, .hist, .ej-item, .tabs button, .ay-semanas button, .ay-menus button,
.descanso-chip, .icono, .x, .cuenta-btn, .foto-btn, .mini, .timer button, .cuadritos button, .ej-video, .logo-btn, .pose-btn {
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease,
    background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.btn:not(:disabled):active, .tabs button:active, .ay-semanas button:active, .ay-menus button:active, .descanso-chip:active,
.icono:active:not(:disabled), .x:active, .cuenta-btn:active, .mini:active, .timer button:active,
.ej-video:active, .cuadritos button:active, .logo-btn:active { transform: scale(.97); }
/* Las tarjetas grandes se hunden menos */
.rutina:active, .client:active, .hist:active, .ej-item:active, .foto-btn:active, .pose-btn:active { transform: scale(.985); }
/* El botón lima "se hunde" en su sombra, como un botón de verdad */
.btn.primary:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--night); }
@media (prefers-color-scheme: dark) { .btn.primary:not(:disabled):active { transform: scale(.97); box-shadow: none; } }
html[data-tema="halloween"] .btn.primary:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--calabaza); }
/* Los enlaces de texto se aclaran al tocarlos */
.link, .mas, .menos, .ay-cambiar, .prev { transition: opacity 160ms ease, color 200ms ease; }
.link:active, .mas:active, .menos:active, .ay-cambiar:active, .prev:not(:disabled):active { opacity: .55; }
/* El interruptor se desliza con la misma curva que todo lo demás */
.switch input, .switch input::after { transition-duration: 200ms; transition-timing-function: var(--ease-out); }

/* ---------- Sombras suaves en vez de bordes sólidos ---------- */
.client, .hist, .hcard, .ej-item, .table-wrap, .ses-opciones, .sensacion, .bloque, .ay-card, .ay-comida, .ay-form, .checks {
  border-color: transparent; box-shadow: var(--sombra);
}
.ej { border-color: transparent; border-left-color: var(--lime); box-shadow: var(--sombra); }
@media (hover: hover) and (pointer: fine) {
  .client:hover, .hist:hover, .ej-item:hover { border-color: transparent; box-shadow: var(--sombra-on); }
}

/* ---------- Números y textos ---------- */
/* Números del mismo ancho: no "bailan" al cambiar (cronómetro, medidas, fechas) */
.big, .delta, .foot, .r-meta, .hist-meta, .client .meta, .ay-hora, .ay-horas, .timer b, .sens-pie b { font-variant-numeric: tabular-nums; }
.summary, .hint, .empty p, .aviso, .r-desc, .ay-estado { text-wrap: pretty; }
.empty-title, .dlg-head h2, .r-nombre, .ay-cab h2 { text-wrap: balance; }

/* ---------- Cargando: un círculo que gira rápido (se siente que carga más rápido) ---------- */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
.loading::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--giro);
  animation: fc-giro 600ms linear infinite;
}
@keyframes fc-giro { to { transform: rotate(1turn); } }

/* ---------- Pestañas: la pastilla se desliza a la pestaña nueva ---------- */
#nav, #vAuth .tabs { position: relative; isolation: isolate; --n: 3; --i: 0; }
#vAuth .tabs { --n: 2; }
#nav:has(> button:nth-child(2)[aria-current="page"]),
#vAuth .tabs:has(> [aria-selected="true"]:nth-child(2)) { --i: 1; }
#nav:has(> button:nth-child(3)[aria-current="page"]) { --i: 2; }
#nav::before, #vAuth .tabs::before {
  content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px - (var(--n) - 1) * 4px) / var(--n));
  border-radius: 999px; background: var(--tab-on);
  transform: translateX(calc(var(--i) * (100% + 4px)));
  transition: transform 280ms var(--ease-in-out);
}
#nav:not(:has(> [aria-current="page"]))::before { opacity: 0; }
#nav button, #vAuth .tabs button { background: transparent; }
#nav button[aria-current="page"], #vAuth .tabs button[aria-selected="true"] { background: transparent; color: var(--tab-on-txt); }

/* ---------- Menú de la cuenta: sale del botón que lo abrió ---------- */
.menu-cuenta {
  border-color: transparent; box-shadow: var(--sombra-alta);
  transform-origin: top right;
  transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out);
}
@starting-style { .menu-cuenta { opacity: 0; transform: translateY(-4px) scale(.96); } }

/* ---------- Ventanas (nueva prueba, ejercicio, foto) ---------- */
dialog {
  box-shadow: var(--sombra-alta);
  transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out);
}
dialog::backdrop { transition: opacity 260ms ease; }
@starting-style {
  dialog[open] { opacity: 0; transform: scale(.96); }
  dialog[open]::backdrop { opacity: 0; }
}
/* Al cerrar: más rápido que al abrir */
dialog.cerrando { opacity: 0; transform: scale(.98); transition-duration: 160ms; }
dialog.cerrando::backdrop { opacity: 0; transition-duration: 200ms; }

/* En el teléfono son hojas que suben desde abajo; se cierran deslizándolas hacia abajo */
@media (max-width: 640px) {
  dialog:not(.visor) {
    width: 100%; max-width: 100%; margin: auto 0 0;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px));
    border-radius: 24px 24px 0 0;
    transition: transform 420ms var(--ease-drawer);
  }
  dialog:not(.visor) > form { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  @starting-style { dialog[open]:not(.visor) { opacity: 1; transform: translateY(100%); } }
  dialog.cerrando:not(.visor) { opacity: 1; transform: translateY(100%); transition-duration: 240ms; }
  /* La rayita de arriba: de aquí se agarra la hoja para bajarla */
  dialog:not(.visor) .dlg-head { position: relative; margin-top: -16px; padding-top: 16px; touch-action: none; cursor: grab; }
  dialog:not(.visor) .dlg-head::before {
    content: ""; position: absolute; top: 2px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
    border-radius: 3px; background: var(--field-line);
  }
}

/* ---------- Aviso de abajo: entra y sale por el mismo lado ---------- */
.toast { transition: transform 400ms var(--ease-out), opacity 400ms var(--ease-out); }
@starting-style { .toast { opacity: 0; transform: translateX(-50%) translateY(100%); } }
.toast.saliendo { opacity: 0; transform: translateX(-50%) translateY(100%); transition-duration: 200ms; }

/* ---------- Cronómetro de descanso ---------- */
.timer { transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out), background-color 200ms ease, border-color 200ms ease; }
@starting-style { .timer { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.96); } }
.timer b, .timer-txt { transition: color 200ms ease; }

/* ---------- ¿Cómo te sentiste?: los cuadritos se llenan uno tras otro ---------- */
.cuadritos button.lleno { animation: fc-llenar 240ms var(--ease-out) backwards; }
.cuadritos button:nth-child(2) { animation-delay: 18ms; }
.cuadritos button:nth-child(3) { animation-delay: 36ms; }
.cuadritos button:nth-child(4) { animation-delay: 54ms; }
.cuadritos button:nth-child(5) { animation-delay: 72ms; }
.cuadritos button:nth-child(6) { animation-delay: 90ms; }
.cuadritos button:nth-child(7) { animation-delay: 108ms; }
.cuadritos button:nth-child(8) { animation-delay: 126ms; }
.cuadritos button:nth-child(9) { animation-delay: 144ms; }
.cuadritos button:nth-child(10) { animation-delay: 162ms; }
@keyframes fc-llenar {
  from { background-color: var(--field); border-color: var(--field-line); color: var(--muted); transform: scale(.92); }
}

/* ---------- Menos movimiento (si el teléfono lo pide): solo se desvanece, nada se desliza ---------- */
@media (prefers-reduced-motion: reduce) {
  #nav::before, #vAuth .tabs::before { transition: none; }
  dialog, dialog:not(.visor) { transition: opacity 200ms ease; }
  @starting-style {
    dialog[open], dialog[open]:not(.visor) { opacity: 0; transform: none; }
    .menu-cuenta { transform: none; }
    .toast { transform: translateX(-50%); }
    .timer { transform: translateX(-50%); }
  }
  dialog.cerrando, dialog.cerrando:not(.visor) { opacity: 0; transform: none; }
  .toast.saliendo { transform: translateX(-50%); }
  .cuadritos button.lleno { animation: none; }
}

/* ---------- Ayuno: lo que comí hoy (tarjeta de calorías y macros, marcar comidas, cambiar alimentos) ---------- */
.ay-hoy { margin: 12px 0 14px; padding: 16px; border-radius: 18px; background: var(--night); color: #F5F5F2; }
.ay-hoy p { margin: 0; }
.ay-hoy .ay-sem { color: #A3A3AD; }
.ay-hoy-t { margin-top: 12px !important; font-weight: 700; font-size: 14px; }
.ay-hoy-cal { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 4px; }
.ay-hoy-cal b { font: 400 34px/1 "Bebas Neue", sans-serif; letter-spacing: .02em; }
.ay-hoy-cal span, .ay-hoy-falta { font-size: 13px; font-weight: 700; color: #A3A3AD; font-variant-numeric: tabular-nums; }
.ay-hoy-barra { height: 10px; margin-top: 8px; border-radius: 999px; background: rgba(255, 255, 255, .13); overflow: hidden; }
.ay-hoy-barra i { display: block; height: 100%; border-radius: inherit; background: var(--lime); }
.ay-hoy-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.ay-hoy-macros p { font-size: 12px; font-weight: 700; color: #F5F5F2; }
.ay-hoy-macros p + p { margin-top: 4px; color: #A3A3AD; font-variant-numeric: tabular-nums; }
.ay-hoy-macros p + p b { font-size: 16px; color: #F5F5F2; }
.ay-hoy-macros .ay-hoy-barra { height: 6px; }
.ay-hoy-macros small { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: #A3A3AD; }
.ay-hoy .m-c i { background: #199E70; }
.ay-hoy .m-g i { background: #9085E9; }
.ay-hoy .m-p i { background: #D95926; }
.ay-hoy-nota { margin-top: 14px !important; font-size: 13px; color: #A3A3AD; }
@media (prefers-color-scheme: dark) { .ay-hoy { background: #000; box-shadow: inset 0 0 0 1px #2A2A33; } }
html[data-tema="halloween"] .ay-hoy { background: #000; box-shadow: inset 0 0 0 1px #2A2A33; }

.ay-comi {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 12px;
  padding: 10px 14px; border: 1.5px solid var(--field-line); border-radius: 12px; background: var(--bg); color: var(--text);
  font: 800 14px "Montserrat", sans-serif; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.ay-comi:active { transform: scale(.97); }
.ay-comi::before { content: ""; flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--muted); border-radius: 50%; }
.ay-comi[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--night); }
.ay-comi[aria-pressed="true"]::before { content: "✓"; border: 0; background: var(--night); color: var(--lime); font-size: 11px; line-height: 18px; text-align: center; }
.ay-comi-ok { margin: 12px 0 0; font-weight: 800; font-size: 13px; }
.ay-comida.comido .ay-plato, .ay-comida.comido .ay-it, .ay-comida.comido .ay-mas { opacity: .55; }
.ay-comida.comido .ay-num { background: var(--lime); color: var(--night); }

/* ⇄ cambiar un alimento por otro */
.ay-it { align-items: center; }
.ay-swap {
  width: 32px; height: 32px; margin: -4px -4px -4px 8px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; vertical-align: middle;
}
.ay-swap[aria-expanded="true"] { background: var(--night); border-color: var(--night); color: var(--lime); }
@media (prefers-color-scheme: dark) { .ay-swap[aria-expanded="true"] { background: var(--lime); border-color: var(--lime); color: var(--night); } }
html[data-tema="halloween"] .ay-swap[aria-expanded="true"] { background: var(--lime); border-color: var(--lime); color: var(--night); }
.ay-envez { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
.ay-opciones { display: grid; gap: 8px; margin: 2px 0 8px; padding: 10px; border-radius: 12px; background: var(--bg); }
.ay-opciones > p { margin: 0; font-size: 13px; font-weight: 800; }
.ay-opciones input { padding: 10px 12px; font-size: 16px; }
.ay-op-lista { display: grid; gap: 10px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.ay-op-grupo { display: grid; gap: 6px; }
.ay-op-grupo > p { margin: 4px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ay-op-grupo > p small { letter-spacing: 0; text-transform: none; font-weight: 600; }
.ay-op-grupo button {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text);
  font: 600 14px "Montserrat", sans-serif; text-align: left; cursor: pointer;
}
.ay-op-grupo button b { flex: none; }
.ay-op-grupo button small { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--lime); color: var(--night); font-size: 10px; font-weight: 800; }

/* Plato propio con la base de datos */
.ay-ed-lista { display: grid; gap: 8px; }
.ay-ed-t { font-size: 13px; font-weight: 700; }
.ay-ed-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.ay-ed-fila select { min-width: 0; }
.ay-ed-x { width: 40px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.ay-paso { grid-column: 1 / -1; justify-self: start; display: flex; align-items: center; border: 1px solid var(--field-line); border-radius: 12px; background: var(--field); }
.ay-paso button { width: 44px; height: 40px; border: 0; background: none; color: var(--text); font-size: 20px; font-weight: 800; cursor: pointer; }
.ay-paso span { min-width: 92px; text-align: center; font-weight: 800; font-size: 14px; white-space: nowrap; }
.ay-ed-cuenta {
  display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 10px 12px; border-radius: 12px;
  background: var(--bg); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right;
}
.ay-ed-cuenta span:nth-child(5n + 1) { text-align: left; font-weight: 800; }
.ay-ed-cuenta span:nth-child(-n + 5) { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ay-ed-ajustar { justify-self: start; }
.ay-op-acciones { display: flex; gap: 8px; }
.ay-op-acciones .btn { flex: 1; }

/* Menús nuevos (D, E, F): el botón "+ Nuevo menú", su cuadro y los botones del menú escogido */
.ay-menus .ay-menu-mas { border-style: dashed; }
.ay-menus .ay-menu-mas b { color: var(--muted); }
.ay-menu-acc { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.ay-nuevo { display: grid; gap: 10px; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.ay-nuevo p { margin: 0; }
.ay-nuevo-t { font: 400 24px/1 "Bebas Neue", sans-serif; letter-spacing: .02em; }
.ay-nuevo label { font-size: 13px; }
.ay-nuevo-sub { font-size: 13px; font-weight: 700; }
.ay-nuevo .hint { font-size: 13px; }
.ay-anadir { width: 100%; min-height: 44px; margin-top: 10px; border-style: dashed; }

/* Nutrición: "Cambiar hora" al lado de "Cambiar este plato" */
.ay-cambiar + .ay-cambiar-hora { margin-left: 18px; }

/* Nutrición: los 7 días de la semana, cada uno con la letra de su menú (usa el estilo de los botones de semana) */
.ay-dias { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 6px 0 12px; }
.ay-dias button { padding: 7px 0 6px; font-size: 24px; }
.ay-dias button span { margin-top: 3px; font: 800 10px/1 "Montserrat", sans-serif; letter-spacing: .04em; color: var(--muted); }
.ay-dias button[aria-pressed="true"] span { color: inherit; }

/* Pruebas: gráfica de lo que comió cada día (calorías, carbohidratos, grasa, proteína) */
.nutri-ver { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.nutri-ver button {
  min-height: 34px; padding: 0 12px; border: 1px solid var(--card-chip); border-radius: 999px; background: var(--card-chip); cursor: pointer;
  color: var(--card-muted); font: 700 12px/1 "Montserrat", sans-serif;
}
.nutri-ver button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--night); }