/* =================== LOGIN =================== */

/* Fundo geral da tela de login: cor institucional, centralização vertical/horizontal, fonte padrão */
body.bg-login {
    background: #eff0f1;
    font-family: Arial, sans-serif;
    min-height: 100vh;
    margin: 0;
    display: flex;                 /* Centraliza vertical/horizontal */
    align-items: center;           /* Centraliza vertical */
    justify-content: center;       /* Centraliza horizontal */
}

/* Card genérico: base para todos os cards do sistema */
.q-card {
    background: #fff;
    border-radius: 14px;           /* Cantos arredondados */
    box-shadow: 0 2px 10px 0 rgba(31,46,110,0.08); /* Sombra leve */
}

/* Card específico do login: largura máxima, padding, layout vertical e centralização do conteúdo */
.q-card-login {
    max-width: 500px;              /* Largura máxima do card */
    min-width: 300px;           /* Largura mínima do card (altere como desejar) */
    margin: 0 auto;
    padding: 32px 18px 28px 18px;  /* Espaçamento interno */
    display: flex;
    flex-direction: column;        /* Disposição em coluna */
    align-items: center;           /* Centraliza todos os filhos */
    gap: 0;
}

/* Logo da Qualipromo: tamanho e alinhamento central */
.q-logo {
    width: 180px;
    margin: 0 auto 15px auto;      /* Espaço abaixo do logo */
    display: block;
}

/* Título da tela de login: cor institucional, centralizado, destaque de peso */
.login-title {
    text-align: center;
    font-size: 1.35rem;
    color: #1f2e6e;
    margin-bottom: 18px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Label dos campos de input: alinhamento à esquerda, largura máxima igual ao campo, cor institucional */
.q-label {
    width: 100%;
    max-width: 240px;
    margin: 0 auto 2px auto;
    text-align: left;
    font-size: 1rem;
    color: #1f2e6e;
    font-weight: 500;
    display: block;
}

/* Campos de input (email/senha): largura máxima, centralizado, borda arredondada, foco destacado */
.q-input {
    width: 100%;
    max-width: 240px;              /* Largura máxima dos campos */
    min-width: 0;
    height: 38px;
    border: 1px solid #7f8188;     /* Borda cinza */
    border-radius: 8px;            /* Cantos arredondados */
    font-size: 1rem;
    padding: 0 11px;
    background: #fff;
    color: #1f2e6e;
    margin-bottom: 2px;           /* Espaço entre campos */
    outline: none;
    transition: border-color .2s;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Efeito de foco no input: borda azul institucional */
.q-input:focus {
    border-color: #1f2e6e;
}

/* Botão principal de login: largura igual aos campos, cor institucional, arredondado, destaque ao passar o mouse */
.q-btn,
.btn-login {
    background: #1f2e6e;
    color: #fff;
    border: none;
    border-radius: 8px;
    height: 42px;
    width: 100%;
    max-width: 240px;              /* Mesma largura dos campos */
    font-size: 1rem;
    font-weight: 600;
    margin: 22px auto 0 auto;      /* Espaço acima do botão */
    cursor: pointer;
    transition: background .2s;
    display: block;
}

/* Hover no botão de login: tom mais escuro do azul institucional */
.q-btn:hover,
.btn-login:hover {
    background: #0e1844;
}

/* Espaçamento superior adicional para componentes (se necessário) */
.mt-16 { margin-top: 16px !important; }

/* Responsividade para telas pequenas/celulares */
@media (max-width: 480px) {
    .q-card-login {
        max-width: 96vw;           /* Quase toda a largura da tela */
        padding: 18px 2vw;
    }
    .login-title { font-size: 1.08rem; }
    .q-logo { width: 80px; }
    .q-label, .q-input, .q-btn, .btn-login {
        max-width: 96vw;           /* Inputs, botão e label adaptam à tela */
    }
}

/* =================== PAINEL =================== */

/* Reset básico e fonte */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f8f9fb;
    height: 100%;
}

/* Container principal: flex horizontal */
.painel-container {
    display: flex;
    min-height: 100vh;
}

/* Logo do menu lateral*/
.logo-img { 
    padding-top: 20px;   /* aumenta o espaço acima da logo */
    max-width: 170px; /* ou o valor que preferir */
    height: auto;
    display: block;
}

/* Menu lateral */
.menu-lateral {
    width: 260px;
    background: #0b3576; /* Azul institucional */
    color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: width 0.3s;
    position: relative;
    z-index: 10;
}

.menu-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.5rem 1rem;
}

