/* Touch navigation: keep the desktop dashboard and calculations intact. */
.mobile-context, .mobile-nav, #section-menu, #mobile-month { display: none; }
.nav-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.nav-icon { width: 22px; height: 22px; flex: none; }
.table-scroll { min-width: 0; }
.scroll-hint { display: none; }
.diario-registro-mobile-summary { display: none; }
body.wadi-nav-ready :focus-visible { outline: 3px solid #2451c4; outline-offset: 3px; }

@media (max-width: 1180px), (hover: none) and (pointer: coarse) and (max-width: 1440px) {
  html { scroll-padding-top: calc(var(--wadi-nav-height, 56px) + var(--wadi-filter-height, 0px) + 64px); }
  #dashboard-header { padding: 16px 20px; gap: 16px; }
  #dashboard-header > div { min-width: 0; }
  #dashboard-header h1 { font-size: 20px; gap: 10px; }
  #dashboard-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0 12px; gap: 0; overflow: visible; white-space: normal; top: 0; }
  #dashboard-tabs .tab-btn { min-height: 56px; padding: 12px 6px; font-size: 14px; line-height: 1.3; }
  #filter-bar { top: var(--wadi-nav-height, 56px); padding: 10px 16px; gap: 12px; overflow: visible; flex-wrap: wrap; background: #fff; backdrop-filter: none; }
  #filter-bar .filter-label { font-size: 12px; }
  #filter-bar .filter-select, #mobile-month { min-height: 44px; font-size: 16px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: white; color: var(--navy); font-family: inherit; }
  #filter-bar .filter-group { min-width: 0; }
  #filter-bar .month-slicer { flex-wrap: wrap; max-width: none; overflow: visible; }
  #filter-bar .month-slicer button { min-width: 44px; min-height: 44px; font-size: 14px; }
  #filter-bar[data-empty="true"] { display: none; }
  #dashboard-main { padding: 18px 16px 48px; min-width: 0; }
  #dashboard-main .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #dashboard-main .card { min-width: 0; max-width: 100%; }
  #dashboard-main .card.wide, #dashboard-main .card.full { grid-column: 1 / -1; }
  #dashboard-main .card h4 { font-size: 14px; line-height: 1.4; }
  #dashboard-main .table-scroll, #dashboard-main .diario-registro-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  #dashboard-main .table-scroll:focus-visible { outline-offset: -3px; }
  #dashboard-main table.data { font-size: 14px; }
  #dashboard-main table.data th, #dashboard-main table.data td { padding: 10px 9px; }
  #dashboard-main td.click { min-height: 44px; }
  #sec-finanzas .subtabs { position: static; background: #f5f2ec; padding: 8px 0; gap: 6px; overflow: visible; white-space: normal; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #sec-finanzas .subtab-btn { min-height: 48px; padding: 9px 8px; font-size: 14px; border: 1px solid #d6dbe2; border-radius: 8px; background: white; }
  #sec-finanzas .subtab-btn.active { background: var(--navy); color: white; border-color: var(--navy); }
  #dashboard-main .diario-controls input, #dashboard-main .diario-controls button, #dashboard-main .diario-sort-btn { min-height: 44px; font-size: 16px; }
  #modal .modal-close { min-width: 44px; min-height: 44px; }
  #modal .modal-head { position: sticky; top: 0; z-index: 2; }
  #modal .modal-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 767px) {
  #dashboard-header { padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 12px; }
  #dashboard-header h1 { font-size: 18px; line-height: 1.3; }
  #dashboard-header .brand-logo { width: 40px; height: 40px; }
  #dashboard-header .subtitle { font-size: 12px; }
  body.wadi-nav-ready #dashboard-tabs { display: none; }
  .mobile-context { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 120; min-height: 40px; padding: 9px 16px; background: white; border-bottom: 1px solid #dce1e8; }
  .mobile-context strong { color: var(--navy); font-size: 16px; }
  #filter-bar { top: var(--wadi-nav-height, 61px); padding: 8px 12px; gap: 8px; }
  #filter-bar .filter-group { flex: 1 1 120px; gap: 7px; }
  #filter-bar .filter-select, #mobile-month { flex: 1; min-width: 0; width: 100%; }
  #filter-bar #filter-months { display: none; }
  #mobile-month { display: block; }
  #filter-bar .filter-status { width: 100%; font-size: 12px; }
  #dashboard-main { padding: 14px 12px calc(96px + env(safe-area-inset-bottom)); }
  #dashboard-main .cards, #dashboard-main .inv-grid { grid-template-columns: minmax(0, 1fr); }
  #dashboard-main .card, #dashboard-main .card.wide, #dashboard-main .card.full { grid-column: 1; padding: 14px 12px; }
  #dashboard-main .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #dashboard-main .kpi .label { font-size: 12px; }
  #dashboard-main h2.sec { font-size: 17px; flex-wrap: wrap; }
  #dashboard-main .diario-controls { width: 100%; display: flex; gap: 8px; }
  #dashboard-main .diario-controls input { flex: 1; min-width: 140px; }
  #dashboard-main .diario-controls label { font-size: 12px; }
  #dashboard-main .diario-controls .diario-selected-dow { font-size: 12px; }
  #sec-finanzas .subtab-btn { font-size: 13px; padding: 8px 4px; }
  .mobile-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; padding: 5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: #fff; border-top: 1px solid #dce1e8; box-shadow: 0 -4px 20px #12244412; }
  .mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 57px; border: 0; border-radius: 10px; background: transparent; color: #5b6474; font: inherit; font-size: 12px; font-weight: 600; }
  .mobile-nav button[aria-current="page"] { background: #edf2fc; color: #173c9b; }
  #section-menu[open] { display: block; position: fixed; inset: auto 0 0; width: 100%; max-width: 100%; margin: 0; max-height: 85dvh; overflow-y: auto; padding: 20px 16px max(24px, env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; color: var(--navy); background: #f6f8fc; box-shadow: 0 -12px 48px #08172d33; overscroll-behavior: contain; }
  #section-menu::backdrop { background: #08172d88; }
  .section-menu-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
  .section-menu-head h2 { font-size: 20px; }
  .section-menu-head button { width: 44px; height: 44px; border: 1px solid #dce1e8; border-radius: 50%; background: white; font-size: 24px; color: var(--navy); }
  .section-menu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .section-menu-grid button { min-height: 88px; padding: 14px; border: 1px solid #dce1e8; border-radius: 12px; text-align: left; background: white; color: var(--navy); font: inherit; }
  .section-menu-grid button[aria-current="page"] { border: 2px solid #2451c4; background: #edf2fc; }
  .section-menu-grid button strong { display: block; font-size: 16px; margin-bottom: 5px; }
  .section-menu-grid button span { font-size: 13px; color: #5b6474; }
  #section-menu button[hidden] { display: none; }
  #modal { padding: 8px; align-items: flex-end; }
  #modal .modal { width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 16px; }
  #modal .modal-body { padding: 16px; }
}
/* Single scrolling page; charts and wide tables alone pan horizontally. */
@media (max-width: 1180px), (hover: none) and (pointer: coarse) and (max-width: 1440px) {
  #dashboard-main .section, #dashboard-main .subtab, #dashboard-main .cards,
  #dashboard-main .card, #dashboard-main .today-hour-layout, #dashboard-main .today-hour-chart { min-width: 0; }
  #dashboard-main .touch-scroll { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  #dashboard-main .scroll-hint:not([hidden]) { display: block; margin: 0 0 7px; color: #64748b; font-size: 11px; line-height: 1.4; }
  #dashboard-main .chart-scroll { padding: 8px 0; }
  #dashboard-main .chart-scroll svg.chart {
    display: block; width: 100% !important; min-width: var(--chart-width) !important;
    max-width: none !important; height: auto !important; aspect-ratio: var(--chart-ratio);
  }
  #dashboard-main .table-scroll, #dashboard-main .pnl-wrap, #dashboard-main .matrix-wrap,
  #dashboard-main .diario-registro-table-wrap { max-height: none; }
  #dashboard-main .card > div[style*="max-height: 600px"],
  #dashboard-main .card > div[style*="max-height:600px"],
  #dashboard-main .card > div[style*="max-height: 650px"] { max-height: none !important; overflow: visible !important; }
  #dashboard-main table.data, #dashboard-main table.ceo-table, #dashboard-main table.matrix, #dashboard-main table.pnl {
    width: 100%; min-width: 0; max-width: none; table-layout: auto; font-size: 13px; font-variant-numeric: tabular-nums;
  }
  #dashboard-main table.data th, #dashboard-main table.data td,
  #dashboard-main table.matrix th, #dashboard-main table.matrix td,
  #dashboard-main table.pnl th, #dashboard-main table.pnl td {
    padding: 10px 12px; white-space: nowrap; text-overflow: clip; line-height: 1.4;
  }
  #dashboard-main table.data th { font-size: 11px; }
  #dashboard-main table.data :is(th,td):first-child,
  #dashboard-main table.matrix :is(th,td):first-child,
  #dashboard-main table.pnl :is(th,td):first-child {
    min-width: 136px; max-width: 190px; white-space: normal; overflow-wrap: break-word;
  }
  #dashboard-main table.ranked-table :is(th,td):first-child { min-width: 44px; width: 44px; padding: 8px 6px; }
  #dashboard-main table.ranked-table :is(th,td):nth-child(2) { min-width: 150px; max-width: 230px; white-space: normal; }
  #dashboard-main .pnl :is(th,td):first-child { width: 160px; min-width: 160px; max-width: 160px; }
  #dashboard-main .pnl :is(th,td):not(:first-child) { min-width: 106px; }
  #dashboard-main .matrix :is(th,td):not(:first-child) { min-width: 96px; }
  #dashboard-main .kpi { min-width: 0; }
  #dashboard-main .kpi .value { font-size: clamp(18px, 3vw, 24px); overflow-wrap: anywhere; }
  #dashboard-main .card h4 { flex-wrap: wrap; gap: 6px; }
  #dashboard-main table.daily-performance-table { min-width: 410px !important; table-layout: auto !important; font-size: 12px !important; }
  #dashboard-main table.daily-performance-table :is(th,td) { padding: 10px 8px !important; white-space: nowrap !important; width: auto !important; }
  #dashboard-main table.daily-performance-table :is(th,td):first-child { min-width: 44px; }
  #dashboard-main table.daily-performance-table :is(th,td):nth-child(3) { min-width: 112px; }
  #dashboard-main .today-hour-cats { flex-direction: row; flex-wrap: nowrap; max-height: none; overflow-x: auto; padding: 6px; }
  #dashboard-main .today-hour-cats button { flex-shrink: 0; min-height: 40px; }
  #dashboard-main .today-hour-layout, #dashboard-main .today-hour-filter-layout { flex-direction: column; }
  #dashboard-main .today-hour-cats { flex-basis: auto; }
  #dashboard-main .diario-registro-layout { flex-direction: column; }
  #dashboard-main .inv-card.critical { animation: none; }
}
@media (max-width: 767px) {
  #dashboard-main .card h4 { font-size: 13px; }
  #dashboard-main .legend { justify-content: flex-start; gap: 8px 12px; }
  #dashboard-main .diario-controls { flex-wrap: wrap; }
  #dashboard-main .diario-controls input { flex: 1 1 160px; }
  #dashboard-main .today-hour-cats { width: 100%; flex-basis: auto; }
  #dashboard-main table.data[data-columns="2"] :is(th,td):first-child { max-width: 180px; }
  #modal .modal-body table { min-width: 0; font-size: 13px; }
  #modal .modal-body { overflow: auto; }
}
/* Only phones collapse the long transaction list; desktop/tablet keep their table. */
@media (max-width: 767px) {
  #dashboard-main .diario-registro-mobile-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #faf7f2; }
  #dashboard-main .diario-ticket-side { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .diario-registro-summary-values { display: flex; flex: 1 1 120px; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); }
  #diario-registro-total { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--navy); }
  #diario-registro-toggle { min-height: 44px; padding: 10px 12px; border: 1px solid var(--navy); border-radius: 7px; color: var(--navy); background: white; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  #diario-registro-toggle span { margin-left: 5px; }
  #diario-registro-toggle:disabled { display: none; }
  #dashboard-main .diario-registro-card[data-registro-expanded="false"] .diario-registro-table-wrap,
  #dashboard-main .diario-registro-card[data-registro-expanded="false"] .diario-sort-btn,
  #dashboard-main .diario-registro-card[data-registro-expanded="false"] .diario-registro-layout > .scroll-hint { display: none; }
  #dashboard-main .diario-registro-table-wrap { max-height: min(52vh, 420px); max-height: min(52svh, 420px); flex: 0 1 auto; overflow: auto; border: 1px solid var(--border); border-radius: 7px; }
  #dashboard-main #diario-registro-dia { table-layout: fixed; min-width: 0; }
  #dashboard-main #diario-registro-dia :is(th,td) { padding: 8px 5px; font-size: 12px; min-width: 0; max-width: none; }
  #dashboard-main #diario-registro-dia :is(th,td):first-child { width: 68px; font-size: 11px; white-space: nowrap; }
  #dashboard-main #diario-registro-dia :is(th,td):nth-child(2) { width: 45px; font-size: 11px; }
  #dashboard-main #diario-registro-dia :is(th,td):nth-child(3) { width: auto; white-space: normal; overflow-wrap: anywhere; }
  #dashboard-main #diario-registro-dia :is(th,td):nth-child(4) { width: 82px; }
  #dashboard-main #diario-registro-dia thead th { position: sticky; top: 0; z-index: 1; background: var(--navy); color: white; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* P&L period switch uses the same table, totals and expense detail. */
.pnl-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--gold)}
.pnl-heading h2.sec{margin:0!important;padding:0;border:0;flex-wrap:wrap;gap:6px 10px}
.pnl-period-toggle{display:inline-flex;flex-shrink:0;gap:3px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--bg,#f5f5f2)}
.pnl-period-toggle button{min-height:38px;padding:8px 16px;border:0;border-radius:7px;background:transparent;color:var(--text-muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer;touch-action:manipulation}
.pnl-period-toggle button[aria-pressed="true"]{background:var(--navy);color:white;box-shadow:0 1px 3px #0002}
.pnl-period-toggle button:focus-visible{outline:2px solid var(--coffee);outline-offset:2px}
#dashboard-main #pnl-table.pnl-quarterly{min-width:calc(210px + var(--pnl-period-count,5) * 96px);table-layout:fixed}
@media(max-width:767px){.pnl-period-toggle button{min-height:44px}.pnl-heading{gap:8px}}