:root {
    --dc-blue-950: #071529;
    --dc-blue-900: #0b2b4b;
    --dc-blue-850: #0c2f55;
    --dc-blue-800: #0f3f72;
    --dc-blue-700: #104070;
    --dc-blue-600: #1b568f;

    --dc-red-800: #9b1d2d;
    --dc-red-700: #b11d2a;
    --dc-red-600: #c42a39;
    --dc-red-100: #fbeaec;

    --dc-white: #ffffff;

    --surface: #ffffff;
    --surface-muted: #f5f7fa;
    --surface-soft: #eef3f8;
    --surface-blue: #f2f6fa;

    --text-strong: #071529;
    --text: #30475f;
    --text-soft: #6e8091;
    --text-faint: #8d9cab;

    --border: rgba(16, 64, 112, 0.12);
    --border-strong: rgba(16, 64, 112, 0.22);

    --success: #248657;
    --success-soft: #e8f5ee;

    --warning: #a76818;
    --warning-soft: #fff3df;

    --danger: #a72432;
    --danger-soft: #fcebed;

    --shadow-xs:
        0 2px 8px rgba(7, 21, 41, 0.04);

    --shadow-sm:
        0 8px 24px rgba(7, 21, 41, 0.07);

    --shadow-md:
        0 18px 50px rgba(7, 21, 41, 0.11);

    --radius-xl: 26px;
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 10px;

    --sidebar-width: 258px;

    font-family:
        Inter,
        Aptos,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


* {
    box-sizing: border-box;
}


html,
body {
    min-height: 100%;
    margin: 0;
}


html {
    background: var(--surface-muted);
}


body {
    color: var(--text-strong);
    background: var(--surface-muted);

    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


button,
input {
    -webkit-tap-highlight-color: transparent;
}


button:focus-visible,
input:focus-visible {
    outline:
        3px solid rgba(16, 64, 112, 0.20);

    outline-offset: 2px;
}


[hidden] {
    display: none !important;
}


svg {
    display: block;
}


.app-root {
    min-height: 100vh;
}


/* ============================================================
   SHARED
   ============================================================ */

.eyebrow {
    margin: 0 0 7px;

    color: var(--dc-red-700);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}


.eyebrow-light {
    color: rgba(255, 255, 255, 0.72);
}


.status-dot {
    width: 8px;
    height: 8px;

    display: inline-block;

    border-radius: 999px;

    background: #4cc080;

    box-shadow:
        0 0 0 5px rgba(76, 192, 128, 0.11);
}


.primary-button,
.secondary-button {
    border: 0;

    font-weight: 750;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease,
        opacity 160ms ease;
}


.primary-button {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: var(--radius-md);

    background:
        linear-gradient(
            135deg,
            var(--dc-blue-700),
            var(--dc-blue-900)
        );

    color: var(--dc-white);

    box-shadow:
        0 12px 28px rgba(11, 43, 75, 0.18);
}


.primary-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 14px 32px rgba(11, 43, 75, 0.23);
}


.primary-button:disabled {
    cursor: wait;

    opacity: 0.66;

    transform: none;
}


.secondary-button {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 8px 13px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background: var(--surface);

    color: var(--text);
}


.secondary-button:hover {
    border-color:
        rgba(177, 29, 42, 0.28);

    background: var(--dc-red-100);

    color: var(--dc-red-800);
}


.secondary-button svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   LOGIN
   ============================================================ */

.login-view {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background: var(--surface-muted);
}


.login-pattern {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.72;

    background-image:
        linear-gradient(
            30deg,
            rgba(16, 64, 112, 0.025) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(16, 64, 112, 0.025) 87.5%,
            rgba(16, 64, 112, 0.025)
        ),
        linear-gradient(
            150deg,
            rgba(16, 64, 112, 0.025) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(16, 64, 112, 0.025) 87.5%,
            rgba(16, 64, 112, 0.025)
        ),
        linear-gradient(
            30deg,
            rgba(16, 64, 112, 0.025) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(16, 64, 112, 0.025) 87.5%,
            rgba(16, 64, 112, 0.025)
        ),
        linear-gradient(
            150deg,
            rgba(16, 64, 112, 0.025) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(16, 64, 112, 0.025) 87.5%,
            rgba(16, 64, 112, 0.025)
        ),
        linear-gradient(
            60deg,
            rgba(16, 64, 112, 0.018) 25%,
            transparent 25.5%,
            transparent 75%,
            rgba(16, 64, 112, 0.018) 75%,
            rgba(16, 64, 112, 0.018)
        ),
        linear-gradient(
            60deg,
            rgba(16, 64, 112, 0.018) 25%,
            transparent 25.5%,
            transparent 75%,
            rgba(16, 64, 112, 0.018) 75%,
            rgba(16, 64, 112, 0.018)
        );

    background-size:
        80px 140px;

    background-position:
        0 0,
        0 0,
        40px 70px,
        40px 70px,
        0 0,
        40px 70px;
}


.login-layout {
    position: relative;
    z-index: 1;

    min-height: 100vh;

    display: grid;
    grid-template-columns:
        minmax(420px, 46%)
        minmax(480px, 54%);
}


.login-brand-panel {
    position: relative;

    min-height: 100vh;

    padding:
        clamp(34px, 4.5vw, 68px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(27, 86, 143, 0.72),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(177, 29, 42, 0.22),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            var(--dc-blue-900),
            var(--dc-blue-950)
        );

    color: var(--dc-white);
}


.login-brand-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.16;

    background-image:
        linear-gradient(
            30deg,
            rgba(255,255,255,.14) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(255,255,255,.14) 87.5%
        ),
        linear-gradient(
            150deg,
            rgba(255,255,255,.14) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(255,255,255,.14) 87.5%
        );

    background-size:
        88px 152px;
}


.login-brand-panel::after {
    content: "";

    position: absolute;
    width: 6px;
    inset: 0 0 0 auto;

    background:
        linear-gradient(
            180deg,
            var(--dc-red-700),
            var(--dc-red-800)
        );
}


.brand-lockup,
.brand-message,
.login-segment-signature,
.brand-footer {
    position: relative;
    z-index: 1;
}


.brand-lockup {
    display: flex;
    align-items: center;
    gap: 16px;
}


.brand-lockup-login {
    min-height: 76px;
}


.corporate-mark {
    width: 180px;
    height: 70px;

    display: flex;
    align-items: center;
}


.corporate-logo {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}


.corporate-logo-light {
    filter:
        brightness(0)
        invert(1);
}


.ops-name {
    min-height: 46px;

    padding-left: 16px;

    display: grid;
    align-content: center;

    border-left:
        1px solid rgba(255, 255, 255, 0.20);
}


.ops-name span {
    color:
        rgba(255, 255, 255, 0.50);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.6px;
}


.ops-name strong {
    margin-top: -2px;

    color: var(--dc-white);

    font-size: 26px;
    line-height: 1;
    letter-spacing: 4px;
}


.brand-message {
    max-width: 600px;

    margin: auto 0;
}


.brand-message h1 {
    max-width: 570px;

    margin: 0;

    color: var(--dc-white);

    font-size:
        clamp(38px, 4vw, 60px);

    font-weight: 750;
    line-height: 1.04;
    letter-spacing: -2px;
}


.brand-message > p:not(.eyebrow) {
    max-width: 520px;

    margin:
        20px 0 0;

    color:
        rgba(255, 255, 255, 0.67);

    font-size: 15px;
    line-height: 1.75;
}


.brand-feature-row {
    margin-top: 30px;

    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}


.brand-feature-row > div {
    display: flex;
    align-items: center;
    gap: 8px;

    color:
        rgba(255, 255, 255, 0.73);

    font-size: 12px;
    font-weight: 650;
}


.feature-check {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.10);

    color: var(--dc-white);

    font-size: 10px;
}


.login-segment-signature {
    position: absolute;

    right: 42px;
    bottom: 52px;

    display: flex;
    align-items: center;
    gap: 10px;

    opacity: 0.55;
}


.login-bee {
    width: 58px;
    height: 44px;

    object-fit: contain;

    filter:
        grayscale(1)
        brightness(0)
        invert(1);
}


.login-segment-signature > div {
    display: grid;
}


.login-segment-signature strong {
    color:
        rgba(255, 255, 255, 0.86);

    font-size: 11px;
}


.login-segment-signature span {
    color:
        rgba(255, 255, 255, 0.46);

    font-size: 9px;
}


.brand-footer {
    display: flex;
    align-items: center;
    gap: 9px;

    color:
        rgba(255, 255, 255, 0.53);

    font-size: 11px;
}


.login-card-area {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding:
        36px clamp(28px, 6vw, 100px);
}


.login-card {
    width: min(100%, 460px);

    padding:
        38px 40px;

    border:
        1px solid var(--border);

    border-radius: var(--radius-xl);

    background:
        rgba(255, 255, 255, 0.965);

    box-shadow: var(--shadow-md);

    backdrop-filter:
        blur(12px);
}


.mobile-brand {
    display: none;
}


.mobile-corporate-logo {
    width: 112px;
    height: 45px;

    object-fit: contain;
}


.login-heading {
    margin-bottom: 28px;
}


.login-heading h2 {
    margin: 0;

    color: var(--text-strong);

    font-size: 32px;
    font-weight: 750;
    letter-spacing: -1px;
}


.login-heading > p:last-child {
    max-width: 360px;

    margin: 9px 0 0;

    color: var(--text-soft);

    font-size: 13px;
    line-height: 1.6;
}


.login-form {
    display: grid;
    gap: 20px;
}


.field-group {
    display: grid;
    gap: 8px;
}


.field-group label {
    color: var(--text);

    font-size: 12px;
    font-weight: 700;
}


.input-shell {
    min-height: 51px;

    display: flex;
    align-items: center;

    border:
        1px solid var(--border-strong);

    border-radius: var(--radius-md);

    background: var(--surface);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}


.input-shell:hover {
    border-color:
        rgba(16, 64, 112, 0.32);
}


.input-shell:focus-within {
    border-color: var(--dc-blue-700);

    box-shadow:
        0 0 0 4px rgba(16, 64, 112, 0.08);
}


.input-icon {
    width: 43px;
    height: 51px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    color: var(--dc-blue-700);
}


.input-icon svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.input-shell input {
    width: 100%;
    min-width: 0;

    padding: 13px 6px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--text-strong);

    font-size: 13px;
}


.input-shell input::placeholder {
    color: #9aa7b3;
}


.password-toggle {
    margin-right: 7px;
    padding: 7px 9px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: var(--dc-blue-700);

    font-size: 11px;
    font-weight: 800;
}


.password-toggle:hover {
    background:
        rgba(16, 64, 112, 0.06);
}


.form-message {
    padding: 11px 13px;

    border:
        1px solid rgba(177, 29, 42, 0.20);

    border-radius: 10px;

    background: var(--danger-soft);

    color: var(--danger);

    font-size: 12px;
    line-height: 1.5;
}


.spinner {
    width: 17px;
    height: 17px;

    border:
        2px solid rgba(255, 255, 255, 0.28);

    border-top-color: var(--dc-white);
    border-radius: 50%;

    animation:
        spin 700ms linear infinite;
}


@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


.login-security-note {
    margin-top: 25px;
    padding-top: 20px;

    display: flex;
    align-items: flex-start;
    gap: 10px;

    border-top:
        1px solid var(--border);

    color: var(--text-soft);

    font-size: 11px;
    line-height: 1.5;
}


.login-security-note p {
    margin: 0;
}


.security-icon {
    width: 26px;
    height: 26px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: var(--success-soft);

    color: var(--success);
}


.security-icon svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   APPLICATION SHELL
   ============================================================ */

.shell-view {
    min-height: 100vh;

    display: grid;
    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr);
}


.sidebar {
    position: fixed;
    inset:
        0 auto 0 0;

    z-index: 30;

    width: var(--sidebar-width);
    height: 100vh;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(27, 86, 143, 0.34),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            var(--dc-blue-900),
            var(--dc-blue-950)
        );

    color: var(--dc-white);
}


.sidebar-brand {
    min-height: 82px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding:
        0 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.sidebar-logo {
    width: 126px;
    height: 50px;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1);
}


.sidebar-brand-text {
    padding-left: 12px;

    display: grid;

    border-left:
        1px solid rgba(255,255,255,.14);
}


.sidebar-brand-text strong {
    color: var(--dc-white);

    font-size: 16px;
    line-height: 1;
    letter-spacing: 2px;
}


.sidebar-brand-text span {
    margin-top: 4px;

    color:
        rgba(255,255,255,.38);

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}


.sidebar-navigation {
    flex: 1;
    min-height: 0;

    padding:
        14px 12px 12px;

    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255,255,255,.14)
        transparent;
}


.sidebar-navigation::-webkit-scrollbar {
    width: 5px;
}


.sidebar-navigation::-webkit-scrollbar-track {
    background: transparent;
}


.sidebar-navigation::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(255,255,255,.13);
}


.nav-section-label {
    margin:
        16px 10px 6px;

    color:
        rgba(255, 255, 255, 0.34);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


.nav-item {
    position: relative;

    width: 100%;
    min-height: 39px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding:
        8px 10px;

    border:
        1px solid transparent;

    border-radius: 9px;

    background: transparent;

    color:
        rgba(255, 255, 255, 0.64);

    text-align: left;

    font-size: 12px;
    font-weight: 620;

    transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}


.nav-item:hover {
    background:
        rgba(255,255,255,.055);

    color: var(--dc-white);
}


.nav-item.active {
    border-color:
        rgba(255,255,255,.08);

    background:
        linear-gradient(
            90deg,
            rgba(177,29,42,.22),
            rgba(255,255,255,.055)
        );

    color: var(--dc-white);
}


.nav-item.active::before {
    content: "";

    position: absolute;
    inset:
        7px auto 7px -12px;

    width: 3px;

    border-radius:
        0 4px 4px 0;

    background: var(--dc-red-600);
}


.nav-icon {
    width: 23px;
    height: 23px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color:
        rgba(255,255,255,.52);
}


.nav-item.active .nav-icon {
    background:
        rgba(255,255,255,.08);

    color: var(--dc-white);
}


.nav-icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.sidebar-footer {
    padding:
        12px 16px 14px;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);
}


.environment-badge {
    display: flex;
    align-items: center;
    gap: 9px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 10px;
}


.shell-main {
    grid-column: 2;

    min-width: 0;
    min-height: 100vh;
}


.topbar {
    min-height: 72px;

    position: sticky;
    top: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0 clamp(18px, 3vw, 38px);

    border-bottom:
        1px solid var(--border);

    background:
        rgba(255, 255, 255, 0.955);

    backdrop-filter:
        blur(14px);
}


.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
}


.topbar-left {
    gap: 12px;
}


.topbar-right {
    gap: 11px;
}


.topbar-context {
    margin: 0;

    color: var(--text-soft);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
}


.topbar-title {
    margin: 1px 0 0;

    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.3px;
}


.menu-button {
    display: none;

    width: 38px;
    height: 38px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background: var(--surface);

    color: var(--dc-blue-900);
}


.menu-button svg,
.topbar-action svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.topbar-action {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background: var(--surface);

    color: var(--text);
}


.topbar-action:hover {
    border-color:
        rgba(16,64,112,.24);

    background: var(--surface-blue);

    color: var(--dc-blue-700);
}


.user-summary {
    display: flex;
    align-items: center;
    gap: 9px;

    padding-left: 2px;
}


.user-avatar {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            var(--dc-blue-700),
            var(--dc-blue-900)
        );

    color: var(--dc-white);

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 5px 14px rgba(11,43,75,.14);
}


.user-summary-text {
    display: grid;
}


.user-summary-text strong {
    max-width: 165px;

    overflow: hidden;

    color: var(--text-strong);

    font-size: 12px;
    font-weight: 750;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.user-summary-text span {
    color: var(--text-soft);

    font-size: 10px;
}


.workspace {
    min-height:
        calc(100vh - 72px);

    padding:
        28px clamp(18px, 3vw, 38px) 42px;

    background:
        linear-gradient(
            180deg,
            #f7f9fb,
            #f4f7fa
        );
}


.workspace-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 22px;
}


.workspace-header h2 {
    margin: 0;

    color: var(--text-strong);

    font-size:
        clamp(25px, 2.5vw, 34px);

    font-weight: 750;
    letter-spacing: -1px;
}


.workspace-header > div > p:last-child {
    margin: 5px 0 0;

    color: var(--text-soft);

    font-size: 12px;
}


.date-chip {
    min-width: 145px;

    padding:
        10px 13px;

    border:
        1px solid var(--border);

    border-radius: 11px;

    background: var(--surface);

    box-shadow: var(--shadow-xs);
}


.date-chip span {
    display: block;

    color: var(--dc-red-700);

    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.4px;
}


.date-chip strong {
    display: block;

    margin-top: 2px;

    color: var(--text);

    font-size: 11px;
}


.dashboard-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.metric-card,
.panel {
    border:
        1px solid var(--border);

    background: var(--surface);

    box-shadow: var(--shadow-xs);
}


.metric-card {
    position: relative;

    min-height: 152px;

    padding:
        17px 18px;

    overflow: hidden;

    border-radius: var(--radius-lg);

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        border-color 150ms ease;
}


.metric-card::after {
    content: "";

    position: absolute;

    width: 78px;
    height: 78px;

    right: -35px;
    bottom: -36px;

    border:
        1px solid rgba(16,64,112,.055);

    transform: rotate(30deg);
}


.metric-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(16,64,112,.20);

    box-shadow: var(--shadow-sm);
}


.metric-card-attention {
    border-top:
        2px solid
        rgba(177,29,42,.72);
}


.metric-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 15px;
}


.metric-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: var(--surface-blue);

    color: var(--dc-blue-700);
}


.metric-card-attention .metric-icon {
    background: var(--dc-red-100);

    color: var(--dc-red-700);
}


.metric-icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.metric-status {
    padding:
        4px 7px;

    border-radius: 999px;

    background: var(--dc-red-100);

    color: var(--dc-red-800);

    font-size: 8px;
    font-weight: 800;
}


.metric-status.neutral {
    background: var(--surface-soft);

    color: var(--text-soft);
}


.metric-card p {
    margin: 0;

    color: var(--text);

    font-size: 11px;
    font-weight: 720;
}


.metric-card > strong {
    display: block;

    margin:
        3px 0 1px;

    color: var(--text-strong);

    font-size: 28px;
    line-height: 1;
}


.metric-card small {
    color: var(--text-soft);

    font-size: 10px;
}


.dashboard-columns {
    margin-top: 15px;

    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(280px, 0.65fr);

    gap: 15px;
}


.panel {
    padding:
        20px;

    border-radius: var(--radius-lg);
}


.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


.panel-heading h3 {
    margin: 0;

    font-size: 16px;
    font-weight: 750;
}


.text-button {
    padding: 7px 9px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: var(--dc-blue-700);

    font-size: 10px;
    font-weight: 800;
}


.text-button:hover {
    background: var(--surface-blue);
}


.empty-state {
    min-height: 210px;

    display: grid;
    place-items: center;
    align-content: center;

    padding:
        20px;

    text-align: center;
}


.empty-visual {
    width: 76px;
    height: 62px;

    display: grid;
    place-items: center;

    margin-bottom: 13px;

    opacity: 0.72;
}


.empty-visual img {
    width: 76px;
    height: 54px;

    object-fit: contain;

    filter:
        grayscale(.2)
        saturate(.75);
}


.empty-state strong {
    color: var(--text-strong);

    font-size: 13px;
}


.empty-state p {
    max-width: 365px;

    margin:
        6px auto 0;

    color: var(--text-soft);

    font-size: 11px;
    line-height: 1.55;
}


.panel-access {
    position: relative;

    overflow: hidden;
}


.panel-access::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    right: -50px;
    top: -52px;

    border:
        1px solid rgba(16,64,112,.05);

    transform: rotate(30deg);
}


.access-status {
    padding:
        4px 7px;

    border-radius: 999px;

    background: var(--success-soft);

    color: var(--success);

    font-size: 8px;
    font-weight: 800;
}


.profile-list {
    margin:
        14px 0 0;
}


.profile-list > div {
    padding:
        11px 0;

    border-bottom:
        1px solid var(--border);
}


.profile-list > div:last-child {
    border-bottom: 0;
}


.profile-list dt {
    color: var(--text-soft);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


.profile-list dd {
    margin:
        3px 0 0;

    color: var(--text-strong);

    font-size: 11px;
    font-weight: 720;
}


/* ============================================================
   BOOT
   ============================================================ */

.boot-view {
    min-height: 100vh;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at center,
            var(--dc-blue-800),
            var(--dc-blue-950)
        );
}


.boot-card {
    display: grid;
    justify-items: center;
    gap: 16px;

    color:
        rgba(255,255,255,.65);

    font-size: 11px;
}


.boot-logo {
    width: 150px;
    height: 62px;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1);
}


.boot-loader {
    width: 27px;
    height: 27px;

    border:
        3px solid rgba(255,255,255,.14);

    border-top-color:
        var(--dc-red-600);

    border-radius: 50%;

    animation:
        spin 700ms linear infinite;
}


/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */

.sidebar-overlay {
    display: none;
}


@media (max-width: 1160px) {

    .dashboard-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 920px) {

    .login-view {
        background:
            var(--surface-muted);
    }


    .login-layout {
        display: block;
    }


    .login-brand-panel {
        display: none;
    }


    .login-card-area {
        min-height: 100vh;

        padding:
            24px;
    }


    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 12px;

        margin-bottom: 28px;
    }


    .mobile-brand > div:last-child {
        padding-left: 12px;

        display: grid;

        border-left:
            1px solid var(--border);
    }


    .mobile-brand strong {
        color: var(--dc-blue-900);

        font-size: 13px;
    }


    .mobile-brand span {
        color: var(--text-soft);

        font-size: 10px;
    }


    .shell-view {
        display: block;
    }


    .sidebar {
        transform:
            translateX(-100%);

        box-shadow:
            20px 0 45px rgba(7,21,41,.20);

        transition:
            transform 200ms ease;
    }


    .sidebar.open {
        transform:
            translateX(0);
    }


    .shell-main {
        grid-column: auto;
    }


    .menu-button {
        display: grid;
        place-items: center;
    }


    .sidebar-overlay {
        position: fixed;
        inset: 0;

        z-index: 25;

        display: block;

        border: 0;

        background:
            rgba(7,21,41,.52);

        backdrop-filter:
            blur(2px);
    }


    .dashboard-columns {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 660px) {

    .login-card-area {
        padding:
            18px 14px;
    }


    .login-card {
        padding:
            26px 21px;

        border-radius: 19px;
    }


    .login-heading {
        margin-bottom: 23px;
    }


    .login-heading h2 {
        font-size: 27px;
    }


    .topbar {
        min-height: 66px;

        padding:
            0 13px;
    }


    .topbar-context {
        display: none;
    }


    .topbar-title {
        font-size: 16px;
    }


    .topbar-action,
    .user-summary-text {
        display: none;
    }


    .user-avatar {
        width: 35px;
        height: 35px;
    }


    .secondary-button {
        min-height: 35px;

        padding:
            7px 9px;

        font-size: 11px;
    }


    .secondary-button svg {
        width: 15px;
        height: 15px;
    }


    .workspace {
        min-height:
            calc(100vh - 66px);

        padding:
            21px 13px 34px;
    }


    .workspace-header {
        align-items: flex-start;
        flex-direction: column;

        margin-bottom: 17px;
    }


    .workspace-header h2 {
        font-size: 26px;
    }


    .date-chip {
        width: 100%;
    }


    .dashboard-grid {
        grid-template-columns:
            1fr;

        gap: 11px;
    }


    .metric-card {
        min-height: 136px;
    }


    .dashboard-columns {
        gap: 11px;
    }


    .panel {
        padding: 17px;
    }


    .empty-state {
        min-height: 190px;
    }

}


@media (max-width: 390px) {

    .sidebar {
        width:
            min(86vw, 280px);
    }


    .login-card {
        padding:
            23px 18px;
    }


    .mobile-corporate-logo {
        width: 100px;
    }


    .secondary-button span {
        display: none;
    }

}


