/* ============================================================
   illanes00-owrx.css — Skin "fork" de illanes00 radio para OpenWebRX
   DESIGN SYSTEM canónico v5 (style.illanes00.cl/v5/illanes.min.css):
     · Fuentes: IBM Plex Sans (UI/titulares) + JetBrains Mono (números).
     · FLAT / INDUSTRIAL: --radius:0 => SIN border-radius en NINGÚN lado.
     · Sin modas: nada de glassmorphism ni gradientes/sombras grandes.
     · Tokens en MODO CLARO por defecto; oscuro solo con html[data-theme="dark"].
     · La CASCADA / WATERFALL es oscura por naturaleza: su zona (canvas,
       espectro, cascada, s-meter) se mantiene oscura SIEMPRE, en ambos temas.
   Solo CSS inyectado (sin forkear OWRX): se carga DESPUÉS de openwebrx.css.

   La hoja canónica se enlaza desde index.html:
     https://style.illanes00.cl/v5/illanes.min.css
   Aquí redefinimos los tokens inline como RESPALDO por si no carga.
   ============================================================ */

/* ---- Tokens canónicos v5 (respaldo si no carga la hoja remota) ---- */
:root{
  --bg:#f6f7f8; --paper:#ffffff; --ink:#0f1113; --muted:#4b5563;
  --line:#d5dbe3; --line-strong:#a9b3c2;
  --c-blue:#3763e0; --c-green:#0b7e59; --c-amber:#d97706; --c-red:#c0352b;
  --c-charcoal:#111314;

  --font-sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  /* FLAT: radius global a 0 (canónico). Cualquier referencia a var(--radius)
     resuelve a 0. No usamos border-radius literal en ningún sitio. */
  --radius:0;

  /* Derivados del skin (no canónicos): superficies, navbar */
  --nav-h:46px;
  --primary:var(--c-blue);
  --on-primary:#ffffff;
  --surface:var(--paper);
  --surface-2:var(--bg);

  /* Zona oscura del espectro (constante en ambos temas) */
  --wf-bg:#0c1014; --wf-ink:#e9eef2; --wf-muted:#8d96a3; --wf-line:#222a33;
  --wf-card:#141a20; --wf-card2:#1b232c;
}
html[data-theme="dark"]{
  --bg:#0c0d0f; --paper:#111316; --ink:#e9eef2; --muted:#9aa4b2;
  --line:#2a2f37; --line-strong:#3a414c;
  --primary:var(--c-blue); --on-primary:#ffffff;
}
/* Si el usuario no eligió tema, respeta la preferencia del sistema. */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#0c0d0f; --paper:#111316; --ink:#e9eef2; --muted:#9aa4b2;
    --line:#2a2f37; --line-strong:#3a414c;
  }
}

/* ---- Base ------------------------------------------------- */
html, body{
  background:var(--bg)!important; color:var(--ink)!important;
  font-family:var(--font-sans)!important;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#webrx-page-container{
  background:var(--bg)!important; color:var(--ink)!important;
  font-family:var(--font-sans)!important;
  /* Empuja TODO el contenido de OWRX bajo la navbar fija. El valor real
     lo fija también el JS (var --nav-h medida); esto es respaldo. */
  padding-top:var(--nav-h)!important; box-sizing:border-box;
}
.openwebrx-meta-panel, #webrx-content, .openwebrx-message-panel{
  font-family:var(--font-sans)!important;
}

/* FLAT global: anula CUALQUIER border-radius que OWRX o nuestros propios
   inyectores hayan podido aplicar. Industrial, esquinas vivas. */
*{ border-radius:0!important; }

/* ============================================================
   ZONA OSCURA DEL ESPECTRO (waterfall / canvas / cascada)
   Se mantiene oscura SIEMPRE. No tocamos el layout del canvas.
   ============================================================ */
#webrx-canvas-container,
.openwebrx-waterfall-container,
#openwebrx-scale-container,
#openwebrx-frequency-container,
#webrx-canvas-context-menu{
  background:var(--wf-bg)!important;
}
/* Marco sobrio (1px, sin sombra grande, sin radius) — flat. */
.openwebrx-waterfall-container{
  border:1px solid var(--wf-line)!important;
  overflow:hidden;
  isolation:isolate;
}
#openwebrx-scale-container, #openwebrx-scale-canvas{ color:var(--wf-ink)!important; }

/* ============================================================
   1) BARRA DE NAVEGACIÓN illanes00 (insertada por JS: #il00-nav)
      Look canónico v5: .topbar plano, logo i00, rutas tipo .routebar.
   ============================================================ */
