/* Estilo para la fuente Inter */
body {
    font-family: 'Inter', sans-serif;
    /* Ajustar padding top para el menú fijo */
    padding-top: 80px; /* Ajusta según la altura final de tu menú */
    /* Eliminamos el padding lateral fijo aquí, se controlará con media queries */
    padding-left: 10px; /* Padding por defecto para pantallas pequeñas */
    padding-right: 10px; /* Padding por defecto para pantallas pequeñas */
}

/* Estilos para el menú fijo */
.fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Opcional: sombra */
}

/* Animación de carga simple */
.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    display: inline-block; /* Para centrarlo o usarlo inline */
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilos para el menú responsive */
#mobileMenu {
    transition: transform 0.3s ease-in-out;
}

.menu-item-active {
    border-bottom: 2px solid #4f46e5; /* Indigo border */
    color: #4f46e5; /* Indigo text */
    font-weight: 600;
}

/* Estilos para las barras laterales de anuncios fijas */
.fixed-sidebar {
    position: fixed;
    top: 100px; /* Ajusta para que esté debajo del menú fijo */
    z-index: 900; /* Debe estar por debajo del menú, pero encima del contenido */
    height: 600px; /* Altura fija para los anuncios */
    overflow: hidden; /* Evita que el contenido del anuncio se desborde */
    background-color: #f0f0f0; /* Opcional: fondo para visualizar el espacio */
    display: flex; /* Para centrar el contenido del anuncio */
    justify-content: center;
    align-items: center;
    border: 1px dashed #ccc; /* Opcional: borde para visualizar el espacio */

    /* Inicialmente oculto en pantallas pequeñas/medianas */
    display: none;
}

.fixed-left-sidebar {
    width: 300px; /* Nuevo ancho */
    /* Posicionar a la izquierda del contenido principal centrado (max-w-4xl = 896px) */
    /* Borde derecho del sidebar = centro (50%) - mitad contenido (448px) - margen (20px) */
    /* Borde izquierdo del sidebar = (50% - 448px - 20px) - 300px = 50% - 768px */
    left: calc(50% - 768px);
}

.fixed-right-sidebar {
    width: 300px; /* Ancho ya era 300px, lo confirmamos */
     /* Posicionar a la derecha del contenido principal centrado (max-w-4xl = 896px) */
     /* Borde izquierdo del sidebar = centro (50%) + mitad contenido (448px) + margen (20px) = 50% + 468px */
    left: calc(50% + 468px); /* Usamos 'left' para ambas para consistencia en el cálculo */
}

/* Media query para mostrar las barras laterales y ajustar el padding del body
   cuando haya suficiente espacio (por ejemplo, en viewports > ~1536px = 896 + 300 + 20 + 300 + 20) */
@media (min-width: 1536px) { /* Ajusta este breakpoint si es necesario */
    .fixed-sidebar {
        display: flex; /* Mostrar las barras laterales */
    }
    body {
        /* Agregar padding al body para que el contenido no quede pegado a los bordes
           y para que las barras laterales tengan espacio a su lado */
         padding-left: 360px; /* Ancho sidebar (300) + margen (20) + margen extra (40) */
         padding-right: 360px; /* Ancho sidebar (300) + margen (20) + margen extra (40) */
    }
}

/* Ajustes para el loader dentro del botón */
.loader.\!w-5.\!h-5.\!border-2 {
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important;
}

/* Estilo para el textarea en TTS */
.tts-textarea {
     min-height: 150px; /* Altura mínima para el textarea */
     resize: vertical; /* Permitir redimensionar verticalmente */
}