/* Variables de colores */
:root {
  --primary-color: #C1FF33;
  --primary-glow: rgba(193, 255, 51, 0.3);
  --dark-bg: #0A0A0A;
  --grid-color: rgba(193, 255, 51, 0.05);
  --blue-color: #1E98FF;
  --red-color: #FF2D55;
  --orange-color: #FF8A00;
  --purple-color: #9C6DFF;
  --green-color: #00E4A1;
  --yellow-color: #FFD600;
  --cyan-color: #00D4E0;
  --eth-color: #5A7BFF;
  --avax-color: #E84141;
  --layerzero-color: #C56CEF;
  --merchant-color: #45D0FF;
  --scanner-color: #FF9F45;
  --api-color: #D359FF;
  --glass-bg: rgba(30, 30, 30, 0.8);
  --glass-border: rgba(255, 255, 255, 0.1);
}

/* Contenedor principal */
.architecture-diagram-container {
  position: relative;
  width: 100%;
  height: 480px;
  background-color: var(--dark-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Fondo de cuadrícula */
.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 1;
}

/* Superposición de brillo */
.glow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(193, 255, 51, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: 2;
}

/* Nodos */
.node {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.node:hover {
  transform: scale(1.05);
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.4);
  z-index: 6;
}

.node-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(10, 10, 10, 0.8);
  padding: 10px;
  box-sizing: border-box;
}

.node-title {
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.node-subtitle {
  color: #ffffff;
  font-size: 12px;
  opacity: 0.8;
  margin: 5px 0 0 0;
  white-space: normal;
  width: 100%;
  text-align: center;
}

/* Conexiones */
.connections-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.connection {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  z-index: 3;
}

/* Animación de pulso para el nodo central */
@keyframes pulse {
  0% { box-shadow: 0 0 25px rgba(30, 152, 255, 0.3); }
  50% { box-shadow: 0 0 40px rgba(30, 152, 255, 0.5); }
  100% { box-shadow: 0 0 25px rgba(30, 152, 255, 0.3); }
}

/* Badges */
.badges-container {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

.feature-badge {
  display: flex;
  align-items: center;
  background-color: var(--glass-bg);
  border-radius: 20px;
  padding: 8px 15px;
  color: white;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.feature-badge:hover {
  transform: translateY(-3px);
}

.feature-badge i {
  margin-right: 8px;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  .architecture-diagram-container {
    height: 420px;
  }
  
  .central-node {
    width: 100px !important;
    height: 100px !important;
  }
  
  .node:not(.central-node) {
    width: 90px !important;
    height: 90px !important;
  }
  
  .feature-badge {
    font-size: 12px;
    padding: 6px 12px;
  }
  
  .badges-container {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .central-node {
    width: 90px !important;
    height: 90px !important;
  }
  
  .node:not(.central-node) {
    width: 80px !important;
    height: 80px !important;
  }
  
  .node-title {
    font-size: 14px;
  }
  
  .node-subtitle {
    font-size: 10px;
  }
}

/* Estilos específicos por diagrama - BinnoChain */
#central-node {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 30px rgba(193, 255, 51, 0.3);
  animation: pulse 3s infinite ease-in-out;
}

.bridge-node {
  top: 25%;
  right: 20%;
  width: 110px;
  height: 110px;
  color: var(--blue-color);
  border: 2px solid var(--blue-color);
  box-shadow: 0 0 20px rgba(30, 152, 255, 0.3);
}

.wallet-node {
  bottom: 25%;
  right: 20%;
  width: 110px;
  height: 110px;
  color: var(--orange-color);
  border: 2px solid var(--orange-color);
  box-shadow: 0 0 20px rgba(255, 138, 0, 0.3);
}

.pos-node {
  top: 25%;
  left: 20%;
  width: 110px;
  height: 110px;
  color: var(--red-color);
  border: 2px solid var(--red-color);
  box-shadow: 0 0 20px rgba(255, 45, 85, 0.3);
}

.pay-node {
  bottom: 25%;
  left: 20%;
  width: 110px;
  height: 110px;
  color: var(--purple-color);
  border: 2px solid var(--purple-color);
  box-shadow: 0 0 20px rgba(156, 109, 255, 0.3);
}

/* Colores de las conexiones de BinnoChain */
#central-to-bridge {
  background: linear-gradient(90deg, var(--primary-color), var(--blue-color));
}

#central-to-wallet {
  background: linear-gradient(90deg, var(--primary-color), var(--orange-color));
}

#central-to-pos {
  background: linear-gradient(90deg, var(--primary-color), var(--red-color));
}

#central-to-pay {
  background: linear-gradient(90deg, var(--primary-color), var(--purple-color));
}

#wallet-to-bridge {
  background: linear-gradient(90deg, var(--orange-color), var(--blue-color));
}

/* Estilos específicos - BinnoPay */
#pay-central-node {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  color: var(--purple-color);
  border: 2px solid var(--purple-color);
  box-shadow: 0 0 30px rgba(156, 109, 255, 0.3);
  animation: pulse 3s infinite ease-in-out;
}

