/* webcamscanarias.com — su aspecto, encima del motor.
   Generado por .claude/skills/webcams-motor/scripts/tema.py el 25/09/2026.
   Marca #0B6C9F. 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: #F5F7F8;      /* fondo de la página */
  --deep: #FFFFFF;        /* papel: tarjetas y bloques */
  --deep2: #E9EDEF;      /* un escalón por encima del fondo */
  --abyss: #E0E6E9;      /* lo más hundido, y el texto encima de una chapa de color */
  --rule: #D0D8DD;        /* líneas */
  --snow: #152128;        /* texto principal */
  --haze: #304B5A;        /* texto secundario */
  --dim: #446A7E;          /* texto apagado */

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

  /* Mapa */
  --sea: #EEF4F8; --land: #DBE2E6; --map-frontera: #ABBCC4; --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: #0A0E0F;

  /* Velos, chapas y sombras, en componentes RGB para poder darles opacidad */
  --velo: 21,33,40;
  --velo-hero-rgb: 13,25,32;
  --chapa-rgb: 21,33,40;
  --tapa-rgb: 17,29,36;
  --sombra-rgb: 21,33,40;
  --acento-rgb: 11,108,159;
  --btn-borde: rgba(21,33,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: #152128; --pie-texto: #C4CED4; --pie-fuerte: #FFFFFF;

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


/* El hero lo pone el motor desde la 1.28.0: era este, el de Canarias, y Edgar lo eligió de base para
   la red (08/10/2026). Aquí queda solo lo propio: la placa de la hora y el botón, en el azul marino
   de la marca en vez del oscuro genérico. */
.hero-datos{background:rgba(11,58,95,.84)}
.hero{--btn-fondo:#0B3A5F; --btn-texto-hover:#0B3A5F}

/* La marca (T3, 27/09/2026): el disco del favicon y el nombre apilado (W4): «Canarias» grande y debajo
   «WEBCAMS EN DIRECTO» con el punto rojo de emisión. El dibujo está en private/views/marca.php (lo
   genera docs/trabajo/canarias/marca/final.py; las variantes del texto, en texto.png); aquí, tamaños y
   colores. En el pie, sobre fondo oscuro, «Canarias» en blanco y el resto en el amarillo del disco. */
.brand { gap: .55rem; flex: none; }
.marca-disco { display: block; flex: none; width: 42px; height: 42px; }
.marca-disco svg { display: block; width: 100%; height: 100%; }
.marca-nombre { display: flex; flex-direction: column; line-height: 1; }
.marca-nombre b { font: 800 1.62rem/.95 var(--display); letter-spacing: -.015em; color: var(--snow); }
.marca-nombre small { display: flex; align-items: center; gap: .32em; margin-top: .28rem; white-space: nowrap; font: 700 .66rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.marca-nombre em { display: block; width: .62em; height: .62em; border-radius: 50%; background: #E03131; flex: none; }
.foot-brand { display: flex; align-items: center; gap: .55rem; }
.foot-brand .marca-disco { width: 36px; height: 36px; }
.foot-brand .marca-nombre b { color: #FFFFFF; font-size: 1.4rem; }
.foot-brand .marca-nombre small { color: #FFD21F; }
@media (max-width: 30rem) {
  .brand .marca-disco { width: 36px; height: 36px; }
  .brand .marca-nombre b { font-size: 1.42rem; }
  .brand .marca-nombre small { font-size: .64rem; letter-spacing: .12em; }
}