@charset "UTF-8";.cj-buscador {
position: absolute;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: flex-start;
flex-direction: column;
width: 100%;
max-width: 1000px;
height: calc(100% - 60px);
cursor: default;
z-index: 11;
visibility: hidden;
}
.grp-instrcc-cj-buscador {
position: -webkit-sticky !important;
position: sticky !important;
top: 20px;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: flex-start;
flex-direction: column;
gap: 10px;
width: calc(100% - 20px);
max-width: 700px;
background-color: var(--ng-30);
border-radius: var(--border-r-base);
border: 1.5px solid var(--bn-20);box-shadow:
0 0 0 1px rgba(53, 72, 91, .17),
0 2px 1px rgba(0, 0, 0, .11),
0 2px 2px rgba(0, 0, 0, .12),
0 5px 4px rgba(0, 0, 0, .13),
0 7px 7px rgba(0, 0, 0, .13),
0 10px 10px rgba(0, 0, 0, .14),
0 12px 12px rgba(0, 0, 0, .15);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
overflow: hidden;
visibility: visible;
margin: 5px 0px 0px 0px;
padding: 15px 10px 10px 10px;
}
.grp-input-buscador{
position: relative;
width: 100%;
overflow: hidden;
}
.cj-buscador h2{
font-family: var(--fuente-principal);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
font-weight: 300;
font-variation-settings: "wght" 500;
text-align: center;
color: var(--bn-100);
margin-bottom: 0px;
}
.inputs {
position: relative;
visibility: visible;
width: 100%;
height: 60px;
border-radius: var(--border-r-sm);
border: 1px solid var(--bn-20);
background-color: var(--bn-10);
padding: 0px 200px 0px 10px;
}
.inputs[type="text"] {
font-family: var(--fuente-secundaria);
text-rendering: optimizeLegibility;
text-align: left;
font-size: var(--font-size-base);
line-height: var(--line-height-xs);
font-weight: 300;
font-variation-settings: "wght" 500;
background-color: var(--ng-80);
}
input.inputs[type="text"]::placeholder {
color: var(--bn-70);
}
input.inputs[type="text"] {
font-family: var(--fuente-principal);
color: var(--bn-70);
}
.inputs:focus {
outline: none !important;
border: 1px solid var(--bn-20);
box-shadow: 0 0 7px var(--ng-20);
}
.inputs:-webkit-autofill,
.inputs:-webkit-autofill:focus {
transition: background-color 0s 600000s, color 0s 600000s !important;
}.grp-buscar-ver-todo{
position: absolute;
right: 5px;
top: 50%;
transform: translateX(0%) translateY(-50%);
width: auto;
height: 40px;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: flex-end;
flex-direction: row;
gap: 5px;box-shadow: -20px 0 30px var(--ng-100);
z-index: 2;
}.grp-clear-button{
position: relative;
width: auto;
height: 40px;
cursor: not-allowed;
}
.clear-button {display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
flex-direction: row;
position: relative;
width: auto;
height: 40px;
border-radius: var(--border-r-base);
opacity: 0.5;
pointer-events: none;
margin-right: 5px;
padding: 0px 10px 0px 10px;
}.inputs:not(:placeholder-shown) + .grp-buscar-ver-todo .grp-clear-button{
cursor: pointer;
}
.inputs:not(:placeholder-shown) + .grp-buscar-ver-todo .grp-clear-button .clear-button {
opacity: 1;
pointer-events: all;
}.clear-button p {
font-family: var(--fuente-principal);
text-rendering: optimizeLegibility;
text-align: left;
font-size: var(--font-size-sm);
line-height: var(--line-height-xxs);
font-weight: 300;
font-variation-settings: "wght" 500;
color: var(--bn-100);
white-space: nowrap;
margin-top: 1px;
}
.btn-buscar {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;position: relative;
width: 40px;
height: 40px;
border-radius: var(--border-r-base);
cursor: pointer;
cursor: pointer;
font-family: var(--fuente-principal);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
font-weight: 400;
font-variation-settings: "wght" 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--ng-100);
border: none;
padding: 4px 8px 2px 9px;
}.grp-sin-resultados {
display: none;
text-align: center;
font-family: var(--fuente-principal);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
font-weight: 300;
font-variation-settings: "wght" 500;
text-align: center;
color: var(--bn-100);
margin: 40px 0;
margin-bottom: 0px;
}.btn-buscar{
background-color: var(--am-80);
}
.btn-buscar:hover{
background-color: var(--am-100);
}.clear-button {
background-color: var(--bn-20);
}
.clear-button:hover {
background-color: var(--bn-20);
}
.inputs:not(:placeholder-shown) + .grp-buscar-ver-todo .grp-clear-button .clear-button {
background-color: var(--bn-20);
}
.inputs:not(:placeholder-shown) + .grp-buscar-ver-todo .grp-clear-button .clear-button:hover {
background-color: var(--bn-40);
}