/* =====================================================
   CNEC Bolsas - Relatórios Visual V1
   Escopo exclusivo da tela de Relatórios
   ===================================================== */

body:has(main.dashboard .relatorios-grid) main.dashboard{
  --rel-blue:#0b66e8;
  --rel-blue-dark:#084ca8;
  --rel-green:#2dbd63;
  --rel-orange:#ff8b00;
  --rel-red:#ff4d67;
  --rel-border:#e1e8f2;
  --rel-shadow:0 10px 28px rgba(18,52,92,.07);
  --rel-shadow-hover:0 16px 34px rgba(18,52,92,.12);
  --rel-ease:cubic-bezier(.2,.8,.2,1);
}

/* =================================
   CABEÇALHO
   ================================= */

body:has(main.dashboard .relatorios-grid) main.dashboard .welcome-card{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      112deg,
      #ffffff 0%,
      #fbfdff 58%,
      #eef6ff 100%
    );

  border:1px solid rgba(11,94,215,.09);
  box-shadow:0 10px 28px rgba(16,50,92,.065);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .welcome-card::before{
  content:"";
  position:absolute;
  width:340px;
  height:220px;
  right:-80px;
  top:-110px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(11,102,232,.12),
      transparent 70%
    );

  pointer-events:none;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .welcome-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:7%;
  top:-125px;

  border:3px solid rgba(245,196,0,.72);
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;

  transform:rotate(22deg);
  pointer-events:none;
}

/* =================================
   KPIs
   ================================= */

