/* CurriculumFlow - Branding Personalizado */

/* Variables de colores del branding "Teal Energizado" */
:root {
  --teal-profundo: #008080;
  --teal-mas-oscuro: #004040; /* Tono teal más oscuro para el degradado */
  --coral-vibrante: #ff7f50;
  --coral-vibrante-suavizado: #ff997a; /* Coral más suave para efectos hover */
  --ambar-dorado: #ffbf00;
  --blanco-puro: #ffffff;
  --gris-suave: #f8f9fa; /* Similar al antiguo --light-bg */
  --texto-principal: #333333;
  --texto-secundario: #555555;

  /* Variables heredadas (a eliminar o reasignar) */
  --primary-blue: var(--teal-profundo); /* Reasignado por ahora */
  --success-green: var(--coral-vibrante); /* ACTUALIZADO a Coral Vibrante */
  --solid-gray: var(--texto-principal); /* Reasignado por ahora */
  --light-bg: var(--gris-suave); /* Reasignado por ahora */
  --white: var(--blanco-puro); /* Reasignado por ahora */
  --text-muted: var(--texto-secundario); /* Reasignado por ahora */

  /* Variables de fuentes */
  --font-titulos: "Montserrat", sans-serif;
  --font-cuerpo: "Inter", sans-serif;
}

/* Tipografías */
body {
  font-family: var(--font-cuerpo); /* Fuente actualizada */
  background-color: var(--gris-suave); /* Fondo actualizado */
  color: var(--texto-principal); /* Color de texto actualizado */
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: var(--font-titulos); /* Fuente actualizada */
  font-weight: 600;
}

/* Header y navegación */
.navbar {
  /* General navbar styling */
  background-image: linear-gradient(
    to right,
    var(--teal-mas-oscuro),
    var(--teal-profundo)
  );
  /* box-shadow: 0 4px 20px rgba(0, 128, 128, 0.3); Optional: new shadow based on teal */
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
  color: var(--blanco-puro); /* Ensure text is white on dark navbar */
}

.navbar-brand img {
  max-height: 50px; /* Ajustar según sea necesario para el isotipo del logo */
  margin-right: 10px;
  /* filter: drop-shadow(
    0 0 5px rgba(255, 255, 255, 0.7)
  ); Sombra eliminada para contraste */
}

/* Eliminar gradiente antiguo si se usa específicamente y reemplazar con color sólido */
.bg-gradient-primary {
  background: var(--teal-profundo); /* Color sólido, gradiente eliminado */
  /* box-shadow: 0 4px 20px rgba(42, 110, 184, 0.3); Sombra antigua, eliminar o actualizar */
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
}

.navbar-subtitle {
  font-weight: 300; /* Peso de fuente más ligero */
  font-size: 0.75em; /* Tamaño de fuente más pequeño relativo al padre */
  display: block; /* Asegura que tome su propia línea si es necesario o ayuda con el espaciado */
  margin-top: -2px; /* Ajustar según sea necesario para alineación vertical */
  opacity: 0.85 !important; /* Ligeramente menos prominente */
}

/* Sección Hero */
.hero-section {
  background: var(--gris-suave); /* Usar un fondo claro y neutral */
  border-bottom: 3px solid var(--ambar-dorado); /* Borde de acento con Ambar Dorado */
  color: var(--texto-principal);
}

.hero-section h1 {
  color: var(--teal-profundo); /* Títulos en Teal Profundo */
}

.hero-section p {
  color: var(--texto-secundario); /* Subtexto en un color más suave */
}

/* Tarjetas y componentes */
.card {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--gris-suave); /* Borde más suave */
  border-radius: 12px;
  transition: all 0.3s ease;
  background-color: var(--blanco-puro);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 128, 128, 0.15); /* Sombra basada en Teal Profundo */
}

.card-header {
  background: var(--teal-profundo) !important;
  color: var(--blanco-puro) !important;
  border-radius: 11px 11px 0 0 !important; /* Ajustado para borde interno */
  font-weight: 600;
  font-family: var(--font-titulos);
  border-bottom: 2px solid var(--ambar-dorado); /* Acento con Ambar Dorado */
}

.card-title {
  font-family: var(--font-titulos);
  color: var(--teal-profundo);
}

.card-body {
  color: var(--texto-principal);
}

