/* METME · Interfaz unificada. Cargar después de los estilos de cada módulo.
   Las mini-apps mantienen sus documentos; el mapa conserva su geometría. */
:root {
  --azul: #315bea; --azul-h: #2246c8; --marca-suave: #edf1ff;
  --lima: #315bea; --lima-txt: #fff; --verde: #16835d;
  --violeta: #7a55c7; --naranja: #bb5d16;
  --bg: #f5f7fb; --fondo: #f6f8fc; --panel: #fff; --panel-2: #fff; --campo: #f3f5f9;
  --vidrio: rgba(255,255,255,.96); --tinte: #f4f6fc; --tinte-2: #eaf0f8; --tinte-3: #dce4f0;
  --line: #e8edf5; --line-2: #d7dfec; --txt: #17233e; --txt-2: #465571; --mut: #69758b;
  --peligro: #bd3449; --peligro-suave: #fff0f2; --aviso: #936017; --aviso-suave: #fff5e1;
  --exito-suave: #eaf7f1; --info: #256c9f;
  --sh-sm: 0 2px 5px rgba(26,44,85,.025);
  --sh-md: 0 8px 28px rgba(26,44,85,.07);
  --sh-lg: 0 20px 64px rgba(26,44,85,.13);
  --sh-glow: 0 0 0 1px var(--line), 0 10px 30px rgba(26,44,85,.08);
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 26px;
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --azul: #8ba6ff; --azul-h: #b0c1ff; --marca-suave: #243354;
  --lima: #476bef; --lima-txt: #fff; --verde: #63d2a5; --violeta: #bea0f9; --naranja: #f4b47d;
  --bg: #111827; --fondo: #151e2f; --panel: #1b263b; --panel-2: #1b263b; --campo: #222f45;
  --vidrio: rgba(27,38,59,.97); --tinte: #24324a; --tinte-2: #2c3b55; --tinte-3: #354867;
  --line: #2b3850; --line-2: #3c4c68; --txt: #edf2ff; --txt-2: #c2cce0; --mut: #a0aec6;
  --peligro: #ff98a8; --peligro-suave: #3e2839; --aviso: #f3cd83; --aviso-suave: #3b3529;
  --exito-suave: #1c3b36; --info: #89c8f4;
  --sh-sm: 0 2px 5px #080e181f; --sh-md: 0 8px 28px #080e1840; --sh-lg: 0 20px 64px #080e1880;
  color-scheme: dark;
}
html, body { overflow: hidden; width: 100%; height: 100%; }
body { line-height: 1.5; }
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
input, textarea, select { accent-color: var(--azul); }
input::placeholder, textarea::placeholder { opacity: 1; color: var(--mut); }
[hidden] { display: none !important; }
::selection { background: var(--marca-suave); color: var(--txt); }

/* Barra de ciudad y búsqueda. */
.topbar { position: fixed; top: 24px; left: 136px; right: 24px; min-height: 64px; gap: 20px; padding: 10px 14px 10px 22px; background: var(--vidrio); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-md); pointer-events: auto; z-index: 30; }
.topbar:focus-within { z-index: 70; }
.topbar .brand-mini { display: none; }
.city-label { display: flex; align-items: center; gap: 10px; flex: 0 0 182px; }
.city-label > span { color: var(--azul); display: grid; place-items: center; width: 34px; height: 38px; }
.city-label small { display: block; color: var(--mut); font-size: 9px; letter-spacing: 1.5px; font-weight: 700; }
.city-label b { font-size: 14px; font-weight: 700; }
.searchwrap { max-width: 600px; margin-right: auto; }
.searchwrap input { height: 42px; border-radius: 12px; box-shadow: none; background: var(--campo); border-color: transparent; padding-right: 40px; backdrop-filter: none; }
.search-shortcut { position: absolute; right: 12px; top: 10px; border: 1px solid var(--line-2); border-radius: 5px; padding: 0 6px; font: 12px/20px var(--f-texto); color: var(--mut); background: var(--panel); pointer-events: none; }
.pill { backdrop-filter: none; box-shadow: none; }
.topbar .bell { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 12px; background: transparent; border-color: transparent; position: relative; }
.topbar .bell:hover { background: var(--campo); }
.topbar .me { padding: 0 0 0 18px; min-height: 40px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; gap: 10px; }
.topbar .avatar { width: 36px; height: 36px; background: var(--marca-suave); color: var(--azul); border: 1px solid var(--line); font-weight: 800; }
#meName { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results { padding: 8px; border-radius: 16px; max-height: min(440px, 55dvh); }
.sr-item { min-height: 62px; padding: 10px; }
.sr-item[aria-selected="true"] { background: var(--marca-suave); outline: 1px solid var(--azul); }
.sr-txt b { font-size: 14px; }
.sr-lugar .sr-txt small { font-size: 11px; }

