/* Le regole #menu-* sotto valgono per i menu Elementor; il menu generato dal plugin (.adp-item) ha il suo stile in header.css. */
html,
body {
  margin: 0;
  padding: 0;
  background: #f5f6f8;
}

.aai-app-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #f5f6f8;
}

.aai-app-frame {
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  border: 0;
  background: #f5f6f8;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.aai-app-frame.is-loading { opacity: 0; }

.aai-app-loading {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: #f5f6f8;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: all;
}

.aai-app-loading.is-visible { display: flex; opacity: 1; }

.aai-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.12);
  font-family: Arial, sans-serif;
  color: #374151;
}

.aai-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #d1d5db;
  border-top-color: #166534;
  border-radius: 50%;
  animation: aai-spin 0.7s linear infinite;
}

.aai-loading-text { font-size: 13px; font-weight: 600; }
.aai-login-required { padding: 20px; border-radius: 12px; background: #fff; color: #374151; font-family: Arial, sans-serif; }

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

#menu-bacheca:not(.adp-item),
#menu-calendario:not(.adp-item),
#menu-appuntamenti:not(.adp-item),
#menu-pazienti:not(.adp-item),
#menu-finance:not(.adp-item),
#menu-servizi:not(.adp-item),
#menu-disponibilita:not(.adp-item),
#menu-sedi:not(.adp-item),
#menu-tutorial:not(.adp-item),
#menu-tema,
#menu-esci:not(.adp-item) {
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#menu-bacheca:not(.adp-item):hover,
#menu-calendario:not(.adp-item):hover,
#menu-appuntamenti:not(.adp-item):hover,
#menu-pazienti:not(.adp-item):hover,
#menu-finance:not(.adp-item):hover,
#menu-servizi:not(.adp-item):hover,
#menu-disponibilita:not(.adp-item):hover,
#menu-sedi:not(.adp-item):hover,
#menu-tutorial:not(.adp-item):hover {
  background-color: #ecfdf5 !important;
  border-color: #86efac !important;
}

#menu-esci:not(.adp-item):hover {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
}

#menu-bacheca:not(.adp-item).is-active,
#menu-calendario:not(.adp-item).is-active,
#menu-appuntamenti:not(.adp-item).is-active,
#menu-pazienti:not(.adp-item).is-active,
#menu-finance:not(.adp-item).is-active,
#menu-servizi:not(.adp-item).is-active,
#menu-disponibilita:not(.adp-item).is-active,
#menu-sedi:not(.adp-item).is-active,
#menu-tutorial:not(.adp-item).is-active {
  background-color: #166534 !important;
  border-color: #166534 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(22, 101, 52, 0.18) !important;
}

#menu-bacheca:not(.adp-item).is-active *,
#menu-calendario:not(.adp-item).is-active *,
#menu-appuntamenti:not(.adp-item).is-active *,
#menu-pazienti:not(.adp-item).is-active *,
#menu-finance:not(.adp-item).is-active *,
#menu-servizi:not(.adp-item).is-active *,
#menu-disponibilita:not(.adp-item).is-active *,
#menu-sedi:not(.adp-item).is-active *,
#menu-tutorial:not(.adp-item).is-active * {
  color: #ffffff !important;
}

#menu-bacheca:not(.adp-item).is-active svg,
#menu-calendario:not(.adp-item).is-active svg,
#menu-appuntamenti:not(.adp-item).is-active svg,
#menu-pazienti:not(.adp-item).is-active svg,
#menu-finance:not(.adp-item).is-active svg,
#menu-servizi:not(.adp-item).is-active svg,
#menu-disponibilita:not(.adp-item).is-active svg,
#menu-sedi:not(.adp-item).is-active svg,
#menu-tutorial:not(.adp-item).is-active svg,
#menu-bacheca:not(.adp-item).is-active svg *,
#menu-calendario:not(.adp-item).is-active svg *,
#menu-appuntamenti:not(.adp-item).is-active svg *,
#menu-pazienti:not(.adp-item).is-active svg *,
#menu-finance:not(.adp-item).is-active svg *,
#menu-servizi:not(.adp-item).is-active svg *,
#menu-disponibilita:not(.adp-item).is-active svg *,
#menu-sedi:not(.adp-item).is-active svg *,
#menu-tutorial:not(.adp-item).is-active svg * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}


/* =====================================================================
   MODO ESCURO (html.aai-dark) — o Amelia manda; aqui só acompanhamos.
   Para mudar as cores, ajuste apenas as variáveis abaixo.
   Container do menu Elementor: classe CSS "agendadoc-header".
   Botão de tema no Elementor: elemento com o ID CSS "menu-tema".
   ===================================================================== */
html.aai-dark {
  --aai-dark-bg: #10161e;
  --aai-dark-surface: #1b2430;
  --aai-dark-item: #243041;
  --aai-dark-border: #2d3a4b;
  --aai-dark-text: #e5e7eb;
  --aai-dark-hover: #14532d;
  --aai-dark-hover-border: #166534;
}

html.aai-dark,
html.aai-dark body {
  background-color: var(--aai-dark-bg) !important;
}

html.aai-dark .aai-app-wrapper,
html.aai-dark .aai-app-frame,
html.aai-dark .aai-app-loading {
  background: var(--aai-dark-bg);
}

html.aai-dark .aai-loading-content {
  background: var(--aai-dark-surface);
  color: var(--aai-dark-text);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
}

html.aai-dark .aai-spinner {
  border-color: var(--aai-dark-border);
  border-top-color: #22c55e;
}

