*{
    box-sizing:border-box;
    user-select:none;
}

html,body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Arial,Helvetica,sans-serif;
    background:#101318;
    color:#eee;
}

button{
    font-family:inherit;
}

#app{
    width:100%;
    height:100vh;
    display:grid;
    grid-template-columns:245px 1fr 285px;
    grid-template-rows:62px 1fr 42px;
}

/* =========================================================
   HEADER
========================================================= */

header{
    grid-column:1 / 4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    background:linear-gradient(180deg,#20252d,#171b21);
    border-bottom:1px solid #353b45;
    box-shadow:0 3px 15px #0008;
    z-index:20;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    background:linear-gradient(145deg,#f5b400,#b47700);
    box-shadow:0 0 18px #f5b40055;
}

.logo strong{
    display:block;
    font-size:16px;
}

.logo small{
    display:block;
    color:#89919d;
    margin-top:2px;
}

.header-tools{
    display:flex;
    align-items:center;
    gap:8px;
}

.top-btn{
    border:1px solid #414854;
    background:#242a32;
    color:#ddd;
    padding:8px 12px;
    border-radius:7px;
    cursor:pointer;
}

.top-btn:hover{
    background:#303741;
}

.top-btn.active{
    background:#f5b400;
    color:#171717;
    border-color:#f5b400;
    font-weight:bold;
}

/* =========================================================
   SIDEBAR
========================================================= */

#leftPanel,
#rightPanel{
    background:#171b21;
    border-color:#303640;
    overflow:auto;
    z-index:10;
}

#leftPanel{
    border-right:1px solid #303640;
    padding:12px;
}

#rightPanel{
    border-left:1px solid #303640;
    padding:14px;
}

.panel-title{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#8e97a4;
    margin:8px 0 10px;
}

.component{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    margin-bottom:7px;
    background:linear-gradient(145deg,#242a32,#1c2128);
    border:1px solid #353c46;
    border-radius:8px;
    cursor:grab;
    transition:.15s;
}

.component:hover{
    border-color:#f5b400;
    transform:translateX(2px);
    box-shadow:0 4px 15px #0005;
}

.component:active{
    cursor:grabbing;
}

.comp-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#11151a;
    font-size:20px;
}

.comp-info strong{
    display:block;
    font-size:13px;
}

.comp-info small{
    display:block;
    color:#7f8996;
    font-size:10px;
    margin-top:3px;
}

/* =========================================================
   WORKSPACE
========================================================= */

#workspace{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(#242a31 1px,transparent 1px),
        linear-gradient(90deg,#242a31 1px,transparent 1px),
        #15191e;
    background-size:25px 25px;
}

#world{
    position:absolute;
    width:1400px;
    height:850px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(1);
    transform-origin:center center;
}

/* =========================================================
   CASA
========================================================= */

.house{
    position:absolute;
    left:110px;
    top:70px;
    width:1050px;
    height:650px;
    background:#d5d0c5;
    border:10px solid #3a3630;
    box-shadow:
        0 20px 50px #000b,
        inset 0 0 30px #0002;
}

/* ============================================================
   ILUMINAÇÃO DOS CÔMODOS
   ============================================================ */

.room {
    position: relative;
    overflow: hidden;
    transition:
        background-color 0.45s ease,
        box-shadow 0.45s ease;
}

/*
 * Camada de iluminação do cômodo.
 * Fica atrás dos dispositivos e móveis.
 */
.room::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    opacity: 0;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 224, 130, 0.91) 0%,
            rgba(255, 211, 92, 0.30) 32%,
            rgba(218, 190, 36, 0.82) 62%,
            transparent 90%
        );

    transition: opacity 0.5s ease;
}

/* Cômodo iluminado */
.room.lit {
    background-color: #e9bdbd;
    box-shadow:
        inset 0 0 55px rgba(255, 220, 120, 0.32),
        0 0 18px rgba(255, 211, 100, 0.12);
}

/* Ativa o brilho */
.room.lit::before {
    opacity: 1;
}

/*
 * Mantém os elementos do cômodo acima
 * da camada de iluminação.
 */
.room > * {
    position: relative;
    z-index: 1;
}

.room{
    position:absolute;
    background:
        linear-gradient(135deg,#dedbd2,#d0ccc2);
    border:4px solid #45413a;
    overflow:visible;
}

.room-name{
    position:absolute;
    top:10px;
    text-align: center;
    left:50%;
    font-weight:bold;
    color:#6b665d;
    font-size:14px;
    pointer-events:none;
}

/* cômodos */

#sala{
    left:0;
    top:0;
    width:430px;
    height:330px;
}

#quarto1{
    left:430px;
    top:0;
    width:300px;
    height:330px;
}

#quarto2{
    left:730px;
    top:0;
    width:310px;
    height:330px;
}

#cozinha{
    left:0;
    top:330px;
    width:430px;
    height:310px;
}

#banheiro{
    left:430px;
    top:330px;
    width:220px;
    height:310px;
}

#servico{
    left:650px;
    top:330px;
    width:220px;
    height:310px;
}

#garagem{
    left:870px;
    top:330px;
    width:170px;
    height:310px;
}

/* =========================================================
   COMPONENTES NA PLANTA
========================================================= */

.device{
    position:absolute;
    min-width:32px;
    min-height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    cursor:pointer;
    z-index:5;
    transition:box-shadow .15s;
}

.device:hover{
    box-shadow:0 0 0 2px #f5b40088;
}

.device.selected{
    box-shadow:
        0 0 0 2px #f5b400,
        0 0 18px #f5b40088;
}

.device .label{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    font-size:9px;
    color:#4e4a43;
    font-weight:bold;
    margin-top:3px;
    pointer-events:none;
}

/* lâmpada */

.device.lamp{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#f7f2d1;
    border:3px solid #756d53;
    color:#7a6720;
    font-size:21px;
    box-shadow:0 0 12px #fff4;
}

/* tomada */

.device.outlet{
    width:34px;
    height:34px;
    background:#f2eee5;
    border:3px solid #55504a;
    color:#333;
    font-size:16px;
}

/* interruptor */

.device.switch{
    width:32px;
    height:34px;
    background:#eee9df;
    border:3px solid #514c46;
    color:#333;
    font-size:16px;
}

/* caixa */

.device.box{
    width:34px;
    height:34px;
    background:#aaa59a;
    border:3px solid #4c4943;
    color:#272727;
    font-size:15px;
}

/* quadro */

.device.panel{
    width:75px;
    height:105px;
    border-radius:4px;
    background:linear-gradient(145deg,#e5e3dc,#aaa79f);
    border:4px solid #4b4945;
    color:#222;
    font-size:22px;
    box-shadow:3px 4px 12px #0006;
}

.device.meter{
    width:70px;
    height:85px;
    border-radius:5px;
    background:#ddd9cf;
    border:4px solid #44413d;
    color:#222;
    font-size:22px;
}

/* =========================================================
   TERMINAIS
========================================================= */

.terminal{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    border:2px solid #111;
    z-index:8;
    cursor:crosshair;
}

.terminal.phase{
    background:#d71920;
}

.terminal.neutral{
    background:#1976d2;
}

.terminal.terra{
    background:#20a348;
}

.terminal.retorno{
    background:#8c44c7;
}

/* =========================================================
   CABOS
========================================================= */

#cables{
    position:absolute;
    inset:0;
    width:1400px;
    height:850px;
    pointer-events:none;
    z-index:3;
}

.cable{
    fill:none;
    stroke-width:3.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    /* Linha sólida = canaleta */
}

.cable.phase{
    stroke:#d71920;
}

