/**
 * GrantsWin - Main Stylesheet
 * 
 * This stylesheet contains all the styles for the GrantsWin application.
 * It includes styles for:
 * - Global styles and resets
 * - Layout components (header, sidebar, main content)
 * - Authentication forms
 * - Landing page and navigation
 * - Form styles and components
 * - Table styles
 * - Animations and transitions
 * - Responsive design adjustments
 * 
 * @version 1.0.0
 * @author GrantsWin Team
 */

/* ==========================================================================
   Global Styles and Resets
   ========================================================================== */
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif; /* Pila de fuentes web seguras */
    font-size: 18px;
}

body{ 
    margin: 0;
    padding: 0;
    color: #2d3748;
    overflow-x: hidden; /* Evita el desbordamiento horizontal */
    display: flex; /* Use flexbox to layout sidebar and main content */
    height: 100vh; /* Full viewport height */
    background-color: #f4f4f4; /* Light grey background for main content area */
}

/* Encabezado */
header {
  width: 100vw; /* Ancho completo de la ventana */
  background: #4a5568;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Evita que el contenido se desborde */
}
header img {
  max-width: 250px;
  height: auto;
  display: block;
  margin: 0 auto; /* Centra la imagen */
}

/* Contenedor principal de formularios */
.container{
    margin: 20px auto;
    height: auto; /* Altura fija (puede ser problemática para contenido variable) */
    max-width: 800px;
    padding:30px ;
    border: 1px solid #eeeeee;
    background-color: #30197d;
    border-radius:10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    animation: formAppearAnimation 0.5s ease-out forwards;
}

/* Estilo específico para el contenedor del formulario de webinar */
#containerWebinar .container {
    height: auto; /* Sobrescribe la altura fija para ajustarse al contenido */
    /* Considerar un max-width más pequeño si es necesario, ej: max-width: 600px; */
}

thead{
    align-items: center;
}

th { /* Celdas de encabezado de tabla */
  background-color: #4a5568;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

th, td { /* Celdas de tabla */
  padding: 12px;
  border: 1px solid #e2e8f0;
  text-align: left;
  font-size: 14px;
}

h4{ /* Títulos de sección en formularios */
    margin-bottom: 10px;
    font-size: 24px;
    color: white;
}

h5{ /* Subtítulos o etiquetas en formularios */
    font-size: 24px;
    font-weight: bold;
    color: rgb(0, 0, 0);
    margin-bottom: 10px;
}

h1 { /* Título principal de la página/sección */
    text-align: center;
    color: #2d3748;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    margin-top: 5px;
    margin-bottom: 5px;
}

select, textarea { /* Campos de selección */
    width:  100% ;
    max-width:  100% ;
    min-width: 100% ;
    padding: 10px;
    margin-bottom: 10px;
    background-color: white;
    transition: 
        background-color 0.15s ease,
        transform 0.1s ease,
        font-size 0.1s ease;
}

#submitLanding,
#formWebinar input[type="submit"],
#formReuniones input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #B6E07A; /* Verde del logo */
    font-size: 17px;
    color: #30197d; /* Morado oscuro para contraste */
    border: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, font-size 0.2s ease;
}
#reunionesOtroTiempo {
    display: none;
    margin-top: 10px; /* Un poco de espacio para que se vea bien */
}
#OtroTiempo {
    display: none;
}
#submitLanding:hover,
#formWebinar input[type="submit"]:hover,
#formReuniones input[type="submit"]:hover {
    background-color: #A0D468; /* Un verde un poco más oscuro */
}

#submitLanding:active,
#formWebinar input[type="submit"]:active,
#formReuniones input[type="submit"]:active {
    background-color: #8CC152; /* Verde aún más oscuro */
    transform: scale(0.97);
    font-size: 15px;
}

input[type="text"] { /* Campos de texto */
    width:  100% ;
    padding: 10px;
    margin-bottom: 10px;
    transition: 
        background-color 0.15s ease,
        transform 0.1s ease,
        font-size 0.1s ease;
}

#mensajeLanding, #mensajeWebinar,#mensajeReuniones{ /* Contenedor para mensajes al usuario */
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}
#manualDiv{
    position: relative;
    display: inline-block;
    left: 0 auto;
    max-width: auto;
    margin: 20px;
    padding: 30px 40px;
    text-align: left;

    /* --- ESTILOS VISUALES AÑADIDOS PARA COHERENCIA --- */
    background-color: #30197d; /* Fondo morado oscuro, igual que los formularios */
    color: #f4f4f4;            /* Color de texto principal claro para que se lea bien */
    border-radius: 10px;       /* Bordes redondeados, igual que .container */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.textManual{
    max-width: 50em;
}
.subManual{
    font-size: 19px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.tituloManual{
    font-size:25px ;
}
.bottom_li{
    position: fix;
    bottom: 0px;
}
#submit:hover { /* Efecto hover para el botón de envío */
    background-color: #333333;
    cursor: pointer;
}

