:root {
      --ly-primary: #ffffff;
      --ly-primary-text: #1a1f36;
      --ly-accent: #635bff;
      --ly-accent-light: #7a73ff;
      --ly-accent-dark: #4c45cc;
      --ly-accent-bg: #f5f4ff;
      --ly-gold: #c47f17;
      --ly-green: #047857;
      --ly-green-bg: #e6f7ee;
      --ly-red: #df1b41;
      --ly-red-bg: #fcebee;
      --ly-orange: #c45c0d;
      --ly-orange-bg: #fff3e6;
      --ly-blue: #0570de;
      --ly-blue-bg: #ebf3fe;
      --ly-purple: #635bff;
      --ly-bg: #f6f9fc;
      --ly-white: #ffffff;
      --ly-dark: #1a1f36;
      --ly-text-soft: #425466;
      --ly-gray: #697386;
      --ly-gray-soft: #8792a2;
      --ly-gray-light: #e3e8ee;
      --ly-gray-bg: #f6f9fc;
      --ly-border: #e3e8ee;
      --radius: 8px;
      --radius-sm: 6px;
      --shadow: 0 1px 3px rgba(50,50,93,.06), 0 1px 2px rgba(0,0,0,.04);
      --shadow-md: 0 4px 12px rgba(50,50,93,.08), 0 2px 4px rgba(0,0,0,.04);
      --shadow-focus: 0 0 0 3px rgba(99,91,255,.12);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: var(--ly-bg); color: var(--ly-dark); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

    /* topbar */
    .topbar { background: var(--ly-white); color: var(--ly-dark); padding: 14px 28px; display: flex; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--ly-border); box-shadow: 0 1px 0 rgba(50,50,93,.03); }
    .topbar .logo { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; color: var(--ly-dark); }
    .topbar .logo span { color: var(--ly-accent); }
    .topbar nav { display: flex; gap: 2px; margin-left: 20px; }
    .topbar nav a { color: var(--ly-text-soft); text-decoration: none; padding: 7px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; transition: background .12s, color .12s; }
    .topbar nav a:hover { color: var(--ly-dark); background: var(--ly-gray-bg); }
    .topbar nav a.active { color: var(--ly-accent); background: var(--ly-accent-bg); }
    .topbar .biz-select { margin-left: auto; display: flex; align-items: center; gap: 6px; }
    .topbar select { padding: 6px 28px 6px 11px; border-radius: var(--radius-sm); border: 1px solid var(--ly-border); background: var(--ly-white); color: var(--ly-dark); font-size: 13px; font-weight: 500; appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23697386' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color .12s, box-shadow .12s; cursor: pointer; }
    .topbar select:hover { border-color: var(--ly-gray-soft); }
    .topbar select:focus { outline: none; border-color: var(--ly-accent); box-shadow: var(--shadow-focus); }
    .topbar select option { color: var(--ly-dark); background: var(--ly-white); }

    .main { padding: 28px 28px 56px; max-width: 1320px; margin: 0 auto; }

    /* cards */
    .cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
    .card { background: var(--ly-white); border-radius: var(--radius); padding: 20px 22px 16px; box-shadow: var(--shadow); border: 1px solid var(--ly-border); position: relative; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .12s; }
    .card:hover { border-color: var(--ly-gray-soft); box-shadow: var(--shadow-md); transform: translateY(-1px); }
    .card.selected { border-color: var(--ly-accent); box-shadow: 0 0 0 1px var(--ly-accent), var(--shadow-md); }
    .card.selected::after { content: ''; position: absolute; top: 14px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--ly-accent); }
    .card-accent { border-top: 2px solid var(--ly-accent); }
    .card-accent-green { border-top: 2px solid var(--ly-green); }
    .card-accent-blue { border-top: 2px solid var(--ly-blue); }
    .card-header { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--ly-gray); text-transform: uppercase; letter-spacing: .55px; font-weight: 600; margin-bottom: 16px; }
    .card-header .rango { color: var(--ly-dark); font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
    .kpi { padding: 2px 0; }
    .kpi .val { font-size: 22px; font-weight: 600; color: var(--ly-dark); font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -0.4px; }
    .kpi .val.green { color: var(--ly-green); }
    .kpi .val.red { color: var(--ly-red); }
    .kpi .val.blue { color: var(--ly-blue); }
    .kpi .val.gold { color: var(--ly-gold); }
    .kpi .val.muted { color: var(--ly-gray-soft); font-size: 18px; font-weight: 500; }
    .kpi .lbl { font-size: 11px; color: var(--ly-gray); margin-top: 5px; letter-spacing: 0; font-weight: 500; }

    .toggle-detail { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ly-border); cursor: pointer; font-size: 12px; color: var(--ly-accent); display: flex; align-items: center; justify-content: space-between; user-select: none; font-weight: 500; transition: color .12s; }
    .toggle-detail:hover { color: var(--ly-accent-dark); }
    .toggle-detail .arrow-i { transition: transform .15s; font-size: 10px; }
    .card.detail-open .toggle-detail .arrow-i { transform: rotate(180deg); }
    .card-detail { display: none; margin-top: 10px; padding-top: 4px; }
    .card.detail-open .card-detail { display: block; }
    .detail-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f3f5f8; font-size: 12.5px; }
    .detail-row:last-child { border-bottom: none; }
    .detail-row .lbl { color: var(--ly-text-soft); }
    .detail-row .val { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ly-dark); }
    .detail-row.neg .val { color: var(--ly-red); }
    .detail-row.pos .val { color: var(--ly-green); }
    .card-warn { font-size: 11.5px; color: var(--ly-orange); margin-top: 10px; padding: 8px 11px; background: var(--ly-orange-bg); border-radius: var(--radius-sm); border: 1px solid rgba(196,92,13,.12); }
    .card-warn a { color: var(--ly-blue); }
    .card-loading { padding: 60px 20px; text-align: center; color: var(--ly-gray); font-size: 13px; }

    /* sections */
    .section { background: var(--ly-white); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow); border: 1px solid var(--ly-border); }
    .section-title { font-size: 14px; font-weight: 600; color: var(--ly-dark); margin-bottom: 4px; letter-spacing: -0.1px; }
    .section-sub { font-size: 12.5px; color: var(--ly-gray); margin-bottom: 14px; }

    /* fecha controls */
    .controls { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
    .controls label { display: flex; flex-direction: column; font-size: 11px; gap: 4px; color: var(--ly-gray); letter-spacing: 0; font-weight: 500; }
    .controls input, .controls select, .controls button { padding: 8px 11px; font-size: 13px; border: 1px solid var(--ly-border); border-radius: var(--radius-sm); background: var(--ly-white); font-family: inherit; color: var(--ly-dark); transition: border-color .12s, box-shadow .12s; }
    .controls input:focus, .controls select:focus { outline: none; border-color: var(--ly-accent); box-shadow: var(--shadow-focus); }
    .controls input:hover, .controls select:hover { border-color: var(--ly-gray-soft); }
    .controls button { background: var(--ly-accent); color: #fff; border-color: var(--ly-accent); cursor: pointer; font-weight: 500; box-shadow: 0 1px 2px rgba(99,91,255,.16); }
    .controls button:hover { background: var(--ly-accent-dark); border-color: var(--ly-accent-dark); }

    /* toolbar (búsqueda + filtros + exportar) */
    .toolbar { display: flex; gap: 10px; align-items: center; margin: 14px 0 12px; flex-wrap: wrap; }
    .toolbar .search { flex: 1; min-width: 220px; position: relative; }
    .toolbar .search input { width: 100%; padding: 9px 12px 9px 34px; font-size: 13px; border: 1px solid var(--ly-border); border-radius: var(--radius-sm); background: var(--ly-white); font-family: inherit; transition: border-color .12s, box-shadow .12s; }
    .toolbar .search input:focus { outline: none; border-color: var(--ly-accent); box-shadow: var(--shadow-focus); }
    .toolbar .search::before { content: ''; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238792a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; pointer-events: none; }
    .toolbar select { padding: 9px 28px 9px 11px; font-size: 13px; border: 1px solid var(--ly-border); border-radius: var(--radius-sm); background-color: var(--ly-white); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23697386' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; color: var(--ly-dark); transition: border-color .12s, box-shadow .12s; }
    .toolbar select:hover { border-color: var(--ly-gray-soft); }
    .toolbar select:focus { outline: none; border-color: var(--ly-accent); box-shadow: var(--shadow-focus); }
    .toolbar .btn-export { background: var(--ly-green); color: #fff; border: 1px solid var(--ly-green); padding: 9px 14px; font-size: 13px; border-radius: var(--radius-sm); font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgba(4,120,87,.16); transition: background .12s; }
    .toolbar .btn-export:hover { background: #035e44; border-color: #035e44; }

    /* table */
    table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
    th { text-align: left; padding: 10px 10px; font-size: 11px; color: var(--ly-gray); letter-spacing: .2px; border-bottom: 1px solid var(--ly-border); font-weight: 500; background: var(--ly-gray-bg); }
    th:first-child { border-top-left-radius: var(--radius-sm); }
    th:last-child { border-top-right-radius: var(--radius-sm); }
    td { padding: 11px 10px; border-bottom: 1px solid #f1f4f8; font-size: 13px; vertical-align: middle; white-space: nowrap; overflow: hidden; color: var(--ly-text-soft); }
    td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
    tr.row-main { cursor: pointer; transition: background .1s; }
    tr.row-main:hover { background: var(--ly-gray-bg); }
    tr.row-main.open { background: var(--ly-accent-bg); }
    tr.row-detail td { padding: 0; background: var(--ly-gray-bg); white-space: normal; overflow: visible; border-bottom: 1px solid var(--ly-border); }
    .detail-box { padding: 16px 20px 20px; }

    /* desglose tipo "recibo" */
    .detail-receipt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; padding: 20px 24px 24px; }
    .receipt-calc, .receipt-info { font-size: 12.5px; }
    .rc-title, .ri-title { font-size: 11px; letter-spacing: .3px; font-weight: 600; color: var(--ly-gray); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ly-border); text-transform: uppercase; }
    .rc-row { display: flex; justify-content: space-between; padding: 6px 0; gap: 10px; align-items: baseline; font-weight: 500; color: var(--ly-text-soft); }
    .rc-row .num { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ly-dark); }
    .rc-row.pos { color: var(--ly-green); }
    .rc-row.pos .num { color: var(--ly-green); }
    .rc-row.total { font-weight: 600; padding: 10px 0 6px; border-top: 1px solid var(--ly-border); margin-top: 4px; color: var(--ly-dark); }
    .rc-row.total .num { font-size: 14px; font-weight: 600; }
    .rc-section { margin: 10px 0; padding: 10px 0 6px; border-top: 1px solid var(--ly-border); }
    .rc-section-title { font-size: 11px; color: var(--ly-gray); font-weight: 600; margin-bottom: 6px; letter-spacing: .2px; text-transform: uppercase; }
    .rc-sub { display: flex; justify-content: space-between; padding: 4px 0 4px 14px; font-size: 12px; color: var(--ly-text-soft); gap: 10px; align-items: baseline; }
    .rc-sub .num { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ly-text-soft); }
    .rc-sub.total { font-weight: 600; color: var(--ly-dark); margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--ly-border); }
    .rc-sub.total .num { color: var(--ly-dark); }
    .rc-final { margin-top: 14px; padding: 14px 16px; background: var(--ly-green-bg); border: 1px solid rgba(4,120,87,.18); border-radius: var(--radius); display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--ly-green); gap: 12px; }
    .rc-final .num { font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 600; }

    .ri-section { margin-bottom: 14px; }
    .ri-section-title { font-size: 11px; letter-spacing: .2px; color: var(--ly-gray); font-weight: 600; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--ly-border); text-transform: uppercase; }
    .ri-row { display: flex; justify-content: space-between; padding: 5px 0; gap: 12px; align-items: baseline; }
    .ri-row > :first-child { color: var(--ly-gray); font-size: 12px; flex-shrink: 0; }
    .ri-row .val { font-weight: 500; font-size: 12px; text-align: right; word-break: break-word; min-width: 0; color: var(--ly-dark); }
    .ri-row .val.code-style { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 11px; color: var(--ly-text-soft); }

    @media (max-width: 768px) { .detail-receipt { grid-template-columns: 1fr; gap: 20px; } }
    .arrow { display: inline-block; width: 10px; transition: transform .15s; color: var(--ly-gray-soft); font-size: 10px; }
    tr.row-main.open .arrow { transform: rotate(90deg); color: var(--ly-accent); }

    /* product cell */
    .prod-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .prod-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ly-dark); }
    .prod-qty { color: var(--ly-gray); font-weight: 500; margin-left: 6px; font-size: 11px; }

    /* badges */
    .badge { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .3px; line-height: 1.5; flex-shrink: 0; }
    .badge.flex { background: #fef3c7; color: #92400e; }
    .badge.ml { background: #dbeafe; color: #1e40af; }
    .badge.envio-unknown { background: var(--ly-gray-bg); color: var(--ly-gray); }
    .badge.estado-liq { background: var(--ly-green-bg); color: var(--ly-green); }
    .badge.estado-aliq { background: var(--ly-orange-bg); color: var(--ly-orange); }
    .badge.estado-prox { background: #fef9c3; color: #854d0e; }
    .badge.estado-cancel { background: var(--ly-red-bg); color: var(--ly-red); }
    .badge.estado-unknown { background: var(--ly-accent-bg); color: var(--ly-accent); }
    .biz-numina { color: var(--ly-accent); font-weight: 500; }
    .biz-librosya { color: var(--ly-blue); font-weight: 500; }
    .biz-silvina { color: var(--ly-orange); font-weight: 500; }
    .biz-all { color: var(--ly-gray); font-weight: 500; }

    /* number colors */
    .neg, td.neg { color: var(--ly-red); }
    .pos, td.pos { color: var(--ly-green); }
    .gan-pos, td.gan-pos { color: var(--ly-green); font-weight: 600; }
    .gan-neg, td.gan-neg { color: var(--ly-red); font-weight: 600; }
    .muted, td.muted { color: var(--ly-gray-soft); }
    .prov-flag { display: inline-block; margin-left: 5px; color: var(--ly-orange); font-size: 11px; cursor: help; vertical-align: middle; }

    /* misc */
    .err { background: var(--ly-red-bg); color: var(--ly-red); padding: 10px 12px; border-radius: var(--radius-sm); margin: 8px 0; font-size: 13px; border: 1px solid rgba(223,27,65,.16); }
    code { background: var(--ly-gray-bg); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--ly-text-soft); border: 1px solid var(--ly-border); font-family: 'SFMono-Regular', Consolas, monospace; }
    .summary { display: flex; gap: 18px; margin-bottom: 12px; font-size: 12px; color: var(--ly-gray); flex-wrap: wrap; }
    .summary span b { color: var(--ly-dark); font-weight: 600; font-size: 14px; }
    .empty { text-align: center; color: var(--ly-gray); padding: 32px; font-size: 13px; }

    @media (max-width: 1024px) { .cards-row { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 768px) { .cards-row { grid-template-columns: 1fr; } .main { padding: 16px; } .topbar { padding: 12px 16px; } }

    /* ===== Paridad Parte 1: barra lateral + layout (solo forma, no toca lógica) ===== */
    .app-shell { display: flex; align-items: stretch; min-height: 100vh; }
    .sidebar { width: 232px; flex-shrink: 0; background: #1c2333; color: #aeb6c7; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid #11151f; }
    .sidebar .sb-brand { font-size: 19px; font-weight: 800; color: #fff; padding: 20px 20px 16px; letter-spacing: -0.4px; }
    .sidebar .sb-brand span { color: var(--ly-accent-light); }
    .sidebar .sb-nav { flex: 1; padding: 2px 0 12px; }
    .sidebar .sb-group { font-size: 10px; font-weight: 700; letter-spacing: .8px; color: #5b6577; padding: 16px 20px 6px; text-transform: uppercase; }
    .sidebar .sb-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 13px; color: #aeb6c7; cursor: pointer; border-left: 2px solid transparent; user-select: none; text-decoration: none; }
    .sidebar .sb-item:hover { background: rgba(255,255,255,.04); color: #fff; }
    .sidebar .sb-item.active { color: #fff; background: rgba(99,91,255,.16); border-left-color: var(--ly-accent); font-weight: 600; }
    .sidebar .sb-item.soon { opacity: .5; cursor: default; }
    .sidebar .sb-item.soon:hover { background: none; color: #aeb6c7; }
    .sidebar .sb-foot { padding: 14px 18px 20px; border-top: 1px solid #11151f; }
    .sidebar .sb-refresh { width: 100%; background: var(--ly-accent); color: #fff; border: none; padding: 10px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .sidebar .sb-refresh:hover { background: var(--ly-accent-dark); }
    .sidebar .sb-note { font-size: 10.5px; color: #5b6577; text-align: center; margin-top: 10px; }
    .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    @media (max-width: 900px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; height: auto; position: static; } }

    /* ===== Paridad Parte 2: bloques dentro de las cards ===== */
    .card-sec { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ly-border); }
    .card-sec-title { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--ly-gray); text-transform: uppercase; margin-bottom: 8px; }

    /* Ajuste Thiago: aprovechar el ancho (cards más anchas y compactas) */
    .main { max-width: none; }
    .card .card-grid { grid-template-columns: repeat(4, 1fr); gap: 12px 14px; }
    .card-header + .card-grid { grid-template-columns: repeat(3, 1fr); }
    .card-sec .kpi .val { font-size: 15px; }
    .card-sec .kpi .lbl { font-size: 10px; }

    /* ===== Paridad Parte 4: navegación por el menú (scroll suave) ===== */
    html { scroll-behavior: smooth; }
    #cards, .section { scroll-margin-top: 72px; }
    .sidebar a.sb-item, .sidebar a.sb-item:visited { color: #aeb6c7; }
    .sidebar a.sb-item.active, .sidebar a.sb-item.active:visited { color: #fff; }

    /* ===== Paridad Parte 5: páginas (mostrar una sección a la vez) ===== */
    .nav-hide { display: none !important; }
    .sidebar .sb-item { cursor: pointer; }

    /* ===== MOBILE OPTIMIZATION (iPhone Plus & similar) =====
       Cambios quirurgicos: NO toca desktop. Solo aplica < 900px.
       Apunta a: sidebar como drawer, cards stack, KPIs en 2 cols, tablas con
       scroll horizontal, inputs >= 16px (evita zoom iOS), touch targets >= 44px.
    */
    .mobile-toggle { display: none; }

    @media (max-width: 900px) {
      /* Sidebar como drawer (overlay desde la izquierda). */
      .app-shell { flex-direction: row; }
      .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; width: 260px;
        z-index: 100; transform: translateX(-100%); transition: transform .22s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,.25);
      }
      body.sidebar-open .sidebar { transform: translateX(0); }
      .sidebar-overlay {
        display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55);
        z-index: 90; cursor: pointer;
      }
      body.sidebar-open .sidebar-overlay { display: block; }
      .mobile-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--ly-accent); color: #fff; border: none;
        width: 44px; height: 44px; border-radius: 10px; font-size: 22px;
        cursor: pointer; box-shadow: 0 2px 8px rgba(99,91,255,.3);
        font-family: inherit;
      }
      .topbar {
        position: sticky; top: 0; z-index: 50; background: var(--ly-white, #fff);
        display: flex; align-items: center; gap: 12px;
        padding: 10px 14px; border-bottom: 1px solid var(--ly-border, #e5e7eb);
      }
      .topbar .brand { font-size: 16px; font-weight: 700; }
      .topbar .topbar-right { margin-left: auto; }

      /* Main: aprovechar todo el ancho. */
      .main { padding: 14px !important; max-width: 100% !important; }

      /* Cards stack + KPIs en 2 cols para que se lean. */
      .cards-row { grid-template-columns: 1fr !important; gap: 12px; margin-bottom: 16px; }
      .card .card-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px 10px; }
      .card-header + .card-grid { grid-template-columns: repeat(3, 1fr) !important; }
      .card-sec .kpi .val { font-size: 15px; }
      .card-sec .kpi .lbl { font-size: 11px; }

      /* Forms / controls: stack vertical + tappable. */
      .controls { gap: 8px; }
      .controls label { width: 100%; }
      .controls input, .controls select, .controls button {
        font-size: 16px;       /* >=16px evita zoom iOS al focus */
        padding: 11px 12px;
        min-height: 44px;
        box-sizing: border-box;
      }
      .controls button { width: 100%; }
      .section { padding: 12px !important; border-radius: 10px; }
      .section-title { font-size: 16px; }
      .section-sub { font-size: 12px; line-height: 1.4; }

      /* Formularios genericos (adelantos, caja, stock, socios). */
      form input[type="text"], form input[type="number"], form input[type="date"],
      form input[type="email"], form input[type="password"], form select, form textarea {
        font-size: 16px !important;
        min-height: 44px;
        padding: 10px 12px;
        box-sizing: border-box;
        width: 100%;
      }
      form button[type="submit"] {
        min-height: 46px;
        font-size: 15px;
        width: 100%;
      }

      /* Tablas: scroll horizontal y manejo legible. */
      .section table, .section > table, table {
        display: block; overflow-x: auto; width: 100%;
        -webkit-overflow-scrolling: touch;
        font-size: 12.5px;
      }
      table th, table td { white-space: nowrap; }

      /* Lista de filas genericas (gastos, caja, stock) que usan grid inline. */
      .section [style*="grid-template-columns"] {
        font-size: 12.5px;
      }

      /* Topbar account selector full width si existe. */
      .topbar select { font-size: 14px; min-height: 38px; }
    }

    @media (max-width: 480px) {
      .card .card-grid { gap: 8px; }
      .main { padding: 10px !important; }
      .section { padding: 10px !important; }
      .card { padding: 14px 12px !important; }
      .card-header { font-size: 14px; }
      .card-header .rango { font-size: 11px; }
    }