/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
:root {
  /* Palette */
  --bg:         #F7F3ED;
  --bg-card:    #FFFFFF;
  --hero-1:     #080F09;
  --hero-2:     #0F2017;
  --primary:    #0D1F14;
  --accent:     #C2572A;
  --accent-2:   #C98C20;
  --text:       #16110C;
  --text-2:     #463B31;
  --text-3:     #7A6E64;
  --border:     #E4DCD2;
  --bg-muted:   #F0EBE3;

  /* Category colors */
  --masas:         #C98C20;
  --carnes:        #A83232;
  --pastas:        #B8881A;
  --guarniciones:  #3A7A46;
  --postres:       #7A4A9A;
  --basicos:       #2A6A7A;
  --salsas:        #C44B1A;
  --bebidas:       #1A6B8A;
  --mis_recetas:   #7A6040;
  --nav-bg:        rgba(247,243,237,.94);

  /* Shadows */
  --sh-xs:  0 1px 2px rgba(13,31,20,.06);
  --sh-sm:  0 2px 8px rgba(13,31,20,.08), 0 1px 2px rgba(13,31,20,.05);
  --sh-md:  0 6px 20px rgba(13,31,20,.12), 0 2px 6px rgba(13,31,20,.06);
  --sh-lg:  0 16px 48px rgba(13,31,20,.18), 0 4px 12px rgba(13,31,20,.08);
  --sh-xl:  0 24px 64px rgba(13,31,20,.22), 0 8px 20px rgba(13,31,20,.10);

  /* Radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;

  /* Transitions */
  --t:   0.22s cubic-bezier(.4,0,.2,1);
  --t-s: 0.15s cubic-bezier(.4,0,.2,1);
  --t-l: 0.35s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.28s ease, color 0.28s ease;
}

/* ═══════════════════════════════════════════════
   NOISE OVERLAY  (GEMINI.md — fixed at 4% opacity)
═══════════════════════════════════════════════ */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ═══════════════════════════════════════════════
   TOP BAR — flota sobre la foto del hero, no un
   bloque sólido aparte pegado arriba.
═══════════════════════════════════════════════ */
.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: linear-gradient(to bottom, rgba(6,14,8,.55) 0%, transparent 100%);
}

.top-bar-brand {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: .85rem;
  color: rgba(247,243,237,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 40px 24px 100px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size: cover;
  background-position: center 40%;
  z-index: 0;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(6,14,8,.96) 0%, rgba(15,33,23,.94) 40%, rgba(20,43,28,.92) 70%, rgba(10,22,16,.96) 100%),
    radial-gradient(ellipse at 20% 20%, rgba(201,140,32,.22) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 75%, rgba(194,87,42,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(58,122,70,.14) 0%, transparent 45%);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='0.8' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

.hero-inner {
  max-width: 640px;
  position: relative;
  z-index: 1;
}

/* Alfredo portrait */
.hero-alfredo {
  width: 130px;
  height: 130px;
  display: block;
  margin: 0 auto 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  border: 2px solid rgba(201,140,32,.55);
  box-shadow:
    0 0 0 6px rgba(201,140,32,.10),
    0 0 0 7px rgba(201,140,32,.06),
    0 14px 40px rgba(0,0,0,.55);
  filter: none;
  mix-blend-mode: normal;
  transform-style: preserve-3d;
  will-change: transform;
  opacity: 0;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 18px;
  margin-bottom: 28px;
  opacity: 0;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 6px #4ADE80;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

/* Headline */
.hero-h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 1.08;
  letter-spacing: -1px;
  color: #fff;
  margin-bottom: 18px;
  opacity: 0;
}

.hero-h1-plain {
  font-weight: 700;
  display: block;
}

.hero-h1-italic {
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,.82);
  display: block;
}

/* Subtitle */
.hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,.58);
  margin-bottom: 20px;
  font-style: italic;
  letter-spacing: .2px;
  opacity: 0;
}

/* Stats row */
.hero-stats {
  display: block;
  margin-bottom: 36px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  opacity: 0;
}

/* Search */
.search-wrap {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  opacity: 0;
}

.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-3);
  pointer-events: none;
  flex-shrink: 0;
}

#search {
  width: 100%;
  background: rgba(255,255,255,.97);
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.15);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  outline: none;
  padding: 17px 56px 17px 52px;
  transition: box-shadow var(--t);
}

#search:focus {
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 0 3px rgba(201,140,32,.5);
}

#search::placeholder { color: var(--text-3); }

.search-clear {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: .82rem;
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
  line-height: 1;
}

.search-clear.visible { opacity: 1; pointer-events: auto; }

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.35);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  animation: bounce-scroll 2s ease-in-out infinite 1.5s;
  opacity: 0;
}

.hero-scroll-hint svg {
  width: 16px;
  height: 16px;
}

@keyframes bounce-scroll {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ═══════════════════════════════════════════════
   LISTA DE COMPRAS — flota sobre la foto del hero,
   sin fila propia con fondo sólido.
═══════════════════════════════════════════════ */
.shopping-bar {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 5;
  display: flex;
}

/* ═══════════════════════════════════════════════
   CATEGORY NAV — Glassmorphism
═══════════════════════════════════════════════ */
.cats-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247,243,237,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(228,220,210,.7);
  box-shadow: 0 1px 8px rgba(13,31,20,.05);
  transition: background-color 0.28s ease, border-color 0.28s ease;
}

/* Fila "☰ Categorías" + carrito y encabezado del panel lateral: solo
   existen en mobile (ver @media más abajo) — en desktop el nav de
   categorías sigue siendo la barra de siempre y la lista de compras
   sigue flotando sobre el hero. */
.cats-menu-row,
.cats-drawer-header { display: none; }

.cats-scroll {
  position: relative;
}

.cats-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 1600px;
  margin: 0 auto;
  gap: 10px 6px;
  padding: 12px 20px;
  align-items: flex-end;
  align-content: flex-start;
}


/* ── Language switch (ES / EN) ── */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--bg-muted);
  flex-shrink: 0;
}
.lang-btn {
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 5px 10px;
  border-radius: 999px;
  transition: all var(--t-s);
}
.lang-btn:hover { color: var(--accent); }
.lang-btn.active {
  background: var(--primary);
  color: #fff;
}

.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg-muted);
  flex-shrink: 0;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(194,87,42,.08);
  transform: rotate(12deg) scale(1.06);
}

/* Show moon in light mode, sun in dark mode */
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

.cats-inner::-webkit-scrollbar { display: none; }

.cat-btn {
  background: rgba(255,255,255,.7);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  padding: 8px 18px;
  transition: all var(--t);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .2px;
}

.cat-btn:hover {
  background: rgba(255,255,255,1);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}

.cat-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,31,20,.25);
}

/* Favoritas y Mis Recetas son tuyas, no una categoría de plato: se
   distinguen con un tinte propio para que no se confundan con el
   resto de los filtros de comida. */
