:root{
  /* Ajusta a tu gusto */
  --results-max: 1160px;
  --results-right-gap: clamp(24px, 5vw, 80px);
}

/* RESULTADOS alineados a la derecha */
.results{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;

  max-width: var(--results-max);
  /* empuja el contenedor a la derecha y deja un respiro al borde derecho */
  margin: 24px var(--results-right-gap) 64px auto;
  padding-inline: 8px;

  /* la última fila también se pega a la derecha */
  justify-content: end;
}

/* Tarjeta tal como ya la tienes */
.cards{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid #eef1f4;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
}
.cards:hover {
  border-color: #7bb5ca; /* cambia el borde a celeste al pasar el mouse */
}
.card__avatar img{ width:64px;height:64px;border-radius:50%;object-fit:cover;background:#f4f6f9; }
.card__title{ margin:0 0 4px; font-weight:700; color:#0f172a; }
.card__line{ margin:0 0 6px; color:#475569; font-size:.95rem; }
.card__btn{ display:inline-block; padding:8px 12px; border-radius:10px; background:#00a7c4; color:#fff; font-weight:600; text-decoration:none; }
.no-results{ padding:16px; background:#fff4db; border:1px solid #ffe4a6; border-radius:12px; }
.no-results.error{ background:#ffe5e5; border-color:#ffb3b3; }
.skeleton-list .skeleton{ height:96px; border-radius:16px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); background-size:200% 100%; animation:pulse 1.2s infinite; margin-bottom:10px; }
@keyframes pulse{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Móvil: usa ancho completo y centra */
@media (max-width: 992px){
  .results{
    max-width: none;
    margin: 16px;
    justify-content: stretch;
  }
}



/* Base */
.alert{
  --bg:#eff6ff;        /* default = primary */
  --border:#bfdbfe;
  --fg:#1d4ed8;

  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);

  padding: 12px 16px;
  border-radius: 12px;
  font: 500 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: block;
  margin: 10px 0;
}
.alert a { color: inherit; text-decoration: underline; }

/* Variantes */
.alert-primary{
  --bg:#eff6ff;        /* azul muy claro */
  --border:#bfdbfe;
  --fg:#1d4ed8;        /* azul */
}
.alert-success{
  --bg:#ecfdf5;
  --border:#a7f3d0;
  --fg:#047857;        /* verde */
}
.alert-warning{
  --bg:#fffbeb;
  --border:#fde68a;
  --fg:#b45309;        /* ámbar */
}
.alert-danger{
  --bg:#fef2f2;
  --border:#fecaca;
  --fg:#b91c1c;        /* rojo */
}
.alert-info{
  --bg:#e0f2fe;
  --border:#7dd3fc;
  --fg:#0369a1;        /* celeste */
}
.alert-secondary{
  --bg:#f5f5f5;
  --border:#e5e7eb;
  --fg:#374151;        /* gris */
}

/* Opcional: versión compacta */
/* contenedor donde insertas la alerta (ej: <section id="alerts"></section>) */
#alerts{
  display:flex;
  justify-content:center;   /* centra horizontal */
  margin:8px 0 16px;
}

/* alerta compacta y centrada */
.alert{
  /* tamaño reducido */
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;

  /* centrado y ancho pequeño */
  width: min(92vw, 560px);  /* nunca más de 560px y con margen lateral en móviles */
  max-width: 560px;
  margin: 8px auto;

  display: block;
}

/* extra-pequeña (opcional) */
.alert--xs{
  padding: 6px 10px;
  font-size: 15px;
  border-radius: 8px;
}

/* Opcional: con icono (añade <span class="alert-icon">)</*>
.alert-icon{
  margin-right: 8px;
  width: 1.1em; height: 1.1em; display: inline-flex; align-items: center; justify-content: center;
  filter: saturate(.9);
}