/***** ========== ESTILOS (Mobile-first) ========== *****/

/* Layout base */
footer {
    display: none !important;
}

.municipios-mapa-container {
    display: flex;
    flex-direction: column;
    /* mobile first */
    width: 100%;
    height: auto;
    background: #fff;
    border-top: 1px solid #ddd;
    font-family: 'Aller', system-ui, sans-serif;
}

.municipios-sidebar {
    order: 1;
    flex: none;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-bottom: 1px solid #ddd;
    /* en desktop pasa a right */
    padding: 15px 20px;
    overflow-y: auto;
    z-index: 3;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .05);
}

.municipios-sidebar h2,
.municipios-sidebar h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #2596be;
    letter-spacing: .03em;
    animation: fadeInUp .6s ease forwards;
}

/* Título + botón atrás */
.municipios-sidebar h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.municipios-sidebar .btn-back-sidebar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #B6BE1A;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    transition: background .3s ease, transform .2s ease, box-shadow .2s ease;
}

.municipios-sidebar .btn-back-sidebar:hover {
    transform: scale(1.05);
}

.municipios-sidebar .btn-back-sidebar:focus {
    outline: 2px solid rgba(182, 190, 26, .6);
    outline-offset: 2px;
}

.municipios-sidebar .btn-back-sidebar img {
    width: 18px;
    height: 18px;
    display: block;
    filter: brightness(0) invert(1);
}

.municipios-sidebar .title-text {
    text-transform: uppercase;
}

.municipios-sidebar label {
    display: block;
    margin-bottom: 12px;
    font-size: .95rem;
    color: #555;
    user-select: none;
}

.municipios-sidebar input,
.municipios-sidebar select {
    width: 100%;
    padding: 8px 12px;
    font-size: 1rem;
    border: 1.8px solid #bbb;
    border-radius: 6px;
    background: #fff;
    box-shadow: inset 0 2px 5px rgb(0 0 0 / 5%);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.municipios-sidebar input:focus,
.municipios-sidebar select:focus {
    outline: none;
}

.filtros-basicos {
    display: flex;
    flex-flow: column nowrap;
    gap: 20px;
}

.filtros-basicos-row {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.filtros-basicos-row label input,
.filtros-basicos-row label select {
    margin-top: 10px;
}

/* Filtros avanzados (details/summary) */
.filtros-avanzados {
    margin-top: 20px;
    border-top: 1px solid #ddd;
    padding-top: 12px;
}

.filtros-avanzados summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 12px;
    list-style: none;
    position: relative;
    padding-left: 22px;
    color: #B6BE1A;
    user-select: none;
    transition: color .3s ease;
    animation: fadeInLeft .5s ease forwards;
}

.filtros-avanzados summary::marker {
    content: '';
}

.filtros-avanzados summary::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: -.2rem;
    font-size: 1.1rem;
    color: #B6BE1A;
    transition: transform .3s ease;
}

.filtros-avanzados[open] summary::before {
    transform: rotate(90deg);
}

.filtros-avanzados label {
    margin-left: 14px;
    font-weight: 500;
    font-size: .9rem;
}

/* Toolbar de chips (filtros rápidos) */
.cat-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 16px;
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1.8px solid #bbb;
    border-radius: 999px;
    background: #fff;
    font-size: .9rem;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.cat-chip img {
    width: 16px;
    height: 16px;
    display: block;
}

.cat-chip.is-on {
    border-color: #2596be;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.cat-chip:active {
    transform: scale(.98);
}

/* Acordeones por categoría */
.cat-acc {
    border: 1px solid #ddd;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    background: #fff;
    animation: fadeInUp .3s ease both;
}

.cat-acc[open] {
    box-shadow: 0 6px 14px rgba(0, 0, 0, .07);
}

.cat-acc summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    user-select: none;
}

.cat-acc summary::-webkit-details-marker {
    display: none;
}

.cat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cat-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cat-color, #bbb);
    flex: 0 0 12px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .04) inset;
}

.cat-name {
    font-weight: 700;
    color: #333;
    letter-spacing: .02em;
}

.cat-count {
    font-size: .85rem;
    color: #666;
}

.cat-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f6f6f6;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease, border-color .2s ease;
}

.cat-eye:hover {
    background: #efefef;
    border-color: #d5d5d5;
}

.cat-eye:active {
    transform: scale(.96);
}

.cat-eye img {
    width: 20px;
    height: 20px;
}

.cat-caret {
    width: 18px;
    height: 18px;
    opacity: .75;
    transform: rotate(0);
    transition: transform .2s ease;
}

.cat-acc[open] .cat-caret {
    transform: rotate(90deg);
}

.cat-accordion__panel {
    padding: 12px 14px;
    border-top: 1px solid #eee;
    background: #fff;
}