.logo {
    font-weight: bold;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-menu {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}

.menu-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-lista > li {
    margin: 0.3rem 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.4rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
    user-select: none;
}

.menu-item:hover, .menu-lista a:hover {
    background: #0d408e;
}

.submenu {
    display: none;
    background: #0c295a;
    padding-left: 1.8rem;
}

.menu-lista > li.expanded > .submenu {
    display: block;
}

.menu-lista a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0.8rem 1.4rem;
    font-size: 0.97rem;
    transition: background-color 0.2s;
}

.menu-lista .sair {
    color: #ffdddd;
}

/* Conteúdo principal */
.painel-conteudo {
    flex: 1;
    background: #d8dae0; /* cor do fundo da área de conteúdo do painel*/
    padding: 1rem 1rem; /* margem externa do container branco pai*/
    min-width: 0;
}

.painel-header {
    display: flex;
    align-items: center;
    min-height: 40px;
    justify-content: flex-end;
}

/* Boas-vindas */
.painel-boas-vindas {
    margin-top: 1.2rem;
}

.painel-boas-vindas h1 {
    font-size: 2.1rem;
    color: #113a72;
    margin-bottom: 0.4rem;
}

/* Responsividade */
@media (max-width: 900px) {
    .painel-conteudo {
        padding: 1.2rem 1rem;
    }
    .menu-lateral {
        width: 70vw;
        min-width: 190px;
    }
}

@media (max-width: 700px) {
    .painel-container {
        flex-direction: column;
    }
    .menu-lateral {
        position: fixed;
        left: -100vw;
        top: 0;
        bottom: 0;
        width: 72vw;
        max-width: 270px;
        z-index: 2000;
        height: 100vh;
        transition: left 0.25s;
    }
    .menu-lateral.ativo {
        left: 0;
    }
    .painel-conteudo {
        padding: 0.9rem 0.7rem;
    }
    .mobile-only {
        display: inline-block !important;
    }
    /* Botão 3 risquinhos azul institucional no mobile */
    .btn-menu.mobile-only {
        color: #0b3576 !important;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 6px #0001;
        position: fixed;          /* Fixa o botão na tela */
        top: 18px;                /* Distância do topo */
        right: 18px;              /* Distância da direita */
        z-index: 3001;            /* Mais alto que o menu */
        padding: 8px 12px;
    }
    .btn-menu.mobile-only i {
        color: #0b3576 !important;
        font-size: 1.7rem;
    }
}

.mobile-only {
    display: none;
}

/* Animação de seta do submenu */
.seta {
    margin-left: auto;
    transition: transform 0.2s;
}

.expanded > .menu-item .seta {
    transform: rotate(180deg);
}

/* =================== CADASTRO DE CLIENTE =================== */

/* Container do formulário centralizado, largura maior para acomodar o grid */
.container {
    max-width: 100%; /* aumente se quiser ainda mais espaço */
    margin: 0.5rem auto 0.5rem auto; /* Este é referente ao que está fora do container [top] [right] [bottom] [left];*/
    background: #fff;
    box-shadow: 0 4px 15px 0 rgba(12,41,90,0.10);
    border-radius: 14px;
    padding: 0.5rem 2.4rem 0.5rem 2.4rem; /* Este é referente ao que vem dentro do container [top] [right] [bottom] [left];*/
}

/* Título do formulário */
.titulo {
    color: #0c295a;
    font-size: 2.0rem;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
    letter-spacing: 1px;
}

/* Botões de alternância PJ/PF */
.switch-pessoa {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
.switch-pessoa .btn {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    border: none;
    outline: none;
    cursor: pointer;
    background: #e5eefd;
    color: #0c295a;
    transition: background-color 0.25s, color 0.25s;
}

/* Só o ativo fica azul escuro */
.switch-pessoa .btn.active {
    background: #0c295a;
    color: #fff;
}

/* Hover SÓ NO BOTÃO INATIVO! */
.switch-pessoa .btn:not(.active):hover {
    background: #1856b3;
    color: #fff;
}

/* =================== FORMULÁRIO EM DUAS COLUNAS (DESKTOP) =================== */
.formulario {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    gap: 0rem 1rem; /* espaço vertical/horizontal entre campos */
}

/* Cada grupo de campo */
.form-grupo {
    display: flex;
    flex-direction: column;
    gap: 0rem; /* espaço vertical entre os campos de formulário ou input */
    margin-bottom: 0; /* grid já controla */
}

/* Para campos que devem ocupar a linha inteira */
.form-grupo-full {
    grid-column: 1 / 3;
}

.form-grupo-full {
    grid-column: 1 / 3;
}

.form-grupo-full-cotacao {
    width: 100%;
}

/* Botão cadastrar ocupa linha inteira à direita */
.form-botoes {
    grid-column: 1 / 3;
    display: flex;
    justify-content: flex-end;
    margin-top: 1.2rem;
    margin-bottom: 0.2rem;
}

/* Labels e inputs */
.form-grupo label {
    color: #0c295a;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.1rem;
}
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    padding: 0.56rem 0.9rem;
    border: 1px solid #b2c6e1;
    border-radius: 7px;
    font-size: 1rem;
    background: #f7f9fd;
    color: #18304e;
    outline: none;
    transition: border 0.2s;
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    border: 1.5px solid #0c295a;
    background: #fff;
}

/* Deixa textarea um pouco maior */
.form-grupo textarea {
    min-height: 70px;
    resize: vertical;
}

/* Botão cadastrar */
.btn-direita {
    display: inline-block;
    float: right;
    margin-top: 0rem;
    margin-bottom: 0.5rem;
    padding: 0.65rem 0.65rem 0.65rem 0.65rem; /*margens dentro do botão topo, direita, baixo, esquerda */
    font-size: 1.12rem;
    font-weight: bold;
    background: #0c295a;
    color: #fff;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgba(12,41,90,0.07);
    transition: background-color 0.2s, color 0.2s;
}
.btn-direita:hover,
.switch-pessoa .btn.active:hover {
    background: #1856b3;
    color: #fff;
}



/* ======= GRID DOS CAMPOS DO FORMULÁRIO - PARA OS CAMPOS FICAREM AO LADO - COLUNAS ======= */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem; /* espaço na altura entre campos */
}

/* Campos que devem ocupar as duas colunas (linha inteira) */
.form-grupo-full {
    grid-column: 1 / 5; /* Ocupa da coluna 1 até a 5, ou seja, 4 colunas */
}

/* Oculta áreas conforme necessário */
.oculto {
    display: none !important;
}

/* =========== RESPONSIVIDADE: 1 COLUNA NO MOBILE =========== */
@media (max-width: 800px) {
    .container {
        padding: 1.1rem 0.5rem 1rem 0.5rem;
        max-width: 99vw;
        box-shadow: 0 1px 10px 0 rgba(12,41,90,0.12);
    }

    .form-grupo-full,
    .form-botoes {
        grid-column: 1 / 2;
    }
    .btn-direita {
        width: 100%;
        float: none;
        padding: 0.7rem 0;
    }
    .titulo {
        font-size: 1.3rem;
    }
}

/* Responsividade: empilha no mobile */
@media (max-width: 800px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .form-grupo-full {
        grid-column: 1 / 2;
    }
}


/* =================== LISTAGEM DE CLIENTE =================== */

/* Badge genérico para status ("Lead" ou "Cliente") */
.badge-status {
  font-family: Arial, sans-serif;
  font-size: 1rem;             /* Tamanho da fonte */
  font-weight: bold;           /* Fonte em negrito */
  color: #18304e;                /* Cor do texto */
  vertical-align: middle;         /* Alinha verticalmente no centro com texto/ícone ao lado */
}

/* Badge específico para "Lead" */
.badge-lead {
  color: #ea0000;              /* Cor de fundo para Lead */
}

/* Badge específico para "Cliente" */
.badge-cliente {
  color: #18304e;             /* Cor de fundo para Cliente */
}

/* Subtítulo destacado da listagem de resultados */
.subtitulo {
  color: #fff;                    /* Texto branco */
  background-color: #696b73;      /* Fundo cinza institucional */
  font-size: 1.15rem;             /* Tamanho da fonte */
  font-weight: 600;               /* Fonte em negrito */
  margin-top: 1.2rem;             /* Espaço acima do subtítulo */
  margin-bottom: 0.4rem;          /* Espaço abaixo do subtítulo */
  text-align: left;               /* Alinhamento à esquerda */
  letter-spacing: 0.5px;          /* Espaçamento entre letras */
  padding: 0.6rem;                /* Espaçamento interno */
  border-radius: 8px;             /* Cantos arredondados */
}
/* ======= FORMULÁRIO DE PESQUISA ======= */
.form-pesquisar {
  display: flex;
  flex-direction: column;         /* Alinha o título e o formulário em coluna */
  gap: 0.5rem;                    /* Espaçamento entre título e formulário */
}

.form-pesquisar > label {
  color: #0c295a;                 /* Azul institucional */
  font-weight: 600;               /* Negrito */
  font-size: 1rem;                /* Tamanho padrão */
  margin-bottom: 0.1rem;          /* Espaço abaixo do label */
}

.form-pesquisar > div {
  display: flex;                  /* Flexbox para input e botão lado a lado */
  align-items: center;            /* Centraliza verticalmente */
  gap: 0.5rem;                    /* Espaço entre input e botão */
}

.form-pesquisar input[type="text"] {
  flex: 1;                        /* O input ocupa todo o espaço possível */
  padding: 0.56rem 0.3rem;        /* Mesmo padding dos outros inputs */
  border: 1px solid #b2c6e1;      /* Borda azul clara */
  border-radius: 7px;             /* Arredondamento igual aos outros campos */
  font-size: 0.95rem;                /* Fonte padrão */
  background: #f7f9fd;            /* Fundo azul muito claro */
  color: #18304e;                 /* Texto azul escuro */
  outline: none;                  /* Sem contorno externo */
  transition: border 0.2s;        /* Transição suave ao focar */
}

.form-pesquisar select {
  flex: 1;
  padding: 0.56rem 0.3rem;
  border: 1px solid #b2c6e1;
  border-radius: 7px;
  font-size: 0.95rem;
  background: #f7f9fd;
  color: #18304e;
  outline: none;
  transition: border 0.2s;
}

/* Estado de foco igual ao padrão do sistema */
.form-pesquisar input[type="text"]:focus {
  border: 1.5px solid #0c295a;    /* Borda azul escura no foco */
  background: #fff;               /* Fundo branco ao focar */
}

.form-pesquisar select[type="text"]:focus {
  border: 1.5px solid #0c295a;    /* Borda azul escura no foco */
  background: #fff;               /* Fundo branco ao focar */
}

.form-pesquisar button {
    margin-top: 0rem;
    margin-bottom: 0.5rem;
    padding: 0.6rem 1rem; /*margens dentro do botão*/
    font-size: 1.12rem;
    font-weight: bold;
    background: #0c295a;
    color: #fff;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgba(12,41,90,0.07);
    transition: background-color 0.2s, color 0.2s;
}
.form-pesquisar button:hover,
.switch-pessoa .btn.active:hover {
    background: #1856b3;
    color: #fff;
}

.markup input[type="text"] {
  background-color: #b00020 !important;
  color: #fff !important;
  font-weight: bold;
}

/* Imagem dos botões de ação (detalhes/excluir) */
.btn-icone img {
  max-width: 38px;                /* Largura máxima */
  max-height: 38px;               /* Altura máxima */
  display: block;                 /* Remove espaço extra abaixo da imagem */
  margin: 0 auto;                 /* Centraliza a imagem no botão */
  border-radius: 8px;             /* Cantos levemente arredondados */
  box-shadow: none;               /* Remove sombra padrão do navegador */
}

/* Cursor em mão (detalhes/excluir) */

.btn-icone {
  padding: 2px 2px;               /* Pequeno padding interno */
  background: none;               /* Sem cor de fundo */
  border: none;                   /* Sem borda */
  box-shadow: none;               /* Sem sombra */
  cursor: pointer;                /* Botão de ação (envolve a imagem) */
}

/* Efeito hover na imagem dos botões de ação */
.btn-icone:hover img {
  filter:contrast(100);           /* (Desnecessário: não altera nada) */
  filter:brightness(2);           /* Deixa a imagem mais clara no hover */
}

