/* =========================================================================
   WebSDR Madrid IN80DK — tema "consola SDR oscura"
   Rediseño visual 2026. Importante: ningún selector usado por el JS del
   espectro/waterfall (websdr-base.js, websdr-waterfall.js) ha sido
   renombrado ni se le ha tocado position/overflow/width/height — sólo se
   han modernizado colores, tipografía, sombras y radios. El cuadro del
   espectro sigue teniendo el mismo ancho fijo de 1024px que usa el motor
   de sintonía para calcular las coordenadas de arrastre.
   ========================================================================= */

:root {
	/* Paleta "Steam" (tema oscuro): azul-marino muy oscuro de fondo,
	   paneles azul-petróleo, acento azul claro tipo Steam para enlaces/
	   foco, y verde tipo Steam para los botones de acción. */
	--bg-0: #141c28;
	--bg-1: #1b2430;
	--panel: #202f42;
	--panel-2: #1a2531;
	--border: #2a3f5a;
	--border-soft: #223349;
	--text: #c6d4df;
	--text-dim: #8f9aa8;
	--text-faint: #62707e;
	--heading: #f1f6fa;
	--accent: #66c0f4;
	--accent-strong: #8ed2ff;
	--accent-green: #6dc849;
	--accent-green-strong: #8bdb64;
	--accent-green-dim: #2c5d1c;
	--amber: #ffb32c;
	--amber-dim: #7a5716;
	--danger: #ff5c5c;
	--radius-lg: 14px;
	--radius: 10px;
	--radius-sm: 6px;
	--shadow-lg: 0 20px 45px -12px rgba(0, 0, 0, .7);
	--shadow: 0 8px 22px -8px rgba(0, 0, 0, .6);
	/* Fuentes del sistema únicamente (nada de Google Fonts): así no hay
	   ningún "salto" de maquetación cuando una tipografía web tarda en
	   cargar y sustituye a la de reserva con métricas distintas — eso es
	   lo que causaba los solapes de texto/botones reportados. */
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
}

* {
	box-sizing: border-box;
}

body {
	color: var(--text);
	/* Tema oscuro "Steam": el mismo fondo original de cuadros azules que
	   el modo claro, pero con una capa oscura semitransparente encima
	   para que siga leyéndose como tema oscuro sin ser tan negro/plano. */
	background:
		radial-gradient(1100px 520px at 50% -10%, rgba(142, 210, 255, .10) 0%, transparent 60%),
		linear-gradient(rgba(20, 28, 40, .82), rgba(20, 28, 40, .82)),
		url('imagenes/parallax24.jpg');
	background-repeat: no-repeat, repeat, repeat;
	background-attachment: fixed, fixed, fixed;
	font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--heading);
}

.ctl {
	background: var(--panel);
	color: var(--text);
	float: left;
	width: auto;
	margin: 5px;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* El HTML de las opciones "View:", "Allow keyboard:" y "Waterfall/Sound:
   Java/HTML5" lo genera websdr-base.js pegado sin espacios (p.ej.
   "<input type=radio>Java<input type=radio>HTML5"): no se toca ese JS,
   así que el aire entre el círculo y su texto, y entre grupos, se añade
   aquí por CSS. */
.ctl input[type="radio"],
.ctl input[type="checkbox"] {
	margin: 0 4px 0 8px;
	vertical-align: middle;
}
.ctl b {
	margin-right: 4px;
}

.clear {
	clear: both
}

.others {
	font-size: 60%;
	font-family: var(--font-sans);
	color: var(--text-dim);
}

/* La vista "all bands" / "others slow" (activada desde View:) genera por
   JavaScript (douu() en websdr-base.js, sin tocar) unas barras negras de
   1024px de ancho fijo dentro de #users, envueltas en <p>. Como <div> es
   de bloque y no puede ir dentro de <p>, el navegador cierra el <p>
   automáticamente y esos div quedan como hijos directos de #users (no
   como p > div). Al ser bloques de ancho fijo (no en línea), el
   text-align:center de la tarjeta no los centra — se les da aquí margen
   automático para que sí queden centrados, sin tocar el ancho ni el
   contenido que genera el JS. */
