/*
 * legacy-compat-v3.css — Coachecom
 * ------------------------------------------------------------------
 * Camada de compatibilidade SLIM cujo objetivo é permitir derrubar os
 * ~496KB de bootstrap.min.css (~120KB) + smartadmin-production.min.css
 * (376KB), fornecendo SÓ o que o código ainda usa do Bootstrap 3 /
 * SmartAdmin e que o Design System V3 ainda NÃO cobre.
 *
 * COBERTURA ATUAL: grid responsivo BS3 + utilities.
 * (Componentes — panel/well/nav-tabs/label/badge/alert/input-group/
 *  jarviswidget/smart-form/form-group — serão adicionados POR ONDA,
 *  conforme a verificação por-tela acusar necessidade.)
 *
 * ROLLOUT (zero risco até o swap):
 *   1) Carregado ANTES do bootstrap.min.css em init_sistema → enquanto o
 *      bootstrap/smartadmin estiverem presentes, ELES vencem (mesma
 *      especificidade, vêm depois) e este arquivo fica INERTE.
 *   2) Verificação por-tela: no navegador, desabilitar bootstrap.min.css
 *      + smartadmin-production.min.css e conferir que a tela se mantém
 *      (agora estilizada por este compat). Iterar até cobrir.
 *   3) SÓ DEPOIS de cobertura ampla + review: remover os 2 arquivos
 *      pesados de init_sistema (e external_pages/template_publico) — este
 *      compat assume.
 *
 * Breakpoints BS3: sm ≥768, md ≥992, lg ≥1200. Gutter 15px (float grid,
 * idêntico ao BS3 pra não mudar layout no swap). box-sizing:border-box já
 * vem do preflight do tailwind.min.css; reforçado abaixo por segurança.
 */

/* ============================== GRID ============================== */
.container,
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

.row {
  margin-left: -15px;
  margin-right: -15px;
}