#submit:active { /* Efecto activo (al hacer clic) para el botón de envío */
    transform: scale(0.97);
    font-size: 15px;
}



#resultado,#resultadoWebinar,#resultadoReuniones {
    background: #30197d;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(48, 25, 125, 0.10);
    padding: 32px 16px 24px 16px;
    margin: 32px auto 0 auto;
    max-width: 900px;
}

#resultado h2, #resultadoWebinar h2, #resultadoReuniones h2 {
    background: #B6E07A;
    color: #30197d;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    padding: 6px 0;
    margin-bottom: 16px;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(182, 224, 122, 0.07);
}

#scrollEmpresas, #scrollWebinars, #scrollReuniones {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    max-height: none;
    border: none;
    background: transparent;
    box-shadow: none;
    width: 100%;
    margin: 0 auto 0 auto;
    padding: 0;
}

#tablaEmpresas, #tablaWebinars, #tablaReuniones {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #f6f7fa;
    box-shadow: 0 2px 8px rgba(48, 25, 125, 0.05);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

#tablaEmpresas th:first-child, #tablaWebinars th:first-child, #tablaReuniones th:first-child {
    border-top-left-radius: 8px;
}

#tablaEmpresas th:last-child, #tablaWebinars th:last-child, #tablaReuniones th:last-child {
    border-top-right-radius: 8px;
}

#tablaEmpresas th, #tablaWebinars th, #tablaReuniones th {
    background-color: #B6E07A !important;
    color: #30197d !important;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    padding: 10px 8px;
}

#tablaEmpresas td, #tablaWebinars td, #tablaReuniones td {
    color: #2d3748;
    font-size: 14px;
    padding: 9px 8px;
    border: none;
    background: #f6f7fa;
}

#tablaEmpresas tr:nth-child(even) td, #tablaWebinars tr:nth-child(even) td, #tablaReuniones tr:nth-child(even) td {
    background: #eef6e6;
}

#tablaEmpresas tr:hover td, #tablaWebinars tr:hover td {
    background: #e0f3c2;
    color: #30197d;
}
#celdaName{
    text-align: center;
    font-weight: bold;
    min-width: 20em 100%;
}
#celdaText{
    text-align: justify;
}
#enlace a, #enlaceWebinar a {
    color: #30197d;
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.2s;
}

#enlace a:hover, #enlaceWebinar a:hover {
    color: #4a2db3;
}

#enlace, #enlaceWebinar {
    margin-left: 30px;
}

/* Contenedor de autenticación */
#authContainer {
    width: 350px;
    padding: 20px;
    background: #30197d;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fadeIn 0.5s ease-in-out;
}

/* Animación de aparición gradual */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -55%); /* Ligeramente más arriba para efecto de entrada */
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Estilo de las etiquetas en el formulario de autenticación */
#authContainer label {
    display: block;
    font-weight: bold;
    margin: 10px 0 5px;
    color: #ffffff;
}

/* Ajuste para campos de entrada en autenticación */
#authContainer input { /* Estilo general para inputs en authContainer */
    width: calc(100% - 20px); /* Previene que los bordes se corten */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
}

#authContainer input[type="text"],
#authContainer input[type="password"] { /* Estilos más específicos si fueran necesarios, ajustados */
    width: calc(100% - 22px); /* Account for padding and border */
    padding: 10px; /* Podría ser 12px para consistencia con el de arriba o mantener diferencia */
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px; /* Podría ser 5px para consistencia */
}


/* Efecto de foco para campos de entrada en autenticación */
#authContainer input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

/* Botón en el formulario de autenticación */
#authContainer button {
    width: 100%;
    padding: 12px;
    background-color: #B6E07A; /* Verde del logo */
    color: #30197d; /* Morado oscuro para contraste */
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease, font-size 0.2s ease;
}

/* Efecto hover para botón de autenticación */
#authContainer button:hover {
    background-color: #A0D468; /* Verde más oscuro */
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

/* Efecto activo para botón de autenticación */
#authContainer button:active {
    background-color: #8CC152; /* Verde aún más oscuro */
    transform: scale(0.97);
    font-size: 15px;
}

/* Responsividad para móviles en autenticación */
@media (max-width: 400px) {
    #authContainer {
        width: 90%;
        padding: 15px;
    }
}

