/* Proyecto Obras — sistema visual industrial. Sin dependencias remotas. */
:root {
    color-scheme: dark;
    --ops-asphalt-975: #080b0d;
    --ops-asphalt-950: #0c0f11;
    --ops-asphalt-900: #111518;
    --ops-asphalt-850: #171c1f;
    --ops-asphalt-800: #1d2327;
    --ops-asphalt-700: #283036;
    --ops-steel-600: #3a444a;
    --ops-steel-500: #59636a;
    --ops-steel-400: #7b858a;
    --ops-concrete-100: #e7e2d6;
    --ops-concrete-200: #d6d0c2;
    --ops-concrete-300: #bdb6a8;
    --ops-paper: #f1ede3;
    --ops-safety: #f2b323;
    --ops-safety-bright: #ffd158;
    --ops-safety-dark: #9b6810;
    --ops-on-safety: #111416;
    --ops-on-warning: #111416;
    --ops-oxide: #b65732;
    --ops-oxide-dark: #74311f;
    --ops-route: #3b82c4;
    --ops-route-bright: #69aee8;
    --ops-route-soft: rgba(59, 130, 196, .18);
    --ops-success: #4f9a66;
    --ops-success-bright: #7bc08e;
    --ops-success-soft: rgba(79, 154, 102, .17);
    --ops-danger: #c55445;
    --ops-danger-bright: #eb8a7e;
    --ops-danger-soft: rgba(197, 84, 69, .17);
    --ops-warning: #d78c28;
    --ops-warning-soft: rgba(215, 140, 40, .17);
    --ops-ink: #15191b;
    --ops-text: #f1ede3;
    --ops-text-soft: #c9c3b7;
    --ops-muted: #969a96;
    --ops-faint: #858b88;
    --ops-line-soft: rgba(214, 208, 194, .11);
    --ops-line: rgba(214, 208, 194, .20);
    --ops-line-strong: rgba(214, 208, 194, .38);
    --ops-line-bright: rgba(255, 255, 255, .52);
    --ops-panel: #171c1f;
    --ops-panel-raised: #1d2327;
    --ops-panel-deep: #101416;
    --ops-panel-elevated: #22292d;
    --ops-paper-panel: #ddd7ca;
    --ops-shadow: 0 24px 70px rgba(0, 0, 0, .56), 0 4px 14px rgba(0, 0, 0, .34);
    --ops-shadow-tight: 0 10px 28px rgba(0, 0, 0, .42), 0 2px 7px rgba(0, 0, 0, .28);
    --ops-shadow-float: 0 32px 96px rgba(0, 0, 0, .64), 0 0 0 1px rgba(0, 0, 0, .26);
    --ops-shadow-hover: 0 16px 38px rgba(0, 0, 0, .46), 0 0 0 1px rgba(242, 179, 35, .10);
    --ops-inset-highlight: inset 0 1px rgba(255, 255, 255, .055);
    --ops-safety-soft: rgba(242, 179, 35, .14);
    --ops-safety-glow: rgba(242, 179, 35, .28);
    --ops-focus-ring: 0 0 0 3px rgba(255, 209, 88, .20), 0 0 22px rgba(242, 179, 35, .18);
    --ops-focus-outline: #ffe08a;
    --ops-overlay: rgba(7, 9, 10, .84);
    --ops-glass: rgba(17, 21, 24, .94);
    --ops-font-display: "Bahnschrift Condensed", "Arial Narrow", "Aptos Narrow", sans-serif;
    --ops-font-body: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    --ops-font-mono: "Cascadia Mono", "Consolas", monospace;
    --ops-type-caption: .75rem;
    --ops-type-body-sm: .8125rem;
    --ops-type-body: .875rem;
    --ops-type-control: .8125rem;
    --ops-cut-sm: 5px;
    --ops-cut-md: 8px;
    --ops-cut-lg: 12px;
    --ops-speed-fast: 130ms;
    --ops-speed: 210ms;
    --ops-speed-slow: 320ms;
    --ops-speed-scene: 420ms;
    --ops-ease: cubic-bezier(.2, .82, .24, 1);
    --ops-ease-out: cubic-bezier(.16, 1, .3, 1);
    --ops-ease-snap: cubic-bezier(.34, 1.36, .64, 1);
    --ops-ease-panel: cubic-bezier(.2, .92, .24, 1);
    --ops-hud-height: 74px;
    --ops-rail-width: 96px;
    --ops-mobile-nav-height: 70px;
}

body.body-map-game {
    width: 100%;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 0, rgba(59, 130, 196, .08), transparent 34rem),
        radial-gradient(circle at 92% 16%, rgba(242, 179, 35, .07), transparent 30rem),
        var(--ops-asphalt-975);
    color: var(--ops-text);
    font-family: var(--ops-font-body);
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

@supports (height: 100dvh) {
    body.body-map-game {
        height: 100dvh;
    }
}

.body-map-game *,
.body-map-game *::before,
.body-map-game *::after {
    box-sizing: border-box;
}

.body-map-game button,
.body-map-game input,
.body-map-game select,
.body-map-game textarea {
    font: inherit;
    color-scheme: dark;
}

.body-map-game button,
.body-map-game summary,
.body-map-game [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

.body-map-game button:focus-visible,
.body-map-game input:focus-visible,
.body-map-game select:focus-visible,
.body-map-game textarea:focus-visible,
.body-map-game summary:focus-visible,
.body-map-game [tabindex]:focus-visible {
    outline: 3px solid var(--ops-focus-outline);
    outline-offset: 3px;
    box-shadow: var(--ops-focus-ring);
}

.body-map-game :is(input, textarea)::placeholder {
    color: var(--ops-faint);
    opacity: 1;
}

.body-map-game ::selection {
    background: var(--ops-safety);
    color: var(--ops-ink);
}

.body-map-game ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.body-map-game ::-webkit-scrollbar-track {
    background: var(--ops-asphalt-950);
}

.body-map-game ::-webkit-scrollbar-thumb {
    border: 1px solid var(--ops-asphalt-950);
    background: var(--ops-steel-600);
}

.body-map-game ::-webkit-scrollbar-thumb:hover {
    background: var(--ops-safety-dark);
}

.body-map-game h1,
.body-map-game h2,
.body-map-game h3,
.body-map-game strong,
.body-map-game b {
    font-family: var(--ops-font-display);
    font-stretch: condensed;
    letter-spacing: .015em;
}

.body-map-game :is(h1, h2, h3) {
    text-wrap: balance;
}

.body-map-game h1,
.body-map-game h2,
.body-map-game h3,
.body-map-game p {
    margin-top: 0;
}

.body-map-game [hidden] {
    display: none !important;
}

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

@media (forced-colors: active) {
    .body-map-game button:focus-visible,
    .body-map-game input:focus-visible,
    .body-map-game select:focus-visible,
    .body-map-game textarea:focus-visible,
    .body-map-game summary:focus-visible,
    .body-map-game [tabindex]:focus-visible {
        outline: 3px solid Highlight !important;
        box-shadow: none !important;
    }
}