/* ==========================================================================
   mm-iframe-dark.css  ·  tema oscuro "Observatorio" para las páginas antiguas
   (FrontPage / VADEMECUM REMER) que se cargan dentro de un iframe:
     - manualmeteorologia.html
     - glosariometeorologia.htm
   Solo estilo: no cambia texto, enlaces, imágenes ni la estructura del HTML.
   Se enlaza con una línea <link> justo después de pcivilea1.css.

   Criterio de colores:
     · colores DECORATIVOS (el beis/naranja de FrontPage)  -> paleta oscura del sitio
     · colores CON SIGNIFICADO (rojo/amarillo/verde de las escalas de calor,
       viento, niebla, etc.)                               -> se conservan (algo más suaves)
   ========================================================================== */

html { color-scheme: dark; background: #0b1222 !important; }
body {
  background: #0b1222 !important;
  color: #e2e8f0 !important;
  margin: 0 !important;
  padding: .5rem .85rem 1.5rem !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
::selection { background: rgba(34,211,238,.30); color: #fff; }

/* tipografía: las etiquetas <font> mandan color/familia con atributos; se hereda del contenedor */
font { font-family: inherit !important; color: inherit !important; }
font[size="1"] { font-size: .78rem !important; }
font[size="2"] { font-size: .94rem !important; }
font[size="3"] { font-size: 1.05rem !important; }
big { font-size: 1.12em; }
p { margin: .55rem 0; }
b, strong { color: #f1f5f9; }
hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); }
ul, ol { padding-left: 1.4rem; }
li { margin: .25rem 0; }

/* enlaces (índices, referencias internas, letras del glosario) */
a, a:link { color: #67e8f9 !important; text-decoration: none; }
a:visited { color: #a5b4fc !important; }
a:hover, a:focus { color: #fff !important; text-decoration: underline dotted; text-underline-offset: 3px; }
a font, a b, a i { color: inherit !important; }

/* tablas */
table { max-width: 100%; border-color: rgba(148,163,184,.22) !important; }
table[border]:not([border="0"]) { border-collapse: separate; }
table[border]:not([border="0"]) td,
table[border]:not([border="0"]) th { border: 1px solid rgba(148,163,184,.20) !important; }
td, th { color: inherit; }
th { text-align: left; }

/* ---- colores decorativos de FrontPage -> paleta oscura ------------------ */
/* celda de término / primera columna */
[bgcolor="#ffb663" i] { background: #15233f !important; color: #f1f5f9 !important; }
/* celda de descripción / texto corrido */
[bgcolor="#ffe3ad" i] { background: #0f1a33 !important; color: #dbe4f0 !important; }
/* fondos suaves auxiliares, filas alternas, separadores */
[bgcolor="#f7efde" i], [bgcolor="#fbffe6" i], [bgcolor="#f2f4fc" i],
[bgcolor="#dedede" i], [bgcolor="#cfcfcf" i], [bgcolor="#c1c1c1" i] { background: #131f3a !important; color: #dbe4f0 !important; }
/* cabeceras de tabla (naranja) */
[bgcolor="#de7900" i] { background: rgba(34,211,238,.14) !important; color: #67e8f9 !important; }
th[bgcolor="#de7900" i], tr[bgcolor="#de7900" i] th, tr[bgcolor="#de7900" i] td { letter-spacing: .03em; }

/* cabecera superior del Vademécum */
[bgcolor="#fc4b02" i] { background: linear-gradient(135deg, #0e7490, #4f46e5) !important; color: #fff !important; border-radius: .6rem .6rem 0 0; padding: .45rem .8rem !important; }
[bgcolor="#b22222" i] { background: #22d3ee !important; height: 3px !important; }
[bgcolor="#c0c0c0" i] { background: #1b2a4a !important; color: #f1f5f9 !important; padding: .35rem .8rem !important; }
/* barras de sección y subsección */
[bgcolor="#0080c0" i] { background: rgba(56,189,248,.16) !important; color: #67e8f9 !important; border-left: 3px solid #22d3ee; padding: .35rem .8rem !important; letter-spacing: .02em; }

/* fondos blancos (placas de iconos y dibujos): placa clara, texto oscuro */
:not(body)[bgcolor="#ffffff" i], :not(body)[bgcolor="white" i] { background: #e2e8f0 !important; color: #0f172a !important; }

/* ---- colores CON SIGNIFICADO: se conservan, algo más suaves, texto oscuro - */
[bgcolor="red" i], [bgcolor="#ff0000" i]  { background: #f05252 !important; color: #1f0707 !important; }
[bgcolor="yellow" i], [bgcolor="#ffff00" i], [bgcolor="#fdfd00" i] { background: #fde047 !important; color: #1c1500 !important; }
[bgcolor="#00ff00" i], [bgcolor="#0fd80a" i] { background: #4ade80 !important; color: #052e16 !important; }
[bgcolor="#ff9c05" i], [bgcolor="#f39b43" i] { background: #fb9a1d !important; color: #2a1500 !important; }
[bgcolor="#ffd303" i] { background: #facc15 !important; color: #1c1500 !important; }
[bgcolor="#ff00ff" i], [bgcolor="#c24bc2" i] { background: #d946ef !important; color: #1f0224 !important; }
[bgcolor="#99ccff" i], [bgcolor="#ccffff" i], [bgcolor="#33ccff" i] { background-color: #7dd3fc !important; color: #082f49 !important; }
[bgcolor="#75b764" i] { background: #86c97a !important; color: #0b2406 !important; }
/* tonos oscuros/saturados: texto blanco */
[bgcolor="#006d8c" i], [bgcolor="#29869c" i], [bgcolor="#004963" i], [bgcolor="#1290e9" i],
[bgcolor="#330099" i], [bgcolor="#3366ff" i], [bgcolor="#e6290f" i] { color: #fff !important; }

/* lo que va sobre un fondo de color mantiene el color del contenedor (también los enlaces) */
td[bgcolor] a, th[bgcolor] a { color: inherit !important; text-decoration: underline; }

/* ---- imágenes ------------------------------------------------------------
   Los dibujos y fotos del manual/glosario se hicieron sobre fondo claro (muchos GIF
   son transparentes): llevan una placa clara para que se vean bien sobre el tema oscuro.
   Los iconos pequeños (viñetas, flechas) y las flechas de viento no la llevan. */
img[src*="vdm004i"], img[src*="vdm0254i"] {
  background: #e8edf5;
  padding: 6px;
  border-radius: .5rem;
  max-width: 100%;
  height: auto;
}
img { vertical-align: middle; }

/* botones flotantes de subir / bajar del manual */
#item img { filter: invert(1) hue-rotate(180deg); opacity: .85; }

/* móvil */
@media (max-width: 600px) {
  body { padding: .35rem .5rem 1.25rem !important; font-size: 14px; }
  [bgcolor="#fc4b02" i], [bgcolor="#c0c0c0" i], [bgcolor="#0080c0" i] { padding: .3rem .55rem !important; }
  td, th { overflow-wrap: anywhere; }
  img { max-width: 100%; height: auto; }
}