/* ==========================================================================
   ARCHIVO:   css/9-tema.css   (diseño "Ruta": colores Noche del Pacífico)
   PARTE:     Tema de colores
   CONTIENE:  solo colores. No cambia la estructura, el directorio ni el mapa.
   ORDEN:     el último archivo CSS de cada página
   ==========================================================================
   Los colores del primer diseño: todo el sitio en azul noche profundo, con
   una rejilla tenue de fondo, turquesa de la bandera de Honduras para
   enlaces y detalles, y oro de California para el botón principal y las
   estrellas del mapa. */

:root {
  --marino-900: #040b1f;
  --marino-800: #08142f;
  --marino-700: #0e2047;
  --marino-600: #17306a;
  --marino-tinta: #0a1a3d;
  --hn-azul: #3dd6f5;
  --hn-azul-profundo: #3dd6f5;
  --hn-turquesa: #3dd6f5;
  --ca-rojo: #ffc83d;            /* oro */
  --ca-rojo-profundo: #ffdb7a;

  --fondo: #040b1f;
  --panel: #08142f;
  --panel-alto: #0e2047;
  --panel-realce: #17306a;
  --tinta: #ecf3ff;
  --tinta-suave: #a8b9d9;
  --azul: #3dd6f5;
  --azul-tinta: #3dd6f5;
  --rojo: #ffc83d;
  --rojo-realce: #ffdb7a;
  --sobre-rojo: #040b1f;
  --icono-acento: #ffc83d;
  --seleccion: #3dd6f5;
  --sobre-seleccion: #040b1f;
  --aviso: #ffc83d;
  --aviso-tinte: rgba(255, 200, 61, 0.14);
  --error: #ff9c9c;
  --error-tinte: rgba(255, 156, 156, 0.1);
  --exito: #7be0b0;
  --exito-tinte: rgba(123, 224, 176, 0.1);
  --linea: rgba(150, 190, 255, 0.18);
  --linea-fuerte: rgba(150, 190, 255, 0.4);
  --borde-campo: #6f86b5;
  --rejilla: rgba(120, 170, 255, 0.045);
  --rayas: rgba(150, 190, 255, 0.07);
  --sombra: rgba(0, 0, 0, 0.45);
  /* Tercer color del diseño: violeta de la madrugada, solo para luces y degradados */
  --violeta: #8b7bff;
  --coral: #ff5a6e;

  --mapa-fondo: #08142f;
  --mapa-estado: #122a5c;
  --mapa-estado-linea: #4a68a8;
  --mapa-estado-activo: #1d4a8c;
  --mapa-estado-realce: #24589e;
  --mapa-estado-elegido: #2b6cb8;

  color-scheme: dark;
}

.zona-noche,
.aviso-beta,
.cabecera,
.pie,
.aviso-cookies {
  --fondo: #040b1f;
  --panel: #08142f;
  --panel-alto: #0e2047;
  --panel-realce: #17306a;
  --tinta: #ecf3ff;
  --tinta-suave: #a8b9d9;
  --azul: #3dd6f5;
  --azul-tinta: #3dd6f5;
  --rojo: #ffc83d;
  --rojo-realce: #ffdb7a;
  --sobre-rojo: #040b1f;
  --seleccion: #3dd6f5;
  --sobre-seleccion: #040b1f;
}

/* Fondo: azul noche con dos resplandores fijos y un cielo de estrellas muy tenue.
   Todo es CSS: no se carga ninguna imagen. */
body {
  color-scheme: dark;
  background-color: #040b1f;
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(236, 243, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 141px 97px, rgba(236, 243, 255, 0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 211px 183px, rgba(61, 214, 245, 0.5), transparent 60%),
    radial-gradient(1px 1px at 77px 233px, rgba(236, 243, 255, 0.3), transparent 60%),
    radial-gradient(1px 1px at 263px 29px, rgba(255, 200, 61, 0.45), transparent 60%),
    radial-gradient(60rem 40rem at 100% -10%, rgba(61, 214, 245, 0.10), transparent 70%),
    radial-gradient(50rem 40rem at -10% 110%, rgba(139, 123, 255, 0.10), transparent 70%);
  background-size: 290px 270px, 290px 270px, 290px 270px, 290px 270px, 290px 270px, auto, auto;
  background-attachment: scroll, scroll, scroll, scroll, scroll, fixed, fixed;
}

.tarjeta__lugar svg,
.accesos__lista svg {
  color: var(--icono-acento);
}

/* Mapa: círculos de grupo en turquesa con el número oscuro */
.marcador__grupo {
  fill: var(--azul);
  stroke: var(--fondo);
}
.marcador__cuenta {
  fill: #040b1f;
}

@media (prefers-contrast: more) {
  :root {
    --tinta-suave: #d3def3;
    --linea: rgba(190, 215, 255, 0.5);
    --linea-fuerte: rgba(210, 228, 255, 0.85);
    --borde-campo: #d3def3;
    --mapa-estado-linea: #d3def3;
  }
}