@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Nunito+Sans:wght@300;400;500;600&display=swap');*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal:        #5B9BAF;
  --teal-dark:   #4A8799;
  --teal-light:  #7AB5C7;
  --teal-pale:   #EAF4F7;
  --teal-mist:   #F2F9FB;
  --cream:       #F5F0EB;
  --cream-dark:  #EDE7DF;
  --cream-deeper:#E3DBD1;
  --charcoal:    #2E2E2E;
  --charcoal-md: #555;
  --charcoal-lt: #777;
  --charcoal-xl: #9E9E9E;
  --border:      #E2DBD3;
  --border-lt:   #EDE8E2;
  --white:       #FFFFFF;
  --green:       #3DAB74;
  --green-bg:    #EBF8F2;
  --red:         #D96B6B;
  --red-bg:      #FDF1F1;
  --amber:       #D4A040;
  --amber-bg:    #FDF6E8;
  --purple:      #8B7EC8;
  --purple-bg:   #F0EEF9;
  --blue:        #5B8FD4;
  --blue-bg:     #EBF1FA;
  --nav-bg:      #2C4A52;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 100px;
  --shadow-sm:   0 1px 4px rgba(46,46,46,0.07);
  --shadow:      0 2px 12px rgba(46,46,46,0.09);
  --shadow-lg:   0 8px 28px rgba(46,46,46,0.12);
  /* Type scale — 7 steps. Use var(--text-*) instead of raw px. */
  --text-eyebrow: 10px;  /* uppercase tracked labels */
  --text-xs:      11px;  /* meta, sub rows, badges */
  --text-sm:      12px;  /* secondary labels, chips */
  --text-md:      14px;  /* body default, row titles */
  --text-lg:      16px;  /* sheet titles, emphasized body */
  --text-xl:      20px;  /* KPI numbers */
  --text-2xl:     24px;  /* page-level numbers */
  --font:        'Nunito Sans', sans-serif;
  --font-d:      'Nunito', sans-serif;
  --sat: env(safe-area-inset-top, 44px);
  --sab: env(safe-area-inset-bottom, 34px);
  --week-row-h: 48px;
  /* ── Z-index scale ──
     10   banners (demo, read-only)
     50   fab-overlay
     51   fab-menu
     52   fab
     200  drawer-overlay
     201  drawer
     300  expediente-backdrop
     301  expediente-card / admin-panel
     350  sheets (payment, new patient/session/note/document)
     400  note-editor (full takeover)
     500  doc-viewer-backdrop
     501  doc-viewer-panel
     600  install-prompt
  */
  --z-banner:         10;
  --z-fab-overlay:    50;
  --z-fab-menu:       51;
  --z-fab:            52;
  --z-sheet:          350;
  --z-drawer-overlay: 200;
  --z-drawer:         201;
  --z-expediente-bg:  300;
  --z-expediente:     301;
  --z-note-editor:    400;
  --z-doc-viewer-bg:  500;
  --z-doc-viewer:     501;
  --z-install:        600;
  --z-tutorial:       700;
}

html, body {
  font-family: var(--font);
  background: var(--white);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  /* Block the OS text-selection / magnifier loupe from firing on
     long-press by default. Anything that's meaningful to copy (notes,
     patient info, cancel reasons, etc.) opts back in via .selectable. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#root { height: 100%; }

/* Opt-in: re-enable native text selection + the iOS magnifier for
   content where copying is plausible (note bodies, free-form text, etc.). */

.selectable,
.selectable * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Keep the iOS callout on phone / email links so long-press still opens
   the native "Call / Add to Contacts / Copy" menu. */

a[href^="tel:"], a[href^="mailto:"] {
  -webkit-touch-callout: default;
}

.shell {
  display: flex; flex-direction: column;
  height: 100dvh;
  width: 100%;
  background: var(--white);
  position: relative; overflow: clip;
}

.main-content { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; overflow: clip; }

.status-bar { height: var(--sat); background: var(--white); flex-shrink: 0; }

/* TOPBAR — minimal white bar matching the landing .lp-nav */

.topbar {
  background: var(--white);
  padding: 6px 14px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
  border-bottom: 1px solid var(--border-lt);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.topbar-brand { display: flex; align-items: center; gap: 6px; font-family: var(--font-d); font-size: 16px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.3px; position: absolute; left: 50%; transform: translateX(-50%); transition: background 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-tap-highlight-color: transparent; user-select: none; padding: 4px 12px; border-radius: var(--radius-pill); }

.topbar-brand:active { background: var(--teal-pale); color: var(--teal-dark); transform: translateX(-50%) scale(0.88); }

.topbar-right { display: flex; align-items: center; gap: 6px; }

.icon-btn {
  /* Hit target bumped to 44px (iOS HIG minimum) — previously 38px, which
     caused mis-taps in the dense topbar cluster. Visual size is preserved
     via the inner SVG; only the transparent padding grows. */
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--charcoal);
  -webkit-tap-highlight-color: transparent;
}

.icon-btn:active { opacity: 0.6; }

.admin-btn {
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--charcoal-xl); font-size: 10px; font-weight: 600; padding: 2px 6px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.admin-btn:active { opacity: 0.6; }

/* HAMBURGER */

.hamburger {
  /* Bumped from 32×32 to 44×44 to hit iOS HIG minimum; the visible lines
     remain 18×2 — the extra pixels are invisible touch padding. */
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.hamburger:active { opacity: 0.6; }

.hamburger-line {
  width: 18px; height: 2px; background: var(--charcoal); border-radius: 2px;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

.hamburger.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.hamburger.open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }

.hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.avatar-sm {
  /* Avatar visually stays 28px, but when used as a button (topbar settings
     shortcut) we expand the hit area to 44×44 with a transparent border-
     box so it satisfies the HIG without resizing the circle itself. */
  width: 28px; height: 28px; background: var(--teal-pale); border-radius: 50%;
  min-width: 28px; min-height: 28px; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 11px; font-weight: 800; color: var(--teal-dark);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

button.avatar-sm {
  position: relative;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  background: transparent;
  padding: 0;
  z-index: 0;
}

button.avatar-sm::before {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--teal-pale);
  z-index: -1;
}

/* DRAWER OVERLAY */

.drawer-overlay {
  position: fixed; inset: 0; background: rgba(20,35,40,0.5);
  z-index: var(--z-drawer-overlay); backdrop-filter: blur(2px);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes toastIn {
  0%   { opacity: 0; transform: translateY(-18px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.01); }
  80%  { transform: translateY(-1px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px) scale(0.96); } }

@keyframes screenSlideLeft {
  0%   { opacity: 0.5; transform: translateX(30px); }
  70%  { opacity: 1; transform: translateX(-3px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes screenSlideRight {
  0%   { opacity: 0.5; transform: translateX(-30px); }
  70%  { opacity: 1; transform: translateX(3px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes ptr-spin { to { transform: rotate(360deg); } }

@keyframes ptr-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.15) rotate(180deg); opacity: 0.7; }
}

@keyframes ptr-check-in {
  0% { transform: scale(0) rotate(-90deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes ptr-check-draw {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

@keyframes ptr-text-in {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Expediente panel: mobile base (fullscreen bottom-up) ──
   Transform + transition are driven inline by PatientExpediente.jsx so
   the open, drag, and close states share one animation pipeline. */

.expediente-desktop-panel {
  left: 0; right: 0;
  border-radius: 24px 24px 0 0;
}

/* Hide FAB + bottom tabs when expediente is open */

.expediente-open ~ .fab,
.expediente-open ~ .fab-overlay,
.expediente-open ~ .fab-menu,
.expediente-open ~ .bottom-tabs,
body:has(.expediente-open) .fab,
body:has(.expediente-open) .fab-overlay,
body:has(.expediente-open) .fab-menu,
body:has(.expediente-open) .bottom-tabs { display: none !important; }

/* DRAWER PANEL */

.drawer {
  position: fixed; top: 0; left: 0;
  width: 100%;
  height: 100dvh;
  display: flex; flex-direction: column;
  pointer-events: none;
  z-index: var(--z-drawer);
}

.drawer-panel {
  position: absolute; top: 0; left: 0;
  width: 78%; max-width: 300px;
  height: 100%;
  background: var(--nav-bg);
  pointer-events: all;
  display: flex; flex-direction: column;
  will-change: transform;
  box-shadow: 4px 0 40px rgba(0,0,0,0.3);
}

.drawer-header {
  padding: calc(var(--sat) + 20px) 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.drawer-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-d); font-size: 22px; font-weight: 800;
  color: white; letter-spacing: -0.4px; margin-bottom: 16px;
}

.drawer-user { display: flex; align-items: center; gap: 12px; }

.drawer-avatar {
  width: 44px; height: 44px; background: var(--teal-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 16px; font-weight: 800; color: white;
  flex-shrink: 0;
}

.drawer-user-name { font-family: var(--font-d); font-size: 15px; font-weight: 700; color: white; }

.drawer-user-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }

.drawer-nav { flex: 1; min-height: 0; padding: 12px 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

.drawer-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); padding: 12px 24px 4px;
}

.drawer-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 24px;
  cursor: pointer; border: none; background: none; width: 100%;
  font-family: var(--font); text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.35s;
  position: relative;
}

.drawer-item:active { background: rgba(255,255,255,0.06); }

.drawer-item.active { background: rgba(91,155,175,0.18); }

.drawer-item.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; background: var(--teal-light); border-radius: 0 3px 3px 0;
}

.drawer-item-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: rgba(255,255,255,0.5);
}

.drawer-item.active .drawer-item-icon { color: var(--teal-light); }

.drawer-item-label { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.65); }

.drawer-item.active .drawer-item-label { color: white; font-weight: 700; }

.drawer-footer {
  padding: 16px 24px calc(var(--sab) + 16px);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.drawer-plan {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06); border-radius: var(--radius);
  padding: 12px 14px;
}

.drawer-plan-icon { font-size: 18px; }

.drawer-plan-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); }

.drawer-plan-value { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); margin-top: 1px; }

/* PAGE ──
   `overflow-y: scroll` (not auto) guarantees the container is always a
   scroll area on iOS Safari, even when content fits in the viewport —
   so elastic rubber-band bounce is consistent on every screen. Pair it
   with `overscroll-behavior-y: contain` to keep the bounce inside the
   page (bounce happens) without chaining up to <body> (which has
   overflow:hidden anyway). Padding-bottom clears the fixed tab bar
   (+ a small breathing margin) so the last row isn't hidden when the
   user scrolls to the bottom. */

.page {
  flex: 1;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--bottom-tabs-h) + var(--sab) + 12px);
}

.page::-webkit-scrollbar { display: none; }

/* ── TAP-ONLY SURFACES ──
   List rows, tabs, chips, calendar events, and KPI tiles are meant to be
   tapped, not long-pressed for text selection. Disabling selection here
   also prevents the iOS text-selection UI from firing on hold-to-swipe
   and on the week-event long-press-to-reschedule gesture. Inputs,
   textareas, note content, and .note-card-pressing are unaffected. */

