/* ============================================================================
   VIDRIO · variante paralela de las pantallas de los celulares.
   Solo existe con ?pantallas=vidrio (vidrio.js pone html[data-pantallas]); sin
   el parámetro ninguna regla de aquí aplica y la página es la de siempre.
   Es una prueba para que Santiago escoja: la vigente son los chats sólidos.

   Cómo se compone sobre el cuadro:
   - La pantalla del cuadro es un blanco parejo (≈250 de 255, un poco cálido en
     la mesa): no trae nada que un vidrio pueda desenfocar. Así que el vidrio
     necesita su propio fondo: un tapiz azul y violeta que se pinta DENTRO de la
     pantalla, y los vidrios (burbujas, barra, estrellas, campo) flotan encima.
   - La pantalla se sigue MULTIPLICANDO sobre el cuadro, como la vigente: el
     tapiz toma la luz real de la pantalla del video y lo que se pase del borde
     cae en el marco negro, donde multiplicar no cambia nada.
   - El esmerilado NO usa backdrop-filter: dentro de una caja con matrix3d y
     mezcla, lo que ve el filtro depende del motor (y el iPhone es WebKit). Cada
     vidrio lleva una copia ya desenfocada del tapiz, alineada a su lugar con
     --vd-x/--vd-y (los mide vidrio.js), así se ve igual en cualquier motor.
   Todo va en em de la pantalla (su letra es el ancho entre 12): se acomoda a
   cada celular como la vigente, y el texto conserva su tamaño.
   ========================================================================== */

