/**
 * dangathi-swal.css
 * Identidade visual Dangathi para os popups (SweetAlert2) do sistema,
 * seguindo o padrão do site dangathi.com:
 * degradê azul linear-gradient(145deg, #0039e4 0%, #04dbf1 100%),
 * texto branco e botões arredondados (pílula).
 */

.swal2-popup {
    /* bcrm (12/11/2026): o degradê do studio, roxo → rosa, como o menu (era o azul da Dangathi) */
    background-image: linear-gradient(145deg, var(--dangathi-blue) 0%, var(--dangathi-purple) 100%) !important;
    color: #fff !important;
    border-radius: 18px !important;
    padding-bottom: 26px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}

.swal2-title {
    color: #fff !important;
    font-weight: 800 !important;
}

.swal2-html-container {
    color: #fff !important;
}

.swal2-html-container b,
.swal2-html-container strong {
    color: #fff !important;
}

/* linhas de "deu certo" / "deu erro" dentro do popup (14/11/2026): verde e vermelho do Bootstrap somem no degradê
   roxo→rosa; viram uma faixa clara com texto branco, legível em qualquer popup */
.swal2-html-container .text-success,
.swal2-html-container .text-danger,
.swal2-html-container .text-warning {
    display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 10px;
    color: #fff !important; font-weight: 700; line-height: 1.35;
}
.swal2-html-container .text-success { background: rgba(22, 163, 74, .85); }
.swal2-html-container .text-danger  { background: rgba(185, 28, 28, .85); }
.swal2-html-container .text-warning { background: rgba(180, 83, 9, .85); }

.swal2-html-container small {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Botões estilo pílula, como no site */
.swal2-styled {
    border-radius: 30px !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
    box-shadow: none !important;
    border: none !important;
}

.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35) !important;
}

/* X de fechar no canto */
.swal2-close {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 2rem !important;
}

.swal2-close:hover {
    color: #fff !important;
    transform: none !important;
}

/* Campos de formulário dentro do popup (edição de veículo) */
.swal2-popup .swal2-input {
    background: #fff !important;
    color: #1a1b1e !important;
    border: none !important;
    border-radius: 28px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.swal2-popup .swal2-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important;
}

/* Mensagem de validação (ex: "A placa não pode ficar vazia") */
.swal2-validation-message {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

/* Ícones: anéis mais suaves sobre o degradê */
.swal2-icon {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #fff !important;
}

.swal2-icon.swal2-error {
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #fff !important;
}

.swal2-icon.swal2-warning,
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
}

/* Ícones dos botões dos popups em círculo branco 40x40, como os botões do site */
.swal2-styled i {
    background: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    margin-right: 0;
    vertical-align: middle;
    color: var(--dangathi-blue);
    font-style: normal;
}

/* Botões com ícone: padding mínimo à direita, como o octf-btn do site */
.swal2-styled:has(i) {
    padding: 4px 4px 4px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    /* height: 38px !important; */
}

