/* Fideliza SaaS - Sistema de diseno "Calm & Premium Editorial" */

:root {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --border: #E2E8F0;
  --text-primary: #0F172A;
  --text-secondary: #64748B;

  --primary: #4F46E5;
  --primary-dark: #4338CA;
  --primary-soft: #EEF2FF;

  --accent-sage: #0F766E;
  --accent-sage-soft: #F0FDFA;

  --success: #10B981;
  --success-soft: #ECFDF5;
  --warning: #F59E0B;
  --warning-soft: #FFFBEB;
  --danger: #EF4444;
  --danger-soft: #FEF2F2;
  --purple: #8B5CF6;
  --purple-soft: #F5F3FF;
}

* { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; }

body {
  background-color: var(--bg);
  color: var(--text-primary);
}

.text-secondary { color: var(--text-secondary); }

/* Tarjetas base con jerarquia visual limpia */
.card {
  background: var(--surface);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: 12px;
  padding: 0.65rem 1.25rem;
  min-height: 48px;
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { background: #F1F5F9; }

.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: #FEE2E2; }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: #F1F5F9; }

/* Chips de seleccion tactil (servicios en el modal de visita rapida) */
.chip {
  min-height: 48px;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: left;
}
.chip:hover { border-color: var(--primary); }
.chip.chip-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

/* Badges de estado semantico */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-activo { background: var(--success-soft); color: #047857; }
.badge-riesgo { background: var(--warning-soft); color: #B45309; }
.badge-inactivo { background: var(--danger-soft); color: #B91C1C; }
.badge-puntos { background: var(--purple-soft); color: #6D28D9; }
.badge-dot { width: 8px; height: 8px; border-radius: 999px; }
.badge-activo .badge-dot { background: var(--success); }
.badge-riesgo .badge-dot { background: var(--warning); }
.badge-inactivo .badge-dot { background: var(--danger); }

/* Avatares con iniciales en colores pastel, asignados de forma deterministica */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 700; flex-shrink: 0;
}
.avatar-0 { background: #DBEAFE; color: #1D4ED8; }
.avatar-1 { background: #FCE7F3; color: #BE185D; }
.avatar-2 { background: #D1FAE5; color: #047857; }
.avatar-3 { background: #FEF3C7; color: #B45309; }
.avatar-4 { background: #EDE9FE; color: #6D28D9; }
.avatar-5 { background: #FFE4E6; color: #BE123C; }
.avatar-6 { background: #CFFAFE; color: #0E7490; }

/* Sidebar de escritorio. overflow-y:auto es lo que permite scrollear el menu cuando su
   contenido (logo + links + Cerrar sesion) no entra en la altura visible de la pantalla
   (tipico en celulares, donde la barra de herramientas del navegador come parte del alto) —
   sin esto, lo que no entraba quedaba tapado e imposible de tocar. */
.sidebar { width: 260px; transition: width 0.2s ease; overflow-y: auto; overscroll-behavior: contain; }
.sidebar.collapsed { width: 84px; }
.sidebar.collapsed .sidebar-label { display: none; }
.sidebar.collapsed .sidebar-brand-text { display: none; }

/* En movil el sidebar se abre como un drawer superpuesto (accesos que no entran en la
   bottom-bar: Premios, Referidos, Marca, WhatsApp), en vez de estar oculto del todo */
@media (max-width: 767px) {
  .sidebar {
    display: flex !important;
    position: fixed !important; inset: 0 auto 0 0 !important; z-index: 60;
    width: 84vw; max-width: 300px;
    /* El <aside> trae la clase h-screen (height:100vh) de Tailwind. En el celular, 100vh
       mide el alto MAXIMO del navegador (con la barra de Chrome/Safari oculta), no lo que
       realmente se ve en cada momento — asi que con la barra visible, el cajon queda mas
       alto que la pantalla real y el final (el boton "Cerrar sesion") se renderiza tapado
       por esa barra, sin nada que scrollear porque el contenido si entra en los 100vh.
       100dvh en cambio se ajusta al alto visible real en todo momento. Se pisa la altura
       de la clase h-screen agregando la propiedad de nuevo aca, con mas especificidad. */
    height: 100vh !important; /* alto de respaldo para navegadores viejos sin soporte de dvh */
    height: 100dvh !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 40px rgba(15, 23, 42, 0.25);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed { width: 84vw; max-width: 300px; }
  .sidebar.collapsed .sidebar-label,
  .sidebar.collapsed .sidebar-brand-text { display: block; }
}

.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 55; background: rgba(15, 23, 42, 0.45);
}

.nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.9rem; border-radius: 10px; font-weight: 600; font-size: 0.875rem;
  color: var(--text-secondary);
}
.nav-link:hover { background: #F1F5F9; color: var(--text-primary); }
.nav-link.active { background: var(--primary-soft); color: var(--primary-dark); }

/* Bottom bar movil */
.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-link {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 0.65rem; font-weight: 600; color: var(--text-secondary);
  padding: 0.5rem 0; flex: 1;
}
.bottom-link.active { color: var(--primary); }

/* Toasts */
#toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; }
.toast {
  min-width: 260px; max-width: 340px; padding: 0.85rem 1rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(15,23,42,0.08);
  display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem; font-weight: 500;
  animation: toast-in 0.2s ease;
}
.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px);} to { opacity: 1; transform: translateY(0);} }

/* Skeleton loaders */
.skeleton { background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 37%, #F1F5F9 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: 8px; }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.spinner {
  width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 999px; animation: spin 0.6s linear infinite;
}
.spinner-dark { border: 2.5px solid var(--border); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Modal / drawer */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 50; }
.modal-panel {
  background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(15,23,42,0.15);
}
@media (min-width: 640px) {
  .modal-panel { border-radius: 20px; }
}

/* Barra de progreso (portal de cliente) */
.progress-track { background: var(--border); border-radius: 999px; height: 10px; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, var(--primary), var(--purple)); height: 100%; border-radius: 999px; transition: width 0.4s ease; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; }