:root {
  /* Colores de la marca: coral y azul oscuro (el azul es para los títulos). */
  --marca: #ef7b5d;
  --marca-oscura: #d9603f;
  --marca-suave: #fdefea;
  --franja: #fbd9cd;
  --titulo: #3a324f;
  /* Puntas de botones y pastillas: apenas redondeadas, como las etiquetas verdes (no círculos). */
  --radio-boton: 8px;
  --arena: #f3f4f6;
  --arena-oscura: #e6e8ec;
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --texto: #1b1b1f;
  --texto-suave: #8a8d96;
  --borde: #e9ebef;
  --borde-tarjeta: #e2e4e9;
  --boton: #ef7b5d;
  --boton-texto: #ffffff;
  --sombra: 0 2px 14px rgba(27, 27, 31, 0.04);
  --peligro: #d93a2b;
  --peligro-suave: #fdecea;
  --exito: #2fb65c;
  --proteina: #e5484d;
  --carbo: #f5a524;
  --grasa: #3b82f6;
  --saturada: #8b5cf6;
  --fibra: #22a06b;
  --azucar: #ec4899;
  --sodio: #64748b;
  --apta-fondo: #dcf5e3;
  --apta-texto: #17663a;
  --alergeno-fondo: #fdf0d2;
  --alergeno-texto: #8a4b08;
  --radio: 20px;
  --radio-chico: 12px;
  --alto-tabs: 64px;
  --fuente: "Plus Jakarta Sans", system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --marca: #f28a6e;
    --marca-oscura: #f5a48e;
    --marca-suave: #3a221b;
    --franja: #3a221b;
    --titulo: #f2f2f4;
    --arena: #26262b;
    --arena-oscura: #34343a;
    --fondo: #121214;
    --superficie: #1c1c20;
    --texto: #f2f2f4;
    --texto-suave: #9a9ca5;
    --borde: #2c2c32;
    --borde-tarjeta: #323238;
    --boton: #ef7b5d;
    --boton-texto: #ffffff;
    --sombra: 0 4px 24px rgba(0, 0, 0, 0.35);
    --peligro: #ff7b6b;
    --peligro-suave: #3a1f1b;
    --exito: #4cd27a;
    --apta-fondo: #173524;
    --apta-texto: #7fdc9f;
    --alergeno-fondo: #3a2a10;
    --alergeno-texto: #f5c56b;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

input,
button,
select,
textarea {
  letter-spacing: inherit;
  word-spacing: inherit;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  /* Plus Jakarta Sans viene apretada: un poco de aire entre letras y palabras. */
  letter-spacing: 0.005em;
  word-spacing: 0.08em;
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
  padding-bottom: calc(var(--alto-tabs) + env(safe-area-inset-bottom) + 16px + var(--alto-timers, 0px));
  -webkit-tap-highlight-color: transparent;
}

main {
  max-width: 560px;
  margin: 4px auto 0;
  padding: 0 16px 16px;
  position: relative;
}

h1, h2, h3 {
  line-height: 1.15;
  color: var(--titulo);
}

/* Títulos de sección: gruesos, con punto final, en el azul de la marca. */
.etiqueta,
.titulo-vista,
.receta-titulo {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--titulo);
}

/* ---------- Barra superior ---------- */

/* Barra blanca con el nombre de la pantalla en naranja y mayúsculas (sin logo: las apps no muestran la marca adentro). */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--superficie);
  color: var(--marca);
  border-bottom: 1px solid var(--borde-tarjeta);
  padding: env(safe-area-inset-top) 16px 0;
}

.barra-titulo {
  margin: 0;
  color: var(--marca);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Flecha para volver, debajo de la barra (en el detalle de una receta y en Pro). */
.volver {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  margin: 4px 0 -8px 4px;
  color: var(--texto);
  font-size: 1.4rem;
  text-decoration: none;
  border-radius: var(--radio-boton);
}

.volver svg {
  width: 26px;
  height: 26px;
}

.volver[hidden] {
  display: none;
}

.volver:active {
  background: var(--arena-oscura);
}

/* Sin sesión solo se ve la pantalla de entrar. */
body.sin-sesion .tabs,
body.sin-sesion .barra-timers {
  display: none;
}

.entrar {
  text-align: center;
}

.entrar-logo {
  display: block;
  height: 44px;
  width: auto;
  margin: 4px auto 16px;
}

.entrar .ayuda {
  margin: 8px auto 20px;
  max-width: 32ch;
}

.btn-google {
  width: 100%;
}

.google-g {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.entrar .error {
  margin-top: 16px;
  text-align: left;
}

/* ---------- Bienvenida y Tu cuenta ---------- */

/* Durante la bienvenida no se ven las pestañas. */
body.en-bienvenida .tabs {
  display: none;
}

.progreso {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.progreso span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--arena-oscura);
}

.progreso span.hecho {
  background: var(--boton);
}

.bienvenida-intro {
  text-align: center;
  margin-bottom: 18px;
}

.bienvenida-intro .ayuda {
  margin-top: 6px;
}

.prefs-bloque {
  margin: 0 0 20px;
}

.tarjeta-arena > .ayuda + .prefs-bloque {
  margin-top: 18px;
}

.prefs-bloque .ayuda {
  margin: -4px 0 10px;
}

.opciones-prefs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.lista-editable .chips {
  margin: 10px 0 0;
}

.lista-editable .fila-agregar {
  margin-top: 10px;
}

.bienvenida-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.bienvenida-pie .btn-limpiar {
  margin: 0;
}

.bienvenida-pie .btn-primario {
  min-width: 140px;
}

.cuenta-perfil {
  text-align: center;
}

.cuenta-foto {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  border-radius: 50%;
  object-fit: cover;
}

.cuenta-foto.inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marca);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
}

