/* GLOBAL.CSS - padrao das telas (25/09/2026). Guia: docs/padrao-telas.md
   O login tambem carrega este arquivo: nada de seletor de elemento solto
   (h1, button, input...) nem de .msg .ok .erro .aviso .dica .sub .acoes
   .selo .passo .aerator-on/off (outras telas usam esses nomes).
   Nenhum valor e novo: cada bloco diz de qual tela veio. */

/* ========== RESET E BASE ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========== TOKENS ==========
   Os 4 primeiros ja existiam aqui, com os mesmos valores. Cores e hovers:
   botoes do cartao de aerador do manual (.button.on/.off/.manual/.auto);
   neutro do .lz-btn.cinza; categorias do menu e das configuracoes (so
   borda, relogio ou titulo - nunca botao). */
:root {
    --aqua-azul: #1976D2;
    --aqua-azul-escuro: #125AA0;
    --aqua-ok: #4CAF50;
    --aqua-perigo: #f44336;
    --aqua-azul-claro: #2196F3;
    --aqua-ok-escuro: #45a049;
    --aqua-perigo-escuro: #da190b;
    --aqua-alerta: #ff9800;
    --aqua-alerta-escuro: #f57c00;
    --aqua-neutro: #757575;
    --aqua-neutro-escuro: #616161;
    --aqua-alimentacao: #e67e22;
    --aqua-luz: #f9a825;
    --aqua-root: #6f42c1;
    /* fundo/texto/borda de estado: cartao do aerador e caixas da luz/wifi */
    --aqua-ok-fundo: #e8f5e9;
    --aqua-ok-texto: #1b5e20;
    --aqua-ok-borda: #a5d6a7;
    --aqua-perigo-fundo: #ffebee;
    --aqua-perigo-texto: #b71c1c;
    --aqua-perigo-borda: #ef9a9a;
    --aqua-alerta-fundo: #fff3e0;
    --aqua-alerta-texto: #7a4b00;
    --aqua-alerta-borda: #ffcc80;
    --aqua-info-fundo: #e3f2fd;
    --aqua-info-texto: #1565c0;
    --aqua-info-borda: #90caf9;
    /* superficie e forma: fundo, cartao, linhas e textos do manual; rotulo
       e dica da luz_config; raio 6px dos botoes/campos da luz e do wifi;
       fonte que este arquivo ja usava */
    --aqua-fundo: #f5f5f5;
    --aqua-cartao: #fff;
    --aqua-borda: #ddd;
    --aqua-linha: #e0e0e0;
    --aqua-texto: #333;
    --aqua-texto-2: #555;
    --aqua-texto-3: #888;
    --aqua-raio: 8px;
    --aqua-raio-p: 6px;
    --aqua-sombra: 0 2px 8px rgba(0, 0, 0, .1);
    --aqua-fonte: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Fundo do controle manual. Painel, graficos e login trocam no <style>. */
body {
    font-family: var(--aqua-fonte);
    background-color: var(--aqua-fundo);
    color: var(--aqua-texto);
    margin: 0;
    padding: 0;
}

/* ========== CONTAINER ==========
   1000px do event_log.css, padding que ja era daqui. .estreito
   (formularios): 640px da .lz-caixa, centralizado. */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 15px;
}

.container.estreito {
    max-width: 640px;
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

/* ========== BARRA DO TOPO OFICIAL (padrao unico, 31/08/2026) ==========
   Toda pagina usa o MESMO cabecalho:
     <header class="barra-topo">
       <a class="voltar" href="/menu">&#8592;</a>
       <h1>Titulo da Pagina</h1>
       <span class="slot-placa"></span>
     </header>
   O slot-placa e preenchido pelo auth.js no acesso remoto (chip com o nome
   da placa atual + lista para trocar). No local ele fica vazio e invisivel. */
.barra-topo {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--aqua-azul);
    color: #fff;
    padding: 9px 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.barra-topo h1 {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: #fff;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-topo .voltar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.barra-topo .voltar:active,
.barra-topo .voltar:hover {
    background: rgba(255, 255, 255, .3);
}

/* Chip da placa e badges auxiliares dentro da barra */
.barra-topo .slot-placa {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip-placa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-placa.ativa {
    background: rgba(255, 255, 255, .3);
}

/* Lista de placas aberta pelo chip */
.lista-placas {
    position: fixed;
    right: 8px;
    top: 48px;
    z-index: 10000;
    background: #fff;
    color: #222;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
    font-size: 14px;
    min-width: 220px;
    /* Frota grande (master): a lista rola em vez de sair da tela */
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.lista-placas div {
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.lista-placas div.atual {
    background: #e3f2fd;
    font-weight: bold;
}

/* ========== PILULA DE CONEXAO (do painel) ==========
   <span class="conn conn-ok|conn-off|conn-wait"> entre o h1 e o slot-placa.
   Encolhe com reticencias: "Equipamento fora do ar" + chip de nome longo
   estourava a barra em telas de ate ~345px. */
.barra-topo .conn {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.conn-ok { background: #166534; color: #86efac; }
.conn-off { background: #7f1d1d; color: #fca5a5; }
.conn-wait { background: #78350f; color: #fde68a; }

/* ========== CARTAO ==========
   Fundo/raio/sombra do .tank-container do manual, padding do .status-card
   da alimentacao, titulo do feeder_config. Estados: borda 2px do
   .status-card.active com os fundos do cartao do aerador. */
.card {
    background: var(--aqua-cartao);
    border-radius: var(--aqua-raio);
    box-shadow: var(--aqua-sombra);
    padding: 15px;
    margin-bottom: 15px;
}

.card > h2 {
    font-size: 18px;
    color: var(--aqua-texto);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--aqua-linha);
}

.card-ok {
    border: 2px solid var(--aqua-ok);
    background: var(--aqua-ok-fundo);
}

.card-perigo {
    border: 2px solid var(--aqua-perigo);
    background: var(--aqua-perigo-fundo);
}

.card-alerta {
    border: 2px solid var(--aqua-alerta);
    background: var(--aqua-alerta-fundo);
}

/* ========== BOTOES ==========
   .lz-btn/.wf-btn/.ntf-btn (ja eram iguais); .btn-sm do event_log. Cor pelo
   papel: azul salvar/navegar, vermelho parar/excluir, laranja acionar para
   teste, cinza cancelar. O .button do aerador fica no manual-control.css. */
.btn,
.btn-primary {
    display: inline-block;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--aqua-raio-p);
    font: 600 15px var(--aqua-fonte);
    color: #fff;
    background: var(--aqua-azul);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
    background: var(--aqua-azul-escuro);
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-block {
    display: block;
    width: 100%;
    margin-top: 12px;
}

.btn-sm {
    padding: 7px 14px;
    font-size: 14px;
}

.btn-secondary { background: var(--aqua-neutro); }
.btn-secondary:hover:not(:disabled) { background: var(--aqua-neutro-escuro); }
.btn-danger { background: var(--aqua-perigo); }
.btn-danger:hover:not(:disabled) { background: var(--aqua-perigo-escuro); }
.btn-success { background: var(--aqua-ok); }
.btn-success:hover:not(:disabled) { background: var(--aqua-ok-escuro); }
.btn-warning { background: var(--aqua-alerta); }
.btn-warning:hover:not(:disabled) { background: var(--aqua-alerta-escuro); }

/* ========== CAMPOS ==========
   Nomes e input 16px do feeder_config (o hardware_config.js ja os gera);
   rotulo e borda da luz_config; foco do hardware_config com o azul da barra. */
.form-group {
    margin-bottom: 15px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--aqua-texto-2);
    margin-bottom: 5px;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    font: 16px var(--aqua-fonte);
    border: 1px solid #ccc;
    border-radius: var(--aqua-raio-p);
    background: #fff;
}

.form-input:focus {
    outline: none;
    border-color: var(--aqua-azul);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .15);
}

.unit-info {
    color: var(--aqua-texto-3);
    font-size: 14px;
    font-weight: normal;
    margin-left: 5px;
}

.info-text {
    color: var(--aqua-texto-3);
    font-size: 14px;
    font-style: italic;
}

/* ========== INTERRUPTOR ==========
   feeder_schedule/schedule_config (iguais); verde #28a745 -> --aqua-ok */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background: #ccc;
    border-radius: 24px;
    transition: .3s;
}

.toggle-slider:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .3s;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--aqua-ok);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* ========== AVISO NA PAGINA (resultado de salvar) ==========
   Nomes do alarm/hardware_config, medidas da .lz-msg, cores da .lz-ok/-erro.
   A cor so vale JUNTO com .section-status (.status-info solto nao e
   nome do global). Sem display: quem mostra e esconde e o JS. */
.section-status {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: var(--aqua-raio-p);
    font-size: 14px;
    border: 1px solid transparent;
}

.section-status.status-success {
    background: var(--aqua-ok-fundo);
    color: var(--aqua-ok-texto);
    border-color: var(--aqua-ok-borda);
}

.section-status.status-error {
    background: var(--aqua-perigo-fundo);
    color: var(--aqua-perigo-texto);
    border-color: var(--aqua-perigo-borda);
}

.section-status.status-warning {
    background: var(--aqua-alerta-fundo);
    color: var(--aqua-alerta-texto);
    border-color: var(--aqua-alerta-borda);
}

.section-status.status-info {
    background: var(--aqua-info-fundo);
    color: var(--aqua-info-texto);
    border-color: var(--aqua-info-borda);
}

/* ========== AVISO FLUTUANTE (acao de operacao) ==========
   feeder_status/feeder_config (iguais), a 80px do topo como no event_log.
   O JS mostra e pinta (#4CAF50 / #f44336). Nunca como caixa na pagina. */
.status-message {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 5px;
    background: var(--aqua-ok);
    color: #fff;
    font-weight: bold;
    display: none;
    z-index: 2000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
}

/* ========== SELO ==========
   Forma do .inv-status-badge/.mode-badge/.lr-badge; off do system_info;
   luz do .lr-on. */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.badge-ok, .badge-on { background: var(--aqua-ok-fundo); color: var(--aqua-ok-texto); }
.badge-error { background: var(--aqua-perigo-fundo); color: var(--aqua-perigo-texto); }
.badge-warn, .badge-warning { background: var(--aqua-alerta-fundo); color: var(--aqua-alerta-texto); }
.badge-info { background: var(--aqua-info-fundo); color: var(--aqua-info-texto); }
.badge-off { background: #e0e0e0; color: #616161; }
/* borda do .lr-on antigo: sem ela o selo da luz e o -warn (manual) quase
   nao se distinguem */
.badge-luz { background: #fff8e1; color: #7a5c00; border: 1px solid #ffe082; }

/* ========== TABELA ==========
   Medidas e zebra do event_log; cabecalho #2196F3 do hardware/alarm (nao
   emenda com a barra); rolagem do .tabela-rolavel do hardware_config. */
.tabela-rolavel {
    overflow-x: auto;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabela th {
    background: var(--aqua-azul-claro);
    color: #fff;
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    white-space: nowrap;
}

.tabela td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

.tabela tr:nth-child(even) td {
    background: #f8f9fa;
}

/* ========== LINHA CHAVE/VALOR (feeder_status, system_info) ========== */
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: var(--aqua-texto-2);
    border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child {
    border-bottom: none;
}

/* ========== CARREGANDO / VAZIO ==========
   manual-control.css e event_log; o painel redefine .no-data no <style>. */
.loading,
.no-data,
.empty-state {
    text-align: center;
    padding: 40px;
    color: #666;
}

/* ========== CARTOES DE NAVEGACAO ==========
   menu.html (e configuracoes), azul da barra no lugar de #007BFF */
.menu-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 15px;
}

.menu-card {
    background: #fff;
    border-radius: var(--aqua-raio);
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: all .3s;
}

.menu-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transform: translateY(-2px);
}

.menu-card h2 {
    color: var(--aqua-azul);
    font-size: 18px;
    margin-bottom: 10px;
}

.menu-card p {
    color: #666;
    font-size: 14px;
}

/* Categoria na borda esquerda: data-cor = laranja|cinza|vermelho|ambar|roxo
   (grupos do menu e bordas inline das configuracoes). */
.menu-card[data-cor],
.card[data-cor] {
    border-left: 4px solid var(--aqua-azul);
}

.menu-card[data-cor="laranja"], .card[data-cor="laranja"] { border-left-color: var(--aqua-alimentacao); }
.menu-card[data-cor="cinza"], .card[data-cor="cinza"] { border-left-color: #64748b; }
.menu-card[data-cor="vermelho"], .card[data-cor="vermelho"] { border-left-color: var(--aqua-perigo); }
.menu-card[data-cor="ambar"], .card[data-cor="ambar"] { border-left-color: var(--aqua-luz); }
.menu-card[data-cor="roxo"], .card[data-cor="roxo"] { border-left-color: var(--aqua-root); }

/* ========== GRUPOS RECOLHIVEIS ==========
   <details class="grupo"> nativo, sem JS para abrir/fechar. Nasceu no menu
   (04/09/2026) e passou a valer para telas de configuracao longas (hardware,
   27/09/2026): agrupam .menu-card ou .card por assunto. */
details.grupo {
    background: var(--aqua-cartao);
    border-radius: var(--aqua-raio);
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-left: 4px solid var(--aqua-azul);
}
details.grupo[data-cor="laranja"] { border-left-color: var(--aqua-alimentacao); }
details.grupo[data-cor="cinza"]   { border-left-color: #64748b; }
details.grupo > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    color: var(--aqua-azul);
    font-size: 1.25rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
details.grupo > summary::-webkit-details-marker { display: none; }
details.grupo > summary::after { content: "\25BE"; color: var(--aqua-texto-3); font-size: 1rem; transition: transform .2s; }
details.grupo[open] > summary::after { transform: rotate(180deg); }
details.grupo > summary small { display: block; color: #666; font-size: 14px; font-weight: normal; margin-top: 4px; }
details.grupo .menu-card,
details.grupo .card {
    margin: 0 12px 12px;
    box-shadow: none;
    border: 1px solid var(--aqua-linha);
}

/* ========== TANQUE (controle manual e programacao horaria) ==========
   Valores do manual-control.css. Titulo preso ao .tank-container: o painel
   usa .tank-header com outro desenho. O .aerator-container nao sobe (grade
   de 150px no manual, flex de grupos de 300px na programacao). */
.tank-container {
    margin-bottom: 30px;
    padding: 20px;
    background: var(--aqua-cartao);
    border-radius: var(--aqua-raio);
    box-shadow: var(--aqua-sombra);
}

.tank-container > .tank-header {
    font-size: 22px;
    font-weight: bold;
    color: var(--aqua-texto);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--aqua-azul-claro);
    text-align: center;
}

@media (max-width: 768px) {
    .tank-container {
        padding: 15px;
    }
}

/* ========== ICONE DO AERADOR ==========
   @keyframes iguais aos do index.html e manual-control.css (eram copias).
   Quem liga a animacao e cada tela. */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes drops-arc-up {
    0%, 100% { opacity: 0.3; transform: translateY(2px); }
    30% { opacity: 1; transform: translateY(-3px); }
    60% { opacity: 0.8; transform: translateY(-1px); }
}
@keyframes drops-arc-over {
    0%, 100% { opacity: 0.3; transform: translateY(1px); }
    20% { opacity: 0.6; transform: translateY(-2px); }
    50% { opacity: 1; transform: translateY(-4px); }
    80% { opacity: 0.6; transform: translateY(-2px); }
}
@keyframes drops-arc-down {
    0%, 100% { opacity: 0.3; transform: translateY(-2px); }
    40% { opacity: 1; transform: translateY(3px); }
    70% { opacity: 0.7; transform: translateY(1px); }
}
@keyframes wave {
    0%, 100% { d: path("M-4 50 Q6 47, 16 50 Q26 53, 36 50 Q46 47, 56 50 Q66 53, 68 50"); }
    50%       { d: path("M-4 50 Q6 53, 16 50 Q26 47, 36 50 Q46 53, 56 50 Q66 47, 68 50"); }
}