/* Oráculo — shared frontend styles (index, chat, extract, rag) */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #0a1628;
  color: #e0e0e0;
  min-height: 100vh;
}

/* ---------- Header ---------- */
.header { text-align: center; padding: 2.5rem 1rem; border-bottom: 1px solid #1a2744; position: relative; }
.header h1 { font-size: 2rem; color: #60a5fa; margin-bottom: 0.5rem; }
.header h1.gradient { background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.header p { color: #94a3b8; font-size: 1rem; max-width: 600px; margin: 0 auto; }

/* ---------- Back link ---------- */
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: #64748b; text-decoration: none; padding: 0.85rem 1rem; font-size: 0.9rem; }
.back-link:hover { color: #94a3b8; }

/* ---------- Layout ---------- */
.container, .content-area { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
.container.wide { max-width: 1200px; }

.section-title { font-size: 1.3rem; color: #60a5fa; margin-bottom: 1.5rem; border-left: 4px solid #60a5fa; padding-left: 1rem; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 0.5rem; padding: 0 1rem; border-bottom: 1px solid #334155; margin-top: 1.5rem; flex-wrap: wrap; }
.tab { padding: 0.85rem 1.5rem; cursor: pointer; color: #64748b; border-bottom: 2px solid transparent; transition: all 0.2s; font-size: 0.95rem; white-space: nowrap; }
.tab.active { color: #60a5fa; border-bottom-color: #60a5fa; font-weight: 600; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1.25rem; }
.form-group label, label { display: block; color: #94a3b8; margin-bottom: 0.5rem; font-size: 0.9rem; }
input[type="text"], input[type="number"], input[type="file"], select, textarea {
  width: 100%; padding: 0.75rem 1rem; background: #1e293b; border: 1px solid #334155;
  color: #f8fafc; border-radius: 8px; font-size: 1rem; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); }

/* ---------- Buttons ---------- */
.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white; padding: 0.75rem 1.5rem;
  border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; }

/* ---------- States ---------- */
.loading-text { text-align: center; padding: 2rem; color: #64748b; }
.empty-text { text-align: center; padding: 1.5rem; color: #64748b; }
.error-text { color: #ef4444; }
.banner-error { background: #3b1f24; border: 1px solid #7f1d2e; color: #fca5a5; padding: 0.85rem 1.25rem; border-radius: 8px; font-size: 0.9rem; margin-bottom: 1.25rem; }

.status-badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; }
.status-pending { background: #4a3a1f; color: #fbbf24; }
.status-processing { background: #1f3a4a; color: #60a5fa; }
.status-indexed { background: #1f4a2d; color: #4ade80; }
.status-failed { background: #4a1f27; color: #f87171; }

.footer { text-align: center; padding: 2rem; border-top: 1px solid #1a2744; margin-top: 3rem; color: #64748b; font-size: 0.85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .header { padding: 1.75rem 1rem; }
  .header h1 { font-size: 1.5rem; }
  .container, .content-area { padding: 1.25rem 0.85rem; }
  .tab { padding: 0.7rem 1rem; font-size: 0.85rem; }
}