/* webcamsspain.com — su aspecto, encima del motor.
   Generado por .claude/skills/webcams-motor/scripts/tema.py el 09/10/2026.
   Marca #125E8A, azul mediterráneo, elegido por Edgar el 09/10/2026. 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: #E9EDEF;      /* un escalón por encima del fondo */
  --abyss: #E0E5E9;      /* lo más hundido, y el texto encima de una chapa de color */
  --rule: #D0D8DD;        /* líneas */
  --snow: #152128;        /* texto principal */
  --haze: #304A5A;        /* texto secundario */
  --dim: #44697E;          /* texto apagado */

  /* Marca y escala */
  --acento: #125E8A;
  --hot: #905A13;          /* lo que está en directo */
  --link: #125E8A;
  --lv0: #125E8A; --lv1: #125E8A; --lv2: #125E8A;
  --lv1-valor: var(--lv1);

  /* Mapa */
  --sea: #EEF4F8; --land: #DBE2E6; --map-frontera: #ABBBC4; --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,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: 18,94,138;

  /* Botones: la letra encima del color de marca y el color de marca con el ratón encima. El resto
     de sus colores los pone el motor según dónde esté el botón (la página, la foto del hero o el
     panel de «no emite»), y se mide con botones.py de la skill de calidad. */
  --sobre-acento: #FFFFFF;
  --acento-hover: #0C405E;

  /* 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;
}

/* La marca, apilada (formato B). La escribió marca.py porque este archivo aún no tenía la suya: los
   colores y los tamaños son de partida y se cambian aquí mismo. */
.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: .12em; 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: var(--pie-fuerte); font-size: 1.4rem; }
.foot-brand .marca-nombre small { color: var(--pie-texto); }
@media (max-width: 47.99rem) {
  .brand .marca-disco { width: 36px; height: 36px; }
  .brand .marca-nombre b { font-size: 1.42rem; }
  .brand .marca-nombre small { font-size: .64rem; }
}

/* El hero lo pone el motor (foto limpia, un negro suave, sombra en el texto y la hora en una placa).
   Foto: Cala Mesquida, Mallorca, de dronepicr (CC BY 2.0). Aquí, la placa y el botón en el azul de
   la marca, con filo blanco: el turquesa del agua de la foto no deja ver un botón azul claro. */
.hero-datos{background:rgba(12,52,78,.84)}
.hero{--btn-fondo:#0C405E; --btn-texto-hover:#0C405E}