/* ============================================================
   V15-F4-C1
   CORRECCIONES VISUALES PUNTUALES APROBADAS
   No modifica layout general ni autenticación.
   ============================================================ */


/*
 * El logo corporativo posee su propia composición/color.
 * En escritorio no debe invertirse, porque la inversión estaba
 * convirtiendo visualmente el recurso en un bloque blanco.
 */

.corporate-logo-light,
.sidebar-logo {
    filter: none;
}


/*
 * Ajuste específico del encabezado de marca.
 */

.ops-name span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0;
}

.ops-name strong {
    margin-top: 1px;
    font-size: 21px;
    letter-spacing: 2px;
}


.sidebar-brand-text strong {
    font-size: 12px;
    letter-spacing: 0;
}

.sidebar-brand-text span {
    margin-top: 3px;
    font-size: 8px;
    letter-spacing: 1.4px;
}


/*
 * Línea roja entre panel institucional y login:
 * conserva el rojo D'Calidad pero elimina el corte sólido.
 */

.login-brand-panel::after {
    width: 3px;

    top: 5%;
    bottom: 5%;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(177, 29, 42, 0.32) 12%,
            rgba(177, 29, 42, 0.84) 50%,
            rgba(177, 29, 42, 0.32) 88%,
            transparent 100%
        );

    box-shadow:
        0 0 14px rgba(177, 29, 42, 0.16);
}


/*
 * Abeja del pie institucional.
 * Se conserva tamaño prudente, pero se muestra a color y
 * con contraste real en lugar de una silueta blanca/gris.
 */

.login-bee {
    width: 72px;
    height: 54px;

    opacity: 1;

    filter: none;
}


/*
 * Firma institucional inferior.
 */

.login-segment-signature {
    opacity: 0.90;
}

.login-segment-signature strong {
    color: rgba(255, 255, 255, 0.92);
}

.login-segment-signature span {
    color: rgba(255, 255, 255, 0.58);
}


/*
 * Abeja del Centro operativo preparado.
 * Más visible en escritorio sin alterar el panel.
 */

.empty-visual {
    width: 116px;
    height: 82px;

    margin-bottom: 14px;

    opacity: 1;
}

.empty-visual img {
    width: 112px;
    height: 78px;

    object-fit: contain;

    opacity: 1;

    filter: none;
}


/*
 * En móvil mantenemos el encabezado que ya se visualiza bien.
 * Solo aumentamos moderadamente la abeja del centro operativo.
 */

@media (max-width: 660px) {

    .empty-visual {
        width: 100px;
        height: 72px;
    }

    .empty-visual img {
        width: 96px;
        height: 68px;
    }

}


/* ============================================================
   V15-F4-D2
   BANDERÍN + ABEJA OFICIAL COMO MARCA DE AGUA
   Ajuste visual puntual.
   ============================================================ */


/* ------------------------------------------------------------
   LOGIN DESKTOP — BANDERÍN
   ------------------------------------------------------------ */

.corporate-mark {
    width: 86px;
    height: 92px;

    flex: 0 0 auto;

    overflow: visible;
}


.corporate-banderin {
    width: 76px;
    height: 92px;

    max-width: none;
    max-height: none;

    object-fit: contain;

    opacity: 0.96;

    filter:
        drop-shadow(
            0 8px 15px
            rgba(0, 0, 0, 0.20)
        );

    mix-blend-mode: normal;
}


/*
 * Suavizamos visualmente la unión del banderín
 * con el fondo azul.
 */

.brand-lockup-login .corporate-mark {
    position: relative;
}


.brand-lockup-login .corporate-mark::after {
    content: "";

    position: absolute;

    left: 9px;
    right: 9px;
    bottom: -5px;

    height: 18px;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(7, 21, 41, 0.26) 0%,
            rgba(7, 21, 41, 0.10) 45%,
            transparent 74%
        );

    filter: blur(4px);

    z-index: -1;
}


/* ------------------------------------------------------------
   LOGIN DESKTOP — ABEJA WATERMARK
   ------------------------------------------------------------ */

.login-bee-watermark {
    position: absolute;

    z-index: 0;

    right:
        clamp(34px, 5vw, 78px);

    bottom:
        clamp(72px, 9vh, 118px);

    width:
        clamp(210px, 23vw, 360px);

    height: auto;

    object-fit: contain;

    pointer-events: none;

    opacity: 0.14;

    filter:
        grayscale(1)
        brightness(0)
        invert(1);

    transform:
        rotate(-4deg);
}


/*
 * Textos y contenido siempre por encima del watermark.
 */

.login-brand-panel > *:not(.login-bee-watermark) {
    position: relative;

    z-index: 1;
}


.login-segment-signature {
    right: 42px;
    bottom: 48px;

    opacity: 0.92;
}


/* ------------------------------------------------------------
   DASHBOARD / SIDEBAR — BANDERÍN
   ------------------------------------------------------------ */

.sidebar {
    overflow: hidden;
}


.sidebar-brand {
    position: relative;

    z-index: 3;

    min-height: 92px;

    padding:
        0 17px;

    gap: 11px;
}


.sidebar-banderin {
    width: 58px;
    height: 76px;

    flex: 0 0 auto;

    object-fit: contain;

    opacity: 0.97;

    filter:
        drop-shadow(
            0 7px 13px
            rgba(0, 0, 0, 0.20)
        );
}


/*
 * El texto D'Calidad / OPS permanece igual.
 */

.sidebar-brand-text {
    position: relative;

    z-index: 2;
}


/* ------------------------------------------------------------
   DASHBOARD / SIDEBAR — ABEJA WATERMARK
   ------------------------------------------------------------ */

.sidebar-bee-watermark {
    position: absolute;

    z-index: 0;

    left: 50%;

    bottom: 42px;

    width: 230px;
    height: auto;

    object-fit: contain;

    pointer-events: none;

    opacity: 0.095;

    filter:
        grayscale(1)
        brightness(0)
        invert(1);

    transform:
        translateX(-50%)
        rotate(-5deg);
}


.sidebar-navigation,
.sidebar-footer {
    position: relative;

    z-index: 2;
}


/*
 * El footer conserva lectura por encima de la abeja.
 */

.sidebar-footer {
    background:
        linear-gradient(
            180deg,
            rgba(7, 21, 41, 0),
            rgba(7, 21, 41, 0.34)
        );
}


/* ------------------------------------------------------------
   ABEJA DEL CENTRO OPERATIVO
   Se mantiene visible pero más clara.
   ------------------------------------------------------------ */

.empty-visual {
    width: 132px;
    height: 92px;
}


.empty-visual img {
    width: 128px;
    height: 88px;

    opacity: 0.92;

    filter: none;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 920px) {

    /*
     * Login móvil actual se conserva.
     * El panel azul de escritorio está oculto,
     * por lo tanto el watermark de login tampoco aparece.
     */

    .login-bee-watermark {
        display: none;
    }


    /*
     * Sidebar móvil:
     * watermark algo menor para no competir con navegación.
     */

    .sidebar-bee-watermark {
        width: 190px;

        bottom: 48px;

        opacity: 0.085;
    }


    .sidebar-banderin {
        width: 54px;
        height: 70px;
    }

}


@media (max-width: 660px) {

    .sidebar-bee-watermark {
        width: 175px;

        bottom: 52px;

        opacity: 0.075;
    }


    .empty-visual {
        width: 112px;
        height: 80px;
    }


    .empty-visual img {
        width: 108px;
        height: 76px;
    }

}


/* ============================================================
   V15.4.2 — FINAL CORPORATE BRAND VISUAL
   Solo ajustes de marca.
   ============================================================ */

/* ---------- LOGIN DESKTOP: BANDERÍN ---------- */

.login-brand-panel .corporate-mark {
    width: 86px;
    height: 108px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    overflow: visible;
}

.login-brand-panel .corporate-logo {
    width: auto;
    height: 104px;
    max-width: none;
    max-height: none;

    object-fit: contain;

    filter:
        drop-shadow(0 5px 12px rgba(0,0,0,.16));

    background: transparent;
}


/* ---------- LOGIN: ABEJA OFICIAL COMO MARCA DE AGUA ---------- */

.login-brand-panel {
    position: relative;
    overflow: hidden;
}

.login-brand-panel::before {
    content: "";

    position: absolute;

    width: clamp(300px, 29vw, 470px);
    aspect-ratio: 3509 / 2482;

    right: clamp(-55px, -2vw, -20px);
    bottom: clamp(-20px, 1vh, 18px);

    background:
        url("/assets/img/dcalidad-bee.png?v=15.4.2")
        center / contain
        no-repeat;

    opacity: .18;

    filter:
        saturate(.75)
        brightness(1.35)
        contrast(.92);

    pointer-events: none;
    z-index: 0;
}

.login-brand-panel > * {
    position: relative;
    z-index: 1;
}


/* Firma nuevamente en su posición inferior derecha original */

.login-segment-signature {
    position: absolute;

    right: clamp(30px, 5vw, 72px);
    bottom: clamp(32px, 6vh, 68px);

    z-index: 2;

    display: block;
    text-align: left;
}

/* La abeja pequeña anterior ya no participa en la firma */
.login-segment-signature .login-bee {
    display: none;
}


/* ---------- SIDEBAR: BANDERÍN ---------- */

.sidebar-logo {
    width: 62px;
    height: 78px;

    object-fit: contain;

    filter:
        drop-shadow(0 4px 9px rgba(0,0,0,.16));

    background: transparent;
}


/* ---------- SIDEBAR: ABEJA COMO MARCA DE AGUA ---------- */

.sidebar {
    position: relative;
    overflow: hidden;
}

.sidebar::before {
    content: "";

    position: absolute;

    width: 310px;
    aspect-ratio: 3509 / 2482;

    left: -82px;
    bottom: 22px;

    background:
        url("/assets/img/dcalidad-bee.png?v=15.4.2")
        center / contain
        no-repeat;

    opacity: .14;

    filter:
        saturate(.75)
        brightness(1.4)
        contrast(.9);

    pointer-events: none;
    z-index: 0;
}

.sidebar > * {
    position: relative;
    z-index: 1;
}


/* ---------- ABEJA CENTRAL DEL DASHBOARD ---------- */

.empty-visual {
    width: 150px;
    height: 105px;

    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-visual img {
    width: 140px;
    height: 96px;

    object-fit: contain;

    opacity: .82;

    filter: none;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {

    /*
     * En móvil se conserva el encabezado móvil que ya funciona bien.
     * El gran panel institucional de login no interviene.
     */

    .sidebar::before {
        width: 250px;
        left: -78px;
        bottom: 18px;
        opacity: .12;
    }

    .sidebar-logo {
        width: 54px;
        height: 68px;
    }

    .empty-visual {
        width: 130px;
        height: 94px;
    }

    .empty-visual img {
        width: 120px;
        height: 84px;
    }
}

@media (max-width: 600px) {

    .sidebar::before {
        width: 220px;
        left: -72px;
        bottom: 24px;
        opacity: .11;
    }

    .empty-visual {
        width: 118px;
        height: 86px;
    }

    .empty-visual img {
        width: 108px;
        height: 76px;
    }
}


/* ============================================================
   V15-F4-D6 — CORRECCIÓN VISUAL FINAL PRECISA
   ============================================================ */

/* 1. BOOT: mostrar recurso original sin conversión blanca */
.boot-logo {
    width: 118px;
    height: 150px;
    object-fit: contain;
    filter: none !important;
    background: transparent !important;
}

/* 2. LOGIN: eliminar abeja duplicada del pseudo-elemento */
.login-brand-panel::before {
    content: none !important;
    display: none !important;
}

/* Usar exclusivamente la imagen oficial como watermark */
.login-bee-watermark {
    display: block !important;
    position: absolute !important;

    width: clamp(300px, 30vw, 470px) !important;
    height: auto !important;

    right: clamp(-50px, -2vw, -18px) !important;
    bottom: clamp(-10px, 1vh, 22px) !important;

    object-fit: contain !important;

    opacity: 0.20 !important;
    filter: none !important;

    mix-blend-mode: normal !important;

    pointer-events: none !important;
    z-index: 0 !important;
}

/* Firma institucional exactamente abajo a la derecha */
.login-segment-signature {
    position: absolute !important;

    right: clamp(34px, 4vw, 64px) !important;
    left: auto !important;

    bottom: clamp(30px, 5vh, 54px) !important;
    top: auto !important;

    display: block !important;
    text-align: right !important;

    opacity: 0.92 !important;
    z-index: 3 !important;
}

/* 3. SIDEBAR: eliminar segunda abeja dibujada */
.sidebar::before {
    content: none !important;
    display: none !important;
}

/* Mantener solamente la imagen oficial */
.sidebar-bee-watermark {
    display: block !important;
    position: absolute !important;

    width: 245px !important;
    height: auto !important;

    left: 50% !important;
    right: auto !important;
    bottom: 38px !important;

    transform: translateX(-50%) !important;

    object-fit: contain !important;

    opacity: 0.17 !important;
    filter: none !important;

    mix-blend-mode: normal !important;

    pointer-events: none !important;
    z-index: 0 !important;
}

/* Navegación siempre por encima */
.sidebar-brand,
.sidebar-navigation,
.sidebar-footer {
    position: relative;
    z-index: 2;
}

/* Responsive sidebar */
@media (max-width: 980px) {
    .sidebar-bee-watermark {
        width: 210px !important;
        bottom: 42px !important;
        opacity: 0.15 !important;
    }
}

@media (max-width: 600px) {
    .sidebar-bee-watermark {
        width: 185px !important;
        bottom: 46px !important;
        opacity: 0.14 !important;
    }
}



/* ============================================================
   V15-F4-E1
   CLEAN CORPORATE BRAND FINAL
   ============================================================ */


/* ------------------------------------------------------------
   1. ELIMINAR TODAS LAS ABEJAS VISUALES
   ------------------------------------------------------------ */

/* Login */
.login-bee-watermark,
.login-bee {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Sidebar */
.sidebar-bee-watermark {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Centro operativo preparado */
.empty-visual {
    display: none !important;
}

/* Anulamos cualquier abeja construida mediante pseudo-elementos */
.login-brand-panel::before,
.sidebar::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
}


/* ------------------------------------------------------------
   2. FIRMA D'CALIDAD PERU
   ESQUINA INFERIOR DERECHA
   ------------------------------------------------------------ */

.login-segment-signature {
    position: absolute !important;

    /*
     * Margen derecho equivalente a la sangría visual
     * utilizada por el contenido del lado izquierdo.
     */
    right: clamp(72px, 5.2vw, 96px) !important;
    left: auto !important;

    bottom: clamp(42px, 5.5vh, 62px) !important;
    top: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    text-align: right !important;

    opacity: 1 !important;

    z-index: 3 !important;
}


.login-segment-signature > div {
    display: grid !important;
    justify-items: end !important;
    gap: 2px !important;
}


.login-segment-signature strong {
    color: rgba(255,255,255,.94) !important;

    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
}


.login-segment-signature span {
    color: rgba(255,255,255,.62) !important;

    font-size: 10px !important;
    line-height: 1.25 !important;
}


/* ------------------------------------------------------------
   3. BOOT SCREEN — BANDERÍN REAL
   ------------------------------------------------------------ */

.boot-logo {
    width: 68px !important;
    height: 106px !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    filter: none !important;

    background: transparent !important;

    opacity: 1 !important;
}


/* ------------------------------------------------------------
   4. SIDEBAR SIN ABEJA
   ------------------------------------------------------------ */

.sidebar {
    background-image: none;
}


/* ------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 920px) {

    /*
     * El panel institucional desktop no se utiliza en login móvil.
     * No alteramos la tarjeta móvil actual.
     */

    .login-segment-signature {
        right: 32px !important;
        bottom: 34px !important;
    }

}


@media (max-width: 660px) {

    .login-segment-signature {
        right: 24px !important;
        bottom: 28px !important;
    }

}


/* ============================================================
   V15-F4-E5
   RESTORE ORIGINAL DASHBOARD SIDEBAR
   Login y resto de interfaz no se modifican.
   ============================================================ */

.sidebar {
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(27, 86, 143, 0.34),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            var(--dc-blue-900),
            var(--dc-blue-950)
        ) !important;
}

/* Las abejas continúan eliminadas */
.sidebar-bee-watermark {
    display: none !important;
}

.sidebar::before {
    content: none !important;
    display: none !important;
}



/* ============================================================
   V15-F6-Q
   MOBILE / IOS — SHELL FLOW FIX
   ============================================================ */

@media (max-width: 920px) {

    /*
     * En móvil el sidebar es un drawer fixed y no debe
     * participar en el flujo vertical del shell.
     *
     * Safari/iOS estaba colocando .shell-main después de la
     * altura calculada del sidebar (~815px), dejando un
     * viewport vacío antes del Dashboard.
     */

    .shell-view {
        position: relative;
        display: block;
        min-height: 100vh;
    }


    .shell-main {
        position: relative;
        display: block;

        width: 100%;
        min-width: 0;
        min-height: 100vh;

        margin: 0;
        padding: 0;

        grid-column: auto;
    }


    .sidebar {
        position: fixed;

        top: 0;
        left: 0;
        bottom: 0;

        margin: 0;

        height: 100vh;
        height: 100dvh;
    }

}


/* ============================================================
   VARROA MODULE
   ============================================================ */

.varroa-header {
    align-items: center;
}

.varroa-new-button {
    flex: 0 0 auto;
}

.varroa-summary-grid {
    margin-bottom: 15px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.varroa-summary-card {
    min-height: 132px;

    padding:
        18px;

    display: flex;
    flex-direction: column;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-xs);
}

.varroa-summary-label {
    color:
        var(--text-soft);

    font-size: 12px;
    font-weight: 750;
}

.varroa-summary-card strong {
    margin-top: 14px;

    color:
        var(--text);

    font-size: 31px;
    line-height: 1;
}

.varroa-summary-card small {
    margin-top: auto;

    padding-top: 12px;

    color:
        var(--text-soft);

    font-size: 11px;
}

.varroa-history-panel {
    margin-top: 0;
}

.varroa-empty-state {
    min-height: 320px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        38px 20px;

    text-align: center;
}

.varroa-empty-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 16px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background:
        rgba(16, 64, 112, 0.06);

    color:
        var(--dc-blue-700);
}

.varroa-empty-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.varroa-empty-state strong {
    color:
        var(--text);

    font-size: 16px;
}

.varroa-empty-state p {
    max-width: 430px;

    margin:
        8px 0 18px;

    color:
        var(--text-soft);

    font-size: 12px;
    line-height: 1.6;
}

.varroa-table-wrap {
    overflow-x: auto;
}

.varroa-table {
    width: 100%;

    border-collapse:
        collapse;
}

.varroa-table th,
.varroa-table td {
    padding:
        12px 10px;

    border-bottom:
        1px solid var(--border);

    text-align:
        left;

    white-space:
        nowrap;
}

.varroa-table th {
    color:
        var(--text-soft);

    font-size: 10px;
    font-weight: 800;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;
}

.varroa-table td {
    color:
        var(--text);

    font-size: 12px;
}

.varroa-form-panel {
    margin-top: 15px;
}

.varroa-form-placeholder {
    min-height: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        28px;

    text-align: center;
}

.varroa-form-placeholder strong {
    font-size: 15px;
}

.varroa-form-placeholder p {
    max-width: 520px;

    margin-top: 8px;

    color:
        var(--text-soft);

    font-size: 12px;
    line-height: 1.6;
}


@media (max-width: 920px) {

    .varroa-header {
        align-items:
            stretch;
    }

    .varroa-new-button {
        width: 100%;
    }

    .varroa-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 560px) {

    .varroa-summary-grid {
        grid-template-columns:
            1fr;
    }

    .varroa-summary-card {
        min-height:
            118px;
    }

    .varroa-empty-state {
        min-height:
            250px;

        padding:
            28px 16px;
    }
}

/* ==========================================================
   VARROA MODAL
   ========================================================== */

.varroa-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.varroa-modal[hidden] {
    display: none;
}

.varroa-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(3px);
}

.varroa-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(820px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    padding: 26px;
}

.varroa-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.varroa-modal-subtitle {
    margin: 6px 0 0;
    color: #64748b;
}

.varroa-modal-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.varroa-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.varroa-form-grid label,
.varroa-notes-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-weight: 600;
    color: #334155;
}

.varroa-form-grid input,
.varroa-form-grid select,
.varroa-notes-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 11px 12px;
    background: #fff;
    font: inherit;
    color: #0f172a;
}

.varroa-technical-indicator {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    margin: 22px 0;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.varroa-traffic-light {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 6px rgba(148, 163, 184, 0.15);
}

.varroa-indicator-label {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #64748b;
}

.varroa-technical-indicator p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 13px;
}

.varroa-rate-box {
    min-width: 105px;
    text-align: right;
}

.varroa-rate-box span {
    display: block;
    font-size: 12px;
    color: #64748b;
}

.varroa-rate-box strong {
    font-size: 24px;
}

.varroa-technical-indicator.is-healthy
.varroa-traffic-light {
    background: #16a34a;
    box-shadow: 0 0 0 6px rgba(22, 163, 74, .14);
}

.varroa-technical-indicator.is-watch
.varroa-traffic-light {
    background: #eab308;
    box-shadow: 0 0 0 6px rgba(234, 179, 8, .16);
}

.varroa-technical-indicator.is-high,
.varroa-technical-indicator.is-critical {
    border-color: #fecaca;
    background: #fff7f7;
}

.varroa-technical-indicator.is-high
.varroa-traffic-light,
.varroa-technical-indicator.is-critical
.varroa-traffic-light {
    background: #dc2626;
    box-shadow: 0 0 0 6px rgba(220, 38, 38, .14);
}

.varroa-notes-field {
    margin-top: 4px;
}

.varroa-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
}

body.varroa-modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .varroa-modal {
        padding: 10px;
        align-items: flex-end;
    }

    .varroa-modal-dialog {
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        padding: 20px;
    }

    .varroa-form-grid {
        grid-template-columns: 1fr;
    }

    .varroa-technical-indicator {
        grid-template-columns: auto 1fr;
    }

    .varroa-rate-box {
        grid-column: 2;
        text-align: left;
    }

    .varroa-modal-actions {
        flex-direction: column-reverse;
    }

    .varroa-modal-actions button {
        width: 100%;
    }
}


/* V15-F13-Q — Sites modal layout */

#sitesForm .sites-access-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 20px;
}

#sitesForm .sites-access-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

#sitesForm .sites-access-options input {
    width: 18px;
    height: 18px;
    margin: 0;
}

#sitesForm .sites-notes-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 18px;
    font-weight: 600;
    color: #334155;
}

#sitesForm .sites-notes-field textarea {
    width: 100%;
    min-height: 90px;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 11px 12px;
    background: #fff;
    font: inherit;
    color: #0f172a;
}

#sitesFormMessage {
    margin-top: 12px;
    font-size: 14px;
    color: #475569;
}

@media (max-width: 700px) {
    #sitesForm .sites-access-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}


/* V15-F15-D — Sites redesign */

.sites-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sites-summary {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) 2fr;
    gap: 18px;
    margin-bottom: 18px;
}

.sites-total-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid #dbe4ee;
    background: #ffffff;
}

.sites-total-card span {
    display: block;
    color: #64748b;
    font-weight: 700;
}

.sites-total-card strong {
    display: block;
    margin-top: 8px;
    font-size: 42px;
    line-height: 1;
    color: #0f172a;
}

.sites-total-card p {
    margin: 18px 0 0;
    color: #64748b;
}

.sites-type-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.sites-type-summary article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
}

.sites-type-summary span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.sites-type-summary strong {
    margin-top: 8px;
    font-size: 26px;
    color: #0f172a;
}

.sites-validation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.sites-validation-bar > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sites-validation-bar span {
    color: #64748b;
    font-size: 13px;
}

.sites-filter-buttons {
    display: flex;
    gap: 8px;
}

.sites-filter-button {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 8px 14px;
    background: #fff;
    font: inherit;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
}

.sites-filter-button.is-active {
    border-color: #0f766e;
    background: #ecfdf5;
    color: #0f766e;
}

.sites-empty-state {
    padding: 34px 20px;
    text-align: center;
}

