/* Cadbury — la app del celular de Salvi.
   Vidrio al estilo iOS 26 hecho con lo que SI anda en Safari de iPhone:
   backdrop-filter blur+saturate, borde especular con mascara, sombras suaves y
   un orbe vivo detras. Nada de feDisplacementMap (Safari no lo aplica a
   backdrop-filter). El blur va solo en las piezas flotantes (barra, redactor,
   hoja), no en cada mensaje: con 50 burbujas desenfocando, el iPhone tironea. */

:root {
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --alto: 100dvh;
  --arriba: 0px;
  --resorte: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --suave: cubic-bezier(.2, .8, .2, 1);

  /* claro */
  --fondo: #e9eff7;
  --fondo-2: #dbe6f3;
  --m1: rgba(96, 186, 255, .55);
  --m2: rgba(140, 170, 255, .45);
  --m3: rgba(120, 220, 240, .35);
  --texto: #0b1424;
  --texto-2: rgba(11, 20, 36, .62);
  --texto-3: rgba(11, 20, 36, .42);
  --vidrio: rgba(255, 255, 255, .58);
  --vidrio-suave: rgba(255, 255, 255, .5);
  --vidrio-borde: rgba(255, 255, 255, .85);
  --vidrio-brillo: rgba(255, 255, 255, .95);
  --sombra: 0 10px 30px rgba(30, 60, 110, .14), 0 1px 2px rgba(30, 60, 110, .08);
  --tarjeta: rgba(255, 255, 255, .72);
  --tarjeta-borde: rgba(255, 255, 255, .9);
  --mio: linear-gradient(180deg, #3b8cff, #1f6fe8);
  --mio-texto: #fff;
  --acento: #1a73e8;
  --verde: #22a55b;
  --ambar: #d98a00;
  --rojo: #e5484d;
  --orbe-luz: #7fd6ff;
  --orbe-anillo: rgba(40, 140, 230, .75);
  --campo: rgba(255, 255, 255, .7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #050a14;
    --fondo-2: #081427;
    --m1: rgba(40, 140, 255, .42);
    --m2: rgba(70, 90, 220, .30);
    --m3: rgba(30, 190, 230, .22);
    --texto: #eef3fb;
    --texto-2: rgba(238, 243, 251, .64);
    --texto-3: rgba(238, 243, 251, .4);
    --vidrio: rgba(255, 255, 255, .09);
    --vidrio-suave: rgba(255, 255, 255, .07);
    --vidrio-borde: rgba(255, 255, 255, .16);
    --vidrio-brillo: rgba(255, 255, 255, .42);
    --sombra: 0 12px 34px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --tarjeta: rgba(22, 32, 52, .62);
    --tarjeta-borde: rgba(255, 255, 255, .1);
    --mio: linear-gradient(180deg, #2f7ff5, #1b5fd0);
    --acento: #5aa9ff;
    --verde: #3ccf7a;
    --ambar: #f2b33d;
    --rojo: #ff6b6b;
    --orbe-luz: #9fe3ff;
    --orbe-anillo: rgba(90, 190, 255, .8);
    --campo: rgba(255, 255, 255, .08);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
html { background: var(--fondo); }
body {
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ el fondo vivo */
.fondo {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, var(--fondo-2), var(--fondo) 70%);
}
.mancha {
  position: absolute; border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.m1 { width: 70vmax; height: 70vmax; left: -20vmax; top: -18vmax; background: radial-gradient(circle, var(--m1), transparent 65%); animation: flotar1 26s ease-in-out infinite alternate; }
.m2 { width: 60vmax; height: 60vmax; right: -25vmax; top: 25vh; background: radial-gradient(circle, var(--m2), transparent 65%); animation: flotar2 32s ease-in-out infinite alternate; }
.m3 { width: 55vmax; height: 55vmax; left: -10vmax; bottom: -25vmax; background: radial-gradient(circle, var(--m3), transparent 65%); animation: flotar3 38s ease-in-out infinite alternate; }
@keyframes flotar1 { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes flotar2 { to { transform: translate(-16vmax, -8vmax) scale(.92); } }
@keyframes flotar3 { to { transform: translate(12vmax, -12vmax) scale(1.08); } }

/* ------------------------------------------------------------------ vidrio */
.vidrio, .vidrio-suave {
  position: relative;
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  backdrop-filter: blur(28px) saturate(185%);
  box-shadow: var(--sombra), inset 0 1px 0 var(--vidrio-brillo), inset 0 -1px 0 rgba(255, 255, 255, .05);
}
.vidrio-suave { background: var(--vidrio-suave); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
/* El borde especular: luz arriba a la izquierda que se apaga y vuelve abajo. */
.vidrio::before, .vidrio-suave::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--vidrio-brillo), var(--vidrio-borde) 22%, rgba(255, 255, 255, 0) 52%, var(--vidrio-borde) 88%);
  -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);
}

/* --------------------------------------------------------------------- app */
.app {
  position: fixed; left: 0; right: 0; top: var(--arriba); height: var(--alto);
  z-index: 1; display: flex; flex-direction: column;
}
.pantalla { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* -------------------------------------------------------------------- orbe */
.orbe { position: relative; flex: none; }
.orbe .nucleo, .orbe .anillo { position: absolute; border-radius: 50%; inset: 0; margin: auto; }
.orbe .nucleo {
  width: 50%; height: 50%;
  background: radial-gradient(circle, #fff 0%, var(--orbe-luz) 16%, rgba(90, 190, 255, .38) 36%, rgba(60, 160, 255, .12) 52%, rgba(60, 160, 255, 0) 70%);
  animation: respirar 4.2s ease-in-out infinite;
}
.orbe .anillo { border: 2px solid var(--orbe-anillo); }
.orbe .a1 { width: 74%; height: 74%; border-right-color: transparent; transform: rotate(-30deg); animation: girar 14s linear infinite; }
.orbe .a2 { width: 52%; height: 52%; border-width: 1.5px; border-left-color: transparent; border-top-color: transparent; opacity: .8; animation: girar 9s linear infinite reverse; }
.orbe.grande { width: 132px; height: 132px; }
.orbe.chico { width: 34px; height: 34px; }
.orbe.chico .a1 { border-width: 1.5px; }
.orbe.chico .nucleo { width: 64%; height: 64%; }
@keyframes girar { to { transform: rotate(330deg); } }
@keyframes respirar { 50% { transform: scale(1.14); opacity: .85; } }
.pensando-orbe .orbe .nucleo { animation-duration: 1.2s; }
.desconectado .orbe.chico { filter: grayscale(1); opacity: .55; }
.desconectado .orbe.chico * { animation-play-state: paused; }

/* ------------------------------------------------------------------ entrar */
.entrar { justify-content: center; padding: calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 24px); overflow-y: auto; }
.entrar-centro { width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.titulo-grande { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; margin: 22px 0 6px; }
.sub { margin: 0 0 22px; color: var(--texto-2); font-size: 16px; line-height: 1.4; }
.tarjeta { width: 100%; border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo span { font-size: 13px; font-weight: 600; color: var(--texto-2); padding-left: 4px; }
.campo input {
  font: inherit; font-size: 17px; color: var(--texto);
  background: var(--campo); border: 1px solid var(--vidrio-borde); border-radius: 14px;
  padding: 13px 14px; outline: none; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.campo input:focus { border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); }
.campo input.codigo { font-size: 28px; letter-spacing: .38em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; padding-left: calc(14px + .38em); }
.boton-principal {
  background: var(--mio); color: #fff; font-weight: 600; font-size: 17px;
  border-radius: 14px; padding: 14px; box-shadow: 0 6px 18px rgba(30, 110, 240, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .35s var(--resorte), opacity .2s;
}
.boton-principal:active { transform: scale(.97); }
.boton-principal:disabled { opacity: .55; }
.boton-texto { color: var(--acento); font-size: 15px; padding: 4px; align-self: center; }
.error { color: var(--rojo); min-height: 20px; font-size: 14px; margin: 14px 0 0; }
.pista { color: var(--texto-2); font-size: 14px; line-height: 1.4; margin: 6px 4px 0; max-width: 340px; }
.pista strong { color: var(--texto); font-weight: 600; }

/* ---------------------------------------------------------- barra de arriba */
.barra-arriba {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0;
  padding: calc(env(safe-area-inset-top) + 8px) 14px 8px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  pointer-events: none;
}
.barra-arriba > * { pointer-events: auto; }
.capsula { display: flex; align-items: center; gap: 10px; padding: 7px 18px 7px 8px; border-radius: 999px; min-width: 0; }
.capsula-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.capsula-texto strong { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.estado { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); flex: none; transition: background .3s; }
.conectado .estado .punto { background: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 18%, transparent); }
.desconectado .estado .punto { background: var(--ambar); }
.sin-red .estado .punto { background: var(--rojo); }
.boton-redondo {
  position: absolute; right: 14px; top: calc(env(safe-area-inset-top) + 8px);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  transition: transform .4s var(--resorte);
}
.boton-redondo:active { transform: scale(.9); }
.boton-redondo svg circle { fill: currentColor; stroke: none; }

.aviso {
  position: absolute; z-index: 4; left: 14px; right: 14px; top: calc(env(safe-area-inset-top) + 66px);
  border-radius: 20px; padding: 11px 14px; display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.35; animation: aparecer .5s var(--resorte);
}
.aviso .punto { margin-top: 6px; background: var(--ambar); }
.aviso.sin-red .punto { background: var(--rojo); }
.aviso strong { display: block; font-weight: 600; }
.aviso span { color: var(--texto-2); }

/* ---------------------------------------------------------------- mensajes */
.mensajes {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top) + 76px) 14px 16px;
  scroll-padding-bottom: 16px;
  /* Lo que sube se desvanece debajo de la capsula, como en iOS. */
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(env(safe-area-inset-top) + 28px), #000 calc(env(safe-area-inset-top) + 86px));
  mask-image: linear-gradient(to bottom, transparent calc(env(safe-area-inset-top) + 28px), #000 calc(env(safe-area-inset-top) + 86px));
}
.con-aviso .mensajes { padding-top: calc(env(safe-area-inset-top) + 140px); }
#lista { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }

.vacio { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px 6px 30px; }
.vacio .titulo-grande { margin-top: 26px; }
.sugerencias { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 460px; }
.sugerencia { border-radius: 20px; padding: 14px; font-size: 14.5px; line-height: 1.3; text-align: left; min-height: 64px; transition: transform .4s var(--resorte); }
.sugerencia:active { transform: scale(.96); }

.msj { display: flex; flex-direction: column; animation: entrar-msj .55s var(--resorte) both; }
@keyframes entrar-msj { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.msj.mio { align-items: flex-end; }
.burbuja {
  max-width: 82%; padding: 10px 14px; border-radius: 22px; font-size: 16.5px; line-height: 1.42;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.mio .burbuja { background: var(--mio); color: var(--mio-texto); border-bottom-right-radius: 8px; box-shadow: 0 4px 14px rgba(30, 100, 230, .22), inset 0 1px 0 rgba(255, 255, 255, .28); }
.msj.suyo .burbuja {
  max-width: 92%; white-space: normal;
  background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); border-bottom-left-radius: 8px;
  box-shadow: 0 4px 16px rgba(20, 40, 80, .08), inset 0 1px 0 var(--vidrio-brillo);
}
.burbuja p { margin: 0 0 .55em; }
.burbuja p:last-child, .burbuja ul:last-child, .burbuja ol:last-child { margin-bottom: 0; }
.burbuja ul, .burbuja ol { margin: .2em 0 .55em; padding-left: 1.25em; }
.burbuja li { margin: .18em 0; }
.burbuja strong { font-weight: 650; }
.burbuja code { font: 14px ui-monospace, "SF Mono", Menlo, monospace; background: color-mix(in srgb, var(--texto) 8%, transparent); padding: 1px 5px; border-radius: 6px; }
.burbuja a { color: var(--acento); text-decoration: none; }
.mio .burbuja a { color: #fff; text-decoration: underline; }
.burbuja .h { font-weight: 650; font-size: 17px; margin: .3em 0 .3em; }

.pie { font-size: 12px; color: var(--texto-3); margin: 4px 8px 0; display: flex; gap: 6px; align-items: center; }
.pie.alerta { color: var(--ambar); }
.pie.mal { color: var(--rojo); }

.avance { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-2); margin: 2px 2px 8px; }
.avance .giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--acento) 30%, transparent); border-top-color: var(--acento); animation: girar-giro .8s linear infinite; flex: none; }
@keyframes girar-giro { to { transform: rotate(360deg); } }
.avance span {
  background: linear-gradient(90deg, var(--texto-2) 0%, var(--texto) 45%, var(--texto-2) 90%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillo 2.2s linear infinite;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw;
}
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.cursor { display: inline-block; width: 8px; height: 1.05em; vertical-align: -2px; margin-left: 2px; border-radius: 2px; background: var(--acento); animation: titilar 1s steps(2) infinite; }
@keyframes titilar { 50% { opacity: 0; } }
.puntos { display: inline-flex; gap: 4px; padding: 6px 2px; }
.puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); animation: saltar 1.2s infinite ease-in-out; }
.puntos i:nth-child(2) { animation-delay: .15s; }
.puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes saltar { 30% { transform: translateY(-5px); background: var(--texto-2); } }

.separador { align-self: center; font-size: 12.5px; color: var(--texto-2); padding: 6px 14px; border-radius: 999px; margin: 8px 0; }

/* adjuntos dentro de los mensajes */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; max-width: 82%; margin-bottom: 4px; width: 260px; }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block; background: var(--vidrio); }
.fotos.una { grid-template-columns: 1fr; width: 220px; }
.fotos.una img { aspect-ratio: auto; max-height: 300px; }
.archivo { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); font-size: 14.5px; margin-bottom: 4px; max-width: 82%; }
.archivo svg { width: 18px; height: 18px; flex: none; }
.archivo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-voz { display: inline-flex; align-items: center; gap: 8px; }
.nota-voz svg { width: 18px; height: 18px; }
.nota-voz .barritas { display: inline-flex; gap: 2px; align-items: center; height: 16px; }
.nota-voz .barritas i { width: 2.5px; border-radius: 2px; background: currentColor; opacity: .8; }

