/*
 * Creafactory FE — Color Palette & Custom Styles
 * Para cambiar la paleta, solo modifica las variables en :root
 */

:root {
  /* === PALETA PRIMARIA (azules) === */
  --cf-50:  #eff6ff;
  --cf-100: #dbeafe;
  --cf-200: #bfdbfe;
  --cf-300: #93c5fd;
  --cf-400: #60a5fa;
  --cf-500: #3b82f6;
  --cf-600: #2563eb;
  --cf-700: #1d4ed8;
  --cf-800: #1e40af;
  --cf-900: #1e3a8a;
  --cf-950: #172554;

  /* === SEMÁNTICOS === */
  --cf-primary:        var(--cf-700);
  --cf-primary-hover:  var(--cf-800);
  --cf-primary-light:  var(--cf-500);
  --cf-primary-bg:     var(--cf-50);
  --cf-primary-border: var(--cf-200);

  /* === SUPERFICIE === */
  --cf-bg:       #f8faff;
  --cf-surface:  #ffffff;
  --cf-border:   #e2e8f0;
  --cf-muted:    #f1f5f9;

  /* === TEXTO === */
  --cf-text:     #0f172a;
  --cf-text-2:   #475569;
  --cf-text-3:   #94a3b8;

  /* === SIDEBAR === */
  --cf-sidebar-bg:          #0f172a;
  --cf-sidebar-text:        rgba(255,255,255,0.75);
  --cf-sidebar-text-active: #ffffff;
  --cf-sidebar-active-bg:   rgba(59,130,246,0.2);
  --cf-sidebar-hover-bg:    rgba(255,255,255,0.07);
  --cf-sidebar-border:      rgba(255,255,255,0.08);
  --cf-sidebar-accent:      #3b82f6;

  /* === ESTADOS === */
  --cf-success: #10b981;
  --cf-warning: #f59e0b;
  --cf-danger:  #ef4444;
  --cf-info:    #06b6d4;
}

/* Scrollbar refinado */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cf-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cf-text-3); }

/* Transiciones globales */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Form inputs — estado base mejorado */
.cf-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--cf-border);
  border-radius: 0.75rem;
  background: #fafcff;
  color: var(--cf-text);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cf-input:focus {
  border-color: var(--cf-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  background: #fff;
}

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

/* Botón primario */
.cf-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--cf-800), var(--cf-600));
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.8125rem 1.75rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37,99,235,0.35);
  transition: all 0.2s;
}

.cf-btn-primary:hover {
  background: linear-gradient(135deg, var(--cf-900), var(--cf-700));
  box-shadow: 0 6px 20px rgba(37,99,235,0.45);
  transform: translateY(-1px);
}

.cf-btn-primary:active { transform: translateY(0); }

.cf-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: white;
  color: var(--cf-700);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.6875rem 1.25rem;
  border-radius: 0.625rem;
  border: 1.5px solid var(--cf-200);
  cursor: pointer;
  transition: all 0.15s;
}

.cf-btn-secondary:hover {
  background: var(--cf-50);
  border-color: var(--cf-300);
}

/* Card */
.cf-card {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.03);
}

/* Badge */
.cf-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
}

.cf-badge-blue   { background: var(--cf-100); color: var(--cf-700); }
.cf-badge-green  { background: #dcfce7; color: #15803d; }
.cf-badge-red    { background: #fee2e2; color: #b91c1c; }
.cf-badge-yellow { background: #fef9c3; color: #854d0e; }
.cf-badge-gray   { background: #f1f5f9; color: #475569; }

/* Alert */
.cf-alert {
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.cf-alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.cf-alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.cf-alert-info    { background: var(--cf-50); border: 1px solid var(--cf-200); color: var(--cf-700); }
.cf-alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

/* Auth layout gradient */
.cf-auth-gradient {
  background: linear-gradient(160deg, var(--cf-900) 0%, var(--cf-700) 60%, #1e65d8 100%);
}

/* Sidebar nav item */
.cf-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  color: var(--cf-sidebar-text);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}

.cf-nav-item:hover {
  background: var(--cf-sidebar-hover-bg);
  color: var(--cf-sidebar-text-active);
}

.cf-nav-item.active {
  background: var(--cf-sidebar-active-bg);
  color: var(--cf-sidebar-text-active);
}

.cf-nav-item.active .cf-nav-dot {
  background: var(--cf-sidebar-accent);
}

/* Stat card */
.cf-stat-card {
  background: white;
  border: 1px solid var(--cf-border);
  border-radius: 1rem;
  padding: 1.375rem 1.5rem;
  transition: box-shadow 0.2s, transform 0.2s;
}

.cf-stat-card:hover {
  box-shadow: 0 4px 20px rgba(30,58,138,.08);
  transform: translateY(-2px);
}

/* Table */
.cf-table {
  width: 100%;
  border-collapse: collapse;
}

.cf-table th {
  background: var(--cf-muted);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cf-text-2);
  border-bottom: 1px solid var(--cf-border);
}

.cf-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--cf-border);
  font-size: 0.875rem;
  color: var(--cf-text);
  vertical-align: middle;
}

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

.cf-table tbody tr:hover { background: var(--cf-bg); }

/* Progress bar */
.cf-progress-bar {
  height: 6px;
  background: var(--cf-100);
  border-radius: 50px;
  overflow: hidden;
}

.cf-progress-bar-fill {
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--cf-500), var(--cf-700));
  transition: width 0.6s ease;
}

/* Sidebar responsive */
@media (max-width: 768px) {
  .cf-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
  .cf-sidebar.open { transform: translateX(0); }
}