/* ============================================================
   BI Projeto Claro — Estilo Principal
   ============================================================ */

:root {
  --claro-red:    #E30613;
  --claro-dark:   #8B0000;
  --claro-light:  #fff5f5;
  --text-main:    #1a1a2e;
  --card-radius:  12px;
  --shadow-sm:    0 2px 8px rgba(0,0,0,.08);
  --shadow-md:    0 6px 24px rgba(0,0,0,.12);
}

/* ── Base ─────────────────────────────────────────────────── */
body { font-family: 'Segoe UI', Arial, sans-serif; color: var(--text-main); background: #f4f6fb; }

/* ── Navbar ───────────────────────────────────────────────── */
.bg-claro { background: linear-gradient(90deg, var(--claro-dark) 0%, var(--claro-red) 100%) !important; }
.navbar-brand { font-size: 1.1rem; letter-spacing: .3px; }

/* ── Hub Cards ────────────────────────────────────────────── */
.hub-card {
  border-radius: var(--card-radius);
  transition: transform .18s ease, box-shadow .18s ease;
  background: #fff;
}
.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
}
.hub-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--claro-red), #ff6b35);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.hub-icon i { color: #fff; font-size: 1.5rem; }

/* ── DRE Table ────────────────────────────────────────────── */
.dre-table { font-size: .85rem; }
.dre-table thead th {
  background: var(--claro-red); color: #fff;
  position: sticky; top: 0; z-index: 2;
  padding: 10px 8px; white-space: nowrap;
}
.dre-table tbody tr:hover { background: #fff5f5; }
.dre-table .row-grupo td {
  font-weight: 700; background: #f8f9fa;
  border-top: 2px solid #dee2e6;
}
.dre-table .row-resultado td {
  font-weight: 800; background: #fff3cd;
  border-top: 3px solid #ffc107;
  font-size: .9rem;
}
.dre-table .row-ebitda td {
  font-weight: 800; color: var(--claro-red);
  background: #fff5f5;
}
.dre-table .row-negativo td { color: #dc3545; }
.dre-table td, .dre-table th { padding: 7px 10px; }
.dre-table .col-label { min-width: 200px; }
.dre-table .col-valor  { text-align: right; min-width: 100px; }
.dre-table .col-pct    { text-align: right; min-width: 70px; color: #6c757d; font-size:.8rem; }
.dre-table .acumulado  { background:#e8f4f8 !important; font-weight:700; }

/* ── KPI Cards ────────────────────────────────────────────── */
.kpi-card {
  border-radius: var(--card-radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--claro-red);
}
.kpi-card .kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing:.5px; color:#6c757d; }
.kpi-card .kpi-value { font-size: 1.5rem; font-weight: 800; color: var(--text-main); }
.kpi-card .kpi-sub   { font-size: .8rem; color: #6c757d; }
.kpi-card.kpi-positive .kpi-value { color: #198754; }
.kpi-card.kpi-negative .kpi-value { color: #dc3545; }
.kpi-card.kpi-warning  .kpi-value { color: #fd7e14; }

/* ── Gráficos ─────────────────────────────────────────────── */
.chart-container { position: relative; background: #fff; border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm); padding: 1.25rem; }
.chart-title { font-size: .85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #6c757d; margin-bottom: .75rem; }

/* ── Análise / Comentários ────────────────────────────────── */
.analise-box {
  background: linear-gradient(135deg, #fff5f5, #fff);
  border-left: 4px solid var(--claro-red);
  border-radius: var(--card-radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.analise-box .analise-titulo { font-weight: 700; color: var(--claro-red); margin-bottom:.5rem; }
.diagnostico-item { border-left: 3px solid #ffc107; padding-left: .75rem; margin-bottom: .5rem; }
.sugestao-item    { border-left: 3px solid #198754; padding-left: .75rem; margin-bottom: .5rem; }

/* ── Filtro período ───────────────────────────────────────── */
.filtro-bar { background:#fff; border-radius:var(--card-radius);
  padding:.75rem 1.25rem; box-shadow:var(--shadow-sm); margin-bottom:1.5rem; }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb-claro { background: none; padding: 0; margin-bottom: 1rem; font-size: .85rem; }
.breadcrumb-claro .breadcrumb-item.active { color: var(--claro-red); font-weight: 600; }

/* ── Badges variação ─────────────────────────────────────── */
.badge-up   { background:#d1fae5; color:#065f46; font-weight:700; }
.badge-down { background:#fee2e2; color:#991b1b; font-weight:700; }
.badge-neu  { background:#f3f4f6; color:#6b7280; font-weight:700; }

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .no-print, nav, footer, .filtro-bar .btn, .btn-print { display: none !important; }
  body { background: #fff !important; font-size: 11pt; }
  .dre-table { font-size: 9pt; }
  .dre-table thead th { background: #E30613 !important; -webkit-print-color-adjust: exact; }
  .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
  .kpi-card { border: 1px solid #dee2e6 !important; }
  h2, h3 { color: #E30613 !important; }
  a { text-decoration: none !important; color: inherit !important; }
  .page-break { page-break-before: always; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .dre-table { font-size: .78rem; }
  .kpi-card .kpi-value { font-size: 1.2rem; }
}