#users > div {
	margin-left: auto;
	margin-right: auto;
}

.memories {
	font-size: 80%;
	font-family: var(--font-sans);
	color: var(--text-dim);
}

.scale {
	position: relative;
}

.scaleabs {
	position: absolute;
}

#edgelower:hover {
	background: url('edgelowerbb.png');
}

#edgeupper:hover {
	background: url('edgeupperbb.png');
}

#yellowbarr {
	background-color: #ffcc33;
	top: 2px;
	height: 1px
}

#yellowbara:hover #yellowbarr {
	top: 2px;
	height: 2px
}

.boton-modo-ura {
	width: 76px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--panel-2);
	color: var(--text);
	transition: border-color .15s ease, color .15s ease;
}

.boton-modo-ura:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.hideblind {
	display: inline;
}

.showblind {
	display: none;
}

.statinfo0 {
	float: left;
	white-space: nowrap;
	position: relative;
	border-width: 1px;
	border-style: solid;
	border-color: var(--amber, #ffb32c);
	background-color: #1c2838;
	color: var(--amber, #ffb32c);
	font-weight: 700;
	font-size: 11px;
	line-height: 15px;
	padding: 0 4px;
	border-radius: 3px;
	font-family: var(--font-sans);
}

.statinfo1 {
	float: left;
	position: relative;
	border-left-width: 0px;
	border-right-width: 2px;
	border-top-width: 0px;
	border-bottom-width: 2px;
	border-style: solid;
	/* Antes var(--bg-0): en modo oscuro se confundía con el negro de la
	   escala, pero en modo claro --bg-0 es un gris-azulado claro y se veía
	   como un cuadro claro detrás de la etiqueta. Este borde siempre cae
	   sobre la franja negra de la escala (fija, no cambia con el tema), así
	   que se dejó en un tono oscuro fijo en vez de depender del tema. */
	border-color: #0a0f16;
}

.statinfo1:hover {
	z-index: 98;
}

.statinfo2 {
	overflow: hidden;
	border-width: 0px;
	border-left-width: 2px;
	border-style: solid;
	border-color: #0a0f16;
	position: absolute;
}

.statinfo2:hover {
	overflow: visible;
}

.statinfol {
	background-color: rgba(255, 179, 44, .55);
}

.statinfo0l {
	float: left;
	white-space: nowrap;
	position: relative;
	border-width: 1px;
	border-style: solid;
	border-color: var(--accent-green, #6dc849);
	background-color: #16281c;
	color: var(--accent-green, #6dc849);
	font-weight: 700;
	font-size: 11px;
	line-height: 15px;
	padding: 0 4px;
	border-radius: 3px;
	font-family: var(--font-sans);
}

.statinfo1l {
	float: left;
	position: relative;
	border-left-width: 0px;
	border-right-width: 2px;
	border-top-width: 0px;
	border-bottom-width: 2px;
	border-style: solid;
	/* Mismo motivo que en .statinfo1: siempre sobre la franja negra fija,
	   así que el borde no depende del tema. */
	border-color: #0a0f16;
}

.statinfo1l:hover {
	z-index: 98;
}

.statinfo2l {
	overflow: hidden;
	border-width: 0px;
	border-left-width: 2px;
	border-style: solid;
	border-color: #0a0f16;
	position: absolute;
}

.statinfo2l:hover {
	overflow: visible;
}

.statinfoll {
	background-color: rgba(109, 200, 73, .55);
}

/* La franja negra de la escala (id="blackbar0/1/2/3", generada por
   websdr-base.js) cambia su propia altura entre 30px y 64px según haya
   o no etiquetas de DX/memorias — eso es el propio script (no se toca).
   Se le da aquí una altura mínima igual a la "alta" para que, al
   cargar la página o al hacer zoom (que dispara showdx()), no dé el
   salto visual de tamaño: el hueco ya está reservado desde el principio.
   No afecta a su ancho (sigue fijo en 1024px vía el propio script), así
   que no interfiere en el cálculo de posición/frecuencia. */
[id^="blackbar"] {
	min-height: 64px;
}

input:not(:checked)+.keylist {
	display: none;
}

input:checked+.keylist {
	display: block;
}

.warning {
	color: #ffd7d7;
	font-weight: 600;
	border: 1px solid var(--danger);
	border-style: solid;
	background-color: #2a0e0e;
	margin: 8px;
	padding: 10px 14px;
	border-radius: var(--radius);
	display: none;
}

.warning a {
	color: #ffb3b3;
	text-decoration: underline;
}

#contenedor {
	width: 1024px;
	background-color: var(--panel);
	margin: 20px auto 0px auto;
	font-family: var(--font-sans);
	font-size: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

#logo {
	width: 100%;
	text-align: center;
	background-color: var(--bg-0);
	padding-top: 5px;
	padding-bottom: 5px
}

#mobilewarning {
	min-height: 45px;
	text-align: center;
	vertical-align: middle
}

#yelowbar {
	position: absolute;
	width: 100px;
	height: 18px;
	background-color: transparent
}

#finput {
	width: 460px;
	border: 0px;
	font-size: 100px;
	text-align: center;
	height: 115px;
	background-color: var(--amber);
	font-family: var(--font-mono);
}

