/* Coach Peso — diseño arcilla moderno (lenguaje visual tipo Lucas v23)
   Fondo crema verdoso, tarjetas blancas gorditas con relieve (luz arriba,
   sombra suave abajo), titulares y números en "Baloo 2", cuerpo en Nunito,
   botones inflados que se hunden al tocar, inputs tipo cuenco, losetas
   squircle pastel por sección y barra inferior con pastilla activa.
   Identidad propia: degradado esmeralda → verde azulado. */
:root{
  --brand:#0b7a55; --brand2:#0e7490; --brand-dark:#075e42;
  --grad:linear-gradient(135deg,#0b7a55 0%,#0e7490 100%);
  --ink:#17352a; --muted:#6e8577; --line:#dcead9;
  --card:#fffef9; --bg1:#f4f8ef; --bg2:#e7f2e4;
  --cuenco:#f1f7ec;
  --ok:#1f9d66; --ok-bg:#dff2e4;
  --warn:#b97a1e; --warn-bg:#fbeed3;
  --bad:#d95353; --bad-bg:#fbe3dc;
  --radio:24px;
  --sombra:0 12px 24px rgba(23,84,60,.13), inset 0 2px 3px rgba(255,255,255,.9), inset 0 -5px 9px rgba(23,84,60,.07);
  --sombra-sm:0 6px 14px rgba(23,84,60,.11), inset 0 1px 2px rgba(255,255,255,.9), inset 0 -3px 6px rgba(23,84,60,.06);
  --t-mint:#8fd3b2; --t-dur:#f9b384; --t-ama:#f5cf6b; --t-cel:#93c5e8;
  --t-lav:#b7a6f5; --t-cor:#f59e8a; --t-teal:#7fc8bc; --t-rosa:#f2a7c3;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-size:15px; line-height:1.45;
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);
  background-attachment:fixed;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
h1,h2,.big,.hdr-kcal,.anillo .txt b,.chip,#menu-total{
  font-family:"Baloo 2","Nunito",-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ---------- hero / cabecera ---------- */
header{
  position:sticky; top:0; z-index:20; color:#fff;
  background:var(--grad);
  padding:calc(14px + env(safe-area-inset-top)) 18px 18px;
  border-radius:0 0 22px 22px;
  box-shadow:0 10px 26px rgba(7,94,66,.35), inset 0 -6px 12px rgba(0,0,0,.08);
  display:flex; align-items:center; gap:12px;
}
header .logo{
  width:48px; height:48px; border-radius:16px; background:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  box-shadow:0 6px 14px rgba(0,0,0,.18), inset 0 -3px 5px rgba(23,84,60,.12);
}
header h1{font-size:22px; margin:0; letter-spacing:.2px; line-height:1.1}
header .sub{margin:3px 0 0; font-size:12px; opacity:.88; font-weight:600}
header .crece{flex:1; min-width:0}
.hdr-kcal{
  text-align:center; font-size:21px; font-weight:800; line-height:1;
  background:rgba(255,255,255,.20); border-radius:16px; padding:9px 12px;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.10);
}
.hdr-kcal small{display:block; font-size:10px; font-weight:700; opacity:.85; margin-top:3px; letter-spacing:.3px}

