/* M2 desktop shell, 12-column grid, charts and the data-rich screens (Inicio, Gastos, Salud, Perro), ported from
   docs/design/canvas/Escritorio*.dc.html. Colors come only from tokens.css. Loads before web_app.css (Propshaft
   orders :app by name), so shell overrides are scoped under .app-body to win. Breakpoints: sidebar ≥ 1024 px,
   top nav 900–1023 px, tab bar < 900 px; full charts ≥ 900 px, compact charts below. */

/* ---------- sidebar (D-1) ---------- */
.sidebar { display: none; }
.sidebar-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 10px 14px; color: var(--k-card); }
.sidebar-brand:hover { color: var(--k-card); }
.sidebar-brand .wordmark { font-size: 26px; font-weight: 800; letter-spacing: -0.045em; }
.sidebar-kicker { margin: 0; padding: 12px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--k-on-ink-muted); }
.sidebar-dogs ul { display: flex; flex-direction: column; gap: 4px; }
.sidebar-dog { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border-radius: 16px; color: var(--k-card); box-sizing: border-box; transition: background var(--k-dur-fast) ease; }
.sidebar-dog:hover { color: var(--k-card); background: color-mix(in srgb, var(--k-card) 7%, transparent); }
.sidebar-dog[aria-current="true"] { background: color-mix(in srgb, var(--k-card) 12%, transparent); }
.sidebar-dog-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar-dog-text b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-dog-text span { font-size: 12px; color: var(--k-on-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-av { width: 34px; height: 34px; border-radius: 11px; background: var(--k-ear-light); color: var(--k-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; font-family: var(--k-font-display); font-weight: 800; font-size: 15px; }
.sidebar-dogs li:nth-child(even) .sidebar-av, .by-dog li:nth-child(even) .sidebar-av { background: var(--k-tag-health-bg); }
.sidebar-add { display: flex; align-items: center; gap: 10px; min-height: 46px; margin-top: 6px; padding: 0 12px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--k-on-ink-muted) 45%, transparent); color: var(--k-lime); font-size: 14px; font-weight: 600; box-sizing: border-box; }
.sidebar-add:hover { color: var(--k-lime); border-color: var(--k-lime); background: color-mix(in srgb, var(--k-lime) 8%, transparent); }
.sidebar-sections { display: flex; flex-direction: column; gap: 4px; }
.sidebar-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 14px; color: var(--k-on-ink-muted); font-size: 15px; font-weight: 500; }
.sidebar-link:hover { color: var(--k-card); background: color-mix(in srgb, var(--k-card) 6%, transparent); }
.sidebar-link[aria-current="page"] { background: var(--k-card); color: var(--k-ink-night); font-weight: 600; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.sidebar-record { min-height: 50px; border-radius: var(--k-r-pill); background: var(--k-lime); color: var(--k-ink-night); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform var(--k-dur-fast) var(--k-ease-out); }
.sidebar-record:hover { color: var(--k-ink-night); transform: translateY(-1px); }
.sidebar-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--k-r-pill); background: var(--k-coral); color: var(--k-ink-night); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.sidebar-locale { display: flex; justify-content: center; }
.sidebar a:focus-visible { outline: 2px solid var(--k-lime); outline-offset: 2px; }

@media (min-width: 1024px) {
  .app-body.has-sidebar { padding-left: 264px; background: linear-gradient(to right, var(--k-ink-night) 264px, var(--k-paper) 264px); }
  .app-body.has-sidebar .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 25; width: 264px; padding: 22px 14px; box-sizing: border-box; background: var(--k-ink-night); color: var(--k-card); display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
  .app-body.has-sidebar .app-top { display: none; }
  .app-body.has-sidebar .app-main { max-width: 1240px; padding: 28px 36px 48px; gap: 20px; }
  .app-body.has-sidebar dialog.sheet { margin-right: 36px; }
}

