/* ==========================*/
/* FONDO Y CUERPO DEL CARD */
/* ==========================*/
body {
    font-family: "Roboto", sans-serif;
    background: #F0F0F0;
    font-weight: 300;

    display: flex;
    flex-direction: column;   /* eje vertical */
    align-items: center;      /* centra horizontal (reemplaza justify-content) */
    min-height: 100vh;
    padding: 0em 0em;
}
.cont-gridSimiF{
    position: relative;
    display: flex;
    min-height: 100vh;
    width: 100%;
}



.fondcardSimifest{
    position: relative;
    width: 100%;
    padding: 2em 3em;
    background-image:
    url('../images/destellos2.png'),
    var(--gradienteFondo); 

    display: flex;              /* ← nuevo */
    flex-direction: column; 

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;


}

.cont-pie-simif{
    position: absolute;
    bottom: 0;
    height: 8em;
    right: 0;
    left: 0;
    width: 100%;
}

p.der-reser {
    position: relative;

    text-align: center;
    margin-top: auto;   /* empuja este elemento al fondo */
    color: var(--backcodigo);
    font-size: .8em;
    font-family: 'gottamMedium', sans-serif;
    position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    margin: 0;
    
}




.cardSimiFest {
    position: relative;
    padding-top: 2em;

    width: 80%;
    margin: 0 auto 7em;
    max-width: 100%;
    align-self: center;
    align-items: center;
    border-radius: 20px;
}


.bord-g{
margin-top: 1em;
border: 1.2px solid black;
border-radius: 20px;
padding: 20px 30px;

}

.a-b-contInicio.is-disabled { pointer-events: none; opacity: .6; }

img.img-apoyo{
    width: 11em;
    right: -3em;
    top: 14em;
    position: absolute;
    animation:
        materializar-alien 1.4s ease-out forwards,
        flotar-alien 4s ease-in-out 1.4s infinite;
}

/* Aparición alien: entra desde arriba, girando y difuminado */
@keyframes materializar-alien {
    0% {
        opacity: 0;
        transform: translateY(-10px) ;
        filter: blur(6px);
    }
    60% {
        opacity: 1;
        transform: translateY(8px);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Flotación tipo nave: sube/baja con un ligero balanceo */
@keyframes flotar-alien {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(1deg);
    }
}

.campo-error {
    border: 2px solid var(--alertinput) !important;
    background-color: #fff5f5;
}

/* Para grupos: radios de "pais", "enterado" y el checkbox del aviso */

.grupo-error {
    outline: 2px solid var(--alertinput);
    border-radius: 6px;
    padding: 6px;
}
.logo-moviles img{
    display: none;
}

/* ==========================*/
/* DISEÑO DE IMAGEN ACOMPAÑANDO*/
/* ==========================*/
.iluscardSimifest {
  position: relative;
  width: 85%;
  background: var(--gradienteFondIlus);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Destellos: fondo decorativo, no interactivo */
.iluscardSimifest .destellos {
  position: absolute;
  top: 5em;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

/* Logo arriba */
.iluscardSimifest .logo-simifest {
  position: relative;
  z-index: 3;
  width: 10em;
  padding-top: 1em;
  max-width: 320px;
}

/* Ilustración: la única que flota */
.iluscardSimifest .ilustracion-simifest {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  margin-top: -100px;
  animation: float-bamboneo 4s ease-in-out infinite;
}

/* Slogan abajo */
.iluscardSimifest .slogan-simifest {
  position: relative;
  z-index: 3;
  width: 70%;
  max-width: 380px;
  margin-bottom: 6%;
}


@keyframes float-bamboneo {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}





.ocult-correo{
    width: 100%;
    background-color: var(--backg4);
    padding: 5px 0px;
    font-family: 'gottamBold', sans-serif;
    color: var(--ctext4);
    border-radius: 10px;
}
.ocult-correo p{
    margin: 0;
}

#btn-continuarRegistro.is-disabled span {
    color: var(--cwhite);
    font-family: 'gottamBold', sans-serif;
}
/* ==========================*/
/* INICIO SESION PRINCIPAL*/
/* ==========================*/

p.info-principal{
    text-align: left;
    font-size: .9em;
    line-height: 180%;
    font-weight: 400;
    line-height: 150%;
    font-family: 'gottamMedium', sans-serif;
    color: var(--cwhite);
}
h5.h5-principal{
    font-size: 2em;
    text-align: center;
    margin-bottom: 10px;
    font-family: 'fatfrank', sans-serif;
    color: var(--cwhite);
    letter-spacing: 1px;

}
.logo-info-principal{
    text-align: center;
}
.logo-info-principal img{
    width: 20%;

}

.i-p-beneficios{
    margin-top: 1em;
    border: 3px solid var(--cbord1);
    background-color: var(--cwhite);
    border-radius: 20px;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    
    justify-content: space-between;
}
.i-p-b-ico p{
    vertical-align: middle;
    color: var(--ctext1);
    font-size: .8em;
    font-weight: 400;
    font-family: 'gottamBold', sans-serif;
    margin: 0px 0px 0px 5px;

}

.i-p-b2-ico{
    align-items: center;
    width: 200px;
    text-align: center;
    margin: 10px 0px auto;

    
}
.i-p-b2-ico p {
    font-size: .7em;
    border: 2px solid var(--cbord2);
    background-color: var(--backg2);
    border-radius: 20px;
    padding: 5px 10px;
    font-weight: 700;

}
.i-p-b2-ico p span{
    color: var(--cbord2);  
    font-weight: 700;
    
}
.i-p-ini-interno,
.bloq-recuperar{
    position: relative;
    padding: 1.5em;
    margin-top: 10px;
    background-color: var(--backg1);
    border: 3px solid var(--cbord1);
    border-radius: 20px;
}

.i-p-ini-interno>p, .i-p-login>p{
    font-family: 'gottamBold', sans-serif;
    font-size: .7em;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 500;
    color: var(--ctext2);
}
.i-p-ini-interno>p img, .i-p-login>p img{
    width: 2.5em;
    margin-right: 5px;
    vertical-align: middle;

}
#btn-continuarInicio.is-disabled {
    font-family: 'gottamBlack', sans-serif;
    color: #fff;
}
.i-p-ini-interno>label{
    font-size: .8em;
    margin-top: 10px;
    font-family: 'gottamBold', sans-serif;
    color: var(--ctext1);
}

.i-p-ini-interno>input{
    width: 100%;
    margin-top: 10px;
    border-radius: 15px;
    padding: 10px 40px;
    border: 3px solid var(--cbord1);
    font-size: 1em;
    background-color: #F0F0F0;
}



#input-correo::placeholder {
    color: var(--ctext3); 
}

.i-p-verficar{
    margin-top: 1em;
    border-radius: 10px;
    padding: 10px 30px;
    background-color: var(--backg3);

}
.i-p-verficar>p{
    font-size: .8em;
    font-family: 'gottamLight', sans-serif;
    color: var(--ctext4);
    margin: 0;

}
.i-p-verficar>p strong{
    font-family: 'gottamBold', sans-serif;
}
.i-p-verficar>p img{
    vertical-align: middle;
    width: 1em;
}
button.width-boton{
    width: 100%;
    border: none;
}
.boton-contInicio{
    color: var(--cwhite);
    font-family: 'gottamBlack', sans-serif;
    text-align: center;
    margin: 0.5em 0em 0em 0em;
    background: var(--gradBoton1);
    padding: 10px 30px;
    border-radius: 100px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    cursor: pointer;
}
/***/
/* Contenedor de errores del formulario (validación y error 409) */

