:root {
  --color-bg: #f5f3ee;
  --color-page-bg: var(--color-bg);
  --color-card: #ffffff;
  --color-primary: #2f9e44;
  --color-primary-dark: #1f7a34;
  --color-primary-soft: #e8f4ea;
  --color-danger: #e03131;
  --color-danger-dark: #c92a2a;
  --color-danger-soft: #fbe9e7;
  --color-warning: #f0b429;
  --color-warning-dark: #c9992e;
  --color-warning-soft: #fef3d6;
  --color-info: #339af0;
  --color-info-dark: #1c7ed6;
  --color-info-soft: #e7f4fe;
  --color-text: #21261f;
  --color-text-muted: #6f7d73;
  --color-border: #e6e2d5;
  --color-purchased-bg: #eef1e9;
  --color-input-bg: #fbfaf6;
  --shadow-xs: 0 1px 2px rgba(31, 41, 28, 0.05);
  --shadow-soft: 0 1px 2px rgba(31, 41, 28, 0.04), 0 6px 16px rgba(31, 41, 28, 0.07);
  --shadow-medium: 0 2px 4px rgba(31, 41, 28, 0.05), 0 12px 28px rgba(31, 41, 28, 0.10);
  --shadow-lg: 0 8px 12px rgba(31, 41, 28, 0.08), 0 24px 48px rgba(31, 41, 28, 0.16);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 9px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #10140e;
    --color-card: #1a2018;
    --color-primary: #52c374;
    --color-primary-dark: #3a9c58;
    --color-primary-soft: #1e2b20;
    --color-danger: #ef7168;
    --color-danger-dark: #d95a50;
    --color-danger-soft: #33201d;
    --color-warning: #f0c94a;
    --color-warning-dark: #c9a730;
    --color-warning-soft: #332a11;
    --color-info: #5aa9f5;
    --color-info-dark: #3d8fe0;
    --color-info-soft: #16232e;
    --color-text: #edf1ea;
    --color-text-muted: #93a190;
    --color-border: #2b3229;
    --color-purchased-bg: #1d2419;
    --color-input-bg: #171d15;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 12px rgba(0, 0, 0, 0.35), 0 24px 48px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #10140e;
  --color-card: #1a2018;
  --color-primary: #52c374;
  --color-primary-dark: #3a9c58;
  --color-primary-soft: #1e2b20;
  --color-danger: #ef7168;
  --color-danger-dark: #d95a50;
  --color-danger-soft: #33201d;
  --color-warning: #f0c94a;
  --color-warning-dark: #c9a730;
  --color-warning-soft: #332a11;
  --color-info: #5aa9f5;
  --color-info-dark: #3d8fe0;
  --color-info-soft: #16232e;
  --color-text: #edf1ea;
  --color-text-muted: #93a190;
  --color-border: #2b3229;
  --color-purchased-bg: #1d2419;
  --color-input-bg: #171d15;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 12px rgba(0, 0, 0, 0.35), 0 24px 48px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  isolation: isolate;
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--color-page-bg);
  color: var(--color-text);
  padding-bottom: 110px;
  -webkit-font-smoothing: antialiased;
}

/* El patrón de fondo por defecto se pinta en una capa aparte, detrás del
   contenido, con opacidad reducida (en vez de background-blend-mode: en
   modo claro esa mezcla terminaba lavando el patrón casi por completo).
   Los fondos personalizados que suba el usuario se muestran tal cual, en
   el background del body directamente, sin pasar por acá. */
body.bg-pattern-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--pattern-url);
  background-size: 560px 560px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.6;
  pointer-events: none;
}

h1, h2,
.summary-money-value,
.summary-stat-value,
.product-total,
.btn,
.filter-toggle-btn,
.sort-price-btn,
.more-options-toggle {
  font-family: "Outfit", "Inter", sans-serif;
}

.summary-money-value,
.summary-stat-value,
.product-total,
.product-qty-display,
.qty-control .edit-quantity {
  font-variant-numeric: tabular-nums;
}

