/* ═══════════════════════════════════════════════
   AC Buscador v3.0 — Premium Search UI
   Point Web — ahorroclub.com.ar
   ═══════════════════════════════════════════════ */

:root {
    --acb: #2ecc71;
    --acb-rgb: 46,204,113;
    --acb-r: 14px;
    --acb-bg: #ffffff;
    --acb-surface: #f5f6f8;
    --acb-text: #111827;
    --acb-muted: #6b7280;
    --acb-border: #e5e7eb;
    --acb-t: .22s cubic-bezier(.4,0,.2,1);
}

.acb-wrap { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; max-width:1200px; margin:0 auto; padding:0 16px; color:var(--acb-text); -webkit-font-smoothing:antialiased; }
.acb-wrap *, .acb-wrap *::before, .acb-wrap *::after { box-sizing:border-box; }

/* ─── Search Box ──────────────────────────────── */
.acb-search-section { margin-bottom:24px; }

.acb-search-box {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.acb-input {
    width: 100%;
    height: 54px;
    padding: 0 54px 0 20px;
    font-size: 15px;
    font-weight: 400;
    color: var(--acb-text);
    background: var(--acb-surface);
    border: 2px solid transparent;
    border-radius: var(--acb-r);
    outline: none;
    transition: all var(--acb-t);
}

.acb-input::placeholder { color:var(--acb-muted); font-weight:400; }
.acb-input:hover { border-color:var(--acb-border); }
.acb-input:focus { border-color:var(--acb); background:var(--acb-bg); box-shadow:0 0 0 4px rgba(var(--acb-rgb),.1); }

.acb-search-icon {
    position: absolute;
    right: 16px;
    display: flex;
    align-items: center;
    color: var(--acb-muted);
    pointer-events: none;
    transition: color var(--acb-t);
}

.acb-input:focus ~ .acb-search-icon { color:var(--acb); }

.acb-clear {
    position: absolute;
    right: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0; margin: 0;
    font-size: 18px; font-weight: 400; line-height: 1;
    color: var(--acb-muted);
    background: var(--acb-border);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--acb-t);
}

.acb-clear:hover { background:var(--acb); color:#fff; transform:scale(1.1); }

/* ─── Zone Tabs (Tags) ───────────────────────── */
.acb-zones {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.acb-zone-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 34px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--acb-muted);
    background: var(--acb-bg);
    border: 2px solid var(--acb-border);
    border-radius: var(--acb-r);
    cursor: pointer;
    transition: all var(--acb-t);
    user-select: none;
}

.acb-zone-tab:hover { color:var(--acb); border-color:var(--acb); }
.acb-zone-tab--on { color:#fff; background:var(--acb); border-color:var(--acb); box-shadow:0 4px 16px rgba(var(--acb-rgb),.3); }
.acb-zone-tab--on:hover { filter:brightness(1.06); color:#fff; }
.acb-zone-ico { flex-shrink:0; }
.acb-zone-tab--on .acb-zone-ico { stroke:#fff; }

/* ─── Filtro Rubro Select (Desktop + Mobile) ──── */
.acb-rubros-mobile {
    display: block;
    max-width: 600px;
    margin: 14px auto 0;
}

.acb-rub-select {
    width: 100%;
    height: 54px;
    padding: 0 48px 0 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--acb-text);
    background: var(--acb-surface);
    border: 2px solid transparent;
    border-radius: var(--acb-r);
    outline: none;
    cursor: pointer;
    transition: all var(--acb-t);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}

.acb-rub-select:hover {
    border-color: var(--acb-border);
    background-color: var(--acb-bg);
}

.acb-rub-select:focus {
    border-color: var(--acb);
    background-color: var(--acb-bg);
    box-shadow: 0 0 0 4px rgba(var(--acb-rgb),.1);
}

/* ─── Meta ────────────────────────────────────── */
.acb-meta { padding:12px 0 8px; text-align:center; }
#acb-count { font-size:13px; font-weight:600; color:var(--acb-muted); letter-spacing:.02em; }

/* ─── Loader ──────────────────────────────────── */
.acb-loader { display:flex; justify-content:center; padding:48px 0; }
.acb-loader[hidden] { display:none; }
.acb-spinner { width:36px; height:36px; border:3px solid var(--acb-border); border-top-color:var(--acb); border-radius:50%; animation:acb-spin .65s linear infinite; }
@keyframes acb-spin { to { transform:rotate(360deg); } }

/* ─── Grid ────────────────────────────────────── */
.acb-grid { display:grid; gap:22px; min-height:180px; transition:opacity var(--acb-t); }
.acb-grid--c1 { grid-template-columns:1fr; }
.acb-grid--c2 { grid-template-columns:repeat(2,1fr); }
.acb-grid--c3 { grid-template-columns:repeat(3,1fr); }
.acb-grid--c4 { grid-template-columns:repeat(4,1fr); }
.acb-grid--dim { opacity:.3; pointer-events:none; }

/* ─── Card ────────────────────────────────────── */
.acb-card {
    background: var(--acb-bg);
    border-radius: var(--acb-r);
    overflow: hidden;
    border: 1px solid var(--acb-border);
    transition: all var(--acb-t);
    animation: acb-up .4s ease both;
}

@keyframes acb-up {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}

.acb-card:nth-child(1)  { animation-delay:.02s }
.acb-card:nth-child(2)  { animation-delay:.06s }
.acb-card:nth-child(3)  { animation-delay:.10s }
.acb-card:nth-child(4)  { animation-delay:.14s }
.acb-card:nth-child(5)  { animation-delay:.18s }
.acb-card:nth-child(6)  { animation-delay:.22s }
.acb-card:nth-child(7)  { animation-delay:.26s }
.acb-card:nth-child(8)  { animation-delay:.30s }
.acb-card:nth-child(9)  { animation-delay:.34s }
.acb-card:nth-child(10) { animation-delay:.38s }
.acb-card:nth-child(11) { animation-delay:.42s }
.acb-card:nth-child(12) { animation-delay:.46s }

.acb-card:hover { transform:translateY(-5px); box-shadow:0 12px 32px rgba(0,0,0,.1); border-color:rgba(var(--acb-rgb),.25); }

.acb-card-link { display:block; text-decoration:none!important; color:inherit!important; }
.acb-card-link:hover, .acb-card-link:focus { text-decoration:none!important; color:inherit!important; }

.acb-card-img { position:relative; width:100%; padding-top:62%; overflow:hidden; background:var(--acb-surface); }
.acb-card-img img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.acb-card:hover .acb-card-img img { transform:scale(1.05); }
.acb-card-noimg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--acb-border); }

