/* =========================================================================== EcoEsperanza — Mapa de Sensores Ambientales (explorer) Full-screen Leaflet explorer. Tokens from styles.css. Dark-mode-ready via [data-theme="dark"] on . =========================================================================== */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; background:var(--color-bg); color:var(--text-primary); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; overflow:hidden; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; } /* ---- Dark theme (scaffold — flip data-theme on ) ------------------- */ html[data-theme="dark"]{ --color-bg:#0E1A12; --color-surface:#13241A; --color-surface-sunken:#0B160F; --text-primary:#E8F1EA; --text-secondary:#A9BDB0; --text-muted:#7C9384; --border-subtle:#23382B; --border-default:#2E4636; --ink-100:#1A2C20; --ink-200:#23382B; --green-50:#16271C; --green-100:#1C3526; } .sx-root{ height:100vh; height:100dvh; display:flex; flex-direction:column; } /* ---- Top bar ------------------------------------------------------------- */ .sx-top{ height:62px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 1.2rem; background:var(--color-surface); border-bottom:1px solid var(--border-subtle); z-index:1000; } .sx-top__brand{ display:flex; align-items:center; gap:.7rem; min-width:0; } .sx-top__brand img{ height:34px; width:auto; } .sx-top__titles{ display:flex; flex-direction:column; line-height:1.1; min-width:0; } .sx-top__t{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-md); letter-spacing:var(--tracking-tight); white-space:nowrap; } .sx-top__s{ font-size:var(--text-xs); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-top__actions{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; } .sx-src{ display:inline-flex; align-items:center; gap:.45em; font-size:var(--text-xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--tracking-wide); padding:.35rem .7rem; border-radius:var(--radius-pill); white-space:nowrap; } .sx-src--live{ background:var(--green-100); color:var(--green-800); } .sx-src--seed{ background:var(--sky-100); color:var(--sky-800); } .sx-src__dot{ width:.5em; height:.5em; border-radius:50%; background:currentColor; } .sx-src--live .sx-src__dot{ animation:sxpulse 2s var(--ease-in-out) infinite; } @keyframes sxpulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.5);} } @media (prefers-reduced-motion: reduce){ .sx-src__dot{ animation:none; } } .sx-ibtn{ display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border:1px solid var(--border-subtle); background:var(--color-surface); color:var(--text-secondary); border-radius:var(--radius-md); cursor:pointer; transition:background var(--duration-fast), color var(--duration-fast); } .sx-ibtn:hover{ background:var(--green-50); color:var(--brand-primary); } .sx-ibtn svg{ width:1.15rem; height:1.15rem; } .sx-ibtn svg.spin{ animation:sxspin .8s linear infinite; } @keyframes sxspin{ to{ transform:rotate(360deg); } } .sx-back{ display:inline-flex; align-items:center; gap:.45rem; font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-secondary); padding:.5rem .9rem; border-radius:var(--radius-pill); } .sx-back:hover{ background:var(--green-50); color:var(--brand-primary); } .sx-back svg{ width:1.05em; height:1.05em; } /* ---- Body grid ----------------------------------------------------------- */ .sx-body{ flex:1; display:grid; grid-template-columns:382px 1fr; min-height:0; position:relative; } /* ---- Sidebar ------------------------------------------------------------- */ .sx-side{ display:flex; flex-direction:column; min-height:0; background:var(--color-surface); border-right:1px solid var(--border-subtle); } .sx-side__pad{ padding:1.1rem 1.1rem .8rem; display:flex; flex-direction:column; gap:.9rem; border-bottom:1px solid var(--border-subtle); } .sx-stats{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; } .sx-stat{ background:var(--color-surface-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:.7rem .8rem; } .sx-stat__v{ font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:var(--text-xl); line-height:1; } .sx-stat__l{ font-size:var(--text-xs); color:var(--text-muted); margin-top:.25rem; } .sx-stat--active .sx-stat__v{ color:var(--success); } .sx-search{ display:flex; align-items:center; gap:.55rem; background:var(--color-surface-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-pill); padding:.55rem .9rem; } .sx-search:focus-within{ border-color:var(--brand-leaf); box-shadow:0 0 0 3px var(--green-100); } .sx-search svg{ width:1.05rem; height:1.05rem; color:var(--text-muted); flex:0 0 auto; } .sx-search input{ border:none; background:none; outline:none; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-primary); width:100%; } .sx-search button{ border:none; background:none; color:var(--text-muted); cursor:pointer; display:inline-flex; } .sx-search button svg{ width:1rem; height:1rem; } /* ---- Filters ------------------------------------------------------------- */ .sx-filters{ display:flex; flex-direction:column; gap:.7rem; } .sx-flabel{ font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-muted); } .sx-chips{ display:flex; flex-wrap:wrap; gap:.4rem; } .sx-chip{ display:inline-flex; align-items:center; gap:.4em; font-size:var(--text-xs); font-weight:var(--fw-semibold); color:var(--text-secondary); background:var(--color-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-pill); padding:.35rem .7rem; cursor:pointer; transition:all var(--duration-fast); } .sx-chip svg{ width:.95em; height:.95em; } .sx-chip:hover{ border-color:var(--border-brand); color:var(--brand-primary); } .sx-chip--on{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; } .sx-row{ display:flex; gap:.6rem; } .sx-select{ flex:1; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-primary); background:var(--color-surface-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:.5rem .7rem; cursor:pointer; } .sx-seg{ display:inline-flex; background:var(--color-surface-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-pill); padding:.2rem; gap:.15rem; } .sx-seg button{ border:none; background:none; font-size:var(--text-xs); font-weight:var(--fw-semibold); color:var(--text-muted); padding:.3rem .65rem; border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap; } .sx-seg button.on{ background:var(--color-surface); color:var(--brand-primary); box-shadow:var(--shadow-xs); } /* ---- Station list -------------------------------------------------------- */ .sx-listhead{ display:flex; align-items:center; justify-content:space-between; padding:.7rem 1.1rem .4rem; font-size:var(--text-xs); color:var(--text-muted); } .sx-list{ flex:1; overflow-y:auto; padding:.2rem .7rem 1rem; display:flex; flex-direction:column; gap:.4rem; } .sx-item{ display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius:var(--radius-md); cursor:pointer; border:1px solid transparent; transition:background var(--duration-fast), border-color var(--duration-fast); } .sx-item:hover{ background:var(--green-50); } .sx-item--on{ background:var(--green-50); border-color:var(--border-brand); } .sx-item__dot{ width:.7rem; height:.7rem; border-radius:50%; flex:0 0 auto; border:2px solid var(--color-surface); box-shadow:0 0 0 1px var(--border-subtle); } .sx-item__main{ min-width:0; flex:1; } .sx-item__name{ font-weight:var(--fw-semibold); font-size:var(--text-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-item__meta{ font-size:var(--text-xs); color:var(--text-muted); font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-item__eco{ flex:0 0 auto; color:var(--gold-600); display:inline-flex; } .sx-item__eco svg{ width:1rem; height:1rem; } .sx-empty{ padding:2rem 1rem; text-align:center; color:var(--text-muted); font-size:var(--text-sm); } /* ---- Map ----------------------------------------------------------------- */ .sx-map{ position:relative; min-width:0; } .sx-map__el{ position:absolute; inset:0; background:var(--ink-100); } .sx-legend{ position:absolute; left:12px; bottom:18px; z-index:600; background:var(--color-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:.7rem .85rem; display:flex; flex-direction:column; gap:.4rem; font-size:var(--text-xs); } .sx-legend b{ font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-muted); font-weight:var(--fw-bold); } .sx-legend__row{ display:flex; align-items:center; gap:.5rem; color:var(--text-secondary); } .sx-legend__sw{ width:.8rem; height:.8rem; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--border-subtle); } .sx-loading{ position:absolute; inset:0; z-index:650; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--color-bg) 60%, transparent); backdrop-filter:blur(2px); } .sx-loading__box{ display:flex; align-items:center; gap:.7rem; background:var(--color-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-pill); padding:.7rem 1.2rem; box-shadow:var(--shadow-lg); font-weight:var(--fw-semibold); font-size:var(--text-sm); } .sx-loading__box svg{ width:1.1rem; height:1.1rem; color:var(--brand-leaf); animation:sxspin .8s linear infinite; } /* ---- Mobile drawer toggle ------------------------------------------------ */ .sx-sidetoggle{ display:none; } /* ---- Leaflet popups & clusters (brand) ----------------------------------- */ .leaflet-container{ font-family:var(--font-sans); background:var(--ink-100); } .leaflet-popup-content-wrapper{ border-radius:var(--radius-md); box-shadow:var(--shadow-lg); } .leaflet-popup-content{ margin:.8rem .95rem; line-height:1.45; } .sx-pop__name{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-md); color:var(--text-primary); } .sx-pop__eco{ display:inline-flex; align-items:center; gap:.3em; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-700); background:var(--gold-100); border-radius:var(--radius-pill); padding:.1rem .45rem; margin-left:.35rem; vertical-align:middle; } .sx-pop__meta{ font-size:12px; color:var(--text-muted); margin:.2rem 0 .55rem; } .sx-pop__sensors{ display:flex; flex-direction:column; gap:.3rem; } .sx-pop__s{ display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:13px; } .sx-pop__s b{ font-family:var(--font-mono); font-weight:600; } .sx-pop__t{ color:var(--text-secondary); } /* Hover/touch name label on markers */ .leaflet-tooltip.sx-tt{ background:var(--green-950); color:#fff; border:none; border-radius:var(--radius-sm); font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:12px; padding:.25rem .55rem; box-shadow:var(--shadow-md); } .leaflet-tooltip.sx-tt::before{ border-top-color:var(--green-950); } .marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{ background:rgba(28,110,54,.25); } .marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{ background:var(--brand-primary); color:#fff; font-family:var(--font-mono); font-weight:600; } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 860px){ .sx-body{ grid-template-columns:1fr; } .sx-side{ position:absolute; inset:0 0 0 0; z-index:800; transform:translateY(calc(100% - 132px)); transition:transform var(--duration-base) var(--ease-out); border-right:none; border-top:1px solid var(--border-subtle); border-radius:var(--radius-xl) var(--radius-xl) 0 0; box-shadow:var(--shadow-xl); } .sx-side--open{ transform:translateY(0); } .sx-sidetoggle{ display:flex; align-items:center; justify-content:center; gap:.5rem; position:absolute; top:.5rem; left:50%; transform:translateX(-50%); width:auto; padding:.3rem 1rem; height:1.7rem; border:none; background:var(--ink-200); color:var(--text-secondary); border-radius:var(--radius-pill); cursor:pointer; font-size:var(--text-xs); font-weight:var(--fw-bold); } .sx-top__s{ display:none; } }