/* SOFT_MKT_ALENCASTRO v2.0 - Custom Styles & UI Refinements */

@layer base {
  body {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #e4e4e7;
    background-color: #09090b;
    overflow-x: hidden;
  }

  code, pre, .font-mono {
    font-family: 'JetBrains Mono', monospace;
  }
}

/* Custom Scrollbar for Sleek Dark Look */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #09090b;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Linear-like Glass Card */
.glass-panel {
  background: rgba(18, 18, 23, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-elevated {
  background: rgba(24, 24, 27, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

/* Glow effects */
.glow-indigo {
  box-shadow: 0 0 25px -5px rgba(99, 102, 241, 0.25);
}
.glow-emerald {
  box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.25);
}
.glow-amber {
  box-shadow: 0 0 25px -5px rgba(245, 158, 11, 0.25);
}

/* Safe Zone Overlay for 9:16 Video (Instagram Reels / TikTok / Shorts) */
.safe-zone-box {
  position: relative;
  width: 270px;
  height: 480px;
  background: #18181b;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  border: 2px solid #27272a;
}

.safe-zone-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: rgba(239, 68, 68, 0.18);
  border-bottom: 1px dashed rgba(239, 68, 68, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #f87171;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.safe-zone-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 105px;
  background: rgba(239, 68, 68, 0.18);
  border-top: 1px dashed rgba(239, 68, 68, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #f87171;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.safe-zone-right {
  position: absolute;
  top: 65px;
  bottom: 105px;
  right: 0;
  width: 50px;
  background: rgba(239, 68, 68, 0.14);
  border-left: 1px dashed rgba(239, 68, 68, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: 9px;
  color: #fca5a5;
  font-weight: 600;
}

.safe-zone-active-area {
  position: absolute;
  top: 65px;
  bottom: 105px;
  left: 12px;
  right: 50px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  text-align: center;
}

/* Teleprompter Scroll Animation */
.teleprompter-content {
  line-height: 1.8;
  transition: transform 0.1s linear;
}

.mirror-mode {
  transform: scaleX(-1);
}

/* Animations */
@keyframes pulseSubtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.99); }
}

.pulse-subtle {
  animation: pulseSubtle 3s infinite ease-in-out;
}

/* Badges */
.badge-gate-approved {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.badge-gate-pending {
  background: rgba(113, 113, 122, 0.15);
  color: #a1a1aa;
  border: 1px solid rgba(113, 113, 122, 0.3);
}
.badge-gate-adjust {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-gate-nogo {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Workflow Substatus Badges */
.badge-substatus-copy-pendiente {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-substatus-copy-listo {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-substatus-diseno {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.badge-substatus-qa {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}
.badge-substatus-aprobado {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}