@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500..700;1,500..700&display=swap');

* {
    --verde-suave1: #6acab9;
    --verde-suave2: #71dcc8;
    --verde-fuerte1: #00aea9;
    --verde-fuerte2: #00c3bf;
    --rojo1: #ff8188;
    --rojo2: #ff8a92;
    --gris-suave1: #c7c7c7;
    --gris-suave2: #d7d7d7;
    --gris-fuerte1: #55555b;
    --gris-fuerte2: #67676d;
    --casi-blanco: #eee;
    --blanco: white;
    --negro: black;
    --bs-pagination-active-bg: var(--verde-fuerte1) !important;
    --bs-pagination-active-border-color: var(--verde-fuerte1) !important;
    --bs-pagination-active-color: var(--blanco) !important;
    --bs-link-color: var(--verde-fuerte1) !important;
    --bs-link-hover-color: var(--verde-fuerte2) !important;

    --altura-minima-explicacion: 20rem;

    font-size: 16px;
}

body {
    padding-top: 50px;
    font-family: 'Montserrat', sans-serif;
    background: #fff url("../img/fondo-pf-elky.jpg") top left no-repeat;
}

h1 {
    font-size: 1.4rem;
    font-weight: bold;
    background-color: var(--verde-fuerte1);
    color: white;
    padding: 10px 15px;
    border-radius: 12px;
    display: inline-block;
}

h2 {
    font-size: 1.2rem;
    font-weight: bold;
}

.input-group-text {
    width: 15%;
    min-width: 170px;
}

.verde {
    color: var(--rojo1);
}

.boton-verde, .boton-verde:visited {
    color: var(--casi-blanco);
    background-color: var(--verde-fuerte1);
    border: none;
    text-transform: uppercase;
    font-weight: bold;
}

.boton-verde:hover, .boton-verde:active {
    color: var(--blanco);
    background-color: var(--verde-fuerte2);
}

.boton-rojo, .boton-rojo:visited,
#buscador_recursos_enviar, #buscador_recursos_enviar:visited {
    color: var(--gris-fuerte1);
    background-color: color-mix(in srgb, var(--rojo2) 80%, transparent);
    border: none;
    text-transform: uppercase;
    font-weight: bold;
}

.boton-rojo:hover, .boton-rojo:active,
#buscador_recursos_enviar:hover, #buscador_recursos_enviar:active {
    color: white;
    background-color: var(--rojo1);
}

.boton-blanco, .boton-blanco:visited {
    color: var(--gris-fuerte1);
    /*background-color: white;*/
    background-color: color-mix(in srgb, white 70%, transparent);
    border: 1px solid var(--gris-fuerte1);
    text-transform: uppercase;
    font-weight: bold;
}

.boton-blanco:hover, .boton-blanco:active {
    color: var(--negro);
    background-color: color-mix(in srgb, white 40%, transparent);
    border: 1px solid var(--negro);
}

.boton-buscador, .boton-buscador:visited {
    margin: 20px auto;
    border: none;
    box-shadow: 5px 5px 10px var(--gris-fuerte1);
}

.boton-buscador:hover, .boton-buscador:active {
    box-shadow: 10px 10px 15px var(--gris-fuerte1);
}

.boton-buscador-izq, .boton-buscador-izq:visited {
    display: flex;
    align-items: center;
    width: 50px;
    max-width: 75px;
    padding: 20px;
    background-color: var(--negro);
    color: var(--casi-blanco);
}

.boton-buscador-izq:hover, .boton-buscador-izq:active {
    background-color: var(--negro);
    color: var(--blanco);
}

.boton-buscador-der, .boton-buscador-der:visited {
    display: block;
    width: 50%;
    min-width: 300px;
    padding: 20px;
    font-size: 1.4em;
    text-transform: uppercase;
    font-weight: bold;
    background-color: var(--rojo1);
    color: var(--casi-blanco);
    text-align: center;
}

.boton-buscador-der:hover, .boton-buscador-der:active {
    color: var(--blanco);
    background-color: var(--rojo2);
}

.fondo-tabla {
    background-color: rgba(255, 255, 255, 0.8) !important;"
}

.fondo-tabla a, .fondo-tabla a:visited {
    color: var(--negro);
    font-weight: bold;
    text-decoration: none;
}

.fondo-tabla a:hover, .fondo-tabla a:active {
    text-decoration: underline;
}

.contenido {
    max-width: 800px;
}

.banner-recursos {
    height: 300px;
}

.actualizado {
    font-size: 0.8rem;
    font-style: italic;
    color: #999999;
}

.pie {
    display: flex;
    align-items: start;
    font-size: 1.2rem;
    font-weight: bold;
}

.pie img {
    margin-left: 20px;
}

/* Paginador */
.page-item {
    color: var(--verde-fuerte1) !important;
    background-color: var(--blanco) !important;
}

.page-item.active {
    color: var(--blanco) !important;
    background-color: var(--verde-fuerte1) !important;
}

textarea#consulta_Motivo {
    height: 300px;
}