.titulo-vista.centrado {
  text-align: center;
}

.cuenta-guardar {
  margin-top: 4px;
}

.cuenta-acciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.btn-borrar-cuenta {
  color: var(--peligro);
}

.uso {
  margin-top: 12px;
}

.uso-fila {
  margin-bottom: 12px;
}

.uso-texto {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.uso-barra {
  height: 8px;
  border-radius: 4px;
  background: var(--arena-oscura);
  overflow: hidden;
}

.uso-barra span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--marca);
}

.uso-barra.lleno span {
  background: var(--peligro);
}

.uso-nota {
  margin: 0 0 12px;
}

.uso-plan {
  font-weight: 700;
  margin: 0 0 12px;
}

.pro .ayuda.centrado {
  text-align: center;
}

.pro-precio {
  text-align: center;
  font-size: 1.1rem;
  margin: 16px 0 8px;
}

.pro-precio strong {
  font-size: 2rem;
}

.pro-beneficios {
  margin: 0 0 20px;
  padding-left: 20px;
  line-height: 1.8;
}

.pro-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.pro-form .ayuda {
  margin: 0;
}

.pro-form .btn {
  margin-top: 8px;
}

.aviso-offline {
  background: #2a2622;
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  padding: 6px 16px;
}

/* ---------- Tarjeta arena ---------- */

.tarjeta-arena {
  background: var(--superficie);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px 16px 16px;
  margin-bottom: 12px;
}

/* ---------- Formulario ---------- */

.etiqueta {
  display: block;
  font-size: 0.95rem;
  margin: 0 0 10px;
  text-align: center;
}

.fila-agregar {
  display: flex;
  gap: 8px;
}

input[type="text"],
input[type="email"],
select {
  font: inherit;
  color: inherit;
  min-height: 46px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  background: var(--arena);
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus {
  outline: none;
  border-color: var(--marca);
  background: var(--superficie);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
    linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.ayuda {
  margin: 6px 2px 0;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.tarjeta-arena .ayuda {
  text-align: center;
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 10px 0;
}

.chips:empty {
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--marca-suave);
  color: var(--texto);
  border-radius: var(--radio-boton);
  padding: 2px 2px 2px 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.chip-quitar {
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  font-size: 1.1rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

.chip-quitar:active {
  background: rgba(0, 0, 0, 0.06);
}

.check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--texto-suave);
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--marca);
  flex-shrink: 0;
}

.filtros {
  border-bottom: 1px solid var(--borde);
  margin: 4px 0 18px;
}

.filtros summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 2px;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.filtros summary::-webkit-details-marker {
  display: none;
}

.filtros summary::after {
  content: "Ver +";
  margin-left: auto;
  background: var(--marca-suave);
  color: var(--marca);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radio-boton);
}

.filtros[open] summary::after {
  content: "Cerrar";
}

.filtros[open] {
  padding-bottom: 6px;
}

/* Los filtros van sobre el fondo gris: los campos, en blanco. */
.filtros select {
  background-color: var(--superficie);
}

.campo {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.campo > span,
.campo > legend {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--texto-suave);
  margin-bottom: 6px;
  padding: 0;
}

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.opcion {
  position: relative;
  cursor: pointer;
}

.opcion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opcion span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: var(--superficie);
  font-size: 0.82rem;
  font-weight: 500;
  user-select: none;
}

.opcion input:checked + span {
  background: var(--boton);
  border-color: var(--boton);
  color: var(--boton-texto);
}

.opcion input:focus-visible + span {
  outline: 2px solid var(--texto);
  outline-offset: 2px;
}

.contador:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--marca);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Botones ---------- */

.btn {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radio-chico);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s, opacity 0.15s;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.btn:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 2px;
}

.btn-grande {
  width: 100%;
  min-height: 52px;
  font-size: 0.92rem;
  border-radius: 14px;
}

.btn-primario {
  background: var(--boton);
  color: var(--boton-texto);
  box-shadow: 0 6px 16px rgba(239, 123, 93, 0.28);
}

.btn-primario:hover {
  opacity: 0.88;
}

.btn-secundario {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borde);
}

.tarjeta-arena .btn-secundario {
  background: var(--arena);
  border-color: transparent;
}

.btn-guardada {
  background: var(--marca-suave);
  color: var(--marca);
}

.btn-peligro {
  background: var(--peligro-suave);
  color: var(--peligro);
}

.btn-texto {
  background: transparent;
  color: var(--texto);
  padding-left: 4px;
  padding-right: 4px;
}

.btn-icono {
  min-width: 44px;
  padding: 0;
  font-size: 1rem;
}

/* ---------- Estados ---------- */

.error {
  display: flex;
  gap: 10px;
  margin: 18px 0;
  padding: 14px;
  border-radius: var(--radio);
  background: var(--peligro-suave);
  font-size: 0.88rem;
}

.error p {
  margin: 0 0 8px;
}

