/* Yema design system, components (design/ds/components/bundle.css), copied by landing/build.mjs. */

body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.ym-stage { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; padding: var(--space-5); }
.ym-col { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); max-width: 420px; }
.ym-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ym-btn:focus-visible, .ym-chip:focus-visible, .ym-note-action:focus-visible, .ym-ask-icon:focus-visible, .ym-ask-send:focus-visible,
.ym-est:focus-visible, .ym-meal-empty:focus-visible, .ym-tab:focus-visible, .ym-tab-cam:focus-visible, .ym-source:focus-visible {
  outline: 2px solid transparent; box-shadow: var(--focus-ring);
}

/* Avatar y «pensando» */
.ym-avatar { display: inline-flex; flex: none; line-height: 0; }
.ym-avatar svg { display: block; width: 100%; height: 100%; }
.ym-dots { display: inline-flex; gap: 5px; align-items: center; height: 24px; }
.ym-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--yolk-ink); animation: ym-bounce 1.2s infinite ease-in-out; }
.ym-dots i:nth-child(2) { animation-delay: .15s; }
.ym-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ym-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .55; } 40% { transform: translateY(-5px); opacity: 1; } }

/* Botón */
.ym-btn { box-sizing: border-box; text-decoration: none; font: inherit; font-size: 16px; line-height: 20px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-full); cursor: pointer; transition: transform .12s ease, background-color .15s ease; }
.ym-btn-lg { height: 56px; font-size: 17px; padding: 0 var(--space-8); }
.ym-btn-block { display: flex; width: 100%; }
.ym-btn-primary { background: var(--berry); color: var(--on-berry); }
.ym-btn-soft { background: var(--berry-soft); color: var(--berry); }
.ym-btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.ym-btn-water { background: var(--water-soft); color: var(--water); }
.ym-btn:active { transform: scale(.97); }
.ym-btn:disabled { opacity: .45; cursor: default; transform: none; }
.ym-btn.is-loading { opacity: 1; cursor: progress; }
.ym-btn-sm { height: 36px; font-size: 14px; padding: 0 var(--space-4); }
.ym-spin { width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: ym-rot .8s linear infinite; }
@keyframes ym-rot { to { transform: rotate(360deg); } }

/* Chip */
.ym-chip { font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-full); border: 1.5px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; white-space: nowrap; flex: none; }
.ym-chip.is-selected { background: var(--ink); border-color: var(--ink); color: var(--surface-raised); }
.ym-chip-yema { background: var(--yolk-soft); border-color: transparent; color: var(--ink); padding-left: 6px; }

/* Nota de Yema */
.ym-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--yolk-soft); color: var(--ink); max-width: 420px; box-sizing: border-box; }
.ym-note-body { min-width: 0; flex: 1; }
.ym-note-who { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--yolk-ink); }
.ym-note-text { font-size: 15px; line-height: 22px; margin-top: 2px; }
.ym-note-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.ym-note-action { font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-full); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; }

