:root {
  color-scheme: light;
  --bg: #f2f5f3;
  --ink: #17201e;
  --muted: #65706c;
  --line: #d9e0dc;
  --surface: #ffffff;
  --surface-soft: #f7faf8;
  --topbar-bg: rgba(255, 255, 255, 0.94);
  --tabs-bg: #edf4f0;
  --table-head: #edf4f0;
  --field-bg: #ffffff;
  --wash: #f3f5f2;
  --accent: #167a5a;
  --accent-2: #0f6c67;
  --accent-3: #2d9c75;
  --danger: #b84637;
  --blue: #244f91;
  --nav: #0d211f;
  --bar-track: #dfe8e3;
  --shadow-color: rgba(22, 55, 43, 0.09);
  --shadow: 0 16px 42px var(--shadow-color);
  --shadow-soft: 0 8px 22px var(--shadow-color);
  --font-main: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

:root.dark {
  color-scheme: dark;
  --bg: #071214;
  --ink: #ecfff8;
  --muted: #93b9c0;
  --line: #1b3d43;
  --surface: #0b1a1f;
  --surface-soft: #10272d;
  --topbar-bg: #08171b;
  --tabs-bg: #0f252b;
  --table-head: #12323a;
  --field-bg: #071a1f;
  --wash: #071214;
  --accent: #38bdf8;
  --accent-2: #22f3a7;
  --accent-3: #2dd4bf;
  --danger: #fb7185;
  --blue: #38bdf8;
  --nav: #061013;
  --bar-track: #183840;
  --shadow-color: rgba(0, 245, 212, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(180deg, #e9eee9 0, var(--wash) 260px),
    var(--wash);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button,
input,
select {
  font: inherit;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 34px clamp(18px, 4vw, 54px) 24px;
  background:
    linear-gradient(120deg, rgba(15, 111, 97, 0.2), transparent 45%),
    var(--nav);
  color: white;
}

.topbar h1 {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 780;
  line-height: 1;
}

.topbar-subtitle {
  max-width: 680px;
  margin-top: 12px;
  color: #c2d4d0;
  font-size: 15px;
  line-height: 1.45;
}

.source {
  display: grid;
  gap: 4px;
  min-width: 250px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #bdd0ca;
  text-align: right;
  font-size: 12px;
}

.source strong {
  color: white;
  font-size: 13px;
}

.eyebrow {
  margin-bottom: 7px;
  color: #5ea99e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.page-shell {
  width: min(1540px, calc(100% - 40px));
  margin: 18px auto 48px;
}

.module-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

.module-tab {
  width: auto;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  white-space: nowrap;
}

.module-tab.active,
.module-tab:hover {
  background: var(--nav);
  color: white;
}

.filters {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(2, minmax(145px, 0.8fr)) minmax(240px, 1.5fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

select,
input,
button {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfb;
  color: var(--ink);
}

select,
input {
  padding: 0 12px;
}

button {
  padding: 0 18px;
  background: var(--nav);
  color: white;
  border-color: var(--nav);
  cursor: pointer;
  font-weight: 800;
}

.module-section {
  display: none;
  margin-top: 16px;
}

.module-section.active {
  display: block;
}

.module-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 2px 10px;
}

.module-title h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
}

.module-title span {
  max-width: 430px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  text-align: right;
}

.evidence-console,
.panel,
.case-card,
.viewer-card,
.kpis article,
.summary-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.evidence-console {
  padding: 18px;
}

.evidence-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.case-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px;
}

.case-actions button {
  min-width: 128px;
}

.evidence-focus {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.68fr);
  gap: 16px;
  align-items: stretch;
}

.viewer-card {
  min-width: 0;
  padding: 12px;
}

.viewer-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf8;
}

.viewer-toolbar span {
  margin-right: auto;
  color: #4f5f5a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.viewer-toolbar button,
.viewer-toolbar strong {
  width: auto;
  min-width: 44px;
  min-height: 38px;
}

.viewer-toolbar button {
  padding: 0 14px;
  border-color: #cbd5d1;
  background: white;
  color: var(--ink);
}

.viewer-toolbar strong {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.image-stage {
  display: grid;
  place-items: center;
  height: clamp(420px, 62vh, 780px);
  overflow: auto;
  border: 1px solid #cbd5d1;
  border-radius: 8px;
  background: #eef2ef;
}

.image-stage.is-empty {
  overflow: hidden;
}

.image-stage:fullscreen {
  padding: 20px;
  background: #111917;
}

.image-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 160ms ease;
  box-shadow: 0 18px 46px rgba(25, 33, 31, 0.18);
}

.image-stage img[hidden],
.image-empty-state[hidden] {
  display: none;
}

.image-empty-state {
  display: grid;
  gap: 8px;
  width: min(420px, 88%);
  padding: 24px;
  border: 1px dashed color-mix(in srgb, var(--accent), transparent 42%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), transparent 14%);
  color: var(--ink);
  text-align: center;
}

.image-empty-state strong {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.05;
}

.image-empty-state span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.case-card {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 22px;
}

.case-card h2 {
  font-size: clamp(42px, 6vw, 78px);
  line-height: 0.95;
}

.case-card.is-empty h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
}

