/*
 * MOLECULE: Fondo aurora (tarea 4799, Matías 29/9/2026)
 *
 * «Esto me encantó, me gustaría ese fondo para algunas partes del sistema»:
 * el fondo del bloque «Lo que en otros sistemas se cobra, acá va sin cargo»
 * de helixlab.com.ar. Los cuatro pastel del logo, uno en cada esquina, y el
 * blanco al medio. Tokens en tokens.css (--h-aurora-*).
 *
 * Dónde va: pantallas de descanso o de portada —el ingreso al sistema, una
 * pantalla vacía—. Nunca en listas de trabajo ni en el protocolo: ahí el
 * fondo tiene que callarse.
 *
 * Uso:
 *   <div class="fondo-aurora"> … <div class="fondo-aurora-tarjeta"> … </div></div>
 */
.fondo-aurora {
  background:
    radial-gradient(circle at 0% 0%,     var(--h-aurora-salmon)   0, transparent 45%),
    radial-gradient(circle at 100% 0%,   var(--h-aurora-lavanda)  0, transparent 45%),
    radial-gradient(circle at 100% 100%, var(--h-aurora-salvia)   0, transparent 50%),
    radial-gradient(circle at 0% 100%,   var(--h-aurora-amarillo) 0, transparent 50%),
    var(--h-surface);
}

/* Las tarjetas encima, blancas al 86 %: dejan pasar un poco del color. */
.fondo-aurora-tarjeta {
  background: color-mix(in srgb, var(--h-surface) 86%, transparent);
}

/* Las pantallas vacías («todavía no hay órdenes hoy») son el caso de
 * descanso más común: llevan el fondo solas, sin tocar cada pantalla. La
 * versión compacta (renglones de tablas, paneles chicos) no: ahí un recuadro
 * de color dentro de una lista sería ruido. */
.empty-state:not(.empty-state-compact) {
  background:
    radial-gradient(circle at 0% 0%,     var(--h-aurora-salmon)   0, transparent 45%),
    radial-gradient(circle at 100% 0%,   var(--h-aurora-lavanda)  0, transparent 45%),
    radial-gradient(circle at 100% 100%, var(--h-aurora-salvia)   0, transparent 50%),
    radial-gradient(circle at 0% 100%,   var(--h-aurora-amarillo) 0, transparent 50%),
    var(--h-surface);
  border: 1px solid var(--h-aurora-borde);
  border-radius: var(--h-radius-xl);
}