/* Atesmaps UI kit for the account side of the site (login, registration, user area, guide trips).
   It keeps the brand the site already has (navy #163156, blue #3098CF, Montserrat titles, Roboto text, white cards on the
   mountain photo for the auth pages) and gives every page the same building blocks: cards, fields, buttons, alerts, badges.
   Class names start with `ui-` so nothing of the legacy Material / Bootstrap styles is touched. */
:root {
    --ui-navy: #163156;
    --ui-blue: #3098CF;
    --ui-blue-strong: #3098CF;   /* the button fill: the brand blue of the first design */
    --ui-link: #1f7cb2;          /* blue for text links (4.6:1 on white) */
    --ui-blue-soft: #e8f3fa;
    --ui-ink: #1b2430;
    --ui-muted: #5d6b7c;
    --ui-line: #dfe5ec;
    --ui-line-strong: #c3ccd7;
    --ui-bg: #f3f5f8;
    --ui-card: #ffffff;
    --ui-ok: #1e6b36;     --ui-ok-bg: #e6f4ea;
    --ui-warn: #8a5a00;   --ui-warn-bg: #fff4de;
    --ui-danger: #b3261e; --ui-danger-bg: #fdecea;
    --ui-radius: 4px;
    --ui-shadow: 0 1px 2px rgba(22, 49, 86, .06), 0 6px 20px rgba(22, 49, 86, .08);
    --ui-header: 64px;
}

/* ---------- page shells ---------- */
.ui-page { min-height: 100vh; background: var(--ui-bg); color: var(--ui-ink); padding: 0 16px 48px; font-family: Roboto, "Helvetica", Arial, sans-serif; }
/* The space under the fixed header is on the wrapper, not on the scrolling page: sticky elements are measured from the content box. */
.ui-wrap { max-width: 960px; margin: 0 auto; padding-top: calc(var(--ui-header) + 28px); }
.ui-wrap--narrow { max-width: 640px; }
/* The auth pages keep the mountain photo behind a white card, as before. */
.ui-auth { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: calc(var(--ui-header) + 32px) 16px 48px; background-size: cover; background-position: center; font-family: Roboto, "Helvetica", Arial, sans-serif; color: var(--ui-ink); }
.ui-auth > * { width: 100%; }

/* ---------- cards ---------- */
.ui-card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); padding: 24px; margin: 0 0 16px; }
.ui-card--auth { max-width: 440px; margin: 0 auto; padding: 32px 28px 28px; border: 0; }
.ui-card--wide { max-width: 720px; }
.ui-card__title { margin: 0 0 14px; font: 600 18px/1.3 Montserrat, Helvetica, Arial, sans-serif; color: var(--ui-navy); }
.ui-card__title + .ui-card__lead { margin-top: -10px; }
.ui-card__lead { margin: 0 0 16px; color: var(--ui-muted); font-size: 14px; line-height: 1.5; }
.ui-title { margin: 0 0 6px; font: 600 24px/1.25 Montserrat, Helvetica, Arial, sans-serif; color: var(--ui-navy); }
.ui-title--center { text-align: center; }
.ui-lead { margin: 0 0 20px; color: var(--ui-muted); font-size: 15px; line-height: 1.5; }
.ui-lead--center { text-align: center; }
.ui-section-label { margin: 22px 0 8px; font: 600 12px/1.2 Montserrat, Helvetica, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }

/* ---------- fields: underlined, with the label inside that floats up (as in the first design) ---------- */
.ui-field { position: relative; margin: 0 0 14px; padding-top: 18px; }
.ui-field > label:not(.ui-check), .ui-label { position: absolute; left: 0; top: 24px; margin: 0; max-width: 100%; font-size: 16px; font-weight: 400; line-height: 1.2; color: #757575; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: top .15s, font-size .15s, color .15s; }
.ui-field--icon { padding-left: 42px; }
.ui-field--icon > label:not(.ui-check) { left: 42px; max-width: calc(100% - 42px); }
.ui-field__icon { position: absolute; left: 2px; top: 22px; font-size: 24px; color: #555; }
.ui-field input[type="text"], .ui-field input[type="email"], .ui-field input[type="password"], .ui-field input[type="date"], .ui-field input[type="tel"], .ui-field input[type="url"], .ui-field input[type="number"], .ui-field select, .ui-field textarea {
    display: block; width: 100%; height: 34px; padding: 4px 0 7px; font: 400 16px/1.4 Roboto, Helvetica, Arial, sans-serif; color: var(--ui-ink);
    background: linear-gradient(var(--ui-underline, var(--ui-blue-strong)), var(--ui-underline, var(--ui-blue-strong))) no-repeat center bottom / 0 2px, linear-gradient(var(--ui-line-base, #d2d2d2), var(--ui-line-base, #d2d2d2)) no-repeat center bottom / 100% 1px; border: 0; border-radius: 0; box-shadow: none; appearance: none; -webkit-appearance: none;
    transition: background-size .25s cubic-bezier(.4, 0, .2, 1);
}
/* The label goes up when the field has a value, has the focus, or can never be empty-looking (a select, a date). */
.ui-field:focus-within > label:not(.ui-check), .ui-field:has(input:not(:placeholder-shown)) > label:not(.ui-check),
.ui-field:has(select) > label:not(.ui-check), .ui-field:has(input[type="date"]) > label:not(.ui-check) { top: 0; font-size: 12px; }
.ui-field:focus-within > label:not(.ui-check) { color: var(--ui-link); }
/* The blue line grows from the centre to the full width of the field. */
.ui-field input:focus, .ui-field textarea:focus { outline: 0; background-size: 100% 2px, 100% 1px; }
.ui-field select:focus { outline: 0; background-size: 100% 2px, 100% 1px, auto; }
.ui-field select { padding-right: 24px; background: linear-gradient(var(--ui-underline, var(--ui-blue-strong)), var(--ui-underline, var(--ui-blue-strong))) no-repeat center bottom / 0 2px, linear-gradient(var(--ui-line-base, #d2d2d2), var(--ui-line-base, #d2d2d2)) no-repeat center bottom / 100% 1px, transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235d6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center; text-overflow: ellipsis; }
.ui-field input[readonly] { color: var(--ui-muted); background: none; border-bottom: 1px dotted #d2d2d2; padding-bottom: 6px; }
.ui-help { margin: 6px 0 0; font-size: 13px; color: var(--ui-muted); line-height: 1.45; }
.ui-field--error input, .ui-field--error select { --ui-underline: var(--ui-danger); --ui-line-base: var(--ui-danger); background-size: 100% 2px, 100% 1px; }
.ui-field--error select { background-size: 100% 2px, 100% 1px, auto; }
.ui-field--error > label:not(.ui-check) { color: var(--ui-danger); }
.ui-error { margin: 6px 0 0; font-size: 13px; color: var(--ui-danger); }
.ui-password { position: relative; }
.ui-password input { padding-right: 40px; }
.ui-password button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; color: #555; cursor: pointer; border-radius: 3px; }
.ui-password button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(48, 152, 207, .35); }
.ui-grid { display: grid; gap: 0 24px; }
@media (min-width: 640px) { .ui-grid--2 { grid-template-columns: 1fr 1fr; } }

/* ---------- buttons: flat, squared, uppercase, in the brand blue ---------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 22px; border: 0; border-radius: 3px; font: 500 14px/1 Roboto, Helvetica, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); }
.ui-btn:focus-visible { outline: 3px solid rgba(48, 152, 207, .5); outline-offset: 2px; }
.ui-btn--primary { background: var(--ui-blue-strong); color: #fff; }
.ui-btn--primary:hover { background: #2a87ba; color: #fff; text-decoration: none; }
.ui-btn--secondary { background: #fff; color: var(--ui-link); box-shadow: inset 0 0 0 1px var(--ui-blue-strong); }
.ui-btn--secondary:hover { background: var(--ui-blue-soft); color: #196a9b; text-decoration: none; }
.ui-btn--danger { background: var(--ui-danger); color: #fff; }
.ui-btn--danger:hover { background: #8f1e18; color: #fff; text-decoration: none; }
.ui-btn--ghost { background: transparent; color: var(--ui-link); min-height: 36px; padding: 0 10px; box-shadow: none; }
.ui-btn--ghost:hover { background: var(--ui-blue-soft); color: #196a9b; text-decoration: none; }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn--small { min-height: 34px; padding: 0 16px; font-size: 13px; }
.ui-btn[disabled] { opacity: .55; cursor: default; }
.ui-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.ui-actions--end { justify-content: flex-end; }
.ui-link { color: var(--ui-link); font-weight: 500; text-decoration: none; }
.ui-link:hover { text-decoration: underline; }
.ui-link--strong { font-weight: 700; }

/* ---------- alerts and badges ---------- */
.ui-alert { margin: 0 0 16px; padding: 12px 14px; border-radius: 4px; font-size: 14px; line-height: 1.5; background: var(--ui-blue-soft); color: var(--ui-navy); }
.ui-alert--success { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-alert--warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-alert--error { background: var(--ui-danger-bg); color: var(--ui-danger); }
.ui-alert strong { font-weight: 600; }
.ui-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 3px; font-size: 12px; font-weight: 600; line-height: 1.5; background: var(--ui-bg); color: var(--ui-muted); white-space: nowrap; }
.ui-badge--ok { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-badge--warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-badge--info { background: var(--ui-blue-soft); color: var(--ui-navy); }
.ui-badge--muted { background: var(--ui-bg); color: var(--ui-muted); }
.ui-badge--guide { background: var(--ui-navy); color: #fff; }

/* ---------- auth specifics ---------- */
.ui-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ui-muted); font-size: 13px; }
.ui-divider::before, .ui-divider::after { content: ""; flex: 1; height: 1px; background: var(--ui-line); }
.ui-social { display: grid; gap: 10px; justify-items: center; }
.ui-social > div { width: 100%; max-width: 320px; }
.ui-auth-links { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ui-muted); }
.ui-auth-links p { margin: 0 0 8px; }
.ui-forgot { display: block; margin: -6px 0 18px; text-align: right; font-size: 13px; }

/* ---------- misc ---------- */
.ui-muted { color: var(--ui-muted); }
.ui-hr { border: 0; border-top: 1px solid var(--ui-line); margin: 20px 0; }
.ui-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ui-btn { transition: none; } }

/* ---------- registration ---------- */
.ui-card--register { max-width: 560px; }
.ui-help--lead { margin: -2px 0 14px; }
.ui-checklist { margin: 10px 0 0; padding: 10px 12px; border-radius: 4px; background: var(--ui-bg); font-size: 13px; color: var(--ui-muted); }
.ui-checklist__title { margin: 0 0 6px; font-weight: 600; color: var(--ui-ink); }
.ui-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 12px; grid-template-columns: 1fr 1fr; }
.ui-checklist li { display: flex; align-items: center; gap: 6px; }
.ui-checklist li i { font-size: 16px; }
.ui-checklist li.is-ok { color: var(--ui-ok); }
@media (max-width: 420px) { .ui-checklist ul { grid-template-columns: 1fr; } }
.ui-check { color: var(--ui-ink); display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; font-weight: 400; cursor: pointer; }
.ui-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ui-blue-strong); }
.ui-field--check { margin: 8px 0 18px; }
.ui-field--check.ui-field--error .ui-check { color: var(--ui-danger); }

/* ---------- choice cards: radio groups whose answers are sentences ---------- */
.ui-choice { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.ui-choice legend { display: block; width: auto; padding: 0; margin: 0 0 8px; border: 0; font-size: 13px; font-weight: 600; color: var(--ui-ink); line-height: 1.35; }
.ui-choice__option { color: var(--ui-ink); display: flex; gap: 12px; align-items: flex-start; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--ui-line-strong); border-radius: 4px; background: #fff; font-size: 14px; line-height: 1.45; cursor: pointer; }
.ui-choice__option:hover { border-color: var(--ui-blue); }
.ui-choice__option input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ui-blue-strong); }
.ui-choice__option:has(input:checked) { border-color: var(--ui-blue-strong); background: var(--ui-blue-soft); }
.ui-choice__option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(48, 152, 207, .35); }

