/* ============================================================ Rotina do Estágio · Atleta do Vôlei Tema claro/escuro via variáveis CSS + data-theme no . ============================================================ */ :root { --marca: #f97316; --marca-forte: #ea580c; --marca-suave: rgba(249, 115, 22, .12); --azul: #2563eb; --verde: #16a34a; --amarelo: #d97706; --vermelho: #dc2626; --roxo: #7c3aed; --bg: #f1f5f9; --bg-2: #e2e8f0; --superficie: #ffffff; --superficie-2: #f8fafc; --borda: #e2e8f0; --borda-forte: #cbd5e1; --texto: #0f172a; --texto-2: #475569; --texto-3: #94a3b8; --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06); --sombra-forte: 0 20px 60px rgba(15, 23, 42, .18); --raio: 14px; --raio-sm: 9px; --sidebar: 250px; } [data-theme="dark"] { --bg: #0b1120; --bg-2: #0f172a; --superficie: #111c33; --superficie-2: #16233d; --borda: #1e2f4d; --borda-forte: #2b415f; --texto: #e8eefb; --texto-2: #a5b4cb; --texto-3: #6b7f9c; --marca-suave: rgba(249, 115, 22, .18); --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35); --sombra-forte: 0 24px 70px rgba(0, 0, 0, .55); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--texto); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0 0 .4rem; line-height: 1.2; } h1 { font-size: 1.35rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1rem; letter-spacing: .01em; } p { margin: 0 0 .6rem; } a { color: inherit; text-decoration: none; } small { font-size: .8rem; } .oculto { display: none !important; } .mudo { color: var(--texto-2); } .pequeno { font-size: .82rem; } .flex1 { flex: 1; } .ok-txt { color: var(--verde); font-weight: 700; } /* ------------------------------------------------------------ estrutura */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar); flex: 0 0 var(--sidebar); background: var(--superficie); border-right: 1px solid var(--borda); display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; } .marca { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; } .marca-logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: linear-gradient(135deg, var(--marca), #fb923c); box-shadow: 0 6px 16px rgba(249, 115, 22, .35); } .marca strong { display: block; font-size: .95rem; } .marca small { color: var(--texto-3); } .nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .nav-titulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); margin: 14px 8px 6px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--raio-sm); color: var(--texto-2); font-weight: 500; font-size: .92rem; transition: background .15s, color .15s; } .nav a span { width: 20px; text-align: center; } .nav a:hover { background: var(--superficie-2); color: var(--texto); } .nav a.ativo { background: var(--marca-suave); color: var(--marca-forte); font-weight: 600; } [data-theme="dark"] .nav a.ativo { color: #fdba74; } .nav-admin { display: contents; } .nav-admin.oculto { display: none !important; } .sidebar-rodape { border-top: 1px solid var(--borda); padding-top: 12px; display: grid; gap: 8px; } .switch { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--texto-2); cursor: pointer; } .switch input { width: 16px; height: 16px; accent-color: var(--marca); } .mini-select { width: 100%; padding: 7px 8px; border-radius: var(--raio-sm); border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto); font-size: .85rem; } .conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; border-bottom: 1px solid var(--borda); background: var(--superficie); position: sticky; top: 0; z-index: 20; } .topo-dir { display: flex; align-items: center; gap: 10px; } .user-select { padding: 8px 12px; border-radius: 99px; border: 1px solid var(--borda-forte); background: var(--superficie-2); color: var(--texto); font-size: .88rem; font-weight: 600; } .view { padding: 22px 26px 90px; flex: 1; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); } .chip.ativo { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .35); color: var(--verde); } .chip.mudo { color: var(--texto-3); } .chip.ok { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .3); color: var(--verde); } .pulso { width: 8px; height: 8px; border-radius: 99px; background: var(--verde); animation: pulsar 1.6s infinite; } @keyframes pulsar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } } .fab { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 99px; border: none; cursor: pointer; background: var(--marca); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: 0 12px 30px rgba(249, 115, 22, .45); transition: transform .15s, box-shadow .15s; } .fab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(249, 115, 22, .5); } /* ---------------------------------------------------------------- login */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, var(--marca-suave), transparent 60%), var(--bg); } .login-card { width: 100%; max-width: 420px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 20px; padding: 28px; box-shadow: var(--sombra-forte); animation: surgir .25s ease both; } .login-card h2 { font-size: 1.35rem; margin-top: 14px; } .marca.centro { flex-direction: column; text-align: center; gap: 8px; padding: 0 0 8px; } .marca.centro .marca-logo { width: 52px; height: 52px; font-size: 26px; } .lista-login { display: grid; gap: 8px; margin-top: 14px; } .usuario-login { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; text-align: left; } .usuario-login span { font-weight: 700; } .codigo-input { width: 100%; margin: 14px 0 6px; text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: .5em; text-indent: .5em; padding: 12px; } .login-rodape { display: flex; justify-content: center; margin-top: 18px; } .login-rodape .mini-select { width: auto; } .usuario-logado { text-align: right; line-height: 1.2; } .usuario-logado strong { display: block; font-size: .9rem; } .usuario-logado small { font-size: .74rem; } /* ---------------------------------------------------------------- cards */ .card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); animation: surgir .22s ease both; } @keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .card + .card { margin-top: 16px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .card.perigo { border-color: rgba(220, 38, 38, .35); } .card.largo { grid-column: 1 / -1; } .badge { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: .75rem; color: var(--texto-2); font-weight: 700; text-align: center; } /* --------------------------------------------------------------- botões */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--raio-sm); border: 1px solid transparent; font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; background: var(--superficie-2); color: var(--texto); transition: transform .12s, filter .15s, background .15s; } .btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.03); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--marca); color: #fff; box-shadow: 0 6px 18px rgba(249, 115, 22, .3); } .btn.outline { background: transparent; border-color: var(--borda-forte); color: var(--texto); } .btn.ghost { background: var(--superficie-2); color: var(--texto-2); border-color: var(--borda); } .btn.danger { background: var(--vermelho); color: #fff; } .btn.mini { padding: 5px 10px; font-size: .78rem; } .btn.grande { padding: 13px 22px; font-size: 1rem; } .btn.gigante { padding: 17px 28px; font-size: 1.05rem; letter-spacing: .04em; width: 100%; } .btn.bloco { width: 100%; margin-top: 10px; } .icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font-size: .95rem; color: var(--texto-2); } .icon-btn:hover { background: var(--superficie-2); border-color: var(--borda); } .acoes-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; } /* ------------------------------------------------------------- barras */ .barra { height: 9px; border-radius: 99px; background: var(--bg-2); overflow: hidden; margin: 8px 0; } .barra.grossa { height: 14px; } .barra.fina { height: 6px; margin: 5px 0 0; } .barra > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--marca), #fb923c); transition: width .45s cubic-bezier(.2, .8, .3, 1); } .ok > .barra > i, li.ok .barra > i { background: linear-gradient(90deg, var(--verde), #4ade80); } .warn > .barra > i, li.warn .barra > i { background: linear-gradient(90deg, var(--amarelo), #fbbf24); } .bad > .barra > i, li.bad .barra > i { background: linear-gradient(90deg, var(--vermelho), #f87171); } .numero-grande { font-size: 2.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; } .numero-grande small { font-size: 1rem; font-weight: 600; color: var(--texto-3); margin-left: 4px; } .numero-medio { font-size: 1.8rem; font-weight: 800; } .numero-medio small { font-size: .95rem; color: var(--texto-3); font-weight: 600; } .numero-gigante { font-size: 3.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .pct { font-weight: 700; color: var(--texto-2); margin: 4px 0 0; font-size: .88rem; } .tag { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: .76rem; font-weight: 700; letter-spacing: .03em; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); } .tag.ok { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .3); color: var(--verde); } .tag.good { background: rgba(37, 99, 235, .12); border-color: rgba(37, 99, 235, .3); color: var(--azul); } .tag.warn { background: rgba(217, 119, 6, .14); border-color: rgba(217, 119, 6, .3); color: var(--amarelo); } .tag.bad { background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .3); color: var(--vermelho); } .tag.mini { padding: 2px 8px; font-size: .72rem; } .score { font-weight: 800; padding: 3px 9px; border-radius: 8px; background: var(--superficie-2); } .score.ok { color: var(--verde); background: rgba(22, 163, 74, .12); } .score.good { color: var(--azul); background: rgba(37, 99, 235, .12); } .score.warn { color: var(--amarelo); background: rgba(217, 119, 6, .14); } .score.bad { color: var(--vermelho); background: rgba(220, 38, 38, .12); } .aviso { background: rgba(217, 119, 6, .12); border: 1px solid rgba(217, 119, 6, .3); color: var(--amarelo); padding: 10px 12px; border-radius: var(--raio-sm); font-size: .87rem; } .vazio { color: var(--texto-3); padding: 18px; text-align: center; font-style: italic; } .vazio.grande { padding: 60px 20px; font-style: normal; } /* --------------------------------------------------------------- início */ .grid-inicio { display: grid; gap: 16px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .grid-inicio .card + .card { margin-top: 0; } .card.destaque { grid-column: 1 / -1; } .saudacao { font-size: 1.1rem; color: var(--texto-2); margin-bottom: 2px; } .data-extenso { font-size: 1.6rem; margin-bottom: 12px; } .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .pill { padding: 6px 12px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: .85rem; color: var(--texto-2); } .pill.fogo { background: rgba(249, 115, 22, .12); border-color: rgba(249, 115, 22, .3); color: var(--marca-forte); font-weight: 600; } .status-box { border: 1px dashed var(--borda-forte); border-radius: var(--raio); padding: 18px; background: var(--superficie-2); } .status-box.andamento { border-style: solid; border-color: rgba(22, 163, 74, .4); } .status-box.concluido { border-style: solid; border-color: rgba(37, 99, 235, .35); } .linha-status { display: flex; flex-wrap: wrap; gap: 22px; margin: 14px 0; } .linha-status small { display: block; color: var(--texto-3); font-size: .78rem; } .linha-status strong { font-size: 1.25rem; } .linha-status.compacto strong { font-size: 1.05rem; } .lista-metas { list-style: none; margin: 0; padding: 0; } .lista-metas li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--borda); } .lista-metas li:last-child { border-bottom: none; } .lista-metas span { color: var(--texto-2); } .lista-metas strong { font-weight: 700; } .meta-mensal .numero-grande { margin-bottom: 4px; } .meta-mensal.linha { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } /* ---------------------------------------------------------------- turno */ .turno-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "prog prog" "etapa lateral"; gap: 16px; align-items: start; } .painel-progresso { grid-area: prog; } .etapa { grid-area: etapa; } .lateral { grid-area: lateral; display: grid; gap: 16px; } .lateral .card + .card { margin-top: 0; } .linha-topo { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; } .cron { font-size: 2.1rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .prog-wrap { flex: 1; min-width: 240px; } .prog-topo { display: flex; justify-content: space-between; font-size: .88rem; color: var(--texto-2); } .prog-topo strong { color: var(--texto); } .stepper { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; overflow-x: auto; } .passo { flex: 1; min-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: var(--raio-sm); cursor: pointer; border: 1px solid transparent; transition: background .15s, border .15s; } .passo:hover { background: var(--superficie-2); } .passo .bolinha { width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; background: var(--bg-2); color: var(--texto-2); font-weight: 700; font-size: .82rem; border: 2px solid transparent; } .passo .rotulo { font-size: .76rem; color: var(--texto-2); text-align: center; line-height: 1.25; } .passo.feito .bolinha { background: rgba(22, 163, 74, .15); color: var(--verde); } .passo.ativo { background: var(--marca-suave); border-color: rgba(249, 115, 22, .35); } .passo.ativo .bolinha { background: var(--marca); color: #fff; } .passo.ativo .rotulo { color: var(--texto); font-weight: 700; } .etapa-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; } .etapa-num { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); font-weight: 700; } .etapa-head h2 { font-size: 1.5rem; margin: 2px 0 4px; } .etapa-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .proxima { font-size: .85rem; color: var(--texto-2); background: var(--superficie-2); border-left: 3px solid var(--marca); padding: 7px 12px; border-radius: 0 8px 8px 0; margin-bottom: 14px; } .checklist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; } .chk { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--texto-2); } .chk input { width: 17px; height: 17px; accent-color: var(--marca); } .chk.grande { padding: 13px 15px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie-2); font-size: .95rem; transition: border .15s, background .15s; } .chk.grande:has(input:checked) { border-color: rgba(22, 163, 74, .45); background: rgba(22, 163, 74, .08); color: var(--texto); } .chk.grande input { width: 20px; height: 20px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .atividades { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; } .atividades li { font-size: .85rem; color: var(--texto-2); padding: 7px 11px; background: var(--superficie-2); border-radius: 8px; border: 1px solid var(--borda); } .atividades li::before { content: "•"; color: var(--marca); margin-right: 7px; font-weight: 800; } .contador-box { border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; text-align: center; background: var(--superficie-2); margin-bottom: 14px; } .contador-box.ok { border-color: rgba(22, 163, 74, .4); } .contador-box.warn { border-color: rgba(217, 119, 6, .4); } .contador-box.bad { border-color: rgba(220, 38, 38, .35); } .contador-box .rotulo { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: var(--texto-3); font-weight: 700; } .contador { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0; } .contador input { width: 130px; text-align: center; font-size: 2.4rem; font-weight: 800; border: none; background: transparent; color: var(--texto); font-family: inherit; -moz-appearance: textfield; } .contador input::-webkit-outer-spin-button, .contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .round { width: 46px; height: 46px; border-radius: 99px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font-size: 1.5rem; cursor: pointer; display: grid; place-items: center; transition: transform .12s, background .15s; } .round:hover:not(:disabled) { background: var(--marca); color: #fff; border-color: var(--marca); transform: scale(1.06); } .round:disabled { opacity: .4; cursor: not-allowed; } .registro-topo { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2); margin-bottom: 14px; } .registro-topo .barra { max-width: 260px; } .registro-topo.ok { border-color: rgba(22, 163, 74, .4); } .registro-topo.warn { border-color: rgba(217, 119, 6, .35); } .registro-topo.bad { border-color: rgba(220, 38, 38, .3); } .etapa-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; } .etapa-rodape .btn.primary { min-width: 240px; } .mini-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; } .mini-lista li { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 6px 9px; background: var(--superficie-2); border-radius: 7px; color: var(--texto-2); } .mini-lista small { color: var(--texto-3); } .card.atletas { text-align: center; border-top: 3px solid var(--marca); } .card.atletas.ok { border-top-color: var(--verde); } .card.atletas.warn { border-top-color: var(--amarelo); } .card.atletas.bad { border-top-color: var(--vermelho); } .card.atletas h3 { font-size: .78rem; letter-spacing: .12em; color: var(--texto-3); } .metas-lateral { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .ml-topo { display: flex; justify-content: space-between; font-size: .84rem; color: var(--texto-2); } .ml-topo strong { color: var(--texto); } /* ----------------------------------------------------------- fechamento */ .fechamento { display: grid; gap: 16px; } .resumo-score { text-align: center; padding: 22px; border-radius: var(--raio); background: var(--superficie-2); border: 1px solid var(--borda); } .resumo-score.ok { border-color: rgba(22, 163, 74, .4); } .resumo-score.good { border-color: rgba(37, 99, 235, .35); } .resumo-score.warn { border-color: rgba(217, 119, 6, .4); } .resumo-score.bad { border-color: rgba(220, 38, 38, .35); } .resumo-score > span:first-child { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: var(--texto-3); font-weight: 700; } .resumo-score .lista-metas { text-align: left; margin-top: 14px; } .resumo-metas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .resumo-metas li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 11px 14px; border-radius: var(--raio-sm); background: var(--superficie-2); border: 1px solid var(--borda); } .resumo-metas li em { font-style: normal; font-weight: 700; font-size: .8rem; color: var(--texto-3); } .resumo-metas li.ok { border-color: rgba(22, 163, 74, .35); } .resumo-metas li.ok em { color: var(--verde); } .resumo-metas li.warn { border-color: rgba(217, 119, 6, .3); } .resumo-metas li.warn em { color: var(--amarelo); } .resumo-metas li.bad { border-color: rgba(220, 38, 38, .3); } .resumo-metas li.bad em { color: var(--vermelho); } .peso-box { background: var(--superficie-2); border-radius: var(--raio-sm); padding: 12px 14px; } .pesos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .pesos li { font-size: .82rem; color: var(--texto-2); } .pesos strong { color: var(--texto); margin-left: 5px; } /* -------------------------------------------------------------- tabelas */ .tabela-wrap { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio-sm); } .tabela { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 560px; } .tabela th { text-align: left; padding: 10px 12px; background: var(--superficie-2); color: var(--texto-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--borda); white-space: nowrap; } .tabela td { padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; } .tabela tr:last-child td { border-bottom: none; } .tabela tbody tr:hover { background: var(--superficie-2); } .tabela.clicavel tbody tr { cursor: pointer; } .acoes-td { white-space: nowrap; text-align: right; } .status { font-size: .78rem; padding: 2px 8px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borda); } .status.s-interessado, .status.s-cadastro-realizado { color: var(--verde); border-color: rgba(22, 163, 74, .3); } .status.s-sem-interesse { color: var(--vermelho); border-color: rgba(220, 38, 38, .3); } .status.s-retornar-depois { color: var(--amarelo); border-color: rgba(217, 119, 6, .3); } /* --------------------------------------------------------------- campos */ .campo { display: flex; flex-direction: column; gap: 5px; } .campo.largo { grid-column: 1 / -1; } .campo > label, .campo > span { font-size: .82rem; font-weight: 600; color: var(--texto-2); } .campo i { color: var(--vermelho); font-style: normal; } .campo small { color: var(--texto-3); font-size: .76rem; } input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="file"], select, textarea { width: 100%; padding: 10px 12px; font-family: inherit; font-size: .92rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background: var(--superficie); color: var(--texto); transition: border .15s, box-shadow .15s; } textarea { resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); } input.erro, select.erro, textarea.erro { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); } label.campo.largo textarea { margin-top: 2px; } .filtros { padding: 14px 18px; } .filtro-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .filtro-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--texto-2); font-weight: 600; } .filtro-grid input, .filtro-grid select { min-width: 150px; } .segmentos { display: inline-flex; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 99px; padding: 3px; } .segmentos button { border: none; background: transparent; color: var(--texto-2); font-family: inherit; padding: 7px 15px; border-radius: 99px; cursor: pointer; font-weight: 600; font-size: .85rem; } .segmentos button.ativo { background: var(--marca); color: #fff; } /* ------------------------------------------------------------ dashboard */ .cards-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; } .kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); border-left: 4px solid var(--cor, var(--marca)); } .kpi span { display: block; font-size: .72rem; letter-spacing: .1em; color: var(--texto-3); font-weight: 700; } .kpi strong { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: 2px 0; } .kpi.destaque-kpi strong { color: var(--verde); } .grid-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; margin: 16px 0; } .grid-graficos .card + .card { margin-top: 0; } .chart { position: relative; height: 260px; } .detalhe-grid, .grid-metas, .grid-backup, .grid-rel-usuarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; } .detalhe-grid .card + .card, .grid-metas .card + .card, .grid-backup .card + .card, .grid-rel-usuarios .card + .card { margin-top: 0; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .modal-acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .timeline li { display: flex; gap: 12px; align-items: flex-start; } .timeline .bolinha { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 99px; display: grid; place-items: center; background: var(--bg-2); color: var(--texto-2); font-size: .8rem; font-weight: 700; } .timeline li.feito .bolinha { background: rgba(22, 163, 74, .15); color: var(--verde); } .timeline small { display: block; } .texto { white-space: pre-wrap; color: var(--texto-2); } .relatorio h2 { font-size: 1.6rem; letter-spacing: -.02em; } .rel-destaque { margin: 12px 0 16px; } .rel-destaque span { font-size: .74rem; letter-spacing: .1em; color: var(--texto-3); font-weight: 700; text-transform: uppercase; } .rel-destaque strong { display: block; font-size: 2.4rem; font-weight: 800; } .rel-destaque strong small { font-size: 1.1rem; color: var(--texto-3); } .rel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .rel-lista li { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--superficie-2); border-radius: 8px; font-size: .9rem; } .rel-lista span { color: var(--texto-2); } .rel-lista strong { font-weight: 800; } /* ---------------------------------------------------------------- modal */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s; padding: 20px; } .modal-overlay.show { opacity: 1; } .modal { width: 100%; max-height: 90vh; overflow: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra-forte); transform: translateY(10px) scale(.99); transition: transform .18s; } .modal-overlay.show .modal { transform: none; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--superficie); border-radius: 18px 18px 0 0; } .modal-body { padding: 18px 20px 20px; } .modal-texto { color: var(--texto-2); } /* ---------------------------------------------------------------- toast */ #toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 200; padding: 12px 20px; border-radius: 99px; font-weight: 600; font-size: .9rem; background: var(--texto); color: var(--superficie); box-shadow: var(--sombra-forte); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } #toast.show { opacity: 1; transform: translate(-50%, 0); } #toast.ok { background: var(--verde); color: #fff; } #toast.warn { background: var(--amarelo); color: #fff; } #toast.erro { background: var(--vermelho); color: #fff; } /* --------------------------------------------------------- responsivo */ @media (max-width: 1200px) { .turno-layout { grid-template-columns: 1fr; grid-template-areas: "prog" "lateral" "etapa"; } .lateral { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } @media (max-width: 1024px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 30; flex-direction: row; align-items: center; gap: 14px; padding: 10px 16px; border-right: none; border-bottom: 1px solid var(--borda); overflow-x: auto; } .marca { padding: 0; } .marca div { display: none; } .nav { flex-direction: row; align-items: center; gap: 4px; overflow-x: auto; } .nav-titulo { display: none; } .nav a { white-space: nowrap; padding: 8px 12px; } .sidebar-rodape { border: none; padding: 0; display: flex; align-items: center; gap: 10px; } .mini-select { width: auto; } .topo { padding: 14px 18px; } .view { padding: 16px 18px 90px; } .grid-graficos { grid-template-columns: 1fr; } } @media (max-width: 760px) { .grid-inicio { grid-template-columns: 1fr; } .switch span { display: none; } .etapa-rodape .btn.primary { min-width: 100%; } .fab span { display: none; } .fab { padding: 16px; font-size: 1.2rem; } .cron { font-size: 1.7rem; } } @media print { .sidebar, .topo, .fab, .filtros, #toast { display: none !important; } .view { padding: 0; } .card { box-shadow: none; border-color: #ddd; break-inside: avoid; } body { background: #fff; } }