/* VGLIA — tarjetas.
   Una sola anatomía para todo el producto: superficie, borde fino, cabecera
   opcional y cuerpo. Las variantes cambian el acento, nunca la estructura. */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vglia-surface-850);
  border: var(--border-width) solid var(--vglia-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Cristal sólo donde hay algo detrás que merezca verse. No es el estado
   por defecto: si todo es cristal, nada destaca. */
.card--glass {
  background: var(--vglia-glass-bg);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border-color: var(--vglia-border-default);
}

.card--flush { background: transparent; border-color: transparent; }

.card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--card-padding);
  padding-bottom: var(--space-3);
}

.card__heading { min-width: 0; flex: 1 1 auto; }

.card__subtitle {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--vglia-text-muted);
}

.card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;   /* deja que un control ancho se encoja en vez de desbordar */
}

.card__body { padding: 0 var(--card-padding) var(--card-padding); }
.card__body--flush { padding: 0; }

.card__footer {
  margin-top: auto;
  padding: var(--space-3) var(--card-padding);
  border-top: var(--border-width) solid var(--vglia-border-subtle);
}

/* Tarjeta accionable: la elevación aparece al apuntar, no antes. */
.card--interactive {
  cursor: pointer;
  transition:
    border-color var(--transition-normal) var(--ease-out),
    transform var(--transition-normal) var(--ease-out),
    box-shadow var(--transition-normal) var(--ease-out);
}

.card--interactive:hover {
  border-color: var(--vglia-border-active);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card--interactive:focus-visible { box-shadow: var(--focus-ring); }

.card[aria-disabled="true"],
.card--muted { opacity: 0.55; pointer-events: none; }

/* Filo de acento en el borde superior. Identifica el dominio de la tarjeta
   (azul plataforma, cian datos, morado IA, ámbar automatización). */
.card--accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--vglia-blue-400)), transparent);
  opacity: 0.7;
}

.accent-blue   { --accent: var(--vglia-blue-400);   --accent-rgb: var(--vglia-blue-rgb);   --accent-glow: var(--glow-blue); }
.accent-cyan   { --accent: var(--vglia-cyan-400);   --accent-rgb: var(--vglia-cyan-rgb);   --accent-glow: var(--glow-cyan); }
.accent-purple { --accent: var(--vglia-purple-400); --accent-rgb: var(--vglia-purple-rgb); --accent-glow: var(--glow-purple); }
.accent-teal   { --accent: var(--vglia-teal-400);   --accent-rgb: var(--vglia-teal-rgb);   --accent-glow: var(--glow-cyan); }
.accent-amber  { --accent: var(--vglia-amber-400);  --accent-rgb: var(--vglia-amber-rgb);  --accent-glow: var(--glow-amber); }

/* Cuadro de icono con el acento de la tarjeta. */
.card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  color: var(--accent, var(--vglia-blue-400));
  background: rgb(var(--accent-rgb, var(--vglia-blue-rgb)) / 0.12);
  border: var(--border-width) solid rgb(var(--accent-rgb, var(--vglia-blue-rgb)) / 0.22);
}

.card-icon--sm { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.card-icon--lg { width: 48px; height: 48px; }

/* Estado vacío dentro de una tarjeta. */
.empty-state {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--vglia-text-muted);
}

.empty-state__icon { color: var(--vglia-text-disabled); }