/* Il mio Diario della Glicemia · paleta y letra de la landing del Ricettario per Diabetici */
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/urbanist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/urbanist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --verde: #6FB55C; --verde-medio: #5A9C48; --verde-osc: #2D3F05; --verde-suave: #EAF5E6; --verde-niebla: #F3FAF0;
  --naranja: #FFA000; --naranja-osc: #B86E00; --naranja-suave: #FFF1D6; --amarillo: #FECA01; --amarillo-suave: #FFF6CC;
  --rojo: #D93025; --rojo-suave: #FDECEA;
  --tinta: #1A1A1A; --cuerpo: #3A3A3A; --etiqueta: #5E5E5E; --linea: #E3E8EC; --fondo: #F6F9FB; --blanco: #FFFFFF;
  --r: 18px; --sh: 0 2px 10px rgba(45, 63, 5, .07), 0 1px 2px rgba(0, 0, 0, .04);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-bg: rgba(255, 255, 255, .97); --toast: #1A1A1A;
  /* acento según el momento del día (lo cambia body[data-mom]); siempre con texto blanco ≥ 4,5:1 */
  --acc: #2D3F05; --acc-s: #EAF5E6; --acc-t: #2D3F05;
  color-scheme: light dark;
}
body[data-mom="mattina"] { --acc: #8A5300; --acc-s: #FFF1D6; --acc-t: #8A5300; }
body[data-mom="mezzogiorno"] { --acc: #2D5A12; --acc-s: #E4F3DE; --acc-t: #2D5A12; }
body[data-mom="pomeriggio"] { --acc: #9A3B12; --acc-s: #FCE7DC; --acc-t: #9A3B12; }
body[data-mom="sera"] { --acc: #26346B; --acc-s: #E4E8F6; --acc-t: #26346B; }
@media (prefers-color-scheme: dark) {
  :root {
    --verde-osc: #B5E0A6; --verde-medio: #8CCB78; --verde-suave: #22351E; --verde-niebla: #18241A;
    --naranja-suave: #3A2A10; --amarillo-suave: #3A3212; --rojo: #FF6B5E; --rojo-suave: #3A1A18;
    --tinta: #F2F5F1; --cuerpo: #D8DED6; --etiqueta: #A9B3AC; --linea: #2E3832; --fondo: #0F1411; --blanco: #1A221D;
    --sh: 0 1px 0 rgba(255, 255, 255, .04); --nav-bg: rgba(20, 27, 23, .97); --toast: #2E3832;
  }
  body[data-mom] { --acc-s: #24302A; }
  body[data-mom="mattina"] { --acc-t: #FFC266; }
  body[data-mom="mezzogiorno"] { --acc-t: #A8DA94; }
  body[data-mom="pomeriggio"] { --acc-t: #FF9F75; }
  body[data-mom="sera"] { --acc-t: #AFC0FF; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; background: var(--fondo); color: var(--cuerpo); font-size: 17px; line-height: 1.45; font-weight: 500; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--verde-osc); }
img { display: block; max-width: 100%; }
h1, h2, h3, b { color: var(--tinta); }
h1 { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 21px; font-weight: 800; line-height: 1.2; }
h3 { font-size: 17px; font-weight: 800; }
.ico { flex: none; }
.mt { margin-top: 12px; } .mt2 { margin-top: 22px; }
.small { font-size: 15px; } .muted { color: var(--etiqueta); } .center { text-align: center; }
.lead { font-size: 18px; color: var(--cuerpo); }
.row { display: flex; gap: 10px; align-items: center; } .grow { flex: 1; min-width: 0; }
.err { color: var(--rojo); font-weight: 700; font-size: 15px; min-height: 0; margin-top: 6px; }
.err:empty { display: none; }

#app { max-width: 560px; margin: 0 auto; padding: 14px 16px calc(96px + var(--safe-b)); min-height: 100vh; }
#app.no-nav { padding-bottom: 32px; }
.boot { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-weight: 800; color: var(--verde-osc); }
.boot img { border-radius: 22px; }
.boot-bar { width: 140px; height: 6px; border-radius: 6px; background: var(--verde-suave); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 40%; background: var(--verde); border-radius: 6px; animation: boot 1s ease-in-out infinite alternate; }
@keyframes boot { to { transform: translateX(150%); } }

/* encabezado */
.top { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 16px; }
.top .sub { color: var(--etiqueta); font-size: 15.5px; margin-top: 4px; font-weight: 600; }
.top .back { margin-left: -6px; }
.oggi-top { justify-content: space-between; align-items: center; }
.oggi-top h1 { font-size: 24px; }
.oggi-top h1::first-letter, .kick::first-letter { text-transform: uppercase; }
.kick { color: var(--verde-osc); font-weight: 800; font-size: 15px; }
.daynav { display: flex; gap: 4px; }

/* botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 18px; border-radius: 14px; font-weight: 800; font-size: 17px; text-decoration: none; transition: transform .12s, background .2s; text-align: center; line-height: 1.2; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-full { width: 100%; }
.btn-xl { min-height: 62px; font-size: 19px; border-radius: 16px; }
.btn-s { min-height: 42px; padding: 8px 14px; font-size: 15px; border-radius: 12px; }
.btn-p { background: var(--naranja); color: #231500; box-shadow: 0 4px 0 #D98800; }
.btn-p:active { box-shadow: 0 2px 0 #D98800; transform: translateY(2px); }
.btn-o { background: var(--acc); color: #fff; }
.btn-l { background: var(--blanco); color: var(--verde-osc); border: 2px solid var(--linea); }
.btn-g { background: var(--verde-suave); color: var(--verde-osc); border: 2px solid var(--verde); }
.btn-r { background: var(--rojo); color: #fff; }
.btn-t { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 2px; font-weight: 800; color: var(--verde-osc); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.btn-t.sm { font-size: 15px; padding: 4px 0; min-height: 44px; }
.btn-t.danger { color: var(--rojo); }
.ibtn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--verde-osc); background: var(--blanco); border: 1.5px solid var(--linea); flex: none; }
.ibtn[disabled] { opacity: .35; }

/* tarjetas */
.card { background: var(--blanco); border-radius: var(--r); padding: 16px; box-shadow: var(--sh); position: relative; }
.card.soft { background: var(--verde-niebla); box-shadow: none; border: 1.5px solid var(--verde-suave); }
.card h3 { display: flex; align-items: center; gap: 8px; }
.sec { font-size: 18px; margin: 22px 0 10px; display: flex; gap: 8px; align-items: center; }
.gr { color: var(--verde); }
.big-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--verde-suave); color: var(--verde-osc); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.fade-in { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.offline { display: flex; gap: 8px; align-items: center; background: var(--amarillo-suave); border-radius: 12px; padding: 10px 12px; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.aviso-l { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--etiqueta); margin: 26px 4px 0; font-weight: 600; }
.aviso-l .ico { color: var(--verde-medio); margin-top: 1px; }
.card.aviso { border: 2px solid var(--verde-suave); }
.card.aviso > .ico { color: var(--verde-medio); float: left; margin: 2px 10px 0 0; }

/* bienvenida */
.onb { padding-top: 8px; }
.onb-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.onb-hero img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--verde); }
.hand { font-size: 20px; font-weight: 800; color: var(--verde-medio); }
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; background: var(--blanco); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sh); font-weight: 600; }
.ticks .ico { color: var(--verde-medio); margin-top: 1px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 800; color: var(--tinta); cursor: pointer; background: var(--verde-niebla); border-radius: 12px; padding: 12px; }
.check input { width: 24px; height: 24px; accent-color: var(--verde-medio); flex: none; margin-top: 1px; }

/* hoy */
.acts { display: grid; gap: 10px; margin-bottom: 16px; }
.acts .row .btn { padding: 10px 8px; font-size: 15.5px; min-height: 50px; }
.remind { display: flex; align-items: center; gap: 12px; background: var(--amarillo-suave); border: 2px solid var(--amarillo); margin-bottom: 14px; box-shadow: none; }
.remind > .ico { color: var(--naranja-osc); }
.empty h3 { margin-bottom: 10px; }
.empty .big-ico + h3 { text-align: center; }
.steps3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.steps3 li { background: var(--verde-niebla); border-radius: 12px; padding: 10px 8px; text-align: center; font-weight: 800; font-size: 14.5px; color: var(--verde-osc); line-height: 1.2; }
.steps3 span { display: flex; width: 28px; height: 28px; border-radius: 50%; background: var(--verde); color: #fff; align-items: center; justify-content: center; margin: 0 auto 6px; }
.sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sum > div { background: var(--blanco); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sh); }
.sum b { font-size: 26px; font-weight: 800; display: block; line-height: 1.1; }
.sum small { font-size: 15px; color: var(--etiqueta); }
.sum span { font-size: 13.5px; font-weight: 700; color: var(--etiqueta); }
.tl { display: grid; gap: 10px; margin-top: 12px; }
.ent { display: flex; gap: 12px; background: var(--blanco); border-radius: var(--r); padding: 12px; box-shadow: var(--sh); align-items: flex-start; }
.ent.g { align-items: center; }
.ent-b { text-align: left; display: block; width: 100%; min-height: 44px; }
.ent-b b { display: block; font-size: 16.5px; line-height: 1.25; }
.ent-b small { display: block; color: var(--etiqueta); font-weight: 700; font-size: 14px; margin-top: 2px; }
.gpair { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.gpair .arr { color: var(--etiqueta); }
.gv { min-width: 74px; min-height: 48px; border-radius: 12px; padding: 5px 10px; background: var(--verde-niebla); border: 1.5px solid var(--verde-suave); text-align: left; }
.gv small { display: block; font-size: 13px; font-weight: 800; color: var(--etiqueta); text-transform: uppercase; letter-spacing: .03em; }
.gv b { font-size: 20px; font-weight: 800; line-height: 1.15; }
.gv.add { border-style: dashed; border-color: var(--verde); background: var(--blanco); }
.gv .pl { color: var(--verde-medio); display: block; }
.gv.g { background: var(--naranja-suave); border-color: #FFE0A6; text-align: right; }
.diff { font-weight: 800; font-size: 16px; color: var(--verde-osc); background: var(--amarillo-suave); border-radius: 10px; padding: 5px 9px; white-space: nowrap; }

/* fotos y pictogramas */
.ph { width: 58px; height: 58px; border-radius: 14px; background: var(--verde-suave); position: relative; overflow: hidden; flex: none; display: block; }
.ph.sm { width: 46px; height: 46px; border-radius: 12px; }
.ph.lg { width: 84px; height: 84px; border-radius: 16px; }
.ph-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--verde-medio); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* gráficos */
.chart-card { padding: 12px 10px 10px; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--linea); stroke-width: 1; }
.chart .ax { font-size: 11.5px; fill: var(--etiqueta); font-weight: 700; font-family: inherit; }
.chart .ax.hoy { fill: var(--verde-osc); font-weight: 900; }
.chart .band { fill: var(--verde-suave); opacity: .8; }
.chart .pair { stroke: var(--verde-osc); stroke-width: 2; stroke-dasharray: 4 3; }
.chart .meal-m line { stroke: var(--amarillo); stroke-width: 1.5; opacity: .6; }
.chart .rng { stroke: #C9D3DA; stroke-width: 6; stroke-linecap: round; }
.chart .pt.b { fill: var(--blanco); stroke: var(--verde-osc); stroke-width: 2.5; }
.chart .pt.a { fill: var(--naranja); stroke: var(--naranja-osc); stroke-width: 1.5; }
.chart .pt.g { fill: var(--verde); stroke: var(--verde-osc); stroke-width: 1.2; }
.chart .lab { font-size: 12px; font-weight: 800; fill: var(--tinta); font-family: inherit; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 700; color: var(--etiqueta); margin-top: 6px; padding: 0 4px; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.lg { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.lg.b { border: 2.5px solid var(--verde-osc); background: var(--blanco); }
.lg.a { background: var(--naranja); }
.lg.g { background: var(--verde); border-radius: 2px; transform: rotate(45deg); width: 10px; height: 10px; }
.lg.band { background: var(--verde-suave); border-radius: 3px; width: 18px; }
.chart-empty { text-align: center; padding: 28px 10px; color: var(--etiqueta); font-weight: 700; }
.chart-empty .ico { color: var(--verde); margin-bottom: 6px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--blanco); border-radius: 14px; padding: 4px; box-shadow: var(--sh); margin-bottom: 14px; }
.seg button { min-height: 44px; border-radius: 10px; font-weight: 800; color: var(--etiqueta); font-size: 15.5px; }
.seg button.on { background: var(--acc); color: #fff; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.pager b { text-align: center; font-size: 16px; display: block; }
.pager b::first-letter { text-transform: uppercase; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.stat { background: var(--blanco); border-radius: 14px; padding: 12px; box-shadow: var(--sh); }
.stat b { font-size: 24px; font-weight: 800; display: block; line-height: 1.1; }
.stat small { font-size: 13px; color: var(--etiqueta); }
.stat span { font-size: 13.5px; font-weight: 700; color: var(--etiqueta); line-height: 1.25; display: block; margin-top: 2px; }

/* mis platos */
.dishes { display: grid; gap: 10px; }
.dish { display: flex; gap: 12px; align-items: center; background: var(--blanco); border-radius: var(--r); padding: 12px; box-shadow: var(--sh); text-decoration: none; color: inherit; }
.dish b { display: block; font-size: 16px; line-height: 1.25; }
.dish small { display: block; font-size: 13.5px; font-weight: 700; color: var(--etiqueta); margin-top: 2px; }
.bar { display: block; height: 7px; background: var(--fondo); border-radius: 7px; margin-top: 7px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--naranja); border-radius: 7px; }
.dish-hero { display: flex; gap: 14px; align-items: center; }
.big-diff { font-size: 34px; font-weight: 900; display: block; line-height: 1; }
.big-diff small { font-size: 15px; color: var(--etiqueta); }
.det { background: var(--blanco); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: 15px; box-shadow: var(--sh); }
.ord { padding-left: 22px; margin-top: 6px; display: grid; gap: 4px; font-weight: 600; }
.ord li::marker { color: var(--verde-medio); font-weight: 900; }

/* hojas */
#sheet-root { position: relative; z-index: 60; }
.sheet-bg { position: fixed; inset: 0; background: rgba(26, 26, 26, .45); animation: fade .2s; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: var(--fondo); border-radius: 22px 22px 0 0; max-height: 92vh; display: flex; flex-direction: column; animation: up .25s ease; box-shadow: 0 -10px 30px rgba(0, 0, 0, .15); }
@keyframes up { from { transform: translateY(40px); opacity: .5; } }
.sheet .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 8px; }
.sheet .bd { overflow-y: auto; padding: 6px 16px calc(24px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
.field { margin-top: 14px; }
.field > label, .lbl { display: block; font-weight: 800; color: var(--tinta); margin-bottom: 6px; font-size: 16px; }
.field label small { font-weight: 600; color: var(--etiqueta); }
.field > p { margin: -2px 0 6px; }
.in { display: flex; align-items: center; background: var(--blanco); border: 2px solid var(--linea); border-radius: 14px; padding: 0 14px; min-height: 54px; }
.in:focus-within { border-color: var(--verde); }
.in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 18px; font-weight: 700; padding: 12px 0; }
.in.big input { font-size: 28px; font-weight: 800; letter-spacing: .02em; }
.in .u { font-weight: 800; color: var(--etiqueta); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 22px; background: var(--blanco); border: 2px solid var(--linea); font-weight: 800; font-size: 15px; color: var(--cuerpo); }
.chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.search { display: flex; align-items: center; gap: 8px; background: var(--blanco); border: 2px solid var(--linea); border-radius: 14px; padding: 0 12px; margin-top: 14px; color: var(--etiqueta); }
.search:focus-within { border-color: var(--verde); }
.search input { flex: 1; border: 0; outline: 0; background: none; font-size: 17px; font-weight: 600; min-height: 52px; min-width: 0; }
.lst-t { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--etiqueta); margin: 16px 0 8px; }
.rrow, .prow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--blanco); border-radius: 14px; padding: 8px 10px; margin-bottom: 8px; box-shadow: var(--sh); }
.rrow b, .prow b { display: block; font-size: 15.5px; line-height: 1.25; }
.rrow small, .prow small { display: block; font-size: 13.5px; color: var(--etiqueta); font-weight: 700; }
.rrow > .ico { color: var(--etiqueta); }
.pick { display: flex; gap: 14px; align-items: center; background: var(--blanco); border-radius: 16px; padding: 10px; box-shadow: var(--sh); }
.pick b { display: block; font-size: 17px; line-height: 1.25; }
.pick small { display: block; font-size: 14px; color: var(--etiqueta); font-weight: 700; margin-top: 2px; }
.cn-live { font-weight: 800; color: var(--verde-osc); background: var(--verde-suave); border-radius: 12px; padding: 10px 14px; margin: 12px 0; font-size: 17px; }
.switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.switch input { width: 24px; height: 24px; accent-color: var(--verde-medio); flex: none; margin-top: 2px; }
.switch b { display: block; } .switch small { display: block; font-size: 14.5px; color: var(--cuerpo); margin-top: 4px; }
.times { display: flex; gap: 8px; flex-wrap: wrap; }
.times input { background: var(--blanco); border: 2px solid var(--linea); border-radius: 12px; padding: 10px; font-size: 17px; font-weight: 800; min-height: 48px; }
.sheet .row .field { flex: 1; min-width: 0; }

/* yo */
.kv { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--blanco); border-radius: var(--r); padding: 14px; margin-bottom: 10px; box-shadow: var(--sh); }
.kv .pic { width: 44px; height: 44px; border-radius: 12px; background: var(--verde-suave); color: var(--verde-osc); display: flex; align-items: center; justify-content: center; flex: none; }
.kv b { display: block; font-size: 16.5px; } .kv small { display: block; font-size: 14px; color: var(--etiqueta); font-weight: 600; line-height: 1.3; }
.kv > .ico:last-child { color: var(--etiqueta); }
.inst-c { margin-top: 14px; }
.inst-c .x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; }
.inst-c .row > .ico { color: var(--verde-medio); }
.inst-c b { padding-right: 30px; display: block; }

/* escáner (pestaña) */
.scan-card { text-align: center; }
.scan-anim { position: relative; width: 84px; height: 64px; margin: 4px auto 0; color: var(--verde-osc); display: flex; align-items: center; justify-content: center; }
.scan-anim.big { width: 120px; height: 90px; }
.scan-anim i { position: absolute; left: 4px; right: 4px; height: 3px; background: var(--rojo); border-radius: 3px; box-shadow: 0 0 8px rgba(217, 48, 37, .6); animation: laser 1.8s ease-in-out infinite alternate; }
@keyframes laser { from { top: 12%; } to { top: 84%; } }
.sc-man { margin-top: 14px; text-align: left; }
.sc-man label { display: flex; gap: 8px; align-items: center; font-weight: 800; color: var(--tinta); margin-bottom: 6px; font-size: 15.5px; }
.sc-man input { flex: 1; min-width: 0; background: var(--blanco); border: 2px solid var(--linea); border-radius: 14px; padding: 0 12px; min-height: 52px; font-size: 18px; font-weight: 800; letter-spacing: .04em; outline: 0; }
.sc-man input:focus { border-color: var(--verde); }
.plist { display: grid; gap: 0; }
.dot { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid rgba(0, 0, 0, .1); }
.dot.v { background: var(--verde); } .dot.a { background: var(--naranja); } .dot.r { background: var(--rojo); } .dot.nd { background: #D5DADF; }
.src-note { font-size: 13.5px; color: var(--etiqueta); margin-top: 18px; text-align: center; font-weight: 600; }

/* escáner (pantalla completa) */
.scan { position: fixed; inset: 0; z-index: 70; background: var(--fondo); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scan-in { max-width: 560px; margin: 0 auto; padding: 12px 16px calc(28px + var(--safe-b)); }
.sc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sc-top b { font-size: 17px; }
.sc-state { text-align: center; padding: 26px 8px 10px; }
.sc-state .code { letter-spacing: .1em; font-weight: 800; }
.scan.cam { background: #111; }
.sc-cam { position: relative; height: 62vh; min-height: 340px; margin: -12px -16px 0; background: #000; overflow: hidden; }
.sc-cam video { width: 100%; height: 100%; object-fit: cover; }
.sc-frame { position: absolute; left: 10%; right: 10%; top: 32%; height: 30%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.sc-frame .laser { position: absolute; left: 6%; right: 6%; height: 3px; background: var(--rojo); box-shadow: 0 0 10px var(--rojo); animation: laser 1.6s ease-in-out infinite alternate; }
.sc-x { position: absolute; top: 12px; right: 12px; }
.sc-hint { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: #fff; }
.sc-hint b { color: #fff; display: block; font-size: 18px; } .sc-hint small { font-size: 14px; opacity: .9; }
.scan.cam .sc-man label { color: #fff; } .scan.cam .err { color: #FFB4AE; }
.sc-prod h1 { font-size: 23px; margin-top: 10px; }
.sc-prod .b { font-weight: 700; margin-bottom: 12px; }
.sc-photo { width: 120px; height: 120px; margin: 0 auto; border-radius: 18px; background: var(--blanco); box-shadow: var(--sh); position: relative; display: flex; align-items: center; justify-content: center; color: #C5CED6; overflow: hidden; }
.sc-photo img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.sem { display: flex; gap: 14px; align-items: center; background: var(--blanco); border-radius: var(--r); padding: 14px; box-shadow: var(--sh); margin-bottom: 6px; }
.lights { display: flex; flex-direction: column; gap: 5px; background: #2B2B2B; padding: 7px; border-radius: 14px; flex: none; }
.lights i { width: 26px; height: 26px; border-radius: 50%; background: #4A4A4A; display: block; }
.sem-r .lights .r { background: var(--rojo); box-shadow: 0 0 12px var(--rojo); }
.sem-a .lights .a { background: var(--naranja); box-shadow: 0 0 12px var(--naranja); }
.sem-v .lights .v { background: #3FAE2A; box-shadow: 0 0 12px #3FAE2A; }
.sem small { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--etiqueta); }
.sem b { display: block; font-size: 30px; font-weight: 900; line-height: 1.05; }
.sem-v b { color: #2E7D1F; } .sem-a b { color: var(--naranja-osc); } .sem-r b { color: var(--rojo); }
@media (prefers-color-scheme: dark) { .sem-v b { color: #7BD66A; } .sem-a b { color: #FFB84D; } .btn-l { border-color: #3A463F; } .sheet-bg { background: rgba(0, 0, 0, .6); } }
.sem span { display: block; font-weight: 700; font-size: 15px; margin-top: 2px; }
.sc-kc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-kc > div { background: #2D3F05; color: #fff; border-radius: 16px; padding: 12px 14px; }
.sc-kc > div.o { background: var(--naranja); color: #231500; }
.sc-kc > div.na { background: var(--blanco); color: var(--etiqueta); box-shadow: var(--sh); }
.sc-kc b { color: inherit; font-size: 28px; font-weight: 900; display: block; line-height: 1.1; }
.sc-kc small { font-size: 15px; }
.sc-kc span { font-size: 13.5px; font-weight: 700; display: block; line-height: 1.25; margin-top: 3px; }
.nutri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.nutri > div { background: var(--blanco); border-radius: 12px; padding: 10px 6px; text-align: center; box-shadow: var(--sh); }
.nutri b { display: block; font-size: 18px; } .nutri small { font-size: 13px; } .nutri span { font-size: 13px; font-weight: 700; color: var(--etiqueta); line-height: 1.15; display: block; }
.ordc { background: var(--verde-niebla); box-shadow: none; border: 1.5px solid var(--verde-suave); }
.osteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.osteps span { background: var(--blanco); border-radius: 12px; padding: 8px 6px; text-align: center; font-weight: 800; font-size: 13.5px; color: var(--etiqueta); border: 2px solid transparent; line-height: 1.2; }
.osteps i { display: flex; width: 26px; height: 26px; border-radius: 50%; background: var(--linea); color: var(--etiqueta); align-items: center; justify-content: center; margin: 0 auto 4px; font-style: normal; }
.osteps .on { border-color: var(--verde); color: var(--verde-osc); }
.osteps .on i { background: var(--verde); color: #fff; }
.sc-acts { display: grid; gap: 10px; margin-top: 18px; justify-items: center; }
.gram-in { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 16px 0; }
.gram-in input { width: 110px; text-align: center; font-size: 26px; font-weight: 900; border: 2px solid var(--linea); border-radius: 14px; min-height: 54px; background: var(--blanco); }

/* resumen para el médico */
.paper { --tinta: #1A1A1A; --cuerpo: #3A3A3A; --etiqueta: #5E5E5E; --blanco: #FFFFFF; --linea: #E3E8EC; --verde-osc: #2D3F05; --verde-niebla: #F3FAF0; --verde-suave: #EAF5E6; --verde: #6FB55C; --fondo: #F6F9FB; background: #fff; border-radius: 6px; padding: 16px 14px; margin-top: 18px; box-shadow: var(--sh); font-size: 14px; color: var(--tinta); }
.ph-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; border-bottom: 3px solid var(--verde); padding-bottom: 8px; }
.ph-hd b { font-size: 18px; display: block; } .ph-hd span { font-size: 13px; color: var(--etiqueta); font-weight: 700; }
.ph-hd .pn { font-weight: 800; font-size: 15px; text-align: right; }
.paper h3 { font-size: 15px; margin: 16px 0 6px; }
.tbl-w { overflow-x: auto; margin-top: 12px; }
.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th, .tbl td { border: 1px solid #D3DAE0; padding: 5px 4px; text-align: center; font-weight: 700; }
.tbl th { background: var(--verde-niebla); font-size: 13px; }
.tbl .dl { text-transform: capitalize; white-space: nowrap; }
.tbl .al { text-align: left; font-weight: 600; }
.tbl.sm td { font-size: 13px; }
.leg { font-size: 13px; color: var(--etiqueta); margin-top: 4px; }
.paper .stats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.paper .stat { box-shadow: none; border: 1px solid #D3DAE0; padding: 8px; }
.paper .stat b { font-size: 18px; }
.chart-print { margin-top: 10px; max-width: 420px; }
.notes p { font-size: 13px; margin-bottom: 4px; line-height: 1.35; }
.pie { font-size: 13px; color: var(--etiqueta); border-top: 1px solid #D3DAE0; padding-top: 8px; margin-top: 14px; }

/* momentos del día: cielo animado (SVG liviano: solo transform y opacity) */
.sky { position: relative; border-radius: 26px; overflow: hidden; margin: 2px 0 12px; min-height: 150px; display: flex; align-items: flex-end;
  --ink: #1D2B36; --ink2: #3C4A55; background: linear-gradient(180deg, var(--s1), var(--s2)); color: var(--ink); box-shadow: var(--sh); }
.sky-new { animation: skyin 1.4s ease-out; }
@keyframes skyin { from { opacity: .2; filter: saturate(.6); } to { opacity: 1; filter: none; } }
.sky-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px; width: 100%; }
.sky-in .grow { text-shadow: 0 1px 8px var(--s2); }
.sky-in h1 { font-size: 26px; color: var(--ink); }
.sky-in p { color: var(--ink2); font-weight: 700; font-size: 15.5px; }
.sky-in p::first-letter { text-transform: uppercase; }
.sky .brand { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .9); flex: none; }
.sky .sun { fill: #FECA01; }
.sky .rays rect { fill: #FFB733; opacity: .75; }
.sky .rays { animation: spin 80s linear infinite; }
.sky .sun-rise { animation: rise 2.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { transform: translateY(40px); } to { transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.sky .hill1 { fill: #8CC274; } .sky .hill2 { fill: #6FB55C; opacity: .85; }
.sky .cloud { fill: #fff; opacity: .9; }
.sky .cloud.c1 { animation: drift 60s linear infinite alternate; } .sky .cloud.c2 { animation: drift 45s linear infinite alternate-reverse; opacity: .75; }
@keyframes drift { from { transform: translateX(-30px); } to { transform: translateX(60px); } }
.sky .sun-set { fill: #FFA000; animation: setting 30s ease-in-out infinite alternate; }
@keyframes setting { to { transform: translateY(10px); } }
.sky .moon circle { fill: #FFF3C4; }
.sky .star { fill: #fff; animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.sky-mattina { --s1: #FFE3B3; --s2: #FFF6E6; }
.sky-mezzogiorno { --s1: #BFE3FF; --s2: #EEF8FF; }
.sky-pomeriggio { --s1: #FFCB8A; --s2: #FFEBD0; }
.sky-sera { --s1: #1B2A4A; --s2: #31457A; --ink: #FFFFFF; --ink2: #D9E2F2; }
@media (prefers-color-scheme: dark) {
  .sky-mattina { --s1: #5A4A7A; --s2: #8C5E6E; --ink: #fff; --ink2: #F3E6EC; }
  .sky-mezzogiorno { --s1: #24507A; --s2: #3A6E98; --ink: #fff; --ink2: #E2EEF8; }
  .sky-pomeriggio { --s1: #6A3F5E; --s2: #9A5A3E; --ink: #fff; --ink2: #F7E6DA; }
  .sky-sera { --s1: #0E1730; --s2: #1B2A4A; }
  .sky .hill1 { fill: #3F6B33; } .sky .hill2 { fill: #2F5426; } .sky .cloud { opacity: .45; }
}
.daynav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.daynav b { font-size: 16px; }
.daynav b::first-letter { text-transform: uppercase; }
/* la comida del momento */
.hero { background: linear-gradient(180deg, var(--acc-s), var(--blanco) 70%); border: 2px solid var(--acc-s); border-radius: 22px; padding: 16px; margin-bottom: 14px; box-shadow: var(--sh); }
.hero-t { display: flex; align-items: center; gap: 8px; font-size: 21px; color: var(--acc-t); margin-bottom: 4px; }
.hero > p { font-weight: 600; }
.hero.done .ent { box-shadow: none; border: 1.5px solid var(--linea); }
.hero.night { --acc-s: #E4E8F6; }
@media (prefers-color-scheme: dark) { .hero.night { --acc-s: #24302A; } }
.done-l { display: flex; gap: 8px; align-items: center; font-weight: 800; color: var(--verde-osc); }
.ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.idea { background: var(--blanco); border-radius: 14px; overflow: hidden; text-align: left; box-shadow: var(--sh); border: 1.5px solid var(--linea); transition: transform .15s; display: flex; flex-direction: column; }
.idea:active { transform: scale(.97); }
.idea b { font-size: 13px; line-height: 1.2; padding: 6px 8px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idea small { font-size: 13px; font-weight: 700; color: var(--etiqueta); padding: 2px 8px 8px; margin-top: auto; }
.ph.tile { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; }
.ph.xl { width: 92px; height: 92px; border-radius: 16px; }
.ent.big { flex-direction: column; }
.ent.big .ph.xl { width: 100%; height: 170px; border-radius: 14px; }
.ent.big b { font-size: 18px; }
/* novedad: el escáner */
.nov { border: 2px solid var(--amarillo); background: linear-gradient(180deg, var(--amarillo-suave), var(--blanco) 60%); margin-bottom: 14px; }
.nov-x { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; }
.nov h3 { font-size: 18px; }
.badge-new { display: inline-flex; align-items: center; gap: 4px; background: #D93025; color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; line-height: 1.2; }
.badge-new.big { font-size: 13.5px; padding: 4px 10px; background: var(--naranja); color: #231500; }
.rel { position: relative; }
.btn .badge-new { position: absolute; top: -8px; right: -4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-8deg) scale(1.08); } }
.nav-dot { position: absolute; top: 7px; left: calc(50% + 10px); width: 10px; height: 10px; border-radius: 50%; background: #D93025; border: 2px solid var(--blanco); }
/* paso a paso en las hojas */
.step { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--etiqueta); margin-bottom: 4px; }
.step i { width: 22px; height: 6px; border-radius: 6px; background: var(--linea); }
.step i.on { background: var(--acc); }
/* toques: todo lo tocable responde */
.chip, .rrow, .prow, .kv, .dish, .gv, .ent-b, .ibtn, .seg button, .nav a { transition: transform .12s ease, background-color .2s, border-color .2s; }
.chip:active, .rrow:active, .prow:active, .kv:active, .dish:active, .gv:active, .ibtn:active, .seg button:active { transform: scale(.97); }
.ent-b:active { opacity: .7; }
@media (hover: hover) { .rrow:hover, .prow:hover, .kv:hover, .dish:hover, .idea:hover { border-color: var(--verde); } .chip:hover { border-color: var(--acc); } }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.pop { animation: pop .55s cubic-bezier(.2, 1.4, .4, 1) both; position: relative; }
@keyframes pop { from { transform: scale(.94); box-shadow: 0 0 0 6px var(--acc-s); } to { transform: none; } }
.burst { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; animation: burst .7s ease-out forwards; z-index: 2; }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--x), 105vh) rotate(540deg); } }

/* navegación inferior */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--nav-bg); border-top: 1px solid var(--linea); padding-bottom: var(--safe-b); backdrop-filter: blur(8px); }
.nav-in { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 2px 8px; font-size: 13px; font-weight: 800; color: var(--etiqueta); text-decoration: none; min-height: 60px; text-align: center; line-height: 1.1; }
.nav a { position: relative; }
.nav a.on { color: var(--acc-t); }
.nav a.on .ico { background: var(--acc-s); border-radius: 12px; padding: 3px 10px; width: 46px; height: 30px; }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(84px + var(--safe-b)); max-width: 520px; margin: 0 auto; background: var(--toast); color: #fff; border-radius: 14px; padding: 13px 16px; display: flex; gap: 10px; align-items: center; font-weight: 700; z-index: 90; transform: translateY(20px); opacity: 0; pointer-events: none; transition: .25s; }
.toast.on { transform: none; opacity: 1; pointer-events: auto; }
.toast span { flex: 1; }
.toast-b { color: var(--amarillo); font-weight: 900; padding: 4px 6px; text-decoration: underline; }

@media (max-width: 359px) {
  body { font-size: 16px; }
  .steps3 li { font-size: 13px; }
  .nav a { font-size: 12.5px; }
  .nutri { grid-template-columns: repeat(2, 1fr); }
  .acts .row { flex-direction: column; align-items: stretch; }
}
@media (min-width: 760px) { #app { padding-top: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 11pt; }
  .nav, .toast, #sheet-root, .noprint, .aviso-l { display: none !important; }
  #app { padding: 0; max-width: none; }
  .paper { box-shadow: none; padding: 0; margin: 0; border-radius: 0; }
  .tbl-w { overflow: visible; }
  .tbl th, .tbl td { padding: 4px 3px; }
  .chart .lab { display: none; }
}

/* madrugada (0-5 h): mismo cielo y acento de la noche */
body[data-mom="notte"] { --acc: #26346B; --acc-s: #E4E8F6; --acc-t: #26346B; }
@media (prefers-color-scheme: dark) { body[data-mom="notte"] { --acc-s: #24302A; --acc-t: #AFC0FF; } }
.sky-notte { --s1: #0E1730; --s2: #22305A; --ink: #FFFFFF; --ink2: #D9E2F2; }
/* almacenamiento lleno: aviso fijo arriba */
.store-ko { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--rojo); background: var(--rojo-suave); margin-bottom: 14px; }
.store-ko > .ico { color: var(--rojo); }
.sem .porz { font-weight: 800; color: var(--tinta); }
.src-note a { display: inline-block; padding: 12px 4px; }
@media print { .paper h3 { break-after: avoid; page-break-after: avoid; } .tbl-w, .notes p { break-inside: avoid; } }