/* ════════════════════════════════════════════════════════════
   Catálogo IA — Design System
   Nexo Panel aesthetic · Mobile-first · iPhone optimized
   ════════════════════════════════════════════════════════════ */

:root {
  /* Color palette */
  --c-primary:      #6366f1;
  --c-primary-dark: #4f46e5;
  --c-primary-light:#eef2ff;
  --c-success:      #10b981;
  --c-success-light:#d1fae5;
  --c-warning:      #f59e0b;
  --c-danger:       #ef4444;
  --c-bg:           #f8fafc;
  --c-surface:      #ffffff;
  --c-border:       #e2e8f0;
  --c-border-focus: #a5b4fc;
  --c-text:         #0f172a;
  --c-text-2:       #475569;
  --c-text-3:       #94a3b8;
  --c-muted-bg:     #f1f5f9;

  /* Spacing */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px;
  --sp-lg: 24px; --sp-xl: 32px;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 99px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;

  /* Safe areas */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --status-bg: #f8fafc;
}

/* ─── Keyframes ──────────────────────────────────────────── */
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes fadeIn      { from { opacity: 0; }           to { opacity: 1; } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn     { from { opacity: 0; transform: scale(0.88); }       to { opacity: 1; transform: scale(1); } }
@keyframes bounceIn    { 0% { transform: scale(0.82); opacity: 0; } 65% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pulse       { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes shimmer     { from { background-position: -220% 0; } to { background-position: 220% 0; } }
@keyframes indicatorIn { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  background: var(--c-bg);
}
body {
  height: 100%;
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: max(env(safe-area-inset-top, 0px), 0px);
  background: var(--status-bg);
  z-index: 1000;
  pointer-events: none;
}

/* Rellena la zona del home indicator (safe-area-inset-bottom) con el mismo
   color que la tab-bar para evitar el seam visible entre bottom:0 del viewport
   y el borde físico del dispositivo en iOS PWA standalone. */
body::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-bottom, 0px);
  background: var(--c-surface);
  z-index: 49; /* justo debajo de la tab-bar (z-index:50) */
  pointer-events: none;
}

body.login-mode  { --status-bg: #4f46e5; background: #4f46e5; }
body.login-mode::before { background: #4f46e5; }
body.login-mode::after  { background: #4f46e5; }
body.app-mode { --status-bg: #f8fafc; background: var(--c-bg); }
body.scanner-open { --status-bg: #000; }
body.scanner-open::before { background: #000; }
body.scanner-open::after  { background: #000; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  /* Evita double-tap zoom en todos los botones */
  touch-action: manipulation;
}
input, textarea { font-family: inherit; touch-action: manipulation; }
a      { color: inherit; }

/* ─── Screens ────────────────────────────────────────────── */
.screen { height: 100%; }

/* ════════════════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════════════════ */
.login-wrap {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sp-lg) + var(--safe-top)) var(--sp-lg) calc(var(--sp-lg) + var(--safe-bottom));
  background: #4f46e5;
}

.login-card {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 28px;
  padding: var(--sp-xl) var(--sp-lg);
  width: 100%;
  max-width: 360px;
  box-shadow: 0 24px 64px rgba(15,23,42,.28);
}

.login-brand {
  text-align: center;
  margin-bottom: var(--sp-xl);
}

.login-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  background: linear-gradient(145deg, #eef2ff, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.12), 0 10px 26px rgba(99,102,241,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-md);
}

.login-icon-wrap i { width: 28px; height: 28px; color: var(--c-primary); }

.login-brand h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-xs);
}

.login-brand p {
  font-size: 0.82rem;
  color: var(--c-text-2);
}

.login-install-btn {
  width: 100%;
  margin-top: var(--sp-md);
  padding: 12px 14px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: rgba(79,70,229,.92);
  font-size: .9rem;
  font-weight: 700;
}

.login-install-btn[hidden] { display: none !important; }
.login-install-btn i { width: 17px; height: 17px; }

.login-error {
  font-size: 0.82rem;
  color: var(--c-danger);
  text-align: center;
  min-height: 18px;
  margin-bottom: var(--sp-sm);
}

/* ════════════════════════════════════════════════════════════
   APP SHELL
   ════════════════════════════════════════════════════════════ */
#screenApp {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ─── Header ─────────────────────────────────────────────── */
.app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + var(--safe-top)) var(--sp-md) 10px;
  background: rgba(248,250,252,.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  gap: var(--sp-sm);
}

.app-header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: max(var(--safe-top), 48px);
  background: var(--status-bg);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-text);
}

