/* operação: entregas do time e reuniões */

/* kpis */
.op-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.op-kpi { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; overflow: hidden; border: 1px solid var(--bd); border-radius: 14px; background: var(--surface); }
.op-kpi span { display: inline-flex; align-items: center; gap: 6px; color: var(--mt); font-size: 12px; }
.op-kpi span i { font-size: 15px; color: var(--mt2); }
.op-kpi b { font-size: 28px; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.op-kpi small { color: var(--mt2); font-size: 11px; }
.op-kpi.destaque { border-color: var(--acbd); background: linear-gradient(150deg, var(--acb), transparent 70%), var(--sf); }
.op-kpi.destaque b, .op-kpi.destaque span i { color: var(--ac2); }
.op-kpi.alerta { border-color: var(--erbd); background: linear-gradient(150deg, var(--erb), transparent 70%), var(--sf); }
.op-kpi.alerta b, .op-kpi.alerta span i { color: var(--er); }
.op-kpi.atencao b { color: var(--al); }

/* barra de filtros */
.op-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.op-busca { flex: 1 1 240px; }
.op-visoes button { display: inline-flex; align-items: center; gap: 6px; }
.op-clis { margin-bottom: 16px; }
.op-clis .chip { min-height: 36px; padding: 6px 12px; }
.op-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }

/* barra de progresso e botões usados no detalhe da entrega e nas reuniões */
.en-prog { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 4px; background: var(--sf3); }
.en-prog > span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, var(--ac), var(--ac2)); transition: width .4s ease; }
.en-prog.lg { height: 6px; }
.en-prog.passou > span { background: var(--er); }
.ok-btn { border-color: var(--okbd); background: var(--okb); color: var(--ok2); }
.err-t { color: var(--er); }

/* painel lateral */
.op-cab { background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--c, #ff6a00) 12%, transparent), transparent 60%), var(--side); }
.op-av { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 15px; background: color-mix(in srgb, var(--c, var(--ac)) 22%, var(--sf2)); color: var(--c, var(--ac2)); font-size: 18px; font-weight: 700; }
.op-av.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; --c: var(--ac2); }
.op-campos > div { gap: 6px; }
.op-campos .campo { width: 100%; min-height: 36px; }
.op-check { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.op-check li { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); }
.op-check label { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 36px; cursor: pointer; font-size: 13.5px; }
.op-check input { width: 18px; height: 18px; accent-color: var(--ac); }
.op-check li.feito span { color: var(--mt2); text-decoration: line-through; }
.op-check .icon-btn { opacity: .5; }
.op-check li:hover .icon-btn { opacity: 1; }
.op-add { display: flex; gap: 8px; }
.op-add input { flex: 1; min-width: 0; }
.op-md { padding: 14px 16px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf); }
.op-coment { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.op-coment li { display: flex; gap: 10px; }
.op-coment li > div { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 10px 12px; border: 1px solid var(--bd); border-radius: 4px 12px 12px 12px; background: var(--sf); }
.op-coment b { font-size: 12.5px; }
.op-coment p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.op-hist { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--bd); }
.op-hist li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 8px 14px; }
.op-hist li::before { content: ''; position: absolute; left: -21px; top: 14px; width: 12px; height: 12px; border: 2px solid var(--bg); border-radius: 50%; background: var(--mt2); }
.op-hist li.h-aprovada::before { background: var(--ok); }
.op-hist li.h-reprovada::before { background: var(--er); }
.op-hist p { flex-basis: 100%; margin: 0; color: var(--mt); font-size: 13px; }