/* Botones personalizados */
.btn {
  font-family: var(--font-cuerpo);
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem; /* Padding consistente */
}

.btn-primary {
  background-color: var(--coral-vibrante);
  border-color: var(--coral-vibrante);
  color: var(--blanco-puro);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #e66a40; /* Coral más oscuro */
  border-color: #e66a40;
  color: var(--blanco-puro);
  box-shadow: 0 4px 15px rgba(255, 127, 80, 0.3);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--ambar-dorado);
  border-color: var(--ambar-dorado);
  color: var(--texto-principal);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #e6a800; /* Ambar más oscuro */
  border-color: #e6a800;
  color: var(--texto-principal);
  box-shadow: 0 4px 15px rgba(255, 191, 0, 0.3);
  transform: translateY(-2px);
}

/* Botones Outline para usar Teal Profundo */
.btn-outline-primary {
  color: var(--teal-profundo);
  border-color: var(--teal-profundo);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--teal-profundo);
  border-color: var(--teal-profundo);
  color: var(--blanco-puro);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 128, 128, 0.3);
}

/* Botón Success - ACTUALIZADO a Coral Vibrante */
.btn-success {
  background-color: var(--coral-vibrante);
  border-color: var(--coral-vibrante);
  color: var(--blanco-puro);
}

.btn-success:hover,
.btn-success:focus {
  background-color: #e66a40; /* Coral más oscuro */
  border-color: #e66a40;
  color: var(--blanco-puro);
  box-shadow: 0 4px 15px rgba(255, 127, 80, 0.3);
  transform: translateY(-2px);
}

.btn-outline-success {
  color: var(--coral-vibrante);
  border-color: var(--coral-vibrante);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--coral-vibrante);
  border-color: var(--coral-vibrante);
  color: var(--blanco-puro);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 127, 80, 0.3);
}

/* Botón Info - puede usar un color neutral o de acento */
.btn-info {
  background-color: var(--texto-secundario); /* Usando un gris neutral */
  border-color: var(--texto-secundario);
  color: var(--blanco-puro);
}

.btn-info:hover,
.btn-info:focus {
  background-color: #444444; /* Gris más oscuro */
  border-color: #444444;
  color: var(--blanco-puro);
  box-shadow: 0 4px 15px rgba(85, 85, 85, 0.3);
  transform: translateY(-2px);
}

.btn-outline-info {
  color: var(--texto-secundario);
  border-color: var(--texto-secundario);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: var(--texto-secundario);
  border-color: var(--texto-secundario);
  color: var(--blanco-puro);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(85, 85, 85, 0.3);
}

/* Estilo específico para grupo de botones en panel de control */
.control-panel .btn-group .btn {
  margin-right: 5px; /* Añadir espacio entre botones en un grupo */
}

.control-panel .btn-group .btn:last-child {
  margin-right: 0;
}

/* Tarjeta de estadísticas mejorada */
.stats-card {
  border-left: 4px solid var(--coral-vibrante); /* Acento con Coral Vibrante */
  background: var(--blanco-puro);
  padding: 1rem;
  border-radius: 8px;
}

.stats-card .h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.75rem; /* Establecer tamaño base para números e icono */
}

.stats-card .h4 .bi-infinity {
  vertical-align: middle; /* Mejorar alineación vertical del icono */
  /* Si es necesario, se puede ajustar font-size aquí, ej: font-size: 0.9em; */
}

/* Colores personalizados para estadísticas */
.text-primary {
  color: var(
    --teal-profundo
  ) !important; /* Teal para énfasis de texto primario */
}
.text-success {
  color: var(--coral-vibrante) !important; /* ACTUALIZADO a Coral Vibrante */
}

/* Efectos de hover mejorados - ya cubiertos en definiciones .btn */

/* Acordeones */
.accordion-item {
  border: 1px solid var(--gris-suave);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background-color: var(--blanco-puro);
}

.accordion-header {
  border-radius: 7px 7px 0 0; /* Ajustado para borde interno */
}

.accordion-button {
  font-weight: 500;
  font-family: var(--font-cuerpo);
  color: var(--texto-principal);
  background-color: var(--blanco-puro);
  border-radius: 7px 7px 0 0 !important; /* Asegurar que el radio se aplique */
  box-shadow: none; /* Eliminar sombra predeterminada de bootstrap */
}