/* ---------- page head ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.page-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-kicker { display: none; margin: 0; font-size: 14px; color: var(--k-text-muted); }
.page-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.desk-only { display: none !important; }
.page-head--always .dog-head { display: flex; align-items: center; gap: 16px; }
.page-head--always .dog-avatar-lg { width: 64px; height: 64px; border-radius: 20px; font-size: 28px; }
.period-seg .seg-btn { min-height: 44px; }
@media (min-width: 1024px) {
  .page-kicker { display: block; }
  .desk-only { display: inline-flex !important; }
  .phone-only { display: none !important; }
  .page-head .page-h1, .page-head .page-title { font-size: 36px; color: var(--k-ink); line-height: 1.05; }
  .page-head .seg[aria-label] { align-self: auto; }
  .dash-top > .page-head-actions > nav.seg:not(.period-seg) { display: none; }
  .page-head--always .dog-avatar-lg { width: 72px; height: 72px; border-radius: 24px; font-size: 32px; }
  .app-main .quick { display: none; }
}

/* ---------- 12-column grid (D-2) ---------- */
.grid-12 { display: flex; flex-direction: column; gap: 16px; }
.grid-12 > * { min-width: 0; }
.stack-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1024px) {
  .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
  .stack-col { gap: 20px; }
  .grow-card { flex: 1; }
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- cards ---------- */
.card-title { margin: 0; font-family: var(--k-font-display); letter-spacing: -0.03em; font-size: 18px; font-weight: 700; color: var(--k-ink); }
.card-subtitle { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--k-text-muted); font-family: var(--k-font-body); letter-spacing: 0; }
.card-figure { font-size: 22px; font-weight: 800; color: var(--k-ink); }
.push-end { margin-top: auto; }
.stack-xs { display: flex; flex-direction: column; gap: 2px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--k-r-pill); font-size: 12px; font-weight: 600; }
.tag.is-allergy { background: var(--k-tag-skin-bg); color: var(--k-tag-skin-fg); }
.tag.is-condition { background: var(--k-tag-health-bg); color: var(--k-tag-health-fg); }
.status-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--k-r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-chip.is-up_to_date { background: var(--k-tag-food-bg); color: var(--k-tag-food-fg); }
.status-chip.is-due_soon, .status-chip.is-overdue { background: var(--k-tag-skin-bg); color: var(--k-tag-skin-fg); }
.status-chip.is-unknown, .status-chip.is-off { background: var(--k-line-soft); color: var(--k-text-muted); }

/* ---------- KPIs ---------- */
.dash-kpis.kpi-grid, .kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; height: 100%; }
.dash-kpis .kpi, .kpi-row .kpi { background: var(--k-card); border: 1px solid var(--k-line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-kpis .kpi dt, .kpi-row .kpi dt { font-size: 12px; font-weight: 600; color: var(--k-text-muted); }
.dash-kpis .kpi dd, .kpi-row .kpi dd { margin: 0; font-size: 26px; font-weight: 800; color: var(--k-ink); line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-kpis .kpi .note, .kpi-row .kpi .note { font-size: 12px; color: var(--k-text-muted); }
.dash-kpis .kpi .note.up, .kpi-row .kpi .note.up { color: var(--k-tag-skin-fg); font-weight: 600; }
.dash-kpis .kpi .note.down, .kpi-row .kpi .note.down { color: var(--k-tag-food-fg); font-weight: 600; }
.dash-kpis .kpi .note a { color: var(--k-tag-health-fg); text-decoration: underline; }
.kpi-row .kpi.is-ink { background: var(--k-ink-night); border-color: var(--k-ink-night); }
.kpi-row .kpi.is-ink dt, .kpi-row .kpi.is-ink .note { color: var(--k-on-ink-muted); }
.kpi-row .kpi.is-ink dd { color: var(--k-card); }
@media (min-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .dash-kpis .kpi dd { font-size: clamp(20px, 1.9vw, 28px); }
  .kpi-row .kpi dd { font-size: clamp(22px, 2.1vw, 30px); }
}

/* ---------- Inicio hero ---------- */
.dash-hero { gap: 20px; }
.hero-main { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.hero-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.hero-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-title .hero-edit { margin-left: auto; }
.hero-meta { font-size: 14px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-tag { padding: 5px 11px; border-radius: var(--k-r-pill); font-size: 12px; font-weight: 600; }
.hero-tag.is-allergy { background: var(--k-tag-skin-bg); color: var(--k-tag-skin-fg); }
.hero-tag.is-condition { background: var(--k-tag-health-bg); color: var(--k-tag-health-fg); }
.hero-chips { margin-top: 2px; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; box-sizing: border-box; }
.hero-chip.is-due { background: var(--k-lime); color: var(--k-ink-night); border-color: var(--k-lime); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--k-ink-night); flex: none; animation: kpulse 2s infinite; }
@keyframes kpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--k-ink-night) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.hero-spend { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--k-card) 12%, transparent); font-size: 13px; }
.hero-amount { font-family: var(--k-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-size: 38px; font-weight: 800; line-height: 1; color: var(--k-card); white-space: nowrap; }
.hero-change { font-size: 13px; font-weight: 600; color: var(--k-ear-light); }
@media (min-width: 900px) {
  .app-main .dash-hero { flex-direction: row; align-items: stretch; padding: 26px; gap: 24px; }
  .hero-main { flex: 1; gap: 24px; }
  .hero-spend { flex: none; width: 210px; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--k-card) 12%, transparent); justify-content: center; }
  .hero-amount { font-size: 42px; }
  .dash-hero .dog-avatar-lg { width: 96px; height: 96px; border-radius: 30px; font-size: 44px; }
  .app-main .dash-hero h1 { font-size: 52px; }
}

