/* =================================================================== */
/* ÍNDICE DE ESTILOS
/* =================================================================== */
/* 
    1. ESTILOS GERAIS E UTILITÁRIOS
       - Cores, Bordas, Fundos
       - Fontes e Textos
       - Layout e Espaçamento

    2. ESTILOS DE COMPONENTES
       - Botões (Buttons)
       - Tabelas (Tables)
       - Cards
       - Modais (Modals)
       - Abas de Navegação (Navs & Tabs)
       - Formulários (Forms)
       - Badges
       - Spinners e Alertas
       - Componentes Específicos (PDF Viewer, Upload, Loading)

    3. ESTILOS DE PLUGINS EXTERNOS
       - Datepicker
       - Daterangepicker

    4. ANIMAÇÕES
       - Keyframes

    5. MEDIA QUERY PARA MOBILE (max-width: 1000px)
       - Ajustes Gerais para Mobile
       - Componentes Específicos para Mobile
       - Plugins para Mobile
*/


/* =================================================================== */
/* 1. ESTILOS GERAIS E UTILITÁRIOS
/* =================================================================== */


.card-saas {
    background: #ffffff;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.2s ease;
    border: 1px solid #dee2e6;
  
}

.card-saas-docs {
    background: #ffffff;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.2s ease;
    border: 1px solid #dee2e6;
}

.container-pai-flex {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente (opcional) */
    padding: 20px;           /* Adiciona um respiro */
    min-height: 100vh;       /* Opcional: faz o pai ocupar a tela inteira */
}
.card-saas-anexo {
    background: #ffffff;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.2s ease;
    border: 1px solid #dee2e6;
    margin: auto;
    width: 100%;
}
    

.card-saas-grafico {
    background: #ffffff;
    border-radius: 15px;
    padding: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.2s ease;
    border: 1px solid #dee2e6;
  
}

.card-saas-tabela {
    background: #ffffff;
    border-radius: 15px;
    padding: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.2s ease;
    border: 1px solid #dee2e6;
  
}

.card-saas:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

/* Header */
.card-header-saas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.header-cliente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* GRID */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
}

.info-item {
    display: flex;
    flex-direction: column;
}

.label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280;
    margin-bottom: 0px;
}

.value {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}



.obs-text {
    font-size: 14px;
    color: #374151;
}

.badge-ativo {
    background: #dcfce7;
    color: #166534;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.badge-inativo {
    background: #dbb8b8;
    color: #651916;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.mb-4 {
    margin-bottom: 0.08rem !important;
    --bs-gutter-x: 0.8rem !important;  
}

.mb-41 {
    
    --bs-gutter-x: 0.8rem !important;
    margin-top: 0.8rem !important;
}
.mb-42 {
    margin-top: 0.8rem !important;
}

.mb-21 {
    margin-bottom: .7rem !important;
}
.mb-11 {
    margin-bottom: .5rem !important;
}


.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #25272c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.card-title-atendimento {
    font-size: 18px;
    font-weight: 600;
    color: #25272c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 0.5rem !important;
    margin-top: 0.5rem !important;
}

/* Valor principal */
.card-main-value {
    font-size: 21px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
    margin-top: 10px;
}

.card-main-value-fat {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

/* Meta info */
.card-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1px;
}



.meta-label {
    font-size: 17px;
    color: #3c3f47;
    text-align: left;
    
}

.meta-value {
    font-size: 17px;
    font-weight: 600;
    color: #374151;
}
.card-meta .meta-item-right {
    flex: 1;
    text-align: right;
}

.card-meta .meta-item-center {
    flex: 1;
    text-align: center;
}