/**/
.boton-contInicio a{ 
    letter-spacing: 2px;
    font-family: 'fatfrank', sans-serif;
    cursor: pointer;
    text-decoration: none;
    color: var(--cwhite);
    font-size: 1.1em;
    cursor: pointer;
    transition: ease .5s;

}
.boton-contInicio a:hover{
    color: var(--cwhite);
}

/* ==========================*/
/* MODAL */
/* ==========================*/
.cardModal{
    width: 70%;
    margin: 0 auto;
}
.cardModal>p{
    margin-top: .5em;
    text-align: center;
    font-family: 'gottamBlack', sans-serif;
    font-size: 1.5em;
    color: var(--cwhite);

}
.regr-modal{
    display: flex;
    align-items: center;
    color: var(--cwhite);
}
.regr-modal>p{
    margin: 0;
    font-family: 'gottamBlack', sans-serif;
    font-size: 1.3em;
}
.modal-cerrar {
    margin: 0;
    width: 3em;
    margin-right: 10px;

    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.modal-cerrar svg {
    width: 100%;
    height: 100%;
    
    display: block;
}

.modal-info{
    background: var(--cwhite);
    border-radius: 20px;
    padding: 2em;
    max-width: 100%;
    height: 65%;
    inset: none;
    overflow-y: scroll;
}
.modal-bomba{
    display: flex;
}
.modal-info>p, .modal-bomba>p{
    font-family: 'gottamMedium', sans-serif;
    color: var(--ctext4);
    font-size: .9em;
}

.modal-info>p{
    margin-top: 20px;
}

.modal-info>p strong{
    font-family: 'gottamBold', sans-serif;

}
.modal-bomba img{
    width: 5em;
}
.modal-info>p img{
    width: 2em;
}
.modal-inf-img{
    display: flex;
    align-items: self-start;
    font-family: 'gottamMedium', sans-serif;
    font-size: .9em;
    color: var(--ctext4);
    margin-bottom: 20px;
}
.mod-img img{
    width: 3em;
    margin-right: 10px;
}
.mod-text>p{
    margin: 0;
     font-family: 'gottamMedium', sans-serif;
}
.mod-text p strong{
    font-family: 'gottamBlack', sans-serif;

}
.modal-lista-beneficios {
    padding-left: 20px;
    margin: 16px 0;
}



#ver-beneficios {
    cursor: pointer;
}
/* ==========================*/
/* CODIGO */
/* ==========================*/

.codigo-cajas {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 15px 0;
}

.caja-codigo {
    color: var(--ctext1);
    -webkit-text-fill-color: var(--ctext1);
    width: 60px;
    height: 70px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    border: 2px solid var(--cbord1);
    border-radius: 14px;
    background: #F0F0F0;
    outline: none;
}

.caja-codigo:focus {
    border-color: var(--ctext2);   /* verde al enfocar, cambia a tu gusto */
}
p.txt-reenvio{
    text-align: center;
    color: var(--ctext10);
    font-family: 'gottamMedium', sans-serif;
    font-size: .8em;
}
/* ============================================================*/
/* REGISTRO PANTALLA PRINCIPAL SIN FORMULARIO DE REGISTRO AUN */
/* ============================================================*/



.inicio-registro-uno
{
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.inicio-registro-uno p, .inicio-registro-uno label
{
    font-family: 'gottamLight', sans-serif;
    color: var(--ctext4);
    font-size: .9em;

}
.inicio-registro-uno label{
    margin-top: 10px;
}
.inicio-registro-uno p span
{
    font-family: 'gottamBold', sans-serif;
    color: var(--ctext4);
    background-color: var(--backcodigo);
    padding: 8px 30px;
    border-radius: 8px;
    font-size: .9em;

}

.i-p-ini-int-regist>p{
    text-align: left;
}

.i-p-ini-int-regist{
    margin-top: 1em;
    text-align: center;
}

.i-p-reg-ver p, .i-p-inicio-codigo-r label{
    font-family: 'gottamLight', sans-serif;
    color: var(--ctext4);
    font-size: .9em;margin-top: 20px;
}

.i-p-reg-ver p:first-child{
    margin-top: 10px;
}

p.pr-contador{
    font-family: 'gottamMedium', sans-serif;

    color: var(--ctext2);
}
/* ==========================*/
/* RECUPERACION DE CONTRASEÑA*/
/* ==========================*/
.caj-recup-1{
    text-align: center;
    color: var(--cwhite);
}

p.txt-recuperar-title{
    font-family: 'fatfrank', sans-serif;
    font-size: 1.8em;
}

p.txt-recuperar-intro{
    font-family: 'gottamMedium', sans-serif;
    font-size: 1em;
}

.recup-correo label,
.recup-pass label
{
    font-family: 'gottamBold', sans-serif;
    color: var(--ctext1);
    font-size: .8em;

}
.recup-correo input,
.recup-pass input
{
     width: 100%;
    background-color: var(--cwhite);
}
.recup-correo small{
    font-family: 'gottamMedium', sans-serif;
   font-size: .6em;
   color: var(--ctext6);

}
.widht-recu-pass-list{
    width: 100%;
}

.ico-exito-p{
    width: 100%;
    margin-bottom: 1em;

}
.cont-reset-exito
/* ============================================================*/
/* REGISTRO PANTALLA SECUNDARIA FORMULARIO DE REGISTRO */
/* ============================================================*/

.scroll-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;      /* para que el hijo pueda usar height: 100% con confianza */
    flex-direction: column;
}

.cont-regis-scroll {
    position: relative;
    height: 60vh;
    overflow-y: auto;
    border-radius: 10px;
}

.fond-regist{
    background-color: var(--backg1);
    border-radius: 20px;
    padding: 2em 1.5em;
    margin-bottom: 20px;

}
.crear-reg-regreso, .flec-regreso{
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.img-regreso img{
    width: 6em;
    animation: bamboneo-regreso 4s ease-in-out infinite;
}

@keyframes bamboneo-regreso {
    0%, 100% {
        transform: translateY(-5px);
    }
    50% {
        transform: translateY(0px);
    }
}

.caj-reg-regreso img{
    width: 3em;
    margin-right: 5px;
    cursor: pointer;
}
.caj-reg-regreso p strong{
    color: var(--cwhite);
    font-family: 'gottamBold', sans-serif;
    font-size: 1.4em;
    font-weight: 500;
}
.caj-reg-regreso p{
    color: var(--cwhite);
    font-family: 'gottamMedium', sans-serif;
    font-size: .8em;
    font-weight: 300;

}

p.title-sec-reg img{
    width: 2.5em;
    vertical-align: middle;
    margin-right: 2px;
}
p.title-sec-reg {
    font-family: 'gottamBold', sans-serif;
    color: var(--ctext2);
    text-transform: uppercase;
    font-size: .9em;
    font-weight: 600;
    letter-spacing: 1px;
}

.inp-bord-g{
    margin-top: 10px;
    border: 1.2px solid var(--backg1);
    border-radius: 10px;
    padding: 10px 30px;

}
.cr-r-datos{
    display: flex;
}
.cr-r-text{
    margin-top: 10px;
    width: 50%;
}

.cr-r-text-correo, .cr-r-text-pais {
    width: 100%;
}
.cr-r-text label, .cr-r-cumple label, .cr-r-text-pais label,
.cr-r-text-pass label, .cr-r-text-cel label, .cr-r-text-correo label,
.cr-r-text-fest label, .cr-r-text-fest2 label.cr-r-pregunta{
    font-family: 'gottamBold', sans-serif;
    color: var(--ctext1);
    font-size: .8em;
}

.cr-r-text input.inp-dat-pers{ 
    width: 90%;
    background-color: var(--cwhite);
}
.cr-r-text p {
   max-width: 100%;
   line-height: 80%;
}

.cr-r-text p small, .cr-r-text-correo p small{
   font-family: 'gottamMedium', sans-serif;
   font-size: .6em;
   color: var(--ctext5);
   
}
.cr-r-cumple{
    margin-top: 10px;
    font-weight: 400;
}

.cr-r-cumple-selects {
    display: flex;
    gap: 14px;
    justify-content: left;
    margin-top: 8px;
}
/**---------------------- calendario ----------------------------**/

.cr-r-fecha-wrap {
    position: relative;
}

/* Botón transparente sobre el ícono visual que ya pinta .input-icon-calblack */
.cr-r-fecha-ico {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.cr-r-calendario {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 280px;
    max-width: 90vw;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    padding: 12px;
}

.cr-r-calendario.oculto {
    display: none;
}

.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cal-nav {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
}

.cal-selects {
    display: flex;
    gap: 6px;
}

.cal-selects select {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: .85rem;
}

.cal-dias-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: .75rem;
    color: #888;
    margin-bottom: 4px;
}

.cal-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-dia {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .85rem;
    background: none;
    border: none;
    cursor: pointer;
}

.cal-dia:hover {
    background: #f0eaf5;
}

.cal-dia.cal-dia-fuera {
    color: #ccc;
    cursor: default;
}

.cal-dia.cal-dia-fuera:hover {
    background: none;
}

.cal-dia.cal-dia-selec {
    background: #53335F;
    color: #fff;
}

/*contraseña*/

.cr-r-pass{ position:relative; }

.cr-r-pass input.inp-dat-pass{
    width:100%;
    gap: 10px;

}
.cr-r-datos-pass{
    display: flex;
    align-items: end;
    margin-top: 10px;
    width: 100%;
    gap: 10px;
    
}
.cr-r-text-pass{
    width: 50%;
    margin-top: 10px;
}

.cr-r-text-pass label{
    font-weight: 400;
}
.cr-r-ojo{
    position:absolute; right:12px; top:55%; transform:translateY(-50%);
    width:24px; height:24px; padding:0; border:none; background:transparent;
    cursor:pointer;
}
.cr-r-ojo::before{
    content:""; display:block; width:100%; height:100%;
    background:#121212;
    -webkit-mask:center/contain no-repeat var(--ojo-abierto);
    mask:center/contain no-repeat var(--ojo-abierto);
    --ojo-abierto:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
    --ojo-cerrado:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>");
}
.cr-r-ojo.is-visible::before{
    -webkit-mask-image:var(--ojo-cerrado);
    mask-image:var(--ojo-cerrado);
}
.widht-cr-r-pass-list{
     width: 48%;
}
.cr-r-pass-list{
    margin-top: 5px;
    background-color: var(--backg5);
    border-radius: 15px;
    padding: 1em;
   
    font-size: .8em;
}
.cr-r-pass-list>p{
    color: var(--ctext1);
    font-family: 'gottamBold', sans-serif;
    margin: 0;
    line-height: 130%;
}
.cr-r-pass-item{margin: 0;}
.cr-r-pass-item p{
    vertical-align: middle;
    gap: 8px;     
}

.cr-r-pass-item svg{
    flex-shrink: 0;
    margin-right: 3px;          /* evita que el punto se achique si el texto es largo */
}

.cr-r-pass-item svg circle{
    fill: var(--ctext6);     /* mismo color que el texto; cámbialo si quieres otro */
}

.cr-r-pass-item p, p.cr-t-pass-not{
    margin-top: 8px;
    font-size: .8em;
    font-family: 'gottamMedium', sans-serif;
    color: var(--ctext6);margin: 0;
}

p.cr-t-pass-not{
    margin-top: 3px;
    line-height: 130%;
}

/*medio de contacto*/
.inp-dat-tel{
    width: 46%;
    background-color: var(--ctext7);
}
.cr-r-datos-cel{
    display: flex;
}

.cr-r-text-cel{
    width: 100%;
    margin-top: 10px;
}
.cr-r-text-cel label{
    font-weight: 400;
    
}
.inp-dat-tel2{
    width: 90%;
    background-color: #F0F0F0;
}
/****pais**/
/* ===== País ===== */


.cr-r-pais-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;      /* alinea las cajas por abajo, como en la imagen */
    gap: 20px;
}

.cr-r-opcion {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 10px;
}

/* --- Tarjeta del radio (México / Otro país) --- */
.cr-r-p-radio {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 8px;
    font-size: .6em;
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all .15s ease;
}

.cr-r-p-radio span {
    font-weight: 600;
    color: var(--ctext1);
    font-size: .9em;
}

/* Oculta el radio nativo y usa el punto personalizado */
.cr-r-p-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cr-r-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--pais);   /* morado */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* --- Estado SELECCIONADO: borde morado + punto relleno --- */
.cr-r-opcion:has(input:checked) .cr-r-p-radio {
    border-color:  var(--pais);
}
.cr-r-opcion:has(input:checked) .cr-r-dot::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:  var(--pais);
}

/* --- Estado NO seleccionado: caja gris + todo grisado --- */
.cr-r-opcion:has(input:not(:checked)) .cr-r-p-radio {
    background: #E7E5F3;
}
.cr-r-opcion:has(input:not(:checked)) .cr-r-p-radio span {
    color: #9A98AE;
}
.cr-r-opcion:has(input:not(:checked)) .cr-r-dot {
    border-color: #C4C1D6;
    background: #fff;
}

/* --- Campo (label + select) --- */
.cr-r-campo {
    display: flex;
    flex-direction: column;
}

.cr-r-campo span {
    font-size: .8em;
    font-weight: 700;
    color: var(--ctext1);
    margin: 0 0 6px 4px;
}

.cr-r-campo select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 14px;
    padding: 16px 42px 16px 20px;
    font-size: 12px;
    font-weight: 600;
    min-width: 100%;
    width: 100%;
    background-color: #fff;
    color: var(--ctext1);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    /* flecha ▼ */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232D2A45' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
}



/* Select del lado NO seleccionado: grisado y deshabilitado visualmente */
.cr-r-opcion:has(input:not(:checked)) .cr-r-campo span {
    color: var(--ctext7);
}
.cr-r-opcion:has(input:not(:checked)) .cr-r-campo select {
    background-color: #DEDBEC;
    color: var(--ctext7);
    border: 1px solid #E7E1F5;
    box-shadow: none;
    cursor: not-allowed;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A98AE' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
}

/*simifest**/
.cr-r-text-fest{
    margin-top: 20px;

}


.cr-r-toggle{
    display: inline-flex;
    font-family: 'gottamBold', sans-serif;
    background: var(--cwhite);
    border-radius: 100px;
    padding: 8px;
    margin-top: 12px;
}
.cr-r-toggle-btn{
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px 40px;
    font-size: .8em;
    font-weight: 500;
    color: var(--ctext1);
    border-radius: 100px;
    transition: .15s;
}
.cr-r-toggle-btn.is-active{
    background: var(--pais);
    color: var(--cwhite);
    font-weight: 700;
}
.cr-r-text-fest2 {
    margin-top: 30px;
}
.cr-r-pregunta{
    margin-top: 20px;
    font-weight: 600;

}

/* ===== ¿Cómo te enteraste? ===== */
.cr-r-enterado {
    display: grid;
    grid-template-columns: 1fr 1fr;  
    gap: 16px;                        
    margin: 0;
    padding-top: 10px;
}


.cr-r-radio-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: var(--cwhite);
    border: 2px solid var(--backg5);
    border-radius: 18px;
    cursor: pointer;
    font-weight: 600;
    color: var(--ctext1);
    line-height: 140%;
    transition: border-color .15s ease;
}

/* Oculta el radio nativo, usamos uno personalizado */
.cr-r-radio-fila input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* Círculo del radio (dibujado con ::before en el label de texto) */
.cr-r-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .8em;
    line-height: 160%;
}
.cr-r-label::before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--backg4);   /* gris cuando no está seleccionado */
    flex-shrink: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease;
}

/* --- Estado SELECCIONADO: borde morado en la tarjeta + punto relleno --- */
.cr-r-radio-fila:has(input:checked) {
    border-color: var(--pais);
}
.cr-r-radio-fila:has(input:checked) .cr-r-label::before {
    border-color: var(--pais);
    /* punto interior morado */
    background:
        radial-gradient(circle, var(--pais) 0 6px, transparent 7px);
}


.cr-r-check span.cr-r-check-texto{
    font-family: 'gottamMedium', sans-serif;
    color: var(--ctext4);
    font-size: .8em;
    
}

.cr-r-check span.cr-r-check-texto a{
    color: var(--ctext8);
    cursor: pointer;
    text-decoration: none;
}

.cr-r-check span.cr-r-check-texto a:hover{
    color: var(--ctext8);
}

/***/
.fond-bot-reg p{
    font-family: 'gottamMedium', sans-serif;
    color: var(--cbord1);
    font-size: .8em;
    text-align: center;

}

/*aviso de privacidad oculto**/
.aviso-info-reg{
    margin-top: 20px;
    background-color: var(--backg1);
    padding: 1.5em;
    color: var(--ctext4);
}

.aviso-info-reg h5{
    font-family: 'gottamBold', sans-serif;
    font-size: .8em;
}
.aviso-info-reg p,
.aviso-info-reg ul li{
    font-family: 'gottamLight', sans-serif;
    font-size: .7em;
}

/**registroexitoso**/
.ico-exito-p{
    text-align: center;
}

h5.h5-exito{
    font-family: 'gottamBlack', sans-serif;
    font-size: 2em;
    color: var(--cwhite);
    text-align: center;
}

.ico-exito-p img{
    width: 80%;
}
p.exito-text{
    text-align: center;
    font-family: 'gottamMedium', sans-serif;
    color: var(--cwhite);

}
/***/

/* Caja contenedora de errores */
#error-registro {
   margin: 0;     
}

/* Si está vacío, no ocupa espacio ni muestra la caja */
#error-registro:empty {
    display: none;
}

/* La lista de errores */
.lista-errores {
    margin: 0;
    padding-left: 20px;
    list-style: none;
}

/* Cada error */
.lista-errores li,
.lista-errores-back
{
    position: relative;
    padding: 10px 20px 10px 20px;
    font-size: .8em;
    background: var(--alerta);
    text-align: center;
    color: var(--cwhite);
    line-height: 1.4;
    margin: 1em 0em 1em 0em;
    border-radius: 5px;
    font-family: 'gottamMedium', sans-serif;
}
.lista-errores-back a{
    text-decoration: none;
    cursor: pointer;
     color: var(--cwhite);
     font-family: 'gottamBlack', sans-serif;

}
.lista-errores-back a:hover{
    color: var(--cwhite);

}
.lista-errores li img{
    width: .8em;
    margin-right: 5px;
    margin-top: -1px;
}


/* ========================================================================================*/
/* I    N   I   C   I   O         D     E          S        E       S       I        Ó        N */
/* =========================================================================================*/

.i-p-login{
    text-align: center;
}

.i-p-login>p.titlepinicios{
    text-align: left;
    line-height: 150%; 
}

.i-p-login>p span{
    background-color: var(--backg4);
    border-radius: 10px;
    padding: 5px 10px;
    font-weight: 600;
    width: 100%;
}

.i-p-login label{
    font-family: 'gottamLight', sans-serif;
    color: var(--ctext4);
    font-size: .9em;
    margin-bottom: 10px;
}

.separador {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--ctext4);
}

.separador::before,
.separador::after {
    content: "";
    flex: 1;
    height: 1.5px;
    background: var(--ctext4);
}

.ingreso-password{
    margin-top: 20px;
    text-align: center;
    line-height: 160%;
    font-weight: 500;
    font-size: .9em;
    cursor: pointer;
    color: var(--cbord2);
    font-family: 'gottamMedium', sans-serif;
}

.ingreso-password a{
    text-decoration: none;
    color: var(--cbord2);
}

.ingreso-password a:hover, .ingreso-password p:hover{
    text-decoration: underline;
}

p.p-can-reg{
    text-align: center;
}

a.cancelar-registro{
    color: var(--cbord2);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    font-family: 'gottamMedium', sans-serif;
}
a.cancelar-registro-recuperacion{
    color: var(--cwhite);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    font-family: 'gottamMedium', sans-serif;

}

a.cancelar-registro:hover{
    color: var(--cbord2);
    text-decoration: underline;
}
a.cancelar-registro-recuperacion:hover{
    color: var(--cwhite);
}

.i-p-l-pass {
    text-align: right;
}

.i-p-l-pass label{
    font-weight: 500;
}
.i-p-l-pass input{
    width: 100%;
}
.i-p-l-pass a.olv-pss{
    font-size: .8em;
    font-family: 'gottamBold', sans-serif;
    color: var(--cbord2);
    text-decoration: none;
    cursor: pointer;
}
.i-p-l-pass a.olv-pss:hover{
    color: var(--ctext8);
}


.posic-icon-int{
    background-repeat: no-repeat;
    background-position: 12px center;   /* icono a la izquierda */
    background-size: 18px 18px;
    padding-left: 38px;                 /* espacio para que el texto no se monte */
    box-sizing: border-box;

}

.input-icono-candado {
    background-image: url("../images/ico-candado.svg"); 
}

.input-icon-canblack {
    background-image: url("../images/ico-candado-form.svg");
}

.input-icon-calblack{
    background-image: url("../images/ico-calendario.svg");
}

/* ========================================================================================*/
/*                B       A       R       R       A           D       E       P           O      G       R       E       S       O              */
/* =========================================================================================*/
#barra {
    display: flex;
    gap: 8px;
    margin: 20px 0px;
}

.segmento {
    flex: 1;                  /* todos del mismo ancho */
    height: 4px;
    border-radius: 4px;
    background: var(--barra2);      /* gris = no completado */
    transition: background 0.3s ease;
}

