/* ============================================================
   custo.css
   ABA 05 — CUSTO PÓS-VENDAS
   Layout executivo premium
   Compatível com o novo HTML do #panel-5
   ============================================================ */

#panel-5 {
  --custo-bg: #edf3fa;
  --custo-ink: #031636;
  --custo-text: #1b2a41;
  --custo-muted: #697c94;
  --custo-faint: #9aaec4;
  --custo-line: #d9e6f4;
  --custo-soft-line: #eaf1f8;

  --custo-navy: #06162f;
  --custo-navy-2: #0b2246;

  --custo-green: #0d7a4e;
  --custo-green-2: #20c878;

  --custo-orange: #c2410c;
  --custo-orange-2: #f97316;

  --custo-red: #e11d48;
  --custo-red-2: #fb7185;

  --custo-blue: #2563eb;
  --custo-blue-2: #60a5fa;

  --custo-purple: #7c3aed;
  --custo-card: #ffffff;

  --custo-shadow: 0 28px 80px rgba(18, 38, 72, .12),
                  0 8px 20px rgba(18, 38, 72, .06);

  --custo-shadow-soft: 0 12px 34px rgba(18, 38, 72, .075);

  position: relative;
  color: var(--custo-text);
}

#panel-5 * {
  box-sizing: border-box;
}

/* ============================================================
   HERO EXECUTIVO
   ============================================================ */

#panel-5 .custo-hero {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 28px;
  border-radius: 34px;
  color: #ffffff;
  margin-bottom: 16px;
  background:
    radial-gradient(circle at 78% 10%, rgba(96, 165, 250, .22), transparent 32%),
    radial-gradient(circle at 98% 0%, rgba(249, 115, 22, .22), transparent 28%),
    linear-gradient(135deg, #06162f 0%, #0b2246 54%, #0d2b42 100%);
  box-shadow: 0 34px 100px rgba(3, 22, 54, .28);
  border: 1px solid rgba(255, 255, 255, .12);
}

#panel-5 .custo-hero::before {
  content: "";
  position: absolute;
  width: 540px;
  height: 540px;
  right: -210px;
  top: -310px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .05);
  pointer-events: none;
}

#panel-5 .custo-hero::after {
  content: "";
  position: absolute;
  inset: auto 28px 0 28px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .32),
    transparent
  );
  pointer-events: none;
}

#panel-5 .custo-hero-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

#panel-5 .custo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .14);
  border: 1px solid rgba(34, 197, 94, .22);
  color: #b8ffd9;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#panel-5 .custo-eyebrow span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 18px rgba(34, 197, 94, .9);
  flex-shrink: 0;
}

#panel-5 .custo-hero-title {
  margin-top: 13px;
  max-width: 780px;
  font-size: clamp(38px, 4vw, 62px);
  line-height: .94;
  font-weight: 950;
  letter-spacing: -3px;
  color: #ffffff;
}

#panel-5 .custo-hero-sub {
  margin-top: 13px;
  color: rgba(226, 237, 255, .72);
  font-size: 15px;
  font-weight: 650;
}

#panel-5 .custo-hero-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#panel-5 .custo-hero-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #f8fbff;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(12px);
  white-space: nowrap;
}

#panel-5 .custo-hero-pill.success {
  color: #b8ffd9;
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .23);
}

#panel-5 .custo-hero-pill.danger {
  color: #fecdd3;
  background: rgba(225, 29, 72, .14);
  border-color: rgba(225, 29, 72, .26);
}

/* ============================================================
   KPIS DENTRO DO HERO
   ============================================================ */

#panel-5 .custo-hero-metrics {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr .9fr;
  gap: 14px;
  margin-top: 28px;
}

#panel-5 .custo-hero-metric {
  position: relative;
  overflow: hidden;
  padding: 18px;
  min-height: 118px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(15px);
}

#panel-5 .custo-hero-metric::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -36px;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, #93c5fd) 30%, transparent);
  pointer-events: none;
}

#panel-5 .custo-hero-metric small {
  position: relative;
  z-index: 2;
  display: block;
  color: rgba(226, 237, 255, .62);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

#panel-5 .custo-hero-metric strong {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 12px;
  font-size: clamp(26px, 2.4vw, 39px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -1.6px;
  color: var(--c, #93c5fd);
}

#panel-5 .custo-hero-metric .custo-hero-small {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.05;
  letter-spacing: -1px;
}

#panel-5 .custo-hero-metric span {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 10px;
  color: rgba(226, 237, 255, .68);
  font-size: 12px;
  font-weight: 700;
}

