/* WHATSAPP Y TELEGRAM · assets/css/pe-contacto.css · NUEVO 2026-10-07 (LA COLA 444, C-185) · los botones de contacto (el admin y la ficha del cliente) */
.pe-contacto { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; vertical-align: middle; }
.pe-contacto__boton {
    display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: inherit;
    font-size: 0.82rem; text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.pe-contacto__boton--whatsapp { border-color: rgba(37, 211, 102, 0.45); }
.pe-contacto__boton--telegram { border-color: rgba(42, 171, 238, 0.45); }
.pe-contacto__boton:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }
.pe-contacto__copiar { opacity: 0.7; font-size: 0.75rem; }
@media (max-width: 600px) { .pe-contacto__boton { min-height: 44px; } }

/* LA COLA 444-C · los contactos opcionales del alta (cliente y modelo): plegables; columnas por el ancho real, una en el teléfono; 16 px (iOS no acerca) */
.pe-contacto-alta > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.pe-contacto-alta__rejilla { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-top: 8px; }
.pe-contacto-alta__input { width: 100%; box-sizing: border-box; font-size: 16px; }

/* 2026-10-28 (barrido móvil en inglés: en el catálogo de modelos del admin el botón con el número se salía 7-8 px de la tarjeta en el
   iPhone): el grupo y cada botón no pasan del ancho de donde están; un número largo baja de línea en lugar de salirse */
.pe-contacto { max-width: 100%; }
.pe-contacto__boton { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }