.informes-shell {
  display: grid;
  gap: 18px;
}

.informes-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 25px 28px;
  border: 1px solid rgba(110, 206, 228, .28);
  border-radius: 18px;
  color: #eef8fb;
  background: radial-gradient(circle at 88% 0, rgba(55, 178, 211, .22), transparent 42%), linear-gradient(125deg, #0b2636, #101b2b 72%);
  box-shadow: 0 16px 42px rgba(4, 18, 30, .17);
}

.informes-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #81d6ed;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.informes-hero h2 { margin: 8px 0 5px; font-size: clamp(1.35rem, 2.5vw, 1.85rem); color: #fff; }
.informes-hero p { margin: 0; max-width: 720px; color: #c3d8e1; line-height: 1.55; }
.informes-refresh { flex: 0 0 auto; color: #fff; border-color: rgba(255,255,255,.35); }

.informes-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.informes-kpi-grid article {
  display: grid;
  gap: 5px;
  min-height: 117px;
  padding: 18px;
  border: 1px solid var(--panel-border, #d8e1e7);
  border-radius: 14px;
  background: var(--panel-bg, #fff);
}

.informes-kpi-grid span { color: var(--muted, #667085); font-size: .78rem; font-weight: 700; }
.informes-kpi-grid strong { color: var(--text, #142033); font-size: 1.7rem; line-height: 1; }
.informes-kpi-grid small { color: var(--muted, #667085); line-height: 1.25; }

.informes-panel {
  border: 1px solid var(--panel-border, #d8e1e7);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel-bg, #fff);
}

.informes-toolbar {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(240px, 1.25fr) 160px;
  align-items: end;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--panel-border, #d8e1e7);
}

.informes-toolbar h2 { margin: 0 0 3px; color: var(--text, #142033); font-size: 1.08rem; }
.informes-toolbar p { margin: 0; color: var(--muted, #667085); font-size: .84rem; }
.informes-status-filter { display: grid; gap: 6px; }
.informes-status-filter span { color: var(--muted, #667085); font-size: .76rem; font-weight: 700; }
.informes-status-filter select { min-height: 42px; }

.informes-table-shell { overflow: auto; }
.informes-table { width: 100%; min-width: 920px; border-collapse: collapse; }
.informes-table th {
  padding: 11px 16px;
  color: var(--muted, #667085);
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-align: left;
  text-transform: uppercase;
  background: rgba(127, 143, 163, .06);
}
.informes-table td { padding: 15px 16px; color: var(--text, #142033); border-top: 1px solid var(--panel-border, #e2e8ee); vertical-align: middle; }
.informes-table td strong, .informes-table td small { display: block; }
.informes-table td strong { font-size: .86rem; }
.informes-table td small { margin-top: 4px; color: var(--muted, #667085); font-size: .74rem; }
.informes-attention { color: #b26b00 !important; font-weight: 700; }

.informes-progress-value { font-size: .88rem; color: #123b50; white-space: nowrap; }
.informes-photo-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--text, #142033); }
.informes-photo-count i { color: #1594b7; font-size: 1.02rem; }
.informes-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: .73rem; font-weight: 800; white-space: nowrap; }
.informes-status.is-draft { color: #5f6874; background: #e9edf1; }
.informes-status.is-sent { color: #006a89; background: #d9f2f9; }
.informes-status.is-approved { color: #187144; background: #dff5e7; }
.informes-status.is-warning { color: #975d00; background: #fff0ce; }
.informes-pdf-button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.informes-empty { padding: 46px !important; color: var(--muted, #667085); text-align: center; }

body.dark-mode .informes-kpi-grid article,
body.dark-mode .informes-panel { background: #162130; border-color: #2c3c4f; }
body.dark-mode .informes-kpi-grid strong,
body.dark-mode .informes-toolbar h2,
body.dark-mode .informes-table td { color: #edf5fa; }
body.dark-mode .informes-table th { background: rgba(255,255,255,.035); }
body.dark-mode .informes-table td { border-color: #2c3c4f; }

@media (max-width: 980px) {
  .informes-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .informes-toolbar { grid-template-columns: 1fr 1fr; }
  .informes-toolbar > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .informes-hero { display: grid; padding: 21px; }
  .informes-refresh { justify-self: start; }
  .informes-kpi-grid, .informes-toolbar { grid-template-columns: 1fr; }
  .informes-toolbar > :first-child { grid-column: auto; }
}