/* Estilos Generales */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    color: #333;
    background-color: #f8f9fa;
}




/* Barra de Navegación Superior */
.artist-nav {
    display: flex;
    /* justify-content: space-between; -- Lo cambiaremos por flex-grow */
    align-items: center;
    padding: 4px 10px; /* Un poco menos de padding vertical */
    background-color: #343a40;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    gap: 10px; /* Espacio entre los elementos principales */
}

/* 1. Logo de la Empresa */
.nav-brand {
    flex-shrink: 0; /* Evita que el logo se encoja */
}
.nav-brand-logo {
    height: 40px; /* Tamaño del logo */
    width: 40px;
    display: block;
}

/* Identidad del Artista (ya lo teníamos) */
.artist-identity {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.nav-artist-pic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
    border: 1px solid #fff;
}
.nav-artist-name {
    font-weight: bold;
    font-size: 1.1em;
}

/* Menú de Módulos (Ahora ocupa el espacio sobrante) */
.artist-menu {
    flex-grow: 1; /* ¡Esta es la clave! Hace que ocupe todo el espacio disponible */
    display: flex;
    justify-content: flex-start; /* Alinea los botones a la izquierda */
    gap: 8px; /* Espacio entre botones */
    overflow-x: auto; /* Si hay muchos botones, permite scroll horizontal */
}

/* 3. Botones de Módulos (Reducidos) */
.nav-button {
    /* Reducimos padding y font-size en un ~20% */
    padding: 6px 12px; 
    font-size: 0.9em; /* 1em es el tamaño normal */
    background-color: #495057;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Evita que el texto del botón se parta */
}
.nav-button:hover {
    background-color: #6c757d;
}
.nav-button.active {
    background-color: #007bff;
    font-weight: bold;
}

/* 2. Acciones (Icono de Tienda) */
.nav-actions {
    flex-shrink: 0; /* Evita que el ícono se encoja */
}
.nav-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #495057;
    color: #fff;
    border-radius: 5px;
    font-size: 1.2em; /* Tamaño del ícono */
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.nav-action-button:hover {
    background-color: #007bff;
}

/* --- Ajustes para Móviles --- */
@media (max-width: 768px) {
    .artist-nav {
        flex-wrap: wrap; /* Permitimos que los elementos se reordenen */
    }
    
    .artist-menu {
        /* Hacemos que el menú ocupe toda una fila en móviles */
        order: 3; /* Lo mandamos al final */
        width: 100%;
        margin-top: 10px;
        justify-content: center;
    }

    /* Centramos el logo y la identidad del artista en la primera fila */
    .nav-brand { order: 1; }
    .artist-identity { order: 2; flex-grow: 1; justify-content: center; }
    .nav-actions { order: 4; } /* Lo ponemos junto al logo en el reordenamiento visual */
}



/* Área de Contenido Principal */
.artist-main-content {
    width: 95%;
    max-width: 1400px; /* Ancho máximo para pantallas grandes */
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-height: 80vh; /* Ocupa al menos el 80% de la altura de la pantalla */
    overflow: hidden; /* Importante para iframes */
}



/* La Magia del Show/Hide */
.module-content {
    display: none; /* Todos los módulos están ocultos por defecto */
    width: 100%;
    height: 100%;
}

.module-content.active {
    display: block; /* Solo el módulo activo se muestra */
}

/* Estilos internos de los módulos (puedes ajustar esto) */
.module-container {
    padding: 30px 40px;
}
.module-container h2 {
    font-size: 2.5em;
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
}

/* Adaptación para iframes y sliders */
.module-iframe-wrapper, .slider-gallery {
    width: 100%;
    height: auto;
    min-height: 75vh;
}
.module-iframe-wrapper iframe {
    border: none;
    width: 100%;
    height: 75vh;
}

.slider-gallery img {
    width: 100%;
    height: 75vh;
    object-fit: contain; /* Para que la imagen no se corte */
    margin: auto;
}

/* ... al final del archivo ... */

/* Clase para quitar todo el padding, ideal para iframes y galerías a pantalla completa */
.module-container.no-padding {
    padding: 0;
}

/* Clase para quitar solo el padding superior, útil para módulos de texto */
.module-container.no-top-padding {
    padding-top: 0;
}

/* Ajustamos el área principal para que no tenga padding propio si el contenido no lo necesita */
.artist-main-content {
    /* ... reglas existentes ... */
    padding: 0; /* Eliminamos el padding del contenedor principal */
}

/* Y volvemos a poner el padding en los contenedores de módulo que sí lo necesitan */
.module-container {
    padding: 10px 10px;
}


/* --- Estilos para contenido nativo fluido --- */
.module-content-html {
    /* Esto ayuda a que el texto se ajuste y no se desborde */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* LA REGLA MÁS IMPORTANTE PARA IMÁGENES RESPONSIVE */
/* Esto se aplica a CUALQUIER imagen dentro de un módulo de contenido nativo */
.module-content-html img,
.module-image-destacada {
    max-width: 100%; /* La imagen nunca será más ancha que su contenedor */
    height: auto;    /* Mantiene la proporción de la imagen al reescalar */
    display: block;  /* Evita espacios extra debajo de la imagen */
    margin: 15px auto; /* Centra la imagen y le da un margen */
}

/* ==========================================================================
   ESTILOS ADAPTATIVOS (RESPONSIVE)
   ========================================================================== */

/* --- Para Tablets (y pantallas más pequeñas) --- */
/* Se aplica a pantallas con un ancho máximo de 992px */
@media (max-width: 992px) {
    .artist-main-content {
        width: 100%; /* El contenedor principal ahora ocupa todo el ancho */
        margin: 10px 0;
        border-radius: 0;
        box-shadow: none;
    }

    .module-container {
        padding: 25px; /* Reducimos el espaciado interno en los módulos */
    }

    .module-container h2 {
        font-size: 2em; /* Hacemos los títulos un poco más pequeños */
    }
}


/* --- Para Móviles (y pantallas muy pequeñas) --- */
/* Se aplica a pantallas con un ancho máximo de 768px */
@media (max-width: 768px) {
    .artist-nav {
        flex-direction: column; /* Apilamos el logo y el menú verticalmente */
        padding: 15px;
    }

    .artist-identity {
        margin-bottom: 15px;
    }

    .artist-menu {
        flex-wrap: wrap; /* Permitimos que los botones pasen a la siguiente línea */
        justify-content: center;
    }

    .module-container {
        padding: 20px 15px; /* Aún menos espaciado para móviles */
    }

    .module-container h2 {
        font-size: 1.6em;
    }

    /* Ajustamos el tamaño de la fuente para una mejor legibilidad en pantallas pequeñas */
    body {
        font-size: 16px; 
    }
}


/* ... al final del archivo ... */
.slide-content { position: relative; }
.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    color: white;
    padding: 60px 30px 30px 30px;
}
.slide-caption h3 { margin: 0 0 5px 0; font-size: 1.8em; }
.slide-caption p { margin: 0; font-size: 1em; }

/* Asegúrate de que el slider y sus slides sean visibles */
.slider-gallery {
    display: block; /* O 'flex', etc. pero no 'none' */
    visibility: visible;
    opacity: 1;
}

/* El contenedor del slide */
.slide-content {
    position: relative;
    width: 100%;
    /* Asegúrate de que tenga una altura, usualmente definida por la imagen */
}

.slide-content img {
    width: 100%;
    height: 75vh; /* O una altura fija, ej. 500px */
    object-fit: cover; /* O 'contain' */
}