.row-item, .bal-row, .week-event, .chip, .drawer-item, .bottom-tab,
.kpi-card, .stat-tile, .cal-day, .month-cell, .fab, .fab-action,
.drawer-user, .hamburger, .icon-btn, .avatar-sm,
.topbar-brand, .topbar-new-btn, .topbar-new-item, .topbar-search-btn,
.segmented-btn, .seg-btn, .view-btn, .fin-tab, .auth-tab,
.session-status, .session-row, .see-all, .sheet-close, .sheet-handle,
.cmdp-item, .context-menu-item {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ── LOADING SKELETON ──
   Used in App.jsx's LoadingSkeleton on first load. Shapes mimic the
   Home layout (KPI tiles + row list) so the transition to real data
   feels continuous. */

.sk-bar, .sk-circle {
  background: linear-gradient(90deg, var(--cream-deeper) 0%, var(--cream) 50%, var(--cream-deeper) 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s infinite ease-in-out;
  border-radius: var(--radius-sm);
  display: block;
}

.sk-bar-xs { height: 9px; border-radius: 4px; }

.sk-bar-sm { height: 11px; }

.sk-bar-md { height: 14px; }

.sk-bar-lg { height: 20px; }

.sk-circle {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0;
}

@keyframes skShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── BOTTOM TAB BAR (mobile) ──
   Primary nav for Home / Agenda / Patients / Finances. Hidden on ≥768px
   (desktop uses the sidebar drawer) via responsive.css.

   Pinned to the true viewport bottom via position:fixed — an earlier
   attempt at an in-flow bar collided with an iOS PWA quirk where
   100dvh excludes env(safe-area-inset-bottom), which pushed the bar
   34px up into the FAB's zone. */

:root { --bottom-tabs-h: 56px; }

.bottom-tabs {
  position: fixed; left: 0; right: 0;
  bottom: 0;
  height: calc(var(--bottom-tabs-h) + var(--sab));
  padding-bottom: var(--sab);
  background: var(--white);
  border-top: 1px solid var(--border-lt);
  box-shadow: 0 -2px 12px rgba(46,46,46,0.05);
  display: flex; align-items: stretch;
  z-index: 40;
}

.bottom-tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 6px 0 4px;
  color: var(--charcoal-xl); font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-height: 52px;
}

.bottom-tab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 28px; border-radius: var(--radius-pill);
  transition: background 0.3s ease, color 0.3s ease;
}

.bottom-tab-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  line-height: 1;
}

.bottom-tab:active { transform: scale(0.92); }

.bottom-tab--active { color: var(--teal-dark); }

.bottom-tab--active .bottom-tab-icon {
  background: var(--teal-pale); color: var(--teal-dark);
}

/* FAB — teal gradient pill with a soft diffused glow for emphasis.
   Floats 24px above the bottom tab bar so it's clearly a floating
   action, not another tab. */

.fab {
  position: fixed; bottom: calc(var(--sab) + var(--bottom-tabs-h) + 24px); right: 20px;
  width: 54px; height: 54px;
  background: radial-gradient(circle at 30% 25%, var(--teal-light) 0%, var(--teal) 55%, var(--teal-dark) 100%);
  border-radius: 50%;
  border: none; display: flex; align-items: center; justify-content: center;
  color: white;
  padding: 0;
  box-shadow:
    0 10px 28px -6px rgba(91,155,175,0.55),
    0 4px 12px rgba(46,46,46,0.12),
    inset 0 1px 0 rgba(255,255,255,0.3);
  cursor: pointer; z-index: var(--z-fab);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.fab:active {
  transform: scale(0.88);
  box-shadow:
    0 6px 16px -4px rgba(91,155,175,0.5),
    0 2px 6px rgba(46,46,46,0.12),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.fab.fab-open { transform: rotate(45deg); }

.fab.fab-open:active { transform: rotate(45deg) scale(0.88); }

.fab-overlay {
  position: fixed; inset: 0;
  background: rgba(20,35,40,0.45);
  z-index: var(--z-fab-overlay); backdrop-filter: blur(3px);
  animation: fadeIn 0.4s ease;
}

.fab-menu {
  position: fixed;
  bottom: calc(var(--sab) + var(--bottom-tabs-h) + 88px);
  right: 20px;
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end;
  z-index: var(--z-fab-menu);
}

.fab-action {
  display: flex; align-items: center; gap: 0;
  background: var(--white); border: none; cursor: pointer;
  padding: 0; -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
  animation: fabActionIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.fab-action:active { background: var(--cream); transform: scale(0.97); }

@keyframes fabActionIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.fab-action-label {
  padding: 10px 6px 10px 16px;
  font-size: 13px; font-weight: 600; color: var(--charcoal-md);
  white-space: nowrap; font-family: var(--font);
  letter-spacing: 0.02em;
}

.fab-action-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--teal-dark);
  margin-right: 5px;
}

/* CARDS & SECTIONS */

.section { padding: 16px 16px 0; }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.section-title { font-family: var(--font-d); font-size: 15px; font-weight: 800; color: var(--charcoal); }

.see-all { font-size: 13px; font-weight: 600; color: var(--teal-dark); background: none; border: none; cursor: pointer; padding: 4px 0; -webkit-tap-highlight-color: transparent; }

.card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border-lt); overflow: hidden; }

/* KPI ROW — plain white tiles with a subtle border, matching .lp-preview-kpi */

.kpi-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory;
}

.kpi-scroll::-webkit-scrollbar { display: none; }

.kpi-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 14px 16px;
  border: 1px solid var(--border-lt); position: relative; overflow: hidden;
  /* Button reset — so <button class="kpi-card"> inherits page typography
     and alignment instead of the UA defaults. */
  font-family: inherit; color: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s ease;
}

button.kpi-card { cursor: pointer; }

button.kpi-card:active {
  transform: scale(0.96);
  background: var(--teal-mist);
  border-color: var(--teal-light);
}

.kpi-label { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--charcoal-xl); margin-bottom: 6px; }

.kpi-value { font-family: var(--font-d); font-size: 22px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.4px; }

.kpi-meta { font-size: 11px; color: var(--charcoal-xl); margin-top: 4px; }

/* BADGE */

.badge { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }

.badge-green  { background: var(--green-bg);  color: var(--green); }

.badge-red    { background: var(--red-bg);    color: var(--red); }

.badge-teal   { background: var(--teal-pale); color: var(--teal-dark); }

.badge-gray   { background: var(--cream-dark);color: var(--charcoal-lt); }

.badge-amber  { background: var(--amber-bg);  color: var(--amber); }

.badge-purple { background: var(--purple-bg); color: var(--purple); }

.badge-blue   { background: var(--blue-bg);   color: var(--blue); }

/* ROW ITEMS */

.row-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border-lt);
  cursor: pointer; min-height: 62px;
  -webkit-tap-highlight-color: transparent; transition: background 0.3s;
}

.row-item:last-child { border-bottom: none; }

.row-item:active { background: var(--teal-mist); }

.row-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 13px; font-weight: 800; color: var(--white); flex-shrink: 0; }

.row-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }

.row-content { flex: 1; min-width: 0; }

.row-title { font-size: 14px; font-weight: 600; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }

.row-sub { font-size: 12px; color: var(--charcoal-xl); }

.row-right { text-align: right; flex-shrink: 0; }

.row-amount { font-family: var(--font-d); font-size: 15px; font-weight: 700; margin-bottom: 2px; }

.row-date { font-size: 11px; color: var(--charcoal-xl); }

.row-chevron { color: var(--border); font-size: 14px; flex-shrink: 0; margin-left: 4px; }

.amount-owe   { color: var(--red); }

.amount-paid  { color: var(--green); }

.amount-clear { color: var(--charcoal-xl); }

/* ── SEGMENTED CONTROL ──
   The single pill-tab style used app-wide. Legacy classes
   (.segment/.seg-btn, .view-toggle/.view-btn, .fin-tab-row/.fin-tab,
   .auth-toggle/.auth-tab) all alias to this block so older markup keeps
   working while new code uses <SegmentedControl />. */

.segmented, .segment, .view-toggle, .fin-tab-row, .auth-toggle {
  display: flex; background: var(--cream-dark);
  border-radius: var(--radius-pill);
  padding: 3px; gap: 2px;
  position: relative;
}

.segmented-slider {
  position: absolute; top: 3px; bottom: 3px;
  border-radius: var(--radius-pill);
  background: var(--white); box-shadow: var(--shadow-sm);
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none; z-index: 0;
}

.segmented-btn, .seg-btn, .view-btn, .fin-tab, .auth-tab {
  flex: 1; padding: 7px 8px;
  font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-pill); border: none; cursor: pointer;
  font-family: var(--font); color: var(--charcoal-lt); background: transparent;
  transition: color 0.3s; -webkit-tap-highlight-color: transparent;
  min-height: 34px; white-space: nowrap;
  position: relative; z-index: 1;
}

.segmented-btn.active, .seg-btn.active, .view-btn.active, .fin-tab.active {
  color: var(--teal-dark);
  background: transparent; box-shadow: none;
}

/* Fallback for legacy markup without slider element */

.segment .seg-btn.active, .view-toggle .view-btn.active, .fin-tab-row .fin-tab.active {
  background: var(--white); box-shadow: var(--shadow-sm);
}

.auth-tab.active {
  background: var(--white); color: var(--charcoal);
  box-shadow: var(--shadow-sm); font-family: var(--font-d);
}

.segmented-btn:active, .seg-btn:active, .view-btn:active, .fin-tab:active, .auth-tab:active {
  opacity: 0.7;
}

/* Size variant — "md" uses display font + heavier weight, for primary tabs */

.segmented--md .segmented-btn {
  font-family: var(--font-d); font-weight: 700; font-size: var(--text-md);
  padding: 10px 8px;
}

/* SEARCH */

.search-bar {
  display: flex; align-items: center;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius-pill); padding: 0 14px; height: 42px; gap: 8px;
  box-shadow: var(--shadow-sm);
}

.search-bar input { border: none; outline: none; font-family: var(--font); font-size: 14px; color: var(--charcoal); background: transparent; flex: 1; -webkit-appearance: none; }

.search-bar input::placeholder { color: var(--charcoal-xl); }

/* INPUT */

.input-group { margin-bottom: 14px; }

.input-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--charcoal-md); margin-bottom: 5px; }

.input {
  width: 100%; padding: 11px 13px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 16px; font-family: var(--font); color: var(--charcoal);
  background: var(--white); outline: none; -webkit-appearance: none;
  transition: border-color 0.4s, box-shadow 0.4s;
}

.input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(91,155,175,0.13); }

.input::placeholder { color: var(--charcoal-xl); }

.input.input-error { border-color: var(--red); }

.input.input-error:focus { box-shadow: 0 0 0 3px rgba(217,107,107,0.15); }

/* Money input — standard .input with a "$" prefix sitting inside the
   field. The input itself gets extra left padding so the number doesn't
   sit under the symbol. */

.money-input-wrap {
  position: relative;
  width: 100%;
}

.money-input-symbol {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--charcoal-lt);
  pointer-events: none;
  line-height: 1;
}

.input.money-input {
  padding-left: 26px;
}

/* FORM ERROR MESSAGE */

.form-error {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--red); font-weight: 600;
  background: var(--red-bg); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 12px; line-height: 1.4;
}

