/* ============================================================
   diet-app · theme.css — sistema de diseño (UX-01)
   Cargar SIEMPRE después del CDN de daisyUI: sobrescribe sus
   variables de tema (formato daisyUI 4: triplete OKLCH "L C H",
   se consumen como oklch(var(--p) / alpha)).
   Paleta: verde salvia como único acento de marca, neutros
   cálidos "stone" y semánticos desaturados.
   ============================================================ */

/* ---------- Paleta clara (por defecto) ---------- */
:root,
[data-theme="light"] {
  --p:  56% 0.055 165;  /* primary  ~#5F8B74 salvia */
  --pc: 98% 0.01 165;
  --su: 66% 0.07 155;   /* success  ~#79A88B */
  --wa: 75% 0.09 75;    /* warning  ~#D9A86C ocre suave */
  --er: 62% 0.09 27;    /* error    ~#C57B6E terracota */
  --in: 66% 0.05 240;   /* info     ~#7D9DB5 azul niebla */
  --b1: 98.5% 0.003 80; /* base-100 ~#FBFAF8 hueso */
  --b2: 96% 0.004 80;
  --b3: 91% 0.005 80;
  --bc: 24% 0.008 60;   /* texto    ~#2C2A26 */
  --rounded-box: 0.875rem;   /* cards/modales 14px */
  --rounded-btn: 0.625rem;   /* botones/inputs 10px */
  --rounded-badge: 9999px;   /* chips siempre pill */
}

/* ---------- Paleta oscura (cálida, no azulada) ---------- */
[data-theme="dark"] {
  --p:  70% 0.06 165;   /* salvia clara */
  --pc: 18% 0.03 165;   /* texto oscuro sobre la salvia clara */
  --b1: 21% 0.006 75;   /* ~#1A1815 */
  --b2: 18% 0.005 75;
  --b3: 28% 0.007 75;
  --bc: 90% 0.005 80;
  /* su/wa/er/in: mismas familias, +6% luminosidad */
  --su: 72% 0.07 155;
  --wa: 81% 0.09 75;
  --er: 68% 0.09 27;
  --in: 72% 0.05 240;
}

/* ---------- Tipografía ---------- */
html,
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Cifras alineadas en columnas (kcal, pesos, macros): clase utilitaria.
   Coincide con la utilidad de Tailwind para que ambas vías funcionen. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ---------- Sombras: solo 2 niveles ---------- */
/* Reposo: cards con borde sutil y sombra mínima */
.card {
  border: 1px solid oklch(var(--b2));
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.05);
}
/* Flotante: solo modales y dropdowns */
.modal-box,
.dropdown-content {
  box-shadow: 0 12px 32px rgb(28 25 23 / 0.14);
}

/* ---------- Estados HTMX (opacidad funcional, fuera de media queries) ---------- */
.htmx-swapping { opacity: 0; }
.htmx-settling { opacity: 1; }
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ---------- Transiciones: 150ms ease-out, respetando reduced-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  a,
  button,
  input,
  select,
  textarea,
  .btn,
  .badge,
  .card {
    transition: color 150ms ease-out, background-color 150ms ease-out,
      border-color 150ms ease-out, opacity 150ms ease-out, box-shadow 150ms ease-out;
  }
  .htmx-swapping,
  .htmx-settling,
  .htmx-indicator {
    transition: opacity 150ms ease-out;
  }
}
@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;
  }
}

/* ---------- Iconos Lucide: tamaño consistente ---------- */
[data-lucide] {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
}

/* ---------- Nav inferior móvil (UX-05) ---------- */
.nav-movil {
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-movil-item {
  position: relative;
  min-height: 56px; /* target táctil */
}
/* Píldora superior del item activo */
.nav-movil-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 3px;
  border-radius: 9999px;
  background: oklch(var(--p));
}

/* ---------- Toast global (UX-07) ---------- */
#toast-global {
  pointer-events: none; /* contenedor fijo: que no robe taps */
  z-index: 1000; /* por encima de los modales daisyUI (999) */
  white-space: normal; /* daisyUI fuerza nowrap: los mensajes largos deben envolver */
  max-width: min(92vw, 28rem);
  bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
}

/* En móvil el nav inferior es fijo: hueco para contenido y toast */
@media (max-width: 639.98px) {
  body {
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom) + 0.5rem);
  }
  #toast-global {
    bottom: calc(3.5rem + env(safe-area-inset-bottom) + 0.5rem);
  }
}

/* ---------- Day-cards del dashboard (UX-14: movido desde dashboard.html) ---------- */
/* En desktop (>=md): expandir todos los días, ocultar summary */
@media (min-width: 768px) {
  details.day-card > summary { display: none; }
  details.day-card > .day-content { display: flex !important; }
  details.day-card { padding-top: 0.75rem; }
}
details.day-card > summary { list-style: none; }
details.day-card > summary::-webkit-details-marker { display: none; }
details.day-card[open] > summary .chev { transform: rotate(180deg); }

/* ---------- Card de peso colapsable (UX-11) ---------- */
/* Mismo patrón que day-card: colapsada en móvil, en >=md siempre
   desplegada con el summary haciendo de cabecera. */
details.weight-card > summary { list-style: none; }
details.weight-card > summary::-webkit-details-marker { display: none; }
details.weight-card[open] > summary .chev { transform: rotate(180deg); }
@media (min-width: 768px) {
  details.weight-card > .weight-content { display: block !important; }
}

/* ---------- Tip de la semana en 1 línea tras la primera vista (UX-11) ---------- */
.tip-resumido {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.tip-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---------- Botón "Generar plan" (UX-07) ---------- */
/* Alterna el contenido del botón: en reposo / "Generando… ~30s" mientras
   la petición HTMX está en vuelo (htmx pone .htmx-request en el botón). */
.muestra-generando { display: none; }
.htmx-request .muestra-generando,
.htmx-request.muestra-generando { display: inline-flex; }
.htmx-request .oculta-generando,
.htmx-request.oculta-generando { display: none; }