/* ========================================================= Buscaferias — Hoja principal Tokens y estilos derivados del handoff de diseño. ========================================================= */ :root { /* Cada token de color usa light-dark(claro, oscuro). Por defecto el sitio sigue la preferencia del sistema (color-scheme: light dark); el toggle del header fuerza el tema poniendo [data-theme] en . */ color-scheme: light dark; --bf-primary: light-dark(oklch(60% 0.17 35), oklch(68% 0.16 38)); --bf-primary-dark: light-dark(oklch(50% 0.16 35), oklch(76% 0.15 38)); --bf-primary-tint: light-dark(oklch(94% 0.03 40), oklch(33% 0.06 40)); --bf-primary-ink: light-dark(oklch(45% 0.1 35), oklch(82% 0.11 40)); --bf-secondary: light-dark(oklch(50% 0.11 150), oklch(66% 0.12 150)); --bf-secondary-tint: light-dark(oklch(94% 0.03 150), oklch(33% 0.05 150)); --bf-secondary-ink: light-dark(oklch(40% 0.1 150), oklch(83% 0.11 150)); --bf-text: light-dark(oklch(24% 0.02 50), oklch(93% 0.01 60)); --bf-muted: light-dark(oklch(52% 0.02 50), oklch(72% 0.015 60)); --bf-muted-2: light-dark(oklch(70% 0.01 50), oklch(58% 0.015 60)); --bf-border: light-dark(oklch(90% 0.012 50), oklch(34% 0.012 60)); --bf-border-strong: light-dark(oklch(85% 0.012 50), oklch(42% 0.012 60)); --bf-surface: light-dark(oklch(99% 0.004 60), oklch(26% 0.012 60)); --bf-surface-2: light-dark(oklch(95% 0.006 60), oklch(30% 0.012 60)); --bf-bg: light-dark(oklch(97% 0.008 60), oklch(20% 0.01 60)); /* Superficie "invertida" (botón oscuro, toast): contrasta siempre con el fondo. */ --bf-inverse: light-dark(oklch(24% 0.02 50), oklch(92% 0.01 60)); --bf-on-inverse: light-dark(#fff, oklch(22% 0.01 60)); --bf-star: light-dark(oklch(78% 0.14 85), oklch(82% 0.15 85)); /* Placeholder shimmer */ --bf-ph-a: light-dark(oklch(93% 0.02 40), oklch(32% 0.02 40)); --bf-ph-b: light-dark(oklch(97% 0.015 40), oklch(27% 0.02 40)); --bf-map-a: light-dark(oklch(92% 0.02 150), oklch(32% 0.02 150)); --bf-map-b: light-dark(oklch(96% 0.015 150), oklch(27% 0.02 150)); /* Radios */ --bf-r-card: 16px; --bf-r-card-lg: 20px; --bf-r-input: 10px; --bf-r-btn: 12px; --bf-r-pill: 999px; /* Sombras (más marcadas en oscuro vía el color con light-dark) */ --bf-shadow-card: 0 4px 16px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.45)); --bf-shadow-float: 0 6px 14px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55)); --bf-shadow-fab: 0 8px 20px light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.6)); /* Tipografía */ --bf-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Layout */ --bf-header-h: 72px; --bf-container: 1280px; --bf-container-narrow: 720px; } /* El toggle fuerza el tema: light-dark() se resuelve según color-scheme. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bf-bg); color: var(--bf-text); font-family: var(--bf-font); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Sticky footer: el main crece y empuja el footer al fondo aunque haya poco contenido. */ min-height: 100vh; display: flex; flex-direction: column; } #bf-main { flex: 1 0 auto; } .bf-footer { flex-shrink: 0; } img, svg { max-width: 100%; display: block; } a { color: var(--bf-primary); text-decoration: none; } a:hover { color: var(--bf-primary-dark); } /* ============ Header ============ */ .bf-header { background: var(--bf-surface); border-bottom: 1px solid var(--bf-border); position: sticky; top: 0; z-index: 30; } .bf-header__inner { max-width: var(--bf-container); margin: 0 auto; height: var(--bf-header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; gap: 24px; } .bf-logo { font-size: 21px; font-weight: 800; color: var(--bf-text); white-space: nowrap; } .bf-logo span { color: var(--bf-primary); } .bf-nav { display: flex; gap: 32px; align-items: center; font-size: 15px; font-weight: 700; color: var(--bf-muted); } .bf-nav a { color: var(--bf-muted); } .bf-nav a:hover, .bf-nav a[aria-current="page"] { color: var(--bf-text); } .bf-header__auth { display: flex; gap: 12px; align-items: center; } /* Toggle de tema claro/oscuro */ .bf-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--bf-border); border-radius: var(--bf-r-pill); background: transparent; color: var(--bf-muted); cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; flex-shrink: 0; } .bf-theme-toggle:hover { color: var(--bf-text); border-color: var(--bf-border-strong); } /* Muestra el icono del tema activo (sol = claro, luna = oscuro), respetando tanto el modo automático como el forzado por el toggle. */ .bf-theme-toggle .bf-icon-moon { display: none; } .bf-theme-toggle .bf-icon-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bf-theme-toggle .bf-icon-sun { display: none; } :root:not([data-theme="light"]) .bf-theme-toggle .bf-icon-moon { display: block; } } :root[data-theme="dark"] .bf-theme-toggle .bf-icon-sun { display: none; } :root[data-theme="dark"] .bf-theme-toggle .bf-icon-moon { display: block; } :root[data-theme="light"] .bf-theme-toggle .bf-icon-sun { display: block; } :root[data-theme="light"] .bf-theme-toggle .bf-icon-moon { display: none; } .bf-header__auth .bf-signin { font-size: 15px; font-weight: 700; color: var(--bf-text); white-space: nowrap; } @media (max-width: 860px) { .bf-nav, .bf-header__auth .bf-signin { display: none; } .bf-header__inner { padding: 0 16px; } } /* ============ Botones y chips ============ */ .bf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--bf-r-btn); padding: 12px 22px; font: 800 15px var(--bf-font); cursor: pointer; text-decoration: none; transition: background 120ms ease, transform 120ms ease; } .bf-btn--primary { background: var(--bf-primary); color: #fff; } .bf-btn--primary:hover { background: var(--bf-primary-dark); color: #fff; } .bf-btn--pill { border-radius: var(--bf-r-pill); padding: 11px 22px; font-size: 14px; } .bf-btn--ghost { background: transparent; border: 1px solid var(--bf-border); color: var(--bf-muted); font-weight: 700; } .bf-btn--dark { background: var(--bf-inverse); color: var(--bf-on-inverse); border-radius: var(--bf-r-pill); box-shadow: var(--bf-shadow-fab); padding: 12px 24px; font-size: 14px; } .bf-btn--block { width: 100%; padding: 14px; border-radius: var(--bf-r-btn); font-size: 15px; } .bf-btn:disabled { opacity: 0.6; cursor: not-allowed; } .bf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--bf-r-pill); border: 1px solid var(--bf-border); color: var(--bf-muted); background: transparent; font: 700 12px var(--bf-font); cursor: pointer; white-space: nowrap; } .bf-chip.is-selected, .bf-chip[aria-pressed="true"] { background: var(--bf-primary); color: #fff; border-color: transparent; } .bf-chip--producto.is-selected, .bf-chip--producto[aria-pressed="true"] { background: var(--bf-secondary-tint); color: var(--bf-secondary-ink); border-color: transparent; } /* ============ Hero (home) ============ */ .bf-hero { background: var(--bf-primary-tint); padding: 56px 24px; } .bf-hero__inner { max-width: var(--bf-container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .bf-hero__title { font-size: clamp(28px, 4vw, 38px); font-weight: 900; line-height: 1.15; margin: 0 0 14px; color: var(--bf-text); } .bf-hero__lead { font-size: 16px; color: var(--bf-muted); margin: 0 0 28px; } .bf-hero__mapa { height: 320px; border-radius: var(--bf-r-card-lg); overflow: hidden; } @media (max-width: 860px) { .bf-hero { padding: 20px 16px 28px; } .bf-hero__inner { grid-template-columns: 1fr; gap: 20px; } .bf-hero__mapa { height: 200px; } .bf-hero__title { font-size: 26px; } } /* ============ Searchbar pill ============ */ .bf-search { display: flex; gap: 10px; background: var(--bf-surface); padding: 8px; border-radius: var(--bf-r-card); box-shadow: var(--bf-shadow-card); max-width: 560px; align-items: stretch; } .bf-search__input { flex: 1; border: 0; background: transparent; padding: 12px 14px; font: 400 15px var(--bf-font); color: var(--bf-text); outline: none; min-width: 0; } .bf-search__input::placeholder { color: var(--bf-muted); } .bf-search__submit { border: 0; background: var(--bf-primary); color: #fff; font: 800 15px var(--bf-font); padding: 12px 24px; border-radius: var(--bf-r-btn); cursor: pointer; } .bf-geo-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: none; border: 0; color: var(--bf-secondary); font: 700 14px var(--bf-font); cursor: pointer; padding: 0; } .bf-geo-link:hover { color: var(--bf-primary-dark); } /* ============ Banner de frase (home) ============ */ .bf-banner { background: var(--bf-primary); color: #fff; padding: 40px 24px; } .bf-banner__inner { max-width: var(--bf-container-narrow); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center; } .bf-banner__heart { flex-shrink: 0; color: #fff; opacity: 0.9; } .bf-banner__text { font-size: clamp(20px, 3.2vw, 30px); font-weight: 900; line-height: 1.2; margin: 0; } @media (max-width: 560px) { .bf-banner { padding: 28px 16px; } .bf-banner__inner { flex-direction: column; gap: 10px; } } /* ============ Section titles ============ */ .bf-section { max-width: var(--bf-container); margin: 0 auto; padding: 44px 24px; } .bf-section__title { font-size: 22px; font-weight: 800; margin: 0 0 20px; color: var(--bf-text); } .bf-section__lead { font-size: 16px; color: var(--bf-muted); margin: 0 0 28px; } .bf-page-title { font-size: clamp(24px, 3vw, 30px); font-weight: 900; margin: 0 0 8px; color: var(--bf-text); } /* ============ Cards de feria ============ */ .bf-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .bf-feria-card { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-r-card); overflow: hidden; display: flex; flex-direction: column; color: inherit; transition: transform 150ms ease, box-shadow 150ms ease; } .bf-feria-card:hover { transform: translateY(-2px); box-shadow: var(--bf-shadow-card); color: inherit; } .bf-feria-card__media { height: 130px; background: repeating-linear-gradient(45deg, var(--bf-ph-a) 0 10px, var(--bf-ph-b) 10px 20px); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--bf-primary-ink); font: 700 11px 'JetBrains Mono', ui-monospace, monospace; } .bf-feria-card__body { padding: 16px; } .bf-feria-card__title { font-size: 16px; font-weight: 800; margin: 0 0 4px; color: var(--bf-text); } .bf-feria-card__meta { font-size: 13px; color: var(--bf-muted); margin: 0 0 10px; } .bf-tag-tipo { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border-radius: var(--bf-r-pill); background: var(--bf-primary-tint); color: var(--bf-primary-ink); margin-bottom: 6px; } a.bf-tag-tipo:hover { color: var(--bf-primary-dark); } .bf-tag-hoy { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border-radius: var(--bf-r-pill); background: var(--bf-secondary); color: #fff; margin-bottom: 6px; margin-left: 6px; } .bf-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bf-text); } .bf-rating svg { flex-shrink: 0; } .bf-rating__value { font-weight: 700; } .bf-rating__count { color: var(--bf-muted); font-weight: 400; } /* ============ Card lista mobile compacta ============ */ .bf-list-vertical { display: flex; flex-direction: column; gap: 12px; } .bf-list-card { display: flex; gap: 12px; border: 1px solid var(--bf-border); border-radius: 14px; padding: 10px; background: var(--bf-surface); color: inherit; } .bf-list-card__media { width: 68px; height: 68px; border-radius: 10px; flex-shrink: 0; background: repeating-linear-gradient(45deg, var(--bf-ph-a) 0 6px, var(--bf-ph-b) 6px 12px); background-size: cover; background-position: center; } .bf-list-card__body { flex: 1; min-width: 0; } .bf-list-card__title { font-size: 14px; font-weight: 800; margin: 0; color: var(--bf-text); } .bf-list-card__meta { font-size: 12px; color: var(--bf-muted); margin: 2px 0 4px; } /* ============ Resultados: sidebar + lista + mapa ============ */ .bf-results { display: grid; grid-template-columns: 240px 1fr 420px; gap: 0; max-width: 100%; min-height: calc(100vh - var(--bf-header-h)); } .bf-results__filters { border-right: 1px solid var(--bf-border); padding: 28px 22px; overflow-y: auto; background: var(--bf-surface); } .bf-results__list { padding: 28px 32px; overflow-y: auto; } .bf-results__map { background: repeating-linear-gradient(45deg, var(--bf-map-a) 0 12px, var(--bf-map-b) 12px 24px); position: relative; min-height: 300px; } .bf-filter-label { font-size: 13px; font-weight: 800; color: var(--bf-muted); text-transform: uppercase; margin: 0 0 8px; letter-spacing: 0.04em; } .bf-filter-select, .bf-input, .bf-textarea { width: 100%; border: 1px solid var(--bf-border); border-radius: var(--bf-r-input); padding: 12px 14px; font: 400 14px var(--bf-font); background: var(--bf-surface); color: var(--bf-text); outline: none; } .bf-input:focus, .bf-filter-select:focus, .bf-textarea:focus { border-color: var(--bf-primary); box-shadow: 0 0 0 3px oklch(60% 0.17 35 / 0.15); } .bf-filter-block { margin-bottom: 22px; } .bf-filter-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bf-text); cursor: pointer; padding: 4px 0; } .bf-filter-check input { width: 16px; height: 16px; accent-color: var(--bf-primary); } .bf-list-horizontal { display: flex; flex-direction: column; gap: 14px; } .bf-result-card { display: flex; gap: 16px; border: 1px solid var(--bf-border); border-radius: 14px; padding: 14px; background: var(--bf-surface); color: inherit; } .bf-result-card:hover { color: inherit; box-shadow: var(--bf-shadow-card); } .bf-result-card__media { width: 96px; height: 96px; border-radius: 10px; flex-shrink: 0; background: repeating-linear-gradient(45deg, var(--bf-ph-a) 0 8px, var(--bf-ph-b) 8px 16px); background-size: cover; background-position: center; } .bf-result-card__body { flex: 1; min-width: 0; } .bf-result-card__row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .bf-result-card__title { font-size: 16px; font-weight: 800; margin: 0; } .bf-result-card__meta { font-size: 13px; color: var(--bf-muted); margin: 4px 0; } .bf-result-card__tags { font-size: 12px; color: var(--bf-muted); margin-top: 6px; } .bf-results__count { font-size: 15px; color: var(--bf-muted); margin-bottom: 18px; } /* Chips scroll mobile en resultados */ .bf-chips-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .bf-chips-row::-webkit-scrollbar { display: none; } .bf-fab-map { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px); left: 50%; transform: translateX(-50%); z-index: 20; } @media (max-width: 1024px) { .bf-results { grid-template-columns: 1fr; } .bf-results__filters { display: none; } .bf-results__map { display: none; } .bf-results__list { padding: 16px; } } @media (min-width: 861px) { .bf-fab-map { display: none; } } /* ============ Ficha (single-feria) ============ */ .bf-feria-hero { height: 300px; background: repeating-linear-gradient(45deg, var(--bf-ph-a) 0 12px, var(--bf-ph-b) 12px 24px); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--bf-primary-ink); font: 700 12px 'JetBrains Mono', ui-monospace, monospace; } .bf-feria-hero--map { display: block; padding: 0; background: var(--bf-map-b); } .bf-feria-hero--map .leaflet-container { width: 100%; height: 100%; } @media (max-width: 860px) { .bf-feria-hero { height: 220px; } } .bf-feria-layout { max-width: var(--bf-container); margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr; gap: 40px; padding: 32px 24px 120px; align-items: flex-start; } @media (max-width: 860px) { .bf-feria-layout { grid-template-columns: 1fr; padding: 20px 16px 100px; gap: 20px; } } .bf-feria-title { font-size: clamp(22px, 3vw, 28px); font-weight: 900; margin: 0 0 6px; } .bf-feria-address { font-size: 15px; color: var(--bf-muted); margin: 0 0 10px; } .bf-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: var(--bf-r-pill); background: var(--bf-secondary-tint); color: var(--bf-secondary-ink); } .bf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; } .bf-h3 { font-size: 18px; font-weight: 800; margin: 0 0 14px; } .bf-dias { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 32px; } .bf-dia { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px var(--bf-font); border: 1px solid var(--bf-border); color: var(--bf-muted-2); } .bf-dia.is-active { background: var(--bf-primary); color: #fff; border-color: transparent; } .bf-dias__hora { margin-left: 8px; font-size: 15px; color: var(--bf-text); } /* Reseñas */ .bf-reviews { display: flex; flex-direction: column; gap: 18px; } .bf-review { display: flex; gap: 14px; } .bf-avatar { width: 40px; height: 40px; border-radius: var(--bf-r-pill); background: var(--bf-primary); color: #fff; font: 800 15px var(--bf-font); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .bf-review__head { display: flex; gap: 8px; align-items: baseline; } .bf-review__name { font-weight: 800; font-size: 14px; } .bf-review__date { font-size: 12px; color: var(--bf-muted); } .bf-review__rating { font-size: 13px; font-weight: 700; margin: 2px 0 4px; } .bf-review__comment { font-size: 14px; color: var(--bf-text); line-height: 1.5; margin: 0; } /* Sidebar sticky ficha */ .bf-sidebar { border: 1px solid var(--bf-border); border-radius: var(--bf-r-card); padding: 22px; background: var(--bf-surface); position: sticky; top: calc(var(--bf-header-h) + 16px); } .bf-sidebar__label { font-size: 13px; font-weight: 800; color: var(--bf-muted); text-transform: uppercase; margin: 0 0 8px; letter-spacing: 0.04em; } .bf-sidebar__addr { font-size: 15px; color: var(--bf-text); margin: 0 0 18px; line-height: 1.4; } .bf-sidebar__map { height: 140px; border-radius: 10px; margin-bottom: 18px; overflow: hidden; background: repeating-linear-gradient(45deg, var(--bf-map-a) 0 8px, var(--bf-map-b) 8px 16px); } .bf-sidebar__actions { display: flex; flex-direction: column; gap: 10px; } @media (max-width: 860px) { .bf-sidebar { position: static; padding: 16px; } } .bf-actions-fixed { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bf-surface); border-top: 1px solid var(--bf-border); padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; z-index: 25; } @media (min-width: 861px) { .bf-actions-fixed { display: none; } } /* ============ Bloque SEO (archivos comuna/región) ============ */ .bf-seo-intro { background: var(--bf-primary-tint); border-radius: var(--bf-r-card); padding: 18px 22px; margin: 0 0 28px; font-size: 15px; line-height: 1.6; color: var(--bf-text); } .bf-seo-intro p { margin: 0 0 8px; } .bf-seo-intro p:last-child { margin-bottom: 0; } /* ============ Directorio ============ */ .bf-directorio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .bf-directorio { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .bf-directorio { grid-template-columns: 1fr; } } .bf-region-card { border: 1px solid var(--bf-border); border-radius: 14px; padding: 20px; background: var(--bf-surface); display: flex; flex-direction: column; gap: 6px; color: inherit; } .bf-region-card:hover { border-color: var(--bf-primary); color: inherit; } .bf-region-card__head { display: flex; justify-content: space-between; align-items: center; } .bf-region-card__title { font-size: 17px; font-weight: 800; margin: 0; color: var(--bf-text); } .bf-region-card__chevron { color: var(--bf-muted-2); font-size: 20px; } .bf-region-card__meta { font-size: 13px; color: var(--bf-muted); } /* ============ Formulario "Agregar feria" ============ */ .bf-form-card { max-width: 640px; margin: 40px auto; background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 18px; padding: 36px; } @media (max-width: 640px) { .bf-form-card { margin: 16px auto 100px; padding: 20px 16px; border-radius: 14px; } } .bf-form__label { display: block; font-size: 13px; font-weight: 800; color: var(--bf-muted); margin: 0 0 6px; } .bf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; } .bf-form__field { margin-bottom: 18px; } @media (max-width: 500px) { .bf-form__row { grid-template-columns: 1fr; } } .bf-dias-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; } .bf-dia-btn { width: 42px; height: 42px; border-radius: var(--bf-r-pill); border: 1px solid var(--bf-border); background: transparent; color: var(--bf-muted-2); font: 800 12px var(--bf-font); cursor: pointer; } .bf-dia-btn[aria-pressed="true"] { background: var(--bf-primary); color: #fff; border-color: transparent; } .bf-productos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } .bf-upload { display: block; border: 2px dashed var(--bf-border-strong); border-radius: 12px; padding: 28px 20px; text-align: center; color: var(--bf-muted); margin: 0 0 12px; cursor: pointer; font-size: 13px; } .bf-upload input[type="file"] { display: none; } .bf-upload__hint { display: block; margin-top: 6px; font-size: 11px; color: var(--bf-muted-2); } .bf-form__note { font-size: 12px; color: var(--bf-muted); margin: 0 0 22px; } .bf-form__actions--sticky { position: sticky; bottom: 0; background: var(--bf-surface); padding-top: 8px; } .bf-alert { padding: 12px 14px; border-radius: var(--bf-r-input); font-size: 14px; margin: 0 0 16px; } .bf-alert--error { background: light-dark(oklch(94% 0.06 25), oklch(32% 0.08 25)); color: light-dark(oklch(35% 0.15 25), oklch(84% 0.12 25)); } .bf-alert--success { background: var(--bf-secondary-tint); color: var(--bf-secondary-ink); } /* ============ Auth (login/registro) ============ */ .bf-auth { max-width: 420px; margin: 60px auto; padding: 32px; background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 16px; } .bf-auth__title { font-size: 24px; font-weight: 900; margin: 0 0 6px; } .bf-auth__lead { font-size: 14px; color: var(--bf-muted); margin: 0 0 22px; } .bf-auth__foot { margin-top: 18px; font-size: 14px; color: var(--bf-muted); text-align: center; } /* ============ Tab bar mobile ============ */ .bf-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: var(--bf-surface); border-top: 1px solid var(--bf-border); padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; justify-content: space-around; align-items: center; } .bf-tabbar__item { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 11px var(--bf-font); color: var(--bf-muted); text-decoration: none; padding: 6px 8px; flex: 1; text-align: center; } .bf-tabbar__item[aria-current="page"] { color: var(--bf-primary); font-weight: 800; } .bf-tabbar__fab { width: 52px; height: 52px; border-radius: var(--bf-r-pill); background: var(--bf-primary); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 24px var(--bf-font); margin-top: -22px; box-shadow: var(--bf-shadow-float); text-decoration: none; } .bf-tabbar__fab:hover { color: #fff; background: var(--bf-primary-dark); } @media (max-width: 860px) { .bf-tabbar { display: flex; } body { padding-bottom: 72px; } } /* ============ Utilidades ============ */ .bf-container { max-width: var(--bf-container); margin: 0 auto; padding: 0 24px; } .bf-hidden-mobile { } .bf-hidden-desktop { display: none; } @media (max-width: 860px) { .bf-hidden-mobile { display: none !important; } .bf-hidden-desktop { display: initial; } } .bf-mapa { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, var(--bf-map-a) 0 12px, var(--bf-map-b) 12px 24px); border-radius: inherit; } .leaflet-container { background: var(--bf-map-b); } /* Placeholder de imagen genérico con label */ .bf-ph-label { background: light-dark(rgba(255, 255, 255, 0.85), rgba(30, 26, 22, 0.85)); padding: 6px 14px; border-radius: 8px; } /* ============ Modal ============ */ .bf-modal { position: fixed; inset: 0; /* Por encima de las capas internas de Leaflet (controles ~z-index 1000). */ z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; } .bf-modal[hidden] { display: none; } .bf-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 12, 8, 0.5); backdrop-filter: blur(2px); } .bf-modal__panel { position: relative; background: var(--bf-surface); border-radius: var(--bf-r-card); padding: 24px; width: 100%; max-width: 440px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); animation: bf-modal-in 160ms ease; } @keyframes bf-modal-in { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } } .bf-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } /* ============ Toast ============ */ .bf-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); background: var(--bf-inverse); color: var(--bf-on-inverse); font: 700 14px var(--bf-font); padding: 12px 22px; border-radius: var(--bf-r-pill); box-shadow: var(--bf-shadow-fab); z-index: 2100; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; } .bf-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* ============ Thumbnail de mapa estático ============ */ .bf-maptile { position: relative; overflow: hidden; background: var(--bf-map-b); } .bf-maptile__img { position: absolute; top: 50%; left: 50%; width: 256px; height: 256px; max-width: none; /* Los márgenes negativos (px del punto) los pone el template inline, dejando la feria centrada en el recuadro visible. */ } .bf-maptile__pin { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--bf-primary); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); z-index: 2; } /* Loader inline */ .bf-loading { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--bf-border); border-top-color: var(--bf-primary); border-radius: 50%; animation: bfspin 700ms linear infinite; } @keyframes bfspin { to { transform: rotate(360deg); } }