/*
 * MDesk — Sistema de Design (Morya / Move Data)
 * Tokens e componentes operacionais base.
 * Convenção: nenhuma regra usa !important. Se um componente precisa vencer
 * uma regra existente, ele ganha especificidade suficiente por si só —
 * ver auditoria visual para o motivo de essa regra existir.
 */

:root{
  /* Superfícies */
  --md-bg:#000000;
  --md-surface-1:#0a0a0c;
  --md-surface-2:#111114;
  --md-surface-3:#18181c;
  --md-border:rgba(255,255,255,.08);
  --md-border-strong:rgba(255,255,255,.16);

  /* Acento — dourado (herança Morya) + laranja (energia) + âmbar (ponte) */
  --md-gold-300:#f0cf6d;
  --md-gold-400:#d6a72e;
  --md-gold-500:#a97c0a;
  --md-amber-300:#fcd34d;
  --md-amber-400:#fbbf24;
  --md-orange-400:#fb923c;
  --md-orange-500:#f97316;
  --md-gradient-cta:linear-gradient(90deg, var(--md-gold-500), var(--md-orange-500) 55%, var(--md-amber-300));

  /* Texto */
  --md-ink:#ffffff;
  --md-ink-soft:#94a3b8;
  --md-ink-faint:#64748b;

  /* Semântico — separado do acento de marca */
  --md-success:#22c55e;
  --md-success-soft:rgba(34,197,94,.12);
  --md-danger:#ef4444;
  --md-danger-soft:rgba(239,68,68,.12);
  --md-info:#38bdf8;
  --md-info-soft:rgba(56,189,248,.12);
  --md-warning:var(--md-amber-400);
  --md-warning-soft:rgba(251,191,36,.12);

  /* Forma & motion */
  --md-radius-sm:.6rem;
  --md-radius-md:.9rem;
  --md-radius-lg:1.25rem;
  --md-radius-pill:9999px;
  --md-ease:cubic-bezier(.16,1,.3,1);
  --md-shadow-glow-gold:0 0 2.5rem rgba(214,167,46,.28);
  --md-shadow-glow-orange:0 0 2.5rem rgba(249,115,22,.25);
  --md-shadow-pop:0 1.5rem 3rem -0.5rem rgba(0,0,0,.55);
}

/* ===== Base ===== */
body.md-app{
  background:var(--md-bg);
  color:var(--md-ink);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
}
.md-app *:focus-visible{
  outline:2px solid var(--md-gold-300);
  outline-offset:2px;
}

