/* ==========================================================================
   NOCTURNA · la piel de la aplicación (dirección A del mockup A/B)

   Elegida por el dueño el 19 de octubre de 2026 sobre `docs/maqueta-ab.html`.
   La referencia visual es esa maqueta: si algo de aquí y de allí no coincide,
   manda la maqueta.

   POR QUÉ UNA HOJA APARTE Y NO REESCRIBIR LAS OTRAS CUATRO.
   `app.css`, `cascara.css`, `movil.css` y `app-ui.css` ya pintan todo a partir
   de tokens. Esta hoja redefine esos tokens y retoca solo lo que un token no
   alcanza: el vidrio, el brillo y la barra flotante. Así la web de venta, que
   no carga esta hoja, sigue igual, y quitar la dirección A es quitar una línea
   de `_cascara.html.twig`.

   VA LA ÚLTIMA, DETRÁS DE `app-ui.css`. Las reglas de aquí tienen la misma
   especificidad que las que corrigen y ganan por orden. Cargada antes, no
   corregiría nada.

   SIEMPRE OSCURA. No mira `prefers-color-scheme`. La aplicación tiene una sola
   cara, la de la maqueta, se use de día o de noche. El bloque oscuro de
   `app.css` queda debajo y pierde por orden, igual que el claro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · FUENTES PROPIAS
   La CSP es `font-src 'self'`: nada de Google Fonts en vivo. Son las variables
   latinas de Bricolage Grotesque y Figtree (licencia OFL), servidas desde aquí.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('/static/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight:500 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree';
  src:url('/static/fonts/figtree.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------------------
   2 · TOKENS
   Los mismos nombres que `app.css`, con los valores de la maqueta. El morado
   de la marca pasa a rosa empolvado: en fondo casi negro el morado se apaga y
   el rosa es el segundo color de la nebulosa.
   -------------------------------------------------------------------------- */
:root{
  color-scheme:dark;

  --bg:#0B1513; --bg-warm:#0E1B18; --surface:#13221F; --surface-2:#0F1C19;
  --footer-bg:#08100E; --notice-bg:rgba(255,139,123,.08);

  /* Tinta. Ratios sobre --bg: ink 16,1:1 · ink-soft 8,6:1 · teal-ink 11,4:1. */
  --ink:#EAF2EF; --ink-soft:#A3B8B2;
  --teal-ink:#62E3CB; --teal-strong:#86EFDB;
  --purple-ink:#F7BFCC; --coral-ink:#FF9B8E; --coral-strong:#FFB0A5;

  --ui-teal:#62E3CB; --ui-purple:#F3A6B8; --ui-coral:#FF8B7B;
  --nc-ambar:#F6C66A; --nc-rosa:#F3A6B8; --nc-gris:#82938E;

  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.22);
  --dot:rgba(98,227,203,.24);
  --tint-teal:rgba(98,227,203,.12); --tint-teal-2:rgba(98,227,203,.18);
  --tint-purple:rgba(243,166,184,.13); --tint-coral:rgba(255,139,123,.13);
  --notice-line:rgba(255,139,123,.32);

  --btn-fill:#62E3CB; --btn-fill-hi:#86EFDB; --btn-ink:#032720;

  --panel:#0F201C; --panel-2:#132824; --panel-ink:#EAF2EF;
  --panel-soft:rgba(234,242,239,.80); --panel-line:rgba(98,227,203,.22);
  --panel-teal:#62E3CB; --panel-purple:#F3A6B8; --panel-coral:#FF9B8E;

  --step-1:#62E3CB; --step-2:#F3A6B8; --step-3:#FF8B7B; --step-ink:#032720;

  --logo-inner:#0B1513; --logo-dot:#EAF2EF; --focus:#F3A6B8;
  --head-bg:rgba(11,21,19,.62);

  --sh-s:0 18px 40px -24px rgba(0,0,0,.9);
  --sh-m:0 24px 50px -24px rgba(0,0,0,.95);
  --sh-l:0 34px 76px -28px rgba(0,0,0,1);

  --font:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --nc-titular:'Bricolage Grotesque','Figtree',system-ui,sans-serif;

  /* El vidrio, en un sitio: lo comparten tarjetas, lista, diálogo y barra. */
  --nc-vidrio:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  --nc-vidrio-borde:rgba(255,255,255,.11);
  --nc-vidrio-sombra:inset 0 1px 0 rgba(255,255,255,.14),0 22px 44px -26px rgba(0,0,0,.95);
}

