*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Paleta */
  --bg:#0A0B0A;
  --surface:#121412;
  --surface2:#1a1c1a;
  --border:rgba(255,255,255,.06);
  --border-sub:rgba(255,255,255,.05);

  /* Texto */
  --text:#F4F6F3;
  --text-sec:#C7CAC4;
  --text-muted:#9BA09A;
  --text-dim:#6A6F68;
  --text-dark:#7C817A;

  /* Acento principal */
  --accent:#2BD96A;
  --accent-glow:rgba(43,217,106,.38);
  --accent-dim:rgba(43,217,106,.12);
  --accent-border:rgba(43,217,106,.28);

  /* Macros */
  --p:#2BD96A;
  --c:#A6E15C;
  --g:#4FD8C4;
  --p-dim:rgba(43,217,106,.12);
  --c-dim:rgba(166,225,92,.12);
  --g-dim:rgba(79,216,196,.12);

  /* Sistema */
  --danger:#ef4444;
  --warn:#f59e0b;

  /* Layout */
  --nav-h:64px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* Forma */
  --r:20px;
  --r-md:16px;
  --r-sm:14px;
  --r-xs:9px;

  /* Tipografía */
  --font:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Geist Mono','SF Mono','Fira Code',monospace;
}

html{height:100%}
body{
  min-height:100%;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:15px;line-height:1.5;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased
}

.app-container{
  padding-top:var(--safe-t);
  padding-bottom:calc(var(--nav-h) + var(--safe-b) + 8px);
  min-height:100dvh
}
.view{padding:18px 16px;animation:fadein .2s ease}

/* ── Nav ─────────────────────────────────────────────────────── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(10,11,10,.92);
  border-top:1px solid var(--border);
  display:flex;align-items:stretch;z-index:100;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;color:#52574F;
  text-decoration:none;font-size:10px;font-weight:500;
  transition:color .2s;padding-top:4px
}
.nav-item svg{width:23px;height:23px}
.nav-item.active{color:var(--accent)}
.nav-item:active{opacity:.7}

/* ── Botones ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:var(--r-sm);border:none;
  font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);
  transition:opacity .15s,transform .1s
}
.btn:active{transform:scale(.97);opacity:.85}
.btn-primary{
  background:var(--accent);color:#061A0C;
  box-shadow:0 6px 18px var(--accent-glow)
}
.btn-secondary{background:var(--surface2);color:var(--text)}
.btn-danger-outline{background:transparent;color:var(--danger);border:1px solid var(--danger)}
.btn-full{width:100%}
.btn-icon{
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  color:var(--text-muted);width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:17px;flex-shrink:0
}
.btn-icon:active{opacity:.6}

/* ── Inputs ──────────────────────────────────────────────────── */
input,select,textarea{
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text);border-radius:var(--r-sm);
  padding:11px 13px;font-size:15px;width:100%;
  outline:none;transition:border-color .2s;-webkit-appearance:none;
  font-family:var(--font)
}
input:focus,select:focus,textarea:focus{border-color:rgba(43,217,106,.45)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button{display:none}
label{
  display:block;font-size:11px;color:var(--text-muted);
  margin-bottom:6px;letter-spacing:.04em;font-weight:500;text-transform:uppercase
}

/* ── Offline ─────────────────────────────────────────────────── */
.offline-banner{
  position:fixed;top:0;left:0;right:0;background:var(--warn);color:#000;
  text-align:center;padding:calc(env(safe-area-inset-top) + 8px) 8px 8px;
  font-size:13px;font-weight:600;z-index:200
}
.offline-banner.hidden{display:none}

/* ── Modal sheet ─────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:150;
  display:flex;align-items:flex-end;opacity:0;transition:opacity .25s
}
.modal-overlay.open{opacity:1}
.modal-sheet{
  background:var(--surface);border-radius:26px 26px 0 0;width:100%;
  max-height:88dvh;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  border:1px solid var(--border);border-bottom:none
}
.modal-overlay.open .modal-sheet{transform:translateY(0)}
.sheet-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 14px;border-bottom:1px solid var(--border);flex-shrink:0
}
.sheet-title{font-size:16px;font-weight:600}
.btn-close{
  background:rgba(255,255,255,.06);border:1px solid var(--border);
  color:var(--text-muted);width:30px;height:30px;border-radius:50%;
  font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center
}
.sheet-search{
  padding:12px 16px 10px;flex-shrink:0;border-bottom:1px solid var(--border)
}
.sheet-search input{
  background:#0D0F0D;border:1.5px solid var(--border);border-radius:14px;
  padding:10px 13px 10px 40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%236A6F68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:13px center
}
.sheet-search input:focus{border-color:rgba(43,217,106,.45)}
.sheet-body{
  flex:1;overflow-y:auto;padding:12px 16px calc(24px + var(--safe-b))
}

/* ── Diario header ───────────────────────────────────────────── */
.diario-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px
}
.diario-fecha{font-size:14px;font-weight:500;flex:1;text-align:center;color:var(--text-dark)}

