/* Black Tap · capa de diseño fluido (principios de interfaz de Apple)
   Respuesta inmediata, materiales translúcidos, profundidad, tipografía y accesibilidad. */

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* 1 · Respuesta al tocar: el botón se hunde en el instante del toque y vuelve con suavidad */
:where(button,a[href],[role=button],label.pill,summary):not(:disabled):not([class*="active:"]):not([class*="translate"]):not([class*="rotate"]):not([class*="scale"]):not([class*="transition"]){
  transition:transform .22s cubic-bezier(.2,.9,.25,1)}
:where(button,a[href],[role=button],label.pill,summary):not(:disabled):not([class*="active:"]):not([class*="translate"]):not([class*="rotate"]):not([class*="scale"]):active{
  transform:scale(.97);transition-duration:.08s}
/* Las filas largas solo se oscurecen (escalar una fila ancha se ve brusco) */
:where(.fila,tr,li[role=option]):active{transform:none!important}

/* 2 · Material translúcido en la barra superior; sin línea dura, con borde de luz */
header.sticky{border-bottom-color:transparent!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 -1px 0 rgb(var(--borde)/.06)}
header.sticky::after{content:"";position:absolute;inset:100% 0 auto;height:14px;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:linear-gradient(rgb(var(--negro)/.9),rgb(var(--negro)/0))}
html.bt-desplazado header.sticky::after{opacity:1}
nav[aria-label="Módulos"]{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
nav[aria-label="Módulos"].fixed.bottom-0{border-top-color:rgb(var(--borde)/.06)!important;box-shadow:0 -1px 0 rgb(255 255 255/.04) inset}

/* 3 · Profundidad: sombras en capas (claras y suaves) para tarjetas; los diálogos flotan más */
:root:not([data-tema=oscuro]) :is(.rounded-3xl,.rounded-\[2rem\],.rounded-\[1\.75rem\]):is(.bg-panel,.bg-carbon):not([role=dialog]):not(form){
  box-shadow:0 1px 1px rgb(40 32 15/.03),0 2px 6px rgb(40 32 15/.04),0 10px 28px -8px rgb(40 32 15/.08)}
:root:not([data-tema=oscuro]) [role=dialog]{box-shadow:0 2px 6px rgb(0 0 0/.06),0 24px 64px -12px rgb(0 0 0/.28)!important}
[role=dialog]{will-change:transform}

/* 4 · Tipografía: títulos grandes más compactos, letra chica un poco más abierta, cifras alineadas */
h1.titulo,.titulo.text-5xl,.titulo.text-6xl{letter-spacing:-.005em}
.text-xs,.text-\[11px\],.text-\[10px\]{letter-spacing:.012em}
.cifra,td.text-right,[class*="tabular"]{font-variant-numeric:tabular-nums}
.font-semibold,.font-bold{letter-spacing:-.003em}

/* 5 · Accesibilidad */
@media (prefers-reduced-transparency:reduce){
  header.sticky,nav[aria-label="Módulos"],[class*="backdrop-blur"]{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  header.sticky{background:rgb(var(--negro))!important}
  nav[aria-label="Módulos"]{background:rgb(var(--carbon))!important}
}
@media (prefers-contrast:more){
  .border-borde,header.sticky,nav[aria-label="Módulos"]{border-color:rgb(var(--tenue))!important}
  .text-tenue{color:rgb(var(--ceniza))!important}
}
@media (prefers-reduced-motion:reduce){
  :where(button,a[href],[role=button]):active{transform:none!important}
  header.sticky::after{transition:none}
}