.cat-btn[data-cat="favoritas"]:not(.active),
.cat-btn[data-cat="mis-recetas"]:not(.active) {
  border-color: rgba(194,87,42,.4);
  background: rgba(194,87,42,.08);
  color: var(--accent);
}
[data-theme="dark"] .cat-btn[data-cat="favoritas"]:not(.active),
[data-theme="dark"] .cat-btn[data-cat="mis-recetas"]:not(.active) {
  background: rgba(194,87,42,.14);
}

.cat-all-icon {
  font-size: .7rem;
  margin-right: 2px;
}

/* Con la barra ahora envolviendo en varias líneas (ya no scrollea
   horizontal), los separadores quedarían huérfanos al final de cada
   línea — cada grupo ya se distingue con su propia etiqueta arriba. */
.cats-sep { display: none; }

/* Grupo de sección: la etiqueta va en su propia línea, arriba de la
   fila de categorías a la que pertenece, en vez de ir metida en el
   medio de la fila (donde quedaba pareciendo que repetía el nombre
   del botón de al lado). */
.cats-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex-shrink: 0;
}

.cats-group-row {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cats-group-row[hidden] { display: none; }

/* Dropdown de Bebidas: flota encima del contenido en vez de empujar
   el resto de la barra hacia abajo cuando se despliega. Se anima con
   opacidad + transform en vez de aparecer/desaparecer de golpe. */
#drinks-subrow {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  /* Más alto que .cats-bar (100 en desktop, 700 como drawer en
     mobile): position:fixed se recalcula por JS (positionDrinksMenu
     en app.js), que además mueve el elemento a <body> en mobile para
     escapar del overflow-y:hidden/auto de la fila o el panel de
     categorías — pero sigue necesitando ganarle en apilamiento a lo
     que sea que esté "encima" en ese momento. */
  z-index: 750;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 190px;
  /* Red de seguridad si ni abriendo para arriba ni para abajo entra
     entero (ver positionDrinksMenu en app.js, que decide la
     dirección): que scrollee adentro en vez de cortarse sin más. */
  max-height: min(320px, calc(100vh - 24px));
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  padding: 8px;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  transform-origin: top left;
}
#drinks-subrow.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}
#drinks-subrow .cat-btn {
  text-align: left;
  transition: background-color .12s ease, transform .12s ease;
}
#drinks-subrow .cat-btn:active { transform: scale(.97); }

.cats-group-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  padding: 0 4px;
}

/* Los tragos son un extra, no el foco del sitio: arrancan colapsados
   detrás de un solo botón discreto en vez de mostrar las 5
   subcategorías de una, compitiendo visualmente con las recetas de
   comida. */
.drinks-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 999px;
  color: var(--text-3);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  padding: 8px 16px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t);
}
.drinks-toggle:hover { border-color: var(--accent); color: var(--accent); }
.drinks-toggle-arrow { transition: transform var(--t); }
.drinks-toggle[aria-expanded="true"] {
  border-style: solid;
  color: var(--text-2);
}
.drinks-toggle[aria-expanded="true"] .drinks-toggle-arrow { transform: rotate(180deg); }

/* Cuando la categoría actual es un trago, el botón queda marcado
   igual que cualquier otra categoría activa: si no, al cerrar el
   dropdown no queda nada resaltado en la barra. */
.drinks-toggle.has-active {
  background: var(--primary);
  border-color: var(--primary);
  border-style: solid;
  color: #fff;
}
.drinks-toggle.has-active:hover { color: #fff; }

/* ═══════════════════════════════════════════════
   MAIN
═══════════════════════════════════════════════ */
.main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 36px 20px 80px;
}

.results-info {
  color: var(--text-3);
  font-size: .82rem;
  font-weight: 500;
  margin-bottom: 24px;
  min-height: 1.2em;
  letter-spacing: .2px;
}

/* ═══════════════════════════════════════════════
   GRID
═══════════════════════════════════════════════ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 22px;
}

/* ═══════════════════════════════════════════════
   RECIPE CARD
═══════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
  will-change: transform;
}

.card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--sh-lg);
}

.card:hover .card-img img {
  transform: scale(1.06);
}

.card:active {
  transform: translateY(-3px) scale(1.005);
  box-shadow: var(--sh-md);
}

/* Card image */
.card-img {
  position: relative;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-muted);
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.25,.46,.45,.94);
  display: block;
}

.card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,31,20,.1) 0%,
    rgba(13,31,20,.0) 40%,
    rgba(13,31,20,.45) 100%
  );
}

/* Category badge on image */
.card-cat-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
}

/* Fallback emoji when image fails */
.card-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  opacity: 0;
  transition: opacity var(--t);
}

.card-img img.failed + .card-img-fallback,
.card-img-fallback.visible {
  opacity: 1;
}

/* Card body */
.card-body {
  padding: 18px 20px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-titulo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.28;
  margin-bottom: 6px;
  letter-spacing: -.2px;
}

.card-desc {
  color: var(--text-2);
  font-size: .82rem;
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 2px;
}

/* Card meta */
.card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 20px 16px;
  border-top: 1px solid #F5F0E8;
  margin-top: 12px;
}

/* Chips */
.chip {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: .7rem;
  font-weight: 600;
  gap: 4px;
  padding: 4px 10px;
  white-space: nowrap;
  letter-spacing: .1px;
}

.chip-tiempo     { background: #EDF5F0; color: #256040; }
.chip-porciones  { background: #F5F0E6; color: #7A5822; }
.chip-facil      { background: #EDF5F0; color: #256040; }
.chip-media      { background: #FFF5E6; color: #A85020; }
.chip-avanzada   { background: #FFF0F0; color: #A83232; }

/* ═══════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 80px 20px;
}

.empty-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
}

.empty-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.empty-sub {
  color: var(--text-3);
  font-size: .92rem;
  margin-bottom: 24px;
}

.empty-btn {
  background: var(--primary);
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  padding: 12px 28px;
  transition: opacity var(--t), transform var(--t);
}

.empty-btn:hover { opacity: .85; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════
   MODAL OVERLAY
═══════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,16,10,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease;
}

.overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════ */
.modal {
  background: var(--bg-card);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  max-height: 94vh;
  max-height: 94dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  transform: translateY(60px);
  transition: transform .32s cubic-bezier(.22,.72,0,1);
  width: 100%;
  max-width: 980px;
}

.overlay.open .modal { transform: translateY(0); }

/* Modal scrollbar */
.modal::-webkit-scrollbar { width: 5px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Modal hero image */
.modal-img-wrap {
  position: relative;
  height: 340px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--primary);
}

.modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .4s ease;
}

.modal-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,20,12,.2) 0%,
    rgba(8,20,12,.0) 30%,
    rgba(8,20,12,.75) 100%
  );
}

/* Modal image content (title over image) */
.modal-img-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 32px 24px;
  z-index: 2;
}