/* ===== Superfícies de vidro ===== */
.md-glass{
  background:rgba(255,255,255,.035);
  border:1px solid var(--md-border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.md-glass-strong{
  background:rgba(10,10,12,.85);
  border:1px solid var(--md-border);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

/* ===== Cards ===== */
.md-card{
  border-radius:var(--md-radius-lg);
  padding:1.5rem;
  transition:transform .5s var(--md-ease), border-color .3s ease, background-color .3s ease;
}
.md-card.is-hoverable:hover{
  transform:translateY(-.35rem);
  border-color:var(--md-border-strong);
  background:rgba(255,255,255,.05);
}

/* Card de feature/navegação — ex.: os tiles de departamento do dashboard */
.md-card-feature{
  border-radius:var(--md-radius-lg);
  padding:1.75rem;
  background:rgba(255,255,255,.035);
  border:1px solid var(--md-border);
  backdrop-filter:blur(20px);
  transition:transform .6s var(--md-ease), border-color .3s ease, background-color .3s ease;
  position:relative;
  overflow:hidden;
}
.md-card-feature:hover{
  transform:translateY(-.4rem);
  border-color:var(--md-border-strong);
  background:rgba(255,255,255,.055);
}
.md-card-feature .md-card-title{ margin-top:1.25rem; font-size:1.05rem; font-weight:600; color:var(--md-ink); }
.md-card-feature .md-card-desc{ margin-top:.4rem; font-size:.85rem; line-height:1.6; color:var(--md-ink-soft); }

/* Card de indicador (KPI) — número grande + rótulo + variação opcional */
.md-card-stat{
  border-radius:var(--md-radius-lg);
  padding:1.5rem 1.6rem;
  background:rgba(255,255,255,.035);
  border:1px solid var(--md-border);
  backdrop-filter:blur(20px);
  display:flex; align-items:center; gap:1rem;
}
.md-card-stat .value{ font-size:1.9rem; font-weight:600; color:var(--md-ink); line-height:1.1; font-variant-numeric:tabular-nums; }
.md-card-stat .label{ font-size:.76rem; color:var(--md-ink-faint); text-transform:uppercase; letter-spacing:.06em; margin-top:.3rem; }

/* Blob de glow ambiente — colocar dentro de um container com position:relative + overflow:hidden */
.md-glow-blob{
  position:absolute;
  width:14rem; height:14rem;
  border-radius:50%;
  filter:blur(70px);
  opacity:.12;
  transition:opacity .7s ease;
  pointer-events:none;
}
.md-card-feature:hover .md-glow-blob,
.md-card-stat:hover .md-glow-blob{ opacity:.22; }
.md-glow-blob-gold{ background:var(--md-gold-400); }
.md-glow-blob-orange{ background:var(--md-orange-500); }

/* Borda em gradiente — envolva o card com esta classe e coloque o conteúdo real dentro de um filho direto */
.md-gradient-border{
  border-radius:var(--md-radius-lg);
  padding:1px;
  background:linear-gradient(145deg, rgba(214,167,46,.55), rgba(249,115,22,.18) 55%, rgba(252,211,77,.5));
}
.md-gradient-border > *{
  border-radius:calc(var(--md-radius-lg) - 1px);
  background:var(--md-surface-1);
  height:100%;
}

/* Grid de fundo decorativo — sutil, para heros/seções de destaque */
.md-grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:3rem 3rem;
}

/* Texto com brilho suave em gradiente — usar com moderação (títulos de destaque) */
.md-text-shimmer{
  background-size:200% auto;
  animation:md-shimmer 6s ease-in-out infinite;
}
@keyframes md-shimmer{
  0%,100%{ background-position:0% center; }
  50%{ background-position:100% center; }
}

/* ===== Cabeçalho de página ===== */
.md-page-header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:2rem;
}
.md-page-eyebrow{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--md-gold-300);
  margin-bottom:.4rem;
}
.md-page-title{
  font-size:1.75rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--md-ink);
  line-height:1.2;
}

/* ===== Botões ===== */
.md-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:var(--md-radius-pill);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:-.005em;
  padding:.75rem 1.5rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .3s var(--md-ease), box-shadow .3s var(--md-ease), background-color .3s ease, border-color .3s ease, opacity .2s ease;
  white-space:nowrap;
}
.md-btn:active{ transform:scale(.98); }
.md-btn:disabled,
.md-btn.is-loading{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.md-btn-primary{
  background-image:var(--md-gradient-cta);
  color:#191305;
  border-color:rgba(251,191,36,.4);
  box-shadow:var(--md-shadow-glow-gold);
}
.md-btn-primary:hover:not(:disabled):not(.is-loading){
  box-shadow:0 0 3.25rem rgba(214,167,46,.42);
  transform:translateY(-1px);
}

.md-btn-secondary{
  background:rgba(255,255,255,.04);
  color:var(--md-ink);
  border-color:var(--md-border);
  backdrop-filter:blur(16px);
}
.md-btn-secondary:hover:not(:disabled):not(.is-loading){
  background:rgba(255,255,255,.08);
  border-color:var(--md-border-strong);
}

.md-btn-ghost{
  background:transparent;
  color:var(--md-ink-soft);
  border-color:transparent;
}
.md-btn-ghost:hover:not(:disabled):not(.is-loading){
  background:rgba(255,255,255,.05);
  color:var(--md-ink);
}

.md-btn-danger{
  background:rgba(239,68,68,.12);
  color:#fca5a5;
  border-color:rgba(239,68,68,.35);
}
.md-btn-danger:hover:not(:disabled):not(.is-loading){
  background:rgba(239,68,68,.2);
  border-color:rgba(239,68,68,.5);
}

/* Botões ícone / círculo — para ações isoladas (abrir menu, fechar, favoritar) */
.md-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  width:2.75rem; height:2.75rem;
  border-radius:50%;
  border:1px solid var(--md-border);
  background:rgba(255,255,255,.04);
  color:var(--md-ink);
  backdrop-filter:blur(16px);
  cursor:pointer;
  transition:transform .3s var(--md-ease), box-shadow .3s var(--md-ease), background-color .3s ease, border-color .3s ease;
}
.md-icon-btn:hover{ background:rgba(255,255,255,.09); border-color:var(--md-border-strong); }
.md-icon-btn:active{ transform:scale(.94); }
.md-icon-btn-sm{ width:2.1rem; height:2.1rem; }
.md-icon-btn-lg{ width:3.25rem; height:3.25rem; }
.md-icon-btn-glow-gold{ border-color:rgba(214,167,46,.4); box-shadow:var(--md-shadow-glow-gold); color:var(--md-gold-300); }
.md-icon-btn-glow-orange{ border-color:rgba(249,115,22,.4); box-shadow:var(--md-shadow-glow-orange); color:var(--md-orange-400); }
.md-icon-btn-solid{ background-image:var(--md-gradient-cta); color:#191305; border-color:transparent; box-shadow:var(--md-shadow-glow-gold); }
.md-icon-btn-solid:hover{ box-shadow:0 0 3.25rem rgba(214,167,46,.42); }

/* Ícone "tile" quadrado arredondado — usado dentro de cards de feature/navegação */
.md-icon-tile{
  display:inline-flex; align-items:center; justify-content:center;
  width:3rem; height:3rem;
  border-radius:1rem;
  transition:transform .5s var(--md-ease);
}
.md-icon-tile-gold{ background:rgba(214,167,46,.1); color:var(--md-gold-300); }
.md-icon-tile-orange{ background:rgba(251,146,60,.1); color:var(--md-orange-400); }
.md-icon-tile-info{ background:var(--md-info-soft); color:#7dd3fc; }
.md-card:hover .md-icon-tile{ transform:scale(1.1) rotate(3deg); }

/* Spinner do botão em loading (injetado via JS antes do texto) */
.md-spinner{
  width:1rem;
  height:1rem;
  border-radius:50%;
  border:2px solid currentColor;
  border-right-color:transparent;
  animation:md-spin .6s linear infinite;
  flex-shrink:0;
}
@keyframes md-spin{ to{ transform:rotate(360deg); } }

/* ===== Campos de formulário ===== */
.md-field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.md-label{
  font-size:.8rem;
  font-weight:500;
  color:var(--md-ink-soft);
}
.md-label .req{ color:var(--md-orange-400); margin-left:.15rem; }
.md-input,
.md-select,
.md-textarea{
  background:var(--md-surface-2);
  border:1px solid var(--md-border-strong);
  color:var(--md-ink);
  border-radius:var(--md-radius-sm);
  padding:.7rem .9rem;
  font-size:.9rem;
  font-family:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  width:100%;
}
.md-input::placeholder,
.md-textarea::placeholder{ color:var(--md-ink-faint); }
.md-input:hover, .md-select:hover, .md-textarea:hover{ border-color:rgba(255,255,255,.24); }
.md-input:focus, .md-select:focus, .md-textarea:focus{
  border-color:var(--md-gold-400);
  box-shadow:0 0 0 .2rem rgba(214,167,46,.22);
  outline:none;
  background:var(--md-surface-3);
}
.md-field.has-error .md-input,
.md-field.has-error .md-select,
.md-field.has-error .md-textarea{
  border-color:var(--md-danger);
}
.md-field.has-error .md-input:focus,
.md-field.has-error .md-select:focus,
.md-field.has-error .md-textarea:focus{
  box-shadow:0 0 0 .2rem var(--md-danger-soft);
}
/* Validação em tempo real aplicada direto no input (ex.: campo CC), sem wrapper .md-field */
.md-input.is-valid{ border-color:var(--md-success); }
.md-input.is-invalid{ border-color:var(--md-danger); }
.md-input.is-valid:focus{ box-shadow:0 0 0 .2rem var(--md-success-soft); }
.md-input.is-invalid:focus{ box-shadow:0 0 0 .2rem var(--md-danger-soft); }
.md-hint{ font-size:.76rem; color:var(--md-ink-faint); }
.md-hint.is-error{ color:#fca5a5; }

/* ===== Alertas inline (persistem no fluxo — quando não cabe um toast passageiro) ===== */
.md-alert{ border-radius:.9rem; padding:.75rem 1rem; font-size:.85rem; margin-bottom:1.25rem; }
.md-alert ul{ margin:.4rem 0 0; padding-left:1.1rem; }
.md-alert-success{ border:1px solid rgba(34,197,94,.25); background:var(--md-success-soft); color:#bbf7d0; }
.md-alert-danger{ border:1px solid rgba(239,68,68,.25); background:var(--md-danger-soft); color:#fecaca; }

/* ===== Tabs ===== */
.md-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  border-bottom:1px solid var(--md-border);
  margin-bottom:1.5rem;
}
.md-tab-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.1rem;
  font-size:.85rem; font-weight:500;
  color:var(--md-ink-faint);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .2s ease, border-color .2s ease;
}
.md-tab-btn:hover{ color:var(--md-ink); }
.md-tab-btn.is-active{ color:var(--md-gold-300); border-color:var(--md-gold-400); }
.md-tab-panel{ display:none; }
.md-tab-panel.is-active{ display:block; }

/* Multi-select nativo — mesma linguagem visual do .md-select, opções com respiro */
.md-select[multiple]{ padding:.4rem; height:auto; }
.md-select[multiple] option{ padding:.5rem .6rem; border-radius:.4rem; }
.md-select[multiple] option:checked{ background:rgba(214,167,46,.18); color:var(--md-gold-300); }

/* ===== Checkbox ===== */
.md-checkbox{ accent-color: var(--md-gold-400); width: 1.05rem; height: 1.05rem; cursor: pointer; }

/* ===== Linha repetível de formulário (ex.: destinatário do disparo) ===== */
.destinatario-row{
  position:relative;
  display:flex; flex-wrap:wrap; gap:.9rem; align-items:flex-start;
  background:rgba(255,255,255,.02); border:1px solid var(--md-border); border-radius:var(--md-radius-md);
  padding:.9rem;
}
.destinatario-row > .chips-container{ flex:2 1 16rem; min-width:0; }
.destinatario-row > .link-input{ flex:1.4 1 14rem; }
.destinatario-row > .file-input-custom{ flex:1 1 10rem; }
@media (max-width:640px){
  .destinatario-row{ flex-direction:column; align-items:stretch; }
}

/* ===== Chips (seletor de destinatários) ===== */
.chips-container{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  padding:.5rem; border:1px solid var(--md-border-strong); border-radius:var(--md-radius-sm);
  background:var(--md-surface-2); min-height:2.75rem; position:relative;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.chips-container:focus-within{ border-color:var(--md-gold-400); box-shadow:0 0 0 .2rem rgba(214,167,46,.22); }
.chips-list{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; }
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:var(--md-radius-pill);
  background:rgba(56,189,248,.12); color:#bae6fd; border:1px solid rgba(56,189,248,.3);
  font-size:.8rem; white-space:nowrap;
}
.chip.invalid{ background:var(--md-danger-soft); color:#fca5a5; border-color:rgba(239,68,68,.3); }
.chip .remove-chip{
  border:0; background:transparent; color:inherit; font-weight:700; cursor:pointer; line-height:1;
  flex-shrink:0; min-width:1.3rem; min-height:1.3rem; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; opacity:.75; transition:opacity .15s ease, background-color .15s ease;
}
.chip .remove-chip:hover{ opacity:1; background:rgba(255,255,255,.12); }
.chips-input{ flex:1; min-width:11rem; border:0; outline:0; background:transparent; color:var(--md-ink); padding:.35rem; font-size:.85rem; font-family:inherit; }
.chips-input::placeholder{ color:var(--md-ink-faint); }
.chips-actions{ display:flex; gap:.4rem; margin-left:auto; }

/* ===== Popover (dropdown de fornecedores / autocomplete) ===== */
.fornecedores-dropdown,
.autocomplete-dropdown{
  background:var(--md-surface-2); border:1px solid var(--md-border-strong); border-radius:var(--md-radius-sm);
  box-shadow:var(--md-shadow-pop);
}
.fornecedor-item,
.autocomplete-item{
  padding:.6rem .8rem; cursor:pointer; border-bottom:1px solid var(--md-border);
  transition:background-color .15s ease;
}
.fornecedor-item:last-child,
.autocomplete-item:last-child{ border-bottom:none; }
.fornecedor-item:hover,
.autocomplete-item:hover,
.autocomplete-item.is-selected{ background:rgba(214,167,46,.15); }

/* ===== Anexos (file drop) ===== */
.file-input-custom{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:var(--md-surface-2); color:var(--md-ink-soft);
  border:1px dashed var(--md-border-strong); border-radius:var(--md-radius-sm);
  padding:.7rem .9rem; cursor:pointer; transition:all .2s ease; font-size:.85rem; min-height:2.75rem;
}
.file-input-custom:hover{ background:var(--md-surface-3); border-color:var(--md-gold-400); color:var(--md-ink); }
.file-input-custom.has-file{ border-style:solid; border-color:var(--md-gold-400); color:var(--md-gold-300); }
.file-input-custom input[type="file"]{ opacity:0; position:absolute; inset:0; cursor:pointer; }

/* ===== Modal de anexos (usa .md-modal-backdrop/.md-modal como qualquer modal nomeada) ===== */
.attachments-list{ max-height:14rem; overflow:auto; border:1px dashed var(--md-border-strong); border-radius:var(--md-radius-sm); padding:.5rem; }
.attachment-item{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem .6rem; border-bottom:1px solid var(--md-border); font-size:.85rem; color:var(--md-ink); }
.attachment-item:last-child{ border-bottom:none; }

/* ===== Badges / status ===== */
.md-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .7rem;
  border-radius:var(--md-radius-pill);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1px solid transparent;
}
.md-badge-neutral{ background:rgba(255,255,255,.05); border-color:var(--md-border); color:var(--md-ink-soft); }
.md-badge-success{ background:var(--md-success-soft); border-color:rgba(34,197,94,.3); color:#86efac; }
.md-badge-danger{ background:var(--md-danger-soft); border-color:rgba(239,68,68,.3); color:#fca5a5; }
.md-badge-warning{ background:var(--md-warning-soft); border-color:rgba(251,191,36,.3); color:var(--md-amber-300); }
.md-badge-info{ background:var(--md-info-soft); border-color:rgba(56,189,248,.3); color:#7dd3fc; }

.md-status-dot{ position:relative; display:inline-flex; height:.55rem; width:.55rem; }
.md-status-dot::before,
.md-status-dot::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
}
.md-status-dot::before{ background:currentColor; }
.md-status-dot::after{
  background:currentColor;
  animation:md-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
  opacity:.65;
}
@keyframes md-ping{ 75%,100%{ transform:scale(2.2); opacity:0; } }

/* ===== Switch (toggle ativo/inativo) ===== */
.md-switch{ position:relative; display:inline-block; width:2.75rem; height:1.5rem; flex-shrink:0; }
.md-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.md-switch .slider{ position:absolute; inset:0; background:rgba(255,255,255,.16); border-radius:var(--md-radius-pill); transition:background-color .25s ease; pointer-events:none; }
.md-switch .slider::before{
  content:""; position:absolute; height:1.1rem; width:1.1rem; left:.2rem; top:.2rem;
  background:#fff; border-radius:50%; transition:transform .25s var(--md-ease);
}
.md-switch input:checked + .slider{ background:var(--md-gold-400); }
.md-switch input:checked + .slider::before{ transform:translateX(1.25rem); }
.md-switch input:focus-visible + .slider{ outline:2px solid var(--md-gold-300); outline-offset:2px; }

/* ===== Tabela de dados ===== */
.md-table-wrap{
  border:1px solid var(--md-border);
  border-radius:var(--md-radius-lg);
  overflow:hidden;
}
.md-table-scroll{ overflow-x:auto; }
.md-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.md-table thead th{
  text-align:left;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--md-ink-faint);
  background:var(--md-surface-1);
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--md-border);
  white-space:nowrap;
}
.md-table tbody td{
  padding:.85rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:var(--md-ink);
  vertical-align:middle;
}
.md-table tbody tr:last-child td{ border-bottom:none; }
.md-table tbody tr{ transition:background-color .15s ease; }
.md-table tbody tr:hover{ background:rgba(255,255,255,.025); }
.md-table-empty{
  padding:3.5rem 1.5rem;
  text-align:center;
  color:var(--md-ink-faint);
}
.md-pagination{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border-top:1px solid var(--md-border); background:var(--md-surface-1); }
.md-pagination-pages{ display:flex; gap:.35rem; }
.md-page-btn{
  min-width:2.1rem; height:2.1rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--md-radius-sm);
  font-size:.8rem; color:var(--md-ink-soft);
  border:1px solid transparent;
  transition:all .2s ease;
}
.md-page-btn:hover{ background:rgba(255,255,255,.06); color:var(--md-ink); }
.md-page-btn.is-active{ background:var(--md-gold-400); color:#191305; font-weight:600; }

/* ===== Layout shell ===== */
.md-shell{ min-height:100vh; }
.md-main-col{ min-width:0; }

/* ===== Sidebar ===== */
.md-sidebar{
  position:fixed; top:0; left:0; height:100vh; width:17rem;
  background:var(--md-surface-1);
  border-right:1px solid var(--md-border);
  z-index:60;
  transform:translateX(-100%);
  transition:transform .4s var(--md-ease);
  display:flex; flex-direction:column;
}
.md-sidebar.is-open{ transform:translateX(0); }
.md-sidebar-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.md-sidebar-backdrop.is-open{ opacity:1; pointer-events:auto; }

/* Desktop: sidebar fixa no fluxo, sem overlay/backdrop */
@media (min-width:1024px){
  .md-shell{ display:flex; }
  .md-sidebar{ position:sticky; top:0; transform:none; flex:0 0 17rem; }
  .md-sidebar-backdrop{ display:none; }
  .md-main-col{ flex:1 1 auto; }
}
.md-sidebar-group > button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.75rem .9rem; border-radius:var(--md-radius-sm);
  font-size:.78rem; font-weight:500; letter-spacing:.02em;
  color:var(--md-ink-soft);
  transition:background-color .2s ease, color .2s ease;
}
.md-sidebar-group > button:hover{ background:rgba(255,255,255,.05); color:var(--md-ink); }
.md-sidebar-group[data-open="true"] > button{ color:var(--md-gold-300); }
.md-sidebar-group .chevron{ transition:transform .25s var(--md-ease); }
.md-sidebar-group[data-open="true"] .chevron{ transform:rotate(90deg); }
.md-submenu{
  max-height:0; overflow:hidden;
  transition:max-height .35s var(--md-ease);
}
.md-sidebar-group[data-open="true"] .md-submenu{ max-height:24rem; }
.md-submenu a{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .9rem .6rem 2.1rem;
  font-size:.8rem; color:var(--md-ink-faint);
  border-radius:var(--md-radius-sm);
  transition:background-color .2s ease, color .2s ease;
}
.md-submenu a:hover{ background:rgba(255,255,255,.05); color:var(--md-ink); }
.md-submenu a.is-active{ color:var(--md-gold-300); background:rgba(214,167,46,.08); }

/* ===== Topbar ===== */
.md-topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--md-border);
}

