/* webcamsgalicia.com — su aspecto, encima del motor.
   Generado por .claude/skills/webcams-motor/scripts/tema.py el 24/09/2026.
   Marca #0A68AB. Tema claro.

   Va DESPUÉS de site.css, así que aquí solo está lo que cambia: la web sigue recibiendo las
   mejoras de maquetación del motor y manda en el color. Cada pareja de texto y fondo está
   medida por encima de 4,5 (docs/legibilidad.md); si se cambia un valor a mano, hay que volver
   a medir, y para eso está «tema.py … --ver».

   Lo que este archivo NO decide y hay que elegir a mano: la tipografía (--display y --text, más
   su @font-face y su «precargar» en config.php), la foto del hero y la forma de las esquinas. */

:root {
  /* Superficies, de la página hacia dentro */
  --night: #F5F6F8;      /* fondo de la página */
  --deep: #FFFFFF;        /* papel: tarjetas y bloques */
  --deep2: #E9ECEF;      /* un escalón por encima del fondo */
  --abyss: #E0E5E9;      /* lo más hundido, y el texto encima de una chapa de color */
  --rule: #D0D7DD;        /* líneas */
  --snow: #152028;        /* texto principal */
  --haze: #30485A;        /* texto secundario */
  --dim: #466881;          /* texto apagado */

  /* Marca y escala */
  --acento: #0A68AB;
  --hot: #915508;          /* lo que está en directo */
  --link: #0A68AB;
  --lv0: #0A68AB; --lv1: #0A68AB; --lv2: #0A68AB;
  --lv1-valor: var(--lv1);

  /* Mapa */
  --sea: #FFFFFF; --land: #DBE1E6; --map-frontera: #ABBAC4; --ctl: rgba(255, 255, 255, .92);

  /* Encima de una foto o de un velo. NO siguen al tema: por debajo del velo hay una foto, y
     ahí el texto va claro tanto en una web clara como en una oscura. */
  --texto-foto: #F4F5F6;
  --texto-tenue: #EBEEEF;
  --texto-suave: var(--haze);
  --sobre-velo: #FFFFFF;
  --sobre-velo-borde: rgba(255,255,255,.55);
  --negro: #0A0D0F;

  /* Velos, chapas y sombras, en componentes RGB para poder darles opacidad */
  --velo: 21,32,40;
  --velo-hero-rgb: 13,24,32;
  --chapa-rgb: 21,32,40;
  --tapa-rgb: 17,28,36;
  --sombra-rgb: 21,32,40;
  --acento-rgb: 10,104,171;
  --btn-borde: rgba(21,32,40,.35);

  /* Lo cálido de encima de la foto necesita un tono claro aunque --hot sea oscuro */
  --hero-sol: #FFD166; --hora-noche: var(--hot);

  /* El pie puede ir a contracorriente del tema, y en una web clara suele ser oscuro */
  --pie-fondo: #152028; --pie-texto: #C4CDD4; --pie-fuerte: #FFFFFF;

  --skip-fondo: var(--acento); --skip-texto: #FFFFFF;
  --offline-a: #E2E6E9; --offline-b: #DBE0E3;
}

/* ── A mano (24/09/2026), encima de lo generado ─────────────────────────────────────────────────
   Azul y blanco, los colores de Galicia, y un solo toque de amarillo: el de la vieira y las
   flechas del Camino. El amarillo nunca va como texto sobre blanco (no llega a 4,5); solo en
   el sol de la marca y en el icono, que son adorno. */


/* Pie azul marino en vez del casi negro del tema: sigue siendo un pie oscuro, pero de la casa.
   Medido: #D5E3EE sobre #0B3A5F da 9,4 y el blanco 11,8. */
:root { --pie-fondo: #0B3A5F; --pie-texto: #D5E3EE; --pie-fuerte: #FFFFFF; }

/* La barra de escritorio lleva seis entradas (cuatro secciones, el Camino y las provincias), una
   más que la de Costa Rica. Con el tamaño del motor se partían «Villas y pueblos» y la marca en dos
   renglones a 1280 px. Un poco más juntas, sin partirse nunca, y hasta 76rem (unos 1.200 px) se
   queda el menú desplegable, que en esos anchos se maneja mejor que una barra apretada. */
.nav { gap: 1.2rem; font-size: 1.04rem; }
.nav > a, .drop > .drop-t, .brand { white-space: nowrap; }
@media (min-width: 56rem) and (max-width: 76rem) {
  .nav { display: none; }
  .menu { display: block; }
}

/* La marca (logo B, 25/09/2026): el disco del favicon y el nombre apilado. El dibujo está en
   private/views/marca.php; aquí, solo tamaños y colores. En el pie, sobre azul marino, amarillo y blanco. */
.brand { gap: .55rem; }
.marca-disco { display: block; flex: none; width: 44px; height: 44px; }
.marca-disco svg { display: block; width: 100%; height: 100%; }
.marca-nombre { display: flex; flex-direction: column; line-height: 1; }
.marca-nombre small { font: 800 .72rem/1 var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--acento); }
.marca-nombre b { font: 800 1.7rem/1 var(--display); letter-spacing: -.01em; color: #0B3A5F; margin-top: 1px; }
.foot-brand { display: flex; align-items: center; gap: .55rem; }
.foot-brand .marca-disco { width: 38px; height: 38px; }
.foot-brand .marca-nombre small { color: #FFDD00; }
.foot-brand .marca-nombre b { color: #FFFFFF; font-size: 1.5rem; }
@media (max-width: 30rem) {
  .brand .marca-disco { width: 38px; height: 38px; }
  .brand .marca-nombre b { font-size: 1.45rem; }
  .brand .marca-nombre small { font-size: .64rem; }
}