@keyframes fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes total-pulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.08);
    color: var(--color-primary);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.app-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-medium);
  display: flex;
  flex-direction: column;
}

.app-header-top {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.app-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.15;
}

.app-header h1 {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Nunito", "Outfit", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.app-brand-by {
  font-family: "Nunito", "Inter", sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
}

.header-actions {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
}

.header-toolbar {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-icon-btn[hidden] {
  display: none;
}

.header-icon-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: white;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
}

.header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.26);
}

.header-icon-btn:active {
  transform: scale(0.9);
}

.header-icon-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.3);
}

/* Con 5 botones en el encabezado (compartir, instalar, idioma, tema,
   configuración) el título "Neko Lista" no entra en un celular con los
   tamaños de escritorio: se achican botones, logo y título por tramos. */
@media (max-width: 430px) {
  .app-header-top {
    gap: 8px;
  }

  .app-brand {
    gap: 8px;
  }

  .app-brand-logo {
    width: 36px;
    height: 36px;
  }

  .app-header h1 {
    font-size: 1.2rem;
  }

  .header-actions {
    gap: 4px;
  }

  .header-icon-btn {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 380px) {
  .app-brand {
    gap: 6px;
  }

  .app-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .app-header h1 {
    font-size: 1.1rem;
  }

  .header-actions {
    gap: 3px;
  }

  .header-icon-btn {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 340px) {
  .app-header-top {
    padding-left: 10px;
    padding-right: 10px;
    gap: 6px;
  }

  .app-brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .app-header h1 {
    font-size: 1rem;
  }

  .app-brand-by {
    font-size: 0.58rem;
  }

  .header-icon-btn {
    width: 30px;
    height: 30px;
  }
}

.toast[hidden] {
  display: none;
}

.toast {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  z-index: 300;
  transform: translateX(-50%) translateY(-12px);
  background: var(--color-text);
  color: var(--color-card);
  padding: 10px 18px;
  border-radius: 20px;
  max-width: min(92vw, 420px);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.install-progress[hidden] {
  display: none;
}

.install-progress {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  z-index: 300;
  transform: translateX(-50%);
  width: min(92vw, 420px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-text);
  color: var(--color-card);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: var(--shadow-lg);
}

.install-progress-spinner {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: install-spin 0.8s linear infinite;
}

.install-progress.is-done .install-progress-spinner {
  display: none;
}

@keyframes install-spin {
  to {
    transform: rotate(360deg);
  }
}

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

/* Configuración: ventana modal aparte, no desplaza el contenido de la página */
.modal-backdrop[hidden] {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 13, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  animation: fade-slide-in 160ms ease;
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  margin: 0;
  animation: pop-in 200ms ease;
  max-width: 480px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 640px) {
  .modal-backdrop {
    align-items: center;
    padding: 20px;
  }

  .settings-panel {
    border-radius: var(--radius-lg);
  }
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-close-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.settings-close-btn:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.settings-close-btn:active {
  transform: scale(0.9);
}

.settings-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.settings-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sound-custom-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.sound-custom-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.btn-recording {
  background: var(--color-danger);
  color: white;
  animation: recording-pulse 1.1s ease-in-out infinite;
}

@keyframes recording-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}

.onboarding-panel {
  text-align: center;
}

.onboarding-steps {
  min-height: 190px;
  display: flex;
  align-items: center;
}

.onboarding-step {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  animation: fade-slide-in 200ms ease;
}

.onboarding-step.is-active {
  display: flex;
}

.onboarding-icon {
  font-size: 2.6rem;
  line-height: 1;
}

.onboarding-step-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.onboarding-step-desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 34ch;
}

.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.onboarding-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-border);
  transition: background 0.15s ease, transform 0.15s ease;
}

.onboarding-dot.is-active {
  background: var(--color-primary);
  transform: scale(1.3);
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.switch {
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: var(--color-border);
  cursor: pointer;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: background 0.15s ease;
}

.switch[aria-checked="true"] {
  background: var(--color-primary);
  justify-content: flex-end;
}

.switch-knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: var(--shadow-xs);
}

