/* GÊMEO DIGITAL (HouseTwin) — render compartilhado Studio/Home.
   Cores via variáveis com fallback pra funcionar nos dois temas. */

.twin {
    --twin-color: #f5b34a;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* barra acima do twin no Home (abas de planta + toggle de simulação) */
.planta-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }

/* ── Diálogo DK9 (substitui window.confirm/alert nativo) ── */
.dk9confirm-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.dk9confirm {
    width: min(420px, 92vw);
    background: #1f1f25; color: #f3f3f5;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .8rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    padding: 1.1rem 1.2rem;
}
.dk9confirm__title { margin: 0 0 .5rem; font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; color: #ffd479; }
.dk9confirm__msg { margin: 0 0 1.1rem; line-height: 1.45; white-space: pre-wrap; }
.dk9confirm__actions { display: flex; justify-content: flex-end; gap: .5rem; }

.twin-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.twin-zoom { display: inline-flex; gap: .25rem; }

.twin-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid rgba(128, 128, 128, .35);
    background: rgba(128, 128, 128, .12);
    color: inherit;
    border-radius: .5rem;
    padding: .3rem .55rem;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
}
.twin-btn:hover { background: rgba(128, 128, 128, .22); }
.twin-btn--icon { padding: .3rem .4rem; }
.twin-btn--ghost { background: transparent; }

.twin-simchip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(122, 90, 248, .18);
    color: #b9a6ff;
    border: 1px solid rgba(122, 90, 248, .4);
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .8rem;
    font-weight: 600;
}

/* ── palco ── */
.twin-viewport {
    position: relative;
    overflow: auto;
    border-radius: .75rem;
    background: rgba(0, 0, 0, .15);
    max-height: 84vh;
}
/* a imagem ocupa a largura disponível e não estoura a altura útil (evita rolagem à toa) */
.twin-stage { max-width: 100%; }
.twin-stage { position: relative; display: inline-block; line-height: 0; }
.twin-img { display: block; max-width: 100%; height: auto; user-select: none; }

/* ── áreas (SVG sobre a imagem) ── */
.twin-areas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;        /* só os polígonos capturam clique */
}
.twin-area {
    --twin-area-color: #f5b34a;
    pointer-events: auto;
    cursor: pointer;
    fill: var(--twin-area-color);
    fill-opacity: .08;
    stroke: var(--twin-area-color);
    stroke-width: .3;
    stroke-opacity: .55;
    transition: fill-opacity .25s ease, stroke-opacity .25s ease;
}
.twin-area:hover { fill-opacity: .2; }

/* LÂMPADA — acende com brilho quente */
.twin-area--lamp.is-on {
    fill-opacity: .5;
    stroke-opacity: 1;
    filter: drop-shadow(0 0 6px var(--twin-area-color));
    animation: twinGlow 2.4s ease-in-out infinite;
}
/* JANELA — "abre": esvazia o vidro e anima o contorno tracejado */
.twin-area--window {
    --twin-area-color: #6ad1ff;
    fill-opacity: .35;           /* fechada = vidro preenchido */
}
.twin-area--window.is-on {
    fill-opacity: .06;           /* aberta = vazia */
    stroke-dasharray: 2 1.5;
    animation: twinDash 1s linear infinite;
}
/* MOTOR — vibra quando ligado */
.twin-area--motor { --twin-area-color: #9aa7b4; }
.twin-area--motor.is-on {
    fill-opacity: .4;
    transform-box: fill-box;
    transform-origin: center;
    animation: twinShake .25s linear infinite;
}
/* BOILER/RESISTÊNCIA — aquece (pulso vermelho) */
.twin-area--heater { --twin-area-color: #ff7043; }
.twin-area--heater.is-on {
    fill-opacity: .5;
    filter: drop-shadow(0 0 5px var(--twin-area-color));
    animation: twinHeat 1.6s ease-in-out infinite;
}
.twin-area--generic.is-on { fill-opacity: .45; stroke-opacity: 1; }

@keyframes twinGlow { 0%,100% { fill-opacity: .35; } 50% { fill-opacity: .6; } }
@keyframes twinHeat { 0%,100% { fill-opacity: .35; } 50% { fill-opacity: .6; } }
@keyframes twinDash { to { stroke-dashoffset: -7; } }
@keyframes twinShake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(.25%, -.25%); } 75% { transform: translate(-.25%, .25%); } }