.accordion-button:not(.collapsed) {
  background-color: var(--gris-suave);
  color: var(--teal-profundo);
  border-bottom: 1px solid var(--ambar-dorado); /* Acento cuando está abierto */
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 128, 128, 0.25); /* Anillo de foco con Teal */
  border-color: var(--teal-profundo);
}

.accordion-body {
  color: var(--texto-secundario);
  padding: 1rem 1.25rem;
}

/* Lista de grupos */
.list-group-item {
  border: 1px solid #eee; /* Borde más claro */
  border-radius: 8px;
  margin-bottom: 5px;
  transition: all 0.2s ease;
  font-family: var(--font-cuerpo);
  color: var(--texto-principal);
}

.list-group-item:hover {
  background-color: var(--gris-suave);
  transform: translateX(5px);
  border-left: 3px solid var(--coral-vibrante); /* Acento en hover */
  color: var(--teal-profundo);
}

.list-group-item.active {
  background-color: var(--teal-profundo);
  border-color: var(--teal-profundo);
  color: var(--blanco-puro);
}

/* Badges modernos */
.badge {
  font-weight: 500;
  padding: 0.5em 0.8em;
  border-radius: 6px;
  font-family: var(--font-cuerpo);
}

/* Re-estilizar badges específicos de la barra de navegación si es necesario, o usar clases de utilidad de Bootstrap */
.navbar .badge.bg-light {
  background-color: var(--blanco-puro) !important;
  color: var(--teal-profundo) !important; /* Color de texto contra blanco */
}

.navbar .badge.bg-warning {
  background-color: var(--ambar-dorado) !important;
  color: var(--texto-principal) !important; /* Color de texto contra ambar */
}

/* General .bg-light y .bg-warning si se usan en otros lugares */
.bg-light {
  background-color: var(--gris-suave) !important;
  color: var(--texto-principal) !important;
}

.bg-warning {
  background-color: var(--ambar-dorado) !important;
  color: var(--texto-principal) !important;
}

.bg-success {
  /* Añadido para badges como Cytoscape.js */
  background-color: var(--coral-vibrante) !important;
  color: var(--blanco-puro) !important;
}

/* Alerta personalizada */
.alert {
  border-radius: 8px;
  font-family: var(--font-cuerpo);
  padding: 1rem 1.25rem;
}

.alert-light {
  background-color: var(--gris-suave);
  border-left: 4px solid var(--teal-profundo);
  color: var(--texto-principal);
}

.alert-primary {
  background-color: rgba(0, 128, 128, 0.1); /* Teal claro */
  border-left: 4px solid var(--teal-profundo);
  color: var(--teal-profundo);
}

.alert-secondary {
  background-color: rgba(255, 191, 0, 0.1); /* Ambar claro */
  border-left: 4px solid var(--ambar-dorado);
  color: var(--texto-principal);
}

.alert-success {
  background-color: rgba(255, 127, 80, 0.1); /* Coral claro */
  border-left: 4px solid var(--coral-vibrante);
  color: var(--coral-vibrante); /* ACTUALIZADO a Coral Vibrante */
}

.alert-danger {
  background-color: rgba(
    255,
    127,
    80,
    0.1
  ); /* Coral claro para peligro/advertencia */
  border-left: 4px solid var(--coral-vibrante);
  color: var(--coral-vibrante);
}

/* Estilos para el Modal */
.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background-color: var(--blanco-puro);
}

.modal-header {
  background-color: var(--teal-profundo);
  color: var(--blanco-puro);
  border-bottom: 2px solid var(--ambar-dorado);
  border-radius: 11px 11px 0 0;
}

.modal-header .modal-title {
  font-family: var(--font-titulos);
  font-weight: 600;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%); /* Hacer botón de cierre blanco */
}

.modal-body {
  font-family: var(--font-cuerpo);
  color: var(--texto-principal);
  padding: 1.5rem;
}

.modal-footer {
  border-top: 1px solid var(--gris-suave);
  padding: 1rem 1.5rem;
}

