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


/* =======================
PADRÃO DE CORES
======================= */
:root {
  --azul: #2596be;
  --borda: #2596be;
  --azul-escuro: #094963;
  --cinza-borda: #e5e7eb;
  --cinza-clarinho: #f3f4f6;
  --texto: #111827;
  --texto-sec: #6b7280;
  --alerta: red;
  --card: white;
  --salvar: #198754;
  --voltar: #ffc107;
  --azul_fraco: #2595be73;
  --topo_tabela: #2595be73; 
}
/* =======================
PADRÃO DE CORES
======================= */


/* =======================
CORPO INICIAL 
======================= */
#galv-mov-msg {
  color: orange;
}
body {
  display: flex;           /* menu + conteúdo lado a lado */
  align-items: stretch;
  color: var(--texto);
  font-family: "Roboto", sans-serif !important;
}

input {
  font-family: "Roboto", sans-serif !important;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  padding-left: 10px;
}

.contador {
  width: 35px;
  height: 15px;

  margin-bottom: 20px;
}

.contador img {
  width: 100%;
  
}


/* desktop: slot do topo escondido */
.slot-contador--topo { display: none; }

/* mobile: slot do topo aparece e fixa na tela */
@media (max-width: 1700px){
  .slot-contador--topo{
    display: block;
    position: fixed;
    top: 105px;
    left: 3px;   /* ou right */
    z-index: 10000;
            background-color: var(--azul-escuro);
        border-radius: 8px;
  }
}

.card {
  border: 1px solid var(--azul) !important;
}




/* estado normal */
.contador img{

  display: block;
}

/* 80%+ (amarelo) */
.contador.is-warn img{
  filter: brightness(0) saturate(100%)
          invert(72%) sepia(92%) saturate(1078%)
          hue-rotate(2deg) brightness(105%) contrast(102%);
}

/* 100%+ (vermelho) */
.contador.is-danger img{
  filter: brightness(0) saturate(100%)
          invert(18%) sepia(88%) saturate(4840%)
          hue-rotate(355deg) brightness(98%) contrast(115%);
}

/* =======================
CORPO INICIAL 
======================= */



/* =======================
PADRÕES
======================= */

h1 {
  font-size: 18px;
}

.conteudo {
  padding: 45px;
  width: 100%;
}

textarea {
  font-family: "Roboto", sans-serif !important;
}

.btn{
  padding: 10px !important;
  border-radius: 8px;
  border: none !important;
  font-weight: 600;
  cursor: pointer;
  background-color: #187ca4 !important;
  color: white !important;
  font-size: 12px;
}

button {
  cursor: pointer;
}



h1 {
  font-weight: 700;
}

h3 {

    font-weight: 700 !important;
}


.required-asterisk {
  color: var(--alerta);
}

.mensagem {
  font-weight: 600;
  margin-top: 5px;
  transition: opacity .25s ease;
}

.err {
  color: var(--alerta);
}
.mensagem.ok  { color:#065f46; }

.page-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

#btn-recarregar {
  background-color: var(--azul);
  color: white;
}

#btn-voltar {
  background-color: var(--voltar);
  color: black;
}


  .card {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  box-shadow: none !important;
}


/* =======================
PADRÕES
======================= */





/* =======================
INDEX
======================= */
.menu {
  width: 20vw;
  min-height: 100vh;
  background-color: var(--azul-escuro);
  color: white;
  font-weight: 400;
  padding: 10px;
}


@media screen and (max-width: 1830px){
  .menu {
    width: 15vw;
  }
}


:root{
  --menuW: 280px;  /* largura do menu */
}

/* estado normal (telas grandes): menu aparece */
.menu{
  width: var(--menuW);
}

/* botão da flecha (some em telas grandes por padrão) */
.menu-toggle{
  display:none;
}

/* ===== quando a tela ficar <= 1740px ===== */
@media screen and (max-width: 1700px){

  /* menu vira "overlay" e fica escondido à esquerda */
  .menu{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--menuW);
    z-index: 9999;                 /* sobre qualquer coisa */
    transform: translateX(calc(-1 * var(--menuW)));
    transition: transform .22s ease;
  }

  /* quando abrir */
  .menu.open{
    transform: translateX(0);
  }

  /* seta colada na esquerda, sempre visível */
  .menu-toggle{
    display: inline-flex;
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 10000;                /* acima do menu */
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--azul-escuro);
    background: var(--azul-escuro);
    cursor: pointer;
    user-select: none;
    color: white;
  }

  /* quando menu abrir, muda a flecha */
  .menu-toggle.is-open{
    left: calc(var(--menuW) + 8px); /* fica ao lado do menu aberto (opcional) */
  }
}

 .menu-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    z-index: 9998;       /* abaixo do menu (9999) e abaixo do botão (10000) */
  }


.obs-line {
  display: flex;
  gap: 5px;
}


