/* ============================================================================
 * iShop · css/09-adaptativo.css — respaldo tipográfico, viewports, degradaciones
 * ----------------------------------------------------------------------------
 * El archivo más importante de la carpeta: aquí se declara qué pasa cuando cada
 * apuesta técnica de la interfaz no está disponible. Se carga el último.
 * ========================================================================== */

@layer adaptativo {

  /* ======================================================================
   * SIN INTERNET
   * Segoe UI Variable Text es el respaldo: sus remates blandos y su altura de
   * x alta caen mucho más cerca de Plus Jakarta Sans que Inter.
   * ==================================================================== */
  :root[data-fonts='fallback'] {
    --tracking-display: -0.016em;
    --tracking-text: 0;
    --step-6: clamp(3rem, 2.1rem + 5vw, 6.25rem);
  }

  :root[data-fonts='fallback'] body { font-size-adjust: 0.52; }

  /* ======================================================================
   * DEGRADACIONES DE SOPORTE — las apuestas de esta dirección
   * ==================================================================== */

  /* 1 · SIN backdrop-filter. Es la degradación crítica: sin el desenfoque, el
   *     vidrio se vuelve casi transparente y el texto blanco queda ilegible
   *     sobre la malla de colores. Todas las capas suben a opacidad casi
   *     total. Se pierde el efecto, no la legibilidad. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
      --surface-1: rgb(26 22 42 / 0.94);
      --surface-2: rgb(38 32 58 / 0.94);
      --surface-3: rgb(52 44 76 / 0.94);
      --line: rgb(255 255 255 / 0.22);
    }
    body::before { filter: blur(70px); opacity: 0.7; }
  }

  /* 2 · SIN @property no se pueden interpolar los colores del chasis ni el
   *     brillo del puntero: ambos saltan. Degradado, nunca roto. */
  @supports not (background: paint(x)) {
    /* marcador: no hay detección directa de @property; el propio navegador
       ignora la transición y el valor salta. No hace falta hacer nada. */
  }

  /* 3 · SIN container queries la pantalla del aparato se dimensiona con el
   *     viewport. */
  @supports not (container-type: inline-size) {
    .dispositivo__pantalla { font-size: clamp(0.5rem, 1.1vw, 0.8rem); }
    .pant__titulo   { font-size: 1.6em; }
    .pant__contador { font-size: 3.2em; }
    .dispositivo__isla { inline-size: 26%; block-size: 3%; }
  }

  /* 4 · SIN color-mix un tema construido sobre derivados translúcidos se
   *     quedaría sin fondos. Suelo sólido. */
  @supports not (color: color-mix(in oklab, red 50%, blue)) {
    .pastilla { background: rgb(255 255 255 / 0.16); color: var(--ink); border-color: var(--line); }
    .aviso    { background: rgb(255 255 255 / 0.12); border-color: var(--line); }
    .kpi__valor { color: var(--ink); }
  }

  /* 5 · SIN allow-discrete la hoja aparece de golpe en vez de subir. Sigue
   *     abriendo y cerrando: el <dialog> nativo no depende de la animación. */

  /* ======================================================================
   * RENDIMIENTO
   * Nunca más de tres capas con desenfoque a la vez en una misma vista: en
   * una GPU integrada de portátil, la cuarta ya se nota al hacer scroll.
   * Por eso las tarjetas de la lista de pasos y de exclusiones NO llevan
   * backdrop-filter, solo un fondo semitransparente.
   * ==================================================================== */
  .paso,
  .exclusion,
  .problema__item {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(255 255 255 / 0.07);
    border: 1px solid var(--line);
  }

  /* ======================================================================
   * VIEWPORTS
   * ==================================================================== */
  @media (max-width: 60rem) {
    :root { --measure: 56ch; --ui-blur: 20px; }
    .cabecera__nav a[data-secundario] { display: none; }

    .tabla--apilable thead { display: none; }

    .tabla--apilable tr {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--space-1) var(--space-3);
      padding-block: var(--space-3);
      border-block-end: 1px solid var(--line);
    }

    .tabla--apilable td { border: 0; padding: 0; text-align: start; }

    .tabla--apilable td[data-col]::before {
      content: attr(data-col) ' ';
      color: var(--ink-3);
      font-size: var(--step--1);
      margin-inline-end: 0.4em;
    }
  }

  @media (max-height: 46rem) and (min-width: 62rem) {
    :root { --space-9: 4rem; --space-8: 3rem; }
    .hero { padding-block: var(--space-5) var(--space-6); }
    .hero__dispositivo { inline-size: min(50vw, 13rem); }
  }

  @media (min-width: 110rem) {
    :root { --ui-col-app: 34rem; }
  }

  @media (pointer: coarse) {
    .boton { padding-block: 0.85em; }
    .opcion { padding-block: var(--space-5); }
    .segmentado__op { padding-block: 0.75em; }
  }

  @media (hover: none) {
    .tabla tbody tr:hover { background: transparent; }
    .inclina::after { display: none; }
  }

  /* ======================================================================
   * IMPRESIÓN
   * ==================================================================== */
  @media print {
    :root {
      --bg: #fff;
      --surface-1: #fff; --surface-2: #fff; --surface-3: #fff;
      --ink: #000; --ink-2: #333; --ink-3: #666;
      --line: #ccc; --line-strong: #999;
    }

    body::before { display: none; }

    .cabecera, .isla, .hero__acciones, .saltar-a-contenido, .boton { display: none !important; }

    .vidrio, .tarjeta, .paso, .exclusion, .problema__item {
      background: #fff;
      box-shadow: none;
      backdrop-filter: none;
      border-color: #ccc;
      break-inside: avoid;
    }

    .hero__titulo em { color: #000; -webkit-text-fill-color: #000; }
  }
}