.case-card.is-empty .selected-meta {
  display: none;
}

.selected-description {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.selected-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.selected-meta span {
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8faf8;
}

.selected-meta span:last-child {
  grid-column: 1 / -1;
}

.selected-meta small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.selected-meta strong {
  font-size: 15px;
  line-height: 1.2;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.kpis article {
  display: grid;
  gap: 8px;
  min-height: 122px;
  padding: 18px;
}

.kpis span,
.kpis small,
.panel-title span {
  color: var(--muted);
}

.kpis span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.kpis strong {
  font-size: clamp(29px, 4vw, 44px);
  line-height: 1;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
  gap: 16px;
}

.panel {
  min-width: 0;
  padding: 18px;
}

.chart-panel {
  min-height: 420px;
}

.panel-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-title span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

canvas {
  display: block;
  width: 100%;
  height: 320px;
}

.ranking-list {
  display: grid;
  gap: 12px;
}

.rank-item {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.rank-item:last-child {
  border-bottom: 0;
}

.rank-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.rank-row strong {
  overflow-wrap: anywhere;
}

.bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eee9;
}

.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--danger));
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

th {
  position: sticky;
  top: 0;
  background: #f0f4f1;
  color: #52605c;
  font-size: 12px;
  text-transform: uppercase;
}

td.num,
th.num {
  text-align: right;
}

.code-pill {
  display: inline-block;
  width: auto;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  padding: 5px 9px;
  background: #e9f1f8;
  color: var(--blue);
  cursor: pointer;
  font-weight: 800;
}

.code-pill:hover {
  background: var(--blue);
  color: white;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.summary-card {
  display: grid;
  gap: 10px;
  min-height: 190px;
  padding: 22px;
}

.summary-card h3 {
  font-size: clamp(26px, 3vw, 40px);
}

.summary-card span,
.summary-card li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.summary-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.summary-card li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.provider-overview {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.provider-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.provider-toolbar h2 {
  font-size: clamp(22px, 2.4vw, 32px);
}

.provider-toolbar button {
  width: auto;
  min-width: 124px;
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.provider-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 96px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 62%);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), transparent 94%), transparent),
    var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--shadow-color), transparent 20%);
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.provider-card:hover,
.provider-card.active {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.provider-card.active {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), transparent 84%), transparent),
    var(--surface);
}

.provider-rank {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 60%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg), var(--nav) 10%);
  color: color-mix(in srgb, var(--accent), white 22%);
  font-size: 13px;
  font-weight: 850;
}

.provider-card:nth-child(-n + 3) .provider-rank {
  background: linear-gradient(135deg, #3cc9ef, #25d5b8);
  color: #ffffff;
  border-color: transparent;
}

.provider-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.provider-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

.provider-head strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 850;
  text-transform: uppercase;
}

.provider-head span {
  color: var(--ink);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 850;
  white-space: nowrap;
}

.provider-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.provider-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bar-track);
}

.provider-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3ec9f2, #2fd3ba);
}

.provider-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  color: color-mix(in srgb, var(--accent), white 25%);
  font-size: 12px;
}

.provider-meta span:nth-child(2),
.provider-meta span:nth-child(3) {
  text-align: right;
}

.provider-incidents-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.provider-incidents-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.provider-incidents-head h2 {
  font-size: clamp(20px, 2.2vw, 28px);
}

