/* ===== ITSP Platform - Custom Styles ===== */

/* ===== DESIGN SYSTEM — Dark Theme ===== */
:root {
  --bg-base:       #0f0d0a;
  --bg-card:       #14100c;
  --bg-card-2:     #1a140e;
  --bg-sidebar:    #0a0806;
  --bg-topbar:     rgba(15, 13, 10, 0.88);
  --border:        #221a12;
  --border-bright: #352818;
  --text-1:        #f4f0eb;
  --text-2:        #b0a090;
  --text-3:        #786050;

  /* Accent palette */
  --a-orange:  #f97316;
  --a-amber:   #f59e0b;
  --a-yellow:  #fbbf24;
  --a-red:     #ef4444;
  --a-sky:     #38bdf8;
  --a-emerald: #34d399;
  --a-teal:    #4ecdc4;
  --a-pink:    #f472b6;
  --a-violet:  #a78bfa;

  /* Primary accent = orange */
  --a-primary:   #f97316;
  --a-secondary: #f59e0b;
}

/* ── Deep dark background with subtle grid + radial glow ── */
.dark body {
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 60%, rgba(249,115,22,.04) 0%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 85% 15%, rgba(245,158,11,.03) 0%, transparent 100%),
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
}

/* ── Sidebar ── */
.dark #sidebar {
  background: var(--bg-sidebar) !important;
  border-right-color: var(--border) !important;
}
.dark #sidebar nav a.bg-brand-50,
.dark #sidebar nav a.bg-brand-900\/20 {
  background: linear-gradient(90deg, rgba(249,115,22,.18), rgba(249,115,22,.04)) !important;
  border-left: 3px solid var(--a-orange);
  padding-left: calc(0.75rem - 3px);
  color: #fdba74 !important;
}
.dark #sidebar .border-t {
  border-color: var(--border) !important;
}
.dark #sidebar .border-b {
  border-color: var(--border) !important;
}

/* ── Topbar ── */
.dark header.sticky {
  background: var(--bg-topbar) !important;
  border-bottom-color: var(--border) !important;
}

/* ── Cards / Panels (bg-gray-900 in dark) ── */
.dark .bg-gray-900 {
  background: var(--bg-card) !important;
}
.dark .bg-gray-800 {
  background: #1a1a28 !important;
}
.dark .bg-gray-800\/50 {
  background: rgba(26,26,40,.5) !important;
}
.dark .border-gray-800 {
  border-color: var(--border) !important;
}
.dark .border-gray-700 {
  border-color: var(--border-bright) !important;
}
.dark .border-gray-100 {
  border-color: var(--border) !important;
}

/* ── Inputs in dark ── */
.dark input, .dark textarea, .dark select {
  background: #0f0f1a !important;
  border-color: var(--border-bright) !important;
  color: var(--text-1) !important;
}
.dark input::placeholder, .dark textarea::placeholder {
  color: var(--text-3) !important;
}

