* {
            box-sizing: border-box
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden
        }

        :root {
            --verde-900: #143d29;
            --verde-800: #1f5d3d;
            --verde-700: #2c7650;
            --verde-100: #e8f1eb;
            --ouro: #c99a24;
            --ouro-claro: #f8e8b4;
            --azul: #075eb5;
            --azul-claro: #e8f2fc;
            --laranja: #c24720;
            --branco: #fff;
            --fundo: #e3e9e4;
            --cinza-050: #fafbfa;
            --cinza-100: #eef1ef;
            --cinza-200: #d7ded9;
            --cinza-300: #b9c4bc;
            --cinza-500: #69756d;
            --cinza-700: #3a453e;
            --preto: #18211b;
            --sombra: 0 13px 36px rgba(18, 47, 31, .18);
            --fonte: "Segoe UI", Roboto, Arial, sans-serif
        }

        body {
            background: var(--fundo);
            color: var(--preto);
            font-family: var(--fonte);
            -webkit-font-smoothing: antialiased
        }

        .visually-hidden {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important
        }

        button, input, select {
            font: inherit
        }

        button {
            cursor: pointer;
            touch-action: manipulation
        }

        button:focus-visible, input:focus-visible, select:focus-visible {
            outline: 4px solid rgba(7, 94, 181, .28);
            outline-offset: 2px
        }

        .app {
            height: 100dvh;
            display: grid;
            grid-template-rows:82px minmax(0, 1fr) 36px
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 12px 24px;
            background: var(--verde-800);
            color: #fff;
            border-bottom: 5px solid var(--ouro)
        }

        .header small {
            display: block;
            margin-bottom: 3px;
            color: #f1d578;
            font-size: 11px;
            font-weight: 850;
            letter-spacing: 1.7px;
            text-transform: uppercase
        }

        .header h1 {
            margin: 0;
            font-size: 27px;
            line-height: 1;
            font-weight: 850
        }

        .header-meta {
            display: flex;
            align-items: center;
            gap: 13px
        }

        .date-time {
            display: grid;
            justify-items: end;
            line-height: 1
        }

        .date-display {
            margin-bottom: 5px;
            color: #fff;
            font-size: 12px;
            font-weight: 750;
            white-space: nowrap
        }

        .origin-header {
            padding: 8px 12px;
            border: 1px solid rgba(255, 255, 255, .28);
            border-radius: 10px;
            color: #e6f0e9;
            font-size: 12px;
            font-weight: 750
        }

        .clock {
            min-width: 78px;
            text-align: right;
            color: #f1d578;
            font-size: 26px;
            font-weight: 850
        }

        .main {
            min-width: 0;
            min-height: 0;
            display: grid;
            grid-template-columns:360px minmax(0, 1fr);
            grid-template-rows:auto minmax(0, 1fr)
        }

        .sidebar {
            grid-column:1;
            grid-row:2;
            min-height: 0;
            display: grid;
            grid-template-rows:auto minmax(0, 1fr) auto;
            background: #fff;
            border-right: 1px solid var(--cinza-200);
            box-shadow: 8px 0 26px rgba(18, 47, 31, .08);
            z-index: 3
        }

        .search-area {
            grid-column:1;
            grid-row:1;
            padding: 15px;
            border-right: 1px solid var(--cinza-200);
            border-bottom: 1px solid var(--cinza-200);
            background: #fff;
            z-index: 4
        }

        .search-area h2 {
            margin: 0 0 4px;
            color: var(--verde-800);
            font-size: 20px;
            font-weight: 850
        }

        .search-area p {
            margin: 0 0 11px;
            color: var(--cinza-500);
            font-size: 12px;
            line-height: 1.35
        }

        .search-box {
            display: grid;
            grid-template-columns:44px minmax(0, 1fr) 44px;
            align-items: center;
            height: 52px;
            border: 2px solid var(--cinza-200);
            border-radius: 14px;
            background: var(--cinza-050)
        }

        .search-box:focus-within {
            border-color: var(--verde-700);
            background: #fff
        }

        .search-icon {
            display: grid;
            place-items: center;
            color: var(--verde-800);
            font-size: 23px
        }

        #searchInput {
            width: 100%;
            height: 46px;
            border: 0;
            outline: 0;
            background: transparent;
            color: var(--preto);
            font-size: 15px;
            font-weight: 650
        }

        #searchInput::placeholder {
            color: var(--cinza-500);
            font-weight: 500
        }

        .clear-button {
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: var(--cinza-500);
            font-size: 22px;
            visibility: hidden
        }

        .clear-button.visible {
            visibility: visible
        }

        .clear-button:hover {
            background: var(--verde-100);
            color: var(--verde-800)
        }

        .search-actions {
            display: grid;
            grid-template-columns:1fr 1fr;
            gap: 8px
        }

        .sidebar-tools {
            padding: 10px 15px;
            border-bottom: 1px solid var(--cinza-200);
            background: #fff
        }

        .secondary-button {
            min-height: 44px;
            padding: 0 10px;
            border: 1px solid var(--cinza-300);
            border-radius: 10px;
            background: #fff;
            color: var(--verde-800);
            font-size: 12px;
            font-weight: 800
        }

        .secondary-button:hover {
            background: var(--verde-100)
        }

        .origin-card {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-top: 10px;
            padding: 9px 11px;
            border-radius: 11px;
            background: var(--azul-claro);
            color: var(--azul);
            font-size: 12px;
            font-weight: 750
        }

        .origin-controls {
            display: grid;
            gap: 7px;
            margin-top: 10px
        }

        .origin-label {
            color: var(--cinza-700);
            font-size: 11px;
            font-weight: 850;
            letter-spacing: .45px;
            text-transform: uppercase
        }

        .origin-control-row {
            display: grid;
            grid-template-columns:minmax(0, 1fr) auto;
            gap: 7px
        }

        .origin-select {
            min-width: 0;
            height: 44px;
            padding: 0 34px 0 10px;
            border: 1px solid var(--cinza-300);
            border-radius: 10px;
            background: #fff;
            color: var(--preto);
            font-size: 13px;
            font-weight: 750
        }

        .location-button {
            min-width: 104px
        }

        .location-button[aria-busy="true"] {
            cursor: progress;
            opacity: .72
        }

        .location-status {
            margin: 0;
            color: var(--cinza-500);
            font-size: 11px;
            line-height: 1.35
        }

        .location-status:empty {
            display: none
        }

        .mobile-tabs {
            display: none
        }

        .origin-dot {
            width: 12px;
            height: 12px;
            border: 3px solid #fff;
            border-radius: 50%;
            background: var(--azul);
            box-shadow: 0 0 0 2px var(--azul);
            flex: 0 0 auto
        }

        .results-area {
            min-height: 0;
            overflow: auto;
            padding: 12px;
            background: #fbfcfb
        }

        .results-area::-webkit-scrollbar {
            width: 6px
        }

        .results-area::-webkit-scrollbar-thumb {
            background: var(--cinza-300);
            border-radius: 8px
        }

        .results-header {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 9px;
            padding: 0 3px;
            color: var(--cinza-500);
            font-size: 11px;
            font-weight: 850;
            letter-spacing: .7px;
            text-transform: uppercase
        }

        .result-card {
            width: 100%;
            display: grid;
            grid-template-columns:58px minmax(0, 1fr);
            gap: 10px;
            margin: 0 0 8px;
            padding: 10px;
            border: 1px solid var(--cinza-200);
            border-radius: 12px;
            background: #fff;
            text-align: left
        }

        .result-card:hover, .result-card.selected {
            border-color: var(--verde-700);
            background: #f5f8f6
        }

        .result-card.selected {
            box-shadow: inset 4px 0 0 var(--laranja)
        }

        .result-number {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 52px;
            border-radius: 9px;
            background: var(--verde-800);
            color: #fff;
            line-height: 1
        }

        .result-card.selected .result-number {
            background: var(--laranja)
        }

        .result-number small {
            margin-bottom: 3px;
            font-size: 8px;
            font-weight: 850;
            letter-spacing: .6px
        }

        .result-number strong {
            font-size: 19px
        }

        .result-name {
            display: block;
            color: var(--preto);
            font-size: 13px;
            font-weight: 850;
            line-height: 1.25
        }

        .result-meta {
            display: block;
            margin-top: 4px;
            color: var(--cinza-500);
            font-size: 11px;
            line-height: 1.35
        }

        .result-product {
            display: block;
            margin-top: 5px;
            color: var(--verde-800);
            font-size: 10px;
            font-weight: 750;
            line-height: 1.35
        }

        .empty-state {
            padding: 30px 18px;
            text-align: center;
            color: var(--cinza-500);
            font-size: 13px;
            line-height: 1.5
        }

        .empty-state strong {
            display: block;
            margin-bottom: 4px;
            color: var(--verde-800);
            font-size: 15px
        }

        .selected-panel {
            display: none;
            padding: 14px;
            border-top: 1px solid var(--cinza-200);
            background: #fff
        }

        .selected-panel.open {
            display: block
        }

        .selected-heading {
            display: flex;
            align-items: flex-start;
            gap: 11px
        }

        .selected-number {
            min-width: 64px;
            height: 64px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: var(--laranja);
            color: #fff;
            line-height: 1
        }

        .selected-number small {
            margin-bottom: 3px;
            font-size: 8px;
            font-weight: 850;
            letter-spacing: .7px
        }

        .selected-number strong {
            font-size: 25px
        }

        .selected-title {
            min-width: 0;
            margin: 1px 0 4px;
            color: var(--preto);
            font-size: 16px;
            font-weight: 850;
            line-height: 1.2
        }

        .selected-meta {
            color: var(--cinza-500);
            font-size: 11px;
            line-height: 1.4
        }

        .selected-products {
            display: -webkit-box;
            margin: 9px 0 0;
            overflow: hidden;
            color: var(--cinza-700);
            font-size: 11px;
            line-height: 1.4;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical
        }

        .selected-actions {
            display: grid;
            grid-template-columns:1fr 1fr;
            gap: 8px;
            margin-top: 11px
        }

        .primary-button {
            min-height: 44px;
            padding: 0 10px;
            border: 1px solid var(--verde-800);
            border-radius: 10px;
            background: var(--verde-800);
            color: #fff;
            font-size: 12px;
            font-weight: 850
        }

        .primary-button:hover {
            background: var(--verde-700)
        }

        .keyboard {
            display: none;
            padding: 10px 12px 12px;
            border-top: 1px solid var(--cinza-200);
            background: #eef2ef
        }

        .keyboard.open {
            display: block
        }

        .keyboard-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 7px;
            color: var(--cinza-500);
            font-size: 10px;
            font-weight: 850;
            letter-spacing: .7px;
            text-transform: uppercase
        }

        .keyboard-close {
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 8px;
            background: #fff;
            color: var(--cinza-700);
            font-size: 18px
        }

        .keyboard-row {
            display: grid;
            gap: 4px;
            margin-bottom: 4px
        }

        .keyboard-row.row-1 {
            grid-template-columns:repeat(10, 1fr)
        }

        .keyboard-row.row-2 {
            grid-template-columns:repeat(9, 1fr)
        }

        .keyboard-row.row-3 {
            grid-template-columns:repeat(7, 1fr) 1.65fr
        }

        .key {
            min-width: 0;
            min-height: 44px;
            padding: 0 2px;
            border: 1px solid var(--cinza-300);
            border-bottom-width: 2px;
            border-radius: 6px;
            background: #fff;
            color: var(--cinza-700);
            font-size: 12px;
            font-weight: 850
        }

        .key:active {
            transform: translateY(1px);
            border-bottom-width: 1px;
            background: var(--verde-100)
        }

        .map-panel {
            grid-column:2;
            grid-row:1 / span 2;
            position: relative;
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            padding: 10px;
            background: #dfe6e0
        }

        #map {
            display: block;
            width: 100%;
            height: 100%;
            border: 2px solid #8ca092;
            border-radius: 16px;
            background: #fbfcfb;
            box-shadow: var(--sombra);
            cursor: grab;
            touch-action: none
        }

        #map.dragging {
            cursor: grabbing
        }

        .map-toolbar {
            position: absolute;
            z-index: 7;
            top: 22px;
            right: 22px;
            display: flex;
            flex-direction: column;
            gap: 7px
        }

        .map-button {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            border: 1px solid rgba(21, 62, 42, .2);
            border-radius: 12px;
            background: rgba(255, 255, 255, .97);
            color: var(--verde-800);
            box-shadow: 0 6px 18px rgba(18, 47, 31, .14);
            font-size: 22px;
            font-weight: 850
        }

        .map-button:hover {
            background: var(--verde-100)
        }

        .map-origin-label {
            position: absolute;
            z-index: 6;
            left: 24px;
            top: 22px;
            padding: 8px 12px;
            border: 2px solid var(--azul);
            border-radius: 10px;
            background: rgba(255, 255, 255, .97);
            color: var(--azul);
            box-shadow: 0 5px 16px rgba(7, 94, 181, .15);
            font-size: 12px;
            font-weight: 850;
            pointer-events: none
        }

        .footer {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 16px;
            background: var(--verde-900);
            color: #dce8e0;
            font-size: 11px;
            font-weight: 650
        }

        /* O mapa é um único SVG. Estrutura e estandes usam as mesmas coordenadas do PDF. */
        .estande {
            cursor: pointer
        }

        .estande-celula {
            fill: #fff;
            stroke: #536158;
            stroke-width: .9;
            transition: fill .15s, stroke .15s
        }

        .estande-selo {
            stroke: #3f4d44;
            stroke-width: .7
        }

        .estande-numero {
            font-family: Arial, sans-serif;
            font-weight: 700;
            text-anchor: middle;
            fill: #102016;
            pointer-events: none
        }

        .side-reference {
            fill: var(--verde-800);
            font-family: var(--fonte);
            font-size: 10px;
            font-weight: 850;
            letter-spacing: .35px;
            paint-order: stroke;
            pointer-events: none;
            stroke: #fff;
            stroke-linejoin: round;
            stroke-width: 3px
        }

        .estande:hover .estande-celula {
            fill: #e1ece4;
            stroke: var(--verde-700);
            stroke-width: 2
        }

        .estande.match .estande-celula {
            fill: var(--ouro-claro);
            stroke: var(--ouro);
            stroke-width: 2.5
        }

        .estande.selected .estande-celula {
            fill: #f4c3b4;
            stroke: #9e381b;
            stroke-width: 3.2
        }

        .estande.selected .estande-selo {
            fill: var(--laranja) !important
        }

        .estande.selected .estande-numero {
            fill: #fff
        }

        .estande.selected {
            filter: drop-shadow(0 3px 4px rgba(120, 42, 18, .38))
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                scroll-behavior: auto !important;
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important
            }
        }

        .referencia circle {
            fill: #fff;
            stroke: #2f7d52;
            stroke-width: 3
        }

        .referencia text {
            font-family: Arial, sans-serif;
            font-size: 11px;
            font-weight: 700;
            text-anchor: middle;
            fill: #17603c
        }

        .referencia.origem circle {
            fill: var(--azul);
            stroke: #fff;
            stroke-width: 4
        }

        .referencia.origem text {
            fill: var(--azul);
            stroke: #fff;
            stroke-width: 4;
            paint-order: stroke;
            font-size: 14px
        }

        .referencia-totem .totem-corpo {
            fill: #fff;
            stroke: var(--azul);
            stroke-width: 3
        }

        .referencia-totem .totem-tela {
            fill: var(--azul)
        }

        .referencia-totem .totem-base {
            fill: none;
            stroke: var(--azul);
            stroke-width: 3
        }

        .referencia-totem text {
            fill: var(--azul);
            font-size: 10px
        }

        .route-layer {
            pointer-events: none
        }

        .route-outline {
            fill: none;
            stroke: #fff;
            stroke-width: 9;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .route-line {
            fill: none;
            stroke: var(--azul);
            stroke-width: 4.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 12 8;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .24));
            animation: routeMove 1.15s linear infinite
        }

        .route-final-cue {
            stroke-dasharray: 4 3;
            animation: none
        }

        .route-walker {
            filter: drop-shadow(0 2px 2px rgba(18, 47, 31, .28))
        }

        .route-walker-layer {
            pointer-events: none
        }

        .route-walker-shape {
            fill: var(--verde-900);
            stroke: #fff;
            stroke-width: 3;
            stroke-linejoin: round;
            paint-order: stroke fill
        }

        .route-walker-limb-outline,
        .route-walker-limb-shape {
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .route-walker-limb-outline {
            stroke: #fff
        }

        .route-walker-limb-shape {
            stroke: var(--verde-900)
        }

        .route-walker-step {
            transform-box: fill-box;
            transform-origin: center;
            animation: walkerStep .6s ease-in-out infinite alternate
        }

        @keyframes walkerStep {
            to {
                transform: translateY(-1.25px)
            }
        }

        @keyframes routeMove {
            to {
                stroke-dashoffset: -24
            }
        }

        .destination-pulse {
            fill: none;
            stroke: var(--laranja);
            stroke-width: 4;
            animation: destinationPulse 1.25s ease-out infinite
        }

        @keyframes destinationPulse {
            0% {
                r: 13;
                opacity: .9
            }
            100% {
                r: 30;
                opacity: 0
            }
        }

        .tooltip {
            position: fixed;
            z-index: 100;
            display: none;
            max-width: 270px;
            padding: 9px 11px;
            border-radius: 9px;
            background: #17231b;
            color: #fff;
            box-shadow: 0 9px 28px rgba(0, 0, 0, .3);
            font-size: 11px;
            line-height: 1.4;
            pointer-events: none
        }

        @media (max-width: 1024px) {
            .main {
                grid-template-columns:1fr;
                grid-template-rows:auto auto minmax(0, 1fr)
            }

            .search-area {
                grid-column:1;
                grid-row:1;
                padding: 12px 14px;
                border-right: 0;
                box-shadow: 0 5px 16px rgba(18, 47, 31, .06)
            }

            .mobile-tabs {
                grid-column:1;
                grid-row:2;
                display: grid;
                grid-template-columns:1fr 1fr;
                gap: 4px;
                margin: 9px 12px;
                padding: 4px;
                border: 1px solid var(--cinza-200);
                border-radius: 13px;
                background: #dde5df;
                z-index: 8
            }

            .mobile-tab {
                min-height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 0 14px;
                border: 0;
                border-radius: 9px;
                background: transparent;
                color: var(--cinza-700);
                font-size: 14px;
                font-weight: 850
            }

            .mobile-tab[aria-selected="true"] {
                background: var(--verde-800);
                color: #fff;
                box-shadow: 0 3px 9px rgba(20, 61, 41, .2)
            }

            .mobile-tab-count {
                min-width: 27px;
                padding: 3px 7px;
                border-radius: 999px;
                background: rgba(255, 255, 255, .78);
                color: var(--verde-800);
                font-size: 11px;
                line-height: 1.2
            }

            .mobile-tab[aria-selected="true"] .mobile-tab-count {
                background: #fff
            }

            .sidebar, .map-panel {
                grid-column:1;
                grid-row:3
            }

            .mobile-pane:not(.is-active) {
                display: none
            }

            .sidebar.mobile-pane.is-active {
                display: grid
            }

            .map-panel.mobile-pane.is-active {
                display: block
            }

            .sidebar {
                border-right: 0;
                border-top: 1px solid var(--cinza-200);
                box-shadow: none
            }

            .map-panel {
                padding: 8px 12px 12px
            }

            #map {
                border-radius: 12px
            }

            .header h1 {
                font-size: 23px
            }

            .origin-header {
                display: none
            }
        }

        @media (max-width: 700px) {
            .app {
                grid-template-rows:auto minmax(0, 1fr) 44px
            }

            .header {
                align-items: flex-start;
                padding: max(10px, env(safe-area-inset-top)) 13px 10px
            }

            .header h1 {
                font-size: 18px
            }

            .header small {
                font-size: 9px
            }

            .header-meta {
                gap: 7px
            }

            .date-display {
                max-width: 110px;
                overflow: hidden;
                font-size: 10px;
                text-overflow: ellipsis
            }

            .clock {
                font-size: 20px
            }

            .search-area {
                padding: 10px
            }

            .search-area h2 {
                font-size: 17px
            }

            .map-toolbar {
                top: 17px;
                right: 17px
            }

            .map-button {
                width: 48px;
                height: 48px
            }

            .map-origin-label {
                display: none
            }

            .footer {
                min-height: 44px;
                padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
                text-align: center;
                line-height: 1.35
            }
        }

        @media (max-width: 420px) {
            .header {
                gap: 8px
            }

            .header h1 {
                max-width: 220px;
                font-size: 16px;
                line-height: 1.1
            }

            .header small {
                max-width: 210px;
                letter-spacing: 1px
            }

            .search-actions, .selected-actions {
                gap: 10px
            }

            .secondary-button, .primary-button {
                min-height: 48px
            }
        }

