:root {
  color-scheme: light dark;
  background-color: transparent !important;

  /* Agent-facing contract; keep in sync with SKILL.md. */
  --background: var(
    --main-surface-primary,
    light-dark(rgb(255 255 255), rgb(24 24 24))
  );
  --foreground: light-dark(rgb(26 28 31), rgb(255 255 255));
  --card: color-mix(in oklab, var(--foreground) 5%, transparent);
  --card-foreground: var(--foreground);
  --popover: light-dark(rgb(255 255 255), rgb(45 45 45));
  --popover-foreground: var(--foreground);
  --primary: light-dark(rgb(51 156 255), rgb(131 195 255));
  --primary-foreground: light-dark(rgb(255 255 255), rgb(13 13 13));
  --secondary: light-dark(rgb(255 255 255 / 96%), rgb(54 54 54 / 96%));
  --secondary-foreground: var(--foreground);
  --muted: color-mix(in srgb, var(--foreground) 10%, transparent);
  /*
   * CONTRASTE DEL TEXTO APAGADO.
   *
   * En claro estaba al 49,4%, que sobre blanco da 3,24:1. El minimo de la
   * WCAG 2.2 para texto de este tamaño (11,5-12 px) es 4,5:1, asi que no
   * llegaba: la nota de fuentes al pie —el texto mas largo del simulador—,
   * las etiquetas de hogares, niñez y mayores, y la escala del control
   * quedaban por debajo.
   *
   * Al 64% da 5,13:1 sobre blanco y 4,92:1 sobre el gris de la tarjeta
   * metrica, que es el fondo real de las etiquetas del panel. Sigue leyendose
   * como texto secundario.
   *
   * El valor oscuro ya cumplia (4,63:1 sobre rgb(45,45,45)) y queda igual.
   */
  --muted-foreground: light-dark(
    rgb(26 28 31 / 64%),
    rgb(255 255 255 / 49.8%)
  );
  --accent: light-dark(rgb(229 242 255), rgb(13 39 63));
  --accent-foreground: var(--primary);
  --destructive: light-dark(rgb(226 85 7), rgb(255 133 73));
  --border: light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8.2%));
  --input: light-dark(
    rgb(26 28 31 / 11.8%),
    color-mix(in oklab, rgb(0 0 0) 10%, transparent)
  );
  --ring: light-dark(rgb(51 156 255), rgb(131 195 255 / 76%));
  --font-size-base: 14px;
  --red: light-dark(rgb(186 38 35), rgb(250 66 62));
  --green: light-dark(rgb(0 162 64), rgb(64 201 119));

  /* Internal implementation variables; not part of the agent contract. */
  --font-sans: -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;
  --font-size-normal: max(11px, var(--font-size-base));
  --font-size-tooltip: calc(var(--font-size-base) - 1px);
  --font-size-small: max(11px, calc(var(--font-size-base) - 2px));
  --font-size-h1: calc(var(--font-size-normal) * 1.7142857143);
  --font-size-h2: calc(var(--font-size-normal) * 1.4285714286);
  --font-size-h3: calc(var(--font-size-normal) * 1.2857142857);
  --font-weight-normal: 430;
  --font-weight-medium: 500;
  --line-height-normal: calc(var(--font-size-normal) * 1.5);
  --line-height-tooltip: calc(var(--font-size-tooltip) * 1.4285714286);
  --line-height-small: calc(var(--font-size-small) + 4px);
  --radius: 10px;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-2xl: calc(var(--radius) * 1.6);
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px -1px rgb(0 0 0 / 8%);
  --checkmark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M12.8961 3.64101C13.1297 3.41418 13.4984 3.37523 13.7779 3.56581C14.0571 3.75635 14.1554 4.11331 14.0299 4.41347L13.9615 4.53847L7.71151 13.7045C7.59411 13.8767 7.4063 13.9877 7.19881 14.0072C6.99136 14.0267 6.78564 13.9533 6.63826 13.806L2.88826 10.056L2.79842 9.9457C2.6192 9.67407 2.64927 9.30496 2.88826 9.06581C3.12738 8.82669 3.49647 8.79676 3.76815 8.97597L3.8785 9.06581L7.03084 12.2182L12.8053 3.74941L12.8961 3.64101Z'/%3E%3C/svg%3E");

  /* Legacy aliases; not part of the current agent contract. */
  --viz-bg: transparent;
  --viz-panel: var(--card);
  --viz-border: var(--border);
  --viz-text: var(--foreground);
  --viz-muted: var(--muted-foreground);
  --viz-accent: var(--primary);
  --viz-accent-text: var(--primary-foreground);
  --viz-accent-bg: var(--accent);
  --viz-font-size: var(--font-size-base);
  --viz-warning: var(--destructive);
  --color-background-primary: var(--background);
  --color-text-primary: var(--foreground);
  --color-border-secondary: var(--border);
}

:root[data-visualize-standalone] {
  background-color: var(--background) !important;
}

/* Generic mobile code-block hosts provide light/dark mode but no series palette.
   AppBlock hosts set all six variables themselves. */
