/* ---------------------------------------------------------------------------
   Tour guiado (suporte interativo) — tema do popover do Driver.js + botão de
   ajuda das telas. Ver wwwroot/Services/tourService.js.

   O Driver.js vem com um popover branco genérico e fonte própria; aqui ele
   recebe as cores da marca (verde-petróleo #287271 / #2a9d8f) e a fonte da
   aplicação.
   --------------------------------------------------------------------------- */

/* ---- Botão que abre o tour, na barra de ações da tela ---- */
.btn-tour {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid #cfe0dd;
    border-radius: 3px;
    background: #f2f8f7;
    color: #287271;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.btn-tour:hover,
.btn-tour:focus {
    background: #e4f1ef;
    border-color: #a9cec9;
    color: #1f5a59;
    text-decoration: none;
}

/* O cabeçalho da modal de edição em lote acomoda o botão ao lado do título. */
.modal-header.lote-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ---- Popover ---- */
.driver-popover.economato-tour {
    max-width: 330px;
    padding: 14px 16px;
    border-radius: 5px;
    box-shadow: 0 10px 34px rgba(20, 38, 45, .30);
}

.driver-popover.economato-tour * {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* O seletor universal acima trocava a fonte TAMBÉM nos <i class="fa"> citados no texto
   do passo — e ícone do Font Awesome é glifo de fonte: sem a família certa ele some.
   Este seletor tem especificidade maior e devolve a fonte dos ícones. */
.driver-popover.economato-tour .fa {
    font-family: FontAwesome;
}

.driver-popover.economato-tour .driver-popover-title {
    font-size: 14px;
    font-weight: 700;
    color: #264653;
}

.driver-popover.economato-tour .driver-popover-description {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #4a545c;
}

.driver-popover.economato-tour .driver-popover-description b {
    color: #287271;
}

/* Os ícones citados no texto do passo são os mesmos da tela. */
.driver-popover.economato-tour .driver-popover-description .fa {
    color: #ee8959;
}

.driver-popover.economato-tour .driver-popover-progress-text {
    font-size: 11px;
    color: #98a1a8;
}

.driver-popover.economato-tour .driver-popover-footer button {
    padding: 4px 11px;
    border: 1px solid #d3d9de;
    border-radius: 3px;
    background: #fff;
    color: #5c6670;
    font-size: 11.5px;
    font-weight: 600;
    text-shadow: none;
}

.driver-popover.economato-tour .driver-popover-footer button:hover {
    background: #f2f8f7;
    border-color: #a9cec9;
    color: #287271;
}

.driver-popover.economato-tour .driver-popover-next-btn {
    background: #287271;
    border-color: #287271;
    color: #fff;
}

.driver-popover.economato-tour .driver-popover-next-btn:hover {
    background: #1f5a59;
    border-color: #1f5a59;
    color: #fff;
}

.driver-popover.economato-tour .driver-popover-close-btn {
    color: #b9c1c8;
}

.driver-popover.economato-tour .driver-popover-close-btn:hover {
    color: #5c6670;
}

/* ---- Convivência com o resto da tela durante o tour ---- */

/* O balão da diretiva dica-container fica em z-index acima do overlay: sem isto,
   um tooltip aberto no instante em que o tour começa fica flutuando sobre a
   tela escurecida. */
.driver-active .dica-balao {
    display: none !important;
}

/* Os ícones de replicar só aparecem no hover da linha. Durante o tour eles
   precisam estar visíveis, senão o passo aponta para um ícone invisível. */
.driver-active .acao-replicar {
    opacity: 1;
}