:root {
  --bg: #f2f2f5;
  --card: rgba(255, 255, 255, 0.85);
  --hairline: rgba(0, 0, 0, 0.08);
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #a1a1a6;
  --track: rgba(0, 0, 0, 0.06);
  --accent: #2f8f4e;
  --accent-soft: rgba(47, 143, 78, 0.12);
  --warn: #c7771a;
  --warn-soft: rgba(224, 138, 41, 0.14);
  --danger: #c93b30;
  --danger-soft: rgba(217, 69, 59, 0.12);
  --info: #2f6fd6;
  --info-soft: rgba(59, 130, 245, 0.12);
  /* The AI's own colour (lilac), so green keeps meaning "now / selected" */
  --ai: #7a56d6;
  --ai-soft: rgba(122, 86, 214, 0.12);
  --shimmer: rgba(0, 0, 0, 0.07);

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --card: #1c1c1e;
    --hairline: rgba(255, 255, 255, 0.1);
    --text: #f5f5f7;
    --text-2: #98989d;
    --text-3: #636366;
    --track: rgba(255, 255, 255, 0.1);
    --accent: #4cc26f;
    --accent-soft: rgba(76, 194, 111, 0.16);
    --warn: #f0a24a;
    --danger: #ff6b5e;
    --info: #6aa2ff;
    --ai: #b9a3ff;
    --ai-soft: rgba(178, 140, 255, 0.16);
    --shimmer: rgba(255, 255, 255, 0.09);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: 0 max(16px, env(safe-area-inset-left)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
}
body > header, body > main { max-width: 560px; margin-left: auto; margin-right: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

/* ---------- Header ---------- */
.top { padding-top: max(18px, env(safe-area-inset-top)); }
.top-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; }
.place { font-size: 14px; color: var(--text-2); font-weight: 500; text-align: right; }
.place::after { content: " ▾"; font-size: 11px; }

/* ---------- Cards ---------- */
main { display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--card); border: 0.5px solid var(--hairline); border-radius: 20px; padding: 16px; }
.card h2 { font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
.muted { color: var(--text-2); font-size: 14px; line-height: 1.4; }
.empty { text-align: center; padding: 28px 16px; }
.empty .big { font-size: 40px; }
.empty p { margin: 8px 0 14px; }

/* Forecast strip */
.forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.forecast div { font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-radius: 10px; }
.forecast .today { background: var(--track); color: var(--text); }
.forecast .ico { font-size: 20px; }
.forecast .hi { font-weight: 700; color: var(--text); }
.forecast .rain { color: var(--info); font-weight: 600; min-height: 1em; }

/* Alerts */
.alert { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 12px 14px; }
.alert .ico { font-size: 24px; line-height: 1; }
.alert strong { display: block; font-size: 15px; margin-bottom: 2px; }
.alert.danger { background: var(--danger-soft); }
.alert.warn { background: var(--warn-soft); }
.alert.ok { background: var(--accent-soft); }

/* Task rows */
.task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 0.5px solid var(--hairline); }
.task:first-of-type { border-top: 0; padding-top: 0; }
.task .body { flex: 1; min-width: 0; }
.task .title { font-weight: 600; font-size: 15px; }
.task .when { font-size: 13px; color: var(--text-2); }
.task .when.late { color: var(--danger); }
.task .advice { font-size: 13px; margin-top: 3px; padding: 3px 8px; border-radius: 8px; display: inline-block; }
.task .advice.skip { background: var(--info-soft); color: var(--info); }
.task .advice.urgent { background: var(--warn-soft); color: var(--warn); }

.thumb { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--accent-soft); display: grid; place-items: center; font-size: 22px; flex: none; }

/* Plant list */
.plant { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 0; border-top: 0.5px solid var(--hairline); }
.plant:first-of-type { border-top: 0; padding-top: 0; }
.plant .body { flex: 1; min-width: 0; }
.plant .name { font-weight: 600; }
.plant .meta { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 6px 4px 0; }

