:root {
    color-scheme: light;
    --page:           #f9f9f7;
    --surface-1:      #fcfcfb;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #898781;
    --grid:           #e1e0d9;
    --axis:           #c3c2b7;
    --border:         rgba(11,11,11,0.10);
    /* Categorical slots 1-3, palette-validated (all-pairs) in both modes */
    --series-glucose: #2a78d6;   /* blue */
    --series-insulin: #008300;   /* green */
    --series-meal:    #d55181;   /* magenta (dark step also passes on light) */
    --status-good:    #0ca30c;
    --status-warning: #fab219;
    --status-critical:#d03b3b;
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
      color-scheme: dark;
      --page:           #0d0d0d;
      --surface-1:      #1a1a19;
      --text-primary:   #ffffff;
      --text-secondary: #c3c2b7;
      --text-muted:     #898781;
      --grid:           #2c2c2a;
      --axis:           #383835;
      --border:         rgba(255,255,255,0.10);
      --series-glucose: #3987e5;
      --series-insulin: #008300;
      --series-meal:    #d55181;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --page:           #0d0d0d;
    --surface-1:      #1a1a19;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --grid:           #2c2c2a;
    --axis:           #383835;
    --border:         rgba(255,255,255,0.10);
    --series-glucose: #3987e5;
    --series-insulin: #008300;
    --series-meal:    #d55181;
  }

  * { box-sizing: border-box; margin: 0; }
  body {
    background: var(--page);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    padding: 16px;
    max-width: 1100px;
    margin: 0 auto;
    /* mobile Safari/Chrome inflate small text, pushing tile notes past the
       card edge — keep sizes as authored */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
  header h1 { font-size: 18px; font-weight: 600; white-space: nowrap; }
  header .head-sg { font-size: 18px; font-weight: 600; white-space: nowrap; }
  header .head-sg .d { color: var(--text-secondary); font-weight: 400; }
  header .sub { color: var(--text-muted); font-size: 13px; }

  /* 8 slots (hero counts twice): 140px min gives 7 columns at the 1100px cap,
     so one tile wraps; acceptable — narrower tiles would crowd the labels */
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
  .tile {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 0; overflow: hidden;
    container-type: inline-size;
  }
  .tile .label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
  .tile .value { font-size: 26px; font-weight: 600; }
  .tile .note  { font-size: 12px; color: var(--text-muted); margin-top: 4px; overflow-wrap: anywhere; }
  /* The glucose tile is sized like every other tile — same width, same number.
     It used to be double width with a number up to 52px, which made it tower
     over the row. What marks it as the important one is the status colour of
     the card itself, which no other tile has, so the extra bulk was saying a
     second time what the colour already says. */
  /* inline-block so the rotation applies; the tween makes a trend change read
     as the arrow swinging rather than as a different glyph appearing.
     line-height:0 is load-bearing: an inline-block contributes its whole box to
     the line box (an inline only contributes font ascent/descent), so with the
     lift the arrow would grow the card. Zero-height box lets the glyph paint by
     overflow and keeps the card sized by the digits alone.
     Sized in em, not px, so it tracks the number instead of having to be
     re-tuned every time .value changes. */
  .tile.hero .value .arrow { font-size: .85em; vertical-align: .1em; margin-left: 4px; color: var(--text-secondary);
    display: inline-block; line-height: 0; transition: transform .35s ease; }
  header .head-sg .arrow { display: inline-block; line-height: 0; margin-left: 4px; transition: transform .35s ease; }
  @media (prefers-reduced-motion: reduce) {
    .tile.hero .value .arrow, header .head-sg .arrow { transition: none; }
  }
  .tile.hero.low {
    background: color-mix(in srgb, var(--status-critical) 22%, var(--surface-1));
    border-color: color-mix(in srgb, var(--status-critical) 50%, var(--border));
  }
  .tile.hero.in-range {
    background: color-mix(in srgb, var(--status-good) 22%, var(--surface-1));
    border-color: color-mix(in srgb, var(--status-good) 50%, var(--border));
  }
  .tile.hero.high {
    background: color-mix(in srgb, var(--status-warning) 22%, var(--surface-1));
    border-color: color-mix(in srgb, var(--status-warning) 50%, var(--border));
  }
  .tile.hero.stale .value { color: var(--text-muted); }
  /* connection dot: wifi while data flows, wifi-off during an outage;
     hidden until the first poll decides which one applies */
  header .conn {
    margin-left: auto; align-self: center; width: 30px; height: 30px;
    border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; visibility: hidden; color: var(--text-primary);
  }
  header .conn.ok {
    visibility: visible;
    background: color-mix(in srgb, var(--status-good) 22%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--status-good) 50%, var(--border));
  }
  header .conn.stale {
    visibility: visible;
    background: color-mix(in srgb, var(--status-warning) 30%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--status-warning) 60%, var(--border));
  }
  header .conn .wifi-off, header .conn.stale .wifi { display: none; }
  header .conn.stale .wifi-off { display: block; }

  .filters { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
  .filters button {
    background: var(--surface-1); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 5px 12px; font-size: 13px; cursor: pointer; font-family: inherit;
    white-space: nowrap;
  }
  .filters button:hover { color: var(--text-primary); }
  .filters button[aria-pressed="true"],
  .filters button[aria-selected="true"] {
    color: var(--text-primary); font-weight: 600; border-color: var(--axis);
  }
  /* quick ranges: one card, buttons separated by | dividers */
  .filters .seg {
    display: inline-flex; background: var(--surface-1);
    border: 1px solid var(--border); border-radius: 8px;
    max-width: 100%; overflow-x: auto;
  }
  .filters .seg button {
    border: 0; border-radius: 0; background: none;
    border-left: 1px solid var(--border);
  }
  .filters .seg button:first-child { border-left: 0; }
  .filters .seg button[aria-pressed="true"] {
    background: color-mix(in srgb, var(--axis) 32%, transparent);
  }
  .filters .date-range {
    display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  }
  /* The native date input follows the browser locale, so it is hidden
     (but still clickable/focusable: it opens the native picker) behind a
     span that always displays dd/mm/aaaa. */
  .filters .date-pick {
    position: relative; display: inline-flex; align-items: center;
    background: var(--surface-1); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 5px 10px; font-size: 13px; cursor: pointer; white-space: nowrap;
  }
  .filters .date-pick .date-display:empty::before {
    content: attr(data-placeholder); color: var(--text-muted);
  }
  .filters .date-pick input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0; padding: 0;
  }
  .filters .date-pick:focus-within { border-color: var(--axis); }
  .filters.date-mode .date-pick {
    color: var(--text-primary); font-weight: 600; border-color: var(--axis);
  }
  .filters .date-range .sep { color: var(--text-muted); font-size: 13px; }
  .filters #date-clear[hidden] { display: none; }

  .card {
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px; margin-bottom: 16px;
  }
  .card h2 { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; }
  /* collapsible chart cards: the title is the toggle */
  .card details.fold summary { cursor: pointer; }
  .card details.fold summary::marker { color: var(--text-muted); }
  .card details.fold summary h2 { display: inline-block; margin-bottom: 0; vertical-align: middle; }
  .card details.fold[open] summary { margin-bottom: 10px; }
  .chart-wrap { position: relative; height: 320px; }
  .chart-wrap.loading { opacity: 0.55; }
  #agp-wrap { height: 260px; }
  #insulin-wrap { height: 240px; }

  .legend { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
  .legend .key { display: inline-flex; align-items: center; gap: 6px; }
  .legend .line-key  { width: 16px; height: 0; border-top: 2px solid var(--series-glucose); }
  .legend .dot-key   { width: 9px; height: 9px; border-radius: 50%; }
  .legend .dot-key.insulin { background: var(--series-insulin); }
  .legend .tri-key {
    width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 9px solid var(--series-meal);
  }
  .legend .sq-key { width: 10px; height: 10px; border-radius: 3px; }
  .legend .dash-key {
    width: 18px; height: 0;
    border-top: 2px dashed color-mix(in srgb, var(--series-glucose) 60%, transparent);
  }
  .legend .sq-key.basal { background: var(--series-glucose); }
  .legend .sq-key.meal-bolus { background: var(--series-meal); }
  .legend .sq-key.corr { background: var(--series-insulin); }
  .legend .step-key {
    width: 16px; height: 8px;
    background: color-mix(in srgb, var(--series-insulin) 12%, transparent);
    border-top: 2px solid color-mix(in srgb, var(--series-insulin) 40%, transparent);
  }
  .legend .diamond-key {
    width: 8px; height: 8px; transform: rotate(45deg);
    background: var(--surface-1); border: 2px solid var(--status-critical);
  }
  .legend .cross-key { color: var(--axis); font-size: 11px; line-height: 1; }
  .legend .care-key {
    width: 8px; height: 8px; transform: rotate(45deg);
    background: var(--text-muted); border: 2px solid var(--surface-1);
  }
  .legend .band-key { width: 16px; height: 10px; border-radius: 2px; }
  .legend .band-key.suspend { background: color-mix(in srgb, var(--status-warning) 15%, transparent); }
  .legend .band-key.inner { background: color-mix(in srgb, var(--series-glucose) 27%, transparent); }
  .legend .band-key.outer { background: color-mix(in srgb, var(--series-glucose) 13%, transparent); }

  .tir-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface-1); }
  .tir-bar div { min-width: 2px; }
  .tir-bar .low  { background: var(--status-critical); border-radius: 6px 0 0 6px; }
  .tir-bar .in   { background: var(--status-good); }
  .tir-bar .high { background: var(--status-warning); border-radius: 0 6px 6px 0; }
  .tir-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; gap: 4px 14px; }
  .tir-labels strong { color: var(--text-primary); }

  .wk-range { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
  .wk { display: grid; grid-template-columns: 1fr auto auto auto; gap: 5px 14px; font-size: 13px; align-items: baseline; }
  .wk .head { font-size: 12px; color: var(--text-muted); }
  .wk .head.n, .wk .num { text-align: right; font-variant-numeric: tabular-nums; }
  .wk .metric { color: var(--text-secondary); }
  .wk .metric.sub { padding-left: 12px; }
  .wk .prev { color: var(--text-muted); }
  .wk .now { color: var(--text-primary); font-weight: 600; }
  .wk .delta { color: var(--text-muted); }
  .wk .delta.better { color: var(--status-good); }
  .wk .delta.worse { color: var(--status-critical); }
  .wk .rule { grid-column: 1 / -1; height: 1px; background: var(--border); margin: 4px 0; }
  .wk .note { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); }

  .help h2 { margin-bottom: 12px; }
  #help-search {
    width: 100%; box-sizing: border-box; margin-bottom: 6px;
    background: var(--page); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 12px; font-size: 14px; font-family: inherit;
  }
  #help-search:focus { outline: none; border-color: var(--series-glucose); }
  .help .entry { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .help .entry:last-child { border-bottom: none; padding-bottom: 4px; }
  .help .entry h3 { font-size: 15px; margin: 0 0 6px; color: var(--text-primary); }
  .help .entry p { margin: 0; }

  @media (max-width: 640px) {
    body { padding: 12px; }
    /* header: name + glucose on line 1, "actualizado" on its own line */
    header { row-gap: 0; }
    header .sub { flex-basis: 100%; }
    /* On a phone the tiles pair up two per row, which leaves the glucose
       reading sharing a line with whatever happens to sit next to it. Here it
       takes the whole row: on a narrow screen it is the one number you opened
       the page for. On desktop it stays the same size as every other tile —
       there the colour alone is enough to pick it out of a single row. */
    .tiles { gap: 10px; }
    .tile.hero { grid-column: 1 / -1; }
    .tile .value { font-size: 22px; }
    .filters .seg button { padding: 5px 8px; }
    .chart-wrap { height: 240px; }
    #agp-wrap { height: 210px; }
    #insulin-wrap { height: 200px; }
    .tir-labels { justify-content: flex-start; }
  }

  footer { color: var(--text-muted); font-size: 12px; margin-top: 8px; }

  .tabs { margin-bottom: 16px; }

  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .field label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
  .field input[type=number], .field input[type=text], .field input[type=password], .field select {
    width: 100%; background: var(--page); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 9px; font-size: 14px; font-family: inherit;
  }
  .field.check { display: flex; align-items: center; gap: 8px; }
  .field.check label { margin: 0; font-size: 13px; color: var(--text-primary); }
  .card .hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

  /* --- ajustes: el rango como eje, no como cajas sueltas --- */
  .set-sec { margin-bottom: 18px; }
  .set-sec > h2 { font-size: 13px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px 2px; }
  .set-sec .card { margin-bottom: 10px; }
  .lede { font-size: 13px; color: var(--text-secondary); margin: -2px 0 14px; }

  .axis { margin: 6px 0 2px; }
  .axis .bar { position: relative; height: 26px; border-radius: 6px; overflow: hidden;
    background: var(--surface-1); display: flex; }
  .axis .seg { height: 100%; }
  .axis .seg.crit { background: var(--status-critical); }
  .axis .seg.warn { background: var(--status-warning); }
  .axis .seg.good { background: var(--status-good); }
  .axis .marks { position: relative; height: 56px; margin-top: 4px; }
  .axis .mark { position: absolute; transform: translateX(-50%); text-align: center;
    font-size: 11px; color: var(--text-muted); line-height: 1.25; white-space: nowrap; }
  .axis .mark b { display: block; font-size: 13px; font-weight: 600;
    color: var(--text-primary); font-variant-numeric: tabular-nums; }
    .axis .mark.low { top: 28px; }
  .axis .mark.low::before { height: 33px; top: -34px; }
  .axis .mark:first-child { transform: translateX(-25%); }
  .axis .mark:last-child { transform: translateX(-75%); }
  .axis .mark::before { content: ""; position: absolute; top: -6px; left: 50%;
    width: 1px; height: 5px; background: var(--border); }

  .stepper-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px; margin-top: 16px; }
  .stepper label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
  .stepper .box { display: flex; align-items: center; gap: 2px;
    background: #0e0e0e; border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
  .stepper .box input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary);
    font: 600 15px/1 system-ui; text-align: center; padding: 8px 0; font-variant-numeric: tabular-nums; }
  .stepper .box input::-webkit-outer-spin-button,
  .stepper .box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .stepper .box input[type=number] { -moz-appearance: textfield; }
  .stepper .box button { width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
    background: rgba(255,255,255,.06); color: var(--text-secondary); font-size: 16px; line-height: 1; }
  .stepper .box button:hover { background: rgba(255,255,255,.12); color: var(--text-primary); }

  .slider-field { margin-bottom: 14px; }
  .slider-field .top { display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
  .slider-field .top b { font-size: 13px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
  .slider-field input[type=range] { width: 100%; accent-color: var(--series-glucose); }

  /* notification chips: on = accent-filled, off = outlined, locked = dimmed on */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--text-secondary); font-size: 13px;
    cursor: pointer; user-select: none; transition: all 120ms ease; }
  .chip input { position: absolute; opacity: 0; pointer-events: none; }
  .chip:hover { border-color: var(--axis); }
  .chip:has(input:checked) { background: var(--series-glucose); border-color: var(--series-glucose);
    color: #fff; font-weight: 600; }
  .chip.locked { background: var(--series-glucose); border-color: var(--series-glucose);
    color: #fff; font-weight: 600; opacity: 0.65; cursor: default; }

  .seg-ctl { display: inline-flex; background: #0e0e0e; border: 1px solid var(--border);
    border-radius: 8px; padding: 2px; }
  .seg-ctl input { position: absolute; opacity: 0; pointer-events: none; }
  .seg-ctl label { font-size: 13px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
    color: var(--text-secondary); }
  .seg-ctl .on { background: rgba(255,255,255,.10); color: var(--text-primary); }

  .chan { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .chan .name { font-size: 14px; font-weight: 600; }
  .chan-body { margin-top: 12px; }
  .chan-body.off { opacity: .4; pointer-events: none; }
  .switch { position: relative; width: 42px; height: 24px; flex: none; }
  .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .switch .track { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.14);
    transition: background .15s; pointer-events: none; }
  .switch .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: transform .15s; pointer-events: none; }
  .switch input:checked ~ .track { background: var(--status-good); }
  .switch input:checked ~ .knob { transform: translateX(18px); }
  .switch input:focus-visible ~ .track { outline: 2px solid var(--series-glucose); outline-offset: 2px; }

  .sticky-save { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin: 4px 0 16px; border-radius: 10px;
    background: rgba(20,20,19,.92); backdrop-filter: blur(8px); border: 1px solid var(--border); }
  @media (prefers-reduced-motion: reduce) { .switch .knob, .switch .track { transition: none; } }

  .save-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
  .save-bar button, .btn {
    background: var(--series-glucose); color: #fff; border: none; border-radius: 8px;
    padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  .btn.secondary { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); font-weight: 400; }
  .save-status { font-size: 13px; color: var(--text-secondary); }
  .save-status.err { color: var(--status-critical); }

  .dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
  .dev { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
  .dev h3 { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .kv { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; }
  .kv span { color: var(--text-secondary); }
  .kv strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
  .badge { border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .badge.on  { background: color-mix(in srgb, var(--status-good) 18%, transparent); color: var(--status-good); }
  .badge.off { background: color-mix(in srgb, var(--status-critical) 18%, transparent); color: var(--status-critical); }
  .badge.warn{ background: color-mix(in srgb, var(--status-warning) 22%, transparent); color: var(--status-warning); }

  /* Los ajustes de una pantalla abren en modal: dentro de la tarjeta estiraban
     la fila entera de la grilla y dejaban a las vecinas en una columna flaca. */
  .dev .dopen { margin-top: 10px; width: 100%; padding: 7px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface-2, transparent);
    color: var(--text-primary); font: inherit; font-size: 12px; }
  .dev .dopen:hover { border-color: var(--text-muted); }
  .dev .dopen .badge { margin-left: 6px; }

  /* `margin: auto` is what centres a modal <dialog>; the reset at the top of
     this file zeroes it, so it has to be said again here. */
  dialog { width: min(460px, calc(100vw - 32px)); max-height: 85vh; margin: auto; padding: 0;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1);
    color: var(--text-primary); overflow: hidden; }
  dialog::backdrop { background: rgba(0,0,0,.6); }
  dialog header, dialog footer { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
  dialog header { border-bottom: 1px solid var(--border); }
  dialog header h2 { margin: 0; font-size: 16px; flex: 1; overflow-wrap: anywhere; }
  dialog header .x { border: 0; background: none; cursor: pointer; font-size: 22px;
    line-height: 1; padding: 0 4px; color: var(--text-muted); }
  dialog header .x:hover { color: var(--text-primary); }
  dialog .modal-body, #dev-settings-body { padding: 16px 18px; overflow-y: auto;
    max-height: calc(85vh - 128px); }
  dialog footer { border-top: 1px solid var(--border); justify-content: flex-end; }
  dialog footer .save-status { flex: 1; }
  dialog input[type=text], dialog input:not([type]) { width: 100%; box-sizing: border-box;
    padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--page); color: var(--text-primary); font-size: 15px; }

  /* Un aviso dentro de la tarjeta: algo anda pero no como se espera. */
  .warn-strip { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px;
    background: color-mix(in srgb, var(--status-warning) 14%, transparent);
    color: var(--text-primary); }

  /* Una barra al costado del campo dice, de un vistazo, cuales valores son de
     esta pantalla y cuales bajan del ajuste general. */
  .dfield { padding-left: 10px; border-left: 2px solid transparent; margin-bottom: 14px; }
  .dfield.own { border-left-color: var(--series-glucose); }
  .dfield .slider-field { margin-bottom: 2px; }
  .dtag { display: inline-block; font-size: 11px; color: var(--text-muted); }
  button.dtag.own { border: 0; background: none; padding: 0; cursor: pointer;
    color: var(--series-glucose); font: inherit; font-size: 11px; text-decoration: underline; }

  .log { font-size: 13px; }
  .log .row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); }
  .log .row:last-child { border-bottom: none; }
  .log time { color: var(--text-muted); white-space: nowrap; }
  .log .urgent { color: var(--status-critical); font-weight: 600; }
  .log .ack-badge { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--status-good); }

  /* La mano en el héroe: visible desde lejos, porque aparece justo cuando
     alguien está mirando el número rojo desde la otra punta de la casa. */
  #ack-btn { margin-top: 10px; padding: 10px 18px; border: 0; border-radius: 10px;
    cursor: pointer; font: inherit; font-size: 15px; font-weight: 600;
    background: rgba(255,255,255,.92); color: #b02020; }
  #ack-btn[disabled] { opacity: .6; cursor: default; }
  #ack-info { font-weight: 600; }
  .log .sent { margin-left: auto; color: var(--text-muted); white-space: nowrap; }
  .log .sent .x { border: 0; background: none; cursor: pointer; font-size: 16px;
    color: var(--text-muted); padding: 0 0 0 8px; line-height: 1; }
  .log .sent .x:hover { color: var(--status-critical); }

  /* Días desde el último cambio: una tira fina, no una fila de tarjetas —
     la de arriba ya está llena y una novena baldosa envuelve mal. */
  .ages { display: flex; gap: 16px; flex-wrap: wrap; margin: -4px 0 10px;
    font-size: 13px; color: var(--text-secondary); }

  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .chip.big { padding: 10px 16px; font-size: 14px; }
  .when-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .when-row .btn { padding: 5px 12px; font-size: 13px; }

  .help p {
    margin: 8px 0 2px; font-size: 14px; line-height: 1.55;
    color: var(--text-secondary); max-width: 72ch;
  }

  /* Login overlay. Covers everything until there is a session: the page
     behind it has no data to show anyway, and a half-rendered dashboard
     under a login box reads as a glitch. */
  #login { position: fixed; inset: 0; z-index: 100; display: none;
    place-items: center; background: var(--page); padding: 16px; }
  #login.show { display: grid; }
  #login form { width: 100%; max-width: 340px; background: var(--surface-1);
    border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
  #login h2 { margin: 0 0 4px; font-size: 20px; }
  #login .hint { margin-bottom: 18px; }
  #login label { display: block; font-size: 13px; color: var(--text-secondary);
    margin: 12px 0 4px; }
  #login input { width: 100%; box-sizing: border-box; padding: 10px 12px;
    border-radius: 9px; border: 1px solid var(--border); background: var(--page);
    color: var(--text-primary); font-size: 15px; }
  #login .pw { position: relative; }
  #login .pw input { padding-right: 44px; }
  #login .pw button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; margin: 0; padding: 0; display: grid; place-items: center;
    background: none; border: 0; border-radius: 8px; cursor: pointer;
    color: var(--text-muted); }
  #login .pw button:hover { color: var(--text-secondary); }
  /* One icon, two halves: whichever state is showing hides the other half. */
  #login .pw button .eye-off { display: none; }
  #login .pw button[aria-pressed="true"] .eye-open { display: none; }
  #login .pw button[aria-pressed="true"] .eye-off { display: inline; }
  #login button { width: 100%; margin-top: 18px; padding: 11px; border: 0;
    border-radius: 9px; background: var(--series-glucose); color: #fff; font-size: 15px;
    font-weight: 600; cursor: pointer; }
  #login button[disabled] { opacity: .6; cursor: default; }
  #login .err { display: none; margin-top: 14px; font-size: 14px; color: var(--status-critical); }
  #login .err.show { display: block; }
  #login .signup { margin-top: 14px; text-align: center; font-size: 14px; }
  #login .signup a { color: var(--series-glucose); text-decoration: none; }
  /* Outcome of a notification's "Estoy en eso" tap, shown instead of the
     form: the tap already did its job, a login would read as a failure. */
  #login #ack-card { width: 100%; max-width: 340px; background: var(--surface-1);
    border: 1px solid var(--border); border-radius: 14px; padding: 22px; text-align: center; }
  #login .ack-msg { font-size: 18px; font-weight: 600; margin: 12px 0 6px; }
  #login .ack-msg.stale { color: var(--text-secondary); }
  #login .ack-msg.error { color: var(--status-critical); }
  /* patient picker + admin link, only rendered when they apply */
  [hidden] { display: none !important; }
  header .who { display: flex; align-items: center; gap: 8px; flex-basis: 100%;
    margin-top: 6px; }
  header .who select { padding: 5px 8px; border-radius: 8px; font-size: 14px;
    background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }
  header .who a { font-size: 13px; color: var(--text-secondary); text-decoration: none; }
  header .who a:hover { color: var(--text-primary); }
  #connect-banner a { color: var(--series-glucose); }
  header .who .spacer { flex: 1; }
  #connect-banner { display: none; margin: 12px 0; padding: 12px 14px;
    border: 1px solid var(--border); border-left: 3px solid var(--status-warning);
    border-radius: 10px; background: var(--surface-1); font-size: 14px; }
  #connect-banner.show { display: block; }

  /* ------------------------------------------------------------- informe -- */
  #report-sheet { max-width: 800px; margin: 0 auto; background: var(--surface-1);
    border: 1px solid var(--border); border-radius: 12px; padding: 22px 26px; }
  .rep-head h2 { font-size: 19px; margin: 0 0 6px; }
  .rep-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
  .rep-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
  .rtile { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
  .rtile .label { font-size: 11px; color: var(--text-secondary); }
  .rtile .value { font-size: 18px; font-weight: 600; }
  .rtile small { font-size: 11px; font-weight: 400; color: var(--text-muted); }
  .rep-block { margin: 18px 0; }
  .rep-block h3 { font-size: 14px; margin: 0 0 8px; color: var(--text-secondary); }
  .rep-canvas { width: 760px; max-width: 100%; overflow-x: auto; }
  #rep-insulin { width: 100%; border-collapse: collapse; font-size: 13px; }
  #rep-insulin th, #rep-insulin td { text-align: right; padding: 4px 8px;
    border-bottom: 1px solid var(--border); }
  #rep-insulin th:first-child, #rep-insulin td:first-child { text-align: left; }
  #rep-insulin tfoot td { border-bottom: none; color: var(--text-secondary); }
  #rep-insulin .partial td { color: var(--text-muted); }
  #report-filters .spacer { flex: 1; }

  /* Impresión: solo la hoja del informe, con sus colores intactos. */
  @media print {
    header, nav.tabs, footer, .no-print, #login, #connect-banner,
    section:not(#tab-report) { display: none !important; }
    body { background: #fff; padding: 0; }
    #tab-report { display: block !important; }
    #report-sheet { max-width: none; border: none; border-radius: 0; padding: 0; }
    .tir-bar, .rtile { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .rep-block, .rep-tiles, #rep-insulin tr { break-inside: avoid; }
  }