/* =====================================================
   ESTATÍSTICAS
   ===================================================== */

.statistics-hero {
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 220px;

  padding: 34px 38px;

  border-radius: 24px;

  background:
    linear-gradient(
      120deg,
      #172554 0%,
      #1d4ed8 52%,
      #60a5fa 100%
    );

  color: #fff;

  box-shadow:
    0 18px 45px
    rgba(37, 99, 235, .16);
}


.statistics-hero::after {
  content: "";

  position: absolute;

  width: 320px;
  height: 320px;

  right: -100px;
  top: -150px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.09);
}


.statistics-hero-content {
  position: relative;
  z-index: 2;

  max-width: 620px;
}


.statistics-hero-badge {
  display: inline-flex;
  align-items: center;

  padding: 7px 11px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.13);

  border:
    1px solid
    rgba(255,255,255,.15);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .6px;
}


.statistics-hero h2 {
  margin: 15px 0 10px;

  max-width: 570px;

  font-size: 30px;
  line-height: 1.12;

  letter-spacing: -.7px;
}


.statistics-hero p {
  margin: 0;

  max-width: 550px;

  color:
    rgba(255,255,255,.78);

  font-size: 14px;
  line-height: 1.6;
}


/* HERO VISUAL */

.statistics-hero-visual {
  position: relative;
  z-index: 2;

  width: 250px;

  padding: 20px;

  border-radius: 20px;

  background:
    rgba(255,255,255,.12);

  border:
    1px solid
    rgba(255,255,255,.15);

  backdrop-filter: blur(10px);
}


.hero-stat span {
  display: block;

  color:
    rgba(255,255,255,.68);

  font-size: 11px;
}


.hero-stat strong {
  display: block;

  margin-top: 4px;

  font-size: 18px;
}


.hero-chart {
  height: 70px;

  margin-top: 20px;

  display: flex;
  align-items: flex-end;

  gap: 8px;
}


.hero-chart span {
  flex: 1;

  min-height: 10px;

  border-radius: 5px 5px 2px 2px;

  background:
    rgba(255,255,255,.65);

  transition:
    height .3s ease,
    transform .2s ease;
}


.statistics-hero:hover
.hero-chart span {
  transform: translateY(-3px);
}


/* =====================================================
   FILTRO
   ===================================================== */

.statistics-filter-card {
  margin-top: 18px;

  padding: 20px;

  background: #fff;

  border:
    1px solid var(--border);

  border-radius: 18px;
}


.filter-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;
}


.filter-field {
  width: 340px;
}


.filter-field label {
  display: block;

  margin-bottom: 7px;

  color: var(--text-secondary);

  font-size: 11px;
  font-weight: 700;
}


.filter-field select {
  width: 100%;

  padding: 12px 14px;

  outline: none;

  border:
    1px solid var(--border);

  border-radius: 12px;

  background: #fff;

  color: var(--text);

  font-family: inherit;
  font-size: 13px;

  cursor: pointer;
}


.filter-field select:focus {
  border-color: var(--primary);

  box-shadow:
    0 0 0 3px
    rgba(37,99,235,.08);
}


.statistics-update {
  color: var(--text-secondary);

  font-size: 12px;
}


.period-selector {
  display: flex;
  align-items: center;

  gap: 15px;

  margin-top: 18px;
  padding-top: 16px;

  border-top:
    1px solid var(--border);
}


.period-selector > span {
  color: var(--text-secondary);

  font-size: 11px;
  font-weight: 700;
}


.period-buttons {
  display: flex;
  gap: 7px;
}


.period-button {
  border: 0;

  padding: 8px 13px;

  border-radius: 999px;

  background: #f4f6f9;

  color: var(--text-secondary);

  font-family: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}


.period-button:hover {
  transform:
    translateY(-1px);

  background: #eaf1ff;

  color: var(--primary);
}


.period-button.active {
  background:
    var(--primary);

  color: #fff;
}


/* =====================================================
   SECTION
   ===================================================== */

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 30px 0 12px;
}


.section-heading h2 {
  margin: 0;

  color: var(--text);

  font-size: 18px;
}


.section-heading p {
  margin: 4px 0 0;

  color: var(--text-secondary);

  font-size: 12px;
}


/* =====================================================
   RESUMO
   ===================================================== */

.statistics-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}


.summary-stat-card {
  display: flex;
  align-items: center;

  min-width: 0;

  padding: 18px;

  border:
    1px solid var(--border);

  border-radius: 18px;

  background: #fff;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.summary-stat-card:hover {
  transform:
    translateY(-2px);

  border-color: #dce4ef;

  box-shadow:
    0 10px 28px
    rgba(15,23,42,.06);
}


.summary-icon {
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border-radius: 14px;

  font-size: 22px;
}


.summary-icon.green {
  background: #ecfdf3;
}


.summary-icon.orange {
  background: #fff7ed;
}


.summary-content {
  min-width: 0;

  flex: 1;

  margin-left: 14px;
}


.summary-content span {
  display: block;

  color: var(--text-secondary);

  font-size: 11px;
}


.summary-content strong {
  display: block;

  margin-top: 3px;

  color: var(--text);

  font-size: 18px;
}


.summary-content small {
  display: block;

  margin-top: 4px;

  color: #9ca3af;

  font-size: 10px;
}


.summary-value {
  margin-left: 15px;

  font-size: 19px;
  font-weight: 800;

  white-space: nowrap;
}


