/* ============================================================
   COLORES — PALETA DEL DISEÑO (guía PlanAppetit v2)
   Todo color de marca sale de estas variables: para cambiarlo en el
   sitio se cambia una sola línea. Respaldo previo: buscar.css.bak_paleta
   ============================================================ */
:root{
  --c-primario:#5CAC1F; --c-primario-rgb:92,172,31;   /* verde de marca: activo, íconos, enlaces */
  --c-oscuro:#5CAC1F;   --c-oscuro-rgb:92,172,31;     /* botones y detalles oscuros (hoy igual al primario) */
  --c-medio:#5CAC1F;    --c-medio-rgb:92,172,31;      /* textos y bordes de marca (hoy igual al primario) */
  --c-suave:#878787;                                  /* detalles suaves, texto secundario gris */
  --c-texto:#2E332D;                                  /* títulos y menú inactivo */
  --c-texto2:#2E332D;                                 /* descripciones / párrafos */
  --c-borde:#CCCCCC;                                  /* bordes */
  --c-fondo:#EAEDDD;    --c-fondo-rgb:234,237,221;    /* fondos claros (beige-verde) */
  --c-tinte:#E8F3E0;                                  /* tinte muy claro del verde (14 %) */
  --c-tinte2:#D8EBC9;                                 /* tinte claro del verde (24 %) */
  --c-pie:#9FC415;                                    /* fondo del pie de página */
  --c-sombrahd:#9FC415; --c-sombrahd-rgb:159,196,21;  /* sombra del encabezado */
  --c-acento:#FDB60E;   --c-acento-rgb:253,182,14;    /* acento naranja: solo destacado puntual; NO usar como hover */
  /* Ventanas (modales): color + transparencia */
  --win-alpha:.768;  --win-1-rgb:255,255,255; --win-2-rgb:255,255,255; --win-3-rgb:255,255,255;
}
:root{
  /* Opción A — paleta de marca planappetit (manual de marca), aplicada solo a la tarjeta de Tips & Trick */
  --deep:#1A5F7A; --dark:var(--c-oscuro); --base:var(--c-primario); --medium:#5E9AB8; --soft:#7CA7B7;
  --light:#A3C4D0; --pale:var(--c-tinte2); --ghost:var(--c-tinte);
  --ink:#1A2428; --dark-n:#2D3E45; --slate:var(--c-texto2); --muted:#7A9BA8;

  /* Colores universales por categoría (franja lateral de las tarjetas de Tips & Trick) */
  --catComida:#F77F00;
  --catCocina:#D62828;
  --catAhorraTiempo:#FFC300;
  --catNoDesperdicios:#6F4E37;
  --catRopa:#6A4C93;
  --catHogar:#1D3557;
  --catMascotas:#2A9D8F;
  --catJardin:#4C9A2A;
  --catOtros:#8D99AE;
}
body {
    margin: 0;
      background-size:cover;
      background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
  } 
  @font-face{
      font-family:'OurFont';
      src:url('../filesCss/fonts/Playlist Script.woff');
  }@font-face{
      font-family:'FontIngreList';
      src:url('../filesCss/fonts/OpenSans-LightItalic.ttf');
  }@font-face{
      font-family:'FontApart';
      src:url('../filesCss/fonts/OpenSans-BoldItalic.ttf');
  }@font-face{
      font-family:'poppinsRegular';
      src:url('../filesCss/fonts/Poppins-Regular.ttf');
  }@font-face{
      font-family:'poppinsExtraBold';
      src:url("../filesCss/fonts/Poppins-ExtraBold.ttf")
  }@font-face{
      font-family:'poppinsExtraBoldItalic';
      src:url('../filesCss/fonts/Poppins-ExtraBoldItalic.ttf');
  }@font-face{
      font-family:'poppinsSemiBold';
      src:url('../filesCss/fonts/Poppins-SemiBold.ttf');
  }@font-face{
      font-family:'poppinsLight';
      src:url('../filesCss/fonts/Poppins-Light.ttf');
  }
  
 /* Barra de navegación inferior */
        .bottom-nav {
            position: absolute;
            top: 3px;
            left: 50%; /* Lo mueve al 50% del ancho de la pantalla */
            transform: translateX(-50%); /* Lo centra correctamente */
            width: 470px;
            height: 51px;
            background: rgba(255, 255, 255, 0.148);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 2px solid var(--c-borde);
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 0px;
            z-index: 1000;
            border-radius: 25px;
            font-family:'poppinsLight';
            box-shadow: 2px 2px 7px #888888;
            animation: navBardynamicIsland 2400ms;
            
        }
        .oculto {
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
        }
        .visible {
          opacity: 1;
          visibility: visible;
          transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
        }
        .plnAppttNvBrB{
          width: 151px;
          height: 40px;
        }
        @keyframes navBardynamicIsland{
          0%{
            opacity: 0.5;
            font-size: 4px;
            width: 300px;
          }
          50%{
          
            opacity: 0.7;
            font-size: 34px;
            width: 460px;
          }
          100%{
            opacity: 1;
            font-size: 27px;
            width: 410px;
          }

        }
         .nvgBar{
          position: sticky;
          top: 10px;
          z-index: 2;
          text-align: center;
          width: 100%;
        }
        
        .plnAppttNvBr{
          width: 251px;
          height: 70px;
          position: absolute;
          top: 12px;
          left: 50%; /* Mueve el borde izquierdo del div al centro horizontal del padre */
            transform: translateX(-50%); /* Mueve el div hacia la izquierda la mitad de su propio ancho, centrándolo */
        }
        #search-btn {
            pointer-events: none;
        }
        .nav-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--c-suave);
            text-decoration: none;
            margin: 0px 0px;
            width: 51px;
            height: auto;
            transition: all 0.5s ease;
            position: relative;
            margin-bottom: 2px;
        }
        .icnNvBr{
           padding-top: 5px;
          display: flex;
          flex-direction: column;
        }
        .txtBtns{
          opacity: 0;
          font-family:'poppinsLight';
          position: absolute;
          top: 61px;
          color: var(--c-medio);
          font-size: 17px;
          transition: all 0.3s ease;
        }
        .txtBtnsNvBr{
          padding-top: 5px;
          font-family:'poppinsLight';
          color: var(--c-medio);
          font-size: 17px;
        }
        .nav-btn:hover .txtBtns{
          opacity: 1;
          animation: bounceIn 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);

        }
        /* Animación de icono al aparecer */
        @keyframes bounceIn {
            0% { transform: scale(0.5); opacity: 0; }
            70% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); }
        }
        .nav-btn:hover .txtBtnsNvBr{
          opacity: 0;
        }
        .nav-btn:hover i {
            margin-top: 15px;
        }
        .seeTxt{
          opacity: 1;
        }
        .nav-btn i {
            font-size: 30px;
            margin-bottom: 3px;
        }
        .nav-btn span {
            font-size: 14px;
            font-weight: 500;
        }
        .nav-btn.active {
            background: var(--c-primario);
            color: white;
            border-radius: 25px;
            border-top: 2px solid var(--c-medio);
            border-bottom: 2px solid var(--c-medio);
            border-left: 2px solid var(--c-medio);
            border-right: 2px solid var(--c-medio);
        }
        .activeB {
          height: 51px;
          width: 51px;
            background: var(--c-oscuro);
            color: white;
            border-radius: 25px;
            border-top: 2px solid var(--c-oscuro);
            border-bottom: 2px solid var(--c-oscuro);
            border-left: 2px solid var(--c-oscuro);
            border-right: 2px solid var(--c-oscuro);
        }
        .nav-btn.active .txtBtnsNvBr{
          opacity: 0;
        }
        .nav-btn:hover {
          height: 51px;
          width: 51px;
            background: var(--c-primario);
            color: white;
            border-radius: 25px;
            border-top: 2px solid var(--c-medio);
            border-bottom: 2px solid var(--c-medio);
            border-left: 2px solid var(--c-medio);
            border-right: 2px solid var(--c-medio);
            box-shadow: 2px 7px 10px #888888;
             
          cursor: pointer;
        }
        #Jugo{
          display: none;
        }
        #Lunch{
          display: none;
        }
.loader_bg{
    position: fixed;
    z-index: 999999;
    background: #fff;
    width: 100%;
    height: 100%;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}.backtitle{
    position: absolute;
    top: 70%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -100%);
    font-family:'poppinsRegular';
    font-size: 47px;
    color: var(--c-suave);
    width: 90%;
    animation-name: loadModal;
    animation-duration: 1s;
}


/* Modificamos el estilo del h5 */
#rcpNm {
    position: absolute;
    top: 70%; /* Ajusta según la posición de tu loader */
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado inicial */
    text-align: center;
    width: 100%;
    margin: 0;
    white-space: nowrap; /* Evita que el texto salte de línea y pierda el centro */
    opacity: 0;
}

/* Esta clase se activará desde JS */
#rcpNm.reveal {
  opacity: 1;
  
}
/* ⚡ Short on Time: Aparece de golpe con un pequeño rebote (Urgencia) */
.anim-Short_on_Time {
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 📋 The Organizer: Entrada lateral limpia y precisa (Orden) */
.anim-The_Organizer{
    animation: slideRight 0.6s ease-out forwards;
}

/* 🥗 Health Guardian: Aparece con un suave desenfoque (Frescura/Zen) */
.anim-Health_Guardian {
    animation: blurIn 1s ease-out forwards;
}

/* ✨ Joyful Cook: Brillo sutil y escala (Entusiasmo) */
.anim-Joyful_Cook {
    animation: joyful 0.8s ease-in-out forwards;
}

/* 🏡 Heart of Home: Desvanecimiento cálido y lento (Nostalgia) */
.anim-Heart_of_the_Home {
    animation: warmFade 1.2s ease-in forwards;
}

/* --- KEYFRAMES --- */
@keyframes popIn {
    0% { transform:translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform:translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes slideRight {
    0% { transform:translate(-50%, -50%) translateX(-30px); opacity: 0; }
    100% { transform:translate(-50%, -50%) translateX(0); opacity: 1; }
}

@keyframes blurIn {
    0% { filter: blur(10px); opacity: 0;transform: translate(-50%, -40%) }
    100% { filter: blur(0); opacity: 1;transform: translate(-50%, -40%) }
}

@keyframes joyful {
    0% { transform: translate(-50%, -40%) translateY(10px) scale(0.9); opacity: 0; }
    50% { text-shadow: 0 0 10px rgba(255,255,255,0.5); }
    100% { transform:translate(-50%, -40%) translateY(0) scale(1); opacity: 1; }
}

@keyframes warmFade {
    0% { opacity: 0; letter-spacing: -1px; transform: translate(-50%, -40%)}
    100% { opacity: 1; letter-spacing: 0px; transform: translate(-50%, -40%)}
}

/* Opcional: Un brillo sutil para el Joyful Cook o Heart of Home */
@keyframes textGlow {
  0% { text-shadow: 0 0 5px rgba(255,255,255,0); }
  50% { text-shadow: 0 0 15px rgba(255,255,255,0.5); }
  100% { text-shadow: 0 0 5px rgba(255,255,255,0); }
}

.glow-effect {
  animation: textGlow 2s ease-in-out infinite;
}
.loader{
  border: 0 soild transparent;
  border-radius: 50%;
  width: 480px;
  height: 480px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}.loader:before, .loader:after{
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 100% 99%;
  background-repeat: no-repeat;
  background-image: url("../../folder/img/srchImg.webp");
  background-position: 0% 0%;
  animation: loader 1.5s linear infinite;
  opacity: 0;
}.loader:before{
  animation-delay: .5s;
}@keyframes loader{
    0%{
      transform: scale(0);
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100%{
      transform: scale(1);
      opacity: 0;
    }
}
.mnDv{
    display: block;
    margin: auto;
    min-width: 374px; 
    max-width: 1920px;
    margin-left: 7%;
    margin-right: 7%;
    height: auto;
    animation: div-animation-Btn-To-Top 2700ms ease-in;
    animation-fill-mode: forwards;
    border-radius: 25px;
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.751);
    
    border-bottom: 2px solid var(--c-borde);
    border-top: 2px solid var(--c-borde);
    border-left: 2px solid var(--c-borde);
    border-right: 2px solid var(--c-borde);
    box-shadow: 2px 4px 2px #cfcfcf;
    
}
@keyframes div-animation-Btn-To-Top{
  0%{
    transform: translateY(50%);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
.bckPgs{
  color:  var(--c-suave);
  font-size: 34px;
  position: -webkit-sticky; /* Safari */
  position: absolute;
  top: 10px;
  left:2%;
  border-radius: 50%;
  padding: 5px 12px 5px 12px;
  z-index: 2;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  animation: div-animation-Left-To-Right 1500ms ease-in;
  animation-fill-mode: forwards;
  border-top: 1px solid var(--c-borde);
  border-bottom: 1px solid var(--c-borde);
  border-left: 1px solid var(--c-borde);
  border-right: 1px solid var(--c-borde);
}  
.bckPgs:hover{
  cursor: pointer;
  color: white;
  background-color: var(--c-primario);
}
.ambgMx{
  color:  var(--c-suave);
  font-size: 31px;
  position: -webkit-sticky; /* Safari */
  position: absolute;
  top: 10px;
  right: 2.5%;
  border-radius: 50%;
  padding: 6px 5px 6px 5px;
  z-index: 2;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  animation: div-animation-Left-To-Right 1500ms ease-in;
  animation-fill-mode: forwards;
  border-top: 1px solid var(--c-borde);
  border-bottom: 1px solid var(--c-borde);
  border-left: 1px solid var(--c-borde);
  border-right: 1px solid var(--c-borde);
}
.txtAmbgMx{
  font-family:'poppinsLight';
  font-size: 14px;
  position: -webkit-sticky; /* Safari */
  position: absolute;
  top: 60px;
  left:2.3%;
}
.ambgMx:hover{
  cursor: pointer;
  color: white;
  background-color: var(--c-primario);
}
.dvMnTxtNwRcp{
    text-align: center;
    padding-top: 9%;
    margin-left: 7%;
    margin-right: 7%;
}
.dvMnTxtNwRcpB{
  text-align: center;
  padding-top: 0%;
}
.txtMnNwRcp{
    font-family:'poppinsSemiBold';
    font-size: 37px;
}
.txtSrchNvlRcp{
    font-family:'poppinsSemiBold';
    font-size: 21px;
}
.txtSbInf{
    font-family:'poppinsLight';
    font-size: 17px;
}
.DvDscrp{
  text-align: left;
  margin-top: 2%;
  margin-left: 4%;
  margin-right: 4%;
}
.txtDscrp{
  font-size: 17px;
  font-family:'poppinsSemiBold';
  color: var(--c-suave);
}
/***Modal Login**/
  .modalMainLogIn{
    display: none;
    position: fixed; /* Stay in place */
    z-index: 7; /* Sit on top */
    padding-top: 30px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgb(255, 255, 255); /* Black w/ opacity */
    animation-name: loadModal;
    animation-duration: 1s;
  }
   form {
    max-width: 450px;
    height: 550px;
    margin: 2% auto;
    border-radius: 30px;
    padding: 10px 15px;
    background-color: white;
    box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
  }
  .dvAmgImg{
    text-align: center;
  }
   #imgAmbgLog{
    border-radius: 25px;
    width: 240px;
    height: 240px;
  }
  .divEml{
    margin-left: 7%;
    margin-right: 7%;
  }
   #loginEmail{
    background-color: white;
    text-align: center;
    width:96%;
    height: 25px;
    font-size: 17px;
    padding: 7px;
    border: 0.5px solid var(--c-borde);
    border-radius: 12px;
    background-image: url("../../folder/img/Correo.svg");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 1% 45%;
  }
  #loginEmail:focus{
    background-image: url("../../folder/img/Correo.svg");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 1% 45%;
  }
  #loginEmail:active{
    background-image: url("../../folder/img/Correo.svg");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 1% 45%;
  }
  
  .divPass{
    margin-left: 7%;
    margin-right: 7%;
    margin-top: 3%;
  }
  #loginPassword{
    text-align: center;
    width: 96%;
    padding: 7px;
    height: 25px;
    font-size: 17px;
    border: 0.5px solid var(--c-borde);
    border-radius: 12px;
    background-image: url("../../folder/img/Contraseña.svg");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 1% 45%;
  }
  .dvShwPs{
    margin-top: 2%;
  }
  .txBxPss{
    margin-left: 7%;
  }
  .txBxPss:hover{
    cursor: pointer;
  }
  .txtRcvPw{
    margin-left: 7%;
    font-size: 17px;
    font-family:'poppinsLight';
    text-decoration: underline;
  }
  .txtRcvPw:hover{
    cursor: pointer;
    color: var(--c-medio);
  }
  .dvLgBtn{
    text-align: center;
  }
  .dvGl{
    text-align: center;
    margin-top: 4%;
  }
  .btnRgst{
    padding: 7px 70px 7px 70px;
    color: white;
    background-color: var(--c-primario);
    font-size: 17px;
    font-family: 'poppinsRegular';
    margin: 30px 0px 0px;
    text-align: center;
    border: 0.5px solid var(--c-medio);
    border-radius: 20px;
  }
  .btnRgst:hover{
    cursor:pointer;
    transform: scale(1.02);
    background-color: var(--c-primario);
    box-shadow: 5px 5px 5px #C7C7C7;
    opacity: 0.9;
  }

  .noTextRslt{
    font-size:1.05rem; font-weight:400;
    color: var(--c-medio);
    font-size: 27px;
    font-family:'poppinsSemiBold';
  }

.dpDvMrRcp{
  margin-top: 0px;
  height: 450px;
  animation-name: dipIcon;
  animation-duration: 1s;
}
.dvMrRcp{
  text-align: center;
  padding-left: 4%;
  padding-right: 2%;
  border-bottom: 0.3px solid #d3d3d3;
}
.dvMrRcpB{
  text-align: left;
  padding-left: 4%;
  padding-right: 2%;
  border-bottom: 0.3px solid #d3d3d3;
}

.chip-bloqueado {
  background: var(--c-tinte);
  border-color: var(--c-medio);
  opacity: 1;
  cursor: default;
}
 
.chip-bloqueado .chip-nombre {
  color: var(--c-medio);
  font-family:'poppinsRegular';
}
 
.chip-lock {
  color: var(--c-medio);
  font-size: 11px;
  padding-left: 2px;
}
.recpNvl{
  width: 100%;
  text-align: center;
  padding-top: 10px;
}
.dvCrdNvlRcp{
  padding-top: 17px;
}
.txtMrRcp{
  font-family:'poppinsSemiBold';
  font-size: 19px;
}
.txtShwRslt{
font-family:'poppinsSemiBold';
  font-size: 21px;
  color: var(--c-medio);

}
.icnDsp{
  padding-left: 15px;
  color:  var(--c-suave);
  font-size: 29px;
}
.icnDsp:hover{
  cursor: pointer;
  color: var(--c-medio);
}
.divComp{
  width: 95%;
  height: 440px;
 animation: aparecer 1.5s ease-in-out; /* Aplica la animación */

}
.carSelAcom {
  width: 93%; /* Width of carousel */
  height: 166px; /* Height of carousel */
  margin-left: 3%;
  margin-right: 3%;
}
/* #carrVistos reutiliza la clase .carSelAcom, pero sus tarjetas (.cardRecipe)
   miden mucho más que los 166px fijos de esa clase (min-height:360px), y
   .carSelAcom no tiene overflow:hidden propio (solo su hijo .recpCardSameVistos
   lo tiene, y eso solo recorta DENTRO de la fila, no la altura del contenedor).
   Por eso la tarjeta se salía visualmente y quedaba encima del contenido de
   abajo. Este selector por id gana por especificidad y NO afecta a #carrIntr
   (el carrusel "Recién agregadas", que sigue usando los 166px originales). */
#carrVistos {
  height: auto;
  position: relative; /* contexto para centrar goRgVistos/goLftVistos con position:absolute */
}
/* Las flechas .rightImgEnd/.leftImgEnd (compartidas con #goRgIntr/#goLftIntr)
   son position:relative + left:100%/-10%, por eso quedaban después de la fila
   de tarjetas en vez de centradas. Se corrige solo para estas dos flechas por
   id (mayor especificidad que la clase), sin tocar el carrusel "Recién
   agregadas". Además, se ocultan/muestran según haga falta desde
   actualizarFlechasVistos() en buscar.js. */
#goRgVistos, #goLftVistos {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
}
#goRgVistos { left: auto; right: 6px; }
#goLftVistos { left: 6px; }
.carSelFltr {
  text-align: left;
  z-index: 0;
  position: sticky;
  top: 1px;
  width: 100%; /* Width of carousel */
  height: 70px; /* Height of carousel */
  margin-left: 0%;
  margin-right: 0%;
  margin-bottom: 0%;
  margin-top: 1%;
  border-bottom: 1px solid var(--c-borde);
}
/* #dvIngrByRcp reutiliza .carSelFltr, pero desde que agregamos el panel
   "Ver ingredientes" (Opción 2: fila resumen + detalle expandible con los
   chips y el texto de ayuda) su contenido real puede superar por mucho los
   70px fijos de esa clase — sobre todo en pantallas angostas, donde la fila
   resumen (texto + botón) ya envuelve a 2 líneas por sí sola. Al no crecer
   el alto del contenedor, el resto del contenido (chips y texto de ayuda)
   se desbordaba fuera de la caja y quedaba encimado con las tarjetas de
   receta que le siguen (#recpNvl). Se corrige solo aquí por id (mayor
   especificidad que la clase), sin afectar #dvserch ni el uso genérico de
   .carSelFltr. */
#dvIngrByRcp {
  height: auto;
}
/* .recpCardSameVistos comparte exactamente el mismo estilo que .recpCardSame
   (carrusel de "Vistos recientemente") — usa una clase distinta (no la misma)
   para que document.querySelector('.recpCardSame') en las flechas del
   carrusel "Recién agregadas" (moveCrrRightIntr/moveCrrLeftIntr) no encuentre
   por accidente este contenedor nuevo en vez del suyo. */
.recpCardSame,
.recpCardSameVistos{
  display: flex;
  width: 100%;
  padding-top: 2px;
  padding-bottom: 20px;
  margin: auto auto auto auto;
  overflow-x: auto; /* Set overflow in horizontal scroll */
  overflow-y: hidden; /* Hidden overflow in vertical scroll */
  scroll-snap-type: x mandatory; /* Force the scroll to snap to the start of a scroll-snap area */
  gap: 8px; /* Set gap between cards */
  flex: 0 0 calc(100% - 16px); /* Set width of card container */
}
  .rightImgEnd{
      text-align: center;
      z-index: 1;
      color: rgb(0, 0, 0);
      font-size: 40px;
      position:relative; /* Stay in place */
      left: 100%;
      opacity: 1;
      padding: 0px 10px 0px 10px;
      border-radius: 25px;
      backdrop-filter: blur(5px);
      background-color: rgba(255, 255, 255, 0.148);
      border-top-left-radius: 25px;
      border-top-right-radius: 25px;
      border-top: 2px solid var(--c-borde);
      border-bottom: 2px solid var(--c-borde);
      border-left: 2px solid var(--c-borde);
      border-right: 2px solid var(--c-borde);
    }
    .rightImgEnd:hover, .leftImgEnd:hover{
    cursor: pointer;
    transform: scale(1.1);
    color: var(--c-medio);
    }
     .leftImgEnd{
    text-align: center;
    z-index: 1;
    color: rgb(0, 0, 0);
    font-size: 40px;
    position:relative; /* Stay in place */
    left: -10%;
    opacity: 1;
    padding: 0px 10px 0px 10px;
    border-radius: 25px;
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.148);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-top: 2px solid var(--c-borde);
    border-bottom: 2px solid var(--c-borde);
    border-left: 2px solid var(--c-borde);
    border-right: 2px solid var(--c-borde);
    }
    .leftImgEnd:hover{
    cursor: pointer;
    transform: scale(1.1);
    color: var(--c-medio);
    }
    .cardRecipe{
    display: inline-table;
    scroll-snap-align: start; /* Set the element focus position in scroll container */
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    min-width: 265px;
    max-width: 265px;
    min-height: 360px;
    max-height: 420px;
    border-radius: 25px;
    margin-left: 2%;
    margin-right: 1%;
    margin-top: 2%;
    padding-left: auto;
    margin-bottom: 2%;
    transform: scale(1.02);
    border-bottom: 2px solid var(--c-borde);
    border-top: 2px solid var(--c-borde);
    border-left: 2px solid var(--c-borde);
    border-right: 2px solid var(--c-borde);
    animation-duration:2s;
    animation-name: slidein;
  }
  @keyframes slidein {
  from {
    opacity: 0;
    transform: translateY(7%);
  }

  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
    .cardRecipe:hover{
  cursor: pointer;
  transform: scale(1.07);
  box-shadow: 2px 7px 10px #888888;
}
.cardRecipe:hover i {
            transform: rotate(-360deg);
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
.rcpCrdNew{
  border-radius: 30px;
  border-bottom: 7px solid #f9edb7;
    border-top: 7px solid #f9edb7;
    border-left: 7px solid #f9edb7;
    border-right: 7px solid #f9edb7;
}
#dvNoRslt{
  display: none;
}
#dvInfRslt,#dvClusterRslt{
    display: block;
}

.dvNoRslt{
  width: 900px;
  height: 466px;
  display: flex;          /* Activa Flexbox */
  justify-content: center; /* Centra horizontalmente */
  align-items: center;    /* Centra verticalmente */
  margin: 0 auto;        /* Centra el div en la página (opcional) */
}
.dvInfRslt{
  width: 900px;
  height: 140px;
  display: flex;          /* Activa Flexbox */
  justify-content: center; /* Centra horizontalmente */
  align-items: center;    /* Centra verticalmente */
  margin: 0 auto;        /* Centra el div en la página (opcional) */
}
.dvClusterRslt{
  width: 100%;
  height: 51px;
  display: flex;          /* Activa Flexbox */
  justify-content: center; /* Centra horizontalmente */
  align-items: center;    /* Centra verticalmente */
  margin: 0 auto;        /* Centra el div en la página (opcional) */
  
}
.dvClstrTxt{
  padding-left: 7%;
  padding-right: 7%;
  padding-bottom: 20px;
  width: 100%;
  text-align: justify;
  border-bottom: 0.3px solid #d3d3d3;
}
.rcpCluster{
   width: 100%;
  text-align: center;
}

/* Contenedor de paginación */
.paginationControls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 30px auto;
  padding: 20px;
  max-width: 900px;
}

/* Botones de navegación */
.btnPage {
  background: linear-gradient(135deg, var(--c-primario) 0%, var(--c-primario) 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
   font-family:'poppinsRegular';
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btnPage:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 5px #cecece;;
}

.btnPage:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Números de página */
.pageNumbers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.pageNumber {
  min-width: 40px;
  height: 40px;
  border: 2px solid var(--c-medio);
  background: white;
  color: var(--c-medio);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pageNumber:hover {
  background: var(--c-primario);
  color: white;
  transform: scale(1.1);
}

.pageNumber.active {
  background: linear-gradient(135deg, var(--c-primario) 0%, var(--c-primario) 100%);
  color: white;
  border-color: var(--c-medio);
  transform: scale(1.15);
}

/* Info de rango */
.pageInfo {
  color: #666;
  text-align: center;
  margin-top: 10px;
   font-family:'poppinsRegular';
   font-size: 17px;
}

.pageInfo span {
  font-weight: 700;
  color: var(--c-medio);
}

/* Responsive */
@media (min-width: 768px) {
  .paginationControls {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .pageInfo {
    margin-top: 0;
  }
}

#dvPaginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 24px 0 32px;
}

.btnPag {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    color: var(--c-texto);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btnPag:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: var(--c-borde);
}

.btnPagActivo {
    background: var(--c-oscuro);   /* cambia al color primario de tu app */
    color: #fff;
    border-color: var(--c-oscuro);
    cursor: default;
    font-weight: 600;
}

.btnPagDis {
    opacity: 0.35;
    cursor: not-allowed;
}

.btnPagElipsis {
    min-width: 32px;
    text-align: center;
    color: var(--c-suave);
    font-size: 16px;
    line-height: 38px;
}

#paginacionCnt   { padding: 1.5rem 0; }
.pg-sep          { height: 0.5px; background: #e5e5e5; margin-bottom: 14px; }
.pg-info         { font-size: 17px;font-family:'poppinsRegular'; color: #666; text-align: center; margin-bottom: 14px; }
.pg-info b       { color: var(--c-medio); font-weight: 500; }
.pg-controls     { display: flex; align-items: center; justify-content: center; gap:8px; flex-wrap: wrap; }
.pg-btn          { display: flex; align-items: center; background: linear-gradient(135deg, var(--c-primario) 0%, var(--c-primario) 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  margin-left: 4%;
  margin-right: 4%;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
   font-family:'poppinsRegular';
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px; }
.pg-btn:hover    { transform: translateY(-2px);
  box-shadow: 0 5px 5px #cecece;}
.pg-btn:disabled { background: #ccc;
  cursor: not-allowed;
  opacity: 0.5;}
.pg-num          { min-width: 40px;
  height: 40px;
  border: 2px solid var(--c-medio);
  background: white;
  color: var(--c-medio);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;}
.pg-num:hover    { background: var(--c-primario);
  color: white;
  transform: scale(1.1);}
.pg-num.active   { background: linear-gradient(135deg, var(--c-primario) 0%, var(--c-primario) 100%);
  color: white;
  border-color: var(--c-medio);
  transform: scale(1.15);}
.pg-ellipsis     { width: 36px; height: 36px; display: flex; align-items: center;
                   justify-content: center; font-size: 13px; color: var(--c-suave); }
.ctrlTxt{
  text-align: center;    /* Centra el texto dentro de su contenedor */
  padding: 10px;        /* Espacio opcional alrededor del texto */
  animation: aparecer 1.5s ease-in-out; /* Aplica la animación */
}
/* Definición de la animación */
        @keyframes aparecer {
            0% {
                opacity: 0;    /* Invisible */
                transform: scale(0.9); /* Ligeramente más pequeño */
            }
            100% {
                opacity: 1;    /* Visible */
                transform: scale(1); /* Tamaño normal */
            }
        }
.txtMnNoRslt{
 font-family:'poppinsSemiBold';
  font-size: 24px;
  color: var(--c-suave);
}
.txtSbNoRslt{
 font-family:'poppinsSemiBold';
  font-size: 14px;
  color: var(--c-suave);
}


    .cardRecipeNvl{
    display: inline-table;
    scroll-snap-align: start; /* Set the element focus position in scroll container */
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    min-width: 265px;
    max-width: 265px;
    min-height: 360px;
    max-height: 420px;
    border-radius: 25px;
    margin-left: 2%;
    margin-right: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    transform: scale(1.02);
    border-bottom: 2px solid var(--c-borde);
    border-top: 2px solid var(--c-borde);
    border-left: 2px solid var(--c-borde);
    border-right: 2px solid var(--c-borde);
    animation-duration:2s;
    animation-name: slidein;
    }
    .rcpImgCrd{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    width: 100%;
    height: 307px;
    }
    .lkImg{
  z-index: 7;
  width: 37px;
  height: 37px;
  position: absolute;
  top: 7px;
  right: 0px;
  opacity: 1;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  padding: 0% 2% 0% 2%;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
}
.lkImg:hover{
  cursor: pointer;
  transform: scale(1.07);
}
.cardRecipe:hover .lkImg{
  opacity: 1;
  animation-name: dipRgtLft;
  animation-duration: 1s;
  transition: 1s;
  padding: 0% 15.51% 0% 2%;
}
.cardRecipeNvl:hover .lkImg{
  opacity: 1;
  animation-name: dipRgtLft;
  animation-duration: 1s;
  transition: 1s;
  padding: 0% 14% 0% 2%;
}
.bkMark{
  opacity: 0;
  color: var(--c-medio);
  font-size: 27px;
  position: -webkit-sticky; /* Safari */
  position: absolute;
  top: 7px;
  right: 7px;
  border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.148);
  backdrop-filter: blur(55px);
  padding: 1.5% 2.77% 1.2% 2.77%;
  z-index: 7;
}
.bkMark:hover{
  cursor: pointer;
  transform:  scale(1.07);
}
.cardRecipe:hover .bkMark{
  opacity: 1;
  animation-name: dipRgtLft;
  animation-duration: 1.5s;
}
.cardRecipeNvl:hover .bkMark{
  opacity: 1;
  animation-name: dipRgtLft;
  animation-duration: 1.5s;
}
@keyframes dipRgtLft {
  0% {
    opacity: 0;
    transform: translateX(20%);
  } 100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
.bkMark.bkMarkActive{
  opacity: 1;
  color: var(--c-medio);
  background-color: transparent;
}
.tmRcp{
  text-align: right;
  color: #efefef;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  opacity: 1;
  font-size: 17px;
  font-family:'poppinsLight';
  width: auto;
  height: auto;
  position: absolute;
  bottom: 24%;
  left: 0px;
  padding: 0% 5% 0% 4%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  text-shadow: 1px 0.5px #747474;
}
.cardRecipe:hover .tmRcp{
  opacity: 1;
  animation-name: dipIcon;
  animation-duration: 1s;
}
.cardRecipeNvl:hover .tmRcp{
  opacity: 1;
  animation-name: dipIcon;
  animation-duration: 1s;
}
@keyframes dipIcon {
0% {
  opacity: 0;
  transform: translateY(70%);
} 100% {
  opacity: 1;
  transform: translateY(0%);
}
}
.flIcn{
  text-align: left;
  color: #ffffff;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  opacity: 1;
  font-size: 17px;
  font-family:'poppinsLight';
  text-shadow: 0.7px 0.5px #000000;
  width: auto;
  height: auto;
  position: absolute;
  top: 2%;
  left: 0px;
  padding: 0% 5% 0% 7%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
}
.cardRecipe:hover .flIcn,.cardRecipeNvl:hover .flIcn{
  opacity: 1;
  animation-name: dipLftRght;
  animation-duration: 1s;
}
.icnNewOne{
  text-align: left;
  color: #ffffff;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  opacity: 1;
  font-size: 17px;
  font-family:'poppinsLight';
  text-shadow: 0.7px 0.5px #000000;
  width: auto;
  height: auto;
  position: absolute;
  top: 12%;
  left: 0px;
  padding: 0% 5% 0% 7%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}
.cardRecipe:hover .icnNewOne,.cardRecipeNvl:hover .icnNewOne{
  opacity: 1;
  animation-name: dipLftRght;
  animation-duration: 1s;
}
.iconNwOne{
  font-size: 24px;
  animation: palpitar 2s infinite;
  color: #f9edb7;
}
.stNwOneBorder{
 border-radius: 30px;
  border-bottom: 7px solid #f9edb7;
    border-top: 7px solid #f9edb7;
    border-left: 7px solid #f9edb7;
    border-right: 7px solid #f9edb7;
}
.txtNwOne{
  font-family:'poppinsLight';
  font-size: 21px;
}
@keyframes palpitar {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes dipLftRght{
  0% {
    opacity: 0;
    transform: translateX(-20%);
  } 100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
.tlBxRcp{
  width: 250px;
  margin-left: 4%;
  margin-right: 4%;
  margin-top: 2%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
.txtRcpNm{
  text-align: center;
    font-family:'poppinsRegular';
    font-size: 17px;
    width: 250px;
    margin-top: 0px;
    margin-bottom: 0px;
}
/*Grid By auth*/
.gridAuth{
  display: grid;
  grid-template-columns: 20% 80%;
  padding: 0px 5px 0px 5px;
  margin-top: 2%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}
.gridAuthCrd{
  padding: 0px;
  font-size: 30px;
  text-align: center;
}
.byUsrImg{
  margin-left: 50%;
  width: 35px;
  height: 35px;
}
.byUsrTxt{
  font-family:'poppinsLight';
  font-size: 14px;
}

/* ── Nutri-Score badge ── */
.nutriScore {
    position: absolute;
    bottom: 22.7%;
    right: 0px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    padding: 3px 8px 3px 10px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.nsLetter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-family: 'poppinsRegular';
    font-weight: 600;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.nsLetter.active {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 14px;
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.nsA { background: #3a7d3a; }
.nsA.active { background: #2e6b2e; }

.nsB { background: #8db84a; }
.nsB.active { background: #7aaa35; }

.nsC { background: #e8c84a; color: rgba(90, 74, 0, 0.7); }
.nsC.active { background: #f0c800; color: #3a3000; }

.nsD { background: #e8a030; }
.nsD.active { background: #d97f10; }

.nsE { background: #d4503a; }
.nsE.active { background: #c03020; }




.cardRecipe:hover .nsLetter {
    animation: none; /* quita dipIcon de las letras */
}

.cardRecipe:hover .nutriScore {
    animation-name: dipIcon;
    animation-duration: 1s;
}

.cardRecipe .nsLetter:not(.active) {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.cardRecipe:hover .nsLetter.active {
    transform: scale(1.25);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dvTxtMnB{

  position: sticky;
  top: 0;
  z-index: 2;
  text-align: center;
  background-color: rgba(38, 37, 37, 0);
  width: 100%;
  padding-top: 7px;
  padding-bottom: 5px;
  margin: auto auto auto auto;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
}
/* #icnCatg (botón "Filtros", entre Buscar y Limpiar) vuelve a mostrarse:
   ahora controla mostrar/ocultar dvFiltrComp (ver buscar.js, click en
   #icnCatg) en vez de tenerlo siempre visible. Usa el estilo ya definido
   más abajo en .icnCatg (misma pastilla que Buscar/Limpiar). */
#btnLimpiar{
  position: absolute;
  top: 20px;
}
/* Contenedor que envuelve input y X */
.input-wrapper {
  position: relative;   /* Necesario para posicionar la X dentro */
  display: inline-block;
  width: 70%;           /* Mismo ancho que tenía el input original */
  margin: 0 auto;       /* Centra el wrapper si el padre tiene text-align:center */
}

.clrInput {
  position: absolute;
  right: 57px;          /* Separación del borde derecho del input */
  top: 50%;
  transform: translateY(-50%);
  font-family: 'poppinsLight';
  font-size: 18px;
  color: var(--c-suave);          /* Color visible pero discreto */
  cursor: pointer;
  z-index: 1;
  transition: font-size 0.2s;
}
.clrInput:hover{
  font-size: 20px;
  color: var(--c-texto);
}
.srchInp{
	padding-left: 60px;
  /* Antes 135px: ese espacio extra reservaba lugar para el micrófono
     (que vivía ENCIMADO dentro del input, ver .btnMicVoz más abajo).
     Ahora que el micrófono se movió fuera del input, solo hace falta
     dejar espacio para la (X) de limpiar (.clrInput, en right:57px). */
  padding-right: 70px;
	border-radius: 25px;
	box-sizing: border-box;  
	font-size: 17px;
	width:100%;
	height:40px;
	border: 2px solid var(--c-borde);
  font-family:'poppinsLight';
	background-color: white;
	background-image: url("/folder/img/srchImg.webp"),url("/folder/img/icnPlnApp.png");
	background-size: 25px 25px, 35px 20px;
	background-repeat: no-repeat;
	background-position: 2% 50%,98.8% 55%;
  opacity: 0.9;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  transform: translateY(-20px);
}
.srchInp:hover .gridSerch{
  cursor: pointer;
  display: block;
}
/* Clase activa (cuando el elemento está visible) */
.activo {
  opacity: 1;
  transform: translateY(0);
}
.crsPnt{
  width: 400px;
}
.crsPnt:focus {
  border-color: var(--c-medio);
}
/* Estilo de los optgroup (etiquetas de grupo) */
.crsPnt optgroup {
  font-weight: bold;
  color: var(--c-medio);
  background-color: #eaeaea;
  padding: 5px;

}
.gtLft{
  margin-left: 30%;
}
.crsPnt:hover{
  cursor: pointer;
}
.icnFltrs{
  
  font-size: 24px;
  border-radius: 25px;
  padding: 4px 10px 4px 10px;
  border-bottom: 1.5px solid var(--c-borde);
  border-top: 1.5px solid var(--c-borde);
  border-left: 1.5px solid var(--c-borde);
  border-right: 1.5px solid var(--c-borde);
  background-color: white;
}
.icnCatg{
  margin-top: 20px;
  font-size: 15px;
  font-family:'poppinsSemiBold';
  margin-left: 0.5%;
  border-radius: 25px;
  padding: 7px 17px 7px 17px;
  border-bottom: 1.5px solid var(--c-borde);
  border-top: 1.5px solid var(--c-borde);
  border-left: 1.5px solid var(--c-borde);
  border-right: 1.5px solid var(--c-borde);
  background-color: white;
  white-space: nowrap;
  flex-shrink: 0;
}
.icnCatg:hover{
  cursor: pointer;
  color: white;
  background-color: var(--c-primario);
  box-shadow: 2px 4px 3px #888888;
  border: 1px solid var(--c-medio);
}
.icnCatgActive{
cursor: pointer;
  color: white;
  background-color: var(--c-primario);
  border: 1px solid var(--c-medio);
}
.srchBtn{
  margin-left: 0.5%;
  border-radius: 25px;
  font-size: 14px;
  font-family:'poppinsSemiBold';
  padding: 7px 10px 7px 10px;
  border-bottom: 1.5px solid var(--c-borde);
  border-top: 1.5px solid var(--c-borde);
  border-left: 1.5px solid var(--c-borde);
  border-right: 1.5px solid var(--c-borde);
  background-color: white;
  white-space: nowrap; /* Responsivo: evita que "🔎 Buscar" / "Limpiar" se
                          partan a media palabra al envolver en pantallas
                          angostas (.icnCatg ya tenía este mismo fix; a
                          .srchBtn le faltaba, y eso era lo que rompía el
                          renglón de botones en móvil). */
}
.srchBtn:hover{
  cursor: pointer;
  color: white;
  background-color: var(--c-primario);
  box-shadow: 2px 4px 3px #888888;
  border: 1px solid var(--c-medio);
}
.txtFltrs{
  font-size: 17px;
}
.srchBtnMrRcp{
  color: var(--c-medio);
  border-radius: 25px;
  font-size: 15px;
  font-family:'poppinsSemiBold';
  padding: 1px 7px 1px 7px;
  border: 1px solid var(--c-medio);
  background-color: white;
}
.srchBtnMrRcp:hover{
  cursor: pointer;
  color: white;
  background-color: var(--c-primario);
  box-shadow: 2px 4px 3px #888888;
  border: 1px solid var(--c-medio);
}
#filtIngrediente{
  width: 250px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 17px;
  padding-top: 5px;
  padding-bottom: 5px;
}
#dvserch,#dvFiltrComp,#modoCat,#modoIng{
  display: none;
  animation: ShowToTop 1700ms ease-in;
    animation-fill-mode: forwards;
}

/* ── Panel de filtros (dvFiltrComp) convertido en fila de pestañas ──
   Oculto por defecto (hereda #dvserch,#dvFiltrComp,#modoCat,#modoIng{
   display:none} de arriba) y se abre/cierra con el botón #icnCatg
   ("Filtros", ver buscar.js) — ya NO se fuerza siempre visible: se quitó
   el display:block!important para que panel.style.display desde JS
   vuelva a mandar. Estas reglas solo fijan cómo se ve YA ABIERTO: pegado
   arriba del input, mismo ancho, en fila de pestañas. */
div#dvFiltrComp.dvFiltrCompTabs{
  box-sizing: border-box;   /* el padding lateral (10px cada lado) queda DENTRO del 100% */
  width: 100%;              /* 100% de .input-wrapper (su padre ahora) = EXACTAMENTE el ancho del input */
  margin: 0;                /* sin separación: las pestañas quedan pegadas al input */
}

/* Nuevo contenedor interno: aquí es donde .clrInput (la X) se centra
   verticalmente, para que no se descentre ahora que .input-wrapper
   también contiene el panel de pestañas arriba. */
.srchInpRow{
  position: relative;
}

/* ── Botón de micrófono (búsqueda por voz) ──
   Reubicado fuera de .srchInpRow: ya no vive encimado dentro del input,
   ahora es un botón circular junto a "Buscar" (mismo lenguaje visual que
   .srchBtn/.icnCatg — borde azul, blanco de fondo, relleno azul + sombra
   al hover — solo que en círculo en vez de pastilla). */
.btnMicVoz{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--c-medio);
  background-color: white;
  color: var(--c-medio);
  font-size: 15px;
  margin-left: 0.5%;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s;
}
.btnMicVoz:hover{
  color: white;
  background-color: var(--c-primario);
  box-shadow: 2px 4px 3px #888888;
}
.btnMicVoz.escuchando{
  color: white;
  background-color: #e74c3c;
  border-color: #e74c3c;
  animation: pulseMicVoz 1s ease-in-out infinite;
}
@keyframes pulseMicVoz{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Barra flotante "Escuchando…" (búsqueda por voz) — Opción 2 ──
   Aparece debajo del input mientras se escucha, con el texto reconocido
   ya escrito en vivo dentro de #srchInp, y dos botones con etiqueta
   ("Listo" / "Cancelar") para que el usuario indique cuándo terminó.
   position:absolute (en vez de estar en el flujo normal): así NO empuja
   hacia abajo a Buscar/Filtros/Limpiar ni nada de lo que sigue — queda
   flotando fija justo debajo del input, encimada sobre el resto. right:0
   la alinea exactamente con el borde derecho de #srchInp (mismo ancho que
   .input-wrapper, su contenedor con position:relative). */
.barraVozEscuchando{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1.5px solid var(--c-borde);
  border-radius: 20px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  width: fit-content;
  font-size: 13px;
  font-family: 'poppinsLight';
  z-index: 20;
}
.barraVozOnda{
  color: #e74c3c;
  font-size: 13px;
  animation: pulseMicVoz 1s ease-in-out infinite;
}
.barraVozTexto{
  color: var(--c-suave);
}
.barraVozListo, .barraVozCancelar{
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.barraVozListo{ color: #3ba55d; }
.barraVozListo:hover{ color: #2d8145; }
.barraVozCancelar{ color: #e74c3c; }
.barraVozCancelar:hover{ color: #b83224; }

/* La franja de pestañas no necesita altura fija: que la marque el contenido */
.dvFiltrCompTabs .carSelFltr{
  height: auto;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Todas las pestañas (Categorías, Ingredientes, Tiempo, Dificultad,
   Nuevas recetas, Recetas Novedosas) quedan al mismo nivel. Nota:
   #multiCatWrap y .input-row siguen ocultos por diseño (reglas ya
   existentes más arriba en este archivo) — lo único visible de cada
   pestaña es su botón/select, por eso basta centrarlos verticalmente
   dentro de una fila de igual altura. */
.dvFiltrCompTabs .gridSerch{
  align-items: center;
}
.dvFiltrCompTabs .itemSerch.tabFiltro{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-bottom: 0; /* el padding:5px 0 5px 0 de .itemSerch dejaba un hueco antes del input */
}
/* Causa real del desnivel: .goDwn traía "position:relative; top:7px;"
   que bajaba "Nuevas recetas" y "Recetas Novedosas" 7px respecto a las
   demás pestañas. Lo neutralizamos solo dentro de esta fila. */
.dvFiltrCompTabs .goDwn{
  top: 0;
}

/* ── CARRUSEL HORIZONTAL ── */
  #carrusel-wrap {
    display: none;
    margin-top: 6px;
    background: #fff;
    border: 1.5px solid var(--c-borde);
    border-radius: 10px;
    padding: 10px 0 10px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    overflow: hidden;
  }
  #carrusel-wrap.visible { display: block; }
  .carrusel-label {
    font-size: 14px;
    margin-bottom: 8px;
    padding-left: 12px;
    font-family:'poppinsRegular';
  }
  /* .vistos se agrega SIEMPRE junto con .carrusel-label (misma clase, en el
     mismo <span>) y debe quedar después en el CSS: como ambos selectores son
     de una sola clase (misma especificidad), la regla que va después gana,
     y así font-size/font-family de .vistos sí se aplican en vez de quedar
     tapados por los de .carrusel-label. */
  .vistos{
    font-family:'poppinsSemiBold';
    font-size: 21px;
    color: var(--c-medio);
  }

  .carrusel-scroll-wrap {
    position: relative;
  }

  #carrusel {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    padding: 4px 12px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #carrusel::-webkit-scrollbar { display: none; }


  .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--c-medio);
    color: var(--c-medio);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
    flex-shrink: 0;
    font-family:'poppinsRegular';
  }
  .chip:hover { background: var(--c-tinte); }
  .chip.selected {
    background: var(--c-primario);
    color: #fff;
  }
  .chip.selected::after { content: " ✓"; font-size: 11px; }

  /* ── SUGERENCIAS ── */
  #sugerencias {
    display: none;
    position: absolute;
    top: 40px;
    left: 200px;
    width: 220px;
    background: #fff;
    border: 1.5px solid var(--c-borde);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    max-height: 220px;
    overflow-y: auto;
    z-index: 9999999999999999;
  }
  #sugerencias.visible { display: block; }

  .sug-item {
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background .1s;
  }
  .sug-item:last-child { border-bottom: none; }
  .sug-item:hover, .sug-item.active { background: #eaf5ee; }
  .sug-item mark { background: none; color: var(--c-medio); font-weight: 700; }

  .limite-msg {
    font-size: 11px;
    color: #e07b39;
    margin-top: 6px;
    padding-left: 4px;
    display: none;
  }
  .limite-msg.show { display: block; }

@keyframes ShowToTop{
  0%{
    transform: translateY(20%);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

#nwRcps{
    display: none;
}
.activSrch{
  color: #ffffff !important;
  border: 2px solid var(--c-medio) !important;
  background-color: var(--c-primario) !important;
}
.gridSerch{
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: stretch;
  width: 100%;
  padding-top: 2px;
  padding-bottom: 0px;
  gap: 2px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
  height: 2px; /* Lo más delgada posible sin que deje de poder usarse */
  background: transparent; /* Fondo transparente */
}

/* Estilo del "thumb" (la parte móvil de la barra) */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); /* Color semitransparente */
  border-radius: 2px; /* Bordes redondeados */
}

/* Opcional: Cambiar el color al pasar el mouse */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Firefox no soporta ::-webkit-scrollbar: usamos scrollbar-width para
   adelgazar la barra ahí también, en los mismos contenedores con scroll
   horizontal (fila de pestañas y carruseles de recetas). */
.gridSerch,
.recpCardSame,
.recpCardSameVistos,
.recpCardCatg,
.recpCardTm,
.recpCardIng{
  scrollbar-width: thin;
}

.itemSerch{
  width: auto;
  padding: 5px 0px 5px 0px;
  text-align: center;
  margin-left: 0px;
  flex-shrink: 0;
}
#noDsplNwRcp{
          display: none;
        }
.itemSerch .itemSerch {
  padding: 0;
}
.gridSerch > .itemSerch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.multiSelWrap   { position: relative; }
.msCatGrp       { padding: 4px 0; border-bottom: 1px solid #f0f0f0; }
.msCatGrpLbl    { display: block; font-size: 15px; font-family:'poppinsSemiBold';
                  color: var(--c-suave); 
                  padding: 4px 12px 2px; letter-spacing:.5px;color:var(--c-medio) }
.msCatItem      { display: flex; align-items: center; gap: 8px;
                  padding: 5px 12px; font-size: 14px; cursor: pointer; font-family:'poppinsRegular'; }
.msCatItem:hover{ background: #f5f5f5; }
.msCatItem input{ margin: 0; accent-color: var(--c-medio); }
.msCatItem.disabled { opacity: .4; pointer-events: none; }

.badge-fallback {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(var(--c-primario-rgb),.675);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
  font-family:'poppinsRegular';
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}
.badge-ideal {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, var(--c-primario), var(--c-primario));
    color: #fff;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    font-family: poppinsLight, sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
}
.badge-warn-wrap {
  position      : absolute;
  top           : 47px;
  left          : 8px;
  right         : 8px;
  z-index       : 10;
  display       : flex;
  flex-direction: column;
  gap           : 4px;
}
.badge-diet-warn {

  display: flex;
  align-items: flex-start;
  color: #fff;
  font-size: 0.65rem;
  font-family:'poppinsRegular';
  border-radius: 8px;
  padding: 6px 10px;
  gap: 6px;
  backdrop-filter: blur(4px);
  line-height: 1.3;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  animation: div-animation-Btn-To-Top 2700ms ease-in;
    
}
/* Dieta: verde oscuro + hoja → "ingrediente incompatible con tu dieta" */
.badge-warn-dieta {
  top        : 8px;
  background : rgba(21, 128, 61, 0.515);
  animation-duration:2s;
  animation-name: slidein;

}

/* Alergia: rojo + escudo → "contiene un alérgeno de tu perfil" */
.badge-warn-alergia {
  top        : 58px; /* se posiciona debajo del badge de dieta */
  background: rgba(220, 38, 38, 0.515);
  animation-duration:3s;
  animation-name: slidein;
}

.badge-diet-warn i {
  font-size: 0.85rem;
  margin-top: 1px;
  flex-shrink: 0;
}
/* Opcional: Un sutil borde dorado o degradado premium si pertenece a su clúster principal */
.card-sugerida {
    transition: transform 0.2s ease;
}
.icnYellw{
  color: yellow;
}

.btnSrch{
  width: auto;
  min-width: fit-content;
  white-space: nowrap;
  font-size: 17px;
  font-family:'poppinsRegular';
  padding: 4px 30px 4px 30px;
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
    backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  border-bottom: 2px solid var(--c-borde);
  border-top: 2px solid var(--c-borde);
  border-left: 2px solid var(--c-borde);
  border-right: 2px solid var(--c-borde);
  overflow: hidden;
}
.btnSrch:hover{
 color: var(--c-medio);
 border: 2px solid var(--c-medio);
  box-shadow: 2px 4px 3px #888888;
  cursor: pointer;
}

 /* ── PANEL CARRUSEL NUEVO ── */
    #panelCarrusel {
      display: none; background: #fff;
      border-bottom: 1px solid var(--c-borde);
      padding: 0 0 10px;
        position: relative;
  z-index: 2;
    }
    #panelCarrusel.visible { display: block; }

    /* Tabs de grupos (solo para modo categoría) */
    .carr-tabs {
      display: flex; overflow-x: auto; border-bottom: 1px solid #eee;
      -ms-overflow-style: none; scrollbar-width: none;
    }
    .carr-tabs::-webkit-scrollbar { display: none; }
    .carr-tab {
      padding: 8px 54px; font-size: 14px; cursor: pointer;
      color: var(--c-suave); border-bottom: 2px solid transparent;
      white-space: nowrap; flex-shrink: 0; font-family:'poppinsSemiBold';
    }
    .carr-tab.on { color: var(--c-medio); border-bottom: 2px solid var(--c-medio); }

    /* Carrusel horizontal con flechas */
    .carr-body { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; position: relative;  }
    .carr-scroll {
      display: flex; gap: 7px; overflow-x: auto;
      scroll-behavior: smooth; padding: 4px 2px; flex: 1;
      -ms-overflow-style: none; scrollbar-width: none;
    }
    .carr-scroll::-webkit-scrollbar { display: none; }
    .carr-arrow {
      width: 26px; height: 26px; border: 1px solid var(--c-medio);
      border-radius: 50%; display: flex; align-items: center;
      justify-content: center; cursor: pointer; flex-shrink: 0;
      color: var(--c-medio); font-size: 13px;
    }
    .carr-arrow:hover { background: var(--c-tinte); }

    /* Chips del carrusel */
    .chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 5px 13px; border-radius: 20px;
      border: 1.5px solid var(--c-medio); color: var(--c-medio);
      font-size: 14px; cursor: pointer; white-space: nowrap;
      flex-shrink: 0; transition: all .15s; user-select: none;
      font-family:'poppinsRegular';
    }
    .chip:hover { background: var(--c-tinte); }
    .chip.selected { background: var(--c-primario); color: #fff; }
    .chip.selected::after { content: " ✓"; font-size: 11px; }

    /* Asegurar el comportamiento de fila horizontal continuo */
#ingCarrScroll {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px; /* Espacio entre cada chip (ajústalo a tu gusto) */
    
    /* OBLIGATORIO: Desactiva el scroll suave para evitar parpadeos o retrasos al moverlo con JS */
    scroll-behavior: auto !important; 
    
    /* OBLIGATORIO: Evita que los chips se alineen magnéticamente (efecto imán de tarjetas) */
    scroll-snap-type: none !important; 
    
    /* Ocultar la barra de scroll en todos los navegadores */
    -ms-overflow-style: none;  /* IE y Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Ocultar la barra de scroll en Chrome, Safari y Opera */
#ingCarrScroll::-webkit-scrollbar {
    display: none; 
}


    /* Buscador de ingredientes */
    .ing-search-wrap {
      width:400px;
      text-align: center;
      display: flex; align-items: center; gap: 8px;
      padding: 4px 14px 0; position: relative;
      margin: 0 auto;
    }
    .ing-search-wrap i { font-size: 15px; color: var(--c-suave); }
    #ingSearchInput {
      width:100%;
      padding-left: 60px;
      flex: 1; border-radius: 25px;
      border: 2px solid var(--c-borde); font-size: 17px; box-sizing: border-box; 
      font-family:'poppinsLight';
      background-image: url("/folder/img/srchImg.webp");
      background-size: 25px 25px;
      background-repeat: no-repeat;
      background-position: 2% 50%;
      
    }
    #ingSearchInput:focus { border-color: var(--c-medio); }
    #ingSugerencias {
      display: none; position: absolute;
      top: 38px; left: 44px; right: 14px;
      background: #fff; border: 1px solid var(--c-borde);
      border-radius: 10px; z-index: 9 !important; /* Muy superior a 10 */
      box-shadow: 0 4px 16px rgba(0,0,0,.1);
      max-height: 200px; overflow-y: auto;
    }
    #ingSugerencias.visible { display: block; }
    .sug-item {
      padding: 8px 14px; font-size: 17px; cursor: pointer;
      border-bottom: 1px solid #f0f0f0; color: var(--c-texto);
      display: flex; align-items: center; gap: 8px;font-family:'poppinsRegular';
    }
    .sug-item:last-child { border-bottom: none; }
    .sug-item:hover, .sug-item.active { background: var(--c-tinte); }
    .sug-item mark { background: none; color: var(--c-medio); font-weight: 700; }
    .sug-item-add { color: var(--c-suave); font-style: italic; }
    .sug-item-noresult {
      padding: 8px 14px; font-size: 15px; cursor: default;
      color: #c0392b; font-style: italic; font-family:'poppinsRegular';
      display: flex; align-items: center; gap: 8px;
    }
    .carr-hint {
      font-size: 14px; color: var(--c-suave); padding: 8px 14px 0;
    }
    .carr-label {
      font-size: 14px; color: var(--c-suave); padding: 8px 14px 0; font-family:'poppinsSemiBold';
    }

    /* ── FILTROS ACTIVOS (igual dvFltrs) ── */
    .dvFltrs {
      padding: 7px 14px 4px;
      border-bottom: 1px solid #eee;
    }
    .txtFltrs { font-size: 14px; font-weight: 600; color: #555; }
    #dvChipsActivos {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-top: 4px; min-height: 10px;
    }

    /* Chips activos — exactamente como buscar.js los crea + icono nuevo */
    .chipFiltro {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px 4px 8px; border-radius: 20px;
      font-size: 12px; font-weight: 600;
    }
    /* Categoría: azul con icono tag */
    .chipFiltro.chip-cat {
      background: var(--c-tinte); border: 1.5px solid var(--c-medio); color: var(--c-medio);
    }
    /* Ingrediente: verde con icono leaf */
    .chipFiltro.chip-ing {
      background: #edf7ee; border: 1.5px solid #3b8a52; color: #2d6b3f;
    }
    /* Otros (tiempo, dificultad, nombre): gris */
    .chipFiltro.chip-other {
      background: #f5f5f5; border: 1.5px solid var(--c-borde); color: #555;
    }
    .chipFiltro i { font-size: 12px; }

    /* ── NUEVO: chip de búsqueda por nombre — ANCHO FIJO (el chip nunca
       cambia de tamaño). Por defecto se ven ~3 letras + "…"; al pasar el
       cursor encima, el texto completo se desliza de izquierda a derecha
       DENTRO de esa misma ventana fija (como un letrero/marquee), sin que
       el chip crezca. La distancia y duración del desplazamiento se
       calculan en JS según el largo real del texto (ver actualizarChips
       en buscar.js, variables --chip-scroll-dist / --chip-scroll-ms). ── */
    .chipFiltro.chip-nombre .chip-icono {
      flex-shrink: 0;
    }
    .chipFiltro.chip-nombre .chip-texto-ventana {
      display: inline-block;
      /* 20ch ≈ 14-16 letras visibles con esta fuente/peso (12px, 600) —
         este es el ancho FIJO del "visor" de texto: no cambia con el hover. */
      width: 20ch;
      overflow: hidden;
      white-space: nowrap;
      vertical-align: bottom;
    }
    .chipFiltro.chip-nombre .chip-texto-truncado {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      vertical-align: bottom;
      transform: translateX(0);
    }
    .chipFiltro.chip-nombre:hover .chip-texto-truncado {
      /* Deja de truncarse con "…": ahora se ve el texto completo, pero
         solo lo que cae dentro de la ventana fija de arriba es visible —
         el resto se revela deslizándolo hacia la izquierda. */
      max-width: none;
      text-overflow: clip;
      animation-name: chipScrollTexto;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-duration: var(--chip-scroll-ms, 2200ms);
    }
    @keyframes chipScrollTexto {
      from { transform: translateX(0); }
      to   { transform: translateX(var(--chip-scroll-dist, 0px)); }
    }
    .rmvChip {
      cursor: pointer; font-size: 11px; opacity: .7;
      margin-left: 2px;
    }
    .rmvChip:hover { opacity: 1; }

    /* ── ÁREA DE RESULTADO MOCK ── */
    #mockResult {
      margin: 16px 14px 0;
      background: #f8fafc; border: 1px solid var(--c-borde);
      border-radius: 12px; padding: 14px;
    }
    #mockResult h3 {
      margin: 0 0 10px; font-size: 14px; color: var(--c-medio);
    }
    .mock-row {
      display: flex; gap: 8px; align-items: baseline;
      font-size: 13px; margin-bottom: 4px;
    }
    .mock-key { color: var(--c-suave); min-width: 110px; font-size: 12px; }
    .mock-val { color: var(--c-texto); font-weight: 600; font-family: monospace; }
    .mock-val.empty { color: #ccc; font-weight: 400; font-style: italic; }
    #mockRecipes {
      margin-top: 12px; border-top: 1px solid var(--c-borde);
      padding-top: 10px; font-size: 12px; color: var(--c-suave);
    }
.btnSrchB{
  font-size: 14px;
  font-family:'poppinsSemiBold';
  padding: 2px 20px 2px 20px;
  border-radius: 25px;
  backdrop-filter: blur(5px);
  background-color: white;
  border-bottom: 2px solid var(--c-borde);
  border-top: 2px solid var(--c-borde);
  border-left: 2px solid var(--c-borde);
  border-right: 2px solid var(--c-borde);
  overflow: hidden;
}
.btnSrchB:hover{
 color: white;
  background-color: var(--c-primario);
  box-shadow: 2px 4px 3px #888888;
  cursor: pointer;
}
.dynamicTextCard{
  width: 240px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow:ellipsis;
  text-align: center;
}
.dynamicTextCard:hover{
  overflow: visible; 
  animation: 4s linear 0s infinite alternate move;
}
.noDivAccs {
    pointer-events: none;
    cursor: default; /* Opcional: cambia el cursor para indicar que no es clickeable */
}
@keyframes move {
  0%,
  25% {
    transform: translateX(0%);
    left: 0%;
  }
  75%,
  100% {
    transform: translateX(-150%);
    left: 100%;
  }
  }

  /* ── Chips de ingredientes ── */
#ingrByRcp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  align-items: center;
}

.chip-ingrediente {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--c-tinte);
  border: 1px solid var(--c-medio);
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--c-texto);
  transition: all 0.2s ease;
  cursor: pointer;
  flex-shrink: 0; /* impide que los chips se compriman */
}

.chip-ingrediente.chip-excluido {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
  text-decoration: line-through;
  opacity: 0.7;
}

.chip-recetas {
  font-size: 11px;
  color: var(--c-suave);
  font-family:'poppinsRegular';
}

.chip-excluido .chip-recetas {
  color: #fca5a5;
}

.chip-x {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  color: var(--c-suave);
  font-size: 12px;
  line-height: 1;
  transition: color 0.2s;
  font-family:'poppinsRegular';
}

.chip-x:hover {
  color: var(--c-medio);
}

.chip-excluido .chip-x {
  color: var(--c-medio);
}

.chip-excluido .chip-x:hover {
  color: #16a34a;
}

.chip-contador {
  font-size: 12px;
  color: var(--c-suave);
  width: 100%;
  margin-bottom: 4px;
}

.chip-limpiar {
  background: none;
  border: 1px solid var(--c-medio);
  color: var(--c-medio);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0 !important;
}

.chip-limpiar:hover {
  background: var(--c-primario);
  color: white;
}

/* ── Panel colapsable "Ver ingredientes" (Opción 2) ──
   Fila resumen (conteo + botón) siempre visible; el detalle (chips +
   texto de ayuda) queda oculto por defecto en #dvIngrDetalle y se
   muestra/oculta desde btnTogglePanelIngr en buscar.js. */
.dvResumenIngr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
#dvIngrDetalle {
  margin-top: 8px;
}
.srchBtnMrRcp i {
  padding-left: 4px;
}

/* ── Tooltip de recetas por ingrediente ── */
.chip-ingrediente {
  position: relative; /* necesario para el tooltip */
}

.chip-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-texto);
  color: #f1f5f9;
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 14px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 9999999999999999999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  pointer-events: none;
  min-width: 180px;
  max-width: 260px;
  white-space: normal;
}
#multiCatWrap,.input-row{
  display: none;
}
.chip-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--c-texto);
}

.chip-ingrediente:hover .chip-tooltip {
  display: block;
}

/* ── Tooltip flotante de los botones (+)/(X) del chip ──
   Reutiliza el mismo look de .chip-tooltip de arriba, pero se posiciona con
   JS (getBoundingClientRect) usando position:fixed en vez de vivir dentro del
   chip. Esto es necesario porque el contenedor de chips (.gridSerch/.carSelFltr)
   tiene overflow oculto en vertical y recorta un tooltip posicionado adentro. */
.chip-tooltip-float{
  position: fixed;
  background: var(--base); /* antes #1e293b (genérico); ahora usa la paleta real de la página */
  color: #fff;
  font-family: 'poppinsRegular';
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 14px;
  border-radius: 8px;
  white-space: normal;
  min-width: 180px;
  max-width: 260px;
  z-index: 9999999999999999999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
}
.chip-tooltip-float::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--base);
}

.normalTextCard{
	width: 180px;
  text-align: center;
  }

  /* Modal styles */
    .modalVwPln {
      position: fixed;
      inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
      background-color: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      
    }
    .modalVwPlnCnt {
      background-color: #fff;
      padding: 20px;
      border-radius: 12px;
      text-align: center;
      width: 90%;
      max-width: 700px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
      animation-duration:2s;
      animation-name: div-animation-Btn-To-Top;
    }
    .txtVwPlnQst{
      font-size: 21px;
      font-family:'poppinsLight';
    }
        .modalVwPlnBtn {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 15px;
    }

    .modalVwPlnBtn button {
      font-size: 17px;
      font-family:'poppinsSemiBold';
      padding: 7px 45px 7px 45px;
      border-radius: 25px;
      border-bottom: 3px solid var(--c-medio);
      border-top: 3px solid var(--c-medio);
      border-left: 3px solid var(--c-medio);
      border-right: 3px solid var(--c-medio);
      color: var(--c-medio);
      background-color: white;
      animation: div-animation-Left-To-Right 2.5s ease-in;
      animation-fill-mode: forwards;
    }
    .modalVwPlnBtn button:hover {
      cursor: pointer;
      color: white;
      background-color: var(--c-primario);
    }
    .subTxtVwPlnQst{
      font-size: 14px;
      font-family:'poppinsLight';
    }

    .divMsgCol{
  text-align: center;
  display: none;
  z-index: 9;
}
.txtColt{
  color: var(--c-medio);
	font-family:'poppinsSemiBold';

  position: fixed;
  bottom: 40%;
  transform: translateX(-50%);
  min-width: 374px; 
  max-width: 900px;
  
  font-size: 27px;
  padding: 10px 50px 10px 45px;
  border-radius: 25px;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.37);
  border-top: 3px solid var(--c-medio);
  border-bottom: 3px solid var(--c-medio);
  border-left: 3px solid var(--c-medio);
  border-right: 3px solid var(--c-medio);
  text-shadow: 1px 1px #332b22;
  animation: div-animation-dynamicIsland 1800ms;
}
.hrtAdded{
  font-size: 35px;
  color: red;
    
}
@keyframes div-animation-dynamicIsland{
  0%{
    font-size: 4px;
    width: 200px;
  }
  50%{
    font-size: 34px;
    width: 600px;
  }
  100%{
    font-size: 27px;
    width: 500px;
  }

}

/*Modal add lst*/
.modalShwLst{
  display: none;
  position: fixed;
  z-index: 8;
  padding-top: 0; /* antes 30px: con height:100% (content-box) hacía el overlay 30px más alto que la pantalla y descentraba el modal */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  animation-name: loadModal;
  animation-duration: 1s;
}
.divShwList{
  /* Siempre centrado horizontal y verticalmente dentro de .modalShwLst (position:fixed,
     pantalla completa). Se centra con top/left 50% + translate para no depender de
     display:flex (el JS abre el modal con style.display = "block"). */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: min(690px, calc(100% - 20px));
  height: auto;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  margin: 0;
  border-radius: 30px;
  padding: 10px 15px;
  background-color: white;
  box-shadow: 0 12px 15px 0 rgba(0,0,0,.24), 0 17px 50px 0 rgba(0,0,0,.19);
  text-align: center;
}
.clsAddNwLst{
  font-family: 'poppinsRegular';
  font-size: 14px;
  position: absolute;
  top: 18px;
  right: 18px;
  left: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  border-radius: 50%;
  backdrop-filter: blur(5px);
  background-color: rgba(255,255,255,0.148);
  border: 2px solid var(--c-borde);
  cursor: pointer;
}
.clsAddNwLst:hover { color: var(--c-medio); border-color: var(--c-medio); }
.dvIconAddLst { text-align: center; margin-top: 4%; margin-bottom: 2%; }
.icoAddLst {
  width: 52px; height: 52px; color: var(--c-medio); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 2px;
}
.txtEyebrowAddLst{
  display: block;
  font-family: 'poppinsSemiBold';
  font-size: 12px; font-weight: 700;
  color: var(--c-medio);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dvShowLst { text-align: center; margin-left: 12%; margin-right: 12%; }
.txtShrRecp { font-family: 'poppinsSemiBold'; font-size: 19px; color: var(--c-texto); }
.rcpName { color: var(--c-medio); }
.dvAddNwLst { text-align: center; margin-top: 2%; cursor: pointer; }
.txtAddNwLst{
  font-size: 17px;
  font-family: 'poppinsSemiBold';
  color: var(--c-medio);
  padding: 8px 30px;
  width: 70%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--c-tinte);
  border-radius: 25px;
  border: 2px dashed var(--c-medio);
  animation: div-animation-Left-To-Right 800ms ease-in;
  animation-fill-mode: forwards;
}
.stRcpLst { margin: 3% 7% 7%; }
.dvtxtNoLst { text-align: center; }
.txtNoLst { font-size: 27px; font-family: 'poppinsLight'; }
.dvBtnAddlsit { text-align: center; margin: 5% 0; }
.txtBtnAddLst{
  border-radius: 25px;
  font-family: 'poppinsSemiBold';
  font-size: 16px;
  padding: 10px 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: white;
  background-color: var(--c-primario);
  border: 2px solid var(--c-medio);
  cursor: pointer;
}
.txtBtnAddLst:hover { box-shadow: 5px 5px 5px #C7C7C7; }
.addNwLstImg { padding: 10px 15px 0; width: 21px; height: 21px; }
.lstImg { width: 54px; height: 54px; object-fit: cover; border-radius: 14px; }
.gridLstColct {
  display: grid;
  grid-template-columns: 25% 75%;
  align-items: center;
  background-color: #ffffff;
  border-radius: 18px;
  border: 1px solid var(--c-tinte2);
  box-shadow: 0 2px 6px rgba(var(--c-primario-rgb),0.08);
  height: 74px;
  margin-top: 10px;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.gridLstColct:hover {
  box-shadow: 0 4px 12px rgba(var(--c-primario-rgb),0.18);
  transform: translateY(-1px);
}
.dvTxtNmLstCltFav { text-align: left; margin-top: 3%; padding-left: 2%; }
.dvTxtNmLstCltFav:first-child { margin-top: 0; }
.tusColeccionesScroll { max-height: 252px; overflow-y: auto; padding-right: 4px; }
.txtNmLstCltFav{
  font-family: 'poppinsSemiBold';
  font-size: 17px;
  color: var(--c-medio);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.txtNmLstCltFavHeart { color: #a32d2d; }
.btnDeleteColct{
  position: absolute;
  top: 50%; right: 18px;
  transform: translateY(-50%);
  color: var(--c-suave);
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
}
.btnDeleteColct:hover { color: #d9534f; }
.itemLstColctA { padding: 5px 5px 5px 10px; font-size: 10px; text-align: center; }
.itemLstColctB { padding-right: 40px; text-align: left; font-size: 10px; }
.txtNmLstClt { font-size: 15px; font-family: 'poppinsSemiBold'; }
.selctdLst{
  background-color: var(--c-tinte);
  box-shadow: 0 4px 12px rgba(var(--c-primario-rgb),0.18);
  border: 2px solid var(--c-medio);
}
.selctdLst .txtNmLstClt { color: var(--c-texto); }
.selctdLst .btnDeleteColct { display: none; }
.selctdLst::after{
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--c-medio);
  font-size: 16px;
  position: absolute;
  top: 50%; right: 18px;
  transform: translateY(-50%);
}
/* ── Botón "quitar de esta colección" ──
   Solo existe en el HTML de las tarjetas donde la receta ya está guardada
   (ver crearTarjetaColeccion). Vive en el mismo lugar que el check (✓): al
   pasar el mouse se oculta el check y aparece este botón en su lugar. */
.btnRemoveFromColct{
  display: none;
  position: absolute;
  top: 50%; right: 18px;
  transform: translateY(-50%);
  color: var(--c-suave);
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
}
.selctdLst:hover::after{ display: none; }
.selctdLst:hover .btnRemoveFromColct{ display: block; }
.btnRemoveFromColct:hover{ color: #d9534f; }
.slctdIcon { color: var(--c-medio); }
.bkMarkActive { color: var(--c-medio); }

/*Modal: Crear colección nueva*/
.modalAddColct{
  display: none;
  position: fixed;
  z-index: 7;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  animation-name: loadModal;
  animation-duration: 1s;
}
.dvAddColct{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; max-width: 460px;
  max-height: 90vh; overflow-y: auto;
  border-radius: 28px;
  padding: 30px 28px 26px;
  background-color: white;
  box-shadow: 0 12px 32px rgba(var(--c-primario-rgb),0.18);
}
.dvclsMdlClct { text-align: right; position: relative; top: 0; right: 2%; }
.clsMdlClct{
  font-family: 'poppinsRegular';
  z-index: 1; font-size: 14px;
  position: absolute; top: 18px; right: 18px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%;
  backdrop-filter: blur(5px);
  background-color: rgba(255,255,255,0.148);
  border: 2px solid var(--c-borde);
  cursor: pointer;
}
.clsMdlClct:hover { color: var(--c-medio); backdrop-filter: blur(5px); }
.dvIconAddColct { text-align: center; margin-bottom: 2px; }
.icoAddColct{
  width: 52px; height: 52px; color: var(--c-medio); font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 2px;
}
.txtEyebrowAddColct{
  display: block;
  font-family: 'poppinsSemiBold';
  font-size: 11px; font-weight: 700;
  color: var(--c-medio);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.dvAddMnFav { text-align: center; }
.txtMn { font-family: 'poppinsSemiBold'; font-size: 22px; color: var(--c-texto); }
.txtSubAddColct{
  margin: 6px auto 0; max-width: 320px;
  font-family: 'poppinsLight'; font-size: 13px; color: var(--c-suave);
}
.divAddColct { padding: 5px; margin-top: 18px; }
.itemFavA{
  display: flex; align-items: center; gap: 10px;
  background-color: var(--c-tinte);
  border: 2px solid var(--c-medio);
  border-radius: 25px;
  padding: 4px 8px 4px 18px;
}
.icoInputAddColct { color: var(--c-medio); font-size: 16px; }
#nwLstColct{
  border: none; background: transparent; outline: none;
  flex: 1; width: auto; margin: 0;
  box-sizing: border-box; box-shadow: none;
  padding: 12px 0;
  font-family: 'poppinsLight'; font-size: 15px; color: var(--c-texto);
}
.dvAddLst { text-align: center; margin-top: 20px; }
.btnAddList{
  font-family: 'poppinsSemiBold'; font-size: 16px;
  border-radius: 25px; padding: 10px 34px;
  display: inline-flex; align-items: center; gap: 8px;
  color: white; background-color: var(--c-primario);
  border: 2px solid var(--c-medio);
  cursor: pointer;
}
.btnAddList:hover{
  color: var(--c-medio);
  background-color: white;
  box-shadow: 2px 4px 2px #cfcfcf;
}
.mnDvCat{
  margin: auto auto 0% auto;
  width: 90%;
  height: 450px;
}
  .carouselB{
  position: relative;
  width: 96%; /* Width of carousel */
  height: 166px; /* Height of carousel */
  margin-left: 2%;
  margin-right: 2%;
}
.recpCardCatg{
  display: flex;
  width: 100%;
  padding-top: 20px;
  margin: auto;
  position: relative;
  overflow: hidden;
  overflow-x: auto; /* Set overflow in horizontal scroll */
  overflow-y: hidden; /* Hidden overflow in vertical scroll */
  scroll-snap-type: x mandatory; /* Force the scroll to snap to the start of a scroll-snap area */
  gap: 8px; /* Set gap between cards */
  flex: 0 0 calc(100% - 16px); /* Set width of card container */
}
.cardRecipeB{
  display: flex;
  scroll-snap-align: start; /* Set the element focus position in scroll container */
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  min-width: 380px;
  max-width: 480px;
  min-height: 340px;
  max-height: 240px;
  border-radius: 25px;
  margin-left: 20px;
  margin-bottom: 20px;
  transform: scale(1.02);
  border-bottom: 2px solid var(--c-borde);
border-top: 2px solid var(--c-borde);
border-left: 2px solid var(--c-borde);
border-right: 2px solid var(--c-borde);
}
.cardRecipeB:hover{
  cursor: pointer;
  transform: scale(1.07);
  box-shadow: 2px 7px 10px #888888;
}
.cardRecipeB .rcpImgCrdB{
  border-radius: 25px;
  width: 100%;
  height: 100%;
}
.txtCatNm{
  text-align: left;
  font-family:'poppinsRegular';
  font-size: 21px;
  padding: 5px 10px 5px 30px;
  color: white;
  margin: auto;
  position: absolute;
  top:74%;
  left: 0%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  backdrop-filter: blur(5px);
  background-color: rgba(50, 20, 20, 0.148);
  border-top: 2px solid var(--c-borde);
  border-bottom: 2px solid var(--c-borde);
  border-right: 2px solid var(--c-borde);
  text-shadow: 1px 1px #515151;
}
.txtCatNm:hover{
  transform: scale(1.05);
}
.txtCatNmSub{
  text-align: left;
    font-family:'poppinsRegular';
    font-size: 12px;
    padding: 5px 10px 5px 30px;
    color: white;
    margin: auto;
    position: absolute;
    top:90%;
    left: 0%;
    
    backdrop-filter: blur(5px);
    background-color: rgba(50, 20, 20, 0.148);
   
    text-shadow: 1px 1px #515151;
}

.leftImg{
  text-align: center;
	z-index: 1;
	color: rgb(0, 0, 0);
	font-size: 40px;
	position:relative; /* Stay in place */
	left: -8%;
  opacity: 1;
  padding: 0px 10px 0px 10px;
  border-radius: 25px;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-top: 2px solid var(--c-borde);
  border-bottom: 2px solid var(--c-borde);
  border-left: 2px solid var(--c-borde);
  border-right: 2px solid var(--c-borde);
  }


.rightImg{
    text-align: center;
    z-index: 1;
    color: rgb(0, 0, 0);
    font-size: 40px;
    position:relative; /* Stay in place */
    left: 98.4%;
    opacity: 1;
    padding: 0px 10px 0px 10px;
    border-radius: 25px;
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.148);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-top: 2px solid var(--c-borde);
    border-bottom: 2px solid var(--c-borde);
    border-left: 2px solid var(--c-borde);
    border-right: 2px solid var(--c-borde);
  }
  .rightImg:hover, .leftImg:hover{
	cursor: pointer;
	transform: scale(1.1);
	color: var(--c-medio);

  }

  .txtRecmdia{
    font-size: 27px;
    font-family:'poppinsSemiBold';
    color: var(--c-medio);
  }
  .dspMrRcp{
    padding: 20px 0px;
    width: 100%;
    text-align: center;
  }
.mnDvTm{
  margin: auto auto 0% auto;
  width: 90%;
  height: 450px;
}
  .recpCardTm{
  display: flex;
  width: 100%;
  padding-top: 20px;
  margin: auto;
  position: relative;
  overflow: hidden;
  overflow-x: auto; /* Set overflow in horizontal scroll */
  overflow-y: hidden; /* Hidden overflow in vertical scroll */
  scroll-snap-type: x mandatory; /* Force the scroll to snap to the start of a scroll-snap area */
  gap: 8px; /* Set gap between cards */
  flex: 0 0 calc(100% - 16px); /* Set width of card container */
}

.mnDvIng{
  margin: auto auto 2% auto;
  width: 90%;
  height: 450px;
}

.recpCardIng{
  display: flex;
  width: 100%;
  padding-top: 20px;
  margin: auto;
  position: relative;
  overflow: hidden;
  overflow-x: auto; /* Set overflow in horizontal scroll */
  overflow-y: hidden; /* Hidden overflow in vertical scroll */
  scroll-snap-type: x mandatory; /* Force the scroll to snap to the start of a scroll-snap area */
  gap: 8px; /* Set gap between cards */
  flex: 0 0 calc(100% - 16px); /* Set width of card container */
}

 #ldSving{
  display: none;
}
  /* Estilos del loader */
.ldSving {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Asegura que esté por encima de todo */
}
/*Load animation*/
.lds-ripple,
.lds-ripple div {
  box-sizing: border-box;
}
.lds-ripple {
  display: inline-block;
  position: relative;
  color: white;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid currentColor;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
.ldsTxt{
  /* FIX: "right: -370%" sacaba el texto de la pantalla en cualquier ancho de
     ventana normal, dejando visible solo el spinner. Ahora se centra
     horizontalmente con left:50% + translateX(-50%) y queda debajo del
     spinner, sin depender del ancho de la ventana.
     "top" se calcula a partir del centro (50%) + un desplazamiento fijo en
     píxeles (en vez de un porcentaje) para que quede siempre por debajo del
     spinner (que mide 80px) sin sobreponerse, sin importar la altura de
     la ventana. */
  position: absolute;
  top: calc(50% + 80px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
  width: 320px;
  color: white;
  font-size: 17px;
  font-family: 'poppinsRegular';
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 1;
  }
  100% {
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    opacity: 0;
  }
}

.back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            font-size: 27px;
            font-family:'poppinsLight';
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
            background-color: var(--c-primario);
            color: white;
        }

        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top:hover {
            background-color: var(--c-oscuro);
            color: white;
            transform: translateY(-3px);
            box-shadow: 2px 4px 2px #cfcfcf;
        }

        
/*         Notificaciones   */
          .coverNotification{
            position: fixed;
                inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
                align-items: center;
                justify-content: center;
                z-index: 999999999999999999999999999999;
                
              width: 100%; /* Full width */
              height: 100%; /* Full height */
              overflow: auto; /* Enable scroll if needed */
              background-color: rgba(77, 77, 77, 0.303); /* Fallback color */
              animation-name: loadModal;
              animation-duration: 0.3s;
            }

        .notification {
            position: fixed;
            max-width: 470px;
            width: 90%;
            padding: 18px 40px;
            border-radius: 25px;
           background-color: var(--c-primario);
            color: white;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 1000;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s;
            pointer-events: none;
        }
        
        .notification.center {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
        }
        
        .notification.bottom {
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
        }
        
        .notification.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            pointer-events: all;
        }
        
        .notification.bottom.show {
            transform: translateX(-50%) translateY(0);
        }
        
        .notification.hide {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.8);
        }
        
        .notification.bottom.hide {
            transform: translateX(-50%) translateY(20px);
        }
        
        .notification-content {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .clsNotf{
          background: none;
            border-radius: 25px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 18px;
            cursor: pointer;
            transition: color 0.2s;
            padding: 1px 10px 1px 10px;
            width: 4px;
            margin: 0px;
            font-family:'poppinsSemiBold';
        }
        .clsNotf:hover {
            color:  white;
        }
        
        .notification-icon {
            font-size: 24px;
            flex-shrink: 0;
        }
        .clsNotf{
          background: none;
            border-radius: 25px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 18px;
            cursor: pointer;
            transition: color 0.2s;
            padding: 1px 10px 1px 10px;
            width: 4px;
            margin: 0px;
            font-family:'poppinsSemiBold';
        }
        .clsNotf:hover {
            color:  white;
        }
        .notification-message {
          text-align: center;
          font-family:'poppinsLight';
            font-size: 17px;
            line-height: 1.4;
            width: 400px;
        }
        .notification-submessage{
          font-size: 14px;
        }
        
        .notification-close {
            background: none;
            border-radius: 25px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 18px;
            cursor: pointer;
            transition: color 0.2s;
            padding: 1px 10px 1px 10px;
            width: 5px;
            margin: 0px;
            font-family:'poppinsSemiBold';
        }
        
        .notification-close:hover {
            color:  white;
        }
        
        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 0 0 12px 12px;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            width: 100%;
            background-color: white;
            transform-origin: left;
            transform: scaleX(0);
            border-radius: 0 0 12px 12px;
        }
        
        @keyframes progress {
            to {
                transform: scaleX(1);
            }
        }

        .filtSelect {
          /* 🔥 CRUCIAL: Elimina el diseño nativo del navegador */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none; 
        text-align: center;
          width: 150px;
          border: 1px solid var(--c-borde);
          background: white;
          outline: none;
          font-size: 17px;
          font-family:'poppinsRegular';
          padding: 4px 30px 4px 30px;
          border-top-right-radius: 25px;
          border-top-left-radius: 25px;

    backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);

          border-bottom: 2px solid var(--c-borde);
          border-top: 2px solid var(--c-borde);
          border-left: 2px solid var(--c-borde);
          border-right: 2px solid var(--c-borde);
          overflow: hidden;
          font-family:'poppinsRegular';
          transition: all 0.2s ease;
        }
        .filtSelect:hover{
          color: var(--c-medio);
          border: 2px solid var(--c-medio);
          box-shadow: 2px 4px 7px #888888;
          cursor: pointer;
        }
        /* #filtTiempo y #filtDificultad comparten .filtSelect (ancho fijo de
           150px pensado para el input de ingredientes), pero su texto
           seleccionado ("Rápido ( ≤ 30 min)", "Intermedio", etc.) no cabía
           y se veía cortado. Se ensanchan y se reduce un poco el padding
           derecho (sin flecha nativa, ese espacio no se usaba). */
        .dvFiltrCompTabs #filtTiempo{
          width: 210px;
          font-size: 17px;
          padding-right: 12px;
        }
        .dvFiltrCompTabs #filtDificultad{
          width: 160px;
          font-size: 17px;
          padding-right: 12px;
        }
        .filtSelect:hover .hvrBtn{
          color: var(--c-medio);
          border: 2px solid var(--c-medio);
            box-shadow: 2px 4px 3px #888888;
            cursor: pointer;
          }
        .addSrchIcn{
          background-image: url("/folder/img/srchImg.webp"),url("/folder/img/PlanAppIcn.png");
	background-size: 25px 25px, 40px 30px;
	background-repeat: no-repeat;
	background-position: 2% 50%,99% 50%;
        }
        .filtSelectCatg {
          /* 🔥 CRUCIAL: Elimina el diseño nativo del navegador */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none; 
          width: 220px;
          padding: 6px 10px;
          border-radius: 20px;
          border: 1px solid var(--c-borde);
          background: white;
          outline: none;
          font-size: 17px;
          font-family:'poppinsRegular';
          padding: 4px 5px 4px 10px;
          border-radius: 25px;
          backdrop-filter: blur(5px);
          background-color: white;
          border-bottom: 2px solid var(--c-borde);
          border-top: 2px solid var(--c-borde);
          border-left: 2px solid var(--c-borde);
          border-right: 2px solid var(--c-borde);
          overflow: hidden;
          font-family:'poppinsRegular';
          transition: all 0.2s ease;
        }
        .filtSelectCatg:hover{
        box-shadow: 2px 4px 7px #888888;
          cursor: pointer;
        }
