@import url("https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap");

@import url(inicio.css);
@import url(cadastro.css);
@import url(indicacao.css);
@import url(criar-adm.css);
@import url(tela-admin.css);
@import url(tela-franqueado.css);
@import url(tela-master.css);

:root {
  /* BACKGROUNDS */
  --bg-login: linear-gradient(
    135deg,
    #00ffcc 0%,
    #000dff 100%
  ); /* background da tela de login */
  --bg-banner-franqueado: linear-gradient(
    270deg,
    #00ffcc 0%,
    #000dff 100%
  ); /* background do banner do franqueado */
  --bg-button: #155dfc; /* background de botões de ação */
  --bg-placeholder: #f3f3f5; /* background dos placeholders */
  --bg-system: #f9fafb; /* background de outras páginas */

  /* TIPOGRAFIA (cores e fonte) */
  --title-color: #0a0a0a; /* títulos principais */
  --text-color: #717182; /* textos generícos */
  --login-button-text-color: #ffffff; /* botões azuis e alguns backgrounds */
  --sign-up-button-text-color: #155dfc; /* botões de outras cores de bg */
  --main-font: "Arimo", sans-serif; /* fonte usada no projeto */

  /* TIPOGRAFIA AUXILIAR */
  --text-muted: #9ca3af; /* textos desabilitados / descrição fraca */
  --title-strong: #0f172a; /* títulos mais “pesados” */
  --title-strong-alt: #111827; /* variação de título escuro */
  --link-primary: #1d4ed8; /* links / destaques azuis */

  /* SUPERFÍCIES (cards, listas, chips) */
  --surface-bg: #ffffff; /* fundo padrão de cards/caixas */
  --surface-bg-soft: #f1f5f9; /* fundo suave (linhas alternadas, boxes leves) */
  --surface-bg-alt: #f8fafc; /* variação usada na tela do franqueado */
  --surface-border: #e5e7eb; /* borda padrão */
  --surface-border-strong: #d1d5db; /* borda um pouco mais forte */
  --surface-border-subtle: #e2e8f0; /* divisórias / separadores leves */
  --surface-info-segment: #eff6ff; /* fundo de segmentos informativos */

  /* FEEDBACK / TOASTS */
  --toast-bg: #0f3a8a;
  --toast-text: #ffffff;
  --toast-err-bg: #7a2328;
  --toast-err-text: #ffffff;

  /* ERROS DE CAMPO */
  --field-error-text: #7a2328;
  --field-error-bg: #fdecec;
  --input-error-border: #e11d48;

  /* BADGES DE STATUS */
  --status-novo-bg: #eaf0ff;
  --status-novo-text: black;

  --status-analise-bg: #eaf0ff;
  --status-analise-text: #155dfc;

  --status-aprovada-bg: #eafaf1;
  --status-aprovada-text: #16a34a;

  --status-reprovada-bg: #fdecec;
  --status-reprovada-text: #b91c1c;
}

body {
  min-height: 100dvh;
  background: var(--bg-login) no-repeat fixed;
  background-size: cover;
  font-family: var(--main-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--title-color);
}

/* Mensagem de erro padrão (reuso global) */
.field-error {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.85rem;
  line-height: 1.15;
  color: var(--field-error-text);
}
.field-error[hidden] {
  display: none !important;
}

/* Realce de input com erro (JS pode aplicar .input--error) */
.input--error,
.cadastro__input.input--error,
.login__input.input--error {
  border-color: var(--input-error-border) !important;
  outline-color: var(--input-error-border) !important;
}

/* Badges de status (quando formos usar nos painéis) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.badge--analise {
  background: var(--status-analise-bg);
  color: var(--status-analise-text);
}
.badge--aprovada {
  background: var(--status-aprovada-bg);
  color: var(--status-aprovada-text);
}
.badge--reprovada {
  background: var(--status-reprovada-bg);
  color: var(--status-reprovada-text);
}
.badge--fechada {
  background: var(--status-fechada-bg);
  color: var(--status-fechada-text);
}

/* ====== Combobox (progressive enhancement sobre <select>) ====== */
.combo {
  position: relative;
}
.combo__input {
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background: var(--bg-placeholder);
  outline: none;
}
.combo__input:focus {
  border-color: var(--bg-button);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-button) 20%, transparent);
}
.combo__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.25rem;
  display: none;
}
.combo__option {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.combo__option[aria-selected="true"],
.combo__option:hover {
  background: var(--status-analise-bg);
  color: var(--status-analise-text);
}
.combo--open .combo__list {
  display: block;
}

/* ================================
   ANEXOS (cards / modais) — GLOBAL
================================ */
.fh-attachments {
  margin-top: 10px;
}

.fh-indication-card__section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 4px;
  margin-left: 12px;
}

.fh-attachments__loading,
.fh-attachments__empty,
.fh-attachments__error {
  color: var(--text-color);
  font-size: 0.95rem;
}

.fh-attachments__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.fh-attachments__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 12px;

  background: var(--surface-bg-alt);
  border: 1px solid var(--surface-border-subtle);
}

.fh-attachments__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--title-color);
  font-weight: 600;
  font-size: 0.75rem;
}

.fh-attachments__meta {
  color: var(--text-color);
  font-weight: 500;
  font-size: 0.75rem;
}

.fh-attachments__btn {
  cursor: pointer;
  border: none;
  background: var(--bg-button);
  color: var(--login-button-text-color);

  padding: 7px 12px;
  border-radius: 999px;

  font-family: var(--main-font);
  font-size: 0.75rem;
}

.fh-attachments__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}