/* ============================================================
   RULETA IEC — tema visual
   Idea: que la pagina se sienta como el interior de un aparato.
   Fondo de PCB, pistas de cobre con corriente corriendo por
   ellas, pads de soldadura en las esquinas de las tarjetas,
   LEDs de estado y un display de 7 segmentos para el turno.
   Sin fuentes ni librerias externas: en un evento el WiFi falla
   y la pagina tiene que verse igual de bien sin internet.
   ============================================================ */

:root {
  /* Sustrato */
  --pcb-0: #06100d;
  --pcb-1: #0a1a15;
  --pcb-2: #0e241d;
  --pcb-3: #143229;
  --soldermask: #0f6b48;

  /* Cobre */
  --cu: #b87333;
  --cu-claro: #e0a761;
  --cu-tenue: rgba(184, 115, 51, 0.28);

  /* LEDs */
  --led-cyan: #22d3ee;
  --led-verde: #4ade80;
  --led-ambar: #f5b544;
  --led-magenta: #e0479e;
  --led-morado: #a78bfa;
  --led-rojo: #ff5f56;

  /* Texto */
  --txt: #dff5ec;
  --txt-2: #8fb3a7;
  --txt-3: #5b7d72;

  --radio: 14px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
          "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--sans);
  color: var(--txt);
  background-color: var(--pcb-0);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(31, 138, 92, 0.20), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(34, 211, 238, 0.10), transparent 60%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* ---------- Fondo de pistas ---------- */
.pcb-fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.pcb-fondo .pista {
  fill: none;
  stroke: var(--cu-tenue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pcb-fondo .via {
  fill: none;
  stroke: var(--cu-tenue);
  stroke-width: 2.5;
}
/* La "corriente": un guioncito que recorre la pista */
.pcb-fondo .corriente {
  fill: none;
  stroke: var(--led-cyan);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 26 900;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.9));
  animation: fluir 9s linear infinite;
}
@keyframes fluir {
  from { stroke-dashoffset: 926; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pcb-fondo .corriente { animation: none; opacity: 0.35; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Estructura ---------- */
.envoltura {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px 48px;
}
.envoltura.ancha { max-width: 1100px; }

/* ---------- Barra superior ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--cu-tenue);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 50, 41, 0.85), rgba(10, 26, 21, 0.85));
  backdrop-filter: blur(6px);
}
.barra .chip {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 6px;
  background: #10201b;
  border: 1px solid var(--cu-tenue);
  display: grid; place-items: center;
  position: relative;
}
.barra .chip::before,
.barra .chip::after {
  content: "";
  position: absolute;
  left: -5px; right: -5px;
  height: 2px;
  background:
    linear-gradient(90deg, var(--cu) 0 6px, transparent 6px 100%) left,
    linear-gradient(270deg, var(--cu) 0 6px, transparent 6px 100%) right;
  background-repeat: no-repeat;
  background-size: 50% 100%;
}
.barra .chip::before { top: 9px; }
.barra .chip::after  { bottom: 9px; }
.barra .chip span { font: 700 12px/1 var(--mono); color: var(--led-verde); }

.barra .titulo {
  flex: 1;
  min-width: 0;
}
.barra .titulo b {
  display: block;
  font: 600 13px/1.25 var(--sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra .titulo small {
  display: block;
  font: 500 10px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-3);
}

/* ---------- LED de estado ---------- */
.led {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-3);
  white-space: nowrap;
}
.led i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #33463f;
  box-shadow: inset 0 0 3px rgba(0,0,0,.8);
  flex: none;
}
.led.on  i { background: var(--led-verde); box-shadow: 0 0 9px var(--led-verde), 0 0 18px rgba(74,222,128,.5); animation: latido 2.6s ease-in-out infinite; }
.led.off i { background: var(--led-rojo);  box-shadow: 0 0 8px rgba(255,95,86,.7); }
.led.on  { color: var(--led-verde); }
.led.off { color: var(--led-rojo); }
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Tarjetas ---------- */
.tarjeta {
  position: relative;
  border: 1px solid var(--cu-tenue);
  border-radius: var(--radio);
  background: linear-gradient(180deg, rgba(14, 36, 29, .92), rgba(8, 21, 17, .92));
  padding: 20px 18px;
  margin-bottom: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.03);
}
/* Pads de soldadura en las esquinas */
.tarjeta::before,
.tarjeta::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cu);
  box-shadow: 0 0 0 2px var(--pcb-0), 0 0 8px rgba(184,115,51,.7);
}
.tarjeta::before { top: 9px;  left: 9px; }
.tarjeta::after  { top: 9px;  right: 9px; }

.tarjeta h2 {
  margin: 0 0 4px;
  font: 700 18px/1.25 var(--sans);
}
.tarjeta p.ayuda {
  margin: 0 0 16px;
  color: var(--txt-2);
  font-size: 13.5px;
  line-height: 1.55;
}

.etiqueta {
  display: block;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cu-claro);
  margin-bottom: 8px;
}

/* ---------- Campos ---------- */
input[type=text], input[type=password], input[type=number], textarea, select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid rgba(184,115,51,.35);
  background: #071411;
  color: var(--txt);
  font: 500 16px/1.3 var(--sans);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea { font-size: 14px; line-height: 1.5; resize: vertical; }
