/* ============================================================
   ME 5.3.1 — RESPONSIVE FINAL SYSTEM
   Única capa final de geometría. Se carga DESPUÉS de cada módulo.
   Objetivos: misma retícula, cero overflow de página, rail solo en PC,
   controles táctiles consistentes y mejor uso de tablet/escritorio.
   ============================================================ */

:root{
  --me-final-gutter:clamp(10px,1.7vw,28px);
  --me-final-content:1280px;
  --me-final-wide:1440px;
  --me-final-rail:96px;
  --me-final-bottom:calc(92px + env(safe-area-inset-bottom,0px));
}

html,body{max-width:100%;min-width:0;overflow-x:clip;}
body.has-me-shell{box-sizing:border-box;}
body.has-me-shell *{box-sizing:border-box;}
body.has-me-shell :is(main,section,article,header,footer,nav,aside,div,form,fieldset){min-width:0;}
body.has-me-shell :is(img,svg,video,canvas,picture){max-width:100%;}
body.has-me-shell :is(button,.button,input,select,textarea,a){min-width:0;}

/* ---------- Retícula principal ---------- */
body.has-me-shell[data-page] > main,
body.has-me-shell[data-page] > main[class]{
  width:min(var(--me-final-content),calc(100% - (var(--me-final-gutter) * 2)))!important;
  max-width:var(--me-final-content)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Superficies que se benefician de más ancho. */
body.has-me-shell[data-page="app.html"] > main.home-now-page,
body.has-me-shell[data-page="tareas.html"] > main.task-workspace-page,
body.has-me-shell[data-page="yo.html"] > main.me-profile-page,
body.has-me-shell[data-page="ajustes.html"] > main.settings-page,
body.has-me-shell[data-page="habitos.html"] > main.habits-page,
body.has-me-shell[data-page="moto.html"] > main.moto-page,
body.has-me-shell[data-page="diario.html"] > main.diary-page,
body.has-me-shell[data-page="resumen.html"] > main.weekly-page{
  width:min(var(--me-final-content),calc(100% - (var(--me-final-gutter) * 2)))!important;
  max-width:var(--me-final-content)!important;
  margin-inline:auto!important;
}
body.has-me-shell[data-page="agenda.html"] > main.agenda-page,
body.has-me-shell[data-page="dinero.html"] > main.money-page{
  width:min(var(--me-final-wide),calc(100% - (var(--me-final-gutter) * 2)))!important;
  max-width:var(--me-final-wide)!important;
  margin-inline:auto!important;
}
body.has-me-shell[data-page="tarjeta.html"] > main.credit-detail-page{
  width:min(820px,calc(100% - (var(--me-final-gutter) * 2)))!important;
  max-width:820px!important;
  margin-inline:auto!important;
}

body.has-me-shell > .me-appbar{
  width:min(var(--me-final-content),calc(100% - (var(--me-final-gutter) * 2)))!important;
  max-width:var(--me-final-content)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.has-me-shell[data-page="agenda.html"] > .me-appbar,
body.has-me-shell[data-page="dinero.html"] > .me-appbar{
  width:min(var(--me-final-wide),calc(100% - (var(--me-final-gutter) * 2)))!important;
  max-width:var(--me-final-wide)!important;
}

/* Tareas/Agenda: la navegación contextual debe alinearse con el contenido,
   no quedarse como una isla de 720/980 px en PC. */
body.has-me-shell[data-nav-group="tasks"] > .me-context-nav{
  left:auto!important;
  right:auto!important;
  width:min(var(--me-final-content),calc(100% - (var(--me-final-gutter) * 2)))!important;
  max-width:var(--me-final-content)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  transform:none!important;
}
body.has-me-shell[data-page="agenda.html"] > .me-context-nav{
  width:min(var(--me-final-wide),calc(100% - (var(--me-final-gutter) * 2)))!important;
  max-width:var(--me-final-wide)!important;
}

/* ---------- Flex/grids que nunca deben empujar el viewport ---------- */
body.has-me-shell :is(
  .form-grid,.filter-grid,.task-summary,.task-workspace-list,.tasks-v401-context-grid,
  .agenda-summary,.agenda-week-grid,.agenda-snapshot-grid,.agenda-timetable-grid,
  .money-flow-overview,.money-v408-quick-actions,.money-summary,.money-chart-body,
  .money-reference-summary-v237,.accounts-summary-v29,.money-commitment-summary-v29,
  .goals-summary-v29,.me-profile-now,.me-profile-links-grid,.me-profile-history .wellbeing-summary,
  .settings-grid,.settings-columns,.settings-quick-grid,.habits-progress-metrics,
  .moto-summary,.weekly-layout,.diary-layout,.focus-layout
){max-width:100%!important;min-width:0!important;}
body.has-me-shell :is(
  .form-grid,.filter-grid,.task-summary,.task-workspace-list,.tasks-v401-context-grid,
  .agenda-summary,.agenda-week-grid,.money-flow-overview,.money-v408-quick-actions,
  .money-summary,.money-chart-body,.accounts-summary-v29,.money-commitment-summary-v29,
  .goals-summary-v29,.me-profile-now,.me-profile-links-grid,.settings-grid,.settings-columns,
  .settings-quick-grid,.habits-progress-metrics,.moto-summary
) > *{min-width:0!important;}

/* ---------- Perfil: corrige selector histórico mal formado ---------- */
body[data-page="yo.html"] .me-profile-links-grid > :is(a,button){
  min-width:0!important;
  min-height:82px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  padding:13px 14px!important;
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  box-shadow:none!important;
  text-align:left!important;
  text-decoration:none!important;
  font:inherit!important;
  cursor:pointer!important;
}
body[data-page="yo.html"] .me-profile-links-grid > :is(a,button) > span:nth-child(2){min-width:0!important;}
body[data-page="yo.html"] .me-profile-links-grid > :is(a,button) strong,
body[data-page="yo.html"] .me-profile-links-grid > :is(a,button) small{display:block!important;}
body[data-page="yo.html"] .me-profile-links-grid > :is(a,button) strong{font-size:.94rem!important;line-height:1.15!important;}
body[data-page="yo.html"] .me-profile-links-grid > :is(a,button) small{margin-top:5px!important;color:var(--muted)!important;font-size:.74rem!important;line-height:1.3!important;}
body[data-page="yo.html"] .me-profile-history .wellbeing-summary-card :is(span,small){color:var(--muted)!important;}

/* Hábitos/Moto: selector heredado también estaba aplicado al header, no a sus hijos. */
body[data-page="habitos.html"] .dashboard-section-header :is(.page-eyebrow,h2,h3,p),
body[data-page="moto.html"] .dashboard-section-header :is(.page-eyebrow,h2,h3,p){
  width:auto!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}

/* ---------- Inicio ---------- */
body[data-page="app.html"] .home-now-page,
body[data-page="app.html"] .home-now-v30,
body[data-page="app.html"] .home-now-v30 > *{min-width:0!important;max-width:100%!important;}
body[data-page="app.html"] .home-now-v30 > .home-now-hero,
body[data-page="app.html"] .home-now-v30 > .home-day-core,
body[data-page="app.html"] .home-now-v30 > .home-now-quick-grid{width:100%!important;}
body[data-page="app.html"] .today-timeline-content{min-width:0!important;}
body[data-page="app.html"] .today-timeline-content > header{min-width:0!important;}
body[data-page="app.html"] .today-timeline-content > header strong{overflow-wrap:anywhere!important;}

/* ---------- Tareas ---------- */
body[data-page="tareas.html"] .task-day-card,
body[data-page="tareas.html"] .task-state-switch,
body[data-page="tareas.html"] .task-list-toolbar,
body[data-page="tareas.html"] .filter-panel,
body[data-page="tareas.html"] .task-workspace-list{width:100%!important;max-width:100%!important;}
body[data-page="tareas.html"] .task-filter-chips{
  max-width:100%!important;
  overflow-x:auto!important;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
body[data-page="tareas.html"] .task-filter-chips::-webkit-scrollbar{display:none;}

/* ---------- Agenda ---------- */
body[data-page="agenda.html"] :is(.agenda-week-scroll,.agenda-expanded-scroll,.agenda-day-tabs,.agenda-toolbar){
  width:100%!important;max-width:100%!important;
}
body[data-page="agenda.html"] :is(.agenda-week-scroll,.agenda-expanded-scroll){
  overflow-x:auto!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
}
body[data-page="agenda.html"] .agenda-toolbar > *{min-width:0!important;}

/* ---------- Dinero ---------- */
body[data-page="dinero.html"] .money-tabs,
body[data-page="dinero.html"] .money-tab-panel,
body[data-page="dinero.html"] .money-movement-hub-card,
body[data-page="dinero.html"] .money-total-balance-card{width:100%!important;max-width:100%!important;}
body[data-page="dinero.html"] .money-v408-quick-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
body[data-page="dinero.html"] .money-ledger-copy,
body[data-page="dinero.html"] .money-ledger-row > *{min-width:0!important;}
body[data-page="dinero.html"] :is(.money-movement-view-switch,.money-ledger-view-chips,.money-tabs){
  max-width:100%!important;
}

/* ---------- Modales globales ---------- */
body.has-me-shell .modal-backdrop{
  width:100vw!important;max-width:100vw!important;min-height:100dvh!important;
  overflow:auto!important;overscroll-behavior:contain!important;
}
body.has-me-shell .modal-card,
body.has-me-shell .me-sheet-panel,
body.has-me-shell .settings-panel-card{
  max-width:min(820px,calc(100vw - 28px))!important;
  max-height:calc(100dvh - 28px)!important;
  overscroll-behavior:contain!important;
}
body.has-me-shell .modal-actions{max-width:100%!important;flex-wrap:wrap!important;}

/* ============================================================
   MÓVIL · 0–700
   ============================================================ */
@media (max-width:700px){
  :root{--me-final-gutter:8px;--me-final-bottom:calc(86px + env(safe-area-inset-bottom,0px));}
  body.has-me-shell{padding-left:0!important;}
  body.has-me-shell[data-page] > main,
  body.has-me-shell[data-page] > main[class],
  body.has-me-shell[data-page="app.html"] > main.home-now-page,
  body.has-me-shell[data-page="tareas.html"] > main.task-workspace-page,
  body.has-me-shell[data-page="agenda.html"] > main.agenda-page,
  body.has-me-shell[data-page="dinero.html"] > main.money-page,
  body.has-me-shell[data-page="yo.html"] > main.me-profile-page,
  body.has-me-shell[data-page="ajustes.html"] > main.settings-page,
  body.has-me-shell[data-page="habitos.html"] > main.habits-page,
  body.has-me-shell[data-page="moto.html"] > main.moto-page,
  body.has-me-shell[data-page="diario.html"] > main.diary-page,
  body.has-me-shell[data-page="resumen.html"] > main.weekly-page,
  body.has-me-shell[data-page="tarjeta.html"] > main.credit-detail-page{
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin-inline:auto!important;
    padding-bottom:calc(var(--me-final-bottom) + 16px)!important;
  }
  body.has-me-shell > .me-appbar,
  body.has-me-shell[data-nav-group="tasks"] > .me-context-nav{
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin-inline:auto!important;
  }

  /* Cards no necesitan bordes gigantes en móviles pequeños. */
  body.has-me-shell :is(.dashboard-card,.me-now-card,.me-moment-card,.me-insight-card,
    .me-section-header,.me-profile-header,.settings-redesign-group,.money-movement-hub-card,
    .agenda-day-panel,.task-day-card){max-width:100%!important;}

  /* Inputs a 16px para evitar zoom automático de iOS. */
  body.has-me-shell :is(input,select,textarea){font-size:16px!important;}

  /* Botoneras: una o dos columnas según el componente. */
  body.has-me-shell .modal-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  body.has-me-shell .modal-actions > :is(button,.button,a){width:100%!important;min-width:0!important;}

  /* Inicio */
  body[data-page="app.html"] .home-now-v30{gap:11px!important;}
  body[data-page="app.html"] .today-timeline-item{grid-template-columns:64px minmax(0,1fr)!important;}
  body[data-page="app.html"] .today-timeline-time{font-size:.78rem!important;}

  /* Tareas */
  body[data-page="tareas.html"] .task-v460-today{grid-template-columns:minmax(0,1fr) auto!important;}
  body[data-page="tareas.html"] .task-v460-stats{min-width:0!important;flex-wrap:wrap!important;}
  body[data-page="tareas.html"] .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="tareas.html"] .filter-grid > .form-group:first-child{grid-column:1 / -1!important;}
  body[data-page="tareas.html"] .task-workspace-list{grid-template-columns:1fr!important;}

  /* Agenda */
  body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-grid{
    width:max-content!important;min-width:max-content!important;
    grid-template-columns:repeat(7,minmax(160px,72vw))!important;
  }
  body[data-page="agenda.html"] :is(.agenda-snapshot-grid,.agenda-timetable-grid-expanded){
    width:max-content!important;min-width:820px!important;
  }

  /* Dinero */
  body[data-page="dinero.html"] .money-tabs{overflow-x:auto!important;scrollbar-width:none!important;}
  body[data-page="dinero.html"] .money-tabs::-webkit-scrollbar{display:none;}
  body[data-page="dinero.html"] .money-v408-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="dinero.html"] .money-flow-overview{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body[data-page="dinero.html"] .money-reference-search{grid-template-columns:minmax(0,1fr) auto!important;}

  /* Perfil */
  body[data-page="yo.html"] .me-profile-now{grid-template-columns:1fr!important;}
  body[data-page="yo.html"] .me-profile-now > *{grid-column:1!important;grid-row:auto!important;}
  body[data-page="yo.html"] .me-profile-links-grid{grid-template-columns:1fr!important;}
  body[data-page="yo.html"] .me-profile-history .wellbeing-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="yo.html"] .me-now-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  /* Perfil secundario / ajustes */
  body[data-page="habitos.html"] .habits-today-hero{grid-template-columns:1fr!important;}
  body[data-page="habitos.html"] .habits-today-counts{width:100%!important;}
  body[data-page="moto.html"] .moto-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="ajustes.html"] :is(.settings-grid,.settings-columns,.settings-quick-grid){grid-template-columns:1fr!important;}

  /* Sheets/modales ocupan la base del viewport sin salirse. */
  body.has-me-shell .modal-backdrop{padding:max(6px,env(safe-area-inset-top,0px)) 6px 0!important;place-items:end center!important;}
  body.has-me-shell .modal-card,
  body.has-me-shell .me-sheet-panel,
  body.has-me-shell .settings-panel-card{
    width:100%!important;max-width:100%!important;
    max-height:calc(100dvh - max(8px,env(safe-area-inset-top,0px)))!important;
    border-radius:24px 24px 8px 8px!important;
  }
}

/* Móvil muy estrecho */
@media (max-width:360px){
  :root{--me-final-gutter:6px;}
  body.has-me-shell[data-page] > main,
  body.has-me-shell[data-page] > main[class],
  body.has-me-shell > .me-appbar,
  body.has-me-shell[data-nav-group="tasks"] > .me-context-nav{width:calc(100% - 12px)!important;}
  body[data-page="tareas.html"] .filter-grid{grid-template-columns:1fr!important;}
  body[data-page="tareas.html"] .filter-grid > .form-group:first-child{grid-column:auto!important;}
  body[data-page="app.html"] .today-timeline-item{grid-template-columns:56px minmax(0,1fr)!important;gap:8px!important;}
  body[data-page="dinero.html"] .money-flow-overview{grid-template-columns:1fr!important;}
  body[data-page="yo.html"] .me-now-actions{grid-template-columns:1fr!important;}
  body.has-me-shell .modal-actions{grid-template-columns:1fr!important;}
}

/* ============================================================
   TABLET / LAPTOP COMPACTA · 701–1179
   ============================================================ */
@media (min-width:701px) and (max-width:1179px){
  :root{--me-final-gutter:clamp(14px,2.2vw,24px);}
  body.has-me-shell{padding-left:0!important;}
  body.has-me-shell[data-page] > main,
  body.has-me-shell[data-page] > main[class],
  body.has-me-shell[data-page="tareas.html"] > main.task-workspace-page,
  body.has-me-shell[data-page="agenda.html"] > main.agenda-page,
  body.has-me-shell[data-page="dinero.html"] > main.money-page,
  body.has-me-shell[data-page="yo.html"] > main.me-profile-page{
    width:calc(100% - (var(--me-final-gutter) * 2))!important;
    max-width:1120px!important;
    margin-inline:auto!important;
    padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important;
  }
  body.has-me-shell > .me-appbar,
  body.has-me-shell[data-nav-group="tasks"] > .me-context-nav{
    width:calc(100% - (var(--me-final-gutter) * 2))!important;
    max-width:1120px!important;
    margin-inline:auto!important;
  }

  body[data-page="tareas.html"] .task-workspace-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="tareas.html"] .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-grid{
    width:max-content!important;min-width:max-content!important;
    grid-template-columns:repeat(7,minmax(175px,34vw))!important;
  }
  body[data-page="dinero.html"] .money-v408-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="yo.html"] .me-profile-now{grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr)!important;}
  body[data-page="yo.html"] .me-profile-links-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="ajustes.html"] :is(.settings-grid,.settings-columns){grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* 701–899: tablet vertical, una columna en zonas de lectura. */
@media (min-width:701px) and (max-width:899px){
  body[data-page="yo.html"] .me-profile-now{grid-template-columns:1fr!important;}
  body[data-page="yo.html"] .me-profile-now > *{grid-column:1!important;grid-row:auto!important;}
  body[data-page="tareas.html"] .task-workspace-list{grid-template-columns:1fr!important;}
}

/* ============================================================
   ESCRITORIO · ≥1180
   ============================================================ */
@media (min-width:1180px){
  body.has-me-shell{padding-left:var(--me-final-rail)!important;}
  body.has-me-shell[data-page] > main,
  body.has-me-shell[data-page] > main[class]{padding-bottom:54px!important;}

  body[data-page="tareas.html"] .task-workspace-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="agenda.html"] .agenda-week-view[data-week-layout="filas"] .agenda-week-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-grid{
    width:100%!important;min-width:0!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  }
  body[data-page="dinero.html"] .money-v408-quick-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  body[data-page="yo.html"] .me-profile-now{grid-template-columns:minmax(0,1.42fr) minmax(320px,.68fr)!important;}
  body[data-page="yo.html"] .me-profile-links-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  body[data-page="ajustes.html"] :is(.settings-grid,.settings-columns){grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Escritorio ancho: crece de forma controlada, sin dejar un bloque minúsculo en el centro. */
@media (min-width:1440px){
  :root{--me-final-content:1320px;--me-final-wide:1480px;}
}
@media (min-width:1720px){
  :root{--me-final-content:1420px;--me-final-wide:1560px;}
}

/* Pantalla baja / landscape: menos aire vertical, mismo ancho. */
@media (max-height:650px) and (orientation:landscape){
  body.has-me-shell[data-page] > main{padding-top:8px!important;}
  body[data-page="app.html"] .home-now-v30{gap:10px!important;}
  body[data-page="tareas.html"] .task-day-card{margin-bottom:10px!important;}
  body.has-me-shell .modal-card{max-height:calc(100dvh - 10px)!important;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important;}
}

/* ============================================================
   NAVEGACIÓN GLOBAL — misma geometría en todos los módulos.
   Evita que Dinero/Perfil/Plan hereden top+bottom y translateY a la vez.
   ============================================================ */
@media (min-width:1180px){
  body.has-me-shell .bottom-nav.me-primary-nav,
  body.has-me-shell .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;
    right:auto!important;
    bottom:auto!important;
    left:12px!important;
    width:76px!important;
    max-width:76px!important;
    min-width:76px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-auto-flow:row!important;
    grid-auto-rows:58px!important;
    align-items:stretch!important;
    gap:5px!important;
    padding:7px!important;
    margin:0!important;
    overflow:visible!important;
    border-radius:24px!important;
    transform:translateY(-50%)!important;
  }
  body.has-me-shell .bottom-nav.me-primary-nav > :is(a,button),
  body.has-me-shell .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;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:0!important;
    padding:5px 3px!important;
  }
}