/* BTN */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 20px; height: 48px; font-size: 15px; font-weight: 700;
  border-radius: var(--radius-pill); border: none; cursor: pointer;
  font-family: var(--font-d); -webkit-tap-highlight-color: transparent;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); white-space: nowrap;
}

.btn:active { transform: scale(0.95); }

/* APP BANNERS — demo / read-only strips pinned below the status bar. */

.app-banner {
  padding: 8px 16px; display: flex; align-items: center; justify-content: space-between;
  z-index: var(--z-banner); flex-shrink: 0;
}

.app-banner--demo { background: var(--teal-dark); }

/* Read-only banner is "always dark" by design — hardcode literal values so it
   doesn't flip to a light cream strip in dark mode (where the --charcoal
   token inverts) while the muted rgba-white text stays fixed. */

.app-banner--readonly { background: #2E2E2E; }

.app-banner-text { font-size: var(--text-xs); font-weight: 600; color: var(--white); }

.app-banner-text--muted { color: rgba(255,255,255,0.7); }

.app-banner--readonly .app-banner-text { color: #FFFFFF; }

.app-banner--readonly .app-banner-text--muted { color: rgba(255,255,255,0.7); }

.app-banner-action {
  font-size: var(--text-xs); font-weight: 700; color: var(--white);
  background: rgba(255,255,255,0.2); border: none; border-radius: var(--radius-pill);
  cursor: pointer; font-family: var(--font); padding: 4px 12px;
}

.app-banner-action--readonly {
  background: none; color: #7AB5C7; padding: 2px 8px;
}

/* Scrollable body inside sheets — forces an always-on scroll area and
   leaves overscroll-behavior at its default `auto` so iOS elastic bounce
   fires at the ends. `overscroll-behavior: contain` kills the bounce on
   iOS Safari inside nested scroll containers, so we deliberately avoid
   it here; scroll chaining to the page underneath is already blocked by
   the body's `overflow: hidden`. */

.sheet-scroll {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.btn-primary { background: var(--charcoal); color: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,0.08); width: 100%; }

.btn-primary-teal {
  background: var(--teal); color: var(--white); width: 100%;
  box-shadow: 0 4px 14px rgba(91,155,175,0.38);
  font-size: 16px;
}

.btn-primary-teal:active { background: var(--teal-dark); }

.btn-secondary { background: var(--white); color: var(--charcoal-md); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); }

.btn-ghost { background: transparent; color: var(--teal-dark); height: 38px; padding: 0 10px; font-size: var(--text-md); }

.btn-danger { background: var(--red-bg); color: var(--red); box-shadow: none; width: 100%; }

.btn-warning { background: var(--amber-bg); color: var(--amber); box-shadow: none; width: 100%; }

/* Teal CTAs — solid filled + soft-tinted variants. Default height 44 for
   compact grid placement; override with inline style when needed. */

.btn-teal { background: var(--teal); color: var(--white); height: 44px; font-size: var(--text-sm); box-shadow: none; }

.btn-teal-soft { background: var(--teal-pale); color: var(--teal-dark); height: 44px; font-size: var(--text-sm); box-shadow: none; }

/* SESSION STATUS PILL */

.session-status {
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700; display: inline-block;
}

/* SESSION ROW RAIL — 3px status-colored accent on the left edge.
   Used on .row-item instances that represent a session, applied via
   --rail-color so status border stays consistent across screens. */

.row-item.session-row { border-left: 3px solid var(--rail-color, var(--teal)); }

.row-item.session-row.rail-scheduled { --rail-color: var(--teal); }

.row-item.session-row.rail-completed { --rail-color: var(--green); }

.row-item.session-row.rail-cancelled { --rail-color: var(--charcoal-xl); }

.row-item.session-row.rail-charged   { --rail-color: var(--amber); }

.status-scheduled  { background: var(--teal-pale);  color: var(--teal-dark); }

.status-completed  { background: var(--green-bg);   color: var(--green); }

.status-cancelled  { background: var(--cream-dark); color: var(--charcoal-lt); }

.status-charged    { background: var(--amber-bg);   color: var(--amber); }

/* CALENDAR DAY STRIP */

.cal-strip { display: flex; padding: 0 16px 4px; }

.cal-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0; border-radius: var(--radius); flex: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: all 0.35s;
}

.cal-day.active { background: var(--teal); }

.cal-day.has-sessions { position: relative; }

.cal-day.has-sessions::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }

.cal-day.active::after { background: white; }

.cal-day-name { font-size: 10px; font-weight: 700; color: var(--charcoal-xl); text-transform: uppercase; }

.cal-day.active .cal-day-name { color: rgba(255,255,255,0.8); }

.cal-day-num { font-family: var(--font-d); font-size: 16px; font-weight: 800; color: var(--charcoal); }

.cal-day.active .cal-day-num { color: white; }

.cal-day.today:not(.active) { background: var(--teal-pale); }

.cal-day.today:not(.active) .cal-day-num { color: var(--teal-dark); }

/* BALANCE BAR */

.balance-bar { height: 6px; background: var(--cream-dark); border-radius: 3px; overflow: hidden; margin-top: 6px; min-height: 6px; }

.balance-fill { height: 100%; border-radius: 3px; background: var(--green); transition: width 0.7s; }

/* Balance row active state */

.bal-row { -webkit-tap-highlight-color: transparent; transition: background 0.3s; }

.bal-row[role="button"]:active { background: var(--teal-mist); }

/* AUTH: auth-tab inherits shared .segmented-btn visuals (above). */

.auth-toggle { margin-bottom: 24px; }

.auth-tab { padding: 10px; font-size: var(--text-md); font-weight: 700; font-family: var(--font-d); }

/* ── OAUTH BUTTONS ──
   Social-login CTAs shown above the email form. The Google variant
   follows Google's sign-in brand guidelines (white background, dark
   text, visible border) while Apple uses the required black/white
   solid styling. Both share a 44px touch target with the brand icon
   left-aligned in a 16px inline gap. */

.btn-oauth {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  height: 46px;
  font-size: 14px; font-weight: 700;
  border-radius: var(--radius-pill);
  font-family: var(--font); letter-spacing: 0.01em;
  cursor: pointer; border: 1.5px solid var(--border);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}

.btn-oauth:active { transform: scale(0.97); }

.btn-oauth:disabled { opacity: 0.6; cursor: default; }

.btn-oauth-google { background: var(--white); color: var(--charcoal); }

.btn-oauth-apple  { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }

.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 16px;
  color: var(--charcoal-xl); font-size: 12px; font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border-lt);
}

/* ── DESKTOP PRIMITIVES ──────────────────────────────────────────────
   Rendered off-document (fixed position) so they work regardless of
   ancestor overflow/transform. Mobile ignores them (no hover, no
   right-click). Dark-mode overrides live in dark.css. */

/* TOOLTIP */

.tooltip {
  position: fixed; z-index: 800;
  background: var(--charcoal); color: var(--white);
  padding: 6px 10px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: var(--shadow);
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  animation: tooltipIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.tooltip--top    { transform: translate(-50%, -100%); }

.tooltip--bottom { transform: translate(-50%, 0); }

.tooltip--left   { transform: translate(-100%, -50%); }

.tooltip--right  { transform: translate(0, -50%); }

.tooltip-kbd {
  font-family: var(--font);
  font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,0.15);
  padding: 2px 5px; border-radius: 3px;
  letter-spacing: 0.04em;
}

@keyframes tooltipIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* CONTEXT MENU */

.context-menu {
  position: fixed; z-index: 750;
  background: var(--white); border: 1px solid var(--border-lt);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 4px; min-width: 180px;
  font-family: var(--font);
  animation: ctxIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes ctxIn {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

.context-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--text-md); font-weight: 500;
  color: var(--charcoal); text-align: left;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

.context-menu-item:hover:not(:disabled),
.context-menu-item:focus-visible {
  background: var(--teal-mist); color: var(--teal-dark); outline: none;
}

.context-menu-item:disabled { opacity: 0.4; cursor: default; }

.context-menu-item--destructive { color: var(--red); }

.context-menu-item--destructive:hover { background: var(--red-bg); color: var(--red); }

.context-menu-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; flex-shrink: 0; color: var(--charcoal-lt);
}

.context-menu-item--destructive .context-menu-icon { color: var(--red); }

.context-menu-label { flex: 1; }

.context-menu-shortcut {
  font-size: var(--text-xs); color: var(--charcoal-xl); font-weight: 600;
  letter-spacing: 0.04em;
}

.context-menu-divider {
  height: 1px; background: var(--border-lt); margin: 4px 2px;
}

/* COMMAND PALETTE — ⌘K / Ctrl+K — desktop-focused, still works on
   mobile if someone has a hardware keyboard. Centered modal with a
   search-first layout. */

.cmdp-overlay {
  position: fixed; inset: 0;
  background: rgba(20,35,40,0.45);
  backdrop-filter: blur(3px);
  z-index: 900;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: fadeIn 0.25s ease;
}

.cmdp-panel {
  width: min(640px, 92vw);
  max-height: 70vh;
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: cmdpIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cmdpIn {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cmdp-search {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-lt);
  color: var(--charcoal-xl);
  flex-shrink: 0;
}

.cmdp-search input {
  flex: 1;
  border: none; outline: none;
  font-family: var(--font); font-size: var(--text-lg); font-weight: 500;
  color: var(--charcoal); background: transparent;
  -webkit-appearance: none;
}

.cmdp-search input::placeholder { color: var(--charcoal-xl); }

.cmdp-kbd {
  font-family: var(--font); font-size: 10px; font-weight: 700;
  color: var(--charcoal-lt);
  background: var(--cream-dark); border: 1px solid var(--border-lt);
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.04em;
}

.cmdp-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 6px 6px 10px;
}

.cmdp-tips {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  padding: 10px 14px 6px;
  border-bottom: 1px dashed var(--border-lt);
  margin-bottom: 4px;
}

.cmdp-tip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--charcoal-lt); font-weight: 600;
}

.cmdp-group-header {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--charcoal-xl);
  text-transform: uppercase;
  padding: 12px 14px 6px;
}

.cmdp-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--text-md); font-weight: 500;
  color: var(--charcoal); text-align: left;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease, color 0.12s ease;
}

.cmdp-item:focus { outline: none; }

.cmdp-item--active { background: var(--teal-mist); color: var(--teal-dark); }

.cmdp-item-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal-pale); color: var(--teal-dark);
  flex-shrink: 0;
}

.cmdp-item--active .cmdp-item-icon { background: var(--teal); color: var(--white); }

.cmdp-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cmdp-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--charcoal-xl);
  font-size: var(--text-sm);
}

.cmdp-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid var(--border-lt);
  background: var(--cream);
  flex-shrink: 0;
}

.cmdp-footer-hint {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--charcoal-lt);
}

/* SPLIT VIEW — master/detail pane on desktop (≥1024px).
   Mobile ignores these (screens render the existing overlay paths). */

.split-view {
  display: flex; flex: 1; min-height: 0;
  gap: 0;
}

.split-view-list {
  width: 360px; flex-shrink: 0;
  border-right: 1px solid var(--border-lt);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--white);
}