/* ---------- charts (D-7) ---------- */
.chart { position: relative; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--k-line-soft); stroke-width: 1; }
.chart-average { stroke: var(--k-ink); stroke-width: 1.5; stroke-dasharray: 4 4; pointer-events: none; }
.chart-hit { fill: transparent; }
.chart-health { fill: var(--k-violet); }
.chart-food { fill: var(--k-lime-strong); }
.chart-care { fill: var(--k-tag-care-fg); }
.chart-mark { cursor: pointer; outline: none; transition: opacity var(--k-dur-fast) ease; }
.chart-mark.is-out { opacity: .3; }
.chart-bars.has-active .chart-mark:not(.is-active) { opacity: .35; }
.chart-mark:focus-visible .chart-hit { stroke: var(--k-violet); stroke-width: 2; fill: color-mix(in srgb, var(--k-violet) 8%, transparent); }
.chart-x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); font-family: var(--k-font-mono); font-size: 11px; color: var(--k-text-muted); text-align: center; }
.chart-x .is-current { color: var(--k-ink); font-weight: 500; }
.chart-x .is-out { opacity: .55; }
.chart-line-ends .chart-x { display: flex; justify-content: space-between; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--k-text-muted); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.dash-key { width: 16px; border-top: 2px dashed var(--k-ink); display: inline-block; }
.chart-tip { position: absolute; z-index: 5; top: 0; left: 0; transform: translateX(-50%); min-width: 150px; padding: 10px 12px; border-radius: 14px; background: var(--k-ink-night); color: var(--k-card); font-size: 12px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; box-shadow: 0 14px 30px -14px var(--k-ink-night); white-space: nowrap; }
.chart-tip[hidden] { display: none; }
.chart-tip-row { display: flex; justify-content: space-between; gap: 14px; }
.chart-tip-row > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.chart-tip-row.is-total { border-top: 1px solid color-mix(in srgb, var(--k-card) 15%, transparent); padding-top: 4px; font-weight: 600; }
.chart-compact { display: flex; }
.chart-full { display: none; }
@media (min-width: 900px) {
  .chart-compact { display: none; }
  .chart-full { display: flex; }
}
.chart-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border-radius: 18px; border: 1.5px dashed var(--k-line); color: var(--k-text-muted); font-size: 14px; line-height: 1.5; }
.chart-empty-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--k-paper); color: var(--k-ink); display: flex; align-items: center; justify-content: center; }