.header-brand i { width: 20px; height: 20px; color: var(--c-primary); }
.app-version {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--c-text-3);
  background: var(--c-muted-bg);
  border-radius: var(--r-full);
  padding: 1px 6px;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-version.env-qa {
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
  border: 1px solid #fcd34d;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.usage-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--c-muted-bg);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-text-2);
}

.usage-chip i { width: 12px; height: 12px; color: var(--c-primary); }

.install-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(99,102,241,.24);
}

.install-app-btn[hidden] { display: none !important; }
.install-app-btn i { width: 13px; height: 13px; }

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-2);
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.icon-btn:active { background: var(--c-muted-bg); }
.icon-btn i { width: 18px; height: 18px; }

/* ─── Main / Panels ──────────────────────────────────────── */
.app-main {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0; /* Allows flex child to shrink past content size on iOS */
}

.panel {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: var(--sp-lg) var(--sp-md);
  /* 80px cubre la tab-bar fija + safe area */
  padding-bottom: calc(80px + var(--safe-bottom));
  overscroll-behavior-y: contain; /* Evita scroll chaining en iOS PWA */
}

.panel.active { display: block; }

/* ─── Tab Bar ────────────────────────────────────────────── */
/* position:fixed saca la tab-bar del flujo flex y la ancla al
   viewport — necesario para que no "suba" cuando el teclado
   aparece o el browser chrome cambia en iOS PWA.
   ⚠️  transform/will-change removidos: en iOS Safari/WebKit un
   position:fixed con transform propio deja de anclarse al
   viewport y se posiciona respecto al documento → flota. */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding-bottom: var(--safe-bottom);
}

.tab-item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 0;
  color: var(--c-text-3);
  font-size: 0.68rem;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}

.tab-item i { width: 22px; height: 22px; transition: transform 0.18s; }
.tab-item.active { color: var(--c-primary); }
.tab-item.active i { transform: scale(1.1); }

/* Indicador superior animado */
.tab-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--c-primary);
  border-radius: 0 0 3px 3px;
  animation: indicatorIn 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ════════════════════════════════════════════════════════════ */
.field-group { margin-bottom: var(--sp-md); }

.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-text-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field-input {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-surface);
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.field-input:focus {
  border-color: var(--c-border-focus);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

.field-input::placeholder { color: var(--c-text-3); }

/* Row with inline button */
.field-row {
  display: flex;
  gap: var(--sp-sm);
  align-items: stretch;
}

.field-row .field-input { flex: 1; }

/* Input with icon */
.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrap .field-input,
.input-icon-wrap input {
  display: block;
  width: 100%;
  padding: 13px 14px 13px 42px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-surface);
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.input-icon-wrap input:focus {
  border-color: var(--c-border-focus);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

.input-icon-wrap input::placeholder { color: var(--c-text-3); }

.input-icon {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 18px;
  color: var(--c-text-3);
  pointer-events: none;
}

.pass-toggle {
  position: absolute;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-3);
  border-radius: var(--r-sm);
}

.pass-toggle i { width: 18px; height: 18px; }

/* Prefix input ($ symbol) */
.prefix-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.prefix-label {
  position: absolute;
  left: 14px;
  font-size: 1rem;
  color: var(--c-text-2);
  font-weight: 500;
  pointer-events: none;
}

.field-input.has-prefix { padding-left: 28px; }

/* AI inline button */
.ai-inline-btn {
  flex-shrink: 0;
  width: 48px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.ai-inline-btn i { width: 18px; height: 18px; }
.ai-inline-btn:disabled { opacity: 0.35; }
.ai-inline-btn:not(:disabled):active { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); transform: scale(0.91); }

/* Spinning state on AI buttons */
.ai-inline-btn .spin-icon { animation: spin 0.65s linear infinite; }

.field-label.small {
  font-size: 0.68rem;
  margin-bottom: 8px;
}

.name-suggestions-wrap {
  margin-top: 10px;
}

/* ─── Chip de código de barras capturado ─── */
.barcode-chip-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--c-primary-light);
  border: 1px solid rgba(99,102,241,0.2);
  width: fit-content;
  max-width: 100%;
}

.barcode-chip-wrap i { width: 16px; height: 16px; color: var(--c-primary); flex-shrink: 0; }

.barcode-chip-text {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--c-primary-dark);
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barcode-chip-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(99,102,241,0.15);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.barcode-chip-clear i { width: 12px; height: 12px; color: var(--c-primary-dark); }
.barcode-chip-clear:active { opacity: 0.7; }