html.aai-dark .aai-login-required {
  background: var(--aai-dark-surface);
  color: var(--aai-dark-text);
}

html.aai-dark .agendadoc-header {
  background-color: var(--aai-dark-surface) !important;
  background-image: none !important;
  border-color: var(--aai-dark-border) !important;
}

html.aai-dark :is(#menu-bacheca:not(.adp-item), #menu-calendario:not(.adp-item), #menu-appuntamenti:not(.adp-item), #menu-pazienti:not(.adp-item), #menu-finance:not(.adp-item), #menu-servizi:not(.adp-item), #menu-disponibilita:not(.adp-item), #menu-sedi:not(.adp-item), #menu-tutorial:not(.adp-item), #menu-tema, #menu-esci:not(.adp-item)):not(.is-active):not(.aai-native-ready) {
  background-color: var(--aai-dark-item) !important;
  border-color: var(--aai-dark-border) !important;
  color: var(--aai-dark-text) !important;
}

html.aai-dark :is(#menu-bacheca:not(.adp-item), #menu-calendario:not(.adp-item), #menu-appuntamenti:not(.adp-item), #menu-pazienti:not(.adp-item), #menu-finance:not(.adp-item), #menu-servizi:not(.adp-item), #menu-disponibilita:not(.adp-item), #menu-sedi:not(.adp-item), #menu-tutorial:not(.adp-item), #menu-tema, #menu-esci:not(.adp-item)):not(.is-active):not(.aai-native-ready) * {
  color: var(--aai-dark-text) !important;
}

html.aai-dark :is(#menu-bacheca:not(.adp-item), #menu-calendario:not(.adp-item), #menu-appuntamenti:not(.adp-item), #menu-pazienti:not(.adp-item), #menu-finance:not(.adp-item), #menu-servizi:not(.adp-item), #menu-disponibilita:not(.adp-item), #menu-sedi:not(.adp-item), #menu-tutorial:not(.adp-item), #menu-tema):not(.is-active):not(.aai-native-ready):hover {
  background-color: var(--aai-dark-hover) !important;
  border-color: var(--aai-dark-hover-border) !important;
}

html.aai-dark #menu-esci:not(.is-active):hover {
  background-color: #450a0a !important;
  border-color: #7f1d1d !important;
}

/* Cópia do botão nativo de tema dentro do #menu-tema (ver app-interface.js).
   Com a cópia pronta, o conteúdo próprio do #menu-tema fica oculto e o container
   perde fundo/borda, porque o botão do Amelia já tem o visual dele. */
.aai-native-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
}

#menu-tema.aai-native-ready > :not(.aai-native-host) {
  display: none !important;
}

#menu-tema.aai-native-ready,
#menu-tema.aai-native-ready:hover,
html.aai-dark #menu-tema.aai-native-ready:not(.is-active),
html.aai-dark #menu-tema.aai-native-ready:not(.is-active):hover {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Slot do shortcode [agendadoc_tema]: ícone simples enquanto a cópia do botão nativo
   não carrega (lua no claro, sol no escuro). */
.aai-theme-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  line-height: 0;
  cursor: pointer;
}

.aai-theme-slot:focus-visible { outline: 2px solid #166534; outline-offset: 2px; }
.aai-theme-slot.aai-theme-unavailable { display: none !important; }

.aai-theme-fallback { display: inline-flex; }
.aai-theme-fallback__sun { display: none; }
.aai-theme-slot.is-dark .aai-theme-fallback__moon { display: none; }
.aai-theme-slot.is-dark .aai-theme-fallback__sun { display: block; }

/* Ícones dos menus no escuro: Elementor pinta SVG com fill/stroke e fonts de ícone com color */
html.aai-dark :is(#menu-bacheca:not(.adp-item), #menu-calendario:not(.adp-item), #menu-appuntamenti:not(.adp-item), #menu-pazienti:not(.adp-item), #menu-finance:not(.adp-item), #menu-servizi:not(.adp-item), #menu-disponibilita:not(.adp-item), #menu-sedi:not(.adp-item), #menu-tutorial:not(.adp-item), #menu-tema, #menu-esci:not(.adp-item)):not(.is-active):not(.aai-native-ready) :is(svg, svg path, svg g, svg circle, svg rect, svg polygon, svg line, svg polyline, svg ellipse):not([fill="none"]) {
  fill: var(--aai-dark-text) !important;
}
html.aai-dark :is(#menu-bacheca:not(.adp-item), #menu-calendario:not(.adp-item), #menu-appuntamenti:not(.adp-item), #menu-pazienti:not(.adp-item), #menu-finance:not(.adp-item), #menu-servizi:not(.adp-item), #menu-disponibilita:not(.adp-item), #menu-sedi:not(.adp-item), #menu-tutorial:not(.adp-item), #menu-tema, #menu-esci:not(.adp-item)):not(.is-active):not(.aai-native-ready) :is(svg [stroke]):not([stroke="none"]) {
  stroke: var(--aai-dark-text) !important;
}
html.aai-dark :is(#menu-bacheca:not(.adp-item), #menu-calendario:not(.adp-item), #menu-appuntamenti:not(.adp-item), #menu-pazienti:not(.adp-item), #menu-finance:not(.adp-item), #menu-servizi:not(.adp-item), #menu-disponibilita:not(.adp-item), #menu-sedi:not(.adp-item), #menu-tutorial:not(.adp-item), #menu-tema, #menu-esci:not(.adp-item)):not(.is-active):not(.aai-native-ready) :is(i, .elementor-icon, .elementor-button-icon, [class*="eicon"], [class*="fa-"]) {
  color: var(--aai-dark-text) !important;
}