/*
 Theme Name: Astra Child
 Theme URI: https://tusitio.com
 Description: Child theme de Astra
 Author: Tu Nombre
 Template: astra
 Version: 1.0.0
*/

/* Aquí debajo va tu CSS personalizado */
/* ================================================================= */
/* 1. TARJETA UNIFICADA (ASTRA + AJAX)                               */
/* ================================================================= */

/* Selector potente para atrapar ambos casos */
.woocommerce ul.products li.product,
.ast-article-post.product,
li.product.type-product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* PEGA TODO ARRIBA (Quita el espacio gigante) */
    height: auto !important;
    /*min-height: 450px !important; /* Altura mínima para que quepan los botones alineados */
    position: relative !important;
    padding-bottom: 50px !important; /* Espacio reservado SOLO para botones */
    margin-bottom: 30px !important;
    background: #fff !important; /* Asegura fondo blanco */
    border: 1px solid #eee !important; /* Opcional: un borde sutil para delimitar */
    border-radius: 20px !important; /* Bordes redondeados */
    overflow: hidden;
}

/* Contenedor de la información (Imagen, Título, Texto) */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.ast-article-post.product .woocommerce-LoopProduct-link {
    width: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 0 !important; /* No estirar */
}

/* Imagen */
.woocommerce-LoopProduct-link img {
    margin-bottom: 15px !important;
    object-fit: contain !important;
    /*height: 200px !important; 
     * /* Altura fija de imagen para uniformidad */
    /*width: 100% !important;*/
}

/* Título del producto */
.woocommerce-loop-product__title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
    padding: 0 10px !important; /* Un poco de aire a los lados */
    min-height: 40px; /* Para alinear títulos de 1 o 2 líneas */
}

/* Marca (El div que añadimos por código) */
.marca-producto {
    padding: 0 10px !important;
    margin-bottom: 5px !important;
}

/* Categoría (La forzaremos a aparecer) */
.ast-woo-product-category {
    font-size: 11px !important;
    color: #999 !important;
    padding: 0 10px !important;
    margin-bottom: 10px !important;
    order: 3; /* Intenta mandarla al final si flex lo permite */
}

/* ================================================================= */
/* 2. BOTONES FIJOS AL FONDO                                         */
/* ================================================================= */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .compare,
.ast-article-post.product .button,
.ast-article-post.product .compare {
    position: absolute !important;
    bottom: 15px !important; /* Siempre a 15px del borde inferior */
    width: 45% !important;
    height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* Leer más (Izquierda) */
.woocommerce ul.products li.product a.button:not(.compare),
.ast-article-post.product a.button:not(.compare) {
    left: 5% !important; /* Margen izquierdo */
    background: transparent !important;
    color: #0066ff !important;
    /*border: 1px solid #0066ff !important;*/
}
.woocommerce ul.products li.product a.button:not(.compare):hover,
.ast-article-post.product a.button:not(.compare):hover {
    background: #0066ff !important;
    color: #fff !important;
}

/* Comparar (Derecha) */
.woocommerce ul.products li.product a.compare,
.ast-article-post.product a.compare {
    right: 5% !important; /* Margen derecho */
    background: #0066ff !important;
    color: #fff !important;
    border: 1px solid #0066ff !important;
    top: auto !important;
}

.woof_block_html_items .icheckbox_square-blue {
    transform: scale(0.7); /* Reduce el tamaño al 80% del original */
    border-radius: 4px !important; 
    overflow: hidden; /* Oculta las esquinas cuadradas de la imagen de fondo */
}

.woof_checkbox_label {
    font-size: 14px;
}

.woof_redraw_zone h4{
	font-size:1.2rem;
}

/* ================================================================= */
/* 3. BOTONES FIJOS DEL COMPARADOR                                   */
/* ================================================================= */

a.yith-woocompare-open.button,button.button.woof_submit_search_form,button.button.woof_reset_search_form,button.woof_reset_button_2 {
    border-radius: 30px;
}

button.woof_reset_button_2{ 
	padding:10px
}

/* ================================================================= */
/* 4. BARRA DE NAVEGACION   	                                     */
/* ================================================================= */

header#masthead{
	position: sticky !important;
}

/* ========================================================= */
/* BOTÓN ZONA ACADÉMICA + DESPLEGABLE MENÚ USUARIO           */
/* ========================================================= */

/* 1. CONTENEDOR DEL BOTÓN (li padre) */
.main-header-menu li.boton-menu {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 5px !important;
    position: relative !important; /* CLAVE para el submenú */
}

/* 2. BOTÓN PRINCIPAL (Zona Académica) */
.main-header-menu li.boton-menu > a.menu-link {
    padding: 10px 25px !important;
    border-radius: 30px !important;
    background-color: #6EC1E4 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Hover del botón */
.main-header-menu li.boton-menu > a.menu-link:hover {
    background-color: #77a1b2 !important;
    color: #fff !important;
}

/* 3. SUBMENÚ (Menú usuario) */
.main-header-menu li.boton-menu ul.sub-menu {
    background: #fff;
    border-radius: 12px;
    padding: 10px 0;
    min-width: 240px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);

    top: 100%;
    left: 0;
}

/* 4. ITEMS DEL DESPLEGABLE */
.main-header-menu li.boton-menu ul.sub-menu li a {
    padding: 10px 20px !important;
    font-size: 14px;
    font-weight: 500;
    color: #333 !important;
}

/* Hover submenú */
.main-header-menu li.boton-menu ul.sub-menu li a:hover {
    background-color: #f2f6f8;
    color: #6EC1E4 !important;
}


/* Poner un icono de hoja delante del nombre del archivo */
.wcpoa_attachment_name::before {
    content: "📄"; /* Icono de hoja */
    margin-right: 8px;
    font-size: 1.2em;
}

/* (Opcional) Poner la palabra "Descargar" en el botón si no podemos cambiar el texto */
/* Esto borra el "Download" original y pone "Descargar" visualmente */
.wcpoa_attachmentbtn {
    visibility: hidden;
    position: relative;
    width: auto;
}
.wcpoa_attachmentbtn:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "📥 Descargar"; /* Tu nuevo texto */
    background-color: #0071e6; /* Color de fondo botón */
    color: white;
    padding: 5px 15px;
    border-radius: 25px;
    white-space: nowrap;
}