.segmento.activo {
    background: var(--barra);      /* negro = completado / actual */
}
/* ========================================================================================*/
/*                E        N       C       U       E       S       T       A               */
/* =========================================================================================*/
.logo-info-encuesta {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 1;                   
    pointer-events: none;         
}

.logo-info-encuesta img {
    width: 300px;
    max-width: 60%;
    opacity: 0.5;                 
}

.footencuesta{
    margin-top: auto;
}



.cardencuesta {
    position: relative;
    z-index: 3;                      /* nivel más alto: sobresale */
    width: 100%;
    max-width: 680px;
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 4em;
    box-sizing: border-box;
}

.cont-encuesta-sub{
    background-color: var(--backg6);
    border-radius: 20px;
    padding: 25px 20px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.cont-enc-su-img img{
    width: 6em;
    margin-right: 10px;
}
.cont-enc-su-p h5{
    font-size: .9em;
    color: var(--ctext1);
    font-family: 'gottamBlack', sans-serif;
}
.cont-enc-su-p p{
    color: var(--ctext6);
    font-weight: 400;
    font-size: .8em;
    line-height: 140%;
    font-family: 'gottamMedium', sans-serif;
}
.cont-Pregunt{
    background-color: var(--backg1);
    margin-top: 20px;
    border-radius: 20px;
    padding: 25px 20px;
}

.cont-Pregunt.cont-final {
    background-color: transparent;
}


.mensaje-encuesta p{
    color: var(--cwhite);
    font-family: 'gottamMedium', sans-serif;
}

.contador-preguntas{
    color: var(--ctext5);
    font-family: 'gottamMedium', sans-serif;
    text-transform: uppercase;
    font-size: .7em;
}

h3.encuesta-pregunta{
    color: var(--ctext1);
    margin: 10px 0px;
    font-family: 'gottamBlack', sans-serif;
    line-height: 150%;
    font-size: 1.1em;
}
.enc-hint {
    text-align: center;
    font-size: 13px;
    color: #3b3b3b;
    font-weight: 400;
    margin-bottom: 10px;
}

.oculto {
    display: none;
}

.btnEnc-continuar.is-disabled {
    opacity: 0.5;
    pointer-events: none;   /* no se puede clickear */
    cursor: not-allowed;
}
/**final encuesta**/
.final-enc-cont h3{
    text-align: center;
    color: var(--cwhite);
    font-family: "fatfrank", sans-serif;
    letter-spacing: 1px;
}
.f-e-cont-img{
    text-align: center;
}

.f-e-cont-img img.f-e-cont-img2{
    width: 50%;
}

.f-e-cont2{
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgb(255 255 255 / 8%);
    border-radius: 20px;
    border: .8px solid rgb(255 255 255 / 12%);
    padding: 20px;
    margin-top: 2em;
}
.f-e-cont2-img img{
    width: 6em;
}

.f-e-cont2-text{
    color: var(--cwhite);
    text-align: center;
}
.f-e-cont2-text h5{
    font-family: 'gottamBold', sans-serif;

}
.f-e-cont2-text  p{
    font-family: 'gottamLight', sans-serif;
    font-size: .8em;
    color: rgb(255 255 255 / 80%);;

}


/* ======================================*/
/*         ENCUESTA BOTONES              */
/* ======================================*/
.btnEnc-nav{
    display: flex;
    justify-content: center;
}
.btnEnc-nav a{
    background: #EBEBEB;
    border-radius: 10px;
    padding: 10px 40px;
    cursor: pointer;
    margin: 0px 5px;
    color: #535353;
    font-weight: 500;

}
.btnEnc-nav a:hover{
    color: var(--cwhite);

}
a.btnEnc-continuar{
    display: flex;
    gap: 5px;
    align-items: center;
    text-decoration: none;
    font-family: 'gottamMedium', sans-serif;
}
a.btnEnc-atras{
    text-decoration: none;
    background-color: var(--cwhite);
    border-radius: 100px;
    color: var(--ctext4);
    font-family: 'gottamMedium', sans-serif;
}
a.btnEnc-atras:hover{
     color: var(--ctext4);
}
a.btn-ir-perfil, a.btnEnc-continuar{
    text-decoration: none;
    border-radius: 100px;
    color: var(--cwhite);
    background: var(--gradBoton1);
    font-family: 'gottamMedium', sans-serif;
}

a.btn-ir-perfil:hover{
    color: #fefbfb;

}
a.btnEnc-continuar img{
    width: 1em;
}


.respon-desp  p{
    margin-top: 1em;
    font-size: .8em;
    text-align: center;
    color: var(--cwhite);
    font-family: 'gottamMedium', sans-serif;
}
.boton-cerrarsesion{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--cwhite);
    font-family: 'gottamBlack', sans-serif;
    cursor: pointer;
    margin-top: 10px;
}
.boton-cerrarsesion:hover{
    color: var(--backcodigo);
}
/* ======================================*/
/*         ENCUESTA MENSAJE FINAL           */
/* ======================================*/
.mensaje-encuesta{
    text-align: center;
}
.circle-sc{
    display: flex;
    align-items: center;       
    justify-content: center;   
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background-color: #A6A6A6;
    border-radius: 100px;
}

.circle-sc p{
    margin: 0;                
    text-align: center;         
    color: black;               
    line-height: 1.1; 
    font-weight: 900;         
}
.mensaje-encuesta h3{
    margin: 10px 0px;
    font-size: 1.4em;
}
.mensaje-encuesta p{
    line-height: 160%;
}
.btn-mens-enc{
    text-align: center;
    margin-top: 20px;
}

.btn-mens-enc a{
    padding: 10px 50px;
    font-family: 'gottamBold', sans-serif;
    width: 100%;
    border-radius: 100px;
    color: var(--cwhite);
    font-weight: 600;
    cursor: pointer;
}

/* =========================================*/
/*         ENCUESTA TIPO DE PREGUNTA RADIO   */
/* ==========================================*/

label.type-radio {
    display: flex;
    background-color: var(--cwhite);
    border-radius: 12px;
    border: 2px solid var(--backg2);
    padding: 8px 20px;
    cursor: pointer;
    color: var(--ctext1);
    margin: 10px 0px;
    font-weight: 400;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s ease;
    font-family: 'gottamMedium', sans-serif;
}

/* Oculta el estilo por defecto del navegador */
.type-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--backg2);
    background: var(--cwhite);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Radio seleccionado: aro morado + anillo blanco + bolita morada */
.type-radio input[type="radio"]:checked {
    border-color: #6C4EF6;                  /* aro exterior morado */
    background: #6C4EF6;                     /* bolita morada */
    box-shadow: inset 0 0 0 3px #ffffff;    /* anillo blanco entre aro y bolita */
}

.type-radio input[type="radio"]:hover {
    border-color: #6C4EF6;
}

/* Tarjeta seleccionada: solo el borde cambia a morado */
.type-radio:has(input[type="radio"]:checked) {
    border-color: #6C4EF6;
}

/* =========================================*/
/*         ENCUESTA TIPO DE PREGUNTA SELECT   */
/* ==========================================*/
select.enc-select{
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    background-color: #797474;
    cursor: pointer;
    color: white;
}


