/* Roles de color — instancia de referencia (light/dark), ver palette del sistema */
:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --page: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --other: #898781;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --other: #898781;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Chakra Petch, empaquetada: el manifest declara que no se carga código ni
   recursos remotos, así que la fuente viaja en la extensión. Solo el peso 600
   y el subconjunto latino — 11 KB. SIL Open Font License 1.1. */
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/chakra-petch-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

/* El logotipo: proporciones en `em` para que todo escale con el font-size.
   El símbolo mide 0.73 em de ancho por 1.16 de alto y baja 0.025 em sobre la
   línea base, igual que en el resto del material de marca. */
.brand-logo,
#brand {
  display: inline-flex;
  align-items: center;
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text-primary);
  white-space: nowrap;
  font-synthesis: none;
}

#brand { font-size: 17px; }

.brand-mark {
  width: 0.73em;
  height: 1.16em;
  margin: 0 0.015em 0 0.09em;
  flex: 0 0 auto;
  overflow: visible;
  translate: 0 0.025em;
}

#views {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 9px;
}
#views button {
  padding: 4px 11px;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
#views button:hover { color: var(--text-primary); }
#views button.active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  font-weight: 600;
}

/* --- navbar en dos grupos: origen (qué miras) y lente (cómo lo miras) --- */
#views { gap: 2px; }
.views-lenses {
  display: flex;
  gap: 2px;
  margin-left: 7px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.views-source { position: relative; display: flex; }
#views .views-caret { padding: 4px 5px; font-size: 13px; }
.views-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: -3px;
  z-index: 95; /* como #ctxmenu: por encima del velo de la guía */
  min-width: 200px;
  display: grid;
  gap: 2px;
  padding: 5px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
#views .views-menu button { text-align: left; }
#views .views-menu-sep { height: 1px; margin: 4px 8px; background: var(--border); }
.views-menu-row { display: flex; gap: 2px; }
.views-menu-row > button:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#views .views-menu .pin { flex: none; padding: 4px 7px; font-size: 11px; opacity: 0.35; filter: grayscale(1); }
#views .views-menu .pin:hover { opacity: 0.7; }
#views .views-menu .pin.active { opacity: 1; filter: none; }

#searchwrap { position: relative; flex: none; }

#results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 25;
  width: 390px;
  max-height: 62vh;
  overflow-y: auto;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
#results li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12.5px;
}
#results li.sel { background: color-mix(in srgb, var(--text-primary) 10%, transparent); }
#results .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* el icono de un comando ocupa el hueco del punto, sin ser un punto */
#results .dot.cmd { width: auto; min-width: 8px; background: none; font-size: 12px; text-align: center; }
#results .rt {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#results .kind {
  flex: none;
  font-size: 10.5px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
}

#search {
  width: 220px;
  flex: none;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}
#search:focus { border-color: var(--baseline); }

#legend {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
#legend::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.chip:hover { border-color: var(--baseline); color: var(--text-primary); }
.chip.active {
  color: var(--page);
  background: var(--text-primary);
  border-color: var(--text-primary);
}

/* --- visita guiada --- */
#tour {
  position: fixed;
  inset: 0;
  z-index: 90;
}
#tour .spot {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--page) 62%, transparent);
  transition: all 0.28s ease;
  pointer-events: none;
}
#tour .pop {
  position: fixed;
  max-width: 330px;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transition: left 0.28s ease, top 0.28s ease;
}
#tour .pop h3 {
  margin: 0 0 6px;
  font-size: 14px;
}
#tour .pop p {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
#tour .pop .actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
#tour .pop .count {
  margin-right: auto;
  font-size: 11px;
  color: var(--text-muted);
}

/* Paso de presentación: no señala nada de la interfaz, así que en vez de un
   globo junto a un objetivo es un panel ancho y centrado. Lo posiciona el
   mismo `placePopover` —sin objetivo, centra—, aquí solo cambia el tamaño. */
#tour .pop.hero {
  max-width: 460px;
  padding: 32px 34px 26px;
  border-radius: 18px;
  text-align: center;
}
#tour .pop.hero .pop-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
}
#tour .pop.hero .brand-logo { font-size: 34px; }
/* «by» + el wordmark de Zetesis. El logotipo trae su propio naranja de
   marca; se apaga con opacidad en vez de recolorearlo, para que no compita
   con el de graphmarks que tiene justo encima. */
