/* =====================================================================
   AMS Soluções Digitais, Portal do Cliente
   Estilos customizados sobre o Bootstrap 5
   ===================================================================== */

:root {
    --ams-primaria:   #0A58CA;
    --ams-primaria-d: #084298;
    --ams-fundo:      #F8FAFC;
    --ams-card:       #FFFFFF;
    --ams-borda:      #E2E2E2;
    --ams-sucesso:    #10B981;
    --ams-andamento:  #F59E0B;
    --ams-pendente:   #94A3B8;
    --ams-texto:      #1E293B;
    --ams-texto-mut:  #64748B;
    --ams-raio:       12px;
    --ams-sombra:     0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
}

body {
    background-color: var(--ams-fundo);
    color: var(--ams-texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
}

a { color: var(--ams-primaria); }

/* ---------------------------------------------------------------- Header */
.ams-navbar {
    background-color: var(--ams-primaria);
    box-shadow: 0 2px 8px rgba(10, 88, 202, .18);
}
.ams-navbar .navbar-brand,
.ams-navbar .nav-link,
.ams-navbar .navbar-text { color: #fff; }
.ams-navbar .nav-link:hover,
.ams-navbar .nav-link.ativo { color: #DBEAFE; }
.ams-navbar .nav-link.ativo { font-weight: 600; }

.ams-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    background: #fff;
    color: var(--ams-primaria);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: -.5px;
    margin-right: .6rem;
}

/* ----------------------------------------------------------------- Cards */
.card-ams {
    background: var(--ams-card);
    border: 1px solid var(--ams-borda);
    border-radius: var(--ams-raio);
    box-shadow: var(--ams-sombra);
}
.card-ams .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ams-borda);
    font-weight: 600;
    padding: 1rem 1.25rem;
}
.card-ams .card-body { padding: 1.25rem; }

.titulo-secao {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ams-texto);
}
.texto-mut { color: var(--ams-texto-mut); }

/* ----------------------------------------------------------------- Botões */
.btn-ams {
    background-color: var(--ams-primaria);
    border-color: var(--ams-primaria);
    color: #fff;
    font-weight: 500;
}
.btn-ams:hover, .btn-ams:focus {
    background-color: var(--ams-primaria-d);
    border-color: var(--ams-primaria-d);
    color: #fff;
}
.btn-outline-ams {
    color: var(--ams-primaria);
    border-color: var(--ams-primaria);
    font-weight: 500;
}
.btn-outline-ams:hover {
    background-color: var(--ams-primaria);
    color: #fff;
}

/* ---------------------------------------------------------------- Badges */
.badge-ams {
    display: inline-block;
    padding: .32rem .7rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.badge-sucesso   { background: rgba(16, 185, 129, .13); color: #047857; }
.badge-andamento { background: rgba(245, 158, 11, .15); color: #B45309; }
.badge-pendente  { background: rgba(148, 163, 184, .18); color: #475569; }
.badge-pausado   { background: rgba(100, 116, 139, .18); color: #334155; }

/* --------------------------------------------------------- Barra progresso */
.progress-ams {
    height: 14px;
    background-color: #E8EDF3;
    border-radius: 999px;
    overflow: hidden;
}
.progress-ams .progress-bar {
    background-color: var(--ams-primaria);
    border-radius: 999px;
    transition: width .6s ease;
}
.progress-ams .progress-bar.completo { background-color: var(--ams-sucesso); }

/* -------------------------------------------------------------- Estatística */
.stat-card { text-align: left; }
.stat-valor {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ams-primaria);
}
.stat-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ams-texto-mut);
    font-weight: 600;
}

/* ------------------------------------------------------------- Login */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1100px 480px at 50% -10%, rgba(10, 88, 202, .10), transparent 65%),
        var(--ams-fundo);
}
.login-card { width: 100%; max-width: 420px; }
.login-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.5rem;
}
.login-marca .ams-logo {
    width: 56px; height: 56px;
    font-size: 1.15rem;
    background: var(--ams-primaria);
    color: #fff;
    margin: 0;
}

/* ------------------------------------------------------------ Timeline */
.timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: .5rem 0 .5rem 2.25rem;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--ams-borda), rgba(226, 226, 226, .25));
}
.timeline-item {
    position: relative;
    padding-bottom: 1.75rem;
}
.timeline-item:last-child { padding-bottom: .25rem; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -2.25rem;
    top: .35rem;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--ams-pendente);
    box-shadow: 0 0 0 4px var(--ams-card);
}
.timeline-item.etapa-concluido::before    { border-color: var(--ams-sucesso); }
.timeline-item.etapa-andamento::before    { border-color: var(--ams-andamento); }
.timeline-item.etapa-andamento::after {
    content: "";
    position: absolute;
    left: -2.25rem;
    top: .35rem;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 3px solid var(--ams-andamento);
    animation: pulso 1.8s ease-out infinite;
}
@keyframes pulso {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.9); opacity: 0;  }
}
@media (prefers-reduced-motion: reduce) {
    .timeline-item.etapa-andamento::after { animation: none; opacity: 0; }
}

