/* components/mesa/mesa.css
   Mesa de trabajo. Casi toda la pantalla la pone el datagrid — aquí
   solo vive lo que es de la mesa: los estados de carga, el indicador
   de guardado y los menús flotantes. */

.mesa-cargando,
.mesa-vacia {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.5rem;
  height: 100%;
  color: var(--text-muted, var(--text));
  font-size: 0.875rem;
  opacity: 0.75;
  text-align: center;
}

/* El estado del guardado vive en el subtítulo del datagrid: es el
   renglón que el ojo ya usa para saber "de qué es esta tabla", y así el
   aviso no compite por un lugar propio en la barra. En error se tiñe,
   porque "sin guardar" no puede leerse igual que "guardado". */
.mesa-estado-error {
  color: var(--danger, #f85149);
  font-weight: 600;
}

/* ── Menús flotantes (paleta de colores, menú de columna) ──────────
   Anclados al body, como los popovers del datagrid: dentro del
   viewport de la tabla el overflow los recortaría. */
.mesa-menu {
  position: fixed;
  z-index: 60;
  min-width: 11rem;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.mesa-menu-item {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.5rem;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}
.mesa-menu-item:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.mesa-menu-danger { color: var(--danger, #f85149); }
.mesa-menu-danger:hover { background: color-mix(in srgb, var(--danger, #f85149) 12%, var(--surface)); }

/* La muestra de color lee las MISMAS variables --dg-mark-N que pintan el
   renglón (definidas en datagrid.css). No se copian los hexadecimales:
   así el menú nunca queda mintiendo sobre el color que va a aplicar.
   Aquí la tinta va al 55% y no al 14% del renglón — una muestra de 14 px
   con la opacidad de una fila entera se vería casi blanca. */
.mesa-swatch {
  width: 0.875rem; height: 0.875rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.mesa-swatch.dg-mark-1 { background: color-mix(in srgb, var(--dg-mark-1) 55%, var(--surface)); }
.mesa-swatch.dg-mark-2 { background: color-mix(in srgb, var(--dg-mark-2) 55%, var(--surface)); }
.mesa-swatch.dg-mark-3 { background: color-mix(in srgb, var(--dg-mark-3) 55%, var(--surface)); }
.mesa-swatch.dg-mark-4 { background: color-mix(in srgb, var(--dg-mark-4) 55%, var(--surface)); }
.mesa-swatch.dg-mark-5 { background: color-mix(in srgb, var(--dg-mark-5) 55%, var(--surface)); }
.mesa-swatch.dg-mark-6 { background: color-mix(in srgb, var(--dg-mark-6) 55%, var(--surface)); }
.mesa-swatch.dg-mark-7 { background: color-mix(in srgb, var(--dg-mark-7) 55%, var(--surface)); }
.mesa-swatch.dg-mark-8 { background: color-mix(in srgb, var(--dg-mark-8) 55%, var(--surface)); }