/* ═══════════════════════════════════════════════════════════
   3Dr EVO — Head: folha de estilo compartilhada (2026-09-20)
   Mesma paleta e casca do EVO Client (../evo-client-app/static/css/client.css):
   menu lateral oliva #4B5140, página clara #F4F6F1, painéis brancos, verde
   #2E7D5B / #1F5C40 nos botões e títulos, menta #D9EDDA nos destaques.
   Tema SEMPRE claro (mesma decisão do dono para o client, 2026-09-12).

   Carregada DEPOIS do <style> de cada tela: as telas continuam auto-contidas
   (variáveis --color-* próprias, já na paleta clara) e este arquivo põe a casca
   (menu lateral + barra de título) e nivela os componentes comuns (.btn, .card,
   .form-control, .table, .modal…) para que todas as telas fiquem iguais.
   ═══════════════════════════════════════════════════════════ */
:root {
  --green: #2E7D5B; --green-dark: #1F5C40; --green-light: #3A9D72;
  --olive: #4B5140; --olive-2: #3D4037; --mint: #D9EDDA; --gauges: #FAFCF5;
  --bg: #F4F6F1; --paper: #FFFFFF; --ink: #2C2C2C; --ink-2: #6B6F66; --line: #E3E6DD;
  --ok: #27ae60; --warn: #f1c40f; --crit: #e74c3c; --wet: #3498db; --neon: #EAFF00;
  --ok-soft: #E4F5EA; --warn-soft: #FDF0DA; --crit-soft: #FBE3E0; --wet-soft: #E0EEF8; --off-soft: #ECEEF0;
  --radius: 14px; --shadow: 0 6px 24px rgba(31,92,64,.10);
  --side-w: 244px;
  /* espaçamentos das telas (elas leem estas variáveis): mais compacto que o original */
  --spacing-xs: 4px; --spacing-sm: 6px; --spacing-md: 10px; --spacing-lg: 14px; --spacing-xl: 20px; --sp: 10px;
  --space-xs: 4px; --space-sm: 6px; --space-md: 10px; --space-lg: 14px; --space-xl: 20px;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --rad: 6px; --touch-target: 30px;
}
/* 1rem = 14px: as telas medem fonte e vários espaços em rem — tudo encolhe junto */
html { font-size: 14px; }
html, body { height: auto; min-height: 100%; }
body {
  margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px; line-height: 1.45; display: block;
  -webkit-font-smoothing: antialiased;
}
body::before { display: none; }
a { color: var(--green-dark); }
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--green-light); outline-offset: 2px; }

/* ── casca: menu lateral + área principal ───────────────── */
.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
.side { background: var(--olive); color: #fff; display: flex; flex-direction: column; padding: 12px 10px; gap: 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px; color: #fff; text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.brand b { font-size: 15px; letter-spacing: .02em; display: block; }
.brand small { display: block; font-size: 10px; opacity: .7; font-weight: 500; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 8px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 500; opacity: .88; }
.nav a:hover { background: rgba(255,255,255,.10); opacity: 1; }
.nav a.on { background: var(--green); opacity: 1; font-weight: 700; }
.nav a svg { width: 17px; height: 17px; flex: none; }
.nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.15); padding-top: 10px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.side .foot b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .foot span { opacity: .7; font-size: 11px; }
.side .foot a { color: #FFB4A8; text-decoration: none; font-weight: 600; font-size: 12px; }
.main { display: flex; flex-direction: column; min-width: 0; }
.top { background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 40px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; }
.top h1 { font-size: 18px; font-weight: 800; color: var(--green-dark); margin: 0; }
.top .sub { color: var(--ink-2); font-size: 12px; }
.top .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.body { padding: 22px 40px 48px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: relative; height: auto; }
  .top { padding: 10px 16px; }
  .body { padding: 16px 16px 40px; }
}