.timeline-card {
    background: var(--ams-card);
    border: 1px solid var(--ams-borda);
    border-radius: var(--ams-raio);
    padding: 1rem 1.15rem;
    box-shadow: var(--ams-sombra);
}
.timeline-titulo { font-weight: 600; font-size: 1rem; margin: 0; }
.timeline-data {
    font-size: .78rem;
    color: var(--ams-texto-mut);
}
.timeline-desc {
    margin: .6rem 0 0;
    color: #334155;
    font-size: .93rem;
    white-space: pre-line;   /* preserva quebras de linha digitadas pelo admin */
}

/* --------------------------------------------------------------- Tabelas */
.table-ams { margin: 0; }
.table-ams > thead > tr > th {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ams-texto-mut);
    font-weight: 600;
    border-bottom: 1px solid var(--ams-borda);
    background: #FBFCFE;
}
.table-ams > tbody > tr > td { vertical-align: middle; }

/* ---------------------------------------------------------------- Estado vazio */
.vazio {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ams-texto-mut);
}
.vazio .icone { font-size: 2.5rem; opacity: .35; }

/* ---------------------------------------------------------------- Rodapé */
.ams-footer {
    border-top: 1px solid var(--ams-borda);
    color: var(--ams-texto-mut);
    font-size: .84rem;
    padding: 1.5rem 0;
    margin-top: 3rem;
}

/* ---------------------------------------------------------- Etapas (cliente) */
.etapas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: etapa;
}
.etapa-item {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 0 0 1.5rem 0;
}
/* linha vertical ligando os marcadores */
.etapa-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 4px;
    width: 2px;
    background: var(--ams-borda);
}
.etapa-item.etapa-ok:not(:last-child)::before { background: var(--ams-sucesso); opacity: .45; }

