/* ── BITÁCORA ──
   [v2026.10.07-1] hvy-redes.css (NUEVO)
   2026-10-07 | Las redes sociales (hvy-redes.js [v2026.10.07-1]; vistas previas aprobadas por
     Alberto el 07-10):
     · .hvr-*: el bloque «Redes sociales» del panel (ficha del profesional y Editar empresa):
       una fila por red con su ícono, el campo y lo que se reconoció.
     · .ppr-*: la página pública. Íconos redondos (claros sobre la portada de la Landing, con
       el color de cada red en las demás, chicos en una tarjeta) y pastillas con la cuenta
       (Contacto y el perfil de cada profesional). Funciona en las cuatro plantillas.
*/

/* Los colores de cada red */
.ppr-instagram { --ppr: #E1306C; }
.ppr-facebook  { --ppr: #1877F2; }
.ppr-linkedin  { --ppr: #0A66C2; }
.ppr-youtube   { --ppr: #FF0000; }
.ppr-tiktok    { --ppr: #111111; }
.ppr-web       { --ppr: #6052cb; }

/* ── El panel ── */
.hvr-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 900px) { .hvr-lista { grid-template-columns: 1fr; } }
.hvr-fila { display: flex; gap: 10px; align-items: flex-start; }
.hvr-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  margin-top: 19px; font-size: 15px; color: var(--ppr, #6052cb); background: color-mix(in srgb, var(--ppr, #6052cb) 10%, #fff); }
.hvr-campo { flex: 1; min-width: 0; }
.hvr-campo label { display: block; }
.hvr-campo input { width: 100%; }
.hvr-est { font-size: 11px; margin-top: 4px; min-height: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.hvr-est.ok { color: #1D8A63; }
.hvr-est.mal { color: #B3261E; }
.hvr-est.vacia { color: #9aa0bd; }
.hvr-ayuda { font-size: 12px; color: #7D84C1; margin: -2px 0 12px; line-height: 1.5; }

/* ── La página pública ── */
.ppr-iconos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppr-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  text-decoration: none; color: #fff; background: var(--ppr, #6052cb); transition: transform .15s, box-shadow .15s, background .15s; }
.ppr-ico:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(30, 40, 90, .22); }
.ppr-ico.ppr-instagram,
.ppr-chip.ppr-instagram i { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
/* Sobre la portada (Landing): translúcidos y blancos; al pasar, del color de la red. */
.ppr-claro .ppr-ico { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4); color: #fff;
  backdrop-filter: blur(6px); }
.ppr-claro .ppr-ico:hover { background: #fff; color: var(--ppr); }
.ppr-claro .ppr-ico.ppr-instagram:hover { color: #E1306C; }
/* En una tarjeta */
.ppr-chico { justify-content: center; gap: 6px; margin: .55rem 0 .3rem; }
.ppr-chico .ppr-ico { width: 30px; height: 30px; font-size: 12.5px; }
/* Pastillas con la cuenta */
.ppr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ppr-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 12px 4px 4px;
  border-radius: 999px; background: #fff; border: 1px solid #e4e6f2; color: #1f2a5c; text-decoration: none;
  font: 600 .8rem 'DM Sans', sans-serif; transition: border-color .15s, box-shadow .15s; }
.ppr-chip:hover { border-color: var(--ppr); box-shadow: 0 2px 10px rgba(30, 40, 90, .10); }
.ppr-chip i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  color: #fff; background: var(--ppr); font-size: 12px; }
.ppr-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* En Contacto, debajo de los datos */
.ppr-ct { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid rgba(120, 130, 170, .18); }
.ppr-ct-t { font: 700 .62rem 'Poppins', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6B7194;
  margin-bottom: .45rem; }
/* En el perfil de cada profesional (la ficha) */
.ppg-hoja .ppr-chip { font-size: .74rem; padding: 3px 10px 3px 3px; }
.ppg-hoja .ppr-chip i { width: 22px; height: 22px; font-size: 10.5px; }

/* Dónde va en cada plantilla */
.ppt-hero-acc .ppr-iconos { margin-left: 6px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .28); }
.ppt-cab-panel .ppr-iconos { margin-top: .7rem; }
.ppt-cab-app .ppr-iconos { justify-content: center; margin-top: .7rem; }
#pp-redes-cab .ppr-iconos { margin-top: .6rem; }
.ppt-equipo .ppr-chico { justify-content: flex-start; }
@media (max-width: 768px) {
  #pp-redes-cab .ppr-iconos { justify-content: center; }
}
@media (max-width: 600px) {
  .ppt-hero-acc .ppr-iconos { margin-left: 0; padding-left: 0; border-left: none; width: 100%; }
}