.sites-empty-state strong {
    display: block;
    color: #334155;
}

.sites-empty-state p {
    max-width: 520px;
    margin: 7px auto 0;
    color: #64748b;
}

@media (max-width: 900px) {

    .sites-summary {
        grid-template-columns: 1fr;
    }

    .sites-type-summary {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 700px) {

    .sites-header-actions {
        width: 100%;
        flex-direction: column-reverse;
    }

    .sites-header-actions button {
        width: 100%;
    }

    .sites-type-summary {
        grid-template-columns: 1fr 1fr;
    }

    .sites-validation-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .sites-filter-buttons {
        width: 100%;
        overflow-x: auto;
    }

}


/* =========================================================
   V15-F16 — SITES METRIC CARDS
   ========================================================= */

.sites-type-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}


.sites-type-summary .sites-metric-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    min-width: 0;
    min-height: 150px;
    padding: 20px;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;

    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.04),
        0 10px 24px rgba(15, 23, 42, 0.06);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}


.sites-type-summary .sites-metric-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: currentColor;
    opacity: 0.72;
}


.sites-type-summary .sites-metric-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 5px 10px rgba(15, 23, 42, 0.05),
        0 18px 34px rgba(15, 23, 42, 0.10);

    border-color: rgba(15, 23, 42, 0.13);
}


.sites-metric-breeding {
    color: #7c3aed;
}


.sites-metric-production {
    color: #d97706;
}


.sites-metric-pollination {
    color: #ca8a04;
}


.sites-metric-temporary {
    color: #2563eb;
}


.sites-metric-icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 14px;

    background: color-mix(
        in srgb,
        currentColor 10%,
        white
    );

    border: 1px solid color-mix(
        in srgb,
        currentColor 15%,
        white
    );

    font-size: 24px;
    line-height: 1;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8);
}


.sites-metric-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}


.sites-metric-title {
    display: block;

    color: #475569;

    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.015em;
}


.sites-metric-content > strong {
    display: block;

    margin-top: 5px;

    color: #0f172a;

    font-size: 2rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.04em;
}


.sites-metric-content > strong::after {
    content: " sitios";

    margin-left: 5px;

    color: #94a3b8;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
}


.sites-metric-details {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: auto;
    padding-top: 16px;
}


.sites-metric-details span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;

    padding: 5px 8px;

    color: #64748b;
    background: #f8fafc;

    border: 1px solid #eef2f7;
    border-radius: 8px;

    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}


.sites-metric-details b {
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 800;
}


/* =========================================================
   SITE ACCESS OPTIONS
   ========================================================= */

.sites-access-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 16px;
    margin-bottom: 16px;
}


.sites-access-option {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
    padding: 14px 15px;

    cursor: pointer;
    user-select: none;

    background: #ffffff;

    border: 1px solid #dfe5ec;
    border-radius: 14px;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}


.sites-access-option:hover {
    transform: translateY(-2px);

    border-color: #b8c5d4;

    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.07);
}


.sites-access-option:has(input:checked) {
    background: #f0fdf4;
    border-color: #86c99a;

    box-shadow:
        0 0 0 2px rgba(34, 197, 94, 0.08);
}


.sites-access-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}


.sites-access-icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    border-radius: 12px;

    background: #f1f5f9;

    font-size: 22px;

    transition:
        transform 160ms ease,
        background 160ms ease;
}


.sites-access-option:hover .sites-access-icon {
    transform: scale(1.05);
}


.sites-access-option:has(input:checked)
.sites-access-icon {
    background: #dcfce7;
}


.sites-access-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


.sites-access-text strong {
    color: #1e293b;

    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}


.sites-access-text small {
    margin-top: 3px;

    color: #64748b;

    font-size: 0.69rem;
    line-height: 1.3;
}


.sites-access-option::after {
    content: "";

    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin-left: auto;

    border: 2px solid #cbd5e1;
    border-radius: 50%;

    background: #ffffff;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.sites-access-option:has(input:checked)::after {
    background: #16a34a;
    border-color: #16a34a;

    box-shadow:
        inset 0 0 0 4px #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

    .sites-type-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .sites-type-summary {
        grid-template-columns: 1fr;
    }

    .sites-type-summary .sites-metric-card {
        min-height: 132px;
    }

    .sites-access-options {
        grid-template-columns: 1fr;
    }

}


@media (prefers-reduced-motion: reduce) {

    .sites-type-summary .sites-metric-card,
    .sites-access-option,
    .sites-access-icon {
        transition: none;
    }

    .sites-type-summary .sites-metric-card:hover,
    .sites-access-option:hover {
        transform: none;
    }

}


/* ============================================================
   V15-F16-L-R2
   EXACT SITES VISUAL REDESIGN
   ============================================================ */

.sites-exact-overview {
    display: grid;
    grid-template-columns:
        minmax(285px, 1.4fr)
        minmax(0, 3.8fr);
    gap: 14px;

    margin-bottom: 16px;
}


.sites-exact-total-card {
    position: relative;

    min-height: 196px;

    display: grid;
    grid-template-columns: 72px 1fr 34px;
    gap: 15px;

    padding: 19px 17px;

    overflow: hidden;

    border: 1px solid #dbe5ee;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 68%,
            #f4fbff 100%
        );

    box-shadow:
        0 3px 8px rgba(15,42,67,.035);

    transition:
        transform 170ms ease,
        box-shadow 170ms ease;
}


.sites-exact-total-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 8px 16px rgba(15,42,67,.06),
        0 18px 34px rgba(15,42,67,.09);
}


.sites-exact-total-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #0877c9;

    background:
        linear-gradient(
            145deg,
            #e7f6ff,
            #c8eaff
        );
}


.sites-exact-total-icon svg {
    width: 31px;
    height: 31px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.sites-exact-total-content {
    position: relative;
    z-index: 2;
}


.sites-exact-total-content > span {
    display: block;

    margin-top: 7px;

    color: #203d5d;

    font-size: 15px;
    font-weight: 800;
}


.sites-exact-total-content > strong {
    display: block;

    margin-top: 4px;

    color: #082542;

    font-size: 43px;
    font-weight: 850;
    line-height: .95;
}


.sites-exact-total-content > p {
    margin: 16px 0 0;

    color: #6c84a0;

    font-size: 13px;
    line-height: 1.45;
}


.sites-exact-total-chart {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: #7089a6;
    background: #f1f6fa;
}


.sites-exact-total-chart svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}


.sites-exact-hills {
    position: absolute;

    right: 0;
    bottom: -10px;

    width: 58%;
    height: 90px;

    pointer-events: none;
}


.sites-exact-hills span {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    border-radius: 80% 0 0 0;

    transform:
        rotate(-5deg)
        skewX(-17deg);

    transform-origin: bottom right;
}


.sites-exact-hills span:nth-child(1) {
    bottom: -30px;
    background: rgba(199,231,253,.66);
}


.sites-exact-hills span:nth-child(2) {
    right: 10%;
    bottom: -45px;
    background: rgba(218,239,254,.78);
}


.sites-exact-hills span:nth-child(3) {
    right: 27%;
    bottom: -58px;
    background: rgba(235,247,255,.95);
}


/* categories */

.sites-exact-category-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}


.sites-exact-category {
    --category-color: #168a46;
    --category-soft: #effcf4;
    --category-border: #ccebd8;

    min-height: 196px;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 13px;

    border:
        1px solid var(--category-border);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            var(--category-soft) 100%
        );

    box-shadow:
        0 3px 8px rgba(15,42,67,.035);

    transition:
        transform 170ms ease,
        box-shadow 170ms ease;
}


.sites-exact-category:hover {
    transform: translateY(-4px);

    box-shadow:
        0 8px 16px rgba(15,42,67,.06),
        0 18px 34px rgba(15,42,67,.09);
}


.sites-exact-breeding {
    --category-color: #168a46;
    --category-soft: #effcf4;
    --category-border: #ccebd8;
}


.sites-exact-production {
    --category-color: #c88600;
    --category-soft: #fff8e8;
    --category-border: #f2dfad;
}


.sites-exact-pollination {
    --category-color: #6435d7;
    --category-soft: #f6f2ff;
    --category-border: #ded3fa;
}


.sites-exact-temporary {
    --category-color: #dc4b20;
    --category-soft: #fff3ed;
    --category-border: #f5d5c7;
}


.sites-exact-category-top {
    display: grid;
    grid-template-columns: 52px 1fr 18px;
    align-items: start;
    gap: 10px;
}


.sites-exact-category-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--category-color);

    background:
        color-mix(
            in srgb,
            var(--category-color) 14%,
            white
        );
}


.sites-exact-category-icon svg {
    width: 28px;
    height: 28px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.sites-exact-category-top > div:nth-child(2) > span {
    display: block;

    margin-top: 4px;

    color: #102b49;

    font-size: 12px;
    font-weight: 800;
}


.sites-exact-category-top > div:nth-child(2) > strong {
    display: block;

    margin-top: 7px;

    color: #082542;

    font-size: 31px;
    font-weight: 850;
    line-height: 1;
}


.sites-exact-arrow {
    margin-top: -2px;

    color: var(--category-color);

    font-size: 29px;
    line-height: 1;
}


.sites-exact-category-stats {
    display: grid;
    gap: 8px;

    margin-top: auto;
    padding-top: 12px;
}


.sites-exact-category-stats div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}


.sites-exact-category-stats span {
    color: #7187a0;

    font-size: 12px;
}


.sites-exact-category-stats b {
    color: #0b3157;

    font-size: 15px;
    font-weight: 850;
}


/* filter */

.sites-exact-filter {
    min-height: 72px;

    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 14px;

    margin-bottom: 16px;
    padding: 11px 18px;

    border: 1px solid #dbe5ee;
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 2px 5px rgba(15,42,67,.025);
}


.sites-exact-filter-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #0b8e7c;
    background: #dcf7ee;
}


.sites-exact-filter-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}


.sites-exact-filter-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.sites-exact-filter-text strong {
    color: #102b49;

    font-size: 14px;
    font-weight: 850;
}


.sites-exact-filter-text span {
    color: #7187a0;

    font-size: 12px;
}


.sites-exact-filter
.sites-filter-button {
    min-height: 37px;

    padding: 7px 18px;

    border: 1px solid #cddae6;
    border-radius: 999px;

    background: #ffffff;

    color: #35516f;

    font: inherit;
    font-size: 12px;
    font-weight: 800;

    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}


.sites-exact-filter
.sites-filter-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 5px 12px rgba(15,42,67,.07);
}


.sites-exact-filter
.sites-filter-button.is-active {
    color: #ffffff;

    border-color: #078c7a;

    background:
        linear-gradient(
            135deg,
            #139d8b,
            #087b6e
        );

    box-shadow:
        0 5px 12px rgba(8,123,110,.17);
}


/* registry */

.sites-exact-registry {
    overflow: hidden;

    border: 1px solid #dbe5ee;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 3px 8px rgba(15,42,67,.035);
}


.sites-exact-registry-head {
    min-height: 74px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 14px 18px;
}


.sites-exact-registry-title {
    display: flex;
    align-items: center;
    gap: 13px;
}


.sites-exact-list-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #0877c9;
    background: #dff1ff;
}


.sites-exact-list-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}


.sites-exact-registry-title strong {
    display: block;

    color: #102b49;

    font-size: 14px;
    font-weight: 850;
}


.sites-exact-registry-title span {
    display: block;

    margin-top: 3px;

    color: #7187a0;

    font-size: 11px;
}


.sites-exact-search {
    width: min(315px, 35vw);
    min-height: 38px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 0 12px;

    border: 1px solid #d3dfe9;
    border-radius: 10px;

    background: #fbfdff;
}


.sites-exact-search svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: #6f88a4;
    stroke-width: 2;
}


.sites-exact-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #294763;

    font: inherit;
    font-size: 11px;
}


/* empty */

.sites-exact-empty {
    min-height: 185px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 15px 20px 18px;

    text-align: center;
}


.sites-exact-empty-map {
    position: relative;

    width: 82px;
    height: 64px;

    margin-bottom: 5px;
}


.sites-exact-empty-map-base {
    position: absolute;

    inset: 5px 0 0;

    width: 82px;
    height: 59px;

    fill: #edf4f9;
    stroke: #b7c8d8;
    stroke-width: 1.8;
}


.sites-exact-empty-pin {
    position: absolute;

    width: 37px;
    height: 37px;

    top: -1px;
    left: 31px;

    fill: #126ea9;
    stroke: #126ea9;

    filter:
        drop-shadow(
            0 4px 4px
            rgba(8,66,107,.18)
        );
}


.sites-exact-empty-pin circle {
    fill: #ffffff;
    stroke: #ffffff;
}


.sites-exact-empty > strong {
    color: #102b49;

    font-size: 13px;
    font-weight: 850;
}


.sites-exact-empty > p {
    max-width: 610px;

    margin: 7px auto 0;

    color: #7187a0;

    font-size: 11px;
}


.sites-exact-empty-actions {
    display: flex;
    justify-content: center;
    gap: 9px;

    margin-top: 12px;
}


.sites-exact-map-button {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 17px;

    border: 1px solid #aabed0;
    border-radius: 8px;

    background: #ffffff;

    color: #0a548c;

    font: inherit;
    font-size: 11px;
    font-weight: 800;
}


.sites-exact-map-button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: #0877c9;
    stroke-width: 1.9;
}


/* access strip */

.sites-exact-access-strip {
    min-height: 74px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid #e4ebf1;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfdff
        );
}


.sites-exact-access-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 12px 18px;
}


.sites-exact-access-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 18px;
    bottom: 18px;

    width: 1px;

    background: #dce6ee;
}


.sites-exact-access-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;
}


.sites-exact-access-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}


.sites-access-green {
    color: #17813c;
    background: #dff6e7;
}


.sites-access-blue {
    color: #0877c9;
    background: #dff1ff;
}


.sites-access-purple {
    color: #6440c7;
    background: #eee8ff;
}


.sites-exact-access-item strong {
    display: block;

    color: #173451;

    font-size: 10px;
    font-weight: 850;
}


.sites-exact-access-item span {
    display: block;

    margin-top: 3px;

    color: #7187a0;

    font-size: 9px;
    line-height: 1.3;
}


/* responsive */

@media (max-width: 1250px) {

    .sites-exact-overview {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 1000px) {

    .sites-exact-category-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sites-exact-access-strip {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 720px) {

    .sites-exact-category-grid {
        grid-template-columns: 1fr;
    }

    .sites-exact-filter {
        grid-template-columns: 44px 1fr;
    }

    .sites-exact-filter
    .sites-filter-buttons {
        grid-column: 1 / -1;
    }

    .sites-exact-registry-head {
        flex-direction: column;
        align-items: stretch;
    }

    .sites-exact-search {
        width: 100%;
    }

    .sites-exact-access-strip {
        grid-template-columns: 1fr;
    }

    .sites-exact-empty-actions {
        flex-direction: column;
        width: 100%;
    }

    .sites-exact-empty-actions button {
        width: 100%;
    }

}


/* ============================================================
   V15-F17-B
   MOBILE DENSITY + COLLAPSIBLE SITES PANELS
   ============================================================ */

.sites-collapsible {
    display: block;
    min-height: 0;
    padding: 0;
}


.sites-collapse-trigger {
    width: 100%;
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 11px 18px;

    border: 0;
    border-radius: inherit;

    background: transparent;

    color: inherit;
    font: inherit;
    text-align: left;

    cursor: pointer;
}


.sites-collapse-leading {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 14px;
}


.sites-collapse-chevron {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    color: #496783;
    background: #f3f7fa;

    transition:
        transform 180ms ease,
        background 180ms ease;
}


.sites-collapse-chevron svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.sites-collapsible.is-expanded
.sites-collapse-chevron {
    transform: rotate(180deg);

    background: #e8f2f8;
}


.sites-collapse-content[hidden] {
    display: none !important;
}


/* Filter accordion */

.sites-exact-filter.sites-collapsible {
    margin-bottom: 16px;
}


.sites-exact-filter.sites-collapsible
.sites-collapse-content {
    padding:
        0 18px 15px 80px;
}


.sites-exact-filter.sites-collapsible
.sites-filter-buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}


/* Registry accordion */

.sites-exact-registry.sites-collapsible {
    overflow: hidden;
}


.sites-registry-toggle-end {
    display: flex;
    align-items: center;
    gap: 12px;

    flex: 0 0 auto;
}


.sites-registry-count {
    min-width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    padding: 0 9px;

    border-radius: 999px;

    color: #0877c9;
    background: #e5f4ff;

    font-size: 13px;
    font-weight: 850;
}


.sites-registry-collapse-content {
    border-top: 1px solid #e5edf3;
}


.sites-registry-tools {
    min-height: 62px;

    border-bottom: 1px solid #edf2f6;
}


.sites-registry-tools > div > strong {
    color: #294763;

    font-size: 12px;
    font-weight: 800;
}


/* Mobile: total full width + four compact 2 x 2 cards */

@media (max-width: 720px) {

    .sites-exact-overview {
        gap: 12px;
    }


    .sites-exact-category-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .sites-exact-category {
        min-height: 158px;

        padding:
            12px 11px 11px;

        border-radius: 16px;
    }


    .sites-exact-category-top {
        grid-template-columns:
            39px minmax(0, 1fr) 12px;

        gap: 7px;
    }


    .sites-exact-category-icon {
        width: 38px;
        height: 38px;
    }


    .sites-exact-category-icon svg {
        width: 22px;
        height: 22px;
    }


    .sites-exact-category-top
    > div:nth-child(2)
    > span {
        margin-top: 1px;

        font-size: 10px;
        line-height: 1.15;
    }


    .sites-exact-category-top
    > div:nth-child(2)
    > strong {
        margin-top: 4px;

        font-size: 25px;
    }


    .sites-exact-arrow {
        margin-top: 1px;

        font-size: 22px;
    }


    .sites-exact-category-stats {
        gap: 6px;

        padding-top: 10px;
    }


    .sites-exact-category-stats span {
        font-size: 9px;
        line-height: 1.2;
    }


    .sites-exact-category-stats b {
        font-size: 12px;
    }


    .sites-collapse-trigger {
        min-height: 68px;

        gap: 9px;

        padding: 10px 13px;
    }


    .sites-collapse-leading {
        gap: 10px;
    }


    .sites-collapse-chevron {
        width: 30px;
        height: 30px;
    }


    .sites-exact-filter.sites-collapsible {
        display: block;

        grid-template-columns: none;
    }


    .sites-exact-filter.sites-collapsible
    .sites-collapse-content {
        padding:
            0 13px 13px;
    }


    .sites-exact-filter.sites-collapsible
    .sites-filter-buttons {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 7px;
    }


    .sites-exact-filter.sites-collapsible
    .sites-filter-button {
        width: 100%;

        min-height: 36px;

        padding: 6px 8px;

        font-size: 10px;
    }


    .sites-exact-filter-text span {
        overflow: hidden;

        max-width: 250px;

        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .sites-registry-collapse-trigger {
        min-height: 72px;
    }


    .sites-registry-toggle-end {
        gap: 7px;
    }


    .sites-registry-count {
        min-width: 29px;
        height: 29px;

        font-size: 11px;
    }


    .sites-registry-tools {
        padding: 12px 14px;

        flex-direction: column;
        align-items: stretch;
    }


    .sites-registry-tools
    > div {
        display: none;
    }


    .sites-registry-tools
    .sites-exact-search {
        width: 100%;
    }


    .sites-exact-access-strip {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 390px) {

    .sites-exact-category {
        min-height: 150px;

        padding:
            11px 9px 10px;
    }


    .sites-exact-category-top {
        grid-template-columns:
            35px minmax(0, 1fr) 10px;

        gap: 6px;
    }


    .sites-exact-category-icon {
        width: 34px;
        height: 34px;
    }


    .sites-exact-category-icon svg {
        width: 20px;
        height: 20px;
    }


    .sites-exact-category-top
    > div:nth-child(2)
    > span {
        font-size: 9px;
    }


    .sites-exact-category-top
    > div:nth-child(2)
    > strong {
        font-size: 23px;
    }

}


/* ============================================================
   V15-F19 - MAPAS OPERATIVOS
   ============================================================ */

.maps-header {
    align-items: flex-end;
}

.maps-header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.maps-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    gap: 14px;
    margin-bottom: 16px;
}

.maps-summary-card {
    min-height: 112px;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.maps-summary-card > span,
.maps-summary-card > small {
    color: #64748b;
}

.maps-summary-card > strong {
    color: #0f2742;
    font-size: 1.55rem;
    line-height: 1.2;
}

.maps-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: stretch;
}

.maps-map-panel {
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    background: #e8eef3;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.maps-canvas {
    width: 100%;
    min-height: 620px;
    height: calc(100vh - 330px);
    max-height: 760px;
    background: #e8eef3;
}

.maps-message {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 600;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(15, 39, 66, 0.94);
    color: #ffffff;
    font-size: 0.9rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.maps-legend-panel {
    padding: 20px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.maps-legend-heading strong {
    color: #0f2742;
    font-size: 1.05rem;
}

.maps-legend-list {
    display: grid;
    gap: 13px;
    margin-top: 20px;
}

.maps-legend-list > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-weight: 700;
}

.maps-dot {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.05);
}

.maps-dot-breeding,
.maps-marker-breeding {
    background: #7c3aed;
}

.maps-dot-production,
.maps-marker-production {
    background: #16835d;
}

.maps-dot-pollination,
.maps-marker-pollination {
    background: #d97706;
}

.maps-dot-temporary,
.maps-marker-temporary {
    background: #64748b;
}

.maps-legend-note {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.maps-legend-note strong {
    color: #0f2742;
}

.maps-legend-note p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 0.87rem;
    line-height: 1.55;
}

.maps-marker-wrapper {
    background: transparent;
    border: 0;
}

.maps-marker {
    display: block;
    width: 24px;
    height: 24px;
    border: 4px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow:
        0 5px 12px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(15, 23, 42, 0.08);
}

.maps-marker-other {
    background: #0f2742;
}

.maps-popup {
    min-width: 190px;
    display: grid;
    gap: 5px;
}

.maps-popup strong {
    color: #0f2742;
    font-size: 1rem;
}

.maps-popup span {
    color: #be123c;
    font-weight: 800;
    font-size: 0.82rem;
}

.maps-popup p {
    margin: 0;
    color: #475569;
    line-height: 1.4;
}

#mapsView .leaflet-container {
    font-family: inherit;
}

#mapsView .leaflet-control-attribution {
    font-size: 10px;
}

@media (max-width: 980px) {

    .maps-layout {
        grid-template-columns: 1fr;
    }

    .maps-legend-panel {
        order: 2;
    }

    .maps-canvas {
        min-height: 520px;
        height: 62vh;
    }
}

@media (max-width: 720px) {

    .maps-header-actions {
        width: 100%;
    }

    .maps-header-actions button {
        flex: 1 1 0;
        min-width: 0;
    }

    .maps-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .maps-summary-wide {
        grid-column: 1 / -1;
    }

    .maps-summary-card {
        min-height: 92px;
        padding: 14px;
    }

    .maps-summary-card > strong {
        font-size: 1.3rem;
    }

    .maps-canvas {
        min-height: 440px;
        height: 58vh;
        max-height: 600px;
    }

    .maps-legend-panel {
        padding: 16px;
    }
}


/* ============================================================
   V15-F20 - MAP INTERACTION / ACCESS / FLIGHT RADIUS
   ============================================================ */

.maps-map-panel {
    isolation: isolate;
}

.maps-floating-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 700;
    width: 190px;
    display: grid;
    gap: 8px;
    pointer-events: auto;
}

.maps-control-button {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid rgba(15, 39, 66, 0.18);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.96);
    color: #0f2742;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.13);
    backdrop-filter: blur(6px);
}

.maps-control-button:hover {
    background: #f8fafc;
}

.maps-control-button.active {
    border-color: #123f68;
    background: #123f68;
    color: #ffffff;
}

