/* Réplica 5) ATIVIDADES DE CAMPO  (Roboto/Inter, azul #0080CB). App de Windows no notebook, Android no celular. Telas em 2x. */
.campo { font-family: Roboto, Inter, sans-serif; color: #272727; }
.campo.nb-conteudo { background: linear-gradient(135deg, #1B4F8A, #0E2C52); }

/* janela do Windows */
.ca-janela { position: absolute; inset: 14px 18px 18px; background: #F9F9F9; border-radius: 9px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.ca-titlebar { height: 34px; flex: none; display: flex; align-items: center; gap: 9px; padding-left: 12px; background: #fff; font-size: 12px; color: #444; border-bottom: 1px solid #E6E6E6; }
.ca-ico { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, #0080CB, #0400CB); }
.ca-ctl { margin-left: auto; display: flex; height: 100%; }
.ca-ctl i { width: 44px; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #555; }
.ca-app { flex: 1; display: grid; grid-template-columns: 178px 1fr; min-height: 0; }
.ca-menu { background: linear-gradient(180deg, #0080CB, #0058B8); color: #fff; padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.ca-marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 0 8px 14px; }
.ca-marca i { width: 22px; height: 22px; border-radius: 7px 7px 7px 2px; background: #fff; box-shadow: inset 0 0 0 5px #7FD0FF; }
.ca-menu > span { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; opacity: .85; }
.ca-menu > span .ic { font-size: 16px; }
.ca-menu > span.on { background: rgba(255,255,255,.2); opacity: 1; font-weight: 600; }
.ca-eu { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 8px; border-top: 1px solid rgba(255,255,255,.2); }
.ca-eu b { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #0080CB; display: grid; place-items: center; font-size: 11px; }
.ca-eu small { display: block; opacity: .75; font-size: 10.5px; }
.ca-corpo { padding: 16px 18px; min-width: 0; }
.ca-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ca-topo h4 { font-size: 22px; font-weight: 400; color: #494A4F; margin-right: auto; }
.ca-filtro { display: flex; align-items: center; gap: 6px; font-size: 12px; background: #fff; border: 1px solid #DADCE0; border-radius: 8px; padding: 6px 10px; color: #494A4F; }
.ca-filtro .ic { color: #0080CB; font-size: 14px; }
.ca-btn { display: flex; align-items: center; gap: 7px; background: #0080CB; color: #fff; border-radius: 8px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; }
.ca-btn .ic { font-size: 15px; }
.ca-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.ca-kpis div { background: #fff; border: 1px solid #E4E6EA; border-radius: 10px; padding: 10px 12px; }
.ca-kpis small { font-size: 11px; color: #7A7C82; }
.ca-kpis b { display: block; font-size: 21px; font-weight: 700; color: #0058B8; letter-spacing: -.01em; }
.ca-meio { display: grid; grid-template-columns: 1fr 190px; gap: 12px; }
.ca-tab { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #E4E6EA; border-radius: 10px; font-size: 11.5px; overflow: hidden; }
.ca-tab th { text-align: left; font-weight: 600; color: #7A7C82; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid #E4E6EA; }
.ca-tab td { padding: 8px 10px; border-bottom: 1px solid #F0F1F3; white-space: nowrap; }
.ca-tab td b { display: block; font-weight: 600; }
.ca-tab td small { color: #8A8C92; font-size: 10.5px; }
.ca-tab .n { text-align: right; font-weight: 600; }
.ca-tab td .ic { color: #439880; font-size: 15px; }
#caNova { display: none; }
#caNova.on { display: table-row; animation: ca-brilho 2.4s ease-out; }
@keyframes ca-brilho { 0%, 40% { background: #E2F2FB; } 100% { background: #fff; } }
.ca-cats { background: #fff; border: 1px solid #E4E6EA; border-radius: 10px; padding: 12px; display: grid; gap: 10px; align-content: start; }
.ca-cats > b { font-size: 12.5px; font-weight: 600; }
.ca-barra { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 11px; color: #494A4F; }
.ca-barra i { grid-column: 1 / -1; grid-row: 2; height: 7px; background: #EEF0F3; border-radius: 4px; overflow: hidden; }
.ca-barra em { display: block; height: 100%; background: linear-gradient(90deg, #0080CB, #0400CB); border-radius: 4px; transition: width 1s ease-out; }
.ca-barra b { font-weight: 700; color: #272727; }

.ca-dialogo { position: absolute; left: 50%; top: 50%; width: 420px; transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: .25s; pointer-events: none; background: #F3F3F3; border: 1px solid #C9C9C9; border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.35); font-size: 12px; overflow: hidden; z-index: 4; }
.ca-dialogo.on { opacity: 1; transform: translate(-50%, -50%); }
.ca-dbarra { display: flex; justify-content: space-between; padding: 9px 12px; background: #fff; border-bottom: 1px solid #E2E2E2; }
.ca-dcaminho { display: flex; align-items: center; gap: 8px; margin: 10px 12px; padding: 6px 9px; background: #fff; border: 1px solid #D5D5D5; border-radius: 4px; color: #444; }
.ca-dlista { margin: 0 12px 10px; background: #fff; border: 1px solid #D5D5D5; border-radius: 4px; padding: 6px; display: grid; gap: 2px; }
.ca-dlista span { display: flex; align-items: center; gap: 7px; padding: 4px 6px; color: #444; }
.ca-dlista .ic { color: #1D8348; }
.ca-dcampo { display: grid; grid-template-columns: 54px 1fr; align-items: center; margin: 0 12px 8px; }
.ca-dcampo span { background: #fff; border: 1px solid #8A8A8A; border-radius: 4px; padding: 5px 8px; }
.ca-dbotoes { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 12px 12px; }
.ca-dbotoes span { min-width: 82px; text-align: center; padding: 6px 0; border-radius: 4px; background: #fff; border: 1px solid #CFCFCF; }
.ca-dbotoes .pri { background: #0067C0; border-color: #0067C0; color: #fff; }
.ca-toast { position: absolute; right: 18px; bottom: 16px; display: flex; gap: 8px; align-items: center; background: #272727; color: #fff; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; opacity: 0; transform: translateY(10px); transition: .4s; z-index: 5; }
.ca-toast .ic { color: #6FD3A9; }
.ca-toast.on { opacity: 1; transform: none; }

/* app do colaborador */
.campo.cel-conteudo { background: #F9F9F9; }
.ca-appbar { position: absolute; top: 0; left: 0; right: 0; height: 112px; padding: 54px 18px 0; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(90deg, #0080CB, #0400CB); color: #fff; z-index: 2; }
.ca-appbar b { font-size: 19px; font-weight: 500; }
.ca-appbar small { font-size: 12px; opacity: .85; }
#caForm .ca-appbar { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
#caForm .ca-appbar .ic { font-size: 21px; }
.ca-aviso { position: absolute; top: 112px; left: 0; right: 0; height: 0; overflow: hidden; font-size: 12.5px; font-weight: 500; color: #fff; display: flex; align-items: center; justify-content: center; transition: height .3s, background .3s; z-index: 1; }
.ca-aviso.on { height: 34px; }
.ca-aviso.off { background: #E8890C; }
.ca-aviso.ok { background: #439880; }
.ca-itens { position: absolute; top: 112px; left: 0; right: 0; padding: 8px 0; transition: top .3s; }
.ca-aviso.on ~ .ca-itens { top: 146px; }
.ca-item { display: flex; gap: 13px; padding: 13px 18px; border-bottom: 1px solid #E6E7EA; background: #F9F9F9; }
.ca-item b { display: block; font-size: 15px; font-weight: 500; }
.ca-item small { display: block; font-size: 12.5px; color: #494A4F; }
.ca-item em { font-style: normal; font-size: 11.5px; color: #8A8C92; }
.ca-item.novo { animation: ca-entra .5s ease-out; background: #EEF7FC; }
@keyframes ca-entra { from { opacity: 0; transform: translateY(-14px); } }
.ca-sync { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #E3F3EE; color: #439880; font-size: 18px; transition: .3s; }
.ca-sync.pend { background: #FFF1DD; color: #E8890C; }
.ca-fab { position: absolute; right: 18px; bottom: 26px; width: 58px; height: 58px; border-radius: 18px; background: #0080CB; color: #fff; display: grid; place-items: center; font-size: 26px; box-shadow: 0 6px 16px rgba(0,128,203,.4); }

.ca-frola { position: absolute; top: 112px; left: 0; right: 0; bottom: 0; overflow: hidden; }
#caRolo { padding: 6px 18px 20px; transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }
#caRolo.p1 { transform: translateY(-270px); }
#caRolo.p2 { transform: translateY(-470px); }
#caRolo label { display: block; font-size: 12px; font-weight: 500; color: #494A4F; margin: 12px 0 6px; }
.ca-sel { display: flex; align-items: center; justify-content: space-between; height: 42px; border-bottom: 1.5px solid #AAACAF; font-size: 14px; color: #8A8C92; }
.ca-sel .ic { font-size: 15px; transform: rotate(90deg); }
.ca-sel.ok, .ca-dois .ca-sel { color: #272727; border-color: #0080CB; }
.ca-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ca-chips { display: flex; gap: 8px; }
.ca-chips span { padding: 7px 14px; border-radius: 99px; border: 1.5px solid #CFD1D5; font-size: 13px; }
.ca-chips .on { background: #0080CB; border-color: #0080CB; color: #fff; }
.ca-var { background: #fff; border: 1px solid #E1E3E7; border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; font-size: 12.5px; color: #494A4F; }
.ca-var b { color: #272727; font-size: 13.5px; font-weight: 600; }
.ca-conts { background: #fff; border: 1px solid #E1E3E7; border-radius: 12px; padding: 4px 12px; }
.ca-cont { display: grid; grid-template-columns: 1fr 26px 34px 26px; align-items: center; gap: 4px; padding: 7px 0; border-bottom: 1px solid #F0F1F3; font-size: 13px; }
.ca-cont i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #CFD1D5; color: #8A8C92; font-size: 13px; }
.ca-cont i.mais { border-color: #0080CB; color: #0080CB; }
.ca-cont b { text-align: center; font-size: 15px; font-weight: 700; }
.ca-total { display: flex; justify-content: space-between; padding: 9px 0 6px; font-size: 13px; font-weight: 500; }
.ca-total b { font-size: 17px; color: #0058B8; }
.ca-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ca-fotos i, .ca-fotos span { aspect-ratio: 1; border-radius: 10px; }
.ca-fotos .f1 { background: linear-gradient(180deg, #9FD3F2 0 45%, #6BAA3C 45%); }
.ca-fotos .f2 { background: radial-gradient(circle at 50% 38%, #E8B795 0 14%, transparent 15%), linear-gradient(180deg, #BFE2F6 0 55%, #7FB84A 55%); }
.ca-fotos .f3 { background: repeating-linear-gradient(100deg, #8CBF4E 0 8px, #6FA23A 8px 16px); }
.ca-fotos span { border: 1.5px dashed #AAACAF; display: grid; place-items: center; color: #8A8C92; font-size: 20px; }
.ca-salvar { margin-top: 16px; height: 46px; border-radius: 10px; background: #0080CB; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; }