/* =========================================================
   LAYOUT.CSS — CLEAN (sem duplicações / sem classes redundantes)
   ========================================================= */

:root{
  /* base */
  --bg:#EDF2F7;
  --text:#1A202C;
  --muted:rgba(26,32,44,.70);
  --border:#CBD5E0;
  --card:rgba(255,255,255,.85);
  --shadow:0 .75rem 1.25rem rgba(0,0,0,.08);
  --radius:14px;

    /* hero */
  --hero-grad-from:#2563eb;
  --hero-grad-to:#10b981;
  --hero-text:#ffffff;
  --hero-subtext:rgba(255,255,255,.86);
  --hero-border:rgba(255,255,255,.22);
  --hero-sheen:rgba(255,255,255,.18);
  --hero-shadow:0 18px 40px rgba(2,6,23,.14);

  /* primária */
  --primary:#0A58FF;
  --primary-hover:#0047FF;
  --primary-active:#0036D9;

  /* success (apoio) */
  --success:#095CF4;
  --success-hover:#0046BD;
  --success-active:#003A9C;

  /* texto em superfícies coloridas */
  --on-primary:rgba(255,255,255,.96);
  --on-success:rgba(255,255,255,.96);
  --on-danger:rgba(255,255,255,.96);

  /* tabelas */
  --table-head-bg:rgba(10,88,255,.10);
  --table-row-hover:rgba(10,88,255,.06);

  /* gradiente headers/hero */
  --hd-success-to:var(--primary-active);

  /* branco/preto utilitários */
  --white:#fff;
  --black:#000;

  --white-10:rgba(255,255,255,.10);
  --white-12:rgba(255,255,255,.12);
  --white-14:rgba(255,255,255,.14);
  --white-18:rgba(255,255,255,.18);
  --white-22:rgba(255,255,255,.22);
  --white-28:rgba(255,255,255,.28);
  --white-55:rgba(255,255,255,.55);
  --white-70:rgba(255,255,255,.70);
  --white-82:rgba(255,255,255,.82);
  --white-92:rgba(255,255,255,.92);
  --white-94:rgba(255,255,255,.94);

  --black-18:rgba(0,0,0,.18);
  --black-20:rgba(0,0,0,.20);
  --black-22:rgba(0,0,0,.22);
  --black-25:rgba(0,0,0,.25);
  --black-35:rgba(0,0,0,.35);
  --black-40:rgba(0,0,0,.40);
  --black-55:rgba(0,0,0,.55);
  --black-60:rgba(0,0,0,.60);

  /* soft colors p/ ícones/badges */
  --soft-primary:rgba(10,88,255,.92);
  --soft-success:rgba(34,197,94,.92);
  --soft-danger:rgba(239,68,68,.92);
  --soft-warning:rgba(245,158,11,.92);
  --soft-info:rgba(6,182,212,.92);
  --soft-secondary:rgba(71,85,105,.92);

  /* glass */
  --glass-bg:rgba(255,255,255,.10);
  --glass-brd:rgba(255,255,255,.35);
  --glass-blur:16px;

  --shadow-xl:0 18px 40px rgba(0,0,0,.25);
  --shadow-dropdown:0 22px 60px rgba(0,0,0,.22);

  --glass-panel:var(--white-94);
  --glass-border:rgba(203,213,224,.78);
  --glass-shadow:var(--shadow-dropdown);

  /* ring/empresa (usado no botão de usuário) */
  --company-accent:#78A0FF;
  --ring-gold:rgba(255,215,120,.92);

  /* premium hover */
  --lift:translateY(-2px);
  --ring:0 0 0 3px rgba(59,130,246,.18);
  --glow:0 18px 44px rgba(2,6,23,.12);
  --glow-dark:0 22px 60px rgba(0,0,0,.55);
}

html, body{ height:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Google Sans","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =========================================================
   DARK MODE (por classe)
   ========================================================= */
body.dark-mode{
  --bg:#0b1220;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --border:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.06);
  --shadow:0 .85rem 1.35rem rgba(0,0,0,.35);

  --glass-bg:rgba(255,255,255,.06);
  --glass-brd:rgba(255,255,255,.18);
  --glass-panel:rgba(46,50,58,.92);
  --glass-border:var(--white-14);
  --glass-shadow:var(--shadow-dropdown);

    --hero-grad-from:#1d4ed8;
  --hero-grad-to:#059669;
  --hero-text:rgba(255,255,255,.96);
  --hero-subtext:rgba(255,255,255,.82);
  --hero-border:rgba(255,255,255,.18);
  --hero-sheen:rgba(255,255,255,.14);
  --hero-shadow:0 22px 52px rgba(0,0,0,.42);

  --table-head-bg:rgba(255,255,255,.06);
  --table-row-hover:rgba(255,255,255,.06);

  /* soft mais vivos no dark */
  --soft-primary:rgba(150,200,165,.95);
  --soft-success:rgba(120,210,155,.95);
  --soft-danger:rgba(255,130,150,.95);
  --soft-warning:rgba(255,210,120,.95);
  --soft-info:rgba(110,220,255,.95);
  --soft-secondary:rgba(220,230,255,.90);
}

body.dark-mode .text-muted,
body.dark-mode .text-muted-soft{ color:var(--muted)!important; }

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.14)!important;
  color:rgba(255,255,255,.92)!important;
}
body.dark-mode .form-control::placeholder{ color:rgba(255,255,255,.55)!important; }
body.dark-mode .btn-close{ filter:invert(1) grayscale(100%); opacity:.85; }

/* =========================================================
   UI MODE — COMPACT (ui-sm)
   ========================================================= */
body.ui-sm{ --radius:12px; font-size:.93rem; }
body.ui-sm h1{ font-size:1.55rem; }
body.ui-sm h2{ font-size:1.35rem; }
body.ui-sm h3{ font-size:1.15rem; }
body.ui-sm h4{ font-size:1rem; }

.main-wrap{ padding:16px 14px 22px; }
@media (min-width: 992px){ .main-wrap{ padding:18px 18px 24px; } }
body.ui-sm .main-wrap{ padding:14px 12px 20px; }

body.ui-sm .form-control,
body.ui-sm .form-select{
  padding:.4rem .65rem;
  font-size:.9rem;
  border-radius:10px;
}
body.ui-sm .btn{ padding:.38rem .7rem; font-size:.88rem; }
body.ui-sm .badge-soft{ font-size:.72rem; padding:.28rem .5rem; }

/* =========================================================
   NAVBAR
   ========================================================= */
.app-navbar{
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:sticky;
  top:0;
  z-index:1035;
}
body.dark-mode .app-navbar{
  background:rgba(44,48,58,.82);
  border-bottom-color:rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.app-navbar .navbar-collapse{ overflow:visible!important; }
.app-navbar .navbar-nav{ align-items:center; }

.app-brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  letter-spacing:.2px;
}
body.dark-mode .app-brand{ color:rgba(255,255,255,.92); }

.app-logo{
  width:34px; height:34px;
  object-fit:contain;
  border-radius:10px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(203,213,224,.7);
  box-shadow:0 .35rem .75rem rgba(0,0,0,.10);
}
body.dark-mode .app-logo{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 .6rem 1.1rem rgba(0,0,0,.35);
}

/* =========================================================
   BUTTONS (bootstrap vars) + padrão radius/focus
   ========================================================= */
.btn-primary{
  --bs-btn-bg:var(--primary);
  --bs-btn-border-color:var(--primary);
  --bs-btn-color:var(--on-primary);
  --bs-btn-hover-bg:var(--primary-hover);
  --bs-btn-hover-border-color:var(--primary-hover);
  --bs-btn-active-bg:var(--primary-active);
  --bs-btn-active-border-color:var(--primary-active);
}
.btn-success{
  --bs-btn-bg:var(--success);
  --bs-btn-border-color:var(--success);
  --bs-btn-color:var(--on-success);
  --bs-btn-hover-bg:var(--success-hover);
  --bs-btn-hover-border-color:var(--success-hover);
  --bs-btn-active-bg:var(--success-active);
  --bs-btn-active-border-color:var(--success-active);
}