.dvBtn{
  width: 100%;
  text-align: center;
  padding-top: 10px;
}
.tpBn{
  padding-top: 15px;
}
.goDwn{
  position: relative;
  top: 7px;
}
.gridSerch .goDwn{
  top: 0;
}
.txtFltrs{
  padding-left: 20px;
  font-size: 15px;
  font-family:'poppinsRegular';
  color: var(--c-medio);
}
.smlTxtFltrs{
  font-size: 17px;
 font-family:'poppinsSemiBold';
  color: var(--c-medio);
}
.smlTxtFltrsmll{
  font-size: 12.7px;
 font-family:'poppinsSemiBold';
  color: var(--c-medio);
}
.smlTxtFltrsmllBrd{
  border: 1px solid var(--c-medio);
  padding: 0px 5px;
  border-radius: 25px;
  margin-left: 5px;
  margin-right: 5px;
}
.dvSmllTxtCntr{
  padding-top: 11px;
  text-align: center;
  padding-bottom: 7px;
}
#carrusel-wrap{
  animation: ShowToTop 1700ms ease-in;
    animation-fill-mode: forwards;
}
.chipFiltro {
  background: #f0f0f0;
  border-radius: 20px;
  padding: 4px 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  color:var(--c-medio);
  border-bottom: 2px solid var(--c-medio);
  border-top: 2px solid var(--c-medio);
  border-left: 2px solid var(--c-medio);
  border-right: 2px solid var(--c-medio);
  animation: ShowToTop 1500ms ease-in;
  animation-fill-mode: forwards;
}

