/*
 Theme Name:   Divi Child - Balonazos Magazine
 Theme URI:    https://balonazos.com/magazine/
 Description:  Tema Hijo para Balonazos Magazine
 Author:       Tu Nombre
 Author URI:   https://balonazos.com/
 Template:     Divi
 Version:      1.0.0
 Text Domain:  divi-child-magazine
*/
/* Estilos para la cuadrícula de descargas/revistas en Mi Cuenta */
.woocommerce-downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Crea columnas adaptables de al menos 200px */
    gap: 25px; /* Espacio entre las revistas */
    margin-top: 30px;
}

.woocommerce-download-item {
    text-align: center;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra más pronunciada */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto hover suave */
}

.woocommerce-download-item:hover {
    transform: translateY(-5px); /* Pequeño levantamiento al pasar el ratón */
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.woocommerce-download-item .download-thumbnail {
    margin-bottom: 15px;
    height: 250px; /* Altura fija para el contenedor de la imagen */
    overflow: hidden; /* Asegura que la imagen no se desborde */
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.woocommerce-download-item .download-thumbnail img {
    max-width: 100%;
    height: 100%; /* La imagen ocupará el 100% de la altura de su contenedor */
    object-fit: cover; /* Recorta la imagen para que rellene el espacio sin distorsión */
    display: block;
}

.woocommerce-download-item .download-title {
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    min-height: 2.6em; /* Asegura un espacio mínimo para el título */
    line-height: 1.3;
}

.woocommerce-download-item .download-button {
    display: inline-block;
    background-color: #007bff; /* Color azul de ejemplo, cámbialo a tu color de marca */
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.woocommerce-download-item .download-button:hover {
    background-color: #0056b3; /* Tono más oscuro al pasar el ratón */
}

.woocommerce-download-item .download-key {
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
}

/* Ajustes para dispositivos más pequeños */
@media (max-width: 768px) {
    .woocommerce-downloads-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }
    .woocommerce-download-item .download-thumbnail {
        height: 200px;
    }
}

/* Estilos para la navegación de Mi Cuenta */

/* Ocultar pestañas específicas de la navegación de Mi Cuenta */
.woocommerce-MyAccount-navigation-link--dashboard, /* Este puede que no sea necesario con el nuevo PHP */
.woocommerce-MyAccount-navigation-link--edit-address,
.woocommerce-MyAccount-navigation-link--payment-methods
/* Ya no necesitarías ocultar .woocommerce-MyAccount-navigation-link--edit-account porque lo vamos a usar */
{
    display: none !important;
}

/* Estilo general del contenedor de la navegación de pestañas (la barra lateral) */
.woocommerce-MyAccount-navigation {
    background-color: #f8f8f8; /* Un fondo sutil */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px; /* Espacio debajo de la navegación */
    width: 100%;
    max-width: 100%;
}

/* Estilo de la lista de navegación */
.woocommerce-MyAccount-navigation ul {
    list-style: none; /* Quitar viñetas */
    margin: 0;
    padding: 0;
    display: flex; /* Para poner los elementos en línea si hay espacio */
    flex-wrap: wrap; /* Permitir que los elementos salten de línea en pantallas pequeñas */
    justify-content: flex-start; /* Alinear al inicio */
    gap: 10px; /* Espacio entre los elementos de la lista */
}

/* Estilo de cada elemento de la pestaña */
.woocommerce-MyAccount-navigation li {
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation a {
    display: block; /* Para que el enlace ocupe todo el espacio del li */
    padding: 10px 15px;
    background-color: #e0e0e0; /* Fondo por defecto de las pestañas */
    color: #555; /* Color del texto */
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: bold; /* Hacer el texto de las pestañas más notorio */
}

/* Estilo de la pestaña activa */
.woocommerce-MyAccount-navigation li.is-active a {
    background-color: #4CAF50; /* Color de fondo para la pestaña activa (verde de tu logo) */
    color: #fff; /* Texto blanco para la pestaña activa */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Estilo al pasar el ratón por las pestañas */
.woocommerce-MyAccount-navigation a:hover {
    background-color: #d0d0d0; /* Tono más oscuro al pasar el ratón */
    color: #333;
}

/* Estilo para que la navegación sea horizontal en pantallas grandes */
@media (min-width: 768px) {
    .woocommerce-MyAccount-navigation {
        display: block; /* Vuelve a block para que el UL tome el control del flexbox */
        width: 100%; /* Ocupa todo el ancho */
        /* AÑADE O MODIFICA ESTAS LÍNEAS */
        float: left; /* Asegura que no haya flotación en pantallas grandes */
        margin-bottom: 20px; /* Espacio entre el menú y el contenido */
    }
    .woocommerce-MyAccount-navigation ul {
        flex-direction: row; /* Coloca los elementos en fila */
        justify-content: space-around; /* CAMBIA ESTO: Distribuye las pestañas uniformemente */
        /* Opcional: si prefieres que estén agrupadas al centro, usa 'center' */
        padding-bottom: 0px; /* Espacio debajo de las pestañas */
    }
    .woocommerce-MyAccount-content {
        width: 100%; /* El contenido ocupa todo el ancho restante */
        /* AÑADE ESTA LÍNEA */
        clear: both; /* Limpia flotaciones anteriores, importante para el layout */
    }
}

/* Estilo para el contenido principal (para asegurarnos que ocupe todo el ancho) */
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    margin-left: 0;
    border-top: 1px solid #eee; /* Separador visual */
    padding-top: 20px;
}

/* FORZAR ANCHO COMPLETO Y ELIMINAR FLOTACION PARA LA NAVEGACIÓN DE MI CUENTA */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: left; !important; /* Elimina la flotación izquierda que limita el ancho */
    width: 100% !important; /* Fuerza el ancho al 100% */
    box-sizing: border-box !important; /* Asegura que el padding se incluya en el ancho */
    margin-right: 0 !important; /* Elimina cualquier margen derecho que pueda empujar el contenido */
}

/* Ajustar el contenido principal para que ocupe todo el ancho restante */
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important; /* Fuerza el ancho del contenido al 100% */
    float: left; !important; /* Elimina la flotación y permite que ocupe toda la línea */
    margin-left: 0 !important; /* Elimina el margen izquierdo si lo tuviera */
    clear: both !important; /* Asegura que no haya elementos flotantes por encima */
}

/* Reajustar la alineación de las pestañas en pantallas grandes */
@media (min-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        justify-content: space-around !important; /* Distribuye las pestañas uniformemente */
        /* O justify-content: center !important; si prefieres que estén agrupadas al centro */
    }
}