.provider-incidents-head span {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.provider-incident-list {
  display: grid;
  gap: 10px;
}

.provider-incident {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.provider-incident > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.provider-incident strong {
  color: var(--ink);
  font-size: 16px;
}

.provider-incident span {
  color: var(--muted);
  font-size: 13px;
}

.provider-incident-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.provider-incident-meta span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  white-space: nowrap;
}

.provider-incident button {
  width: auto;
  min-width: 112px;
}

.provider-incident.empty {
  grid-template-columns: 1fr;
}

@media (max-width: 1100px) {
  .topbar,
  .module-title,
  .panel-title {
    display: grid;
  }

  .source,
  .module-title span {
    text-align: left;
  }

  .filters,
  .evidence-focus,
  .kpis,
  .dashboard-grid,
  .summary-grid,
  .provider-grid {
    grid-template-columns: 1fr;
  }

  .provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .provider-toolbar {
    display: grid;
  }

  .provider-toolbar button {
    width: 100%;
  }

  .provider-incident {
    grid-template-columns: 1fr;
  }

  .provider-incident-meta {
    justify-content: flex-start;
  }

  .provider-incident button {
    width: 100%;
  }

  .image-stage {
    height: clamp(360px, 55vh, 620px);
  }
}

@media (max-width: 720px) {
  .page-shell {
    width: min(100% - 24px, 1540px);
    margin-top: 12px;
  }

  .topbar {
    padding: 24px 18px 20px;
  }

  .topbar h1 {
    font-size: 34px;
  }

  .topbar-subtitle,
  .source {
    font-size: 12px;
  }

  .module-tabs {
    top: 0;
    border-radius: 7px;
  }

  .filters,
  .evidence-console,
  .viewer-card,
  .case-card,
  .panel {
    padding: 12px;
  }

  .evidence-toolbar,
  .case-actions,
  .selected-meta,
  .provider-card,
  .provider-meta {
    grid-template-columns: 1fr;
  }

  .provider-card {
    gap: 14px;
    padding: 18px;
  }

  .provider-grid {
    grid-template-columns: 1fr;
  }

  .provider-incidents-head {
    display: grid;
  }

  .provider-incidents-head span {
    text-align: left;
  }

  .provider-head {
    display: grid;
  }

  .provider-meta span,
  .provider-meta span:nth-child(2),
  .provider-meta span:nth-child(3) {
    text-align: left;
  }

  .viewer-toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .viewer-toolbar span,
  .viewer-toolbar button:last-child {
    grid-column: 1 / -1;
  }

  .viewer-toolbar button,
  .viewer-toolbar strong {
    width: 100%;
  }

  .image-stage {
    height: 330px;
  }

  .case-card h2 {
    font-size: 46px;
  }

  canvas {
    height: 260px;
  }
}

/* Estilo operativo inspirado en Dashboard Vias */
body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), transparent 90%), transparent 280px),
    var(--bg);
  font-family: var(--font-main);
  font-feature-settings: "liga" 1, "calt" 1, "tnum" 1;
  line-height: 1.45;
}

button,
input,
select,
table {
  font-family: var(--font-main);
}

.topbar {
  padding: 26px clamp(16px, 4vw, 40px) 20px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  color: var(--ink);
  box-shadow: 0 8px 28px var(--shadow-color);
}

.topbar h1 {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 650;
}

.topbar-subtitle {
  color: var(--muted);
}

.source {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--muted);
}

.source strong {
  color: var(--ink);
}

.theme-button {
  width: auto;
  min-height: 34px;
  margin-top: 6px;
  padding: 0 12px;
  justify-self: end;
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
}

.theme-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.module-tabs {
  background: var(--topbar-bg);
}

.module-tab.active,
.module-tab:hover {
  background: var(--accent);
  border-color: var(--accent);
}

button:not(.module-tab):not(.theme-button):not(.code-pill) {
  background: var(--accent);
  border-color: var(--accent);
}

select,
input {
  background: var(--field-bg);
  color: var(--ink);
}

.viewer-toolbar,
.selected-meta span {
  background: var(--surface-soft);
}

.viewer-toolbar button {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.image-stage {
  background: var(--surface-soft);
}

th {
  background: var(--table-head);
}

.bar {
  background: var(--bar-track);
}

.code-pill {
  background: color-mix(in srgb, var(--blue), transparent 88%);
  color: var(--blue);
}

:root.dark .image-stage img {
  box-shadow: 0 18px 46px rgba(0, 245, 212, 0.16);
}

:root.dark .module-tabs {
  box-shadow: 0 8px 28px var(--shadow-color);
}

/* Detalle: tabla solida y legible en claro/oscuro */
.table-panel {
  background: var(--surface);
}

.table-wrap {
  background: var(--surface);
  border-color: var(--line);
}

table {
  background: var(--surface);
  color: var(--ink);
}

thead,
th {
  background: var(--table-head);
  color: var(--muted);
}

tbody tr {
  background: var(--surface);
}

tbody tr:nth-child(even) {
  background: var(--surface-soft);
}

td {
  color: var(--ink);
}

td.num {
  color: color-mix(in srgb, var(--ink), var(--accent) 18%);
  font-weight: 650;
}

:root.dark .table-wrap {
  background: #08171b;
}

:root.dark table,
:root.dark tbody tr {
  background: #0b1a1f;
}

:root.dark tbody tr:nth-child(even) {
  background: #10272d;
}

:root.dark td {
  color: #ecfff8;
}

:root.dark th {
  color: #93b9c0;
}