body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-grid{
  gap:16px;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-card{
  position:relative;
  overflow:hidden;

  border:1px solid rgba(20,55,100,.075);
  box-shadow:var(--rel-shadow);

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #ffffff 78%,
      #f7faff 100%
    );

  transition:
    transform .22s var(--rel-ease),
    box-shadow .22s var(--rel-ease),
    border-color .22s var(--rel-ease);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-card::before{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:3px;

  border-radius:0 0 7px 7px;
  background:#dce9fa;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-card:nth-child(1)::before{
  background:var(--rel-blue);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-card:nth-child(2)::before{
  background:var(--rel-green);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-card:nth-child(3)::before{
  background:var(--rel-orange);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-card:nth-child(4)::before{
  background:var(--rel-red);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-card:hover{
  transform:translateY(-4px);
  border-color:rgba(11,94,215,.13);
  box-shadow:var(--rel-shadow-hover);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-card strong{
  font-weight:800;
  letter-spacing:-.6px;
}

/* =================================
   PAINEL PRINCIPAL
   ================================= */

body:has(main.dashboard .relatorios-grid) main.dashboard .panel{
  border:1px solid rgba(20,55,100,.075);
  box-shadow:0 10px 28px rgba(18,52,92,.055);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .panel-header h3{
  color:#10284c;
  letter-spacing:-.3px;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .panel-header p{
  color:#718096;
}

/* =================================
   BUSCA + PERÍODO
   ================================= */

body:has(main.dashboard .relatorios-grid) main.dashboard .documentos-filtros{
  padding:14px;

  border:1px solid #e3eaf3;
  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #ffffff
    );

  box-shadow:0 5px 16px rgba(18,52,92,.035);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .filtro-busca input,
body:has(main.dashboard .relatorios-grid) main.dashboard .filtro-select select{
  min-height:46px;

  border:1px solid #dbe4f0;
  border-radius:12px;

  background:#fff;

  transition:
    border-color .18s var(--rel-ease),
    box-shadow .18s var(--rel-ease),
    background-color .18s var(--rel-ease);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .filtro-busca input:focus,
body:has(main.dashboard .relatorios-grid) main.dashboard .filtro-select select:focus{
  outline:none;
  border-color:#9dc2f2;
  box-shadow:0 0 0 4px rgba(11,102,232,.09);
}

/* =================================
   CARDS DE RELATÓRIO
   ================================= */

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorios-grid{
  gap:16px;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card{
  position:relative;
  overflow:hidden;

  min-height:248px;

  border:1px solid #dfe7f1;
  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #ffffff 75%,
      #f8fbff 100%
    );

  box-shadow:0 8px 22px rgba(18,52,92,.05);

  transition:
    transform .22s var(--rel-ease),
    border-color .22s var(--rel-ease),
    box-shadow .22s var(--rel-ease);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;

  background:
    linear-gradient(
      90deg,
      #0b66e8,
      #5aa1f1
    );

  opacity:.8;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card::after{
  content:"";
  position:absolute;

  width:120px;
  height:120px;

  right:-52px;
  bottom:-60px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(11,102,232,.075),
      transparent 70%
    );

  pointer-events:none;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card:hover{
  transform:translateY(-5px);
  border-color:#cadaef;
  box-shadow:0 15px 32px rgba(18,52,92,.10);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:#edf5ff;
  color:var(--rel-blue);

  box-shadow:
    inset 0 0 0 1px rgba(11,102,232,.06),
    0 5px 14px rgba(11,102,232,.08);

  transition:transform .2s var(--rel-ease);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card:hover .relatorio-icon{
  transform:scale(1.07);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-content h3{
  color:#10284c;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.2px;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-content p{
  color:#697a92;
  line-height:1.5;
}

/* Etiqueta Excel / PDF */
body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-formatos{
  display:inline-flex;
  align-items:center;

  padding:5px 9px;

  border-radius:999px;

  background:#f0f4f9;
  color:#40536d;

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

/* =================================
   BOTÕES EXCEL / PDF
   ================================= */

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card .btn-secondary,
body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card .btn-primary{
  min-height:40px;
  padding:9px 15px;

  border-radius:10px;

  font-weight:700;

  transition:
    transform .18s var(--rel-ease),
    box-shadow .18s var(--rel-ease),
    background-color .18s var(--rel-ease);
}

/* Excel */
body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card .btn-secondary{
  border:1px solid #d7e0ea;

  background:#f4f7fa;
  color:#24364c;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card .btn-secondary:hover{
  transform:translateY(-2px);

  background:#edf2f7;
  border-color:#c9d4e1;

  box-shadow:0 7px 15px rgba(25,48,78,.08);
}

/* PDF */
body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card .btn-primary{
  border:0;

  background:
    linear-gradient(
      135deg,
      #0b66e8,
      #0752bd
    );

  color:#fff;

  box-shadow:0 7px 16px rgba(11,94,215,.16);
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(11,94,215,.23);
}

/* =================================
   ANIMAÇÃO DE ENTRADA
   ================================= */

body:has(main.dashboard .relatorios-grid) main.dashboard .welcome-card,
body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-grid,
body:has(main.dashboard .relatorios-grid) main.dashboard .panel{
  animation:cnecRelatoriosEnter .4s ease both;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-grid{
  animation-delay:.04s;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .panel{
  animation-delay:.08s;
}

@keyframes cnecRelatoriosEnter{
  from{
    opacity:0;
    transform:translateY(9px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

/* =================================
   RESPONSIVIDADE
   ================================= */

@media(max-width:1100px){
  body:has(main.dashboard .relatorios-grid) main.dashboard .relatorios-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  body:has(main.dashboard .relatorios-grid) main.dashboard .kpi-grid,
  body:has(main.dashboard .relatorios-grid) main.dashboard .relatorios-grid{
    grid-template-columns:1fr;
  }

  body:has(main.dashboard .relatorios-grid) main.dashboard .documentos-filtros{
    flex-direction:column;
  }
}

@media(prefers-reduced-motion:reduce){
  body:has(main.dashboard .relatorios-grid) main.dashboard *,
  body:has(main.dashboard .relatorios-grid) main.dashboard *::before,
  body:has(main.dashboard .relatorios-grid) main.dashboard *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ==========================================
   RELATÓRIOS - SOMENTE FILTRO DE PERÍODO
   ========================================== */

body:has(main.dashboard .relatorios-grid) main.dashboard .filtro-busca{
  display:none !important;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .documentos-filtros{
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  gap:14px;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .filtro-select{
  width:220px;
  margin-left:auto;
}

/* ==========================================
   HOVER PREMIUM AZUL + AMARELO
   ========================================== */

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card{
  isolation:isolate;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card::after{
  content:"";
  position:absolute;
  inset:0;

  width:auto;
  height:auto;

  border-radius:inherit;

  background:
    linear-gradient(
      135deg,
      rgba(11,102,232,.15) 0%,
      rgba(255,255,255,.92) 52%,
      rgba(245,196,0,.20) 100%
    );

  opacity:0;
  transition:opacity .24s var(--rel-ease);

  pointer-events:none;
  z-index:0;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card:hover::after{
  opacity:1;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card > *{
  position:relative;
  z-index:1;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card::before{
  z-index:2;
}

body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card:hover{
  transform:translateY(-6px);
  border-color:rgba(11,102,232,.24);

  box-shadow:
    0 18px 38px rgba(18,52,92,.14),
    0 0 0 1px rgba(245,196,0,.07);
}

/* Ícone acompanha o hover */
body:has(main.dashboard .relatorios-grid) main.dashboard .relatorio-card:hover .relatorio-icon{
  transform:scale(1.08) translateY(-1px);

  background:
    linear-gradient(
      135deg,
      #e9f3ff,
      #fff8dc
    );
}

/* Responsividade do filtro */
@media(max-width:760px){
  body:has(main.dashboard .relatorios-grid) main.dashboard .documentos-filtros{
    align-items:stretch;
  }

  body:has(main.dashboard .relatorios-grid) main.dashboard .filtro-select{
    width:100%;
    margin-left:0;
  }
}