/* Altoke Home — todas las clases con prefijo altoke- para no chocar con
   Top Store, Elementor ni WooCommerce, como se decidió. */

.altoke-header, .altoke-header * { box-sizing: border-box; font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; }
.altoke-sr-only { position: absolute; left: -9999px; }

.altoke-header {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.altoke-header-row { display: flex; align-items: center; justify-content: space-between; }
.altoke-logo { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.02em; text-decoration: none; }
.altoke-header-icons { display: flex; align-items: center; gap: 14px; }
.altoke-icon-btn { display: flex; text-decoration: none; }

.altoke-search-form { display: flex; align-items: center; background: #fff; border-radius: 10px; overflow: hidden; height: 42px; flex-shrink: 0; }
.altoke-search-input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; padding: 0 12px; font-size: 13.5px; color: #111827; font-family: inherit; background: transparent; }
.altoke-search-input::placeholder { color: #9CA3AF; }
.altoke-search-btn { width: 42px; height: 100%; flex-shrink: 0; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }

.altoke-title-row { display: flex; align-items: center; flex-shrink: 0; }
.altoke-title-link { flex: 1; padding: 2px 10px 6px 0; border-bottom: 2px solid transparent; text-decoration: none; }
.altoke-title-link:last-child { padding: 2px 0 6px 10px; }
.altoke-title-link { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.25; }
.altoke-title-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.18); margin: 0 12px; }

.altoke-location-btn { display: flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; align-self: flex-start; flex-shrink: 0; }
.altoke-location-btn span { font-size: 11.5px; color: rgba(255,255,255,0.8); }

/* ── Buscador en vivo: dropdown de resultados bajo la barra ── */
.altoke-search-wrap { position: relative; flex-shrink: 0; }
.altoke-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    max-height: 360px;
    overflow-y: auto;
    z-index: 40;
    font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
}
.altoke-search-loading, .altoke-search-empty { padding: 16px; font-size: 12.5px; color: #9CA3AF; text-align: center; }
.altoke-search-list { display: flex; flex-direction: column; padding: 6px; }
.altoke-search-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: inherit; }
.altoke-search-item:active { background: #F3F4F6; }
.altoke-search-item-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; background: #F3F4F6 no-repeat center/cover; }
.altoke-search-item-info { min-width: 0; flex: 1; }
.altoke-search-item-name { font-size: 12.5px; font-weight: 600; color: #111827; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.altoke-search-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.altoke-search-item-price { font-size: 12.5px; font-weight: 800; color: #1DAA61; }
.altoke-search-item-store { font-size: 10px; color: #9CA3AF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Pestañas de supermercados: cada una embebe su página real ── */
.altoke-super-tabs { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; }
.altoke-super-tabs-nav { display: flex; gap: 8px; padding: 0 16px; margin: 12px 0 0; }
.altoke-super-tab {
    padding: 9px 16px;
    border: 1.5px solid #E4E7ED;
    border-radius: 20px;
    background: #fff;
    color: #6B7280;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.altoke-super-tab-panel { padding: 0; }
.altoke-super-divider { height: 3px; width: 100%; }
.altoke-super-iframe {
    display: block;
    width: 100%;
    border: none;
    background: #fff;
    height: 600px; /* alto de arranque, hasta que el JS calcule el real y lo reemplace */
}

/* ── Secciones de la página (fondo claro, fuera de la cabecera) ── */
.altoke-section { padding: 16px; box-sizing: border-box; font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; }
.altoke-section-flush { padding: 0; box-sizing: border-box; background: #fff; font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; }
.altoke-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.altoke-section-title { margin: 0 0 10px; font-size: 14.5px; font-weight: 800; color: #111827; }
.altoke-empty { color: #9CA3AF; font-size: 13px; }
.altoke-warning-box { padding: 14px 16px; border: 1.5px dashed #FDE68A; background: #FFFBEB; border-radius: 14px; font-size: 12.5px; color: #92400E; }

/* ── Botón "Ver tiendas locales" ── */
.altoke-stores-btn { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #fff; border: 1.5px solid #FF641F; border-radius: 14px; text-decoration: none; color: #FF641F; }
.altoke-stores-btn-left { display: flex; align-items: center; gap: 10px; }
.altoke-stores-btn-icon { width: 36px; height: 36px; border-radius: 10px; background: #FFF1EA; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.altoke-stores-btn-title { display: block; font-size: 13.5px; font-weight: 700; color: #111827; }
.altoke-stores-btn-sub { display: block; font-size: 11px; color: #9CA3AF; }

/* ── Grilla de productos (misma identidad visual que Altoketienda: precio
   verde de marca, botón "Consultar" en verde claro — a propósito, es el
   mismo componente en otro lugar de la app). ── */
.altoke-products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.altoke-product-card { background: #fff; border: 1px solid #E4E7ED; border-radius: 16px; overflow: hidden; position: relative; font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; }
.altoke-product-card-link { display: block; color: inherit; text-decoration: none; }
.altoke-product-thumb { width: 100%; height: 100px; background: #F3F4F6 no-repeat center/cover; }
.altoke-product-info { padding: 9px 9px 0; }
.altoke-product-name { font-size: 12.5px; font-weight: 600; color: #111827; line-height: 1.3; max-height: 32px; overflow: hidden; }
.altoke-product-price { font-size: 14.5px; font-weight: 800; color: #1DAA61; margin-top: 4px; }
.altoke-product-store { font-size: 11px; color: #6B7280; margin-top: 1px; }
.altoke-product-wa { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 8px 9px 9px; padding: 7px 0; background: #F0FAF5; color: #0F7C4E; border-radius: 10px; font-size: 11px; font-weight: 700; text-decoration: none; }

/* ── Carrusel de catálogos (contenedor real del plugin Catálogos — no se
   reestiliza acá, ese CSS es de ese plugin). Solo se le da margen. ── */
.altoke-section .scc-wrap { margin: 0 -4px; }

@media (min-width: 600px) {
    .altoke-products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
    .altoke-products-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Paginación de "Productos de comercios locales" ── */
.altoke-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.altoke-page-link { font-size: 12.5px; font-weight: 700; color: #FF641F; text-decoration: none; }
.altoke-page-current { font-size: 12px; color: #9CA3AF; }

/* ══════════════════════════════════════════════════════════════════
   v1.3.0 — Comercios + vecinos + servicios en la misma grilla.
   Filtros (Todo / Tiendas / Vecinos / Servicios) y tarjetas por tipo.
   Solo se AGREGA: las reglas de arriba no se modificaron.
   ══════════════════════════════════════════════════════════════════ */
.altoke-feed { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; transition: opacity .15s; }
.altoke-feed.is-loading { opacity: .55; pointer-events: none; }

.altoke-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.altoke-chips::-webkit-scrollbar { display: none; }
.altoke-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px;
    border: 1.5px solid #C9D1DB; border-radius: 22px; background: #fff; color: #10284A;
    font-size: 13px; font-weight: 700; text-decoration: none; line-height: 1;
}
.altoke-chip.is-active { background: #052B59; border-color: #052B59; color: #fff; }
.altoke-chip:focus-visible, .altoke-product-wa:focus-visible, .altoke-page-link:focus-visible { outline: 3px solid #1769D2; outline-offset: 2px; }
.altoke-feed-count { margin: 0 0 10px; font-size: 12.5px; color: #5B6270; }

.altoke-product-kind { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.altoke-product-card--tienda   .altoke-product-kind { color: #0E6B3B; }
.altoke-product-card--vecino   .altoke-product-kind { color: #A8360A; }
.altoke-product-card--servicio .altoke-product-kind { color: #0B4A9E; }

/* Aviso sin foto (los servicios pueden no tener): mosaico de color con un ícono */
.altoke-product-thumb--ico { display: flex; align-items: center; justify-content: center; }
.altoke-product-card--vecino   .altoke-product-thumb--ico { background: #FFF1EA; color: #A8360A; }
.altoke-product-card--servicio .altoke-product-thumb--ico { background: #E6F0FC; color: #0B4A9E; }

@media (prefers-reduced-motion: reduce) { .altoke-feed { transition: none; } }

/* ══════════════════════════════════════════════════════════════════
   v1.4.0 — Feed al azar con deslizamiento infinito (carga y avisos).
   Solo se AGREGA: las reglas de arriba no se modificaron.
   ══════════════════════════════════════════════════════════════════ */
.altoke-skel { pointer-events: none; }
.altoke-skel .altoke-product-thumb,
.altoke-skel .altoke-skel-line {
    background: linear-gradient(90deg, #E9EDF2 0%, #F4F6F9 50%, #E9EDF2 100%);
    background-size: 200% 100%;
    animation: altoke-shimmer 1.3s linear infinite;
}
.altoke-skel .altoke-product-thumb { background-image: linear-gradient(90deg, #E9EDF2 0%, #F4F6F9 50%, #E9EDF2 100%) !important; }
.altoke-skel-line { height: 12px; border-radius: 6px; margin: 8px 0; }
.altoke-skel-line--s { width: 55%; }
@keyframes altoke-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.altoke-feed-status { text-align: center; padding: 14px 8px 20px; font-size: 13px; color: #5B6270; }
.altoke-feed-status p { margin: 0; }
.altoke-feed-end { font-weight: 600; }
.altoke-feed-retry {
    min-height: 44px; padding: 0 20px; border: 1.5px solid #C9D1DB; border-radius: 22px;
    background: #fff; color: #10284A; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.altoke-feed-retry:focus-visible { outline: 3px solid #1769D2; outline-offset: 2px; }
#altoke-feed-sentinel { height: 1px; }

@media (prefers-reduced-motion: reduce) {
    .altoke-skel .altoke-product-thumb, .altoke-skel .altoke-skel-line { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   v1.5.0 — Colores editables de cada parte de la cabecera.
   Las variables --ah-* las pone la propia cabecera (desde Altoke Home → Ajustes);
   cada regla trae como respaldo el color de siempre, así que sin ajustes se ve igual.
   Solo se AGREGA: las reglas de arriba no se modificaron.
   ══════════════════════════════════════════════════════════════════ */
.altoke-header .altoke-logo { color: var(--ah-logo, #fff); }
.altoke-header .altoke-icon-btn svg { stroke: var(--ah-icons, #fff); }
.altoke-header .altoke-search-form { background: var(--ah-search-bg, #fff); }
.altoke-header .altoke-search-input { color: var(--ah-search-text, #111827); }
.altoke-header .altoke-search-input::placeholder { color: var(--ah-search-hint, #9CA3AF); }
.altoke-header .altoke-search-btn svg { stroke: var(--ah-search-icon, #fff); }
.altoke-header .altoke-title-link { color: var(--ah-title, #fff); }
.altoke-header .altoke-title-divider { background: var(--ah-divider, rgba(255,255,255,0.18)); }
.altoke-header .altoke-location-btn span { color: var(--ah-city, rgba(255,255,255,0.8)); }
.altoke-header .altoke-location-btn svg { stroke: var(--ah-city, rgba(255,255,255,0.8)); }

/* v1.6.0 — Perfiles de oficios y profesionales dentro de la grilla */
.altoke-product-card--perfil .altoke-product-kind { color: #0B4A9E; }
.altoke-product-card--perfil .altoke-product-thumb--ico { background: #E6F0FC; color: #0B4A9E; }
.altoke-product-card--perfil .altoke-product-price { color: #14532D; font-size: 14px; font-weight: 700; }
.altoke-product-card--perfil .altoke-product-wa { white-space: normal; }