/* ── Macro card con anillo ───────────────────────────────────── */
.macros-card{
  background:linear-gradient(180deg,#151714,#0E100E);
  border:1px solid var(--border);border-radius:26px;
  padding:22px 18px 20px;margin-bottom:14px;
  display:flex;flex-direction:column;align-items:center
}
.kcal-ring-wrap{position:relative;width:180px;height:180px}
.kcal-ring-wrap svg{display:block}
.kcal-ring-center{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px
}
.kcal-remaining-lbl{font-size:12px;color:var(--text-dark)}
.kcal-remaining{
  font-family:var(--mono);font-size:44px;font-weight:600;
  letter-spacing:-1.5px;line-height:1
}
.kcal-consumed{font-size:11.5px;color:var(--text-dark);margin-top:4px;font-family:var(--mono)}

/* Mini tarjetas de macros dentro del card */
.macro-mini-row{display:flex;gap:8px;width:100%;margin-top:18px}
.macro-mini{
  flex:1;background:rgba(255,255,255,.03);border-radius:14px;
  padding:11px 10px 12px
}
.macro-mini-header{
  display:flex;align-items:center;gap:5px;
  font-size:11px;color:var(--text-muted);margin-bottom:7px
}
.macro-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.macro-dot.p{background:var(--p)}
.macro-dot.c{background:var(--c)}
.macro-dot.g{background:var(--g)}
.macro-mini-val{
  font-family:var(--mono);font-size:15px;font-weight:600;margin-bottom:8px
}
.macro-mini-val span{font-size:11px;color:var(--text-dim);font-weight:400}

.bar-wrap{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width .4s ease;max-width:100%;background:var(--p)}
.bar-fill.c{background:var(--c)}
.bar-fill.g{background:var(--g)}

/* ── Comida cards ────────────────────────────────────────────── */
.comida-card{
  background:var(--surface);border-radius:22px;border:1px solid var(--border);
  margin-bottom:12px;overflow:hidden
}
.comida-hdr{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px 12px;border-bottom:1px solid var(--border-sub)
}
.comida-icon{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center
}
.comida-card[data-comida="desayuno"] .comida-icon{background:var(--p-dim);color:var(--p)}
.comida-card[data-comida="almuerzo"] .comida-icon{background:var(--c-dim);color:var(--c)}
.comida-card[data-comida="merienda"] .comida-icon{background:var(--g-dim);color:var(--g)}
.comida-card[data-comida="cena"]     .comida-icon{background:var(--g-dim);color:var(--g)}
.comida-info{flex:1;min-width:0}
.comida-nombre{display:block;font-size:15px;font-weight:600}
.comida-count{display:block;font-size:11px;color:var(--text-dark);margin-top:1px}
.comida-kcal-sum{font-family:var(--mono);font-size:14px;color:var(--text-sec);flex-shrink:0}
.btn-add-comida{
  background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);
  border-radius:99px;padding:5px 13px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:var(--font);white-space:nowrap;flex-shrink:0
}

