@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --azul: #073C72; --azul-escuro: #04213F; --azul-claro: #EDF2F8;
  --amarelo: #F5B400; --amarelo-escuro: #AA7D00;
  --branco: #FFFFFF; --off-white: #F7F9FC;
  --texto: #1B2430; --texto-suave: #5B6472; --borda: #E1E6ED;
  --verde: #1A9E6B; --vermelho: #D8483C; --roxo: #7B5FD1;
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Inter',sans-serif; background:var(--off-white); color:var(--texto); -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Fraunces',serif; margin:0;}
button{font-family:'Inter',sans-serif;}
a{color:var(--azul);}

/* LOGIN */
.login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg, var(--azul-escuro), var(--azul)); padding:20px;}
.login-card{background:var(--branco); border-radius:18px; padding:40px 36px; max-width:380px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.2); text-align:center;}
.login-card .brand{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:6px;}
.login-card .brand .dot{width:14px; height:14px; border-radius:50%; background:var(--amarelo); display:inline-block;}
.login-card h1{font-size:24px; color:var(--azul-escuro);}
.login-card .sub{font-size:13px; color:var(--texto-suave); margin:4px 0 26px;}
.field{text-align:left; margin-bottom:14px;}
.field label{display:block; font-size:11.5px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:var(--texto-suave); margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; padding:10px 12px; border:1.5px solid var(--borda); border-radius:9px; font-family:'Inter',sans-serif; font-size:14px; color:var(--texto); background:var(--branco);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--azul);}
.field textarea{min-height:70px; resize:vertical;}
.login-error{color:var(--vermelho); font-size:12.5px; margin-bottom:12px; display:none;}

