/* =============================================================
   components.css — Componentes reutilizáveis
   Extraídos dos padrões já existentes em index.html / avaliar.html
   / admin.html. Mantém a mesma identidade visual.
   Depende de: tokens.css + base.css
   ============================================================= */

/* =============================================================
   1. BOTÕES
   Padrão do site: pill (radius 50px), transição .3s,
   translate -1/-2px no hover.
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  border: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-slow) var(--ease-standard);
  white-space: nowrap;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn svg { width: 18px; height: 18px; }

/* --- Variantes de cor --- */
.btn-primary {
  background: var(--navy-800);
  color: var(--white);
}
.btn-primary:hover { background: var(--navy-900); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(12,22,41,.18); }

.btn-accent {
  background: var(--cyan-600);
  color: var(--white);
  box-shadow: 0 3px 12px rgba(53,168,182,.2);
}
.btn-accent:hover { background: var(--cyan-700); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(53,168,182,.3); }

.btn-wa {
  background: var(--green-500);
  color: var(--white);
  box-shadow: 0 4px 18px rgba(37,211,102,.25);
}
.btn-wa:hover { background: var(--green-600); transform: translateY(-2px); box-shadow: 0 6px 26px rgba(37,211,102,.35); }

.btn-outline {
  background: transparent;
  color: var(--navy-800);
  border: 2px solid var(--navy-800);
  padding: 13px 26px;        /* compensar a borda */
}
.btn-outline:hover { background: var(--navy-800); color: var(--white); }

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
}
.btn-ghost:hover { background: var(--gray-100); color: var(--navy-800); }

.btn-danger {
  background: var(--danger-500);
  color: var(--white);
}
.btn-danger:hover { background: var(--danger-700); transform: translateY(-2px); }

/* --- Tamanhos --- */
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-sm.btn-outline { padding: 8px 18px; }
.btn-lg { padding: 18px 36px; font-size: 17px; }

/* --- Full width (forms, mobile) --- */
.btn-block { display: flex; width: 100%; }

/* --- Ícone puro (sem label) --- */
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-full);
}
.btn-icon svg { width: 20px; height: 20px; }

/* =============================================================
   2. FORMULÁRIO
   ============================================================= */
.field         { margin-bottom: var(--space-5); }
.field--row    { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.field--row > .field { flex: 1; min-width: 200px; margin-bottom: 0; }

.form-label,
.field > label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.form-help {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--gray-400);
  line-height: 1.5;
}

.form-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--danger-500);
  line-height: 1.4;
}

.form-input,
.form-textarea,
.form-select,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="password"].form-control,
input[type="search"].form-control,
input[type="url"].form-control,
input[type="date"].form-control,
textarea.form-control,
select.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--gray-800);
  background: var(--white);
  transition: border-color var(--duration-slow) var(--ease-standard),
              box-shadow var(--duration-slow) var(--ease-standard);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover { border-color: var(--gray-300); }

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--cyan-500);
  box-shadow: var(--shadow-glow-focus);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--gray-400); }

.form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"],
.form-select[aria-invalid="true"] {
  border-color: var(--danger-500);
  box-shadow: 0 0 0 4px rgba(214,49,72,.12);
}

/* --- Checkbox / consent (padrão do avaliar.html) --- */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--space-5) 0;
  font-size: 15px;
  color: var(--gray-500);
  line-height: 1.5;
}
.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--cyan-600);
  flex-shrink: 0;
  cursor: pointer;
}
.consent label { cursor: pointer; }

/* =============================================================
   3. RATING (estrelas)
   Padrão IDÊNTICO ao avaliar.html — radios invertidos com ~
   ============================================================= */
.rating-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 4px;
  margin-bottom: var(--space-5);
}
.rating-input input { display: none; }
.rating-input label {
  cursor: pointer;
  font-size: 36px;
  color: var(--color-star-inactive);
  transition: color var(--duration-base) var(--ease-standard);
  margin: 0;
  line-height: 1;
}
.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input:checked ~ label { color: var(--cyan-500); }

/* --- Estrelas somente-leitura (em cards de depoimento) --- */
.rating-display {
  display: inline-flex;
  gap: 2px;
  color: var(--cyan-500);
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}
.rating-display--lg { font-size: 22px; }

/* =============================================================
   4. CARDS / SURFACES
   ============================================================= */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: all var(--duration-slow) var(--ease-standard);
}

.card--elevated {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.card--lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--cyan-400);
}

