.login_button{
    background-color: #ffffff;
    color: #e0992d;
    transition: background-color 0.3s;
    cursor: pointer;
}
.login_button:hover{
    background-color: #a0a0a0;
}

.link_button{
    display: inline-block;
    background-color: #19405d;
    padding: 1px 3px;
    color: #e0992d;
    text-decoration: none;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s;
    cursor: pointer;
}
.link_button:hover{
    background-color: #293050;
}

.dropdown {
    position: relative;
    display: inline-block;
    padding: 10px;
}

.dropdown_content {
    display: none;
    background-color: #ffffff;
    position: absolute;
    width: 200px;
    padding: 20px;
    margin: 15px;
}

.dropdown_content a{
    color: #e0992d;
    padding: 1px;
    margin: 0;
    text-decoration: none;
    font-family: Arial, sans-serif;
    display: block;
    cursor: pointer;
}

.show{
    display: block;
}

.dropdown_button{
    display: inline-block;
    background-color: #19405d;
    padding: 1px 3px;
    color: #e0992d;
    text-decoration: none;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s;
    cursor: pointer;
}
.dropdown_button:hover{
    background-color: #293050;
}

.div_link{
    text-decoration: none;
    color:#e0992d;
    display: block;
    cursor: pointer;
}

.database{
    border: 1px solid black;
    padding: 3px;
    font-size: 10px;
    length: 
}


/* ==========================================================================
   DASHBOARD DE HIDRÔMETROS (dashboard_hidrometros.php)
   Tudo escopado em .dash para não afetar o resto do site.
   Paleta do site: #19405d (azul), #293050 (azul escuro), #e0992d (laranja), #a0a0a0 (cinza)
   ========================================================================== */
.dash{
    --azul: #19405d;
    --azul_escuro: #293050;
    --laranja: #e0992d;
    --cinza: #a0a0a0;
    --texto: #1f2933;
    --suave: #5a6b76;
    --grade: #d6dee2;
    --fundo: #f2f5f7;
    --alerta: #b3261e;
    --atencao: #b26a00;
    --ok: #2e8b57;
    --regua: 2px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 16px 48px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: var(--texto);
}
.dash *{ box-sizing: border-box; }
.dash h1, .dash h2, .dash h3, .dash p{ margin: 0; }
.dash button, .dash select, .dash input{ font: inherit; color: inherit; }
.dash :focus-visible{ outline: 3px solid var(--laranja); outline-offset: 2px; }
.dash [hidden]{ display: none !important; }

/* topo e filtros */
.dash .topo{ display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.dash h1{ font-size: clamp(24px, 4vw, 34px); line-height: 1.1; color: var(--azul); }
.dash #subtitulo{ color: var(--suave); margin-top: 4px; }
.dash .filtros{ display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.dash .filtros label{ display: grid; gap: 3px; font-weight: bold; font-size: 13px; color: var(--azul); }
.dash .filtros select, .dash .filtros input{
    background: #ffffff; border: var(--regua) solid var(--azul); border-radius: 2px;
    padding: 7px 10px; min-height: 40px;
}
.dash .banner, .dash .erro{ border: var(--regua) solid var(--laranja); background: #fdf3e1; padding: 10px 14px; margin-bottom: 14px; }
.dash .erro{ border-color: var(--alerta); background: #fdecea; }

/* chips (filtro + legenda) */
.dash .chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dash .chip{
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: #ffffff; border: var(--regua) solid var(--azul); border-radius: 2px;
    padding: 6px 12px; min-height: 40px; font-weight: bold; color: var(--azul);
}
.dash .chip i{ width: 14px; height: 14px; border-radius: 50%; background: var(--cor); border: 2px solid var(--cor); }
.dash .chip[aria-pressed="false"]{ color: var(--suave); border-color: var(--grade); background: transparent; }
.dash .chip[aria-pressed="false"] i{ background: transparent; }

/* medidores (a grade lembra o formulário impresso) */
.dash .medidores{
    display: grid; gap: var(--regua); background: var(--azul); border: var(--regua) solid var(--azul);
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-bottom: 24px;
}
.dash .medidor{ background: #ffffff; padding: 14px 16px 16px; display: grid; gap: 12px; align-content: start; }
.dash .medidor h3{ font-size: 19px; line-height: 1.1; color: var(--azul); display: flex; align-items: center; gap: 8px; }
.dash .medidor h3 i{ width: 12px; height: 12px; border-radius: 50%; background: var(--cor); flex: none; }
.dash .quando{ color: var(--suave); font-size: 13px; margin-top: -6px; }
.dash .odo{ display: flex; gap: 3px; }
.dash .dg{
    width: 1.05em; height: 1.55em; display: grid; place-items: center; border-radius: 2px;
    font: bold 26px/1 Arial, sans-serif; font-variant-numeric: tabular-nums; color: #ffffff;
    background: linear-gradient(#19405d, #2f5878 50%, #19405d);
}
.dash .dg.dec{ background: linear-gradient(#8e1b15, #b3261e 50%, #8e1b15); }
.dash .dados{ display: grid; gap: 6px; margin: 0; }
.dash .dados div{ display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-top: 1px solid var(--grade); padding-top: 6px; }
.dash .dados dt{ color: var(--suave); font-size: 13.5px; }
.dash .dados dd{ margin: 0; font: bold 17px/1.1 Arial, sans-serif; font-variant-numeric: tabular-nums; text-align: right; color: var(--azul); }
.dash .dados dd small{ display: block; font: normal 12.5px/1.25 Arial, sans-serif; color: var(--suave); }
.dash .vazio{ color: var(--suave); }

/* painéis */
.dash .painel{ background: #ffffff; border: var(--regua) solid var(--azul); margin-bottom: 24px; }
.dash .painel-topo{
    display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center;
    padding: 10px 16px; background: var(--azul);
}
.dash .painel-topo h2{ font-size: 19px; line-height: 1.1; color: var(--laranja); }
.dash .painel-topo .nota{ color: #cfd8e0; margin: 0; }
.dash .painel-corpo{ padding: 14px 16px 16px; }
.dash .abas{ display: inline-flex; border: var(--regua) solid var(--laranja); border-radius: 2px; }
.dash .abas button{ background: var(--azul); color: var(--laranja); border: 0; padding: 8px 14px; min-height: 38px; cursor: pointer; font-weight: bold; transition: background-color 0.3s; }
.dash .abas button + button{ border-left: var(--regua) solid var(--laranja); }
.dash .abas button:hover{ background: var(--azul_escuro); }
.dash .abas button[aria-selected="true"]{ background: var(--laranja); color: var(--azul); }
.dash .nota{ color: var(--suave); font-size: 13px; margin-top: 8px; }

/* gráficos */
.dash .graf{ position: relative; }
.dash .graf svg{ display: block; width: 100%; height: auto; overflow: visible; }
.dash .graf text{ font: 12px Arial, sans-serif; fill: var(--suave); }
.dash .graf .cross{ stroke: var(--azul); stroke-width: 1; stroke-dasharray: 3 3; display: none; pointer-events: none; }
.dash .tip{
    position: absolute; top: 8px; display: none; pointer-events: none; z-index: 2; min-width: 150px;
    background: var(--azul); color: #ffffff; padding: 8px 10px; border-radius: 2px; font-size: 13px; line-height: 1.35;
}
.dash .tip b{ display: block; margin-bottom: 4px; color: var(--laranja); }
.dash .tip div{ display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.dash .tip div b{ color: #ffffff; }
.dash .tip span.n{ display: inline-flex; align-items: center; gap: 6px; }
.dash .tip i{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dash .minis{ display: grid; gap: 22px 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.dash .mini h3{ font-size: 15px; line-height: 1.1; color: var(--azul); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.dash .mini h3 i{ width: 10px; height: 10px; border-radius: 50%; background: var(--cor); }

/* pontos de atenção */
.dash .atencao{ list-style: none; margin: 0; padding: 0; display: grid; }
.dash .atencao li{ display: grid; grid-template-columns: 6px 92px 120px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--grade); align-items: baseline; }
.dash .atencao li:first-child{ border-top: 0; }
.dash .atencao .barra{ align-self: stretch; background: var(--nivel); border-radius: 1px; }
.dash .atencao .dia{ font-variant-numeric: tabular-nums; font-weight: bold; }
.dash .atencao .med{ font-weight: bold; color: var(--azul); }
@media (max-width: 640px){
    .dash .atencao li{ grid-template-columns: 6px 1fr; }
    .dash .atencao .dia, .dash .atencao .med, .dash .atencao .txt{ grid-column: 2; }
}

/* tabela */
.dash .rolagem{ overflow-x: auto; }
.dash table{ border-collapse: collapse; width: 100%; min-width: 760px; font-size: 15px; font-variant-numeric: tabular-nums; }
.dash th, .dash td{ padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--grade); white-space: nowrap; }
.dash th{ font-size: 13px; color: var(--azul); background: var(--fundo); border-bottom: var(--regua) solid var(--azul); position: sticky; top: 0; }
.dash th:first-child, .dash td:first-child, .dash th:nth-child(2), .dash td:nth-child(2), .dash th:last-child, .dash td:last-child{ text-align: left; }
.dash td.sit{ display: flex; align-items: center; gap: 8px; }
.dash td.sit i{ width: 8px; height: 8px; border-radius: 50%; background: var(--nivel); flex: none; }
.dash .botoes{ display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--grade); }
.dash .botao{
    background-color: var(--azul); color: var(--laranja); border: 0; border-radius: 2px;
    padding: 9px 16px; min-height: 40px; font-weight: bold; cursor: pointer; transition: background-color 0.3s;
}
.dash .botao:hover{ background-color: var(--azul_escuro); }
.dash details{ color: var(--suave); font-size: 13.5px; max-width: 78ch; }
.dash details summary{ cursor: pointer; font-weight: bold; color: var(--azul); }
.dash details p{ margin-top: 6px; }