.modal-cat-badge {
  display: inline-block;
  border-radius: 999px;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 4px 12px;
  text-transform: uppercase;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.2);
}

.modal-titulo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.14;
  margin-bottom: 12px;
  letter-spacing: -.5px;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.modal-chips-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-chip {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 12px;
  white-space: nowrap;
}

/* Print button */
.modal-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.modal-print-btn,
.modal-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3px;
  padding: 6px 14px;
  text-decoration: none;
  transition: all var(--t);
}

.modal-print-btn:hover,
.modal-share-btn:hover {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* "Modo Cocina" es la acción principal de la ficha: se destaca del
   resto de los botones (que son secundarios/utilitarios) para que
   el ojo vaya ahí primero. */
.modal-cook-btn {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
}
.modal-cook-btn:hover {
  background: var(--primary);
  opacity: .9;
  color: #fff;
}

/* Share toast notification */
.share-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1a1a1a;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 9999;
  white-space: nowrap;
}
.share-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Close button */
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), transform var(--t);
}

.modal-close svg { width: 16px; height: 16px; }

.modal-close:hover {
  background: rgba(0,0,0,.65);
  transform: scale(1.08);
}

/* Modal body */
.modal-body {
  padding: 32px 32px 48px;
}

.modal-desc {
  color: var(--text-2);
  font-size: .94rem;
  line-height: 1.68;
  font-style: italic;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

/* ── Two column layout ── */
.modal-cols {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

/* Section labels */
.section-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-3);
  margin-bottom: 16px;
  display: block;
}

/* ── Ingredients ── */
.ing-list { list-style: none; }

.ing-separator {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 0 6px;
  border-bottom: 1px solid var(--border);
  display: block;
  margin-bottom: 2px;
}

.ing-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 8px 9px 0;
  border-bottom: 1px solid #F5F0E8;
  cursor: pointer;
  transition: opacity var(--t), background var(--t);
  border-radius: var(--r-sm);
  user-select: none;
  margin-bottom: 1px;
}

.ing-item:last-child { border-bottom: none; }

.ing-item:hover { background: var(--bg-muted); padding-left: 6px; }

.ing-item.done { opacity: .38; }

.ing-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  font-size: .72rem;
  color: transparent;
  background: #fff;
}

.ing-item.done .ing-box {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ing-text {
  font-size: .84rem;
  color: var(--text-2);
  line-height: 1.45;
}

.ing-item.done .ing-text { text-decoration: line-through; }

/* ── Steps ── */
.paso-item {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.paso-num {
  background: var(--primary);
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
  font-size: .74rem;
  font-weight: 700;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  box-shadow: 0 2px 8px rgba(13,31,20,.25);
}

.paso-inner { flex: 1; min-width: 0; }

.paso-subtitulo {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
  letter-spacing: -.1px;
}

.paso-texto {
  font-size: .86rem;
  color: var(--text-2);
  line-height: 1.65;
  white-space: pre-line;
}

/* ── Tips box ── */
.tips-box {
  margin-top: 28px;
  background: linear-gradient(135deg, #EDF7F0, #F5FAF7);
  border: 1px solid #C8E8D2;
  border-radius: var(--r-md);
  padding: 18px 20px;
}

.box-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
  display: block;
}

.tips-box .box-label { color: #2A7A46; }

.tips-box ul { list-style: none; }

.tips-box li {
  font-size: .84rem;
  color: #256A3C;
  padding-left: 20px;
  position: relative;
  margin-bottom: 7px;
  line-height: 1.52;
}

.tips-box li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #3A7A46;
  font-weight: 600;
}

/* ── Errores box ── */
.errores-box {
  margin-top: 14px;
  background: linear-gradient(135deg, #FFF2F0, #FFF5F5);
  border: 1px solid #F0C8C4;
  border-radius: var(--r-md);
  padding: 18px 20px;
}

.errores-box .box-label { color: #A83232; }

.errores-box ul { list-style: none; }

.errores-box li {
  font-size: .84rem;
  color: #7A2828;
  padding-left: 20px;
  position: relative;
  margin-bottom: 7px;
  line-height: 1.52;
}

.errores-box li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: #A83232;
  font-size: .72rem;
  font-weight: 700;
  top: 1px;
}

/* ── Resumen box ── */
.resumen-box {
  margin-top: 16px;
  background: var(--primary);
  border-radius: var(--r-md);
  color: rgba(255,255,255,.85);
  font-size: .84rem;
  padding: 14px 20px;
  line-height: 1.65;
}

.resumen-box strong {
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  font-size: .64rem;
  letter-spacing: 1px;
  margin-right: 8px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════
   "PREGUNTALE AL ABUELO" — flotante
═══════════════════════════════════════════════ */
.abuelo-fab-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 450;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* El panel de chat va ANTES que el botón en el DOM (para que el flex
     en columna lo apile arriba de él) y aunque esté cerrado/invisible
     (opacity:0) sigue ocupando ese espacio hacia arriba en el layout.
     Sin esto, la caja del wrapper — vacía a la vista pero real para
     hit-testing — se robaba los toques ahí, justo sobre los
     ingredientes del modal de abajo, impidiendo el scroll con el dedo
     (el borde de la scrollbar, fuera de esta caja, sí funcionaba). */
  pointer-events: none;
}
.abuelo-fab-wrap[hidden] { display: none; }

.abuelo-fab-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(201,140,32,.55);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(13,31,20,.38), 0 2px 6px rgba(13,31,20,.20);
  transition: all var(--t);
  flex-shrink: 0;
  pointer-events: auto;
}
.abuelo-fab-btn img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.abuelo-fab-btn:hover { transform: translateY(-2px) scale(1.06); }

.abuelo-panel {
  width: min(340px, calc(100vw - 40px));
  max-height: min(480px, calc(100vh - 140px));
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  border: 1px solid var(--border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(.97);
  opacity: 0;
  pointer-events: none;
  transition: all var(--t);
}
.abuelo-fab-wrap.open .abuelo-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.abuelo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.abuelo-panel-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--bg-muted);
  color: var(--text-2);
  cursor: pointer;
  font-size: .7rem;
  flex-shrink: 0;
}
.abuelo-panel-close:hover { background: var(--border); }

.abuelo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}

.abuelo-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.abuelo-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}

.abuelo-disclaimer {
  font-size: .68rem;
  color: var(--text-3);
}

.abuelo-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  max-height: 320px;
  overflow-y: auto;
}

.abuelo-msg {
  padding: 9px 14px;
  border-radius: var(--r-md);
  font-size: .84rem;
  line-height: 1.5;
  max-width: 88%;
  white-space: pre-line;
}

.abuelo-msg-user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.abuelo-msg-abuelo {
  align-self: flex-start;
  background: var(--bg-muted);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.abuelo-msg-thinking {
  align-self: flex-start;
  background: var(--bg-muted);
  color: var(--text-3);
  font-style: italic;
}

.abuelo-msg-error,
.abuelo-msg-info {
  align-self: center;
  background: none;
  color: var(--text-3);
  font-size: .76rem;
  text-align: center;
  max-width: 100%;
}

.abuelo-form {
  display: flex;
  gap: 8px;
}

.abuelo-form input {
  flex: 1;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  padding: 10px 16px;
  outline: none;
  transition: border-color .15s;
}
.abuelo-form input:focus { border-color: var(--accent); }

.abuelo-send {
  background: var(--primary);
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  padding: 10px 20px;
  transition: opacity .15s;
  flex-shrink: 0;
}
.abuelo-send:hover { opacity: .88; }
.abuelo-send:disabled { opacity: .5; cursor: default; }

/* ═══════════════════════════════════════════════
   MODO COCINA
═══════════════════════════════════════════════ */
.cook-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 20px;
  /* Pantalla completa: en iPhones con notch/Dynamic Island, el padding
     fijo dejaría "PASO X DE Y" y el botón ✕ pegados contra la muesca. */
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Foto de la receta de fondo, bien oscurecida: sin esto la pantalla de
   modo cocina queda como un cartel de texto plano sin ninguna referencia
   visual al plato que se está preparando. */
.cook-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(3px) brightness(.4);
  transform: scale(1.05);
}
.cook-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
/* z-index positivo en vez de negativo en .cook-bg: algunos navegadores
   mobile no componen bien un hijo con z-index negativo + filter dentro
   de un ancestro position:fixed. Con esto en cambio, el resto del
   contenido queda garantizado arriba sin depender de esa combinación. */
.cook-overlay > *:not(.cook-bg) {
  position: relative;
  z-index: 1;
}
/* El atributo hidden por sí solo pierde contra el display:flex de arriba
   (misma especificidad, y CSS de autor le gana al del user-agent) —
   sin esto, el overlay queda visible aunque hidden=true. */
.cook-overlay[hidden] { display: none; }

.cook-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.cook-top-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cook-recipe-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cook-progress {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-3);
}

.cook-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--bg-muted);
  color: var(--text-2);
  cursor: pointer;
  font-size: .9rem;
}
.cook-close:hover { background: var(--border); }

.cook-progress-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--bg-muted);
  max-width: 720px;
  width: 100%;
  margin: 0 auto 8px;
  overflow: hidden;
}

.cook-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width .25s ease;
}

.cook-step-text strong { color: var(--accent); font-weight: 700; }

.cook-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cook-step-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}
/* La mayoría de las recetas no tiene título por paso (solo texto):
   sin esto queda un hueco vacío de 16px arriba del texto del paso. */
.cook-step-title:empty { display: none; }

.cook-step-text {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-line;
}

.cook-ing-wrap {
  max-width: 720px;
  margin: 16px auto 0;
  width: 100%;
}

.cook-ing-toggle {
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  padding: 8px 14px;
  width: 100%;
  text-align: left;
}
.cook-ing-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* Estado "abierto": el botón deja de verse como un acordeón cerrado
   mientras su panel (ingredientes o timer) está a la vista. */
.cook-ing-wrap:has(.cook-ing-panel:not([hidden])) .cook-ing-toggle,
.cook-ing-wrap:has(.cook-timer-panel:not([hidden])) .cook-ing-toggle {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

.cook-ing-panel {
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
}

.cook-nav {
  display: flex;
  gap: 12px;
  max-width: 720px;
  margin: 20px auto 0;
  width: 100%;
}

.cook-nav-btn {
  flex: 1;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  padding: 14px 20px;
  transition: all var(--t-s);
}
.cook-nav-btn:hover { border-color: var(--accent); }
.cook-nav-btn:disabled { opacity: .35; cursor: default; }
.cook-nav-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.cook-nav-primary:hover { opacity: .9; }

/* ── Timer del Modo Cocina ── */
.cook-timer-panel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-muted);
}
/* El atributo hidden pierde contra un display:flex de la misma
   especificidad si no se lo reforzamos (mismo caso que .cook-overlay). */
.cook-timer-panel[hidden],
.cook-timer-setup[hidden],
.cook-timer-running[hidden] { display: none; }

.cook-timer-suggest {
  align-self: flex-start;
  background: var(--bg-muted);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  padding: 8px 14px;
}
.cook-timer-suggest:hover { background: var(--accent); color: #fff; }

.cook-timer-setup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cook-timer-setup label { font-size: .85rem; color: var(--text-3); }

.cook-timer-minutes {
  width: 70px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
}

.cook-timer-setup .cook-nav-btn { flex: none; padding: 10px 18px; }

.cook-timer-running {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cook-timer-display {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cook-timer-running-btns { display: flex; gap: 8px; }
.cook-timer-running-btns .cook-nav-btn { flex: none; padding: 10px 18px; }

.cook-timer-badge {
  position: fixed;
  left: 16px;
  /* 84px y no 16px: en Modo Cocina la barra "← Anterior / Siguiente →"
     ocupa el borde inferior, y el badge tiene que flotar por encima en
     vez de taparla. En la página principal, sin esa barra, igual queda
     bien flotando un poco más arriba del borde. */
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 64px));
  z-index: 750;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary);
  color: #fff;
  padding: 10px 10px 10px 18px;
  border-radius: 999px;
  box-shadow: var(--sh-lg);
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cook-timer-badge[hidden] { display: none; }
.cook-timer-badge button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
}
.cook-timer-badge button:hover { background: rgba(255,255,255,.28); }

/* Con el modal de una receta abierto, el badge por defecto (abajo a la
   izquierda) tapa la lista de ingredientes. Lo pasamos al lado derecho,
   por encima del botón circular de "Preguntale al Abuelo" (que en el
   modal ocupa ese rincón en vez del de agregar receta) para no tapar
   ninguno de los dos. Si el navegador no soporta :has(), el badge se
   queda en su posición de siempre — sigue funcionando, solo sin este
   ajuste extra. */
body:has(#overlay.open) .cook-timer-badge {
  left: auto;
  right: 16px;
  bottom: max(86px, calc(env(safe-area-inset-bottom) + 86px));
}

/* El modal de la receta se queda "open" aunque el Modo Cocina esté
   tapándolo por encima (no se cierra, solo queda oculto detrás) — así
   que la regla de arriba también aplicaría ahí. Esta va después para
   ganarle por orden con la misma especificidad y devolver el badge a
   la izquierda mientras el Modo Cocina esté realmente abierto. */
body:has(#cook-overlay:not([hidden])) .cook-timer-badge {
  left: 16px;
  right: auto;
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 64px));
}

.cook-timer-alarm {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(194,87,42,.92);
  animation: cookTimerFlash 1s ease-in-out infinite;
}
.cook-timer-alarm[hidden] { display: none; }
@keyframes cookTimerFlash {
  0%, 100% { background: rgba(194,87,42,.92); }
  50%      { background: rgba(13,31,20,.92); }
}

