/* ==========================================================================
   SCUM REALISTIC TACTICAL WIRE LOCK SYSTEM - GMR KIT
   ========================================================================== */

:root {
  --scum-bg: #07090c;
  --scum-panel: #0e1218;
  --scum-border: #1e2634;
  --scum-metal-dark: #12161f;
  --scum-text-dim: #738297;
  --scum-accent-orange: #ff6600;
  --scum-danger-red: #ff2233;
  --scum-electric-blue: #00d0ff;
  --scum-ok-green: #10ff70;
  --scum-wire-yellow: #ffcc00;
  --scum-copper: #d97724;
  --scum-copper-bright: #ffaa5e;
}

/* Contenedor Overlay Bloqueo Pantalla Completa */
#wire-lock-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: var(--scum-bg);
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(20, 28, 40, 0.85) 0%, rgba(4, 5, 7, 0.98) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  color: #e2e8f0;
  user-select: none;
  overflow: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#wire-lock-screen.unlocked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Efecto Scanlines CRT */
#wire-lock-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.32) 0px,
    rgba(0, 0, 0, 0.32) 2px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 20;
}

/* Línea de escaneo móvil */
.scum-scanline-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.5), transparent);
  box-shadow: 0 0 18px rgba(255, 102, 0, 0.7);
  pointer-events: none;
  z-index: 21;
  animation: scumScanMove 6s linear infinite;
}

@keyframes scumScanMove {
  0% { transform: translateY(-12px); }
  100% { transform: translateY(105vh); }
}

/* Canvas de Chispas y Rayos Eléctricos */
#sparks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 18;
}

/* Chasis Principal Táctico Estilo Caja de Fusibles SCUM */
.scum-bypass-panel {
  position: relative;
  width: 94%;
  max-width: 720px;
  background: linear-gradient(175deg, #171c26 0%, #0d1017 100%);
  border: 2px solid #2a3445;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 25px rgba(0, 0, 0, 0.85);
  padding: 24px 26px;
  box-sizing: border-box;
  z-index: 15;
  border-radius: 6px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Tornillos de fijación del chasis */
.scum-bypass-panel::before,
.scum-bypass-panel::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8c9bb0 0%, #2f3747 60%, #151922 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.8), inset 0 0 1px #000;
  border: 1px solid #1a202c;
}
.scum-bypass-panel::before { top: 10px; left: 10px; }
.scum-bypass-panel::after { top: 10px; right: 10px; }

/* Animación de vibración por error */
.scum-bypass-panel.panel-shake {
  animation: scumShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  border-color: var(--scum-danger-red) !important;
  box-shadow: 
    0 0 50px rgba(255, 34, 51, 0.45),
    inset 0 0 30px rgba(255, 34, 51, 0.3) !important;
}

@keyframes scumShake {
  10%, 90% { transform: translate3d(-5px, 0, 0); }
  20%, 80% { transform: translate3d(6px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
  40%, 60% { transform: translate3d(8px, 0, 0); }
}

/* Encabezado del Panel */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #1c2331;
  padding-bottom: 12px;
  margin-bottom: 16px;
  position: relative;
}

.panel-title {
  font-size: 1.15rem;
  letter-spacing: 2px;
  color: var(--scum-accent-orange);
  text-transform: uppercase;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 0 10px rgba(255, 102, 0, 0.4);
}

.panel-title::before {
  content: "⚡";
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(255, 102, 0, 0.15);
  border: 1px solid var(--scum-accent-orange);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.5);
}

.panel-counter {
  font-size: 0.88rem;
  color: #94a3b8;
  background: #090c11;
  padding: 5px 12px;
  border: 1px solid #232c3b;
  border-radius: 3px;
  letter-spacing: 1px;
}

.panel-counter span {
  color: #ff9900;
  font-size: 1.05rem;
  font-weight: 800;
}

/* Área de Mensaje de Estado */
.panel-status-box {
  min-height: 46px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid #1e2635;
  border-left: 4px solid var(--scum-accent-orange);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 16px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #cbd5e1;
  transition: all 0.25s ease;
}

.panel-status-box.error {
  color: #ff4d5a;
  background: rgba(255, 34, 51, 0.16);
  border-color: var(--scum-danger-red);
  border-left-color: var(--scum-danger-red);
  text-shadow: 0 0 10px rgba(255, 34, 51, 0.7);
}

.panel-status-box.success {
  color: var(--scum-ok-green);
  background: rgba(16, 255, 112, 0.15);
  border-color: var(--scum-ok-green);
  border-left-color: var(--scum-ok-green);
  text-shadow: 0 0 10px rgba(16, 255, 112, 0.7);
}

/* Bahía de Conexión de Cables */
.wires-bay {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #080a0f;
  border: 1px solid #19202c;
  border-radius: 4px;
  padding: 22px 18px;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
}

/* Fila de Cable */
.wire-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  touch-action: manipulation;
  position: relative;
}

