body { margin: 0; padding: 0; height: 100vh; width: 100vw; overflow: hidden; user-select: none; -webkit-user-select: none; }

.mechanical-button { box-shadow: 0 4px 0 0 rgba(0,0,0,0.4), inset 0 1px 0 0 rgba(255,255,255,0.1); transition: transform 0.1s; }
.mechanical-button:active, .mechanical-button.active-push { transform: translateY(2px); box-shadow: 0 2px 0 0 rgba(0,0,0,0.4), inset 0 1px 0 0 rgba(255,255,255,0.1); }
.recessed-panel { box-shadow: inset 0 2px 10px 0 rgba(0,0,0,0.8); }

.mechanical-btn-crew { box-shadow: 0 4px 0 0 #1a7a6d; transition: all 0.1s ease; }
.mechanical-btn-crew:active { transform: translateY(2px); box-shadow: 0 2px 0 0 #1a7a6d; }

.scanline { background: linear-gradient(to bottom, transparent 50%, rgba(43, 212, 189, 0.05) 50%); background-size: 100% 4px; }

.mechanical-press { box-shadow: inset 0 4px 8px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.1); }
.ptt-active { box-shadow: 0 0 30px rgba(43, 212, 189, 0.4), inset 0 2px 4px rgba(255,255,255,0.2); background-color: rgba(43, 212, 189, 0.1) !important;}
.ptt-latched { box-shadow: 0 0 40px rgba(192, 38, 211, 0.5), inset 0 2px 4px rgba(255,255,255,0.3); background-color: rgba(192, 38, 211, 0.2) !important; border-color: #f0abfc !important;}

.vu-gradient { background: linear-gradient(to top, #2bd4bd 0%, #2bd4bd 70%, #facc15 85%, #ef4444 100%); transition: height 0.05s linear; }
.vu-meter-gradient { background: linear-gradient(to right, #2bd4bd 0%, #2bd4bd 70%, #fbbf24 85%, #e11d48 100%); transition: width 0.05s linear; }

.pocket-mode-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #111; }
.settings-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 99998; display: flex; align-items: center; justify-content: center; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }
.login-shake { animation: shake 0.4s; border-color: #e11d48 !important; }
.blinking-alert { animation: pulseRed 1.5s infinite; }
@keyframes pulseRed { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* 🔥 NUEVOS ESTILOS DEL GRID DIRECTOR (STITCH V4.2) */
.recessed-shadow { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.6), inset 0 -1px 0 0 rgba(255, 255, 255, 0.05); }
.active-glow { box-shadow: 0 0 15px rgba(43, 212, 189, 0.4), inset 0 0 8px rgba(43, 212, 189, 0.2); border-color: #2bd4bd !important; }
.led-green { box-shadow: 0 0 8px #2bd4bd; }
.industrial-grid { background-image: radial-gradient(circle, #1a1f26 1px, transparent 1px); background-size: 20px 20px; }
.solo-active { color: #facc15 !important; border-color: #facc15 !important; background-color: rgba(250, 204, 21, 0.1); }
.sub-btn { font-family: 'JetBrains Mono', monospace; font-size: 10px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid #334155; border-radius: 4px; transition: all 0.2s; cursor: pointer; color: #94a3b8; }
.sub-btn:hover { border-color: #2bd4bd; color: #2bd4bd; }