/* css/screens/comida.css */
.macro-top { display: flex; justify-content: space-between; font-size: var(--text-body); margin-bottom: 5px; }

.macro-top b { color: var(--txt); font-weight: 600; }

.macro-top span { color: var(--txt-2); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

.cal-search input { width: 100%; background: var(--card-2); border: 1px solid var(--border); border-radius: 4px; padding: 13px 14px 13px 38px; color: var(--txt); font-size: var(--text-emphasis); }

.cal-search input:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }

.food-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: var(--space-10) var(--space-14); cursor: pointer; }

.food-row:active { background: var(--card-2); }

.food-name { font-size: var(--text-body); color: var(--txt); }

.food-kcal { font-size: var(--text-body); color: var(--blue-2); font-variant-numeric: tabular-nums; font-family: var(--font-mono); display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }

.food-kcal span { font-size: 10px; color: var(--txt-3); }

.cal-create { margin: 10px 0 20px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--text-body);
    color: var(--blue-2); background: transparent; cursor: pointer; border: 1px dashed var(--border); border-radius: 4px; padding: 11px; }

.cal-create:active { border-color: var(--blue); }

.diary-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }

.diary-item { display: flex; align-items: center; gap: var(--space-10); background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: var(--space-12) var(--space-14); margin-bottom: var(--space-8); cursor: pointer; transition: var(--transition-tap); }

.diary-item:active { background: var(--card-2); }

.diary-name { flex: 1; min-width: 0; font-size: var(--text-body); }

.diary-name span { display: block; font-size: var(--text-meta); color: var(--txt-3); margin-top: 2px; }

.diary-kcal { font-size: var(--text-body); color: var(--txt); font-variant-numeric: tabular-nums; font-family: var(--font-mono); flex-shrink: 0; }

.cal-empty { text-align: center; padding: 40px 20px; }

.cal-empty-ic { width: 60px; height: 60px; border-radius: 4px; background: var(--card-2); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: var(--blue-2); }

.cal-empty-ic svg { width: 30px; height: 30px; }

.cal-empty-title { font-size: 21px; font-weight: 700; margin-bottom: 8px; }

.cal-empty-sub { color: var(--txt-2); font-size: var(--text-body); line-height: 1.6; margin-bottom: 22px; }

.form-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }

.form-back { background: none; border: none; color: var(--txt); font-size: 28px; cursor: pointer; line-height: 1; padding: 0 4px; }

.form-title { font-size: 22px; font-weight: 700; }

.form-sub { color: var(--txt-2); font-size: var(--text-meta); margin-bottom: 20px; }

.form-group { margin-bottom: 18px; }

.form-label { font-size: var(--text-meta); color: var(--txt-2); margin-bottom: 9px; display: block; }

.form-row2 { display: flex; gap: 10px; }

.form-row2 .form-group { flex: 1; }

.form-or { text-align: center; color: var(--txt-3); font-size: var(--text-meta); margin: 22px 0 12px; }

.water-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: var(--space-14); margin-bottom: var(--space-14); }

.water-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

.water-ttl { font-size: var(--text-body); font-weight: 600; color: var(--txt); }