/* Navegación: columna de escritorio, barra inferior en móvil. */
.navbar { position: fixed; left: 24px; top: 24px; bottom: 24px; width: 88px; transform: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 12px 8px; border-radius: 24px; background: var(--panel); backdrop-filter: none; box-shadow: var(--sh-md); }
.nav-brand { display: block; text-align: center; margin: 1px 0 20px; padding: 0 0 4px; text-decoration: none; font: 800 42px/1.2 var(--f-titulo); letter-spacing: -5px; color: var(--azul); }
.nav-brand span { color: #efad5b; }
.navbar button { min-width: 0; min-height: 60px; width: 100%; flex: 0 0 auto; border-radius: 15px; padding: 10px 4px; gap: 6px; font-size: 10.5px; font-weight: 700; }
.navbar button span .ico, .navbar button > .ico { width: 21px; height: 21px; }
.navbar button.crear { background: #315bea; color: white; box-shadow: 0 6px 14px #315bea30; }
.navbar button.crear span { margin: 0; width: auto; height: 21px; border: 0; border-radius: 0; background: transparent; color: inherit; box-shadow: none; }
.navbar button.crear.on, .navbar button.crear:hover { background: #2246c8; color: white; }
.navbar button.on:not(.crear) { background: var(--marca-suave); color: var(--azul); }
.navbar button.on:not(.crear)::before { content: ''; position: absolute; left: -8px; top: 20px; height: 20px; width: 3px; border-radius: 0 3px 3px 0; background: var(--azul); }
.nav-tools { display: flex; flex-direction: column; gap: 4px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 8px; }
.nav-tools button { background: transparent; }
.nav-tools small { font-size: 10px; font-weight: 600; }
.layers { position: fixed; top: 108px; bottom: auto; left: 136px; right: 90px; width: max-content; max-width: calc(100% - 226px); padding: 2px 2px 8px; gap: 8px; }
.layers button { min-height: 40px; padding: 8px 16px; font-size: 12px; background: var(--vidrio); box-shadow: var(--sh-sm); border-color: var(--line); }
.layers button.on { border-color: var(--azul); background: var(--marca-suave); color: var(--azul); box-shadow: var(--sh-sm); }
.layers button i { width: 7px; height: 7px; }
.layers button.on i { box-shadow: none; }
.fab { position: fixed; top: auto; left: auto; bottom: 206px; right: 24px; transform: none; gap: 8px; } /* encima del zoom y el crédito del mapa */
.fab button { width: 44px; height: 44px; min-width: 44px; border-radius: 14px; background: var(--panel); border-color: var(--line); box-shadow: var(--sh-md); }
.maplibregl-ctrl-bottom-right { bottom: 28px; right: 22px; }
.maplibregl-ctrl-bottom-left { left: 128px; }
.maplibregl-ctrl-group button { width: 36px; height: 36px; }
#zoomHint { top: 163px !important; box-shadow: var(--sh-md) !important; }
.map-intro { position: fixed; left: 136px; bottom: 32px; z-index: 8; padding: 26px; width: 340px; border: 1px solid var(--line); border-radius: 24px; background: var(--vidrio); box-shadow: var(--sh-md); }
.map-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 8px; font-weight: 800; letter-spacing: 1.1px; color: var(--mut); }
.map-eyebrow i, .auth-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); flex: 0 0 auto; }
.map-intro h1 { font-size: 26px; letter-spacing: -1px; line-height: 1.25; margin: 14px 0 12px; }
.map-intro p { font-size: 13px; line-height: 1.7; color: var(--mut); margin: 0 0 20px; }
.map-intro .btn { justify-content: space-between; font-size: 12px; }
.map-intro-note { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--mut); margin-top: 16px; }
.map-intro-note .ico { width: 13px; height: 13px; }

