/* aaa*/

.titulo{
  font-family: "Cormorant Garamond";
}
.titulo-optional{
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.5px;
}
.titolos-comidas{
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #222;
  letter-spacing: 0.2px;
  margin-bottom: 0.8rem;
}
.nombre-comidas{
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #222;
  letter-spacing: 0.2px;
  margin-bottom: 0.8rem;
}

.subtitulos {
    margin: 2% 0 0 0;
    padding: 0 5%;
    width: 50%;
    height: 100%;
    /* display: flex; */
}

.landingregistro .subtitulo-label{
  padding: 0 4%; 
}

.subtitulo-label {
  margin: 2% 0 0 0;
  font-size: 1.9rem; 
  font-weight: 600;   
  margin-bottom: 1rem;
}

.aller-icon {
  width: 50px;
  height: 50px;
}


.padding-text{
  padding-left: 3px;
}

/* .aller-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%; */
  /* object-fit: cover;   usa contain si tu PNG necesita no recortarse */
  /* display: inline-block;
} */
/* @media (min-width: 992px){
  .aller-icon{ width: 44px; height: 44px; }
} */


.pill-button {
  width: 100%;
  display: inline-flex;           /* Activa flexbox */
  align-items: center;            /* Centra verticalmente */
  justify-content: center;        /* Centra horizontalmente */
  padding: 4px 10px;              /* Relleno interior */
  border: 1px solid #ccc;         
  border-radius: 999px;           /* Forma de píldora */
  background-color: #fff;
  font-size: 13px;
  margin-right: inherit;
  margin-left: inherit;
  padding-right: 12px;
  padding-left: 7px;
  cursor: pointer;
  /* margin: 0.5rem !important; */
  /* padding-right: 0px !important;
  padding-left: 5px !important; */

}


.pill-button-alergeno {
  width: 100%;
  display: inline-flex;           /* Activa flexbox */
  align-items: center;            /* Centra verticalmente */
  justify-content: center;        /* Centra horizontalmente */
  padding: 13px 17px;              /* Relleno interior */
  border: 1px solid #ccc;         
  border-radius: 999px;           /* Forma de píldora */
  background-color: #fff;
  font-size: 13px;
  margin-right: inherit;
  margin-left: inherit;
  padding-right: 12px;
  padding-left: 7px;
  cursor: pointer;
  /* margin: 0.5rem !important; */
  /* padding-right: 0px !important;
  padding-left: 5px !important; */

}



 /* Ajusta tamaño del ícono */
.pill-button .icon {
  width: 27px;      
  height: 35px;
}

.sin-icono {
  display: inline-block;
  width: 33px;  /* mismo ancho que .icon */
  height: 35px;
  margin-right: -30px; /* espaciado */
}

#registro, #registro p, #registro label {
    font-size: 12px !important;
}



.pill-check-label .pill-check-input {
    display: none;
}
.pill-check-input:checked + .pill-button {
    background-color: #ECECEC;
    border-color: #ECECEC;
}

.pill-check-input:checked + .pill-button-alergeno {
    background-color: #ECECEC;
    border-color: #ECECEC;
}

.pill-check-input:checked + .alergeno-circle {
    background-color: #ECECEC;
    border-color: #ECECEC;
}


/* Círculo fijo para cada icono de alérgeno */
.alergeno-circle {
  width: 50px;      /* ancho fijo */
  height: 50px;     /* alto fijo */
  flex-shrink: 0;          /* evita que se encoja */
  align-items: center;            /* Centra verticalmente */
  border: 1px solid #ccc;         
  border-radius: 999px;           /* Forma de píldora */
  background-color: #fff;
  font-size: 13px;
  cursor: pointer;
}

/* La imagen dentro del círculo se adapta sin deformarse */
.alergeno-circle img {
  padding: 12%;
}
 

.pill-alergenos {
  width: 50px;
}