@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans&display=swap');

.distribuidores-container {
    margin-top: 5%;
    margin-bottom: 5%;
}

.distribuidores-list {
    display: grid;
    gap: 20px;
    margin-top: 5%;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Layout: sidebar 30% / main 70% */
.distribuidores-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.distribuidores-sidebar {
    flex: 0 0 30%;
}
.distribuidores-sidebar-inner {
    position: sticky;
    top: 24px;
}
.distribuidores-main {
    flex: 1 1 70%;
}

/* Responsive: en pantallas pequeñas apilar */
@media (max-width: 768px) {
    .distribuidores-layout {
        flex-direction: column;
    }
    .distribuidores-sidebar, .distribuidores-main {
        flex: 1 1 100%;
    }
    .distribuidores-sidebar-inner { position: static; }
}

/* El sidebar se mantiene sticky en pantallas grandes; no usamos position:fixed para evitar solapamientos con el contenedor del tema. */
@media (min-width: 1024px) {
    .distribuidores-sidebar {
        /* mantener su tamaño relativo pero sin fijarlo al viewport */
        flex: 0 0 30%;
        max-width: 380px;
    }
    .distribuidores-sidebar-inner { position: sticky; top: 24px; }
    .distribuidores-main { margin-left: 0; }
}
.distribuidor-item {
    border: 1px solid #E2E8F0; /* border-light */
    padding: 18px;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #7a7a7a;
}
.distribuidor-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.distribuidor-item strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #4a5e84;
    margin-bottom: 8px;
    display: block;
}
.distribuidor-item a {
    text-decoration: none;
}
.btn-maps {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 14px;
    background: #FBBF24; /* yellow-400 */
    color: #111827; /* zinc-800 */
    border-radius: 0.375rem;
    text-decoration: none;
    font-size: 0.95em;
    border: 1px solid transparent;
    align-self: flex-start;
    font-weight: bold;
}
.btn-maps:hover {
    background: #F59E0B; /* yellow-500 */
    color: #fff;
}

.distribuidores-select {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px; /* aumentado para mayor legibilidad */
    color: #374151;
    border-radius: 0.5rem;
    border: 1px solid #E2E8F0;
    padding: 10px 14px;
    width: 100%;
}

#distribuidores-loader .loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0073aa;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px auto;
}
.text-gray-700{
    text-decoration: none !important;
    color:#7a7a7a !important;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.distribuidor-icon {
    width: 16px;
    height: 16px;
    margin-bottom: -2.5px;
}

.material-icons-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

/* Asegurar que la card ocupe toda la altura disponible y que el body empuje el footer al fondo */
.distribuidor-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.distribuidores-card-body {
    flex: 1 1 auto;
}

/* Botón de sedes (azul personalizado) y botón dirección (amarillo) */
.btn-sedes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Restaurar azul anterior (tailwind blue-600) */
    background: #2563eb; /* blue-600 */
    color: #ffffff !important;
    border: 1px solid transparent;
    text-decoration: none;
    padding: 8px 16px; /* explícito: 8px 16px */
}
.btn-sedes:hover {
    background: #1d4ed8; /* blue-700 */
}

.btn-direccion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FBBF24; /* yellow-400 */
    color: #111827; /* zinc-800 */
    border: 1px solid transparent;
    text-decoration: none;
}
.btn-direccion[disabled] {
    opacity: 0.9;
    cursor: not-allowed;
}

/* Forzar que ambos botones ocupen el mismo espacio dentro del contenedor flex */
.btn-sedes,
.btn-direccion {
    flex: 1 1 auto; /* igual comportamiento que 'flex-1' */
    min-width: 0; /* evitar overflow de texto */
    box-sizing: border-box;
    font-size: 0.95rem;
}

.btn-sedes, .btn-direccion, .btn-sedes:hover, .btn-direccion:hover {
    text-decoration: none !important; /* quitar subrayado en todas las variantes */
}

/* Asegurar que el disparador del modal tenga el mismo comportamiento/medidas
   que el botón 'Ver en maps' (mismo tamaño y sin subrayado) */
.distribuidores-open-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.95rem;
    text-decoration: none !important;
    cursor: pointer;
}

/* Hacer que el trigger del modal tenga el mismo estilo visual que el botón amarillo 'Ver en maps' */
.distribuidores-open-modal:not(.btn-sedes) {
    background: #FBBF24; /* yellow-400 same as btn-direccion */
    color: #111827; /* zinc-800 */
    border: 1px solid transparent;
}
.distribuidores-open-modal:not(.btn-sedes):hover {
    background: #F59E0B; /* yellow-500 hover */
    color: #ffffff;
}

/* Forzar border-radius: 0 para botones y la card (importante para sobrescribir inline styles) */
.btn-direccion, .btn-sedes {
    border-radius: 0px !important;
}

.distribuidor-item {
    border-radius: 0px !important;
}

/* Estilo especial para vendedores: mayor contraste */
.distribuidor-vendedor {
    background: #eef2ff; /* ligth indigo */
    border: 1px solid #c7d2fe; /* indigo-200 */
    box-shadow: 0 6px 18px rgba(79,70,229,0.08);
}
.distribuidor-vendedor strong {
    color: #1e3a8a; /* azul más oscuro para el título */
}

/* Asegurar que no haya subrayado en enlaces dentro de la card */
.distribuidor-item a {
    text-decoration: none !important;
}

/* Estilos para la tarjeta-tira de Casa Central (responsive) */
.distribuidores-strip {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 12px;
    border-radius: 6px;
}
.distribuidores-strip strong {
    font-size: 1.05rem;
    color: #111827;
}