:root[data-pantallas="vidrio"] {
  --vd-tinta: #15113D;                        /* la letra sobre el vidrio claro */
  --vd-tinte-claro: rgba(250, 249, 255, 0.86); /* el vidrio blanco: quien escribe al celular */
  --vd-tinte-azul: rgba(34, 70, 236, 0.84);   /* el vidrio azul: el dueño del celular */
  --vd-tinte-hondo: rgba(20, 14, 80, 0.5);    /* el vidrio oscuro: la barra y las estrellas */

  /* El tapiz: dos esferas con borde de luz (azul arriba, violeta abajo) sobre
     un degradado de azul a violeta. Los bordes nítidos son a propósito: son lo
     que el vidrio desenfoca, y en esa diferencia se lee que es vidrio. Las
     medidas van en % de la pantalla (≈1:2.2): 62%×28% es un círculo. */
  --vd-fondo:
    radial-gradient(ellipse 36% 16% at 20% 8%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 62% 28% at 100% 21%, #B6CCFF 0%, #7899FF 36%, #4A6AF4 86%, #9DB8FF 93%, rgba(74, 106, 244, 0) 96.5%),
    radial-gradient(ellipse 74% 33% at 0% 91%, #E8D9FF 0%, #AB86FF 38%, #7244EA 86%, #BB9CFF 93%, rgba(114, 68, 234, 0) 96.5%),
    linear-gradient(172deg, #2E46E0 0%, #3A37CE 34%, #4A2DBF 66%, #381F95 100%);
  /* El mismo tapiz, desenfocado y un poco más luminoso: lo que se ve a través
     del vidrio. */
  --vd-escarcha:
    radial-gradient(ellipse 44% 22% at 20% 8%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 72% 33% at 100% 21%, #C3D4FF 0%, #8CA9FF 40%, rgba(90, 122, 248, 0.8) 70%, rgba(74, 106, 244, 0) 100%),
    radial-gradient(ellipse 84% 38% at 0% 91%, #EEE2FF 0%, #B999FF 40%, rgba(132, 88, 238, 0.75) 70%, rgba(114, 68, 234, 0) 100%),
    linear-gradient(172deg, #4659E6 0%, #4E4AD6 34%, #5B40CA 66%, #4833A8 100%);
}

/* --- la pantalla: el tapiz ----------------------------------------------------- */
:root[data-pantallas="vidrio"] .pantalla {
  background-color: #3B38CF;
  background-image: var(--vd-fondo);
  background-repeat: no-repeat;
  color: var(--vd-tinta);
}

/* --- los vidrios: esmerilado alineado, canto de luz y sombra --------------------
   La copia desenfocada del tapiz va del tamaño de la pantalla (--vd-W×--vd-H)
   y corrida a donde está la pieza; el tinte va encima, parejo. */
:root[data-pantallas="vidrio"] .chat-cabeza,
:root[data-pantallas="vidrio"] .msj,
:root[data-pantallas="vidrio"] .resena-estrellas,
:root[data-pantallas="vidrio"] .resena-campo {
  position: relative;
  isolation: isolate;
  --vd-tinte: var(--vd-tinte-claro);
  background-color: transparent;
  background-image: linear-gradient(var(--vd-tinte), var(--vd-tinte)), var(--vd-escarcha);
  background-size: var(--vd-W, 100%) var(--vd-H, 100%);
  background-position: calc(-1 * var(--vd-x, 0px)) calc(-1 * var(--vd-y, 0px));
  background-repeat: no-repeat;
}
/* El canto: un aro de luz de un par de píxeles del cuadro, fuerte arriba a la
   izquierda (de donde viene la luz), casi nada en los lados y otra vez claro
   abajo a la derecha, donde el vidrio devuelve la luz. */
:root[data-pantallas="vidrio"] .chat-cabeza::after,
:root[data-pantallas="vidrio"] .msj::after,
:root[data-pantallas="vidrio"] .resena-estrellas::after,
:root[data-pantallas="vidrio"] .resena-campo::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  padding: 0.085em;
  pointer-events: none;
  background: linear-gradient(152deg,
    rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 20%,
    rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.3) 78%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* El cuerpo del vidrio: luz arriba, un poco de color hondo abajo (el grosor) y
   el destello que cruza la burbuja cuando se asienta (--vd-brillo lo mueve
   vidrio.js con la misma entrada de la coreografía; en reposo queda fuera). */
:root[data-pantallas="vidrio"] .chat-cabeza::before,
:root[data-pantallas="vidrio"] .msj::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  --vd-b: var(--vd-brillo, 140%);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) calc(var(--vd-b) - 24%),
      rgba(255, 255, 255, 0.7) var(--vd-b), rgba(255, 255, 255, 0) calc(var(--vd-b) + 24%)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 46%);
  box-shadow: inset 0 -0.16em 0.4em rgba(76, 54, 200, 0.22);
}

/* --- los chats ------------------------------------------------------------------- */
:root[data-pantallas="vidrio"] .chat-cuerpo { background: transparent; }

/* La barra flota sobre el tapiz: vidrio oscuro (lo estructural pesa más). */
:root[data-pantallas="vidrio"] .chat-cabeza {
  --vd-tinte: var(--vd-tinte-hondo);
  margin: 0.5em 0.5em 0;
  height: 2.3em;
  padding: 0 0.9em 0 0.5em;
  border-radius: 1.15em;
  color: #fff;
  box-shadow: 0 0.28em 0.7em -0.22em rgba(12, 6, 58, 0.6);
}
:root[data-pantallas="vidrio"] .chat-titulo {
  font-weight: 600;
  letter-spacing: 0.012em;
  text-shadow: 0 0.04em 0.12em rgba(12, 6, 58, 0.45);
}
/* El avatar: una canica de vidrio azul y violeta con su reflejo. */
:root[data-pantallas="vidrio"] .chat-avatar {
  width: 1.4em; height: 1.4em;
  background: radial-gradient(circle at 34% 28%,
    #FFFFFF 0%, #DCE5FF 10%, #8EA6FF 30%, #5B6CFA 55%, #7440EE 82%, #4A23B6 100%);
  box-shadow:
    inset 0 0 0 0.06em rgba(255, 255, 255, 0.55),
    inset 0 -0.18em 0.3em rgba(40, 14, 120, 0.45),
    0 0.12em 0.3em rgba(10, 4, 50, 0.5);
}

/* Las burbujas: las mismas medidas de letra que la vigente; un poco más de
   peso y de aire, porque sobre vidrio la letra fina se lava. */
:root[data-pantallas="vidrio"] .msj {
  padding: 0.44em 0.7em 0.46em;
  border-radius: 1em;
  font-weight: 500;
  letter-spacing: 0.006em;
  color: var(--vd-tinta);
  box-shadow: 0 0.3em 0.75em -0.28em rgba(14, 8, 66, 0.6);
}
/* Quien escribe al celular: vidrio blanco. El dueño del celular (lo marca
   vidrio.js: la burbuja que va a la derecha): vidrio azul, letra blanca. */
/* La esquina de la cola, como en la vigente: del lado de quien habla. */
:root[data-pantallas="vidrio"] .msj:not(.vd-sale) { border-bottom-left-radius: 0.3em; }
:root[data-pantallas="vidrio"] .msj.vd-sale {
  border-bottom-right-radius: 0.3em;
  --vd-tinte: var(--vd-tinte-azul);
  color: #fff;
  text-shadow: 0 0.04em 0.1em rgba(10, 20, 90, 0.35);
}
:root[data-pantallas="vidrio"] .msj.vd-sale::before {
  box-shadow: inset 0 -0.16em 0.4em rgba(120, 90, 255, 0.35);
}

/* --- la reseña ------------------------------------------------------------------- */
/* La G sobre un disco de vidrio blanco. Todo en em para que el disco caiga
   justo detrás de la G sin medir nada: la pantalla mide 12 em de ancho. */
:root[data-pantallas="vidrio"] .resena-g {
  position: relative;
  width: 3.5em;
  margin: 3.35em auto 0;
}
:root[data-pantallas="vidrio"] .pantalla--resena::before {
  content: '';
  position: absolute; z-index: -1;
  left: 3.15em; top: 2.25em;               /* centro en (6, 5.1) em: el de la G */
  width: 5.7em; height: 5.7em;
  border-radius: 50%;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(var(--vd-tinte-claro), var(--vd-tinte-claro)),
    var(--vd-escarcha);
  background-size: 5.7em 5.7em, 5.7em 5.7em, var(--vd-W, 100%) var(--vd-H, 100%);
  background-position: 0 0, 0 0, -3.15em -2.25em;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0.1em 0.12em rgba(255, 255, 255, 0.9),
    inset 0 -0.2em 0.5em rgba(76, 54, 200, 0.28),
    0 0.45em 1.1em -0.3em rgba(12, 6, 58, 0.62);
}
/* Las estrellas en una cápsula de vidrio oscuro: las vacías son vidrio, las
   llenas conservan el amarillo de Google, que es lo que se lee como «cinco
   estrellas». */
:root[data-pantallas="vidrio"] .resena-estrellas {
  --vd-tinte: var(--vd-tinte-hondo);
  width: max-content;
  margin: 2em auto 0;
  padding: 0.46em 0.64em;
  gap: 0.24em;
  border-radius: 99em;
  box-shadow: 0 0.3em 0.8em -0.25em rgba(12, 6, 58, 0.6);
}
:root[data-pantallas="vidrio"] .resena-estrellas svg {
  width: 1.66em;
  fill: rgba(255, 255, 255, 0.2);
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 0.9px;
  stroke-linejoin: round;
}
:root[data-pantallas="vidrio"] .estrella-llena {
  fill: url(#vd-oro) #FBBC04;
  stroke: rgba(255, 244, 205, 0.95);
}
/* El campo de la reseña: vidrio claro hundido (la sombra va por dentro). */
:root[data-pantallas="vidrio"] .resena-campo {
  width: 78%; height: 19%;
  margin: 1.8em auto 0;
  border: 0;
  border-radius: 0.95em;
  box-shadow:
    inset 0 0.16em 0.35em rgba(40, 24, 140, 0.35),
    0 0.06em 0 rgba(255, 255, 255, 0.35);
}

/* --- quien pide menos transparencia o más contraste: vidrio casi sólido ----------- */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root[data-pantallas="vidrio"] {
    --vd-tinte-claro: rgba(250, 249, 255, 0.96);
    --vd-tinte-azul: rgba(30, 62, 220, 0.97);
    --vd-tinte-hondo: rgba(18, 12, 70, 0.9);
  }
}