.cat-accordion__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cat-empty {
    font-size: .9rem;
    color: #777;
    padding: 6px 2px;
}

/* Listado */
#lista-municipios {
    list-style: none;
    padding: 0;
    margin: 0;
}

#lista-municipios li {
    /* padding: 10px 14px; */
    margin-bottom: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transition: box-shadow .3s ease, transform .25s ease;
    animation: fadeInUp .4s ease forwards;
    list-style: none;
}

/* Card */
.municipio-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #eee;
    background: #fff;
    transition: background .2s;
    animation: fadeInUp .4s ease forwards;
}

.municipio-card:hover {
    transform: translateX(6px);
}

.img-wrapper {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #f0f0f0;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    filter: blur(10px);
    transition: opacity .4s ease-in-out, filter .4s ease-in-out;
}

.img-wrapper img.loaded {
    opacity: 1;
    filter: blur(0);
}

.municipio-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.municipio-card-title {
    /* display: none; */
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2596be;
}

.municipio-card-title-item {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #333;
}

.municipio-card-excerpt {
    margin-bottom: 8px;
}

.municipio-card-excerpt a {
    font-size: .85rem;
    color: #666;
}

.municipio-card-excerpt h2 {
    margin-top: 0;
}

.municipio-card-links {
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-top: 8px;
    margin-left: auto;
    justify-content: flex-end;
}

.municipio-card-button,
.municipios-sidebar .button {
    display: block;
    width: fit-content;
    /* margin-left: auto; */
    text-align: center;
    padding: 6px 8px;
    font-size: .85rem !important;
    background: #2596be;
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background .3s ease, transform .2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    border-color: transparent;
}

.municipios-sidebar .button.load {
    display: none;
}

.municipio-card-button:hover,
.municipios-sidebar .button:hover {
    transform: scale(1.05);
}

/* Mapa */
#map-container {
    position: relative;
    flex: 1;
    height: 100%;
    z-index: 1;
}

#map {
    width: 100%;
    height: 70vh;
}

/* mobile default */

/* Loader del mapa */
#map-loader {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
    background-size: 200% 100%;
    animation: shimmerAnim 1.5s infinite;
    z-index: 2;
}

/* Skeleton para listado */
.skeleton-card {
    display: flex;
    gap: 10px;
    padding: 10px !important;
}

.skeleton-image,
.skeleton-line {
    background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.2s infinite;
}

.skeleton-image {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    flex-shrink: 0;
}

.skeleton-lines {
    flex: 1;
}

.skeleton-line {
    height: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-line.short {
    width: 40%;
}

.skeleton-line.medium {
    width: 70%;
}

/* Scrollbar sidebar */
.municipios-sidebar::-webkit-scrollbar {
    width: 8px;
}

.municipios-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

.municipios-sidebar::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 8px;
    transition: background-color .3s ease;
}