.name-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.name-suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--c-primary-light);
  color: var(--c-primary-dark);
  border: 1px solid rgba(99,102,241,0.15);
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
}

.name-suggestion-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.name-suggestion-chip i { width: 14px; height: 14px; flex-shrink: 0; }
.name-suggestion-chip:active { transform: scale(0.98); }

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: 13px 20px;
  border-radius: var(--r-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.1s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn i { width: 18px; height: 18px; flex-shrink: 0; }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:not(:disabled):active { transform: scale(0.97); }

.btn-primary {
  background: var(--c-primary);
  color: white;
  width: 100%;
  box-shadow: 0 4px 14px rgba(99,102,241,0.28);
  transition: opacity 0.15s, transform 0.12s, background 0.15s, box-shadow 0.15s;
}
.btn-primary:not(:disabled):hover { background: var(--c-primary-dark); box-shadow: 0 6px 20px rgba(99,102,241,0.38); }
.btn-primary:not(:disabled):active { box-shadow: 0 2px 8px rgba(99,102,241,0.18); transform: scale(0.975); }

.btn-success {
  background: var(--c-success);
  color: white;
  width: 100%;
  box-shadow: 0 4px 14px rgba(16,185,129,0.28);
  transition: opacity 0.15s, transform 0.12s, background 0.15s, box-shadow 0.15s;
}
.btn-success:not(:disabled):hover  { background: #059669; }
.btn-success:not(:disabled):active { transform: scale(0.975); }

.btn-lg { padding: 16px 20px; font-size: 1rem; border-radius: var(--r-lg); }

/* Btn spinner (inline en botones primarios) */
.btn-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   PHOTO ZONE
   ════════════════════════════════════════════════════════════ */
.photo-zone {
  position: relative;
  border: 2px dashed var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  margin-bottom: var(--sp-md);
  overflow: hidden;
  min-height: 220px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.photo-zone:hover  { border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(99,102,241,0.07); }
.photo-zone:active { border-color: var(--c-primary); }

.photo-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-xl);
  min-height: 180px;
}

.photo-placeholder-icon {
  width: 60px;
  height: 60px;
  background: var(--c-primary-light);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2.8s ease-in-out infinite;
}

.photo-placeholder-icon i { width: 28px; height: 28px; color: var(--c-primary); }

.photo-placeholder-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-text);
}

.photo-placeholder-sub {
  font-size: 0.75rem;
  color: var(--c-text-3);
}

.photo-preview {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  display: block;
  background: var(--c-muted-bg);
  animation: fadeIn 0.4s ease-out;
}

.change-photo-btn {
  position: absolute;
  bottom: var(--sp-sm);
  right: var(--sp-sm);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.55);
  color: white;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
}

.change-photo-btn i { width: 13px; height: 13px; }



/* ════════════════════════════════════════════════════════════
   FORM ACTIONS
   ════════════════════════════════════════════════════════════ */
.form-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}

.form-actions .btn { margin: 0; }

@media (min-width: 520px) {
  .form-actions { grid-template-columns: 0.9fr 1.1fr; }
}

/* ════════════════════════════════════════════════════════════
   RESULT PANEL
   ════════════════════════════════════════════════════════════ */
.result-panel { margin-top: var(--sp-lg); }

/* Stagger animations para resultado */
#resultPanel .result-divider  { animation: fadeSlideUp 0.3s ease-out both; }
#sectionFotos                 { animation: fadeSlideUp 0.4s ease-out 0.06s both; }
#sectionTitulos               { animation: fadeSlideUp 0.4s ease-out 0.14s both; }
#sectionPrecioVenta           { animation: fadeSlideUp 0.4s ease-out 0.22s both; }
#confirmarBtn                 { animation: fadeSlideUp 0.4s ease-out 0.30s both; }

.result-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.result-divider::before,
.result-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.result-divider span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.result-section {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  margin-bottom: var(--sp-md);
}

.result-section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-md);
}

.result-section-title i { width: 15px; height: 15px; }

/* ─── Título options ─────────────────────────────────────── */
.titulo-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: 12px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.titulo-card:active:not(.selected) { transform: scale(0.99); }

.titulo-card:last-child { margin-bottom: 0; }

.titulo-card.selected {
  border-color: var(--c-primary);
  background: var(--c-primary-light);
}

.titulo-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}

.titulo-card.selected .titulo-radio {
  border-color: var(--c-primary);
  background: var(--c-primary);
}

