/* =============================================================================
 * components.css — Estilos de componentes da página.
 * Cada bloco corresponde a um componente reutilizável da interface.
 * ========================================================================== */

/* ---- Tipografia utilitária ---------------------------------------------- */
.heading {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-sm);
  color: var(--c-low-pure);
}
.heading--sm { font-size: var(--fs-xs); }
.heading--md { font-size: var(--fs-sm); }
.heading--lg { font-size: var(--fs-md); }
.heading--xl { font-size: var(--fs-lg); }

.body-text {
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  color: var(--c-low-2);
}
.body-text--md { font-size: var(--fs-2xs); }
.body-text--lg { font-size: var(--fs-xs); }

.caption {
  color: var(--c-low-3);
  font-weight: var(--fw-regular);
  font-size: var(--fs-3xs);
  line-height: var(--lh-sm);
}

.detail { font-size: var(--fs-2xs); }
.detail__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-low-pure);
}
.detail--inline .detail__label { margin-right: var(--sp-6xs); }
.detail__value { color: var(--c-low-2); }
.detail--inline .detail__label,
.detail--inline .detail__value { display: inline; }

/* ---- Ícones -------------------------------------------------------------- */
.icon { color: inherit; flex-shrink: 0; }
.icon--xs { width: 16px; height: 16px; }
.icon--sm { width: 20px; height: 20px; }
.icon--md { width: 24px; height: 24px; }
.icon--lg { width: 32px; height: 32px; }

/* ---- Botões -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5xs);
  border-width: var(--bw-sm);
  border-style: solid;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xs);
  line-height: var(--lh-xs);
  height: 44px;
  min-width: 56px;
  padding-inline: var(--sp-4xs);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast-2) var(--ease-productive),
    border-color var(--dur-fast-2) var(--ease-productive),
    color var(--dur-fast-2) var(--ease-productive);
}
.btn:active { box-shadow: none; }
.btn--sm { height: 36px; min-width: 40px; }

.btn--primary {
  border-color: var(--c-primary-pure);
  background-color: var(--c-primary-pure);
  color: var(--c-high-pure);
}
.btn--primary:hover {
  background-color: var(--c-primary-3);
  border-color: var(--c-primary-3);
  color: var(--c-high-pure);
}
.btn--primary:active {
  background-color: var(--c-primary-4);
  border-color: var(--c-primary-4);
}

.btn--tertiary {
  border-color: var(--c-high-4);
  background-color: var(--c-high-pure);
  color: var(--c-low-1);
}
.btn--tertiary:hover {
  background-color: var(--c-high-1);
  border-color: var(--c-high-2);
  color: var(--c-low-1);
}
.btn--tertiary:active {
  background-color: var(--c-high-2);
  border-color: var(--c-high-2);
}

.btn--plain {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  height: auto;
  min-width: auto;
  padding: 0;
  color: var(--c-primary-pure);
}
.btn--plain:hover { color: var(--c-primary-3); }
.btn--plain:active { color: var(--c-primary-4); }

.btn--block { display: flex; width: 100%; }

.btn:disabled,
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  color: var(--c-high-4);
  border-color: var(--c-high-1);
  background-color: var(--c-high-1);
  box-shadow: none;
}
.btn--plain:disabled,
.btn--tertiary:disabled { background-color: transparent; }
.btn--tertiary:disabled { background-color: var(--c-high-pure); }

/* Botão-ícone quadrado (menu, fechar, etc.). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--c-low-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-fast-2) var(--ease-productive),
    color var(--dur-fast-2) var(--ease-productive);
}
.icon-btn--sm { width: 36px; height: 36px; }
.icon-btn--md { width: 44px; height: 44px; }
.icon-btn:hover {
  background: color-mix(in srgb, var(--c-low-3) 8%, transparent);
}
.icon-btn:active {
  background: color-mix(in srgb, var(--c-low-3) 16%, transparent);
}

/* ---- Separadores --------------------------------------------------------- */
.separator-h { border-top: var(--bw-sm) solid var(--c-high-3); width: 100%; }
.separator-v {
  border-left: var(--bw-sm) solid var(--c-high-3);
  align-self: stretch;
  margin-inline: var(--sp-5xs);
}