.split-view-detail {
  flex: 1; min-width: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--cream);
}

.split-view-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; padding: 40px 24px; text-align: center;
  color: var(--charcoal-xl); gap: 10px;
}

.split-view-empty-title {
  font-family: var(--font-d); font-size: var(--text-lg); font-weight: 700;
  color: var(--charcoal-lt);
}

.split-view-empty-hint { font-size: var(--text-sm); max-width: 280px; line-height: 1.5; }

.split-view-row--selected {
  background: var(--teal-mist) !important;
  border-left-color: var(--teal) !important;
}

/* Hide split-view at < 1024px so screens can render their mobile flow */

@media (max-width: 1023px) {
  .split-view-desktop-only { display: none !important; }
}

/* SETTINGS */

.settings-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--charcoal-xl); padding: 14px 16px 7px; }

.settings-row { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-lt); cursor: pointer; min-height: 52px; -webkit-tap-highlight-color: transparent; gap: 12px; background: var(--white); }

.settings-row:last-child { border-bottom: none; }

.settings-row:active { background: var(--teal-mist); }

.settings-row-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.settings-row-title { font-size: 14px; font-weight: 600; color: var(--charcoal); }

.settings-row-sub { font-size: 12px; color: var(--charcoal-xl); margin-top: 1px; }

.settings-chevron { color: var(--border); margin-left: auto; display: flex; align-items: center; }

/* DETAIL SHEET */

.sheet-overlay { position: fixed; inset: 0; background: rgba(46,46,46,0.4); z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; overscroll-behavior: contain; animation: fadeIn 0.4s ease; }

.sheet-panel {
  background: var(--white); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  padding-bottom: var(--sab);
  max-height: 85dvh; overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  animation: slideUp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Focus trap parks focus on the panel itself (tabindex=-1) so no inner
   button looks pre-selected when the sheet opens — hide the default
   outline on that container-level focus. Inner buttons still get the
   normal :focus-visible treatment for keyboard navigation. */

.sheet-panel:focus, .sheet-panel:focus-visible { outline: none; }

@keyframes slideUp {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes sheetScaleIn {
  0%   { opacity: 0; transform: scale(0.9); }
  70%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes expedientePullUp {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

.sheet-handle { width: 40px; height: 5px; background: var(--cream-deeper); border-radius: 3px; margin: 12px auto 4px; }

.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 16px; }

.sheet-title { font-family: var(--font-d); font-size: 17px; font-weight: 800; color: var(--charcoal); }

.sheet-close { width: 30px; height: 30px; border-radius: 50%; background: var(--cream-dark); border: none; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; position: relative; }

.sheet-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

/* AGENDA VIEW TOGGLE: use the shared .segmented block (above) */

/* MONTH GRID */

.month-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px; }

.month-nav-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--white); display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; color: var(--charcoal-md);
  -webkit-tap-highlight-color: transparent; box-shadow: var(--shadow-sm);
}

.month-nav-btn:active { background: var(--teal-pale); }

.month-title { font-family: var(--font-d); font-size: 16px; font-weight: 800; color: var(--charcoal); }

.month-grid { padding: 0 16px; }

.month-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }

.month-dow { text-align: center; font-size: 10px; font-weight: 700; color: var(--charcoal-xl); text-transform: uppercase; padding: 4px 0; }

.month-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.month-cell {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; border-radius: var(--radius-sm); cursor: pointer;
  position: relative; -webkit-tap-highlight-color: transparent; transition: background 0.35s;
}

.month-cell:active { background: var(--teal-pale); }

.month-cell.active { background: var(--teal); }

.month-cell.today:not(.active) { background: var(--teal-pale); }

.month-cell.other-month .month-cell-num { color: var(--cream-deeper); }

.month-cell-num { font-family: var(--font-d); font-size: 13px; font-weight: 700; color: var(--charcoal); }

.month-cell.active .month-cell-num { color: white; }

.month-cell.today:not(.active) .month-cell-num { color: var(--teal-dark); }

.month-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); position: absolute; bottom: 4px; }

.month-cell.active .month-dot { background: rgba(255,255,255,0.7); }

.month-dots { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 3px; }

.month-dot-color { width: 5px; height: 5px; border-radius: 50%; }

.month-cell.active .month-dot-color { box-shadow: 0 0 0 1px rgba(255,255,255,0.7); }

/* WEEK GRID */

.week-time-col { width: 44px; flex-shrink: 0; }

.week-header-row { display: grid; grid-template-columns: 44px repeat(7, 1fr); padding: 0 16px; margin-bottom: 2px; }

.week-day-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; height: 50px; box-sizing: border-box; }

.week-header-spacer { height: 50px; margin-bottom: 2px; }

.week-time-label-static {
  min-height: var(--week-row-h);
  font-size: 10px; color: var(--charcoal-xl); font-weight: 600;
  padding: 6px 8px 0 0; text-align: right; line-height: 1;
}

/* Agenda header label (tappable to jump to today) */

.agenda-label-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 4px 8px; min-height: 32px;
  border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--font); -webkit-tap-highlight-color: transparent;
}

.agenda-label-btn:active { background: var(--cream); }

.agenda-today-pill {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-dark); background: var(--teal-pale);
  padding: 3px 8px; border-radius: var(--radius-pill);
}

/* Week "ahora" line */

.week-now-line {
  position: absolute;
  height: 2px; background: var(--red);
  pointer-events: none; z-index: 2;
  border-radius: 2px;
}

.week-now-line::before {
  content: ''; position: absolute;
  left: -4px; top: -3px;
  width: 8px; height: 8px;
  border-radius: 50%; background: var(--red);
}

.week-day-name { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--charcoal-xl); }

.week-day-num {
  font-family: var(--font-d); font-size: 14px; font-weight: 800; color: var(--charcoal);
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.week-day-num.active { background: var(--teal); color: white; }

.week-day-num.today:not(.active) { background: var(--teal-pale); color: var(--teal-dark); }

.week-body { padding: 0 16px; }

.week-time-row { display: grid; grid-template-columns: 44px repeat(7, 1fr); border-bottom: 1px solid var(--border-lt); min-height: 48px; }

.week-time-label { font-size: 10px; color: var(--charcoal-xl); font-weight: 600; padding: 6px 8px 0 0; text-align: right; line-height: 1; }

.week-cell { border-bottom: 1px solid var(--border-lt); min-height: var(--week-row-h); cursor: pointer; -webkit-tap-highlight-color: transparent; }

.week-cell:active { background: var(--teal-mist); }

.week-day-col { position: relative; }

.week-event {
  position: absolute; left: 2px; right: 2px; z-index: 1;
  background: var(--teal-pale); border-left: 2px solid var(--teal);
  border-radius: 6px; padding: 3px 4px;
  font-size: 9px; font-weight: 700; color: var(--teal-dark);
  overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
}

.week-event-time { display: none; }

.week-event.cancelled { background: var(--cream-dark); border-left-color: var(--charcoal-xl); color: var(--charcoal-lt); }

/* FINANCES: tabs use the shared .segmented block (above) */

/* Mini bar chart */

.bar-chart { display: flex; align-items: flex-end; gap: 5px; height: 80px; padding: 0 4px; }

.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; border-radius: 6px 6px 0 0; overflow: hidden; }

.bar-fill { width: 100%; border-radius: 6px 6px 0 0; transition: height 0.7s; }

.bar-label { font-size: 9px; font-weight: 700; color: var(--charcoal-xl); text-transform: uppercase; }

.bar-val { font-size: 9px; font-weight: 700; color: var(--charcoal-md); }

/* Balance rows */

.bal-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-lt); }

.bal-row:last-child { border-bottom: none; }

.bal-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--charcoal); }

.bal-sub  { font-size: 11px; color: var(--charcoal-xl); margin-top: 2px; }

.bal-amt  { font-family: var(--font-d); font-size: 14px; font-weight: 800; }

/* Stat tile — plain white, subtle border, no accent strip */

.fin-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }

.stat-tile {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border-lt);
  padding: 14px 16px; position: relative; overflow: hidden;
  /* Button reset for <button class="stat-tile ..."> usage. */
  font-family: inherit; color: inherit; text-align: left;
}

button.stat-tile { cursor: pointer; min-height: 0; }

.stat-tile-clickable { transition: background 0.45s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.45s ease; -webkit-tap-highlight-color: transparent; user-select: none; }

.stat-tile-clickable:active { transform: scale(0.95); }

.stat-tile-selected { background: var(--cream); border-color: var(--charcoal-xxl, var(--border)); }

.modality-toggle:active { transform: scale(0.96); }

.stat-tile-label { font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--charcoal-xl); margin-bottom:5px; }

.stat-tile-val { font-family:var(--font-d); font-size:20px; font-weight:800; color:var(--charcoal); letter-spacing:-0.3px; }

.stat-tile-sub { font-size:11px; color:var(--charcoal-xl); margin-top:3px; }

/* PATIENT LIST */

.sort-row { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; }

.sort-label { font-size: 12px; color: var(--charcoal-xl); font-weight: 600; }

.sort-select {
  font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--teal-dark);
  background: var(--teal-pale); border: none; border-radius: var(--radius-pill);
  padding: 5px 10px; cursor: pointer; outline: none; -webkit-appearance: none;
}

.filter-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; }

.filter-chips::-webkit-scrollbar { display: none; }

.chip {
  padding: 5px 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--white); color: var(--charcoal-lt);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; transition: all 0.35s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); font-family: var(--font);
}

.chip.active { background: var(--teal); border-color: var(--teal); color: white; }

.chip:active { transform: scale(0.93); }

/* Note long-press feedback */

.note-card-pressing {
  background: var(--cream) !important;
  transform: scale(0.97);
  box-shadow: inset 0 0 0 1px var(--border) !important;
}

.note-longpress-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--charcoal-xl);
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: left center;
  animation: noteLongPressFill 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes noteLongPressFill {
  to { transform: scaleX(1); }
}

/* EMPTY STATE */

.empty-hint {
  padding: 28px 20px;
  text-align: center;
  color: var(--charcoal-xl);
  font-size: 13px;
  line-height: 1.6;
}

.empty-hint-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream-dark); color: var(--charcoal-xl);
  margin-bottom: 10px;
}

/* UTILS */

.flex { display: flex; }

.items-center { align-items: center; }

.justify-between { justify-content: space-between; }

.gap-2 { gap: 8px; }

.gap-3 { gap: 12px; }

.w-full { width: 100%; }

.text-muted { color: var(--charcoal-xl); }

.mt-3 { margin-top: 12px; }

.mt-4 { margin-top: 16px; }

/* ── ACCESSIBILITY ── */

*:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

button:focus-visible, a:focus-visible, select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.input:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(91,155,175,0.2); }

/* ── TOUCH TARGETS ── */

button, a, select { min-height: 44px; }

.icon-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

.fab-action { min-height: 44px; }

.chip { min-height: 36px; }

.seg-btn, .view-btn, .fin-tab { min-height: 36px; }

.cal-day { min-height: 48px; }

.month-cell { min-height: 40px; }

.month-nav-btn { min-width: 44px; min-height: 44px; }

/* Exempt inline small buttons */

.sheet-close, .row-chevron { min-height: unset; }

/* ── LANDING PAGE ──
   Marketing site shown to signed-out visitors. Premium, mobile-first
   aesthetic that echoes the real Cardigan app: teal accent, charcoal
   on near-white, Nunito/Nunito Sans, soft shadows, spring motion.
   All classes prefixed .lp- to avoid colliding with the app shell. */

.lp-root {
  height: 100dvh;
  background: var(--white);
  color: var(--charcoal);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font);
  position: relative;
}

.lp-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ── NAV ──
   Background uses color-mix over var(--white) so the tint flips with dark
   mode (light/dark page → light/dark nav) without a separate override. */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--white) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  padding: calc(var(--sat) + 14px) 0 14px;
  transition: padding 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.lp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lp-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -0.3px;
  text-decoration: none;
}

.lp-nav-actions { display: flex; align-items: center; gap: 12px; }

.lp-nav-link {
  background: none;
  border: none;
  color: var(--charcoal-md);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.35s ease;
}

.lp-nav-link:hover { color: var(--charcoal); }

/* Scroll-linked nav condense (progressive enhancement — Chromium-only for now;
   silent no-op elsewhere). Tightens padding and drops a subtle hairline. */

@supports (animation-timeline: scroll()) {
  .lp-nav {
    animation: lpNavCondense linear both;
    animation-timeline: scroll();
    animation-range: 0 160px;
  }
  @keyframes lpNavCondense {
    to {
      padding-top: calc(var(--sat) + 8px);
      padding-bottom: 8px;
      border-bottom-color: var(--border-lt);
      background: color-mix(in srgb, var(--white) 94%, transparent);
    }
  }
}

/* ── SECTION RHYTHM ── */

.lp-section {
  padding: 88px 0;
  scroll-margin-top: 80px;
  position: relative;
}

/* ── HERO ── */

.lp-hero { padding: 56px 0 88px; overflow: hidden; }

.lp-glow {
  position: absolute;
  top: -120px; right: -120px;
  width: 560px; height: 560px;
  background: radial-gradient(closest-side, rgba(91,155,175,0.18), rgba(91,155,175,0));
  pointer-events: none;
  z-index: 0;
}

.lp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.lp-hero-copy { max-width: 520px; }

.lp-hero-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 620px;
  position: relative;
}

.lp-hero-title {
  font-family: var(--font-d);
  font-size: 64px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--charcoal);
  margin: 0 0 20px;
  animation: lpRise 0.6s 0.06s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.lp-accent { color: var(--teal-dark); }

.lp-hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--charcoal-md);
  margin: 0 0 32px;
  max-width: 460px;
  animation: lpRise 0.6s 0.16s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.lp-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: lpRise 0.6s 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.lp-hero-preview > .lp-preview {
  animation: lpRise 0.7s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── FEATURE STRIP ── */

.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lp-feature-v2 {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.5s ease,
              border-color 0.5s ease,
              opacity 0.55s ease;
  /* Reveal-on-scroll initial state */
  opacity: 0;
  transform: translateY(16px);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.lp-feature-v2.is-in {
  opacity: 1;
  transform: translateY(0);
}

.lp-feature-v2:hover {
  transform: translateY(-3px);
  border-color: var(--teal-light);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.lp-feature-label {
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  padding: 4px 2px 2px;
}

/* ── MINI UI FRAGMENTS (inside feature cards) ──
   Faithful slices of the real app: same row chrome (3px left border-rail
   for sessions, avatar + title + sub, trailing badge), same KPI tiles. */

.lp-mini {
  background: var(--cream);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  padding: 14px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.lp-mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
}

.lp-mini-row--completed { border-left-color: var(--green); }

.lp-mini-row--scheduled { border-left-color: var(--teal); }

.lp-mini-av {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-mini-row-main { flex: 1; min-width: 0; }

.lp-mini-row-title {
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-mini-row-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--charcoal-lt);
  margin-top: 2px;
}

.lp-mini-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lp-mini-eyebrow--presencial { color: var(--teal-dark); }

.lp-mini-eyebrow--virtual    { color: var(--blue); }

.lp-mini-tutor {
  font-size: 10px;
  font-weight: 800;
  color: var(--purple);
  letter-spacing: 0.04em;
  margin-right: 4px;
}

.lp-mini-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.lp-mini-badge--active    { background: var(--teal-pale); color: var(--teal-dark); }

.lp-mini-badge--scheduled { background: var(--teal-pale); color: var(--teal-dark); }

.lp-mini-badge--completed { background: var(--green-bg); color: var(--green); }

/* Mini Finances (2-up KPI grid, mirrors real Home/Finances tiles) */

.lp-mini--finances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lp-mini-kpi {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: 10px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-mini-kpi-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--charcoal-xl);
}

.lp-mini-kpi-value {
  font-family: var(--font-d);
  font-size: 22px;
  font-weight: 900;
  color: var(--charcoal);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 2px;
}

.lp-mini-kpi-value--red { color: var(--red); }

.lp-mini-kpi-meta {
  font-size: 10px;
  font-weight: 600;
  color: var(--charcoal-xl);
  margin-top: 2px;
}

/* ── COMO EMPEZAR (3 steps) ── */

.lp-start { background: var(--cream); }

.lp-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 820px;
  flex-wrap: wrap;
}

.lp-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.35s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}

.lp-step.is-in { opacity: 1; transform: translateY(0); }

.lp-step + .lp-step { margin-left: 16px; position: relative; }

.lp-step + .lp-step::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--border);
}

.lp-step-num {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.01em;
}

.lp-step-label {
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ── FOOTER ── */

.lp-footer {
  border-top: 1px solid var(--border-lt);
  padding: 44px 0 calc(var(--sab) + 44px);
  background: var(--white);
}

.lp-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lp-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  color: var(--charcoal-xl);
  letter-spacing: -0.2px;
}

/* ── BUTTONS ── */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  height: 52px;
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 320ms ease,
              background 320ms ease,
              color 320ms ease,
              border-color 320ms ease;
}

.lp-btn--primary {
  background: var(--charcoal);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(46,46,46,0.18);
}

.lp-btn--secondary {
  background: var(--white);
  color: var(--charcoal);
  border: 1.5px solid var(--border);
}

.lp-btn:active { transform: scale(0.97); }

/* ── PHONE FRAME (ProductPreview) ── */

.lp-preview {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  isolation: isolate;
}

.lp-phone {
  position: relative;
  width: 300px;
  height: 600px;
  border-radius: 42px;
  background: var(--charcoal);
  padding: 5px;
  box-shadow:
    0 44px 80px rgba(0,0,0,0.14),
    0 14px 30px rgba(0,0,0,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  z-index: 2;
}

/* Dynamic Island — centered pill, offset from the top edge. */

.lp-phone-notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 24px;
  background: #000;
  border-radius: 14px;
  z-index: 3;
}

.lp-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--white);
  border-radius: 38px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lp-phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 14px;
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 800;
  color: var(--charcoal);
}

.lp-phone-status-right {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}

.lp-phone-bar {
  display: inline-block;
  width: 3px;
  height: 6px;
  background: var(--charcoal);
  border-radius: 1px;
}

.lp-phone-bar--tall { height: 9px; }

.lp-phone-topbar {
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-lt);
  position: relative;
  height: 38px;
}

.lp-phone-hamburger {
  width: 22px; height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.lp-phone-hamburger span {
  width: 14px; height: 1.5px;
  background: var(--charcoal);
  border-radius: 1px;
}

.lp-phone-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -0.3px;
}

.lp-phone-topbar-right {
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
}

.lp-phone-content {
  flex: 1;
  padding: 14px 14px 14px;
  overflow: hidden;
}

.lp-phone-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.lp-phone-kpi {
  padding: 10px 10px 8px;
  border: 1px solid var(--border-lt);
  border-radius: 10px;
  background: var(--white);
}

.lp-phone-kpi-label {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--charcoal-xl);
}

.lp-phone-kpi-value {
  font-family: var(--font-d);
  font-size: 19px;
  font-weight: 900;
  color: var(--charcoal);
  letter-spacing: -0.02em;
  margin-top: 3px;
  line-height: 1.1;
}

.lp-phone-kpi-value--red { color: var(--red); }

.lp-phone-kpi-meta {
  font-size: 9px;
  font-weight: 600;
  color: var(--charcoal-xl);
  margin-top: 2px;
}

.lp-phone-section-title {
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}

.lp-phone-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-phone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-lt);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: var(--white);
}

.lp-phone-row--completed { border-left-color: var(--green); }

.lp-phone-row--charged   { border-left-color: var(--amber); }

.lp-phone-row--cancelled { border-left-color: var(--charcoal-xl); }

.lp-phone-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.lp-phone-row-main { flex: 1; min-width: 0; }

.lp-phone-row-title {
  font-family: var(--font-d);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-phone-row-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--charcoal-lt);
  margin-top: 1px;
}

.lp-phone-eyebrow {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lp-phone-eyebrow--presencial { color: var(--teal-dark); }

.lp-phone-eyebrow--virtual    { color: var(--blue); }

.lp-phone-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.lp-phone-badge--scheduled { background: var(--teal-pale); color: var(--teal-dark); }

.lp-phone-badge--completed { background: var(--green-bg); color: var(--green); }

.lp-phone-badge--charged   { background: var(--amber-bg); color: var(--amber); }

.lp-phone-badge--cancelled { background: var(--cream-dark); color: var(--charcoal-lt); }

.lp-phone-fab {
  position: absolute;
  right: 14px;
  bottom: 20px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(46,46,46,0.2);
}

/* Floating next-session card behind phone (desktop only) —
   mirrors a real patient row from the Home/Patients lists. */

.lp-float-card {
  position: absolute;
  top: 70px;
  right: -40px;
  width: 240px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0,0,0,0.10), 0 4px 14px rgba(0,0,0,0.05);
  z-index: 1;
}

.lp-float-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-float-av {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
}

.lp-float-main { flex: 1; min-width: 0; }

.lp-float-name {
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1.2;
}

.lp-float-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--charcoal-lt);
  margin-top: 2px;
}

.lp-float-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--teal-pale);
  color: var(--teal-dark);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ── MOTION ── */

@keyframes lpRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lpFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes lpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,155,175,0.6); }
  50%      { box-shadow: 0 0 0 10px rgba(91,155,175,0); }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-phone { animation: lpFloat 6s ease-in-out infinite; }
  .lp-float-card { animation: lpFloat 7.5s ease-in-out -2s infinite; }
}

/* ── HOVER (pointer only) ── */

@media (hover: hover) {
  .lp-btn--primary:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.22);
  }
  .lp-btn--secondary:hover {
    border-color: var(--charcoal-xl);
    background: var(--cream);
  }
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  .lp-hero-grid { gap: 40px; }
  .lp-hero-title { font-size: 54px; }
  .lp-float-card { right: -20px; top: 50px; width: 220px; }
}