.wire-row:hover:not(.cut) {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
}

/* Bornes Terminales Metálicos con Tornillos */
.wire-terminal {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #475569 0%, #1e293b 60%, #0f172a 100%);
  border: 2px solid #64748b;
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.terminal-screw {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #94a3b8 0%, #334155 70%, #0f172a 100%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 1px 2px #000;
  position: relative;
}

/* Ranura en cruz del tornillo */
.terminal-screw::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  height: 2px;
  background: #0f172a;
  transform: translateY(-50%) rotate(35deg);
}
.terminal-screw::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 2px;
  background: #0f172a;
  transform: translateX(-50%) rotate(35deg);
}

/* Manguitos de goma en las salidas de los terminales */
.terminal-boot {
  width: 10px;
  height: 18px;
  background: #11151c;
  border: 1px solid #283344;
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 0 0 3px #000;
}
.terminal-boot.boot-left {
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.terminal-boot.boot-right {
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Riel o Pista del Cable */
.wire-track {
  flex: 1;
  height: 38px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible;
}

/* ==========================================================================
   CABLES 3D ULTRA-REALISTAS
   ========================================================================== */
.wire-cord {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 7px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  transition: opacity 0.15s ease;
  overflow: hidden;
  cursor: pointer;
}

/* Capa de textura estriada / trenzada de goma */
.cord-texture {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.35) 0px,
    rgba(0, 0, 0, 0.35) 4px,
    transparent 4px,
    transparent 8px
  );
  pointer-events: none;
}

/* Brillo especular 3D cilíndrico superior */
.cord-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.18) 22%,
    transparent 50%,
    rgba(0, 0, 0, 0.45) 80%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
}

/* Pulso de corriente activa viajando por el cable */
.wire-cord::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: currentSurge 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes currentSurge {
  0% { left: -70px; opacity: 0; }
  30% { opacity: 0.9; }
  70% { opacity: 0.9; }
  100% { left: 100%; opacity: 0; }
}

/* Color Rojo Táctico (High-Amp Main Bus) */
.wire-cord.red {
  background-color: #b51020;
  box-shadow: 0 0 14px rgba(255, 34, 51, 0.65), 0 5px 8px rgba(0, 0, 0, 0.7);
  animation: wireGlowRed 3.2s ease-in-out infinite alternate;
}
@keyframes wireGlowRed {
  0% { box-shadow: 0 0 10px rgba(255, 34, 51, 0.5), 0 5px 8px rgba(0, 0, 0, 0.7); }
  100% { box-shadow: 0 0 20px rgba(255, 34, 51, 0.9), 0 5px 12px rgba(255, 34, 51, 0.35); }
}

/* Color Azul Eléctrico (Logic & Control Rail) */
.wire-cord.blue {
  background-color: #0077c2;
  box-shadow: 0 0 14px rgba(0, 208, 255, 0.65), 0 5px 8px rgba(0, 0, 0, 0.7);
  animation: wireGlowBlue 2.9s ease-in-out infinite alternate;
}
@keyframes wireGlowBlue {
  0% { box-shadow: 0 0 10px rgba(0, 208, 255, 0.5), 0 5px 8px rgba(0, 0, 0, 0.7); }
  100% { box-shadow: 0 0 20px rgba(0, 208, 255, 0.9), 0 5px 12px rgba(0, 208, 255, 0.35); }
}

/* Color Amarillo (Auxiliary Sensor) */
.wire-cord.yellow {
  background-color: #c98a00;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.55), 0 5px 8px rgba(0, 0, 0, 0.7);
  animation: wireGlowYellow 3.4s ease-in-out infinite alternate;
}
@keyframes wireGlowYellow {
  0% { box-shadow: 0 0 8px rgba(255, 204, 0, 0.45); }
  100% { box-shadow: 0 0 18px rgba(255, 204, 0, 0.85); }
}