/* Cores institucionais fornecidas para a distribuicao atualizada da Expointer. */
:root {
    --entidade-fetag: #19733c;
    --entidade-emater: #1457b8;
    --entidade-fetraf: #c2185b;
    --entidade-via-campesina: #c62828;
    --entidade-sdr: #616a65;
}

.estande.entidade-fetag .estande-selo { fill: var(--entidade-fetag); }
.estande.entidade-emater .estande-selo { fill: var(--entidade-emater); }
.estande.entidade-fetraf .estande-selo { fill: var(--entidade-fetraf); }
.estande.entidade-via-campesina .estande-selo { fill: var(--entidade-via-campesina); }
.estande.entidade-sdr .estande-selo { fill: var(--entidade-sdr); }

.estande.entidade-fetag .estande-numero,
.estande.entidade-emater .estande-numero,
.estande.entidade-fetraf .estande-numero,
.estande.entidade-via-campesina .estande-numero,
.estande.entidade-sdr .estande-numero {
    fill: #fff;
}

.entity-legend {
    position: absolute;
    z-index: 7;
    left: 24px;
    bottom: 22px;
    width: 184px;
    padding: 10px 12px;
    border: 1px solid rgba(21, 62, 42, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    color: var(--preto);
    box-shadow: 0 6px 18px rgba(18, 47, 31, .14);
    pointer-events: none;
}

.entity-legend-title {
    display: block;
    margin-bottom: 7px;
    color: var(--verde-900);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.entity-legend ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.entity-legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
}

.entity-swatch {
    width: 17px;
    height: 12px;
    flex: 0 0 auto;
    border: 1px solid rgba(16, 32, 22, .38);
    border-radius: 2px;
}

.entity-swatch-fetag { background: var(--entidade-fetag); }
.entity-swatch-emater { background: var(--entidade-emater); }
.entity-swatch-fetraf { background: var(--entidade-fetraf); }
.entity-swatch-via-campesina { background: var(--entidade-via-campesina); }

@media (max-width: 1024px) {
    .entity-legend {
        left: 18px;
        right: 76px;
        bottom: 18px;
        width: auto;
        padding: 8px 10px;
    }

    .entity-legend-title {
        margin-bottom: 5px;
    }

    .entity-legend ul {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 5px;
    }
}

@media (max-width: 520px) {
    .entity-legend {
        left: 14px;
        right: 70px;
        bottom: 14px;
    }

    .entity-legend-title {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    .entity-legend li {
        font-size: 10px;
    }
}

/* Refinamento de leitura para consulta rápida em telefones, tablets e totens. */
.header {
    border-bottom-width: 4px;
}

.origin-header {
    border-radius: 6px;
}

.search-area {
    padding-bottom: 12px;
}

.search-box {
    height: 56px;
    border-width: 1px;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(20, 61, 41, .03);
}

.search-box:focus-within {
    border-color: var(--verde-700);
    box-shadow: 0 0 0 3px rgba(44, 118, 80, .14);
}

#searchInput {
    height: 52px;
}

.clear-button {
    border-radius: 6px;
}

.search-examples {
    margin: 8px 1px 0 !important;
    color: var(--cinza-500) !important;
    font-size: 11px !important;
    line-height: 1.35;
}

.search-examples strong {
    color: var(--verde-800);
}

.search-area > .origin-controls {
    padding-top: 11px;
    border-top: 1px solid var(--cinza-200);
}

.sidebar-tools {
    padding: 12px 15px;
    background: var(--cinza-050);
}

.secondary-button,
.primary-button,
.origin-select {
    border-radius: 6px;
}

.secondary-button {
    background: #fff;
}

.secondary-button:hover {
    border-color: var(--verde-700);
}

.origin-card {
    padding: 8px 10px;
    border: 1px solid #c7dced;
    border-radius: 6px;
}

.results-area {
    padding: 12px 14px 18px;
}

.results-header {
    align-items: baseline;
    margin-bottom: 11px;
    padding: 0;
}

#resultsCount {
    min-width: 31px;
    padding: 3px 7px;
    border: 1px solid var(--cinza-200);
    border-radius: 999px;
    background: #fff;
    color: var(--verde-800);
    text-align: center;
}

