/* ==========================================================================
   Detector de Periféricos — estilos
   --------------------------------------------------------------------------
   1.  Tokens: tema "calm" (claro) y "alert" (rojo/negro)
   2.  Base
   3.  Fondo y efectos de ambiente
   4.  Mundo y cámara
   5.  Ilustración SVG
   6.  Conectores USB y cables
   7.  Pantalla de administración + PowerShell
   8.  HUD
   9.  Dock: pista, botón "Ver detalles" y cuenta atrás
   10. Modal
   11. Keyframes
   12. Responsive y movimiento reducido
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, "JetBrains Mono", ui-monospace, monospace;

  --t-mood: 1400ms;                         /* duración del cambio de atmósfera */
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Interfaz */
  --bg: #dcecea;
  --ink: #1b3140;
  --ink-soft: #56707d;
  --accent: #178f82;
  --accent-soft: rgba(23, 143, 130, .16);
  --danger: #ff3347;
  --chip-bg: rgba(255, 255, 255, .8);
  --chip-line: rgba(27, 49, 64, .1);

  /* Escena */
  --floor: #d8c7aa;
  --floor-line: #c6b193;
  --baseboard: #f5f8f6;
  --frame: #ffffff;
  --frame-shade: #e6eeec;
  --desk: #dcb68a;
  --desk-edge: #c79d6e;
  --desk-leg: #b98f63;
  --shadow: rgba(27, 49, 64, .12);
  --case: #fbfcfd;
  --case-line: #cfdae3;
  --case-2: #eef3f7;
  --case-3: #d5dee6;
  --glass: #e4eff4;
  --mobo: #d2dfe8;
  --fan: #c2d1dc;
  --fan-blade: #a9bccb;
  --component: #b5c6d4;
  --rgb: #5fd0bd;
  --shroud: #dbe5ec;
  --label: #7f97a7;
  --port: #3b4a57;
  --eth: #8fa3b3;
  --bezel: #263542;
  --stand: #b9c6d1;
  --kb: #f1f5f8;
  --kb-line: #cdd8e1;
  --kb-keys: #d4dee6;
  --cable: #45525f;
  --cable-shine: rgba(255, 255, 255, .25);
  --plug-mouse: #ff8a6b;
  --plug-keyboard: #7c8bff;
  --led-on: #2fd08f;
  --led-off: #9aa9b5;
  --lamp-cord: #8da0ad;
  --lamp-shade: #178f82;
  --lamp-bulb: #fff6d8;
  --lamp-light: #fff4cc;
  --net: #bccdd8;
  --net-flow: #178f82;
  --net-clip: #a4b8c6;
  --leaf: #5fb58a;
  --leaf-2: #3f9a6e;
  --pot: #e8a07c;
  --pot-2: #d98b66;
  --clock-face: #ffffff;
  --clock-rim: #1b3140;
  --beacon: #d7e0e6;
  --plaque: #ffffff;
  --plaque-ink: #56707d;

  /* Modal (siempre claro, en ambos temas) */
  --card-bg: #f6fafa;
  --card-ink: #1b3140;
  --card-soft: #5a707c;
  --card-line: rgba(27, 49, 64, .1);
}