/* ------------------------------------------------------------- redactor */
.barra-abajo { position: relative; z-index: 5; padding: 6px 12px calc(env(safe-area-inset-bottom) + 8px); }
.teclado .barra-abajo { padding-bottom: 8px; }
.oferta {
  max-width: 720px; margin: 0 auto 8px; border-radius: 22px; padding: 12px 12px 10px 16px;
  font-size: 15px; line-height: 1.35; display: flex; flex-direction: column; gap: 8px;
  animation: aparecer .5s var(--resorte);
}
.oferta-botones { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.boton-chico {
  background: var(--mio); color: #fff; font-weight: 600; font-size: 15px; border-radius: 999px; padding: 8px 16px;
  box-shadow: 0 4px 12px rgba(30, 110, 240, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .35s var(--resorte);
}
.boton-chico:active { transform: scale(.95); }
.anteriores { text-align: center; font-size: 13px; color: var(--texto-3); padding: 4px 0 12px; }
.redactor { max-width: 720px; margin: 0 auto; border-radius: 28px; padding: 6px; }
.fila-redactor { display: flex; align-items: flex-end; gap: 4px; }
.boton-icono { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--texto-2); flex: none; transition: transform .4s var(--resorte), background .2s; }
.boton-icono:active { transform: scale(.88); background: var(--vidrio); }
#campo {
  flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--texto);
  font: inherit; font-size: 17px; line-height: 1.35; padding: 10px 4px; max-height: 40vh;
}
#campo::placeholder { color: var(--texto-3); }
.boton-enviar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--mio); color: #fff; box-shadow: 0 4px 12px rgba(30, 110, 240, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: brotar .45s var(--resorte);
  transition: transform .4s var(--resorte), opacity .2s;
}
.boton-enviar:active { transform: scale(.88); }
.boton-enviar:disabled { opacity: .5; }
.boton-enviar svg { stroke-width: 2.4; }
@keyframes brotar { from { transform: scale(.4); opacity: 0; } }