.green-text {
  color: #16a34a;
}


.orange-text {
  color: #ea580c;
}


/* =====================================================
   ANÁLISE
   ===================================================== */

.statistics-main-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(280px, .75fr);

  gap: 14px;

  margin-top: 14px;
}


.analysis-card {
  position: relative;

  padding: 24px;

  overflow: hidden;

  background: #fff;

  border:
    1px solid var(--border);

  border-radius: 18px;
}


.analysis-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background:
    linear-gradient(
      #2563eb,
      #60a5fa
    );
}


.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}


.card-eyebrow {
  color: var(--primary);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .8px;
}


.card-header h3 {
  margin: 5px 0 0;

  color: var(--text);

  font-size: 18px;
}


.analysis-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 12px;

  background:
    var(--primary-soft);
}


.analysis-text {
  margin: 20px 0 0;

  max-width: 850px;

  color: #3f4756;

  font-size: 14px;
  line-height: 1.7;

  white-space: normal;
}


.analysis-base {
  margin-top: 16px;

  color: var(--text-secondary);

  font-size: 11px;
}


/* =====================================================
   TENDÊNCIAS
   ===================================================== */

.trends-column {
  display: grid;

  grid-template-rows:
    repeat(2, 1fr);

  gap: 12px;
}


.trend-card {
  padding: 18px;

  border-radius: 18px;

  transition:
    transform .2s ease;
}


.trend-card:hover {
  transform:
    translateY(-2px);
}


.trend-card.rising {
  background: #ecfdf3;

  border:
    1px solid #d1fae5;
}


.trend-card.falling {
  background: #fef2f2;

  border:
    1px solid #fee2e2;
}


.trend-title {
  font-size: 12px;
  font-weight: 800;
}


.rising .trend-title {
  color: #15803d;
}


.falling .trend-title {
  color: #dc2626;
}


.trend-animals {
  margin-top: 11px;

  color: var(--text);

  font-size: 14px;
  font-weight: 700;

  line-height: 1.7;
}


/* =====================================================
   NÚMEROS
   ===================================================== */

.number-statistics-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 14px;
}


.number-card {
  padding: 20px;

  background: #fff;

  border:
    1px solid var(--border);

  border-radius: 18px;
}


.number-card-header {
  display: flex;
  align-items: center;

  gap: 12px;
}


.number-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: 13px;

  background:
    var(--primary-soft);

  color: var(--primary);

  font-size: 13px;
  font-weight: 900;
}


.number-card-icon.hundreds {
  background: #f5f3ff;

  color: #7c3aed;
}


.number-card-header h3 {
  margin: 0;

  font-size: 16px;
}


.number-card-header p {
  margin: 3px 0 0;

  color: var(--text-secondary);

  font-size: 10px;
}


.number-section {
  margin-top: 20px;
}


.number-label {
  display: block;

  color: var(--text-secondary);

  font-size: 11px;
  font-weight: 700;
}


.number-chips {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 10px;
}


.number-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 38px;

  padding: 8px 10px;

  border-radius: 10px;

  background: #ecfdf3;

  color: #15803d;

  font-size: 13px;
  font-weight: 800;

  cursor: default;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.number-chip:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 5px 15px
    rgba(15,23,42,.07);
}


.number-chips.delayed
.number-chip {
  background: #fff7ed;

  color: #c2410c;
}


.number-chip.loading {
  background: #f4f6f9;

  color: #9ca3af;
}


.number-divider {
  height: 1px;

  margin-top: 18px;

  background:
    var(--border);
}


.hundreds-value {
  margin-top: 9px;

  font-size: 18px;
  font-weight: 800;

  line-height: 1.7;
}


.hundreds-value.frequent {
  color: #15803d;
}


.hundreds-value.delayed {
  color: #c2410c;
}


/* =====================================================
   STATUS
   ===================================================== */

.statistics-status {
  min-height: 30px;

  padding: 18px 0 90px;

  color: var(--text-secondary);

  text-align: center;

  font-size: 12px;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1100px) {

  .statistics-hero-visual {
    width: 210px;
  }


  .statistics-main-grid {
    grid-template-columns: 1fr;
  }


  .trends-column {
    grid-template-columns:
      repeat(2, 1fr);

    grid-template-rows: auto;
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 650px) {

  .statistics-hero {
    min-height: auto;

    padding: 25px 21px;

    border-radius: 20px;
  }


  .statistics-hero h2 {
    font-size: 24px;
  }


  .statistics-hero-visual {
    display: none;
  }


  .statistics-filter-card {
    padding: 16px;
  }


  .filter-main {
    display: block;
  }


  .filter-field {
    width: 100%;
  }


  .statistics-update {
    margin-top: 13px;
  }


  .period-selector {
    display: block;
  }


  .period-buttons {
    margin-top: 9px;

    overflow-x: auto;

    padding-bottom: 3px;
  }


  .period-button {
    flex-shrink: 0;
  }


  .statistics-summary-grid {
    grid-template-columns: 1fr;
  }


  .statistics-main-grid {
    grid-template-columns: 1fr;
  }


  .trends-column {
    grid-template-columns: 1fr;
  }


  .number-statistics-grid {
    grid-template-columns: 1fr;
  }


  .summary-stat-card {
    padding: 15px;
  }


  .summary-icon {
    width: 43px;
    height: 43px;
  }


  .analysis-card {
    padding: 20px;
  }

}