/* reuniões */
.re-pend { border-color: var(--erbd); background: linear-gradient(150deg, var(--erb), transparent 60%), var(--sf); margin-bottom: 18px; }
.re-pend h2 { display: flex; align-items: center; gap: 8px; }
.re-pend h2 i { color: var(--er); }
.re-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.re-dia + .re-dia { margin-top: 14px; }
.re-dia .ct-h3 { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--tx); }
.re-dia .ct-h3::first-letter { text-transform: uppercase; }
.re-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.re-card { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px 14px 18px; overflow: hidden; border: 1px solid var(--bd); border-radius: 14px; background: var(--sf2); cursor: pointer; transition: border-color var(--ease), transform var(--ease); }
.re-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.re-card:hover { border-color: var(--bd2); transform: translateY(-1px); }
.re-card.vivo { border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 10px 40px color-mix(in srgb, var(--c) 16%, transparent); }
.re-hora { display: flex; flex-direction: column; gap: 2px; }
.re-hora b { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.re-hora small { color: var(--mt2); font-size: 11px; }
.re-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.re-txt b { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.re-txt small { display: inline-flex; align-items: center; gap: 4px; }
.re-tipo { display: inline-flex; align-items: center; gap: 6px; color: var(--c); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.re-vivo, .re-breve { padding: 1px 7px; border-radius: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.re-vivo { background: var(--er); color: #fff; animation: re-pulso 1.6s ease-in-out infinite; }
.re-breve { background: var(--alb); color: var(--al); }
@keyframes re-pulso { 50% { opacity: .55; } }
.re-pauta { display: flex; align-items: center; gap: 8px; max-width: 260px; margin-top: 2px; }
.re-pauta .en-prog { flex: 1; }
.re-pauta small { color: var(--mt2); font-size: 11px; white-space: nowrap; }
.re-acts { display: flex; align-items: center; gap: 8px; }
.re-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-size: 19px; }
.re-ic.sm { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
.re-ic.lg { width: 54px; height: 54px; border-radius: 15px; font-size: 26px; }
.re-hist { display: flex; flex-direction: column; gap: 2px; }
.re-h { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; text-align: left; }
.re-h:hover { background: var(--sf2); }
.re-h .t { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.re-h .t b { overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.re-h .t small { font-size: 11px; }

/* nova reunião */
.re-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.re-tp { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf); color: var(--mt); font-size: 12px; font-weight: 500; text-align: left; transition: border-color var(--ease), background var(--ease); }
.re-tp i { font-size: 20px; color: var(--c); }
.re-tp.on { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--sf)); color: var(--tx); }
.re-emp { position: relative; }
.re-emp input { width: 100%; }
.re-sug { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; padding: 4px; border: 1px solid var(--bd2); border-radius: 10px; background: var(--sf2); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.re-sug button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-radius: 8px; font-size: 13px; text-align: left; }
.re-sug button:hover { background: var(--sf3); }
.re-sug > span { padding: 10px; }

/* sala */
.re-emp-l { cursor: pointer; }
.re-crono { display: flex; align-items: center; gap: 12px; }
.re-crono-t { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.re-crono .en-prog { flex: 1; }
.re-ata { width: 100%; min-height: 150px; padding: 14px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf); color: var(--tx); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }
.re-ata:focus { outline: none; border-color: var(--acbd); box-shadow: 0 0 0 3px var(--acb); }
.re-dec, .re-enc { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.re-dec li, .re-enc li { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); font-size: 13.5px; }
.re-dec li > span, .re-enc .t { flex: 1; min-width: 0; }
.re-dec li i { color: var(--ac2); }
.re-dec li.muted, .re-enc li.muted { border-style: dashed; background: transparent; }
.re-enc .t { display: flex; flex-direction: column; gap: 2px; }
.re-enc-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--sf3); color: var(--mt); }
.re-enc-ic.ok { background: var(--okb); color: var(--ok2); }
.re-enc-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px auto; gap: 8px; }
.re-res { display: flex; gap: 8px; }
.re-r { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); color: var(--mt); font-size: 13px; font-weight: 500; }
.re-r i { font-size: 18px; }
.re-r.on.ok { border-color: var(--okbd); background: var(--okb); color: var(--ok2); }
.re-r.on.warn { border-color: var(--albd); background: var(--alb); color: var(--al); }
.re-r.on.err { border-color: var(--erbd); background: var(--erb); color: var(--er); }
.re-fim { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; padding: 16px; border: 1px solid var(--bd); border-radius: 14px; background: var(--side); }
.re-fim-b { display: flex; flex-wrap: wrap; gap: 8px; }
.re-mover { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--mt); font-size: 13px; }

