/* DarkTask — entrada, tour, privacidade e despertador (template 09/2026)
 *
 * Receita do DarkTask Acesso.dc.html e do Sistema.dc.html aplicada ao que é
 * montado por script fora da árvore do app: a apresentação de boas-vindas
 * (onboarding.js), o tour guiado, os modais de privacidade e o aviso de
 * cookies (privacidade.js), e o despertador (app-fixes.js). Véu de .32 sem
 * desfoque, cartão reto com fio de 19% e a sombra do sistema, topo de 72px,
 * rodapé de 64px, campos de 44px. Carrega depois de configuracoes.css.
 */

/* =========================================================================
   DESPERTADOR — .dt-alarm-overlay > .dt-alarm-dialog
   ========================================================================= */
html body .dt-alarm-overlay {
  background: rgba(0, 0, 0, .32) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .dt-alarm-dialog {
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg)) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-family: var(--font-ui) !important;
  overflow: hidden !important;
}
html body .dt-alarm-dialog * { border-radius: 0 !important; box-shadow: none !important; }
html body .dt-alarm-dialog > header {
  min-height: 72px; margin: 0 !important; padding: 0 0 0 20px !important;
  display: flex !important; align-items: stretch !important; gap: 12px !important;
  border-bottom: 1px solid var(--line) !important; background: var(--bg) !important;
}
html body .dt-alarm-dialog > header > .dt-alarm-head-icon {
  align-self: center; width: 22px !important; height: 22px !important;
  background: none !important; border: 0 !important; color: var(--text) !important;
}
html body .dt-alarm-dialog > header > div { flex: 1; min-width: 0; align-self: center; }
html body .dt-alarm-dialog > header h2 { margin: 0 !important; font: 700 17px/1 var(--font-ui) !important; letter-spacing: -.4px !important; color: var(--text) !important; }
html body .dt-alarm-dialog > header p { margin: 6px 0 0 !important; font: 400 11.5px/1.3 var(--font-ui) !important; color: var(--text-3) !important; }
html body .dt-alarm-dialog > header > button {
  width: 72px !important; height: auto !important; min-height: 0 !important; align-self: stretch;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-left: 1px solid var(--line) !important;
  background: transparent !important; color: var(--text) !important;
}
html body .dt-alarm-dialog > header > button:hover { background: var(--surface-2) !important; }
html body .dt-alarm-dialog .dt-alarm-layout { gap: 0 !important; padding: 0 !important; }
html body .dt-alarm-dialog .dt-alarm-form { padding: 24px 20px !important; border-right: 1px solid var(--line) !important; background: transparent !important; }
html body .dt-alarm-dialog .dt-alarm-scheduled { margin: 0 !important; padding: 24px 20px !important; border: 0 !important; background: transparent !important; }
html body .dt-alarm-dialog .dt-alarm-section-head :is(span, small):first-child {
  font: 700 10.5px/1 var(--font-ui) !important; letter-spacing: 1.6px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body .dt-alarm-dialog .dt-alarm-section-head :is(h3, strong) { font: 700 17px/1.1 var(--font-ui) !important; letter-spacing: -.4px; color: var(--text) !important; }
html body .dt-alarm-dialog label > span,
html body .dt-alarm-dialog legend {
  font: 700 10.5px/1 var(--font-ui) !important; letter-spacing: 1.6px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body .dt-alarm-dialog :is(input, select) {
  height: 44px !important; border: 1px solid var(--line) !important;
  background: var(--bg) !important; color: var(--text) !important; font: 400 13.5px/1 var(--font-ui) !important;
}
html body .dt-alarm-dialog fieldset button,
html body .dt-alarm-dialog fieldset label {
  border: 1px solid var(--line) !important; background: var(--bg) !important; color: var(--text-2) !important;
}
html body .dt-alarm-dialog fieldset :is(button[aria-pressed="true"], input:checked + span, label:has(input:checked)) {
  background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important;
}
html body .dt-alarm-dialog .dt-alarm-form-actions button {
  min-height: 44px !important; border: 1px solid var(--line) !important;
  background: transparent !important; color: var(--text) !important; font: 600 13px/1 var(--font-ui) !important;
}
html body .dt-alarm-dialog .dt-alarm-form-actions button[type="submit"] { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; }
html body .dt-alarm-dialog .dt-alarm-list > * {
  border: 1px dashed color-mix(in srgb, var(--text) 23%, var(--bg)) !important; background: transparent !important;
}
@media (max-width: 879px) {
  html body .dt-alarm-dialog .dt-alarm-form { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
}

/* =========================================================================
   APRESENTAÇÃO DE BOAS-VINDAS — .dt-onboarding-overlay > .dt-onboarding-card
   ========================================================================= */
html body .dt-onboarding-overlay {
  background: rgba(0, 0, 0, .32) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .dt-onboarding-card {
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg)) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-family: var(--font-ui) !important;
}
html body .dt-onboarding-card *:not(.dt-onboarding-avatar):not(.dt-onboarding-avatar *):not(.dt-onboarding-photo) {
  border-radius: 0 !important; box-shadow: none !important;
}
html body .dt-onboarding-progress { gap: 4px !important; }
html body .dt-onboarding-progress > * { height: 3px !important; background: color-mix(in srgb, var(--text) 10%, var(--bg)) !important; }
html body .dt-onboarding-progress > :is(.is-active, .is-done) { background: var(--text) !important; }
html body .dt-onboarding-kicker {
  font: 700 10.5px/1 var(--font-ui) !important; letter-spacing: 1.8px !important; text-transform: uppercase;
  color: var(--text-3) !important; background: none !important; border: 0 !important; padding: 0 !important;
}
html body .dt-onboarding-card :is(h1, h2, h3) { font-family: var(--font-ui) !important; font-weight: 700 !important; letter-spacing: -.6px !important; color: var(--text) !important; }
html body .dt-onboarding-lead { font: 400 13.5px/1.55 var(--font-ui) !important; color: color-mix(in srgb, var(--text) 80%, var(--bg)) !important; }
html body .dt-onboarding-card :is(input, select, textarea) {
  min-height: 44px; border: 1px solid var(--line) !important; background: var(--bg) !important; color: var(--text) !important;
  font: 400 13.5px/1 var(--font-ui) !important;
}
html body .dt-onboarding-card :is(input, select, textarea):focus { border-color: var(--text) !important; outline: none; }
html body .dt-onboarding-theme {
  border: 1px solid var(--line) !important; background: var(--bg) !important; color: var(--text) !important;
}
html body .dt-onboarding-theme.is-selected { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; }
html body .dt-onboarding-footer { border-top: 1px solid var(--line) !important; }
html body .dt-onboarding-footer button {
  min-height: 44px !important; border: 1px solid var(--line) !important;
  background: transparent !important; color: var(--text) !important; font: 600 13px/1 var(--font-ui) !important;
}
html body .dt-onboarding-footer button:last-child { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; }
html body .dt-onboarding-error { color: var(--danger) !important; }

/* =========================================================================
   TOUR GUIADO — .dt-tour-layer
   ========================================================================= */
html body .dt-tour-spotlight {
  border-radius: 0 !important;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .32), 0 0 0 1px var(--text) inset !important;
}
html body .dt-tour-card {
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg)) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-family: var(--font-ui) !important;
}
html body .dt-tour-card * { border-radius: 0 !important; }
html body .dt-tour-step {
  font: 700 10.5px/1 var(--font-ui) !important; letter-spacing: 1.8px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body .dt-tour-card :is(h3, h4, strong) { font-family: var(--font-ui) !important; font-weight: 700 !important; letter-spacing: -.3px; color: var(--text) !important; }
html body .dt-tour-actions button {
  min-height: 40px !important; border: 1px solid var(--line) !important;
  background: transparent !important; color: var(--text) !important; font: 600 12.5px/1 var(--font-ui) !important;
}
html body .dt-tour-actions button:last-child { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; }

/* =========================================================================
   PRIVACIDADE — modais .dt-priv-overlay e o aviso #dt-cookies
   ========================================================================= */
html body .dt-priv-overlay {
  background: rgba(0, 0, 0, .32) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .dt-priv-modal {
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg)) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important;
  font-family: var(--font-ui) !important;
  overflow: hidden auto;
}
html body .dt-priv-modal * { border-radius: 0 !important; }
html body .dt-priv-head {
  min-height: 72px; margin: 0 !important; padding: 0 0 0 20px !important;
  display: flex !important; align-items: stretch !important; justify-content: space-between !important;
  border-bottom: 1px solid var(--line) !important;
}
html body .dt-priv-head h3 { align-self: center; margin: 0 !important; font: 700 17px/1 var(--font-ui) !important; letter-spacing: -.4px; color: var(--text) !important; }
html body .dt-priv-x {
  width: 72px !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-left: 1px solid var(--line) !important;
  background: transparent !important; color: var(--text) !important; font-size: 24px !important;
}
html body .dt-priv-x:hover { background: var(--surface-2) !important; }
html body .dt-priv-corpo { padding: 24px 20px !important; font: 400 13px/1.55 var(--font-ui) !important; color: color-mix(in srgb, var(--text) 80%, var(--bg)) !important; }
html body .dt-priv-pe {
  min-height: 64px; margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: stretch !important; justify-content: flex-end !important; gap: 0 !important;
  border-top: 1px solid var(--line) !important;
}
html body .dt-priv-pe .dt-priv-btn {
  margin: 0 !important; padding: 0 24px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important;
  background: var(--text) !important; color: var(--bg) !important;
  font: 600 13px/1 var(--font-ui) !important;
}
html body .dt-priv-pe .dt-priv-btn.sec { background: transparent !important; color: var(--text) !important; }
html body .dt-priv-pe .dt-priv-btn.sec:hover { background: var(--surface-2) !important; }
html body .dt-priv-pe .dt-priv-btn.perigo { margin-right: auto !important; border-left: 0 !important; border-right: 1px solid var(--line) !important; background: transparent !important; color: var(--danger) !important; }
html body .dt-priv-pe .dt-priv-btn.perigo:hover { background: var(--danger) !important; color: var(--bg) !important; }
html body .dt-priv-campo { min-height: 44px; border: 1px solid var(--line) !important; background: var(--bg) !important; color: var(--text) !important; }

