/*
 * Cronos v14 — Neo-Minimal Design System
 * Inspirado en Linear · Perplexity Pro · Vercel
 * Paleta: Indigo #6366f1 → Purple #a855f7 sobre blanco limpio
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  --c-bg:          #ffffff;
  --c-bg-soft:     #f8faff;
  --c-bg-muted:    #f0f4ff;
  --c-border:      #e4e8f0;
  --c-border-accent: rgba(99,102,241,0.18);

  --c-indigo:      #6366f1;
  --c-purple:      #a855f7;
  --c-indigo-dim:  rgba(99,102,241,0.08);

  --c-text-primary:   #0f172a;
  --c-text-secondary: #475569;
  --c-text-muted:     #94a3b8;

  --radius-card:   14px;
  --radius-modal:  18px;
  --shadow-card:   0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(99,102,241,0.06);
  --shadow-modal:  0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.05);
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════════════════ */

* { font-family: 'Inter', system-ui, sans-serif; }
code, pre, .font-mono, [class*="font-mono"] { font-family: 'JetBrains Mono', monospace !important; }

body {
  background: linear-gradient(160deg, #f8faff 0%, #f0f4ff 40%, #faf5ff 70%, #f0fbff 100%) !important;
  color: var(--c-text-primary) !important;
  min-height: 100vh;
}

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.45); }