:root:not([data-app-block-surface]) {
  --viz-series-1: var(--primary);
  --viz-series-2: light-dark(#f3883b, #f59a56);
  --viz-series-3: light-dark(#5dc977, #74d58b);
  --viz-series-4: light-dark(#eb77b1, #f08fc0);
  --viz-series-5: light-dark(#9b79ec, #aa91ef);
  --viz-series-6: light-dark(#3ab9b1, #5acbc2);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html > body {
  margin: 0;
  padding: 5px;
  color: var(--foreground);
  background: transparent !important;
  font-family: var(--font-sans);
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

:root:not([data-app-block-surface]) > body {
  padding: 12px;
}

a {
  color: color-mix(in srgb, var(--viz-accent) 80%, var(--viz-text) 20%);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  text-underline-offset: 2px;
}

a:is(:hover, :focus-visible) {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 0.5px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-block: 0;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
}

h3,
h4,
h5,
h6 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

b,
strong,
th {
  font-weight: var(--font-weight-medium);
}

code:not(pre code) {
  display: inline;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  word-break: break-word;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.table {
  width: 100%;
  border-collapse: collapse;
  color: var(--foreground);
  font: inherit;
  text-align: start;
}

.table :is(th, td) {
  padding-block: 10px;
  padding-inline: 0 24px;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}

.table-responsive > .table :is(th, td) {
  overflow-wrap: break-word;
}

.table :is(th, td):last-child {
  padding-inline-end: 0;
}

.table :is(caption, thead th) {
  font-weight: 600;
}

.table thead th {
  padding-block: 8px;
  border-bottom-color: color-mix(in srgb, var(--foreground) 16%, transparent);
}

.table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

.table.table-sm :is(th, td) {
  padding-block: 6px;
}

.table.table-sm :is(th, td):not(:last-child) {
  padding-inline-end: 16px;
}

.table :is(.text-end, [align="right"]) {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.table :is(.text-center, [align="center"]) {
  text-align: center;
}

.table .text-nowrap {
  white-space: nowrap;
}

#widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: transparent !important;
}

.card {
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  overflow-wrap: break-word;
  border-radius: var(--radius-2xl);
  color: var(--card-foreground);
  background: var(--card);
}

#widget > :not(.card) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tooltip {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(
    20rem,
    var(--tooltip-available-width, calc(100vw - 10px)),
    calc(100vw - 10px)
  );
  max-height: min(
    var(--tooltip-available-height, calc(100vh - 10px)),
    calc(100vh - 10px)
  );
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--popover-foreground);
  background: var(--popover);
  box-shadow: none;
  font-size: var(--font-size-tooltip);
  line-height: var(--line-height-tooltip);
  overflow-wrap: break-word;
  white-space: normal;
  pointer-events: none;
  user-select: none;
}

/* The bundled tooltip runtime owns [data-tooltip]. AppBlock's CSS-only
   pseudo-tooltip can widen dense grids even while hidden. */
main [data-tooltip]::after {
  content: none;
}

.viz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(180px, 24%), 1fr));
  gap: 10px;
}

.viz-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.viz-stat-value {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
}

.viz-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.viz-badge {
  padding: 3px 8px;
  border-radius: var(--radius-full);
  color: var(--accent-foreground);
  background: var(--accent);
  font-weight: var(--font-weight-medium);
}

small,
.text-small,
.viz-badge {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.text-muted {
  color: var(--muted-foreground);
}

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

.viz-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.viz-controls > .form-label {
  display: grid;
  min-width: min(100%, 260px);
  flex: 1 1 280px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  margin-bottom: 0;
}

.viz-controls > .form-label > :is(.form-control, .form-range, .form-select) {
  grid-column: 1 / -1;
}

.btn,
.form-check-input,
.form-control,
.form-range,
.form-select {
  font: inherit;
}

.btn {
  appearance: button;
  display: inline-flex;
  inline-size: fit-content;
  max-inline-size: 100%;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0 8px;
  -webkit-app-region: no-drag;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  color: var(--secondary-foreground);
  background: var(--secondary);
  cursor: var(--cursor-interaction, pointer);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.btn:is(.btn-block, .viz-tile) {
  inline-size: 100%;
}

.btn.viz-tile {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

a.btn {
  cursor: pointer;
  text-decoration: none;
}

.btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));
}

.btn-primary {
  border-color: transparent;
  color: var(--interactive-label-primary-default, var(--primary-foreground));
  background: var(--interactive-bg-primary-default, var(--foreground));
  background-clip: padding-box;
}

.btn-primary .text-muted {
  color: color-mix(
    in srgb,
    var(--interactive-label-primary-default, var(--primary-foreground)) 50%,
    transparent
  );
}

.btn-primary:not(:disabled):hover {
  background: color-mix(in srgb, var(--foreground) 80%, transparent);
  background-clip: padding-box;
}

.btn-ghost {
  border-color: transparent;
  color: var(--muted-foreground);
  background: transparent;
}

.btn-ghost:not(:disabled):hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

[data-lucide] {
  stroke-width: 1.6;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  color: var(--foreground);
}

.form-control {
  display: block;
  width: 100%;
  min-height: 28px;
  padding: 0 8px;
  outline: none;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  color: var(--foreground);
  background: var(--secondary);
}

.form-control::placeholder {
  color: var(--muted-foreground);
}

.form-control[type="file"] {
  padding: 0;
  overflow: hidden;
  cursor: var(--cursor-interaction, pointer);
}

.form-control[type="file"]::file-selector-button {
  min-height: 26px;
  margin-right: 8px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid var(--input);
  color: var(--secondary-foreground);
  background: var(--secondary);
  cursor: inherit;
  font: inherit;
}

.form-control[type="file"]:not(:disabled):hover::file-selector-button {
  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));
}

.form-control-color[type="color"] {
  width: 40px;
  height: 28px;
  padding: 3px;
  cursor: var(--cursor-interaction, pointer);
}

.form-control-color[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.form-control-color[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--radius-lg) - 4px);
}

textarea.form-control {
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
  resize: vertical;
}

.form-control:focus-visible {
  border-color: var(--ring);
  box-shadow: inset 0 0 0 1px var(--ring);
}

.form-control:disabled,
.form-select:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.form-select {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0 32px 0 8px;
  outline: none;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  color: var(--foreground);
  background-color: var(--secondary);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 10px) 50%;
  background-repeat: no-repeat;
  background-size: 4px 4px;
  cursor: var(--cursor-interaction, default);
}

.form-select:not(:disabled):hover {
  background-color: color-mix(in srgb, var(--foreground) 6%, var(--secondary));
}

.form-select:focus-visible {
  border-color: var(--ring);
  box-shadow: inset 0 0 0 1px var(--ring);
}

.form-check {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 6px;
}

.form-check-input {
  appearance: none;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid var(--input);
  color: var(--primary-foreground);
  background-color: transparent;
  cursor: var(--cursor-interaction, default);
  transition:
    background-color 150ms,
    border-color 150ms,
    box-shadow 150ms;
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"] {
  border-color: var(--input);
  border-radius: var(--radius-sm);
  background-color: var(--secondary);
  box-shadow: var(--shadow-sm);
}

.form-check:not(.form-switch)
  .form-check-input:not(:disabled):not(:checked):hover {
  background-color: var(--card);
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
  border-color: var(--primary);
  background-color: var(--primary);
}

.form-check:not(.form-switch)
  .form-check-input[type="checkbox"]:checked::before {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--primary-foreground);
  content: "";
  mask: var(--checkmark-image) center / 12px 12px no-repeat;
}

.form-check-input[type="radio"] {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
}

.form-check-input[type="radio"]:checked {
  border: 2px solid var(--primary);
  background:
    radial-gradient(circle, var(--primary-foreground) 0 2.5px, transparent 3px),
    var(--primary);
}

.form-check:not(.form-switch) .form-check-input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.form-check:not(.form-switch) .form-check-input:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.form-check:not(.form-switch) .form-check-input:disabled + .form-check-label {
  cursor: not-allowed;
}

.form-switch .form-check-input:disabled,
.form-switch .form-check-input:disabled + .form-check-label {
  cursor: not-allowed;
  opacity: 0.6;
}

.form-check-label {
  color: var(--foreground);
  cursor: var(--cursor-interaction, default);
}

.form-switch .form-check-input {
  position: relative;
  width: 32px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--muted);
  box-shadow: none;
  transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1);
}

.form-switch .form-check-input::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid light-dark(var(--primary-foreground), var(--foreground));
  border-radius: var(--radius-full);
  background: light-dark(var(--primary-foreground), var(--foreground));
  box-shadow: var(--shadow-sm);
  content: "";
  transform: translate(2px, -50%);
  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
}

.form-switch .form-check-input:checked {
  background: var(--primary);
}

.form-switch .form-check-input:checked::before {
  transform: translate(14px, -50%);
}

.form-switch .form-check-input:focus-visible {
  box-shadow: 0 0 0 2px var(--ring);
}

