/* ============================================================================
 * iShop · css/03-layout.css — armazón: columna «app», isla y capas flotantes
 * ----------------------------------------------------------------------------
 * COMPOSICIÓN: una columna estrecha centrada, como una aplicación móvil abierta
 * en el escritorio, con capas de vidrio flotando encima.
 *
 * NOTA IMPORTANTE SOBRE backdrop-filter: crea bloque contenedor para los
 * descendientes con position: fixed y establece contexto de apilamiento. Por
 * eso la isla y los diálogos viven FUERA de cualquier elemento con vidrio — si
 * estuvieran dentro, quedarían atrapados en su caja.
 * ========================================================================== */

@layer layout {

  /* ======================================================================
   * VIDRIO — la utilidad que define la dirección
   * ==================================================================== */
  .vidrio {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-satura));
    -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-satura));
  }

  /* SUELO DE LEGIBILIDAD. Sin backdrop-filter — Windows con aceleración por
     hardware desactivada, por ejemplo — el vidrio se vuelve casi transparente
     y el texto blanco queda ilegible sobre la malla de colores. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vidrio { background: rgb(24 20 40 / 0.92); }
  }

  /* ======================================================================
   * Cabecera flotante
   * ==================================================================== */
  .cabecera {
    position: sticky;
    inset-block-start: var(--space-3);
    z-index: 50;
    inline-size: min(100% - var(--gutter) * 2, var(--ui-ancho-max));
    margin-inline: auto;
    margin-block-end: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    block-size: var(--ui-alto-cabecera);
    padding-inline: var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-satura));
    -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-satura));
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cabecera { background: rgb(24 20 40 / 0.92); }
  }

  .cabecera__marca {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-1);
    letter-spacing: -0.03em;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.08em;
  }

  .cabecera__marca em { font-style: normal; color: var(--accent); }

  .cabecera__nav {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--step--1);
    font-weight: 600;
  }

  .cabecera__nav a {
    text-decoration: none;
    color: var(--ink-3);
    white-space: nowrap;
    padding: 0.3em 0.7em;
    border-radius: var(--radius-pill);
    transition: background var(--dur-1) var(--ease-standard),
                color var(--dur-1) var(--ease-standard);
  }

  .cabecera__nav a:hover { color: var(--ink); background: var(--surface-2); }

  .cabecera__nav a[aria-current='page'] {
    color: var(--ink-inv);
    background: var(--ink);
  }

  /* ======================================================================
   * ISLA DINÁMICA — el gesto de firma
   * Fija arriba del todo, FUERA de cualquier capa con backdrop-filter para
   * que no quede atrapada en su bloque contenedor.
   * ==================================================================== */
  .isla {
    position: fixed;
    inset-block-start: var(--space-3);
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: 90;

    display: grid;
    align-items: center;
    overflow: hidden;

    min-block-size: var(--ui-isla-alto);
    inline-size: min(16rem, calc(100vw - 2rem));
    padding-inline: 1rem;
    border-radius: var(--radius-pill);

    background: rgb(8 6 14 / 0.86);
    border: 1px solid rgb(255 255 255 / 0.14);
    box-shadow: 0 8px 32px -8px rgb(0 0 0 / 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    /* El muelle: es lo que hace que la isla se sienta física. */
    transition: inline-size var(--dur-3) var(--ease-spring),
                min-block-size var(--dur-3) var(--ease-spring),
                border-radius var(--dur-3) var(--ease-spring);
  }

  .isla[data-isla='expandida'] {
    inline-size: min(26rem, calc(100vw - 2rem));
    min-block-size: 7.5rem;
    border-radius: var(--radius-3);
    padding: var(--space-4) var(--space-5);
    align-items: start;
  }

  .isla__compacta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--step--1);
    font-weight: 600;
    white-space: nowrap;
  }

  .isla__compacta .cifra { margin-inline-start: auto; color: var(--ink-2); }

  .isla__expandida { display: none; }
  .isla[data-isla='expandida'] .isla__compacta  { display: none; }
  .isla[data-isla='expandida'] .isla__expandida { display: grid; gap: var(--space-3); inline-size: 100%; }

  .isla__titulo { font-weight: 700; font-size: var(--step-0); }
  .isla__sub { font-size: var(--step--1); color: var(--ink-3); }

  .isla__acciones { display: flex; gap: var(--space-2); }

  /* ======================================================================
   * Contenedores
   * ==================================================================== */
  .env {
    inline-size: min(100% - var(--gutter) * 2, var(--ui-ancho-max));
    margin-inline: auto;
  }

  /* LA COLUMNA «APP»: estrecha y centrada. */
  .app {
    inline-size: min(100% - var(--gutter) * 2, var(--ui-col-app));
    margin-inline: auto;
    display: grid;
    gap: var(--space-4);
  }

  .app--ancha { inline-size: min(100% - var(--gutter) * 2, 46rem); }

  .seccion { padding-block: var(--space-7); }
  .seccion--compacta { padding-block: var(--space-6); }

  .seccion__cabecera {
    display: grid;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
    justify-items: center;
    text-align: center;
  }

  .seccion__cabecera--izq { justify-items: start; text-align: start; }

  .rejilla {
    display: grid;
    gap: var(--space-4);
  }

  @media (min-width: 54rem) {
    .rejilla--2 { grid-template-columns: 1fr 1fr; }
  }

  .pila { display: flex; flex-direction: column; gap: var(--space-4); }

  .fila { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .fila--entre { justify-content: space-between; }

  /* ======================================================================
   * Pie
   * ==================================================================== */
  .pie {
    margin-block-start: var(--space-7);
    padding-block: var(--space-6);
    font-size: var(--step--1);
    color: var(--ink-3);
  }

  .pie__rejilla { display: grid; gap: var(--space-5); margin-block-end: var(--space-5); }

  @media (min-width: 48rem) {
    .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; }
  }

  .pie__lista { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
  .pie a { color: var(--ink-2); text-decoration: none; }
  .pie a:hover { color: var(--ink); }

  .pie__descargo {
    max-inline-size: 60ch;
    line-height: 1.55;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--line);
  }
}

@layer layout {
  /* ==========================================================================
   * Utilidades de composición
   * --------------------------------------------------------------------------
   * Sustituyen a los style="" que quedaban sueltos en el marcado. La regla del
   * proyecto es que ningún valor visual viva en el HTML: si algo hay que
   * ajustar, se ajusta aquí o en 01-tokens.css.
   * ======================================================================== */

  /* Titular de sección dentro de la columna «app». */
  .seccion__titulo { font-size: var(--step-3); }

  .centrado    { text-align: center; }
  .medida-corta { max-inline-size: 40ch; margin-inline: auto; }

  /* Pie: la marca y su descripción. */
  .pie__marca { font-size: var(--step-2); }

  .pie__nota {
    margin-block-start: var(--space-3);
    max-inline-size: 32ch;
  }

  .pie__titulo { margin-block-end: var(--space-3); }

  /* El descargo cuando ya no necesita su filete superior (portal y control,
     donde es lo único que hay en el pie). */
  .pie__descargo--solo {
    border-block-start: 0;
    padding-block-start: 0;
    margin-block-start: 0;
  }

  /* Columna de paneles apilados en la mesa de control. */
  .panel-pila {
    display: grid;
    gap: var(--space-4);
    align-content: start;
  }

  .separado-arriba { margin-block-start: var(--space-5); }
}