/* Cor do ícone acompanhando a cor do botão */
.swal2-styled.swi-laranja i { color: #fe4c1c; }
.swal2-styled.swi-amarelo i { color: #f5a623; }
.swal2-styled.swi-verde i   { color: #28a745; }
.swal2-styled.swi-cinza i   { color: #fe4c1c; }
.swal2-styled.swi-red { background: #ee0000 !important; }
.swal2-styled.swi-red i { color: #ee0000; }

/* Timer bar dos toasts de sucesso */
.swal2-timer-progress-bar {
    background: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   BOTÕES COM BRILHO NO HOVER (efeito do site dangathi.com)
   Aplica em: botões dos popups (Swal), modal do cliente,
   cabeçalhos (Novo Cadastro / Sair / Ver clientes), login e busca.
   ============================================================ */
.swal2-styled,
.btn-novo,
.btn-sair,
.btn-entrar,
.search-bar .btn,
.topbar-interna a,
.topbar-interna button,
#modalCliente .modal-footer .btn {
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
}

/* o "raio de luz" que atravessa o botão */
.swal2-styled::after,
.btn-novo::after,
.btn-sair::after,
.btn-entrar::after,
.search-bar .btn::after,
.topbar-interna a::after,
.topbar-interna button::after,
#modalCliente .modal-footer .btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
}

.swal2-styled:hover,
.btn-novo:hover,
.btn-sair:hover,
.btn-entrar:hover,
.search-bar .btn:hover,
.topbar-interna a:hover,
.topbar-interna button:hover,
#modalCliente .modal-footer .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    filter: brightness(1.07) !important;
}

.swal2-styled:hover::after,
.btn-novo:hover::after,
.btn-sair:hover::after,
.btn-entrar:hover::after,
.search-bar .btn:hover::after,
.topbar-interna a:hover::after,
.topbar-interna button:hover::after,
#modalCliente .modal-footer .btn:hover::after {
    animation: dangathi-shine 0.75s ease;
}

@keyframes dangathi-shine {
    100% { left: 130%; }
}

/* ============================================================
   Linhas de detalhe do veículo dentro do popup (mesmo padrão
   visual do .linha-cobertura do modal "Solução para Caminhão")
   ============================================================ */
.swal2-html-container .lista-veiculo {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Cartão que envolve a lista, mesmo padrão do .ot-accordions.accordions-gradient
   do modal "Solução para Caminhão": cantos arredondados + sombra suave */
.swal2-html-container .cartao-veiculo {
    margin: 0 0;
    padding: 0px 20px;
    border-radius: 28px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    box-shadow: 8px 8px 25px 0px rgba(42, 67, 113, 0.15);
    -webkit-box-shadow: 8px 8px 25px 0px rgba(42, 67, 113, 0.15);
    -moz-box-shadow: 8px 8px 25px 0px rgba(42, 67, 113, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.swal2-html-container .linha-veiculo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding: 10px 2px;
    margin: 0;
    font-size: 0.8rem;
}

.swal2-html-container .linha-veiculo:last-child {
    border-bottom: none;
}

.swal2-html-container .linha-veiculo .lbl {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-align: left;
}

.swal2-html-container .linha-veiculo .val {
    color: #fff;
    font-weight: 700;
    text-align: right;
}

/* Ícones de ação da listagem (olho / lápis / lixeira): leve destaque no hover */
.btn-acao {
    transition: transform 0.2s ease !important;
}
.btn-acao:hover {
    transform: scale(1.25) !important;
}

/* Espaço entre os botões dos popups */
.swal2-actions {
    gap: 2px !important;
}

/* ============================================================
   bcrm (12/11/2026): popups compactos e botões no tom do studio
   ============================================================ */
.swal2-popup { padding: 0 0 18px !important; }
.swal2-title { font-size: 1.25rem !important; padding: 18px 20px 0 !important; }
.swal2-html-container { font-size: .9rem !important; margin: 10px 18px 0 !important; }
.swal2-actions { margin-top: 14px !important; }
.swal2-close { font-size: 1.6rem !important; }
/* ação: branco com texto roxo; o círculo do ícone em roxo */
.swal2-styled.swi-azul { background: #fff !important; color: var(--dangathi-blue) !important; }
.swal2-styled.swi-azul i { background: var(--dangathi-blue); color: #fff; }
/* cancelar/voltar: claro, translúcido */
.swal2-styled.swi-claro { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.swal2-styled.swi-claro i { background: #fff; color: var(--dangathi-purple); }
.swal2-popup .swal2-input:focus, .swal2-popup .swal2-select:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45) !important; }
.swal2-timer-progress-bar { background: rgba(255, 255, 255, .7) !important; }

/* ícone de sucesso no degradê (14/11/2026): as peças da animação têm fundo branco (feito para popup branco) e
   apareciam como uma bola branca riscada; ficam transparentes */
.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success .swal2-success-fix {
    background-color: transparent !important;
}
.swal2-icon.swal2-success { border-color: rgba(255, 255, 255, .85) !important; color: #fff !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #fff !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(255, 255, 255, .55) !important; }