/* ============================================================================ * MovilityPark · styles.css * ---------------------------------------------------------------------------- * Mobile-first, MODO OSCURO por defecto. Variables CSS con paleta accesible * (contraste AA). Safe-areas iOS, objetivos táctiles >=44px, modales * accesibles, foco visible. Estilos de marcador/cluster para Leaflet. * El modo claro se activa con .light en (toggle del perfil). * ========================================================================== */ /* --- Variables: tema oscuro (por defecto) -------------------------------- */ :root { --bg: #0b1220; --bg-elev: #131c2e; --bg-elev-2: #1c2740; --surface: #182236; --border: #2a3a57; --text: #eef2fb; /* AA sobre --bg */ --text-muted: #aab6cf; /* AA sobre --bg */ --primary: #4f9cff; --primary-ink: #07101f; /* texto sobre --primary */ --primary-hover: #6db0ff; --danger: #ff5a5a; --danger-ink: #1a0606; --success: #16a34a; --warning: #d97706; --focus: #ffd166; /* anillo de foco muy visible */ --shadow: 0 10px 30px rgba(0,0,0,.45); --radius: 14px; --radius-sm: 10px; --tap: 44px; /* objetivo táctil mínimo */ /* Safe-areas iOS (notch / barra inferior) */ --sa-top: env(safe-area-inset-top, 0px); --sa-right: env(safe-area-inset-right, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-left: env(safe-area-inset-left, 0px); --z-map: 1; --z-fabs: 600; --z-topbar: 700; --z-modal: 1000; --z-toast: 1100; } /* --- Modo claro (.light) -------------------------------------------------- */ html.light { --bg: #f4f6fb; --bg-elev: #ffffff; --bg-elev-2: #eef1f8; --surface: #ffffff; --border: #cfd7e6; --text: #10192b; --text-muted: #4a566b; --primary: #1e6fe0; --primary-ink: #ffffff; --primary-hover: #155bc0; --danger: #c81e1e; --danger-ink: #ffffff; --success: #157f3a; /* AA (>=4.5:1) como texto sobre blanco */ --focus: #b8540a; --shadow: 0 10px 30px rgba(16,25,43,.18); } /* --- Reset ligero --------------------------------------------------------- */ * { box-sizing: border-box; } /* El atributo [hidden] debe ocultar SIEMPRE, aunque la regla del elemento use display:flex/grid (que si no, gana al display:none del navegador). Arregla, p. ej., el banner "Toca el mapa para elegir la ubicación" que no se ocultaba. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; overscroll-behavior: none; } h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; } p { margin: 0 0 .6em; } img { max-width: 100%; display: block; } a { color: var(--primary); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .muted { color: var(--text-muted); } .small { font-size: .85rem; } .error { color: var(--danger); } /* --- Foco visible global -------------------------------------------------- */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; } /* ========================================================================== */ /* Barra superior + buscador */ /* ========================================================================== */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--sa-top)) calc(10px + var(--sa-right)) 8px calc(10px + var(--sa-left)); background: linear-gradient(to bottom, var(--bg-elev), color-mix(in srgb, var(--bg-elev) 88%, transparent)); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); } .topbar__brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .topbar__logo { width: 28px; height: 28px; } .topbar__title { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.2; white-space: nowrap; } /* En móvil el título de marca se oculta VISUALMENTE pero sigue en el árbol de accesibilidad (es el único

de la página): técnica visually-hidden, no display:none. */ @media (max-width: 420px) { .topbar__title { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } } .search { position: relative; flex: 1 1 auto; display: flex; gap: 6px; } .search__input { flex: 1 1 auto; min-height: var(--tap); padding: 0 12px; font-size: 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .search__input::placeholder { color: var(--text-muted); } .search__btn { flex: 0 0 auto; min-width: var(--tap); min-height: var(--tap); font-size: 1.1rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .search__results { position: absolute; top: calc(var(--tap) + 6px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 50vh; overflow-y: auto; } .search__results li { padding: 10px 12px; min-height: var(--tap); display: flex; align-items: center; border-radius: 8px; cursor: pointer; } .search__results li:hover, .search__results li:focus, .search__results li.is-active, .search__results li[aria-selected="true"] { background: var(--bg-elev); } /* ========================================================================== */ /* Mapa */ /* ========================================================================== */ .map-wrap { position: absolute; inset: 0; z-index: var(--z-map); } .map { position: absolute; inset: 0; background: var(--bg-elev); } /* Compensar barra superior para que los controles de Leaflet no queden tapados */ .leaflet-top { margin-top: calc(58px + var(--sa-top)); } /* ========================================================================== */ /* Botones flotantes (FAB) */ /* ========================================================================== */ .fabs { position: fixed; right: calc(12px + var(--sa-right)); bottom: calc(16px + var(--sa-bottom)); z-index: var(--z-fabs); display: flex; flex-direction: column; gap: 12px; } .fab { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.35rem; color: var(--text); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 50%; box-shadow: var(--shadow); cursor: pointer; transition: transform .08s ease, background .15s ease; } .fab:active { transform: scale(.94); } .fab--primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; width: 60px; height: 60px; font-size: 1.8rem; } .fab--primary:hover { background: var(--primary-hover); } /* Banner del modo "elegir ubicación" */ .pick-banner { position: fixed; top: calc(64px + var(--sa-top)); left: 50%; transform: translateX(-50%); z-index: var(--z-fabs); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 8px 12px; background: var(--primary); color: var(--primary-ink); border-radius: 999px; box-shadow: var(--shadow); } .pick-banner__text { font-size: .92rem; font-weight: 600; } /* ========================================================================== */ /* Botones */ /* ========================================================================== */ .btn { min-height: var(--tap); padding: 0 16px; font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; background: var(--bg-elev-2); color: var(--text); } .btn--sm { min-height: var(--tap); padding: 0 10px; font-size: .85rem; } .btn--primary { background: var(--primary); color: var(--primary-ink); } .btn--primary:hover { background: var(--primary-hover); } .btn--ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn--ghost:hover { background: var(--bg-elev); } .btn--danger { background: var(--danger); color: var(--danger-ink); } .btn[disabled] { opacity: .55; cursor: not-allowed; } .btn--active { outline: 2px solid var(--primary); } /* ========================================================================== */ /* Formularios */ /* ========================================================================== */ .field { margin-bottom: 14px; } .field__label { display: block; margin-bottom: 5px; font-weight: 600; font-size: .92rem; } .field__input { width: 100%; min-height: var(--tap); padding: 10px 12px; font-size: 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .field__input--num { max-width: 120px; } .field__input--file { padding: 9px; } textarea.field__input { resize: vertical; min-height: 64px; } .field--half { flex: 1 1 0; min-width: 0; } /* Selector de idioma del perfil: hereda .field__input (alto >=44px, colores * del tema, foco visible global). Aspecto nativo de