/* Mate UI · theme v1 (feat/ui-redesign)
   Apple-style refinement layer loaded AFTER app.css. Pure CSS: no DOM/JS/API changes, so it can be
   rolled back by removing one <link>. Principles: system palette, SF type scale, one accent (systemBlue),
   hairline separators instead of boxes, calm text-heavy screens, big tap targets (>=44px). */
/* Scoped to the phone/tablet layout: html.desk keeps its own 3-pane desktop theme. */
html:not(.desk){

&{
  /* iOS dark system colors */
  --bg:#0E2A1F; --surface:#143628; --surface-2:#1B4332; --surface-3:#24513D;
  --border:rgba(246,241,231,.10); --border-2:rgba(246,241,231,.18);
  --text:#F6F1E7; --text-2:rgba(246,241,231,.74); --text-3:rgba(246,241,231,.60);
  --accent:#0A84FF; --accent-hover:#409CFF; --accent-text:#64B0FF; --accent-soft:rgba(10,132,255,.16);
  --ok:#30D158; --danger:#FF453A; --warn:#FF9F0A;
  --r-sm:8px; --r:10px; --r-md:14px; --r-lg:22px;
  --sh-2:0 0 0 .5px rgba(255,255,255,.06) inset;
  --mat:rgba(20,54,40,.78);
  font-family:var(--font-ui);
}
& body{font-size:17px;line-height:1.35;letter-spacing:-.022em}

/* Header: iOS large-title feel, quieter actions */
.top{height:56px;padding:0 8px 0 20px}
.mark{display:none}
.brand h1{font-family:var(--font-ui);font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.025em}
.upd{font-size:13px;color:var(--text-3)}
.icon-btn{color:var(--accent);border-radius:50%}
.icon-btn:hover{background:var(--surface)}

/* Profile switcher: scrollable segmented control, never truncates labels */
.pseg{overflow-x:auto;scrollbar-width:none;height:36px;border-radius:12px;background:rgba(118,118,128,.20)}
.pseg::-webkit-scrollbar{display:none}
.ps{flex:0 0 auto;padding:0 12px;font-size:14px}
.ps .l{overflow:visible}
.ps-th{border-radius:10px;background:#636366}
.ps + .ps::before{display:none}

/* Progress row */
.pg-txt{font-size:15px}
.pg-bar{height:4px;background:var(--surface-2)}
.pg-sess{height:32px;border-radius:16px;font-size:15px}

/* Cards: one surface, hairline, generous whitespace, clear hierarchy */
.center{padding:12px 16px 0}
.card{padding:22px 20px;border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-2)}
.card.back1{background:#151517}.card.back2{background:#0F0F10}
.c-sec,.c-eyebrow{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:0}
.c-who{font-family:var(--font-ui);font-size:24px;line-height:29px;font-weight:700;letter-spacing:-.024em}
.c-who .sub{font-size:15px;line-height:20px;color:var(--text-2)}
.c-what{font-size:17px;line-height:24px;color:rgba(235,235,245,.86)}
.c-motivo,.c-why{font-size:15px;color:var(--text-2)}
.chip,.pill,.c-prof{border-radius:999px;font-size:13px}
/* Draft = quoted message bubble, no heavy border box */
.c-draft{border:0;border-radius:18px;background:var(--surface-2);padding:14px 16px}
.c-draft small,.c-ctx small{font-size:12px;letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--text-3)}
.c-ctxbtn,.c-open,.c-open2{color:var(--accent);font-weight:600}

/* Bottom action bar + tab bar: translucent material ("liquid glass" within web limits) */
.actions,.tabbar,.searchbtn,.toast{background:var(--mat)!important;-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border:.5px solid rgba(255,255,255,.10)!important;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.act{font-size:11px;font-weight:600;color:var(--text-2)}
.act .o{width:46px;height:40px;border-radius:20px}
.act.big .o{background:rgba(48,209,88,.18);color:var(--ok)}
.act.big.send .o{background:var(--accent);color:#fff}
.tabbar .tab{font-size:10.5px;font-weight:600}
.tabbar .tab.on,.tabbar .tab.onm{color:var(--accent);background:rgba(255,255,255,.10)}
.tabbar .tab.drtab.has .n{background:var(--danger)}

/* Sheets (detail, chat, settings): grouped iOS sheet */
.sheet{background:#143628;border-radius:24px 24px 0 0}
.grab{background:rgba(235,235,245,.3)}
.btn{border-radius:12px;min-height:44px;font-weight:600}
.btn.primary,.btn.p{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Chat (Pedile a Mate): iMessage-like bubbles */
.bub{border-radius:20px;font-size:17px;line-height:23px;padding:9px 14px}
.composer{background:var(--mat);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.composer textarea,.composer input{border-radius:20px;background:var(--surface-2);border:.5px solid var(--border-2);font-size:17px}

/* Hoy / Mañana summary: inset grouped lists */
.hy{padding:4px 16px 120px}
.hy-big{font-family:var(--font-ui);font-weight:700;letter-spacing:-.025em}
.hy-sec{font-size:13px;font-weight:600;color:var(--text-2);text-transform:none;letter-spacing:0}
.hy-list,.hy-card,.hy-sh-card{border-radius:16px;background:var(--surface)}
.hy-it{min-height:44px}

@media (prefers-reduced-transparency:reduce){
  .actions,.tabbar,.searchbtn,.toast,.composer{background:#143628!important;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Wallet widget (tiny USDC + SOL, tap to Pay) — styles the #wPill added by the wallet workstream */
.wpill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;border-radius:14px;flex:none;border:0;background:var(--surface);
  color:var(--text);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.wpill span + span{color:var(--text-2)}
.wpill:active{transform:scale(.95)}

}

/* Both layouts: profile switcher scrolls instead of truncating ("To… Pa… Perso…") */
.pseg{overflow-x:auto;scrollbar-width:none}
.pseg::-webkit-scrollbar{display:none}
.pseg .ps{flex:0 0 auto;padding:0 12px}
.pseg .ps .l{overflow:visible}
.pseg .ps + .ps::before{display:none}
/* Phone: primary action no longer overlaps its label */
html:not(.desk) .actions .act.big .o{width:46px;height:40px;border-radius:20px;margin:0;transform:none}

/* Header never overlaps: title shrinks before actions do */
html:not(.desk) .top{gap:8px}
html:not(.desk) .brand{flex:1 1 auto;min-width:0;overflow:hidden}
html:not(.desk) .brand h1{font-size:24px;line-height:30px}
html:not(.desk) .top-actions{flex:none;align-items:center;gap:0}
html:not(.desk) .top-actions .icon-btn{width:40px}