/* =======================================================
   RESET E BASE
======================================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'inherit', sans-serif;
  background: #f5f5f5;
  color: #571281;
  display: flex;
  flex-direction: column;
}
a {
  text-decoration: none;
  color: inherit;
}

html, body {
  height: auto;
  overflow-x: hidden;
}
.layout {
  flex: 1;
  display: flex;
  min-height: 0; /* previne empurrar para baixo */
}

main.conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ----------------------------------
   🔁 COMPONENTES REUTILIZÁVEIS
---------------------------------- */

/* Logo central reutilizável */
.logo-inicial {

  width: 10%;           /* controla o tamanho da logo */
  height: auto;         /* mantém a proporção natural */
  max-width: 300px;     /* evita que fique muito grande em telas largas */
  min-width: 120px;     /* evita que fique pequena demais em telas estreitas */
  display: block;
  margin: 0 auto 20px auto;  /* centraliza horizontalmente e dá espaçamento abaixo */
  object-fit: contain;
}

.logo-conteiner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.logo-login {
  width: 40%;         /* ou algo fixo como 150px */
  max-width: 180px;
  height: auto;
  display: block;
  object-fit: contain;
}

.logo {
  display: block;
  max-width: 50px; /* Reduza se estiver muito grande */
  width: auto;
  height: auto;
  margin: 0; /* Remova o margin auto que centraliza indevidamente */
}

.nome-sistema {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #571281;;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

/* Inputs e botões globais (exceto botões específicos de página) 
form input,
form select,
form button,
.login-page input,
.login-page select,
.login-page button {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Botão base */
button {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* ----------------------------------
   📱 RESPONSIVO GLOBAL
---------------------------------- */
@media (max-width: 480px) {
  body {
    padding: 10px;
  }
}
/* =======================================================
   LAYOUT PADRÃO DO INICIAL
======================================================= */
/* Topo */

.hero-login {
  position: absolute;
  top: 20px;
  right: 30px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 10;
}

.hero-login .usuario-nome {
  font-weight: bold;
  color: #571281;
}

.btn-entrar,
.logout-btn {
  color: #fff;
  background-color: #7e57c2;
  padding: 8px 15px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}

.btn-entrar:hover,
.logout-btn:hover {
  background-color: #5e3d91;
}

body.pagina-index {
  display: block !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
}
/* Garante que o conteúdo principal cresça normalmente */
body.pagina-index .container,
body.pagina-index section {
  height: auto;
  overflow: visible;
}


html.pagina-index, body.pagina-index {
  overflow-y: auto !important;
}

.no-scroll {
  overflow: hidden;
}
.menu-lateral {
  width: 220px;
  background-color: #6a1b9a;
  flex-shrink: 0;
  overflow-y: auto;
  font-size: 1.1rem; /* 🔠 Aumenta o tamanho da fonte */
  line-height: 1.5;   /* 🧘 Melhor espaçamento entre linhas */
}
.menu-lateral a.active {
  background-color: #ede7f6;
  font-weight: bold;
  border-radius: 4px;
}

#conteudo-principal {
  justify-content: center;  /* 👈 Centraliza horizontalmente ultimo*/
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}


/* =======================================================
   LOGIN
======================================================= */

body.pagina-login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(to right, #c2acea, #8c6bb1); /* degrade lilás */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

.login-container {
  background-color: #fff;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-container h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #6a1b9a;
  font-size: 24px;
}

.login-container label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 18px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

.login-container button {
  width: 100%;
  padding: 12px;
  background-color: #6a1b9a;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.login-container button:hover {
  background-color: #4a0f6b;
}

.login-container .mensagem-erro {
  color: red;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}


/* =======================================================
   AGENDA
======================================================= */
body.pagina-agenda {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.pagina-agenda {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fc .fc-scrollgrid {
  overflow-x: hidden !important;
}
.fc .fc-col-header,
.fc .fc-scrollgrid-sync-table {
  overflow-y: hidden !important;
}
.fc .fc-scrollgrid-sync-table {
  width: 100% !important;
  table-layout: fixed !important;
}
.fc-col-header-cell-cushion {
  white-space: normal !important;
  text-align: center;
}

* Impede rolagem horizontal na área de dias da semana */
.fc .fc-scrollgrid {
  overflow-x: hidden !important;
  }

  .fc .fc-col-header,
.fc .fc-scrollgrid-sync-table {
  overflow-y: hidden !important;
}

.fc .fc-scrollgrid,
.fc .fc-col-header,
.fc .fc-scrollgrid-sync-table {
  min-height: 0 !important;
}

/* Força a tabela de dias a caber no espaço disponível */
.fc .fc-scrollgrid-sync-table {
  width: 100% !important;
  table-layout: fixed !important;
}

/* Permite quebra de texto nos dias, caso estejam longos */
.fc-col-header-cell-cushion {
  white-space: normal !important;
  text-align: center;
  font-size: 13px;
  padding: 6px 4px;
}

/* Estilo padrão para todos os horários */
.fc-timegrid-slot-label {
  font-size: 14px;
  padding-right: 6px;
  text-align: left;
  color: #333;
}

/* Estilo específico para horários de meia hora (ex: 14:30, 15:30) */
.fc-timegrid-slot-label[data-time$="30:00"] {
  font-size: 11px;
  text-align: right;
  color: #777;
}

/* 🔝 TOPO COMPACTO E CENTRALIZADO */
.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #c2acea; /* lilás claro */
  padding: 10px 20px;
  height: 60px;
  border-bottom: 1px solid #aaa;
  font-size: 14px;
  font-weight: 500;
}

.topo-esquerda,
.topo-direita {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #571281;
}

.topo-centro {
 
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  
}
.info-empresa-usuario {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.2;
  text-decoration: underline dotted;
  gap: 4px; /* Espaçamento entre empresa e usuário */
}

.topo-direita.usuario {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  position: relative;
}
.seletor-usuario-box {
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 1000;
  background: white;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#mini-datepicker {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  padding: 5px;
  border-radius: 6px;
  z-index: 9999;
}

.usuario {
  position: relative;
  cursor: pointer;
}

#usuario-nome {
  font-size: 13px;
  color: #571281;;
   margin-top: 6px; /* Aumente este valor para mais espaço */
}

.menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 5px 0;
  display: none;
  min-width: 130px;
  z-index: 1000;
}

.menu-dropdown.show {
  display: block;
}

.menu-dropdown a {
  display: block;
  padding: 8px 12px;
  color: #6a1b9a;
  text-decoration: none;
  font-size: 14px;
}

.menu-dropdown a:hover {
  background-color: #eee;
}

.btn-logout {
  color: #b00020;
  font-weight: bold;
}

/* === Layout Geral === */
.pagina-agenda .layout {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  
}

.pagina-agenda .menu-lateral {
  width: 220px;
  background-color: #f3f0fb;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
}

.pagina-agenda .menu-lateral ul {
  list-style: none;
  padding: 0;
}

.pagina-agenda .menu-lateral li {
  margin-bottom: 15px;
}

.pagina-agenda .menu-lateral a {
  text-decoration: none;
  color: #6a1b9a;
  font-weight: bold;
  transition: color 0.3s;
}

.pagina-agenda .menu-lateral a:hover,
.pagina-agenda .menu-lateral a.active {
  color: #e67e22;
  text-decoration: underline;
  border-radius: 4px;
}

.pagina-agenda .conteudo
 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.pagina-agenda #conteudo-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* === Agenda Header === */
.pagina-agenda .agenda-header {
   flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

button:hover {
  background-color: #5939a3;
}

/* --- Botão logout reutilizável (exemplo de botão específico com nome claro) --- */
.btn-logout {
  background-color: #7e57c2;
  color: white;
  padding: 8px 15px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s ease;
  display: inline-block;
}

.btn-logout:hover {
  background-color: #5e3d91;
}

/* --- Botão transparente (pode ser usado em filtros, header, etc.) --- */
.btn-outline {
  background-color: transparent;
  color: #7e57c2;
  border: 1px solid #7e57c2;
}

.btn-outline:hover {
  background-color: #7e57c2;
  color: white;
}


/* === FullCalendar Botões === */

#calendar,
.pagina-agenda #calendar {
  flex: 1;
  min-height: 600px; /* ou 700px, conforme preferir */
  max-height: 100%;
  overflow-y: auto;
  padding: 10px 10px 20px 10px;
  box-sizing: border-box;
}

/* Estiliza os cabeçalhos do calendário */
.fc-col-header-cell-cushion {
  display: block;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
  padding: 6px 4px;
  text-transform: uppercase;
  font-size: 16px;
}

/* Nome do dia (ex: SEG) */
.fc-dia-semana {
  font-size: 16px;
  color: #6a1b9a;
}

/* Data (ex: 29/07) */
.fc-data {
  font-size: 14px;
  color: #333;
  margin-top: 2px;
}


.fc .fc-button {
  background-color: transparent !important;
  border: none !important;
  color: #363636 !important;
  font-weight: 500;
  padding: 6px 12px !important;
  border-radius: 6px;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

.fc .fc-button:hover {
  background-color: #ff5722 !important;
  color: white !important;
}

.fc .fc-button:active,
.fc .fc-button:focus {
  box-shadow: none !important;
  outline: none !important;
  background-color: #ff5722 !important;
}

.fc .fc-button:disabled {
  opacity: 0.4;
  cursor: default;
  background-color: transparent !important;
  color: #888 !important;
}

.fc-col-header-cell-cushion {
  color: #6a1b9a;
}

/* === Status de Agendamento === */
.fc-event {
  border: none;
  color: white;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.status-agendado { background-color: #a6b6f2; }
.status-confirmado { background-color: #9be7b1; }
.status-aguardando { background-color: #f3f78d; color: #6a1b9a; }
.status-atendido { background-color: #d3d3d3; color: #000; }
.status-falta { background-color: #f4a3ab; }
.status-remarcado { background-color: #f8caa2; }
.status-desmarcado-profissional,
.status-desmarcado-paciente { background-color: #f4a3ab; }

/* === Responsividade === */
@media (max-width: 768px) {
  .pagina-agenda .layout {
    height: calc(100vh - 60px);
    display: flex;
  }

  .pagina-agenda .menu-lateral {
    width: 100%;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
  }

  .pagina-agenda .menu-lateral ul {
    display: flex;
    flex-direction: row;
    gap: 15px;
  }

  .pagina-agenda .menu-lateral li {
    margin: 0;
  }

  .pagina-agenda .topo {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .pagina-agenda .topo .centro {
    text-align: left;
    width: 100%;
    margin-top: 10px;
  }

  .pagina-agenda .agenda-header {
    flex-direction: column;
  }

  .pagina-agenda .container {
    width: 90%;
  }
}
.footer {
  background-color: #3f265c;
  color: white;
  text-align: center;
  padding: 1rem;
  font-size: 14px;
}

.fc-toolbar-title {
  display: none !important;
}

#mini-datepicker {
  display: none;
  position: absolute;
  z-index: 1000;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 5px;
}

#mini-datepicker.mostrar {
  display: block !important;
}

/* === Botão flutuante "+" corrigido e centralizado === */
/* === Botão flutuante com ícone Font Awesome === */
#botao-flutuante,
#botao-flutuante-clone {
  background-color: #6a1b9a;
  color: white;
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#botao-flutuante i,
#botao-flutuante-clone i {
  font-size: 16px;
  line-height: 1;
}

#botao-flutuante:hover,
#botao-flutuante-clone:hover {
  background-color: #ff5722 ;
}


/* === Botão "Mês Atual" === */
#btn-mes-atual,
#btn-mes-atual-clone {
  background-color: #ffffff;
  border: 1px solid #c2acea;
  color: #6a1b9a;
  padding: 6px 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  transition: background-color 0.3s;
}

#btn-mes-atual:hover,
#btn-mes-atual-clone:hover {
  background-color: #e8dcf7;
  color: #4a136f;
}

/* === Menu Flutuante do Botão "+" === */
#menu-flutuante {
  background-color: #ffffff;
  border: 1px solid #d9c5f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 6px 0;
  min-width: 180px;
  z-index: 10000;
}

#menu-flutuante .dropdown-item {
  width: 100%;
  background: none;
  border: none;
  padding: 10px 16px;
  text-align: left;
  color: #6a1b9a;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

#menu-flutuante .dropdown-item:hover {
  background-color: #f3e8fc;
  color: #4a136f;
}
/* === Estilo unificado para botões do calendário e seletor de usuário === */
.fc .fc-button,
#btn-mes-atual-clone,
#seletor-usuario-clone {
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  color: #6a1b9a !important;
  background-color: #f3e8fc !important;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

/* Remove borda apenas dos botões do FullCalendar */
.fc .fc-button {
  border: none !important;
}

/* Hover para todos os botões */
.fc .fc-button:hover,
#btn-mes-atual-clone:hover,
#seletor-usuario-clone:hover {
  background-color: #e0cdf5 !important;
  color: #4a136f !important;
}

/* Desativa sombra e foco */
.fc .fc-button:focus,
.fc .fc-button:active {
  box-shadow: none !important;
  outline: none !important;
}
/* Centralizar corretamente o bloco do botão mês atual */
.fc-toolbar-chunk {
  display: flex;
  align-items: center;
}

/* Espaçamento entre elementos */
#btn-mes-atual-clone {
  margin-left: 10px;
  margin-right: 10px;
}
/* Remove barra de rolagem horizontal da linha dos dias da semana */
.fc .fc-scrollgrid {
  overflow-x: hidden !important;
  width: 100% !important;
}

.fc .fc-col-header,
.fc .fc-scrollgrid-sync-table {
  width: 100% !important;
  table-layout: fixed !important;
}

.fc .fc-col-header-cell {
  white-space: nowrap;
  text-align: center;
}

.fc .fc-col-header-cell-cushion {
  display: inline-block;
  padding: 6px 4px;
  font-size: 13px;
  white-space: normal !important;
}

.fc .fc-scrollgrid::-webkit-scrollbar {
  display: none;
}

.fc .fc-scrollgrid {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}

.fc-col-header,
.fc-col-header-head,
.fc-col-header-row {
  overflow-y: hidden !important;
  max-height: none !important;
}

.fc-col-header {
  height: auto !important;
}


/* =======================================================
   MODAIS (POPUP)
======================================================= */
/* Define layout geral do modal */
.modal-dialog.modal-responsive {
  width: 100%;
  max-width: 700px;
  margin: auto;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 40px);
}
.linha-horizontal:has(> .campo:nth-child(1):last-child) .campo {
  width: 100%;
}

.modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 96vh;
  overflow: hidden;
  border-radius: 10px;
}

/* Área que pode rolar se necessário */
.modal-body {
  max-height: 70vh;
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Campos sempre justificados visualmente */
.modal-body .campo {
  flex: 1;
  min-width: 0;
}

/* Campos internos compactos e adaptáveis */
.modal-body input,
.modal-body select,
.modal-body textarea {
  width: 100%;
  font-size: 14px;
  padding: 6px 10px;
  max-height: 95%;
  box-sizing: border-box;
}

/* Textarea mais controlada */
.modal-body textarea {
  resize: vertical;
  min-height: 50px;
  max-height: 100px;
  line-height: 1.4;
}

/* Títulos e rótulos */
.modal-body label,
.modal-body .form-label {
  font-size: 14px;
  margin-bottom: 2px;
  font-weight: 500;
}
.modal-body select.form-select-sm {
  max-height: 38px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.modal-body .form-text {
  font-size: 12px;
  margin-top: 2px;
  margin-bottom: 4px;
  line-height: 1.2;
}

body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important; /* impede salto lateral */
}


/* Responsividade */
@media (max-width: 600px) {
  .modal-dialog.modal-responsive {
    max-width: 95vw;
  }

  .modal-body {
    padding: 10px;
  }

  .modal-body input,
  .modal-body select,
  .modal-body textarea {
    font-size: 13px;
    padding: 5px 8px;
        width: 100%;
  box-sizing: border-box; /* importante! */
  max-width: 100%;
  }

  .modal-body label {
    font-size: 13px;
  }

  .modal-title {
    font-size: 15px;
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #f9f7fd;
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: #6a1b9a;
  flex: 1;
}


/* Campos lado a lado */
.linha-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px; /* controle global do espaço entre blocos */
}

.campo {
  display: flex;
  flex-direction: column;
}


.btn-close {
  background: linear-gradient(90deg, #a383f2, #6c4fc2);
  background: none;
  color: white;
  opacity: 1;
  font-size: 1.2rem;
  border: none;
}

.btn-close:hover {
  color: #ddd;
}

/* Botões de ação */
.btn-sm {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 5px;
}

.btn-success {
background: linear-gradient(90deg, #a383f2, #6c4fc2);
color: #50147a;
}

.btn-success:hover {
  background-color: #50147a;
  border-color: #50147a;
}

.btn-danger {
  background-color: #e74c3c;
  border-color: #e74c3c;
}

.btn-danger:hover {
  background-color: #c0392b;
}

.btn-secondary {
  background-color: #bbb;
  border-color: #aaa;
  color: #333;
}

.btn-secondary:hover {
  background-color: #999;
  border-color: #888;
}

/* Linhas horizontais do formulário */


.form-text.text-danger {
  font-size: 12px;
  color: #c0392b;
}
.modal-footer .btn,
.modal-body .btn {
  padding: 4px 10px !important;
  font-size: 13px;
  min-width: auto;
  width: auto;
  max-width: fit-content;
}

.modal-footer {
  padding: 10px 20px;
}
.modal-form-paciente .modal-footer .btn {
  width: 100%;
}

/* Lista de pacientes (autocomplete) */
#lista-pacientes {
  position: absolute;
  top: calc(100% + 2px); /* ligeiramente abaixo do input */
  left: 0;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#lista-pacientes:empty {
  display: none;
}

#lista-pacientes li {
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

#lista-pacientes li:hover {
  background-color: #f0f0f0;
}
#lista-pacientes:not(:empty) {
  display: block;
}