/* ══════════════════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════════════════ */
header {
  background: rgba(255,255,255,0.90) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: 0 1px 0 rgba(99,102,241,0.06) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEXT OVERRIDES — el tema oscuro usaba text-white y text-gray-100 sobre fondos oscuros
   Ahora que los fondos son claros, esos textos deben ser oscuros
═══════════════════════════════════════════════════════════════════════════ */
.text-white    { color: var(--c-text-primary) !important; }
.text-gray-100 { color: var(--c-text-primary) !important; }
.text-gray-200 { color: var(--c-text-primary) !important; }
.text-gray-300 { color: var(--c-text-secondary) !important; }
.text-gray-400 { color: var(--c-text-secondary) !important; }
.text-gray-500 { color: var(--c-text-muted) !important; }
.text-gray-600 { color: var(--c-text-secondary) !important; }

/* Excepciones: preservar colores de acento y estado */
.text-indigo-300, .text-indigo-400, .text-indigo-500 { color: var(--c-indigo) !important; }
.text-purple-300, .text-purple-400 { color: var(--c-purple) !important; }
.text-violet-300, .text-violet-400 { color: #7c3aed !important; }
.text-blue-300,   .text-blue-400   { color: #2563eb !important; }
.text-emerald-300,.text-emerald-400{ color: #059669 !important; }
.text-green-300,  .text-green-400  { color: #16a34a !important; }
.text-red-300,    .text-red-400    { color: #dc2626 !important; }
.text-amber-300,  .text-amber-400,
.text-yellow-300, .text-yellow-400 { color: #d97706 !important; }
.text-cyan-300,   .text-cyan-400   { color: #0891b2 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BACKGROUNDS — forzar fondos claros en elementos que antes eran oscuros
═══════════════════════════════════════════════════════════════════════════ */

/* Bordes oscuros → claros */
.border-gray-700, .border-gray-800, [class*="border-gray-7"],
[class*="border-gray-8"] { border-color: var(--c-border) !important; }

/* Divisores */
.divide-gray-700, .divide-gray-800 > * + * { border-color: var(--c-border) !important; }

/* bg-black/80, bg-black/75 en overlays de modal → tinte índigo suave */
[class*="bg-black"] { background: rgba(99,102,241,0.06) !important; }
[id$="-modal"].fixed, [id*="modal"].fixed { background: rgba(79,70,229,0.08) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   CARDS y PANELES — diseño card limpio con borde sutil
═══════════════════════════════════════════════════════════════════════════ */

/* Todos los bg-gray-900 / 800 que ahora son #f7f9fe / #f0f4fb (via Tailwind config)
   necesitan sombra y borde para verse como cards */
.bg-gray-900, .bg-gray-800, .bg-gray-950 {
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-card) !important;
}

/* Dentro de modals, los paneles anidados bg-gray-800/40 */
[class*="bg-gray-8"] {
  border: 1px solid var(--c-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALES — card elevada
═══════════════════════════════════════════════════════════════════════════ */
[id$="-modal"] > div,
[id*="modal"] > div {
  background: #ffffff !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-modal) !important;
  border-radius: var(--radius-modal) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES — gradiente Indigo → Purple
═══════════════════════════════════════════════════════════════════════════ */

/* CTA principal */
button.bg-indigo-600,
button.bg-purple-600,
button.bg-violet-600,
button.bg-blue-600,
button[class*="bg-indigo-6"],
button[class*="bg-purple-6"],
button[class*="bg-violet-6"],
button[class*="bg-blue-6"] {
  background: linear-gradient(135deg, var(--c-indigo), var(--c-purple)) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(99,102,241,0.35) !important;
  font-weight: 600 !important;
}
button.bg-indigo-600:hover,
button.bg-purple-600:hover,
button.bg-violet-600:hover {
  background: linear-gradient(135deg, #4f46e5, #9333ea) !important;
  box-shadow: 0 4px 20px rgba(99,102,241,0.45) !important;
  transform: translateY(-1px) !important;
}

/* Botones secundarios — estilo ghost */
.btn-sm,
button.bg-gray-800,
button.bg-gray-700,
button[class*="bg-gray-8"],
button[class*="bg-gray-7"] {
  background: #ffffff !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text-secondary) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  font-weight: 500 !important;
}
.btn-sm:hover,
button.bg-gray-800:hover,
button.bg-gray-700:hover {
  background: var(--c-indigo-dim) !important;
  border-color: var(--c-border-accent) !important;
  color: var(--c-indigo) !important;
}

/* Botones peligro */
button.bg-red-900, button.bg-red-800,
button[class*="bg-red-9"], button[class*="bg-red-8"] {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  color: #dc2626 !important;
}
button.bg-red-900:hover { background: #ffe4e6 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BADGES — Pastel premium
═══════════════════════════════════════════════════════════════════════════ */
/* Emerald / success */
[class*="bg-emerald"][class*="text-emerald"],
[class*="bg-green"][class*="text-green"] {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
  color: #065f46 !important;
  border: 1px solid rgba(16,185,129,0.2) !important;
}
/* Blue / info */
[class*="bg-blue"][class*="text-blue"],
[class*="bg-indigo"][class*="text-indigo"] {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;
  color: #3730a3 !important;
  border: 1px solid rgba(99,102,241,0.2) !important;
}
/* Purple / violet */
[class*="bg-purple"][class*="text-purple"],
[class*="bg-violet"][class*="text-violet"] {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe) !important;
  color: #5b21b6 !important;
  border: 1px solid rgba(139,92,246,0.2) !important;
}
/* Amber / warning */
[class*="bg-amber"][class*="text-amber"],
[class*="bg-yellow"][class*="text-yellow"] {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: #92400e !important;
  border: 1px solid rgba(245,158,11,0.2) !important;
}
/* Red / danger */
[class*="bg-red"][class*="text-red"] {
  background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
  color: #991b1b !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
}

/* DORA */
.dora-elite  { color:#065f46!important; background:linear-gradient(135deg,#d1fae5,#a7f3d0)!important; border-color:rgba(16,185,129,.2)!important; }
.dora-high   { color:#1d4ed8!important; background:linear-gradient(135deg,#dbeafe,#bfdbfe)!important; border-color:rgba(59,130,246,.2)!important; }
.dora-medium { color:#92400e!important; background:linear-gradient(135deg,#fef3c7,#fde68a)!important; border-color:rgba(245,158,11,.2)!important; }
.dora-low    { color:#991b1b!important; background:linear-gradient(135deg,#fee2e2,#fecaca)!important; border-color:rgba(239,68,68,.2)!important; }

/* ══════════════════════════════════════════════════════════════════════════
   INPUTS y FORMS
═══════════════════════════════════════════════════════════════════════════ */
input, textarea, select {
  background: #ffffff !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text-primary) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--c-indigo) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.10) !important;
}
input::placeholder, textarea::placeholder { color: var(--c-text-muted) !important; }

#idea-input {
  background: #ffffff !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 12px !important;
  color: var(--c-text-primary) !important;
  font-size: 0.95rem !important;
}
#idea-input:focus {
  border-color: var(--c-indigo) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.08) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   EVOLUTION DASHBOARD — Tabs
═══════════════════════════════════════════════════════════════════════════ */
.evo-tab {
  color: var(--c-text-secondary) !important;
  background: transparent !important;
  border-color: transparent !important;
  font-weight: 500 !important;
}
.evo-tab:hover {
  color: var(--c-indigo) !important;
  background: var(--c-indigo-dim) !important;
}
.evo-tab.active {
  color: var(--c-indigo) !important;
  background: #ffffff !important;
  border-color: var(--c-border-accent) !important;
  box-shadow: 0 1px 0 #fff, 0 -2px 0 var(--c-indigo) inset !important;
}
.intel-tab { color: var(--c-text-muted) !important; }
.intel-tab.active {
  color: var(--c-indigo) !important;
  background: var(--c-indigo-dim) !important;
  border-color: var(--c-border-accent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TERMINAL — dark panel (contraste intencional con el fondo claro)
═══════════════════════════════════════════════════════════════════════════ */
#terminal, #terminal-wrap, [id*="terminal"],
.terminal-container {
  background: #0a0f1e !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(99,102,241,0.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}
.log-phase-block { background: rgba(15,23,42,.95) !important; color: #e2e8f0; }
.log-complete    { background: rgba(16,185,129,.1) !important; border-color: rgba(16,185,129,.3) !important; }
.log-error-block { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.3) !important; }
.log-warn-line   { background: rgba(234,179,8,.08) !important; }
.log-tool        { background: rgba(99,102,241,.08) !important; border-left-color: var(--c-indigo) !important; }
/* Dentro del terminal, texto debe seguir siendo claro */
#terminal .text-white,
#terminal .text-gray-100,
#terminal .text-gray-200,
#terminal .text-gray-300 { color: #e2e8f0 !important; }
#terminal .text-gray-400,
#terminal .text-gray-500 { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PRISM.JS — Light Modern / GitHub-style
═══════════════════════════════════════════════════════════════════════════ */
.cronos-code-block {
  border-radius: 12px !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
}
.cronos-code-header {
  background: var(--c-bg-soft) !important;
  border-bottom: 1px solid var(--c-border) !important;
}
.cronos-lang-badge { color: var(--c-indigo) !important; font-weight: 600 !important; }
.cronos-copy-btn {
  background: #ffffff !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-indigo) !important;
}
.cronos-copy-btn:hover { background: var(--c-indigo-dim) !important; }
.cronos-copy-btn.copied { color: #059669 !important; border-color: #059669 !important; }

.cronos-code-block pre[class*="language-"],
.cronos-code-block code[class*="language-"] {
  background: var(--c-bg-soft) !important;
  color: #1e293b !important;
  font-size: 11.5px !important;
}
.cronos-code-block .line-numbers-rows {
  border-right: 1px solid var(--c-border) !important;
  background: #f0f4ff !important;
}
.cronos-code-block .line-numbers-rows > span::before { color: #94a3b8 !important; }

/* GitHub Light tokens */
.cronos-code-block .token.comment  { color: #6b7280 !important; font-style:italic; }
.cronos-code-block .token.keyword  { color: #7c3aed !important; font-weight:600; }
.cronos-code-block .token.string   { color: #0891b2 !important; }
.cronos-code-block .token.number   { color: #d97706 !important; }
.cronos-code-block .token.boolean  { color: #7c3aed !important; }
.cronos-code-block .token.function { color: #0f766e !important; }
.cronos-code-block .token.class-name { color: #b45309 !important; }
.cronos-code-block .token.operator { color: #dc2626 !important; }
.cronos-code-block .token.null     { color: #dc2626 !important; }
.cronos-code-block .token.property { color: #0f766e !important; }

/* ══════════════════════════════════════════════════════════════════════════
   WORKFLOW BUILDER NODES
═══════════════════════════════════════════════════════════════════════════ */
.wf-node {
  background: #ffffff !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.wf-node:hover {
  border-color: var(--c-border-accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08), 0 4px 16px rgba(99,102,241,0.12) !important;
}
.wf-node.selected {
  border-color: var(--c-indigo) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
}
.wf-node-header { background: var(--c-bg-soft) !important; border-bottom: 1px solid var(--c-border) !important; }
.wf-node-name { color: var(--c-text-primary) !important; }
.wf-node-task { color: var(--c-text-secondary) !important; }
.wf-node-actions { background: var(--c-bg-soft) !important; border-top: 1px solid var(--c-border) !important; }
.wf-node-btn { color: var(--c-text-secondary) !important; border-color: var(--c-border) !important; background: transparent !important; }
.wf-node-btn:hover { background: var(--c-indigo-dim) !important; color: var(--c-indigo) !important; border-color: var(--c-border-accent) !important; }
.wf-node-btn.danger:hover { background: #fff1f2 !important; color: #dc2626 !important; border-color: #fecdd3 !important; }
.wf-par-group-label { background: #ffffff !important; color: var(--c-indigo) !important; border: 1px solid var(--c-border-accent) !important; border-radius: 6px; }
.wf-par-strategy-select { background: #ffffff !important; color: var(--c-indigo) !important; border-color: var(--c-border-accent) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   STATUS STATES
═══════════════════════════════════════════════════════════════════════════ */
.card-thinking {
  box-shadow: 0 0 0 2px rgba(168,85,247,0.3), 0 4px 16px rgba(168,85,247,0.12) !important;
  border-color: rgba(168,85,247,0.3) !important;
}
.card-done  {
  box-shadow: 0 0 0 2px rgba(5,150,105,0.25) !important;
  border-color: rgba(5,150,105,0.25) !important;
}
.card-error {
  box-shadow: 0 0 0 2px rgba(220,38,38,0.2) !important;
  border-color: rgba(220,38,38,0.2) !important;
}

.progress-shimmer {
  background: linear-gradient(90deg, var(--c-indigo) 25%, var(--c-purple) 50%, var(--c-indigo) 75%) !important;
  background-size: 200% auto !important;
  animation: shimmer 1.8s linear infinite !important;
}
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════════════════════ */
@keyframes dot-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.8)} }
.dot-pulse { animation: dot-pulse 1.2s ease-in-out infinite; }
@keyframes slide-up { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes fade-in  { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.toast    { animation: slide-up .25s ease; }
.fade-in  { animation: fade-in  .3s ease; }

@keyframes pulse-border {
  0%,100% { box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
  50%      { box-shadow: 0 0 0 5px rgba(99,102,241,0.06); }
}
.pulse-border { animation: pulse-border 2s ease-in-out infinite; }

.tl-phase  { transition: all .25s; }
.tl-active { border-color:rgba(99,102,241,.4)!important; background:var(--c-indigo-dim)!important; }
.tl-done   { border-color:rgba(5,150,105,.3)!important; }
.tl-error  { border-color:rgba(220,38,38,.3)!important; }

/* ══════════════════════════════════════════════════════════════════════════
   ALERTS / TOASTS
═══════════════════════════════════════════════════════════════════════════ */
.cronos-alert {
  color: #f8fafc !important;
  background: #111827 !important;
  border: 1px solid #475569 !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
  text-shadow: none !important;
}
.cronos-alert-info {
  background: #0f172a !important;
  border-color: #38bdf8 !important;
  color: #e0f2fe !important;
}
.cronos-alert-success {
  background: #052e1b !important;
  border-color: #22c55e !important;
  color: #dcfce7 !important;
}
.cronos-alert-warn,
.cronos-alert-warning {
  background: #2a1f08 !important;
  border-color: #f59e0b !important;
  color: #fef3c7 !important;
}
.cronos-alert-error {
  background: #2b0b0f !important;
  border-color: #ef4444 !important;
  color: #fee2e2 !important;
}
.cronos-alert button,
.cronos-alert strong,
.cronos-alert span,
.cronos-alert p {
  color: inherit !important;
}
.toast.cronos-alert {
  min-width: 18rem !important;
  line-height: 1.45 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS
═══════════════════════════════════════════════════════════════════════════ */
#notif-dropdown.notif-dropdown {
  background: #0f172a !important;
  border: 1px solid #94a3b8 !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) inset !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.notif-header {
  background: #111827 !important;
  border-bottom: 1px solid #475569 !important;
}
.notif-title { color: #e2e8f0 !important; }
.notif-action {
  color: #cbd5e1 !important;
  font-size: 0.625rem !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
}
.notif-action:hover { color: #ffffff !important; }
.notif-action-danger { color: #fca5a5 !important; }
.notif-action-danger:hover { color: #fecaca !important; }
#notif-list { background: #0f172a !important; }
.notif-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
  padding: 0.85rem 0.9rem !important;
  border-bottom: 1px solid #334155 !important;
  color: #f8fafc !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.notif-item:last-child { border-bottom: 0 !important; }
.notif-item:hover { background: #1e293b !important; }
.notif-item.is-unread { background: #111c32 !important; }
.notif-item.is-read { background: #0f172a !important; }
.notif-icon {
  flex: 0 0 auto !important;
  margin-top: 0.05rem !important;
  filter: saturate(1.15) !important;
}
.notif-message {
  color: #f8fafc !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.notif-item.is-read .notif-message {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}
.notif-time {
  color: #94a3b8 !important;
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
  margin-top: 0.35rem !important;
}
.notif-unread-dot {
  width: 0.5rem !important;
  height: 0.5rem !important;
  border-radius: 9999px !important;
  background: #a78bfa !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,.18) !important;
  flex: 0 0 auto !important;
  margin-top: 0.35rem !important;
}
.notif-empty {
  color: #cbd5e1 !important;
  font-size: 0.75rem !important;
  text-align: center !important;
  padding: 1rem !important;
  margin: 0 !important;
}