/* ============================================================================
 * Caixa de informação dos campos — o popover do ícone (i).
 *
 * Par com app/Support/Ui/TooltipInfo.php (monta o markup) e lang/pt/tooltip.php
 * (os textos). São 339 caixas em 157 telas: o visual mora aqui, num lugar só.
 *
 * O popover é do Bootstrap 3, que vinha 100% no visual padrão (caixa branca,
 * borda cinza, texto corrido). Aqui ele ganha cabeçalho colorido, blocos por
 * conceito e rodapé de atenção.
 *
 * ⚠️ Os seletores partem de `.popover` porque o Bootstrap injeta o elemento em
 * `body` (data-container="body") — não dentro do formulário.
 * ========================================================================= */

/* ------------------------------------------------------------------ caixa */
.popover {
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    box-shadow: 0 6px 24px -6px rgba(16, 34, 56, .18), 0 2px 6px rgba(16, 34, 56, .06);
    padding: 0;                       /* o Bootstrap põe 1px; o corpo cuida do respiro */
    max-width: 340px;
    font-size: 13px;
}

/* Cabeçalho: só existe quando a chamada passa um título (data-title). */
.popover-title {
    background: #eaf3fb;
    color: #1b5a8a;
    border-bottom: 1px solid #d5e6f4;
    border-radius: 9px 9px 0 0;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 14px;
    line-height: 1.3;
}

.popover-content {
    padding: 12px 14px;
    color: #33404d;
    line-height: 1.55;
}

/* ---------------------------------------------------- blocos por conceito */
/* Um conceito por bloco: termo em destaque + explicação embaixo. */
.popover-content .ti-item {
    display: block;
    border-left: 3px solid #b9c2cc;
    padding-left: 10px;
    margin-bottom: 11px;
}

.popover-content .ti-item:last-child {
    margin-bottom: 0;
}

.popover-content .ti-item b {
    display: block;
    color: #1f2b38;
    font-weight: 600;
    font-size: 13px;
}

.popover-content .ti-item > span {
    display: block;
    color: #5c6b7a;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Cores agrupam por CATEGORIA, não por ordem. Itens do mesmo tipo, mesma cor. */
.popover-content .ti-c1 { border-left-color: #7f77dd; }   /* roxo   */
.popover-content .ti-c2 { border-left-color: #1d9e75; }   /* verde  */
.popover-content .ti-c3 { border-left-color: #d85a30; }   /* coral  */
.popover-content .ti-c4 { border-left-color: #378add; }   /* azul   */

/* --------------------------------------------------------------- rodapés */
/* Recuo negativo para a faixa encostar nas bordas, apesar do padding do corpo. */
.popover-content .ti-nota,
.popover-content .ti-dica {
    display: block;
    margin: 12px -14px -12px;
    padding: 8px 14px;
    border-top: 1px solid #e6eaee;
    border-radius: 0 0 9px 9px;
    font-size: 12px;
    line-height: 1.45;
}

.popover-content .ti-nota {
    background: #fdf5e6;
    color: #8a5a10;
}

.popover-content .ti-dica {
    background: #f4f6f8;
    color: #5c6b7a;
}

.popover-content .ti-nota i,
.popover-content .ti-dica i {
    margin-right: 6px;
}

/* Parágrafo simples, para caixas sem itens. */
.popover-content .ti-texto {
    display: block;
    color: #33404d;
}

.popover-content .ti-texto + .ti-nota,
.popover-content .ti-texto + .ti-dica {
    margin-top: 12px;
}

/* ------------------------------------------------------- gatilho, o (i) */
.tooltip-info {
    cursor: help;
    margin-left: 3px;
    transition: color .15s ease, transform .15s ease;
}

.tooltip-info:hover {
    color: #185fa5 !important;
    transform: scale(1.15);
}

/* ------------------------------------------------------------- impressão */
@media print {
    .popover { display: none !important; }
}