.meta-value-fat {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

.meta-value-fat-meta {
    font-size: 20px;
    font-weight: 600;
    color: #aca26a;
}

.card-main-value-menor {
    font-size: 21px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
    margin-top: 10px;
}

.meta-value.negative {
    color: #DC2626;
}

.meta-value-fat.negative {
    color: #b5474e;
}

/* Badge */
.badge-status {
    font-size: 15px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.badge-status-p {
    font-size: 15px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.badge-status.negative {
    background: #FEE2E2;
    color: #B91C1C;
}

.badge-status.positive {
    background: #d8ffdf;
    color: #B91C1C;
}

.badge-status.warning {
    background: #FFDDA1;
    color: #c1860d;
}

.badge-status.neutro {
    background: #f3eeee;
    color: #5d83a9;
}



.badge-status-p.neutro {
    background: #f3eeee;
    color: #7a8087;
}


/* ============================================
   FOTO PERFIL
   ============================================ */

  /* CSS para foto redonda com zoom */
.foto-perfil-zoom {

    border-radius: 50%;border: 2px solid #9b9d9e;

}


/* Progress */
.progress-bar {
    height: 6px;
    background: #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1F4E79, #2C6AA0);
    border-radius: 10px;
}

.dropdown-menu-tech {
    --bs-dropdown-color: #dee2e6;
    --bs-dropdown-bg: #0F2B46;
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-box-shadow: ;
    --bs-dropdown-link-color: #dee2e6;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-header-color: #adb5bd;
}
/* --- Cores, Bordas e Fundos --- */
.text-azul { color: #365574 !important; }
/*.text-ouro { color: #aca26a !important; } */
.text-ouro { color: #a19032 !important; } 
.text-amarelo { color: #c1860d !important; } 
.text-azul1 { color: #6ea0d9 !important; }   
.text-azul2 { color: #7a8087 !important; }  
.text-azul3 { color: #5d83a9  !important; }   

.border-primary { border-color: #1e92c4 !important; }
.border-ouro { border-color: #aca26a !important; }
.border-cinza { border-color: #8d8d8d!important; --bs-border-opacity: 10;}


.bg-sol { background-color: #ff771b !important; }
.bg-areia { background-color: #feb936 !important; }
.bg-preto { background-color: #212529 !important; }
.bg-cinza { background-color: #6c757d !important; }
.bg-warning { background-color: #aca26a !important; }
.text-danger {--bs-text-opacity: 1;color: #b5474e !important;}
.bg-pedidos {
  --bs-bg-opacity: 1;
  background-color: #c1860d !important;
}
.bg-orcamento {
  --bs-bg-opacity: 1;
  background-color: #7a8087 !important;
}

.bg-nf {
  --bs-bg-opacity: 1;
  background-color: #365574 !important;
}

 

.form-control.is-warning {
    border-color: #efb90f !important;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23efb90f'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23efb90f' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
/* --- Layout e Espaçamento --- */
.hr { margin: 0.2rem 0 !important; }
.mx-4 { margin-right: 0rem !important; margin-left: 1rem !important; }

.card-estimativa-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

/* Coluna esquerda */
.estimativa-main {
    flex: 1;
}

/* Coluna direita */
.estimativa-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.meta-vertical {
    display: flex;
    flex-direction: column;
}

.meta-vertical .meta-label {
    font-size: 12px;
    color: #6b7280;
}

.meta-vertical .meta-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}



/* =================================================================== */
/* ALINHAMENTOS 
/* =================================================================== */
.space-pedidos-pesquisa{width: 99.3% !important; margin-left: 0.5rem; }
.space-pedidos-pesquisa-mostra{margin-top: 5px !important; width: 99.3% !important; margin-left: 0.5rem; } 
.space-mostraBloco{ margin-right: calc(-.2 * var(--bs-gutter-x));margin-left: calc(-.2 * var(--bs-gutter-x));}
.espacoCard{ margin-top: 21px; margin-bottom: 15px;}
/* =================================================================== */
/* 2. ESTILOS DE COMPONENTES
/* =================================================================== */

/* --- Botões (Buttons) --- */
.btn-danger { --bs-btn-bg: #b5474e; --bs-btn-border-color: #b5474e; }
.btn-warning { --bs-btn-color: #000; --bs-btn-bg: #aca26a; --bs-btn-border-color: #aca26a; --bs-btn-hover-bg: #d5c9aa; --bs-btn-hover-border-color: #aca26a; --bs-btn-active-color: #000;
--bs-btn-active-bg: #d5c9aa;--bs-btn-active-border-color: #d5c9aa;--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;--bs-btn-disabled-bg: #d5c9aa;--bs-btn-disabled-border-color: #d5c9aa;}
.btn-amarelo { --bs-btn-color: #000; --bs-btn-bg: #8cc3ce; --bs-btn-border-color: #8cc3ce; --bs-btn-hover-bg: #c4eff8; --bs-btn-hover-border-color: #c4eff8; }
.btn-ouro { --bs-btn-color: #000; --bs-btn-bg: #d5c9aa; --bs-btn-border-color: #d5c9aa; --bs-btn-hover-bg: #ada28d; --bs-btn-hover-border-color: #aca26a; }
.btn-bege { --bs-btn-color: #fff; --bs-btn-bg: #0F2B46; --bs-btn-border-color: #0F2B46; --bs-btn-hover-bg: #d5c9aa; --bs-btn-hover-border-color: #aca26a; }
.btn-bege-off { --bs-btn-color: #fff; --bs-btn-bg: #6c757d; --bs-btn-border-color: #6c757d; --bs-btn-hover-bg: #aca26a; --bs-btn-hover-border-color: #aca26a; }
.btn-light { --bs-btn-color: #000; --bs-btn-bg: #cecece; --bs-btn-border-color: #d3d4d5; --bs-btn-hover-bg: #99a0a5; }
.btn-light2 { --bs-btn-color: #000; --bs-btn-bg: #f8f9fa; --bs-btn-border-color: #7a8087; --bs-btn-hover-bg: #d3d4d5; }
.btn-link { --bs-btn-padding-x: 0.5rem; --bs-btn-padding-y: 0.003rem; }
.btn-link2 { text-decoration: underline; }
.btn-outline-primary { --bs-btn-color: #0F2B46; --bs-btn-border-color: #0F2B46; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0F2B46; --bs-btn-hover-border-color: #0F2B46; 
--bs-btn-active-bg: #0F2B46; --bs-btn-active-border-color: #0F2B46; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #0F2B46;
--bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #0F2B46;}
.btn-close-sm { width: 0.8em; height: 1em; padding: 0.7em .25em; }
.btn-roadmap { --bs-btn-padding-y: 0.6rem; }
.btnTbmComprou { color: #0078d7; font-size: 20px; }
.btn-acao2 { --bs-btn-color: #fff; --bs-btn-bg: #2f3a4f; --bs-btn-border-color: #333d52; --bs-btn-hover-bg: #c4eff8; --bs-btn-hover-border-color: #c4eff8; }
.btn-acao{--bs-btn-color: #fff;  --bs-btn-bg: #0F2B46;--bs-btn-border-color: #0F2B46;--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #424649;--bs-btn-hover-border-color: #373b3e;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;--bs-btn-active-color: #fff;--bs-btn-active-bg: #4d5154;--bs-btn-active-border-color: #373b3e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color: #fff;--bs-btn-disabled-bg: #212529;--bs-btn-disabled-border-color: #212529;
}
.btn-brancos { --bs-btn-color: #333d52; --bs-btn-bg: #fff; --bs-btn-border-color: #7a8087; --bs-btn-hover-bg: #cecece; --bs-btn-hover-border-color: #cecece; 
--bs-btn-active-color: #fff;--bs-btn-active-bg: #333d52;--bs-btn-active-border-color: #333d52;}
.btn-branco { --bs-btn-color: #333d52; --bs-btn-bg: #fff; --bs-btn-border-color: #cecece; --bs-btn-hover-bg: #cecece; --bs-btn-hover-border-color: #cecece; 
--bs-btn-active-color: #333d52;--bs-btn-active-bg: #cecece;--bs-btn-active-border-color: #cecece;}
.btn-cinza { --bs-btn-color: #333d52; --bs-btn-bg: #cecece; --bs-btn-border-color: #cecece; --bs-btn-hover-bg: #cecece; --bs-btn-hover-border-color: #cecece; 
--bs-btn-active-color: #333d52;--bs-btn-active-bg: #cecece;--bs-btn-active-border-color: #6c757d;}
.btn-group-pedido { margin-right: -0.4rem;}
.btn-arred-dir{--bs-btn-border-radius: 0.375rem;}
    
    

/* --- Tabelas (Tables) --- */
.table { --bs-table-hover-color: #0078d7 !important; }
.table-custom { --bs-table-border-color: #000000; }
.table-warning { --bs-table-bg: #fdf8e3; }
.table-amarela-promo, .table-amarela { --bs-table-color: #000; color: var(--bs-table-color); border-color: var(--bs-table-border-color); }
.table-amarela-promo { --bs-table-bg: #8cc3ce; --bs-table-border-color: #8cc3ce; }
.table-amarela { --bs-table-bg: #c4eff8; --bs-table-border-color: #c4eff8; }
.table-smm > :not(caption) > * > * { padding: .1rem .25rem; }
.table-sm-border > :not(caption) > * > * { padding: .1rem .25rem; border-width: 1 !important; }
.table-custo { border-color: rgba(255, 255, 255, 0) !important; padding: .05rem .25rem !important; --bs-table-active-bg: rgb(0 0 0 / 5%) !important; }
.table-mobile { margin-top: -0.2rem !important;}
.table-responsive { margin-left: 0.5rem; margin-right: 0.2rem;}
.table-responsive-hist {width: 100%; }
.dataTables_length{margin-left: 0.6rem;}
.table.dataTable thead td {padding: 10px 9px;}
.dataTables_filter {margin-right: 0.5rem;}

/* --- Cards --- */
.card { border: 1px solid #dee2e6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.card-text-desc, .card-text-estoque, .card-text-preco, .card-text-promo, .card-text-titulo, .card-text-maior, .card-text-titulo2, .card-text-paragrafo, .card-text-sub { margin-top: 0 !important; margin-bottom: 0rem !important; }
.card-text-desc { font-size: 11px !important; }
.card-text-estoque { font-size: 12px !important; }
.card-text-preco { font-size: 13px !important; color: #0078d7; }
.card-text-promo { font-size: 14px !important; color: #0078d7; }
.card-text-titulo { font-size: 14px !important; }
.card-text-titulo2 { font-size: 14px !important; }
.card-text-maior { font-size: 16px !important; }
.card-text-paragrafo { font-size: 18px !important; margin-top: 5 !important; margin-right: 3px; margin-left: 20px; }
.card-text-sub { font-size: 20px !important; margin-right: 5px; margin-left: 5px; }
.card-img-top-compra { height: 220px !important; width: 220px !important;margin-left: -0.5rem; }
.card-img-top-detalhes { height: 250px !important; width: 300px !important; }
.card-comprou { border: 0px solid #ffffff !important; box-shadow: 0 0.0rem 0.0rem rgba(0, 0, 0, 0.0) !important; }

/* --- Modais (Modals) --- */
.modal-dialog { overflow-y: initial !important; }
.modal-fullscreen { width: 100vw; max-width: none; height: 100vh; margin: 0; }
.modal-fullscreen .modal-content { height: 100vh; border: 0; border-radius: 0; }

/* --- Spinners e Alertas --- */
.spinner-center {display: flex;justify-content: center;align-items: center;margin: 0 auto;text-align: center;}


/* --- Abas de Navegação (Navs & Tabs) --- */
.navbar-portal {
    background: linear-gradient(90deg, #0a1a34, #333d52);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25); 
 
    --bs-navbar-toggler-padding-y: 1.25rem !important; 
        --bs-navbar-padding-x: 0 !important;
        --bs-navbar-padding-y: 0.15rem !important;
        --bs-navbar-brand-margin-end: 2rem !important;
}
.navbar-portal .nav-link {color: #ffffff !important;font-weight: 500;transition: all 0.2s ease;}
.navbar-portal .nav-link:hover {color: #00d4ff !important;}
.navbar-portal .dropdown-menu {border-radius: 12px;box-shadow: 0 10px 25px rgba(0,0,0,0.2);}

.nav-tabs .nav-link.active {
    color: #365574;
    border-bottom-color: #365574;
    background-color: transparent;
}
 .nav-tabs .nav-link:hover {
            color: #0d6efd;
            border-bottom-color: #0d6efd;
        }
 .nav-tabs {
            border-bottom: 2px solid #dee2e6;
              
        }
        
        .nav-tabs .nav-link {
            color: #6c757d;
            border: none;
            border-bottom: 3px solid transparent;
            font-weight: 500;
            padding: 0.45rem 1.5rem;
            transition: all 0.3s ease;
        }
.card-header-tabs {
            display: flex;
            justify-content: flex-end;
            border-bottom: none;
            padding: 0;
            margin-top: -6px;
        }


body {  
    background-color: #F4F6F9 !important;   
}

/* --- Formulários (Forms) --- */
.form-check-input:checked { background-color: #198754 !important; border-color: #127405ff !important; }
.custom-checkbox { width: 22px; height: 22px; cursor: pointer; accent-color: #0f2b46; }
.form-controle { display: block; width: 100px; font-size: 1rem; font-weight: 300; line-height: 0.5; color: #212529; background-color: #fff; border: 1px solid #7a8087; text-align: center; font-weight: bold; appearance: none; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.input-check {accent-color: #0f2b46 !important;}
/* --- Badges --- */
.badge-tamanho { width: 20px !important; height: 20px !important; }
.badge-inadimplente { width: 15px !important; height: 15px !important; }
.badge-historico {
      --bs-badge-font-size: 0.95em !important;
}

/* --- Componentes Específicos --- */
/* PDF Viewer */
#pdfViewerModal .modal-body { background-color: #525659 !important; }
.continuous-page { transition: transform 0.2s ease; }
.continuous-page:hover { transform: translateY(-2px); }
.continuous-canvas { display: block; max-width: 100%; height: auto; }

/* Loading Geral */
#carregandoTela { position: fixed; top: 65px; left: 0; width: 100%; height: 100%; background: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 9999; }
.loading-box { text-align: center; transform: translateY(-200px); }
#mensagemLoading { font-size: 1.35rem; font-weight: 500; line-height: 1.4; }

/* Loading PDF */
#pdfLoadingContinuous { background: #525659; transition: opacity 0.3s ease; margin-top: -100px; }
#pdfLoading[style*="display: none"] { display: none !important; }

/* Upload de Arquivo */
#input-arquivo-real { display: none; }
#form-container { background-color: white; padding: 0px; border-radius: 10px; margin: auto; max-width: 700px; width: 100%; }
#label-arquivo-custom { background-color: #6c757d; color: white; padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; display: inline-block; transition: background-color 0.2s; }
#label-arquivo-custom:hover { background-color: #5c636a; }
#nome-arquivo-selecionado { margin-left: 10px; font-style: italic; color: #6c757d; }

/* Outros */
.img-visualiza { max-height: 94px !important; max-width: 94px !important; width: auto; }
.p-icones { margin: 0 !important; font-size: 20px; color: #000000; }
.top1-0 { top: 8 !important; }
.start-1 { left: 134 !important; }
.start-00 { left: 5 !important; }
.start-01 { left: 12 !important; }
.start-11 { left: 5% !important; }
.fonte-menor { font-size: 12px !important; }
.fonte-media { font-size: 18px !important; margin-top: 5 !important; }
.mobile-titles { margin-top: 11px !important;  margin-left: 0.05rem; }
.mobile-titles-monitor { margin-top: 21px !important; margin-left: 2px;}
.mobile-titles-Workflow { margin-top: 9px !important;     margin-left: 7px; }
.mobile-titles-atendimento { margin-top: 4px !important; margin-left: 3px; }
.mobile-titles-pedidos { margin: 37px 5px 0 5px !important; margin-top: 27px !important;}
.mobile-titles-dashboard { margin-top: 21px !important;     margin-left: 7px; } 
/*.mobile-titles1 { margin-top: 0.9rem !important; margin-left: 0.2rem; font-weight: 600;} */
.mobile-simulacao{min-width: 440px !important;}
.form-select-login {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.btn-group {
    margin-top: 5px !important;
    }

/* =================================================================== */
/* 3. ESTILOS DE PLUGINS EXTERNOS
/* =================================================================== */

/* --- Datepicker --- */
.datepicker table tr td span.active, .datepicker table tr td span.active:hover { background-image: linear-gradient(to bottom, #0d0f0f, #020202) !important; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); }


/* =================================================================== */
/* 4. ANIMAÇÕES
/* =================================================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* =================================================================== */
/* 5. MEDIA QUERY PARA MOBILE (max-width: 1000px)
/* =================================================================== */
@media screen and (max-width: 1000px) {
    
    /* --- Ajustes Gerais --- */
    .mobile-space { margin-top: 45px !important; }
    .mt-4 { margin-top: 2.0rem !important; }
    .mt-10 { margin-top: 5.5rem !important; }
    .mt-11 { margin-top: 12px !important; }
    .mt-13 { margin-top: 0.5rem !important; }
    .d-mon-data { margin-top: 80px !important; }
    .d-mon-menu { margin-top: -15px !important; }
    .row-1 { --bs-gutter-x: 0.8rem !important;}
    .mx-42 {margin-right: 0rem !important; margin-left: 2rem !important;}

    /* --- Títulos e Textos --- */
    .mobile-titles, .mobile-titles-Workflow, .mobile-titles-atendimento { font-size: 50px !important; margin-top: 40px !important; }
    .mobile-titles-monitor{font-size: 50px !important; margin-top: 40px !important;}
    .mobile-titles-atendimento { margin-top: 40px !important; }
    .mobile-titles-pedidos { margin-top: 40px !important; }
    .mobile-titles-parceiros { margin-top: 25px !important; }
    .mobile-titles1 { font-size: 35px !important; }
    .mobile-titles2 { font-size: 40px !important; }
    .mobile-titles3 { font-size: 45px !important; }
    .mobile-titles4 { font-size: 50px !important; }
    .mobile-titles5 { font-size: 30px !important; }
    .card-header { font-size: 30px !important; }
    .card-title { font-size: 40px !important; }
    .card-text-titulo { font-size: 25px !important; }
    .card-text-titulo2 { font-size: 30px !important; }
    .card-text-titulo3 { font-size: 35px !important; }
    .card-text-paragrafo { font-size: 30px !important; margin-top: 10 !important; }
    .card-text-promo { font-size: 27px !important; }
    .card-text-maior { font-size: 35px !important; }
    .card-text-desc { font-size: 20px !important; }
    .card-text-preco { font-size: 25px !important; }
    .card-text-estoque { font-size: 20px !important; }
    .card-text-sub { font-size: 39px !important; }
    .p-icones { font-size: 50px; }
    .homeLogo { width: 250px; height: 90px; }

    /* --- Navegação e Abas --- */
    .navbar { 
        font-size: 45px !important;  
        --bs-navbar-toggler-padding-y: 1.25rem !important; 
        --bs-navbar-padding-x: 0 !important;
        --bs-navbar-padding-y: 2.5rem !important;
        --bs-navbar-brand-margin-end: 2rem !important;
    }
    .navbar-toggler-icon {
    display: inline-block;
    width: 2.5em !important;
    height: 1.5em;
    vertical-align: middle;
    /*background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e)!important;*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;  
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
    }
    .navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: rgb(239 239 245) !important;;
    background-color: transparent;
    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
    border: 3px solid #ffffff !important;
    
}
    
    .nav-tabs { font-size: 39px; }
    .dropdown-item { font-size: 45px !important;width: 15% !important; }



    /* --- Botões --- */
    .btn { --bs-btn-padding-y: 1.6rem; --bs-btn-padding-x: 2.13rem; --bs-btn-font-size: 2.40rem; --bs-btn-border-radius: 0.5rem; }
    .btn-workflow { --bs-btn-padding-y: 1.6rem !important; --bs-btn-padding-x: 2.20rem !important; }
    .btn-pedido { --bs-btn-padding-y: 1.6rem !important; --bs-btn-padding-x: 1.4rem !important; }
    .btn-close-aumenta { transform: scale(2); padding: 2.25em 1.25em !important; }
    .btn-prev { --bs-btn-padding-y: 0.1rem !important; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 2rem; }
    .btn-link { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1.2rem; --bs-btn-font-size: 1.90rem; }
    .btnTbmComprou { font-size: 50px; }

    /* --- Formulários --- */
    .form-control { font-size: 2.9rem; line-height: 2.2; }
    .form-control-data { font-size: 35px !important; width: 250px; }
    .form-select { font-size: 2.4rem; line-height: 2.2; width: 100%; }
    .form-select-login { font-size: 1.0rem; line-height: 1.5; width: 100%; }
    .form-check-input { width: 6em !important; height: 3em !important; }
    .form-check-label { font-size: 2.0rem; margin-inline-start: 10px; }
    .dataTables_filter input { padding: 15px; font-size: 2.5rem; }
    .custom-checkbox { width: 52px; height: 52px; }

    .select2-selection__rendered {line-height: 36px !important; font-size:16px !important; color:#666666 !important;    }
    .select2-selection {height: 36px !important;font-size:16px !important;color:#666666 !important;}

    /* --- Tabelas --- */
    .table { font-size: 35px !important; }
    .table-mobile { font-size: 30px !important; width: 200px; }
    .table-td-mobile { font-size: 20px !important; }
    .table-td-pesquisa-mobile { font-size: 25px !important; }
    .table-col-fixa-mobile1, .table-col-fixa-mobile2, .table-col-fixa-mobile3, .table-col-fixa-mobile4 { position: -webkit-sticky; position: sticky; background: #FFF !important; }
    .table-col-fixa-mobile1, .table-col-fixa-mobile3 { left: 0; }
    .table-col-fixa-mobile2 { left: 80px; }
    .table-col-fixa-mobile4 { left: 60px; }
    .table-col-pesquisa { width: 90%; }
    .table-condensed { font-size: 30px !important; width: 440px !important; }
    .table-smm > :not(caption) > * > * { padding: .50rem .25rem; }
    #rowfixs td { border-right: 0px solid #eee; }
    #rowfixs td:last-child { border-right: none; }
    #rowfixs th, #rowfixs td { padding-left: 25px; padding-right: 25px; white-space: nowrap; }
    #rowfixs th + th, #rowfixs td + td { padding-left: 16px; }
    .table-responsive { margin-left: 0.2rem; margin-right: 0.2rem;}

    /* --- Modais, Tooltips e Popovers --- */
    .modal-lg { --bs-modal-width: 900px; }
    .modal-body { height: auto; overflow-y: auto; }
    #pdfViewerModal .modal-header { padding: 12px 15px; }
    #pdfViewerModal .modal-body { padding: 20px !important; }
    .tooltip .tooltip-inner { font-size: 1rem; padding: 10px 15px; }
    .popover { max-width: 400px; font-size: 2.5rem !important; }
    .popover-header { font-size: 2.5rem !important; font-weight: bold; }
    .popover-body { padding: 35px !important; }
    .btn-close-modal { width: 2em; }

    /* --- Spinners e Alertas --- */
    .spinner-border-sm { width: 1.5em; height: 1.5em; }
    .spinner-border-lg { width: 4.0em; height: 4.0em; }
    .spinner-center {display: flex;justify-content: center;align-items: center;margin: 0 auto;text-align: center;}
    .alert { font-size: 2.9rem !important; }

    /* --- Badges --- */
    .badge-tamanho { width: 45px !important; height: 45px !important; font-size: 1.5rem; }
    .badge-inadimplente { width: 35px !important; height: 35px !important; }

    /* --- Imagens e Posições --- */
    .card-img-top-compra { height: 250px !important; width: 350px !important; }
    .card-img-top-detalhes { height: 350px !important; width: 450px !important; }
    .top1-0 { top: -3 !important; max-width: calc(100% - 60px); }

    /* --- Gráficos --- */
    .graficoMobilePier { height: 460px !important; }
    .graficoMobileLinha { height: 500px !important; }

    /* --- Linhas Horizontais --- */
    .hr-quemComprou { margin: 7rem 0; border-top: 1px solid; opacity: .25; }
    .hr-jaComprou { margin: 4rem 0; border-top: 1px solid; opacity: .25; }

    /* --- Loading de Tela --- */
    #carregandoTela { top: 200px; }
    #mensagemLoading { font-size: 1.85rem; }

    /* --- Plugins Externos (Mobile) --- */
    /* Daterangepicker */
    .daterangepicker { font-size: 65px !important; left: 58px !important; }
    .daterangepicker .ranges li { font-size: 35px !important; }
    .daterangepicker .ranges ul { width: 440px !important; }
    .daterangepicker .drp-selected { font-size: 35px !important; }
    .daterangepicker .drp-calendar { display: none; }
    .daterangepicker .calendar-table table { width: 440px !important; height: 370px !important; }
    .daterangepicker .calendar-table th, .daterangepicker .calendar-table td { font-size: 30px !important; }
    .daterangepicker .drp-buttons .btn { font-size: 42px !important; padding: 16px 8px !important; }

    /* Datepicker */
    .datepicker.datepicker-dropdown { width: 450px !important; min-height: 280px !important; padding: 15px !important; }
    .datepicker td, .datepicker th { width: 152px; height: 160px; }
    .datepicker-months .month { width: 109px !important; height: 60px !important; line-height: 50px !important; font-size: 40px !important; margin: 15px !important; }
    .datepicker-months .datepicker-switch { font-size: 30px !important; }
    .datepicker-months .prev, .datepicker-months .next { width: 80px !important; height: 40px !important; font-size: 50px !important; line-height: 40px !important; }
    .datepicker-years .year { padding: 1px 1px; margin: 18px; font-size: 2.5rem; }

      /*Fotos mobile */
  .foto-perfil-zoom {
    border-radius: 50%;border: 2px solid #9b9d9e;width: 80; height: 80;
  }

  .foto-perfil-zoom:hover {
    transform: scale(1.0);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-color: #212529;
  }

    .badge-status {
    font-size: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    }

    .end-001 {
        right: 20 !important;
    }
}