.fingerprint-node {
  top: 30%;
  right: 25%;
  width: 110px;
  height: 110px;
  color: var(--green-color);
  border: 2px solid var(--green-color);
  box-shadow: 0 0 20px rgba(0, 228, 161, 0.3);
}

.nfc-node {
  bottom: 30%;
  right: 25%;
  width: 110px;
  height: 110px;
  color: var(--blue-color);
  border: 2px solid var(--blue-color);
  box-shadow: 0 0 20px rgba(30, 152, 255, 0.3);
}

#pay-pos-node {
  top: 30%;
  left: 25%;
  width: 110px;
  height: 110px;
  color: var(--red-color);
  border: 2px solid var(--red-color);
  box-shadow: 0 0 20px rgba(255, 45, 85, 0.3);
}

#pay-wallet-node {
  bottom: 30%;
  left: 25%;
  width: 110px;
  height: 110px;
  color: var(--orange-color);
  border: 2px solid var(--orange-color);
  box-shadow: 0 0 20px rgba(255, 138, 0, 0.3);
}

/* Colores de las conexiones de BinnoPay */
#pay-to-fingerprint {
  background: linear-gradient(90deg, var(--purple-color), var(--green-color));
}

#pay-to-nfc {
  background: linear-gradient(90deg, var(--purple-color), var(--blue-color));
}

#pay-to-pos {
  background: linear-gradient(90deg, var(--purple-color), var(--red-color));
}

#pay-to-wallet {
  background: linear-gradient(90deg, var(--purple-color), var(--orange-color));
}

#fingerprint-to-pos {
  background: linear-gradient(90deg, var(--green-color), var(--red-color));
}

#nfc-to-wallet {
  background: linear-gradient(90deg, var(--blue-color), var(--orange-color));
}

/* Estilos específicos - BinnoWallet */
#wallet-central-node {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  color: var(--orange-color);
  border: 2px solid var(--orange-color);
  box-shadow: 0 0 30px rgba(255, 138, 0, 0.3);
  animation: pulse 3s infinite ease-in-out;
}

.mpc-node {
  top: 25%;
  right: 20%;
  width: 110px;
  height: 110px;
  color: var(--yellow-color);
  border: 2px solid var(--yellow-color);
  box-shadow: 0 0 20px rgba(255, 214, 0, 0.3);
}

.username-node {
  bottom: 25%;
  right: 20%;
  width: 110px;
  height: 110px;
  color: var(--cyan-color);
  border: 2px solid var(--cyan-color);
  box-shadow: 0 0 20px rgba(0, 212, 224, 0.3);
}

#wallet-bridge-node {
  top: 25%;
  left: 20%;
  width: 110px;
  height: 110px;
  color: var(--blue-color);
  border: 2px solid var(--blue-color);
  box-shadow: 0 0 20px rgba(30, 152, 255, 0.3);
}

.biometric-node {
  bottom: 25%;
  left: 20%;
  width: 110px;
  height: 110px;
  color: var(--green-color);
  border: 2px solid var(--green-color);
  box-shadow: 0 0 20px rgba(0, 228, 161, 0.3);
}

/* Colores de las conexiones de BinnoWallet */
#wallet-to-mpc {
  background: linear-gradient(90deg, var(--orange-color), var(--yellow-color));
}

#wallet-to-username {
  background: linear-gradient(90deg, var(--orange-color), var(--cyan-color));
}

#wallet-to-bridge {
  background: linear-gradient(90deg, var(--orange-color), var(--blue-color));
}

#wallet-to-biometric {
  background: linear-gradient(90deg, var(--orange-color), var(--green-color));
}

#mpc-to-biometric {
  background: linear-gradient(90deg, var(--yellow-color), var(--green-color));
}

#username-to-bridge {
  background: linear-gradient(90deg, var(--cyan-color), var(--blue-color));
}

/* Estilos específicos - BinnoBridge */
#bridge-central-node {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  color: var(--blue-color);
  border: 2px solid var(--blue-color);
  box-shadow: 0 0 30px rgba(30, 152, 255, 0.3);
  animation: pulse 3s infinite ease-in-out;
}

.ethereum-node {
  top: 25%;
  right: 20%;
  width: 100px;
  height: 100px;
  color: var(--eth-color);
  border: 2px solid var(--eth-color);
  box-shadow: 0 0 20px rgba(90, 123, 255, 0.3);
}

.binnochain-node {
  bottom: 25%;
  right: 20%;
  width: 100px;
  height: 100px;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 20px rgba(193, 255, 51, 0.3);
}

.layerzero-node {
  top: 50%;
  left: 25%;
  width: 100px;
  height: 100px;
  color: var(--layerzero-color);
  border: 2px solid var(--layerzero-color);
  box-shadow: 0 0 20px rgba(197, 108, 239, 0.3);
}

.avalanche-node {
  bottom: 70%;
  left: 20%;
  width: 100px;
  height: 100px;
  color: var(--avax-color);
  border: 2px solid var(--avax-color);
  box-shadow: 0 0 20px rgba(232, 65, 65, 0.3);
}

