/* =========================================================================
   Design tokens
   ========================================================================= */
:root {
  --brand-50:  #F5F2FF;
  --brand-100: #EDE6FF;
  --brand-200: #D9CCFF;
  --brand-400: #A480FF;
  --brand-500: #865AFF;   /* marca — inicio del degradé */
  --brand-600: #9B59B6;   /* marca — fin del degradé */
  --brand-700: #7E4497;

  --ink-900: #1B1730;
  --ink-700: #3A3452;
  --ink-500: #6B6580;
  --ink-300: #A9A3BC;

  --surface: #FBFAFF;
  --border: #E9E4F7;
  --white: #FFFFFF;

  --success: #16A34A;
  --success-soft: #E8F8EE;
  --warning: #D97706;
  --warning-soft: #FDF2E3;
  --danger:  #DC2626;
  --danger-soft: #FCE9E9;
  --muted-soft: #EFEDF5;

  --brand-gradient: linear-gradient(120deg, #865AFF 0%, #9B59B6 100%);
  --shadow-sm: 0 1px 2px rgba(27, 23, 48, 0.06);
  --shadow-md: 0 6px 20px rgba(134, 90, 255, 0.10);
  --radius: 14px;
  --radius-sm: 10px;
}

/* =========================================================================
   Base
   ========================================================================= */
body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--white);
  color: var(--ink-900);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

a { color: var(--brand-600); }
a:hover { color: var(--brand-700); }

.text-muted { color: var(--ink-500) !important; }

/* =========================================================================
   Navbar — barra de degradé de marca sobre fondo blanco
   ========================================================================= */
.navbar-brand-gradient {
  background: var(--brand-gradient);
  box-shadow: 0 2px 16px rgba(155, 89, 182, 0.30);
}
.navbar-brand-gradient .navbar-brand {
  font-weight: 800;
  color: var(--white) !important;
  letter-spacing: -0.01em;
}
.navbar-brand-gradient .btn-nav-link {
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-weight: 600;
  transition: background 0.15s ease;
}
.navbar-brand-gradient .btn-nav-link:hover {
  background: rgba(255, 255, 255, 0.26);
  color: var(--white);
}
.navbar-brand-gradient .btn-nav-link.active {
  background: var(--white);
  color: var(--brand-600);
  border-color: var(--white);
}

/* =========================================================================
   Cards
   ========================================================================= */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-hover-lift { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* =========================================================================
   Botones
   ========================================================================= */
.btn-primary {
  background: var(--brand-gradient);
  border: none;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(134, 90, 255, 0.30);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  box-shadow: 0 4px 14px rgba(155, 89, 182, 0.40);
}
.btn-outline-primary {
  color: var(--brand-600);
  border-color: var(--brand-400);
  font-weight: 600;
}
.btn-outline-primary:hover {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.btn-outline-success { color: var(--success); border-color: var(--success); font-weight: 600; }
.btn-outline-success:hover { background: var(--success); border-color: var(--success); }
.btn-success { background: var(--success); border: none; font-weight: 600; }

/* =========================================================================
   Badges de estado
   ========================================================================= */
.badge-status-pending { background: var(--muted-soft); color: var(--ink-500); }
.badge-status-transcribing, .badge-status-analyzing, .badge-status-extracting { background: var(--warning-soft); color: var(--warning); }
.badge-status-done { background: var(--success-soft); color: var(--success); }
.badge-status-error { background: var(--danger-soft); color: var(--danger); }
.badge-status-pending, .badge-status-transcribing, .badge-status-analyzing, .badge-status-extracting,
.badge-status-done, .badge-status-error {
  font-weight: 600;
  padding: 0.4em 0.75em;
  border-radius: 999px;
}

/* =========================================================================
   Evidencia (cita de la transcripción)
   ========================================================================= */
.evidence-box {
  font-size: 0.85rem;
  color: var(--ink-700);
  background: var(--brand-50);
  border-left: 3px solid var(--brand-500);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
}

/* =========================================================================
   KPI cards (dashboard)
   ========================================================================= */
.kpi-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--brand-gradient);
}
.kpi-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kpi-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink-900);
  margin-top: 4px;
}
.kpi-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

/* =========================================================================
   Chart cards
   ========================================================================= */
.chart-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.chart-card h6 {
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chart-card h6::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-gradient);
  display: inline-block;
}

/* =========================================================================
   Tablas
   ========================================================================= */
.table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-500);
  border-bottom: 2px solid var(--border);
  background: var(--surface);
}
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--brand-50); }

/* =========================================================================
   Formularios
   ========================================================================= */
.form-control:focus, .form-select:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 0.2rem rgba(134, 90, 255, 0.18);
}

/* =========================================================================
   Utilidades
   ========================================================================= */
.brand-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.section-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}