/* ---- Fontes Poppins (servidas localmente) ---- */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/poppins-700.woff2") format("woff2"); }

:root {
  --liu: #1A20CD;           /* azul da marca */
  --liu-claro: #3b40e0;
  --azul-escuro: #0d1033;   /* fundo profundo estilo facebook escurecido */
  --azul-nav: #141a5c;      /* barra lateral */
  --azul-topo: #10145c;
  --card: #ffffff;
  --fundo: #eef1f9;
  --texto: #1c1e33;
  --texto-suave: #6b7086;
  --borda: #dfe3f0;
  --ok-bg: #e4f6ec; --ok-fg: #1c7a44;
  --erro-bg: #fde7e7; --erro-fg: #b02222;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--liu); text-decoration: none; }

/* ==================== LAYOUT APP (com sidebar) ==================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px; background: var(--azul-nav); color: #fff;
  display: flex; flex-direction: column; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-logo {
  padding: 22px 22px 18px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-logo img { height: 34px; display: block; }

.nav-grupo { padding: 16px 14px 4px; }
.nav-grupo-titulo {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.45); padding: 0 10px 8px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 9px; color: rgba(255,255,255,.85);
  font-size: .93rem; font-weight: 500; transition: background .15s;
}
.nav-item:hover { background: rgba(255,255,255,.08); }
.nav-item.ativo { background: var(--liu); color: #fff; }
.nav-item .ic { width: 20px; text-align: center; font-size: 1.05rem; }

.sidebar-rodape {
  margin-top: auto; padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem; color: rgba(255,255,255,.6);
}
.sidebar-rodape a { color: #fff; opacity: .8; }

/* ---- area principal ---- */
.principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topo {
  background: var(--card); border-bottom: 1px solid var(--borda);
  padding: 0 30px; height: 62px; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 5;
}
.topo h1 { font-size: 1.15rem; font-weight: 600; }
.topo-usuario { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--liu);
  color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .85rem;
}

.conteudo { padding: 30px; max-width: 1100px; width: 100%; }

/* ---- cartoes / metricas ---- */
.metricas { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 18px; margin-bottom: 26px; }
.metrica {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: 14px; padding: 22px 24px;
}
.metrica .rotulo { color: var(--texto-suave); font-size: .85rem; font-weight: 500; }
.metrica .valor { font-size: 2.1rem; font-weight: 700; color: var(--liu); margin-top: 4px; }

.card {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: 14px; overflow: hidden;
}
.card-cab {
  padding: 18px 24px; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: space-between;
}
.card-cab h2 { font-size: 1.05rem; font-weight: 600; }
.card-corpo { padding: 24px; }

/* ---- tabela ---- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 24px; text-align: left; font-size: .9rem; }
th { color: var(--texto-suave); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--borda); }
td { border-bottom: 1px solid var(--borda); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f7f8fd; }

.badge { padding: 3px 11px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge.sim { background: var(--ok-bg); color: var(--ok-fg); }
.badge.nao { background: #eceef4; color: var(--texto-suave); }

/* ---- formularios ---- */
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: .85rem; font-weight: 500;
  margin-bottom: 7px; color: var(--texto); }