.error-titulo {
  font-weight: 700;
}

.error-icono {
  font-size: 1.3rem;
  line-height: 1.2;
}

.cargando {
  text-align: center;
  padding: 28px 0;
  color: var(--texto-suave);
  font-size: 0.85rem;
  font-weight: 500;
}

.spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  border: 3px solid var(--arena-oscura);
  border-top-color: var(--marca);
  border-radius: 50%;
  animation: girar 0.9s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 3s;
  }
}

/* ---------- Receta ---------- */

#receta-vacio .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  text-decoration: none;
}

.receta {
  background: var(--superficie);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

/* Receta en la app (la página compartida sigue con la franja de abajo): cabecera sobre el fondo y tarjeta blanca. */
.receta-app {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.receta-encabezado {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  column-gap: 14px;
  padding: 8px 4px 16px;
}

.receta-foto {
  width: 84px;
  height: 84px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.receta-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.receta-cat {
  margin: 0 0 2px;
  color: var(--marca);
  font-size: 0.9rem;
  font-weight: 600;
}

.receta-app .receta-titulo {
  margin: 0;
  font-size: 1.45rem;
  text-wrap: balance;
}

.receta-app .receta-desc {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
}

.receta-cuerpo {
  background: var(--superficie);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.receta-resumen {
  padding: 14px 14px 14px;
  border-bottom: 1px solid var(--borde);
}

/* Tres cuadros iguales: Tiempo, Dificultad y Porciones (con los botones). */
.datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dato {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 68px;
  padding: 10px 2px;
  background: var(--arena);
  border-radius: var(--radio-chico);
  text-align: center;
}

.dato-icono {
  color: var(--marca);
  line-height: 0;
}

.dato-icono svg {
  width: 20px;
  height: 20px;
}

/* Ícono y valor en la misma línea; el nombre va debajo. */
.dato-arriba {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
}

.dato-nombre {
  margin-top: 0;
  color: var(--texto-suave);
  font-size: 0.7rem;
}

.dato-valor {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
}

.porciones-control {
  display: flex;
  align-items: center;
  gap: 3px;
}

.porciones-control .porciones-btn {
  width: 18px;
  height: 18px;
  font-size: 0.8rem;
}

/* Chiquitos a la vista, pero con más lugar invisible alrededor para tocarlos fácil con el dedo. */
.porciones-control .porciones-btn {
  position: relative;
}

.porciones-control .porciones-btn::before {
  content: "";
  position: absolute;
  inset: -12px -4px;
}

.porciones-control .porciones-valor {
  min-width: 1.4em;
  font-size: 0.95rem;
}

.receta-resumen .receta-etiquetas {
  justify-content: flex-start;
  /* Línea de lado a lado que la separa de los cuadros, como la de Nutrición. */
  margin: 14px -14px 0;
  padding: 14px 14px 0;
  border-top: 1px solid var(--borde);
}

.favoritas-arriba {
  margin-bottom: 12px;
}

.favoritas-arriba .favoritas-aviso {
  margin: 8px 4px 0;
}

.receta-cabecera {
  background: var(--superficie);
  padding: 0 16px 16px;
  text-align: center;
}

/* Arriba de la receta, una franja de color durazno de borde a borde: destaca el título. */
.receta-franja {
  margin: 0 -16px 14px;
  padding: 22px 16px 16px;
  background: var(--franja);
}

.receta-franja .receta-desc {
  margin: 0;
}

.receta-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
}

.receta-etiqueta,
.receta-categoria {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radio-boton);
  font-size: 0.72rem;
  font-weight: 600;
}

.receta-etiqueta {
  background: var(--superficie);
  color: var(--marca);
}

.receta-categoria {
  background: var(--marca);
  color: #fff;
}

.receta-titulo {
  margin: 0 0 8px;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

.receta-desc {
  margin: 0 0 12px;
  color: var(--texto-suave);
  font-size: 0.82rem;
}

.receta-meta {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 8px;
}

.pill {
  background: var(--arena);
  border-radius: var(--radio-chico);
  padding: 9px 8px;
  font-size: 0.8rem;
  font-weight: 500;
}

.pill strong {
  font-weight: 700;
}

/* Porciones */

.receta-porciones {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.receta-porciones > span:first-child {
  margin-right: auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texto);
}

.porciones-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--boton);
  color: var(--boton-texto);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.porciones-btn:active {
  transform: scale(0.94);
}

.porciones-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.porciones-valor {
  min-width: 2ch;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texto);
}

.receta-porciones + .ayuda,
.receta-porciones ~ .ayuda {
  padding: 0 16px;
}

/* Pestañas */

/* Igual que "Con lo que tengo / Un plato": texto sobre el fondo, con una línea coral debajo de la elegida. */
.pestanas {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin: 16px 4px 8px;
}

.pestana {
  position: relative;
  padding: 10px 4px 12px;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.35s;
}

.pestana::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--marca);
  transform: scaleX(0);
  transition: transform 0.35s ease;
}

.pestana[aria-selected="true"] {
  color: var(--titulo);
}

.pestana[aria-selected="true"]::after {
  transform: scaleX(1);
}

.pestana:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 2px;
  border-radius: 6px;
}

.panel {
  padding: 6px 16px 4px;
  font-size: 0.86rem;
}