.btn{font-weight:700; font-size:13.5px; cursor:pointer; border-radius:9px; padding:10px 18px; border:none; letter-spacing:.1px;}
.btn-primary{background:var(--azul); color:var(--branco);}
.btn-primary:hover{background:var(--azul-escuro);}
.btn-amarelo{background:var(--amarelo); color:var(--texto);}
.btn-amarelo:hover{background:var(--amarelo-escuro);}
.btn-ghost{background:transparent; color:var(--azul); border:1.5px solid var(--azul);}
.btn-ghost:hover{background:var(--azul-claro);}
.btn-danger{background:transparent; color:var(--vermelho); border:1.5px solid var(--vermelho); padding:6px 12px; font-size:12px;}
.btn-danger:hover{background:#FDEEED;}
.btn-sm{padding:6px 12px; font-size:12px;}
.btn:disabled{opacity:.5; cursor:default;}

/* SHELL */
header.topbar{background:var(--branco); border-bottom:1px solid var(--borda); padding:14px 24px; position:sticky; top:0; z-index:20;}
.topbar-inner{max-width:1680px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand-mini{display:flex; align-items:center; gap:9px; cursor:pointer;}
.brand-mini .dot{width:11px; height:11px; border-radius:50%; background:var(--amarelo);}
.brand-mini .txt{font-family:'Fraunces',serif; font-weight:700; font-size:18px; color:var(--azul-escuro);}
.brand-mini .txt2{font-size:10.5px; color:var(--texto-suave); letter-spacing:.4px; text-transform:uppercase;}
.topbar-nav{display:flex; gap:22px;}
.topbar-nav a{font-size:13px; font-weight:600; color:var(--texto-suave); text-decoration:none;}
.topbar-nav a:hover{color:var(--azul);}
.topbar-dir{display:flex; align-items:center; gap:14px; font-size:13px; color:var(--texto-suave);}
.papel-badge{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:3px 9px; border-radius:20px; background:var(--azul-claro); color:var(--azul-escuro);}
.alerta-card{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 16px; border-radius:10px; margin-bottom:8px; border-left:4px solid var(--vermelho); background:#FDF6F5;}
.alerta-card.tipo-nps_sugerida{border-left-color:var(--roxo); background:#F7F4FD;}
.alerta-card.tipo-boletim_atrasado{border-left-color:var(--amarelo-escuro); background:#FFF9EC;}
.alerta-card .tipo-lbl{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--texto-suave); margin-bottom:2px;}
.comentarios-secao{background:var(--branco); border:1px solid var(--borda); border-radius:14px; padding:18px 22px; margin-bottom:18px;}
.comentario-item{background:var(--off-white); border-radius:9px; padding:10px 13px; margin-bottom:8px; font-size:13px;}
.comentario-meta{font-size:11px; color:var(--texto-suave); margin-top:4px;}
.prioridade-toggle{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--texto-suave);}
.prioridade-toggle.ativo{color:var(--vermelho);}
.badge-prioridade{background:#FDEEED; color:var(--vermelho); padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700;}
#btn-logout{background:transparent; border:1px solid var(--borda); color:var(--texto-suave); border-radius:8px; padding:7px 14px; cursor:pointer; font-size:12.5px;}
#btn-logout:hover{border-color:var(--vermelho); color:var(--vermelho);}

.wrap{max-width:1680px; margin:0 auto; padding:24px 20px 60px;}
.card{background:var(--branco); border:1px solid var(--borda); border-radius:14px; padding:20px 22px; margin-bottom:20px;}
.card h3{font-size:16px; color:var(--azul-escuro); margin-bottom:14px;}
.row{display:flex; gap:14px; flex-wrap:wrap;}
.row > .field{flex:1; min-width:160px;}

.section-titulo{font-size:22px; color:var(--azul-escuro); margin:26px 0 4px;}
.section-sub{font-size:12.5px; color:var(--texto-suave); margin-bottom:14px;}

/* PAINEL GERAL — gráfico de etapas da jornada (compacto) */
.etapas-legenda{display:flex; gap:12px; font-size:11px; color:var(--texto-suave);}
.etapas-legenda span{display:flex; align-items:center; gap:4px;}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.dot-bronze, .etapa-seg.dot-bronze{background:#9AA3AE;}
.dot-prata, .etapa-seg.dot-prata{background:var(--azul);}
.dot-ouro, .etapa-seg.dot-ouro{background:var(--amarelo);}
.dot-sem, .etapa-seg.dot-sem{background:var(--borda);}
.etapas-grafico{display:flex; flex-direction:column; gap:6px;}
.etapa-linha{display:flex; align-items:center; gap:10px; font-size:11.5px;}
.etapa-nome{width:190px; flex-shrink:0; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.etapa-barra-track{flex:1; height:12px; background:var(--off-white); border-radius:6px; overflow:hidden;}
.etapa-barra-fill{height:100%; display:flex; min-width:2px;}
.etapa-seg{display:block; height:100%;}
.etapa-total{width:22px; text-align:right; font-weight:700; color:var(--azul-escuro); flex-shrink:0;}

/* PAINEL GERAL — layout principal + lateral */
.painel-geral-grid{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start;}
.painel-geral-principal{min-width:0;}
.painel-geral-lateral .card{margin-bottom:20px;}
.painel-geral-lateral .card:last-child{margin-bottom:0;}
@media (max-width:980px){ .painel-geral-grid{grid-template-columns:1fr;} }

/* PAINEL GERAL — TABELA */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px;}
.toolbar input, .toolbar select{padding:9px 12px; border:1.5px solid var(--borda); border-radius:9px; font-size:13px; background:var(--branco);}
.toolbar input[type=text]{flex:1; min-width:200px;}
.tabela-wrap{overflow-x:auto; border:1px solid var(--borda); border-radius:12px; background:var(--branco);}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; padding:12px 14px; background:var(--azul-claro); color:var(--azul-escuro); font-size:11px; text-transform:uppercase; letter-spacing:.3px; font-weight:700; cursor:pointer; white-space:nowrap;}
th:hover{background:#DCEAFB;}
td{padding:12px 14px; border-top:1px solid var(--borda); vertical-align:middle;}
.painel-geral-principal .tabela-wrap table{font-size:12px;}
.painel-geral-principal .tabela-wrap th{padding:9px 8px; font-size:10px;}
.painel-geral-principal .tabela-wrap td{padding:9px 8px; white-space:nowrap;}
.painel-geral-principal .tabela-wrap .badge{padding:2px 8px; font-size:10.5px;}
tr.linha-cliente{cursor:pointer;}
tr.linha-cliente:hover{background:var(--off-white);}
.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap;}
.badge-risco{background:#FDEEED; color:var(--vermelho);}
.badge-ok{background:#E7F6EF; color:var(--verde);}
.badge-verde{background:#E7F6EF; color:var(--verde);}
.badge-amarelo{background:#FFF7E0; color:var(--amarelo-escuro);}
.badge-vermelho{background:#FDEEED; color:var(--vermelho);}
.badge-azul{background:var(--azul-claro); color:var(--azul-escuro);}
.badge-cinza{background:#F0F1F4; color:var(--texto-suave);}
.empty-state{padding:40px 20px; text-align:center; color:var(--texto-suave); font-size:13.5px;}

/* PERFIL DO CLIENTE */
.perfil-header{background:var(--branco); border:1px solid var(--borda); border-radius:14px; padding:20px 24px; margin-bottom:18px; position:sticky; top:70px; z-index:10;}
.perfil-header .voltar{font-size:12.5px; color:var(--azul); cursor:pointer; margin-bottom:8px; display:inline-block;}
.perfil-header h2{font-size:22px; color:var(--azul-escuro); margin-bottom:6px;}
.perfil-header-grid{display:flex; gap:24px; flex-wrap:wrap; font-size:12.5px; color:var(--texto-suave);}
.perfil-header-grid b{color:var(--texto); font-weight:600;}

.abas{display:flex; gap:4px; overflow-x:auto; margin-bottom:18px; border-bottom:2px solid var(--borda);}
.aba-btn{padding:10px 16px; font-size:13px; font-weight:600; color:var(--texto-suave); background:none; border:none; border-bottom:3px solid transparent; cursor:pointer; white-space:nowrap;}
.aba-btn.ativa{color:var(--azul); border-bottom-color:var(--amarelo);}
.aba-btn:hover{color:var(--azul);}

.lista-livre{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.lista-livre-item{display:flex; justify-content:space-between; align-items:center; background:var(--off-white); border-radius:9px; padding:9px 13px; font-size:13px;}
.add-row{display:flex; gap:8px;}
.add-row input{flex:1;}

.jornada-etapa{display:flex; gap:14px; align-items:flex-start; padding:14px; border:1px solid var(--borda); border-radius:10px; margin-bottom:10px;}
.jornada-etapa .num{width:28px; height:28px; border-radius:50%; background:var(--azul-claro); color:var(--azul-escuro); font-weight:700; font-size:12.5px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.jornada-etapa-body{flex:1;}
.jornada-etapa-titulo{font-weight:700; font-size:14px; margin-bottom:8px;}
.status-select{padding:5px 10px; border-radius:20px; font-size:11.5px; font-weight:700; border:1.5px solid var(--borda); cursor:pointer;}
.status-select.nao_iniciado{color:var(--texto-suave);}
.status-select.em_andamento{color:var(--amarelo-escuro); border-color:var(--amarelo);}
.status-select.concluido{color:var(--verde); border-color:var(--verde);}

.marco-item{display:flex; gap:12px; align-items:center; padding:10px 13px; background:var(--off-white); border-radius:9px; margin-bottom:8px; font-size:13px;}
.marco-item .dia{font-weight:700; color:var(--azul); min-width:56px;}
.marco-item.realizado .dia, .marco-item.realizado .desc{text-decoration:line-through; opacity:.55;}

.timeline-item{position:relative; padding:4px 0 16px 22px; border-left:2px solid var(--borda); margin-left:6px;}
.timeline-item:last-child{border-color:transparent;}
.timeline-item::before{content:''; position:absolute; left:-6px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--amarelo);}
.timeline-topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;}
.timeline-tipo{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--azul);}
.timeline-data{font-size:12px; color:var(--texto-suave);}
.timeline-desc{font-size:13px; margin-top:4px; line-height:1.5;}
.timeline-meta{font-size:11.5px; color:var(--texto-suave); margin-top:4px;}

.indicador-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
@media (max-width:760px){ .indicador-grid{grid-template-columns:repeat(2,1fr);} }
.indicador-card{text-align:center; background:var(--off-white); border-radius:12px; padding:16px 10px;}
.indicador-card .num{font-family:'Fraunces',serif; font-weight:700; font-size:26px; color:var(--azul-escuro);}
.indicador-card .lbl{font-size:10.5px; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.3px; margin-top:2px;}

@media (max-width:700px){
  .perfil-header{position:static;}
  .row{flex-direction:column;}
  .row > .field{min-width:0;}
}

.modal-overlay{position:fixed; inset:0; background:rgba(4,33,63,.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px;}
.modal-overlay[hidden]{display:none;}
.modal-box{background:var(--branco); border-radius:16px; padding:28px; max-width:480px; width:100%; max-height:80vh; overflow-y:auto; box-shadow:0 20px 50px rgba(0,0,0,.25);}
.tarefa-item{border-left:3px solid var(--borda); padding:10px 14px; margin-bottom:8px; border-radius:0 8px 8px 0; background:var(--off-white);}
.tarefa-item.atrasada{border-left-color:var(--vermelho); background:#FDF6F5;}
.tarefa-item.criticidade-critica{border-left-color:var(--vermelho);}
.tarefa-item.criticidade-alta{border-left-color:var(--amarelo-escuro);}
.tarefa-item.concluida{opacity:.55;}

.elogios-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px;}
.medalha-card{position:relative; background:linear-gradient(155deg, #FFFDF5, var(--branco)); border:1px solid #F0DFA0; border-radius:14px; padding:18px 16px 16px; box-shadow:0 2px 8px rgba(245,180,0,.12);}
.medalha-icone{font-size:22px; line-height:1; margin-bottom:8px;}
.medalha-cliente{font-family:'Fraunces',serif; font-weight:700; color:var(--azul-escuro); font-size:15px; margin-bottom:4px;}
.medalha-texto{font-size:13px; font-style:italic; color:var(--texto); line-height:1.5;}
.medalha-data{font-size:11px; color:var(--texto-suave); margin-top:8px;}
.medalha-evidencia{font-size:11px; margin-top:4px;}

/* Calendário de ações */
.cal-grid{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; margin-top:10px;}
.cal-dia-semana{font-size:11px; font-weight:700; color:var(--texto-suave); text-transform:uppercase; text-align:center; padding-bottom:4px;}
.cal-dia{background:var(--branco); border:1px solid var(--borda); border-radius:10px; min-height:96px; padding:6px; display:flex; flex-direction:column; gap:4px;}
.cal-dia.cal-fora{background:transparent; border:none;}
.cal-dia.cal-hoje{border-color:var(--azul); box-shadow:inset 0 0 0 1px var(--azul);}
.cal-dia-numero{font-size:11px; font-weight:700; color:var(--texto-suave);}
.cal-dia-acoes{display:flex; flex-direction:column; gap:3px; overflow-y:auto;}
.cal-chip{font-size:10.5px; line-height:1.3; padding:3px 6px; border-radius:6px; cursor:pointer; background:var(--off-white); border-left:3px solid var(--texto-suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cal-chip:hover{background:var(--azul-claro);}
.cal-chip.status-pendente{border-left-color:var(--texto-suave);}
.cal-chip.status-em_andamento{border-left-color:var(--amarelo-escuro);}
.cal-chip.status-concluida{border-left-color:var(--verde); opacity:.7;}
@media (max-width: 900px){
  .cal-grid{grid-template-columns:repeat(7, minmax(60px,1fr)); overflow-x:auto;}
  .cal-dia{min-height:76px;}
}