/* ===== Diseño para teléfono / pantallas angostas ===== */
#mbar,#bnav,#mscrim{display:none}
@media(max-width:820px){
  html,body{height:100%;overscroll-behavior:none}
  body{font-size:14px;-webkit-text-size-adjust:100%}
  .app{height:100dvh;display:block}
  input,select,textarea{font-size:16px}
  /* barra superior */
  #mbar{display:flex;align-items:center;gap:8px;position:fixed;top:0;left:0;right:0;z-index:30;height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0;background:var(--side);border-bottom:1px solid var(--border)}
  .mb-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#fff}
  .mb-btn:active{background:var(--panel2)}
  .mb-add{background:var(--accent);color:var(--on-accent)}
  .mb-title{flex:1;text-align:center;font-weight:600;font-size:15.5px}
  /* barra inferior */
  #bnav{display:flex;flex-direction:row;gap:0;position:fixed;bottom:0;left:0;right:0;z-index:30;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--side);border-top:1px solid var(--border)}
  .bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:10px;color:var(--muted);font-size:10.5px;min-width:0}
  .bn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bn.on{color:var(--accent)}
  /* menú lateral deslizable */
  .sidebar,.sidebar.collapsed{position:fixed;z-index:45;top:0;bottom:0;left:0;width:min(300px,86vw);transform:translateX(-102%);transition:transform .22s;padding-top:env(safe-area-inset-top);overflow-y:auto;border-right:1px solid var(--border);box-shadow:none}
  body.menu-open .sidebar{transform:none;box-shadow:12px 0 40px rgba(0,0,0,.5)}
  #mscrim{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s}
  body.menu-open #mscrim{display:block;opacity:1;pointer-events:auto}
  .sidebar.collapsed .brand-text,.sidebar.collapsed .lbl,.sidebar.collapsed .pname,.sidebar.collapsed .saved,.sidebar.collapsed .badge{display:revert}
  .sidebar.collapsed .brand{flex-direction:row;padding-top:20px}
  .sidebar.collapsed .brand-logo{width:50px}
  .sidebar.collapsed .nav-btn,.sidebar.collapsed .add-btn{justify-content:flex-start;padding:11px 12px}
  .collapse{display:none}
  /* contenido */
  .content{height:100dvh;padding-top:calc(52px + env(safe-area-inset-top))}
  .main{padding:14px 12px calc(86px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
  .tabs-bar{padding:8px 10px 0}
  #wm{top:auto;bottom:calc(74px + env(safe-area-inset-bottom));right:10px;font-size:11px}
  .sidebar>*{flex-shrink:0}
  .page-title{flex-direction:column;gap:10px}
  .page-title h2{font-size:21px}
  .page-title .row-gap{flex-wrap:wrap;width:100%}
  .page-title .row-gap .btn{flex:1 1 auto;justify-content:center}
  .tab{max-width:200px}
  .tab .tx{opacity:.7}
  .upd{font-size:12px}
  .hero{flex-direction:column;align-items:flex-start;gap:14px;padding:18px;border-radius:16px}
  .hero h1{font-size:22px}
  .streak{max-width:none;width:100%;text-align:left;justify-content:space-between}
  .perf-bar{justify-content:space-between}
  .card{padding:14px;border-radius:14px}
  .grid,.g2,.g3,.g4,.dash-grid{grid-template-columns:1fr}
  .tiles2{gap:10px}
  .tile{padding:12px 13px}
  .t-v{font-size:21px;margin-top:8px}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .form-grid .span2,.form-grid .span4{grid-column:span 2!important}
  /* tablas: desplazables hacia los lados */
  .tbl{-webkit-overflow-scrolling:touch}
  .tbl table{min-width:640px}
  /* ventanas emergentes a pantalla casi completa */
  .modal-wrap{padding:0;align-items:flex-end;z-index:60}
  .modal{width:100%!important;max-width:100%!important;max-height:94dvh;border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  #acctBox{padding-bottom:4px}
  /* calendario compacto */
  .cal-head{gap:8px}
  .cal-grid{gap:4px}
  .dow{font-size:8.5px;letter-spacing:.04em;padding:7px 0;border-radius:7px}
  .day{min-height:58px;padding:5px 2px;border-radius:9px;gap:1px}
  .day .n{font-size:11.5px}
  .day .p{font-size:9.5px;margin-top:1px;letter-spacing:-.02em}
  .day .t,.day .ico,.day .rbar{display:none}
  .day .ev{display:none}
  .mname{min-width:0;flex:1}
  /* lista de cuentas */
  .acc-row{grid-template-columns:auto minmax(0,1fr) auto;gap:10px 12px;padding:12px 2px}
  .acc-row .acc-prog{grid-column:2 / 3;grid-row:2}
  .acc-row .acc-pnl{grid-column:3;grid-row:1;min-width:0}
  .acc-row .ib{grid-column:3;grid-row:2;justify-self:end}
  .acc-info small{line-height:1.5}
  .modal-top{flex-wrap:wrap;gap:10px}
  /* importar desde captura */
  .shot-top{flex-direction:column;gap:12px}
  .shot-top>img{width:100%;max-height:150px}
  .shot-top .form-grid{width:100%;grid-template-columns:1fr!important}
  .shot-read{flex-direction:column;align-items:stretch}
  .shot-read img{width:100%}
  .modal-foot{flex-wrap:wrap;justify-content:stretch;gap:8px}
  .modal-foot .btn{flex:1 1 auto;justify-content:center}
  /* tamaños más compactos (menos "zoom") */
  body{font-size:13px}
  .main{padding-left:12px;padding-right:12px}
  .page-title h2{font-size:20px}
  .page-title p,.hero-sub{font-size:12px}
  .hero h1{font-size:20px}
  .card-h h3,.card-title-sm{font-size:13px}
  .t-h{font-size:11.5px}
  .t-v{font-size:19px}
  .t-s{font-size:11px}
  .nav-btn{font-size:13px}
  table{font-size:12px}
  .btn{font-size:12.5px}
  .acc-nums b{font-size:15px}
  /* reglas */
  .rule-row{grid-template-columns:28px minmax(0,1fr) auto auto auto;gap:8px}
  .rule-row>:nth-child(1){grid-row:1}
  .rule-row>:nth-child(2){grid-column:2 / -1;grid-row:1}
  .rule-row>:nth-child(3){grid-column:2;grid-row:2;justify-self:start}
  .rule-row>:nth-child(n+4){grid-row:2}
  .rule-add{flex-direction:column}
  .rule-add .btn{width:100%;justify-content:center}
  .acc-bar .marker::after{font-size:8px;letter-spacing:.04em}
}