#spansignal {
	display: inline-block;
	background-color: var(--amber);
	border-radius: var(--radius-sm);
	padding: 3px;
	font-size: 11px;
	width: 126px;
	margin: 2px;
}

#numericalsmeter,
#numericalsmeterpeak,
#numericalbandwidth6,
#numericalbandwidth60 {
	background-color: #000;
	/* De vuelta al ámbar original (el verde no convenció). */
	color: #ffb32c;
	font-weight: bold;
	font-family: var(--font-mono);
	font-size: 11px;
	height: 16px;
	/* A petición ("hay veces que pone un digito mas en los valores de
	   level y peak y se espande lo negro de debajo, dale un poco mas de
	   anchura para que no haga ese movimiento extraño" - y de nuevo tras
	   un primer intento a 6ch: "haz que lo de debajo del numero sea un
	   poco mas ancho... hace un efecto goma como que se estira"): el
	   cuadro sin ancho mínimo crecía/encogía cada vez que el valor pasaba
	   de 5 a 6 caracteres (p.ej. "-75.9" → "-100.9"), empujando
	   visiblemente lo que hay al lado. min-width (en "ch", el ancho de un
	   carácter en esta fuente monoespaciada) fija sitio de sobra para el
	   caso más largo realista sin ese salto; el hueco que sobre con
	   valores más cortos se reparte solo, simétrico, gracias al centrado
	   por flexbox ya puesto aquí debajo (display:inline-flex +
	   justify-content:center) - la asimetría de la que hablaba el
	   comentario anterior era de un intento sin este centrado, no aplica
	   ahora. Subido de 6 a 8ch para dejar margen de sobra incluso con
	   valores largos tipo "-123.4 " o con la fuente monoespaciada que
	   acabe eligiendo el navegador si ui-monospace/SFMono no están
	   disponibles. #numericalbandwidth6/60 llevan el mismo min-width para
	   no desemparejar sus cajas del resto por este mismo cambio. */
	min-width: 8ch;
	/* box-sizing:border-box es necesario para que el padding-top (ver más
	   abajo, ahora SEPARADO por grupo) no infle la altura fija de 16px,
	   solo reparte el espacio interior. El padding ya no va aquí: ver el
	   bloque de comentario justo debajo de esta regla. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	border-radius: 3px;
	white-space: nowrap;
}

/* Padding vertical - a propósito YA NO va en la regla de arriba, sino
   separado por grupo (S-metro / ancho de banda). Historial: empezó
   compartido en una sola regla ("los valores estan un pelin desplazados
   hacia arriba, centralos" - padding:6px 4px 0 4px, medido con captura a
   4x). Con datos reales de la web del usuario resultó que el S-metro y el
   ancho de banda no siempre necesitan el mismo ajuste (aunque a veces
   coincida el valor), y al estar en una regla compartida, tocar uno para
   arreglarlo desajustaba el otro sin querer. Separado (sept 2026) para
   poder retocar cada uno de forma independiente sin tocar el otro. */
/* Re-ajustado de 0px a 1px (sept 2026): confirmado que con 0px el
   contenido naranja del S-metro (level/peak) queda un pelín por ENCIMA
   del centro, hay que bajarlo 1px. */
#numericalsmeter,
#numericalsmeterpeak {
	padding: 1px 4px 0 4px;
}

/* Re-ajustado de 0px a 1px y luego a 2px (sept 2026): a diferencia del
   S-metro, el ancho de banda necesitó un paso más para quedar centrado. */
#numericalbandwidth6,
#numericalbandwidth60 {
	padding: 2px 4px 0 4px;
}

/* A petición ("level db peak db y khz -6db khz tiene que bajar un pelo para
   que quede en linea con los cuadros negros, el contenido de los cuadros
   negros ahora si esta centrado"): con el interior de las cajas ya
   perfecto, lo que quedaba desalineado era el texto normal de fuera
   (level/peak/dB, kHz @ -6dB/-60dB), que quedaba un pelin por encima del
   centro de las cajas negras de al lado. Se prueba con varias cantidades
   (comparativa textshift_candidates2.jpg, sept 2026) y el usuario elige
   +1.5px como la que mejor cuadra. position:relative no afecta al flujo,
   así que el hueco entre caja y texto no cambia: solo se desplaza
   visualmente el texto, sin tocar la caja negra ni su contenido naranja.

   Ese +1.5px se probó y confirmó con capturas donde salían "level"/"peak"
   juntos con "kHz @ -Xdb" (misma comparativa), así que se aplicó igual a
   los dos grupos. Con datos reales en la web del usuario resultó que
   "level"/"peak"/"dB" (S-metro) quedan perfectos con +1.5px, pero el
   "kHz @ -6dB;"/"kHz @ -60dB." (ancho de banda) con ese mismo +1.5px queda
   desplazado hacia ABAJO respecto al centro de su caja (medido sobre la
   captura real del usuario: caja en filas 30-45, centro 37.5; texto de
   fuera con +1.5px puesto en filas ~36-42, centro 39 - un texto que sin
   el +1.5 caería justo en 37.5, el centro exacto). Por eso se separa en
   dos clases: el S-metro conserva +1.5px, el ancho de banda se queda a
   0px (su posición original, sin desplazar) - misma técnica,
   posicionamiento distinto sólo porque partían de alturas de línea
   ligeramente distintas. */
.readout-label-shift {
	position: relative;
	top: 1.5px;
}

/* Re-ajustado de 0px a 1px (sept 2026): el usuario confirmó que con 0px el
   texto de fuera del ancho de banda ("kHz @ -6dB;"/"kHz @ -60dB.") queda
   un poco por ENCIMA de la caja, tiene que bajar un poco (no tanto como
   el +1.5px del S-metro). */
.readout-label-shift-bw {
	position: relative;
	top: 1px;
}

#spantag {
	width: 60px;
	display: inline-block
}

.dialbutton {
	width: 70px;
}

.frontalrig {
	float: left;
	padding-bottom: 5px;
	margin: 5px;
	border-radius: var(--radius);
	display: inline-block;
}


/* General Styles */

