.botoes-login {
  display: flex;
  justify-content: center; /* centraliza os botões */
  gap: 12px; /* espaçamento entre eles */
  margin-top: 16px;
  color: #ffffff !important;          /* fonte branca */

}

.botoes-login button {
  flex: 1;
  padding: 10px;
  font-size: 12px;
  cursor: pointer;
}

.botoes-login button {
  width: 120px;
}


  .conteudo-pos-topo {
    display: flex !important;
    flex-direction: column !important;
  }
  
  #formularioCadastrar,
  #formularioCadastro {
    width: 100% !important;
    margin-bottom: 30px !important;
  }

/* ============================================================ RESET BÁSICO ============================================================ */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
/* ============================================================ BODY - ESTILO GERAL ============================================================ */
 body {
     font-family: Arial, Helvetica, sans-serif;
     background-color: #f4f6f9;
     color: #333;
}
/* ============================================================ HEADER (TOPO) ============================================================ */
 .header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
    /* fica acima de tudo */
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #00294B;
     padding: 10px 20px;
     color: #fff;
     height: 60px;
     width: 100%;


     
     

      /* aumenta altura para ocupar o espaço da barra de status (notch) */
  padding-top: env(safe-area-inset-top);
  height: calc(60px + env(safe-area-inset-top));
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
 .logo-container {
     display: flex;
     align-items: center;
}
/* Desktop — centralizar o logo na área de conteúdo */
 @media (min-width: 769px) {
     .logo-container {
         width: auto;
         margin-left: 45px;
        /* 🔁 ajuste fino conforme o alinhamento visual desejado */
         display: flex;
         justify-content: flex-start;
    }
}
 .logo-desktop {
     height: 45px;
     display: block;
}
 .logo-mobile {
     display: none;
}
 .user-info {
    display: flex;
    align-items: center;
    gap: 12px; /* adiciona espaçamento entre nome, foto e botão */
    flex-wrap: wrap; /* ajuda no mobile */
}

/* No desktop, mantém à direita */
 @media (min-width: 769px) {
     .user-info {
         margin-right: 20px;
         
    }
}
.user-photo img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-left: 8px; /* adicionado */
    margin-right: 10px; /* mantido */
}

 .user-text .welcome {
     font-size: 12px;
}
 .user-text .header-title {
     font-size: 18px;
     font-weight: bold;
}
/* ===== BOTÃO LOGOUT ===== */
.logout-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;     /* <- Força a largura natural */
    max-width: 32px;            /* <- Limita o tamanho se necessário */
}


.logout-button img {
    height: 18px;
    width: 18px;
    object-fit: contain;
}




/* Layout base do header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Agrupamento do usuário */
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Bloco de textos (nome + condomínio) */
.user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* “Condomínio selecionado” (fica oculto via JS quando não houver) */
.condominio-atual {
  display: none;            /* o JS liga/desliga */
  font-size: 12px;
  color: #fff;
  margin-top: 4px;
  white-space: nowrap;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

/* Desktop: empurra para a direita */
@media (min-width: 769px) {
  .user-info {
    margin-left: auto;
    justify-content: flex-end;
  }
}

/* Mobile: centraliza o bloco do usuário e aproxima do título/topo */
@media (max-width: 768px) {
  .user-info {
    justify-content: center;
    margin-right: 0;
    margin-top: 6px; /* opcional: dá um respiro abaixo do título */
  }

  /* Se quiser o texto “Condomínio selecionado” um pouco menor no mobile */
  .condominio-atual {
    font-size: 11.5px;
    max-width: 70vw; /* mais espaço no mobile */
  }
}


/* ============================================================ SIDEBAR / MENU LATERAL ============================================================ */
.sidebar {
  background-color: #00294B;
  width: 250px;
  height: calc(100vh - 60px);       /* Desconta o header fixo */
  max-height: calc(100vh - 60px);   /* Garante que não passe do visível */
  position: fixed;
  top: 60px;
  left: 0;
  padding-top: 10px;
  overflow-y: auto;                 /* Ativa a rolagem quando necessário */
  transition: 0.3s;
  z-index: 1001;
  scrollbar-width: thin;            /* Firefox */
}

/* Scrollbar no Chrome (opcional) */
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
  background-color: #00294B;
  border-radius: 3px;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li {
  padding: 15px 20px;
  border-bottom: 1px solid rgb(31, 74, 102);
  color: #fff;
  cursor: pointer;
}

.sidebar ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
}

.sidebar ul li:hover {
  background-color: #005F9E;
}


/* ============================================================ SETAS DOS SUBMENUS ============================================================ */
 .arrow {
     float: right;
     transition: transform 0.3s ease;
}
 .rotate {
     transform: rotate(90deg);
}
 .arrow::before {
     content: "▶";
     font-size: 12px;
}
 .rotate::before {
     content: "▼";
     font-size: 12px;
}
/* ============================================================ SUBMENU ============================================================ */
/* Mantém o azul claro quando submenu está aberto */
 .sidebar ul li.submenu-aberto > a, .sidebar ul li.submenu-aberto {
     background-color: #005F9E !important;
     color: #fff;
}
 .menu-item {
     cursor: pointer;
     position: relative;
     font-size: 12px; /* ajuste conforme necessário, ex: 13px ou 12px */
}
 .submenu {
     list-style: none;
     padding-left: 20px;
     overflow: hidden;
     max-height: 0;
     transition: max-height 0.3s ease, padding 0.3s ease;
}
 .submenu li {
     margin: 5px 0;
}
 .submenu li a {
     background-color: transparent;
     color: white;
     transition: background-color 0.3s;
}
 .submenu li a:hover, .submenu li a:focus, .submenu li a.ativo {
     background-color: #005F9E !important;
    /* azul mais claro */
}
/* Quando submenu está visível, mantém o azul claro */
 .submenu-aberto > a {
     background-color: #005F9E !important;
}
/* ===================== SUB-SUBMENUS DESTACADOS ===================== */
 .submenu .submenu {
     background-color: #005F9E;
    /* ✅ fundo mais escuro para destacar sub-submenus */
     padding-left: 25px;
    /* ✅ leve recuo extra */
     transition: max-height 0.3s ease, padding 0.3s ease;
}
 .submenu .submenu li a {
     color: #fff;
    /* ✅ mantém texto branco mesmo nos sub-submenus */
     font-size: 12px;
}
/* ============================================================ BOTÃO MOBILE (MENU HAMBURGUER) ============================================================ */
 .menu-button {
     display: none;
     background: none;
     border: none;
     margin: 10px;
}
 .menu-button img {
     height: 30px;
}
 .close-menu {
     display: none;
     background: none;
     color: #fff;
     border: none;
     font-size: 20px;
     margin-left: 200px;
}


/* ============================================================ TÍTULOS ============================================================ */
 .conteudo h2 {
     font-size: 20px;
     font-weight: 600;
     color: #00294B;
     border-left: 5px solid #00294B;
     padding-left: 10px;
     margin-bottom: 20px;
}
/* 🔷 Títulos */
 h2, h3, h4 {
     color: #00294B;
     margin-bottom: 12px;
}
/* ============================================================ CONTEÚDO PRINCIPAL ============================================================ */
 .conteudo {
     margin-left: 250px;
     padding: 80px 20px 20px 20px;
    /* 80px de topo para não sobrepor o header */
     transition: margin-left 0.3s;
     box-sizing: border-box;
     position: relative;
     z-index: 1;
}
 .sidebar.active ~ .conteudo {
     margin-left: 60px;
}
/* ============================================================ FORMULÁRIOS (GERAL) ============================================================ */


 .formulario label {
     display: block;
     margin-top: 15px;
     font-weight: bold;
}
 .formulario select, .formulario input[type="number"], .formulario input[type="text"], .formulario input[type="date"], .formulario textarea {
     width: 100%;
     padding: 10px;
     margin-top: 5px;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 12px;
}
 .formulario button {
     margin-top: 20px;
     padding: 10px 20px;
     background-color: #00294B;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
     transition: background-color 0.3s;
}
 .formulario button:hover {
     background-color: #00294B;
}
 .form-check {
     display: flex;
     align-items: center;
     gap: 8px;
}
 .form-check input[type="checkbox"] {
     width: auto;
     margin: 0;
}


.btn-entregue {

  font-size: 12px;
  font-family: inherit;
  color: #ffffff !important; /* Usando !important para garantir que sobreponha outros estilos */

}

.btn-neutro{

  font-size: 12px;
  font-family: inherit;
  color: #ffffff !important; /* Usando !important para garantir que sobreponha outros estilos */

}

/* Botão padrão alinhado à direita após o conteúdo */
.btn-padrao {
  background-color: #00294B;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: inherit;   /* herda do .formulario */
  font-size: inherit;     /* herda do .formulario */
  line-height: inherit;   /* herda do .formulario */
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-width: 200px;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}

 .btn-padrao:hover {
     background-color: #00294B;
}
 .formulario .btn-padrao {
     display: block;
     margin-left: auto;
     margin-top: 12px;
}
/* 🔷 Estilo para cards ou históricos */
 .card-historico {
     background: #fff;
     border-radius: 8px;
     padding: 16px;
     box-shadow: 0 2px 6px rgba(0,0,0,0.06);
     margin-top: 20px;
}
 .campo-senha {
     position: relative;
     width: 100%;
}
 .campo-senha input {
     width: 100%;
     box-sizing: border-box;
     padding-right: 40px;
    /* espaço pro ícone */
     height: 40px;
    /* igual aos demais */
     font-size: 12px;
}
 .icone-senha {
     position: absolute;
     top: 50%;
     right: 10px;
     transform: translateY(-50%);
     cursor: pointer;
     font-size: 16px;
     color: #666;
     user-select: none;
}


 .btn-web {
     align-self: flex-end;
     padding: 6px 12px;
     font-size: 12px;
}
/* ============================================================ LOGIN (PÁGINA DE LOGIN) ============================================================ */
 .login-container {
     width: 90%;
     max-width: 400px;
     margin: 100px auto;
     text-align: center;
}
 .login-container img.logo {
     width: 150px;
     margin-bottom: 20px;
}
 .login-container select, .login-container input[type="password"] {
     width: 100%;
     padding: 10px;
     margin: 10px 0;
     border-radius: 5px;
     border: 1px solid #ccc;
}
 .login-container button {
     width: 100%;
     padding: 10px 20px;
     background-color: #00294B;
     color: #fff;
     border: none;
     border-radius: 5px;
     cursor: pointer;
}
 .login-container button:hover {
     background-color: #00294B;
}
/* ============================================================ AJUSTE VISUAL DO SELECT2 ============================================================ */
/* Select2 - Aparência geral */
 .select2-container--default .select2-selection--single {
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 6px;
     padding: 6px 12px;
     height: 40px;
     font-size: 12px;
     transition: border-color 0.3s;
}
 .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--single:hover {
     border-color: #00294B;
}
/* Texto visível dentro do select */
 .select2-container--default .select2-selection__rendered {
     color: #333;
     line-height: 38px;
     padding-left: 6px;
}
/* Ícone da seta */
 .select2-container--default .select2-selection__arrow {
     height: 36px;
     top: 2px;
}
/* Dropdown ao abrir */
 .select2-dropdown {
     border-radius: 6px;
     border: 1px solid #ccc;
     overflow: hidden;
}
/* Estilo das opções */
 .select2-results__option {
     padding: 10px;
     font-size: 12px;
}
/* Hover nas opções */
 .select2-results__option--highlighted {
     background-color: #00294B !important;
     color: white !important;
}
 .select2-container {
     min-width: 180px;
     max-width: 100%;
     vertical-align: middle;
}
 .filtros select {
     margin-top: 5px;
}
 .select2-login {
     width: 100% !important;
     border-radius: 6px;
     font-size: 16px;
}
 .select2-container--default .select2-selection--single {
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 6px;
     padding: 6px 12px;
     height: 40px;
     font-size: 12px;
}

.logo-container, .user-info {
    padding-top: 10px; /* Ajuste o valor para descer mais ou menos */
}

