/* ========================================================= Mercado HN - UI Moderna (verde + naranja + blanco) Tipografías: Poppins/Roboto (puedes alternar con --font-family) ========================================================= */ /* Tipografías web (fallback si no las incluyes en ) */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Roboto:wght@300;400;600;700&display=swap'); *{ box-sizing:border-box } /* Paleta y tokens de diseño (pueden sobreescribirse desde PHP con style :root {...}) */ :root{ /* Tema principal */ --color-primary:#1B5E20; /* Verde */ --color-secondary:#FF6F00; /* Naranja */ --color-bg:#FFFFFF; --gradient-from:#1B5E20; --gradient-to:#43A047; /* Compat con tu CSS anterior */ --brand:var(--color-secondary); --bg:#F7F7FB; /* Texto y superficies */ --text:#1F2937; --muted:#6B7280; --card:#FFFFFF; --surface:#FFFFFF; --surface-2:#F8FAFC; --border:#E5E7EB; /* Efectos */ --radius:16px; --shadow:0 10px 20px rgba(0,0,0,.06); /* Tipografía por defecto (cámbiala desde panel: Poppins/Roboto) */ --font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; } html,body{ height:100% } body{ margin:0; background:var(--color-bg); color:var(--text); font-family:var(--font-family); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .container{ max-width:1200px; margin:0 auto; padding:12px } /* =============================== */ /* Header / Topbar (compat actual) */ /* =============================== */ .topbar{ background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; } .topbar .container{ display:flex; align-items:center; gap:12px; padding:10px 12px; } .topbar h1{ font-size:18px; margin:0; font-weight:800; letter-spacing:.2px; color:var(--text); } .actions{ margin-left:auto; display:flex; gap:8px } /* =============================== */ /* Botones (compat + variantes) */ /* =============================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid var(--border); background:#fff; border-radius:9999px; cursor:pointer; font-weight:700; text-decoration:none; color:var(--text); transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; box-shadow:0 6px 14px rgba(0,0,0,.06); } .btn:hover{ transform:translateY(-1px) } .btn:active{ transform:translateY(0) scale(.98) } /* Compat: .btn.primary y .btn.ghost */ .btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff } .btn.primary:hover{ filter:brightness(.95) } .btn.ghost{ background:transparent } .btn.ghost:hover{ border-color:var(--color-secondary); color:var(--color-secondary) } /* Nuevas variantes (por si las necesitas) */ .btn-primary{ background:var(--color-secondary); color:#fff; border-color:var(--color-secondary) } .btn-primary:hover{ filter:brightness(.95) } .btn-secondary{ background:#fff; border-color:var(--border); color:var(--text) } .btn-secondary:hover{ border-color:var(--color-secondary); color:var(--color-secondary) } .btn-outline{ background:transparent; border-color:#fff; color:#fff } .btn-outline:hover{ background:rgba(255,255,255,.12) } /* =============================== */ /* Layout general */ /* =============================== */ .grid{ display:grid; grid-template-columns:320px 1fr; gap:16px; } @media (max-width: 980px){ .grid{ grid-template-columns:1fr } } /* Panel lateral (filtros) */ .panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; height:fit-content; position:sticky; top:72px; /* separa del topbar */ box-shadow:var(--shadow); } .panel h3{ margin:0 0 8px; font-size:18px; font-weight:800 } .panel label{ display:block; margin:12px 0 6px; font-weight:700 } .panel input, .panel select{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff; outline:none; transition:border-color .2s ease, box-shadow .2s ease; } .panel input:focus, .panel select:focus{ border-color:color-mix(in oklab, var(--color-secondary) 60%, #ffffff 40%); box-shadow:0 0 0 3px color-mix(in oklab, var(--color-secondary) 15%, #ffffff 85%); } .panel .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px } .panel .small{ color:var(--muted); font-size:12px } .panel .panel-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px } /* =============================== */ /* Mapa + resultados */ /* =============================== */ .map-wrap{ position:relative; min-height:70vh } #map{ height:calc(100vh - 150px); min-height:420px; border:1px solid var(--border); border-radius:20px; background:#EEF2F7; overflow:hidden; } .result-panel{ position:absolute; right:12px; top:12px; background:#fff; border:1px solid var(--border); border-radius:16px; max-height:44vh; overflow:auto; width:360px; display:none; box-shadow:var(--shadow); } .result-item{ border-bottom:1px solid var(--border); padding:10px 12px } .result-item:last-child{ border-bottom:none } @media (max-width: 900px){ .panel{ position:relative; top:auto } .result-panel{ width:auto; left:12px; right:12px } #map{ height:60vh } } /* =============================== */ /* Tarjetas/chips de comparador */ /* =============================== */ #compareList{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px } .compare-chip{ display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#FAFAFA; } .compare-chip button{ border:none; background:transparent; cursor:pointer } /* =============================== */ /* Footer */ /* =============================== */ .footer{ margin-top:12px; border-top:1px solid var(--border); padding:14px 0; color:var(--muted) } /* =============================== */ /* Popups Leaflet */ /* =============================== */ .leaflet-popup-content{ font:14px/1.4 var(--font-family) } .popup-title{ font-weight:700; margin-bottom:6px } .popup-meta{ color:#555; margin-bottom:6px } .popup-products{ margin:6px 0 8px } .popup-products li{ margin-left:16px } .popup-actions a{ display:inline-block; margin-right:8px } /* =============================== */ /* Estilos modernos extra (landing)*/ /* (opcionales si ya usas el index con hero, KPIs y toolbar de mapa) */ /* =============================== */ .site-header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border); } .nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0 } .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:800 } .brand-logo{ height:40px; width:auto; border-radius:12px } .menu a{ margin:0 8px; text-decoration:none; color:var(--text); font-weight:600 } .menu a:hover{ color:var(--color-secondary) } .header-extra{ border-top:1px solid var(--border); padding:8px 0 } /* Hero */ .hero{ background:linear-gradient(135deg, var(--gradient-from), var(--gradient-to)); color:#fff; padding:64px 0 48px; position:relative; overflow:hidden; } .hero:after{ content:''; position:absolute; right:-80px; top:-80px; width:420px; height:420px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.18), transparent); } .hero-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center } .hero-copy h1{ font-size:clamp(28px,4vw,42px); line-height:1.1; margin:0 0 10px } .hero-copy .sub{ opacity:.95; font-size:clamp(15px, 2.4vw, 18px) } .hero-cta{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap } .hero-card .card{ background:#fff; color:var(--text); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; } .checklist{ margin:0; padding:0 0 0 18px } .checklist li{ margin:8px 0 } /* KPIs */ .section{ padding:42px 0 } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; } .kpi{ text-align:center } .kpi-number{ font-weight:800; font-size:32px; color:var(--color-primary) } .kpi-label{ color:var(--muted) } /* Toolbar de mapa moderna (opcional) */ .map-toolbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin:14px 0; flex-wrap:wrap; } .input, .select{ border:1px solid var(--border); border-radius:9999px; padding:10px 14px; background:#fff; outline:none; } .input::placeholder{ color:#9aa3af } /* Marcadores emoji opcionales */ .emoji-marker .em{ font-size:26px; line-height:36px; width:36px; height:36px; text-align:center; background:#fff; border-radius:14px; box-shadow:0 8px 18px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06); transform: translateY(-4px); } .leaflet-popup-content-wrapper{ border-radius:14px } /* Responsive hero/mapa extra */ @media (max-width: 1080px){ .hero-inner{ grid-template-columns:1fr } } @media (max-width: 680px){ .grid-3{ grid-template-columns:1fr } #map{ height:56vh } }