/* Mi hoja de estilos personalizada Mikix */

/* Cambiar el color de la barra superior a un tono azul oscuro */
#header .header-nav {
    background: #2c3e50 !important;
}

/* Cambiar el color de los textos de la barra superior a blanco */
#header .header-nav a, #header .header-nav span {
    color: white !important;
}


/*mikix esto es para cambiar el color de fondo del footer ---07/02/26-----*/
/* Atacamos el bloque envolvente y el footer real de PS 8 */
.footer-container, 
#footer, 
.footer-after {
    background-color: #2c3e50 !important;
}

/* En PS 8, a veces el fondo está en una clase interna llamada 'container' o 'row' dentro del footer */
#footer .container, 
#footer .row {
    background-color: transparent !important;
}

/* Forzar textos y enlaces en blanco para PS 8 */
#footer, 
#footer a, 
#footer .h3, 
#footer .footer-title, 
#footer .block-contact, 
#footer p, 
#footer span {
    color: #ffffff !important;
}

/* Si los enlaces tienen un color específico por defecto, los obligamos aquí */
#footer ul li a {
    color: #ffffff !important;
}
/*mikix esto es para cambiar el color de fondo del footer ----07/02/26---- fin*/


/*mikix esto es para cambiar el color de fondo del suscrivirse en el footer ----07/02/26---- */

/* Pintar el bloque de la newsletter del mismo azul */
#footer .block_newsletter,
.block_newsletter {
    background-color: #2c3e50 !important;
}

/* Cambiar el color del texto informativo de la newsletter a blanco */
#footer .block_newsletter p {
    color: #ffffff !important;
}
/*mikix esto es para cambiar el color de fondo del suscrivirse en el footer -----07/02/26--- fin */

/*mikix esto es para cambiar el color de fondo del footer para movil cuando despliegas---08/02/26-----*/

/* 1. Fondo general para todas las versiones */
.footer-container, 
#footer, 
.block_newsletter {
    background-color: #2c3e50 !important;
}

/* 2. Arreglo específico para el móvil (cuando se despliegan las pestañas) */
@media (max-width: 767px) {
    /* Fondo de la lista desplegada */
    #footer .footer-container .links .wrapper,
    #footer .footer-container .links .collapse,
    #footer .footer-container .links .collapse.in,
    #footer .footer-container .links .collapsing,
    #footer .footer-container .block,
    .footer-container .collapse.show { 
        background-color: #2c3e50 !important;
    }

    /* Forzar que los textos internos sean blancos al abrirse */
    #footer .footer-container .links .wrapper ul li a,
    #footer .footer-container .links .title .navbar-toggler,
    #footer .footer-container .links .title .navbar-toggler i {
        color: #ffffff !important;
    }
    
    /* Quitar bordes blancos que a veces pone PrestaShop en móvil */
    #footer .footer-container .links .title {
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
}

/* 3. Textos y enlaces siempre en blanco */
#footer, #footer a, #footer .h3, #footer p, #footer span {
    color: #ffffff !important;
}

/*mikix esto es para cambiar el color de fondo del footer para movil cuando despliegas---08/02/26---fin --*/


/*mikix esto es para quitar los emails de la vista de buscadores y spiders---08/02/26-- --*/

/* Ocultar específicamente la línea del email en la página de contacto */
.contact-rich .block .data a[href^="mailto:"],
.contact-rich .block .icon i.material-icons.email,
.contact-rich .block:nth-of-type(3) {
    display: none !important;
}

/*mikix esto es para quitar los emails de la vista de buscadores y spiders---08/02/26--fin--*/


/*mikix esto es para quitar los signos + en la barra lateral ---08/02/26-- --*/

/* ELIMINAR SIGNOS + Y - DE LAS CATEGORÍAS */
.block-categories .collapse-icons, 
.block-categories i.add, 
.block-categories i.remove,
.block-categories [data-target^="#exCollapsingNavbar"] i {
    display: none !important;
}

/* ASEGURAR QUE EL TEXTO ESTÉ ABIERTO Y SIN BOTÓN */
.block-categories .navbar-toggler {
    display: none !important;
}

.block-categories .collapse {
    display: block !important;
    height: auto !important;
}

/*mikix esto es para quitar los signos + en la barra lateral ---08/02/26---------------------------*/

/* Ocultar columna izquierda en móviles y tablets (pantallas menores de 992px) */
@media (max-width: 991px) {
    #left-column {
        display: none !important;
    }
    #content-wrapper {
        width: 100% !important;
    }
}


/*mikix esto es para quitar la barra lateral en moviles y tablets queda mas limpio---08/02/26---fin--*/


/*mikix esto es para Ocultar Descripción y Fotos de Categoría queda mas limpio---08/02/26----------*/

/* Eliminar el bloque de banner, descripción y foto en categorías */
#js-product-list-header {
    display: none !important;
}

