/* Área do Cliente — portal do cliente (frontend).
   Neutro de propósito: o portal é compartilhado pelas três marcas, então quem
   dá cor é o selo da empresa em cada serviço, não o layout. */

.obc-portal {
  --obc-ink: #1d2327;
  --obc-fraco: #646970;
  --obc-linha: #e0e2e4;
  --obc-fundo: #fff;
  max-width: 760px; margin: 0 auto; padding: 8px 0;
  color: var(--obc-ink);
  font-size: 16px; line-height: 1.6;
}
.obc-portal * { box-sizing: border-box }

.obc-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--obc-linha);
}
.obc-ola { color: var(--obc-fraco); font-size: .9rem }
.obc-topo h2 { margin: 0; font-size: 1.4rem; line-height: 1.2 }
.obc-sair { font-size: .88rem; color: var(--obc-fraco); text-decoration: none; white-space: nowrap }
.obc-sair:hover { text-decoration: underline }

.obc-portal h3 { margin: 1.4em 0 .6em; font-size: 1.1rem }
.obc-sub { color: var(--obc-fraco); font-size: .93rem; margin-top: -.4em }
.obc-voltar { margin: 0 0 .8em }
.obc-voltar a { text-decoration: none; color: var(--obc-fraco); font-size: .92rem }
.obc-voltar a:hover { text-decoration: underline }

.obc-vazio {
  color: var(--obc-fraco); border: 1px dashed var(--obc-linha);
  border-radius: 8px; padding: 18px; text-align: center;
}

/* --- resumo por empresa --- */
.obc-resumo { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.2em }
.obc-resumo__item {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--obc-fundo); border: 1px solid var(--obc-linha);
  border-radius: 8px; padding: 12px 14px; min-width: 150px;
}
.obc-resumo__qtd { color: var(--obc-fraco); font-size: .88rem }

/* --- listas navegáveis --- */
.obc-lista { list-style: none; margin: 0; padding: 0 }
.obc-lista li { margin-bottom: 10px }
.obc-item {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--obc-fundo); border: 1px solid var(--obc-linha);
  border-radius: 8px; padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.obc-item:hover { border-color: #b4b9bd; transform: translateY(-1px) }
.obc-item__titulo { font-weight: 600; font-size: 1.04rem }
.obc-item__sub, .obc-item__meta { color: var(--obc-fraco); font-size: .88rem }
.obc-item__selos { display: flex; flex-wrap: wrap; gap: 5px }

/* --- linha do tempo do cômodo --- */
.obc-linha-tempo { list-style: none; margin: 0; padding: 0 }
.obc-evento {
  background: var(--obc-fundo); border: 1px solid var(--obc-linha);
  border-radius: 8px; padding: 16px 18px; margin-bottom: 12px;
}
.obc-evento__cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.obc-evento__cab time { color: var(--obc-fraco); font-size: .88rem }
.obc-evento h4 { margin: 0 0 .3em; font-size: 1.02rem }
.obc-evento p { margin: 0 0 .4em }
.obc-obs { color: var(--obc-fraco); font-size: .92rem }

/* --- login --- */
.obc-login, .obc-aviso {
  background: var(--obc-fundo); border: 1px solid var(--obc-linha);
  border-radius: 10px; padding: 26px; max-width: 420px; margin: 0 auto;
}
.obc-login h2 { margin-top: 0 }
.obc-login label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 4px }
.obc-login input[type=text], .obc-login input[type=password] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--obc-linha);
  border-radius: 6px; font-size: 1rem;
}
.obc-login .login-submit input, .obc-btn {
  display: inline-block; width: 100%; padding: 11px 18px; border: 0;
  border-radius: 100px; background: var(--obc-ink); color: #fff;
  font-weight: 600; font-size: .96rem; cursor: pointer; text-align: center;
  text-decoration: none;
}
.obc-btn--claro { background: #f0f0f1; color: var(--obc-ink) }
.obc-ajuda { color: var(--obc-fraco); font-size: .88rem; text-align: center; margin: .8em 0 0 }

@media (max-width: 600px) {
  .obc-topo { flex-wrap: wrap }
  .obc-resumo__item { flex: 1 1 100% }
}