/* =====================================================================
   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; }

/* ---------- 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 {
  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 { 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, .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; }
}