/* Vchat Core 0.66.22-alpha — Contactos / Directorio 2.0.
 * Restrict all selectors to the contacts workspace. Final enqueue after WordPress,
 * Elementor and Vchat release styles. Existing IDs, data attributes, handlers and API
 * endpoints remain unchanged. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"]{
  --vct-ink:#20203e;--vct-muted:#7d819d;--vct-line:#e3e5f2;
  --vct-purple:#6257ea;--vct-lilac:#f1efff;--vct-bg:#f6f7fe;
  --vct-card-shadow:0 13px 35px rgba(42,36,113,.045);
  padding:25px clamp(15px,2.5vw,36px) 64px!important;
  background:linear-gradient(180deg,#f5f7ff 0%,#fafaff 490px,#f7f8fe 100%)!important;
  color:var(--vct-ink)!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  overflow-x:clip!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] *,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] *::before,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] *::after{box-sizing:border-box}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] [hidden]{display:none!important}

/* Section heading: executive home typography, visually aligned to KPIs. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contacts-heading{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  justify-content:space-between!important;gap:14px 20px!important;
  margin:0 0 19px!important;padding:0!important;min-height:0!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contacts-heading>div:first-child{min-width:0!important}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contacts-heading .vchat-eyebrow{
  display:inline-block!important;margin:0 0 7px!important;font-size:10px!important;letter-spacing:.145em!important;
  font-weight:850!important;color:#665bd0!important;text-transform:uppercase!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contacts-heading h1{
  font-size:clamp(27px,3vw,39px)!important;line-height:1.1!important;letter-spacing:-.052em!important;
  font-weight:830!important;color:#161c3c!important;margin:0 0 7px!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contacts-heading p{
  margin:0!important;font-size:13px!important;line-height:1.48!important;color:#777d99!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-heading-actions{
  display:flex!important;gap:9px!important;align-items:center!important;flex-wrap:wrap!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-heading-actions>button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;min-height:41px!important;padding:0 18px!important;
  border:1px solid #dfe1f4!important;border-radius:13px!important;
  background:#fff!important;color:#5d53b7!important;font-size:12px!important;font-weight:770!important;
  box-shadow:0 5px 20px rgba(34,28,97,.027)!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] #vchat-new-contact{
  color:#fff!important;background:linear-gradient(125deg,#6155e8,#6863f6)!important;
  border-color:#6057ed!important;box-shadow:0 8px 18px rgba(92,83,234,.17)!important;
}

/* KPI selection row — intentional hierarchy, not four unrelated boxes. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:13px!important;margin:0 0 21px!important;max-width:100%!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview>button{
  position:relative!important;display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;justify-content:center!important;
  gap:8px!important;min-width:0!important;min-height:122px!important;
  padding:17px 20px!important;text-align:left!important;
  border:1px solid var(--vct-line)!important;border-radius:20px!important;
  background:#fff!important;color:var(--vct-ink)!important;
  box-shadow:var(--vct-card-shadow)!important;overflow:hidden!important;
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview>button::before{
  content:"";position:absolute;top:0;left:20px;right:20px;height:3px;
  border-radius:0 0 5px 5px;background:transparent;transition:background .16s ease;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview>button:hover{
  transform:translateY(-2px)!important;box-shadow:0 16px 38px rgba(49,40,115,.09)!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview>button.is-active{
  background:linear-gradient(155deg,#fff 0%,#f7f6ff 100%)!important;
  border-color:#bab5ff!important;box-shadow:0 13px 30px rgba(102,84,230,.09)!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview>button.is-active::before{background:#7065ef}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview small{
  font-size:11px!important;line-height:1.2!important;font-weight:750!important;
  letter-spacing:.015em!important;color:#737895!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview strong{
  font-size:clamp(24px,2.8vw,32px)!important;line-height:1.05!important;
  font-weight:830!important;letter-spacing:-.045em!important;color:#1b1d3d!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview span{
  font-size:11px!important;line-height:1.3!important;color:#8a8eac!important;
}

/* Discovery surface: single unified search / filters / quick views system. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-discovery{
  display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
  margin:0 0 19px!important;padding:20px 22px 16px!important;
  border:1px solid #e0e3f5!important;border-radius:24px!important;
  background:linear-gradient(150deg,#fff 0%,#fff 72%,#fbfaff 100%)!important;
  box-shadow:0 16px 45px rgba(46,40,116,.055)!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-discovery-heading{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;
  gap:11px 15px!important;margin:0 0 17px!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-discovery-title{
  display:block!important;min-width:0!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-discovery-kicker{
  display:block!important;margin-bottom:5px!important;color:#655dd2!important;font-size:9.5px!important;
  font-weight:850!important;letter-spacing:.14em!important;line-height:1.3!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-discovery-title h2{
  font-size:19px!important;line-height:1.23!important;letter-spacing:-.032em!important;
  font-weight:800!important;color:#202042!important;margin:0 0 4px!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-discovery-title p{
  color:#8286a1!important;font-size:11.5px!important;line-height:1.45!important;
  margin:0!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] button.vchat-contact-reset{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  width:auto!important;min-height:34px!important;padding:0 12px!important;
  background:#f3f1ff!important;color:#6358c6!important;border:1px solid #dfdcff!important;
  border-radius:10px!important;font-size:11px!important;font-weight:780!important;white-space:nowrap!important;
}

/* Stable two-column desktop grid; labels align directly over their selects. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar{
  display:grid!important;grid-template-columns:minmax(240px,1.1fr) minmax(0,1.65fr)!important;
  gap:12px!important;align-items:end!important;min-width:0!important;width:100%!important;max-width:100%!important;
  margin:0!important;padding:0 0 17px!important;background:transparent!important;
  border:none!important;border-bottom:1px solid #eeeefa!important;border-radius:0!important;box-shadow:none!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar .vchat-search{
  display:flex!important;align-items:center!important;gap:11px!important;min-width:0!important;
  width:100%!important;max-width:100%!important;min-height:47px!important;height:47px!important;
  margin:0!important;padding:0 15px!important;
  background:#f8f9ff!important;border:1px solid #dee2f3!important;
  border-radius:14px!important;box-shadow:none!important;overflow:hidden!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar .vchat-search:focus-within{
  background:#fff!important;border-color:#8278f3!important;box-shadow:0 0 0 3px rgba(105,91,243,.09)!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-search-lens{
  display:block!important;flex:0 0 19px!important;width:19px!important;height:19px!important;
  color:#6861dd!important;stroke:currentColor!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar .vchat-search input{
  display:block!important;flex:1 1 auto!important;min-width:0!important;width:100%!important;
  max-width:100%!important;height:43px!important;min-height:43px!important;
  margin:0!important;padding:0!important;border:0!important;outline:0!important;
  background:transparent!important;box-shadow:none!important;
  color:#272b4c!important;font-size:12.5px!important;font-weight:530!important;line-height:1.25!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar .vchat-search input::placeholder{
  color:#969ab4!important;opacity:1!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar-actions{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:end!important;gap:10px!important;min-width:0!important;width:100%!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-select-field{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  min-width:0!important;width:100%!important;gap:7px!important;margin:0!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-select-field>span{
  font-size:10px!important;font-weight:760!important;line-height:1.2!important;
  color:#717692!important;letter-spacing:.014em!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar-actions select{
  display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
  grid-column:auto!important;height:47px!important;min-height:47px!important;
  padding:0 26px 0 12px!important;border:1px solid #dee2f3!important;
  border-radius:13px!important;background-color:#fff!important;color:#333451!important;
  font-size:11.5px!important;font-weight:680!important;
  line-height:1.2!important;box-shadow:none!important;text-overflow:ellipsis!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar-actions select:focus{
  outline:2px solid #b1aaff!important;outline-offset:1px!important;
}
/* Group heading and quick-view pills sit in ONE row; never a detached extra "Todas". */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-discovery-subrow,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-categories-row{
  display:flex!important;align-items:center!important;gap:14px!important;min-width:0!important;
  margin:0!important;padding:13px 0 0!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-categories-row{
  padding-top:12px!important;margin-top:12px!important;border-top:1px solid #eeeefa!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-row-label{
  display:block!important;flex:0 0 105px!important;width:105px!important;
  color:#9699b1!important;font-size:9px!important;line-height:1.2!important;
  font-weight:840!important;letter-spacing:.095em!important;white-space:nowrap!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-segments,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-category-strip{
  display:flex!important;flex:1 1 auto!important;flex-wrap:wrap!important;
  align-items:center!important;gap:7px!important;min-width:0!important;
  margin:0!important;padding:0!important;overflow:visible!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-segments button,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-category-strip button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:auto!important;min-height:34px!important;
  padding:0 14px!important;border:1px solid #e0e1f1!important;border-radius:11px!important;
  background:#fff!important;color:#666984!important;
  font-size:11px!important;line-height:1.15!important;font-weight:730!important;
  white-space:nowrap!important;box-shadow:none!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-segments button.is-active,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-category-strip button.is-active{
  color:#fff!important;background:#6458c8!important;border-color:#6458c8!important;
  box-shadow:0 6px 12px rgba(103,85,200,.12)!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-segments button:hover:not(.is-active),
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-category-strip button:hover:not(.is-active){
  border-color:#aaa3ee!important;color:#544bc0!important;background:#f8f7ff!important;
}

/* Clean table heading, restrained dividers and visible focus for all actions. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-workspace{
  margin:0!important;min-width:0!important;width:100%!important;max-width:100%!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-shell{
  border:1px solid #e1e4f2!important;border-radius:20px!important;
  background:#fff!important;box-shadow:var(--vct-card-shadow)!important;overflow:hidden!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-head{
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  gap:12px!important;min-height:59px!important;padding:12px 19px!important;
  background:#fff!important;border-bottom:1px solid #ebedf6!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-head span{
  font-size:14px!important;font-weight:830!important;color:#252344!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-head small{
  padding:5px 10px!important;background:#f1f0ff!important;border-radius:999px!important;
  font-size:10px!important;font-weight:760!important;color:#675cc5!important;white-space:nowrap!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-column-head{
  background:#f8f9fe!important;border-bottom:1px solid #e9ebf5!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-item:hover{
  background:#fafaff!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] button:focus-visible,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] select:focus-visible,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] input:focus-visible{
  outline:2px solid #8479fa!important;outline-offset:2px!important;
}

/* Tablet: search first, three balanced filter controls below. */
@media(max-width:1250px){
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:800px){
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"]{
    padding:18px 14px 45px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin-bottom:14px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-overview>button{
    padding:15px!important;min-height:104px!important;border-radius:16px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-discovery{
    padding:16px 14px!important;border-radius:19px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-discovery-title h2{
    font-size:17px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-select-field:last-child{
    grid-column:1 / -1!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-row-label{
    flex:0 0 auto!important;width:auto!important;min-width:85px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-shell{
    background:transparent!important;box-shadow:none!important;border:0!important;overflow:visible!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-head{
    border:1px solid #e1e4f2!important;border-radius:14px!important;margin:0 0 9px!important;
  }
}
@media(max-width:520px){
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contacts-heading h1{
    font-size:30px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-heading-actions{
    width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-heading-actions>button{
    width:100%!important;min-width:0!important;padding:0 8px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-toolbar-actions{
    grid-template-columns:1fr!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-select-field:last-child{
    grid-column:auto!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-discovery-subrow,
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-categories-row{
    flex-direction:column!important;align-items:flex-start!important;gap:9px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-segments,
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-category-strip{
    width:100%!important;flex-wrap:wrap!important;gap:6px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-segments button,
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-category-strip button{
    min-height:32px!important;padding:0 11px!important;font-size:10.5px!important;
  }
}

/* Native hidden states beat component flex defaults, regardless of legacy cascade. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-categories-row[hidden],
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] button.vchat-contact-reset[hidden]{display:none!important}
