/* Vozavía · tema único (oscuro azul). Lo cargan la página del cliente, el aviso de privacidad y el panel del equipo.
   Fondo azul casi negro, superficies un poco más claras, acento azul vivo y una cuadrícula tipo plano técnico
   que solo aparece en partes elegidas (lienzo de portada, final, liga caducada y cabecera del panel).
   Contraste medido (WCAG): tinta/fondo 17.7 · tinta-suave/fondo 9.2 · blanco/botón 5.2 · enlace/fondo 9.0 ·
   rojo/fondo 7.1 · rojo/fondo rojo 5.9 · verde/superficie 10.3 · tinta-suave sobre el punto más claro del lienzo 4.8 · borde de control/tarjeta 3.5. */

:root {
  /* fondo y superficies */
  --fondo: #060A16;
  --fondo-2: #0E1630;
  --tarjeta: #0B1226;
  --superficie-2: #16203D;
  --linea: #1C2747;
  --linea-control: #56699C;
  /* texto */
  --tinta: #EEF2FF;
  --tinta-suave: #A3B1D1;
  /* acento azul: relleno de botones y barras; versión clara para texto, enlaces y foco */
  --acento: #2563EB;
  --acento-2: #1D4ED8;
  --acento-texto: #7EB0FF;
  --acento-foco: #7EB0FF;
  --acento-tinta: #FFFFFF;
  --acento-suave: #12234D;
  --brillo: 0 0 0 1px rgba(126, 176, 255, .18) inset, 0 8px 24px -8px rgba(37, 99, 235, .55);
  /* estados */
  --verde: #4ADE80;
  --rojo: #F87171;
  --rojo-fondo: #3A1218;
  --espera: #FBBF24;
  --espera-fondo: #3A2A06;
  --amarillo: #3A2E05;
  --amarillo-tinta: #FDE68A;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .6);
  /* cuadrícula */
  --cuadro: 28px;
  --cuadro-linea: rgba(170, 196, 255, .10);
  --cuadro-punto: rgba(200, 216, 255, .42);
  --resplandor: rgba(37, 99, 235, .28);
  color-scheme: dark;
}

/* ---------- Encabezados limpios (8-oct-2026) ----------
   La clase .cuadricula ya no dibuja nada propio: sin cuadrícula metida, sin esquinas en «L», sin puntos en los cruces
   y sin cruz al centro. Las tarjetas de encabezado llevan solo un velo apenas más claro; el dibujo vive en el fondo de la página. */
.cuadricula {
  position: relative;
  background: rgba(14, 22, 48, .34);
  border: 0;
}
.franja-cuadricula { display: none; }

/* ---------- Fondo único de las pantallas del cliente (body.fondo-vz) ----------
   Dos capas detrás de todo, solo CSS (degradados, sin imágenes):
   1) ::before, FIJA: cuadrícula de puras líneas finas, muy tenue, que se desvanece hacia los bordes y abajo.
   2) ::after, del largo de la página: orbes de luz azul suaves, como el del inicio de la portada, repetidos cada
      --orbes-alto en vertical, así hay uno arriba a un lado, otro a media página del lado contrario y otro abajo
      por largo que sea el contenido. Sin animación: no hay nada que apagar con prefers-reduced-motion. */
body.fondo-vz {
  position: relative;
  background: var(--fondo);
  background-attachment: scroll;
  --orbes-alto: 1500px;
  --orbe: min(460px, 100vw);
  --orbe-viol: rgba(124, 92, 255, .11);
  --orbe-cian: rgba(34, 168, 214, .10);
}
body.fondo-vz::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(170, 196, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(170, 196, 255, .055) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 30%, #000 8%, rgba(0, 0, 0, .55) 45%, transparent 82%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 30%, #000 8%, rgba(0, 0, 0, .55) 45%, transparent 82%);
}
body.fondo-vz::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-image:
    /* arriba, a la derecha: azul del hero */
    radial-gradient(circle var(--orbe) at 90% calc(var(--orbe) * .95), rgba(37, 99, 235, .36), transparent 66%),
    /* a media página, del lado contrario (izquierda): azul con un toque de violeta */
    radial-gradient(circle var(--orbe) at 4% calc(var(--orbes-alto) * .5), rgba(37, 99, 235, .30), transparent 66%),
    radial-gradient(circle calc(var(--orbe) * .6) at 8% calc(var(--orbes-alto) * .485), var(--orbe-viol), transparent 70%),
    /* abajo, a la derecha: azul con un toque de cian */
    radial-gradient(circle var(--orbe) at 72% calc(var(--orbes-alto) * .78), rgba(37, 99, 235, .32), transparent 66%),
    radial-gradient(circle calc(var(--orbe) * .55) at 66% calc(var(--orbes-alto) * .79), var(--orbe-cian), transparent 70%);
  background-size: 100% var(--orbes-alto);
  background-repeat: repeat-y;
}
@media (max-width: 600px) {
  body.fondo-vz { --orbes-alto: 1300px; --orbe: min(400px, 100vw); }
}

/* Accesibilidad (13-oct-2026): el texto de ejemplo de los campos se lee (antes era el gris del navegador, bajo de contraste). */
input::placeholder, textarea::placeholder { color: #8794B5; opacity: 1; }