#il00-nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100000;
  display:flex; align-items:center; gap:0;
  padding:0 14px; box-sizing:border-box;
  background:var(--surface)!important;
  border-bottom:1px solid var(--line-strong);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
#il00-nav .il00-brand{
  display:flex; align-items:center; gap:9px;
  font-weight:800; font-size:.95rem; color:var(--ink); text-decoration:none;
  margin-right:16px; padding-right:16px; white-space:nowrap;
  border-right:1px solid var(--line);
}
/* Logo i00: cuadrado plano azul con monograma (réplica sobria del shell). */
#il00-nav .il00-brand .il00-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:0 0 auto;
  background:var(--c-charcoal); color:#fff;
  font-family:var(--font-mono); font-weight:700; font-size:.72rem; line-height:1;
  letter-spacing:-.02em;
}
#il00-nav .il00-brand .il00-txt b{ color:var(--ink); font-weight:800; }
#il00-nav .il00-brand .il00-txt .dim{ color:var(--muted); font-weight:600; }

#il00-nav .il00-links{ display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; overflow:hidden; }
#il00-nav a.il00-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px;
  color:var(--ink); text-decoration:none; font-size:.8125rem; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
#il00-nav a.il00-link:hover{ background:var(--surface-2); border-color:var(--line-strong); color:var(--ink); }
#il00-nav a.il00-link.active{
  background:var(--primary); color:var(--on-primary); border-color:var(--primary);
  font-weight:700; pointer-events:none;
}
#il00-nav .il00-spacer{ flex:1 1 auto; }

/* Botón hamburguesa — oculto en desktop, visible en móvil. */
#il00-burger{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; margin:0 6px 0 0;
  border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--ink);
  cursor:pointer; flex:0 0 auto; transition:.15s ease;
}
#il00-burger:hover{ border-color:var(--primary); color:var(--primary); }
#il00-burger .il00-burger-bars{
  display:inline-flex; flex-direction:column; justify-content:center;
  gap:4px; width:20px; height:16px;
}
#il00-burger .il00-burger-bars span{
  display:block; height:2px; width:100%;
  background:currentColor; transition:transform .2s ease,opacity .2s ease;
}
#il00-nav.il00-open #il00-burger .il00-burger-bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
#il00-nav.il00-open #il00-burger .il00-burger-bars span:nth-child(2){ opacity:0; }
#il00-nav.il00-open #il00-burger .il00-burger-bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Botón Configuración — .btn-primary canónico (azul, texto blanco). */
#il00-nav a.il00-settings{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; white-space:nowrap;
  color:#fff; text-decoration:none; font-size:.8125rem; font-weight:700;
  border:1px solid var(--primary); background:var(--primary);
  transition:background .15s ease,border-color .15s ease;
}
#il00-nav a.il00-settings:hover{ background:#2952cc; border-color:#2952cc; }
#il00-nav a.il00-settings .il00-set-ico{ font-size:.95rem; line-height:1; }

/* Toggle de tema claro/oscuro — botón plano canónico. */
#il00-theme{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-left:8px; padding:0;
  cursor:pointer;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); font-size:1rem; line-height:1;
  transition:.15s ease;
}
#il00-theme:hover{ border-color:var(--primary); color:var(--primary); }
#il00-theme::before{ content:"\263E"; }                 /* en claro: ofrece oscuro */
html[data-theme="dark"] #il00-theme::before{ content:"\2600"; }  /* en oscuro: ofrece claro */

/* ============================================================
   2) HEADER nativo de OWRX (logo + Estado/Registro/Receptor/Mapa/Config)
      Lo dejamos plano y discreto: es secundario respecto a #il00-nav.
   ============================================================ */
.webrx-top-container, .webrx-top-bar{
  background:var(--surface)!important;
  border-bottom:1px solid var(--line)!important;
  color:var(--ink)!important;
}
.webrx-rx-title, .nano-content{ color:var(--ink)!important; }
.webrx-rx-desc{ color:var(--muted)!important; }
.openwebrx-main-buttons{
  /* Los labels en español ("Configuración", "Receptor") son más largos que
     el ancho nativo de 55px y se recortaban contra el borde. Dejamos que la
     sección y cada botón se ajusten al contenido, con un colchón a la derecha. */
  padding-right:14px!important; box-sizing:border-box;
  flex-wrap:nowrap;
}
.openwebrx-main-buttons .button{
  color:var(--ink)!important; transition:.15s ease;
  width:auto!important; min-width:54px; padding:4px 8px!important;
  white-space:nowrap; font-size:.72rem;
}
.openwebrx-main-buttons .button:hover{ background:var(--surface-2)!important; color:var(--primary)!important; }
.openwebrx-main-buttons .button svg{ fill:currentColor; }