/* ---- Ícone de informação ------------------------------------------------- */
.info-icon {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--c-low-3);
  display: inline-flex;
}
.info-icon:hover { color: var(--c-low-1); }
.info-icon--right { margin-left: var(--sp-6xs); }

/* =============================================================================
 * Topbar
 * ========================================================================== */
.topbar {
  background-color: var(--c-high-pure);
  border-bottom: var(--bw-sm) solid var(--c-high-2);
  position: relative;
  z-index: 10;
}
.topbar__inner {
  display: flex;
  align-items: center;
  min-height: 64px;
  gap: var(--sp-4xs);
}
.topbar__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.topbar__brand-symbol { display: none; height: 28px; }
.topbar__brand-full { display: block; height: 26px; }

/* Logo da plataforma (imagem própria). */
.topbar__logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 200px;
}
@media (max-width: 767px) {
  .topbar__logo { height: 30px; }
}
.topbar__spacer { flex: 1 1 0%; }

/* Busca (pílula) */
.search {
  flex: 8 1 0%;
  width: 100%;
  max-width: 640px;
  display: flex;
  align-items: center;
  position: relative;
  height: 44px;
  background-color: var(--c-high-1);
  border: var(--bw-sm) solid var(--c-high-1);
  border-radius: var(--radius-pill);
  padding-left: var(--sp-3xs);
  padding-right: var(--sp-5xs);
  transition: border-color var(--dur-fast-2) var(--ease-productive);
}
.search:hover { border-color: var(--c-high-4); }
.search:focus-within {
  outline: 2px solid rgba(4, 116, 226, 0.8);
  outline-offset: 2px;
}
.search__input {
  flex: 1 1 0%;
  border: 0;
  background: transparent;
  font-size: var(--fs-xs);
  color: var(--c-low-pure);
  padding: var(--sp-6xs) var(--sp-4xs);
}
.search__input:focus { outline: none; }
.search__input::placeholder { color: var(--c-low-3); opacity: 1; }
.search__submit {
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: var(--radius-xs);
  color: var(--c-low-3);
  cursor: pointer;
}
.search__submit:hover { color: var(--c-low-1); }

.topbar__cta {
  display: none;
  justify-content: flex-end;
  min-width: 140px;
}
@media (min-width: 1024px) {
  .topbar__cta { display: flex; }
}

.topbar__search-toggle { display: inline-flex; }
@media (min-width: 768px) {
  .topbar__search-toggle { display: none; }
}

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-5xs);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--c-low-1);
  border-radius: var(--radius-sm);
}
.user-menu__label {
  display: none;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}
@media (min-width: 1024px) {
  .user-menu__label { display: inline; }
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background-color: var(--c-secondary-2);
  color: var(--c-primary-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  overflow: hidden;
  flex-shrink: 0;
}

/* Busca visível apenas em telas médias+ dentro da topbar */
.search--desktop { display: none; }
@media (min-width: 768px) {
  .search--desktop { display: flex; }
}

/* =============================================================================
 * Header do processo
 * ========================================================================== */
.lawsuit-header { margin-top: var(--sp-3xs); }
.lawsuit-header__icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3xs);
}
.lawsuit-header__icons-group { display: flex; align-items: center; gap: var(--sp-6xs); }
.lawsuit-title { margin-bottom: var(--sp-4xs); }
.lawsuit-header__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5xs) var(--sp-4xs);
}
.lawsuit-header__court { display: inline-flex; align-items: baseline; gap: var(--sp-6xs); }
.dot { color: var(--c-low-pure); }

/* =============================================================================
 * Banner
 * ========================================================================== */