#tour .pop.hero .pop-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
#tour .pop.hero .zetesis-mark {
  width: 76px;
  height: calc(76px * 1809 / 8394);
  opacity: 0.85;
}
#tour .pop.hero h3 {
  margin: 0 0 10px;
  font-size: 19px;
  letter-spacing: -0.01em;
}
#tour .pop.hero p {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.55;
}
/* El contador sobra en la portada: se enseña de la guía lo que dura, no en
   qué punto está antes de empezarla. */
#tour .pop.hero .count { display: none; }
#tour .pop.hero .actions { justify-content: center; }
#tour .pop button {
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
#tour .pop button:hover { color: var(--text-primary); border-color: var(--baseline); }
#tour .pop button.primary {
  color: var(--page);
  background: var(--text-primary);
  border-color: var(--text-primary);
}
.chip .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
}
.chip .n { color: var(--text-muted); }

#tabcount, #winchip, #sessions, #settings-btn {
  flex: none;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}
#tabcount:hover, #winchip:hover, #sessions:hover, #settings-btn:hover { color: var(--text-primary); border-color: var(--baseline); }
#tabcount.active, #winchip.active, #sessions.active {
  color: var(--page);
  background: var(--text-primary);
  border-color: var(--text-primary);
  font-weight: 600;
}
#tabcount.warn { color: #d03b3b; border-color: #d03b3b; background: var(--surface-1); }
#tabcount[hidden], #winchip[hidden] { display: none; }

#list-toggle {
  flex: none;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
#list-toggle:hover { color: var(--text-primary); border-color: var(--baseline); }

#stage {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
}
#graph { display: block; width: 100%; height: 100%; cursor: grab; }
#graph.dragging { cursor: grabbing; }
#graph.pointing { cursor: pointer; }

#tooltip {
  position: fixed;
  z-index: 20;
  max-width: 340px;
  padding: 8px 11px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  font-size: 12.5px;
  line-height: 1.4;
}
#tooltip .t { font-weight: 600; color: var(--text-primary); }
#tooltip .u {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
#tooltip .tags {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11.5px;
}

#empty[hidden] { display: none; }
#empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-secondary);
  text-align: center;
}
#empty code { color: var(--text-primary); }

#list-panel {
  position: fixed;
  top: 49px; right: 0; bottom: 0;
  z-index: 15;
  width: 360px;
  max-width: 90vw;
  overflow-y: auto;
  padding: 14px 18px 40px;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
}
#list-panel details { margin-bottom: 10px; }
#list-panel summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}
#list-panel summary::before { content: "▸"; color: var(--text-muted); font-size: 10px; }
#list-panel details[open] summary::before { content: "▾"; }
#list-panel summary .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#list-panel summary .n { color: var(--text-muted); font-weight: 400; }
#list-panel a {
  display: block;
  padding: 3px 0 3px 22px;
  font-size: 12.5px;
  color: var(--text-secondary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#list-panel a:hover { color: var(--text-primary); text-decoration: underline; }

#ctxmenu {
  position: fixed;
  z-index: 95; /* por encima del velo de la guía */
  min-width: 190px;
  padding: 5px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
#ctxmenu button {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text-primary);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#ctxmenu button:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
#ctxmenu button.danger { color: #d03b3b; }
#ctxmenu .sep { height: 1px; margin: 5px 8px; background: var(--border); }

#dlg {
  /* el reset * {margin:0} anula el margin:auto con el que el UA centra los dialog */
  margin: auto;
  min-width: 340px;
  max-width: 440px;
  padding: 20px 22px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}
#dlg::backdrop { background: rgba(0, 0, 0, 0.45); }
#dlg h3 { font-size: 15px; margin-bottom: 14px; }

/* Diálogos anchos: higiene (listas largas) y ajustes (maestro-detalle). */
#dlg.wide { min-width: min(600px, 92vw); max-width: 92vw; }
/* ancho y alto fijos: el modal no debe cambiar de tamaño al cambiar de sección */
#dlg.settings { width: min(680px, 94vw); min-width: 0; max-width: 94vw; padding: 0; }
#dlg.journey {
  width: min(1120px, 96vw);
  min-width: 0;
  max-width: 96vw;
  height: min(760px, 90vh);
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
}
#dlg .journey-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; }
#dlg .journey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px 14px;
  border-bottom: 1px solid var(--border);
}
#dlg .journey-heading { min-width: 0; }
#dlg .journey-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#dlg.journey .journey-heading h3 {
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dlg .journey-close {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--text-secondary);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 22px/1 system-ui, sans-serif;
  cursor: pointer;
}
#dlg .journey-close:hover { color: var(--text-primary); border-color: var(--border); background: var(--page); }
#dlg .journey-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
#dlg .journey-segmented {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 9px;
}
#dlg .journey-segmented legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#dlg .journey-segmented button {
  padding: 5px 11px;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#dlg .journey-segmented button.active { color: var(--text-primary); background: var(--surface-1); font-weight: 600; }
