/*===================================
            Google Fonts 
=====================================*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');


/*===================================
       Colores light / dark
=====================================*/


:root {
  --pa-body-font-size: 1em;
  --pa-body-font-weight: 400;
  --pa-body-line-height: 1.5714em;
  --pa-fuente-principal:'Plus Jakarta Sans', sans-serif, Arial, Helvetica;
  
  --pa-colordest: #D60B47;
  --pa-colordest-hover: #D60B47;
  --pa-colordest-active: #D60B47;

  --pa-color-pareja: #5cb85c;
  --pa-color-chica: #d46be7;
  --pa-color-chico: #6baee7;

  --pa-blanco:#fff;
  --pa-rojo:#EC0C4E;
    
  --pa-color-principal:#fff;
  --pa-color-principal-hover:#fff;
  --pa-color-principal-focus:#fff;
  
  --pa-fondoweb:#212122;
  --pa-fondomodal:#212122;
       
  --pa-linea: rgba(255,255,255,0.16);

  --pa-filter-colordest: brightness(0) saturate(100%) invert(19%) sepia(40%) saturate(5897%) hue-rotate(328deg) brightness(92%) contrast(111%);
  --pa-filter-rojo: brightness(0) saturate(100%) invert(21%) sepia(74%) saturate(7499%) hue-rotate(335deg) brightness(92%) contrast(100%);
  
  --pa-form-txt:#fff;
  --pa-form-color: #8D8D8D;
  --pa-form-fondo: transparent;
  --pa-form-borde: #DFE3E8;
  --pa-form-borde-hover:#8D8D8D;
  --pa-form-borde-active:#fff;
  --pa-form-txt-active:white;
  --pa-form-disabled:#c2c2c2;
  
  --pa-form-label-top: #8D8D8D;
  --pa-form-label-top-active: #000;
  
  --pa-form-color-light: #364a63;
  --pa-form-fondo-light:#e9ecef;
  --pa-form-borde-light: #d3d9df;
  
  --pa-form-color-disabled:#fff;
  --pa-form-fondo-disabled:#000;
  --pa-form-borde-disabled:#fff;
  --pa-form-boton:#88C025;
  --pa-form-boton-texto:#ffffff;
  --pa-form-boton-shadow: 0px 3px 6px #88C02566;
  
  --pa-form-color-radio:#ec0c4e;
}

/*===================================
            GENERALES
=====================================*/

a{text-decoration: none; color: #fff; outline:none;}
a:hover, a:focus {text-decoration: none; color: #fff; outline:none;}/*cambia color*/
footer, header, article, section, div, h1, h2, h3, h4, h5, p, form, input, textarea, img, span, td{margin:0; padding:0; background:transparent}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block; background:transparent;outline:none;padding-inline-start: 0px; padding-inline-end: 0px; margin-block-start: 0px; margin-block-end: 0px; margin:0;}
id, class, div, section {outline:none;}
h1,h2,h3,h4,h5,h6{font:inherit}
img{border:none;}
svg{overflow:hidden; vertical-align:middle}
svg {height: 100%; max-width: 100%;}
video {width:100%; height:auto; border:0;}
html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; /*scroll mov suave*/}
sup, sub{font-size: 0.75em;}
b,strong{font-weight:bold}
label {margin-bottom: .25rem !important; display: inline-block;}

ul {display: block; list-style-type: square; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 20px;}
ol {display: block; list-style-type: decimal; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 20px;}

ul.sin-estilo, ol.sin-estilo {padding-inline-start: 0px; list-style-type: none; margin-block-start: 0px; margin-block-end: 0px;}

acronym, abbr {text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; text-decoration-skip-ink: none;}

#dimensions {
    position: fixed;
    left: 10px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: 13px;
    color: #fff;
    padding: 5px 10px;
    z-index: 1000;
    line-height:1;
}

/*________Scrolltop_______*/

.scrolltop{position:fixed; color:white; bottom:20px; right:20px; display:none; background:var(--pa-colordest); z-index:100; padding:6px 15px 8px 13px;font-size:0.6875em;}
a.scrolltop, a:hover .scrolltop , a:focus .scrolltop {color:white;}


/*_________________selecciones___________________*/