.btn, .btn-sm, .btn-lg, .btn-group .btn, .input-group .btn{ border-radius:.65rem!important; }
.btn:focus, .btn:focus-visible{ box-shadow:none!important; outline:none!important; }

/* =========================================================
   CARDS / GLASS / HELPERS
   ========================================================= */
.card-soft{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
body.dark-mode .card-soft{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}

.divider{ height:1px; background:var(--border); opacity:.85; }

.glass-card{
  background:var(--glass-bg);
  border:1px outset var(--glass-brd);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 18px 40px rgba(0, 0, 0, 0.227);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.glass-card:hover{
  transform:var(--lift);
  box-shadow:var(--glow);
  border-color:rgba(59,130,246,.22);
}
body.dark-mode .glass-card:hover{
  box-shadow:var(--glow-dark);
  border-color:rgba(255,255,255,.16);
}

/* =========================================================
   BADGES SOFT
   ========================================================= */
.badge-soft{
  font-weight:600;
  border:1px solid transparent;
  border-radius:999px;
  padding:.35rem .55rem;
  letter-spacing:.2px;
}
.badge-soft-primary{ background:rgba(41,75,147,.12); color:var(--primary); border-color:rgba(41,75,147,.22); }
.badge-soft-secondary{ background:rgba(26,32,44,.08); color:#2D3748; border-color:rgba(26,32,44,.16); }
body.dark-mode .badge-soft-secondary{ color:rgba(255,255,255,.86); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
.badge-soft-success{ background:rgba(43,108,176,.12); color:var(--success); border-color:rgba(43,108,176,.22); }
.badge-soft-danger{ background:rgba(220,53,69,.12); color:#B02A37; border-color:rgba(220,53,69,.22); }
.badge-soft-warning{ background:rgba(255,193,7,.16); color:#856404; border-color:rgba(255,193,7,.28); }
.badge-soft-info{ background:rgba(13,202,240,.14); color:#087990; border-color:rgba(13,202,240,.25); }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  border-radius:14px;
  border:1px solid rgba(203,213,224,.75);
  box-shadow:0 .75rem 1.25rem rgba(0,0,0,.12);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.toast .toast-header{
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(203,213,224,.6);
}
body.dark-mode .toast{
  background:rgba(14,18,30,.85);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
}
body.dark-mode .toast .toast-header{
  background:rgba(14,18,30,.65);
  border-bottom-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}

/* =========================================================
   HERO / HEADER (padrão global do Condon)
   - hero-card = novo padrão visual
   - hero-sm = variação compacta padrão
   - hd-success reaproveita o mesmo visual para compatibilidade
   ========================================================= */
.hero-card,
.hd-success{
  position:relative;
  overflow:visible;
  isolation:isolate;
  border-radius:18px;
  padding:1rem 1rem;
  background:linear-gradient(135deg, var(--hero-grad-from), var(--hero-grad-to));
  border:1px solid var(--hero-border);
  box-shadow:var(--hero-shadow);
  color:var(--hero-text);
}

.hero-card > *,
.hd-success > *{
  position:relative;
  z-index:1;
}

.hero-card::after,
.hd-success::after{
  z-index:0;
}

.hero-actions-desktop,
.hero-actions-mobile{
  position:relative;
  z-index:40;
}

.hero-card .dropdown,
.hd-success .dropdown{
  position:relative;
  z-index:60;
}

.hero-card .dropdown-menu,
.hd-success .dropdown-menu{
  position:absolute;
  z-index:1085 !important;
}


.hero-card::after,
.hd-success::after{
  content:"";
  position:absolute;
  inset:-35% auto auto 55%;
  width:360px;
  height:360px;
  background:radial-gradient(circle, var(--hero-sheen), transparent 62%);
  pointer-events:none;
}

.hero-sm{
  padding:1rem 1rem;
  border-radius:16px;
}

.hero-left{
  display:flex;
  align-items:center;
  gap:.9rem;
  position:relative;
  z-index:1;
  min-width:0;
}

.hero-ico,
.hd-ico{
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.hero-ico i,
.hd-ico i{
  font-size:1.35rem;
  line-height:1;
}

.hero-title{
  margin:0;
  font-size:1.2rem;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.1px;
  color:var(--hero-text);
}

.hero-sub{
  margin-top:.15rem;
  color:var(--hero-subtext);
  font-size:.93rem;
  line-height:1.35;
}

.hero-actions-desktop{
  display:none;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}

.hero-actions-mobile{
  display:flex;
  position:relative;
  z-index:1;
}

.hero-card .dropdown-menu,
.hd-success .dropdown-menu{
  margin-top:8px !important;
}

.hero-actions-mobile .dropdown-menu{
  min-width:240px;
}

.menu-toggle{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  line-height:1!important;
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  box-shadow:0 .7rem 1.35rem rgba(0,0,0,.12);
}

.menu-toggle::after{
  display:none!important;
}

.menu-toggle i{
  font-size:1rem;
  line-height:1;
  pointer-events:none;
}

body.ui-sm .menu-toggle{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  padding:0!important;
  border-radius:999px!important;
}

.menu-toggle:hover{
  transform:translateY(-1px);
}

.menu-card{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  width:100%;
}

.menu-card > .menu-item{
  width:100%;
}

.menu-item{
  appearance:none;
  -webkit-appearance:none;
  display:flex!important;
  align-items:center;
  gap:.7rem;
  width:100%;
  text-align:left;
  border-radius:12px;
  padding:.78rem .82rem;
  color:var(--text)!important;
  text-decoration:none!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  font-weight:600;
  line-height:1.2;
}

.menu-item:hover,
.menu-item:focus{
  background:rgba(10,88,255,.08)!important;
  border-color:rgba(10,88,255,.14)!important;
  color:var(--primary)!important;
}

.menu-item i{
  flex:0 0 18px;
  font-size:1rem;
  line-height:1;
}

.menu-item.btn,
button.menu-item{
  cursor:pointer;
}

body.dark-mode .menu-item{
  color:rgba(255,255,255,.92)!important;
}

body.dark-mode .menu-item:hover,
body.dark-mode .menu-item:focus{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#fff!important;
}
body.ui-sm .menu-toggle{
  width:36px;
  height:36px;
  min-width:36px;
  padding:0!important;
  border-radius:999px!important;
}

@media (min-width: 992px){
  .hero-actions-desktop{ display:flex; }
  .hero-actions-mobile{ display:none; }
}

/* =========================================================
   PADRÃO FAZENDA — Ações do header como botões redondos (ícone)
   Sempre visíveis (desktop e mobile), cada um com tooltip.
   Use .hero-actions-icons + .menu-toggle (com data-bs-toggle="tooltip").
   ========================================================= */
.hero-actions-icons{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}

/* compatibilidade com cabeçalhos antigos */
.hd-success{
  color:var(--hero-text);
}
.hd-success h1,
.hd-success h2,
.hd-success h3,
.hd-success h4,
.hd-success h5,
.hd-success h6{
  color:var(--hero-text);
}
.hd-success .small{
  color:var(--hero-subtext)!important;
}

/* versão compacta global */
body.ui-sm .hero-card,
body.ui-sm .hd-success{
  padding:10px 12px!important;
  border-radius:12px;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}

body.ui-sm .hero-card::after,
body.ui-sm .hd-success::after{
  width:250px;
  height:250px;
  inset:-25% auto auto 62%;
}

body.ui-sm .hero-left{
  gap:.7rem;
}

body.ui-sm .hero-ico,
body.ui-sm .hd-ico{
  width:36px;
  height:36px;
  flex-basis:36px;
  border-radius:12px;
}

body.ui-sm .hero-ico i,
body.ui-sm .hd-ico i{
  font-size:1rem;
}

body.ui-sm .hero-title{
  font-size:1.05rem;
}

body.ui-sm .hero-sub,
body.ui-sm .hd-success .small{
  font-size:.78rem;
}

body.ui-sm .hero-actions-desktop .btn,
body.ui-sm .hero-actions-mobile .btn,
body.ui-sm .hd-success .btn{
  padding:.32rem .6rem;
  font-size:.78rem;
}
/* =========================================================
   ICON BUTTONS (glass)
   ========================================================= */
.btn-ic{
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(203,213,224,.65);
  box-shadow:0 .6rem 1.2rem rgba(0,0,0,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration:none;
}
body.ui-sm .btn-ic{ width:34px; height:34px; }
body.dark-mode .btn-ic{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 .9rem 1.4rem rgba(0,0,0,.45);
}
.btn-ic:hover{
  transform:translateY(-1px);
  box-shadow:0 .9rem 1.5rem rgba(0,0,0,.12);
  background:rgba(255,255,255,.70);
}
body.dark-mode .btn-ic:hover{
  background:rgba(255,255,255,.10);
  box-shadow:0 1.1rem 1.7rem rgba(0,0,0,.55);
}
.btn-ic i{ font-size:1.05rem; line-height:1; }

.btn-ic--primary i{ color:var(--soft-primary); }
.btn-ic--success i{ color:var(--soft-success); }
.btn-ic--danger  i{ color:var(--soft-danger); }
.btn-ic--warning i{ color:var(--soft-warning); }
.btn-ic--info    i{ color:var(--soft-info); }
.btn-ic--secondary i{ color:var(--soft-secondary); }

.ic-group{ display:inline-flex; align-items:center; gap:8px; }
body.ui-sm .ic-group{ gap:6px; }

/* ===== MOBILE: não deixar ações vazarem do card ===== */
.user-card{
  position: relative;              /* corta qualquer vazamento */
}

/* anula possíveis margens negativas do alpino-ui no ic-group */
.user-card .ic-group{
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  flex-shrink: 0;
}

/* opcional: deixa os botões um pouco menores no mobile */
@media (max-width: 576px){
  .user-card .btn-ic{
    width: 34px !important;
    height: 34px !important;
  }
}
.user-card{ padding-right: 16px !important; }  /* mais espaço pro ic-group */
.user-card .ic-group{ margin-right: 0 !important; }
/* =========================================================
   TOOLTIP glass
   ========================================================= */
.tooltip{ z-index:9999; }
.tooltip .tooltip-inner{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(203,213,224,.75);
  color:#111827;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  border-radius:12px;
  padding:.45rem .6rem;
  font-weight:600;
  letter-spacing:.2px;
}
body.dark-mode .tooltip .tooltip-inner{
  background:rgba(46,50,58,.86);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.96);
  box-shadow:0 16px 34px rgba(0,0,0,.55);
}

/* =========================================================
   MODAL — GLASS + HEADER (modal-hd-success)
   ========================================================= */
.modal{ z-index:1060; }
.modal-backdrop{ z-index:1055; }

.modal .modal-content{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 40px rgba(0,0,0,.20);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden; /* deixa elegante (sem bloco duplicado) */
}
.modal .modal-header{ border-bottom:1px solid rgba(203,213,224,.55); }
.modal .modal-footer{ border-top:1px solid rgba(203,213,224,.55); }

body.dark-mode .modal .modal-content{
  background:rgba(46,50,58,.88);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 22px 50px rgba(0,0,0,.55);
}
body.dark-mode .modal .modal-header,
body.dark-mode .modal .modal-footer{ border-color:rgba(255,255,255,.10); }

/* Modal header estilo “Comunicados” */
.modal-hd-success{
  position:relative;
  background:linear-gradient(135deg, var(--success), var(--hd-success-to));
  border-bottom:none!important;
  padding:21px 20px!important;
  color:var(--on-success)!important;
}
.modal-hd-success *{ color:var(--on-success)!important; }

.modal-hd-success .mh{ display:flex; align-items:center; gap:14px; }
.modal-hd-success .mh-left{ display:flex; align-items:center; gap:12px; }


.modal-hd-success .mh-ico{
  width:44px; height:44px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
}
.modal-hd-success .mh-ico i{ font-size:1.25rem; }


.modal-hd-success .mh-title{ font-weight:700; font-size:1.05rem; margin:0; }
.modal-hd-success .mh-sub{ font-size:.82rem; opacity:.88; margin-top:2px; }

.modal-hd-success .btn-close{
  position:absolute;
  top:14px; right:16px;
  filter:invert(1) grayscale(100%);
  opacity:.95;
}
.modal-hd-success .btn-close:hover{ opacity:1; }

body.ui-sm .modal-hd-success{ padding:12px 12px!important; }
body.ui-sm .modal-hd-success .mh-ico{ width:36px; height:36px; border-radius:12px; }
body.ui-sm .modal-hd-success .mh-ico i{ font-size:1rem; }
body.ui-sm .modal-hd-success .mh-title{ font-size:1rem; }
body.ui-sm .modal-hd-success .mh-sub{ font-size:.78rem; }

/* =========================================================
   DROPDOWN GLASS (navbar user) — não expande navbar
   ========================================================= */
.app-navbar .dropdown{ position:relative; }

.nav-user-btn{
  width:38px; height:38px;
  border-radius:999px!important;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0!important;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(203,213,224,.65);
  box-shadow:0 .6rem 1.2rem rgba(0,0,0,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:relative;
  overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
body.ui-sm .nav-user-btn{ width:34px; height:34px; }
.nav-user-btn i{ font-size:1.15rem; color:var(--soft-secondary); }
.nav-user-btn.dropdown-toggle::after{ display:none!important; }
.nav-user-btn img{ display:block; }

body.dark-mode .nav-user-btn{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--company-accent) 30%, transparent),
    0 .9rem 1.4rem rgba(0,0,0,.45);
}
body.dark-mode .nav-user-btn::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--company-accent) 45%, transparent),
      transparent 62%);
  opacity:.60;
  pointer-events:none;
}
body.dark-mode .nav-user-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--company-accent) 40%, transparent),
    0 1.1rem 1.7rem rgba(0,0,0,.55);
}

/* online dot */
.nav-user-btn.is-online::before{
  content:"";
  position:absolute;
  right:3px; bottom:3px;
  width:10px; height:10px;
  border-radius:999px;
  background:#22c55e;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  z-index:2;
}
body.dark-mode .nav-user-btn.is-online::before{
  border-color:rgba(46,50,58,.92);
  box-shadow:0 10px 20px rgba(0,0,0,.55);
}

/* admin ring dourado no dark */
body.dark-mode.is-admin .nav-user-btn{
  box-shadow:
    0 0 0 2px rgba(255,215,120,.28),
    0 .9rem 1.4rem rgba(0,0,0,.45);
  border-color:rgba(255,215,120,.22);
}
body.dark-mode.is-admin .nav-user-btn::after{
  background:radial-gradient(circle at 30% 30%, rgba(255,215,120,.45), transparent 62%);
  opacity:.62;
}
body.dark-mode.is-admin .nav-user-btn:hover{
  box-shadow:
    0 0 0 3px rgba(255,215,120,.34),
    0 1.1rem 1.7rem rgba(0,0,0,.55);
}

/* menu */
.dropdown-glass{ min-width:260px; padding:.55rem; border-radius:14px; }

.hero-actions-mobile .dropdown-menu.dropdown-glass{
  min-width:250px;
  padding:.5rem;
  border-radius:16px;
  overflow:hidden;
}

.hero-actions-mobile .dropdown-menu .menu-card{
  margin:0;
}

.app-navbar .dropdown-menu{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  left:auto!important;
  margin:0!important;
  z-index:9999!important;
  will-change:transform;
}

.dropdown-menu.dropdown-glass{
  overflow:hidden;
  background:var(--glass-panel)!important;
  border:1px solid var(--glass-border)!important;
  box-shadow:var(--glass-shadow)!important;
  backdrop-filter:blur(28px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(170%)!important;
}
.dropdown-menu.dropdown-glass::before{
  content:"";
  position:absolute;
  inset:-24px;
  background:
    radial-gradient(140px 90px at 20% 15%, rgba(255,255,255,.58), transparent 60%),
    radial-gradient(160px 110px at 85% 10%, rgba(41,75,147,.20), transparent 62%),
    radial-gradient(220px 150px at 40% 92%, rgba(255,255,255,.40), transparent 68%);
  opacity:.80;
  pointer-events:none;
}
.dropdown-menu.dropdown-glass > *{ position:relative; z-index:1; }

body.dark-mode .dropdown-menu.dropdown-glass{
  background:rgba(46,50,58,.92)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 28px 75px rgba(0,0,0,.60)!important;
  backdrop-filter:blur(30px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(170%)!important;
}
body.dark-mode .dropdown-menu.dropdown-glass::before{ opacity:.55; }

.dropdown-glass .dropdown-header{ padding:.55rem .6rem; margin:0; }
.dropdown-glass .user-name{ font-weight:700; color:var(--text); line-height:1.15; }
.dropdown-glass .user-email{ font-size:.82rem; color:var(--muted); }
body.dark-mode .dropdown-glass .user-name{ color:rgba(255,255,255,.92); }
body.dark-mode .dropdown-glass .user-email{ color:rgba(255,255,255,.65); }

.dropdown-glass .dropdown-item{
  border-radius:12px;
  padding:.55rem .6rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  color:var(--text)!important;
}
.dropdown-glass .dropdown-item:hover{ background:rgba(41,75,147,.08); }
body.dark-mode .dropdown-glass .dropdown-item{ color:rgba(255,255,255,.92)!important; }
body.dark-mode .dropdown-glass .dropdown-item:hover{ background:rgba(255,255,255,.08); }

.dropdown-glass .dropdown-divider{
  border-top-color:rgba(203,213,224,.65);
  margin:.5rem .2rem;
}
body.dark-mode .dropdown-glass .dropdown-divider{ border-top-color:rgba(255,255,255,.10); }

.dropdown-glass .theme-ico{
  width:28px; height:28px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(41,75,147,.10);
  border:1px solid rgba(41,75,147,.16);
}
body.dark-mode .dropdown-glass .theme-ico{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

/* =========================================================
   TABLES — padrão + dark mode
   ========================================================= */
.table-responsive{ background:transparent; }
.table{ margin-bottom:0; }
.card-soft .table{ background:transparent!important; }

.card-soft .table thead{ background:var(--table-head-bg)!important; }
.card-soft .table thead th{ border-bottom-color:rgba(0,0,0,.06); }

.table-hover tbody tr:hover{ background:var(--table-row-hover); }

body.dark-mode .table{
  --bs-table-bg:transparent!important;
  --bs-table-color:rgba(255,255,255,.92)!important;
  --bs-table-striped-bg:rgba(255,255,255,.03)!important;
  --bs-table-striped-color:rgba(255,255,255,.92)!important;
  --bs-table-hover-bg:rgba(255,255,255,.06)!important;
  --bs-table-hover-color:rgba(255,255,255,.92)!important;
  --bs-table-border-color:rgba(255,255,255,.10)!important;
  background:transparent!important;
  color:rgba(255,255,255,.92)!important;
}
body.dark-mode .table-responsive,
body.dark-mode .card-soft .table{ background:transparent!important; }

body.dark-mode .table thead,
body.dark-mode .card-soft .table thead{ background:var(--table-head-bg)!important; }

body.dark-mode .table thead th,
body.dark-mode .card-soft .table thead th{
  color:rgba(255,255,255,.82)!important;
  border-bottom-color:rgba(255,255,255,.12)!important;
}
body.dark-mode .table td,
body.dark-mode .table th{ border-top-color:rgba(255,255,255,.10)!important; }
body.dark-mode .table-hover tbody tr:hover{ background:var(--table-row-hover)!important; }

/* =========================================================
   FILTER POP (dropdown no header) + OFFCANVAS (mobile)
   ========================================================= */

.hd-success,
.hero-card{
  overflow: visible !important;
}

.hd-success:has(.dropdown-menu.show),
.hero-card:has(.dropdown-menu.show){
  z-index: 1450 !important;
}

.hd-success .dropdown,
.hero-card .dropdown{
  position: relative;
  z-index: 1460 !important;
}

.hd-success .dropdown-menu,
.hero-card .dropdown-menu{
  z-index: 1470 !important;
}

.dropdown-menu.dropdown-glass.filter-pop{
  position: absolute !important;
  z-index: 1470 !important;
  width: min(920px, 96vw);
  padding: 0 !important;
  overflow: visible !important;
}

.filter-pop .table-filters{
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 10px;
}

.offcanvas-glass{
  width:min(420px, 92vw);
  background:var(--glass-panel);
  border-left:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(26px) saturate(170%);
  -webkit-backdrop-filter:blur(26px) saturate(170%);
}
.offcanvas-glass .offcanvas-header{ border-bottom:1px solid rgba(203,213,224,.55); }
body.dark-mode .offcanvas-glass .offcanvas-header{ border-bottom-color:rgba(255,255,255,.10); }

.offcanvas-glass .theme-ico{
  width:36px; height:36px;
  border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(41,75,147,.10);
  border:1px solid rgba(41,75,147,.16);
}
body.dark-mode .offcanvas-glass .theme-ico{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}
.offcanvas-glass .table-filters{ width:100%; margin:0; }
body.dark-mode .offcanvas-glass .btn-close{ filter:invert(1) grayscale(100%); opacity:.85; }

/* =========================================================
   MOBILE helpers
   ========================================================= */
@media (max-width: 576px){
  .dropdown-glass{ min-width:230px; }
  .hd-success{ border-radius:12px; }
}

/* cards (lista) */
.user-card{ animation:fadeIn .18s ease; }
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:none; }
}

/* =========================================================
   KPI cards (único padrão — removeu duplicação)
   - base + variações de cor
   ========================================================= */
.kpi-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin-bottom:12px;
}
@media (max-width: 992px){
  .kpi-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

.kpi-card{
  position:relative;
  border-radius:16px;
  padding:16px 16px;
  color:#fff;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 .9rem 1.8rem rgba(0,0,0,.10);
  transform:translateZ(0);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
  min-height:92px;
}
.kpi-card::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.22), transparent 42%),
    radial-gradient(circle at 85% 0%, rgba(255,255,255,.14), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 60%);
  transform:rotate(-8deg);
  pointer-events:none;
}
.kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 1.25rem 2.4rem rgba(0,0,0,.16);
  filter:saturate(1.02);
}

