/**
 * CuídateGratis — Mobile bugfixes (Fase 2)
 * Overrides quirúrgicos. Cargar al final de la cadena CSS del tema.
 */

/* ── 2.1 Brand header colapsada en 360px ── */
@media (max-width: 900px) {
  .site-header__inner > .site-brand,
  .nav-inner > .brand {
    /* CTA (~80px) + toggle (44px) + dark-toggle (34px) + gaps (~24px) */
    max-width: calc(100% - 186px) !important;
    min-width: 80px !important;
  }
}

@media (max-width: 480px) {
  .site-header__inner > .site-brand,
  .nav-inner > .brand {
    max-width: calc(100% - 160px) !important;
    min-width: 70px !important;
  }
}

/* ── 2.2 position:fixed background en calculadoras (iOS Safari) ── */
body.cgc-page-tools .cg-calc-page {
  position: relative !important;
  isolation: isolate !important;
}

body.cgc-page-tools .cg-calc-page::before {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
}

/* ── 2.3 Tabla PRO — indicador visual de scroll horizontal ── */
@media (max-width: 820px) {
  body.cgc-static-pro .pro-table-wrapper,
  body.cgc-page-cuidate-pro .pro-table-wrapper {
    position: relative;
  }

  body.cgc-static-pro .pro-table-wrapper::after,
  body.cgc-page-cuidate-pro .pro-table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    min-height: 48px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
      to right,
      transparent,
      rgba(246, 248, 246, 0.92) 78%
    );
  }
}

html[data-theme="dark"] body.cgc-static-pro .pro-table-wrapper::after,
html[data-theme="dark"] body.cgc-page-cuidate-pro .pro-table-wrapper::after,
html.cg-dark body.cgc-static-pro .pro-table-wrapper::after,
html.cg-dark body.cgc-page-cuidate-pro .pro-table-wrapper::after {
  background: linear-gradient(
    to right,
    transparent,
    rgba(11, 29, 19, 0.94) 78%
  ) !important;
}

/* ── 2.4 Grid calculadora — breakpoint tablet landscape ── */
@media (max-width: 1024px) and (min-width: 821px) {
  body.cgc-page-tools .cg-calculator-app,
  body.cgc-page-tools #informe-bienestar-container.cg-calculator-app {
    grid-template-columns: 1fr !important;
  }

  body.cgc-page-tools .cg-calculator-app .cg-premium-form,
  body.cgc-page-tools #informe-bienestar-container.cg-calculator-app .cg-premium-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}