.result-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 11px;
    margin-bottom: 7px;
    padding: 10px 11px;
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(18, 47, 31, .025);
}

.result-card:hover,
.result-card.selected {
    border-color: var(--verde-700);
    background: #f7faf8;
}

.result-card:focus-visible {
    outline: 3px solid rgba(7, 94, 181, .28);
    outline-offset: 2px;
}

.result-number {
    min-height: 50px;
    border-radius: 5px;
}

.result-product {
    margin-top: 4px;
    color: var(--cinza-700);
}

.selected-panel {
    border-top: 3px solid var(--laranja);
}

.selected-number {
    border-radius: 6px;
}

.map-panel {
    padding: 12px;
    background: #d9e1db;
}

#map {
    border-width: 1px;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(18, 47, 31, .13);
}

.map-toolbar {
    gap: 0;
    padding: 4px;
    border: 1px solid rgba(21, 62, 42, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 5px 16px rgba(18, 47, 31, .12);
}

.map-button {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    box-shadow: none;
}

.map-button + .map-button {
    border-top: 1px solid var(--cinza-200);
}

.map-button:hover,
.map-button:focus-visible {
    background: var(--verde-100);
}

.map-origin-label {
    border-width: 1px;
    border-radius: 6px;
    box-shadow: 0 5px 16px rgba(18, 47, 31, .14);
}

.entity-legend {
    width: 196px;
    border-radius: 7px;
    box-shadow: 0 5px 16px rgba(18, 47, 31, .12);
}

.entity-legend ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9px;
    row-gap: 6px;
}