/* 🟣 Container central da página */
.container-pacientes {
  width: 100%;
  max-width: 96%;                 /* Ajusta para quase o tamanho total */
  margin: 20px auto;
  padding: 20px 30px;
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #ccc;         /* ✅ Borda da caixa */
  border-radius: 8px;             /* ✅ Cantos arredondados */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Sombra leve */
}
/* Corrige o botão "Novo Paciente" no topo */
#btn-novo-paciente {
  position: static !important; /* remove bottom/right herdado */
  margin-left: auto;
  padding: 6px 14px;
  font-size: 14px;
  background-color: #7e57c2;
}
/* 🔠 Título centralizado */
.titulo-pacientes {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 25px;
}
/* Alinha título e botão com espaço entre eles */
.topo-pacientes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 20px;
}
/* 🔎 Campo de busca */

/* Corrige o campo de busca */
.campo-busca {
  max-width: 600px;
  width: 100%;
  margin: 0 auto 20px auto;
}

.campo-busca input {
  width: 100%;
  padding: 8px 12px;
  font-size: 15px;
  border: 1px solid #bbb;
  border-radius: 6px;
}

/* ✅ Linha separando busca da lista */
.campo-busca::after {
  content: '';
  display: block;
  margin-top: 20px;
  border-bottom: 1px solid #ddd;
}

#busca-paciente {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* 👥 Lista de pacientes */

.pacientes-lista
.lista-tratamentos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.paciente-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.foto-paciente {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
  flex-shrink: 0;
}
.dados-paciente {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  flex-grow: 1;
  margin-right: 10px;
}

.dados-paciente strong {
  font-weight: 500;
  color: #333;
}

.dados-paciente p {
  margin: 0;
  color: #333;
  font-size: 12px;
}


.botoes-paciente {
  display: flex;
  gap: 6px;
}


/* 💳 Cartão de paciente */
.card-paciente {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 🖼 Foto */
.card-paciente img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

/* ℹ️ Info do paciente */
.card-paciente .info {
  flex: 1;
}

.card-paciente .info strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

/* ⚙️ Botão de ação */
.card-paciente .acoes {
  margin-left: auto;
}

.card-paciente .acoes button {
  padding: 4px 10px;
  font-size: 13px;
  background-color: #7e57c2;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.card-paciente .acoes button:hover {
  background-color: #5e35b1;
}



/* =======================================================
   AJUSTAR RÓTULOS
======================================================= */
.ajustes-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #6a1b9a;
  cursor: pointer;  
  transition: background 0.3s;
}


.seta-ajustes {
  transition: transform 0.3s ease;
}

.ajustes-item.aberto .seta-ajustes {
  transform: rotate(180deg);
}

.submenu-ajustes {
  display: none;
  padding: 5px;
  border: 1px solid #d3cbe6;
  border-radius: 6px;
  background-color: #d3cbe6;
  color:#6a1b9a ;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);

  display: flex;
  flex-direction: column;
  align-items: center; /* 🔹 centraliza horizontalmente */
  justify-content: center; /* 🔹 centraliza verticalmente (opcional) */
  text-align: center; /* 🔹 alinha texto ao centro */
}

