/**
 * icons.css — Bloque 6/A
 *
 * Estilos base para iconos SVG (Lucide) con personalidad Vehyly.
 * Stroke uniforme 2px, bordes redondeados, color brand al activarse.
 */

:root {
  --ve-primary: #2979FF;
  --ve-icon-muted: #6b7280;
  --ve-icon-strong: #111827;
  --ve-danger: #dc2626;
}

.ve-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: var(--ve-icon-muted);
  flex-shrink: 0;
  transition: color 150ms ease;
}

.ve-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ve-icon-active {
  color: var(--ve-primary);
}

.ve-icon-active[data-fill="true"] svg,
.ve-icon[data-fill="true"] svg {
  fill: currentColor;
}

/* ---- Tamaños semánticos ---- */
.ve-tabbar-icon { width: 26px; height: 26px; }
.ve-action-icon { width: 20px; height: 20px; }
.ve-inline-icon { width: 16px; height: 16px; }
.ve-empty-icon  { width: 64px; height: 64px; color: #9ca3af; }

/* ---- Bottom nav (tabbar) ----
   Override del `font-size: 24px` que existía para emojis en main.css.
   Botón base = gris, .active = brand. Contiene un .ve-icon directo. */
.bottom-nav button {
  font-size: 0; /* deshabilita el scaling de emoji legacy */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ve-icon-muted);
  transition: color 150ms ease;
}

.bottom-nav button .ve-icon {
  color: inherit; /* el color sigue al botón */
}

.bottom-nav button.active {
  color: var(--ve-primary);
}

/* En activo hacemos que el SVG se rellene (currentColor) — efecto
   outline → fill que iOS usa en muchas apps. */
.bottom-nav button.active .ve-icon svg {
  fill: currentColor;
  stroke: currentColor;
}

.bottom-nav button .ve-tab-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bottom-nav button.active .ve-tab-label {
  font-weight: 700;
}

/* ---- Botones con icono inline (Reservar, Compartir, etc.) ---- */
.ve-btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ve-btn-with-icon .ve-icon {
  color: inherit;
}

/* ---- Empty state grande (tienda vacía, sin productos, etc.) ---- */
.ve-empty-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* ---- Helper utility para iconos en color rojo (acciones destructivas) ---- */
.ve-icon-danger {
  color: var(--ve-danger);
}