/* ===== Tu Barbería — Custom CSS ===== */

/* --- Variables de color --- */
:root {
  --gold: #00f2fe;
  --gold-hover: #38bdf8;
  --primary: #00f2fe;
  --primary-hover: #38bdf8;
  --bg-dark: #0a0e17;
  --bg-card: #111827;
  --bg-input: #1f2937;
  --border-subtle: #1f2937;
  --text-muted: #9ca3af;
}

/* --- Base --- */
body {
  background-color: var(--bg-dark);
  color: #f5f5f5;
}

/* --- Tarjetas del dashboard --- */
.card-stat {
  background: #111827;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.25rem;
  transition: border-color 0.2s;
}
.card-stat:hover {
  border-color: var(--gold);
}

/* --- Formularios --- */
.form-control,
.form-select {
  background-color: var(--bg-input);
  border: 1px solid #374151;
  color: #fff;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--bg-input);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(0,242,254,.25);
}
.form-control::placeholder {
  color: #6b7280;
}
.form-label {
  color: #cbd5e1;
  font-size: .875rem;
}

/* --- Botón Cian / Primario --- */
.btn-warning {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #0a0e17;
  font-weight: 600;
}
.btn-warning:hover {
  background-color: var(--gold-hover);
  border-color: var(--gold-hover);
  color: #0a0e17;
}

/* --- Navbar --- */
.navbar {
  box-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* --- Alertas sutiles --- */
.alert {
  border-radius: 10px;
}

/* --- Tablas --- */
.table {
  color: #e0e0e0;
}
.table thead th {
  border-bottom: 1px solid var(--gold);
  color: var(--gold);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.table tbody tr:hover {
  background-color: rgba(255,255,255,.04);
}

/* --- Badges de estado --- */
.badge-pendiente { background: rgba(255,193,7,.15); color: #ffc107; }
.badge-pagado    { background: rgba(25,135,84,.15);  color: #198754; }
.badge-vencido   { background: rgba(220,53,69,.15);  color: #dc3545; }