/* Cada sección de la receta es una tarjeta que se desliza. */
.deslizador-receta {
  --duracion-modo: 0.35s;
}

.panel-deslizable {
  flex: 0 0 100%;
  min-width: 0;
  padding: 10px 16px 12px;
  background: var(--superficie);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.receta-pie {
  margin-top: 12px;
}

.receta-pie:not(:has(> *)) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .deslizador-receta {
    --duracion-modo: 0s;
  }
  .pestana,
  .pestana::after {
    transition: none;
  }
}

.ingredientes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ingredientes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}

.ingredientes li:last-child {
  border-bottom: 0;
}

.cantidad {
  flex-shrink: 0;
  max-width: 45%;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--arena);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
}

.tips {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tips li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid var(--borde);
}

.tips li:last-child {
  border-bottom: 0;
}

.tips li::before {
  content: "💡";
  position: absolute;
  left: 0;
  top: 9px;
  font-size: 0.9rem;
}

/* Pasos como línea de progreso: un punto por paso, verde cuando está hecho. */

.pasos {
  list-style: none;
  counter-reset: paso;
  padding: 0;
  margin: 8px 0 0;
}

.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 2px 0 16px 36px;
  min-height: 44px;
  cursor: pointer;
  transition: color 0.2s;
}

.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--superficie);
  border: 2px solid var(--arena-oscura);
  color: var(--texto-suave);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pasos li::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--arena);
}

.pasos li:last-child::after {
  display: none;
}

.pasos li.hecho {
  color: var(--texto-suave);
  text-decoration: line-through;
}

.pasos li.hecho::before {
  content: "✓";
  background: var(--exito);
  border-color: var(--exito);
  color: #fff;
}

.pasos li.hecho::after {
  background: var(--exito);
}

.acciones {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--borde);
  margin-top: 8px;
}

/* Los botones de abajo de la receta, todos en una fila del mismo ancho: ícono arriba, nombre abajo. */
.acciones {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.acciones .btn {
  flex-direction: column;
  gap: 2px;
  min-height: 64px;
  padding: 8px 6px;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

.accion-icono {
  font-size: 1.15rem;
  line-height: 1;
}

.accion-icono.linea {
  line-height: 0;
}

.accion-icono.linea svg {
  width: 20px;
  height: 20px;
}

/* ---------- Favoritas ---------- */

.titulo-vista {
  margin: 0 0 2px;
  font-size: 0.95rem;
  text-align: center;
}

.favoritas-aviso {
  margin-top: 8px;
}

.vacio {
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.85rem;
  padding: 36px 16px;
}

.lista-favoritas {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.fav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--superficie);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 4px 8px 4px 10px;
  margin-bottom: 10px;
}

.fav-abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 8px 4px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radio-chico);
  min-height: 52px;
}

.fav-abrir:active {
  background: var(--arena);
}

.fav-titulo {
  font-weight: 600;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.fav-meta {
  font-size: 0.75rem;
  color: var(--texto-suave);
}

#detalle {
  margin-top: 0;
}

/* ---------- Pestañas inferiores ---------- */

.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  gap: 4px;
  background: var(--superficie);
  border-top: 1px solid var(--borde-tarjeta);
  box-shadow: 0 -4px 24px rgba(27, 27, 31, 0.05);
  border-radius: 22px 22px 0 0;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}

/* Cada pestaña: ícono arriba y nombre abajo, siempre. La activa lleva una pastilla naranja clarita detrás del ícono. */
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: calc(var(--alto-tabs) - 8px);
  padding: 0 4px;
  color: var(--texto-suave);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1.1;
}

.tab-icono {
  width: 52px;
  height: 28px;
  padding: 4px 16px;
  border-radius: var(--radio-boton);
  flex-shrink: 0;
  transition: background 0.15s;
}

.tab-texto {
  white-space: nowrap;
}

.tab.activa {
  color: var(--marca);
  font-weight: 600;
}

.tab.activa .tab-icono {
  background: var(--marca-suave);
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-tabs) + env(safe-area-inset-bottom) + 14px + var(--alto-timers, 0px));
  transform: translateX(-50%);
  z-index: 20;
  max-width: calc(100% - 32px);
  background: var(--texto);
  color: var(--superficie);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
}

/* ---------- Modo de búsqueda ---------- */

/* Crear: dos opciones de texto con una línea coral debajo de la elegida, y abajo dos tarjetas
   una al lado de la otra. Al elegir "Un plato" la de ingredientes sale por la izquierda y la otra
   entra por la derecha (y al revés al volver). */
.selector-modo {
  --duracion-modo: 0.35s;
  margin: 4px 0 12px;
}

.modos {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.modo {
  position: relative;
  cursor: pointer;
}

.modo input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modo span {
  position: relative;
  display: block;
  padding: 10px 6px 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto-suave);
  user-select: none;
  transition: color var(--duracion-modo);
}

.modo span::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--marca);
  transform: scaleX(0);
  transition: transform var(--duracion-modo) ease;
}

.modo input:checked + span {
  color: var(--titulo);
}

.modo input:checked + span::after {
  transform: scaleX(1);
}

.modo input:focus-visible + span {
  outline: 2px solid var(--texto);
  outline-offset: 2px;
  border-radius: 6px;
}

