.ul-camada { position: absolute; inset: 0; }

.ul-trilha { position: absolute; left: 115px; right: 115px; top: 112px; height: 110px; }
.ul-linha { position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.ul-linha-cheia { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.85); transition: width 0.6s ease; }
.ul-no { position: absolute; top: 0; width: 170px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ul-ponto { width: 30px; height: 30px; border-radius: 50%; background: var(--verde-profundo); border: 3px solid rgba(255, 255, 255, 0.45); }
.ul-no.feito .ul-ponto { background: var(--branco); border-color: var(--branco); }
.ul-no.atual .ul-ponto { border-color: var(--branco); box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.16); }
.ul-no-cinza.atual .ul-ponto { background: var(--cinza-neutro); }
.ul-no-aviso.atual .ul-ponto { background: var(--ambar); }
.ul-no-vermelho.atual .ul-ponto { background: var(--vermelho); }
.ul-no-nome { color: var(--branco); font-size: 15px; font-weight: 700; }
.ul-no-sub { color: rgba(255, 255, 255, 0.75); font-size: 12.5px; }
.ul-no-fantasma .ul-ponto { background: transparent; border-style: dashed; border-color: #9FD3BF; }
.ul-no-fantasma .ul-no-nome { color: #9FD3BF; }
.ul-junta { position: absolute; left: 210px; width: 780px; top: 262px; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.ul-junta-topo { display: flex; justify-content: space-between; align-items: flex-start; }
.ul-junta-id { font-size: 30px; font-weight: 700; color: var(--verde-profundo); }
.ul-junta-sit { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ul-sit-grande { font-size: 15px; padding: 6px 14px; }
.ul-junta-dados { font-size: 13.5px; color: var(--texto-secundario); }
.ul-serv-rot { margin-top: 4px; }
.ul-servs { display: flex; flex-direction: column; gap: 6px; }
.ul-serv { display: grid; grid-template-columns: 44px 1fr 110px 150px; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--ui-fundo); font-size: 14px; }
.ul-serv .pilula { justify-self: end; font-size: 12px; }
.ul-serv-alvo { box-shadow: inset 0 0 0 2px var(--vermelho); }
.ul-rel { font-size: 13px; color: var(--marinho); }
.ul-falta { font-size: 15px; }
.ul-falta-txt { font-weight: 700; color: var(--vermelho); }
.ul-motivo { padding: 8px 12px; border-radius: 8px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 13px; line-height: 1.4; }
.ul-regra { position: absolute; left: 140px; right: 140px; top: 684px; text-align: center; color: var(--branco); font-size: 17px; font-weight: 600; line-height: 1.45; }

.ul-telas { position: absolute; left: 24px; right: 24px; top: 78px; height: 516px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ul-tela { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; box-shadow: var(--sombra-curta); transition: opacity 0.3s ease; }
.ul-tela.apagada { opacity: 0.3; }
.ul-tela-topo { padding: 12px 14px; background: var(--verde-sispeq); color: var(--branco); }
.ul-tela-titulo { font-family: var(--fonte-display); font-size: 17px; font-weight: 700; }
.ul-tela-sub { font-size: 12px; opacity: 0.88; }
.ul-tela-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 34px; }
.ul-plan-cab { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-secundario); }
.ul-plan-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ul-plan-resumo > div { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: var(--ui-fundo); font-size: 11px; color: var(--texto-secundario); }
.ul-plan-resumo b { font-family: var(--fonte-display); font-size: 16px; color: var(--grafite); }
.ul-plan-lista { display: flex; flex-direction: column; gap: 3px; }
.ul-plan-linha { display: grid; grid-template-columns: 64px auto 1fr; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 6px; font-size: 12px; }
.ul-plan-linha:nth-child(even) { background: var(--ui-zebra); }
.ul-plan-falta { font-size: 11px; color: var(--texto-secundario); text-align: right; }
.ul-plan-linha.ul-alvo { box-shadow: inset 0 0 0 2px #E9C98F; background: #FFFBF1; }
.ul-mais { font-size: 11px; color: var(--texto-secundario); }
.ul-mcjs { font-size: 11.5px; }
.ul-mcjs th { padding: 7px 6px; font-size: 11px; }
.ul-mcjs td { height: 36px; padding: 0 6px; }
.ul-mcjs tr.ul-alvo td { background: #FFFBF1 !important; }
.ul-mcjs .pilula { font-size: 10px; padding: 2px 6px; }
.ul-cel { display: inline-block; min-width: 26px; padding: 2px 4px; border-radius: 4px; text-align: center; font-size: 11px; font-weight: 700; }
.ul-cel-a { background: var(--verde-claro); color: var(--verde-sispeq); }
.ul-cel-p { background: #EEF0EF; color: var(--texto-secundario); }
.ul-cel-r { background: var(--vermelho-fundo); color: var(--vermelho); }
.ul-g-quadro { display: flex; flex-direction: column; gap: 6px; }
.ul-g-item { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--ui-fundo); font-size: 13px; }
.ul-g-item i { width: 12px; height: 12px; border-radius: 3px; }
.ul-g-item b { font-family: var(--fonte-display); font-size: 20px; padding: 0 4px; border-radius: 4px; }
.ul-g-item-alvo { box-shadow: inset 0 0 0 2px #E9C98F; }
.ul-g-linha { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px; border-bottom: 1px solid #E6EAE8; font-size: 13px; }
.ul-g-linha b { font-family: var(--fonte-display); font-size: 18px; padding: 0 4px; border-radius: 4px; }
.ul-g-junta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 13px; }
.ul-g-frente { padding: 6px 10px; border-radius: 8px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 12px; }
.ul-barra { position: absolute; left: 24px; right: 24px; top: 610px; display: flex; flex-direction: column; gap: 10px; }
.ul-mesma { color: var(--branco); font-family: var(--fonte-display); font-size: 18px; font-weight: 700; }
.ul-controles { display: flex; align-items: center; gap: 8px; }
.ul-ver { color: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 600; }
.ul-filtro { border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: var(--branco); border-radius: var(--raio-selo); padding: 5px 12px; font-size: 12.5px; font-weight: 600; }
.ul-filtro.ativo { background: var(--branco); color: var(--verde-profundo); }
.ul-espaco { flex: 1; }
.ul-botoes-rx { display: none; gap: 8px; }
.com-rx .ul-botoes-rx { display: inline-flex; }
.ul-msg { padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #E9F2EE; font-size: 15px; line-height: 1.4; }
.ul-msg-reparo { background: rgba(179, 38, 30, 0.28); }
.ul-msg-liberada { background: rgba(13, 107, 76, 0.5); }

.ul-f-cartao { position: absolute; left: 60px; right: 60px; top: 96px; padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.ul-f-topo { display: flex; justify-content: space-between; align-items: center; }
.ul-f-topo .cartao-titulo { margin: 0; font-size: 13px; }
.ul-f-barras { display: flex; flex-direction: column; gap: 16px; }
.ul-f-linha { display: grid; grid-template-columns: 560px 1fr; gap: 20px; align-items: center; }
.ul-f-barra { height: 66px; min-width: 270px; padding: 0 18px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; color: var(--branco); font-size: 17px; font-weight: 600; }
.ul-f-barra b { font-family: var(--fonte-display); font-size: 30px; }
.ul-f-0 { background: var(--marinho); }
.ul-f-1 { background: #2F5E7E; }
.ul-f-2 { background: var(--verde-sispeq); }
.ul-f-explica { font-size: 15px; line-height: 1.45; }
.ul-f-reparo { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid #E6EAE8; font-size: 14px; color: var(--texto-secundario); }
.ul-f-reparo .pilula { font-size: 13px; }
.ul-ligacao { position: absolute; left: 60px; top: 520px; border: 0; border-radius: var(--raio-selo); padding: 10px 18px; background: rgba(255, 255, 255, 0.12); color: var(--branco); font-size: 15px; font-weight: 600; }
.ul-ligacao:hover { background: rgba(255, 255, 255, 0.2); }

.ul-si-quadro { position: absolute; left: 100px; width: 1000px; top: 74px; height: 625px; overflow: hidden; border-radius: 12px; background: var(--branco); border: 1px solid var(--ui-borda); box-shadow: var(--sombra-curta); }
.ul-si-img { display: block; width: 100%; height: auto; }
.ul-si-rodape { position: absolute; left: 100px; width: 1000px; top: 710px; display: flex; justify-content: space-between; gap: 18px; color: var(--branco); }
.ul-si-legenda { flex: 1; min-width: 0; }
.ul-si-titulo { font-family: var(--fonte-display); font-size: 18px; font-weight: 700; }
.ul-si-texto { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.85); margin-top: 2px; }
.ul-si-selo { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 300px; font-size: 11.5px; color: rgba(255, 255, 255, 0.8); text-align: right; }