.grades { max-width:1180px; margin:auto; padding:36px; color:#183b59; font-family:Inter,Arial,sans-serif; }
.grades-topo { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:22px; }.grades-topo h1 { margin:3px 0; }.grades-topo p { margin:0; color:#70869a; }.grades-kicker { color:#d79f00; font-size:12px; font-weight:800; letter-spacing:1.5px; }
.grade-painel { padding:20px; border:1px solid #e1eaf2; border-radius:15px; background:#fff; box-shadow:0 8px 28px #173f6312; }.grade-painel h2 { margin:0; font-size:18px; }.grade-listagem-topo { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }.grade-pesquisa { display:flex; align-items:center; gap:8px; min-width:260px; padding:0 10px; border:1px solid #cbd9e4; border-radius:8px; color:#6d8498; }.grade-pesquisa input { width:100%; min-height:38px; border:0; outline:0; font:inherit; }
.grade-btn { border:0; border-radius:8px; padding:10px 13px; color:#fff; background:#1d6f9f; font-weight:700; cursor:pointer; }.grade-btn:hover { filter:brightness(.94); }.grade-btn.secundario { background:#6f8291; }.grade-btn.perigo { background:#b23a3a; }
.grade-lista { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px; }.grade-card { padding:17px; border:1px solid #e1eaf2; border-radius:12px; background:#fff; box-shadow:0 4px 12px #173f630a; }.grade-card-topo { display:flex; align-items:center; justify-content:space-between; gap:10px; }.grade-card h3 { margin:12px 0 16px; font-size:17px; }.grade-card small { color:#6d8498; }.grade-card .grade-acoes { display:flex; gap:9px; }.grade-card .grade-btn { flex:1; }
.grade-status { display:inline-flex; padding:4px 7px; border-radius:5px; background:#e5f6eb; color:#16733d; font-size:11px; font-weight:800; }.grade-status.inativa { background:#fff2d9; color:#8a5d16; }
.grade-modal[hidden] { display:none; }.grade-modal { position:fixed; inset:0; z-index:5000; display:grid; place-items:center; padding:22px; background:#102c42a8; }.grade-modal-box { width:min(1060px,100%); max-height:calc(100vh - 44px); overflow:auto; border-radius:16px; background:#fff; box-shadow:0 24px 60px #0717256b; }.grade-modal-topo { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid #e5edf3; }.grade-modal-topo h2 { margin:3px 0 0; font-size:22px; }.grade-fechar { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:#eef4f7; color:#375b74; cursor:pointer; }
.grade-modal-corpo { display:grid; grid-template-columns:300px 1fr; gap:25px; padding:24px; }.grade-campo { display:grid; gap:6px; margin-bottom:12px; }.grade-campo label { color:#59748d; font-size:13px; font-weight:700; }.grade-campo input { box-sizing:border-box; width:100%; min-height:40px; padding:0 10px; border:1px solid #cbd9e4; border-radius:8px; font:inherit; }.grade-faixa { display:grid; grid-template-columns:130px 130px; gap:10px; }.grade-ativa { display:flex; align-items:center; gap:8px; margin-top:12px; color:#45677f; font-size:14px; font-weight:700; }
.grade-tipo-titulo { margin:16px 0 9px; padding-bottom:6px; border-bottom:1px solid #dfeaf1; color:#1d6f9f; font-size:14px; }.grade-tipo-titulo.positiva { margin-top:4px; }.grade-tipo-titulo.negativa { color:#b23a3a; }
.grade-vinculo-selecao { min-width:0; padding-left:25px; border-left:1px solid #e4edf3; }.grade-vinculo-cabecalho { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.grade-vinculo-cabecalho h3 { margin:0; font-size:17px; }.grade-vinculo-cabecalho p { margin:4px 0 14px; color:#70869a; font-size:13px; }.grade-abas { display:flex; padding:3px; border-radius:9px; background:#edf3f7; }.grade-abas button { padding:7px 9px; border:0; border-radius:6px; background:transparent; color:#557087; font-weight:700; cursor:pointer; }.grade-abas button.ativo { background:#fff; color:#1d6f9f; box-shadow:0 1px 3px #173f6322; }.grade-busca { box-sizing:border-box; width:100%; min-height:40px; padding:0 11px; border:1px solid #cbd9e4; border-radius:8px; font:inherit; }.grade-listas-vinculo { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }.grade-listas-vinculo h4 { margin:0 0 7px; color:#45677f; font-size:13px; }.grade-listas-vinculo h4 small { font-weight:400; }.grade-lista-vinculo { min-height:220px; max-height:330px; overflow:auto; border:1px solid #dbe6ed; border-radius:9px; background:#fbfdfe; }.grade-item-vinculo { display:block; width:100%; padding:10px; border:0; border-bottom:1px solid #eaf0f4; background:transparent; color:#294d67; text-align:left; cursor:pointer; }.grade-item-vinculo:hover { background:#eaf5fb; }.grade-item-vinculo:last-child { border-bottom:0; }.grade-item-vinculo b { display:block; font-size:13px; }.grade-item-vinculo small { color:#7890a1; }.selecionados .grade-item-vinculo { background:#eff8f2; }.grade-lista-vinculo .vazio { display:block; padding:16px 10px; color:#7890a1; font-size:13px; text-align:center; }.grade-modal-acoes { display:flex; justify-content:flex-end; gap:9px; padding:17px 24px; border-top:1px solid #e5edf3; }
@media (max-width:800px) { .grade-modal-corpo { grid-template-columns:1fr; }.grade-vinculo-selecao { padding:20px 0 0; border-left:0; border-top:1px solid #e4edf3; } }
@media (max-width:560px) { .grades { padding:20px 14px; }.grades-topo,.grade-listagem-topo { align-items:flex-start; flex-direction:column; }.grade-pesquisa { box-sizing:border-box; width:100%; min-width:0; }.grade-modal { padding:10px; }.grade-modal-corpo,.grade-modal-topo,.grade-modal-acoes { padding:16px; }.grade-vinculo-cabecalho { flex-direction:column; }.grade-listas-vinculo { grid-template-columns:1fr; }.grade-lista-vinculo { min-height:140px; max-height:200px; } }