.maps-control-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.maps-site-marker {
    position: relative;
    width: 112px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.maps-site-code {
    position: absolute;
    top: 0;
    left: 50%;
    max-width: 108px;
    transform: translateX(-50%);
    padding: 4px 8px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(15, 39, 66, 0.94);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.maps-site-pin {
    position: relative;
    width: 36px;
    height: 36px;
    margin-bottom: 1px;
    border: 3px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow:
        0 5px 12px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(15, 23, 42, 0.08);
    display: grid;
    place-items: center;
}

.maps-site-pin-breeding {
    background: #7c3aed;
}

.maps-site-pin-production {
    background: #16835d;
}

.maps-site-pin-pollination {
    background: #d97706;
}

.maps-site-pin-temporary {
    background: #64748b;
}

.maps-site-pin-other {
    background: #0f2742;
}

.maps-site-pin-icon {
    width: 19px;
    height: 19px;
    display: block;
    color: #ffffff;
    transform: rotate(45deg);
}

.maps-site-pin-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.maps-popup-detailed {
    min-width: 270px;
    gap: 7px;
}

.maps-popup-title {
    display: block;
    color: #0f2742;
    font-size: 1.05rem;
}

.maps-popup-code {
    display: block;
    margin-bottom: 8px;
    color: #be123c;
    font-weight: 900;
}

.maps-popup-details {
    display: grid;
    gap: 7px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
}

.maps-popup-details > div {
    display: grid;
    grid-template-columns: minmax(100px, 0.9fr) minmax(120px, 1.25fr);
    gap: 12px;
    align-items: start;
}

.maps-popup-details span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.maps-popup-details strong {
    color: #0f2742;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.35;
}

.maps-popup-radius {
    margin-top: 7px;
    padding: 8px 10px;
    border-radius: 9px;
    background: #f5f3ff;
    color: #5b21b6;
    font-size: 0.77rem;
    font-weight: 800;
}

.maps-flight-radius {
    stroke: #6d28d9;
    fill: #7c3aed;
}

.maps-flight-radius-3 {
    stroke-dasharray: 7 6;
}

.maps-flight-radius-5 {
    stroke-dasharray: 11 7;
}

@media (max-width: 720px) {

    .maps-floating-controls {
        top: 12px;
        right: 12px;
        width: 158px;
        gap: 6px;
    }

    .maps-control-button {
        min-height: 38px;
        padding: 7px 9px;
        font-size: 0.75rem;
    }

    .maps-site-marker {
        width: 96px;
    }

    .maps-site-code {
        max-width: 94px;
        font-size: 10px;
    }

    .maps-popup-details > div {
        grid-template-columns: 95px minmax(105px, 1fr);
        gap: 8px;
    }
}


/* ============================================================
   V15-F20-D - FINAL APPROVED MAP DESIGN
   ============================================================ */

.maps-header {
    align-items: flex-end;
}

.maps-header-actions {
    flex: 0 0 auto;
}

.maps-fit-sites-button {
    min-width: 250px;
    min-height: 58px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 14px;
}


.maps-main-card {
    display: block;
}


.maps-map-panel {
    width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15, 39, 66, 0.10);
    border-radius: 20px;
    background: #e8eef3;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}


.maps-canvas {
    width: 100%;
    min-height: 600px;
    height: calc(100vh - 355px);
    max-height: 760px;
}


.maps-layer-control {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 720;
    width: 218px;
    padding: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(7px);
}


.maps-layer-button {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #0f2742;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 900;
    cursor: pointer;
}


.maps-layer-button.active {
    background: #123f68;
    color: #ffffff;
    box-shadow: 0 3px 9px rgba(15, 39, 66, 0.22);
}


.maps-floating-controls {
    top: 72px;
    right: 16px;
    width: 218px;
    gap: 8px;
}


.maps-control-button {
    min-height: 43px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid rgba(15, 39, 66, 0.17);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.97);
    color: #0f2742;
    font-size: 0.82rem;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}


.maps-control-button > span:last-child {
    flex: 1;
    text-align: left;
}


.maps-control-button.active {
    border-color: #123f68;
    background: #123f68;
    color: #ffffff;
}


.maps-location-button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.maps-flight-control-circle {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border: 2px dashed #7c3aed;
    border-radius: 50%;
}


.maps-control-button.active .maps-flight-control-circle {
    border-color: #ffffff;
}


.maps-site-code {
    padding: 4px 10px;
    border-radius: 9px;
    background: rgba(15, 39, 66, 0.96);
    font-size: 11px;
}


.maps-site-pin {
    width: 38px;
    height: 38px;
}


.maps-popup-detailed {
    min-width: 300px;
    padding: 2px 2px 0;
}


.maps-popup-title {
    font-size: 1.05rem;
    font-weight: 900;
}


.maps-popup-code {
    margin-top: 3px;
    margin-bottom: 12px;
    color: #c51638;
    font-size: 0.85rem;
    font-weight: 900;
}


.maps-popup-details {
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}


.maps-popup-detail-row {
    display: grid !important;
    grid-template-columns: 24px 112px minmax(120px, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 29px;
}


.maps-popup-detail-icon {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #0f2742;
}


.maps-popup-detail-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.maps-popup-detail-label {
    color: #64748b !important;
    font-size: 0.77rem !important;
    font-weight: 650 !important;
}


.maps-popup-detail-value {
    color: #0f2742 !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    line-height: 1.35;
}


.maps-popup-radius {
    margin-top: 10px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 9px;
    align-items: center;
    border-radius: 9px;
    background: #f2edff;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 700;
}


.maps-popup-radius-circle {
    width: 20px;
    height: 20px;
    border: 2px dashed #7c3aed;
    border-radius: 50%;
}


.maps-popup-radius-value {
    color: #0f2742;
    font-weight: 900;
}


.maps-popup-detail-link {
    width: 100%;
    margin-top: 7px;
    padding: 7px 4px 3px;
    border: 0;
    background: transparent;
    color: #0872c9;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 850;
    cursor: pointer;
}


.maps-flight-radius {
    stroke: #7c3aed;
    fill: #8b5cf6;
    fill-opacity: 0.12;
}


.maps-flight-radius-3,
.maps-flight-radius-5 {
    stroke-dasharray: 8 7;
}


.maps-flight-measure-line {
    stroke: #7c3aed;
}


.maps-flight-distance-wrapper {
    background: transparent;
    border: 0;
}


.maps-flight-distance-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 7px;
    background: #7c3aed;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(91, 33, 182, 0.22);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}


.maps-bottom-legend {
    margin-top: 14px;
    padding: 18px 20px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) 1px minmax(0, 1fr);
    column-gap: 22px;
    row-gap: 16px;
    align-items: center;
    border: 1px solid rgba(15, 39, 66, 0.09);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}


.maps-bottom-legend-section {
    min-width: 0;
}


.maps-bottom-legend-section .eyebrow {
    margin-bottom: 5px;
}


.maps-bottom-legend-title {
    display: block;
    margin-bottom: 13px;
    color: #0f2742;
    font-size: 0.94rem;
}


.maps-bottom-items {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}


.maps-bottom-items > div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #475569;
    font-size: 0.78rem;
}


.maps-bottom-divider {
    width: 1px;
    height: 70px;
    background: #dbe4ed;
}


.maps-access-legend-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid #d4e0ea;
    border-radius: 50%;
    background: #eef5fb;
    color: #0f2742;
}


.maps-access-legend-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.maps-no-access-icon {
    font-size: 19px;
    font-weight: 700;
}


.maps-bottom-info {
    grid-column: 1 / -1;
    min-height: 38px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d8e8f8;
    border-radius: 9px;
    background: #f0f7fd;
    color: #526b85;
    font-size: 0.76rem;
    line-height: 1.4;
}


.maps-bottom-info svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: #123f68;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.maps-message {
    left: 16px;
    right: 16px;
    bottom: 16px;
}


@media (max-width: 980px) {

    .maps-fit-sites-button {
        min-width: 210px;
    }

    .maps-bottom-legend {
        grid-template-columns: 1fr;
    }

    .maps-bottom-divider {
        width: 100%;
        height: 1px;
    }

    .maps-bottom-info {
        grid-column: auto;
    }
}


@media (max-width: 720px) {

    .maps-header {
        width: 100%;
        align-items: flex-start;
    }

    .maps-header > div:first-child {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        align-self: stretch;
    }

    .maps-header-actions {
        width: 100%;
    }

    .maps-fit-sites-button {
        width: 100%;
        min-width: 0;
        min-height: 50px;
    }

    .maps-layer-control {
        top: 12px;
        right: 12px;
        width: 184px;
    }

    .maps-floating-controls {
        top: 66px;
        right: 12px;
        width: 184px;
    }

    .maps-control-button {
        min-height: 39px;
        padding: 7px 9px;
        font-size: 0.72rem;
    }

    .maps-canvas {
        min-height: 520px;
        height: 65vh;
    }

    .maps-popup-detailed {
        min-width: 255px;
    }

    .maps-popup-detail-row {
        grid-template-columns: 21px 90px minmax(95px, 1fr) !important;
        gap: 6px !important;
    }

    .maps-popup-detail-label,
    .maps-popup-detail-value {
        font-size: 0.7rem !important;
    }

    .maps-bottom-legend {
        padding: 15px;
    }

    .maps-bottom-items {
        gap: 14px;
    }
}


/* ============================================================
   V15-F22 — ACTIVE USER LOCATION
   ============================================================ */

.maps-location-button {
    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}


.maps-location-button.is-locating {
    opacity: 0.9;
}


.maps-location-button.is-locating svg {
    animation:
        maps-location-icon-search 900ms
        ease-in-out infinite alternate;
}


.maps-location-button.is-location-active {
    background:
        linear-gradient(
            135deg,
            #0878d7 0%,
            #0a9ce8 100%
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.8
        );

    color:
        #ffffff;

    box-shadow:
        0 8px 20px
        rgba(
            8,
            120,
            215,
            0.28
        );
}


.maps-location-button.is-location-active svg {
    stroke:
        currentColor;

    color:
        #ffffff;
}


.maps-user-location-div-icon {
    background:
        transparent !important;

    border:
        0 !important;
}


.maps-user-location-pulse {
    position:
        relative;

    width:
        64px;

    height:
        64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.maps-user-location-pulse::before,
.maps-user-location-pulse::after {
    content:
        "";

    position:
        absolute;

    inset:
        4px;

    border-radius:
        50%;

    background:
        rgba(
            31,
            153,
            237,
            0.22
        );

    animation:
        maps-user-location-pulse
        2s ease-out infinite;
}


.maps-user-location-pulse::after {
    animation-delay:
        1s;
}


.maps-user-location-core {
    position:
        relative;

    z-index:
        3;

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            145deg,
            #108de6,
            #126bc2
        );

    border:
        3px solid #ffffff;

    box-shadow:
        0 7px 18px
        rgba(
            7,
            69,
            127,
            0.32
        );
}


.maps-user-location-core::before {
    content:
        "";

    position:
        absolute;

    inset:
        -9px;

    border:
        1px solid
        rgba(
            25,
            151,
            234,
            0.26
        );

    border-radius:
        50%;
}


.maps-user-location-core svg {
    width:
        22px;

    height:
        22px;

    fill:
        none;

    stroke:
        #ffffff;

    stroke-width:
        1.9;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.maps-user-location-popup {
    min-width:
        190px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        2px 1px;

    color:
        #132743;
}


.maps-user-location-popup strong {
    font-size:
        13px;

    line-height:
        1.25;

    font-weight:
        750;
}


.maps-user-location-popup-icon {
    width:
        28px;

    height:
        28px;

    flex:
        0 0 28px;

    border-radius:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #edf6ff;

    color:
        #137ee0;
}


.maps-user-location-popup-icon svg {
    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.9;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.maps-user-location-leaflet-popup
.leaflet-popup-content {
    margin:
        11px 14px;
}


@keyframes maps-user-location-pulse {
    0% {
        transform:
            scale(0.65);

        opacity:
            0.72;
    }

    70% {
        opacity:
            0.18;
    }

    100% {
        transform:
            scale(1.5);

        opacity:
            0;
    }
}


@keyframes maps-location-icon-search {
    from {
        transform:
            scale(0.93);
    }

    to {
        transform:
            scale(1.08);
    }
}


@media (
    prefers-reduced-motion:
    reduce
) {
    .maps-user-location-pulse::before,
    .maps-user-location-pulse::after,
    .maps-location-button.is-locating svg {
        animation:
            none;
    }
}



/* ============================================================
   V15-F26-B - MAP CONTEXTUAL UX
   Approved scope:
   - contextual flight-radius color
   - quick create site from Maps
   - icon consistency for map header actions
   ============================================================ */

.maps-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.maps-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.maps-action-icon {
    width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 21px;
}

.maps-action-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.maps-new-site-button {
    min-width: 220px;
    min-height: 58px;
    padding-left: 26px;
    padding-right: 26px;
    border-radius: 14px;
    background: #16835d;
    border-color: #16835d;
}

.maps-new-site-button:hover {
    background: #126f50;
    border-color: #126f50;
}


/*
 * Leaflet receives the exact contextual color inline.
 * These selectors preserve the approved geometry,
 * dash pattern and transparency.
 */

.maps-flight-radius {
    fill-opacity: 0.12;
}

.maps-flight-measure-line {
    stroke-width: 2;
}

.maps-flight-distance-label {
    color: #ffffff;
}


@media (max-width: 980px) {

    .maps-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .maps-new-site-button {
        min-width: 190px;
    }
}


@media (max-width: 720px) {

    .maps-header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 10px;
    }

    .maps-fit-sites-button,
    .maps-new-site-button {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .maps-action-button {
        gap: 7px;
    }

    .maps-action-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }
}


@media (max-width: 420px) {

    .maps-header-actions {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   V15-F27-B - MAP VISUAL CONSISTENCY FINAL
   ============================================================ */


/* ------------------------------------------------------------
   MAP / SATELLITE ICONS
   ------------------------------------------------------------ */

.maps-layer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.maps-layer-action-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.maps-layer-action-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ------------------------------------------------------------
   SUMMARY CARDS
   ------------------------------------------------------------ */

.maps-summary-card {
    display: flex;
    align-items: center;
    gap: 18px;
}

.maps-summary-content {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.maps-summary-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}

.maps-summary-icon svg {
    width: 29px;
    height: 29px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.maps-summary-icon-location {
    color: #0f5d91;
    background: rgba(15, 93, 145, 0.09);
}

.maps-summary-icon-pending {
    color: #16835d;
    background: rgba(22, 131, 93, 0.09);
}

.maps-summary-icon-visible {
    color: #1677e8;
    background: rgba(22, 119, 232, 0.09);
}


/* ------------------------------------------------------------
   CONTEXTUAL FLIGHT RADIUS
   JS owns the actual selected-site color.
   Geometry, radius and marker access pictogram remain unchanged.
   ------------------------------------------------------------ */

.maps-flight-radius {
    fill-opacity: 0.12;
}

.maps-flight-measure-line {
    stroke-width: 2;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    .maps-summary-card {
        gap: 12px;
    }

    .maps-summary-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 13px;
    }

    .maps-summary-icon svg {
        width: 24px;
        height: 24px;
    }

    .maps-layer-action-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }
}


/* ============================================================
   V15-F28 - MAP HEADER + SUMMARY ALIGNMENT
   Visual-only refinement:
   - Header actions side by side
   - Summary icons beside text
   ============================================================ */


/* ------------------------------------------------------------
   MAP HEADER PRIMARY ACTIONS
   ------------------------------------------------------------ */

.maps-header-actions {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: min(100%, 560px);
    flex: 0 1 560px !important;
}

.maps-header-actions .maps-fit-sites-button,
.maps-header-actions .maps-new-site-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px;
    margin: 0 !important;
}

.maps-header-actions .maps-action-button {
    justify-content: center !important;
}


/* ------------------------------------------------------------
   MAP SUMMARY CARDS
   Icon stays beside content, never above it.
   ------------------------------------------------------------ */

.maps-summary-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    text-align: left !important;
}

.maps-summary-card .maps-summary-icon {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
}

.maps-summary-card .maps-summary-content {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    margin: 0 !important;
}

.maps-summary-card .maps-summary-content > span,
.maps-summary-card .maps-summary-content > strong,
.maps-summary-card .maps-summary-content > small {
    width: 100%;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ------------------------------------------------------------
   TABLET
   Keep both principal actions side by side.
   ------------------------------------------------------------ */

@media (max-width: 980px) {

    .maps-header-actions {
        width: 100%;
        flex-basis: 100% !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
    }
}


/* ------------------------------------------------------------
   MOBILE
   Still side by side while there is enough room.
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    .maps-header-actions {
        width: 100% !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .maps-header-actions .maps-fit-sites-button,
    .maps-header-actions .maps-new-site-button {
        min-height: 50px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .maps-summary-card {
        gap: 12px !important;
    }

    .maps-summary-card .maps-summary-icon {
        flex-basis: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }
}


/* Very narrow phones:
   stack only when two usable buttons no longer fit safely. */

@media (max-width: 390px) {

    .maps-header-actions {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   V15-F29 - MAP CARDS + FLIGHT SELECTOR
   - Summary cards adopt the Sites visual language
   - Flight radius becomes one compact selector panel
   - Existing IDs and JS behavior remain unchanged
   ============================================================ */


/* ------------------------------------------------------------
   MAP SUMMARY CARDS
   ------------------------------------------------------------ */

.maps-summary-grid {
    gap: 16px;
}


.maps-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 132px !important;
    padding: 20px 22px !important;
    border-radius: 20px !important;
    box-shadow:
        0 10px 26px rgba(15, 39, 66, 0.055) !important;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}


.maps-summary-card:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 30px rgba(15, 39, 66, 0.075) !important;
}


/* Located */

.maps-summary-located {
    border-color: rgba(15, 93, 145, 0.18) !important;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 68%,
            rgba(14, 165, 233, 0.055) 100%
        ) !important;
}


.maps-summary-located .maps-summary-icon {
    color: #0872c9 !important;
    background: rgba(14, 165, 233, 0.13) !important;
}


/* Unlocated */

.maps-summary-unlocated {
    border-color: rgba(217, 119, 6, 0.20) !important;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 68%,
            rgba(245, 158, 11, 0.06) 100%
        ) !important;
}


.maps-summary-unlocated .maps-summary-icon {
    color: #b96b05 !important;
    background: rgba(245, 158, 11, 0.14) !important;
}


/* Current visible view */

.maps-summary-visible {
    border-color: rgba(124, 58, 237, 0.17) !important;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 74%,
            rgba(124, 58, 237, 0.05) 100%
        ) !important;
}


.maps-summary-visible .maps-summary-icon {
    color: #6d3de7 !important;
    background: rgba(124, 58, 237, 0.11) !important;
}


/* Icon hierarchy comparable with Sites */

.maps-summary-card .maps-summary-icon {
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
}


.maps-summary-card .maps-summary-icon svg {
    width: 31px !important;
    height: 31px !important;
}


.maps-summary-card .maps-summary-content {
    gap: 2px;
}


.maps-summary-card .maps-summary-content > span {
    color: #0f2742 !important;
    font-weight: 850 !important;
    line-height: 1.25;
}


.maps-summary-card .maps-summary-content > strong {
    margin-top: 3px !important;
    color: #062846 !important;
    font-size: 1.72rem !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
}


.maps-summary-wide .maps-summary-content > strong {
    font-size: 1.48rem !important;
}


.maps-summary-card .maps-summary-content > small {
    margin-top: 7px !important;
    color: #64748b !important;
    font-size: 0.82rem !important;
    line-height: 1.35;
}


/* Soft decorative corner, inspired by Sites cards */

.maps-summary-card::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -42px;
    width: 115px;
    height: 78px;
    border-radius: 50%;
    pointer-events: none;
}


.maps-summary-located::after {
    background: rgba(14, 165, 233, 0.07);
}


.maps-summary-unlocated::after {
    background: rgba(245, 158, 11, 0.065);
}


.maps-summary-visible::after {
    background: rgba(124, 58, 237, 0.055);
}


/* ------------------------------------------------------------
   FLIGHT RADIUS SELECTOR
   ------------------------------------------------------------ */

.maps-flight-selector {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(15, 39, 66, 0.17);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.97);
    color: #0f2742;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
}


.maps-flight-selector-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 10px;
    color: #0f2742;
    font-size: 0.80rem;
    font-weight: 900;
    line-height: 1.2;
}


.maps-flight-selector-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #123f68;
}


.maps-flight-selector-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.maps-flight-selector-options {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 8px;
}


.maps-flight-option {
    min-width: 0;
    min-height: 38px;
    padding: 7px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #dbe4ec;
    border-radius: 9px;
    background: #f8fafc;
    color: #334155;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 850;
    cursor: pointer;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease;
}


.maps-flight-option:hover {
    border-color: rgba(18, 63, 104, 0.30);
    background: #f1f5f9;
}


.maps-flight-radio {
    position: relative;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 2px solid #8aa0b5;
    border-radius: 50%;
    background: #ffffff;
}


.maps-flight-option.active {
    border-color: #123f68;
    background: #eef5fb;
    color: #123f68;
    box-shadow:
        inset 0 0 0 1px rgba(18, 63, 104, 0.04);
}


.maps-flight-option.active .maps-flight-radio {
    border-color: #123f68;
}


.maps-flight-option.active .maps-flight-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #123f68;
}


/* Keep compatibility if JS also updates aria-pressed later */

.maps-flight-option[aria-pressed="true"] {
    border-color: #123f68;
    background: #eef5fb;
    color: #123f68;
}


.maps-flight-option[aria-pressed="true"] .maps-flight-radio {
    border-color: #123f68;
}


.maps-flight-option[aria-pressed="true"] .maps-flight-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #123f68;
}


/* ------------------------------------------------------------
   TABLET / MOBILE
   ------------------------------------------------------------ */

@media (max-width: 980px) {

    .maps-summary-card {
        min-height: 120px !important;
    }
}


@media (max-width: 720px) {

    .maps-summary-grid {
        gap: 12px;
    }

    .maps-summary-card {
        min-height: 104px !important;
        padding: 15px 16px !important;
    }

    .maps-summary-card .maps-summary-icon {
        flex-basis: 48px !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
    }

    .maps-summary-card .maps-summary-icon svg {
        width: 25px !important;
        height: 25px !important;
    }

    .maps-summary-card .maps-summary-content > strong {
        font-size: 1.42rem !important;
    }

    .maps-summary-wide .maps-summary-content > strong {
        font-size: 1.22rem !important;
    }

    .maps-summary-card .maps-summary-content > small {
        margin-top: 4px !important;
        font-size: 0.75rem !important;
    }

    .maps-flight-selector {
        padding: 10px;
    }

    .maps-flight-selector-heading {
        padding-bottom: 8px;
        font-size: 0.74rem;
    }

    .maps-flight-option {
        min-height: 35px;
        padding: 6px;
        font-size: 0.72rem;
    }
}


/* ============================================================
   V15-F30 - HONEYCOMB IDENTITY + CONTEXTUAL POPUP

   Goals:
   1. Honeycomb identity on Map summary cards.
   2. Contextual popup flight-radius color.
   3. Preserve map behavior, marker access pictogram and
      existing Leaflet radius mechanics.
   ============================================================ */


/* ============================================================
   1. HONEYCOMB VISUAL LANGUAGE
   ============================================================ */


/*
 * Hexagons are decorative only.
 * They use data SVG backgrounds so no image file, request
 * or external dependency is required.
 */

.maps-summary-card {
    isolation: isolate;
}


.maps-summary-card .maps-summary-icon,
.maps-summary-card .maps-summary-content {
    position: relative;
    z-index: 2;
}


/* ------------------------------------------------------------
   BLUE / LOCATED
   ------------------------------------------------------------ */

.maps-summary-located {
    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='130' viewBox='0 0 190 130'%3E%3Cpath d='M127 25 145 15 163 25 163 46 145 56 127 46Z' fill='none' stroke='%230ea5e9' stroke-opacity='.20' stroke-width='3'/%3E%3Cpath d='M151 57 171 46 190 57 190 80 171 91 151 80Z' fill='%230ea5e9' fill-opacity='.08'/%3E%3Cpath d='M105 73 130 59 154 73 154 101 130 115 105 101Z' fill='%230ea5e9' fill-opacity='.07'/%3E%3Cpath d='M70 91 89 80 108 91 108 112 89 123 70 112Z' fill='none' stroke='%230ea5e9' stroke-opacity='.11' stroke-width='2'/%3E%3C/svg%3E"),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 63%,
            rgba(14, 165, 233, 0.055) 100%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-position:
        right bottom,
        center !important;

    background-size:
        190px 130px,
        100% 100% !important;
}