/* Paneles de detalle: espacio, lectura y controles compartidos. */
.sheet { position: fixed; top: 108px; right: 24px; bottom: 24px; height: auto; width: 440px; max-width: calc(100vw - 160px); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--sh-lg); transform: translateX(20px); opacity: 0; visibility: hidden; transition: transform .24s var(--ease), opacity .2s, visibility .2s; overflow: hidden; }
.sheet.open { transform: none; opacity: 1; visibility: visible; }
.sheet-head { padding: 20px 22px; gap: 14px; align-items: center; }
.sheet-heading { min-width: 0; flex: 1; }
.sheet-kicker { display: block; margin-bottom: 6px; font-size: 8px; font-weight: 800; letter-spacing: 1.7px; color: var(--mut); }
.sheet-head h2 { font-size: 19px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.sheet-head h2:focus { outline: none; }
.sheet-ico { width: 28px; height: 28px; border-radius: 8px; }
.sheet-body { padding: 22px; min-height: 0; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.sheet-body img { max-width: 100%; }
.sheet-body > .muted:only-child { padding: 42px 22px; min-height: 180px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--line-2); background: var(--panel); border-radius: 16px; line-height: 1.8; }
.x { width: 40px; height: 40px; background: var(--campo); border-radius: 12px; }
body:has(.sheet.open) .fab { right: 486px; }
body:has(.sheet.open) .maplibregl-ctrl-bottom-right { right: 484px; }
body:has(.sheet.open) .layers { max-width: calc(100% - 640px); }
.btn { min-height: 44px; border-radius: 12px; box-shadow: none; font-size: 13px; font-weight: 700; padding: 11px 16px; line-height: 1.4; }
.btn:hover { box-shadow: 0 4px 12px color-mix(in srgb,var(--azul) 15%,transparent); }
.btn.green { background: #315bea; color: #fff; box-shadow: none; }
.btn.green:hover { background: #2246c8; }
.btn.ghost { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--txt-2); }
:root[data-tema="oscuro"] .btn:not(.ghost):not(.green):not(.adm-btn-peligro) { color: #101a35; }
.field { margin-bottom: 18px; }
.field label { font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.field input, .field textarea, .field select, .adm-input, .sheet-body > input, .sheet-body > select { min-height: 46px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 11px; font-size: 14px; padding: 11px 13px; }
.field textarea { min-height: 106px; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus, .adm-input:focus { outline: 0; box-shadow: 0 0 0 3px var(--marca-suave); border-color: var(--azul); }
.field input[type="checkbox"], .field input[type="radio"] { min-height: 0; width: auto; }
.row2, .form-actions { gap: 10px; }
.row2 > *, .form-actions > * { min-width: 0; }
.row2 .btn { flex: 1; font-size: 12px; }
.err:not(:empty) { padding: 10px 12px; border-radius: 10px; background: var(--peligro-suave); margin-bottom: 12px; }
.err:empty { min-height: 0; margin: 0; }
.hintline { line-height: 1.6; }
.menu-title, .section-title, .comp-seccion { font-size: 10px; letter-spacing: 1.2px; margin-top: 26px; margin-bottom: 10px; }
.menu-list { box-shadow: none; border-radius: 16px; }
.menu-row { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--txt); font: inherit; padding: 15px 14px; gap: 12px; }
.menu-row .mr-ico { width: 38px; height: 38px; border-radius: 12px; }
.menu-row .mr-ico.green { background: var(--exito-suave); color: var(--verde); }
.menu-row .mr-txt b { font-size: 13px; line-height: 1.5; }
.menu-row .mr-txt small { display: block; font-size: 11px; line-height: 1.5; margin-top: 2px; }
.menu-row .mr-badge { background: var(--marca-suave); color: var(--azul); font-size: 9px; }
.profile-hero { position: relative; padding: 24px 18px; gap: 16px; margin-bottom: 14px; border: 0; background: var(--marca-suave); border-radius: 18px; align-items: flex-start; }
.profile-hero > div:last-child { min-width: 0; }
.profile-hero .ph-name { font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.profile-hero .ph-handle { margin: 5px 0 8px; font-size: 12px; }
.profile-hero .badges { gap: 4px; }
.profile-hero .badge { font-size: 9px; padding: 4px 7px; }
.av-lg { background: var(--marca-suave); color: var(--azul); box-shadow: var(--sh-sm); }
.profile-bio { padding: 16px; font-size: 13px; border-radius: 14px; }
.profile-bio.empty { font-style: normal; }
.badge, .chip2 { font-size: 11px; padding: 5px 10px; }
.badge.deporte { color: var(--verde); background: var(--exito-suave); border-color: color-mix(in srgb,var(--verde) 30%,transparent); }
.review { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin: 8px 0; padding: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.review .who { font-size: 11px; line-height: 1.6; }
.review[onclick]:hover { border-color: var(--azul); box-shadow: var(--sh-sm); }
.vacio { padding: 40px 18px; border: 1px dashed var(--line-2); background: var(--panel); border-radius: 18px; margin: 10px 0; }
.vacio-ico { width: 62px; height: 62px; border-radius: 18px; }
.vacio b { font-size: 17px; }
.vacio p { font-size: 13px; margin: 8px 0 18px; }
.tabs, .tabs2 { border-radius: 12px; gap: 4px; padding: 4px; }
.tabs button, .tabs2 button { min-height: 40px; border-radius: 9px; }
.tabs2 { overflow-x: auto; }
.tabs2 button { flex: 1 0 auto; padding: 9px 12px; }
.admin-tabs { gap: 6px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.admin-tabs button { min-height: 40px; padding: 9px 14px; border-radius: 11px; font-size: 11px; }
.adm-kpis { gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.adm-kpi { padding: 16px; box-shadow: none; }
.adm-kpi-num { color: var(--azul); font-size: 29px; margin-bottom: 4px; }
.adm-card { box-shadow: none; padding: 18px; margin: 14px 0; }
.adm-card-h { align-items: flex-start; flex-wrap: wrap; }
.adm-lista { gap: 9px; }
.adm-user { border: 1px solid var(--line); background: var(--panel); padding: 14px; border-radius: 14px; }
.adm-lista .adm-user:first-child { border-top: 1px solid var(--line); }
.adm-mini { min-height: 40px; border-radius: 9px; }
.adm-chips button { min-height: 40px; font-size: 11px; }
.adm-acciones { max-width: 100%; }
.comp-grid { gap: 12px; }
.comp-card, .comp-card.miniapp { border-radius: 16px; padding: 16px; box-shadow: none; background: var(--panel); flex-wrap: wrap; }
.comp-ico { border-radius: 12px; }
.comp-txt { flex-basis: 180px; }
.comp-txt b { font-size: 14px; }
.comp-txt small { font-size: 12px; }
.comp-card .btn { margin-left: auto; }
.comp-card.miniapp .comp-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--marca-suave); color: var(--azul); box-shadow: none; }
.comp-instalada { display: inline-block; margin: 4px 0 0; }
.event-card { padding: 12px; border-radius: 16px; gap: 13px; box-shadow: none; }
.event-card .ev-title { font-size: 15px; white-space: normal; line-height: 1.4; }
.event-card .ev-row { font-size: 11px; flex-wrap: wrap; }
.prod-grid { gap: 12px; }
.prod-card { border-radius: 16px; box-shadow: none; }
.prod-card .pc-img { height: 132px; }
.prod-card .pc-body { padding: 13px; }
.prod-card .pc-name { min-height: 36px; }
.prod-card .pc-price { color: var(--txt); margin: 8px 0 12px; }
.store-hero { padding: 10px 0 18px; }
.gc-head { border-radius: 14px; padding: 14px; }
.gc-msgs { padding: 16px 4px; gap: 12px; }
.msg .bub { padding: 11px 14px; font-size: 13px; line-height: 1.6; }
.msg.mine .bub { background: #315bea; }
.toast { position: fixed; bottom: 30px; z-index: 220; border-radius: 14px; padding: 14px 20px; font-size: 13px; }

/* Acceso: una bienvenida editorial con una ciudad dibujada en CSS. */
.auth { position: fixed; padding: 28px; gap: 7vw; align-items: center; background: var(--bg); }
.auth-story { align-self: stretch; position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 52%; max-width: 720px; min-height: 640px; padding: 36px 46px 26px; overflow: hidden; border-radius: 28px; background: #eaf0ff; color: #17233e; }
.auth-story-brand { font: 800 33px/1 var(--f-titulo); letter-spacing: -2px; }
.auth-story-brand > span { color: #315bea; }
.auth-story-brand small { display: block; font: 500 10px/1.5 var(--f-texto); letter-spacing: .2px; margin-top: 9px; color: #657699; }
.auth-story-copy { margin-top: 36px; position: relative; z-index: 2; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #526789; font-size: 9px; letter-spacing: 1.6px; font-weight: 700; }
.auth-story h2 { font-size: clamp(32px,3.5vw,54px); line-height: 1.16; margin: 18px 0; letter-spacing: -2px; }
.auth-story h2 em { font-style: normal; color: #315bea; }
.auth-story-copy p { max-width: 340px; font-size: 13px; line-height: 1.8; color: #657699; }
.auth-story-bottom { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #657699; position: relative; z-index: 2; }
.auth-scene { position: relative; height: 260px; flex: 1; min-height: 240px; max-height: 360px; margin: 15px -12px 25px; }
.scene-map { position: absolute; inset: 22% -15% 0; transform: rotate(-15deg) skew(14deg); border-radius: 30px; background: repeating-linear-gradient(0deg,transparent 0 52px,#fff 53px 62px), repeating-linear-gradient(90deg,#dce5fa 0 70px,#fff 71px 80px); box-shadow: 0 25px 0 -10px #d4def4; }
.scene-park { position: absolute; top: 2%; left: 45%; width: 26%; height: 34%; background: #c5e5cf; border: 8px solid #eaf5ea; border-radius: 45%; }
.scene-block { position: absolute; display: block; width: 46px; height: 60px; background: #c1cfee; box-shadow: -9px 10px 0 #aebfdf; border: 1px solid #e5edff; border-radius: 4px; }
.scene-block.a { top: 35%; left: 14%; }.scene-block.b { top: 58%; left: 61%; width: 63px; }.scene-block.c { top: 7%; left: 29%; height: 42px; }.scene-block.d { top: 8%; left: 82%; }
.scene-pin { position: absolute; display: grid; place-items: center; width: 58px; height: 58px; border: 5px solid white; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg); box-shadow: 0 14px 30px #28457b26; }
.scene-pin > span { transform: rotate(45deg); }
.scene-pin .ico { width: 24px; height: 24px; }
.pin-people { top: 22%; left: 24%; background: #315bea; color: white; }
.pin-place { top: 40%; right: 13%; background: #f3b969; color: #825021; width: 48px; height: 48px; }
.scene-card { position: absolute; bottom: 12%; left: 8%; right: 0; display: flex; align-items: center; gap: 12px; background: white; padding: 16px; border-radius: 16px; box-shadow: 0 12px 26px #1a2c5517; transform: rotate(-3deg); }
.scene-card-icon { display: grid; place-items: center; width: 38px; height: 38px; background: #eef2ff; color: #315bea; border-radius: 11px; flex: 0 0 auto; }
.scene-card b { display: block; font-size: 12px; }.scene-card small { display: block; margin-top: 3px; font-size: 10px; color: #69758b; }
.scene-caption { position: absolute; bottom: -5px; left: 12%; font-size: 7px; letter-spacing: 2px; color: #7b8dac; }
.auth > .card { width: 390px; padding: 24px 0; border: 0; box-shadow: none; background: transparent; flex: 0 0 auto; margin-right: 3vw; border-radius: 0; }
.auth .brand { display: none; }.auth .slogan { display: none; }
.auth-heading h2 { font-size: 32px; line-height: 1.2; letter-spacing: -1.2px; margin: 0 0 12px; }
.auth-heading p { font-size: 13px; color: var(--mut); margin: 0 0 28px; }
.auth .tabs { margin-bottom: 26px; background: var(--tinte-2); }
.auth .tabs button { font-size: 12px; min-height: 40px; }
.auth .field input { height: 48px; background: var(--panel); }
.auth .btn { min-height: 48px; }
.auth #btnLogin { justify-content: space-between; padding: 12px 18px; }
.auth #btnForgot { min-height: 40px; font-size: 11px !important; background: transparent; box-shadow: none; color: var(--mut); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--mut); font-size: 10px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: var(--line-2); flex: 1; }
.auth-footnote { display: flex; gap: 7px; align-items: center; justify-content: center; margin: 26px 0 0; color: var(--mut); font-size: 10px; }
.auth-footnote .ico { width: 13px; height: 13px; }
.onboard { position: fixed; background: #14244766; backdrop-filter: blur(12px); padding: 24px; }
.ob-card { width: 420px; padding: 32px; border-radius: 28px; box-shadow: 0 24px 80px #15244433; }
.ob-label { display: block; font-size: 9px; font-weight: 800; letter-spacing: 2px; color: var(--mut); margin-bottom: 28px; }
.ob-emoji { width: 100px; height: 100px; border-radius: 30px; margin-bottom: 25px; transform: rotate(-5deg); box-shadow: none; }
.ob-emoji .ico { transform: rotate(5deg); }
.ob-slide h2 { font-size: 28px; letter-spacing: -1px; }
.ob-slide p { font-size: 13px; line-height: 1.8; margin: 16px 0 24px; }
.ob-dots { margin-bottom: 24px; }.ob-card .btn.ghost { box-shadow: none; color: var(--mut); }

@media (min-width: 1024px) and (max-height: 730px) {
  .navbar { gap: 3px; }.navbar button { min-height: 52px; padding: 7px 4px; }.nav-brand { margin-bottom: 8px; font-size: 35px; }.nav-tools { padding-top: 4px; }
  .auth { align-items: flex-start; }.auth-story { min-height: 640px; }.auth > .card { padding-top: 16px; }
  .map-intro { padding: 20px; }.map-intro h1 { font-size: 23px; }
}
@media (min-width: 1024px) and (max-width: 1240px) {
  .city-label { flex-basis: 155px; }.topbar { gap: 12px; }#meName { display: none; }
  body:has(.sheet.open) .map-intro { display: none; }
  .auth { gap: 5vw; }.auth-story { padding: 30px; }.auth > .card { width: 350px; margin-right: 1vw; }
}
@media (max-width: 1023px) {
  .topbar { left: 18px; right: 18px; top: max(16px,env(safe-area-inset-top)); padding: 10px 14px; gap: 12px; flex-wrap: wrap; }
  .topbar .brand-mini { display: flex; border: 0; padding: 0; background: transparent; font-size: 23px; letter-spacing: -1px; min-height: 40px; gap: 8px; margin-right: auto; }
  .brand-mini .dot { color: #efad5b; }
  .city-label { flex-basis: auto; }.city-label > span { display: none; }.city-label small { font-size: 8px; }.city-label b { font-size: 12px; }
  .searchwrap { order: 4; flex: 1 1 100%; max-width: none; margin: 0; }.searchwrap input { height: 44px; }
  .topbar .me { border: 0; padding: 0; min-width: 44px; min-height: 44px; justify-content: center; }.topbar .bell { width: 44px; height: 44px; }#meName { display: none; }
  .layers, body:has(.sheet.open) .layers { top: calc(max(16px,env(safe-area-inset-top)) + 134px); left: 18px; right: 18px; max-width: calc(100% - 36px); }
  .layers button { min-height: 44px; padding: 8px 14px; }
  .navbar { top: auto; bottom: max(12px,env(safe-area-inset-bottom)); left: 50%; right: auto; transform: translateX(-50%); flex-direction: row; justify-content: space-around; width: 420px; max-width: calc(100% - 24px); height: 70px; padding: 6px; gap: 2px; border-radius: 21px; }
  .nav-brand, .nav-tools { display: none; }
  .navbar button { flex: 1; width: auto; min-height: 56px; font-size: 10px; padding: 8px 4px; border-radius: 15px; gap: 5px; }
  .navbar button.on:not(.crear)::before { display: none; }
  .navbar button.crear { margin: 0 4px; }
  .navbar button.crear span { height: 21px; }
  .navbar button i { top: 5px; right: 20%; }
  .map-intro { display: none; }
  .sheet { top: 202px; right: 18px; bottom: calc(max(12px,env(safe-area-inset-bottom)) + 84px); width: 440px; max-width: calc(100% - 36px); border-radius: 22px; transform: translateY(20px); }
  .sheet-head { padding: 17px 20px; }.sheet-body { padding: 20px; }
  .fab, body:has(.sheet.open) .fab { right: 20px; bottom: 218px; }
  body:has(.sheet.open) .fab { display: none !important; }
  .maplibregl-ctrl-bottom-right, body:has(.sheet.open) .maplibregl-ctrl-bottom-right { bottom: 92px; right: 16px; }
  body:has(.sheet.open) .maplibregl-ctrl-bottom-right { visibility: hidden; }
  .maplibregl-ctrl-bottom-left { left: 4px; bottom: 88px; }
  #zoomHint { top: 202px !important; max-width: calc(100vw - 32px); text-align: center; }
  .toast { bottom: calc(max(12px,env(safe-area-inset-bottom)) + 84px); width: max-content; max-width: calc(100vw - 32px); }
  .auth { padding: 32px; gap: 0; }.auth-story { display: none; }
  .auth > .card { width: 400px; margin: auto; padding: 16px 0; }
  .auth .brand { display: flex; margin-bottom: 34px; }.auth .brand h1::after { color: #efad5b; }
  .auth-heading h2 { font-size: 34px; }
}
@media (max-width: 560px) {
  .topbar { left: 12px; right: 12px; top: max(12px,env(safe-area-inset-top)); gap: 8px; padding: 10px 12px; border-radius: 18px; }
  .city-label { display: none; }.topbar .me { margin-left: 1px; }.topbar .avatar { width: 34px; height: 34px; }
  .searchwrap input { font-size: 14px; padding-right: 12px; }.search-shortcut { display: none; }
  .layers, body:has(.sheet.open) .layers { top: calc(max(12px,env(safe-area-inset-top)) + 124px); left: 12px; right: 12px; max-width: calc(100% - 24px); gap: 6px; }
  .layers button { font-size: 11px; min-height: 44px; padding: 8px 12px; }
  .sheet { top: calc(max(12px,env(safe-area-inset-top)) + 172px); left: 10px; right: 10px; width: auto; max-width: none; bottom: calc(max(12px,env(safe-area-inset-bottom)) + 80px); border-radius: 21px; }
  .sheet-head { padding: 15px 16px; }.sheet-head h2 { font-size: 17px; }.sheet-kicker { font-size: 7px; margin-bottom: 5px; }
  .sheet-body { padding: 16px; }.x { width: 44px; height: 44px; }
  .topbar .brand-mini .txt { display: inline; }
  .field input, .field select, .field textarea, .adm-input { font-size: 16px; }
  .profile-hero { gap: 12px; padding: 18px 14px; }.profile-hero .ph-name { font-size: 19px; }.profile-hero .av-lg { width: 54px !important; height: 54px !important; font-size: 22px; }
  .menu-row { padding: 13px 12px; gap: 10px; }.menu-row .mr-ico { width: 34px; height: 34px; }.menu-row .mr-txt small { font-size: 11px; }
  .adm-user { flex-wrap: wrap; }.adm-acciones { flex-direction: row; flex-wrap: wrap; width: 100%; padding-left: 0; }.adm-mini { flex: 1; }
  .adm-kpi { padding: 13px; }.adm-kpi-num { font-size: 26px; }.adm-card { padding: 14px; }
  .comp-card, .comp-card.miniapp { padding: 13px; gap: 10px; }.comp-txt { flex-basis: 140px; }
  .prod-card .pc-img { height: 106px; }.prod-card .pc-body { padding: 10px; }.prod-card .pc-price { font-size: 14px; }.prod-card .btn { font-size: 11px; padding: 10px 7px; }
  .auth { padding: 22px; align-items: flex-start; }.auth > .card { width: 100%; max-width: 390px; margin: auto; padding: 12px 0; }
  .auth .brand { margin-bottom: 26px; }.auth-heading h2 { font-size: 31px; }.auth-heading p { margin-bottom: 24px; }
  .auth .tabs { margin-bottom: 20px; }.auth .field { margin-bottom: 16px; }.auth-divider { margin: 16px 0; }.auth-footnote { margin-top: 18px; font-size: 9px; }
  .ob-card { padding: 26px 22px; }.ob-slide h2 { font-size: 25px; }.ob-label { margin-bottom: 22px; }
}
@media (max-height: 580px) {
  .navbar { overflow-y: auto; scrollbar-width: none; }
  .auth, .onboard { align-items: flex-start; }.auth > .card { margin: 0 auto; }
  .ob-card { margin: auto; padding: 20px; }.ob-label { margin-bottom: 12px; }.ob-emoji { width: 64px; height: 64px; margin-bottom: 12px; }.ob-slide p { margin: 10px 0 16px; }.ob-dots { margin-bottom: 14px; }
  .sheet { top: 80px; bottom: 86px; }.sheet-kicker { display: none; }.sheet-head { padding: 10px 14px; }
  body:has(.sheet.open) .layers { visibility: hidden; }
}
@media (max-height: 580px) and (max-width: 1023px) and (orientation: landscape) {
  .topbar { flex-wrap: nowrap; min-height: 58px; padding: 6px 12px; }
  .topbar .brand-mini { margin-right: 4px; flex-shrink: 0; }
  .topbar .brand-mini .txt, .city-label { display: none; }
  .searchwrap { order: 0; flex: 1 1 auto; }
  .layers, body:has(.sheet.open) .layers { top: 86px; }
  .fab { bottom: 100px; flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Capas deslizables y controles del mapa sin solaparse ----------
   La fila de capas recibe los toques para poder deslizarla con el dedo (antes
   tenía pointer-events: none y en el celular no se movía), con un degradado
   al final que indica que hay más. En pantallas estrechas la columna de
   botones flotantes se coloca por encima del zoom (+, −, brújula) y del
   crédito del mapa, que comparten la esquina inferior derecha. */
.layers {
  pointer-events: auto; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 12px;
}
.layers button { scroll-snap-align: start; }
.layers.desliza {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.layers.desliza.al-final { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 1023px) {
  .layers, body:has(.sheet.open) .layers { width: auto; padding-right: 28px; }
  .maplibregl-ctrl-bottom-right, body:has(.sheet.open) .maplibregl-ctrl-bottom-right {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px); right: 10px;
  }
  .fab, body:has(.sheet.open) .fab {
    right: 20px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px + 198px);
  }
}
@media (max-width: 560px) {
  .fab { gap: 6px; }
  .fab button { width: 42px; height: 42px; min-width: 42px; border-radius: 13px; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  /* Teléfonos bajos: la columna no cabe, los botones flotantes van en fila */
  .fab, body:has(.sheet.open) .fab { flex-direction: row; right: 66px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 138px); }
}

/* ---------- Barra superior en el computador: dos piezas flotantes ----------
   En pantallas anchas la barra de lado a lado dejaba un hueco enorme en el
   medio. Ahora son dos cápsulas: a la izquierda ciudad + buscador y a la
   derecha avisos + perfil, con el mapa visible entre ambas. La sombra va en
   la barra (drop-shadow) para que cada cápsula se vea como una sola pieza,
   sin costura entre sus partes. */
@media (min-width: 1024px) {
  .topbar {
    background: transparent; border: 0; box-shadow: none; padding: 0; gap: 0; min-height: 60px;
    align-items: stretch; pointer-events: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    filter: drop-shadow(0 6px 16px rgba(15, 23, 42, .10));
  }
  .topbar > * { pointer-events: auto; }
  .city-label, .topbar .searchwrap, .topbar .bell, .topbar .me {
    background: var(--panel); border: 1px solid var(--line); min-height: 60px; box-shadow: none;
  }
  .city-label { flex: 0 0 auto; padding: 0 20px 0 14px; border-right: 0; border-radius: 18px 0 0 18px; position: relative; }
  .city-label::after { content: ''; position: absolute; right: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
  .topbar .searchwrap { flex: 0 1 440px; max-width: 440px; margin: 0 auto 0 0; padding: 8px 9px 8px 12px; border-left: 0; border-radius: 0 18px 18px 0; display: flex; align-items: center; }
  .topbar .searchwrap .ico-buscar { left: 27px; }
  .topbar .searchwrap input { height: 42px; width: 100%; }
  .search-shortcut { right: 21px; top: 50%; transform: translateY(-50%); }
  .topbar .bell { width: 60px; height: auto; border-right: 0; border-radius: 18px 0 0 18px; }
  .topbar .bell:hover { background: var(--campo); }
  .topbar .me { padding: 0 18px 0 14px; border-left: 0; border-radius: 0 18px 18px 0; position: relative; }
  .topbar .me::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
  .topbar .me:hover { background: var(--campo); }
}
@media (min-width: 1024px) and (max-width: 1240px) {
  .topbar .searchwrap { flex-basis: 360px; }
  .city-label { padding-right: 14px; }
}

/* ---------- Logo de METME (manual de marca V1) ----------
   Met y Me, dos pines que se abrazan, y la palabra «metme.» en Nunito Black.
   Los dibujos salen de src/ui/marca.js (generado desde el PDF del manual).
   La palabra va en Noche sobre claro y en Crema sobre oscuro; el punto, coral. */
:root { --logo-tinta: #1c1633; --logo-punto: #ff5a3c; --coral: #ff5a3c; --sol: #ffc83d; --noche: #1c1633; --crema: #fff8ee; }
:root[data-tema="oscuro"] { --logo-tinta: #fff8ee; }
[data-marca] { display: inline-flex; align-items: center; }
.logo-simbolo, .logo-insignia, .logo-icono, .logo-palabra { display: block; height: 100%; width: auto; }

/* Barra superior (celular): insignia + palabra */
.topbar .brand-mini { gap: 9px; }
.brand-mini .marca, .topbar .brand-mini .marca { width: 36px; height: 36px; border-radius: 50%; background: none; box-shadow: none; }
.brand-mini .txt { height: 21px; }

/* Barra lateral (computador): icono de app */
.nav-brand { width: 52px; height: 52px; margin: 1px auto 20px; padding: 0; font-size: 0; letter-spacing: 0; border-radius: 15px; transition: transform .15s var(--ease); }
.nav-brand > span { width: 100%; height: 100%; }
.nav-brand:hover { transform: rotate(-4deg) scale(1.04); }

/* Acceso: panel de marca (computador) y cabecera del formulario (celular) */
.auth-story-brand .auth-logo { display: flex; align-items: center; gap: 12px; height: 50px; }
.auth-logo [data-marca="insignia"] { height: 50px; }
.auth-logo [data-marca="palabra"] { height: 29px; }
.auth .brand { gap: 11px; align-items: center; }
.brand .logo { width: 46px; height: 46px; border-radius: 50%; background: none; box-shadow: none; }
.brand h1 { height: 27px; font-size: 0; line-height: 0; display: flex; }
.brand h1 > span { height: 100%; }
.brand h1::after, .auth .brand h1::after { content: none; }

@media (min-width: 1024px) and (max-height: 730px) { .nav-brand { width: 46px; height: 46px; margin-bottom: 10px; } }
@media (max-width: 560px) { .brand-mini .marca, .topbar .brand-mini .marca { width: 34px; height: 34px; } .brand-mini .txt { height: 19px; } }