:root {
  color-scheme: dark;
  --bg: #010810;
  --panel: rgba(3, 15, 27, 0.94);
  --panel-2: rgba(5, 21, 36, 0.96);
  --panel-soft: rgba(7, 27, 44, 0.72);
  --line: #123957;
  --line-bright: #12658b;
  --cyan: #00bfff;
  --cyan-soft: #69d8ff;
  --blue: #188fff;
  --turquoise: #00e0d1;
  --green: #14d6a0;
  --amber: #ffb82e;
  --orange: #ff6b35;
  --red: #ff506b;
  --purple: #a682ff;
  --text: #eef8ff;
  --muted: #8ea7b9;
  --muted-2: #607d91;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  --radius: 13px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 74% 15%, rgba(0, 123, 196, 0.12), transparent 28%),
    radial-gradient(circle at 18% 100%, rgba(0, 224, 209, 0.07), transparent 30%),
    linear-gradient(145deg, #01060c 0%, #020c16 55%, #01070e 100%);
  font-family: var(--font);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

button,
select,
input {
  font: inherit;
}

button,
select,
input[type="range"] {
  outline: none;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  box-shadow: 0 0 0 2px #001522, 0 0 0 4px var(--cyan);
}

button {
  color: inherit;
}

.ambient-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(36, 123, 164, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 123, 164, 0.1) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 75%, transparent);
}

.app-shell {
  width: min(1900px, calc(100% - 20px));
  margin: 10px auto;
}

.topbar,
.panel,
.process-strip {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(3, 16, 28, 0.97), rgba(2, 11, 20, 0.96));
  box-shadow: inset 0 1px 0 rgba(154, 226, 255, 0.025), var(--shadow);
}

.topbar {
  min-height: 76px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: 10px 16px 10px 20px;
  position: relative;
  overflow: hidden;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.24), transparent);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--turquoise);
  box-shadow: 0 0 10px var(--turquoise);
}

.brand-block h1 {
  margin: 0;
  font-size: clamp(20px, 1.7vw, 29px);
  font-weight: 670;
  letter-spacing: 0.01em;
  line-height: 1.08;
  text-transform: uppercase;
}

.brand-block p {
  margin: 4px 0 0;
  color: var(--cyan-soft);
  font-size: 12px;
}

.patient-switch {
  display: flex;
  padding: 3px;
  border: 1px solid #0b304a;
  border-radius: 11px;
  background: rgba(0, 7, 13, 0.7);
}

.patient-tab {
  min-width: 128px;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: 180ms ease;
}

.patient-tab:hover {
  color: var(--text);
  background: rgba(13, 69, 101, 0.24);
}

.patient-tab.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(0, 151, 221, 0.25), rgba(0, 224, 209, 0.1));
  box-shadow: inset 0 0 0 1px rgba(0, 191, 255, 0.65), 0 0 18px rgba(0, 156, 218, 0.1);
}

.patient-tab-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid #24536e;
  border-radius: 50%;
  color: var(--cyan);
  font-weight: 700;
}

.patient-tab span:last-child {
  display: grid;
  gap: 1px;
  text-align: left;
  font-size: 12px;
  font-weight: 650;
}

.patient-tab small {
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.patient-tab.active small {
  color: var(--cyan-soft);
}

.session-meta {
  display: flex;
  align-items: center;
}

.meta-item {
  min-width: 76px;
  padding: 4px 14px;
  border-left: 1px solid #244156;
  display: grid;
  gap: 3px;
}

.meta-item small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meta-item strong {
  color: #d9e9f3;
  font-size: 12px;
  font-weight: 550;
}

.icon-button,
.mini-button {
  border: 1px solid #15415e;
  background: rgba(4, 22, 36, 0.85);
  cursor: pointer;
}

.icon-button {
  width: 34px;
  height: 34px;
  margin-left: 8px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--cyan);
}

.icon-button:hover,
.mini-button:hover {
  border-color: var(--cyan);
  background: rgba(0, 139, 201, 0.14);
}

.icon-button svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.dashboard {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 2.18fr) minmax(330px, 0.92fr);
  align-items: start;
  gap: 8px;
}

.main-column,
.side-column {
  display: grid;
  gap: 8px;
}

.panel {
  border-radius: var(--radius);
  overflow: hidden;
}

.panel-heading {
  min-height: 50px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(30, 74, 102, 0.5);
}

.panel-heading.compact {
  min-height: 45px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.heading-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.heading-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--cyan);
  background: rgba(0, 165, 235, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 191, 255, 0.13);
  font-weight: 800;
}

.heading-icon.turquoise {
  color: var(--turquoise);
  background: rgba(0, 224, 209, 0.07);
}

.heading-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.heading-title h2 {
  margin: 0;
  color: #e9f5fc;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.heading-title h2 span {
  color: var(--muted);
  font-weight: 430;
  text-transform: none;
}

.heading-title p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.chart-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.comparison-legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.comparison-legend[hidden] {
  display: none;
}

.legend-line {
  width: 25px;
  height: 2px;
  display: inline-block;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 7px rgba(0, 191, 255, 0.5);
}

.turquoise-line {
  background: var(--turquoise);
}

.dashed-line,
.exogenous-line {
  height: 0;
  border-top: 2px dashed #6e94ad;
  background: none;
  box-shadow: none;
}

.exogenous-line {
  border-color: var(--purple);
}

.mini-button {
  margin-left: 7px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--cyan);
  font-size: 10px;
}

.mini-button.active {
  border-color: #0b76a6;
  background: rgba(0, 139, 201, 0.13);
}

.chart-layout {
  height: 247px;
  min-height: 0;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  overflow: hidden;
}

.current-reading {
  margin: 13px 0 13px 14px;
  padding: 7px 14px 4px 0;
  border-right: 1px solid #20435a;
}

.reading-label {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.current-reading > strong {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 45px;
  font-weight: 350;
  line-height: 1;
  text-shadow: 0 0 22px rgba(54, 191, 255, 0.2);
}

.current-reading > strong small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.trend-chip {
  width: fit-content;
  margin-top: 8px;
  padding: 4px 7px;
  border: 1px solid rgba(20, 214, 160, 0.24);
  border-radius: 999px;
  color: var(--green);
  background: rgba(20, 214, 160, 0.07);
  font-size: 9px;
  font-weight: 600;
}

.trend-chip.warning {
  border-color: rgba(255, 184, 46, 0.3);
  color: var(--amber);
  background: rgba(255, 184, 46, 0.07);
}

.trend-chip.danger {
  border-color: rgba(255, 80, 107, 0.35);
  color: var(--red);
  background: rgba(255, 80, 107, 0.08);
}

.current-reading dl {
  margin: 13px 0 0;
  display: grid;
  gap: 7px;
}

.current-reading dl div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
}

.current-reading dt {
  color: var(--muted-2);
  font-size: 9px;
}

.current-reading dd {
  margin: 0;
  color: #c9dbe7;
  font-size: 10px;
  font-weight: 600;
}

.chart-stage,
.insulin-chart-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.chart-stage {
  padding: 0;
}

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

.chart-stage canvas {
  width: calc(100% - 8px);
  height: calc(100% - 9px);
  position: absolute;
  left: 0;
  top: 4px;
}

.chart-tooltip {
  position: absolute;
  z-index: 4;
  min-width: 112px;
  padding: 7px 9px;
  pointer-events: none;
  border: 1px solid #1a6389;
  border-radius: 7px;
  color: #dff6ff;
  background: rgba(1, 12, 22, 0.94);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  font-size: 10px;
  line-height: 1.5;
  transform: translate(10px, -50%);
}

.chart-tooltip strong {
  display: block;
  color: var(--cyan-soft);
  font-size: 11px;
}

.insulin-chart-wrap {
  height: 124px;
  padding: 0;
}

.insulin-chart-wrap canvas {
  width: calc(100% - 13px);
  height: calc(100% - 9px);
  position: absolute;
  left: 5px;
  top: 3px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.metric-card {
  min-height: 86px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 50%, rgba(0, 160, 228, 0.1), transparent 45%),
    linear-gradient(145deg, rgba(4, 19, 32, 0.96), rgba(2, 12, 22, 0.96));
}

.metric-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  border: 1px solid #12628a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cyan);
  background: rgba(0, 139, 201, 0.07);
  box-shadow: 0 0 18px rgba(0, 139, 201, 0.09);
  font-size: 12px;
  font-weight: 700;
}

.metric-icon sub {
  font-size: 7px;
}

.metric-card > div:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.metric-card span:first-child {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.metric-card strong {
  overflow: hidden;
  color: #e9f7ff;
  font-size: 20px;
  font-weight: 430;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card strong em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 500;
}

.metric-card small {
  overflow: hidden;
  color: var(--green);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meal-panel .panel-heading {
  min-height: 53px;
}

.simulate-button {
  padding: 8px 14px;
  border: 1px solid #0679aa;
  border-radius: 8px;
  color: var(--cyan-soft);
  background: linear-gradient(135deg, rgba(0, 142, 206, 0.18), rgba(0, 204, 212, 0.07));
  box-shadow: inset 0 0 12px rgba(0, 183, 255, 0.06);
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.simulate-button:hover {
  border-color: var(--cyan);
  background: rgba(0, 164, 223, 0.22);
}

.simulate-button.running span {
  display: inline-block;
  animation: pulse-play 0.7s infinite alternate;
}

@keyframes pulse-play {
  to { transform: translateX(3px); filter: drop-shadow(0 0 5px var(--cyan)); }
}

.meal-workspace {
  min-height: 191px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(380px, 0.85fr);
}

.food-controls,
.food-summary {
  padding: 11px 14px;
}

.food-controls {
  border-right: 1px solid rgba(30, 74, 102, 0.55);
}

.category-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 9px;
}

.category-tab {
  border: 1px solid #173b53;
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--muted);
  background: rgba(3, 17, 29, 0.76);
  cursor: pointer;
  font-size: 9px;
}

.category-tab:hover,
.category-tab.active {
  border-color: #0a709d;
  color: var(--cyan-soft);
  background: rgba(0, 147, 207, 0.12);
}

.select-field {
  display: grid;
  gap: 5px;
}

.select-field > span,
.range-field b {
  color: #bdd0dc;
  font-size: 9px;
  font-weight: 550;
}

.select-field select {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 10px;
  border: 1px solid #17425e;
  border-radius: 7px;
  color: #dfedf5;
  background: #03111e;
  cursor: pointer;
}

.quick-foods {
  min-height: 44px;
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #145479 transparent;
}

.quick-food {
  flex: 0 0 auto;
  min-width: 98px;
  padding: 6px 8px;
  border: 1px solid #143b55;
  border-radius: 7px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
  color: #b6c8d4;
  text-align: left;
  background: rgba(4, 20, 34, 0.78);
  cursor: pointer;
}

.quick-food:hover,
.quick-food.active {
  border-color: #0f78a6;
  color: #e8f8ff;
  background: rgba(0, 133, 190, 0.12);
}

.quick-food > span:first-child {
  font-size: 20px;
}

.quick-food span:last-child {
  display: grid;
  gap: 1px;
  overflow: hidden;
  font-size: 9px;
}

.quick-food strong {
  overflow: hidden;
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-food small {
  color: var(--muted-2);
  font-size: 8px;
}

.food-summary {
  background: linear-gradient(145deg, rgba(5, 25, 41, 0.78), rgba(2, 13, 23, 0.42));
}

.food-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.food-emoji {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #145279;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 163, 229, 0.18), rgba(0, 36, 61, 0.2));
  font-size: 23px;
  filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.2));
}

