/* Página «FurbyBoard por dentro» montada en makerisland.es: todo cuelga de .fb
   (no de :root ni de body) para no tocar el resto de la web. */

/* Tokens: tema claro (banco de pruebas de día: alfombrilla gris verdosa, máscara verde, cobre) */
.fb {
  --fondo: #e3e9e6;
  --fondo-trama: rgba(29, 90, 57, 0.10);
  --superficie: #f5f8f6;
  --superficie-2: #e8eeeb;
  --superficie-3: #dbe3df;
  --borde: #b4c2bc;
  --borde-fuerte: #75887f;
  --tinta: #12201a;
  --tinta-suave: #4a5b53;
  --tinta-tenue: #6d7d76;
  --mascara: #1d5a39;
  --mascara-oscura: #154229;
  --serigrafia: #f3f6ef;
  --cobre: #a65a22;
  --cobre-claro: #d0874a;
  --oro: #c49312;
  --oro-borde: #8a6608;
  --foco: #0a66c2;
  --ok: #1d8a47;
  --aviso: #b97300;
  --fallo: #c8281f;
  --ok-fondo: rgba(29, 138, 71, 0.12);
  --aviso-fondo: rgba(185, 115, 0, 0.14);
  --fallo-fondo: rgba(200, 40, 31, 0.12);

  /* Raíles en esquemas y diagramas (convención del guion) */
  --r-vbus: #d9690f;
  --r-bat: #b58600;
  --r-vsys: #c9302a;
  --r-3v3: #1b8c46;
  --r-v6: #7b3fc4;
  --r-cam: #1f88bf;
  --r-gnd: #7b8883;
  --r-sen: #3a4a44;
  --r-ana: #4f6390;
  --pieza-fondo: #e6ece9;
  --pieza-borde: #2e3c36;
  --pieza-texto: #12201a;
  --led-apagado: #c9d1cd;

  /* Pantalla del osciloscopio: oscura en los dos temas, como en el banco */
  --osc-fondo: #08110d;
  --osc-marco: #1b2520;
  --osc-reticula: rgba(150, 205, 175, 0.13);
  --osc-eje: rgba(150, 205, 175, 0.34);
  --osc-texto: #b8d3c3;
  --osc-cursor: #f2f5f3;
  --t-vbus: #ffa04a;
  --t-bat: #ffd84a;
  --t-vsys: #ff6b5d;
  --t-3v3: #5fe390;
  --t-v6: #c38fff;
  --t-cam: #7fd4ff;
  --t-ch1: #ffe14d;
  --t-ch2: #4de1ff;
  --t-ch3: #ff63d4;
  --t-ch4: #6f95ff;
  --t-dig: #e6efea;

  --sombra: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 22px -14px rgba(18, 32, 26, 0.45);
  --radio: 6px;
  --f-titulo: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  /* El texto corrido, con la Inter de la web; títulos y lecturas conservan su aire de banco de pruebas */
  --f-texto: "Inter", "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  color-scheme: light;
}