#dlg label.journey-range {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  white-space: nowrap;
}
#dlg .journey-range select { width: auto; min-width: 145px; margin: 0; padding: 5px 28px 5px 9px; }
#dlg .journey-stats { display: flex; gap: 13px; margin-left: auto; color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
#dlg .journey-content { min-height: 0; overflow: hidden; }
#dlg .journey-content > :not(.journey-state) { height: 100%; }
#dlg .journey-state {
  display: flex;
  height: 100%;
  min-height: 300px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 30px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
#dlg .journey-state strong { color: var(--text-primary); font-size: 15px; }
#dlg .journey-state.error { color: #d03b3b; }
#dlg .journey-sessions {
  float: left;
  width: 224px;
  height: 100%;
  padding: 13px 10px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
#dlg .journey-sessions-title { padding: 2px 9px 9px; color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
#dlg .journey-sessions button {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
#dlg .journey-sessions button:hover { color: var(--text-primary); background: var(--page); }
#dlg .journey-sessions button.active { color: var(--text-primary); background: var(--page); font-weight: 600; }
#dlg .journey-sessions small { flex: none; color: var(--text-muted); font-size: 10.5px; font-weight: 400; }
#dlg .journey-stage { height: 100%; margin-left: 224px; overflow: hidden; }
#dlg .journey-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
#dlg .journey-session-head strong { color: var(--text-secondary); font-size: 12px; }
#dlg .journey-graph-scroll { height: calc(100% - 42px); overflow: auto; background-color: var(--page); background-image: radial-gradient(var(--gridline) 0.7px, transparent 0.7px); background-size: 18px 18px; }
#dlg .journey-graph { display: block; min-width: 100%; min-height: 100%; }
#dlg .journey-edge { fill: none; stroke: var(--series-1); stroke-width: 1.6; opacity: 0.7; }
#dlg .journey-edge.unknown { stroke: var(--text-muted); stroke-dasharray: 5 5; opacity: 0.55; }
#dlg #journey-arrow path { fill: var(--series-1); }
#dlg .journey-node { outline: none; }
#dlg .journey-node.interactive { cursor: pointer; }
#dlg .journey-node circle { fill: var(--surface-1); stroke: var(--text-muted); stroke-width: 1.5; }
#dlg .journey-node.target circle { fill: color-mix(in srgb, var(--series-1) 18%, var(--surface-1)); stroke: var(--series-1); stroke-width: 2; }
#dlg .journey-node.unknown circle { fill: var(--page); stroke-dasharray: 4 3; }
#dlg .journey-node.interactive:hover circle, #dlg .journey-node.interactive:focus circle { stroke-width: 3; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.18)); }
#dlg .journey-node text { pointer-events: none; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#dlg .journey-node-symbol { fill: var(--text-secondary); font-size: 13px; }
#dlg .journey-node.target .journey-node-symbol { fill: var(--series-1); }
#dlg .journey-node-title { fill: var(--text-primary); font-size: 10.5px; font-weight: 600; }
#dlg .journey-node-url, #dlg .journey-node-time { fill: var(--text-muted); font-size: 9.5px; }
#dlg .journey-footer { padding: 9px 20px; color: var(--text-muted); border-top: 1px solid var(--border); font-size: 10.5px; }