.cook-timer-alarm-inner { text-align: center; color: #fff; padding: 32px; }
.cook-timer-alarm-emoji { font-size: 4rem; margin-bottom: 8px; }
.cook-timer-alarm-msg {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 24px;
}
.cook-timer-alarm-dismiss {
  background: #fff;
  color: var(--primary);
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════
   LISTA DE COMPRAS
═══════════════════════════════════════════════ */
.shopping-open-btn {
  position: relative;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
  font-size: .85rem;
  padding: 8px 14px;
  transition: all var(--t);
  flex-shrink: 0;
}
.shopping-open-btn:hover { border-color: var(--accent); color: var(--accent); }

.shopping-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 2px;
}
.shopping-count[hidden] { display: none; }

.shopping-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(8,15,9,.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.shopping-overlay[hidden] { display: none; }

.shopping-panel {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shopping-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 12px;
}
.shopping-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--text);
}
.shopping-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--bg-muted);
  color: var(--text-2);
  cursor: pointer;
}
.shopping-close:hover { background: var(--border); }

.shopping-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 22px 20px;
}

.shopping-empty {
  color: var(--text-3);
  font-size: .88rem;
  text-align: center;
  padding: 40px 0;
}

.shopping-recipe-group {
  margin-bottom: 20px;
}

.shopping-recipe-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.shopping-recipe-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shopping-recipe-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-3);
}

.shopping-recipe-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: .92rem;
  color: var(--text);
}

.shopping-recipe-remove {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: .72rem;
}
.shopping-recipe-remove:hover { color: var(--accent); }

.shopping-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  user-select: none;
}

.shopping-item-box {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.shopping-item.done .shopping-item-box { background: var(--accent); border-color: var(--accent); }
.shopping-item-text { font-size: .82rem; color: var(--text-2); }
.shopping-item.done .shopping-item-text { text-decoration: line-through; opacity: .5; }

.shopping-actions {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
}
.shopping-clear {
  width: 100%;
  background: none;
  border: 1.5px solid #ecc;
  border-radius: 999px;
  color: #a04040;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  padding: 10px;
}
.shopping-clear:hover { background: #fff0f0; }

/* ═══════════════════════════════════════════════
   CUENTA (login opcional)
═══════════════════════════════════════════════ */
.account-open-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg-muted);
  flex-shrink: 0;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  transition: all var(--t);
}
.account-open-btn:hover { border-color: var(--accent); color: var(--accent); }

.account-status-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3aa25a;
  border: 2px solid var(--bg-card);
}

.account-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(8,15,9,.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.account-overlay[hidden] { display: none; }

.account-panel {
  width: 100%;
  max-width: 400px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
}

.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 12px;
}
.account-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--text);
}
.account-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--bg-muted);
  color: var(--text-2);
  cursor: pointer;
}
.account-close:hover { background: var(--border); }

.account-body { padding: 4px 22px 24px; }

.account-intro {
  font-size: .82rem;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 16px;
}

.account-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg-muted);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
}
.account-tab {
  flex: 1;
  border: none;
  background: none;
  border-radius: 999px;
  padding: 8px 10px;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t);
}
.account-tab.active { background: var(--primary); color: #fff; }

.account-field { margin-bottom: 12px; }
.account-label {
  display: block;
  font-size: .76rem;
  color: var(--text-3);
  margin-bottom: 4px;
}
.account-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
}
.account-input:focus { outline: none; border-color: var(--accent); }

.account-password-wrap { position: relative; }
.account-password-wrap .account-input { padding-right: 40px; }
.account-password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: .9rem;
  border-radius: 50%;
}
.account-password-toggle:hover { background: var(--bg-muted); color: var(--text-2); }

.account-error {
  color: #a04040;
  font-size: .78rem;
  margin-bottom: 10px;
}

.account-submit {
  width: 100%;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .86rem;
  font-weight: 600;
  padding: 11px;
}
.account-submit:disabled { opacity: .6; cursor: default; }

.account-forgot {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: .76rem;
  margin-top: 12px;
  text-decoration: underline;
}
.account-forgot:hover { color: var(--accent); }

.account-email-display {
  font-weight: 600;
  color: var(--text);
  font-size: .9rem;
  margin-bottom: 4px;
}

.account-sync-status {
  font-size: .78rem;
  color: var(--text-3);
  min-height: 1.2em;
  margin-bottom: 16px;
}

.account-logout {
  width: 100%;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  padding: 10px;
}
.account-logout:hover { border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════════════
   CONFIRMACIÓN (propia, en vez de confirm()/alert() nativos)
═══════════════════════════════════════════════ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(8,15,9,.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-overlay[hidden] { display: none; }

.confirm-panel {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  padding: 24px;
}

.confirm-message {
  font-size: .92rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 20px;
}

.confirm-actions {
  display: flex;
  gap: 10px;
}

.confirm-cancel,
.confirm-ok {
  flex: 1;
  border-radius: 999px;
  padding: 11px;
  font-family: 'Inter', sans-serif;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
}
.confirm-cancel {
  background: none;
  border: 1.5px solid var(--border);
  color: var(--text-2);
}
.confirm-cancel:hover { border-color: var(--accent); color: var(--accent); }

.confirm-ok {
  background: var(--primary);
  border: 1.5px solid var(--primary);
  color: #fff;
}
.confirm-ok:hover { opacity: .9; }
.confirm-ok.confirm-ok-danger {
  background: #a04040;
  border-color: #a04040;
}

/* ── Compartir: link propio en vez del selector nativo del sistema ── */
.share-panel { max-width: 420px; }

.share-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.share-head-emoji { font-size: 1.4rem; flex-shrink: 0; }
.share-head-titulo {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-close {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  border: none;
  background: var(--bg-muted);
  color: var(--text-2);
  cursor: pointer;
  font-size: .8rem;
}
.share-close:hover { background: var(--border); }

.share-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.share-link-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  padding: 10px 12px;
}
.share-copy-btn {
  background: var(--primary);
  border: none;
  border-radius: var(--r-sm);
  color: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  padding: 0 16px;
  white-space: nowrap;
  transition: opacity .15s;
}
.share-copy-btn:hover { opacity: .9; }

.share-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #25D366;
  border-radius: 999px;
  color: #06280f;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .86rem;
  font-weight: 700;
  padding: 11px;
  text-decoration: none;
  transition: opacity .15s;
}
.share-whatsapp-btn:hover { opacity: .9; }
.share-more-btn {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  padding: 4px;
  text-align: center;
  text-decoration: underline;
}
.share-more-btn:hover { color: var(--text-2); }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--border);
  padding: 28px 20px;
  text-align: center;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-3);
  font-size: .8rem;
}

.footer-brand {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--text-2);
  font-size: .9rem;
}

