/* ============================================================================
   CEC UI · Capa 5 — Unificación de íconos, tarjetas con ícono y enlaces
   Se carga al final para fijar UNA forma por tipo de elemento:
   · ícono = círculo outline (2.75 rem; 3.5 rem en tarjetas)
   · tarjeta con ícono = ícono arriba, todo centrado, línea de acento
   · enlace clickeable = nunca texto plano
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Íconos: misma forma en todo el sitio, glifo centrado
   ------------------------------------------------------------------------ */
.ui-icon,
.cec-feature-icon,
.cec-info-callout-icon,
.ui-points__mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
}
/* Los íconos heredados toman el mismo aspecto outline que .ui-icon (base.css) */
.cec-feature-icon,
.cec-info-callout-icon,
.ui-points__mark {
  border: 1.5px solid var(--cec-line);
  background: #fff;
  color: var(--cec-navy);
}
.ui-icon i,
.cec-feature-icon i,
.cec-info-callout-icon i,
.ui-points__mark i {
  display: block;
  width: 1.25em;
  line-height: 1;
  text-align: center;
}
.ui-checklist .ui-icon { width: 2.75rem; height: 2.75rem; font-size: 1.05rem; }

/* Tamaño grande: ícono que encabeza una tarjeta */
.ui-icon--lg,
.cec-feature-icon,
.ui-points__mark,
.ui-card__body > .ui-icon:first-child,
.ui-icon-card__head .ui-icon {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.35rem;
}
.cec-info-callout-icon { width: 2.25rem; height: 2.25rem; font-size: 0.9rem; }

/* Variantes sobre fondos oscuros */
.ui-icon--glass,
.cec-cta-page .cec-info-callout-icon {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--cec-accent);
}

/* ---------------------------------------------------------------------------
   Tarjeta con ícono: ícono arriba, contenido centrado, línea de acento
   ------------------------------------------------------------------------ */
.ui-card__body:has(> .ui-icon:first-child),
.ui-icon-card .ui-card__body {
  align-items: center;
  text-align: center;
}
.ui-card__body:has(> .ui-icon:first-child) .ui-card__title::after,
.ui-icon-card .ui-card__title::after {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  margin: 0.55rem auto 0;
  border-radius: 3px;
  background: var(--cec-accent);
}
.ui-card__body:has(> .ui-icon:first-child) > .ui-badge { align-self: center; }
.ui-card__body:has(> .ui-icon:first-child) .ui-card__foot,
.ui-icon-card__foot { width: 100%; text-align: center; }
.ui-icon-card__head { flex-direction: column; text-align: center; }
.ui-icon-card__facts { justify-items: center; }
.ui-icon-card__facts li { justify-content: center; text-align: left; }
.ui-card:hover .ui-icon,
.ui-card:focus-within .ui-icon { background: var(--cec-navy); border-color: var(--cec-navy); color: #fff; }
/* Las tarjetas informativas no son clickeables: su ícono no reacciona */
.ui-channel:hover .ui-icon { background: #fff; border-color: var(--cec-line); color: var(--cec-navy); }

/* Tarjetas heredadas "cec-feature-card" con el mismo patrón */
.cec-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--cec-line);
  border-radius: var(--ui-radius-md);
  background: #fff;
  box-shadow: var(--ui-shadow);
  text-align: center;
}
.cec-feature-icon { margin-bottom: 1rem; }
.cec-feature-card:hover .cec-feature-icon { transform: none; background: var(--cec-navy); border-color: var(--cec-navy); color: #fff; }
.cec-feature-title::after {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  margin: 0.55rem auto 0.75rem;
  border-radius: 3px;
  background: var(--cec-accent);
}

/* ---------------------------------------------------------------------------
   Listas de puntos: cada punto es una tarjeta con su propio ícono
   ------------------------------------------------------------------------ */
.ui-points { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.ui-points li {
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--cec-line);
  border-radius: var(--ui-radius-md);
  background: #fff;
  box-shadow: var(--ui-shadow);
}
@media (min-width: 768px) {
  .ui-points--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Enlaces de contacto: botón con viñeta de ícono, dato y flecha
   ------------------------------------------------------------------------ */
.ui-contact-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.85rem 0.5rem 0.6rem;
  border: 1.5px solid var(--cec-line);
  border-radius: var(--ui-radius-pill);
  background: #fff;
  color: var(--cec-navy);
  text-decoration: none;
  transition: background var(--cec-dur-fast), border-color var(--cec-dur-fast), box-shadow var(--cec-dur-fast);
}
.ui-contact-link__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--cec-surface-tint);
  color: var(--cec-navy);
  font-size: 0.95rem;
  transition: background var(--cec-dur-fast), color var(--cec-dur-fast);
}
.ui-contact-link__icon i { display: block; width: 1.25em; line-height: 1; text-align: center; }
.ui-contact-link__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.ui-contact-link__text strong { font-size: 0.92rem; font-weight: 700; }
.ui-contact-link__text small { color: var(--cec-text-soft); font-size: 0.78rem; }
.ui-contact-link__go { flex: none; color: var(--cec-accent-strong); font-size: 0.8rem; transition: transform var(--cec-dur-fast) var(--cec-ease-out); }
.ui-contact-link:hover,
.ui-contact-link:focus-visible {
  border-color: var(--cec-navy);
  background: var(--cec-surface-tint);
  box-shadow: var(--ui-shadow);
  color: var(--cec-navy);
}
.ui-contact-link:hover .ui-contact-link__icon,
.ui-contact-link:focus-visible .ui-contact-link__icon { background: var(--cec-navy); color: #fff; }
.ui-contact-link:hover .ui-contact-link__go,
.ui-contact-link:focus-visible .ui-contact-link__go { transform: translateX(3px); }

.ui-channel__list { gap: 0.6rem; }
.ui-channel__list li { display: block; }
.ui-channel__body > .ui-card__foot:not(.ui-channel__list) { padding-top: 0.25rem; border-top: 0; }

/* Datos de contacto del footer: subrayado de acento permanente para que se lean como enlace */
.ui-footer-contact a { text-decoration: underline; text-decoration-color: var(--cec-accent); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ui-contact-link,
  .ui-contact-link__icon,
  .ui-contact-link__go { transition: none; }
}