/* ============================================================
   DoFit POS — app.css
   Variables CSS, dark mode, componentes, animaciones suaves
   ============================================================ */

/* ── Variables (Light Mode) ─────────────────────────────────── */
:root {
  --df-primary:      #6C3FC5;
  --df-primary-dark: #5530A8;
  --df-primary-light:#9B6BF2;
  --df-accent:       #F5A623;
  --df-accent-dark:  #D4891A;
  --df-bg:           #F4F6FB;
  --df-card:         #FFFFFF;
  --df-text:         #1A1A2E;
  --df-text-muted:   #6B7280;
  --df-border:       #E5E7EB;
  --df-success:      #10B981;
  --df-danger:       #EF4444;
  --df-warning:      #F59E0B;
  --df-info:         #3B82F6;
  --df-shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --df-shadow:       0 4px 16px rgba(108,63,197,.12);
  --df-shadow-lg:    0 8px 32px rgba(108,63,197,.18);
  --df-radius:       12px;
  --df-radius-sm:    8px;
  --df-radius-lg:    16px;
  --df-transition:   0.22s ease;
  --df-navbar-h:     60px;
}

/* ── Dark Mode ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --df-bg:         #0F0F1A;
  --df-card:       #1A1A2E;
  --df-text:       #E5E7EB;
  --df-text-muted: #9CA3AF;
  --df-border:     #2D2D45;
  --df-shadow-sm:  0 1px 3px rgba(0,0,0,.3);
  --df-shadow:     0 4px 16px rgba(0,0,0,.4);
  --df-shadow-lg:  0 8px 32px rgba(0,0,0,.5);
}

/* ── Reset + Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--df-bg);
  color: var(--df-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  transition: background var(--df-transition), color var(--df-transition);
  -webkit-font-smoothing: antialiased;
}

/* ── Tipografía ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--df-text);
  font-weight: 700;
  line-height: 1.25;
}

a { color: var(--df-primary); text-decoration: none; }
a:hover { color: var(--df-primary-dark); text-decoration: underline; }

/* ── Navbar ─────────────────────────────────────────────────── */
.df-navbar {
  min-height: var(--df-navbar-h);
  background: var(--df-card);
  border-bottom: 1px solid var(--df-border);
  box-shadow: var(--df-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: background var(--df-transition), border-color var(--df-transition);
}

.df-navbar .navbar-brand {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--df-primary) !important;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.df-navbar .navbar-brand span.accent { color: var(--df-accent); }

.df-navbar .nav-link {
  color: var(--df-text-muted) !important;
  font-weight: 500;
  padding: 6px 14px !important;
  border-radius: var(--df-radius-sm);
  transition: color var(--df-transition), background var(--df-transition);
}

.df-navbar .nav-link:hover,
.df-navbar .nav-link.active {
  color: var(--df-primary) !important;
  background: rgba(108,63,197,.08);
}

/* ── Cards ──────────────────────────────────────────────────── */
.df-card {
  background: var(--df-card);
  border-radius: var(--df-radius);
  border: 1px solid var(--df-border);
  box-shadow: var(--df-shadow-sm);
  padding: 24px;
  transition:
    transform    var(--df-transition),
    box-shadow   var(--df-transition),
    background   var(--df-transition),
    border-color var(--df-transition);
}

.df-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--df-shadow);
}

.df-card-stat {
  display: flex;
  align-items: center;
  gap: 16px;
}

