/* ============================================================
   Plan Hashimoto — sistema de diseño
   ============================================================ */
:root {
  /* Marca */
  --verde:        #1f7a4d;
  --verde-600:    #2f8d5c;
  --verde-claro:  #e8f4ed;
  --verde-borde:  #bfe0cc;

  /* Acentos */
  --ambar:        #b5730b;
  --ambar-bg:     #fdf3dd;
  --ambar-borde:  #efd79a;

  /* Neutros */
  --tinta:        #1a2420;
  --texto:        #33413b;
  --gris:         #6b7a72;
  --gris-suave:   #97a49d;
  --linea:        #e6ece8;
  --linea-fuerte: #d4ddd7;
  --panel:        #ffffff;
  --fondo:        #f4f7f5;

  /* Formas */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --sombra-sm: 0 1px 2px rgba(16,40,28,.06);
  --sombra-md: 0 4px 16px rgba(16,40,28,.07);
  --sombra-lg: 0 12px 32px rgba(16,40,28,.10);

  /* Escala tipográfica */
  --fs-xs: .78rem;
  --fs-sm: .88rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 1.85rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 130px; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--tinta); line-height: 1.25; }
a { color: var(--verde); }

/* ---------- Cabecera ---------- */
.cabecera {
  background: linear-gradient(135deg, var(--verde) 0%, var(--verde-600) 100%);
  color: #fff;
  padding: 16px 20px;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: var(--sombra-md);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { color: #fff; text-decoration: none; font-weight: 800; font-size: var(--fs-lg); letter-spacing: .2px; }
.btn-imprimir { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 14px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background .12s ease; }
.btn-imprimir:hover { background: rgba(255,255,255,.3); }
.nav-semanas { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: rgba(255,255,255,.16);
  color: #fff; text-decoration: none;
  padding: 6px 14px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600;
  transition: background .12s ease;
}
.chip:hover { background: rgba(255,255,255,.28); }
.chip.activo { background: #fff; color: var(--verde); }

/* ---------- Contenido ---------- */
.contenido { max-width: 940px; margin: 0 auto; padding: 22px 18px 8px; }
h1 { font-size: var(--fs-2xl); margin: .2em 0 .1em; }
.intro { color: var(--gris); margin-top: 0; font-size: var(--fs-lg); }

/* ---------- Índice (tarjetas de semana) ---------- */
.tarjetas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 8px; }
.tarjeta {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md);
  padding: 20px; text-decoration: none; color: var(--texto);
  box-shadow: var(--sombra-sm);
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); border-color: var(--verde-borde); }
.tarjeta-num { color: var(--verde); font-weight: 800; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .5px; }
.tarjeta-titulo { font-weight: 700; font-size: var(--fs-lg); color: var(--tinta); }
.tarjeta-sub { color: var(--gris); font-size: var(--fs-sm); }

/* ---------- Tabs (sticky sub-nav) ---------- */
.tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  position: sticky; top: 64px; z-index: 20;
  background: var(--fondo);
  padding: 12px 0; margin: 14px 0 20px;
  border-bottom: 1px solid var(--linea);
}
.tab {
  border: 1px solid var(--linea-fuerte); background: var(--panel); color: var(--texto);
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600;
  transition: all .12s ease;
}
.tab:hover { border-color: var(--verde-borde); }
.tab.activo { background: var(--verde); color: #fff; border-color: var(--verde); box-shadow: var(--sombra-sm); }
.panel { display: none; animation: aparecer .18s ease; }
.panel.activo { display: block; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Bloques y avisos ---------- */
.bloque { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--sombra-sm); }
.bloque h3 { margin-top: 0; font-size: var(--fs-lg); }
.aviso {
  background: var(--ambar-bg); border: 1px solid var(--ambar-borde);
  border-left: 4px solid var(--ambar);
  border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 16px;
}
.aviso strong { color: var(--ambar); }
.aviso ul { margin: .5em 0 0; padding-left: 1.15em; }
.aviso li { margin-bottom: 4px; }
.rutina { margin: 0; padding-left: 1.2em; }
.rutina li { margin-bottom: 6px; }
.jugo { margin: .5em 0; padding-left: .8em; border-left: 3px solid var(--verde-borde); }

.seccion-titulo { font-size: var(--fs-xl); margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--linea); }