/* ── Gradient text utility ── */
.gradient-text {
  background: linear-gradient(135deg, var(--a-orange) 0%, var(--a-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-warm {
  background: linear-gradient(135deg, var(--a-red) 0%, var(--a-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glow card variants (add class to any card) ── */
.dark .card-glow-violet {
  border-color: rgba(249,115,22,.3) !important;
  box-shadow: 0 0 0 1px rgba(249,115,22,.12), 0 8px 32px rgba(249,115,22,.1);
}
.dark .card-glow-sky {
  border-color: rgba(56,189,248,.3) !important;
  box-shadow: 0 0 0 1px rgba(56,189,248,.1), 0 8px 32px rgba(56,189,248,.08);
}
.dark .card-glow-emerald {
  border-color: rgba(52,211,153,.3) !important;
  box-shadow: 0 0 0 1px rgba(52,211,153,.1), 0 8px 32px rgba(52,211,153,.08);
}
.dark .card-glow-orange {
  border-color: rgba(249,115,22,.3) !important;
  box-shadow: 0 0 0 1px rgba(249,115,22,.12), 0 8px 32px rgba(249,115,22,.1);
}
.dark .card-glow-pink {
  border-color: rgba(244,114,182,.3) !important;
  box-shadow: 0 0 0 1px rgba(244,114,182,.1), 0 8px 32px rgba(244,114,182,.08);
}
.dark .card-glow-amber {
  border-color: rgba(245,158,11,.3) !important;
  box-shadow: 0 0 0 1px rgba(245,158,11,.1), 0 8px 32px rgba(245,158,11,.08);
}

/* ── Colored left-border accents ── */
.accent-left-violet  { border-left: 3px solid var(--a-orange)  !important; }
.accent-left-sky     { border-left: 3px solid var(--a-sky)     !important; }
.accent-left-emerald { border-left: 3px solid var(--a-emerald) !important; }
.accent-left-orange  { border-left: 3px solid var(--a-orange)  !important; }
.accent-left-pink    { border-left: 3px solid var(--a-pink)    !important; }
.accent-left-teal    { border-left: 3px solid var(--a-teal)    !important; }
.accent-left-amber   { border-left: 3px solid var(--a-amber)   !important; }

/* ── Primary button glow ── */
.dark .bg-brand-600,
.dark .bg-brand-700 {
  box-shadow: 0 0 16px rgba(37,99,235,.3);
}
.dark .bg-brand-600:hover,
.dark .hover\:bg-brand-700:hover {
  box-shadow: 0 0 28px rgba(37,99,235,.45);
}

/* ── Hover card lift ── */
.dark .hover\:shadow-sm:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(249,115,22,.12) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: rgba(249,115,22,.3); }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(249,115,22,.55); }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-100%); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-fade-in { animation: fadeIn 0.2s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.2s ease-out; }
.animate-slide-in-up { animation: slideInUp 0.2s ease-out; }

/* Sidebar transitions */
.sidebar-transition {
  transition: width 0.2s ease, transform 0.2s ease;
}
.main-transition {
  transition: margin-left 0.2s ease;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
  transition: opacity 0.2s ease;
}

/* Toast notifications */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  animation: slideInRight 0.2s ease-out;
  max-width: 24rem;
}
.toast.removing {
  animation: fadeIn 0.15s ease-in reverse forwards;
}

/* Modal transitions */
.modal-backdrop {
  transition: opacity 0.15s ease;
}
.modal-content {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Flash messages */
.flash-message {
  animation: slideInUp 0.2s ease-out;
}

/* Ace Editor overrides */
.ace_editor {
  border-radius: 0.5rem;
  font-family: 'JetBrains Mono', monospace !important;
}
.ace_editor .ace_gutter {
  background: #f9fafb !important;
}
.dark .ace_editor .ace_gutter {
  background: #1f2937 !important;
}

/* Table styles */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Focus ring */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.5);
}

/* Truncate text */
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Loading spinner */
.spinner {
  animation: spin 0.6s linear infinite;
}

/* Pulse dot for online indicator */
.pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Code blocks */
pre code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
}

/* AI Chat Widget */
.ai-chat-panel {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ===== Guia Interactiva ===== */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.25s ease-out;
}
.tour-overlay-exit {
  animation: fadeIn 0.2s ease-in reverse forwards;
}

.tour-tooltip {
  position: fixed;
  z-index: 9991;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 20px;
  opacity: 0;
}
.dark .tour-tooltip {
  background: #1f2937;
  color: #f3f4f6;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.tour-tooltip-enter {
  animation: tourTooltipIn 0.25s ease-out forwards;
}
.tour-tooltip-exit {
  animation: tourTooltipIn 0.2s ease-in reverse forwards;
}
@keyframes tourTooltipIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Mantener transform para tooltips centrados */
.tour-tooltip-enter[style*="translate(-50%"] {
  animation: tourTooltipCenterIn 0.25s ease-out forwards;
}
@keyframes tourTooltipCenterIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.tour-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tour-tooltip-step {
  font-size: 0.75rem;
  font-weight: 600;
  color: #f97316;
  background: #fff7ed;
  padding: 2px 10px;
  border-radius: 999px;
}
.dark .tour-tooltip-step {
  background: rgba(249, 115, 22, 0.2);
  color: #fdba74;
}
.tour-tooltip-close {
  padding: 4px;
  border-radius: 6px;
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour-tooltip-close:hover {
  background: #f3f4f6;
  color: #374151;
}
.dark .tour-tooltip-close:hover {
  background: #374151;
  color: #d1d5db;
}

.tour-tooltip-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px 0;
}
.tour-tooltip-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 16px 0;
  line-height: 1.5;
}
.dark .tour-tooltip-desc {
  color: #9ca3af;
}

.tour-tooltip-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.tour-btn-primary,
.tour-btn-secondary {
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease;
}
.tour-btn-primary {
  background: #f97316;
  color: white;
}
.tour-btn-primary:hover {
  background: #ea580c;
}
.tour-btn-secondary {
  background: #f3f4f6;
  color: #374151;
}
.tour-btn-secondary:hover {
  background: #e5e7eb;
}
.dark .tour-btn-secondary {
  background: #374151;
  color: #d1d5db;
}
.dark .tour-btn-secondary:hover {
  background: #4b5563;
}