/* Opcional: Si quieres que el título (ej: ALFOMBRAS) sí se vea pero nada más */
.block-category .block-category-inner {
    display: none !important;
}

/*mikix esto es para Ocultar Descripción y Fotos de Categoría queda mas limpio---08/02/26---fin--*/


/*mikix esto es para ocultar el bloque central de Subcategorías (donde salen las fotos de las carpetas o cuadernos) queda mas limpio---08/02/26----------*/

/* Ocultar el bloque central de subcategorías (fotos y títulos) */
#subcategories,
.subcategories {
    display: none !important;
}

/* Ajustar el espacio para que los productos suban a la parte superior */
#products {
    margin-top: 0 !important;
}

/*mikix esto es para ocultar el bloque central de Subcategorías (donde salen las fotos de las carpetas o cuadernos) queda mas limpio---08/02/26---fin-------*/



/*mikix esto es para quitar el titulo de inicio en la barra de categorias queda mas limpio---08/02/26----------*/
/* Eliminar por completo el título (Inicio/Categorías) de la barra lateral */
.block-categories .h6, 
.block-categories .title_block {
    display: none !important;
}

/* Ajustar el margen superior para que la primera categoría no quede pegada al borde */
.block-categories {
    margin-top: 10px !important;
    padding-top: 0 !important;
}

/*mikix esto es para quitar el titulo de inicio en la barra de categorias queda mas limpio---08/02/26---fin-------*/


/*mikix nooooo esto es para colorear la categotia que estas en la barra de categorias queda mas claro---08/02/26---------*/



/*mikix nooooo esto es para colorear la categotia que estas en la barra de categorias queda mas claro---08/02/26---fin-------*/


/*mikix esto es para redondear barra lateral categorias---08/02/26--------*/
/* Redondear las esquinas de la barra lateral */
.block-categories {
    border: 1px solid #e5e5e5; /* Un borde fino para que se vea el redondeo */
    border-radius: 15px !important; /* Aquí controlas cuánto quieres redondear */
    padding: 15px !important;
    background-color: #f8f8f8; /* Un color de fondo suave para que resalte */
    overflow: hidden; /* Asegura que nada "se salga" de las esquinas redondeadas */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05); /* Un poco de sombra para darle relieve */
}

/*mikix esto es para redondear barra lateral categorias---08/02/26----fin----*/


/*mikix esto es para redondear fotos de productos---08/02/26--------*/
/* REDONDEAR EL CONTENEDOR COMPLETO DEL PRODUCTO */
article.product-miniature, 
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail,
.product-miniature img {
    border-radius: 20px !important;
    overflow: hidden !important; /* ESTA ES LA CLAVE: corta lo que sobre sale */
}

/* ELIMINAR BORDES ANTIGUOS QUE PUEDAN MOLESTAR */
.product-miniature .thumbnail-container {
    border: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* Añade suavidad */
}

/*mikix esto es para redondear fotos de productos---08/02/26----fin----*/


/*mikix esto es para redondear la foto de producto---08/02/26--------*/

/* Redondear la foto grande en la ficha de producto */
.product-cover, 
.product-cover img, 
.images-container .js-qv-product-cover {
    border-radius: 20px !important;
    overflow: hidden !important; /* Importante para que la imagen no se salga del redondeo */
}

/* Opcional: Redondear también las miniaturas de abajo (si las tienes) */
.product-images img.thumb {
    border-radius: 10px !important;
    margin-bottom: 5px;
}

/*mikix esto es para redondear la foto de producto---08/02/26---fin-----*/


/*mikix esto es para redondear el boton para añadir al carrito de producto---08/02/26-------*/

/* Redondear el botón de añadir al carrito en la ficha de producto */
.add-to-cart .btn-primary.add-to-cart,
.product-add-to-cart .add-to-cart {
    border-radius: 50px !important; /* Estilo 'pastilla', muy moderno y fácil de pulsar */
    padding-left: 10px !important;  /* Un poco más de espacio a los lados para que luzca el redondeo */
    padding-right: 30px !important;
    transition: all 0.3s ease;      /* Suaviza el cambio cuando pasas el ratón */
}