.titulo-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  display: none;
}

.titulo-card.selected .titulo-radio-dot { display: block; }

.titulo-content { flex: 1; min-width: 0; }

.titulo-text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--c-text);
  display: block;
  word-break: break-word;
}

.titulo-input {
  width: 100%;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--c-text);
  border: 1px solid var(--c-border-focus);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  background: white;
  outline: none;
  resize: none;
  font-family: inherit;
}

.titulo-edit-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--c-text-3);
  transition: color 0.15s, background 0.15s;
}

.titulo-card.selected .titulo-edit-btn { color: var(--c-primary); }
.titulo-edit-btn:active { background: rgba(0,0,0,0.06); }
.titulo-edit-btn i { width: 14px; height: 14px; }

/* ─── Price Hero ─────────────────────────────────────────── */
.price-hero {
  text-align: center;
  padding: var(--sp-sm) 0 var(--sp-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.price-hero-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-3);
}

.price-hero-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.02em;
}

.price-hero-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-full);
  display: none;
}

.price-hero-badge.above {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
}

.price-hero-badge.in-range {
  display: inline-block;
  background: var(--c-success-light);
  color: #065f46;
}

.price-hero-badge.below {
  display: inline-block;
  background: #fee2e2;
  color: #991b1b;
}

/* Input manual fuera del rango sugerido */
#manualPrice.out-of-range {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.18);
}

/* ─── Modal confirmación precio fuera de rango ─────────────── */
.price-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.price-confirm-sheet {
  background: var(--c-surface);
  border-radius: 20px 20px 0 0;
  padding: var(--sp-lg) var(--sp-lg) calc(var(--sp-lg) + env(safe-area-inset-bottom, 0));
  width: 100%;
  max-width: 480px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.price-confirm-icon { font-size: 2rem; line-height: 1; }

.price-confirm-msg {
  font-size: 0.9rem;
  color: var(--c-text-2);
  line-height: 1.5;
  margin: 0;
}

.price-confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.price-confirm-actions .btn { flex: 1; }

/* ─── Slider ─────────────────────────────────────────────── */
.slider-wrap { padding: 4px 0 var(--sp-sm); }

.slider-track-layers {
  position: relative;
  height: 6px;
  border-radius: 3px;
  margin-bottom: var(--sp-sm);
}

.track-bg,
.track-suggested,
.track-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
  pointer-events: none;
}

.track-bg   { width: 100%; background: var(--c-border); left: 0; }
.track-fill { background: var(--c-primary); opacity: 0.85; left: 0; }
.track-suggested { background: rgba(16, 185, 129, 0.45); }

.price-slider {
  display: block;
  width: 100%;
  height: 28px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: -11px 0 0;
  position: relative;
  z-index: 2;
}

.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: white;
  border: 2.5px solid var(--c-primary);
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
  cursor: pointer;
}

.price-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: white;
  border: 2.5px solid var(--c-primary);
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
  cursor: pointer;
}

.price-slider::-webkit-slider-runnable-track { background: transparent; height: 6px; }
.price-slider::-moz-range-track { background: transparent; height: 6px; }

.slider-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: var(--c-text-3);
  padding-top: 4px;
}

.legend-hint {
  font-weight: 600;
  color: var(--c-success);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Manual toggle */
.manual-toggle {
  margin-top: var(--sp-sm);
}

.manual-toggle summary {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: 0.8rem;
  color: var(--c-text-3);
  cursor: pointer;
  list-style: none;
  padding: var(--sp-xs) 0;
  user-select: none;
}

.manual-toggle summary::-webkit-details-marker { display: none; }
.manual-toggle summary i { width: 14px; height: 14px; }

/* ─── Quality ─────────────────────────────────────────────── */
.quality-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.quality-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: 0.8rem;
  font-weight: 600;
  align-self: flex-start;
}