/* ============================================================
   PANELES claros (los que NO son la cascada)
   ============================================================ */
.openwebrx-panel{
  background:var(--surface)!important; border:1px solid var(--line-strong)!important;
  color:var(--ink)!important;
}
.openwebrx-panel-line{ color:var(--ink)!important; }

.openwebrx-button{
  background:var(--surface)!important; border:1px solid var(--line-strong)!important;
  color:var(--ink)!important;
  font-family:var(--font-sans)!important; font-weight:600;
  transition:.15s ease;
}
.openwebrx-button:hover{ background:var(--surface-2)!important; border-color:var(--ink)!important; color:var(--ink)!important; }
.openwebrx-button.highlighted, .openwebrx-demodulator-button.highlighted,
.openwebrx-button.openwebrx-button-active{
  background:var(--primary)!important; color:var(--on-primary)!important;
  border-color:var(--primary)!important; font-weight:700;
}
.openwebrx-button svg{ fill:currentColor; }

/* Frecuencias en MONO (números) */
.webrx-actual-freq{
  color:var(--primary)!important; font-family:var(--font-mono)!important;
  font-variant-numeric:tabular-nums; font-weight:700;
}
.webrx-mouse-freq{ color:var(--muted)!important; font-family:var(--font-mono)!important; }

select, input[type=text], input[type=number]{
  background:var(--surface)!important; color:var(--ink)!important;
  border:1px solid var(--line-strong)!important;
  font-family:var(--font-sans)!important;
}
input[type=number]{ font-family:var(--font-mono)!important; }
select:focus, input:focus{ outline:none; border-color:var(--primary)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 28%,transparent); }

/* ---- Sliders accent primario ------------------------------ */
input[type=range].openwebrx-panel-slider{
  accent-color:var(--primary);
  -webkit-appearance:none; appearance:none;
  height:6px;
  background:var(--surface-2)!important; border:1px solid var(--line-strong)!important;
}
input[type=range].openwebrx-panel-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px;
  background:var(--primary); border:2px solid var(--paper); cursor:pointer;
}
input[type=range].openwebrx-panel-slider::-moz-range-thumb{
  width:13px; height:13px;
  background:var(--primary); border:2px solid var(--paper); cursor:pointer;
}

/* ---- Barras de estado (búfer, CPU, oyentes) --------------- */
.openwebrx-progressbar{
  border:1px solid var(--line-strong)!important;
  background:var(--surface-2)!important;
}
.openwebrx-progressbar-bar{
  background:color-mix(in srgb,var(--primary) 30%,transparent)!important;
}
.openwebrx-progressbar-text{ color:var(--ink)!important; font-family:var(--font-mono)!important; }

/* ============================================================
   S-METER (zona oscura del receptor adyacente al canvas)
   ============================================================ */
#openwebrx-smeter-db{
  color:var(--c-amber)!important; font-family:var(--font-mono)!important; font-weight:700;
}
#openwebrx-smeter{
  background:var(--wf-card2)!important; border:1px solid var(--wf-line)!important;
}
#openwebrx-smeter .openwebrx-smeter-bar{
  background:linear-gradient(90deg,var(--c-blue),var(--c-amber))!important;
}

/* ============================================================
   3) MINI-ENCABEZADOS DE SECCIÓN del panel receptor (insertados por JS)
      Estilo etiqueta v5: uppercase, tracking, línea inferior.
   ============================================================ */
.il00-section-title{
  display:flex; align-items:center; gap:7px;
  margin:14px 2px 6px; padding:0 0 4px;
  font-family:var(--font-sans);
  font-weight:700; font-size:.6875rem; line-height:1.2;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  user-select:none;
}
.il00-section-title .il00-ico{ font-size:.85rem; color:var(--primary); }
.il00-section-title:first-child{ margin-top:4px; }

/* ============================================================
   4) TOOLBAR illanes00 (#il00-toolbar) — UN solo bloque agrupado dentro
      del panel del receptor. Reúne: sintonía por número, salto ◀▶,
      zoom, escaneo, auto-modo y auto-squelch. Etiquetas claras, plano,
      sin solaparse con los controles nativos.
      Lo inyecta es-owrx.js / il00-scan.js / il00-squelch.js / il00-tools.js
      colaborando sobre este contenedor.
   ============================================================ */
