:root{--bg:#0a0a0f;--bg2:#12121a;--card:#1a1a2e;--card-h:#222240;--accent:#ff6b35;--accent-l:#ff8c5a;--green:#4ade80;--red:#e74c3c;--orange:#ff6b35;--blue:#0984e3;--txt:#f0f0f5;--txt2:#8888a0;--txt3:#55556a;--border:#2a2a40;--r:14px;--rs:10px}
*{margin:0;padding:0;box-sizing:border-box}

/* FONDO MESH AMBIENTAL PARA LA APP */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  background-color: #08080d;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(255, 107, 53, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 50%, rgba(0, 184, 148, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 20% 85%, rgba(255, 107, 53, 0.1) 0%, transparent 45%);
  background-attachment: fixed;
  color: var(--txt);
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  overflow-x: hidden;
}

input,select,button{font-family:inherit}button{cursor:pointer}

/* AUTENTICACIÓN ESTILO GEMINI */
#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background-color: #040406;
  background-image: 
    radial-gradient(circle at 50% 20%, rgba(255, 107, 53, 0.38) 0%, transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(0, 184, 148, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 10% 60%, rgba(255, 107, 53, 0.2) 0%, transparent 45%);
  position: relative;
}

.auth-box {
  width: 100%;
  max-width: 400px;
  background: rgba(12, 12, 18, 0.65);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 32px 28px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), 0 0 50px rgba(255, 107, 53, 0.15);
}

.auth-box .logo-big {
  width: 170px;
  height: 170px;
  margin: 0 auto 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.auth-box .logo-big video { 
  width: 230px; 
  height: 230px; 
  object-fit: cover; 
  mix-blend-mode: screen; 
  -webkit-clip-path: circle(39% at 50% 50%);
  clip-path: circle(39% at 50% 50%);
  filter: contrast(135%) brightness(85%);
  -webkit-filter: contrast(135%) brightness(85%);
}

.auth-box h2 {
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  margin-top: 6px;
  margin-bottom: 4px;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.auth-box .sub {
  text-align: center;
  color: #86868b;
  font-size: 14px;
  margin-bottom: 24px;
}

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 11px; font-weight: 700; color: var(--txt2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.field input { width: 100%; padding: 14px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; color: #fff; font-size: 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.field input:focus { border-color: rgba(255, 107, 53, 0.8); box-shadow: 0 0 12px rgba(255, 107, 53, 0.25); }

.btn { width: 100%; padding: 15px; border: none; border-radius: 20px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--green)); color: #fff; box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3); }
.btn-primary:hover { opacity: 0.95; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 107, 53, 0.45); }
.btn-secondary { background: var(--bg2); color: var(--txt2); border: 1px solid var(--border); margin-top: 10px; }

.auth-toggle { text-align: center; margin-top: 24px; font-size: 13px; color: var(--txt2); }
.auth-toggle a { color: var(--accent-l); text-decoration: none; font-weight: 700; }
.auth-toggle a:hover { text-decoration: underline; }
.auth-error { color: var(--red); font-size: 12px; text-align: center; margin-top: 8px; min-height: 18px; }

/* HEADER */
.header {
  padding: 14px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: rgba(6, 6, 10, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-left{display:flex;align-items:center;gap:10px}
.header-left .logo{width:34px;height:34px;background:linear-gradient(135deg,var(--accent),var(--green));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px}
.header-left h1{font-size:19px;font-weight:800;background:linear-gradient(135deg,var(--accent-l),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-right{display:flex;align-items:center;gap:8px}
.streak-mini{display:flex;align-items:center;gap:4px;background:rgba(243,156,18,0.1);padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;color:var(--orange)}
.btn-icon{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:var(--txt2);display:flex;align-items:center;justify-content:center;font-size:16px}
.btn-icon:hover{background:rgba(255,255,255,0.12);color:var(--txt)}

/* BARRA DE NAVEGACIÓN DE FECHA FLUXO */
.date-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(18, 18, 26, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 8px 12px;
  margin: 12px 16px 14px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.date-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--txt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.date-nav-btn:hover {
  background: rgba(255, 107, 53, 0.2);
  border-color: var(--accent);
  color: #fff;
}

.date-nav-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s;
  position: relative;
}

.date-nav-picker:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 107, 53, 0.4);
}

.btn-today-pill {
  background: linear-gradient(135deg, var(--accent), var(--green));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-today-pill:hover {
  transform: scale(1.04);
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.4);
}

/* BOTÓN COPIAR COMIDAS DE AYER */
.btn-copy-yesterday {
  background: rgba(255, 107, 53, 0.12);
  border: 1px solid rgba(255, 107, 53, 0.3);
  color: var(--accent-l);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}
.btn-copy-yesterday:hover {
  background: rgba(255, 107, 53, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
}

/* BOTONES RÁPIDOS DE AGUA */
.btn-water-quick {
  flex: 1;
  background: rgba(9, 132, 227, 0.12);
  border: 1px solid rgba(9, 132, 227, 0.3);
  color: #74b9ff;
  border-radius: 10px;
  padding: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-water-quick:hover {
  background: rgba(9, 132, 227, 0.25);
  border-color: #0984e3;
}

/* NAVEGACIÓN INFERIOR */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: rgba(6, 6, 10, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-around;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 99;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--txt2);
  background: none;
  border: none;
  font-size: 10px;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
}

.nav-item.on {
  color: var(--accent);
}

.nav-item i {
  width: 24px;
  height: 24px;
}

.content {
  padding: 14px 16px 100px;
}.page{display:none}.page.on{display:block;animation:fadeUp 0.25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* TARJETAS CRISTAL */
.card {
  background: rgba(18, 18, 26, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.card-t{font-size:12px;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:0.7px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }

.st {
  background: rgba(18, 18, 26, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 14px 10px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.st-v{font-size:20px;font-weight:800;line-height:1.1;margin-bottom:3px}
.st-l{font-size:10px;color:var(--txt2);font-weight:500}
.c-green{color:var(--green)}.c-accent{color:var(--accent-l)}.c-orange{color:var(--orange)}.c-blue{color:var(--blue)}.c-red{color:var(--red)}

#coach-banner {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.18), rgba(0, 184, 148, 0.12)) !important;
  border: 1px solid rgba(255, 107, 53, 0.35) !important;
  border-radius: 20px !important;
  padding: 16px !important;
}

#coach-status-txt {
  font-size: 12.5px !important;
  margin-top: 4px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
}

.timer-wrap{text-align:center;padding:8px 0}
.timer-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: all 0.3s ease;
}
.timer-ring.running{border-color:var(--accent);animation:pulse-ring 1.5s ease infinite}
@keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,0.3)}50%{box-shadow:0 0 0 8px rgba(108,92,231,0)}}
.timer-btns{display:flex;gap:6px;justify-content:center}
.timer-btns button {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--txt2);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.timer-btns button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.timer-btns button.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.exercise{background:rgba(18, 18, 26, 0.65);backdrop-filter:blur(16px);border-radius:18px;padding:14px;margin-bottom:10px;border:1px solid rgba(255,255,255,0.08)}
.ex-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ex-name{font-size:14px;font-weight:600;flex:1}
.ex-vol{font-size:13px;font-weight:700;color:var(--accent-l);text-align:right}
.ex-vol small{display:block;font-size:10px;color:var(--txt2);font-weight:500}
.ex-btns{display:flex;gap:4px;margin-left:8px}
.ex-btns button{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:var(--txt2);font-size:13px;display:flex;align-items:center;justify-content:center}
.ex-btns button:hover{background:rgba(255,255,255,0.12);color:var(--txt)}
.ex-btns button.del{color:var(--red)}
.sets-head{display:grid;grid-template-columns:30px 1fr 1fr 30px;gap:6px;padding:0 4px 6px;font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
.set-row{display:grid;grid-template-columns:30px 1fr 1fr 30px;gap:6px;align-items:center;padding:4px;border-radius:6px;transition:background 0.15s}
.set-row:hover{background:rgba(255,255,255,0.04)}
.set-row.done{opacity:0.5}
.set-row.done .set-num{text-decoration:line-through}
.set-num{font-size:12px;font-weight:700;color:var(--txt2);text-align:center}
.set-row input{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:6px 8px;color:var(--txt);font-size:13px;text-align:center;outline:none;width:100%}
.set-row input:focus{border-color:var(--accent)}
.set-check{width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,0.15);background:none;display:flex;align-items:center;justify-content:center;margin:0 auto;cursor:pointer;font-size:11px;color:transparent;transition:all 0.15s}
.set-check.checked{background:var(--green);border-color:var(--green);color:#fff}

.add-set-btn {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--txt2);
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}
.add-set-btn:hover {
  border-color: rgba(255, 107, 53, 0.5);
  color: var(--accent-l);
  background: rgba(255, 107, 53, 0.1);
}

.sec-t{font-size:15px;font-weight:700;margin:16px 0 8px;display:flex;align-items:center;gap:6px}

/* MEJORAS VISUALES EN NUTRICIÓN */
.cal-ring-wrap{display:flex;align-items:center;gap:20px}
.cal-ring{position:relative;width:130px;height:130px;flex-shrink:0}
.cal-ring svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:10}
.ring-fill{fill:none;stroke:url(#grd);stroke-width:10;stroke-linecap:round;stroke-dasharray:345;stroke-dashoffset:345;transition:stroke-dashoffset 0.8s ease}
.ring-txt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.ring-rem{font-size:26px;font-weight:800;line-height:1}
.ring-lbl{font-size:10px;color:var(--txt2);margin-top:2px}
.macros{display:flex;flex-direction:column;gap:12px;flex:1}
.macro-h{display:flex;justify-content:space-between;margin-bottom:4px}
.macro-n{font-size:12px;font-weight:600}
.macro-v{font-size:11px;color:var(--txt2)}
.macro-bar{height:8px;background:rgba(255,255,255,0.08);border-radius:10px;overflow:hidden}
.macro-fill{height:100%;border-radius:10px;transition:width 0.6s ease;box-shadow:0 0 10px rgba(108,92,231,0.3)}

/* COMIDAS ESTILIZADAS */
.meal{display:flex;align-items:center;gap:12px;padding:14px;background:rgba(18, 18, 26, 0.65);backdrop-filter:blur(16px);border-radius:18px;margin-bottom:8px;border:1px solid rgba(255,255,255,0.08);transition:all 0.2s ease}
.meal:hover{border-color:rgba(255,255,255,0.15)}
.meal-em{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.meal-info{flex:1;min-width:0}
.meal-nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meal-dt{font-size:11px;color:var(--txt2);margin-top:2px}
.meal-cal{font-size:14px;font-weight:700;color:var(--green);flex-shrink:0}
.meal-empty{background:rgba(255, 255, 255, 0.02) !important;border:1px dashed rgba(255, 255, 255, 0.15) !important;opacity:0.8;cursor:pointer}
.meal-empty:hover{background:rgba(255, 255, 255, 0.05) !important;border-color:rgba(255, 107, 53, 0.4) !important;opacity:1}
.meal-empty .meal-nm{color:var(--txt2)}

/* VASOS DE AGUA FLUIDOS CON ANIMACIÓN */
.water-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.water-g {
  width: 36px;
  height: 48px;
  border-radius: 8px 8px 12px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s, box-shadow 0.25s;
}

.water-g:active {
  transform: scale(0.9);
}

.water-g.filled {
  border-color: #0984e3;
  box-shadow: 0 0 14px rgba(9, 132, 227, 0.5);
  animation: waterPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.water-g .wf {
  width: 100%;
  background: linear-gradient(to top, #0984e3, #74b9ff);
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 0 8px 8px;
  position: relative;
}

/* Onda brillante en la superficie del agua */
.water-g.filled .wf::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  animation: waveGlow 1.8s infinite ease-in-out;
}

@keyframes waterPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18) translateY(-3px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes waveGlow {
  0%, 100% { opacity: 0.3; transform: scaleX(0.8); }
  50%       { opacity: 0.95; transform: scaleX(1.1); }
}


.wt-card{background:rgba(18, 18, 26, 0.65);backdrop-filter:blur(16px);border-radius:20px;padding:16px 20px;margin-bottom:14px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 10px 30px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:space-between}
.wt-input-group{display:flex;align-items:baseline;gap:4px}
.wt-input{width:75px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:8px;font-size:20px;font-weight:800;color:var(--txt);text-align:center;outline:none}
.wt-input:focus{border-color:var(--accent)}
.wt-unit{font-size:14px;color:var(--txt2);font-weight:600}
.wt-trend{margin-left:auto;text-align:right}
.wt-trend .diff{font-size:16px;font-weight:700}
.wt-trend .diff.down{color:var(--green)}
.wt-trend .diff.up{color:var(--red)}
.wt-trend .lbl{font-size:10px;color:var(--txt2)}

.chart-box{background:rgba(18, 18, 26, 0.65);backdrop-filter:blur(16px);border-radius:20px;padding:16px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.08)}
.chart-box canvas{width:100%!important;height:160px!important}

/* BOTÓN DE MARGARITA AI EN NUTRICIÓN */
.marg-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(0, 184, 148, 0.15));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 107, 53, 0.4);
  border-radius: 20px;
  color: var(--txt);
  font-size: 14px;
  font-weight: 700;
  width: 100%;
  margin-bottom: 16px;
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.15);
  transition: all 0.25s ease;
}
.marg-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 107, 53, 0.3);
  border-color: rgba(255, 107, 53, 0.6);
}
.marg-btn .marg-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff6b35, #00b894);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:200;display:none;align-items:flex-end;justify-content:center}
.modal-bg.show{display:flex}
.modal{background:#0e0e17;border-radius:28px 28px 0 0;padding:24px;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;border-top:1px solid rgba(255,255,255,0.1);animation:slideUp 0.3s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal h3{font-size:17px;font-weight:700;margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--txt2);cursor:pointer;}
.food-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background 0.15s}
.food-item:hover{background:rgba(255,255,255,0.05)}
.food-item .fi-info{flex:1}
.food-item .fi-name{font-size:13px;font-weight:600}
.food-item .fi-macros{font-size:10px;color:var(--txt2)}
.food-item .fi-cal{font-size:13px;font-weight:700;color:var(--green);margin-left:10px}
.food-item .fi-add{width:30px;height:30px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;margin-left:8px;flex-shrink:0}
.search-input{width:100%;padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:14px;color:var(--txt);font-size:14px;outline:none;margin-bottom:12px}
.search-input:focus{border-color:var(--accent)}
.goal-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
.goal-row:last-child{border:none}
.goal-label{font-size:13px;font-weight:600}
.goal-input{width:80px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:6px 10px;color:var(--txt);font-size:14px;font-weight:700;text-align:center;outline:none}
.goal-input:focus{border-color:var(--accent)}
.fab{position:fixed;bottom:90px;right:24px;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--green));border:none;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 25px rgba(108,92,231,0.45);transition:transform 0.2s;z-index:50}
.fab:hover{transform:scale(1.08)}
.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:rgba(18,18,26,0.9);backdrop-filter:blur(16px);color:var(--txt);padding:10px 20px;border-radius:20px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,0.1);z-index:300;opacity:0;transition:opacity 0.3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}
.save-bar{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);width:100%;max-width:480px;padding:12px 16px;background:rgba(6,6,10,0.85);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.08);z-index:90;display:none}
.save-bar.show{display:block}
.save-bar button{width:100%;padding:14px;border:none;border-radius:16px;font-size:15px;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--green));color:#fff}.empty{text-align:center;padding:30px 20px;color:var(--txt3)}
.empty .em-icon{margin-bottom:8px; display:flex; justify-content:center;}
.empty p{font-size:13px}
.hist-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:rgba(18, 18, 26, 0.65);backdrop-filter:blur(16px);border-radius:16px;margin-bottom:6px;border:1px solid rgba(255,255,255,0.08)}
.hist-date{font-size:12px;color:var(--txt2)}
.hist-val{font-size:14px;font-weight:700}
.mic-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:var(--txt2);font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s}
.mic-btn:hover{border-color:var(--accent);color:var(--txt)}
.mic-btn.listening{border-color:var(--red);color:var(--red);animation:mic-pulse 1s ease infinite}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,0.3)}50%{box-shadow:0 0 0 8px rgba(231,76,60,0)}}
.voice-result{background:rgba(108,92,231,0.08);border:1px solid rgba(108,92,231,0.2);border-radius:16px;padding:12px;margin-bottom:12px}
.voice-result .vr-text{font-size:13px;color:var(--txt);margin-bottom:8px}
.voice-result .vr-items{display:flex;flex-direction:column;gap:6px}
.voice-result .vr-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:rgba(18,18,26,0.65);border-radius:10px;border:1px solid rgba(255,255,255,0.08)}
.voice-result .vr-item-info{flex:1}
.voice-result .vr-item-name{font-size:13px;font-weight:600}
.voice-result .vr-item-macros{font-size:10px;color:var(--txt2)}
.voice-result .vr-item-cal{font-size:13px;font-weight:700;color:var(--green);margin:0 8px}
.voice-result .vr-item-add{width:28px;height:28px;border-radius:50%;border:none;background:var(--green);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.voice-loading{text-align:center;padding:20px;color:var(--txt2);font-size:13px}
.voice-loading .dots::after{content:'';animation:dots 1.5s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}
.ex-group-btn{padding:6px 14px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--txt2);font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.ex-group-btn:hover{border-color:var(--accent);color:var(--txt)}
.ex-group-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ex-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background 0.15s}
.ex-item:hover{background:rgba(255,255,255,0.05)}
.ex-item-info{flex:1}
.ex-item-name{font-size:13px;font-weight:600}
.ex-item-meta{font-size:10px;color:var(--txt2);margin-top:2px}
.ex-item-add{width:30px;height:30px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}

/* FASE 3: UX PREMIUM & MICROINTERACCIONES */
button, .btn, .nav-btn, .fab, .set-check, .set-add, .fi-add, .vr-item-add, .ex-group-btn {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, box-shadow 0.2s;
}
button:active, .btn:active, .nav-btn:active, .fab:active, .set-add:active, .fi-add:active, .ex-group-btn:active {
  transform: scale(0.95) !important;
}

/* SET CHECK BOUNCE ANIMATION */
.set-check.checked {
  animation: setCheckBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes setCheckBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* INPUT FOCUS GLOW */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.25) !important;
}

/* FAB ROTATION & HOVER */
.fab {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s !important;
}
.fab:hover {
  transform: scale(1.08) rotate(90deg) !important;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.6) !important;
}

.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}