.entity-legend li {
    gap: 6px;
}

@media (max-width: 1024px) {
    #searchInput,
    .origin-select {
        font-size: 16px;
    }

    .search-area {
        padding-bottom: 11px;
    }

    .mobile-tabs {
        gap: 3px;
        padding: 3px;
        border-radius: 8px;
        background: #edf1ee;
    }

    .mobile-tab {
        min-height: 50px;
        border-radius: 6px;
    }

    .mobile-tab[aria-selected="true"] {
        box-shadow: none;
    }

    .map-panel {
        padding: 10px 12px 12px;
    }
}

@media (min-width: 701px) and (max-width: 1024px) {
    .search-area {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
        grid-template-rows: auto auto auto auto;
        column-gap: 18px;
        align-items: start;
    }

    .search-area h2,
    .search-area > p,
    .search-area > .search-box {
        grid-column: 1;
    }

    .search-area > .origin-controls {
        grid-column: 2;
        grid-row: 1 / span 4;
        margin-top: 0;
        padding: 2px 0 0 18px;
        border-top: 0;
        border-left: 1px solid var(--cinza-200);
    }

    .sidebar-tools {
        display: block;
        padding-block: 10px;
    }

    .secondary-button,
    .primary-button,
    .origin-select {
        min-height: 48px;
    }
}

@media (max-width: 700px) {
    #searchInput,
    .origin-select {
        font-size: 16px;
    }

    .results-header {
        position: sticky;
        z-index: 2;
        top: 0;
        margin-top: -6px;
        padding: 7px 0 8px;
        background: #fbfcfb;
    }

    .search-examples {
        font-size: 10px !important;
    }

    .search-area > .origin-controls {
        margin-top: 9px;
        padding-top: 9px;
    }

    .search-area > .origin-controls .origin-card {
        display: none;
    }

    .map-toolbar {
        top: 15px;
        right: 15px;
    }

    .map-button {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 420px) {
    .mobile-tabs {
        margin-inline: 10px;
    }

    .mobile-tab {
        gap: 5px;
        padding-inline: 7px;
        font-size: 13px;
        line-height: 1.1;
        white-space: nowrap;
    }

    .mobile-tab-count {
        min-width: 25px;
        padding-inline: 6px;
    }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) {
    .app {
        grid-template-rows: 58px minmax(0, 1fr);
    }

    .header {
        align-items: center;
        padding: 6px 14px;
        border-bottom-width: 3px;
    }

    .header small,
    .date-display,
    .search-area h2,
    .search-area > p,
    .origin-label,
    .origin-card,
    .footer {
        display: none;
    }

    .header h1 {
        max-width: none;
        font-size: 18px;
        line-height: 1.1;
    }

    .clock {
        font-size: 20px;
    }

    .search-area {
        padding: 6px 10px;
    }

    .search-area > .origin-controls {
        margin-top: 8px;
        padding-top: 8px;
    }

    .search-box {
        height: 48px;
    }

    #searchInput {
        height: 44px;
        font-size: 16px;
    }

    .mobile-tabs {
        margin: 4px 10px;
    }

    .mobile-tab {
        min-height: 44px;
    }

    .sidebar-tools {
        padding: 6px 10px;
    }

    .origin-controls {
        margin-top: 8px;
    }

    .results-area {
        padding: 8px 10px 10px;
    }

    .map-panel {
        padding: 6px 10px 8px;
    }

    .map-toolbar {
        top: 11px;
        right: 15px;
        flex-direction: row;
    }

    .map-button + .map-button {
        border-top: 0;
        border-left: 1px solid var(--cinza-200);
    }

    .entity-legend {
        bottom: 13px;
    }
}

