/* Recepta · Contactos: lista con etiquetas de colores, ficha con línea de tiempo, recordatorios */
.avatar-contacto { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.82rem; flex: none; }
.avatar-contacto.grande { width: 60px; height: 60px; font-size: 1.3rem; }
.cabecera-contacto { display: flex; gap: 14px; align-items: center; }
.cabecera-contacto h1 { margin: 0; }
.cabecera-contacto p { margin: 4px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tipo-contacto { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; display: inline-block; margin: 0 4px 2px 0; }
.tipo-contacto.cliente { background: var(--cobalto-suave); color: var(--cobalto); }
.tipo-contacto.proveedor { background: #f1ecff; color: #6a3dff; }   /* violeta: el amarillo queda para favoritos */
:root[data-tema='oscuro'] .tipo-contacto.proveedor { background: rgba(157, 130, 255, 0.15); color: #b3a0ff; }

/* Etiquetas: el color sale de --color */
.chip-etiqueta { --color: #2b4bff; display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  color: var(--color); background: color-mix(in srgb, var(--color) 13%, transparent); border: 1px solid color-mix(in srgb, var(--color) 30%, transparent); }
.chip-etiqueta button { border: 0; background: none; padding: 0 0 0 2px; color: inherit; font-size: 0.7rem; line-height: 1; cursor: pointer; }
.chip-etiqueta.filtro { cursor: pointer; }
.chip-etiqueta.filtro small { opacity: 0.7; font-weight: 700; }
.chip-etiqueta.filtro:hover { background: color-mix(in srgb, var(--color) 22%, transparent); }
.chip-etiqueta.filtro.elegida { background: var(--color); color: #fff; border-color: var(--color); }
.lista-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.filtro-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--perla); }
.editor-etiquetas { border: 1px solid var(--perla); border-radius: 12px; padding: 8px; display: grid; gap: 6px; background: var(--hoja); }
.editor-etiquetas input { border: 0; box-shadow: none !important; padding: 4px; }
.lista-etiquetas { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.lista-etiquetas li { display: grid; grid-template-columns: minmax(110px, auto) auto 1fr auto auto; gap: 10px; align-items: center; }
.lista-etiquetas .colores { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.lista-etiquetas .color { width: 18px; height: 18px; border-radius: 50%; padding: 0; border: 2px solid transparent; min-height: 0; }
.lista-etiquetas .color.elegido { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--hoja) inset; }
.fila-nueva-etiqueta { display: flex; gap: 8px; }
.fila-nueva-etiqueta input { flex: 1; }
.opciones-tipo { display: flex; gap: 18px; }
.aviso-dups { margin-bottom: 12px; }
.recordatorios { margin-bottom: 16px; }
.pareja-dup { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--perla); border-radius: 12px; }
.pareja-dup + .pareja-dup { margin-top: 8px; }
.pareja-dup span.tenue { display: block; }

/* Ficha */
.ficha-contacto { grid-template-columns: 1fr 1.4fr; }
.datos-contacto { margin: 0; display: grid; gap: 10px; }
.datos-contacto div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.datos-contacto dt { color: var(--pizarra); font-weight: 700; font-size: 0.85rem; }
.datos-contacto dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.nota-fija { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--ambar-suave); white-space: pre-wrap; }
.nueva-actividad { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--perla); border-radius: 14px; background: var(--niebla); margin-bottom: 14px; }
.nueva-actividad textarea { resize: vertical; }
.fila-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila-act input[type=date] { width: auto; }
.fila-act button { margin-left: auto; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--perla-suave); }
.timeline li:last-child { border: 0; }
.tl-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--perla-suave); display: grid; place-items: center; }
.tl-cabeza { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.timeline p { margin: 2px 0 0; color: var(--pizarra); overflow-wrap: anywhere; }
@media (max-width: 1000px) { .ficha-contacto { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .pareja-dup { grid-template-columns: 1fr; } .datos-contacto div { grid-template-columns: 1fr; gap: 2px; }
  .lista-etiquetas li { grid-template-columns: 1fr auto; } .lista-etiquetas .colores { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Conectá tus contactos */
.conectar { margin-bottom: 16px; }
.conectar-cabeza { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.conectar-cabeza h2 { margin: 0; }
.conectar-cabeza p { margin: 4px 0 0; }
.fuentes-conectar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.fuente-conectar { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 6px; padding: 14px; border: 1px solid var(--perla); border-radius: 14px; background: var(--hoja); }
.fuente-conectar p { margin: 0; color: var(--pizarra); font-size: 0.85rem; }
.fuente-conectar button { justify-self: start; }
/* Logos reales de cada servicio, sobre una baldosa clara (WhatsApp va en blanco sobre su verde) */
.logo-fuente { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--hoja); border: 1px solid var(--perla); box-shadow: 0 1px 2px rgba(20, 26, 51, 0.05); }
.logo-fuente svg { width: 24px; height: 24px; }
.logo-fuente.wa { background: #25d366; border-color: #25d366; color: #fff; }
.logo-fuente.wa svg { width: 25px; height: 25px; }
.logo-fuente.gm svg { width: 28px; height: 23px; }
.logo-fuente.dr svg { width: 28px; height: 25px; }
.logo-fuente.xl svg { width: 31px; height: 31px; }
.logo-fuente.rc { background: var(--cobalto-suave); border-color: transparent; }
.logo-fuente.rc svg { width: 28px; height: 28px; }
/* Botones de WhatsApp, llamar y mail con su logo */
a.wa svg, .con-logo svg { width: 16px; height: 16px; flex: none; }
a.boton.wa, .con-logo { gap: 7px; }
a.icono-boton.wa svg { width: 17px; height: 17px; }
/* Canal en la línea de tiempo */
.logo-canal { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.logo-canal svg { width: 17px; height: 17px; }
.logo-canal.wa { background: #25d366; color: #fff; }
.logo-canal.gm { background: var(--hoja); border: 1px solid var(--perla); }
.logo-canal.gm svg { width: 17px; height: 14px; }
.estado-fuente { font-size: 0.75rem; font-weight: 700; color: var(--pizarra); }
.estado-fuente.ok { color: var(--menta-texto); }
.estado-fuente.nuevo { color: var(--cobalto); }
.pasos-conectar { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.pasos-conectar a { font-weight: 700; }