@media (min-width:701px) and (max-width:1179px){
  body.has-me-shell .bottom-nav.me-primary-nav,
  body.has-me-shell .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode]{
    position:fixed!important;
    z-index:1200!important;
    top:auto!important;
    left:auto!important;
    right:50%!important;
    bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
    width:min(620px,calc(100% - 24px))!important;
    max-width:620px!important;
    min-width:0!important;
    height:auto!important;
    min-height:70px!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:auto!important;
    align-items:stretch!important;
    gap:4px!important;
    padding:6px!important;
    margin:0!important;
    overflow:visible!important;
    border-radius:23px!important;
    transform:translateX(50%)!important;
  }
  body.has-me-shell .bottom-nav.me-primary-nav > :is(a,button),
  body.has-me-shell .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode] > :is(a,button){
    width:100%!important;min-width:0!important;height:auto!important;min-height:56px!important;max-height:none!important;margin:0!important;
  }
}

@media (max-width:700px){
  body.has-me-shell .bottom-nav.me-primary-nav,
  body.has-me-shell .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode]{
    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;
    min-width:0!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;
    grid-auto-rows:auto!important;
    align-items:stretch!important;
    gap:4px!important;
    padding:8px 8px calc(10px + env(safe-area-inset-bottom,0px))!important;
    margin:0!important;
    overflow:visible!important;
    border-radius:22px 22px 0 0!important;
    transform:none!important;
  }
  body.has-me-shell .bottom-nav.me-primary-nav > :is(a,button),
  body.has-me-shell .bottom-nav.me-primary-nav.me-primary-nav-v21.me-primary-nav-reference[data-nav-mode] > :is(a,button){
    width:100%!important;min-width:0!important;height:auto!important;min-height:54px!important;max-height:none!important;margin:0!important;padding:5px 2px!important;
  }
}

