/*
Theme Name: Mi Tienda Personalizada
Theme URI: https://cubrecamas.cl/
Author: Tu Nombre
Author URI: https://cubrecamas.cl/
Description: Un tema personalizado para mi tienda con WooCommerce.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mitienda
*/

/* --- Estilos Generales --- */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- Estilos de la Cabecera --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: var(--header-bg-color, #FFFFFF); /* Usa la variable o blanco por defecto */
    border-bottom: 1px solid #eee;
}

.site-content {
    margin-top: 90px; /* Compensa la altura de la cabecera fija en escritorio (reducido de 100px) */
}

/* Ajuste para la barra de administración de WordPress cuando se inicia sesión */
.admin-bar .site-header {
    top: 32px;
}

.admin-bar .site-content {
    margin-top: 122px; /* Compensa cabecera fija + barra de administración en escritorio */
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem; /* 1rem de espacio arriba/abajo, 2rem a los lados */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Espacio entre el botón y el logo */
}

/* Estilos para el logo y el título del sitio */
.logo {
    line-height: 0; /* Ayuda a alinear la imagen del logo */
}
.custom-logo-link img,
.custom-logo {
    max-height: 50px;
    width: auto;
}
.site-title {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
}
.site-title a {
    color: #004C97;
}

body.page .entry-header {
    display: none;
}

.search-bar {
    flex-grow: 1; /* Permite que la barra de búsqueda ocupe el espacio sobrante */
    padding: 0 2rem; /* Añade espacio a los lados */
}

.search-form {
    position: relative;
    max-width: 500px; /* Aumentamos el ancho máximo */
    margin: 0 auto; /* Centra el formulario si el espacio es mayor */
}

.search-field {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem; /* Más alto y con espacio para la lupa */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Asegura que el padding no aumente el ancho total */
}

.search-submit {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: none;
    border: none;
    padding: 0 1rem;
    cursor: pointer;
}

.search-icon {
    width: 20px;
    height: 20px;
    color: #555;
}

.header-icons {
    display: flex;
    gap: 1rem; /* Espacio entre los iconos */
}

.header-icons a {
    display: flex;
    align-items: center;
}

/* Texto junto a los iconos */
.icon-text {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--header-icons-color, #333);
}

/* Estilos para los iconos de la cabecera */
.user-icon,
.cart-icon {
    width: 24px;
    height: 24px;
    color: var(--header-icons-color, #333); /* Color del icono */
    margin-right: 0.5rem; /* Espacio entre el icono y el texto */
}

/* --- Botón de Menú Hamburguesa (oculto en escritorio) --- */
.menu-toggle {
    display: flex; /* Para alinear icono y texto */
    align-items: center;
    gap: 0.5rem; /* Espacio entre icono y texto */
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem;
    cursor: pointer;
}

.menu-toggle-icon .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--header-icons-color, #333);
    margin: 4px 0;
}

/* --- Estilos del Menú de Navegación --- */
.main-navigation {
    display: none; /* Oculto por defecto en todas las resoluciones */
    width: 100%;
    background-color: white;
    padding: 1rem 0;
    border-top: 1px solid #eee; /* Línea divisoria */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block; /* Cambiamos a bloque para una lista vertical */
}

.main-navigation a {
    color: #333; /* Color de texto oscuro para fondo blanco */
    font-weight: bold;
    display: block;
    padding: 0.5rem 2rem;
}

/* Se muestra al hacer clic en la hamburguesa */
.main-navigation.toggled {
    display: block;
}

/* Añadimos una línea de separación debajo de cada elemento del menú */
.main-navigation li {
    border-bottom: 1px solid #e5e5e5; /* Línea gris muy clara */
}

/* Y la quitamos del último elemento para que no haya una línea doble al final */
.main-navigation li:last-child {
    border-bottom: none;
}

/* --- Estilos para el Menú Desplegable (Acordeón) --- */

/* 1. Posicionamiento relativo para los items con hijos */
.main-navigation .menu-item-has-children {
    position: relative;
}

/* 2. Ocultar sub-menús por defecto */
.main-navigation .sub-menu {
    display: none;
    padding-left: 1rem; /* Indentación para los sub-items */
    background-color: #f9f9f9; /* Un fondo ligeramente diferente para distinguirlos */
}

/* 3. Mostrar sub-menú cuando está activo (más específico) */
.main-navigation .sub-menu.toggled-on {
    display: block;
}

/* 4. Estilos del botón de despliegue */
.dropdown-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px; /* Área táctil adecuada */
    height: 100%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* 5. Estilos para el icono '+' y '-' usando pseudo-elementos */
.dropdown-toggle::before {
    content: '+'; /* Símbolo de suma por defecto */
    font-size: 1.5rem;
    color: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease-in-out;
}