/* ------------------------------------------------------------
   AMBER / WITHOUT LOCATION
   ------------------------------------------------------------ */

.maps-summary-unlocated {
    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='130' viewBox='0 0 190 130'%3E%3Cpath d='M123 24 141 14 159 24 159 45 141 55 123 45Z' fill='none' stroke='%23d97706' stroke-opacity='.21' stroke-width='3'/%3E%3Cpath d='M151 48 174 35 197 48 197 74 174 87 151 74Z' fill='%23f59e0b' fill-opacity='.09'/%3E%3Cpath d='M104 67 133 51 162 67 162 100 133 116 104 100Z' fill='%23f59e0b' fill-opacity='.075'/%3E%3Cpath d='M78 91 96 81 114 91 114 112 96 122 78 112Z' fill='none' stroke='%23d97706' stroke-opacity='.13' stroke-width='2'/%3E%3C/svg%3E"),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 63%,
            rgba(245, 158, 11, 0.060) 100%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-position:
        right bottom,
        center !important;

    background-size:
        190px 130px,
        100% 100% !important;
}


/* ------------------------------------------------------------
   VIOLET / CURRENT VIEW
   ------------------------------------------------------------ */

.maps-summary-visible {
    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='235' height='135' viewBox='0 0 235 135'%3E%3Cpath d='M153 19 171 9 189 19 189 40 171 50 153 40Z' fill='none' stroke='%237c3aed' stroke-opacity='.20' stroke-width='3'/%3E%3Cpath d='M185 37 208 24 231 37 231 63 208 76 185 63Z' fill='%237c3aed' fill-opacity='.095'/%3E%3Cpath d='M143 63 171 47 199 63 199 95 171 111 143 95Z' fill='%237c3aed' fill-opacity='.065'/%3E%3Cpath d='M106 86 128 73 150 86 150 111 128 124 106 111Z' fill='none' stroke='%237c3aed' stroke-opacity='.13' stroke-width='2.5'/%3E%3Cpath d='M205 84 220 75 235 84 235 101 220 110 205 101Z' fill='none' stroke='%237c3aed' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E"),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 70%,
            rgba(124, 58, 237, 0.055) 100%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-position:
        right bottom,
        center !important;

    background-size:
        235px 135px,
        100% 100% !important;
}


/*
 * Disable the old simple ellipse decoration because the
 * honeycomb cluster now performs that visual role.
 */

.maps-summary-card::after {
    display: none !important;
}


/* ============================================================
   2. CONTEXTUAL POPUP — FLIGHT RADIUS
   ============================================================ */


/*
 * General structure.
 * --maps-popup-site-color is injected by buildPopup().
 */

.maps-popup-detailed {
    --maps-popup-site-color: #0f2742;
}


/*
 * Bottom flight-radius panel.
 */

.maps-popup-radius {
    position: relative;
    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--maps-popup-site-color) 18%,
            transparent
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--maps-popup-site-color) 10%,
            #ffffff
        ) !important;
}


/*
 * Very soft contextual glow at the right side.
 */

.maps-popup-radius::after {
    content: "";
    position: absolute;
    right: -17px;
    bottom: -21px;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--maps-popup-site-color) 9%,
            transparent
        );

    pointer-events: none;
}


/*
 * Keep content over decoration.
 */

.maps-popup-radius > * {
    position: relative;
    z-index: 1;
}


/*
 * Dashed circular pictogram.
 */

.maps-popup-radius-circle {
    border-color:
        var(--maps-popup-site-color) !important;
}


/*
 * Label.
 */

.maps-popup-radius {
    color:
        var(--maps-popup-site-color) !important;
}


/*
 * Strong radius value remains very readable.
 */

.maps-popup-radius-value {
    color:
        #0f2742 !important;
}


/* ------------------------------------------------------------
   FALLBACK COLORS
   For browsers without color-mix.
   ------------------------------------------------------------ */

.maps-popup-breeding .maps-popup-radius {
    background: #f5f0ff;
    border-color: rgba(124, 58, 237, 0.18);
    color: #7c3aed;
}


.maps-popup-production .maps-popup-radius {
    background: #edf8f3;
    border-color: rgba(22, 131, 93, 0.18);
    color: #16835d;
}


.maps-popup-pollination .maps-popup-radius {
    background: #fff7e8;
    border-color: rgba(217, 119, 6, 0.20);
    color: #c66f05;
}


.maps-popup-temporary .maps-popup-radius {
    background: #f3f5f7;
    border-color: rgba(100, 116, 139, 0.22);
    color: #64748b;
}


.maps-popup-other .maps-popup-radius {
    background: #edf2f6;
    border-color: rgba(15, 39, 66, 0.18);
    color: #0f2742;
}


/*
 * Circle fallback.
 */

.maps-popup-breeding .maps-popup-radius-circle {
    border-color: #7c3aed !important;
}

.maps-popup-production .maps-popup-radius-circle {
    border-color: #16835d !important;
}

.maps-popup-pollination .maps-popup-radius-circle {
    border-color: #d97706 !important;
}

.maps-popup-temporary .maps-popup-radius-circle {
    border-color: #64748b !important;
}

.maps-popup-other .maps-popup-radius-circle {
    border-color: #0f2742 !important;
}


/* ============================================================
   3. POLISH / RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {

    .maps-summary-located,
    .maps-summary-unlocated {
        background-size:
            165px 113px,
            100% 100% !important;
    }

    .maps-summary-visible {
        background-size:
            205px 118px,
            100% 100% !important;
    }
}


@media (max-width: 720px) {

    /*
     * Keep the apiculture identity visible on mobile,
     * but lighter so it never competes with text.
     */

    .maps-summary-located,
    .maps-summary-unlocated {
        background-size:
            128px 88px,
            100% 100% !important;
    }

    .maps-summary-visible {
        background-size:
            150px 86px,
            100% 100% !important;
    }
}


/* ============================================================
   V15-F31 - MAP SITE TYPE INTERACTIVE FILTER
   ============================================================ */


/* ------------------------------------------------------------
   SITE TYPE LEGEND AS INTERACTIVE FILTER
   ------------------------------------------------------------ */

.maps-site-type-filter {
    appearance: none;
    -webkit-appearance: none;

    margin: -5px -7px;
    padding: 5px 7px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;
    color: #334155;

    font: inherit;
    font-weight: inherit;

    cursor: pointer;

    transition:
        opacity 150ms ease,
        background 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}


.maps-site-type-filter:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    transform: translateY(-1px);
}


.maps-site-type-filter:focus-visible {
    outline: 3px solid rgba(15, 93, 145, 0.18);
    outline-offset: 2px;
}


/*
 * When any filter is active, non-active options are visually
 * secondary but remain clearly available.
 */

.maps-legend-list:has(
    .maps-site-type-filter.active
)
.maps-site-type-filter:not(.active) {
    opacity: 0.48;
}


/*
 * Active option.
 */

.maps-site-type-filter.active {
    opacity: 1;

    background: #f8fafc;
    border-color: rgba(15, 39, 66, 0.12);

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.06);

    font-weight: 850;
}


/* Type-specific active identity */

.maps-site-type-filter[
    data-map-site-type="breeding"
].active {
    color: #6d28d9;
    background: #f6f1ff;
    border-color: rgba(124, 58, 237, 0.18);
}


.maps-site-type-filter[
    data-map-site-type="production"
].active {
    color: #11704e;
    background: #edf8f3;
    border-color: rgba(22, 131, 93, 0.20);
}


.maps-site-type-filter[
    data-map-site-type="pollination"
].active {
    color: #b86204;
    background: #fff7e8;
    border-color: rgba(217, 119, 6, 0.22);
}


.maps-site-type-filter[
    data-map-site-type="temporary"
].active {
    color: #526174;
    background: #f3f5f7;
    border-color: rgba(100, 116, 139, 0.22);
}


/*
 * Preserve existing colored dot identity.
 */

.maps-site-type-filter .maps-dot {
    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}


.maps-site-type-filter.active .maps-dot {
    transform: scale(1.08);

    box-shadow:
        0 0 0 5px rgba(15, 23, 42, 0.055);
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    .maps-site-type-filter {
        margin: -3px -5px;
        padding: 5px;
        gap: 8px;
    }
}


/* ============================================================
   V15-F31-D - DEFINITIVE LEGEND FILTER REPAIR
   ============================================================ */


/*
 * The four site types form one semantic horizontal group.
 */

.maps-site-type-filter-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;

    gap: 8px 12px !important;

    margin-top: 12px !important;
}


/*
 * Override the generic maps-bottom-items child rules because
 * these children are buttons rather than static legend divs.
 */

.maps-site-type-filter-list >
.maps-site-type-filter {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 7px 9px !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;

    white-space: nowrap !important;
}


/*
 * When one filter is selected, secondary types are quieter.
 */

.maps-site-type-filter-list:has(
    .maps-site-type-filter.active
)
.maps-site-type-filter:not(.active) {
    opacity: 0.48;
}


/* ============================================================
   EXACT TYPE COLORS
   ============================================================ */


/* Crianza */

.maps-site-type-filter[
    data-map-site-type="breeding"
].active {
    color: #6d28d9 !important;
    background: #f6f1ff !important;
    border-color: rgba(124, 58, 237, 0.22) !important;
}

.maps-site-type-filter
.maps-dot-breeding {
    background: #7c3aed !important;
}


/* Producción */

.maps-site-type-filter[
    data-map-site-type="production"
].active {
    color: #11704e !important;
    background: #edf8f3 !important;
    border-color: rgba(22, 131, 93, 0.24) !important;
}

.maps-site-type-filter
.maps-dot-production {
    background: #16835d !important;
}


/* Polinización */

.maps-site-type-filter[
    data-map-site-type="pollination"
].active {
    color: #b86204 !important;
    background: #fff7e8 !important;
    border-color: rgba(217, 119, 6, 0.24) !important;
}

.maps-site-type-filter
.maps-dot-pollination {
    background: #d97706 !important;
}


/* Temporal */

.maps-site-type-filter[
    data-map-site-type="temporary"
].active {
    color: #526174 !important;
    background: #f3f5f7 !important;
    border-color: rgba(100, 116, 139, 0.24) !important;
}

.maps-site-type-filter
.maps-dot-temporary {
    background: #64748b !important;
}


/*
 * Matching active halo.
 */

.maps-site-type-filter[
    data-map-site-type="breeding"
].active .maps-dot {
    box-shadow:
        0 0 0 5px rgba(124, 58, 237, 0.12) !important;
}

.maps-site-type-filter[
    data-map-site-type="production"
].active .maps-dot {
    box-shadow:
        0 0 0 5px rgba(22, 131, 93, 0.13) !important;
}

.maps-site-type-filter[
    data-map-site-type="pollination"
].active .maps-dot {
    box-shadow:
        0 0 0 5px rgba(217, 119, 6, 0.13) !important;
}

.maps-site-type-filter[
    data-map-site-type="temporary"
].active .maps-dot {
    box-shadow:
        0 0 0 5px rgba(100, 116, 139, 0.13) !important;
}


/*
 * Desktop has sufficient width for the four controls.
 */

@media (min-width: 981px) {

    .maps-site-type-filter-list {
        flex-wrap: nowrap !important;
    }
}


/*
 * Mobile may wrap without breaking individual controls.
 */

@media (max-width: 720px) {

    .maps-site-type-filter-list {
        gap: 7px !important;
    }

    .maps-site-type-filter-list >
    .maps-site-type-filter {
        padding: 6px 7px !important;
    }
}


/* ============================================================
   V15-F32 - ACCESS ICON SYSTEM
   Truck = rigid truck
   Trailer = standalone trailer / carreta
   Marker exterior color continues to represent site type.
   ============================================================ */


/* ------------------------------------------------------------
   BOTTOM LEGEND
   ------------------------------------------------------------ */

.maps-access-legend-icon.maps-access-truck-icon {
    color: #159447 !important;
    background: #e8f8ee !important;
    border-color: rgba(21, 148, 71, 0.14) !important;
}


.maps-access-legend-icon.maps-access-trailer-icon {
    color: #1677d2 !important;
    background: #eaf5ff !important;
    border-color: rgba(22, 119, 210, 0.14) !important;
}


.maps-access-truck-icon svg,
.maps-access-trailer-icon svg {
    width: 23px !important;
    height: 23px !important;

    fill: none !important;
    stroke: currentColor !important;

    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* ------------------------------------------------------------
   POPUP ACCESS ICONS
   ------------------------------------------------------------ */

.maps-popup-detail-icon
.maps-popup-access-truck {
    color: #159447 !important;
    stroke: #159447 !important;
}


.maps-popup-detail-icon
.maps-popup-access-trailer {
    color: #1677d2 !important;
    stroke: #1677d2 !important;
}


/*
 * Keep the two access symbols slightly larger than
 * generic detail icons for easier recognition.
 */

.maps-popup-detail-icon
.maps-popup-access-truck,
.maps-popup-detail-icon
.maps-popup-access-trailer {
    width: 20px !important;
    height: 20px !important;
}


/* ------------------------------------------------------------
   MAP MARKER ACCESS SYMBOL
   ------------------------------------------------------------ */

.maps-site-pin-icon {
    width: 21px !important;
    height: 21px !important;
}


.maps-site-pin-icon svg {
    width: 100% !important;
    height: 100% !important;

    fill: none !important;
    stroke: currentColor !important;

    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/*
 * Site type remains the marker color.
 * Access pictogram stays white for maximum contrast.
 */

.maps-site-pin-icon,
.maps-site-pin-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}


/* ============================================================
   V15-F33 - ACCESS FILTER SYSTEM
   Access filters combine with site-type filters.
   ============================================================ */


.maps-access-filter-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex-wrap: wrap !important;

    gap: 8px 14px !important;
}


.maps-access-filter {
    appearance: none;
    -webkit-appearance: none;

    border:
        1px solid transparent;

    background:
        transparent;

    color:
        #314963;

    border-radius:
        12px;

    margin:
        -5px;

    padding:
        5px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        9px;

    font:
        inherit;

    cursor:
        pointer;

    white-space:
        nowrap;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        opacity 160ms ease,
        box-shadow 160ms ease;
}


.maps-access-filter:hover {
    background:
        #f7fafc;
}


.maps-access-filter:focus-visible {
    outline:
        3px solid rgba(15, 73, 117, 0.18);

    outline-offset:
        2px;
}


/* Truck active */

.maps-access-filter[
    data-map-access="truck"
].active {
    color:
        #11733b !important;

    background:
        #edf9f1 !important;

    border-color:
        rgba(21, 148, 71, 0.22) !important;

    box-shadow:
        0 4px 12px rgba(21, 148, 71, 0.08);
}


/* Trailer active */

.maps-access-filter[
    data-map-access="trailer"
].active {
    color:
        #1268b4 !important;

    background:
        #edf7ff !important;

    border-color:
        rgba(22, 119, 210, 0.22) !important;

    box-shadow:
        0 4px 12px rgba(22, 119, 210, 0.08);
}


/* No access active */

.maps-access-filter[
    data-map-access="none"
].active {
    color:
        #40566e !important;

    background:
        #f2f5f8 !important;

    border-color:
        rgba(100, 116, 139, 0.24) !important;

    box-shadow:
        0 4px 12px rgba(100, 116, 139, 0.08);
}


.maps-access-filter-list:has(
    .maps-access-filter.active
)
.maps-access-filter:not(.active) {
    opacity:
        0.48;
}


/*
 * Existing V15-F32 colors remain the semantic identity.
 */

.maps-access-filter[
    data-map-access="truck"
].active
.maps-access-truck-icon {
    box-shadow:
        0 0 0 4px rgba(21, 148, 71, 0.10);
}


.maps-access-filter[
    data-map-access="trailer"
].active
.maps-access-trailer-icon {
    box-shadow:
        0 0 0 4px rgba(22, 119, 210, 0.10);
}


.maps-access-none-icon {
    color:
        #173a5e !important;

    background:
        #eef5fb !important;

    border-color:
        rgba(23, 58, 94, 0.10) !important;
}


.maps-access-none-dash {
    font-size:
        20px;

    line-height:
        1;

    font-weight:
        700;

    transform:
        translateY(-1px);
}


.maps-access-filter[
    data-map-access="none"
].active
.maps-access-none-icon {
    color:
        #526174 !important;

    background:
        #e8edf2 !important;

    box-shadow:
        0 0 0 4px rgba(100, 116, 139, 0.10);
}


@media (min-width: 981px) {

    .maps-access-filter-list {
        flex-wrap:
            nowrap !important;
    }
}


@media (max-width: 720px) {

    .maps-access-filter-list {
        gap:
            7px !important;
    }

    .maps-access-filter {
        padding:
            5px 6px;
    }
}


/* ============================================================
   V15-F34 - GLOBAL FLIGHT RADIUS
   Visual overlap mode for all currently visible sites.
   ============================================================ */


/* ------------------------------------------------------------
   FLIGHT SELECTOR HEADER
   ------------------------------------------------------------ */

.maps-flight-selector-heading {
    position: relative;
}


.maps-flight-selector-heading >
span:nth-child(2) {
    flex: 1 1 auto;
}


/* ------------------------------------------------------------
   GLOBAL MODE SWITCH
   ------------------------------------------------------------ */

.maps-flight-all-toggle {
    appearance: none;
    -webkit-appearance: none;

    flex:
        0 0 auto;

    width:
        46px;

    height:
        26px;

    margin:
        0 0 0 auto;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        transparent;

    cursor:
        pointer;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;
}


.maps-flight-all-toggle-track {
    position:
        relative;

    display:
        block;

    width:
        44px;

    height:
        24px;

    border:
        1px solid #cbd5e1;

    border-radius:
        999px;

    background:
        #e2e8f0;

    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.08);

    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.maps-flight-all-toggle-thumb {
    position:
        absolute;

    top:
        2px;

    left:
        2px;

    width:
        18px;

    height:
        18px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.22);

    transition:
        transform 160ms ease;
}


.maps-flight-all-toggle.active
.maps-flight-all-toggle-track {
    border-color:
        #159447;

    background:
        #159447;

    box-shadow:
        0 3px 9px rgba(21, 148, 71, 0.20);
}


.maps-flight-all-toggle.active
.maps-flight-all-toggle-thumb {
    transform:
        translateX(20px);
}


.maps-flight-all-toggle:focus-visible {
    outline:
        3px solid rgba(21, 148, 71, 0.20);

    outline-offset:
        2px;
}


/* ------------------------------------------------------------
   GLOBAL CIRCLES
   ------------------------------------------------------------ */

.maps-flight-radius-global {
    pointer-events:
        none;
}


/*
 * Slightly softer fill than a single-site radius.
 * Overlapping translucent fills create the visual
 * intersection effect naturally.
 */

.maps-flight-radius-global {
    fill-opacity:
        0.11 !important;

    stroke-width:
        2 !important;
}


/* ------------------------------------------------------------
   GLOBAL MODE VISUAL FEEDBACK
   ------------------------------------------------------------ */

.maps-flight-selector:has(
    .maps-flight-all-toggle.active
) {
    border-color:
        rgba(21, 148, 71, 0.28);

    box-shadow:
        0 5px 15px rgba(21, 148, 71, 0.10);
}


.maps-flight-selector:has(
    .maps-flight-all-toggle.active
)
.maps-flight-selector-heading {
    color:
        #11733b;
}


/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

.sr-only {
    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;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    .maps-flight-all-toggle {
        width:
            42px;

        height:
            24px;
    }

    .maps-flight-all-toggle-track {
        width:
            40px;

        height:
            22px;
    }

    .maps-flight-all-toggle-thumb {
        width:
            16px;

        height:
            16px;
    }

    .maps-flight-all-toggle.active
    .maps-flight-all-toggle-thumb {
        transform:
            translateX(18px);
    }
}



/* ============================================================
   V15-F35 - MATHEMATICAL FLIGHT OVERLAP ANALYSIS
   ============================================================ */


/* ------------------------------------------------------------
   ANALYZE BUTTON
   ------------------------------------------------------------ */

.maps-overlap-analysis-button {
    width: 100%;

    min-height: 42px;

    margin:
        8px 0 0;

    padding:
        8px 11px;

    border:
        1px solid #d8e2ec;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #17324f;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        750;

    text-align:
        left;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}


.maps-overlap-analysis-button:hover {
    border-color:
        #9fb7cc;

    background:
        #f8fbfe;

    box-shadow:
        0 4px 10px rgba(15, 39, 66, 0.08);
}


.maps-overlap-analysis-button.active {
    border-color:
        #174b78;

    background:
        #edf6fc;

    color:
        #0f416d;
}


.maps-overlap-analysis-button-icon {
    flex:
        0 0 auto;

    width:
        25px;

    height:
        25px;

    border-radius:
        8px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #e9f4fb;

    color:
        #15558a;
}


.maps-overlap-analysis-button-icon svg {
    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.maps-overlap-analysis-button-arrow {
    margin-left:
        auto;

    font-size:
        22px;

    line-height:
        1;

    transition:
        transform 160ms ease;
}


.maps-overlap-analysis-button.active
.maps-overlap-analysis-button-arrow {
    transform:
        rotate(90deg);
}


/* ------------------------------------------------------------
   ANALYSIS PANEL
   ------------------------------------------------------------ */

.maps-overlap-analysis-panel {
    margin:
        18px 0 0;

    padding:
        22px;

    border:
        1px solid #d7e2ec;

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0 14px 34px rgba(15, 39, 66, 0.08);
}


.maps-overlap-analysis-panel[hidden] {
    display:
        none !important;
}


.maps-overlap-header {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;
}


.maps-overlap-heading-icon {
    flex:
        0 0 auto;

    width:
        48px;

    height:
        48px;

    border-radius:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #6d3de8;

    background:
        #f0eaff;
}


.maps-overlap-heading-icon svg {
    width:
        29px;

    height:
        29px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;
}


.maps-overlap-heading-text {
    flex:
        1 1 auto;
}


.maps-overlap-heading-text .eyebrow {
    margin:
        0 0 3px;

    color:
        #bd1e2d;
}


.maps-overlap-heading-text h3 {
    margin:
        0;

    color:
        #0c2845;

    font-size:
        clamp(20px, 2vw, 27px);

    line-height:
        1.15;
}


.maps-overlap-heading-text p:last-child {
    margin:
        6px 0 0;

    color:
        #667a90;

    font-size:
        14px;
}


.maps-overlap-close {
    flex:
        0 0 auto;

    width:
        38px;

    height:
        38px;

    padding:
        0;

    border:
        1px solid #dbe4ec;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #61768b;

    cursor:
        pointer;

    font-size:
        25px;

    line-height:
        1;
}


/* ------------------------------------------------------------
   SUMMARY
   ------------------------------------------------------------ */

.maps-overlap-summary {
    margin-top:
        20px;

    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        10px;
}


.maps-overlap-summary article {
    min-width:
        0;

    padding:
        14px 15px;

    border:
        1px solid #e1e8ef;

    border-radius:
        15px;

    background:
        #f9fbfd;
}


.maps-overlap-summary span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #6b7f94;

    font-size:
        12px;

    font-weight:
        650;
}


.maps-overlap-summary strong {
    display:
        block;

    color:
        #0b2947;

    font-size:
        22px;

    line-height:
        1.05;
}


.maps-overlap-summary article.has-overlap {
    border-color:
        #f1cf99;

    background:
        #fff9ef;
}


.maps-overlap-summary article.has-overlap strong {
    color:
        #b86500;
}


.maps-overlap-summary article.no-overlap {
    border-color:
        #bfe4cf;

    background:
        #f2fbf6;
}


.maps-overlap-summary article.no-overlap strong {
    color:
        #16835d;
}


/* ------------------------------------------------------------
   METHOD
   ------------------------------------------------------------ */