.campo input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--borda);
  border-radius: 9px; font-size: .95rem; font-family: inherit; background: #fbfbfe;
}
.campo input:focus { outline: none; border-color: var(--liu);
  box-shadow: 0 0 0 3px rgba(26,32,205,.12); background: #fff; }
.campo .dica { font-size: .78rem; color: var(--texto-suave); margin-top: 5px; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.check { display: flex; align-items: center; gap: 9px; }
.check input { width: auto; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 22px; border-radius: 9px; border: 0;
  font-family: inherit; font-size: .93rem; font-weight: 600;
  background: var(--liu); color: #fff; transition: background .15s;
}
.btn:hover { background: var(--liu-claro); }
.btn.secundario { background: #eceef6; color: var(--texto); }
.btn.secundario:hover { background: #e0e3f0; }
.acoes { display: flex; gap: 12px; margin-top: 8px; }

/* ---- flash ---- */
.flash { padding: 12px 16px; border-radius: 9px; margin-bottom: 14px; font-size: .88rem; font-weight: 500; }
.flash.erro { background: var(--erro-bg); color: var(--erro-fg); }
.flash.ok { background: var(--ok-bg); color: var(--ok-fg); }

.vazio { text-align: center; color: var(--texto-suave); padding: 40px 20px; }

/* ==================== LOGIN ==================== */
.login-tela {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
}
.login-arte {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(150deg, var(--liu), #10145c 90%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; padding: 40px; text-align: center;
}
.login-arte img { height: 92px; margin-bottom: 26px; }
.login-arte p { max-width: 320px; opacity: .85; font-weight: 300; line-height: 1.6; }
.login-form-lado { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--card); }
.login-box { width: 100%; max-width: 360px; }
.login-box h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 6px; }
.login-box .sub { color: var(--texto-suave); font-size: .9rem; margin-bottom: 28px; }
.login-box .btn { width: 100%; justify-content: center; margin-top: 6px; }

@media (max-width: 860px) {
  .login-tela { grid-template-columns: 1fr; }
  .login-arte { display: none; }
  .sidebar { position: fixed; left: -260px; z-index: 50; transition: left .2s; }
  .sidebar.aberta { left: 0; }
  .linha { grid-template-columns: 1fr; }
  .menu-btn { display: inline-flex !important; }
}
.menu-btn { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--texto); }

/* ---------------- Atendimento: kanban, chat, dashboard ---------------- */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .kanban { grid-template-columns: 1fr; } }
.coluna { background: var(--card); border: 1px solid var(--borda); border-radius: 14px; padding: 12px; min-height: 120px; }
.coluna h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.coluna h3 .cont { background: #eceef4; color: var(--texto-suave); border-radius: 20px; padding: 1px 9px; font-size: .72rem; }
.col-pend  { border-top: 3px solid #b0b4c8; }
.col-dist  { border-top: 3px solid #e0a52a; }
.col-and   { border-top: 3px solid var(--liu); }
.col-fim   { border-top: 3px solid #1c7a44; }
.cartao { display: block; background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 11px 12px; margin-bottom: 9px; text-decoration: none; color: var(--texto); transition: box-shadow .15s, transform .05s; }
.cartao:hover { box-shadow: 0 4px 14px rgba(20,26,92,.10); transform: translateY(-1px); }
.cartao .nome { font-weight: 600; font-size: .92rem; }
.cartao .meta { color: var(--texto-suave); font-size: .78rem; margin-top: 3px; }
.cartao .previa { color: var(--texto-suave); font-size: .8rem; margin-top: 6px; font-style: italic; }
.cartao .tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: .72rem; padding: 2px 8px; border-radius: 20px; background: #eef0f8; color: var(--texto-suave); }
.tag.setor { background: #fff3dd; color: #8a5a00; }
.tag.atend { background: #e8eaff; color: var(--liu); }

.chat { background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.bolha { max-width: 72%; padding: 9px 13px; border-radius: 12px; font-size: .9rem; line-height: 1.35; }
.bolha .hora { display: block; font-size: .68rem; color: var(--texto-suave); margin-top: 4px; }
.bolha.cliente { align-self: flex-start; background: #fff; border: 1px solid var(--borda); border-bottom-left-radius: 3px; }
.bolha.eu { align-self: flex-end; background: #dcf2e4; border-bottom-right-radius: 3px; }
.bolha img { max-width: 240px; border-radius: 8px; display: block; }
.bolha audio { width: 240px; }
.responder { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.responder textarea { flex: 1 1 260px; min-height: 46px; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.barra-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.barra-linha .rot { width: 150px; font-size: .85rem; color: var(--texto); }
.barra-track { flex: 1; background: #eceef4; border-radius: 20px; height: 16px; overflow: hidden; }
.barra-fill { height: 100%; background: var(--liu); border-radius: 20px; }
.barra-linha .num { width: 42px; text-align: right; font-weight: 600; font-size: .85rem; }