/* =========================================*/
/*        PERFIL   */
/* ==========================================*/
p.carga-perfil{
    color: var(--cwhite);
    font-family: 'gottamMedium', sans-serif;
    text-align: center;
    margin-top: 10px;
}
.cardPerfil{
    width: 80%;
    margin: 0 auto;
    max-width: 100%;
}
.consubPerfil{
    cursor: pointer;
    text-align: left;
}
.consubPerfil p{
    font-family: 'gottamBold', sans-serif;
    color: var(--cwhite);
    font-size: 1.4em;
    font-weight: 500;

}
.consubPerfil p img{
    width: 3em;
    margin-right: 5px;
}


.menu-perfil{
    display: flex;
    background-color: var(--cwhite);
    padding: 8px;
    border-radius: 100px;
    font-family: 'gottamBold', sans-serif;
    gap: 4px;
    margin-bottom: .5em;                
}

.menu-perfil a{
    text-decoration: none;
    color: var(--ctext6);
    flex: 1;                    
    text-align: center;       
    margin: 0;
    padding: 10px 20px 5px 20px;
    cursor: pointer;
    border-radius: 100px; 
    font-weight: 500;  
    font-size: .8em;  
}
.menu-perfil a img{
    width: 30px;
    margin-right: 5px;
}
.menu-perfil a:hover{
    color: var(--ctext6);

}

.menu-perfil a.activo{
    background-color: var(--pais);
    color: white;
}

.edit-infsubPer a{
    border: 1px solid rgb(61, 60, 60);
    padding: 10px 30px;
    border-radius: 100px;
    font-weight: 400;
    margin: 0;
    cursor: pointer;
}
.edit-infsubPer a img{
    vertical-align: middle;
    width: 1em;
    margin: 0;
}

/**perfil**/
.perf-pers,
.perf-p-dat,
.simic-cont,
.card-notif
{
    background-color: var(--cwhite);
    border-radius: 20px;
    margin-top: 10px;
    padding: 1em;
}

.perf-p-dat hr.perf-hr{
    border: none;
    background-color: #d3cbe6;
    height: 2px;
    border-radius: 100px;
}
.perf-p-inf{
    display: flex;
}
.perf-p-alias img{
    width: 5em;
    margin-right: 18px;
}

.perf-p-name h5{
    font-size: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--ctext1);
    font-family: 'gottamBold', sans-serif;
}
.perf-p-name p.perf-p-m{
    font-size: .8em;
    color: var(--ctext6);
    font-family: 'gottamMedium', sans-serif;
    margin-bottom: 10px;
}
.perf-p-name p span{
    color: var(--cbord2);
    font-weight: 700;
    background-color: var(--perfilsubtono);
    padding: 5px 10px;
    border-radius: 100px;
}
.perf-p-name p span img{
    vertical-align: middle;
    width: .7em;
    margin-right: 5px;
    margin-top: -4px;
    
}
.perf-p-inf2{
    display: flex;
}
.perf-p-asset{
    background-color: var(--perfilsubtono);
    border-radius: 20px;
    width: 100%;
    justify-content: center;
    text-align: center;
    margin: 10px auto;
    padding: 6px 0px;
}
.perf-p-asset img{
    width: 2em;
}
.perf-p-asset p span{
    color: var(--ctext1);
    font-family: 'gottamBlack', sans-serif;
    font-size: 2em;
}
.perf-p-asset p{
    color: var(--ctext6);
    margin: 0;
    font-family: 'gottamMedium', sans-serif;
    font-size: .8em;
}

p.text-p-d-per{
    font-size: .9em;
    font-family: 'gottamBlack', sans-serif;
    color: var(--cbord2);
    text-transform: uppercase;
}