/* Barra de Yema */
.ym-ask { display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; min-width: 0; }
.ym-ask-sugs { display: flex; gap: var(--space-2); overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.ym-ask-bar { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 6px 0 10px; border-radius: var(--radius-full); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.ym-ask-bar:focus-within { box-shadow: var(--focus-ring), var(--shadow-lg); }
.ym-ask-input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.ym-ask-input::placeholder { color: var(--ink-muted); }
.ym-ask-icon, .ym-ask-send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.ym-ask-icon { background: transparent; color: var(--ink-muted); }
.ym-ask-send { background: var(--berry); color: var(--on-berry); }

/* Chat */
.ym-msg { display: flex; gap: var(--space-2); align-items: flex-end; max-width: 420px; }
.ym-msg-user { justify-content: flex-end; margin-left: auto; }
.ym-msg-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 85%; }
.ym-bubble { padding: 12px 16px; border-radius: 22px; font-size: 15px; line-height: 22px; }
.ym-msg-yema .ym-bubble { background: var(--yolk-soft); color: var(--ink); border-bottom-left-radius: 8px; }
.ym-msg-user .ym-bubble { background: var(--ink); color: var(--surface-raised); border-bottom-right-radius: 8px; }
.ym-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ym-source { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.ym-source-title { font-size: 14px; line-height: 20px; font-weight: 600; }
/* Google's attribution (D25): Roboto or the phone's sans, 400, 12 px, one line; Google's gray on light and white on dark, not the system's colors. */
[data-theme="light"], :root { --maps-attr: #5e5e5e; }
[data-theme="dark"] { --maps-attr: #ffffff; }
.ym-source-by, .ym-maps-attr { font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--maps-attr); }
.ym-maps-attr { display: block; }

/* Estimado */
.ym-est { font: inherit; display: inline-flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; border-radius: 6px; }
.ym-est-val { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-decoration: underline dotted var(--yolk-ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ym-est-range { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); margin-top: 2px; }

/* Campo */
.ym-field { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.ym-field-label { font-size: 14px; line-height: 20px; font-weight: 600; }
.ym-field-box { display: flex; align-items: center; gap: var(--space-2); height: 52px; padding: 0 14px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.ym-field.is-yema .ym-field-box { background: var(--yolk-soft); box-shadow: inset 0 0 0 1.5px var(--yolk-ink); }
.ym-field.is-error .ym-field-box { box-shadow: inset 0 0 0 2px var(--berry); }
.ym-field-box:focus-within { box-shadow: inset 0 0 0 2px var(--berry); }
.ym-field-input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); outline: none; font-variant-numeric: tabular-nums; }
.ym-field-suffix { font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.ym-field-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); display: flex; gap: 6px; align-items: center; }
.ym-field-hint-yema { color: var(--yolk-ink); font-weight: 600; }
.ym-field-error { color: var(--berry); font-weight: 600; }

/* Anillo de calorías */
.ym-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ym-ring svg { position: absolute; inset: 0; }
.ym-ring-track { stroke: var(--surface-sunken); }
.ym-ring-fill { stroke: var(--kcal); transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
.ym-ring-yolk { fill: var(--yolk); stroke: var(--surface-raised); stroke-width: 3; }
.ym-ring-center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ym-ring-num { font-family: var(--font-sans); font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.ym-ring-cap { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.ym-ring-sub { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Colores de datos */
.ym-m-protein { --m: var(--protein); --m-deep: var(--protein-deep); }
.ym-m-carbs { --m: var(--carbs); }
.ym-m-fat { --m: var(--fat); }
.ym-m-fiber { --m: var(--fiber); --m-deep: var(--fiber-deep); }
.ym-m-kcal { --m: var(--kcal); --m-deep: var(--kcal-deep); }
/* The app's `dot="berry"` (ui/ListSection.tsx): a figure in the brand's color (Salud's blood pressure). */
.ym-m-berry { --m: var(--berry); }
/* DayRings: Apple's rings for the day; each track is its own color, dimmed. */
.ym-rings { display: flex; flex-direction: column; gap: var(--space-3); }
.ym-rings-row { display: flex; align-items: center; gap: var(--space-4); }
.ym-rings-art { flex: none; display: block; }
.ym-rk { color: var(--m); }
.ym-rings-track { stroke: currentColor; opacity: .16; }
.ym-rings-fill { stroke: currentColor; transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
/* Over the goal (Duván, 18 October 2026): the second lap in the ring's deeper tone, as Apple's rings; from 200 % the
   whole second lap (`deep`) under the tip. The tip's shadow (`tip`) goes ahead of it, under the lap, never in red. */
.ym-rings-deep, .ym-rings-fill.ym-rings-lap { stroke: var(--m-deep); }
.ym-rings-tip { stroke: #000000; transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
.ym-rings-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.ym-rings-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ym-rings-name { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.ym-rings-val { padding-left: 16px; font-size: 15px; line-height: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ym-rings-left { padding-left: 16px; font-size: 12px; line-height: 15px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
/* Protein and fiber reached («Meta lista», and over it «Meta lista · +20 g»): a check in the ring's color. */
.ym-rings-left.is-done { display: inline-flex; align-items: center; gap: 3px; }
.ym-rings-ok { flex: none; color: var(--m); stroke-width: 3; }

.ym-rings-extras { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ym-rings-fill, .ym-rings-tip { transition: none; } }
.ym-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--m); flex: none; }

/* Barra de macro */
.ym-macro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ym-macro-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.ym-macro-name { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 600; }
.ym-macro-val { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ym-macro-track { height: 10px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.ym-macro-fill { display: block; height: 100%; border-radius: inherit; background: var(--m); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.ym-macro-left { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }

/* Agua */
.ym-water { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); max-width: 390px; box-sizing: border-box; }
.ym-water-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
/* A section's title like «Comidas» (SectionHeader): one look for every section of Tu día (Hallazgos U17). */
.ym-water-title { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: 18px; line-height: 24px; }
.ym-water-val { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--water); font-variant-numeric: tabular-nums; }
.ym-water-glasses { display: flex; flex-wrap: wrap; gap: 4px; }
.ym-glass { width: 34px; height: 34px; display: grid; place-items: center; }
.ym-glass-line { fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-linejoin: round; }
.ym-glass.is-full .ym-glass-line { stroke: var(--water); }
.ym-glass-water { fill: var(--water); }
.ym-water .ym-btn { align-self: flex-start; }

/* Tarjeta de comida */
.ym-meal { display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); width: 100%; max-width: 390px; box-sizing: border-box; border: 0; font: inherit; color: var(--ink); text-align: left; }
.ym-meal-empty { background: transparent; box-shadow: none; border: 2px dashed var(--line-strong); cursor: pointer; text-decoration: none; color: inherit; font: inherit; text-align: left; }
.ym-meal.is-action { border: 0; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.ym-meal.is-action:active { transform: scale(.99); }
.ym-meal-tile { width: 80px; height: 80px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; overflow: hidden; color: var(--ink); }
.ym-meal-tile img { width: 100%; height: 100%; object-fit: cover; }
.ym-tile-breakfast { background: var(--meal-breakfast); }
.ym-tile-lunch { background: var(--meal-lunch); }
.ym-tile-dinner { background: var(--meal-dinner); }
.ym-tile-snack { background: var(--meal-snack); }
.ym-meal-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; flex: 1; }
.ym-meal-kind { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.ym-meal-title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; }
.ym-meal-hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ym-meal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); }
.ym-meal-macros { display: flex; gap: 10px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ym-mini { display: inline-flex; align-items: center; gap: 4px; }
.ym-mini .ym-dot { width: 8px; height: 8px; }
.ym-plate { fill: var(--surface-raised); }
.ym-plate-rim { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ym-plate-leaf { fill: var(--leaf); }
.ym-plate-white { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.ym-plate-yolk { fill: var(--yolk); }

/* Pestañas */
.ym-tabs { display: flex; align-items: center; justify-content: space-around; height: 76px; padding: 8px 4px 10px; background: var(--surface-raised); border-top: 1px solid var(--line); max-width: 420px; box-sizing: border-box; }
.ym-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 60px; text-decoration: none; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 600; border-radius: 12px; padding: 2px 4px; }
.ym-tab.is-on { color: var(--berry); }
.ym-tab.is-on .ym-avatar { box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--berry); border-radius: 50%; }
.ym-tab-cam { width: 62px; height: 62px; flex: none; margin-top: -30px; border: 0; border-radius: 50%; background: var(--berry); color: var(--on-berry); display: grid; place-items: center; box-shadow: var(--shadow-lg); cursor: pointer; }

/* Encabezado de pantalla */
.ym-head { display: flex; flex-direction: column; gap: var(--space-2); }
.ym-head-row { display: flex; align-items: flex-start; gap: var(--space-3); }
.ym-head-backrow { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 0 -6px; }
.ym-head-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px 0 0; border: 0; background: none; font: inherit; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--link); text-decoration: none; cursor: pointer; }
.ym-head-back:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: 12px; }
.ym-head-md .ym-head-title { font-size: 28px; line-height: 34px; }
.ym-head-sm .ym-head-title { font-size: 24px; line-height: 30px; }
.ym-head.is-center { text-align: center; }
.ym-head.is-center .ym-head-row { justify-content: center; }
.ym-head-text { flex: 1; min-width: 0; }
.ym-head-kicker { margin: 0 0 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.ym-head-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 40px; letter-spacing: -.01em; text-wrap: balance; }
.ym-head-sub { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.ym-head-trail { display: flex; gap: var(--space-2); align-items: center; padding-top: 6px; }

/* Tarjeta */
.ym-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); box-sizing: border-box; min-width: 0; }
.ym-card-yema { background: var(--yolk-soft); box-shadow: none; }
.ym-card-learn { background: var(--leaf-soft); box-shadow: none; }
.ym-card-hero { border-radius: var(--radius-xl); padding: var(--space-5); }
.ym-card-head { display: flex; align-items: center; gap: var(--space-2); }
.ym-card-titles { flex: 1; min-width: 0; }
.ym-card-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.ym-card-sub { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ym-card-action, .ym-link { font: inherit; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--link); background: none; border: 0; padding: 4px 0; cursor: pointer; }

/* Lista */
.ym-list { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); overflow: hidden; }
.ym-row { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: 10px var(--space-4); font: inherit; color: var(--ink); background: none; border: 0; text-align: left; width: 100%; box-sizing: border-box; }
.ym-row + .ym-row { box-shadow: inset 0 1px 0 var(--line); }
.ym-row.is-action { cursor: pointer; }
.ym-row-lead { flex: none; display: flex; }
.ym-row-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); }
.ym-row-img { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; }
.ym-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ym-row-title { font-size: 16px; line-height: 22px; font-weight: 600; }
.ym-row-sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ym-row-trail { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ym-row-chev { color: var(--ink-muted); flex: none; }
.ym-tint-yolk { background: var(--yolk-soft); color: var(--yolk-ink); }
.ym-tint-berry { background: var(--berry-soft); color: var(--berry); }
.ym-tint-leaf { background: var(--leaf-soft); color: var(--leaf); }
.ym-tint-water { background: var(--water-soft); color: var(--water); }
.ym-tint-protein { background: var(--protein-soft); color: var(--ink); }
.ym-tint-carbs { background: var(--carbs-soft); color: var(--ink); }
.ym-tint-fat { background: var(--fat-soft); color: var(--ink); }
.ym-tint-sunken { background: var(--surface-sunken); color: var(--ink); }
.ym-tint-place { background: var(--place-soft); color: var(--place); }
.ym-tint-breakfast { background: var(--meal-breakfast); color: var(--ink); }
.ym-tint-lunch { background: var(--meal-lunch); color: var(--ink); }
.ym-tint-dinner { background: var(--meal-dinner); color: var(--ink); }
.ym-tint-snack { background: var(--meal-snack); color: var(--ink); }
.ym-mod { flex: none; }
.ym-head-kicker.has-mod { display: flex; align-items: center; gap: 6px; }
.ym-card-head .ym-mod { margin-right: 2px; }

/* Interruptor */
.ym-switch { width: 52px; height: 32px; flex: none; border-radius: var(--radius-full); border: 0; padding: 3px; background: var(--line-strong); cursor: pointer; display: flex; transition: background-color .2s ease; }
.ym-switch-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-raised); box-shadow: var(--shadow-sm); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.ym-switch.is-on { background: var(--berry); }
.ym-switch.is-on .ym-switch-thumb { transform: translateX(20px); background: var(--on-berry); }
.ym-switch:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Skeleton */
.ym-sk { display: block; position: relative; overflow: hidden; background: var(--surface-sunken); border-radius: 8px; }
.ym-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--shine), transparent); opacity: .8; animation: ym-shimmer 1.4s ease-in-out infinite; }
@keyframes ym-shimmer { to { transform: translateX(100%); } }
.ym-sk-text { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.ym-sk-line { height: 12px; border-radius: 6px; }
.ym-sk-ring { border-radius: 50%; background: none; box-shadow: inset 0 0 0 16px var(--surface-sunken); }
.ym-sk-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; }
.ym-sk-thumb { width: 64px; height: 64px; border-radius: var(--radius-md); flex: none; }
.ym-sk-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.ym-sk-block { height: 96px; border-radius: var(--radius-md); }