/* El recuadro recorta lo que queda afuera; el margen deja ver la sombra de la tarjeta. */
.deslizador {
  --duracion-modo: 0.35s;
  overflow: hidden;
  margin: -6px -6px -4px;
  padding: 6px 6px 10px;
  box-sizing: content-box;
  transition: height var(--duracion-modo) ease;
}

.deslizador-pista {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  transition: transform var(--duracion-modo) ease;
}

.panel-modo {
  flex: 0 0 100%;
  margin-bottom: 0;
}

.selector-modo[data-modo="plato"] .deslizador-pista {
  transform: translateX(calc(-100% - 24px));
}

@media (prefers-reduced-motion: reduce) {
  .selector-modo,
  .deslizador {
    --duracion-modo: 0s;
  }
}

/* ---------- Temporizadores ---------- */

.paso-tiempos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.paso-timer {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--arena-oscura);
  border-radius: 6px;
  background: var(--arena);
  color: var(--texto);
  cursor: pointer;
}

.paso-timer.activo {
  background: var(--boton);
  border-color: var(--boton);
  color: var(--boton-texto);
}

.paso-timer.sonando,
.timer.sonando {
  background: var(--peligro);
  border-color: var(--peligro);
  color: #fff;
  animation: latido 0.8s ease-in-out infinite;
}

.pasos li.hecho .paso-timer:not(.activo) {
  display: none;
}

.barra-timers {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--alto-tabs) + env(safe-area-inset-bottom) + 8px);
  z-index: 15;
  max-width: 536px;
  margin: 0 auto;
  display: grid;
  gap: 6px;
}