/* --------------------------------------------------------------------------
   3 · EL FONDO
   Luz que respira detrás de todo, fija mientras se desplaza: es lo que da la
   sensación de profundidad. Solo se anima `transform` —nada de `filter`
   animado— para que un Android modesto no lo pague en batería.
   -------------------------------------------------------------------------- */
html{background:var(--bg)}
body{background:transparent;color:var(--ink);font-family:var(--font)}

body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-1}
body::before{
  inset:-25%;
  background:
    radial-gradient(32% 24% at 22% 18%,rgba(98,227,203,.30),transparent 70%),
    radial-gradient(28% 22% at 84% 40%,rgba(243,166,184,.22),transparent 70%),
    radial-gradient(40% 30% at 40% 92%,rgba(98,227,203,.15),transparent 70%),
    radial-gradient(22% 18% at 60% 60%,rgba(150,120,255,.10),transparent 70%);
  animation:nc-nebulosa 18s ease-in-out infinite alternate;
}
/* Grano fino encima de la luz: sin él los degradados se ven de plástico. */
body::after{
  inset:0;opacity:.6;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes nc-nebulosa{to{transform:translate3d(5%,-4%,0) rotate(9deg) scale(1.08)}}

/* Los blobs de la portada eran manchas de color sobre crema. Aquí la luz ya la
   pone el fondo y encima quedarían como pegatinas. */
.pantalla .dcl{display:none}

/* --------------------------------------------------------------------------
   4 · TIPOGRAFÍA
   -------------------------------------------------------------------------- */
.pantalla h1,.pantalla h2,.dialogo-titulo,.cabecera-app-titulo,.inicio-h1{font-family:var(--nc-titular)}
.pantalla h1,.inicio-h1{
  letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff,#CFE5DF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pantalla .eyebrow{color:var(--teal-ink);text-shadow:0 0 14px rgba(98,227,203,.45)}
.pantalla a:not(.btn){color:var(--teal-ink)}

/* --------------------------------------------------------------------------
   5 · CABECERA
   -------------------------------------------------------------------------- */
.cabecera-app{
  background:var(--head-bg);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.cabecera-app-marca img{filter:drop-shadow(0 0 10px rgba(98,227,203,.35))}
.cabecera-app-in > .cabecera-app-atras{color:var(--ink)}
.cabecera-app-nav-dest[aria-current="page"]{color:var(--teal-ink);background:var(--tint-teal);box-shadow:0 0 18px -6px rgba(98,227,203,.8)}

/* --------------------------------------------------------------------------
   6 · BARRA INFERIOR FLOTANTE
   Deja de ir pegada al canto: es un dock de vidrio a 10px de los bordes. Eso
   suma 10px al hueco que se reserva abajo, y se suma en el mismo token del que
   salen el `padding-bottom` del body y el `scroll-padding`, para que la última
   línea de cada pantalla no quede debajo del dock. Solo por debajo de 820px:
   por encima la barra no existe y el hueco tiene que seguir valiendo 0.
   -------------------------------------------------------------------------- */
@media (max-width:819px){
  :root{
    --nav-app-pad-b:6px;
    --nav-app-hueco:calc(var(--nav-app-h) + var(--nav-app-pad-b) + var(--nav-app-saliente)
                       + 10px + env(safe-area-inset-bottom) + 6px);
  }
  .nav-app{
    left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
    border-radius:30px;
    background:rgba(16,30,27,.74);
    -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 40px -12px rgba(0,0,0,.85);
  }
}
.nav-app-dest,.nav-app-txt{color:var(--ink-soft)}
.nav-app-dest[aria-current="page"],
.nav-app-dest[aria-current="page"] .nav-app-txt{color:var(--teal-ink)}
.nav-app-dest[aria-current="page"] .nav-app-icono{filter:drop-shadow(0 0 7px rgba(98,227,203,.9))}

/* «Crear»: un orbe con luz propia que respira. */
.barra-app-circulo{
  color:#032720;
  background:radial-gradient(circle at 35% 28%,#D5FFF6,#62E3CB 45%,#F3A6B8 125%);
  box-shadow:0 0 0 6px rgba(98,227,203,.12),0 0 30px rgba(98,227,203,.7);
  animation:nc-respira 3.2s ease-in-out infinite;
}
@keyframes nc-respira{50%{box-shadow:0 0 0 9px rgba(98,227,203,.08),0 0 42px rgba(98,227,203,.85)}}

/* --------------------------------------------------------------------------
   7 · VIDRIO: tarjetas, lista, vacío y diálogo
   -------------------------------------------------------------------------- */
.tarjeta,.tarjeta-campo,.estado-vacio,.lista-acuerdos a,.dialogo{
  background:var(--nc-vidrio);
  border:1px solid var(--nc-vidrio-borde);
  box-shadow:var(--nc-vidrio-sombra);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
/* El diálogo tapa la pantalla para pedir una decisión: más opaco que una
   tarjeta, o el texto de debajo se lee a través. */
.dialogo{background:rgba(17,31,28,.96)}
.dialogo::backdrop{background:rgba(3,8,7,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tarjeta-campo:focus-within{border-color:rgba(98,227,203,.35);box-shadow:var(--nc-vidrio-sombra),0 0 30px -12px rgba(98,227,203,.6)}
.tarjeta-campo-alerta{
  background:linear-gradient(180deg,rgba(255,139,123,.10),rgba(255,139,123,.03));
  border-color:rgba(255,139,123,.26);
}
.tarjeta-campo-alerta .campo input[type=text]{background:rgba(0,0,0,.25)}
.lista-acuerdos a:hover{border-color:rgba(98,227,203,.45);box-shadow:var(--nc-vidrio-sombra),0 24px 50px -24px rgba(98,227,203,.45)}
.lista-acuerdos .fecha{font-family:var(--nc-titular);font-weight:700;font-size:1.08rem}

/* Insignias de icono: brillan con su propio color. */
.badge.t{background:rgba(98,227,203,.13);box-shadow:inset 0 0 0 1px rgba(98,227,203,.3),0 0 22px -6px rgba(98,227,203,.8)}
.badge.p{background:rgba(243,166,184,.13);box-shadow:inset 0 0 0 1px rgba(243,166,184,.3),0 0 22px -6px rgba(243,166,184,.8)}
.badge.c{background:rgba(255,139,123,.13);box-shadow:inset 0 0 0 1px rgba(255,139,123,.3),0 0 22px -6px rgba(255,139,123,.8)}

/* El panel de «antes de pulsar» ya era oscuro: ahora es ámbar de aviso. */
.panel-cifrado{
  background:linear-gradient(180deg,rgba(246,198,106,.10),rgba(246,198,106,.03));
  border:1px solid rgba(246,198,106,.24);box-shadow:var(--nc-vidrio-sombra);
}
.pantalla .panel-cifrado h2{color:#F7DFAE;-webkit-text-fill-color:#F7DFAE}
.panel-cifrado .kicker{color:var(--nc-ambar)}

/* --------------------------------------------------------------------------
   7b · LAS DOS PIEZAS CON FORMA PROPIA DE LA MAQUETA
   -------------------------------------------------------------------------- */

/* Inicio: la tarjeta grande para crear un acuerdo. Toda ella es el enlace. */
.tarjeta-hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);
  padding:24px;margin-bottom:var(--sp-6);border-radius:30px;
  text-decoration:none;color:var(--ink);
  background:linear-gradient(150deg,rgba(98,227,203,.26),rgba(243,166,184,.15) 58%,rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 60px -30px rgba(98,227,203,.7);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transition:transform .2s cubic-bezier(.2,.8,.3,1);
}
.tarjeta-hero::before{
  content:"";position:absolute;z-index:-1;width:220px;height:220px;right:-70px;top:-90px;border-radius:50%;
  background:radial-gradient(circle,rgba(243,166,184,.6),transparent 65%);
}
.tarjeta-hero:active{transform:scale(.985)}
.tarjeta-hero:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.pantalla a.tarjeta-hero{color:var(--ink)}
.tarjeta-hero-titulo{font:700 1.75rem/1.08 var(--nc-titular);letter-spacing:-.02em}
.tarjeta-hero-texto{color:var(--ink-soft);margin-bottom:var(--sp-3);max-width:34ch;line-height:1.5}
.pantalla h2.inicio-sub{font-size:1.2rem}

/* El acuerdo como «pase»: título, estado y fechas en una pieza con luz propia,
   un poco inclinada y con un reflejo que la cruza. */
.pase{
  position:relative;overflow:hidden;isolation:isolate;
  padding:22px;margin-bottom:var(--sp-5);border-radius:30px;
  background:linear-gradient(155deg,rgba(98,227,203,.3),rgba(23,60,54,.55) 45%,rgba(243,166,184,.18));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 40px 70px -30px rgba(98,227,203,.6);
  transform:perspective(900px) rotateX(5deg);transform-origin:50% 100%;
}
.pase::after{
  content:"";position:absolute;inset:-60%;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  animation:nc-barrido 5.5s ease-in-out infinite;
}
@keyframes nc-barrido{from{transform:translateX(-40%)}60%,to{transform:translateX(40%)}}
.pase .cabecera-pantalla{margin-bottom:var(--sp-3)}
.pase .meta{margin-bottom:0}
.pase .meta dt{color:var(--ink-soft);font-weight:600}
.pase .meta dd{margin:0;color:var(--ink);font-weight:700}

/* Aceptar, en la pantalla del invitado: un riel con un círculo que se desliza
   (`ui/desliza.js`). `touch-action:pan-y` deja desplazar la pantalla en
   vertical y se queda el gesto horizontal para el círculo. */
.btn.desliza{
  position:relative;overflow:hidden;isolation:isolate;
  width:100%;min-height:64px;padding:0 22px 0 70px;
  color:var(--ink);background:rgba(98,227,203,.08);
  border:1px solid rgba(98,227,203,.45);box-shadow:none;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;
}
.btn.desliza:hover{background:rgba(98,227,203,.12);border-color:rgba(98,227,203,.6);box-shadow:none}
.btn.desliza:active{transform:none;cursor:grabbing}
.btn.desliza:disabled{cursor:progress}
.btn.desliza::after{background:linear-gradient(90deg,transparent 20%,rgba(98,227,203,.28),transparent 80%)}
.desliza-relleno{
  position:absolute;inset:0;z-index:-1;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(98,227,203,.38),rgba(98,227,203,.14));
}
.desliza-pomo{
  position:absolute;left:5px;top:50%;width:54px;height:54px;margin-top:-27px;
  border-radius:50%;display:grid;place-items:center;color:#032720;
  background:radial-gradient(circle at 35% 30%,#C8FFF3,#62E3CB 50%,#2A9E8B);
  box-shadow:0 0 22px rgba(98,227,203,.8);
  animation:nc-empuja 2.6s ease-in-out 1.2s infinite;
}
.desliza-pomo svg{width:22px;height:22px}
@keyframes nc-empuja{0%,70%,100%{transform:none}82%{transform:translateX(16px)}}
.desliza-pista{text-align:center;margin:var(--sp-2) 0 0;width:100%}
.desliza-pista-viva{color:var(--teal-ink);animation:nc-pista .9s ease-out}
@keyframes nc-pista{from{text-shadow:0 0 16px rgba(98,227,203,.9)}}

/* --------------------------------------------------------------------------
   8 · ESTADOS: un orbe que brilla delante del texto
   -------------------------------------------------------------------------- */
.estado-pill{
  display:inline-flex;align-items:center;gap:.55em;
  text-transform:none;letter-spacing:0;font-size:.8rem;font-weight:700;
  color:var(--nc-gris);background:rgba(130,147,142,.12);border-color:rgba(130,147,142,.3);
}
.estado-pill::before{
  content:"";width:.6em;height:.6em;border-radius:50%;flex:none;
  background:currentColor;box-shadow:0 0 6px currentColor,0 0 14px currentColor;
}
.estado-activo{color:var(--ui-teal);background:rgba(98,227,203,.12);border-color:rgba(98,227,203,.32)}
.estado-pendiente{color:var(--nc-ambar);background:rgba(246,198,106,.12);border-color:rgba(246,198,106,.32)}
.estado-pendiente::before{animation:nc-late 1.6s ease-in-out infinite}
.estado-retirado{color:var(--ui-coral);background:rgba(255,139,123,.12);border-color:rgba(255,139,123,.32)}
@keyframes nc-late{50%{transform:scale(1.35);opacity:.55}}

/* --------------------------------------------------------------------------
   9 · BOTONES
   -------------------------------------------------------------------------- */
.btn-1{
  position:relative;overflow:hidden;
  color:#032720;border-color:transparent;
  background:linear-gradient(135deg,#9BF7E5,#55D6BE 55%,#36B09C);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 34px -10px rgba(98,227,203,.7);
}
.btn-1:hover{background:linear-gradient(135deg,#B0FAEB,#62E3CB 55%,#3FBDA8);border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 40px -10px rgba(98,227,203,.85)}
/* El reflejo que cruza el botón principal cada pocos segundos. */
.btn-1::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-130%);animation:nc-brillo 4s ease-in-out infinite;
}
@keyframes nc-brillo{55%,100%{transform:translateX(130%)}}
.btn-2{
  color:var(--ink);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-2:hover{background:rgba(98,227,203,.10);border-color:rgba(98,227,203,.5)}
.btn-retirar{
  color:#2B0A05;border-color:transparent;
  background:linear-gradient(135deg,#FFC0B5,#FF8B7B 60%,#F2705E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 34px -10px rgba(255,139,123,.65);
}
.btn-retirar:hover{background:linear-gradient(135deg,#FFCDC4,#FF998A 60%,#F57E6C);border-color:transparent}
.btn-google{background:rgba(255,255,255,.05)}

/* --------------------------------------------------------------------------
   10 · FORMULARIOS
   -------------------------------------------------------------------------- */
.campo input,.campo textarea,.campo select{
  background:rgba(255,255,255,.05);color:var(--ink);
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.3);
}
.campo input:focus-visible,.campo textarea:focus-visible,.campo select:focus-visible{
  border-color:var(--ui-teal);box-shadow:0 0 0 4px rgba(98,227,203,.16);outline:0;
}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(163,184,178,.7)}
/* El autorrelleno de Chrome pinta los campos de amarillo claro: en oscuro
   deja el texto blanco sobre blanco. Se tapa con una sombra interior. */
.campo input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 100px #13221F inset;caret-color:var(--ink);
}

.opcion{background:rgba(255,255,255,.03);border-color:var(--line)}
.opcion:has(input:checked){border-color:rgba(98,227,203,.6);background:rgba(98,227,203,.10);box-shadow:0 0 26px -8px rgba(98,227,203,.6)}
.opcion input:checked ~ .marca{box-shadow:0 0 12px rgba(98,227,203,.5)}

.fila-check{background:rgba(255,255,255,.03)}
.fila-check:has(input[type=checkbox]:checked){border-color:rgba(98,227,203,.5);background:rgba(98,227,203,.08)}
.marca-check input:checked ~ .caja{box-shadow:0 0 14px rgba(98,227,203,.65)}
.tarjeta-campo-alerta .fila-check:has(input[type=checkbox]:checked){border-color:rgba(255,139,123,.5);background:rgba(255,139,123,.08)}
.tarjeta-campo-alerta .marca-check input:checked ~ .caja{background:var(--ui-coral);border-color:var(--ui-coral);box-shadow:0 0 14px rgba(255,139,123,.65)}

/* La palabra para parar, en cuanto se escribe, se enciende en ámbar: es el
   «momento» del paso 2 en la maqueta. */
.chip-vivo{
  color:#FFE3A6;background:rgba(246,198,106,.12);border:1px solid rgba(246,198,106,.35);
  font-family:var(--nc-titular);font-weight:800;
  text-shadow:0 0 14px rgba(246,198,106,.6);box-shadow:0 0 24px -8px rgba(246,198,106,.7);
}

/* El progreso del asistente se enciende. */
.progreso{background:rgba(255,255,255,.08)}
.progreso > span{background:linear-gradient(90deg,#9BF7E5,#62E3CB);box-shadow:0 0 12px rgba(98,227,203,.7)}

/* Pestañas de la cuenta. */
.ajustes-tab[aria-selected=true],.pestanas button[aria-selected=true]{
  color:var(--teal-ink);background:var(--tint-teal);box-shadow:0 0 18px -6px rgba(98,227,203,.7);
}
.ajustes-tab:hover{background:rgba(255,255,255,.05)}

/* --------------------------------------------------------------------------
   11 · AVISOS, QR Y PIE
   -------------------------------------------------------------------------- */
.aviso{background:rgba(255,255,255,.05);border-color:var(--line)}
.aviso-error{background:rgba(255,139,123,.10);border-color:rgba(255,139,123,.32);color:var(--coral-strong)}
.aviso-exito{background:rgba(98,227,203,.10);border-color:rgba(98,227,203,.32);color:var(--teal-strong)}

/* El QR se queda en claro —una cámara lo lee mejor oscuro sobre claro— y se
   enmarca con luz. */
.qr{background:#E9F4F1;border-radius:24px;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 70px -8px rgba(98,227,203,.55)}

.pie-app{background:transparent;border-top-color:var(--line-soft)}

/* --------------------------------------------------------------------------
   12 · MOVIMIENTO REDUCIDO
   Quien lo pide no ve la nebulosa moverse, ni el reflejo, ni los latidos.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body::before,.btn-1::after,.barra-app-circulo,.estado-pendiente::before,.pase::after,.desliza-pomo{animation:none}
  .pase{transform:none}
  .btn-1::after{display:none}
}