a:link,
a:visited {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-strong);
	/* Sin subrayado al pasar el ratón: sólo cambia el color y el cursor ya
	   es de mano por defecto en un enlace, así que no hace falta más. */
	text-decoration: none;
}

/* Ningún enlace se queda con el marco azul de foco "pegado" tras
   pulsarlo — se notaba sobre todo en los que abren pestaña nueva
   (target="_blank": QRZ, websdr.org, Versión móvil, java.html...),
   porque esta página nunca pierde el foco al abrirla. Mismo arreglo que
   ya llevaba sólo el logo de la cabecera (#stationbar a.logo-link),
   ahora aplicado a todos los enlaces del sitio. */
a:focus,
a:active {
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

/* Mismo problema que con los enlaces, pero en los botones verdes/rojos
   de Bootstrap (Iniciar audio, mute/squelch/autonotch, bandwidth,
   memorias, freqstep...): bootstrap.css les pone
   "outline:5px auto -webkit-focus-ring-color" a los 5px al recibir el
   foco, y como esta página no pierde el foco tras un click normal, se
   queda ahí "marcado" hasta que se pincha en otro sitio. Esta regla vive
   en style.css (no en custom.css) a propósito: esta página mete
   bootstrap.css y style.css repetidos vía SSI (uno por cada fragmento
   incluido), y al ir siempre style.css justo después de cada copia de
   bootstrap.css en el documento final, gana la cascada sin necesitar
   !important (custom.css, en cambio, sólo se carga una vez al principio
   y sí necesitaría !important para lo mismo). */
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
	outline: none;
}


/* Header Styles */

#title {
	width: 1000px;
	text-align: left;
}


/* RealTime Spot Styles */

.spotheader {
	font-size: 12px;
	display: inline-block;
	float: left;
	font-weight: bold;
	color: var(--danger);
	background-color: var(--panel-2);
	margin-bottom: 2px;
}

.spotstream {
	background-color: var(--panel-2);
	color: var(--text);
	animation: slide-up 1.0s ease;
}

@keyframes slide-up {
	0% {
		background-color: rgba(255, 92, 92, 0);
	}
	50% {
		background-color: rgba(255, 92, 92, 0.55);
		color: #fff;
	}
	100% {
		background-color: var(--panel-2);
	}
}

.field {
	float: left;
	min-height: 1px;
	font-size: 12px;
}

.qrg {
	width: 75px;
	padding-right: 10px;
	text-align: right;
}

.call {
	width: 100px;
	font-weight: bolder;
}

.date {
	width: 60px;
	text-align: center;
}

.dateresult {
	width: 120px;
}

.comment {
	padding-left: 10px;
	width: 250px;
	overflow: hidden;
}

.commentresult {
	width: 365px;
}

.spotter {
	width: 90px;
}

.origin {
	width: 94px;
}


/* Generic fallback skin for plain, unclassed buttons that the tuner JS
   writes out itself (e.g. the memory recall/erase/store buttons) so they
   don't render as raw OS-default grey buttons inside the dark theme.
   Wrapped in :where() so its specificity is zero: any existing class
   (.btn-success, .btn-danger, .boton-modo-ura, .frecuencia, #numericalsmeter...)
   always wins, regardless of source order. */