input:focus, textarea:focus, select:focus {
  border-color: var(--led-cyan);
  box-shadow: 0 0 0 3px rgba(34,211,238,.16);
}
input::placeholder, textarea::placeholder { color: var(--txt-3); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid rgba(184,115,51,.4);
  background: linear-gradient(180deg, #1a3a30, #102620);
  color: var(--txt);
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--cu-claro); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn.primario {
  background: linear-gradient(180deg, #1f8a5c, #146044);
  border-color: #2fbd80;
  color: #eafff6;
}
.btn.peligro {
  background: linear-gradient(180deg, #6b2320, #431614);
  border-color: rgba(255,95,86,.5);
}
.btn.fantasma { background: transparent; }
.btn.chico { padding: 8px 12px; font-size: 12.5px; }
.btn.bloque { width: 100%; }

/* ---------- Botón grande estilo arcade ---------- */
.arcade {
  --tono: var(--led-verde);
  position: relative;
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.arcade .aro {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(184,115,51,.55), rgba(184,115,51,.12), rgba(184,115,51,.55));
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.arcade .tapa {
  position: absolute; inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #34e39a, #16a06a 45%, #0c6141 78%, #084831);
  box-shadow:
    inset 0 -10px 26px rgba(0,0,0,.5),
    inset 0 8px 20px rgba(255,255,255,.22),
    0 0 44px rgba(74,222,128,.42);
  display: grid;
  place-items: center;
  transition: transform .1s ease, box-shadow .2s;
}
.arcade .tapa span {
  font: 800 clamp(28px, 9vw, 44px)/1 var(--sans);
  letter-spacing: 0.06em;
  color: #04160f;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.arcade:not(:disabled):active .tapa { transform: scale(.965) translateY(3px); }
.arcade:disabled { cursor: not-allowed; }
.arcade:disabled .tapa {
  background: radial-gradient(circle at 50% 32%, #3d5a51, #26403a 50%, #172a25 80%);
  box-shadow: inset 0 -8px 22px rgba(0,0,0,.6), inset 0 6px 16px rgba(255,255,255,.06);
}
.arcade:disabled .tapa span { color: #6d8b81; text-shadow: none; }
/* Aro pulsante cuando SÍ puedes girar */
.arcade:not(:disabled) .aro::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(74,222,128,.55);
  animation: pulso 2s ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(.96); opacity: .9; }
  100% { transform: scale(1.14); opacity: 0; }
}

/* ---------- Display de 7 segmentos (número de turno) ---------- */
.display7 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #04100d;
  border: 1px solid rgba(184,115,51,.3);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.7);
  font: 700 clamp(34px, 12vw, 56px)/1 var(--mono);
  color: var(--led-ambar);
  text-shadow: 0 0 14px rgba(245,181,68,.75);
  letter-spacing: .06em;
}

/* ---------- Cintillos ---------- */
.cintillo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(184,115,51,.35);
  background: rgba(184,115,51,.10);
  font: 600 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cu-claro);
}
.cintillo.verde   { border-color: rgba(74,222,128,.4);  background: rgba(74,222,128,.10);  color: var(--led-verde); }
.cintillo.cyan    { border-color: rgba(34,211,238,.4);  background: rgba(34,211,238,.10);  color: var(--led-cyan); }
.cintillo.magenta { border-color: rgba(224,71,158,.4);  background: rgba(224,71,158,.10);  color: var(--led-magenta); }
.cintillo.gris    { border-color: rgba(143,179,167,.28);background: rgba(143,179,167,.08);  color: var(--txt-2); }

/* ---------- Código de colores de resistencia (separador) ---------- */
.resistencia {
  display: flex;
  align-items: center;
  gap: 0;
  height: 14px;
  margin: 22px 0;
  border-radius: 3px;
  overflow: hidden;
  opacity: .85;
}
.resistencia i { flex: 1; height: 100%; }
.resistencia i:nth-child(1) { background: #c9a227; }
.resistencia i:nth-child(2) { background: #7a4a1e; }
.resistencia i:nth-child(3) { background: #1f8a5c; }
.resistencia i:nth-child(4) { background: #b33; }
.resistencia i:nth-child(5) { background: #3b6ea5; }
.resistencia i:nth-child(6) { background: #c9a227; }

/* ---------- Lista de la fila ---------- */
.fila { list-style: none; margin: 0; padding: 0; }
.fila li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.05);
  margin-bottom: 8px;
  font-size: 14.5px;
}
.fila li .num {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(184,115,51,.18);
  color: var(--cu-claro);
  font: 700 12px/1 var(--mono);
}
.fila li.yo {
  border-color: rgba(34,211,238,.45);
  background: rgba(34,211,238,.10);
}
.fila li .crece { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Utilidades ---------- */
.centro { text-align: center; }
.filas { display: flex; gap: 10px; flex-wrap: wrap; }
.filas.centro { justify-content: center; }
.crece { flex: 1; }
.oculto { display: none !important; }
.mini { font-size: 12.5px; color: var(--txt-2); line-height: 1.5; }
.mono { font-family: var(--mono); }
.sep { height: 1px; background: rgba(184,115,51,.22); margin: 18px 0; border: 0; }

.terminal {
  font: 500 12px/1.7 var(--mono);
  color: var(--txt-2);
  background: #04100d;
  border: 1px solid rgba(184,115,51,.22);
  border-radius: 10px;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
}

/* ---------- Avisos ---------- */
.aviso {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 14px;
  border: 1px solid;
}
.aviso.info  { border-color: rgba(34,211,238,.35);  background: rgba(34,211,238,.08);  color: #a8e9f6; }
.aviso.ok    { border-color: rgba(74,222,128,.35);  background: rgba(74,222,128,.08);  color: #b6f4d0; }
.aviso.error { border-color: rgba(255,95,86,.4);    background: rgba(255,95,86,.09);   color: #ffc4c0; }
.aviso.warn  { border-color: rgba(245,181,68,.4);   background: rgba(245,181,68,.08);  color: #ffe1a8; }