/* ── Variables ───────────────────────────────────────────── */
:root {
  --verde:        #1b5e3b;
  --verde-mid:    #2d9156;
  --verde-light:  #d4edda;
  --verde-glow:   rgba(45,145,86,.25);
  --gold:         #f9a825;
  --gold-light:   #fff8e1;
  --bg:           #f4faf6;
  --card-shadow:  0 4px 20px rgba(0,0,0,.08);
  --card-shadow-hover: 0 8px 32px rgba(27,94,59,.18);
  --radius:       16px;
  --radius-sm:    10px;
}

/* ── Reset / Base ────────────────────────────────────────── */
body { background: var(--bg); font-family: 'Segoe UI', system-ui, sans-serif; }

/* ── Colores utilitarios ─────────────────────────────────── */
.bg-verde        { background: var(--verde) !important; }
.bg-verde-light  { background: var(--verde-light) !important; }
.bg-gold-light   { background: var(--gold-light) !important; }
.text-verde      { color: var(--verde) !important; }
.text-gold       { color: var(--gold) !important; }
.border-verde    { border-color: var(--verde) !important; }

/* ── Botones ─────────────────────────────────────────────── */
.btn-verde {
  background: linear-gradient(135deg, var(--verde-mid), var(--verde));
  border: none; color: #fff;
  box-shadow: 0 4px 12px var(--verde-glow);
  transition: all .25s ease;
}
.btn-verde:hover, .btn-verde:focus {
  background: linear-gradient(135deg, var(--verde), #0d3d22);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--verde-glow);
}
.btn-outline-verde {
  color: var(--verde); border-color: var(--verde);
  transition: all .2s ease;
}
.btn-outline-verde:hover {
  background: var(--verde); color: #fff;
  transform: translateY(-1px);
}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar.bg-verde {
  background: linear-gradient(90deg, #0d3d22, var(--verde)) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
.nav-link { transition: color .2s; }
.nav-link:hover { color: #a8f0c6 !important; }

/* ── Brand / Logo ────────────────────────────────────────── */
.brand-icon {
  display: flex; gap: 2px;
  font-size: 2.16rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
}
@media (max-width: 576px) {
  .brand-icon { font-size: 1.7rem; }
}
.brand-text-wrap { display: flex; flex-direction: column; line-height: 1; }
.brand-text {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .5px;
  background: linear-gradient(90deg, #a8f0c6, #ffd700, #ff9800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.brand-fruits-row {
  font-size: .96rem;
  letter-spacing: 2px;
  opacity: .85;
  -webkit-text-fill-color: initial;
  color: rgba(255,255,255,.8);
}
@media (max-width: 576px) {
  .brand-fruits-row { font-size: .75rem; letter-spacing: 1px; }
}
.fruit-spin { display: inline-block; animation: fruitBounce 2.5s ease-in-out infinite; }
.delay-f    { animation-delay: .4s; }
@keyframes fruitBounce {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30%     { transform: translateY(-3px) rotate(-8deg); }
  60%     { transform: translateY(-1px) rotate(5deg); }
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  border-radius: var(--radius) !important;
  border: none !important;
  box-shadow: var(--card-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.card-header { border-radius: var(--radius) var(--radius) 0 0 !important; }

/* ── Stat cards ──────────────────────────────────────────── */
.stat-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--card-shadow);
  transition: transform .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--verde-mid), var(--gold));
  border-radius: var(--radius) var(--radius) 0 0;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.stat-card .stat-icon { font-size: 2rem; margin-bottom: .4rem; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.stat-card .stat-label { font-size: .78rem; color: #888; margin-top: .25rem; }

/* ── Hero card (perfil cliente) ──────────────────────────── */
.hero-card {
  background: linear-gradient(135deg, #0d3d22 0%, var(--verde) 50%, #2d9156 100%);
  border-radius: var(--radius);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-card::after {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
  top: -60px; right: -60px;
}

/* ── Progress bars ───────────────────────────────────────── */
.progress {
  border-radius: 20px !important;
  background: rgba(0,0,0,.08);
  overflow: visible !important;
}
.progress-bar {
  border-radius: 20px !important;
  transition: width 1.2s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
}
.progress-bar.bg-verde { background: linear-gradient(90deg, var(--verde-mid), var(--verde)) !important; }
.progress-bar::after {
  content: '';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--verde-glow);
}

/* ── Logo circle ─────────────────────────────────────────── */
.logo-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--verde), var(--verde-mid));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px var(--verde-glow);
}

/* ── Login logo con frutas ───────────────────────────────── */
.login-logo-wrap { display: inline-block; position: relative; }
.login-fruits-row {
  display: flex; gap: 4px; justify-content: center;
  margin-bottom: -8px; position: relative; z-index: 2;
}
.login-fruits-row span {
  font-size: 1.1rem;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  animation: fruitFloat 2.2s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}
@keyframes fruitFloat {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-7px) rotate(4deg); }
}
.logo-circle-lg {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d3d22, var(--verde-mid));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.15);
  font-size: 2rem;
  position: relative; z-index: 1;
}

/* ── Efecto escáner en botón ─────────────────────────────── */
.btn-scan {
  position: relative;
  overflow: hidden;
}
.btn-scan::before {
  content: '';
  position: absolute;
  top: -8px; left: -10%;
  width: 120%; height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  box-shadow: 0 0 10px rgba(168,240,198,.8), 0 0 20px rgba(255,255,255,.4);
  opacity: 0;
  pointer-events: none;
}
.btn-scan:hover::before {
  animation: scanDown .75s ease-in-out;
}
@keyframes scanDown {
  0%   { top: -8px;  opacity: 1; }
  85%  { top: 110%;  opacity: 1; }
  100% { top: 110%;  opacity: 0; }
}