.cable.neutral{
    stroke:#1976d2;
}

.cable.terra{
    stroke:#20a348;
}

.cable.retorno{
    stroke:#8c44c7;
}

/* "Sombra" atrás do cabo — dá aparência de canaleta/trilho */
.cable-shadow{
    fill:none;
    stroke:#000;
    stroke-opacity:.35;
    stroke-width:6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* =========================================================
   RIGHT PANEL
========================================================= */

.prop-empty{
    color:#68717c;
    font-size:13px;
    text-align:center;
    padding:35px 10px;
}

.prop-box{
    background:#20252c;
    border:1px solid #353c45;
    border-radius:9px;
    padding:12px;
    margin-bottom:10px;
}

.prop-title{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:14px;
    font-weight:bold;
    margin-bottom:12px;
}

.prop-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    border-bottom:1px solid #30363f;
    font-size:12px;
}

.prop-row:last-child{
    border-bottom:0;
}

.prop-row span:first-child{
    color:#89929e;
}

.prop-row span:last-child{
    color:#eee;
    text-align:right;
}

select,
input{
    width:100%;
    background:#15191e;
    border:1px solid #3b424d;
    border-radius:6px;
    color:#eee;
    padding:7px;
    outline:none;
}

select:focus,
input:focus{
    border-color:#f5b400;
}

/* =========================================================
   STATUS
========================================================= */

#statusbar{
    grid-column:1 / 4;
    background:#0e1115;
    border-top:1px solid #303640;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    color:#89919b;
    font-size:11px;
}

.status-left{
    display:flex;
    gap:20px;
}

.status-item strong{
    color:#eee;
}

.status-ok{
    color:#3edc74;
}

/* =========================================================
   ZOOM
========================================================= */

.zoom-controls{
    position:absolute;
    right:15px;
    bottom:15px;
    display:flex;
    gap:10px;
    z-index:15;
}

.zoom-controls #zoomReset{
border:0px solid #454c56;
text-align: left;
width: auto;
font-size:15px;
}

.zoom-controls button{
    width:35px;
    height:35px;
    border:1px solid #454c56;
    border-radius:7px;
    background:#1c2127dd;
    color:#eee;
    cursor:pointer;
    font-size:17px;
}

.zoom-controls button:hover{
    background:#303741;
}

/* =========================================================
   TOAST
========================================================= */

#toast{
    position:absolute;
    left:50%;
    top:20px;
    transform:translateX(-50%) translateY(-20px);
    opacity:0;
    background:#20252c;
    border:1px solid #4a525d;
    border-radius:8px;
    padding:10px 18px;
    box-shadow:0 10px 30px #0008;
    transition:.25s;
    z-index:100;
    pointer-events:none;
}

#toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* =========================================================
   MODO CONEXÃO
========================================================= */

#connectionMode{
    position:absolute;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    background:#f5b400;
    color:#171717;
    padding:10px 18px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
    display:none;
    z-index:50;
    box-shadow:0 5px 20px #0008;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width:950px){

    #app{
        grid-template-columns:200px 1fr;
    }

    #rightPanel{
        display:none;
    }

    header,
    #statusbar{
        grid-column:1 / 3;
    }
}

@media(max-width:650px){

    #app{
        grid-template-columns:1fr;
        grid-template-rows:62px 1fr 42px;
    }

    #leftPanel{
        display:none;
    }

    header,
    #statusbar{
        grid-column:1;
    }
}
.terminal.occupied{
    opacity:.45;
    box-shadow:0 0 0 2px #ff5555;
    cursor:not-allowed !important;
}
/* =========================================================
   NOVOS COMPONENTES
========================================================= */

/* Disjuntor */
.device.breaker{
    width:44px;
    height:54px;
    background:linear-gradient(145deg,#e8e5de,#b8b5ae);
    border:3px solid #3d3b36;
    border-radius:5px;
    color:#222;
    font-size:18px;
    box-shadow:2px 3px 8px #0006;
}
  
 .device.breaker,
.device.dr,
.device.dps,
.device.busN,
.device.busPE {

    z-index: 10;
} 

/* DR */
.device.dr{
    width:56px;
    height:54px;
    background:linear-gradient(145deg,#d6d3cc,#a8a5a0);
    border:3px solid #3d3b36;
    border-radius:5px;
    color:#222;
    font-size:18px;
    box-shadow:2px 3px 8px #0006;
}

/* DPS */
.device.dps{
    width:44px;
    height:54px;
    background:linear-gradient(145deg,#f0ece2,#c4c0b6);
    border:3px solid #3d3b36;
    border-radius:5px;
    color:#c44;
    font-size:18px;
    box-shadow:2px 3px 8px #0006;
}

/* Barramento N */
.device.busN{
    width:70px;
    height:22px;
    background:linear-gradient(145deg,#2b3f5c,#16263d);
    border:2px solid #0d1828;
    border-radius:4px;
    color:#7fb4ff;
    font-size:14px;
    box-shadow:1px 2px 6px #0008;
}

/* Barramento PE */
.device.busPE{
    width:70px;
    height:22px;
    background:linear-gradient(145deg,#1e4a2c,#0d2b18);
    border:2px solid #07200f;
    border-radius:4px;
    color:#7fe89d;
    font-size:14px;
    box-shadow:1px 2px 6px #0008;
}

/* Terminal em destaque durante a conexão */
.terminal.connecting{
    box-shadow:0 0 0 3px #f5b400, 0 0 18px #f5b400;
    animation:pulse 1s infinite;
    z-index:30;
}

@keyframes pulse{
    0%,100%{ transform:scale(1); }
    50%    { transform:scale(1.3); }
}
/* =========================================================
   SLOT DO QUADRO DE MEDIÇÃO
========================================================= */

#meterSlot{
    position:absolute;
    width:82px;
    height:100px;
    border:0px dashed #f5b40088;
    border-radius:6px;
    background:#f5b4000f;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#f5b40099;
    font-size:20px;
    z-index:2;
    pointer-events:none;
    transition:opacity .2s, background .2s, border-color .2s;
    left:1040px;
    top:720px;
}

#meterSlot small{
    font-size:8px;
    letter-spacing:1px;
    margin-top:4px;
    font-weight:bold;
    color:#f5b40088;
}

/* Quando existe um medidor posicionado, o slot some suavemente */
#meterSlot.hidden{
    opacity:0;
}

/* Destaque durante o arrasto do medidor */
#meterSlot.highlight{
    border-color:#f5b400;
    background:#f5b40033;
    box-shadow:0 0 25px #f5b40066;
    animation:slotPulse 1.2s infinite;
}

@keyframes slotPulse{
    0%,100%{ transform:scale(1); }
    50%    { transform:scale(1.06); }
}

/* =========================================================
   POSTE DE ENTRADA
========================================================= */

#pole{
    position:absolute;
    left:1200px;      /* ← ajuste conforme o slot do medidor */
    top:540px;
    width:60px;
    height:200px;
    z-index:2;
    pointer-events:none;
}

/* Corpo do poste */
.pole-body{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:16px;
    height:170px;
    background:
        linear-gradient(90deg,
            #4a4a4a 0%,
            #7a7a7a 35%,
            #9a9a9a 50%,
            #7a7a7a 65%,
            #3a3a3a 100%);
    border-radius:2px;
    box-shadow:2px 4px 10px #000a;
}

/* Base de concreto */
.pole-base{
    position:absolute;
    left:50%;
    bottom:-4px;
    transform:translateX(-50%);
    width:34px;
    height:14px;
    background:linear-gradient(180deg,#9a938a,#5c554c);
    border-radius:2px;
    box-shadow:0 3px 8px #0008;
}

/* Cruzeta no topo */
.pole-crossarm{
    position:absolute;
    left:50%;
    top:6px;
    transform:translateX(-50%);
    width:58px;
    height:8px;
    background:linear-gradient(180deg,#8a7a5a,#5c4e34);
    border-radius:2px;
    box-shadow:1px 2px 4px #0008;
}

/* Isoladores */
.pole-insulator{
    position:absolute;
    top:-8px;
    width:8px;
    height:12px;
    background:linear-gradient(180deg,#f0f0f0,#7a7a7a);
    border-radius:50% 50% 20% 20%;
    box-shadow:0 1px 2px #0008;
}

.pole-insulator.left{ left:2px; }
.pole-insulator.right{ right:2px; }

/* =========================================================
   RAMAL DE ENTRADA (cabo SVG)
========================================================= */

#ramalSvg{
    position:absolute;
    inset:0;
    width:1400px;
    height:850px;
    pointer-events:none;
    z-index:2;
}

.ramal-cable{
    fill:none;
    stroke-width:3;
    stroke-linecap:round;
    stroke-dasharray:6 3;
    animation:ramalFlow 1.2s linear infinite;
}

.ramal-cable.phase{
    stroke:#d71920;
}

.ramal-cable.neutral{
    stroke:#1976d2;
}

@keyframes ramalFlow{
    to{ stroke-dashoffset:-18; }
}
/* =========================================================
   LÂMPADA ACESA
========================================================= */

.device.lamp{
    transition: background .25s, box-shadow .25s, color .25s;
}

.device.lamp.on{
    background:#fff8c4;
    border-color:#f5b400;
    color:#f5a300;
    box-shadow:
        0 0 15px #fff9b0,
        0 0 35px #ffd70088,
        0 0 60px #ffcc0077;
    animation:lampGlow 1.6s ease-in-out infinite;
}

.device.lamp.on::after{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:50%;
    background:radial-gradient(circle,
        #ffe78a55 0%,
        #ffe78a22 40%,
        transparent 70%);
    pointer-events:none;
    animation:lampHalo 2s ease-in-out infinite;
}

@keyframes lampGlow{
    0%,100%{ box-shadow:0 0 15px #fff9b0, 0 0 35px #ffd70088, 0 0 60px #ffcc0077; }
    50%    { box-shadow:0 0 20px #fff9b0, 0 0 45px #ffd700aa, 0 0 80px #ffcc0099; }
}

@keyframes lampHalo{
    0%,100%{ opacity:.5; transform:scale(1); }
    50%    { opacity:.9; transform:scale(1.05); }
}

/* =========================================================
   INTERRUPTOR LIGADO
========================================================= */

.device.switch{
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.device.switch.on{
    background:#f5b400;
    border-color:#f5b400;
    color:#171717;
    box-shadow:
        0 0 10px #f5b40088,
        inset 0 0 6px #0004;
}

/* =========================================================
   CABO ENERGIZADO (efeito de fluxo)
========================================================= */

.cable.phase.energized{
    stroke-dasharray:6 4;
    animation:cableFlow .6s linear infinite;
}

@keyframes cableFlow{
    to{ stroke-dashoffset:-10; }
}

/* =========================================================
   BARRAMENTOS ENERGIZADOS
========================================================= */

.device.busN.on{
    background:linear-gradient(145deg,#2b5a8c,#163a5d);
    box-shadow:
        0 0 12px #3e9ddc88,
        inset 0 0 6px #0003;
    color:#a8d4ff;
}

.device.busPE.on{
    background:linear-gradient(145deg,#1e6a3c,#0d4022);
    box-shadow:
        0 0 12px #3edc7488,
        inset 0 0 6px #0003;
    color:#a8ffc4;
}
.device.panelEmpty{
    width:75px;
    height:105px;
    border-radius:4px;
    background:linear-gradient(145deg,#f5f2ea,#c8c5bd);
    border:4px dashed #7a7570;
    color:#555;
    font-size:22px;
    box-shadow:2px 3px 10px #0006;
    opacity:.85;
}

/* =========================================================
   SLOT DO QUADRO DE DISTRIBUIÇÃO
========================================================= */

#panelSlot{
    position:absolute;
    width:82px;
    height:100px;
    border:0px dashed #f5b40088;
    border-radius:6px;
    background:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#f5b40099;
    font-size:20px;
    z-index:2;
    pointer-events:none;
    transition:opacity .2s, background .2s, border-color .2s;
    left:1120px;
    top:640px;
}

#panelSlot small{
    font-size:8px;
    letter-spacing:1px;
    margin-top:4px;
    font-weight:bold;
    color:#f5b40088;
}

#panelSlot.hidden{
    opacity:0;
}

#panelSlot.highlight{
    border-color:#f5b400;
    background:#f5b40033;
    box-shadow:0 0 25px #f5b40066;
    animation:slotPulse 1.2s infinite;
}
  
 /* =========================================================
   GABINETE BRANCO DO QUADRO DE DISTRIBUIÇÃO
========================================================= */

.device.panelEmpty {

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eeeeee
        );

    border: 3px solid #c9c9c9;

    border-radius: 8px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.9);

    color: #222;

    z-index: 5;

    transition:
        width .20s ease,
        height .20s ease;

    pointer-events: auto;
}


/* Cabeçalho do gabinete */

.panel-cabinet-header {

    position: absolute;

    top: 4px;
    left: 7px;
    right: 7px;

    height: 20px;

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

    padding-left: 5px;

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

    letter-spacing: .5px;

    color: #444;

    border-bottom: 1px solid #ccc;

    pointer-events: none;
}


/* Área interna */

.panel-cabinet-body {

    position: absolute;

    left: 5px;
    right: 5px;

    top: 27px;
    bottom: 5px;

    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #f8f8f8,
            #e5e5e5
        );

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.18);

    pointer-events: none;
} 

/* =========================================================
   VENTILADOR
========================================================= */

.device.fan{
    width:64px;
    height:64px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 35%,#f4f4f4,#c8c8c8);
    border:3px solid #4a4a4a;
    color:#333;
    font-size:22px;
    z-index:6;
    transition:box-shadow .3s;
}

.device.fan.on{
    box-shadow:0 0 14px #7fd0ff88;
    border-color:#3a9fd4;
}

.device.fan .fan-blades{
    position:absolute;
    inset:6px;
    border-radius:50%;
    background:
        conic-gradient(
            #888 0deg 60deg,
            transparent 60deg 120deg,
            #888 120deg 180deg,
            transparent 180deg 240deg,
            #888 240deg 300deg,
            transparent 300deg 360deg
        );
    opacity:.75;
    transform-origin:center;
    animation:fanSpin 1s linear infinite;
    animation-play-state:paused;
}

.device.fan.spin-slow  .fan-blades{ animation-duration:2.4s; animation-play-state:running; }
.device.fan.spin-mid   .fan-blades{ animation-duration:1.2s; animation-play-state:running; }
.device.fan.spin-fast  .fan-blades{ animation-duration:.45s; animation-play-state:running; }

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

/* =========================================================
   DIMMER
========================================================= */

.device.dimmer{
    width:34px;
    height:42px;
    background:linear-gradient(145deg,#eee9df,#c9c4b8);
    border:3px solid #514c46;
    border-radius:6px;
    color:#333;
    font-size:14px;
    z-index:6;
}

.device.dimmer.on{
    background:linear-gradient(145deg,#ffe58a,#f5b400);
    border-color:#f5b400;
    box-shadow:0 0 10px #f5b40088;
    color:#171717;
}

/* =========================================================
   TV
========================================================= */

.device.tv{
    width:188px;
    height:156px;
    background:#111;
    border:3px solid #333;
    border-radius:6px;
    color:#555;
    font-size:14px;
    overflow:hidden;
    z-index:6;
    transition:box-shadow .3s;
}

.device.tv .tv-screen{
    position:absolute;
    inset:5px;
    border-radius:3px;
    background:#0a0a0a;
    transition:background .3s;
    overflow:hidden;
}

.device.tv.on .tv-screen{
    background-image: url("images/dispositivos/dps-275v.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
    
    background-size:100% 200%;
    animation:tvSlide 6s ease infinite;
    box-shadow:inset 0 0 14px #fff3;
}

.device.tv.on{
    border-color:#3a9fd4;
    box-shadow:0 0 16px #3a9fd488;
}

@keyframes tvSlide{
    0%   { background-position:0% 50%; }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

/* Linhas de varredura (scanlines) */
.device.tv.on .tv-screen::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.25) 0 1px,
        transparent 1px 3px
    );
    pointer-events:none;
    animation:tvScan 4s linear infinite;
}

@keyframes tvScan{
    to{ background-position:0 24px; }
}

/* =========================================================
   MOTOR
========================================================= */

.device.motor{
    width:62px;
    height:62px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 35%,#b0b8c0,#3e444c);
    border:3px solid #1e2126;
    color:#ddd;
    font-size:22px;
    z-index:6;
    transition:box-shadow .3s;
}

.device.motor.on{
    box-shadow:0 0 16px #3edc7488;
    border-color:#3edc74;
}

.device.motor .motor-shaft{
    position:absolute;
    width:6px;
    height:22px;
    background:#f5b400;
    top:-14px;
    left:50%;
    transform:translateX(-50%);
    border-radius:2px;
    transform-origin:50% 100%;
    animation:motorSpin .6s linear infinite;
    animation-play-state:paused;
}

.device.motor.on .motor-shaft{
    animation-play-state:running;
}

@keyframes motorSpin{
    to{ transform:translateX(-50%) rotate(360deg); }
}

/* =========================================================
   BOTOEIRA
========================================================= */

.device.button{
    width:34px;
    height:38px;
    background:linear-gradient(145deg,#e8e8e8,#b0b0b0);
    border:3px solid #444;
    border-radius:6px;
    color:#222;
    font-size:14px;
    z-index:6;
}

.device.button.on{
    background:linear-gradient(145deg,#6ee08a,#2fa04a);
    border-color:#1e7a35;
    color:#fff;
    box-shadow:0 0 10px #3edc7488;
}

/* =========================================================
   ESTADO GERAL DAS CARGAS
========================================================= */

.device.fan, .device.tv, .device.motor{
    transition:box-shadow .3s, border-color .3s, background .3s;
}
/* =========================================================
   BOTÕES DE AÇÃO NO HEADER
========================================================= */

.top-btn.danger{
    border-color:#7a2a2a;
    background:#2a1a1a;
    color:#ff9a9a;
}

.top-btn.danger:hover{
    background:#3d2020;
    border-color:#c04040;
}

.top-btn.danger:disabled,
.top-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
    filter:grayscale(.6);
}

/* =========================================================
   CABO SELECIONADO
========================================================= */

.cable.selected{
    stroke:#f5b400 !important;
    stroke-width:6 !important;
    filter:drop-shadow(0 0 6px #f5b400);
}

/* Permite clicar nos cabos */
#cables{
    pointer-events:none;
}

#cables .cable{
    pointer-events:stroke;
    cursor:pointer;
    transition:stroke-width .15s;
}

#cables .cable:hover{
    stroke-width:6;
    filter:drop-shadow(0 0 4px #fff8);
}
/* =========================================================
   CONTATOR
========================================================= */

.device.contactor,
.device.contator{
    width:60px;
    height:96px;
    background:linear-gradient(145deg,#dfe4ea,#a8b0b8);
    border:3px solid #2e343a;
    border-radius:5px;
    color:#1a1d21;
    font-size:16px;
    z-index:10;
    transition:box-shadow .3s, border-color .3s;
}

.device.contactor.on{
    border-color:#3edc74;
    box-shadow:0 0 14px #3edc7488;
}

.device.contactor.on::after{
    content:"";
    position:absolute;
    top:6px;
    right:6px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3edc74;
    box-shadow:0 0 8px #3edc74;
    animation:contactorPulse 1.2s ease-in-out infinite;
}

@keyframes contactorPulse{
    0%,100%{ opacity:1; }
    50%    { opacity:.35; }
}

/* =========================================================
   TIMER / PROGRAMADOR HORÁRIO (Coel RTST20)
========================================================= */

.device.timer{
    width:72px;
    height:72px;
    background:
        radial-gradient(circle at 50% 50%, #f5f5f5 0 40%, #dcdcdc 40% 100%);
    border:4px solid #2b2f33;
    border-radius:50%;
    color:#1a1d21;
    font-size:18px;
    z-index:10;
    transition:box-shadow .3s, border-color .3s;
}

.device.timer.on{
    border-color:#f5b400;
    box-shadow:0 0 16px #f5b400aa;
}

/* Coroa externa com os pinos (24h) */
.device.timer .timer-dial{
    position:absolute;
    inset:6px;
    border-radius:50%;
    background:
        conic-gradient(
            from -90deg,
            #888 0deg 15deg, transparent 15deg 30deg,
            #888 30deg 45deg, transparent 45deg 60deg,
            #888 60deg 75deg, transparent 75deg 90deg,
            #888 90deg 105deg, transparent 105deg 120deg,
            #888 120deg 135deg, transparent 135deg 150deg,
            #888 150deg 165deg, transparent 165deg 180deg,
            #888 180deg 195deg, transparent 195deg 210deg,
            #888 210deg 225deg, transparent 225deg 240deg,
            #888 240deg 255deg, transparent 255deg 270deg,
            #888 270deg 285deg, transparent 285deg 300deg,
            #888 300deg 315deg, transparent 315deg 330deg,
            #888 330deg 345deg, transparent 345deg 360deg
        );
    opacity:.35;
    pointer-events:none;
}

/* Ponteiro do timer girando quando ativo */
.device.timer .timer-hand{
    position:absolute;
    width:2px;
    height:24px;
    background:#d71920;
    left:50%;
    top:50%;
    transform-origin:50% 100%;
    transform:translate(-50%,-100%) rotate(0deg);
    border-radius:1px;
    pointer-events:none;
}

.device.timer.on .timer-hand{
    animation:timerSpin 4s linear infinite;
}

@keyframes timerSpin{
    to{ transform:translate(-50%,-100%) rotate(360deg); }
}

/* Estado do modo (auto/manual) */
.device.timer .timer-mode{
    position:absolute;
    bottom:-4px;
    left:50%;
    transform:translateX(-50%);
    background:#2b2f33;
    color:#f5b400;
    font-size:7px;
    font-weight:bold;
    padding:1px 5px;
    border-radius:6px;
    letter-spacing:.5px;
    pointer-events:none;
    white-space:nowrap;
}

/* =========================================================
   MODAL DE VERIFICAÇÃO (Etapa 2)
========================================================= */

#verifyOverlay{
    position:fixed;
    inset:0;
    background:#000a;
    backdrop-filter:blur(3px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:200;
}

#verifyOverlay.show{
    display:flex;
}

#verifyModal{
    width:min(920px, 92vw);
    max-height:88vh;
    background:linear-gradient(180deg,#1c2127,#161a1f);
    border:1px solid #3a414b;
    border-radius:14px;
    box-shadow:0 30px 80px #000c;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    animation:modalIn .25s ease;
}

@keyframes modalIn{
    from{ opacity:0; transform:translateY(20px) scale(.97); }
    to  { opacity:1; transform:translateY(0)   scale(1); }
}

#verifyModal header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 20px;
    background:linear-gradient(180deg,#242a32,#1c2127);
    border-bottom:1px solid #353b45;
}

#verifyModal header h2{
    margin:0;
    font-size:16px;
    color:#f5b400;
    display:flex;
    align-items:center;
    gap:10px;
}

#verifyModal header button{
    background:#2a2f36;
    border:1px solid #444b55;
    color:#ddd;
    width:32px;
    height:32px;
    border-radius:6px;
    cursor:pointer;
    font-size:16px;
}

#verifyModal header button:hover{
    background:#3a414b;
}