/* Mensaje de error */
.error-message {
    background-color: #fff3f3;
    border: 1px solid #ffcdd2;
    border-radius: 4px;
    padding: 15px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.error-icon {
    font-size: 24px;
    color: #d32f2f;
}

.error-text {
    color: #d32f2f;
    font-size: 14px;
    line-height: 1.4;
}

/* Contenedor principal de GrantsWin (menú y formularios hijos) */
#containerGrantsWin {
    padding: 20px;
    margin: 20px auto; /* Centra el bloque contenedor */
    max-width: 800px;
    text-align: center; /* Centra el h1 y el contenedor de botones */
}

/* Contenedor de botones del menú */
#buttonsContainer {
    display: grid;
    grid-template-columns: repeat(3, 200px); /* Columnas de ancho fijo para botones */
    grid-template-rows: repeat(2, auto);    /* 2 filas, altura basada en contenido */
    gap: 20px; /* Espaciado entre botones */
    padding: 20px;
    margin: 0 auto; /* Centra la cuadrícula si es más estrecha que su contenedor */
    max-width: fit-content; /* La cuadrícula se ajusta al ancho de su contenido */
    justify-content: center;
    align-items: center;
    justify-items: center;
}

/* Botones dentro de #containerGrantsWin (botones del menú) */
#containerGrantsWin button {
    padding: 15px 25px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    background-color: #4a5568;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 200px; /* Ancho fijo */
    height: 60px; /* Altura fija */
    box-sizing: border-box;
    display: flex;
    align-items: center; /* Centrado vertical del texto */
    justify-content: center; /* Centrado horizontal del texto */
}

#containerGrantsWin button:hover {
    background-color: #63738f; /* Ligero oscurecimiento al pasar el cursor */
    transform: translateY(-2px); /* Ligero efecto de elevación */
}

#containerGrantsWin button:active {
    background-color: #d0d0d0; /* Más oscuro al presionar */
    transform: translateY(0); /* Restablece efecto de elevación */
}
#p_center{
    text-align: center;
}
/* Clases de utilidad para visibilidad */
.is-hidden {
    display: none !important; /* !important usado con precaución */
  }
  
.is-shown {
    display: block !important; /* Ajustar a flex, grid, etc., según el layout */
  }
  
/* Animaciones para el contenedor de la landing page */
.landing-anim-base {
    transform-origin: top left;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    position: relative; 
  }
  
.landing-anim-start {
    opacity: 0;
    transform: scale(0.1); /* Inicia escalado pequeño */
  }
  
.landing-anim-end {
    opacity: 1;
    transform: scale(1); /* Termina a tamaño normal */
  }

/* Botón de Volver */
.button-back {
    margin: 20px;
    padding: 10px 15px;
    background-color: #30197d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    width: 200px;
    height: 55px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.button-back-hiding { /* Clase para animación de ocultar botón de volver */
    opacity: 0;
    transform: scale(0.8);
}

.button-back:hover {
    background-color: #1e104e;
}

.button-back:active {
    transform: scale(0.97);
}

/* Animación para ocultar containerLanding */
.landing-anim-hide-start {
    opacity: 1;
    transform: scale(1);
}

.landing-anim-hide-end {
    opacity: 0;
    transform: scale(0.1);
}

/* Animación para la aparición de buttonsContainer */
.buttons-anim-base {
    transform-origin: center center;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.buttons-anim-start {
    opacity: 0;
    transform: scale(0.8);
}

.buttons-anim-end {
    opacity: 1;
    transform: scale(1);
}

@keyframes formAppearAnimation {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.form-appearing-animation {
    animation: formAppearAnimation 0.5s ease-out forwards;
}

/* Asegura que containerGrantsWin permanezca visible cuando sus hijos se animan */
#containerGrantsWin.is-shown {
    display: block !important;
}

/* Estilos para el Formulario de Webinar - ALINEADO CON EL FORMULARIO DE LANDING PAGE DENTRO DE .container */
#form2 { 
    /* Estilos de fondo, padding, borde, etc., son heredados del .container padre o no son necesarios aquí */
    margin-top: 0; /* Ajustar si se necesita espaciado específico dentro del .container padre */
    width: 100%; 
    box-sizing: border-box;
}


#form2 h4 { /* Estilos para etiquetas (h4) para que coincidan con h5 de la landing page */
    color: white;
    font-size: 17px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px; /* Espaciado antes de la etiqueta */
}

#form2 h4:first-of-type {
    margin-top: 0; /* Sin margen superior para la primera etiqueta */
}