.timer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 4px 4px 12px;
  border-radius: 10px;
  background: var(--boton);
  color: var(--boton-texto);
  font-size: 0.78rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.timer-etiqueta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-reloj {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.timer-quitar {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: rgba(127, 127, 127, 0.25);
  color: inherit;
  cursor: pointer;
}

@keyframes latido {
  50% {
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .paso-timer.sonando,
  .timer.sonando {
    animation: none;
  }
}

/* ---------- Borrar todos / buscador ---------- */

.btn-limpiar {
  display: block;
  margin: -2px auto 4px;
  min-height: 32px;
  padding: 4px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--texto-suave);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.btn-limpiar:active {
  background: var(--arena);
}

.buscador {
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 14px 10px 40px;
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra);
  background: var(--superficie) no-repeat 14px 50% / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

.buscador:focus {
  outline: none;
  border-color: var(--marca);
}

/* Filtro por categoría: fila de botones que se desliza de costado */
.categorias {
  display: flex;
  gap: 6px;
  margin: 10px -16px 0;
  padding: 0 16px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.categorias::-webkit-scrollbar {
  display: none;
}

.categoria {
  flex-shrink: 0;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}

.categoria[aria-pressed="true"] {
  background: var(--boton);
  border-color: var(--boton);
  color: var(--boton-texto);
}

/* ---------- Chat sobre la receta ---------- */

.chat {
  border-top: 1px solid var(--borde);
  margin-top: 8px;
  padding: 12px 16px 4px;
}

.chat-abrir {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--arena-oscura);
  border-radius: var(--radio-chico);
  background: var(--arena);
  color: var(--texto);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.chat-abrir[aria-expanded="true"] {
  background: transparent;
}

.chat-cuerpo {
  padding-top: 12px;
}

.chat-mensajes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.msg p {
  margin: 0;
}

.msg.usuario {
  align-self: flex-end;
  background: var(--boton);
  color: var(--boton-texto);
  border-bottom-right-radius: 4px;
}

.msg.asistente {
  align-self: flex-start;
  background: var(--arena);
  border-bottom-left-radius: 4px;
}

.msg.pensando {
  color: var(--texto-suave);
  animation: latido 1.2s ease-in-out infinite;
}

.msg.error {
  align-self: flex-start;
  background: var(--peligro-suave);
  color: var(--peligro);
}

.chat-aplicar {
  width: 100%;
  margin-top: 10px;
  min-height: 40px;
  font-size: 0.8rem;
}

.chat-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-sugerencia {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.chat-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.chat-input {
  font: inherit;
  font-size: 0.88rem;
  color: inherit;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
}

.chat-input:focus {
  outline: none;
  border-color: var(--texto);
}

.chat-contador {
  text-align: center;
}

.chat + .acciones {
  border-top: 0;
  margin-top: 0;
}


/* ---------- Etiquetas: apta para y alérgenos ---------- */

.receta-etiquetas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.etiqueta-apta,
.etiqueta-alergeno {
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}

.etiqueta-apta {
  background: var(--apta-fondo);
  color: var(--apta-texto);
}

.etiqueta-alergeno {
  background: var(--alergeno-fondo);
  color: var(--alergeno-texto);
}

/* ---------- Nutrición: desplegable con carrusel ---------- */

.nutricion {
  border-bottom: 1px solid var(--borde);
}

.nutricion summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
}

.nutricion summary::-webkit-details-marker {
  display: none;
}

.nutricion summary::after {
  content: "▾";
  color: var(--texto-suave);
  transition: transform 0.2s;
}

.nutricion[open] summary::after {
  transform: rotate(180deg);
}

.nutricion-titulo {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.nutricion-kcal {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.nutricion-kcal strong {
  font-size: 0.95rem;
  color: var(--texto);
}

.carrusel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  padding: 2px 16px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carrusel::-webkit-scrollbar {
  display: none;
}

.carrusel:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: -2px;
}

/* Entran unas 3 y media: la que asoma avisa que hay más. */
.macro {
  flex: 0 0 27%;
  scroll-snap-align: start;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 8px 8px 10px;
  min-width: 0;
}

.macro p {
  margin: 0;
}

.macro-valor {
  font-size: 0.62rem;
  color: var(--texto-suave);
  white-space: nowrap;
}

.macro-valor strong {
  display: block;
  font-size: 0.95rem;
  color: var(--texto);
}

.macro-nombre {
  font-size: 0.66rem;
  color: var(--texto-suave);
  margin-bottom: 6px !important;
  white-space: nowrap;
}

.anillo {
  --grosor: 5px;
  position: relative;
  width: 54px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--p) * 1%), var(--borde) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hueco central para que el anillo quede fino. */
.anillo::before {
  content: "";
  position: absolute;
  inset: var(--grosor);
  border-radius: 50%;
  background: var(--fondo);
}

.anillo > span:not(.octogono) {
  position: relative;
  font-size: 1.1rem;
  line-height: 1;
}

/* Foto del nutriente: ya viene en un círculo, llena el hueco del anillo. */
.macro-img {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

/* Sello "alto en", como el de la ley de etiquetado: octógono negro con filete blanco y "!", sobre el anillo */
.octogono,
.octogono-borde,
.octogono-centro {
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}

.octogono {
  width: 26px;
  aspect-ratio: 1;
  padding: 1.5px;
  background: #111;
}

.octogono-borde {
  width: 100%;
  height: 100%;
  padding: 1.5px;
  background: #fff;
}

.octogono-centro {
  width: 100%;
  height: 100%;
  background: #111;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.anillo > .octogono {
  position: absolute;
  top: -6px;
  right: -12px;
  width: 24px;
}

.nutricion-nota .octogono {
  display: inline-flex;
  width: 13px;
  padding: 1px;
  vertical-align: -2px;
}

.nutricion-nota .octogono-borde {
  padding: 0.75px;
}

.nutricion-nota .octogono-centro {
  font-size: 0.45rem;
}

.nutricion-nota {
  font-size: 0.68rem;
  margin: 4px 16px 10px;
}

/* ---------- Pestaña Info ---------- */

.info {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}

.info li:last-child {
  border-bottom: 0;
}

.info p {
  margin: 0;
}

.info-icono {
  width: 22px;
  flex-shrink: 0;
  text-align: center;
}

.info-etiqueta {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

/* ---------- Ingredientes: lo que falta y lista para el súper ---------- */

.ingredientes li {
  gap: 8px;
}

.ing-nombre {
  flex: 1;
  min-width: 0;
}

.falta-marca {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--alergeno-fondo);
  color: var(--alergeno-texto);
  font-size: 0.65rem;
  font-weight: 700;
  vertical-align: 1px;
}

.compartir-lista {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  font-size: 0.85rem;
}

/* ---------- Partes de la receta ("Salsa blanca", "Armado") ---------- */

.ingredientes li.parte-titulo,
.pasos li.parte-titulo {
  display: block;
  min-height: 0;
  padding: 14px 0 4px;
  border-bottom: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--marca);
  cursor: default;
}

.ingredientes li.parte-titulo:first-child,
.pasos li.parte-titulo:first-child {
  padding-top: 6px;
}

.pasos li.parte-titulo {
  counter-increment: none;
  padding-bottom: 10px;
}

.pasos li.parte-titulo::before,
.pasos li.parte-titulo::after {
  display: none;
}

/* ---------- Página pública de una receta compartida (/r/…) ---------- */

body.compartida {
  padding-bottom: 24px;
}

body.compartida main {
  margin-top: 16px;
}

/* Arriba de la receta: aviso chiquito de que es una receta compartida. */
.compartida-aviso {
  display: inline-block;
  margin: 0 0 4px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--marca-suave);
  color: var(--marca-oscura);
  font-size: 0.78rem;
  font-weight: 600;
}

/* En la página pública los pasos no se tocan para marcarlos. */
body.compartida .pasos li {
  cursor: default;
}

.compartida-invitacion {
  margin-top: 16px;
  text-align: center;
}

.compartida-invitacion .ayuda {
  margin: 8px auto 16px;
  max-width: 34ch;
}

/* ---------- Páginas legales (privacidad y términos) ---------- */

body.legal main {
  margin-top: 16px;
  padding-bottom: 32px;
}

.legal-texto {
  line-height: 1.6;
  font-size: 0.95rem;
}

.legal-texto h1 {
  margin: 0;
  font-size: 1.4rem;
}

.legal-texto h2 {
  margin: 24px 0 6px;
  font-size: 1rem;
  color: var(--titulo);
}

.legal-texto p,
.legal-texto ul {
  margin: 0 0 10px;
}

.legal-texto ul {
  padding-left: 20px;
}

.legal-texto li {
  margin-bottom: 6px;
}

.legal-texto a {
  color: var(--marca);
}

.legal-fecha {
  color: var(--texto-suave);
  font-size: 0.85rem;
}

.legal-links {
  margin-top: 24px !important;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  text-align: center;
}

/* ---------- Cuenta: ayuda y legales ---------- */

.ayuda-lista details {
  border-bottom: 1px solid var(--borde);
}

.ayuda-lista details:last-child {
  border-bottom: 0;
}

.ayuda-lista summary {
  padding: 12px 0;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

.ayuda-lista details p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

.ayuda-contacto {
  margin-top: 14px;
  text-align: center;
}

.cuenta-legales {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.85rem;
}

.cuenta-legales a {
  color: var(--texto-suave);
}

/* ---------- Panel de administración ---------- */

.btn-chico {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.82rem;
}

.ayuda.centrado {
  text-align: center;
}

.admin-arriba {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-arriba .ayuda {
  margin: 0;
}

.admin-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.admin-cifra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 12px;
  background: var(--arena);
}

.admin-cifra-titulo {
  font-size: 0.75rem;
  color: var(--texto-suave);
}

.admin-cifra-valor {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.admin-cifra-detalle {
  font-size: 0.72rem;
  color: var(--texto-suave);
}

.admin-grafico {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 140px auto auto;
  column-gap: 8px;
  margin-top: 12px;
}

.admin-grafico-eje {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--texto-suave);
  text-align: right;
}

.admin-barras {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 1px solid var(--borde);
}

.admin-barra {
  flex: 1;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}

.admin-barra span {
  display: block;
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--marca);
}

.admin-barra:hover span,
.admin-barra:focus-visible span {
  background: var(--marca-oscura);
}

.admin-grafico-fechas {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--texto-suave);
}

.admin-grafico-detalle {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  font-size: 0.82rem;
  text-align: center;
  color: var(--texto-suave);
}

.admin-categorias {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.admin-categorias li {
  display: grid;
  grid-template-columns: 96px 1fr 28px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.85rem;
}

.admin-categorias strong {
  text-align: right;
}

.admin-categoria-barra {
  height: 8px;
  border-radius: 4px;
  background: var(--arena);
  overflow: hidden;
}

.admin-categoria-barra span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--marca);
}