@media (max-width: 1280px) { .op-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .re-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .op-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .op-kpi { padding: 12px 14px; }
  .op-kpi b { font-size: 22px; }
  .op-barra .seg { width: 100%; }
  .op-barra .seg button { flex: 1; justify-content: center; }
  .op-clis { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .op-clis .chip { flex: none; }
  .re-card { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  .re-acts { grid-column: 1 / -1; justify-content: flex-end; }
  .re-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-enc-form { grid-template-columns: 1fr 1fr; }
  .re-enc-form input:first-child { grid-column: 1 / -1; }
}

/* minhas tarefas agrupadas por prazo */
.tk-grupo + .tk-grupo { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--bd); }
.tk-gh { display: flex; align-items: center; gap: 8px; margin: 8px 6px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mt); }
.tk-gh i { font-size: 15px; }
.tk-gh.err { color: var(--er); }
.tk-gh.warn { color: var(--al); }
.tk-gh.info { color: var(--info); }
.tk-gh .n { padding: 1px 7px; border-radius: 6px; background: var(--sf3); color: var(--mt); font-size: 10px; }
.tk-linha { display: flex; align-items: center; gap: 4px; }
.tk-linha > .linha { flex: 1; min-width: 0; }
.tk-ok { display: grid; place-items: center; width: 30px; height: 30px; flex: none; margin-left: 6px; border: 1.5px solid var(--bd2); border-radius: 50%; color: transparent; transition: all var(--ease); }
.tk-ok:hover { border-color: var(--ok); color: var(--ok2); background: var(--okb); }
.tk-ok.on { border-color: var(--ok); background: var(--ok); color: #06140f; }
.tk-ok.vazio { border-color: transparent; }
.tk-ok.vazio { visibility: hidden; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; }
@media (max-width: 720px) { .op-kpi:nth-child(n+5) { display: none; } .tk-ok { margin-left: 0; } }

/* aprovação no portal (detalhe da entrega) */
.op-portal { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--bd); border-radius: 12px; background: linear-gradient(150deg, rgba(56, 225, 255, .04), transparent 60%), var(--sf); }
.op-arqs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.op-arqs li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--sf2); font-size: 13px; }
.op-arqs li > i { color: var(--mt2); }
.op-arqs .t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.op-arqs .t b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.op-arqs .t small { color: var(--mt); font-size: 12px; }
.op-portal-b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.op-escolha { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.op-escolha label { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--bd); border-radius: 10px; cursor: pointer; }
.op-escolha input { width: 18px; height: 18px; accent-color: var(--ac); }
.op-escolha span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.op-escolha b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }

/* lembrete da reunião */
.re-lemb { display: flex; flex-direction: column; gap: 8px; }
.re-lemb-l { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.re-lemb-l input { width: 18px; height: 18px; flex: none; accent-color: var(--ac); }
.re-lemb-l > span { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.re-lemb-l small { font-size: 11.5px; }
.re-lembrete { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf); }
.re-lembrete input[type=text], .re-lembrete input:not([type]) { min-width: 0; }

/* ia na ata */
.re-ata-h { display: flex; align-items: center; gap: 8px; }
.re-ia-b { margin-left: auto; min-height: 32px; padding: 5px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; border-color: rgba(182, 161, 247, .35); color: var(--pu); }
.re-iabox { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid rgba(182, 161, 247, .3); border-radius: 12px; background: linear-gradient(150deg, var(--pub), transparent 70%), var(--sf); font-size: 13.5px; line-height: 1.5; }
.re-iah { display: flex; align-items: center; gap: 8px; color: var(--pu); }
.re-iah .pill { margin-left: auto; }
.re-iabox h4 { margin: 4px 0 0; color: var(--mt); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.re-iabox ul { margin: 0; padding-left: 18px; }
.re-iabox p { margin: 0; }
.re-iab { display: flex; gap: 8px; margin-top: 4px; }
@media (max-width: 720px) { .re-lembrete { grid-template-columns: 1fr; } }