@media (max-width: 880px) {
  .lp-section { padding: 72px 0; }
  .lp-section--dark { padding: 88px 0; }
  .lp-hero { padding: 40px 0 64px; }
  .lp-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: left;
  }
  .lp-hero-copy { max-width: 100%; }
  .lp-hero-preview { min-height: auto; }
  .lp-float-card { display: none; }
  .lp-hero-title { font-size: 44px; }
  .lp-features { grid-template-columns: 1fr 1fr; }
  .lp-steps { flex-direction: column; align-items: stretch; }
  .lp-step + .lp-step { margin-left: 0; margin-top: 12px; }
  .lp-step + .lp-step::before {
    top: -12px; left: 50%;
    width: 1px; height: 12px;
    transform: translateX(-50%);
  }
}

@media (max-width: 640px) {
  .lp-container { padding: 0 20px; }
  .lp-section { padding: 56px 0; }
  .lp-hero { padding: 28px 0 48px; }
  .lp-nav { padding: calc(var(--sat) + 10px) 0 10px; }
  .lp-nav-brand { font-size: 17px; }
  .lp-nav-actions { gap: 8px; }
  .lp-nav-link { font-size: 13px; }

  .lp-hero-title { font-size: 38px; }
  .lp-hero-sub { font-size: 16px; margin-bottom: 24px; }

  .lp-features { grid-template-columns: 1fr; gap: 14px; }
  .lp-feature-v2 { padding: 20px; }
  .lp-feature-label { font-size: 16px; }
  .lp-mini { min-height: 160px; padding: 14px; }
  .lp-mini-kpi-value { font-size: 26px; }

  .lp-step { padding: 12px 16px; }
  .lp-step-label { font-size: 14px; white-space: normal; }

  .lp-btn { height: 48px; padding: 0 22px; font-size: 14px; }

  /* Scale phone down slightly on small viewports */
  .lp-phone { width: 280px; height: 560px; border-radius: 38px; }
  .lp-phone-screen { border-radius: 34px; }
}

/* ── REDUCED MOTION GUARD ──
   Disables all animations, transitions, and transforms for users who prefer
   reduced motion. Kept last so it wins the cascade. */

@media (prefers-reduced-motion: reduce) {
  .lp-root *,
  .lp-root *::before,
  .lp-root *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .lp-root [data-reveal] { opacity: 1 !important; }
}

/* ── TUTORIAL / ONBOARDING TOUR ── */

.tut-dim {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, 0.62);
  z-index: var(--z-tutorial);
  animation: fadeIn 0.7s ease;
  pointer-events: auto;
}

.tut-spotlight {
  position: fixed;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 9999px rgba(20, 20, 20, 0.62);
  z-index: var(--z-tutorial);
  pointer-events: none;
  transition: top 1.6s cubic-bezier(0.32, 0.72, 0, 1),
              left 1.6s cubic-bezier(0.32, 0.72, 0, 1),
              width 1.6s cubic-bezier(0.32, 0.72, 0, 1),
              height 1.6s cubic-bezier(0.32, 0.72, 0, 1);
  animation: tutSpotlightIn 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tutSpotlightIn {
  from { opacity: 0; box-shadow: 0 0 0 9999px rgba(20, 20, 20, 0); }
  to   { opacity: 1; box-shadow: 0 0 0 9999px rgba(20, 20, 20, 0.62); }
}

/* Transparent click-blockers around the spotlight cutout. They intercept
   taps on everything except the highlighted element, so the user can only
   interact with the feature being showcased. */

.tut-blocker {
  position: fixed;
  background: transparent;
  z-index: var(--z-tutorial);
  pointer-events: auto;
}

.tut-spotlight::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: calc(var(--radius-lg) + 4px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
  animation: tutRingPulse 2.4s ease-in-out 0.3s infinite;
}

@keyframes tutRingPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.03); }
}

/* ── Tooltip bubble ── */

.tut-bubble {
  position: fixed;
  z-index: calc(var(--z-tutorial) + 1);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 36px rgba(0,0,0,0.24);
  padding: 18px 18px 14px;
  max-width: min(320px, calc(100vw - 24px));
  width: calc(100vw - 24px);
  transition: top 1.4s cubic-bezier(0.32, 0.72, 0, 1),
              left 1.4s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Directional entrance animations — the tooltip slides from the side of the
   spotlight so the connection between element and tooltip feels deliberate. */

.tut-bubble--enter-from-above {
  animation: tutBubbleFromAbove 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tut-bubble--enter-from-below {
  animation: tutBubbleFromBelow 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tut-bubble--enter-center {
  animation: tutBubbleCenter 1.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tutBubbleFromAbove {
  from { opacity: 0; transform: translateY(-14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tutBubbleFromBelow {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tutBubbleCenter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Centered variant: the translate is part of the anchor, so override the
   enter animation to use a center-scale form. */

.tut-bubble--center {
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%);
  max-width: min(340px, calc(100vw - 32px));
  animation: tutBubbleCenter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tut-bubble-title {
  font-family: var(--font-d);
  font-size: 16px; font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
  padding-right: 26px; /* room for the × close button */
}

.tut-bubble-body {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--charcoal-md);
  margin-bottom: 14px;
}

/* Close / skip — top-right icon button. Takes the Skip action out of the
   footer row so the progress dots + Atrás + Siguiente always fit. */

.tut-bubble-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 26px; height: 26px; min-height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  color: var(--charcoal-lt);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.5s ease, color 0.5s ease;
  padding: 0;
}

.tut-bubble-close:hover,
.tut-bubble-close:active {
  background: var(--cream-dark);
  color: var(--charcoal-md);
}

/* Dot-based progress — replaces the "Paso X de Y" text so the footer can
   hold buttons without wrapping. */

.tut-bubble-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin: 2px 0 12px;
}

.tut-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cream-dark);
  transition: width 0.7s ease, background 0.7s ease;
}

.tut-dot--done {
  background: var(--teal-light);
}

.tut-dot--active {
  width: 18px;
  border-radius: 100px;
  background: var(--teal);
}

.tut-bubble-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tut-btn {
  height: 38px; padding: 0 18px;
  border-radius: var(--radius-pill);
  border: none; cursor: pointer;
  font-family: var(--font-d);
  font-size: 13px; font-weight: 700;
  transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.tut-btn-primary {
  background: var(--teal); color: var(--white);
  box-shadow: 0 2px 10px rgba(91,155,175,0.4);
}

.tut-btn-primary:active { transform: scale(0.96); }

.tut-btn-primary:hover  { background: var(--teal-dark); }

.tut-btn-ghost {
  background: var(--cream); color: var(--charcoal-md);
  padding: 0 16px;
}

.tut-btn-ghost:hover  { background: var(--cream-dark); }

.tut-btn-ghost:active { transform: scale(0.96); }

/* ── Screen-change chip ── */

/* Fills the role of the "user tapped the hamburger" feedback. Shown
   full-bleed-centered while the Tutorial orchestrator switches screens. */

.tut-dim--transition {
  background: rgba(20, 20, 20, 0.48);
  animation: fadeIn 0.7s ease;
  pointer-events: auto;
}

.tut-welcome-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, 0.55);
  z-index: var(--z-tutorial);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn 0.5s ease;
}

.tut-welcome-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  padding: 26px 22px 20px;
  max-width: 340px; width: 100%;
  text-align: center;
  animation: tutWelcomeIn 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tutWelcomeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tut-welcome-logo {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--teal-pale);
  color: var(--teal-dark);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}

.tut-welcome-title {
  font-family: var(--font-d);
  font-size: 19px; font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.tut-welcome-body {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--charcoal-md);
  margin-bottom: 20px;
}

.tut-welcome-actions {
  display: flex; flex-direction: column; gap: 8px;
}

/* ── FAB z-index boost during tutorial ──
   The FAB sits at z-index 52, far below the tutorial overlay at 700.
   When the tutorial spotlights the FAB, we boost it above the overlay
   so it's visible through the spotlight cutout. */

body.tut-fab-active .fab {
  z-index: calc(var(--z-tutorial) + 1) !important;
}

/* ── Drawer z-index boost during tutorial drawer steps ──
   The drawer (z-index 201) sits below the tutorial overlay (700).
   During drawer navigation steps, boost both the drawer panel and its
   overlay above the tutorial layer so the nav items are interactive
   through the spotlight cutout. */

body.tut-drawer-active .drawer {
  z-index: calc(var(--z-tutorial) + 1) !important;
}

body.tut-drawer-active .drawer-overlay {
  z-index: var(--z-tutorial) !important;
  /* Let the tutorial dim handle the backdrop instead */
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

/* ── CONTEXTUAL HELP TIPS ── */

.help-icon-btn {
  width: 28px; height: 28px;
  /* Visual size stays 28px but a 44px tap area is ensured by the
     transparent padding region around the button (via the ::after pseudo-element). */
  position: relative;
  /* Override the global `button { min-height: 44px }` touch-target rule
     so the button stays a perfect circle instead of stretching into an
     oval. The 28x28 size is still comfortably tappable on mobile. */
  min-width: 28px; min-height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--charcoal-xl);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: var(--font-d);
  font-size: 14px; font-weight: 800;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.4s ease;
}

.help-icon-btn::after {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

.help-icon-btn:hover,
.help-icon-btn[aria-expanded="true"] {
  color: var(--teal-dark);
  border-color: var(--teal-light);
  background: var(--teal-pale);
}

/* Dark variant — for the topbar and expediente header where the
   background is nav-bg. Uses white-on-dark styling. */

.help-icon-btn--dark {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
}

.help-icon-btn--dark:hover,
.help-icon-btn--dark[aria-expanded="true"] {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
}

.help-tip-wrap { position: relative; display: inline-flex; }

.help-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  max-width: calc(100vw - 24px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 14px 16px;
  z-index: 60;
  animation: fadeIn 0.45s ease;
}

.help-tip-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}

.help-tip-list li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--charcoal-md);
  padding-left: 14px;
  position: relative;
}