@media (orientation: landscape) and (max-height: 600px) and (min-width: 600px) and (max-width: 1024px) {
    .search-area {
        grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
        grid-template-rows: auto;
        gap: 10px;
    }

    .search-area > .search-box {
        grid-column: 1;
        grid-row: 1;
    }

    .search-area > .origin-controls {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        padding: 0;
        border: 0;
    }
}

/* Guias editáveis no SVG: ficam disponíveis no Inkscape, sem poluir o mapa público. */
#map .route-guides {
    display: none;
}

/* ==== Ajustes de leitura em telefones (compactação de cabeçalho, busca e lista) ==== */
@media (max-width: 700px) {
    .app {
        grid-template-rows: auto minmax(0, 1fr) 34px;
    }

    /* Cabeçalho enxuto: sem data e relógio, título em duas linhas no máximo */
    .header {
        gap: 8px;
        padding: max(8px, env(safe-area-inset-top)) 12px 8px;
        border-bottom-width: 3px;
    }

    .header h1 {
        max-width: none;
        font-size: 16px;
        line-height: 1.15;
    }

    .header small {
        margin-bottom: 2px;
        font-size: 9px;
        letter-spacing: .9px;
    }

    .date-time {
        display: none;
    }

    /* Busca com menos respiro vertical */
    .search-area {
        padding: 9px 11px 10px;
    }

    .search-area h2 {
        margin-bottom: 2px;
        font-size: 15px;
    }

    .search-area > p {
        margin-bottom: 8px;
        font-size: 11px;
        line-height: 1.3;
    }

    .search-box {
        height: 48px;
        grid-template-columns: 38px minmax(0, 1fr) 40px;
    }

    #searchInput {
        height: 44px;
    }

    .search-examples {
        margin-top: 6px !important;
    }

    .search-area > .origin-controls {
        gap: 5px;
        margin-top: 8px;
        padding-top: 8px;
    }

    .origin-label {
        font-size: 10px;
    }

    .origin-select,
    .location-button {
        min-height: 44px;
        padding-block: 0;
    }

    /* Abas e barra de ferramentas mais rasas */
    .mobile-tabs {
        margin: 7px 11px;
    }

    .mobile-tab {
        min-height: 44px;
        font-size: 13px;
    }

    .sidebar-tools {
        padding: 8px 11px;
    }

    .secondary-button {
        min-height: 44px;
        font-size: 12px;
    }

    /* Lista de agroindústrias: mais itens visíveis por tela */
    .results-area {
        padding: 8px 11px 14px;
    }

    .results-header {
        margin-bottom: 7px;
        font-size: 10px;
    }

    .result-card {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 9px;
        margin-bottom: 6px;
        padding: 8px 9px;
    }

    .result-number {
        min-height: 44px;
    }

    .result-number strong {
        font-size: 17px;
    }

    .result-name {
        font-size: 13px;
        line-height: 1.25;
    }

    .result-meta,
    .result-product {
        font-size: 11px;
        line-height: 1.3;
    }

    .result-product {
        margin-top: 3px;
    }

    /* Painel do estande selecionado ocupa menos altura */
    .selected-panel {
        padding: 10px 11px;
    }

    .selected-number {
        min-width: 54px;
        height: 54px;
    }

    .selected-products {
        font-size: 11px;
        line-height: 1.35;
    }

    /* Mapa ganha área */
    .map-panel {
        padding: 6px 9px 9px;
    }

    .footer {
        min-height: 34px;
        padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
        font-size: 10px;
    }

    /* Na aba "Mapa e rota" a busca fica reduzida à caixa de pesquisa */
    body.view-map .search-area h2,
    body.view-map .search-area > p,
    body.view-map .search-examples,
    body.view-map .search-area > .origin-controls {
        display: none;
    }

    body.view-map .search-area {
        padding-bottom: 9px;
    }

    body.view-map .entity-legend {
        padding: 6px 8px;
    }

    body.view-map .entity-legend li {
        font-size: 9px;
    }
}