/* ── componentes no padrão do client ────────────────────── */
.btn { background: var(--green); color: #fff; border: none; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--green-dark); border: 1px solid var(--green); }
.btn.danger { background: var(--crit); }
.btn.big { padding: 11px; font-size: 14px; justify-content: center; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--olive); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); z-index: 200; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel h4 { font-size: 12px; font-weight: 800; color: var(--green-dark); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.prop-h { font-size: 13px; font-weight: 800; color: var(--green-dark); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.prop-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1180px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.tile { border-radius: 14px; padding: 14px 16px; color: #fff; display: flex; flex-direction: column; gap: 6px; min-height: 130px; position: relative; text-decoration: none; background: var(--olive); transition: transform .12s, box-shadow .12s; }
.tile:hover, .tile:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.tile .ico { font-size: 30px; line-height: 1; }
.tile .t { font-size: 14px; font-weight: 800; }
.tile .s { font-size: 11.5px; opacity: .85; }
.tile .foot { margin-top: auto; font-size: 11px; opacity: .92; font-weight: 700; }
.tile.green { background: var(--green); }
.tile.blue { background: #2E86C1; }
.tile.yellow { background: #C9A227; }
.tile.purple { background: #7C5C8F; }
.tile.orange { background: #C7742A; }
.tile.red { background: #C0392B; }
.tile.cyan { background: #1F8A8A; }
.tile.pink { background: #B03A73; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px; display: flex; flex-direction: column; gap: 1px; border-left: 5px solid var(--green); }
.kpi b { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi span { font-size: 11px; color: var(--ink-2); font-weight: 600; }
.banner { display: flex; align-items: center; gap: 14px; background: var(--olive); color: #fff; border-radius: var(--radius); padding: 14px 18px; flex-wrap: wrap; }
.banner .big { font-size: 18px; font-weight: 800; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 240px; }
.banner .big small { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.75); }
.banner img { width: 44px; height: 44px; border-radius: 10px; flex: none; }

/* ── nivelamento das classes BEM das telas do Head ──────── */
/* A barra de título de cada tela (.header) vira a barra branca do client. */
.main > .container { max-width: none; margin: 0; padding: 0 22px 32px; position: static; width: auto; font-size: 13px; }
.main > .container > .header,
.main > .container > div > .header,
.main > .header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 -22px 14px; padding: 8px 22px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; border-radius: 0; box-shadow: none; }
.main > .header { margin: 0; }
.header__title { font-size: 16px; font-weight: 800; color: var(--green-dark); margin: 0; }
.header__welcome { color: var(--ink-2); font-size: 11.5px; }
.header__info { flex: 1; min-width: 200px; }
@media (max-width: 820px) {
  .main > .container { padding: 0 16px 40px; }
  .main > .container > .header, .main > .container > div > .header, .main > .header { margin: 0 -16px 16px; padding: 10px 16px; }
  .main > .header { margin: 0; }
}
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); padding: 12px 14px; margin-bottom: 12px; }
.card__header { margin-bottom: 8px; gap: 8px; }
.card--elevated { box-shadow: var(--shadow); }
.card__title { color: var(--green-dark); font-size: 14px; font-weight: 800; }
.card__header { border-bottom: none; }
.card__subtitle { color: var(--ink-2); }
/* botões */
.btn { border-radius: 7px; font-weight: 600; min-height: 30px; padding: 4px 11px; font-size: 12.5px; line-height: 1.3; transition: background .15s, transform .15s, box-shadow .15s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--green-dark); color: #fff; }
.btn--secondary { background: var(--paper); color: var(--ink); border: 1px solid #D0D4CB; }
.btn--secondary:hover:not(:disabled) { background: var(--mint); color: var(--green-dark); }
.btn--ghost { background: var(--paper); color: var(--green-dark); border: 1px solid #D0D4CB; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn--ghost:hover:not(:disabled) { background: var(--mint); color: var(--green-dark); }
.btn--danger { background: var(--paper); color: #C0392B; border: 1px solid #F1B6AE; }
.btn--danger:hover:not(:disabled) { background: var(--crit-soft); color: #B03A2E; }
.btn--warning { background: var(--paper); color: #B45309; border: 1px solid #F5D08A; }
.btn--warning:hover:not(:disabled) { background: var(--warn-soft); color: #92400E; }
.btn--full { width: 100%; justify-content: center; }
/* ícones de ação nas linhas de tabela (lápis, lixeira…): sem fundo, só realce no hover */
.table__actions { gap: 2px; }
.table__actions .btn, td > .btn--sm, td > .btn--xs, .btn-remover-designacao, .btn-apagar-log-exc { background: transparent; border: 1px solid transparent; color: var(--ink-2); padding: 2px 6px; min-height: 24px; font-size: 13px; border-radius: 6px; box-shadow: none; }
.table__actions .btn:hover:not(:disabled), td > .btn--sm:hover:not(:disabled), td > .btn--xs:hover:not(:disabled) { transform: none; background: var(--mint); color: var(--green-dark); border-color: transparent; }
.table__actions .btn--danger:hover:not(:disabled), td > .btn--danger:hover:not(:disabled), .btn-remover-designacao:hover:not(:disabled), .btn-apagar-log-exc:hover:not(:disabled) { background: var(--crit-soft); color: #B03A2E; }
.btn--success { background: var(--ok); color: #fff; }
.btn--info { background: var(--wet); color: #fff; }
.btn--sm { padding: 3px 8px; font-size: 12px; min-height: 26px; }
.btn--xs { padding: 2px 6px; font-size: 11.5px; min-height: 22px; }
/* formulários */
.form-group__label, .form-label, label.lbl { color: var(--ink-2); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.form-control, .form-select, .in { background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); border-radius: 7px; padding: 7px 10px; font-size: 13px; }
.form-group { margin-bottom: 10px; }
.form-group__label, .form-label { margin-bottom: 4px; font-size: 11px; }
.form-control:focus, .form-select:focus, .in:focus { background: var(--paper); border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(46,125,91,.12); }
.form-control::placeholder { color: #9CA3AF; }
.form-control:disabled, .form-control[readonly] { background: var(--off-soft); color: var(--ink-2); }
select.form-control option, .form-select option { color: var(--ink); background: var(--paper); }
.form-hint, .form-text { color: var(--ink-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); }
/* tabelas */
.table { margin-top: 8px; font-size: 12.5px; }
.table th { background: var(--bg); color: var(--ink-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; border-bottom: 1px solid var(--line); padding: 6px 10px; }
.table td { border-bottom: 1px solid var(--line); color: var(--ink); padding: 5px 10px; }
.table tbody tr:hover { background: var(--mint); }
.table th.sortable:hover, .table th.sortable.sort-asc, .table th.sortable.sort-desc { background: var(--mint); color: var(--green-dark); }
.table th.sortable.sort-asc::after, .table th.sortable.sort-desc::after { color: var(--green); }
/* modais */
.modal { background: rgba(0,0,0,.5); }
.modal__content { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal__header { border-bottom: 1px solid var(--line); padding: 12px 18px; }
.modal__body { padding: 14px 18px; }
.modal__footer, .modal__buttons { padding: 10px 18px; gap: 8px; }
.modal__title { color: var(--green-dark); font-weight: 800; }
.modal__close { color: var(--ink-2); }
.modal__close:hover { background: var(--crit-soft); color: #B03A2E; }
.modal__message { color: var(--ink); }
.modal--confirm { background: rgba(0,0,0,.55); }
.modal--confirm .modal__content { border: 1px solid var(--line); }
/* alertas */
.alert--success { background: var(--ok-soft); color: #1E7A45; border: 1px solid #A9DDBB; }
.alert--error { background: var(--crit-soft); color: #B03A2E; border: 1px solid #F1B6AE; }
.alert--warning { background: var(--warn-soft); color: #92400E; border: 1px solid #F5D08A; }
.alert--info { background: var(--wet-soft); color: #1D4ED8; border: 1px solid #B6D4F3; }
.empty-state, .text-tertiary { color: var(--ink-2); }
/* estados/badges genéricos claros */
.badge--success, .status-badge.badge-lida { background: var(--ok-soft); color: #1E7A45; }
.badge--danger, .status-badge.badge-nao-lida { background: var(--crit-soft); color: #B03A2E; }
.badge--warning, .status-badge.badge-parcial { background: var(--warn-soft); color: #92400E; }

/* ── login (mesma moldura do client) ────────────────────── */
.login-body { background: var(--bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-frame { width: 1000px; max-width: 100%; min-height: 560px; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
@media (max-width: 820px) { .login-frame { grid-template-columns: 1fr; } .lp { min-height: 260px; } }
.lp { background: var(--olive-2); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 36px 40px; position: relative; overflow: hidden; }
.lp .brand { padding: 0; }
.lp .brand img { width: 44px; height: 44px; }
.lp .brand b { font-size: 18px; }
.lp .bigb { font-size: 32px; font-weight: 900; letter-spacing: -.01em; line-height: 1.15; position: relative; z-index: 1; }
.lp .bigb small { display: block; font-size: 14px; font-weight: 500; opacity: .75; margin-top: 8px; max-width: 34ch; line-height: 1.4; }
.lp .strip { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.lp .strip span { background: rgba(255,255,255,.10); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; }
.lp svg.bg { position: absolute; right: -40px; bottom: -30px; width: 280px; height: 280px; opacity: .16; }
.lf { display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--bg); }
.lf .auth-form { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px; width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.lf h2 { font-size: 20px; font-weight: 800; color: var(--green-dark); margin: 0 0 6px; }
.lf .links { display: flex; justify-content: space-between; font-size: 12px; color: var(--green); margin-top: 4px; }
.lf .links span { color: var(--ink-2); }