/* DenteSys - camada visual baseada no Manual de Marca v1.0.
   Este arquivo altera somente cores, tipografia e acabamento visual. */
:root {
  --app-bg: #f5f7fa;
  --surface: #ffffff;
  --surface-soft: #f5f7fa;
  --text: #0b2e6d;
  --muted: #5b6675;
  --line: #d9e2ef;
  --primary: #1577c8;
  --primary-dark: #0b2e6d;
  --accent: #19c2c9;
  --brand-highlight: #2cb7f2;
  --brand-gradient: linear-gradient(90deg, #1577c8 0%, #2cb7f2 52%, #19c2c9 100%);
  --font-interface: "Inter", "Segoe UI", Arial, sans-serif;
  --font-display: "Poppins", "Segoe UI", Arial, sans-serif;
}

html[data-theme="dark"] {
  --app-bg: #0f172a;
  --surface: #1e293b;
  --surface-soft: #263244;
  --text: #f8fafc;
  --muted: #cbd5e1;
  --line: #334155;
  --primary: #2cb7f2;
  --primary-dark: #19c2c9;
  --accent: #19c2c9;
  --brand-highlight: #2cb7f2;
  --brand-gradient: linear-gradient(90deg, #1577c8 0%, #2cb7f2 52%, #19c2c9 100%);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-interface) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.app-topbar__brand,
.dashboard-header h1,
.card-title h2,
.login-heading h2,
.brand-copy strong {
  font-family: var(--font-display) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
}

.app-topbar {
  background: var(--brand-gradient) !important;
  box-shadow: 0 2px 12px rgba(11, 46, 109, .18) !important;
}

.login-page {
  font-family: var(--font-interface) !important;
}

.login-showcase {
  background:
    radial-gradient(circle at 14% 18%, rgba(44, 183, 242, .24), transparent 22%),
    radial-gradient(circle at 82% 76%, rgba(25, 194, 201, .22), transparent 30%),
    linear-gradient(145deg, #0b2e6d 0%, #1577c8 54%, #19c2c9 100%) !important;
}

#conteudo {
  background-image: linear-gradient(rgba(245, 247, 250, .9), rgba(245, 247, 250, .9)), url("../visual/Logo Opcao Principal.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: min(62vw, 720px) auto !important;
  background-attachment: fixed !important;
}

html[data-theme="dark"] #conteudo {
  background-image: linear-gradient(rgba(15, 23, 42, .88), rgba(15, 23, 42, .88)), url("../visual/Logo Opcao Principal.png") !important;
}

.nav-side-menu .brand-mark {
  background: var(--brand-gradient) !important;
  box-shadow: 0 8px 16px rgba(21, 119, 200, .22) !important;
}

/* Recorte visual do símbolo oficial, sem redesenhar o logotipo com fonte. */
.nav-side-menu .brand-symbol {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--brand-gradient) !important;
  border: 0;
}

.nav-side-menu .brand-symbol img {
  position: static;
  width: 42px;
  max-width: 42px;
  height: 42px;
  object-fit: contain;
  transform: none;
}

/* O estado ativo do menu segue a paleta DenteSys (azul/ciano),
   substituindo o verde herdado do tema original. */
.nav-side-menu ul .active,
.nav-side-menu li .active,
.nav-side-menu li.active {
  color: #0b2e6d !important;
  background: #e8f4fb !important;
  border-left-color: #2cb7f2 !important;
}

.nav-side-menu li.active > a,
.nav-side-menu ul .active > a {
  color: inherit !important;
}

html[data-theme="dark"] .nav-side-menu ul .active,
html[data-theme="dark"] .nav-side-menu li .active,
html[data-theme="dark"] .nav-side-menu li.active {
  color: #f8fafc !important;
  background: rgba(25, 194, 201, .22) !important;
  border-left-color: #2cb7f2 !important;
  box-shadow: inset 3px 0 0 #2cb7f2;
}

/* O item continua com a cor de selecao mesmo enquanto o cursor esta sobre ele. */
html[data-theme="dark"] .nav-side-menu ul .sub-menu li.active:hover,
html[data-theme="dark"] .nav-side-menu li .sub-menu li.active:hover,
html[data-theme="dark"] .nav-side-menu li.active:hover,
html[data-theme="dark"] .nav-side-menu ul .sub-menu li.active:focus,
html[data-theme="dark"] .nav-side-menu li .sub-menu li.active:focus {
  color: #f8fafc !important;
  background: rgba(25, 194, 201, .22) !important;
}

.btn-primary,
.btn-success,
.login-page #btLogin {
  background: #1577c8 !important;
  border-color: #1577c8 !important;
  box-shadow: 0 8px 16px rgba(21, 119, 200, .22) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.login-page #btLogin:hover,
.login-page #btLogin:focus {
  background: #0b2e6d !important;
  border-color: #0b2e6d !important;
}

.btn-info,
.badge-info,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: #19c2c9 !important;
  border-color: #19c2c9 !important;
}

