/* [cc_directorio] — listado del directorio con filtros en cliente. */
.cc-comp.cc-directorio { width:100%; background:#fff; }
.cc-comp .cc-directorio__inner { width:100%; max-width:var(--cc-container); margin:0 auto; padding:clamp(32px,5vw,64px) 32px; }
.cc-comp .cc-directorio__head { text-align:center; margin-bottom:28px; }
.cc-comp .cc-directorio__title { margin:0; }
.cc-comp .cc-directorio__intro { margin-top:12px; color:var(--cc-body); }

.cc-comp .cc-directorio__filtros { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:24px; }
.cc-comp .cc-directorio__buscar,
.cc-comp .cc-directorio__f {
  padding:11px 14px; border:1px solid rgba(0,124,104,.28); border-radius:12px;
  background:#fff; color:var(--cc-body); font-size:15px; font-family:inherit;
}
.cc-comp .cc-directorio__buscar { flex:1 1 220px; min-width:180px; }
.cc-comp .cc-directorio__f { flex:0 0 auto; cursor:pointer; }
.cc-comp .cc-directorio__buscar:focus,
.cc-comp .cc-directorio__f:focus { outline:none; border-color:var(--cc-green); box-shadow:0 0 0 3px rgba(0,124,104,.15); }
.cc-comp .cc-directorio__count { margin-left:auto; color:#6b746f; font-size:14px; }

.cc-comp .cc-directorio__list {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;
}
.cc-comp .cc-directorio__card { margin:0; }
.cc-comp .cc-directorio__link {
  display:flex; flex-direction:column; gap:4px; height:100%;
  padding:16px 18px; border:1px solid rgba(0,124,104,.16); border-radius:var(--cc-radius);
  background:var(--cc-cream); text-decoration:none; transition:border-color .15s, transform .15s;
}
.cc-comp .cc-directorio__link:hover { border-color:var(--cc-green); transform:translateY(-2px); }
.cc-comp .cc-directorio__name { color:var(--cc-heading,#0f1f1b); font-weight:700; line-height:1.25; }
.cc-comp .cc-directorio__meta { color:#6b746f; font-size:13px; }
.cc-comp .cc-directorio__rol { margin-top:6px; align-self:flex-start; padding:3px 10px; border-radius:999px; background:rgba(0,124,104,.12); color:var(--cc-green); font-size:12px; font-weight:600; }
.cc-comp .cc-directorio__empty { text-align:center; color:#6b746f; padding:24px 0; }

@media (max-width:560px){
  .cc-comp .cc-directorio__inner { padding-right:20px; padding-left:20px; }
  .cc-comp .cc-directorio__count { margin-left:0; width:100%; }
}