/* Estilos para Formularios (Inputs y Selects) */
.form-control,
.form-select {
  font-family: var(--font-cuerpo);
  border-radius: 8px;
  border: 1px solid #ced4da; /* Borde estándar de Bootstrap */
  /* padding: 0.5rem 1rem; Padding general eliminado */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control {
  padding: 0.5rem 1rem; /* Padding para inputs */
}

.form-select {
  padding: 0.5rem 2.5rem 0.5rem 1rem; /* Padding ajustado para selects: T R B L */
}

.form-control:focus,
.form-select:focus {
  border-color: var(--teal-profundo);
  box-shadow: 0 0 0 0.25rem rgba(0, 128, 128, 0.25);
}

.form-label {
  font-family: var(--font-cuerpo);
  font-weight: 500; /* Etiquetas ligeramente más gruesas */
  color: var(--texto-principal);
  margin-bottom: 0.5rem;
}

/* Estilo de texto de placeholder */
.form-control::placeholder {
  color: var(--texto-secundario);
  opacity: 0.7;
}

/* Texto de retroalimentación de búsqueda */
#searchFeedback {
  font-size: 0.875em;
  color: var(--texto-secundario);
  min-height: 1.5em; /* Asegurar espacio para el mensaje */
}

/* Estilos para la Barra de Scroll Personalizada */
/* Para navegadores WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px; /* Ancho de la scrollbar vertical */
  height: 12px; /* Alto de la scrollbar horizontal */
}

::-webkit-scrollbar-track {
  background: var(--gris-suave); /* Color del riel */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--teal-profundo); /* Color del pulgar */
  border-radius: 10px;
  border: 3px solid var(--gris-suave); /* Espacio alrededor del pulgar, mismo color que el track */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(
    --coral-vibrante
  ); /* Color del pulgar al pasar el mouse */
}

/* Para Firefox */
/* Firefox soporta scrollbar-width y scrollbar-color */
html {
  scrollbar-width: thin; /* Puede ser 'auto', 'thin', o 'none' */
  scrollbar-color: var(--teal-profundo) var(--gris-suave); /* color del pulgar y color del riel */
}

/* Footer */
footer {
  background: var(--teal-profundo); /* Fondo sólido Teal Profundo */
  color: var(--blanco-puro);
  padding: 2rem 0;
  margin-top: 3rem;
}

/* Corregir colores del footer */
footer .text-muted {
  color: rgba(255, 255, 255, 0.7) !important; /* Texto más claro para muted */
}

footer small.text-muted {
  color: rgba(
    255,
    255,
    255,
    0.9
  ) !important; /* Ligeramente más prominente para copyright */
}

footer .text-info {
  color: var(
    --ambar-dorado
  ) !important; /* Ambar Dorado para acentos en footer */
}

footer a {
  color: var(--ambar-dorado);
  text-decoration: none;
}

footer a:hover {
  color: var(--coral-vibrante);
  text-decoration: underline;
}

/* Animaciones suaves */
.card,
.btn,
.list-group-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Iconos */
.bi {
  vertical-align: -0.125em;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-section .stats-card {
    margin-top: 1rem;
  }

  .navbar-brand {
    font-size: 1.2rem;
  }
}

/* Estilo personalizado para la caja de información de tecnología */
.info-box-tecnologia {
  /* background-color: #FFF2E6; */ /* Revertido al predeterminado de alert-light */
  border-left-width: 0.25rem !important; /* Establecer explícitamente el ancho, similar a border-4 */
  border-left-style: solid !important; /* Asegurar estilo sólido para el borde izquierdo */
  border-left-color: var(
    --coral-vibrante-suavizado
  ); /* Aplicar el color coral suavizado */
  /* El color del texto es manejado por .text-muted y debería proporcionar suficiente contraste */
}

/* Estilo de botón personalizado para "Detalles" en las tarjetas de curso */
.btn-details-custom {
  background-color: var(--bs-white); /* Fondo blanco estándar */
  border-color: var(--bs-warning); /* Borde dorado */
  color: #ecb305; /* Texto dorado más oscuro para mejor contraste */
}

.btn-details-custom:hover,
.btn-details-custom:focus,
.btn-details-custom:active {
  background-color: #f8f9fa; /* Gris muy claro en interacción (bg-light de Bootstrap) */
  border-color: #ffa601; /* Dorado más oscuro para borde en interacción */
  color: #ffa601; /* Mantener texto dorado más oscuro */
}

/* Asegurar que los estilos responsivos o finales estén después */