/* Usuários (Administração), Meu perfil e a foto + nome no canto do cabeçalho.
   Mesmo kit do módulo: grafite, superfícies brancas, cores de estado do cooperbedin.css. */

/* Foto ou iniciais */
#cooperBedinView .cb-avatar {
  align-items: center; background: #2a2e37; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto;
  font-weight: 800; justify-content: center; letter-spacing: 0.02em; overflow: hidden;
}
#cooperBedinView .cb-avatar img { display: block; height: 100%; object-fit: cover; width: 100%; }
#cooperBedinView .cb-avatar--p { font-size: 0.68rem; height: 28px; width: 28px; }
#cooperBedinView .cb-avatar--m { font-size: 0.78rem; height: 36px; width: 36px; }
#cooperBedinView .cb-avatar--g { font-size: 1.5rem; height: 88px; width: 88px; }
#cooperBedinView .cb-foto-abrir { align-items: center; background: transparent; border: 0; border-radius: 10px; color: var(--st-info-tx); cursor: zoom-in; display: inline-flex; flex-direction: column; font: inherit; font-size: .76rem; font-weight: 700; gap: 8px; padding: 4px; }
#cooperBedinView .cb-foto-abrir:hover { background: var(--st-info-bg); }
#cooperBedinView .cb-foto-abrir > span:last-child { align-items: center; display: inline-flex; gap: 6px; }
#cooperBedinView .cb-foto-abrir:focus-visible { outline: 2px solid var(--st-info); outline-offset: 3px; }
#cooperBedinView .cb-foto-dialog { background: var(--cb-surface); border: 1px solid var(--cb-line); border-radius: var(--kit-raio); color: var(--cb-ink); max-height: calc(100dvh - 32px); max-width: 680px; padding: 20px; width: calc(100% - 32px); box-sizing: border-box; }
#cooperBedinView .cb-foto-dialog::backdrop { background: var(--kit-grafite); opacity: .8; }
#cooperBedinView .cb-foto-dialog header { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 16px; }
#cooperBedinView .cb-foto-dialog h3 { font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
#cooperBedinView .cb-foto-dialog__conteudo img { display: block; height: min(60dvh, 520px); object-fit: contain; width: 100%; }

/* Canto do cabeçalho, ao lado de Sair */
#cooperBedinView .cb-topbar__perfil {
  align-items: center; background: transparent; border: 0; border-radius: 999px; color: #fff; cursor: pointer;
  display: inline-flex; font: inherit; font-size: 0.8rem; font-weight: 600; gap: 9px; max-width: 220px; padding: 3px 10px 3px 3px;
}
#cooperBedinView .cb-topbar__perfil:hover { background: rgba(255, 255, 255, 0.1); }
#cooperBedinView .cb-topbar__perfil:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#cooperBedinView .cb-topbar__perfil .cb-avatar { background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.9); font-weight: 700; letter-spacing: 0.04em; }
#cooperBedinView .cb-topbar__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  #cooperBedinView .cb-topbar__nome { display: none; }
  #cooperBedinView .cb-topbar__perfil { padding-right: 3px; }
}