.acb-badge { position:absolute; top:10px; left:10px; padding:4px 12px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--acb-text); background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:100px; }
.acb-disc { position:absolute; top:10px; right:10px; padding:5px 14px; font-size:13px; font-weight:800; color:#fff; background:var(--acb); border-radius:100px; box-shadow:0 3px 10px rgba(var(--acb-rgb),.35); }

.acb-card-body { padding:16px 18px 18px; }
.acb-card-title { margin:0 0 10px; font-size:14.5px; font-weight:700; line-height:1.35; color:var(--acb-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.acb-card-cta { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--acb); transition:gap var(--acb-t); }
.acb-card:hover .acb-card-cta { gap:9px; }

/* ─── Empty ───────────────────────────────────── */
.acb-empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; padding:56px 20px; text-align:center; }
.acb-empty p { margin:14px 0 0; font-size:15px; color:var(--acb-muted); font-weight:500; }

/* ─── Pagination ──────────────────────────────── */
.acb-pages { padding:28px 0 8px; }
.acb-pag { display:flex; align-items:center; justify-content:center; gap:6px; }
.acb-pag-btn, .acb-pag-num { display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 6px; font-size:14px; font-weight:600; color:var(--acb-muted); background:var(--acb-bg); border:1.5px solid var(--acb-border); border-radius:var(--acb-r); text-decoration:none!important; cursor:pointer; transition:all var(--acb-t); }
.acb-pag-btn:hover, .acb-pag-num:hover { color:var(--acb); border-color:var(--acb); }
.acb-pag-num--on { color:#fff!important; background:var(--acb); border-color:var(--acb); box-shadow:0 3px 10px rgba(var(--acb-rgb),.3); pointer-events:none; }
.acb-pag-dots { padding:0 4px; color:var(--acb-muted); font-weight:600; }

/* ─── Responsive ──────────────────────────────── */
@media (max-width:1024px) {
    .acb-grid--c4 { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:768px) {
    .acb-input { height:50px; font-size:14px; }
    .acb-grid--c3, .acb-grid--c4 { grid-template-columns:repeat(2,1fr); }
    .acb-grid { gap:14px; }
    .acb-zone-tab { padding:10px 24px; font-size:14px; }
    .acb-card-body { padding:14px 14px 16px; }
    .acb-card-title { font-size:13.5px; }
    .acb-rub-select { height:50px; font-size:14px; }
}

@media (max-width:480px) {
    .acb-wrap { padding:0 10px; }
    .acb-input { height:46px; font-size:13.5px; padding:0 48px 0 16px; }
    .acb-search-icon { right:14px; }
    .acb-clear { right:40px; }
    .acb-grid--c2, .acb-grid--c3, .acb-grid--c4 { grid-template-columns:1fr; }
    .acb-zone-tab { padding:10px 20px; font-size:13px; }
    .acb-card-img { padding-top:56%; }
    .acb-zones { gap:6px; }
}

/* ─── Accessibility ───────────────────────────── */
.acb-input:focus-visible, .acb-zone-tab:focus-visible, .acb-rub-btn:focus-visible,
.acb-card-link:focus-visible, .acb-pag-num:focus-visible, .acb-pag-btn:focus-visible { outline:2px solid var(--acb); outline-offset:2px; }

@media print {
    .acb-search-section, .acb-zones, .acb-rubros-mobile, .acb-pages, .acb-meta { display:none; }
    .acb-card { break-inside:avoid; box-shadow:none; border:1px solid #ccc; }
}