/* ---------------------------------------------------------------------
   COPIA AUTOMÁTICA. No edites este archivo.
   El original está en  css/vidrio.css  (la aplicación).
   Para actualizarlo:   node sincronizar-estilos.js
   --------------------------------------------------------------------- */
/* =====================================================================
   vidrio.css — «Liquid Glass» de IT Tool AI. Tokens y clases base.

   LA REGLA QUE MANDA SOBRE TODAS
   El vidrio NO lleva tinte de color. Es crema translúcido y nada más.
   El color va en los botones, los iconos, las etiquetas y las figuras
   del fondo, y siempre sólido y fuerte. Un vidrio rojo al 30% y un
   botón rojo sólido compiten entre sí, y el botón —que es lo que hay
   que tocar— pierde.

   POR QUÉ HAY FIGURAS GRANDES DETRÁS
   El vidrio no tiene color propio: toma el de lo que hay debajo. Sobre
   crema liso, desenfocar crema da crema y el efecto no existe. Las
   figuras son las que lo hacen visible.

   El vidrio va ENCIMA del estilo de pegatina, no lo sustituye: siguen
   el contorno de tinta y la sombra dura hacia abajo.
   ===================================================================== */

:root{
  /* --- vidrio --- */
  --blur-vidrio:         18px;
  --vidrio-claro:        rgba(255, 255, 247, .45);
  --vidrio-claro-fuerte: rgba(255, 255, 247, .60);
  --vidrio-oscuro:       rgba(255, 255, 255, .09);
  --borde-vidrio-oscuro: rgba(255, 255, 255, .35);
  --filtro-vidrio:       blur(var(--blur-vidrio)) saturate(1.9);

  /* --- brillos y sombras --- */
  --brillo-superior:     inset 0 2px 0 rgba(255, 255, 255, 1);
  --brillo-boton:        inset 0 2px 0 rgba(255, 255, 255, .5);
  --brillo-inferior-lila:inset 0 -12px 24px rgba(139, 151, 253, .12);
  --sombra-dura:         0 4px 0 #16161d;
  --sombra-dura-grande:  0 6px 0 #16161d;

  /* --- cuadrículas --- */
  --cuadricula: linear-gradient(#8b97fd2e 1px, transparent 1px),
                linear-gradient(90deg, #8b97fd2e 1px, transparent 1px);
  --cuadricula-sobre-color: linear-gradient(rgba(22,22,29,.07) 1px, transparent 1px),
                            linear-gradient(90deg, rgba(22,22,29,.07) 1px, transparent 1px);

  /* El lila de marca sobre crema da 2.63 de contraste y la norma pide
     4.5. Para TEXTO se usa este, que da 4.74; como relleno y borde
     sigue el de siempre. */
  --lila-texto: #5a66e0;
  --rojo-texto: #c32a2a;   /* el Pacifico sobre crema */
}

/* En pantalla táctil, menos radio de desenfoque: un celular de gama
   baja lo agradece y a simple vista no se distingue. */
@media (pointer: coarse){ :root{ --blur-vidrio: 12px } }

/* ---------------------------------------------------------------------
   LAS DOS CLASES DE VIDRIO
   --------------------------------------------------------------------- */
.vidrio{
  background: var(--vidrio-claro);
  border: 2px solid #16161d;
  box-shadow: var(--brillo-superior), var(--brillo-inferior-lila), var(--sombra-dura);
}
.vidrio-fuerte{ background: var(--vidrio-claro-fuerte) }

/* Para usar DENTRO de las secciones negras. */
.vidrio-oscuro{
  background: var(--vidrio-oscuro);
  border: 1.5px solid var(--borde-vidrio-oscuro);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3);
  color: #fffff7;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .vidrio, .vidrio-fuerte{
    -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio);
  }
  .vidrio-oscuro{
    -webkit-backdrop-filter: blur(var(--blur-vidrio)) saturate(1.6);
    backdrop-filter: blur(var(--blur-vidrio)) saturate(1.6);
  }
}

