/* Visibilidade dos relatorios -- tela do Adm Tasy.
   Marca Flua (design/export/Relatórios · Apoio/Visibilidade*): este arquivo é só
   desta tela, então foi reescrito no lugar em vez de ganhar uma camada à parte.
   Carregado depois do styles.css e do flua-componentes.css. Tokens: flua.css. */

body,
body.embed-mode {
  background-color: var(--color-bg-page);
}

.rv-wrapper {
  height: calc(100vh - 70px);
  overflow-y: auto;
  background: var(--color-bg-page);
}

body.embed-mode .rv-wrapper {
  height: 100vh;
}

.rv-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.rv-intro {
  background: var(--h-ffffff, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.rv-intro p {
  margin: 0;
  color: var(--flua-navy);
  font-size: 14px;
  line-height: 1.5;
}

.rv-intro-note {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

.rv-intro-note i {
  color: var(--flua-navy);
  margin-right: 4px;
}

/* --- Barra de busca --- */
.rv-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rv-search {
  position: relative;
  flex: 1;
  min-width: 240px;
}

.rv-search i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

.rv-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 18px 0 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  color: var(--flua-navy);
  background: var(--h-ffffff, #fff);
  box-sizing: border-box;
}

.rv-search input::placeholder {
  color: var(--text-muted);
}

.rv-search input:focus {
  outline: none;
  border-color: var(--flua-navy);
  box-shadow: inset 0 0 0 1px var(--flua-navy);
}

.rv-only-restricted {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--flua-navy);
  cursor: pointer;
  white-space: nowrap;
}

.rv-only-restricted input,
.rv-perfil input {
  accent-color: var(--flua-navy);
}

.rv-only-restricted input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.rv-resumo {
  font-size: 14px;
  color: var(--text-muted);
  margin-left: auto;
}

/* --- Card de relatorio --- */
.rv-card {
  background: var(--h-ffffff, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

/* Borda navy: da para varrer a lista e achar o que tem regra sem ler o texto
   de cada card. */
.rv-card.restrito {
  border-color: var(--flua-navy);
}

.rv-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.rv-card-ident {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.rv-card-id {
  font-weight: 700;
  color: var(--flua-navy);
  font-size: 14px;
}

.rv-card-nome {
  font-weight: 700;
  color: var(--flua-navy);
  font-size: 14px;
}

.rv-card-grupo {
  background: var(--flua-beige);
  color: var(--flua-navy);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
}

.rv-card-estado {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.rv-card.restrito .rv-card-estado {
  color: var(--flua-navy);
  font-weight: 700;
}

/* Aviso de trava que vive no codigo. Sem ele a tela mentia: dava para marcar
   "Somente Super Clinica" no 2214, salvar com sucesso e o relatorio continuar
   invisivel, porque a trava de supervisor roda antes e ja o tirou da lista. */
.rv-trava-fixa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 12px 16px;
  background: var(--status-maint-bg);
  border-radius: 12px;
  color: var(--status-maint);
  font-size: 12px;
  line-height: 1.45;
}

.rv-trava-fixa i {
  margin-top: 2px;
  color: var(--status-maint);
}

.rv-card-body {
  display: flex;
  gap: 20px;
  padding: 14px 16px;
  flex-wrap: wrap;
}

.rv-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

.rv-campo-perfis {
  flex: 1;
  min-width: 260px;
}

.rv-campo-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--flua-navy);
}

.rv-campo-label small {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

.rv-campo select {
  min-width: 220px;
  min-height: 44px;
  padding: 0 40px 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  color: var(--flua-navy);
  background: var(--h-ffffff, #fff) url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M1%201.5l5%205%205-5%22%20fill%3D%22none%22%20stroke%3D%22%2355697A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat right 16px center / 12px 8px;
  appearance: none;
  -webkit-appearance: none;
}

.rv-campo select:focus {
  outline: none;
  border-color: var(--flua-navy);
  box-shadow: inset 0 0 0 1px var(--flua-navy);
}

/* Lista de perfis com rolagem propria: sao ~100 perfis ativos no Tasy, e sem
   limite de altura um card sozinho ocuparia varias telas. */
.rv-perfis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 132px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--h-ffffff, #fff);
}

.rv-perfil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--h-ffffff, #fff);
  font-size: 12px;
  color: var(--flua-navy);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.rv-perfil:hover {
  border-color: var(--flua-navy);
}

.rv-perfil.marcado {
  background: var(--flua-light-blue);
  border-color: var(--flua-navy);
  color: var(--flua-navy);
  font-weight: 700;
}

.rv-perfil input {
  margin: 0;
  width: auto;
}

/* Quantidade de usuarios do perfil: ajuda a nao restringir para um perfil
   vazio, que na pratica esconderia o relatorio de todo mundo. */
.rv-perfil small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

.rv-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 14px;
}

/* Liberar para todos = secundário; Salvar = principal (pílulas pequenas) */
.rv-card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

.rv-card-actions .button-secondary {
  border: 1.5px solid var(--flua-navy);
  background: var(--h-ffffff, #fff);
  color: var(--flua-navy);
}

.rv-card-actions .button-secondary:hover {
  background: rgba(var(--rgb-0b2c45, 11, 44, 69), 0.06);
  color: var(--flua-navy);
}

.rv-card-actions .button-primary {
  border: 1.5px solid var(--flua-navy);
  background: var(--flua-navy);
  color: var(--h-ffffff, #fff);
}

.rv-card-actions .button-primary:hover {
  background: var(--primary-light);
  box-shadow: none;
  transform: none;
}

.rv-card-actions .button-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

/* --- Estados --- */
.rv-loading,
.rv-vazio {
  text-align: center;
  padding: 40px;
  font-size: 14px;
  color: var(--text-muted);
}

.rv-negado {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  background: var(--h-ffffff, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.rv-negado i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: var(--radius-pill);
  background: var(--status-neutral-bg);
  color: var(--text-muted);
  font-size: 26px;
}

.rv-negado h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 500;
  color: var(--flua-navy);
}

.rv-negado p {
  margin: 0;
  font-size: 14px;
}

@media (max-width: 720px) {
  .rv-container {
    padding: 12px 12px 40px;
  }

  .rv-card-body {
    flex-direction: column;
  }

  .rv-campo select {
    width: 100%;
  }

  .rv-resumo {
    margin-left: 0;
  }

  /* Celular: perfil e alvo de toque (40 px de altura, caixa 18 px) e a lista
     ganha respiro e altura -- com 132 px e chips de 12 px ficava apertada. */
  .rv-perfis {
    gap: 8px;
    padding: 8px;
    max-height: 240px;
  }

  .rv-perfil {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
  }

  .rv-perfil input {
    width: 18px;
    height: 18px;
  }
}

/* O styles.css (<=768px) estica todo .button-primary/.button-secondary e põe o
   principal primeiro; aqui os dois dividem a linha na ordem do código. */
@media (max-width: 768px) {
  .rv-card-actions button {
    flex: 1;
    width: auto;
    order: 0;
  }
}