/* style.css */

/* Estilos generales para el cuerpo del documento (aunque muchos ya vienen de Tailwind) */
body {
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* --- Estilos para el input range (slider) --- */
#faseSlider {
    -webkit-appearance: none; /* Elimina la apariencia por defecto de los navegadores WebKit */
    width: 100%; /* Ancho completo */
    height: 10px; /* Altura de la barra */
    background: #a8d1ff; /* Color de la barra */
    outline: none; /* Sin borde de enfoque */
    opacity: 0.7; /* Transparencia */
    -webkit-transition: .2s; /* Transición suave al interactuar */
    transition: opacity .2s;
    border-radius: 5px; /* Bordes redondeados */
}

#faseSlider:hover {
    opacity: 1; /* Opacidad completa al pasar el ratón */
}

/* Estilo para el "pulgar" (thumb) del slider en navegadores WebKit */
#faseSlider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Elimina la apariencia por defecto */
    appearance: none;
    width: 25px; /* Ancho del pulgar */
    height: 25px; /* Altura del pulgar */
    background: #1d4ed8; /* Color azul oscuro */
    cursor: grab; /* Cursor de "agarrar" */
    border-radius: 50%; /* Forma redonda */
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Sombra sutil */
}

/* Estilo para el "pulgar" (thumb) del slider en Firefox */
#faseSlider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #1d4ed8;
    cursor: grab;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* Estilo para el contenedor de la descripción de la fase */
#fase-descripcion {
    min-height: 150px; /* Asegura un espacio mínimo para que no salte el layout */
    transition: opacity 0.5s ease-in-out; /* Transición suave para la visibilidad */
}

/* --- Estilos para las Pestañas (Tabs) --- */

/* Estilo base para los botones de las pestañas */
.tab-button {
    color: #6b7280; /* text-gray-500 */
    border-color: transparent;
    padding-top: 1rem; /* p-4 */
    padding-bottom: 1rem; /* p-4 */
    padding-left: 1rem; /* p-4 */
    padding-right: 1rem; /* p-4 */
    border-bottom-width: 2px;
    border-top-left-radius: 0.375rem; /* rounded-t-lg */
    border-top-right-radius: 0.375rem; /* rounded-t-lg */
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Estilo al pasar el ratón sobre un botón de pestaña (no activo) */
.tab-button:hover:not(.active-tab) {
    color: #4b5563; /* hover:text-gray-700 */
    border-color: #d1d5db; /* hover:border-gray-300 */
}

/* Estilo para la pestaña activa */
.tab-button.active-tab {
    color: #2563eb; /* text-blue-600 */
    border-color: #2563eb; /* border-blue-600 */
    font-weight: 500; /* medium */
}

/* Estilo para el contenido de la pestaña activa */
.tab-content.active-content {
    display: block;
    animation: fadeIn 0.5s ease-out; /* Animación de aparición */
}

/* Estilo para el contenido de la pestaña oculta */
.tab-content.hidden {
    display: none;
}

/* Animación de desvanecimiento (fade-in) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}