/* Estilo profesional inspirado en barberías */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
:root{
  --bg:#0f1115;       /* fondo oscuro elegante */
  --card:#171a21;     /* tarjetas */
  --accent:#c99b66;   /* dorado barbero */
  --accent-2:#a97b4a; /* dorado oscuro */
  --text:#e8eaf0;     /* texto principal */
  --muted:#9aa1ad;    /* texto secundario */
  --danger:#e74c3c;
  --success:#2ecc71;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 100% -10%, #1b202b 0%, var(--bg) 60%);
  min-height:100vh;
}
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid #232836;background:linear-gradient(180deg,#151923, #11141a);
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;gap:12px;align-items:center}
.brand .logo{ width: 38px;
  height: 38px;
  border-radius: 8px;
  background: url('img/barber.png') center/cover no-repeat;
  border: none;}
.brand h1{font-size:18px;margin:0;font-weight:600;letter-spacing:0.5px}
.container{max-width:1000px;margin:0 auto;padding:26px}
.grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:900px){.grid{grid-template-columns:1.2fr .8fr}}

.card{
  background:var(--card);
  border:1px solid #232836;
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
}
.card h2{margin:0 0 14px 0;font-size:20px}
label{display:block;margin:10px 0 6px 2px;color:var(--muted);font-size:13px}
input, select, button{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a2f3b;background:#0f131b;color:var(--text);
  outline:none;transition:all .2s ease; font-size:14px;
}
input:focus, select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,155,102,.15)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.muted{color:var(--muted);font-size:12px;margin-top:6px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;background:linear-gradient(180deg,var(--accent), var(--accent-2));
  border:none;color:#111;padding:12px 16px;border-radius:12px;font-weight:600;cursor:pointer;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{padding:10px;border-bottom:1px solid #2a2f3b;font-size:14px}
th{text-align:left;color:var(--muted);font-weight:500}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid #2a2f3b;color:var(--muted)}
.badge.success{border-color:var(--success);color:#9be7b3}
.badge.pending{border-color:#f1c40f;color:#f9e79f}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.danger{background:var(--danger);color:white}
.filters{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;margin:10px 0}
.notice{padding:10px 12px;border:1px dashed #2a2f3b;border-radius:10px;background:#121722;color:var(--muted);font-size:13px}
footer{padding:30px 22px;color:var(--muted);text-align:center}