/* ============================================================
   5.3.1 — ÚLTIMA PASADA RESPONSIVE
   Ajustes detectados en la matriz 320/360/390/430/768/1024/1366/1600/1920.
   ============================================================ */
body.has-me-shell :is(
  .task-card h3,.task-card p,.today-timeline-content strong,.today-timeline-content span,
  .agenda-block-title,.agenda-day-item strong,.money-ledger-copy strong,.money-ledger-copy span,
  .me-profile-page h2,.me-profile-page h3,.settings-page h2,.settings-page h3,
  .habit-card strong,.moto-page h2,.moto-page h3
){overflow-wrap:anywhere;word-break:normal;}

body.has-me-shell :is(.page-header,.money-header,.wellbeing-header,.habits-header,.goals-header,.moto-header,.weekly-header,.settings-header,.setup-header){
  max-width:100%!important;min-width:0!important;
}
body.has-me-shell :is(.page-header,.money-header,.wellbeing-header,.habits-header,.goals-header,.moto-header,.weekly-header,.settings-header,.setup-header) > *{
  min-width:0!important;
}

/* Filas de cuentas y formularios densos: que reduzcan columnas antes de desbordar. */
@media (max-width:700px){
  body.has-me-shell :is(.page-header,.money-header,.wellbeing-header,.habits-header,.goals-header,.moto-header,.weekly-header,.settings-header,.setup-header){
    align-items:stretch!important;
    flex-direction:column!important;
    gap:10px!important;
  }
  body.has-me-shell :is(.page-header,.money-header,.wellbeing-header,.habits-header,.goals-header,.moto-header,.weekly-header,.settings-header,.setup-header) :is(.button,button){
    max-width:100%;
  }
  body[data-page="diario.html"] :is(.diary-layout,.me-moment-grid,.me-patterns-grid),
  body[data-page="resumen.html"] :is(.weekly-layout,.weekly-summary-grid,.weekly-comparison-grid,.weekly-sunday-grid),
  body[data-page="enfoque.html"] :is(.focus-layout,.focus-history-grid),
  body[data-page="guia.html"] .guide-grid,
  body[data-page="ajustes.html"] :is(.settings-action-grid,.data-actions-grid,.module-toggle-grid){
    grid-template-columns:1fr!important;
  }
  body[data-page="dinero.html"] .money-account-table-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px 12px!important;
  }
  body[data-page="dinero.html"] .money-account-table-row > button{
    grid-column:1 / -1!important;
    width:100%!important;
  }
  body[data-page="dinero.html"] .budget-category-editor-row{
    grid-template-columns:minmax(0,1fr) minmax(110px,.7fr) 40px!important;
  }
  body.has-me-shell :is(.modal-header,.settings-panel-toolbar){min-width:0!important;}
  body.has-me-shell :is(.modal-header,.settings-panel-toolbar) > :first-child{min-width:0!important;}
}

