/* Inter va con la aplicación (una sola fuente variable, latin, 48 KB; licencia OFL) en vez de pedirse a
   Google Fonts: así se ve igual en el gimnasio sin cobertura y no se avisa a un tercero de cada visita. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}
/* NutriPlan · Olimpia
   Paleta: mármol, piedra caliza, oro, beige, oliva, terracota. */

:root {
  --marble: #ffffff;
  --limestone: #faf8f4;
  --stone: #f2efe8;
  --beige: #e9e0cf;
  --beige-soft: #f4ede1;
  --ink: #2b2924;
  --slate: #6f6a60;
  --slate-soft: #9a938a;
  --line: #e3ded2;
  --line-soft: #efebe2;

  --gold: #b08d2e;
  --gold-bright: #d4af37;
  --gold-wash: #f6efd9;
  --olive: #6f7a4e;
  --olive-wash: #eef0e3;
  --terracotta: #a85a37;
  --terracotta-wash: #f8ece5;
  --aegean: #3f6274;
  --aegean-wash: #e8eef1;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(43, 41, 36, .04);
  --shadow: 0 10px 30px -12px rgba(43, 41, 36, .12);
  --shadow-lg: 0 30px 70px -24px rgba(43, 41, 36, .22);

  /* Antes era una serif (Optima/Palatino/Georgia); se deja la misma tipografía limpia en toda la app. */
  --serif: var(--sans);
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rail: 244px;
  --header: 68px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -.015em; margin: 0; }
h1 { font-size: 30px; line-height: 1.15; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
p { margin: 0; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; opacity: .45; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--slate); }
.dim { color: var(--slate-soft); }
/* Botón que parece un enlace: para acciones secundarias dentro de un
   formulario, como "¿has olvidado la contraseña?". */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--slate); font: inherit; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--ink); }
.center { text-align: center; }
.right { text-align: right; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- ornamento: greca ----------
   La greca (meander) es la moldura griega por excelencia.
   Se construye con gradientes, sin imágenes externas. */
.meander {
  height: 10px;
  background:
    linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 14px) repeat-x left top / 14px 10px,
    linear-gradient(90deg, transparent 0 4px, var(--gold) 4px 6px, transparent 6px 14px) repeat-x left 4px / 14px 6px;
  opacity: .5;
}

.rule-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: 0; opacity: .4; }

/* ---------- armazón ---------- */
.app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

.rail {
  background: var(--marble);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { padding: 24px 22px 18px; display: flex; align-items: center; gap: 12px; }
.brand .column { display: flex; flex-direction: column; gap: 3px; }
.brand .column b { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.brand .column span { font-size: 11px; color: var(--slate-soft); text-transform: uppercase; letter-spacing: .13em; }

.mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--gold-wash);
  border: 1px solid var(--beige);
  border-radius: 12px;
  color: var(--gold);
  font-size: 19px;
  flex: none;
}

.nav { padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--slate-soft); padding: 16px 10px 7px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 10px;
  color: var(--slate); font-size: 14.5px; font-weight: 500;
  text-align: left; width: 100%;
  transition: background .13s, color .13s;
}
.nav-item:hover { background: var(--stone); color: var(--ink); }
.nav-item.on { background: var(--ink); color: var(--marble); }
.nav-item .ico { width: 19px; text-align: center; opacity: .85; flex: none; font-size: 14px; }
.nav-item .badge {
  margin-left: auto; font-size: 11px; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 20px;
  background: var(--gold-bright); color: var(--ink); font-weight: 700;
}
.nav-item.on .badge { background: var(--marble); }

.rail-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--line-soft); }
.who { display: flex; align-items: center; gap: 10px; padding: 8px 6px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--beige); color: var(--ink);
  font-weight: 700; font-size: 13px;
}
.who .n { font-size: 13.5px; font-weight: 600; }
.who .g { font-size: 11.5px; color: var(--slate-soft); }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--header);
  background: rgba(250, 248, 244, .82);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
  padding: 0 30px;
  position: sticky; top: 0; z-index: 20;
}
.topbar .today { font-size: 13.5px; color: var(--slate); }
.topbar .today b { color: var(--ink); font-weight: 600; text-transform: capitalize; }

.view { padding: 30px; max-width: 1280px; width: 100%; }

.page-head { margin-bottom: 24px; }
.page-head p { color: var(--slate); margin-top: 6px; max-width: 62ch; font-size: 14.5px; }
.page-head .row { margin-top: 16px; }

/* ---------- rejillas ---------- */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
/* Hoy en el ordenador: dos filas de dos columnas. Arriba, el balance y (registro rápido +
   recuperación); abajo, las comidas y el entrenamiento. `start` para que una tarjeta corta no se
   estire hasta la altura de su vecina. */
.hoy-rejilla {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas: "balance lateral" "comidas entreno";
}
/* El balance se estira hasta la altura de lo que tiene a su lado (registro rápido + recuperación): si
   no, queda un hueco en blanco debajo hasta que empiezan las comidas. Lo suyo se centra en vertical
   dentro de la tarjeta, en vez de pegarse arriba con el aire sobrante debajo. */
.hoy-balance { grid-area: balance; align-self: stretch; display: flex; flex-direction: column; }
.hoy-balance > .card { flex: 1; display: flex; flex-direction: column; }
.hoy-balance > .card > .body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hoy-lateral { grid-area: lateral; }
.hoy-comidas { grid-area: comidas; }
.hoy-entreno { grid-area: entreno; }
.g-side { grid-template-columns: minmax(0, 1fr) 320px; }