.footer-sep { opacity: .5; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET (700px+)
═══════════════════════════════════════════════ */
@media (min-width: 700px) {
  .overlay { align-items: center; }

  .modal {
    border-radius: var(--r-xl);
    max-width: 980px;
    width: calc(100% - 48px);
    margin: 24px;
    max-height: 90vh;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE (<700px)
═══════════════════════════════════════════════ */
@media (max-width: 699px) {
  /* Top bar: en pantallas chicas solo el emoji, para que las acciones
     (idioma, tema, cuenta) no queden apretadas contra el nombre. */
  .top-bar { padding: 14px 16px; }
  .top-bar-brand [data-i18n="footer-brand"] { display: none; }
  .top-bar-actions { gap: 6px; }
  /* La lista de compras se muda a la fila sticky de categorías (ver
     .cats-menu-shopping-btn más abajo) — flotando sobre el hero solo
     se podía abrir mientras no habías scrolleado nada. */
  .shopping-bar { display: none; }

  /* Hero */
  /* Antes ocupaba el 100% de la pantalla (min-height:100dvh, heredado
     del desktop) — en un celular chico eso significa no ver ni un
     pedacito de receta real sin scrollear primero. Se deja que el
     alto lo defina el contenido, bastante más corto, para llegar
     antes a las recetas. */
  /* padding-bottom deja lugar para el cartel "SCROLL ↓" (position:
     absolute; bottom:32px, ver .hero-scroll-hint), que si no se
     solapa con el buscador ahora que el hero es más corto. */
  .hero { min-height: auto; padding: 48px 20px 104px; }
  .hero-alfredo { width: 100px; height: 100px; margin-bottom: 20px; }
  .hero-h1 { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .hero-sub { font-size: .92rem; }
  .hero-stats { font-size: .68rem; letter-spacing: .8px; padding: 0 16px; }

  /* Grid */
  .grid { grid-template-columns: 1fr; gap: 14px; padding: 0 16px; }

  /* Category nav — en mobile es un panel lateral (drawer) en vez de
     una barra propia: se abre con el botón "☰ Categorías" (siempre
     visible, sticky) y se cierra tocando afuera, la X, o eligiendo
     una categoría. cat-btn adentro es el mismo botón/handler de
     siempre, no se duplica nada. */
  .cats-menu-row {
    display: flex;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: rgba(247,243,237,.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(228,220,210,.7);
  }
  [data-theme="dark"] .cats-menu-row {
    background: rgba(18,16,9,.95);
    border-bottom-color: rgba(48,44,38,.85);
  }
  .cats-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 14px 16px;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
  }
  .cats-menu-shopping-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    background: none;
    border: none;
    border-left: 1px solid rgba(228,220,210,.5);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
  }
  [data-theme="dark"] .cats-menu-shopping-btn { border-left-color: rgba(48,44,38,.7); }
  .cats-menu-shopping-btn .shopping-count {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
  }

  .cats-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 690;
    background: rgba(8,16,10,.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t);
  }
  .cats-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .cats-bar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 700;
    width: min(300px, 82vw);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22,.72,0,1);
    box-shadow: var(--sh-xl);
    border-bottom: none;
  }
  .cats-bar.open { transform: translateX(0); }

  .cats-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 10px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
  }
  .cats-drawer-close {
    background: var(--bg-muted);
    border: 1.5px solid var(--border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: var(--text-2);
    cursor: pointer;
    flex-shrink: 0;
  }

  .cats-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 4px 16px 24px;
    gap: 16px;
  }
  .cats-group { align-items: stretch; }
  .cats-group-row { flex-wrap: wrap; }
  .cat-btn { padding: 9px 16px; font-size: .76rem; }

  /* Modal — full screen bottom sheet */
  .modal {
    max-height: 96vh;
    max-height: 96dvh;
    border-radius: 20px 20px 0 0;
  }
  /* backdrop-filter en el fondo del modal es un culpable habitual de
     que iOS Safari deje el scroll interno "pegado" tras el primer
     gesto, en combinación con overflow-y:auto anidado. En mobile lo
     sacamos y lo reemplazamos por un fondo más oscuro liso. */
  .overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8,16,10,.88);
  }
  .modal-img-wrap { height: 240px; }
  .modal-img-content { padding: 14px 18px 18px; }
  .modal-titulo { font-size: 1.5rem; }
  .modal-chips-row { gap: 6px; }
  .modal-chip { font-size: .68rem; padding: 4px 10px; }
  .modal-print-btn { font-size: .68rem; padding: 5px 12px; }
  .modal-body { padding: 20px 18px 48px; }
  .modal-cols { grid-template-columns: 1fr; gap: 24px; }
  .modal-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }

  /* Safe area for iPhone notch/home indicator */
  .modal-body { padding-bottom: max(48px, env(safe-area-inset-bottom) + 24px); }

  /* Results info */
  .results-info { padding: 0 16px; }
}

