/* Directorio – Tabs look (match recipe tabs) */

/* Base vars */
:root{
  --re-pri: #0b6b3a;
  --re-pri-700: #0a5d33;
  --re-border: #e5e7eb;
  --re-txt: #111827;
}

/* Layout for filters area (works for Gutenberg/Elementor blocks) */
.entry-content .explore-filters,
.entry-content .filters,
.entry-content form.dir-filters,
.entry-content form[action*="directorio"]{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin:.25rem 0 1rem;
}

/* Tab pill base: anchors, buttons, submit */
.entry-content .filters a,
.entry-content form.dir-filters a,
.entry-content form.dir-filters button,
.entry-content form.dir-filters input[type="submit"],
.entry-content form[action*="directorio"] a,
.entry-content form[action*="directorio"] button,
.entry-content form[action*="directorio"] input[type="submit"]{
  appearance:none;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .85rem;
  min-height:42px;
  font-weight:700; font-size:.95rem; line-height:1;
  border-radius:999px;
  background:#fff;
  color:var(--re-txt);
  border:1px solid var(--re-border);
  text-decoration:none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  cursor:pointer;
}

/* Hover micro-interaction */
.entry-content .filters a:hover,
.entry-content form.dir-filters a:hover,
.entry-content form.dir-filters button:hover,
.entry-content form.dir-filters input[type="submit"]:hover,
.entry-content form[action*="directorio"] a:hover,
.entry-content form[action*="directorio"] button:hover,
.entry-content form[action*="directorio"] input[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

/* Active/selected state */
.entry-content .filters a.is-active,
.entry-content .filters a[aria-current="true"],
.entry-content form.dir-filters a.is-active,
.entry-content form.dir-filters a[aria-current="true"],
.entry-content form[action*="directorio"] a.is-active,
.entry-content form[action*="directorio"] a[aria-current="true"]{
  background: linear-gradient(180deg, var(--re-pri), var(--re-pri-700));
  color:#fff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(11,107,58,.25);
}

/* Primary submit as filled tab */
.entry-content form.dir-filters button[type="submit"],
.entry-content form.dir-filters input[type="submit"],
.entry-content form[action*="directorio"] button[type="submit"],
.entry-content form[action*="directorio"] input[type="submit"]{
  background: linear-gradient(180deg, var(--re-pri), #0e7a44);
  color:#fff; border-color: transparent;
  box-shadow: 0 8px 18px rgba(11,107,58,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Inputs/selects as chips */
.entry-content form.dir-filters select,
.entry-content form.dir-filters input[type="text"],
.entry-content form.dir-filters input[type="search"],
.entry-content form[action*="directorio"] select,
.entry-content form[action*="directorio"] input[type="text"],
.entry-content form[action*="directorio"] input[type="search"]{
  appearance:none;
  padding:.55rem .85rem;
  min-height:42px;
  font-weight:600; font-size:.95rem;
  border-radius:999px;
  background:#fff; color:var(--re-txt);
  border:1px solid var(--re-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Compact on very small screens */
@media (max-width: 360px){
  .entry-content .filters a,
  .entry-content form.dir-filters a{ padding:.5rem .75rem; font-size:.9rem; }
}