#verifyContent{
    padding:18px 20px;
    overflow-y:auto;
}

#verifyContent::-webkit-scrollbar{
    width:8px;
}
#verifyContent::-webkit-scrollbar-track{
    background:#12161a;
}
#verifyContent::-webkit-scrollbar-thumb{
    background:#3a414b;
    border-radius:4px;
}

/* Sumário no topo */
.verify-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:10px;
    margin-bottom:18px;
}

.verify-stat{
    background:#20252c;
    border:1px solid #353c45;
    border-radius:10px;
    padding:12px;
    text-align:center;
}

.verify-stat .num{
    font-size:26px;
    font-weight:bold;
    display:block;
    margin-bottom:4px;
}

.verify-stat .lbl{
    font-size:11px;
    color:#8b95a1;
    text-transform:uppercase;
    letter-spacing:1px;
}

.verify-stat.ok   .num{ color:#3edc74; }
.verify-stat.warn .num{ color:#f5b400; }
.verify-stat.err  .num{ color:#ff5555; }

/* Cartão de circuito */
.circuit-card{
    background:#20252c;
    border:1px solid #353c45;
    border-left:4px solid #3edc74;
    border-radius:10px;
    padding:14px 16px;
    margin-bottom:12px;
}

.circuit-card.ok   { border-left-color:#3edc74; }
.circuit-card.warn { border-left-color:#f5b400; }
.circuit-card.err  { border-left-color:#ff5555; }

.circuit-card .cc-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    font-weight:bold;
    font-size:13px;
}

.circuit-card .cc-title .cc-badge{
    font-size:10px;
    padding:3px 10px;
    border-radius:12px;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.circuit-card.ok   .cc-badge{ background:#1e4a2c; color:#7fe89d; }
.circuit-card.warn .cc-badge{ background:#4a3a12; color:#f5d078; }
.circuit-card.err  .cc-badge{ background:#4a1e1e; color:#ff9999; }

.circuit-card .cc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:8px;
    font-size:12px;
}

.circuit-card .cc-item{
    background:#161a1f;
    border:1px solid #2a313a;
    border-radius:6px;
    padding:8px 10px;
}

.circuit-card .cc-item .k{
    display:block;
    color:#8b95a1;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:2px;
}

.circuit-card .cc-item .v{
    color:#eee;
    font-weight:bold;
}

.circuit-card .cc-item .v.ok  { color:#3edc74; }
.circuit-card .cc-item .v.err { color:#ff5555; }

.circuit-card .cc-alerts{
    margin-top:10px;
    padding:8px 10px;
    background:#161a1f;
    border-radius:6px;
    font-size:11px;
    color:#c9a93a;
    line-height:1.6;
}

.circuit-card .cc-alerts .err{ color:#ff7777; }
.circuit-card .cc-alerts .ok { color:#7fe89d; }

/* Rodapé do modal */
#verifyModal .modal-footer{
    padding:12px 20px;
    border-top:1px solid #353b45;
    display:flex;
    justify-content:flex-end;
    gap:8px;
    background:#1c2127;
}

#verifyModal .modal-footer button{
    padding:9px 18px;
    border-radius:7px;
    border:1px solid #414854;
    background:#242a32;
    color:#ddd;
    cursor:pointer;
    font-size:13px;
}

#verifyModal .modal-footer button.primary{
    background:#f5b400;
    color:#171717;
    border-color:#f5b400;
    font-weight:bold;
}

#verifyModal .modal-footer button:hover{
    filter:brightness(1.15);
}

/* Tabela de referência no rodapé */
.verify-ref{
    background:#161a1f;
    border:1px dashed #353c45;
    border-radius:8px;
    padding:12px;
    margin-top:12px;
    font-size:11px;
    color:#8b95a1;
}

.verify-ref strong{ color:#eee; }

.verify-ref code{
    background:#20252c;
    padding:2px 6px;
    border-radius:4px;
    color:#f5b400;
    font-family:monospace;
}
  
 /* =========================================================
   TIMER — mostrador de hora atual
========================================================= */

.device.timer .timer-clock{
    position:absolute;
    bottom:-14px;
    left:50%;
    transform:translateX(-50%);
    background:#0e1115;
    color:#3edc74;
    font-family:monospace;
    font-size:8px;
    padding:1px 5px;
    border-radius:6px;
    letter-spacing:.5px;
    pointer-events:none;
    white-space:nowrap;
    border:1px solid #2a313a;
    z-index:12;
}

/* Estado: relógio dentro da janela ON */
.device.timer.active .timer-clock{
    color:#f5b400;
    border-color:#f5b40055;
    box-shadow:0 0 6px #f5b40055;
}

/* Ponteiro — cor muda quando a janela está ativa */
.device.timer.active .timer-hand{
    background:#3edc74;
}

/* Rótulo maior na barra de status do app */
.timer-global{
    position:fixed;
    top:70px;
    right:20px;
    background:#0e1115cc;
    border:1px solid #2a313a;
    border-radius:8px;
    padding:6px 12px;
    color:#f5b400;
    font-family:monospace;
    font-size:12px;
    z-index:99;
    pointer-events:none;
    backdrop-filter:blur(4px);
}

.timer-global small{
    display:block;
    color:#8b95a1;
    font-size:9px;
    letter-spacing:1px;
    margin-bottom:2px;
} 
 .speed-btn{
    background:#242a32;
    border:1px solid #414854;
    color:#ddd;
    padding:5px 10px;
    border-radius:6px;
    cursor:pointer;
    font-size:11px;
}
.speed-btn:hover{ background:#303741; }
.speed-btn.active{
    background:#f5b400;
    color:#171717;
    border-color:#f5b400;
    font-weight:bold;
} 
/* =========================================================
   BOTÃO DE DESCARGA ATMOSFÉRICA
========================================================= */

.top-btn.storm{
    border-color:#5a3a1a;
    background:#2a1c0a;
    color:#f5b400;
    font-weight:bold;
}

.top-btn.storm:hover{
    background:#3d2810;
    border-color:#f5b400;
    box-shadow:0 0 12px #f5b40066;
}

/* Flash branco cobrindo a tela durante a descarga */
#stormFlash{
    position:fixed;
    inset:0;
    background:#fff;
    opacity:0;
    z-index:9999;
    pointer-events:none;
    transition:opacity .12s ease-out;
}

#stormFlash.fire{
    opacity:.85;
    transition:opacity .04s ease-in;
}

/* =========================================================
   ESTADO QUEIMADO (cargas atingidas por surto)
========================================================= */

.device.burned{
    filter:grayscale(.7) brightness(.6);
    border-color:#5a1a1a !important;
    position:relative;
}

.device.burned::before{
    content:"💥";
    position:absolute;
    top:-8px;
    right:-8px;
    font-size:18px;
    z-index:99;
    filter:drop-shadow(0 0 4px #ff0000);
    animation:burnPulse 1.5s ease-in-out infinite;
}

@keyframes burnPulse{
    0%,100%{ transform:scale(1); }
    50%    { transform:scale(1.15); }
}

/* =========================================================
   DPS ATUADO (após absorver surto)
========================================================= */

.device.dps.tripped{
    background:linear-gradient(145deg,#5a1a1a,#2a0808) !important;
    border-color:#ff3333 !important;
    color:#ff9999 !important;
    box-shadow:0 0 18px #ff333388 !important;
}

.device.dps.tripped::after{
    content:"ATUADO";
    position:absolute;
    bottom:-12px;
    left:50%;
    transform:translateX(-50%);
    background:#d71920;
    color:#fff;
    font-size:7px;
    font-weight:bold;
    padding:2px 6px;
    border-radius:4px;
    letter-spacing:.5px;
    pointer-events:none;
    animation:trippedBlink 1s ease-in-out infinite;
}

@keyframes trippedBlink{
    0%,100%{ opacity:1; }
    50%    { opacity:.4; }
}

/* =========================================================
   TOAST DE PERIGO
========================================================= */

#toast.danger{
    background:#2a1010;
    border-color:#d71920;
    color:#ff9999;
    box-shadow:0 10px 30px #d7192066;
} 

/* =========================================================
   MOBÍLIA POR CÔMODO — estilo top-down realista
========================================================= */

.furniture{
    position:absolute;
    pointer-events:none;
    user-select:none;
    opacity:0.1;
    transition:opacity .5s ease, filter .5s ease, box-shadow .5s ease;
    filter:brightness(.65) saturate(.5);
    z-index:1;
    box-sizing:border-box;
}

/* Cômodo iluminado: móveis ganham destaque */
.room.lit .furniture{
    opacity:1;
    filter:brightness(1) saturate(1);
}

/* Sombra suave por baixo de cada móvel */
.furniture::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:inherit;
    background:radial-gradient(ellipse at center,
        rgba(0,0,0,.25) 0%,
        rgba(0,0,0,.10) 45%,
        transparent 75%);
    z-index:-1;
    pointer-events:none;
    opacity:.7;
}

/* Rótulo discreto */
.furniture .furn-label{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    font-size:8px;
    color:#3a3020;
    font-weight:600;
    letter-spacing:.3px;
    white-space:nowrap;
    pointer-events:none;
    opacity:.75;
    margin-top:3px;
    text-shadow:0 1px 0 rgba(255,255,255,.4);
}

/* =========================================================
   CAMA DE CASAL
   ========================================================= */

.furniture.cama{
    background:
        /* cabeceira (madeira) */
        linear-gradient(180deg,#6b4a30 0 4%, transparent 4%),
        /* colchão + edredom */
        linear-gradient(180deg,
            #f4efe4 0 8%,
            #dcd5c4 8% 22%,
            #c9bfa8 22% 100%);
    border:2px solid #7a5a3a;
    border-radius:8px;
    box-shadow:
        inset 0 0 0 2px #e6dcc4,
        inset 0 -8px 12px rgba(0,0,0,.08);
}

/* Travesseiros */
.furniture.cama::before{
    content:"";
    position:absolute;
    top:8%;
    left:8%;
    right:8%;
    height:22%;
    background:
        linear-gradient(90deg,
            #ffffff 0 46%,
            transparent 46% 54%,
            #ffffff 54% 100%);
    border-radius:6px;
    box-shadow:
        inset 0 -2px 4px rgba(0,0,0,.08),
        0 1px 0 rgba(0,0,0,.08);
    opacity:.95;
}

/* =========================================================
   CAMA DE SOLTEIRO
   ========================================================= */

.furniture.cama-solteiro{
    background:
        linear-gradient(180deg,#6b4a30 0 5%, transparent 5%),
        linear-gradient(180deg,#f4efe4 0 10%, #d0c8b4 10% 100%);
    border:2px solid #7a5a3a;
    border-radius:6px;
    box-shadow:inset 0 0 0 2px #e6dcc4;
}

.furniture.cama-solteiro::before{
    content:"";
    position:absolute;
    top:10%;
    left:12%;
    right:12%;
    height:26%;
    background:#ffffff;
    border-radius:5px;
    box-shadow:inset 0 -2px 3px rgba(0,0,0,.08);
}

/* =========================================================
   GUARDA-ROUPA
   ========================================================= */

.furniture.guarda-roupa{
    background:
        /* portas */
        linear-gradient(90deg,
            #8a6a4a 0 49%,
            #5c4430 49% 51%,
            #8a6a4a 51% 100%),
        #8a6a4a;
    border:2px solid #3a2415;
    border-radius:4px;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.15);
}

/* Puxadores */
.furniture.guarda-roupa::before,
.furniture.guarda-roupa::after{
    content:"";
    position:absolute;
    top:50%;
    width:3px;
    height:14px;
    background:#e8c87a;
    border-radius:2px;
    transform:translateY(-50%);
    box-shadow:0 0 2px rgba(0,0,0,.4);
}
.furniture.guarda-roupa::before{ left:46%; }
.furniture.guarda-roupa::after{  right:46%; }

/* =========================================================
   CRIADO-MUDO
   ========================================================= */

.furniture.criado-mudo{
    background:linear-gradient(145deg,#a87a5a,#6b4a30);
    border:2px solid #3a2415;
    border-radius:4px;
}

.furniture.criado-mudo::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:4px;
    height:4px;
    border-radius:50%;
    background:#e8c87a;
}

/* =========================================================
   SOFÁ
   ========================================================= */

.furniture.sofa{
    background:
        /* encosto */
        linear-gradient(180deg,#5a4436 0 18%, transparent 18%),
        /* assento */
        linear-gradient(180deg,#6b5544 18% 100%);
    border:2px solid #2c2118;
    border-radius:10px;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
}

/* Almofadas (divisões do assento) */
.furniture.sofa::before{
    content:"";
    position:absolute;
    top:22%;
    bottom:10%;
    left:4%;
    right:4%;
    background:
        linear-gradient(90deg,
            transparent 0 31%,
            rgba(0,0,0,.2) 31% 33%,
            transparent 33% 65%,
            rgba(0,0,0,.2) 65% 67%,
            transparent 67% 100%);
    border-radius:6px;
}

/* =========================================================
   SOFÁ EM L (retrátil)
   ========================================================= */

.furniture.sofa-L{
    position:relative;
}

.furniture.sofa-L::before,
.furniture.sofa-L::after{
    content:"";
    position:absolute;
    background:linear-gradient(145deg,#6b5544,#4a3a2c);
    border:2px solid #2c2118;
    border-radius:10px;
}

.furniture.sofa-L::before{
    /* braço horizontal */
    left:0; right:60%; top:0; bottom:35%;
    border-radius:10px 6px 6px 10px;
}

.furniture.sofa-L::after{
    /* braço vertical */
    left:40%; right:0; top:55%; bottom:0;
    border-radius:10px 10px 10px 6px;
}

/* =========================================================
   MESA DE JANTAR + CADEIRAS
   ========================================================= */

.furniture.mesa-jantar{
    background:linear-gradient(145deg,#a87a5a,#6b4a30);
    border:2px solid #3a2415;
    border-radius:8px;
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.08),
        0 4px 10px rgba(0,0,0,.25);
}

/* Cadeiras (marcas ao redor) */
.furniture.mesa-jantar::before{
    content:"";
    position:absolute;
    inset:-10px;
    background:
        /* topo */
        radial-gradient(circle at 25% -8px, #8a6a4a 0 6px, transparent 7px),
        radial-gradient(circle at 50% -8px, #8a6a4a 0 6px, transparent 7px),
        radial-gradient(circle at 75% -8px, #8a6a4a 0 6px, transparent 7px),
        /* base */
        radial-gradient(circle at 25% calc(100% + 8px), #8a6a4a 0 6px, transparent 7px),
        radial-gradient(circle at 50% calc(100% + 8px), #8a6a4a 0 6px, transparent 7px),
        radial-gradient(circle at 75% calc(100% + 8px), #8a6a4a 0 6px, transparent 7px),
        /* esquerda */
        radial-gradient(circle at -8px 50%, #8a6a4a 0 6px, transparent 7px),
        /* direita */
        radial-gradient(circle at calc(100% + 8px) 50%, #8a6a4a 0 6px, transparent 7px);
}

/* =========================================================
   MESA DE CENTRO
   ========================================================= */

.furniture.mesa-centro{
    background:linear-gradient(145deg,#c9a87a,#8a6a4a);
    border:2px solid #5a3f28;
    border-radius:6px;
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.12);
}

.furniture.mesa-centro::before{
    content:"";
    position:absolute;
    inset:22% 30%;
    background:linear-gradient(145deg,#7a9a5a,#4a6a30);
    border-radius:50%;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
}

/* =========================================================
   GELADEIRA
   ========================================================= */

.furniture.geladeira{
    background:
        linear-gradient(180deg,
            #f0f0f0 0 42%,
            #c8c8c8 42% 44%,
            #f0f0f0 44% 100%);
    border:2px solid #666;
    border-radius:6px;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.6),
        0 6px 12px rgba(0,0,0,.2);
}

/* Puxador */
.furniture.geladeira::before{
    content:"";
    position:absolute;
    right:6px;
    top:14%;
    width:3px;
    height:22%;
    background:#999;
    border-radius:2px;
    box-shadow:0 0 2px rgba(0,0,0,.3);
}

.furniture.geladeira::after{
    content:"";
    position:absolute;
    right:6px;
    top:56%;
    width:3px;
    height:26%;
    background:#999;
    border-radius:2px;
    box-shadow:0 0 2px rgba(0,0,0,.3);
}

/* =========================================================
   FOGÃO
   ========================================================= */

.furniture.fogao{
    background:linear-gradient(145deg,#3a3a3a,#1c1c1c);
    border:2px solid #000;
    border-radius:6px;
    box-shadow:inset 0 0 0 2px #444;
}

/* Bocas */
.furniture.fogao::before{
    content:"";
    position:absolute;
    top:12%; left:14%;
    width:24%; height:24%;
    border-radius:50%;
    background:radial-gradient(circle,#666 0 40%,#111 60%);
    border:2px solid #2a2a2a;
    box-shadow:
        inset 0 0 4px rgba(0,0,0,.8),
        0 0 0 2px #222;
}

.furniture.fogao::after{
    content:"";
    position:absolute;
    top:12%; right:14%;
    width:24%; height:24%;
    border-radius:50%;
    background:radial-gradient(circle,#666 0 40%,#111 60%);
    border:2px solid #2a2a2a;
    box-shadow:
        inset 0 0 4px rgba(0,0,0,.8),
        0 0 0 2px #222;
}

/* =========================================================
   PIA / LAVATÓRIO
   ========================================================= */

.furniture.pia{
    background:linear-gradient(145deg,#e8e8e8,#b0b0b0);
    border:2px solid #666;
    border-radius:6px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}

.furniture.pia::before{
    content:"";
    position:absolute;
    top:22%;
    left:22%; right:22%;
    bottom:32%;
    background:radial-gradient(ellipse at center,#888 0 55%,#666 100%);
    border-radius:50% 50% 40% 40%;
    box-shadow:inset 0 3px 6px rgba(0,0,0,.5);
}

/* Torneira */
.furniture.pia::after{
    content:"";
    position:absolute;
    top:8%;
    left:50%;
    transform:translateX(-50%);
    width:6px;
    height:14px;
    background:#a0a0a0;
    border-radius:2px;
    box-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* =========================================================
   VASO SANITÁRIO
   ========================================================= */

.furniture.vaso{
    background:linear-gradient(145deg,#fafafa,#c8c8c8);
    border:2px solid #888;
    border-radius:6px;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.08),
        0 4px 8px rgba(0,0,0,.15);
}

.furniture.vaso::before{
    content:"";
    position:absolute;
    top:12%;
    left:50%;
    transform:translateX(-50%);
    width:65%;
    height:38%;
    background:radial-gradient(ellipse,#f0f0f0,#a0a0a0);
    border-radius:50%;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.25);
}

/* =========================================================
   DUCHA / CHUVEIRO
   ========================================================= */

.furniture.ducha{
    background:
        repeating-linear-gradient(90deg,
            #a8a8a8 0 4px,
            #c8c8c8 4px 8px);
    border:2px solid #666;
    border-radius:50% 50% 4px 4px;
    box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}

.furniture.ducha::before{
    content:"";
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    width:16px;
    height:16px;
    border-radius:50%;
    background:radial-gradient(circle,#c8c8c8,#888);
    box-shadow:0 2px 4px rgba(0,0,0,.3);
}

/* =========================================================
   MÁQUINA DE LAVAR
   ========================================================= */

.furniture.maquina{
    background:linear-gradient(145deg,#ececec,#b0b0b0);
    border:2px solid #666;
    border-radius:6px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}

.furniture.maquina::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:55%;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,#4a7fb5 0 60%,#1a3a5c 80%,#0a1a2c);
    border:3px solid #444;
    box-shadow:inset 0 3px 8px rgba(0,0,0,.5);
}

/* =========================================================
   TANQUE
   ========================================================= */

.furniture.tanque{
    background:linear-gradient(145deg,#dcdcdc,#a0a0a0);
    border:2px solid #666;
    border-radius:6px 6px 14px 14px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
}

.furniture.tanque::before{
    content:"";
    position:absolute;
    top:16%;
    left:16%; right:16%;
    bottom:22%;
    background:radial-gradient(ellipse,#888,#666);
    border-radius:50%;
    box-shadow:inset 0 3px 6px rgba(0,0,0,.5);
}

/* =========================================================
   TV + RACK
   ========================================================= */

.furniture.tv-rack{
    background:linear-gradient(145deg,#7a5a3a,#4a3420);
    border:2px solid #2c1e12;
    border-radius:4px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}

.furniture.tv-rack::before{
    content:"";
    position:absolute;
    top:18%;
    left:12%; right:12%;
    height:60%;
    background:linear-gradient(120deg,#1a1a1a,#2a2a2a);
    border-radius:3px;
    box-shadow:
        inset 0 0 0 2px #111,
        inset 0 0 20px rgba(30,60,150,.4);
}

.furniture.tv-rack::after{
    content:"";
    position:absolute;
    top:22%;
    left:16%; right:16%;
    height:50%;
    background:
        linear-gradient(120deg,
            rgba(30,58,138,.5),
            rgba(124,58,237,.5),
            rgba(219,39,119,.5));
    border-radius:2px;
}

/* =========================================================
   CARRO
   ========================================================= */

.furniture.carro{
    background:
        linear-gradient(180deg,
            #b33a3a 0 8%,
            #d04a4a 8% 92%,
            #7a1010 92% 100%);
    border:2px solid #3a0000;
    border-radius:18px 18px 10px 10px;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.15),
        0 6px 16px rgba(0,0,0,.35);
}

/* Para-brisa */
.furniture.carro::before{
    content:"";
    position:absolute;
    top:16%;
    left:16%; right:16%;
    height:30%;
    background:linear-gradient(180deg,#b8d8f0,#7fa8c8);
    border-radius:8px;
    box-shadow:inset 0 0 8px rgba(0,0,0,.2);
}

/* Rodas */
.furniture.carro::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 8% 24%, #111 0 4px, transparent 5px),
        radial-gradient(circle at 92% 24%, #111 0 4px, transparent 5px),
        radial-gradient(circle at 8% 76%, #111 0 4px, transparent 5px),
        radial-gradient(circle at 92% 76%, #111 0 4px, transparent 5px);
}

/* =========================================================
   PLANTA (vaso decorativo)
   ========================================================= */

.furniture.planta{
    background:radial-gradient(circle at 50% 60%, #6a8a4a 0 45%, #3a5a20 70%, #2a3f18 100%);
    border:2px solid #2a3f18;
    border-radius:50%;
}

.furniture.planta::before{
    content:"";
    position:absolute;
    inset:22%;
    background:radial-gradient(circle at 50% 40%, #a8c878 0 40%, transparent 70%);
    border-radius:50%;
}

/* =========================================================
   MESA DE TRABALHO / ESCRIVANINHA
   ========================================================= */

.furniture.escrivaninha{
    background:linear-gradient(145deg,#a87a5a,#6b4a30);
    border:2px solid #3a2415;
    border-radius:4px;
}

.furniture.escrivaninha::before{
    content:"";
    position:absolute;
    top:20%; left:16%;
    width:32%;
    height:50%;
    background:linear-gradient(145deg,#2a2a2a,#111);
    border-radius:3px;
    box-shadow:inset 0 0 0 1px #444;
}

.furniture.escrivaninha::after{
    content:"";
    position:absolute;
    top:20%; right:16%;
    width:22%;
    height:50%;
    background:linear-gradient(145deg,#e8e8e8,#a8a8a8);
    border-radius:3px;
}
 /* =========================================================
   INTERRUPTOR THREE-WAY
========================================================= */

.device.threeway{
    width:34px;
    height:36px;
    background:linear-gradient(145deg,#eee9df,#c9c4b8);
    border:3px solid #514c46;
    border-radius:6px;
    color:#333;
    font-size:15px;
    z-index:6;
    transition:background .2s, border-color .2s, box-shadow .2s;
}

.device.threeway.on{
    background:linear-gradient(145deg,#f5b400,#c98c00);
    border-color:#f5b400;
    color:#171717;
    box-shadow:0 0 10px #f5b40088, inset 0 0 6px #0004;
}

/* Indica posição: A (L1 ligado) ou B (L2 ligado) */
.device.threeway .threeway-state{
    position:absolute;
    bottom:-12px;
    left:50%;
    transform:translateX(-50%);
    background:#2b2f33;
    color:#f5b400;
    font-size:7px;
    font-weight:bold;
    padding:1px 5px;
    border-radius:6px;
    letter-spacing:.5px;
    pointer-events:none;
    white-space:nowrap;
} 
  
/* =========================================================
   BOIA ELÉTRICA (controle de nível)
========================================================= */

.device.boia{
    width:44px;
    height:52px;
    background:linear-gradient(145deg,#d0e8f5,#7fa8c8);
    border:3px solid #3a5568;
    border-radius:8px;
    color:#1a2a3a;
    font-size:18px;
    z-index:6;
    transition:background .3s, border-color .3s, box-shadow .3s;
}

/* Nível baixo = boia "fechada" (bomba liga) */
.device.boia.low{
    background:linear-gradient(145deg,#7fd0a0,#2fa060);
    border-color:#1e7040;
    color:#fff;
    box-shadow:0 0 14px #3edc7488;
}

/* Nível alto = boia "aberta" (bomba desliga) */
.device.boia.high{
    background:linear-gradient(145deg,#f0b0b0,#c06060);
    border-color:#802020;
    color:#fff;
    box-shadow:0 0 10px #ff555588;
}

/* Rótulo do nível embaixo */
.device.boia .boia-level{
    position:absolute;
    bottom:-14px;
    left:50%;
    transform:translateX(-50%);
    background:#0e1115;
    color:#7fd0a0;
    font-family:monospace;
    font-size:7px;
    font-weight:bold;
    padding:2px 6px;
    border-radius:6px;
    letter-spacing:.4px;
    white-space:nowrap;
    border:1px solid #2a313a;
    pointer-events:none;
    z-index:12;
}

.device.boia.high .boia-level{
    color:#ff9999;
    border-color:#80202055;
}

/* Indicador visual de "água" dentro do dispositivo */
.device.boia::before{
    content:"";
    position:absolute;
    left:6px;
    right:6px;
    bottom:6px;
 
    background:linear-gradient(180deg,
        rgba(80,180,240,.85) 0%,
        rgba(40,120,200,.9) 100%);
    border-radius:4px;
    pointer-events:none;
    transition:height .4s ease;

    height: var(--water-level, 20%);
    transition: height 0.4s ease;
}



/* Nível alto = vermelho (esvaziando) */
.device.boia.high::before{
    background: linear-gradient(180deg,
        rgba(240,120,120,.85) 0%,
        rgba(200,60,60,.9) 100%);
  height:85%;
} 

/* Nível baixo: poca d'água pequena */
.device.boia.low::before{
    height:20%;
    background:linear-gradient(180deg,
        rgba(255,220,120,.4) 0%,
        rgba(220,180,80,.5) 100%);
}
/* =========================================================
   RELÉ TEMPORIZADOR UNIVERSAL
========================================================= */

.device.releTimer{
    width:56px;
    height:56px;
    background:linear-gradient(145deg,#dfe4ea,#a8b0b8);
    border:3px solid #2e343a;
    border-radius:8px;
    color:#1a1d21;
    font-size:20px;
    z-index:10;
    transition:box-shadow .3s, border-color .3s, background .3s;
}

.device.releTimer.on{
    background:linear-gradient(145deg,#a8e8b8,#4aa860);
    border-color:#2a8040;
    box-shadow:0 0 16px #3edc74aa;
}

.device.releTimer.on::after{
    content:"";
    position:absolute;
    top:4px;
    right:4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3edc74;
    box-shadow:0 0 8px #3edc74;
    animation:relePulse 1s ease-in-out infinite;
}

@keyframes relePulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%    { opacity:.5; transform:scale(1.2); }
}

.device.releTimer .rele-timer-state{
    position:absolute;
    bottom:-14px;
    left:50%;
    transform:translateX(-50%);
    background:#0e1115;
    color:#ff9999;
    font-family:monospace;
    font-size:7px;
    font-weight:bold;
    padding:1px 5px;
    border-radius:6px;
    letter-spacing:.4px;
    white-space:nowrap;
    border:1px solid #2a313a;
    pointer-events:none;
    z-index:12;
}

.device.releTimer.on .rele-timer-state{
    color:#3edc74;
    border-color:#3edc7455;
}

.device.releTimer .rele-timer-countdown{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:#0e1115;
    color:#f5b400;
    font-family:monospace;
    font-size:8px;
    font-weight:bold;
    padding:1px 4px;
    border-radius:4px;
    letter-spacing:.3px;
    white-space:nowrap;
    border:1px solid #2a313a;
    pointer-events:none;
    z-index:12;
}