.banner {
  width: 100%;
  border: var(--bw-sm) solid var(--c-high-3);
  background-color: var(--c-high-1);
  padding: var(--sp-4xs);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--sp-5xs);
  margin-bottom: var(--sp-2xs);
}
.banner__icon { display: inline-flex; color: var(--c-primary-pure); flex-shrink: 0; }
.banner__title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-md);
  color: var(--c-low-pure);
  display: flex;
  align-items: center;
}
.banner__desc {
  color: var(--c-low-2);
  font-size: var(--fs-2xs);
  line-height: var(--lh-md);
  margin-top: var(--sp-6xs);
}

/* =============================================================================
 * Cartões
 * ========================================================================== */
.card {
  background-color: var(--c-high-pure);
  border: var(--bw-sm) solid var(--c-high-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  width: 100%;
  display: block;
}
.card--padded { padding: var(--sp-2xs); }

/* Situação do processo */
.current-situation {
  padding-top: var(--sp-2xs);
  border-top: var(--bw-sm) solid var(--c-high-3);
  margin-bottom: var(--sp-5xs);
}
.current-situation__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6xs);
}
.current-situation__buttons {
  display: flex;
  gap: var(--sp-5xs);
  flex-direction: column;
  margin-top: var(--sp-3xs);
}

/* Botão de "pergunta" (próximos passos / previsão) */
.question-button {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3xs);
  padding: var(--sp-3xs);
  border: var(--bw-sm) solid var(--c-high-3);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast-2) var(--ease-productive),
    box-shadow var(--dur-fast-2) var(--ease-productive);
}
.question-button:hover {
  border-color: var(--c-high-4);
  box-shadow: var(--shadow-3);
}
.question-button__label {
  color: var(--c-low-pure);
  font-size: var(--fs-2xs);
  line-height: var(--lh-lg);
}
.question-button__icon-wrap {
  display: inline-flex;
  width: var(--sp-2xs);
  height: var(--sp-2xs);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: var(--c-primary-1);
  color: var(--c-primary-pure);
}

/* =============================================================================
 * Cadastro de avisos (e-mail + WhatsApp)
 * ========================================================================== */
/* Card compacto: só título + e-mail + WhatsApp + botão. */
.notify-card {
  margin-bottom: var(--sp-2xs);
  padding: var(--sp-4xs) var(--sp-3xs);
}
.notify-card__title { margin-bottom: var(--sp-4xs); }
.notify-form { display: flex; flex-direction: column; gap: var(--sp-5xs); }
.field { display: flex; flex-direction: column; gap: var(--sp-6xs); }
.field__label {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  color: var(--c-low-pure);
}
.field__input {
  height: 44px;
  border: var(--bw-sm) solid var(--c-high-4);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-4xs);
  font-size: var(--fs-2xs);
  font-family: var(--font-base);
  color: var(--c-low-pure);
  background: var(--c-high-pure);
  transition: border-color var(--dur-fast-2) var(--ease-productive);
  min-width: 0;
}
.field__input:hover { border-color: var(--c-low-4); }
.field__input:focus { outline: none; border-color: var(--c-primary-pure); }
.field__input::placeholder { color: var(--c-low-3); }
.phone-input { display: flex; align-items: stretch; gap: var(--sp-5xs); }
.phone-input__cc {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-4xs);
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--c-high-1);
  border: var(--bw-sm) solid var(--c-high-3);
  color: var(--c-low-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xs);
  flex-shrink: 0;
}
.phone-input__ddd { width: 72px; flex-shrink: 0; text-align: center; }
.phone-input__number { flex: 1 1 0%; }
.field__hint { font-size: var(--fs-3xs); line-height: var(--lh-md); min-height: 1em; }
.field__hint[data-state='error'] { color: var(--c-negative-pure); }
.field__hint[data-state='ok'] { color: var(--c-primary-3); }

/* =============================================================================
 * Accordion
 * ========================================================================== */
.accordion-item { border-bottom: var(--bw-sm) solid var(--c-high-3); }
.accordion-header {
  display: flex;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding-block: var(--sp-2xs);
  text-align: left;
}
.accordion-header__content {
  flex: 1 1 0%;
  display: grid;
  grid-template: 'icon title' 'help help' / min-content 1fr;
  justify-content: start;
  align-items: center;
}
.accordion-header__icon {
  grid-area: icon;
  display: flex;
  color: var(--c-low-pure);
  margin-right: var(--sp-5xs);
}
.accordion-header__title {
  grid-area: title;
  color: var(--c-low-pure);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-sm);
}
.accordion-header__help {
  grid-area: help;
  color: var(--c-low-pure);
  font-size: var(--fs-2xs);
  line-height: var(--lh-md);
  margin-top: var(--sp-5xs);
}
.accordion-header__chevron {
  color: var(--c-low-pure);
  margin-left: var(--sp-4xs);
  align-self: center;
  transition: transform var(--dur-medium-1) var(--ease-expressive);
}
.accordion-header[aria-expanded='true'] .accordion-header__chevron {
  transform: rotate(180deg);
}
/* Transição suave de altura via grid-template-rows. */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur-medium-1) var(--ease-expressive);
}
.accordion-content[data-open='true'] { grid-template-rows: 1fr; }
.accordion-content__inner { min-height: 0; }
.accordion-content__body { padding-bottom: var(--sp-xs); }

/* =============================================================================
 * Chips com rolagem horizontal
 * ========================================================================== */
.line-scroll {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  margin-bottom: var(--sp-3xs);
}
.line-scroll__boundary {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.line-scroll__boundary::-webkit-scrollbar { display: none; }
.line-scroll__list {
  display: flex;
  gap: var(--sp-5xs);
  width: max-content;
  padding-block: var(--sp-6xs);
}

.chip-clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background-color: var(--c-high-pure);
  border: var(--bw-sm) solid var(--c-high-4);
  border-radius: var(--radius-pill);
  min-height: 32px;
  padding: var(--sp-6xs) var(--sp-4xs);
  color: var(--c-low-1);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  transition: background-color var(--dur-fast-2) var(--ease-productive),
    border-color var(--dur-fast-2) var(--ease-productive),
    color var(--dur-fast-2) var(--ease-productive);
}
.chip-clickable:hover { background-color: var(--c-high-1); }
.chip-clickable[aria-pressed='true'] {
  background-color: var(--c-low-pure);
  border-color: var(--c-low-1);
  color: var(--c-high-pure);
}

/* Chip estático "Importante" */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-3xs);
  line-height: var(--lh-xs);
  min-height: 24px;
  padding: var(--sp-6xs) var(--sp-5xs);
  border-radius: var(--radius-pill);
  background-color: var(--c-high-1);
  border: var(--bw-sm) solid var(--c-high-1);
  color: var(--c-low-1);
}

/* =============================================================================
 * Timeline
 * ========================================================================== */
.timeline {
  list-style: none;
  margin: 0 0 0 12px;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--c-high-3);
}
.timeline-item {
  position: relative;
  padding-top: var(--sp-3xs);
  padding-bottom: var(--sp-5xs);
  padding-left: calc(24px + var(--sp-5xs));
  margin-left: -12px;
}
.timeline-item--sm { padding-top: var(--sp-5xs); }
.timeline-item__bullet {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: var(--sp-3xs);
  left: 0;
  width: 24px;
  height: 24px;
}
.timeline-item--sm .timeline-item__bullet { height: 20px; top: var(--sp-5xs); }
.timeline-item__bullet::before {
  content: '';
  height: 24px;
  width: 24px;
  position: absolute;
  background-color: var(--c-high-pure);
  border-radius: var(--radius-circle);
}
.timeline-item__bullet::after {
  z-index: 1;
  content: '';
  display: inline-flex;
  border: var(--bw-md) solid var(--c-primary-pure);
  border-radius: var(--radius-circle);
  height: 14px;
  width: 14px;
}
.timeline-item--sm .timeline-item__bullet::after {
  height: 8px;
  width: 8px;
  border-color: var(--c-low-3);
}
.timeline-item__content { position: relative; }

