/* RKT Distribuidores — estilos copiados del sitio original (assets/styles.css).
   Tamaños en PX (= rem original x16) para ser inmunes al font-size raíz del sitio WP
   (que es menor a 16px y encogía todo lo definido en rem). Así la sección queda
   EXACTAMENTE como en la página original. */

:root{
	--blue:#1A3674;--navy:#0D1B45;--yellow:#FFCA00;--yellow-dk:#E5B400;--red:#FF0616;--gray:#F5F5F0;
	--font-display:'CWM','Kinship Sans',sans-serif;--font-body:'Inter RKT','Inter','Outfit',sans-serif;
}

/* ---- barra de filtros ---- */
.rkt-dist-wrap .dist-filter{background:#fff;border:1px solid rgba(0,0,0,.1);padding:22px;display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:14px;align-items:end;margin-bottom:32px}
.rkt-dist-wrap .dist-input{border:none;border-bottom:2px solid var(--blue);padding:10px 4px;font-family:var(--font-body);font-size:15px;background:transparent;width:100%;outline:none;color:var(--navy)}
.rkt-dist-wrap .dist-input:focus{border-bottom-color:var(--yellow)}
.rkt-dist-wrap .dist-select{border:1px solid rgba(0,0,0,.15);padding:11px 14px;font-family:var(--font-body);font-size:14px;background:#fff;width:100%;outline:none;color:var(--navy);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A3674' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:32px}
.rkt-dist-wrap .field-lbl{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#666;margin-bottom:5px;display:block}

/* ---- botón skew ---- */
.rkt-dist-wrap .btn-rkt{display:inline-flex;align-items:center;position:relative;transform:skewX(-9deg);transition:transform .25s,box-shadow .25s;cursor:pointer;border:none;padding:0;text-decoration:none;outline:none}
.rkt-dist-wrap .btn-rkt:hover{transform:skewX(-9deg) translateY(-2px)}
.rkt-dist-wrap .btn-rkt:active{transform:skewX(-9deg) scale(.97)}
.rkt-dist-wrap .btn-rkt span{display:inline-block;transform:skewX(9deg);padding:14px 30px;font-weight:700;font-size:13px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.rkt-dist-wrap .btn-blue{background:var(--blue);color:#fff}
.rkt-dist-wrap .btn-blue:hover{box-shadow:0 10px 30px -8px rgba(26,54,116,.5)}
/* El builder (Bricks) inyecta un override de alta especificidad
   (#brxe-... .rkt-dist-wrap .btn-blue{background:#fff!important}) que dejaba
   el botón "Cerca de mí" en blanco sobre blanco. Reforzamos con la id propia
   del botón (#rkt-locate) para recuperar el azul de la referencia. */
.rkt-dist-wrap #rkt-locate.btn-rkt.btn-blue{background:var(--blue) !important;color:#fff !important}
/* El tema (Bricks) también inyecta un ::before global en .btn-rkt (mismo color
   y skew que el botón, position:absolute inset:0, z-index:-1) pensado como
   "sombra" fija detrás del botón. Como nuestro :hover sube el botón real
   (translateY -2px) pero ese ::before NO se mueve con él, al pasar el mouse
   quedaba un "fantasma" navy asomando debajo — parecía un segundo botón
   detrás. Lo anulamos dentro del widget: no lo necesitamos (usamos nuestro
   propio box-shadow en :hover). */
.rkt-dist-wrap .btn-rkt::before,
.rkt-dist-wrap .btn-rkt::after{content:none !important;display:none !important}

/* ---- grid mapa + lista (col-span 3 / 2 → 3fr 2fr) ---- */
.rkt-dist-grid{display:grid;grid-template-columns:3fr 2fr;gap:24px}
/* isolation:isolate crea un nuevo contexto de apilamiento para el mapa: así
   los controles internos de Leaflet (zoom +/-, atribución), que traen un
   z-index alto (1000) de fábrica, quedan contenidos DENTRO del mapa y ya no
   se "escapan" por encima del header/menú sticky del sitio cuando el mapa
   se desplaza debajo de ellos al hacer scroll. */
#rkt-map{height:520px;width:100%;border:1px solid rgba(0,0,0,.1);isolation:isolate}
#rkt-list{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow-y:auto;padding-right:8px}

/* ---- leyenda (círculos por región: Costa/Sierra/Amazonía) ---- */
.rkt-dist-legend{margin-top:12px;display:flex;align-items:center;gap:20px;font-size:12px;color:#6b7280}
.rkt-leg-item{display:flex;align-items:center;gap:8px}
.rkt-leg-pin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.rkt-leg-pin.costa{background:#1A3674}
.rkt-leg-pin.sierra{background:#FFCA00}
.rkt-leg-pin.amazonia{background:#FF0616}
.rkt-leg-pin.sinregion{background:#9CA3AF}

/* ---- cards (el color del borde izquierdo se fija inline según región, ver rkt-dist.js) ---- */
.rkt-dist-wrap .dist-card{border:1px solid rgba(0,0,0,.09);padding:20px 22px;background:#fff;border-left:4px solid var(--blue);transition:all .25s;cursor:pointer;display:flex;flex-direction:column;gap:7px}
.rkt-dist-wrap .dist-card:hover{box-shadow:0 8px 24px -10px rgba(26,54,116,.18);transform:translateX(3px)}
.rkt-dist-wrap .dist-card .city{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.rkt-dist-wrap .dist-card .name{font-family:var(--font-display);font-size:21px;color:var(--navy);letter-spacing:.04em;line-height:1}
.rkt-dist-wrap .dist-card .addr{font-size:13px;color:#555;line-height:1.35}
.rkt-dist-wrap .dist-card .meta{font-size:12px;color:#888;display:flex;gap:16px;margin-top:3px;align-items:center}

/* ---- popup del mapa ---- */
.rkt-pop{font-family:'Outfit',sans-serif;min-width:180px}
.rkt-pop .pn{font-family:var(--font-display);font-size:18px;color:#0D1B45}
.rkt-pop .pc{font-size:12px;color:#FF0616;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin:3px 0}
.rkt-pop .pa{font-size:12px;color:#555;line-height:1.35;margin-bottom:2px}
.rkt-pop .pp{font-size:13px;color:#1A3674;font-weight:600;margin-top:2px}
.rkt-pop .pl{margin-top:6px}
.rkt-pop .pl a{font-size:13px;color:var(--blue);font-weight:600;text-decoration:none}
.rkt-pop .pl a:hover{text-decoration:underline}

/* ---- responsive (igual que el original @media 900px) ---- */
@media(max-width:900px){
	.rkt-dist-wrap .dist-filter{grid-template-columns:1fr}
	.rkt-dist-grid{grid-template-columns:1fr}
	#rkt-map{height:380px}
}