/* ── Merakira Kinesiológos — Frontend v3 ── */

/* ── Filtros ── */
.km-filtros {
    display:flex; gap:12px; flex-wrap:wrap; align-items:center;
    margin-bottom:20px; padding:16px 20px;
    background:#f8f9fc; border:1px solid #e8ecf3; border-radius:12px;
}
.km-filtro-buscar {
    position:relative; flex:1; min-width:200px;
}
.km-filtro-buscar svg {
    position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none;
}
.km-filtro-buscar input {
    width:100%; padding:10px 12px 10px 38px;
    border:1px solid #dde3f0; border-radius:8px;
    font-size:.95em; outline:none; transition:border-color .2s;
    box-sizing:border-box;
}
.km-filtro-buscar input:focus { border-color:#4a6cf7; }
.km-filtros select {
    padding:10px 14px; border:1px solid #dde3f0; border-radius:8px;
    font-size:.95em; background:#fff; cursor:pointer; outline:none;
    transition:border-color .2s;
}
.km-filtros select:focus { border-color:#4a6cf7; }
.km-filtro-denake {
    display:flex; align-items:center; gap:8px;
    background:#fff3cd; border:1px solid #ffc107; border-radius:8px;
    padding:8px 14px; cursor:pointer; font-size:.9em; color:#856404; font-weight:600;
    user-select:none; transition:background .2s;
    white-space:nowrap;
}
.km-filtro-denake:hover { background:#ffe69c; }
.km-filtro-denake input { margin:0; cursor:pointer; }
.km-resultados-info { color:#888; font-size:.88em; margin-bottom:8px; min-height:20px; }

/* ── Grilla ── */
.km-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
    gap:22px; padding:4px 0;
}
.km-no-results { color:#888; padding:24px 0; grid-column:1/-1; }
.km-card-link { text-decoration:none; color:inherit; display:block; }
.km-card {
    background:#fff; border-radius:14px;
    box-shadow:0 3px 14px rgba(0,0,0,.08);
    overflow:hidden; display:flex; flex-direction:column;
    height:100%; transition:transform .22s ease, box-shadow .22s ease;
}
.km-card-link:hover .km-card { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.13); }
.km-card-img         { width:100%; height:190px; object-fit:cover; display:block; }
.km-card-no-img      { width:100%; height:190px; background:linear-gradient(135deg,#667eea,#764ba2); display:flex; align-items:center; justify-content:center; }
.km-card-no-img span { color:#fff; font-size:50px; font-weight:700; letter-spacing:2px; }
.km-card-body        { padding:14px 16px; flex:1; display:flex; flex-direction:column; gap:6px; }
.km-card-name        { margin:0 0 2px; font-size:1.02em; font-weight:700; color:#1a1a2e; line-height:1.3; }
.km-card-denake      { display:inline-flex; align-items:center; gap:4px; background:#fff3cd; color:#856404; border:1px solid #ffc107; padding:2px 10px; border-radius:20px; font-size:.76em; font-weight:600; width:fit-content; }
.km-card-footer      { margin-top:auto; padding-top:10px; border-top:1px solid #f0f2f5; display:flex; flex-direction:column; gap:4px; }
.km-card-region,
.km-card-cat         { display:flex; align-items:center; gap:5px; font-size:.8em; color:#4a6cf7; line-height:1.3; }
.km-card-region svg,
.km-card-cat svg     { flex-shrink:0; }

/* Spinner */
.km-spinner { display:none; text-align:center; padding:40px; color:#888; }
.km-spinner.active { display:block; }

@media(max-width:640px){ .km-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; } .km-filtros{ gap:8px; } }
@media(max-width:380px){ .km-grid{ grid-template-columns:1fr; } }