.maps-overlap-method {
    margin-top:
        14px;

    padding:
        11px 13px;

    border:
        1px solid #cfe0ef;

    border-radius:
        12px;

    background:
        #eff7fd;

    color:
        #4c6882;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    font-size:
        12px;

    line-height:
        1.45;
}


.maps-overlap-method svg {
    flex:
        0 0 auto;

    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        #15558a;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ------------------------------------------------------------
   RESULTS
   ------------------------------------------------------------ */

.maps-overlap-results-heading {
    margin-top:
        20px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid #e5ebf1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.maps-overlap-results-heading > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.maps-overlap-results-heading strong {
    color:
        #102d4b;

    font-size:
        15px;
}


.maps-overlap-results-heading span {
    color:
        #718499;

    font-size:
        12px;
}


.maps-overlap-results-count {
    min-width:
        32px;

    height:
        32px;

    padding:
        0 9px;

    border-radius:
        999px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #102f50;

    color:
        #ffffff !important;

    font-weight:
        800;
}


.maps-overlap-pairs {
    margin-top:
        10px;

    display:
        grid;

    gap:
        9px;
}


.maps-overlap-pair {
    padding:
        12px 14px;

    border:
        1px solid #e1e8ef;

    border-radius:
        14px;

    background:
        #ffffff;

    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        12px;
}


.maps-overlap-pair-number {
    width:
        30px;

    height:
        30px;

    border-radius:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #eef3f7;

    color:
        #4d657b;

    font-size:
        12px;

    font-weight:
        800;
}


.maps-overlap-pair-sites {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    color:
        #102f50;

    font-size:
        14px;
}


.maps-overlap-pair-link {
    color:
        #8da0b3;
}


.maps-overlap-pair-meta {
    margin-top:
        4px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px 16px;

    color:
        #718499;

    font-size:
        11px;
}


.maps-overlap-pair-result {
    min-width:
        92px;

    text-align:
        right;
}


.maps-overlap-pair-result > strong {
    display:
        block;

    margin-top:
        4px;

    color:
        #102f50;

    font-size:
        20px;

    line-height:
        1;
}


.maps-overlap-pair-result small {
    display:
        block;

    margin-top:
        2px;

    color:
        #7b8da0;

    font-size:
        10px;
}


.maps-overlap-level {
    display:
        inline-flex;

    padding:
        3px 8px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;
}


.maps-overlap-level-high {
    background:
        #feecef;

    color:
        #b42335;
}


.maps-overlap-level-medium {
    background:
        #fff3db;

    color:
        #a95c00;
}


.maps-overlap-level-low {
    background:
        #edf7ff;

    color:
        #23679d;
}


.maps-overlap-pair-high {
    border-left:
        4px solid #c93043;
}


.maps-overlap-pair-medium {
    border-left:
        4px solid #d98212;
}


.maps-overlap-pair-low {
    border-left:
        4px solid #4c8fc4;
}


/* ------------------------------------------------------------
   EMPTY STATE
   ------------------------------------------------------------ */

.maps-overlap-empty {
    padding:
        22px;

    border:
        1px dashed #cbd8e4;

    border-radius:
        15px;

    background:
        #f8fafc;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    text-align:
        center;
}


.maps-overlap-empty strong {
    color:
        #163653;

    font-size:
        15px;
}


.maps-overlap-empty span {
    max-width:
        650px;

    color:
        #708399;

    font-size:
        12px;

    line-height:
        1.45;
}


.maps-overlap-empty-success {
    border-color:
        #b9ddc8;

    background:
        #f2faf5;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 980px) {

    .maps-overlap-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 720px) {

    .maps-overlap-analysis-panel {
        margin-top:
            14px;

        padding:
            16px;

        border-radius:
            18px;
    }


    .maps-overlap-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .maps-overlap-summary article:last-child {
        grid-column:
            1 / -1;
    }


    .maps-overlap-pair {
        grid-template-columns:
            auto minmax(0, 1fr);
    }


    .maps-overlap-pair-result {
        grid-column:
            2;

        min-width:
            0;

        text-align:
            left;
    }
}


@media (max-width: 430px) {

    .maps-overlap-header {
        gap:
            10px;
    }


    .maps-overlap-heading-icon {
        width:
            42px;

        height:
            42px;
    }


    .maps-overlap-summary {
        grid-template-columns:
            1fr 1fr;
    }


    .maps-overlap-pair {
        padding:
            11px;
    }
}



/* ============================================================
   V15-F35-C - ANALYSIS STATE SYNC FIX
   ============================================================ */

.maps-overlap-analysis-button.active {
    box-shadow:
        0 4px 12px rgba(21, 85, 138, 0.10);
}



/* ============================================================
   V15-F35-D2 - DEFINITIVE GLOBAL STATE FIX
   No visual changes. State correction only.
   ============================================================ */




/* ============================================================
   V15-F36-B2 - OVERLAP ↔ MAP INTERACTION
   ============================================================ */

.maps-overlap-pair {
    cursor:
        pointer;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}


.maps-overlap-pair:hover {
    box-shadow:
        0 7px 18px rgba(15, 39, 66, 0.09);

    transform:
        translateY(-1px);
}


.maps-overlap-pair:focus-visible {
    outline:
        3px solid rgba(21, 85, 138, 0.22);

    outline-offset:
        2px;
}


.maps-overlap-pair-focused {
    background:
        #f7fbff;

    border-color:
        #7aa9ce;

    box-shadow:
        0 0 0 3px rgba(21, 85, 138, 0.09),
        0 8px 20px rgba(15, 39, 66, 0.10);
}


.maps-overlap-results-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.maps-overlap-global-view-button {
    min-height:
        32px;

    padding:
        5px 11px;

    border:
        1px solid #d6e1eb;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #315775;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        750;

    cursor:
        pointer;

    transition:
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}


.maps-overlap-global-view-button:hover {
    border-color:
        #9eb9cf;

    background:
        #f5faff;

    box-shadow:
        0 3px 9px rgba(15, 39, 66, 0.07);
}


@media (max-width: 720px) {

    .maps-overlap-results-heading {
        align-items:
            flex-start;
    }


    .maps-overlap-results-actions {
        flex-direction:
            column;

        align-items:
            flex-end;
    }


    .maps-overlap-global-view-button {
        white-space:
            nowrap;
    }
}



/* ============================================================
   V15-F37-A — TERRITORIAL PRESSURE INDEX
   ============================================================ */

.maps-territorial-pressure {
    margin-top:
        18px;

    padding:
        18px;

    border:
        1px solid #dbe4ed;

    border-radius:
        17px;

    background:
        #fbfcfe;
}


.maps-territorial-pressure-header {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        20px;
}


.maps-territorial-pressure-header > div:first-child {
    min-width:
        0;

    flex:
        1 1 auto;
}


.maps-territorial-pressure-header .eyebrow {
    margin:
        0 0 3px;

    color:
        #bd1e2d;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.09em;
}


.maps-territorial-pressure-header h4 {
    margin:
        0;

    color:
        #102d4b;

    font-size:
        18px;

    line-height:
        1.2;
}


.maps-territorial-pressure-header p:last-child {
    margin:
        5px 0 0;

    color:
        #6c8094;

    font-size:
        12px;

    line-height:
        1.4;
}


.maps-territorial-pressure-score {
    flex:
        0 0 auto;

    min-width:
        120px;

    padding:
        10px 14px;

    border:
        1px solid #dbe4ed;

    border-radius:
        14px;

    background:
        #ffffff;

    text-align:
        right;
}


.maps-territorial-pressure-score strong {
    display:
        inline-block;

    margin-top:
        5px;

    color:
        #102d4b;

    font-size:
        30px;

    line-height:
        1;
}


.maps-territorial-pressure-score small {
    color:
        #7b8da0;

    font-size:
        11px;

    font-weight:
        700;
}


.maps-territorial-pressure-level {
    display:
        block;

    width:
        fit-content;

    margin-left:
        auto;

    padding:
        3px 8px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;
}


.maps-territorial-pressure-components {
    margin-top:
        15px;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        9px;
}


.maps-territorial-pressure-components article {
    min-width:
        0;

    padding:
        11px 12px;

    border:
        1px solid #e1e8ef;

    border-radius:
        13px;

    background:
        #ffffff;
}


.maps-territorial-pressure-components span,
.maps-territorial-pressure-components small {
    display:
        block;
}


.maps-territorial-pressure-components span {
    color:
        #718499;

    font-size:
        11px;

    font-weight:
        650;
}


.maps-territorial-pressure-components strong {
    display:
        block;

    margin-top:
        4px;

    color:
        #102d4b;

    font-size:
        19px;
}


.maps-territorial-pressure-components small {
    margin-top:
        3px;

    color:
        #8a9bac;

    font-size:
        9px;

    line-height:
        1.3;
}


.maps-territorial-pressure-reading {
    margin-top:
        12px;

    padding:
        11px 13px;

    border-radius:
        12px;

    background:
        #ffffff;

    border:
        1px solid #e1e8ef;

    display:
        flex;

    gap:
        9px;

    align-items:
        flex-start;
}


.maps-territorial-pressure-reading strong {
    flex:
        0 0 auto;

    color:
        #153553;

    font-size:
        11px;
}


.maps-territorial-pressure-reading span {
    color:
        #61768b;

    font-size:
        11px;

    line-height:
        1.45;
}


.maps-territorial-pressure-formula {
    margin-top:
        9px;

    color:
        #74879a;

    font-size:
        10px;

    line-height:
        1.45;
}


.maps-territorial-pressure-formula strong {
    color:
        #526a80;
}


.maps-territorial-pressure-formula span {
    display:
        block;

    margin-top:
        2px;
}


/* LOW */

.maps-territorial-pressure-low {
    border-color:
        #bfe4cf;

    background:
        #f5fbf7;
}

.maps-territorial-pressure-low
.maps-territorial-pressure-level {
    background:
        #dcf5e7;

    color:
        #14724f;
}


/* MODERATE */

.maps-territorial-pressure-moderate {
    border-color:
        #c7dded;

    background:
        #f5faff;
}

.maps-territorial-pressure-moderate
.maps-territorial-pressure-level {
    background:
        #e5f2fb;

    color:
        #23679d;
}


/* HIGH */

.maps-territorial-pressure-high {
    border-color:
        #f0cf98;

    background:
        #fffaf1;
}

.maps-territorial-pressure-high
.maps-territorial-pressure-level {
    background:
        #fff0d3;

    color:
        #a95c00;
}


/* CRITICAL */

.maps-territorial-pressure-critical {
    border-color:
        #efbdc5;

    background:
        #fff7f8;
}

.maps-territorial-pressure-critical
.maps-territorial-pressure-level {
    background:
        #feecef;

    color:
        #b42335;
}


@media (max-width: 900px) {

    .maps-territorial-pressure-components {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 560px) {

    .maps-territorial-pressure {
        padding:
            14px;
    }


    .maps-territorial-pressure-header {
        flex-direction:
            column;
    }


    .maps-territorial-pressure-score {
        width:
            100%;

        box-sizing:
            border-box;

        text-align:
            left;
    }


    .maps-territorial-pressure-level {
        margin-left:
            0;
    }


    .maps-territorial-pressure-components {
        grid-template-columns:
            1fr 1fr;
    }


    .maps-territorial-pressure-reading {
        flex-direction:
            column;

        gap:
            4px;
    }
}



/* ============================================================
   V15-F37-B — TERRITORIAL SENSITIVITY 3 KM VS 5 KM
   ============================================================ */

.maps-territorial-sensitivity {
    margin-top:
        14px;

    padding:
        14px;

    border:
        1px solid #dbe4ed;

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.72);
}


.maps-territorial-sensitivity-heading {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        14px;
}


.maps-territorial-sensitivity-heading > div {
    min-width:
        0;
}


.maps-territorial-sensitivity-heading strong {
    display:
        block;

    color:
        #153553;

    font-size:
        12px;
}


.maps-territorial-sensitivity-heading span {
    display:
        block;

    margin-top:
        3px;

    color:
        #74879a;

    font-size:
        10px;

    line-height:
        1.4;
}


.maps-territorial-sensitivity-badge {
    flex:
        0 0 auto;

    margin-top:
        0 !important;

    padding:
        4px 8px;

    border-radius:
        999px;

    background:
        #eef4f9;

    color:
        #315775 !important;

    font-size:
        9px !important;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;
}


.maps-territorial-sensitivity-grid {
    margin-top:
        12px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) auto minmax(0, 1fr);

    align-items:
        stretch;

    gap:
        10px;
}


.maps-territorial-scenario {
    position:
        relative;

    min-width:
        0;

    padding:
        12px 13px;

    border:
        1px solid #dfe7ee;

    border-radius:
        13px;

    background:
        #ffffff;
}


.maps-territorial-scenario.is-active {
    box-shadow:
        0 0 0 3px rgba(21, 85, 138, 0.08);

    border-color:
        #8eb4d1;
}


.maps-territorial-scenario-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;
}


.maps-territorial-scenario-top > span {
    color:
        #536b81;

    font-size:
        11px;

    font-weight:
        750;
}


.maps-territorial-active-badge {
    padding:
        2px 6px;

    border-radius:
        999px;

    background:
        #e9f4fb;

    color:
        #15558a;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        0.04em;
}


.maps-territorial-scenario > strong {
    display:
        inline-block;

    margin-top:
        7px;

    color:
        #102d4b;

    font-size:
        25px;

    line-height:
        1;
}


.maps-territorial-scenario > small {
    color:
        #7b8da0;

    font-size:
        9px;

    font-weight:
        700;
}


.maps-territorial-scenario-level {
    margin-top:
        7px;

    width:
        fit-content;

    padding:
        3px 7px;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        850;

    text-transform:
        uppercase;
}


.maps-territorial-scenario p {
    margin:
        8px 0 0;

    color:
        #7a8c9d;

    font-size:
        9px;

    line-height:
        1.35;
}


.maps-territorial-sensitivity-arrow {
    min-width:
        62px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;
}


.maps-territorial-sensitivity-arrow span {
    color:
        #7890a5;

    font-size:
        24px;

    line-height:
        1;
}


.maps-territorial-sensitivity-arrow small {
    padding:
        3px 7px;

    border-radius:
        999px;

    background:
        #eef3f7;

    color:
        #415d76;

    font-size:
        9px;

    font-weight:
        800;
}


/* Scenario level colors */

.maps-territorial-scenario-low
.maps-territorial-scenario-level {
    background:
        #dcf5e7;

    color:
        #14724f;
}


.maps-territorial-scenario-moderate
.maps-territorial-scenario-level {
    background:
        #e5f2fb;

    color:
        #23679d;
}


.maps-territorial-scenario-high
.maps-territorial-scenario-level {
    background:
        #fff0d3;

    color:
        #a95c00;
}


.maps-territorial-scenario-critical
.maps-territorial-scenario-level {
    background:
        #feecef;

    color:
        #b42335;
}


.maps-territorial-sensitivity-reading {
    margin-top:
        10px;

    padding:
        9px 11px;

    border:
        1px solid #e1e8ef;

    border-radius:
        11px;

    background:
        #ffffff;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        7px;
}


.maps-territorial-sensitivity-reading strong {
    flex:
        0 0 auto;

    color:
        #153553;

    font-size:
        10px;
}


.maps-territorial-sensitivity-reading span {
    color:
        #64798d;

    font-size:
        10px;

    line-height:
        1.4;
}


.maps-territorial-sensitivity-note {
    margin-top:
        7px;

    color:
        #8091a2;

    font-size:
        9px;

    line-height:
        1.45;
}


@media (max-width: 620px) {

    .maps-territorial-sensitivity-grid {
        grid-template-columns:
            1fr;
    }


    .maps-territorial-sensitivity-arrow {
        min-width:
            0;

        flex-direction:
            row;

        padding:
            2px 0;
    }


    .maps-territorial-sensitivity-arrow span {
        transform:
            rotate(90deg);
    }


    .maps-territorial-sensitivity-heading {
        flex-direction:
            column;

        gap:
            7px;
    }


    .maps-territorial-sensitivity-reading {
        flex-direction:
            column;

        gap:
            3px;
    }
}


/* ============================================================
   V15-F38 - COLLAPSIBLE MAP LEGEND
   ============================================================ */

/*
 * The legend remains the same operational filter component.
 * Collapsing it is visual only and never changes map filters.
 */

.maps-bottom-legend {
    position: relative;
}


.maps-legend-collapse-control {
    grid-column: 1 / -1;

    width: 100%;

    margin:
        -4px 0 12px;

    padding:
        0 0 11px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border: 0;
    border-bottom: 1px solid #e5edf3;

    background: transparent;
    color: #0f2742;

    font: inherit;
    text-align: left;

    cursor: pointer;
}


.maps-legend-collapse-control-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;
}


.maps-legend-collapse-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #eef6fc;
    color: #123f68;
}


.maps-legend-collapse-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.maps-legend-collapse-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}


.maps-legend-collapse-copy strong {
    color: #0f2742;

    font-size: 0.91rem;
    font-weight: 850;
}


.maps-legend-collapse-copy span {
    color: #64748b;

    font-size: 0.76rem;
    font-weight: 650;
}


.maps-legend-collapse-action {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #315b7c;

    font-size: 0.78rem;
    font-weight: 850;
}


.maps-legend-collapse-chevron {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #f1f6fa;

    transition:
        transform 180ms ease,
        background 180ms ease;
}


.maps-legend-collapse-chevron svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-legend-collapse-chevron {
    transform: rotate(180deg);
}


.maps-bottom-legend:not(.is-collapsed)
.maps-legend-collapse-control:hover
.maps-legend-collapse-chevron {
    background: #e5f1f9;
}


/*
 * Collapsed state.
 *
 * Only the compact header remains visible.
 * Existing filter state is deliberately untouched.
 */

.maps-bottom-legend.is-collapsed {
    display: block !important;

    padding:
        13px 18px !important;
}


.maps-bottom-legend.is-collapsed
.maps-legend-collapse-control {
    margin: 0;
    padding: 0;

    border-bottom: 0;
}


.maps-bottom-legend.is-collapsed
> :not(.maps-legend-collapse-control) {
    display: none !important;
}


.maps-bottom-legend.is-collapsed
.maps-legend-collapse-copy span {
    display: block;
}


/* ------------------------------------------------------------
   V15-F38 - CENTER SITES COMPLETE RESET
   ------------------------------------------------------------ */

/*
 * No permanent visual state is required for reset.
 * This class exists only as a traceability hook.
 */

.maps-fit-sites-button {
    isolation: isolate;
}


@media (max-width: 720px) {

    .maps-bottom-legend {
        margin-top: 10px;
    }


    .maps-legend-collapse-control {
        gap: 10px;
    }


    .maps-legend-collapse-icon {
        width: 31px;
        height: 31px;

        flex-basis: 31px;

        border-radius: 9px;
    }


    .maps-legend-collapse-copy strong {
        font-size: 0.82rem;
    }


    .maps-legend-collapse-copy span {
        font-size: 0.69rem;
    }


    .maps-legend-collapse-action {
        font-size: 0.72rem;
    }


    .maps-bottom-legend.is-collapsed {
        padding:
            11px 13px !important;
    }
}




/* ============================================================
   V15-F38-C - COMPACT MAP LEGEND
   Visual refinement only.
   No filter, map, radius or analysis behavior changes.
   ============================================================ */


/* ------------------------------------------------------------
   1. REMOVE REDUNDANT SECOND "LEYENDA" LABEL
   The collapsible header already identifies the component.
   ------------------------------------------------------------ */

.maps-bottom-legend
> .maps-bottom-legend-section
> .eyebrow {
    display:
        none !important;
}


/* ------------------------------------------------------------
   2. LIGHTER / MORE COMPACT EXPANDED CARD
   ------------------------------------------------------------ */