.switch:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.settings-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.settings-desc {
  margin: -4px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.theme-segmented {
  display: flex;
  gap: 4px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 4px;
}

.theme-option,
.sound-preset-option {
  flex: 1;
  padding: 9px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: "Outfit", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.theme-option svg {
  flex-shrink: 0;
}

.theme-option.active,
.sound-preset-option.active {
  background: var(--color-card);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

.palette-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.palette-swatch {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 3px solid var(--color-card);
  box-shadow: 0 0 0 1.5px var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.palette-swatch:hover {
  transform: scale(1.08);
}

.palette-swatch.active {
  box-shadow: 0 0 0 2px var(--color-card), 0 0 0 4px var(--color-text);
}

.palette-swatch-custom {
  background: conic-gradient(from 0deg, #e03131, #f0b429, #2f9e44, #1c7ed6, #7048c2, #e64980, #e03131);
}

.palette-custom-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.palette-custom-wrap .palette-swatch {
  width: 100%;
  height: 100%;
}

.palette-custom-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  border: none;
  padding: 0;
}

.bg-image-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bg-image-option {
  flex: 1;
  min-width: 100px;
  padding: 10px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text-muted);
  font-family: "Outfit", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.bg-image-option:hover {
  box-shadow: var(--shadow-xs);
}

.bg-image-option.active {
  border-color: var(--color-primary);
  color: var(--color-text);
  background: var(--color-primary-soft);
}

.bg-image-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.io-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.io-tab {
  flex: 1;
  min-width: 80px;
  padding: 10px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text-muted);
  font-family: "Outfit", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.io-tab:hover {
  box-shadow: var(--shadow-xs);
}

.io-tab.active {
  border-color: var(--color-primary);
  color: var(--color-text);
  background: var(--color-primary-soft);
}

.io-panel[hidden] {
  display: none;
}

.io-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
  animation: fade-slide-in 160ms ease;
}

.lang-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text);
  font-family: "Outfit", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lang-option:hover {
  box-shadow: var(--shadow-xs);
}

.lang-option.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lang-option-flag {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.settings-bg-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#input-bg-color {
  width: 44px;
  height: 40px;
  flex-shrink: 0;
  padding: 3px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  cursor: pointer;
}

#input-bg-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

#input-bg-color::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
}

.settings-bg-row .btn {
  flex-shrink: 0;
}

.settings-backup-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-backup-actions .btn {
  flex: 1;
}

.settings-import-label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.code-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.code-divider {
  height: 1px;
  margin: 18px 0;
  background: var(--color-border);
}

.generated-code-box {
  margin-top: 10px;
  padding: 14px;
  border: 1.5px dashed var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  text-align: center;
}

.generated-code {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: var(--color-primary-dark);
  user-select: all;
  transition: opacity 0.3s ease;
}

/* Código en vivo: anillo que se vacía hasta que vence, candado mientras
   espera y tilde cuando el otro dispositivo lo recibió y se borró. */
.code-live {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.code-live-main {
  min-width: 0;
  flex: 1;
}

.code-live-status {
  position: relative;
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.generated-code-box[data-state="waiting"] .code-live-status {
  padding-left: 14px;
}

.generated-code-box[data-state="waiting"] .code-live-status::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: code-pulse 1.4s ease-in-out infinite;
}

.generated-code-box[data-state="used"] .code-live-status {
  color: var(--color-primary-dark);
}

.generated-code-box[data-state="used"] .generated-code,
.generated-code-box[data-state="expired"] .generated-code {
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.code-ring {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  color: var(--color-primary-dark);
}

.code-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.code-ring-track,
.code-ring-progress {
  fill: none;
  stroke-width: 3.5;
}

.code-ring-track {
  stroke: var(--color-border);
}

.code-ring-progress {
  stroke: var(--color-primary);
  stroke-linecap: round;
  stroke-dasharray: 119.4;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}

.code-ring-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
}

.code-ring-check {
  display: none;
}

.generated-code-box[data-state="used"] .code-ring-lock {
  display: none;
}

.generated-code-box[data-state="used"] .code-ring-check {
  display: block;
  animation: code-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.generated-code-box[data-state="used"] .code-ring-progress {
  stroke-dashoffset: 0 !important;
}

.generated-code-box[data-state="expired"] .code-ring {
  color: var(--color-text-muted);
}

.generated-code-box[data-state="expired"] .code-ring-progress {
  stroke: var(--color-border);
}

.local-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 0.72rem;
  font-weight: 700;
}

@keyframes code-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}

@keyframes code-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .generated-code-box[data-state="waiting"] .code-live-status::before,
  .generated-code-box[data-state="used"] .code-ring-check {
    animation: none;
  }

  .code-ring-progress {
    transition: none;
  }
}

