/* =====================================================================
   LOOKAHEAD · SETPAR — Design System v2
   Leveza + precisão + engenharia. Superfícies claras, hairlines,
   amarelo usado apenas como acento pontual.
   ===================================================================== */

:root {
    /* Cor */
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --border: #e6e9ee;
    --border-2: #eef1f5;
    --ink: #1b2531;
    --ink-2: #5b6675;
    --ink-3: #9aa4b1;
    --brand: #1e3a5f;
    --brand-2: #2e578c;
    --brand-soft: #eaf0f8;
    --accent: #f0b429;
    --accent-soft: #fdf3d7;
    --ok: #177e4d;
    --ok-soft: #e4f4ec;
    --danger: #cc4444;
    --danger-soft: #fbe9e9;
    --warn: #b26a0e;
    --warn-soft: #fdf1de;
    --info: #2b6cb8;
    --info-soft: #e8f0fa;
    --roxo: #6d5bd0;
    --roxo-soft: #eeebfb;

    /* Forma */
    --r-s: 8px;
    --r-m: 12px;
    --r-l: 16px;
    --sombra: 0 1px 2px rgba(27, 37, 49, .04), 0 10px 30px -18px rgba(27, 37, 49, .18);
    --sombra-alta: 0 24px 70px -24px rgba(27, 37, 49, .38);

    /* Tipo */
    --fonte: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body {
    margin: 0; min-height: 100%;
    font-family: var(--fonte);
    font-size: 14px; line-height: 1.55;
    color: var(--ink); background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: 21px; }
h1:focus, h1:focus-visible { outline: none; }
h2 { font-size: 16px; }
h3 { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0; }

::selection { background: var(--brand-soft); }

/* ---------- Boot / splash ---------- */

.boot {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; background: var(--bg);
}
.boot-nome { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 10px; }
.boot-sub { color: var(--ink-3); font-size: 13px; }
.boot-barra { width: 180px; height: 3px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 22px; }
.boot-barra div { height: 100%; width: 45%; border-radius: 99px; background: var(--brand); animation: boot-slide 1.1s ease-in-out infinite alternate; }
@keyframes boot-slide { from { margin-left: -10%; } to { margin-left: 65%; } }

#blazor-error-ui {
    background: var(--warn-soft); color: var(--warn);
    bottom: 0; left: 0; right: 0; padding: .7rem 1.2rem;
    display: none; position: fixed; z-index: 2000;
    border-top: 1px solid #ecd9b0;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .8rem; top: .6rem; }

/* ---------- Shell ---------- */

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topnav {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 28px;
    height: 58px; padding: 0 28px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.brand-mark {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--brand); color: #fff;
    display: grid; place-items: center;
}
.brand-mark svg { width: 17px; height: 17px; }
.brand-text { font-size: 15.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.brand-text em { font-style: normal; color: var(--ink-3); font-weight: 500; font-size: 11px; margin-left: 7px; letter-spacing: .09em; }

.topnav-links { display: flex; gap: 4px; flex: 1; }
.topnav-links a {
    position: relative; padding: 7px 13px; border-radius: 9px;
    color: var(--ink-2); font-weight: 500; font-size: 13.5px;
    text-decoration: none !important;
    transition: color .14s, background .14s;
}
.topnav-links a:hover { color: var(--ink); background: var(--surface-2); }
.topnav-links a.active { color: var(--brand); font-weight: 600; }
.topnav-links a.active::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px;
    height: 2px; border-radius: 2px; background: var(--accent);
}

.topnav-right { display: flex; align-items: center; gap: 10px; }
.obra-troca { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.obra-select { width: auto; max-width: 230px; padding: 4px 8px; font-size: 12.5px; font-weight: 600; border-radius: 8px; }
.obra-sub { font-size: 10.5px; color: var(--ink-3); padding-right: 2px; }
.obra-chip { text-align: right; line-height: 1.25; }
.obra-chip b { display: block; font-size: 12.5px; font-weight: 600; }
.obra-chip span { font-size: 11px; color: var(--ink-3); }
.avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    background: linear-gradient(140deg, var(--brand), var(--brand-2));
    color: #fff; font-size: 11.5px; font-weight: 650;
    display: grid; place-items: center; cursor: default;
}

.page-wrap { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 30px 28px 60px; }
.foot { text-align: center; color: var(--ink-3); font-size: 11.5px; padding: 18px; border-top: 1px solid var(--border-2); }

.page { animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ---------- Cabeçalho de página ---------- */

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.overline { font-size: 10.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.page-sub { color: var(--ink-2); font-size: 13.5px; margin-top: 5px; max-width: 720px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Superfícies ---------- */

.surface {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-l); box-shadow: var(--sombra);
}
.surface-pad { padding: 20px 22px; }
.surface h3 { margin-bottom: 14px; }

.hair-rows > * + * { border-top: 1px solid var(--border-2); }

/* ---------- Botões ---------- */

.btn {
    font: inherit; font-weight: 550; font-size: 13.5px; cursor: pointer;
    border-radius: 10px; padding: 8px 15px;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    display: inline-flex; align-items: center; gap: 7px;
    transition: background .14s, border-color .14s, transform .1s, box-shadow .14s;
}
.btn:hover { background: var(--surface-2); border-color: #d6dbe3; }
.btn:active { transform: translateY(1px); }
.btn.primario { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primario:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.suave { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.btn.suave:hover { background: #dde8f4; }
.btn.fantasma { border-color: transparent; background: transparent; color: var(--info); }
.btn.perigo { color: var(--danger); }
.btn.mini { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---------- Inputs ---------- */

.campo label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.campo .req { color: var(--danger); }
.campo input, .campo select, .campo textarea,
.controle {
    font: inherit; font-size: 13.5px; width: 100%;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 11px; background: var(--surface); color: var(--ink);
    transition: border-color .14s, box-shadow .14s;
}
.campo textarea { resize: vertical; min-height: 66px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .controle:focus {
    outline: none; border-color: var(--brand-2);
    box-shadow: 0 0 0 3px rgba(46, 87, 140, .13);
}
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.form-grade .cheio { grid-column: 1 / -1; }
.form-erro {
    background: var(--danger-soft); color: var(--danger);
    border-radius: 10px; padding: 9px 13px; font-size: 13px; font-weight: 550; margin-bottom: 13px;
}

/* Banner de identificação automática (espelha o app real de Restrições) */
.form-ola {
    display: flex; align-items: center; gap: 12px;
    background: var(--info-soft); border: 1px solid #d4e3f5;
    border-radius: 12px; padding: 11px 14px; margin-bottom: 15px;
}
.fo-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: linear-gradient(140deg, var(--brand), var(--brand-2)); color: #fff;
    font-size: 11px; font-weight: 650; display: grid; place-items: center;
}
.fo-texto { font-size: 12.5px; color: #23517e; line-height: 1.45; }
.fo-texto b { display: block; font-size: 13px; }

.campo label em { font-style: normal; font-weight: 500; color: var(--ink-3); font-size: 11px; margin-left: 4px; }
.campo input[disabled] { background: var(--surface-2); color: var(--ink-2); cursor: not-allowed; }
.fo-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fo-chips .pill button { border: none; background: none; cursor: pointer; color: inherit; font-size: 10px; padding: 0 0 0 3px; }

.busca { position: relative; }
.busca input { padding-left: 32px; }
.busca::before {
    content: ""; position: absolute; left: 11px; top: 50%; translate: 0 -50%;
    width: 13px; height: 13px; border: 1.6px solid var(--ink-3); border-radius: 50%;
    box-shadow: 4.5px 4.5px 0 -3px var(--ink-3);
}

.alternar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.alternar input { display: none; }
.alternar .trilho { width: 32px; height: 18px; border-radius: 99px; background: var(--border); position: relative; transition: background .16s; flex: none; }
.alternar .trilho::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .16s; }
.alternar input:checked + .trilho { background: var(--brand); }
.alternar input:checked + .trilho::after { left: 16px; }

/* ---------- Pills / badges ---------- */

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.p-liberado { background: var(--ok-soft); color: var(--ok); }
.p-nao { background: var(--danger-soft); color: var(--danger); }
.p-neutro { background: #eef1f5; color: var(--ink-2); }
.p-aberta { background: var(--danger-soft); color: var(--danger); }
.p-andamento { background: var(--info-soft); color: var(--info); }
.p-resolvida { background: var(--ok-soft); color: var(--ok); }
.p-reaberta { background: var(--roxo-soft); color: var(--roxo); }
.p-material { background: var(--warn-soft); color: var(--warn); }
.p-maodeobra { background: var(--info-soft); color: var(--info); }
.p-equipamento { background: var(--roxo-soft); color: var(--roxo); }
.p-projeto { background: #e7eef7; color: var(--brand-2); }
.p-interna { background: #eef1f5; color: var(--ink-2); }
.p-externa { background: var(--accent-soft); color: var(--warn); }
.p-informacao { background: #e1f3f4; color: #0e7480; }
.p-aprovacao { background: #fbe7f1; color: #b0407c; }
.p-liberacao { background: var(--ok-soft); color: var(--ok); }
.p-vencida { background: var(--danger); color: #fff; }
.p-acento { background: var(--accent-soft); color: var(--warn); }

/* ---------- Faixa de KPIs (sem caixas — hairlines) ---------- */

.kpi-faixa {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-l); box-shadow: var(--sombra); overflow: hidden;
    margin-bottom: 20px;
}
.kpi { padding: 18px 22px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.kpi + .kpi::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--border-2); }
.kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.kpi-valor { font-size: 27px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi.ok .kpi-valor { color: var(--ok); }
.kpi.atencao .kpi-valor { color: var(--warn); }
.kpi.critico .kpi-valor { color: var(--danger); }
.kpi-detalhe { font-size: 11.5px; color: var(--ink-3); }

/* ---------- Home ---------- */

.home-hero { text-align: center; padding: 44px 0 34px; }
.home-hero .overline { margin-bottom: 10px; }
.home-hero h1 { font-size: 40px; font-weight: 650; letter-spacing: -.03em; }
.home-hero p { color: var(--ink-2); font-size: 15px; margin-top: 8px; }

.home-contexto {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l);
    box-shadow: var(--sombra); overflow: hidden; margin: 26px auto 40px; max-width: 980px;
}
.home-contexto .kpi { padding: 16px 20px; }

.home-modulos { max-width: 980px; margin: 0 auto; }
.home-modulos .overline { margin-bottom: 12px; }
.grade-modulos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grade-modulos .largo { grid-column: 1 / -1; }

.module-card {
    display: flex; align-items: center; gap: 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-l); box-shadow: var(--sombra);
    padding: 20px 22px; text-decoration: none !important; color: var(--ink);
    transition: transform .16s ease, border-color .16s, box-shadow .16s;
}
.module-card:hover { transform: translateY(-2px); border-color: #c9d4e2; box-shadow: 0 16px 40px -20px rgba(27,37,49,.28); }
.module-card:hover .module-arrow { transform: translateX(4px); color: var(--brand); }
.module-card.off { opacity: .55; pointer-events: none; }
.module-icon {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center;
}
.module-icon svg { width: 21px; height: 21px; }
.module-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.module-title { font-weight: 620; font-size: 14.5px; }
.module-desc { color: var(--ink-2); font-size: 12.5px; }
.module-meta { color: var(--ink-3); font-size: 11.5px; margin-top: 4px; }
.module-arrow { color: var(--ink-3); font-size: 17px; transition: transform .16s, color .16s; }

.home-breve { display: flex; gap: 8px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.home-breve span { font-size: 12px; color: var(--ink-3); border: 1px dashed var(--border); border-radius: 99px; padding: 5px 14px; }

/* ---------- Painel ---------- */

.grade-2 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: start; }

.fase-linha { display: grid; grid-template-columns: minmax(150px, 240px) 1fr 44px; align-items: center; gap: 14px; padding: 8px 0; }
.fase-linha .nome { font-size: 12.5px; font-weight: 550; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fase-linha .pct { font-size: 12px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.barra { height: 6px; border-radius: 99px; background: var(--border-2); overflow: hidden; }
.barra > div { height: 100%; border-radius: 99px; background: var(--brand-2); transition: width .4s ease; }
.barra.cheia > div { background: var(--ok); }

.tabela-limpa { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-limpa th {
    text-align: left; font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.tabela-limpa td { padding: 9px 10px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
.tabela-limpa tr:last-child td { border-bottom: none; }
.tabela-limpa tbody tr { transition: background .12s; }
.tabela-limpa tbody tr:hover { background: var(--surface-2); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }

.rest-mini { padding: 12px 0; }
.rest-mini .cab { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.rest-mini .desc { font-size: 13px; font-weight: 570; }
.rest-mini .meta { font-size: 12px; color: var(--ink-2); margin-top: 3px; }

.prazo-cartao { display: flex; flex-direction: column; gap: 4px; }
.prazo-cartao .data { font-size: 23px; font-weight: 650; letter-spacing: -.02em; }
.prazo-cartao .nota { font-size: 12px; color: var(--ink-2); }

/* ---------- Gantt ---------- */

.gt {
    overflow: hidden; --row-h: 30px;   /* densidade do Project */
    --w-lista: 700px;
}
.gt-toolbar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.gt-toolbar .controle { width: auto; }
.gt-toolbar .esticar { flex: 1; }
.gt-zoom { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.gt-zoom button { font: inherit; font-size: 12.5px; border: none; background: var(--surface); color: var(--ink-2); padding: 7px 11px; cursor: pointer; }
.gt-zoom button + button { border-left: 1px solid var(--border); }
.gt-zoom button.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* Cabeçalho fixo (fora do scroll) */
.gt-head { display: flex; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.gt-lista-head {
    flex: 0 0 var(--w-lista); min-width: 0; overflow: hidden;
    height: 52px; align-content: end; padding-bottom: 8px;
    font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 650;
}
.gt-tl-head { flex: 1; overflow: hidden; }

/* Corpo único: lista + gráfico rolam juntos, sempre alinhados.
   align-items:flex-start é essencial — os filhos ficam com a altura do CONTEÚDO,
   e só o gt-body rola na vertical (senão cada lado clipa/rola por conta própria).
   A altura acompanha a janela: tela maior = mais linhas visíveis, como no Project. */
.gt-body { display: flex; align-items: flex-start; max-height: calc(100vh - 330px); min-height: 280px; overflow-y: auto; scrollbar-width: none; cursor: grab; }
.gt-body::-webkit-scrollbar { display: none; }
.gt-body.panning { cursor: grabbing; user-select: none; }
.gt-body.panning .gt-barra { pointer-events: none; }

.gt-lista { flex: 0 0 var(--w-lista); min-width: 0; overflow: hidden; }
.gt-h {
    flex: 0 0 7px; cursor: col-resize; touch-action: none;
    position: relative; z-index: 6;
}
.gt-h:hover, .gt-h:active { background: rgba(46, 87, 140, .18); border-radius: 3px; }
.gt-h-lista { border-right: 1px solid var(--border); margin-left: -7px; background: #eef2f7; }
.gt-h-lista::after {
    content: ""; position: absolute; left: 2px; top: 50%; width: 2px; height: 28px; margin-top: -14px;
    border-left: 1px dotted #8b97a8; border-right: 1px dotted #8b97a8;
}
.gt-h-lista:hover, .gt-h-lista:active { background: #dbe6f5; }
.gt-h-lista:hover::after, .gt-h-lista:active::after { border-color: var(--brand-2); }
.gt-esp { flex: 0 0 7px; align-self: stretch; border-right: 1px solid var(--border); margin-left: -7px; }
.gt-esp.gt-h-lista { position: sticky; top: 0; }   /* a pega fica visível enquanto a grade rola */
.gt-esp[data-dica]::after { left: 14px; top: 40px; transform: none; }
.gt-esp[data-dica]:hover::after { transform: none; }
.gt-cel .gt-h { position: absolute; right: -4px; top: -6px; bottom: -6px; width: 8px; }
.gt-timeline { flex: 1; overflow-x: auto; scrollbar-width: none; touch-action: none; }
.gt-timeline::-webkit-scrollbar { display: none; }

.gt-grid {
    display: grid;
    /* Fallback VÁLIDO (todas as vars com valor padrão): se o template inline falhar,
       a grade degrada para colunas razoáveis em vez de colapsar numa coluna só */
    grid-template-columns: 28px var(--w-id, 38px) var(--w-eap, 56px) minmax(150px, 1fr) var(--w-dur, 56px) var(--w-ini, 104px) var(--w-fim, 104px) var(--w-pct, 50px) var(--w-pred, 96px) var(--w-folga, 56px) 52px;
    align-items: center;
}
/* Células com grade vertical VISÍVEL, como Excel/Project — sem misturar conteúdo */
.gt-cel {
    padding: 0 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    position: relative; height: 100%; display: flex; align-items: center;
    border-right: 1px solid #dfe4ec;
}
.gt-cel:last-child { border-right: none; }
.gt-lista-head .gt-cel { border-right-color: var(--border); overflow: visible; }   /* alça de arrastar 100% clicável */
.gt-cel.eap { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gt-cel.num { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gt-cel.pctc { font-weight: 620; color: var(--ink-3); font-size: 10.5px; }

.gt-meses { display: flex; height: 26px; }
.gt-mes { border-right: 1px solid var(--border-2); font-size: 10.5px; font-weight: 620; color: var(--ink-2); padding: 5px 4px 0; white-space: nowrap; overflow: hidden; }
.gt-semanas { display: flex; height: 26px; border-top: 1px solid var(--border-2); }
.gt-sem { border-right: 1px solid var(--border-2); font-size: 10px; color: var(--ink-3); padding: 5px 5px 0; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }

.gt-linha { height: var(--row-h); border-bottom: 1px solid #dfe4ec; cursor: pointer; transition: background .1s; }
.gt-linha.par { background: #f6f8fb; }                 /* zebra, como no Project */
.gt-linha.resumo { background: #e6eaf0; }              /* etapas em cinza mais escuro */
.gt-linha.resumo .gt-cel { border-right-color: #d7dde5; }
.gt-linha.hv { background: var(--brand-soft); }
.gt-linha.sel { background: #d8e3f2; box-shadow: inset 3px 0 0 var(--brand-2); }
.gt-blinha.sel { background: rgba(46, 87, 140, .10); }
.gt-nome { display: flex; align-items: center; gap: 5px; }
.gt-nome .seta { cursor: pointer; border: none; background: none; padding: 0 2px; color: var(--ink-3); font-size: 10px; flex: none; transition: transform .15s; }
.gt-nome .seta.fechada { transform: rotate(-90deg); }
.gt-nome .txt {
    font-size: 11.5px; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* uma linha, como o Project (nome completo no hover) */
}
.gt-nome .txt.forte { font-weight: 650; color: var(--ink); }

.gt-canvas { position: relative; }
/* Área da janela virtual ainda não renderizada: listras na altura da linha, nunca um buraco branco */
.gt-vazio {
    background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-h) - 1px), #e6eaf0 calc(var(--row-h) - 1px), #e6eaf0 var(--row-h));
    pointer-events: none;
}
.gt-grade { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-2); }
.gt-hoje { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); z-index: 4; }
.gt-hoje::before { content: "hoje"; position: sticky; top: 6px; display: inline-block; background: var(--danger); color: #fff; font-size: 9px; font-weight: 650; padding: 1px 6px; border-radius: 0 6px 6px 0; margin-left: 2px; }
.gt-janela { position: absolute; top: 0; bottom: 0; background: rgba(240, 180, 41, .07); border-left: 1px dashed #dfae35; border-right: 1px dashed #dfae35; z-index: 1; }
.gt-janela::before { content: "janela lookahead"; position: sticky; top: 24px; display: inline-block; white-space: nowrap; font-size: 9px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--warn); padding: 2px 8px; }

.gt-deps { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; }
.gt-deps path { fill: none; stroke: #93a6bd; stroke-width: 1.4; }

/* Edição na grade (mini-Project fundido ao gantt) */
.gt-in {
    font: inherit; font-size: 11px; width: 100%;
    border: 1px solid transparent; border-radius: 5px; padding: 1px 4px;
    background: transparent; color: var(--ink);
    transition: border-color .13s, background .13s, box-shadow .13s;
    font-variant-numeric: tabular-nums;
}
.gt-in:hover { border-color: var(--border); background: var(--surface); }
.gt-in:focus { outline: none; border-color: var(--brand-2); background: var(--surface); box-shadow: 0 0 0 3px rgba(46,87,140,.12); }
.gt-in.pred-in { text-align: center; }
/* Grade limpa: placeholder e ícone de calendário só aparecem ao passar o mouse na linha */
.gt-in.pred-in::placeholder { color: transparent; font-size: 10.5px; transition: color .12s; }
.gt-linha:hover .gt-in.pred-in::placeholder,
.gt-in.pred-in:focus::placeholder { color: #c3ccd8; }
.gt-in[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; transition: opacity .12s; }
.gt-linha:hover .gt-in[type="date"]::-webkit-calendar-picker-indicator,
.gt-in[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: .6; }

.ind-crit { color: #c0392b; font-size: 12px; line-height: 1; }

/* Edição estilo Project: separador da toolbar, nome editável e barras arrastáveis */
.gt-sep-v { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.gt-in.nome-in { font-size: 11.5px; text-align: left; min-width: 0; flex: 1; }
.gt-linha.critica .nome-in { color: #b3372e; }
/* Nome quebra em até 2 linhas dentro da altura da linha (30px) —
   fonte 11px + linha 13px = 26px: as duas linhas cabem SEM cortar letra */
.gt-nome textarea.nome-in {
    resize: none; overflow: hidden; height: 28px;
    font-size: 11px; line-height: 13px; padding: 1px 4px;
    white-space: pre-wrap; word-break: break-word;
    font-family: inherit; display: block; text-overflow: clip;
}
.gt-nome .txt.forte {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    font-size: 11px; line-height: 13px;
}

/* Véu de carregando (troca de obra re-renderiza a grade inteira) */
.veu-carregando {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(255, 255, 255, .65); backdrop-filter: blur(1.5px);
    display: flex; align-items: center; justify-content: center; gap: 12px;
    font-size: 14px; font-weight: 600; color: var(--brand);
}
.veu-carregando .giro {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid var(--brand-soft); border-top-color: var(--brand);
    animation: veu-gira .7s linear infinite;
}
@keyframes veu-gira { to { transform: rotate(360deg); } }
.gt-barra.resumo-b { cursor: default; }

/* Caminho crítico — vermelho como no Project */
.gt-linha.critica .txt { color: #b3372e; }
.gt-linha.critica .txt.forte { color: #a02c22; }
.gt-barra.critica { background: #f5cdc8; }
.gt-barra.critica .prog { background: #c0392b; }
.pill.p-critica { background: #fbe3e0; color: #a02c22; }

/* Impactadas pela última alteração — âmbar suave persistente */
.gt-linha.impacto { background: #fff4d9; }
.gt-blinha.impacto { background: rgba(240, 180, 41, .13); }

/* Seletor de colunas */
.col-picker { position: relative; }
.col-veu { position: fixed; inset: 0; z-index: 90; }
.col-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 95;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--sombra-alta);
    padding: 10px 6px; min-width: 180px;
}
.col-menu-titulo { font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding: 2px 10px 8px; }
.col-item {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.col-item:hover { background: var(--surface-2); }
.col-item.trava { color: var(--ink-3); cursor: default; }
.col-item input { accent-color: var(--brand); }
.col-menu-fixo {
    position: fixed; z-index: 96; max-height: 70vh; overflow-y: auto;
    text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--ink);
}
.col-acao { border: none; background: none; width: 100%; text-align: left; font: inherit; }
.col-sep { height: 1px; background: var(--border-2); margin: 6px 4px; }

.gt-blinha { position: relative; height: var(--row-h); }
.gt-blinha.par { background: #f8fafc; }
.gt-blinha.resumo { background: #eef1f5; }
.gt-blinha.hv { background: rgba(46, 87, 140, .06); }

/* Marco: losango preto com a data ao lado, como no Project */
.gt-marco {
    position: absolute; top: calc(var(--row-h) / 2 - 5px); width: 10px; height: 10px;
    background: #26313f; transform: rotate(45deg); z-index: 2;
}
.gt-marco.critica { background: #c0392b; }
.gt-marco-data {
    position: absolute; top: calc(var(--row-h) / 2 - 7px);
    font-size: 10px; color: var(--ink-2); z-index: 2; font-variant-numeric: tabular-nums;
}

/* Coluna de indicadores (ⓘ) */
.gt-ind { justify-content: center; padding: 0 2px; }
.gt-ind .ind-ok { color: #2f6fbd; font-weight: 700; font-size: 12px; }
.gt-ind .ind-atraso { color: #c0392b; font-size: 12px; }
.gt-ind .ind-marco { color: #26313f; font-size: 9px; }
/* Barras finas e retas, proporção do Project */
.gt-barra {
    position: absolute; top: calc(var(--row-h) / 2 - 6px); height: 12px; border-radius: 2px;
    background: #ccdcee; z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(20, 35, 55, .18);   /* contorno fino, como no Project */
    transition: filter .12s;
}
.gt-barra:hover { filter: brightness(.94); }
.gt-barra .prog { height: 100%; background: #2f6fbd; border-radius: 2px 0 0 2px; }
.gt-barra.completa { background: #d9efe3; }
.gt-barra.completa .prog { background: var(--ok); opacity: .85; }
/* Pacote resumo: barra preta com "orelhas" para baixo nas pontas, como o Project */
.gt-barra.resumo-b { top: calc(var(--row-h) / 2 - 5px); height: 6px; border-radius: 0; background: #99a7b8; overflow: visible; }
.gt-barra.resumo-b .prog { background: #26313f; border-radius: 0; }
.gt-barra.resumo-b::before, .gt-barra.resumo-b::after {
    content: ""; position: absolute; top: 5px; width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #26313f;
}
.gt-barra.resumo-b::before { left: 0; }
.gt-barra.resumo-b::after { right: 0; }
.gt-barra.flash { animation: barra-flash 1.4s ease; }
@keyframes barra-flash {
    0%, 40% { box-shadow: 0 0 0 4px rgba(240, 180, 41, .55); }
    100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0); }
}

.gt-contador { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.gt-tip {
    position: fixed; z-index: 400; pointer-events: none;
    background: #1d2836; color: #f1f5fa; border-radius: 12px;
    padding: 11px 14px; max-width: 380px; font-size: 12px; line-height: 1.5;
    box-shadow: var(--sombra-alta);
}
.gt-tip .t-nome { font-weight: 650; font-size: 12.5px; margin-bottom: 3px; }
.gt-tip .t-datas { color: #cdd9e8; font-variant-numeric: tabular-nums; }
.gt-tip .t-info { color: #aebccd; }
.gt-tip .t-equipe { color: #aebccd; }
.gt-tip .t-pred { color: #f0c869; margin-top: 3px; font-variant-numeric: tabular-nums; }

.gt-legenda { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--ink-2); }
.gt-legenda i { display: inline-block; width: 14px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Simulador de impacto ---------- */

.sim-resultado { border-radius: var(--r-m); padding: 16px 18px; margin-top: 16px; }
.sim-resultado.impacta { background: var(--danger-soft); }
.sim-resultado.ok { background: var(--ok-soft); }
.sim-resultado .titulo { font-weight: 650; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.sim-resultado.impacta .titulo { color: var(--danger); }
.sim-resultado.ok .titulo { color: var(--ok); }
.sim-resultado .datas { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.sim-lista { margin-top: 12px; }
.sim-lista .item { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 6px 0; border-top: 1px solid rgba(0,0,0,.05); }
.sim-lista .delta { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Lookahead ---------- */

.la-semanas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 18px; }
.la-sem {
    border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface);
    padding: 10px 12px; cursor: pointer; text-align: left; font: inherit;
    transition: border-color .14s, box-shadow .14s, transform .12s;
}
.la-sem:hover { border-color: #c9d4e2; transform: translateY(-1px); }
.la-sem.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30, 58, 95, .12); }
.la-sem .s-t { font-size: 12px; font-weight: 650; }
.la-sem .s-d { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.la-sem .s-b { display: flex; height: 4px; border-radius: 99px; overflow: hidden; background: var(--border-2); margin-top: 8px; }
.la-sem .s-b i { height: 100%; }
.la-sem .s-b .lib { background: var(--ok); }
.la-sem .s-b .nao { background: var(--danger); }
.la-sem .s-n { font-size: 10.5px; color: var(--ink-3); margin-top: 5px; }

.la-fase { margin-bottom: 6px; }
.la-fase-cab {
    display: flex; align-items: baseline; gap: 10px;
    padding: 14px 22px 8px; flex-wrap: wrap;
}
.la-fase-cab b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.la-fase-cab span { font-size: 11.5px; color: var(--ink-3); }

.la-linha {
    display: grid;
    grid-template-columns: minmax(230px, 1.5fr) minmax(130px, .9fr) 120px 200px minmax(180px, 1.1fr);
    gap: 14px; align-items: center; padding: 12px 22px;
    border-top: 1px solid var(--border-2);
    transition: background .12s;
}
.la-linha:hover { background: var(--surface-2); }
.la-atv .n { font-size: 13px; font-weight: 570; }
.la-atv .e { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.la-equipe { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.la-equipe b { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.la-datas { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.la-datas span { display: block; font-size: 10.5px; color: var(--ink-3); }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.seg button {
    font: inherit; font-size: 11.5px; font-weight: 620; cursor: pointer;
    border: none; background: transparent; color: var(--ink-3);
    padding: 6px 11px; transition: background .13s, color .13s;
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button.lib-on { background: var(--ok); color: #fff; }
.seg button.nao-on { background: var(--danger); color: #fff; }

.la-rest { min-width: 0; }
.la-rest .r-desc { font-size: 11.5px; color: var(--ink-2); margin: 3px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.la-rest input {
    font: inherit; font-size: 12px; width: 100%;
    border: 1px solid transparent; border-radius: 8px; padding: 4px 8px;
    background: transparent; color: var(--ink); transition: border-color .13s, background .13s;
}
.la-rest input:hover { border-color: var(--border); background: var(--surface); }
.la-rest input:focus { outline: none; border-color: var(--brand-2); background: var(--surface); }

/* ---------- Plano (mini-Project) ---------- */

.pl-scroll {
    overflow-x: auto; max-height: 640px; overflow-y: auto;
    cursor: grab; scrollbar-width: none; touch-action: none;
}
.pl-scroll::-webkit-scrollbar { display: none; }
.pl-scroll.panning { cursor: grabbing; user-select: none; }
.pl-tabela { min-width: 880px; table-layout: fixed; width: 100%; }
.pl-tabela thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 3; overflow: visible; white-space: nowrap; }
.pl-tabela th .pl-h { position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; }
.pl-tabela td { padding: 5px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Divisor vermelho após a coluna Atividade — separa a "planilha" das datas */
.pl-tabela th:nth-child(2), .pl-tabela td:nth-child(2) { border-right: 2px solid #d05656; }

.gt-reset-btn { display: none; }
.gt-reset-btn.mostrar { display: inline-flex; }
.pl-resumo td { background: var(--surface-2); font-weight: 620; }
.pl-tabela tbody tr { cursor: pointer; }
.pl-tabela tr.sel td { background: #d8e3f2; }
.pl-tabela tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--brand-2); }
.pl-nome { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pl-nome .seta { cursor: pointer; border: none; background: none; padding: 0; width: 15px; flex: none; color: var(--ink-3); font-size: 9.5px; transition: transform .15s; }
.pl-nome .seta.fechada { transform: rotate(-90deg); }
.pl-nome .pl-forte { font-weight: 640; color: var(--ink); }
.pl-nome span[title] {
    /* quebra automática em até 2 linhas, como no Gantt */
    white-space: normal; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.3; min-width: 0;
}
.pl-in {
    font: inherit; font-size: 12.5px; width: 100%;
    border: 1px solid transparent; border-radius: 8px; padding: 4px 7px;
    background: transparent; color: var(--ink);
    transition: border-color .13s, background .13s, box-shadow .13s;
}
.pl-in:hover { border-color: var(--border); background: var(--surface); }
.pl-in:focus { outline: none; border-color: var(--brand-2); background: var(--surface); box-shadow: 0 0 0 3px rgba(46,87,140,.12); }
.pl-centro { text-align: center; }
.pred-in { text-align: center; font-variant-numeric: tabular-nums; }
.pred-in::placeholder { color: #c3ccd8; font-size: 11px; }

/* Bolinha de ajuda "?" — passe o mouse para ver como escrever os vínculos */
.dica {
    display: inline-grid; place-items: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--info-soft); color: var(--info);
    font-size: 10px; font-weight: 700; cursor: help;
    vertical-align: 1px; text-transform: none; letter-spacing: 0;
}
.dica:hover { background: var(--info); color: #fff; }

.pl-flash td { animation: pl-flash 1.6s ease; }
@keyframes pl-flash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
.pl-resumo.pl-flash td { animation: pl-flash-r 1.6s ease; }
@keyframes pl-flash-r { 0% { background: var(--accent-soft); } 100% { background: var(--surface-2); } }

/* ---------- Restrições ---------- */

.rc-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.rc-filtros .controle { width: auto; }
.rc-filtros .busca { flex: 1; min-width: 220px; }
.rc-filtros .busca input { width: 100%; }

.rc-lista { display: flex; flex-direction: column; gap: 12px; }
.rc-card {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-l); box-shadow: var(--sombra);
    padding: 16px 20px 14px 24px; overflow: hidden;
    transition: border-color .15s, transform .13s;
}
.rc-card:hover { border-color: #cdd7e3; }
.rc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.rc-card.s-aberta::before { background: var(--danger); }
.rc-card.s-emandamento::before { background: var(--info); }
.rc-card.s-resolvida::before { background: var(--ok); }
.rc-card.s-reaberta::before { background: var(--roxo); }
.rc-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rc-desc { font-size: 14px; font-weight: 600; line-height: 1.4; }
.rc-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.rc-meta .sep { color: var(--border); }
.rc-info { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.6; }
.rc-info b { color: var(--ink); font-weight: 600; }
.rc-acoes { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.rc-hist { margin-top: 10px; }
.rc-hist summary { cursor: pointer; font-size: 12px; color: var(--info); font-weight: 550; list-style: none; }
.rc-hist summary::before { content: "▸ "; }
.rc-hist[open] summary::before { content: "▾ "; }
.rc-hist .evento { display: flex; gap: 10px; font-size: 12px; color: var(--ink-2); padding: 5px 0 5px 10px; border-left: 2px solid var(--border); margin-left: 3px; }
.rc-hist .evento b { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 550; flex: none; }

/* ---------- Importação (wizard) ---------- */

.wz-passos { display: flex; align-items: center; gap: 0; margin-bottom: 22px; }
.wz-passo { display: flex; align-items: center; gap: 9px; }
.wz-num {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 12px; font-weight: 650;
    background: var(--border-2); color: var(--ink-3);
    transition: background .2s, color .2s;
}
.wz-passo.on .wz-num { background: var(--brand); color: #fff; }
.wz-passo.feito .wz-num { background: var(--ok-soft); color: var(--ok); }
.wz-rotulo { font-size: 12.5px; font-weight: 570; color: var(--ink-3); }
.wz-passo.on .wz-rotulo { color: var(--ink); }
.wz-tra { flex: 1; height: 1px; background: var(--border); margin: 0 14px; min-width: 24px; }

.upload-zona {
    border: 1.5px dashed #c8d2df; border-radius: var(--r-l);
    padding: 40px 24px; text-align: center; color: var(--ink-2);
    background: var(--surface-2); transition: border-color .15s, background .15s;
}
.upload-zona:hover { border-color: var(--brand-2); background: #f4f8fc; }
.upload-zona b { color: var(--ink); }
.upload-zona input { margin-top: 14px; }

pre.amostra {
    background: #182433; color: #c8d8ec; border-radius: var(--r-m);
    padding: 14px 16px; font-size: 11.5px; overflow-x: auto; line-height: 1.7; margin: 0;
}

.wz-contagens { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---------- Notas / avisos ---------- */

.nota { border-radius: var(--r-m); padding: 12px 16px; font-size: 13px; line-height: 1.55; }
.nota.info { background: var(--info-soft); color: #23517e; }
.nota.atencao { background: var(--warn-soft); color: var(--warn); }
.nota.erro { background: var(--danger-soft); color: var(--danger); }

.chip-janela {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 99px; padding: 6px 14px; font-size: 12px; font-weight: 570; color: var(--ink-2);
}
.chip-janela::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- Modal ---------- */

.modal-veu {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(20, 30, 44, .42); backdrop-filter: blur(3px);
    display: grid; place-items: center; padding: 20px;
    animation: veu .18s ease both;
}
@keyframes veu { from { opacity: 0; } to { opacity: 1; } }
.modal-caixa {
    background: var(--surface); border-radius: 18px; width: 560px; max-width: 100%;
    max-height: 92vh; overflow-y: auto; box-shadow: var(--sombra-alta);
    animation: caixa .2s ease both;
}
.modal-caixa.larga { width: 680px; }
@keyframes caixa { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 24px 0; }
.modal-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.modal-corpo { padding: 16px 24px 6px; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 22px; }
.modal-fechar { border: none; background: none; font-size: 16px; cursor: pointer; color: var(--ink-3); padding: 2px 6px; border-radius: 7px; }
.modal-fechar:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- Toast ---------- */

.toast-zona { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: #1d2836; color: #f1f5fa; border-radius: 12px;
    padding: 11px 16px; font-size: 13px; max-width: 380px; cursor: pointer;
    box-shadow: var(--sombra-alta);
    display: flex; flex-direction: column; gap: 2px;
    animation: toast-in .22s ease both;
    border-left: 3px solid var(--info);
}
.toast.ok { border-left-color: #3ecf8e; }
.toast.erro { border-left-color: #f27979; }
.toast span { color: #aebccd; font-size: 12px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Empty ---------- */

.empty-state { text-align: center; padding: 44px 20px; color: var(--ink-3); }
.empty-icone { font-size: 22px; margin-bottom: 8px; opacity: .7; }
.empty-titulo { font-size: 13.5px; font-weight: 570; color: var(--ink-2); }
.empty-detalhe { font-size: 12.5px; margin-top: 3px; }

/* ---------- Responsivo ---------- */

/* ---------- Impressão / PDF ---------- */

.print-cab { display: none; }
.gt-eixo-rodape { display: none; }
.print-legenda { display: none; }

@media print {
    @page { size: A4 landscape; margin: 9mm; }

    /* Cores fiéis no papel sem depender da opção "gráficos de fundo" do navegador */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    html, body { background: #fff !important; }

    /* Última página do gantt também lê as datas (eixo espelhado no rodapé) */
    .gt-eixo-rodape { display: block; background: var(--surface-2); border-top: 1px solid var(--border); }

    /* Sem moldura no papel — evita página extra por poucos pixels de borda */
    .gt { border: none; border-radius: 0; box-shadow: none; }

    /* Legenda uma única vez, no topo do relatório — some a versão interativa do rodapé */
    .gt-legenda { display: none !important; }
    .print-legenda {
        display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
        font-size: 10.5px; color: #444; margin: -8px 0 10px;
    }
    .print-legenda i { display: inline-block; width: 14px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

    /* Tabela do Plano: cabeçalho de colunas repete em todas as páginas */
    .pl-tabela thead { display: table-header-group; }
    .pl-tabela thead th { position: static; }
    .topnav, .foot, .gt-toolbar, .page-actions, .toast-zona, .rc-filtros,
    .home-breve, .btn, .rc-acoes, .gt-h, .gt-esp, .modal-veu, .gt-tip { display: none !important; }
    body { background: #fff; font-size: 12px; }
    .page-wrap { max-width: none; padding: 0; }
    .page { animation: none; }
    .surface, .rc-card, .kpi-faixa { box-shadow: none; border-color: #bbb; }
    .rc-card, .kpi-faixa, .la-linha, .gt-linha { break-inside: avoid; }
    .gt-body, .pl-scroll { max-height: none !important; overflow: visible !important; }
    .gt-timeline, .gt-tl-head { overflow: visible !important; }

    /* Gantt e tabela do Plano: escala calculada em laImprimir() para caber na folha.
       zoom (e não transform) — reduz o LAYOUT, então a paginação sai correta. */
    .gt, .pl-tabela {
        zoom: var(--print-scale, 1);
    }
    .gt-zoomavel { zoom: 1 !important; }   /* o zoom de tela (Ctrl+scroll) não entra na impressão */

    .print-cab {
        display: block; font-size: 11.5px; color: #333;
        border-bottom: 1px solid #999; padding-bottom: 6px; margin-bottom: 14px;
    }
    .la-rest input, .pl-in { border: none !important; background: transparent !important; }
    a { color: inherit; text-decoration: none; }
}

@media (max-width: 1080px) {
    .grade-2 { grid-template-columns: 1fr; }
    .la-semanas { grid-template-columns: repeat(3, 1fr); }
    .la-linha { grid-template-columns: 1fr 1fr; row-gap: 8px; }
    .gt { --w-lista: 360px; }
}

@media (max-width: 720px) {
    .topnav { padding: 0 14px; gap: 12px; height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 6px; }
    .topnav-links { order: 3; flex-basis: 100%; overflow-x: auto; padding-bottom: 6px; }
    .obra-chip { display: none; }
    .page-wrap { padding: 20px 14px 40px; }
    .home-hero h1 { font-size: 30px; }
    .grade-modulos { grid-template-columns: 1fr; }
    .la-semanas { grid-template-columns: repeat(2, 1fr); }
    .la-linha { grid-template-columns: 1fr; padding: 12px 16px; }
    .form-grade { grid-template-columns: 1fr; }
    .kpi { padding: 14px 16px; }
    .kpi-valor { font-size: 22px; }
}

/* =====================================================================
   PROJECT LITE — identidade própria do visualizador standalone.
   Clara, nítida e chamativa: topo em gradiente vivo, acentos âmbar,
   upload em destaque. Ativa com .shell.lite (rota /visualizador ou ModoLite).
   ===================================================================== */

.shell.lite {
    --brand: #0b69d4;
    --brand-2: #2f86e6;
    --brand-soft: #e3f0fd;
    --accent: #ff9f1a;
    --accent-soft: #fff3e0;
    --bg: #f4f8fd;
}

.shell.lite .topnav {
    background: linear-gradient(95deg, #0b4fa8 0%, #0b69d4 45%, #0e9ab0 100%);
    border-bottom: none;
    box-shadow: 0 2px 18px -6px rgba(11, 79, 168, .45);
}
.shell.lite .brand-mark { background: #fff; color: #0b69d4; }
.shell.lite .brand-text { color: #fff; font-size: 16.5px; }
.shell.lite .brand-text em { color: #ffd166; }
.shell.lite .topnav-links a { color: rgba(255, 255, 255, .82); font-weight: 550; }
.shell.lite .topnav-links a:hover { color: #fff; background: rgba(255, 255, 255, .13); }
.shell.lite .topnav-links a.active { color: #fff; }
.shell.lite .topnav-links a.active::after { background: #ffd166; }
.shell.lite .obra-chip b { color: #fff; }
.shell.lite .obra-chip span { color: rgba(255, 255, 255, .72); }

/* Título da página com gradiente — chamativo e nítido */
.shell.lite .page-header h1 {
    font-size: 27px;
    background: linear-gradient(92deg, #0b4fa8, #0e9ab0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.shell.lite .overline { color: #0b69d4; }

/* Upload em destaque: a ação principal da ferramenta */
.shell.lite .upload-zona {
    border: 2px dashed #8fbcf0;
    background: linear-gradient(180deg, #ffffff, #eef6ff);
    padding: 34px 26px;
    border-radius: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.shell.lite .upload-zona:hover { border-color: #0b69d4; box-shadow: 0 10px 34px -18px rgba(11, 105, 212, .5); }
.shell.lite .upload-zona > div:first-child { font-size: 15.5px; }

.shell.lite .btn.primario { background: #0b69d4; border-color: #0b69d4; }
.shell.lite .btn.primario:hover { background: #0b4fa8; border-color: #0b4fa8; }

/* Rodapé em azul escuro, fechando o quadro com o topo */
.shell.lite .foot {
    background: linear-gradient(95deg, #0b4fa8 0%, #0b69d4 45%, #0e9ab0 100%);
    border-top: none; color: rgba(255, 255, 255, .88);
}
.shell.lite .foot b { color: #fff; }
.shell.lite .foot a { color: #ffd166; }

/* Barras do Gantt em azul mais forte no Lite */
.shell.lite .gt-barra:not(.resumo-b):not(.completa):not(.critica) { background: #b3d1f0; }
.shell.lite .gt-barra:not(.resumo-b):not(.completa):not(.critica) .prog { background: #1c56a3; }

/* Editor logo de cara, como o Excel: no Lite não há barra do topo nem rodapé,
   a margem é mínima e a grade se estica até o fim da janela em qualquer tamanho */
.shell.lite .page-wrap { padding: 5px; }
.shell.lite .page-wrap:has(.gt) { max-width: none; }
.shell.lite .page { animation: none; }
.shell.lite .gt-body { max-height: none; height: calc(100vh - 186px); }
.shell.lite .gt { border-radius: 8px; }

/* =====================================================================
   RIBBON estilo Excel — faixa única com grupos rotulados
   (Tarefas · Exibir · Zoom · Arquivo), filtros e colunas em popup.
   ===================================================================== */

.gt-toolbar.gt-ribbon { padding: 7px 8px 4px; gap: 0; align-items: stretch; row-gap: 6px; }
.gt-ribbon .btn.mini { padding: 3px 9px; }
.rib-grp {
    display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    padding: 0 10px; border-right: 1px solid var(--border-2);
}
.rib-grp .rib-itens { justify-content: center; }   /* conteúdo centralizado na caixa (Tarefas com ícones fica simétrica com Exibir) */
.rib-grp:last-of-type { border-right: none; }
/* Itens do grupo NUNCA quebram — o grupo inteiro desce de linha, como no Excel */
.rib-itens { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: nowrap; white-space: nowrap; }
.rib-obra { font-size: 11.5px; font-weight: 650; color: var(--brand); white-space: nowrap; }
.rib-obra-sel {
    width: auto; max-width: 230px; padding: 3px 8px;
    font-size: 12px; font-weight: 650; color: var(--brand);
    border-radius: 8px; margin-bottom: 1px;
}
.rib-rotulo { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.rib-info .rib-prazo { white-space: nowrap; }
.rib-prazo { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gt-ribbon .controle { padding: 5px 9px; font-size: 12.5px; border-radius: 8px; }

.filtro-picker { position: relative; }
.filtro-menu {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 95;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--sombra-alta); padding: 14px; width: 272px;
    display: flex; flex-direction: column; gap: 9px;
}
.filtro-menu .controle { width: 100%; }

/* =====================================================================
   PRUMO — tela inicial (importar) · limpa, responsiva, profissional
   ===================================================================== */

.pl-inicio { max-width: 1120px; margin: 0 auto; padding: 22px 10px 40px; }
.pl-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.pl-marca { display: flex; align-items: center; gap: 14px; }
.pl-marca .brand-mark { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, #0b4fa8, #0e9ab0); }
.pl-marca .brand-mark svg { width: 24px; height: 24px; }
.pl-nome { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pl-nome em { font-style: normal; font-size: 12px; font-weight: 650; letter-spacing: .1em; color: #0b69d4; margin-left: 8px; vertical-align: middle; }
.pl-tag { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.pl-selo { font-size: 12px; font-weight: 600; color: #0b4fa8; background: #e3f0fd; border: 1px solid #c6ddf6; padding: 6px 12px; border-radius: 99px; white-space: nowrap; }

.pl-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.pl-col { min-width: 0; }
.pl-h3 { font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 12px; }
.pl-lado .pl-h3 { margin-top: 0; }

/* Zona de importar: o InputFile cobre a área inteira, invisível — arrastar e clicar funcionam nativamente */
.pl-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 250px; padding: 30px 24px; text-align: center; cursor: pointer;
    border: 2px dashed #8fbcf0; border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #eef6ff);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pl-drop:hover { border-color: #0b69d4; box-shadow: 0 14px 40px -22px rgba(11, 105, 212, .55); transform: translateY(-1px); }
.pl-drop.ocupado { cursor: progress; border-style: solid; }
.pl-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pl-drop-icone { width: 58px; height: 58px; border-radius: 16px; background: #e3f0fd; color: #0b69d4; display: grid; place-items: center; margin-bottom: 6px; }
.pl-drop-icone svg { width: 30px; height: 30px; }
.pl-drop-icone .giro { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #c6ddf6; border-top-color: #0b69d4; animation: veu-gira .7s linear infinite; }
.pl-drop-titulo { font-size: 17px; font-weight: 650; color: var(--ink); }
.pl-drop-sub { font-size: 13px; color: var(--ink-2); }
.pl-chips { display: flex; gap: 6px; margin-top: 10px; }
.pl-chips span { font-size: 11px; font-weight: 650; letter-spacing: .04em; color: #0b4fa8; background: #fff; border: 1px solid #c6ddf6; border-radius: 6px; padding: 2px 8px; }

.pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 14px 12px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pl-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pl-card-topo b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-x { border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 13px; padding: 0 2px; line-height: 1; }
.pl-x:hover { color: var(--danger); }
.pl-card-meta { font-size: 12px; color: var(--ink-2); display: flex; gap: 4px; flex-wrap: wrap; }
.pl-card-arq { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-abrir { margin-top: 6px; justify-content: center; }

.pl-passos { margin: 0; padding-left: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 12px; }
.pl-passos li { counter-increment: passo; position: relative; padding-left: 40px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.pl-passos li::before {
    content: counter(passo); position: absolute; left: 0; top: 0;
    width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(135deg, #0b4fa8, #0e9ab0); color: #fff; font-weight: 700; font-size: 13px;
}
.pl-passos li b { color: var(--ink); }
.pl-lado .nota { margin-top: 16px; }
.pl-rodape { font-size: 11.5px; color: var(--ink-3); margin-top: 18px; word-break: break-all; }

/* Responsivo: uma coluna no celular/tablet; a grade do cronograma rola na horizontal */
@media (max-width: 900px) {
    .pl-grade { grid-template-columns: 1fr; }
    .pl-topo { flex-direction: column; }
    .pl-nome { font-size: 21px; }
    .pl-drop { min-height: 200px; }
    .shell.lite .gt { overflow-x: auto; }
    .shell.lite .gt-body { height: calc(100vh - 240px); }
}

/* =====================================================================
   PLANNING — ícones, dicas, animações, linha de base, virtualização
   ===================================================================== */

/* Ícones SVG inline nos botões da ribbon */
.ico { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.btn.mini .ico { margin-right: 1px; }
.btn.mini:has(.ico:only-child) { padding: 3px 7px; }

/* Dicas ao passar o mouse (mais bonitas que o title nativo) */
[data-dica] { position: relative; }
[data-dica]::after {
    content: attr(data-dica); position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px);
    background: #1d2836; color: #f1f5fa; font-size: 11.5px; font-weight: 500; line-height: 1.4;
    padding: 7px 10px; border-radius: 9px; box-shadow: var(--sombra-alta);
    width: max-content; max-width: 260px; white-space: normal; text-align: left;
    opacity: 0; pointer-events: none; z-index: 300;
    transition: opacity .14s ease, transform .14s ease; transition-delay: 0s;
}
[data-dica]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .35s; }
.rib-grp:last-of-type [data-dica]::after, .rib-info [data-dica]::after { left: auto; right: 0; transform: translate(0, -4px); }
.rib-grp:last-of-type [data-dica]:hover::after, .rib-info [data-dica]:hover::after { transform: translate(0, 0); }

/* Animações leves */
.col-menu, .filtro-menu, .estat-menu { animation: menu-pop .16s ease both; transform-origin: top center; }
@keyframes menu-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.btn { transition: background .14s, border-color .14s, transform .12s, box-shadow .14s; }
.btn.mini:not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 4px 12px -8px rgba(11, 79, 168, .5); }
.pl-card { transition: transform .16s ease, box-shadow .16s ease; }
.pl-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -22px rgba(11, 79, 168, .45); }
.shell.lite .page { animation: rise .22s ease both; }
.gt-barra { transition: filter .12s, box-shadow .2s; }
.gt-linha.sel { animation: sel-in .18s ease; }
@keyframes sel-in { from { box-shadow: inset 0 0 0 var(--brand-2); } to { box-shadow: inset 3px 0 0 var(--brand-2); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Linha de base: barra cinza fina sob a barra atual (como no Project) */
.gt-base { position: absolute; top: calc(var(--row-h) / 2 + 7px); height: 4px; border-radius: 2px; background: #9aa4b1; opacity: .85; z-index: 1; }

/* Virtualização: espaçadores mantêm a altura total e a posição da rolagem */
.gt-vazio { width: 100%; flex: none; }

/* Estatísticas do projeto */
.estat-picker { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.estat-btn { border: none; background: none; color: var(--brand); cursor: pointer; padding: 0; display: inline-flex; }
.estat-btn .ico { width: 15px; height: 15px; }
.estat-menu { right: 0; left: auto; min-width: 250px; text-transform: none; letter-spacing: normal; }
.estat-linha { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; padding: 5px 10px; border-radius: 6px; }
.estat-linha:nth-child(even) { background: var(--surface-2); }
.estat-linha b { font-variant-numeric: tabular-nums; }

/* Dica sempre por cima e nunca cortada na borda esquerda */
[data-dica]:hover { z-index: 320; }                       /* o hover cria contexto (transform): sobe o botão inteiro */
.rib-grp:first-of-type [data-dica]::after { left: 0; transform: translate(0, -4px); }
.rib-grp:first-of-type [data-dica]:hover::after { transform: translate(0, 0); }
.gt-toolbar.gt-ribbon, .rib-grp, .rib-itens { overflow: visible; }

/* Opção do orçamento Sienge (nível de detalhe) */
.pl-opcao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.pl-opcao .controle { width: auto; padding: 5px 9px; font-size: 12.5px; border-radius: 8px; }

/* Progresso da importação (véu com barra) */
.pl-progresso { flex-direction: column; gap: 14px; }
.pl-prog-txt { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); min-width: 320px; }
.pl-prog-txt span { font-size: 12px; color: var(--ink-2); }
.pl-barra { width: 320px; height: 8px; border-radius: 99px; background: #dbe6f5; overflow: hidden; }
.pl-barra div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0b4fa8, #0e9ab0); transition: width .25s ease; }

/* Menu Baixar (XML · Excel · PDF) */
.baixar-menu { min-width: 300px; text-transform: none; letter-spacing: normal; }
.baixar-menu .col-acao { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 8px 10px; }
.baixar-menu .col-acao b { display: block; font-size: 13px; }
.baixar-menu .col-acao small { display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.baixar-ico { color: var(--brand); margin-top: 2px; }
.baixar-ico .ico { width: 16px; height: 16px; }


/* ===== Ribbon em grupos-cartão discretos (Tarefas · Edição · Exibir · Navegação · Arquivo) ===== */
/* Faixa FLUIDA: os grupos quebram de linha quando não cabem e os de cada linha se esticam para
   preencher a largura (como as barras do YouTube/AWS) — nunca uma caixa alta com buraco, em nenhuma largura. */
.gt-toolbar.gt-ribbon { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 8px 10px 6px; background: linear-gradient(180deg, #fbfcfe, #f4f6f9); border-bottom: 1px solid #e1e6ee; }
.rib-dir { display: contents; }
.gt-ribbon .rib-grp { flex: 1 1 auto; min-width: 0; justify-content: space-between; }
.gt-ribbon .rib-grp .rib-itens { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.gt-ribbon .rib-info { flex: 1 1 auto; }
.rib-info .rib-itens { align-items: center; }
.rib-info .rib-obra-sel { flex: 1 1 160px; min-width: 140px; max-width: 280px; }
.rib-grp {
    display: flex; flex-direction: column; gap: 3px; padding: 5px 8px 3px; border: 1px solid #e3e8ef; border-radius: 9px;
    background: linear-gradient(180deg, #ffffff, #f7f9fc); box-shadow: 0 1px 0 rgba(20, 35, 60, .03);
}
.rib-grp:last-of-type { border-right: 1px solid #e3e8ef; }
.rib-grp.rib-edicao { border-color: #d5deea; background: linear-gradient(180deg, #ffffff, #f2f6fb); }
.rib-rotulo { text-align: center; }
.rib-sep { width: 1px; height: 18px; background: #e1e6ee; margin: 0 2px; flex: none; }
.rib-dica-mao { display: inline-flex; align-items: center; color: var(--ink-3); padding: 0 4px; cursor: help; }
.rib-dica-mao .ico { width: 15px; height: 15px; }
.btn.mini.rib-modo { font-weight: 650; border-color: #b9c8dc; }
.btn.mini.rib-modo.on { background: #1c56a3; border-color: #1c56a3; color: #fff; box-shadow: 0 0 0 3px rgba(28, 86, 163, .15); }
.btn.mini.rib-modo.on .ico { color: #fff; }
.gt-zoom button.on, .btn.mini.suave { background: #e7eef8; }

/* estado do modo, sempre visível */
.modo-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; background: #eef1f5; color: var(--ink-2); border: 1px solid #dfe4ec; white-space: nowrap; }
.modo-chip .ico { width: 13px; height: 13px; }
.modo-chip.edit { background: #e3edfa; color: #1c56a3; border-color: #bcd0ea; }

/* visualização: células protegidas parecem texto, nada de borda de campo */
.gt.visualizando .gt-in { background: transparent; border-color: transparent; cursor: default; color: inherit; }
.gt.visualizando .gt-in:hover { border-color: transparent; background: transparent; }
.gt.visualizando .gt-in:focus { border-color: #c9d6e6; background: #fff; box-shadow: none; }
.gt.visualizando .gt-in[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.gt.visualizando .gt-barra { cursor: grab; }
.gt.visualizando .gt-body.panning .gt-barra { cursor: grabbing; }
/* edição: faixa sutil no gráfico para dizer "aqui você está mexendo no plano" */
.gt.editando .gt-timeline { background: linear-gradient(180deg, rgba(28, 86, 163, .035), transparent 60px); }
.gt.editando .gt-body { cursor: default; }
.gt.editando .gt-body.panning { cursor: grabbing; }

/* conectores de vínculo: só aparecem ao passar o mouse na linha, no modo edição */
.gt-con { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 2px solid #1c56a3; opacity: 0; transition: opacity .12s, transform .12s; cursor: crosshair; z-index: 4; }
.gt-con.l { left: -5px; } .gt-con.r { right: -5px; }
.gt-blinha:hover .gt-con, .gt-barra:hover .gt-con { opacity: 1; }
.gt-con:hover { transform: scale(1.35); background: #1c56a3; }
.gt.linkando, .gt.linkando * { cursor: crosshair !important; }
.gt.linkando .gt-con { opacity: 0; }
.gt-barra.alvo-link { outline: 2px solid #1c56a3; outline-offset: 2px; filter: brightness(1.05); }
.gt-link-tmp { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 400; }
.gt-link-tmp path { fill: none; stroke: #1c56a3; stroke-width: 2; stroke-dasharray: 6 4; }

/* barra de ações da seleção múltipla */
.gt-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; background: #eef4fc; border-bottom: 1px solid #d5e1f1; font-size: 12px; color: var(--ink-2); }
.gt-acoes > b { color: #1c56a3; }
.gt-acoes > small { color: var(--ink-3); }
.gt-acoes .lote { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 8px; background: #fff; border: 1px solid #d9e3f0; }
.gt-acoes .lote .controle { width: 64px; padding: 3px 6px; font-size: 12px; }
.gt-acoes .esticar { flex: 1; }

/* popover do vínculo e menu de tipos */
.vinc-pop { position: fixed; width: 320px; padding: 10px 12px 12px; z-index: 330; }
.vinc-desc { font-size: 12px; margin: 4px 0 10px; line-height: 1.45; }
.vinc-desc .eap { display: inline-block; min-width: 22px; padding: 0 5px; border-radius: 5px; background: #eef1f5; font-weight: 700; text-align: center; margin-right: 2px; }
.vinc-desc i { color: #1c56a3; font-style: normal; font-weight: 700; margin: 0 6px; }
.vinc-campo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; font-size: 12px; }
.vinc-campo .controle { width: 170px; padding: 4px 8px; font-size: 12px; }
.vinc-acoes { display: flex; justify-content: space-between; margin-top: 10px; }
.vinc-menu { width: 330px; }
.vinc-tag { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 22px; border-radius: 6px; background: #e3edfa; color: #1c56a3; font-weight: 750; font-size: 11px; margin-right: 8px; flex: none; }
.vinc-menu .col-acao { display: flex; align-items: center; text-align: left; }
.vinc-menu .col-acao small { display: block; color: var(--ink-3); font-size: 11px; }

/* menu de linhas de base */
.base-menu { width: 360px; }
.base-item { display: flex; align-items: center; gap: 8px; }
.base-item.ativa { background: #eef4fc; }
.base-item .base-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.base-item small { color: var(--ink-3); font-size: 10.5px; }
.base-item .pl-x { flex: none; }
.base-vazio { font-size: 11.5px; color: var(--ink-3); padding: 6px 10px 8px; }

/* telas até ~1500px: faixa compacta para caber em DUAS linhas de ações */
@media (max-width: 1500px) {
    .gt-toolbar.gt-ribbon { gap: 6px; padding: 6px 8px 4px; }
    .gt-ribbon .btn.mini { padding: 3px 7px; font-size: 11.5px; }
    .gt-ribbon .btn.mini .ico { width: 13px; height: 13px; }
    .rib-grp { padding: 4px 6px 2px; }
    .rib-itens { gap: 4px; }
    .gt-ribbon .controle { padding: 4px 8px; font-size: 12px; }
    .gt-ribbon .rib-itens > input.controle { width: 128px !important; }
    .gt-zoom button { padding: 3px 8px; font-size: 11.5px; }
    .rib-info .rot { display: none; }   /* modo só com ícone (o botão "Editar Gantt" já mostra o estado), "23 de 23", data sem rótulo */
}
/* até ~1450px: Tarefas e Arquivo só com ícones (a dica diz o nome) — assim a faixa fica sempre em duas linhas */
@media (max-width: 1450px) {
    .gt-ribbon .rib-grp:first-child .btn.mini .rot, .gt-ribbon .rib-dir .rib-grp:not(.rib-edicao) .btn.mini .rot { display: none; }
    .gt-ribbon .rib-grp:first-child .btn.mini, .gt-ribbon .rib-dir .rib-grp:not(.rib-edicao) .btn.mini { padding: 4px 7px; }
    .gt-ribbon .rib-grp:first-child .btn.mini .ico, .gt-ribbon .rib-dir .rib-grp:not(.rib-edicao) .btn.mini .ico { width: 15px; height: 15px; }
}

/* ===== Responsivo da faixa — DEPOIS da regra da grade, senão a grade vence ===== */

@media (max-width: 1100px) {
    .gt-ribbon .rib-edicao .btn.mini:not(.rib-modo) .rot, .gt-ribbon .alternar .rot { display: none; }
    .gt-ribbon .rib-itens > input.controle { width: 96px !important; }
}


/* ===================== Cabeceira no padrão do Excel Online ===================== */
.xl-cab { position: relative; z-index: 60; background: #fff; }   /* acima do cabeçalho fixo da grade e das alças de coluna: a faixa flutuante recebe os cliques */
.xl-topo { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 12px 0 10px; border-bottom: 1px solid #e6e9ee; }
.xl-esq { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 0; }
.xl-marca { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; background: #eef2f8; flex: none; }
.xl-marca svg { width: 20px; height: 20px; }
.xl-titulo { font-size: 15px; font-weight: 650; color: var(--ink); border: 1px solid transparent; background: transparent; padding: 4px 26px 4px 8px; border-radius: 6px; max-width: 360px; min-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
select.xl-titulo { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b80' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; background-size: 14px; }
select.xl-titulo:hover { border-color: #d5dbe4; background-color: #f7f9fc; }
.xl-salvo { display: inline-flex; color: #1e7e34; flex: none; }
.xl-salvo .ico { width: 16px; height: 16px; }
.xl-busca { display: flex; align-items: center; gap: 8px; flex: 0 1 460px; min-width: 160px; height: 34px; padding: 0 12px; border-radius: 8px; background: #f1f3f6; border: 1px solid transparent; color: var(--ink-3); }
.xl-busca:focus-within { background: #fff; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(46,87,140,.12); }
.xl-busca .ico { width: 16px; height: 16px; flex: none; }
.xl-busca input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 13px; color: var(--ink); outline: none; }
.xl-limpar { border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 12px; padding: 0 2px; }
.xl-dir { display: flex; align-items: center; gap: 8px; flex: 1 1 0; justify-content: flex-end; min-width: 0; }
.xl-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; }
.xl-ico:hover { background: #f1f3f6; border-color: #e1e6ee; }
.xl-ico .ico { width: 16px; height: 16px; }
.xl-modo { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 7px; border: 1px solid #d5dbe4; background: #fff; color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.xl-modo .ico { width: 15px; height: 15px; }
.xl-modo.on { color: #1c56a3; border-color: #bcd0ea; background: #eef4fc; }
.xl-modo:hover { background: #f1f3f6; }
.xl-baixar { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 7px; border: 1px solid #1c56a3; background: #1c56a3; color: #fff; font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.xl-baixar .ico { width: 15px; height: 15px; color: #fff; }
.xl-baixar:hover { background: #17488a; }
.modo-menu { width: 330px; }
.modo-menu .col-acao { display: flex; align-items: center; text-align: left; }
.modo-menu .col-acao.ativo { background: #eef4fc; }
.modo-menu .col-acao small { display: block; color: var(--ink-3); font-size: 11px; }

/* abas */
.xl-abas { display: flex; align-items: flex-end; gap: 2px; height: 36px; padding: 0 10px; border-bottom: 1px solid #e6e9ee; background: #fff; }
.xl-aba { border: none; background: none; padding: 8px 12px 9px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; }
.xl-aba:hover { background: #f4f6f9; color: var(--ink); }
.xl-aba.on { color: #1c56a3; font-weight: 700; border-bottom-color: #1c56a3; }
.xl-abas .esticar { flex: 1; }
.xl-fixar { align-self: center; font-size: 12px; color: var(--ink-2); white-space: nowrap; padding-bottom: 4px; }

/* faixa plana, com divisores e rótulos embaixo (como o Excel) */
.gt-toolbar.gt-ribbon.xl-faixa { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 6px 8px 4px; background: #fafbfd; border-bottom: 1px solid #e1e6ee; border-radius: 0; }
.xl-faixa.flutuante { position: absolute; left: 0; right: 0; top: 100%; z-index: 320; box-shadow: 0 12px 28px rgba(20, 35, 60, .16); border-bottom: 1px solid #d5dbe4; }
.xl-veu { position: absolute; inset: auto; top: 100%; left: 0; right: 0; height: 100vh; z-index: 310; background: transparent; }   /* começa exatamente na base da cabeceira: abas seguem clicáveis e o caminho aba→faixa não fecha nada */
.xl-grupo { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 10px 2px; border-right: 1px solid #e1e6ee; min-width: 0; }
.xl-grupo:last-child { border-right: none; }
.xl-itens { display: flex; align-items: stretch; gap: 4px; min-height: 60px; }
.xl-rotulo { font-size: 10.5px; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap; }
.xl-col { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.xl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--ink); font-size: 12px; cursor: pointer; white-space: nowrap; line-height: 1.2; }
.xl-btn .ico { width: 15px; height: 15px; color: #3e618f; flex: none; }
.xl-btn:hover:not(:disabled) { background: #eef2f8; border-color: #dbe3ee; }
.xl-btn:active:not(:disabled) { background: #e2e9f3; }
.xl-btn:disabled { opacity: .42; cursor: default; }
.xl-btn.on { background: #e3edfa; border-color: #bcd0ea; color: #1c56a3; }
.xl-btn.perigo .ico { color: #c0392b; }
.xl-btn.grande { flex-direction: column; justify-content: center; gap: 5px; min-width: 62px; padding: 6px 8px; font-size: 11.5px; }
.xl-btn.grande .ico { width: 22px; height: 22px; }
.xl-btn.grande span { max-width: 96px; white-space: normal; text-align: center; line-height: 1.15; }
.xl-faixa .gt-zoom { align-self: center; }
.xl-faixa .xl-alternar { align-self: center; }
.xl-faixa .gt-reset-btn { display: none; }
.xl-faixa .gt-reset-btn.mostrar { display: inline-flex; }
.xl-faixa .filtro-picker, .xl-faixa .col-picker { display: flex; align-items: stretch; }
.xl-faixa .col-menu, .xl-faixa .filtro-menu { top: calc(100% - 4px); }
.gt-body.panning { cursor: grabbing; }

/* barra de status embaixo (contador · prazo · modo), como a barra de status do Excel */
.gt-legenda .xl-status { display: inline-flex; align-items: center; gap: 12px; margin-right: 6px; padding-right: 12px; border-right: 1px solid var(--border); }

/* a grade ocupa o que sobra da altura da janela — cabeceira e faixa podem recolher */
.shell.lite .gt { display: flex; flex-direction: column; height: calc(100vh - 34px); }
.shell.lite .gt .gt-zoomavel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.shell.lite .gt .gt-body { flex: 1 1 auto; min-height: 120px; height: auto; max-height: none; }
.shell.lite .gt .gt-head { flex: none; }
.shell.lite .gt .gt-legenda { flex: none; }
@media (max-width: 1100px) {
    .xl-topo { gap: 8px; }
    .xl-busca { flex-basis: 260px; }
    .xl-modo .rot, .xl-baixar .rot { display: none; }
    .xl-titulo { max-width: 200px; }
}
@media print { .xl-topo, .xl-abas, .xl-faixa { display: none !important; } }

/* dicas (cartões ao passar o mouse) nunca cortam nas bordas: 1º grupo alinha à esquerda, último à direita */
.xl-faixa .xl-grupo:first-child [data-dica]::after, .xl-esq [data-dica]::after { left: 0; right: auto; transform: translate(0, -4px); }
.xl-faixa .xl-grupo:first-child [data-dica]:hover::after, .xl-esq [data-dica]:hover::after { transform: translate(0, 0); }
.xl-faixa .xl-grupo:last-child [data-dica]::after, .xl-dir [data-dica]::after, .xl-fixar[data-dica]::after { left: auto; right: 0; transform: translate(0, -4px); }
.xl-faixa .xl-grupo:last-child [data-dica]:hover::after, .xl-dir [data-dica]:hover::after, .xl-fixar[data-dica]:hover::after { transform: translate(0, 0); }
.xl-faixa [data-dica]::after { max-width: min(320px, 70vw); white-space: normal; }

/* menus da cabeceira (Baixar, modo, estatísticas) ficam ACIMA da faixa flutuante */
.xl-topo .col-veu { z-index: 330; }
.xl-topo .col-menu { z-index: 340; }

/* menus dentro da faixa: os dos dois primeiros grupos abrem para a DIREITA do botão (não vazam pelo canto
   esquerdo do cartão, que tem overflow hidden); os do último grupo abrem para a esquerda */
.xl-faixa .xl-grupo:nth-child(-n+2) .col-menu, .xl-faixa .xl-grupo:nth-child(-n+2) .filtro-menu { left: 0; right: auto; }
.xl-faixa .xl-grupo:last-child .col-menu, .xl-faixa .xl-grupo:last-child .filtro-menu { right: 0; left: auto; }
/* com um menu aberto, a dica do botão que o abriu não fica por cima do título do menu */
.xl-faixa .filtro-picker:has(.col-menu) > button[data-dica]::after, .xl-faixa .filtro-picker:has(.filtro-menu) > button[data-dica]::after,
.xl-faixa .col-picker:has(.col-menu) > button[data-dica]::after, .xl-topo .filtro-picker:has(.col-menu) > button[data-dica]::after { display: none; }

/* aviso de nova versão da PWA */
.pwa-aviso { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #1d2836; color: #f1f5fa; font-size: 13px; box-shadow: var(--sombra-alta); }
.pwa-aviso[hidden] { display: none; }
.pwa-aviso button { border: 1px solid transparent; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 650; cursor: pointer; background: #1c56a3; color: #fff; }
.pwa-aviso button:last-child { background: transparent; border-color: #4a5a70; color: #cfd8e3; }

/* botão Instalar (PWA) — só aparece quando o navegador oferece a instalação */
.xl-instalar { color: #1c56a3; border-color: #bcd0ea; background: #eef4fc; }
.xl-instalar:hover { background: #e3edfa; }
.pl-topo-dir { display: flex; align-items: center; gap: 10px; }
.pl-instalar[hidden], .xl-instalar[hidden] { display: none; }