/* webkit, opera, IE9 */
::selection { background:var(--pa-colordest);  color:#ffffff; text-shadow: none;}
/* mozilla firefox */
::-moz-selection { background:var(--pa-colordest); color:#ffffff; text-shadow: none}

/*________FLEX_______*/

.centradovertical{height:100%; display:flex; align-items: center; justify-content: center;}
.centradovertical.columna{flex-direction: column; align-items: start;}
.centradovertical.fila{flex-direction: row;}
.d-flex {display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important;}
.push {margin-left: auto; display: inline-flex;}
.center-flex{align-items: center !important; }/*centrado vertical*/

.flex-wrap {-ms-flex-wrap:wrap!important; flex-wrap:wrap!important}/*los contenidos los pone en bloque uno debajo de otro*/
.flex-fill { -ms-flex:1 1 auto!important; flex:1 1 auto!important}
.flex-row{-ms-flex-direction:row!important; flex-direction:row!important}
.flex-column{-ms-flex-direction:column!important; flex-direction:column!important}
.flex-row-reverse{-ms-flex-direction:row-reverse!important; flex-direction:row-reverse!important}
.flex-column-reverse{-ms-flex-direction:column-reverse!important; flex-direction:column-reverse!important}

.flex-grow-1 {flex-grow: 1!important;}

.d-inline-flex{display:-webkit-inline-box!important; display:-ms-inline-flexbox!important; display:inline-flex!important}

.flex-start-end {display: flex; justify-content: space-between;}/* distribuir items uniformemente. El primer item al inicio, el último al final */

.flex-izq{flex: 1; display: flex; justify-content: flex-start; align-items: center;}
.flex-izq img{align-items: center;}
.flex-center{flex: 1; display: flex; justify-content: center; align-items: center;}
.flex-der{flex: 1; display: flex; justify-content: flex-end; align-items: center;}

.align-self-auto{align-self: auto!important;}
.align-self-start{align-self: flex-start!important;}
.align-self-end{align-self: flex-end!important;}
.align-self-center{align-self: center!important;}
.align-self-baseline{align-self: baseline!important;}
.align-self-strech{align-self: stretch!important;}

.inline-icon{display: flex; align-items: center;}
.inline-icon i, .inline-icon img{padding:0rem 0.10rem;}

.align-start{-ms-flex-line-pack:start!important; align-content:flex-start!important}
.align-end{-ms-flex-line-pack:end!important; align-content:flex-end!important}
.align-center{-ms-flex-line-pack:center!important; align-content:center!important}
.align-between{-ms-flex-line-pack:justify!important; align-content:space-between!important}
.align-around{-ms-flex-line-pack:distribute!important; align-content:space-around!important}
.align-stretch{-ms-flex-line-pack:stretch!important; align-content:stretch!important}

.align-items-start {align-items: flex-start!important;}
.align-items-center {align-items: center!important;}
.align-items-end {align-items: flex-end!important;}
.align-items-stretch {align-items: stretch!important;}

.justify-start{-ms-flex-pack:start!important; justify-content:flex-start!important}
.justify-end{-ms-flex-pack:end!important; justify-content:flex-end!important}
.justify-center{-ms-flex-pack:center!important; justify-content:center!important}
.justify-between{-ms-flex-pack:justify!important; justify-content:space-between!important}
.justify-around{-ms-flex-pack:distribute!important; justify-content:space-around!important}
.justify-stretch{-ms-flex-pack:justify !important; justify-content:stretch!important}


/*===================================
                CUSTOM
=====================================*/

body {
  min-height:100%;
  height:100%;
}

.bold{font-weight:700;}
.semibold{font-weight:600;}

.mr{margin-right:0.5rem!important}
.ml{margin-left:0.5rem!important}
.mt{margin-top:1.2rem!important}
.mb{margin-bottom:1.2rem!important}
.mtb{margin:0.5rem 0px !important;}

.mb-s-size{
	margin-bottom:0.5rem!important
}

.ml-l-size{margin-left:2rem!important}
.mr-l-size{margin-right: 2rem!important;}

.sombra {box-shadow: 1px 1px 9px -2px rgb(0 0 0 / 58%); -webkit-box-shadow: 1px 1px 9px -2px rgb(0 0 0 / 58%); -moz-box-shadow: 1px 1px 9px -2px rgb(0 0 0 / 58%);}
.sombra-texto {text-shadow: 0px 1px 2px #00000052;}

.d-none{display:none !important;}

.svg-colordest{filter:var(--pa-filter-colordest);}
.svg-rojo{filter:var(--pa-filter-rojo);}

/*===================================
              LISTADO 
=====================================*/

.contenedor-info{position: fixed; margin-top: 0px; inset: 0px; z-index: 10; display: flex; flex-direction: column; align-items: ; justify-content: center; height: 100%; width: 40%;}
.contenedor-usuarios{position: fixed; margin-top: 0px; inset: 0px; z-index: 10; display: flex; flex-direction: column; height: 100%; margin-left:40%; width: 60%; overflow:auto}

@media (max-width: 991px) {
  .contenedor-info{display:block ;width:100%; position: relative; position: sticky; z-index: 20; background: var(--pa-fondoweb);}
  .contenedor-usuarios{width:100%; margin-left:0%; position: relative}
}

.listado-usuarios {width: 100%; display: flex; flex-wrap: wrap; box-sizing: border-box; position:relative; /*flex-flow: row wrap; justify-content: stretch;*/}

.zona-usuario{padding:1px; position:relative; cursor:pointer;}
.zona-usuario {box-shadow: inset 0 -25px 22px -6px #000000}
.zona-usuario img{position: relative; z-index: -2;}

@media (min-width: 200px) and (max-width: 699px){.listado-usuarios .zona-usuario, .listado-usuarios .banner-1col, .listado-usuarios.enlinea .zona-usuario{flex-basis: calc(100% / 3);}}
@media (min-width: 700px){.listado-usuarios .zona-usuario, .listado-usuarios .banner-1col, .listado-usuarios.enlinea .zona-usuario{flex-basis: calc(100% / 4);}}
@media (min-width: 740px){.listado-usuarios .zona-usuario, .listado-usuarios .banner-1col, .listado-usuarios.enlinea .zona-usuario{flex-basis: calc(100% / 4);}}
@media (min-width: 920px){.listado-usuarios .zona-usuario, .listado-usuarios .banner-1col, .listado-usuarios.enlinea .zona-usuario{flex-basis: calc(100% / 4);}}
@media (min-width: 1024px){.listado-usuarios .zona-usuario, .listado-usuarios .banner-1col, .listado-usuarios.enlinea .zona-usuario{flex-basis: calc(100% / 4);}}
@media (min-width: 1400px){.listado-usuarios .zona-usuario, .listado-usuarios .banner-1col, .listado-usuarios.enlinea .zona-usuario{flex-basis: calc(100% / 5);}}
@media (min-width: 1920px){.listado-usuarios .zona-usuario, .listado-usuarios .banner-1col, .listado-usuarios.enlinea .zona-usuario{flex-basis: calc(100% / 6);}}
@media (min-width: 2100px){.listado-usuarios .zona-usuario, .listado-usuarios .banner-1col, .listado-usuarios.enlinea .zona-usuario{flex-basis: calc(100% / 6);}}
@media (min-width: 2900px){.listado-usuarios .zona-usuario, .listado-usuarios .banner-1col, .listado-usuarios.enlinea .zona-usuario{flex-basis: calc(100% / 12);}}

/*===================================
                BOTONES 
=====================================*/

.sombra-zona-boton{box-shadow: inset 0 -35px 20px -19px #000000;}

.boton.height{height: 40px; padding: 11px 15px;}

.boton.verde {background-color: #88C025; color: #fff; font-weight:600;box-shadow: 0px 3px 6px #88C02566;}
.boton.verde:hover, .boton.verde.active{background-color:#88C025; color: #fff;}
.boton.verde.bordered, .boton.verde.bordered:hover, .boton.verde.bordered.active {border:1px solid #88C025; color: #88C025; background:transparent}

/*===================================
            COMPONENTES
=====================================*/

.zona-tablet-movil{display: none}
.zona-contenidos{width:330px; margin:0 auto;}
.zona-contenido-usuario-movil{width: 100%; overflow:hidden; margin:0 auto; max-width: 500px;}
.info-usuario{padding:15px}
.zona-foto{width:100%; height: 243px; overflow: hidden; position: relative; border:1px solid #fff; margin-bottom:16px;}
.zona-foto.s-size{height:93px; width: 93px;position: inherit;}
.txt-truncate, .elipsis{right:5px}
.txtuser{font-size:0.625em;}
.distancia{background: black; padding:3px 5px; font-size:0.625em; line-height: 1; height:16px}
.logotipo{width:136px;}
.zona-logo{height:56px;}
.zona-filtros{display: flex; align-items: center; gap: 5px;}
.boton-filtros {display: inline-block; padding: 3px 10px; height:32px; background-color: transparent; border:1px solid #D60B47; color: white; font-size:0.625em; border-radius: 16px; white-space: nowrap;}
.boton-filtros:hover {background-color: transparent;}
.boton-filtros:active {background-color: transparent;}
.abajo-fixed{position: fixed; bottom:0; z-index: 20; padding: 10px 15px; width: 100%;}


@media (max-width: 991px) {
  .zona-logo{padding:5px 15px; display: flex; align-items: center;}
  .zona-filtros{background:#000000; height:56px; padding:5px 15px;}
  .zona-contenidos{width:100%;}
  .zona-tablet-movil{display: inherit;}
  .zona-escritorio{display: none; visibility: hidden;}
}

/*===================================
            FORMULARIOS 
=====================================*/

.formulario, .formulario:disabled, select:disabled, .formulario.disabled, .formulario.ko, .formulario.ok, .formulario:hover{border-top:0px; border-right:0px; border-left:0px; background-color:transparent; height:40px; font-size: 0.875em;
    padding: 8px;}

input#name-promo::placeholder {color: var(--lf-form-color)!important;}

.label-absolute-top {background: black; top: 0px; color:var(--lf-form-color);}
.formulario:disabled, select:disabled, .formulario.disabled {color: inherit}
.label-absolute-top.ko, .label-absolute-bottom.ko {background: transparent; padding: 1px;}

.checkmark-check{border-radius:0px;}
.container-check input:checked ~ .checkmark-check {background-color: #1579FB; border-color:#1579FB}

select option{background-color: var(--pa-fondoweb); padding: 10px 15px;}
select option:hover {background-color: var(--pa-colordest); color:var(--pa-blanco);}
select:invalid {color: var(--pa-form-color);}

.zona-checkbox{display:flex; font-size:0.6875em; color:white; line-height: 140%;align-items: center; gap:10px;position: relative;}
input[type=checkbox] { cursor: pointer;width: 15px; top: -5px;}
input[type=checkbox]:before {content: ""; display: block; position: absolute; width: 16px; height: 16px; top: 0; left: 0; background: #fff; border: 1px solid #fff;}
input[type=checkbox]:checked:before {content: ""; display: block; position: absolute; width: 16px; height: 16px; top: 0; left: 0; background-color:#1579FB; border-color:#1579FB}
input[type=checkbox]:checked:after {content: ""; display: block; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 2px; left: 6px;}

.select-estilo select.formulario {padding-right: 15px;background-position: center right 5px;}

::-ms-reveal {filter: invert(100%);}/*cambia el color del ojo en los inputs type password sólo en Microsoft*/

/*==============================
              TEXTOS
==============================*/

.sombra-texto{text-shadow: 0px 8px 15px #ffffffB3;}

.colordest {color:var(--pa-colordest)!important;}
.verde, .color-pareja {color:var(--pa-color-pareja)}
.rosa, .color-chica {color:var(--pa-color-chica);}
.azul, .color-chico {color:var(--pa-color-chico);}
.rojo {color:var(--pa-rojo);}

.titbig{font-size:2.125em; color:#fff; font-weight:700; margin:20px 0px; line-height:140%}
.titmed{font-size: 18px;color:#fff; font-weight: 700; margin:10px 0px 20px 0px; line-height:120%}

.txtmin{font-size: 0.875em; color: var(--pa-color-principal); line-height: 140%; text-decoration: none;}
.txtmin a, .txtmin a:hover, .txtmin a:focus {color: var(--pa-color-principal);}
.txtmin.s-size{font-size:0.8125em;}
.txtmin.xs-size{font-size:0.6875em;}

/*==============================
              MODALES
==============================*/

.linea-o span {background-color: #181818; color:white;}
.contenido-modal {background-color: #181818; border-radius:8px; border: 1px solid #535353;}
.contenido-modal.sombra{box-shadow: 0 5px 24px 3px rgb(255 255 255 / 60%);}
.cerrar-modal a{color:white;}
.body-modal {background: var(--fa-fondomodal); color:var(--fa-modal-txt); padding: 1.5rem 2rem;}
.header-modal{background-color:inherit; border-bottom: 1px solid #3c3c46;}
.contenido-modal .header-modal img {max-width: 184px;}
.contenido-modal .title{color:var(--fa-blanco);}

.footer-modal, .bottom-modal {background:var(--fa-fondomodal); color:var(--fa-modal-txt); border-top: 1px solid #3c3c46;}