/* Estilos extra sobre Tailwind CDN */
* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* respeta el notch del iPhone */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Oculta el spinner feo de los number inputs en algunos navegadores */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Campos editables de resultados: parecen texto, pero al tocar se ven como input */
.num-edit { background: transparent; border: none; border-radius: 6px; padding: 0; }
.num-edit:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px currentColor inset; }

/* Toasts */
.toast-in { animation: toastIn .25s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } }

/* Bottom sheet que sube desde abajo */
.sheet-up { animation: sheetUp 0.28s cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Tarjeta pro: sombra suave que flota, sin borde duro (look Fitia) */
.soft-card {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .06);
}

/* Etiquetas flotantes de alimentos sobre la foto (nombre + kcal, estilo apps top) */
.food-tag {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 78%;
  background: rgba(17, 24, 39, 0.88);
  color: #fff;
  padding: 6px 12px 6px 9px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  animation: tagPop 0.25s ease both;
}
.food-tag .ft-dot { width: 8px; height: 8px; border-radius: 999px; background: #34d399; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.3); }
.food-tag .ft-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.food-tag .ft-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.food-tag .ft-kcal { font-size: 11.5px; font-weight: 600; color: #6ee7b7; }
@keyframes tagPop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } }