/*
 * linha-tempo.css
 * Estilos da página "Linha do Tempo" — EQ. [A]
 */

/* ── Banner: gradiente cinzento-azulado ──────────────────────────────────── */
[data-page="linha-tempo"] .profile-wid-bg::before {
    opacity: 0.3;
    background: #f8f8f8;
    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(#1f2937));
    background: linear-gradient(to top, #000, #1f2937);
}

[data-page="linha-tempo"] .tl-scope {
  padding: 20px 16px 60px;
}

[data-page="linha-tempo"] .tl-scope h1.timeline-title {
  font-family: inherit;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 400;
}

[data-page="linha-tempo"] .tl-scope h1.timeline-title span { color: #c8602a; }

[data-page="linha-tempo"] .tl-scope p.timeline-subtitle {
  font-size: 0.82rem;
  font-weight: 300;
  color: #888;
  letter-spacing: 0.04em;
  margin: 0;
}

[data-page="linha-tempo"] .tl-scope .timeline-title,
[data-page="linha-tempo"] .tl-scope .timeline-subtitle {
  text-align: left;
  margin: 0;
}

[data-page="linha-tempo"] .tl-scope .timeline-wrap {
  max-width: 100%;
  position: relative;
}

[data-page="linha-tempo"] .tl-scope .timeline-hero {
  max-width: 100%;
  margin: 0 0 48px 0;
  /* padding-left: calc(80px + 2px + 22px); */
  padding-left: 10px;  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

[data-page="linha-tempo"] .tl-scope .hero-icon {
  width: 44px;
  height: auto;
  opacity: 0.80;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: sepia(100%);
}

[data-page="linha-tempo"] .tl-scope .hero-icon:hover {
  filter: brightness(1.1);
  opacity: 1.0;
}

/* Row */
[data-page="linha-tempo"] .tl-scope .tl-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 36px;
      }

@keyframes tlFadeIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Date */
[data-page="linha-tempo"] .tl-scope .tl-date {
  width: 96px;
  flex-shrink: 0;
  padding-right: 12px;
  padding-top: 18px;
  text-align: right;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c8602a;
  line-height: 1.4;
}

/* Line */
[data-page="linha-tempo"] .tl-scope .tl-line {
  width: 2px;
  flex-shrink: 0;
  background: #c8602a;
  position: relative;
  align-self: stretch;
  opacity: 0.6;
}

[data-page="linha-tempo"] .tl-scope .tl-line::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  background: #c8602a;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(200,96,42,0.22);
  transition: transform 0.2s ease;
  z-index: 1;
  opacity: 1;
}

[data-page="linha-tempo"] .tl-scope .tl-item:hover .tl-date { color: #2e7db5; }
[data-page="linha-tempo"] .tl-scope .tl-item:hover .tl-line::before { transform: translateX(-50%) scale(1.45); }

/* Card */
[data-page="linha-tempo"] .tl-scope .tl-card-wrap {
  flex: 1;
  padding-left: 22px;
  min-width: 0;
}

[data-page="linha-tempo"] .tl-scope .tl-card {
  background: #f0f4f8;
  border-radius: 10px;
  padding: 18px 22px 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-page="linha-tempo"] .tl-scope .tl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.11);
}

[data-page="linha-tempo"] .tl-scope .tl-card::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -10px;
  border: 10px solid transparent;
  border-right-color: #f0f4f8;
  border-left: 0;
}