.adjuntos-previa { display: flex; gap: 8px; overflow-x: auto; padding: 6px 6px 8px; }
.ficha { position: relative; flex: none; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); display: grid; place-items: center; font-size: 11px; text-align: center; padding: 4px; color: var(--texto-2); animation: brotar .45s var(--resorte); }
.ficha img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ficha .quitar { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; z-index: 1; }
.ficha .quitar svg { width: 12px; height: 12px; stroke-width: 2.6; }
.ficha.subiendo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.ficha.subiendo::before { content: ""; position: absolute; z-index: 1; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: girar-giro .8s linear infinite; }
.ficha.fallo { border-color: var(--rojo); }

.grabando { align-items: center; }
.onda { flex: 1; height: 42px; display: flex; align-items: center; gap: 3px; overflow: hidden; padding: 0 6px; }
.onda i { flex: none; width: 3px; border-radius: 3px; background: var(--rojo); height: 4px; transition: height .08s; }
.reloj { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--texto-2); padding: 0 8px; }
.reloj::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); margin-right: 7px; vertical-align: 1px; animation: titilar 1s steps(2) infinite; }

/* ----------------------------------------------------------------- hoja */
.velo { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .28); animation: fundir .3s; }
@keyframes fundir { from { opacity: 0; } }
.hoja {
  position: fixed; z-index: 21; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px);
  max-width: 520px; margin: 0 auto; border-radius: 30px; padding: 8px 8px 8px;
  animation: subir-hoja .55s var(--resorte);
}
@keyframes subir-hoja { from { transform: translateY(110%); } }
.tirador { width: 38px; height: 5px; border-radius: 3px; background: var(--texto-3); margin: 4px auto 8px; }
.opcion { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 14px; border-radius: 20px; transition: background .2s; }
.opcion:active { background: var(--vidrio); }
.opcion svg { color: var(--acento); flex: none; }
.opcion span { display: flex; flex-direction: column; }
.opcion strong { font-weight: 600; font-size: 16.5px; }
.opcion small { color: var(--texto-2); font-size: 13px; margin-top: 2px; }
.opcion.cancelar { justify-content: center; font-weight: 600; color: var(--acento); margin-top: 4px; }

.visor { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .85); display: grid; place-items: center; animation: fundir .25s; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.visor img { max-width: 100%; max-height: 100%; object-fit: contain; }

.demo-marca { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 76px); font-size: 11.5px; color: var(--texto-2); padding: 4px 10px; border-radius: 999px; pointer-events: none; }

@media (min-width: 760px) {
  .burbuja { max-width: 70%; }
  .orbe.grande { width: 156px; height: 156px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Sin backdrop-filter (navegadores viejos): vidrio opaco, se sigue leyendo bien. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio, .vidrio-suave { background: var(--tarjeta); }
}