.btn,
.form-control,
select,
textarea,
input {
  border-radius: 12px !important;
}

.panel,
.dashboard-card,
.commercial-card,
.well,
.list-group,
.table-responsive {
  border-radius: 16px;
}

.modal-content {
  border-radius: 20px !important;
}

.login-brand-logo {
  display: block;
  width: 190px;
  height: 100px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  background: transparent;
}

.login-brand {
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
  text-align: center;
}

.login-heading {
  text-align: center;
}

.login-page #container {
  border-color: #d9e2ef;
}

.yes-no-switch {
  display: inline-grid;
  grid-template-columns: auto 68px auto;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.yes-no-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.yes-no-switch__track {
  position: relative;
  width: 68px;
  height: 34px;
  border-radius: 999px;
  background: #334155;
  border: 1px solid #475569;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.yes-no-switch__track::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  transition: transform .18s ease;
}

.yes-no-switch input[type="checkbox"]:checked + .yes-no-switch__track {
  background: #2cb7f2;
  border-color: #2cb7f2;
}

.yes-no-switch input[type="checkbox"]:checked + .yes-no-switch__track::before {
  transform: translateX(33px);
}

.yes-no-switch input[type="checkbox"]:focus-visible + .yes-no-switch__track {
  box-shadow: 0 0 0 3px rgba(44,183,242,.28), inset 0 1px 2px rgba(0,0,0,.18);
}

.yes-no-switch input[type="checkbox"]:disabled + .yes-no-switch__track {
  opacity: .56;
  cursor: not-allowed;
}

.yes-no-switch__no,
.yes-no-switch__yes {
  white-space: nowrap;
}

.patrimony-money,
.patrimony-total-value {
  white-space: nowrap;
}

.patrimony-total-label {
  padding-right: 28px !important;
  text-align: right;
}

.patrimony-total-row td {
  padding-top: 18px !important;
}

.communication-modal .modal-content {
  background: #1f2b3f;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  color: #fff;
}

.communication-modal .modal-header,
.communication-modal .modal-footer {
  border-color: rgba(148, 163, 184, .22);
}

.communication-modal .modal-title {
  color: #fff;
  font-weight: 700;
}

.communication-modal .close {
  color: #fff;
  opacity: .85;
  text-shadow: none;
}

.communication-channel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 47px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  color: #fff !important;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: none;
}

.communication-channel-btn + .communication-channel-btn {
  margin-left: 6px;
}

.communication-channel-btn-primary {
  background: #1f86d8;
}

.communication-channel-btn-primary:hover,
.communication-channel-btn-primary:focus {
  background: #1979c5;
}

.communication-channel-btn-email {
  background: #20c7cd;
}

.communication-channel-btn-email:hover,
.communication-channel-btn-email:focus {
  background: #18b5bb;
}

.communication-settings-table {
  margin-bottom: 18px;
}

.communication-settings-table td {
  vertical-align: middle !important;
}

.communication-token-clear {
  display: inline-block;
  margin-top: 8px;
  font-weight: normal;
}

.communication-history-box {
  margin-top: 22px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, .22);
}

.communication-history-box .table {
  margin-top: 14px;
}

.communication-history-box .table + .table {
  border-top: 1px solid rgba(148, 163, 184, .22);
  padding-top: 12px;
}

.communication-inline-fields {
  display: grid;
  grid-template-columns: minmax(90px, 140px) minmax(160px, 1fr);
  gap: 10px;
}

@media (max-width: 640px) {
  .communication-inline-fields {
    grid-template-columns: 1fr;
  }
}

/* Tratamentos: apresenta as opcoes como chaves compactas, mantendo os
   mesmos inputs, valores e nomes usados pelo formulario. */
.tratamentos-toggle-table {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 14px;
  width: 100% !important;
  max-width: 100%;
  padding: 12px 0 4px;
}

.tratamentos-toggle-table tbody,
.tratamentos-toggle-table tr {
  display: contents;
}