.quality-badge i { width: 14px; height: 14px; }
.quality-badge.buena    { background: var(--c-success-light); color: #065f46; }
.quality-badge.aceptable{ background: #fef3c7; color: #92400e; }
.quality-badge.mala     { background: #fee2e2; color: #991b1b; }

.quality-tip {
  font-size: 0.82rem;
  color: var(--c-text-2);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   PRODUCTS LIST
   ════════════════════════════════════════════════════════════ */
.product-card {
  display: flex;
  gap: var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
  overflow: hidden;
}

.product-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--c-muted-bg);
  flex-shrink: 0;
}

/* Fallback visual cuando la imagen falla — evita el ícono roto del browser */
.product-thumb.img-error {
  object-fit: none;
  background-color: var(--c-muted-bg);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cbd5e1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}

.product-info { flex: 1; min-width: 0; }

.product-nombre {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-titulo {
  font-size: 0.78rem;
  color: var(--c-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.product-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-text);
}

.product-date {
  font-size: 0.75rem;
  color: var(--c-text-3);
}

.product-quality {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.product-quality i { width: 11px; height: 11px; }
.product-quality.buena    { background: var(--c-success-light); color: #065f46; }
.product-quality.aceptable{ background: #fef3c7; color: #92400e; }
.product-quality.mala     { background: #fee2e2; color: #991b1b; }

.product-barcode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: var(--r-full);
  background: var(--c-primary-light);
  color: var(--c-primary-dark);
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.product-barcode i { width: 11px; height: 11px; }

.product-quality.aceptable,
.quality-badge.aceptable {
  background: #ffedd5;
  color: #9a3412;
}

/* ════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  padding: 60px var(--sp-lg);
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  background: var(--c-muted-bg);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-icon i { width: 32px; height: 32px; color: var(--c-text-3); }

.empty-state p {
  font-size: 0.88rem;
  color: var(--c-text-2);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   LOADING
   ════════════════════════════════════════════════════════════ */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadeIn 0.18s ease-out;
}

.loading-card {
  background: var(--c-surface);
  border-radius: 20px;
  padding: 28px var(--sp-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  border: 1px solid var(--c-border);
  animation: bounceIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.loading-card p {
  font-size: 0.875rem;
  color: var(--c-text-2);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3.5px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: calc(80px + var(--safe-bottom) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #1e293b;
  color: white;
  padding: 11px 20px;
  border-radius: var(--r-full);
  font-size: 0.84rem;
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  max-width: 90vw;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--c-danger); }
.toast.success { background: var(--c-success); }

/* ════════════════════════════════════════════════════════════
   PRICE INPUT ROW (steppers + ai btn)
   ════════════════════════════════════════════════════════════ */
.price-input-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-sm);
}

.price-input-row .flex-1 { flex: 1; min-width: 0; }

.stepper-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--c-muted-bg);
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  align-self: stretch;
}

.stepper-btn i { width: 16px; height: 16px; }
.stepper-btn:active { background: var(--c-border); }

/* ════════════════════════════════════════════════════════════
   PHOTOS GRID (multi-select)
   ════════════════════════════════════════════════════════════ */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.photo-option {
  position: relative;
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  aspect-ratio: 1;
  display: flex;
  align-items: stretch;
  transition: border-color 0.15s;
}

.photo-option.selected { border-color: var(--c-primary); }

.photo-option-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-option-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(99,102,241,0.85);
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  font-size: 0.68rem;
  font-weight: 600;
}

.photo-option.selected .photo-option-label { display: flex; }
.photo-option-label i { width: 11px; height: 11px; }

.btn-generate-photos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: 11px;
  border-radius: var(--r-md);
  background: var(--c-muted-bg);
  color: var(--c-primary);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.btn-generate-photos i { width: 16px; height: 16px; }
.btn-generate-photos:active { background: var(--c-border); }
.btn-generate-photos:disabled { opacity: 0.45; }

/* ════════════════════════════════════════════════════════════
   RESEARCH BUTTON & LOADING
   ════════════════════════════════════════════════════════════ */
.btn-research {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.btn-research i { width: 18px; height: 18px; }
.btn-research:active { background: #c7d2fe; }

.research-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) 0;
}

.research-spinner {
  width: 52px;
  height: 52px;
  background: var(--c-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.research-icon-spin {
  width: 24px !important;
  height: 24px !important;
  color: var(--c-primary);
  animation: spin 2s ease-in-out infinite;
}

.research-msg {
  font-size: 0.85rem;
  color: var(--c-text-2);
  text-align: center;
  font-weight: 500;
}

.research-progress {
  width: 100%;
  height: 4px;
  background: var(--c-border);
  border-radius: 2px;
  overflow: hidden;
}

.research-bar {
  height: 100%;
  background: var(--c-primary);
  border-radius: 2px;
  width: 0%;
  transition: width 1s linear;
}

/* ════════════════════════════════════════════════════════════
   SELL PRICE STEPPER ROW
   ════════════════════════════════════════════════════════════ */
.price-stepper-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  margin: var(--sp-sm) 0;
}

.stepper-label {
  font-size: 0.78rem;
  color: var(--c-text-3);
  font-weight: 500;
  min-width: 90px;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════
   SKELETON LOADERS
   ════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg,
    var(--c-border) 25%, var(--c-muted-bg) 50%, var(--c-border) 75%
  );
  background-size: 220% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-md);
}

.skeleton-card {
  display: flex;
  gap: var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
}

.skeleton-thumb { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--r-md); }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.skeleton-line  { height: 13px; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }

/* ════════════════════════════════════════════════════════════
   PRODUCT CARD — micro-interactions
   ════════════════════════════════════════════════════════════ */
.product-card { transition: box-shadow 0.2s, transform 0.12s; }
.product-card:active { transform: scale(0.99); }

/* ════════════════════════════════════════════════════════════
   INPUT — transiciones más suaves
   ════════════════════════════════════════════════════════════ */
.field-input {
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-icon-wrap input {
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* ════════════════════════════════════════════════════════════
   PHOTO OPTION — feedback táctil
   ════════════════════════════════════════════════════════════ */
.photo-option { transition: border-color 0.2s, transform 0.12s; }
.photo-option:active { transform: scale(0.94); }

/* ════════════════════════════════════════════════════════════
   STEPPER BUTTONS — feedback mejorado
   ════════════════════════════════════════════════════════════ */
.stepper-btn { transition: background 0.15s, transform 0.1s; }
.stepper-btn:active { transform: scale(0.88); }

/* ════════════════════════════════════════════════════════════
   BTN RESEARCH — mejora visual
   ════════════════════════════════════════════════════════════ */
.btn-research {
  transition: background 0.15s, transform 0.1s;
}
.btn-research:active { transform: scale(0.98); }

/* ════════════════════════════════════════════════════════════
   HEADER — sutil gradiente
   ════════════════════════════════════════════════════════════ */
.app-header { background: rgba(248,250,252,.86); }

/* ════════════════════════════════════════════════════════════
   TOAST — entrada más premium
   ════════════════════════════════════════════════════════════ */
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.toast {
  transform: translateX(-50%) translateY(20px) scale(0.95);
  transition: opacity 0.25s cubic-bezier(0.4,0,0.2,1),
              transform 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ════════════════════════════════════════════════════════════
   RESULT SECTION — sombra sutil
   ════════════════════════════════════════════════════════════ */
.result-section {
  box-shadow: var(--shadow-sm);
}

/* ════════════════════════════════════════════════════════════
   CONFIRMAR BTN — más prominente
   ════════════════════════════════════════════════════════════ */
#confirmarBtn { letter-spacing: 0.01em; }

/* ════════════════════════════════════════════════════════════
   CHANGE PHOTO — mejor feedback
   ════════════════════════════════════════════════════════════ */
.change-photo-btn {
  transition: background 0.15s, transform 0.1s;
}
.change-photo-btn:active { transform: scale(0.95); }


/* ════════════════════════════════════════════════════════════
   DEV TOOLS PANEL
   ════════════════════════════════════════════════════════════ */
/* Exportar catálogo — botón sutil al pie de la lista */
.export-footer {
  padding: var(--sp-lg) var(--sp-md) var(--sp-md);
  display: flex;
  justify-content: center;
}

.btn-export-subtle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text-3);
  font-size: 0.76rem;
  font-weight: 500;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.btn-export-subtle i { width: 13px; height: 13px; }
.btn-export-subtle:hover  { color: var(--c-text-2); border-color: var(--c-text-3); background: var(--c-muted-bg); }
.btn-export-subtle:active { opacity: 0.7; }

/* Mantener compatibilidad con código existente */
.dev-tools-panel[hidden] { display: none; }


.product-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--sp-sm);
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 0.76rem;
  font-weight: 700;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
}

.product-action-btn i { width: 14px; height: 14px; }
.product-action-btn:active:not(:disabled) { transform: scale(0.97); }
.product-action-btn:disabled { opacity: 0.6; }
.product-action-spinner {
  width: 14px;
  height: 14px;
  border-color: rgba(99,102,241,.25);
  border-top-color: var(--c-primary);
}

.token-limit-panel {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
  background: rgba(15, 23, 42, 0.54);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

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

.token-limit-card {
  position: relative;
  width: min(100%, 360px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 28px var(--sp-lg) var(--sp-lg);
  text-align: center;
  animation: bounceIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.token-limit-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  color: var(--c-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.token-limit-close i { width: 18px; height: 18px; }

.token-limit-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-md);
  border-radius: 18px;
  background: #fef3c7;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
}

.token-limit-icon i { width: 28px; height: 28px; }
.token-limit-card h2 { font-size: 1.1rem; margin-bottom: 6px; color: var(--c-text); }
.token-limit-card p { font-size: 0.86rem; line-height: 1.5; color: var(--c-text-2); margin-bottom: var(--sp-lg); }

.token-limit-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  border-radius: var(--r-lg);
  background: #16a34a;
  color: white;
  font-size: 0.9rem;
  font-weight: 800;
}

.token-limit-whatsapp i { width: 18px; height: 18px; }

/* ─── Credits Shop Bottom Sheet ──────────────────────────── */
.credits-shop-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(15, 23, 42, 0.54);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  animation: fadeIn 0.2s ease;
}

.credits-shop-overlay[hidden] { display: none; }

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.credits-shop-sheet {
  width: 100%;
  background: var(--c-surface);
  border-radius: 20px 20px 0 0;
  padding: var(--sp-md) var(--sp-lg) calc(var(--sp-xl) + var(--safe-bottom));
  box-shadow: 0 -4px 32px rgba(0,0,0,.12);
  animation: slideUp 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.credits-shop-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-border);
  margin: 0 auto var(--sp-md);
}