.perf-p-d-inf{
    display: flex;
    margin: 10px 0px;
    align-items: start;
}
.perf-p-d-img{
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background-color: var(--perfilsubtono);
    margin-right: 8px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.none-edit-tel{
    width: 100%;
}

.perf-p-d-img img{
    width: 50%;
    height: auto;
}

.flex-edit-tel{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.perf-p-d-txt p,
.campo-tel label
{
    font-size: .8em;
    color: var(--ctext6);
    margin: 0;
    font-family: 'gottamBold', sans-serif;
}

.perf-p-d-txt p strong{
    color: var(--ctext1);
    font-size: 1.3em;
    font-weight: 600;
    font-family: 'gottamBold', sans-serif;
}
/**editar telefono**/
.panel-editar-tel{
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    opacity: 1;
}

.flex-edit-tel.oculto,
.panel-editar-tel.oculto {
    display: none;
}

.panel-editar-tel.oculto{
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.campo-tel {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.campo-tel input{
    width: 100%;
    border: 1.5px solid var(--backg2);
    border-radius: 10px;
    height: 50px;
    padding: 0px 10px;
}

.btn-guardar-tel-cont{
    display: flex;
    justify-content: flex-end;
}

.btn-guardar-tel{
    background: var(--gradBoton2);
    color: var(--cwhite);
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    font-family: 'gottamBold', sans-serif;
    font-size: .9em;
    margin: 0;
}

.btn-guardar-tel:hover{
    color: var(--cwhite);
}

.btn-guardar-tel img{
    width: 1.5em;
}

.error-tel{
    color: var(--alerta);
    font-size: 0.8em;
    margin-top: -8px;
    margin-bottom: 10px;
    font-family: 'gottamLight', sans-serif;
}


a.abtn-editar-tel{
    cursor: pointer;
    background: var(--gradBoton2);
    border-radius: 50px;
    padding: 8px 18px;
    margin: 0;
    color: var(--cwhite);
    font-family: 'gottamMedium', sans-serif;
    text-decoration: none;
    font-size: .8em;
    vertical-align: middle;
}
a.abtn-editar-tel:hover{
    color: var(--cwhite);
}
a.abtn-editar-tel img{
    width: 1.5em;
    margin: 0;
}
/***modal telefono ***/
.modal-guardado-overlay {
    position: fixed;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-guardado-caja {
    background: var(--pais);
    border-radius: 100px;
    padding: 24px 32px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--cwhite);
}
/**notificaciones*/
.notif-header{ 
    display:flex; justify-content:space-between; 
    align-items:center; 
    margin:10px 0px; 
}

.notif-tabs{ 
    display:flex; 
    gap:.5rem; 
    background:var(--cwhite); 
    border-radius:999px; 
    padding:.25rem;
    cursor: pointer;
    font-family: 'gottamMedium', sans-serif;
    font-size: .8em;
}

.tab-notif{ 
    border:none; background:transparent; 
    padding:.4rem 1rem; border-radius:999px; 
    cursor:pointer; color:#555; 
}

.tab-notif.activo{ 
    background:var(--pais); 
    color:#fff; 
  
}

.btn-marcar{ 
    border:none; background:transparent; 
    cursor:pointer; color:#333; 
}

.card-notif{ 
    display:flex;
    cursor:pointer; 
    gap: 10px;
}

.card-notif.no-leida{ 
    background-color: var(--backg1);
}


.notif-icono img{
    width: 3em;

}

.notif-cuerpo h4{ 
    margin:0 0 .25em; 
    font-family: 'gottamBold', sans-serif;
    font-size:.9em; 
    color: var(--ctext1);
}
.notif-cuerpo p{ 
    margin:0 0 .5em; 
    color:var(--ctext6); 
    font-size:.8em;
    font-family: 'gottamMedium', sans-serif;

}
.notif-tiempo{
    font-size:.8em; 
    color:var(--ctext3); 
    font-family: 'gottamMedium', sans-serif;
}

.punto{ 
    display:inline-block; 
    width:7px; height:7px; 
    background:var(--alertinput); 
    border-radius:50%; 
    vertical-align:middle; 
    gap: 10px; }

.notif-vacio{ 
    color:var(--backg4); 
    text-align:center; 
    padding:2em;
    font-family: 'gottamLight', sans-serif; 
    font-size: .8em;
}

/**simicoins*/

.simic-cont{
    display: flex;

}

.simic-cont img{
    width: 3.5em;
    margin-right: 10px;
}
.simic-context {
     width: 100%;

}
.simic-context h5{ 
    font-size: 2em; 
    font-weight: 600;
    color: var(--ctext1);
    font-family: 'gottamMedium', sans-serif; 
    margin: 0;

}
.simic-context p{
    font-size: .9em;
    color: var(--ctext6);
    font-family: 'gottamMedium', sans-serif; 
    margin: 0;
}
p.simicoins-title{
    font-size: .9em;
    margin-top: 20px;
    font-family: 'gottamBold', sans-serif;
    color: var(--cwhite);
}
.card-encuesta{
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    background-color: var(--encuesta);
    display: flex;
    margin: 15px;

}
.info-dis-encuesta h4{
    font-family: 'gottamBold', sans-serif;
    color: var(--ctext1);
    font-size: .9em;
    margin: 0;
}

.info-dis-encuesta p{
    font-family: 'gottamMedium', sans-serif;
    color: var(--ctext6);
    margin: 0;
    font-size: .8em;

}
a.btn-contestar{
    font-family: 'gottamMedium', sans-serif;
    background: var(--gradBoton2);
    color: var(--cwhite);
    cursor: pointer;
    text-decoration: none;
    margin: 0;
    padding: 10px 20px;
    border-radius: 100px;
    font-weight: 700;
}

a.btn-contestar:hover{
   color: var(--cwhite);

}
.canjear-cont{
    display: flex;
    text-align: center;
}
.canjear-caj{
    background-color: #E6E6E6;
    border: 2px solid #c6c4c4;
    width: 100%;
    border-radius: 10px;
    margin: 5px;
    padding: 10px 0px;
}
.canjear-caj img{
    width: 2em;
}
.canjear-caj p{
    margin: 20px 0px;
    line-height: 160%;
}
.canjear-caj a.a-canjeo{
    text-decoration: none;
    background-color: #414141;
    padding: 8px 20px;
    border-radius: 20px;
    color: white;
    font-weight: 600;
    cursor: pointer;

}


.simic-barra-cont {
    width: 100%;
    height: 8px;
    background-color: #EDEBF7; /* fondo lila claro */
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.simic-barra-progreso {
    height: 100%;
    width: 0%; /* se ajusta por JS */
    background-color: #6C5CE7; /* morado, como en la imagen */
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ==========================*/
/* FOOTER */
/* ==========================*/

footer {
    width: 100%;
    margin-top: auto;
    margin-bottom: -50px;
    width: 100%;
    background: #414141;   
}
footer hr{
    background: white;
    color: white;
}
.info-foot{
    display: flex;
    justify-content: space-between;
    color: white;
}
.text-foot p{
    font-weight: 300;
}
.text-foot a{
    font-weight: 300;
    color: white;
    text-decoration: none;
}
.text-foot a:hover{
    color: white;
}
/** window diferente a mac **/
@media (min-width: 1679px) and (max-width: 2497px) and (min-height: 1049px) and (max-height: 1665px) {

   .fondcardSimifest{
        padding: 5em 0em;
    }

   .cont-regis-scroll {
        height: 60vh;
    }

    .modal-info{
        overflow-y: auto;
        height: auto;
    }

}


/** window diferente a mac **/
@media (min-width: 1165px) and (max-width: 1281px) and (min-height: 599px) and (max-height: 651px) {
   .cardSimiFest{
    margin: 0 auto 7em;
   } 
}


/** window vertical 900 x 1156px **/
/** window vertical 800 x 1236px **/
/** window vertical 1024 x 1342px **/
/** window vertical 814 x 430px **/
/** window vertical 750 x 390px **/
/** window vertical 800 x 360px **/
/** window vertical 915 x 412px **/

/* Estilos comunes a todos los breakpoints */
@media (min-width: 890px) and (max-width: 1030px) and (min-height: 1150px) and (max-height: 1350px),
       (min-width: 780px) and (max-width: 810px) and (min-height: 1230px) and (max-height: 1240px),
       (min-width: 749px) and (max-width: 916px) and (min-height: 359px) and (max-height: 431px)
{
    img.img-apoyo{
        width: 6em;
        right: -2em;
    }

    .cardModal{
        width: 95%;
    }
    .cardSimiFest{
        width: 95%;
    }

    .modal-bomba img{
        width: 4em;
        height: 4em;
    }
    p.txt-recuperar-title{
        font-size: 1.4em;
        margin: 0;
    }
    p.txt-recuperar-intro{
        font-size: .8em;
        margin: 0;
    }

    .codigo-cajas{
        gap: 5px;
    }

    .caja-codigo {
        width: 35px;
        height: 45px;
        font-size: 22px;
    }
    .consubPerfil p{
        font-size: 1.2em;
    }
    .consubPerfil p img{
        width: 1.5em;
    }
    .cardPerfil{
        width: 95%;
    }
    .menu-perfil a{
        font-size: .6em;
        padding: 10px 10px 5px 10px;
    }
    .menu-perfil a img{
        width: 15px;
        margin-right: 3px;
    }
}

/* Diferencia: top de img.img-apoyo + .modal-info (grupo 900x1156 / 800x1236 / 1024x1342) */
@media (min-width: 890px) and (max-width: 1030px) and (min-height: 1150px) and (max-height: 1350px),
       (min-width: 780px) and (max-width: 810px) and (min-height: 1230px) and (max-height: 1240px)
{
    img.img-apoyo{
        top: 18em;
    }
    .modal-info{
        overflow-y: auto;
        height: auto;
    }
}

/* Diferencia: top de img.img-apoyo + .inicio-registro-uno p span (grupo 814x430 / 750x390 / 800x360 / 915x412) */
@media (min-width: 749px) and (max-width: 916px) and (min-height: 359px) and (max-height: 431px) {
    img.img-apoyo{
        top: 20em;
    }
    .inicio-registro-uno p span{
        padding: 8px 15px;
        font-size: .7em;
    }
}


/* Móvil estilos para lado izquierdo de la pantalla*/
@media (max-width: 767px) {
  .iluscardSimifest .logo-simifest {
    width: 65%;
    max-width: 260px;
  }
  .iluscardSimifest .ilustracion-simifest {
    width: 90%;
    max-width: 340px;
  }
  .iluscardSimifest .slogan-simifest {
    width: 85%;
    max-width: 300px;
  }
}

/** window movil estantar vertical **/
@media(max-width:720px){
    .cont-regis-scroll {
        height: 55vh;
        overflow-y: auto;
    }


    img.img-apoyo{
    width: 7em;
    right: 0em;
    top: -5em;
    z-index: 1;
    position: absolute;
    }
    .oculilustcard{
        display: none;
    }

    .fondcardSimifest{
        padding: 1em .8em;
        background-image:
        url('../images/fondo-movil.svg'),
        var(--gradienteFondo);

    }

    .cardSimiFest {
        padding: 0;
        width: 100%;
        max-width: 100%;
        border: none;
        border-radius: 20px;
    }
    /** M O D A L **/
  
    .cardModal{
        width: 95%;
    }
    
    .cardModal>p{
        font-size: .9em;
        margin-bottom: 20px;
    }

    .modal-info{
        padding: 1em;
        max-width: 100%;
        height: 70%;
        inset: none;
        overflow-y: scroll;
    }

    .modal-bomba img{
        width: 3em;
        height: 3em;
    }

    .modal-info>p, .modal-bomba>p{
        font-size: .8em;
    }
    .modal-inf-img{
        font-size: .8em;
    }

    .aviso-info-reg{
    margin-top: 20px;
    background-color: var(--backg1);
    padding: 1em;
    color: var(--ctext4);
}

    /**SPLASH*/

    /* ===== SPLASH (solo index) ===== */
.ilus-splash {
    position: fixed;          /* cubre toda la pantalla */
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;            /* por encima de todo */
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Estado oculto: se desvanece y deja de ocupar */
.ilus-splash.splash-oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}




    /** I N D E X **/

    .logo-info-principal img{
        width: 50%;
    }

    .i-p-inicio p{
    font-size: .8em;
    }

   
    .i-p-b-ico p{
        margin-bottom: 10px;
        padding-right: 20px;
        font-size: .8em;
        line-height: 150%;
    }
    .i-p-b2-ico{
        text-align: center;
    }

    .i-p-b2-ico p span{
        font-size: .8em;
        font-weight: 700;
    }

    .i-p-inicio, .cont-i-p-login, .cont-regis-login{
        position: relative;
        margin-top: 3.5em;

    }


    .i-p-ini-interno{
        position: relative;
        z-index: 2;
        padding: 1em;
    }

    .i-p-ini-interno>input{
        padding: 10px 30px;
        border-radius: 12px;
        border: 2px solid var(--cbord1);

    }

    .i-p-inicio p{
    font-size: .6em;
    }

    .inicio-registro-uno{
        width: 100%;
    }

    /*contraseña*/
    p.txt-recuperar-title{
    font-size: 1.4em;
    margin: 0;
}
p.txt-recuperar-intro{
    font-size: .8em;
}




    /** R E G I S T R O  F O R M U L A R I O **/

    .crear-reg-regreso{
        margin: 20px 0px;

    }

  
    .cr-r-datos{
        display: block;
    }

    p.title-sec-reg {
        
        font-size: .6em;
        margin-bottom: 20px;
    }
    .cr-r-text{
        width: 100%;
    }

    .cr-r-text label{
        font-size: .9em;
    }

    .cr-r-text input.inp-dat-pers{ 
        width: 100%;
    }

    .cr-r-text p {
        max-width: 100%;
    }
    .cr-r-cumple{
        margin: 20px 0px;
    }


    .cr-r-cumple-selects {
        display: flex;
        gap: 0px;
    }
    .cr-r-campo span{
        margin-left: 2px;
    }
    .cr-r-campo select{
        width: 60px;
    }

    .cr-r-datos-pass{
        display: block;
    }
    .cr-r-text-pass{
        margin-top: 20px;
        width: 100%;
    }
    .cr-r-text-pass label{
        font-size: .9em;
    }

    .cr-r-pass-list{
        font-size: .9em;
        width: 100%;
        margin-top: 1em;
    }

    .inp-dat-tel{
        width: 100%;
    }

    .cr-r-text-cel label{
        font-size: 1.1em;   
    }

    .cr-r-datos-cel{
        display: block;
    }
    .inp-dat-tel2{
        width: 100%;
    }

    .cr-r-opcion{
        display: block;
        margin-top: 20px;
    }
    .cr-r-campo span{
        font-size: .8em;
        margin-top: 10px;
    }

    .cr-r-campo select{
        width: 100%;
    }

    .cr-r-text-fest label{
        font-size: 1.1em;
    }
    .cr-r-toggle{
        width: 85%;
        text-align: center;
        justify-content: center;
    }
    .cr-r-toggle-btn{
         padding: 16px 45px;

    }

    .cr-r-opcion:has(input:checked) .cr-r-p-radio {
    border-color:  var(--ctext2);
    width: 100%;
}

.cr-r-opcion:has(input:not(:checked)) .cr-r-p-radio {
    width: 100%;
}

    /** E N C U E S T A **/
    .logo-info-encuesta img{
        margin-left: 10px;
    }
    .cont-enc-su-img{
        margin-left: 5px;
    }
    .cont-enc-su-p p{
        font-size: .7em;
        padding-right: 5px;
    }

    .cont-enc-su-img img{
    width: 5em;
    margin-right: 5px;
}
    a.btnEnc-atras{
        padding-top: 15px;
    }
    /** P E R F I L **/

    .menu-perfil a{
        font-size: .7em;
        padding: 8px 6px 6px 6px;
    }

    .menu-perfil a img{
    width: 20px;
    margin-right: 3px;
}

    .cardPerfil{
        width: 100%;
    }


    .perf-p-asset{
        width: 100%;
        margin: 30px 10px 5px 5px;
    }

    .notif-header{ 
        display:flex; justify-content:space-between; 
        align-items:center; 
        margin:20px 0px 20px 0px; 
        
    }
    .tab-notif,.btn-marcar{
        font-size: 1em;
    }
    .canjear-caj img{
        margin-top: 20px;
    }
    /*footer*/
    footer{
        background: white;
        
    }
    .info-foot{
        display: block;
        text-align: center;
        margin-bottom: 20px;
    }
    .text-foot p{
        font-size: 12px;
        color: #1e1e1e;
        margin: 0;
    }
    .text-foot a{
        text-align: center;
        color: #1e1e1e;
        font-weight: 500;
        margin-bottom: 10px;
    }
    .text-foot a:hover{
        color: #1e1e1e;

    }
    h5.h5-principal{
        font-size: 1.5em;
        margin-top: 10px;
    }
    .logo-moviles{
        display: flex;
        flex-direction: column;
       align-items: center;
       margin-top: 1em;
    }
    .logo-moviles img{
        display: block;
        width: 8em;
    }

    /***caja codigo**/
    .codigo-cajas{
        position: relative;
        width: 100%;
        color: black;
    }
    .caja-codigo {
    
    width: 40px;
    max-width: 40px;
    height: 55px;
    border-radius: 10px;
    text-align: center;
    font-size: 23px;
    font-weight: bold;
    color: black;
}

.cr-r-enterado {
        grid-template-columns: 1fr;
    }


    .cardencuesta {                  /* nivel más alto: sobresale */
    width: 100%;
    max-width: 100%;
    padding: 0px;
}

.cont-encuesta-sub{
    padding: 20px 15px;
}

.cont-enc-su-img img{
    width: 4em;
    margin-right: 0;
}

.btnEnc-nav a{
    padding: 10px 20px;
    font-size: .8em;
}

.f-e-cont2-img img{
    width: 3em;
}
.f-e-cont2-text h5{
    font-size: .8em;
}

a.btn-contestar{
    font-size: .7em;
}

}