/* line */
.chart-area { fill: var(--k-tag-health-bg); opacity: .7; }
.chart-path { stroke: var(--k-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--k-card); stroke: var(--k-ink); stroke-width: 2; }
.chart-dot.is-last { fill: var(--k-lime); stroke: var(--k-ink-night); }
.chart-mark:focus-visible .chart-dot, .chart-mark.is-active .chart-dot { stroke: var(--k-violet); stroke-width: 3; }

/* donut */
.donut-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.donut-svg { width: min(100%, 200px); height: auto; transform: rotate(0deg); }
.donut-ring { stroke: var(--k-line-soft); }
.donut-arc { transition: stroke-width var(--k-dur-fast) ease; }
.arc-health { stroke: var(--k-violet); }
.arc-food { stroke: var(--k-lime-strong); }
.arc-care { stroke: var(--k-tag-care-fg); }
.chart-mark:focus-visible .donut-arc, .chart-mark.is-active .donut-arc { stroke-width: 7.5; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.donut-total { font-size: 21px; font-weight: 800; color: var(--k-ink); }
.donut-caption { font-size: 12px; font-weight: 600; color: var(--k-text-muted); }
/* one grid for all rows so the % and amount columns line up and shrink to the card (the list is aria-hidden) */
.donut-legend { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px 12px; font-size: 14px; }
.donut-legend li { display: contents; }
.donut-legend .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend .pct { text-align: right; color: var(--k-text-muted); white-space: nowrap; }
.donut-legend .amt { text-align: right; font-weight: 500; white-space: nowrap; }

/* highlights and mini stats */
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--k-line-soft); padding-top: 14px; }
.highlights > div, .mini-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.highlights .k, .mini-stats dt { font-size: 12px; font-weight: 600; color: var(--k-text-muted); }
.highlights b { font-size: 15px; font-weight: 600; }
.highlights b .muted { font-size: 13px; font-weight: 500; }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; border-top: 1px solid var(--k-line-soft); padding-top: 12px; }
.mini-stats dd { margin: 0; font-size: 15px; }
@media (max-width: 599px) { .highlights { grid-template-columns: 1fr; } }