/* Cuando el menú está desplegado, cambia a '-' y rota el '+' */
.dropdown-toggle.toggled-on::before {
    content: '−'; /* Símbolo de resta */
    transform: translate(-50%, -50%) rotate(180deg);
}

/* --- Estilos para los Títulos/Separadores del Navegador Visual --- */
/* Esto permite usar un widget de Encabezado o HTML para crear grupos */
.category-visual-navigator .widget:not([class*="widget_media_image"]) {
    flex-basis: 100%; /* Ocupa todo el ancho, forzando una nueva línea */
    margin-bottom: 0;
    padding: 1rem 0 0.5rem 0;
    border: none;
    box-shadow: none;
    background: none;
}

.category-visual-navigator .widget:not([class*="widget_media_image"]) h1,
.category-visual-navigator .widget:not([class*="widget_media_image"]) h2,
.category-visual-navigator .widget:not([class*="widget_media_image"]) h3 {
    font-size: 1.5rem;
    text-align: left;
}

/* --- Navegador Visual de Subcategorías --- */
.category-visual-navigator {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 1280px;
    margin: 0 auto 2rem auto;
    padding: 0 1rem;
}

.visual-navigator-widget {
    flex: 1 1 200px; /* Crece, se encoge, y tiene una base de 200px */
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    overflow: hidden; /* Para que la imagen no se salga del borde redondeado */
    transition: box-shadow 0.3s ease;
}

.visual-navigator-widget:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.visual-navigator-widget a {
    display: block;
}

.visual-navigator-widget img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Hace que la imagen sea cuadrada */
    object-fit: cover;
    display: block;
}

.visual-navigator-widget .widget-title {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding: 0.75rem 0.5rem;
}

/* --- Carrusel de Categorías --- */
.category-carousel-section {
    position: relative;
    padding: 2rem 0;
    width: 100%;
    box-sizing: border-box;
}

.category-carousel-container {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 40px; /* Espacio para las flechas */
}

.category-carousel-wrapper {
    display: flex;
    gap: 1rem;
    transition: transform 0.5s ease-in-out;
}

/* En móvil, no queremos la transición de JS, sino el scroll nativo */
@media (max-width: 768px) {
    .category-carousel-wrapper { transition: none; }
}

/* Cada item del carrusel ocupará el 100% del ancho */
.category-carousel-item {
    flex: 0 0 100%;
    text-align: center;
    position: relative; /* Para posicionar el título sobre la imagen */
}

