/* Sistema visual JARVIS aplicado al panel de PLACSP.
   Casi negro y casi blanco, marcos de 1 px, dos radios, tres sombras, dos
   familias: Jakarta habla, Plex Mono cuenta. Los tokens son los de
   jarvis/apps/web/src/estilos.css; si cambian allí, cambian aquí. */

/* ── Fuentes ─────────────────────────────────────────────────────────── */
@font-face { font-family: 'Jakarta'; font-style: normal; font-weight: 200 800; font-display: block; src: url('/static/fonts/jakarta-variable.woff2') format('woff2'); }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 400; font-display: block; src: url('/static/fonts/plex-400.woff2') format('woff2'); }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 500; font-display: block; src: url('/static/fonts/plex-500.woff2') format('woff2'); }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 600; font-display: block; src: url('/static/fonts/plex-600.woff2') format('woff2'); }

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  --paper: #f3f3f0;
  --surface: #fdfdfc;
  --surface-2: #ecece8;
  --surface-3: #e0e0db;
  --ink: #161616;
  --ink-2: #4e4e4c;
  --ink-3: #85857f;
  --ink-suave: #333331;
  --rule: #c6c6c0;
  --hair: #e4e4df;
  --danger: #cd1c18;
  --on-danger: #f7f7f6;
  --danger-tenue: #fbf1f0;

  --rail-bg: #141414;
  --rail-ink: #f3f3f0;
  --rail-ink-2: #a8a8a3;
  --rail-hair: #2a2a2a;
  --rail-hover: #222222;
  --rail-activo-bg: #f3f3f0;
  --rail-activo-ink: #141414;

  --r: 10px;
  --r-sm: 6px;
  --sombra-tarjeta: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 1px rgb(0 0 0 / 0.02);
  --sombra-flotante: 0 8px 24px -8px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.06);
  --sombra-dialogo: 0 32px 64px -16px rgb(0 0 0 / 0.28), 0 8px 24px -8px rgb(0 0 0 / 0.12);

  --font-sans: 'Jakarta', system-ui, sans-serif;
  --font-mono: 'Plex', ui-monospace, monospace;

  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 320ms;
  --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sharp: cubic-bezier(0.2, 0, 0, 1);

  --ajuste-optico: -0.055em;
  --rail: 184px;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --paper: #161616;
  --surface: #1d1d1c;
  --surface-2: #262625;
  --surface-3: #313130;
  --ink: #ebebe8;
  --ink-2: #b0b0b0;
  --ink-3: #6e6e6c;
  --ink-suave: #d6d6d2;
  --rule: #3a3a38;
  --hair: #2c2c2b;
  --danger: #f0605c;
  --on-danger: #141414;

  --rail-bg: #0e0e0e;
  --rail-ink: #ebebe8;
  --rail-ink-2: #8f8f8a;
  --rail-hair: #232323;
  --rail-hover: #1c1c1c;
  --rail-activo-bg: #2b2b2a;
  --rail-activo-ink: #ffffff;

  --sombra-tarjeta: 0 1px 2px rgb(0 0 0 / 0.3);
  --sombra-flotante: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);
  --sombra-dialogo: 0 32px 64px -16px rgb(0 0 0 / 0.7), 0 8px 24px -8px rgb(0 0 0 / 0.4);

  color-scheme: dark;
}


/* ── Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
svg { display: block; }

/* Papeles tipográficos */
.titulo    { font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.subtitulo { font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -0.015em; }
.apoyo     { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.dato      { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.etiqueta  { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }
.texto-cap { transform: translateY(var(--ajuste-optico)); display: inline-block; }

/* ── Armazón: rail oscuro + contenido claro ──────────────────────────── */
.armazon { display: flex; min-height: 100vh; min-height: 100dvh; }
.rail {
  position: sticky; top: 0; align-self: flex-start;
  width: var(--rail); height: 100vh; height: 100dvh; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--rail-bg); color: var(--rail-ink);
  padding: 24px 12px 16px;
}
.marca {
  display: block; padding: 4px 8px 24px; text-decoration: none;
  border-bottom: 1px solid var(--rail-hair); margin-bottom: 16px;
}
.marca .etiqueta { color: var(--rail-ink-2); display: block; margin-bottom: 4px; }
.marca strong { display: block; font-weight: 700; font-size: 17px; letter-spacing: -0.015em; line-height: 1.25; color: var(--rail-ink); }
.rail nav { display: flex; flex-direction: column; gap: 4px; }
.rail nav a, .rail-boton {
  display: flex; align-items: center; min-height: 36px; padding: 0 12px;
  border-radius: var(--r-sm); font-size: 14px; font-weight: 500; text-decoration: none;
  color: var(--rail-ink-2); background: transparent;
  transition: background-color var(--t-fast) var(--ease-base), color var(--t-fast) var(--ease-base);
}
.rail nav a:hover, .rail-boton:hover { background: var(--rail-hover); color: var(--rail-ink); }
.rail nav a:active, .rail-boton:active { background: var(--rail-hover); color: var(--rail-ink); }
.rail nav a.active { background: var(--rail-activo-bg); color: var(--rail-activo-ink); font-weight: 600; }
.rail nav a:focus-visible, .rail-boton:focus-visible { outline-color: var(--rail-ink); }
.rail-pie { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--rail-hair); }
.rail-boton { width: 100%; gap: 8px; text-align: left; }
.rail-boton svg { width: 16px; height: 16px; flex: none; }
.rail-boton.rail-contratar { background: var(--rail-activo-bg); color: var(--rail-activo-ink); font-weight: 600; }
.rail-boton.rail-contratar:hover { background: #ffffff; color: var(--rail-activo-ink); }

.page { flex: 1; min-width: 0; padding: 40px 48px 128px; }
.form-wrap, .wide-wrap { width: 100%; }
.cabecera { margin-bottom: 32px; }
.cabecera .apoyo { margin-top: 4px; max-width: 72ch; }

/* ── Filtros: dos columnas, criterios y mapa ────────────────────────── */
.filtros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.filtros-mapa { position: sticky; top: 40px; }
.filtros .grid-2 { gap: 32px; align-items: start; }
.filtros .rangos { display: grid; grid-template-columns: 1fr; gap: 32px; }
.filtros .rangos .opcion.suelta { margin-top: 0; }
.opcion.suelta { border-bottom: 0; padding: 0; min-height: 32px; margin-top: 8px; }
.filtros .field { margin-bottom: 0; }
.filtros-col { display: flex; flex-direction: column; gap: 32px; }

/* Lista de opciones: una caja con cabecera y una fila por opción. La
   casilla nativa va oculta y la dibuja .marca-casilla (patrón de JARVIS). */
.opciones { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sombra-tarjeta); overflow: hidden; }
.opciones-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.opciones-cab label, .opciones-cab .label { margin: 0; }
.opciones-cab .cuenta, .mapa-modal-cab .cuenta { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.opciones-lista { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
label.opcion, .opcion { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--hair); cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink); transition: background-color var(--t-fast) var(--ease-base); }
.opcion:hover { background: var(--surface-2); }
.opciones-lista .opcion:nth-last-child(-n + var(--cols, 1)) { border-bottom: 0; }
.opcion.todas { font-weight: 600; border-bottom: 1px solid var(--rule); grid-column: 1 / -1; }
.opcion input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.marca-casilla { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border: 2px solid var(--ink-3); border-radius: 4px; background: var(--surface); transition: background-color var(--t-fast) var(--ease-base), border-color var(--t-fast) var(--ease-base); }
.marca-casilla::after { content: ''; box-sizing: content-box; width: 4px; height: 8px; border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); opacity: 0; transform: translateY(-1px) rotate(45deg); transition: opacity var(--t-fast) var(--ease-base); }
.opcion:hover .marca-casilla { border-color: var(--ink); }
.opcion input:checked + .marca-casilla { border-color: var(--ink); background: var(--ink); }
.opcion input:checked + .marca-casilla::after { opacity: 1; }
.opcion input:focus-visible + .marca-casilla { outline: 1px solid var(--ink); outline-offset: 3px; }
.opcion .texto { flex: 1; min-width: 0; }
.opcion .pista { font-size: 13px; color: var(--ink-3); }

.mapa-caja { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sombra-tarjeta); overflow: hidden; }
.mapa-caja .opciones-cab { display: flex; align-items: center; }
.mapa-caja .opciones-cab .acciones { display: flex; align-items: center; gap: 8px; }
#map-outer { margin: 0; padding: 16px 24px; }
#map-outer:empty { display: none; }
#map-outer { position: relative; }
#map-ampliar { position: absolute; top: 12px; right: 12px; z-index: 1; }

/* Botón de solo icono: el mismo mando que .btn, cuadrado. */
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule);
  box-shadow: var(--sombra-tarjeta); cursor: pointer;
  transition: border-color var(--t) var(--ease-base), box-shadow var(--t) var(--ease-base), color var(--t-fast) var(--ease-base);
}
.btn-icono[hidden] { display: none; }
.btn-icono:hover { color: var(--ink); border-color: var(--ink-3); box-shadow: var(--sombra-flotante); }
.btn-icono:active { box-shadow: var(--sombra-tarjeta); }
.btn-icono svg { width: 16px; height: 16px; }

/* Mapa ampliado: el mismo #map-wrap viaja a un panel centrado (map.js anima el viaje). */
.mapa-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.mapa-modal-fondo { position: absolute; inset: 0; background: color-mix(in oklab, var(--paper) 70%, transparent); backdrop-filter: blur(4px); }
.mapa-modal-panel {
  position: relative; transform-origin: 0 0;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sombra-flotante);
}
.mapa-modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--rule); }
.mapa-modal-cab .acciones { display: flex; align-items: center; gap: 8px; }
.mapa-modal-cuerpo { padding: 24px; }
.mapa-modal #map-wrap { width: min(1040px, calc(100vw - 98px), calc((100dvh - 186px) * var(--aspecto, 1.4))); }
.regiones { border-top: 1px solid var(--rule); }
.regiones .opciones-lista { --cols: 3; }
.regiones .opcion { min-height: 36px; font-size: 13px; }
.regiones .opcion:nth-child(3n + 1), .regiones .opcion:nth-child(3n + 2) { border-right: 1px solid var(--hair); }

/* ── Campos ──────────────────────────────────────────────────────────── */
.field { margin-bottom: 32px; }
label, .label { display: block; color: var(--ink-2); margin-bottom: 8px; }
label, .label { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }
label .hint { font-family: var(--font-sans); font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink-3); margin-left: 8px; }
.hint { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.campo, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea {
  display: block; width: 100%; min-height: 44px; padding: 8px 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--ink-3); border-radius: var(--r-sm); outline: none;
  transition: border-color var(--t-fast) var(--ease-base), box-shadow var(--t-fast) var(--ease-base);
}
.campo:hover, input:hover, textarea:hover, .tag-field:hover { border-color: var(--ink-2); }
.campo:focus, input:focus, textarea:focus, .tag-field:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 12%, transparent);
}
::placeholder { color: var(--ink-3); }
textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.doc-grid .field { margin: 0; }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn, button[type="submit"], .btn-todas {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 16px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
  box-shadow: var(--sombra-tarjeta);
  transition: border-color var(--t) var(--ease-base), box-shadow var(--t) var(--ease-base), background-color var(--t-fast) var(--ease-base);
}
.btn:hover, .btn-todas:hover { border-color: var(--ink-3); box-shadow: var(--sombra-flotante); }
.btn:active, .btn-todas:active { border-color: var(--ink-3); box-shadow: var(--sombra-tarjeta); }
button[type="submit"] { background: var(--ink); color: var(--paper); border-color: var(--ink); min-height: 40px; padding: 0 24px; }
button[type="submit"]:hover { background: var(--ink-suave); border-color: var(--ink-suave); }
button[type="submit"]:active { background: var(--ink-suave); }
button[type="submit"]:disabled { cursor: not-allowed; background: var(--ink-3); border-color: var(--ink-3); }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid color-mix(in oklab, var(--paper) 40%, transparent); border-top-color: var(--paper); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Barra de acciones: se pega abajo del contenido, dentro del ancho del rail. */
.actions {
  position: fixed; left: var(--rail); right: 0; bottom: 0; z-index: 40;
  display: none; justify-content: center; gap: 8px; padding: 12px 48px;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  border-top: 1px solid var(--rule); backdrop-filter: blur(6px);
}
.actions.show { display: flex; }
/* Variante flotante: solo el botón, anclado abajo a la derecha, sin barra. */
.actions.flotante { left: auto; right: 24px; bottom: 24px; padding: 0; background: none; border: 0; backdrop-filter: none; }
.actions.flotante button { box-shadow: var(--sombra-flotante); }
body:has(.actions.flotante.show) #toast { bottom: 80px; }

/* ── Chips (casillas que se ven como mandos) ─────────────────────────── */
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-cb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pill-cb + label {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; margin: 0;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink-2); cursor: pointer; user-select: none;
  transition: border-color var(--t) var(--ease-base), background-color var(--t-fast) var(--ease-base), color var(--t-fast) var(--ease-base);
}
.pill-cb + label:hover { border-color: var(--ink-3); color: var(--ink); }
.pill-cb + label:active { border-color: var(--ink-3); color: var(--ink); }
.pill-cb:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill-cb:focus-visible + label { outline: 1px solid var(--ink); outline-offset: 2px; }

/* ── Campo de etiquetas ──────────────────────────────────────────────── */
.tag-field {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 6px 8px;
  background: var(--surface); border: 1px solid var(--ink-3); border-radius: var(--r-sm); cursor: text;
  transition: border-color var(--t-fast) var(--ease-base), box-shadow var(--t-fast) var(--ease-base);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 4px 0 10px;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 13px;
  max-width: 100%; overflow-wrap: anywhere; /* a long email breaks instead of widening the page */
}
.chip button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 16px; line-height: 1; transition: background-color var(--t-fast) var(--ease-base), color var(--t-fast) var(--ease-base); }
.chip button:hover { background: var(--surface-3); color: var(--ink); }
.tag-field .tag-text { flex: 1 1 100%; min-width: 80px; min-height: 28px; padding: 2px 4px; border: 0; outline: none; background: transparent; box-shadow: none !important; }
.ac-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: 4px; max-height: 220px; overflow-y: auto;
  list-style: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); box-shadow: var(--sombra-flotante);
  animation: desplegar var(--t-fast) var(--ease-sharp) both;
}
@keyframes desplegar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ac-list li { padding: 8px 12px; font-size: 14px; cursor: pointer; }
.ac-list li:hover, .ac-list li.ac-active { background: var(--surface-2); }

/* ── Mapa ────────────────────────────────────────────────────────────── */
#map-outer { margin: 8px 0 24px; width: 100%; }
#map-wrap svg { display: block; width: 100%; height: auto; }
#map-wrap text { display: none; }
#map-wrap g[id^="ES-"] { cursor: pointer; }
#map-wrap g[id^="ES-"] path, #map-wrap g[id^="ES-"] polygon {
  fill: var(--surface-3); stroke: var(--surface-3); stroke-width: 0.6;
  transition: fill var(--t-fast) var(--ease-base), stroke var(--t-fast) var(--ease-base);
}
#map-wrap g[data-hover] path, #map-wrap g[data-hover] polygon { fill: var(--ink-3); stroke: var(--ink-3); }
#map-wrap g[data-on] path, #map-wrap g[data-on] polygon { fill: var(--ink); stroke: var(--ink); }
#map-tooltip {
  position: fixed; z-index: 100; display: none; pointer-events: none; white-space: nowrap;
  padding: 4px 10px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 12px;
  background: var(--ink); color: var(--paper);
}

/* ── Deslizador doble ────────────────────────────────────────────────── */
.dual-slider { position: relative; padding: 0 0 4px; }
.slider-track { position: relative; height: 4px; background: var(--surface-3); border-radius: 2px; margin: 20px 0 8px; }
.slider-fill { position: absolute; height: 100%; background: var(--ink); border-radius: 2px; }
.thumb { position: absolute; top: 50%; width: 100%; height: 20px; transform: translateY(-50%); -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; }
.thumb:focus-visible { outline: none; }
.thumb::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: var(--r-sm); background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); cursor: pointer; pointer-events: all; }
.thumb::-moz-range-thumb { width: 16px; height: 16px; border-radius: var(--r-sm); background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); cursor: pointer; pointer-events: all; }
.thumb:focus-visible::-webkit-slider-thumb { outline: 1px solid var(--ink); outline-offset: 2px; }
.slider-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.slider-section-label { display: block; color: var(--ink-2); margin-bottom: 8px; font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Subida de archivos ──────────────────────────────────────────────── */
.drop-zone {
  padding: 24px 16px; text-align: center; cursor: pointer; color: var(--ink-2); font-size: 14px;
  border: 1px dashed var(--ink-3); border-radius: var(--r); background: var(--surface);
  transition: border-color var(--t-fast) var(--ease-base), background-color var(--t-fast) var(--ease-base);
}
.drop-zone:hover { border-color: var(--ink-2); }
.drop-zone.drag-over { border-color: var(--ink); background: var(--surface-2); }
.drop-zone u { text-underline-offset: 3px; }
.formats-hint { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.drop-zone ul { list-style: none; margin-top: 12px; text-align: left; }
.drop-zone li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14px; color: var(--ink); }
.file-x, .file-row > button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--ink-3); font-size: 18px; line-height: 1; transition: background-color var(--t-fast) var(--ease-base), color var(--t-fast) var(--ease-base); }
.file-x:hover, .file-row > button:hover { background: var(--surface-2); color: var(--ink); }
.file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 8px 8px 12px; font-size: 14px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.tok-chip { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); margin-left: 8px; white-space: nowrap; }
.token-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.token-bar-head label { margin: 0; }
#token-bar-text { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.token-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.token-fill { height: 100%; width: 0; background: var(--ink); transition: width var(--t-slow) var(--ease-sharp); }
.token-bar.warn .token-fill { background: repeating-linear-gradient(-45deg, var(--ink) 0 4px, var(--surface-3) 4px 8px); }
.token-bar.over .token-fill { background: var(--danger); }
.token-bar + .hint.over { color: var(--danger); margin-top: 8px; }

/* ── Licitaciones: pestañas y tabla ──────────────────────────────────── */
.toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.toggle button, .toggle a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--rule);
  transition: border-color var(--t) var(--ease-base), background-color var(--t-fast) var(--ease-base), color var(--t-fast) var(--ease-base);
}
.toggle button:hover, .toggle a:hover { border-color: var(--ink-3); color: var(--ink); }
.toggle button:active, .toggle a:active { border-color: var(--ink-3); color: var(--ink); }
.toggle button.active, .toggle a.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.toggle a.enlace { border: 0; background: none; text-decoration: underline; padding: 0; margin-left: auto; }
.actions.toggle { margin: 0; }
.hist-note { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-bottom: 16px; max-width: 72ch; }

.htable { width: 100%; border-collapse: collapse; font-size: 14px; }
.htable th { text-align: left; padding: 0 12px 8px; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }
.htable td { padding: 12px; border-bottom: 1px solid var(--hair); color: var(--ink); vertical-align: top; }
.htable .sub { color: var(--ink-2); font-size: 13px; }
.htable .num { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.htable tr[data-href] { cursor: pointer; }
.htable tr[data-href] td { transition: background-color var(--t-fast) var(--ease-base); }
.htable tr[data-href]:hover td { background: var(--surface-2); }
.htable tr.dim td { color: var(--ink-3); }
/* Sin abrir todavía: marco rojo y fondo rosa tenue, hasta que el usuario abre la ficha. */
.htable tr.nueva td { background: var(--danger-tenue); border-top: 1px solid var(--danger); border-bottom: 1px solid var(--danger); }
.htable tr.nueva td:first-child { border-left: 1px solid var(--danger); }
.htable tr.nueva td:last-child { border-right: 1px solid var(--danger); }
.lista .htable tr.nueva:last-child td { border-bottom: 1px solid var(--danger); }
.htable .closed { color: var(--ink-3); text-decoration: line-through; }
.htable td.main { width: 100%; max-width: 0; }
.htable th a.orden { color: inherit; text-decoration: none; white-space: nowrap; }
.htable th a.orden:hover { color: var(--ink); text-decoration: underline; }
.htable th a.orden.active { color: var(--ink); }
.htable .one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-empty { padding: 48px 24px; text-align: center; color: var(--ink-2); border: 1px dashed var(--ink-3); border-radius: var(--r); }
.lista { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sombra-tarjeta); padding: 8px 0 0; overflow: hidden; }
.lista .htable th { padding-top: 8px; }
.lista .htable th:first-child, .lista .htable td:first-child { padding-left: 24px; }
.lista .htable th:last-child, .lista .htable td:last-child { padding-right: 24px; }
.lista .htable tr:last-child td { border-bottom: 0; }
.mas { margin-top: 16px; }

/* Veredicto: forma y palabra, nunca color solo. Cuadrado de 10 px:
   lleno = apto · medio = dudosa · vacío = no apto. */
.badge { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); }
.badge::before { content: ''; width: 10px; height: 10px; flex: none; border: 1px solid var(--ink); border-radius: 2px; background: var(--surface); }
.badge.apto::before { background: var(--ink); }
.badge.dudosa::before { box-shadow: inset 0 -5px 0 var(--ink); }
.badge.no { color: var(--ink-2); }
.badge.no::before { border-color: var(--ink-3); border-style: dashed; }
.badge.sin_pliegos { color: var(--ink-2); }
.badge.sin_pliegos::before { border-color: var(--ink-3); border-style: dotted; background: transparent; }

/* ── Ficha ───────────────────────────────────────────────────────────── */
.ficha-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin: 24px 0 24px; }
.ficha-head > div { flex: 1 1 360px; min-width: 0; }
.ficha h1 { font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ficha .entity { color: var(--ink-2); font-size: 16px; margin-top: 8px; }
.ficha p, .ficha li { line-height: 1.6; }
.ficha ul { padding-left: 20px; }
.ficha .nc { color: var(--ink-3); font-size: 14px; }
.ficha .card > * + .nc { margin-top: 12px; }
.ficha td, .ficha dd { overflow-wrap: break-word; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.tile { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sombra-tarjeta); padding: 12px 16px; min-width: 0; }
.tile-label { display: block; color: var(--ink-2); margin-bottom: 8px; font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }
.tile-value { font-family: var(--font-mono); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; }
.tile .sub { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.tile.urgente { border-color: var(--danger); }
.tile.urgente .sub { color: var(--danger); font-weight: 500; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sombra-tarjeta); padding: 24px; margin-bottom: 16px; }
.card h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -0.015em; }
.card h2 .sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.card h2 .sum > span { display: inline-flex; align-items: center; gap: 8px; }
.card .htable th:first-child, .card .htable td:first-child { padding-left: 0; }
.card .htable th:last-child, .card .htable td:last-child { padding-right: 0; }
.card .htable tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.card .lead { font-size: 16px; margin-bottom: 8px; }
.ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-sm); border: 1px solid var(--ink); background: var(--surface); color: var(--ink); }
.ico.cumple { background: var(--ink); color: var(--paper); }
.ico.dudoso { }
.ico.no_cumple { border-color: var(--danger); color: var(--danger); }
.ico.sin_datos { border-color: var(--ink-3); border-style: dashed; color: var(--ink-3); }
.htable td.ico-cell { width: 34px; padding-right: 0; }
.crit { margin-bottom: 14px; }
.bar { height: 6px; background: var(--surface-3); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--ink); }
.ficha dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; }
.crit + dl { border-top: 1px solid var(--hair); padding-top: 14px; }
.ficha dt { color: var(--ink-2); }
.risks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.risk { background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 16px; line-height: 1.5; }
.tl { list-style: none; display: flex; padding: 0; }
.tl li { flex: 1; position: relative; border-top: 1px solid var(--rule); padding: 16px 16px 0 0; }
.tl li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 2px; background: var(--ink); }

/* Citas: la frase citada va subrayada a puntos; el texto original sale al pasar o enfocar. */
.cita { position: relative; text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; cursor: help; }
.cita:hover, .cita:focus { text-decoration-color: var(--ink); }
.cita.warn { text-decoration-color: var(--danger); }
.cita .warn-ico { color: var(--danger); margin-left: 4px; vertical-align: -2px; display: inline; }
.cita-pop {
  display: none; position: absolute; z-index: 10; bottom: calc(100% + 6px); left: 0; width: max-content; max-width: min(360px, calc(100vw - 32px));
  padding: 8px 12px; border-radius: var(--r-sm); background: var(--ink); color: var(--paper);
  font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; text-transform: none; letter-spacing: 0;
  box-shadow: var(--sombra-flotante);
}
.cita:hover .cita-pop, .cita:focus .cita-pop { display: block; animation: desplegar var(--t-fast) var(--ease-sharp) both; }
.cita-pop .src { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
:root[data-theme='dark'] .cita-pop .src { color: var(--ink-2); }
.cita-pop .src.bad { color: var(--on-danger); background: var(--danger); display: inline-block; padding: 1px 6px; border-radius: 2px; margin-top: 6px; }
.risk:nth-child(2n) .cita-pop, .tl li:last-child .cita-pop { left: auto; right: 0; }

/* ── Toast ───────────────────────────────────────────────────────────── */
#toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; pointer-events: none;
  display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 12px 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-sm); box-shadow: var(--sombra-flotante);
  font-size: 14px; font-weight: 500;
  opacity: 0; transform: translateX(16px);
  transition: opacity var(--t) var(--ease-sharp), transform var(--t) var(--ease-sharp);
}
#toast.show { opacity: 1; transform: none; }
#toast .toast-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 2px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
#toast.error { border-color: var(--danger); }
#toast.error .toast-icon { background: var(--danger); color: var(--on-danger); }
.actions.show ~ #toast { bottom: 80px; }

/* ── Acceso ──────────────────────────────────────────────────────────── */
.acceso { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.acceso-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sombra-tarjeta); padding: 32px; }
.acceso-card .marca { border-bottom: 1px solid var(--hair); padding: 0 0 24px; margin-bottom: 24px; }
.acceso-card .marca .etiqueta { color: var(--ink-2); }
.acceso-card .marca strong { color: var(--ink); }
.acceso-card .field { margin-bottom: 16px; }
.acceso-card button[type="submit"] { width: 100%; margin-top: 8px; }
.acceso-demo { margin-top: 16px; text-align: center; font-size: 14px; color: var(--ink-2); }
.error-msg { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; margin-bottom: 16px; font-size: 14px; color: var(--danger); border: 1px solid var(--danger); border-radius: var(--r-sm); }

/* ── Demo: la guía y el correo de la semana (web/demo.py, guia.js) ───── */
/* Un paso cada vez: la pantalla entera se difumina salvo lo que el paso
   explica, y una tarjeta fija abajo lo cuenta y lleva al siguiente. Los
   pasos sin objetivo (bienvenida y final) son la tarjeta sola, centrada. */
.guia { position: fixed; inset: 0; z-index: 200; }
.guia[hidden], .guia [hidden] { display: none; }
/* (ni opacidad ni animacion en .guia: el velo dejaria de difuminar la pagina que tiene debajo) */
.guia-velo { position: absolute; inset: 0; background: color-mix(in oklab, var(--paper) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.guia-foco { position: absolute; border-radius: 12px; box-shadow: 0 0 0 2px var(--ink), var(--sombra-flotante); pointer-events: none; }
.guia-tarjeta {
  position: absolute; left: calc(var(--rail) + (100% - var(--rail)) / 2); bottom: 24px; transform: translateX(-50%);
  width: min(640px, calc(100% - 32px)); padding: 20px 24px;
  background: var(--rail-bg); color: var(--rail-ink); border-radius: var(--r); box-shadow: var(--sombra-dialogo);
}
.guia-tarjeta.arriba { top: 24px; bottom: auto; }
.guia-avance { height: 3px; margin-bottom: 16px; border-radius: 2px; background: var(--rail-hair); overflow: hidden; }
.guia-avance span { display: block; height: 100%; background: var(--rail-ink); transition: width var(--t-slow) var(--ease-sharp); }
.guia-tarjeta header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.guia-tarjeta .etiqueta { color: var(--rail-ink-2); }
.guia-saltar { font-size: 13px; color: var(--rail-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.guia-saltar:hover { color: var(--rail-ink); }
.guia-tarjeta h2 { font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.guia-tarjeta p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: color-mix(in oklab, var(--rail-ink) 82%, transparent); }
.guia-tarjeta footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.guia .btn { min-height: 44px; background: transparent; color: var(--rail-ink); border-color: var(--rail-ink-2); box-shadow: none; }
.guia .btn:hover { background: var(--rail-hover); border-color: var(--rail-ink); box-shadow: none; }
.guia .btn.guia-sigue { padding: 0 28px; font-size: 15px; font-weight: 600; background: var(--rail-activo-bg); color: var(--rail-activo-ink); border-color: var(--rail-activo-bg); }
.guia .btn.guia-sigue:hover { background: #ffffff; border-color: #ffffff; }
.guia .btn[hidden] { display: none; }
.guia :focus-visible { outline-color: var(--rail-ink); }
.guia.centro .guia-tarjeta { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); padding: 28px 32px; }
.guia.centro h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.guia.centro p { margin-top: 12px; font-size: 16px; line-height: 1.6; }
.guia.centro footer { margin-top: 28px; }

.correo { max-width: 760px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sombra-tarjeta); overflow: hidden; }
.correo-cab { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; gap: 8px 16px; padding: 16px 24px; background: var(--surface-2); border-bottom: 1px solid var(--rule); font-size: 14px; }
.correo-cab dt { color: var(--ink-2); }
.correo-cab dd { min-width: 0; overflow-wrap: anywhere; }
.correo-cuerpo { font-size: 15px; } /* the email brings its own margins (src/correo.py) */
.correo-cuerpo h2 { margin-bottom: 16px; font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -0.015em; }
.correo-cuerpo p { margin-bottom: 12px; }
.correo-cuerpo ol { margin-bottom: 16px; padding-left: 24px; }
.correo-cuerpo li { padding-left: 4px; }
.correo-cuerpo > :last-child { margin-bottom: 0; }

/* ── Cortes ──────────────────────────────────────────────────────────── */
/* ── Asistente de alta (/empezar) ────────────────────────────────────── */
.empezar { max-width: 720px; overflow-wrap: anywhere; }
.pasos { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; color: var(--ink-2); }
.pasos-barra { display: flex; flex: 1; gap: 4px; max-width: 240px; list-style: none; }
.pasos-barra li { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); }
.pasos-barra li.hecho { background: var(--ink); }
.paso-error { margin-bottom: 24px; padding: 12px 16px; font-size: 14px; line-height: 1.5; color: var(--danger); background: var(--danger-tenue); border: 1px solid var(--danger); border-radius: var(--r-sm); }
.paso-ayuda { margin-bottom: 32px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.paso-ayuda .label { margin-bottom: 8px; }
.paso-ayuda ul { margin: 0 0 16px 18px; }
.paso-ayuda ul:last-child { margin-bottom: 0; }
.paso-ayuda li + li { margin-top: 4px; }
.paso-ayuda blockquote { padding-left: 12px; border-left: 2px solid var(--rule); color: var(--ink); }
.paso-nota { margin-top: 8px; }
.paso-aviso { margin-bottom: 24px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.paso-listas { margin-top: 32px; }
.paso-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.paso-acciones button.saltar { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.paso-acciones button.saltar:hover { border-color: var(--ink-3); background: var(--surface); box-shadow: var(--sombra-flotante); }
.paso-enlace { font-size: 14px; color: var(--ink-2); }
.boton-principal { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 24px; border-radius: var(--r-sm); background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; text-decoration: none; }
.boton-principal:hover { background: var(--ink-suave); }

@media (max-width: 900px) {
  .armazon { flex-direction: column; }
  /* align-self: stretch + min-width: 0 keep the bar at the viewport's width (flex-start sized it to
     its content, ~800 px, and the whole page scrolled sideways); the links scroll inside it. */
  .rail { position: sticky; top: 0; z-index: 30; align-self: stretch; min-width: 0; width: auto; height: auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .marca { padding: 0 12px 0 0; margin: 0 4px 0 0; border-bottom: 0; border-right: 1px solid var(--rail-hair); white-space: nowrap; }
  .marca .etiqueta { display: none; }
  .marca strong { font-size: 14px; }
  .rail nav { flex-direction: row; gap: 4px; flex: none; }
  .marca, .rail-pie { flex: none; }
  .page { min-width: 0; }
  .rail nav a { white-space: nowrap; }
  .rail-pie { margin: 0 0 0 auto; padding: 0; border: 0; flex-direction: row; }
  .rail-boton:not(.rail-contratar) span { display: none; }
  .rail-boton.rail-contratar { width: auto; padding: 0 12px; }
  .rail-boton { width: 36px; padding: 0; justify-content: center; }
  .page { padding: 32px 24px 128px; }
  .guia-tarjeta { left: 50%; }
  .actions { left: 0; padding: 12px 24px; flex-wrap: wrap; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .filtros { grid-template-columns: 1fr; gap: 32px; }
  .filtros-mapa { position: static; }
  .doc-grid { grid-template-columns: 1fr; }
  .htable .hide-sm, .stack thead { display: none; }
  .stack tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .stack tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .lista .stack tr { padding-left: 12px; padding-right: 12px; }
  .stack tr.nueva { background: var(--danger-tenue); border: 1px solid var(--danger); padding: 12px; }
  .stack tr.nueva + tr.nueva { border-top: 0; }
  .stack tr.nueva td { background: none; border: 0 !important; }
  .stack td { display: block; grid-column: 1 / -1; min-width: 0; max-width: none !important; padding: 0 !important; border: 0; }
  .stack td.ico-cell { grid-column: 1; grid-row: span 2; }
  .stack td.ico-cell ~ td { grid-column: 2; }
  .cita-pop { position: fixed; left: 16px !important; right: 16px !important; bottom: 84px; width: auto; max-width: none; }
  #toast { right: 16px; left: 16px; max-width: none; top: 64px; bottom: auto; transform: translateY(-8px); }
  .actions.show ~ #toast { bottom: auto; }
  body:has(.actions.flotante.show) #toast { bottom: auto; }
  .actions.flotante { left: auto; right: 16px; bottom: 16px; padding: 0; }
}
@media (max-width: 640px) {
  .page { padding: 24px 16px 128px; }
  .guia-tarjeta, .guia.centro .guia-tarjeta { left: 12px; right: 12px; width: auto; padding: 16px; }
  .guia-tarjeta { bottom: 12px; transform: none; }
  .guia-tarjeta.arriba { top: 12px; }
  .guia.centro .guia-tarjeta { transform: translateY(-50%); padding: 20px; }
  .guia.centro h2 { font-size: 24px; }
  .guia .btn.guia-sigue { flex: 1; }
  .correo-cab, .correo-cuerpo { padding: 16px; }
  .actions { padding: 12px 16px; gap: 6px; }
  .actions.flotante { padding: 0; }
  .grid-2, .risks, .filtros .grid-2 { grid-template-columns: 1fr; }
  .regiones .opciones-lista { --cols: 1; }
  .mapa-modal { padding: 16px; }
  .mapa-modal-cab, .mapa-modal-cuerpo { padding: 12px 16px; }
  .mapa-modal #map-wrap { width: min(calc(100vw - 66px), calc((100dvh - 150px) * var(--aspecto, 1.4))); }
  .regiones .opcion { border-right: 0 !important; }
  .card { padding: 16px; }
  .tl { flex-direction: column; margin-left: 4px; }
  .tl li { border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 16px 16px; }
  .tl li:last-child { padding-bottom: 0; }
  .tl li::before { top: 4px; left: -5px; }
  .acceso-card { padding: 24px; }
  .paso-acciones > * { flex: 1 1 100%; }
  .paso-ayuda { padding: 16px; }
}

/* Dianas táctiles */
@media (pointer: coarse) {
  .chip button, .file-x, .file-row > button { width: 36px; height: 36px; }
  .rail nav a, .toggle a, .toggle button, .pill-cb + label { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .spinner { animation-duration: 0.8s !important; }
}