/* variantes de cor */
[data-page="linha-tempo"] .tl-scope .tl-card.dest-azul  { background: #eaf2f9; }
[data-page="linha-tempo"] .tl-scope .tl-card.dest-rosa  { background: #f6ded2; }
[data-page="linha-tempo"] .tl-scope .tl-card.dest-verde { background: #eaf5f2; }
[data-page="linha-tempo"] .tl-scope .tl-card.dest-bege  { background: #f7f3ec; }

[data-page="linha-tempo"] .tl-scope .tl-card.dest-azul::before  { border-right-color: #eaf2f9; }
[data-page="linha-tempo"] .tl-scope .tl-card.dest-rosa::before  { border-right-color: #f6ded2; }
[data-page="linha-tempo"] .tl-scope .tl-card.dest-verde::before { border-right-color: #eaf5f2; }
[data-page="linha-tempo"] .tl-scope .tl-card.dest-bege::before  { border-right-color: #f7f3ec; }

/* header do card */
[data-page="linha-tempo"] .tl-scope .tl-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

[data-page="linha-tempo"] .tl-scope .tl-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page="linha-tempo"] .tl-scope .tl-icon svg { width: 100%; height: 100%; }

[data-page="linha-tempo"] .tl-scope .tl-title {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.3;
}

[data-page="linha-tempo"] .tl-scope .tl-body {
  font-size: 0.84rem;
  line-height: 1.65;
  color: #555;
  font-weight: 300;
  flex: 1;
}

/* PDF links */
[data-page="linha-tempo"] .tl-scope .tl-pdf {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #dce3ea;
  text-decoration: none;
  color: #2e7db5;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.22s ease;
  min-width: 0;
}

[data-page="linha-tempo"] .tl-scope .tl-card .tl-pdf:first-of-type { border-top: 1px solid #dce3ea; }
[data-page="linha-tempo"] .tl-scope .tl-card .tl-pdf:not(:first-of-type) { border-top: none; }
[data-page="linha-tempo"] .tl-scope .tl-card .tl-pdf + .tl-pdf { margin-top: 5px; padding-top: 0; }

[data-page="linha-tempo"] .tl-scope .tl-pdf:hover { color: #c8602a; }
[data-page="linha-tempo"] .tl-scope .tl-pdf:hover .pdf-icon { background: #c8602a; transform: scale(1.08); }

[data-page="linha-tempo"] .tl-scope .pdf-icon {
  flex-shrink: 0;
  width: 28px;
  height: 34px;
  background: #2e7db5;
  border-radius: 4px 6px 4px 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s ease, transform 0.22s ease;
}

[data-page="linha-tempo"] .tl-scope .pdf-icon::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 7px 7px 0;
  border-color: transparent #f0f4f8 transparent transparent;
}

[data-page="linha-tempo"] .tl-scope .pdf-icon::after {
  content: 'PDF';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9);
  font-family: inherit;
}

[data-page="linha-tempo"] .tl-scope .pdf-icon svg { width: 12px; height: 12px; fill: #fff; margin-bottom: 5px; }

[data-page="linha-tempo"] .tl-scope .pdf-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

[data-page="linha-tempo"] .tl-scope .pdf-iconNew {
  width: 28px;
  height: 34px;
  background: none;
  border-radius: 4px 6px 4px 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s ease, transform 0.22s ease;
  flex-shrink: 0;
}

[data-page="linha-tempo"] .tl-scope .icone .hover { opacity: 0; }
[data-page="linha-tempo"] .tl-scope .tl-pdf:hover .normal { opacity: 0; }
[data-page="linha-tempo"] .tl-scope .tl-pdf:hover .hover  { opacity: 1; }

[data-page="linha-tempo"] .tl-scope use { transition: opacity 0.25s ease; }

[data-page="linha-tempo"] .tl-scope .tl-item:first-child .tl-line { margin-top: 21px; }
[data-page="linha-tempo"] .tl-scope .tl-item:last-child  .tl-line { height: 21px; }

[data-page="linha-tempo"] .tl-scope .destakar1 { font-weight: 500; color: #2E7DB5; }
[data-page="linha-tempo"] .tl-scope .destakar2 { font-weight: 500; color: #c8602a; }

/* ════════════════════════════════════════════════
   RESPONSIVO!! — tabs wrapper
════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════
   RESPONSIVO!! — timeline (interna)
════════════════════════════════════════════════ */
@media (max-width: 540px) {
  [data-page="linha-tempo"] .tl-scope .tl-item {
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }

  [data-page="linha-tempo"] .tl-scope .tl-date {
    width: auto;
    text-align: left;
    padding-right: 0;
    padding-top: 0;
  }

  [data-page="linha-tempo"] .tl-scope .tl-line { display: none; }

  [data-page="linha-tempo"] .tl-scope .tl-card-wrap { padding-left: 0; width: 100%; }
  [data-page="linha-tempo"] .tl-scope .tl-card::before { display: none; }
  [data-page="linha-tempo"] .tl-scope .tl-card {
    border-left: 3px solid #c8602a;
    border-radius: 0 10px 10px 0;
    width: 100%;
  }
  [data-page="linha-tempo"] .tl-scope .tl-pdf { width: 100%; }

  [data-page="linha-tempo"] .tl-scope .timeline-hero { padding-left: 0; }

  [data-page="linha-tempo"] .tl-scope .tl-header {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  [data-page="linha-tempo"] .tl-scope .tl-icon { flex: 0 0 auto; }
  [data-page="linha-tempo"] .tl-scope .tl-title { min-width: 0; }
  [data-page="linha-tempo"] .tl-scope .tl-icon svg { display: block; }
}

/* ── Regras complementares (pdf, destakar, dest-bege) ────────────────────── */
.tr-scope .pdf-icon { flex-shrink: 0; width: 18px; height: 18px; }

/* Alternar ícone PDF normal/hover */
.tr-scope .pdficone .hover { display: none; }

.tr-scope .file-item:hover .pdficone .normal { display: none; }

.tr-scope .file-item:hover .pdficone .hover  { display: inline; }

/* ── Dark Mode — Linha do Tempo ──────────────────────────────────────────── */
[data-bs-theme="dark"] .tl-scope .tl-date          { color: #f6a05a; }
[data-bs-theme="dark"] .tl-scope .tl-line          { background: #f6a05a; opacity: 0.5; }
[data-bs-theme="dark"] .tl-scope .tl-line::before  { background: #f6a05a; border-color: #1e2430; }
[data-bs-theme="dark"] .tl-scope .tl-card          { background: #1e2430; border-color: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .tl-scope .tl-card:hover    { border-color: rgba(246,160,90,0.4); }
[data-bs-theme="dark"] .tl-scope .tl-title         { color: #e2e8f0; }
[data-bs-theme="dark"] .tl-scope .tl-body          { color: #a0aec0; }
[data-bs-theme="dark"] .tl-scope .destakar1        { color: #f6a05a; }
[data-bs-theme="dark"] .tl-scope .destakar2        { color: #63b3ed; }
[data-bs-theme="dark"] .tl-scope .tl-pdf           { border-color: rgba(255,255,255,0.1); }
[data-bs-theme="dark"] .tl-scope .tl-pdf:hover     { border-color: rgba(246,160,90,0.4); background: rgba(246,160,90,0.06); }
[data-bs-theme="dark"] .tl-scope .pdf-filename     { color: #a0aec0; }
[data-bs-theme="dark"] .tl-scope .tl-pdf:hover .pdf-filename { color: #f6a05a; }
[data-bs-theme="dark"] .tl-scope .timeline-subtitle { color: #6c8096; }


/* ── Espaçamento mobile ────────────────────────────────────────────────────── */
@media (max-width: 576px) {


    /* ── Espaçamento mobile ──────────────────────────────────────────────── */
    [data-page="linha-tempo"] .card-body {
        padding: 0.5rem !important;
    }
}

/* ── Portáteis — reduz padding lateral (col-xl activo) ─────────────────────── */
@media (max-width: 1399px) {
    [data-page="linha-tempo"] .card-body {
        padding: 0.75rem !important;
    }
}