/* --- MENÚ DE FILTROS "OFF-CANVAS" (MÓVIL) --- */
@media (max-width: 768px) {

    /* 1. ROMPER LA JAULA: Anulamos las reglas de tkmestilos.css que atrapan al menú */
    .wrapper {
        perspective: none !important;
        transform: none !important;
        display: block !important; /* Quitamos el flex para que no afecte al layout móvil */
    }

    /* 2. Estilo del Menú Flotante */
    #sidebar {
        position: fixed !important;
        top: 0;
        left: -320px; /* Lo alejamos un poco más para asegurar que no se ve sombra */
        height: 100vh !important;
        width: 290px !important; /* Un poco más ancho para que quepa todo bien */
        z-index: 99999 !important;
        background: #fff !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto;
        box-shadow: 4px 0 15px rgba(0,0,0,0.15);
        display: block !important;

        /* ESTILOS DE ESPACIADO NUEVOS */
        padding: 25px 20px !important; /* 25px arriba/abajo, 20px izquierda/derecha */
        box-sizing: border-box !important; /* Vital: para que el padding no ensanche la caja */

        /* Reset de transformaciones antiguas */
        transform: none !important;
        margin-left: 0 !important;

        /* Asegurar color de texto */
        color: #333 !important;
    }

    /* Estado Activo: Entra en pantalla */
    #sidebar.active {
        left: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
    }

    /* 3. Estilo del Fondo Oscuro (Overlay) */
    #sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
        z-index: 99990 !important; /* Justo debajo del sidebar */
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #sidebar-overlay.active {
        display: block;
        opacity: 1;
    }

    body.no-scroll {
        overflow: hidden !important;
    }
}

/* --- CORRECCIÓN BUSCADOR CABECERA --- */
.search_box {
    position: relative; /* Asegura que el 'after' se posicione respecto a la caja */
}

.search_box:after {
    top: 0 !important; /* Quitamos el desplazamiento de 7px que lo rompía */
    height: 35px !important; /* Misma altura que el input (según main.css) */
    line-height: 35px !important; /* Centramos el icono verticalmente */
    right: 0 !important;
    width: 40px !important; /* Ancho fijo para el cuadro naranja */
    border-radius: 0 4px 4px 0; /* Opcional: redondear esquinas derechas si el input lo tiene */
}

.search_box input[type="text"] {
    height: 35px !important; /* Aseguramos altura consistente */
    border-radius: 4px !important; /* Modernizamos un poco el borde */
}

.searchSubmit {
    height: 35px !important;
    width: 40px !important;
}

/* Pantallas de escritorio y tablets (mayor a 768px) */
@media (min-width: 768px) {
    .divBanner {
        /* 1. Define una altura fija que se vea bien con tu imagen más alta */
        min-height: 430px;

        /* 2. Activa Flexbox para centrar el contenido verticalmente */
        display: flex;
        align-items: center;

        /* 3. Asegura que la imagen de fondo cubra todo siempre */
        background-position: center center !important;
    }

    /* Aseguramos que el contenedor interno ocupe el ancho correcto */
    /*.divBanner .container {*/
    /*    width: 100%;*/
    /*}*/
}


/*    este bloque pinta lineas de todos los elementos es para depurar contenedores y cuando la página se descuadra */
/** {*/
/*    outline: 1px solid red;*/
/*}*/