/* ==========================================================================
   Lucidez · Dock flotante (FASE 1)
   Categorias principales + submenu "mas". El home nunca es una parrilla:
   las categorias viven aqui.
   ========================================================================== */

.dock-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: var(--sp-2) 0;
  color: var(--text-soft);
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.dock-item:active { transform: scale(0.94); }
.dock-item svg { width: 22px; height: 22px; }
.dock-item__label {
  font-size: 11px;
  font-weight: var(--fw-label);
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-item.is-active { color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .dock-item:hover { color: var(--text); }
  .dock-item.is-active:hover { color: var(--accent); }
}

/* Hoja del submenu "mas": una lista compacta que crece desde su boton. */
.pop--dock .pop__item { padding: var(--sp-3); }
.pop--dock .pop__item.is-active { color: var(--accent); background: var(--accent-tint); }