/* espazo/calculator — prototype: Shared › Calculator (white card + dark panel) and modular image (CALCULADOR.md).
   Colours and fonts through --ecalc-* variables, with the theme's (WordPress presets) and, failing those, the
   prototype's: on another site it is enough to redefine the variables. */
.espazo-calc {
	--ecalc-navy: var(--wp--preset--color--navy, #0D111E);
	--ecalc-green: var(--wp--preset--color--green-500, #9BCA3C);
	--ecalc-green-400: var(--wp--preset--color--green-400, #A3D04A);
	--ecalc-green-600: var(--wp--preset--color--green-600, #87B432);
	--ecalc-green-700: var(--wp--preset--color--green-700, #4A7A1E);
	--ecalc-mint: var(--wp--preset--color--mint, #D9EED0);
	--ecalc-n25: var(--wp--preset--color--neutral-25, #F7FAFC);
	--ecalc-n100: var(--wp--preset--color--neutral-100, #E1E9F2);
	--ecalc-n300: var(--wp--preset--color--neutral-300, #9EB1CB);
	--ecalc-n400: var(--wp--preset--color--neutral-400, #7D91B5);
	--ecalc-border: var(--espazo-border, #BFD0E0);
	--ecalc-border-subtle: var(--espazo-border-subtle, #E1E9F2);
	--ecalc-text-3: var(--espazo-text-3, #56637A);
	--ecalc-mono: var(--wp--preset--font-family--mono, "JetBrains Mono", "SF Mono", Menlo, monospace);
	--ecalc-display: var(--wp--preset--font-family--display, "Barlow Condensed", "Helvetica Neue", sans-serif);
	--ecalc-radius: var(--espazo-frame, 10px);
	--ecalc-radius-md: var(--wp--custom--radius--md, 6px);
	--ecalc-ease: 360ms cubic-bezier(0.2, 0, 0.2, 1);
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid var(--ecalc-border); border-radius: var(--ecalc-radius);
}
@media (max-width: 860px) { .espazo-calc { grid-template-columns: 1fr; } }
.espazo-calc p { margin: 0; }
.espazo-calc__choice { padding: 40px; }
/* D40 (fidelity audit, 27 Sep 2026): .06em and ~44px height, as in the prototype (Shared.jsx). */
.espazo-calc__tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ecalc-border); }
@media not (scripting: enabled) { .espazo-calc__tabs { display: none; } }
.espazo-calc__tab { margin-bottom: -1px; padding: 14px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--ecalc-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; color: var(--ecalc-text-3); }
.espazo-calc__tab[aria-selected="true"] { border-bottom-color: var(--ecalc-green); color: var(--ecalc-navy); font-weight: 600; }
.espazo-calc__tab:hover { color: var(--ecalc-navy); }
/* Before hydration, with JS, only the initial tab; without JS, all listed.
   G9/E15 (27 Sep 2026): no marker of our own in JS — the `scripting` media feature already tells the two cases
   apart, without a hand-written <script> in render.php. */
@media (scripting: enabled) {
	.espazo-calc__panel-title { display: none; }
}
.espazo-calc__panel[hidden] { display: none; }
/* F17 (audit 30/09; CALCULADOR.md §7.4: «the card does not change height when switching tab or row»): with JS, the
   panels of all tabs share one grid cell below the tabs, and the ones not shown are only invisible (still laid out),
   so the column is as tall as the tallest tab, measured by the browser itself — no fixed number, no script. Before
   hydration too, so the card does not grow when the script arrives. Invisible = out of the accessibility tree, the
   tab order and the pointer, like [hidden]. Without JS the panels stay listed one after another. */
@media (scripting: enabled) {
	.espazo-calc__choice { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
	.espazo-calc__choice > .espazo-calc__tabs { grid-row: 1; }
	.espazo-calc__choice > .espazo-calc__panel { grid-row: 2; grid-column: 1; align-self: start; }
	.espazo-calc__choice > .espazo-calc__panel[hidden],
	.espazo-calc:not(.is-ready) .espazo-calc__choice > .espazo-calc__panel:not(.is-initial) { display: block; visibility: hidden; }
	/* visibility is inherited but a descendant can set it back: the tab image states (.ec-state.is-active) do, so they
	   are hidden here too (review 30/09; otherwise the drawing of a hidden tab shows over the active one). */
	.espazo-calc__choice > .espazo-calc__panel[hidden] .ec-state,
	.espazo-calc:not(.is-ready) .espazo-calc__choice > .espazo-calc__panel:not(.is-initial) .ec-state { visibility: hidden; }
}
.espazo-calc__panel-title { margin-top: 32px !important; font-family: var(--ecalc-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ecalc-navy); }
.espazo-calc__panel:first-of-type .espazo-calc__panel-title { margin-top: 0 !important; }
.espazo-calc__panel:focus { outline: none; }
/* Item 7/P1 (mock-up): visible focus ring on the tabs and rows (keyboard). */
.espazo-calc__tab:focus-visible, .espazo-calc__row:focus-visible { outline: 2px solid var(--ecalc-green-700); outline-offset: -2px; }
.espazo-calc__row:focus-visible { background: var(--ecalc-n25); }
.espazo-calc__row[aria-pressed="true"]:focus-visible { background: var(--ecalc-mint); }
.espazo-calc__col { margin-top: 24px !important; font-family: var(--ecalc-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ecalc-text-3); }
.espazo-calc__rows { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--ecalc-border-subtle); }
.espazo-calc__rows li { margin: 0; }
.espazo-calc__row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--ecalc-border-subtle); border-left: 2px solid transparent; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ecalc-navy); text-align: left; }
.espazo-calc__row:hover { background: var(--ecalc-n25); }
.espazo-calc__row[aria-pressed="true"] { background: var(--ecalc-mint); border-left-color: var(--ecalc-green); font-weight: 600; }
.espazo-calc__m2 { font-family: var(--ecalc-mono); font-size: 13px; color: var(--ecalc-text-3); white-space: nowrap; }
.espazo-calc__row[aria-pressed="true"] .espazo-calc__m2 { color: #3F6A19; } /* green-700 darkened: 5.2:1 on the mint background (green-700 gave 4.17:1; WCAG 1.4.3, full audit 29/09, B1-05) */

/* ——— Image area: fixed height per option (the card does not jump when changing tab or row) ——— */
.ec-figure { margin-top: 28px; }
.ec-figure svg { display: block; overflow: visible; }
.ec-figure text { font-family: var(--ecalc-mono); }

/* A · Diagram per row: one drawing per row, stacked; the active one fades in over 360 ms */
.ec-figure--diagram { padding: 20px 16px 12px; background: var(--ecalc-n25); border: 1px solid var(--ecalc-border-subtle); border-radius: var(--ecalc-radius-md); }
.ec-states { display: grid; max-width: 360px; margin: 0 auto; }
.ec-state { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--ecalc-ease), visibility 0s linear 360ms; }
.ec-state.is-active { opacity: 1; visibility: visible; transition: opacity var(--ecalc-ease), visibility 0s; }
.ec-diagram { width: 100%; height: auto; aspect-ratio: 360 / 132; }
.ec-d-outline { fill: #fff; stroke: var(--ecalc-green-600); stroke-width: 2; }
.ec-d-rooms rect, .ec-d-load, .ec-d-full { fill: var(--ecalc-mint); stroke: var(--ecalc-green-600); stroke-width: 1; }
.ec-d-load { stroke-width: 1.5; }
.ec-d-stroke { fill: none; stroke: var(--ecalc-n400); }
.ec-d-door { stroke: #fff; stroke-width: 3; }
.ec-d-cab, .ec-d-wheel { fill: #fff; stroke: var(--ecalc-n400); stroke-width: 1.5; stroke-linejoin: round; }
.ec-d-floor { stroke: var(--ecalc-border); }
.ec-d-dimension { stroke: var(--ecalc-n400); }
.ec-d-empty { fill: none; stroke: var(--ecalc-border); stroke-width: 1; }
.ec-d-caption { font-size: 10px; font-weight: 500; letter-spacing: .08em; fill: var(--ecalc-text-3); }

/* B · Plate with pictogram */
.ec-plate { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.ec-plate__sign { flex: none; width: 76px; height: 76px; display: grid; place-items: center; background: var(--ecalc-navy); border-radius: var(--ecalc-radius-md); }
.ec-picto { fill: none; stroke: var(--ecalc-green-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ec-picto .ec-b-wheel { fill: var(--ecalc-navy); }
.ec-plate__range { font-family: var(--ecalc-display); font-size: 28px !important; font-weight: 700; line-height: 1 !important; text-transform: uppercase; color: var(--ecalc-navy); }
.ec-plate__refs { margin-top: 8px !important; font-family: var(--ecalc-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ecalc-text-3); }

/* C · Box ruler: SVG scale; the band and the value slide to the selected range */
.ec-ruler { position: relative; max-width: 420px; container-type: inline-size; }
.ec-ruler svg { width: 100%; height: auto; aspect-ratio: 360 / 80; }
.ec-r-other { fill: var(--ecalc-n100); }
.ec-r-band { position: absolute; top: 32.5%; height: 25%; min-width: 4px; background: var(--ecalc-green); transition: left var(--ecalc-ease), width var(--ecalc-ease); }
.ec-r-value { position: absolute; text-transform: uppercase; top: 3%; transform: translateX(-50%); font-family: var(--ecalc-mono); font-size: 3.06cqw; font-weight: 600; letter-spacing: .06em; line-height: 1.2; white-space: nowrap; color: var(--ecalc-green-700); transition: left var(--ecalc-ease); }
.ec-r-axis { stroke: var(--ecalc-n400); stroke-width: 1.5; }
.ec-r-mark { font-size: 9px; font-weight: 500; fill: var(--ecalc-text-3); }
.ec-r-caption { font-size: 9px; font-weight: 500; letter-spacing: .08em; fill: var(--ecalc-text-3); }

/* D · Photograph / E · Illustration: one per tab, with a fade on change */
.ec-figure--photo, .ec-figure--illustration { position: relative; height: 220px; overflow: hidden; border-radius: var(--ecalc-radius-md); background: var(--ecalc-n100); }
.ec-figure--illustration { background: #EEF3F9; border: 1px solid var(--ecalc-border-subtle); }
.ec-image__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: ecalc-fade var(--ecalc-ease); }
.ec-figure--illustration .ec-image__img { object-position: center 55%; }
/* Item 2 (27 Sep 2026): note only while the image is the package one (AI-generated), without a photograph of our own in the library — espazo_calc_image_is_placeholder(). */
.ec-image__note { margin: 8px 0 0; font-family: var(--ecalc-mono); font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--ecalc-text-3); }
@keyframes ecalc-fade { from { opacity: 0; } to { opacity: 1; } }

/* ——— K2 · what you have → the space you need (4.5; CALCULADOR.md §0; inc/k2.php) ———
   Image area of 208 px in every tab: the drawing of each row fits its height (as `.k2fig>svg{height:100%}`). */
.ec-figure--k2 { height: 208px; box-sizing: border-box; padding: 18px 16px 14px; background: var(--ecalc-n25); border: 1px solid var(--ecalc-border-subtle); border-radius: var(--ecalc-radius-md); }
.ec-figure--k2 .ec-states { height: 100%; max-width: none; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.ec-figure--k2 .ec-k-svg { width: 100%; max-width: 360px; height: 100%; margin: 0 auto; } /* As in the prototype: at most 360 px wide (1:1), centred in the height. */
.ec-figure--k2 .ec-k-svg--fill { max-width: none; }
.ec-k-outline { fill: #fff; stroke: var(--ecalc-green-600); stroke-width: 2; }
.ec-k-room { fill: #fff; stroke: var(--ecalc-green-600); stroke-width: 1; }
.ec-k-room--bedroom { fill: var(--ecalc-mint); }
.ec-k-label { font-size: 7.5px; font-weight: 500; letter-spacing: .04em; fill: var(--ecalc-text-3); }
.ec-k-fixture, .ec-k-arrow { fill: none; stroke: var(--ecalc-n400); }
.ec-k-gap { stroke: #fff; stroke-width: 2.5; }
.ec-k-entrance { stroke: #fff; stroke-width: 3; }
.ec-k-caption { font-size: 10px; font-weight: 500; letter-spacing: .08em; fill: var(--ecalc-text-3); }
.ec-k-floor { stroke: var(--ecalc-border); }
.ec-k-dim { stroke: var(--ecalc-n400); }
/* Vehicle: drawn in metres and scaled; the strokes keep their width. Without stroke-width here where the element has its own. */
.ec-k-veh * { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ec-k-v-line { fill: none; stroke: var(--ecalc-n400); }
.ec-k-v-plain { fill: #fff; stroke: var(--ecalc-n400); }
.ec-k-v-tyre { stroke-width: 1.2; }
.ec-k-v-body { fill: #fff; stroke: var(--ecalc-n400); stroke-width: 1.2; }
.ec-k-v-cargo { fill: var(--ecalc-mint); stroke: var(--ecalc-green-600); stroke-width: 1.5; }
.ec-k-v-fill { fill: var(--ecalc-mint); }
.ec-k-v-cargo-edge { fill: none; stroke: var(--ecalc-green-600); stroke-width: 3; }
.ec-k-v-cargo-line { stroke: var(--ecalc-green-600); stroke-width: 1.5; }
.ec-k-v-glass { fill: #fff; stroke: var(--ecalc-n400); }
.ec-k-v-detail { fill: none; stroke: var(--ecalc-n300); }
.ec-k-v-lamp { fill: var(--ecalc-n300); }
/* Archive boxes in piles, beside a person; the boxes of the chosen row appear one after the other. */
.ec-k-person { fill: var(--ecalc-n400); }
.ec-k-ghost { fill: #fff; stroke: var(--ecalc-n300); stroke-dasharray: 2 2; }
.ec-k-box { fill: #fff; stroke: var(--ecalc-green-600); stroke-width: 1; }
.ec-k-box-label { fill: var(--ecalc-n300); }
.ec-state.is-active .ec-k-cell { animation: ecalc-fade 300ms both; animation-delay: var(--ecalc-d, 0ms); }
/* Dark panel: «≈ reference» in one line, «For <row>», plan with the reference room, front beside a person. */
.espazo-calc .espazo-calc__ref { min-height: 1.1em; margin-top: 16px !important; font-family: var(--ecalc-display); font-size: clamp(18px, 2.1vw, 26px); font-weight: 600; line-height: 1.1; text-transform: uppercase; white-space: nowrap; color: #fff; }
.espazo-calc .espazo-calc__for { margin-top: 8px !important; font-family: var(--ecalc-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: rgba(255,255,255,.72); }
.espazo-calc--figure-k2 .espazo-calc__plans { margin-top: 20px; }
.espazo-calc--figure-k2 .espazo-calc__plan:not([hidden]) { animation: ecalc-fade var(--ecalc-ease); }
.ec-k-p-dimension { font-family: var(--ecalc-mono); font-size: 15px; font-weight: 600; letter-spacing: .06em; fill: var(--ecalc-green-400); }
.ec-k-p-ref { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ec-k-p-scale { stroke: rgba(255,255,255,.72); stroke-width: 1.5; }
.ec-k-p-ref-key { stroke: rgba(255,255,255,.72); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ec-k-p-legend { font-family: var(--ecalc-mono); font-size: 14px; font-weight: 500; letter-spacing: .04em; fill: rgba(255,255,255,.72); }
.ec-k-p-legend--ref { fill: rgba(255,255,255,.8); }
.ec-k-elev { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: 20px; }
.ec-k-front { flex: none; display: block; overflow: visible; }
.ec-k-f-ground { stroke: rgba(255,255,255,.3); }
.ec-k-f-person { fill: #fff; opacity: .85; }
.ec-k-f-box { fill: rgba(155,202,60,.12); stroke: var(--ecalc-green); stroke-width: 1.5; }
.ec-k-f-door { fill: var(--ecalc-green); }
.ec-k-f-split { stroke: var(--ecalc-navy); }
.espazo-calc .ec-k-elev__text { font-family: var(--ecalc-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; line-height: 1.6; text-transform: uppercase; color: rgba(255,255,255,.72); }
.ec-k-elev__text span { display: block; }
.ec-k-elev__text .ec-k-elev__person { color: rgba(255,255,255,.6); }
.espazo-calc.has-plan.espazo-calc--figure-k2 .espazo-calc__result .espazo-calc__note { margin-top: 16px !important; }
.espazo-calc--figure-k2 .espazo-calc__result .wp-block-buttons { margin-top: 24px; }

/* ——— Painel escuro ——— */
/* The <p> rules are prefixed with .espazo-calc: «:root :where(p)» of the Global styles has the same specificity (0,1,0) and loads later. */
.espazo-calc__result { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 40px; overflow: hidden; background: var(--ecalc-navy); color: #fff;
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; }
.espazo-calc__label { font-family: var(--ecalc-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ecalc-green-400); }
.espazo-calc .espazo-calc__value { margin-top: 16px !important; font-size: clamp(56px, 8vw, 96px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.espazo-calc__unit { margin-left: 8px; font-size: .4em; font-weight: 500; color: rgba(255,255,255,.72); }
.espazo-calc .espazo-calc__name { margin-top: 16px !important; font-family: var(--ecalc-display); font-size: 26px; font-weight: 600; line-height: 1.55; text-transform: uppercase; color: rgba(255,255,255,.85); }
.espazo-calc__plans { margin-top: 28px; }
.espazo-calc__plan[hidden] { display: none; }
.ec-plan { display: block; width: 100%; max-width: 480px; height: auto; }
.ec-p-box { fill: rgba(155,202,60,.12); stroke: var(--ecalc-green); stroke-width: 1.5; }
.ec-p-grid { stroke: rgba(255,255,255,.14); stroke-width: 1; }
.ec-p-door { stroke: #fff; stroke-width: 4; }
.ec-p-person { fill: #fff; opacity: .85; }
.ec-p-dimension { font-family: var(--ecalc-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; fill: var(--ecalc-green-400); }
.ec-p-car { fill: none; stroke: rgba(255,255,255,.45); stroke-dasharray: 4 4; }
.ec-p-caption { font-family: var(--ecalc-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; fill: rgba(255,255,255,.72); }
.ec-p-scale { stroke: rgba(255,255,255,.72); stroke-width: 1.5; }
.espazo-calc .espazo-calc__note { margin-top: 32px !important; max-width: 380px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.72); }
.espazo-calc.has-plan .espazo-calc__result .espazo-calc__note { margin-top: 20px !important; }
.espazo-calc__result .wp-block-buttons { margin-top: 32px; }
@media (max-width: 600px) { .espazo-calc__choice, .espazo-calc__result { padding: 28px 24px; } }

@media (prefers-reduced-motion: reduce) {
	.ec-state, .ec-state.is-active, .ec-r-band, .ec-r-value { transition: none; }
	.ec-image__img, .ec-state.is-active .ec-k-cell, .espazo-calc--figure-k2 .espazo-calc__plan:not([hidden]) { animation: none; }
}