:root {
  /* Colores de marca — extraídos del logotipo (Fase 2) */
  --color-primary-900: #0D3259;
  --color-primary-700: #14497A;
  --color-primary-500: #2D6BA3;
  --color-primary-100: #E7EFF7;

  --color-accent-700: #C6520F;
  --color-accent-500: #F0661E;
  --color-accent-300: #FA9A5A;
  --color-accent-100: #FDEBDD;

  --color-gray-900: #1C2430;
  --color-gray-600: #5B6472;
  --color-gray-300: #D9DEE4;
  --color-gray-100: #F4F6F8;
  --color-white: #FFFFFF;

  --color-success: #1B8A5A;
  --color-warning: #E0A214;
  --color-error: #D93A3A;
  --color-info: #2B8FD1;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 16px;
  --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px;

  /* Tokens semánticos (siempre modo claro) */
  --color-bg: var(--color-white);
  --color-surface: var(--color-white);
  --color-text: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-border: var(--color-gray-300);
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4, .cj-brand {
  font-family: var(--font-heading);
}

/* ---------- Navbar ---------- */
.cj-navbar {
  background-color: var(--color-primary-700);
  padding: var(--space-3) 0;
}
.cj-navbar .nav-link,
.cj-navbar .navbar-brand {
  color: var(--color-white) !important;
}
.cj-brand {
  font-weight: 700;
  font-size: 1.3rem;
}
.cj-brand-accent {
  color: var(--color-accent-500);
}

/* ---------- Botones ---------- */
.cj-btn-primary {
  background-color: var(--color-accent-500);
  border: none;
  color: var(--color-white) !important;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  font-weight: 500;
  transition: background-color 0.15s ease;
}
.cj-btn-primary:hover {
  background-color: var(--color-accent-700);
  color: var(--color-white) !important;
}

.cj-btn-outline {
  background-color: transparent;
  border: 1.5px solid var(--color-primary-700);
  color: var(--color-primary-700);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-weight: 500;
}
.cj-btn-outline:hover {
  background-color: var(--color-primary-100);
}

/* Variante para usarse sobre fondos oscuros (navbar, footer) */
.cj-btn-outline-light {
  background-color: transparent;
  border: 1.5px solid var(--color-white);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-weight: 500;
}
.cj-btn-outline-light:hover {
  background-color: rgba(255,255,255,0.1);
}

/* ---------- Cards ---------- */
.cj-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(20,73,122,0.08);
  padding: var(--space-4);
}

/* ---------- Badges de estado ---------- */
.cj-badge {
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  display: inline-block;
}
.cj-badge-info     { background: var(--color-primary-100); color: var(--color-primary-700); }
.cj-badge-warning  { background: var(--color-accent-100);  color: var(--color-warning); }
.cj-badge-success  { background: #DCF3E6; color: var(--color-success); }
.cj-badge-error    { background: #FBE3E3; color: var(--color-error); }

/* ---------- Main / Footer ---------- */
.cj-main {
  min-height: 70vh;
}
.cj-footer {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
}
.cj-footer a {
  color: var(--color-gray-100);
  text-decoration: none;
}
.cj-footer a:hover {
  color: var(--color-accent-500);
}

/* ---------- Formularios ---------- */
.form-label {
  font-weight: 500;
  color: var(--color-text);
}
.form-control:focus {
  border-color: var(--color-primary-700);
  box-shadow: 0 0 0 0.2rem rgba(20,73,122,0.15);
}

/* ---------- Tablas (forzar que respeten el tema claro/oscuro) ---------- */
/* Bootstrap define sus propias variables internas para tablas
   (--bs-table-bg, --bs-table-color), independientes de nuestro
   sistema de diseño, y por defecto quedan blancas/negras sin
   importar el modo oscuro. Las sobreescribimos aquí. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  --bs-table-striped-bg: rgba(20,73,122,0.03);
  --bs-table-striped-color: var(--color-text);
  --bs-table-hover-bg: rgba(20,73,122,0.05);
  --bs-table-hover-color: var(--color-text);
  --bs-table-border-color: var(--color-border);
  color: var(--color-text);
}
.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}
.table thead th {
  color: var(--color-text-secondary);
}

/* ---------- Responsivo (móvil) ---------- */
@media (max-width: 767.98px) {
  .cj-navbar {
    padding: var(--space-2) 0;
  }
  .cj-brand {
    font-size: 1.05rem;
  }
  .cj-card {
    padding: var(--space-3);
  }
  h1.display-5 {
    font-size: 1.9rem;
  }
  .lead {
    font-size: 1rem;
  }
  /* Botones de acción en tablas: que se apilen en vez de desbordar */
  td.text-end form,
  td.text-end a,
  td.text-end button {
    margin-bottom: var(--space-1);
  }
  /* Evitar que las cards de estadísticas se vean apretadas */
  .cj-card .fs-2 {
    font-size: 1.5rem !important;
  }
}