.credits-shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.credits-shop-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
}

.credits-shop-sub {
  font-size: 0.84rem;
  color: var(--c-text-2);
  margin-bottom: var(--sp-lg);
}

/* Pack cards */
.credits-packs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.pack-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md);
  border-radius: var(--r-md);
  border: 2px solid var(--c-border);
  background: var(--c-surface);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.pack-btn:active { transform: scale(0.98); }

.pack-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

.pack-btn.selected {
  border-color: var(--c-primary);
  background: var(--c-primary-light);
}

.pack-btn-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pack-btn-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-text);
  text-transform: capitalize;
}

.pack-btn-amount {
  font-size: 0.82rem;
  color: var(--c-text-2);
}

.pack-btn-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-primary);
}

.pack-btn.selected .pack-btn-price { color: var(--c-primary-dark); }

/* Dev mode badge */
.credits-shop-dummy-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7;
  color: #92400e;
  border-radius: var(--r-md);
  padding: 8px var(--sp-md);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: var(--sp-md);
}

.credits-shop-dummy-badge i  { width: 15px; height: 15px; flex-shrink: 0; }
.credits-shop-dummy-badge[hidden] { display: none; }

/* ─── Barcode Scanner Overlay ────────────────────────────── */
.scanner-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  animation: fadeIn 0.2s ease;
}