/* Realce verde temporário nos itens recentes: aparece e some após 3s
 * (reproduz o comportamento de "atualização recente" da referência). */
.timeline-item--highlighted .timeline-item__content::before {
  content: '';
  position: absolute;
  inset: calc(var(--sp-6xs) * -1) calc(var(--sp-5xs) * -1);
  background: var(--c-primary-1);
  border-radius: var(--radius-sm);
  z-index: -1;
  opacity: 1;
  animation: timeline-highlight-fade var(--dur-medium-1) var(--ease-productive)
    forwards;
  animation-delay: 3s;
}
@keyframes timeline-highlight-fade {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.timeline-date {
  font-size: var(--fs-xs);
  color: var(--c-low-2);
}
.timeline-date strong { color: var(--c-low-pure); }
.timeline-date__rel { font-size: var(--fs-2xs); color: var(--c-low-2); }

.activity__header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5xs); }
.activity__type {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-sm);
  color: var(--c-low-pure);
  margin-bottom: var(--sp-6xs);
}
.badge-dot {
  border-radius: var(--radius-circle);
  height: 8px;
  width: 8px;
  background-color: var(--c-primary-pure);
  display: inline-block;
}
.activity__desc {
  font-size: var(--fs-2xs);
  color: var(--c-low-2);
  line-height: var(--lh-lg);
  margin-top: var(--sp-6xs);
}
.understand-btn { margin-block: var(--sp-5xs); }

/* Anexos dentro da timeline */
.attachments-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4xs);
  margin-top: var(--sp-5xs);
}
.attachments-row .file { flex: 1 1 240px; min-width: 0; }

/* =============================================================================
 * Arquivos / anexos
 * ========================================================================== */
.file {
  display: flex;
  align-items: center;
  padding: var(--sp-5xs) var(--sp-4xs);
  min-height: 44px;
  background-color: var(--c-high-pure);
  border: var(--bw-sm) solid var(--c-high-4);
  border-radius: var(--radius-sm);
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast-2) var(--ease-productive),
    border-color var(--dur-fast-2) var(--ease-productive);
}
.file:hover { background-color: var(--c-high-1); border-color: var(--c-high-2); }
.file__icon { margin-right: var(--sp-4xs); color: var(--c-primary-pure); flex-shrink: 0; }
.file--pdf .file__icon { color: var(--c-negative-pure); }
.file__content { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0%; }
.file__label {
  font-weight: var(--fw-semibold);
  color: var(--c-low-pure);
  font-size: var(--fs-2xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file__help {
  color: var(--c-low-3);
  font-size: var(--fs-3xs);
  line-height: var(--lh-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file__right { color: var(--c-low-2); margin-left: var(--sp-4xs); flex-shrink: 0; }

/* =============================================================================
 * Sidebar
 * ========================================================================== */
.side-panel { margin-bottom: var(--sp-2xl); }
.attachment-block { display: flex; flex-direction: column; }
.attachment-block__title {
  display: flex;
  gap: var(--sp-6xs);
  align-items: center;
  padding-bottom: var(--sp-4xs);
}
.attachment-list { list-style: none; }
.attachment-list__item { margin-bottom: var(--sp-5xs); }
.attachment-list__item:last-child { margin-bottom: 0; }

.side-info { display: flex; flex-direction: column; gap: var(--sp-6xs); color: var(--c-low-2); margin-top: var(--sp-3xs); }
.side-info__caption { text-align: center; font-size: var(--fs-3xs); line-height: var(--lh-md); }
.request-logs { margin-top: var(--sp-4xs); }
.request-logs__title { margin-bottom: var(--sp-6xs); }

/* =============================================================================
 * Barra de carregamento superior (indicador de progresso)
 * ========================================================================== */
.progress-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1500;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-fast-2);
}
.progress-loader[data-active='true'] { opacity: 1; }
.progress-loader__bar {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--c-primary-pure), var(--c-secondary-pure));
  animation: progress-slide 1.1s var(--ease-productive) infinite;
}
@keyframes progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}