/* Respaldo: si el navegador no sabe desenfocar, casi opaco, que el
   texto siga leyéndose. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root{
    --vidrio-claro:        rgba(255, 255, 247, .92);
    --vidrio-claro-fuerte: rgba(255, 255, 247, .96);
  }
  .vidrio-oscuro{ background: rgba(40, 40, 48, .95) }
}
/* Quien pide menos transparencia en su sistema, la pierde entera. */
@media (prefers-reduced-transparency: reduce){
  :root{
    --vidrio-claro:        rgba(255, 255, 247, .98);
    --vidrio-claro-fuerte: rgba(255, 255, 247, 1);
    /* El token tambien, no solo la clase: hay superficies que usan
       var(--vidrio-oscuro) sin llevar la clase .vidrio-oscuro. */
    --vidrio-oscuro:       rgba(40, 40, 48, 1);
    --filtro-vidrio:       none;
  }
  .vidrio-oscuro{ background: rgba(40, 40, 48, 1) }
  .vidrio, .vidrio-fuerte, .vidrio-oscuro{
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ---------------------------------------------------------------------
   BOTONES, ICONOS Y ETIQUETAS — aquí sí va el color, y sólido
   --------------------------------------------------------------------- */
.btn-solido{
  border: 2px solid #16161d; border-radius: 15px;
  box-shadow: var(--brillo-boton), var(--sombra-dura);
  font-weight: 900; color: #16161d;
}
.btn-rojo    { background: #ff5454 }
.btn-amarillo{ background: #ffdf2b }
.btn-verde   { background: #00c07a }
.btn-lila    { background: #8b97fd }
.btn-negro   { background: #16161d; color: #fffff7; box-shadow: var(--sombra-dura) }
/* El secundario es vidrio, no color. */
.btn-vidrio{
  background: var(--vidrio-claro); border: 2px solid #16161d; border-radius: 15px;
  box-shadow: var(--brillo-boton), var(--sombra-dura); font-weight: 900;
}

/* El cuadrito de icono: el módulo es transparente y el icono tiene
   color. Es lo que da vida sin ensuciar el vidrio. */
.icono-color{
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border: 2px solid #16161d; border-radius: 14px;
  box-shadow: var(--brillo-boton), 0 3px 0 #16161d;
  color: #16161d;
}
.icono-color .ico{ width: 24px; height: 24px }
.ic-rojo{background:#ff5454} .ic-amarillo{background:#ffdf2b} .ic-lila{background:#8b97fd}
.ic-verde{background:#00c07a} .ic-naranja{background:#ff9f40} .ic-malva{background:#b79bff}

/* Las etiquetas tipo «PARA NIÑOS…» o «LA INSPIRACIÓN». */
.etiqueta{
  display: inline-block; padding: 6px 13px; border-radius: 999px;
  border: 1.5px solid #16161d;
  font: 900 11.5px/1 var(--f-texto); letter-spacing: .09em; text-transform: uppercase;
  color: #16161d; box-shadow: 0 2px 0 #16161d;
}

/* ---------------------------------------------------------------------
   LAS FIGURAS DEL FONDO
   Círculos y cuadrados redondeados girados, de color sólido, que se
   salen por los bordes. Van en un contenedor marcado aria-hidden.
   --------------------------------------------------------------------- */
.figuras{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
.figuras > i{ position: absolute; display: block; border-radius: 50% }
.figuras > i.cuadro{ border-radius: 56px; rotate: 16deg }
.fig-rojo{background:#ff5454} .fig-amarillo{background:#ffdf2b} .fig-lila{background:#8b97fd}
.fig-verde{background:#00c07a} .fig-naranja{background:#ff9f40} .fig-malva{background:#b79bff}

/* Lo que va encima de las figuras necesita quedar por encima. */
.con-figuras{ position: relative }
.con-figuras > :not(.figuras){ position: relative; z-index: 1 }