/* ============================================================================
   mobile.css - phone/tablet adaptation. Loaded LAST so it wins on ties.

   HARD RULE: every declaration in this file lives inside a max-width media
   query. Desktop must render byte-identical to before this file existed.

   Fixes here were found by measuring the live portal at 390x844 (iPhone 14/15
   class) against real production data, not by eyeballing a resized window.
   ========================================================================== */

@media (max-width: 768px) {

  /* == 1. Modals built with inline styles by their page ====================
     crecimiento (#cre-metric-modal) and seo-tracker (#seoModalBg) cap their
     panel at 90vh. On iOS Safari 90vh is measured against the LARGEST viewport
     (URL bar hidden), so with the bar visible the bottom of the panel, where
     the confirm buttons live, sits under the chrome. dvh tracks the visible
     box instead. Also drop the 24px overlay padding to 12px: on a 390px screen
     it was eating 48px of usable width. */
  #cre-metric-modal,
  #seoModalBg {
    padding: 12px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #cre-metric-modal > div,
  #seoModalBg > div {
    max-height: calc(100dvh - 24px) !important;
    margin: auto !important;
  }

  /* == 1b. Admin user modal ==============================================
     The panel caps itself at the viewport in JS so Create/Save stay reachable
     (see modalShell in admin.js). Here we tighten the padding for a 390px
     screen and draw the hairlines that make the scrollable middle readable as
     one. Desktop keeps the original flat 24px block. */
  .adm-modal-head {
    padding: 16px 18px 12px !important;
    border-bottom: 1px solid var(--b1);
  }
  .adm-modal-body { padding: 14px 18px !important; }
  .adm-modal-foot {
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--b1);
  }
  .adm-modal-foot .btn { flex: 1 1 auto; }
  .adm-modal-head button[aria-label] {
    font-size: 24px !important;
    min-width: 44px;
    min-height: 44px;
    margin: -6px -10px -6px 0 !important;
  }

  /* == 2. Paid: "inversión consumida" header ==============================
     Label + amounts + percentage on one nowrap row need 384px inside a 316px
     box, so the percentage was sliced off. Let it wrap. */
  .invest-bar-head {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .invest-bar-lbl { flex: 1 0 100%; }

  /* == 3. Templates: bulk actions pushed out of their own card ============
     .tpl-counts__bulk is margin-left:auto inside a nowrap flex row; with three
     stat blocks in front of it on a phone it overhung the card edge and
     "Seleccionar todas" was unreachable. */
  .tpl-counts {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .tpl-counts__bulk {
    margin-left: 0;
    width: 100%;
  }
  .tpl-counts__bulk button { flex: 1 1 auto; }

  /* == 4. Budget bento: 4 columns squeezed to 51px each ===================
     The grid kept its desktop 2fr/1fr/1fr track list on phones, leaving each
     small cell 51px wide, so every sub-label ("vs 1.936.340 año proyectado",
     "datos OCS Admin") was clipped by the cell's overflow:hidden. */
  /* !important is required, not lazy: budget.js writes the track list as an
     inline style attribute (`style="grid-template-columns:2fr 1fr 1fr 1fr"`),
     which outranks every external sheet. Scoped to the media query, so the
     desktop grid is untouched. */
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
  .bento-cell {
    padding: 16px;
    min-width: 0;
  }
  .bento-cell.feature {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .bento-sub {
    flex-wrap: wrap;
    row-gap: 4px;
    min-width: 0;
  }
  .bento-sub > span { min-width: 0; }

  /* == 5. Touch targets ===================================================
     Filter chips measured 27-30px tall. Apple and Google both put the floor at
     44px/48dp; 40px is the practical compromise that keeps these dense filter
     rows from taking over the screen. Doubled selectors (.x.x) outrank the
     page-injected <style> blocks that define some of these at render time. */
  .tk-fbtn.tk-fbtn,
  .tpl-chip.tpl-chip,
  .seo-btn.seo-btn,
  .seo-view-btn.seo-view-btn,
  .vt-chip.vt-chip,
  .bm-open-btn.bm-open-btn {
    min-height: 40px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  /* Plain .btn too: the "+ 10 más" expanders carry no size modifier and came
     in at 27px. Doubled selector to outrank the .btn.btn-sm pairs already in
     components.css. */
  .btn.btn { min-height: 40px; }

  /* Icon-only controls need a real hit box, not just a bigger label. */
  button[aria-label], .icon-btn, .dp-refresh {
    min-width: 40px;
    min-height: 40px;
  }

  /* == 6. iOS zoom-on-focus ===============================================
     Safari zooms the whole page when a focused field is under 16px, and never
     zooms back out. Every form in the portal uses 12-13px inputs. */
  input, select, textarea {
    font-size: max(16px, 1em);
  }

  /* == 7. Header right slot ===============================================
     Items were stretching to the tallest row member because the wrapped flex
     lines inherit align-content:stretch. */
  .view-header .vh-right {
    width: 100%;
    align-items: flex-start;
    align-content: flex-start;
  }

  /* == 8. Encuestas cards clipping their own labels =======================*/
  .card.scard { min-width: 0; }
  .card.scard .sc-top, .card.scard .kpi-mini { flex-wrap: wrap; min-width: 0; }

  /* == 9. Home-indicator safe area ========================================
     The drawer's last nav item sat under the iOS gesture bar. */
  .sidebar-footer, .sidebar-nav {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* Small phones (iPhone SE/13 mini and anything narrower). */
@media (max-width: 430px) {
  /* Two bento columns still clip the longer sub-labels below ~200px of cell
     width, so single-column it is. */
  .bento { grid-template-columns: minmax(0, 1fr) !important; }
  .bento-cell.feature { grid-column: auto; }
}