/* ═══════════════════════════════════════════════════════════
   views/nutricion.css — Mi plan alimentario (v9).
   Solo tokens de css/base.css (el encabezado .tp-head y las tarjetas
   .tp-plan-card también vienen de ahí). Los estados de la barra contra el
   objetivo usan la marca (en rango), el texto suave (abajo) y el rojo de
   error (pasado).
   ═══════════════════════════════════════════════════════════ */
.nutri-area{max-width:980px}
.nu-back{display:inline-block;margin-bottom:6px;text-decoration:none;color:var(--muted)}
.nu-intro{color:var(--muted);margin:-8px 0 20px}
.nu-empty-icon{font-size:2.5rem;margin:0 0 .5rem}

.nu-notes{padding:16px 18px;border-left:3px solid var(--brand);background:var(--brand-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.nu-notes b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.nu-notes p{margin:6px 0 0;color:var(--text-soft);font-size:13px;line-height:1.6;white-space:pre-line}

/* Grilla de nutrientes */
.nu-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.nu-tile{padding:14px 12px;border-radius:var(--radius-sm);background:var(--brand-soft);border:1px solid var(--brand-line);min-width:0}
.nu-tile small{display:block;min-height:26px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.06em;line-height:1.3;text-transform:uppercase}
.nu-tile b{display:block;margin-top:6px;font:800 28px/1 var(--heading);color:var(--brand)}
.nu-tile b span{font-size:13px}
.nu-target{display:block;margin-top:5px;color:var(--muted);font-size:11px}
.nu-bar{display:block;height:4px;margin-top:8px;border-radius:2px;background:var(--line);overflow:hidden}
.nu-bar-fill{display:block;height:100%;width:0;background:var(--text-soft);transition:width .4s}
.nu-bar-fill.is-ok{background:var(--brand)}
.nu-bar-fill.is-over{background:var(--danger)}
.nu-nodata{margin:10px 0 0;color:var(--muted);font-size:12px}

/* Comidas */
.nu-meal{margin:0 0 14px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.nu-meal-head{display:flex;align-items:center;gap:14px}
.nu-meal-emoji{flex:none;font-size:26px;line-height:1}
.nu-meal-name{margin:0;font:800 26px/1 var(--heading);text-transform:uppercase}
.nu-meal-time{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.nu-meal-kcal{margin-left:auto;font:800 24px/1 var(--heading);color:var(--brand);white-space:nowrap}
.nu-meal-kcal small{font-size:12px}
.nu-meal-note{margin:12px 0 0;color:var(--text-soft);font-size:13px;line-height:1.6;white-space:pre-line}
.nu-food{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.nu-meal-head+.nu-food,.nu-meal-note+.nu-food{margin-top:8px}
.nu-food-main{flex:1;min-width:0}
.nu-food-name{font-size:14px}
.nu-food-note{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.nu-food-qty{font-size:13px;white-space:nowrap}
.nu-food-kcal{width:76px;text-align:right;color:var(--muted);font-size:12px;white-space:nowrap}
.nu-meal-macros{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;color:var(--muted);font-size:12px}
.nu-meal-macros b{color:var(--text);font-weight:700}
.nu-disclaimer{margin:22px 0 0;color:var(--muted);font-size:12px;line-height:1.6}

@media(max-width:650px){
  .nu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .nu-tile{padding:12px 9px}
  .nu-tile b{font-size:23px}
  .nu-meal{padding:16px 14px}
  .nu-meal-name{font-size:23px}
  .nu-food{flex-wrap:wrap;gap:4px 12px}
  .nu-food-main{flex-basis:100%}
  .nu-food-kcal{width:auto;margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.nu-bar-fill{transition:none}}