/* ==========================================================================
   Radiohincha · Motor de skins  (se carga DESPUÉS de estilos.min.css)
   --------------------------------------------------------------------------
   ESTE ARCHIVO NO SE EDITA PARA CAMBIAR EL DISEÑO. El look lo define el bloque
   <style id="skin-activo"> del index.html (ver skins.css). Acá vive lo que es
   igual para todos los skins: la capa de fondo y el "liquid glass" que lee los
   colores del skin.

   Legibilidad: el arte nunca toca el texto directo. Entre el arte y el contenido
   hay (1) un velo del color del papel del skin sobre la columna de lectura y
   (2) vidrio tintado con ese mismo papel. En escritorio los costados quedan sin
   velo: ahí el arte se ve completo.
   ========================================================================== */

/* El fondo llega a los bordes: respetar el notch en horizontal */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}

/* ---------- Capa de fondo ---------- */
html:root{background:#111;--veil:.72}
html:root body{background:transparent}
.skin-fondo{position:fixed;top:0;left:0;width:100%;height:100%;height:100lvh;z-index:-1;pointer-events:none;
  background-color:var(--base);background-image:var(--art);background-size:var(--art-size,cover);
  background-position:var(--art-pos,center);background-repeat:var(--art-rep,no-repeat)}
.skin-fondo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent calc(50% - 760px),rgb(var(--paper)/var(--veil)) calc(50% - 560px),rgb(var(--paper)/var(--veil)) calc(50% + 560px),transparent calc(50% + 760px))}
.skin-fondo::after{content:"";position:absolute;inset:0;background-image:var(--overlay,none);
  background-size:var(--overlay-size,auto);background-position:var(--overlay-pos,0 0);background-repeat:var(--overlay-rep,no-repeat);
  /* la capa "overlay" se atenúa detrás de la columna de lectura y queda plena en los costados */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(50% - 700px),rgb(0 0 0/var(--overlay-c,1)) calc(50% - 520px),rgb(0 0 0/var(--overlay-c,1)) calc(50% + 520px),#000 calc(50% + 700px));
  mask-image:linear-gradient(90deg,#000 calc(50% - 700px),rgb(0 0 0/var(--overlay-c,1)) calc(50% - 520px),rgb(0 0 0/var(--overlay-c,1)) calc(50% + 520px),#000 calc(50% + 700px))}

/* ---------- Puente: variables del skin -> variables que ya usa estilos.min.css ---------- */
html:root body{
  --text-main:var(--ink);--text-secondary:var(--ink-2);--text-card:var(--ink-3);--text-dropcap:var(--ink);--text-accent:var(--accent);
  --border-color:var(--line);--border-light:color-mix(in srgb,var(--line) 55%,transparent);
  --bg-card:rgb(var(--paper));--bg-card-hover:rgb(var(--paper)/.92);--bg-gradient-2:rgb(var(--paper));
  --bg-table-hover:rgb(var(--paper)/.55);--bg-tooltip:rgb(var(--paper)/.96);
  --a1:.6;--a2:.32;--edge:rgb(var(--paper)/.6);--hi:rgb(255 255 255/.45)}
html:root body.modo-lectura{--a1:.58;--a2:.34;--edge:rgb(255 255 255/.16);--hi:rgb(255 255 255/.12)}

/* ---------- Liquid glass tokenizado ---------- */
html:root body :is(.card-noticia,.table-wrapper,.theme-switch-wrapper,.barra-liga-mx){
  background:linear-gradient(135deg,rgb(var(--paper)/var(--a1)),rgb(var(--paper)/var(--a2)));
  border-color:var(--edge);
  box-shadow:0 4px 20px rgb(0 0 0/.14),inset 0 1px 1px var(--hi),inset 0 -1px 1px rgb(0 0 0/.06)}
html:root body .card-noticia:hover{
  background:linear-gradient(135deg,rgb(var(--paper)/calc(var(--a1) + .14)),rgb(var(--paper)/calc(var(--a2) + .12)))}
html:root body :is(.buscador-desktop-resultados,.team-hub-modal,.buscador-modal,.barra-inferior){
  background:linear-gradient(135deg,rgb(var(--paper)/.93),rgb(var(--paper)/.82));border-color:var(--edge)}
html:root body .liga-mx-table th{background:rgb(var(--paper)/.62)}
html:root body .liga-mx-table th:first-child{box-shadow:-6px 0 rgb(var(--paper)/.62)}
html:root body .liga-mx-table th:last-child{box-shadow:6px 0 rgb(var(--paper)/.62)}
html:root body :is(.liga-tab-btn.active,.filtro-etiqueta-chip.activo){color:var(--on-accent)}

/* ---------- Legibilidad en casos límite ---------- */
@media (max-width:600px){html:root{--veil:.62}}
@supports not (backdrop-filter:blur(1px)){html:root body{--a1:.9;--a2:.86}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html:root{--veil:.94}
  html:root body{--a1:.95;--a2:.92}}