/* ---------- contenido y tarjetas ---------- */
main{max-width:640px; margin:0 auto; padding:16px 14px 8px}
.tab{display:none}
.tab.active{display:block; animation:aparece .22s ease}
@keyframes aparece{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.card{
  background:var(--card); border-radius:var(--radio); box-shadow:var(--sombra);
  border:1px solid rgba(220,234,217,.85);
  padding:18px; margin-bottom:14px;
}
.card h2{font-size:18.5px; margin:0 0 10px; color:var(--ink); display:flex; align-items:center; gap:10px}
.card h3{font-size:15px; margin:14px 0 8px; color:var(--brand-dark); font-family:"Baloo 2","Nunito",sans-serif}
.card h2:first-child,.card h3:first-child{margin-top:0}
.tile{
  width:38px; height:38px; border-radius:13px; flex:none; font-size:20px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.8), inset 0 -3px 5px rgba(23,84,60,.10);
}
.t-mint{background:var(--t-mint)} .t-dur{background:var(--t-dur)} .t-ama{background:var(--t-ama)}
.t-cel{background:var(--t-cel)} .t-lav{background:var(--t-lav)} .t-cor{background:var(--t-cor)}
.t-teal{background:var(--t-teal)} .t-rosa{background:var(--t-rosa)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid2>*{min-width:0}
@media(max-width:560px){.grid2{grid-template-columns:1fr 1fr; gap:10px}}
.big{font-size:27px; font-weight:800; margin:4px 0; color:var(--ink)}
.big small{font-size:14px; color:var(--muted); font-weight:700}
.muted{color:var(--muted); font-size:13.5px}
.tiny{color:var(--muted); font-size:12px; line-height:1.5}
.err{color:var(--bad); font-size:13.5px; font-weight:700; min-height:18px}

/* ---------- barras y anillo ---------- */
.progress{height:12px; background:#e9efe0; border-radius:99px; overflow:hidden; margin-top:8px;
  box-shadow:inset 0 2px 4px rgba(23,84,60,.12)}
.bar{height:100%; background:linear-gradient(90deg,#0b7a55,#19a974); border-radius:99px;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.12), inset 0 1px 1px rgba(255,255,255,.45); transition:width .4s ease}
.anillo{position:relative; width:132px; height:132px; margin:4px auto}
.anillo svg{transform:rotate(-90deg)}
.anillo .txt{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.anillo .txt b{font-size:24px; color:var(--ink); font-weight:800; line-height:1}
.anillo .txt span{font-size:11px; color:var(--muted); font-weight:700; margin-top:3px}

/* ---------- botones inflados ---------- */
button{
  font-family:inherit; font-size:14.5px; font-weight:800; cursor:pointer; color:var(--brand-dark);
  background:#eef6ea; border:0; border-radius:16px; padding:12px 14px;
  box-shadow:var(--sombra-sm);
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
}
button:active{transform:translateY(2px); box-shadow:0 2px 6px rgba(23,84,60,.15), inset 0 2px 3px rgba(23,84,60,.12)}
button.primary{
  background:var(--grad); color:#fff;
  box-shadow:0 10px 20px rgba(11,122,85,.30), inset 0 -4px 0 rgba(0,0,0,.10), inset 0 2px 2px rgba(255,255,255,.35);
}
button.primary:active{transform:translateY(2px); box-shadow:0 4px 10px rgba(11,122,85,.25), inset 0 -2px 0 rgba(0,0,0,.10)}

/* ---------- formularios: cuencos ---------- */
input,select,textarea{
  width:100%; padding:12px 14px; font-size:15px; font-family:inherit; color:var(--ink);
  background:var(--cuenco); border:1.5px solid var(--line); border-radius:20px; margin:4px 0;
  box-shadow:inset 0 3px 6px rgba(23,84,60,.10);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand);
  box-shadow:inset 0 3px 6px rgba(23,84,60,.08), 0 0 0 3px rgba(11,122,85,.15)}
input[type="checkbox"]{width:23px; height:23px; margin:0; flex:none; accent-color:var(--brand); box-shadow:none; border-radius:8px}
.row{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.row>*{flex:1; min-width:0}
.chip{background:var(--cuenco); border-radius:999px; padding:9px 14px; font-weight:800; text-align:center;
  box-shadow:inset 0 2px 4px rgba(23,84,60,.10); font-size:15px}
.check{display:flex; gap:10px; align-items:center; margin:11px 0; font-size:14.5px; font-weight:700; cursor:pointer}
label{font-size:13.5px; font-weight:700; color:var(--ink)}

/* ---------- agua: anclas squircle ---------- */
.anchors{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.anchor{
  border-radius:18px; padding:11px 5px 9px; text-align:center; font-size:12.5px; font-weight:800;
  background:#eaf4fb; color:#1f4e79; cursor:pointer;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.85), inset 0 -3px 5px rgba(31,78,121,.10);
  transition:transform .12s ease, box-shadow .15s ease;
}
.anchor small{display:block; font-size:10.5px; font-weight:700; opacity:.75; margin-top:2px}
.anchor:active{transform:scale(.95)}
.anchor.on{background:var(--grad); color:#fff; box-shadow:0 8px 16px rgba(11,122,85,.30), inset 0 2px 2px rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.12)}
.anchor.on small{opacity:.9}

/* ---------- avisos ---------- */
.excess{
  max-width:640px; margin:12px auto 0; padding:14px 18px; border-radius:18px; color:#fff; font-weight:700; font-size:14.5px;
  background:linear-gradient(135deg,#d95353,#e07b39);
  box-shadow:0 10px 22px rgba(217,83,83,.35), inset 0 2px 2px rgba(255,255,255,.3);
}
main .excess{margin:0 0 14px}
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(104px + env(safe-area-inset-bottom)); z-index:60;
  background:#17352a; color:#fff; padding:12px 20px; border-radius:999px; font-size:14px; font-weight:700;
  box-shadow:0 10px 22px rgba(23,53,42,.35); max-width:92vw; text-align:center;
}
.coach-card{background:linear-gradient(160deg,#ffffff 0%,#f2f9ec 100%)}
.coach-msg{font-size:15.5px; line-height:1.55; font-weight:600; margin:2px 0 4px}

/* ---------- menú y comidas ---------- */
.meal{
  background:var(--cuenco); border:1px solid rgba(220,234,217,.9); border-radius:20px;
  padding:13px 15px; margin:10px 0; box-shadow:inset 0 2px 4px rgba(23,84,60,.06);
}
.meal h4{margin:0 0 5px; text-transform:capitalize; font-family:"Baloo 2","Nunito",sans-serif; font-size:15.5px; color:var(--brand-dark)}
.meal .items{color:var(--muted); font-size:13px; margin-top:3px; line-height:1.5}
.meal .row{margin-top:9px}
.meal button{padding:9px 12px; font-size:13.5px; border-radius:13px; background:#fff}
.meal button:active{transform:translateY(1px)}
.exercise{display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1.5px dashed #e3eee0; padding:10px 2px; font-size:14px}
.exercise:last-child{border-bottom:0}
.exercise input{max-width:118px; padding:8px 10px; border-radius:13px; font-size:13.5px}
.exercise button{padding:6px 10px; border-radius:11px; font-size:13px; background:var(--bad-bg); color:var(--bad); box-shadow:none}
.pill{display:inline-block; font-size:11.5px; font-weight:800; padding:5px 12px; border-radius:99px; background:#eef6ea; color:var(--brand-dark); white-space:nowrap}
.pill.ok{background:var(--ok-bg); color:var(--ok)}

/* ---------- gráficas ---------- */
canvas.chart{width:100%; height:auto; background:#f8fbf3; border:1px solid rgba(220,234,217,.9); border-radius:22px;
  box-shadow:inset 0 2px 5px rgba(23,84,60,.06)}
.stage{margin:13px 0}
.stage b{font-family:"Baloo 2","Nunito",sans-serif; font-size:15px}

/* ---------- foto ---------- */
.preview{width:100%; border-radius:22px; margin:10px 0; box-shadow:var(--sombra-sm)}
input[type="file"]{padding:10px}

/* ---------- entreno: galería de su equipo ---------- */
.galeria{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:10px 0 4px}
.galeria figure{margin:0; border-radius:18px; overflow:hidden; border:1px solid rgba(220,234,217,.9); background:var(--cuenco); box-shadow:var(--sombra-sm)}
.galeria img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block}
.galeria figcaption{font-size:11px; font-weight:800; color:var(--brand-dark); text-align:center; padding:6px 4px 7px; line-height:1.3}
.breath{background:var(--cuenco); border-radius:20px; padding:14px 16px; margin-top:12px; box-shadow:inset 0 2px 4px rgba(23,84,60,.07)}
.breath h3{margin-top:0}

/* ---------- barra de pestañas ---------- */
#tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:rgba(255,254,249,.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(220,234,217,.9);
  box-shadow:0 -8px 24px rgba(23,84,60,.10);
  display:flex; padding:8px 6px calc(9px + env(safe-area-inset-bottom));
}
#tabs button{
  flex:1; border:0; background:none; box-shadow:none; border-radius:14px; min-width:0;
  color:var(--muted); font-size:10.5px; font-weight:800; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 0 2px; cursor:pointer;
}
#tabs button:active{transform:none; box-shadow:none}
#tabs .tic{
  width:42px; height:31px; border-radius:12px; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.75), inset 0 -3px 5px rgba(23,84,60,.12);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#tabs button[data-tab="hoy"] .tic{background:var(--t-mint)}
#tabs button[data-tab="menu"] .tic{background:var(--t-dur)}
#tabs button[data-tab="comidas"] .tic{background:var(--t-ama)}
#tabs button[data-tab="foto"] .tic{background:var(--t-cel)}
#tabs button[data-tab="peso"] .tic{background:var(--t-lav)}
#tabs button[data-tab="entreno"] .tic{background:var(--t-cor)}
#tabs button[data-tab="habitos"] .tic{background:var(--t-teal)}
#tabs button[data-tab="ajustes"] .tic{background:var(--t-rosa)}
#tabs button:active .tic{transform:scale(.92)}
#tabs button.active{color:var(--ink)}
#tabs button.active .tic{
  background:var(--grad); color:#fff; transform:scale(1.07);
  box-shadow:0 8px 16px rgba(11,122,85,.35), inset 0 2px 2px rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.10);
}

/* ---------- candado: hero con degradado + tarjeta arcilla ---------- */
.lock{
  position:fixed; inset:0; z-index:50; padding:20px;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 60% at 85% -10%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(150deg,#0b7a55 0%,#0a6e63 45%,#0e7490 100%);
}
.lock-card{
  background:var(--card); border-radius:28px; padding:28px 24px 24px; max-width:370px; width:100%;
  text-align:center; box-shadow:0 24px 44px rgba(4,47,34,.35), inset 0 2px 3px rgba(255,255,255,.95), inset 0 -6px 10px rgba(23,84,60,.08);
}
.lock-card .logo{
  width:66px; height:66px; border-radius:20px; margin:0 auto 12px; font-size:35px;
  background:linear-gradient(150deg,#e8f6ec,#d8efe6);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.9), inset 0 -4px 6px rgba(23,84,60,.12), 0 8px 16px rgba(23,84,60,.18);
}
.lock-card h1{font-size:27px; margin:0 0 6px; color:var(--ink)}
.lock-card p{color:var(--muted); font-size:14px; font-weight:600; margin:0 0 12px}
.lock-card input{text-align:center}
.lock-card button{width:100%; margin-top:10px}
ol li{margin:7px 0}

/* FIX candado: el atributo hidden debe ganar a cualquier display de clase (flex, etc.) */
[hidden]{display:none !important}