.code-receive-row {
  margin-top: 14px;
}

.code-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.code-input:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--color-primary);
  border-color: var(--color-primary);
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease;
}

/* Formulario */
.form-row {
  margin-bottom: 10px;
}

.form-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-icon-preview {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1.5px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.input-icon-preview:hover {
  box-shadow: var(--shadow-soft);
}

.input-icon-preview[aria-expanded="true"] {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}

.input-icon-preview:active {
  transform: scale(0.93);
}

.input-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  margin: -2px 0 10px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  max-height: 168px;
  overflow-y: auto;
  animation: pop-in 160ms ease;
}

.icon-option {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: var(--color-card);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.08s ease;
}

.icon-option:hover {
  background: var(--color-primary-soft);
}

.icon-option:active {
  transform: scale(0.88);
}

.icon-option-upload {
  border: 1.5px dashed var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
}

.icon-option-upload:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.form-row-name input[type="text"] {
  flex: 1;
}

.form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-input-bg);
  color: var(--color-text);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.paste-list-textarea {
  resize: vertical;
  min-height: 100px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-card);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.btn {
  border: none;
  border-radius: var(--radius-md);
  padding: 13px 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.06s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

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

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.btn:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-block {
  width: 100%;
}

.btn-small {
  padding: 9px 14px;
  font-size: 0.9rem;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 14px rgba(47, 158, 68, 0.28);
}

.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(47, 158, 68, 0.34);
}

#btn-show-add-form {
  padding: 15px 18px;
  font-size: 1.02rem;
  border-radius: 14px;
  font-family: "Outfit", "Inter", sans-serif;
}

.btn-secondary {
  background: var(--color-purchased-bg);
  color: var(--color-text);
}

.btn-secondary:hover {
  filter: brightness(0.97);
}

.btn-danger {
  background: var(--color-danger);
  color: white;
}

.btn-danger:hover {
  filter: brightness(1.05);
}

.btn-info {
  background: var(--color-info);
  color: white;
}

.btn-info:hover {
  filter: brightness(1.05);
}

.btn-warning {
  background: var(--color-warning);
  color: #4a3800;
}

.btn-warning:hover {
  filter: brightness(1.05);
}

/* Resumen: vive en la barra fija de abajo, sobre el degradado verde.
   Compacta a propósito: una línea de texto para los conteos y una sola
   fila para el total, en vez de tarjetas separadas, para no comerse
   media pantalla y dejar lugar a la lista. */
.header-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.bottom-summary-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.18);
  border-radius: 18px 18px 0 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}

/* Pendientes / comprados / total: siempre en el medio, nombre arriba,
   número abajo -- misma estructura que las tarjetas de plata a los costados. */
.summary-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
  order: 2;
}

.summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}

.summary-stat-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.summary-stat-label {
  font-size: 0.64rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

/* Ya compraste / Falta comprar: misma tarjeta, mismo peso visual para
   las dos -- solo cambia el ícono y a qué plata se refiere cada una. */
.summary-money-card {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  background: #fff;
  color: var(--color-primary-dark);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.summary-money-card:first-child {
  order: 1;
}

.summary-money-card:last-child {
  order: 3;
}

.summary-money-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-money-icon svg {
  width: 13px;
  height: 13px;
}

.summary-money-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  min-width: 0;
}

.summary-money-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.summary-money-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  display: inline-block;
  white-space: nowrap;
}

