*{box-sizing:border-box}
body{font-family:Inter,Arial,Helvetica,sans-serif;margin:0;background:#fffaf0;color:#1c1c1c;line-height:1.5}
a{color:#b24e1f;text-decoration:none;transition:opacity .2s ease,color .2s ease}
a:hover{opacity:.85}
header{background:#fff3e6;border-bottom:1px solid #e6d6c5;padding:12px 0;position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;padding:8px 16px}
.logo{display:flex;align-items:center;gap:8px;flex:0 0 auto;text-decoration:none}
.logo img{width:38px;height:38px;object-fit:cover;border-radius:6px}
.logo span{font-weight:700;font-size:18px;color:#8a3815}
.header-buttons{display:flex;gap:10px;flex:1 1 auto;justify-content:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.header-buttons::-webkit-scrollbar{display:none}
.header-buttons .btn{flex:0 0 auto;min-width:90px;padding:8px 14px;border:none;background:#b24e1f;color:#fff;border-radius:6px;cursor:pointer;transition:background .2s ease,transform .12s ease;height:40px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.header-buttons .btn:hover{background:#8a3815;transform:translateY(-1px)}

.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:nowrap}.header-center{flex:1 1 auto;display:flex;justify-content:center;align-items:center}.header-buttons{display:flex;gap:10px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.header-buttons::-webkit-scrollbar{display:none}.header-right{display:flex;align-items:center;gap:1rem;flex:0 0 auto}.lang-dropdown{position:relative;display:inline-block}.lang-btn{display:inline-flex;align-items:center;gap:.45rem;background:transparent;border:none;padding:6px 8px;border-radius:6px;cursor:pointer;font:inherit}.lang-btn img{width:18px;height:auto;display:block}.lang-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #ddd;border-radius:8px;padding:6px 0;box-shadow:0 8px 20px rgba(0,0,0,.08);min-width:110px;max-width:85vw;z-index:1000}.lang-menu.show{display:block}.lang-menu li{list-style:none}.lang-menu li a{display:flex;align-items:center;gap:.5rem;padding:6px 12px;color:#333;text-decoration:none;font-weight:600}.lang-menu li a img{width:14px;height:auto;display:block}.lang-menu li a:hover{background:#f7f5f3}@media(max-width:800px){.header-inner{flex-wrap:wrap}.header-center{order:2;width:100%;justify-content:center;margin-top:8px}.header-right{order:3;width:100%;justify-content:center;gap:.7rem;margin-top:6px}.search-form{width:100%;display:flex;justify-content:center}.search-form input[type="search"],.search-form button{width:90%;max-width:420px}.lang-menu{left:50%;right:auto;transform:translateX(-50%);min-width:140px;max-width:90vw}.lang-btn img{width:16px}.lang-menu li a img{width:12px}}@media(max-width:480px){.lang-btn img{width:14px}.lang-menu li a img{width:10px}.lang-menu{min-width:120px}}@media(max-width:800px){.header-right{display:flex;flex-direction:column;align-items:center;width:100%;gap:6px;margin-top:8px}.lang-dropdown{order:2;width:90%;max-width:400px;display:flex;justify-content:center}.lang-dropdown .lang-btn{width:100%;justify-content:center}}
.cookie-banner{display:flex;align-items:center;justify-content:center;position:fixed;bottom:0;width:100%;background:#111;color:#fff;padding:8px 12px;font-size:13px;z-index:9999;gap:8px}
.cookie-banner button{padding:4px 8px;border:none;background:#fff;color:#111;border-radius:3px;cursor:pointer;font-size:12px;transition:opacity .2s ease}
.cookie-banner button:hover{opacity:.8}

.search-form{display:flex;align-items:center;flex:0 0 auto;gap:8px}
.search-form input[type=search]{padding:8px;border:1px solid #888;border-radius:6px;width:230px;transition:border-color .2s ease;height:40px;background:#fff;color:#1c1c1c}
.search-form input[type=search]:focus{outline:none;border-color:#b24e1f}
.search-form button{padding:8px 12px;border:none;background:#b24e1f;color:#fff;border-radius:6px;cursor:pointer;transition:background .18s ease,transform .12s ease;height:40px}
.search-form button:hover{background:#8a3815;transform:translateY(-1px)}main{padding:24px 16px}
.contact-page {max-width:600px;margin:40px auto;padding:25px;border:1px solid #ddd;border-radius:12px;background:#fff9f5;box-shadow:0 4px 10px rgba(0,0,0,0.05);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.contact-page h1 {text-align:center;margin-bottom:25px;color:#e67e22;font-size:2em;}
.contact-page p {text-align:center;margin-bottom:20px;font-size:1.1em;}
.contact-list {list-style:none;padding:0;margin:0;}
.contact-list li {margin-bottom:15px;font-size:1.1em;}
.contact-item {display:inline-block;padding:10px 15px;background:#fff3e6;border:1px solid #e67e22;border-radius:8px;color:#e67e22;text-decoration:none;transition:all 0.2s;}
.contact-item:hover {background:#e67e22;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.social-list {list-style:none;padding-left:0;margin-top:8px;}
.social-list li {display:inline-block;margin-right:10px;}
.social-list li a {padding:6px 12px;border-radius:6px;background:#f5f5f5;color:#333;text-decoration:none;transition:all 0.2s;}
.social-list li a:hover {background:#e67e22;color:#fff;}
.wrap{max-width:1000px;margin:0 auto;padding:16px}
h1,h2,h3{margin-top:0;color:#1c1c1c}
.page-title{font-size:32px;font-weight:700;color:#1c1c1c;background:none!important;padding:0;border:none;display:block;margin:24px 0 16px;line-height:1.3}
.page-title::before{content:none}
.page-title a{color:inherit;text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:12px}
.card{position:relative;background:#fbe5c8;padding:12px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.06);display:flex;flex-direction:column;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.08)}
.card-link{display:block;color:inherit;text-decoration:none}
.card-img-wrap{position:relative;width:100%;height:150px;border-radius:6px;overflow:hidden;margin-bottom:10px}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.card-title{margin-top:8px;font-size:16px;font-weight:600;color:#8a3815;line-height:1.3} /* título más oscuro */
.desc{font-size:14px;color:#1c1c1c;margin-bottom:8px;flex-grow:1}
.meta{font-size:12px;color:#333;margin-bottom:6px}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.tags a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#fff;background:#b24e1f;padding:2px 6px;border-radius:4px;text-decoration:none} /* fondo oscuro y texto blanco */
.tags a:hover{background:#8a3815}
.tags-overlay{display:none}
.receta-detail img.hero{width:100%;max-height:420px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.flashes{margin-bottom:12px}
.flash.success{background:#dff6e0;padding:8px;border:1px solid #a3d2a3;color:#1c4f26}
.flash.danger{background:#ffe0db;padding:8px;border:1px solid #f1a18c;color:#6e1b11}
footer{background:#fff3e6;border-top:1px solid #e6d6c5;padding:16px 0;margin-top:24px;text-align:center;font-size:14px;color:#1c1c1c}
footer a{color:#b24e1f;font-weight:500}
@media(max-width:800px){
  header{position:static}
  header .wrap{flex-direction:column;align-items:center;gap:10px}
  .header-buttons{flex-direction:column;align-items:center;width:100%;overflow:visible;position:static;background:#fff3e6;padding-bottom:8px;margin-top:8px}
  .header-buttons .btn{width:90%;max-width:340px;height:36px;font-size:15px}
  .search-form{flex-direction:column;align-items:center;width:120%;position:relative;left:50%;transform:translateX(-50%);gap:6px;background:#fff3e6;padding-bottom:10px;margin-top:8px}
  .search-form input[type=search],.search-form button{width:100%;max-width:400px;height:36px}
  main{margin-top:20px}
  .card-img-wrap{height:130px}
  .receta-mini{flex:1 1 48%}
}
@media(max-width:480px){
  .card-img-wrap{height:120px}
  .wrap{padding:12px}
  .receta-mini{flex:1 1 100%}
}
.checklist li{display:list-item;align-items:flex-start;margin-bottom:6px}
.checklist input.rcb{width:18px;height:18px;cursor:pointer;flex-shrink:0;vertical-align:middle;margin-right:10px}
.checklist .item-text{display:inline-block;vertical-align:middle;max-width:calc(100% - 36px);color:#1c1c1c}
.checklist li.checked .item-text{text-decoration:line-through;opacity:.6}
.checklist li.checked a{text-decoration:underline!important}
.checklist li a{text-decoration:underline}
.descripcion-completa{margin-top:2rem}
.recetas-similares-grid{display:flex;flex-wrap:wrap;gap:1rem}
.receta-mini{flex:1 1 calc(25% - 1rem);border:1px solid #e6d6c5;padding:.5rem;border-radius:6px;text-align:center;background:#fffaf0}
.receta-mini-img{width:100%;height:120px;object-fit:cover;border-radius:4px}
.receta-mini-title{margin-top:.5rem;font-weight:700;text-align:center;color:#8a3815} /* título oscuro para contraste */
.checked{text-decoration:line-through;opacity:.6}
.reset-progreso{background:#8a3815;color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;margin-bottom:12px;display:inline-block;font-size:14px;border:none}
.recetas-similares {
    margin-top: 3rem;
}

/* =========================
   ESPACIADO ENTRE TARJETAS
   ========================= */

.card{
  margin-top: 16px;
}

/* evita margen en la primera card */
.card:first-of-type{
  margin-top: 0;
}

/* 🔥 FIX: quitar margen en cards dentro de grids */
.grid .card{
  margin-top: 0;
}

/* =========================
   INFORMACIÓN NUTRICIONAL
   ========================= */

.info-nutricional{
  margin-top: 16px;
}

.info-title{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.info-subtitle{
  font-size: 18px;
  color: #666;
  font-weight: 600;
}

/* =========================
   LISTA NUTRIENTES
   ========================= */

.nutrientes-lista{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

/* =========================
   FAQ
   ========================= */

.faq-item{
  margin-bottom: 10px;
}

.faq-item summary{
  cursor: pointer;
  font-weight: 600;
}

.faq-item p{
  margin-top: 8px;
}

/* =========================
   ALIMENTOS RELACIONADOS
   ========================= */

.recetas-similares{
  margin-top: 24px;
}

.recetas-similares h2{
  margin-bottom: 12px;
}

/* GRID PRINCIPAL MEJORADO */
.recetas-similares-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;

  /* 🔥 CLAVE PARA CENTRAR CUANDO HAY POCOS ELEMENTOS */
  justify-content: center;
  align-content: center;
}

/* TARJETAS */
.receta-mini{
  display: block;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eee;
  text-decoration: none;

  transition: transform 0.15s ease, box-shadow 0.15s ease;

  /* 🔥 AYUDA A QUE NO SE ESTIREN MAL */
  width: 100%;
  box-sizing: border-box;
}

.receta-mini:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.receta-mini-title{
  font-size: 15px;
  font-weight: 600;
  color: #333;
  text-transform: capitalize;
}

/* =========================
   BUSCADOR ALIMENTOS
   ========================= */

.alimentos-search {
  margin-top: 15px;
}

.alimentos-search input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.alimentos-search input:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}

/* TITULO */
.alimentos-title {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 600;
  color: #222;
}

/* CALORÍAS */
.food-kcal {
  font-size: 12px;
  color: #777;
  margin-top: 5px;
}

/* NO RESULTS */
.no-results {
  display: none;
  text-align: center;
  color: #888;
  margin-top: 15px;
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .recetas-similares-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .alimentos-title {
    font-size: 18px;
  }
}


/* ===== BUSCADOR ===== */
.food-search {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* ===== RESULTADOS ===== */
.search-results {
    background: #fff;
    border: 1px solid #ddd;
    max-height: 220px;
    overflow-y: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.result-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.result-item:hover {
    background: #f2f2f2;
}


.food-itemb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px;
  border-radius: 8px;
  background: #fff3e6;
  border: 1px solid #eee;
}


/* ===== LISTA SELECCIONADOS ===== */
.selected-foods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.food-item {
    display: flex;
    flex-direction: column;   /* 🔥 CLAVE */
    align-items: center;
    justify-content: center;
}

/* nombre */
.food-name {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1; /* ocupa espacio a la izquierda */
  text-align: left;
}

/* input gramos */
.food-input {
  width: 70px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
}

/* botón eliminar */
.remove-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: opacity 0.2s ease;
}

.remove-btn:hover {
  opacity: 0.8;
}

/* botón calcular */
.calc-btn {
  margin-top: 15px;
  padding: 10px 15px;
  border: none;
  background: #b24e1f;
  color: white;
  cursor: pointer;
  border-radius: 6px;
}

.calc-btn:hover {
  background: #27ae60;
}

/* total */
.total-calories {
  margin-top: 15px;
}


.imc-form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.imc-result-card {
  margin-top: 16px;
}

.imc-result-box {
  font-size: 18px;
  margin-top: 10px;
}

.imc-bar {
  margin-top: 12px;
  height: 10px;
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
}

.imc-bar-fill {
  width: 50%;
  height: 100%;
  background: #b24e1f;
}

/* ESTADOS IMC */
.imc-estado.status_underweight {
  color: #1c1c1c;
}

.imc-estado.status_normal {
  color: #2f855a;
}

.imc-estado.status_overweight {
  color: #b7791f;
}

.imc-estado.status_obesity {
  color: #c53030;
}

.imc-info {
  margin-top: 16px;
}