.cerca-intro { max-width: 70ch; } .cerca-actions { margin: 1.25rem 0 1.5rem; } .cerca-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.8rem 1.4rem; font-size: 1rem; font-weight: 600; font-family: inherit; color: #fff; background: var(--brand, #0a6ebd); border: none; border-radius: var(--radius, 12px); cursor: pointer; box-shadow: 0 2px 10px rgba(10, 110, 189, 0.25); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .cerca-btn:hover { background: var(--brand-dark, #08568f); box-shadow: 0 4px 16px rgba(10, 110, 189, 0.35); transform: translateY(-1px); } .cerca-btn:active { transform: translateY(0); } .cerca-btn:focus-visible { outline: 3px solid rgba(10, 110, 189, 0.4); outline-offset: 2px; } .cerca-btn[disabled] { opacity: 0.65; cursor: progress; transform: none; } .cerca-btn svg { flex: 0 0 auto; } .cerca-btn.is-loading svg { animation: cerca-spin 0.9s linear infinite; } @keyframes cerca-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cerca-btn.is-loading svg { animation: none; } .cerca-btn { transition: none; } } .cerca-status { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--color-text-soft, #4a5b6b); min-height: 1.2em; } .cerca-status.is-error { color: #b3261e; } .cerca-status a { color: var(--brand, #0a6ebd); font-weight: 600; } .cerca-mapa { height: 60vh; min-height: 360px; border-radius: var(--radius, 12px); border: 1px solid var(--color-border, #d8e1ea); margin-bottom: 1.5rem; z-index: 0; } .cerca-popup b { font-size: 1rem; color: var(--color-text, #1a2733); } .cerca-popup .cerca-popup-dist { display: block; margin: 2px 0 4px; font-size: 0.85rem; color: var(--color-text-soft, #4a5b6b); } .cerca-popup a { color: var(--brand, #0a6ebd); font-weight: 600; text-decoration: none; } .cerca-popup a:hover { text-decoration: underline; } .cerca-user-dot { width: 18px; height: 18px; background: #1a73e8; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.35); } .cerca-lista { margin-bottom: 1.5rem; } .cerca-lista:empty { display: none; } .cerca-lista h2 { font-size: 1.25rem; margin: 0 0 0.85rem; } .cerca-lista ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .cerca-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #d8e1ea); border-radius: var(--radius, 12px); transition: border-color 0.12s ease, box-shadow 0.12s ease; } .cerca-item:hover { border-color: var(--brand, #0a6ebd); box-shadow: 0 2px 10px rgba(10, 110, 189, 0.1); } .cerca-item-rank { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; font-size: 0.85rem; font-weight: 700; color: var(--brand, #0a6ebd); background: var(--brand-soft, #e7f1fb); border-radius: 50%; } .cerca-item-body { flex: 1 1 auto; min-width: 0; } .cerca-item-nombre { display: block; font-weight: 600; color: var(--color-text, #1a2733); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cerca-item-nombre:hover { color: var(--brand, #0a6ebd); } .cerca-item-loc { display: block; font-size: 0.85rem; color: var(--color-text-soft, #4a5b6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cerca-item-dist { flex: 0 0 auto; font-weight: 700; font-size: 0.95rem; color: var(--brand, #0a6ebd); white-space: nowrap; } @media (min-width: 720px) { .cerca-lista ol { grid-template-columns: 1fr 1fr; } }