/* [HUECO] Las cinco maneras de no tener nada que mostrar.
 *
 * Hasta aquí, `.vacio` decía cinco cosas distintas con la misma tinta gris:
 *
 *     «Sin empresas.»                      → llegó la respuesta y no hay filas
 *     «Cargando flota…»                    → todavía no llegó
 *     «Elige un cliente.»                  → falta que la persona decida
 *     «No se pudo cargar la flota.»        → NO SE PUDO TRAER
 *     «Solo N3 puede diagnosticar.»        → funcionó, pero no le corresponde ver esto
 *
 * Las cinco se veían idénticas: `font-size:12.5px; color:var(--gris)`. Quien mira una pantalla
 * que dice «Sin empresas» decide como si hubiera mirado. Si lo que pasó fue que la consulta
 * falló, tomó esa decisión sobre una pantalla que le dijo un hecho falso — y no tenía cómo
 * saberlo, porque el fallo estaba escrito con la letra de un hecho.
 *
 * ESTO NO RENOMBRA `.vacio`. La clase sigue existiendo y sola sigue significando lo que
 * significaba: un vacío de verdad. Lo que se agrega es un segundo token que dice CUÁL de las
 * cinco es. Un hueco sin marcar se ve como siempre — el cambio no rompe ninguna pantalla que
 * todavía no se haya revisado, y las revisadas se distinguen de inmediato.
 *
 * Una hoja sola, enlazada por las cuatro puertas, porque `.vacio` ya estaba copiado cuatro
 * veces con paddings distintos: eso es exactamente cómo empieza la deriva.
 *
 * SIN RESERVAS EN LOS `var()`, a propósito, y es la regla que ya escribió `paleta_declarada`:
 * una reserva hace que borrar una variable no rompa nada visible, y el producto se queda
 * pintando con el color de otro sin que ninguna prueba lo note. Sin reserva, un token que
 * falte deja la declaración inválida y el borde desaparece — se ve en la primera pantalla.
 * El guard comprueba que las cuatro puertas declaren los cinco tokens.
 *
 * Marca buscable: estados_huecos
 */

/* ── EL FALLO ───────────────────────────────────────────────────────────────────────────
   El único de los cinco donde LO QUE SE VE NO DESCRIBE AL NEGOCIO. Por eso es el único con
   borde, con color propio y con peso: tiene que costar confundirlo con una lista vacía
   mirando de reojo, que es como se mira un panel. */
.vacio.es-fallo {
  color: var(--error);
  border-left: 3px solid var(--error);
  /* El fondo sale del mismo token, no de un rojo aparte: un segundo rojo se despega del
     primero el día que la marca cambie. Donde `color-mix` no exista, la regla se descarta y
     queda el borde — que es lo que hace el trabajo. */
  background: color-mix(in srgb, var(--error) 5%, transparent);
  padding: 10px 12px;
  border-radius: 0 4px 4px 0;
  font-weight: 600;
}

/* ── TODAVIA NO LLEGO ───────────────────────────────────────────────────────────────────
   Punteado: el borde dice «esto no terminó» sin gritar. Nada que decidir todavía. */
.vacio.es-cargando {
  border-left: 3px dashed var(--linea);
  padding: 10px 12px;
  opacity: .85;
}

/* Un pulso lentísimo, sólo para que se note que la pantalla no se colgó. Se apaga entero
   cuando el sistema operativo dice que el movimiento molesta: una animación que nadie pidió
   es una animación que alguien tiene que poder apagar. */
@media (prefers-reduced-motion: no-preference) {
  .vacio.es-cargando { animation: hueco-pulso 1.8s ease-in-out infinite; }
  @keyframes hueco-pulso { 0%, 100% { opacity: .85 } 50% { opacity: .5 } }
}

/* ── FALTA QUE LA PERSONA DECIDA ────────────────────────────────────────────────────────
   No es un vacío: es una pregunta dirigida a quien mira. Va en el color de la marca porque
   es lo único de los cinco donde hay algo que hacer, y está a un clic. */
.vacio.es-espera {
  color: var(--tinta);
  border-left: 3px solid var(--granate);
  padding: 10px 12px;
  font-weight: 500;
}

/*  EL FONDO ES DEL FALLO Y DE NADIE MAS, y lo dice un test.
 *
 *  El primer intento le habia puesto fondo tambien a la espera. En el banco de pruebas los dos
 *  quedaron casi identicos: el granate de la marca (#8C1A2D) y el rojo del error (#a3231f) son
 *  vecinos, y con un fondo claro debajo la barra izquierda deja de separarlos. Es decir: la
 *  distincion MAS importante de las cinco -una pregunta contra un fallo- habia quedado siendo
 *  la mas debil.
 *
 *  El test de mas arriba comparaba los juegos de declaraciones y pasaba, porque las
 *  declaraciones SI eran distintas. Medía la forma, no la conducta. Se vio mirando. */

/* ── NO LE CORRESPONDE VER ESTO ─────────────────────────────────────────────────────────
   La pantalla funcionó. El dato existe. Es la persona la que no tiene el nivel. Pintar eso
   como un vacío hace que alguien salga a preguntar por qué «no hay datos» cuando lo que hay
   es un permiso que le falta — y esa pregunta llega a soporte, no a quien puede darle el
   permiso. */
.vacio.es-denegado {
  color: var(--gris);
  border-left: 3px solid var(--gris);
  padding: 10px 12px;
  font-style: italic;
}

/* El texto de los cinco respira igual: si el fallo tuviera otra métrica, saltaría por el
   tamaño y no por lo que dice. */
.vacio.es-fallo,
.vacio.es-cargando,
.vacio.es-espera,
.vacio.es-denegado { line-height: 1.5; margin: 4px 0; }

/* ── CUANDO LA ESPERA SE HACE LARGA ─────────────────────────────────────────────────────
   Lo agrega `espera-larga.js` dentro del propio hueco de carga. Es un HECHO —cuántos segundos
   van—, no una barra de progreso: una barra que no la alimenta un progreso real es una
   animación que miente sobre cuánto falta.

   En una línea aparte y más chico: acompaña al «Cargando…», no lo reemplaza. Quien mira tiene
   que seguir sabiendo QUE se está cargando, no sólo cuánto hace. */
.espera-larga {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  max-width: 52ch;
  line-height: 1.5;
}