.etapa-marcador {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .82rem;
    background: #fff;
    border: 2px solid var(--ams-pendente);
    color: var(--ams-texto-mut);
    z-index: 1;
}
.etapa-item.etapa-ok .etapa-marcador {
    background: var(--ams-sucesso);
    border-color: var(--ams-sucesso);
    color: #fff;
}
.etapa-item.etapa-andando .etapa-marcador {
    border-color: var(--ams-andamento);
    color: #B45309;
}
.etapa-item.etapa-atrasada .etapa-marcador { border-color: #DC2626; color: #B91C1C; }

.etapa-conteudo {
    flex: 1 1 auto;
    min-width: 0;
    background: #FBFCFE;
    border: 1px solid var(--ams-borda);
    border-radius: var(--ams-raio);
    padding: .85rem 1rem;
}
.etapa-item.etapa-andando .etapa-conteudo { border-color: rgba(245, 158, 11, .45); }
.etapa-item.etapa-atrasada .etapa-conteudo { border-color: rgba(220, 38, 38, .40); }
.etapa-nome { font-weight: 600; }

.progress-fina { height: 8px; }

/* Etiqueta que liga uma atualização à sua etapa */
.etapa-tag {
    display: inline-block;
    background: rgba(10, 88, 202, .10);
    color: var(--ams-primaria-d);
    border-radius: 999px;
    padding: .15rem .55rem;
    font-size: .72rem;
    font-weight: 600;
}

/* ------------------------------------------------- Atraso / apoio semântico */
.badge-atraso   { background: rgba(220, 38, 38, .13); color: #B91C1C; }
.texto-atraso   { color: #DC2626; }
.texto-sucesso  { color: #047857; }

/* ------------------------------------------------- Controles da tabela admin */
.ordem-num {
    font-weight: 700;
    color: var(--ams-primaria);
}
.btn-ordem, .btn-excluir {
    background: none;
    border: 1px solid var(--ams-borda);
    border-radius: 6px;
    width: 24px; height: 24px;
    line-height: 1;
    padding: 0;
    color: var(--ams-texto-mut);
    cursor: pointer;
}
.btn-ordem:hover:not(:disabled) {
    border-color: var(--ams-primaria);
    color: var(--ams-primaria);
}
.btn-ordem:disabled { opacity: .3; cursor: not-allowed; }
.btn-excluir { border-color: transparent; color: #DC2626; font-weight: 700; }
.btn-excluir:hover { border-color: #DC2626; background: rgba(220, 38, 38, .08); }

.form-range { accent-color: var(--ams-primaria); }

/* --------------------------------------------------------------- Formulários */
.form-label { font-weight: 500; font-size: .9rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--ams-primaria);
    box-shadow: 0 0 0 .2rem rgba(10, 88, 202, .15);
}
.credencial-box {
    background: #F1F5F9;
    border: 1px dashed var(--ams-borda);
    border-radius: 8px;
    padding: .75rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88rem;
}

@media print {
    .ams-navbar, .ams-footer, .btn { display: none !important; }
}

/* =====================================================================
   COMUNICADOS, novidades do portal e avisos externos
   ===================================================================== */

/* Selos por tipo, na mesma linguagem visual dos badges de status */
.com-novidade   { background: rgba(10, 88, 202, .12);  color: #084298; }
.com-melhoria   { background: rgba(16, 185, 129, .13); color: #047857; }
.com-correcao   { background: rgba(100, 116, 139, .18); color: #334155; }
.com-manutencao { background: rgba(245, 158, 11, .15); color: #B45309; }
.com-alerta     { background: rgba(220, 38, 38, .12);  color: #B91C1C; }

/* Contador de não lidos no menu */
.nav-badge {
    display: inline-block;
    min-width: 18px;
    padding: .1rem .35rem;
    margin-left: .25rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ams-primaria);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    vertical-align: text-top;
}

/* Selo "novo" na tela de novidades */
.badge-novo {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: var(--ams-primaria);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}

/* ------------------------------------------------- Destaque no dashboard */
.destaque-novidades .card-header { color: var(--ams-texto); }

.destaque-item {
    padding-bottom: .85rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--ams-borda);
}
.destaque-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.destaque-titulo {
    display: inline-block;
    font-weight: 600;
    color: var(--ams-texto);
    text-decoration: none;
}
.destaque-titulo:hover { color: var(--ams-primaria); text-decoration: underline; }

/* ------------------------------------------------------- Feed e listagem */
.comunicado-card { border-left: 4px solid transparent; }

/* Fixado ganha barra lateral; despublicado/agendado fica esmaecido para o
   admin distinguir de relance o que está no ar e o que não está. */
.comunicado-card.fixado,
.comunicado-item.fixado { border-left: 4px solid var(--ams-primaria); }

.comunicado-card.apagado,
.comunicado-item.apagado { opacity: .62; }

.comunicado-corpo {
    color: var(--ams-texto);
    font-size: .94rem;
    line-height: 1.65;
    white-space: normal;      /* as quebras vêm de nl2br(), não de pre-wrap */
    word-break: break-word;
}

.comunicado-item {
    padding: .9rem 0 .9rem .75rem;
    border-bottom: 1px solid var(--ams-borda);
}
.comunicado-item:last-child { border-bottom: 0; }

/* =====================================================================
   HELPDESK, fila, thread e mensagens
   ===================================================================== */

/* Badge de alerta no menu (chamados sem resposta) */
.nav-badge.alerta { background: #FEE2E2; color: #B91C1C; }

.chamado-protocolo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ams-texto-mut);
    letter-spacing: .02em;
}

/* Prioridade: pastilha discreta, não compete com o selo de status */
.chamado-prio {
    display: inline-block;
    padding: .18rem .5rem;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
}
.prio-urgente { background: rgba(220, 38, 38, .10);  color: #B91C1C; border-color: rgba(220, 38, 38, .35); }
.prio-alta    { background: rgba(245, 158, 11, .12); color: #B45309; border-color: rgba(245, 158, 11, .35); }
.prio-normal  { background: rgba(100, 116, 139, .12); color: #475569; }
.prio-baixa   { background: rgba(148, 163, 184, .12); color: #64748B; }

/* Linha da fila, o card inteiro é clicável */
.chamado-linha {
    display: block;
    padding: .9rem .75rem;
    border-bottom: 1px solid var(--ams-borda);
    border-left: 3px solid transparent;
    color: inherit;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease;
}
.chamado-linha:last-child { border-bottom: 0; }
.chamado-linha:hover { background: #F1F5F9; color: inherit; }
.chamado-linha.sla-estourado { border-left-color: #DC2626; }

/* ------------------------------------------------------------- Thread */
.msg {
    padding: .85rem 1rem;
    margin-bottom: .85rem;
    border-radius: var(--ams-raio);
    border: 1px solid var(--ams-borda);
    background: #fff;
}
.msg:last-child { margin-bottom: 0; }

/* Cliente à esquerda em cinza, equipe destacada em azul: dá para saber de
   quem é a fala sem ler o nome. */
.msg-cliente { background: #F8FAFC; }
.msg-equipe  { background: rgba(10, 88, 202, .05); border-color: rgba(10, 88, 202, .22); }

/* Nota interna: listrada, para ninguém confundir com resposta ao cliente */
.msg-interna {
    background: repeating-linear-gradient(
        45deg, #FFFBEB, #FFFBEB 10px, #FEF3C7 10px, #FEF3C7 20px
    );
    border-color: #FCD34D;
}

.msg-cabecalho {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
}

.msg-tag {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .4rem;
    border-radius: 4px;
    background: var(--ams-primaria);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}
.msg-tag.interna { background: #B45309; }

.msg-corpo {
    font-size: .94rem;
    line-height: 1.6;
    color: var(--ams-texto);
    word-break: break-word;
}

/* =====================================================================
   EQUIPE, gestão de usuários internos
   ===================================================================== */
.equipe-item {
    padding: .85rem .25rem;
    border-bottom: 1px solid var(--ams-borda);
}
.equipe-item:last-child { border-bottom: 0; }

/* Acesso desativado fica esmaecido, mas legível: o admin precisa
   continuar enxergando quem está fora para poder reativar. */
.equipe-item.inativo { opacity: .55; }

/* =====================================================================
   ORÇAMENTOS, simulador
   ===================================================================== */

/* Escala como cartão selecionável, não como radio solto */
.escala-opcao {
    display: block;
    position: relative;
    padding: .9rem;
    border: 2px solid var(--ams-borda);
    border-radius: var(--ams-raio);
    cursor: pointer;
    height: 100%;
    transition: border-color .12s ease, background-color .12s ease;
}
.escala-opcao:hover  { border-color: #BFD4F2; }
.escala-opcao.ativa  { border-color: var(--ams-primaria); background: rgba(10, 88, 202, .04); }
.escala-opcao input  { position: absolute; top: .7rem; right: .7rem; }

.escala-nome  { display: block; font-weight: 700; }
.escala-preco { display: block; font-size: 1.15rem; font-weight: 700; color: var(--ams-primaria); }
.escala-preco small { font-size: .72rem; font-weight: 500; color: var(--ams-texto-mut); }

/* Linha de módulo: checkbox + descrição + preço alinhados */
.modulo-linha {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    align-items: flex-start;
    padding: .7rem .5rem;
    border-bottom: 1px solid var(--ams-borda);
    cursor: pointer;
}

/* min-width:0 deixa o texto encolher. Sem isso ele empurra a coluna de
   preço até esmagá-la, e o valor quebra linha no meio do "R$ 197,00". */
.modulo-linha > .modulo-texto {
    flex: 1 1 14rem;
    min-width: 0;
}

/* A coluna de preço não encolhe e não quebra: é o número que o vendedor lê. */
.modulo-linha > .modulo-preco {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 8.5rem;
    text-align: right;
    white-space: nowrap;
}

.modulo-valor {
    display: block;
    font-weight: 600;
    line-height: 1.25;
}
.modulo-valor small {
    font-weight: 500;
    font-size: .72rem;
    color: var(--ams-texto-mut);
}

/* Em tela estreita o preço desce para a própria linha, ainda à direita */
@media (max-width: 420px) {
    .modulo-linha > .modulo-preco { text-align: left; min-width: 0; margin-left: 1.9rem; }
}
.modulo-linha:last-of-type { border-bottom: 0; }
.modulo-linha:hover { background: #F8FAFC; }
.modulo-linha.ativo { background: rgba(10, 88, 202, .04); }


.orc-destaque {
    padding: .6rem 0;
}
.orc-valor {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ams-primaria);
    line-height: 1.2;
}
.orc-riscado { text-decoration: line-through; }

/* Memória de cálculo, densa de propósito, é conferência */
.orc-memoria td { padding: .28rem .2rem; font-size: .86rem; border: 0; }
.orc-memoria tr.border-top td { border-top: 1px solid var(--ams-borda) !important; padding-top: .45rem; }

.orc-item {
    padding: 1rem .25rem;
    border-bottom: 1px solid var(--ams-borda);
}
.orc-item:last-child { border-bottom: 0; }

.orc-decisao { min-width: 210px; }

/* Escala desativada na venda avulsa: fica visível mas claramente fora de uso */
.escala-desligada { opacity: .45; pointer-events: none; }