/* Colores definidos en el documento técnico */
:root {
    --bg-gray: rgb(222, 227, 230);
    --footer-blue: rgb(41, 91, 164);
}

/* 1. Aplicamos el color de fondo gris a todo el body */
body {
    background-color: var(--bg-gray);
}

/* Ancho máximo para el contenido principal en pantallas grandes */
.container {
    max-width: 1200px;
}

/* 2. Estilos para los iconos sociales */
.social-icons a {
    font-size: 24px; /* Hacemos los iconos más grandes */
    color: #6c757d; /* Un color gris estándar */
    margin: 0 10px; /* Separación entre iconos */
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #343a40; /* Se oscurecen un poco al pasar el ratón */
}

/* 3. Estilos para el faldón azul del pie de página */
.footer-bottom {
    background-color: var(--footer-blue);
}

.footer-bottom h6 {
    font-weight: bold;
}

/* --- Estilos para la Página de Diagnóstico --- */

.droppable-area {
    min-height: 400px;
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem; /* Bordes redondeados */
    transition: background-color 0.3s;
}

.diagnosis-cards-container {
    max-height: 600px;
    overflow-y: auto; /* Añade scroll si hay muchas tarjetas */
    padding-right: 10px;
}

.antipattern-card {
    cursor: grab;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: white;
}

.antipattern-card:active {
    cursor: grabbing; /* Cambia el cursor mientras se arrastra */
}

/* --- Mejoras que sugeriste --- */

/* 1. Estilo de título para el nombre del antipatrón */
.antipattern-card .card-title {
    font-weight: bold;
    font-size: 0.95rem;
    color: #333;
}

/* 2. Reducimos el tamaño de la imagen dentro de la tarjeta */
.antipattern-card img {
    max-width: 120px; /* Reducimos el ancho */
    margin-top: 5px;
}

/* --- Estilos para la barra de navegación de la app --- */
.app-nav {
    background-color: #576282; /* Hex: 576282 */
    padding: 0.5rem 0;
}

.app-nav .nav-link {
    color: white;
    font-weight: 500;
    padding: 0.25rem 1rem;
}

.app-nav .nav-link:hover {
    color: #e0e0e0;
}
/* --- ESTILOS PARA EL CARRUSEL DE LA BIBLIOTECA --- */

/* Contenedor de la tarjeta dentro del carrusel */
.carousel-card {
    text-align: center;
    padding: 2rem 1rem;
    background-color: #fdfdfd; /* Un fondo casi blanco */
    border: 1px solid #eee;
    border-radius: 0.375rem; /* Bordes redondeados de Bootstrap */
    max-width: 450px; /* Ancho máximo de la tarjeta */
    margin: 2rem auto; /* Centra la tarjeta y le da espacio arriba/abajo */
    min-height: 400px; /* Altura mínima para que no "salte" */
}

/* Imagen dentro de la tarjeta del carrusel */
.carousel-card-img {
    max-height: 200px; /* Limita la altura de la imagen */
    width: auto;       /* Mantiene la proporción */
    max-width: 100%;   /* Asegura que no se desborde */
    border-radius: 0.375rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem; /
}

.carousel-card p {
    text-align: left;
}

/* Ajusta el espaciado del contenido de las pestañas */
.tab-content {
    border: 1px solid #dee2e6; /* Borde de Bootstrap para las pestañas */
    border-top: none;
    padding: 1rem;
    background-color: #ffffff; /* Fondo blanco para el contenido */
}

/* Asegura que los botones de las pestañas tengan un buen aspecto */
.nav-tabs .nav-link {
    font-weight: 500;
    color: #495057;
}

.nav-tabs .nav-link.active {
    font-weight: bold;
    color: #000;
}
/* --- ESTILOS PARA COLORES DE PESTAÑAS (BIBLIOTECA) --- */

/* Pestaña ROLES (Azul) */
.nav-tabs #roles-tab {
    color: #0d6efd; /* Tinta azul (azul de Bootstrap) */
}
/* Cuando está activa, ponemos el borde superior y lateral a juego */
.nav-tabs #roles-tab.active {
    border-color: #0d6efd #0d6efd #ffffff;
    font-weight: bold; /* Nos aseguramos que siga en negrita */
}
/* Un azul un poco más oscuro al pasar el ratón */
.nav-tabs #roles-tab:hover {
    color: #0b5ed7; 
}