/* Colores de las conexiones de BinnoBridge */
#bridge-to-ethereum {
  background: linear-gradient(90deg, var(--blue-color), var(--eth-color));
}

#bridge-to-binnochain {
  background: linear-gradient(90deg, var(--blue-color), var(--primary-color));
}

#bridge-to-layerzero {
  background: linear-gradient(90deg, var(--blue-color), var(--layerzero-color));
}

#bridge-to-avalanche {
  background: linear-gradient(90deg, var(--blue-color), var(--avax-color));
}

#ethereum-to-layerzero {
  background: linear-gradient(90deg, var(--eth-color), var(--layerzero-color));
}

#avalanche-to-layerzero {
  background: linear-gradient(90deg, var(--avax-color), var(--layerzero-color));
}

#binnochain-to-layerzero {
  background: linear-gradient(90deg, var(--primary-color), var(--layerzero-color));
}

/* Estilos específicos - BinnoPOS */
#pos-central-node {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  color: var(--red-color);
  border: 2px solid var(--red-color);
  box-shadow: 0 0 30px rgba(255, 45, 85, 0.3);
  animation: pulse 3s infinite ease-in-out;
}

.payment-node {
  top: 25%;
  right: 25%;
  width: 110px;
  height: 110px;
  color: var(--purple-color);
  border: 2px solid var(--purple-color);
  box-shadow: 0 0 20px rgba(156, 109, 255, 0.3);
}

.merchant-node {
  bottom: 25%;
  right: 25%;
  width: 110px;
  height: 110px;
  color: var(--merchant-color);
  border: 2px solid var(--merchant-color);
  box-shadow: 0 0 20px rgba(69, 208, 255, 0.3);
}

.scanner-node {
  top: 25%;
  left: 25%;
  width: 110px;
  height: 110px;
  color: var(--scanner-color);
  border: 2px solid var(--scanner-color);
  box-shadow: 0 0 20px rgba(255, 159, 69, 0.3);
}

.api-node {
  bottom: 25%;
  left: 25%;
  width: 110px;
  height: 110px;
  color: var(--api-color);
  border: 2px solid var(--api-color);
  box-shadow: 0 0 20px rgba(211, 89, 255, 0.3);
}

/* Colores de las conexiones de BinnoPOS */
#pos-to-payment {
  background: linear-gradient(90deg, var(--red-color), var(--purple-color));
}

#pos-to-merchant {
  background: linear-gradient(90deg, var(--red-color), var(--merchant-color));
}

#pos-to-scanner {
  background: linear-gradient(90deg, var(--red-color), var(--scanner-color));
}

#pos-to-api {
  background: linear-gradient(90deg, var(--red-color), var(--api-color));
}

#scanner-to-payment {
  background: linear-gradient(90deg, var(--scanner-color), var(--purple-color));
}

#merchant-to-api {
  background: linear-gradient(90deg, var(--merchant-color), var(--api-color));
}

/* Estilos de los badges por solución */
/* BinnoChain */
.speed-badge {
  border-left: 3px solid var(--green-color);
}
.fee-badge {
  border-left: 3px solid var(--blue-color);
}
.ecosystem-badge {
  border-left: 3px solid var(--orange-color);
}
.speed-badge i {
  color: var(--green-color);
}
.fee-badge i {
  color: var(--blue-color);
}
.ecosystem-badge i {
  color: var(--orange-color);
}

/* BinnoPay */
.secure-badge {
  border-left: 3px solid var(--green-color);
}
.fast-badge {
  border-left: 3px solid var(--blue-color);
}
.secure-badge i {
  color: var(--green-color);
}
.fast-badge i {
  color: var(--blue-color);
}

/* BinnoWallet */
.security-badge {
  border-left: 3px solid var(--yellow-color);
}
.chain-badge {
  border-left: 3px solid var(--blue-color);
}
.user-badge {
  border-left: 3px solid var(--green-color);
}
.security-badge i {
  color: var(--yellow-color);
}
.chain-badge i {
  color: var(--blue-color);
}
.user-badge i {
  color: var(--green-color);
}

/* BinnoBridge */
.cross-badge {
  border-left: 3px solid var(--blue-color);
}
.contract-badge {
  border-left: 3px solid var(--eth-color);
}
.network-badge {
  border-left: 3px solid var(--layerzero-color);
}
.cross-badge i {
  color: var(--blue-color);
}
.contract-badge i {
  color: var(--eth-color);
}
.network-badge i {
  color: var(--layerzero-color);
}

/* BinnoPOS */
.hardware-badge {
  border-left: 3px solid var(--red-color);
}
.scan-badge {
  border-left: 3px solid var(--scanner-color);
}
.nfc-badge {
  border-left: 3px solid var(--merchant-color);
}
.hardware-badge i {
  color: var(--red-color);
}
.scan-badge i {
  color: var(--scanner-color);
}
.nfc-badge i {
  color: var(--merchant-color);
}