.admin-buscar {
  width: 100%;
  margin: 12px 0 4px;
}

.admin-usuarios {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-usuario {
  padding: 12px 0;
  border-bottom: 1px solid var(--borde);
}

.admin-usuario:last-child {
  border-bottom: 0;
}

.admin-usuario-arriba {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-usuario-nombre {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-usuario-nombre strong {
  font-size: 0.92rem;
}

.admin-usuario-nombre span {
  font-size: 0.78rem;
  color: var(--texto-suave);
  overflow-wrap: anywhere;
}

.admin-plan {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--arena);
  color: var(--texto-suave);
}

.admin-plan-pro {
  background: var(--marca-suave);
  color: var(--marca);
}

.admin-plan-cortesia {
  background: var(--apta-fondo);
  color: var(--apta-texto);
}

.admin-usuario-datos,
.admin-usuario-fechas {
  margin: 4px 0 0;
  font-size: 0.8rem;
}

.admin-usuario-fechas {
  color: var(--texto-suave);
}

.admin-etiquetas {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.admin-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.admin-subtitulo {
  margin: 16px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--marca);
}

.admin-lista {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.admin-lista li {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-top: 1px solid var(--borde);
  font-size: 0.85rem;
}

.admin-lista li span {
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.admin-nota {
  margin: 12px 0 0;
  font-size: 0.75rem;
}

.admin-vacio {
  margin: 10px 0 0;
}

/* ---------- Mis recetas: botones por categoría ---------- */

.grilla-categorias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.categoria-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 104px;
  padding: 12px 8px;
  background: var(--superficie);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--texto);
  text-decoration: none;
  transition: transform 0.08s;
}

.categoria-tarjeta:active {
  transform: scale(0.97);
}

.categoria-tarjeta:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

.categoria-icono {
  font-size: 1.7rem;
  line-height: 1;
  /* La imagen va centrada en el cuadro; el texto sigue a la izquierda. */
  align-self: center;
  margin-block: auto;
  padding-bottom: 8px;
}

.categoria-nombre {
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.categoria-cantidad {
  font-size: 0.75rem;
  color: var(--texto-suave);
}

/* Arriba del listado de una categoría: volver, ícono, nombre y cantidad. */
.cabecera-categoria {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px;
}

.volver-categorias {
  min-width: 44px;
  padding: 0;
  font-size: 1.1rem;
}

.volver-categorias .accion-icono.linea svg {
  width: 22px;
  height: 22px;
}

.cabecera-categoria-icono {
  font-size: 1.7rem;
  line-height: 1;
}

.cabecera-categoria-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cabecera-categoria-texto strong {
  font-size: 1.05rem;
}

.cabecera-categoria-texto span {
  font-size: 0.75rem;
  color: var(--texto-suave);
}

/* Íconos con imagen en los cuadros de categorías de Mis recetas. */
.categoria-img {
  display: block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  border-radius: 6px;
}

.categoria-icono .categoria-img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
}

.cabecera-categoria-icono .categoria-img {
  width: 36px;
  height: 36px;
}

/* ---------- Cuenta: menú, amigos y notificaciones ---------- */

.menu {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  padding-bottom: 6px;
}

.menu-fila,
.aviso-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
  text-decoration: none;
}

.menu-fila:last-child,
.aviso-fila:last-child,
.menu-fila:has(+ [hidden]) {
  border-bottom: 0;
}

.menu-fila[hidden] {
  display: none;
}

.menu-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--marca-suave);
  color: var(--marca);
}