.maps-bottom-legend:not(.is-collapsed) {
    padding:
        14px 18px 12px !important;

    row-gap:
        0 !important;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-legend-collapse-control {
    margin:
        -1px 0 10px !important;

    padding:
        0 0 9px !important;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-legend-collapse-icon {
    width:
        32px;

    height:
        32px;

    flex-basis:
        32px;

    border-radius:
        9px;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-legend-collapse-copy {
    gap:
        1px;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-legend-collapse-copy strong {
    font-size:
        0.88rem;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-legend-collapse-copy span {
    font-size:
        0.72rem;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-legend-collapse-action {
    font-size:
        0.74rem;
}


/* ------------------------------------------------------------
   3. COMPACT BOTH LEGEND SECTIONS
   ------------------------------------------------------------ */

.maps-bottom-legend:not(.is-collapsed)
.maps-bottom-legend-section {
    min-width:
        0;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-bottom-legend-title {
    display:
        block;

    margin:
        0 0 8px !important;

    color:
        #102d4b;

    font-size:
        0.86rem;

    line-height:
        1.2;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-bottom-items {
    margin-top:
        0 !important;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-site-type-filter-list {
    margin-top:
        0 !important;

    gap:
        6px 10px !important;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-site-type-filter {
    margin:
        -3px -5px !important;

    padding:
        4px 6px !important;

    gap:
        8px !important;
}


/* ------------------------------------------------------------
   4. SLIMMER CENTRAL DIVIDER
   ------------------------------------------------------------ */

.maps-bottom-legend:not(.is-collapsed)
.maps-bottom-divider {
    opacity:
        0.72;
}


/* ------------------------------------------------------------
   5. COMPACT INFO STRIP
   ------------------------------------------------------------ */

.maps-bottom-legend:not(.is-collapsed)
.maps-bottom-info {
    margin-top:
        10px !important;

    min-height:
        38px;

    padding:
        8px 12px !important;

    border-radius:
        10px !important;

    gap:
        9px !important;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-bottom-info svg {
    width:
        18px !important;

    height:
        18px !important;

    flex:
        0 0 18px;
}


.maps-bottom-legend:not(.is-collapsed)
.maps-bottom-info span {
    font-size:
        0.72rem;

    line-height:
        1.35;
}


/* ------------------------------------------------------------
   6. KEEP COLLAPSED STATE ULTRA-COMPACT
   ------------------------------------------------------------ */

.maps-bottom-legend.is-collapsed {
    padding:
        10px 15px !important;
}


.maps-bottom-legend.is-collapsed
.maps-legend-collapse-icon {
    width:
        30px;

    height:
        30px;

    flex-basis:
        30px;
}


.maps-bottom-legend.is-collapsed
.maps-legend-collapse-copy strong {
    font-size:
        0.84rem;
}


.maps-bottom-legend.is-collapsed
.maps-legend-collapse-copy span {
    font-size:
        0.69rem;
}


/* ------------------------------------------------------------
   7. MOBILE
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    .maps-bottom-legend:not(.is-collapsed) {
        padding:
            12px 13px 11px !important;
    }


    .maps-bottom-legend:not(.is-collapsed)
    .maps-legend-collapse-control {
        margin-bottom:
            9px !important;

        padding-bottom:
            8px !important;
    }


    .maps-bottom-legend:not(.is-collapsed)
    .maps-bottom-legend-title {
        margin-bottom:
            7px !important;

        font-size:
            0.80rem;
    }


    .maps-bottom-legend:not(.is-collapsed)
    .maps-bottom-info {
        margin-top:
            9px !important;

        padding:
            7px 10px !important;
    }


    .maps-bottom-legend.is-collapsed {
        padding:
            9px 11px !important;
    }
}



/* ============================================================
   V15-F39 — COLLAPSIBLE FLOATING MAP CONTROLS
   Visual state only.
   Existing control functionality remains untouched.
   ============================================================ */


/*
 * The original .maps-floating-controls design remains
 * completely unchanged while expanded.
 */

.maps-controls-collapse-toggle {
    position:
        absolute;

    top:
        20px;

    right:
        214px;

    z-index:
        705;

    min-width:
        36px;

    height:
        36px;

    padding:
        0;

    border:
        1px solid rgba(15, 39, 66, 0.16);

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, 0.96);

    color:
        #123f68;

    box-shadow:
        0 5px 14px rgba(15, 23, 42, 0.13);

    backdrop-filter:
        blur(6px);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    cursor:
        pointer;

    font:
        inherit;

    font-size:
        0.76rem;

    font-weight:
        850;

    transition:
        right 180ms ease,
        width 180ms ease,
        min-width 180ms ease,
        padding 180ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}


.maps-controls-collapse-toggle:hover {
    background:
        #f8fbfd;

    box-shadow:
        0 7px 17px rgba(15, 23, 42, 0.15);
}


.maps-controls-collapse-toggle-icon {
    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;
}


.maps-controls-collapse-toggle-icon svg {
    display:
        block;

    width:
        100%;

    height:
        100%;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform 180ms ease;
}


.maps-controls-collapse-toggle-label {
    display:
        none;
}


/*
 * Expanded:
 * compact chevron button immediately to the left
 * of the approved controls panel.
 */

.maps-controls-collapse-toggle[
    aria-expanded="true"
]
.maps-controls-collapse-toggle-icon svg {
    transform:
        rotate(180deg);
}


/*
 * Collapsed:
 * original controls disappear visually, but NO internal
 * state is changed.
 */

.maps-floating-controls.is-collapsed {
    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateX(14px);

    transition:
        opacity 160ms ease,
        transform 180ms ease,
        visibility 0s linear 180ms;
}


.maps-floating-controls:not(.is-collapsed) {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(0);

    transition:
        opacity 160ms ease,
        transform 180ms ease;
}


/*
 * When collapsed, the restore control becomes a small
 * self-explanatory pill in the normal control corner.
 */

.maps-controls-collapse-toggle.is-collapsed {
    right:
        16px;

    min-width:
        116px;

    padding:
        0 12px;

    justify-content:
        flex-start;
}


.maps-controls-collapse-toggle.is-collapsed
.maps-controls-collapse-toggle-label {
    display:
        inline;
}


.maps-controls-collapse-toggle.is-collapsed
.maps-controls-collapse-toggle-icon svg {
    transform:
        rotate(0deg);
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    .maps-controls-collapse-toggle {
        top:
            12px;

        right:
            210px;

        width:
            34px;

        min-width:
            34px;

        height:
            34px;

        border-radius:
            10px;
    }


    .maps-controls-collapse-toggle.is-collapsed {
        right:
            12px;

        width:
            auto;

        min-width:
            112px;

        padding:
            0 11px;
    }


    .maps-controls-collapse-toggle-icon {
        width:
            17px;

        height:
            17px;

        flex-basis:
            17px;
    }
}


/*
 * Very narrow phones:
 * keep the collapsed restore pill compact.
 */

@media (max-width: 390px) {

    .maps-controls-collapse-toggle.is-collapsed {
        min-width:
            104px;

        font-size:
            0.72rem;
    }
}



/* ============================================================
   V15-F39-B — DEFINITIVE COLLAPSE FIX
   - Toggle above layer control
   - Layer + floating controls collapse together
   - Restore pill remains accessible
   ============================================================ */


/* ------------------------------------------------------------
   EXPANDED TOGGLE
   Place it immediately to the LEFT of the complete control
   stack and above every map-control layer.
   ------------------------------------------------------------ */

.maps-controls-collapse-toggle {
    top:
        16px !important;

    right:
        244px !important;

    z-index:
        760 !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;
}


/* ------------------------------------------------------------
   BOTH CONTROL GROUPS PARTICIPATE IN THE SAME COLLAPSE
   ------------------------------------------------------------ */

.maps-layer-control,
.maps-floating-controls {
    transition:
        opacity 160ms ease,
        transform 180ms ease,
        visibility 0s linear 0s;
}


.maps-map-panel.maps-controls-are-collapsed
.maps-layer-control,

.maps-map-panel.maps-controls-are-collapsed
.maps-floating-controls {
    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;

    transform:
        translateX(14px) !important;

    transition:
        opacity 160ms ease,
        transform 180ms ease,
        visibility 0s linear 180ms;
}


/*
 * Explicit class fallback.
 * Keeps compatibility with V15-F39's original state class.
 */

.maps-layer-control.is-collapsed,
.maps-floating-controls.is-collapsed {
    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;
}


/* ------------------------------------------------------------
   COLLAPSED RESTORE PILL
   Always on top and fully clickable.
   ------------------------------------------------------------ */

.maps-controls-collapse-toggle.is-collapsed {
    top:
        16px !important;

    right:
        16px !important;

    z-index:
        780 !important;

    width:
        auto !important;

    min-width:
        118px !important;

    height:
        38px !important;

    padding:
        0 13px !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;

    justify-content:
        flex-start !important;
}


.maps-controls-collapse-toggle.is-collapsed
.maps-controls-collapse-toggle-label {
    display:
        inline-flex !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    /*
     * Layer control:
     * right 12px + width 184px.
     * Toggle sits 10px to its left.
     */

    .maps-controls-collapse-toggle {
        top:
            12px !important;

        right:
            206px !important;

        z-index:
            760 !important;

        width:
            34px !important;

        min-width:
            34px !important;

        height:
            34px !important;
    }


    .maps-controls-collapse-toggle.is-collapsed {
        top:
            12px !important;

        right:
            12px !important;

        width:
            auto !important;

        min-width:
            112px !important;

        height:
            36px !important;

        padding:
            0 11px !important;
    }
}


@media (max-width: 390px) {

    .maps-controls-collapse-toggle.is-collapsed {
        min-width:
            104px !important;
    }
}



/* ============================================================
   V15-F39-C — COLLAPSED CONFIGURATION ICON
   Visual refinement of the approved V15-F39-B behavior.
   ============================================================ */


/*
 * Expanded button:
 * only the directional chevron is visible.
 */

.maps-controls-collapse-toggle-icon-expanded {
    display:
        inline-flex;
}


.maps-controls-collapse-toggle-icon-config,
.maps-controls-collapse-toggle-end {
    display:
        none;
}


/*
 * The previous V15-F39 rotation is neutralized because
 * the arrow direction is now explicit in the SVG itself.
 */

.maps-controls-collapse-toggle[
    aria-expanded="true"
]
.maps-controls-collapse-toggle-icon-expanded svg {
    transform:
        none !important;
}


/* ============================================================
   COLLAPSED PILL
   ⚙ + Controles + >
   ============================================================ */

.maps-controls-collapse-toggle.is-collapsed {
    min-width:
        132px !important;

    padding:
        0 12px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        8px !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    color:
        #123f68 !important;

    border-color:
        rgba(15, 39, 66, 0.14) !important;

    box-shadow:
        0 6px 17px rgba(15, 23, 42, 0.14) !important;
}


.maps-controls-collapse-toggle.is-collapsed
.maps-controls-collapse-toggle-icon-expanded {
    display:
        none !important;
}


.maps-controls-collapse-toggle.is-collapsed
.maps-controls-collapse-toggle-icon-config {
    display:
        inline-flex !important;

    width:
        20px;

    height:
        20px;

    flex:
        0 0 20px;

    color:
        #0f4d7a;
}


.maps-controls-collapse-toggle.is-collapsed
.maps-controls-collapse-toggle-icon-config svg {
    width:
        20px;

    height:
        20px;

    transform:
        none !important;
}


.maps-controls-collapse-toggle.is-collapsed
.maps-controls-collapse-toggle-label {
    display:
        inline-flex !important;

    align-items:
        center;

    flex:
        1 1 auto;

    color:
        #102d4b;

    font-size:
        0.78rem;

    font-weight:
        850;
}


.maps-controls-collapse-toggle.is-collapsed
.maps-controls-collapse-toggle-end {
    width:
        15px;

    height:
        15px;

    flex:
        0 0 15px;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    color:
        #315b7c;
}


.maps-controls-collapse-toggle.is-collapsed
.maps-controls-collapse-toggle-end svg {
    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* subtle interactive polish */

.maps-controls-collapse-toggle.is-collapsed:hover {
    background:
        #f8fbfd !important;

    border-color:
        rgba(15, 78, 123, 0.24) !important;

    box-shadow:
        0 8px 19px rgba(15, 23, 42, 0.16) !important;
}


.maps-controls-collapse-toggle.is-collapsed:active {
    transform:
        translateY(1px);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

    .maps-controls-collapse-toggle.is-collapsed {
        min-width:
            126px !important;

        height:
            37px !important;

        padding:
            0 11px !important;

        gap:
            7px !important;
    }


    .maps-controls-collapse-toggle.is-collapsed
    .maps-controls-collapse-toggle-icon-config {
        width:
            19px;

        height:
            19px;

        flex-basis:
            19px;
    }


    .maps-controls-collapse-toggle.is-collapsed
    .maps-controls-collapse-toggle-icon-config svg {
        width:
            19px;

        height:
            19px;
    }


    .maps-controls-collapse-toggle.is-collapsed
    .maps-controls-collapse-toggle-label {
        font-size:
            0.75rem;
    }
}


@media (max-width: 390px) {

    .maps-controls-collapse-toggle.is-collapsed {
        min-width:
            120px !important;
    }
}


/* ============================================================
   V15-F41 - UNIFORM MAP SITE CODE LABELS
   ------------------------------------------------------------
   Visual-only correction.

   Goals:
   - Every site-code capsule has exactly the same dimensions.
   - Complete operational codes remain visible on mobile.
   - No ellipsis/truncation.
   - Marker geometry and operational map logic remain unchanged.
   ============================================================ */

.maps-site-code {
    box-sizing: border-box !important;

    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;

    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    padding:
        0 4px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;

    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: -0.15px !important;

    text-align: center !important;
}


/*
 * Mobile keeps exactly the same capsule dimensions.
 * A slightly tighter type size protects complete codes such as
 * PRO-MOR-003 without creating labels of different widths.
 */

@media (max-width: 720px) {

    .maps-site-code {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;

        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;

        padding:
            0 3px !important;

        font-size:
            10.5px !important;

        letter-spacing:
            -0.2px !important;

        overflow:
            visible !important;

        text-overflow:
            clip !important;

        white-space:
            nowrap !important;
    }
}


/* ============================================================
   V15-F41-C - MOBILE SITE CODE LABEL VERTICAL POSITION
   ------------------------------------------------------------
   Visual-only adjustment.

   Keep:
   - same width
   - same height
   - same typography
   - same marker coordinates

   Move only the floating operational-code capsule slightly
   upward on mobile to create cleaner separation from the pin.
   ============================================================ */

@media (max-width: 720px) {

    .maps-site-code {
        transform:
            translate(-50%, -5px) !important;
    }
}


/* ============================================================
   V15-F42 — EXTERNAL APIARIES
   ============================================================ */

/*
 * V15-F41 marker-label geometry is intentionally untouched.
 */

.maps-dot-external {
    background: #2563eb !important;
}


.maps-site-pin-external {
    background: #2563eb !important;
}


.maps-site-type-filter[
    data-map-site-type="external"
].active {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    border-color:
        rgba(
            37,
            99,
            235,
            0.24
        ) !important;
}


.maps-site-type-filter[
    data-map-site-type="external"
].active .maps-dot {
    box-shadow:
        0 0 0 5px
        rgba(
            37,
            99,
            235,
            0.13
        ) !important;
}


.maps-site-code-external {
    font-size: 9.5px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


@media (max-width: 760px) {

    .maps-site-code-external {
        font-size: 9px !important;
    }
}

/* ==========================================================
   V15-F42-QA5-B — External apiary form presentation
   ========================================================== */

#sitesForm.is-external-apiary #sitesTypeField {
    display: none !important;
}

#sitesForm.is-external-apiary #sitesLatitudeField {
    grid-column: 1;
}

#sitesForm.is-external-apiary #sitesLongitudeField {
    grid-column: 2;
}

@media (max-width: 700px) {

    #sitesForm.is-external-apiary #sitesLatitudeField,
    #sitesForm.is-external-apiary #sitesLongitudeField {
        grid-column: auto;
    }
}


/* ==========================================================
   V15-F42-QA5-D — External apiary final form geometry
   ========================================================== */

#sitesForm.is-external-apiary #sitesNameField {
    grid-column: 1 / -1;
}

#sitesForm.is-external-apiary #sitesGpsField {
    grid-column: 1 / -1;
}

#sitesForm .sites-gps-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#sitesForm.is-external-apiary #sitesLatitudeField {
    grid-column: 1;
}

#sitesForm.is-external-apiary #sitesLongitudeField {
    grid-column: 2;
}

@media (max-width: 700px) {

    #sitesForm.is-external-apiary #sitesNameField,
    #sitesForm.is-external-apiary #sitesGpsField,
    #sitesForm.is-external-apiary #sitesLatitudeField,
    #sitesForm.is-external-apiary #sitesLongitudeField {
        grid-column: 1;
    }
}



/* ==========================================================
   V15-F42-QA7-A2-R2
   Registrar apiario externo
   ========================================================== */


/* ---------- field icon system ---------- */

#sitesForm .sites-field-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#sitesForm .sites-field-icon {
    display: none;

    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    color: #496985;
}

#sitesForm.is-external-apiary
.sites-field-icon {
    display: block;
}


/*
 * Latitud y Longitud NO llevan icono.
 */


/* ---------- form geometry ---------- */

#sitesForm.is-external-apiary
#sitesNameField {
    grid-column: 1 / -1;
}

#sitesForm.is-external-apiary
#sitesGpsField {
    grid-column: 1 / -1;
}

#sitesForm.is-external-apiary
#sitesLatitudeField {
    grid-column: 1;
}

#sitesForm.is-external-apiary
#sitesLongitudeField {
    grid-column: 2;
}


/* ---------- GPS ---------- */

#sitesForm.is-external-apiary
.sites-gps-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


/* ---------- notes template ---------- */

#sitesForm.is-external-apiary
.sites-notes-guidance {
    color: #64748b;
    font-weight: 500;
}

#sitesForm.is-external-apiary
.sites-notes-field textarea {
    min-height: 205px;

    font-size: 14px;
    line-height: 1.5;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}


/* ---------- duplicate coordinate / error alert ---------- */

#sitesForm.is-external-apiary
#sitesFormMessage:not([hidden]) {
    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr);

    align-items: center;

    gap: 11px;

    margin-top: 14px;

    padding:
        13px
        14px;

    border:
        1px solid
        rgba(220, 38, 38, 0.28);

    border-radius:
        13px;

    background:
        linear-gradient(
            180deg,
            rgba(254, 242, 242, 0.98) 0%,
            rgba(255, 247, 247, 0.98) 100%
        );

    color:
        #991b1b;

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.45;
}


#sitesForm.is-external-apiary
#sitesFormMessage:not([hidden])::before {
    content:
        "!";

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    border-radius:
        50%;

    background:
        #dc2626;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1;
}


/* ---------- save button icon ---------- */

#sitesSaveButton {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;
}


#sitesSaveButton
.sites-save-icon {
    display:
        none;

    width:
        18px;

    height:
        18px;

    flex:
        0 0 auto;
}


#sitesForm.is-external-apiary
#sitesSaveButton
.sites-save-icon {
    display:
        block;
}


/* ==========================================================
   MOBILE
   Latitud + Longitud side by side
   ========================================================== */

@media (max-width: 700px) {

    #sitesForm.is-external-apiary
    .varroa-form-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        column-gap:
            10px;

        row-gap:
            14px;
    }


    #sitesForm.is-external-apiary
    #sitesNameField,

    #sitesForm.is-external-apiary
    #sitesGpsField {
        grid-column:
            1 / -1;
    }


    #sitesForm.is-external-apiary
    #sitesLatitudeField {
        grid-column:
            1;
    }


    #sitesForm.is-external-apiary
    #sitesLongitudeField {
        grid-column:
            2;
    }


    #sitesForm.is-external-apiary
    #sitesLatitudeField input,

    #sitesForm.is-external-apiary
    #sitesLongitudeField input {
        width:
            100%;

        min-width:
            0;

        padding-left:
            9px;

        padding-right:
            9px;

        font-size:
            13.5px;
    }


    #sitesForm.is-external-apiary
    .sites-notes-field textarea {
        min-height:
            190px;

        font-size:
            13px;

        line-height:
            1.45;
    }


    #sitesForm.is-external-apiary
    #sitesFormMessage:not([hidden]) {
        grid-template-columns:
            29px
            minmax(0, 1fr);

        gap:
            9px;

        padding:
            11px
            12px;

        font-size:
            12.5px;
    }


    #sitesForm.is-external-apiary
    #sitesFormMessage:not([hidden])::before {
        width:
            27px;

        height:
            27px;

        font-size:
            16px;
    }


    #sitesForm.is-external-apiary
    #sitesSaveButton
    .sites-save-icon {
        width:
            17px;

        height:
            17px;
    }
}


/* ==========================================================
   V15-F42-QA8
   External apiary final approved visual
   ========================================================== */


/* ----------------------------------------------------------
   GPS action button — approved green success/action styling
   ---------------------------------------------------------- */

#sitesForm.is-external-apiary
#sitesUseLocationButton {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding:
        9px
        14px;

    border:
        1px solid
        #8bd49d;

    border-radius:
        12px;

    background:
        linear-gradient(
            180deg,
            #f1fbf3 0%,
            #eaf8ee 100%
        );

    color:
        #087625;

    font-weight:
        700;

    box-shadow:
        0 2px 7px
        rgba(22, 163, 74, 0.08);

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}


#sitesForm.is-external-apiary
#sitesUseLocationButton:hover:not(:disabled) {
    border-color:
        #68c782;

    background:
        #e5f7e9;

    box-shadow:
        0 3px 9px
        rgba(22, 163, 74, 0.12);
}


#sitesForm.is-external-apiary
#sitesUseLocationButton:active:not(:disabled) {
    transform:
        translateY(1px);
}


#sitesForm.is-external-apiary
#sitesUseLocationButton:disabled {
    opacity:
        0.68;

    cursor:
        wait;
}


#sitesForm.is-external-apiary
#sitesUseLocationButton
.sites-gps-action-icon {
    display:
        block !important;

    width:
        18px !important;

    height:
        18px !important;

    flex:
        0 0 18px;

    color:
        #087625 !important;

    stroke:
        currentColor !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}



/* ----------------------------------------------------------
   GPS success message — approved green confirmation
   All ordinary errors continue using existing red styling.
   ---------------------------------------------------------- */

#sitesForm.is-external-apiary
#sitesFormMessage.is-success:not([hidden]) {
    border:
        1px solid
        rgba(22, 163, 74, 0.34);

    background:
        linear-gradient(
            180deg,
            rgba(240, 253, 244, 0.99) 0%,
            rgba(236, 252, 241, 0.99) 100%
        );

    color:
        #087625;

    font-weight:
        700;

    box-shadow:
        0 2px 8px
        rgba(22, 163, 74, 0.06);
}


#sitesForm.is-external-apiary
#sitesFormMessage.is-success:not([hidden])::before {
    content:
        "✓";

    background:
        #16a34a;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        800;
}



/* ----------------------------------------------------------
   Save icon — force approved white floppy icon visible
   ---------------------------------------------------------- */

#sitesForm.is-external-apiary
#sitesSaveButton
.sites-save-icon {
    display:
        block !important;

    width:
        21px !important;

    height:
        21px !important;

    flex:
        0 0 21px;

    color:
        #ffffff !important;

    stroke:
        currentColor !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


#sitesForm.is-external-apiary
#sitesSaveButton {
    gap:
        10px;
}



/* ----------------------------------------------------------
   Mobile tuning matching approved mockup
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    #sitesForm.is-external-apiary
    #sitesUseLocationButton {
        min-height:
            40px;

        padding:
            8px
            12px;

        gap:
            7px;

        font-size:
            13px;
    }


    #sitesForm.is-external-apiary
    #sitesUseLocationButton
    .sites-gps-action-icon {
        width:
            17px !important;

        height:
            17px !important;

        flex-basis:
            17px;
    }


    #sitesForm.is-external-apiary
    #sitesSaveButton
    .sites-save-icon {
        width:
            20px !important;

        height:
            20px !important;

        flex-basis:
            20px;
    }
}


/* ==========================================================
   V15-F42-QA9
   FINAL WHITE SAVE ICON
   Registrar apiario externo
   ========================================================== */


/*
 * The original inline SVG remains in the DOM for structural
 * compatibility, but is hidden here.
 *
 * The visible floppy icon is rendered using ::before so it
 * cannot be removed by button text changes or SVG rules.
 */

#sitesForm.is-external-apiary
#sitesSaveButton
.sites-save-icon {
    display:
        none !important;
}


/*
 * White outlined floppy icon.
 */

#sitesForm.is-external-apiary
#sitesSaveButton::before {
    content:
        "";

    display:
        block;

    width:
        22px;

    height:
        22px;

    flex:
        0 0 22px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h12l2 2v16H5V3Z'/%3E%3Cpath d='M8 3v6h8V3'/%3E%3Crect x='8' y='14' width='8' height='5' rx='1'/%3E%3C/svg%3E");

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    pointer-events:
        none;
}


/*
 * Keep icon + text centered as one unit.
 */

#sitesForm.is-external-apiary
#sitesSaveButton {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;
}


/* Mobile */
@media (max-width: 700px) {

    #sitesForm.is-external-apiary
    #sitesSaveButton::before {
        width:
            21px;

        height:
            21px;

        flex-basis:
            21px;
    }

}


/* ==========================================================
   V15-F42-QA10
   FINAL EXTERNAL APIARY MODAL POLISH
   ========================================================== */


/* ----------------------------------------------------------
   1. Remove save icon completely
   ---------------------------------------------------------- */

/*
 * QA9 rendered the visible floppy through ::before.
 * Disable it completely.
 */

#sitesForm.is-external-apiary
#sitesSaveButton::before {
    content:
        none !important;

    display:
        none !important;

    width:
        0 !important;

    height:
        0 !important;

    flex:
        0 0 0 !important;

    background-image:
        none !important;
}


/*
 * The old inline SVG remains in the DOM only for compatibility,
 * but stays invisible.
 */

#sitesForm.is-external-apiary
#sitesSaveButton
.sites-save-icon {
    display:
        none !important;

    visibility:
        hidden !important;

    width:
        0 !important;

    height:
        0 !important;

    flex:
        0 0 0 !important;
}


/*
 * Center text alone.
 */

#sitesForm.is-external-apiary
#sitesSaveButton {
    gap:
        0 !important;
}



/* ----------------------------------------------------------
   2. Full rounded external-apiary modal
   Desktop: all four corners rounded
   ---------------------------------------------------------- */

#sitesModal
.varroa-modal-dialog {
    border-radius:
        22px !important;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    /*
     * Ensures the scrollable content and scrollbar are also
     * clipped to the four rounded corners.
     */
    clip-path:
        inset(
            0
            round
            22px
        );
}



/* ----------------------------------------------------------
   Mobile: preserve four rounded corners too
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    #sitesModal
    .varroa-modal-dialog {
        border-radius:
            20px !important;

        clip-path:
            inset(
                0
                round
                20px
            );
    }

}


/* ==========================================================
   V15-F44-E
   NUEVO SITIO — visual alignment with approved external form
   ========================================================== */


