/* ════════════════════════════════════════════════════════════════════════
   machine.css — núcleo de estilo compartido del canon "máquina" (Familia B).
   Tokens de diseño + chasis de metal cepillado + primitivas (LED, regla,
   cabecera, pie, toast). Extraído byte-a-byte de los 8 módulos hardware para
   que el render NO cambie. Cada módulo añade solo su bloque style propio encima.

   Uso en el cascarón HTML:
     link rel=stylesheet href=machine.css
     style ... reglas específicas del módulo ... /style
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────
   Superset de los :root de todos los módulos. Los que no usen --led-blue o
   --font-serif simplemente no los referencian; su presencia es inocua. */
:root {
  --bg: #2a2723;
  --panel-1: #d8d6d1;
  --panel-2: #b4b1ab;
  --panel-3: #908c85;
  --panel-edge: #4f4c47;
  --bezel: #2e2c29;
  --bezel-2: #1c1b19;
  --etch-light: rgba(255,255,255,0.55);
  --ink: #2b2925;
  --ink-soft: #5a564e;
  --led-off: #2a2826;
  --led-amber: #ffb14a;
  --led-green: #6ee29a;
  --led-red:   #ff6b56;
  --led-blue:  #8ab8e8;
  --lamp-glow: #ffd9a3;
  --lcd-bg: #e7e4d9;
  --lcd-ink: #1a1814;
  --accent: var(--led-amber);
  --font-ui: "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace;
  --font-serif: "Times New Roman", Times, serif;
}

/* ── Reset + lienzo ──────────────────────────────────────────────────────
   El gradiente de fondo del body es el común de la familia. Un módulo que
   necesite otro fondo lo sobrescribe en su bloque style. */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: var(--font-ui); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body {
  background: radial-gradient(120% 80% at 50% 30%, #34302a 0%, #211e1a 60%, #15130f 100%);
  overflow-x: hidden;
}
#root { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 24px; }
.mono { font-family: var(--font-mono); }

/* ── Chasis (case) + tornillos ──────────────────────────────────────────── */
.case {
  position: relative;
  padding: 22px 26px 18px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, rgba(0,0,0,0.04) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, var(--panel-1) 0%, var(--panel-2) 55%, var(--panel-3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 0 0 0 1px var(--panel-edge),
    0 30px 60px -20px rgba(0,0,0,0.6),
    0 6px 18px rgba(0,0,0,0.4);
}
.case-screw {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4f1ea 0%, #b6b1a7 45%, #5a5650 90%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.4);
}
.case-screw::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(35deg, transparent 44%, rgba(0,0,0,0.55) 47%, rgba(0,0,0,0.55) 53%, transparent 56%); }
.case-screw-tl { top: 8px; left: 8px; }
.case-screw-tr { top: 8px; right: 8px; }
.case-screw-bl { bottom: 8px; left: 8px; }
.case-screw-br { bottom: 8px; right: 8px; }

/* ── Cabecera (brand + meters) ──────────────────────────────────────────── */
.header { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 0 0 1px var(--panel-edge);
  color: var(--ink);
}
.brand-text { line-height: 1.1; }
.brand-name { font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.brand-sub { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.header-meters { display: flex; gap: 14px; align-items: center; }
.header-stat { display: flex; flex-direction: column; gap: 2px; min-width: 56px; align-items: flex-end; }
.header-stat-k { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; color: var(--ink-soft); text-transform: uppercase; }
.header-stat-v { font-family: var(--font-mono); font-size: 11px; color: var(--ink); letter-spacing: 0.04em; }
.header-divider { width: 1px; height: 28px; background: rgba(0,0,0,0.18); }
.meter { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 36px; }
.meter-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ink-soft); }

/* ── Regla divisoria grabada ────────────────────────────────────────────── */
.rule { height: 1px; margin: 10px 4px;
  background: linear-gradient(90deg, transparent, var(--panel-edge) 12%, var(--panel-edge) 88%, transparent);
  box-shadow: 0 1px 0 var(--etch-light); }

/* ── Sección + etiqueta ─────────────────────────────────────────────────── */
.section { padding: 4px 4px 8px; }
.section-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em;
  color: var(--ink-soft); margin: 0 0 10px 2px; text-transform: uppercase;
}
.section-tag-row { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 10px; }
.section-tag-row .section-tag { margin: 0; }
.legend { display: flex; gap: 14px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--ink-soft); text-transform: uppercase; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ── LED (diodo) ────────────────────────────────────────────────────────── */
.led {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--led-off);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.6), inset 0 -1px 1px rgba(255,255,255,0.05), 0 0 0 1px rgba(0,0,0,0.35);
  position: relative;
}
.led-glass { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25), transparent 50%); }
.led-glow { position: absolute; inset: -3px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%); opacity: 0; pointer-events: none; }
.led-amber { --accent: var(--led-amber); }
.led-green { --accent: var(--led-green); }
.led-red   { --accent: var(--led-red); }
.led-blue  { --accent: var(--led-blue); }
.led-gray  { --accent: #888; }
.led-on {
  background: var(--accent);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -1px 1px rgba(0,0,0,0.25), 0 0 6px var(--accent), 0 0 0 1px rgba(0,0,0,0.25);
}
.led-on .led-glow { opacity: 0.55; }
.led-blink.led-on { animation: led-blink 1.1s steps(2, jump-none) infinite; }
@keyframes led-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.4; } }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.footer { display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding: 6px 6px 0;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  color: var(--ink-soft); }
.footer-l { display: flex; align-items: center; }
.dot-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-soft); margin: 0 8px; vertical-align: middle; opacity: 0.6; }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position: absolute; right: 18px; top: 60px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.5), transparent 60%),
    linear-gradient(180deg, #c8e8d0 0%, #8ad0a4 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 0 1px rgba(0,0,0,0.25);
  color: #1f4a2e;
  animation: toast-in 200ms ease-out;
  z-index: 10;
}
.toast.toast-warn {
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.5), transparent 60%),
              linear-gradient(180deg, #efd0c8 0%, #b16855 100%);
  color: #5a1a10;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }
.toast-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
.toast-sub   { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; margin-top: 1px; }

/* ════════════════════════════════════════════════════════════════════════
   .dense — modificador de densidad. Mismas físicas (gradientes, sombras,
   LED, tornillos) que el chrome base; solo ajusta espaciado y 1px de tamaño
   tipográfico para paneles compactos (p. ej. arrays de 32 bahías). Se aplica
   al contenedor del módulo: div class=...-module dense. Reutilizable.
   ════════════════════════════════════════════════════════════════════════ */
.dense .case          { padding: 18px 22px 14px; }
.dense .header        { padding: 4px 6px 6px; gap: 12px; }
.dense .brand-sub     { font-size: 9px; }
.dense .header-meters { gap: 12px; }
.dense .header-stat   { min-width: 0; }
.dense .meter         { gap: 4px; min-width: 0; }
.dense .meter-label   { font-size: 8px; }
.dense .rule          { margin: 8px 4px; }
.dense .section       { padding: 4px 4px 6px; }
.dense .section-tag   { font-size: 8px; margin: 0 0 8px 2px; }
.dense .section-tag-row { margin: 0 2px 8px; }
.dense .legend        { gap: 10px; font-size: 8px; }
.dense .legend span   { gap: 4px; }
.dense .footer        { margin-top: 6px; padding: 4px 6px 0; font-size: 8px; }