/* ---------- the site header: the controls are centred with flexbox, not by nudging their text ---------- */
.ates-header .mdl-layout__header-row { align-items: center; }
.ates-header .ates-zones-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; line-height: 1; }
.ates-header #geovisor-name-header, .ates-header #menu-name-header { margin: 0; padding: 0; line-height: 1; }
.ates-header .ates-zones-button .material-icons { line-height: 1; order: 2; display: block; margin: 0 !important; position: static; top: auto; }
/* The drawer starts under the fixed bar; the legacy 59px of padding left a blank band before the first link. */
.mdl-layout__drawer .mdl-navigation { padding-top: 8px !important; }

/* ---------- the user menu ---------- */
.ui-usermenu { position: relative; }
.ui-usermenu__button { gap: 8px; }
.ui-usermenu__avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ui-navy); color: #fff; font: 700 11px/1 Montserrat, Helvetica, Arial, sans-serif; letter-spacing: .02em; }
.ui-usermenu__avatar--large { width: 44px; height: 44px; font-size: 15px; }
.ui-usermenu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 300px; max-width: calc(100vw - 16px); padding: 0 0 6px; background: #fff; border: 1px solid var(--ui-line); border-radius: 4px; box-shadow: 0 10px 28px rgba(22, 49, 86, .2); text-align: left; }
.ui-usermenu__panel[hidden] { display: none; }
.ui-usermenu__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 6px; background: var(--ui-bg); border-bottom: 1px solid var(--ui-line); border-radius: 4px 4px 0 0; }
.ui-usermenu__who strong, .ui-usermenu__email { text-transform: none; }
.ui-usermenu__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ui-usermenu__who strong { font: 600 14px/1.3 Montserrat, Helvetica, Arial, sans-serif; color: var(--ui-navy); overflow-wrap: anywhere; }
.ui-usermenu__email { font-size: 13px; line-height: 1.3; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-usermenu__who .ui-badge { align-self: flex-start; margin-top: 4px; white-space: normal; }
.ui-usermenu__item { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; font: 500 14px/1 Roboto, Helvetica, Arial, sans-serif; color: var(--ui-ink); text-decoration: none; }
.ui-usermenu__item:hover, .ui-usermenu__item:focus-visible { background: var(--ui-bg); color: var(--ui-ink); text-decoration: none; outline: 0; }
.ui-usermenu__item:focus-visible { box-shadow: inset 3px 0 0 var(--ui-blue-strong); }
.ui-usermenu__item--logout { margin-top: 6px; border-top: 1px solid var(--ui-line); }
@media (max-width: 480px) { .ui-usermenu__button #menu-name-header { display: none; } }

/* ---------- the open list of a select ----------
   Where the browser can style it (Chrome, Edge: `appearance: base-select`) the list looks like the menus of the bar: squared,
   44px rows, a blue edge and a check on the chosen one. It stays a native <select> (keyboard, screen readers, forms, the
   system picker on phones). Browsers without it keep the native list, nothing else changes. */
@supports (appearance: base-select) {
    .ui-field select,
    .ui-field select::picker(select) { appearance: base-select; }
    /* the closed select keeps its own arrow (the background image) */
    .ui-field select::picker-icon { display: none; }
    .ui-field select::picker(select) {
        box-sizing: border-box;
        min-width: anchor-size(width);
        /* the browser places it next to the field (and flips it when there is no room) */
        margin: 4px 0;
        padding: 6px 0;
        background: #fff;
        border: 1px solid var(--ui-line);
        border-radius: 4px;
        box-shadow: 0 10px 28px rgba(22, 49, 86, .2);
    }
    .ui-field select option {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 0 16px;
        font: 400 15px/1.3 Roboto, Helvetica, Arial, sans-serif;
        color: var(--ui-navy);
        text-transform: none;
        cursor: pointer;
    }
    .ui-field select option:hover, .ui-field select option:focus-visible { background: var(--ui-bg); outline: 0; }
    .ui-field select option:checked { font-weight: 700; box-shadow: inset 3px 0 0 var(--ui-blue-strong); background: transparent; }
    .ui-field select option:checked:hover { background: var(--ui-bg); }
    .ui-field select option::checkmark { order: 1; margin-left: auto; color: var(--ui-blue-strong); }
    /* the empty option ("nothing chosen") shows a muted dash instead of a blank row */
    .ui-field select option[value=""]::before { content: "\2014"; color: var(--ui-muted); }
}

/* ---------- small screens ---------- */
@media (max-width: 599px) {
    :root { --ui-header: 56px; }
    .ui-wrap { padding-top: calc(var(--ui-header) + 12px); }
    .ui-auth { padding-top: calc(var(--ui-header) + 16px); }
    .ui-card { padding: 18px; }
}

/* ---------- legal pages: the text starts below the fixed bar ---------- */
.ui-legal #ates-what .ates-container-section { padding-top: calc(var(--ui-header) + 28px); }
.ui-legal .bottom-footer small { display: inline-block; margin: 0 6px; }

/* ---------- the viewer's top bar (only the bar: the map and its tools are untouched) ----------
   One primary action (save the trip, guides only), then quiet selectors; everything 36px high, flat, squared. */
#ates-geovisor .ates-header .ates-zones-button { height: 36px; border-radius: 3px; box-shadow: none; background: transparent; }
#ates-geovisor .ates-header .ates-zones-button p { font: 500 14px/1 Roboto, Helvetica, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-navy); }
#ates-geovisor .ates-header .ates-zones-button:hover, #ates-geovisor .ates-header .ates-zones-button:focus-visible, #ates-geovisor .ates-header .ates-zones-button[aria-expanded="true"] { background: var(--ui-blue-soft); }
#ates-geovisor .ates-header .ates-zones-button:active { box-shadow: none; }
/* The layer and zone selectors: outlined, so they read as dropdowns and not as links */
#ates-geovisor #maps-layers-button, #ates-geovisor #more-button { box-shadow: inset 0 0 0 1px rgba(22, 49, 86, .22); background: #fff; padding: 0 8px 0 14px; }
#ates-geovisor #maps-layers-button, #ates-geovisor #more-button { margin: 0 4px; }
#ates-geovisor .ates-header { overflow: visible; }
#ates-geovisor #maps-layers-button:hover, #ates-geovisor #more-button:hover { box-shadow: inset 0 0 0 1px var(--ui-navy); }
#ates-geovisor #maps-layers-button .material-icons, #ates-geovisor #more-button .material-icons { order: 2; margin: 0; font-size: 22px; }
/* The primary action */
#ates-geovisor #save-trip-button { background: var(--ui-blue-strong); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); position: relative; }
#ates-geovisor #save-trip-button p, #ates-geovisor #save-trip-button .material-icons { color: #fff !important; }
#ates-geovisor #save-trip-button:hover, #ates-geovisor #save-trip-button:focus-visible { background: #2a87ba; }
#ates-geovisor #save-trip-button .material-icons { font-size: 20px; }
/* The manual keeps its own icon, same height as the rest */
#ates-geovisor #guia { margin: 0 4px; border-radius: 3px; }
#ates-geovisor #guia:hover { background: var(--ui-blue-soft); }
/* The save button is icon-only at every width: the label made the right-hand group reach the centred logo and looked heavy.
   The text lives in the title/aria-label and in a tooltip. */
#ates-geovisor #save-trip-button { overflow: visible; padding: 0; width: 40px; min-width: 40px; margin: 0 10px 0 6px; }
#ates-geovisor #save-trip-button p { display: none; }
#ates-geovisor #save-trip-button::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 8px); padding: 6px 10px; border-radius: 3px; background: var(--ui-navy); color: #fff; font: 500 12px/1.3 Roboto, Helvetica, Arial, sans-serif; letter-spacing: .02em; text-transform: none; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 50; }
#ates-geovisor #save-trip-button:hover::after, #ates-geovisor #save-trip-button:focus-visible::after { opacity: 1; }

/* ---------- the viewer's top bar on phones and tablets ----------
   Row 1: menu, logo (centred), language, user. Row 2: the tools (layer, zone, save, manual), each one with room
   for its label. Only the bar changes; the two side panels that start under it follow its new height. */
.vt-tools { position: relative; display: flex; align-items: center; }
@media (max-width: 1100px) {
    #ates-geovisor { --vt-header: 109px; }
    #ates-geovisor .ates-header { min-height: 0; }
    #ates-geovisor .ates-header .mdl-layout__header-row { position: relative; height: auto; min-height: 0; flex-wrap: wrap; align-items: center; padding: 0 12px 0 64px; }
    #ates-geovisor .ates-header .mdl-layout-spacer { display: none; }
    #ates-geovisor .ates-header .ates-lang { order: 1; margin: 10px 4px 10px auto; }
    #ates-geovisor .ates-header .ui-usermenu { order: 2; margin: 10px 0; }
    #ates-geovisor .ates-header .ui-usermenu__button { padding: 0 6px; }
    #ates-geovisor .ates-header .ui-usermenu__button #menu-name-header { display: none; }
    /* the second row: full width, a thin rule above it */
    #ates-geovisor .vt-tools { order: 3; flex: 0 0 calc(100% + 76px); box-sizing: border-box; margin: 0 -12px 0 -64px; padding: 8px; gap: 8px; border-top: 1px solid var(--ui-line); }
    #ates-geovisor .vt-tools #maps-layers-button, #ates-geovisor .vt-tools #more-button { flex: 1 1 0; min-width: 0; justify-content: space-between; padding: 0 6px 0 10px; margin: 0; }
    #ates-geovisor .vt-tools #layer-name-header, #ates-geovisor .vt-tools #zone-name-header { margin: 0 !important; padding: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1; text-align: left; }
    /* the old phone stylesheet hides these labels (there was no room in a single row); the second row has it */
    #ates-geovisor .vt-tools #maps-layers-button p, #ates-geovisor .vt-tools #more-button p { display: block !important; }
    #ates-geovisor .vt-tools #maps-layers-button { order: 1; }
    #ates-geovisor .vt-tools #more-button { order: 2; }
    #ates-geovisor .vt-tools #save-trip-button { order: 3; margin: 0; }
    #ates-geovisor .vt-tools #guia { order: 4; margin: 0; width: 40px; min-width: 40px; height: 36px; padding: 0; }
    #ates-geovisor .vt-tools #guia > img { width: 34px; height: 34px; padding: 2px; }
    /* the layer menu opens from the left edge of the strip (aligned to its button's right edge it ran off the screen) */
    #ates-geovisor .vt-tools > div.mdl-menu__container:nth-of-type(1) { left: 8px !important; right: auto !important; }
    #ates-geovisor #side-nav-itineraries, #ates-geovisor #side-nav-observations { top: var(--vt-header); height: calc(100% - var(--vt-header)); }
}

/* ---------- small screens: the page already starts below the fixed bar ----------
   MDL adds `is-small-screen` up to 1024px wide and then gives the content a 56px top margin, so the offsets that
   clear the bar on wide screens must not be added again (the sticky tabs stopped 56px too low and the pages
   started with a gap). */
.is-small-screen .ui-wrap { padding-top: 20px; }
.is-small-screen .ui-auth { padding-top: 16px; }
.is-small-screen .ui-legal #ates-what .ates-container-section { padding-top: 28px; }

/* ---------- the bottom of the site's footer (home, legal, 404 and 500 pages): everything on one centre line ----------
   The social icons and the legal row were centred with margins on each item (a trailing margin on the last icon and
   inline margins on the links), which left the icons a few pixels off the row below. They are centred with `gap`. */
.bottom-footer .aling-center { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 20px; }
.bottom-footer .aling-center .soc { flex: 0 0 100%; display: flex; justify-content: center; gap: 9px; margin: 0; padding: 8px 8px 4px; }
.bottom-footer .soc li { margin: 0; }
.bottom-footer .soc li a { margin-right: 0; }
.bottom-footer .aling-center small { margin: 0 !important; }