/* 320–360 px: prioriza legibilidad sin convertir todo en una columna gigante. */
@media (max-width:360px){
  body[data-page="dinero.html"] .money-flow-overview{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body[data-page="dinero.html"] .money-flow-overview > *{padding-inline:8px!important;}
  body.has-me-shell .modal-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="tareas.html"] .filter-panel{padding:12px!important;}
  body[data-page="tareas.html"] .filter-grid{grid-template-columns:1fr!important;}
  body[data-page="tareas.html"] .filter-grid > *{grid-column:auto!important;}
  body[data-page="tareas.html"] .task-filter-chips{padding-right:8px!important;}
  body[data-page="enfoque.html"] :is(.focus-duration-list,.focus-result-options-v25){grid-template-columns:1fr!important;}
}

/* Tablet vertical: cards de lectura a una columna; controles/resúmenes sí pueden compartir fila. */
@media (min-width:701px) and (max-width:899px){
  body[data-page="dinero.html"] .money-account-table-row{grid-template-columns:minmax(0,1fr) auto auto!important;}
  body[data-page="ajustes.html"] .settings-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="habitos.html"] .habits-progress-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-page="moto.html"] .moto-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Ratón/PC: evita cards desmesuradamente altas por reglas pensadas para touch. */
@media (min-width:1180px) and (pointer:fine){
  body.has-me-shell :is(button,.button,a){touch-action:auto;}
  body[data-page="tareas.html"] .filter-panel,
  body[data-page="dinero.html"] .money-movement-hub-card,
  body[data-page="yo.html"] .me-profile-links-grid > :is(a,button){
    --me-desktop-density:1;
  }
}