#panel-5 .custo-good {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin-top: 12px;
  padding: 0 10px;
  border-radius: 999px;
  color: #b8ffd9;
  background: rgba(34, 197, 94, .12);
  border: 1px solid rgba(34, 197, 94, .22);
  font-size: 11px;
  font-weight: 900;
}

#panel-5 .custo-good.danger {
  color: #fecdd3;
  background: rgba(225, 29, 72, .14);
  border-color: rgba(225, 29, 72, .25);
}

/* ============================================================
   GRID PRINCIPAL
   ============================================================ */

#panel-5 .custo-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(420px, .72fr);
  gap: 16px;
  align-items: stretch;
}

#panel-5 .custo-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(205, 218, 238, .96);
  box-shadow: var(--custo-shadow);
}

#panel-5 .custo-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--accent, #2563eb),
    transparent 82%
  );
}

#panel-5 .custo-card::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -125px;
  top: -135px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  pointer-events: none;
}

#panel-5 .custo-card-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 12px;
}

#panel-5 .custo-card-title {
  color: var(--custo-ink);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.55px;
}

#panel-5 .custo-card-sub {
  margin-top: 6px;
  color: #899bb2;
  font-size: 12.5px;
  font-weight: 650;
}

#panel-5 .custo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  color: var(--custo-green);
  background: #e9fbf2;
  border: 1px solid #cceedd;
  white-space: nowrap;
}

#panel-5 .custo-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

/* ============================================================
   CARD DO GRÁFICO
   ============================================================ */

#panel-5 .custo-chart-card {
  min-height: 620px;
}

#panel-5 .custo-chart-area-premium {
  position: relative;
  z-index: 2;
  padding: 12px 26px 26px;
  min-height: 500px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
}

#panel-5 .custo-chart-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#panel-5 .custo-chart-tab {
  padding: 14px 15px;
  border-radius: 18px;
  background: #f8fbff;
  border: 1px solid #e5edf7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

#panel-5 .custo-chart-tab small {
  display: block;
  color: #72859d;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .9px;
  text-transform: uppercase;
}

#panel-5 .custo-chart-tab strong {
  display: block;
  margin-top: 6px;
  color: var(--custo-ink);
  font-family: 'DM Mono', monospace;
  font-size: 16px;
  font-weight: 950;
}

#panel-5 .custo-chart-tab.green strong {
  color: var(--custo-green);
}

#panel-5 .custo-chart-tab.red strong {
  color: var(--custo-red);
}

#panel-5 .custo-chart-tab.blue strong {
  color: var(--custo-blue);
}

#panel-5 .custo-chart-canvas {
  position: relative;
  min-height: 410px;
  padding: 18px;
  border-radius: 24px;
  background:
    repeating-linear-gradient(
      to top,
      transparent 0 55px,
      rgba(217, 229, 243, .72) 56px 57px
    ),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid #edf2f7;
  box-shadow: inset 0 1px 0 #ffffff;
}

#panel-5 .custo-chart-canvas::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 58px;
  border-top: 1px dashed rgba(37, 99, 235, .30);
  pointer-events: none;
}

#panel-5 #chart-5-comparativo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 390px;
  min-height: 390px;
}

/* Remove marca visual antiga, se algum CSS global tentar inserir */
#panel-5 .custo-chart-canvas canvas,
#panel-5 #chart-5-comparativo canvas {
  max-width: 100%;
}

/* ============================================================
   PAINEL LATERAL — LEITURA GERENCIAL
   ============================================================ */

#panel-5 .custo-side-card {
  min-height: 620px;
}

#panel-5 .custo-executive-panel {
  position: relative;
  z-index: 2;
  padding: 0 24px 24px;
  display: grid;
  gap: 14px;
}

#panel-5 .custo-focus-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 255, 255, .22), transparent 38%),
    linear-gradient(145deg, #c2410c, #8f2d08);
  box-shadow: 0 22px 48px rgba(194, 65, 12, .22);
}

#panel-5 .custo-focus-card small {
  display: block;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

#panel-5 .custo-focus-card strong {
  display: block;
  margin-top: 8px;
  font-size: 42px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -1.6px;
}

#panel-5 .custo-focus-card span {
  display: block;
  margin-top: 9px;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 750;
}

#panel-5 .custo-meter {
  margin-top: 18px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}

#panel-5 .custo-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, #fed7aa);
  transition: width .35s ease;
}

#panel-5 .custo-side-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#panel-5 .custo-side-mini {
  padding: 15px;
  border: 1px solid #e5edf7;
  border-radius: 21px;
  background: #f8fbff;
  box-shadow: inset 0 1px 0 #ffffff;
}

