/* ════════════════════════════════════════════════════════════════
   DIONORE EVENTOS — Identidade visual do sistema
   Baseada no BRANDBOOK — DIONORE EVENTOS
   "Onde cada detalhe sustenta sua reputação."

   Paleta oficial:
     Verde profundo  #283618  — estabilidade, credibilidade
     Verde oliva     #606C38  — origem, agro
     Off-white       #FEFAE0  — acolhimento, sofisticação
     Caramelo        #DDA15E  — calor, hospitalidade
     Terracota       #BC6C23  — energia, presença

   Tipografia: Gotham (estrutura) + Prata (display, no lugar de
   Marsela, cuja licença de webfont não acompanha o brandbook).
   Carregar SEMPRE depois de app.css.
   ════════════════════════════════════════════════════════════════ */

/* ── Gotham (arquivos oficiais do brandbook) ─────────────────── */
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/gotham/Gotham-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/gotham/Gotham-Book.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/gotham/Gotham-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/gotham/Gotham-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/gotham/Gotham-Black.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ── Tokens da marca ─────────────────────────────────────────── */
:root {
  /* Paleta base */
  --dn-verde-900: #283618;
  --dn-verde-800: #33431F;
  --dn-verde-700: #43552B;
  --dn-oliva:     #606C38;
  --dn-oliva-claro: #7D8A4E;
  --dn-creme:     #FEFAE0;
  --dn-areia:     #F7F0D8;
  --dn-areia-2:   #F0E7C6;
  --dn-areia-3:   #E6DBB2;
  --dn-caramelo:  #DDA15E;
  --dn-terracota: #BC6C23;
  --dn-terracota-escuro: #9E5A1D;

  /* Acento principal: terracota (o ponto de energia da marca) */
  --accent:        var(--dn-terracota);
  --accent-dim:    rgba(188,108,35,.13);
  --accent-border: rgba(188,108,35,.38);
  --accent-dark:   var(--dn-terracota-escuro);

  --admin-accent: var(--dn-oliva);
  --admin-dim:    rgba(96,108,56,.14);

  /* Semânticas em tons da paleta (elegância, nada estridente) */
  --green:      var(--dn-oliva);
  --green-dim:  rgba(96,108,56,.15);
  --red:        #A83E2A;
  --red-dim:    rgba(168,62,42,.13);
  --blue:       var(--dn-oliva-claro);
  --blue-dim:   rgba(125,138,78,.16);
  --yellow:     #B07C2A;
  --yellow-dim: rgba(221,161,94,.22);
  --purple:     var(--dn-caramelo);

  --nicho-restaurante:     var(--dn-terracota);
  --nicho-restaurante-dim: rgba(188,108,35,.14);
  --nicho-ativacao:        var(--dn-oliva);
  --nicho-ativacao-dim:    rgba(96,108,56,.14);
  --nicho-degustacao:      #8B5E34;
  --nicho-degustacao-dim:  rgba(139,94,52,.14);
  --nicho-feira:           var(--dn-caramelo);
  --nicho-feira-dim:       rgba(221,161,94,.22);

  /* Curvas orgânicas da identidade */
  --radius:      14px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* Tipografia da marca */
  --font-body:    'Gotham', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Prata', 'Gotham', Georgia, serif;

  /* Superfícies: off-white quente com cartões claros */
  --bg:        var(--dn-creme);
  --surface-0: #FFFEF6;
  --surface-1: #FFFDF2;
  --surface-2: var(--dn-areia);
  --surface-3: var(--dn-areia-2);
  --surface-4: var(--dn-areia-3);
  --border:    rgba(40,54,24,.10);
  --border-2:  rgba(40,54,24,.20);
  --txt:       var(--dn-verde-900);
  --txt-muted: #5C6644;
  --txt-dim:   #99a077;
  --bg-input:  #FFFEF8;
  --bg-hover:  rgba(96,108,56,.06);
  --shadow-sm: 0 1px 3px rgba(40,54,24,.08);
  --shadow-md: 0 4px 18px rgba(40,54,24,.10);
  --shadow:    0 12px 34px rgba(40,54,24,.14);

  /* Sidebar: verde profundo com texto off-white */
  --sb-bg:        var(--dn-verde-900);
  --sb-border:    rgba(254,250,224,.10);
  --sb-txt:       rgba(254,250,224,.62);
  --sb-txt-dim:   rgba(254,250,224,.34);
  --sb-hover:     rgba(254,250,224,.09);
  --sb-hover-txt: var(--dn-creme);
}

body { font-weight: 400; }

/* ── Tipografia display nos títulos ──────────────────────────── */
.page-header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: .01em;
  color: var(--dn-verde-900);
}
.page-header p { font-weight: 300; }
.section-title {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--dn-verde-800);
}

/* ══ SIDEBAR — verde profundo, curvas suaves ══════════════════ */
.sidebar {
  background: var(--dn-verde-900);
  box-shadow: 4px 0 24px rgba(40,54,24,.22);
  padding: 18px 12px;
  border-right: 0;
}

/* Wordmark oficial (jpg em preto vira transparente com screen) */
.logo_items {
  position: relative;
  justify-content: center;
}
.brand_lockup {
  justify-content: center;
  width: 100%;
}
.brand_lockup .nav_image {
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
}
.brand-wordmark {
  height: 34px !important;
  width: auto !important;
  max-width: calc(100% - 48px);
  border-radius: 0 !important;
  object-fit: contain !important;
  transition: opacity .3s ease;
}
.sidebar.close .brand-wordmark {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.logo_name { display: none; }        /* o wordmark substitui o texto */
.brand-monogram {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--dn-creme);
  line-height: 1;
  padding-left: 10px;
  opacity: 0;
  position: absolute;
  transition: opacity .3s ease;
}
.sidebar.close .brand-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  padding-left: 0;
  position: static;
  text-align: center;
  width: 100%;
}

#lock-icon {
  color: rgba(254,250,224,.55);
  margin-left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
#lock-icon:hover { color: var(--dn-creme); }