/* Tema de alerta: sólo se redefinen tokens */
body[data-mood="alert"] {
  --bg: #0d0406;
  --ink: #fde8ea;
  --ink-soft: #d49aa1;
  --accent: #ff3347;
  --accent-soft: rgba(255, 51, 71, .22);
  --chip-bg: rgba(38, 7, 12, .78);
  --chip-line: rgba(255, 80, 96, .28);

  --floor: #150709;
  --floor-line: #2a0d12;
  --baseboard: #1f0a0e;
  --frame: #2a1115;
  --frame-shade: #210d10;
  --desk: #2c1216;
  --desk-edge: #3a171c;
  --desk-leg: #230d10;
  --shadow: rgba(0, 0, 0, .45);
  --case: #241114;
  --case-line: #4a1d23;
  --case-2: #2d1519;
  --case-3: #3a1a1f;
  --glass: #1a0a0d;
  --mobo: #26100f;
  --fan: #341619;
  --fan-blade: #4a1f25;
  --component: #3d1a20;
  --rgb: #ff3347;
  --shroud: #2a1216;
  --label: #7a3a42;
  --port: #080304;
  --eth: #4a2328;
  --bezel: #0b0405;
  --stand: #2a1216;
  --kb: #2a1216;
  --kb-line: #3d1a20;
  --kb-keys: #3d1a20;
  --cable: #150809;
  --cable-shine: rgba(255, 90, 100, .18);
  --plug-mouse: #b8503c;
  --plug-keyboard: #5157ad;
  --led-on: #2fd08f;
  --led-off: #3a1a1f;
  --lamp-cord: #3a1a1f;
  --lamp-shade: #2a1216;
  --lamp-bulb: #3a1a1f;
  --lamp-light: #ff3347;
  --net: #3f151b;
  --net-flow: #ff3347;
  --net-clip: #4a1d23;
  --leaf: #3a1a1c;
  --leaf-2: #2e1416;
  --pot: #4a1d22;
  --pot-2: #3a161a;
  --clock-face: #1f0b0e;
  --clock-rim: #4a1d23;
  --beacon: #ff3347;
  --plaque: #2a1115;
  --plaque-ink: #ff8a95;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-mood) ease, color var(--t-mood) ease;
}
button { font: inherit; color: inherit; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }

.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;
}