/* ── Modal QR personal ───────────────────────────────────── */
.qr-modal-header {
  background: linear-gradient(135deg, #0d3d22, var(--verde-mid));
  color: #fff; padding: 1.5rem 1.5rem 1rem; text-align: center;
}
.qr-frame {
  border: 3px solid var(--verde); border-radius: 12px;
  padding: 12px; display: inline-block;
  background: #fff;
  box-shadow: 0 4px 16px var(--verde-glow);
}
/* ── Visor escáner admin ─────────────────────────────────── */
#qrScannerVideo {
  width: 100%; border-radius: 12px;
  border: 3px solid var(--verde-mid);
}
.scan-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.scan-corner {
  position: absolute;
  width: 50px; height: 50px;
  border-color: #a8f0c6;
  border-style: solid;
  border-width: 0;
}
.scan-corner.tl { top:12%; left:15%; border-top-width:4px; border-left-width:4px; border-radius:6px 0 0 0; }
.scan-corner.tr { top:12%; right:15%; border-top-width:4px; border-right-width:4px; border-radius:0 6px 0 0; }
.scan-corner.bl { bottom:12%; left:15%; border-bottom-width:4px; border-left-width:4px; border-radius:0 0 0 6px; }
.scan-corner.br { bottom:12%; right:15%; border-bottom-width:4px; border-right-width:4px; border-radius:0 0 6px 0; }
.scan-line-anim {
  position: absolute; left:15%; right:15%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #a8f0c6, transparent);
  box-shadow: 0 0 8px #a8f0c6;
  animation: scanLineMove 1.6s ease-in-out infinite;
}
@keyframes scanLineMove {
  0%   { top: 12%; }
  100% { top: 88%; }
}

/* ── Nivel badges ────────────────────────────────────────── */
.nivel-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 50px;
  font-weight: 700; font-size: .85rem;
}
.nivel-bronce  { background: #fbe9d8; color: #8B4513; }
.nivel-plata   { background: #e8e8e8; color: #555; }
.nivel-oro     { background: #fff3cd; color: #a07800; }
.nivel-diamante{ background: #e8f4fc; color: #0d6efd; }

.bg-level-bronce   { background: #CD7F32 !important; color: #fff !important; }
.bg-level-plata    { background: #9e9e9e !important; color: #fff !important; }
.bg-level-oro      { background: #f9a825 !important; color: #fff !important; }
.bg-level-diamante { background: #42a5f5 !important; color: #fff !important; }

/* ── Notificación badge ──────────────────────────────────── */
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  background: #e53935;
  border-radius: 50%;
  font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
  animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red {
  0%,100% { box-shadow: 0 0 0 0 rgba(229,57,53,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(229,57,53,0); }
}

/* ── Motivational banner ─────────────────────────────────── */
.motivational-banner {
  background: linear-gradient(90deg, var(--gold-light), #fff9f0);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .75rem 1rem;
  font-weight: 600;
  color: #5d4037;
  animation: slideInLeft .5s ease;
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Celebration modal ───────────────────────────────────── */
.celebrate-modal .modal-content {
  border: none;
  border-radius: var(--radius);
  text-align: center;
  overflow: hidden;
}
.celebrate-header {
  background: linear-gradient(135deg, var(--verde), var(--verde-mid));
  color: #fff; padding: 2rem 1.5rem 1rem;
}
.celebrate-icon {
  font-size: 4rem;
  animation: bounceIn .6s cubic-bezier(.36,.07,.19,.97);
}
@keyframes bounceIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  80%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.points-pop {
  font-size: 3rem; font-weight: 900;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(249,168,37,.4);
  animation: popIn .5s .3s both cubic-bezier(.36,.07,.19,.97);
}
@keyframes popIn {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ── Streak fire ─────────────────────────────────────────── */
.streak-fire { animation: fireShake 1s infinite; display: inline-block; }
@keyframes fireShake {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}

/* ── Table ───────────────────────────────────────────────── */
.table > :not(caption) > * > * { padding: .75rem 1rem; }
.table tbody tr { transition: background .15s; }

/* ── Notificación item ───────────────────────────────────── */
.notif-item {
  border-left: 3px solid transparent;
  transition: background .2s;
}
.notif-item.unread { border-left-color: var(--verde); background: #f0fff4; }

/* ── Promo alert ─────────────────────────────────────────── */
.promo-banner {
  background: linear-gradient(90deg, #fff3cd, #fffde7);
  border: 2px solid var(--gold);
  border-radius: var(--radius-sm);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  0%,100% { box-shadow: 0 0 0 0 rgba(249,168,37,.3); }
  50%     { box-shadow: 0 0 12px 4px rgba(249,168,37,.15); }
}

/* ── Animaciones generales ───────────────────────────────── */
.fade-in-up {
  animation: fadeInUp .5s ease both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }

/* ── Input focus ─────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--verde-mid);
  box-shadow: 0 0 0 .2rem var(--verde-glow);
}

/* ── Alert ───────────────────────────────────────────────── */
.alert { border-radius: var(--radius-sm); border: none; }

/* ── Login page ──────────────────────────────────────────── */
.login-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #0d3d22 0%, #1b5e3b 50%, #2d9156 100%);
  display: flex; align-items: center; justify-content: center;
}
.login-card { border-radius: var(--radius) !important; box-shadow: 0 20px 60px rgba(0,0,0,.3) !important; }

@media (max-width: 768px) {
  .stat-value { font-size: 1.3rem; }
  .navbar-collapse { border-top: 1px solid rgba(255,255,255,.15); margin-top: .5rem; }
}