:root {
  /* ÍNDICE — Design Tokens (prompt maestro) */
  --primary: #1E4D9F;              /* Azul Índice – CTA principal */
  --primary-600: #173b79;
  --logo-yellow: #FFD650;          /* Oro – solo para CTAs */
  --logo-green: #2BB673;           /* Éxito */
  --logo-red: #E74C3C;             /* Error */

  --process-yellow: #F4C430;
  --process-yellow-soft: #FFF4CC;

  --accent-config: #8F38C6;
  --accent-config-soft: #A5ADD5;

  --bg-surface: #F9FAFB;
  --bg-surface-2: #F6F7F9;
  --bg-card: #FFFFFF;
  --text: #0F172A;
  --text-muted: #6B7280;
  --border-light: rgba(15,23,42,.06);

  --radius: 16px;
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --shadow-soft: 0 2px 10px rgba(15,23,42,.06);

  --focus: rgba(30,77,159,.25);
}

html, body { height: 100%; }

body {
  background: var(--bg-surface);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
}

/* Tipografía / jerarquía */
h1, h2, h3 { letter-spacing: -0.02em; }
.lead-muted, .small-note { color: var(--text-muted); }

/* Header (humano, no intimidante) */
.auth-header {
  background: linear-gradient(90deg, rgba(30,77,159,.10), rgba(30,77,159,.05));
  border-bottom: 1px solid var(--border-light);
}

.auth-header .btn {
  padding: .5rem .85rem;
  border-radius: 999px;
  font-size: .95rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
}
.brand:hover { color: var(--text); filter: brightness(.97); }

/* Shell */
.auth-shell {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
}

/* Card base */
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

@media (min-width: 768px) {
  .auth-card { padding: 36px; }
}

/* Botones (regla: 1 dominante + 1 acento máximo)
   - Dominante: Azul Índice
   - Acento: Oro sólo para CTA principal */
.btn-brand {
  background: var(--logo-yellow);
  border: 1px solid var(--logo-yellow);
  color: #111827;
  font-weight: 700;
  border-radius: 12px;
  padding: .8rem 1rem;
  box-shadow: 0 6px 16px rgba(15,23,42,.10);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-brand:hover {
  filter: brightness(.97);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,.14);
  color: #111827;
}

.btn-outline-primary-soft {
  background: transparent;
  border: 1px solid rgba(30,77,159,.35);
  color: var(--primary);
  font-weight: 700;
  border-radius: 12px;
  padding: .8rem 1rem;
  transition: transform .14s ease, background-color .14s ease, filter .14s ease;
}
.btn-outline-primary-soft:hover {
  background: rgba(30,77,159,.06);
  transform: translateY(-1px);
  filter: brightness(.99);
  color: var(--primary-600);
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(15,23,42,.12);
  color: var(--text);
  font-weight: 600;
  border-radius: 12px;
  padding: .8rem 1rem;
  transition: transform .14s ease, background-color .14s ease;
}
.btn-ghost:hover {
  background: rgba(15,23,42,.04);
  transform: translateY(-1px);
  color: var(--text);
}

/* Compat: clases anteriores usadas en home/login */
.btn-primary-soft { /* ahora es CTA oro */
  background: var(--logo-yellow);
  border: 1px solid var(--logo-yellow);
  color: #111827;
  font-weight: 700;
  border-radius: 12px;
  padding: .8rem 1rem;
  box-shadow: 0 6px 16px rgba(15,23,42,.10);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-primary-soft:hover {
  filter: brightness(.97);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,.14);
  color: #111827;
}

.btn-outline-soft { /* ahora es secundario azul */
  background: transparent;
  border: 1px solid rgba(30,77,159,.35);
  color: var(--primary);
  font-weight: 700;
  border-radius: 12px;
  padding: .8rem 1rem;
  transition: transform .14s ease, background-color .14s ease, filter .14s ease;
}
.btn-outline-soft:hover {
  background: rgba(30,77,159,.06);
  transform: translateY(-1px);
  filter: brightness(.99);
  color: var(--primary-600);
}

.btn-neutral { /* neutro discreto */
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  color: var(--text);
  font-weight: 600;
  border-radius: 12px;
  padding: .8rem 1rem;
  transition: transform .14s ease, background-color .14s ease;
}
.btn-neutral:hover {
  background: rgba(15,23,42,.03);
  transform: translateY(-1px);
}

/* Inputs: minimal underline */
.form-label { font-weight: 600; color: var(--text); }
.form-control, .form-select {
  border: none;
  border-bottom: 1px solid rgba(15,23,42,.12);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}
.form-control:focus, .form-select:focus {
  box-shadow: none;
  border-bottom-color: rgba(30,77,159,.7);
}

/* Focus accesible */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Separador */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
}
.divider:before, .divider:after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(15,23,42,.08);
}

/* Feature cards */
.feature-card {
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.feature-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
  filter: brightness(.99);
}

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30,77,159,.08);
  color: var(--primary);
}

/* Microinteracciones */
.fade-in { animation: fadeIn .25s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pequeños ajustes a Bootstrap alerts para look más suave */
.alert {
  border-radius: 14px;
  border-color: rgba(15,23,42,.08);
}