:root {
    --bg: #f6f7f9; --panel: #ffffff; --ink: #1b1f24; --muted: #5b6573; --line: #e3e6ea;
    --accent: #0b6bcb; --accent-ink: #ffffff; --warn-bg: #fff6e0; --warn-ink: #7a4b00;
    --note-bg: #eaf3fd; --note-ink: #0b4a8b; --err-bg: #fdecec; --err-ink: #8b1a1a;
    --pos: #f1f5fb; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0f1216; --panel: #171b21; --ink: #e6e9ed; --muted: #9aa4b1; --line: #2a3039;
      --accent: #4c9dff; --accent-ink: #0b1220; --warn-bg: #3a2c0c; --warn-ink: #f3cf7a;
      --note-bg: #10273f; --note-ink: #a9cdf5; --err-bg: #3a1515; --err-ink: #f2b0b0; --pos: #1b222c;
    }
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  main { max-width: 1600px; margin: 0 auto; padding: 24px 16px 64px; }
  h1 { font-size: 22px; margin: 0 0 4px; }
  .sub { color: var(--muted); margin: 0 0 20px; }
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
  label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
  textarea, input { width: 100%; font: 13px/1.45 var(--mono); color: var(--ink); background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
  textarea { min-height: 110px; resize: vertical; }
  .row { display: flex; gap: 12px; align-items: end; margin-top: 12px; flex-wrap: wrap; }
  .row > div { flex: 1 1 220px; }
  button { font: 600 14px system-ui, sans-serif; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer;
    background: var(--accent); color: var(--accent-ink); }
  button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
  button:disabled { opacity: .6; cursor: wait; }
  .examples { margin-top: 10px; font-size: 13px; color: var(--muted); }
  .examples a { color: var(--accent); cursor: pointer; margin-right: 10px; }
  .result { margin-top: 20px; }
  .head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-bottom: 12px; }
  .head .msg { font: 700 18px var(--mono); }
  .chip { font-size: 12px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
  .box { border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 13px; }
  .warn { background: var(--warn-bg); color: var(--warn-ink); }
  .note { background: var(--note-bg); color: var(--note-ink); }
  .err { background: var(--err-bg); color: var(--err-ink); }
  .box ul { margin: 4px 0 0; padding-left: 18px; }
  .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
  table { border-collapse: collapse; width: 100%; font-size: 13px; }
  th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
  th { background: var(--bg); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; }
  td.name { font-weight: 600; white-space: nowrap; }
  td.val { font-family: var(--mono); word-break: break-all; min-width: 120px; }
  td.val .empty { color: var(--muted); font-style: italic; font-family: system-ui, sans-serif; }
  td.meaning { color: var(--muted); max-width: 520px; }
  td.dec { font-family: var(--mono); font-size: 12px; }
  tr.pos td { background: var(--pos); }
  tr.group td { background: var(--bg); font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; }
  .meaning details summary { cursor: pointer; color: var(--accent); font-size: 12px; }
  .foot { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
  .muted { color: var(--muted); font-size: 13px; }
  @media (max-width: 640px) { td.meaning { min-width: 220px; } h1 { font-size: 19px; } }
  /* tabla | barra | mapa, redimensionable */
  .split { display: grid; grid-template-columns: var(--left, 58%) 10px minmax(0, 1fr); height: min(72vh, 820px); margin-top: 12px; }
  .split .pane { min-width: 0; min-height: 0; }
  .split .left { overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
  .split .left .tablewrap { border: 0; border-radius: 0; overflow: visible; }
  .split .right { display: flex; flex-direction: column; }
  .split .map { flex: 1; height: auto; margin: 0; }
  .split .map-cap { margin: 6px 0 0; }
  .gutter { cursor: col-resize; display: flex; align-items: center; justify-content: center; touch-action: none; outline: none; }
  .gutter::before { content: ""; width: 4px; height: 44px; border-radius: 4px; background: var(--line); transition: background .15s; }
  .gutter:hover::before, .gutter:focus-visible::before, .gutter.drag::before { background: var(--accent); }
  .split.dragging { user-select: none; cursor: col-resize; }
  .split.dragging .map { pointer-events: none; }
  @media (max-width: 860px) {
    .split { grid-template-columns: 1fr; height: auto; }
    .gutter { display: none; }
    .split .right { order: -1; margin-bottom: 12px; }
    .split .map { height: 300px; flex: none; }
    .split .left { overflow: visible; }
  }
  .map { height: 340px; border-radius: 8px; border: 1px solid var(--line); margin: 12px 0; z-index: 0; }
  .map-cap { font-size: 12px; color: var(--muted); margin: -6px 0 10px; }
  .leaflet-popup-content { font: 12px/1.4 system-ui, sans-serif; }
  .ack { background: var(--pos); border: 1px solid var(--line); }
  .ackline { display: flex; gap: 10px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
  .ackline code { font: 600 15px var(--mono); padding: 4px 8px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); }
  button.small { padding: 4px 10px; font-size: 12px; }
  .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg);
    padding: 8px 14px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; }
  .toast.on { opacity: .92; }

  /* vista de solo lectura */
  .frame-ro { font: 13px/1.5 var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
    padding: 10px 12px; white-space: pre-wrap; word-break: break-all; margin: 0; }
  .ro-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
  .ro-head label { margin: 0; }