.scanner-overlay[hidden] { display: none; }

.scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md);
  color: #fff;
}

.scanner-title {
  font-size: 1rem;
  font-weight: 600;
}

.scanner-close {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
  border-radius: var(--r-full);
  width: 36px;
  height: 36px;
}

.scanner-close i { width: 18px; height: 18px; }

.scanner-viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* Ocultar viewport cuando la cámara no está disponible */
.scanner-viewport[hidden] { display: none !important; }

.scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Guía de encuadre — línea horizontal animada */
.scanner-guide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
}

.scanner-frame {
  position: relative;
  width: min(78vw, 360px);
  height: 132px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(0,0,0,.08);
  box-shadow: 0 0 0 999px rgba(0,0,0,.22);
}

.scanner-frame span {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: #a5b4fc;
  filter: drop-shadow(0 0 8px rgba(99,102,241,.75));
}

.scanner-frame span:nth-child(1) { left: -1px; top: -1px; border-top: 3px solid; border-left: 3px solid; border-radius: 18px 0 0 0; }
.scanner-frame span:nth-child(2) { right: -1px; top: -1px; border-top: 3px solid; border-right: 3px solid; border-radius: 0 18px 0 0; }
.scanner-frame span:nth-child(3) { left: -1px; bottom: -1px; border-bottom: 3px solid; border-left: 3px solid; border-radius: 0 0 0 18px; }
.scanner-frame span:nth-child(4) { right: -1px; bottom: -1px; border-bottom: 3px solid; border-right: 3px solid; border-radius: 0 0 18px 0; }

.scanner-status-card {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  color: #fff;
  background: rgba(15,23,42,.72);
  backdrop-filter: blur(12px);
}

.scanner-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 6px rgba(245,158,11,.16);
  animation: pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.scanner-status-card.detecting .scanner-status-dot {
  background: #10b981;
  box-shadow: 0 0 0 6px rgba(16,185,129,.16);
}

.scanner-status-card.error .scanner-status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 6px rgba(239,68,68,.16);
}