.kpi-card .kpi-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.kpi-card .kpi-label{
  font-weight:700;
  font-size:.95rem;
  opacity:.95;
  letter-spacing:.2px;
}
.kpi-card .kpi-val{
  font-weight:700;
  font-size:1.7rem;
  letter-spacing:.2px;
  line-height:1.05;
  margin-top:4px;
}
.kpi-card .kpi-sub{
  margin-top:6px;
  font-size:.85rem;
  opacity:.92;
}
.kpi-card .kpi-ico{
  width:56px; height:56px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  flex:0 0 auto;
  box-shadow:0 .65rem 1.25rem rgba(0,0,0,.14);
}
.kpi-card .kpi-ico i{
  font-size:1.65rem;
  line-height:1;
  color:#fff;
  opacity:.98;
}

.kpi-card.is-blue{ background:linear-gradient(135deg, #0b5cff, #0046bd); }
.kpi-card.is-orange{ background:linear-gradient(135deg, #f59e0b, #d97706); }
.kpi-card.is-cyan{ background:linear-gradient(135deg, #06b6d4, #0284c7); }
.kpi-card.is-indigo{ background:linear-gradient(135deg, #6366f1, #4338ca); }
.kpi-card.is-green{ background:linear-gradient(135deg, #22c55e, #16a34a); }
.kpi-card.is-red{ background:linear-gradient(135deg, #ef4444, #b91c1c); }

body.dark-mode .kpi-card{
  box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.45);
  border-color:rgba(255,255,255,.10);
}
body.dark-mode .kpi-card .kpi-ico{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.16);
}

@media (prefers-reduced-motion: reduce){
  .kpi-card{ transition:none!important; }
  .kpi-card:hover{ transform:none!important; }
}

/* =========================================================
   Tabs wrap (genérico)
   ========================================================= */
.tabs-3col{ display:grid; gap:12px; }
@media (min-width: 992px){
  .tabs-3col{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* =========================================================
   Ticket cards (genérico)
   ========================================================= */
.ticket-list{ display:flex; flex-direction:column; gap:10px; padding:10px; }
.ticket-card{
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .12s ease;
}
.ticket-card:hover{ transform:translateY(-1px); }
.ticket-title{ font-weight:700; }
.ticket-sub{ color:var(--muted); font-size:.86rem; }
.ticket-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

/* =========================================================
   Conversation bubbles + timeline (genérico)
   ========================================================= */
.conv{ display:flex; flex-direction:column; gap:10px; }

.bubble{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.55);
}
body.dark-mode .bubble{ background:rgba(255,255,255,.06); }
.bubble.me{
  border-color:rgba(41,75,147,.22);
  background:rgba(41,75,147,.08);
}
body.dark-mode .bubble.me{ background:rgba(120,160,255,.10); }

.bubble .b-meta{
  font-size:.78rem;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.bubble .b-text{ margin-top:6px; white-space:pre-wrap; }

.timeline{ display:flex; flex-direction:column; gap:10px; }
.tl-item{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.40);
}
body.dark-mode .tl-item{ background:rgba(255,255,255,.05); }
.tl-top{ display:flex; justify-content:space-between; gap:10px; font-size:.8rem; color:var(--muted); }
.tl-acao{ font-weight:700; color:var(--text); margin-top:4px; }
.tl-diff{ font-size:.85rem; color:var(--muted); margin-top:4px; }

/* =========================================================
   Truncate (único)
   ========================================================= */
.truncate-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =========================================================
   PREMIUM UI (reutilizável)
   ========================================================= */
.r-card{ padding:0; overflow:hidden; }

.r-hd{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px;
  background:linear-gradient(135deg, var(--success), var(--success-hover));
  color:var(--on-success);
  overflow:hidden;
}
.r-hd .t{ font-weight:600; letter-spacing:.1px; }
.r-hd .s{ font-size:.82rem; opacity:.92; }
.r-hd .hd-left{ display:flex; align-items:center; gap:10px; min-width:0; }

.r-hd .hd-ico{
  width:44px; height:44px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 .75rem 1.25rem rgba(0,0,0,.10);
  flex:0 0 auto;
}
.r-hd .hd-ico i{ font-size:1.25rem; color:rgba(255,255,255,.98); }

.r-body{ padding:12px; }

/* shine no header */
.r-hd::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent 65%);
  transform:rotate(12deg);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.glass-card:hover .r-hd::after{ opacity:.9; }

/* Mini item */
.mini-item{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.45);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
body.dark-mode .mini-item{ background:rgba(255,255,255,.05); }

.mini-item:hover{
  transform:var(--lift);
  box-shadow:0 16px 34px rgba(2,6,23,.10);
  border-color:rgba(59,130,246,.22);
  background:rgba(255,255,255,.60);
}
body.dark-mode .mini-item:hover{
  background:rgba(255,255,255,.08);
  box-shadow:0 18px 42px rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.16);
}
.mini-item:focus,
.mini-item:focus-within{
  outline:none;
  box-shadow:var(--ring);
}

/* ícone mini-item */
.mi-ico{
  width:44px; height:44px;
  border-radius:14px;
  flex:0 0 44px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,88,255,.10);
  border:1px solid rgba(10,88,255,.18);
  box-shadow:0 .65rem 1.2rem rgba(2,6,23,.10);
}
body.dark-mode .mi-ico{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 1.0rem 1.8rem rgba(0,0,0,.45);
}
.mi-ico i{ font-size:1.2rem; color:var(--soft-primary); }

/* Pills */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.18);
  background:rgba(59,130,246,.06);
  font-weight:700;
  font-size:.78rem;
  white-space:nowrap;
}
body.dark-mode .pill{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.pill i{ color:var(--soft-primary); }

.pill--date{ background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.20); }
.pill--date i{ color:rgba(59,130,246,.92); }
.pill--user{ background:rgba(71,85,105,.10); border-color:rgba(71,85,105,.20); }
.pill--user i{ color:rgba(71,85,105,.92); }
.pill--tel{ background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.22); }
.pill--tel i{ color:rgba(37,99,235,.95); }
.pill--wa{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.24); }
.pill--wa i{ color:rgba(16,185,129,.95); }
.pill--status{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25); }
.pill--status i{ color:rgba(245,158,11,.95); }

/* Avatares/thumbs */
.p-ava, .menu-thumb, .anv-ava{
  border:1px solid var(--border);
  background:rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
}
body.dark-mode .p-ava,
body.dark-mode .menu-thumb,
body.dark-mode .anv-ava{ background:rgba(255,255,255,.06); }

.p-ava{
  width:56px; height:56px;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow:0 .65rem 1.2rem rgba(2,6,23,.10);
}
.p-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.p-ava i{ font-size:1.8rem; opacity:.65; }

.menu-thumb{
  width:92px; height:92px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow:0 .65rem 1.2rem rgba(2,6,23,.10);
}
.menu-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.anv-ava{
  width:44px; height:44px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 44px;
  box-shadow:0 .65rem 1.2rem rgba(2,6,23,.10);
}
.anv-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.anv-ava i{ font-size:1.25rem; opacity:.65; }

/* ===== FIX mobile card: ações nunca saem do card e não cortam sombras ===== */
@media (max-width: 991.98px){

  /* o wrapper do topo do card (onde tem conteúdo + ic-group) */
  .user-card > .d-flex{
    display: grid !important;
    grid-template-columns: 1fr auto; /* conteúdo | ações */
    align-items: start;
    column-gap: 10px;
  }

  /* garante que o conteúdo da esquerda possa encolher sem empurrar ações */
  .user-card > .d-flex > .min-w-0,
  .user-card > .d-flex > .d-flex.min-w-0{
    min-width: 0 !important;
  }

  /* ações sempre dentro e alinhadas */
  .user-card .ic-group{
    justify-self: end;
    align-self: start;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
  }
}
/* =========================================================
   ============= PADRÕES REUTILIZÁVEIS CONDON ==============
   Adicionado em: gestão jurídico (1ª implementação)
   Use estes componentes em telas de listagem com filtros,
   prioridades, conversa, etc.
   ========================================================= */


/* =========================================================
   KPI BUTTONS — KPIs clicáveis como filtro
   - Use .kpi-btn quando o KPI também serve para FILTRAR a tela.
   - Diferente do .kpi-card (que é um card colorido informativo).
   - Variações: .kpi-blue / .kpi-orange / .kpi-green / .kpi-red /
                .kpi-cyan / .kpi-indigo / .kpi-amber
   ========================================================= */
.kpi-btn{
  position:relative;
  text-align:left;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  display:flex; align-items:center; gap:12px;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  text-decoration:none;
  color:inherit;
}
/* faixa lateral colorida */
.kpi-btn::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
}
/* brilho radial sutil */
.kpi-btn::after{
  content:"";
  position:absolute;
  inset:-40% -50% auto auto;
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle, var(--kpi-glow, transparent), transparent 65%);
  opacity:.5;
  pointer-events:none;
  z-index:-1;
}
.kpi-btn:hover{
  transform:var(--lift);
  box-shadow:0 18px 36px rgba(2,6,23,.14);
}
.kpi-btn.active{
  border-color:var(--kpi-border, rgba(10,88,255,.55));
  box-shadow:0 18px 36px var(--kpi-shadow, rgba(10,88,255,.18));
}

.kpi-btn .kpi-ico{
  width:48px; height:48px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--kpi-ico-bg, rgba(10,88,255,.10));
  border:1px solid var(--kpi-ico-brd, rgba(10,88,255,.18));
  flex:0 0 48px;
  box-shadow:0 .55rem 1rem rgba(2,6,23,.08);
}
.kpi-btn .kpi-ico i{ font-size:1.4rem; color:var(--kpi-ico-color, var(--soft-primary)); }
.kpi-btn .kpi-num{ font-size:1.45rem; font-weight:800; line-height:1.1; color:var(--text); }
.kpi-btn .kpi-lbl{ color:var(--muted); font-size:.82rem; font-weight:600; }