/* Tela Usuários */
#cooperBedinView .cb-usuarios .cb-modulo__head { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
#cooperBedinView .cb-us-resumo { color: var(--cb-muted); font-size: 0.82rem; margin: 0 0 8px; }
#cooperBedinView .cb-us-vazio { color: var(--cb-muted); }
#cooperBedinView .cb-us-tabela-box { background: var(--cb-surface); border: 1px solid var(--cb-line); border-radius: 12px; overflow-x: auto; }
#cooperBedinView .cb-us-tabela { border-collapse: collapse; min-width: 760px; width: 100%; }
#cooperBedinView .cb-us-tabela th { border-bottom: 1px solid var(--cb-line); color: var(--cb-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; padding: 10px 14px; text-align: left; text-transform: uppercase; }
#cooperBedinView .cb-us-tabela td { border-bottom: 1px solid var(--cb-line); padding: 12px 14px; vertical-align: middle; }
#cooperBedinView .cb-us-tabela tr:last-child td { border-bottom: 0; }
#cooperBedinView .cb-us-tabela tr.is-inativo .cb-us-pessoa { opacity: 0.6; }
#cooperBedinView .cb-us-pessoa { align-items: center; display: flex; gap: 10px; min-width: 0; }
#cooperBedinView .cb-us-pessoa strong { color: var(--cb-ink); display: block; font-size: 0.9rem; }
#cooperBedinView .cb-us-pessoa div > span { color: var(--cb-muted); display: block; font-size: 0.8rem; overflow-wrap: anywhere; }
#cooperBedinView .cb-us-abrir { background: transparent; border: 0; border-radius: 8px; color: inherit; cursor: pointer; font: inherit; padding: 0; text-align: left; }
#cooperBedinView .cb-us-abrir:hover strong { text-decoration: underline; text-underline-offset: 3px; }
#cooperBedinView .cb-us-abrir:focus-visible { outline: 2px solid var(--cb-ink); outline-offset: 5px; }
#cooperBedinView .cb-us-identidade { min-width: 0; }
#cooperBedinView .cb-us-identidade > span { color: var(--cb-muted); display: block; font-size: 0.8rem; overflow-wrap: anywhere; }
#cooperBedinView .cb-us-ficha__identidade { align-items: center; display: flex; flex-wrap: wrap; gap: 20px; padding: 24px; }
#cooperBedinView .cb-us-ficha__identidade > div { flex: 1; min-width: 0; }
#cooperBedinView .cb-us-ficha__identidade h3 { color: var(--cb-ink); font-size: 1.2rem; margin: 0 0 6px; overflow-wrap: anywhere; }
#cooperBedinView .cb-us-ficha__identidade p { color: var(--cb-muted); margin: 0 0 10px; overflow-wrap: anywhere; }
#cooperBedinView .cb-us-ficha__grade { display: grid; gap: 16px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 16px 0; }
#cooperBedinView .cb-us-ficha__bloco { min-width: 0; padding: 20px; }
#cooperBedinView .cb-us-ficha__bloco h3 { color: var(--cb-ink); font-size: 1rem; margin: 0 0 16px; }
#cooperBedinView .cb-us-ficha__bloco p { font-size: 0.82rem; line-height: 1.6; }
#cooperBedinView .cb-us-ficha dl { display: grid; gap: 16px; margin: 0 0 16px; }
#cooperBedinView .cb-us-ficha dt { color: var(--cb-muted); font-size: 0.76rem; margin-bottom: 4px; }
#cooperBedinView .cb-us-ficha dd { font-size: 0.88rem; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
#cooperBedinView .cb-us-ficha__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
#cooperBedinView .cb-us-ficha .cb-us-confirma { margin: 16px 0 0; }
@media (max-width: 760px) { #cooperBedinView .cb-us-ficha__grade { grid-template-columns: 1fr; } }
#cooperBedinView .cb-us-voce { background: var(--cb-off-bg); border-radius: 999px; color: var(--cb-off); font-size: 0.68rem; font-weight: 800; margin-left: 4px; padding: 2px 7px; vertical-align: 1px; }
#cooperBedinView .cb-us-papel-rot { font-weight: 700; }
#cooperBedinView .cb-us-papel { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
#cooperBedinView .cb-us-papel select { min-width: 130px; width: auto; }
#cooperBedinView .cb-us-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
#cooperBedinView .cb-us-pill { border-radius: 999px; display: inline-block; font-size: 0.74rem; font-weight: 800; padding: 3px 9px; white-space: nowrap; }
#cooperBedinView .cb-us-pill--ok { background: var(--cb-ok-bg); color: var(--cb-ok); }
#cooperBedinView .cb-us-pill--aten { background: var(--cb-aten-bg); color: var(--cb-aten); }
#cooperBedinView .cb-us-pill--off { background: var(--cb-off-bg); color: var(--cb-off); }
#cooperBedinView .cb-us-acoes { text-align: right; }
#cooperBedinView .cb-us-acoes > :is(.syn-btn,.cb-btn) { margin: 2px 0 2px 4px; }
#cooperBedinView .cb-us-perigo { color: var(--cb-red); }
#cooperBedinView .cb-us-btn-perigo { background: var(--cb-red); border-color: var(--cb-red); color: #fff; }
#cooperBedinView .cb-us-btn-perigo:hover { background: var(--cb-red-dark); }
#cooperBedinView .cb-us-confirma { background: var(--st-atencao-bg); border: 1px solid var(--st-atencao-tx); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; margin-left: auto; max-width: 420px; padding: 12px; text-align: left; }
#cooperBedinView .cb-us-confirma span { color: var(--cb-text); font-size: 0.84rem; }
#cooperBedinView .cb-us-confirma div { display: flex; gap: 6px; }

#cooperBedinView .cb-us-novo, #cooperBedinView .cb-us-senha, #cooperBedinView .cb-mp-bloco { display: flex; flex-direction: column; gap: 14px; overflow: visible; padding: 20px; }
#cooperBedinView .cb-us-novo h3, #cooperBedinView .cb-mp-bloco h3 { color: var(--cb-ink); font-size: 1rem; margin: 0; }
#cooperBedinView .cb-us-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
#cooperBedinView .cb-us-novo label, #cooperBedinView .cb-mp-bloco > label { display: flex; flex-direction: column; font-size: 0.8rem; font-weight: 700; gap: 6px; }
#cooperBedinView .cb-us-papeis { border: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; padding: 0; }
#cooperBedinView .cb-us-papeis legend { font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; padding: 0; }
#cooperBedinView .cb-us-papeis label.cb-us-opcao { align-items: flex-start; border: 1px solid var(--cb-line); border-radius: 10px; cursor: pointer; display: flex; flex-direction: row; gap: 10px; padding: 10px 12px; }
#cooperBedinView .cb-us-papeis label.cb-us-opcao:has(input:checked) { border-color: var(--cb-ink); box-shadow: 0 0 0 1px var(--cb-ink); }
#cooperBedinView .cb-us-opcao input { margin-top: 3px; }
#cooperBedinView .cb-us-opcao strong { display: block; font-size: 0.86rem; }
#cooperBedinView .cb-us-opcao small { color: var(--cb-muted); display: block; font-size: 0.78rem; font-weight: 500; margin-top: 2px; }
#cooperBedinView .cb-us-nota { color: var(--cb-muted); font-size: 0.8rem; margin: 0; }
#cooperBedinView .cb-us-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
#cooperBedinView .cb-us-senha { border-color: rgba(245, 165, 36, 0.6); }
#cooperBedinView .cb-us-senha p { margin: 0; }
#cooperBedinView .cb-us-senha__linha { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
#cooperBedinView .cb-us-senha code { background: var(--cb-bg); border-radius: 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; padding: 8px 12px; user-select: all; }

/* Meu perfil */
#cooperBedinView .cb-meu-perfil { max-width: 640px; }
#cooperBedinView .cb-mp-foto { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; }
#cooperBedinView .cb-mp-foto__acoes { align-items: flex-start; display: flex; flex-direction: column; gap: 6px; }
#cooperBedinView .cb-mp-foto__acoes small { color: var(--cb-muted); font-size: 0.76rem; }
#cooperBedinView .cb-mp-bloco .cb-feedback { margin: 0; }

@media (max-width: 760px) {
  #cooperBedinView .cb-us-tabela { min-width: 0; }
  #cooperBedinView .cb-us-tabela thead { display: none; }
  #cooperBedinView .cb-us-tabela tr { border-bottom: 1px solid var(--cb-line); display: grid; gap: 6px; padding: 12px 14px; }
  #cooperBedinView .cb-us-tabela td { border: 0; padding: 0; }
  #cooperBedinView .cb-us-tabela td[data-rot]::before { color: var(--cb-muted); content: attr(data-rot) ": "; font-size: 0.76rem; }
  #cooperBedinView .cb-us-acoes { text-align: left; }
  #cooperBedinView .cb-us-acoes > :is(.syn-btn,.cb-btn) { margin: 2px 4px 2px 0; }
  #cooperBedinView .cb-us-confirma { margin-left: 0; }
}

/* Avisos destas telas */
#cooperBedinView .cb-usuarios .cb-feedback, #cooperBedinView .cb-meu-perfil .cb-feedback { border-radius: 10px; font-size: 0.86rem; font-weight: 600; margin: 0 0 14px; padding: 10px 14px; }
#cooperBedinView .cb-usuarios .cb-feedback--ok, #cooperBedinView .cb-meu-perfil .cb-feedback--ok { background: var(--cb-ok-bg); color: var(--cb-ok); }
#cooperBedinView .cb-usuarios .cb-feedback--erro, #cooperBedinView .cb-meu-perfil .cb-feedback--erro { background: rgba(206, 27, 44, 0.1); color: var(--cb-red-dark); }

/* Enquadramento da foto: visor quadrado com a máscara circular, arrastar e aproximar. */
#cooperBedinView .cb-recorte { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
#cooperBedinView .cb-recorte > strong { color: var(--cb-ink); font-size: 0.86rem; }
#cooperBedinView .cb-recorte__visor { aspect-ratio: 1; background: var(--cb-ink); border-radius: 12px; cursor: grab; max-width: 100%; overflow: hidden; position: relative; touch-action: none; user-select: none; width: 280px; }
#cooperBedinView .cb-recorte__visor.is-arrastando { cursor: grabbing; }
#cooperBedinView .cb-recorte__visor:focus-visible { outline: 2px solid var(--cb-ink); outline-offset: 3px; }
#cooperBedinView .cb-recorte__visor img { left: 0; max-width: none; pointer-events: none; position: absolute; top: 0; transform-origin: 0 0; }
#cooperBedinView .cb-recorte__mascara { border-radius: 50%; box-shadow: 0 0 0 999px rgba(22, 24, 29, 0.58); inset: 0; outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: -2px; pointer-events: none; position: absolute; }
#cooperBedinView .cb-recorte__zoom { align-items: center; color: var(--cb-muted); display: flex; font-size: 1rem; font-weight: 700; gap: 10px; width: 280px; max-width: 100%; }
#cooperBedinView .cb-recorte__zoom input { accent-color: var(--cb-ink); flex: 1; min-width: 0; }
#cooperBedinView .cb-recorte small { color: var(--cb-muted); font-size: 0.76rem; }
#cooperBedinView .cb-recorte__botoes { display: flex; flex-wrap: wrap; gap: 8px; }