#panel-5 .custo-side-mini small {
  display: block;
  color: #75879c;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .9px;
  text-transform: uppercase;
}

#panel-5 .custo-side-mini strong {
  display: block;
  margin-top: 6px;
  color: var(--custo-ink);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.7px;
}

/* ============================================================
   TOP CENTROS
   ============================================================ */

#panel-5 .custo-top-centers {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid #e5edf7;
  background: #ffffff;
}

#panel-5 .custo-top-centers-head {
  display: flex;
  justify-content: space-between;
  color: #7789a0;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin-bottom: 12px;
}

#panel-5 #custo-top-centers-list {
  display: grid;
  gap: 12px;
}

#panel-5 .custo-empty-mini {
  padding: 14px;
  border-radius: 16px;
  color: #8a97a8;
  background: #f8fbff;
  border: 1px dashed #d9e6f4;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

#panel-5 .custo-center-row {
  display: grid;
  grid-template-columns: 30px 1fr 68px;
  gap: 10px;
  align-items: center;
}

#panel-5 .custo-rank,
#panel-5 .rank {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #7c2d12;
  background: #ffedd5;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 950;
}

#panel-5 .custo-center-name,
#panel-5 .center-name {
  color: #2b3a4d;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-5 .custo-center-pct,
#panel-5 .center-pct {
  color: #10203f;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

#panel-5 .custo-center-track,
#panel-5 .center-track {
  grid-column: 2 / 4;
  height: 8px;
  border-radius: 999px;
  background: #e9eff7;
  overflow: hidden;
  margin-top: -6px;
}

#panel-5 .custo-center-track span,
#panel-5 .center-track span {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #c2410c, #f97316);
  transition: width .35s ease;
}

/* ============================================================
   INSIGHTS
   ============================================================ */

#panel-5 .custo-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

#panel-5 .custo-insight {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 25px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(205, 218, 238, .96);
  box-shadow: var(--custo-shadow-soft);
}

#panel-5 .custo-insight-icon {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--c, #2563eb);
  background: color-mix(in srgb, var(--c, #2563eb) 12%, #ffffff);
  font-size: 20px;
  font-weight: 950;
}

#panel-5 .custo-insight-title {
  color: var(--custo-ink);
  font-size: 14px;
  font-weight: 950;
}

#panel-5 .custo-insight-text {
  margin-top: 4px;
  color: #6f8198;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

/* ============================================================
   TABELA
   ============================================================ */

#panel-5 .custo-table-card {
  margin-top: 16px;
}

#panel-5 .custo-table-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 20px 24px 14px;
  border-bottom: 1px solid #e8eef6;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f7ff 100%);
}

#panel-5 .custo-table-title-wrap {
  min-width: 0;
}

#panel-5 .custo-table-title {
  margin: 0;
  color: var(--custo-ink);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.55px;
}

#panel-5 .custo-table-subtitle {
  margin: 6px 0 0;
  color: #899bb2;
  font-size: 12.5px;
  font-weight: 650;
}

#panel-5 .custo-table-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#panel-5 .custo-search {
  width: 330px;
  height: 42px;
  border: 1px solid #d9e3ef;
  border-radius: 14px;
  padding: 0 14px;
  color: #334155;
  outline: none;
  font-size: 13px;
  background: #ffffff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

#panel-5 .custo-search::placeholder {
  color: #94a3b8;
}

#panel-5 .custo-search:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

#panel-5 .custo-count {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #64748b;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

#panel-5 .custo-table-scroll {
  position: relative;
  z-index: 2;
  overflow: auto;
  max-height: 560px;
  background: #ffffff;
}

#panel-5 .custo-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
}

#panel-5 .custo-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  color: #8fa1b5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  padding: 15px 18px;
  border-bottom: 1px solid #e6edf5;
  background: #f4f8fc;
}

#panel-5 .custo-table tbody td {
  padding: 15px 18px;
  border-bottom: 1px solid #edf2f7;
  font-size: 13px;
  color: #334155;
  background: #ffffff;
  vertical-align: middle;
  transition: background .18s ease;
}

#panel-5 .custo-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

#panel-5 .custo-table tbody tr:hover td {
  background: #f3f8ff;
}

#panel-5 .custo-table tbody td:first-child {
  font-weight: 850;
  color: #0f172a;
}

#panel-5 .custo-table tbody td:nth-child(2),
#panel-5 .custo-table tbody td:nth-child(3),
#panel-5 .custo-table tbody td:nth-child(4),
#panel-5 .custo-table tbody td:nth-child(5),
#panel-5 .custo-table tbody td:nth-child(6),
#panel-5 .custo-table tbody td:nth-child(7) {
  white-space: nowrap;
}