/* Yema cargando */
.ym-loader { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.ym-loader-face { position: relative; display: grid; place-items: center; width: 84px; height: 84px; }
.ym-loader-halo { position: absolute; inset: 0; border-radius: 50%; background: var(--yolk-soft); animation: ym-halo 1.6s ease-in-out infinite; }
@keyframes ym-halo { 0%, 100% { transform: scale(.82); opacity: .9; } 50% { transform: scale(1); opacity: .55; } }
.ym-loader-face .ym-avatar { position: relative; }
.ym-loader-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ym-loader-steps li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.ym-loader-steps li.is-now { color: var(--ink); }
.ym-loader-steps li.is-done { color: var(--ink); }
.ym-loader-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--line-strong); color: var(--on-berry); }
.ym-loader-steps li.is-done .ym-loader-mark { background: var(--berry); box-shadow: none; }
.ym-loader-steps li.is-now .ym-loader-mark { box-shadow: inset 0 0 0 2px var(--yolk-ink); border-top-color: transparent; animation: ym-rot 1s linear infinite; background: conic-gradient(var(--yolk-ink) 0 25%, transparent 25%); -webkit-mask: radial-gradient(circle, transparent 7px, #000 8px); mask: radial-gradient(circle, transparent 7px, #000 8px); }

/* Foto */
.ym-scan { position: relative; margin: 0; width: 100%; aspect-ratio: 1 / 1; max-width: 100%; border-radius: var(--radius-xl); overflow: hidden; background: var(--meal-lunch); }
.ym-scan img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ym-scan-art { width: 100%; height: 100%; display: grid; place-items: center; }
.ym-scan-corners i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--surface-raised); }
.ym-scan-corners i:nth-child(1) { top: 16px; left: 16px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.ym-scan-corners i:nth-child(2) { top: 16px; right: 16px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.ym-scan-corners i:nth-child(3) { bottom: 16px; left: 16px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.ym-scan-corners i:nth-child(4) { bottom: 16px; right: 16px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.ym-scan-line { position: absolute; left: 8%; right: 8%; top: 10%; height: 3px; border-radius: 3px; background: var(--berry); box-shadow: 0 0 0 6px color-mix(in srgb, var(--berry) 22%, transparent); animation: ym-scanline 1.8s ease-in-out infinite alternate; }
@keyframes ym-scanline { to { top: 88%; } }
.ym-scan-tag { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: var(--radius-full); background: var(--surface-raised); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 700; box-shadow: var(--shadow-lg); white-space: nowrap; animation: ym-pop .45s cubic-bezier(.2, .9, .3, 1.3) both; }
.ym-scan-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 3px var(--berry-soft); }
@keyframes ym-pop { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.ym-plate-rice { fill: var(--surface-raised); stroke: var(--line); stroke-width: 1; }

/* Item detectado */
.ym-det { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.ym-det + .ym-det { box-shadow: inset 0 1px 0 var(--line); }
.ym-det-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ym-det-name { font-size: 16px; line-height: 22px; font-weight: 700; }
.ym-det-change { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
.ym-stepper { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: var(--surface-sunken); }
.ym-stepper button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-raised); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.ym-stepper button:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.ym-stepper-val { min-width: 58px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Gráficas */
.ym-chart { margin: 0; min-width: 0; }
.ym-chart svg { display: block; overflow: visible; }
.ym-grid { stroke: var(--line); stroke-width: 1; }
.ym-axis { fill: var(--ink-muted); font-size: 11px; font-weight: 500; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.ym-axis.is-now { fill: var(--ink); font-weight: 700; }
.ym-bar { fill: var(--line-strong); transition: fill .15s ease; }
.ym-bar-now { fill: var(--kcal); }
.ym-goal { stroke: var(--ink-muted); stroke-width: 1; }
.ym-goal-label { fill: var(--ink-muted); font-size: 11px; font-weight: 600; font-family: var(--font-sans); }
.ym-tip rect { fill: var(--ink); }
.ym-tip text { fill: var(--surface-raised); font-size: 12px; font-weight: 600; font-family: var(--font-sans); }
.ym-hit { fill: transparent; cursor: pointer; outline: none; }
.ym-hit:focus-visible { stroke: var(--berry); stroke-width: 2; }
.ym-trend { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ym-weigh { fill: var(--ink-muted); stroke: var(--surface-raised); stroke-width: 2; }
.ym-trend-end { fill: var(--ink); stroke: var(--surface-raised); stroke-width: 2; }
.ym-end-label { fill: var(--ink); font-size: 13px; font-weight: 700; font-family: var(--font-sans); }
.ym-cross { stroke: var(--line-strong); stroke-width: 1; }
.ym-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.ym-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ym-key-line { width: 16px; height: 2px; border-radius: 2px; background: var(--ink); }
.ym-key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); }

/* Dona */
.ym-donut { display: flex; align-items: center; gap: var(--space-5); margin: 0; flex-wrap: wrap; }
.ym-donut-ring { position: relative; display: grid; place-items: center; flex: none; }
.ym-donut-ring svg { position: absolute; inset: 0; }
.ym-seg { stroke: var(--m); transition: opacity .15s ease; }
.ym-seg.is-dim { opacity: .3; }
.ym-donut-center { position: relative; display: flex; flex-direction: column; align-items: center; }
.ym-donut-num { font-size: 24px; line-height: 28px; font-weight: 700; }
.ym-donut-cap { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.ym-donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 150px; }
.ym-donut-legend li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; }
.ym-donut-legend .ym-dot { margin-top: 5px; }
.ym-donut-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ym-donut-name { font-weight: 600; white-space: nowrap; }
.ym-donut-val { color: var(--ink-muted); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ym-donut-legend li.is-on .ym-donut-val { color: var(--ink); }

/* Mapa */
.ym-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); }
.ym-map svg { display: block; }
.ym-map-land { fill: var(--surface-sunken); }
.ym-map-park { fill: var(--leaf-soft); }
.ym-map-river { fill: none; stroke: var(--water-soft); stroke-width: 22; stroke-linecap: round; }
.ym-map-road { fill: none; stroke: var(--surface-raised); stroke-width: 12; }
.ym-map-street { fill: none; stroke: var(--surface-raised); stroke-width: 5; }
.ym-map-me { fill: var(--water); stroke: var(--surface-raised); stroke-width: 3; }
.ym-map-halo { fill: var(--water); opacity: .18; transform-box: fill-box; transform-origin: center; animation: ym-pulse 2s ease-out infinite; }
@keyframes ym-pulse { 0% { transform: scale(.5); opacity: .35; } 100% { transform: scale(1.6); opacity: 0; } }
.ym-pin { cursor: pointer; outline: none; }
.ym-pin path { fill: var(--berry); stroke: var(--surface-raised); stroke-width: 2; }
.ym-pin text { fill: var(--on-berry); font-size: 12px; font-weight: 700; font-family: var(--font-sans); }
.ym-pin:not(.is-on) path { fill: var(--ink); }
.ym-pin:not(.is-on) text { fill: var(--surface-raised); }
.ym-pin:focus-visible path { stroke: var(--berry); stroke-width: 3; }
.ym-map-bubble rect { fill: var(--surface-raised); filter: drop-shadow(0 4px 8px rgba(42, 27, 45, .18)); }
.ym-map-bubble text { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font-sans); }
.ym-map-attr { position: absolute; left: 10px; bottom: 8px; font-family: Roboto, Arial, sans-serif; font-size: 11px; line-height: 14px; color: var(--ink); background: var(--surface-raised); padding: 2px 6px; border-radius: 4px; }
/* The real map (18 de octubre): the Google Maps SDK with Yema's style — the land and the blocks in the surfaces, the avenues
   white, the water and the parks soft, no other business on it — and the Google logo, which the SDK draws. */
.ym-map.is-real .ym-map-land { fill: var(--surface-sunken); }
.ym-map-block { fill: var(--surface); }
.ym-map-water { fill: var(--water-soft); }
.ym-map-avenue { fill: none; stroke: var(--surface-raised); stroke-width: 9; }
.ym-map-lane { fill: none; stroke: var(--surface-raised); stroke-width: 4; }
.ym-pin-km rect { fill: var(--surface-raised); stroke: none; filter: drop-shadow(0 1px 2px rgba(42, 27, 45, .22)); }
.ym-pin .ym-pin-km text, .ym-pin:not(.is-on) .ym-pin-km text { fill: var(--ink); font-size: 11px; font-weight: 700; }
.ym-map-google { position: absolute; left: 10px; bottom: 6px; font: 500 15px/18px "Product Sans", Roboto, Arial, sans-serif; letter-spacing: -.2px; color: var(--ink-muted); }
.ym-map.is-still { cursor: default; }

/* Sitio (fuente de Google Maps) */
.ym-place { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.ym-place-row { display: flex; align-items: center; gap: var(--space-3); }
.ym-place.is-on { box-shadow: inset 0 0 0 2px var(--berry), var(--shadow-sm); }
.ym-place-n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface-raised); font-size: 13px; font-weight: 700; }
.ym-place.is-on .ym-place-n { background: var(--berry); color: var(--on-berry); }
.ym-place-text { flex: 1; min-width: 0; }
.ym-place-name { margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; }
.ym-place-name a { color: var(--ink); text-decoration: none; }
.ym-place-meta { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ym-place-go { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--berry-soft); color: var(--berry); }
.ym-place-go:focus-visible, .ym-icon-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
/* Its stars, its hours and what people say (Places API, 18 de octubre): the star in yolk, the count muted; the summary of
   the reviews in ink, with Gemini's disclosure and «Reportar» under it, and 👍 and 👎 at the end of that line. */
.ym-place-stars { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-muted); }
.ym-place-stars svg { color: var(--yolk); flex: none; }
.ym-place-stars b { color: var(--ink); font-weight: 700; }
.ym-place-hours { color: var(--leaf); font-weight: 600; }
.ym-place-hours.is-soon { color: var(--yolk-ink); }
.ym-place-review { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 6px; border-radius: 14px; background: var(--surface-sunken); }
.ym-place-review-text { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.ym-place-review-by { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.ym-place-review-by a { color: var(--link); text-decoration: none; }
.ym-place-review-by.is-alone { justify-content: flex-end; }
.ym-place-marks { display: inline-flex; gap: 2px; margin-right: -8px; }
.ym-place-mark { width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: var(--ink-muted); cursor: pointer; }
.ym-place-mark.is-on { color: var(--berry); background: var(--berry-soft); }

/* Receta */
.ym-recipe { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.ym-recipe-tag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--yolk-ink); }
.ym-recipe-meta { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ym-recipe-cost { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.ym-icon-btn { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); display: grid; place-items: center; cursor: pointer; }
.ym-icon-btn.is-on { color: var(--berry); }
.ym-icon-btn .is-filled { fill: currentColor; }

/* Racha */
.ym-streak { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px; border-radius: var(--radius-full); background: var(--berry-soft); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 700; }
.ym-streak-flame { fill: var(--berry); color: var(--berry); }
.ym-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ym-week li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ym-week-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); color: var(--on-berry); }
.ym-week .is-done .ym-week-dot { background: var(--berry); }
.ym-week .is-rest .ym-week-dot { background: var(--berry-soft); color: var(--berry); }
.ym-week .is-today .ym-week-dot { background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--berry); }
.ym-week-label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.ym-week .is-today .ym-week-label { color: var(--ink); font-weight: 700; }