/* ---------- Gastos ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.filters .seg { position: relative; overflow: visible; flex-wrap: wrap; }
.filters .seg-btn { min-height: 44px; } /* touch targets ≥ 44 px (LT-10) */
.custom-dates { position: relative; }
.custom-dates > summary { list-style: none; }
.custom-dates > summary::-webkit-details-marker { display: none; }
.custom-dates-form { position: absolute; z-index: 10; top: calc(100% + 8px); left: 0; width: 260px; padding: 16px; border-radius: 18px; background: var(--k-card); border: 1px solid var(--k-line); box-shadow: var(--k-shadow-hover); display: flex; flex-direction: column; gap: 10px; }
.custom-dates-form .field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.by-dog { gap: 18px; }
.by-dog li { display: flex; flex-direction: column; gap: 8px; }
.by-dog-head { display: flex; align-items: center; gap: 10px; }
.by-dog-head b { flex: 1; font-size: 15px; }
.by-dog-head .mono { font-weight: 500; }
.hbar { display: flex; height: 14px; border-radius: var(--k-r-pill); background: var(--k-line-soft); overflow: hidden; }
.hbar span { display: block; height: 100%; border-radius: var(--k-r-pill); background: var(--k-ink); }
.hbar span.is-alt { background: var(--k-lavender); }
.top-kinds { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.top-kinds li { display: flex; justify-content: space-between; gap: 12px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--k-text-muted); padding: 0 10px 10px; border-bottom: 1px solid var(--k-line-soft); }
.data-table td { padding: 12px 10px; border-bottom: 1px solid var(--k-line-soft); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--k-paper); }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table .mono { white-space: nowrap; }
.data-table b { font-weight: 600; }
.cell-sub { display: block; font-size: 12px; color: var(--k-text-muted); }
.cat-chip { display: inline-flex; padding: 4px 10px; border-radius: var(--k-r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.col-opt { display: none; }
@media (min-width: 900px) {
  .col-opt { display: table-cell; }
  .cell-sub { display: none; }
}
@media (max-width: 1199px) { .records-table .col-wide { display: none; } }

/* ---------- Salud ---------- */
.timeline { gap: 12px; }
.tl-grid { display: grid; grid-template-columns: 84px minmax(0, 1fr); padding-top: 26px; }
.tl-labels { display: flex; flex-direction: column; }
.tl-labels li { height: 56px; display: flex; align-items: center; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--k-line-soft); }
.tl-body { position: relative; height: 168px; }
.tl-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-month-line { stroke: var(--k-line-soft); stroke-width: 1; stroke-dasharray: 2 4; }
.tl-lane { position: absolute; left: 0; right: 0; height: 56px; }
.tl-lane-0 { top: 0; } .tl-lane-1 { top: 56px; } .tl-lane-2 { top: 112px; }
.tl-dot, .tl-bar, .tl-today, .tl-months span { visibility: hidden; }
.timeline.is-positioned .tl-dot, .timeline.is-positioned .tl-bar, .timeline.is-positioned .tl-today, .timeline.is-positioned .tl-months span { visibility: visible; }
.tl-dot { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 3px solid var(--k-card); box-shadow: 0 0 0 1.5px currentColor; box-sizing: content-box; cursor: pointer; transition: transform .25s var(--k-ease-spring); }
.tl-dot::after { content: ""; position: absolute; inset: -14px; }
.tl-dot.is-vaccine { background: var(--k-violet); color: var(--k-violet); }
.tl-dot.is-visit { background: var(--k-ink); color: var(--k-ink); }
.tl-dot:not(.is-vaccine):not(.is-visit):not(.is-next) { background: var(--k-ink); color: var(--k-ink); }
.tl-dot.is-next { background: var(--k-card); border: 2px dashed var(--k-violet); box-shadow: none; width: 14px; height: 14px; margin: -9px 0 0 -9px; }
.tl-dot:hover, .tl-dot:focus-visible, .tl-dot.is-active { transform: scale(1.35); outline: none; }
.tl-dot:focus-visible { box-shadow: 0 0 0 2px var(--k-card), 0 0 0 4px var(--k-violet); }
.tl-bar { position: absolute; top: 50%; height: 12px; min-width: 8px; margin-top: -6px; border-radius: var(--k-r-pill); background: var(--k-ear-dark); cursor: pointer; }
.tl-bar.is-now { background: var(--k-coral); }
.tl-bar:focus-visible { outline: 2px solid var(--k-violet); outline-offset: 2px; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--k-ink-night); pointer-events: none; }
.tl-today span { position: absolute; top: -24px; transform: translateX(-50%); padding: 2px 8px; border-radius: var(--k-r-pill); background: var(--k-lime); color: var(--k-ink-night); font-size: 11px; font-weight: 700; white-space: nowrap; }
.tl-months { position: relative; height: 22px; font-family: var(--k-font-mono); font-size: 11px; color: var(--k-text-muted); }
.tl-months span { position: absolute; top: 6px; transform: translateX(-50%); }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--k-text-muted); }
.tl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tl-sw-vaccine { background: var(--k-violet); }
.tl-sw-visit { background: var(--k-ink); }
.tl-sw-treatment { background: var(--k-ear-dark); }
.tl-sw-next { background: var(--k-card); border: 2px dashed var(--k-violet); box-sizing: border-box; }
@media (max-width: 599px) { .tl-months span:nth-child(even) { display: none; } }
@media (min-width: 900px) { .tl-grid { grid-template-columns: 120px minmax(0, 1fr); } .tl-labels li { font-size: 14px; } }
.med-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--k-tag-skin-bg) 45%, var(--k-card)); border: 1px solid var(--k-tag-skin-bg); }
.med-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.med-head b { font-size: 17px; font-weight: 700; }
.med-day { font-size: 13px; color: var(--k-tag-skin-fg); white-space: nowrap; }
.med-progress { display: flex; height: 10px; }
.progress.med-progress span { background: var(--k-coral); }
.share-card { gap: 14px; }
.share-card .card-title { color: var(--k-card); }
.share-stats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--k-on-ink-muted); }
.no-advice .disclaimer { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.no-advice .disclaimer .ic { flex: none; color: var(--k-tag-skin-fg); margin-top: 1px; }

/* ---------- Perro ---------- */
.facts-list { display: flex; flex-direction: column; }
.p-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 56px; padding: 6px 0; border-top: 1px solid var(--k-line-soft); }
.p-row:first-child { border-top: 0; }
.p-lbl { width: 96px; flex: none; margin: 0; font-family: var(--k-font-body); letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--k-text-muted); }
.p-val { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.p-edit { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--k-line); background: var(--k-card); color: var(--k-tag-health-fg); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.p-edit:hover { color: var(--k-tag-health-fg); border-color: var(--k-ink); }
.p-edit-body { flex: 1 1 100%; min-width: 0; padding-bottom: 8px; }
.p-edit-body .card { padding: 0; }
.pill-btn { min-height: 44px; padding: 0 14px; border-radius: var(--k-r-pill); border: 1px solid var(--k-line); display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--k-tag-health-fg); box-sizing: border-box; }
.pill-btn:hover { color: var(--k-tag-health-fg); border-color: var(--k-ink); }
.weight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.weight-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.weight-form .wz-stepper-wrap { gap: 0; }
.weight-form .wz-stepper { gap: 10px; padding: 6px; border-radius: var(--k-r-pill); background: var(--k-paper); }
.weight-form .wz-round { width: 44px; height: 44px; font-size: 20px; }
.weight-form .wz-big { font-size: 26px; min-width: 96px; }
.weight-form .wz-big small { font-size: 14px; }
.weight-days { gap: 8px; }
.weight-days .wz-chip { min-height: 44px; font-size: 14px; }
.weight-history > summary { list-style: none; cursor: pointer; }
.weight-history > summary::-webkit-details-marker { display: none; }
.weight-list { display: flex; flex-direction: column; }
.weight-item { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--k-line-soft); }
.weight-item .mono:first-child { flex: 1; color: var(--k-text-muted); font-size: 13px; }
.btn.danger-btn { border-color: var(--k-coral); color: var(--k-tag-skin-fg); border-radius: var(--k-r-pill); }
.btn.danger-btn:hover { background: var(--k-tag-skin-bg); color: var(--k-tag-skin-fg); }
.share-table .num { width: 1%; }
.table-wrap { overflow-x: auto; min-width: 0; }
#share .ch > .stack-xs { flex: 1 1 240px; }
/* hero profile link: icon only inside the title row (its name stays in aria-label) */
.app-main .hero-title .hero-edit { width: 44px; min-height: 44px; padding: 0; border-radius: 14px; }
.app-main .hero-title .hero-edit span { display: none; }

/* hero title row: the status pill centres on the name; the profile pencil stays top-right even when the row wraps */
.app-main .hero-title { position: relative; padding-right: 54px; }
.app-main .hero-title .hero-edit { position: absolute; top: 0; right: 0; margin: 0; }
.hero-title .status-pill { align-self: center; }
/* 1024–1359 px: the hero is span-8 next to the sidebar, so it gets tighter type and a narrower spend column */
@media (min-width: 1024px) and (max-width: 1359px) {
  .app-main .dash-hero { padding: 22px; gap: 18px; }
  .hero-main { gap: 16px; }
  .dash-hero .dog-avatar-lg { width: 72px; height: 72px; border-radius: 24px; font-size: 34px; }
  .app-main .dash-hero h1 { font-size: 42px; }
  .hero-spend { width: 170px; padding-left: 18px; }
  .hero-amount { font-size: 34px; }
}
/* timeline tips can be long (concept + date): wrap instead of running past the card */
.timeline .chart-tip { white-space: normal; max-width: 240px; }