/* ============================================================
   STAFF · Consola CIOFF — hoja de estilos propia sobre Bootstrap 5
   (vendorizado en /vendor/bootstrap, sin CDN).
   Paleta: verde oliva en degradado, negro, blanco y beige.
   ============================================================ */
:root{
  color-scheme: light;
  --olive-deep:#2b331b;
  --olive:#55632c;
  --olive-bright:#7d963f;
  --olive-soft:#a7b878;
  --beige:#efe8d4;
  --beige-2:#e7ddc2;
  --beige-line:#d8caa4;
  --ink:#191b14;
  --ink-2:#3b3d31;
  --paper:#ffffff;
  --muted:#6f7060;
  --good:#3f7d3a;
  --warn:#a97c1f;
  --crit:#a4392a;

  --bs-primary: var(--olive);
  --bs-primary-rgb: 85,99,44;
  --bs-link-color: var(--olive-deep);
  --bs-link-hover-color: var(--olive);
  --bs-body-font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html, body{ height:100%; }
body{
  background: var(--beige); color: var(--ink);
  display:flex; flex-direction:column; min-height:100vh;
}

.btn-primary{ background-color: var(--olive); border-color: var(--olive); }
.btn-primary:hover, .btn-primary:focus{ background-color: var(--olive-deep); border-color: var(--olive-deep); }
.btn-outline-primary{ color: var(--olive); border-color: var(--olive); }
.btn-outline-primary:hover{ background-color: var(--olive); border-color: var(--olive); }
.form-check-input:checked{ background-color: var(--olive); border-color: var(--olive); }
.form-control:focus, .form-select:focus{ border-color: var(--olive-bright); box-shadow: 0 0 0 .25rem rgba(125,150,63,.25); }
a{ color: var(--olive-deep); }

/* ---------- barra superior ---------- */
.staff-topbar{
  display:flex; align-items:center; gap:16px; padding:8px 20px;
  background: linear-gradient(90deg,#ffffff 0%,#eef0e2 5%,#7d963f 22%,#2b331b 52%,#191b14 100%);
  color:#f5f1e3;
}
.staff-topbar .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.staff-topbar .brand img{ height:36px; width:auto; }
.staff-topbar .brand span{ font-weight:800; letter-spacing:.14em; font-size:16px; color: var(--olive-deep); }
.staff-topbar .spacer{ flex:1; }
.staff-topbar .user-chip{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.16);
  border-radius:999px; padding:5px 12px 5px 6px; font-size:13px; font-weight:600;
}
.staff-topbar .user-chip .av{
  width:26px;height:26px;border-radius:50%;background:#f5f1e3;color:var(--olive-deep);
  display:grid;place-items:center;font-size:11px;font-weight:700;
}
.staff-topbar form button{
  background:rgba(255,255,255,.14); border:0; color:#f5f1e3; border-radius:8px;
  padding:7px 10px; font-size:12.5px; font-weight:600;
}
.staff-topbar form button:hover{ background:rgba(255,255,255,.24); }

/* ---------- layout con sidebar ---------- */
.staff-shell{ display:flex; flex:1 0 auto; width:100%; }
.staff-sidebar{
  flex:0 0 230px; background: var(--paper); border-right:1px solid var(--beige-line);
  padding:16px 12px;
}
.staff-sidebar h6{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted);
  font-weight:700; margin:14px 8px 6px;
}
.staff-sidebar h6:first-child{ margin-top:2px; }
.staff-sidebar .nav-link{
  display:flex; align-items:center; gap:10px; color: var(--ink-2); font-size:14px;
  font-weight:600; padding:8px 10px; border-radius:8px;
}
.staff-sidebar .nav-link:hover{ background: var(--beige); }
.staff-sidebar .nav-link.active{ background: var(--olive); color:#fff; }
.staff-sidebar .nav-link i{ width:18px; text-align:center; }

.staff-content{ flex:1; padding:22px 26px; min-width:0; }
.staff-content h1{ font-size:22px; font-weight:700; }

.staff-footer{
  background: var(--ink); color:#a9a99b; font-size:11.5px;
  padding:12px 20px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;
}
.staff-footer strong{ color:#f2efe2; letter-spacing:.08em; }
.staff-footer .sp{ margin-left:auto; }

/* ---------- tarjetas de contenido ---------- */
.staff-card{ background: var(--paper); border:1px solid var(--beige-line); border-radius:12px; }
.table thead th{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--muted);
  border-bottom-width:1px; background: var(--beige); font-weight:700;
}
.badge-estado-activo{ background: var(--good); }
.badge-estado-prueba{ background: var(--warn); }
.badge-estado-suspendido{ background: var(--crit); }
.badge-si{ background: var(--good); }
.badge-no{ background: #b6ad91; color:#191b14; }

/* ---------- login / recuperar clave ---------- */
.staff-auth{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--beige); padding:24px;
}
.staff-auth .marca{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:18px; }
.staff-auth .marca img{ height:56px; width:auto; }
.staff-auth .marca span{ font-weight:800; letter-spacing:.16em; color: var(--olive-deep); font-size:18px; }
.staff-auth .marca small{ display:block; text-align:center; color: var(--muted); font-family: ui-monospace, monospace; letter-spacing:.2em; font-size:10px; margin-top:2px; }
.staff-auth-card{
  width:100%; max-width:380px; background: var(--paper); border:1px solid var(--beige-line);
  border-radius:14px; padding:28px 26px; box-shadow: 0 20px 45px -25px rgba(25,27,20,.4);
}
.staff-auth-card h1{ font-size:18px; margin-bottom:4px; }
.staff-auth-card p.lead-chico{ font-size:13px; color: var(--muted); margin-bottom:18px; }
.captcha-fila{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.captcha-fila img{ border-radius:8px; border:1px solid var(--beige-line); }
.captcha-fila button{
  width:38px; height:38px; border-radius:8px; border:1px solid var(--beige-line);
  background: var(--beige); font-size:16px; cursor:pointer;
}
.staff-auth-card .enlace-volver{ display:block; text-align:center; margin-top:14px; font-size:13px; }

@media (max-width:820px){
  .staff-shell{ flex-direction:column; }
  .staff-sidebar{ flex-basis:auto; border-right:0; border-bottom:1px solid var(--beige-line); }
}