/* ═══════════════════════════════════════════
   CANOCCHI POS — THEME: BLANCO + ROJO
   ═══════════════════════════════════════════ */

/* ── Cards ─────────────────────────────────── */
.card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ── Buttons ────────────────────────────────── */
.btn-primary {
  background: #e51111;
  color: #ffffff;
  border-radius: 0.75rem;
  padding: 0.625rem 1.25rem;
  font-weight: 700;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(225,17,17,0.2);
}
.btn-primary:hover  { background: #c10a0a; box-shadow: 0 0 18px rgba(225,17,17,0.35); }
.btn-primary:active { transform: scale(0.97); }

.btn-ghost {
  background: transparent;
  color: #374151;
  border: 1.5px solid #d0d0d0;
  border-radius: 0.75rem;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  transition: all 0.15s;
  cursor: pointer;
}
.btn-ghost:hover { background: #f1f1f1; border-color: #e51111; color: #e51111; }

/* ── Form fields ────────────────────────────── */
.field-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #e51111;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.375rem;
}
.field-input {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #d0d0d0;
  border-radius: 0.625rem;
  padding: 0.6rem 0.875rem;
  color: #1f2937;
  font-size: 0.925rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.field-input::placeholder { color: #9ca3af; }
.field-input:focus {
  border-color: #e51111;
  box-shadow: 0 0 0 3px rgba(229,17,17,0.1);
}

/* ── Section title ──────────────────────────── */
.section-title {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #1f2937;
  letter-spacing: -0.01em;
}

/* ── Stat cards (Dashboard) ─────────────────── */
.stat-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
  padding: 1.25rem;
  border-left: 4px solid #e51111;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.stat-label { font-size: 0.75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.stat-value { font-family: 'Exo 2', sans-serif; font-size: 2rem; font-weight: 900; color: #1f2937; margin-top: 0.25rem; }

/* ── Nav buttons (top) ──────────────────────── */
.nav-btn {
  color: #6b7280;
  font-family: 'Exo 2', sans-serif;
}
.nav-btn:hover  { background: #f1f1f1; color: #1f2937; }
.active-nav     { background: #e51111 !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(225,17,17,0.3); }

/* ── Nav buttons (mobile bottom) ───────────── */
.mob-nav         { color: #9ca3af; font-weight: 500; background: transparent; border: none; cursor: pointer; }
.mob-nav:hover   { color: #e51111; }
.active-mob-nav  { color: #e51111 !important; font-weight: 700 !important; }

/* ── Stock list items ───────────────────────── */
.stock-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  border-radius: 0.75rem;
  transition: border-color 0.15s, background 0.15s;
}
.stock-item:hover { border-color: #e51111; background: #fff1f1; }
.low-stock        { border-color: #fcd34d; background: #fffbeb; }

/* ── Payment method selected ────────────────── */
.pay-method-selected {
  border-color: #e51111 !important;
  background: #fff1f1 !important;
  box-shadow: 0 0 0 3px rgba(229,17,17,0.12);
}

/* ── Custom scrollbar ───────────────────────── */
.custom-scroll::-webkit-scrollbar       { width: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 2px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #e51111; border-radius: 2px; }

/* ── Toast notifications ────────────────────── */
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  animation: slideIn 0.2s ease;
  pointer-events: auto;
  max-width: 320px;
  border-left: 4px solid transparent;
}
.toast-success { background: #f0fdf4; color: #166534; border-left-color: #22c55e; }
.toast-error   { background: #fff1f2; color: #9f1239; border-left-color: #e51111; }
.toast-info    { background: #eff6ff; color: #1e40af; border-left-color: #3b82f6; }
.toast-warning { background: #fffbeb; color: #92400e; border-left-color: #f59e0b; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Loading skeleton ───────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f1f1f1 25%, #e5e5e5 50%, #f1f1f1 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.5rem;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Cart items ─────────────────────────────────────── */
.cart-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  border-radius: 0.75rem;
  transition: border-color 0.15s;
}
.cart-item:hover { border-color: #e51111; }

/* ── Ranking items (Dashboard) ──────────────────────── */
.rank-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f1f1f1;
}
.rank-item:last-child { border-bottom: none; }

.rank-badge {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Exo 2', sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.rank-1     { background: #fef3c7; color: #92400e; border: 2px solid #f59e0b; }
.rank-2     { background: #f1f5f9; color: #475569; border: 2px solid #94a3b8; }
.rank-3     { background: #fef2f2; color: #9f1239; border: 2px solid #f87171; }
.rank-other { background: #f8f8f8; color: #6b7280; border: 2px solid #e5e5e5; }

.progress-bar {
  height: 4px;
  background: #f1f1f1;
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: #e51111;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ── Cierre historial items ──────────────────────────── */

@keyframes slideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ── Dark mode overrides ─────────────────────────── */
.dark .card {
  background: #1f2937;
  border-color: #374151;
}
.dark .stat-card {
  background: #1f2937;
  border-color: #374151;
  border-left-color: #e51111;
}
.dark .stat-value { color: #f9fafb; }

.dark .section-title { color: #f9fafb; }

.dark .stock-item {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}
.dark .stock-item:hover { border-color: #e51111; background: #2d1a1a; }
.dark .low-stock        { border-color: #fcd34d; background: #2d2600; }

.dark .cart-item { background: #1f2937; border-color: #374151; }
.dark .cart-item:hover { border-color: #e51111; }

.dark .rank-item { border-bottom-color: #374151; }

.dark .cierre-item { background: #1f2937; border-color: #374151; }
.dark .cierre-item:hover { border-color: #e51111; }

.dark .btn-ghost {
  color: #d1d5db;
  border-color: #374151;
  background: transparent;
}
.dark .btn-ghost:hover { background: #374151; border-color: #e51111; color: #e51111; }

.dark .nav-btn { color: #9ca3af; }
.dark .nav-btn:hover { background: #374151; color: #f9fafb; }

.dark .mob-nav { color: #6b7280; }
.dark .mob-nav:hover { color: #e51111; }

.dark .field-input {
  background: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}
.dark .field-input:focus {
  border-color: #e51111;
  box-shadow: 0 0 0 3px rgba(229,17,17,0.15);
}

.dark .toast-success { background: #14532d; color: #86efac; border-left-color: #22c55e; }
.dark .toast-error   { background: #450a0a; color: #fca5a5; border-left-color: #e51111; }
.dark .toast-info    { background: #1e3a5f; color: #93c5fd; border-left-color: #3b82f6; }
.dark .toast-warning { background: #451a03; color: #fcd34d; border-left-color: #f59e0b; }

/* Pay method dark */
.dark .pay-method-btn { border-color: #374151; color: #d1d5db; }
.dark .pay-method-btn:hover { border-color: #e51111; background: #2d1a1a; }
.dark .pay-method-selected { border-color: #e51111 !important; background: #2d1a1a !important; }


/* ── Empleadas module ───────────────────────── */
.dark .btn-ghost:hover { background: #374151; }

/* Cierre item */
.cierre-item {
  padding: 0.875rem;
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.15s;
}
.cierre-item:hover { border-color: #e51111; }