/* Container das listagens (alinha itens ao centro verticalmente) */
.container-listagem {
  align-items: center;            /* Alinha itens das linhas ao centro vertical */
}

/* Linha de títulos (cabeçalho do grid) */
.linha-titulo {
  font-family: Arial, sans-serif;
  display: grid;                                                      /* Define grid para as colunas */
  grid-template-columns: 80px 4fr 2fr 180px 2fr 2fr 70px 70px;    /* Colunas automáticas + 1 coluna fixa (88px) */
  width: 100%;                                                        /* Ocupa toda a largura */
  box-sizing: border-box;                                              /* Inclui padding/border no cálculo da largura */
  gap: 0.35rem;                                                       /* Espaço entre as colunas */
  background: #9aa5bb;                                                /* Fundo do cabeçalho */
  border-radius: 8px;                                                 /* Cantos arredondados do cabeçalho */
  padding: 0.60rem 0.4rem 0.60rem 0.4rem;                             /* Espaçamento interno (top, right, bottom, left) */
  font-size: 1rem;                                                    /* Tamanho da fonte */
  font-weight: 600;                                                   /* Fonte em negrito */
  color: #0c295a;                                                     /* Cor do texto */
  align-items: center;                                                /* Alinha itens ao centro verticalmente */
}


/* Linha de resultado (cada cliente) */
.linha-resultado {
  font-family: Arial, sans-serif;
  display: grid;                                                      /* Define grid para colunas */
  grid-template-columns: 80px 4fr 2fr 180px 2fr 2fr 70px 70px;
  gap: 0.35rem;                                                       /* Espaço entre as colunas */
  border-bottom: 1px solid #d9e2f3;                                   /* Linha divisória inferior */
  border-radius: 8px;                                                 /* Cantos arredondados  */
  background: #eff0f1;                                                 /* Fundo branco */
  font-size: 1rem;                                                    /* Tamanho da fonte */
  color: #1f2e6e;                                                     /* Cor do texto */
  align-items: center;                                                /* Alinha itens ao centro verticalmente */
  padding: 0.38rem 0.4rem;                                            /* Espaçamento interno */
  transition: background-color 0.13s;                                       /* Transição suave de fundo no hover */
  margin-bottom: 10px;
}

/* Efeito hover na linha de resultado */
.linha-resultado:hover {
  background: #dcdfe4;            /* Muda fundo ao passar mouse */
}

/* Responsividade: em telas menores, só duas colunas e fonte menor */
@media (max-width: 900px) {
  .linha-titulo, .linha-resultado {
    grid-template-columns: 1fr 1fr;   /* Empilha em 2 colunas */
    font-size: 0.95rem;               /* Fonte um pouco menor */
  }
}


/* ================================================================================================*/
/* ======================================= CRIAR COTAÇÃO ==========================================*/
/* ================================================================================================*/

.container-pai { /* Container para os cards com fundo branco - GLOBAL NO CRIAR COTAÇAO */
    max-width: 100%; /* aumente se quiser ainda mais espaço */
    margin: 0.5rem auto 0.5rem auto; /* Este é referente ao que está fora do container [top] [right] [bottom] [left];*/
    background: #fff;
    box-shadow: 0 4px 15px 0 rgba(12,41,90,0.10);
    border-radius: 14px;
    padding: 0.5rem 2.4rem 0.5rem 2.4rem; /* Este é referente ao que vem dentro do container [top] [right] [bottom] [left];*/
}

/* Configuração das DIVS dentro do CARD 1*/
.cotacao-card1 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: flex-end;
    gap: 0.8rem; /* espaço entre os blocos, mais controlado */
}

.cotacao-card1 > div {
    min-width: max-content;
    text-align: left;
    margin: 0; /* zera o margin lateral geral */
}

.cotacao-card1 > div:last-child {
    margin-left: auto; /* joga só os botões pra direita */
    display: flex;
    gap: 0.5rem;
}


.cotacao-card4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}
.cotacao-card1 > div:first-child {
    margin-right: auto;  /* Empurra as próximas divs para direita */
}
.cotacao-card1 > div:not(:first-child) {
    min-width: max-content; /* largura mínima baseada no conteúdo */
    text-align: right;
    margin-left: 1rem; /* espaçamento entre os itens da direita */
}