.form-control {
  height: 35px;
    padding: 0 10px;
    border: 1px solid #187ca4;
    border-radius: 8px;
    outline: none;
}

#btn-contadores {
  background-color: var(--azul-escuro);
  border: none;
  width: 30px;
  margin-top: 40px;

  
}

#btn-contadores img {
  width: 30px;
  height: 30px;
}


.menu-head {
  margin-bottom: 50px;
}

.sub_menu {
  display: flex;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
}

.ico {
  width: 30px;
}

.sub_menu img {
  width: 20px;
}
.sub_menu p {
  width: 80%;
}

.flecha {
  width: 30px;
}

.notif-bell {
  position: relative;
}


.badge-dot {
  position: absolute;
  top: -2px;          
  right: -2px;       
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dc2626;   
  display: none;
}

.notif-bell.has-alert .badge-dot {
  display: inline-block;
}








/* =======================
INDEX
======================= */


/* =======================
CADASTRO HOME
======================= */
#btn-cadastro-cliente, #btn-consulta-cliente {
  background-color: var(--azul);
  color: white;
  transition: all ease 0.5s;
}

#btn-cadastro-cliente:hover, #btn-consulta-cliente:hover {
  background-color: var(--azul-escuro);
}
/* =======================
CADASTRO HOME
======================= */


/* =======================
CLIENTE CONSULTA
======================= */


.tipo-pessoa label{
  display: inline-flex;
  align-items: center;
  gap: 5px;           /* espaço entre o radio e o texto */
  cursor: pointer;
  margin-right: 10px;
}



.tipo-pessoa input[type="radio"]{
  margin: 0;          /* remove o margin padrão que costuma desalinha */
}





/* =======================
CLIENTE CONSULTA
======================= */








/* =======================
ROTINA HOME
======================= */

#btn-rotina-cadastro, #btn-rotina-consulta {
  background-color: var(--azul);
  color: white;
}


/* =======================
ROTINA HOME
======================= */



.info {
  background-image: url(/img/info.svg);
  background-position: center;
  background-size: 70%;
  
  background-repeat: no-repeat;
  height: 32px;
  width: 30px;
  background-color: #094963;
}

.linha_modal_pesos {
  margin-top: 10px;
  margin-bottom: 20px;
}

.peso-galv {
  border-left:4px solid #ffb648;
  
  background-color: #ffb6481c !important;
}

.flecha-esquerda {
  width: 5px;
}

.tabela tbody td {

  border-bottom: 2px solid rgba(63, 63, 63, 0.158);
}

.banho-x {
  line-height: 1;
}

.banho-retrabalho {
  background-color: rgba(255, 0, 0, 0.13);
}


/* base: quando NÃO está aberto, ele não existe para a tela/cliques */
.exp-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
}

/* quando abre, aí sim aparece */
.exp-modal.is-open{
  display: block;
}

.badge-grupo{
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  border-radius:10px;
  border:1px solid #999;
  color:#333;
  background:#f2f2f2;
}


.hidden { display: none !important; }





.op-tags {
  margin-top: 3px;
  
}

.tag-conserto {
  background: #ff2b2b;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
  font-size: 10px;
  font-weight: 600;
}

.tag-assist {
  background: #eeff01;
  padding: 2px 6px;
  border-radius: 4px;
}
.op-numero {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}



.inline-form {
  display: flex;
  width: 100%;
  gap: 20px;

}

.inline-form{
  display:flex;
  align-items:center;
  gap: 7px;
  flex-wrap:wrap;              /* pode quebrar a “linha” geral, mas… */
}


.inline-form label{
  display:flex;                /* …dentro do label NÃO quebra */
  align-items:center;
  gap:8px;
  white-space:nowrap;          /* impede “Tanque” sozinho em cima */
}

.inline-form .form-control{
  min-width:180px;             /* garante espaço pro select/input */
}

.inline-form .btns{
  margin-left:auto;            /* empurra botões pro canto */
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;              /* pode quebrar só os botões */
}





.op-pai-mini{
  margin-top: 2px;
  line-height: 1.1;
  color: #094963;
}


.cnt-ops, .cnt-grupos {
  display: none;
}

.entrega-card__obs {
  background-color: rgba(255, 0, 0, 0.185);
  margin-top: 5px;
  font-weight: 500;
}


.grade_entrega {
  border-radius: 10px;
  border: 1px solid var(--azul);
  padding: 10px;
}
.grade_entrega h1 {
  margin-bottom: 10px;
}

#observacao-entrega {
  width: 100%;
  height: 100px;
}

.adm-op__obs-wrap {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.adm-op__obs-item {
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fafafa;
}

.adm-op__obs-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 6px;
}

.adm-op__obs-text {
  font-size: 14px;
  color: #222;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
  min-height: 18px;
}

.grupo-checkboxes {
  display: flex;
  gap: 30px;
}