/*
  Establecimientos: lista y ficha.
  Proyecto: Kosher Panama. Septiembre 2026.

  Reemplaza a listing.css y listing-item.css en esas dos paginas. Los archivos
  viejos se quedan en su sitio por si hay que volver atras.

  Que cambio y por que:
    - Fuera el mapa de la lista. Ocupaba un tercio de la pantalla en escritorio
      y en celular directamente se escondia, asi que no aportaba nada.
      En su lugar van los filtros, que es lo que la gente si usa.
    - Fuera el alto fijo de 100vh con scroll interno. Esa caja hacia que en
      celular hubiera dos barras de desplazamiento, una dentro de otra.
    - Tarjetas mas chicas, con el logo a la izquierda y el nombre al lado.
      Antes el logo ocupaba hasta 500px de ancho y el nombre quedaba debajo.

  Prefijo .kv- en lo nuevo para no chocar con el resto del sitio.
*/

.kv-estab {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 18px 60px;
    text-align: left;
}

/* ---------- Filtros ---------- */
.kv-filtros {
    background: #fafafa;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 22px;
}
.kv-filtros-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.kv-buscar {
    flex: 1 1 260px;
    min-width: 0;
    height: 42px;
    box-sizing: border-box;
    padding: 0 14px 0 38px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #4a4a4a;
    background: #fff no-repeat left 12px center/16px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}
.kv-buscar:focus {
    outline: none;
    border-color: #ad855d;
    box-shadow: 0 0 0 3px rgba(173, 133, 93, .14);
}
.kv-select {
    flex: 0 1 190px;
    height: 42px;
    box-sizing: border-box;
    padding: 0 30px 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff no-repeat right 10px center/11px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #4a4a4a;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.kv-select:focus { outline: none; border-color: #ad855d; }
.kv-btn {
    height: 42px;
    padding: 0 22px;
    border: none;
    border-radius: 4px;
    background: #ad855d;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease-in-out;
}
.kv-btn:hover { background: #a86625; }
.kv-btn:focus { outline: none; }

/* Filtros puestos, cada uno con su equis para quitarlo */
.kv-activos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ececec;
}
.kv-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ad855d;
    color: #8a5f33;
    font-size: 12.5px;
    font-weight: 600;
}
.kv-chip a { color: #ad855d; font-size: 15px; line-height: 1; }
.kv-chip a:hover { color: #7d4f22; }
.kv-limpiar { font-size: 12.5px; color: #777; text-decoration: underline; }

.kv-conteo {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: #777;
}
.kv-conteo strong { color: #414042; font-weight: 700; }

/* ---------- Tarjetas ---------- */
.kv-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
}
.kv-tarjeta {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, transform .2s ease-in-out;
}
.kv-tarjeta:hover {
    border-color: #d49f5b;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
/* Caja de tamano fijo: aunque la foto no cargue, la tarjeta no se deforma.
   Es el mismo arreglo que se le hizo a la tarjeta de producto. */
.kv-foto {
    position: relative;
    flex: 0 0 74px;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    border: 1px solid #ededed;
    border-radius: 6px;
    overflow: hidden;
    margin: 0;
}
/* La imagen va encima de la inicial. Si no carga, el onerror la quita y
   queda la inicial, no el icono de imagen rota. */
.kv-foto img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    object-fit: contain;
}
.kv-foto-vacia {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #c9b298;
}
.kv-datos { min-width: 0; flex: 1 1 auto; }
.kv-nombre {
    margin: 0 0 3px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: #414042;
}
.kv-tarjeta:hover .kv-nombre { color: #a86625; }
.kv-sub {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 300;
    color: #8a8a8a;
    line-height: 1.4;
}
.kv-lugar {
    margin: 0;
    font-size: 12.5px;
    font-weight: 300;
    color: #6f6d71;
}
.kv-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.kv-etiqueta {
    padding: 3px 9px;
    border-radius: 3px;
    background: #f3ece3;
    color: #8a5f33;
    font-size: 11px;
    font-weight: 600;
}
.kv-etiqueta-tipo { background: #e8eef3; color: #2a5876; }
/* Los mismos colores que el catalogo de productos usa para el estatus:
   carne rojo, lacteo azul, parve verde. Que signifiquen lo mismo en todo
   el sitio importa mas que el gusto de cada pagina. */
.kv-etiqueta-carne { background: #fbe9ea; color: #b00020; }
.kv-etiqueta-lacteo { background: #e6effa; color: #0057b8; }
.kv-etiqueta-parve { background: #e8f3ea; color: #2e7d32; }
.kv-etiqueta-distintivo { background: #f2f0fa; color: #4b3f8f; }
.kv-etiqueta-aviso { background: #fdf0e3; color: #a05a00; }

.kv-aviso {
    margin: 12px 0 0;
    padding: 11px 14px;
    border-left: 3px solid #d08a2c;
    border-radius: 0 6px 6px 0;
    background: #fdf6ec;
    color: #8a5a12;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.kv-vacio {
    padding: 50px 20px;
    text-align: center;
    color: #777;
    font-size: 15px;
    line-height: 1.6;
}
.kv-vacio a { color: #ad855d; text-decoration: underline; }

/* ---------- Ficha individual ---------- */
.kv-ficha {
    max-width: 820px;
    margin: 0 auto;
    padding: 30px 18px 60px;
    text-align: left;
}
.kv-ficha h2 {
    padding: 0;
    margin: 0 0 4px;
    font-size: 1.7rem;
    font-weight: 700;
    color: #414042;
    text-transform: none;
}
.kv-ficha-sub {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 300;
    color: #8a8a8a;
}
.kv-bloque {
    padding: 22px 0;
    border-top: 1px solid #ededed;
}
.kv-bloque:first-of-type { border-top: none; padding-top: 6px; }
.kv-bloque h3 {
    margin: 0 0 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ad855d;
}
.kv-bloque p {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: #4f4f4f;
}
.kv-bloque p img { max-width: 100%; height: auto; }
.kv-bloque ul, .kv-bloque ol {
    margin: 0 0 10px;
    padding-left: 22px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: #4f4f4f;
}
.kv-dato {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    font-size: 14.5px;
    font-weight: 300;
    color: #4f4f4f;
}
.kv-dato-rotulo {
    flex: 0 0 100px;
    font-weight: 700;
    font-size: 12.5px;
    color: #8a8a8a;
    padding-top: 2px;
}
.kv-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 4px;
}
.kv-enlace {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #4f4f4f;
    background: #fff;
    transition: all .2s ease-in-out;
}
.kv-enlace:hover { border-color: #ad855d; color: #a86625; }
.kv-enlace-fuerte { background: #ad855d; border-color: #ad855d; color: #fff; }
.kv-enlace-fuerte:hover { background: #a86625; border-color: #a86625; color: #fff; }
.kv-mapa {
    width: 100%;
    height: 300px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    margin-top: 12px;
}
.kv-volver {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 13px;
    color: #777;
}
.kv-volver:hover { color: #ad855d; }

@media only screen and (max-width: 700px) {
    .kv-estab { padding: 18px 12px 40px; }
    .kv-filtros { padding: 12px; }
    .kv-select { flex: 1 1 100%; }
    .kv-btn { flex: 1 1 100%; }
    .kv-tarjetas { grid-template-columns: 1fr; }
    .kv-ficha { padding: 20px 14px 40px; }
    .kv-ficha h2 { font-size: 1.35rem; }
    .kv-dato { flex-direction: column; gap: 2px; }
    .kv-dato-rotulo { flex: none; }
}