.ajustes-item.aberto .submenu-ajustes {
  display: block;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.btn-outline-success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #81c784;
}
.btn-outline-danger {
  background: #fdecea;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

/* =======================================================
   AJUSTES DE RESPONSIVIDADE
======================================================= */
@media (max-width: 768px) {
  .modal-content {
    width: 90%;
  }
  .form-rotulo-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =======================================================
   CADASTRO
======================================================= */
.pagina-cadastro form {
  background: white;
  padding: 25px 30px;
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 400px;
  margin: auto;
}

.pagina-cadastro form input,
.pagina-cadastro form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 15px;
}

.pagina-cadastro form button {
  background-color: #7e57c2;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.pagina-cadastro form button:hover {
  background-color: #5e3d91;
}

/* ================================
📄 FORMS.CSS — FORMULÁRIOS FORA DE MODAIS
Aplica apenas quando o body NÃO estiver com classe `.modal-open`
================================ 

 Inputs e Textareas 
body:not(.modal-open) form input,
body:not(.modal-open) form textarea {
  width: 100%;
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 15px;
  box-sizing: border-box;
}

/* Selects 
body:not(.modal-open) form select {
  width: 100%;
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 15px;
  box-sizing: border-box;
}

/* Botões 
body:not(.modal-open) form button {
  background-color: #7e57c2;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

body:not(.modal-open) form button:hover {
  background-color: #5e3d91;
}

/* ----------------------------
🌅 HERO (INDEX.PHP)
---------------------------- */
.hero {
    
  background: linear-gradient(rgba(63, 38, 92, 0.4), rgba(63, 38, 92, 0.4)),
              url('/assets/img/consultorio.jpg') center/cover no-repeat;
  min-height: 60vh;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* ----------------------------
🎯 BOTÃO "ASSINAR"
---------------------------- */
.assinar-btn {
  background: linear-gradient(90deg, #a383f2, #6c4fc2);
  color: white;
  padding: 14px 28px;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.assinar-btn:hover {
  transform: scale(1.05);
}

/* ----------------------------
✨ FEATURES & TESTEMUNHOS
---------------------------- */
.features,
.testimonials,
.contact,
.newsletter {
  text-align: center;
  background-color: #fff;
}

.feature-list,
.testimonial-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.feature {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  flex: 1 1 280px;
}

.testimonial {
  background: white;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.05);
  max-width: 400px;
  text-align: left;
}

/* ----------------------------
📨 CONTATO & NEWSLETTER
---------------------------- */
.contact,
.newsletter {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact h2,
.newsletter h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #6a1b9a;
  text-align: center;
}

.contact form,
.newsletter form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact input,
.contact textarea,
.newsletter input {
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.contact input:focus,
.contact textarea:focus,
.newsletter input:focus {
  border-color: #6c4fc2;
  outline: none;
}

.contact button,
.newsletter button {
  padding: 12px;
  background-color: #6c4fc2;
  color: #fff;
  border: none;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact button:hover,
.newsletter button:hover {
  background-color: #5a3bab;
}


/* ----------------------------
📱 RESPONSIVO
---------------------------- */
@media (max-width: 600px) {
  .contact,
  .newsletter {
    padding: 20px;
  }

  .contact h2,
  .newsletter h2 {
    font-size: 24px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .assinar-btn {
    font-size: 0.9rem;
    padding: 12px 22px;
  }
}

.contato-newsletter {
  padding: 40px 20px;
  background-color: #f9f9f9;
}

.duas-colunas {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* Redimensiona as seções lado a lado */
.duas-colunas .contact,
.duas-colunas .newsletter {
  flex: 1 1 350px;
  max-width: 400px;
  margin: 0;
}

/* Reduz tamanho dos botões */
.contact button,
.newsletter button {
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: bold;
  background: linear-gradient(90deg, #a383f2, #6c4fc2);
  transition: transform 0.2s ease;
}

.contact button:hover,
.newsletter button:hover {
  background: #5a3bab;
  transform: scale(1.05);
}

/* Responsivo */
@media (max-width: 768px) {
  .duas-colunas {
    flex-direction: column;
    align-items: center;
  }

  .duas-colunas .contact,
  .duas-colunas .newsletter {
    width: 100%;
    max-width: 100%;
  }
}
.footer {
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.footer .container {
  margin: 0 auto;
  max-width: 1000px;
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
#voltar-topo {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #6c4fc2;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 12px 16px;
  font-size: 18px;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#voltar-topo.mostrar {
  opacity: 1;
  pointer-events: auto;
}

#voltar-topo:hover {
  background-color: #5a3bab;
}


/* 🎯 Título centralizado com cor da identidade */
.container h2 {
  color: #6a1b9a;
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 25px;
  font-weight: 600;
}

/* 🗂 Estrutura da tabela de dias */
.tabela-horarios-container {
  overflow-x: auto;
  width: 100%;
  margin-bottom: 20px;
  margin: 20px 0 20px 0; /* espaço acima e abaixo */
}

.tabela-horarios {
  width: 100%;
  table-layout: fixed; /* Cada coluna divide igualmente */
  border-collapse: collapse;
  background-color: #fff;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  
}

/* 🧭 Limita a largura e centraliza o conteúdo */
.container-ajustes {
  max-width: 680px;
  width: 100%;
  margin: 40px auto 20px;   /* Espaço do topo (40px) + centralização */
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-family: 'Arial', sans-serif;
  font-size: 14px;
    position: relative; /* Necessário para posicionar o botão dentro */
  box-sizing: border-box;
  padding: 20px 20px 60px; /* 👈 espaço no fundo para o botão */
  min-height: 400px; /* 👈 mínimo necessário para evitar colar no botão *

  /* Altura e rolagem interna */
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.tabela-horarios th,
.tabela-horarios td {
  padding: 8px 5px;
  border: 1px solid #eee;
  text-align: center;
}

.tabela-horarios thead th {
  background-color: #c2acea;
  color: #333;
  font-weight: 600;
}

.tabela-horarios input[type="time"] {
  width: 100%;
  max-width: 90px;
  padding: 4px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.cabecalho-ajustes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 25px;
}

.icone-ajustes {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.titulo-ajustes {
  color: #6a1b9a;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
  padding: 4px;
  border-bottom: 2px solid #d3cbe6; /* Linha divisória */
}

/* 🕒 Linha do tempo padrão */
.linha-tempo {
  /*display: flex;*/
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 13px;
}

.linha-tempo label {
  font-weight: 500;
}

.linha-tempo input[type="number"] {
  width: 80px;
  padding: 4px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 🔘 Botões alinhados à direita */
.botoes-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.btn-link {
  color: #6a1b9a;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
}

.btn-link:hover {
  color: #4a0f6d;
  text-decoration: underline;
}
.btn-roxo.btn-flutuante {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 5px;
  background-color: #7e57c2;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.btn-roxo.btn-flutuante:hover {
  background-color: #a79bbd;
}


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

.modal-content {
  background: white;
  padding: 20px;
  width: 95%;
  max-width: 700px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.modal-content h3 {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #6a1b9a;
}

.celula-intervalo label {
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
}


body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh; /* Usa viewport real, evita bugs */
  overflow: hidden;
  background-color: #f3f3f3;
}

.login-page .container {
  background: white;
  padding: 1.5rem 1rem;  /* espaço interno razoável */
  border-radius: 12px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;  /* ✅ garante que o padding não estoura a largura */
  max-height: 100vh;
  overflow: hidden;
}




/* 🟣 TÍTULO */
.login-page h2 {
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  color: #6a1b9a;
}

/* ✏️ CAMPOS DE FORMULÁRIO */
.login-page input,
.login-page select,
.login-page button {

  width: 100%;
  max-width: 100%;   /* 🔒 não ultrapassa */
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}



/* 🧾 FORMULÁRIO */
.login-page form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 15px;
  width: 100%;
   flex-shrink: 0;
  margin: 0;
  padding: 0;
}

/* 🟠 BOTÃO PRINCIPAL */
.login-page button[type="submit"] {
  background-color: #7e57c2;
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-page button[type="submit"]:hover {
  background-color: #7e57c2;
}

/* 🔘 ESTILO GERAL DE BOTÕES */
.login-page button {
  background-color: #7e57c2;
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-page button:hover {
  background-color: #5e3d91;
}

/* 🔔 MENSAGENS */
.login-page .mensagem {
  margin-top: 15px;
  text-align: center;
  font-weight: bold;
}

.login-page .mensagem.sucesso {
  color: green;
}

.login-page .mensagem.erro,
.login-page .mensagem:not(.sucesso) {
  color: red;
}

/* 🔗 LINKS SECUNDÁRIOS */
.login-page .login-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
   margin-top: 12px;
  flex-shrink: 0;
}

.login-page .btn-secundario {
  background-color: #f5f5f5;
  color: #6a1b9a;
  padding: 10px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.3s ease;
}

.login-page .btn-secundario:hover {
  background-color: #e2d6f6;
  transform: translateY(-2px);
}

/* ⬅️ BOTÃO VOLTAR */
.login-page .voltar-btn {
  display: block;
  width: 120px;
  margin: 0 auto 20px auto;
  padding: 8px;
  background-color: #ddd;
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
  color: #000;
  font-size: 14px;
}

/* 🔒 INFO SENHA */
.login-page .senha-info {
  font-size: 12px;
  color: #555;
  margin-top: 5px;
}

/* 📱 RESPONSIVO */
@media (max-width: 480px) {
  .login-page .container {
    padding: 1.5rem 1rem;
    margin: 20px auto;
    box-shadow: none;
    border-radius: 8px;
  }

  .login-page h2 {
    font-size: 1.4rem;
  }

  .login-page button[type="submit"] {
    font-size: 1rem;
    padding: 12px;
  }
}
/* Responsivo */
@media (max-width: 768px) {
 
   
  .linha-data-hora {
    flex-direction: column;
    gap: 10px !important;
  }

  .linha-horizontal .campo,
  .linha-data-hora .campo {
    width: 100% !important;
  }

 
}
.linha-horizontal .campo {
  flex-grow: 1;
}

.linha-horizontal .campo[style*="width"] {
  max-width: 100%;
}
input:required:invalid,
select:required:invalid {
  
  box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25);
}

input:required:valid,
select:required:valid {
  border-color: #198754;
}

.texto-obrigatorio {
  font-size: 0.75rem;
  color: red;
  margin-top: 2px;
}

.obrigatorio {
  color: red;
  font-weight: bold;
}
.switch-toggle {
  display: inline-block;
  width: 38px;
  height: 20px;
  position: relative;
}

.switch-toggle input {
  display: none;
}

.switch-toggle span {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 20px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: background-color 0.2s;
}

.switch-toggle span::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  left: 2px;
  top: 2px;
  background-color: white;
  transition: transform 0.2s;
}

.switch-toggle input:checked + span {
  background-color: #4caf50;
}

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

/* 🔧 Corrigido: inputs de data/hora alinhados lado a lado */
.linha-data-hora {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5%;
  margin-bottom: 0.6rem;
  width: 100%;
}

.linha-data-hora .campo {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 120px;
}

.linha-data-hora .campo label {
  font-size: 13px;
  margin-bottom: 4px;
}

.linha-data-hora .campo input[type="date"],
.linha-data-hora .campo input[type="time"] {
  font-size: 14px;
  padding: 6px 8px;
  width: 100%;
  max-width: 100%;
}

/* Garante que .d-none esconda corretamente */
.d-none {
  display: none !important;
}

.usuarios-container {
  padding: 2%;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Formulário de Usuário */
.formulario-usuario {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin-bottom: 2em;
}

.formulario-usuario input,
.formulario-usuario select,
.formulario-usuario button {
  padding: 0.8em;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  width: 100%;
  box-sizing: border-box;
  font-size: 1em;
}

/* Botão principal do formulário */
.formulario-usuario button {
  background-color: #6a1b9a;
  color: white;
  font-weight: bold;
  cursor: pointer;
  border: none;
  border-radius: 0.5em;
  padding: 0.8em;
  grid-column: span 2;
  transition: background-color 0.3s;
}

.formulario-usuario button:hover {
  background-color: #4a1370;
}

/* Checkbox personalizado */
.checkbox-container {
  margin-top: 0.5em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9em;
}

/* Tabela de usuários */
.tabela-usuarios {
  width: 100%;
  max-height: 50vh;
  overflow-y: auto;
  display: block;
  border-collapse: collapse;
}

.tabela-usuarios thead {
  background-color: #eee;
  position: sticky;
  top: 0;
}

.tabela-usuarios th,
.tabela-usuarios td {
  border: 1px solid #ccc;
  text-align: left;
  word-break: break-word;
  font-size: 0.95em;
  padding: 1%;
  border: 1px solid #ccc;
  }

.tabela-usuarios th {
  background-color: #eee;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabela-usuarios td button {
  margin-right: 0.5em;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
}
.tabela-usuarios-container {
  flex: 1;
  overflow-y: auto;
  margin-top: 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.tabela-container {
  flex: 1;
  overflow-y: auto;
  margin-top: 2%;
  border: 1px solid #ddd;
  border-radius: 8px;
}

body.pagina-index {
  display: block !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
}

html.pagina-index {
  overflow-y: auto !important;
}

body.pagina-index .container,
body.pagina-index section {
  height: auto !important;
  overflow: visible !important;
}

.form-rotulo-wrapper {
    display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
}

.form-rotulo-wrapper input[type="text"] {
   padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-rotulo-wrapper input[type="color"] {
  width: 34px;
  height: 32px;
  padding: 0;
  border: none;
}

.btn-adicionar {
  font-size: 13px !important;
  padding: 6px 10px;
  border-radius: 5px;
  background-color: #7e57c2;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-adicionar:hover {
  background-color: #5e3d91;
}

.lista-rotulos {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* Para alinhar itens da lista */
}

.item-rotulo {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}

.rotulo-form {
 display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rotulo-conteudo {
 display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}

.rotulo-cor {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #999;
}

.input-nome-rotulo {
 font-size: 13px;
  padding: 5px 7px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 120px;
}

.input-cor-rotulo {
   width: 34px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.rotulo-acoes {
  display: flex;
  gap: 6px;
}

.rotulo-acoes button {
 font-size: 13px;
  padding: 6px 8px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: #7e57c2;
  color: white;
  transition: background 0.3s ease;
}

.rotulo-acoes button:hover {
  background: #5e3d91;
}

.rotulo-acoes .excluir-btn {
  background: #e53935;
}

.rotulo-acoes .excluir-btn:hover {
  background: #c62828;
}

.container-rotulos {
  max-width: 500px;
  margin: 30px auto;
  padding: 20px;
  background: #f7f5fc;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  text-align: center; /* Centraliza todo conteúdo */
}

/* Título das seções */
.section-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 10px 0 12px;
  color: #6a1b9a;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

/* Campo único em linha */
.grupo-campos {
  margin-bottom: 15px;
}

.grupo-campos label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: #333;
}

.grupo-campos input,
.grupo-campos select,
.grupo-campos textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

/* Duas colunas */
.grupo-duplo {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.grupo-duplo > div {
  flex: 1;
}

.grupo-duplo label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: #333;
}

.grupo-duplo input,
.grupo-duplo select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

/* Três colunas */
.grupo-trio {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.grupo-trio > div {
  flex: 1;
}

.grupo-trio label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: #333;
}

.grupo-trio input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

/* Botões no rodapé do modal */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
}

.modal-footer .btn {
  padding: 8px 16px;
  font-size: 14px;
}

@media (max-width: 600px) {
  .grupo-duplo,
  .grupo-trio {
    flex-direction: column;
  }

  .grupo-duplo > div,
  .grupo-trio > div {
    width: 100%;
  }

  .modal-dialog {
    margin: 10px;
  }

  .modal-body {
    padding: 15px;
  }

  .section-title {
    font-size: 0.95rem;
    margin-top: 20px;
  }

  .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-footer .btn {
    width: 100%;
  }
}
.prontuario-container {
  background-color: #f7f5fc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(106, 27, 154, 0.15);
  margin-bottom: 20px;
}

.topo-prontuario {
  display: flex;
  align-items: flex-start;;
  gap: 15px;
  flex-wrap: wrap;
}

.foto-prontuario {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #b39ddb;
  background-color: white;
}

.dados-paciente h2 {
  margin: 0 0 4px 0;
  font-size: 1.3rem;
  color: #6a1b9a;
}


.divisoria-prontuario {
  border: none;
  border-top: 1px solid #d3cbe6;
  margin: 16px 0 10px 0;
}

.abas-prontuario {
  display: flex;
  border-bottom: 2px solid #d3cbe6;
  margin-bottom: 10px;
}

.aba-btn {
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 500;
  color: #6a1b9a;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.aba-btn:hover {
  background-color: #ede7f6;
}

.aba-btn.active {
  border-bottom: 3px solid #6a1b9a;
  background-color: #ede7f6;
}

/* PRONTUARIO INFO*/

/* Título + botão no topo */
.info-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.info-topo h3 {
  font-size: 1.1rem;
  margin: 0;
  color: #6a1b9a;
}

#btn-editar-paciente {
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 4px;
}

/* Grade principal dos blocos */
.info-paciente-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: #444;
}

/* Blocos de conteúdo */
.info-paciente-grid .bloco {
  flex: 1 1 300px;
  background: #f9f7fc;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #e1dcef;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  min-width: 280px;
}

/* Título dos blocos */
.bloco h4 {
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: #6a1b9a;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Parágrafos internos */
.bloco p {
  margin: 3px 0;
  line-height: 1.4;
}

/* Ícones (caso use Font Awesome ou lucide) */
.bloco h4 i {
  color: #9575cd;
  font-size: 0.95rem;
}

/* Responsivo: quebra para coluna única em telas pequenas */
@media (max-width: 600px) {
  .info-topo {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .info-paciente-grid {
    flex-direction: column;
  }

  .info-paciente-grid .bloco {
    flex: 1 1 100%;
  }
}


.btn-roxo {
  bottom: 20px;
  right: 20px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 5px;
  background-color: #7e57c2;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.btn-roxo:hover {
  background-color: #a79bbd;
}

 .btn-editar-paciente {
  background-color: #7e57c2;
  color: white;
  border: none;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: inline-block;
  width: auto;         /* 👈 Garante que a largura se ajuste ao conteúdo */
  max-width: fit-content;
  min-width: 80px;     /* 👈 Apenas se quiser um mínimo */
  white-space: nowrap; /* 👈 Evita quebra de linha dentro do botão */
    width: auto !important;
}

/* ODONTOGRAMA */
.odontograma-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #333;
}

/* Caixa branca com sombra e borda */
.caixa-odontograma {
  background: #fff;
  padding: 20px 25px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #ddd;
}

/* Título */
.titulo-odontograma {
  text-align: center;
  color: #6a1b9a;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Linha divisória logo abaixo do título */
.caixa-odontograma::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 15px 0;
}

/* Radio buttons centralizados */
.seletor-tipo.centralizado {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 10px;
}

.seletor-tipo label {
  font-size: 14px;
  font-weight: 500;
  color: #444;
}

/* Área dos dentes */
#odontograma {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}

/* Arcadas */
.linha-dentes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

/* Dente individual */
.dente {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  width: auto;
  flex-shrink: 0;
}

/* Imagem do dente */
.imagem-dente {
  width: 40px;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.imagem-dente:hover {
  transform: scale(1.05);
}

/* Grid das faces */
.faces-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px;
  width: 34px;
  height: 26px;
  margin-top: 2px;
}

.face {
  background-color: #ccc;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  cursor: pointer;
}

/* Posicionamento das faces */
.face[data-face="vestibular"] { grid-column: 2; grid-row: 1; }
.face[data-face="mesial"]     { grid-column: 1; grid-row: 2; }
.face[data-face="oclusal"]    { grid-column: 2; grid-row: 2; }
.face[data-face="distal"]     { grid-column: 3; grid-row: 2; }
.face[data-face="lingual"]    { grid-column: 2; grid-row: 3; }

/* Linha divisória entre arcadas */
hr {
  border: none;
  border-top: 2px solid #ccc;
  margin: 15px auto;
  width: 90%;
}

/* Botão salvar */
.odontograma-acoes {
  text-align: center;
  margin-top: 25px;
}

#btn-salvar-odontograma {
  background-color: #6a1b9a;
  color: #fff;
  padding: 8px 14px;
  border: none;
  border-radius: 5px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#btn-salvar-odontograma:hover {
  background-color: #571281;
}

/* Lista de status no popup */
.lista-opcoes-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lista-opcoes-status button {
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.lista-opcoes-status button.status-Nenhum        { background-color: #e0e0e0; color: #333; }
.lista-opcoes-status button.status-Cárie         { background-color: #f44336; color: white; }
.lista-opcoes-status button.status-Envolvimento  { background-color: #e57373; color: white; }
.lista-opcoes-status button.status-Aextrair      { background-color: #9e9e9e; color: white; }
.lista-opcoes-status button.status-Prótese       { background-color: #a1887f; color: white; }
.lista-opcoes-status button.status-Coroa         { background-color: #ffca28; color: #333; }

.lista-opcoes-status button:hover {
  opacity: 0.9;
}

/* Responsivo */
@media (max-width: 600px) {
  .dente {
    width: 32px;
  }

  .faces-grid {
    width: 30px;
    height: 30px;
  }

  .seletor-tipo.centralizado {
    flex-direction: column;
    align-items: center;
  }
}

.numero-dente {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2px;
  color: #444;
}
/* ANAMNESE*/

.anamnese-container {
  padding: 20px;
}

.anamnese-container label,
.anamnese-container textarea,
.anamnese-container select,
.anamnese-container input {
  display: block;
  width: 100%;
  margin-bottom: 12px;
}

.anamnese-container fieldset {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 6px;
}

/*ORCAMENTOS*/

.orcamento-container {
background: #fff;
  padding: 20px 25px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #ddd;
}

.orcamento-container h3.titulo-secao {
  font-size: 1.4rem;
  color: #6a1b9a;
  margin-bottom: 20px;
  text-align: center;
}

.orcamento-container label {
  display: block;
  font-weight: 600;
  margin-top: 10px;
  color: #444;
}

.orcamento-container input[type="text"] {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.tratamentos-disponiveis {
  margin-top: 20px;
}

.tratamentos-disponiveis h4 {
  font-size: 1.1rem;
  color: #6a1b9a;
  margin-bottom: 10px;
}



.item-tratamento label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

.item-tratamento input[type="checkbox"] {
  accent-color: #6a1b9a;
  transform: scale(1.1);
}

#total-orcamento,
#total-com-desconto {
  display: inline-block;
  min-width: 120px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #f7f1fb;
  color: #5b1c8b;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}




.orcamento-item {
  background: #f7f5fc;
  border: 1px solid #ddd;
  border-left: 5px solid #6a1b9a;

  border-radius: 6px;
  margin-bottom: 10px;
  padding: 12px 14px;
  
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.orcamento-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* novo_orcamento.css */

.novo-orcamento-container {
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  padding: 25px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  border: 1px solid #e0e0e0;
  font-family: 'Segoe UI', sans-serif;
}

.titulo-secao {
  font-size: 1.5rem;
  color: #6a1b9a;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

/* Linhas e campos do formulário */
.linha-campos {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}


.linha-campos.totais {
  flex-direction: column;
  align-items: flex-end; /* joga tudo para a direita */
  gap: 5px;
}

.linha-campos.totais .campo {

  width: auto; /* não ocupa 100% */
  text-align: right;
}

.linha-campos.totais label {
  margin-bottom: 2px;
  font-weight: 600;
  color: #444;
}
/* Caixinha de valor para <span> ficar igual a input */
.valor-caixa {
  display: block;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f9f9f9;
  height: 38px;                      /* padroniza altura */
  line-height: 20px;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}
.campo label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 5px;
  color: #555;
}

.campo select {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}
/* Inputs dos totais com o mesmo “look” e altura */
.linha-campos.totais .campo input[type="number"] {
  width: 100%;
  height: 38px;                      /* igual à .valor-caixa */
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  text-align: right;
  box-sizing: border-box;
}

/* Aprovação: joga o toggle para o canto direito abaixo dos totais */
.linha-campos.aprovacao {
  justify-content: flex-end;         /* alinha à direita */
}

.campo-aprovado {
  flex: 0 0 240px;                   /* mesmo alinhamento visual dos campos acima */
  max-width: 240px;
  display: flex;
  justify-content: flex-end;         /* empurra o conteúdo pra direita */
}

/* Toggle simples (mantém seu estilo atual) */
.switch-aprovado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.switch-aprovado input[type="checkbox"] {
  transform: translateY(1px);
}

/* Tratamentos */
.bloco-tratamento {
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #ddd;
  background: #f9f6ff;
  border-radius: 8px;
}

.bloco-tratamento h4 {
  margin-bottom: 15px;
  color: #6a1b9a;
  font-size: 1.1rem;
}

/* Sugestões */
#sugestoes-tratamentos {
  border: 1px solid #ccc;
  border-radius: 5px;
  max-height: 150px;
  overflow-y: auto;
  background: white;
  position: absolute;
  z-index: 10;
  width: 100%;
  margin-top: 2px; /* dá um respiro do campo */
}

#sugestoes-tratamentos:empty {
  display: none;
}

.tratamento-sugestao {
  padding: 8px 10px;
  cursor: pointer;
}

.tratamento-sugestao:hover {
  background: #eee;
}

/* Tabela de tratamentos */


.tabela-tratamentos {
  width: 100%;
  border-collapse: collapse;
}

.tabela-tratamentos th,
.tabela-tratamentos td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  font-size: 0.9rem;
}

.tabela-tratamentos th {
  background: #f2e7fa;
  font-weight: bold;
  color: #5c1783;
}

/* Totais */
.linha-orcamento {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  gap: 15px;
  font-size: 14px;
  flex-wrap: wrap;
}

.info-orcamento {
  flex-grow: 1;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.info-orcamento .titulo {
  color: #6a1b9a;
  font-weight: 600;
}

.info-orcamento .data {
  font-size: 0.9em;
  color: #777;
}

.info-orcamento .valor {
  font-weight: 500;
  color: #333;
}

.botoes-orcamento {
   display: flex;
  align-items: center;
  gap: 8px;          /* garante espaço entre os 3 */
  flex-wrap: wrap;   /* não some se faltar largura */
}

#modalNovoTratamento .modal-content {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #ddd;
}

#modalNovoTratamento .modal-header {
  background-color: #f3f0fb;
  border-bottom: 1px solid #ddd;
}

#modalNovoTratamento .btn-roxo {
  background-color: #7e57c2;
  color: white;
  border: none;
}

#modalNovoTratamento .btn-roxo:hover {
  background-color: #6a1b9a;
}

.lista-sugestoes {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  max-height: 150px;
  overflow-y: auto;
  width: 100%;
  z-index: 10;
  border-radius: 4px;
  margin-top: 2px;
}

.lista-sugestoes div {
  padding: 6px 10px;
  cursor: pointer;
}

.lista-sugestoes div:hover {
  background-color: #f3f0fb;
}

.tags-selecionadas {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tags-selecionadas .tag {
  background: #7e57c2;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}

.tags-selecionadas .tag button {
  background: transparent;
  border: none;
  color: white;
  font-weight: bold;
  margin-left: 4px;
  cursor: pointer;
}
#lista-dentes {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  z-index: 1000;
  max-height: 150px;
  overflow-y: auto;
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-top: 2px; /* afastar do campo */
}

/* Esconde quando está vazio (tira a linha fantasma) */
#lista-dentes:empty {
  display: none;
  border: none;
  box-shadow: none;
}

#lista-dentes div {
  padding: 8px 10px;
  cursor: pointer;
}

#lista-dentes div:hover {
  background-color: #eee;
}


.botoes-orcamento .btn-editar {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  visibility: visible !important;
  opacity: 1 !important;
}
/* TRATAMENTOS — mesmo padrão visual do ORÇAMENTO */

/* Ajuste da linha (mantém tudo numa linha com quebra responsiva) */
.linha-orcamento{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  padding:10px 0;
  border-bottom:1px solid #ddd;
}
.info-orcamento{ display:flex; align-items:center; gap:12px; flex:1; }

/* Descrição expande abaixo quando visível */
.orcamento-tratamentos{ flex-basis:100%; margin-top:6px; font-size:13px; color:#555; }

/* Preferência do usuário: reduz animação se pediu menos movimento */
@media (prefers-reduced-motion: reduce){
  .btn-pequeno{ transition:none; }
}

/* ===== TRATAMENTOS (seguindo padrão Pacientes / Orçamentos) ===== */

.tratamento-item {
  background: #f7f5fc;
  border: 1px solid #ddd;
  border-left: 5px solid #6a1b9a;
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);

  /* 🔁 de flex -> GRID (3 linhas): data / info+botoes / desc */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "data   data"
    "info   botoes"
    "desc   desc";
  row-gap: 8px;
  column-gap: 15px;
  align-items: center;
  width: 100%;
}

/* Coluna de dados (participa da grid do pai) */
.tratamento-item .dados-tratamento {
  /* era flex:1; agora usa grid-areas via contents */
  display: contents;
}

/* Linha da data (sozinho em cima) */
.tratamento-item .data-sozinha {
  grid-area: data;
  justify-self: start;

  font-size: 13px;
  font-weight: 600;
  color: #555;
  display: block;
  margin-bottom: 4px;
}

/* Linha secundária (nome, região, face) */
.tratamento-item .linha-secundaria {
  grid-area: info;
  display: flex;           /* lado a lado */
  align-items: center;
  gap: 10px;               /* espaço entre cada info */
  flex-wrap: wrap;         /* quebra em telas pequenas */
  font-size: 13px;
  color: #333;
}

.tratamento-item .linha-secundaria .nome {
  font-weight: 600;
  color: #6a1b9a;
}

.tratamento-item .linha-secundaria span {
  white-space: nowrap;     /* impede quebra dentro de cada item */
}

/* estilo limpo da face do tratamento (sem fundo cinza do odontograma) */
.tratamento-item .linha-secundaria .face-tratamento {
  background: none;
  border: none;
  color: #333;
  padding: 0;
}

/* Botões alinhados à direita (na 2ª linha) */
.tratamento-item .botoes-tratamento {
  grid-area: botoes;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: end; /* direita */
  flex-shrink: 0;
}

/* Detalhes ocultos (abrem ao clicar em Ver) */
.tratamento-item .descricao-tratamento,
.descricao-pagamento {
  grid-area: desc;
  flex-basis: 100%;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #ddd;
  font-size: 13px;
  color: #444;
  line-height: 1.4;
}
/* Linha secundária de TRATAMENTOS: texto à esquerda + botões à direita */
.tratamento-item .linha-secundaria {
  display: flex;
  justify-content: space-between; /* divide em 2 lados */
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

/* Grupo de texto (nome, dente, face) continua à esquerda */
.tratamento-item .linha-secundaria .nome,
.tratamento-item .linha-secundaria .dente,
.tratamento-item .linha-secundaria .face-tratamento {
  margin-right: .25rem;
  white-space: nowrap;
}

/* Botões agrupados à direita */
.tratamento-item .linha-secundaria .botoes-tratamento {
  display: flex;
  gap: 8px;
  margin-left: auto;  /* força colar na direita */
}

/* ===============================
   ORÇAMENTOS — layout em 3 linhas
   =============================== */

/* O card .orcamento-item vira GRID:
   L1 = data
   L2 = info (esq) + botões (dir)
   L3 = detalhes (.orcamento-tratamentos) */
   .orcamento-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "data   data"
      "info   botoes"
      "desc   desc";
    row-gap: 8px;
    column-gap: 12px;
    align-items: center;
    width: 100%;
  }
  
  /* .dados-orcamento participa da grid (os filhos ocupam as áreas) */
  .orcamento-item .dados-orcamento {
    display: contents;             /* substitui o flex antigo */
  }
  
  /* L1: data sempre à esquerda */
  .orcamento-item .dados-orcamento .data-sozinha {
    grid-area: data;
    justify-self: start;
    display: block;
    font-weight: 500;
    color: #555;
    margin-bottom: 4px;
  }
  
  /* L2 (esquerda): linha com título/valor/selo SEM espalhar */
  .orcamento-item .dados-orcamento .linha-secundaria {
    grid-area: info;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;               /* quebra só se faltar espaço */
    margin: 0;
    font-size: 13px;
    color: #333;
    justify-content: flex-start;   /* garante texto à esquerda */
    width: 100%;
    min-width: 0;
  }
  
  .orcamento-item .dados-orcamento .linha-secundaria .titulo { 
    font-weight: 600; 
    color: #6a1b9a; 
    min-width: 0;
  }
  
  .orcamento-item .dados-orcamento .linha-secundaria .valor { 
    white-space: nowrap; 
  }
  
  /* Itens de texto ficam compactos */
  .orcamento-item .dados-orcamento .linha-secundaria > :not(.botoes-orcamento) {
    white-space: nowrap;
    margin-right: .35rem;
  }
  
  /* L2 (direita): botões (se estiverem FORA do <p>, como no seu HTML) */
  .orcamento-item .botoes-orcamento,
  .orcamento-item .botoes-paciente {
    grid-area: botoes;
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-self: end;             /* gruda na direita */
  }
  
  /* Caso os botões sejam colocados DENTRO da linha-secundaria no futuro */
  .orcamento-item .dados-orcamento .linha-secundaria .botoes-orcamento,
  .orcamento-item .dados-orcamento .linha-secundaria .botoes-paciente {
    display: flex;
    gap: .5rem;
    margin-left: auto;             /* empurra para a direita */
    flex: 0 0 auto;
    white-space: nowrap;
  }
  
  /* L3: detalhes (lista de tratamentos/observações) */
  .orcamento-item .orcamento-tratamentos {
    grid-area: desc;
    margin-top: 6px;
    font-size: 13px;
    color: #555;
  }
  .orcamento-item .orcamento-tratamentos[hidden] {
    display: none !important;
  }
  
  /* ===========================
     Seus estilos de selo/status
     =========================== */
  .selo-orcamento {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin: 0 8px;
    vertical-align: middle;
    border: 1px solid transparent;
  }
  .selo-orcamento.aprovado {
    background: #e8f5e9;
    color: #256029;
    border-color: #a5d6a7;
  }
  .selo-orcamento.pendente {
    background: #f5f5f5;
    color: #555;
    border-color: #ddd;
  }
  
  /* Realce do cartão por status */
  .orcamento-item.orcamento-aprovado {
    background: #f6fbf7;
    border-left: 5px solid #4caf50;
  }
  .orcamento-item.orcamento-pendente {
    background: #fff;
    border-left: 5px solid #ccc;
  }
  .orcamento-item.orcamento-aprovado .titulo {
    color: #2e7d32;
  }
  
/* Container da aba (equivalente a .orcamento-container) */
.tratamentos-container {
  background: #fff;
  padding: 20px 25px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #ddd;
}

/* Título */
.tratamentos-container h3.titulo-aba,
.tratamentos-container h3.titulo-secao {
  font-size: 1.4rem;
  color: #6a1b9a;
  margin-bottom: 20px;
  text-align: center;
}

/* Lista (coluna, como orçamentos salvos) */


/* Topo do cartão (equivalente a .orcamento-topo) */
.cartao-tratamento .linha-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* Título do tratamento */
.cartao-tratamento .titulo-tratamento {
  font-weight: 600;
  font-size: 1rem;
  color: #6a1b9a;
}

/* Linha de infos (data, região, face, valor, dentista) */
.cartao-tratamento .linha-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 2px;
}

/* “Badges” no padrão lilás */
.cartao-tratamento .linha-info .badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  background: #f2e7fa;  /* mesmo tom das th da sua tabela */
  color: #5c1783;
  border: 1px solid #e5d9f7;
  font-size: 12px;
  line-height: 1;
}

/* Descrição abaixo */
.cartao-tratamento .descricao {
  margin-top: 6px;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Botão “Editar” no padrão lilás */
.cartao-tratamento .btn-editar-tratamento,
.cartao-tratamento .btn.btn-outline-secondary.btn-sm {
  background: #fff;
  color: #6a1b9a;
  border: 1px solid #6a1b9a;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.cartao-tratamento .btn-editar-tratamento:hover,
.cartao-tratamento .btn.btn-outline-secondary.btn-sm:hover {
  background: #6a1b9a;
  color: #fff;
  border-color: #6a1b9a;
}

/* Botão roxo (reuso do padrão do orçamento) */
.tratamentos-container .btn-roxo {
  background-color: #6a1b9a;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: background 0.3s;
}
.tratamentos-container .btn-roxo:hover {
  background-color: #5e1284;
}

/* ===== Botões modernos ===== */
:root{
  --roxo:#6a1b9a;
  --roxo-esc:#5a1584;
  --cinza-borda:#ddd;
  --cinza-txt:#333;
  --bg-btn:#fff;
  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-lg:0 6px 18px rgba(0,0,0,.12);
}

/* Container dos botões na linha do orçamento */
.botoes-orcamento{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Base */
.btn-pequeno{
  --pad-x:14px;
  --pad-y:8px;
  --radius:8px;

  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:var(--pad-y) var(--pad-x);
  border-radius:var(--radius);
  font-size:13px;
  line-height:1;
  font-weight:600;
  border:1px solid transparent;
  background:var(--bg-btn);
  color:var(--cinza-txt);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow:var(--shadow-sm);
  will-change:transform;
}

.btn-pequeno:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn-pequeno:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }
.btn-pequeno:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(106,27,154,.25), var(--shadow-lg);
}

/* Variantes */
.btn-roxo{
  background:var(--roxo);
  color:#fff;
  border-color:var(--roxo);
}
.btn-roxo:hover{ background:var(--roxo-esc); border-color:var(--roxo-esc); }

.btn-outline{
  background:#fff;
  color:var(--roxo);
  border-color:var(--roxo);
}
.btn-outline:hover{ background:#f6f2fa; }

.btn-danger{
  background:#fff5f5;
  color:#b00020;
  border-color:#f3c2c2;
}
.btn-danger:hover{ background:#ffe9e9; }

/* Ícones alinhados */
.btn-pequeno .ico{
  display:inline-flex;
  width:16px; height:16px;
  align-items:center; justify-content:center;
}

/* Ajuste da linha (mantém tudo numa linha com quebra responsiva) */
.linha-orcamento{
  /* neutralizado quando usamos grid no card */
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  padding:10px 0;
  border-bottom:1px solid #ddd;
}
.info-orcamento{ display:flex; align-items:center; gap:12px; flex:1; }

/* Descrição expande abaixo quando visível */
.orcamento-tratamentos{ flex-basis:100%; margin-top:6px; font-size:13px; color:#555; }

/* Preferência do usuário: reduz animação se pediu menos movimento */
@media (prefers-reduced-motion: reduce){
  .btn-pequeno{ transition:none; }
}

/* ===== TRATAMENTOS (seguindo padrão Pacientes / Orçamentos) ===== */
/* (duplicado propositalmente como no seu código original) */

.tratamento-item {
  background: #f7f5fc;
  border: 1px solid #ddd;
  border-left: 5px solid #6a1b9a;
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);

  /* já deixamos como GRID acima, mantemos aqui para coerência */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "data   data"
    "info   botoes"
    "desc   desc";
  row-gap: 8px;
  column-gap: 15px;
  align-items: center;
  width: 100%;
}

/* Coluna de dados */
.tratamento-item .dados-tratamento { display: contents; }

/* Linha da data (sozinho em cima) */
.tratamento-item .data-sozinha {
  grid-area: data;
  justify-self: start;

  font-size: 13px;
  font-weight: 600;
  color: #555;
  display: block;
  margin-bottom: 4px;
}

/* Linha secundária (nome, região, face) */
.tratamento-item .linha-secundaria {
  grid-area: info;
  display: flex;           /* força lado a lado */
  align-items: center;
  gap: 10px;               /* espaço entre cada info */
  flex-wrap: wrap;         /* quebra em telas pequenas */
  font-size: 13px;
  color: #333;
}

.tratamento-item .linha-secundaria .nome {
  font-weight: 600;
  color: #6a1b9a;
}

.tratamento-item .linha-secundaria span { white-space: nowrap; }

.tratamento-item .linha-secundaria .face-tratamento {
  background: none;
  border: none;
  color: #333;
  padding: 0;
}

/* Botões alinhados à direita */
.tratamento-item .botoes-tratamento {
  grid-area: botoes;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: end;
  flex-shrink: 0;
}

/* Detalhes ocultos (abrem ao clicar em Ver) */
.tratamento-item .descricao-tratamento {
  grid-area: desc;
  flex-basis: 100%;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #ddd;
  font-size: 13px;
  color: #444;
  line-height: 1.4;
}

/* Coluna de dados no cartão do orçamento */
.dados-orcamento { display:flex; flex-direction:column; flex-grow:1; }

.dados-orcamento .data-sozinha{
  display:block;
  font-weight:500;
  color:#555;
  margin-bottom:4px;
}

.dados-orcamento .linha-secundaria{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;     /* quebra quando a tela é pequena */
  margin:0;
  font-size:13px;
  color:#333;
}
.dados-orcamento .linha-secundaria .titulo{ font-weight:600; color:#6a1b9a; }
.dados-orcamento .linha-secundaria .valor{ white-space:nowrap; }

/* Selo de status dentro da linha secundária */
.selo-orcamento {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin: 0 8px;
  vertical-align: middle;
  border: 1px solid transparent;
}

/* Aprovado = verde suave que harmoniza com roxo */
.selo-orcamento.aprovado {
  background: #e8f5e9;
  color: #256029;
  border-color: #a5d6a7;
}

/* Pendente = cinza discreto */
.selo-orcamento.pendente {
  background: #f5f5f5;
  color: #555;
  border-color: #ddd;
}

/* Realce do cartão aprovado (sutil, não “grita”) */
.orcamento-item.orcamento-aprovado {
  background: #f6fbf7;              /* quase branco com leve verde */
  border-left: 5px solid #4caf50;   /* verde consistente com o selo */
}

/* Cartão pendente padrão */
.orcamento-item.orcamento-pendente {
  background: #fff;
  border-left: 5px solid #ccc;
}

/* Se quiser reforçar o título dos aprovados */
.orcamento-item.orcamento-aprovado .titulo {
  color: #2e7d32;
}

/* card de pagamento quitado */
.paciente-item.pagamento-item.pagamento--pago {
  background: #eaf8ea;      /* verde bem claro */
  border-color: #cfe9cf;    /* opcional */
}

/* se quiser apenas o cabeçalho colorido (sem o card todo) 
.dados-pagamento {
  /* opcional desligado por padrão; comente se não usar */
  /* background: #eaf8ea; */


/* ESTILOS DOS PAGAMENTOS */
/* ===================== */

/* Pago = verde clarinho */
.paciente-item.pagamento-item.pagamento--pago {
  background: #eaf8ea;
  border-color: #cfe9cf;
}

/* A pagar (pendente/parcial) = vermelho clarinho */
.paciente-item.pagamento-item.pagamento--a-pagar {
  background: #fdeaea;
  border-color: #f5c2c7;
}

/* Contêiner da lista não herda flex */
.aba-pagamentos .lista-cartoes {
  display: block;
}

/* Card de pagamento em GRID:
   L1 = data
   L2 = info (esq) + botões (dir)
   L3 = descrição */
.aba-pagamentos .lista-cartoes .pagamento-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "data   data"
    "info   botoes"
    "desc   desc";
  row-gap: 8px;
  column-gap: 12px;
  align-items: center;
  width: 100%;
}

/* Permite que os filhos participem da grid */
.aba-pagamentos .lista-cartoes .pagamento-item .dados-pagamento {
  display: contents;
}

/* L1: data sempre à esquerda */
.aba-pagamentos .lista-cartoes .pagamento-item .data-sozinha {
  grid-area: data;
  justify-self: start;
}

/* Pagamento: texto à esquerda + botões à direita na 2ª linha */
.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria {
  display: flex;
  justify-content: space-between; /* divide texto à esq e botoes à dir */
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  width: 100%;
}

.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria .nome,
.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria .valor-titulo,
.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria .valor-pago,
.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria .status {
  margin-right: .25rem;
  white-space: nowrap;
}

.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria .botoes-pagamento,
.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria .botoes-paciente {
  display: flex;
  gap: .5rem;
  margin-left: auto;      /* cola os botões na direita */
}


/* L3: descrição (toggle) */
.aba-pagamentos .lista-cartoes .pagamento-item .descricao-pagamento {
  grid-area: desc;
  text-align: left;
}
.aba-pagamentos .lista-cartoes .pagamento-item .descricao-pagamento[hidden] {
  display: none !important;
}
/* ============================= */
/* FIX: linha-secundaria compacta */
/* ============================= */

/* Tratamento + Pagamento: texto à esquerda, botões à direita, sem "espalhar" */
.lista-cartoes .tratamento-item .linha-secundaria,
.lista-cartoes .pagamento-item .linha-secundaria {
  display: flex;
  align-items: center;
  gap: .35rem .5rem;
  justify-content: flex-start;     /* override de space-between */
  flex-wrap: wrap;                  /* quebra só o texto se precisar */
  width: 100%;
  min-width: 0;                     /* evita empurrar botões pra baixo por overflow */
}

/* Todos os itens de texto ficam compactos e não “esticam” a linha */
.lista-cartoes .linha-secundaria > :not(.botoes-tratamento):not(.botoes-pagamento) {
  margin-right: .35rem;
  white-space: nowrap;              /* cada pedacinho (nome, dente, valor, status) não quebra no meio */
}

/* Botões SEMPRE à direita, sem quebrar de linha */
.lista-cartoes .linha-secundaria .botoes-tratamento,
.lista-cartoes .linha-secundaria .botoes-pagamento {
  display: flex;
  gap: .5rem;
  margin-left: auto;                /* empurra pro canto direito */
  flex: 0 0 auto;                   /* não encolhe */
  white-space: nowrap;              /* mantém o grupo inteiro */
}

/* =============================== */
/* FIX: manter geometria do cartão */
/* =============================== */

/* Garante que a descrição (quando aberta) não “puxe” os botões pra baixo */
.aba-pagamentos .lista-cartoes .pagamento-item,
.aba-tratamentos .lista-cartoes .tratamento-item {
  display: grid;
  grid-template-columns: 1fr auto;  /* texto | botões */
  grid-template-areas:
    "data   data"
    "info   botoes"
    "desc   desc";
  row-gap: 8px;
  column-gap: 12px;
  align-items: center;
}

/* Participação dos filhos na grid */
.aba-pagamentos .lista-cartoes .pagamento-item .dados-pagamento,
.aba-tratamentos .lista-cartoes .tratamento-item .dados-tratamento {
  display: contents;
}

/* Áreas fixas */
.aba-pagamentos .lista-cartoes .pagamento-item .data-sozinha,
.aba-tratamentos .lista-cartoes .tratamento-item .data-sozinha {
  grid-area: data;
  justify-self: start;
}

.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria,
.aba-tratamentos .lista-cartoes .tratamento-item .linha-secundaria {
  grid-area: info;                  /* linha 2 — lado esquerdo */
}

.aba-pagamentos .lista-cartoes .pagamento-item .botoes-pagamento,
.aba-tratamentos .lista-cartoes .tratamento-item .botoes-tratamento {
  grid-area: botoes;                /* linha 2 — lado direito */
  justify-self: end;
}

.aba-pagamentos .lista-cartoes .pagamento-item .descricao-pagamento,
.aba-tratamentos .lista-cartoes .tratamento-item .descricao-tratamento {
  grid-area: desc;                  /* linha 3 — detalhes */
}

/* Quando oculto, realmente some (pra não alterar a altura da linha 2) */
.aba-pagamentos .lista-cartoes .pagamento-item .descricao-pagamento[hidden],
.aba-tratamentos .lista-cartoes .tratamento-item .descricao-tratamento[hidden] {
  display: none !important;
}
/* ===== FIX PAGAMENTOS: texto à ESQUERDA e botões à DIREITA ===== */

/* 1) Tira o space-between com seletor mais específico (ou use !important) */
.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria {
  justify-content: flex-start !important;
  align-items: center;
  gap: .35rem .5rem;
  flex-wrap: wrap;   /* texto pode quebrar, botões não */
  width: 100%;
  min-width: 0;      /* evita empurrar os botões pra baixo */
}

/* 2) Todos os pedaços de texto ficam compactos à esquerda */
.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria > :not(.botoes-pagamento):not(.botoes-paciente) {
  margin-right: .35rem;
  white-space: nowrap;
}

/* 3) Botões SEMPRE colados à direita na mesma linha */
.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria .botoes-pagamento,
.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria .botoes-paciente {
  display: flex;
  gap: .5rem;
  margin-left: auto;   /* empurra pro canto direito */
  white-space: nowrap; /* mantém o grupo inteiro */
  flex: 0 0 auto;      /* não encolhe */
}

/* 4) (opcional) se faltar espaço, trunca só o nome com reticências */
.aba-pagamentos .lista-cartoes .pagamento-item .linha-secundaria .nome {
  max-width: 50vw;          /* ajuste se quiser */
  overflow: hidden;
  text-overflow: ellipsis;
}
.orcamento-tratamentos[hidden] {
  display: none !important;
}