:root {
  --bg: #0f1115;
  --panel: #171a21;
  --border: #262b36;
  --text: #e6e8ec;
  --muted: #9aa1ac;
  --accent: #4f8cff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

header h1 {
  font-size: 18px;
  margin: 0;
}

header a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}
header a:hover { color: var(--text); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand-name {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}
.site-footer a:hover { color: var(--text); }

.main-nav {
  display: flex;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}

.main-nav .nav-link {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
}

.main-nav .nav-link.active {
  background: var(--accent);
  color: white;
}

main {
  padding: 24px 32px 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}

.card h2 {
  font-size: 15px;
  margin: 0 0 6px;
}

.card p {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 14px;
}

.card a.btn {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
}

form.filtros {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 14px 16px;
  border-radius: 10px;
}

form.filtros label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted);
  gap: 4px;
}

form.filtros input,
form.filtros select {
  background: #0c0e12;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
}

form.filtros button, .exports a {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}

form.filtros a.secondary, .exports a.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.exports {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.widget {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.widget-header h3 {
  font-size: 14px;
  margin: 0;
}

.widget select {
  background: #0c0e12;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 6px;
}

.big-number {
  font-size: 40px;
  font-weight: 600;
  color: var(--accent);
}

.big-number-wrap {
  position: relative;
}

.gauge-wrap {
  position: relative;
  height: 130px;
}

.gauge-canvas {
  width: 100% !important;
  height: 100% !important;
}

.gauge-center-value {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
  pointer-events: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table th, table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

table th { color: var(--muted); font-weight: 500; }

table th.sortable {
  cursor: pointer;
  user-select: none;
}

table th.sortable:hover {
  color: var(--text);
}

.sort-arrow {
  font-size: 10px;
  color: var(--accent);
}

.widget-table {
  overflow-x: auto;
}

.empty {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

.section-title {
  font-size: 16px;
  margin: 36px 0 4px;
}

.section-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 16px;
}

.endpoints-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.endpoint-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.endpoint-name {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.endpoint-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.badge-on {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.badge-off {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.endpoint-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.kpi-chip {
  background: #0c0e12;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
}

.kpi-chip-total {
  color: var(--text);
  border-color: var(--accent);
  font-weight: 600;
}

.btn-toggle {
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}

.btn-toggle-on {
  background: var(--accent);
  color: white;
}

.btn-toggle-off {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-toggle-reset {
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
}

.btn-toggle-reset:hover {
  background: rgba(239, 68, 68, 0.12);
}

.endpoint-actions {
  display: flex;
  gap: 8px;
}

.banner {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin: 0 0 20px;
}

.banner-ok {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.banner-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.endpoint-rango-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.endpoint-rango-form label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted);
  gap: 4px;
}

.endpoint-rango-form input {
  background: #0c0e12;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
}

.filtros-admin {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filtros-admin-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.filtros-admin-card h3 {
  font-size: 14px;
  margin: 0 0 12px;
}

.filtros-admin-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.filtros-admin-meta label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  flex: 1;
  min-width: 200px;
}

.filtros-admin-meta input[type="text"] {
  background: #0c0e12;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.filtros-admin-table {
  margin-bottom: 12px;
}

.filtros-admin-card .empty {
  margin-bottom: 12px;
}

.filtros-admin-table input[type="text"] {
  width: 100%;
  background: #0c0e12;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
}

.filtros-admin-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* ===== Reordenar por drag&drop (filas de filtros + tarjetas de
   tableros en Configuraciones → Reportes, report/static/configuraciones.js)
   ===== */

.filtros-admin-table th:first-child,
.filtros-admin-table td.drag-handle {
  width: 28px;
  padding-right: 0;
}

.drag-handle {
  cursor: grab;
  color: var(--muted);
  user-select: none;
  text-align: center;
}

.drag-handle:active {
  cursor: grabbing;
}

.orden-lista tr,
.orden-lista li {
  cursor: default;
}

.orden-lista .dragging {
  opacity: 0.4;
}

.filtros-admin-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
}

.widgets-admin-card {
  margin-top: -8px;
}

.widgets-orden-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.widgets-orden-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0c0e12;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  max-width: 360px;
}

.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 32px 10px 14px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  position: relative;
  animation: toast-in 0.2s ease-out;
}

.toast strong {
  display: block;
  margin-bottom: 2px;
}

.toast span {
  color: var(--muted);
  font-size: 12px;
}

.toast-ok {
  border-left-color: #22c55e;
}

.toast-error {
  border-left-color: #ef4444;
}

.toast-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.toast-close:hover {
  color: var(--text);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Responsive (celular / pantallas angostas) ===== */
@media (max-width: 640px) {
  header {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  header h1 {
    font-size: 16px;
  }

  .brand {
    width: 100%;
  }

  .main-nav {
    width: 100%;
  }

  .site-footer {
    padding: 14px 16px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .main-nav .nav-link {
    flex: 1;
    text-align: center;
  }

  main {
    padding: 16px 16px 48px;
  }

  .grid,
  .widgets {
    grid-template-columns: 1fr;
  }

  .card a.btn {
    display: block;
    text-align: center;
  }

  form.filtros {
    flex-direction: column;
    align-items: stretch;
  }

  form.filtros label,
  form.filtros input,
  form.filtros select {
    width: 100%;
  }

  form.filtros button,
  form.filtros a.secondary {
    width: 100%;
    text-align: center;
  }

  .exports {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
  }

  .exports a {
    text-align: center;
  }

  .big-number {
    font-size: 30px;
  }

  .endpoint-row {
    flex-direction: column;
    align-items: stretch;
  }

  .endpoint-row form,
  .btn-toggle {
    width: 100%;
  }

  .endpoint-actions {
    flex-direction: column;
    width: 100%;
  }

  .section-title {
    margin-top: 28px;
  }

  .filtros-admin-table {
    display: block;
    overflow-x: auto;
  }

  .filtros-admin-meta {
    flex-direction: column;
  }

  .filtros-admin-meta label {
    min-width: 0;
  }

  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
}

/* ===== Menú lateral (sidebar): grupos colapsables + reporte activo
   resaltado como "atajo" — ver report/templates/_sidebar.html y
   report/static/sidebar.js. index.html, report.html y configuraciones.html
   envuelven todo en .app-shell (sidebar + .main-column con el header/main/
   footer de siempre) en vez de tener el brand/nav arriba de página. ===== */

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 0 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.sidebar-header .brand-title {
  font-size: 14px;
  font-weight: 600;
}

.sidebar-close {
  display: none;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.sidebar-groups {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
}

.sidebar-group + .sidebar-group {
  margin-top: 4px;
}

.sidebar-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
}

.sidebar-group-toggle:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.sidebar-group-arrow {
  font-size: 10px;
  transition: transform 0.15s ease;
}

.sidebar-group.collapsed .sidebar-group-arrow {
  transform: rotate(-90deg);
}

.sidebar-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 8px;
}

.sidebar-link {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-link.active {
  background: var(--accent);
  color: white;
}

.sidebar-empty {
  padding: 4px 12px 12px;
}

.sidebar-config-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 8px 16px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}

.sidebar-config-link:hover {
  color: var(--text);
}

.sidebar-config-link.active {
  color: var(--accent);
  font-weight: 600;
}

.sidebar-toggle {
  display: none;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.sidebar-backdrop {
  display: none;
}

.main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.main-column > header {
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-column > header h1 {
  font-size: 18px;
  margin: 0;
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-close {
    display: block;
  }

  .sidebar-toggle {
    display: inline-block;
  }

  .sidebar-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
  }
}

@media (max-width: 640px) {
  .main-column > header {
    padding: 14px 16px;
  }
}

/* ===== Filtro multi-select con atajo "Todas" (report.html + app.js,
   función habilitarFiltrosMultiSelect()) ===== */

.ms-filter {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.ms-toggle {
  background: #0c0e12;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  min-width: 160px;
  text-align: left;
  cursor: pointer;
}

.ms-toggle:hover {
  border-color: var(--accent);
}

.ms-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: max(240px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.ms-search {
  width: 100%;
  background: #0c0e12;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.ms-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.ms-option-all {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 8px;
  font-weight: 600;
}

.ms-options {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ms-option-oculta {
  display: none;
}

.ms-option-vacio {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
  padding: 6px;
}

/* ===== Overlay de carga entre navegaciones (report/static/loading-overlay.js) ===== */
.page-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 21, 0.72);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.page-loading-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

.page-loading-text {
  color: var(--muted);
  font-size: 13px;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

.ms-hint {
  color: var(--muted);
  font-size: 11px;
  margin: 0 0 6px;
  padding: 0 2px;
}

@media (max-width: 640px) {
  .ms-panel {
    left: auto;
    right: 0;
  }
}

/* ===== Detalle por protocolo (acordeón, report_templates.yaml: agrupar_por: protocolo) ===== */
.protocolo-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  /* Fuerza su propia capa de composición: bug conocido de Chromium donde
     texto dentro de un contenedor con scroll y muchos hijos queda con el
     layout correcto (confirmado con getBoundingClientRect/computedStyle)
     pero no se pinta hasta el próximo repaint. translateZ(0) fuerza el
     repintado inicial en esa capa. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.protocolo-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* Es un <div role="button">, no un <button> nativo: en Chrome se vio un
   caso donde el texto de un <button> flex con varios <span> quedaba con
   layout/estilos calculados correctos pero sin pintarse en pantalla — un
   div evita por completo el pipeline de render de controles de formulario
   nativos, así que sirve como workaround aunque no se haya podido
   confirmar la causa exacta en el navegador afectado. */
.protocolo-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #0c0e12;
  border: none;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.protocolo-toggle span {
  color: inherit;
}

.protocolo-toggle:hover {
  color: var(--accent);
}

.protocolo-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.protocolo-numero {
  font-weight: 600;
}

.protocolo-total {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.protocolo-arrow {
  color: var(--muted);
  transition: transform 0.15s ease;
}

.protocolo-item.open .protocolo-arrow {
  transform: rotate(180deg);
}

.protocolo-detalle {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}

.protocolo-detalle table {
  width: 100%;
}

/* ---- Login / usuarios / auditoría (ver report/auth.py) ---- */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-wrap {
  width: 100%;
  max-width: 340px;
  padding: 16px;
}

.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.login-title {
  font-size: 16px;
  font-weight: 600;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.login-card input {
  background: #0c0e12;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
}

.login-submit {
  margin-top: 4px;
  width: 100%;
}

.sidebar-admin-links {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  margin: 4px 0 0;
  padding-top: 4px;
}

.sidebar-admin-links .sidebar-config-link {
  border-top: none;
  margin: 0 8px;
  padding: 8px 4px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-logout-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.sidebar-logout-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.crear-usuario-form {
  margin-bottom: 20px;
}

.usuario-username {
  color: var(--muted);
  font-weight: 400;
}

.usuario-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.usuario-inline-form select,
.usuario-inline-form input {
  background: #0c0e12;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.usuario-reportes-form {
  margin-top: 10px;
}

.usuario-reportes-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 6px 0 10px;
}

.usuario-reporte-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}

.auditoria-filtros {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.auditoria-filtros label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted);
  gap: 4px;
}

.auditoria-filtros input,
.auditoria-filtros select {
  background: #0c0e12;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
}

.auditoria-table {
  width: 100%;
  font-size: 13px;
}

.protocolo-truncado {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  margin: 0 0 8px;
}