#formWebinar h4,#formReuniones h4 { /* Estilos para etiquetas (h4) para que coincidan con h5 de la landing page */
    color: white;
    font-size: 17px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px; /* Espaciado antes de la etiqueta */
}

#formWebinar h4:first-of-type,#formReunionesh4:first-of-type {
    margin-top: 0; /* Sin margen superior para la primera etiqueta */
}

#formWebinar input[type="text"],
#formWebinar input[type="datetime-local"] { /* Campos de entrada del formulario de webinar */
    width:  100% ;
    padding: 10px; /* Coincide con el padding de los inputs de la landing page */
    margin-bottom: 10px; /* Coincide con el margen de los inputs de la landing page */
    background-color: white; /* Fondo blanco, como en los inputs de la landing page */
    /* Borde y radio de borde eliminados para usar los predeterminados del navegador, igual que en la landing page */
    font-size: 16px; /* Tamaño de fuente común para inputs */
    color: #1f2937; /* Color del texto dentro del input */
    box-sizing: border-box;
    transition: background-color 0.15s ease, transform 0.1s ease, font-size 0.1s ease; /* Transición de inputs de la landing page */
}

#formWebinar input[type="text"]:focus,
#formWebinar input[type="datetime-local"]:focus {
    outline: none; /* Permite el foco predeterminado del navegador o se puede añadir uno sutil y compartido */
    /* Borde/sombra personalizados en foco eliminados para coincidir con el comportamiento de los inputs de la landing page */
}
#webinarUserImage{
    color: white;
}
/* Sidebar Styles */
#sidebar {
    width: 250px; /* Width of the sidebar */
    background-color: #30197d; /* Dark purple background */
    color: white;
    display: flex;
    flex-direction: column;
    padding: 20px;
    height: 100%; /* Full height of the parent (body) */
    box-sizing: border-box;
}

#sidebarHeader {
    text-align: center;
    margin-bottom: 20px;
}

#sidebarLogo {
    max-width: 80%;
    height: auto;
    margin-bottom: 10px;
}

#sidebarSubtitle {
    font-size: 0.9em;
    margin: 0;
    font-weight: bold;
}

#sidebarNav {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows this section to take up available space */
}

.sidebar-button {
    background-color: transparent;
    color: white;
    border: none;
    padding: 15px 20px;
    text-align: left;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center; /* Align icon and text */
}

.sidebar-button:hover {
    background-color: #4a2db3; /* Lighter purple on hover */
}

/* TODO: Add styles for icons next to buttons if you add them */

#sidebarFooter {
    margin-top: auto; /* Pushes the footer to the bottom */
    text-align: center;
    padding-top: 20px;
}

#helpLink {
    color: white;
    text-decoration: none;
    font-size: 0.9em;
}

#helpLink:hover {
    text-decoration: underline;
}

/* Main Content Styles */
#mainContent {
    flex-grow: 1; /* Takes up the remaining space */
    padding: 20px;
    overflow-y: auto; /* Allows scrolling if content overflows */
    height: 100%;
    box-sizing: border-box;
}

/* Welcome Page Styles */
#welcomePage {
    text-align: center;
    padding: 40px;
}

/* Hide original header if sidebar is present and login is not shown */
/* This might need adjustment based on login flow */
body:not(.show-auth) > #mainContent > header {
    display: none;
}

/* Ghost scroll and table styles (keeping existing ones, may need adjustments) */
#ghostEmpresas {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 1px;
    margin-bottom: -1px;
}

#tablaEmpresas th, #tablaEmpresas td { /* Ya existía una definición similar, pero esta es específica para #tablaEmpresas */
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
#tablaEmpresas th { /* Esta redefine/añade al 'th' global y al '#tablaEmpresas th, td' */
    background-color: #f2f2f2; /* Diferente al 'th' global */
    position: sticky;
    top: 0;
    z-index: 1;
}
#Documentación {
    max-width: auto;
    margin: 20px;
    padding: 30px 40px;
    text-align: left;

    /* --- ESTILOS VISUALES AÑADIDOS PARA COHERENCIA --- */
    background-color: #30197d; /* Fondo morado oscuro, igual que los formularios */
    color: #f4f4f4;            /* Color de texto principal claro para que se lea bien */
    border-radius: 10px;       /* Bordes redondeados, igual que .container */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   ESTILOS DEFINITIVOS PARA LA PÁGINA DE DOCUMENTACIÓN
   ========================================================================== */

/* --- 1. Estilo del Contenedor Principal --- */
#Documentación {
    max-width: 960px;
    margin: 20px auto; /* Lo centramos de nuevo como el manual de bienvenida */
    padding: 30px 40px;
    text-align: left;
    background-color: #30197d;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- 2. Estilos para Títulos y Textos --- */
#Documentación h1,
#Documentación h2,
#Documentación h3 {
    color: white;
    margin-bottom: 0.5em; /* Espacio debajo de los títulos */
}

#Documentación h1 { font-size: 28px; text-align: center; margin-bottom: 1em; }
#Documentación h2 { font-size: 22px; margin-top: 1.5em; }

#Documentación p, 
#Documentación li {
    color: #e2e8f0;
    font-size: 17px;
    line-height: 1.6;
}

/* --- 3. Estilos para Listas (Corrige la alineación de los números) --- */
#Documentación ol + p,
#Documentación ul + p {
    list-style-position: inside;
    padding-left: 0;
    margin-top: 1em;
}
#Documentación ul,#Documentación ol{
    padding-left: 55px;
}
#Documentación li {
    margin-bottom: 1.5em;
}

/* --- 4. LA NUEVA CLASE PARA LAS ETIQUETAS VERDES --- */
.docs-tag {
    margin-bottom: 15px;
    background-color: #B6E07A; /* Tu color verde */
    color: #30197d;            /* Tu color morado */
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.9em;
    display: inline-block;
}
.docs-tag-text{
    background-color: #B6E07A; /* Tu color verde */
    color: #30197d;            /* Tu color morado */
    padding: 1px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.9em;
    display: inline-block;
}

/* --- 5. Estilos adicionales para consistencia --- */
#Documentación hr {
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 30px 0;
}
#Documentación p{
    font-size: 15px;
}
/* --- Estilos base de la sección de FAQ's --- */
#FAQ\'s {
    max-width: 960px;
    margin: 40px auto;
    padding: 30px 40px;
    background-color: #30197d;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#FAQ\'s h1,#FAQ\'s h2 {
    color: white;
    text-align: center;
    font-size: 2.5em; /* Un poco más grande para el título principal */
    margin-bottom: 30px;
}

/* --- Etiqueta verde (como la de "No") --- */

/* --- Contenedor de cada pregunta --- */
.faq-item {
    border-bottom: 1px solid rgba(182, 224, 122, 0.3); /* Línea divisoria sutil */
    margin-bottom: 0;
    transition: background-color 0.3s ease;
}
.faq-item:last-child {
    border-bottom: none; /* Quitamos el borde del último elemento */
}

/* --- La pregunta (el <summary>) --- */
.faq-question {
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    padding: 20px 0 20px 30px;
    width: 100%;
    color: #ffffff;
    display: block; /* Necesario para que ocupe todo el ancho */
    position: relative; /* Para la flecha */
    transition: color 0.3s ease;
}

/* Efecto hover sobre la pregunta para mejorar UX */
.faq-item:hover .faq-question {
    color: #B6E07A;
}

/* --- La respuesta (el <div> interior) --- */
.faq-answer {
    /* LÓGICA DE LA ANIMACIÓN */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    
    /* ESTADO CERRADO: Sin padding vertical */
    padding: 0 15px;
    
    /* Estilos del texto */
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95em;
    line-height: 1.6;
}

/* Quitamos márgenes extra del párrafo para un control total */
.faq-answer p {
    margin: 0;
    padding-bottom: 20px; /* Espacio al final de la respuesta */
}
.faq-answer a {
    color: #B6E07A;
    text-decoration: underline;
}

/* === ESTADO ACTIVO / ABIERTO === */

/* Cuando se abre, cambiamos el color de la pregunta para feedback visual */
details[open] .faq-question {
    color: #B6E07A;
}

/* Mostramos la respuesta animando el max-height y el padding vertical */
details[open] > .faq-answer {
    max-height: 600px; /* Un valor suficientemente grande para cualquier respuesta */
    padding: 10px 15px; /* Añadimos padding vertical al abrir */
}


/* --- El marcador (la flecha) --- */
.faq-question::marker {
    color: #B6E07A;
    font-size: 1.2em;
}

/* En algunos navegadores es mejor apuntar directamente a summary */
.faq-item > summary {
    list-style: none; /* Oculta el marcador por defecto */
}
.faq-item > summary::-webkit-details-marker {
    display: none; /* Oculta el marcador en Chrome/Safari */
}

/* Creamos nuestro propio marcador para control total */
.faq-question::before {
    content: '+';
    position: absolute;
    left: 0px; /* Ajusta la posición según necesites */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: #B6E07A;
    padding-right: 20px;

    transition: transform 0.3s ease-in-out; 
}

details[open] .faq-question::before {
    transform: translateY(-50%) rotate(45deg) translateY(6px); 
}