/* Color Verde (Ground / Earth) */
.wire-cord.green {
  background-color: #0e8538;
  box-shadow: 0 0 12px rgba(16, 255, 112, 0.55), 0 5px 8px rgba(0, 0, 0, 0.7);
  animation: wireGlowGreen 3.6s ease-in-out infinite alternate;
}
@keyframes wireGlowGreen {
  0% { box-shadow: 0 0 8px rgba(16, 255, 112, 0.45); }
  100% { box-shadow: 0 0 18px rgba(16, 255, 112, 0.85); }
}

/* ==========================================================================
   ESTADO CABLE CORTADO (FÍSICAS DE TENSIÓN, COBRE EXPUESTO Y CHISPAS)
   ========================================================================== */
.cut-half {
  display: none;
  position: absolute;
  top: 50%;
  height: 14px;
  width: 44%;
  border-radius: 7px;
  overflow: visible;
  pointer-events: none;
}

.wire-row.cut .wire-cord {
  display: none !important;
}

.wire-row.cut .cut-half {
  display: block;
}

/* Mitad Izquierda Cortada con caída física por gravedad */
.wire-row.cut .left-half {
  left: 0;
  transform-origin: left center;
  animation: wireSnapLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Mitad Derecha Cortada con caída física por gravedad */
.wire-row.cut .right-half {
  right: 0;
  transform-origin: right center;
  animation: wireSnapRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes wireSnapLeft {
  0% { transform: translateY(-50%) rotate(0deg); }
  25% { transform: translateY(-50%) rotate(-18deg) scaleX(0.9); }
  55% { transform: translateY(-50%) rotate(12deg); }
  80% { transform: translateY(-50%) rotate(6deg); }
  100% { transform: translateY(-50%) rotate(8deg); }
}

@keyframes wireSnapRight {
  0% { transform: translateY(-50%) rotate(0deg); }
  25% { transform: translateY(-50%) rotate(18deg) scaleX(0.9); }
  55% { transform: translateY(-50%) rotate(-12deg); }
  80% { transform: translateY(-50%) rotate(-6deg); }
  100% { transform: translateY(-50%) rotate(-8deg); }
}

/* Colores de las mitades cortadas */
.wire-row.cut[data-wire-color="red"] .cut-half {
  background: linear-gradient(180deg, #78101a 0%, #3d070c 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}
.wire-row.cut[data-wire-color="blue"] .cut-half {
  background: linear-gradient(180deg, #094770 0%, #041c2c 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}
.wire-row.cut[data-wire-color="yellow"] .cut-half {
  background: linear-gradient(180deg, #664700 0%, #2e2000 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}
.wire-row.cut[data-wire-color="green"] .cut-half {
  background: linear-gradient(180deg, #07471d 0%, #03240e 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

/* Filamentos de Cobre y Núcleo Expuesto Frayed */
.frayed-copper {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.left-half .frayed-copper {
  right: -8px;
  background: 
    radial-gradient(circle at 100% 50%, #ffffff 0%, #ffbb44 35%, var(--scum-copper) 70%, transparent 100%),
    repeating-linear-gradient(45deg, #d97724 0px, #d97724 2px, transparent 2px, transparent 4px);
  box-shadow: 0 0 10px #ff9900, 0 0 18px rgba(255, 102, 0, 0.6);
  border-radius: 0 4px 4px 0;
}

.right-half .frayed-copper {
  left: -8px;
  background: 
    radial-gradient(circle at 0% 50%, #ffffff 0%, #ffbb44 35%, var(--scum-copper) 70%, transparent 100%),
    repeating-linear-gradient(-45deg, #d97724 0px, #d97724 2px, transparent 2px, transparent 4px);
  box-shadow: 0 0 10px #ff9900, 0 0 18px rgba(255, 102, 0, 0.6);
  border-radius: 4px 0 0 4px;
}

/* Etiquetas Tácticas Militares */
.wire-label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 95px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  font-weight: 800;
  color: #94a3b8;
}

.label-name {
  color: #e2e8f0;
}

.label-voltage {
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 500;
}

/* Pie del panel */
.panel-footer {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #64748b;
  border-top: 1px solid #1a2230;
  padding-top: 12px;
}