.category-carousel-item img {
    width: 100%; /* La imagen ocupa todo el ancho del item */
    height: 40vh; /* Altura relativa a la ventana (ej. 40% de la altura de la pantalla) */
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-carousel-item a:hover img {
    transform: scale(1.05);
}

/* Estilos para el título sobre la imagen */
.category-carousel-item .category-title {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
    font-weight: bold;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
}

.carousel-arrow:hover {
    background-color: rgba(255, 255, 255, 1);
}

/* Ajustamos la posición de las flechas */
.carousel-arrow.prev { left: 1rem; }
.carousel-arrow.next { right: 1rem; }

/* --- Estilos para Móvil (Responsive) --- */
@media (max-width: 768px) {
    /* Ajuste para que el contenido no se esconda bajo la Cabecera fija en móvil */
    .site-content {
        margin-top: 140px !important; /* Compensa la cabecera fija de ~140px en móvil */
    }

    /* En la página de inicio, pegamos el carrusel a la cabecera */
    .home .site-content {
        margin-top: 140px !important; /* Mantenemos el margen para no tapar el buscador */
        padding-top: 0 !important;
    }

    .home .home-carousel-section:first-of-type {
        margin-top: -10px !important; /* Pequeño ajuste para "pegar" el carrusel */
    }

    .admin-bar .site-content {
        margin-top: 141px !important; /* Compensa cabecera fija + barra de administración en móvil */
    }

    .header-main {
        flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea */
        padding: 0.5rem;
    }

    .header-left {
        order: 1;
        /* flex-grow: 1; Eliminamos esto para que no ocupe todo el espacio */
    }

    .menu-toggle {
        order: -1; /* Lo pone al principio dentro de header-left */
        flex-direction: column; /* Apila el icono y el texto verticalmente */
        gap: 0.1rem; /* Espacio muy pequeño entre icono y texto */
        padding: 0.2rem; /* Padding reducido */
        border: none; /* Quitamos el borde para un look más limpio */
    }
    .menu-toggle-icon {
        width: 20px; /* Tamaño del contenedor del icono de hamburguesa */
        height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around; /* Distribuye las barras uniformemente */
        align-items: center;
    }
    .menu-toggle-icon .icon-bar {
        width: 18px; /* Barras más pequeñas */
        height: 1.5px; /* Barras más delgadas */
        margin: 2px 0; /* Margen reducido entre barras */
    }
    .menu-toggle .icon-text {
        font-size: 0.65rem; /* Letra más pequeña para el texto "Menu" */
        white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    }

    .logo {
        /* Ya no necesita crecer ni centrarse, se alinea por el flexbox del padre */
        /* flex-grow: 1; */
        /* text-align: center; */
    }
    .custom-logo-link img,
    .custom-logo {
        max-height: 30px; /* Logo más pequeño para móvil */
    }

    .search-bar {
        /* En móvil, el buscador debe estar entre el logo y los iconos */
        order: 2;
        width: 100%; /* Ocupa todo el ancho en su propia línea */
        margin-top: 1rem; /* Añade espacio arriba */
        margin-top: 0.5rem; /* Margen superior reducido */
        padding: 0;
    }
    .search-form {
        max-width: none; /* Permitimos que ocupe el 100% */
    }
    .search-field {
        max-width: none;
        padding: 0.4rem 0.5rem; /* Padding ajustado para el campo de búsqueda */
        font-size: 0.8rem; /* Tamaño de fuente más pequeño */
    }
    .search-submit {
        padding: 0 0.5rem; /* Padding ajustado para el botón de búsqueda */
    }
    .search-icon {
        width: 16px; /* Icono de búsqueda más pequeño */
        height: 16px;
    }

    .header-icons {
        order: 1; /* Misma orden que header-left para que estén en la misma línea */
        margin-left: auto; /* Empuja los iconos a la derecha */
        gap: 0.5rem; /* Espacio reducido entre los iconos de usuario y carrito */
    }
    .header-icons a {
        flex-direction: column; /* Apila el icono y el texto verticalmente */
        gap: 0.1rem; /* Espacio muy pequeño entre icono y texto */
    }
    .user-icon,
    .cart-icon {
        width: 20px; /* Iconos más pequeños */
        height: 20px;
        margin-right: 0; /* Elimina el margen derecho ya que el texto va debajo */
    }
    .header-icons .icon-text { /* Selector específico para el texto de los iconos */
        font-size: 0.65rem; /* Letra más pequeña para el texto de los iconos */
        white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    }

    .main-navigation {
        order: 4;
    }

    .category-carousel-item img {
        /* Hacemos la imagen un poco más alta en móviles */
        height: 50vh;
    }

    /* En móvil, ocultamos las flechas y activamos el scroll nativo */
    .carousel-arrow {
        display: none;
    }
    .category-carousel-container {
        overflow-x: auto; /* Habilita el scroll horizontal táctil */
        padding: 0 1rem; /* Un poco de espacio a los lados */
        scroll-snap-type: x proximity; /* Hace que el scroll "frene" en cada item, de forma menos estricta */
        -webkit-overflow-scrolling: touch; /* Mejora la experiencia en iOS */
    }
    .category-carousel-item {
        scroll-snap-align: start; /* Asegura que cada item se alinee al inicio al hacer snap */
    }
    .category-carousel-item .category-title {
        font-size: 1rem;
    }
}

/* --- Estilos del Pie de Página (Footer) --- */
.site-footer {
    background-color: #f8f8f8;
    color: #555;
    padding: 2rem 1rem;
    text-align: center;
}

.footer-widgets-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 2rem auto;
    text-align: left;
}

.footer-widgets-area .widget {
    flex: 1;
    min-width: 250px; /* Evita que los widgets se compriman demasiado */
}

.footer-widgets-area .widget-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
}