/* Celebración a pantalla completa */
.ym-cele { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-6) var(--space-6); background: var(--berry); color: var(--on-berry); min-height: 100%; box-sizing: border-box; }
.ym-cele-burst { position: absolute; inset: 0; pointer-events: none; }
.ym-bit { position: absolute; display: block; animation: ym-burst .9s cubic-bezier(.2, .9, .3, 1.2) both, ym-float 3.2s ease-in-out .9s infinite alternate; }
.ym-bit-disc { width: 18px; height: 18px; border-radius: 50%; }
.ym-bit-pill { width: 34px; height: 12px; border-radius: 6px; transform: rotate(-24deg); }
.ym-bit-berry { background: var(--berry); }
.ym-bit-yolk { background: var(--yolk); }
.ym-bit-ink { background: var(--ink); }
.ym-bit-leaf { background: var(--leaf); }
.ym-bit-protein { background: var(--protein); }
.ym-bit-surface { background: var(--surface-raised); }
@keyframes ym-burst { from { transform: scale(0) translateY(40px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes ym-float { to { translate: 0 -10px; } }
.ym-cele-kicker { position: relative; margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; }
.ym-cele-yema { position: relative; display: block; margin-top: var(--space-4); animation: ym-hop 1s cubic-bezier(.3, 1.4, .5, 1) .2s both; }
@keyframes ym-hop { 0% { transform: translateY(30px) scale(.9); opacity: 0; } 60% { transform: translateY(-12px) scale(1.03); opacity: 1; } 100% { transform: none; } }
.ym-cele-title { position: relative; margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 40px; text-wrap: balance; }
.ym-cele-text { position: relative; margin: 0; font-size: 16px; line-height: 24px; max-width: 30ch; }
.ym-cele-stat { position: relative; display: inline-flex; padding: 6px 14px; border-radius: var(--radius-full); background: var(--surface-raised); color: var(--ink); font-size: 14px; font-weight: 700; }
.ym-cele-actions { position: relative; margin-top: auto; padding-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.ym-cele-quiet { color: var(--on-berry); box-shadow: inset 0 0 0 1.5px var(--on-berry); }
.ym-cele .ym-cele-primary { background: var(--surface-raised); color: var(--berry); }

/* Vacío */
.ym-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-6); }
.ym-empty-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; }
.ym-empty-text { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); max-width: 32ch; }

