/* ==========================================================================
   COMPONENTE: View state overlay
   Overlay de loading/vacío/error para contenedores que NO son un <tbody>
   (gráficas de Chart.js, stat cards, listas custom) — mostrado/ocultado por
   shared/ViewState.js. Mismo espíritu que el estado de .table-empty/
   .table-error de TableRenderer, pero superpuesto en vez de reemplazar el
   contenido: el contenedor real (canvas, stat, lista) sigue montado debajo.
   ========================================================================== */

.view-state-container--activo {
  position: relative;
  min-height: 3rem;
}

.view-state-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-md);
  background-color: var(--color-surface);
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-sm);
}

.view-state-overlay--loading {
  color: var(--color-text-muted);
}

.view-state-overlay--empty {
  color: var(--color-text-muted);
}

.view-state-overlay--error {
  color: var(--color-error);
}

/* Variante EN LÍNEA — un mensaje de estado que ocupa el lugar del contenido
   en vez de superponerse: "No hay lotes asociados…", "Sin actividad
   reciente.", "Cargando detalle…". Antes eran 8 clases *-vacio/-cargando/
   -error repartidas por los módulos, con 3 tamaños y colores distintos.
   Mismo aspecto que .view-state-overlay y que .table-empty/.table-error
   (tables.css), así un "vacío" se ve igual en todo el sistema.
   Uso: <p class="view-state-text">Sin registros en este periodo.</p>
        <p class="view-state-text view-state-text--error">No se pudo cargar…</p>
   Si el contexto necesita layout propio (ej. un <li> sin viñeta), se suma
   una clase de layout del módulo, sin repetir color ni tamaño. */
.view-state-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.view-state-text--error {
  color: var(--color-error);
}