/* ============================================================ RESPONSIVO (CELULAR) ============================================================ */
 @media (max-width: 768px) {
     .sidebar {
         position: fixed;
        /* fixar totalmente */
         left: -250px;
         top: 60px;
         height: calc(100vh - 60px);
         z-index: 1001;
    }
     .sidebar.active {
         left: 0;
    }
     body.menu-aberto {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

     .close-menu {
         display: block;
    }
     .conteudo {
         margin-left: 0;
         padding-top: 70px;
         position: relative;
        /* necessário para respeitar o z-index */
         z-index: 1;
    }
     .logo-desktop {
         display: none;
    }
     .logo-mobile {
         display: block;
         height: 40px;
         margin: 0 auto;
    }
     .header {
         justify-content: space-between;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         height: 60px;
         z-index: 1000;
         background-color: #00294B;
    }
     .logo-container {
         margin-left: 0;
         justify-content: center;
    }
     .user-info {
         margin-right: 0;
         
         
    }
}
/* Estilo seguro para garantir contraste no Select2 dropdown */
 .select2-container--default .select2-results__option {
     color: #333 !important;
    /* Cor do texto nas opções */
     background-color: #fff !important;
    /* Fundo branco */
}
 .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
     background-color: #00294B !important;
    /* Fundo azul no hover */
     color: #fff !important;
    /* Texto branco no hover */
}
/* Estilo do campo selecionado */
 .select2-container--default .select2-selection--single {
     background-color: #fff !important;
     color: #333 !important;
     border: 1px solid #ccc;
     min-height: 38px;
     font-size: 12px;
}
 .select2-container--default .select2-selection__rendered {
     color: #333 !important;
     line-height: 36px;
}
 .select2-container--default .select2-selection--single .select2-selection__arrow {
     height: 36px;
}
/* ============================================================ AJUSTES EXTRAS PARA SELECT2 EM MOBILE / PWA ============================================================ */
 @media (max-width: 768px) {
     .select2-container {
         width: 100% !important;
    }
     .select2-selection--single {
         height: 42px !important;
    }
     .select2-selection__rendered {
         line-height: 40px !important;
         font-size: 16px !important;
    }
     .select2-selection__arrow {
         height: 40px !important;
    }
}
/* Força a camada do dropdown acima de todos os elementos no PWA */
 .select2-container--open {
     z-index: 9999 !important;
}
/* ============================================================ CONFIRMAÇÃO DE COBERTURA - NOVA TELA ============================================================ */
/* Container principal branco com sombra */
 .conteudo {
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* Filtros no topo */
 .filtros {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 20px;
     align-items: center;
}
 .filtros label {
     font-weight: bold;
}
 .filtros input {
     padding: 6px 10px;
     border-radius: 6px;
     border: 1px solid #ccc;
     font-size: 12px;
     min-width: 180px;
}
 .filtros button {
     padding: 8px 16px;
     background-color: #00294B;
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-size: 12px;
     transition: background-color 0.3s;
}
 .filtros button:hover {
     background-color: #00294B;
}
/* Tabela responsiva */
 table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 10px;
}
 table th, table td {
     padding: 10px;
     text-align: center;
     font-size: 12px;
     border-bottom: 1px solid #eee;
     vertical-align: middle;
}
 table th {
     background-color: #f2f2f2;
}
/* Botões da tabela */
 table button {
     padding: 6px 12px;
     background-color: #00294B;
     color: white;
     border: none;
     border-radius: 5px;
     font-size: 12px;
     cursor: pointer;
     transition: background-color 0.3s;
}
 table button:hover {
     background-color: #0056b3;
}
/* Campo de upload da foto */
 input[type="file"] {
     max-width: 100%;
}
/* Ajustes específicos para telas pequenas */
 @media (max-width: 768px) {
     .filtros {
         flex-direction: column;
         align-items: stretch;
    }
 
     thead {
         display: none;
    }
     tr {
         margin-bottom: 20px;
         background: #fff;
         border-radius: 8px;
         box-shadow: 0 0 4px rgba(0,0,0,0.05);
         padding: 10px;
    }
     td {
         position: relative;
         padding-left: 50%;
         border: none;
         border-bottom: 1px solid #eee;
         margin-bottom: 8px;
    }
   
     td:nth-child(1)::before {
         content: "Colaborador";
    }
     td:nth-child(2)::before {
         content: "Posto";
    }
     td:nth-child(3)::before {
         content: "Motivo";
    }
     td:nth-child(4)::before {
         content: "Hora Início";
    }
     td:nth-child(5)::before {
         content: "Tempo";
    }
     td:nth-child(6)::before {
         content: "Foto";
    }
     td:nth-child(7)::before {
         content: "Ação";
    }
}
/* Ajuste do container para tabelas largas */
 .tabela-container {
     overflow-x: auto;
     background: #fff;
     padding: 15px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
 .tabela-container {
     width: 100%;
     overflow-x: auto;
}
 @media (max-width: 768px) {
     .tabela-container table, .tabela-container thead, .tabela-container tbody, .tabela-container th, .tabela-container td, .tabela-container tr {
  
         width: 100%;
    }
     .tabela-container thead {
         display: none;
    }
     .tabela-container tr {
         margin-bottom: 15px;
         background: #fff;
         border-radius: 8px;
         box-shadow: 0 0 5px rgba(0,0,0,0.05);
         padding: 10px;
    }
     .tabela-container td {
         position: relative;
         padding: 12px 12px 12px 50%;
         border: none;
         border-bottom: 1px solid #eee;
         min-height: 50px;
    }
     .tabela-container{

         position: absolute;
         left: 12px;
         top: 12px;
         font-weight: bold;
         font-size: 12px;
         white-space: nowrap;
         color: #555;
    }
     .tabela-container td:last-child {
         border-bottom: none;
    }
}
 .tempo-alerta {
     color: #c0392b;
    /* vermelho forte */
     font-weight: bold;
     animation: alerta-piscar 1s infinite alternate;
}
 @keyframes alerta-piscar {
     0% {
         opacity: 1;
    }
     100% {
         opacity: 0.6;
    }
}
 .tempo-alerta::after {
     content: " 🚨";
     margin-left: 4px;
     font-size: 12px;
}
 .popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0,0,0,0.5);
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .popup-box {
     background: #fff;
     padding: 20px 30px;
     border-radius: 10px;
     max-width: 90%;
     text-align: center;
     box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
 .popup-box h3 {
     margin-bottom: 10px;
     color: #00294B;
}
 .popup-box p {
     margin-bottom: 20px;
     font-size: 16px;
     color: #444;
}
 .popup-box button {
     background-color: #00294B;
     color: white;
     padding: 10px 20px;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-size: 12px;
}
 .popup-box button:hover {
     background-color: #00294B;
}
 .layout-desktop {
     display: flex;
     gap: 20px;
     align-items: flex-start;
     flex-wrap: nowrap;
}
 .lista-condominios {
     width: 280px;
     min-width: 280px;
     max-height: calc(100vh - 130px);
     overflow-y: auto;
     padding: 10px;
     border-right: 1px solid #ccc;
     background-color: #f9f9f9;
     margin-top: 12px;
    /* ✅ ajuste para alinhar com .titulo-web */
}
 .conteudo-direita {
     flex: 1;
     padding: 10px 0;
}
 .titulo-bloco {
     margin: 0;
     padding: 0;
     font-size: 18px;
     font-weight: bold;
}
 .titulo-bloco {
     margin: 0;
     padding: 0;
     font-size: 20px;
     font-weight: 600;
}
 .cabecalho-form {
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: sticky;
     top: 50px;
    /* fica colado abaixo do header */
     background: white;
     z-index: 10;
     padding: 4px 0;
     margin-bottom: 8px;
}
 .cabecalho-form h2 {
     margin: 0;
     font-size: 1.2rem;
     font-weight: 600;
}
/* Exibe a estrutura em colunas somente na web */
 .layout-desktop {
     display: flex;
     flex-direction: row;
     gap: 20px;
}
/* No mobile: vira coluna (empilhado) */
 @media (max-width: 768px) {
     .layout-desktop {
         display: block;
    }
     .conteudo-direita {
         width: 100%;
         margin-top: 16px;
    }
     #btn-toggle-historico  {
         width: 100%;
         margin-top: 8px;
    }
    #btn-toggle-historico-mobile  {
         width: 100%;
         margin-top: 8px;
    }
    #btn-toggle-historico-web  {
         width: 100%;
         margin-top: 8px;
    }

}
 .conteudo h2 {
     position: sticky;
     top: 60px;
    /* altura do header */
     background-color: #fff;
     z-index: 996;
     padding: 10px 10px;
     margin-bottom: 0;
     border-top: 1px solid #ddd;
}
 .filtros {
     position: sticky;
     top: 100px;
    /* header + título */
     z-index: 995;
     background-color: #fff;
     padding: 10px;
     margin-bottom: 0;
     border-bottom: 1px solid #ddd;
     margin-top: 10px;
}
 table thead th {
     background-color: #f2f2f2;
     color: #333333;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
 table thead th {
     font-weight: bold;
     font-size: 12px;
}
 .tabela-container {
     max-height: calc(100vh - 220px);
    /* ajuste com base no seu layout */
     overflow-y: hidden;
     position: relative;
}
 .btn-toggle-filtros {
     display: none;
     margin-bottom: 10px;
     padding: 8px 16px;
     background-color: #00294B;
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-size: 12px;
}
 @media (max-width: 768px) {
     .btn-toggle-filtros {
         display: block;
    }
     #filtros-container {
         display: none;
         margin-bottom: 20px;
    }
     #filtros-container.aberto {
         display: flex;
         flex-direction: column;
         gap: 10px;
    }
}
 .paginacao {
     margin-top: -10px;
     margin-bottom: 10px;
     display: flex;
     justify-content: flex-end;
    /* 🔁 Alinha à direita */
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
}
 .paginacao button {
     padding: 6px 14px;
     background-color: #00294B;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
}
 .paginacao button:hover {
     background-color: #00294B;
}
/* Só mostra no desktop */
 .desktop-only {
     display: block;
}
 @media (max-width: 768px) {
     .desktop-only {
         display: none;
    }
}
 .filtros-paginacao-bloco {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 10px;
}
 @media (max-width: 768px) {
     .filtros-paginacao-bloco {
         flex-direction: column;
         align-items: stretch;
    }
}
 @media (max-width: 768px) {
     .select2-container {
         width: 100% !important;
    }
     .select2-container .select2-selection--single {
         height: 44px !important;
         font-size: 16px;
         padding: 10px 12px;
    }
     .select2-container--default .select2-selection__rendered {
         line-height: 40px !important;
         font-size: 16px !important;
         padding-left: 8px;
    }
     .select2-container--default .select2-selection__arrow {
         height: 40px !important;
         top: 2px;
         right: 10px;
    }
     .login-container select {
         font-size: 16px;
    }
}
 @media (max-width: 768px) {
     .tabela-container {
         max-height: none;
         overflow-y: auto;
    }
}
 .cards {
     display: flex;
     
     flex-wrap: wrap;
     gap: 16px;
     margin-top: 20px;
     margin-bottom: 30px;
     justify-content: flex-start; /* agora à esquerda no desktop */
}
 .card {
     width: 180px;
    /* largura fixa */
     background-color: #00294B;
     color: white;
     padding: 16px;
     border-radius: 10px;
     text-align: center;
     box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     transition: transform 0.2s ease;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* sombra suave */
}
 .card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    /* sombra maior no hover */
}
 .card h3 {
     font-size: 12px;
     margin-bottom: 6px;
     font-weight: 500;
}
 .card p {
     font-size: 22px;
     font-weight: bold;
     margin: 0;
}
 .flyer-novidades {
     background-color: #f9f9f9;
     padding: 20px;
     border-radius: 10px;
     border-left: 5px solid #00294B;
}
 .flyer-novidades h3 {
     color: #00294B;
     margin-bottom: 10px;
}
 .flyer-conteudo p {
     margin-bottom: 10px;
     color: #333;
     font-size: 15px;
}
 .card {
     text-decoration: none;
    /* remove sublinhado se for <a> */
     cursor: pointer;
     display: block;
}
 .card:hover {
     transform: translateY(-4px);
     box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
 .layout-desktop {
     display: flex;
     gap: 20px;
     align-items: flex-start;
}
 .lista-condominios {
     width: 250px;
     height: auto;
    /* Altura automática conforme o conteúdo ao lado */
     max-height: 500px;
     overflow-y: auto;
     background-color: #f9f9f9;
     padding: 10px;
     border-radius: 8px;
     box-shadow: 0 0 5px rgba(0,0,0,0.05);
}
 .lista-condominios ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
 .lista-condominios li {
     padding: 10px;
     cursor: pointer;
     border-bottom: 1px solid #eee;
     transition: background-color 0.2s;
}
 .lista-condominios li:hover {
     background-color: #e3edf4;
}
 .lista-condominios li.ativo {
     background-color: #d6e7f0;
     font-weight: bold;
}
 @media (max-width: 768px) {
     .layout-desktop {
         flex-direction: column;
    }
     .lista-condominios {
         display: none;
    }
     .filtro-mobile {
         display: block;
         margin-bottom: 20px;
    }
     .filtro-mobile {
         position: sticky;
         top: 120px;
        /* Ajuste conforme a altura do header */
         background: white;
         padding: 10px 0;
         z-index: 10;
    }
}
 .lista-condominios li.pendente {
     background-color: #fff3cd;
}
 .lista-condominios li.em-atraso {
     background-color: #ffcccc;
}
 .lista-condominios li.ok {
     background-color: #d4edda;
}
 .lista-condominios {
     position: sticky;
     top: 120px;
     max-height: calc(100vh - 140px);
     overflow-y: auto;
     background: white;
     padding-right: 6px;
}
 .filtro-mobile {
     position: sticky;
     top: 120px;
     background: white;
     z-index: 10;
     padding: 10px 0;
}
 #lista-condominios li.selecionado {
     background-color: #e0f7fa;
     font-weight: bold;
     border-radius: 6px;
}
 @media (min-width: 769px) {
     .filtro-mobile {
         display: none;
    }
}
 #container-lista-condominios {
     position: sticky;
     top: 64px;
    /* altura do topo fixo (ex: header) */
     align-self: flex-start;
     max-height: calc(100vh - 64px);
    /* altura máxima da tela */
     overflow-y: auto;
     padding-right: 10px;
    /* margem para evitar cortar a barra de rolagem */
}
 .contador-condominios {
     margin-bottom: 8px;
     font-weight: bold;
}
 .input-busca-condominio {
     width: 100%;
     margin-bottom: 10px;
     padding: 6px;
     border-radius: 6px;
     border: 1px solid #ccc;
     font-size: 12px;
}
/* Layout do formulário */
 .formulario-container {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
}
 .titulo-bloco {
     margin: 10px 0 0 0;
     padding-top: 4px;
}
 .layout-desktop {
     display: flex;
     gap: 20px;
     align-items: flex-start;
}
 .lista-condominios {
     width: 280px;
     position: sticky;
     top: 64px;
     align-self: flex-start;
     max-height: calc(100vh - 64px);
     overflow-y: auto;
     background: #f8f9fa;
     padding: 10px;
     border-right: 1px solid #ccc;
     border-radius: 8px;
}
 #lista-condominios li {
     list-style: none;
     padding: 6px 10px;
     margin-bottom: 4px;
     border-radius: 4px;
     cursor: pointer;
}
 .lista-condominios {
     position: sticky;
     top: 70px;
    /* ajuste se o header for maior */
     align-self: flex-start;
     max-height: calc(100vh - 80px);
     overflow-y: auto;
}
/* Versão desktop */
 .layout-desktop {
     display: flex;
     gap: 20px;
}
/* Comportamento no mobile */
 @media (max-width: 768px) {
     .layout-desktop {
         flex-direction: column;
    }
     .conteudo-direita {
         display: flex;
         flex-direction: column;
         gap: 20px;
    }
     #container-lista-condominios {
         display: none;
        /* Oculta a lista lateral no mobile */
    }
     .filtro-mobile {
         display: block;
         margin-bottom: 10px;
    }
}
/* Versão desktop mantém escondido o select */
 @media (min-width: 769px) {
     .filtro-mobile {
         display: none;
    }
}
/* Layout desktop com lista lateral fixa */
 .layout-desktop {
     display: flex;
     flex-direction: row;
     gap: 20px;
     padding-top: 20px;
}
/* Lista lateral */
 .lista-condominios {
     width: 280px;
     max-height: calc(100vh - 100px);
    /* Altura máxima com rolagem */
     overflow-y: auto;
     background-color: #f7f7f7;
     border-radius: 12px;
     padding: 10px;
}
/* Conteúdo principal ao lado da lista */
 .conteudo-direita {
     flex: 1;
     min-width: 0;
     background: white;
     border-radius: 12px;
     padding: 20px;
}
/* Filtro mobile deve aparecer apenas em telas pequenas */
 .filtro-mobile {
     display: none;
     padding: 10px;
     margin-bottom: 15px;
     background: #eef2f5;
     border-radius: 8px;
}
/* Responsivo */
 @media (max-width: 768px) {
     .layout-desktop {
         flex-direction: column;
    }
     .lista-condominios {
         display: none;
        /* Oculta lista lateral no mobile */
    }
     .filtro-mobile {
         display: block;
    }
     .conteudo-direita {
         width: 100%;
         padding: 10px;
    }
}
 .lista-condominios {
     width: 280px;
     max-height: calc(100vh - 100px);
     overflow-y: auto;
     overflow-x: hidden;
    /* 💥 impede rolagem horizontal */
     background-color: #f7f7f7;
     border-radius: 12px;
     padding: 10px;
     box-sizing: border-box;
     word-break: break-word;
    /* 💡 quebra palavras longas */
}
 .layout-desktop {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
    /* ✅ alinha topo com topo */
     gap: 20px;
    /* espaço entre lista e formulário */
}
 .lista-condominios {
     width: 280px;
     max-height: calc(100vh - 100px);
     overflow-y: auto;
     overflow-x: hidden;
     background-color: #f7f7f7;
     border-radius: 12px;
     padding: 10px;
     box-sizing: border-box;
     word-break: break-word;
     flex-shrink: 0;
    /* ✅ impede encolhimento */
}
 .conteudo-direita {
     flex: 1;
     max-width: 100%;
     box-sizing: border-box;
}
 #lista-condominios li:hover {
     background-color: #e6f0ff;
}
 #lista-condominios li.ativo {
     background-color: #d0e3ff;
     font-weight: bold;
}
 .formulario input {
     margin-bottom: 10px;
}
 .filtro-mobile {
     display: none;
}
 @media (max-width: 768px) {
     .layout-desktop {
         display: none;
    }
     .filtro-mobile {
         display: block;
         padding: 10px;
    }
}
/* ✅ Área lateral esquerda */
 .lista-condominios {
     width: 280px;
     min-width: 280px;
     max-height: calc(100vh - 64px);
     overflow-y: auto;
     background: #f8f8f8;
     padding: 10px;
     box-sizing: border-box;
}
/* ✅ Container principal */
 .layout-desktop {
     display: flex;
     flex-direction: row;
     gap: 20px;
     padding: 10px;
     box-sizing: border-box;
     max-width: 100%;
     overflow-x: hidden;
}
/* ✅ Conteúdo do lado direito */
 .conteudo-direita {
     flex: 1;
     min-width: 0;
     padding: 0 10px;
}
/* ✅ Alinhamento fixo para header da direita */
 .titulo-acompanhamento {
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: sticky;
     top: 64px;
     background: white;
     z-index: 10;
     padding: 10px 0;
}
/* ✅ Tabela de aplicações sem scroll horizontal */
 .tabela-scroll {
     overflow-x: auto;
     width: 100%;
     margin-top: 1rem;
     border-radius: 12px;
}
 .tabela-aplicacoes {
     width: 100%;
     border-collapse: collapse;
     font-family: 'Segoe UI', sans-serif;
     font-size: 12px;
     background-color: white;
     min-width: 600px;
}
 .tabela-aplicacoes th {
     background-color: #f0f4f8;
     color: #333;
     font-weight: 600;
     padding: 12px 10px;
     border-bottom: 2px solid #ddd;
     text-align: left;
     white-space: nowrap;
}
 .tabela-aplicacoes td {
     padding: 10px 8px;
     border-bottom: 1px solid #eee;
     color: #444;
     white-space: nowrap;
}
 .tabela-aplicacoes tr:nth-child(even) {
     background-color: #f9f9f9;
}
 .tabela-aplicacoes tr:hover {
     background-color: #eef4ff;
}
/* ✅ Modo responsivo no mobile */
 @media screen and (max-width: 768px) {
     .tabela-scroll {
         overflow: visible;
    }
     .tabela-aplicacoes, .tabela-aplicacoes thead, .tabela-aplicacoes tbody, .tabela-aplicacoes th, .tabela-aplicacoes td, .tabela-aplicacoes tr {
  
         width: 100%;
    }
     .tabela-aplicacoes thead {
         display: none;
    }
     .tabela-aplicacoes tr {
         margin-bottom: 15px;
         border: 1px solid #ccc;
         border-radius: 10px;
         padding: 10px;
         background: #fff;
         box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
     .tabela-aplicacoes td {
         display: flex;
         justify-content: space-between;
         padding: 8px 12px;
         border: none;
         border-bottom: 1px solid #eee;
    }
     .tabela-aplicacoes td:last-child {
         border-bottom: none;
    }
     .tabela-aplicacoes  {

         font-weight: bold;
         color: #333;
    }
}
 .card-historico {
     margin-top: 20px;
     padding: 15px;
     background: #fdfdfd;
     border-radius: 12px;
     box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
 .tabela-scroll {
     overflow-x: auto;
     width: 100%;
}
 .tabela-aplicacoes {
     width: 100%;
     border-collapse: collapse;
     min-width: 600px;
     font-family: 'Segoe UI', sans-serif;
     font-size: 12px;
     background-color: #fff;
}
 .tabela-aplicacoes th {
     background-color: #f0f4f8;
     color: #333;
     font-weight: 600;
     padding: 12px 10px;
     text-align: left;
     border-bottom: 2px solid #ddd;
     white-space: nowrap;
}
 .tabela-aplicacoes td {
     padding: 10px 8px;
     border-bottom: 1px solid #eee;
     color: #444;
     white-space: nowrap;
}
 .tabela-aplicacoes tr:nth-child(even) {
     background-color: #f9f9f9;
}
/* ✅ Responsivo em mobile: vira cards */
 @media screen and (max-width: 768px) {
     .tabela-aplicacoes, .tabela-aplicacoes thead, .tabela-aplicacoes tbody, .tabela-aplicacoes tr, .tabela-aplicacoes td, .tabela-aplicacoes th {

    
         width: 100%;
    }
     .tabela-aplicacoes thead {
         display: none;
    }
     .tabela-aplicacoes tr {
         margin-bottom: 15px;
         border: 1px solid #ccc;
         border-radius: 10px;
         padding: 10px;
         box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
     .tabela-aplicacoes td {
         display: flex;
         justify-content: space-between;
         padding: 8px 12px;
         border: none;
         border-bottom: 1px solid #eee;
    }
     .tabela-aplicacoes td:last-child {
         border-bottom: none;
    }
     .tabela-aplicacoes  {

         font-weight: bold;
         color: #333;
    }
}
/* ✅ Responsivo */
 @media (max-width: 768px) {
     .layout-desktop {
         flex-direction: column;
    }
     .lista-condominios {
         width: 100%;
         max-height: none;
         overflow-y: visible;
    }
     .conteudo-direita {
         width: 100%;
         padding: 0;
    }
     .titulo-acompanhamento {
         flex-direction: column;
         align-items: flex-start;
         gap: 10px;
    }
}
 @media (max-width: 768px) {
     .fixo-topo-mobile {
         position: sticky;
         top: 64px;
         background-color: white;
         z-index: 20;
         padding: 10px 10px 0;
         display: flex;
         flex-direction: column;
         gap: 10px;
         text-align: left;   /* 👈 alinhando texto à esquerda */
    align-items: flex-start; /* garante que botões/labels também fiquem à esquerda */
    }
     .fixo-topo-mobile h2 {
         margin: 0;
         font-size: 1.1rem;
    }
     .fixo-topo-mobile button {
         width: fit-content;
    }
     .filtro-mobile {
         margin: 0;
    }
     .formulario, .grupo-aplicacoes, .card-historico {
         margin-top: 20px;
    }
}
 @media (max-width: 768px) {
     .fixo-topo-mobile {
         position: fixed;
         top: 64px;
         left: 0;
         right: 0;
         background-color: white;
         z-index: 1000;
         padding: 10px;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         text-align: left;   /* 👈 alinhando texto à esquerda */
    align-items: flex-start; /* garante que botões/labels também fiquem à esquerda */
    }
     .fixo-topo-mobile h2 {
         margin: 0;
         font-size: 1.1rem;
    }
     .fixo-topo-mobile button {
         width: fit-content;
         align-self: flex-end;
    }
     .espaco-apos-topo {
         margin-top: 180px;
        /* altura reservada para os fixos */
    }
     .filtro-mobile {
         margin-top: 8px;
    }
}
/* ✅ Layout principal em tela grande */
 @media (min-width: 769px) {
     .layout-desktop {
         display: flex;
         flex-direction: row;
         align-items: flex-start;
         gap: 24px;
         padding: 16px;
    }
     .lista-condominios {
         width: 300px;
         max-height: calc(100vh - 100px);
         overflow-y: auto;
         background: #f8f8f8;
         border-radius: 8px;
         padding: 12px;
         flex-shrink: 0;
    }
     .conteudo-direita {
         flex: 1;
         min-width: 0;
    }
     .conteudo-direita h2 {
         margin-top: 0;
         font-size: 1.3rem;
    }
  
     .tabela-aplicacoes {
         width: 100%;
         border-collapse: collapse;
    }
     .tabela-aplicacoes th, .tabela-aplicacoes td {
         padding: 8px;
         text-align: left;
         border-bottom: 1px solid #ccc;
    }
}
 @media (min-width: 769px) {
     .layout-desktop {
         display: flex;
         align-items: flex-start;
         gap: 24px;
         padding: 16px;
    }
     .lista-condominios {
         width: 280px;
         max-height: calc(100vh - 100px);
         overflow-y: auto;
         background-color: #f5f5f5;
         border-radius: 10px;
         padding: 12px;
         flex-shrink: 0;
    }
     .conteudo-direita {
         flex: 1;
         min-width: 0;
    }
     .conteudo-direita h2 {
         margin: 0;
         font-size: 1.4rem;
    }
     .conteudo-direita .btn-padrao {
         margin-top: 8px;
    }
     .formulario, .grupo-aplicacoes, .card-historico {
         background: white;
         border-radius: 8px;
         padding: 16px;
         margin-top: 16px;
         box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
     .formulario label {
         display: block;
         margin-top: 10px;
         font-weight: 500;
    }
     .formulario input, .formulario select {
         width: 100%;
         padding: 6px 8px;
         margin-top: 4px;
         border: 1px solid #ccc;
         border-radius: 5px;
    }
     .campo-senha {
         position: relative;
    }
     .icone-senha {
         position: absolute;
         right: 12px;
         top: 50%;
         transform: translateY(-50%);
         cursor: pointer;
    }
     .tabela-aplicacoes {
         width: 100%;
         border-collapse: collapse;
         margin-top: 12px;
    }
     .tabela-aplicacoes th, .tabela-aplicacoes td {
         border-bottom: 1px solid #ccc;
         padding: 8px;
         text-align: left;
    }
}
 .conteudo-pos-topo {
     margin-top: 140px;
    /* Reduzido para alinhar melhor após a lista */
     padding: 10px 15px;
}
/* Geral */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     background-color: #f5f5f5;
}
 .conteudo {
     padding-top: 20px;
}
/* Layout desktop */
 .layout-desktop {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     gap: 20px;
     padding: 0 20px;
}
/* Lista de condomínios lateral */
 .lista-condominios {
     width: 280px;
     max-height: calc(100vh - 100px);
     overflow-y: auto;
     position: sticky;
     top: 80px;
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 8px;
     padding: 10px;
}
 .lista-condominios ul {
     list-style: none;
     padding-left: 0;
     margin: 0;
}
 .lista-condominios li {
     padding: 6px 10px;
     margin-bottom: 4px;
     background-color: #f0f0f0;
     border-radius: 6px;
     cursor: pointer;
}
 .lista-condominios li.ativo {
     background-color: #d0eaff;
     font-weight: bold;
}
/* Formulário */

 .formulario input {
     padding: 8px;
     font-size: 12px;
     border: 1px solid #bbb;
     border-radius: 6px;
     width: 100%;
}
/* Títulos */
 .titulo-bloco {
     margin: 0 0 10px 0;
     font-size: 18px;
     color: #00294B;
     font-weight: bold;
}
/* Filtro mobile (select) */
 .filtro-mobile {
     display: none;
     padding: 20px;
     background: white;
     position: sticky;
     top: 60px;
     z-index: 20;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
 .select2-login {
     width: 100% !important;
}
/* Responsividade */
 @media (max-width: 767px) {
     .layout-desktop {
         flex-direction: column;
         padding: 0 10px;
    }
     .lista-condominios {
         display: none;
    }
     .filtro-mobile {
         display: block;
    }
}
/* Layout em linha na visão desktop */
 .layout-desktop {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     gap: 30px;
     padding: 0 20px;
}
/* Lista lateral fixada à esquerda no desktop */
 .lista-condominios {
     width: 300px;
     max-height: calc(100vh - 140px);
     overflow-y: auto;
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 8px;
     padding: 10px;
     position: sticky;
     top: 80px;
     flex-shrink: 0;
}
/* Área da direita com formulário e histórico */
 .conteudo-direita {
     flex: 1;
     display: flex;
     flex-direction: column;
}
/* Espaço extra abaixo do topo fixo */
 .conteudo-pos-topo {
     margin-top: 30px;
    /* reduzido para ficar mais próximo do topo fixo */
     padding: 10px 0;
}
/* Comportamento no mobile: tudo empilhado */
 @media (max-width: 767px) {
     .layout-desktop {
         flex-direction: column;
         padding: 0 10px;
    }
     .lista-condominios {
         display: none;
        /* escondida no mobile */
    }
     .fixo-topo-mobile {
         display: flex;
         flex-direction: column;
         gap: 10px;
         position: sticky;
         top: 60px;
         background: white;
         padding: 10px;
         z-index: 10;
         text-align: left;   /* 👈 alinhando texto à esquerda */
    align-items: flex-start; /* garante que botões/labels também fiquem à esquerda */
    }
     .conteudo-direita {
         width: 100%;
    }
}
 @media (min-width: 768px) {
     .layout-desktop {
         display: flex;
         flex-direction: row;
         align-items: flex-start;
         gap: 30px;
         padding: 0 20px;
    }
     #container-lista-condominios {
         width: 300px;
         max-height: calc(100vh - 160px);
         overflow-y: auto;
         background-color: #fff;
         border: 1px solid #ccc;
         border-radius: 8px;
         padding: 10px;
         position: sticky;
         top: 100px;
         flex-shrink: 0;
    }
     .conteudo-pos-topo {
         margin-top: 0;
        /* remover o excesso que separa demais o form */
         flex: 1;
    }
}
/* Apenas para telas grandes (web) */
 @media screen and (min-width: 768px) {
     .layout-web {
         display: flex;
         flex-direction: row;
         align-items: flex-start;
         margin-top: 50px;
        /* distância após o topo fixo */
    }
     .lista-condominios {
         width: 280px;
         flex-shrink: 0;
         position: sticky;
         top: 60px;
         max-height: calc(100vh - 60px);
         overflow-y: auto;
         background: #fff;
         padding: 10px;
         border-right: 1px solid #ddd;
    }
     .conteudo-pos-topo {
         flex: 1;
         margin-top: 20px;
        /* sobe um pouco */
         padding: 10px 20px;
         max-width: 100%;
    }
     .fixo-topo-mobile {
         display: none;
    }
}





 .btn-web {
     align-self: flex-start;
     margin-bottom: 10px;
}
 .switch {
     position: relative;
     display: inline-block;
     width: 48px;
     height: 24px;
     margin-left: 10px;
}
 .switch input {
     opacity: 0;
     width: 0;
     height: 0;
}
 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: .3s;
     border-radius: 24px;
}
 .slider:before {
     position: absolute;
     content: "";
     height: 18px;
     width: 18px;
     left: 3px;
     bottom: 3px;
     background-color: white;
     transition: .3s;
     border-radius: 50%;
}
 input:checked + .slider {
     background-color: #00294B;
}
 input:checked + .slider:before {
     transform: translateX(24px);
}
 .switch-label {
     font-weight: bold;
     margin-right: 8px;
}
 .tabela-container {
     width: 100%;
     max-width: 100vw;
     overflow-x: auto;
    /* permite scroll horizontal em telas pequenas */
     box-sizing: border-box;
     padding: 10px;
     table-layout: auto;
    /* permite colunas com larguras variáveis */
}
/* Container que envolve a tabela */
 .tabela-container {
     width: 100%;
     padding: 10px;
     box-sizing: border-box;
     overflow-x: hidden;
}
/* Estilo base da tabela */
 .tabela-aplicacoes {
     width: 100%;
     border-collapse: collapse;
     table-layout: auto;
}
 .tabela-aplicacoes th, .tabela-aplicacoes td {
     padding: 10px;
     border: 1px solid #ccc;
     text-align: left;
     white-space: normal;
     word-break: break-word;
     font-size: 12px;
}
/* Responsividade para celulares: transforma em lista vertical (estilo cards) */
 @media (max-width: 768px) {
     .tabela-aplicacoes thead {
         display: none;
    }
     .tabela-aplicacoes, .tabela-aplicacoes tbody, .tabela-aplicacoes tr, .tabela-aplicacoes td {
  
         width: 100%;
    }
     .tabela-aplicacoes tr {
         margin-bottom: 15px;
         border-bottom: 2px solid #ddd;
         padding: 10px 0;
    }
     .tabela-aplicacoes td {
         text-align: left;
         text-align: center;
        /* Centraliza o conteúdo */
         padding-left: 50%;
         position: relative;
         border: none;
         border-bottom: 1px solid #eee;
    }
     .tabela-aplicacoes  {

         position: absolute;
         text-align: center;
        /* Centraliza o conteúdo */
         left: 10px;
         top: 8px;
         font-weight: bold;
         white-space: nowrap;
         color: #555;
    }
}
 .tabela-aplicacoes th, .tabela-aplicacoes td {
     text-align: center;
    /* Centraliza o conteúdo */
}
 @media (max-width: 768px) {
     .tabela-aplicacoes td {
         text-align: center;
        /* centraliza nos cards também */
         padding-left: 0;
        /* remove recuo do pseudo-elemento */
    }
     .tabela-aplicacoes  {
         left: 0;
         text-align: left;
         padding-left: 10px;
         display: block;
         margin-bottom: 4px;
    }
}
 .tabela-container {
     width: 100%;
     overflow-x: auto;
    /* garante adaptação sem scroll errado */
     box-sizing: border-box;
}
 .tabela-aplicacoes {
     width: 100%;
     border-collapse: collapse;

}
 .tabela-aplicacoes th, .tabela-aplicacoes td {
     padding: 10px;
     border: 1px solid #ccc;
     text-align: center;
     vertical-align: middle;
     word-wrap: break-word;
     font-size: 12px;
}
/* 🔄 Mobile responsivo: transforma a tabela em "cards por linha" */
 @media (max-width: 768px) {
     .tabela-aplicacoes, .tabela-aplicacoes thead, .tabela-aplicacoes tbody, .tabela-aplicacoes th, .tabela-aplicacoes td, .tabela-aplicacoes tr {
         
         width: 100%;
    }
     .tabela-aplicacoes thead {
         display: none;
        /* Oculta o cabeçalho */
    }
     .tabela-aplicacoes tr {
         margin-bottom: 15px;
         border: 1px solid #ccc;
         border-radius: 6px;
         padding: 10px;
         background-color: #f9f9f9;
    }
     .tabela-aplicacoes td {
         text-align: left;
         padding-left: 50%;
         position: relative;
         border: none;
         border-bottom: 1px solid #ddd;
    }
     .tabela-aplicacoes  {
         position: absolute;
         top: 10px;
         left: 10px;
         width: 45%;
         padding-right: 10px;
         white-space: nowrap;
         font-weight: bold;
         color: #333;
    }
     .tabela-aplicacoes td:nth-child(1)::before {
         content: "Condomínio";
    }
     .tabela-aplicacoes td:nth-child(2)::before {
         content: "Tipo de Aplicação";
    }
     .tabela-aplicacoes td:nth-child(3)::before {
         content: "Data";
    }
     .tabela-aplicacoes td:nth-child(4)::before {
         content: "Status";
    }
     .tabela-aplicacoes td:nth-child(5)::before {
         content: "Data da Entrega";
    }
     .tabela-aplicacoes td:nth-child(6)::before {
         content: "Data da Reaberta";
    }
     .tabela-aplicacoes td:nth-child(7)::before {
         content: "Justificativa";
    }
     .tabela-aplicacoes td:nth-child(8)::before {
         content: "Opções";
    }
     .tabela-aplicacoes td:last-child {
         padding-left: 10px;
         text-align: center;
    }
}
 @media (max-width: 768px) {
     .tabela-aplicacoes, .tabela-aplicacoes thead, .tabela-aplicacoes tbody, .tabela-aplicacoes th, .tabela-aplicacoes td, .tabela-aplicacoes tr {
         
         width: 100%;
    }
     .tabela-aplicacoes thead {
         display: none;
        /* Oculta cabeçalhos em mobile */
    }
     .tabela-aplicacoes tr {
         margin-bottom: 20px;
         padding: 15px;
         border: 1px solid #ccc;
         border-radius: 8px;
         background-color: #fff;
         box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
     .tabela-aplicacoes td {
         border: none;
         padding: 6px 0;
         text-align: left;
         position: relative;
         font-size: 15px;
         word-break: break-word;
    }
     .tabela-aplicacoes  {

         display: block;
         font-weight: bold;
         margin-bottom: 3px;
         color: #555;
    }
}
 @media (max-width: 768px) {
     .tabela-aplicacoes, .tabela-aplicacoes thead, .tabela-aplicacoes tbody, .tabela-aplicacoes th, .tabela-aplicacoes td, .tabela-aplicacoes tr {
         
         width: 100%;
    }
     .tabela-aplicacoes thead {
         display: none;
        /* Oculta o cabeçalho */
    }
     .tabela-aplicacoes tr {
         margin-bottom: 20px;
         background-color: #fff;
         border: 1px solid #ccc;
         padding: 10px;
         border-radius: 8px;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }
     .tabela-aplicacoes td {
         padding: 6px 0;
         text-align: left;
         position: relative;
         border: none;
    }
     .tabela-aplicacoes  {

         font-weight: bold;
         display: block;
         margin-bottom: 2px;
         color: #555;
    }
}
 
.tabela-container {
  width: 100%;
  overflow-x: hidden; /* bloqueia rolagem lateral */
  padding: 0 10px;
  box-sizing: border-box;
}

.tabela-aplicacoes {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  word-break: break-word;
}

.tabela-aplicacoes th,
.tabela-aplicacoes td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: left;
  white-space: nowrap;
}



.tabela-container {
  width: 100%;
  overflow: hidden; /* evita scroll geral */
}

.tabela-aplicacoes {
  width: 100%;
  border-collapse: collapse;

}

.tabela-aplicacoes thead th,
.tabela-aplicacoes tbody td {
  white-space: nowrap; /* impede quebra */
  text-align: left;
  padding: 8px;
}

.scroll-horizontal {
  display: block;
  overflow-x: auto;
  width: 100%;
}

.scroll-horizontal tr {
  display: table;
  width: 100%;

}


.tabela-container {
  width: 100%;
  overflow: hidden; /* evita rolagem fora da área */
  box-sizing: border-box;
}

.tabela-aplicacoes {
  width: 100%;
  border-collapse: collapse;

}

.tabela-aplicacoes th,
.tabela-aplicacoes td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: left;
  white-space: nowrap;
}



@media (max-width: 768px) {
  .tabela-aplicacoes th,
  .tabela-aplicacoes td {
    font-size: 12px;
    display: block;
    width: 100%;
  }

  .tabela-aplicacoes tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }

  .tabela-aplicacoes th {
    background-color: #f0f0f0;
    font-weight: bold;
  }
}



.tabela-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.tabela-aplicacoes {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* Permite largura automática */
}

.tabela-aplicacoes tr {
  display: table;
  table-layout: auto;
  width: 100%;
}

.tabela-aplicacoes th,
.tabela-aplicacoes td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;  /* <- limita tamanho do conteúdo */
  box-sizing: border-box;
}


.tabela-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.tabela-aplicacoes {
  width: 100% !important;         /* Força a tabela a respeitar o container */
  max-width: 100% !important;

  border-collapse: collapse;
  box-sizing: border-box;
}

.tabela-aplicacoes th,
.tabela-aplicacoes td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: left;
  word-break: break-word;         /* Quebra palavras longas */
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
}


.card-historico {
  width: 100%;
  box-sizing: border-box;
}

.tabela-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.tabela-aplicacoes {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;

  box-sizing: border-box;
}

.tabela-aplicacoes th,
.tabela-aplicacoes td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
}

/* Deixa os botões dentro do td respeitarem a largura */
.tabela-aplicacoes td button {
  width: 100%;
  max-width: 100%;
  white-space: normal;
}



/* Container da tabela */
.tabela-container {
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  padding: 0;
}

/* Tabela */
.tabela-aplicacoes {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* Deixe as colunas se adaptarem */
  box-sizing: border-box;
}

/* Cabeçalhos e células */
.tabela-aplicacoes th,
.tabela-aplicacoes td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
}

/* Botões se adaptando também */
.tabela-aplicacoes td button {
  max-width: 100%;
  white-space: normal;
}

/* Responsivo no celular - exibe os dados em blocos verticais */
@media screen and (max-width: 768px) {
  .tabela-aplicacoes, .tabela-aplicacoes thead, .tabela-aplicacoes tbody, .tabela-aplicacoes th, .tabela-aplicacoes td, .tabela-aplicacoes tr {
    
    width: 100%;
  }

  .tabela-aplicacoes thead {
    display: none;
  }

  .tabela-aplicacoes tr {
    margin-bottom: 15px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
  }

  .tabela-aplicacoes td {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #ddd;
  }

  .tabela-aplicacoes  {

    font-weight: bold;
    flex: 1;
    margin-right: 10px;
    color: #333;
  }

  .tabela-aplicacoes td:last-child {
    border-bottom: none;
  }
}


table.tabela-aplicacoes {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  table-layout: auto;
}

table.tabela-aplicacoes th,
table.tabela-aplicacoes td {
  border: 1px solid #ccc;
  padding: 8px;
  vertical-align: top;
  font-size: 12px;
}



.tabela-scroll {
  overflow-x: auto;
  width: 100%;
}


.btn-confirmar,
.btn-justificar {
  display: block;
  width: 100%;
  margin: 2px 0;
}

.tabela-scroll {
  overflow-x: auto;
  width: 100%;
}

.tabela-aplicacoes {
  width: 100%;
  border-collapse: collapse;

}

.tabela-aplicacoes th,
.tabela-aplicacoes td {
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 12px;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
  white-space: normal;
}

.tabela-aplicacoes th {
  background-color: #f4f6f9;
  font-weight: bold;
}

.tabela-aplicacoes {
  width: 100%;
  border-collapse: collapse;

}


.tabela-aplicacoes th,
.tabela-aplicacoes td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  font-size: 12px;
  vertical-align: top;
  white-space: normal;
  word-wrap: break-word;
}



.btn-confirmar,
.btn-justificar {
  font-size: 12px;
  padding: 4px 6px;
  margin: 2px 2px 2px 0;
  white-space: nowrap;
  display: inline-block;
}


.tabela-aplicacoes {

  width: 100%;
}



.tabela-scroll {
  overflow-x: auto;
  width: 100%;
}

.tabela-aplicacoes {
  width: 100%;
  border-collapse: collapse;

}

.tabela-aplicacoes th,
.tabela-aplicacoes td {
  padding: 8px;
  font-size: 12px;
  text-align: left;
  border: 1px solid #ccc;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
}

/* Larguras específicas para cada coluna */
.col-tipo         { width: 80px; }
.col-data         { width: 80px; }
.col-status       { width: 80px; }
.col-entrega      { width: 110px; }
.col-reaberta     { width: 110px; }
.col-justificativa{ width: 220px; }
.col-opcoes       { width: 130px; }

.btn-confirmar,
.btn-justificar {
  font-size: 12px;
  padding: 4px 6px;
  margin: 2px 2px 2px 0;
  white-space: nowrap;
}

/* Para empilhar botões no mobile */
@media (max-width: 600px) {
  .btn-confirmar,
  .btn-justificar {
    display: block;
    width: 100%;
  }
}



.tabela-aplicacoes {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.tabela-aplicacoes th,
.tabela-aplicacoes td {
  padding: 8px;
  font-size: 12px;
  text-align: left;
  border: 1px solid #ccc;
  white-space: normal;
  word-break: break-word;
}

/* Larguras sincronizadas */
.col-tipo         { width: 200px; }
.col-data         { width: 90px; }
.col-status       { width: 80px; }
.col-entrega      { width: 110px; }
.col-reaberta     { width: 110px; }
.col-justificativa{ width: 220px; }
.col-opcoes       { width: 130px; }



.filtro-mobile.moderno {
  background-color: #fff;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  width: 100%;        /* ocupa toda a largura do container pai */
}

.filtro-mobile.moderno .label-condominio {
  font-weight: bold;
  color: #00294B;
  margin-bottom: 6px;
  display: flex;             /* ativa flexbox */
  justify-content: center;   /* centraliza horizontal */
  align-items: center;       /* garante alinhamento vertical */
  width: 100%;               /* ocupa largura total do container */
  text-align: center;        /* segurança extra */
}


/* Tabela responsiva no mobile */
@media (max-width: 768px) {
  .tabela-tarefas thead {
    display: none;
  }

  .tabela-tarefas, .tabela-tarefas tbody, .tabela-tarefas tr, .tabela-tarefas td {
    display: block;
    width: 100%;
  }

  .tabela-tarefas tr {
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    padding: 10px;
  }

  .tabela-tarefas td {
    padding: 6px 10px;
    text-align: center;
    position: relative;
    font-size: 12px;
  }

  .tabela-tarefas  {

    font-weight: bold;
    display: block;
    
    margin-bottom: 3px;
    color: #333;
  }
}



@media (max-width: 768px) {
  .tabela-tarefas {
    width: 100%;
    border-collapse: collapse;
  }

  .tabela-tarefas thead {
    display: none;
  }

  .tabela-tarefas, .tabela-tarefas tbody, .tabela-tarefas tr, .tabela-tarefas td {
    display: block;
    width: 100%;
  }

  .tabela-tarefas tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
  }

  .tabela-tarefas td {
    padding: 6px 12px;
    text-align: left;
    position: relative;
    font-size: 12px;
    border: none;
    border-bottom: 1px solid #eee;
  }

  .tabela-tarefas td:last-child {
    border-bottom: none;
  }

  .tabela-tarefas  {

    font-weight: bold;
    color: #00294B;
    display: block;
    margin-bottom: 4px;
  }
}


@media (max-width: 768px) {
  .tabela-tarefas td {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tabela-tarefas  {

    font-weight: bold;
    color: #00294B;
    flex: 1;
    text-align: left;
  }

  .tabela-tarefas td {
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
.tabela-tarefas td::before {
  content: attr(data-label); /* <- aqui ele insere o valor do atributo como "título" no mobile */

}
}


.bloco-motivo {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.select-motivo {
  max-width: 200px;
  width: 100%;
  flex: 1;
}

.btn-confirmar {
  width: 100%;

}

@media (max-width: 768px) {
  .bloco-motivo {
    flex-direction: column;
    align-items: stretch;
  }

  .select-motivo,
  .btn-confirmar {
    max-width: 100%;
    width: 100%;
  }
}


.bloco-motivo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}

.select-motivo {
  width: 100%;
  max-width: 220px; /* controla a largura máxima da lista */
}

.btn-confirmar {
  width: 100%;

}


.motivo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: 8px;
}

.select-motivo,
.btn-confirmar {
  width: 100%;

}



/* Ações agrupadas verticalmente no mobile */
@media (max-width: 768px) {
  td[data-label="Ação"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  td[data-label="Ação"] button {
    width: 100%;
  }

  .motivo-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }

  .motivo-container select,
  .motivo-container button {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .acao-mobile {
    text-align: center;
  }
}


@media (max-width: 768px) {
  .acao-mobile {
    text-align: center !important;
  }

  .acao-mobile button {
    display: block;
    margin: 6px auto;
    width: 100%;
    
  }

  .motivo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .motivo-container select,
  .motivo-container .btn-confirmar {
    width: 100%;

    margin-bottom: 6px;
  }
}


.motivo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  width: 220px; /* ajuste aqui conforme necessário */
}



.status-entregue {
  background-color: #d4edda;
  color: #155724;
  font-weight: bold;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
}

.status-justificada {
  background-color: #fff3cd;
  color: #856404;
  font-weight: bold;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
}

.status-reaberta {
  background-color: #d1ecf1;
  color: #0c5460;
  font-weight: bold;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
}

.status-pendente {
  background-color: #fff3cd; /* amarelo claro (como alerta) */
  color: #856404;            /* marrom escuro para legibilidade */
  font-weight: bold;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
}

.status-despachado {
  background-color: #ffe5b4;  /* Laranja claro */
  color: #8a4b00;             /* Laranja escuro */
  font-weight: bold;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
}




.status-atrasada {
  background-color: #f8d7da; /* vermelho claro */
  color: #721c24;            /* vermelho escuro (texto) */
  font-weight: bold;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
}


/* Condominio com tarefa pendente */
.condominio-pendente {
  color: #b30000; /* vermelho escuro */
  font-weight: bold;
}

/* Legenda explicativa */
.legenda-condominio {
  font-size: 12px;
  margin-top: 10px;
  color: #777;
}


#lista-condominios li {
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 6px;
}



.btn-anexo {
  display: inline-block;
  width: 100%;
  max-width: 800px; /* Igual aos botões */
  padding: 6px 12px;
  background-color: #00294B;
  color: white !important;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  box-sizing: border-box;
}

.btn-anexo:hover {
  background-color: #00294B;
}

/* Ajuste específico para web (desktop) */
@media (min-width: 768px) {
  .btn-anexo {
    width: 100px;
    height: 30px;
  }
}

@media (min-width: 768px) {

.btn-entregar .margin-bottom{
    width: 100px;
    height: 30px;
  }
}



/* Estilo base para todos os botões */
button,
.btn-anexo {
  width: 100%;
  max-width: 600px;
  height: 36px;
  padding: 5px 10px;
  font-size: 12px;
  background-color: #00294B;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
}

/* Hover para botão e link */
button:hover,
.btn-anexo:hover {
  background-color: #00294B;
}

/* Para desktop, limitar a largura */
@media (min-width: 768px) {
  button,
  .btn-anexo {
    width: 150px;
  }
}



/* grupo */
.checkbox-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;                 /* menor espaçamento */
  margin-top: 8px;
}

/* estrutura: <label><input type="checkbox"><span>Texto</span></label> */
.checkbox-button-group label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* esconde checkbox nativo */
.checkbox-button-group input[type="checkbox"] { display: none; }

/* chip */
.checkbox-button-group span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;        /* ↓ menor */
  min-height: 32px;         /* altura compacta */
  font-size: 12px;          /* segue seu padrão */
  border: 1px solid #cfcfcf;
  border-radius: 10px;      /* menos oval */
  background: #f6f6f6;
  color: #333;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .1s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* hover/focus */
.checkbox-button-group label:hover span { background: #efefef; }
.checkbox-button-group input[type="checkbox"]:focus-visible + span,
.checkbox-button-group label:focus-visible span {
  outline: 2px solid #007BFF;
  outline-offset: 2px;
}

/* selecionado */
.checkbox-button-group input[type="checkbox"]:checked + span {
  background: #00294B;
  color: #fff;
  border-color: #00294B;
  box-shadow: 0 2px 6px rgba(0,41,75,.28);
  transform: translateY(-1px);
}

/* estado desabilitado (opcional) */
.checkbox-button-group input[type="checkbox"]:disabled + span {
  opacity: .55;
  cursor: not-allowed;
}

/* MOBILE: mantém toque confortável sem ficar grande demais */
@media (max-width: 480px) {
  .checkbox-button-group { gap: 6px; }
  .checkbox-button-group span {
    padding: 6px 10px;      /* um pouco mais de área de toque */
    min-height: 36px;       /* recomendado: ~36–40px */
    border-radius: 8px;     /* ainda menos oval no mobile */
  }
}






#lista-condominios li.selecionado {
  background-color: #1b4762;
  color: white;
  font-weight: bold;
  border-left: 4px solid #acacac;
  transition: all 0.2s ease-in-out;
}

.campo-senha {
  position: relative;
  display: flex;
  align-items: center;
}

.campo-senha input {
  width: 100%;
  padding-right: 35px; /* espaço pro ícone */
}

.icone-senha1 {
  position: absolute;
  right: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
}

.icone-senha2 {
  position: absolute;
  right: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
}
.icone-senha3 {
  position: absolute;
  right: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
}



/* Scroll horizontal apenas no desktop */
.tabela-scroll-horizontal {
  overflow-x: auto;
  width: 100%; /* acompanha a largura do .formulario */
  max-width: 100%;
}




/* 🖥️ Somente para visão web (largura > 768px) */
@media (min-width: 769px) {
  .tabela-scroll-horizontal {
    overflow-x: auto;
    max-width: 100%;
  }

  .tabela-scroll-horizontal .tabela-tarefas {
    min-width: 900px;
    width: max-content;
  }
}

.status-verde {
  background-color: #d4edda; /* verde claro */
  color: #155724;            /* verde escuro */
  font-weight: bold;
  text-align: center;
}

.status-amarelo {
  background-color: #fff3cd; /* amarelo claro */
  color: #856404;            /* amarelo escuro */
  font-weight: bold;
  text-align: center;
}



.status-vermelho {
  background-color: #f8d7da; /* vermelho claro */
  color: #721c24;            /* vermelho escuro */
  font-weight: bold;
  text-align: center;
}

.status-azul {
  background-color: #d1ecf1; /* azul claro */
  color: #0c5460;            /* azul escuro */
  font-weight: bold;
  text-align: center;
}

.status-vazio {
  background-color: #f4f6f9; /* neutro claro */
  color: #999;
  text-align: center;
  font-style: italic;
}


/* Container dos cards */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 30px;
}

/* Cada card */
.card {
  background-color: #00294B;
  color: white;
  padding: 16px;
  border-radius: 10px;
  width: 160px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Efeito hover */
.card:hover {
  transform: translateY(-4px);
}

/* Valor numérico */
.card p {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

/* Legenda */
.legenda-card {
  font-size: 12px;
  margin-top: 8px;
  display: block;
}

/* 📱 Responsividade: 2 por linha em telas menores */
@media (max-width: 600px) {
  .card {
    width: calc(50% - 12px); /* 2 cards por linha com gap */
  }
}
.bloco-tabela-tarefas {
  position: relative;
  overflow-x: auto;
}

/* Legenda fixa no topo da área com rolagem */
.legenda-status-tarefas {
  position: sticky;
  top: 0;
  background-color: #f4f6f9;
  padding: 10px 0;
  z-index: 10;
  font-size: 12px;
  font-weight: 500;
}

/* Legendas lado a lado com rolagem se precisar */
.legenda-status-tarefas .legenda-itens {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0 10px;
  overflow-x: auto;
}

/* Item da legenda */
.fixo-topo-mobile {
  position: sticky;
  top: 0;
  background-color: #f4f6f9;
  z-index: 20;
  padding: 10px 16px;
  border-bottom: 1px solid #ccc;
}

.fixo-topo-mobile .filtro-mobile {
  max-width: 100%;
  margin-top: 10px;
}

#filtro-condominio.select2-login {
  width: 100% !important;
  max-width: 100%;
}

.legenda-status-tarefas {
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 8px;
  max-width: 100%;
}


/* Legenda padrão desktop (horizontal) */
.legenda-itens {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  font-size: 12px;
  font-weight: 500;
  flex-wrap: nowrap;
}

.legenda-itens li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.legenda-itens span {
  margin-right: 5px;
}

/* Legenda mobile: 2 por linha */
.legenda-itens-mobile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}