@media (max-width: 420px) {
    .header h1 {
        font-size: 15px;
    }

    .result-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
    }

    .result-number strong {
        font-size: 16px;
    }
}


/* ==== Compactação final da interface para totens e telas pequenas ==== */
/* O total já aparece na aba "Resultados"; evita duplicação/sobreposição no cabeçalho da lista. */
@media (max-width: 1024px) {
    #resultsCount {
        display: none !important;
    }

    .results-header {
        justify-content: flex-start;
    }
}

/* Elementos dispensáveis para a operação no totem. */
.search-examples,
.footer {
    display: none !important;
}

/* Sem footer, todo o espaço vertical fica disponível para busca, resultados e mapa. */
.app {
    grid-template-rows: 82px minmax(0, 1fr) !important;
}

/* Controles compactos com SVG inline: mantêm alvo de toque confortável sem ocupar largura com texto. */
.search-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.search-actions .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inline-icon {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

@media (max-width: 700px) {
    .app {
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    .sidebar-tools {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .search-actions .icon-button {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) {
    .app {
        grid-template-rows: 58px minmax(0, 1fr) !important;
    }
}


/* ==== Ajuste compacto v2: botões de visualização e controles centralizados ==== */
/* O contador foi removido da interface; o título da lista permanece como orientação. */
#resultsCount,
.mobile-tab-count {
    display: none !important;
}

/* Em vez de abas largas, dois botões compactos e independentes. */
@media (max-width: 1024px) {
    .mobile-tabs {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        margin: 4px 10px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .mobile-tab {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        min-height: 36px;
        padding: 0 12px;
        gap: 6px;
        border: 1px solid #bdcbc2;
        border-radius: 7px;
        background: #fff;
        color: var(--verde-900);
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        box-shadow: none;
    }

    .mobile-tab[aria-selected="true"] {
        border-color: var(--verde-800);
        background: var(--verde-800);
        color: #fff;
    }

    .mobile-tab:hover,
    .mobile-tab:focus-visible {
        border-color: var(--verde-700);
    }

    .mobile-tab-icon {
        display: block;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
    }

    .sidebar-tools {
        padding: 3px 10px 5px;
    }

    /* A dupla de ações fica realmente centralizada, não encostada à direita. */
    .search-actions {
        justify-content: center;
        align-items: center;
        gap: 7px;
        width: 100%;
    }

    .search-actions .icon-button {
        display: grid;
        place-items: center;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        line-height: 0;
    }

    .search-actions .icon-button .inline-icon {
        display: block;
        width: 19px;
        height: 19px;
        margin: 0;
        align-self: center;
        justify-self: center;
    }

    .results-area {
        padding-top: 5px;
    }

    .results-header {
        position: static;
        margin: 0 0 6px;
        padding: 0;
        min-height: 0;
    }
}

@media (max-width: 420px) {
    .mobile-tabs {
        margin: 3px 8px;
        gap: 6px;
    }

    .mobile-tab {
        min-height: 34px;
        padding-inline: 10px;
        font-size: 11px;
    }

    .mobile-tab-icon {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    .search-actions .icon-button {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
    }
}



/* ==== V3 mobile-first: barra única, origem compacta e bottom sheet ==== */
.main {
    position: relative;
}

.origin-summary {
    display: none;
}

.origin-details {
    display: grid;
    gap: 7px;
}

.mobile-view-switch,
.mobile-command-actions {
    display: flex;
    align-items: center;
}

.mobile-command-actions {
    gap: 6px;
}

.selected-copy {
    min-width: 0;
}

.sheet-handle {
    display: none;
}

/* O painel selecionado deixa de participar do fluxo da lista e passa a sobrepor a interface. */
.selected-panel {
    position: absolute;
    z-index: 32;
    left: 12px;
    bottom: 12px;
    width: 336px;
    max-width: calc(100% - 24px);
    padding: 13px;
    border: 1px solid var(--cinza-200);
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 14px 36px rgba(18, 47, 31, .20);
}

@media (max-width: 1024px) {
    /* Uma única barra: navegação à esquerda, ações rápidas à direita. */
    .mobile-tabs {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 4px 10px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mobile-view-switch {
        min-width: 0;
        gap: 6px;
    }

    .mobile-tab {
        min-height: 38px !important;
        padding: 0 11px !important;
        border: 1px solid #bdcbc2 !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--verde-900) !important;
        box-shadow: none !important;
        font-size: 11px !important;
    }

    .mobile-tab[aria-selected="true"] {
        border-color: var(--verde-800) !important;
        background: var(--verde-800) !important;
        color: #fff !important;
    }

    .mobile-tab-icon {
        width: 15px !important;
        height: 15px !important;
        flex: 0 0 15px;
    }

    .mobile-command-actions .icon-button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px;
    }

    .mobile-command-actions .inline-icon {
        width: 19px;
        height: 19px;
        margin: auto;
        display: block;
    }

    /* Os botões foram movidos para a barra por JavaScript; evita uma linha vazia na sidebar. */
    .sidebar-tools {
        display: none !important;
    }

    /* O título Agroindústrias/Resultados é redundante com o botão Resultados. */
    .results-header {
        display: none !important;
    }

    .results-area {
        padding-top: 7px;
    }

    /* Origem resumida; os controles aparecem somente quando o visitante pede alteração. */
    .origin-controls {
        margin-top: 7px !important;
        gap: 0 !important;
    }

    .origin-summary {
        width: 100%;
        min-height: 38px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 9px;
        border: 1px solid var(--cinza-200);
        border-radius: 9px;
        background: #f7faf8;
        color: var(--verde-900);
        text-align: left;
    }

    .origin-summary-icon,
    .origin-chevron {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .origin-summary-text {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        font-size: 11px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .origin-summary-text strong {
        font-weight: 850;
    }

    .origin-change {
        color: var(--verde-700);
        font-size: 10px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .35px;
    }

    .origin-chevron {
        transition: transform .18s ease;
    }

    .origin-controls.expanded .origin-chevron {
        transform: rotate(180deg);
    }

    .origin-details {
        display: none;
        gap: 7px;
        padding: 8px 2px 0;
    }

    .origin-controls.expanded .origin-details {
        display: grid;
    }

    .origin-controls.expanded .origin-summary {
        border-color: var(--verde-700);
        background: #fff;
    }

    /* Bottom sheet: continua visível mesmo depois de alternar automaticamente para o mapa. */
    .selected-panel {
        position: fixed;
        z-index: 50;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        max-height: min(52vh, 420px);
        overflow: auto;
        padding: 10px 12px 12px;
        border: 1px solid rgba(21, 62, 42, .18);
        border-radius: 16px;
        background: rgba(255, 255, 255, .985);
        box-shadow: 0 16px 42px rgba(12, 38, 24, .26);
    }

    .sheet-handle {
        width: 38px;
        height: 4px;
        display: block;
        margin: 0 auto 8px;
        border-radius: 999px;
        background: var(--cinza-300);
    }

    .selected-heading {
        align-items: center;
    }

    .selected-number {
        min-width: 52px !important;
        width: 52px;
        height: 52px !important;
        border-radius: 10px;
    }

    .selected-number strong {
        font-size: 20px;
    }

    .selected-title {
        font-size: 14px;
    }

    .selected-products {
        margin-top: 7px;
        -webkit-line-clamp: 2;
    }

    .selected-actions {
        margin-top: 8px;
    }

    body.keyboard-open .selected-panel.open {
        display: none;
    }
}

@media (max-width: 520px) {
    .mobile-tabs {
        margin-inline: 8px !important;
        gap: 5px;
    }

    .mobile-view-switch {
        gap: 4px;
    }

    .mobile-tab {
        min-height: 36px !important;
        padding-inline: 9px !important;
        gap: 5px !important;
        font-size: 10.5px !important;
    }

    .mobile-command-actions {
        gap: 4px;
    }

    .mobile-command-actions .icon-button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .search-area {
        padding-bottom: 8px !important;
    }

    .origin-control-row {
        grid-template-columns: minmax(0, 1fr) 88px;
    }

    .location-button {
        min-width: 88px;
    }

    .selected-panel {
        left: 7px;
        right: 7px;
        bottom: calc(7px + env(safe-area-inset-bottom));
    }
}