:root {
    --navy: #0a1a33;
    --ciano: #0ea5d9;
    --fundo: #f3f6fb;
    --painel: #ffffff;
    --borda: #e2e8f2;
    --texto: #10203a;
    --suave: #5b6b84;
    --ok: #12805c;      --ok-tint: #e3f6ee;
    --warn: #9a6200;    --warn-tint: #fdf1d8;
    --err: #c0283a;     --err-tint: #fde8ea;
    --info: #0b6fa4;    --info-tint: #e1f3fb;
    --sombra: 0 1px 2px rgba(16, 32, 58, .05), 0 8px 24px rgba(16, 32, 58, .06);
}
[data-bs-theme="dark"] {
    --fundo: #071226;
    --painel: #0d1d38;
    --borda: #1c3054;
    --texto: #e8eef8;
    --suave: #9fb0cb;
    --ciano: #38c6f4;
    --ok: #4ade9f;      --ok-tint: #0d3327;
    --warn: #f5c15c;    --warn-tint: #3a2c0c;
    --err: #ff8a96;     --err-tint: #3d1520;
    --info: #6fd0f7;    --info-tint: #0b2e45;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}

body {
    font-family: 'Manrope', system-ui, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    font-size: 15px;
}
a { color: var(--ciano); text-decoration: none; }

/* ---------- Estrutura ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
    width: 248px; flex-shrink: 0;
    background: var(--navy);
    padding: 22px 14px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marca {
    display: block; padding: 4px 12px 22px;
    font-weight: 800; font-size: 24px; letter-spacing: -.5px; color: #fff;
}
.marca span { color: #38c6f4; }
.sidebar .item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; margin-bottom: 2px; border-radius: 10px;
    color: #b6c4dc; font-weight: 600;
    transition: background .15s, color .15s;
}
.sidebar .item i { font-size: 17px; }
.sidebar a.item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar .item.ativo { background: linear-gradient(90deg, #0ea5d9, #1cc1f0); color: #04162b; }
.sidebar .item.breve { opacity: .45; cursor: default; }
.sidebar .item small { margin-left: auto; font-size: 10px; font-weight: 500; }

.conteudo { flex: 1; min-width: 0; }
.topo {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 28px;
    background: var(--painel); border-bottom: 1px solid var(--borda);
    position: sticky; top: 0; z-index: 20;
}
.topo h1 { font-size: 19px; font-weight: 700; margin: 0; }
.pagina { padding: 26px 28px 48px; max-width: 1280px; }

.btn-icone {
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--borda); background: transparent; color: var(--texto);
    display: grid; place-items: center; font-size: 17px;
}
.btn-icone:hover { border-color: var(--ciano); color: var(--ciano); }
.usuario {
    display: flex; align-items: center; gap: 9px;
    border: 0; background: transparent; color: var(--texto); font-weight: 600;
}
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ciano); color: #04162b;
    display: grid; place-items: center; font-weight: 800;
}

/* ---------- Componentes ---------- */
.painel {
    background: var(--painel); border: 1px solid var(--borda);
    border-radius: 16px; box-shadow: var(--sombra);
    padding: 22px;
}
.painel-titulo { font-size: 15px; font-weight: 700; margin-bottom: 16px; }

.kpi { display: flex; align-items: center; gap: 16px; }
.kpi .ico {
    width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 21px;
    background: var(--info-tint); color: var(--info);
}
.kpi .ico.ok { background: var(--ok-tint); color: var(--ok); }
.kpi .ico.err { background: var(--err-tint); color: var(--err); }
.kpi .ico.warn { background: var(--warn-tint); color: var(--warn); }
.kpi .rotulo { color: var(--suave); font-size: 13px; font-weight: 600; }
.kpi .valor { font-size: 24px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; }

.pill {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pill-ok { background: var(--ok-tint); color: var(--ok); }
.pill-warn { background: var(--warn-tint); color: var(--warn); }
.pill-err { background: var(--err-tint); color: var(--err); }
.pill-info { background: var(--info-tint); color: var(--info); }
.pill-neutro { background: var(--fundo); color: var(--suave); border: 1px solid var(--borda); }

.aviso {
    padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 600;
    background: var(--info-tint); color: var(--info);
}
.aviso-ok { background: var(--ok-tint); color: var(--ok); }
.aviso-err { background: var(--err-tint); color: var(--err); }
.aviso-warn { background: var(--warn-tint); color: var(--warn); }

.btn { border-radius: 10px; font-weight: 700; padding: 9px 18px; }
.btn-sm { padding: 6px 12px; border-radius: 8px; }
.btn-primario { background: var(--ciano); border: 0; color: #04162b; }
.btn-primario:hover { filter: brightness(1.08); color: #04162b; }
.btn-claro { background: transparent; border: 1px solid var(--borda); color: var(--texto); }
.btn-claro:hover { border-color: var(--ciano); color: var(--ciano); }

.form-label { font-weight: 600; font-size: 13px; color: var(--suave); margin-bottom: 5px; }
.form-control, .form-select {
    border-radius: 10px; border-color: var(--borda); padding: 10px 13px;
    background-color: var(--painel); color: var(--texto);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(14, 165, 217, .18);
}

.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--suave); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 13px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--fundo); }
.vazio { text-align: center; padding: 44px 16px; color: var(--suave); }
.vazio i { font-size: 34px; display: block; margin-bottom: 8px; color: var(--ciano); }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros a {
    padding: 7px 15px; border-radius: 999px; font-weight: 700; font-size: 13px;
    border: 1px solid var(--borda); color: var(--suave); background: var(--painel);
}
.filtros a.ativo { background: var(--ciano); border-color: var(--ciano); color: #04162b; }

/* Vistoria */
.check-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border: 1px solid var(--borda); border-radius: 11px; font-weight: 600;
}
.foto-slot {
    position: relative; display: block; cursor: pointer;
    border: 2px dashed var(--borda); border-radius: 13px;
    aspect-ratio: 1; overflow: hidden; text-align: center;
    color: var(--suave); font-size: 12px; font-weight: 700;
}
.foto-slot:hover { border-color: var(--ciano); color: var(--ciano); }
.foto-slot .vazio-foto { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; padding: 6px; }
.foto-slot .vazio-foto i { font-size: 24px; }
.foto-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-slot.ok { border-style: solid; border-color: var(--ok); }
.foto-slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.foto-legenda { text-align: center; font-size: 12px; font-weight: 700; color: var(--suave); margin-top: 6px; }
.miniatura { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--fundo); }