/* Buttons */
.btn { background: var(--accent); color: #fff; border-radius: 12px; padding: 10px 16px; font-weight: 600; font-size: 15px; }
.btn.secondary { background: var(--track); color: var(--text); }
.btn.small { padding: 6px 12px; font-size: 14px; border-radius: 10px; }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.block { width: 100%; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: var(--track); border-radius: 999px; padding: 8px 12px; font-size: 14px; font-weight: 600; }

/* Sheet (dialog) */
dialog#sheet {
  border: 0; padding: 0; width: min(560px, 100vw); max-width: 100vw; max-height: 92vh;
  margin: auto auto 0; border-radius: 22px 22px 0 0; background: var(--bg); color: var(--text);
}
dialog#sheet::backdrop { background: rgba(0, 0, 0, 0.35); }
.sheet-in { padding: 18px 16px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet-head h2 { font-size: 20px; font-weight: 700; }
.hero-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.field input, .field select, .field textarea {
  background: var(--card); border: 0.5px solid var(--hairline); border-radius: 12px; padding: 10px 12px; font-size: 16px; font-weight: 400; color: var(--text); width: 100%;
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-pick { display: flex; align-items: center; gap: 12px; }
.photo-pick img, .photo-pick .thumb { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; }

/* Log */
.log { list-style: none; padding: 0; margin: 0; }
.log li { display: flex; gap: 10px; padding: 8px 0; border-top: 0.5px solid var(--hairline); font-size: 14px; }
.log li:first-child { border-top: 0; }
.log .d { color: var(--text-2); width: 74px; flex: none; }
.log .x { margin-left: auto; color: var(--text-3); }

.results button { display: block; width: 100%; text-align: left; padding: 10px 0; border-top: 0.5px solid var(--hairline); }
.results small { color: var(--text-2); }

/* AI assistant */
.ai-status { font-size: 14px; line-height: 1.4; padding: 8px 12px; border-radius: 10px; background: var(--track); color: var(--text-2); margin: 0; }
.ai-status.ok { background: var(--accent-soft); color: var(--accent); }
.ai-status.warn { background: var(--warn-soft); color: var(--warn); }
.btn:disabled { opacity: 0.5; cursor: default; }
.code-input { flex: 1; min-width: 0; background: var(--card); border: 0.5px solid var(--hairline); border-radius: 10px; padding: 6px 10px; font-size: 16px; }

/* Loading spinner (AI fill) */
.spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 6px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
.btn[aria-busy="true"] { opacity: 1; background: var(--accent-soft); color: var(--accent); }

/* Notes: grows with its text (see autogrow in app.js) */
.field textarea.autogrow { min-height: 9em; line-height: 1.45; resize: none; overflow: hidden; }

/* Bottom tab bar + floating add button (thumb reach) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-around;
  padding: 8px max(16px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
  background: var(--bg); border-top: 0.5px solid var(--hairline);
}
.tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-3); min-width: 72px; padding: 2px 0; }
.tabbar button[aria-selected="true"] { color: var(--accent); }
.tabbar svg, .fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fab {
  position: fixed; z-index: 11; right: max(18px, env(safe-area-inset-right)); bottom: calc(72px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.fab svg { width: 28px; height: 28px; stroke-width: 2.4; }
.fab[hidden] { display: none; }

/* New plant, two steps */
.q { font-size: 17px; font-weight: 700; margin: 4px 0 0; }
.big-input { background: var(--card); border: 0.5px solid var(--hairline); border-radius: 14px; padding: 13px 14px; font-size: 18px; width: 100%; color: var(--text); }
.ai-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ai-card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-card .name { font-weight: 700; font-size: 16px; }
.chip.on { background: var(--accent); color: #fff; }
.muted.small { font-size: 13px; }

/* Focus ring in the app's green instead of the browser default */
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Fields waiting for the AI */
.field input:disabled { opacity: 0.45; cursor: default; }

/* Step 2 controls: segmented (one of two), switch, care block */
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.seg-label { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: -6px; }
.seg { display: flex; background: var(--track); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.seg button[aria-checked="true"] { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
@media (prefers-color-scheme: dark) { .seg button[aria-checked="true"] { background: #3a3a3c; } }
.switch-row { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--card); border: 0.5px solid var(--hairline); border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 600; }
.switch-row > span:first-child { display: flex; align-items: center; gap: 8px; }
.switch-row:disabled { opacity: 0.45; cursor: default; }
.switch { width: 46px; height: 28px; border-radius: 14px; background: var(--track); position: relative; transition: background 0.15s; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.switch-row[aria-checked="true"] .switch { background: var(--accent); }
.switch-row[aria-checked="true"] .switch::after { transform: translateX(18px); }
.care-block { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.care-block h3 { font-size: 15px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 6px; }
.care-block h3 .icon { color: var(--accent); }
.care-block .field input { background: var(--bg); }

/* AI notes preview in the new-plant step 2: two lines, "Ver más" expands */
.ai-notes { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ai-notes p { margin: 0; }
.ai-notes:not(.open) p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ai-notes .more { margin-top: 4px; color: var(--accent); font-weight: 600; font-size: 13px; }

/* Edit form: the same controls built on real inputs (radio / checkbox) */
.seg label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--text-2); cursor: pointer; position: relative; }
.seg input, .switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg label:has(input:checked) { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.seg label:has(input:focus-visible), .switch-row:has(.switch-input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-color-scheme: dark) { .seg label:has(input:checked) { background: #3a3a3c; } }
label.switch-row { cursor: pointer; }
.switch-row:has(.switch-input:checked) .switch { background: var(--accent); }
.switch-row:has(.switch-input:checked) .switch::after { transform: translateX(18px); }

/* Seasonal care: table in the forms, current/next lines in the plant sheet */
.season-table { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 8px; align-items: center; }
.st-h { font-size: 12px; color: var(--text-3); font-weight: 600; }
.st-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); padding-right: 4px; }
.st-name.now { color: var(--accent); }
.st-cell { display: flex; align-items: center; gap: 4px; background: var(--card); border: 0.5px solid var(--hairline); border-radius: 10px; padding: 0 10px; }
.care-block .st-cell { background: var(--bg); }
.st-cell input { width: 100%; min-width: 0; border: 0; background: none; padding: 9px 0; font-size: 16px; color: var(--text); }
.st-cell input:focus-visible { outline: none; }
.st-cell:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.st-cell span { color: var(--text-3); font-size: 13px; }
.season-table .st-name.now + .st-cell, .season-table .st-name.now + .st-cell + .st-cell { border: 1.5px solid var(--accent); }
.st-cell:has(input:disabled) { opacity: 0.45; }
.next-care { display: flex; flex-direction: column; gap: 10px; }
.next-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.tag { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.next-change { margin: 0; }
.st-cell:has(input:placeholder-shown) span { visibility: hidden; }

/* Save button pinned to the bottom of the sheet: content scrolls behind it */
.sheet-actions {
  position: sticky; bottom: 0; z-index: 1;
  margin: 4px -16px calc(-1 * max(24px, env(safe-area-inset-bottom)));
  padding: 10px 16px max(16px, env(safe-area-inset-bottom));
  background: var(--bg); border-top: 0.5px solid var(--hairline);
}

/* «Fichas por actualizar»: banner on Hoy and dot on the Ajustes tab */
.upgrade-banner { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--accent); background: var(--accent-soft); }
.upgrade-banner p { margin: 0; font-size: 15px; line-height: 1.4; }
.tabbar button { position: relative; }
.tabbar button.has-dot::after { content: ""; position: absolute; top: 0; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); }

/* ---------- AI states ---------- */
/* Halo: a thin multicolour border around the plant card; it turns while the AI thinks and
   rests, fainter, once the sheet has been filled. */
@property --ai-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ai-halo { position: relative; border-color: transparent; }
.ai-halo::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ai-angle), #4cc26f, #37c3c3, #6aa2ff, #b28cff, #4cc26f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.ai-halo.loading::before { animation: ai-turn 2.4s linear infinite; }
.ai-halo.loading { box-shadow: 0 0 22px -8px rgba(122, 86, 214, 0.55); }
.ai-halo.done::before { opacity: 0.5; }
@keyframes ai-turn { to { --ai-angle: 360deg; } }
.ai-step { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.ai-card .ai-step .spinner { color: var(--ai); margin: 0; }
.ai-pill { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ai); background: var(--ai-soft); border-radius: 999px; padding: 3px 9px; }
.ai-mark { color: var(--ai); }
.ai-status.ai { background: var(--ai-soft); color: var(--ai); }

/* Season cells: shimmer while waiting, small ✦ on values proposed by the AI */
.st-cell { position: relative; overflow: hidden; }
.st-cell.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--shimmer) 50%, transparent 80%); transform: translateX(-100%); animation: ai-shimmer 1.4s ease-in-out infinite; }
.st-cell.skel span { visibility: hidden; }
@keyframes ai-shimmer { to { transform: translateX(100%); } }
.st-cell.ai::before { content: "✦"; position: absolute; top: 1px; right: 4px; font-size: 9px; line-height: 1; color: var(--ai); }
.st-legend { display: none; margin: 2px 0 0; font-size: 12px; color: var(--text-2); align-items: center; gap: 5px; }
.season-table.has-ai + .st-legend { display: flex; }
.now-box { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--accent); border-radius: 3px; margin-left: 10px; }
@media (prefers-reduced-motion: reduce) { .ai-halo.loading::before, .st-cell.skel::after { animation: none; } }

/* Not a plant / other possible plants */
.ai-warn { color: var(--warn); font-weight: 600; font-size: 14px; }
.ai-alts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.ai-alts > span { width: 100%; }
.ai-alts .chip { font-size: 13px; padding: 6px 10px; border: 1px solid var(--ai-soft); }
.ai-alts .chip em { font-style: italic; font-weight: 400; color: var(--text-2); margin-left: 2px; }
.ai-status .ai-alts { margin-top: 8px; }

/* Plant sheet header: Editar + Cerrar; delete lives at the end of the edit form */
.sheet-head .row { flex-wrap: nowrap; }
.sheet-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delete-plant { margin-top: 12px; }

/* Edit form header card, same look as the new-plant step 2 */
.edit-card { align-items: center; }
.thumb-pick { cursor: pointer; flex: none; position: relative; }
.thumb-pick .thumb { width: 52px; height: 52px; }
.name-input, .species-input { background: none; border: 0; border-bottom: 1px solid transparent; padding: 2px 0; width: 100%; color: var(--text); }
.name-input { font-size: 17px; font-weight: 700; }
.species-input { font-size: 14px; font-style: italic; color: var(--text-2); }
.name-input:focus-visible, .species-input:focus-visible { outline: none; border-bottom-color: var(--accent); }
.ai-btn { color: var(--ai); }

/* Hoy: Para hoy · Hecho hoy · Próximos días */
.card h2 .count { float: right; color: var(--text-2); }
.all-done { text-align: center; padding: 4px 0; }
.fold { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; }
.fold .chev { color: var(--text-3); transition: transform 0.15s; }
.done-card.open .chev { transform: rotate(90deg); }
.done-list { margin-top: 10px; }
.done-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 0.5px solid var(--hairline); font-size: 14px; color: var(--text-2); }
.done-row .tick { color: var(--accent); font-weight: 700; }
.done-row s { flex: 1; min-width: 0; }
.done-row .time { font-size: 12px; color: var(--text-3); }
.undo { color: var(--info); font-weight: 600; font-size: 13px; }
.day-row { display: grid; grid-template-columns: 82px 1fr; gap: 8px; padding: 9px 0; border-top: 0.5px solid var(--hairline); }
.day-row:first-of-type { border-top: 0; padding-top: 0; }
.day-name { font-weight: 600; font-size: 14px; }
.day-name small { display: block; font-weight: 400; font-size: 12px; color: var(--text-2); }
.day-items { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.day-chip { background: var(--track); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.day-chip.feed { background: var(--warn-soft); }
.day-wx { width: 100%; font-size: 12px; color: var(--info); }
.day-wx.hot { color: var(--warn); }
.link-btn { margin-top: 8px; color: var(--accent); font-weight: 600; font-size: 14px; }

/* ---------- Clean Hoy (2026-10-02) ---------- */
.top-row { align-items: flex-end; }
h1#title { font-size: 32px; font-weight: 700; letter-spacing: -0.8px; }
.subtitle { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.place { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; background: var(--card); border: 0.5px solid var(--hairline); border-radius: 999px; padding: 6px 10px; margin-bottom: 2px; }
.place::after { content: none; }
.place .icon { width: 15px; height: 15px; }
.sec { font-size: 15px; font-weight: 600; margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; }
.meta { font-size: 13px; font-weight: 500; color: var(--text-2); }

/* Weather card */
.wx-now { display: flex; align-items: center; gap: 14px; }
.wx-ico .icon { width: 40px; height: 40px; stroke-width: 1.6; }
.wx-ico { color: var(--text-2); } .wx-ico.sun, .wx-ico.cloud-sun { color: var(--warn); } .wx-ico.cloud-rain, .wx-ico.cloud-storm { color: var(--info); }
.wx-temp { font-size: 46px; font-weight: 600; letter-spacing: -1.5px; line-height: 1; }
.wx-desc { font-size: 15px; font-weight: 600; } .wx-desc small { display: block; font-weight: 400; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.wx-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 0.5px solid var(--hairline); }
.wx-day { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.wx-day .icon { width: 20px; height: 20px; color: var(--text-2); }
.wx-day b { font-weight: 600; color: var(--text); font-size: 13px; }
.wx-bar { width: 6px; height: 26px; border-radius: 3px; background: var(--hairline); position: relative; overflow: hidden; }
.wx-bar span { position: absolute; bottom: 0; left: 0; right: 0; background: var(--info); border-radius: 3px; }
.wx-mm { font-size: 11px; color: var(--info); min-height: 13px; }
.wx-calm { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--text-2); }
.wx-calm .icon { width: 16px; height: 16px; color: var(--accent); }
.wx-alert { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: var(--text-2); }
.wx-alert .icon { width: 20px; height: 20px; flex: none; }
.wx-alert.danger .icon { color: var(--danger); } .wx-alert.warn .icon { color: var(--warn); }
.wx-alert strong { display: block; color: var(--text); font-size: 14px; }

/* Tasks */
.t-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 0.5px solid var(--hairline); }
.t-row:first-of-type { border-top: 0; padding-top: 0; }
.t-row .body { flex: 1; min-width: 0; }
.t-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.t-ico .icon { width: 19px; height: 19px; }
.t-ico.water { background: var(--info-soft); color: var(--info); } .t-ico.feed { background: var(--warn-soft); color: var(--warn); }
.t-title { font-weight: 600; font-size: 15px; }
.t-when { font-size: 13px; color: var(--text-2); } .t-when.late { color: var(--danger); }
.t-advice { font-size: 12px; margin-top: 3px; color: var(--info); } .t-advice.urgent { color: var(--warn); }
.link-inline { color: var(--accent); font-weight: 600; font-size: 12px; }
.t-check { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--text-3); flex: none; display: grid; place-items: center; color: transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.t-check .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.t-check:active, .t-check:hover { border-color: var(--accent); color: var(--accent); }
.t-empty { display: flex; align-items: center; gap: 12px; }
.t-empty .badge { width: 36px; height: 36px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.t-empty b { font-weight: 600; font-size: 15px; display: block; } .t-empty span { font-size: 13px; color: var(--text-2); }

/* Hecho hoy */
.done-card { padding: 12px 16px; }
.done-card .fold span:first-child { font-size: 15px; }
.done-row .tick { color: var(--accent); display: grid; } .done-row .tick .icon { width: 16px; height: 16px; stroke-width: 2.4; }

/* Próximos días */
.day-row { grid-template-columns: 74px 1fr; }
.day-name small { color: var(--text-2); }
.day-gap { font-size: 13px; color: var(--text-3); padding: 0 0 10px; }
.day-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 4px 8px; background: var(--bg); }
.day-chip .icon { width: 14px; height: 14px; }
.day-chip.water { background: var(--bg); } .day-chip.water .icon { color: var(--info); }
.day-chip.feed { background: var(--bg); } .day-chip.feed .icon { color: var(--warn); }
.day-wx { display: flex; align-items: center; gap: 4px; }
.day-wx .icon { width: 14px; height: 14px; flex: none; }

/* ---------- Clean Plantas, ficha y Ajustes (2026-10-02) ---------- */
.card h2 { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); }
.sec.start { justify-content: flex-start; gap: 6px; }
.thumb.placeholder { color: var(--accent); }
.thumb.placeholder .icon { width: 55%; height: 55%; }
.empty .big { color: var(--accent); } .empty .big .icon { width: 44px; height: 44px; }
.thumb-pick .cam { position: absolute; right: -5px; bottom: -5px; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 0.5px solid var(--hairline); display: grid; place-items: center; color: var(--text-2); }
.thumb-pick .cam .icon { width: 13px; height: 13px; }
.chev { color: var(--text-3); display: grid; } .chev .icon { width: 18px; height: 18px; }

/* Plantas */
.zone-title { text-transform: none; font-size: 13px; font-weight: 600; color: var(--text-2); margin: 6px 4px -2px; }
.list-card { padding: 4px 16px; }
.p-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 0; border-top: 0.5px solid var(--hairline); }
.p-row:first-child { border-top: 0; }
.p-row .body { flex: 1; min-width: 0; }
.p-thumb { width: 48px; height: 48px; border-radius: 14px; }
.p-traits { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.p-traits svg { width: 14px; height: 14px; }
.t-drops { display: flex; gap: 1px; color: var(--hairline); }
.t-drops .on { color: #5aa9e6; }
.t-drops .on svg { fill: currentColor; }
.t-frost { color: #7cc4f0; display: flex; }
.p-name { font-weight: 600; font-size: 15px; }
.p-sp { font-size: 13px; color: var(--text-2); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 3px; color: var(--text-2); }
.p-status .icon { width: 13px; height: 13px; }
.p-status.today { color: var(--info); } .p-status.late { color: var(--danger); }

/* Ficha */
.traits { display: flex; flex-wrap: wrap; gap: 6px; }
.trait { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; background: var(--card); border: 0.5px solid var(--hairline); border-radius: 999px; padding: 5px 10px; color: var(--text-2); }
.trait .icon { width: 15px; height: 15px; }
.next-care { gap: 0; }
.n-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 0.5px solid var(--hairline); }
.n-row:first-of-type { border-top: 0; padding-top: 0; }
.n-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.n-row b { font-weight: 600; font-size: 15px; } .n-row b.late { color: var(--danger); }
.n-row .body > span { font-size: 13px; color: var(--text-2); }
.n-row .tag { margin-left: auto; }
.n-next { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--hairline); }
.n-next .icon { width: 15px; height: 15px; flex: none; }
.acts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-2); padding: 9px 0; border-radius: 12px; background: var(--bg); }
.act .icon { width: 21px; height: 21px; color: var(--text); }
.act:active { background: var(--accent-soft); }
.notes-text { font-size: 14px; line-height: 1.45; }
.log li { align-items: center; }
.log-ico { display: grid; } .log-ico .icon { width: 16px; height: 16px; }
.log-ico.water { color: var(--info); } .log-ico.feed { color: var(--warn); } .log-ico.prune, .log-ico.treat, .log-ico.note { color: var(--text-2); }
.log .log-what { flex: 1; min-width: 0; }
.log .d { width: auto; color: var(--text-3); font-size: 13px; }
.log .x { margin-left: 4px; display: grid; } .log .x .icon { width: 15px; height: 15px; }
.provenance { text-align: center; font-size: 13px; color: var(--text-2); margin: 0; }

