/* Aumentar tamaño máximo del logo */
#header .header-top .logo {
    max-height: 80px; /* Cambia 100px por el tamaño que quieras */
    width: auto;
}

/* Opcional: Si el logo es muy ancho, dale más espacio a la columna */
#header .col-md-2.hidden-sm-down {
    width: auto;
    max-width: 30%; /* Permite que ocupe más espacio a lo ancho */
}

/* ===================================================== */
/* NUEVO: EXPANDIR BUSCADOR (VERSIÓN CORREGIDA)         */
/* ===================================================== */

/* 1. El contenedor principal de la derecha (Buscador + Login) */
#header .header-top .col-md-10.hidden-sm-down,
.header-top-right {
    display: flex !important;      /* Activamos Flexbox */
    align-items: center;
    flex-grow: 1;                  /* Ocupa todo el espacio libre */
    width: auto !important;        /* Quitamos límites de columna */
    position: static;
}

/* 2. El widget de búsqueda (la caja que envuelve el input) */
#search_widget {
    flex-grow: 1 !important;       /* ESTE es el comando clave: Estirate! */
    width: 100% !important;        /* Ocupa todo el ancho disponible */
    max-width: none !important;    /* Elimina límites del tema */
    margin-right: 20px;            /* Sepárate un poco del carrito */
    float: none !important;        /* Quitamos la flotación nativa */
}

/* 3. El formulario dentro del widget */
#search_widget form {
    display: flex;                 /* Acomoda input y lupa */
    width: 100% !important;        /* Ancho total */
}

/* 4. EL INPUT REAL (donde escribes) */
#search_widget form input[type=text] {
    width: 100% !important;        /* Ocupa todo el espacio del formulario */
    min-width: 0 !important;       /* Resetea mínimos */
    max-width: none !important;    /* Resetea máximos */
}

/* ===================================================== */
/* REGLAS PARA CELULARES (Pantallas menores a 768px)    */
/* ===================================================== */
@media (max-width: 767px) {

    /* 1. OBLIGAR a la barra superior a crecer */
    #header .header-nav {
        max-height: none !important; 
        height: auto !important;     
        padding-bottom: 15px;
        overflow: visible !important;
    }

    /* 2. CONTENEDOR DEL LOGO: Centrado perfecto */
    #header .header-nav .top-logo {
        float: none;
        width: 100%;
        margin-top: 10px;
        /* Truco para centrar ignorando rellenos viejos */
        display: flex; 
        justify-content: center; 
        align-items: center;
        padding: 0 !important; /* Quitamos el relleno invisible izquierdo */
    }

    /* 3. El enlace dentro del logo también sin margenes extra */
    #header .header-nav .top-logo a {
        display: block;
        line-height: 0; /* Evita espacios fantasma abajo de la imagen */
    }

    /* 4. Tamaño del logo */
    #header .header-nav .top-logo img {
        max-height: 100px; /* Tu tamaño deseado */
        width: auto;
        margin: 0; /* Aseguramos que la imagen no tenga margen propio */
    }

    /* 5. Iconos (menú y carrito) separados */
    #header .header-nav .right-nav,
    #header .header-nav .hidden-sm-down {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
    }
    
    /* 6. Buscador abajo */
    #header .header-top {
        margin-top: 10px;
    }
}

/* 1. Forzar al contenedor del slider a respetar los limites */
#carousel, 
.carousel-inner, 
.carousel-item {
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Esto corta cualquier cosa que intente salirse */
}

/* 2. Hacer que la imagen sea elastica: siempre 100% del ancho disponible */
#carousel .carousel-item img {
    width: 100% !important;   /* Ocupar todo el ancho del hueco */
    min-width: 100% !important; /* Asegurar que no se quede chica en pantallas gigantes */
    height: auto !important;  /* Mantener la proporcion correcta */
    display: block;
}

/* ===================================================== */
/* LÓGICA DE MENÚS HÍBRIDA (PC vs CELULAR)              */
/* ===================================================== */

/* 1. EN PC (Pantallas grandes): Ocultar la barra de menú horizontal */
@media (min-width: 768px) {
    .top-menu {
        display: none !important;
    }
}

/* 2. EN CELULAR (Pantallas chicas): Ocultar la columna de categorías del inicio */
@media (max-width: 767px) {
    #left-column {
        display: none !important;
    }
}


/* Correccion TOTAL para Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    
    /* 1. Forzar a la columna del contenido (#content) a no desbordarse */
    #content-wrapper, 
    #main, 
    #content {
        overflow: hidden !important; /* CORTA cualquier cosa que salga de la caja */
        width: 100% !important;      /* Asegura que ocupe el ancho disponible */
        display: block !important;
        position: relative !important;
    }

    /* 2. Resetear el contenedor del Slider (#carousel) */
    /* Esto anula márgenes negativos que lo empujan a la izquierda */
    #carousel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;       /* Cero margen a los lados */
        padding: 0 !important;
        left: auto !important;      /* Anula posiciones absolutas */
        right: auto !important;
        transform: none !important; /* Anula movimientos CSS */
    }

    /* 3. Ajustar la imagen interna */
    #carousel .carousel-item,
    #carousel .carousel-item img,
    #carousel .carousel-item a {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