/* ---------- tarjetas ---------- */
.card {
  background: var(--marble);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.card.pad { padding: 20px; }
.card.flush { overflow: hidden; }
.card > .card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card > .card-head h2, .card > .card-head h3 { font-size: 16.5px; }
.card > .body { padding: 20px; }
.card > .body.tight { padding: 14px 20px; }
.card.subtle { background: var(--stone); border-color: var(--line); box-shadow: none; }
.card.flush.pad-sm > .body { padding: 0; }

.metric { padding: 17px 19px; }
.metric .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--slate-soft); font-weight: 600;
}
.metric .val { font-family: var(--serif); font-size: 27px; line-height: 1.1; margin-top: 7px; }
.metric .val small { font-family: var(--sans); font-size: 13px; color: var(--slate); font-weight: 500; }
.metric .sub { font-size: 12.5px; color: var(--slate); margin-top: 5px; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: 10px;
  font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
  transition: background .13s, border-color .13s, color .13s, transform .08s;
  white-space: nowrap;
}
.btn:active { transform: translateY(.5px); }
.btn-primary { background: var(--ink); color: var(--marble); }
.btn-primary:hover { background: #3d3a33; }
/* Entrar con Google. Botón hueco, con la G de Google en su color: el color de
   marca de un servicio externo no se copia, pero sí se puede nombrar. El resto
   del botón es de la paleta, para que no parezca un anuncio pegado encima. */
.btn-google {
  background: var(--marble, #fbf9f4);
  color: var(--ink);
  border-color: var(--line);
  margin-top: 14px;
}
.btn-google:hover { background: #f3efe6; border-color: #d8d1c2; }
.btn-google .g-logo {
  font-weight: 700; font-size: 15px; line-height: 1;
  color: #4285f4;
}

/* La línea de "o" separa las dos formas de entrar sin poner otra caja: es un
   detalle tipográfico, y una caja más sería más ruido que ayuda. */
.or-line {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 2px;
  color: var(--slate-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.or-line::before, .or-line::after {
  content: ""; flex: 1; height: 1px; background: var(--line-soft);
}

.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #9c7c26; }
.btn-ghost { background: var(--marble); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--stone); border-color: var(--beige); }
.btn-soft { background: var(--stone); color: var(--ink); }
.btn-soft:hover { background: var(--beige-soft); }
.btn-danger { background: var(--terracotta-wash); color: var(--terracotta); }
.btn-danger:hover { background: #f2ddd2; }
.btn-sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 12px 20px; font-size: 15px; border-radius: 11px; }
.btn-block { width: 100%; }

/* ---------- etiquetas ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--stone); color: var(--slate);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tag-gold { background: var(--gold-wash); color: var(--gold); border-color: #e8dcb4; }
.tag-olive { background: var(--olive-wash); color: var(--olive); border-color: #dde1cb; }
.tag-clay { background: var(--terracotta-wash); color: var(--terracotta); border-color: #eedad0; }
.tag-sea { background: var(--aegean-wash); color: var(--aegean); border-color: #d3e0e6; }
.tag-plain { background: transparent; }
.tag-lg { padding: 5px 12px; font-size: 12.5px; }

/* ---------- formularios ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--slate); }
.field .hint { font-size: 11.5px; color: var(--slate-soft); }
.field .err { font-size: 11.5px; color: var(--terracotta); font-weight: 600; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=search], input[type=datetime-local],
select, textarea {
  width: 100%;
  background: var(--marble);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 11px;
  transition: border-color .13s, box-shadow .13s;
  font-size: 14px;
}
input:hover, select:hover, textarea:hover { border-color: var(--beige); }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 46, .13);
}
input[type=number] { font-variant-numeric: tabular-nums; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236f6a60' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 30px;
}
input[type=range] { width: 100%; accent-color: var(--gold); }
textarea { resize: vertical; min-height: 64px; }

.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--gold); flex: none; }

.seg { display: inline-flex; background: var(--stone); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button {
  padding: 6px 13px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--slate);
  transition: background .13s, color .13s;
}
.seg button.on { background: var(--marble); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- tablas ---------- */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--slate-soft);
  padding: 10px 14px; background: var(--limestone);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--limestone); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.act { width: 1%; white-space: nowrap; text-align: right; }

.icon-btn {
  width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center; color: var(--slate-soft);
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--stone); color: var(--ink); }
.icon-btn.danger:hover { background: var(--terracotta-wash); color: var(--terracotta); }

/* ---------- barras de progreso ---------- */
.bar { height: 6px; background: var(--stone); border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 6px; transition: width .3s; }
.bar.over i { background: var(--terracotta); }
.bar.good i { background: var(--olive); }

/* ---------- estados vacíos ---------- */
.empty { padding: 42px 24px; text-align: center; color: var(--slate); }
.empty .glyph { font-size: 26px; color: var(--beige); margin-bottom: 10px; }
.empty h3 { color: var(--ink); margin-bottom: 6px; }
.empty p { font-size: 14px; max-width: 46ch; margin: 0 auto; }
.empty .row { justify-content: center; margin-top: 16px; }

/* ---------- avisos ---------- */
.note {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: 11px;
  font-size: 13.5px; line-height: 1.5;
  background: var(--gold-wash); color: #6d5716; border: 1px solid #e8dcb4;
}
.note.olive { background: var(--olive-wash); color: #4c5433; border-color: #dde1cb; }
.note.clay { background: var(--terracotta-wash); color: #7d4128; border-color: #eedad0; }
.note.sea { background: var(--aegean-wash); color: #2f4c5c; border-color: #d3e0e6; }
.note .ico { flex: none; opacity: .8; }

/* ---------- pestañas ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs button {
  padding: 10px 15px; font-size: 14px; font-weight: 600; color: var(--slate);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--gold); }
/* Pestañas de Progreso con el botón de añadir a la derecha, en la misma línea. La raya de abajo
   pasa de las pestañas a la barra entera. En móvil el botón se acorta («＋ Peso») para que quepan. */
.tabs-barra { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs-barra .tabs { flex: 1; min-width: 0; border-bottom: 0; margin-bottom: 0; scrollbar-width: none; }
.tabs-barra .tabs::-webkit-scrollbar { display: none; }
.tabs-acciones { flex: none; padding-bottom: 4px; }
.tabs-acciones:empty { display: none; }
@media (max-width: 520px) {
  .tabs-acciones .solo-ancho { display: none; }
  .tabs-barra { gap: 6px; }
  .tabs-barra .tabs button { padding: 10px 9px; font-size: 13.5px; }
}
/* Las kcal al lado del día. El nodo está siempre en el DOM y se rellena al
   pintar, en vez de aparecer y desaparecer: borrarlo obligaba a volver a buscar
   el texto por posición, que es justo lo que se rompe al añadir un alimento. */
.tabs button .tab-kcal { margin-left: 6px; font-size: 11px; }

/* El balance del día: el anillo a la izquierda y las barras de macros a la
   derecha. En una sola tarjeta porque eran dos con las mismas cuatro cifras. */
.balance-hoy { display: flex; gap: 22px; align-items: flex-start; }
.balance-anillo { flex-shrink: 0; text-align: center; }
.balance-pct { margin-top: 8px; text-align: center; }
.balance-pct-num { font: 500 34px/1.1 var(--serif); color: var(--ink); }
.balance-pct-txt { font-size: 13px; color: var(--slate-soft); }
.macro-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 720px) {
  /* En móvil el anillo y las barras no caben uno al lado del otro. */
  .balance-hoy { flex-direction: column; align-items: stretch; }
  /* Centrado: pegado a la izquierda dejaba un hueco en blanco a su derecha. */
  .balance-anillo { display: flex; flex-direction: column; align-items: center; }
}

/* ---------- diálogo ---------- */
dialog {
  border: 0; padding: 0; border-radius: var(--r-lg);
  background: var(--marble); color: var(--ink);
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
dialog::backdrop { background: rgba(43, 41, 36, .42); backdrop-filter: blur(2px); }
dialog.wide { width: min(920px, calc(100vw - 32px)); }
dialog .dlg-head {
  padding: 20px 24px 15px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
dialog .dlg-body { padding: 22px 24px; overflow-y: auto; max-height: calc(100vh - 210px); }
dialog .dlg-foot {
  padding: 15px 24px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: flex-end; gap: 9px; background: var(--limestone);
}

/* ---------- avisos flotantes ---------- */
.toasts {
  position: fixed; bottom: 22px; right: 22px; z-index: 200;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
}
.toast {
  background: var(--ink); color: var(--marble);
  padding: 11px 16px; border-radius: 11px;
  font-size: 13.5px; box-shadow: var(--shadow-lg);
  max-width: 380px; animation: slide .22s ease-out;
  display: flex; align-items: flex-start; gap: 9px;
}
.toast.err { background: var(--terracotta); }
.toast.ok .ico { color: var(--gold-bright); }
@keyframes slide { from { opacity: 0; transform: translateY(8px); } }

/* ---------- pantalla de acceso ---------- */
.gate {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1200px 500px at 50% -10%, var(--beige-soft), transparent 70%),
    var(--limestone);
}
.gate-box { width: min(420px, 100%); }
.gate .brand { justify-content: center; padding: 0 0 22px; }
.gate .card { padding: 30px; }
.gate h1 { font-size: 26px; text-align: center; }
.gate p.sub { text-align: center; color: var(--slate); font-size: 14px; margin: 8px 0 24px; }
.gate .field { margin-bottom: 14px; }
.gate .btn { margin-top: 6px; }
.gate .meander { margin-top: 22px; }

/* ---------- ficha ---------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 14px; }
.kv dt { color: var(--slate-soft); font-size: 13px; }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- lista de ejercicios ---------- */
.ex { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ex + .ex { margin-top: 10px; }
.ex-head {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px; background: var(--limestone); border-bottom: 1px solid var(--line-soft);
}
.ex-head .ord {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--beige); color: var(--ink);
}
.ex-head .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }
.ex-head .spec { font-size: 12.5px; color: var(--slate); font-variant-numeric: tabular-nums; }
/* Las kcal de cada comida en Hoy: lo único que se lee de un vistazo, más grandes. */
.ex-head .spec.kcal-comida { font-size: 16px; font-weight: 700; color: var(--ink); }
/* Las comidas de Hoy: cada una es una caja con aire alrededor, no pegada al borde de la tarjeta. */
.comidas-lista { padding: 6px 16px 16px !important; display: grid; gap: 12px; }
.comidas-lista .ex + .ex { margin-top: 0; }
.comidas-lista .ex { border-radius: 14px; background: var(--marble); }
.comidas-lista .ex-head { padding: 12px 14px; }
.comidas-lista .set-row { padding: 10px 14px; }
.comidas-lista .set-row + .set-row { border-top: 1px solid var(--line-soft); }
/* Subir, bajar, cambiar y quitar un ejercicio en pleno entreno. */
.ex-acciones { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.ex-acciones .icon-btn:disabled { opacity: .3; cursor: default; }
.set-row {
  display: grid; grid-template-columns: 34px repeat(2, minmax(0, 1fr)) 52px repeat(3, 30px);
  gap: 8px; align-items: center; padding: 7px 15px;
  /* La transición va con el fondo y no con `all`: con `all` también se anima el
     color del texto y al cambiar de estado se veía un parpadeo. */
  transition: background-color .18s ease;
}
.set-fila + .set-fila { border-top: 1px solid var(--line-soft); }
.set-row .n { font-size: 12px; color: var(--slate-soft); font-weight: 700; text-align: center; }
.set-row input, .set-row select { padding: 6px 8px; font-size: 13.5px; }
.set-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--terracotta); justify-self: center; }

/* --- Lo que se sabe de cada serie por separado ---------------------------- */

/* Las dos casillas de un unilateral, apiladas. En una sola celda y no en dos
   columnas porque la retícula de la serie ya es completa: meter dos columnas
   más convierte la fila en un acertijo en el móvil, que es donde se registra
   una sesión. */
.set-lados { display: flex; flex-direction: column; gap: 3px; }
.set-lado { display: flex; align-items: center; gap: 5px; }
.set-lado > span {
  font-size: 10.5px; font-weight: 700; color: var(--slate-soft);
  text-transform: uppercase; letter-spacing: .03em; width: 20px;
}
.set-lado input { width: 100%; min-width: 0; padding: 4px 6px; font-size: 13px; }

/* El botón de drop set. Apagado casi transparente, como el de calentamiento, y
   encendido con su color: se marca una serie como drop set aunque todavía no
   se haya apuntado ninguna bajada. */
.set-drop { color: var(--terracotta); opacity: .3; }
.set-drop[aria-pressed="true"] { opacity: 1; background: var(--terracotta-wash); }

/* Las subseries (drop set, rest-pause…) cuelgan de su serie: un bloque tintado metido hacia la
   derecha, con un codo que sale de la serie, para que se lea que dependen de ella. */
.set-bajadas {
  position: relative; margin: 0 10px 8px 30px; padding: 6px 8px 8px;
  background: color-mix(in srgb, var(--terracotta) 7%, var(--marble));
  border: 1px solid color-mix(in srgb, var(--terracotta) 18%, var(--marble));
  border-radius: 10px; display: flex; flex-direction: column; gap: 5px;
}
.set-bajadas:empty { display: none; }
.set-bajadas::before {
  content: ""; position: absolute; left: -14px; top: -8px; width: 12px; height: 22px;
  border-left: 2px solid color-mix(in srgb, var(--terracotta) 35%, var(--marble));
  border-bottom: 2px solid color-mix(in srgb, var(--terracotta) 35%, var(--marble));
  border-bottom-left-radius: 8px;
}
.sub-cab { display: flex; align-items: center; justify-content: space-between; }
.sub-tecnica {
  font-size: 10.5px; font-weight: 800; color: var(--terracotta); text-transform: uppercase;
  letter-spacing: .07em;
}
.sub-mas {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 700; color: var(--terracotta); padding: 2px 4px; border-radius: 6px;
}
.sub-mas:hover { background: color-mix(in srgb, var(--terracotta) 12%, transparent); }
.subserie { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 24px; gap: 6px; align-items: center; }
.subserie .sub-n { font-size: 12px; font-weight: 800; color: var(--terracotta); text-align: center; font-variant-numeric: tabular-nums; }
.subserie input { padding: 4px 8px; font-size: 13px; background: #fff; }
.subserie .icon-btn { width: 24px; height: 24px; font-size: 12px; }

/* Las técnicas del diálogo: una por botón, con lo que significa debajo del nombre. */
.tecnicas { display: flex; flex-direction: column; gap: 8px; }
.tecnica {
  appearance: none; text-align: left; font: inherit; cursor: pointer; color: var(--ink);
  background: var(--marble); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.tecnica span { font-size: 12.5px; color: var(--slate-soft); }
.tecnica:hover, .tecnica.on { background: var(--terracotta-wash); border-color: var(--terracotta); }

/* Serie completada: fondo verde suave y el texto tal cual.
   Antes era `opacity: .5` y `line-through`, y era un desastre: el número que
   acabas de escribir se volvía gris y con una raya encima, que parece un campo
   anulado o tachado por error, cuando lo que significa es justo lo contrario:
   esa serie está hecha. El verde dice "cuenta", y sigue leyéndose. */
.set-row.done {
  background: #d3e6b8;
  box-shadow: inset 3px 0 0 var(--olive);
}
.set-row.done .n { color: var(--olive); }

/* Calentamiento: otro fondo, y a propósito otro color y no un tono del mismo
   verde. El calentamiento cuenta para lo que cuenta la serie de trabajo —está
   en el registro— pero no para el volumen ni la evolución, y si se pintara como
   "hecha" se leería justo al revés de lo que es. */
.set-row.warm {
  background: color-mix(in srgb, var(--gold) 24%, var(--marble));
  box-shadow: inset 3px 0 0 var(--gold);
}
.set-row.warm .n { color: var(--gold); }

/* Un destello corto al rellenar con lo de la vez pasada: sin texto ni número
   que decir "copiado", que es lo que más se echa de menos en un móvil. */
.set-row.recibido { animation: recibido .7s ease; }
@keyframes recibido {
  from { background: #dfe3cf; }
  to { background: var(--olive-wash); }
}

.set-acciones { display: contents; }
.set-acciones .icon-btn { width: 30px; height: 30px; }
.set-row .rir-campo { text-align: center; padding-left: 2px; padding-right: 2px; }
/* C (calentamiento) o E (efectiva): una letra que se lee de un vistazo. */
.set-warm { font-size: 12px; font-weight: 800; color: var(--slate-soft); border: 1px solid var(--line); }
.set-warm[aria-pressed="true"] { color: #fff; background: var(--gold); border-color: var(--gold); }

.set-head {
  display: grid; grid-template-columns: 34px repeat(2, minmax(0, 1fr)) 52px repeat(3, 30px);
  gap: 8px; padding: 7px 15px; background: var(--limestone);
  border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--slate-soft);
}

.set-anadir { padding: 8px 12px 12px; border-top: 1px solid var(--line-soft); }
.set-anadir .btn { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; }

/* ----------loader ---------- */
.skel { background: linear-gradient(90deg, var(--stone) 25%, #eae6dd 50%, var(--stone) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.spin { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--line);
  border-top-color: var(--gold); border-radius: 50%; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

.center-load { padding: 56px; display: grid; place-items: center; gap: 12px; color: var(--slate-soft); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-main, .g-side { grid-template-columns: minmax(0, 1fr); }
  .hoy-rejilla {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "balance" "comidas" "entreno" "lateral";
  }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease-out;
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .rail { transform: none; }
  body.nav-open .scrim { display: block; }
  .scrim { display: none; position: fixed; inset: 0; background: rgba(43, 41, 36, .4); z-index: 55; }
  .nav-toggle { display: grid !important; }
  .view { padding: 20px 16px 40px; }
  .topbar { padding: 0 16px; }
  .g2, .g3, .g4, .g5 { grid-template-columns: minmax(0, 1fr); }
  /* Las cuatro cifras del peso van de dos en dos (peso y media; cambio y registros): una por
     línea eran cuatro tarjetas casi vacías. El resto de rejillas sigue en una columna. */
  .g4.dos-en-movil { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dos-en-movil .metric { padding: 14px; }
  .dos-en-movil .metric .val { font-size: 24px; }
  h1 { font-size: 25px; }
  /* En móvil ocho columnas no caben en 375 px. Los cuatro controles pequeños se
     agrupan en una celda y se quedan con 30 px cada uno: 30 px es lo justo para
     que un dedo los pulse sin fallar, que es lo que pasa con 28. */
  .set-row, .set-head { grid-template-columns: 24px repeat(2, minmax(0, 1fr)) 46px 72px; gap: 4px; padding: 6px 8px; }
  .set-head > :nth-child(n+6) { display: none; }
  .set-acciones { display: flex; gap: 0; justify-content: flex-end; }
  .set-acciones .icon-btn { width: 24px; height: 24px; font-size: 12px; }
  .set-row input[type=checkbox] { width: 14px; height: 14px; }
  .card-head { flex-wrap: wrap; row-gap: 10px; }
  .card-head > .row { flex-wrap: wrap; min-width: 0; }
  .set-row input, .set-row select { padding: 6px 4px; font-size: 13px; }
  dialog .dlg-body { padding: 18px; }
}
@media (min-width: 901px) { .nav-toggle { display: none !important; } }

/* --- curación del catálogo -------------------------------------------------
   Los filtros por categoría son botones con un número, no enlaces: el número es
   lo que dice si hay algo que mirar o si el filtro está vacío, y un enlace sin
   contador obliga a pulsarlo para averiguarlo. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--marble);
  color: var(--slate); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--gold); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--marble); }
.chip-n {
  min-width: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--stone); color: var(--slate);
  font-size: 11px; font-weight: 700; text-align: center;
}
.chip.on .chip-n { background: rgba(255, 255, 255, .22); color: var(--marble); }

/* Cada ejercicio es una fila con el texto a la izquierda y las acciones a la
   derecha. El motivo va debajo del nombre, y no dentro de una etiqueta, porque
   es una frase y en una etiqueta no cabe. */
.curacion-fila {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 14px 16px;
}
.curacion-main { min-width: 0; flex: 1; }
.curacion-main .dim { margin-top: 2px; }
.curacion-acc { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 720px) {
  .curacion-fila { flex-direction: column; }
  .curacion-acc { width: 100%; }
  .curacion-acc .btn { flex: 1; }
}

/* ---------- imprimir la dieta de la semana ----------
   Se imprime en apaisado y sale solo la hoja: el menú, los botones y las
   cabeceras alrededor en un folio no caben, y la tabla se queda en una esquina
   con medio folio de tinta para nada. El `@page` va en el `<style>` que crea el
   diálogo al imprimir, porque el tamaño de página solo se puede cambiar desde
   ahí y no desde el CSS de la aplicación.

   `#hoja-imprimir` es un contenedor del body, oculto en pantalla con
   `display: none` y visible solo al imprimir (ver el `@media print` de más
   abajo). Vive en el body y no dentro de un diálogo a propósito. */
#hoja-imprimir { display: none; }

/* La hoja que sale en el folio: la tabla semanal del "Dieta de modelo", con la
   forma de la tabla de referencia —cabecera oscura, filas alternas en verde muy
   claro, el nombre del plato arriba y debajo la lista con su cantidad—. */
.hoja-imprimir { color: #2b2924; }
.imp-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--olive, #b5e56e);
}
.hoja-imprimir h1 { font-size: 24px; margin: 0; }
.imp-sub { text-align: right; font-size: 12.5px; line-height: 1.4; }
.hoja-imprimir .dim { font-size: 11.5px; color: #6b7a70; }

.tabla-imprimir { width: 100%; border-collapse: collapse; margin-top: 14px; }
.tabla-imprimir th, .tabla-imprimir td {
  border: 1px solid #cfd8cb; padding: 8px 9px; vertical-align: top;
  font-size: 11px; text-align: left; line-height: 1.4;
}
/* La cabecera va oscura, como en la referencia: es lo que separa "qué día" de
   "qué me como", y con fondo gris claro no se distinguía de las filas. */
.tabla-imprimir thead th {
  background: #2b2924; color: #f4f7f1; font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; padding: 9px;
  /* La cabecera de la aplicación es `sticky` para que al scrolls se vea siempre
     el nombre de las columnas. En el folio no hay scroll y una cabecera
     pegajosa deja la fila saltando según el motor lo resuelva: aquí quieta. */
  position: static;
}
.tabla-imprimir tbody th {
  background: #f1f7ec; width: 96px; font-size: 11.5px; font-weight: 600;
  vertical-align: middle;
}
/* Filas alternas: sin ellas, una celda con cinco ingredientes y otra con uno
   dejan de leerse como la misma comida. */
.tabla-imprimir tbody tr:nth-child(odd) td { background: #f6f9f3; }
.tabla-imprimir tbody tr:nth-child(even) td { background: #fff; }

/* El nombre del plato, arriba de su lista: en negrita y en el verde de marca
   para que se vea de un vistazo qué se cocina ese día. */
.imp-receta {
  font-weight: 600; color: #5c7a44; margin-bottom: 5px;
  padding-bottom: 4px; border-bottom: 1px dotted #c4d2be;
}
.imp-alimento {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
/* La cantidad a la derecha de su línea, como en la referencia. Con la coma en
   `tabular-nums` los gramos quedan en columna y la lista se lee de un vistazo. */
.imp-cantidad {
  color: #5c7a44; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.imp-alimento-nombre { min-width: 0; }

/* El guion de una comida vacía, en bloque y con la altura de la celda, para que
   una fila con un solo alimento y otra con dos no se impriman desalineadas. */
.tabla-imprimir .celda-vacia { min-height: 17px; }

/* La fila de macros del día, la que se mira para ajustar la semana: las
   calorías en grande y las tres macros debajo. Se separa del resto con un
   borde arriba, porque si no se lee como una comida más.
   Los selectores llevan `tbody` porque las filas alternas de arriba son más
   específicos y, sin esto, esta fila salía con el verde de las alternas. */
.tabla-imprimir tbody tr.imp-macros th,
.tabla-imprimir tbody tr.imp-macros td {
  background: #eef6e7; border-top: 2px solid #b5cfa8; vertical-align: middle;
}
.tabla-imprimir tbody tr.imp-macros th { color: #4a6340; }
.imp-kcal {
  font-size: 14px; font-weight: 600; color: #2b2924;
  font-variant-numeric: tabular-nums;
}
.imp-pcg {
  font-size: 10.5px; color: #6b7a70; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

@media print {
  /* La hoja de impresión va en un contenedor propio, `#hoja-imprimir`, que está
     en el body pero oculto en pantalla. No se reutiliza el <dialog> del
     diálogo: un <dialog> abierto con showModal() vive en el "top layer" del
     navegador, por encima de todo lo demás, y al imprimir se comporta de forma
     impredecible. Además el diálogo trae cabecera y botones que en un folio solo
     estorban. Con un contenedor aparte, lo que se ve en pantalla y lo que sale
     impreso son dos cosas distintas y controlables.

     Este selector ocultaba antes `body > *:not(.dlg)`, esperando una clase `.dlg`
     que ningún elemento tiene: los diálogos se crean como `<dialog>` sin ella,
     así que el propio diálogo acababa escondido y el folio salía en blanco. */
  body > *:not(#hoja-imprimir) { display: none !important; }
  #hoja-imprimir { display: block !important; }

  /* La hoja ocupa todo el ancho y fuerza los colores de fondo: muchos
     navegadores no imprimen fondos si el usuario los tiene desactivados, y las
     bandas de color se convertían en huecos. */
  #hoja-imprimir, #hoja-imprimir * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* El editor de "una serie, un número": una fila por serie, y vacías de verdad
   para que se entienda que vacío es "el del ejercicio". */
.series-editor { margin-top: 6px; }
.serie-ed {
  display: grid; grid-template-columns: 34px 1fr 1fr 1.4fr 34px; gap: 8px;
  align-items: end; padding: 4px 0;
}
.serie-ed .n {
  font-size: 11.5px; font-weight: 700; color: var(--slate-soft);
  text-align: center; padding-bottom: 9px;
}
.serie-ed .field { margin: 0; }
@media (max-width: 700px) {
  .serie-ed { grid-template-columns: 30px 1fr 1fr 34px; }
  .serie-ed .field:nth-of-type(3) { grid-column: 2 / 4; }
}

/* ---------- histórico: calendario y detalle del día ---------- */
.cal-head,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-head {
  margin-bottom: 8px;
}
.cal-head span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--slate-soft);
  font-weight: 700;
  text-align: center;
}
.cal-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 58px;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.cal-day:hover { border-color: var(--line); box-shadow: var(--shadow-sm); }
.cal-day.on {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
  background: var(--gold-wash);
}
/* Los días del mes vecino no son un error de la persona que está mirando: el
   calendario es una rejilla de semanas, y una semana cae entera en el mes
   anterior. Se atenúan en vez de desaparecer, porque si no el día 1 sale
   desplazado respecto a su columna y parece que el mes va torcido. */
.cal-day.out { opacity: .38; cursor: default; }
.cal-day.void { background: transparent; }
.cal-n {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
}
.cal-day.out .cal-n { color: var(--slate-soft); }
.cal-fig {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--slate);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.hist-sum { font-size: 13px; color: var(--slate); }
.in-target { color: var(--olive); font-weight: 700; margin-left: 4px; }
.hist-ej { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.hist-ej:first-child { border-top: 0; padding-top: 2px; }
.hist-ej-name { font-size: 14px; margin-bottom: 4px; }
.hist-sets { display: flex; flex-direction: column; gap: 3px; }
.hist-set {
  font-size: 13px;
  color: var(--slate);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
}
.hist-set-n { color: var(--slate-soft); min-width: 20px; }
.hist-set .drops { color: var(--terracotta); font-weight: 600; }
@media (max-width: 700px) {
  .cal-grid, .cal-head { gap: 3px; }
  .cal-day { min-height: 46px; padding: 5px 4px; }
  .cal-fig { font-size: 9px; }
}

/* Una fila de ingrediente lleva el nombre, el campo de gramos, lo que aporta y
   tres botones. En una pantalla estrecha, todo en una línea le deja al nombre
   unos 35 px y "Yogur natural, sin azúcar" sale cortado a media palabra, que es
   justo el dato que hace falta leer para decidir. En móvil el nombre se va a su
   propia línea y los controles se quedan debajo. */
@media (max-width: 560px) {
  .ing-fila { flex-wrap: wrap; row-gap: 6px; }
  .ing-fila > .grow { flex: 1 0 100%; }
}

/* Cabecera de una sección que se pliega: es un botón, pero tiene que verse como
   el resto de cabeceras de tarjeta. */
.seccion-toggle {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit; display: flex; align-items: center; gap: 10px;
}
.seccion-toggle h2 { flex: 1; }
.seccion-flecha { width: 14px; color: var(--slate-soft); }

/* Título a la izquierda y la acción principal a la derecha, en la misma fila. En
   pantalla estrecha el botón sigue a la derecha del título y no baja debajo. */
.page-head-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-head-fila h1 { margin: 0; }
.page-head-fila .btn { flex-shrink: 0; }


/* --- Marca Olympus: laurel, nombre y lema --- */
.brand-olimpo {
  flex-direction: column; justify-content: center; text-align: center;
  gap: 4px; padding: 28px 22px 18px;
}
.brand-olimpo .laurel { color: #b9a98e; line-height: 0; margin-bottom: 4px; }
.brand-olimpo b {
  font-family: var(--serif); font-weight: 400; font-size: 24px;
  letter-spacing: .32em; padding-left: .32em; color: #6f6451;
}
.brand-olimpo span {
  font-size: 10.5px; letter-spacing: .24em; padding-left: .24em;
  text-transform: uppercase; color: var(--slate-soft);
}
.nav-item .ico { display: grid; place-items: center; width: 22px; opacity: 1; }
.nav-item { text-decoration: none; }


/* --- Cabecera de Hoy con la estatua --- */
.hero { position: relative; min-height: 190px; margin-bottom: 10px; overflow: hidden; }
.hero-texto { position: relative; z-index: 2; margin-bottom: 0; min-height: 150px; display: flex; align-items: center; }
/* La frase se queda en la mitad izquierda: la estatua ocupa la derecha. */
.frase-dia { font: italic 400 22px/1.35 var(--serif); color: var(--ink); max-width: 52%; margin: 0; }
/* La foto trae su propio fondo casi blanco, aclarado a blanco puro: `multiply` lo
   deja exactamente del color de la página y solo se ve la piedra. El degradado la
   funde por la izquierda y por abajo, para que no se note el recorte. */
.hero-estatua {
  position: absolute; z-index: 1; right: 20px; top: -22px; height: 270px; width: auto;
  mix-blend-mode: multiply; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 55%, transparent 98%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 55%, transparent 98%);
}
@media (max-width: 900px) {
  .hero { min-height: 150px; }
  .frase-dia { font-size: 17px; max-width: 46%; }
  .hero-estatua { right: -10px; top: -8px; height: 170px; opacity: .6; }
}

/* --- Nota de un ejercicio en la sesión --- */
.btn-nota svg { vertical-align: -3px; margin-right: 5px; }
.btn-nota.con-nota::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px;
  border-radius: 50%; background: var(--gold); vertical-align: 1px;
}
.nota-ejercicio { padding: 0 14px 12px; display: grid; gap: 4px; }
.nota-ejercicio[hidden] { display: none; }
.nota-ejercicio textarea { width: 100%; resize: vertical; }

/* --- Indicaciones de un ejercicio (ficha y sesión) --- */
.indicaciones p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.5; color: var(--slate); }
.indicaciones p b { color: var(--ink); font-weight: 600; }
.como-ejercicio { padding: 4px 16px 12px; }
/* Dos fotos del movimiento (inicio y final) lado a lado; si no caben, una debajo de otra. */
.galeria { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.galeria img { flex: 1 1 150px; min-width: 0; max-width: 280px; border-radius: 10px; background: #fff; }
.como-ejercicio[hidden] { display: none; }

/* Ejercicios: cuadrados por grupo muscular. */
.grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.grupo-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  min-height: 104px; padding: 16px; text-align: left; cursor: pointer;
  background: var(--marble); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm); font: inherit; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.grupo-card:hover { border-color: var(--gold); background: var(--gold-wash); }
.grupo-nombre { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.grupo-cuenta { font-size: 12.5px; color: var(--slate); }
.grupo-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.grupo-cab h2 { margin: 0; }

/* Ejercicios: buscador con botón «Filtros» y el resto plegado. */
.barra-busqueda { margin-bottom: 16px; }
.barra-busqueda-fila { display: flex; gap: 10px; }
.barra-busqueda-fila input { flex: 1 1 auto; min-width: 0; }
.barra-busqueda-fila .btn { flex-shrink: 0; }
.barra-busqueda-fila .btn:disabled { opacity: .45; cursor: default; }
.btn.activo { background: var(--gold-wash); color: var(--ink); }
.filtros-panel { margin-top: 10px; padding: 14px; background: var(--marble); border: 1px solid var(--line); border-radius: var(--r); }
.filtros-panel[hidden] { display: none; }

/* El mismo selector por grupos, dentro del diálogo de añadir ejercicio a una sesión. */
.grupos.compactos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grupos.compactos .grupo-card { min-height: 66px; padding: 10px 12px; gap: 8px; }
.grupos.compactos .grupo-nombre { font-size: 14px; }
@media (max-width: 420px) { .grupos.compactos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Avisos plegables (el «?» de Comidas en Hoy): el atributo hidden tiene que ganar a display:flex. */
.note[hidden] { display: none; }

/* Ejercicios del plan ordenables arrastrando el asa «⠿». El asa es lo único que no desplaza la
   página al tocarlo (touch-action: none); el resto de la fila se desplaza con normalidad. */
.fila-ordenable { position: relative; background: var(--paper, #fff); }
.fila-ordenable .asa {
  appearance: none; border: 0; background: transparent; color: var(--slate-soft);
  font-size: 18px; line-height: 1; padding: 6px 2px; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; border-radius: 6px;
}
.fila-ordenable .asa:hover, .fila-ordenable .asa:focus-visible { color: var(--ink); background: var(--stone); }
.fila-ordenable.arrastrando {
  z-index: 5; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); border-radius: 8px; cursor: grabbing;
  opacity: .96;
}
.fila-ordenable.arrastrando .asa { cursor: grabbing; }

/* Fila de un ejercicio del plan: asa, nº, nombre, series×reps, RIR, editar, quitar. En el móvil
   no cabe todo: el RIR se oculta (cada serie ya se ve debajo) y el nombre puede ocupar dos líneas
   en vez de quedarse en una letra. */
.set-row.fila-plan { grid-template-columns: 26px 24px minmax(0, 1fr) auto auto; }
@media (max-width: 600px) {
  .set-row.fila-plan { grid-template-columns: 26px 22px minmax(0, 1fr) auto auto; gap: 4px; }
  .set-row.fila-plan .truncate { white-space: normal; overflow: visible; text-overflow: clip; }
  .fila-ordenable > .dim { padding-left: 74px !important; }
}

/* Clic en un ejercicio del plan: sus series y detalles se abren debajo, sin ventana aparte. */
.set-row.fila-plan { cursor: pointer; }
.set-row.fila-plan:hover { background: var(--limestone); }
.panel-ejercicio {
  margin: 2px 12px 12px; padding: 14px; background: var(--limestone);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); cursor: default;
}
.panel-ejercicio > .grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; }
.panel-ejercicio > .grid > [style*="grid-column"] { grid-column: 1 / -1; }

/* Marca de ejercicio unilateral: pastilla azul junto al nombre, en todas las listas. */
.marca-uni { margin-left: 8px; font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }

/* Estrella de favorito (ejercicios y alimentos): vacía = ☆, marcada = ★ en dorado. */
.estrella {
  appearance: none; border: 0; background: transparent; cursor: pointer; line-height: 1;
  font-size: 17px; padding: 4px 6px; border-radius: 6px; color: var(--slate-soft);
}
.estrella:hover { background: var(--stone); color: var(--gold); }
.estrella.on { color: var(--gold-bright); }
/* La fila de un resultado con su estrella a la derecha. */
.fila-fav { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.fila-fav > .btn { flex: 1; min-width: 0; margin-bottom: 0; }
.grupo-card.favoritos .grupo-nombre { color: var(--gold); }

/* Las medidas (unidad, ml) del alimento elegido en el buscador: plegadas hasta que hacen falta. */
.medidas-alimento { border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 8px 12px; }
.medidas-alimento > summary { cursor: pointer; font-size: 13px; color: var(--slate); }
.medidas-alimento[open] > summary { margin-bottom: 10px; }

/* El desplegable kg/lb en la cabecera de la columna de peso de cada ejercicio del entreno. */
.set-head .unidad-sel {
  padding: 1px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--slate); justify-self: start; width: auto; max-width: 100%; cursor: pointer;
}

/* Las dietas modelo como rectángulos: nombre, fecha de creación y calorías y macros medios. */
.dietas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dieta-card {
  appearance: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--marble); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm); padding: 14px 16px; display: block; min-width: 0;
}
.dieta-card:hover { border-color: var(--gold); }
.dieta-card.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-wash), var(--shadow-sm); }
.dieta-card-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.dieta-nombre { font-size: 15px; overflow-wrap: anywhere; }
.dieta-kcal { font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.dieta-nueva {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-style: dashed; color: var(--slate); background: transparent; min-height: 110px; text-align: center;
}

/* Reordenar series arrastrando (en el plan y en el entreno): el asa y la fila que se arrastra. */
.serie-ed { grid-template-columns: 22px 34px 1fr 1fr 56px 1.4fr 34px; }
.serie-ed .asa {
  appearance: none; border: 0; background: transparent; color: var(--slate-soft); font-size: 17px;
  line-height: 1; padding: 6px 0; cursor: grab; touch-action: none; user-select: none;
  -webkit-user-select: none; border-radius: 6px; align-self: end; margin-bottom: 3px;
}
.serie-ed .asa:hover, .serie-ed .asa:focus-visible { color: var(--ink); background: var(--stone); }
@media (max-width: 700px) {
  .serie-ed { grid-template-columns: 22px 30px 1fr 1fr 34px; }
  .serie-ed .field:nth-of-type(3) { grid-column: 3 / 4; }
  .serie-ed .field:nth-of-type(4) { grid-column: 4 / 6; }
  .serie-ed > .icon-btn { grid-column: 5; grid-row: 1; align-self: end; }
  .serie-ed { row-gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
}
.asa-serie {
  appearance: none; border: 0; background: transparent; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; display: flex; flex-direction: column;
  align-items: center; gap: 1px; line-height: 1; padding: 2px 0; border-radius: 6px; font: inherit;
}
.asa-serie .asa-glifo { font-size: 11px; opacity: .55; }
.asa-serie .num-serie { font-size: 12px; font-weight: 700; }
.asa-serie:hover, .asa-serie:focus-visible { background: var(--stone); }
.serie-ed.arrastrando, .set-fila.arrastrando {
  position: relative; z-index: 5; background: var(--marble); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); cursor: grabbing; opacity: .97;
}

/* «Cómo se hace» y «Nota»: botones pequeños, solo con el icono, en la fila del nombre del ejercicio. */
.mini-btn { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; border-radius: 8px; }
.card > .card-head.ex-cab { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; flex-wrap: nowrap; gap: 8px; }
.ex-fila1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ex-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--stone); color: var(--slate); font-size: 11.5px; font-weight: 600;
}
.card > .card-head .ex-nombre { flex: 1; min-width: 0; font-size: 16.5px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.ex-botones { flex: none; display: flex; gap: 6px; align-items: center; }
.ex-fila3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ex-etiquetas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ex-progreso-txt { font-size: 12px; font-weight: 600; color: var(--slate-soft); font-variant-numeric: tabular-nums; }
.ex-progreso { display: flex; align-items: center; gap: 10px; }
.ex-progreso-pista { flex: 1; height: 4px; border-radius: 2px; background: var(--stone); overflow: hidden; }
.ex-progreso-relleno { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s ease; }
.ex-progreso.completo .ex-progreso-relleno { background: var(--olive); }
@media (max-width: 700px) { .card-head.ex-cab { flex-wrap: nowrap; } }

/* La cuenta atrás del descanso: barra pegada abajo, sin tapar las series. */
.descanso {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60; width: min(calc(100% - 24px), 420px); box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px;
  background: var(--ink); color: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.descanso-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.descanso-etq { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.descanso-tit { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.descanso-num { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.descanso-btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,.14); border-radius: 8px; min-width: 34px; height: 30px; padding: 0 6px;
}
.descanso.lista { background: var(--olive); }

/* El RIR se elige, no se teclea: un botón con el valor y un cuadro con los más usados. */
.rir-campo {
  appearance: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 0; text-align: center;
  min-width: 0; width: 100%;
}
.rir-menu {
  position: fixed; z-index: 70; display: flex; gap: 4px; padding: 5px;
  background: var(--marble, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.rir-op {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--stone); border-radius: 8px; min-width: 38px; height: 36px;
}
.rir-op.on { background: var(--gold); color: #fff; }
.rir-op.mas { color: var(--slate-soft); }

/* El RIR vacío de una serie del plan se ve en gris: es «el del ejercicio». */
.rir-campo.vacio { color: var(--slate-soft); font-weight: 500; }
.serie-ed .rir-campo { min-width: 44px; }

/* La marca de «Unilateral» en la cabecera del ejercicio. */
.ex-etiquetas .marca-uni {
  display: inline-flex; align-items: center; margin: 0; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; border: 1px solid #c3d6df;
}
.ex-etiquetas .marca-uni.tag-gold { border-color: #e8dcb4; }

/* ---------- ajustes: botón de gestionar planes ---------- */
.plan-gestion { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 16px; border-top: 1px solid var(--line-soft); }
.ajustes-tabs { scrollbar-width: none; }
.ajustes-tabs::-webkit-scrollbar { display: none; }
.ajustes-tabs button { padding: 10px 12px; }
.plan-gestion .btn-block { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 16px; font-size: 15px; }
.plan-gestion p { margin: 0; font-size: 12.5px; }

/* ---------- resumen semanal (documento) ---------- */
.resumen-doc { background: #fff; color: #2b2924; border: 1px solid var(--line); border-radius: 14px; padding: 24px; max-width: 880px; }
.resumen-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--gold, #b8975a); margin-bottom: 8px; }
.resumen-cab h1 { margin: 0; font-size: 26px; }
.resumen-cab p { margin: 4px 0 0; color: #6b6558; font-size: 13.5px; }
.resumen-cab > span { font-size: 11px; letter-spacing: .18em; font-weight: 700; color: #8a7a55; }
.resumen-seccion { margin-top: 22px; break-inside: avoid-page; }
.resumen-seccion h2 { margin: 0 0 10px; font-size: 17px; border-bottom: 1px solid #e5e1d8; padding-bottom: 6px; }
.resumen-seccion h3 { margin: 14px 0 6px; font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.resumen-seccion h3 small { font-weight: 500; color: #6b6558; font-size: 12.5px; }
.resumen-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.resumen-cifra { background: #f6f3ec; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.resumen-cifra b { font-size: 19px; }
.resumen-cifra span { font-size: 11.5px; color: #6b6558; }
.resumen-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.resumen-tabla th, .resumen-tabla td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #ece8de; vertical-align: top; }
.resumen-tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6b6558; }
.resumen-ejercicios td:first-child { width: 34%; font-weight: 600; }
.resumen-ejercicios em { font-weight: 500; font-style: normal; color: #3d6a8a; font-size: 11.5px; }
.resumen-lista ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.resumen-vacio { color: #8a8576; font-size: 13px; margin: 4px 0; }
.resumen-pie { margin-top: 24px; font-size: 11.5px; color: #8a8576; text-align: right; }
@media (max-width: 700px) {
  .resumen-doc { padding: 16px 14px; border-radius: 12px; }
  .resumen-ejercicios td:first-child { width: auto; }
  .resumen-ejercicios, .resumen-ejercicios tbody, .resumen-ejercicios tr, .resumen-ejercicios td { display: block; width: 100%; }
  .resumen-ejercicios thead { display: none; }
  .resumen-ejercicios td { border: 0; padding: 2px 0; }
  .resumen-ejercicios tr { border-bottom: 1px solid #ece8de; padding: 6px 0; }
}
@media print {
  .resumen-doc { border: 0; padding: 0; max-width: none; }
  .resumen-sesion { break-inside: avoid; }
}