/* =============================================================
   Alpino Patterns — componentes reutilizáveis nas telas Alpino
   ============================================================= */

/* ===== Hero actions ===== */
.hero-actions{ display:flex; align-items:center; gap:.4rem; margin-left:auto; flex-wrap:wrap; }
.filter-dot{ width:8px; height:8px; border-radius:999px; background:#22c55e; display:inline-block; margin-left:4px; }

/* ===== Hero actions com FAB mobile (padrão Alpino) =====
   Em telas <768px, os botões inline somem e aparece UM .alpino-dropdown
   com .menu-toggle + .menu-card glass listando as ações. */
.hero-actions-inline{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.hero-actions-mobile{ display:none; }
@media (max-width:767.98px){
  .hero-actions-inline{ display:none !important; }
  .hero-actions-mobile{ display:inline-block; }
}
/* Toggle no header (não fixo na tela) — menor que o .fab-picker fixo */
.hero-actions-mobile .menu-toggle{
  width:38px; height:38px;
}
/* Filter-dot dentro do menu-toggle do header (canto sup. direito) */
.hero-actions-mobile .menu-toggle .filter-dot{
  position:absolute; top:6px; right:6px; margin:0;
  width:9px; height:9px; box-shadow:0 0 0 2px #fff;
}
body.dark-mode .hero-actions-mobile .menu-toggle .filter-dot{ box-shadow:0 0 0 2px #1f2430; }
.hero-actions-mobile .menu-toggle{ position:relative; }

/* ===== KPI Strip Alpino ===== */
.kpi-strip{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
/* Mobile sempre 2 colunas (padrão Alpino) */
@media (max-width:991.98px){ .kpi-strip{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

.kpi-tile{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--ti-shadow);
  text-decoration:none; color:inherit;
  transition:transform .12s, box-shadow .15s, border-color .15s;
}
.kpi-tile:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(9,92,244,.10); color:inherit; }
body.dark-mode .kpi-tile{ background:var(--ti-dark-2, #1f2430); border-color:rgba(255,255,255,.08); color:#eef3ff; }
body.dark-mode .kpi-tile:hover{ color:#eef3ff; }
.kpi-tile .ico{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(9,92,244,.16), rgba(9,92,244,.06));
  color:#095cf4; flex:0 0 36px; font-size:1rem;
}
.kpi-tile.tone-red    .ico{ background:linear-gradient(135deg, rgba(239,68,68,.22), rgba(239,68,68,.08)); color:#b91c1c; }
.kpi-tile.tone-amber  .ico{ background:linear-gradient(135deg, rgba(245,158,11,.22), rgba(245,158,11,.08)); color:#b45309; }
.kpi-tile.tone-green  .ico{ background:linear-gradient(135deg, rgba(34,197,94,.22), rgba(34,197,94,.08));  color:#15803d; }
.kpi-tile.tone-cyan   .ico{ background:linear-gradient(135deg, rgba(14,165,233,.22), rgba(14,165,233,.08)); color:#0369a1; }
.kpi-tile.tone-purple .ico{ background:linear-gradient(135deg, rgba(168,85,247,.22), rgba(168,85,247,.08)); color:#6b21a8; }
.kpi-tile .lab{ font-size:.72rem; text-transform:uppercase; letter-spacing:.02em; font-weight:600; color:var(--bs-secondary-color); line-height:1.1; overflow-wrap:anywhere; }
.kpi-tile .val{ font-weight:800; font-size:1.4rem; line-height:1.05; margin-top:2px; min-width:0; overflow-wrap:anywhere; }
.kpi-tile .sub{ font-size:.74rem; color:var(--bs-secondary-color); margin-top:3px; line-height:1.1; overflow-wrap:anywhere; }
/* KPI cujo valor é TEXTO (status, prioridade, "Sem prazo") e não número: o
   corpo 1.4rem quebra a palavra no meio em tile estreito. */
.kpi-tile .val.v-txt{ font-size:1.02rem; line-height:1.2; }
.kpi-tile.active{ background:linear-gradient(135deg,#095cf4,#0046bd); color:#fff; border-color:transparent; }
.kpi-tile.active:hover{ color:#fff; }
.kpi-tile.active .ico{ background:rgba(255,255,255,.18); color:#fff; }
.kpi-tile.active .lab, .kpi-tile.active .sub{ color:rgba(255,255,255,.85); }

/* ===== Shim Alpino: padrão legado (.kpi-grid / .kpi-card / .kpi-ico / .kpi-label / .kpi-value)
   é re-pintado para visual canônico (.kpi-strip / .kpi-tile / .ico / .lab / .val).
   Mantém o HTML existente funcionando sem alterações. ===== */
.kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:8px !important;
  background:transparent !important;
}
@media (max-width:991.98px){ .kpi-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }

.kpi-card{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  background:#fff !important;
  background-image:none !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:var(--ti-shadow) !important;
  color:inherit !important;
  text-decoration:none !important;
  transition:transform .12s, box-shadow .15s, border-color .15s !important;
  overflow:hidden;
}
.kpi-card:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 12px 24px rgba(9,92,244,.10) !important;
  background-position:0 0 !important;
  color:inherit !important;
}
body.dark-mode .kpi-card{ background:var(--ti-dark-2, #1f2430) !important; border-color:rgba(255,255,255,.08) !important; color:#eef3ff !important; }
body.dark-mode .kpi-card:hover{ color:#eef3ff !important; }

/* kpi-top: estrutura legada (label/value à esquerda, ico à direita) — invertemos a ordem visual */
.kpi-card .kpi-top{
  display:flex !important;
  flex-direction:row-reverse !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  width:100%;
}
.kpi-card .kpi-top > div:not(.kpi-ico){ min-width:0; flex:1 1 auto; }

/* kpi-body: estrutura legada horizontal (ico à esquerda, body à direita) — já bate */
.kpi-card .kpi-body{ min-width:0; flex:1 1 auto; }

/* Re-estilizar ico legado para visual canônico (caixa colorida 36px) */
.kpi-card .kpi-ico,
.kpi-card .icon-wrap{
  position:static !important;
  width:36px !important; height:36px !important;
  min-width:36px !important;
  border-radius:10px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:linear-gradient(135deg, rgba(9,92,244,.16), rgba(9,92,244,.06)) !important;
  color:#095cf4 !important;
  flex:0 0 36px !important;
  font-size:1rem !important;
  box-shadow:none !important;
  transform:none !important;
}
.kpi-card:hover .kpi-ico,
.kpi-card:hover .icon-wrap{ transform:none !important; }

/* Tons (legado picks tone via classe extra ou auto) */
.kpi-card.tone-red    .kpi-ico, .kpi-card.tone-red    .icon-wrap{ background:linear-gradient(135deg, rgba(239,68,68,.22), rgba(239,68,68,.08)) !important; color:#b91c1c !important; }
.kpi-card.tone-amber  .kpi-ico, .kpi-card.tone-amber  .icon-wrap{ background:linear-gradient(135deg, rgba(245,158,11,.22), rgba(245,158,11,.08)) !important; color:#b45309 !important; }
.kpi-card.tone-green  .kpi-ico, .kpi-card.tone-green  .icon-wrap{ background:linear-gradient(135deg, rgba(34,197,94,.22), rgba(34,197,94,.08)) !important; color:#15803d !important; }
.kpi-card.tone-cyan   .kpi-ico, .kpi-card.tone-cyan   .icon-wrap{ background:linear-gradient(135deg, rgba(14,165,233,.22), rgba(14,165,233,.08)) !important; color:#0369a1 !important; }
.kpi-card.tone-purple .kpi-ico, .kpi-card.tone-purple .icon-wrap{ background:linear-gradient(135deg, rgba(168,85,247,.22), rgba(168,85,247,.08)) !important; color:#6b21a8 !important; }

/* Texto label/value legado → visual canônico */
.kpi-card .kpi-label,
.kpi-card .label{
  font-size:.72rem !important;
  text-transform:uppercase !important;
  letter-spacing:.02em !important;
  font-weight:600 !important;
  color:var(--bs-secondary-color) !important;
  line-height:1.1 !important;
  opacity:1 !important;
}
.kpi-card .kpi-value,
.kpi-card .value{
  font-weight:800 !important;
  font-size:1.4rem !important;
  line-height:1.05 !important;
  margin-top:2px !important;
}
body.dark-mode .kpi-card .kpi-label,
body.dark-mode .kpi-card .label{ color:rgba(238,243,255,.65) !important; }

/* Wrappers de link clicável (.kpi-link) — fica como anchor sem decoração */
.kpi-link{
  text-decoration:none !important;
  color:inherit !important;
  display:block;
}
.kpi-link:hover{ color:inherit !important; }

/* Estado ativo (kpi-card.kpi-click.active ou anchor .kpi-link.active) */
.kpi-card.active,
.kpi-link.active .kpi-card{
  background:linear-gradient(135deg,#095cf4,#0046bd) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.kpi-card.active .kpi-ico,
.kpi-link.active .kpi-card .kpi-ico,
.kpi-card.active .icon-wrap{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
}
.kpi-card.active .kpi-label,
.kpi-link.active .kpi-card .kpi-label,
.kpi-card.active .label{ color:rgba(255,255,255,.85) !important; }

/* ===== Action Bar ===== */
.action-bar{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  padding:.5rem .6rem; margin-bottom:12px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--ti-shadow);
}
body.dark-mode .action-bar{ background:var(--ti-dark-2, #1f2430); border-color:rgba(255,255,255,.10); color:#eef3ff; }
.action-bar .group{ display:inline-flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.action-bar .divider{ width:1px; height:24px; background:rgba(15,23,42,.10); margin:0 .25rem; }
body.dark-mode .action-bar .divider{ background:rgba(255,255,255,.12); }
.action-bar .spacer{ flex:1 1 auto; }
@media (max-width:575.98px){ .action-bar .divider{ display:none; } }

.filter-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:.32rem .65rem; border-radius:999px;
  background:rgba(9,92,244,.08); color:#0b3f99;
  border:1px solid rgba(9,92,244,.12);
  font-size:.74rem; font-weight:700;
}
body.dark-mode .filter-chip{ background:rgba(9,92,244,.18); color:#dbeafe; border-color:rgba(147,197,253,.22); }

/* ===== Panel ===== */
.panel{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  box-shadow:var(--ti-shadow);
  padding:14px;
  margin-bottom:14px;
}
body.dark-mode .panel{ background:var(--ti-dark-2, #1f2430); border-color:rgba(255,255,255,.10); color:#eef3ff; }
/* Painel justo para listas com DataTable: a tabela/cards ficam próximos da borda
   do card (não usar o wrapper .p-2 na tabela quando usar esta variante). */
.panel-tight{ padding:8px 8px 6px; }
.panel-tight .panel-head{ padding:4px 4px 0; }
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px; flex-wrap:wrap;
}
.panel-title{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.panel-title .ico{
  width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; color:#fff; font-size:.9rem;
  background:linear-gradient(135deg, #095cf4, #0046bd);
  flex:0 0 30px;
}
.panel-title.tone-amber  .ico{ background:linear-gradient(135deg,#f59e0b,#b45309); }
.panel-title.tone-green  .ico{ background:linear-gradient(135deg,#22c55e,#15803d); }
.panel-title.tone-purple .ico{ background:linear-gradient(135deg,#a855f7,#7e22ce); }
.panel-title.tone-cyan   .ico{ background:linear-gradient(135deg,#06b6d4,#0e7490); }
.panel-title.tone-red    .ico{ background:linear-gradient(135deg,#ef4444,#991b1b); }
.panel-title .t{ font-weight:700; font-size:1rem; line-height:1.15; }
.panel-title .s{ font-size:.74rem; color:var(--bs-secondary-color); line-height:1.1; margin-top:2px; }
.panel-count{
  font-size:.78rem; padding:.32rem .65rem; border-radius:999px;
  background:rgba(9,92,244,.10); color:#0b3f99;
  border:1px solid rgba(9,92,244,.18);
  font-weight:700;
}
body.dark-mode .panel-count{ background:rgba(9,92,244,.20); color:#dbe7ff; border-color:rgba(147,197,253,.22); }

/* ===== Pills ===== */
.pill{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.18rem .5rem; border-radius:999px;
  font-weight:600; font-size:.7rem; line-height:1.1;
  border:1px solid rgba(15,23,42,.08); background:#fff; white-space:nowrap;
}
/* No mobile o `nowrap` do pill é o que mais estoura card/painel quando o texto
   é uma frase ("Última modificação: Fulano de Tal"). Pill curto não muda —
   não há onde quebrar; pill longo passa a quebrar em vez de vazar. */
@media (max-width:575.98px){
  .pill{ white-space:normal; max-width:100%; }
}
body.dark-mode .pill{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#eef3ff; }
.pill-info  { background:rgba(14,165,233,.10); border-color:rgba(14,165,233,.26); color:#075985; }
.pill-amber { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.30); color:#92400e; }
.pill-green { background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.28); color:#15803d; }
.pill-red   { background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.28); color:#b91c1c; }
.pill-purple{ background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.26); color:#6b21a8; }
.pill-soft  { background:rgba(15,23,42,.05); color:#334155; }
body.dark-mode .pill-info  { color:#7dd3fc; }
body.dark-mode .pill-amber { color:#fcd34d; }
body.dark-mode .pill-green { color:#86efac; }
body.dark-mode .pill-red   { color:#fca5a5; }
body.dark-mode .pill-purple{ color:#e9d5ff; }
body.dark-mode .pill-soft  { color:#cbd5e1; }

/* ===== Tabela slim ===== */
.table-alpino{ background:transparent; width:100%; margin:0; }
.table-alpino thead th{
  font-size:.65rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--bs-secondary-color); font-weight:700;
  border-bottom:1px solid rgba(15,23,42,.10);
  padding:.55rem .55rem;
}
.table-alpino tbody td{
  font-size:.85rem; padding:.6rem .55rem;
  border-bottom:1px solid rgba(15,23,42,.06);
  vertical-align:middle;
}
body.dark-mode .table-alpino thead th{ border-bottom-color:rgba(255,255,255,.10); color:#94a3b8; }
body.dark-mode .table-alpino tbody td{ border-bottom-color:rgba(255,255,255,.06); }

/* ===== DataTables no padrão Alpino =====
   Basta a tabela ter a classe .table-alpino: o DataTables herda este visual
   (busca, seletor de quantidade, botões Excel/PDF, paginação, colunas de
   borda encostadas no card e linhas compactas). Não precisa de CSS por página.
   O wrapper é escopado via :has() para não afetar DataTables de outros temas. */
table.dataTable.table-alpino{ border-collapse:separate !important; }
table.dataTable.table-alpino thead th{ white-space:nowrap; }
/* Linhas compactas */
table.dataTable.table-alpino thead th,
table.dataTable.table-alpino tbody td{ padding-top:.35rem; padding-bottom:.35rem; }
/* Card (painel) que hospeda um DataTable Alpino: padding menor — a tabela já
   respira internamente e as colunas de borda encostam. */
.panel:has(table.table-alpino){ padding:10px; }
.panel:has(table.table-alpino) .panel-head{ margin-bottom:6px; }
/* Encosta o wrapper da tabela na borda do card */
.panel:has(table.table-alpino) .table-responsive{ margin:0; }
.dt-container:has(table.table-alpino){ margin-top:2px; }
/* Colunas de borda encostadas na borda interna do card:
   1ª à esquerda, última à direita (cabeçalho E corpo alinhados no mesmo canto) */
table.dataTable.table-alpino thead th:first-child,
table.dataTable.table-alpino tbody td:first-child{ padding-left:0; text-align:left; }
table.dataTable.table-alpino thead th:last-child,
table.dataTable.table-alpino tbody td:last-child{ padding-right:0; }

.dt-container:has(table.table-alpino) .dt-search input,
.dt-container:has(table.table-alpino) .dt-length select{
  border-radius:.65rem; border:1px solid rgba(15,23,42,.14);
}
.dt-container:has(table.table-alpino) .dt-length select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding:.35rem 2rem .35rem .6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .6rem center;
  background-size:12px 12px;
}
.dt-container:has(table.table-alpino) .dt-buttons .btn{ border-radius:.5rem; margin-right:6px; }
.dt-container:has(table.table-alpino) .dt-layout-start{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dt-container:has(table.table-alpino) .dt-layout-start .dt-length{ margin:0; }
.dt-container:has(table.table-alpino) .dt-length label{ display:flex; align-items:center; gap:8px; margin:0; white-space:nowrap; }
.dt-container:has(table.table-alpino) .dt-paging .dt-paging-button{ border-radius:.6rem !important; margin:0 2px; }
.dt-container:has(table.table-alpino) .dt-paging .dt-paging-button.current{
  background:linear-gradient(135deg, var(--ti-primary,#095cf4), var(--ti-primary-2,#3b82f6)) !important;
  border-color:transparent !important; color:#fff !important;
}
/* Remove o vão grande entre a tabela e a linha de info/paginação */
.dt-container:has(table.table-alpino) .dt-layout-table{ margin:0 !important; }
.dt-container:has(table.table-alpino) .dt-layout-row:last-child{ margin-top:8px !important; }

/* ===== Botões btn-ic =====
   IMPORTANTE: o estilo canônico vem de static/css/alpino-ui.css (linhas 1010-1045).
   Botão redondo glass branco + ícone colorido via .ic-blue/.ic-amber/.ic-green/.ic-red/.ic-cyan/.ic-purple/.ic-grey.
   NÃO redefinir .btn-ic aqui — quebra o padrão Alpino. */

/* ===== Cards grid (mobile) ===== */
.cards-grid{
  display:grid; gap:10px;
  grid-template-columns:1fr;
}
@media (min-width:768px){ .cards-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.entity-card{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:14px;
  background:#fff; border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--ti-shadow); min-width:0;
  transition:transform .12s, box-shadow .15s, border-color .15s;
}
.entity-card:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(9,92,244,.10);
  border-color:rgba(9,92,244,.25);
}
body.dark-mode .entity-card{ background:var(--ti-dark-2, #1f2430); border-color:rgba(255,255,255,.10); color:#eef3ff; }
/* Card clicável: o <a> não pode pintar/sublinhar o conteúdo (nome, pills,
   nome do KAM viravam link azul sublinhado nos cards mobile). */
a.entity-card,
a.entity-card:hover,
a.entity-card:focus{ text-decoration:none; color:inherit; }
body.dark-mode a.entity-card,
body.dark-mode a.entity-card:hover{ color:#eef3ff; }

/* ===== Rede de segurança: conteúdo NUNCA sai do card =====
   .entity-card é flex-ROW pensado para o par .ico + .info. Quando o card é
   usado como container EMPILHADO (head/body, "*-card-top" + pills), os blocos
   ficam lado a lado, não cabem na largura e o conteúdo vaza para fora do
   cartão no mobile. Quem não tem o par canônico se comporta como
   .entity-card--stack automaticamente. Continue marcando --stack no HTML
   (explícito e compatível com navegador sem :has()). */
.entity-card:not(:has(> .ico)):not(:has(> .info)):not(:has(> .ec-ico)):not(:has(> .ec-info)){
  flex-direction:column; align-items:stretch;
}
/* Filho de flex tem min-width:auto por padrão — sem isto um valor/pill longo
   (ex.: R$ 262.923.139,06) empurra o irmão para fora do card. */
.entity-card > *{ min-width:0; }
.entity-card .pill{ max-width:100%; }
.entity-card .ico{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; flex:0 0 36px;
  color:#fff; font-size:.95rem;
  background:linear-gradient(135deg, #095cf4, #0046bd);
}
.entity-card.tone-amber .ico { background:linear-gradient(135deg,#f59e0b,#b45309); }
.entity-card.tone-green .ico { background:linear-gradient(135deg,#22c55e,#15803d); }
.entity-card.tone-red   .ico { background:linear-gradient(135deg,#ef4444,#991b1b); }
.entity-card.tone-purple .ico{ background:linear-gradient(135deg,#a855f7,#7e22ce); }
.entity-card.tone-cyan  .ico { background:linear-gradient(135deg,#06b6d4,#0e7490); }
.entity-card .info{ min-width:0; flex:1; }
.entity-card .nm{
  font-weight:700; line-height:1.2; font-size:.92rem;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word;
}
.entity-card .sub{
  font-size:.72rem; color:var(--bs-secondary-color); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.entity-card .meta{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.entity-card .foot{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
/* Coluna de AÇÕES do card. Não havia regra: o bloco tomava a largura natural
   dos btn-ic (4 ícones ≈ 140px) e espremia o título — em 344px o número da
   peça quebrava em duas linhas e o último botão encostava na borda. */
.entity-card .actions{
  display:flex; align-items:flex-start; gap:6px;
  flex:0 0 auto; margin-left:auto;
}
@media (max-width:575.98px){
  /* No mobile as ações descem para uma linha própria, alinhadas à direita:
     o título passa a ter a largura inteira do card. */
  .entity-card{ flex-wrap:wrap; }
  .entity-card > .actions,
  .entity-card > .ec-actions{
    flex:1 0 100%; margin-left:0; justify-content:flex-end;
    margin-top:8px; padding-top:8px;
    border-top:1px solid rgba(15,23,42,.06);
  }
  body.dark-mode .entity-card > .actions,
  body.dark-mode .entity-card > .ec-actions{ border-top-color:rgba(255,255,255,.08); }

  /* ARMADILHA: no card EMPILHADO (coluna) `flex-basis:100%` vira ALTURA e o
     `flex-wrap` cria uma segunda COLUNA — os botões iam parar FORA do card.
     Aqui basta esticar na largura e alinhar à direita. */
  .entity-card--stack > .actions,
  .entity-card--stack > .ec-actions,
  .entity-card:not(:has(> .ico)):not(:has(> .info)):not(:has(> .ec-ico)):not(:has(> .ec-info)) > .actions,
  .entity-card:not(:has(> .ico)):not(:has(> .info)):not(:has(> .ec-ico)):not(:has(> .ec-info)) > .ec-actions{
    flex:0 0 auto; align-self:stretch;
  }
}
.entity-card .foot .btn{ font-size:.72rem; padding:.32rem .55rem; border-radius:.55rem !important; }

/* ===== Dialeto `ec-*` (ec-ico / ec-info / ec-title / ec-sub / ec-actions) =====
   37 templates usam esses nomes achando que existiam — NÃO existiam em CSS
   nenhum, então o card ficava sem estrutura e o texto longo vazava para fora
   (visto em /ae/minhas/: "Por Simone Tatiane Trevizan da Cunha").
   Aqui eles ganham o MESMO papel dos canônicos. De propósito só estrutura e
   ícone: nada de line-clamp/typography, para não recortar conteúdo nem mudar
   a tipografia dessas 37 telas de uma vez. Em tela NOVA use .ico/.info/.nm/
   .sub/.actions. */
.entity-card .ec-ico{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; flex:0 0 36px;
  color:#fff; font-size:.95rem;
  background:linear-gradient(135deg, #095cf4, #0046bd);
}
.entity-card .ec-ico.tone-amber { background:linear-gradient(135deg,#f59e0b,#b45309); }
.entity-card .ec-ico.tone-green { background:linear-gradient(135deg,#22c55e,#15803d); }
.entity-card .ec-ico.tone-red   { background:linear-gradient(135deg,#ef4444,#991b1b); }
.entity-card .ec-ico.tone-purple{ background:linear-gradient(135deg,#a855f7,#7e22ce); }
.entity-card .ec-ico.tone-cyan  { background:linear-gradient(135deg,#06b6d4,#0e7490); }
.entity-card .ec-info{ min-width:0; flex:1; }   /* flex-basis 0 (igual .info): com `auto` o bloco pede a largura do conteúdo e QUEBRA de linha */
.entity-card .ec-title,
.entity-card .ec-sub{ min-width:0; overflow-wrap:anywhere; }
.entity-card .ec-actions{
  display:flex; align-items:flex-start; gap:6px;
  flex:0 0 auto; margin-left:auto;
}

/* ===== Card de DataTable (mobile) — variação EMPILHADA (head + corpo k/v) =====
   Para os _cards.html do AlpinoDT que listam pares rótulo/valor (Assunto, Módulo,
   Setor, ...). O .entity-card padrão é flex-row (ícone + info); esta variante
   empilha na vertical e faz os valores longos QUEBRAREM em vez de vazar a tela. */
.entity-card--stack{ flex-direction:column; align-items:stretch; gap:10px; }
.entity-card--stack .entity-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0;
}
.entity-card--stack .entity-card-head > *{ min-width:0; flex:1 1 auto; }
/* O .pill é white-space:nowrap — se encolher, o texto vaza para fora do
   card (ex.: "Entregue RH"). Quem cede espaço é o bloco de texto ao lado. */
.entity-card--stack .entity-card-head > .pill{ flex:0 0 auto; max-width:100%; }
.entity-card--stack .entity-card-body{ display:grid; gap:6px; min-width:0;
  border-top:1px solid rgba(15,23,42,.06); padding-top:8px; }
body.dark-mode .entity-card--stack .entity-card-body{ border-top-color:rgba(255,255,255,.08); }
.entity-card--stack .info-row{
  display:flex; align-items:baseline; gap:8px; min-width:0;
  font-size:.82rem; line-height:1.35;
}
.entity-card--stack .info-row .k{
  flex:0 0 88px; font-weight:600; color:var(--bs-secondary-color);
}
.entity-card--stack .info-row .v{
  flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-word;
}

/* ===== Meta grid ===== */
.meta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:8px;
}
.meta-cell{
  padding:8px 10px; border-radius:10px;
  background:rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.05);
}
body.dark-mode .meta-cell{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.meta-cell .l{
  font-size:.65rem; text-transform:uppercase; letter-spacing:.02em;
  color:var(--bs-secondary-color); font-weight:700;
}
.meta-cell .v{ font-weight:600; font-size:.88rem; margin-top:2px; line-height:1.2; word-break:break-word; }

/* ===== Empty state ===== */
.alpino-empty{
  padding:24px 14px; text-align:center; color:var(--bs-secondary-color);
  border:1px dashed rgba(15,23,42,.12); border-radius:14px; background:rgba(0,0,0,.02);
  font-size:.88rem;
}
body.dark-mode .alpino-empty{ border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.03); }
.alpino-empty .ico-big{
  width:48px; height:48px; border-radius:12px; margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(9,92,244,.15), rgba(9,92,244,.05));
  color:#095cf4; font-size:1.2rem;
}

/* ===== Tabs Alpino ===== */
.alpino-tabs{
  display:flex; align-items:center; gap:6px;
  padding:.4rem; margin-bottom:12px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--ti-shadow);
  overflow-x:auto; scrollbar-width:thin;
}
body.dark-mode .alpino-tabs{ background:var(--ti-dark-2, #1f2430); border-color:rgba(255,255,255,.10); }
.alpino-tabs .nav-link{
  border-radius:9px; padding:.4rem .75rem;
  font-size:.82rem; font-weight:600;
  color:var(--bs-body-color);
  border:none; white-space:nowrap;
}
.alpino-tabs .nav-link:hover{ background:rgba(9,92,244,.06); color:#0b3f99; }
.alpino-tabs .nav-link.active{
  background:linear-gradient(135deg,#095cf4,#0046bd);
  color:#fff;
}
.alpino-tabs .nav-link .badge{
  margin-left:5px; padding:2px 7px;
  border-radius:999px;
  background:rgba(15,23,42,.10);
  color:inherit;
  font-size:.65rem; font-weight:700;
}
.alpino-tabs .nav-link.active .badge{
  background:rgba(255,255,255,.22); color:#fff;
}

/* ===== Switch desktop/mobile ===== */
.alp-desktop{ display:block; }
.alp-mobile{ display:none; }
@media (max-width:767.98px){
  .alp-desktop{ display:none; }
  .alp-mobile{ display:block; }
}

/* ===== Botões finos ===== */
.btn, .btn-sm{ border-radius:.65rem !important; }

/* ===== User inline ===== */
.user-inline{ display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; }
.user-inline .user-ava{
  width:26px; height:26px; border-radius:50%;
  object-fit:cover; flex:0 0 26px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
}
body.dark-mode .user-inline .user-ava{ border-color:rgba(255,255,255,.15); }
.user-inline .user-ava-fb{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(9,92,244,.18), rgba(9,92,244,.06));
  color:#095cf4; font-weight:700; font-size:.72rem;
}
body.dark-mode .user-inline .user-ava-fb{ background:rgba(255,255,255,.10); color:#8fb8ff; }
.user-inline .user-name{
  font-weight:600; line-height:1.15; font-size:.82rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:160px;
}