/* Verde */
.kpi-btn.kpi-green::before{ background:linear-gradient(180deg,#22c55e,#15803d); }
.kpi-btn.kpi-green{
  --kpi-glow:rgba(34,197,94,.18);
  --kpi-border:rgba(34,197,94,.55);
  --kpi-shadow:rgba(34,197,94,.18);
  --kpi-ico-bg:rgba(34,197,94,.14);
  --kpi-ico-brd:rgba(34,197,94,.28);
  --kpi-ico-color:#15803d;
}
body.dark-mode .kpi-btn.kpi-green{ --kpi-ico-color:#86efac; }

/* Azul */
.kpi-btn.kpi-blue::before{ background:linear-gradient(180deg,#3b82f6,#1d4ed8); }
.kpi-btn.kpi-blue{
  --kpi-glow:rgba(59,130,246,.20);
  --kpi-border:rgba(59,130,246,.55);
  --kpi-shadow:rgba(59,130,246,.20);
  --kpi-ico-bg:rgba(59,130,246,.14);
  --kpi-ico-brd:rgba(59,130,246,.28);
  --kpi-ico-color:#1d4ed8;
}
body.dark-mode .kpi-btn.kpi-blue{ --kpi-ico-color:#93c5fd; }

/* Laranja */
.kpi-btn.kpi-orange::before{ background:linear-gradient(180deg,#f59e0b,#b45309); }
.kpi-btn.kpi-orange{
  --kpi-glow:rgba(245,158,11,.22);
  --kpi-border:rgba(245,158,11,.55);
  --kpi-shadow:rgba(245,158,11,.20);
  --kpi-ico-bg:rgba(245,158,11,.14);
  --kpi-ico-brd:rgba(245,158,11,.30);
  --kpi-ico-color:#b45309;
}
body.dark-mode .kpi-btn.kpi-orange{ --kpi-ico-color:#fcd34d; }

/* Vermelho */
.kpi-btn.kpi-red::before{ background:linear-gradient(180deg,#ef4444,#991b1b); }
.kpi-btn.kpi-red{
  --kpi-glow:rgba(239,68,68,.18);
  --kpi-border:rgba(239,68,68,.55);
  --kpi-shadow:rgba(239,68,68,.18);
  --kpi-ico-bg:rgba(239,68,68,.12);
  --kpi-ico-brd:rgba(239,68,68,.28);
  --kpi-ico-color:#b91c1c;
}
body.dark-mode .kpi-btn.kpi-red{ --kpi-ico-color:#fca5a5; }

/* Ciano */
.kpi-btn.kpi-cyan::before{ background:linear-gradient(180deg,#06b6d4,#0e7490); }
.kpi-btn.kpi-cyan{
  --kpi-glow:rgba(6,182,212,.18);
  --kpi-border:rgba(6,182,212,.55);
  --kpi-shadow:rgba(6,182,212,.18);
  --kpi-ico-bg:rgba(6,182,212,.14);
  --kpi-ico-brd:rgba(6,182,212,.28);
  --kpi-ico-color:#0e7490;
}
body.dark-mode .kpi-btn.kpi-cyan{ --kpi-ico-color:#67e8f9; }

/* Indigo */
.kpi-btn.kpi-indigo::before{ background:linear-gradient(180deg,#6366f1,#4338ca); }
.kpi-btn.kpi-indigo{
  --kpi-glow:rgba(99,102,241,.18);
  --kpi-border:rgba(99,102,241,.55);
  --kpi-shadow:rgba(99,102,241,.18);
  --kpi-ico-bg:rgba(99,102,241,.14);
  --kpi-ico-brd:rgba(99,102,241,.28);
  --kpi-ico-color:#4338ca;
}
body.dark-mode .kpi-btn.kpi-indigo{ --kpi-ico-color:#a5b4fc; }

/* Âmbar (entre amarelo e laranja) */
.kpi-btn.kpi-amber::before{ background:linear-gradient(180deg,#fbbf24,#d97706); }
.kpi-btn.kpi-amber{
  --kpi-glow:rgba(251,191,36,.20);
  --kpi-border:rgba(251,191,36,.55);
  --kpi-shadow:rgba(251,191,36,.20);
  --kpi-ico-bg:rgba(251,191,36,.14);
  --kpi-ico-brd:rgba(251,191,36,.30);
  --kpi-ico-color:#92400e;
}
body.dark-mode .kpi-btn.kpi-amber{ --kpi-ico-color:#fde68a; }


/* =========================================================
   STATUS PILL — pílulas de status genéricas
   Use .st-pill com a classe do status: st-ABERTO, st-RESPONDIDO,
   st-FECHADO, st-EM_ANDAMENTO, st-CANCELADO, etc.
   ========================================================= */
.st-pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.72rem; font-weight:700;
  padding:.22rem .55rem;
  border-radius:999px;
  border:1px solid transparent;
}
.st-ABERTO,
.st-NOVO,
.st-EM_ANDAMENTO     { background:rgba(10,88,255,.10);  color:var(--primary); border-color:rgba(10,88,255,.22); }
.st-RESPONDIDO,
.st-PENDENTE,
.st-AGUARDANDO       { background:rgba(245,158,11,.14); color:#92400e;        border-color:rgba(245,158,11,.28); }
.st-FECHADO,
.st-CONCLUIDO,
.st-FINALIZADO       { background:rgba(71,85,105,.14);  color:#1f2937;        border-color:rgba(71,85,105,.22); }
.st-CANCELADO,
.st-REJEITADO        { background:rgba(239,68,68,.12);  color:#b91c1c;        border-color:rgba(239,68,68,.25); }
.st-APROVADO         { background:rgba(34,197,94,.14);  color:#166534;        border-color:rgba(34,197,94,.28); }

body.dark-mode .st-ABERTO,
body.dark-mode .st-NOVO,
body.dark-mode .st-EM_ANDAMENTO   { color:#bfdbfe; }
body.dark-mode .st-RESPONDIDO,
body.dark-mode .st-PENDENTE,
body.dark-mode .st-AGUARDANDO     { color:#fde68a; }
body.dark-mode .st-FECHADO,
body.dark-mode .st-CONCLUIDO,
body.dark-mode .st-FINALIZADO     { color:#e5e7eb; }
body.dark-mode .st-CANCELADO,
body.dark-mode .st-REJEITADO      { color:#fecaca; }
body.dark-mode .st-APROVADO       { color:#bbf7d0; }


/* =========================================================
   CRITICIDADE / PRIORIDADE — badges
   Use .crit-badge com classe: .crit-ALTA, .crit-MEDIA, .crit-BAIXA
   ========================================================= */
.crit-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-weight:700; font-size:.72rem;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid transparent;
}
.crit-badge.crit-ALTA  { background:rgba(239,68,68,.12); color:#b91c1c; border-color:rgba(239,68,68,.25); }
.crit-badge.crit-MEDIA { background:rgba(245,158,11,.14); color:#92400e; border-color:rgba(245,158,11,.28); }
.crit-badge.crit-BAIXA { background:rgba(34,197,94,.14); color:#166534; border-color:rgba(34,197,94,.28); }
body.dark-mode .crit-badge.crit-ALTA  { color:#fecaca; }
body.dark-mode .crit-badge.crit-MEDIA { color:#fde68a; }
body.dark-mode .crit-badge.crit-BAIXA { color:#bbf7d0; }


/* =========================================================
   PRIORIDADE — sections lado a lado (Alta / Média / Baixa)
   ========================================================= */
.prior-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media (min-width: 992px){
  .prior-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); align-items:start; }
}

.prior-section{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.prior-head{
  padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700;
  color:#fff;
}
.prior-head .count{
  background:rgba(255,255,255,.22);
  padding:.15rem .55rem;
  border-radius:999px;
  font-size:.8rem;
}
.prior-head.alta  { background:linear-gradient(135deg,#ef4444,#b91c1c); }
.prior-head.media { background:linear-gradient(135deg,#f59e0b,#b45309); }
.prior-head.baixa { background:linear-gradient(135deg,#22c55e,#15803d); }
.prior-body{
  padding:12px;
  display:flex; flex-direction:column;
  gap:10px;
  flex:1;
  min-height:120px;
}


/* =========================================================
   CARD GENÉRICO DE LISTAGEM — sol-card / item-card
   Card clicável com faixa lateral colorida de criticidade.
   Use a classe + crit-ALTA|crit-MEDIA|crit-BAIXA na faixa.
   ========================================================= */
.sol-card,
.item-card{
  position:relative;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  display:flex; flex-direction:column;
  gap:10px;
}
.sol-card:hover,
.item-card:hover{
  transform:var(--lift);
  box-shadow:0 16px 34px rgba(2,6,23,.12);
  border-color:rgba(10,88,255,.22);
}
body.dark-mode .sol-card:hover,
body.dark-mode .item-card:hover{
  box-shadow:0 18px 42px rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.16);
}
.sol-card .sol-id,
.item-card .item-id{
  font-weight:700; font-size:.78rem;
  color:var(--muted); letter-spacing:.3px;
}
.sol-card .sol-titulo,
.item-card .item-titulo{
  font-weight:700; line-height:1.25; color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sol-card .sol-meta,
.item-card .item-meta{
  display:flex; flex-wrap:wrap; gap:6px; font-size:.78rem;
}
.sol-card .sol-foot,
.item-card .item-foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; margin-top:auto;
}

/* faixa lateral por criticidade */
.sol-card::before,
.item-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  border-top-left-radius:var(--radius);
  border-bottom-left-radius:var(--radius);
  background:var(--soft-secondary);
}
.sol-card.crit-ALTA::before,
.item-card.crit-ALTA::before  { background:var(--soft-danger); }
.sol-card.crit-MEDIA::before,
.item-card.crit-MEDIA::before { background:var(--soft-warning); }
.sol-card.crit-BAIXA::before,
.item-card.crit-BAIXA::before { background:var(--soft-success); }


/* =========================================================
   LISTA — visão alternativa (linhas)
   ========================================================= */
.lista-wrap{ display:flex; flex-direction:column; gap:8px; }
.lista-item{
  display:grid;
  grid-template-columns:60px 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.lista-item:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(2,6,23,.10);
  border-color:rgba(10,88,255,.22);
}
.lista-item .li-id{ font-weight:800; color:var(--muted); font-size:.82rem; }
.lista-item .li-main{ min-width:0; }
.lista-item .li-title{
  font-weight:700; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lista-item .li-meta{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; font-size:.76rem;
}
.lista-item .li-user{
  display:flex; align-items:center; gap:6px;
  font-size:.78rem; color:var(--muted); white-space:nowrap;
}
@media (max-width: 575.98px){
  .lista-item{ grid-template-columns:1fr auto; }
  .lista-item .li-id{ display:none; }
}


/* =========================================================
   AVATAR — pequeno e médio
   ========================================================= */
.av-sm{
  width:28px; height:28px; border-radius:999px;
  overflow:hidden; flex:0 0 28px;
  background:rgba(10,88,255,.08);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.av-sm img{ width:100%; height:100%; object-fit:cover; }
.av-sm i{ color:var(--soft-secondary); font-size:.9rem; }

.av-lg{
  width:44px; height:44px; border-radius:999px;
  overflow:hidden; flex:0 0 44px;
  background:rgba(10,88,255,.08);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.av-lg img{ width:100%; height:100%; object-fit:cover; }
.av-lg i{ color:var(--soft-secondary); font-size:1.2rem; }


/* =========================================================
   TOGGLE de visão (ex: Prioridade / Lista)
   ========================================================= */
.visao-switch{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px;
  background:var(--card);
}
.visao-switch a{
  padding:.35rem .85rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
}
.visao-switch a.active{
  background:var(--primary);
  color:#fff;
}


/* =========================================================
   FILTROS — botão + chips de filtros ativos + offcanvas
   ========================================================= */
.btn-filtros{ position:relative; }
.btn-filtros .filtro-dot{
  position:absolute;
  top:-3px; right:-3px;
  width:10px; height:10px;
  border-radius:999px;
  background:#ef4444;
  border:2px solid var(--card);
}

.active-filters{
  display:flex; flex-wrap:wrap; gap:6px;
  align-items:center;
}
.active-filters .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(10,88,255,.08);
  border:1px solid rgba(10,88,255,.20);
  font-size:.78rem;
  color:var(--text);
}
.active-filters .chip a{
  color:var(--muted);
  text-decoration:none;
}
.active-filters .chip a:hover{ color:#ef4444; }

/* Offcanvas customizado (filtros) — convive com .offcanvas-glass */
.offcanvas-filtros{
  background:var(--card);
  border-left:1px solid var(--border);
}
body.dark-mode .offcanvas-filtros{
  background:rgba(15,23,42,.96);
}
.offcanvas-filtros .offcanvas-header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, var(--hero-grad-from), var(--hero-grad-to));
  color:#fff;
}
.offcanvas-filtros .offcanvas-header .btn-close{
  filter:invert(1) brightness(2);
}
.offcanvas-filtros .offcanvas-body{
  display:flex; flex-direction:column;
  gap:14px;
}


/* =========================================================
   EMPTY STATE — caixa vazia padrão
   ========================================================= */
.empty-box{
  text-align:center;
  padding:24px 14px;
  border:1px dashed var(--border);
  border-radius:var(--radius);
  color:var(--muted);
  background:rgba(255,255,255,.4);
}
body.dark-mode .empty-box{ background:rgba(255,255,255,.04); }
.empty-box i{ font-size:2rem; opacity:.55; }


/* =========================================================
   MODAL GRANDE (90% da tela) — para detalhes complexos
   Use: <div class="modal fade modal-lg-90" ...>
   ========================================================= */
.modal-lg-90 .modal-dialog{
  max-width:95vw;
  margin:1rem auto;
}
@media (min-width: 992px){
  .modal-lg-90 .modal-dialog{ max-width:90vw; }
}
.modal-lg-90 .modal-content{
  height:90vh;
  display:flex;
  flex-direction:column;
  border-radius:var(--radius);
  overflow:hidden;
}
.modal-lg-90 .modal-body{
  flex:1 1 auto;
  overflow:hidden;
  padding:0;
}

/* Grid interno do modal: split detalhes + conversa */
.modal-split-grid{
  display:grid;
  grid-template-columns:1fr;
  height:100%;
}
@media (min-width: 992px){
  .modal-split-grid{ grid-template-columns:1.1fr 1fr; }
}
.modal-split-grid > *{
  padding:14px;
  overflow-y:auto;
}
.modal-split-grid > *:first-child{ border-bottom:1px solid var(--border); }
@media (min-width: 992px){
  .modal-split-grid > *:first-child{
    border-bottom:0;
    border-right:1px solid var(--border);
  }
}


/* =========================================================
   CHAT — bolhas estilo whatsapp
   ========================================================= */
.chat-wrap{
  display:flex; flex-direction:column;
  gap:8px;
  padding:8px 4px;
}
.chat-msg{
  max-width:85%;
  padding:8px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.65);
  border:1px solid var(--border);
  box-shadow:0 .35rem .75rem rgba(0,0,0,.04);
  position:relative;
}
body.dark-mode .chat-msg{ background:rgba(255,255,255,.06); }
.chat-msg.from-me{
  align-self:flex-end;
  background:rgba(10,88,255,.10);
  border-color:rgba(10,88,255,.20);
}
body.dark-mode .chat-msg.from-me{
  background:rgba(120,160,255,.14);
  border-color:rgba(120,160,255,.25);
}
.chat-msg .chat-head{
  display:flex; align-items:center; gap:6px;
  font-size:.72rem; color:var(--muted); margin-bottom:4px;
}
.chat-msg .chat-text{
  white-space:pre-wrap;
  word-wrap:break-word;
  font-size:.92rem;
  line-height:1.35;
}
.chat-msg .chat-time{
  font-size:.7rem; color:var(--muted);
  text-align:right; margin-top:4px;
}
.chat-msg .chat-anexos{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;
}


/* =========================================================
   ANEXO CHIP — link de arquivo anexado
   ========================================================= */
.anexo-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(10,88,255,.08);
  border:1px solid rgba(10,88,255,.18);
  font-size:.78rem;
  color:var(--text);
  text-decoration:none;
  max-width:100%;
}
.anexo-chip:hover{ background:rgba(10,88,255,.14); }
.anexo-chip i{ color:var(--soft-primary); flex:0 0 auto; }
.anexo-chip span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:180px;
}


/* =========================================================
   GRID 2/3 + 1/3 (listagem + form lateral) — layout padrão
   Use: <div class="split-grid"><div class="split-main">...</div>
        <aside class="split-side">...</aside></div>
   ========================================================= */
.split-grid{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
@media (min-width: 992px){
  .split-grid{
    grid-template-columns:2fr 1fr;
    align-items:start;
  }
  .split-grid .split-side{
    position:sticky;
    top:84px;
  }
}


/* =========================================================
   TABELA RESPONSIVA "card no mobile"
   Em telas <768px a tabela vira lista de cards.
   Adicione data-label="Nome da coluna" em cada <td>.
   ========================================================= */
.cad-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.cad-table th, .cad-table td{
  padding:10px 12px;
  vertical-align:middle;
}
.cad-table thead th{
  background:var(--table-head-bg);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--muted);
  border-bottom:1px solid var(--border);
}
.cad-table tbody tr{ border-bottom:1px solid var(--border); }
.cad-table tbody tr:hover{ background:var(--table-row-hover); }
.cad-table tbody tr:last-child{ border-bottom:0; }

@media (max-width: 767.98px){
  .cad-table thead{ display:none; }
  .cad-table, .cad-table tbody, .cad-table tr, .cad-table td{ display:block; width:100%; }
  .cad-table tr{
    border:1px solid var(--border);
    border-radius:var(--radius);
    margin-bottom:10px;
    background:var(--card);
    box-shadow:var(--shadow);
    padding:4px 8px;
  }
  .cad-table td{
    border:0;
    padding:6px 8px;
    display:flex; justify-content:space-between; gap:8px;
  }
  .cad-table td::before{
    content:attr(data-label);
    font-weight:700;
    color:var(--muted);
    font-size:.78rem;
  }
}

.dropdown-menu.menu-card{
  display: none;
}
.dropdown-menu.menu-card.show{
  display: flex;
}
/* =========================================================
   ATTACH ZONE — upload múltiplo com preview
   Componente global reutilizável.

   Estrutura HTML esperada:
   <div class="attach-zone" data-max="5" data-max-mb="10">
     <input type="file" class="attach-input" name="arquivos" multiple hidden>
     <div class="attach-drop">
       <i class="bi bi-cloud-arrow-up"></i>
       <div class="attach-drop-text">
         <strong>Clique para selecionar</strong> ou arraste arquivos aqui
       </div>
       <div class="attach-drop-hint">
         Até <span class="attach-max">5</span> arquivos,
         <span class="attach-max-mb">10</span> MB cada
       </div>
     </div>
     <div class="attach-counter">
       <span class="attach-count">0</span>/<span class="attach-max">5</span> selecionados
     </div>
     <div class="attach-preview"></div>
     <div class="attach-error"></div>
   </div>
   ========================================================= */
.attach-zone{
  display:flex; flex-direction:column; gap:8px;
}
.attach-zone .attach-drop{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  padding:18px 14px;
  border:1.5px dashed var(--border);
  border-radius:12px;
  background:rgba(10,88,255,.03);
  color:var(--muted);
  text-align:center;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.attach-zone .attach-drop:hover,
.attach-zone .attach-drop.is-dragover{
  border-color:var(--soft-primary);
  background:rgba(10,88,255,.08);
  color:var(--text);
}
.attach-zone .attach-drop i{
  font-size:1.6rem;
  color:var(--soft-primary);
}
.attach-zone .attach-drop-text{ font-size:.85rem; }
.attach-zone .attach-drop-text strong{ color:var(--soft-primary); }
.attach-zone .attach-drop-hint{
  font-size:.72rem; color:var(--muted);
}
.attach-zone .attach-drop.is-full{
  opacity:.55;
  cursor:not-allowed;
  background:rgba(0,0,0,.02);
}

.attach-zone .attach-counter{
  font-size:.72rem;
  color:var(--muted);
  display:flex; justify-content:flex-end;
  padding:0 2px;
}
.attach-zone .attach-counter.is-warn{ color:#d97706; font-weight:600; }
.attach-zone .attach-counter.is-full{ color:#16a34a; font-weight:600; }

.attach-zone .attach-error{
  font-size:.75rem; color:#dc2626;
  background:rgba(220,38,38,.08);
  border:1px solid rgba(220,38,38,.2);
  border-radius:8px;
  padding:6px 8px;
  display:none;
}
.attach-zone .attach-error.is-visible{ display:block; }
.attach-zone .attach-error ul{ margin:0; padding-left:18px; }

/* ---------- Lista de previews ---------- */
.attach-zone .attach-preview{
  display:flex; flex-wrap:wrap; gap:8px;
}
.attach-zone .attach-preview:empty{ display:none; }

.attach-item{
  position:relative;
  display:flex; align-items:center; gap:8px;
  padding:6px 28px 6px 6px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  min-width:0;
  max-width:100%;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
body.dark-mode .attach-item{
  background:rgba(255,255,255,.04);
  border-color:var(--border);
}
.attach-item .attach-thumb{
  width:38px; height:38px;
  flex:0 0 38px;
  border-radius:8px;
  background:rgba(10,88,255,.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  color:var(--soft-primary);
  font-size:1.05rem;
}
.attach-item .attach-thumb img{
  width:100%; height:100%; object-fit:cover;
}
.attach-item .attach-info{
  display:flex; flex-direction:column; min-width:0;
  line-height:1.2;
}
.attach-item .attach-name{
  font-size:.78rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:180px;
}
.attach-item .attach-size{
  font-size:.68rem; color:var(--muted);
}
.attach-item .attach-remove{
  position:absolute;
  top:4px; right:4px;
  width:20px; height:20px;
  border-radius:50%;
  border:0;
  background:rgba(220,38,38,.1);
  color:#dc2626;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:.7rem;
  line-height:1;
  transition:background .15s ease;
}
.attach-item .attach-remove:hover{
  background:rgba(220,38,38,.22);
}
.attach-item .attach-remove i{ pointer-events:none; }

/* Tamanho compacto pro chat (mensagens) */
.attach-zone.attach-zone-sm .attach-drop{
  padding:10px;
  flex-direction:row; gap:8px;
  text-align:left;
}
.attach-zone.attach-zone-sm .attach-drop i{ font-size:1.1rem; }
.attach-zone.attach-zone-sm .attach-drop-text{ font-size:.78rem; }
.attach-zone.attach-zone-sm .attach-drop-hint{ font-size:.68rem; }
.attach-zone.attach-zone-sm .attach-item{ padding:4px 24px 4px 4px; }
.attach-zone.attach-zone-sm .attach-item .attach-thumb{
  width:30px; height:30px; flex-basis:30px; font-size:.9rem;
}
.attach-zone.attach-zone-sm .attach-name{ max-width:140px; font-size:.72rem; }
.attach-zone.attach-zone-sm .attach-size{ font-size:.62rem; }


/* =========================================================
   ANEXO GALLERY — exibição de anexos já salvos
   (versão "rica" do anexo-chip, com miniatura)
   ========================================================= */
.anexo-gallery{
  display:flex; flex-wrap:wrap; gap:8px;
}
.anexo-gallery:empty{ display:none; }

.anexo-card{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px 6px 6px;
  border-radius:10px;
  background:rgba(10,88,255,.06);
  border:1px solid rgba(10,88,255,.16);
  text-decoration:none;
  color:var(--text);
  min-width:0;
  transition:background .15s ease, border-color .15s ease;
}
.anexo-card:hover{
  background:rgba(10,88,255,.12);
  border-color:rgba(10,88,255,.3);
  color:var(--text);
}
.anexo-card .anexo-thumb{
  width:36px; height:36px; flex:0 0 36px;
  border-radius:8px;
  background:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  color:var(--soft-primary);
  font-size:1.05rem;
}
body.dark-mode .anexo-card .anexo-thumb{
  background:rgba(255,255,255,.08);
}
.anexo-card .anexo-thumb img{
  width:100%; height:100%; object-fit:cover;
}
.anexo-card .anexo-info{
  display:flex; flex-direction:column; min-width:0;
  line-height:1.2;
}
.anexo-card .anexo-nome{
  font-size:.78rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:200px;
}
.anexo-card .anexo-meta{
  font-size:.68rem; color:var(--muted);
}