/* ═══════════════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════════════ */
@media print {
  @page { margin: 1.6cm; }

  /* Imprimir se abre con el modal de la receta visto, momento en el que
     el body tiene position:fixed inline (lockBodyScroll, para el bloqueo
     de scroll de fondo en iOS) — sin anular esto acá, el body imprime
     como una cajita fija casi vacía en vez del contenido real. */
  body {
    position: static !important;
    top: auto !important;
    width: auto !important;
  }

  /* Hide everything except modal */
  body > *:not(.overlay) { display: none !important; }
  .noise-overlay { display: none !important; }

  .overlay {
    position: static !important;
    background: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
  }

  .modal {
    box-shadow: none !important;
    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    width: 100% !important;
    background: #fff !important;
  }

  /* Hide decorative/interactive elements — the photo included: se
     imprime en escala de grises y gasta tinta sin sumar a la lectura,
     así que en su lugar queda un encabezado con la marca del sitio. */
  .modal-close,
  .modal-print-btn,
  .modal-share-btn,
  .modal-cook-btn,
  .modal-actions-row,
  .modal-img,
  .modal-img-overlay,
  .ing-box,
  .card-fav-btn,
  .card-edit-btn,
  .abuelo-fab-wrap,
  .cook-overlay,
  .cook-timer-badge,
  .cook-timer-alarm,
  .shopping-overlay,
  .account-overlay,
  .confirm-overlay,
  .share-overlay { display: none !important; }

  /* ── Encabezado con marca, en vez de la foto ── */
  .modal-img-wrap {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
    padding: 0 0 18px !important;
    border-bottom: 2px solid #0D1F14 !important;
    margin-bottom: 26px !important;
  }
  .modal-img-wrap::before {
    content: '🍽 Las Recetas del Abuelo';
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
    color: #7A6E64 !important;
    margin-bottom: 16px;
  }

  .modal-img-content {
    position: static !important;
    padding: 0 !important;
  }

  .modal-cat-badge {
    color: #fff !important;
    border: none !important;
  }

  .modal-titulo {
    color: #16110C !important;
    text-shadow: none !important;
  }

  .modal-chip {
    background: #F0EBE3 !important;
    border: 1px solid #E4DCD2 !important;
    color: #463B31 !important;
    backdrop-filter: none !important;
  }

  /* Cuerpo: forzar colores de tinta legibles sin importar el tema
     activo (el sitio puede estar en modo oscuro, con textos casi
     blancos que en papel quedarían invisibles). */
  .modal-body { padding: 0 !important; }

  .paso-subtitulo,
  .resumen-box {
    color: #16110C !important;
  }
  .modal-desc,
  .ing-text,
  .paso-texto {
    color: #463B31 !important;
  }
  .section-label,
  .ing-separator {
    color: #7A6E64 !important;
  }
  .modal-desc,
  .ing-separator { border-color: #E4DCD2 !important; }

  .modal-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* Reset backgrounds and colors for print */
  .ing-item, .paso-item, .tips-box, .errores-box, .resumen-box {
    background: none !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
  .tips-box .box-label,
  .tips-box li,
  .tips-box li::before { color: #2A7A46 !important; }
  .errores-box .box-label,
  .errores-box li,
  .errores-box li::before { color: #A83232 !important; }
  .resumen-box strong { color: #7A6E64 !important; }

  a { text-decoration: none; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — LARGE (1100px+)
═══════════════════════════════════════════════ */
@media (min-width: 1100px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

/* ═══════════════════════════════════════════════
   CARD IMAGE FALLBACK COLORS
═══════════════════════════════════════════════ */
.card-img[data-cat="masas"]        { background: linear-gradient(135deg, #3A2A1A, #C98C20); }
.card-img[data-cat="carnes"]       { background: linear-gradient(135deg, #2A1010, #A83232); }
.card-img[data-cat="pastas"]       { background: linear-gradient(135deg, #2A2010, #B8881A); }
.card-img[data-cat="guarniciones"] { background: linear-gradient(135deg, #0A2010, #3A7A46); }
.card-img[data-cat="postres"]      { background: linear-gradient(135deg, #1A0A2A, #7A4A9A); }
.card-img[data-cat="basicos"]      { background: linear-gradient(135deg, #0A1A2A, #2A6A7A); }
.card-img[data-cat="bebidas"]      { background: linear-gradient(135deg, #0A1A2A, #1A6B8A); height: 260px; }
.card-img[data-cat="mis-recetas"]  { background: linear-gradient(135deg, #1A1208, #7A6040); }

/* ══════════════════════════════════════════════
   MIS RECETAS — Floating Action Button + Editor
══════════════════════════════════════════════ */

/* ── FAB ── */
.fab-add[hidden] { display: none; }
.fab-add {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(13,31,20,.38), 0 2px 6px rgba(13,31,20,.20);
  transition: all var(--t);
  outline: none;
}
.fab-add:hover {
  background: #1A3020;
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 8px 24px rgba(13,31,20,.44);
}
.fab-add:active  { transform: scale(.95); }
.fab-add:focus-visible { box-shadow: 0 0 0 3px rgba(194,87,42,.4); }

/* ── Editor Overlay ── */
.editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(8,15,9,.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}
.editor-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ── Editor Modal ── */
.editor-modal {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 600px;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--sh-xl);
  display: flex;
  flex-direction: column;
  transform: translateY(24px) scale(.97);
  transition: transform var(--t);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.editor-overlay.open .editor-modal {
  transform: translateY(0) scale(1);
}

/* ── Editor Header ── */
.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 0;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 2;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.editor-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.editor-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--bg-muted);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--t);
}
.editor-close:hover { background: var(--border); color: var(--text); }

/* ── Editor Body ── */
.editor-body {
  padding: 18px 24px 28px;
}

/* ── Importar con IA ── */
.ef-import-wrap {
  margin-bottom: 18px;
}
.ef-import-toggle {
  background: linear-gradient(135deg, rgba(194,87,42,.08), rgba(13,31,20,.05));
  border: 1.5px dashed var(--accent);
  border-radius: var(--r-sm);
  color: var(--accent);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  padding: 10px 14px;
  width: 100%;
  text-align: left;
  transition: all .15s;
}
.ef-import-toggle:hover { background: rgba(194,87,42,.12); }

.ef-import-panel {
  margin-top: 10px;
  padding: 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ef-import-hint {
  font-size: .78rem;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 10px;
}
.ef-import-error {
  font-size: .78rem;
  color: #c04040;
  margin-top: 8px;
}
.ef-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.ef-import-cancel {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  padding: 9px 14px;
}
.ef-import-cancel:hover { color: var(--text); }
.ef-import-submit {
  background: var(--accent);
  border: none;
  border-radius: var(--r-sm);
  color: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  padding: 9px 18px;
  transition: opacity .15s;
}
.ef-import-submit:hover { opacity: .9; }
.ef-import-submit:disabled { opacity: .6; cursor: default; }

/* ── Form Layout ── */
.editor-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.editor-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  margin-bottom: 14px;
}
.editor-row .editor-field { margin-bottom: 0; }

/* ── Labels ── */
.editor-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.editor-label .opt,
.editor-section-label .opt {
  font-weight: 400;
  font-size: .7rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--border);
}

/* ── Inputs ── */
.editor-input,
.editor-textarea,
.editor-select {
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  line-height: 1.5;
  padding: 9px 13px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
  outline: none;
}
.editor-input:focus,
.editor-textarea:focus,
.editor-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194,87,42,.10);
  background: #fff;
}
.editor-input-emoji {
  text-align: center;
  font-size: 1.35rem;
  padding: 5px 8px;
  width: 64px;
  flex: 0 0 64px;
}
.editor-textarea {
  resize: vertical;
  min-height: 68px;
}
.editor-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237A6E64' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 30px;
}

/* ── Dynamic Lists ── */
.editor-section {
  margin-bottom: 18px;
}
.editor-section-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.editor-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 7px;
}
.editor-list-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.editor-list-item .editor-input,
.editor-list-item .editor-textarea {
  flex: 1;
}
.editor-paso-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.editor-paso-titulo {
  font-size: .8rem;
  font-weight: 600;
  padding: 7px 11px;
}
.editor-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  margin-top: 11px;
  flex-shrink: 0;
  line-height: 1;
}
.editor-remove-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-top: 3px;
  flex-shrink: 0;
  transition: all .15s;
}
.editor-remove-btn:hover { background: #fff0f0; border-color: #f0b0b0; color: #c04040; }

/* ── Foto (cámara/archivo) en el editor ── */
.ef-photo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ef-photo-preview {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
}
.ef-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: .6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ef-photo-btn {
  display: inline-flex;
  align-items: center;
  background: var(--bg-muted);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  padding: 10px 16px;
  transition: all .15s;
}
.ef-photo-btn:hover { border-color: var(--accent); color: var(--accent); }

.ef-photo-url-details {
  margin-top: 8px;
}
.ef-photo-url-details summary {
  font-size: .74rem;
  color: var(--text-3);
  cursor: pointer;
  user-select: none;
}
.ef-photo-url-details .editor-input { margin-top: 6px; }

.editor-add-btn {
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  padding: 8px 14px;
  width: 100%;
  text-align: left;
  transition: all .15s;
}
.editor-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(194,87,42,.04);
}

/* ── Actions ── */
.editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.editor-delete-btn {
  margin-right: auto;
  background: none;
  border: 1.5px solid #ecc;
  border-radius: 999px;
  color: #a04040;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  padding: 9px 18px;
  transition: all .15s;
}
.editor-delete-btn:hover { background: #fff0f0; border-color: #c06060; }
.editor-save-btn {
  background: var(--primary);
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  padding: 11px 28px;
  transition: all var(--t);
  box-shadow: 0 2px 8px rgba(13,31,20,.22);
}
.editor-save-btn:hover {
  background: #1A3020;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(13,31,20,.28);
}
.editor-save-btn:active { transform: scale(.97); }

/* ── Card edit button ── */
.card-edit-btn {
  position: absolute;
  /* Debajo del badge de categoría ("MIS RECETAS"), no encima: a top:10
     quedaba tapando parte del texto del badge. */
  top: 46px;
  left: 10px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.88);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: all .15s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.card-edit-btn:hover { background: #fff; transform: scale(1.12); }

.card-delete-btn {
  position: absolute;
  top: 46px;
  left: 48px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.88);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: all .15s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.card-delete-btn:hover { background: #fff0f0; transform: scale(1.12); }

/* ── Mobile ── */
@media (max-width: 699px) {
  .editor-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .editor-modal {
    max-height: 94vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-width: 100%;
  }
  .editor-header {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 20px 20px 0;
  }
  .editor-body { padding: 16px 20px 32px; }
  .editor-row { flex-direction: column; gap: 0; }
  .editor-row .editor-field { margin-bottom: 14px; }
  .fab-add {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    width: 50px;
    height: 50px;
  }
  .abuelo-fab-wrap {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 20px;
  }
  .abuelo-fab-btn { width: 50px; height: 50px; }
  .abuelo-panel { width: calc(100vw - 32px); }
}

/* ── Star button on cards ── */
.card-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: rgba(200,180,150,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: all .15s;
}
.card-fav-btn:hover { transform: scale(1.18); background: #fff; color: #D4A017; }
.card-fav-btn.is-fav { color: #F5B800; background: #fff; }

/* ── Serving Scaler ── */
.scaler-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-muted);
  border-radius: var(--r-md);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.scaler-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-3);
}
.scaler-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.scaler-btn {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  padding: 5px 14px;
  transition: all .15s;
}
.scaler-btn:hover { background: var(--bg-muted); color: var(--accent); }
.scaler-btn:disabled { opacity: .3; cursor: default; }
.scaler-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  min-width: 28px;
  text-align: center;
  padding: 5px 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.scaler-hint {
  font-size: .72rem;
  color: var(--text-3);
  margin-left: auto;
}
.scaler-changed .scaler-label { color: var(--accent); }

/* Scaled ingredient text — subtle amber hint */
.ing-text.ing-scaled { color: var(--text); font-weight: 500; }

/* ══════════════════════════════════════════════
   DARK MODE
   Activado con <html data-theme="dark">
   Default: oscuro. Toggle guarda en localStorage.
══════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:       #121009;
  --bg-card:  #1D1B16;
  --text:     #F0EBE3;
  --text-2:   #BCA896;
  --text-3:   #7A6E60;
  --border:   #302C26;
  --bg-muted: #231F19;
  --nav-bg:   rgba(18,16,9,.95);
  --sh-xs:  0 1px 2px rgba(0,0,0,.35);
  --sh-sm:  0 2px 8px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.25);
  --sh-md:  0 6px 20px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.30);
  --sh-lg:  0 16px 48px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.40);
  --sh-xl:  0 24px 64px rgba(0,0,0,.75), 0 8px 20px rgba(0,0,0,.48);
}

[data-theme="dark"] .cats-bar {
  background: rgba(18,16,9,.95);
  border-bottom-color: rgba(48,44,38,.85);
}
[data-theme="dark"] .cat-btn {
  background: rgba(255,255,255,.06);
  border-color: var(--border);
}
[data-theme="dark"] .cat-btn:hover {
  background: rgba(255,255,255,.12);
}
[data-theme="dark"] .cats-sep {
  background: rgba(255,245,235,.10);
}

/* ── Search ── */
[data-theme="dark"] #search {
  background: rgba(255,255,255,.08);
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
}
[data-theme="dark"] #search:focus {
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 3px rgba(201,140,32,.4);
}
[data-theme="dark"] #search::placeholder { color: var(--text-3); }

/* ── Card meta border ── */
[data-theme="dark"] .card-meta {
  border-top-color: var(--border);
}

/* ── Chips ── */
[data-theme="dark"] .chip-tiempo,
[data-theme="dark"] .chip-facil    { background: rgba(37,96,64,.18); color: #6ABF8A; }
[data-theme="dark"] .chip-porciones { background: rgba(122,88,34,.18); color: #C8944A; }
[data-theme="dark"] .chip-media    { background: rgba(168,80,32,.18); color: #D47840; }
[data-theme="dark"] .chip-avanzada { background: rgba(168,50,50,.18); color: #E07070; }

/* ── Ingredient list ── */
[data-theme="dark"] .ing-item {
  border-bottom-color: var(--border);
}
[data-theme="dark"] .ing-box {
  background: var(--bg-muted);
  border-color: var(--border);
}

/* ── Tips box ── */
[data-theme="dark"] .tips-box {
  background: rgba(42,122,70,.10);
  border-color: rgba(42,122,70,.28);
}
[data-theme="dark"] .tips-box .box-label { color: #5AB882; }
[data-theme="dark"] .tips-box li { color: #7ACCA0; }
[data-theme="dark"] .tips-box li::before { color: #5AB882; }

/* ── Errores box ── */
[data-theme="dark"] .errores-box {
  background: rgba(168,50,50,.10);
  border-color: rgba(168,50,50,.28);
}
[data-theme="dark"] .errores-box .box-label { color: #E07070; }
[data-theme="dark"] .errores-box li { color: #D09090; }
[data-theme="dark"] .errores-box li::before { color: #E07070; }

/* ── Editor inputs ── */
[data-theme="dark"] .editor-input:focus,
[data-theme="dark"] .editor-textarea:focus,
[data-theme="dark"] .editor-select:focus {
  background: var(--bg-muted);
}

/* ── Smooth card + modal transitions ── */
[data-theme="dark"] .card,
[data-theme="dark"] .modal,
[data-theme="dark"] .editor-modal {
  transition: background-color 0.28s ease, box-shadow 0.28s ease;
}