/* Pestaña EVENTOS (Naranja) */
.nav-tabs #eventos-tab {
    color: #fd7e14; /* Tinta naranja (naranja de Bootstrap) */
}
.nav-tabs #eventos-tab.active {
    border-color: #fd7e14 #fd7e14 #ffffff;
    font-weight: bold;
}
.nav-tabs #eventos-tab:hover {
    color: #f56f00;
}
    

/* Pestaña ARTEFACTOS Y FLUJO (Verde) */
.nav-tabs #artefactos-tab {
    color: #198754; /* Tinta verde (verde de Bootstrap) */
}
.nav-tabs #artefactos-tab.active {
    border-color: #198754 #198754 #ffffff;
    font-weight: bold;
}
.nav-tabs #artefactos-tab:hover {
    color: #146c43;
}
/* --- ESTILOS PARA EL NUEVO FLUJO DE DIAGNÓSTICO --- */

/* Tarjeta dentro del carrusel de diagnóstico */
.diagnosis-carousel-card {
    text-align: left;
    padding: 2rem 1.5rem;
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 0.375rem;
    margin: 1rem auto 3rem auto; /* Espacio extra abajo para los controles */
    max-width: 700px;
    display: flex;
    flex-direction: column;
}

.diagnosis-question {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
    margin: 1rem 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.diagnosis-options {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 1rem;
}

.diagnosis-options .form-check {
    margin-bottom: 0.5rem;
}

/* --- ESTILOS PARA LA PÁGINA DE RESULTADOS (KANBAN) --- */

.results-kanban-card .card-body {
    flex-grow: 1; /* Permite que el cuerpo crezca y empuje el footer hacia abajo */
    padding-bottom: 0.5rem; /* Ajusta el padding para reducir el espacio */
}

.results-kanban-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex; /* Añadimos flexbox para mejor control del espacio interno */
    flex-direction: column; /* Apila los elementos verticalmente */
}

.results-kanban-img {
    max-width: 80px;
    height: auto;
    border-radius: 0.25rem;
}

.results-kanban-card .card-text {
    font-size: 0.85rem;
    line-height: 1.4;
    /* max-height: 100px;  <--- ELIMINAR ESTA LÍNEA */
    /* overflow-y: auto; <--- ELIMINAR ESTA LÍNEA */
}
.results-kanban-card .card-footer {
    margin-top: auto; /* Empuja el footer a la parte inferior de la tarjeta */
}
/* --- ESTILOS PARA EL INDICADOR DE PROGRESO DEL CUESTIONARIO --- */

.diagnosis-progress-indicator {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 0;
}

.progress-step {
    width: 30px;
    height: 30px;
    line-height: 28px; /* Ligeramente menos que height por el borde */
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin: 5px;
    font-weight: bold;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Color por defecto (pendiente) */
.progress-step.pending {
    background-color: #f8f9fa; /* Gris claro */
    color: #6c757d; /* Gris oscuro */
}

/* Color para respondidas */
.progress-step.answered {
    background-color: #d1e7dd; /* Verde Bootstrap 'success' light */
    color: #0f5132; /* Verde Bootstrap 'success' dark */
    border-color: #badbcc;
}

/* Color para la activa (sobrescribe pending o answered) */
.progress-step.active {
    background-color: #0d6efd; /* Azul Bootstrap 'primary' */
    color: #ffffff;
    border-color: #0d6efd;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
}

.progress-step:not(.active):hover {
    background-color: #e9ecef; /* Un gris un poco más oscuro al pasar */
}

/* --- PERSONALIZACIÓN DEL BOTÓN PRINCIPAL --- */
/* Sobrescribe el color azul por defecto de Bootstrap */

.btn-primary {
    background-color: #576282;  /* El color de .app-nav */
    border-color: #576282;      /* El mismo color para el borde */
    color: #ffffff;
}

/* Estado Hover (ratón encima) - lo oscurecemos un poco */
.btn-primary:hover {
    background-color: #40475a;
    border-color: #40475a;
    color: #ffffff;
}

/* Estado Active (pulsado) y Focus (seleccionado con teclado) */
.btn-primary:active,
.btn-primary:focus {
    background-color: #353b4b;  /* Aún más oscuro */
    border-color: #353b4b;
    color: #ffffff;
    /* Sombra de foco a juego con el nuevo color */
    box-shadow: 0 0 0 0.25rem rgba(87, 98, 130, 0.5); 
}