.menu-icono svg {
  width: 20px;
  height: 20px;
}

.menu-texto {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.menu-texto small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.menu-flecha {
  flex: none;
  color: var(--texto-suave);
}

.menu-flecha svg {
  display: block;
  width: 18px;
  height: 18px;
}

.menu-fila:hover .menu-flecha,
.menu-fila:focus-visible .menu-flecha {
  color: var(--marca);
}

.amigos {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
}

.amigos-arriba {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.amigos-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--marca-suave);
  color: var(--marca);
}

.amigos-icono svg {
  width: 24px;
  height: 24px;
}

.amigos-titulo {
  margin: 2px 0 4px;
  font-weight: 700;
  color: var(--titulo);
}

.amigos-arriba .ayuda {
  margin: 0;
  text-align: left;
}

.amigos-avance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}

.amigos-avance span {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--arena-oscura);
}

.amigos-avance span.hecho {
  background: var(--marca);
}

.amigos-avance strong {
  margin-left: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.avisos {
  margin-top: 14px;
}

.aviso-fila {
  cursor: default;
}

.interruptor {
  appearance: none;
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 13px;
  background: var(--arena-oscura);
  transition: background 0.2s;
}

.interruptor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform 0.2s;
}

.interruptor:checked {
  background: var(--marca);
}

.interruptor:checked::after {
  transform: translateX(18px);
}

.interruptor:disabled {
  opacity: 0.6;
}

/* Preferencias de la cuenta: todo alineado a la izquierda (en la bienvenida siguen centradas). */
.prefs-cuenta,
.prefs-cuenta .ayuda,
.prefs-cuenta .titulo-vista,
.prefs-cuenta .etiqueta {
  text-align: left;
}

.prefs-cuenta .opciones-prefs {
  justify-content: flex-start;
}

/* "Borrar ingredientes" con la escoba al lado. */
#btn-limpiar:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
}

#btn-limpiar svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Filtro "¿Qué querés hacer?": la imagen de cada categoría (las mismas de Mis recetas). */
.opcion-img {
  flex: none;
  width: 22px;
  height: 22px;
  margin: -4px 6px -4px -4px;
  object-fit: contain;
  /* Las imágenes tienen fondo blanco: en modo claro se funde con el botón (también con el coral). */
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opcion-img {
    mix-blend-mode: normal;
    border-radius: 5px;
  }
}

:root[data-theme="dark"] .opcion-img {
  mix-blend-mode: normal;
  border-radius: 5px;
}

/* ---------- Carteles propios (preguntar / avisar) ---------- */

.cartel {
  width: min(360px, calc(100% - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.18);
}

.cartel::backdrop {
  background: rgb(20 18 28 / 0.45);
}

.cartel[open] {
  animation: cartel-entra 0.18s ease-out;
}

@keyframes cartel-entra {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

.cartel-caja {
  padding: 22px 20px 18px;
}

.cartel-titulo {
  margin: 0 0 8px;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--titulo);
}

.cartel-texto {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--texto-suave);
  white-space: pre-line;
}

.cartel-texto strong {
  color: var(--texto);
}

.cartel-campo {
  width: 100%;
  margin: 2px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cartel-botones {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.cartel-botones .btn {
  flex: 1;
  min-width: 0;
}

.btn-peligro-fuerte {
  background: var(--peligro);
  border-color: var(--peligro);
  color: #fff;
}

.btn-peligro-fuerte:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .cartel[open] {
    animation: none;
  }
}

/* ---------- Cargador de la receta: olla con vapor y frases ---------- */

.cargando-olla {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 16px 22px;
}

.olla {
  width: 72px;
  height: 64px;
  color: var(--marca);
}

.olla .vapor {
  opacity: 0;
  animation: vapor 1.6s ease-in infinite;
}

.olla .vapor:nth-child(2) { animation-delay: 0.5s; }
.olla .vapor:nth-child(3) { animation-delay: 1s; }

.olla .tapa {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: tapa 1.2s ease-in-out infinite;
}

@keyframes vapor {
  0% { transform: translateY(6px); opacity: 0; }
  40% { opacity: 0.9; }
  100% { transform: translateY(-14px); opacity: 0; }
}

@keyframes tapa {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(-4deg); }
}

.cargando-texto {
  min-height: 1.5em;
  margin: 0;
  color: var(--titulo);
  font-size: 0.98rem;
  font-weight: 600;
}

.cargando-texto.entra {
  animation: frase-entra 0.35s ease-out;
}

@keyframes frase-entra {
  from { opacity: 0; transform: translateY(4px); }
}

.cargando-barra {
  width: min(240px, 80%);
  height: 6px;
  border-radius: 3px;
  background: var(--arena-oscura);
  overflow: hidden;
}

.cargando-barra span {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: 3px;
  background: var(--marca);
}

.cargando-olla.andando .cargando-barra span {
  animation: barra-llena 18s cubic-bezier(0.2, 0.55, 0.35, 1) forwards;
}

@keyframes barra-llena {
  to { width: 92%; }
}

.cargando-nota {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--texto-suave);
}

@media (prefers-reduced-motion: reduce) {
  .olla .vapor { animation: none; opacity: 0.6; }
  .olla .tapa, .cargando-texto.entra { animation: none; }
  .cargando-olla.andando .cargando-barra span { animation-duration: 0.01s; width: 60%; }
}