#il00-toolbar{
  margin:8px 0 4px; padding:0;
  border:1px solid var(--line-strong);
  background:var(--surface);
  font-family:var(--font-sans);
}
/* Cada grupo: etiqueta arriba + fila de controles, separados por línea. */
#il00-toolbar .il00-tgroup{
  padding:7px 9px;
  border-bottom:1px solid var(--line);
}
#il00-toolbar .il00-tgroup:last-child{ border-bottom:0; }
#il00-toolbar .il00-tlabel{
  display:block; margin:0 0 5px;
  font-size:.625rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
#il00-toolbar .il00-trow{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
/* Botón de toolbar (plano, etiqueta de texto, no solo icono) */
#il00-toolbar .il00-tbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-height:30px; padding:5px 9px;
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); font-size:.75rem; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
#il00-toolbar .il00-tbtn:hover{ background:var(--surface-2); border-color:var(--ink); }
#il00-toolbar .il00-tbtn .il00-tico{
  font-family:var(--font-mono); font-weight:700; font-size:.85rem; line-height:1;
}
/* Botón primario (acción principal: Escanear / Ir) */
#il00-toolbar .il00-tbtn.primary{
  background:var(--primary); border-color:var(--primary); color:#fff;
}
#il00-toolbar .il00-tbtn.primary:hover{ background:#2952cc; border-color:#2952cc; }
/* Botón activo (escaneando) */
#il00-toolbar .il00-tbtn.active{
  background:var(--c-red); border-color:var(--c-red); color:#fff;
}
#il00-toolbar .il00-tbtn.active:hover{ background:#a02d25; border-color:#a02d25; }
/* Botón que crece para llenar la fila (Escanear) */
#il00-toolbar .il00-tbtn.grow{ flex:1 1 auto; }

/* Campo numérico con sufijo de unidad dentro del toolbar */
#il00-toolbar .il00-field{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--line-strong); background:var(--surface);
}
#il00-toolbar .il00-field input{
  border:0!important; background:transparent!important;
  padding:5px 7px; min-height:30px; box-sizing:border-box;
  font-family:var(--font-mono)!important; font-size:.8125rem; color:var(--ink)!important;
  width:78px; text-align:right;
}
#il00-toolbar .il00-field input:focus{ outline:none; box-shadow:none; }
#il00-toolbar .il00-field .il00-unit{
  display:inline-flex; align-items:center; padding:0 8px;
  background:var(--surface-2); border-left:1px solid var(--line);
  font-size:.6875rem; font-weight:700; color:var(--muted); letter-spacing:.04em;
}
#il00-toolbar .il00-field.sq input{ width:54px; }

/* Aviso amigable cuando el dongle no está (insertado por JS) */
#il00-nodongle{
  margin:16px 0; padding:12px 14px;
  background:color-mix(in srgb,var(--c-amber) 12%,var(--paper));
  border:1px solid var(--c-amber);
  color:var(--ink);
  font-family:var(--font-sans); font-size:.8125rem; line-height:1.5;
}
#il00-nodongle b{ color:var(--c-amber); }
#il00-nodongle a{ color:var(--primary); font-weight:600; }

/* ---- Overlays (iniciar / error) y diálogos ---------------- */
/* CRÍTICO (click-para-oír): el overlay debe quedar POR ENCIMA de #il00-nav
   para que el primer gesto del usuario active el audio. */
.openwebrx-overlay{
  background:rgba(15,17,19,.55)!important;
  z-index:100001!important;
  cursor:pointer;
}
#openwebrx-autoplay-overlay{ cursor:pointer!important; }
html[data-theme="dark"] .openwebrx-overlay{ background:rgba(0,0,0,.66)!important; }
.openwebrx-overlay .overlay-content,
.openwebrx-dialog{
  background:var(--surface)!important; border:1px solid var(--line-strong)!important;
  color:var(--ink)!important;
  font-family:var(--font-sans)!important;
  padding:28px 34px;
}
#openwebrx-autoplay-overlay .overlay-content svg{ fill:var(--primary)!important; }
#openwebrx-autoplay-overlay .overlay-content > div{
  margin-top:14px; font-weight:700; color:var(--ink)!important;
}

/* ============================================================
   Toast (il00-scan.js / il00-tools.js) — plano, primario, texto blanco.
   ============================================================ */