/* Aprender */
.ym-tip-inline { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); background: var(--leaf-soft); color: var(--ink); }
.ym-tip-inline p { margin: 0; font-size: 14px; line-height: 20px; }
.ym-tip-icon { color: var(--leaf); flex: none; padding-top: 1px; }
.ym-lesson, .ym-quiz { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.ym-lesson-top { display: flex; align-items: center; gap: var(--space-2); }
.ym-lesson-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--leaf-soft); color: var(--leaf); }
.ym-lesson-kicker { flex: 1; margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--leaf); }
.ym-lesson-dots { display: flex; gap: 4px; }
.ym-lesson-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ym-lesson-dots i.is-done { background: var(--leaf); box-shadow: none; }
.ym-lesson-title, .ym-quiz-q { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; text-wrap: balance; }
.ym-lesson-text { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); }
.ym-lesson-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }
.ym-quiz-opts { display: flex; flex-direction: column; gap: var(--space-2); }
.ym-quiz-opt { font: inherit; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.ym-quiz-opt:disabled { cursor: default; }
.ym-quiz-opt.is-right { background: var(--leaf-soft); border-color: var(--leaf); color: var(--ink); }
.ym-quiz-opt.is-right svg { color: var(--leaf); }
.ym-quiz-opt.is-picked { background: var(--surface-sunken); border-color: var(--line-strong); }
.ym-quiz-opt.is-off { color: var(--ink-muted); }
.ym-quiz-opt:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.ym-quiz-explain { display: flex; gap: var(--space-2); align-items: flex-start; padding: 12px; border-radius: var(--radius-md); background: var(--yolk-soft); animation: ym-rise .3s ease both; }
.ym-quiz-explain p { margin: 0; font-size: 14px; line-height: 20px; }
@keyframes ym-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Wrapped */
.ym-wr { position: relative; overflow: hidden; width: 300px; height: 533px; flex: none; border-radius: 28px; display: flex; flex-direction: column; padding: 28px 24px 20px; box-sizing: border-box; font-family: var(--font-sans); }
.ym-wr-intro { background: var(--berry); color: var(--on-berry); }
.ym-wr-dish { background: var(--place); color: #ffffff; }
.ym-wr-streak { background: var(--ink); color: var(--surface); }
.ym-wr-persona { background: var(--protein); color: #ffffff; }
.ym-wr-places { background: var(--leaf); color: #ffffff; }
.ym-wr-shapes i { position: absolute; border-radius: 50%; background: currentColor; opacity: .12; }
.ym-wr-shapes i:nth-child(1) { width: 220px; height: 220px; right: -80px; top: -60px; }
.ym-wr-shapes i:nth-child(2) { width: 120px; height: 120px; left: -40px; bottom: 90px; }
.ym-wr-shapes i:nth-child(3) { width: 56px; height: 56px; right: 40px; bottom: 140px; }
.ym-wr-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.ym-wr-kicker { margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; }
.ym-wr-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 48px; text-wrap: balance; }
.ym-wr-text { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.ym-wr-huge { margin: 8px 0 0; font-size: 150px; line-height: 1; font-weight: 700; letter-spacing: -.05em; }
.ym-wr-face { margin-top: auto; align-self: center; }
.ym-wr-plate { margin-top: auto; align-self: center; width: 200px; height: 200px; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); display: grid; place-items: center; }
.ym-wr-list { margin: 8px 0 0; padding-left: 22px; font-size: 18px; line-height: 30px; font-weight: 600; }
.ym-wr-foot { position: relative; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding-top: 12px; }

/* Widgets de iOS */
.ym-wg { box-sizing: border-box; font-family: var(--font-sans); }
.ym-wg-s, .ym-wg-m { border-radius: 22px; background: var(--surface-raised); color: var(--ink); padding: 14px; box-shadow: var(--shadow-lg); }
.ym-wg-s { width: 158px; height: 158px; display: flex; flex-direction: column; align-items: center; }
.ym-wg-m { width: 338px; height: 158px; display: flex; gap: 14px; }
.ym-wg-col { display: flex; flex-direction: column; align-items: center; }
.ym-wg-right { flex: 1; align-items: stretch; justify-content: space-between; padding-top: 4px; }
.ym-wg-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ym-wg-head .ym-streak { height: 24px; font-size: 12px; padding: 0 8px 0 4px; }
.ym-wg-head .ym-streak svg { width: 14px; height: 14px; }
.ym-wg-ringbox { position: relative; display: grid; place-items: center; margin-top: 2px; }
.ym-wg-ringbox svg { display: block; }
.ym-wg-center { position: absolute; inset: 0; display: grid; place-items: center; }
.ym-wg-num { font-size: 22px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; }
.ym-wg-cap { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink-muted); }
.ym-mr-track { stroke: var(--surface-sunken); }
.ym-mr-fill { stroke: var(--kcal); }
.ym-wg-macro { display: flex; flex-direction: column; gap: 3px; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink-muted); }
.ym-wg-track { height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.ym-wg-track i { display: block; height: 100%; border-radius: 3px; background: var(--m); }
/* The widgets on the day's rings (DayRings): each ring explained on the medium one, nothing inside the rings. */
.ym-wg-rings { margin: 6px 0 4px; }
.ym-wg-s .ym-wg-cap b { color: var(--ink); font-size: 13px; }
.ym-wg-s .ym-wg-rings { margin: 6px 0 0; }
.ym-wg-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; }
.ym-wg-btn.is-small { height: 30px; font-size: 13px; font-weight: 600; }
.ym-wg-water.is-small { flex: none; padding: 0 9px; }
.ym-wg-cam.is-small { width: 30px; }
.ym-wg-water { font-variant-numeric: tabular-nums; }
.ym-wg-ring { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ym-wg-ringname { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink); }
.ym-wg-ringname .ym-dot { width: 8px; height: 8px; }
.ym-wg-ringval { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ym-rings-mono .ym-rk { color: currentColor; }
.ym-rings-mono .ym-rings-track { opacity: .28; }
/* In one color there is no deeper tone: over the goal the first lap dims and the second goes at full, with the tip. */
.ym-rings-mono .ym-rings-deep, .ym-rings-mono .ym-rings-fill.ym-rings-lap { stroke: currentColor; }
.ym-rings-mono .is-over .ym-rings-first { opacity: .55; }
.ym-wg-lockcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ym-wg-btns { display: flex; gap: 8px; }
.ym-wg-btn { height: 34px; border: 0; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ym-wg-water { flex: 1; background: var(--water-soft); color: var(--water); }
.ym-wg-cam { width: 34px; background: var(--berry); color: var(--on-berry); }
.ym-wg-lockc, .ym-wg-lockr { color: #ffffff; }
.ym-wg-lockc { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.ym-wg-lockc svg { position: absolute; inset: 2px; }
.ym-wg-lockring .ym-mr-track { stroke: rgba(255, 255, 255, .28); }
.ym-wg-lockring .ym-mr-fill { stroke: #ffffff; }
.ym-wg-locknum { position: relative; font-size: 17px; font-weight: 700; }
.ym-wg-lockr { width: 170px; height: 72px; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.ym-wg-lockline { font-size: 13px; line-height: 16px; font-weight: 500; opacity: .85; }
/* The figure's line never wraps (iOS: lineLimit(1) with minimumScaleFactor); the strong one takes up to two lines. */
.ym-wg-lockline:not(.ym-wg-strong) { white-space: nowrap; }
.ym-wg-strong { font-size: 15px; line-height: 19px; font-weight: 700; opacity: 1; }
.ym-wg-lockbar { height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.ym-wg-lockbar i { display: block; height: 100%; background: #ffffff; border-radius: 3px; }

/* Amigos */
.ym-friend { display: inline-flex; flex: none; line-height: 0; }
.ym-friend svg { display: block; }

/* Pasos */
.ym-steps { display: flex; align-items: center; gap: var(--space-3); }
.ym-steps-back { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.ym-steps-track { flex: 1; height: 12px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.ym-steps-fill { display: block; height: 100%; border-radius: inherit; background: var(--berry); transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.ym-steps-skip { flex: none; }
.ym-steps-back:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Opción */
.ym-opt { font: inherit; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 72px; padding: 14px var(--space-4); border-radius: var(--radius-lg); border: 2px solid var(--line); background: var(--surface-raised); color: var(--ink); text-align: left; cursor: pointer; box-sizing: border-box; transition: border-color .15s ease, background-color .15s ease; }
.ym-opt.is-on { border-color: var(--berry); background: var(--berry-soft); }
.ym-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ym-opt-title { font-size: 16px; line-height: 22px; font-weight: 700; }
.ym-opt-desc { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ym-opt-check { width: 26px; height: 26px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); display: grid; place-items: center; color: var(--on-berry); }
.ym-opt.is-on .ym-opt-check { background: var(--berry); box-shadow: none; }
.ym-opt:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Segmentado */
.ym-seg-ctl { display: flex; padding: 4px; gap: 4px; border-radius: var(--radius-full); background: var(--surface-sunken); }
.ym-seg-opt { font: inherit; flex: 1; height: 40px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-muted); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; padding: 0 12px; }
.ym-seg-opt.is-on { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sm); }
.ym-seg-opt:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Usuario */
.ym-user { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--carbs-soft); color: var(--ink); font-weight: 700; letter-spacing: .02em; }
.ym-user img { width: 100%; height: 100%; object-fit: cover; }

/* Logro */
.ym-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: 96px; }
.ym-badge-medal { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; }
.ym-badge.is-earned .ym-badge-medal { background: var(--yolk); color: var(--on-yolk); box-shadow: 0 0 0 4px var(--yolk-soft); }
.ym-badge.is-locked .ym-badge-medal { background: var(--surface-sunken); color: var(--ink-muted); }
.ym-badge-title { font-size: 13px; line-height: 18px; font-weight: 700; }
.ym-badge-sub { font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* Botones de acceso */
.ym-auth { font: inherit; display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: 54px; border-radius: var(--radius-full); border: 0; font-size: 16px; font-weight: 700; cursor: pointer; }
.ym-auth-apple { background: var(--ink); color: var(--surface-raised); }
.ym-auth-google { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.ym-auth-email { background: var(--berry-soft); color: var(--berry); }
.ym-auth:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Código */
.ym-code { display: flex; flex-direction: column; gap: 8px; }
.ym-code-row { position: relative; display: flex; gap: 8px; }
.ym-code-cell { flex: 1; height: 60px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); display: grid; place-items: center; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ym-code-cell.is-next { box-shadow: inset 0 0 0 2px var(--berry); }
.ym-code-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 16px; }

/* Toast y banner */
.ym-toast { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px 8px 16px; border-radius: var(--radius-full); background: var(--ink); color: var(--surface-raised); box-shadow: var(--shadow-lg); font-size: 15px; line-height: 20px; font-weight: 600; max-width: 420px; box-sizing: border-box; animation: ym-rise .3s ease both; }
.ym-toast-yema { background: var(--yolk-soft); color: var(--ink); padding-left: 8px; }
.ym-toast-success { background: var(--leaf-soft); color: var(--ink); }
.ym-toast-success svg { color: var(--leaf); }
.ym-toast-text { flex: 1; min-width: 0; padding-right: 6px; }
.ym-toast-action { font: inherit; font-size: 14px; font-weight: 700; height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-full); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.ym-toast-yema .ym-toast-action, .ym-toast-success .ym-toast-action { box-shadow: var(--shadow-sm); }
.ym-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 14px; line-height: 20px; }
.ym-banner-info { background: var(--water-soft); color: var(--ink); }
.ym-banner-info .ym-banner-icon { color: var(--water); }
.ym-banner-offline { background: var(--surface-sunken); color: var(--ink); }
.ym-banner-offline .ym-banner-icon { color: var(--ink-muted); }
.ym-banner-success { background: var(--leaf-soft); color: var(--ink); }
.ym-banner-success .ym-banner-icon { color: var(--leaf); }
.ym-banner-icon { flex: none; padding-top: 1px; }
.ym-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ym-banner .ym-link { flex: none; padding: 0; }

/* Centro de notificaciones */
.ym-noti { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; padding: 14px var(--space-4); background: var(--surface-raised); }
.ym-noti + .ym-noti { box-shadow: inset 0 1px 0 var(--line); }
.ym-noti.is-unread { background: var(--yolk-soft); }
.ym-noti-lead { flex: none; display: flex; }
.ym-noti-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ym-noti-title { font-size: 15px; line-height: 20px; font-weight: 700; }
.ym-noti-text { font-size: 14px; line-height: 20px; color: var(--ink); }
.ym-noti-action { align-self: flex-start; padding-top: 4px; }
.ym-noti-time { flex: none; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-weight: 600; padding-right: 14px; }
.ym-noti-dot { position: absolute; right: 14px; top: 34px; width: 9px; height: 9px; border-radius: 50%; background: var(--berry); }

/* Voz */
.ym-voice { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.ym-voice-wave { display: flex; align-items: center; gap: 4px; height: 56px; }
.ym-voice-wave i { width: 5px; height: 10px; border-radius: 3px; background: var(--line-strong); }
.ym-voice.is-on .ym-voice-wave i { background: var(--berry); animation: ym-wave 1s ease-in-out infinite alternate; }
@keyframes ym-wave { 0% { height: 8px; } 100% { height: 52px; } }
.ym-voice-text { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; max-width: 32ch; }
.ym-voice-mic { position: relative; width: 84px; height: 84px; border: 0; border-radius: 50%; background: var(--berry); color: var(--on-berry); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-lg); }
.ym-voice-ring { position: absolute; inset: -10px; border-radius: 50%; box-shadow: 0 0 0 4px var(--berry-soft); }
.ym-voice.is-on .ym-voice-ring { animation: ym-halo 1.6s ease-in-out infinite; }
.ym-voice-mic svg { position: relative; }
.ym-voice-mic:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.ym-voice-hint { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }

/* Código de barras */
.ym-bar-scan { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.ym-bar-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); background: #1d1420; color: #f6eef4; display: grid; place-items: center; overflow: hidden; }
.ym-bar-frame > i { position: absolute; width: 30px; height: 30px; border: 4px solid var(--berry); }
.ym-bar-frame > i:nth-of-type(1) { top: 18%; left: 12%; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.ym-bar-frame > i:nth-of-type(2) { top: 18%; right: 12%; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.ym-bar-frame > i:nth-of-type(3) { bottom: 18%; left: 12%; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.ym-bar-frame > i:nth-of-type(4) { bottom: 18%; right: 12%; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.ym-bar-line { position: absolute; left: 14%; right: 14%; top: 50%; height: 3px; border-radius: 2px; background: var(--berry); box-shadow: 0 0 12px var(--berry); animation: ym-barline 1.4s ease-in-out infinite alternate; }
@keyframes ym-barline { from { transform: translateY(-40px); } to { transform: translateY(40px); } }
.ym-bar-hint { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-muted); }

/* Tabla nutricional */
.ym-ntable { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--ink); }
.ym-ntable-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding-bottom: 8px; box-shadow: inset 0 -6px 0 -2px var(--ink); margin-bottom: 4px; }
.ym-ntable-head strong { font-size: 17px; font-weight: 800; }
.ym-ntable-head span { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.ym-ntable dl { margin: 0; }
.ym-ntable-row { display: flex; justify-content: space-between; gap: var(--space-2); padding: 7px 0; font-size: 14px; line-height: 20px; }
.ym-ntable-row + .ym-ntable-row { box-shadow: inset 0 1px 0 var(--line); }
.ym-ntable-row dt { font-weight: 600; }
.ym-ntable-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ym-ntable-row.is-sub dt { padding-left: 16px; font-weight: 500; color: var(--ink-muted); }
.ym-ntable-row.is-strong dt, .ym-ntable-row.is-strong dd { font-size: 16px; font-weight: 800; }
.ym-ntable-src { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* Semana del diario */
.ym-weekstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ym-ws-day { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); cursor: pointer; }
.ym-ws-day.is-on { background: var(--ink); color: var(--surface-raised); }
.ym-ws-label { font-size: 12px; line-height: 16px; font-weight: 600; opacity: .8; }
.ym-ws-date { font-size: 17px; line-height: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ym-ws-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 2px; }
.ym-ws-dot.is-full { background: var(--berry); }
.ym-ws-dot.is-some { background: transparent; box-shadow: inset 0 0 0 2px var(--berry); }
.ym-ws-dot.is-none { background: var(--surface-sunken); }
.ym-ws-day:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Lista con casillas */
.ym-check { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 8px var(--space-4); background: var(--surface-raised); cursor: pointer; }
.ym-check + .ym-check { box-shadow: inset 0 1px 0 var(--line); }
.ym-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ym-check-box { width: 26px; height: 26px; flex: none; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--line-strong); display: grid; place-items: center; color: var(--on-berry); }
.ym-check.is-on .ym-check-box { background: var(--leaf); box-shadow: none; color: var(--surface-raised); }
.ym-check-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ym-check-label { font-size: 16px; line-height: 22px; font-weight: 600; }
.ym-check-done.is-on .ym-check-label { color: var(--ink-muted); text-decoration: line-through; }
.ym-check-detail { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ym-check input:focus-visible + .ym-check-box { box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  .ym-dots i { animation: none; opacity: .8; }
  .ym-btn, .ym-ring-fill, .ym-macro-fill, .ym-switch, .ym-switch-thumb, .ym-steps-fill, .ym-opt { transition: none; }
  .ym-btn:active { transform: none; }
  .ym-sk::after, .ym-loader-halo, .ym-scan-line, .ym-map-halo, .ym-spin, .ym-loader-steps li.is-now .ym-loader-mark { animation: none; }
  .ym-scan-tag, .ym-bit, .ym-cele-yema, .ym-quiz-explain, .ym-toast, .ym-voice-wave i, .ym-voice-ring, .ym-bar-line { animation: none; }
}

/* ===== v5: piezas nuevas (revisión de UX, 17 de octubre) ===== */
.ym-tab-add { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink); cursor: pointer; }
.ym-tab-add .ym-tab-cam { display: grid; }
.ym-tab-add:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: 16px; }
.ym-water-actions { display: flex; align-items: center; gap: var(--space-2); }
.ym-icon-btn { position: relative; text-decoration: none; }
.ym-icon-btn:disabled { opacity: .4; cursor: default; }
.ym-icon-btn-water { background: var(--water-soft); color: var(--water); }
.ym-icon-btn-soft { background: var(--surface-sunken); color: var(--ink); }
.ym-icon-btn-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 2px var(--surface); }
.ym-sheet { background: var(--surface-raised); border-radius: 28px 28px 0 0; box-shadow: var(--shadow-lg); padding: 8px var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.ym-sheet-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); opacity: .6; }
.ym-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ym-sheet-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; }
.ym-sheet-body { display: flex; flex-direction: column; gap: var(--space-3); }
.ym-sheet-foot { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-1); }
.ym-sheet > .ym-kbar { margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-6)); }
.ym-dialog { background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); max-width: 340px; box-sizing: border-box; }
.ym-dialog-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; }
.ym-dialog-text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.ym-dialog-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.ym-sec { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ym-sec-title { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: 18px; line-height: 24px; font-weight: 700; }
.ym-sec-action { text-decoration: none; }
.ym-group-label { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink-muted); }
.ym-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); min-width: 0; }
.ym-stat-val { font-size: 18px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ym-stat-lg .ym-stat-val { font-size: 44px; line-height: 48px; letter-spacing: -.02em; }
.ym-stat-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.ym-stat-sub { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.ym-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-full); background: var(--surface-raised); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ym-tag-sunken { background: var(--surface-sunken); }
.ym-tag-place { background: var(--place-soft); color: var(--place); }
.ym-tag-plus { background: var(--yolk-soft); color: var(--yolk-ink); padding: 2px 8px; font-size: 12px; line-height: 16px; }
.ym-nstep { display: flex; gap: var(--space-3); align-items: flex-start; }
.ym-nstep-n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface-raised); font-size: 14px; font-weight: 700; }
.ym-nstep-n.is-first { background: var(--berry); color: var(--on-berry); }
.ym-nstep-body { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 24px; }
.ym-pbar { height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.ym-pbar span { display: block; height: 100%; border-radius: inherit; background: var(--berry); }
.ym-pbar-leaf span { background: var(--leaf); }
.ym-pbar-water span { background: var(--water); }
.ym-info { margin: 0; display: flex; gap: var(--space-2); align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ym-info svg { flex: none; margin-top: 1px; }
.ym-info.is-boxed { padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.ym-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-xl); }
.ym-hero-yolk { background: var(--yolk-soft); }
.ym-hero-berry { background: var(--berry-soft); }
.ym-hero-place { background: var(--place-soft); }
.ym-hero-water { background: var(--water-soft); }
.ym-hero.has-art { padding-right: 130px; min-height: 150px; box-sizing: border-box; }
.ym-hero-art { position: absolute; right: -6px; bottom: -8px; }
.ym-hero-kicker { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink-muted); }
.ym-hero-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; }
.ym-hero-body { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 24px; }
.ym-pdots { display: flex; gap: 6px; justify-content: center; }
.ym-pdots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); }
.ym-pdots i.is-on { width: 22px; background: var(--berry); }
.ym-atile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); border: 0; font: inherit; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; min-width: 0; box-sizing: border-box; }
.ym-atile:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.ym-atile-title { font-size: 16px; line-height: 22px; font-weight: 700; }
.ym-atile-sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ym-search { display: flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 4px 0 14px; border-radius: var(--radius-full); background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-muted); box-sizing: border-box; }
.ym-search:focus-within { box-shadow: inset 0 0 0 2px var(--berry); }
.ym-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; line-height: 24px; color: var(--ink); outline: none; }
.ym-search input::-webkit-search-cancel-button { display: none; }
.ym-search-btn { width: 40px; height: 40px; flex: none; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink-muted); cursor: pointer; }
.ym-coach { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: var(--radius-lg); background: var(--ink); color: var(--surface-raised); box-shadow: var(--shadow-lg); max-width: 320px; box-sizing: border-box; }
.ym-coach::after { content: ""; position: absolute; left: 28px; width: 16px; height: 16px; background: var(--ink); transform: rotate(45deg); border-radius: 3px; }
.ym-coach-down::after { bottom: -7px; }
.ym-coach-up::after { top: -7px; }
.ym-coach-body p { margin: 0; font-size: 15px; line-height: 21px; }
.ym-coach-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ym-coach-step { font-size: 12px; line-height: 16px; opacity: .75; margin-right: auto; }
.ym-coach .ym-link { color: var(--surface-raised); }
.ym-cite { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); text-decoration: none; }
.ym-cite svg:first-child { color: var(--leaf); flex: none; }
a.ym-cite:hover span { text-decoration: underline; }
a.ym-cite::after { content: ""; position: absolute; inset: -14px -4px; }
a.ym-cite:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: 6px; }
/* Toques de 44 px aunque se vean más chicos */
.ym-chip, .ym-link, .ym-switch, .ym-btn-sm, .ym-note-action, .ym-toast-action, .ym-seg-opt { position: relative; }
.ym-chip::after, .ym-btn-sm::after, .ym-note-action::after { content: ""; position: absolute; inset: -4px -2px; }
.ym-link::after { content: ""; position: absolute; inset: -12px -6px; }
.ym-switch::after { content: ""; position: absolute; inset: -6px -4px; }
.ym-toast-action::after { content: ""; position: absolute; inset: -5px -2px; }
.ym-seg-opt::after { content: ""; position: absolute; inset: -2px 0; }

