/* ─────────────────────────────────────
   CRM Pipeline – Custom Dark Styles
   ───────────────────────────────────── */

:root {
  --col-potencial:   #5bc0eb;
  --col-lead:        #3dbfab;
  --col-oportunidad: #6abf69;
  --col-visita:      #f0a500;
  --col-oferta:      #e05c5c;
  --col-conversion:  #a78bfa;
}

/* ── Base ── */
body { font-size: 0.9rem; }

/* ── Scrollbar ── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: #111; }
::-webkit-scrollbar-thumb  { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ── Stage pills in detail header ── */
.stage-pill {
  font-size: 0.68rem;
  padding: 4px 8px;
  border-radius: 20px;
  background: #222;
  color: #555;
  border: 1px solid #333;
  transition: all .2s;
}
.stage-pill.active-stage {
  background: #1a1a1a;
  color: #fff;
  border-width: 2px;
}

.stage-pill.stage-potencial.active-stage   { border-color: var(--col-potencial);   color: var(--col-potencial);   }
.stage-pill.stage-lead.active-stage        { border-color: var(--col-lead);        color: var(--col-lead);        }
.stage-pill.stage-oportunidad.active-stage { border-color: var(--col-oportunidad); color: var(--col-oportunidad); }
.stage-pill.stage-visita.active-stage      { border-color: var(--col-visita);      color: var(--col-visita);      }
.stage-pill.stage-oferta.active-stage      { border-color: var(--col-oferta);      color: var(--col-oferta);      }
.stage-pill.stage-conversion.active-stage  { border-color: var(--col-conversion);  color: var(--col-conversion);  }

/* ── Cards in Kanban ── */
.crm-card {
  position: relative;
}
.crm-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
}
.col-potencial   .crm-card::before { background: var(--col-potencial);   }
.col-lead        .crm-card::before { background: var(--col-lead);        }
.col-oportunidad .crm-card::before { background: var(--col-oportunidad); }
.col-visita      .crm-card::before { background: var(--col-visita);      }
.col-oferta      .crm-card::before { background: var(--col-oferta);      }
.col-conversion  .crm-card::before { background: var(--col-conversion);  }

/* ── Forms ── */
.form-control:focus,
.form-select:focus {
  border-color: #ffc107 !important;
  box-shadow: 0 0 0 0.15rem rgba(255,193,7,.15);
}

.form-check-input:checked { background-color: #ffc107; border-color: #ffc107; }
.form-switch .form-check-input:checked { background-color: #28a745; border-color: #28a745; }

/* ── Table ── */
.table-dark { --bs-table-bg: transparent; }
.table-hover > tbody > tr:hover { --bs-table-hover-bg: rgba(255,255,255,.04); }

/* ── Card headers ── */
.card-header { font-size: 0.82rem; }

/* ── Badges ── */
.badge { font-weight: 500; }

/* ── Toasts ── */
.toast { min-width: 260px; font-size: 0.85rem; }

/* ── Alert ── */
.alert { font-size: 0.85rem; }

/* ── Progress bars ── */
.progress { background-color: #2a2a2a; }

/* ── Responsive kanban ── */
@media (max-width: 768px) {
  .kanban-col { width: 220px; }
}

/* ── Login page background ── */
body:has(.login-bg) {
  background: radial-gradient(ellipse at center, #0d1b2a 0%, #000 100%) !important;
}