/* ============================================================================
modais.css — PADRAO GLOBAL das modais (Bootstrap 3) do iiLEX.
----------------------------------------------------------------------------
Carregado GLOBAL no bloco-superior (toda pagina/todo theme) -> TODA `.modal`
ganha o shell moderno SEM ajuste por-modal (escala: em vez de corrigir uma a
uma, carregamos isto). Shell THEME-AGNOSTICO (centralizar, arredondar, fechar,
tabelas, lixeira); as CORES do conteudo (header teal, botoes lime) vem do tema
(theme-4-vars.css). ADITIVO/REVERSIVEL: remover o no bloco-superior.
============================================================================ */
/* --- MODAIS PERSONALIZADAS (UI interna especifica) — cada uma um arquivo em ui/modais/.
@import precisa vir ANTES de qualquer regra. p/ adicionar uma nova: criar o arquivo
ui/modais/.css e acrescentar um @import aqui. --- */
@import url("ui/modais/relatorios-modelos.css");
/* body sem scroll atras da modal (Bootstrap ja poe .modal-open{overflow:hidden}) */
.modal-open{ overflow:hidden !important; }
/* MODAL: overflow-y AUTO — a base (theme.css) forcava `overflow-y:scroll`, deixando uma scrollbar
SEMPRE visivel (a "faixa branca" a direita quando a modal cabe na tela). + centraliza na VERTICAL
(truque BS3 com ::before + vertical-align, que NAO quebra o toggle de display do Bootstrap). */
.modal{ overflow-y:auto !important; text-align:center; }
.modal::before{ content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-4px; }
.modal .modal-dialog{ display:inline-block; float:none; vertical-align:middle; text-align:left; max-width:94vw; margin:24px auto !important; }
/* CONTENT: cantos arredondados + sombra suave + contexto p/ botao X absoluto */
.modal .modal-content{ position:relative !important; border-radius:14px !important; overflow:hidden !important; border:none !important; box-shadow:0 24px 70px rgba(0,0,0,.32) !important; }
.modal .modal-body{ max-height:84vh; overflow-y:auto; }
/* botao FECHAR padrao (.close, no modal-header) — limpo, maior, hover (herda a cor do header) */
.modal .modal-header .close, .modal .modal-header button.close{ font-size:26px !important; font-weight:300 !important; opacity:.55 !important; text-shadow:none !important; outline:none !important; transition:opacity .15s ease; }
.modal .modal-header .close:hover, .modal .modal-header button.close:hover{ opacity:1 !important; }
/* TABELAS dentro de modais: celulas centralizadas na vertical (icone/label/valor) */
.modal td, .modal th{ vertical-align:middle !important; }
/* LIXEIRA legada (glyphicon/fa solid) -> Material Symbols `\e92e` (delete) (mesma do grid; @font-face 'Material Symbols Rounded'
ja carregado globalmente no site.css). Cinza-muted no padrao, vermelha no hover. */
.modal .glyphicon-trash, .modal .fa-trash, .modal .fa-trash-o{ font-size:18px !important; color:#9aa3b2 !important; transition:color .15s ease; }
.modal a:hover .glyphicon-trash, .modal a:hover .fa-trash, .modal a:hover .fa-trash-o{ color:#e05a5a !important; }
.modal .glyphicon-trash:before, .modal .fa-trash:before, .modal .fa-trash-o:before{ font-family:'Material Symbols Rounded' !important; font-variation-settings:var(--ms-axes); font-weight:400 !important; content:"\e92e" !important; }
/* ---- modais SEM modal-header (tipo painel teal: #modalTabAux / #modalTabAux2) que ganharam um X
custom `.t4-modal-x` no markup (bloco-inferior). Branco sobre o header teal, topo-direito. ---- */
#modalTabAux .t4-modal-x, #modalTabAux2 .t4-modal-x{ position:absolute !important; top:22px; right:23px; z-index:20; width:32px; height:32px; line-height:32px; text-align:center; font-size:24px; font-weight:300; color:#ffffff !important; opacity:.8 !important; background:transparent !important; border:none !important; border-radius:8px !important; cursor:pointer; text-shadow:none !important; padding:0 !important; margin:0 !important; float:none !important; transition:opacity .15s ease, background .15s ease; }
#modalTabAux .t4-modal-x:hover, #modalTabAux2 .t4-modal-x:hover{ opacity:1 !important; background:rgba(255,255,255,.20) !important; }
/* a lista interna do cadastro rapido (scroll proprio baixo) sobe p/ a modal crescer */
#modalTabAux .modal-body [style*="overflow"], #modalTabAux2 .modal-body [style*="overflow"]{ max-height:60vh !important; }
/* ============================================================================
POPOVER / TOOLTIP (Bootstrap 3) — overlays flutuantes, mesmo espirito das modais.
Modernizacao GLOBAL (todo popover/tooltip do app): cantos arredondados, sombra suave,
tipografia limpa. O POPOVER fica BRANCO com texto escuro nos DOIS temas (a seta sempre
combina, sem precisar recolorir por direcao); o TOOLTIP e uma bolha escura arredondada.
O gatilho "i" (info) no header MASCARA vem do editardadosmodulos.css.
============================================================================ */
.popover{ border:1px solid rgba(20,28,38,.10) !important; border-radius:12px !important; box-shadow:0 14px 44px rgba(0,0,0,.17) !important; padding:0 !important; }
.popover .popover-title{ background:transparent !important; color:#1f2a37 !important; border-bottom:1px solid #eef1f4 !important; border-radius:12px 12px 0 0 !important; font-weight:700 !important; font-size:12px !important; text-transform:uppercase; letter-spacing:.03em; padding:10px 14px !important; }
.popover .popover-content{ padding:12px 14px !important; font-size:13px !important; line-height:1.7 !important; color:#5b6673 !important; }
.tooltip.in{ opacity:1 !important; }
.tooltip .tooltip-inner{ background:rgba(20,28,38,.96) !important; color:#fff !important; border-radius:8px !important; padding:6px 10px !important; font-size:12px !important; line-height:1.5 !important; max-width:280px; box-shadow:0 8px 24px rgba(0,0,0,.24) !important; }
.tooltip.top .tooltip-arrow{ border-top-color:rgba(20,28,38,.96) !important; }
.tooltip.bottom .tooltip-arrow{ border-bottom-color:rgba(20,28,38,.96) !important; }
.tooltip.left .tooltip-arrow{ border-left-color:rgba(20,28,38,.96) !important; }
.tooltip.right .tooltip-arrow{ border-right-color:rgba(20,28,38,.96) !important; }
/* conteudo estruturado dos popovers de TITULO (grid ADM Modulos): linhas "chave -> descricao",
texto curto e chips. Cores fixas (o popover e sempre branco nos dois temas). */
.popover .pr{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline; padding:6px 0; }
.popover .pr + .pr{ border-top:1px solid #f0f3f6; }
.popover .pr > b{ font-weight:700; color:#0f4d63; font-size:13px; white-space:nowrap; }
.popover .pr > code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:#053345; background:#eef3f5; border:1px solid #dde7ea; border-radius:6px; padding:0 8px; white-space:nowrap; justify-self:start; }
.popover .pr > span{ color:#63737d; font-size:13px; line-height:1.45; }
.popover .pt{ color:#63737d; font-size:13px; line-height:1.6; }
.popover .pt > b{ color:#1c2a33; font-weight:600; }
.popover .psc{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#93a0aa; margin:0 0 9px; }
.popover .pfoot{ margin-top:10px; padding-top:9px; border-top:1px solid #f0f3f6; font-size:12px; color:#7b8792; }
.popover .pchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.popover .pchips > code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:#053345; background:#eef3f5; border:1px solid #dde7ea; border-radius:7px; padding:2px 9px; }
.popover .pchips > code.plain{ font-family:inherit; font-size:12px; }