/* webcamscaribbean.com — su aspecto, encima del motor.
   Generado por .claude/skills/webcams-motor/scripts/tema.py el 07/10/2026.
   Marca #0E7C86. 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: #E9EEEF;      /* un escalón por encima del fondo */
  --abyss: #E0E8E9;      /* lo más hundido, y el texto encima de una chapa de color */
  --rule: #D0DCDD;        /* líneas */
  --snow: #152628;        /* texto principal */
  --haze: #30565A;        /* texto secundario */
  --dim: #3D6C71;          /* texto apagado */

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

  /* Mapa */
  --sea: #EEF4F8; --land: #DBE5E6; --map-frontera: #ABC2C4; --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: #F4F6F6;
  --texto-tenue: #EBEFEF;
  --texto-suave: var(--haze);
  --sobre-velo: #FFFFFF;
  --sobre-velo-borde: rgba(255,255,255,.55);
  --negro: #0A0F0F;

  /* Velos, chapas y sombras, en componentes RGB para poder darles opacidad */
  --velo: 21,38,40;
  --velo-hero-rgb: 13,30,32;
  --chapa-rgb: 21,38,40;
  --tapa-rgb: 17,34,36;
  --sombra-rgb: 21,38,40;
  --acento-rgb: 13,111,120;

  /* 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: #094C52;

  /* 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: #152628; --pie-texto: #C4D2D4; --pie-fuerte: #FFFFFF;

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

/* El hero lo pone el motor desde la 1.28.0 (foto limpia, un negro del 15 %, sombra en el texto y la
   hora en una placa). Foto: Playa Norte, Isla Mujeres, de dronepicr (CC BY 2.0). Aquí, solo la placa
   en el azul noche de la marca. */
.hero-datos{background:rgba(11,37,54,.82)}

/* 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; }
/* En fila, como arriba: marca.py no lo escribía y el pie salía con la palmera encima del nombre */
.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: #FFC85E; }   /* el sol de la palmera */
@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 botón de la portada va sobre la foto, y el turquesa de la web es el del agua de Playa Norte:
   con él la silueta se quedaba en 2,1 (botones.py). Va en el azul noche de la palmera de la marca,
   con su filo blanco, y al pasar el ratón se vuelve blanco: contrasta con cualquier foto. */
.hero{--btn-fondo:#0B2536; --btn-texto-hover:#0B2536}