.df-card-stat .icon {
  width: 52px; height: 52px;
  border-radius: var(--df-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.df-card-stat .icon.purple { background: rgba(108,63,197,.12); color: var(--df-primary); }
.df-card-stat .icon.orange { background: rgba(245,166,35,.12);  color: var(--df-accent); }
.df-card-stat .icon.green  { background: rgba(16,185,129,.12);  color: var(--df-success); }
.df-card-stat .icon.blue   { background: rgba(59,130,246,.12);  color: var(--df-info); }

.df-card-stat .label { font-size: 13px; color: var(--df-text-muted); margin-bottom: 2px; }
.df-card-stat .value { font-size: 26px; font-weight: 800; color: var(--df-text); line-height: 1; }

/* ── Botones ─────────────────────────────────────────────────── */
.btn {
  border-radius: var(--df-radius-sm);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 20px;
  transition:
    transform  0.12s ease,
    box-shadow var(--df-transition),
    background var(--df-transition),
    opacity    var(--df-transition);
  position: relative;
  overflow: hidden;
}

.btn:active { transform: scale(0.96) !important; }

.btn-primary, .btn-df {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.35) !important;
}

.btn-primary:hover, .btn-df:hover {
  background: linear-gradient(135deg, #4338CA 0%, #6D28D9 50%, #DB2777 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(124,58,237,.5) !important;
}

/* Botón Cobrar POS — gradiente prominente */
.btn-cobrar {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%) !important;
  border: none !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(124,58,237,.4) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.btn-cobrar:hover:not(:disabled) {
  background: linear-gradient(135deg, #4338CA 0%, #6D28D9 50%, #DB2777 100%) !important;
  box-shadow: 0 8px 28px rgba(124,58,237,.55) !important;
  transform: translateY(-1px);
}
.btn-cobrar:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

/* ── Botones de acción en tabla (icono pequeño y elegante) ── */
.df-tbl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              transform .12s ease, box-shadow .12s ease;
  text-decoration: none;
  padding: 0;
}
.df-tbl-btn:hover  { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.df-tbl-btn:active { transform: scale(.92); }

/* Variantes de color */
.df-tbl-btn-edit {
  color: #6C3FC5;
  border-color: rgba(108,63,197,.18);
  background: rgba(108,63,197,.07);
}
.df-tbl-btn-edit:hover {
  background: rgba(108,63,197,.15);
  border-color: rgba(108,63,197,.35);
  color: #6C3FC5;
}
.df-tbl-btn-delete {
  color: #DC2626;
  border-color: rgba(220,38,38,.15);
  background: rgba(220,38,38,.06);
}
.df-tbl-btn-delete:hover {
  background: rgba(220,38,38,.14);
  border-color: rgba(220,38,38,.35);
  color: #DC2626;
}
.df-tbl-btn-warning {
  color: #D97706;
  border-color: rgba(217,119,6,.15);
  background: rgba(217,119,6,.06);
}
.df-tbl-btn-warning:hover {
  background: rgba(217,119,6,.14);
  border-color: rgba(217,119,6,.35);
  color: #D97706;
}
.df-tbl-btn-success {
  color: #059669;
  border-color: rgba(5,150,105,.15);
  background: rgba(5,150,105,.06);
}
.df-tbl-btn-success:hover {
  background: rgba(5,150,105,.14);
  border-color: rgba(5,150,105,.35);
  color: #059669;
}
.df-tbl-btn-view {
  color: #2563EB;
  border-color: rgba(37,99,235,.15);
  background: rgba(37,99,235,.06);
}
.df-tbl-btn-view:hover {
  background: rgba(37,99,235,.14);
  border-color: rgba(37,99,235,.35);
  color: #2563EB;
}
.df-tbl-btn-warn {
  color: #D97706;
  border-color: rgba(217,119,6,.15);
  background: rgba(217,119,6,.06);
}
.df-tbl-btn-warn:hover {
  background: rgba(217,119,6,.14);
  border-color: rgba(217,119,6,.35);
  color: #D97706;
}

/* Agrupar botones sin espacio extra */
.df-tbl-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* Emoji como ícono en tarjetas y tabla (dfRenderIcon) */
.df-emoji-icon {
  font-size: 1.2em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-accent {
  background: var(--df-accent) !important;
  border-color: var(--df-accent) !important;
  color: #fff !important;
}

.btn-accent:hover {
  background: var(--df-accent-dark) !important;
  box-shadow: 0 4px 14px rgba(245,166,35,.4) !important;
}

.btn-outline-df {
  border: 2px solid var(--df-primary) !important;
  color: var(--df-primary) !important;
  background: transparent !important;
}

.btn-outline-df:hover {
  background: var(--df-primary) !important;
  color: #fff !important;
}

/* Ripple */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: dfRipple 0.55s linear;
  pointer-events: none;
}

@keyframes dfRipple {
  to { transform: scale(4); opacity: 0; }
}

/* ── Formularios ─────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--df-card) !important;
  border: 1.5px solid var(--df-border) !important;
  border-radius: var(--df-radius-sm) !important;
  color: var(--df-text) !important;
  font-size: 14px;
  padding: 10px 14px;
  transition:
    border-color var(--df-transition),
    box-shadow   var(--df-transition),
    background   var(--df-transition);
}

.form-control:focus, .form-select:focus {
  border-color: var(--df-primary) !important;
  box-shadow: 0 0 0 3px rgba(108,63,197,.15) !important;
  outline: none;
}

.form-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--df-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}

.input-group-text {
  background: var(--df-bg) !important;
  border: 1.5px solid var(--df-border) !important;
  color: var(--df-text-muted);
}

/* ── Tablas ──────────────────────────────────────────────────── */
.df-table-wrap {
  border-radius: var(--df-radius);
  overflow: hidden;
  border: 1px solid var(--df-border);
  box-shadow: var(--df-shadow-sm);
  animation: dfFadeInUp 0.4s ease both;
}

.table {
  margin-bottom: 0;
  color: var(--df-text);
}

.table thead th {
  background: linear-gradient(135deg, var(--df-primary), var(--df-primary-light));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 14px 16px;
  border: none;
}

.table tbody tr {
  transition: background var(--df-transition);
  border-bottom: 1px solid var(--df-border);
}

.table tbody tr:last-child { border-bottom: none; }

.table tbody tr:hover {
  background: rgba(108,63,197,.04);
}

.table tbody td {
  padding: 13px 16px;
  vertical-align: middle;
  background: transparent;
}

/* ── Badges ──────────────────────────────────────────────────── */
.df-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.df-badge-success { background: rgba(16,185,129,.12);  color: #059669; }
.df-badge-danger  { background: rgba(239,68,68,.12);   color: #DC2626; }
.df-badge-warning { background: rgba(245,158,11,.12);  color: #D97706; }
.df-badge-info    { background: rgba(59,130,246,.12);  color: #2563EB; }
.df-badge-purple  { background: rgba(108,63,197,.12);  color: var(--df-primary); }

/* ── Skeleton Loaders ────────────────────────────────────────── */
.df-skeleton {
  background: linear-gradient(
    90deg,
    var(--df-border) 25%,
    var(--df-bg)     50%,
    var(--df-border) 75%
  );
  background-size: 200% 100%;
  animation: dfShimmer 1.4s infinite;
  border-radius: var(--df-radius-sm);
}

@keyframes dfShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.df-skeleton-line {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.df-skeleton-line.w-75 { width: 75%; }
.df-skeleton-line.w-50 { width: 50%; }
.df-skeleton-line.w-90 { width: 90%; }

/* ── Login Page ──────────────────────────────────────────────── */
.df-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(108,63,197,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(245,166,35,.12) 0%, transparent 50%),
    var(--df-bg);
  padding: 20px;
}

.df-login-card {
  width: 100%;
  max-width: 420px;
  background: var(--df-card);
  border-radius: var(--df-radius-lg);
  box-shadow: var(--df-shadow-lg);
  padding: 44px 40px 36px;
  border: 1px solid var(--df-border);
  animation: dfFadeInDown 0.5s cubic-bezier(.22,.68,0,1.2) both;
}

.df-login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.df-login-logo .brand-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--df-primary), var(--df-primary-light));
  border-radius: var(--df-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(108,63,197,.35);
}

.df-login-logo h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--df-text);
  margin: 0;
}

.df-login-logo h1 span { color: var(--df-accent); }
.df-login-logo p { color: var(--df-text-muted); font-size: 13px; margin: 4px 0 0; }

/* ── Toasts ──────────────────────────────────────────────────── */
.df-toast-wrap {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.df-toast {
  min-width: 280px;
  max-width: 360px;
  background: var(--df-card);
  border-radius: var(--df-radius-sm);
  box-shadow: var(--df-shadow-lg);
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-left: 4px solid var(--df-primary);
  animation: dfSlideInRight 0.35s cubic-bezier(.22,.68,0,1.1) both;
  pointer-events: all;
  font-size: 14px;
  color: var(--df-text);
}

.df-toast.success { border-color: var(--df-success); }
.df-toast.error   { border-color: var(--df-danger); }
.df-toast.warning { border-color: var(--df-warning); }
.df-toast.info    { border-color: var(--df-info); }

.df-toast.hiding {
  animation: dfSlideOutRight 0.3s ease both;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.df-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--df-primary), var(--df-primary-light));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}

/* ── Dark mode toggle ────────────────────────────────────────── */
.df-dark-toggle {
  cursor: pointer;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--df-bg);
  color: var(--df-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--df-transition), color var(--df-transition);
}

.df-dark-toggle:hover {
  background: rgba(108,63,197,.1);
  color: var(--df-primary);
}

/* ── Page wrapper ────────────────────────────────────────────── */
.df-page {
  padding: 28px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.df-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--df-text);
  margin-bottom: 6px;
}

