/* =========================================================
   ME 4.0 — REDISEÑO TOTAL
   Capa visual unificada. Mantiene intacta la lógica 3.2.
   ========================================================= */

:root {
  --v4-bg: #f3f4f6;
  --v4-surface: rgba(255,255,255,.92);
  --v4-surface-solid: #ffffff;
  --v4-surface-soft: #f8f8fa;
  --v4-surface-strong: #eceef2;
  --v4-text: #181a20;
  --v4-muted: #717784;
  --v4-line: rgba(24,26,32,.10);
  --v4-line-strong: rgba(24,26,32,.16);
  --v4-shadow: 0 12px 34px rgba(21,24,31,.07);
  --v4-shadow-float: 0 18px 50px rgba(21,24,31,.14);
  --v4-radius-xs: 10px;
  --v4-radius-sm: 13px;
  --v4-radius-md: 18px;
  --v4-radius-lg: 24px;
  --v4-radius-xl: 30px;
  --v4-content: 1180px;
  --v4-side: 104px;
  --background: var(--v4-bg);
  --surface: var(--v4-surface-solid);
  --surface-2: var(--v4-surface-soft);
  --surface-3: var(--v4-surface-strong);
  --text: var(--v4-text);
  --muted: var(--v4-muted);
  --border: var(--v4-line);
  --border-strong: var(--v4-line-strong);
  --soft: var(--v4-surface-strong);
  --radius-sm: var(--v4-radius-xs);
  --radius-md: var(--v4-radius-md);
  --radius-lg: var(--v4-radius-lg);
  --shadow-sm: none;
  --shadow-md: var(--v4-shadow);
  --shadow-lg: var(--v4-shadow-float);
}

:root[data-theme="dark"] {
  --v4-bg: #101114;
  --v4-surface: rgba(25,27,32,.92);
  --v4-surface-solid: #191b20;
  --v4-surface-soft: #202329;
  --v4-surface-strong: #292d34;
  --v4-text: #f4f5f7;
  --v4-muted: #9aa1ad;
  --v4-line: rgba(255,255,255,.09);
  --v4-line-strong: rgba(255,255,255,.15);
  --v4-shadow: 0 14px 38px rgba(0,0,0,.22);
  --v4-shadow-float: 0 22px 60px rgba(0,0,0,.34);
  --background: var(--v4-bg);
  --surface: var(--v4-surface-solid);
  --surface-2: var(--v4-surface-soft);
  --surface-3: var(--v4-surface-strong);
  --text: var(--v4-text);
  --muted: var(--v4-muted);
  --border: var(--v4-line);
  --border-strong: var(--v4-line-strong);
  --soft: var(--v4-surface-strong);
}

html {
  background: var(--v4-bg);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -8%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 34rem),
    var(--v4-bg) !important;
  color: var(--v4-text);
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  letter-spacing: -.01em;
}

::selection {
  background: color-mix(in srgb,var(--accent) 24%,transparent);
}

body.has-me-shell[data-page] > main,
body.has-me-shell[data-page] > main[class],
body.has-me-shell[data-page] > main:not([class]),
body > main[class] {
  width: min(var(--v4-content), calc(100% - 36px)) !important;
  max-width: var(--v4-content) !important;
  margin-inline: auto !important;
  padding-top: 28px !important;
  padding-bottom: var(--me-shell-bottom-reserve,118px) !important;
}

/* ---------- Shell ---------- */
.me-appbar {
  width: min(var(--v4-content), calc(100% - 36px)) !important;
  min-height: 58px !important;
  margin: max(10px, env(safe-area-inset-top,0px)) auto 0 !important;
  padding: 8px 10px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  position: sticky !important;
  top: max(8px, env(safe-area-inset-top,0px)) !important;
  z-index: 800 !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb,var(--v4-surface-solid) 90%,transparent) !important;
  box-shadow: 0 8px 28px rgba(20,24,32,.06) !important;
  backdrop-filter: blur(18px) saturate(1.15);
}

.me-brand {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: var(--v4-surface-soft) !important;
  border: 1px solid var(--v4-line) !important;
  overflow: hidden;
}
.me-brand img { width: 32px !important; height: 32px !important; border-radius: 9px; }

