/*! Capa Apple, versión 1.1.1 (21-oct-2026). */
/* Interacción y presentación según la forma en que Apple diseña sus interfaces: respuesta al pulsar, resorte (con
   capa-apple.js), mismo camino de entrada y salida (con capa-apple.js), translucidez densa, tipografía según el tamaño
   y las tres preferencias del dispositivo.

   Toda la hoja va dentro de la capa de cascada «capa-apple», y por eso cualquier estilo propio del sistema le gana,
   esté o no en una capa, siempre que la hoja se cargue antes que los estilos del sistema. Las clases ap-* son para lo
   que la capa no puede adivinar. No cambia ninguna marca: los colores salen de variables que cada sistema ajusta a la
   suya, y la tipografía conserva la fuente de cada uno. */

@layer capa-apple {
  :root {
    --ap-pulsar-escala: .97;
    --ap-pulsar-duracion: 100ms;
    --ap-foco: #0E80C4;
    --ap-foco-ancho: 2px;
    /* Material de barras y hojas: denso por defecto, para que el texto se lea sobre cualquier fondo. */
    --ap-material: rgba(2, 22, 47, .84);
    --ap-material-solido: #02162F;
    --ap-material-texto: #FFFFFF;
    --ap-material-desenfoque: 20px;
    --ap-material-fino: rgba(255, 255, 255, .72);
    --ap-material-fino-texto: #02162F;
    /* Borde que aparece cuando el dispositivo pide más contraste: el color del texto de cada control. */
    --ap-borde-contraste: currentColor;
  }

  /* 1. Respuesta al pulsar. Cada control responde en el momento en que se pulsa, no al soltarlo, y sin la demora del
     doble toque. Se usa la propiedad scale, que no pisa el transform propio de cada control; si el sistema ya encoge
     sus botones con transform, hay que quitar esa escala propia para que no se sumen las dos. */
  :where(a, button, summary, select, label, input, textarea, [role=button], [role=tab], [role=link], [role=option],
         [role=menuitem], [role=switch], .ap-pulsable) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  :where(button, summary, [role=button], [role=tab], [role=link], [role=menuitem], [role=option], [role=switch],
         input[type=button], input[type=submit], input[type=reset], a[class*=btn], a[class*=boton], .ap-pulsable) {
    transition: scale var(--ap-pulsar-duracion) ease-out;
  }
  :where(button, summary, [role=button], [role=tab], [role=link], [role=menuitem], [role=option], [role=switch],
         input[type=button], input[type=submit], input[type=reset], a[class*=btn], a[class*=boton], .ap-pulsable):where(:not(:disabled):not([aria-disabled=true]):active) {
    scale: var(--ap-pulsar-escala);
  }
  /* Los enlaces de texto y las filas de una lista responden con un cambio de opacidad, que no mueve el texto. */
  :where(a:not([class*=btn]):not([class*=boton]):active, .ap-fila:active) {
    opacity: .7;
  }

  /* 2. Tipografía según el tamaño. Los titulares grandes llevan espaciado negativo e interlineado ajustado; el texto
     corrido, interlineado holgado; el texto pequeño y los rótulos, un espaciado algo positivo. Las etiquetas dan un
     punto de partida; las clases ap-grande, ap-titular, ap-cifra y ap-rotulo ajustan por tamaño lo que las etiquetas no
     dicen. font-optical-sizing solo tiene efecto en fuentes con eje óptico. */
  :where(p, li, dd, blockquote, .ap-texto) { line-height: 1.5; }
  :where(body) { font-optical-sizing: auto; }
  :where(h1, .ap-grande) { letter-spacing: -.022em; line-height: 1.1; }
  :where(h2, .ap-titular) { letter-spacing: -.016em; line-height: 1.2; }
  :where(h3) { letter-spacing: -.008em; line-height: 1.3; }
  :where(h4, h5, h6) { letter-spacing: 0; line-height: 1.35; }
  :where(.ap-cifra) { letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
  :where(small, figcaption, caption, .ap-pequeno, .ap-rotulo) { letter-spacing: .01em; line-height: 1.45; }

  /* 3. Translucidez densa. Las barras y las hojas que flotan sobre el contenido llevan ap-material, con su color de
     texto; los botones o fichas pequeñas que flotan, ap-material-fino. Nunca se pone una capa translúcida clara encima
     de otra. */
  .ap-material {
    background: var(--ap-material);
    color: var(--ap-material-texto);
    -webkit-backdrop-filter: saturate(180%) blur(var(--ap-material-desenfoque));
    backdrop-filter: saturate(180%) blur(var(--ap-material-desenfoque));
  }
  .ap-material-fino {
    background: var(--ap-material-fino);
    color: var(--ap-material-fino-texto);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
  }

  /* 4. Hojas, cajones, desplegables y avisos que mueve capa-apple.js. El resorte escribe en las propiedades translate y
     scale, así que estos elementos se colocan con transform o con el propio flujo, nunca con translate ni scale. El asa
     es una zona de 44 píxeles de alto, aunque la barra que se ve sea fina. */
  .ap-hoja { will-change: translate; }
  .ap-asa {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    cursor: grab;
    touch-action: none;
  }
  .ap-asa::before {
    content: '';
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: currentColor;
    opacity: .35;
  }
  .ap-transicion[hidden] { display: none !important; }

  /* El foco del teclado se ve siempre, y con más contraste es más grueso. */
  :where(a, button, summary, select, input, textarea, [tabindex], .ap-pulsable):focus-visible {
    outline: var(--ap-foco-ancho) solid var(--ap-foco);
    outline-offset: 2px;
  }

  /* 5. Preferencias del dispositivo. */

  /* Movimiento reducido: nada se desplaza y la respuesta pasa a ser de opacidad. Los indicadores de carga y de
     progreso (ap-gira y role=progressbar) siguen moviéndose, porque son respuesta y no adorno. */
  @media (prefers-reduced-motion: reduce) {
    :where(:not(.ap-gira, .ap-gira *, [role=progressbar], [role=progressbar] *)),
    :where(:not(.ap-gira, .ap-gira *, [role=progressbar], [role=progressbar] *))::before,
    :where(:not(.ap-gira, .ap-gira *, [role=progressbar], [role=progressbar] *))::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-property: opacity, color, background-color, border-color, outline-color, box-shadow !important;
    }
    :where(button, summary, [role=button], [role=tab], [role=link], [role=menuitem], [role=option], [role=switch],
           input[type=button], input[type=submit], input[type=reset], a[class*=btn], a[class*=boton], .ap-pulsable):where(:not(:disabled):not([aria-disabled=true]):active) {
      scale: none;
      opacity: .75;
    }
  }

  /* Transparencia reducida: fuera el desenfoque y los materiales pasan a ser sólidos. */
  @media (prefers-reduced-transparency: reduce) {
    .ap-material { background: var(--ap-material-solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .ap-material-fino { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
    :where(*) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  }

  /* Más contraste: materiales sólidos con borde, controles con un contorno definido y el foco más grueso. El contorno
     se dibuja con outline para no pisar las sombras propias de cada control. */
  @media (prefers-contrast: more) {
    :root { --ap-foco-ancho: 3px; }
    .ap-material { background: var(--ap-material-solido); -webkit-backdrop-filter: none; backdrop-filter: none;
                   box-shadow: 0 1px 0 var(--ap-material-texto); }
    .ap-material-fino { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none;
                        outline: 1px solid var(--ap-material-fino-texto); }
    :where(button, select, input, textarea, [role=button], [role=tab], [role=switch], .ap-pulsable, .ap-tarjeta) {
      outline: 1px solid var(--ap-borde-contraste);
      outline-offset: -1px;
    }
    :where(.ap-hoja, dialog, [role=dialog]) { outline: 1px solid var(--ap-borde-contraste); }
    :where(.ap-asa)::before { opacity: 1; }
    :where(a, button, summary, select, input, textarea, [tabindex], .ap-pulsable):focus-visible {
      outline: var(--ap-foco-ancho) solid var(--ap-foco);
      outline-offset: 2px;
    }
  }
}