#panel-5 .custo-table tbody td:nth-child(2),
#panel-5 .custo-table tbody td:nth-child(3),
#panel-5 .custo-table tbody td:nth-child(4),
#panel-5 .custo-table tbody td:nth-child(5),
#panel-5 .custo-table tbody td:nth-child(6),
#panel-5 .custo-table tbody td:nth-child(7) {
  font-family: 'DM Mono', monospace;
}

#panel-5 .custo-table tbody td:nth-child(6) {
  color: var(--custo-orange);
  font-weight: 950;
}

#panel-5 .custo-table tbody td:nth-child(7) {
  color: #8a97a8;
  font-weight: 800;
}

#panel-5 .custo-table-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f7fafc 100%);
  border-top: 1px solid #e8eef6;
  font-size: 12px;
  color: #7c8aa0;
}

#panel-5 .custo-table-footer code {
  font-size: 11px;
  background: #eef4fb;
  color: #475569;
  padding: 4px 8px;
  border-radius: 8px;
}

#panel-5 .custo-footer-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #cbd5e1;
}

/* ============================================================
   STATUS / BADGES DA TABELA
   ============================================================ */

#panel-5 .bdg,
#panel-5 .custo-status,
#panel-5 .status-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}

#panel-5 .bdg::before,
#panel-5 .custo-status::before,
#panel-5 .status-ok::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

#panel-5 .bdg-g,
#panel-5 .status-ok,
#panel-5 .custo-status.ok {
  background: #e9fbf2;
  color: var(--custo-green);
  border-color: #cceedd;
}

#panel-5 .bdg-r,
#panel-5 .custo-status.warn {
  background: #fff0f0;
  color: #dc2626;
  border-color: #ffd4d4;
}

#panel-5 .bdg-y,
#panel-5 .custo-status.neutral {
  background: #fff7e6;
  color: #c2410c;
  border-color: #fed7aa;
}

/* ============================================================
   ESTADOS
   ============================================================ */

#panel-5 .custo-loading,
#panel-5 .custo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px;
  border-radius: 20px;
  color: #8a97a8;
  background: #f8fbff;
  border: 1px dashed #d9e6f4;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

#panel-5 .custo-table .custo-empty-row td {
  text-align: center;
  color: #8a97a8;
  padding: 22px;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1280px) {
  #panel-5 .custo-hero-metrics,
  #panel-5 .custo-main-grid,
  #panel-5 .custo-insights {
    grid-template-columns: 1fr 1fr;
  }

  #panel-5 .custo-side-card,
  #panel-5 .custo-chart-card {
    min-height: auto;
  }
}

@media (max-width: 900px) {
  #panel-5 .custo-hero {
    padding: 22px;
    border-radius: 28px;
  }

  #panel-5 .custo-hero-top,
  #panel-5 .custo-card-head,
  #panel-5 .custo-table-head {
    flex-direction: column;
    align-items: flex-start;
  }

  #panel-5 .custo-hero-actions,
  #panel-5 .custo-table-actions {
    justify-content: flex-start;
    width: 100%;
  }

  #panel-5 .custo-hero-metrics,
  #panel-5 .custo-main-grid,
  #panel-5 .custo-insights,
  #panel-5 .custo-side-kpis {
    grid-template-columns: 1fr;
  }

  #panel-5 .custo-chart-tabs {
    grid-template-columns: 1fr;
  }

  #panel-5 .custo-search {
    width: 100%;
  }

  #panel-5 .custo-chart-area-premium {
    padding: 12px 16px 18px;
  }

  #panel-5 .custo-chart-canvas {
    min-height: 350px;
    padding: 12px;
  }

  #panel-5 #chart-5-comparativo {
    height: 330px;
    min-height: 330px;
  }
}

@media (max-width: 600px) {
  #panel-5 .custo-hero-title {
    font-size: 36px;
    letter-spacing: -2px;
  }

  #panel-5 .custo-hero-metric strong {
    font-size: 28px;
  }

  #panel-5 .custo-card {
    border-radius: 24px;
  }

  #panel-5 .custo-card-head {
    padding: 20px 18px 10px;
  }

  #panel-5 .custo-executive-panel {
    padding: 0 18px 18px;
  }

  #panel-5 .custo-insight {
    padding: 16px;
  }

  #panel-5 .custo-table-head {
    padding: 18px;
  }

  #panel-5 .custo-table-footer {
    padding: 12px 16px;
  }
}