.me-route { min-width: 0; display: flex !important; align-items: baseline !important; gap: 7px !important; }
.me-route span {
  color: var(--v4-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap;
}
.me-route span::after { content: "/"; margin-left: 7px; opacity: .45; }
.me-route strong {
  min-width: 0;
  overflow: hidden;
  color: var(--v4-text) !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-appbar-actions { display: flex !important; align-items: center !important; gap: 7px !important; }
.me-connectivity {
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 12px !important;
  background: var(--v4-surface-soft) !important;
  color: var(--v4-muted) !important;
  font-size: 11px !important;
}
.me-connectivity i { width: 6px !important; height: 6px !important; }
.me-icon-button {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 12px !important;
  background: var(--v4-surface-soft) !important;
  color: var(--v4-text) !important;
  box-shadow: none !important;
}
.me-icon-button svg { width: 18px !important; height: 18px !important; }

.bottom-nav.me-primary-nav {
  right: 50% !important;
  bottom: max(12px, env(safe-area-inset-bottom,0px)) !important;
  width: min(520px, calc(100% - 20px)) !important;
  min-height: 72px !important;
  padding: 7px !important;
  grid-template-columns: repeat(5,1fr) !important;
  gap: 3px !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 24px !important;
  background: color-mix(in srgb,var(--v4-surface-solid) 92%,transparent) !important;
  box-shadow: var(--v4-shadow-float) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  transform: translateX(50%) !important;
}

.bottom-nav.me-primary-nav a,
.bottom-nav.me-primary-nav .me-nav-create {
  min-width: 0 !important;
  min-height: 56px !important;
  padding: 6px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: transparent !important;
  color: var(--v4-muted) !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.bottom-nav.me-primary-nav a.active {
  background: color-mix(in srgb,var(--accent) 11%,var(--v4-surface-soft)) !important;
  color: var(--accent) !important;
}
.bottom-nav.me-primary-nav .me-nav-create {
  color: var(--accent-contrast,#fff) !important;
  background: var(--accent) !important;
  margin: -2px 3px !important;
  min-height: 60px !important;
  border-radius: 19px !important;
}
.bottom-nav.me-primary-nav .me-nav-create.is-disabled { opacity: .38 !important; }
.bottom-nav.me-primary-nav .me-nav-icon {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
}
.bottom-nav.me-primary-nav .me-nav-icon svg { width: 21px !important; height: 21px !important; }
.bottom-nav.me-primary-nav .me-nav-label { line-height: 1 !important; }

.me-context-nav {
  position: sticky !important;
  top: 78px !important;
  z-index: 690 !important;
  width: min(720px, calc(100% - 36px)) !important;
  margin: 10px auto 0 !important;
  padding: 5px !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb,var(--v4-surface-solid) 91%,transparent) !important;
  box-shadow: 0 8px 26px rgba(20,24,32,.05) !important;
  backdrop-filter: blur(18px) !important;
  transform: none !important;
}
.me-context-scroll { display: grid !important; grid-template-columns: repeat(var(--me-context-count,3),1fr) !important; gap: 4px !important; overflow: visible !important; }
.me-context-nav a {
  min-height: 42px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--v4-muted) !important;
  text-decoration: none !important;
}
.me-context-nav a.active {
  background: var(--v4-surface-strong) !important;
  color: var(--v4-text) !important;
  box-shadow: none !important;
}
.me-context-nav a span { width: 17px !important; height: 17px !important; }
.me-context-nav a svg { width: 17px !important; height: 17px !important; }
.me-context-nav a strong { font-size: 12px !important; font-weight: 760 !important; }

/* ---------- Typography & headers ---------- */
.page-header,
.me-section-header,
.money-header,
.settings-header,
.setup-header,
.compact-page-header {
  margin-bottom: 22px !important;
  align-items: flex-end !important;
  gap: 18px !important;
}
.page-header h1,
.me-section-header h1,
.money-header h1,
.settings-header h1,
.setup-header h1 {
  margin: 3px 0 5px !important;
  color: var(--v4-text) !important;
  font-size: clamp(30px,4vw,42px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  font-weight: 790 !important;
}
.page-header p,
.me-section-header p,
.money-header p,
.settings-header p,
.setup-header p {
  max-width: 620px !important;
  margin: 0 !important;
  color: var(--v4-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.page-eyebrow,
.me-section-header .page-eyebrow,
.money-header .page-eyebrow {
  color: var(--v4-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
}

h1,h2,h3,strong,b { letter-spacing: -.02em; }
h2 { color: var(--v4-text); }
p,small { text-wrap: pretty; }

/* ---------- Surfaces ---------- */
.dashboard-card,
.summary-card,
.filter-panel,
.home-now-main-card,
.home-now-signal-card,
.home-now-links a,
.planner-magic-card,
.task-day-card,
.money-movement-hub-card,
.money-reference-summary,
.money-summary-card,
.money-category-card,
.money-summary-engine,
.me-profile-editor-card,
.me-moment-card,
.me-insight-card,
.me-history-timeline-surface,
.habits-today-hero,
.moto-overview-card,
.weekly-sunday-review,
.diary-hero,
.diary-metrics > *,
.settings-profile-summary,
.settings-redesign-group,
.accounts-overview-card,
.guide-callout,
.guide-grid > *,
.form-section,
.focus-selection,
.focus-timer-section,
.agenda-toolbar,
.agenda-day-panel,
.agenda-snapshot,
.money-wallet-engine {
  border: 1px solid var(--v4-line) !important;
  border-radius: var(--v4-radius-lg) !important;
  background: var(--v4-surface-solid) !important;
  box-shadow: none !important;
}

.dashboard-card,
.home-now-main-card,
.me-profile-editor-card,
.me-moment-card,
.me-insight-card,
.settings-redesign-group,
.form-section,
.focus-selection,
.focus-timer-section,
.agenda-day-panel,
.money-movement-hub-card,
.money-reference-summary,
.money-summary-engine,
.money-category-card {
  padding: 20px !important;
}

.dashboard-card:hover,
.home-now-links a:hover,
.settings-redesign-group:hover {
  box-shadow: none !important;
  transform: none !important;
}

.dashboard-section-header,
.money-section-heading,
.habits-section-head,
.focus-history-header {
  margin-bottom: 16px !important;
  gap: 12px !important;
}
.dashboard-section-header h2,
.money-section-heading h2,
.habits-section-head h2,
.focus-history-header h2 {
  margin: 2px 0 0 !important;
  font-size: 19px !important;
  line-height: 1.2 !important;
  letter-spacing: -.03em !important;
}
.dashboard-section-header p,
.money-section-heading p,
.habits-section-head p { color: var(--v4-muted) !important; font-size: 13px !important; }

/* ---------- Controls ---------- */
.button,
button.button,
.task-action,
.money-movement-action,
.goal-actions button,
.wellbeing-history-actions button {
  min-height: 42px !important;
  padding: 9px 14px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 740 !important;
}
.button-primary {
  background: var(--accent) !important;
  color: var(--accent-contrast,#fff) !important;
}
.button-secondary,
.task-action,
.money-movement-action,
.wellbeing-history-actions button {
  background: var(--v4-surface-soft) !important;
  border-color: var(--v4-line) !important;
  color: var(--v4-text) !important;
}
.button:hover, button:hover { filter: none; }

input,select,textarea,
.form-control {
  min-height: 46px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--v4-line-strong) !important;
  border-radius: 13px !important;
  background: var(--v4-surface-soft) !important;
  color: var(--v4-text) !important;
  box-shadow: none !important;
}
input:focus,select:focus,textarea:focus {
  border-color: color-mix(in srgb,var(--accent) 65%,var(--v4-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent) !important;
}
label { color: var(--v4-text); }

/* ---------- Messages, chips, tabs ---------- */
.message {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
.message:empty { display:none !important; }

[class*="tab-list"],
[class*="tabs"],
.money-tabs,
.moto-subnav,
.me-profile-tabs,
.habits-tabs {
  border-radius: 15px !important;
}

.task-tag,
.money-ledger-tags span,
.home-now-state,
[class*="chip"],
[class*="badge"] {
  border-radius: 999px !important;
}

/* ---------- Modal & sheet ---------- */
.modal-backdrop {
  background: rgba(9,11,15,.42) !important;
  backdrop-filter: blur(7px) !important;
}
.modal-card,
.me-sheet-panel,
.smart-select-panel {
  border: 1px solid var(--v4-line) !important;
  border-radius: 24px !important;
  background: var(--v4-surface-solid) !important;
  box-shadow: var(--v4-shadow-float) !important;
}
.modal-header { gap: 12px !important; }
.modal-header h2 { font-size: 21px !important; }

.me-sheet-panel { max-width: 520px !important; }
.me-sheet-option {
  min-height: 58px !important;
  border-radius: 15px !important;
  border: 1px solid transparent !important;
}
.me-sheet-option:hover,
.me-sheet-option.active {
  background: var(--v4-surface-soft) !important;
  border-color: var(--v4-line) !important;
}
.me-sheet-option-icon { border-radius: 12px !important; }

/* ---------- Home / Ahora ---------- */
.today-page.home-now-page { padding-top: 24px !important; }
.home-now-v30 {
  display: grid !important;
  grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
.home-now-v30 > .home-now-main-card { grid-column: 1 / -1; grid-row: 1; order: 1; }
.home-now-v30 > .home-day-core { grid-column: 1; grid-row: 2 / span 3; order: 2; }
.home-now-v30 > .home-now-quick-grid { grid-column: 2; grid-row: 2; order: 3; }
.home-now-v30 > .home-now-signal-card,
.home-now-v30 > .home-now-option,
.home-now-v30 > .home-now-rest { grid-column: 2; grid-row: auto; order: 4; }
.home-now-v30 > .home-now-links { grid-column: 2; grid-row: auto; order: 5; }

.home-day-core {
  min-height: 520px;
  padding: 22px !important;
}
.today-timeline-header { margin-bottom: 12px !important; }
.today-timeline-header h2 { font-size: 24px !important; }
.task-interaction-hint { display: none !important; }
.today-timeline-links a {
  min-height: 36px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--v4-line);
  border-radius: 11px;
  background: var(--v4-surface-soft);
  color: var(--v4-text) !important;
}
.home-plan-preview-grid { gap: 8px !important; margin: 0 0 14px !important; }
.home-plan-preview-grid > * {
  border: 0 !important;
  border-radius: 13px !important;
  background: var(--v4-surface-soft) !important;
  box-shadow: none !important;
}
.today-timeline { gap: 8px !important; }

.home-now-main-card { overflow: hidden; }
.home-now-main-head { gap: 12px !important; align-items: flex-start !important; }
.home-now-main-head h2 { font-size: 24px !important; margin: 4px 0 6px !important; }
.home-now-main-head p { color: var(--v4-muted) !important; font-size: 13px !important; }
.home-now-state {
  padding: 7px 9px !important;
  border: 1px solid var(--v4-line) !important;
  background: var(--v4-surface-soft) !important;
  color: var(--v4-text) !important;
  font-size: 11px !important;
}
.home-now-context-grid { gap: 8px !important; margin-top: 16px !important; }
.home-now-context-grid article,
.home-now-option,
.home-now-rest {
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--v4-surface-soft) !important;
}
.home-now-context-grid article { padding: 14px !important; }
.home-now-option,.home-now-rest { margin-top: 8px !important; padding: 15px !important; }
.home-now-links { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.home-now-links a { min-height: 84px !important; padding: 15px !important; }
.home-now-links a span { font-size: 14px !important; }
.home-now-links a small { color: var(--v4-muted) !important; font-size: 11px !important; }
.home-now-signal-card { padding: 16px !important; gap: 12px !important; }
.home-now-signal-icon { border-radius: 12px !important; }

/* ---------- Tasks / planning ---------- */
.task-workspace-page,
.planner-page,
.focus-page { max-width: var(--v4-content) !important; }
.task-workspace-header { margin-bottom: 16px !important; }
.task-day-card,
.planner-datebar,
.diary-datebar,
.agenda-toolbar {
  border-radius: 18px !important;
  background: var(--v4-surface-solid) !important;
  border: 1px solid var(--v4-line) !important;
  box-shadow: none !important;
}
.task-list { gap: 8px !important; }
.task-card,
.today-task-card,
.agenda-item,
.agenda-gap-task {
  border: 1px solid var(--v4-line) !important;
  border-left-width: 3px !important;
  border-radius: 16px !important;
  background: var(--v4-surface-solid) !important;
  box-shadow: none !important;
}
.task-card { padding: 16px !important; }
.task-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--v4-line-strong) !important; }
.task-actions { margin-top: 12px !important; padding-top: 11px !important; border-color: var(--v4-line) !important; }
.task-action { min-height: 34px !important; padding: 7px 10px !important; font-size: 11px !important; }
.task-check { width: 25px !important; height: 25px !important; }
.filter-panel { padding: 14px !important; margin-bottom: 12px !important; }
.task-list-toolbar { margin-bottom: 10px !important; }

.planner-layout,
.focus-layout { gap: 14px !important; }
.planner-magic-card { padding: 18px !important; }
.focus-timer-display,
.focus-clock { letter-spacing: -.06em !important; }
.focus-duration-list button { border-radius: 12px !important; }

/* ---------- Agenda ---------- */
.agenda-day-panel { padding: 18px !important; }
.agenda-day-header { padding-bottom: 12px !important; border-bottom: 1px solid var(--v4-line) !important; }
.agenda-day-view,.agenda-week-view,.agenda-timetable-view { gap: 10px !important; }

/* ---------- Money ---------- */
.money-page { max-width: var(--v4-content) !important; }
.money-header-v12 { margin-bottom: 16px !important; }
.money-wallet-engine { padding: 14px !important; margin-bottom: 14px !important; }
.money-tab-panel { gap: 12px !important; }
.money-summary-card.main,
.wellbeing-summary-card.main {
  background: linear-gradient(145deg, color-mix(in srgb,var(--accent) 88%,#111 12%), var(--accent)) !important;
  border-color: transparent !important;
  color: var(--accent-contrast,#fff) !important;
}
.money-reference-summary { padding: 20px !important; }
.money-summary-engine { gap: 10px !important; }
.money-summary-card { border-radius: 17px !important; box-shadow: none !important; }
.money-unified-chart-card { overflow: hidden; }
.money-account-card,
.money-ledger-row,
.money-movement-card,
.account-manage-row-v29 {
  border: 1px solid var(--v4-line) !important;
  border-radius: 15px !important;
  background: var(--v4-surface-soft) !important;
  box-shadow: none !important;
}
.money-ledger-row { margin-bottom: 6px !important; }
.money-chart-period { background: var(--v4-surface-soft) !important; border-color: var(--v4-line) !important; border-radius: 14px !important; }

/* ---------- Me / profile ---------- */
.me-profile-page,
.habits-page,
.moto-page,
.weekly-page,
.diary-page { max-width: var(--v4-content) !important; }
.me-profile-view { gap: 14px !important; }
.me-profile-editor-card { margin-bottom: 14px !important; }
.wellbeing-question,
.wellbeing-sleep-row,
.wellbeing-history-item,
.me-history-day,
.habit-card,
.moto-record-card,
.weekly-item,
.diary-day-card {
  border: 1px solid var(--v4-line) !important;
  border-radius: 16px !important;
  background: var(--v4-surface-soft) !important;
  box-shadow: none !important;
}
.wellbeing-scale button { border-radius: 12px !important; }
.me-moment-card,.me-insight-card { min-height: 0 !important; }

.habits-layout,.moto-layout,.weekly-layout,.diary-layout { gap: 14px !important; }
.habits-today-hero { padding: 18px !important; }
.habit-card.habit-today-card,
.habit-card.habit-progress-card { border-radius: 15px !important; background: var(--v4-surface-soft) !important; }
.moto-overview-card { padding: 20px !important; }
.moto-quick-action { border-radius: 14px !important; box-shadow: none !important; }

/* ---------- Settings / accounts / utility ---------- */
.settings-page,
.accounts-page,
.trash-page,
.guide-page,
.setup-container { max-width: 980px !important; }
.settings-profile-summary { padding: 18px !important; margin-bottom: 14px !important; }
.settings-redesign-group { padding: 10px !important; margin-bottom: 10px !important; }
.settings-redesign-group > header { padding: 8px 8px 10px !important; }
.settings-row,
.settings-action-row,
.settings-option,
.account-manage-row-v29 {
  min-height: 58px !important;
  border-radius: 14px !important;
}
.accounts-overview-card { padding: 20px !important; }
.trash-summary-card { padding: 18px !important; }
.guide-callout { padding: 20px !important; }
.form-section { margin-bottom: 12px !important; }

/* ---------- Empty states ---------- */
.today-empty,
.empty-state {
  min-height: 180px !important;
  padding: 34px 18px !important;
  border-radius: 18px !important;
  color: var(--v4-muted) !important;
}
.today-empty > div {
  background: var(--v4-surface-strong) !important;
  color: var(--v4-text) !important;
}

/* ---------- Natural connection / toast ---------- */
.me-natural-connection,
.me-toast {
  border: 1px solid var(--v4-line) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb,var(--v4-surface-solid) 94%,transparent) !important;
  box-shadow: var(--v4-shadow-float) !important;
  backdrop-filter: blur(18px) !important;
}

/* ---------- Desktop: navigation becomes a rail ---------- */
@media (min-width: 1024px) {
  body.has-me-shell {
    padding-left: var(--v4-side) !important;
  }
  body.has-me-shell[data-page] > main,
  body.has-me-shell[data-page] > main[class],
  body.has-me-shell[data-page] > main:not([class]) {
    width: min(var(--v4-content), calc(100% - 56px)) !important;
    padding-bottom: 48px !important;
  }

  .me-appbar {
    width: min(var(--v4-content), calc(100% - 56px)) !important;
    margin-top: 14px !important;
  }

  .bottom-nav.me-primary-nav {
    right: auto !important;
    left: 14px !important;
    top: 50% !important;
    bottom: auto !important;
    width: 76px !important;
    min-height: auto !important;
    padding: 7px !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(58px,auto) !important;
    gap: 5px !important;
    border-radius: 25px !important;
    transform: translateY(-50%) !important;
  }
  .bottom-nav.me-primary-nav a,
  .bottom-nav.me-primary-nav .me-nav-create {
    min-height: 58px !important;
    margin: 0 !important;
    border-radius: 17px !important;
  }
  .bottom-nav.me-primary-nav .me-nav-create { min-height: 58px !important; }
  .bottom-nav.me-primary-nav .me-nav-label { font-size: 9px !important; }

  .me-context-nav {
    top: 84px !important;
    margin-top: 10px !important;
  }

  .home-day-core { min-height: 610px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  body.has-me-shell[data-page] > main,
  body.has-me-shell[data-page] > main[class],
  body.has-me-shell[data-page] > main:not([class]) {
    padding-top: 18px !important;
  }
  body.has-me-shell[data-nav-group="tasks"] > main,
  body[data-page="plan.html"] > main.planner-page,
  body[data-page="agenda.html"] > main.agenda-page,
  body[data-page="tareas.html"] > main.tasks-page,
  body[data-page="enfoque.html"] > main {
    padding-top: 18px !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  :root { --v4-radius-lg: 20px; }

  body.has-me-shell[data-page] > main,
  body.has-me-shell[data-page] > main[class],
  body.has-me-shell[data-page] > main:not([class]),
  body > main[class] {
    width: calc(100% - 20px) !important;
    padding-top: 14px !important;
    padding-bottom: var(--me-shell-bottom-reserve,108px) !important;
  }

  body.has-me-shell:not([data-page="yo.html"]) > .me-appbar,
  .me-appbar {
    position: sticky !important;
    top: max(7px,env(safe-area-inset-top,0px)) !important;
    width: calc(100% - 20px) !important;
    min-height: 54px !important;
    margin: max(7px,env(safe-area-inset-top,0px)) auto 0 !important;
    padding: 6px 7px !important;
    border-radius: 18px !important;
  }
  .me-brand { width: 40px !important; height: 40px !important; border-radius: 13px !important; }
  .me-brand img { width: 30px !important; height: 30px !important; }
  .me-route { display: block !important; }
  .me-route span { display: block !important; margin-bottom: 1px; font-size: 9px !important; text-transform: uppercase; letter-spacing: .08em; }
  .me-route span::after { display:none; }
  .me-route strong { display: block !important; font-size: 13px !important; }
  .me-connectivity { width: 8px !important; min-width: 8px !important; height: 8px !important; min-height: 8px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .me-connectivity span,.me-connectivity svg { display:none !important; }
  .me-connectivity i { width: 7px !important; height: 7px !important; }
  .me-icon-button { width: 38px !important; height: 38px !important; }

  .bottom-nav.me-primary-nav {
    bottom: max(8px,env(safe-area-inset-bottom,0px)) !important;
    width: calc(100% - 14px) !important;
    min-height: 68px !important;
    padding: 5px !important;
    border-radius: 22px !important;
  }
  .bottom-nav.me-primary-nav a,
  .bottom-nav.me-primary-nav .me-nav-create {
    min-height: 56px !important;
    border-radius: 16px !important;
    gap: 2px !important;
  }
  .bottom-nav.me-primary-nav .me-nav-create { min-height: 58px !important; margin: -1px 1px !important; }
  .bottom-nav.me-primary-nav .me-nav-label { font-size: 9px !important; }
  .bottom-nav.me-primary-nav .me-nav-icon { width: 20px !important; height: 20px !important; }
  .bottom-nav.me-primary-nav .me-nav-icon svg { width: 20px !important; height: 20px !important; }

  body[data-nav-group="tasks"] > .me-context-nav,
  .me-context-nav {
    top: 70px !important;
    width: calc(100% - 20px) !important;
    margin: 8px auto 0 !important;
    padding: 4px !important;
    border-radius: 14px !important;
  }
  .me-context-nav a { min-height: 38px !important; padding: 7px 5px !important; gap: 5px !important; border-radius: 10px !important; }
  .me-context-nav a span { display:none !important; }
  .me-context-nav a strong { font-size: 11px !important; }

  .page-header,
  .me-section-header,
  .money-header,
  .settings-header,
  .setup-header,
  .compact-page-header {
    margin-bottom: 15px !important;
    align-items: flex-start !important;
  }
  .page-header h1,
  .me-section-header h1,
  .money-header h1,
  .settings-header h1,
  .setup-header h1 {
    font-size: 30px !important;
  }
  .page-header p,
  .me-section-header p,
  .money-header p,
  .settings-header p,
  .setup-header p { font-size: 13px !important; }

  .dashboard-card,
  .home-now-main-card,
  .me-profile-editor-card,
  .me-moment-card,
  .me-insight-card,
  .settings-redesign-group,
  .form-section,
  .focus-selection,
  .focus-timer-section,
  .agenda-day-panel,
  .money-movement-hub-card,
  .money-reference-summary,
  .money-summary-engine,
  .money-category-card { padding: 16px !important; }

  .home-now-v30 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .home-now-v30 > .home-day-core,
  .home-now-v30 > .home-now-main-card,
  .home-now-v30 > .home-now-quick-grid,
  .home-now-v30 > .home-now-signal-card,
  .home-now-v30 > .home-now-option,
  .home-now-v30 > .home-now-rest,
  .home-now-v30 > .home-now-links {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .home-now-v30 > .home-now-main-card { order: 1 !important; }
  .home-now-v30 > .home-day-core { order: 2 !important; min-height: 0; }
  .home-now-v30 > .home-now-quick-grid { order: 3 !important; }
  .home-now-v30 > .home-now-signal-card,
  .home-now-v30 > .home-now-option,
  .home-now-v30 > .home-now-rest { order: 4 !important; }
  .home-now-v30 > .home-now-links { order: 5 !important; }
  .home-day-core { padding: 16px !important; }
  .today-timeline-header { align-items: flex-start !important; }
  .today-timeline-header h2,.home-now-main-head h2 { font-size: 21px !important; }
  .today-timeline-links a { min-height: 32px; padding: 6px 9px; font-size: 11px !important; }
  .home-plan-preview-grid { overflow-x: auto; grid-auto-flow: column; grid-auto-columns: minmax(105px,1fr); scrollbar-width: none; }
  .home-plan-preview-grid::-webkit-scrollbar { display:none; }
  .home-now-context-grid { grid-template-columns: 1fr !important; }
  .home-now-links { grid-template-columns: 1fr 1fr !important; }
  .home-now-links a { min-height: 74px !important; padding: 13px !important; }

  .task-card { padding: 14px !important; }
  .task-actions { gap: 5px !important; }
  .task-action { min-width: 0 !important; flex: 1 1 auto !important; }

  .modal-backdrop { padding: 8px !important; place-items: end center !important; }
  .modal-card,
  .me-sheet-panel,
  .smart-select-panel {
    width: 100% !important;
    max-height: min(88vh,760px) !important;
    border-radius: 24px 24px 14px 14px !important;
  }

  .filter-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .planner-layout,.focus-layout,.moto-layout,.weekly-layout,.diary-layout,.habits-layout { grid-template-columns: 1fr !important; }
}

/* ---------- Very small screens ---------- */
@media (max-width: 390px) {
  .bottom-nav.me-primary-nav .me-nav-label { font-size: 8px !important; }
  .bottom-nav.me-primary-nav a,
  .bottom-nav.me-primary-nav .me-nav-create { padding-inline: 2px !important; }
  .home-now-links { grid-template-columns: 1fr !important; }
  .me-route span { display:none !important; }
}

/* =========================================================
   SHELL FINAL OVERRIDES
   La 3.2 acumuló selectores de alta especificidad. Estas reglas
   son deliberadamente exactas para que 4.0 sea la última palabra.
   ========================================================= */

body.has-me-shell > .me-appbar {
  position: sticky !important;
  top: max(8px,env(safe-area-inset-top,0px)) !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
}

body[data-nav-group="tasks"] > .me-context-nav {
  position: sticky !important;
  right: auto !important;
  left: auto !important;
  max-width: 720px !important;
  transform: none !important;
}

@media (min-width:1024px) {
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="desktop"] {
    position: fixed !important;
    z-index: 1200 !important;
    top: 50% !important;
    bottom: auto !important;
    left: 14px !important;
    right: auto !important;
    width: 76px !important;
    max-width: 76px !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(58px,auto) !important;
    gap: 5px !important;
    padding: 7px !important;
    overflow: visible !important;
    border: 1px solid var(--v4-line) !important;
    border-radius: 25px !important;
    background: color-mix(in srgb,var(--v4-surface-solid) 92%,transparent) !important;
    box-shadow: var(--v4-shadow-float) !important;
    backdrop-filter: blur(22px) saturate(1.2) !important;
    transform: translateY(-50%) !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="desktop"]::before,
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="desktop"]::after {
    display: none !important;
    content: none !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="desktop"] > :is(a,button) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    color: var(--v4-muted) !important;
    box-shadow: none !important;
    transform: none !important;
    text-align: center !important;
    overflow: visible !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="desktop"] > :is(a,button).active {
    background: color-mix(in srgb,var(--accent) 11%,var(--v4-surface-soft)) !important;
    color: var(--accent) !important;
    border: 0 !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="desktop"] > .me-nav-create {
    background: var(--accent) !important;
    color: var(--accent-contrast,#fff) !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="desktop"] .me-nav-create .me-nav-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="desktop"] .me-nav-label {
    display: block !important;
    width: 100% !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: inherit !important;
  }
}

@media (max-width:1023px) {
  body.has-me-shell:not([data-page="yo.html"]) > .me-appbar,
  body.has-me-shell > .me-appbar {
    position: sticky !important;
    z-index: 800 !important;
    top: max(7px,env(safe-area-inset-top,0px)) !important;
    right: auto !important;
    left: auto !important;
    width: calc(100% - 20px) !important;
    margin: max(7px,env(safe-area-inset-top,0px)) auto 0 !important;
    transform: none !important;
  }
  body[data-nav-group="tasks"] > .me-context-nav {
    z-index: 790 !important;
    top: 70px !important;
    width: calc(100% - 20px) !important;
    max-width: 720px !important;
    margin: 8px auto 0 !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] {
    position: fixed !important;
    z-index: 1200 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(74px + env(safe-area-inset-bottom,0px)) !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom,0px)) !important;
    overflow: visible !important;
    border: 1px solid var(--v4-line) !important;
    border-width: 1px 0 0 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: var(--v4-surface-solid) !important;
    box-shadow: 0 -10px 28px rgba(8,15,30,.10) !important;
    backdrop-filter: none !important;
    transform: none !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] > :is(a,button),
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] > :is(a,button).active {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 5px 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: var(--v4-muted) !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] > :is(a,button).active {
    background: color-mix(in srgb,var(--accent) 11%,var(--v4-surface-soft)) !important;
    color: var(--accent) !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] > .me-nav-create,
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] > .me-nav-create.active {
    align-self: stretch !important;
    justify-self: stretch !important;
    min-height: 58px !important;
    background: var(--accent) !important;
    color: var(--accent-contrast,#fff) !important;
    border-radius: 17px !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] .me-nav-icon,
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] .me-nav-create .me-nav-icon {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] .me-nav-icon svg,
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] .me-nav-create .me-nav-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: inherit !important;
    stroke: currentColor !important;
  }
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] .me-nav-label {
    display: block !important;
    width: 100% !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: inherit !important;
  }
}


/* Me 4.1.6 — navegación inferior consistente + botón central visible en toda la app */
.bottom-nav.me-primary-nav .me-nav-create,
.bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] > .me-nav-create,
.bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="desktop"] > .me-nav-create{
  position:relative!important;
  background:#182233!important;
  color:transparent!important;
  border:1px solid rgba(255,255,255,.04)!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:0 12px 28px rgba(8,15,30,.22)!important;
}
.bottom-nav.me-primary-nav .me-nav-create.is-disabled,
.bottom-nav.me-primary-nav .me-nav-create:disabled{
  opacity:1!important;
  filter:none!important;
}
.bottom-nav.me-primary-nav .me-nav-create .me-nav-icon,
.bottom-nav.me-primary-nav .me-nav-create .me-nav-label{
  opacity:0!important;
  pointer-events:none!important;
}
.bottom-nav.me-primary-nav .me-nav-create::before{
  content:"+"!important;
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  color:#ffffff!important;
  font-size:36px!important;
  font-weight:300!important;
  line-height:1!important;
  text-indent:0!important;
  transform:translateY(-1px)!important;
}
html[data-theme="dark"] .bottom-nav.me-primary-nav .me-nav-create,
html[data-theme="dark"] .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] > .me-nav-create,
html[data-theme="dark"] .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="desktop"] > .me-nav-create{
  background:#10192a!important;
  border-color:rgba(225,235,244,.08)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.34)!important;
}