:where(input[type="button"], input[type="submit"], input[type="reset"], button) {
	background-color: var(--panel-2);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 4px 8px;
	line-height: 1.3;
	font-size: 12px;
	font-family: var(--font-sans);
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

:where(input[type="button"], input[type="submit"], button):hover:not(:disabled) {
	border-color: var(--accent);
	color: var(--accent);
}

:where(input[type="button"], input[type="submit"], button):disabled {
	opacity: .45;
	cursor: default;
}

:where(input[type="text"], input[type="number"], input[type="range"], select, textarea) {
	background-color: var(--panel-2);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}


/* =========================================================================
   Modo día / noche
   Variables redefinidas para tema claro; el activador vive en
   #themetoggle (botón añadido en la cabecera de index.html) y la lógica
   en js/theme-toggle.js. El cuadro del espectro (fondo #000 del .waterfa
   y los LCD de frecuencia/S-metro) se mantiene siempre oscuro a
   propósito, igual que en un receptor real.
   ========================================================================= */
:root[data-theme="light"] {
	/* Misma familia "Steam", pero en versión clara: paneles con un ligero
	   degradado azulado (nada de blanco puro, que daba demasiado
	   contraste con el resto de la página) y texto azul-marino oscuro,
	   con acentos más saturados/oscuros para mantener buen contraste. */
	--bg-0: #c4cfda;
	--bg-1: #b7c4d1;
	--panel: #dcedfc;
	--panel-2: #cfe8fb;
	--border: #a4cdec;
	--text: #16222f;
	--text-dim: #45576b;
	--heading: #0d1621;
	--accent: #0b6fb8;
	--accent-strong: #085a95;
	--accent-green: #2f8f3f;
	--accent-green-strong: #24722f;
	--accent-green-dim: #3f9d4f;
	--amber: #8a5c08;
	--danger: #c22b2b;
	--shadow: 0 8px 22px -10px rgba(20, 35, 50, .28);
}

/* El fondo original "de cuadros azules" del sitio, tal cual, para el modo
   claro (en el oscuro se deja el degradado azul-marino "Steam"). */
:root[data-theme="light"] body {
	background: url('imagenes/parallax24.jpg');
	background-repeat: repeat;
}

/* Las tarjetas/paneles en modo claro llevaban blanco puro, que resultaba
   demasiado contrastado sobre el fondo de cuadros azules. Se sustituye por
   un degradado CLARAMENTE azul (más celeste/saturado, no un gris apagado)
   y luminoso, para que se note bien el degradado sin volver a caer en
   blanco. Se aplica por encima del color de fondo (--panel) que ya usan
   estas clases, así que si alguna tarjeta no está en esta lista
   simplemente se queda con el tono plano --panel. */
:root[data-theme="light"] .thumbnail,
:root[data-theme="light"] .thumbnail1,
:root[data-theme="light"] .thumbnail2,
:root[data-theme="light"] .thumbnail3,
:root[data-theme="light"] .thumbnail4,
:root[data-theme="light"] .thumbnail5,
:root[data-theme="light"] .thumbnail6,
:root[data-theme="light"] .thumbnail7,
:root[data-theme="light"] .waterfa-card,
:root[data-theme="light"] #stationbar {
	background-image: linear-gradient(160deg, #f3f9ff 0%, #cfe8fb 55%, #9dcdf0 100%);
}

/* Etiquetas "QRZ:" / "E-mail:" de la tarjeta de contacto: en el HTML
   original llevan <font color="#E4DADA"> (un rosa-gris muy pálido) fijo,
   que quedaba bien sobre el fondo oscuro original pero es casi invisible
   sobre el degradado azul claro del tema claro. Se sobreescribe con la
   variable de texto atenuado de cada tema (los atributos color= de
   <font> tienen menos prioridad que cualquier regla CSS, así que esto
   los reemplaza sin tocar el marcado). El valor EA4AOJ/email en verde
   (#0FAC39) no se toca. */
.thumbnail7 font[color="#E4DADA"]{
	color: var(--text-dim);
}

:root[data-theme="light"] .btn-success {
	color: #eafff0;
}
:root[data-theme="light"] .btn-success:hover,
:root[data-theme="light"] .btn-success:focus {
	color: #06240a;
}

#themetoggle{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	padding:0;
	margin-left:auto;
	border:1px solid var(--border);
	border-radius:50%;
	background:var(--panel-2);
	color:var(--text-dim);
	font-size:16px;
	cursor:pointer;
	transition:border-color .15s ease,color .15s ease;
}
#themetoggle:hover{
	border-color:var(--accent);
	color:var(--accent);
}
#themetoggle .glyphicon{ top:0; }