/* Finanzas para iPhone: la misma app adaptada a pantalla chica */
.web-login{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 25%,#16305e,#0b1220 70%)}
.web-login .box{width:min(360px,100%);text-align:center}
.web-login h2{margin:0 0 6px}
.web-login .inp{font-size:16px;height:48px;text-align:center}
html.web,html.web body{height:100%;overscroll-behavior:none}
html.web body{padding-top:0}
html.web .app{height:100vh;height:100dvh}

@media (max-width:820px){
  :root{--nav:64px}
  html.web body{font-size:15px;-webkit-text-size-adjust:100%}
  /* estructura: contenido arriba, menú abajo */
  .app{display:block;height:100dvh}
  .main{position:fixed;inset:0 0 calc(var(--nav) + env(safe-area-inset-bottom)) 0;overflow:auto;-webkit-overflow-scrolling:touch;padding:calc(env(safe-area-inset-top) + 12px) 14px 90px}
  .side{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav) + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);flex-direction:row;border-right:0;border-top:1px solid var(--line);z-index:40;background:#0a1326}
  .side .brand,.side .spacer,.side .sync{display:none}
  .side .nav{flex-direction:row;gap:0;overflow-x:auto;scrollbar-width:none;flex:1;padding:0 4px;scroll-snap-type:x proximity}
  .side .nav::-webkit-scrollbar{display:none}
  .side .nav button{flex:0 0 auto;min-width:68px;flex-direction:column;gap:3px;padding:8px 6px 6px;font-size:10.5px;font-weight:600;border-radius:12px;justify-content:center;align-items:center;margin:4px 0;scroll-snap-align:start;white-space:nowrap}
  .side .nav button svg{width:22px;height:22px;margin:0}
  .side .nav button.on{background:rgba(59,130,246,.16);box-shadow:none}
  .side .nav button.on::before{display:none}
  /* botón nuevo movimiento flotante y buscador arriba */
  #side-new{position:fixed;right:16px;bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 16px);width:56px;height:56px;border-radius:50%;padding:0;margin:0!important;justify-content:center;font-size:0;gap:0;box-shadow:0 10px 28px rgba(37,99,235,.5);z-index:41}
  #side-new svg{width:26px;height:26px}
  .side-search{order:-1;flex:0 0 auto;margin:4px 2px 4px 6px;width:52px;height:auto;padding:0;justify-content:center;border-radius:12px;border:0;background:transparent}
  .side-search span,.side-search kbd{display:none}
  .side-search svg{width:19px;height:19px}
  /* encabezados */
  .top{gap:10px;margin-bottom:14px}
  .top h1{font-size:24px}
  .top .grow{display:none}
  .top>div:first-child{flex:1 1 100%}
  .top select.inp,.top .inp{height:40px;padding:6px 10px}
  .top>.btn,.top>div>.btn{padding:8px 11px;font-size:13px}
  .months{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;-webkit-overflow-scrolling:touch}
  .months::-webkit-scrollbar{display:none}
  .months button{flex:0 0 auto}
  .toolbar{gap:8px}
  .toolbar .inp,.toolbar select{flex:1 1 140px;min-width:0}
  /* grillas a una o dos columnas */
  .grid{gap:12px}
  .g-12{grid-template-columns:1fr!important}
  .g-12>*{grid-column:1/-1!important}
  .k4,.k3{grid-template-columns:1fr 1fr!important}
  .grid[style*="repeat(6"],.grid[style*="repeat(3"],.grid[style*="repeat(4"]{grid-template-columns:1fr 1fr!important}
  .card{padding:14px;border-radius:14px}
  .kpi .val{font-size:22px}
  .kpi .dl{font-size:12px}
  .mini .val{font-size:18px}
  .chart{height:220px}
  .chart.tall{height:300px}
  .cj-scen{grid-template-columns:1fr 1fr}
  .debts{grid-template-columns:1fr}
  .liq{grid-template-columns:minmax(0,1fr);gap:14px}
  .liq-list{overflow-x:auto;min-width:0}
  .card h3{flex-wrap:wrap;row-gap:8px}
  .card h3 .btn{padding:7px 10px;font-size:13px}
  .form{grid-template-columns:1fr}
  .form .fld{grid-column:1/-1}
  .split{flex-wrap:wrap}
  .big-num{font-size:26px}
  .rec-tot{grid-template-columns:repeat(3,1fr);gap:6px}.rec-tot b{font-size:15px}
  .ci-ks{grid-template-columns:1fr 1fr}.ci-cols{grid-template-columns:1fr}
  /* tablas: se deslizan de costado */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{font-size:13px}
  .tbl th,.tbl td{padding:9px 8px}
  .card>.tbl{display:block;overflow-x:auto}
  /* ventanas: hoja que sube desde abajo */
  .ov{place-items:end center;padding:0}
  .modal{width:100vw!important;max-width:100vw;max-height:calc(100dvh - env(safe-area-inset-top) - 20px);border-radius:20px 20px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));border-bottom:0}
  .modal .actions{flex-wrap:wrap}
  .modal .actions .grow{display:none}
  .modal .actions .btn{flex:1 1 auto;justify-content:center}
  .ov.sr-top{place-items:start center;padding-top:calc(env(safe-area-inset-top) + 8px)}
  .ov.sr-top .modal{border-radius:16px;width:calc(100vw - 16px)!important;max-height:80dvh}
  .tj-modal,.ci,.bk-modal{min-width:0!important}
  /* entradas sin zoom automático de iOS */
  .inp,select,textarea,input{font-size:16px!important}
  .btn{min-height:40px}
  .toasts{left:12px;right:12px;bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 84px);align-items:stretch}
  /* planificador */
  .pw-head{padding:14px}
  .pw-top{flex-wrap:wrap;gap:10px}
  .pw-title{font-size:17px}
  .pw-top .grow{display:none}
  .pw-days{gap:4px}
  .pw-day{padding:6px 0!important}
  .pw-cards{grid-template-columns:1fr!important}
  .pw-sa,.pw-x{opacity:.6!important}
  .pl-grid{min-width:640px}
  .card:has(>.pl-grid){overflow-x:auto}
  /* chat del asistente */
  .chat-card{height:calc(100dvh - var(--nav) - env(safe-area-inset-bottom) - 170px);min-height:380px}
  .msg{max-width:92%}
  .cj-msg{max-width:92%}
  /* sacar lo que es solo de la PC */
  .chat-ctl .kbd,.small.muted.kb-hint{display:none}
}
/* en la versión web no hay barra de título de Windows */
html.web #tb{display:none}
html.web .ov{top:0}
html.web .loading{top:0}
html.web .setup,html.web .lock{min-height:100dvh}
@media (max-width:820px){
  .top>*{flex:0 0 auto}
  .top>.months{order:5;flex:1 1 100%}
  .liq-tot b{font-size:18px}
}
@media (max-width:820px){
  .k2{grid-template-columns:1fr!important}
  .grid.k2>*{grid-column:1/-1!important}
  .li{flex-wrap:wrap;row-gap:8px}
  .li>.tx{flex:1 1 55%;min-width:0}
  .side .nav button{min-width:62px}
}
@media (max-width:820px){
  .modal .seg{grid-template-columns:repeat(3,1fr)!important;gap:6px}
  .modal .seg button{padding:8px 4px;font-size:12px}
}