.legenda-itens-mobile li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.legenda-itens-mobile span {
  margin-right: 6px;
}

/* Mobile/Desktop toggle */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }
}

/* Padrão: mostra no desktop, esconde no mobile */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }
}
.legenda-itens-mobile {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  font-size: 12px;
}
.legenda-itens-mobile li {
  background: #f0f0f0;
  border-radius: 5px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}


/* Oculta elementos por tipo de dispositivo */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
  .desktop-only {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* Oculta o container visual do select2 do filtro desktop no mobile */
  #filtro-condominio,
  #filtro-condominio + .select2 {
    display: none !important;
  }
}


.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-top: 2px solid #00294B;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-left: 6px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


.loading-spinner-card {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #ccc;
  border-top: 2px solid #00294B;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-left: 4px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.form-control {
  margin-bottom: 16px;
}

.form-input {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #ffffff; /* padrão: editável */
}

/* Campos que vêm do sistema (não editáveis) */
.campo-sistema input,
.campo-sistema select {
  background-color: #f1f1f1;
  color: #555;
  cursor: not-allowed;
}


.grupo-header {
  background-color: #e5f1f7;
  font-weight: bold;
  cursor: pointer;
}

.grupo-header:hover {
  background-color: #d0e7f5;
}


.filtros-fixos {
  position: sticky;
  top: 0;
  background: white;
  z-index: 999;
  border-bottom: 1px solid #ccc;
  padding: 10px 20px;
}

.filtros-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #00294B;
  color: white; /* Isso aplica a cor branca ao texto por padrão */
  padding: 10px 15px;
  border-radius: 6px 6px 0 0;
  gap: 10px;
}

.filtros-header h3 {
  margin: 0;
  font-size: 18px;
  flex-grow: 1; /* permite o título ocupar o espaço disponível */
  color: white; /* ✅ Força o texto do h3 a ficar branco */
}

#btn-toggle-filtros {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}


.filtros-header h3 {
  margin: 0;
  font-size: 18px;
}

#btn-toggle-filtros {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

#filtros-container {
  border: 1px solid #ccc;
  border-top: none;
  padding-top: 10px;
  display: block;
}

 .formularioCadastro {
     width: 100%;
     background: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
 .formularioCadastro label {
     display: block;
     margin-top: 15px;
     font-weight: bold;
}

.formularioCadastro select, .formularioCadastro input[type="number"], .formularioCadastro input[type="text"], .formularioCadastro input[type="date"], .formularioCadastro textarea {
     width: 100%;
     padding: 10px;
     margin-top: 5px;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 12px;
}
 .formularioCadastro button {
     margin-top: 20px;
     padding: 10px 20px;
     background-color: #00294B;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
     transition: background-color 0.3s;
}
 .formularioCadastro button:hover {
     background-color: #00294B;
}



.filtros-fixos {
  position: sticky;
  top: 100px; /* ajuste conforme altura do topo */
  z-index: 99;
  background: #00294B;
  color: white;
  border-radius: 8px;
}



.btn-filtros-aplicar {
  background-color: #ffffff;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.btn-filtros-aplicar:hover {
  background-color: #f2f2f2;
}

@media (max-width: 768px) {
  #btn-toggle-historico {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  #btn-toggle-historico-mobile {
    margin-top: 30px;
  }
}
@media (max-width: 768px) {
  #btn-toggle-historico-web {
    margin-top: 30px;
  }
}

/* ADICIONANDO ORÇAMENTO */ 

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

.modal-conteudo {
  background: white;
  padding: 20px;
  border-radius: 10px;
  max-width: 700px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.item-orcamento {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.item-orcamento input {
  flex: 1 1 100px;
}



.botoes-centro {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.botoes-orcamento-item-salvar {
  display: flex;
  justify-content: center; /* centraliza o conteúdo */
  margin-top: 20px;
}

.fixo-topo-mobile h2 {
  margin-bottom: 30px; /* Espaço entre o título e o select */
}


/* TOOLTIP MODERNO */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  width: auto;
  max-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s;
  white-space: pre-line;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.formulario input,
.formulario select,
.formulario textarea,
.formulario .btn-padrao {
  font: inherit;
}


#btn-instalar {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background: #00294B;
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
}

/* Ajusta tamanho no mobile */
@media (max-width: 768px) {
  #btn-instalar {
    padding: 6px 10px;
    font-size: 12px;
    bottom: 15px;
    right: 15px;
  }
}

@media (max-width: 480px) {
  #btn-instalar {
    padding: 5px 8px;
    font-size: 11px;
    bottom: 10px;
    right: 10px;
  }
}