/* ── marcadores ── */
.twin-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid var(--twin-color);
    background: rgba(20, 20, 20, .55);
    color: var(--twin-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: box-shadow .2s ease, background .2s ease, transform .1s ease;
}
.twin-marker:hover { transform: translate(-50%, -50%) scale(1.12); }
.twin-marker.is-on {
    background: var(--twin-color);
    box-shadow: 0 0 12px 2px var(--twin-color);
}
.twin-marker--group { border-style: dashed; }
.twin-marker--plate {
    border-radius: .35rem;       /* QUADRADINHO = espelho */
    --twin-color: #c8b6ff;
    font-size: .9rem;
}
.twin-marker--plate.is-on { color: #1a1626; }
.twin-marker__label {
    position: absolute;
    top: 115%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: .68rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    padding: .05rem .3rem;
    border-radius: .25rem;
    pointer-events: none;
}

/* ── painel flutuante do espelho (não-modal, semi-transparente, docável) ── */
.twin-panel {
    /* ABSOLUTE relativo ao container do mapa (.twin) — flutua SOBRE a imagem, não preso à
       tela. Como fica fora do .twin-viewport (que rola), não desliza ao dar scroll/zoom. */
    position: absolute;
    z-index: 50;
    width: min(300px, 80%);
    background: rgba(24, 24, 28, .9);
    color: #f3f3f5;
    border: 1px solid rgba(200, 182, 255, .35);
    border-radius: .8rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    backdrop-filter: blur(6px);
    opacity: .45;                /* discreto pra não cobrir o resultado */
    transition: opacity .2s ease;
}
.twin-panel:hover, .twin-panel:focus-within { opacity: 1; }
/* posição inicial: canto INFERIOR direito, dentro da imagem (depois arrasta livre pelo título) */
.twin-panel { bottom: .75rem; right: .75rem; max-height: calc(100% - 1.5rem); overflow-y: auto; }

.twin-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .65rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.twin-panel__title { font-weight: 600; font-size: .9rem; display: inline-flex; gap: .4rem; align-items: center; }
.twin-panel__tools { display: inline-flex; gap: .25rem; }
.twin-panel__msg {
    margin: .5rem .65rem 0;
    padding: .4rem .55rem;
    background: rgba(255, 193, 7, .15);
    border: 1px solid rgba(255, 193, 7, .4);
    border-radius: .4rem;
    font-size: .78rem;
}

.twin-plate {
    display: grid;
    grid-template-columns: repeat(var(--twin-cols, 1), 1fr);
    gap: .5rem;
    padding: .65rem;
}
.twin-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .05);
    color: inherit;
    border-radius: .55rem;
    padding: .5rem .35rem;
    cursor: pointer;
    min-height: 4.2rem;
    transition: background .15s ease, box-shadow .15s ease;
}
.twin-key:hover { background: rgba(255, 255, 255, .1); }
.twin-key.is-on {
    background: rgba(245, 179, 74, .22);
    box-shadow: inset 0 0 0 1px #f5b34a, 0 0 10px rgba(245, 179, 74, .35);
}
.twin-key__rocker { font-size: 1.4rem; line-height: 1; }
.twin-key.is-on .twin-key__rocker { color: #f5b34a; }
.twin-key__code { font-size: .72rem; font-weight: 700; opacity: .85; font-family: ui-monospace, monospace; }
.twin-key__desc { font-size: .68rem; opacity: .75; line-height: 1.1; }
.twin-key--empty { border-style: dashed; opacity: .25; cursor: default; min-height: 4.2rem; }
.twin-key--nosim { opacity: .6; }
.twin-key__nosim { position: absolute; }