.food-identity > div {
  min-width: 0;
  display: grid;
}

.food-kicker {
  color: var(--muted-2);
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.food-identity strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-identity small {
  color: var(--muted);
  font-size: 9px;
}

.gi-badge,
.profile-badge {
  padding: 4px 7px;
  border: 1px solid rgba(20, 214, 160, 0.4);
  border-radius: 5px;
  color: var(--green);
  background: rgba(20, 214, 160, 0.08);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.gi-badge.medium {
  border-color: rgba(255, 184, 46, 0.4);
  color: var(--amber);
  background: rgba(255, 184, 46, 0.07);
}

.gi-badge.high {
  border-color: rgba(255, 80, 107, 0.45);
  color: var(--red);
  background: rgba(255, 80, 107, 0.08);
}

.macro-grid {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.macro-grid > div {
  padding: 5px;
  border: 1px solid #14364c;
  border-radius: 6px;
  display: grid;
  gap: 1px;
  text-align: center;
  background: rgba(0, 8, 15, 0.28);
}

.macro-grid span {
  color: var(--muted-2);
  font-size: 7px;
  text-transform: uppercase;
}

.macro-grid strong {
  font-size: 11px;
  font-weight: 550;
}

.range-field {
  display: grid;
  gap: 6px;
}

.range-field > span:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.range-field output {
  color: var(--cyan-soft);
  font-size: 10px;
  font-weight: 650;
}

input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: 99px;
  appearance: none;
  background: linear-gradient(90deg, var(--cyan), var(--turquoise));
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #8ee8ff;
  border-radius: 50%;
  appearance: none;
  background: #067cad;
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.13), 0 0 10px rgba(0, 191, 255, 0.5);
}

input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 2px solid #8ee8ff;
  border-radius: 50%;
  background: #067cad;
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

.range-scale {
  display: flex;
  justify-content: space-between;
  color: var(--muted-2);
}

.range-scale i {
  font-size: 7px;
  font-style: normal;
}

.portion-field {
  margin-top: 8px;
}

.estimate-note,
.safety-note {
  margin: 7px 0 0;
  color: var(--amber);
  font-size: 8px;
  line-height: 1.35;
}

.estimate-note span,
.safety-note span {
  margin-right: 4px;
  font-weight: 800;
}

.patient-panel {
  min-height: 262px;
}

.profile-badge.healthy {
  border-color: rgba(20, 214, 160, 0.45);
  color: var(--green);
}

.profile-badge.t1d {
  border-color: rgba(166, 130, 255, 0.48);
  color: #bca3ff;
  background: rgba(166, 130, 255, 0.09);
}

.profile-badge.t2d {
  border-color: rgba(255, 184, 46, 0.45);
  color: var(--amber);
  background: rgba(255, 184, 46, 0.07);
}

.patient-explanation {
  margin: 10px 12px 0;
  padding: 8px 9px;
  border-left: 2px solid var(--cyan);
  color: #a9c0cf;
  background: rgba(0, 126, 181, 0.06);
  font-size: 9px;
  line-height: 1.45;
}

.control-group {
  padding: 11px 12px 5px;
  display: grid;
  gap: 13px;
}

.control-group[hidden] {
  display: none;
}

.healthy-visual {
  min-height: 73px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.healthy-visual > div:last-child {
  display: grid;
  gap: 4px;
}

.healthy-visual strong {
  color: #d8f2ff;
  font-size: 12px;
}

.healthy-visual span {
  color: var(--muted);
  font-size: 9px;
}

.cell-cluster {
  width: 57px;
  height: 51px;
  position: relative;
  filter: drop-shadow(0 0 8px rgba(0, 191, 255, 0.35));
}

.cell-cluster i {
  width: 20px;
  height: 20px;
  position: absolute;
  border: 1px solid #27c8ff;
  border-radius: 48% 52% 45% 55%;
  background: radial-gradient(circle at 35% 30%, #158ad1, #052f58 65%, #03111f);
}

.cell-cluster i:nth-child(1) { left: 1px; top: 14px; }
.cell-cluster i:nth-child(2) { left: 14px; top: 2px; }
.cell-cluster i:nth-child(3) { left: 30px; top: 4px; }
.cell-cluster i:nth-child(4) { left: 36px; top: 21px; }
.cell-cluster i:nth-child(5) { left: 19px; top: 27px; }
.cell-cluster i:nth-child(6) { left: 4px; top: 30px; }
.cell-cluster i:nth-child(7) { left: 20px; top: 14px; z-index: 2; }

.computed-profile {
  margin: 7px 12px 12px;
  padding: 8px 10px;
  border: 1px solid #123d57;
  border-radius: 8px;
  background: rgba(0, 8, 15, 0.28);
}

.computed-profile > div:first-child {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
}

.computed-profile strong {
  color: var(--cyan-soft);
  font-size: 10px;
}

.profile-meter,
.micro-meter {
  overflow: hidden;
  border-radius: 99px;
  background: #0b273b;
}

.profile-meter {
  height: 4px;
  margin-top: 7px;
}

.profile-meter i,
.micro-meter i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #008ccd, var(--cyan), var(--turquoise));
  box-shadow: 0 0 8px rgba(0, 191, 255, 0.45);
  transition: width 250ms ease;
}

.organs-panel {
  min-height: 225px;
}

.organ-grid {
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.organ-card {
  padding: 8px;
  border: 1px solid #143d58;
  border-radius: 8px;
  background:
    radial-gradient(circle at 28px 27px, rgba(0, 158, 232, 0.15), transparent 34%),
    rgba(1, 11, 20, 0.4);
}

.organ-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.organ-top > div {
  margin-left: auto;
  display: grid;
  gap: 1px;
  text-align: right;
}

.organ-top small {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.organ-top strong {
  color: #e2f4ff;
  font-size: 13px;
  font-weight: 470;
}

.organ-symbol {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid #1478a8;
  border-radius: 45% 55% 50% 50%;
  color: var(--cyan);
  background: radial-gradient(circle, rgba(19, 126, 198, 0.3), rgba(1, 16, 29, 0.6));
  box-shadow: 0 0 13px rgba(0, 159, 229, 0.14);
  font-weight: 700;
}

.organ-symbol.pancreas { border-radius: 60% 25% 60% 35%; transform: rotate(-8deg); }
.organ-symbol.liver { border-radius: 63% 28% 52% 34%; }
.organ-symbol.intestine { border-radius: 35%; }
.organ-symbol.muscle { border-radius: 70% 28%; transform: rotate(-12deg); }

.organ-card > span {
  margin-top: 5px;
  display: block;
  color: var(--muted-2);
  font-size: 8px;
}

.micro-meter {
  height: 4px;
  margin-top: 4px;
}

.pathway-panel {
  min-height: 341px;
}

.pathway-list {
  margin: 0;
  padding: 8px 12px 5px;
  list-style: none;
  display: grid;
}

.pathway-list li {
  min-height: 43px;
  position: relative;
  display: grid;
  grid-template-columns: 23px 1fr;
  gap: 8px;
}

.pathway-list li:not(:last-child)::before {
  content: "";
  width: 1px;
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: 1px;
  background: linear-gradient(var(--line-bright), rgba(18, 57, 87, 0.25));
}

.pathway-list li > span {
  width: 21px;
  height: 21px;
  z-index: 1;
  border: 1px solid #1883b5;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cyan);
  background: #031522;
  font-size: 8px;
  font-weight: 700;
}

.pathway-list li > div {
  display: grid;
  align-content: start;
  gap: 2px;
}

.pathway-list strong {
  color: #d2e2eb;
  font-size: 9px;
  font-weight: 580;
}

.pathway-list small {
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.3;
}

.clinical-insight {
  margin: 2px 11px 11px;
  padding: 8px;
  border: 1px solid rgba(0, 191, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(135deg, rgba(0, 128, 187, 0.09), rgba(0, 224, 209, 0.035));
}

.insight-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  border: 1px solid #1677a4;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 700;
}

.clinical-insight p {
  margin: 0;
  display: grid;
  gap: 2px;
}

.clinical-insight strong {
  color: var(--cyan-soft);
  font-size: 8px;
  text-transform: uppercase;
}

.clinical-insight p span {
  color: #9eb6c5;
  font-size: 8px;
  line-height: 1.35;
}

.process-strip {
  min-height: 67px;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.process-step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.process-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--cyan);
  font-size: 18px;
  text-shadow: 0 0 9px rgba(0, 191, 255, 0.55);
}

.process-step > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.process-step small {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.process-step strong {
  overflow: hidden;
  color: #d6e7f0;
  font-size: 10px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.process-arrow {
  color: var(--cyan);
  font-size: 24px;
  font-weight: 200;
  text-shadow: 0 0 8px rgba(0, 191, 255, 0.45);
}

.academic-pill {
  padding: 6px 9px;
  border: 1px solid #174760;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(0, 11, 19, 0.5);
  font-size: 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.sources-dialog {
  width: min(720px, calc(100% - 28px));
  max-height: min(760px, calc(100vh - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #176188;
  border-radius: 14px;
  color: var(--text);
  background: #03111d;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72), 0 0 50px rgba(0, 153, 219, 0.13);
}

.sources-dialog::backdrop {
  background: rgba(0, 5, 10, 0.76);
  backdrop-filter: blur(4px);
}

.sources-dialog form {
  margin: 0;
}

.dialog-heading,
.dialog-footer {
  padding: 14px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 126, 181, 0.06);
}

.dialog-heading {
  border-bottom: 1px solid #16425c;
}

.dialog-heading span {
  color: var(--cyan);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dialog-heading h2 {
  margin: 3px 0 0;
  font-size: 19px;
  font-weight: 600;
}

.close-button {
  width: 32px;
  height: 32px;
  border: 1px solid #204e68;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 21px;
}

.dialog-content {
  max-height: 560px;
  padding: 3px 18px;
  overflow-y: auto;
}

.dialog-content section {
  padding: 13px 0;
  border-bottom: 1px solid #102e42;
}

.dialog-content h3 {
  margin: 0 0 6px;
  color: var(--cyan-soft);
  font-size: 12px;
}

.dialog-content p,
.dialog-content li {
  color: #9fb5c3;
  font-size: 10px;
  line-height: 1.55;
}

.dialog-content ul {
  margin: 7px 0 0;
  padding-left: 17px;
}

.dialog-content a {
  color: var(--cyan-soft);
}

.dialog-content .limitations {
  border-bottom: 0;
}

.dialog-footer {
  border-top: 1px solid #16425c;
  justify-content: flex-end;
}

.dialog-footer button {
  padding: 7px 16px;
  border: 1px solid #0c77a5;
  border-radius: 7px;
  color: var(--cyan-soft);
  background: rgba(0, 146, 207, 0.14);
  cursor: pointer;
}

.sr-only {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (min-width: 1421px) and (min-height: 850px) {
  .app-shell {
    width: min(1900px, calc(100% - 2px));
    margin: 1px auto;
  }

  .topbar {
    min-height: 70px;
    padding-block: 6px;
  }

  .dashboard {
    margin-top: 7px;
  }

  .eyebrow {
    margin-bottom: 2px;
  }

  .brand-block p {
    margin-top: 2px;
  }

  .chart-layout {
    height: 217px;
  }

  .insulin-chart-wrap {
    height: 105px;
  }

  .metric-card {
    min-height: 78px;
    padding-block: 7px;
  }

  .meal-workspace {
    min-height: 170px;
  }

  .food-controls,
  .food-summary {
    padding-block: 8px;
  }

  .patient-panel {
    min-height: 235px;
  }

  .organs-panel {
    min-height: 200px;
  }

  .organ-card {
    padding: 5px 7px;
  }

  .organ-symbol {
    width: 30px;
    height: 30px;
  }

  .pathway-panel {
    min-height: 0;
  }

  .pathway-list li {
    min-height: 35px;
  }

  .clinical-insight {
    margin-bottom: 8px;
    padding: 6px 8px;
  }

  .process-strip {
    min-height: 63px;
  }
}

@media (max-width: 1420px) {
  .topbar {
    grid-template-columns: minmax(310px, 1fr) auto;
  }

  .session-meta {
    display: none;
  }

  .patient-tab {
    min-width: 116px;
  }

  .dashboard {
    grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.85fr);
  }

  .metric-card {
    gap: 7px;
  }

  .metric-icon {
    width: 33px;
    height: 33px;
  }

  .metric-card strong {
    font-size: 17px;
  }
}

@media (max-width: 1120px) {
  .app-shell {
    width: min(100% - 14px, 980px);
    margin: 7px auto;
  }

  .topbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .brand-block {
    text-align: center;
  }

  .eyebrow {
    justify-content: center;
  }

  .patient-switch {
    justify-self: stretch;
  }

  .patient-tab {
    flex: 1;
  }

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

  .side-column {
    grid-template-columns: 1fr 1fr;
  }

  .pathway-panel {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .pathway-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .pathway-list li {
    grid-template-columns: 23px 1fr;
  }

  .pathway-list li:not(:last-child)::before {
    display: none;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 13px;
  }

  .topbar {
    padding: 14px 10px 10px;
  }

  .brand-block p {
    padding: 0 8px;
    line-height: 1.4;
  }

  .patient-switch {
    width: 100%;
    overflow-x: auto;
  }

  .patient-tab {
    min-width: 118px;
    padding-inline: 7px;
  }

  .patient-tab-icon {
    display: none;
  }

  .panel-heading {
    align-items: flex-start;
  }

  .glucose-panel .panel-heading,
  .insulin-panel .panel-heading {
    display: grid;
  }

  .chart-actions {
    padding-left: 40px;
    flex-wrap: wrap;
  }

  .chart-layout {
    height: 365px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 240px;
  }

  .current-reading {
    margin: 0;
    padding: 10px 13px;
    border-right: 0;
    border-bottom: 1px solid #183c53;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px;
  }

  .reading-label {
    grid-column: 1 / -1;
  }

  .current-reading > strong {
    margin: 0;
    font-size: 33px;
  }

  .current-reading .trend-chip {
    margin: 0;
  }

  .current-reading dl {
    margin: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .current-reading dl div {
    display: grid;
  }

  .insulin-chart-wrap {
    height: 165px;
  }

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

  .metric-card:last-child {
    grid-column: 1 / -1;
  }

  .meal-panel .panel-heading {
    align-items: center;
  }

  .meal-panel .heading-title p {
    display: none;
  }

  .simulate-button {
    padding: 7px 9px;
    font-size: 9px;
  }

  .meal-workspace {
    grid-template-columns: 1fr;
  }

  .food-controls {
    border-right: 0;
    border-bottom: 1px solid rgba(30, 74, 102, 0.55);
  }

  .category-tabs {
    overflow-x: auto;
  }

  .side-column {
    grid-template-columns: 1fr;
  }

  .pathway-panel {
    grid-column: auto;
  }

  .pathway-list {
    grid-template-columns: 1fr;
  }

  .pathway-list li:not(:last-child)::before {
    display: block;
  }

  .process-strip {
    padding: 9px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .process-arrow {
    display: none;
  }

  .academic-pill {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (max-width: 430px) {
  .brand-block h1 {
    font-size: 18px;
  }

  .patient-tab {
    min-width: 105px;
    font-size: 11px;
  }

  .current-reading {
    grid-template-columns: auto 1fr;
  }

  .current-reading dl {
    grid-column: 1 / -1;
  }

  .chart-layout {
    height: 390px;
  }

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

  .metric-card:last-child {
    grid-column: auto;
  }

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

  .food-identity {
    grid-template-columns: auto 1fr;
  }

  .gi-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Segunda versión: línea temporal, farmacología y composición corporal */
.heading-icon.purple {
  color: var(--purple);
  background: rgba(166, 130, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(166, 130, 255, 0.18);
}

.duration-switch {
  margin-left: 6px;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #123d59;
  border-radius: 7px;
}

.duration-switch .mini-button {
  min-width: 42px;
  border: 0;
  border-right: 1px solid #123d59;
  border-radius: 0;
}

.duration-switch .mini-button:last-child {
  border-right: 0;
}

.duration-switch .mini-button.active {
  color: #8ce6ff;
  background: rgba(0, 151, 218, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 191, 255, 0.45), 0 0 14px rgba(0, 191, 255, 0.08);
}

.chart-layout {
  height: 285px;
}

.insulin-chart-wrap {
  height: 154px;
}

.chart-stage,
.insulin-chart-wrap {
  background:
    linear-gradient(rgba(0, 191, 255, 0.018), rgba(0, 191, 255, 0)),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(36, 101, 137, 0.025) 80px);
}

.graph-refresh .chart-stage,
.graph-refresh .insulin-chart-wrap {
  animation: chart-flash 900ms ease-out;
}

@keyframes chart-flash {
  0% { box-shadow: inset 0 0 0 rgba(0, 191, 255, 0); }
  28% { box-shadow: inset 0 0 55px rgba(0, 191, 255, 0.085); }
  100% { box-shadow: inset 0 0 0 rgba(0, 191, 255, 0); }
}

.intervention-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(355px, 0.88fr);
  gap: 8px;
}

.intervention-grid > .panel {
  min-width: 0;
}

.timeline-workspace {
  min-height: 0;
  grid-template-columns: 1fr;
}

.timeline-workspace .food-controls {
  border-right: 0;
  border-bottom: 1px solid rgba(30, 74, 102, 0.55);
}

.timeline-workspace .food-summary {
  padding-top: 9px;
}

.event-fields {
  margin-top: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  align-items: end;
  gap: 12px;
}

.time-field {
  display: grid;
  gap: 5px;
}

.time-field > span {
  color: #bdd0dc;
  font-size: 9px;
  font-weight: 550;
}

.time-field input {
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #17425e;
  border-radius: 7px;
  color: #e3f5ff;
  color-scheme: dark;
  background: #03111e;
}

.time-field input::-webkit-calendar-picker-indicator {
  filter: invert(69%) sepia(84%) saturate(2760%) hue-rotate(163deg) brightness(99%);
}

.long-mode-field.is-hidden {
  display: none;
}

.event-fields:has(.long-mode-field.is-hidden) {
  grid-template-columns: 1fr;
}

.field-error {
  border-color: var(--red) !important;
  animation: field-shake 300ms ease-in-out 2;
}

@keyframes field-shake {
  35% { transform: translateX(-4px); }
  70% { transform: translateX(4px); }
}

.insulin-library-panel {
  position: relative;
  overflow: hidden;
}

.insulin-library-panel::after {
  content: "";
  position: absolute;
  right: -50px;
  top: 38px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(166, 130, 255, 0.09), transparent 67%);
}

.purple-button {
  position: relative;
  z-index: 1;
  border-color: #6851b6;
  color: #c8b9ff;
  background: linear-gradient(135deg, rgba(132, 90, 224, 0.2), rgba(0, 191, 255, 0.06));
}

.insulin-builder {
  padding: 11px 14px 12px;
  position: relative;
  z-index: 1;
}

.insulin-identity {
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.insulin-identity > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.insulin-identity span {
  color: var(--purple);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.insulin-identity strong {
  font-size: 16px;
  font-weight: 560;
}

.insulin-identity small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insulin-identity > b {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 1px solid rgba(166, 130, 255, 0.35);
  border-radius: 5px;
  color: #c9bcfa;
  background: rgba(166, 130, 255, 0.08);
  font-size: 9px;
}

.pk-strip {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.pk-strip > div {
  padding: 6px 7px;
  border: 1px solid rgba(68, 74, 126, 0.45);
  border-radius: 6px;
  background: rgba(12, 15, 38, 0.54);
  display: grid;
  gap: 2px;
}

.pk-strip span {
  color: #7d8da5;
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pk-strip strong {
  color: #e0d9ff;
  font-size: 10px;
  font-weight: 520;
}

#insulin-profile-chart {
  width: 100%;
  height: 92px;
  margin-top: 5px;
  display: block;
  border-bottom: 1px solid rgba(93, 74, 157, 0.25);
}

.insulin-builder .safety-note {
  margin: 9px 0 0;
}

.t1-insulin-link {
  margin: 9px 0 0;
  padding: 8px;
  border: 1px solid rgba(166, 130, 255, 0.25);
  border-radius: 7px;
  color: #b6a8e6;
  background: rgba(166, 130, 255, 0.055);
  font-size: 9px;
  line-height: 1.5;
}

.agenda-panel {
  min-height: 113px;
}

.agenda-actions {
  display: flex;
  gap: 6px;
}

.ghost-button {
  padding: 6px 9px;
  border: 1px solid #17445e;
  border-radius: 6px;
  color: #8fcce8;
  background: rgba(0, 107, 154, 0.08);
  cursor: pointer;
  font-size: 8px;
  text-transform: uppercase;
}

.ghost-button:hover {
  border-color: var(--cyan);
}

.danger-ghost {
  color: #da8190;
  border-color: rgba(255, 80, 107, 0.28);
}

.event-agenda {
  padding: 9px 11px 11px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 7px;
}

.agenda-event {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #164158;
  border-radius: 7px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  background: rgba(2, 17, 29, 0.72);
}

.agenda-event.insulin {
  border-color: rgba(119, 91, 190, 0.42);
  background: rgba(22, 16, 48, 0.45);
}

.agenda-event.outside-window {
  border-style: dashed;
  opacity: .66;
  filter: saturate(.7);
}

.event-window-note {
  color: #d6af5e;
  font-size: 8px;
  font-style: normal;
  line-height: 1.3;
}

.agenda-event.just-added {
  animation: event-enter 650ms cubic-bezier(.2, .9, .25, 1);
}

@keyframes event-enter {
  0% { opacity: 0; transform: translateY(9px) scale(0.97); box-shadow: 0 0 0 rgba(0,191,255,0); }
  55% { opacity: 1; transform: translateY(0) scale(1.015); box-shadow: 0 0 22px rgba(0,191,255,.14); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,191,255,0); }
}

.event-time {
  color: var(--cyan-soft);
  font-size: 9px;
  font-weight: 650;
}

.event-icon {
  font-size: 18px;
}

.insulin-event-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #c0abff;
  background: rgba(166,130,255,.14);
}

.agenda-event > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agenda-event strong,
.agenda-event small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-event strong {
  font-size: 10px;
  font-weight: 560;
}

.agenda-event small {
  color: var(--muted);
  font-size: 8px;
}

.agenda-event button {
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #7591a4;
  background: transparent;
  cursor: pointer;
}

.agenda-event button:hover {
  border-color: rgba(255,80,107,.42);
  color: #ff8799;
  background: rgba(255,80,107,.08);
}

.empty-agenda {
  margin: 0;
  padding: 18px;
  color: var(--muted-2);
  text-align: center;
  font-size: 10px;
}

.composition-grid {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.body-visual-wrap {
  min-width: 0;
  padding: 4px 5px 6px;
  overflow: hidden;
  border: 1px solid #143e58;
  border-radius: 8px;
  text-align: center;
  background: radial-gradient(circle at 50% 60%, rgba(0,154,226,.12), transparent 60%), rgba(1,12,22,.55);
}

.body-visual-wrap span {
  color: #7694a8;
  font-size: 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.body-sprite {
  width: 72px;
  height: 126px;
  margin: -2px auto -4px;
  background-image: url("composicion-corporal-atlas-v1.png");
  background-repeat: no-repeat;
  background-size: 500% 200%;
  filter: saturate(1.2) drop-shadow(0 0 9px rgba(0, 166, 255, 0.38));
  transition: background-position 260ms ease, transform 250ms ease, filter 250ms ease;
}

.body-sprite.changing {
  transform: scale(1.06);
  filter: saturate(1.45) drop-shadow(0 0 16px rgba(0, 191, 255, .7));
}

.organ-visual {
  width: 75px;
  height: 50px;
  flex: 0 0 auto;
  display: block;
  background-image: url("organos-atlas-v1.png");
  background-repeat: no-repeat;
  background-size: 200% 200%;
  filter: grayscale(1) sepia(1) saturate(9) hue-rotate(154deg) brightness(1.18) contrast(1.08) drop-shadow(0 0 7px rgba(0, 174, 255, .52));
  animation: organ-float 4s ease-in-out infinite;
}

.organ-visual.pancreas { background-position: 0 0; }
.organ-visual.liver { background-position: 100% 0; animation-delay: -1s; }
.organ-visual.intestine { background-position: 0 100%; animation-delay: -2s; }
.organ-visual.muscle { background-position: 100% 100%; animation-delay: -3s; }

@keyframes organ-float {
  0%, 100% { transform: translateY(0); filter: grayscale(1) sepia(1) saturate(9) hue-rotate(154deg) brightness(1.18) contrast(1.08) drop-shadow(0 0 6px rgba(0,174,255,.42)); }
  50% { transform: translateY(-3px); filter: grayscale(1) sepia(1) saturate(10) hue-rotate(154deg) brightness(1.28) contrast(1.08) drop-shadow(0 0 12px rgba(0,191,255,.68)); }
}

.organ-card {
  min-height: 101px;
  overflow: hidden;
}

.organ-top {
  min-height: 53px;
}

.vitals-panel {
  position: relative;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}

.vitals-panel.warning {
  border-color: rgba(255, 184, 46, .48);
  box-shadow: inset 0 0 30px rgba(255,184,46,.035), var(--shadow);
}

.vitals-panel.danger {
  border-color: rgba(255, 80, 107, .62);
  animation: vital-alert 1.15s ease-in-out infinite alternate;
}

@keyframes vital-alert {
  to { box-shadow: inset 0 0 38px rgba(255,80,107,.055), 0 0 18px rgba(255,80,107,.12); }
}

.vitals-status {
  padding: 4px 7px;
  border: 1px solid rgba(20,214,160,.35);
  border-radius: 5px;
  color: var(--green);
  background: rgba(20,214,160,.07);
  font-size: 8px;
  letter-spacing: .08em;
}

.vitals-status.warning { color: var(--amber); border-color: rgba(255,184,46,.42); background: rgba(255,184,46,.07); }
.vitals-status.danger { color: #ff8b9d; border-color: rgba(255,80,107,.55); background: rgba(255,80,107,.09); }

.vitals-grid {
  padding: 9px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.vital-card {
  min-height: 58px;
  padding: 7px 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #143d58;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(3,22,37,.8), rgba(2,12,22,.65));
}

.vital-card:nth-child(5) {
  grid-column: 1 / -1;
}

.vital-card > span {
  color: #7894a7;
  font-size: 8px;
  letter-spacing: .08em;
}

.vital-card strong {
  margin-top: 3px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.vital-card b {
  font-size: 19px;
  font-weight: 470;
}

.vital-card small {
  color: #7894a7;
  font-size: 7px;
}

.vital-card i {
  width: 38px;
  height: 14px;
  position: absolute;
  right: 6px;
  bottom: 8px;
  opacity: .48;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M0 11h10l4-7 7 14 6-9 4 2h29' fill='none' stroke='%2300bfff' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: vital-wave 1.8s linear infinite;
}

@keyframes vital-wave {
  50% { opacity: .9; transform: translateX(2px); }
}

.vitals-rationale {
  margin: 0 9px 9px;
  padding: 7px 8px;
  border-left: 2px solid #1b688c;
  color: #829cac;
  background: rgba(0,104,150,.05);
  font-size: 8px;
  line-height: 1.45;
}

@media (min-width: 1421px) and (min-height: 850px) {
  .chart-layout { height: 285px; }
  .insulin-chart-wrap { height: 154px; }
  .meal-workspace { min-height: 0; }
  .organ-card { padding: 7px; }
}

@media (max-width: 1280px) {
  .intervention-grid { grid-template-columns: 1fr; }
  .timeline-workspace { grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); }
  .timeline-workspace .food-controls { border-right: 1px solid rgba(30, 74, 102, 0.55); border-bottom: 0; }
}

@media (max-width: 860px) {
  .chart-actions { align-items: center; }
  .duration-switch { width: 100%; margin: 4px 0 0; }
  .duration-switch .mini-button { flex: 1; }
  .timeline-workspace { grid-template-columns: 1fr; }
  .timeline-workspace .food-controls { border-right: 0; border-bottom: 1px solid rgba(30, 74, 102, 0.55); }
  .event-agenda { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .chart-layout { height: 405px; grid-template-rows: auto 270px; }
  .insulin-chart-wrap { height: 190px; }
  .intervention-grid { display: grid; }
  .agenda-panel .panel-heading { align-items: flex-start; }
  .agenda-actions { flex-direction: column; }
  .event-fields { grid-template-columns: minmax(0, 1fr) 95px; }
  .body-sprite { width: 82px; height: 138px; }
  .organ-visual { width: 86px; height: 58px; }
  .organ-card { min-height: 110px; }
}

@media (max-width: 430px) {
  .event-fields { grid-template-columns: 1fr; }
  .pk-strip strong { font-size: 9px; }
  .composition-grid { gap: 5px; }
  .body-sprite { width: 68px; height: 118px; }
  .vitals-grid { grid-template-columns: 1fr 1fr; }
}

/* La gráfica de glucosa funciona como controlador temporal */
.controller-hint {
  min-width: 108px;
  padding-left: 8px;
  border-left: 1px solid #17445e;
  display: grid;
  gap: 1px;
}

.controller-hint b {
  color: #8be8ff;
  font-size: 9px;
  font-weight: 650;
}

.controller-hint small {
  color: #6f8b9d;
  font-size: 7px;
  white-space: nowrap;
}

.timeline-controller {
  cursor: crosshair;
}

.timeline-controller:active {
  cursor: grabbing;
}

.timeline-controller:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: -4px;
  box-shadow: inset 0 0 24px rgba(0, 191, 255, .08);
}

.selected-moment-card {
  margin-top: 11px;
  padding: 7px 8px;
  border: 1px solid rgba(0, 191, 255, .28);
  border-radius: 7px;
  display: grid;
  gap: 2px;
  background: linear-gradient(135deg, rgba(0, 151, 218, .1), rgba(0, 224, 209, .035));
  box-shadow: inset 0 0 18px rgba(0, 191, 255, .025);
}

.selected-moment-card > span {
  color: #6f8fa3;
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.selected-moment-card > strong {
  color: #99eaff;
  font-size: 13px;
  font-weight: 580;
}

.selected-moment-card small {
  color: #7895a7;
  font-size: 7px;
  white-space: nowrap;
}

.selected-moment-card small b {
  color: #c3dce9;
  font-weight: 520;
}

.intervention-action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.event-target {
  padding: 4px 7px;
  border: 1px solid rgba(0, 191, 255, .27);
  border-radius: 6px;
  color: #7091a5;
  background: rgba(0, 151, 218, .055);
  font-size: 8px;
  white-space: nowrap;
}

.event-target b {
  color: #80ddfa;
  font-weight: 620;
}

.insulin-target {
  border-color: rgba(166, 130, 255, .32);
  color: #8477ad;
  background: rgba(166, 130, 255, .055);
}

.insulin-target b {
  color: #c4b2ff;
}

@media (max-width: 1420px) {
  .controller-hint small { display: none; }
  .controller-hint { min-width: auto; }
}

@media (max-width: 760px) {
  .controller-hint {
    width: 100%;
    padding: 5px 0 0 40px;
    border-left: 0;
    border-top: 1px solid rgba(23, 68, 94, .45);
  }
  .controller-hint small { display: block; }
  .selected-moment-card { grid-column: 1 / -1; margin-top: 3px; }
  .intervention-action { flex-direction: column; align-items: flex-end; gap: 4px; }
}

@media (max-width: 430px) {
  .event-target { display: none; }
  .intervention-action { display: block; }
}

/* Tercera versión: legibilidad, composición de comidas e insulina activa */
body {
  font-size: 15px;
  line-height: 1.4;
}

.eyebrow,
.patient-tab small,
.meta-item small,
.reading-label,
.current-reading dt,
.metric-card > div:last-child > span:first-child,
.food-kicker,
.macro-grid span,
.range-scale i,
.pk-strip span,
.insulin-identity span,
.body-visual-wrap span,
.organ-card > span,
.vital-card > span,
.process-step small,
.academic-pill,
.dialog-heading span,
.selected-moment-card > span {
  font-size: 10.5px;
}

.brand-block p,
.heading-title p,
.chart-actions,
.mini-button,
.current-reading > strong small,
.trend-chip,
.current-reading dd,
.chart-tooltip,
.category-tab,
.select-field > span,
.range-field b,
.quick-food span:last-child,
.quick-food strong,
.food-identity small,
.gi-badge,
.profile-badge,
.range-field output,
.estimate-note,
.safety-note,
.time-field > span,
.insulin-identity small,
.insulin-identity > b,
.pk-strip strong,
.t1-insulin-link,
.ghost-button,
.event-time,
.agenda-event small,
.patient-explanation,
.healthy-visual span,
.pathway-list small,
.clinical-insight p span,
.vitals-status,
.vital-card small,
.vitals-rationale,
.controller-hint small,
.selected-moment-card small,
.event-target {
  font-size: 11px;
}

.patient-tab span:last-child,
.meta-item strong,
.heading-title h2,
.simulate-button,
.food-identity strong,
.insulin-identity strong,
.agenda-event strong,
.healthy-visual strong,
.pathway-list strong,
.clinical-insight strong,
.process-step strong,
.dialog-content p,
.dialog-content li,
.controller-hint b {
  font-size: 12px;
}

.heading-title h2 { font-size: 15px; }
.patient-tab span:last-child { font-size: 13px; }
.food-identity strong { font-size: 15px; }
.insulin-identity strong { font-size: 18px; }
.pathway-list strong { font-size: 12.5px; }
.chart-tooltip strong { font-size: 12px; }
.select-field select,
.time-field input { min-height: 40px; font-size: 13px; }

.chart-layout {
  height: 365px;
  grid-template-columns: 220px minmax(0, 1fr);
}

.insulin-chart-wrap { height: 176px; }
.current-reading { padding-right: 16px; }
.metric-card { min-height: 90px; padding-block: 10px; }
.metric-card strong { font-size: 22px; }
.metric-card strong em,
.metric-card small { font-size: 10.5px; line-height: 1.3; }
.metric-card small { white-space: normal; }
.simulate-button { padding: 9px 14px; }
.category-tab { min-height: 32px; padding: 6px 9px; }
.quick-food { min-width: 118px; min-height: 53px; }
.macro-grid > div { min-height: 43px; padding: 7px 5px; }
.macro-grid strong { font-size: 13px; }
.range-field { gap: 8px; }
.range-scale i { font-size: 10px; }

.meal-effect-strip {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 6px;
}

.meal-effect-strip span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(0, 191, 255, .18);
  border-radius: 6px;
  display: grid;
  gap: 2px;
  color: #7794a7;
  background: rgba(0, 126, 181, .045);
  font-size: 10.5px;
}

.meal-effect-strip b {
  overflow: hidden;
  color: #9ce8ff;
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dose-effect-summary {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid rgba(166, 130, 255, .26);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  background: linear-gradient(135deg, rgba(166, 130, 255, .075), rgba(0, 191, 255, .035));
  transition: border-color 180ms ease, background 180ms ease;
}

.dose-effect-summary > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dose-effect-summary .dose-context {
  grid-column: 1 / -1;
  padding-top: 6px;
  border-top: 1px solid rgba(166, 130, 255, .16);
}

.dose-effect-summary span {
  color: #837da1;
  font-size: 10.5px;
}

.dose-effect-summary strong {
  color: #ddd4ff;
  font-size: 12px;
  font-weight: 580;
}

.dose-effect-summary.warning { border-color: rgba(255,184,46,.5); background: rgba(255,184,46,.055); }
.dose-effect-summary.warning strong { color: #ffd889; }
.dose-effect-summary.danger { border-color: rgba(255,80,107,.62); background: rgba(255,80,107,.065); }
.dose-effect-summary.danger strong { color: #ff9cac; }

#insulin-profile-chart { height: 108px; }
.selected-moment-card { padding: 9px 10px; gap: 3px; }
.selected-moment-card > strong { font-size: 15px; }
.selected-moment-card small { white-space: normal; line-height: 1.35; }
.selected-moment-card .selected-iob b { color: #c7b5ff; }
.event-target { padding: 6px 8px; }
.agenda-event { min-height: 55px; padding: 9px; }
.agenda-event strong { font-size: 12px; }
.patient-explanation { padding: 10px 11px; line-height: 1.55; }
.computed-profile > div:first-child,
.computed-profile strong,
.organ-top small { font-size: 11px; }
.organ-top strong { font-size: 15px; }
.body-visual-wrap span { font-size: 10px; }
.pathway-list li { min-height: 45px; }
.clinical-insight { padding: 10px; }
.process-strip { min-height: 76px; }
.vital-card { min-height: 68px; padding: 9px 10px; }
.vital-card b { font-size: 22px; }
.vitals-rationale { padding: 9px 10px; font-size: 11px; line-height: 1.55; }
.dialog-content h3 { font-size: 14px; }
.dialog-content p,
.dialog-content li { font-size: 12px; line-height: 1.65; }

@media (min-width: 1421px) and (min-height: 850px) {
  .chart-layout { height: 365px; }
  .insulin-chart-wrap { height: 176px; }
  .metric-card { min-height: 90px; }
}

@media (max-width: 1120px) {
  .app-shell { width: min(100% - 16px, 1024px); }
  .chart-layout { height: 375px; grid-template-columns: 210px minmax(0, 1fr); }
  .intervention-grid { grid-template-columns: 1fr; }
  .timeline-workspace { grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr); }
  .metric-card strong { font-size: 21px; }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .brand-block p { font-size: 12px; }
  .patient-tab { min-width: 112px; }
  .panel-heading { padding: 11px 12px; }
  .heading-title h2 { font-size: 14px; }
  .chart-layout { height: auto; grid-template-columns: 1fr; grid-template-rows: auto 310px; }
  .insulin-chart-wrap { height: 220px; }
  .current-reading { grid-template-columns: auto auto 1fr; }
  .current-reading > strong { font-size: 38px; }
  .current-reading dl { grid-column: 1 / -1; }
  .timeline-workspace { grid-template-columns: 1fr; }
  .simulate-button { font-size: 11px; padding: 9px 10px; }
  .meal-effect-strip { grid-template-columns: 1fr; }
  .process-strip { grid-template-columns: 1fr; }
  .academic-pill { grid-column: auto; }
}

@media (max-width: 430px) {
  .brand-block h1 { font-size: 20px; }
  .patient-tab { min-width: 106px; }
  .patient-tab span:last-child { font-size: 12px; }
  .patient-tab small { font-size: 10px; }
  .chart-layout { height: auto; grid-template-columns: 1fr; grid-template-rows: auto 320px; }
  .current-reading { grid-template-columns: auto 1fr; }
  .current-reading dl,
  .selected-moment-card { grid-column: 1 / -1; }
  .metrics-grid { grid-template-columns: 1fr; }
  .category-tab { flex: 0 0 auto; }
  .event-fields,
  .dose-effect-summary { grid-template-columns: 1fr; }
  .dose-effect-summary .dose-context { grid-column: auto; }
  .pk-strip strong { font-size: 11px; }
  .vitals-grid { grid-template-columns: 1fr; }
  .vital-card:nth-child(5) { grid-column: auto; }
}

/* Atlas azul de ilustraciones para los indicadores principales */
.metric-card {
  min-height: 106px;
  gap: 8px;
}

.metric-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: transparent;
  background-color: transparent;
  background-image: url("metricas-atlas-v2.png");
  background-repeat: no-repeat;
  background-size: 300% 200%;
  box-shadow: none;
  font-size: 0;
  filter: grayscale(1) sepia(1) saturate(9) hue-rotate(154deg) brightness(1.18) contrast(1.08) drop-shadow(0 0 8px rgba(0, 174, 255, .48));
  animation: metric-image-float 4.4s ease-in-out infinite;
}

.metric-icon.gauge { background-position: 0 0; }
.metric-icon.shield { background-position: 50% 0; animation-delay: -.8s; }
.metric-icon.pulse { background-position: 100% 0; animation-delay: -1.6s; }
.metric-icon.clock { background-position: 0 100%; animation-delay: -2.4s; }
.metric-icon.beta { background-position: 50% 100%; animation-delay: -3.2s; }

@keyframes metric-image-float {
  0%, 100% { transform: translateY(0) scale(.98); }
  50% { transform: translateY(-2px) scale(1.02); }
}

.metric-card:hover .metric-icon {
  filter: grayscale(1) sepia(1) saturate(10) hue-rotate(154deg) brightness(1.28) contrast(1.08) drop-shadow(0 0 13px rgba(0, 191, 255, .68));
}

@media (max-width: 1120px) {
  .metric-icon {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
}

@media (max-width: 760px) {
  .metric-card { min-height: 104px; }
  .metric-icon {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }
}

/* Glosario académico */
.session-meta { gap: 7px; }

.glossary-button {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #16648b;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #9ae9ff;
  background: linear-gradient(135deg, rgba(0, 151, 218, .14), rgba(0, 224, 209, .055));
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.glossary-button:hover {
  border-color: var(--cyan);
  background: rgba(0, 139, 201, .2);
}

.glossary-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.glossary-dialog {
  width: min(960px, calc(100% - 28px));
  max-height: min(850px, calc(100vh - 28px));
}

.glossary-dialog form {
  max-height: min(850px, calc(100vh - 28px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.glossary-toolbar {
  padding: 12px 17px;
  border-bottom: 1px solid #123a53;
  background: rgba(1, 12, 22, .72);
}

.glossary-search {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #174a68;
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  background: #020e19;
}

.glossary-search:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0, 191, 255, .12);
}

.glossary-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.7;
}

.glossary-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  color: #e4f7ff;
  background: transparent;
  font-size: 13px;
}

.glossary-search input::placeholder { color: #66869a; }

.glossary-search > span {
  color: #7293a8;
  font-size: 11px;
  white-space: nowrap;
}

.glossary-content {
  max-height: none;
  min-height: 0;
  padding: 0 18px 8px;
}

.glossary-section { padding: 16px 0 !important; }

.glossary-section h3 {
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.glossary-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.glossary-term {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(24, 89, 122, .58);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(5, 25, 41, .74), rgba(2, 13, 23, .52));
}

.glossary-term dt {
  color: #b7ecff;
  font-size: 12.5px;
  font-weight: 650;
}

.glossary-term dd {
  margin: 4px 0 0;
  color: #8faaba;
  font-size: 11.5px;
  line-height: 1.5;
}

.glossary-empty {
  margin: 28px 0;
  color: #7e9caf;
  text-align: center;
  font-size: 13px;
}

.glossary-footer { gap: 12px; }
.glossary-footer small { margin-right: auto; color: #6e8c9f; font-size: 11px; }

@media (max-width: 1420px) {
  .topbar { grid-template-columns: minmax(310px, 1fr) auto auto; }
  .session-meta { display: flex; }
  .session-meta .meta-item { display: none; }
}

@media (max-width: 1120px) {
  .topbar { grid-template-columns: 1fr; }
  .session-meta { justify-self: center; }
}

@media (max-width: 760px) {
  .glossary-dialog {
    width: calc(100% - 14px);
    max-height: calc(100vh - 14px);
  }
  .glossary-dialog form { max-height: calc(100vh - 14px); }
  .glossary-grid { grid-template-columns: 1fr; }
  .glossary-toolbar { padding: 10px; }
  .glossary-content { padding-inline: 11px; }
  .glossary-footer { align-items: flex-end; }
}

@media (max-width: 430px) {
  .glossary-search { grid-template-columns: auto minmax(0, 1fr); }
  .glossary-search > span { display: none; }
  .glossary-footer small { display: none; }
}

/* Selector de escenarios, ayudas contextuales y crisis hiperglucémicas */
.case-selector {
  min-width: 116px;
  border: 0;
  border-left: 1px solid #244156;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.case-selector:hover strong { color: var(--cyan-soft); }

.gi-control,
.insulin-concentration {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.academic-info-button {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  padding: 0;
  border: 1px solid #1b6d94;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #8ce5ff;
  background: rgba(0, 145, 205, .11);
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.academic-info-button:hover {
  border-color: var(--cyan);
  color: #fff;
  background: rgba(0, 174, 233, .22);
  box-shadow: 0 0 12px rgba(0, 191, 255, .18);
}

.quick-food-item {
  flex: 0 0 auto;
  min-width: 118px;
  position: relative;
}

.quick-food-item .quick-food {
  width: 100%;
  min-width: 0;
  padding-right: 29px;
}

.food-gi-info {
  position: absolute;
  right: 6px;
  bottom: 7px;
  z-index: 2;
}

.compact-info {
  width: 17px;
  height: 17px;
  min-height: 17px;
  flex-basis: 17px;
  font-size: 10px;
}

.pk-strip span,
.dose-effect-summary span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-badge.danger {
  border-color: rgba(255, 80, 107, .58);
  color: #ff8ea0;
  background: rgba(255, 80, 107, .1);
}

.crisis-panel {
  border-color: rgba(255, 80, 107, .42);
  background:
    linear-gradient(145deg, rgba(32, 9, 20, .94), rgba(4, 14, 24, .97));
}

.crisis-icon {
  border-color: rgba(255, 80, 107, .6) !important;
  color: #ff8ca0 !important;
  background: rgba(255, 80, 107, .1) !important;
}

.crisis-intro {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 80, 107, .14);
  color: #bdcbd4;
  background: rgba(255, 80, 107, .045);
  font-size: 10px;
  line-height: 1.5;
}

.criteria-grid {
  padding: 9px 12px;
  display: grid;
  gap: 6px;
}

.criterion-item {
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid #173d55;
  border-radius: 7px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  background: rgba(1, 11, 19, .45);
}

.criterion-item > span {
  width: 21px;
  height: 21px;
  border: 1px solid rgba(20, 214, 160, .45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--green);
  background: rgba(20, 214, 160, .08);
  font-size: 10px;
}

.criterion-item.pending > span {
  border-color: rgba(255, 184, 46, .45);
  color: var(--amber);
}

.criterion-item > div { min-width: 0; display: grid; gap: 2px; }
.criterion-item strong { color: #d9ebf4; font-size: 10px; font-weight: 620; }
.criterion-item small { color: #829dad; font-size: 9px; }

.blood-gas-block {
  margin: 2px 12px 10px;
  padding: 9px;
  border: 1px solid rgba(255, 80, 107, .32);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(31, 11, 20, .74), rgba(3, 14, 24, .7));
}

.subsection-heading {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.subsection-heading > div { display: grid; gap: 2px; }
.subsection-heading span { color: #ff8398; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.subsection-heading strong { color: #eef8ff; font-size: 12px; }

.blood-gas-grid,
.crisis-labs-grid {
  display: grid;
  gap: 6px;
}

.blood-gas-grid { grid-template-columns: repeat(3, 1fr); }
.crisis-labs-grid { padding: 0 12px 10px; grid-template-columns: repeat(2, 1fr); }

.blood-gas-grid > div,
.crisis-labs-grid > div {
  min-width: 0;
  padding: 7px;
  border: 1px solid #183b50;
  border-radius: 7px;
  display: grid;
  gap: 2px;
  background: rgba(0, 8, 15, .36);
}

.blood-gas-grid span,
.crisis-labs-grid span { color: #7693a5; font-size: 8px; text-transform: uppercase; }
.blood-gas-grid strong,
.crisis-labs-grid strong { color: #fff; font-size: 16px; font-weight: 560; }
.blood-gas-grid small,
.crisis-labs-grid small { color: #648194; font-size: 8px; }

.crisis-teaching-note {
  margin: 0 12px 12px;
  padding: 8px;
  border: 1px solid rgba(255, 184, 46, .25);
  border-radius: 7px;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 7px;
  color: #aebec7;
  background: rgba(255, 184, 46, .045);
  font-size: 9px;
  line-height: 1.45;
}

.crisis-teaching-note > span {
  width: 19px;
  height: 19px;
  border: 1px solid rgba(255, 184, 46, .4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--amber);
  font-family: Georgia, serif;
  font-weight: 700;
}

.crisis-teaching-note p { margin: 0; }

.mode-dialog,
.info-dialog {
  padding: 0;
  overflow: hidden;
  border: 1px solid #176188;
  border-radius: 17px;
  color: var(--text);
  background: #03111d;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .78), 0 0 65px rgba(0, 153, 219, .16);
}

.mode-dialog { width: min(900px, calc(100% - 28px)); max-height: calc(100vh - 28px); }
.info-dialog { width: min(560px, calc(100% - 28px)); }

.mode-dialog::backdrop,
.info-dialog::backdrop {
  background: rgba(0, 5, 10, .84);
  backdrop-filter: blur(7px);
}

.mode-dialog-shell {
  max-height: calc(100vh - 28px);
  padding: 26px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 82% 8%, rgba(0, 191, 255, .13), transparent 28%),
    linear-gradient(145deg, #041723, #020c15 62%, #06121d);
}

.mode-dialog-heading { max-width: 680px; margin-bottom: 19px; }
.mode-dialog-heading > span,
.info-dialog-copy > span { color: var(--cyan); font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.mode-dialog-heading h2 { margin: 5px 0 7px; font-size: clamp(24px, 4vw, 36px); font-weight: 650; letter-spacing: -.02em; }
.mode-dialog-heading p { margin: 0; color: #94abba; font-size: 13px; line-height: 1.55; }

.mode-section-label {
  margin: 15px 0 7px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mode-section-label span { color: #bceeff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mode-section-label small { color: #617f91; font-size: 10px; }
.emergency-label span { color: #ff94a5; }

.mode-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.mode-card {
  width: 100%;
  min-height: 100px;
  padding: 14px;
  border: 1px solid #185270;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: #eaf8ff;
  text-align: left;
  background: linear-gradient(145deg, rgba(7, 30, 48, .9), rgba(3, 16, 28, .88));
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.mode-card:hover {
  border-color: var(--cyan);
  background: linear-gradient(145deg, rgba(5, 52, 76, .92), rgba(3, 22, 36, .94));
  transform: translateY(-1px);
}

.mode-card.laboratory { min-height: 84px; }
.mode-card.emergency { border-color: rgba(255, 80, 107, .35); background: linear-gradient(145deg, rgba(36, 11, 24, .88), rgba(7, 18, 29, .9)); }
.mode-card.emergency:hover { border-color: #ff6f86; }

.mode-card-icon {
  width: 42px;
  height: 42px;
  border: 1px solid #1b789f;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #8ce6ff;
  background: rgba(0, 166, 224, .09);
  font-size: 15px;
  font-weight: 700;
}

.emergency .mode-card-icon { border-color: rgba(255, 80, 107, .5); color: #ff91a3; background: rgba(255, 80, 107, .07); }
.mode-card > span:nth-child(2) { min-width: 0; display: grid; gap: 5px; }
.mode-card strong { font-size: 14px; font-weight: 650; }
.mode-card small { color: #8ea6b5; font-size: 10.5px; line-height: 1.45; }
.mode-card > b { color: #76ddfb; font-size: 10px; font-weight: 650; white-space: nowrap; }
.mode-card.emergency > b { color: #ff91a3; }

.mode-safety {
  margin: 17px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(255, 184, 46, .24);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  color: #91a6b3;
  background: rgba(255, 184, 46, .04);
  font-size: 10px;
  line-height: 1.5;
}
.mode-safety span { color: var(--amber); font-weight: 800; }

.info-dialog form {
  margin: 0;
  padding: 22px;
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  background: radial-gradient(circle at 9% 8%, rgba(0, 191, 255, .13), transparent 30%);
}

.info-dialog-icon {
  width: 42px;
  height: 42px;
  border: 1px solid #1c779e;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #9fe9ff;
  background: rgba(0, 163, 221, .1);
  font: 700 22px Georgia, serif;
}

.info-dialog-copy h2 { margin: 4px 0 9px; font-size: 21px; font-weight: 630; }
.info-dialog-copy p { margin: 0 0 9px; color: #a3b8c5; font-size: 12px; line-height: 1.6; }
.info-dialog-copy p:last-child { margin-bottom: 0; }
.info-dialog-copy strong { color: #d8eff8; }

.info-dialog-footer {
  grid-column: 2 / -1;
  padding-top: 3px;
  display: flex;
  justify-content: flex-end;
}

.info-dialog-footer button {
  padding: 7px 15px;
  border: 1px solid #1677a2;
  border-radius: 7px;
  color: #a8eaff;
  background: rgba(0, 147, 207, .13);
  cursor: pointer;
}

@media (max-width: 1420px) {
  .session-meta .case-selector { display: grid; }
}

@media (max-width: 760px) {
  .mode-dialog { width: calc(100% - 12px); max-height: calc(100vh - 12px); }
  .mode-dialog-shell { max-height: calc(100vh - 12px); padding: 18px 14px; }
  .mode-card-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 92px; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .mode-card-icon { width: 38px; height: 38px; }
  .mode-card > b { grid-column: 2; }
  .mode-section-label { margin-top: 18px; }
  .info-dialog form { padding: 17px; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
  .info-dialog-icon { width: 35px; height: 35px; font-size: 18px; }
  .blood-gas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .mode-dialog-heading h2 { font-size: 24px; }
  .mode-dialog-heading p { font-size: 11.5px; }
  .mode-card { padding: 11px; }
  .mode-card small { font-size: 10px; }
  .mode-card > b { font-size: 9px; }
  .info-dialog form { grid-template-columns: 34px minmax(0, 1fr); }
  .info-dialog .close-button { position: absolute; top: 10px; right: 10px; }
  .info-dialog-footer { grid-column: 1 / -1; }
  .blood-gas-grid strong,
  .crisis-labs-grid strong { font-size: 14px; }
}

/* Simulaciones prolongadas y descompensación metabólica emergente */
.duration-switch .mini-button {
  min-width: 37px;
  margin-left: 0;
  padding-inline: 7px;
}

.event-fields {
  grid-template-columns: minmax(0, 1fr) minmax(175px, .72fr);
}

.timeline-time-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(86px, .88fr);
  align-items: end;
  gap: 6px;
}

.day-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.day-field[hidden] { display: none; }

.day-field > span {
  color: #bdd0dc;
  font-size: 9px;
  font-weight: 550;
}

.day-field select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 25px 0 8px;
  border: 1px solid #17425e;
  border-radius: 7px;
  color: #e3f5ff;
  background: #03111e;
}

.timeline-time-fields:has(.day-field[hidden]) {
  grid-template-columns: 1fr;
}

.decompensation-controls {
  margin: 5px 10px 10px;
  padding: 11px;
  border: 1px solid rgba(255, 184, 46, .24);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(35, 24, 6, .3), rgba(2, 14, 24, .6));
}

.risk-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.risk-heading > span {
  color: #ffd477;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.risk-guide {
  margin: 0;
  padding: 8px;
  border-left: 2px solid var(--amber);
  color: #91a8b6;
  background: rgba(255, 184, 46, .04);
  font-size: 9px;
  line-height: 1.5;
}

.risk-guide strong { color: #e8c675; }

.ketosis-toggle {
  margin-top: 7px;
  padding: 9px;
  border: 1px solid rgba(255, 184, 46, .2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 184, 46, .035);
  cursor: pointer;
}

.ketosis-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.toggle-track {
  width: 32px;
  height: 18px;
  padding: 2px;
  border: 1px solid #28516a;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #061725;
  transition: border-color .18s ease, background .18s ease;
}

.toggle-track i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  background: #7893a5;
  transition: transform .18s ease, background .18s ease;
}

.ketosis-toggle input:checked + .toggle-track {
  border-color: rgba(255, 184, 46, .72);
  background: rgba(255, 184, 46, .16);
}

.ketosis-toggle input:checked + .toggle-track i {
  transform: translateX(14px);
  background: var(--amber);
}

.ketosis-toggle:has(input:focus-visible) {
  outline: 2px solid rgba(255, 184, 46, .55);
  outline-offset: 2px;
}

.ketosis-toggle > span:last-child { display: grid; gap: 2px; }
.ketosis-toggle b { color: #e8c675; font-size: 10px; }
.ketosis-toggle small { color: #8fa7b6; font-size: 9px; line-height: 1.4; }

@media (max-width: 980px) {
  .duration-switch { flex-wrap: wrap; }
  .duration-switch .mini-button { min-width: 16.66%; }
}

@media (max-width: 760px) {
  .event-fields { grid-template-columns: minmax(0, 1fr) minmax(175px, .7fr); }
}

@media (max-width: 520px) {
  .event-fields { grid-template-columns: 1fr; }
  .timeline-time-fields { grid-template-columns: minmax(0, 1fr) minmax(92px, .7fr); }
}

.crisis-top-indicator {
  min-height: 38px;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(255, 80, 107, .72);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffe2e7;
  background: linear-gradient(145deg, rgba(84, 7, 25, .94), rgba(39, 4, 15, .96));
  box-shadow: 0 0 0 1px rgba(255, 63, 95, .08) inset, 0 0 18px rgba(255, 63, 95, .13);
  cursor: pointer;
  font: inherit;
}

.crisis-top-indicator[hidden] { display: none !important; }

.crisis-top-indicator:hover,
.crisis-top-indicator:focus-visible {
  border-color: #ff718a;
  box-shadow: 0 0 0 2px rgba(255, 63, 95, .18), 0 0 22px rgba(255, 63, 95, .2);
  outline: none;
}

.crisis-top-indicator > span:first-child {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: #ff3f5f;
  box-shadow: 0 0 0 0 rgba(255, 63, 95, .5);
  font-size: 15px;
  font-weight: 800;
  animation: crisis-indicator-pulse 1.8s ease-out infinite;
}

.crisis-top-indicator > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.crisis-top-indicator small {
  color: #ffacba;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.crisis-top-indicator strong {
  color: #fff1f4;
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}

.crisis-top-indicator.hhs {
  border-color: rgba(255, 104, 83, .76);
  background: linear-gradient(145deg, rgba(85, 17, 9, .94), rgba(40, 7, 4, .96));
}

.crisis-top-indicator.hhs > span:first-child { background: #ff533f; }

.crisis-top-indicator.mixed {
  border-color: rgba(255, 133, 69, .82);
  background: linear-gradient(145deg, rgba(83, 23, 8, .95), rgba(45, 5, 18, .97));
}

.crisis-top-indicator.mixed > span:first-child { background: #ff7448; }

@keyframes crisis-indicator-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 63, 95, .5); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(255, 63, 95, 0); }
}

@media (max-width: 760px) {
  .crisis-top-indicator { max-width: 100%; }
  .crisis-top-indicator strong { white-space: normal; }
}

/* WordPress page shell and CerebroMedico AI navigation integration. */
body.cm-gi-page-body {
  min-height: 100dvh;
}

body.cm-gi-page-body.cm-menu-open,
body.cm-gi-page-body.cm-no-scroll {
  overflow: hidden;
}

.cm-gi-page-shell {
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  display: flex;
}

.cm-gi-page-main {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  container: cm-gi-page / inline-size;
}

.cm-gi-page-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  min-height: 62px;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(121, 201, 243, .14);
  background: rgba(1, 8, 16, .88);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
}

body.admin-bar .cm-gi-page-header {
  top: 32px;
}

.cm-gi-page-menu {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(105, 216, 255, .26);
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  color: #eaf8ff;
  background: rgba(5, 28, 45, .82);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.cm-gi-page-menu:hover {
  border-color: rgba(0, 191, 255, .72);
  background: rgba(8, 54, 80, .9);
}

.cm-gi-page-brand {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: #eef8ff;
  text-decoration: none;
}

.cm-gi-page-brand small {
  color: #7f9caf;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cm-gi-page-brand strong {
  overflow: hidden;
  color: #f4fbff;
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-gi-page-status {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid rgba(20, 214, 160, .24);
  border-radius: 999px;
  color: #98f1d5;
  background: rgba(20, 214, 160, .06);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
  white-space: nowrap;
  text-transform: uppercase;
}

.cm-gi-simulator-root {
  min-width: 0;
  max-width: 100%;
  padding-bottom: max(1px, env(safe-area-inset-bottom));
}

.cm-gi-fallback-nav {
  width: 250px;
  min-height: 100dvh;
  flex: 0 0 250px;
  padding: 22px 16px;
  border-right: 1px solid rgba(121, 201, 243, .15);
  background: #061321;
}

.cm-gi-fallback-brand {
  display: block;
  margin-bottom: 22px;
  color: #eef8ff;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}

.cm-gi-fallback-close,
.cm-gi-fallback-overlay {
  display: none;
}

.cm-gi-fallback-brand b { color: #22d3ee; }
.cm-gi-fallback-nav nav { display: grid; gap: 7px; }
.cm-gi-fallback-nav nav a {
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #b9ccda;
  text-decoration: none;
}
.cm-gi-fallback-nav nav a.active {
  border-color: rgba(0, 191, 255, .42);
  color: #fff;
  background: rgba(0, 191, 255, .1);
}

.cm-gi-mode-ad {
  width: 100%;
  min-height: 100px;
  margin-top: 17px;
  padding: 5px;
  border: 1px solid rgba(142, 167, 185, .12);
  border-radius: 10px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: rgba(0, 7, 13, .28);
}

.cm-gi-mode-ad .adsbygoogle {
  width: 100%;
  min-height: 90px;
}

@media (max-width: 1180px) {
  .cm-gi-fallback-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 5000;
    transform: translateX(-105%);
    transition: transform .22s ease;
  }

  body.cm-menu-open .cm-gi-fallback-nav {
    transform: translateX(0);
  }

  .cm-gi-fallback-close {
    width: 38px;
    height: 38px;
    margin: -7px 0 12px auto;
    border: 1px solid rgba(121, 201, 243, .22);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #eef8ff;
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
    font-size: 23px;
  }

  body.cm-menu-open .cm-gi-fallback-overlay {
    position: fixed;
    inset: 0;
    z-index: 4990;
    border: 0;
    display: block;
    background: rgba(0, 5, 10, .66);
    backdrop-filter: blur(3px);
  }
}

@media (max-width: 782px) {
  body.admin-bar .cm-gi-page-header {
    top: 46px;
  }
}

@media (max-width: 760px) {
  .cm-gi-page-header {
    min-height: 56px;
    padding: 7px 9px;
  }

  .cm-gi-page-menu {
    width: 40px;
    height: 40px;
  }

  .cm-gi-page-status {
    padding: 6px 8px;
    font-size: 8px;
  }

  .cm-gi-mode-ad {
    min-height: 94px;
    margin-top: 14px;
  }

  .cm-gi-mode-ad .adsbygoogle {
    min-height: 84px;
  }
}

@media (max-width: 430px) {
  .cm-gi-page-brand strong { font-size: 13px; }
  .cm-gi-page-status { display: none; }
  .cm-gi-mode-ad { padding: 2px; }
}

@container cm-gi-page (max-width: 1420px) {
  .topbar {
    grid-template-columns: minmax(310px, 1fr) auto auto;
  }

  .session-meta {
    display: flex;
  }

  .session-meta .meta-item {
    display: none;
  }

  .patient-tab {
    min-width: 116px;
  }

  .dashboard {
    grid-template-columns: minmax(0, 1.9fr) minmax(320px, .85fr);
  }
}

@container cm-gi-page (max-width: 1120px) {
  .app-shell {
    width: min(100% - 16px, 1024px);
    margin: 7px auto;
  }

  .topbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .brand-block {
    text-align: center;
  }

  .eyebrow {
    justify-content: center;
  }

  .patient-switch {
    justify-self: stretch;
  }

  .patient-tab {
    flex: 1;
  }

  .session-meta {
    justify-self: center;
  }

  .dashboard,
  .intervention-grid {
    grid-template-columns: 1fr;
  }

  .side-column {
    grid-template-columns: 1fr 1fr;
  }

  .pathway-panel {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .pathway-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .pathway-list li {
    grid-template-columns: 23px 1fr;
  }

  .pathway-list li:not(:last-child)::before {
    display: none;
  }

  .timeline-workspace {
    grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr);
  }
}

/* v1.1: contraste protegido frente al tema y escala tipografica accesible. */
body.cm-gi-page-body {
  --muted: #abc0ce;
  --muted-2: #8da7b8;
  color: #eef8ff !important;
  font-size: 15px;
  line-height: 1.48;
}

body.cm-gi-page-body .cm-gi-page-main,
body.cm-gi-page-body .cm-gi-simulator-root,
body.cm-gi-page-body dialog,
body.cm-gi-page-body dialog form {
  color: #eef8ff !important;
}

body.cm-gi-page-body .cm-gi-simulator-root h1,
body.cm-gi-page-body .cm-gi-simulator-root h2,
body.cm-gi-page-body .cm-gi-simulator-root h3,
body.cm-gi-page-body .cm-gi-simulator-root h4,
body.cm-gi-page-body dialog h1,
body.cm-gi-page-body dialog h2,
body.cm-gi-page-body dialog h3,
body.cm-gi-page-body dialog h4 {
  color: #f2f9fd !important;
  text-shadow: none !important;
}

body.cm-gi-page-body .brand-block h1 {
  color: #f5fbff !important;
  font-size: clamp(22px, 1.65vw, 28px);
  line-height: 1.12;
}

body.cm-gi-page-body .heading-title h2 {
  color: #edf8ff !important;
  font-size: 16px;
  line-height: 1.25;
}

body.cm-gi-page-body .heading-title h2 span {
  color: #9db5c5 !important;
}

body.cm-gi-page-body .mode-dialog-heading h2 {
  margin: 7px 0 9px;
  color: #f5fbff !important;
  font-size: clamp(27px, 3vw, 32px);
  font-weight: 680;
  line-height: 1.12;
}

body.cm-gi-page-body .dialog-heading h2 {
  color: #f1f8fc !important;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
}

body.cm-gi-page-body .info-dialog-copy h2 {
  color: #f1f8fc !important;
  font-size: 22px;
  line-height: 1.22;
}

body.cm-gi-page-body .dialog-content h3,
body.cm-gi-page-body .glossary-section h3 {
  color: #9fe7ff !important;
  font-size: 15.5px;
  line-height: 1.35;
}

body.cm-gi-page-body .eyebrow,
body.cm-gi-page-body .patient-tab small,
body.cm-gi-page-body .meta-item small,
body.cm-gi-page-body .reading-label,
body.cm-gi-page-body .current-reading dt,
body.cm-gi-page-body .metric-card > div:last-child > span:first-child,
body.cm-gi-page-body .food-kicker,
body.cm-gi-page-body .macro-grid span,
body.cm-gi-page-body .range-scale i,
body.cm-gi-page-body .pk-strip span,
body.cm-gi-page-body .insulin-identity span,
body.cm-gi-page-body .body-visual-wrap span,
body.cm-gi-page-body .organ-card > span,
body.cm-gi-page-body .vital-card > span,
body.cm-gi-page-body .process-step small,
body.cm-gi-page-body .academic-pill,
body.cm-gi-page-body .dialog-heading span,
body.cm-gi-page-body .selected-moment-card > span {
  font-size: 11.5px;
  line-height: 1.35;
}

body.cm-gi-page-body .brand-block p,
body.cm-gi-page-body .heading-title p,
body.cm-gi-page-body .chart-actions,
body.cm-gi-page-body .mini-button,
body.cm-gi-page-body .current-reading > strong small,
body.cm-gi-page-body .trend-chip,
body.cm-gi-page-body .current-reading dd,
body.cm-gi-page-body .chart-tooltip,
body.cm-gi-page-body .category-tab,
body.cm-gi-page-body .select-field > span,
body.cm-gi-page-body .range-field b,
body.cm-gi-page-body .quick-food span:last-child,
body.cm-gi-page-body .quick-food strong,
body.cm-gi-page-body .food-identity small,
body.cm-gi-page-body .gi-badge,
body.cm-gi-page-body .profile-badge,
body.cm-gi-page-body .range-field output,
body.cm-gi-page-body .estimate-note,
body.cm-gi-page-body .safety-note,
body.cm-gi-page-body .time-field > span,
body.cm-gi-page-body .insulin-identity small,
body.cm-gi-page-body .insulin-identity > b,
body.cm-gi-page-body .pk-strip strong,
body.cm-gi-page-body .t1-insulin-link,
body.cm-gi-page-body .ghost-button,
body.cm-gi-page-body .event-time,
body.cm-gi-page-body .agenda-event small,
body.cm-gi-page-body .patient-explanation,
body.cm-gi-page-body .healthy-visual span,
body.cm-gi-page-body .pathway-list small,
body.cm-gi-page-body .clinical-insight p span,
body.cm-gi-page-body .vitals-status,
body.cm-gi-page-body .vital-card small,
body.cm-gi-page-body .vitals-rationale,
body.cm-gi-page-body .controller-hint small,
body.cm-gi-page-body .selected-moment-card small,
body.cm-gi-page-body .event-target {
  font-size: 12px;
  line-height: 1.45;
}

body.cm-gi-page-body .patient-tab span:last-child,
body.cm-gi-page-body .meta-item strong,
body.cm-gi-page-body .simulate-button,
body.cm-gi-page-body .food-identity strong,
body.cm-gi-page-body .agenda-event strong,
body.cm-gi-page-body .healthy-visual strong,
body.cm-gi-page-body .pathway-list strong,
body.cm-gi-page-body .clinical-insight strong,
body.cm-gi-page-body .process-step strong,
body.cm-gi-page-body .controller-hint b {
  font-size: 13px;
  line-height: 1.35;
}

body.cm-gi-page-body .metric-card small,
body.cm-gi-page-body .metric-card strong em {
  color: #b2c7d4;
  font-size: 12px;
  line-height: 1.4;
}

body.cm-gi-page-body .metric-card strong {
  color: #f4fbff;
  font-size: 21px;
}

body.cm-gi-page-body .metric-card strong > span {
  color: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

body.cm-gi-page-body .current-reading > strong {
  color: #f4fbff;
  font-size: clamp(34px, 3vw, 40px);
}

body.cm-gi-page-body .insulin-identity strong {
  color: #f1edff;
  font-size: 17px;
}

body.cm-gi-page-body .meal-effect-strip span,
body.cm-gi-page-body .dose-effect-summary span {
  color: #9eb6c6;
  font-size: 12px;
}

body.cm-gi-page-body .meal-effect-strip b,
body.cm-gi-page-body .dose-effect-summary strong {
  font-size: 13px;
  line-height: 1.35;
}

body.cm-gi-page-body .mode-dialog-heading > span,
body.cm-gi-page-body .info-dialog-copy > span,
body.cm-gi-page-body .dialog-heading span {
  color: #35ceff !important;
  font-size: 11px;
}

body.cm-gi-page-body .mode-dialog-heading p {
  color: #b3c6d2;
  font-size: 13.5px;
  line-height: 1.6;
}

body.cm-gi-page-body .mode-section-label span {
  color: #c4efff;
  font-size: 12px;
}

body.cm-gi-page-body .mode-section-label small {
  color: #91aaba;
  font-size: 12px;
}

body.cm-gi-page-body .mode-card strong {
  color: #f3f9fc !important;
  font-size: 15px;
  line-height: 1.3;
}

body.cm-gi-page-body .mode-card small {
  color: #aec0cb;
  font-size: 12.5px;
  line-height: 1.55;
}

body.cm-gi-page-body .mode-card > b {
  font-size: 12px;
}

body.cm-gi-page-body .mode-safety {
  color: #b1c2cd;
  font-size: 12px;
  line-height: 1.55;
}

body.cm-gi-page-body .dialog-content p,
body.cm-gi-page-body .dialog-content li {
  color: #b5c8d3;
  font-size: 13.5px;
  line-height: 1.65;
}

body.cm-gi-page-body .dialog-content a {
  color: #85ddff;
  text-decoration-color: rgba(133, 221, 255, .55);
}

body.cm-gi-page-body .dialog-footer button,
body.cm-gi-page-body .info-dialog-footer button,
body.cm-gi-page-body .close-button {
  color: #c7efff;
  font-size: 13px;
}

body.cm-gi-page-body .info-dialog-copy p {
  color: #b5c8d3;
  font-size: 13px;
  line-height: 1.65;
}

body.cm-gi-page-body .glossary-search > span,
body.cm-gi-page-body .glossary-footer small {
  color: #9db5c5;
  font-size: 12px;
}

body.cm-gi-page-body .glossary-term dt {
  color: #c1efff;
  font-size: 13.5px;
}

body.cm-gi-page-body .glossary-term dd {
  color: #aec2cf;
  font-size: 13px;
  line-height: 1.55;
}

body.cm-gi-page-body .crisis-intro {
  color: #c0d0d9;
  font-size: 12.5px;
}

body.cm-gi-page-body .criterion-item strong,
body.cm-gi-page-body .subsection-heading strong {
  color: #eef8ff !important;
  font-size: 12.5px;
}

body.cm-gi-page-body .criterion-item small,
body.cm-gi-page-body .blood-gas-grid small,
body.cm-gi-page-body .crisis-labs-grid small,
body.cm-gi-page-body .ketosis-toggle small {
  color: #9fb5c4;
  font-size: 11.5px;
}

body.cm-gi-page-body .subsection-heading span,
body.cm-gi-page-body .blood-gas-grid span,
body.cm-gi-page-body .crisis-labs-grid span {
  color: #9eb6c6;
  font-size: 11px;
}

body.cm-gi-page-body .crisis-teaching-note {
  color: #bdcdd6;
  font-size: 11.5px;
  line-height: 1.55;
}

body.cm-gi-page-body .ketosis-toggle b {
  font-size: 12px;
}

body.cm-gi-page-body .cm-gi-page-brand small {
  color: #9eb5c4;
  font-size: 11.5px;
}

body.cm-gi-page-body .cm-gi-page-brand strong {
  color: #f3f9fc;
  font-size: 15px;
}

body.cm-gi-page-body .cm-gi-page-status {
  color: #a7f3dc;
  font-size: 10.5px;
}

body.cm-gi-page-body .quick-food small,
body.cm-gi-page-body .empty-agenda,
body.cm-gi-page-body .computed-profile > div:first-child,
body.cm-gi-page-body .computed-profile strong,
body.cm-gi-page-body .organ-top small {
  color: #a9bfcd;
  font-size: 11.5px;
  line-height: 1.4;
}

body.cm-gi-page-body .academic-info-button.compact-info {
  width: 22px;
  height: 22px;
  min-height: 22px;
  flex-basis: 22px;
  font-size: 12px;
}

body.cm-gi-page-body .pathway-list li > span,
body.cm-gi-page-body .clinical-insight .insight-icon {
  font-size: 12px;
}

@media (max-width: 760px) {
  body.cm-gi-page-body .brand-block h1 {
    font-size: 22px;
  }

  body.cm-gi-page-body .mode-dialog-heading h2 {
    font-size: 26px;
  }

  body.cm-gi-page-body .mode-dialog-heading p {
    font-size: 13px;
  }

  body.cm-gi-page-body .mode-card small {
    font-size: 12px;
  }

  body.cm-gi-page-body .mode-card > b {
    font-size: 11.5px;
  }

  body.cm-gi-page-body .dialog-heading h2 {
    font-size: 20px;
  }
}