/* 3. Fondo y efectos ------------------------------------------------------- */
.backdrop { position: fixed; inset: 0; z-index: 0; }
.backdrop__layer { position: absolute; inset: 0; transition: opacity var(--t-mood) ease; }
.backdrop__layer--calm {
  background:
    radial-gradient(60vmax 42vmax at 68% 16%, rgba(255, 246, 219, .75), transparent 70%),
    linear-gradient(180deg, #d6ebe8 0%, #e3efeb 58%, #eaeee4 100%);
}
.backdrop__layer--alert {
  opacity: 0;
  background:
    radial-gradient(70vmax 50vmax at 50% 28%, #4d0c16 0%, transparent 70%),
    linear-gradient(180deg, #1b0609 0%, #0c0305 100%);
}
body[data-mood="alert"] .backdrop__layer--alert { opacity: 1; }

.fx { position: fixed; inset: 0; pointer-events: none; }
.fx--vignette {
  z-index: 5;
  opacity: 0;
  transition: opacity var(--t-mood) ease;
}
.fx--vignette::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(150, 0, 18, .62) 100%);
}
body[data-mood="alert"] .fx--vignette { opacity: 1; }
body[data-mood="alert"] .fx--vignette::before { animation: heartbeat 1.6s ease-in-out infinite; }

.fx--scanlines {
  z-index: 6;
  opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  transition: opacity var(--t-mood) ease;
}
body[data-mood="alert"] .fx--scanlines { opacity: .35; }

.fx--flash {
  z-index: 7;
  opacity: 0;
  background: radial-gradient(circle at 35% 45%, #ff5a68, #b0001a);
  mix-blend-mode: screen;
}

/* 4. Mundo y cámara -------------------------------------------------------- */
.viewport {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  overflow: clip;              /* evita que el foco desplace la escena */
}
.world {
  position: absolute;
  top: 0; left: 0;
  width: 3600px;
  height: 1000px;
  transform-origin: 0 0;
}
.world__art {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  pointer-events: none;
}

/* 5. Ilustración SVG ------------------------------------------------------- */
/* Todos los rellenos/trazos se funden cuando cambia el tema */
.world__art :is(rect, path, circle, ellipse, polygon, line, text) {
  transition: fill var(--t-mood) ease, stroke var(--t-mood) ease;
}
.stop-lamp { stop-color: var(--lamp-light); transition: stop-color var(--t-mood) ease; }

.c-floor      { fill: var(--floor); }
.c-floor-line { fill: var(--floor-line); }
.c-baseboard  { fill: var(--baseboard); }
.c-frame      { fill: var(--frame); }
.c-sill       { fill: var(--frame-shade); }
.c-desk-top   { fill: var(--desk); }
.c-desk-edge  { fill: var(--desk-edge); }
.c-desk-leg   { fill: var(--desk-leg); }
.c-shadow     { fill: var(--shadow); }

.c-case       { fill: var(--case); stroke: var(--case-line); stroke-width: 3; }
.c-case-2     { fill: var(--case-2); }
.c-case-3     { fill: var(--case-3); }
.c-vent       { fill: none; stroke: var(--case-line); stroke-width: 3; stroke-linecap: round; }
.c-glass      { fill: var(--glass); stroke: var(--case-line); stroke-width: 2; }
.c-mobo       { fill: var(--mobo); }
.c-fan-ring   { fill: var(--fan); }
.c-fan-blades { fill: var(--fan-blade); }
.c-fan-hub    { fill: var(--case-3); }
.c-ram, .c-gpu { fill: var(--component); }
.c-rgb        { fill: var(--rgb); }
.c-shroud     { fill: var(--shroud); }
.c-shine      { fill: #ffffff; opacity: .45; transition: opacity var(--t-mood) ease; }
body[data-mood="alert"] .c-shine { opacity: .05; }
.c-foot       { fill: var(--case-3); }
.c-port       { fill: var(--port); }
.c-eth        { fill: var(--eth); }
.tower__label { fill: var(--label); font: 800 22px var(--font-display); letter-spacing: .06em; }
.tower__label--sm { font-size: 15px; letter-spacing: .14em; }

.c-bezel      { fill: var(--bezel); }
.c-stand      { fill: var(--stand); }
.c-screen-off { fill: #06080b; }
.bezel__label { fill: rgba(255, 255, 255, .32); font: 700 10px var(--font-body); letter-spacing: .24em; }

.c-kb         { fill: var(--kb); stroke: var(--kb-line); stroke-width: 2; }
.c-kb-keys    { fill: none; stroke: var(--kb-keys); stroke-width: 6; stroke-dasharray: 16 5; }
.c-mouse      { fill: var(--kb); stroke: var(--kb-line); stroke-width: 2; }
.c-mouse-line { fill: none; stroke: var(--kb-line); stroke-width: 2; }

.c-leaf       { fill: var(--leaf); }
.c-leaf--dark { fill: var(--leaf-2); }
.c-pot        { fill: var(--pot); }
.c-pot-rim    { fill: var(--pot-2); }
.plant__leaves {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway 5s ease-in-out infinite alternate;
}

.clock__face  { fill: var(--clock-face); }
.clock__rim   { fill: none; stroke: var(--clock-rim); stroke-width: 6; }
.clock__ticks { fill: none; stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; }
.clock__hand  { stroke: var(--ink); stroke-linecap: round; }
.clock__hand--h { stroke-width: 5; }
.clock__hand--m { stroke-width: 3.5; }
.clock__hand--s { stroke: var(--accent); stroke-width: 1.8; }
.clock__pin   { fill: var(--ink); }

.lamp__cord   { stroke: var(--lamp-cord); stroke-width: 3; }
.lamp__shade  { fill: var(--lamp-shade); }
.lamp__bulb   { fill: var(--lamp-bulb); }
.lamp__cone   { opacity: .9; transition: opacity 1.2s ease; }
body[data-mood="alert"] .lamp__cone { opacity: 0; animation: lamp-fail 1s linear both; }

.sky--night { opacity: 0; transition: opacity var(--t-mood) ease; }
body[data-mood="alert"] .sky--night { opacity: 1; }
.cloud { animation: drift 16s ease-in-out infinite alternate; }
.cloud--b { animation-duration: 22s; animation-direction: alternate-reverse; }

.beacon__dome { fill: var(--beacon); }
.beacon__glow { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .6s ease; }
body[data-mood="alert"] .beacon__glow { animation: beacon 1s ease-in-out infinite; }
.c-beacon-base { fill: var(--case-3); }
.c-plaque     { fill: var(--plaque); }
.plaque__text { fill: var(--plaque-ink); font: 700 12px var(--font-body); letter-spacing: .22em; }

.net__cable { fill: none; stroke: var(--net); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.net__flow {
  fill: none;
  stroke: var(--net-flow);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 26;
  opacity: .55;
  animation: net-flow 2.4s linear infinite;
}
body[data-mood="alert"] .net__flow { opacity: .9; }
.net__lit {
  fill: none;
  stroke: var(--danger);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--t-mood) ease;
}
body[data-mood="alert"] .net__lit { opacity: 1; }
.net__clips  { stroke: var(--net-clip); stroke-width: 8; stroke-linecap: round; }
.net__packet { fill: #ffffff; }

/* Pantalla de la PC-20 */
.screen-tint { fill: #ff1f35; opacity: 0; transition: opacity var(--t-mood) ease; }
body[data-mood="alert"] .screen-tint { opacity: .42; }
.widget__bg    { fill: rgba(255, 255, 255, .86); }
.widget__title { fill: #1b3140; font: 700 14px var(--font-display); }
.widget__text  { fill: #56707d; font: 600 12px var(--font-body); }

/* LEDs (especificidad alta para ganar a la transición global) */
.world__art .led { fill: var(--led-off); transition: fill .3s ease; }
.world__art .led[data-state="on"] {
  fill: var(--led-on);
  stroke: var(--led-on);
  stroke-opacity: .35;
  stroke-width: 5;
}
.world__art .led[data-state="alert"],
.world__art .widget__dot[data-state="alert"] {
  fill: var(--danger);
  stroke: var(--danger);
  stroke-opacity: .4;
  stroke-width: 6;
  animation: blink .6s linear infinite;
}
.world__art .widget__dot[data-state="on"] { fill: #2fd08f; }

/* Ventiladores */
.spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 2.2s linear infinite;
}
.spin--fast { animation-duration: 1.1s; }

/* Efectos dentro del mundo */
.spark      { stroke: #ffd66b; stroke-width: 3; stroke-linecap: round; }
.spark-ring { fill: none; stroke: #fff2c4; }
.ghost { pointer-events: none; }
.ghost__cursor { fill: #ffffff; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ghost__ripple { fill: none; stroke: var(--accent); stroke-width: 3; }

/* 6. Conectores USB y cables ---------------------------------------------- */
.plug {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  outline: none;
  transition: opacity .3s ease;
}
.plug--mouse    { --plug: var(--plug-mouse); }
.plug--keyboard { --plug: var(--plug-keyboard); }
.plug__hit   { fill: transparent; }
.plug__halo  { fill: none; stroke: var(--accent); stroke-width: 2.5; opacity: 0; }
.plug__holes { fill: #5d6875; }
.world__art .plug__body { fill: var(--plug); }
.world__art .plug__boot { fill: var(--cable); }
.plug__grip  { fill: none; stroke: rgba(0, 0, 0, .2); stroke-width: 2.5; stroke-linecap: round; }
.plug__glyph { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2; stroke-linecap: round; }
.plug__focus { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 6 5; opacity: 0; }

body[data-scene="1"] .plug[data-connected="true"] .plug__halo { animation: halo 2.4s ease-in-out infinite; }
body[data-scene="1"] .plug[data-connected="true"]:hover .plug__halo { animation: none; opacity: .95; }
.plug:focus-visible .plug__focus { opacity: 1; }
body:not([data-scene="1"]) .plug,
.plug[data-connected="false"] { cursor: default; }

.cable-group { transition: opacity .3s ease; }
.cable {
  fill: none;
  stroke: var(--cable);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cable__shine {
  fill: none;
  stroke: var(--cable-shine);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: translate(-1px, -2.5px);
}

/* 7. Pantalla de administración + PowerShell ------------------------------ */
.admin-screen {
  --term-fs: 13px;                 /* JS lo ajusta según el zoom de la cámara */
  position: absolute;
  left: 2248px; top: 168px;
  width: 724px; height: 408px;
  border-radius: 6px;
  overflow: hidden;
  background: #06080b;
}
.admin-screen__sleep {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 6px;
  text-align: center;
  color: rgba(255, 255, 255, .22);
  font: 700 20px/1.2 var(--font-display);
  letter-spacing: .24em;
  transition: opacity .4s ease;
}
.admin-screen__sleep small { font: 500 11px var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.admin-screen[data-state="wake"] .admin-screen__sleep { opacity: 0; }

.admin-screen__desktop {
  position: absolute; inset: 0;
  opacity: 0;
  transform-origin: 50% 50%;
  background:
    radial-gradient(120% 90% at 75% 5%, #4a0f1a 0%, transparent 60%),
    linear-gradient(160deg, #1a0a10 0%, #0a0509 100%);
}
.admin-screen__logo {
  position: absolute;
  left: 50%; top: 42%;
  width: 160px; height: 160px;
  translate: -50% -50%;
  fill: none;
  stroke: rgba(255, 90, 105, .12);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ps-window {
  position: absolute;
  left: 22px; right: 22px; top: 18px; bottom: 46px;
  display: flex; flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  transform-origin: 20% 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
}
.ps-window__bar {
  flex: none;
  display: flex; align-items: center; gap: .6em;
  height: calc(var(--term-fs) * 2.3);
  padding-left: .8em;
  background: #1f1f24;
  color: #e6e6ea;
  font: 500 calc(var(--term-fs) * .88)/1 "Segoe UI", var(--font-body);
  white-space: nowrap;
}
.ps-window__icon { width: 1.25em; height: 1.25em; flex: none; }
.ps-window__title { overflow: hidden; text-overflow: ellipsis; }
.ps-window__controls { display: flex; height: 100%; margin-left: auto; }
.ps-window__controls svg {
  width: 3.4em; height: 100%;
  padding: 0 1.3em;
  fill: none; stroke: #c9c9cf; stroke-width: 1;
}
.ps-window__body {
  flex: 1;
  padding: .55em .8em;
  overflow: hidden;
  background: #012456;
  color: #eeedf0;
  font: 400 var(--term-fs)/1.45 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ps-line { min-height: 1.45em; }
.ps-prompt { color: #eeedf0; }
.ps-cmd    { color: #f9f1a5; }
.ps-dim    { color: #9fb3cf; }
.ps-key    { color: #61d6d6; }
.ps-val    { color: #ffffff; font-weight: 700; }
.ps-line--alert {
  color: #ff6b6b;
  font-weight: 700;
  background: rgba(255, 40, 60, .14);
  box-shadow: inset 3px 0 0 #ff6b6b;
  margin-inline: -.8em;
  padding-inline: .8em;
}
.ps-line--ok { color: #3fe07a; }
.ps-cursor {
  display: inline-block;
  width: .6em; height: 1.1em;
  margin-left: 1px;
  vertical-align: -.18em;
  background: #eeedf0;
  animation: blink 1s steps(1) infinite;
}

.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 32px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(14, 10, 14, .88);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.taskbar__start { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; padding: 6px; }
.taskbar__start i { width: 7px; height: 7px; background: #7fb6ff; border-radius: 1px; }
.taskbar__app {
  position: relative;
  display: grid; place-items: center;
  width: 30px; height: 26px;
  border-radius: 5px;
}
.taskbar__app svg { width: 16px; height: 16px; }
.taskbar__app.is-attention { animation: attention .45s steps(1) 4; }
.taskbar__app.is-open { background: rgba(255, 255, 255, .1); }
.taskbar__app.is-open::after {
  content: "";
  position: absolute; bottom: 1px; left: 50%;
  width: 12px; height: 3px; margin-left: -6px;
  border-radius: 2px;
  background: #7fb6ff;
}
.taskbar__clock {
  position: absolute; right: 12px;
  color: #e6e6ea;
  font: 500 11px "Segoe UI", var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* 8. HUD ------------------------------------------------------------------- */
.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 0;
  pointer-events: none;
  animation: hud-in .9s var(--ease-out) both .2s;
}
.hud > * { pointer-events: auto; }
.hud__left { display: grid; gap: 10px; }
.hud__right { display: flex; align-items: center; gap: 10px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
  font: 700 18px/1 var(--font-display);
  letter-spacing: -.01em;
  transition: color var(--t-mood) ease;
}
.brand__mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  transition: background-color var(--t-mood) ease, color var(--t-mood) ease;
}
.brand__mark svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.status {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px;
  padding: 6px 16px 6px 14px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
  color: var(--ink);
  font: 600 13px/1.2 var(--font-body);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--t-mood) ease, border-color var(--t-mood) ease, color var(--t-mood) ease;
}
.status__dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  animation: breathe 2.4s ease-in-out infinite;
}
.status__text { white-space: nowrap; }
.status__detail { color: var(--ink-soft); font-weight: 500; }
.status[data-kind="alert"] .status__text { color: var(--danger); letter-spacing: .12em; text-transform: uppercase; }
.status[data-kind="alert"] .status__dot { animation: blink .5s linear infinite; }

.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--chip-line);
  background: var(--chip-bg);
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--t-mood) ease, color var(--t-mood) ease, border-color var(--t-mood) ease;
}
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[aria-pressed="true"] .ico-off,
.icon-btn[aria-pressed="false"] .ico-on { display: none; }
.icon-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 9. Dock ------------------------------------------------------------------ */
.dock {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  z-index: 20;
  display: grid;
  justify-items: center;
  pointer-events: none;
}
.dock > * { grid-area: 1 / 1; }

.hint {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  max-width: 100%;
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
  color: var(--ink);
  font: 600 14px/1.3 var(--font-body);
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(27, 49, 64, .08);
}
.hint svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hint__kbd { color: var(--ink-soft); font-weight: 500; font-size: 13px; }
kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--chip-line);
  border-bottom-width: 2px;
  background: rgba(255, 255, 255, .7);
  font: 600 11px/1.5 var(--font-body);
}

.cta {
  pointer-events: auto;
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px 16px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff3347 0%, #ff7a3d 100%);
  color: #ffffff;
  font: 700 18px/1 var(--font-display);
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(255, 51, 71, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cta::before {
  content: "";
  position: absolute; inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(255, 95, 110, .75);
  pointer-events: none;
  animation: ring 1.8s var(--ease-out) infinite;
}
.cta:hover { filter: brightness(1.07); }
.cta:focus-visible { outline: 3px solid #ffffff; outline-offset: 5px; }

.countdown {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 21;
  height: 3px;
  background: rgba(255, 255, 255, .06);
}
.countdown__bar {
  height: 100%;
  background: linear-gradient(90deg, #ff3347, #ff9a3d);
  transform: scaleX(0);
  transform-origin: left center;
}
.countdown.is-running .countdown__bar { animation: countdown var(--dur, 3s) linear forwards; }

/* 10. Modal ---------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0;
  z-index: 40;
  display: grid; place-items: center;
  padding: 16px;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(12, 3, 6, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal__card {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  width: min(540px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 32px 32px 28px;
  border-radius: 24px;
  background: var(--card-bg);
  color: var(--card-ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
.modal__close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--card-soft);
  cursor: pointer;
}
.modal__close:hover { background: var(--card-line); }
.modal__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.modal__head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.modal__badge {
  flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: #1b3140;
  color: #7ff0dd;
}
.modal__badge svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.modal__eyebrow {
  margin: 0 0 4px;
  color: #d02537;
  font: 700 11px/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.modal__title {
  margin: 0;
  font: 800 30px/1.05 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.modal__desc { margin: 0; color: var(--card-soft); font-size: 15px; line-height: 1.6; }

.modal__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.modal__features li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.45; }
.modal__features svg {
  flex: none;
  width: 30px; height: 30px;
  padding: 6px;
  border-radius: 9px;
  background: rgba(23, 143, 130, .12);
  fill: none; stroke: #178f82; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.modal__features li span { padding-top: 5px; }

.modal__log {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #012456;
  color: #eeedf0;
}
.modal__log-label { color: #61d6d6; font: 700 10px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.modal__log code { font: 500 13px/1.4 var(--font-mono); overflow-wrap: anywhere; }

.credits {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--card-line);
  color: var(--card-soft);
  font-size: 14px;
}
.heart { width: 18px; height: 18px; fill: #ff3347; animation: beat 1.3s ease-in-out infinite; }
.credits__gh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: #1b3140;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}
.credits__gh svg { width: 15px; height: 15px; fill: currentColor; }
.credits__gh:hover { background: #24404f; }
.credits__gh:focus-visible { outline: 3px solid #178f82; outline-offset: 2px; }

.modal__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  font: 700 15px/1 var(--font-body);
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid #178f82; outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--primary { flex: 1; background: #178f82; color: #ffffff; box-shadow: 0 8px 20px rgba(23, 143, 130, .3); }
.btn--primary:hover { background: #127a6f; }
.btn--primary:disabled { opacity: .6; cursor: progress; }
.btn--ghost { background: transparent; border-color: var(--card-line); color: var(--card-ink); }
.btn--ghost:hover { background: var(--card-line); }

/* 11. Keyframes ------------------------------------------------------------ */
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes drift     { to { transform: translateX(70px); } }
@keyframes sway      { from { transform: rotate(-2deg); } to { transform: rotate(2.5deg); } }
@keyframes net-flow  { to { stroke-dashoffset: -56; } }
@keyframes blink     { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: .2; } }
@keyframes breathe   { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); } 50% { box-shadow: 0 0 0 7px var(--accent-soft); } }
@keyframes halo      { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }
@keyframes heartbeat { 0%, 100% { opacity: .65; } 12% { opacity: 1; } 24% { opacity: .75; } 36% { opacity: .95; } }
@keyframes beacon    { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes ring      { from { transform: scale(.96); opacity: .9; } to { transform: scale(1.22, 1.5); opacity: 0; } }
@keyframes countdown { to { transform: scaleX(1); } }
@keyframes beat      { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.14); } }
@keyframes attention { 0%, 100% { background: rgba(255, 170, 40, .85); } 50% { background: transparent; } }
@keyframes hud-in    { from { opacity: 0; transform: translateY(-12px); } }
@keyframes lamp-fail {
  0%   { opacity: .9; }
  10%  { opacity: .1; }
  20%  { opacity: .75; }
  32%  { opacity: 0; }
  44%  { opacity: .5; }
  54%, 100% { opacity: 0; }
}

/* 12. Responsive y movimiento reducido ------------------------------------ */
@media (max-width: 720px) {
  .hud { padding-inline: 16px; }
  .brand { font-size: 16px; }
  .brand__mark { width: 30px; height: 30px; }
  .status__detail { display: none; }
  .hint { font-size: 13px; padding: 9px 14px; }
}
@media (max-width: 460px) {
  .brand__name { max-width: 9.5em; line-height: 1.1; }
  .status { padding-inline: 12px; }
  .hint { border-radius: 18px; }
  .hint svg { display: none; }
  .modal__card { padding: 26px 20px 22px; }
  .modal__title { font-size: 26px; }
}
@media (pointer: coarse) {
  .hint__kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud, .plant__leaves, .spin, .net__flow, .heart, .cta::before, .status__dot,
  body[data-scene="1"] .plug[data-connected="true"] .plug__halo,
  body[data-mood="alert"] .fx--vignette::before,
  body[data-mood="alert"] .beacon__glow,
  body[data-mood="alert"] .lamp__cone { animation: none !important; }
  body[data-mood="alert"] .beacon__glow { opacity: .8; }
  .hud { animation: none; }
}