@media (max-width: 720px) {
  #dlg.journey { width: 98vw; max-width: 98vw; height: 94vh; max-height: 94vh; }
  #dlg .journey-toolbar { flex-wrap: wrap; gap: 8px; }
  #dlg .journey-stats { width: 100%; margin-left: 0; }
  #dlg .journey-sessions { float: none; width: 100%; height: 96px; display: flex; gap: 4px; border-right: 0; border-bottom: 1px solid var(--border); }
  #dlg .journey-sessions-title { display: none; }
  #dlg .journey-sessions button { min-width: 180px; }
  #dlg .journey-stage { height: calc(100% - 96px); margin-left: 0; }
  #dlg .journey-session-head span { display: none; }
}
#dlg.settings h3 {
  margin: 0;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--border);
}
#dlg .master-detail { display: flex; align-items: stretch; height: min(58vh, 430px); }
#dlg .md-nav {
  flex: none;
  width: 196px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border-right: 1px solid var(--border);
}
#dlg .md-tab {
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
#dlg .md-tab:hover { color: var(--text-primary); background: var(--page); }
#dlg .md-tab.active { color: var(--text-primary); background: var(--page); font-weight: 600; }
#dlg .md-pane {
  flex: 1;
  min-width: 0;
  padding: 18px 22px 20px;
  overflow-y: auto;
}
#dlg .md-section { margin-bottom: 26px; scroll-margin-top: 2px; }
#dlg .md-section:last-child { margin-bottom: 0; }
#dlg .md-pane h4 { font-size: 13.5px; margin-bottom: 3px; }
#dlg .md-pane .pane-hint { margin-bottom: 16px; font-size: 12px; color: var(--text-muted); }
#dlg.settings .actions {
  margin: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--border);
}
#dlg label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
#dlg input, #dlg select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}
#dlg input:focus, #dlg select:focus { border-color: var(--baseline); }
#dlg .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: -4px 0 12px;
  max-height: 110px;
  overflow-y: auto;
}
#dlg .tagcloud button {
  padding: 3px 9px;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
#dlg .tagcloud button:hover { color: var(--text-primary); border-color: var(--baseline); }

#dlg .opt-group { margin-bottom: 4px; }
#dlg .opt-head {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
#dlg .opt {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
#dlg .opt:hover { border-color: var(--baseline); }
#dlg .opt:has(input:checked) { border-color: var(--baseline); background: var(--page); }
#dlg .opt input[type='radio'], #dlg .opt input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin: 2px 0 0;
  accent-color: var(--text-primary);
}
#dlg .opt-title { font-size: 13px; color: var(--text-primary); }
#dlg .opt-desc { margin-top: 2px; font-size: 12px; color: var(--text-muted); }

#dlg .kbd-list { margin-bottom: 8px; font-size: 12px; }
#dlg .kbd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  color: var(--text-secondary);
}
#dlg .kbd {
  padding: 2px 7px;
  font-size: 11px;
  color: var(--text-primary);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: nowrap;
}
#dlg .kbd.unset { color: var(--text-muted); background: none; border-style: dashed; }

#dlg .hyg-list {
  max-height: 140px;
  overflow-y: auto;
  margin-bottom: 8px;
  font-size: 12px;
}
#dlg .hyg-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  color: var(--text-secondary);
}
#dlg .hyg-row .hyg-path, #dlg .hyg-row.hyg-path { color: var(--text-muted); white-space: nowrap; }
#dlg .opt-btn {
  padding: 5px 12px;
  margin-bottom: 4px;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
#dlg .opt-btn:hover { color: var(--text-primary); border-color: var(--baseline); }
#dlg .opt-btn.danger { color: #d03b3b; }
#dlg .opt-btn.danger:hover { border-color: #d03b3b; }

#dlg .account-card { display: grid; gap: 12px; }
/* Derechos sobre los datos: separados del bloque de sesión por una línea, para
   que borrar la cuenta no quede pegado al botón de cerrar sesión. */
#dlg .account-telemetry { padding-top: 12px; border-top: 1px solid var(--line, #2a2a35); }
#dlg .account-rights { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line, #2a2a35); }
#dlg .actions-inline { display: flex; flex-wrap: wrap; gap: 8px; }
#dlg .account-identity { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
#dlg .account-identity span { color: var(--text-muted); font-size: 12px; }
#dlg .account-error { color: #d03b3b; font-size: 12px; }

#dlg .note {
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  max-height: 50vh;
  overflow-y: auto;
}
#dlg .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
#dlg .actions button {
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
#dlg .actions button:hover { color: var(--text-primary); border-color: var(--baseline); }
#dlg .actions .primary {
  color: var(--page);
  background: var(--text-primary);
  border-color: var(--text-primary);
}
#dlg .actions .primary:hover { color: var(--page); opacity: 0.85; }
#dlg .actions .primary.danger { background: #d03b3b; border-color: #d03b3b; color: #fff; }

#toast {
  position: fixed;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
#toast[hidden] { display: none; }
#toast button {
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: none;
  border: 1px solid var(--baseline);
  border-radius: 6px;
  cursor: pointer;
}
#toast button:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); }

#hint {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
  white-space: nowrap;
}