.summary-money-value.pulse {
  animation: total-pulse 320ms ease;
}

/* Ojo: este resumen tiene que entrar 2 montos + 3 números en una sola
   fila, así que el "modo grande" recién arranca en 600px -- entre 400 y
   599px ya viene muy justo con el tamaño chico, agrandar antes hace que
   se superponga el contenido. */
@media (min-width: 600px) {
  .bottom-summary-bar {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .summary-stats {
    gap: 20px;
  }

  .summary-stat-value {
    font-size: 1.05rem;
  }

  .summary-stat-label {
    font-size: 0.66rem;
  }

  .summary-money-card {
    gap: 9px;
    padding: 7px 13px;
  }

  .summary-money-icon {
    width: 28px;
    height: 28px;
  }

  .summary-money-icon svg {
    width: 15px;
    height: 15px;
  }

  .summary-money-label {
    font-size: 0.68rem;
  }

  .summary-money-value {
    font-size: 1.1rem;
  }
}

@media (max-width: 440px) {
  .summary-money-icon {
    display: none;
  }

  .summary-stats {
    gap: 14px;
  }

  .summary-money-card {
    padding: 6px 8px;
  }
}

/* Debajo de 400px, meter las 2 tarjetas de plata + los 3 números en una
   sola fila queda muy apretado -- los números pasan a su propia fila,
   con más aire, en vez de achicar el texto hasta que casi no se lea.
   El order de .summary-stats tiene que ser mayor al de la segunda
   tarjeta (order: 3 en la regla base): si empatan, el desempate es por
   orden en el HTML, que la ubica ENTRE las dos tarjetas de plata y
   fuerza cada una a su propia fila en vez de dejarlas juntas arriba. */
@media (max-width: 400px) {
  .header-summary {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
  }

  .summary-stats {
    gap: 8px;
  }

  .summary-stat-label {
    font-size: 0.56rem;
  }

  .summary-stat-value {
    font-size: 0.82rem;
  }

  .summary-money-card {
    padding: 5px 7px;
    gap: 4px;
  }

  .summary-money-label {
    font-size: 0.56rem;
  }

  .summary-money-value {
    font-size: 0.82rem;
  }
}


/* Lista de productos */
.list-card {
  position: relative;
  padding: 14px;
  padding-bottom: 32px;
  border: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-medium);
}

.list-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background-image:
    linear-gradient(45deg, var(--color-page-bg) 50%, transparent 50%),
    linear-gradient(-45deg, var(--color-page-bg) 50%, transparent 50%);
  background-position: left bottom, 16px bottom;
  background-size: 16px 16px;
  background-repeat: repeat-x;
}

.search-row {
  display: flex;
  gap: 8px;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.search-input-icon {
  position: absolute;
  left: 13px;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
  display: flex;
}

#search-input {
  width: 100%;
  min-width: 0;
  padding: 12px 14px 12px 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

#search-input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

#search-input:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.filter-toggle-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.filter-toggle-btn[aria-expanded="true"],
.filter-toggle-btn.active {
  border-color: #fff;
  background: #fff;
  color: var(--color-primary-dark);
}

.filters-panel-row select,
.filters-panel-row input[type="number"] {
  margin-bottom: 0;
}

.filter-priority-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
}

.filter-priority-toggle input {
  width: 18px;
  height: 18px;
}

.sort-price-btn {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.sort-price-btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.list-group + .list-group {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border);
}