/* ===== Hero card — capa com imagem cheia + overlay (ex.: atalho pra um dashboard externo) ===== */
.md-hero-card{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  border-radius:var(--md-radius-lg);
  overflow:hidden;
  border:1px solid var(--md-border);
  transition:transform .5s var(--md-ease), border-color .3s ease, box-shadow .5s ease;
}
.md-hero-card:hover{
  transform:translateY(-.4rem);
  border-color:rgba(214,167,46,.4);
  box-shadow:0 1.5rem 3rem -0.75rem rgba(214,167,46,.35);
}
.md-hero-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--md-ease);
}
.md-hero-card:hover img{ transform:scale(1.05); }
.md-hero-card .scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.15) 55%, transparent 85%);
}
.md-hero-card .content{
  position:absolute; inset-inline:0; bottom:0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  padding:1.25rem;
}
.md-hero-eyebrow{
  font-size:.65rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--md-gold-300); margin-bottom:.3rem;
}

/* ===== Iframe embutido (Power BI, chatbot) — sempre responsivo ===== */
.md-iframe-wrap{
  position:relative;
  width:100%;
  min-height:70vh;
  border-radius:var(--md-radius-lg);
  overflow:hidden;
  border:1px solid var(--md-border);
  background:var(--md-surface-1);
}
.md-iframe-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
/* Variante Power BI: trava na proporção padrão que o próprio Power BI recomenda
   pro "Get embed code" (600 x 373,5px = 1,606:1) — sem isso, min-height:70vh
   produz uma proporção que não bate com a do relatório, e o "Fit to page" do
   Power BI acaba deixando elementos de fundo do relatório vazarem pra fora do
   card nos cantos. Não usar no chatbot (checagem_orcamento.php), que é vertical. */