.modal-foto {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.modal-foto img {
  max-width: 90%;
  max-height: 80%;
  margin: auto;
  display: block;
  border-radius: 8px;
}

.modal-foto .close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.modal-foto .close:hover {
  color: #bbb;
}



.modal-pdf {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

.modal-pdf .close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.pdf-viewer {
  width: 90%;
  height: 85%;
  border: none;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}



td.prioridade-baixa {
  color: #2d862d;  /* Verde */
  font-weight: bold;
}

td.prioridade-normal {
  color: #1a75ff;  /* Azul */
  font-weight: bold;
}

td.prioridade-alta {
  color: #e68a00;  /* Laranja */
  font-weight: bold;
}

td.prioridade-urgente {
  color: #cc0000;  /* Vermelho */
  font-weight: bold;
}


.prioridade-baixa { color: #2d862d; font-weight: bold; }     /* Verde */
.prioridade-normal { color: #1a75ff; font-weight: bold; }   /* Azul */
.prioridade-alta { color: #e68a00; font-weight: bold; }     /* Laranja */
.prioridade-urgente { color: #cc0000; font-weight: bold; }  /* Vermelho */


.tipo-registro-container {
  margin-top: 15px;
}

.opcoes-tipo {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

/* container (opcional, só se ainda não tiver) */
.opcoes-tipo { display: flex; gap: 8px; flex-wrap: wrap; }

/* botão base */
.btn-tipo {
  /* flex: 1;  // use só se quiser que todos tenham mesma largura */
  display: inline-flex;              /* garante centralização do texto */
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;                 /* mais compacto */
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  background: #f6f6f6;
  cursor: pointer;
  font-size: 12px;                   /* padrão do formulário */
  line-height: 1;                    /* evita corte do texto */
  color: #ffffff !important;            /* garante texto visível */
  transition: background .2s, border-color .2s, box-shadow .2s, transform .1s;
  -webkit-appearance: none;
  appearance: none;
}

.btn-tipo.active {
  background: #005F9E;
  color: #fff !important;            /* garante contraste ao selecionar */
  border-color: #00294B;
  box-shadow: 0 2px 6px rgba(0,41,75,.22);
  transform: translateY(-1px);
}

.btn-tipo:hover { background: #efefef; }

/* mobile: um pouco mais de área de toque */
@media (max-width: 480px) {
  .btn-tipo { min-height: 36px; }
}



.botao-filtros {
    background: linear-gradient(45deg, #00294B, #1e4b67);
    color: #00294B;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.botao-filtros i {
    font-size: 18px;
}

.botao-filtros:hover {
    background: linear-gradient(45deg, #00294B, #00294B);
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


.btn-tratar {
    font-size: 12px;
    padding: 5px 10px;
    width: auto;
    min-width: 80px;
    display: block;
    margin: 5px auto; /* Centraliza no desktop */
}

/* Ajuste específico para telas menores (mobile) */
@media (max-width: 600px) {
    .btn-tratar {
        font-size: 11px;
        padding: 4px 8px;
        min-width: 60px;
        max-width: 120px; /* evita ficar largo demais */
        margin: 5px auto;
    }
}


/* Modal moderno */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.modal-content {
  background-color: #fff;
  margin: 80px auto;
  padding: 25px 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease;
}

.modal-content h3 {
  margin-top: 0;
  font-size: 20px;
  color: #00294B;
  margin-bottom: 15px;
  text-align: center;
}

/* Inputs e selects */
.modal-content input,
.modal-content select {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.modal-content input:focus,
.modal-content select:focus {
  border-color: #00294B;
  outline: none;
}

/* Botões */
.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.modal-buttons button {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.modal-buttons button:first-child {
  background-color: #00294B;
  color: #fff;
}

.modal-buttons button:first-child:hover {
  background-color: #1c4560;
}

.modal-buttons button:last-child {
  background-color: #ccc;
  color: #333;
}

.modal-buttons button:last-child:hover {
  background-color: #bbb;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}



.ocultar-por-cargo { display: none !important; }





@media (max-width: 768px) {
  .lista-tarefas, .lista-tarefas tbody, .lista-tarefas tr, .lista-tarefas td {
    display: block;
    width: 100%;
  }

  .lista-tarefas td {
    position: relative;
    padding-left: 50%;
    box-sizing: border-box;
  }

  .lista-tarefas td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    white-space: nowrap;
  }
}




.form-group {
  margin-bottom: 15px; /* ou 20px, conforme seu design */
}




.login-container form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 15px;
}

.btn-largo {
  width: 100%;
}

.botoes-duplos {
  display: flex;
  gap: 10px;
  width: 100%;
}

.botoes-duplos button {
  flex: 1;
}



.galeria-moderninha {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  overflow: hidden;
}

.carrossel-wrapper {
  width: 100%;
  overflow: hidden;
}

.carrossel {
  display: flex;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

/* Cada card de tarefa */
.card-item {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 16px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin: 10px;
  text-align: center;
}




.card-item h5 {
  font-size: 16px;
  margin: 8px 0;
  color: #153345;
}

.imagens-dupla {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.imagens-dupla img {
  width: 48%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background-color: #f0f0f0;
  border-radius: 8px;
  border: 1px solid #ccc;
  transition: 0.2s;
}

.imagens-dupla img:hover {
  transform: scale(1.03);
  cursor: zoom-in;
}

/* Setas */
.seta {
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 8px;
  color: #153345;
  user-select: none;
  z-index: 2;
}

.seta.esquerda {
  left: 10px; /* distância da borda esquerda */
  color: #ffffff;
}

.seta.direita {
  right: 10px; /* distância da borda direita */
  color: #ffffff;
}

/* Responsivo: para desktop mostrar 3 cards */
@media screen and (min-width: 1024px) {
  .card-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* Responsivo: tablet mostra 2 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .card-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Mobile: 1 card por vez */
@media screen and (max-width: 767px) {
  .card-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


.toolbar-filtros {
  display: flex;
  gap: 10px;
  margin: 10px 0 15px;
  flex-wrap: wrap;
}
#bloco-filtros label { display:block; margin-top:10px; }
#bloco-filtros .select2-container { width: 100% !important; }




/* Container geral */
.paginacao {
  display: flex;
  flex-direction: column; /* info em cima, botões embaixo */
  align-items: flex-start;
  padding: 10px 0 0;
  gap: 6px;
}

/* Texto */
.paginacao .info {
  font-size: 12px;
  color: #666;
}

/* Botões container */
.paginacao .botoes {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap; /* evita quebra */
}

/* Botões */
.paginacao button {
  padding: 4px 8px;
  min-width: 36px;
  min-height: 32px;
  border: 1px solid #ddd;
  background: #005F9E;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
}

.paginacao button.ativo {
  background: #00294B;
  color: #fff;
  border-color: #00294B;
}

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

/* Mobile */
@media (max-width: 600px) {
  .paginacao {
    align-items: center; /* centraliza tudo */
  }
  .paginacao .info {
    text-align: center;
  }
  .paginacao .botoes {
    flex-wrap: nowrap; /* mantém na mesma linha */
    justify-content: center;
  }
  .paginacao button {
    padding: 3px 6px;
    min-width: 32px;
    font-size: 12px;
  }
}






/* Container geral dos atalhos */
.botoes-acesso-rapido {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* agora à esquerda no desktop */
  gap: 6px;
  padding: 10px 0;
}

/* Botões individuais */
.botoes-acesso-rapido button {
  height: 45px;               /* altura fixa */
  padding: 4px 10px;
  min-width: 80px;
  border: 1px solid #ddd;
  background: #005F9E;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  white-space: normal;      /* permite quebra */
  word-break: break-word;   /* quebra palavras longas */
  text-align: center;       /* centraliza texto quebrado */
   margin-top: 20px; /* espaço acima dos botões */
}


.botoes-acesso-rapido button.ativo {
  background: #00294B;
  color: #fff;
  border-color: #00294B;
   margin-top: 20px; /* espaço acima dos botões */
}

.botoes-acesso-rapido button:disabled {
  opacity: .5;
  cursor: not-allowed;
   margin-top: 20px; /* espaço acima dos botões */
}

/* Mobile: 3 botões por linha */
@media (max-width: 768px) {
  .botoes-acesso-rapido {
    justify-content: center; /* centraliza as linhas */
  }
  
  .botoes-acesso-rapido button {
    flex: 1 1 calc(33.33% - 8px);
    text-align: center;
    white-space: normal; /* reforço para mobile */
  }
}




/* Container geral dos cards */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* alinhamento à esquerda */
  gap: 10px;
  margin-top: 10px;
}
/* Cada card */
.card {
  background: #00294B; /* cor padrão */
  border-radius: 8px;
  padding: 12px;
  flex: 1 1 calc(25% - 10px); /* 4 por linha no desktop */
  min-width: 160px;
  max-width: 220px;
  box-shadow: 0 2px 6px rgb(255, 255, 255);
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
}

.card p {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.card .legenda-card {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: #ffffff;
}

/* Card selecionado */
.card.selecionado {
  background: #005F9E; /* cor do card selecionado */
}

.card.selecionado .legenda-card {
  color: #fff; /* mantém o texto branco */
}

.card.selecionado p {
  color: #fff; /* deixa o número branco */
}

/* Mobile: 2 por linha */
@media (max-width: 768px) {
  .card {
    flex: 1 1 calc(50% - 10px);
    min-width: unset;
    justify-content: flex-start; /* Desktop: alinhado à esquerda */
  }
}

/* Extra pequeno: 1 por linha */
@media (max-width: 480px) {
  .card {
    flex: 1 1 100%;
    justify-content: center; /* Mobile: centralizado */
  }
}

@media (max-width: 768px) {
  .cards {
    justify-content: center; /* Mobile: centralizado */
  }
}






/* ====== PADRÃO GERAL DE FORMULÁRIOS ====== */




/* Fonte e espaçamento geral */
form {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #333;
}

.input-padrao,
select.input-padrao,
textarea.input-padrao,
input[type="file"].input-padrao {
  width: 100%;
  max-width: 100%;
  height: 42px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: inherit;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
  display: block;
}

/* Ajuste para textarea (altura maior e redimensionamento vertical) */
textarea.input-padrao {
  min-height: 80px;
  resize: vertical;
}

/* Remove estilos padrões de navegadores em selects */
select.input-padrao {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

/* Efeito ao focar no campo */
.input-padrao:focus,
select.input-padrao:focus,
textarea.input-padrao:focus {
  border-color: #007BFF;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
  outline: none;
}

/* Labels */
label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Agrupamento de campos */
.form-group {
  margin-bottom: 15px;
}

/* Placeholder mais discreto */
::placeholder {
  color: #888;
}

/* Campos desabilitados */
.input-padrao:disabled,
select.input-padrao:disabled,
textarea.input-padrao:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}



/* ====== PADRÃO PARA LABELS ====== */
label {
  display: block;          /* força cada label a ficar acima do campo */
  font-weight: bold;       /* deixa o texto mais forte */
  font-size: 12px;         /* padrão igual ao resto do form */
  font-family: inherit;    /* mesma fonte do form */
  color: #333;             /* cor padrão */
  margin-bottom: 5px;      /* espaço entre o label e o campo */
}







/* Garante que TUDO dentro do formulário herde a mesma fonte/tamanho */
.formulario button,
.formulario input,
.formulario select,
.formulario textarea,
.formulario label {
  font: inherit;          /* herda família, tamanho e peso */
  color: inherit;
}

/* Seus inputs padrão */
.formulario .input-padrao,
.formulario select.input-padrao,
.formulario textarea.input-padrao {
  width: 100%;
  height: 42px;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .3s, box-shadow .3s;
  display: block;
}

/* Seu botão padrão */
.formulario .btn-padrao {
  background-color: #00294B;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font: inherit;          /* <<< mantém 12px aqui também */
  cursor: pointer;
  transition: background-color .2s ease;

  min-width: 200px;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.formulario .btn-padrao:hover { background-color: #00294B; }

/* Botão secundário (para "Não") */
.formulario .btn-secundario {
  background: #e5e7eb;
  color: #ffffff;   /* ✅ cor da fonte branca */
  border: 1px solid #d1d5db;
  padding: 10px 16px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}


/* (Opcional) Select2 dentro do form herdar fonte */
.formulario .select2-container .select2-selection--single,
.formulario .select2-dropdown {
  font: inherit;
}


.btn-fonte{
  font-size: 12px;
  font-family: inherit;
    color: #ffffff !important; /* Usando !important para garantir que sobreponha outros estilos */

}

.botao-por-cargo {

  font-size: 12px;
  font-family: inherit;
  color: #ffffff !important; /* Usando !important para garantir que sobreponha outros estilos */

}

.btn-reabrir{
  font-size: 12px;
  font-family: inherit;
  color: #ffffff !important; /* Usando !important para garantir que sobreponha outros estilos */

}

.botao-padrao-geral 
{

  width: 100%;
  max-width: 100%;
  height: 42px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: inherit;
    color: #ffffff !important; /* Usando !important para garantir que sobreponha outros estilos */

  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
  display: block;

}

.btn-acao
{

  width: 100%;
  max-width: 100%;
  height: 42px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: inherit;
    color: #ffffff !important; /* Usando !important para garantir que sobreponha outros estilos */

  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
  display: block;

}



/* aplica no <table> que envolve #tb-orcamentos-cadastrados */
.tabela-orc-resp {
  width: 100%;
  border-collapse: collapse;
}

.tabela-orc-resp th,
.tabela-orc-resp td {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

/* Mobile: thead some e linhas viram cartões com rótulo */
@media (max-width: 700px) {
  .tabela-orc-resp thead { display: none; }
  .tabela-orc-resp tr {
    display: block;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 6px 8px;
  }
  .tabela-orc-resp td {
    display: grid;
    grid-template-columns: 40% 1fr; /* label / valor */
    gap: 8px;
    border: none;
    padding: 6px 0;
    text-align: left !important; /* evita centralizações ruins */
  }
  .tabela-orc-resp td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #333;
  }
  .tabela-orc-resp td[data-actions="true"] {
    grid-template-columns: 1fr;
  }
  .tabela-orc-resp .acoes {
    justify-content: flex-start !important;
  }
}

/* Botão do PDF sem fundo (caso queira global) */
.btn-abrir-pdf{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  line-height: 1;
  cursor: pointer;
}
.btn-abrir-pdf i{ font-size:18px; }
.btn-abrir-pdf:hover i{ opacity:.85; }



/* Tabela responsiva (apenas mobile) */
@media (max-width: 768px) {
  table.tabela-orc-resp {
    display: block;                /* permite rolar na horizontal */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-width: 640px;              /* ajuste se precisar */
  }
  table.tabela-orc-resp th,
  table.tabela-orc-resp td {
    white-space: nowrap;           /* evita quebra que “corta” conteúdo */
  }

  /* formulário em 1 coluna no mobile (opcional) */
  .grid-orc { grid-template-columns: 1fr !important; }
}













/* ===== Fix responsivo da tabela de orçamentos ===== */
@media (max-width: 768px){
  .tabela-orc-resp{
    width:100%;
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0;
  }

  /* cada linha vira um "cartão" ocupando toda a largura */
  .tabela-orc-resp thead{ display:none; }
  .tabela-orc-resp tbody tr{
    display:block;
    width:100%;
    background:#fff;
    border:1px solid #eee;
    border-radius:10px;
    padding:6px 0;
    margin:10px 0;
  }

  /* células empilhadas e alinhadas */
  .tabela-orc-resp tbody td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    padding:10px 14px;
    border-bottom:1px solid #eee;
    text-align:left !important;
  }
  .tabela-orc-resp tbody td:last-child{ border-bottom:0; }

  /* botões lado a lado e próximos */
  .tabela-orc-resp tbody td:last-child > div{
    display:flex !important;
    gap:8px;
    justify-content:center;   /* deixa os dois juntinhos no centro */
    width:100%;
  }
  .tabela-orc-resp tbody td:last-child button{
    flex:0 0 auto;            /* evita esticar demais no mobile */
  }
}
/* coloca no style.css */
@media (max-width: 768px){
  .tabela-orc-resp tbody td:last-child > div{
    display:inline-flex !important;
    gap:8px;
  }
}


/* ===== Tabelas de Orçamentos – comportamento mobile ===== */
@media (max-width: 768px){
  /* escopo nas duas tabelas responsivas */
  .tabela-orc-resp thead{ display:none; }

  .tabela-orc-resp tbody tr{
    display:block;
    background:#fff;
    border:1px solid #eee;
    border-radius:10px;
    margin:10px 0;
    overflow:hidden;
  }

  .tabela-orc-resp tbody td{
    display:block;
    width:100%;
    padding:10px 14px;
    border-bottom:1px solid #eee;
    text-align:left !important;
  }
  .tabela-orc-resp tbody td:last-child{ border-bottom:0; }

  /* mostra o rótulo do campo acima do valor */
  .tabela-orc-resp tbody td::before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    font-weight:600;
    color:#667085;
    margin-bottom:4px;
  }

  /* Ações: botões empilhados (um embaixo do outro) */
  .tabela-orc-resp tbody td[data-label="Ações"] .acoes-local{
    display:grid !important;
    grid-template-columns: 1fr;
    gap:8px;
    width:100%;
  }

  /* reduz levemente a tipografia para caber tudo */
  .tabela-orc-resp tbody td,
  .tabela-orc-resp tbody td *{
    font-size:14px;
  }
}


/* ===== Orçamentos cadastrados (mobile) ===== */
@media (max-width: 768px){
  /* Empilhar Aprovar/Reprovar um embaixo do outro */
  #orcamento-app .tabela-orc-resp tbody td[data-label="Ações"] .acoes{
    display: grid !important;          /* sobrescreve o inline flex */
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }
  #orcamento-app .tabela-orc-resp tbody td[data-label="Ações"] .acoes .btn-padrao{
    width: 100%;                        /* botão ocupa toda a linha */
  }

  /* (Opcional) margem e borda iguais ao outro bloco */
  #orcamento-app .tabela-orc-resp tbody tr{
    margin: 10px 0;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
}










/* badge simples ao lado do título */
.orc-count-badge {
  display: inline-block;
  margin-left: 6px;   /* garante espaço do texto até o badge */
  padding: 2px 8px;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 999px;
  background: #e8eef6;
  color: #153345;
  border: 1px solid #cfd9e8;
  vertical-align: middle;
}



  .grupo-sumario{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .grupo-sumario .meta{ display:flex; gap:20px; align-items:center; }
  .grupo-sumario .meta b{ color:#153345 }
  .grupo-conteudo{ margin-top:8px; border:1px solid #eef2f6; border-radius:8px; padding:8px; background:#fff; }
  .grupo-conteudo table{ width:100%; border-collapse:collapse; }
  .grupo-conteudo th,.grupo-conteudo td{ padding:6px 8px; border-bottom:1px solid #f0f2f5; }
  .badge-melhor{
    display:inline-block; margin-left:6px; padding:2px 8px; font-size:12px; font-weight:700;
    border-radius:999px; background:#eaf7ea; color:#1b5e20; border:1px solid #b8e3b8; white-space:nowrap;
  }
  .valor-cell{ display:flex; justify-content:flex-end; align-items:center; gap:8px; }


  /* garante que o card ocupe a largura da tabela, sem cortar botões */
.grupo-wrap { padding-top: 8px; }
.grupo-conteudo { overflow-x: auto; }
.grupo-conteudo table { width: 100%; border-collapse: collapse; }



.tabela-orcamentos .btn-padrao {
  min-width: 100px;       /* largura mínima menor que a atual */
  padding: 6px 12px;      /* altura e largura confortáveis */
  font-size: 14px;        /* fonte levemente menor */
}

.tabela-orcamentos .acoes {
  display: flex;
  gap: 12px;              /* espaço entre os botões */
  justify-content: flex-end;
}








/* Barra fixa do topo (logo abaixo do header principal) */
.fixo-topo-mobile{
  position: sticky;                 /* gruda no topo ao rolar */
  top: var(--header-height, 64px);  /* ajuste se seu header tiver outra altura */
  z-index: 1000;                    /* fica acima do header/conteúdo */
  background: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* título à esquerda, botões à direita */
  gap: 12px;
  flex-wrap: wrap;                  /* permite quebrar no mobile */
  text-align: left;   /* 👈 alinhando texto à esquerda */
    align-items: flex-start; /* garante que botões/labels também fiquem à esquerda */
}

.fixo-topo-mobile h2{
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  flex: 0 0 auto;
  
}

/* Container dos botões (ao lado do título no desktop) */
.acoes-topo-fixas{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Botões padrão (use suas classes existentes) */
.btn-padrao.btn-web{
  white-space: nowrap;
}

/* Bloco do filtro (fica abaixo no wrap) */
.filtro-mobile.moderno{
  flex: 1 1 100%;
  margin-top: 8px;
}

/* Responsivo: no mobile os botões descem e ocupam a largura de forma elegante */
@media (max-width: 768px){
  .acoes-topo-fixas{
    order: 3;                /* joga os botões para baixo do filtro se preferir */
    width: 100%;
    justify-content: space-between;
  }
  .btn-padrao.btn-web{
    width: 49%;
    text-align: center;
  }
}














/* ====== Containers dos blocos (Aprovados / Reprovados) ====== */
.section-card{
  border:1px solid #dfe7ef;
  border-radius:10px;
  background:#fff;
  padding:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* Cabeçalho do container com linha de separação */
.section-card .section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid #e9eef5;
  margin-bottom:10px;
}

/* Título do bloco */
.section-card .section-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#153345;
}

/* Ajustes responsivos */
@media (max-width:880px){
  .section-card{ padding:10px; border-radius:8px; }
  .section-card .section-title{ font-size:16px; }
}








/* ====== FIX: manter conteúdo no mobile, esconder só a lista ====== */
@media (max-width: 768px) {
  .layout-desktop {
    display: flex !important;
    flex-direction: column !important;
  }
  .lista-condominios {
    display: none !important; /* só a lista some */
  }
  .conteudo-direita {
    display: block !important;
    width: 100% !important;
  }
}




/* Botão branco para a ação Despachar */
.btn-despachar{
  background: #fff !important;
  color: #00294B !important;
  border: 1px solid #00294B !important;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.btn-despachar:hover{
  background: #f7f7f7 !important;
}
.btn-despachar:active{
  transform: translateY(1px);
}



.badge-mudanca {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#e53935; /* vermelho */
  box-shadow: 0 0 0 2px rgba(229,57,53,.2);
}














/* Cabeçalho do bloco fixo */
.fixo-topo-mobile {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
}

/* Linha do título + seta */
.fixo-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Área colapsável */
.fixo-mobile-body {
  transition: height .25s ease, opacity .2s ease;
}

/* Botão da seta (oculto por padrão; exibido só no mobile) */
.seta-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  cursor: pointer;
  line-height: 1;
  border-radius: 8px;
}

/* --- Comportamento no MOBILE --- */
@media (max-width: 1024px) {
  .fixo-topo-mobile {
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border-bottom: 1px solid #eee;
  }

  .seta-toggle { display: inline-flex; }

  /* Quando colapsado, escondemos o corpo */
  .fixo-topo-mobile.colapsado .fixo-mobile-body {
    display: none;
  }
}

/* --- Comportamento no DESKTOP --- */
@media (min-width: 1025px) {
  /* No desktop, seta não aparece e bloco fica sempre aberto */
  .seta-toggle { display: none !important; }
  .fixo-topo-mobile .fixo-mobile-body { display: block !important; }
}
















.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sortable .tri { margin-left: 4px; font-size: 12px; opacity: .8; }


/* --- TOPO MOBILE: título à esquerda + chevron à direita --- */
.only-mobile.fixo-topo-mobile{
  position: sticky;
  top: var(--header-height, 64px);
  z-index: 1000;
  background: #fff;
  padding: 10px 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  gap: 8px; /* espaço entre a linha do título e o bloco ao abrir */
}

/* Linha do topo ocupa 100% e distribui h2 (esq) e botão (dir) */
.only-mobile .linha-topo{
  display: flex;
  align-items: center;
  justify-content: space-between; /* empurra os itens para as extremidades */
  width: 100%;
}

.only-mobile .linha-topo h2{
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #00294B;
  flex: 1 1 auto; /* garante que o título use o espaço da esquerda */
  min-width: 0;   /* evita quebra estranha */
}

/* Botão/chevron à direita */
.only-mobile .toggle-mobile-filtro{
  background: transparent !important;
  border: 0 !important;
  padding: 6px 6px !important;
  font-size: 12px !important;
  line-height: 1;
  color: #00294B;
  cursor: pointer;
  margin-left: 8px;   /* separa do título */
  flex: 0 0 auto;     /* fixa no lado direito */
}

/* Chevron gira ao abrir */
#btn-collapse-mobile-filtro-adm[aria-expanded="true"] .chevron{ transform: rotate(180deg); }
#btn-collapse-mobile-filtro-adm .chevron{ transition: transform .2s ease; }

/* Respiro entre o título e o bloco do select quando abrir */
#mobile-filter-wrapper-adm{
  margin-top: 6px;  /* curto, sem muito espaço */
}

/* Wrapper do select como “cartão” leve no mobile */
#mobile-filter-wrapper-adm .filtro-mobile{
  display: block;
  position: static;
  margin: 0;
  padding: 8px 10px;     /* altura menor */
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Empilhar itens internos com pouco espaço */
#mobile-filter-wrapper-adm .filtro-mobile > * + *{
  margin-top: 8px;       /* um embaixo do outro, espaço curto */
}

/* Os elementos base ocupam 100% do container */
#mobile-filter-wrapper-adm select,
#mobile-filter-wrapper-adm input,
#mobile-filter-wrapper-adm .select2,
#mobile-filter-wrapper-adm .select2-container{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box;
}

/* Select específico também full width */
#select-condominios-mobile,
#select-condominios-mobile.select2-login{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
}

/* Ajustes finos do Select2 para preencher e ter altura confortável */
#mobile-filter-wrapper-adm .select2-container .select2-selection--single{
  height: 40px;
}

#mobile-filter-wrapper-adm .select2-selection__rendered{
  line-height: 40px !important;
}

#mobile-filter-wrapper-adm .select2-selection__arrow{
  height: 40px !important;
}

/* Controla visibilidade pelo atributo [hidden] */
#mobile-filter-wrapper-adm[hidden]{ display: none !important; }

/* Mobile-first: garante que tudo acima aplique só no mobile, se preferir */
@media (min-width: 769px){
  /* opcional: reduzir interferência em desktop */
  .only-mobile.fixo-topo-mobile{ position: static; box-shadow: none; }
}



/* Botão "Tarefas" mais compacto */
#btn-toggle-historico {
  padding: 4px 10px;       /* reduz altura */
  font-size: 13px;         /* texto menor */
  line-height: 1.2;        /* menos respiro vertical */
  height: auto;            /* altura se ajusta ao conteúdo */
  min-height: 32px;        /* limite mínimo agradável */
  margin: 0;               /* remove margens extras */
  box-sizing: border-box;
}



/* trava largura do campo + dropdown em 100% do container */
.dropdown-fixed {
  position: relative;      /* ancora o dropdown aqui */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;            /* se o pai for flex */
}

.dropdown-fixed .select2-container{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box;
}

.dropdown-fixed .select2-container--open .select2-dropdown{
  width: 100% !important;
  min-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box;
}


/* fixa largura da lista suspensa em 100% do container */
.select2-fixed-width + .select2-container--open .select2-dropdown {
  width: 100% !important;
  min-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box;
}


/* Garante que o select e o Select2 acompanhem a largura do topo mobile */
.fixo-topo-mobile .filtro-mobile select,
.fixo-topo-mobile .filtro-mobile .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}


#select-condominios-mobile,
#select-condominios-mobile + .select2-container {
  width: 100% !important;
}


#select-condominios-mobile,
#select-condominios-mobile + .select2-container {
  width: 305px !important;
  max-width: 350px !important;
}


/* === Galeria / Carrossel === */
.galeria-moderninha{
  position: relative;
  overflow: hidden;         /* mantém só a “página” visível */
  padding: 8px 32px;        /* espaço para as setas laterais */
}

.galeria-moderninha .seta{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  background: rgba(0,0,0,.55);
  color: #fff; cursor: pointer;
  z-index: 20;              /* fica acima das imagens */
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.galeria-moderninha .seta.esquerda{ left: 4px; }
.galeria-moderninha .seta.direita { right: 4px; }
.galeria-moderninha .seta:focus-visible{ outline: 2px solid #fff; }
@media (hover:hover){ .galeria-moderninha .seta:hover{ background: rgba(0,0,0,.7);} }

@media (max-width:768px){
  .galeria-moderninha{ padding: 8px 8px; }
  .galeria-moderninha .seta{ width: 36px; height: 36px; font-size: 16px; }
}

.galeria-moderninha .carrossel{
  display: flex;
  gap: 12px;
  transition: transform .35s ease;
  will-change: transform;
  width: 100%;
}

#carrossel-tarefas .card-item{
  flex: 0 0 auto;   /* não encolher */
  width: 100%;      /* 1 por “página” no mobile */
  max-width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  padding: 10px;
}
@media (min-width:768px){ #carrossel-tarefas .card-item{ width: 50%; } }      /* 2 por página */
@media (min-width:1024px){ #carrossel-tarefas .card-item{ width: 33.3333%; } } /* 3 por página */

#carrossel-tarefas .imagens-dupla{
  display: flex; gap: 8px;
}
#carrossel-tarefas .imagens-dupla img{
  width: 100%;
  max-width: calc(50% - 4px);
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}


/* ------------------------ ICONE NOTIFICAÇÃO ------------------------------*/

/* 🔔 Bell menor */
.btn-bell{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:0; background:transparent; cursor:pointer; color:#fff;
  font-size:16px;
}
.btn-bell .badge{
  position:absolute; top:-4px; right:-4px; min-width:14px; height:14px; padding:0 4px;
  border-radius:50%; background:#E53935; color:#fff; font-size:10px; line-height:14px; text-align:center;
}

/* 🔽 Dropdown compacto e legível mesmo dentro do header branco */
.notif-dropdown{
  position:absolute; top:36px; right:0; width:280px; background:#fff; color:#1f2937 !important;
  border:1px solid #e5e7eb; box-shadow:0 8px 24px rgba(0,0,0,.12); border-radius:8px; overflow:hidden; z-index:9999;
  font-size:13px;
}
.notif-header,.notif-footer{
  padding:8px 10px; background:#f5f7fa; display:flex; align-items:center; justify-content:space-between;
}
.notif-header strong{ color:#00294B !important; font-size:14px; font-weight:700; }

/* Lista mais enxuta */
.notif-list{ max-height:260px; overflow-y:auto; }
.notif-item{ padding:8px 10px; border-bottom:1px solid #f1f5f9; cursor:pointer; display:flex; justify-content:space-between; gap:10px; }
.notif-item:hover{ background:#f8fafc; }
.notif-titulo{ font-weight:600; font-size:13px; color:#111827 !important; }
.notif-msg{ margin-top:2px; font-size:12px; color:#4b5563 !important; }
.notif-nao-lida .notif-titulo{ font-weight:700; }
.notif-data{ font-size:11px; color:#6b7280 !important; white-space:nowrap; }
.notif-vazio{ padding:12px; color:#6b7280; font-size:12px; }

/* Usa seus botões padrão no dropdown (sem inflar o tamanho) */
.notif-header .btn-padrao,
.notif-footer .btn-padrao{
  /* assume sua classe .btn-padrao; apenas garante tamanho moderado no dropdown */
  padding:6px 10px; font-size:12px; line-height:1.2;
}


/* overlay para mobile */
.notif-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9998;
}

/* modal central no mobile */
.notif-dropdown.mobile{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 360px) !important;
  max-height: 70vh !important;
  border-radius: 12px !important;
  z-index: 9999 !important;
}
.notif-dropdown.mobile .notif-list{
  max-height: calc(70vh - 96px); /* header+footer ~96px */
}

/* botões menores dentro do dropdown */
.notif-header .btn-padrao,
.notif-footer .btn-padrao{
  padding: 4px 8px;
  font-size: 11px;
  width: auto;
}

/* opcional: no desktop segue como dropdown normal ancorado ao sino */
@media (max-width: 768px){
  .btn-bell{ width: 28px; height: 28px; font-size: 16px; }
}

/*------------------------- TUTORIAL INSTALACAO APP ---------------------------------


/* --- Modal tutorial iOS --- */
/* Modal tela cheia com áreas seguras e viewport dinâmico */
#modal-ios-tutorial{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  background:#000;
  /* garante que nada fique embaixo do notch/barras */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

#modal-ios-tutorial .box{
  width:100vw;
  height:100dvh;            /* usa viewport dinâmica do iOS */
  max-width:none;
  max-height:none;
  display:flex;
  flex-direction:column;
  background:#000;
  border-radius:0;
}

#modal-ios-tutorial header {
  flex: 0 0 auto;
  min-height: 50px;
  background: #00294B;
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;          /* evita quebra do título */
  overflow: hidden;
  text-overflow: ellipsis;      /* se for muito grande, mostra "..." */
}

#modal-ios-tutorial header button {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 24px;              /* maior que antes */
  cursor: pointer;
  margin-left: 12px;
  flex: 0 0 auto;               /* garante que fique na ponta direita */
}

#modal-ios-tutorial .content{
  /* ocupa todo o restante da tela, descontando o header */
  flex:1 1 auto;
  min-height:0;             /* evita overflow em iOS */
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;          /* sem scroll acidental */
}

/* Regras de sizing orientadas pela proporção do vídeo */
#modal-ios-tutorial video{
  background:#000;
  /* fallback seguro caso a classe não esteja aplicada ainda */
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Retrato: prioriza altura, respeitando largura */
#modal-ios-tutorial video.portrait{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
}

/* Paisagem: prioriza largura, respeitando altura */
#modal-ios-tutorial video.landscape{
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
}


/*----------------------- AJUSTADO 2026 ---------------------------------- */

/* TOPO WEB */
.topo-web {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: #ffffff;
  padding: 2px 0 6px 0;
  position: sticky;
  top: 60px;
  margin-top: -28px;
  z-index: 10;
  border: none; /* 🔹 removemos o border-bottom */
}

/* Linha separada */
.topo-web::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #eee;
  margin-top: 46px; /* 🔹 controla a distância da linha em relação ao topo */
}

/* Título com barrinha azul */
.topo-web .titulo-web {
  position: relative;
  margin: 0;
  padding-left: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #00294B;
  line-height: 1;
  text-align: left;
  border: none;
  transform: translateY(-50px); /* mantém o texto no ponto certo */
}

/* Barrinha azul à esquerda */
.topo-web .titulo-web::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #00294B;
  border-radius: 2px;
}



/* Somente para telas maiores */
@media screen and (min-width: 768px) {
    .topo-web {
        display: flex;
    }
    .fixo-topo-mobile {
        display: none !important;
    }
}



/* =============================
   BLOCO DE FORMULÁRIO PADRÃO
   ============================= */

.formulario {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  margin-top: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

  display: flex;
  flex-direction: column;
  gap: 12px;

  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  max-width: 100%;
}

/* =============================
   CABEÇALHO / TÍTULO DO FORMULÁRIO
   ============================= */

.formulario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Botão estilo aba (título clicável) */
.formulario-titulo {
  font-size: 15px;
  font-weight: 600;
  color: #153345;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  gap: 6px;
}

.formulario-titulo:hover {
  color: #0d1f2d;
  transform: scale(1.02);
}

/* Aba ativa */
.formulario-titulo.ativo {
  color: #fff;
  background: #153345;
  border-radius: 6px;
  padding: 6px 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Conteúdo do formulário (exibido por aba) */
.formulario-conteudo {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.formulario-conteudo.ativo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Suave entrada do conteúdo */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}