@media (max-width: 767px) {
  /* 1. Forzar al contenedor principal del carrusel a ocupar todo el ancho */
  #carousel, 
  .carousel, 
  .homeslider-container,
  #homepage-slider {
      width: 100vw !important; /* 100vw significa el 100% del ancho de la ventana */
      max-width: 100vw !important;
      margin-left: calc(-50vw + 50%) !important; /* Truco para centrar elementos full-width */
      margin-right: calc(-50vw + 50%) !important;
      padding: 0 !important;
      left: 0 !important;
      right: 0 !important;
      overflow: hidden; /* Evita que aparezca scroll horizontal */
  }

  /* 2. Eliminar los márgenes negativos de las filas internas (causa común en PrestaShop) */
  #carousel .row, 
  .homeslider-container .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
      width: 100% !important;
      padding: 0 !important;
  }

  /* 3. Forzar a la IMAGEN a estirarse al 100% */
  #carousel img, 
  .carousel img, 
  .homeslider-container img {
      width: 100% !important;
      min-width: 100% !important; /* Obliga a la imagen a no ser más chica que la pantalla */
      height: auto !important;
      display: block !important;
      margin: 0 auto !important; /* Centra la imagen si sobra espacio */
  }
  
  /* 4. Asegurar que las columnas contenedoras no tengan relleno */
  #carousel .col-xs-12, 
  #carousel .col-12 {
      padding-left: 0 !important;
      padding-right: 0 !important;
  }
}

/* Ocultar selector de moneda y lenguaje SOLO para el grupo restringido */
body.grupo-moneda-bloqueada #_desktop_currency_selector,
body.grupo-moneda-bloqueada .currency-selector {
    display: none !important;
}

/* Opcional: Si en móvil se ve diferente, agrega esto también */
body.grupo-moneda-bloqueada #_mobile_currency_selector {
    display: none !important;
}

/* 1. Aseguramos que el bloque general sea visible (para ver los vouchers) */
body.grupo-moneda-bloqueada .block-promo {
    display: block !important;
}

/* 2. Ocultamos SOLO el formulario (el input y el botón 'Añadir') */
body.grupo-moneda-bloqueada .block-promo form {
    display: none !important;
}

/* 3. Ocultamos el enlace/botón que dice '¿Tiene un código promocional?' o 'Cerrar' */
body.grupo-moneda-bloqueada .promo-code-button {
    display: none !important;
}

/* 4. Forzamos a que el contenido desplegable esté siempre abierto 
   (necesario porque ocultamos el botón de abrir/cerrar en el paso 3) */
body.grupo-moneda-bloqueada #promo-code,
body.grupo-moneda-bloqueada .promo-code {
    display: block !important;
}





.header-presupuesto-voucher {
    display: inline-block;
    background-color: #2fb5d2; /* Color azulito de tu marca */
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    margin-left: 10px;
    font-size: 13px;
    font-weight: bold;
    vertical-align: middle;
}

.header-presupuesto-voucher i {
    font-size: 16px;
    vertical-align: sub;
    margin-right: 4px;
}

/* En movil, que se vea bien */
@media (max-width: 767px) {
    .header-presupuesto-voucher {
        display: block;
        margin: 5px 0;
        text-align: center;
    }
}

/* ===================================================== */
/* BOTÓN FLOTANTE PARA VOUCHER (Floating Widget)        */
/* ===================================================== */
.voucher-flotante {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    background-color: #2fb5d2;
    color: white;
    padding: 18px 22px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 200px;
}

.voucher-flotante:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.voucher-flotante-contenido {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voucher-flotante-linea-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: bold;
}

.voucher-flotante-linea-saldo {
    font-size: 12px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    padding-left: 34px; /* Alineado con el texto después del icono */
    min-height: 18px; /* Evita que el widget cambie de tamaño */
}

/* Estado de carga */
.voucher-flotante-linea-saldo .voucher-loading {
    font-style: italic;
    opacity: 0.8;
}

/* Alerta cuando se excede el límite por más de 200 puntos */
.voucher-flotante-linea-saldo.voucher-alert-excedido {
    color: #ffffff !important;
    font-weight: bold;
    animation: voucher-alert-pulse 1.5s ease-in-out infinite;
}

/* Estado de error: Widget completo con fondo rojo */
.voucher-flotante.voucher-widget-error {
    background-color: #e04f5f !important;
    animation: voucher-widget-shake 0.5s ease-in-out;
    box-shadow: 0 4px 12px rgba(224, 79, 95, 0.5);
}

.voucher-flotante.voucher-widget-error:hover {
    box-shadow: 0 6px 16px rgba(224, 79, 95, 0.6);
}

@keyframes voucher-alert-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes voucher-widget-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(3px);
    }
}

.voucher-flotante .material-icons {
    font-size: 24px;
    vertical-align: middle;
    flex-shrink: 0;
}

.voucher-flotante-texto {
    white-space: nowrap;
}

/* Ajustes para móviles */
@media (max-width: 767px) {
    .voucher-flotante {
        bottom: 20px;
        right: 20px;
        left: auto; /* Asegura que esté a la derecha */
        padding: 12px 16px;
        min-width: 160px;
        max-width: calc(100vw - 40px); /* No se salga de la pantalla */
        font-size: 12px;
    }
    
    .voucher-flotante-linea-titulo {
        font-size: 12px;
        gap: 8px;
    }
    
    .voucher-flotante-linea-saldo {
        font-size: 11px;
        padding-left: 28px;
        line-height: 1.3;
    }
    
    .voucher-flotante .material-icons {
        font-size: 20px;
    }
    
    .voucher-flotante-contenido {
        gap: 6px;
    }
}

/* Ajustes para pantallas muy pequeñas (menos de 360px) */
@media (max-width: 360px) {
    .voucher-flotante {
        bottom: 15px;
        right: 15px;
        padding: 10px 14px;
        min-width: 140px;
        font-size: 11px;
    }
    
    .voucher-flotante-linea-titulo {
        font-size: 11px;
    }
    
    .voucher-flotante-linea-saldo {
        font-size: 10px;
        padding-left: 26px;
    }
    
    .voucher-flotante .material-icons {
        font-size: 18px;
    }
}