/* estilos/gestion-monitoreo.css — reusa .ges-lista/.ges-item/.ges-vacio/.ges-h3 de
   gestion-personal.css; esto es la grilla de 3 columnas del Monitoreo. El dibujo de cada widget
   está en monitoreo-graficos.css. */

.ges-alertas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  /* Las tarjetas ocupan 1, 2 o 3 columnas. Sin `dense`, una de 2 que no cabe en lo que queda de la
     fila deja un hueco; con `dense` el hueco lo toma la siguiente tarjeta que sí cabe. */
  grid-auto-flow: row dense;
}
.ges-alerta-card { height: 100%; }
.ges-alerta-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ges-alerta-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
}
.ges-alerta-item:last-of-type { border-bottom: none; }
.ges-alerta-item:hover { color: var(--blue-light); }
.ges-alerta-valor {
  color: var(--text-2);
  white-space: nowrap;
}
.ges-alerta-mas {
  font-size: 12px;
  color: var(--text-3);
  margin: 6px 0 0;
}

/* Personalización "pro": arrastrar y soltar, destacar (2 columnas), densidad y el
   indicador de "Actualizado hace Xs" del auto-refresco. */
.ges-widget-wrap { position: relative; min-width: 0; grid-column: span 1; }
.ges-widget-wrap.ges-span-2 { grid-column: span 2; }
.ges-widget-wrap.ges-span-3 { grid-column: span 3; }
.ges-widget-wrap.arrastrando { opacity: .45; }

.ges-widget-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ges-widget-destacar {
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  /* No adorna la tarjeta: aparece al pasar el cursor o al enfocarlo, y se queda visible cuando la
     tarjeta ya está agrandada y en pantallas táctiles (sin hover). */
  opacity: 0;
}
.ges-widget-wrap:hover .ges-widget-destacar,
.ges-widget-wrap:focus-within .ges-widget-destacar,
.ges-widget-destacar.activo { opacity: 1; }
@media (hover: none) { .ges-widget-destacar { opacity: 1; } }
.ges-widget-destacar:hover { color: var(--text-2); }
.ges-widget-destacar.activo { color: var(--amber); }
.ges-widget-destacar svg { display: block; }
.ges-widget-destacar.activo svg { fill: currentColor; }

.ges-ultima-actualizacion {
  font-size: 12px;
  color: var(--text-3);
  align-self: center;
  margin-right: 4px;
}

/* Modo compacto: mismo grid, tarjetas más densas (menos padding, texto más chico). */
.ges-alertas-grid--compacta { gap: 8px; }
.ges-alertas-grid--compacta .card-body { padding: 12px 14px; }
.ges-alertas-grid--compacta .ges-alerta-item { padding: 4px 0; font-size: 12px; }
.ges-alertas-grid--compacta .ges-h3 { font-size: 12px; }

@media (max-width: 900px) {
  .ges-alertas-grid { grid-template-columns: 1fr; }
  .ges-widget-wrap.ges-span-2,
  .ges-widget-wrap.ges-span-3 { grid-column: span 1; }
}

/* Mini panel de indicadores (Personal, Equipos, Stock, Solicitudes, Actividad — la fila de
   números arriba de cada pantalla, no el tablero grande de Monitoreo). Reusa .kpi-card /
   .kpi-label / .kpi-value / .kpi-sub de la base, pero en flex en vez del grid fijo de 4
   columnas: con 2 o 3 tarjetas no deja columnas vacías, y en pantallas angostas cada una
   pasa a su propia fila sola, sin necesitar un @media aparte por cada pantalla. */
.mini-panel { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.mini-panel .kpi-card { flex: 1 1 160px; }