.water-val { font-size: var(--text-body); color: var(--blue-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.water-btns { display: flex; gap: 8px; margin-top: 12px; }

.water-undo { color: var(--txt-2) !important; }

.plan-banner { background:var(--card); border:1px solid var(--blue); border-radius:4px; padding:var(--space-12) var(--space-14); margin-bottom:var(--space-16); }

.plan-t { font-size:10px; color:var(--blue-2); text-transform:uppercase; letter-spacing:.1em; font-weight:700; margin-bottom:8px; }

.plan-macros { display:flex; gap:16px; flex-wrap:wrap; }

.plan-macros span { font-size: var(--text-meta); color:var(--txt-2); }

.plan-macros b { color:var(--txt); font-size:16px; font-weight:800; margin-right:2px; font-variant-numeric:tabular-nums; }

/* ===== Búsqueda con escáner y productos de marca (Open Food Facts) ===== */
.food-search-row { display:flex; gap:8px; align-items:stretch; }
.food-search-row .cal-search { flex:1; min-width:0; }
.scan-btn { flex-shrink:0; width:48px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:var(--gize-surface-2);
    color:var(--gize-text); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.scan-btn svg { width:22px; height:22px; }
.scan-btn:hover { border-color:var(--gize-blue); }
.off-head { display:flex; align-items:baseline; justify-content:space-between; margin:14px 2px 8px; font-size:var(--text-meta);
    font-weight:700; color:var(--txt-2); text-transform:uppercase; letter-spacing:.06em; }
.off-head span { text-transform:none; letter-spacing:0; font-weight:500; color:var(--txt-3); }

/* Escáner a pantalla completa */
body.scan-open { overflow:hidden; }
.scan-wrap { position:fixed; inset:0; z-index:400; background:#000; display:flex; flex-direction:column;
    padding:calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); gap:12px; }
.scan-top { display:flex; align-items:center; justify-content:space-between; color:var(--gize-text); font:600 var(--text-emphasis) var(--gize-font); }
.scan-x { width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; font-size:16px; cursor:pointer; }
.scan-view { position:relative; flex:1; min-height:0; border-radius:16px; overflow:hidden; background:#0b0d11; }
.scan-view video { width:100%; height:100%; object-fit:cover; display:block; }
.scan-frame { position:absolute; left:8%; right:8%; top:32%; bottom:32%; border-radius:14px; padding:2px; pointer-events:none;
    background:var(--gize-rgb-ring);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* La línea va aparte del marco: la máscara del marco (que deja solo el borde) la taparía. */
.scan-line { position:absolute; left:12%; right:12%; top:50%; height:2px; background:var(--gize-danger); box-shadow:0 0 12px var(--gize-danger);
    pointer-events:none; animation:scanLine 1.6s ease-in-out infinite alternate; }
@keyframes scanLine { from { transform:translateY(-40px); } to { transform:translateY(40px); } }
@media (prefers-reduced-motion: reduce) { .scan-line { animation:none; } }
.scan-msg { text-align:center; color:var(--txt-2); font-size:var(--text-body); min-height:20px; }
.scan-manual { display:flex; gap:8px; }
.scan-manual .form-input { flex:1; min-width:0; }

/* ===== Anillo de calorías + promedio de 7 días al costado ===== */
.cal-top { display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0 6px; }
.cal-top .ring-wrap { margin:0; flex-shrink:0; }
.wk-avg { flex:0 1 150px; min-width:0; display:flex; flex-direction:column; gap:3px; padding:12px 12px 11px; border-radius:14px;
    background:var(--gize-surface); border:1px solid var(--gize-border); }
.wk-t { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); }
.wk-n { font:700 20px var(--font-mono); color:var(--gize-text); line-height:1.15; }
.wk-n small { font:500 10px var(--gize-font); color:var(--txt-3); margin-left:3px; }
.wk-st { font-size:var(--text-meta); font-weight:700; margin-top:2px; }
.wk-d { font:600 11px var(--font-mono); color:var(--txt-2); }
.wk-days, .wk-hint { font-size:10.5px; color:var(--txt-3); line-height:1.35; }
/* Color = estado, no juicio: déficit en azul (dato), superávit en ámbar (aviso), en la
   meta / mantenimiento en verde agua. */
.wk-avg.down { border-color:color-mix(in srgb, var(--gize-blue) 45%, transparent); }
.wk-avg.down .wk-st { color:var(--gize-blue); }
.wk-avg.up { border-color:color-mix(in srgb, var(--gize-warning) 45%, transparent); }
.wk-avg.up .wk-st { color:var(--gize-warning); }
.wk-avg.eq { border-color:color-mix(in srgb, var(--gize-success) 45%, transparent); }
.wk-avg.eq .wk-st { color:var(--gize-success); }
@media (max-width: 360px){
  .cal-top { flex-direction:column; }
  .wk-avg { flex-basis:auto; width:100%; max-width:260px; }
}