.help-tip-list li::before {
  content: ""; position: absolute;
  left: 2px; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

/* Desktop-only elements: hidden on mobile */

.topbar-screen-name, .topbar-refresh-btn, .topbar-actions,
.home-two-panel-desktop { display: none; }

/* ── RESPONSIVE: DESKTOP (768px+) ── */

@media (min-width: 768px) {
  /* Override safe area insets for desktop (no notch) */
  :root { --sat: 0px; --sab: 0px; --bottom-tabs-h: 0px; }

  /* Bottom tab bar is mobile-only; desktop uses the sidebar drawer. */
  .bottom-tabs { display: none !important; }

  /* Page padding no longer needs to reserve space for a tab bar. */
  .page { padding-bottom: 24px; }

  /* Restore desktop FAB placement (matches legacy spacing). */
  .fab { bottom: calc(var(--sab) + 20px); }
  .fab-menu { bottom: calc(var(--sab) + 84px); }

  /* Shell: horizontal layout (sidebar | main) */
  .shell { flex-direction: row; max-width: none; margin: 0; }
  .status-bar { display: none; }

  /* Drawer: persistent sidebar */
  .drawer-overlay { display: none !important; }
  .drawer {
    position: static !important; width: 240px; height: auto;
    flex-shrink: 0; pointer-events: auto !important;
    z-index: auto;
  }
  .drawer-panel {
    position: static !important; width: 240px; max-width: none;
    transform: none !important; transition: none !important;
    animation: none !important;
  }
  .drawer-header { padding: 20px 16px 16px; }

  /* Main content area: no extra height constraint — flex:1 from base is enough */

  /* Topbar: hide hamburger, un-center logo */
  .hamburger { display: none; }
  .topbar-brand { position: static; transform: none; }
  .topbar-brand:active { background: var(--teal-pale); color: var(--teal-dark); transform: scale(0.9); }

  /* Page: wider padding, centered */
  .page { padding: 20px 32px; max-width: 900px; margin: 0 auto; }

  /* Sheets: centered modal instead of bottom sheet */
  .sheet-overlay { align-items: center; }
  .sheet-panel {
    max-width: 520px;
    border-radius: var(--radius-lg);
    animation: sheetScaleIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 80dvh;
  }
  .sheet-handle { display: none; }

  /* KPI grid: 4 columns on desktop, highlight card spans 2 */
  .kpi-grid-desktop { grid-template-columns: repeat(4, 1fr) !important; }
  .kpi-card--highlight { grid-column: span 2 !important; }

  /* Desktop topbar: light, warm */
  .topbar {
    background: var(--white); border-bottom: 1px solid var(--border-lt);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); padding: 10px 24px;
  }
  .topbar-brand { color: var(--charcoal); }
  .topbar-screen-name {
    display: inline; font-size: 14px; color: var(--charcoal-lt);
    margin-left: 12px; font-weight: 600; font-family: var(--font);
  }
  .topbar-refresh-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: none; border: 1.5px solid var(--border);
    cursor: pointer; color: var(--charcoal-xl);
    transition: all 0.4s; min-height: unset;
  }
  .topbar-refresh-btn:hover { background: var(--teal-pale); color: var(--teal-dark); border-color: var(--teal-light); }
  /* On desktop the settings avatar uses solid teal. Target the ::before
     since the button version of .avatar-sm draws its circle via a
     pseudo-element to keep the hit area at 44×44. */
  .topbar-right .avatar-sm { background: var(--teal); color: var(--white); }
  .topbar-right button.avatar-sm { background: transparent; }
  .topbar-right button.avatar-sm::before { background: var(--teal); }
  .admin-btn { color: var(--charcoal-xl); }
  /* Dark help button variant is used for the mobile topbar; swap it back
     to the light styling inside the desktop (white) topbar. */
  .topbar .help-icon-btn--dark {
    border-color: var(--border);
    color: var(--charcoal-xl);
  }
  .topbar .help-icon-btn--dark:hover,
  .topbar .help-icon-btn--dark[aria-expanded="true"] {
    background: var(--teal-pale);
    color: var(--teal-dark);
    border-color: var(--teal-light);
  }

  /* Desktop "+ Nuevo" button lives in the topbar; FAB softens to a
     secondary affordance so the two don't fight. */
  .topbar-actions { display: inline-flex; position: relative; margin-right: 4px; gap: 8px; align-items: center; }
  .topbar-search-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 10px 0 12px;
    background: var(--cream);
    border: 1px solid var(--border-lt);
    border-radius: var(--radius-pill);
    color: var(--charcoal-lt);
    font-family: var(--font); cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  .topbar-search-btn:hover { background: var(--teal-mist); border-color: var(--teal-light); color: var(--teal-dark); }
  .topbar-search-hint {
    font-size: var(--text-sm); font-weight: 500;
    letter-spacing: 0.01em;
  }
  .topbar-search-kbd {
    font-family: var(--font); font-size: 10px; font-weight: 700;
    color: var(--charcoal-xl);
    background: var(--white);
    border: 1px solid var(--border-lt);
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.04em;
  }
  .topbar-search-btn:hover .topbar-search-kbd { color: var(--teal-dark); }
  .topbar-new-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px 0 11px;
    background: var(--charcoal); color: var(--white);
    border: none; border-radius: var(--radius-pill);
    font-family: var(--font); font-size: var(--text-sm); font-weight: 700;
    letter-spacing: 0.01em; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  }
  .topbar-new-btn:hover { background: #000; box-shadow: 0 4px 14px rgba(0,0,0,0.18); transform: translateY(-1px); }
  .topbar-new-btn:active { transform: translateY(0) scale(0.97); }
  .topbar-new-btn--open { background: #000; }
  .topbar-new-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 220px;
    background: var(--white); border: 1px solid var(--border-lt);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 4px; z-index: 60;
    display: flex; flex-direction: column;
    animation: topbarNewMenuIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .topbar-new-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; background: none; border: none;
    cursor: pointer; text-align: left;
    border-radius: var(--radius-sm);
    font-family: var(--font); font-size: var(--text-md); font-weight: 500;
    color: var(--charcoal);
    opacity: 0;
    animation: fabActionIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .topbar-new-item:hover { background: var(--teal-mist); color: var(--teal-dark); }
  .topbar-new-item-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--teal-pale); color: var(--teal-dark);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .topbar-new-item:hover .topbar-new-item-icon { background: var(--teal); color: var(--white); }
  .topbar-new-item-label { flex: 1; white-space: nowrap; }
  @keyframes topbarNewMenuIn {
    0%   { opacity: 0; transform: translateY(-6px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Softened secondary FAB on desktop — primary affordance is "+ Nuevo"
     in the topbar. Keeps muscle memory for cross-device users without
     competing for visual weight. */
  .fab {
    background: var(--cream-dark);
    color: var(--charcoal);
    box-shadow: var(--shadow-sm);
  }
  .fab:hover {
    filter: brightness(1.06);
    box-shadow:
      0 12px 32px -4px rgba(91,155,175,0.6),
      0 4px 14px rgba(46,46,46,0.14),
      inset 0 1px 0 rgba(255,255,255,0.35);
  }

  /* Multi-column Home dashboard */
  .home-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
  .home-col-main { padding-right: 0; }
  .home-col-side { padding-left: 0; }

  /* Spacious cards on desktop */
  .card { border-radius: var(--radius-lg); }
  .kpi-card { padding: 18px 20px; }
  .kpi-value { font-size: 24px; }
  .row-item { padding: 14px 18px; min-height: 66px; }
  .section-title { font-size: 16px; }

  /* Appointment card color accents on desktop */
  .row-item { border-left: 3px solid transparent; }
  .row-item:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .row-item:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .row-item:only-child { border-radius: var(--radius-lg); }

  /* Expediente: right-side panel on desktop */
  .expediente-desktop-panel {
    left: auto !important;
    right: 0 !important;
    width: 580px !important;
    max-width: 50vw !important;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
    animation: slideInRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  .expediente-desktop-panel .expediente-drag-handle { display: none; }

  /* NoteEditor: centered panel instead of full-screen */
  .note-editor-desktop {
    left: 240px !important;
    max-width: 680px !important;
    right: auto !important;
    width: calc(100% - 240px) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }

  /* Wider week event cells: show time + name */
  .week-event { font-size: 10px; padding: 4px 6px; }
  .week-event-time { display: inline; font-weight: 800; margin-right: 2px; }
  .week-time-row { min-height: 56px; }
  .week-cell { min-height: 56px; }
  :root { --week-row-h: 56px; }

  /* Drag-and-drop reschedule (week view). Draggable events get a grab
     cursor; hovered drop-target cells highlight with teal-pale. */
  .week-event--draggable { cursor: grab; }
  .week-event--draggable:active { cursor: grabbing; }
  .week-cell--drop-target {
    background: var(--teal-pale) !important;
    box-shadow: inset 0 0 0 2px var(--teal);
    transition: background 0.1s ease, box-shadow 0.1s ease;
  }
}

/* ── DESKTOP POINTER: tighter sizing ── */

@media (hover: hover) and (min-width: 768px) {
  button, a, select { min-height: 36px; }
  .icon-btn { min-width: 36px; min-height: 36px; }
  .btn { height: 42px; font-size: 14px; }
  .search-bar { height: 38px; }
  .fab { width: 48px; height: 48px; bottom: 24px; right: 24px; }
  .fab-action { min-height: 38px; }
  .chip { min-height: 30px; }
  .cal-day { min-height: 40px; }
  .month-cell { min-height: 36px; }
  .month-nav-btn { min-width: 36px; min-height: 36px; }
}

/* ── CURSOR + TRANSITIONS (pointer devices) ── */

.row-item, .settings-row, .kpi-card, .month-cell, .week-cell, .chip { cursor: pointer; }

.row-item, .settings-row, .drawer-item, .kpi-card, .month-cell, .week-cell, .chip,
.btn, .fab, .fab-action { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── HOVER STATES (pointer devices only) ── */

@media (hover: hover) {
  .row-item:hover { background: var(--teal-mist); }
  .settings-row:hover { background: var(--teal-mist); }
  .drawer-item:hover { background: rgba(255,255,255,0.08); }
  .btn:hover { transform: scale(0.98); }
  .btn-primary:hover { background: #000; box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
  .fab:hover { transform: scale(1.08); }
  .fab-action:hover { background: var(--cream); }
  .icon-btn:hover { opacity: 0.7; }
  .admin-btn:hover { opacity: 0.8; }
  .month-nav-btn:hover { background: var(--teal-pale); }
  .month-cell:hover { background: var(--teal-pale); }
  .week-cell:hover { background: var(--teal-mist); }
  .week-event:hover { background: var(--teal-pale); filter: brightness(0.97); }
  .chip:hover { opacity: 0.85; }
  .kpi-card:hover { border-color: var(--teal-light); }
}

/* ── FOCUS-VISIBLE (keyboard navigation) ── */

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: var(--radius-sm); }

.btn:focus-visible, .lp-btn:focus-visible { outline-offset: 3px; }

.drawer-item:focus-visible { outline-color: var(--teal-light); outline-offset: -2px; }

/* ── DESKTOP DRAWER: stronger active state ── */

@media (min-width: 768px) {
  .drawer-item.active { background: rgba(91,155,175,0.25); }
  .drawer-item.active::before { width: 4px; }
  .drawer-item.active .drawer-item-label { font-size: 15px; }
}

/* ── REDUCED MOTION ── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── CUSTOM SCROLLBAR (desktop) ── */

@media (min-width: 768px) {
  .page::-webkit-scrollbar { width: 6px; }
  .page::-webkit-scrollbar-track { background: transparent; }
  .page::-webkit-scrollbar-thumb { background: var(--cream-deeper); border-radius: 3px; }
  .page::-webkit-scrollbar-thumb:hover { background: var(--border); }
  .page { scrollbar-width: thin; scrollbar-color: var(--cream-deeper) transparent; }
  .drawer-nav::-webkit-scrollbar { width: 4px; }
  .drawer-nav::-webkit-scrollbar-track { background: transparent; }
  .drawer-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
  .drawer-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }
}

/* ── NOTES SPLIT VIEW (≥1024px) ──
   List on the left, inline NoteEditor on the right. Same pattern as
   patients master-detail. */

@media (min-width: 1024px) {
  .notes-page--split {
    display: flex !important;
    flex-direction: row;
    flex: 1; min-height: 0;
    padding: 0 !important; max-width: none !important;
    margin: 0 !important;
    overflow: hidden;
  }
  .notes-page--split .notes-list-col {
    width: 360px; flex-shrink: 0;
    border-right: 1px solid var(--border-lt);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px;
  }
  .notes-page--split .notes-detail-col {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    background: var(--white);
  }
  .notes-detail-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 60px 32px; color: var(--charcoal-xl); gap: 8px;
  }
  .notes-detail-empty-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--teal-pale); color: var(--teal);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
  }
  .notes-detail-empty-title {
    font-family: var(--font-d); font-size: var(--text-lg); font-weight: 800;
    color: var(--charcoal-md); margin-bottom: 4px;
  }
  .notes-detail-empty-hint {
    font-size: var(--text-sm); max-width: 320px; line-height: 1.5;
  }
  .note-editor-inline {
    border-left: 0;
  }
}

/* ── PATIENTS SPLIT VIEW (≥1024px) ──
   Left-side list + inline expediente on the right. Replaces the
   .expediente-desktop-panel overlay at true-desktop breakpoint. */

@media (min-width: 1024px) {
  .patients-split-view {
    display: flex; flex: 1; min-height: 0;
    width: 100%; max-width: none;
    margin: 0; padding: 0;
    overflow: hidden;
  }
  .patients-split-view .patients-list-pane {
    width: 380px; flex-shrink: 0;
    border-right: 1px solid var(--border-lt);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--white);
  }
  .patients-split-view .patients-detail-pane {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    background: var(--white);
    border-radius: 0;
  }
  /* At ≥1024px the expediente overlay must NOT render when it is inline;
     the Patients.jsx branch already skips the portal, but we also reset
     the .expediente-desktop-panel overlay chrome so nothing stray shows. */
  .patients-split-view .expediente-inline {
    position: static; width: 100%; height: 100%;
    box-shadow: none; border-radius: 0;
  }
  .patients-split-view .row-item.row-item--selected {
    background: var(--teal-mist);
    border-left: 3px solid var(--teal);
  }
  .patients-split-view-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 60px 32px; color: var(--charcoal-xl); gap: 8px;
  }
  .patients-split-view-empty .patients-split-view-empty-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--teal-pale); color: var(--teal);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
  }
  .patients-split-view-empty-title {
    font-family: var(--font-d); font-size: var(--text-lg); font-weight: 800;
    color: var(--charcoal-md); margin-bottom: 4px;
  }
  .patients-split-view-empty-hint {
    font-size: var(--text-sm); max-width: 320px; line-height: 1.5;
  }
}

