﻿:root { font-family: 'Segoe UI',system-ui,sans-serif; color:#223e33; --green:#25674f; --border:#dce5df; }
* { box-sizing:border-box; }
body { overflow:hidden; }
.site-header { height:80px; display:flex; align-items:center; gap:32px; padding:0 30px; background:white; border-bottom:1px solid var(--border); position:relative; z-index:1001; }
.brand { display:flex; align-items:center; gap:10px; color:#223e33; text-decoration:none; font-weight:750; font-size:26px; line-height:1.1; }
.brand img { width:36px; height:43px; object-fit:contain; }
.brand small { display:block; font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:1.4px; margin-top:7px; }
.header-title { border-left:1px solid var(--border); padding-left:30px; font-size:13px; font-weight:600; }
.header-location { margin-left:auto; font-size:12px; color:#75867c; }.header-location i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#6d9671; margin-right:7px; }
#map { top:80px; left:360px; bottom:0; right:0; width:calc(100% - 360px); height:calc(100% - 80px); height:calc(100dvh - 80px); }
#searchBox { top:80px; left:0; bottom:0; width:360px; padding:0; border-radius:0; border-right:1px solid var(--border); background:#fff; overflow-y:auto; scrollbar-width:thin; }
#searchBox header { padding:30px 25px 22px; background:linear-gradient(120deg,#f4f7f0,#f9fbf8); }
.eyebrow { font-size:9px; letter-spacing:2px; color:#617960; }
#searchBox h1 { font-size:27px; font-weight:550; letter-spacing:-1px; line-height:1.15; margin:18px 0 12px; }
#searchBox header p { font-size:12px; color:#77867e; line-height:1.6; margin:0; }
#searchBox #panelToggle { display:none; }
#panelBody { padding:23px 25px; } #panelBody[hidden] { display:none; }
.section-title { font-size:11px; letter-spacing:1.1px; text-transform:uppercase; color:var(--green); font-weight:650; margin-bottom:18px; }
#searchBox label { display:block; font-size:12px; font-weight:500; margin-bottom:7px; }
#searchBox input,#searchBox select { font:inherit; font-size:13px; border:1px solid #d5e0d8; border-radius:6px; padding:10px 11px; width:100%; min-width:0; min-height:42px; background:white; color:#314c40; }
#searchBox select { margin-bottom:16px; } #searchBox select:disabled { background:#f4f6f4; color:#87958b; }
#searchBox button { font:inherit; font-size:12px; border:0; border-radius:6px; padding:10px 14px; min-height:42px; cursor:pointer; background:var(--green); color:white; }
#searchBox button.secondary { background:#edf3ed; border:1px solid #dbe7da; color:var(--green); width:100%; }
#searchBox button.text-button { background:transparent; padding:5px 0; min-height:34px; color:var(--green); text-decoration:underline; text-underline-offset:3px; }
#searchBox :focus-visible { outline:3px solid #9ac8a8; outline-offset:2px; }
.search-row { display:flex; gap:7px; } #parcelFilters { border-top:1px solid var(--border); margin-top:22px; padding-top:22px; }
.hint { font-size:11px; color:#78877d; line-height:1.6; margin:9px 0 0; }
#mapStatus { font-size:13px; line-height:1.65; padding:16px 0; border-top:1px solid var(--border); margin:15px 0 0; overflow-wrap:anywhere; }
.panel-footer { color:#8b978e; font-size:10px; line-height:1.8; margin:24px 0 0; }
.leaflet-top.leaflet-left { left:auto; right:0; top:74px; }.leaflet-left .leaflet-control { margin-left:0; margin-right:10px; }
.leaflet-top.leaflet-left img { display:none; }
.leaflet-control-layers,.leaflet-control-zoom { border:1px solid #d5e0d8!important; box-shadow:0 2px 8px #244c3510; border-radius:6px!important; }
.leaflet-control-layers-expanded { max-height:calc(100dvh - 180px); overflow-y:auto; max-width:300px; color:#314c40; }
.leaflet-control-layers label { padding:4px 0; }.leaflet-control-layers input { min-width:18px; min-height:18px; vertical-align:middle; accent-color:var(--green); }
.leaflet-popup-content { max-width:calc(100vw - 70px); overflow-wrap:anywhere; line-height:1.6; }
.leaflet-control-zoom a { min-width:36px; min-height:36px; line-height:36px; color:#42644b; }
@media (max-width:700px) {
 .site-header { height:64px; padding:0 16px; gap:14px; }.brand { font-size:21px; }.brand img { height:34px; width:28px; }.brand small { font-size:7px; letter-spacing:.7px; }.header-title { padding-left:14px; font-size:11px; max-width:150px; }.header-location { display:none; }
 #map { top:64px; left:0; width:100%; height:calc(100% - 64px); height:calc(100dvh - 64px); }
 #searchBox { top:76px; bottom:auto; left:12px; width:calc(100% - 76px); max-height:67dvh; border:1px solid var(--border); border-radius:10px; box-shadow:0 4px 20px #244c3520; }
 #searchBox header { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:12px 14px; }
 #searchBox h1 { font-size:19px; margin:5px 0 0; letter-spacing:-.5px; } #searchBox h1 br { display:none; }.eyebrow { font-size:8px; letter-spacing:1px; }
 #searchBox header p { display:none; } #searchBox #panelToggle { display:block; flex-shrink:0; padding:8px; min-height:36px; font-size:10px; }
 #searchBox.collapsed .eyebrow { display:none; } #searchBox.collapsed h1 { font-size:15px; margin:0; }
 #panelBody { padding:16px 14px; } #searchBox input,#searchBox select { font-size:16px; }
 .section-title { margin-bottom:12px; }.panel-footer { display:none; }
 .leaflet-control-layers-expanded { max-width:calc(100vw - 24px); max-height:65dvh; }.leaflet-control-attribution { font-size:9px; max-width:85vw; }
}
/* La marca original es horizontal. */
.brand img { width:116px; height:42px; }
@media (max-width:700px) { .brand img { width:70px; height:30px; } .brand { gap:7px; font-size:18px; }.brand small { font-size:6px; }.header-title { padding-left:10px; font-size:10px; } }
/* Barra de navegación y herramientas, esquina superior derecha. */
.leaflet-top.leaflet-right { display:flex; flex-direction:column; align-items:flex-end; }
.leaflet-top.leaflet-right .leaflet-control { float:none; clear:none; }
.map-tools { display:flex; flex-direction:column; background:white; overflow:hidden; border:1px solid #d5e0d8!important; border-radius:6px!important; box-shadow:0 2px 8px #244c3510; }
.map-tools button { display:flex; align-items:center; justify-content:center; width:36px; height:38px; background:white; border:0; border-bottom:1px solid #e4ebe5; color:#42644b; cursor:pointer; }
.map-tools button:last-child { border-bottom:0; }.map-tools button:hover { background:#f0f5ef; }.map-tools button[aria-pressed=true] { background:#25674f; color:white; }
.map-tools svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.map-tools button:focus-visible,.map-tool-panel :focus-visible { outline:3px solid #9ac8a8; outline-offset:-3px; }
.map-tool-panel { position:absolute; top:0; right:56px; width:290px; padding:16px; background:white; border:1px solid #dce5df; border-radius:10px; box-shadow:0 4px 20px #244c3520; font-family:'Segoe UI',system-ui,sans-serif; color:#223e33; }
.map-tool-panel[hidden],.map-tool-panel [hidden] { display:none!important; }
.tool-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.tool-heading h2 { font-size:16px; margin:0; }
.map-tool-panel button { cursor:pointer; min-height:36px; border:1px solid #dce5df; border-radius:5px; background:#edf3ed; color:#25674f; padding:6px 10px; font:inherit; font-size:12px; }
.map-tool-panel .tool-close { font-size:22px; background:white; border:0; padding:0 6px; min-width:32px; }
.tool-message { font-size:13px; line-height:1.5; margin:10px 0; }.tool-output { font-size:14px; line-height:1.6; font-weight:600; }
.map-tool-panel label { display:block; font-size:12px; margin-bottom:6px; }.map-tool-panel input,.map-tool-panel select { width:100%; min-height:42px; padding:8px; border:1px solid #d5e0d8; border-radius:5px; font:inherit; font-size:14px; color:#314c40; background:white; }
.measure-actions { display:flex; gap:7px; }.measure-actions .tool-finish { background:#25674f; color:white; }.map-tool-panel button:disabled { opacity:.45; cursor:default; }
.route-link { display:block; margin-top:12px; padding:10px; background:#25674f; color:white!important; text-align:center; text-decoration:none; border-radius:5px; font-size:13px; }
.tool-note { font-size:10px; color:#78877d; margin:12px 0 0; }.map-tool-active { cursor:crosshair; }.map-tool-active .leaflet-interactive { cursor:crosshair; }
@media (max-width:700px) {
 .map-tools button { height:40px; width:38px; }
 .map-tool-panel { top:78px; width:calc(100vw - 82px); max-height:calc(100dvh - 190px); overflow-y:auto; padding:12px; }
 .map-tool-panel input,.map-tool-panel select { font-size:16px; }
}