/* ---------- Login ---------- */
.login {
    min-height: 100vh; display: grid; place-items: center; padding: 20px;
    background: radial-gradient(900px 500px at 15% 0%, #123a6b 0%, transparent 60%),
                radial-gradient(700px 500px at 100% 100%, #0b6fa4 0%, transparent 55%), #071226;
}
.login-caixa {
    width: 100%; max-width: 410px; padding: 38px 34px;
    background: rgba(13, 29, 56, .82); backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .09); border-radius: 22px; color: #e8eef8;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.login-caixa .marca { padding: 0 0 6px; font-size: 32px; }
.login-caixa p { color: #9fb0cb; margin-bottom: 26px; }
.login-caixa .form-label { color: #9fb0cb; }
.login-caixa .form-control { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- Celular ---------- */
.fundo-menu { display: none; }
@media (max-width: 991px) {
    .sidebar { position: fixed; left: -260px; z-index: 40; transition: left .2s; }
    .sidebar.aberto { left: 0; }
    .fundo-menu.aberto { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 30; }
    .topo { padding: 12px 16px; }
    .pagina { padding: 18px 16px 40px; }
    .rolagem { overflow-x: auto; }
    .rolagem .tabela { min-width: 640px; }
}

/* ---------- Login dividido ---------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; background: #fff; }
.split-marca {
    position: relative; overflow: hidden; color: #e8eef8;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 44px 56px;
    background: linear-gradient(155deg, #0a1a33 0%, #0b2547 55%, #0a3a66 100%);
}
.split-brilho {
    position: absolute; width: 620px; height: 620px; right: -220px; top: -200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 198, 244, .38) 0%, rgba(56, 198, 244, 0) 65%);
    pointer-events: none;
}
.split-marca::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.split-marca > *:not(.split-brilho) { position: relative; z-index: 1; }
.split-marca .marca { padding: 0; font-size: 28px; }
.split-meio { max-width: 500px; }
.split-meio h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -1px; line-height: 1.15; margin-bottom: 14px; color: #fff; }
.split-meio h1 em { font-style: normal; color: #38c6f4; }
.split-meio p { color: #a9b9d3; font-size: 16px; margin-bottom: 30px; }
.split-cartao {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px); border-radius: 18px; padding: 8px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.split-cartao .linha { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.split-cartao .linha:last-child { border-bottom: 0; }
.split-cartao strong { display: block; font-size: 14px; color: #fff; }
.split-cartao small { color: #a9b9d3; font-size: 12.5px; }
.split-cartao .hora { margin-left: auto; font-size: 12px; color: #8fa2c0; }
.bolinha { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; flex-shrink: 0; }
.bolinha.ok { background: rgba(74, 222, 159, .16); color: #4ade9f; }
.bolinha.ciano { background: rgba(56, 198, 244, .16); color: #38c6f4; }
.bolinha.err { background: rgba(255, 138, 150, .16); color: #ff8a96; }
.split-rodape { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: #a9b9d3; font-size: 13.5px; font-weight: 600; }
.split-rodape i { color: #38c6f4; margin-right: 8px; }

.split-form { display: grid; place-items: center; padding: 40px 28px; background: #fff; color: #10203a; }
.split-form form { width: 100%; max-width: 380px; }
.split-form .marca { color: #0a1a33; padding: 0 0 26px; font-size: 26px; }
.split-form .marca span { color: #0ea5d9; }
.split-form h2 { font-size: 28px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 6px; }
.split-form .sub { color: #5b6b84; margin-bottom: 28px; }
.split-form .form-label { color: #10203a; font-size: 13.5px; }
.campo { position: relative; }
.campo > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #8494ad; font-size: 17px; pointer-events: none; }
.campo .form-control {
    height: 52px; padding-left: 44px; padding-right: 46px; border-radius: 13px;
    background: #f5f8fc; border: 1.5px solid #e2e8f2; color: #10203a;
}
.campo .form-control:focus { background: #fff; border-color: #0ea5d9; }
.campo .olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: transparent; color: #8494ad; border-radius: 10px; }
.campo .olho:hover { color: #0ea5d9; }
.btn-entrar { height: 52px; border-radius: 13px; font-size: 16px; background: linear-gradient(90deg, #0ea5d9, #1cc1f0); box-shadow: 0 10px 24px rgba(14, 165, 217, .3); transition: transform .12s, box-shadow .12s; }
.btn-entrar:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(14, 165, 217, .38); }
.split-form .nota { text-align: center; color: #8494ad; font-size: 13px; margin: 22px 0 0; }
@media (max-width: 991px) {
    .split { grid-template-columns: 1fr; }
    .split-marca { display: none; }
    .split-form { min-height: 100vh; }
}

.diag { background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; font-size: 12px; white-space: pre-wrap; word-break: break-all; margin: 4px 0 0; max-height: 220px; overflow: auto; }

/* =====================================================================
   Visual interno v2: sidebar, topo, painel inicial e refinamentos gerais
   ===================================================================== */
body { background:
    radial-gradient(900px 420px at 100% -10%, rgba(14, 165, 217, .07), transparent 60%), var(--fundo);
    background-attachment: fixed; }

/* ---------- Sidebar ---------- */
.sidebar {
    width: 256px; padding: 22px 14px 14px;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #0a1a33 0%, #091730 60%, #0b2547 100%);
    border-right: 1px solid rgba(255, 255, 255, .05);
}
.sidebar nav { flex: 1; }
.sidebar .grupo {
    padding: 14px 12px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; color: #5f7396;
}
.sidebar .item { position: relative; padding: 8px 10px; gap: 11px; font-size: 14.5px; color: #a9b9d3; }
.sidebar .item .ico {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
    background: rgba(255, 255, 255, .05); transition: background .15s, color .15s;
}
.sidebar .item .ico i { font-size: 15px; }
.sidebar a.item:hover .ico { background: rgba(56, 198, 244, .16); color: #38c6f4; }
.sidebar .item.ativo { background: rgba(56, 198, 244, .12); color: #fff; }
.sidebar .item.ativo .ico { background: linear-gradient(135deg, #0ea5d9, #38c6f4); color: #04162b; box-shadow: 0 6px 16px rgba(14, 165, 217, .35); }
.sidebar .item.ativo::before {
    content: ''; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px;
    border-radius: 0 4px 4px 0; background: #38c6f4;
}
.sidebar-usuario {
    display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); border-radius: 13px;
}
.sidebar-usuario .quem { min-width: 0; flex: 1; line-height: 1.25; }
.sidebar-usuario strong { display: block; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-usuario small { color: #7f93b5; font-size: 12px; }
.sidebar-usuario .sair { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #a9b9d3; flex-shrink: 0; }
.sidebar-usuario .sair:hover { background: rgba(255, 138, 150, .16); color: #ff8a96; }

/* ---------- Topo ---------- */
.topo { padding: 12px 28px; background: color-mix(in srgb, var(--painel) 82%, transparent); backdrop-filter: blur(12px); }
.topo-titulo h1 { font-size: 20px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; }
.topo-titulo small { color: var(--suave); font-size: 12.5px; }
.topo .btn-sm { padding: 8px 14px; border-radius: 10px; }

/* ---------- Cartões e tabelas ---------- */
.painel { border-radius: 18px; }
.painel-titulo { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; }
a.painel { display: flex; text-decoration: none; color: inherit; }
.kpi-card { position: relative; overflow: hidden; height: 100%; transition: transform .15s, box-shadow .15s, border-color .15s; }
a.kpi-card:hover { transform: translateY(-2px); border-color: var(--ciano); box-shadow: 0 14px 32px rgba(14, 165, 217, .14); }
.kpi .ico { width: 50px; height: 50px; border-radius: 14px; }
.kpi .nota { color: var(--suave); font-size: 12.5px; margin-top: 2px; }
.tabela th { background: var(--fundo); border-bottom: 0; }
.tabela th:first-child { border-radius: 10px 0 0 10px; }
.tabela th:last-child { border-radius: 0 10px 10px 0; }
.tabela tfoot td { border-top: 2px solid var(--borda); border-bottom: 0; }
.btn-primario { box-shadow: 0 6px 16px rgba(14, 165, 217, .22); }
.aviso { display: flex; align-items: center; gap: 10px; border: 1px solid transparent; }
.aviso::before { font-family: 'bootstrap-icons'; content: '\F431'; font-weight: 400; font-size: 17px; }
.aviso-ok::before { content: '\F26A'; }
.aviso-err::before, .aviso-warn::before { content: '\F33A'; }
.login-caixa .aviso::before { display: none; }

/* ---------- Painel inicial ---------- */
.hero {
    position: relative; overflow: hidden; color: #fff;
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    padding: 26px 30px; border-radius: 20px;
    background: linear-gradient(120deg, #0a1a33 0%, #0b2f5a 55%, #0b6fa4 100%);
    box-shadow: 0 18px 40px rgba(10, 26, 51, .22);
}
.hero::after {
    content: ''; position: absolute; width: 420px; height: 420px; right: -120px; top: -220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 198, 244, .45), transparent 65%); pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h2 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 4px; }
.hero p { margin: 0; color: #b9c9e2; }
.hero-acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.btn-hero { background: #38c6f4; color: #04162b; border: 0; }
.btn-hero:hover { background: #63d4f8; color: #04162b; }
.btn-hero-claro { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
.btn-hero-claro:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.barras { display: flex; gap: 14px; align-items: stretch; height: 210px; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.barra-valor { height: 20px; font-size: 12px; font-weight: 700; color: var(--suave); white-space: nowrap; }
.barra-trilho { flex: 1; width: 100%; max-width: 54px; display: flex; align-items: flex-end; background: var(--fundo); border-radius: 10px; overflow: hidden; }
.barra { width: 100%; border-radius: 10px; background: linear-gradient(180deg, #38c6f4, #0ea5d9); }
.barra.vazia { background: var(--borda); }
.barra-rotulo { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--suave); text-transform: uppercase; }

.linha-lista { display: flex; align-items: center; gap: 13px; padding: 10px 8px; border-radius: 12px; color: inherit; text-decoration: none; }
.linha-lista:hover { background: var(--fundo); color: inherit; }
.linha-lista .data {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1.1;
    background: var(--info-tint); color: var(--info); font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.linha-lista .data strong { font-size: 16px; }
.linha-lista .data.err { background: var(--err-tint); color: var(--err); }
.linha-lista .meio, .evento .meio { flex: 1; min-width: 0; }
.linha-lista .meio strong, .evento .meio strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-lista small, .evento small { color: var(--suave); font-size: 12.5px; }
.linha-lista .fim { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }

.evento { position: relative; display: flex; align-items: center; gap: 13px; padding: 9px 0; }
.evento:not(:last-child)::before { content: ''; position: absolute; left: 18px; top: 46px; bottom: -9px; width: 2px; background: var(--borda); }
.evento .ponto { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 16px; background: var(--info-tint); color: var(--info); }
.evento .ponto.ok { background: var(--ok-tint); color: var(--ok); }
.evento .ponto.err { background: var(--err-tint); color: var(--err); }

.progresso { margin-bottom: 16px; font-weight: 600; }
.progresso:last-child { margin-bottom: 0; }
.progresso .trilho { height: 8px; margin-top: 7px; border-radius: 99px; background: var(--fundo); overflow: hidden; }
.progresso .trilho div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0ea5d9, #38c6f4); }

@media (max-width: 991px) {
    .sidebar { left: -270px; }
    .topo { padding: 10px 16px; }
    .hero { padding: 22px 20px; }
    .hero-acoes { margin-left: 0; }
}