/* Card com faixa gradient no topo (padrão do avaliar.html) */
.card--gradient-top {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  box-shadow: 0 8px 36px rgba(12,22,41,.08);
  border: none;
}
.card--gradient-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan-500), var(--navy-800));
}

/* Card com barra lateral que anima no hover (padrão do exam-card) */
.card--accent-bar {
  position: relative;
  overflow: hidden;
}
.card--accent-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--cyan-500);
  transition: height var(--duration-slow) var(--ease-standard);
}
.card--accent-bar:hover::before { height: 100%; }

/* Card container de formulário/limitado */
.card-narrow {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

/* =============================================================
   5. ICON TILE — o quadrado 44x44 cyan-50/cyan-600
   (padrão usado em exam-icon, contact-icon)
   ============================================================= */
.icon-tile {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--cyan-50);
  color: var(--cyan-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-tile svg { width: 22px; height: 22px; }

.icon-tile--lg { width: 60px; height: 60px; border-radius: var(--radius-full); }
.icon-tile--lg svg { width: 28px; height: 28px; }

.icon-tile--on-dark {
  background: rgba(78,215,220,.12);
  color: var(--cyan-400);
}

/* =============================================================
   6. BADGES
   ============================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.6;
  white-space: nowrap;
}

.badge--accent  { background: var(--cyan-50);   color: var(--cyan-700); }
.badge--neutral { background: var(--gray-100);  color: var(--gray-600); }
.badge--brand   { background: rgba(78,215,220,.15); color: var(--cyan-500); }

/* Status */
.badge--pending  { background: #FFF3E0;        color: #B06F00; }
.badge--approved { background: var(--success-100); color: var(--success-700); }
.badge--rejected { background: var(--danger-100);  color: var(--danger-700); }
.badge--archived { background: var(--gray-200);    color: var(--gray-700); }

/* Badge "hero" com bolinha (padrão do index.html) */
.badge-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  background: rgba(78,215,220,.10);
  border: 1px solid rgba(78,215,220,.25);
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan-700);
  letter-spacing: 0.4px;
}
.badge-hero::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--cyan-500);
  border-radius: var(--radius-full);
}

/* =============================================================
   7. PILL TABS (padrão do admin.html)
   ============================================================= */
.pill-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.pill-tab {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pill-tab:hover { border-color: var(--gray-300); color: var(--gray-700); }

.pill-tab[aria-selected="true"],
.pill-tab.active {
  background: var(--navy-900);
  color: var(--white);
  border-color: var(--navy-900);
}

.pill-tab .count {
  display: inline-block;
  background: rgba(0,0,0,.08);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
}
.pill-tab[aria-selected="true"] .count,
.pill-tab.active .count { background: rgba(255,255,255,.2); }

/* =============================================================
   8. LINK BOX / COPY BOX (padrão do admin.html)
   ============================================================= */
.link-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--cyan-50);
  border: 1px solid var(--cyan-500);
  border-radius: 10px;
}
.link-box code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--cyan-700);
  word-break: break-all;
  background: transparent;
  padding: 0;
}

/* =============================================================
   9. EMPTY STATE
   ============================================================= */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--gray-400);
}
.empty-state svg {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  opacity: .4;
  display: block;
}
.empty-state p { font-size: 17px; margin-bottom: 4px; }
.empty-state small { color: var(--gray-300); font-size: 14px; }

/* Variante dashed (padrão do testi-empty) */
.empty-state--dashed {
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-md);
}

/* =============================================================
   10. QUOTE CARD (padrão do testi-card)
   ============================================================= */
.quote-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 28px;
}
.quote-card::before {
  content: '\201C';
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--cyan-100);
  line-height: 1;
}
.quote-card blockquote {
  position: relative;
  z-index: 1;
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--gray-500);
  margin-bottom: 18px;
}
.quote-card .quote-author { font-weight: 600; font-size: 15px; color: var(--gray-700); }
.quote-card .quote-meta   { font-size: 13px; color: var(--gray-400); }

/* =============================================================
   11. DIVIDERS / SEPARATORS
   ============================================================= */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  color: var(--gray-400);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

/* =============================================================
   12. TOAST / ALERT INLINE
   ============================================================= */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

.alert--info    { background: var(--info-100);    color: var(--info-700); }
.alert--success { background: var(--success-100); color: var(--success-700); }
.alert--warning { background: var(--warning-100); color: var(--warning-700); }
.alert--danger  { background: var(--danger-100);  color: var(--danger-700); }

/* =============================================================
   13. SPINNER (loading)
   ============================================================= */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin .7s linear infinite;
  vertical-align: middle;
}
.spinner--lg { width: 32px; height: 32px; border-width: 3px; }

/* =============================================================
   14. DARK MODE — sobrescritas mínimas
   Os componentes já usam tokens semânticos onde possível.
   Aqui ajustamos apenas o que precisa de atenção manual.
   ============================================================= */
  /* Buttons */
  html[data-theme="dark"] .btn-outline {
    color: var(--white);
    border-color: var(--white);
  }
  html[data-theme="dark"] .btn-outline:hover { background: var(--white); color: var(--navy-900); }

  html[data-theme="dark"] .btn-ghost { color: var(--gray-300); }
  html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.06); color: var(--white); }

  /* Form fields */
  html[data-theme="dark"] .form-label,
  html[data-theme="dark"] .field > label { color: var(--gray-200); }

  html[data-theme="dark"] .form-input,
  html[data-theme="dark"] .form-textarea,
  html[data-theme="dark"] .form-select {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
    color: var(--gray-100);
  }
  html[data-theme="dark"] .form-input::placeholder,
  html[data-theme="dark"] .form-textarea::placeholder { color: var(--gray-500); }
  html[data-theme="dark"] .form-input:focus,
  html[data-theme="dark"] .form-textarea:focus,
  html[data-theme="dark"] .form-select:focus { border-color: var(--cyan-500); }

  html[data-theme="dark"] .consent { color: var(--gray-400); }

  /* Cards */
  html[data-theme="dark"] .card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
  }
  html[data-theme="dark"] .card--lift:hover {
    border-color: var(--cyan-500);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }
  html[data-theme="dark"] .card--gradient-top { background: rgba(255,255,255,0.04); }

  /* Pill tabs */
  html[data-theme="dark"] .pill-tab {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
    color: var(--gray-400);
  }
  html[data-theme="dark"] .pill-tab:hover { border-color: rgba(255,255,255,0.16); color: var(--white); }
  html[data-theme="dark"] .pill-tab[aria-selected="true"],
  html[data-theme="dark"] .pill-tab.active {
    background: var(--white);
    color: var(--navy-900);
    border-color: var(--white);
  }
  html[data-theme="dark"] .pill-tab[aria-selected="true"] .count,
  html[data-theme="dark"] .pill-tab.active .count { background: rgba(12,22,41,.15); color: var(--navy-900); }

  /* Icon tile */
  html[data-theme="dark"] .icon-tile {
    background: rgba(78,215,220,0.08);
    color: var(--cyan-400);
  }

  /* Link box */
  html[data-theme="dark"] .link-box {
    background: rgba(78,215,220,0.06);
    border-color: rgba(78,215,220,0.25);
  }
  html[data-theme="dark"] .link-box code { color: var(--cyan-300); }

  /* Quote card */
  html[data-theme="dark"] .quote-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
  }
  html[data-theme="dark"] .quote-card::before { color: rgba(78,215,220,0.15); }
  html[data-theme="dark"] .quote-card blockquote { color: var(--gray-400); }
  html[data-theme="dark"] .quote-card .quote-author { color: var(--gray-200); }

  /* Empty state */
  html[data-theme="dark"] .empty-state--dashed {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.06);
  }

  /* Badges — ajustar apenas as que usavam bg muito claro */
  html[data-theme="dark"] .badge--neutral { background: rgba(255,255,255,0.06); color: var(--gray-300); }
  html[data-theme="dark"] .badge--pending  { background: rgba(243,156,18,.15);  color: #F5B84A; }
  html[data-theme="dark"] .badge--approved { background: rgba(22,160,106,.15);  color: #4FD89A; }
  html[data-theme="dark"] .badge--rejected { background: rgba(214,49,72,.18);   color: #FF8296; }
  html[data-theme="dark"] .badge--archived { background: rgba(255,255,255,0.06); color: var(--gray-300); }

  /* Alerts */
  html[data-theme="dark"] .alert--info    { background: rgba(27,117,139,.18); color: var(--cyan-300); }
  html[data-theme="dark"] .alert--success { background: rgba(22,160,106,.18); color: #7FE3B3; }
  html[data-theme="dark"] .alert--warning { background: rgba(212,144,0,.18);  color: #F5C970; }
  html[data-theme="dark"] .alert--danger  { background: rgba(214,49,72,.18);  color: #FF8A9C; }