.site-info {
    border-top: 1px solid #e5e5e5;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

/* --- Estilos de la Zona de Widgets de Inicio --- */
.home-widgets-area {
    padding: 2rem 1rem;
    display: flex;
    gap: 1rem;
    transition: transform 0.5s ease-in-out; /* Animación para el deslizamiento */
}

.home-widgets-area .widget {
    flex: 0 0 33.333%; /* Cada item ocupa un tercio del espacio */
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    aspect-ratio: 4 / 3; /* Mantiene una proporción 4:3 (ancho/alto) */
}

/* --- Estilos del Carrusel de Widgets de Inicio (con flechas) --- */
.home-carousel-section {
    position: relative;
    max-width: 1280px;
    margin: 2rem auto;
    padding: 0; /* Eliminamos el padding lateral para que no haya espacio */
}

.home-carousel-container {
    overflow: hidden; /* Oculta los widgets que no caben */
}

.home-carousel-widgets-area {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    transition: transform 0.5s ease-in-out; /* Animación para el deslizamiento */
}

.home-carousel-widgets-area .carousel-widget {
    /* Hacemos que 3 widgets quepan en el contenedor */
    flex: 0 0 33.333%; /* Cada item ocupa un tercio del espacio */
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    aspect-ratio: 4 / 3; /* Mantiene una proporción 4:3 (ancho/alto) */
}
.home-carousel-section .carousel-arrow {
    left: 1rem;
}
.home-carousel-section .carousel-arrow.next {
    right: 1rem;
    left: auto;
}

/* Para pantallas más pequeñas, hacemos los widgets del carrusel un poco más pequeños */
@media (max-width: 768px) {
    .home-carousel-section {
        padding: 0; /* Sin padding lateral en móvil */
    }
    .home-carousel-container {
        overflow-x: auto; /* Reactivamos el scroll táctil */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 1rem; /* Añadimos un poco de espacio en los lados */
    }
    .home-carousel-widgets-area .carousel-widget {
        flex-basis: 250px; /* Ancho fijo para cada item en móvil */
        scroll-snap-align: start;
    }
    .home-widgets-area .widget {
        flex-basis: 250px; /* Ancho fijo para cada item en móvil */
        scroll-snap-align: start;
    }
}

.home-carousel-widgets-area .widget-title {
    margin-top: 0;
}

/* --- Clase especial para widgets que solo contienen una imagen --- */
/* Úsala en "Clases CSS adicionales" del widget */
.home-widgets-area .widget.widget-image-only,
.home-carousel-widgets-area .carousel-widget.widget-image-only,
.home-carousel-section .widget.widget-image-only {
    padding: 0; /* La solución: eliminamos el relleno interior */
}

/* --- Estilos para que las imágenes cubran la caja del widget --- */

/* Hacemos que la imagen dentro de CUALQUIER widget del carrusel se adapte */
.home-carousel-section .widget img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La magia está aquí: la imagen cubre el espacio, manteniendo la proporción y recortando el exceso */
    display: block; /* Asegura que no haya espacios extra */
}


/* --- Ajustes de Espaciado --- */
/* Elimina el margen y el padding superior del primer carrusel en la página de inicio */
.site-main > .home-carousel-section:first-of-type {
    margin-top: 0; /* Elimina el margen exterior */
    padding-top: 0; /* Pega el carrusel a la cabecera */
    border-top: none; /* Elimina cualquier borde superior que pueda existir */
}

.site-main > .home-carousel-section:first-of-type .home-widgets-area,
.site-main > .home-carousel-section:first-of-type .home-carousel-widgets-area {
    padding-top: 0;
}

/* --- Clases para Controlar el Tamaño de los Widgets --- */
/* Úsalas en "Clases CSS adicionales" del widget para cambiar su proporción */

/* Proporción Cuadrada (1:1) */
.widget.size-square {
    aspect-ratio: 1 / 1;
}

/* Proporción Apaisada/Horizontal (16:9) */
.widget.size-landscape {
    aspect-ratio: 16 / 9;
}

/* Proporción Vertical (3:4) */
.widget.size-portrait {
    aspect-ratio: 3 / 4;
}

/* --- Estilos para Mapa de Imagen Responsive --- */
/* Asegura que la imagen del mapa se ajuste al contenedor */
.widget_custom_html img[usemap] {
    width: 100% !important;
    height: auto !important;
}

/* --- Estilos para Mapa de Imagen Responsive --- */
/* Asegura que la imagen del mapa se ajuste al contenedor */
.widget_custom_html img[usemap] {
    width: 100% !important;
    height: auto !important;
}

/* --- Estilos para Productos en la Página de Inicio --- */
.home-products-wrapper {
    max-width: 1280px;
    margin: 4rem auto; /* Espacio arriba/abajo y centrado */
    padding: 0 1rem; /* Espacio a los lados */
}

.home-products-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #333;
}

/* Ajustes para los productos de WooCommerce en la home */
.home-products-wrapper .woocommerce ul.products {
    margin-bottom: 0; /* Eliminar margen extra de WooCommerce */
}

.home-products-button {
    display: flex;
    width: fit-content;
    margin: 2rem auto 0;
    padding: 1rem 2rem;
    align-items: center;
    justify-content: center;
    background-color: #004C97;
    color: #fff;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-products-button:hover,
.home-products-button:focus {
    background-color: #003568;
    color: #fff;
    transform: translateY(-2px);
}
/* Ocultar solo títulos de páginas estándar y del encabezado de la tienda, permitiendo ver los títulos de productos */
body.page .entry-title,
body.page .page-title,
.woocommerce-products-header__title,
.search-results-wrapper h1 {
    display: none !important;
}

/* Estilos para el título del producto cuando se muestra en la columna de imágenes (columna izquierda) */
.woocommerce-product-gallery h1.product_title {
    clear: both;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    line-height: 1.2;
}

/* Ocultar el título duplicado en la cabecera o fuera de la galería en la página de producto individual */
body.single-product .site-title,
body.single-product .entry-title:not(.woocommerce-product-gallery .entry-title),
body.single-product .product_title:not(.woocommerce-product-gallery .product_title),
body.single-product .page-title {
    display: none !important;
}