/* Ajustes */
.group-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 6px 4px -2px; }
.group-foot { font-size: 12px; color: var(--text-2); margin: -2px 4px 4px; line-height: 1.4; }
.l-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 0; border-top: 0.5px solid var(--hairline); font-size: 15px; }
.l-row:first-child { border-top: 0; }
.l-row:disabled { opacity: 0.45; cursor: default; }
.l-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.l-ico .icon { width: 17px; height: 17px; }
.l-label { flex: 1; min-width: 0; }
.l-value { display: flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 14px; }
.l-value .ok { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.l-value .ok .icon { width: 15px; height: 15px; }
.l-value .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* Sheet grabber (swipe down to close) */
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--text-3); opacity: 0.5; margin: 8px auto -6px; }
dialog#sheet { touch-action: pan-y; }

/* Seasonal tips */
.n-tip { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-2); margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--hairline); line-height: 1.4; }
.n-tip .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent); }
.tips { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tips-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.tip { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.tip .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.tip b { display: block; color: var(--text); font-weight: 600; font-size: 13px; }
.tip.now b, .tip.now .icon { color: var(--accent); }

/* Checklist: «Esta semana en el jardín», «Este mes», «Calendario del año» */
.progress { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; margin: -2px 0 12px; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.2s; }
.wx-flag { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--info-soft); margin-bottom: 10px; }
.wx-flag .icon { width: 20px; height: 20px; color: var(--info); flex: none; margin-top: 1px; }
.wx-flag b { font-size: 14px; display: block; } .wx-flag span { font-size: 13px; color: var(--text-2); }
.yt-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 0.5px solid var(--hairline); }
.wx-flag + .yt-row, .progress + .yt-row, .sec + .yt-row { border-top: 0; padding-top: 2px; }
.yt-row .body { flex: 1; min-width: 0; }
.yt-row b { font-weight: 600; font-size: 15px; display: block; }
.yt-row.done b { text-decoration: line-through; color: var(--text-2); }
.yt-how { font-size: 13px; color: var(--text-2); line-height: 1.4; margin-top: 2px; }
.yt-row.done .yt-how { display: none; }
.yt-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 5px; }
.yt-plant { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent); }
.yt-plant .icon { width: 13px; height: 13px; }
.yt-when { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.yt-when .icon { width: 13px; height: 13px; }
.yt-when.soon { color: var(--warn); } .yt-when.wx { color: var(--info); }
.yt-box { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--text-3); flex: none; display: grid; place-items: center; color: transparent; margin-top: 1px; transition: all 0.15s; }
.yt-box .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.yt-row.done .yt-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.yt-kind { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.yt-kind .icon { width: 18px; height: 18px; }
.yt-kind.treat { background: var(--danger-soft); color: var(--danger); } .yt-kind.protect, .yt-kind.weather { background: var(--info-soft); color: var(--info); }
.yt-kind.mulch { background: var(--warn-soft); color: var(--warn); }
.year { display: grid; grid-template-columns: 84px repeat(12, 1fr); gap: 4px 2px; align-items: center; font-size: 11px; }
.ym { text-align: center; color: var(--text-3); font-weight: 600; } .ym.now { color: var(--accent); }
.yr { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.yr .icon { width: 14px; height: 14px; flex: none; }
.yc { height: 10px; border-radius: 3px; background: var(--track); }
.yc.on { background: var(--accent); } .yc.on.feed { background: #e0a14a; } .yc.on.treat { background: var(--danger); }
.yc.on.protect { background: var(--info); } .yc.on.mulch { background: var(--warn); }
.yc.now { outline: 1.5px solid var(--text); outline-offset: 1px; }

/* «Uso de la app» */
.u-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.u-tiles div { background: var(--bg); border-radius: 12px; padding: 10px; }
.u-tiles span { display: block; font-size: 12px; color: var(--text-2); } .u-tiles b { font-size: 24px; font-weight: 600; }
.u-chart { height: 110px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 0.5px solid var(--hairline); }
.u-bar { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; cursor: pointer; }
.u-bar.zero { background: var(--track); }
.u-bar:hover, .u-bar:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.u-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.u-tip { font-size: 12px; color: var(--text-2); min-height: 16px; margin-top: 6px; text-align: center; }
.u-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 0.5px solid var(--hairline); font-size: 14px; }
.u-row:first-of-type { border-top: 0; padding-top: 0; }
.u-row .icon { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.u-row span { flex: 1; }
.u-row b { font-weight: 600; text-align: right; } .u-row small { display: block; font-size: 12px; font-weight: 400; color: var(--text-2); }

/* Fertiliser type */
.feed-type { display: block; font-size: 12px; color: var(--warn); font-weight: 600; margin-top: 2px; }
.n-row .body > .feed-type { color: var(--warn); }

/* Automatic irrigation */
.p-status.auto, .zone-auto { color: #3fb8ac; }
.zone-auto { display: inline-flex; align-items: center; gap: 4px; float: right; font-weight: 600; }
.zone-auto.off { color: var(--text-2); }
.zone-auto svg { width: 13px; height: 13px; }
.l-row.switch-row .switch { margin-left: auto; }
.yt-skip { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 2px 0 2px 8px; }

/* Plantas: list / grid toggle and photo grid */
.view-toggle { display: flex; gap: 2px; margin: 0 0 -4px auto; width: max-content; background: var(--card); border-radius: 9px; padding: 2px; }
.view-toggle button { width: 36px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--text-2); }
.view-toggle button[aria-checked="true"] { background: var(--hairline); color: var(--text); }
.view-toggle svg { width: 17px; height: 17px; }
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tile-wrap { position: relative; }
.tile { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #24382a; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); }
.tile.empty::after { display: none; }
.tile-ico { position: absolute; inset: 0 0 30% 0; display: grid; place-items: center; color: var(--accent); }
.tile-ico svg { width: 28px; height: 28px; }
.tile-name { position: absolute; left: 7px; right: 7px; bottom: 6px; z-index: 1; font-size: 12.5px; font-weight: 700; color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.empty .tile-name { color: var(--text); }
.tile-dot { position: absolute; top: 6px; left: 6px; z-index: 1; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }
.tile-dot.late { background: #ff6b5e; }
.tile-dot.today { background: #5aa9e6; }
.tile-add { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: var(--accent); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.tile-add svg { width: 12px; height: 12px; }

/* Own name (nick) */
.nick-input { width: 100%; font-size: 15px; color: var(--text-2); background: transparent; border: 0; padding: 2px 0; margin-top: 2px; }
.p-type { color: var(--text-2); font-style: normal; }
/* Reference photo of the species */
.ref-photo { margin: 0; }
.ref-photo figcaption { font-size: 11.5px; color: var(--text-2); margin-top: 4px; }
.species-check { display: flex; gap: 12px; align-items: flex-start; }
.species-check img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; flex: none; }
.species-check .body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.species-check i, .alt-card i { color: var(--text-2); font-size: 13px; }
.species-check small { color: var(--text-2); font-size: 11px; }
.q-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; }
.q-row span { width: 100%; }
.alt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.alt-card { display: flex; flex-direction: column; text-align: left; background: var(--hairline); border-radius: 14px; overflow: hidden; padding-bottom: 7px; }
.alt-card img, .alt-noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.alt-noimg { display: grid; place-items: center; background: #24382a; color: var(--accent); font-size: 12px; }
.alt-card b, .alt-card i { padding: 0 9px; }
.alt-card b { margin-top: 6px; font-size: 14px; }
.btn.block.secondary svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.btn.small.icon-btn { padding-left: 10px; padding-right: 10px; }
.btn.small.icon-btn svg { width: 16px; height: 16px; display: block; }
.p-status.auto.off { color: var(--text-2); display: flex; }
.tile-drip { position: absolute; top: 5px; right: 5px; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); display: grid; place-items: center; color: #3fb8ac; }
.tile-drip.off { color: #aeaeb2; }
.tile-drip svg { width: 13px; height: 13px; }

/* Sync */
.sync-status { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); }
.sync-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sync-status.warn { color: #c7771a; }
.sync-key { font: 600 18px ui-monospace, Menlo, monospace; letter-spacing: 1px; text-align: center; background: var(--card); border-radius: 12px; padding: 12px; }
.sync-qr { display: grid; place-items: center; margin: 12px auto; width: 168px; background: #fff; border-radius: 12px; padding: 6px; }
.sync-qr:empty { display: none; }
.sync-qr svg { width: 156px; height: 156px; display: block; }
.two-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.danger-text { background: transparent !important; color: #ff6b5e !important; }
.key-input { font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: 1px; }
.join-opt { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border-radius: 14px; padding: 12px; margin-top: 8px; }
.join-opt span { display: flex; flex-direction: column; gap: 2px; }
.join-opt small { color: var(--text-2); }

/* Identify by photo */
.id-cta { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.id-cta > svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.id-cta div { display: flex; flex-direction: column; gap: 2px; }
.id-tips { margin: 6px 0 10px; padding-left: 18px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.conf { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.conf.alta { background: #16301f; color: #6cc47a; }
.conf.media, .conf.baja { background: #3a2c14; color: #f0b45a; }
label.btn.block { display: block; text-align: center; cursor: pointer; }
label.link-btn { cursor: pointer; }

/* Sun, size, add menu and Explorar */
.zone-sun-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 0.5px solid var(--hairline); }
.zone-sun-row:first-child { border-top: 0; }
.seg.mini { margin: 0; flex: none; }
.seg.mini button { padding: 5px 9px; font-size: 12.5px; }
.sun-warn { display: flex; gap: 8px; align-items: center; font-size: 13.5px; border-radius: 12px; padding: 9px 12px; margin: 0; background: #3a2c14; color: #f0b45a; }
.sun-warn.no { background: #3a1a17; color: #ff8a80; }
.sun-warn svg { width: 16px; height: 16px; flex: none; }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; background: var(--card); border-radius: 14px; margin-top: 8px; }
.menu-row small { display: block; color: var(--text-2); font-size: 12.5px; }
.menu-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.menu-ic.add { background: #1f8f4e33; color: var(--accent); }
.menu-ic.explore { background: #3b82f633; color: #5aa9e6; }
.menu-ic svg { width: 20px; height: 20px; }
.verdict { display: flex; flex-direction: column; gap: 2px; border-radius: 14px; padding: 12px 14px; margin-top: 10px; }
.verdict.good { background: #16301f; } .verdict.mid { background: #3a2c14; } .verdict.bad { background: #3a1a17; }
.verdict span { font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.fit-row { display: flex; gap: 10px; padding: 9px 0; border-top: 0.5px solid var(--hairline); align-items: flex-start; }
.fit-row:first-child { border-top: 0; }
.fit-row > div { display: flex; flex-direction: column; gap: 1px; }
.fit-row span { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.fit-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.fit-ic svg { width: 15px; height: 15px; }
.fit-ic.ok { background: #16301f; color: #6cc47a; } .fit-ic.warn { background: #3a2c14; color: #f0b45a; }
.fit-ic.no { background: #3a1a17; color: #ff6b5e; } .fit-ic.info { background: var(--hairline); color: var(--text-2); }
.verdict-dot { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.verdict-dot.good { color: #6cc47a; } .verdict-dot.mid { color: #f0b45a; } .verdict-dot.bad { color: #ff6b5e; }
.t-line { display: flex; gap: 6px; align-items: center; }
.t-light { display: flex; color: #f0b45a; }
.u-garden { flex: 1; }

/* Explorar, richer */
.explore-hero { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.explore-hero .body { display: flex; flex-direction: column; gap: 2px; }
.explore-hero i { color: var(--text-2); }
.hero-credit { color: var(--text-2); font-size: 11px; }
.vchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.vchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--hairline); color: var(--text-2); }
.vchip svg { width: 13px; height: 13px; }
.vchip.ok { background: #16301f; color: #6cc47a; } .vchip.warn { background: #3a2c14; color: #f0b45a; } .vchip.no { background: #3a1a17; color: #ff6b5e; }
.mstrip-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 2px; }
.mstrip-label { font-size: 13px; font-weight: 600; }
.mstrip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.mstrip span { text-align: center; font-size: 11px; font-weight: 700; padding: 4px 0; border-radius: 6px; background: var(--hairline); color: var(--text-2); }
.mstrip span.on { background: var(--accent); color: #000; }
.mstrip span.now { outline: 1.5px solid var(--text); outline-offset: 1px; }
.mstrip-row small { color: var(--text-2); font-size: 12px; }
.season-read { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 10px; align-items: center; font-size: 14px; }
.season-read .sr-cell { text-align: center; font-weight: 600; background: var(--hairline); border-radius: 8px; padding: 5px 0; }
.buy-tips summary { font-weight: 700; cursor: pointer; }
.buy-tips ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.cmp { margin: 4px 0; font-size: 14px; color: var(--text-2); }
.sheet-actions.two-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet-actions.two-btns .btn svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.wish-main { display: flex; align-items: center; gap: 12px; flex: 1; text-align: left; }
.p-row > .x { flex: none; }

/* Sharing */
#toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: #3a3a3c; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 10; max-width: 90vw; }
#toast.show { opacity: 1; }
.two-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shared-note { margin: 0; }