/* ============================================================
   ME 5.3.2 — INICIO: HERO FOTOGRÁFICO RESPONSIVE
   En tablet/PC el card Ahora deja de ser una franja panorámica.
   Móvil conserva la composición aprobada.
   ============================================================ */
@media (min-width:701px) and (max-width:1179px){
  body[data-page="app.html"] .home-now-main-card.home-now-hero{
    min-height:clamp(260px,34vw,330px)!important;
    grid-template-rows:auto auto!important;
    align-content:space-between!important;
  }
  body[data-page="app.html"] .home-now-main-card.home-now-hero .home-now-main-head{
    align-self:start!important;
  }
  body[data-page="app.html"] .home-now-main-card.home-now-hero .home-now-progress{
    align-self:end!important;
    width:100%!important;
    margin-top:0!important;
  }
}

@media (min-width:1180px){
  body[data-page="app.html"] .home-now-main-card.home-now-hero{
    min-height:clamp(330px,25vw,420px)!important;
    grid-template-rows:auto auto!important;
    align-content:space-between!important;
    padding:clamp(24px,2vw,32px)!important;
  }
  body[data-page="app.html"] .home-now-main-card.home-now-hero .home-now-main-head{
    align-self:start!important;
  }
  body[data-page="app.html"] .home-now-main-card.home-now-hero .home-now-progress{
    align-self:end!important;
    width:100%!important;
    margin-top:0!important;
  }
  body[data-page="app.html"] .home-now-main-card.home-now-hero::before{
    background-size:cover,cover!important;
  }
}