/* Me 5.6.33 — Responsive consolidation
   Reference viewports: 360x800, 390/393x844/852, 768x1024, 1024x768, 1440x900, mobile landscape. */

:root{
  --me-safe-x: clamp(10px, 3.4vw, 22px);
  --me-page-max: 1180px;
  --me-modal-gap: clamp(8px, 2.5vw, 20px);
  --me-bottom-safe: calc(108px + env(safe-area-inset-bottom, 0px));
}

html{
  overflow-x:hidden;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
body{
  max-width:100vw;
  overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%;}
input,select,textarea,button{max-width:100%;}

/* Stable page gutters across modules. */
:is(.app-page,.money-page,.profile-page,.moto-page,.settings-page,.habits-page,.focus-page,.accounts-page){
  max-width:var(--me-page-max);
}

/* Navigation never collides with content or the iPhone home indicator. */
.bottom-nav.me-primary-nav{
  bottom:max(10px, env(safe-area-inset-bottom, 0px))!important;
  width:min(560px,calc(100vw - (var(--me-safe-x) * 2)))!important;
}
body.has-me-shell[data-page] > main[class],
body > main.app-page,
body > main.money-page,
body > main.profile-page,
body > main.moto-page{
  padding-bottom:max(var(--me-bottom-safe), calc(98px + env(safe-area-inset-bottom,0px)))!important;
}

/* All modal shells use dynamic viewport height rather than fixed vh. */
.modal-backdrop{
  padding:var(--me-modal-gap)!important;
  min-height:100dvh;
  overscroll-behavior:contain;
}
.modal-card{
  width:min(720px,100%)!important;
  max-width:100%!important;
  max-height:calc(100dvh - (var(--me-modal-gap) * 2))!important;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.modal-header{
  flex:0 0 auto;
}
.modal-actions{
  flex:0 0 auto;
}

/* Task editor: fixed chrome, only form body scrolls when the viewport is short. */
#modalTarea{
  align-items:center!important;
  justify-items:center!important;
}
#modalTarea > .modal-card{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:0!important;
}
#modalTarea > .modal-card > .modal-header{
  margin:0!important;
  padding:clamp(16px,2.5vw,24px) clamp(16px,3vw,26px) 12px!important;
}
#modalTarea #formTarea{
  display:flex!important;
  min-height:0!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  overflow:auto!important;
  padding:0 clamp(16px,3vw,26px) clamp(14px,2.5vw,24px)!important;
  overscroll-behavior:contain;
}
#modalTarea #formTarea > .modal-actions{
  position:sticky!important;
  z-index:3!important;
  bottom:calc(-1 * clamp(14px,2.5vw,24px))!important;
  margin:16px calc(-1 * clamp(16px,3vw,26px)) calc(-1 * clamp(14px,2.5vw,24px))!important;
  padding:12px clamp(16px,3vw,26px) calc(12px + env(safe-area-inset-bottom,0px))!important;
  border-top:1px solid var(--border)!important;
  background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
  backdrop-filter:blur(14px);
}
#modalTarea .task-quick-grid,
#modalTarea .task-option-grid{
  min-width:0;
}
#modalTarea .task-field-card,
#modalTarea .form-group{min-width:0;}

/* Agenda: rows stay fluid. Column layout becomes predictable by device class. */
body[data-page="agenda.html"] .agenda-week-scroll{
  max-width:100%;
}
body[data-page="agenda.html"] .agenda-week-view[data-week-layout="filas"] .agenda-week-scroll{
  overflow-x:hidden!important;
}
body[data-page="agenda.html"] .agenda-week-view[data-week-layout="filas"] .agenda-week-grid{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:1fr!important;
}
body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-scroll{
  overflow-x:auto!important;
  overflow-y:visible!important;
  scroll-snap-type:x mandatory!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-scroll::-webkit-scrollbar{display:none!important;}
body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-grid{
  display:grid!important;
  width:max-content!important;
  min-width:100%!important;
  grid-auto-flow:column!important;
  grid-template-columns:none!important;
  grid-auto-columns:clamp(230px,31vw,290px)!important;
  gap:10px!important;
}
body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-day{
  min-width:0!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:normal;
}
body[data-page="agenda.html"] .agenda-snapshot-frame,
body[data-page="agenda.html"] .agenda-rhythm-frame{
  max-width:100%;
  overflow:hidden;
}
body[data-page="agenda.html"] .agenda-expanded-card{
  width:min(980px,100%)!important;
  max-height:calc(100dvh - (var(--me-modal-gap) * 2))!important;
}
body[data-page="agenda.html"] .agenda-modal-card{
  max-height:calc(100dvh - (var(--me-modal-gap) * 2))!important;
}
body[data-page="agenda.html"] .agenda-modal-card #formAgenda{
  max-height:none!important;
}

