/* Estilos gerais (body, h1, simulator-container, etc.) - SEM ALTERAÇÕES */
body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    padding-top: 60px; /* Espaço para o seletor de idioma */
    background-color: #f0f2f5;
    min-width: 850px;
    position: relative;
    padding-bottom: 100px; /* Aumenta espaço para switch SVG maior */
}

/* Seletor de Idioma - SEM ALTERAÇÕES */
#language-selector {
    position: absolute;
    top: 10px;
    right: 15px;
    display: flex;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 100;
}
.flag { font-size: 1.6em; cursor: pointer; transition: opacity 0.2s, transform 0.2s; opacity: 0.6; }
.flag.active { opacity: 1.0; transform: scale(1.1); }
.flag:hover { opacity: 1.0; }

h1 { color: #333; margin-bottom: 15px; text-align: center; }

/* Wrapper #main-content e classe .power-off - SEM ALTERAÇÕES */
#main-content {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transition: opacity 0.3s ease-in-out;
}
#main-content.power-off {
    opacity: 0.4;
    pointer-events: none;
}

/* .simulator-container e .panel - SEM ALTERAÇÕES */
.simulator-container {
    display: flex;
    gap: 20px;
    width: 100%;
    align-items: flex-start;
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.panel {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Painéis Left, Center, Right e seus conteúdos internos - SEM ALTERAÇÕES */
/* ... (todos os estilos anteriores para #left-panel, #center-area, #right-panel, etc.) ... */
/* Painel Esquerdo */
#left-panel { flex: 1; min-width: 180px; justify-content: flex-start; }
#left-panel h2 { margin-top: 0; margin-bottom: 20px; font-size: 1.2em; }
#left-panel .control-group { margin-bottom: 20px; width: 95%; text-align: center;}
#left-panel label { display: block; margin-bottom: 5px; }
#dataInput { padding: 5px 10px; width: 70px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; font-size: 1.8em; text-align: center; text-transform: uppercase; display: inline-block; vertical-align: middle; }
.binary-input-display { font-size: 0.9em; color: #555; text-align: center; margin-top: 5px; }
.binary-input-display span { margin-right: 5px; }
#binaryInputDisplay { font-family: monospace; background-color: #eee; padding: 2px 5px; border-radius: 3px; min-width: 8ch; display: inline-block; }
#writeBtn { background-color: #007bff; color: white; padding: 10px 15px; width: 95%; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; margin-top: 15px; }
#writeBtn:hover { background-color: #0056b3; }
#writeBtn:active { background-color: #004085; }

/* Área Central */
#center-area { flex: 3; background-color: transparent; border: none; padding: 0; align-items: center; }
#address-selection-area { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 15px; padding: 10px; background-color: #f1f3f5; border-radius: 5px; border: 1px solid #dee2e6; width: auto; }
#address-selection-area label { font-weight: bold; font-size: 1em; color: #333; margin-bottom: 0; }
#addressSelector { display: inline-block; padding: 8px; width: auto; min-width: 150px; border-radius: 4px; border: 1px solid #ccc; font-size: 1em; vertical-align: middle; cursor: pointer; }
#memory-grid { display: flex; flex-direction: column; gap: 5px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; background-color: #fff; width: auto; align-self: center; }
.memory-row { display: flex; align-items: center; gap: 8px; border: 1px solid #eee; padding: 5px 10px; border-radius: 4px; background-color: #fff; transition: background-color 0.3s ease-in-out; }
.memory-row.selected-word { background-color: #fff3cd; border-color: #ffeeba; }
.row-address-label { font-family: monospace; font-size: 0.9em; color: #888; width: 20px; text-align: right; }
.word-capacitors { display: flex; gap: 5px; }

.capacitor { width: 30px; height: 30px; border: 1px solid #777; background-color: #e0e0e0; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; box-sizing: border-box; }
.charge { width: 100%; background-color: #4CAF50; position: absolute; bottom: 0; left: 0; transition: height 0.1s linear, background-color 0.2s; z-index: 1; }
.bit-label { font-size: 8px; color: #333; position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; z-index: 3; font-weight: bold; }
.threshold-line { position: absolute; width: 100%; height: 1px; background-color: #ff0000; bottom: 33.33%; left: 0; z-index: 2; opacity: 0.7; }

#toggle-discharge-container { width: 100%; text-align: right; padding-right: 15px; margin-top: 10px; box-sizing: border-box; }
#toggleDischargeBtn { cursor: pointer; font-size: 1.5em; padding: 5px; display: inline-block; user-select: none; transition: transform 0.2s; }
#toggleDischargeBtn:hover { transform: scale(1.1); }
#refreshBtn { background-color: #dc3545; color: white; padding: 10px 25px; width: auto; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; margin-top: 10px; order: 3; }
#refreshBtn:hover { background-color: #c82333; }

/* Painel Direito */
#right-panel { flex: 1; min-width: 200px; justify-content: flex-start; }
#right-panel h2 { margin-top: 0; margin-bottom: 15px; font-size: 1.2em; }
#right-panel .control-group { margin-bottom: 15px; width: 90%; text-align: center; }
#readBtn { background-color: #28a745; color: white; padding: 10px 15px; width: 90%; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
#readBtn:hover { background-color: #218838; }
#readBtn:active { background-color: #1e7e34; }
.output-area { text-align: center; line-height: 1.5; width: 90%; padding: 10px; border: 1px solid #eee; background-color: #fff; border-radius: 4px; }
.output-area span { display: block; }
#lastReadWordIndicator { font-weight: bold; color: #007bff; font-size: 0.9em; }
#hexOutput { font-family: monospace; font-size: 1.8em; background-color: #ddeeff; padding: 0px 8px; border-radius: 3px; border: 1px solid #aaa; min-width: 2ch; display: inline-block; text-align: center; vertical-align: middle; font-weight: bold; }

/* Controle de Descarga - SEM ALTERAÇÕES */
.control-section { width: 100%; max-width: 600px; padding: 15px; border: 1px solid #ccc; border-radius: 5px; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; gap: 15px; display: none; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; opacity: 0; transform: translateY(-10px); box-sizing: border-box; }
.control-section.visible { display: flex; opacity: 1; transform: translateY(0); }
#discharge-control label { font-weight: bold; color: #333; }
#dischargeRateSlider { width: 250px; cursor: pointer; vertical-align: middle; }
#dischargeRateValue { font-family: monospace; font-weight: bold; font-size: 1.1em; color: #0056b3; min-width: 5ch; text-align: right; }


/* --- ESTILOS ATUALIZADOS DO INTERRUPTOR --- */
.power-switch-container {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 50;
    /* Removido gap, pois o label agora contém o SVG */
}

/* Esconde o checkbox real */
#powerSwitch {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
}

/* Estilo do Label que contém o SVG */
.power-switch-label {
    cursor: pointer;
    display: inline-block; /* Para conter o SVG */
    /* Remove estilos de desenho anteriores */
    /* background: none; */
    /* width: auto; */
    /* height: auto; */
    /* border-radius: 0; */
    /* position: static; */
}

/* Estilo do SVG */
.lever-switch-svg {
    width: 60px; /* Largura do SVG */
    height: 90px; /* Altura do SVG */
    display: block; /* Evita espaço extra abaixo */
    transition: filter 0.3s; /* Suaviza a sombra */
}
.lever-switch-svg:hover {
    filter: brightness(1.1); /* Leve brilho no hover */
}


/* --- LÓGICA DE ANIMAÇÃO DA ALAVANCA --- */

/* Estado Inicial (Checked = ON): Alavanca para cima (ex: -40 graus) */
#powerSwitch:checked + .power-switch-label #lever-arm {
    transform: rotate(-40deg);
}
/* Mostra texto ON, esconde OFF */
#powerSwitch:checked + .power-switch-label .switch-text.on { display: block; }
#powerSwitch:checked + .power-switch-label .switch-text.off { display: none; }


/* Estado Desligado (Not Checked = OFF): Alavanca para baixo (ex: +40 graus) */
#powerSwitch:not(:checked) + .power-switch-label #lever-arm {
    transform: rotate(40deg);
}
/* Mostra texto OFF, esconde ON */
#powerSwitch:not(:checked) + .power-switch-label .switch-text.on { display: none; }
#powerSwitch:not(:checked) + .power-switch-label .switch-text.off { display: block; }


/* Garante que o switch (label com SVG) seja clicável mesmo com o overlay */
#main-content.power-off + .power-switch-container {
    pointer-events: auto;
}

/* Status e Rodapé - SEM ALTERAÇÕES */
#status { margin-top: 25px; font-style: italic; color: #555; min-height: 1.2em; text-align: center; width: 100%; max-width: 1100px; }
footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid #ddd; width: 100%; max-width: 1000px; text-align: center; font-size: 0.9em; color: #666; }
footer a { color: #0056b3; text-decoration: none; }
footer a:hover { text-decoration: underline; }