/* ============================================================
   admin.css — Estilos propios del panel de administración
   Se carga DESPUÉS de base.css, layout.css y components.css
   ============================================================ */

/* Distinción visual del área admin */
.brand--admin { background: #0E2F62; }
.admin-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-accent); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .6px;
  padding: 2px 7px; border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.topbar--admin { border-bottom: 2px solid var(--color-accent); }

/* Barra de herramientas de tabla */
.tbl-toolbar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px;
}
.tbl-toolbar .global-search { max-width: 320px; flex: 1; }
.tbl-toolbar .select { max-width: 200px; }
.tbl-toolbar .spacer { flex: 1; }

/* KPIs con mini-gráfico */
.kpi { padding: 16px 18px; }
.kpi__label { font-size: .78rem; color: var(--color-muted); font-weight: 600; }
.kpi__value { font-size: 1.6rem; font-weight: 700; margin-top: 4px; letter-spacing: -.5px; }
.kpi__foot { font-size: .74rem; margin-top: 6px; }
.kpi__foot.up { color: var(--color-success); }
.kpi__foot.down { color: var(--color-danger); }

/* Gráfico de barras (CSS puro, sin librerías) */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 10px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bars__bar { width: 100%; max-width: 42px; background: var(--color-primary); border-radius: 6px 6px 0 0; transition: height var(--t); }
.bars__bar.alt { background: var(--color-accent); }
.bars__label { font-size: .72rem; color: var(--color-muted); }

/* Barras horizontales (uso por sección) */
.hbar { margin-bottom: 12px; }
.hbar__row { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 5px; }
.hbar .track { height: 9px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.hbar .fill { height: 100%; background: var(--color-primary); border-radius: inherit; }

/* Donut con conic-gradient */
.donut {
  width: 150px; height: 150px; border-radius: 50%;
  background: conic-gradient(var(--color-primary) 0 62%, var(--color-accent) 62% 84%, var(--color-border) 84% 100%);
  display: grid; place-items: center;
  margin: 0 auto;
}
.donut::after {
  content: ""; width: 96px; height: 96px; border-radius: 50%; background: var(--color-surface);
}
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: .82rem; }
.donut-legend span { display: inline-flex; align-items: center; gap: 8px; }
.donut-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* Matriz de permisos */
.perm-table td.check-cell { text-align: center; }
.perm-table input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.perm-table th.rot { font-size: .74rem; }

/* Organigrama */
.org { display: flex; flex-direction: column; align-items: center; gap: 0; overflow-x: auto; padding: 10px 0; }
.org ul { display: flex; gap: 18px; position: relative; padding-top: 22px; }
.org li { list-style: none; position: relative; display: flex; flex-direction: column; align-items: center; }
.org li::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 22px; background: var(--color-border-strong);
}
.org ul::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--color-border-strong);
}
.org > .org-node::after {
  content: ""; width: 1px; height: 0;
}
.org-node {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 10px 14px; text-align: center;
  min-width: 150px; box-shadow: var(--shadow-sm);
}
.org-node b { font-size: .84rem; display: block; }
.org-node span { font-size: .72rem; color: var(--color-muted); }
.org-node--root { border-top: 3px solid var(--color-primary); }
.org > ul::before { display: none; }

/* Editor en dos columnas (formulario + vista previa) */
.editor { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } }

/* Lista de actividad */
.activity .item__meta b { color: var(--color-text); }