.form-range {
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  flex: 1;
  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  accent-color: var(--primary);
  background: linear-gradient(
      color-mix(in srgb, var(--foreground) 7%, transparent),
      color-mix(in srgb, var(--foreground) 7%, transparent)
    )
    center / 100% 2px no-repeat;
}

.form-range::-webkit-slider-runnable-track {
  height: 28px;
  background: transparent;
}

.form-range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: light-dark(var(--primary-foreground), var(--foreground));
}

.form-range:focus-visible::-webkit-slider-thumb {
  border-color: var(--ring);
  box-shadow: inset 0 0 0 1px var(--ring);
}

.form-range::-moz-range-track {
  height: 28px;
  background: transparent;
}

.form-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: light-dark(var(--primary-foreground), var(--foreground));
}

.form-range:focus-visible::-moz-range-thumb {
  border-color: var(--ring);
  box-shadow: inset 0 0 0 1px var(--ring);
}

.form-range:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.btn:not(.btn-primary, .viz-tile):is(
    [aria-pressed="true"],
    [aria-selected="true"],
    .is-selected
  ) {
  border-color: var(--primary);
  color: var(--primary-foreground);
  background: var(--primary);
}

.btn.viz-tile:is([aria-pressed="true"], [aria-selected="true"], .is-selected) {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

svg {
  display: block;
  max-width: 100%;
  height: auto;
}

#widget > svg {
  width: 100%;
}

.text-warning,
.text-destructive {
  color: var(--destructive);
}

#simulador-ciudad {
      color: var(--foreground);
      background: transparent;
      --flood-color: rgb(74 197 239);
      --defense-color: rgb(24 156 94);
    }
    #simulador-ciudad .sim-controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: end;
      margin-bottom: 14px;
    }
    #simulador-ciudad .range-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: baseline;
      margin-bottom: 6px;
    }
    #simulador-ciudad .range-value {
      font-variant-numeric: tabular-nums;
      font-weight: 500;
    }
    #simulador-ciudad .sim-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(220px, .75fr);
      gap: 16px;
      align-items: start;
    }
    /*
     * ════════════════════════════════════════════════════════════════════
     * QUIEN SE QUEDA CON EL GESTO DE UN DEDO
     *
     * Mover el mapa y desplazar la pagina compiten por el mismo gesto. Antes
     * el mapa se quedaba SIEMPRE con el (`touch-action: none`) y devolvia el
     * desplazamiento a la pagina por `postMessage`, simulandolo desde
     * JavaScript. Funcionaba, pero sin inercia: al levantar el dedo el scroll
     * frenaba en seco, asi que habia que dar muchos manotazos para pasar el
     * mapa y se sentia como quedarse trabado adentro.
     *
     * Ahora el reparto es por estado, y lo resuelve el navegador:
     *
     * - `pan-y` (por defecto): un dedo desplaza la pagina, nativo y con
     *   envion. Es lo que pasa a escala 1, que es como se ve el mapa al
     *   entrar y donde ademas no hay nada fuera de cuadro para arrastrar.
     * - `none` (con la clase): un dedo mueve el mapa. Se activa cuando el
     *   mapa esta acercado —recien ahi mover tiene sentido— o en pantalla
     *   completa, donde no hay pagina detras con la cual competir.
     *
     * Dos dedos son siempre del mapa, en los dos casos: `pan-y` ya le saca al
     * navegador el pellizco para hacer zoom, y el `touchmove` del simulador
     * cancela el resto.
     * ════════════════════════════════════════════════════════════════════
     */
    #simulador-ciudad .map-stage {
      position: relative;
      overflow: hidden;
      background: transparent;
      user-select: none;
      touch-action: pan-y;
      cursor: grab;
    }
    #simulador-ciudad .map-stage.toma-el-dedo {
      touch-action: none;
    }
    #simulador-ciudad .map-stage.is-dragging { cursor: grabbing; }
    #simulador-ciudad .map-stage.is-selecting-location { cursor: crosshair; }
    #simulador-ciudad .map-viewport,
    #simulador-ciudad .map-transform {
      position: relative;
      width: 100%;
    }
    /*
     * ════════════════════════════════════════════════════════════════════
     * POR QUE `will-change` NO PUEDE QUEDAR FIJO
     *
     * `will-change: transform` promueve esta caja a una capa propia y el
     * navegador la RASTERIZA UNA VEZ, a la escala que tenia en ese momento.
     * Despues, al acercar, escala ese mapa de bits ya dibujado en vez de
     * volver a dibujarlo: la ortofoto y los nombres de las calles se ven
     * pixelados aunque las imagenes tengan resolucion de sobra.
     *
     * El sintoma delataba la causa: si se encendian las calles DESPUES de
     * acercar se veia nitido, porque agregar un hijo invalida la capa y obliga
     * a rasterizar de nuevo, ahora a la escala correcta.
     *
     * Asi que la promocion dura lo que dura el gesto: mientras se arrastra o
     * se pellizca conviene —esa es la parte que tiene que ir fluida— y al
     * soltar se saca, y el navegador vuelve a dibujar a la escala final.
     * Medido: sin la capa fija, el detalle fino sube un 23%.
     * ════════════════════════════════════════════════════════════════════
     */
    #simulador-ciudad .map-transform {
      transform-origin: 0 0;
    }
    #simulador-ciudad .map-transform.gesto-en-curso {
      will-change: transform;
    }
    #simulador-ciudad .map-transform img {
      display: block;
      width: 100%;
      height: auto;
    }
    #simulador-ciudad .flood-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    #simulador-ciudad .street-layer,
    #simulador-ciudad .urban-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    /*
     * COLOR DE LA RED VIAL.
     *
     * `calles-oficiales.webp` viene con las lineas en cian rgb(96,220,255),
     * que es casi el mismo tono que el agua rgb(74,197,239): con la capa
     * encendida sobre una zona inundada costaba separar calle de creciente.
     *
     * Se recolorean con un filtro en vez de regenerar la imagen: el cian tiene
     * un unico tono y el blanco de los realces no tiene saturacion, asi que
     * `hue-rotate` lo deja intacto y el antialiasing se conserva. Cambiar el
     * color es cambiar estos dos numeros, sin volver a exportar nada.
     *
     * Resultado sobre la linea: rgb(255,124,235).
     */
    #simulador-ciudad .street-layer {
      filter: hue-rotate(140deg) saturate(2);
    }
    #simulador-ciudad .trace-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    #simulador-ciudad :is(.trace-halo, .south-defense-halo) {
      fill: none;
      stroke: var(--background);
      stroke-width: 8;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: .78;
      vector-effect: non-scaling-stroke;
    }
    #simulador-ciudad :is(.trace-main, .south-defense-main) {
      fill: none;
      stroke: var(--defense-color);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
    #simulador-ciudad .trace-overlay[data-active="false"] .trace-main {
      stroke-dasharray: 10 8;
      opacity: .72;
    }
    #simulador-ciudad .trace-overlay[data-active="false"] :is(.trace-label-leader, .trace-label-arrow, .trace-label-box) {
      opacity: .72;
    }
    #simulador-ciudad .trace-label-leader {
      fill: none;
      stroke: var(--defense-color);
      stroke-width: 3;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }
    #simulador-ciudad .trace-label-arrow {
      fill: var(--defense-color);
    }
    #simulador-ciudad .trace-label-box {
      fill: var(--popover);
      stroke: var(--defense-color);
      stroke-width: 2;
      opacity: .94;
      vector-effect: non-scaling-stroke;
    }
    #simulador-ciudad .trace-label-text {
      fill: var(--popover-foreground);
      font-family: system-ui, sans-serif;
      font-size: 22px;
      font-weight: 500;
    }
    #simulador-ciudad .terrain-stage {
      position: relative;
      width: 100%;
      min-height: 380px;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: var(--muted);
    }
    /* El relieve 3D sigue la misma regla que el mapa 2D. */
    #simulador-ciudad .terrain-stage canvas {
      display: block;
      width: 100%;
      height: 100%;
      touch-action: pan-y;
    }
    #simulador-ciudad .map-stage.toma-el-dedo .terrain-stage canvas {
      touch-action: none;
    }
    #simulador-ciudad .terrain-hint {
      position: absolute;
      right: 10px;
      bottom: 10px;
      pointer-events: none;
    }
    /*
     * La pista de gestos habla de dedos, así que sólo tiene sentido donde hay
     * dedos. En una computadora con mouse aparecía igual.
     */
    @media (hover: hover) and (pointer: fine) {
      #simulador-ciudad .terrain-hint { display: none; }
    }
    /*
     * El cartel de exageración vertical NO se oculta en ningún tamaño ni en
     * ningún dispositivo: es la aclaración que evita que el relieve 3D se lea
     * como si fuera la topografía real de Concordia.
     */
    #simulador-ciudad .terrain-scale {
      position: absolute;
      left: 10px;
      bottom: 10px;
      max-width: calc(100% - 20px);
      pointer-events: none;
    }
    #simulador-ciudad .map-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      max-width: calc(100% - 178px);
      pointer-events: none;
    }
    #simulador-ciudad .zoom-controls {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    #simulador-ciudad .map-messages {
      position: absolute;
      z-index: 12;
      left: 10px;
      bottom: 10px;
      display: flex;
      width: min(520px, calc(100% - 20px));
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }
    #simulador-ciudad .map-messages .map-info,
    #simulador-ciudad .map-messages .location-status {
      position: static;
      max-width: 100%;
    }
    #simulador-ciudad .location-search {
      position: absolute;
      z-index: 20;
      top: 48px;
      left: 10px;
      width: min(420px, calc(100% - 20px));
      padding: 14px;
      border: 1px solid rgb(0 66 105 / 24%);
      border-radius: var(--radius-lg);
      background: rgb(255 255 255 / 97%);
      color: var(--foreground);
      box-shadow: 0 8px 24px rgb(0 29 50 / 24%);
      cursor: default;
      touch-action: auto;
      user-select: text;
    }
    #simulador-ciudad .location-search-form,
    #simulador-ciudad .location-search-head,
    #simulador-ciudad .location-search-row,
    #simulador-ciudad .location-fallback {
      display: flex;
      gap: 8px;
    }
    #simulador-ciudad .location-search-form {
      flex-direction: column;
    }
    #simulador-ciudad .location-search-head {
      align-items: center;
      justify-content: space-between;
      font-weight: 700;
    }
    #simulador-ciudad .location-search-close {
      width: 32px;
      height: 32px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: var(--foreground);
      background: transparent;
      cursor: pointer;
      font: inherit;
      font-size: 24px;
      line-height: 1;
    }
    #simulador-ciudad .location-search-close:hover {
      background: var(--muted);
    }
    #simulador-ciudad .location-search-row input {
      min-width: 0;
      min-height: 44px;
      flex: 1 1 auto;
      padding: 8px 10px;
      border: 1px solid var(--input);
      border-radius: var(--radius-lg);
      color: var(--foreground);
      background: var(--background);
      font: inherit;
    }
    #simulador-ciudad .location-search-row .btn,
    #simulador-ciudad .location-fallback .btn,
    #simulador-ciudad .location-result-button {
      min-height: 44px;
    }
    #simulador-ciudad .location-search-message {
      margin: 10px 0 0;
      color: var(--muted-foreground);
      font-size: 13px;
      line-height: 1.35;
    }
    #simulador-ciudad .location-results {
      display: grid;
      max-height: 220px;
      gap: 6px;
      margin: 10px 0 0;
      padding: 0;
      overflow-y: auto;
      list-style: none;
    }
    #simulador-ciudad .location-result-button {
      width: 100%;
      justify-content: flex-start;
      padding: 8px 10px;
      text-align: left;
      white-space: normal;
    }
    #simulador-ciudad .location-fallback {
      margin-top: 10px;
      flex-wrap: wrap;
    }
    #simulador-ciudad .location-marker {
      position: absolute;
      z-index: 8;
      width: 44px;
      height: 44px;
      touch-action: none;
      transform: translate(-50%, -100%);
      transform-origin: 50% 100%;
    }
    #simulador-ciudad .intersection-marker {
      position: absolute;
      z-index: 7;
      width: 0;
      height: 0;
      pointer-events: none;
    }
    #simulador-ciudad .intersection-marker svg {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      max-width: none;
      width: calc(18px * var(--marker-inverse-scale, 1));
      height: calc(22px * var(--marker-inverse-scale, 1));
      overflow: visible;
      filter: drop-shadow(0 2px 3px rgb(0 29 50 / 45%));
      transform: translate(-50%, -100%) rotate(0deg);
      transform-origin: 50% 100%;
    }
    #simulador-ciudad .intersection-marker path {
      fill: rgb(220 38 38);
      stroke: white;
      stroke-width: 1.4;
    }
    #simulador-ciudad .intersection-marker circle {
      fill: white;
    }
    #simulador-ciudad .location-marker-handle {
      position: relative;
      display: block;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: grab;
      touch-action: none;
    }
    #simulador-ciudad .location-marker-handle::before {
      position: absolute;
      top: 7px;
      left: 7px;
      width: 22px;
      height: 22px;
      box-sizing: border-box;
      border: 4px solid white;
      border-radius: 50% 50% 50% 0;
      background: var(--primary);
      box-shadow: 0 2px 8px rgb(0 29 50 / 55%);
      content: "";
      transform: rotate(-45deg);
    }
    #simulador-ciudad .location-marker-handle:focus-visible {
      outline: 3px solid var(--ring);
      outline-offset: 2px;
    }
    #simulador-ciudad .location-marker-clear {
      position: absolute;
      top: -2px;
      right: -2px;
      min-width: 28px;
      min-height: 28px;
      padding: 0;
      border: 2px solid white;
      border-radius: 50%;
      color: white;
      background: var(--primary);
      box-shadow: 0 2px 6px rgb(0 29 50 / 45%);
      cursor: pointer;
      font: inherit;
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
    }
    #simulador-ciudad .location-marker-clear:hover,
    #simulador-ciudad .location-marker-clear:focus-visible {
      background: var(--primary-foreground);
      color: var(--primary);
    }
    #simulador-ciudad .location-marker.is-dragging-location .location-marker-handle {
      cursor: grabbing;
    }
    #simulador-ciudad .location-marker.is-dragging-location .location-marker-handle::before {
      box-shadow: 0 5px 14px rgb(0 29 50 / 65%);
    }
    #simulador-ciudad .location-status {
      padding: 10px 12px;
      border: 1px solid rgb(0 66 105 / 24%);
      border-radius: var(--radius-lg);
      background: rgb(255 255 255 / 96%);
      color: var(--foreground);
      box-shadow: 0 3px 12px rgb(0 29 50 / 22%);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
    }
    #simulador-ciudad .metric-card {
      display: grid;
      gap: 14px;
    }
    #simulador-ciudad .metric-summary {
      display: grid;
      gap: 2px;
    }
    #simulador-ciudad .metric-number {
      font-size: clamp(2rem, 8vw, 3.7rem);
      line-height: 1;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }
    #simulador-ciudad .progress-track {
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--muted);
    }
    #simulador-ciudad .progress-fill {
      height: 100%;
      width: 0;
      border-radius: inherit;
      background: var(--viz-series-1);
      transition: width 120ms linear;
    }
    #simulador-ciudad .exposure-breakdown {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: color-mix(in srgb, var(--muted) 55%, transparent);
    }
    #simulador-ciudad .exposure-metric {
      display: grid;
      align-content: start;
      gap: 2px;
      min-width: 0;
      padding: 10px 8px;
      text-align: center;
    }
    #simulador-ciudad .exposure-metric + .exposure-metric {
      border-left: 1px solid var(--border);
    }
    #simulador-ciudad .exposure-metric strong {
      font-size: 1.1rem;
      font-weight: 600;
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }
    #simulador-ciudad .exposure-metric span,
    #simulador-ciudad .exposure-areas {
      color: var(--muted-foreground);
    }
    #simulador-ciudad .exposure-metric span {
      font-size: 0.72rem;
      line-height: 1.25;
    }
    #simulador-ciudad .exposure-areas {
      margin-top: -6px;
    }
    #simulador-ciudad .detail-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    #simulador-ciudad .detail-value {
      font-weight: 500;
      text-align: end;
      font-variant-numeric: tabular-nums;
    }
    #simulador-ciudad .source-note {
      margin-top: 10px;
    }
    #simulador-ciudad [hidden] {
      display: none !important;
    }
    @media (max-width: 620px) {
      #simulador-ciudad .sim-controls,
      #simulador-ciudad .sim-layout {
        grid-template-columns: 1fr;
      }
      #simulador-ciudad .sim-controls .btn {
        flex: 1 1 auto;
      }
      #simulador-ciudad .map-badge {
        top: 54px;
        bottom: auto;
        max-width: calc(100% - 20px);
      }
      #simulador-ciudad .terrain-stage { min-height: 320px; }
    }
    @media (prefers-reduced-motion: reduce) {
      #simulador-ciudad .progress-fill { transition: none; }
    }

