/* Secao 623: cronograma de obra. Cores pelas variaveis do Bootstrap para seguir o tema. */
.cro {
    --cro-folha: var(--bs-body-bg, #fff);
    --cro-tinta: var(--bs-body-color, #1d2430);
    --cro-tinta2: var(--bs-secondary-color, #566070);
    --cro-linha: var(--bs-border-color, #e2e5e8);
    --cro-linha2: var(--bs-tertiary-bg, #f1f3f5);
    --cro-pausa: rgba(232, 89, 12, .12);
    --cro-pausa-tx: #b4532f;
    --cro-acento: var(--bs-primary, #4f6bed);
    --cro-barra: rgba(var(--bs-primary-rgb, 79, 107, 237), .13);
    --cro-barra-tx: var(--bs-body-color, #1d2430);
    --cro-hoje: #d9342b;
    --cro-ruim: #c92a2a;
    --cro-bom: #2b8a3e;
    --cro-sel: #1c64d1;
    --cro-base: #adb5bd;
}
[data-theme="dark"] .cro, [data-bs-theme="dark"] .cro {
    --cro-folha: #131313; --cro-tinta: #D8DFEE; --cro-tinta2: #9aa3b2; --cro-linha: #2a2e35; --cro-linha2: #1c1f24;
    --cro-barra: rgba(var(--bs-primary-rgb, 79, 107, 237), .26); --cro-barra-tx: #e7eaee; --cro-base: #5c636a; --cro-pausa: rgba(255, 138, 61, .14); --cro-pausa-tx: #f0a07e;
}

.cro, .cro *, .cro *::before, .cro *::after { box-sizing: border-box; }
.cro-gantt { border: 1px solid var(--cro-linha); border-radius: 16px; overflow: hidden; background: var(--cro-folha); }
.cro-scroll { overflow: auto; max-height: calc(100vh - 260px); min-height: 360px; position: relative; }
.cro-canvas { position: relative; }
.cro-cab { position: sticky; top: 0; z-index: 5; display: flex; background: var(--cro-folha); border-bottom: 1px solid var(--cro-linha); }
.cro-cab .cro-lab { height: 58px; }
.cro-lab { position: sticky; left: 0; z-index: 4; width: var(--cro-lab); flex: 0 0 var(--cro-lab); background: var(--cro-folha); border-right: 1px solid var(--cro-linha);
    padding: 8px 10px 8px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cro-etq { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cro-tinta2); }
.cro-escala { position: relative; height: 58px; }
.cro-mes, .cro-sem { position: absolute; font-size: 11px; color: var(--cro-tinta2); white-space: nowrap; }
.cro-mes { top: 4px; font-weight: 600; color: var(--cro-tinta); font-size: 12px; border-left: 1px solid var(--cro-linha); padding-left: 5px; height: 54px; text-transform: capitalize; }
.cro-sem { top: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.cro-sem i { display: block; font-style: normal; font-size: 10.5px; opacity: .75; }
.cro-sem.agora span { background: var(--cro-hoje); color: #fff; border-radius: 999px; padding: 0 5px; }
.cro-linha { display: flex; border-bottom: 1px solid var(--cro-linha2); }
.cro-linha.cro-sep { border-bottom-color: var(--cro-linha); }
.cro-cod { font-size: 10.5px; color: var(--cro-tinta2); display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; min-height: 12px; }
.cro-cod::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cro-cor, #868e96); flex: 0 0 8px; }
.cro-nome { font-weight: 600; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cro-emp { font-size: 11.5px; color: var(--cro-tinta2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cro-trilho { position: relative; flex: 0 0 auto; }
.cro-fundo { position: absolute; top: 0; pointer-events: none; z-index: 1; }
.cro-grade { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--cro-linha2); }
.cro-fds { position: absolute; top: 0; bottom: 0; background: var(--cro-linha2); opacity: .6; }
.cro-pausa { position: absolute; top: 0; bottom: 0; background: var(--cro-pausa); }
.cro-pausa span { position: absolute; top: 64px; left: 3px; font-size: 10px; color: var(--cro-pausa-tx); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.cro-hoje { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--cro-hoje); z-index: 3; }

.cro-tarefa { position: absolute; height: 22px; border-radius: 6px; background: var(--cro-barra); color: var(--cro-barra-tx); font-size: 12px; font-weight: 600;
.cro-linha .cro-tarefa { box-shadow: inset 3px 0 0 var(--cro-cor, var(--cro-acento)); }
    display: flex; align-items: center; padding: 0 8px; white-space: nowrap; cursor: grab; z-index: 2; touch-action: none; user-select: none; border: 1px solid transparent; }
.cro-prog { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cro-acento); opacity: .28; border-radius: 5px 0 0 5px; pointer-events: none; }
.cro-tx { position: relative; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.cro-tx.fora { position: absolute; left: calc(100% + 6px); overflow: visible; color: var(--cro-tinta); }
.cro-linha .cro-tarefa.atrasada { border-color: var(--cro-ruim); box-shadow: inset 3px 0 0 var(--cro-ruim); }
.cro-tarefa.feita { opacity: .6; }
.cro-tarefa.sel, .cro-pedido.sel { outline: 2px solid var(--cro-sel); outline-offset: 1px; }
.cro-tarefa.liga { outline: 2px dashed var(--cro-sel); outline-offset: 1px; }
.cro-tarefa::before, .cro-tarefa::after { content: ""; position: absolute; top: 2px; bottom: 2px; width: 6px; cursor: ew-resize; }
.cro-tarefa::before { left: -1px; } .cro-tarefa::after { right: -1px; }
.cro-fantasma { position: absolute; height: 5px; border-radius: 3px; background: var(--cro-base); z-index: 1; }
.cro-pedido { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; cursor: grab; height: 22px; touch-action: none; user-select: none; }
.cro-q { width: 14px; height: 14px; background: var(--cro-tinta); border-radius: 2px; flex: 0 0 14px; }
.cro-pedido.vencido .cro-q { background: var(--cro-ruim); }
.cro-pedido.feito .cro-q { background: var(--cro-bom); }
.cro-prazo { position: absolute; height: 22px; z-index: 1; }
.cro-prazo::before { content: ""; position: absolute; left: 0; right: 6px; top: 50%; border-top: 1.5px solid var(--cro-tinta2); }
.cro-prazo::after { content: ""; position: absolute; right: 0; top: calc(50% - 4px); border-left: 7px solid var(--cro-tinta2); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.cro-prazo span { position: absolute; top: -7px; right: 10px; font-size: 10px; color: var(--cro-tinta2); }
.cro-marco { position: absolute; display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; z-index: 2; height: 20px; cursor: pointer; }
.cro-bola { width: 11px; height: 11px; border-radius: 50%; background: var(--cro-hoje); flex: 0 0 11px; }
.cro-marco.feito .cro-bola { background: var(--cro-bom); }
.cro-marco em { font-style: normal; font-size: 10.5px; color: var(--cro-tinta2); }

/* barra de ferramentas e visoes */
.cro-abas { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--cro-linha); margin-bottom: 14px; }
.cro-abas button { border: 0; background: none; padding: 9px 14px; color: var(--cro-tinta2); white-space: nowrap; font-weight: 600; border-bottom: 3px solid transparent; }
.cro-abas button.ativo { color: var(--bs-primary, #4f6bed); border-bottom-color: var(--bs-primary, #4f6bed); }
.cro-topo { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-bottom: 12px; }
.cro-topo mv-progress-ring { --mv-ring-size: 88px; flex: none; }
.cro-numeros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.cro-numeros > div { background: var(--cro-folha); border: 1px solid var(--cro-linha); border-radius: 14px; padding: 10px 14px; display: grid; gap: 1px; min-width: 0; }
.cro-numeros b { font-size: 24px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cro-numeros b small { font-size: 14px; font-weight: 600; color: var(--cro-tinta2); }
.cro-numeros > div > span:last-child { font-size: 12px; color: var(--cro-tinta2); }
.cro-numeros .ruim b { color: var(--cro-ruim); }
.cro-numeros .aviso b { color: #a86d12; }
.cro-ferr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.cro-seg { display: inline-flex; border: 1.5px solid var(--cro-linha); border-radius: 999px; padding: 2px; background: var(--cro-folha); }
.cro-seg button { border: none; background: none; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; color: var(--cro-tinta2); }
.cro-seg button.ativo { background: var(--cro-tinta); color: var(--cro-folha); }
.cro-chip { border: 1.5px solid var(--cro-linha); background: var(--cro-folha); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--cro-tinta2); }
.cro-chip.ativo { border-color: var(--bs-primary, #4f6bed); color: var(--bs-primary, #4f6bed); background: rgba(var(--bs-primary-rgb, 79, 107, 237), .08); }
.cro-chip.ativo::before { content: "\2713  "; font-size: 11px; }
.cro-rodape { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--cro-linha); font-size: 12px; color: var(--cro-tinta2); }
.cro-rodape i { display: inline-block; margin-right: 5px; vertical-align: middle; }
.cro-aviso { position: sticky; bottom: 12px; margin: 10px auto 0; max-width: 680px; background: var(--cro-tinta); color: var(--cro-folha); border-radius: 12px; padding: 10px 12px 10px 14px;
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13px; }
.cro-aviso span { flex: 1; min-width: 200px; }
.cro-aviso button { border: 1px solid currentColor; background: none; color: inherit; border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.cro-aviso button.forte { background: var(--cro-folha); color: var(--cro-tinta); }
.cro-carimbo { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); border: 2px solid var(--cro-tinta); border-radius: 8px; margin-bottom: 10px; }
.cro-carimbo > div { padding: 8px 12px; border-right: 1px solid var(--cro-linha); min-width: 0; }
.cro-carimbo > div:last-child { border-right: none; }
.cro-carimbo b { display: block; font-size: 15px; }
.cro-carimbo span { font-size: 12px; color: var(--cro-tinta2); }

.cro-reuniao { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; }
.cro-grupo { border: 1px solid var(--cro-linha); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.cro-grupo header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--cro-linha2); gap: 8px; }
.cro-item { display: flex; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--cro-linha2); align-items: center; }
.cro-item .cro-nm { flex: 1; min-width: 0; }
.cro-item small { display: block; color: var(--cro-tinta2); font-size: 11px; }
.cro-pill { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.cro-pill.ruim { background: rgba(201, 42, 42, .12); color: var(--cro-ruim); }
.cro-pill.and { background: rgba(28, 100, 209, .12); color: var(--cro-sel); }
.cro-pill.prox { background: var(--cro-linha2); color: var(--cro-tinta2); }
.cro-pill.ped { background: rgba(194, 124, 14, .15); color: #a8660b; }
.cro-zap { border: 1px solid var(--cro-linha); border-radius: 12px; padding: 12px; background: var(--cro-linha2); display: flex; flex-direction: column; gap: 10px; align-self: start; position: sticky; top: 70px; }
.cro-balao { background: var(--cro-folha); border-radius: 10px 10px 10px 2px; padding: 10px 12px; font-size: 13px; white-space: pre-wrap; border: 1px solid var(--cro-linha); }

@media (max-width: 900px) {
    .cro-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cro-reuniao { grid-template-columns: minmax(0, 1fr); }
    .cro-carimbo { grid-template-columns: 1fr 1fr; }
}