.md-iframe-wrap.is-powerbi{
  min-height:0;
  aspect-ratio:600/373.5;
}

/* ===== Modal ===== */
.md-modal-backdrop{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.md-modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
.md-modal{
  width:100%; max-width:26rem;
  border-radius:var(--md-radius-lg);
  padding:1.75rem;
  transform:scale(.96) translateY(.5rem);
  opacity:0;
  transition:transform .3s var(--md-ease), opacity .3s var(--md-ease);
  box-shadow:var(--md-shadow-pop);
}
.md-modal-backdrop.is-open .md-modal{ transform:scale(1) translateY(0); opacity:1; }
.md-modal-md{ max-width:34rem; }
.md-modal-lg{ max-width:46rem; max-height:calc(100vh - 3rem); overflow-y:auto; }
.md-modal-title{ font-size:1.15rem; font-weight:600; margin-bottom:.5rem; }
.md-modal-body{ font-size:.88rem; color:var(--md-ink-soft); line-height:1.6; margin-bottom:1.5rem; }
.md-modal-actions{ display:flex; justify-content:flex-end; gap:.6rem; }

/* ===== Toast ===== */
.md-toast-container{
  position:fixed; top:1.25rem; right:1.25rem; z-index:120;
  display:flex; flex-direction:column; gap:.6rem;
  width:min(22rem, calc(100vw - 2.5rem));
}
.md-toast{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.9rem 1rem;
  border-radius:var(--md-radius-md);
  font-size:.84rem;
  box-shadow:var(--md-shadow-pop);
  transform:translateX(1.5rem); opacity:0;
  transition:transform .35s var(--md-ease), opacity .35s var(--md-ease);
}
.md-toast.is-visible{ transform:translateX(0); opacity:1; }
.md-toast-success{ border:1px solid rgba(34,197,94,.3); }
.md-toast-danger{ border:1px solid rgba(239,68,68,.3); }
.md-toast-info{ border:1px solid rgba(56,189,248,.3); }

/* ===== Autenticação (login / recuperação / redefinição de senha) ===== */
.md-auth-page{
  min-height:100vh;
  width:100%;
  position:relative;
  background:#000 url('/public/assets/img/auth-bg.jpg') center/cover no-repeat;
  color:var(--md-ink-soft);
  isolation:isolate;
}
.md-auth-page::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.65) 70%);
  pointer-events:none;
}
.md-auth-grid{
  position:relative; z-index:1;
  min-height:100vh;
  width:min(100%,1680px);
  margin:0 auto;
  padding:clamp(1.5rem,3vw,3rem) clamp(1.5rem,4.5vw,4.75rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,480px);
  align-items:center;
  gap:clamp(1.9rem,4vw,4.5rem);
  box-sizing:border-box;
}
.md-auth-left{ align-self:end; padding-bottom:3rem; max-width:28rem; min-width:0; }
.md-auth-eyebrow{ margin:0 0 .4rem; font-size:1.35rem; font-weight:400; letter-spacing:.02em; color:#e2e8f0; }
.md-auth-eyebrow-accent{ margin:0 0 1.1rem; font-size:1.35rem; font-weight:600; letter-spacing:.02em; color:var(--md-amber-300); }
.md-auth-rule{ width:2.5rem; height:2px; background:var(--md-orange-500); margin-bottom:1rem; }
.md-auth-desc{ margin:0; font-size:.875rem; line-height:1.6; font-weight:300; color:var(--md-ink-soft); max-width:24rem; }

.md-auth-right{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; min-width:0; position:relative; }
.md-auth-card{
  width:100%; max-width:27.5rem;
  background:rgba(7,7,9,.84);
  border:1px solid rgba(196,145,40,.55);
  border-radius:1.5rem;
  padding:4.75rem 2.5rem 2.75rem;
  box-shadow:0 1.9rem 5rem rgba(0,0,0,.56), 0 0 3.75rem rgba(184,123,15,.06);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  position:relative;
  margin-top:3.5rem;
  box-sizing:border-box;
}
.md-auth-badge{
  position:absolute; top:-3.25rem; left:50%; transform:translateX(-50%);
  height:5.5rem; width:auto; z-index:2;
}
/* O lockup do logo fica metade fora/metade dentro do card, e o PNG tem fundo
   transparente ao redor dos círculos — sem isso, a borda do card aparece
   "cortando" o logo bem onde as duas áreas se cruzam. Esse painel sólido,
   atrás da metade inferior do lockup e acima da borda em z-index, cobre
   exatamente essa faixa. */
.md-auth-card::before{
  content:"";
  position:absolute;
  top:-1rem; left:50%; transform:translateX(-50%);
  width:10rem; height:3.5rem;
  background:#050505;
  border-radius:1.75rem;
  z-index:1;
  pointer-events:none;
}
.md-auth-title{ margin:0 0 .4rem; text-align:center; font-size:1.35rem; font-weight:500; color:var(--md-ink); }
.md-auth-subtitle{ margin:0 0 2rem; text-align:center; font-size:.875rem; font-weight:300; color:var(--md-ink-faint); }
.md-auth-form{ display:flex; flex-direction:column; gap:1rem; }

.md-auth-field-group{ display:flex; flex-direction:column; gap:.4rem; }
.md-auth-field{
  display:flex; align-items:center; gap:.6rem;
  background:var(--md-surface-2);
  border:1px solid var(--md-border-strong);
  border-radius:var(--md-radius-sm);
  padding:0 1rem; height:3.25rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.md-auth-field:focus-within{ border-color:var(--md-gold-400); box-shadow:0 0 0 .2rem rgba(214,167,46,.22); }
.md-auth-field > iconify-icon{ color:var(--md-ink-faint); flex-shrink:0; font-size:1.15rem; }
.md-auth-field input{ flex:1; min-width:0; background:transparent; border:0; outline:none; box-shadow:none; color:var(--md-ink); font-family:inherit; font-size:.9rem; height:100%; }
.md-auth-field input:focus,
.md-auth-field input:focus-visible{ outline:none; box-shadow:none; }
.md-auth-field input::placeholder{ color:var(--md-ink-faint); }
.md-auth-field.has-error{ border-color:var(--md-danger); }
.md-auth-field input:-webkit-autofill,
.md-auth-field input:-webkit-autofill:hover,
.md-auth-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--md-ink);
  -webkit-box-shadow:0 0 0 1000px var(--md-surface-2) inset;
  box-shadow:0 0 0 1000px var(--md-surface-2) inset;
  transition:background-color 5000s ease-in-out 0s;
  caret-color:var(--md-ink);
}
.md-auth-toggle{ background:none; border:0; padding:.25rem; margin:0; cursor:pointer; display:flex; color:var(--md-ink-faint); flex-shrink:0; transition:color .15s ease; }
.md-auth-toggle:hover{ color:var(--md-ink); }
.md-auth-hint{ font-size:.76rem; color:var(--md-ink-faint); }
.md-auth-hint.is-error{ color:#fca5a5; }

.md-auth-divider{ display:flex; align-items:center; gap:.75rem; margin:1.5rem 0; }
.md-auth-divider .line{ flex:1; height:1px; background:var(--md-border); }
.md-auth-divider span:not(.line){ font-size:.75rem; color:var(--md-ink-faint); font-weight:300; }

.md-auth-link-row{ text-align:center; }
.md-auth-link-row a{ font-size:.8rem; font-weight:400; color:var(--md-amber-300); text-decoration:underline; text-underline-offset:3px; }
.md-auth-link-row a:hover{ color:var(--md-amber-400); }

.md-auth-alert{
  border-radius:.9rem; padding:.75rem 1rem; font-size:.85rem; margin-bottom:1.25rem;
}
.md-auth-alert-success{ border:1px solid rgba(34,197,94,.25); background:var(--md-success-soft); color:#bbf7d0; }
.md-auth-alert-danger{ border:1px solid rgba(239,68,68,.25); background:var(--md-danger-soft); color:#fecaca; }

.md-auth-footer{ display:flex; align-items:center; justify-content:center; gap:.4rem; color:#7f7b74; font-size:.75rem; font-weight:300; }
.md-auth-footer a{ color:#7f7b74; text-decoration:underline; text-underline-offset:2px; }
.md-auth-footer a:hover{ color:var(--md-amber-300); }

@media (max-width:880px){
  .md-auth-grid{ grid-template-columns:1fr; }
  .md-auth-left{ display:none; }
}
@media (max-width:480px){
  .md-auth-card{ padding:4rem 1.5rem 2rem; }
}

@media (prefers-reduced-motion: reduce){
  .md-btn, .md-card, .md-card-feature, .md-icon-btn, .md-icon-tile, .md-sidebar, .md-submenu,
  .md-modal, .md-modal-backdrop, .md-toast, .md-status-dot::after, .md-spinner,
  .md-glow-blob, .md-text-shimmer{ transition:none; animation-duration:.01ms; }
}