/* timeline.css — extraído de timeline.html (2026-06-09). */
:root {
      --color-primary:      #F59E0B;
      --color-primary-dark: #D97706;
      --color-secondary:    #FBBF24;
      --color-bg-dark:      #060608;
      --color-bg-deep:      #0F0C04;
      --color-text-main:    #FFFFFF;
      --color-text-sub:     #A0A0A0;
      --color-border:       #1E1A10;
      --color-card:         #0D0B06;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--color-bg-dark);
      color: var(--color-text-main);
      font-family: 'Segoe UI', system-ui, sans-serif;
      min-height: 100vh;
    }

    /* ── Header ── */
    header {
      background: var(--color-bg-deep);
      border-bottom: 1px solid var(--color-border);
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }
    .logo-icon { width: 56px; height: 56px; flex-shrink: 0; }
    .logo-text { display: flex; flex-direction: column; gap: 2px; }
    .logo-name {
      font-family: 'Sora', sans-serif;
      font-size: 28px; line-height: 1; letter-spacing: -1.8px; white-space: nowrap;
    }
    .logo-name .lw { font-weight: 300; color: #F5EDD5; }
    .logo-name .lg { font-weight: 300; color: #F59E0B; }
    .logo-name .lb { font-weight: 700; color: #F5EDD5; }
    .logo-sub {
      font-family: 'Sora', sans-serif;
      font-size: 9px; color: #9D8B5E; letter-spacing: 2.5px; text-transform: uppercase;
    }
    @media (max-width: 480px) {
      .logo-icon { width: 44px; height: 44px; }
      .logo-name { font-size: 22px; }
    }

    .header-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #0a2a0a;
      border: 1px solid #1a4a1a;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 12px;
      color: #4ade80;
    }
    .pulse {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #4ade80;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.3; }
    }

    /* ── Main layout ── */
    main {
      max-width: 900px;
      margin: 0 auto;
      padding: 32px 16px 64px;
    }

    h1 {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .subtitle {
      font-size: 13px;
      color: var(--color-text-sub);
      margin-bottom: 32px;
    }

    /* ── Métricas ── */
    .metricas {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 36px;
    }
    @media (min-width: 600px) {
      .metricas { grid-template-columns: repeat(4, 1fr); }
    }
    .metrica-card {
      background: var(--color-card);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
    }
    .metrica-valor {
      font-size: 22px;
      font-weight: 700;
      color: var(--color-primary);
      line-height: 1.2;
    }
    .metrica-label {
      font-size: 11px;
      color: var(--color-text-sub);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    /* ── Timeline ── */
    .timeline {
      position: relative;
      padding-left: 28px;
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, var(--color-primary), transparent);
    }

    .evento {
      position: relative;
      margin-bottom: 20px;
    }
    .evento-dot {
      position: absolute;
      left: -25px;
      top: 16px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid var(--color-primary);
      background: var(--color-bg-dark);
      z-index: 1;
    }
    .evento-dot.liquidacao { border-color: #4ade80; }
    .evento-dot.kyc        { border-color: #60a5fa; }
    .evento-dot.duplicata  { border-color: #f59e0b; }

    .evento-card {
      background: var(--color-card);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 14px 16px;
      transition: border-color .2s;
    }
    .evento-card:hover { border-color: #3a3020; }
    .evento-card:target { border-color: var(--color-primary); }

    .evento-header {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .evento-icone { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
    .evento-titulo {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text-main);
      line-height: 1.4;
    }
    .evento-desc {
      font-size: 12px;
      color: var(--color-text-sub);
      margin-top: 4px;
    }
    .evento-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      flex-wrap: wrap;
      gap: 6px;
    }
    .evento-dt {
      font-size: 11px;
      color: #555;
    }
    .evento-hash {
      font-family: monospace;
      font-size: 11px;
      color: #3a3020;
      background: #0a0900;
      border: 1px solid #1a1500;
      border-radius: 6px;
      padding: 2px 8px;
      text-decoration: none;
      transition: color .2s, border-color .2s;
    }
    .evento-hash:hover { color: var(--color-primary); border-color: #3a3020; }

    .badge {
      font-size: 10px;
      border-radius: 20px;
      padding: 2px 8px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .4px;
    }
    .badge-ativo      { background: #1a2a10; color: #4ade80; }
    .badge-liquidado  { background: #0a2a0a; color: #86efac; }
    .badge-pendente   { background: #2a1a00; color: #fbbf24; }
    .badge-verificado { background: #0a1a2a; color: #60a5fa; }

    /* ── Paginação ── */
    .paginacao {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-top: 32px;
    }
    .btn-pag {
      background: var(--color-card);
      border: 1px solid var(--color-border);
      color: var(--color-text-main);
      border-radius: 8px;
      padding: 8px 20px;
      font-size: 13px;
      cursor: pointer;
      transition: border-color .2s, background .2s;
    }
    .btn-pag:hover:not(:disabled) {
      border-color: var(--color-primary);
      background: #1a1500;
    }
    .btn-pag:disabled { opacity: 0.3; cursor: default; }
    .pag-info { font-size: 13px; color: var(--color-text-sub); }

    /* ── Loading / vazio ── */
    .loading {
      text-align: center;
      padding: 60px 0;
      color: var(--color-text-sub);
    }
    .spinner {
      display: inline-block;
      width: 32px;
      height: 32px;
      border: 3px solid #222;
      border-top-color: var(--color-primary);
      border-radius: 50%;
      animation: spin .8s linear infinite;
      margin-bottom: 12px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Disclaimer ── */
    .disclaimer {
      background: #0a0a0a;
      border: 1px solid #1a1500;
      border-radius: 10px;
      padding: 14px 16px;
      font-size: 11px;
      color: #555;
      line-height: 1.6;
      margin-bottom: 28px;
    }
    .disclaimer strong { color: #888; }

    /* ── Chain status ── */
    .chain-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      background: #0a0a0a;
      border: 1px solid #1a1500;
      border-radius: 10px;
      padding: 10px 16px;
      margin-bottom: 24px;
    }
    .chain-head {
      font-family: monospace;
      font-size: 11px;
      color: #555;
      word-break: break-all;
    }
    .chain-head span { color: var(--color-primary); }
    .btn-verificar {
      background: transparent;
      border: 1px solid #3a3020;
      color: var(--color-primary);
      border-radius: 8px;
      padding: 5px 14px;
      font-size: 12px;
      cursor: pointer;
      transition: background .2s;
      white-space: nowrap;
    }
    .btn-verificar:hover { background: #1a1500; }
    .chain-ok   { color: #4ade80; font-size: 12px; font-weight: 600; }
    .chain-fail { color: #ef4444; font-size: 12px; font-weight: 600; }

    /* ── Abas (alterna entre Linha do tempo e Blockchain) ── */
    .view-tabs { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
    .view-tab {
      background: var(--color-card);
      border: 1px solid var(--color-border);
      color: var(--color-text-sub);
      border-radius: 10px;
      padding: 9px 18px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: border-color .2s, color .2s, background .2s;
    }
    .view-tab:hover { border-color: #3a3020; color: #fff; }
    .view-tab.active { border-color: var(--color-primary); color: var(--color-primary); background: #1a1500; }

    /* ── Informações na Blockchain ── */
    .bc-section-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
    .bc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
    @media (min-width: 640px) { .bc-grid { grid-template-columns: repeat(2, 1fr); } }
    .bc-card {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: var(--color-card);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 18px 40px 18px 18px;
      text-decoration: none;
      transition: border-color .2s;
    }
    .bc-card:hover { border-color: var(--color-primary); }
    .bc-icon {
      flex-shrink: 0;
      width: 44px; height: 44px;
      border-radius: 12px;
      background: #1a1500;
      border: 1px solid #2a2010;
      display: flex; align-items: center; justify-content: center;
      color: var(--color-primary);
    }
    .bc-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
    .bc-desc { font-size: 12px; color: var(--color-text-sub); line-height: 1.5; }
    .bc-arrow { position: absolute; top: 16px; right: 16px; color: var(--color-primary); font-size: 15px; }

    /* ── Alerta (aviso demonstrativo): visível, porém secundário ao card ── */
    .bc-alert {
      display: flex; align-items: flex-start; gap: 12px;
      margin-top: 20px;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid rgba(245,158,11,.5);
      background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(217,119,6,.03));
    }
    .bc-alert-ic { font-size: 20px; line-height: 1; flex-shrink: 0; }
    .bc-alert-body { font-size: 12.5px; line-height: 1.55; color: #d8c9a0; }
    .bc-alert-title {
      font-size: 12px; font-weight: 700; color: var(--color-secondary);
      text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px;
    }
    .bc-alert-body strong { color: #f3e8c8; }