/* ----------------------------------------------------------
   Explicit operational form geometry
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
.varroa-form-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    column-gap:
        14px;

    row-gap:
        15px;
}


#sitesForm.is-operational-site
.sites-span-full {
    grid-column:
        1 / -1;
}


#sitesForm.is-operational-site
#sitesAddressField {
    grid-column:
        1 / -1;
}


/* ----------------------------------------------------------
   Unified field-label / linear-icon language
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
.sites-field-label {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        22px;
}


#sitesForm.is-operational-site
.sites-field-icon {
    width:
        19px;

    height:
        19px;

    flex:
        0 0 19px;

    fill:
        none;

    stroke:
        #1d4ed8;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


#sitesForm.is-operational-site
input,
#sitesForm.is-operational-site
select,
#sitesForm.is-operational-site
textarea {
    border-radius:
        12px;
}


/* ----------------------------------------------------------
   GPS — exactly the approved green interaction language
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesUseLocationButton {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        42px;

    padding:
        9px 14px;

    border:
        1px solid #8bd49d;

    border-radius:
        12px;

    background:
        linear-gradient(
            180deg,
            #f1fbf3 0%,
            #eaf8ee 100%
        );

    color:
        #087625;

    font-weight:
        700;

    box-shadow:
        0 2px 7px
        rgba(22, 163, 74, 0.08);

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}


#sitesForm.is-operational-site
#sitesUseLocationButton:hover:not(:disabled) {
    border-color:
        #68c782;

    background:
        #e5f7e9;

    box-shadow:
        0 3px 9px
        rgba(22, 163, 74, 0.12);
}


#sitesForm.is-operational-site
#sitesUseLocationButton:active:not(:disabled) {
    transform:
        translateY(1px);
}


#sitesForm.is-operational-site
#sitesUseLocationButton:disabled {
    opacity:
        0.68;

    cursor:
        wait;
}


#sitesForm.is-operational-site
#sitesUseLocationButton
.sites-gps-action-icon {
    display:
        block !important;

    width:
        18px !important;

    height:
        18px !important;

    flex:
        0 0 18px;

    fill:
        none;

    color:
        #087625 !important;

    stroke:
        currentColor !important;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ----------------------------------------------------------
   Success + error message same approved visual language
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesFormMessage:not([hidden]) {
    display:
        grid;

    grid-template-columns:
        30px minmax(0, 1fr);

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 14px;

    border:
        1px solid rgba(220, 38, 38, 0.24);

    border-radius:
        12px;

    background:
        rgba(254, 242, 242, 0.98);

    color:
        #991b1b;

    font-weight:
        700;

    line-height:
        1.45;
}


#sitesForm.is-operational-site
#sitesFormMessage:not([hidden])::before {
    content:
        "!";

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    border-radius:
        50%;

    background:
        #dc2626;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        800;
}


#sitesForm.is-operational-site
#sitesFormMessage.is-success:not([hidden]) {
    border:
        1px solid
        rgba(22, 163, 74, 0.34);

    background:
        linear-gradient(
            180deg,
            rgba(240, 253, 244, 0.99) 0%,
            rgba(236, 252, 241, 0.99) 100%
        );

    color:
        #087625;

    box-shadow:
        0 2px 8px
        rgba(22, 163, 74, 0.06);
}


#sitesForm.is-operational-site
#sitesFormMessage.is-success:not([hidden])::before {
    content:
        "✓";

    background:
        #16a34a;

    color:
        #ffffff;
}


/* ----------------------------------------------------------
   Access — 3 exclusive radio cards
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
.sites-access-field {
    min-width:
        0;

    margin:
        18px 0 0;

    padding:
        0;

    border:
        0;
}


#sitesForm.is-operational-site
.sites-access-field legend {
    margin:
        0 0 10px;

    padding:
        0;

    color:
        #334155;

    font-weight:
        700;
}


#sitesForm.is-operational-site
.sites-access-options {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        12px;

    margin:
        0;
}


#sitesForm.is-operational-site
.sites-access-option {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        22px 48px minmax(0, 1fr);

    align-items:
        center;

    gap:
        10px;

    min-height:
        78px;

    padding:
        12px 13px;

    border:
        1px solid #d7e0ea;

    border-radius:
        14px;

    background:
        #ffffff;

    cursor:
        pointer;

    box-shadow:
        0 2px 7px
        rgba(15, 23, 42, 0.035);

    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}


#sitesForm.is-operational-site
.sites-access-option:hover {
    border-color:
        #9fb8da;

    background:
        #f8fbff;

    transform:
        translateY(-1px);
}


#sitesForm.is-operational-site
.sites-access-option:has(input:checked) {
    border-color:
        #3b82f6;

    background:
        #eff6ff;

    box-shadow:
        0 0 0 2px
        rgba(59, 130, 246, 0.10);
}


#sitesForm.is-operational-site
.sites-access-option input[type="radio"] {
    width:
        18px;

    height:
        18px;

    margin:
        0;

    accent-color:
        #2563eb;
}


#sitesForm.is-operational-site
.sites-access-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        38px;

    border-radius:
        10px;

    background:
        #eef4fb;

    color:
        #35516f;
}


#sitesForm.is-operational-site
.sites-access-icon svg {
    width:
        34px;

    height:
        26px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


#sitesForm.is-operational-site
.sites-access-none-icon {
    color:
        #64748b;

    background:
        #f1f5f9;
}


#sitesForm.is-operational-site
.sites-access-text {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    min-width:
        0;
}


#sitesForm.is-operational-site
.sites-access-text strong {
    color:
        #334155;

    font-size:
        14px;

    line-height:
        1.25;
}


#sitesForm.is-operational-site
.sites-access-text small {
    color:
        #64748b;

    font-size:
        12px;

    line-height:
        1.3;
}


/* ----------------------------------------------------------
   Notes
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
.sites-notes-field {
    margin-top:
        18px;
}


#sitesForm.is-operational-site
.sites-notes-field textarea {
    min-height:
        150px;

    line-height:
        1.5;
}


/* ----------------------------------------------------------
   Save remains text-only, matching approved external modal
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesSaveButton {
    gap:
        0 !important;
}


#sitesForm.is-operational-site
#sitesSaveButton::before,
#sitesForm.is-operational-site
#sitesSaveButton
.sites-save-icon {
    display:
        none !important;

    content:
        none !important;
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    #sitesForm.is-operational-site
    .varroa-form-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    #sitesForm.is-operational-site
    .sites-span-full,
    #sitesForm.is-operational-site
    #sitesAddressField {
        grid-column:
            1 / -1;
    }


    #sitesForm.is-operational-site
    .sites-access-options {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 700px) {

    #sitesForm.is-operational-site
    .varroa-form-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        column-gap:
            10px;

        row-gap:
            14px;
    }


    #sitesForm.is-operational-site
    #sitesNameField,
    #sitesForm.is-operational-site
    #sitesCodeField,
    #sitesForm.is-operational-site
    #sitesTypeField,
    #sitesForm.is-operational-site
    #sitesGpsField,
    #sitesForm.is-operational-site
    #sitesAltitudeField,
    #sitesForm.is-operational-site
    #sitesLocalityField,
    #sitesForm.is-operational-site
    #sitesRegionField,
    #sitesForm.is-operational-site
    #sitesCountryField,
    #sitesForm.is-operational-site
    #sitesAddressField,
    #sitesForm.is-operational-site
    #sitesRoadTypeField {
        grid-column:
            1 / -1;
    }


    #sitesForm.is-operational-site
    #sitesLatitudeField {
        grid-column:
            1;
    }


    #sitesForm.is-operational-site
    #sitesLongitudeField {
        grid-column:
            2;
    }


    #sitesForm.is-operational-site
    #sitesLatitudeField input,
    #sitesForm.is-operational-site
    #sitesLongitudeField input {
        width:
            100%;

        min-width:
            0;

        padding-left:
            9px;

        padding-right:
            9px;

        font-size:
            13.5px;
    }


    #sitesForm.is-operational-site
    #sitesUseLocationButton {
        min-height:
            40px;

        padding:
            8px 12px;

        font-size:
            13px;
    }


    #sitesForm.is-operational-site
    .sites-access-option {
        grid-template-columns:
            22px 44px minmax(0, 1fr);

        min-height:
            72px;

        padding:
            11px 12px;
    }


    #sitesForm.is-operational-site
    .sites-notes-field textarea {
        min-height:
            175px;

        font-size:
            13px;
    }


    #sitesForm.is-operational-site
    #sitesFormMessage:not([hidden]) {
        grid-template-columns:
            29px minmax(0, 1fr);

        gap:
            9px;

        padding:
            11px 12px;

        font-size:
            12.5px;
    }
}


/* ==========================================================
   V15-F44-F-B-R2
   RECOVERY GUARD — APPROVED EXTERNAL APIARY FORM

   F44 introduced operational-only elements inside the shared
   sites form. They must not alter the approved external mode.
   ========================================================== */


/* Entire operational Access section is invisible externally. */

#sitesForm.is-external-apiary
#sitesAccessField {
    display:
        none !important;
}


/*
 * Shared field icons must remain true line icons.
 * F44 rebuilt the inline SVG markup without the previous
 * explicit SVG presentation attributes.
 */

#sitesForm.is-external-apiary
.sites-field-icon {
    fill:
        none !important;

    stroke:
        currentColor !important;

    stroke-width:
        1.8 !important;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/*
 * Keep the approved GPS icon as a linear SVG too.
 */

#sitesForm.is-external-apiary
.sites-gps-action-icon {
    fill:
        none !important;

    stroke:
        currentColor !important;

    stroke-width:
        1.8 !important;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



/* ==========================================================
   V15-F44-G-A
   NUEVO SITIO — VISUAL MATCH WITH APPROVED EXTERNAL FORM

   IMPORTANT:
   Everything in this block is scoped to .is-operational-site.
   The approved external-apiary visual mode must remain intact.
   ========================================================== */


/* ----------------------------------------------------------
   Main operational form grid
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
.varroa-form-grid.sites-site-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    column-gap:
        18px;

    row-gap:
        18px;

    align-items:
        start;
}


/* ----------------------------------------------------------
   Shared field presentation
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
.varroa-form-grid > label,
#sitesForm.is-operational-site
.sites-gps-field {
    min-width:
        0;
}


#sitesForm.is-operational-site
.sites-field-label {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        22px;
}


#sitesForm.is-operational-site
.sites-field-icon {
    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ----------------------------------------------------------
   Exact desktop field geometry
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesNameField {
    grid-column:
        1 / -1;
}


#sitesForm.is-operational-site
#sitesCodeField {
    grid-column:
        1;
}


#sitesForm.is-operational-site
#sitesTypeField {
    grid-column:
        2;
}


#sitesForm.is-operational-site
#sitesGpsField {
    grid-column:
        1 / -1;
}


#sitesForm.is-operational-site
#sitesLatitudeField {
    grid-column:
        1;
}


#sitesForm.is-operational-site
#sitesLongitudeField {
    grid-column:
        2;
}


#sitesForm.is-operational-site
#sitesAltitudeField {
    grid-column:
        1;
}


#sitesForm.is-operational-site
#sitesRoadTypeField {
    grid-column:
        2;
}


#sitesForm.is-operational-site
#sitesLocalityField {
    grid-column:
        1;
}


#sitesForm.is-operational-site
#sitesRegionField {
    grid-column:
        2;
}


#sitesForm.is-operational-site
#sitesCountryField {
    grid-column:
        1;
}


#sitesForm.is-operational-site
#sitesAddressField {
    grid-column:
        2;
}


/* ----------------------------------------------------------
   Inputs / selects
   Same clean geometry as approved external form
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
input[type="text"],
#sitesForm.is-operational-site
input[type="number"],
#sitesForm.is-operational-site
select {
    width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;
}


#sitesForm.is-operational-site
#sitesName,
#sitesForm.is-operational-site
#sitesCode,
#sitesForm.is-operational-site
#sitesType,
#sitesForm.is-operational-site
#sitesLatitude,
#sitesForm.is-operational-site
#sitesLongitude,
#sitesForm.is-operational-site
#sitesAltitude,
#sitesForm.is-operational-site
#sitesRoadType,
#sitesForm.is-operational-site
#sitesLocality,
#sitesForm.is-operational-site
#sitesRegion,
#sitesForm.is-operational-site
#sitesCountry,
#sitesForm.is-operational-site
#sitesAddress {
    min-height:
        48px;

    border-radius:
        12px;
}


/* ----------------------------------------------------------
   GPS
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesGpsField {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;
}


#sitesForm.is-operational-site
#sitesGpsField
.sites-field-label {
    margin:
        0;
}


#sitesForm.is-operational-site
#sitesUseLocationButton {
    min-height:
        44px;

    padding:
        9px 16px;

    border-radius:
        12px;
}


#sitesForm.is-operational-site
.sites-gps-action-icon {
    width:
        19px;

    height:
        19px;

    flex:
        0 0 19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ----------------------------------------------------------
   ACCESS
   Full width section
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesAccessField {
    grid-column:
        1 / -1;

    min-width:
        0;

    margin:
        0;

    padding:
        0;

    border:
        0;
}


#sitesForm.is-operational-site
#sitesAccessField > legend {
    width:
        auto;

    margin:
        0 0 10px 0;

    padding:
        0;

    border:
        0;
}


#sitesForm.is-operational-site
#sitesAccessField > legend
.sites-field-label {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;
}


/* ----------------------------------------------------------
   3 access cards
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
.sites-access-options {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        12px;

    width:
        100%;
}


#sitesForm.is-operational-site
.sites-access-option {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        46px minmax(0, 1fr);

    align-items:
        center;

    gap:
        12px;

    min-width:
        0;

    min-height:
        88px;

    margin:
        0;

    padding:
        14px 40px 14px 14px;

    box-sizing:
        border-box;

    border-radius:
        14px;

    cursor:
        pointer;

    overflow:
        hidden;
}


#sitesForm.is-operational-site
.sites-access-option input[type="radio"] {
    position:
        absolute;

    top:
        14px;

    right:
        14px;

    width:
        17px;

    height:
        17px;

    margin:
        0;

    cursor:
        pointer;
}


/* access pictogram */

#sitesForm.is-operational-site
.sites-access-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    min-width:
        44px;

    border-radius:
        12px;
}


#sitesForm.is-operational-site
.sites-access-icon svg {
    display:
        block;

    width:
        30px;

    height:
        24px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* text area within access card */

#sitesForm.is-operational-site
.sites-access-text {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        4px;

    min-width:
        0;

    width:
        100%;
}


#sitesForm.is-operational-site
.sites-access-text strong {
    display:
        block;

    width:
        100%;

    margin:
        0;

    font-size:
        14px;

    line-height:
        1.25;

    white-space:
        normal;

    word-break:
        normal;

    overflow-wrap:
        normal;
}


#sitesForm.is-operational-site
.sites-access-text small {
    display:
        block;

    width:
        100%;

    margin:
        0;

    font-size:
        12.5px;

    line-height:
        1.35;

    white-space:
        normal;

    word-break:
        normal;

    overflow-wrap:
        normal;
}


/* ----------------------------------------------------------
   Notes
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
.sites-notes-field {
    display:
        block;

    width:
        100%;

    margin-top:
        18px;
}


#sitesForm.is-operational-site
.sites-notes-field
.sites-field-label {
    margin-bottom:
        8px;
}


#sitesForm.is-operational-site
.sites-notes-field textarea {
    width:
        100%;

    min-height:
        150px;

    box-sizing:
        border-box;

    border-radius:
        12px;

    line-height:
        1.5;

    resize:
        vertical;
}


/* ----------------------------------------------------------
   Bottom actions
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
.varroa-modal-actions {
    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    gap:
        12px;

    align-items:
        stretch;

    width:
        100%;
}


#sitesForm.is-operational-site
#sitesCancelButton,
#sitesForm.is-operational-site
#sitesSaveButton {
    min-height:
        48px;

    border-radius:
        12px;
}


#sitesForm.is-operational-site
#sitesSaveButton {
    width:
        100%;
}


/* save stays text only */

#sitesForm.is-operational-site
#sitesSaveButton
.sites-save-icon,
#sitesForm.is-operational-site
#sitesSaveButton::before {
    display:
        none !important;

    content:
        none !important;
}


/* ----------------------------------------------------------
   Tablet
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    #sitesForm.is-operational-site
    .sites-access-options {
        grid-template-columns:
            1fr;
    }


    #sitesForm.is-operational-site
    .sites-access-option {
        min-height:
            76px;
    }
}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    #sitesForm.is-operational-site
    .varroa-form-grid.sites-site-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        column-gap:
            10px;

        row-gap:
            14px;
    }


    #sitesForm.is-operational-site
    #sitesNameField,
    #sitesForm.is-operational-site
    #sitesCodeField,
    #sitesForm.is-operational-site
    #sitesTypeField,
    #sitesForm.is-operational-site
    #sitesGpsField,
    #sitesForm.is-operational-site
    #sitesAltitudeField,
    #sitesForm.is-operational-site
    #sitesRoadTypeField,
    #sitesForm.is-operational-site
    #sitesLocalityField,
    #sitesForm.is-operational-site
    #sitesRegionField,
    #sitesForm.is-operational-site
    #sitesCountryField,
    #sitesForm.is-operational-site
    #sitesAddressField {
        grid-column:
            1 / -1;
    }


    /* Lat / Long remain side by side,
       matching approved external form */

    #sitesForm.is-operational-site
    #sitesLatitudeField {
        grid-column:
            1;
    }


    #sitesForm.is-operational-site
    #sitesLongitudeField {
        grid-column:
            2;
    }


    #sitesForm.is-operational-site
    #sitesLatitudeField input,
    #sitesForm.is-operational-site
    #sitesLongitudeField input {
        width:
            100%;

        min-width:
            0;

        padding-left:
            9px;

        padding-right:
            9px;

        font-size:
            13.5px;
    }


    #sitesForm.is-operational-site
    #sitesGpsField {
        align-items:
            flex-start;
    }


    #sitesForm.is-operational-site
    #sitesUseLocationButton {
        min-height:
            40px;

        padding:
            8px 12px;

        font-size:
            13px;
    }


    #sitesForm.is-operational-site
    .sites-access-options {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    #sitesForm.is-operational-site
    .sites-access-option {
        grid-template-columns:
            42px minmax(0, 1fr);

        min-height:
            72px;

        padding:
            11px 38px 11px 12px;
    }


    #sitesForm.is-operational-site
    .sites-access-icon {
        width:
            40px;

        height:
            40px;

        min-width:
            40px;
    }


    #sitesForm.is-operational-site
    .sites-access-icon svg {
        width:
            27px;

        height:
            22px;
    }


    #sitesForm.is-operational-site
    .sites-access-text strong {
        font-size:
            13.5px;
    }


    #sitesForm.is-operational-site
    .sites-access-text small {
        font-size:
            12px;
    }


    #sitesForm.is-operational-site
    .sites-notes-field textarea {
        min-height:
            165px;

        font-size:
            13px;
    }


    #sitesForm.is-operational-site
    .varroa-modal-actions {
        grid-template-columns:
            auto minmax(0, 1fr);

        gap:
            10px;
    }
}


/* ============================================================
   V15-F44-G-E-B — Nuevo sitio field icon visibility
   The shared baseline intentionally hides field icons.
   External mode already restores them.
   Operational mode must restore them independently.
   Scoped only to Nuevo sitio / operational mode.
   ============================================================ */

#sitesForm.is-operational-site
.sites-field-icon {
    display: block;
}

/* ==========================================================
   V15-F44-G-G-D
   NUEVO SITIO
   Tipo de acceso + mobile GPS final visual contract

   ACCESS:
   [ icono ] [ texto ]                 [ radio ]

   GPS mobile:
   [ Ubicación GPS ] [ Usar mi ubicación ]
   ========================================================== */


/* ----------------------------------------------------------
   TIPO DE ACCESO — section spacing
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesAccessField {
    width: 100%;

    margin-top: 12px;
}


#sitesForm.is-operational-site
#sitesAccessField > legend {
    margin:
        0 0 12px 0;

    padding: 0;
}


#sitesForm.is-operational-site
#sitesAccessField > legend
.sites-field-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;
}


/* ----------------------------------------------------------
   ACCESS CARDS CONTAINER
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesAccessField
.sites-access-options {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    width: 100%;

    margin-top: 0;
}


/* ----------------------------------------------------------
   ACCESS CARD
   Important:
   the native radio remains hidden.
   The visible circle is ::after.
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesAccessField
.sites-access-option {
    position: relative;

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr);

    grid-template-rows:
        1fr;

    column-gap: 14px;

    align-items: center;

    width: 100%;
    min-width: 0;

    height: 112px;

    padding:
        14px
        52px
        14px
        14px;

    overflow: hidden;
}


/*
 * Native radio:
 * functional and focusable,
 * but never visible in card layout.
 */
#sitesForm.is-operational-site
#sitesAccessField
.sites-access-option
input[type="radio"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;

    padding: 0;

    opacity: 0 !important;

    pointer-events: none;

    overflow: hidden;

    clip: rect(0 0 0 0);

    clip-path: inset(50%);
}


/* ----------------------------------------------------------
   ICON — left
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesAccessField
.sites-access-option
.sites-access-icon {
    grid-column: 1;
    grid-row: 1;

    align-self: center;
    justify-self: center;

    width: 44px;
    height: 44px;
    min-width: 44px;

    margin: 0;
}


/* ----------------------------------------------------------
   TEXT — middle
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesAccessField
.sites-access-option
.sites-access-text {
    grid-column: 2;
    grid-row: 1;

    align-self: center;

    display: flex;

    flex-direction: column;
    justify-content: center;

    gap: 4px;

    width: 100%;
    min-width: 0;

    margin: 0;

    text-align: left;
}


#sitesForm.is-operational-site
#sitesAccessField
.sites-access-option
.sites-access-text strong {
    display: block;

    width: 100%;

    margin: 0;

    font-size: 14px;
    line-height: 1.25;

    white-space: normal;
}


#sitesForm.is-operational-site
#sitesAccessField
.sites-access-option
.sites-access-text small {
    display: block;

    width: 100%;

    margin: 0;

    font-size: 12.5px;
    line-height: 1.35;

    white-space: normal;
}


/* ----------------------------------------------------------
   VISIBLE RADIO — right
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
#sitesAccessField
.sites-access-option::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 16px;

    box-sizing: border-box;

    width: 22px;
    height: 22px;

    border:
        2px solid #cbd5e1;

    border-radius: 50%;

    background:
        #ffffff;

    transform:
        translateY(-50%);

    transition:
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;

    pointer-events: none;
}


/*
 * Checked state.
 */
#sitesForm.is-operational-site
#sitesAccessField
.sites-access-option:has(
    input[type="radio"]:checked
)::after {
    border-color:
        #15803d;

    background:
        #15803d;

    box-shadow:
        inset 0 0 0 5px #ffffff;
}


/*
 * Keyboard focus.
 */
#sitesForm.is-operational-site
#sitesAccessField
.sites-access-option:has(
    input[type="radio"]:focus-visible
) {
    outline:
        2px solid rgba(37, 99, 235, .35);

    outline-offset:
        2px;
}


/* ----------------------------------------------------------
   NOTES GUIDANCE
   ---------------------------------------------------------- */

#sitesForm.is-operational-site
.sites-notes-field
.sites-notes-guidance {
    color:
        #64748b;

    font-weight:
        500;
}


/* ----------------------------------------------------------
   MOBILE GPS
   Keep label and action vertically centered on same line.
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    #sitesForm.is-operational-site
    #sitesGpsField {
        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

        flex-wrap: nowrap;

        gap: 10px;

        width: 100%;
    }


    #sitesForm.is-operational-site
    #sitesGpsField
    > .sites-field-label {
        flex:
            0 0 auto;

        align-self:
            center;

        margin:
            0;
    }


    #sitesForm.is-operational-site
    #sitesUseLocationButton {
        flex:
            0 0 auto;

        align-self:
            center;

        margin:
            0;

        min-height:
            42px;
    }

}


/* ----------------------------------------------------------
   TABLET / MOBILE ACCESS CARDS
   Same structure:
   icon | text | radio
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    #sitesForm.is-operational-site
    #sitesAccessField
    .sites-access-options {
        grid-template-columns:
            1fr;
    }


    #sitesForm.is-operational-site
    #sitesAccessField
    .sites-access-option {
        height: auto;

        min-height: 88px;
    }

}


@media (max-width: 700px) {

    #sitesForm.is-operational-site
    #sitesAccessField {
        margin-top:
            14px;
    }


    #sitesForm.is-operational-site
    #sitesAccessField > legend {
        margin-bottom:
            12px;
    }


    #sitesForm.is-operational-site
    #sitesAccessField
    .sites-access-options {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    #sitesForm.is-operational-site
    #sitesAccessField
    .sites-access-option {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        column-gap:
            12px;

        min-height:
            86px;

        height:
            auto;

        padding:
            12px
            52px
            12px
            12px;
    }


    #sitesForm.is-operational-site
    #sitesAccessField
    .sites-access-option
    .sites-access-icon {
        width:
            42px;

        height:
            42px;

        min-width:
            42px;
    }


    #sitesForm.is-operational-site
    #sitesAccessField
    .sites-access-option
    .sites-access-text strong {
        font-size:
            13.5px;
    }


    #sitesForm.is-operational-site
    #sitesAccessField
    .sites-access-option
    .sites-access-text small {
        font-size:
            12px;
    }


    #sitesForm.is-operational-site
    #sitesAccessField
    .sites-access-option::after {
        right:
            16px;

        top:
            50%;
    }

}