/* iPhone-first layout: keep the desktop composition untouched above this breakpoint. */
@media (min-width: 721px) and (max-width: 850px) {
  .top { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  .top-right { justify-content:flex-start; }
}
@media (min-width: 721px) and (max-width: 1050px) {
  .app { grid-template-columns:215px minmax(0,1fr); }
  .main { min-width:0; width:100%; max-width:100%; }
}
@media (min-width: 721px) and (max-width: 850px) {
  .budgetrow[style] { display:none; }
  .budgetrow:not([style]) { grid-template-columns:minmax(0,1fr) auto; gap:9px 12px; }
  .budgetrow:not([style]) .budgetbar { grid-column:1/-1; width:100%; }
  .budgetrow:not([style]) .budgetamount { grid-column:1; grid-row:2; text-align:left; }
  .budgetrow:not([style]) .budgetamount::before { content:'Real / plan · '; color:var(--muted); font-size:10px; }
  .budgetrow:not([style]) .budget-status { grid-column:2; grid-row:2; display:block; }
}

@media (max-width: 720px) {
  html, body { width:100%; max-width:100%; overflow-x:clip; }
  .app, .main, #content, .content { min-width:0; max-width:100%; }
  .side {
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    min-height:calc(72px + env(safe-area-inset-bottom));
    padding:6px 5px calc(6px + env(safe-area-inset-bottom));
    z-index:30;
  }
  .nav { width:100%; display:flex; align-items:stretch; justify-content:space-between; gap:2px; }
  .nav button {
    flex:1 1 auto;
    min-width:0;
    min-height:58px;
    padding:7px 1px;
    gap:3px;
    border-radius:11px;
    font-size:9px;
    line-height:1.1;
    text-align:center;
  }
  .nav button span:last-child { max-width:none; white-space:nowrap; overflow-wrap:normal; }
  .nav .ico { width:auto; min-height:19px; font-size:18px; line-height:19px; }
  .main { padding:calc(15px + env(safe-area-inset-top)) 16px calc(112px + env(safe-area-inset-bottom)); }
  .top {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:15px;
    margin-bottom:18px;
    min-width:0;
  }
  .top > div:first-child { min-width:0; }
  .title { max-width:18ch; margin-top:6px; font-size:clamp(31px,8vw,36px); line-height:1.03; overflow-wrap:anywhere; }
  .top-right { display:grid; grid-template-columns:minmax(0,1fr) 54px; width:100%; gap:10px; min-width:0; }
  .month { width:100%; min-width:0; max-width:none; min-height:54px; padding:11px 13px; font-size:14px; }
  .top-right .btn { width:54px; height:54px; min-height:54px; padding:0; display:grid; place-items:center; font-size:20px; }
  .top-right .btn .wide { display:none; }
  .content { min-width:0; }
  .grid { min-width:0; }
  .grid.cols4, .grid.cols3 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .grid.cols2 { grid-template-columns:minmax(0,1fr); gap:12px; }
  .month-dashboard > .grid.cols4 { margin-bottom:12px; }
  .stat { min-width:0; min-height:132px; padding:15px 14px; }
  .stat-label { max-width:24ch; font-size:11px; line-height:1.35; }
  .stat-value { max-width:100%; margin:12px 0 6px; font-size:clamp(21px,6vw,27px); overflow-wrap:anywhere; }
  .stat-sub { font-size:10px; line-height:1.4; }
  .card { min-width:0; padding:16px; border-radius:18px; }
  .section-head { align-items:flex-start; flex-wrap:wrap; margin:22px 0 11px; }
  .section-head h2 { min-width:0; max-width:100%; font-size:20px; line-height:1.18; overflow-wrap:anywhere; }
  .section-head .btn { min-height:42px; }
  .hero.editorial-hero {
    min-height:224px;
    height:auto;
    align-items:flex-start;
    padding:18px 18px 14px;
    margin-bottom:13px;
    border-radius:24px;
  }
  .editorial-hero .hero-copy {
    width:100%;
    max-width:100%;
    padding-right:4px;
    z-index:2;
  }
  .editorial-hero .hero-copy > p { max-width:32ch; font-size:11px; line-height:1.35; }
  .editorial-hero .hero-copy h2 { max-width:22ch; font-size:clamp(26px,7vw,31px); line-height:1.08; }
  .editorial-hero__description { max-width:34ch; margin-top:6px; font-size:12px; line-height:1.42; }
  .editorial-hero > .rightnote { display:none; }
  .editorial-hero:not(.editorial-hero--monthly) { min-height:256px; }
  .editorial-hero--monthly > .character-scene,
  .editorial-hero--register > .character-scene,
  .editorial-hero--budget > .character-scene,
  .editorial-hero--distribution > .character-scene,
  .editorial-hero--reports > .character-scene,
  .editorial-hero--settings > .character-scene,
  .editorial-hero--commitments > .character-scene {
    right:3px;
    bottom:0;
    width:min(64%,285px);
    height:45%;
    background-position:right bottom;
  }
  .month-dashboard .editorial-hero { min-height:224px; }
  .month-dashboard > .grid.cols2 { margin-top:11px !important; }
  .month-feature-cards > .card { min-height:0; }
  .character-empty-state { min-height:190px; }
  .reflection-card { min-height:220px; }
  .movement-filters { gap:6px; }
  .movement-filter { min-height:40px; padding:9px 12px; }
  .row { gap:9px; min-width:0; }
  .rowmain { min-width:0; }
  .rowtitle, .rowmeta { overflow-wrap:anywhere; }
  .amount { flex:none; font-size:12px; }
  .budgetrow[style] { display:none; }
  .budgetrow:not([style]) {
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px 12px;
    align-items:center;
    padding:13px 0;
    font-size:12px;
  }
  .budgetrow:not([style]) .catname { min-width:0; line-height:1.35; }
  .budgetrow:not([style]) .budgetbar { grid-column:1/-1; width:100%; }
  .budgetrow:not([style]) .budgetamount { grid-column:1; grid-row:2; text-align:left; font-size:12px; white-space:normal; }
  .budgetrow:not([style]) .budgetamount::before { content:'Real / plan · '; color:var(--muted); font-size:10px; }
  .budgetrow:not([style]) .budget-status { grid-column:2; grid-row:2; display:block; }
  .budgetrow:not([style]) .badge { white-space:normal; }
  .editorial-hero--budget + .grid.cols3 > .stat:last-child { grid-column:1/-1; }
  .distribution-columns { grid-template-columns:minmax(0,1fr); }
  .distribution-person { align-items:flex-start; flex-direction:column; }
  .distribution-person .rowmain { width:100%; align-items:flex-start; }
  .distribution-person > div:last-child { width:100%; text-align:left !important; padding-left:48px; }
  .distribution-person > div:last-child .amount { font-size:18px; }
  .distribution-share .split { flex-wrap:wrap; gap:14px; }
  .distribution-totals { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .distribution-totals > :first-child { grid-column:1/-1; }
  .commitment-table-wrap { width:100%; }
  .commitment-table tbody { grid-template-columns:minmax(0,1fr); gap:10px; }
  .commitment-table tr { grid-template-columns:minmax(0,1fr); padding:8px 12px; }
  .commitment-table td, .commitment-table td:nth-child(n) { grid-template-columns:minmax(104px,.8fr) minmax(0,1.2fr); gap:9px; padding:9px 2px; }
  .commitment-table td:first-child { grid-column:auto; }
  .commitment-table .commitment-amount { white-space:normal; }
  .chart, .chart--flows { width:100%; max-width:100%; gap:8px; padding-right:0; padding-left:0; }
  .bar-label { font-size:9px; }
  .chart-legend { flex-wrap:wrap; gap:8px 14px; }
  .split { min-width:0; }
  .ring { flex:none; }
  .table-wrap { max-width:100%; }
  .table { min-width:0; }
  .formgrid { grid-template-columns:minmax(0,1fr); }
  .field.span2 { grid-column:auto; }
  .field input, .field select, .field textarea { min-height:46px; font-size:16px; }
  .formactions { flex-wrap:wrap; }
  .formactions .btn { min-height:46px; }
  .modal-backdrop { align-items:flex-end; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .modal { width:100%; max-height:calc(92dvh - env(safe-area-inset-top)); padding:20px 17px; border-radius:22px 22px 16px 16px; }
  .close { width:42px; height:42px; flex:none; }
  .record-action { min-height:34px; padding:7px 8px; }
  .footer { margin-top:24px; font-size:12px; line-height:1.5; }
}
@media (max-width: 380px) {
  .main { padding-right:13px; padding-left:13px; }
  .nav button { font-size:8px; }
  .card { padding:14px; }
  .stat { padding:13px 11px; }
  .stat-label { font-size:10px; }
  .stat-value { font-size:21px; }
  .distribution-totals { gap:8px; }
  .commitment-table td, .commitment-table td:nth-child(n) { grid-template-columns:minmax(92px,.75fr) minmax(0,1.25fr); }
}

/* Overrides de la vista actual */

.movement-filters{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 14px;margin:0 0 2px;border-bottom:1px solid var(--line)}
.movement-filter{border:1px solid #e6e0d3;border-radius:999px;padding:8px 13px;background:#f8f5ed;color:#68705e;font-size:11px;transition:background .16s ease,color .16s ease,border-color .16s ease}
.movement-filter:hover{background:#ecebdd;border-color:#d8d5c5}
.movement-filter[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}
.register-list{min-height:60px}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #9aab7c;outline-offset:3px;border-radius:5px}
.btn.danger{background:#865a49;color:#fff;border:1px solid #865a49}
.btn.danger:hover{background:#704838}
.shared-reference-card{margin-top:15px}
.shared-reference-card .record-actions{margin-top:0}
.commitment-table{width:100%;min-width:0;table-layout:fixed}
.commitment-table th{padding:11px 8px;font-size:9px;line-height:1.3;letter-spacing:.045em;white-space:normal}
.commitment-table td{padding:13px 8px;vertical-align:top;font-size:11px;line-height:1.45;overflow-wrap:anywhere}
.commitment-table th:nth-child(1),.commitment-table td:nth-child(1){width:20%}
.commitment-table th:nth-child(2),.commitment-table td:nth-child(2){width:12%}
.commitment-table th:nth-child(3),.commitment-table td:nth-child(3){width:11%}
.commitment-table th:nth-child(4),.commitment-table td:nth-child(4){width:20%}
.commitment-table th:nth-child(5),.commitment-table td:nth-child(5){width:13%}
.commitment-table th:nth-child(6),.commitment-table td:nth-child(6){width:12%}
.commitment-table th:nth-child(7),.commitment-table td:nth-child(7){width:12%}
.commitment-table .commitment-name{font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.commitment-table .record-actions{margin-top:5px;justify-content:flex-start;gap:3px}
.commitment-table .record-action{padding:3px 4px}
.commitment-kind{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.commitment-amount{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.commitment-progress-copy{display:grid;gap:2px;font-size:10px;line-height:1.35}
.commitment-progress-copy span{color:var(--muted)}
.commitment-progress{height:7px;min-width:0;background:#e9e4d8;border-radius:99px;overflow:hidden;margin:6px 0 3px}
.commitment-table .badge{display:inline-block;white-space:normal;line-height:1.25;text-align:center}
.commitment-table-wrap{overflow:visible}
.commitment-progress i{display:block;height:100%;background:var(--forest2);border-radius:99px}
@media(max-width:1100px){
 .commitment-table,.commitment-table tbody{display:block;width:100%}
 .commitment-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .commitment-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .commitment-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:0 14px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:#fffefa;min-width:0}
 .commitment-table td,.commitment-table td:nth-child(n){display:grid;grid-template-columns:minmax(78px,.7fr) minmax(0,1.3fr);align-items:start;gap:7px;width:auto;padding:9px 2px;border-bottom:1px solid #efebe2;min-width:0}
 .commitment-table td::before{content:attr(data-label);color:var(--muted);font-size:9px;line-height:1.35;letter-spacing:.04em;text-transform:uppercase}
 .commitment-table td:first-child{grid-column:1/-1;display:block;padding:10px 2px}
 .commitment-table td:first-child::before{display:block;margin-bottom:4px}
 .commitment-table td:nth-last-child(-n+2){border-bottom:0}
 .commitment-table td:last-child{width:auto}
 .commitment-table .record-actions{margin-top:4px}
}
@media(max-width:720px){
 .commitment-table tbody{grid-template-columns:minmax(0,1fr);gap:10px}
 .commitment-table tr{grid-template-columns:minmax(0,1fr);padding:7px 12px}
 .commitment-table td,.commitment-table td:nth-child(n){grid-template-columns:minmax(98px,.75fr) minmax(0,1.25fr)}
 .commitment-table td:first-child{grid-column:auto}
}
.chart--flows{height:150px}
.flow-bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;flex:1;width:min(56px,85%);border-bottom:1px solid #e8e2d6}
.flow-bar{display:block;flex:1;min-height:0;border-radius:5px 5px 1px 1px}
.flow-bar--income{background:linear-gradient(#a4aa89,#657653)}
.flow-bar--expense{background:linear-gradient(#d9b392,#b8755d)}
.chart-legend{display:flex;justify-content:center;gap:18px;margin-top:12px;color:var(--muted);font-size:10px}
.chart-legend span{display:flex;align-items:center;gap:6px}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.legend-dot--income{background:var(--forest2)}
.legend-dot--expense{background:var(--rose)}
.report-compare-row{padding:12px 0;border-bottom:1px solid #efebe2}
.report-compare-row:last-child{border-bottom:0}
.report-compare-head{display:flex;justify-content:space-between;gap:12px;font-size:11px}
.report-compare-head span{color:var(--muted);text-align:right}
.report-compare-row .progress i.is-over{background:var(--ochre)}