/* Me 4.3.7 — franja inferior limpia para que el contenido no se vea debajo de la navegación */
@media (max-width: 1023px) {
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"]::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
    background:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--v4-bg) 0%, transparent) 0%,
        color-mix(in srgb, var(--v4-bg) 72%, transparent) 22%,
        var(--v4-bg) 48%,
        var(--v4-bg) 100%
      ) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  html[data-theme="dark"] .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"]::after {
    background:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--v4-bg) 0%, transparent) 0%,
        color-mix(in srgb, var(--v4-bg) 82%, transparent) 22%,
        var(--v4-bg) 48%,
        var(--v4-bg) 100%
      ) !important;
  }
}


/* Me 4.3.8 — barra inferior pegada abajo en móvil, sin contenido visible detrás */
@media (max-width: 1023px) {
  .bottom-nav.me-primary-nav::before,
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: var(--v4-surface-solid) !important;
    z-index: -1 !important;
  }

  .bottom-nav.me-primary-nav,
  .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] {
    background: var(--v4-surface-solid) !important;
    backdrop-filter: none !important;
  }

  html[data-theme="dark"] .bottom-nav.me-primary-nav,
  html[data-theme="dark"] .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode="mobile"] {
    background: var(--v4-surface-solid) !important;
  }
}


/* Me 4.4.3 · hoja de acciones más respirada */
.me-sheet{
  position:fixed;
  inset:0;
  z-index:1350;
}
.me-sheet-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:transparent;
}
.me-sheet-panel{
  width:min(540px,calc(100vw - 18px))!important;
  margin:0 auto calc(14px + env(safe-area-inset-bottom,0px));
  padding:0 0 calc(12px + env(safe-area-inset-bottom,0px))!important;
  overflow:hidden;
}
.me-sheet-panel header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 8px;
}
.me-sheet-panel header > div span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.me-sheet-options{
  display:grid;
  gap:10px;
  padding:8px 16px 0;
}
.me-sheet-option{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 13px!important;
  min-height:72px!important;
}
.me-sheet-option-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
}
.me-sheet-option-copy{
  min-width:0;
}
.me-sheet-option-copy strong,
.me-sheet-option-copy small{
  display:block;
}
.me-sheet-option-copy strong{
  font-size:1rem;
  line-height:1.15;
}
.me-sheet-option-copy small{
  margin-top:4px;
  color:var(--muted);
  line-height:1.35;
}
.me-sheet-option-chevron{
  opacity:.72;
}
@media (max-width:760px){
  .me-sheet-panel{
    width:calc(100vw - 12px)!important;
    max-height:min(82vh,720px)!important;
    border-radius:28px 28px 18px 18px!important;
  }
  .me-sheet-options{
    gap:9px;
    padding:8px 14px 0;
  }
  .me-sheet-option{
    min-height:76px!important;
    padding:13px 12px!important;
  }
}