.reg-item{
  display:flex;align-items:center;padding:11px 16px;
  border-top:1px solid var(--border-sub);gap:10px
}
.reg-info{flex:1;min-width:0}
.reg-nombre{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reg-detail{font-size:11px;color:var(--text-dark);margin-top:2px}
.reg-kcal{font-family:var(--mono);font-size:13px;color:var(--text-sec);min-width:40px;text-align:right}
.btn-del{
  background:none;border:none;color:var(--text-dim);font-size:17px;cursor:pointer;
  padding:2px 4px;line-height:1;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center
}
.btn-del:hover{color:var(--danger)}
.comida-vacia{
  padding:12px 16px;font-size:13px;color:var(--text-dim);
  border-top:1px solid var(--border-sub)
}

/* ── Buscador ─────────────────────────────────────────────────── */
.result-item{
  display:flex;align-items:center;padding:12px 6px;
  border-bottom:1px solid var(--border-sub);gap:10px
}
.result-item:last-child{border-bottom:none}
.result-item.result-top{
  background:rgba(43,217,106,.06);border:1px solid rgba(43,217,106,.2);
  border-radius:14px;padding:12px;margin-bottom:4px;border-bottom:1px solid rgba(43,217,106,.2)
}
.result-info{flex:1;min-width:0}
.result-nombre{font-size:14px;font-weight:500;display:block}
.result-macros{font-size:11px;color:var(--text-dark);display:block;margin-top:2px}
.btn-plus{
  background:rgba(255,255,255,.06);border:none;color:var(--text-muted);
  width:30px;height:30px;border-radius:50%;font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-weight:600;line-height:1;transition:all .2s
}
.result-top .btn-plus{background:rgba(43,217,106,.16);color:var(--accent)}
.btn-plus:hover{background:var(--accent);color:#061A0C}

.cantidad-box{padding:8px 0 4px}
.cantidad-row{display:flex;gap:8px;margin-top:10px}
.empty-msg{text-align:center;color:var(--text-dim);padding:28px 0;font-size:14px}
.nuevo-alimento-btn{
  width:100%;padding:12px;background:none;border:1.5px dashed var(--border);
  color:var(--text-muted);border-radius:var(--r-sm);font-size:13px;cursor:pointer;
  margin-top:12px;font-family:var(--font)
}
.nuevo-alimento-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── Recetas ─────────────────────────────────────────────────── */
.receta-card{
  background:var(--surface);border-radius:var(--r);border:1px solid var(--border);
  padding:16px;margin-bottom:12px
}
.receta-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.receta-nombre{font-size:16px;font-weight:600}
.receta-rac{font-size:12px;color:var(--text-muted)}
.receta-nums{display:flex;gap:12px;font-size:12px;color:var(--text-muted);flex-wrap:wrap}
.receta-nums b{color:var(--text);font-family:var(--mono)}
.receta-actions{display:flex;gap:6px;margin-top:12px}
.ing-list{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
.ing-item{font-size:13px;color:var(--text-muted);padding:3px 0}

/* ── Medidas ─────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.form-group{display:flex;flex-direction:column;gap:4px}
.medida-card{
  background:var(--surface);border-radius:var(--r);border:1px solid var(--border);
  padding:14px 16px;margin-bottom:10px
}
.medida-fecha{font-size:12px;color:var(--text-muted);margin-bottom:10px}
.medida-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.medida-item{text-align:center}
.medida-val{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--accent)}
.medida-lbl{font-size:10px;color:var(--text-muted);margin-top:2px}

/* ── Progreso ─────────────────────────────────────────────────── */
.chart-card{
  background:var(--surface);border-radius:22px;border:1px solid var(--border);
  padding:18px;margin-bottom:14px
}
.chart-title{font-size:14px;font-weight:500;margin-bottom:14px}
.chart-wrap{position:relative;height:180px}

.range-row{
  display:flex;gap:3px;background:rgba(255,255,255,.05);
  border-radius:12px;padding:4px;margin-bottom:16px
}
.range-btn{
  flex:1;text-align:center;padding:7px 0;border-radius:9px;border:none;
  background:transparent;color:var(--text-muted);
  font-size:12.5px;cursor:pointer;font-family:var(--font);font-weight:500
}
.range-btn.active{background:var(--accent);color:#061A0C;font-weight:600}

/* ── Ajustes ─────────────────────────────────────────────────── */
.view-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.view-title{font-size:24px;font-weight:700;letter-spacing:-.4px}
.form-card{
  background:var(--surface);border-radius:var(--r);border:1px solid var(--border);
  padding:18px;margin-bottom:12px
}
.form-card h3{
  font-size:11px;font-weight:600;color:var(--text-muted);
  margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em
}
.form-row{margin-bottom:12px}
.section-hdr{
  font-size:11px;font-weight:600;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.07em;margin:16px 0 8px
}
.spinner{display:flex;justify-content:center;align-items:center;padding:48px;color:var(--text-muted)}

.toast{
  position:fixed;bottom:calc(var(--nav-h) + var(--safe-b) + 16px);left:50%;
  transform:translateX(-50%);background:var(--surface2);
  border:1px solid var(--border);color:var(--text);
  padding:10px 22px;border-radius:99px;font-size:13px;z-index:160;
  pointer-events:none;white-space:nowrap;font-family:var(--font);
  animation:toastin .2s ease,toastout .25s ease 2.2s forwards
}
.toast.err{border-color:var(--danger);color:var(--danger)}

@keyframes fadein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes toastin{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes toastout{to{opacity:0}}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}