/* Money: protect dense tabs, summaries and cards from overflow. */
body[data-page="dinero.html"] .money-tabs,
body[data-page="dinero.html"] .money-subtabs,
body[data-page="dinero.html"] .money-movement-mode{
  max-width:100%;
}
body[data-page="dinero.html"] :is(.money-flow-overview,.money-calendar-summary,.money-v408-quick-actions){
  min-width:0;
}
body[data-page="dinero.html"] .money-ledger-row,
body[data-page="dinero.html"] .account-manage-row-v29,
body[data-page="dinero.html"] .account-credit-main{
  min-width:0!important;
}
body[data-page="dinero.html"] :is(.money-ledger-copy,.account-manage-copy,.account-manage-value){
  min-width:0!important;
}
body[data-page="dinero.html"] :is(.money-ledger-copy strong,.money-ledger-copy small,.account-manage-copy strong,.account-manage-copy small){
  overflow-wrap:anywhere;
}

/* Home: avoid artificial empty vertical space on short/small phones. */
@media (max-width:600px), (max-height:700px){
  .home-now-page :is(.today-timeline,.home-timeline,.today-timeline-list,.home-day-core){
    min-height:0!important;
  }
}

/* Medium tablets: use space without stretching cards excessively. */
@media (min-width:700px) and (max-width:1024px){
  :root{--me-safe-x:22px;}
  .app-page,.money-page,.profile-page,.moto-page,.settings-page,.habits-page,.focus-page{
    width:min(calc(100% - 44px),var(--me-page-max))!important;
  }
  body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-grid{
    grid-auto-columns:clamp(245px,36vw,320px)!important;
  }
  #modalTarea > .modal-card{width:min(760px,calc(100vw - 40px))!important;}
}

/* Desktop: full week fits without horizontal scrolling. */
@media (min-width:1180px){
  body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-scroll{
    overflow-x:hidden!important;
  }
  body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-grid{
    width:100%!important;
    grid-auto-flow:row!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-auto-columns:auto!important;
  }
}

/* Phones. */
@media (max-width:600px){
  :root{
    --me-safe-x:10px;
    --me-modal-gap:8px;
  }
  :is(.app-page,.money-page,.profile-page,.moto-page,.settings-page,.habits-page,.focus-page,.accounts-page){
    width:calc(100% - (var(--me-safe-x) * 2))!important;
    margin-inline:auto!important;
  }
  .page-header,
  .money-header{
    gap:10px!important;
  }
  .page-header h1,
  .money-header h1{
    overflow-wrap:anywhere;
  }
  .dashboard-card{
    max-width:100%;
  }
  .modal-backdrop{
    place-items:end center!important;
    padding-top:max(8px,env(safe-area-inset-top,0px))!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  }
  .modal-card{
    width:100%!important;
    max-height:calc(100dvh - max(16px, env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px)))!important;
    border-radius:22px 22px 14px 14px!important;
  }
  #modalTarea > .modal-card{
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px)))!important;
  }
  #modalTarea .task-quick-grid,
  #modalTarea .task-option-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-grid{
    grid-auto-columns:min(82vw,300px)!important;
    gap:9px!important;
  }
  body[data-page="agenda.html"] .agenda-toolbar,
  body[data-page="agenda.html"] .agenda-week-layout-bar{
    min-width:0!important;
  }
  body[data-page="dinero.html"] .money-tabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body[data-page="dinero.html"] .money-tabs button{
    min-width:0!important;
    padding-inline:8px!important;
  }
  body[data-page="dinero.html"] .money-tabs button span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* 360 px class: preserve tap targets while removing decorative space. */