/* ── RESPONSIVE: LAPTOP (1024px+) ── */

@media (min-width: 1024px) {
  /* Density: slightly taller rows + more generous card padding.
     Body text stays at the same 14px base — bumping it would require
     re-tuning dozens of inline styles. Card/row/KPI spacing gives the
     laptop layout its breathing room instead. */
  .row-item { padding: 16px 20px; min-height: 70px; }
  .row-title { font-size: var(--text-md); }
  .kpi-card { padding: 20px 22px; }
  .kpi-value { font-size: 26px; }
  .section-title { font-size: var(--text-lg); }
  .card { box-shadow: var(--shadow-sm); }

  .page { max-width: 1040px; padding: 24px 40px; }
  .drawer { width: 260px; }
  .drawer-panel { width: 260px; }
  .sheet-panel { max-width: 560px; }
  .expediente-desktop-panel {
    width: 620px !important;
  }
  .note-editor-desktop {
    left: 260px !important;
    width: calc(100% - 260px) !important;
  }
  .week-time-col { width: 56px; }
  .week-header-row { grid-template-columns: 56px repeat(7, 1fr); }
  :root { --week-row-h: 60px; }
  .week-time-row, .week-cell { min-height: 60px; }
  .week-event { font-size: 11px; padding: 4px 8px; }
  .fin-stats-grid { gap: 14px; }
}

/* ── HOME DASHBOARD (≥1024px) ──
   On true desktop, collapse the carousel (Today/Mañana stacked panels
   become a 2-column grid) and turn the side column's stacked sections
   into a 3-up grid. Mobile markup is untouched; desktop-only classes
   .home-carousel and .home-side-grid are toggled off below the
   breakpoint. */

@media (min-width: 1024px) {
  /* Full-bleed Today+Tomorrow as side-by-side cards, no carousel */
  .home-carousel { display: none !important; }
  .home-two-panel-desktop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .home-two-panel-desktop .home-panel-title {
    font-family: var(--font-d); font-size: var(--text-md); font-weight: 800;
    color: var(--charcoal); letter-spacing: -0.2px;
    padding: 0 2px 8px;
  }
  .home-two-panel-desktop .home-panel-meta {
    font-size: var(--text-xs); font-weight: 600;
    color: var(--charcoal-xl); letter-spacing: 0.04em;
    text-transform: uppercase; padding: 0 2px 6px;
  }
  .home-two-panel-see-all {
    position: absolute; top: -2px; right: 2px;
    font-size: var(--text-sm); font-weight: 600;
    color: var(--teal-dark); background: none; border: none;
    cursor: pointer; padding: 4px 0;
  }
  /* Side column: 3 sections in a row */
  .home-col-side {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start;
  }
  .home-col-side > .section {
    padding: 0 !important;
    min-width: 0;
  }
  .home-col-side .section-header { padding: 0 2px 8px; }
  /* Home columns: stack main row + side row vertically (not 1fr 1fr) */
  .home-columns {
    display: block !important;
    padding: 0 4px;
  }
  .home-col-main { padding: 0 0 14px; }
}

/* ── RESPONSIVE: WIDE DESKTOP (1440px+) ── */

@media (min-width: 1440px) {
  .page { max-width: 1200px; }
}

/* ══════════════════════════════════════════════════════
   DARK / NIGHT MODE
   Override CSS variables when data-theme="dark" is set
   on <html>. Everything that uses var(--*) adapts
   automatically; component-specific overrides follow.
   ══════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  color-scheme: dark;

  /* ── Primary teal ── */
  --teal:        #4A9BB0;
  --teal-dark:   #5AADBE;
  --teal-light:  #6DB8CC;
  --teal-pale:   rgba(91,155,175,0.15);
  --teal-mist:   rgba(91,155,175,0.08);

  /* ── Neutrals ── */
  --cream:       #2A2A2A;
  --cream-dark:  #333333;
  --cream-deeper:#3D3D3D;

  /* ── Text ── */
  --charcoal:    #EAEAEA;
  --charcoal-md: #BFBFBF;
  --charcoal-lt: #999999;
  --charcoal-xl: #888888;

  /* ── Borders ── */
  --border:      #3A3A3A;
  --border-lt:   #2E2E2E;

  /* ── Surfaces ── */
  --white:       #1A1A1A;

  /* ── Status colors ── */
  --green:       #4EC98A;
  --green-bg:    rgba(61,171,116,0.12);
  --red:         #E57777;
  --red-bg:      rgba(217,107,107,0.12);
  --amber:       #E0B050;
  --amber-bg:    rgba(212,160,64,0.12);
  --purple:      #A08FD8;
  --purple-bg:   rgba(139,126,200,0.12);

  /* ── Navigation ── */
  --nav-bg:      #141E22;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.3);
  --shadow:      0 2px 12px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 28px rgba(0,0,0,0.5);
}

/* ── Buttons: invert primary in dark mode ── */

html[data-theme="dark"] .btn-primary {
  background: #EAEAEA;
  color: #1A1A1A;
}

html[data-theme="dark"] .fab {
  /* Keep the teal gradient in dark mode too — it's meant to look
     special, so we don't fall through to the --charcoal swap. */
  background: radial-gradient(circle at 30% 25%, var(--teal-light) 0%, var(--teal) 55%, var(--teal-dark) 100%);
  color: #FFFFFF;
  box-shadow:
    0 10px 28px -6px rgba(91,155,175,0.6),
    0 4px 14px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

/* OAuth buttons: Google keeps its light pill per brand guidelines and
   Apple stays on a dark pill — the --charcoal-based swap would otherwise
   flip both, so we hardcode literal colors here. */

html[data-theme="dark"] .btn-oauth-google {
  background: #FFFFFF; color: #1A1A1A; border-color: #D8D8D8;
}

html[data-theme="dark"] .btn-oauth-apple {
  background: #000000; color: #FFFFFF; border-color: #000000;
}

/* ── Overlays: slightly stronger for dark backgrounds ── */

html[data-theme="dark"] .drawer-overlay {
  background: rgba(0,0,0,0.6);
}

html[data-theme="dark"] .sheet-overlay {
  background: rgba(0,0,0,0.55);
}

html[data-theme="dark"] .fab-overlay {
  background: rgba(0,0,0,0.55);
}

/* ── Scrollbar ── */

html[data-theme="dark"] .page::-webkit-scrollbar-thumb {
  background: #444;
}

html[data-theme="dark"] .page::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ── Avatar text: keep white on colored backgrounds ── */

html[data-theme="dark"] .row-avatar { color: #FFFFFF; }

html[data-theme="dark"] .avatar-sm { color: #FFFFFF; }

/* ── Active chip: ensure white text on teal ── */

html[data-theme="dark"] .chip.active { color: #FFFFFF; }

/* ── Autofill ── */

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #2A2A2A inset;
  -webkit-text-fill-color: #EAEAEA;
}

/* ── Landing page dark overrides ──
   The nav, page bg, and most surfaces adapt automatically via the shared
   --white / --charcoal tokens now. Only the primary CTA needs explicit
   inversion so it stays a bright pill on the dark page. */

html[data-theme="dark"] .lp-btn--primary {
  background: #EAEAEA;
  color: #1A1A1A;
}

/* ── Hover overrides for dark mode (pointer devices) ── */

@media (hover: hover) {
  html[data-theme="dark"] .btn-primary:hover {
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  html[data-theme="dark"] .fab:hover {
    filter: brightness(1.1);
  }
  html[data-theme="dark"] .lp-btn--primary:hover {
    background: #FFFFFF;
  }
}

/* ── Desktop primitives (tooltip, context menu, split view) ── */

html[data-theme="dark"] .tooltip { background: #2A2A2A; color: #EAEAEA; border: 1px solid #3A3A3A; }

html[data-theme="dark"] .tooltip-kbd { background: rgba(255,255,255,0.08); }

html[data-theme="dark"] .context-menu { background: #242424; border-color: #3A3A3A; }

html[data-theme="dark"] .split-view-list { background: #1F1F1F; }

html[data-theme="dark"] .split-view-detail { background: #1A1A1A; }

html[data-theme="dark"] .cmdp-panel { background: #1F1F1F; border-color: #3A3A3A; }

html[data-theme="dark"] .cmdp-footer { background: #242424; }

html[data-theme="dark"] .cmdp-kbd { background: #2A2A2A; border-color: #3A3A3A; color: #BFBFBF; }

html[data-theme="dark"] .topbar-search-btn { background: #242424; border-color: #3A3A3A; color: #BFBFBF; }

html[data-theme="dark"] .topbar-search-kbd { background: #2A2A2A; border-color: #3A3A3A; color: #999; }

html[data-theme="dark"] .topbar-new-menu { background: #242424; border-color: #3A3A3A; }

html[data-theme="dark"] .topbar-new-btn { background: #EAEAEA; color: #1A1A1A; }

html[data-theme="dark"] .topbar-new-btn:hover { background: #FFFFFF; }