/* Tema oscuro: máscara verde de noche, serigrafía blanca */
@media (prefers-color-scheme: dark) {
  .fb:not([data-theme="light"]) {
    --fondo: #08100c;
    --fondo-trama: rgba(110, 200, 150, 0.07);
    --superficie: #0f1b15;
    --superficie-2: #14241c;
    --superficie-3: #1a2e24;
    --borde: #24392e;
    --borde-fuerte: #3f5d4d;
    --tinta: #e3ece6;
    --tinta-suave: #9ab0a3;
    --tinta-tenue: #758b7f;
    --mascara: #1b4d31;
    --mascara-oscura: #123722;
    --serigrafia: #eef3ea;
    --cobre: #e39555;
    --cobre-claro: #f0b27c;
    --oro: #e8bc3a;
    --oro-borde: #b58c14;
    --foco: #7cc4ff;
    --ok: #4fd283;
    --aviso: #f0b13a;
    --fallo: #ff6a5e;
    --ok-fondo: rgba(79, 210, 131, 0.14);
    --aviso-fondo: rgba(240, 177, 58, 0.15);
    --fallo-fondo: rgba(255, 106, 94, 0.15);
    --r-vbus: #ff9a3c;
    --r-bat: #f2cc30;
    --r-vsys: #ff5a4e;
    --r-3v3: #4fd67f;
    --r-v6: #b884ff;
    --r-cam: #72cbf5;
    --r-gnd: #6f7d77;
    --r-sen: #dfe7e3;
    --r-ana: #b6c6ec;
    --pieza-fondo: #172a21;
    --pieza-borde: #a9bdb2;
    --pieza-texto: #e3ece6;
    --led-apagado: #2b3d34;
    --osc-fondo: #040906;
    --osc-marco: #0c1611;
    --sombra: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 26px -16px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}
.fb[data-theme="dark"] {
  --fondo: #08100c;
  --fondo-trama: rgba(110, 200, 150, 0.07);
  --superficie: #0f1b15;
  --superficie-2: #14241c;
  --superficie-3: #1a2e24;
  --borde: #24392e;
  --borde-fuerte: #3f5d4d;
  --tinta: #e3ece6;
  --tinta-suave: #9ab0a3;
  --tinta-tenue: #758b7f;
  --mascara: #1b4d31;
  --mascara-oscura: #123722;
  --serigrafia: #eef3ea;
  --cobre: #e39555;
  --cobre-claro: #f0b27c;
  --oro: #e8bc3a;
  --oro-borde: #b58c14;
  --foco: #7cc4ff;
  --ok: #4fd283;
  --aviso: #f0b13a;
  --fallo: #ff6a5e;
  --ok-fondo: rgba(79, 210, 131, 0.14);
  --aviso-fondo: rgba(240, 177, 58, 0.15);
  --fallo-fondo: rgba(255, 106, 94, 0.15);
  --r-vbus: #ff9a3c;
  --r-bat: #f2cc30;
  --r-vsys: #ff5a4e;
  --r-3v3: #4fd67f;
  --r-v6: #b884ff;
  --r-cam: #72cbf5;
  --r-gnd: #6f7d77;
  --r-sen: #dfe7e3;
  --r-ana: #b6c6ec;
  --pieza-fondo: #172a21;
  --pieza-borde: #a9bdb2;
  --pieza-texto: #e3ece6;
  --led-apagado: #2b3d34;
  --osc-fondo: #040906;
  --osc-marco: #0c1611;
  --sombra: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 26px -16px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

.fb *, .fb *::before, .fb *::after { box-sizing: border-box; }
.fb {
  margin: 0;
  background-color: var(--fondo);
  background-image: radial-gradient(var(--fondo-trama) 1px, transparent 1.2px);
  background-size: 20px 20px;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.5;
  /* clip y no hidden: hidden haría de .fb un contenedor de scroll y el banco dejaría de pegarse */
  overflow-x: clip;
}
.fb .app {
  max-width: 1480px;
  margin: 0 auto;
  padding-block: 0 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.fb h1, .fb h2, .fb h3, .fb h4 { font-family: var(--f-titulo); font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; margin: 0; }
.fb p { margin: 0 0 0.6em; }
.fb a { color: inherit; }
.fb :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 3px; }
.fb .mono { font-family: var(--f-mono); }
.fb .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Barra superior: la fuente de banco global */
.fb .banco {
  /* Pegado justo debajo de la barra fija de la web (h-16) */
  position: sticky; top: 64px; z-index: 40;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--mascara);
  color: var(--serigrafia);
  border-bottom: 3px solid var(--cobre);
  box-shadow: 0 6px 18px -12px rgba(0,0,0,0.6);
}
.fb .banco__fila { max-width: 1480px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.fb .marca { display: flex; align-items: baseline; gap: 10px; margin-right: auto; min-width: 0; }
.fb .marca h1 { font-size: 1.55rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.fb .marca small { font-family: var(--f-mono); font-size: 0.72rem; opacity: 0.8; white-space: nowrap; }

.fb .layout { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 22px; margin-top: 18px; }
.fb .indice { position: sticky; top: 150px; align-self: start; }
.fb .contenido { min-width: 0; }
@media (max-width: 1500px) { .fb .marca small { display: none; } }
@media (max-width: 700px) { .fb .banco { position: static; } .fb .indice { position: static; } }
@media (max-width: 1100px) {
  .fb .layout { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 10px; }
  .fb .indice { position: static; }
}