/* ═══════════════════════════════════════════════════════════════
   Law Enforcement Tools — let-styles.css
   Versão: 1.1 — Alinhado ao padrão visual do PDF Center Suite
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@900&display=swap');

/* ── VARIÁVEIS ──────────────────────────────────────────────── */
:root {
  --let-bg:          #ffffff;
  --let-surface:     #ffffff;
  --let-text:        #1f2937;
  --let-muted:       #6b7280;
  --let-border:      #e5e7eb;
  --let-accent:      #b45309;
  --let-radius-card: 16px;
  --let-radius-btn:  10px;
  --let-shadow:      0 4px 24px rgba(0, 0, 0, 0.08);

  /* Paleta das ferramentas ativas */
  --let-blue:   #5B6CF7;   /* CPF Finder       */
  --let-amber:  #F5A623;   /* Grafotécnico      */
  --let-green:  #22C55E;   /* Crypto Identifier */
  --let-gray:   #9CA3AF;   /* Em desenvolvimento */
}

html {
  scroll-behavior: smooth;
}

/* ── CARDS DAS FERRAMENTAS (formulários) ─────────────────────── */
.let-card {
  background:    var(--let-surface);
  border:        1px solid var(--let-border);
  border-radius: var(--let-radius-card);
  padding:       24px;
  color:         var(--let-text);
  margin:        16px 0;
  box-shadow:    var(--let-shadow);
}

/* ── BOTÕES (formulários internos) ───────────────────────────── */
.let-btn {
  appearance:    none;
  border:        none;
  background:    var(--let-accent);
  color:         #fff;
  border-radius: var(--let-radius-btn);
  padding:       10px 16px;
  font-size:     14px;
  font-weight:   600;
  cursor:        pointer;
  transition:    filter .15s;
}
.let-btn:hover        { filter: brightness(0.92); }
.let-btn-outline      { background: transparent; color: var(--let-accent); border: 1px solid var(--let-accent); }

/* ── INPUTS ──────────────────────────────────────────────────── */
.let-input {
  width:         100%;
  border:        1px solid var(--let-border);
  border-radius: 8px;
  padding:       10px 12px;
  margin:        8px 0 12px;
  font-size:     14px;
  box-sizing:    border-box;
  color:         var(--let-text);
}
.let-input:focus {
  outline:       none;
  border-color:  var(--let-blue);
  box-shadow:    0 0 0 3px rgba(91, 108, 247, .15);
}

/* ── LOADING / RESULTS ───────────────────────────────────────── */
.let-loading        { margin-top: 8px; color: var(--let-muted); font-size: 14px; }
.let-results        { margin-top: 14px; }
.let-list           { columns: 2; column-gap: 16px; }
.let-result-item    { border: 1px solid var(--let-border); border-radius: 8px; padding: 12px; margin-bottom: 8px; }

/* ── PRIVACIDADE E INSTRUÇÕES ────────────────────────────────── */
.let-privacy-notice {
  border:        1px solid #fbbf24;
  background:    #fffbeb;
  border-radius: 8px;
  padding:       12px 16px;
  margin-bottom: 12px;
}
.let-instructions {
  margin-bottom: 12px;
  border:        1px solid var(--let-border);
  border-radius: 8px;
  padding:       8px 14px;
}

.let-privacy-content h5,
.let-instructions-title {
  margin: 0;
  font-family: 'Bitter', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 900;
}

.let-privacy-content p {
  font-size: 15px;
}

.let-instructions-header {
  display: block;
}

