/*
 * #36 — Boton de busqueda del listado de cursos.
 *
 * WP Event Manager no trae ninguno, asi que el usuario escribia y no veia nada que pulsar.
 * Aqui van los estilos del boton que se añade en wp-event-manager/event-filters.php; el
 * comportamiento esta en js/ondevio-buscador-eventos.js.
 *
 * Es solo la lupa, cuadrado y al final de la fila: con texto se comia un tercio de la barra
 * de filtros y dejaba los dos campos de busqueda mas estrechos de lo que interesa.
 */

/*
 * La columna mide lo que el boton, no un tercio de la fila. `width: auto` es imprescindible:
 * .wpem-col trae `width: 100%`, y con flex-basis en auto la columna reclamaba la fila entera
 * y se iba a una segunda linea.
 */
.ondevio-col-buscar {
    flex: 0 0 auto;
    width: auto;
}

/*
 * Las demas columnas de la fila llevan etiqueta encima del campo; el boton no, asi que se
 * alinea abajo para que apoye en la misma linea que los inputs y no flote en la parte alta.
 */
.ondevio-col-buscar .wpem-form-group {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
}

.ondevio-btn-buscar {
    /* 42px es lo que mide el campo de texto de la barra: cuadrado y a su misma altura. */
    height: 42px;
    width: 42px;
    padding: 0;
    border: 1px solid var(--wpem-primary-color, #0096ff);
    border-radius: 4px;
    /* La variable la define WP Event Manager; el color de respaldo es su mismo valor. */
    background-color: var(--wpem-primary-color, #0096ff);
    color: var(--wpem-white-color, #ffffff);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.ondevio-btn-buscar:hover,
.ondevio-btn-buscar:focus {
    opacity: 0.85;
}

/*
 * En movil WP Event Manager apila las columnas a ancho completo, y la lupa se quedaba sola en
 * una tercera linea, flotando a la derecha. Aqui comparte linea con el selector de fechas: las
 * palabras clave ocupan la primera fila enteras, y debajo van las fechas y la lupa.
 */
@media (max-width: 767px) {
    .event_filters .ondevio-col-fechas {
        flex: 1 1 auto;
        width: auto;
    }

    .event_filters .ondevio-col-buscar {
        flex: 0 0 auto;
        width: auto;
    }

    .ondevio-col-buscar .wpem-form-group {
        height: auto;
    }
}

/*
 * ---------------------------------------------------------------------------------------
 * Desbordes de la propia barra de filtros. Son anteriores al boton, pero se ven en la misma
 * pantalla: los dos salen de mezclar `width: 100%` con padding sin `box-sizing: border-box`,
 * asi que el ancho declarado se queda corto por el padding y el borde.
 * ---------------------------------------------------------------------------------------
 */

/*
 * Cuando la fila se parte en varias lineas —en movil, y en cualquier ancho en que no quepan las
 * tres columnas— los campos quedaban pegados uno encima de otro, sin un solo pixel de por medio.
 * `row-gap` solo separa lineas, asi que no toca el hueco horizontal entre columnas.
 */
.event_filters .wpem-row {
    row-gap: 10px;
}

/*
 * La caja gris de "Busqueda terminada..." mide el 100% del formulario MAS 20px de padding, y
 * por eso "Restablecer | RSS" se salia por la derecha y aparecia cortado.
 */
.event_filters .showing_applied_filters {
    box-sizing: border-box;
}

/*
 * Lo mismo en los campos: el input pide el 100% de su columna y encima suma padding y borde,
 * asi que en movil se salia de la pantalla.
 */
.event_filters .wpem-col input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/*
 * El selector de fechas es un boton de jQuery UI y WP Event Manager le impone
 * `width: calc(100% - 35px) !important` y `height: 41px`, asi que salia mas estrecho y mas bajo
 * que el campo de palabras clave, con un hueco a la derecha sin explicacion. Se iguala a su
 * vecino: 42px es lo que WP Event Manager le da al input de texto. El !important no es un
 * capricho: es la unica forma de ganarle a otro !important.
 */
.event_filters .wpem-form-group .comiseo-daterangepicker-triggerbutton.ui-button {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    height: 42px;
}

/*
 * En movil las columnas van apiladas, asi que la canaleta de la rejilla (el margen negativo de
 * .wpem-row compensado con el padding de .wpem-col) no separa nada: solo saca la fila 15px por
 * cada lado del contenedor, que no tiene padding con que absorberlos.
 */
@media (max-width: 767px) {
    .event_filters .wpem-row {
        margin-left: 0;
        margin-right: 0;
    }

    /*
     * Un respiro a los lados, en vez de los 15px de canaleta o de pegar los campos al borde de
     * la pantalla. 10px es lo que ya separa del borde al boton de menu que va justo encima.
     */
    .event_filters .wpem-col {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* El hueco con las fechas lo pone ya el padding de su columna: aqui sobra. */
    .event_filters .ondevio-col-buscar {
        padding-left: 0;
    }
}