[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* col-xs-* — sempre (sem media query) */
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,
.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 { float: left; }
.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9  { width: 75%; }
.col-xs-8  { width: 66.66666667%; }
.col-xs-7  { width: 58.33333333%; }
.col-xs-6  { width: 50%; }
.col-xs-5  { width: 41.66666667%; }
.col-xs-4  { width: 33.33333333%; }
.col-xs-3  { width: 25%; }
.col-xs-2  { width: 16.66666667%; }
.col-xs-1  { width: 8.33333333%; }
.col-xs-offset-12 { margin-left: 100%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-9  { margin-left: 75%; }
.col-xs-offset-8  { margin-left: 66.66666667%; }
.col-xs-offset-7  { margin-left: 58.33333333%; }
.col-xs-offset-6  { margin-left: 50%; }
.col-xs-offset-5  { margin-left: 41.66666667%; }
.col-xs-offset-4  { margin-left: 33.33333333%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-2  { margin-left: 16.66666667%; }
.col-xs-offset-1  { margin-left: 8.33333333%; }
.col-xs-offset-0  { margin-left: 0; }

@media (min-width: 768px) {
  .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,
  .col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 { float: left; }
  .col-sm-12 { width: 100%; }
  .col-sm-11 { width: 91.66666667%; }
  .col-sm-10 { width: 83.33333333%; }
  .col-sm-9  { width: 75%; }
  .col-sm-8  { width: 66.66666667%; }
  .col-sm-7  { width: 58.33333333%; }
  .col-sm-6  { width: 50%; }
  .col-sm-5  { width: 41.66666667%; }
  .col-sm-4  { width: 33.33333333%; }
  .col-sm-3  { width: 25%; }
  .col-sm-2  { width: 16.66666667%; }
  .col-sm-1  { width: 8.33333333%; }
  .col-sm-offset-12 { margin-left: 100%; }
  .col-sm-offset-11 { margin-left: 91.66666667%; }
  .col-sm-offset-10 { margin-left: 83.33333333%; }
  .col-sm-offset-9  { margin-left: 75%; }
  .col-sm-offset-8  { margin-left: 66.66666667%; }
  .col-sm-offset-7  { margin-left: 58.33333333%; }
  .col-sm-offset-6  { margin-left: 50%; }
  .col-sm-offset-5  { margin-left: 41.66666667%; }
  .col-sm-offset-4  { margin-left: 33.33333333%; }
  .col-sm-offset-3  { margin-left: 25%; }
  .col-sm-offset-2  { margin-left: 16.66666667%; }
  .col-sm-offset-1  { margin-left: 8.33333333%; }
  .col-sm-offset-0  { margin-left: 0; }
}

@media (min-width: 992px) {
  .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
  .col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { float: left; }
  .col-md-12 { width: 100%; }
  .col-md-11 { width: 91.66666667%; }
  .col-md-10 { width: 83.33333333%; }
  .col-md-9  { width: 75%; }
  .col-md-8  { width: 66.66666667%; }
  .col-md-7  { width: 58.33333333%; }
  .col-md-6  { width: 50%; }
  .col-md-5  { width: 41.66666667%; }
  .col-md-4  { width: 33.33333333%; }
  .col-md-3  { width: 25%; }
  .col-md-2  { width: 16.66666667%; }
  .col-md-1  { width: 8.33333333%; }
  .col-md-offset-12 { margin-left: 100%; }
  .col-md-offset-11 { margin-left: 91.66666667%; }
  .col-md-offset-10 { margin-left: 83.33333333%; }
  .col-md-offset-9  { margin-left: 75%; }
  .col-md-offset-8  { margin-left: 66.66666667%; }
  .col-md-offset-7  { margin-left: 58.33333333%; }
  .col-md-offset-6  { margin-left: 50%; }
  .col-md-offset-5  { margin-left: 41.66666667%; }
  .col-md-offset-4  { margin-left: 33.33333333%; }
  .col-md-offset-3  { margin-left: 25%; }
  .col-md-offset-2  { margin-left: 16.66666667%; }
  .col-md-offset-1  { margin-left: 8.33333333%; }
  .col-md-offset-0  { margin-left: 0; }
}

@media (min-width: 1200px) {
  .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,
  .col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 { float: left; }
  .col-lg-12 { width: 100%; }
  .col-lg-11 { width: 91.66666667%; }
  .col-lg-10 { width: 83.33333333%; }
  .col-lg-9  { width: 75%; }
  .col-lg-8  { width: 66.66666667%; }
  .col-lg-7  { width: 58.33333333%; }
  .col-lg-6  { width: 50%; }
  .col-lg-5  { width: 41.66666667%; }
  .col-lg-4  { width: 33.33333333%; }
  .col-lg-3  { width: 25%; }
  .col-lg-2  { width: 16.66666667%; }
  .col-lg-1  { width: 8.33333333%; }
  .col-lg-offset-12 { margin-left: 100%; }
  .col-lg-offset-11 { margin-left: 91.66666667%; }
  .col-lg-offset-10 { margin-left: 83.33333333%; }
  .col-lg-offset-9  { margin-left: 75%; }
  .col-lg-offset-8  { margin-left: 66.66666667%; }
  .col-lg-offset-7  { margin-left: 58.33333333%; }
  .col-lg-offset-6  { margin-left: 50%; }
  .col-lg-offset-5  { margin-left: 41.66666667%; }
  .col-lg-offset-4  { margin-left: 33.33333333%; }
  .col-lg-offset-3  { margin-left: 25%; }
  .col-lg-offset-2  { margin-left: 16.66666667%; }
  .col-lg-offset-1  { margin-left: 8.33333333%; }
  .col-lg-offset-0  { margin-left: 0; }
}

/* ============================ UTILITIES =========================== */
/* clearfix BS3 (também limpa floats das colunas dentro de .row/.container) */
.clearfix::before, .clearfix::after,
.row::before, .row::after,
.container::before, .container::after,
.container-fluid::before, .container-fluid::after,
.form-horizontal .form-group::before, .form-horizontal .form-group::after {
  content: " ";
  display: table;
}
.clearfix::after,
.row::after,
.container::after,
.container-fluid::after,
.form-horizontal .form-group::after {
  clear: both;
}

.pull-right { float: right !important; }
.pull-left  { float: left !important; }
.hide       { display: none !important; }
.hidden     { display: none !important; }
.show       { display: block !important; }
.invisible  { visibility: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-justify{ text-align: justify; }
.text-nowrap { white-space: nowrap; }
.center-block{ display: block; margin-left: auto; margin-right: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-circle  { border-radius: 50%; }
.img-rounded { border-radius: 6px; }
.text-muted  { color: var(--color-text-muted, #6c757d); }

/* visibilidade responsiva BS3 */
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767px) {
  .visible-xs { display: block !important; }
  .hidden-xs  { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm { display: block !important; }
  .hidden-sm  { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md { display: block !important; }
  .hidden-md  { display: none !important; }
}
@media (min-width: 1200px) {
  .visible-lg { display: block !important; }
  .hidden-lg  { display: none !important; }
}

/* botão close (× de modais/alertas legados). O V3 já estiliza o corpo dos
   modais; este é só o reset base do X caso o bootstrap saia. */
.close {
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.close:hover, .close:focus { opacity: 0.5; text-decoration: none; }

/* utilitários de espaçamento usados pelo SmartAdmin/legado */
.no-padding { padding: 0 !important; }
.no-margin  { margin: 0 !important; }

/* ========================= COMPONENTES ============================ */
/* CRÍTICO — display toggles. Sem o BS3, estes elementos ficariam SEMPRE
   visíveis (o default é display:block), quebrando dropdowns/abas/colapsos.
   O bootstrap.js continua carregado e alterna as classes .open/.in/.active. */

/* Dropdowns (bootstrap.js alterna .open no pai) */
.dropdown, .dropup { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left;
  min-width: 160px; padding: 6px 0; margin: 2px 0 0; list-style: none; text-align: left;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); font-size: 14px;
}
.open > .dropdown-menu { display: block; }
/* Alinhamento à direita (BS3) — a regra ficou de fora do shim na migração;
   o markup canônico do .dropdown-opcoes (licenças/consultores/usuários/
   financeiro owners) usa a classe e o menu estourava o .table-responsive. */
.dropdown-menu-right { right: 0; left: auto; }
.dropdown-menu > li > a {
  display: block; padding: 8px 16px; clear: both; font-weight: 400; line-height: 1.5;
  color: var(--color-text, #0f172a); white-space: nowrap; text-decoration: none;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background: var(--bg-soft, #f1f5f9); color: var(--color-text, #0f172a); }
.dropdown-menu .divider { height: 1px; margin: 6px 0; background: var(--color-border, #e2e8f0); overflow: hidden; }
.caret {
  display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle;
  border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent;
}

/* Collapse (bootstrap.js alterna .in) */
.collapse { display: none; }
.collapse.in { display: block; }
tr.collapse.in { display: table-row; }
tbody.collapse.in { display: table-row-group; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height .35s ease; }

/* Tabs (bootstrap.js alterna .active no pane) */
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* Fade (modais/alertas BS3) */
.fade { opacity: 0; transition: opacity .15s linear; }
.fade.in { opacity: 1; }

/* ----- Forms ----- */
.form-group { margin-bottom: 15px; }
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: var(--color-text-muted, #6c757d); }
.control-label { font-weight: 600; }
.radio, .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; }
.radio label, .checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; }
.input-group { position: relative; display: table; border-collapse: separate; width: 100%; }
.input-group .form-control { display: table-cell; }
.input-group-addon, .input-group-btn { display: table-cell; width: 1%; white-space: nowrap; vertical-align: middle; }
.input-group-addon {
  padding: 6px 12px; font-size: 14px; color: var(--color-text, #0f172a);
  background: var(--bg-soft, #f1f5f9); border: 1px solid var(--color-border, #e2e8f0); border-radius: 6px;
}

/* ----- Componentes comuns (cosmético, tokenizado V3) ----- */
.panel {
  margin-bottom: 20px; background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.panel-heading { padding: 12px 16px; border-bottom: 1px solid var(--color-border, #e2e8f0); border-radius: 12px 12px 0 0; font-weight: 600; }
.panel-title { margin: 0; font-size: 15px; font-weight: 700; }
.panel-body { padding: 16px; }
.panel-footer { padding: 12px 16px; background: var(--bg-soft, #f8fafc); border-top: 1px solid var(--color-border, #e2e8f0); border-radius: 0 0 12px 12px; }
.well { min-height: 20px; padding: 16px; margin-bottom: 20px; background: var(--bg-soft, #f8fafc); border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; }
.alert { padding: 12px 16px; margin-bottom: 16px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; }
.alert-success { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.alert-info    { color: var(--info); background: var(--info-soft); border-color: var(--info-border); }
.alert-warning { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }
.alert-danger  { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.label {
  display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1;
  color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em;
}
.label-default { background: #6c757d; } .label-primary { background: var(--primary, #1d4ed8); }
.label-success { background: var(--success-solid); } .label-info { background: var(--info-solid); }
.label-warning { background: #ffc107; color: #000; } .label-danger { background: var(--danger-solid); }
.badge {
  display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: 700; line-height: 1;
  color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; background: #6c757d; border-radius: 10px;
}
.nav-tabs { border-bottom: 1px solid var(--color-border, #e2e8f0); list-style: none; padding-left: 0; margin: 0 0 16px; display: flex; gap: 4px; }
.nav-tabs > li { margin-bottom: -1px; }
.nav-tabs > li > a { display: block; padding: 8px 16px; border: 1px solid transparent; border-radius: 8px 8px 0 0; color: var(--color-text-muted, #6c757d); text-decoration: none; }
.nav-tabs > li.active > a { color: var(--color-text, #0f172a); background: var(--color-surface, #fff); border-color: var(--color-border, #e2e8f0); border-bottom-color: transparent; }

/* ----- Modais BS3: ESTRUTURA base (position/display/z-index) -----
   O bootstrap-modal-v3.css repinta a APARÊNCIA dos modais BS3 mas dependia
   do bootstrap.css pra esta base. Escopado em `.modal.fade` (modais BS3
   sempre têm .fade) + `body > .modal-backdrop` (igual ao bootstrap-modal-v3)
   pra NÃO afetar os modais V3 (.modal-root .modal, estilizados por overlay.css).
   O bootstrap.js seta `style="display:block"` inline ao abrir (vence o display:none). */
.modal.fade {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1050;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal-open { overflow: hidden; }
body > .modal-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1040;
}
body > .modal-backdrop.fade { opacity: 0; transition: opacity .15s linear; }
body > .modal-backdrop.in { opacity: .5; }

/* ----- Tooltip BS3 -----
   O bootstrap-js-shim.js (`$.fn.tooltip`) monta
   `.tooltip > .tooltip-arrow + .tooltip-inner` no <body> e posiciona por
   JS, mas o CSS que o desenhava saiu junto com o bootstrap.min.css. Sem
   estas regras a div fica sem caixa, sem fundo e sem z-index visual: o
   texto aparecia CRU sobre a interface ao passar o mouse — visivel em
   `data-toggle="tooltip"` (25 ocorrencias em 11 views, entre elas os
   cards de Videos Tutoriais e a Central Multimidia).
   Nao da pra cair no tooltip nativo do browser: o shim faz
   removeAttr("title") ao ligar o elemento. */
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-size: 12px;
  line-height: 1.4;
  opacity: 1;
  pointer-events: none;
}
.tooltip-inner {
  max-width: 260px;
  padding: 6px 10px;
  color: #fff;
  text-align: center;
  background-color: rgba(17, 24, 39, .95);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
  word-wrap: break-word;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: rgba(17, 24, 39, .95);
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: rgba(17, 24, 39, .95);
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: rgba(17, 24, 39, .95);
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: rgba(17, 24, 39, .95);
}

/* ----- Popover BS3 -----
   Card #116 — mesma historia do tooltip acima, um degrau adiante: o
   bootstrap-js-shim.js tinha `$.fn.popover` como stub no-op, entao o "i" de
   cada dimensao na Analise de Cenarios nao abria nada E o `title` continuava
   no elemento, fazendo o browser mostrar o "<strong>...</strong>" cru no
   hover. Com o plugin implementado no shim, falta a caixa: o CSS do popover
   saiu junto com o bootstrap.min.css e a div nascia sem fundo nem borda,
   escrevendo por cima da tabela.

   Segue a paleta do design V3 (superficie clara + borda + sombra), nao o
   visual escuro do tooltip: aqui o conteudo e' um texto longo de leitura,
   nao uma legenda curta. */
.popover {
  position: absolute;
  z-index: 1070;
  display: block;
  max-width: 320px;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  background: var(--bg, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
}
.popover .popover-title {
  margin: 0;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-1, #0f172a);
  background: var(--surface-muted, #f8fafc);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px 10px 0 0;
}
.popover .popover-content {
  padding: 12px 14px;
  color: var(--fg-2, #334155);
  word-wrap: break-word;
}
/* A seta do BS3 depende de dois pseudo-elementos; como o shim posiciona a
   caixa por JS e o conteudo aqui e' longo, fica so' a caixa — sem seta
   pendurada num offset que o JS nao calcula. */
.popover .arrow { display: none; }