@media (max-width: 768px) {
  .let-list { columns: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   HUB DE FERRAMENTAS — [let_hub]
   Padrão visual: PDF Center Suite (círculo sólido + botão cor única)
   ═══════════════════════════════════════════════════════════════ */

/* ── SEÇÃO ───────────────────────────────────────────────────── */
.let-hub {
  background: var(--let-bg);
  padding:    8px 0 24px;
}

.let-hub-tool-section {
  scroll-margin-top: 100px;
}

.let-hub-section-title {
  font-size:     1.05rem;
  font-weight:   700;
  color:         var(--let-text);
  border-bottom: 2px solid var(--let-amber);
  padding-bottom: 5px;
  display:       inline-block;
  margin-bottom: 20px;
}

/* ── CARD ────────────────────────────────────────────────────── */
.let-hub-card {
  background:    var(--let-surface);
  border:        none;                              /* sem borda visível, igual à referência */
  border-radius: var(--let-radius-card);
  box-shadow:    var(--let-shadow);
  padding:       32px 24px 24px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  text-align:    center;
  height:        100%;
  transition:    transform .2s, box-shadow .2s;
}
.let-hub-card:hover:not(.let-hub-card-dev) {
  transform:   translateY(-4px);
  box-shadow:  0 8px 32px rgba(0, 0, 0, 0.12);
}
.let-hub-card-dev {
  opacity: 0.60;
}

/* ── CÍRCULO DE ÍCONE (sólido — igual à referência) ─────────── */
.let-hub-icon-circle {
  width:           88px;
  height:          88px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   20px;
  flex-shrink:     0;
}
.let-hub-icon-circle i {
  color:     #ffffff;
  font-size: 32px;
}

/* Cores sólidas dos círculos */
.let-ic-blue   { background: var(--let-blue);  }
.let-ic-amber  { background: var(--let-amber); }
.let-ic-green  { background: var(--let-green); }
.let-ic-gray   { background: var(--let-gray);  }

/* ── TÍTULO DO CARD ──────────────────────────────────────────── */
.let-hub-card-title {
  font-size:     18px;
  font-weight:   700;
  color:         var(--let-text);
  margin:        0 0 12px;
  line-height:   1.3;
}

/* ── DESCRIÇÃO DO CARD ───────────────────────────────────────── */
.let-hub-card-desc {
  font-size:   14px;
  color:       var(--let-muted);
  line-height: 1.55;
  margin:      0 0 20px;
  flex-grow:   1;             /* empurra o botão para o rodapé do card */
}

/* ── BOTÃO DO HUB (largura total, cor sólida, ícone + texto) ─── */
.let-hub-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  height:          48px;
  border:          none;
  border-radius:   var(--let-radius-btn);
  font-size:       15px;
  font-weight:     600;
  color:           #ffffff;
  text-decoration: none;
  cursor:          pointer;
  transition:      filter .15s, transform .1s;
}
.let-hub-btn:hover:not(:disabled) {
  filter:    brightness(0.92);
  color:     #ffffff;
}
.let-hub-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.let-hub-btn:disabled {
  cursor: not-allowed;
}

/* Cores dos botões — idênticas aos círculos */
.let-hub-btn-blue   { background: var(--let-blue);  }
.let-hub-btn-amber  { background: var(--let-amber); }
.let-hub-btn-green  { background: var(--let-green); }
.let-hub-btn-gray   { background: var(--let-gray);  opacity: .8; }

/* ── BADGE "EM DESENVOLVIMENTO" ──────────────────────────────── */
.let-dev-badge {
  font-size:     11px;
  font-weight:   600;
  letter-spacing: .06em;
  background:    #f3f4f6;
  color:         #9ca3af;
  border:        1px solid #e5e7eb;
  border-radius: 4px;
  padding:       3px 10px;
  margin-bottom: 12px;
  display:       inline-block;
}

.let-field-hint {
  display: block;
  font-size: 12px;
  color: var(--let-muted);
  margin-top: -6px;
  margin-bottom: 12px;
}

.let-input-mono {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: .08em;
}

.let-cpf-origin-states {
  font-family: 'Bitter', Georgia, serif;
  font-weight: 900;
  margin: 6px 0 10px;
}

.let-action-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.let-suite-link {
  color: #4b5563;
  text-decoration: none;
  font-size: 0.90rem;
  line-height: 1;
}

.let-suite-link:hover {
  color: #1f2937;
  text-decoration: underline;
}

.let-tool-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.let-tool-header-icon {
  font-size: 2rem;
  color: #6b7280;
  line-height: 1;
}

.let-tool-header-title {
  margin: 0;
  font-family: 'Bitter', Georgia, serif;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.2;
  color: #5f6368;
}

/* ── CPF FINDER — CAMPOS AUXILIARES ─────────────────────────── */

.let-field-group {
  margin-bottom: 16px;
}

.let-label-optional {
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-weight:   600;
  font-size:     14px;
  color:         var(--let-text);
  margin-bottom: 4px;
}

.let-label-badge {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background:     #eff6ff;
  color:          #3b82f6;
  border:         1px solid #bfdbfe;
  border-radius:  4px;
  padding:        2px 7px;
}

.let-select {
  appearance:  none;
  background:  var(--let-surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  cursor: pointer;
}

.let-state-badge {
  font-size:     12px;
  font-weight:   600;
  color:         #5B6CF7;
  background:    #eef2ff;
  border-radius: 4px;
  padding:       1px 6px;
  margin-left:   4px;
}

/* ── VALIDAÇÃO CADASTRAL — RESULTADO ─────────────────────────── */

.let-validacao-details {
  display:               grid;
  grid-template-columns: 160px 1fr;
  gap:                   4px 12px;
  font-size:             13px;
  margin:                8px 0 0;
}

.let-validacao-details dt {
  font-weight: 600;
  color:       #6b7280;
}

.let-validacao-details dd {
  margin:      0;
  color:       #111827;
  font-family: 'Courier New', Courier, monospace;
  word-break:  break-all;
}