.cotacao-subtitulos {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    font-weight: bold;
    color: #0c295a;
    flex-basis: 100%;  /* ocupa a largura toda e joga os próximos pra baixo */
    padding: 0.8rem 0 0.2rem 0;
}

/* Botões azul */
.cotacao-botao-azul {
    display: inline-block;
    padding: 0.65rem;
    font-size: 1.12rem;
    font-weight: bold;
    background: #0c295a;
    color: #fff;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgba(12,41,90,0.07);
    transition: background 0.2s, color 0.2s;
}
.cotacao-botao-azul:hover {
    background: #1856b3;
    color: #fff;
}

/* Botões vermelhos */
.cotacao-botao-vermelho {
    display: inline-block;
    padding: 0.65rem;
    font-size: 1.12rem;
    font-weight: bold;
    background: #b50202;
    color: #fff;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgba(12,41,90,0.07);
    transition: background 0.2s, color 0.2s;
}
.cotacao-botao-vermelho:hover {
    background: #e12929;
    color: #fff;
}

/* VARIAÇÃO DE CORES DO STATUS EM ANÁLISE OU APROVADO*/
.badge-status-cotacao {
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.95rem;
    color: #fff;
    display: inline-block;
}

.status-analise-cotacao {
    background-color: #7390c4;
}

.status-aprovado-cotacao {
    background-color: #0b932a;
}