.municipios-sidebar::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* Leaflet UI */
.leaflet-tooltip.map-tooltip {
    background: var(--map-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    pointer-events: none;
    font: 16px/1.2 system-ui, sans-serif;
    text-transform: uppercase;
}

.leaflet-container .popup-poi strong {
    font-weight: 600;
}

.poi-chip-inner{
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--chip-color, #1e6ad8);
  display: grid; place-items: center;
  overflow: hidden;                  /* <- recorta cualquier exceso */
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* quita los 16px fijos y haz que se adapte */
.poi-chip-inner img{
  width: 100%;
  height: 100%;
  padding: 3px;                      /* respiro para que no toque el borde */
  object-fit: contain;               /* mantiene proporción dentro del círculo */
  display: block;
}

.row .col img:not([srcset]) {
    width: 100%;
    height: 100%;
}

/* Control: filtros */
.leaflet-control.custom-filters {
    position: relative;
}

.leaflet-control.custom-filters .filters-panel {
    display: none;
    position: absolute;
    top: 32px;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    z-index: 1000;
}

.leaflet-control.custom-filters.open .filters-panel {
    display: block;
}

.filters-panel .filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.filters-panel .filters-close {
    background: none;
    border: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.filters-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}

/* Leyenda */
.leaflet-control.legend-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
    font-size: 12px;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c, #666);
    display: inline-block;
}

/* Transiciones para polígonos */
.smooth-transition {
    transition: opacity .2s, fill-opacity .2s;
}

/***** ========== MEDIA QUERIES (Desktop ≥ 769px) ========== *****/

body:not(:has(#wpadminbar)) .municipios-mapa-container {
    height: calc(100vh - 140px);
}

/* CON admin bar: desktop/tablet (>=783px) → 32px extra */
@media (min-width: 783px) {
    body:has(#wpadminbar) .municipios-mapa-container {
        height: calc(100vh - (140px + 32px));
        /* 172px */
    }
}

/* CON admin bar: móvil (<=782px) → 46px extra */
@media (max-width: 782px) {
    body:has(#wpadminbar) .municipios-mapa-container {
        height: calc(100vh - (140px + 46px));
        /* 186px */
    }
}

@media (min-width:769px) {
    .municipios-mapa-container {
        flex-direction: row;
    }

    body:has(.admin-bar) .municipios-mapa-container {
        height: calc(100vh - 172px);
    }

    body .municipios-mapa-container {
        height: calc(100vh - 140px);
        /* margin-top: 160px; */
    }

    .municipios-sidebar {
        order: initial;
        flex: 0 0 30%;
        border-bottom: none;
        border-right: 1px solid #ddd;
        padding: 20px 25px;
    }

    #map {
        height: 100%;
    }

    /* Fila de filtros básicos: 60/40 en desktop */
    .filtros-basicos-row label:first-of-type {
        flex: 1 0 calc(60% - 5px);
    }

    .filtros-basicos-row label:last-of-type {
        flex: 1 0 calc(40% - 5px);
    }
}

/***** ========== ANIMACIONES & EFECTOS ========== *****/

/* Mapa shimmer */
@keyframes shimmerAnim {
    100% {
        background-position-x: -200%;
    }
}

/* Skeleton */
@keyframes skeleton-loading {
    to {
        background-position: -200% 0;
    }
}

/* Entradas */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-12px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* NUEVO POPUP EMPRESA */

/* Pin con anillo multicolor por categorías */
.poi-chip { display: grid; place-items: center; }

.poi-chip-ring{
  --bw: 3px;                 /* grosor del anillo */
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--ring, #1e6ad8); /* conic-gradient o color plano */
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* “relleno” blanco que crea el efecto de borde/anillo */
.poi-chip-dot{
  width: calc(100% - var(--bw) * 2);
  height: calc(100% - var(--bw) * 2);
  border-radius: 999px;
  background: #fff;
  display: grid; place-items: center;
}

.poi-chip-dot img{
  width: 16px; height: 16px; display: block;
}


/* Leaflet popup moderno */
.leaflet-popup.popup-modern .leaflet-popup-content-wrapper{
  padding: 0;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  /* border: 1px solid rgba(30,106,216,.15); */
}
.leaflet-popup.popup-modern .leaflet-popup-content{ margin:0; }
.leaflet-popup.popup-modern .leaflet-popup-tip{
  background:#fff;
  border: 1px solid rgba(30,106,216,.15);
}

/* Tarjeta del popup */
.pm-card{ overflow:hidden; border-radius:14px; background:#fff; }
.pm-cover{ display:block; width:100%; height:150px; object-fit:cover; background:#eef5ff; }
.pm-body{ padding:14px 14px 16px; }
.pm-title{ margin:0 0 10px; font-size:16px; line-height:1.25; font-weight:700; color:#143d7a; }
.pm-btn{
  display:inline-block; font-size:13px; line-height:1;
  padding:10px 12px; border-radius:10px; background:#2596be; color:#fff !important; text-decoration:none;
  box-shadow:0 6px 18px rgba(30,106,216,.25); transition:transform .15s ease, box-shadow .15s ease;
}
.pm-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(30,106,216,.3); }


/* Tooltip "HUELVA" con fondo azul y texto blanco */
.leaflet-tooltip.map-tooltip{
  background: #2596be;   /* azul solicitado */
  color: #fff;           /* texto blanco */
  border: 0;
  border-radius: 8px;
  padding: .35rem .55rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* Triangulito (flecha) del tooltip hacia arriba */
.leaflet-tooltip-top.map-tooltip::before {
  border-top-color: #2596be;
}

/* Hacia abajo, por si Leaflet decide colocarlo abajo */
.leaflet-tooltip-bottom.map-tooltip::before {
  border-bottom-color: #2596be;
}

/* Izquierda/Derecha por si cambia de posición automática */
.leaflet-tooltip-left.map-tooltip::before {
  border-left-color: #2596be;
}
.leaflet-tooltip-right.map-tooltip::before {
  border-right-color: #2596be;
}


/* Tooltip base azul y texto blanco (ya lo tenías) */
.leaflet-tooltip.pm-tooltip{
  background:#1e6ad8;color:#fff;border:none;border-radius:8px;
  padding:8px 10px;font-weight:600;line-height:1.25;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.leaflet-tooltip.pm-tooltip.leaflet-tooltip-top:before{border-top-color:#1e6ad8;}
.leaflet-tooltip.pm-tooltip .tt-title{font-size:14px;margin:0;}
.leaflet-tooltip.pm-tooltip .tt-badges{margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;}
/* Cada badge usa su color propio (inyectado inline desde JS vía --badge-bg) */
.leaflet-tooltip.pm-tooltip .tt-badge{
  background: var(--badge-bg, rgba(255,255,255,.15));
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.25);

  
}

.legend-box { background:#fff; padding:10px 12px; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.legend-title { font-weight:600; margin-bottom:6px; font-size:13px; }
.legend-row { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:13px; }
.legend-dot { width:10px; height:10px; border-radius:50%; background:var(--c, #1e6ad8); display:inline-block; flex:0 0 10px; }



/* Skeleton lista */
.skeleton-card { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid #eee; }
.sk-img { width:88px; height:64px; border-radius:8px; background:#f2f4f7; }
.sk-lines { flex:1; }
.sk-line { height:12px; margin:8px 0; border-radius:6px; background:#f2f4f7; }
.sk-line.w60 { width:60%; }
.shimmer { position:relative; overflow:hidden; }
.shimmer::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  transform: translateX(-100%); animation: sk 1.1s linear infinite;
}
@keyframes sk { to { transform: translateX(100%); } }

/* Control de búsqueda */
.leaflet-control.search-box {
  background:#fff; border-radius:8px; padding:6px; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.search-wrap { display:flex; align-items:center; gap:4px; }
.search-wrap input[type="search"] {
  width:180px; border:1px solid #e5e7eb; border-radius:6px; padding:6px 8px; font-size:14px;
}
.search-wrap .clear {
  border:0; background:#f3f4f6; border-radius:6px; width:28px; height:28px; cursor:pointer;
}
.search-wrap .clear:hover { background:#e5e7eb; }

.municipios-filters { margin-bottom: 14px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; background:#fff; }
.ms-row { display:flex; align-items:center; gap:6px; }
#ms-search { flex:1; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px; font-size:14px; }
.ms-clear { width:32px; height:32px; border:0; border-radius:8px; background:#f3f4f6; cursor:pointer; }
.ms-clear:hover { background:#e5e7eb; }
.ms-cats { margin-top:10px; }
.ms-cats summary { cursor:pointer; font-weight:600; color:#2b2f36; }
.ms-cats-list { display:grid; grid-template-columns: 1fr 1fr; gap:6px 10px; margin-top:8px; }
.ms-cat { display:flex; align-items:center; gap:8px; font-size:14px; }
.ms-cat input { transform: translateY(1px); }
.ms-dot { width:10px; height:10px; border-radius:50%; background:var(--c,#1e6ad8); display:inline-block; }
.ms-select { padding-top: 5px !important; }

/* === Select2 (ms-cats) - más espacio a la izquierda en el buscador === */

/* Buscador dentro del desplegable (caja que aparece al abrir el select) */
#ms-cats + .select2 .select2-search--dropdown .select2-search__field {
  padding-left: 12px !important;  /* <- ajusta a tu gusto */
}

/* Si usas múltiple: input de búsqueda inline cuando el select está cerrado */
#ms-cats + .select2 .select2-selection--multiple .select2-search--inline .select2-search__field {
  padding-left: 8px !important;   /* <- separa el caret/placeholder del borde */
  margin-left: 4px;               /* <- un poco de aire extra */
}

/* Un pelín más de aire al área de “tags” seleccionados */
#ms-cats + .select2 .select2-selection--multiple .select2-selection__rendered {
  padding-left: 8px;              /* <- evita que quede pegado del borde */
}

/* (Opcional) Alinear también el padding de cada opción de resultados */
#ms-cats + .select2 .select2-results__option {
  padding-left: 12px;             /* coherente con el buscador */
}

/* Scope: solo el bloque de filtros */
.municipios-filters { --ms-radius: 8px; }           /* <- pon aquí tu radio */

/* Tu input superior ya usa el mismo radio */
#ms-search { border-radius: var(--ms-radius); }

/* Buscador del desplegable de Select2 */
#ms-cats + .select2 .select2-search--dropdown {
  padding: 8px;                                    /* aire alrededor del input */
}
#ms-cats + .select2 .select2-search--dropdown .select2-search__field {
  border-radius: var(--ms-radius) !important;       /* el redondeo que querías */
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  outline: none;
}

/* Estado focus coherente con tu color #2596be */
#ms-cats + .select2 .select2-search--dropdown .select2-search__field:focus {
  border-color: #2596be;
  box-shadow: 0 0 0 3px rgba(37,150,190,.15);
}

/* (Opcional) redondear también la caja del dropdown */
#ms-cats + .select2 .select2-dropdown {
  border-radius: calc(var(--ms-radius) + 2px);
  overflow: hidden;                                  /* para que no “asome” nada cuadrado */
}

/* (Opcional) coherencia de padding de resultados */
#ms-cats + .select2 .select2-results__option {
  padding: 8px 12px;
}