html body #dt-cookies {
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg)) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .18) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-family: var(--font-ui) !important;
  padding: 0 !important; overflow: hidden;
}
html body #dt-cookies h4 {
  margin: 0 !important; min-height: 56px; padding: 0 20px !important;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line);
  font: 700 12px/1 var(--font-ui) !important; letter-spacing: 1.8px !important; text-transform: uppercase; color: var(--text) !important;
}
html body #dt-cookies p { margin: 0 !important; padding: 18px 20px !important; font: 400 12.5px/1.55 var(--font-ui) !important; color: color-mix(in srgb, var(--text) 80%, var(--bg)) !important; }
html body #dt-cookies a { color: var(--text) !important; text-decoration: underline; text-underline-offset: 3px; }
html body #dt-cookies .dt-cook-acoes {
  min-height: 56px; margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-direction: row-reverse !important; align-items: stretch !important; gap: 0 !important;
  border-top: 1px solid var(--line);
}
html body #dt-cookies .dt-cook-acoes button {
  flex: 1; margin: 0 !important; padding: 0 16px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important; box-shadow: none !important;
  font: 600 12.5px/1 var(--font-ui) !important;
}
html body #dt-cookies .dt-cook-acoes button:hover { background: var(--surface-2) !important; }
html body #dt-cookies .dt-cook-acoes .dt-cook-ok { background: var(--text) !important; color: var(--bg) !important; border-left: 0 !important; }

/* =========================================================================
   BOTÕES COLADOS — nada de margem entre botões do mesmo grupo
   ========================================================================= */
html body :is(.dt-onboarding-footer, .dt-tour-actions, .dt-alarm-dialog .dt-alarm-form-actions) {
  gap: 0 !important; padding: 0 !important;
}
html body :is(.dt-onboarding-footer, .dt-tour-actions, .dt-alarm-dialog .dt-alarm-form-actions) > button { margin: 0 !important; }
html body :is(.dt-onboarding-footer, .dt-tour-actions, .dt-alarm-dialog .dt-alarm-form-actions) > button + button { margin-left: -1px !important; }
html body .dt-alarm-dialog fieldset :is(div, span):has(> :is(button, label) + :is(button, label)) { gap: 0 !important; }
html body .dt-alarm-dialog fieldset :is(div, span) > :is(button, label) + :is(button, label) { margin-left: -1px !important; }