/* As mesmas formas e cores são usadas no editor e nas duas visualizações. */
.pf-plan {
    --plan-floor: #f7f9fc;
    --plan-grid: #dbe1e7;
    --plan-ink: #263238;
    --plan-muted: #5f6b76;
    --plan-surface: #f7f9fc;
    --plan-line: #dfe5eb;
    --plan-blue: #1a73e8;
    --plan-blue-soft: #e8f0fe;
    --plan-free: #188038;
    --plan-free-ink: #12672d;
    --plan-free-soft: #e6f4ea;
    --plan-occupied: #c5221f;
    --plan-occupied-ink: #aa201d;
    --plan-occupied-soft: #fce8e6;
    --plan-circulation: #edf0f3;
    --plan-circulation-edge: #b8c6d5;
    --plan-circulation-label: #e8eef5;
    --plan-road: #627084;
    --plan-road-edge: #8796aa;
    --plan-road-label: #526074;
    --plan-road-curb-width: 2px;
    --plan-circulation-curb-width: 1.5px;
    --plan-edge-highlight: rgba(255,255,255,.22);
    --plan-grain-light: rgba(255,255,255,.055);
    --plan-grain-dark: rgba(0,0,0,.025);
    width: 100%;
    min-width: 0;
    container: parking-plan / inline-size;
    font-family: inherit;
    color: var(--plan-ink);
}
.pf-plan *, .pf-plan *::before, .pf-plan *::after { box-sizing: border-box; }
.pf-plan__canvas { display: flex; justify-content: center; }
.pf-plan__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 8px;
    margin-inline: auto;
    min-width: min(100%, 326px);
    max-width: 100%;
}
.pf-plan__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
    flex-shrink: 0;
}
.pf-plan__zoom {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--plan-surface);
    box-shadow: inset 0 0 0 1px var(--plan-line);
    pointer-events: auto;
}
.pf-plan__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--plan-line);
    border-radius: 8px;
    background: var(--plan-surface);
    color: var(--plan-ink);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    pointer-events: auto;
}
.pf-plan__tool:hover { background: var(--plan-blue-soft); border-color: var(--plan-blue); }
.pf-plan__zoom .pf-plan__tool { border: 0; border-radius: 0; background: transparent; }
.pf-plan__zoom .pf-plan__tool:hover { background: var(--plan-blue-soft); }
.pf-plan__zoom .pf-plan__tool:focus-visible { outline-offset: -3px; }
.pf-plan__tool--fit svg { width: 18px; height: 18px; }
.pf-plan__scale { min-width: 32px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--plan-muted); }
@media (any-pointer: coarse) {
    .pf-plan__tool { min-width: 44px; height: 44px; }
}
.pf-plan__viewport {
    position: relative;
    width: 100%;
    height: var(--pf-plan-height, clamp(200px, 48vh, 480px));
    min-height: 120px;
    padding: 12px;
    overflow: auto;
    border: 1px solid var(--plan-line);
    border-radius: 12px;
    background: var(--plan-surface);
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--plan-grid) transparent;
}
.pf-plan--compact .pf-plan__viewport { height: var(--pf-plan-height, 240px); }
.pf-plan:not(.pf-plan--editable) .pf-plan__viewport {
    height: auto;
    max-height: var(--pf-plan-height, clamp(200px, 48vh, 480px));
    min-width: 0;
}
.pf-plan--compact:not(.pf-plan--editable) .pf-plan__viewport { max-height: var(--pf-plan-height, 240px); }
.pf-plan__world { position: relative; margin-inline: auto; flex-shrink: 0; }
.pf-plan__drawing { display: block; overflow: visible; }
.pf-plan__floor { fill: var(--plan-floor); }
.pf-plan__element rect { shape-rendering: crispEdges; }
.pf-plan__element--circulacao rect { fill: var(--plan-circulation); }
.pf-plan__element--rua rect { fill: var(--plan-road); }
.pf-plan__grain-light { fill: var(--plan-grain-light); }
.pf-plan__grain-dark { fill: var(--plan-grain-dark); }
.pf-plan__texture { pointer-events: none; }
.pf-plan__curb { fill: none; stroke-linejoin: round; }
.pf-plan__curb--rua { stroke: var(--plan-road-edge); stroke-width: var(--plan-road-curb-width); }
.pf-plan__curb--circulacao { stroke: var(--plan-circulation-edge); stroke-width: var(--plan-circulation-curb-width); }
.pf-plan__boundary { stroke-width: 1; stroke: var(--plan-edge-highlight); stroke-linejoin: round; fill: none; }
.pf-plan__perimeter { fill: none; stroke: var(--plan-circulation-edge); stroke-width: 2.5; stroke-linejoin: round; pointer-events: none; }
.pf-plan__road-line { stroke: #f6f2df; stroke-width: 2.5; stroke-dasharray: 14 10; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pf-plan__caption rect { fill: var(--plan-circulation-label); }
.pf-plan__caption text { fill: var(--plan-ink); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .015em; }
.pf-plan__caption--rua rect { fill: var(--plan-road-label); }
.pf-plan__caption--rua text { fill: #fff; }
.pf-plan__slot--free { color: var(--plan-free); }
.pf-plan__slot--occupied { color: var(--plan-occupied); }
.pf-plan__slot-floor { fill: var(--plan-circulation); shape-rendering: crispEdges; }
.pf-plan__slot--free .pf-plan__slot-fill { fill: var(--plan-free-soft); }
.pf-plan__slot--occupied .pf-plan__slot-fill { fill: var(--plan-occupied-soft); }
.pf-plan__slot-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: square; }
.pf-plan__slot-number { fill: currentColor; font-family: inherit; font-size: 14px; font-weight: 700; }
.pf-plan__slot-status { fill: currentColor; font-family: inherit; font-size: 10px; font-weight: 500; }
.pf-plan__slot--free .pf-plan__slot-number, .pf-plan__slot--free .pf-plan__slot-status { fill: var(--plan-free-ink); }
.pf-plan__slot--occupied .pf-plan__slot-number, .pf-plan__slot--occupied .pf-plan__slot-status { fill: var(--plan-occupied-ink); }
.pf-plan__editor-grid { stroke: var(--plan-grid); stroke-width: .6; fill: none; pointer-events: none; }
.pf-plan__targets { position: absolute; inset: 0; pointer-events: none; }
.pf-plan__cell {
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    touch-action: pan-x pan-y;
    pointer-events: auto;
}
.pf-plan__cell:hover { box-shadow: inset 0 0 0 2px var(--plan-blue); }
.pf-plan__cell.is-selected { background: rgba(26, 115, 232, .1); box-shadow: inset 0 0 0 3px var(--plan-blue); }
.pf-plan__cell.is-dragging { opacity: .45; background: var(--plan-blue-soft); }
.pf-plan__cell:focus-visible { outline: 3px solid var(--plan-blue); outline-offset: -3px; }
.pf-plan__tool:focus-visible, .pf-plan__viewport:focus-visible { outline: 2px solid var(--plan-blue); outline-offset: 2px; }
.pf-plan__legend { display: flex; gap: 8px; min-width: 0; }
.pf-plan__legend-item { display: inline-flex; align-items: center; gap: 4px; color: var(--plan-muted); font-size: 11px; line-height: 1.5; white-space: nowrap; }
.pf-plan__legend-marker { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; border: 1px solid var(--plan-line); }
@container parking-plan (max-width: 330px) {
    .pf-plan__scale { position: absolute; width: 1px; height: 1px; min-width: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .pf-plan__legend { gap: 6px; }
    .pf-plan__legend-item { gap: 3px; font-size: 10px; }
    .pf-plan__legend-marker { width: 8px; height: 8px; }
}
.pf-plan__legend-marker--slot { background: linear-gradient(90deg, var(--plan-free) 50%, var(--plan-occupied) 50%); border-color: transparent; }
.pf-plan__legend-marker--circulacao { background: var(--plan-circulation); }
.pf-plan__legend-marker--rua { background: var(--plan-road); }
.pf-plan__empty { margin: 0; padding: 24px 16px; color: var(--plan-muted); font-size: 13px; text-align: center; }
@media (prefers-color-scheme: dark) {
    .pf-plan {
        --plan-floor: #192637;
        --plan-grid: #3c4b60;
        --plan-ink: #edf2fa;
        --plan-muted: #b2bfd2;
        --plan-surface: #1b2638;
        --plan-line: #3c4b63;
        --plan-blue: #8ab4ff;
        --plan-blue-soft: #243d63;
        --plan-free: #81c995;
        --plan-free-ink: #a3e5b4;
        --plan-free-soft: #193c2b;
        --plan-occupied: #f6aea9;
        --plan-occupied-ink: #ffc7c2;
        --plan-occupied-soft: #4b282a;
        --plan-circulation: #303d4b;
        --plan-circulation-edge: #788696;
        --plan-circulation-label: #414e60;
        --plan-road: #343b46;
        --plan-road-edge: #758292;
        --plan-road-label: #28313e;
        --plan-road-curb-width: 5px;
        --plan-circulation-curb-width: 3px;
        --plan-edge-highlight: rgba(255,255,255,.48);
        --plan-grain-light: rgba(255,255,255,.12);
        --plan-grain-dark: rgba(0,0,0,.13);
    }
}