/* Responsividade para os botões e layout do card */
@media (max-width: 600px) {
    .cotacao-card1 {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .cotacao-card1 > div {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .cotacao-botao-azul,
    .cotacao-botao-vermelho {
        width: 100%;
    }
}
/* ================================================================================================*/
/* ======================EFEITO FADE IN NO CARD 3 DO CRIAR COTAÇÃO ================================*/
/* ================================================================================================*/
.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.3s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================================================================*/
/* ==================================== PLANILHA DE COTAÇÃO =======================================*/
/* ================================================================================================*/

.linha-totais { /* AQUI CONTROLA AS COLUNAS DE TOTAIS, DOS TÍTULOS E DOS CAMPOS DE FORM DA PLANILHA*/
    display: grid;
    grid-template-columns: 2rem 3rem 6rem 4rem 3rem 3rem 5rem 3rem 4rem 3rem 6rem 3rem 2rem 4rem 6rem 6rem 3rem;
    gap: 0.3rem;
    padding: 0.4rem 0;
    font-weight: bold;
    font-size: 0.8rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #0c295a;
    background: #e7e6e3;
    border-bottom: 2px solid #d1d8e2;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 0.2rem;
}


.linha-totais .celula {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
}

.linha-titulos {
    background: #9aa5bb;
    margin-top: 0.3rem;
}

.celula input,
.celula select{
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem;
    padding: 0.56rem 0.3rem;        /* Mesmo padding dos outros inputs */
    border: 1px solid #8fa5c0;    /* Borda azul clara */
    border-radius: 7px;             /* Arredondamento igual aos outros campos */
    font-size: 0.8rem;              /* Fonte padrão */
    font-weight: bold;
    height: 2.2rem;                 /* Altura campos */
    background: #eceef4;          /* Fundo azul muito claro */
    color: #18304e;               /* Texto azul escuro */
    outline: none;                  /* Sem contorno externo */
    transition: border 0.2s;        /* Transição suave ao focar */
}

.celula input.vermelho{
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem;
    padding: 0.56rem 0.3rem;        /* Mesmo padding dos outros inputs */
    border: 1px solid #8fa5c0;    /* Borda azul clara */
    border-radius: 7px;             /* Arredondamento igual aos outros campos */
    font-size: 0.8rem;              /* Fonte padrão */
    font-weight: bold;
    height: 2.2rem;                 /* Altura campos */
    background: #b00020;        /* Fundo azul muito claro */
    color: #ffffff;               /* Texto azul escuro */
    outline: none;                  /* Sem contorno externo */
    transition: border 0.1s;        /* Transição suave ao focar */
}

/* Estado de foco igual ao padrão do sistema */
.celula input.vermelho:focus{
  border: 1.5px solid #48000d;     /* Borda azul escura no foco */
  background: #850000;               /* Fundo branco ao focar */
}

.celula input:focus,
.celula select:focus {
  border: 1.5px solid #0c295a;    /* Borda azul escura no foco */
  background: #fff;               /* Fundo branco ao focar */
}

.campos-vermelhos {
    background-color: #b00020; /* vermelho forte */
    color: #fff;               /* texto branco */
    border-radius: 6px;
    font-size: 0.8rem; 
    font-weight: bold;
    height: 2.2rem;                 /* Altura campos */
    display: flex;             /* Ativa flexbox */
    align-items: center;       /* Centraliza verticalmente */
    justify-content: center;   /* (opcional) centraliza horizontalmente */
}

.celula button {
    padding: 0.6rem 1rem; /*margens dentro do botão*/
    font-size: 1rem;
    font-weight: bold;
    background: #0c295a;
    color: #fff;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgba(12,41,90,0.07);
    transition: background-color 0.1s, color 0.1s;
}
.celula button:hover {
    background: #1856b3;
    color: #fff;
}

.linha-acoes { /* botões novo produto e excluir */
    gap: 0.3rem;
    padding: 0.7rem 1rem 0.7rem;
    font-weight: bold;
    font-size: 0.85rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #0c295a;
    background: #e3e5e7;
    border-bottom: 2px solid #d1d8e2;
    border-radius: 8px;
    text-align: left;
    margin-bottom: 0.2rem;
}


/* ================================================================================================*/
/* ==============================  TOOL TIPS GLOBAIS - Tippy.js ===================================*/
/* ================================================================================================*/

.tippy-box[data-theme~='qualipromo'] {
  background-color: #0c295a; /* azul institucional */
  color: #fff;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem;
  padding: 6px;
  max-width: none !important;
}

.tippy-box[data-theme~='qualipromo'] textarea {
  min-width: 480px;
  width: auto;
  height: 120px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
  resize: both;
  outline: none;
  overflow: auto;
}

.tippy-box[data-theme~='qualipromo'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #0c295a;
}


/* ========================== */
/* SweetAlert2 — Tema Qualipromo (compacto) */
/* ========================== */
.swal2-popup.qp-swal {
  border-radius: 14px;          /* deixa os cantos da janela arredondados em 14px */
  padding: 16px 18px;           /* espaçamento interno do topo e base: 16px vertical, 18px horizontal */
  width: min(90vw, 400px);      /* largura máxima: 92% da tela ou 540px, o que for menor */
}

.swal2-title.qp-swal-title {
  font-size: 1.5rem;            /* tamanho da fonte do título (≈24px) */
  line-height: 1.25;            /* altura da linha (25% maior que a fonte, boa legibilidade) */
  margin-bottom: 8px;           /* espaço abaixo do título */
  color: #0c295a;               /* azul institucional da Qualipromo */
}

/* corpo do modal com grid leve, reaproveitando seu padrão de formulário */
.swal2-html-container.qp-swal-body { 
  margin: 8px 0 4px;            /* espaçamento: em cima 8px, embaixo 4px, laterais 0 */
  padding: 0;                   /* remove qualquer padding interno do container */
}

.qp-swal-form {
  display: grid;                /* usa layout em grid */
  grid-template-columns: 1fr;   /* padrão: uma única coluna (100% de largura) */
  gap: 8px 16px;               /* espaçamento entre linhas 10px e entre colunas 16px */
}

/* Reuso direto da sua hierarquia de formulário */
.qp-swal-form .form-grupo label { 
  /* sem regras novas → herda estilo global de .form-grupo label */
  /* este seletor só força a aplicação no contexto do modal */
}

/* Largura padrão para campos de NOME (mais largos) */
.qp-swal-form .form-grupo input,
.qp-swal-form .form-grupo textarea {
  /* herda seu estilo global */
  max-width: 100px;      /* largura */
}

.qp-swal-form .form-grupo select{
  /* herda seu estilo global */
  width: 240px;      /* largura */
  
  
}

/* Largura menor para VALORES numéricos (via type) */
.qp-swal-form .form-grupo input[type="number"] {
  max-width: 120px;      /* valor: mais estreito */
  text-align: right;     /* alinha número à direita (opcional) */
}

/* Utilitárias (para quando o numérico vier como text por causa de máscara) */
.qp-swal-form .qp-input-money { 
  max-width: 90px !important;
  text-align: right;
}

/* ajusta largura mínima e máxima dos campos de nomes */
.qp-swal-form .qp-input-name  { 
  min-width: 220px !important;
  max-width: 300px !important;
}

/* duas colunas em telas médias+ */
@media (min-width: 768px) {
  .qp-swal-form { 
    grid-template-columns: 1fr 1fr;  /* em telas ≥768px, divide o grid em 2 colunas */
  }
}

/* Alinhar tudo à esquerda dentro dos modais (tema Qualipromo) */
.swal2-popup.qp-swal .qp-swal-form{
  justify-items: start;          /* grid: itens começam à esquerda */
}

.swal2-popup.qp-swal .qp-swal-form .form-grupo{
  text-align: left;
  align-items: flex-start;       /* se .form-grupo usar flex em algum lugar */
}

/* Inputs do Swal vinham com margin auto → tira para não centralizar */
.swal2-popup.qp-swal .qp-swal-form .swal2-input,
.swal2-popup.qp-swal .qp-swal-form select,
.swal2-popup.qp-swal .qp-swal-form textarea{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Labels garantidamente à esquerda */
.swal2-popup.qp-swal .qp-swal-form label{
  text-align: left;
}

/* Valores numéricos continuam à direita (se quiser) */
.swal2-popup.qp-swal .qp-swal-form .qp-input-money{
  text-align: right;
}

/* Nomes ocupam 100% da coluna (somente onde eu marcar com .qp-input-name) */
.swal2-popup.qp-swal .qp-swal-form .qp-input-name {
  width: 100%;
  max-width: none !important;   /* cancela o limite de 280px */
  box-sizing: border-box;
}

/* (Opcional) se algum nome vier como <select>, deixa full-width também */
.swal2-popup.qp-swal .qp-swal-form select.qp-input-name {
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
}

/* Personalização — afinar apenas os 2 campos de Valor Unitário (desktop) */
@media (min-width: 768px) {

  /* Campos de FORNECEDOR */
  .swal2-popup.qp-swal #persFornecedor1,
  .swal2-popup.qp-swal #persFornecedor2 {
    width: 230px !important;       /* largura maior */
    max-width: 230px !important;
    text-align: left;              /* padrão de texto */
  }
  /* Campos de VALOR UNITÁRIO */
  .swal2-popup.qp-swal #persValor1,
  .swal2-popup.qp-swal #persValor2 {
    width: 90px !important;       /* largura menor */
    max-width: 90px !important;
    text-align: right;             /* alinha valores à direita */
  }

}

/* Botões: aplica seu padrão institucional */
.swal2-actions .swal2-confirm.cotacao-botao-azul,
.swal2-actions .swal2-cancel.cotacao-botao-vermelho {
  min-width: 120px;             /* largura mínima dos botões para não ficarem pequenos demais */
  border-radius: 7px;           /* cantos arredondados, alinhado ao padrão dos botões do sistema */
}

/* =================== LISTAGEM DE COTAÇÃO (skin independente) =================== */
/* Use .cot-lista junto com .container-listagem para não interferir em clientes   */

.container-listagem.cot-lista .linha-titulo,
.container-listagem.cot-lista .linha-resultado {
  /* 6 colunas: Nº | Data | Cliente | Doc | Status | Ações */
  grid-template-columns: 90px 120px 1.6fr 1.1fr 140px 120px;
}

/* Ajustes visuais próprios (opcionais; herdam o resto do tema) */
.container-listagem.cot-lista .linha-titulo {
  background: #9aa5bb;
}
.container-listagem.cot-lista .linha-resultado {
  background: #eff0f1;
}

/* Badges específicas de cotação (texto colorido, seguindo padrão de clientes) */
.badge-status.badge-analise  { color: #3a5ea8; } /* EM ANÁLISE */
.badge-status.badge-aprovada { color: #0b932a; } /* APROVADA   */

/* Botão-link do número da cotação */
.link-like {
  background: none;
  border: none;
  padding: 0;
  color: #0c295a;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* Responsividade da lista de cotações */
@media (max-width: 900px) {
  .container-listagem.cot-lista .linha-titulo,
  .container-listagem.cot-lista .linha-resultado {
    grid-template-columns: 1fr 1fr; /* empilha em 2 colunas no mobile */
    font-size: 0.95rem;
  }
}