.tratamentos-toggle-table > tbody > tr:first-child,
.tratamentos-toggle-table > tbody > tr:last-child {
  display: none;
}

.tratamentos-toggle-table td {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 7px 10px !important;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  vertical-align: middle;
  box-sizing: border-box;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tratamentos-toggle-table input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.tratamentos-toggle-table input[type="checkbox"] + label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  line-height: 1.2;
}

.tratamentos-toggle-table input[type="checkbox"] + label::before {
  content: "";
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  background: #cbd5e1;
  box-sizing: border-box;
  transition: background-color .18s ease, border-color .18s ease;
}

.tratamentos-toggle-table input[type="checkbox"] + label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
  transform: translateY(-50%);
  transition: transform .18s ease;
}

.tratamentos-toggle-table input[type="checkbox"]:checked + label::before {
  border-color: #1577c8;
  background: #1577c8;
}

.tratamentos-toggle-table input[type="checkbox"]:checked + label::after {
  transform: translate(16px, -50%);
}

.tratamentos-toggle-table input[type="checkbox"]:checked + label {
  color: #0b2e6d;
}

.tratamentos-toggle-table input[type="checkbox"]:focus-visible + label {
  outline: 3px solid rgba(44, 183, 242, .32);
  outline-offset: 3px;
  border-radius: 8px;
}

.tratamentos-toggle-table td:hover {
  border-color: #2cb7f2 !important;
  box-shadow: 0 4px 12px rgba(21, 119, 200, .1);
}

.implantodontia-switch-table {
  display: inline-grid !important;
  grid-template-columns: minmax(126px, auto);
  width: auto !important;
  padding: 0;
}

.implantodontia-switch-table > tbody > tr:first-child,
.implantodontia-switch-table > tbody > tr:last-child {
  display: contents;
}

.implantodontia-switch-table td {
  min-height: 36px;
  padding: 6px 10px !important;
}

.implantodontia-switch-table input[type="checkbox"] + label {
  width: auto;
  padding-right: 34px !important;
}

.implantodontia-switch-table input[type="checkbox"] + label::before {
  flex-basis: 38px;
  width: 38px;
  height: 21px;
}

.implantodontia-switch-table input[type="checkbox"]:checked + label::after {
  transform: translate(17px, -50%);
}

.implantodontia-switch-state {
  position: absolute;
  right: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.implantodontia-switch-state::before {
  content: "Não";
}

.implantodontia-switch-table input[type="checkbox"]:checked + label + .implantodontia-switch-state {
  color: #0b2e6d;
}

.implantodontia-switch-table input[type="checkbox"]:checked + label + .implantodontia-switch-state::before {
  content: "Sim";
}

html[data-theme="dark"] .tratamentos-toggle-table td {
  background: #1e293b;
  border-color: #334155 !important;
}

html[data-theme="dark"] .tratamentos-toggle-table td:hover {
  background: #263244;
  border-color: #2cb7f2 !important;
}

html[data-theme="dark"] .tratamentos-toggle-table input[type="checkbox"] + label::before {
  border-color: #475569;
  background: #334155;
}

html[data-theme="dark"] .tratamentos-toggle-table input[type="checkbox"]:checked + label::before {
  border-color: #2cb7f2;
  background: #2cb7f2;
}

html[data-theme="dark"] .tratamentos-toggle-table input[type="checkbox"]:checked + label {
  color: #f8fafc;
}

html[data-theme="dark"] .implantodontia-switch-table input[type="checkbox"]:checked + label + .implantodontia-switch-state {
  color: #f8fafc;
}

@media (max-width: 1000px) {
  .tratamentos-toggle-table {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .tratamentos-toggle-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .tratamentos-toggle-table {
    grid-template-columns: 1fr;
  }
}

/* Portal responsivo: mesma paleta, sem alterar sua estrutura. */
.portal-brand-layer {
  font-family: var(--font-interface) !important;
}

html[data-theme="dark"] .portal-brand-layer {
  background: #0f172a !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .portal-brand-layer header {
  background: var(--brand-gradient) !important;
}

html[data-theme="dark"] .portal-brand-layer .card {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155;
}

html[data-theme="dark"] .portal-brand-layer .muted {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .portal-brand-layer .button,
html[data-theme="dark"] .portal-brand-layer .slot {
  background: #2cb7f2 !important;
  border-color: #2cb7f2 !important;
  color: #0f172a !important;
}