/* ---------- Tira de días (jump) ---------- */
.tira-dias { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tira-dia {
  text-decoration: none; color: var(--texto);
  border: 1px solid var(--linea-fuerte); background: var(--panel);
  border-radius: 999px; padding: 6px 13px; font-size: var(--fs-sm); font-weight: 600;
  transition: all .12s ease;
}
.tira-dia:hover { border-color: var(--verde-borde); color: var(--verde); }
.tira-dia.hoy { background: var(--verde); color: #fff; border-color: var(--verde); }

/* ---------- Días (timeline) ---------- */
.dias { display: grid; gap: 16px; }
.dia {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md);
  padding: 16px 20px; box-shadow: var(--sombra-sm); scroll-margin-top: 130px;
}
.dia.hoy { border: 1.5px solid var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.dia-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dia-nombre { margin: 0; font-size: var(--fs-xl); }
.badge {
  font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .4px;
}
.badge-hoy { background: var(--verde); color: #fff; }
.badge-cocina { background: var(--ambar-bg); color: var(--ambar); border: 1px solid var(--ambar-borde); }
.badge-flex { background: var(--verde-claro); color: var(--verde); }

/* Timeline de tiempos de comida */
.timeline { list-style: none; margin: 0; padding: 0; }
.tiempo {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--linea);
}
.tiempo:first-child { border-top: none; }
.tiempo-etq { display: flex; align-items: center; gap: 8px; color: var(--verde); font-weight: 700; font-size: var(--fs-sm); }
.tiempo-ico { font-size: 1.05rem; }
.tiempo-desc { color: var(--texto); }

/* ---------- Recetas ---------- */
.recetas-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtro {
  border: 1px solid var(--linea-fuerte); background: var(--panel); color: var(--texto);
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
}
.filtro.activo { background: var(--verde); color: #fff; border-color: var(--verde); }
.filtro-etq { color: var(--gris); font-size: var(--fs-sm); margin-right: 2px; }

.receta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--sombra-sm); scroll-margin-top: 130px; }
.receta h3 { margin-top: 0; font-size: var(--fs-lg); }
.receta-meta { display: flex; gap: 8px; font-size: var(--fs-xs); margin: 0 0 14px; flex-wrap: wrap; }
.receta-meta span { border-radius: 999px; padding: 4px 11px; font-weight: 600; }
.meta-porciones { background: #eef2f0; color: var(--gris); }
.meta-cocina { background: var(--ambar-bg); color: var(--ambar); border: 1px solid var(--ambar-borde); }
.meta-para { background: var(--verde-claro); color: var(--verde); border: 1px solid var(--verde-borde); }
/* Ejercicio */
.hoy-toca { border: 1.5px solid var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.hoy-cab { display: flex; align-items: center; gap: 10px; }
.hoy-cab h3 { margin: 0; }
.hoy-nota { margin: 8px 0 10px; color: var(--texto); }
.hoy-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hoy-chip { background: var(--verde-claro); color: var(--verde); font-weight: 700; border-radius: 999px; padding: 4px 12px; font-size: var(--fs-sm); }
.btn-video-ok { background: var(--verde-claro); color: var(--verde); border-color: var(--verde-borde); }
.btn-video-ok:hover { background: var(--verde-borde); }
.video-modal { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.video-modal[hidden] { display: none !important; }
.video-box { background: #000; border-radius: var(--r-md); max-width: 820px; width: 100%; overflow: hidden; }
.video-cab { display: flex; align-items: center; justify-content: space-between; background: var(--tinta); color: #fff; padding: 8px 14px; font-weight: 700; }
.video-cerrar { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; }
#video-player { width: 100%; max-height: 70vh; display: block; background: #000; }
#anim-player { width: 100%; max-width: 420px; margin: 0 auto; display: block; background: #eef6f0; }
#video-player[hidden], #anim-player[hidden] { display: none !important; }
.celda-video { white-space: nowrap; }
.btn-anim { background: var(--verde); color: #fff; border-color: var(--verde); }
.btn-anim:hover { background: var(--verde-600); }
.btn-yt { display: inline-block; margin-left: 6px; font-size: var(--fs-xs); color: var(--gris); text-decoration: none; }
.btn-yt:hover { color: #c0392b; }

/* Ejercicio (base) */
.ej-tracker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.ej-grupo { border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 12px 14px; background: #fafcfb; }
.ej-grupo-tit { font-weight: 700; color: var(--verde); display: block; margin-bottom: 8px; }
.ej-chips { display: flex; gap: 8px; }
.ej-chip { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--linea-fuerte); background: #fff; color: var(--gris); font-weight: 800; font-size: 1.05rem; cursor: pointer; transition: all .12s ease; }
.ej-chip.hecho { background: var(--verde); border-color: var(--verde); color: #fff; }
.ej-resumen { margin: 12px 0 0; font-weight: 600; color: var(--gris); }
.ej-resumen.bien { color: var(--verde); }
.ej-fase-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ej-fase-cab h3 { margin: 0; }
.ej-fase-activa { border: 1.5px solid var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.ej-linea { margin: 8px 0 0; }
.ej-tabla { margin-top: 12px; }
.ej-semana th { white-space: nowrap; }
.btn-video { display: inline-block; white-space: nowrap; background: #ffe8e6; color: #c0392b; border: 1px solid #f3c0ba; border-radius: 999px; padding: 4px 10px; font-size: var(--fs-xs); font-weight: 700; text-decoration: none; }
.btn-video:hover { background: #ffd9d5; }
@media (max-width: 680px) { .ej-tracker { grid-template-columns: 1fr; } }

/* Cocina (vista para la persona que cocina) */
.cocina-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cocina-cab h3 { margin: 0; }

/* Notas de la semana (tarjetas por tema) */
.notas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.nota-card { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 12px 16px; box-shadow: var(--sombra-sm); }
.nota-cab { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--verde); margin-bottom: 6px; font-size: var(--fs-base); }
.nota-ico { font-size: 1.15rem; }
.nota-card ul { margin: 0; padding-left: 1.1em; }
.nota-card li { margin-bottom: 4px; font-size: var(--fs-sm); color: var(--texto); }

/* Suplementos */
.suplementos h3 { margin-top: 0; }
.sup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sup-horario { border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 12px 14px; background: #fafcfb; }
.sup-momento { font-weight: 700; color: var(--verde); margin-bottom: 8px; font-size: var(--fs-base); }
.sup-horario ul { list-style: none; margin: 0; padding: 0; }
.sup-horario li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 7px 0; border-top: 1px solid var(--linea); }
.sup-horario li:first-child { border-top: none; }
.sup-cant { font-weight: 800; color: var(--tinta); background: var(--verde-claro); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-sm); white-space: nowrap; }
.sup-nombre { font-weight: 600; }
.sup-detalle { color: var(--gris); font-size: var(--fs-sm); width: 100%; margin-left: 2px; }
.sup-aviso { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--ambar); background: var(--ambar-bg); border: 1px solid var(--ambar-borde); border-radius: var(--r-sm); padding: 10px 12px; }
@media (max-width: 680px) { .sup-grid { grid-template-columns: 1fr; } }

/* Resumen: plan de cocción por día */
.plan-dias { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 18px; box-shadow: var(--sombra-sm); }
.plan-dias-titulo { margin: 0 0 14px; color: var(--texto); font-size: var(--fs-base); }
.plan-dias-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.plan-dia { border: 1px solid var(--verde-borde); border-radius: var(--r-sm); padding: 12px 16px; background: var(--verde-claro); }
.plan-dia h3 { margin: 0 0 10px; color: var(--verde); font-size: var(--fs-lg); }
.plan-dia ul { list-style: none; margin: 0; padding: 0; }
.plan-dia li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(191,224,204,.6); }
.plan-dia li:first-child { border-top: none; }
.pd-nombre { font-weight: 700; color: var(--tinta); }
.pd-cant { color: var(--gris); font-size: var(--fs-sm); }
.pd-freeze { font-size: var(--fs-xs); font-weight: 700; color: #1560a8; background: #e4f0fb; border: 1px solid #bcdcf5; border-radius: 999px; padding: 2px 9px; }

/* Plan de cocción (tandas) */
.tandas { background: var(--verde-claro); border: 1px solid var(--verde-borde); border-radius: var(--r-sm); padding: 10px 14px; margin: 0 0 14px; }
.tandas-titulo { font-weight: 700; color: var(--verde); font-size: var(--fs-sm); margin-bottom: 6px; }
.tabla-tandas { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tabla-tandas th { text-align: left; color: var(--gris); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--verde-borde); }
.tabla-tandas td { padding: 6px 10px 6px 0; border-bottom: 1px solid rgba(191,224,204,.5); vertical-align: top; }
.tabla-tandas tr:last-child td { border-bottom: none; }
.tabla-tandas .tt-dia { font-weight: 700; color: var(--verde); white-space: nowrap; }
.tandas-nota { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--verde); }
.tabla-tandas .tt-congelar { color: #1560a8; font-weight: 600; }

.receta-cols { display: grid; gap: 22px; grid-template-columns: 1fr 1.35fr; }
.receta-cols h4 { margin: 0 0 8px; color: var(--verde); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .5px; }
.receta-cols ul, .receta-cols ol { margin: 0; padding-left: 1.25em; }
.receta-cols li { margin-bottom: 6px; }
.receta-cols ol li { padding-left: 3px; }

/* ---------- Lista de compras ---------- */
.compras-barra { position: sticky; top: 118px; z-index: 15; background: var(--fondo); padding: 6px 0 12px; margin-bottom: 6px; }
.compras-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.buscador { flex: 1; min-width: 180px; }
.buscador input {
  width: 100%; border: 1px solid var(--linea-fuerte); border-radius: 999px;
  padding: 9px 16px; font-size: var(--fs-sm); background: var(--panel);
}
.buscador input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.progreso-global { font-weight: 800; color: var(--verde); white-space: nowrap; }
.btn { border: 1px solid var(--linea-fuerte); background: var(--panel); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--texto); }
.btn:hover { border-color: var(--verde-borde); }
.btn-primario { background: var(--verde); color: #fff; border-color: var(--verde); }
.compras-ayuda { color: var(--gris); font-size: var(--fs-sm); margin: 8px 0 0; }

.barra-progreso { height: 6px; background: var(--linea); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.barra-progreso > span { display: block; height: 100%; width: 0; background: var(--verde); transition: width .2s ease; }

.cat { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 14px 20px; margin-bottom: 14px; box-shadow: var(--sombra-sm); }
.cat-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.cat-cab h3 { margin: 0; color: var(--verde); font-size: var(--fs-lg); }
.cat-progreso { font-size: var(--fs-sm); font-weight: 700; color: var(--gris); }
.items { list-style: none; margin: 0; padding: 0; }
.item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.item:last-child { border-bottom: none; }
.item.oculto { display: none; }
.item label { display: flex; align-items: center; gap: 12px; cursor: pointer; flex: 1; }
.item .chk { width: 22px; height: 22px; accent-color: var(--verde); flex-shrink: 0; }
.item-nombre { font-weight: 500; }
.item-cant { color: var(--gris); font-size: var(--fs-sm); background: #f1f5f3; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.item label:has(.chk:checked) .item-nombre { text-decoration: line-through; color: var(--gris-suave); }
.item label:has(.chk:checked) { opacity: .7; }
.btn-copiar { border: none; background: var(--verde-claro); border-radius: var(--r-sm); padding: 7px 11px; cursor: pointer; font-size: 1rem; flex-shrink: 0; transition: background .12s ease; }
.btn-copiar:hover { background: var(--verde-borde); }
.btn-copiar.copiado { background: var(--verde); color: #fff; }
.sin-resultados { color: var(--gris); font-style: italic; padding: 10px 0; }

/* ---------- Progreso ---------- */
.chip-progreso { background: rgba(255,255,255,.28); }
.prog-actualizado { font-size: var(--fs-sm); color: var(--gris-suave); }
#grafica-sueno { width: 100%; height: 260px; display: block; }
.prog-metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 18px; }
.prog-metricas-3 { grid-template-columns: repeat(3, 1fr); }
.metrica { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 16px; text-align: center; box-shadow: var(--sombra-sm); }
.metrica-num { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--tinta); }
.metrica-num.bien { color: var(--verde); }
.metrica-num.mal { color: #b5730b; }
.metrica-etq { display: block; font-size: var(--fs-xs); color: var(--gris); margin-top: 4px; }

.prog-meta-info { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--gris); margin-bottom: 8px; }
.barra-progreso.grande { height: 14px; }
.prog-meta-pct { text-align: center; margin: 8px 0 0; font-weight: 700; color: var(--verde); }

.form-peso { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.form-peso label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--gris); font-weight: 600; }
.form-peso input { border: 1px solid var(--linea-fuerte); border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--fs-base); }
.form-peso input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }

#grafica-cont { width: 100%; overflow-x: auto; }
#grafica { width: 100%; height: 240px; display: block; }

.tabla-historial { width: 100%; border-collapse: collapse; }
/* En pantallas chicas, la tabla puede desbordar horizontalmente dentro de su
   bloque sin romper el ancho de la página (scroll lateral solo en la tabla). */
.bloque { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-historial th { text-align: left; color: var(--gris); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--linea); }
.tabla-historial td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--linea); }
.cambio-baja { color: var(--verde); font-weight: 700; }
.cambio-sube { color: #b5730b; font-weight: 700; }
.btn-borrar { border: none; background: none; color: var(--gris-suave); cursor: pointer; font-size: 1rem; }
.btn-borrar:hover { color: #c0392b; }

@media (max-width: 680px) {
  .prog-metricas,
  .prog-metricas-3 { grid-template-columns: 1fr 1fr; }
  .metrica { padding: 12px; }
  .metrica-num { font-size: var(--fs-lg); }
  /* Las tablas anchas (caminatas = 8 columnas, sueño) scrollean en vez de romper
     el layout. min-width fuerza el scroll lateral dentro del bloque. */
  .tabla-historial { min-width: 560px; font-size: var(--fs-xs); }
  .tabla-historial th,
  .tabla-historial td { padding: 7px 10px 7px 0; white-space: nowrap; }
}

/* ---------- Pie ---------- */
.pie { max-width: 940px; margin: 24px auto 48px; padding: 0 18px; color: var(--gris-suave); font-size: var(--fs-xs); text-align: center; }

/* ---------- Botón imprimir ---------- */
.acciones-panel { display: flex; justify-content: flex-end; margin-bottom: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
  h1 { font-size: var(--fs-xl); }
  .receta-cols { grid-template-columns: 1fr; gap: 14px; }
  .plan-dias-grid { grid-template-columns: 1fr; }
  .tabla-tandas { font-size: var(--fs-xs); }
  .tiempo { grid-template-columns: 1fr; gap: 3px; }
  .tiempo-etq { font-size: var(--fs-xs); }
  .tabs { top: 60px; }
  .compras-barra { top: 108px; }
}

/* ---------- Impresión ---------- */
@media print {
  .cabecera, .tabs, .tira-dias, .recetas-toolbar, .compras-barra .btn,
  .btn-copiar, .acciones-panel, .pie, .nav-semanas, .btn-imprimir { display: none !important; }
  body { background: #fff; }
  /* imprimir solo la pestaña activa */
  .panel { display: none !important; }
  .panel.activo { display: block !important; }
  .dia, .receta, .cat, .bloque, .plan-dias { break-inside: avoid; box-shadow: none; border-color: #ccc; }
  .compras-barra { position: static; }
  a { color: #000; text-decoration: none; }
  h1 { margin-top: 0; }
}