.scanner-status-card strong {
  display: block;
  font-size: .86rem;
  line-height: 1.2;
}

.scanner-status-card span {
  display: block;
  margin-top: 2px;
  font-size: .74rem;
  color: rgba(255,255,255,.68);
}

.scanner-hint {
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: 0.85rem;
  padding: var(--sp-md);
}

.scanner-result {
  text-align: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 0 var(--sp-lg) var(--sp-md);
  background: rgba(99, 102, 241, 0.9);
  margin: 0 var(--sp-lg);
  border-radius: var(--r-md);
}

.scanner-result[hidden] { display: none; }

.scanner-capture-btn {
  margin: 0 var(--sp-lg) var(--sp-md);
  padding: 13px 16px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: rgba(99,102,241,.96);
  font-size: .92rem;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(99,102,241,.32);
}

.scanner-capture-btn:disabled {
  opacity: .55;
}

.scanner-capture-btn i { width: 18px; height: 18px; }

.scanner-recovery {
  margin: 0 var(--sp-lg) var(--sp-md);
  padding: 14px;
  border-radius: 18px;
  color: #fff;
  background: rgba(239,68,68,.16);
  border: 1px solid rgba(248,113,113,.35);
}

.scanner-recovery[hidden] { display: none !important; }

.scanner-recovery strong {
  display: block;
  font-size: .9rem;
  margin-bottom: 4px;
}

.scanner-recovery span {
  display: block;
  font-size: .78rem;
  line-height: 1.35;
  color: rgba(255,255,255,.72);
}

.scanner-recovery-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.scanner-recovery-actions button {
  padding: 10px 8px;
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.14);
  font-size: .78rem;
  font-weight: 800;
}

/* ── Scanner manual input ─────────────────────────────── */
.scanner-manual {
  padding: 0 var(--sp-lg) var(--sp-lg);
  margin-top: var(--sp-sm);
}

.scanner-manual-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-sm);
  color: rgba(255,255,255,0.5);
  font-size: 0.72rem;
}

.scanner-manual-divider::before,
.scanner-manual-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.2);
}

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

.scanner-manual-input {
  flex: 1;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.scanner-manual-input::placeholder { color: rgba(255,255,255,0.4); }
.scanner-manual-input:focus {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.18);
}

.scanner-manual-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--c-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.scanner-manual-btn i { width: 18px; height: 18px; }
.scanner-manual-btn:active { opacity: 0.8; }

/* ── Panel de configuración ───────────────────────────── */
.config-page-header {
  padding: var(--sp-lg) var(--sp-md) var(--sp-sm);
}

.config-page-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
}

.config-menu-list {
  padding: 0 var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.config-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  text-align: left;
  transition: background 0.15s;
  width: 100%;
}

.config-menu-item:active { background: var(--c-muted-bg); }

.config-menu-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--c-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.config-menu-icon i { width: 16px; height: 16px; color: var(--c-primary); }

.config-menu-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.config-menu-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-text);
}

.config-menu-sub {
  font-size: 0.74rem;
  color: var(--c-text-3);
}

.config-menu-arrow { width: 16px; height: 16px; color: var(--c-text-3); }

.config-app-version {
  text-align: center;
  font-size: 0.72rem;
  color: var(--c-text-3);
  padding: var(--sp-lg) var(--sp-md) var(--sp-md);
}

/* ── Consumo de IA — overlay/sheet ────────────────────── */
.usage-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  display: flex;
  align-items: flex-end;
}

.usage-detail-overlay[hidden] { display: none; }

.usage-detail-sheet {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-bottom: calc(var(--safe-bottom) + 16px);
}

.usage-detail-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-border);
  margin: 10px auto 6px;
}

.usage-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--sp-md) 10px;
  border-bottom: 1px solid var(--c-border);
}

.usage-detail-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
}

.usage-detail-loading {
  text-align: center;
  color: var(--c-text-3);
  font-size: 0.85rem;
  padding: 32px 16px;
}

.usage-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: var(--sp-md);
}

.usage-stat {
  background: var(--c-muted-bg);
  border-radius: var(--r-md);
  padding: 14px 12px;
  text-align: center;
}

.usage-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.usage-stat-label {
  font-size: 0.72rem;
  color: var(--c-text-3);
  font-weight: 500;
}

.usage-recharge-info {
  text-align: center;
  font-size: 0.74rem;
  color: var(--c-text-3);
  padding: 0 var(--sp-md) var(--sp-md);
}