.list-group-title {
  margin: 0 0 8px 4px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@keyframes product-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.empty-message {
  text-align: center;
  color: var(--color-text-muted);
  padding: 24px 8px;
  margin: 0;
}

.product-item {
  animation: product-enter 200ms ease;
  border-radius: var(--radius-sm);
  padding: 13px 6px;
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

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

@media (hover: hover) {
  .product-item:hover {
    background: var(--color-card);
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
  }
}

.add-item-card {
  margin-bottom: 12px;
}

.product-item.purchased {
  background: var(--color-purchased-bg);
}

.product-view[hidden] {
  display: none;
}

.product-view {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.checkbox-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-wrap input {
  display: none;
}

.checkbox-visual {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  border: 1.75px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  background: var(--color-card);
}

.checkbox-wrap:active .checkbox-visual {
  transform: scale(0.85);
}

.checkbox-wrap input:checked + .checkbox-visual {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-wrap input:checked + .checkbox-visual::after {
  content: "✓";
  color: white;
  font-size: 16px;
  font-weight: 700;
}

/* Como el ítem se vuelve a armar entero al marcarlo (pasa de pendientes a
   comprados), una transition normal nunca llega a jugar: el checkbox nace
   ya tildado. Estas clases se agregan una sola vez, en el elemento recién
   creado, para que la animación se vea igual que si hubiera sido en vivo. */
@keyframes checkbox-pop {
  0% {
    transform: scale(0.7);
  }
  55% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes checkbox-mark-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes checkbox-unpop {
  0% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

.checkbox-visual.just-checked {
  animation: checkbox-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.checkbox-visual.just-checked::after {
  animation: checkbox-mark-pop 200ms 60ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.checkbox-visual.just-unchecked {
  animation: checkbox-unpop 200ms ease;
}

.product-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
}

.product-icon img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 7px;
}

.product-qty-display {
  flex-shrink: 0;
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: 8px;
  padding: 4px 8px;
}

.priority-badge {
  flex-shrink: 0;
  font-size: 0.9rem;
  line-height: 1;
}

.product-line {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.product-name {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  word-break: break-word;
}

.product-leader {
  flex: 1;
  align-self: flex-end;
  min-width: 0;
  margin-bottom: 6px;
  border-bottom: 2px dotted var(--color-border);
}

.product-item.purchased .product-name {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.product-total {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--color-text);
  white-space: nowrap;
  font-family: "Outfit", "Inter", sans-serif;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 2px;
  flex-shrink: 0;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: var(--color-card);
  box-shadow: var(--shadow-xs);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}

.qty-btn:active {
  transform: scale(0.9);
}

.qty-control .edit-quantity {
  width: 46px;
  min-width: 0;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  background: transparent;
  padding: 4px 0;
}

.qty-control .edit-quantity:focus {
  outline: none;
  background: var(--color-card);
  border-radius: 4px;
  box-shadow: none;
}

.edit-priority-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
}

.edit-priority-label input {
  width: 18px;
  height: 18px;
}

/* Edición inline */
.product-edit[hidden] {
  display: none;
}

.product-edit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fade-slide-in 180ms ease;
}

.product-edit input,
.product-edit select {
  padding: 10px 12px;
  font-size: 0.95rem;
}

.edit-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Acciones generales */
.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Acciones destructivas, escondidas detrás de un toggle a propósito */
.more-options {
  text-align: center;
}

.more-options-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.more-options-toggle:hover {
  box-shadow: var(--shadow-soft);
}

.more-options-toggle[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.more-options-panel[hidden] {
  display: none;
}

.more-options-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
  text-align: left;
  animation: fade-slide-in 180ms ease;
}

.support-row {
  display: flex;
}

.more-options-warning {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 600;
}

.danger-actions-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.danger-action {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.danger-action-desc {
  margin: 0;
  padding: 0 2px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Escritorio */
@media (min-width: 640px) {
  .container {
    padding: 24px 16px;
  }

  .app-header h1 {
    font-size: 1.7rem;
  }

  .form-row-split {
    grid-template-columns: 1fr 1fr;
  }

  .actions {
    flex-direction: row;
  }

  .actions .btn {
    flex: 1;
  }

  .danger-actions-row {
    flex-direction: row;
  }

  .danger-action {
    flex: 1;
  }

  .product-item,
  .add-item-card {
    padding: 14px;
  }
}

/* Footer de marca */
.app-footer {
  max-width: 640px;
  margin: 8px auto 0;
  padding: 8px 16px 8px;
  text-align: center;
}

.app-footer-line {
  margin: 0 0 4px;
  font-family: "Nunito", "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.app-footer-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 12px;
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  background: var(--color-primary);
  color: white;
  font-family: "Nunito", "Inter", sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: filter 0.15s ease, transform 0.1s ease;
}

.app-footer-support-btn:hover {
  filter: brightness(1.05);
}

.app-footer-support-btn:active {
  transform: scale(0.96);
}

.app-footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 6px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* En pantallas angostas los tres links se acomodan en varias líneas: los
   separadores "·" quedarían sueltos al borde, así que se ocultan. */
@media (max-width: 420px) {
  .app-footer-links {
    gap: 4px 14px;
  }

  .app-footer-links > span[aria-hidden="true"] {
    display: none;
  }
}

.app-footer-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-family: "Nunito", "Inter", sans-serif;
  font-weight: 700;
  color: var(--color-primary-dark);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-footer-link:hover {
  color: var(--color-primary);
}

/* Pantallas muy angostas: el nombre del producto y el precio son lo más
   importante, así que achicamos checkbox/cantidad/ícono y el padding
   general para dejarles todo el aire posible. */
@media (max-width: 380px) {
  .container {
    padding: 12px;
  }

  .list-card {
    padding: 10px;
  }

  .product-item {
    padding: 12px 4px;
  }

  .product-view {
    gap: 8px;
  }

  .checkbox-visual {
    width: 22px;
    height: 22px;
  }

  .product-icon {
    font-size: 1.3rem;
  }

  .product-qty-display {
    min-width: 18px;
    padding: 3px 6px;
    font-size: 0.8rem;
  }

  .product-name {
    font-size: 0.95rem;
  }

  .product-total {
    font-size: 0.9rem;
  }
}

.app-footer-link-disabled {
  color: var(--color-text-muted);
  cursor: default;
  text-decoration: none;
}

/* Splash de inicio */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  opacity: 1;
  transition: opacity 0.8s ease;
}

/* Con prefers-reduced-motion, hideSplash() pone hidden=true directo en vez
   de animar: sin esta regla, `#app-splash { display: grid }` de arriba
   gana igual y el splash se queda tapando la app para siempre. */
#app-splash[hidden] {
  display: none;
}

#app-splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.app-splash-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.app-splash-slide.is-active {
  opacity: 1;
}

.app-splash-icon {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}

/* El primer cartel es la primera impresión: un poco más grande que el
   segundo. */
.app-splash-slide-app .app-splash-icon {
  width: 132px;
  height: 132px;
  border-radius: 32px;
}

.app-splash-slide-app .app-splash-name {
  font-size: 2.3rem;
}

/* Ambos carteles animan su ícono y su texto al aparecer: el primero ya
   está activo desde el HTML, así que arranca solo al cargar la página;
   el segundo lo dispara el JS al activar la clase .is-active. */
.app-splash-slide-app .app-splash-icon,
.app-splash-slide-app .app-splash-name {
  animation: app-splash-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.app-splash-slide-brand.is-active .app-splash-icon,
.app-splash-slide-brand.is-active .app-splash-name {
  animation: app-splash-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.app-splash-slide-app .app-splash-name,
.app-splash-slide-brand.is-active .app-splash-name {
  animation-delay: 0.08s;
}

.app-splash-name {
  margin: 0;
  font-family: "Nunito", "Inter", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.01em;
}

.app-splash-neko {
  color: var(--color-primary);
}

.app-splash-lista {
  color: var(--color-text);
}

.app-splash-by {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-inline: 0.2em;
}

@keyframes app-splash-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-splash {
    transition: none;
  }
  .app-splash-slide {
    transition: none;
  }
  .app-splash-slide-app .app-splash-icon,
  .app-splash-slide-app .app-splash-name,
  .app-splash-slide-brand.is-active .app-splash-icon,
  .app-splash-slide-brand.is-active .app-splash-name {
    animation: none;
  }
}

/* Pasos de instalación en iPhone/iPad */
.install-steps[hidden] {
  display: none;
}

.install-steps {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: install-step;
}

.install-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  counter-increment: install-step;
}

.install-steps li::before {
  content: counter(install-step);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.install-step-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--color-card);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  justify-content: center;
}