:root{
    --cortextosbasicos: black;
}
*{
    box-sizing: border-box;

}
.cabecalho{
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    font-size: x-large;

}
.formulario{
    margin-top: 15px;
}

.titulo-fazenda{
    display: flex;
    align-items: center;
}



.botoes-pivo{
    display: grid;
    gap: 50px;
    z-index: 5;
}

.logo-cabecalho{
    margin: 10px;
}
.perfil{
    margin: 10px;
}
html{
    font-family:  'Arial Rounded MT Bold' , Arial;
}
body{
    font-family:  'Arial Rounded MT Bold' , Arial;
    text-decoration: none;
    color: var(--cortextosbasicos);
    border-left: 20px;

}

.lista-pivos{

    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 50px;
}
.nome-fazenda{
    margin-left: 200px;
}
.lista-fazendas{
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 90%;
    margin: auto;
}

.pivo{
    text-decoration: none;
    color: var(--cortextosbasicos);
    border-radius: 20px;

}
.imagem-pivo{
    margin: 5px;
    width: 60vh;
    height: 60vh;
    object-fit: cover;
}
.estado-pivo{


}
.barra-contato{
    margin-top: 10px;
    background-color: lightgrey;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.links-contato{
    margin: 10px;
}
.rodape{
    height: 100px;
    background-color: grey;
    text-align: center;
    gap: 10px;
}

.mapa-pivo{

}
.img-inicio{
    width: 100%;
    margin: -10px 0 0 0;

}
.tela-inicial{
    justify-content: space-around;
    align-items: center;
    display: flex;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1; /* Fica abaixo da nav */
}




.nav-home {
    position: absolute; /* Permite que a nav fique sobre o conteúdo */
    top: 10px;
    width: 99%;
    height: 80px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(150,150,150, 0.5); /* Azul com 50% de opacidade */
    z-index: 10; /* Fica acima do conteúdo */
    box-sizing: border-box;
    border-radius: 20px;
}





.mapa-quadrado {
    position: relative; /* Para que os elementos filhos absolutos fiquem dentro deste contêiner */
    width: 600px;
    height: 600px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9); /* Sombra uniforme ao redor */
    margin: auto;
}

.mapa-pivo {

    width: 600px;
    height: 600px;
    position: absolute; /* Mantém o mapa no fundo */
    top: 0%;
    left: 0%;
    z-index: 1; /* Mapa abaixo */
    border-radius: 20px;
}

.circulo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* ajuste o tamanho conforme necessário */
    height: 90%; /* ajuste o tamanho conforme necessário */
    border-radius: 50%;
    z-index: 2;
}

.circulo-pivo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* ajuste o tamanho conforme necessário */
    height: 90%; /* ajuste o tamanho conforme necessário */
    z-index: 2;
}

.irrigando {
    background-color: rgba(0, 0, 255, 0.5); /* Cor do círculo quando está irrigando */
}

.parado {
    background-color: rgba(255,255,255, 0.5); /* Cor do círculo quando está parado */
}

.emergencia {
    background-color: rgba(255, 0, 0, 0.5); /* Cor do círculo quando está em estado de emergência */
}

.seco {
    background-color: rgba(0, 255, 0, 0.5); /* Cor do círculo quando está seco */
}

.circulo::after {
    content: '';
    position: absolute;
    top: 50%; /* Posicionamento vertical no centro */
    left: 50%; /* Posicionamento horizontal no centro */
    width: calc(100% / 2); /* Define o comprimento da linha (50% do círculo) */
    height: 1px; /* Define a espessura da linha */
    background-color: black; /* Cor da linha */
    z-index: 3; /* Certifique-se de que a linha esteja atrás do círculo */
    transform-origin: 0% 0%; /* Define o ponto de origem da transformação (no canto superior esquerdo) */

}



.velocidade{
    position: absolute;
    width: 50%;
    height: 50%;
    justify-content: center;
    align-items: center;

}
/* Estilo para o popup modal */
.modal {
        display: none;
        position: fixed;
        z-index: 3;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
}


.modal-content {
    background-color: white;
    margin: 15% auto; /* Posiciona o conteúdo no centropaine */
    padding: 0px;

    width: 70%; /* Largura do modal */
    height: 50%;
    border-radius: 50px; /* Bordas arredondadas para suavizar o design */
    text-align: center;

}
.frame{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50px;

}
/* Centraliza o texto de forma geral dentro do conteúdo */
.modal-content p {
    text-align: center; /* Garante que os textos dentro do modal sejam centralizados */
    margin: 10px 0;
}

.btn-percent{
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border-radius: 36px;
    align-items: center;
	width: 396px;
    height: 72px;
	justify-content: space-around;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); /* Sombra uniforme ao redor */
    display: flex;

}



.velocidade-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    text-align: center;
    cursor: pointer;
    font-size: 24px;

}

.body-popup{
    font-family: Arial, sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.destinos{
    position: relative;
    cursor: pointer;
    display: flex;
    gap: 30px;
}

.tpdestino-display{
    position: relative;
    height: 40px;
    width:  110px;
    border: none;
    text-align: center;
    cursor: pointer;
    font-size: 24px;
}

/* banner maior e mais centralizado */
.pressurizando-banner{
  position: absolute;
  left: 50%;
  top: 70%;                     /* ~mais perto do meio; ajuste 55–65% ao seu gosto */
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 16px;

  min-width: 500px;             /* aumenta o tamanho mínimo */
  max-width: calc(100% - 15px); /* respeita bordas do mapa no mobile */
  padding: 14px 18px;           /* mais “corpo” */
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 10px 28px rgba(0,0,0,.20);
  z-index: 5;
}

/* tipografia um pouco maior */
.pressurizando-info strong{
  font-size: 48px;
  color: #0D47A1;
}
.pressurizando-info .sub{
  font-size: 40px;
  color: #fa4747;
}

.contador-pressao{
    font-size: 40px;
  color: black;
}

.btn-cancelar{
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid #b91c1c;        /* borda mais “viva” */
  background: #ff3b30;               /* vermelho bem visível */
  color: #fff;
  font: 20px "Arial Rounded MT Bold","Arial",sans-serif;
  box-shadow: 0 4px 12px rgba(185,28,28,.35);
  transition: filter .12s ease, box-shadow .12s ease, transform .12s ease;
  cursor: pointer;
}

.btn-cancelar:hover{
  filter: brightness(1.08);          /* destaca no hover */
  box-shadow: 0 8px 18px rgba(185,28,28,.45);
  transform: translateY(-1px);
}

.btn-cancelar:active{
  transform: translateY(0);
}



.img-enviar{
    position: relative;
    cursor: pointer;
}

.btn-enviar{
    /* mantém absolute + translate */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0); /* força render no iOS */
    z-index: 1;

    /* evita estilo nativo do iOS e garante cor do texto */
    appearance: none;
    -webkit-appearance: none;
    color: #111;
    -webkit-text-fill-color: #111;

    /* melhora antialias/fonte no Safari iOS */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    border: none;
    background: none;
    font-size: 25px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 300px;
    height: 50px;
}


.cliente{
    max-width: 80%;
    margin: auto;
}
.close {
    color: #fff;

    font-size: 60px;
    font-weight: bold;

    position: absolute;
    top: 10px;
    right: 15px;

    cursor: pointer;
}




.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fazenda-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    background-color: white;
}

.confirm-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    width: 50%;
    margin-top: 20px;
}

.confirm-button:hover {
    background-color: #45a049;
}
.slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 8px;
    background: #999;
    outline: none;
    opacity: 0.9;
    transition: opacity 0.2s;
}
.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
}

.value-box {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 50px;
  max-width: 600px;

  /* sombra padrão (cinza) */
  box-shadow:
    inset 5px 5px 20px rgba(0,0,0,0.2),
    inset -5px -5px 20px rgba(0,0,0,0.2),
    inset 5px -5px 20px rgba(0,0,0,0.2),
    inset -5px 5px 20px rgba(0,0,0,0.2);
}

/* quando for emergência, troca a sombra para vermelha */
.value-box.is-emergency {
  box-shadow:
    inset 5px 5px 20px rgba(255,0,0,1),
    inset -5px -5px 20px rgba(255,0,0,1),
    inset 5px -5px 20px rgba(255,0,0,1),
    inset -5px 5px 20px rgba(255,0,0,1);
}

.value-box span {
  /* torna o span um bloco flexível dentro da .value-box */

  display: block;
  width: 100%;
    text-align: center;

  white-space: pre-wrap;
    word-break: break-word;

  font-size: 30px;
  font-weight: bold;
}

.popup {
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;


}
.title {
    font-size: 40px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}
.buttondestino-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.button-destino {
    background-color: #d3d3d3;
    padding: 12px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: 0.3s;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.button-destino:hover {
    background-color: #bfbfbf;
}

.selected {
    background-color: #007bff;
    color: white;
}

/* Estilo para o botão do dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #0023C9; /* Azul escuro */
    color: #F8E336; /* Amarelo mostarda */
    font-size: 20px;
    padding: 15px 16px; /* Mesma altura e largura dos botões da nav */
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    margin: 0; /* Remove margens extras */
}
.usuario-label{
    color: #F8E336; /* Amarelo mostarda */
    font-size: 25px;
}
/* O conteúdo do dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 20;
    border-radius: 4px; /* Bordas arredondadas */
}

.dropdown-content a {
    color: #0023C9; /* Azul escuro para os links */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: #f1f1f1; /* Cor de fundo padrão */
    border-bottom: 1px solid #ddd; /* Linha divisória entre os links */
}

.dropdown-content a:hover {
    background-color: #F8E336; /* Fundo amarelo ao passar o mouse */
    color: #0023C9; /* Texto azul escuro ao passar o mouse */
}

/* Mostrar o menu suspenso quando o usuário passar o mouse sobre o botão */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Estilo para o botão do dropdown quando o menu estiver visível */
.dropdown:hover .dropbtn {
    background-color: #F8E336; /* Fundo amarelo mostarda ao passar o mouse */
    color: #0023C9; /* Texto azul marinho ao passar o mouse */
}


.nav-interno {
    background-color: #002147; /* Azul marinho */
    padding: 15px;
    display: flex;
    justify-content: center; /* Centraliza o container interno */
    align-items: center;
    height: 72px;
    width: 100%; /* Garante largura total */
    box-sizing: border-box;
    border-radius: 20px;
}


.grupo-nav{
    display: flex;
    column-gap: 15px;
}

.rotulo-icones{
    font-family: 'Arial Rounded MT Bold' , Arial;
    font-size: 16px;
      font-weight: bold;

}
.conj-icones{
    align-items: center;
    display: flex;
    gap: 8px;
}
.links-nav {
    width: 90%; /* Limita a 80% da largura total */
    display: flex;
    justify-content: space-between; /* Espaça os itens dentro da links-nav */
    align-items: center;
}

.btn-nav {
    background-color: #0023C9; /* Azul escuro */
    color: #F8E336; /* Amarelo mostarda */
    text-decoration: none;
    padding: 15px 16px;
    font-size: 20px;
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    margin: 0; /* Remove margens extras */
    border-radius: 20px;
}

.btn-nav:hover {
    background-color: #F8E336; /* Fundo amarelo mostarda ao passar o mouse */
    color: #0023C9; /* Texto azul marinho ao passar o mouse */
}
.btn-nav-home {
    background-color: #0023C9; /* Azul escuro */
    color: #F8E336; /* Amarelo mostarda */
    text-decoration: none;
    padding: 15px 16px;
    font-size: 20px;
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    margin: 0; /* Remove margens extras */
    border-radius: 20px;

}

.btn-nav-home:hover {
    background-color: #F8E336; /* Fundo amarelo mostarda ao passar o mouse */
    color: #0023C9; /* Texto azul marinho ao passar o mouse */
}
/* Estilo para o container da navbar */
nav .navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.navbar-container .dropdown {
    margin-left: auto; /* Garante que o dropdown fique no final da navbar */
}


/* Estiliza o corpo da página */
.body-home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Centraliza na tela inteira */
    background: linear-gradient(135deg, #003366, #FFD700); /* Gradiente azul para amarelo */
    font-family: 'Arial Rounded MT Bold' , Arial;
    margin: 0;
}

/* Estiliza o formulário */
.login {
    background: rgba(255, 255, 255, 0.9); /* Fundo branco levemente transparente */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    width: 300px; /* Largura fixa do formulário */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estiliza os rótulos (labels) */
.login label {
    font-weight: bold;
    color: #003366; /* Azul escuro */
    margin-top: 10px;
    align-self: flex-start;
}

/* Estiliza os campos de entrada */
.login input {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #003366;
    border-radius: 5px;
    font-size: 14px;
}

/* Estiliza o botão */
.login input[type="submit"], .login button {
    width: 100%;
    padding: 12px;
    background: #003366; /* Azul escuro */
    color: #FFD700; /* Amarelo dourado */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
    transition: 0.3s;
}

.login input[type="submit"]:hover, .login button:hover {
    background: #FFD700; /* Amarelo dourado */
    color: #003366; /* Azul escuro */
}


.painel-dir{
    display: grid;
    gap: 20px;


}
.painel-esq{
    display: grid;
    gap: 20px;

}

.gerenciar-pivo{
    max-width: 80%;
    display: flex;
    gap: 200px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;

}

.estado-box {
    margin-top: 20px;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 40px;
    display: grid;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    box-shadow:
        inset 5px 5px 20px rgba(0, 0, 0, 0.2),     /* canto inferior direito */
        inset -5px -5px 20px rgba(0, 0, 0, 0.2),   /* canto superior esquerdo */
        inset 5px -5px 20px rgba(0, 0, 0, 0.2),    /* canto superior direito */
        inset -5px 5px 20px rgba(0, 0, 0, 0.2);    /* canto inferior esquerdo */
    max-width: 800px;
}


/* quando for emergência, sombra vermelha (mesma lógica do value-box) */
.estado-box.is-emergency {
  box-shadow:
    inset 5px 5px 20px rgba(255,0,0,1),
    inset -5px -5px 20px rgba(255,0,0,1),
    inset 5px -5px 20px rgba(255,0,0,1),
    inset -5px 5px 20px rgba(255,0,0,1);
}

.estado-box p{
    /* torna o span um bloco flexível dentro da .value-box */
  display: block;
  width: 100%;
    text-align: center;

  white-space: pre-wrap;
    word-break: break-word;


  font-weight: bold;
}

/* Estilo para o link flutuante (botão) */
.botao-flutuante {
    position: fixed;
    bottom: 20px;  /* Distância do fundo da tela */
    right: 20px;   /* Distância da direita da tela */
    background-color: #4CAF50; /* Cor de fundo do botão */
    color: white;   /* Cor do texto */
    padding: 15px 20px;
    border-radius: 50px;  /* Forma arredondada */
    text-align: center;
    font-size: 16px;
    text-decoration: none;  /* Remove o sublinhado */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Sombra suave */
    z-index: 1000;  /* Garante que o botão fique sobre outros elementos */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transição suave */
}

/* Efeito de hover: botão aumenta de tamanho */
.botao-flutuante:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

.btn-switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 40px;
}

.btn-switch input {
    width: 0;
    height: 0;
}

.btn-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 30px;
    display: flex;
    align-items: center;
	width: 396px;
	height: 60px;
	justify-content: space-around;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9); /* Sombra uniforme ao redor */

}

.btn-slider .btn-text {
    font-family:  'Arial Rounded MT Bold' , Arial;
    font-size: 20px;
    font-weight: bold;
    transition: 0.4s;


}

.btn-slider .desligado {
	z-index: 2;
	color: red; /* Cor do texto "DESLIGADO" quando desligado */
	text-shadow:
        0 0 1px red, /* Efeito neon azul */
        0 0 1px red,
        0 0 1px red,
        0 0 1px red;
}

.btn-slider .desativado {
	z-index: 2;
	color: #179CD9; /* Cor do texto "desativado" quando desligado */
	text-shadow:
        0 0 1px #179CD9, /* Efeito neon azul */
        0 0 1px #179CD9,
        0 0 1px #179CD9,
        0 0 1px #179CD9;
}

.btn-slider .ligado {

	z-index: 0;
	color: #7B757B; /* Cor do texto "LIGADO" quando desligado */
	text-shadow:
        0 0 1px #7B757B, /* Efeito neon azul */
        0 0 1px #7B757B,
        0 0 1px #7B757B,
        0 0 1px #7B757B;
}

.btn-slider .ativado {

	z-index: 0;
	color: #7B757B; /* Cor do texto "LIGADO" quando desligado */
	text-shadow:
        0 0 1px #7B757B, /* Efeito neon azul */
        0 0 1px #7B757B,
        0 0 1px #7B757B,
        0 0 1px #7B757B;
}

input:checked + .btn-slider {
    background-color: #ccc;
}

input:checked + .btn-slider .desligado {
	z-index: 0;
    color: #7B757B; /* Cor do texto "DESLIGADO" quando ligado */
	text-shadow:
        0 0 1px #7B757B, /* Efeito neon azul */
        0 0 1px #7B757B,
        0 0 1px #7B757B,
        0 0 1px #7B757B;
}

input:checked + .btn-slider .desativado {
	z-index: 0;
    color: #7B757B; /* Cor do texto "DESLIGADO" quando ligado */
	text-shadow:
        0 0 1px #7B757B, /* Efeito neon azul */
        0 0 1px #7B757B,
        0 0 1px #7B757B,
        0 0 1px #7B757B;
}



input:checked + .btn-slider .ligado {
	z-index: 2;
	color: green; /* Cor do texto "LIGADO" quando ligado */
	text-shadow:
        0 0 1px green, /* Efeito neon azul */
        0 0 1px green,
        0 0 1px green,
        0 0 1px green;

}

input:checked + .btn-slider .ativado {
	z-index: 2;
	color: #179CD9; /* Cor do texto "LIGADO" quando ligado */
	text-shadow:
        0 0 1px #179CD9, /* Efeito neon azul */
        0 0 1px #179CD9,
        0 0 1px #179CD9,
        0 0 1px #179CD9;

}

.btn-slider:before {
    position: absolute;
    content: "";
    height: 72px;
    width: 222px;
    left: -1px;
    bottom: -5px;
    background-color: white;
    transition: 0.4s;
    border-radius: 36px;
	z-index: 1;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); /* Sombra uniforme ao redor */

}

input:checked + .btn-slider:before {
    transform: translateX(180px);
}

/* coloca isso no final do seu style.css */

#popup-sucesso {
  position: fixed;
  inset: 0;                  /* equivale a top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.4);
  display: flex !important;  /* garante que vai sobrescrever se tiver outro display */
  align-items: center;       /* centraliza vertical */
  justify-content: center;   /* centraliza horizontal */
  z-index: 9999;

}

#popup-sucesso .popup-content-alerta {
  margin: 0;                 /* tira qualquer margem que empurre pro canto */
  padding: 24px 32px;
  border-radius: 10px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);

}
#popup-sucesso .popup-content-alerta h2 {
    color: #179CD9;
}

.btn-destino{
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border-radius: 36px;
    align-items: center;
	width: 180px;
    height: 72px;
	justify-content: space-around;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); /* Sombra uniforme ao redor */
    display: flex;

}
.btn-destino p{
    position: relative;
    align-items: center;
    display: flex;
    margin-left: -20px;
    font-size: 20px;


}

.mostrador {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 30px 30px;
        border-radius: 60px;
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        z-index: 3;
    }
/* Modal exclusivo para "Aguardando Resposta" */
.modal-aguardando {
    display: none; /* Oculto no início */
    position: fixed;
    z-index: 9999; /* Sempre na frente */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
}

/* Conteúdo do modal específico */
.modal-aguardando-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Texto dentro do modal específico */
.modal-aguardando-text {
    font-size: 20px;
    margin-bottom: 30px;
    font-family: 'Arial Rounded MT Bold' , Arial;
    font-weight: bold;

}

/* Loader de carregamento exclusivo */
.loader-aguardando {
    border: 4px solid #f3f3f3; /* Cor do fundo */
    border-top: 4px solid #3498db; /* Cor do topo (principal) */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-aguardando 1s linear infinite;
    margin: 20px auto 0; /* Centraliza horizontalmente */

}

/* Animação para o loader específico */
@keyframes spin-aguardando {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 16px;
}

.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}


.popup-overlay-alerta {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.popup-content-alerta {
  background-color: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.popup-content-alerta h2 {
  color: #b30000;
  margin-bottom: 10px;
    font-family: 'Arial Rounded MT Bold' , Arial;
    font-weight: bold;
}

.popup-content-alerta p {
    font-family: 'Arial Rounded MT Bold' , Arial;
    font-weight: bold;
}

.popup-content-alerta button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #b30000;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
    font-family: 'Arial Rounded MT Bold' , Arial;
    font-weight: bold;
}

.popup-content-alerta button:hover {
  background-color: #800000;
}
 .display-pivos {
     display: flex;

 }

.painel-mapa{
    margin-left: 10px;
    z-index: 10;
}

 .desligado-perfil {
    z-index: 2;
    color: red;
    text-shadow:
        0 0 1px red,
        0 0 1px red,
        0 0 1px red,
        0 0 1px red;

}
.ligado-perfil {
    z-index: 2;
	color: green; /* Cor do texto "LIGADO" quando ligado */
	text-shadow:
        0 0 1px green, /* Efeito neon azul */
        0 0 1px green,
        0 0 1px green,
        0 0 1px green;
}

.botao-estilizado {
      height: 60px;
      width: 185px;
      border-radius: 30px;
      background-color: white;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: bold;

    }

.status-perfil {
	z-index: 2;
	color: #179CD9; /* Cor do texto "desativado" quando desligado */
	text-shadow:
        0 0 1px #179CD9, /* Efeito neon azul */
        0 0 1px #179CD9,
        0 0 1px #179CD9,
        0 0 1px #179CD9;
}
.botoes-pivoperfil{
    margin-top: 15px;
    display: grid;
    justify-content: space-between;
    z-index: 5;
}

.texto-perfil {
    z-index: 2;
    color: black;
}
 .barra-icones{
     display: flex;
     justify-content: space-around;
 }

 /* empurra o botão para a direita */
.push-right{ margin-left:auto; }

.badge-emergencia{
  display:flex;
  align-items:center;
  justify-content:center;

  /* mesmas dimensões do .btn-percent */
  width: 396px;
  height: 72px;
  border-radius: 36px;

  /* aparência */
  background:#e7672b;
  color:#fff;
  font-size: 24px;
  box-shadow: 0 0 10px rgba(0,0,0,0.9); /* igual ao .btn-percent */
  border:none;
  cursor:default;
}
.badge-emergencia:disabled{ opacity:1; }


 .img-logo{
      display: flex;
     justify-content: space-around;
 }
 .texto-bottom{
     font-family: 'Arial Rounded MT Bold' , Arial;
     color: #fff;
 }
 .form-add{
     display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 40px auto;
    padding: 30px;
    border-radius: 15px;
    background-color: #f9f9f9;
    gap: 20px;
    font-family: 'Arial Rounded MT Bold', Arial;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
     font-weight: bold;
 }

 .form-group {
    display: flex;
    flex-direction: column;
}

.form-label {
    margin-bottom: 5px;
    font-size: 16px;
    color: #333;
}

.form-input {
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: border-color 0.3s;
}

.form-input:focus {
    border-color: #3498db;
    outline: none;
}
.conteiner-send {
    display: flex;
    justify-content: center;
}

.btn-send {
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    background-color: #3498db;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-send:hover {
    background-color: #2980b9;
}
.checkbox-group {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: 10px;
}

.form-checkbox-label {
    display: flex;
    align-items: center;
    font-size: 15px;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

/* Estilo opcional para o checkbox em si */
.form-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.flash-overlay {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: auto;
    max-width: 90%;
    text-align: center;
}

.alert {
    padding: 12px 20px;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: fade-in 0.3s ease-in-out;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

@keyframes fade-in {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}



/* ===== Ações da tabela de Pivôs (escopo: #tabela-container) ===== */

/* deixa a célula "Ações" em flex, com espaçamento bonito */
#tabela-container table tbody tr > td:last-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* quebra em telas estreitas */
  gap: 8px;          /* espaço entre botões */
}

/* evita que <a> e <form> quebrem a linha sozinhos */
#tabela-container table tbody tr > td:last-child a {
  display: inline-block;
  text-decoration: none;
}
#tabela-container table tbody tr > td:last-child form {
  display: inline-block;
  margin: 0;
}

/* estiliza todos os botões daquele bloco (inclusive os dentro de <a>) */
#tabela-container table tbody tr > td:last-child button {
  appearance: none;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #222;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* hover/focus */
#tabela-container table tbody tr > td:last-child button:hover {
  background: #f7f7f7;
  border-color: #c7ccd4;
}
#tabela-container table tbody tr > td:last-child button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, .15);
}

/* botão perigoso (Excluir) */
#tabela-container table tbody tr > td:last-child .btn.btn-danger {
  background: #ffeceb;
  border-color: #f4b4b2;
  color: #9b1c1c;
}
#tabela-container table tbody tr > td:last-child .btn.btn-danger:hover {
  background: #ffe0de;
  border-color: #eba3a0;
}

.btn-criar{
    margin-top: 20px;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.checklist li {
  margin: 10px 0;
}

.checklist input[type="checkbox"] {
  accent-color: #2d8fd5; /* azul padrão */
  width: 22px;
  height: 22px;
  cursor: pointer;
  margin-right: 10px;
}

.checklist label {
  font-size: 20px;
  cursor: pointer;
}














 @media (max-width: 1201px) {

   .gerenciar-pivo{
    max-width: 80%;
    display: flex;
    gap: 100px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;

}

     .img-inicio{
    max-width: 95%;
    margin: auto;

}



.painel-esq{
    display: grid;
    gap: 60px;

}

.botoes-pivo{
    display: grid;
    gap: 80px;
    z-index: 5;
    margin-top: 10px;
}

.btn-switch {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 60px;
}

.btn-switch input {
    width: 0;
    height: 0;
}

.btn-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 45px;
    display: flex;
    align-items: center;
	width: 594px;
	height: 90px;
	justify-content: space-around;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9); /* Sombra uniforme ao redor */

}

.btn-slider .btn-text {
    font-family:  'Arial Rounded MT Bold' , Arial;
    font-size: 30px;
    font-weight: bold;
    transition: 0.4s;


}

.btn-slider:before {
    position: absolute;
    content: "";
    height: 108px;
    width: 333px;
    left: -1px;
    bottom: -5px;
    background-color: white;
    transition: 0.4s;
    border-radius: 54px;
	z-index: 1;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); /* Sombra uniforme ao redor */

}

input:checked + .btn-slider:before {
    transform: translateX(270px);
}





.velocidade-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    text-align: center;
    cursor: pointer;
    font-size: 36px;

}
.destinos{
    position: relative;
    cursor: pointer;
    display: flex;
    gap: 45px;
}

.tpdestino-display{
    position: relative;
    height: 60px;
    width:  165px;
    border: none;
    text-align: center;
    cursor: pointer;
    font-size: 36px;


}
     .btn-destino{
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border-radius: 54px;
    align-items: center;
	width: 270px;
    height: 108px;
	justify-content: space-around;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); /* Sombra uniforme ao redor */
    display: flex;

}
.btn-percent{
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border-radius: 54px;
    align-items: center;
	width: 594px;
    height: 108px;
	justify-content: space-around;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); /* Sombra uniforme ao redor */
    display: flex;

}



.velocidade-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    text-align: center;
    cursor: pointer;
    font-size: 36px;

}
.destinos{
    position: relative;
    cursor: pointer;
    display: flex;
    gap: 45px;
}

.tpdestino-display{
    position: relative;
    height: 60px;
    width:  165px;
    border: none;
    text-align: center;
    cursor: pointer;
    font-size: 36px;
}

.btn-destino{
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border-radius: 54px;
    align-items: center;
	width: 270px;
    height: 108px;
	justify-content: space-around;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); /* Sombra uniforme ao redor */
    display: flex;

}
.modal-content {
    width: 90%; /* Largura do modal */

}

.value-box {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 60px;
  display: flex;
  justify-content: center;   /* centra horizontalmente o conteúdo */
  align-items: center;       /* centra verticalmente o conteúdo */
  margin-bottom: 75px;

  max-width: 900px;

}

.value-box span {
  font-size: 45px;

}
.confirm-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 37px;
    cursor: pointer;
    font-size: 27px;
    font-weight: bold;
    width: 74%;
    height: 74px;
    margin-top: 80px;
}

.confirm-button:hover {
    background-color: #45a049;
}
.slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120px;
    margin-bottom: 80px;
}
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 18px;
    border-radius: 12px;
    background: #999;
    outline: none;
    opacity: 0.9;
    transition: opacity 0.2s;
}
.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
}
.buttondestino-container {

    gap: 30px;
}
.button-destino {

    border-radius: 40px;
    font-size: 24px;

    height: 80px;
}


.login {
    width: 90vw;               /* Usa 90% da largura da tela */
    padding: 70px 60px;
    border-radius: 40px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    font-size: 32px;
    gap: 30px;
  }



.bloco-login {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;              /* espaçamento entre label e input */
    margin-bottom: 40px;    /* espaço entre esse bloco e o próximo */
}


  .login label {
    font-size: 40px;
  }

  .login input {
    font-size: 40px;
    padding: 30px;
      border-radius: 40px;
  }

  .login input[type="submit"],
  .login button {
    font-size: 40px;
    padding: 40px;
      border-radius: 40px;
  }

  .body-home {
    padding: 0 10px; /* Evita encostar nas bordas em telas pequenas */
  }

.nav-home {
    height: 120px;
    padding: 15px 30px;
  }

  .links-nav {
    width: 100%;                /* Ocupa toda a largura disponível */
    padding: 0 20px;
    justify-content: space-between;
  }

  .img-logo {
    height: 80px;               /* Aumenta o logo se quiser */
  }

  .btn-nav-home {
    font-size: 40px;            /* Aumenta o tamanho da fonte */
    padding: 20px 30px;         /* Aumenta o tamanho do botão */
    border-radius: 30px;
    background-color: #0023C9; /* Azul escuro */
    color: #F8E336; /* Amarelo mostarda */
    text-decoration: none;
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    margin: 0; /* Remove margens extras */

}

.btn-nav-home:hover {
    background-color: #F8E336; /* Fundo amarelo mostarda ao passar o mouse */
    color: #0023C9; /* Texto azul marinho ao passar o mouse */
}

.pressurizando-banner{


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

  min-width: 590px;             /* aumenta o tamanho mínimo */
  max-width: calc(100% - 5px); /* respeita bordas do mapa no mobile */

}
/* tipografia um pouco maior */
.pressurizando-info strong{
  font-size: 44px;
}
.pressurizando-info .sub{
  font-size: 30px;
}

.btn-cancelar{
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid #b91c1c;        /* borda mais “viva” */
  background: #ff3b30;               /* vermelho bem visível */
  color: #fff;
  font: 36px "Arial Rounded MT Bold","Arial",sans-serif;
  box-shadow: 0 4px 12px rgba(185,28,28,.35);
  transition: filter .12s ease, box-shadow .12s ease, transform .12s ease;
  cursor: pointer;
}

.btn-cancelar:hover{
  filter: brightness(1.08);          /* destaca no hover */
  box-shadow: 0 8px 18px rgba(185,28,28,.45);
  transform: translateY(-1px);
}

.btn-cancelar:active{
  transform: translateY(0);
}




}