#il00-toast{
  background:var(--primary)!important; color:#fff!important;
  font-family:var(--font-sans)!important; font-weight:700;
  border:1px solid var(--primary)!important;
  box-shadow:none!important;
}

/* ============================================================
   RESPONSIVE — tablet/estrecho.
   ============================================================ */
@media (max-width:760px){
  #il00-nav{ padding:0 12px; }
  #il00-nav .il00-brand{ margin-right:10px; padding-right:10px; }
  #il00-nav .il00-brand .il00-txt{ display:none; }
  #il00-nav a.il00-link{ padding:7px 9px; font-size:.75rem; }
  #il00-nav a.il00-settings .il00-set-txt{ display:none; }
  #il00-nav a.il00-settings{ padding:8px 10px; }
}

/* ============================================================
   RESPONSIVE MÓVIL (≤640px / ≤480px)
   ============================================================ */
@media (max-width:640px){
  html, body{ max-width:100%; overflow-x:hidden; }

  #il00-nav{ padding:0 10px; gap:6px; flex-wrap:nowrap; }
  #il00-burger{ display:inline-flex; }
  #il00-nav .il00-brand{ flex:0 0 auto; margin-right:auto; padding-right:0; border-right:0; }
  #il00-nav .il00-spacer{ display:none; }

  #il00-nav .il00-links{
    position:fixed; left:0; right:0; top:var(--nav-h);
    flex-direction:column; align-items:stretch; gap:2px;
    padding:8px; box-sizing:border-box;
    background:var(--surface); border-bottom:1px solid var(--line-strong);
    overflow:hidden auto; max-height:calc(100vh - var(--nav-h));
    display:none;
  }
  #il00-nav.il00-open .il00-links{ display:flex; }
  #il00-nav a.il00-link{
    flex:0 0 auto; width:100%; box-sizing:border-box;
    min-height:44px; padding:11px 14px; font-size:.95rem;
    justify-content:flex-start; border:1px solid transparent;
  }
  #il00-nav a.il00-link:hover{ background:var(--surface-2); border-color:var(--line-strong); }

  #il00-nav a.il00-settings{ flex:0 0 auto; min-height:44px; padding:0 12px; }
  #il00-theme{ flex:0 0 auto; width:44px; height:44px; margin-left:4px; }

  .openwebrx-waterfall-container{ width:100%!important; max-width:100%!important; }
  #webrx-canvas-container, #openwebrx-scale-container,
  #openwebrx-frequency-container{ width:100%!important; max-width:100%!important; }

  #openwebrx-panel-receiver{
    width:100%!important; max-width:100%!important;
    left:0!important; right:0!important; box-sizing:border-box;
  }
  .openwebrx-panel-flex-rule,
  #openwebrx-panel-receiver .openwebrx-panel-line{
    display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  }
  #openwebrx-panel-receiver .openwebrx-button,
  #openwebrx-panel-receiver .openwebrx-demodulator-button{
    flex:1 1 auto; min-width:54px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px; font-size:.8125rem;
  }
  #openwebrx-panel-receiver select,
  #openwebrx-panel-receiver input[type=text],
  #openwebrx-panel-receiver input[type=number]{
    min-height:44px; font-size:16px;
  }
  /* Toolbar móvil: botones táctiles, campos a ancho cómodo */
  #il00-toolbar .il00-tbtn{ min-height:44px; flex:1 1 auto; padding:10px; font-size:.8125rem; }
  #il00-toolbar .il00-field input{ min-height:44px; font-size:16px; }
  #il00-toolbar .il00-trow{ gap:6px; }

  input[type=range].openwebrx-panel-slider{ height:8px; }
  input[type=range].openwebrx-panel-slider::-webkit-slider-thumb{ width:20px; height:20px; }
  input[type=range].openwebrx-panel-slider::-moz-range-thumb{ width:18px; height:18px; }

  .il00-section-title{ margin:12px 2px 5px; }
}

@media (max-width:480px){
  #il00-nav{ padding:0 8px; }
  #il00-nav a.il00-settings .il00-set-ico{ font-size:1.05rem; }
  #openwebrx-panel-receiver{ padding-left:8px!important; padding-right:8px!important; }
  #openwebrx-panel-receiver .openwebrx-button,
  #openwebrx-panel-receiver .openwebrx-demodulator-button{
    min-width:46px; min-height:44px; padding:10px 8px;
  }
  .webrx-actual-freq{ font-size:1.05rem; }
}