/* Estilos gerais */
body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    padding-top: 60px;
    background-color: #f0f2f5;
    min-width: 800px; /* Ajuste conforme necessário */
    position: relative;
    padding-bottom: 100px; /* Espaço para switch SVG e rodapé */
}

/* Seletor de Idioma */
#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; }

/* NOVO: Wrapper para conteúdo principal afetado pela energia */
#main-content {
    width: 100%;
    max-width: 950px; /* Mantém largura original do container SRAM */
    display: flex; /* Para conter o simulator-container */
    flex-direction: column; /* Empilha se houver mais elementos internos */
    align-items: center; /* Centraliza o container */
    gap: 20px; /* Espaço se houver mais elementos */
    transition: opacity 0.3s ease-in-out; /* Transição suave para desligar */
}

/* NOVO: Classe para estado desligado */
#main-content.power-off {
    opacity: 0.4; /* Reduz opacidade */
    pointer-events: none; /* Desabilita interações DENTRO */
}


.simulator-container {
    display: flex;
    gap: 20px;
    width: 100%; /* Ocupa a largura do #main-content */
    /* max-width: 950px; Removido - controlado por #main-content */
    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; }

/* 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%; }
#left-panel label { display: block; margin-bottom: 5px; text-align: center; } /* Centraliza label */
#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; } /* input como inline-block */
.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: 2; 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; } /* Mantido nome da classe */

/* Estilo da Célula SRAM */
.sram-cell {
    width: 25px;
    height: 25px;
    border: 1px solid #999;
    background-color: #f0f0f0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    transition: background-color 0.2s, color 0.2s;
    user-select: none; /* Evita seleção do texto 0/1 */
}
.sram-cell.cell-zero { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.sram-cell.cell-one { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }

/* 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; }


/* --- NOVO: Estilos do Interruptor de Energia (Copiados da DRAM) --- */
.power-switch-container {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 50;
}

/* 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;
}

/* Estilo do SVG */
.lever-switch-svg {
    width: 60px;
    height: 90px;
    display: block;
    transition: filter 0.3s;
}
.lever-switch-svg:hover {
    filter: brightness(1.1);
}

/* Lógica de Animação da Alavanca */
#powerSwitch:checked + .power-switch-label #lever-arm {
    transform: rotate(-40deg);
}
#powerSwitch:checked + .power-switch-label .switch-text.on { display: block; }
#powerSwitch:checked + .power-switch-label .switch-text.off { display: none; }

#powerSwitch:not(:checked) + .power-switch-label #lever-arm {
    transform: rotate(40deg);
}
#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 seja clicável mesmo com o overlay */
#main-content.power-off + .power-switch-container {
    pointer-events: auto;
}
/* --- Fim dos estilos do Interruptor --- */


/* Status */
#status { margin-top: 25px; font-style: italic; color: #555; min-height: 1.2em; text-align: center; width: 100%; max-width: 950px; /* Ajusta largura max */ }

/* Rodapé */
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; }