@media (max-width:370px){
  :root{--me-safe-x:8px;}
  .bottom-nav.me-primary-nav{
    width:calc(100vw - 12px)!important;
    padding-inline:5px!important;
  }
  .bottom-nav.me-primary-nav a{
    min-width:0!important;
    font-size:10.5px!important;
  }
  .bottom-nav.me-primary-nav a span{font-size:17px!important;}
  .dashboard-card{padding:14px!important;}
  #modalTarea .task-quick-grid,
  #modalTarea .task-option-grid{
    grid-template-columns:1fr!important;
  }
  #modalTarea > .modal-card > .modal-header{
    padding:14px 14px 10px!important;
  }
  #modalTarea #formTarea{
    padding-inline:14px!important;
  }
  #modalTarea #formTarea > .modal-actions{
    margin-inline:-14px!important;
    padding-inline:14px!important;
  }
  body[data-page="agenda.html"] .agenda-week-view[data-week-layout="columnas"] .agenda-week-grid{
    grid-auto-columns:calc(100vw - 42px)!important;
  }
  body[data-page="dinero.html"] .money-tabs button{
    font-size:.78rem!important;
    padding-inline:5px!important;
  }
}

/* Short screens and landscape phones: content wins over chrome. */
@media (max-height:620px){
  .modal-backdrop{
    place-items:center!important;
    padding:6px!important;
  }
  .modal-card,
  #modalTarea > .modal-card,
  body[data-page="agenda.html"] .agenda-expanded-card,
  body[data-page="agenda.html"] .agenda-modal-card{
    max-height:calc(100dvh - 12px)!important;
    border-radius:16px!important;
  }
  #modalTarea > .modal-card > .modal-header{
    padding-block:10px 8px!important;
  }
  #modalTarea .task-editor-section-heading{
    margin-bottom:10px!important;
  }
  #modalTarea .task-more-options{
    margin-top:10px!important;
  }
}

@media (orientation:landscape) and (max-height:500px){
  :root{--me-modal-gap:6px;}
  .bottom-nav.me-primary-nav{
    bottom:4px!important;
    transform:translateX(50%) scale(.94)!important;
    transform-origin:bottom center;
  }
  body.has-me-shell[data-page] > main[class],
  body > main.app-page,
  body > main.money-page,
  body > main.profile-page,
  body > main.moto-page{
    padding-bottom:88px!important;
  }
  #modalTarea > .modal-card{
    width:min(760px,calc(100vw - 12px))!important;
  }
  #modalTarea .task-quick-grid,
  #modalTarea .task-option-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Very wide displays: keep readable line lengths. */
@media (min-width:1440px){
  :is(.app-page,.money-page,.profile-page,.moto-page,.settings-page,.habits-page,.focus-page){
    width:min(calc(100% - 64px),1180px)!important;
  }
}

/* 5.6.36 — Inicio: separar el marcador de la línea temporal de las horas.
   El punto vive en el canal entre la hora y la tarjeta; nunca encima del texto. */
@media (max-width:600px){
  .home-now-v30 > .home-day-core .today-timeline-item{
    grid-template-columns:58px minmax(0,1fr)!important;
    column-gap:24px!important;
  }
  .home-now-v30 > .home-day-core .today-timeline::before{
    left:70px!important;
  }
  .home-now-v30 > .home-day-core .today-timeline-item::before{
    left:64px!important;
  }
  .home-now-v30 > .home-day-core .today-timeline-time{
    padding-right:0!important;
    text-align:right!important;
    position:relative!important;
    z-index:2!important;
  }
}

@media (max-width:380px){
  .home-now-v30 > .home-day-core .today-timeline-item{
    grid-template-columns:54px minmax(0,1fr)!important;
    column-gap:22px!important;
  }
  .home-now-v30 > .home-day-core .today-timeline::before{
    left:65px!important;
  }
  .home-now-v30 > .home-day-core .today-timeline-item::before{
    left:59px!important;
  }
}