/**
 * Componentes — tarjetas, chips y aliases legacy (PR-3).
 */

.card {
  background: var(--panel, var(--tm-role-surface));
  border: 1px solid var(--line, var(--tm-role-border-subtle));
  border-radius: var(--tm-radius-lg);
  padding: var(--tm-space-5);
  box-shadow: var(--shadow2, var(--tm-elev-2));
  color: var(--text, var(--tm-role-text-primary));
}

.card--elevated {
  box-shadow: var(--shadow, var(--tm-elev-3));
}

.card--interactive {
  transition:
    transform var(--tm-dur-base) var(--tm-ease-standard),
    border-color var(--tm-dur-base) var(--tm-ease-standard),
    box-shadow var(--tm-dur-base) var(--tm-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .card--interactive:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tm-role-accent) 35%, var(--tm-role-border-subtle));
    box-shadow: var(--shadow, var(--tm-elev-3));
  }
}

.card--centered {
  text-align: center;
}

/* Alias index — fila con viñeta dorada */
.benefit {
  display: flex;
  gap: var(--tm-space-4);
  align-items: flex-start;
  background: var(--panel, var(--tm-role-surface));
  border: 1px solid var(--line, var(--tm-role-border-subtle));
  border-radius: var(--tm-radius-lg);
  padding: var(--tm-space-5);
  box-shadow: var(--shadow2, var(--tm-elev-2));
}

.benefit h4 {
  margin: 0 0 var(--tm-space-1);
  font-size: var(--tm-fs-h4);
  font-weight: 800;
  color: var(--text, var(--tm-role-text-primary));
}

.benefit p {
  margin: 0;
  color: var(--muted, var(--tm-role-text-muted));
  font-weight: var(--tm-fw-semibold);
  font-size: var(--tm-fs-small);
  line-height: var(--tm-lh-snug);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--accent, var(--tm-role-accent)),
    var(--accent2, var(--tm-role-accent-cool))
  );
  margin-top: 5px;
  flex-shrink: 0;
}

/* Tarjetas de programas (programas/index.html) */
.progCard {
  background: color-mix(in srgb, var(--ink, var(--tm-role-text-primary)) 3%, var(--panel, var(--tm-role-surface)));
  border: 1px solid color-mix(in srgb, var(--ink, var(--tm-role-text-primary)) 8%, transparent);
  border-radius: var(--tm-radius-lg);
  text-align: center;
  transition: all var(--tm-dur-slow) var(--tm-ease-standard);
  box-shadow: var(--shadow, var(--tm-elev-2));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .progCard:hover {
    transform: translateY(-5px);
    background: color-mix(in srgb, var(--ink, var(--tm-role-text-primary)) 6%, var(--panel, var(--tm-role-surface)));
    border-color: var(--accent, var(--tm-role-accent));
    box-shadow: var(--shadow-hover, var(--tm-elev-3)), var(--glow-gold, var(--tm-comp-btn-glow, 0 8px 25px var(--tm-shadow-accent-glow)));
  }
}

.card-dipav {
  border-color: color-mix(in srgb, var(--tm-role-accent) 32%, transparent);
  background: var(--panel, var(--tm-role-surface));
}

@media (hover: hover) and (pointer: fine) {
  .card-dipav:hover {
    border-color: var(--tm-role-accent);
  }
}

.card-dipav .card-cover {
  border-bottom-color: color-mix(in srgb, var(--tm-role-accent) 70%, var(--ink, var(--tm-role-text-primary)));
}

/* Chips / pills reutilizables */
.chip,
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-1);
  border: 1px solid var(--line, var(--tm-role-border-subtle));
  border-radius: var(--tm-radius-pill);
  padding: var(--tm-space-1) var(--tm-space-3);
  font-size: var(--tm-fs-caption);
  font-weight: 800;
  color: var(--text, var(--tm-role-text-primary));
  background: color-mix(in srgb, var(--tm-role-text-primary) 4%, transparent);
}

.badge--accent {
  background: color-mix(in srgb, var(--tm-role-accent) 10%, transparent);
  color: var(--tm-role-accent);
  border-color: color-mix(in srgb, var(--tm-role-accent) 30%, transparent);
}

.chip .dot {
  width: 6px;
  height: 6px;
  margin-top: 0;
}