/* En pantallas pequeñas la tira se apila y los elementos ocupan todo el ancho */
@media (max-width: 768px) {
    .distribuidores-strip > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .distribuidores-strip > div > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 0 !important; /* evitar overflow causado por inline min-width */
    }
    .distribuidores-strip strong {
        font-size: 1rem;
    }
    .distribuidores-strip .btn-direccion {
        width: 100% !important;
        display: inline-block !important;
        text-align: center !important;
        margin-top: 6px;
    }
}

/* A partir de 1199px hacia abajo: aplicar comportamiento 'mobile' SOLO a la rejilla de cards */
@media (max-width: 1199px) {
    /* Forzar que la rejilla interna (cards) pase a una columna en anchos <= 1199px */
    .distribuidores-main .grid {
        grid-template-columns: 1fr !important;
    }
}

/* Nueva estructura de la tira: control responsivo más robusto */
.distribuidores-strip {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}
.distribuidores-strip .strip-inner {
    display: flex !important;
    flex-direction: column !important; /* FORZAR apilado vertical: todo arriba a abajo */
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}
.distribuidores-strip .strip-left {
    display: flex !important;
    flex-direction: column !important; /* apilar título sobre meta */
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
}
.distribuidores-strip .strip-title {
    font-size: 1.05rem;
    color: #111827;
    margin: 0 !important;
}
.distribuidores-strip .strip-meta {
    color: #6b7280;
    font-size: 0.95rem;
    display: block !important;
    gap: 8px;
    align-items: center;
    min-width: 0 !important;
}
.distribuidores-strip .strip-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
}
.distribuidores-strip .strip-link { max-width: 220px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.distribuidores-strip .strip-meta { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Desktop tweaks: evitar que la tira se desorganice en pantallas grandes */
/* Eliminado layout en fila para desktop: la tira será siempre vertical según solicitud */
@media (min-width: 769px) {
    .distribuidores-strip .strip-inner { flex-direction: column !important; align-items: stretch !important; }
    .distribuidores-strip .strip-right { flex-direction: column !important; width:100% !important; }
    .distribuidores-strip .strip-contact { white-space: normal !important; width:100% !important; }
    .distribuidores-strip .strip-left { flex: none !important; width:100% !important; }
}

/* Forzar que la tira nunca cause overflow horizontal: siempre ajustarse al viewport */
.distribuidores-strip {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}
.distribuidores-strip .strip-inner {
    width: 100% !important;
    max-width: 100% !important;
}
.distribuidores-strip .strip-left,
.distribuidores-strip .strip-right,
.distribuidores-strip .strip-meta,
.distribuidores-strip .strip-contact {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Como último recurso, evitar scroll horizontal en el main que contiene la tira */
.distribuidores-main {
    overflow-x: hidden !important;
}
.distribuidores-strip .strip-contact {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #6b7280;
}
.distribuidores-strip .strip-link { color: #1f2937; text-decoration: none; }
.distribuidores-strip .strip-icon { font-size: 18px; }
.distribuidores-strip .strip-action .btn-direccion { padding: 8px 12px; border-radius: 0px; font-weight:600; }

@media (max-width: 768px) {
    .distribuidores-strip .strip-inner { flex-direction: column !important; align-items: stretch !important; }
    .distribuidores-strip .strip-right { justify-content: space-between !important; width: 100% !important; flex-shrink: 0 !important; }
    .distribuidores-strip .strip-contact { justify-content: flex-start !important; width: 48% !important; min-width: 0 !important; }
    .distribuidores-strip .strip-action .btn-direccion { width: 100% !important; display:block !important; }
}

/* Protección adicional: asegurar que los elementos internos no provoquen overflow */
.distribuidores-strip, .distribuidores-strip * {
    box-sizing: border-box !important;
}
.distribuidores-strip .strip-left { min-width: 0 !important; flex: 1 1 0 !important; }
.distribuidores-strip .strip-meta { min-width: 0 !important; }
.distribuidores-strip .strip-inner { gap: 12px !important; }

/* Fix overflow issues: ensure layout and grid respect container width and allow children to shrink
   - box-sizing on high-level containers
   - min-width:0 on flex children so they can shrink inside flex containers
   - ensure the internal grid wraps correctly and doesn't create horizontal scroll */
.distribuidores-layout,
.distribuidores-main,
.distribuidores-sidebar,
.distribuidores-strip,
.distribuidores-strip .strip-inner {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* allow flex children (main/sidebar) to shrink instead of forcing overflow */
.distribuidores-layout > .distribuidores-sidebar,
.distribuidores-layout > .distribuidores-main {
    min-width: 0 !important;
}

/* The shortcode uses Tailwind-like classes for the grid: ensure the .grid inside main is a responsive grid
   that wraps items and doesn't create horizontal scroll. */
.distribuidores-main .grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure each grid child can shrink and won't force the grid to overflow */
.distribuidores-main .grid > *,
.distribuidor-item {
    min-width: 0 !important;
}

/* Avoid fixed percentage widths in the strip that could push the layout on narrow viewports */
.distribuidores-strip .strip-contact {
    width: auto !important;
    flex: 1 1 auto !important;
}

/* Final safety: prevent the parent containers from introducing horizontal scroll */
.distribuidores-layout, .distribuidores-main, .container {
    overflow-x: hidden !important;
}

/* Ajuste de accesibilidad: aumentar tamaño de fuente en las cards para mejor lectura */
.distribuidor-item {
    font-size: 15px !important; /* antes 13px */
    color: #414141; /* texto un poco más oscuro para mejor contraste */
}
.distribuidor-item strong {
    font-size: 18px !important; /* antes 16px */
}