/*
 * Construction OS — efectos visuales tal como están en la app.
 * Requiere tokens.css.
 *
 * Importante: la INTERFAZ de la app no usa degradados. Su estética es plana:
 * fondos casi blancos, tarjetas blancas con sombra azul marino muy suave,
 * pastillas pastel para los estados y una barra lateral azul marino.
 * El único degradado de la marca es el PLATEADO del símbolo del logo.
 *
 * Las transparencias de la app (Tailwind "bg-card/90", "primary/20"…) se
 * escriben aquí con color-mix(), que es exactamente como Tailwind v4 las genera.
 */

/* ---------- Degradado ---------- */

/* Plateado del símbolo (medido del logo de la app). */
:root {
  --gradient-silver: linear-gradient(60deg, #8d8d8c 0%, #f2f2f1 55%, #a9a9a8 100%);
}
.fx-text-silver {
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Sombras ---------- */

.fx-shadow-card { box-shadow: var(--shadow-card); } /* tarjetas KPI, tarjetas de panel */
.fx-shadow-pop { box-shadow: var(--shadow-pop); }   /* menús, ventanas flotantes */
.fx-shadow { box-shadow: var(--shadow); }           /* botón principal, pestaña activa, tarjeta base */
.fx-shadow-sm { box-shadow: var(--shadow-sm); }     /* botones secundarios, campos */

/* ---------- Vidrio (transparencia + desenfoque) ---------- */

/* Barra superior: blanco al 90% con desenfoque del contenido que pasa por debajo. */
.fx-glass-topbar {
  background-color: color-mix(in oklab, var(--card) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Barra de acciones fija abajo (editor de bids): blanco al 95% + desenfoque. */
.fx-glass-bar {
  background-color: color-mix(in oklab, var(--card) 95%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Títulos pegajosos (Activity): fondo al 90% + desenfoque. */
.fx-glass-sticky {
  background-color: color-mix(in oklab, var(--background) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- Transparencias usadas en la app ---------- */

.fx-primary-hover:hover { background-color: color-mix(in oklab, var(--primary) 90%, transparent); }
.fx-progress-track { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.fx-error-surface {
  border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent);
  background-color: color-mix(in oklab, var(--destructive-soft) 40%, transparent);
}
/* Barra lateral */
.fx-sidebar-text { color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); }
.fx-sidebar-text-muted { color: color-mix(in oklab, var(--sidebar-foreground) 60%, transparent); }
.fx-sidebar-group-label { color: color-mix(in oklab, var(--sidebar-foreground) 45%, transparent); }
.fx-sidebar-hover:hover { background-color: color-mix(in oklab, var(--sidebar-accent) 60%, transparent); }
.fx-sidebar-workspace { background-color: color-mix(in oklab, var(--sidebar-accent) 40%, transparent); }

/* Borde punteado de los estados vacíos */
.fx-dashed { border: 1px dashed var(--border); }

/* ---------- Movimiento ---------- */

.fx-transition { transition-property: color, background-color, border-color, box-shadow; transition-duration: var(--duration); transition-timing-function: var(--ease); }
.fx-spin { animation: fx-spin 1s linear infinite; } /* icono de carga */
@keyframes fx-spin { to { transform: rotate(360deg); } }
/* Ventanas y menús aparecen con fundido + leve zoom (tw-animate-css) */
.fx-enter { animation: fx-enter 150ms var(--ease); }
@keyframes fx-enter { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
/* Esqueleto de carga */
.fx-pulse { animation: fx-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; background: color-mix(in oklab, var(--primary) 10%, transparent); }
@keyframes fx-pulse { 50% { opacity: 0.5; } }

/* Números: siempre con cifras del mismo ancho (columnas de dinero alineadas) */
.fx-tabular { font-variant-numeric: tabular-nums; }