/* ============================================== Variables ======================================== */
header {
    --white: rgba(255, 255, 255, 1);
    --white-dark: rgba(245, 245, 245, 1);
    --grey: rgba(83, 80, 80, 1);
    --grey-dark: rgba(171, 160, 160, 1);
    --blue: rgba(142, 192, 224, 1);
    --blue-dark: rgba(0, 66, 133, 1);
}

/* ============================================== Header =========================================== */
header {
    background-color: var(--white-dark);
    text-align: center;
    padding: 4px 8px;
    font-size: 1.2em;
    padding-bottom: 1rem;
}


.skip-to-content-link {
    background: var(--black-color);
    color: var(--blue-dark)!important;
    left: 45%;
    top: -3px;
    padding: 0.25em 0.55em;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
    outline: 2px dotted var(--blue-dark);
    /* outline-offset: 0.188em; */
    transition: outline-offset 0.15s linear;
    z-index: 2;
}

.skip-to-content-link:focus {
     transform: translateY(0%);
}

/* Zona Izquierda */
header>div>div:nth-of-type(1) {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

/* Zona Derecha */
header>div:nth-of-type(2)>div:nth-of-type(1) {
    font-size: 1.6rem;
    color: var(--blue-dark);
}

/* Idiomas*/
#madMultiidioma {
    display: inline-flex;
    height: 35px;
    margin: 1rem 0rem;
}
#madMultiidioma select {
    cursor: pointer;
    padding-left: 0.5rem;
    font-size: 1rem;
    border-radius: 25px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 1px solid var(--grey-dark);
    border-right: 0;
    min-width: 190px;
}
#madMultiidioma input[type="image"] {
    padding: 3px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border: 1px solid var(--grey-dark);
    border-left: 0;
    width: 2em;
    object-fit: contain;
    background: var(--white);
}

/* Buscador*/
#searchInputBox {
    float: none;
    display: inline-flex;
    height: 35px;
    margin-bottom: 0;
    /* max-width: 93px; */
}
#searchInputBox input[type="text"] {
    cursor: pointer;
    padding-left: 0.5rem;
    font-size: 1rem;
    border-radius: 25px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 1px solid var(--grey-dark);
    border-right: 0;
}
#searchInputBox input[type="text"]::placeholder {
    color: var(--grey);
    opacity: 1;
}
#searchInputBox input[type="image"] {
    padding: 0px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border: 1px solid var(--grey-dark);
    border-left: 0;
    width: 2em;
    object-fit: contain;
    background: var(--white);
}

/* Estados*/
#madMultiidioma select:hover,
#madMultiidioma select:active,
#madMultiidioma select:focus,

#madMultiidioma input[type="image"]:hover,
#madMultiidioma input[type="image"]:active,
#madMultiidioma input[type="image"]:focus,

#searchInputBox input[type="text"]:hover,
#searchInputBox input[type="text"]:active,
#searchInputBox input[type="text"]:focus,

#searchInputBox input[type="image"]:hover,
#searchInputBox input[type="image"]:active,
#searchInputBox input[type="image"]:focus {
    outline: 2px dotted var(--blue-dark);
    transition: outline-offset 0.15s linear;
    z-index: 2;
}
#searchInputBox select:hover,
#searchInputBox select:focus,
#searchInputBox select:focus-visible {
    outline-offset: 2px!important;
}

select:hover,
select:focus,
select:focus-visible{
    outline-offset: 2px!important;
}

/* ============================================== RWD ======================================== */
@media only screen and (min-width: 992px) {
    header {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 12px 10px 6px 10px;
        align-items: initial;
    }
    /* Zona Izquierda */
    header>div>div:nth-of-type(1) {
    justify-content: left;
    }
    /* Zona Izquierda */
    header>div:nth-of-type(1) {
        justify-content: left;
    }
    /* Zona Derecha */
    header>div:nth-of-type(2) {
        display: flex;
        flex-direction: column;
        align-items: end;
        margin-bottom: 0.25rem;
        justify-content: space-between;
    }
    #madMultiidioma {
    margin: 0rem 0rem;
    }
}