.df-page-subtitle {
  font-size: 13px;
  color: var(--df-text-muted);
  margin-bottom: 24px;
}

/* ── Divider ─────────────────────────────────────────────────── */
.df-divider {
  border: none;
  border-top: 1px solid var(--df-border);
  margin: 20px 0;
}

/* ── Alerts ──────────────────────────────────────────────────── */
.df-alert {
  border-radius: var(--df-radius-sm);
  padding: 13px 18px;
  font-size: 14px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 10px;
}

.df-alert-success {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.25);
  color: #065F46;
}

.df-alert-danger {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.25);
  color: #991B1B;
}

/* ── Animaciones globales ────────────────────────────────────── */
@keyframes dfFadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dfFadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dfFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

.df-animate-in  { animation: dfFadeInUp 0.4s ease both; }
.df-animate-in2 { animation: dfFadeInUp 0.4s ease 0.1s both; }
.df-animate-in3 { animation: dfFadeInUp 0.4s ease 0.2s both; }
.df-animate-in4 { animation: dfFadeInUp 0.4s ease 0.3s both; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .df-login-card { padding: 32px 20px 24px; }
  .df-page { padding: 16px 12px; }
  .df-page-title { font-size: 19px; }
  .df-card { padding: 16px; }
}

/* ── Scrollbar personalizado ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--df-bg); }
::-webkit-scrollbar-thumb {
  background: var(--df-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--df-text-muted); }

/* ── Superadmin sidebar (Fase 1 minimal) ─────────────────────── */
.df-sidebar {
  width: 240px;
  background: var(--df-card);
  border-right: 1px solid var(--df-border);
  min-height: calc(100vh - var(--df-navbar-h));
  padding: 20px 12px;
  transition: background var(--df-transition);
}

.df-sidebar .sidebar-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--df-text-muted);
  padding: 12px 10px 6px;
}

.df-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--df-radius-sm);
  color: var(--df-text-muted) !important;
  font-weight: 500;
  font-size: 14px;
  transition: background var(--df-transition), color var(--df-transition);
}

.df-sidebar .nav-link:hover,
.df-sidebar .nav-link.active {
  background: rgba(108,63,197,.08);
  color: var(--df-primary) !important;
}

.df-sidebar .nav-link .icon { font-size: 16px; width: 20px; }

.df-layout { display: flex; }
.df-content { flex: 1; overflow: auto; }