.chipFiltro .rmvChip {
  cursor: pointer;
  font-weight: bold;
  color: var(--c-texto);
}
.chipFiltro span {
  font-family:'poppinsRegular';
}
#dvFltrs{
  display: none;
}
.dvFltrs{
  z-index: 1; /* Forzamos un nivel bajo para que no tape nada */
  position: sticky;
  top: 100px;
  backdrop-filter: blur(5px);
}
/* ── Chip activo como filtro de inclusión ── */
.chip-activo-ing {
  background: #edf7ee;
  border: 2px solid #3b8a52 !important;
  color: #2d6b3f !important;
  font-weight: 700;
}
.chip-activo-proteina {
  background: #fff4ed;
  border: 2px solid #c2610f !important;
  color: #9a4a0a !important;
  font-weight: 700;
}

/* ── Borde de tarjeta con ingrediente seleccionado ── */
.card-ing-activa {
  border: 4px solid #3b8a52 !important;
  box-shadow: 0 0 12px rgba(59, 138, 82, 0.35) !important;
}
.card-proteina-activa {
  border: 4px solid #c2610f !important;
  box-shadow: 0 0 12px rgba(194, 97, 15, 0.35) !important;
}
        
/* Hacer responsivo el contenedor */
        @media (max-width: 900px) {
            .dvNoRslt {
                width: 100%;     /* Ocupa el ancho disponible en pantallas pequeñas */
                height: auto;   /* Altura ajustable */
                min-height: 50vh; /* Altura mínima relativa al viewport */
            }
            .dvInfRslt {
                width: 100%;     /* Ocupa el ancho disponible en pantallas pequeñas */
                height: auto;   /* Altura ajustable */
                min-height: 50vh; /* Altura mínima relativa al viewport */
            }
            .dvClusterRslt {
                width: 100%;     /* Ocupa el ancho disponible en pantallas pequeñas */
                height: auto;   /* Altura ajustable */
                min-height: 50vh; /* Altura mínima relativa al viewport */
            }
        }


        /* ============================================================
           Footer reutilizable (Términos y Condiciones) -- mismo bloque
           copiado tal cual en shrTipsTricks.css.
           ============================================================ */
        .ftPlnApp{
            width: 100%;
            box-sizing: border-box;
            padding: 14px 20px;
            text-align: center;
            background: var(--ghost);
            border-top: 1px solid var(--pale);
        }
        .txtFtPlnApp{
            font-family: 'poppinsLight';
            font-size: 12px;
            color: var(--slate);
            line-height: 1.5;
        }
        .lkFtTerminos{
            font-family: 'poppinsSemiBold';
            color: var(--base);
            text-decoration: underline;
            cursor: pointer;
        }
        .lkFtTerminos:hover{ color: var(--dark); }

        .nutriscore-footer {
      background: #16233f;
      background: rgba(255, 255, 255, 0.148);
                backdrop-filter: blur(5px);
      border-radius: 8px;
      margin: 0px 0px 25px 0px;
      padding: 20px 70px 10px 126px;
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      font-family: 'Segoe UI', Arial, sans-serif;
    }

    .nutriscore-footer__grades {
      display: flex;
      gap: 3px;
      flex-shrink: 0;
    }

    .nutriscore-footer__grade {
      width: 25px;
      height: 25px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
    }

    .nutriscore-footer__grade--a { background: #2e8b47; color: #e8f6ec; }
    .nutriscore-footer__grade--b { background: #85bb2f; color: #233a08; }
    .nutriscore-footer__grade--c { background: #fecb02; color: #4a3b00; }
    .nutriscore-footer__grade--d { background: #ee8100; color: #3d1f00; }
    .nutriscore-footer__grade--e { background: #e63e11; color: #fdeae5; }

    .nutriscore-footer__text {
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
      color: var(--c-suave);
      flex: 1;
      min-width: 260px;
    }