.menu_title .title {
  color: rgba(254,250,224,.42);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.menu_title .line { background: rgba(254,250,224,.28); }

.link {
  color: var(--sb-txt);
  border-radius: 12px;
  min-height: 46px;
  font-weight: 500;
}
.link i { height: 46px; font-size: 20px; }
.link:hover {
  color: var(--dn-creme);
  background-color: rgba(254,250,224,.08);
}
.link.active {
  color: var(--dn-verde-900);
  background-color: var(--dn-creme);
  font-weight: 700;
}
.link.active i { color: var(--dn-terracota); }

.sidebar_profile { border-top: 1px solid var(--sb-border); }
.sidebar_profile .name { color: var(--dn-creme); }
.sidebar_profile .email { color: rgba(254,250,224,.5); }
.sidebar_profile .nav_image img { border: 2px solid rgba(254,250,224,.35); }
.sidebar.close .sidebar_profile {
  align-items: center;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  overflow: visible;
}
.sidebar.close .profile_logout {
  margin-bottom: 2px;
  order: 1;
  opacity: 1;
  pointer-events: auto;
}
.sidebar.close .profile_link {
  display: flex;
  justify-content: center;
  order: 2;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  width: 100%;
}
.sidebar.close .sidebar_profile .data_text {
  display: none;
  max-width: 0;
  overflow: hidden;
  width: 0;
}
.sidebar.close .sidebar_profile .nav_image {
  flex: 0 0 44px;
  justify-content: center;
  min-width: 44px;
  width: 44px;
}
.sidebar.close .sidebar_profile .nav_image img {
  display: block;
  flex-shrink: 0;
  height: 35px;
  max-width: none;
  opacity: 1;
  width: 35px;
}
.profile_logout button {
  background: rgba(254,250,224,.08);
  color: rgba(254,250,224,.65);
}
.profile_logout button:hover {
  background: rgba(168,62,42,.35);
  color: var(--dn-creme);
}

@media(max-width:800px) {
  .brand_lockup,
  .brand_lockup .nav_image {
    width: 100%;
  }

  .brand-wordmark {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .brand-monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    padding-left: 0;
    position: static;
    text-align: center;
    width: 100%;
  }

  .sidebar_profile {
    align-items: center;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
  }

  .profile_logout {
    margin-bottom: 2px;
    order: 1;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .profile_link {
    display: flex;
    justify-content: center;
    order: 2;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    width: 100%;
  }

  .sidebar_profile .data_text {
    display: none;
    max-width: 0;
    overflow: hidden;
    width: 0;
  }

  .sidebar_profile .nav_image {
    flex: 0 0 44px;
    justify-content: center;
    min-width: 44px;
    width: 44px;
  }

  .sidebar_profile .nav_image img {
    display: block;
    flex-shrink: 0;
    height: 35px;
    max-width: none;
    opacity: 1;
    width: 35px;
  }
}

/* ══ CONTEÚDO ══════════════════════════════════════════════════ */
.main-wrapper,
.main-content,
.app-view {
  min-width: 0;
}

.main-content {
  background: var(--bg);
  width: 100%;
}

body:not(.sidebar-compact) .main-content {
  max-width: calc(100vw - var(--sidebar-w));
  width: calc(100vw - var(--sidebar-w));
}

body.sidebar-compact .main-content {
  max-width: calc(100vw - var(--sidebar-compact-w));
  width: calc(100vw - var(--sidebar-compact-w));
}

.app-view {
  width: 100%;
}

@media(max-width:800px) {
  body:not(.sidebar-compact) .main-content,
  body.sidebar-compact .main-content,
  .main-content {
    max-width: calc(100vw - var(--sidebar-compact-w));
    width: calc(100vw - var(--sidebar-compact-w));
  }
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(40,54,24,.05);
}
.stat {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.stat-value { font-weight: 700; color: var(--dn-verde-900); }
.stat-label { color: var(--txt-muted); letter-spacing: .1em; }

/* ── Botões: presença sem excesso ────────────────────────────── */
.btn {
  border-radius: var(--radius-full);
  font-weight: 700;
  letter-spacing: .02em;
}
.btn-accent {
  background: var(--dn-terracota);
  color: var(--dn-creme);
  box-shadow: 0 3px 10px rgba(188,108,35,.30);
}
.btn-accent:hover { background: var(--dn-terracota-escuro); color: var(--dn-creme); }
.btn-green {
  background: var(--dn-oliva);
  color: var(--dn-creme);
}
.btn-green:hover { background: var(--dn-verde-800); color: var(--dn-creme); }
.btn-outline {
  border: 1.5px solid var(--border-2);
  color: var(--txt-muted);
  background: transparent;
}
.btn-outline:hover { border-color: var(--dn-terracota); color: var(--dn-terracota); }
.btn-ghost:hover { color: var(--dn-verde-900); }

/* ── Formulários ─────────────────────────────────────────────── */
.form-control, select.form-control, textarea.form-control {
  border-radius: 12px;
  background: var(--bg-input);
  border-color: var(--border-2);
  font-family: var(--font-body);
}
.form-control:focus {
  border-color: var(--dn-oliva);
  box-shadow: 0 0 0 3px rgba(96,108,56,.15);
}
label { color: var(--dn-verde-800); font-weight: 500; }
.form-hint { color: var(--txt-dim); }

/* ── Badges: cápsulas discretas ──────────────────────────────── */
.badge {
  border-radius: var(--radius-full);
  font-weight: 700;
  letter-spacing: .03em;
}

/* ── Tabelas ─────────────────────────────────────────────────── */
table thead th {
  background: var(--dn-areia);
  color: var(--dn-verde-800);
  font-weight: 700;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--border-2);
}
table tbody tr:hover { background: var(--bg-hover); }
table td { border-bottom: 1px solid var(--border); }

/* ── Alertas de flash ────────────────────────────────────────── */
.alert { border-radius: var(--radius); font-weight: 500; }
.alert-success { background: rgba(96,108,56,.14); color: var(--dn-verde-800); border: 1px solid rgba(96,108,56,.3); }
.alert-warning { background: rgba(221,161,94,.20); color: #7A5117; border: 1px solid rgba(221,161,94,.45); }
.alert-error   { background: rgba(168,62,42,.12); color: #8C3322; border: 1px solid rgba(168,62,42,.32); }

/* Central de notificações */
.app-view > .notifications-header,
.app-view > .notifications-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.app-view > .notifications-card {
  overflow: hidden;
  padding: 0;
}

.notification-empty {
  color: var(--txt-muted);
  padding: 36px;
  text-align: center;
}

.notification-item {
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  color: inherit;
  display: grid;
  gap: 12px;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  padding: 14px 18px;
  text-decoration: none;
}

.notification-item:last-child {
  border-bottom: 0;
}

.notification-item.is-critical-unread {
  background: var(--red-dim, rgba(229,72,77,.08));
  border-left: 3px solid var(--red);
  padding-left: 15px;
}

.notification-item.is-unread {
  background: var(--surface-2);
}

.notification-item.is-read {
  opacity: .78;
}

.notification-copy {
  min-width: 0;
}

.notification-title {
  color: var(--txt);
  font-size: .86rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.notification-message {
  color: var(--txt-muted);
  font-size: .78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.notification-meta {
  color: var(--txt-dim);
  font-size: .68rem;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.notification-priority,
.notification-new {
  white-space: nowrap;
}

@media(max-width:700px) {
  .notification-item {
    grid-template-columns: max-content minmax(0, 1fr);
    padding: 13px 14px;
  }

  .notification-new {
    grid-column: 2;
    justify-self: flex-start;
  }
}

/* ══ LOGIN — painel institucional verde + formulário creme ════ */
body.auth-body {
  background: var(--dn-creme);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-left: 0;
}

.auth-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(420px, 36vw, 540px);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}

.auth-visual {
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(96,108,56,.5) 0%, transparent 55%),
    radial-gradient(110% 100% at 90% 95%, rgba(188,108,35,.28) 0%, transparent 50%),
    var(--dn-verde-900);
  border-radius: 0 32px 32px 0;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
  overflow: hidden;
  padding: clamp(32px, 4vw, 64px);
}

.auth-visual-logo-wrap {
  margin-bottom: clamp(24px, 4vh, 42px);
}

.auth-visual-logo-wrap img.brand-wordmark-login {
  width: clamp(180px, 22vw, 300px);
  height: auto;
}

.auth-visual-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--dn-creme);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  line-height: 1.3;
}

.auth-visual-title span { color: var(--dn-caramelo); }

.auth-visual-sub {
  color: rgba(254,250,224,.72);
  font-weight: 300;
  max-width: 360px;
}

.auth-visual-features {
  max-width: 360px;
  width: min(100%, 360px);
}

.auth-feature {
  background: rgba(254,250,224,.07);
  border: 1px solid rgba(254,250,224,.14);
  border-radius: 16px;
  min-width: 0;
}

.auth-feature-icon {
  background: rgba(221,161,94,.2);
  border-radius: 10px;
}

.auth-feature-icon svg { color: var(--dn-caramelo); }
.auth-feature-text strong { color: var(--dn-creme); }
.auth-feature-text small { color: rgba(254,250,224,.6); }

.auth-form-wrap {
  align-items: center;
  background: var(--dn-creme);
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
  padding: clamp(28px, 5vw, 56px);
  width: 100%;
}

.auth-form-wrap > * {
  max-width: 430px;
  width: 100%;
}

.auth-logo {
  justify-content: flex-start;
  margin-bottom: clamp(22px, 4vh, 34px);
}

.auth-logo img {
  max-width: min(230px, 78vw);
}

.auth-title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--dn-verde-900); }

.auth-slogan {
  margin-top: clamp(24px, 4vh, 36px);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(254,250,224,.55);
  text-align: center;
  line-height: 2;
}

@media(max-width:1180px) {
  .auth-wrap {
    grid-template-columns: minmax(0, .95fr) minmax(390px, .75fr);
  }

  .auth-visual {
    padding: 32px;
  }

  .auth-visual-features {
    gap: 10px;
    margin-top: 28px;
  }

  .auth-slogan {
    letter-spacing: .2em;
  }
}

@media(max-width:920px) {
  .auth-wrap {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    display: none;
  }

  .auth-form-wrap {
    align-items: center;
    padding: clamp(24px, 7vw, 44px);
  }

  .auth-logo {
    justify-content: center;
    text-align: center;
  }

  .auth-title,
  .auth-subtitle {
    text-align: center;
  }
}

@media(max-width:480px) {
  .auth-form-wrap {
    padding: 22px 16px;
  }

  .auth-title {
    font-size: 1.32rem;
  }

  .auth-subtitle {
    margin-bottom: 18px;
  }
}

/* ══ CHECK-IN PÚBLICO (mobile) ═════════════════════════════════ */
body.pub-body,
.pub-page { background: var(--dn-creme); }
.pub-card {
  border-radius: 24px;
  border-color: var(--border);
  box-shadow: 0 14px 40px rgba(40,54,24,.14);
}
.pub-logo {
  background: var(--dn-verde-900);
  color: var(--dn-creme);
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: var(--radius-full);
}
.pub-title { font-family: var(--font-display); font-weight: 400; color: var(--dn-verde-900); }
.pub-btn {
  background: var(--dn-terracota);
  color: var(--dn-creme);
  border-radius: var(--radius-full);
  font-weight: 700;
}
.pub-btn:hover { background: var(--dn-terracota-escuro); }

/* ── Scrollbar quente ────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--dn-areia-3); }
::-webkit-scrollbar-thumb:hover { background: var(--dn-caramelo); }

/* ── Detalhes ────────────────────────────────────────────────── */
details summary { outline: none; }
a { color: var(--dn-terracota); }
.section-hd .badge-info { background: var(--dn-areia-2); color: var(--dn-verde-800); }

/* Assinatura discreta no rodapé do conteúdo */
.dn-signature {
  margin-top: 28px;
  padding: 14px 0 4px;
  text-align: center;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

/* ══ POPUP DE COMUNICADO INTERNO ══════════════════════════════ */
.dn-comunicado-popup {
  border: 0;
  padding: 0;
  margin: auto;              /* recentra o <dialog> (reset global zera o margin) */
  width: min(560px, calc(100vw - 28px));
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--txt);
  box-shadow: 0 32px 90px rgba(40,54,24,.4);
  overflow: hidden;
}
.dn-comunicado-popup::backdrop {
  background: rgba(40,54,24,.55);
  backdrop-filter: blur(2px);
}
.dn-comunicado-head {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--dn-verde-900);
  color: var(--dn-creme);
  padding: 18px 22px;
}
.dn-comunicado-head.critica { background: #6E2A1C; }
.dn-comunicado-head.alta { background: var(--dn-terracota-escuro); }
.dn-comunicado-head i { font-size: 1.6rem; color: var(--dn-caramelo); }
.dn-comunicado-head.critica i,
.dn-comunicado-head.alta i { color: var(--dn-creme); }
.dn-comunicado-head strong { display: block; font-size: .95rem; }
.dn-comunicado-head span { font-size: .72rem; opacity: .75; }
.dn-comunicado-corpo { padding: 20px 22px; }
.dn-comunicado-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dn-comunicado-data { font-size: .72rem; color: var(--txt-dim); }
.dn-comunicado-corpo h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--dn-verde-900);
  margin-bottom: 10px;
}
.dn-comunicado-corpo p {
  font-size: .9rem;
  color: var(--txt-muted);
  line-height: 1.75;
  max-height: 46vh;
  overflow-y: auto;
}
.dn-comunicado-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.dn-comunicado-fila {
  padding: 0 22px 16px;
  font-size: .7rem;
  color: var(--txt-dim);
  text-align: right;
}
@media (max-width: 520px) {
  .dn-comunicado-acoes { flex-direction: column-reverse; }
  .dn-comunicado-acoes .btn { width: 100%; justify-content: center; }
}