/* Efecto opcional: Que cambie ligeramente al pasar el ratón */
.add-to-cart .btn-primary.add-to-cart:hover {
    transform: scale(1.02); /* Crece un poquito al poner el cursor encima */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/*mikix esto es para redondear el boton para añadir al carrito de producto---08/02/26---fin-----*/

/*mikix esto es para aumentar el tamaño del precio de producto en el producto de producto---08/02/26-------*/
/* Aumentar el tamaño del precio en la página de producto */
.product-prices .current-price span {
    font-size: 2.0rem !important; /* Tamaño bastante más grande */
    font-weight: bold !important;  /* Para que resalte mucho */
    color: #232323;               /* Color oscuro profesional */
    display: inline-block;
    margin-bottom: 10px;
}

/* Si tienes descuentos, podemos poner el precio antiguo un poco más pequeño para que no compita */
.product-prices .regular-price {
    font-size: 1.2rem !important;
    color: #999;
    text-decoration: line-through;
}

/*mikix esto es para aumentar el tamaño del precio de producto en el producto de producto---08/02/26---fin-----*/


/*mikix esto es para que la barra superior en moviles y tablets quede coloreado la cesta con articulos--08/02/26-------*/
/* Solo para móviles y tablets (pantallas menores de 991px) */
@media (max-width: 991px) {
    /* Colorear el icono del carrito y el texto */
    #_mobile_cart .cart-preview.header, 
    #_mobile_cart .shopping-cart,
    #_mobile_cart i.material-icons,
    #_mobile_cart .cart-products-count {
        color: #0d0d0e !important; /* El azul estándar de PrestaShop (puedes cambiarlo) */
    }

    /* Si quieres que el número de productos tenga un fondo para que se vea mejor */
    #_mobile_cart .cart-products-count {
        font-weight: bold;
        background: rgba(36, 185, 215, 0.1); /* Un fondo azul muy clarito */
        padding: 2px 5px;
        border-radius: 50%;
    }
}


/*mikix esto es para que la barra superior en moviles y tablets quede coloreado la cesta con articulos--08/02/26-------*/

/*mikix esto es para que la ventana emergente de terminos y condiciones como no podemos modificar el color de las letras en blanco hemos modificado el color del fondo en gris--10/02/26-------*/

/* Cambiar el fondo de la ventana de términos a gris oscuro */
.modal-content {
    background-color: #4a4a4a !important; /* Gris oscuro */
    border: 2px solid #333333 !important; /* Borde para dar profundidad */
}

/* Forzar que el texto sea blanco o gris muy claro para que resalte */
.modal-body, 
.modal-body p, 
.modal-body span, 
#cms-page-content-modal {
    color: #ffffff !important;
}

/* El título de la ventana también en blanco */
.modal-header .modal-title, .modal-header .close {
    color: #ffffff !important;
    opacity: 1;
}

/* fin mikix esto es para que la ventana emergente de terminos y condiciones como no podemos modificar el color de las letras en blanco hemos modificado el color del fondo en gris--10/02/26-------*/

/* ==========================================================================
   mikix es todo lo mismo para el fondo gris de la ventana emergente de la cesta de compra 
   SOLUCIÓN FINAL: FONDO TOTAL GRIS PARA VENTANA EMERGENTE DE CESTA
   Versión para PrestaShop 8.2.3 - Sin tocar colores de letra (mantiene blanco)
   ========================================================================== */

/* 1. Forzamos el fondo gris en TODAS las capas de la ventana emergente */
#blockcart-modal .modal-content,
#blockcart-modal .modal-header,
#blockcart-modal .modal-body,
#blockcart-modal .modal-footer,
#blockcart-modal .cart-content {
    background-color: #4a4a4a !important; /* Gris Antracita */
    background: #4a4a4a !important;      /* Refuerzo visual */
    border: none !important;             /* Quitamos bordes que puedan verse blancos */
}

/* 2. Ajuste para que la separación entre las dos columnas no sea blanca */
#blockcart-modal .divide-right {
    border-right: 1px solid #666666 !important;
}

/* === FIN DEL BLOQUE - TU HISTÓRICO EMPIEZA AQUÍ ABAJO === */

/* ==========================================================================
   ARREGLO DEFINITIVO: FONDO GRIS EN EL RECUADRO DE TOTAL IMPUESTOS
   --------------------------------------------------------------------------
   ESTA PARTE CORRIGE: El recuadro blanco que aparece justo en la línea del
   "Total (impuestos inc.)" para que también sea gris como el resto.
   ========================================================================== */

/* 1. Cambiamos el fondo del recuadro del total que sale subrayado en tu foto */
#blockcart-modal .cart-content .product-total {
    background-color: #4a4a4a !important; /* Gris Antracita */
    background: #4a4a4a !important;
    color: #ffffff !important;           /* Aseguramos que el texto sea blanco */
    padding: 10px !important;            /* Un poco de espacio para que no esté pegado */
}

/* 2. Por si acaso, forzamos el color blanco en el texto de impuestos */
#blockcart-modal .product-total .label, 
#blockcart-modal .product-total .value {
    color: #ffffff !important;
}

/*  fin---  mikix es todo lo mismo para el fondo gris de la ventana emergente de la cesta de compra 

=== FIN DEL BLOQUE -== */


/* Ocultar el botón/enlace de añadir nueva dirección en el paso de direcciones del checkout */
p.add-address {
    display: none !important;
}