/* Protótipo visual — Sistema de Controles Servilit (dados fictícios) */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Figtree:wght@400;500;600;700&display=swap");

:root {
  --verde: #0A7A4B;
  --verde-escuro: #064A2F;
  --verde-noite: #04301F;
  --verde-vivo: #12B36E;
  --lima: #B6E94B;
  --lima-escuro: #6E9A12;
  --prata: #E8EFEC;
  --texto: #10251B;
  --texto-suave: #557064;
  --texto-fraco: #7A9188;
  --fundo: #F1F5F3;
  --branco: #FFFFFF;
  --borda: #DCE6E1;
  --cartao-claro: #E6F1EC;
  --pendente: #A15C00;
  --pendente-fundo: #FFF0D6;
  --sucesso: #0F7A4C;
  --sucesso-fundo: #DDF4E8;
  --perigo: #B42318;
  --perigo-fundo: #FDE4E1;
  --info: #1D4E89;
  --info-fundo: #E1ECF8;
  --raio: 16px;
  --pilula: 999px;
  --fonte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Outfit", var(--fonte);
  --metal: linear-gradient(135deg, #0E8F58 0%, #0A6E44 28%, #064A2F 62%, #04301F 100%);
  --metal-faixa: linear-gradient(100deg, #1E2B26 0%, #34463F 22%, #566A62 46%, #3C4F47 66%, #22312B 100%);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); margin: 0; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.oculto { display: none !important; }

/* ── Topo metálico ───────────────────────────────────────────── */
.topo { background: var(--metal); color: #fff; position: relative; overflow: hidden; }
.topo::before { /* brilho metálico */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 280px at 85% -20%, rgba(182, 233, 75, 0.20), transparent 60%),
              linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.07) 45%, transparent 60%);
}
.topo > * { position: relative; }
.largura { max-width: 1500px; margin: 0 auto; padding-left: clamp(16px, 3vw, 44px); padding-right: clamp(16px, 3vw, 44px); }
.topo-linha { display: flex; align-items: center; gap: 14px; padding-top: 16px; padding-bottom: 6px; }
.marca-branca { height: 26px; filter: brightness(0) invert(1); opacity: 0.95; }
.menu { display: flex; gap: 4px; flex: 1; margin-left: 18px; flex-wrap: wrap; }
.menu a { padding: 8px 14px; border-radius: var(--pilula); text-decoration: none; font-size: 13.5px; color: #E3F3EB; }
.menu a:hover { background: rgba(255, 255, 255, 0.10); }
.menu a.ativo { background: var(--lima); color: var(--verde-noite); font-weight: 700; }
.topo-direita { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sino { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: #fff; display: grid; place-items: center; position: relative; }
.sino i { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--lima); }
.usuario { display: flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border-radius: var(--pilula); background: rgba(255, 255, 255, 0.10); font-weight: 600; font-size: 13.5px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--lima); color: var(--verde-noite); display: grid; place-items: center; font-weight: 800; font-size: 12px; }

.boasvindas { display: flex; align-items: center; gap: 26px; padding-top: 18px; padding-bottom: 26px; }
.selo-logo { background: #fff; border-radius: 22px; padding: 18px 22px; box-shadow: 0 0 0 4px rgba(182, 233, 75, 0.35), 0 18px 40px -18px rgba(0, 0, 0, 0.6); flex-shrink: 0; }
.selo-logo img { display: block; width: 168px; }
.saudacao { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.saudacao .data { font-size: 13px; color: #BFE3D1; }
.saudacao h1 { font-size: 30px; letter-spacing: -0.02em; color: #fff; }
.saudacao p { margin: 0; color: #DDF1E7; font-size: 14px; }
.saudacao p b { color: var(--lima); }
.totais { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.total { display: flex; flex-direction: column; gap: 3px; padding: 11px 15px; border-radius: 13px; text-decoration: none; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); transition: transform 0.18s, background 0.18s; }
.total:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.14); }
.total span { font-size: 12.5px; color: #CFEADD; }
.total strong { font-family: var(--fonte-titulo); font-size: 21px; color: #fff; font-variant-numeric: tabular-nums; }
.total.destaque { background: linear-gradient(135deg, #D4F57A, var(--lima) 55%, #9ACD2E); border-color: transparent; }
.total.destaque span { color: #1F3A0A; font-weight: 600; }
.total.destaque strong { color: var(--verde-noite); }

/* ── Conteúdo da tela inicial ────────────────────────────────── */
.conteudo { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; padding-bottom: 48px; }
.filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pilulas { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--pilula); background: var(--branco); border: 1px solid var(--borda); flex-wrap: wrap; }
.pilulas button { border: 0; background: transparent; padding: 7px 14px; border-radius: var(--pilula); font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.pilulas button[aria-pressed="true"] { background: var(--verde); color: #fff; }
.busca { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 330px; max-width: 100%; height: 40px; padding: 0 14px; border-radius: var(--pilula); background: var(--branco); border: 1px solid var(--borda); color: var(--texto-fraco); }
.busca input { border: 0; outline: 0; flex: 1; background: transparent; font: inherit; color: var(--texto); }

.secao { display: flex; flex-direction: column; gap: 10px; }
.faixa { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-radius: 10px; background: var(--metal-faixa); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 6px 16px -10px rgba(0, 0, 0, 0.6); }
.faixa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(220, 255, 235, 0.18) 50%, transparent 60%); transform: translateX(-100%); animation: brilho 6s ease-in-out infinite; }
@keyframes brilho { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.faixa h2 { font-size: 14px; color: #F1FFF7; letter-spacing: 0.02em; position: relative; }
.faixa span { font-size: 12px; color: var(--lima); font-weight: 700; position: relative; }

.grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; perspective: 1200px; }
.cartao { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(150deg, #19C27B 0%, #0C8A55 38%, #075C38 72%, #04301F 100%);
  border: 1px solid rgba(182, 233, 75, 0.30); box-shadow: 0 10px 28px -14px rgba(4, 48, 31, 0.7);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s; }
.cartao:hover { transform: scale(1.06); z-index: 2; box-shadow: 0 30px 60px -22px rgba(4, 80, 50, 0.85), 0 0 0 1.5px rgba(182, 233, 75, 0.9) inset; }
.cartao::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; pointer-events: none; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(182, 233, 75, 0.35), rgba(255, 255, 255, 0.08) 45%, transparent 70%); }
.cartao:hover::before { opacity: 1; }
.cartao::after { content: ""; position: absolute; inset: -60%; transform: translateX(-60%); transition: transform 0.9s; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.20) 50%, transparent 60%); }
.cartao:hover::after { transform: translateX(60%); }
.cartao > * { position: relative; }
.cartao-cabeca { display: flex; justify-content: space-between; align-items: center; }
.icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: var(--lima); }
.etiqueta { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--pilula); font-size: 11.5px; font-weight: 700; }
.cartao .etiqueta { background: var(--lima); color: var(--verde-noite); }
.cartao h3 { font-size: 13px; color: #fff; }
.cartao p { margin: 2px 0 0; font-size: 12px; color: #D2EEDF; }
.numeros { display: flex; flex-wrap: wrap; gap: 6px; }
.numero { display: flex; gap: 5px; align-items: baseline; padding: 4px 8px; border-radius: 8px; font-size: 12px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); }
.numero b { color: #fff; }
.numero b.pend { color: #FFD27A; }
.numero b.ok { color: #C9F58A; }
.numero span { color: #E2F5EB; }
.cartao-rodape { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.15); display: flex; justify-content: space-between; font-size: 12px; color: #D2EEDF; }
.cartao-rodape b { color: var(--lima); transition: transform 0.25s; }
.cartao:hover .cartao-rodape b { transform: translateX(6px); }
.rodape { text-align: center; color: var(--texto-suave); font-size: 12.5px; padding-bottom: 28px; }

/* ── Telas dos módulos ───────────────────────────────────────── */
.modulo { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--metal); color: #fff; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.lateral .volta { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; text-decoration: none; }
.lateral .volta img { height: 22px; filter: brightness(0) invert(1); }
.lateral .area-nome { padding: 10px 10px 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lima); font-weight: 700; }
.lateral a.item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; font-size: 13px; color: #E1F2E9; }
.lateral a.item:hover { background: rgba(255, 255, 255, 0.08); }
.lateral a.item.ativo { background: var(--lima); color: var(--verde-noite); font-weight: 700; }
.lateral a.item svg { flex-shrink: 0; opacity: 0.9; }
.lateral .contador { margin-left: auto; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: var(--pilula); background: rgba(255, 210, 122, 0.95); color: #3A2400; }
.lateral a.item.ativo .contador { background: var(--verde-noite); color: var(--lima); }
.lateral .outras { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: 6px; padding-left: 6px; }
.lateral .outras a { font-size: 11.5px; text-decoration: none; padding: 4px 9px; border-radius: var(--pilula); background: rgba(255, 255, 255, 0.08); color: #D2EEDF; }

.area-modulo { padding: 22px clamp(16px, 2.6vw, 38px) 60px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cabeca small { color: var(--verde); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.cabeca h1 { font-size: 26px; letter-spacing: -0.01em; margin-top: 2px; }
.cabeca p { margin: 4px 0 0; color: var(--texto-suave); }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.botao { border: 1px solid var(--borda); background: var(--branco); color: var(--texto); padding: 9px 16px; border-radius: var(--pilula); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.botao.principal { background: var(--verde); border-color: var(--verde); color: #fff; }
.botao.destaque { background: var(--lima); border-color: var(--lima); color: var(--verde-noite); }
.botao.pequeno { padding: 5px 11px; font-size: 12px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--verde-vivo); }
.kpi.alerta::before { background: #E8A33B; }
.kpi.perigo::before { background: var(--perigo); }
.kpi.lima::before { background: var(--lima); }
.kpi span { font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.kpi strong { display: block; font-family: var(--fonte-titulo); font-size: 22px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--texto-fraco); font-size: 12px; }

.caixa { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.caixa-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--borda); }
.caixa-cabeca h3 { font-size: 15px; }
.caixa-cabeca span { color: var(--texto-suave); font-size: 12.5px; }
.caixa-corpo { padding: 16px; }
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave); font-weight: 700; padding: 10px 12px; background: #F6FAF8; border-bottom: 1px solid var(--borda); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid #EDF3F0; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
tr.total td { font-weight: 800; background: #F2F8F5; }
tr.sub td:first-child { padding-left: 28px; color: var(--texto-suave); }
tr.forte td { font-weight: 700; }
.et-ok { background: var(--sucesso-fundo); color: var(--sucesso); }
.et-pend { background: var(--pendente-fundo); color: var(--pendente); }
.et-perigo { background: var(--perigo-fundo); color: var(--perigo); }
.et-info { background: var(--info-fundo); color: var(--info); }
.neg { color: var(--perigo); }
.pos { color: var(--sucesso); }
.suave { color: var(--texto-suave); }
.clipe { color: var(--verde); font-weight: 700; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.abas button { border: 0; background: transparent; padding: 10px 14px; font-weight: 600; color: var(--texto-suave); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 13px; }
.abas button.ativo { color: var(--verde); border-bottom-color: var(--verde); }
.abas button b { margin-left: 5px; font-size: 11px; padding: 1px 7px; border-radius: var(--pilula); background: var(--pendente-fundo); color: var(--pendente); }

.duas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.lista-conf { border-radius: 14px; padding: 14px; border: 1px solid var(--borda); background: var(--branco); }
.lista-conf h4 { font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.lista-conf h4 b { font-size: 20px; }
.lista-conf p { margin: 4px 0 10px; font-size: 12.5px; color: var(--texto-suave); }
.lista-conf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.lista-conf li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--fundo); }
.lista-conf.perigo { border-top: 4px solid var(--perigo); }
.lista-conf.alerta { border-top: 4px solid #E8A33B; }
.lista-conf.info { border-top: 4px solid #4C83C4; }
.lista-conf.lima { border-top: 4px solid var(--lima-escuro); }

.barra-progresso { height: 8px; border-radius: 99px; background: #E5EEEA; overflow: hidden; min-width: 120px; }
.barra-progresso i { display: block; height: 100%; border-radius: 99px; background: var(--verde-vivo); }
.barra-progresso i.acima { background: #E8A33B; }
.barra-progresso i.muito { background: var(--perigo); }

.ocorrencias { display: flex; flex-direction: column; gap: 10px; }
.ocorrencia { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px; border-radius: 14px; background: var(--branco); border: 1px solid var(--borda); }
.ocorrencia .bola { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cartao-claro); color: var(--verde); }
.ocorrencia h4 { font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ocorrencia p { margin: 4px 0; color: var(--texto); font-size: 13px; }
.ocorrencia .meta { font-size: 12px; color: var(--texto-suave); display: flex; gap: 12px; flex-wrap: wrap; }
.complemento { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--lima-escuro); background: #F5FAEC; border-radius: 0 8px 8px 0; font-size: 12.5px; }
.cadeado { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--texto-suave); }

.consultor-perguntas { display: flex; flex-wrap: wrap; gap: 8px; }
.consultor-perguntas button { border: 1px solid var(--borda); background: var(--branco); padding: 10px 14px; border-radius: 12px; text-align: left; font-weight: 600; font-size: 13px; }
.consultor-perguntas button.ativo { background: var(--verde); color: #fff; border-color: var(--verde); }
.resposta { background: linear-gradient(135deg, #F4FBF7, #EAF6EF); border: 1px solid #CFE7DA; border-radius: 16px; padding: 18px 20px; font-size: 14.5px; line-height: 1.6; }
.resposta h3 { font-size: 16px; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.resposta ul { margin: 8px 0 0; padding-left: 20px; }
.campo-pergunta { display: flex; gap: 8px; }
.campo-pergunta input { flex: 1; height: 44px; border-radius: 12px; border: 1px solid var(--borda); padding: 0 14px; font: inherit; }

.ia-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--pilula); border: 0; background: var(--metal); color: #fff; font-weight: 700; box-shadow: 0 14px 30px -12px rgba(4, 48, 31, 0.8), 0 0 0 2px rgba(182, 233, 75, 0.6) inset; }
.ia-flutuante i { width: 9px; height: 9px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 10px var(--lima); }

.form-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.campo label { display: block; font-size: 11.5px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.campo div { height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; border: 1px solid var(--borda); background: #FAFCFB; font-size: 13.5px; }

.celular { width: 380px; max-width: 100%; margin: 0 auto; border-radius: 34px; padding: 12px; background: #0B1712; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); }
.celular .tela { border-radius: 24px; overflow: hidden; background: var(--fundo); }
.celular .tela-topo { background: var(--metal); color: #fff; padding: 16px; }
.celular .tela-topo img { height: 18px; filter: brightness(0) invert(1); }
.celular .tela-topo h3 { color: #fff; font-size: 17px; margin-top: 10px; }
.celular .tela-corpo { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.celular .bt-grande { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--branco); border: 1px solid var(--borda); font-weight: 700; }
.celular .bt-grande span { width: 36px; height: 36px; border-radius: 10px; background: var(--cartao-claro); color: var(--verde); display: grid; place-items: center; }

@media (max-width: 1300px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis, .quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } .duas, .tres { grid-template-columns: 1fr; } .boasvindas { flex-wrap: wrap; } .totais { flex-basis: 100%; } .form-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .modulo { grid-template-columns: 1fr; } .lateral { position: static; height: auto; } .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .busca { margin-left: 0; width: 100%; } }
@media (max-width: 520px) { .grade { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr; } .saudacao { width: auto; } }