/* ===== Piezas nuevas de la app (17 de octubre; docs/YEMA.md · Hallazgos U2, U7, U12 y D25) ===== */
a.ym-row, a.ym-note-action { text-decoration: none; }
.ym-place-by { margin: 2px 0 0; }
.ym-aiwait { display: flex; flex-direction: column; gap: var(--space-2); }
.ym-aiwait .ym-pbar { height: 6px; }
.ym-aiwait-note { margin: 0; text-align: center; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-muted); }
.ym-aiwait-late { display: flex; flex-direction: column; gap: var(--space-1); font-size: 16px; line-height: 24px; }
.ym-aiwait-late strong { font-weight: 600; }
.ym-aiwait-late > span { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-bottom: var(--space-2); }
.ym-aiwait-late .ym-btn + .ym-btn { margin-top: var(--space-1); }
.ym-savebar { display: flex; flex-direction: column; gap: var(--space-2); }
.ym-savebar-total { margin: 0; text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.ym-bottombar { display: flex; flex-direction: column; background: var(--surface); }
.ym-bottombar-main { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
.ym-bottombar.is-raised { background: var(--surface-raised); box-shadow: inset 0 1px 0 var(--line); }
.ym-bottombar.is-raised .ym-bottombar-main { padding-bottom: var(--space-3); }
.ym-kbar { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 var(--space-2); background: var(--surface-raised); box-shadow: inset 0 1px 0 var(--line); box-sizing: border-box; }
.ym-kbar.is-joined { box-shadow: none; }
.ym-kbar-arrows { display: flex; gap: 2px; }

/* Revisión de los jueces (18 de octubre): los días que vienen en las barras (V40) y el sitio dentro de una tarjeta (V22). */
.ym-axis.is-future { opacity: .55; }
.ym-place.is-flat { padding: 0; background: none; box-shadow: none; }

/* El logo (Duván, 18 de octubre): la palabra «Yema» en frambuesa; en oscuro, la frambuesa de los anillos (kcal).
   5,4:1 sobre blanco, 5,1:1 sobre surface; en oscuro, 5,0:1 sobre surface y 4,6:1 sobre surface-raised (contrast.py).
   En blanco sobre frambuesa; en tinta donde la frambuesa no va. La cara no cambia. */
.ym-wordmark { display: inline-flex; align-items: center; gap: .36em; font-family: var(--font-display); font-weight: 400; line-height: 1.1; color: var(--kcal); }
.ym-wordmark.is-white { color: #fff; }
.ym-wordmark.is-ink { color: var(--ink); }
/* El resaltado de la marca escrito a mano en los tableros de redes (como Mark): detrás del texto de las líneas vecinas,
   para que en la segunda línea no tape los trazos que bajan de la de arriba (Young Serif es más alta que su interlineado). */
.ym-hl { position: relative; z-index: -1; }
:where(*):has(> .ym-hl) { isolation: isolate; }