/* Presentación estable para integración en sitios web. */
:root {
  color-scheme: light;
}

html,
body {
  min-width: 320px;
}

body > #simulador-ciudad {
  width: min(100%, 1040px);
  margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════
   Ajustes de visibilidad y uso táctil — integración sitio CESeDeC
   Sobrescribe los estilos genéricos anteriores. No borrar.
   ══════════════════════════════════════════════════════════════════ */

#simulador-ciudad {
  --cta-blue: #004269;
  --cta-blue-soft: #006688;
}

/* ───────── Control de cota: pista y círculo bien visibles ───────── */

#simulador-ciudad .cota-field {
  padding: 12px 14px 10px;
  border: 1px solid rgb(0 66 105 / 18%);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgb(74 197 239 / 8%),
    rgb(74 197 239 / 2%)
  );
}

#simulador-ciudad .range-head {
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

#simulador-ciudad .range-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--cta-blue);
}

#simulador-ciudad .range-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid rgb(0 66 105 / 22%);
  background: #fff;
  color: var(--cta-blue);
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

#simulador-ciudad .range-hint svg {
  width: 14px;
  height: 14px;
}

#simulador-ciudad .range-value {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--cta-blue);
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--font-size-base) + 1px);
}

#simulador-ciudad .form-range {
  height: 44px;
  cursor: pointer;
  touch-action: pan-y;
  /* Pista: agua a la izquierda del pulgar, gris claro a la derecha */
  background:
    linear-gradient(90deg, #4ac5ef var(--range-progress, 0%), #d3dae0 var(--range-progress, 0%))
      center / 100% 10px no-repeat;
  border-radius: var(--radius-full);
}

#simulador-ciudad .form-range::-webkit-slider-runnable-track {
  height: 44px;
  background: transparent;
}

#simulador-ciudad .form-range::-moz-range-track {
  height: 44px;
  background: transparent;
}

#simulador-ciudad .form-range::-webkit-slider-thumb {
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: 7px;
  border: 4px solid var(--cta-blue);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow:
    0 2px 8px rgb(0 40 80 / 35%),
    0 0 0 6px rgb(0 66 105 / 10%);
  cursor: grab;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

#simulador-ciudad .form-range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 4px solid var(--cta-blue);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow:
    0 2px 8px rgb(0 40 80 / 35%),
    0 0 0 6px rgb(0 66 105 / 10%);
  cursor: grab;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

#simulador-ciudad .form-range:hover::-webkit-slider-thumb,
#simulador-ciudad .form-range:focus-visible::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow:
    0 3px 12px rgb(0 40 80 / 45%),
    0 0 0 9px rgb(0 66 105 / 14%);
}

#simulador-ciudad .form-range:hover::-moz-range-thumb,
#simulador-ciudad .form-range:focus-visible::-moz-range-thumb {
  transform: scale(1.12);
  box-shadow:
    0 3px 12px rgb(0 40 80 / 45%),
    0 0 0 9px rgb(0 66 105 / 14%);
}

#simulador-ciudad .form-range:active::-webkit-slider-thumb {
  cursor: grabbing;
}

#simulador-ciudad .form-range:active::-moz-range-thumb {
  cursor: grabbing;
}

/* Pulso inicial: llama la atención hasta el primer uso */
#simulador-ciudad .form-range:not(.is-touched)::-webkit-slider-thumb {
  animation: cota-pulse 2.2s ease-in-out 3;
}

#simulador-ciudad .form-range:not(.is-touched)::-moz-range-thumb {
  animation: cota-pulse 2.2s ease-in-out 3;
}

@keyframes cota-pulse {
  0%,
  100% {
    box-shadow:
      0 2px 8px rgb(0 40 80 / 35%),
      0 0 0 6px rgb(0 66 105 / 10%);
  }
  50% {
    box-shadow:
      0 2px 8px rgb(0 40 80 / 35%),
      0 0 0 13px rgb(0 66 105 / 4%);
  }
}

/* Escala de referencia bajo la pista */
#simulador-ciudad .range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: -2px;
  color: var(--muted-foreground);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
}

/* ───────── Interruptor de calles: contrastado ───────── */

#simulador-ciudad .form-switch {
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid rgb(0 66 105 / 20%);
  border-radius: var(--radius-full);
  background: #fff;
  cursor: pointer;
}

#simulador-ciudad .form-switch:has(.form-check-input:checked) {
  border-color: var(--cta-blue);
  background: rgb(0 66 105 / 7%);
}

#simulador-ciudad .form-switch .form-check-input {
  width: 44px;
  height: 26px;
  background: #b6c0c9;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 18%);
}

#simulador-ciudad .form-switch .form-check-input::before {
  width: 20px;
  height: 20px;
  border: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
  transform: translate(3px, -50%);
}

#simulador-ciudad .form-switch .form-check-input:checked {
  background: var(--cta-blue);
}

#simulador-ciudad .form-switch .form-check-input:checked::before {
  transform: translate(21px, -50%);
}

#simulador-ciudad .form-switch .form-check-label {
  font-weight: 600;
  color: var(--cta-blue);
}

#simulador-ciudad .defense-switch {
  align-items: center;
  border-color: rgb(24 156 94 / 38%);
}

#simulador-ciudad .defense-switch[hidden] {
  display: none !important;
}

#simulador-ciudad .defense-switch:has(.form-check-input:checked) {
  border-color: var(--defense-color);
  background: rgb(24 156 94 / 10%);
}

#simulador-ciudad .defense-switch .form-check-input:checked {
  background: var(--defense-color);
}

#simulador-ciudad .defense-switch-copy {
  display: grid;
  line-height: 1.15;
}

#simulador-ciudad .defense-status {
  max-width: 210px;
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
}

/* ───────── Ayudas contextuales sobre el mapa ───────── */

#simulador-ciudad .map-badge,
#simulador-ciudad .map-info,
#simulador-ciudad :is(.terrain-hint, .terrain-scale) {
  border: 1px solid rgb(0 66 105 / 20%);
  background: rgb(255 255 255 / 94%);
  color: var(--cta-blue);
  font-weight: 600;
  box-shadow: 0 2px 8px rgb(0 29 50 / 18%);
}

#simulador-ciudad .zoom-controls .btn {
  min-width: 40px;
  min-height: 40px;
  border-color: rgb(0 66 105 / 22%);
  background: rgb(255 255 255 / 96%);
  color: var(--cta-blue);
  box-shadow: 0 2px 8px rgb(0 29 50 / 18%);
}

/* ───────── Escritorio: dos bloques equilibrados en una sola línea ───────── */

@media (min-width: 621px) {
  #simulador-ciudad .sim-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
  }

  /* Mismo marco que el bloque de cota, para que se lean como pares.
     Se acota a .sim-controls: los controles de zoom del mapa comparten
     la clase .viz-controls y no deben cambiar. */
  #simulador-ciudad .sim-controls > .viz-controls {
    padding: 12px 14px 10px;
    border: 1px solid rgb(0 66 105 / 18%);
    border-radius: var(--radius-lg);
    background: linear-gradient(
      180deg,
      rgb(0 66 105 / 5%),
      rgb(0 66 105 / 1%)
    );
    align-content: center;
    justify-content: center;
    row-gap: 10px;
  }

  #simulador-ciudad .viz-head {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--cta-blue);
  }

  #simulador-ciudad .viz-head svg {
    width: 16px;
    height: 16px;
  }
}

/* ───────── Móvil ───────── */

@media (max-width: 620px) {
  html[data-sim-expanded-mobile] #simulador-ciudad .cota-field {
    padding-inline: clamp(8px, 2.6vw, 10px);
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .range-head {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content 44px;
    align-items: center;
    gap: clamp(2px, 0.8vw, 6px);
    flex-wrap: nowrap;
  }

  html[data-sim-expanded-mobile] #simulador-ciudad :is(
    .range-title,
    .range-hint,
    .range-value,
    .expanded-mobile-close
  ) {
    min-width: 0;
    white-space: nowrap;
    font-size: clamp(9px, 2.7vw, 12px);
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .range-title {
    gap: 3px;
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .range-title svg {
    display: none;
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .range-hint {
    justify-self: end;
    gap: 2px;
    padding-inline: clamp(3px, 1vw, 7px);
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .range-hint svg {
    width: 10px;
    height: 10px;
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .range-value {
    padding-inline: clamp(3px, 1vw, 8px);
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .expanded-mobile-close {
    display: inline-flex !important;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .expanded-mobile-close-surface {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0 2px;
    border: 1px solid #fff;
    border-radius: var(--radius-full);
    color: #fff;
    background: #b91c1c;
    box-shadow: 0 0 0 2px #fca5a5;
    font-size: clamp(7px, 2vw, 8px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .expanded-mobile-close:hover .expanded-mobile-close-surface {
    background: #991b1b;
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .expanded-mobile-close:active .expanded-mobile-close-surface {
    transform: scale(0.95);
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .expanded-mobile-close:focus-visible {
    outline: none;
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .expanded-mobile-close:focus-visible .expanded-mobile-close-surface {
    box-shadow: 0 0 0 3px #fca5a5;
  }

  html[data-sim-expanded-mobile] #simulador-ciudad .expanded-mobile-close-surface svg {
    width: 7px;
    height: 7px;
  }

  #simulador-ciudad .map-stage.is-2d {
    height: var(--mobile-map-height);
  }

  #simulador-ciudad .map-stage.is-2d .map-viewport {
    position: absolute;
    top: var(--mobile-map-top);
    right: 0;
    left: 0;
  }

  #simulador-ciudad .map-stage.is-3d {
    height: auto;
  }

  #simulador-ciudad .range-hint {
    white-space: normal;
  }

  #simulador-ciudad .form-range::-webkit-slider-thumb {
    width: 34px;
    height: 34px;
    margin-top: 5px;
  }

  #simulador-ciudad .form-range::-moz-range-thumb {
    width: 34px;
    height: 34px;
  }

  #simulador-ciudad .viz-head {
    display: none;
  }

  #simulador-ciudad .viz-controls {
    gap: 6px;
  }

  #simulador-ciudad .sim-controls > .viz-controls {
    display: grid;
    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(48px, 0.5fr)
      minmax(48px, 0.5fr);
  }

  #simulador-ciudad .sim-controls > .viz-controls .form-switch {
    min-width: 0;
    gap: 6px;
    padding-inline: 4px;
    font-size: clamp(11px, 3.7vw, 14px);
    white-space: nowrap;
  }

  #simulador-ciudad .sim-controls > .viz-controls .btn {
    width: 100%;
  }

  #simulador-ciudad .viz-controls .btn {
    min-height: 44px;
    min-width: 0;
    padding: 0 6px;
    font-weight: 600;
  }

  #simulador-ciudad .cota-field {
    padding: 8px 10px 6px;
  }

  #simulador-ciudad .range-head {
    gap: 8px;
    margin-bottom: 2px;
  }

  #simulador-ciudad .sim-controls {
    gap: 8px;
    margin-bottom: 8px;
  }

  #simulador-ciudad [data-play] {
    display: none;
  }

  #simulador-ciudad .sim-layout {
    gap: 10px;
  }

  #simulador-ciudad .metric-card {
    gap: 8px;
    padding: 10px;
  }

  #simulador-ciudad .metric-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }

  #simulador-ciudad .metric-label {
    padding-top: 4px;
    font-size: clamp(0.92rem, 4vw, 1.05rem);
    line-height: 1.2;
  }

  #simulador-ciudad .metric-number {
    font-size: clamp(2.2rem, 12vw, 3rem);
    line-height: 0.9;
    text-align: end;
  }

  #simulador-ciudad .progress-track {
    height: 8px;
  }

  #simulador-ciudad .zoom-controls .btn {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 720px) {
  #simulador-ciudad .location-search {
    right: 12px;
    left: 12px;
    width: auto;
  }

  #simulador-ciudad .location-search-row {
    flex-direction: column;
  }

  #simulador-ciudad .location-search-row .btn,
  #simulador-ciudad .location-fallback .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #simulador-ciudad .form-range::-webkit-slider-thumb,
  #simulador-ciudad .form-range::-moz-range-thumb {
    animation: none;
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Pantalla completa en escritorio: el simulador ocupa el alto
   disponible sin barras de desplazamiento.

   La activa la página contenedora poniendo data-sim-fullscreen en
   <html>. Debajo de 621px no aplica: en el teléfono la vista
   apaisada de una sola columna funciona mejor.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 621px) {
  html[data-sim-fullscreen],
  html[data-sim-fullscreen] > body {
    height: 100%;
    overflow: hidden;
  }

  html[data-sim-fullscreen] > body {
    padding: 10px 14px;
  }

  html[data-sim-fullscreen] body > #simulador-ciudad {
    display: flex;
    width: 100%;
    max-width: none;
    height: 100%;
    flex-direction: column;
    margin-inline: 0;
  }

  html[data-sim-fullscreen] #simulador-ciudad .sim-controls {
    flex: 0 0 auto;
  }

  html[data-sim-fullscreen] #simulador-ciudad .sim-layout {
    min-height: 0;
    flex: 1 1 auto;
    /* La columna del mapa se ajusta a su relación de aspecto y el
       panel de datos toma un ancho fijo, para no dejar aire a los
       costados en pantallas anchas. */
    grid-template-columns: auto minmax(240px, 340px);
    justify-content: center;
    align-items: stretch;
  }

  /* 2200 × 2865 es el tamaño real de la ortofoto: fijando la relación
     el alto manda y el ancho se deduce, así el mapa entra completo. */
  html[data-sim-fullscreen] #simulador-ciudad .map-stage {
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    aspect-ratio: 2200 / 2865;
  }

  html[data-sim-fullscreen] #simulador-ciudad .terrain-stage {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  html[data-sim-fullscreen] #simulador-ciudad .metric-card {
    max-height: 100%;
    overflow-y: auto;
  }

  html[data-sim-fullscreen] #simulador-ciudad .source-note {
    max-height: 3.2em;
    margin-top: 8px;
    overflow-y: auto;
    flex: 0 0 auto;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * MODO AUTOMATICO (?auto=1): la cota la manda el rio.
 *
 * Se oculta todo lo que invite a manipular la simulacion. El JS ademas
 * deshabilita esos controles; esto es solo la parte visual. Se hacen las dos
 * cosas porque `display:none` saca del foco pero un `disabled` faltante
 * dejaria el control alcanzable si alguien cambia el CSS.
 *
 * Ver el bloque "MODO AUTOMATICO" al final de app.js.
 */
[data-modo="auto"] [data-play],
[data-modo="auto"] [data-view="3d"] {
  display: none !important;
}

/* SE VA TODA LA BARRA DE CONTROLES.
 *
 * La primera version dejaba el deslizador visible pero inerte, con la idea de
 * que sirviera como barra de progreso. No funciona: un control que se ve
 * arrastrable invita a arrastrarlo, y el propio rotulo dice "Arrastra el circulo
 * azul". Alguien lo intenta, no pasa nada, y queda con la duda de si el mapa
 * esta roto.
 *
 * En modo automatico la cota se muestra en el encabezado del panel y en la
 * etiqueta del mapa, que es donde corresponde leerla. */
[data-modo="auto"] .cota-field,
[data-modo="auto"] .viz-controls {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   VISOR DE CIUDAD COMPLETA (MapLibre)
   Todo lo de arriba viene del simulador anterior y conserva su aspecto.
   Esto agrega lo propio del mapa nuevo.
   ══════════════════════════════════════════════════════════════════ */

#simulador-ciudad {
  --agua: rgb(33 150 243);
  --agua-extra: rgb(255 112 67);
}

#simulador-ciudad .map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 360px;
  max-height: 86vh;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #e9edf0;
  touch-action: auto;
  cursor: auto;
}

#simulador-ciudad .mapa {
  position: absolute;
  inset: 0;
}

#simulador-ciudad .mapa .maplibregl-canvas:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: -3px;
}

#simulador-ciudad .map-badge { z-index: 5; }
#simulador-ciudad .zoom-controls { z-index: 5; }
#simulador-ciudad .map-messages { z-index: 6; bottom: 34px; }

#simulador-ciudad .map-messages .map-info {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
}

#simulador-ciudad .map-cargando {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--cta-blue);
  background: rgb(233 237 240 / 82%);
  font-weight: 600;
  text-align: center;
}

#simulador-ciudad .map-leyenda {
  position: absolute;
  z-index: 5;
  top: 46px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  max-width: calc(100% - 70px);
  padding: 5px 9px;
  border: 1px solid rgb(0 66 105 / 20%);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 94%);
  color: var(--cta-blue);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgb(0 29 50 / 18%);
  pointer-events: none;
}

#simulador-ciudad .muestra {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 3px;
}
#simulador-ciudad .muestra-agua { background: color-mix(in srgb, var(--agua) 60%, white); border: 1.5px solid rgb(13 71 161); }
#simulador-ciudad .muestra-extra { background: color-mix(in srgb, var(--agua-extra) 60%, white); border: 1.5px solid rgb(191 54 12); }

#simulador-ciudad .marcador-consulta {
  width: 24px;
  height: 30px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M9 22C7.1 19.1 0 13.4 0 7.5a9 9 0 0 1 18 0C18 13.4 10.9 19.1 9 22Z' fill='%23dc2626' stroke='white' stroke-width='1.4'/%3E%3Ccircle cx='9' cy='7.5' r='2.3' fill='white'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 3px rgb(0 29 50 / 45%));
  pointer-events: none;
}

/* Escala con los umbrales oficiales marcados en su lugar real. */
#simulador-ciudad .range-scale-umbrales {
  position: relative;
  display: block;
  height: 1.5em;
  margin: -2px 15px 0;
}
#simulador-ciudad .range-scale-umbrales > span {
  position: absolute;
  left: var(--pos);
  transform: translateX(-50%);
  white-space: nowrap;
}
#simulador-ciudad .range-scale-umbrales > span:first-child { transform: none; left: -15px; }
#simulador-ciudad .range-scale-umbrales > span:last-child { transform: none; left: auto; right: -15px; }
#simulador-ciudad .range-scale-umbrales .umbral { font-weight: 600; }
/* Crítico y Evacuación quedan a menos de 1 m: el texto de Crítico termina en
   su marca y el de Evacuación empieza en la suya, para que no se pisen. */
#simulador-ciudad .range-scale-umbrales .umbral-critico { transform: translateX(-100%); }
#simulador-ciudad .range-scale-umbrales .umbral-critico::before { left: auto; right: 0; }
#simulador-ciudad .range-scale-umbrales .umbral-evacuacion { transform: none; }
#simulador-ciudad .range-scale-umbrales .umbral-evacuacion::before { left: 0; }
#simulador-ciudad .range-scale-umbrales .umbral-anegamiento { transform: none; width: 2px; height: 1em; }
#simulador-ciudad .range-scale-umbrales .umbral-anegamiento::before { left: 0; }
#simulador-ciudad .texto-corto { display: none; }
#simulador-ciudad .range-scale-umbrales .umbral::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 2px;
  height: 7px;
  border-radius: 1px;
  background: currentColor;
}
#simulador-ciudad .umbral-anegamiento { color: #c2410c; }
#simulador-ciudad .umbral-critico { color: #b91c1c; }
#simulador-ciudad .umbral-evacuacion { color: #7f1d1d; }
/* En el teléfono no entran los dos textos: Crítico queda solo como marca. */
@media (max-width: 620px) {
  #simulador-ciudad .range-scale-umbrales .umbral-critico { font-size: 0; }
}

/* Interruptor "Ver sin Defensa Sur" con el color del agua extra. */
#simulador-ciudad .sin-defensa-switch:has(.form-check-input:checked) {
  border-color: rgb(191 54 12);
  background: rgb(255 112 67 / 10%);
}
#simulador-ciudad .sin-defensa-switch .form-check-input:checked { background: rgb(191 54 12); }

/* Dato aparte: se ve distinto del número principal a propósito. */
#simulador-ciudad .sin-defensa-dato {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px dashed rgb(191 54 12 / 55%);
  border-radius: var(--radius-lg);
  background: rgb(255 112 67 / 7%);
}
#simulador-ciudad .sin-defensa-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: rgb(154 52 18);
  font-weight: 700;
}
#simulador-ciudad .etiqueta-info {
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: rgb(191 54 12 / 12%);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
#simulador-ciudad .sin-defensa-numero {
  color: rgb(124 45 18);
  font-variant-numeric: tabular-nums;
}
#simulador-ciudad .sin-defensa-numero strong {
  font-size: 1.5rem;
  font-weight: 600;
}

#simulador-ciudad .source-note strong { color: var(--foreground); font-weight: 600; }

/* Atribución de MapLibre más discreta. */
#simulador-ciudad .maplibregl-ctrl-attrib { font-size: 10px; }

@media (max-width: 620px) {
  #simulador-ciudad .map-stage {
    aspect-ratio: 4 / 5;
    min-height: 320px;
  }
  #simulador-ciudad .sim-controls > .viz-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #simulador-ciudad .range-scale-umbrales { font-size: 10.5px; }
  #simulador-ciudad .map-badge { top: 60px; max-width: calc(100% - 20px); }
  #simulador-ciudad .map-leyenda { top: 96px; max-width: calc(100% - 20px); }
  #simulador-ciudad .texto-largo { display: none; }
  #simulador-ciudad .texto-corto { display: inline; }
  #simulador-ciudad .sim-controls > .viz-controls .form-switch { font-size: clamp(11px, 3.4vw, 14px); }
}

@media (min-width: 621px) {
  html[data-sim-fullscreen] #simulador-ciudad .map-stage {
    width: auto;
    max-width: 100%;
    max-height: none;
    height: 100%;
    aspect-ratio: 4 / 5;
  }
}

html[data-sim-expanded-mobile] #simulador-ciudad .map-stage {
  max-height: 72vh;
}

[data-modo="auto"] .sin-defensa-dato { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   PANTALLA COMPLETA: PERSONAS, HOGARES, NIÑEZ Y MAYORES A LA VISTA
   ══════════════════════════════════════════════════════════════════ */

/* Con overflow:hidden el desglose era un contenedor de desplazamiento y
   la grilla de la tarjeta lo aplastaba a 0 cuando faltaba alto (pantalla
   completa en escritorio). `clip` recorta las esquinas igual sin eso. */
#simulador-ciudad .exposure-breakdown {
  overflow: clip;
}

@media (min-width: 621px) {
  /* Ninguna fila de la tarjeta se achica: si no entra, la tarjeta se
     desplaza por dentro y lo importante queda arriba. */
  html[data-sim-fullscreen] #simulador-ciudad .metric-card {
    grid-auto-rows: max-content;
    align-content: start;
    gap: 10px;
  }
  html[data-sim-fullscreen] #simulador-ciudad .metric-card .detail-row {
    padding-top: 7px;
  }
}

/* Teléfono a pantalla completa: app.js ajusta el alto del mapa para que
   en la primera pantalla entren también el número y su desglose. */
@media (max-width: 620px) {
  html[data-sim-expanded-mobile] #simulador-ciudad .sim-layout {
    gap: 8px;
  }
  html[data-sim-expanded-mobile] #simulador-ciudad .metric-card {
    gap: 6px;
    padding: 8px 10px;
  }
  html[data-sim-expanded-mobile] #simulador-ciudad .metric-summary {
    align-items: center;
  }
  html[data-sim-expanded-mobile] #simulador-ciudad .metric-label {
    padding-top: 0;
    font-size: 0.95rem;
  }
  html[data-sim-expanded-mobile] #simulador-ciudad .metric-number {
    font-size: clamp(2rem, 10vw, 2.5rem);
  }
  html[data-sim-expanded-mobile] #simulador-ciudad .progress-track {
    height: 6px;
  }
  /* La fila «0 … % de …» comparte la clase con la cabecera de la cota,
     que en este modo es una grilla de cuatro columnas. */
  html[data-sim-expanded-mobile] #simulador-ciudad .metric-card .range-head {
    display: flex;
    justify-content: space-between;
    margin: 3px 0 0;
    font-size: 11px;
  }
  html[data-sim-expanded-mobile] #simulador-ciudad .exposure-metric {
    padding: 6px 4px;
  }
  html[data-sim-expanded-mobile] #simulador-ciudad .exposure-metric strong {
    font-size: 1.05rem;
  }
  html[data-sim-expanded-mobile] #simulador-ciudad .map-stage[data-alto-ajustado] {
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
  }
}