@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Nunito:wght@400;600;700&display=swap');

:root {
  --azul: #017BC4;
  --azul-oscuro: #002B4A;
  --azul-claro: #96BAD0;
  --blanco: #fff;
  --gris-bg: #f0f4f8;
  --gris-borde: #dde3ea;
  --texto: #1a2535;
  --texto-suave: #5a6a7e;
  --verde: #22c55e;
  --rojo: #ef4444;
  --naranja: #f59e0b;
  --sidebar-w: 230px;
  --radio: 10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--gris-bg);
  color: var(--texto);
  display: flex;
  min-height: 100vh;
  font-size: 14px;
}

/* ── SIDEBAR ──────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--azul-oscuro);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
}
#sidebar-logo {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-group { padding: 12px 0; }
.nav-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--azul-claro);
  letter-spacing: 1.5px;
  padding: 6px 20px 4px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  cursor: pointer;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 600;
  transition: all .2s;
  border-left: 3px solid transparent;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: rgba(1,123,196,.3); border-left-color: var(--azul); }
.nav-item .icon { font-size: 16px; width: 20px; text-align: center; }
.nav-badge {
  margin-left: auto;
  background: var(--rojo);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

/* ── MAIN LAYOUT ──────────────────────────────────────────────── */
#main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
}
#header {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid var(--gris-borde);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}
#header h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--azul-oscuro);
  flex: 1;
}
#content { padding: 24px; flex: 1; }

/* ── BOTONES EXTRA ───────────────────────────────────────────── */
.btn-xs { padding: 3px 8px !important; font-size: 11px !important; }
.row-disabled td { opacity: .5; }

/* ── ROLES ───────────────────────────────────────────────────── */
.role-badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.role-admin       { background:#fde68a; color:#92400e; }
.role-responsable { background:#dbeafe; color:#1e40af; }
.role-user        { background:#f0f4f8; color:#5a6a7e; }
.status-dot       { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle; }
.status-dot.on    { background:var(--verde); }
.status-dot.off   { background:var(--rojo); }

/* ── USER BADGE SSO ──────────────────────────────────────────── */
#user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 4px;
}
#user-badge .user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-oscuro);
}
#user-badge .user-role {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--azul);
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .5px;
}

/* ── SYNC STATUS ─────────────────────────────────────────────── */
#sync-status {
  font-size: 12px;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
.dot.off { background: var(--naranja); }

/* ── TOAST ───────────────────────────────────────────────────── */
#tc { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 999; }
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 9px;
  background: var(--azul-oscuro);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  animation: slideIn .25s ease;
}
.toast.s { background: #166534; }
.toast.w { background: #92400e; }
.toast.e { background: #991b1b; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }