/* assets/css/style.css */

/* --------------------------------------------------------------
# 1. Variables de Color Personalizadas (Basadas en la web de referencia)
-------------------------------------------------------------- */
:root {
  --color-primario-referencia: #387EC4; /* Azul medio para botones, enlaces, acentos */
  --color-primario-referencia-rgb: 56, 126, 196; /* Versión RGB para Bootstrap */
  
  --color-oscuro-referencia: #0A2141;   /* Azul navy para navbar, footer */
  --color-oscuro-referencia-rgb: 10, 33, 65; /* Versión RGB */

  --color-enlace-hover-referencia: #2D69A9; /* Un poco más oscuro para hover de enlaces */

  --color-texto-sobre-oscuro: #ffffff;
  --color-texto-sobre-claro: #333333; /* Gris oscuro para texto normal */
}

/* --------------------------------------------------------------
# 2. Sobrescribir Variables de Color de Bootstrap
-------------------------------------------------------------- */
:root {
  --bs-primary: var(--color-primario-referencia);
  --bs-primary-rgb: var(--color-primario-referencia-rgb);
  
  --bs-dark: var(--color-oscuro-referencia);
  --bs-dark-rgb: var(--color-oscuro-referencia-rgb);

  /* Para que los botones "primary" tengan texto blanco (si es necesario) */
  --bs-btn-color: var(--color-texto-sobre-oscuro); /* Color de texto para botones .btn */
  --bs-btn-hover-color: var(--color-texto-sobre-oscuro);
  --bs-btn-active-color: var(--color-texto-sobre-oscuro);

  /* Ajustar el color de los enlaces globalmente */
  --bs-link-color: var(--color-primario-referencia);
  --bs-link-hover-color: var(--color-enlace-hover-referencia);
  
  /* Opcional: ajustar otros colores si es necesario */
  /* --bs-secondary: #otro_color_secundario; */
  /* --bs-secondary-rgb: X, Y, Z; */

  /* Color de texto por defecto del body */
  --bs-body-color: var(--color-texto-sobre-claro);
  --bs-body-bg: #f8f9fa; /* Un gris muy claro para el fondo general, o #ffffff para blanco puro */
}

/* --------------------------------------------------------------
# 3. Ajustes Específicos (si son necesarios después de cambiar variables)
-------------------------------------------------------------- */

/* Navbar: Asegurar texto blanco y color de fondo oscuro personalizado */
.navbar-dark {
  background-color: var(--color-oscuro-referencia) !important; /* Forzar si es necesario */
}
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
  color: var(--color-texto-sobre-oscuro);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75); /* Un blanco semitransparente para hover */
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Botones: Asegurar que btn-primary use los colores definidos */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--color-texto-sobre-oscuro); /* Texto blanco sobre el botón azul */
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-enlace-hover-referencia); /* Usar el color de hover para consistencia */
  border-color: var(--color-enlace-hover-referencia);
  color: var(--color-texto-sobre-oscuro);
}

/* Encabezados de Tarjetas (si usas .bg-primary o .bg-dark) */
.card-header.bg-primary {
  background-color: var(--bs-primary) !important;
  color: var(--color-texto-sobre-oscuro) !important;
}
.card-header.bg-dark {
  background-color: var(--bs-dark) !important;
  color: var(--color-texto-sobre-oscuro) !important;
}
.card-header.bg-info { /* Si quieres que el azul de info sea el primario */
    background-color: var(--bs-primary) !important;
    color: var(--color-texto-sobre-oscuro) !important;
}


/* Badges (insignias) */
.badge.bg-primary {
  background-color: var(--bs-primary) !important;
  color: var(--color-texto-sobre-oscuro) !important; /* Si el texto no contrasta bien */
}
.badge.bg-info { /* Si quieres que el azul de info sea el primario */
    background-color: var(--bs-primary) !important;
    color: var(--color-texto-sobre-oscuro) !important;
}
/* Puedes añadir más para .bg-success, .bg-warning si los colores por defecto de Bootstrap no combinan bien */


/* Footer (si tienes una clase específica o usas bg-dark) */
footer.bg-dark { /* Asumiendo que tu footer tiene la clase bg-dark */
  background-color: var(--color-oscuro-referencia) !important;
  color: var(--color-texto-sobre-oscuro);
}
footer.bg-dark a {
    color: #a9c5e4; /* Un azul más claro para enlaces en el footer oscuro */
}
footer.bg-dark a:hover {
    color: #ffffff;
}


/* Estilos generales */
body {
  font-family: 'Roboto', sans-serif; /* La web de referencia usa Roboto */
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-oscuro-referencia); /* Títulos en el azul oscuro */
}

/* Breadcrumbs */
.breadcrumb.bg-light {
    background-color: #e9ecef !important; /* Un gris un poco más suave para el breadcrumb */
}