/* ==========================================================================
   Base de Kolekto: fuentes, tokens, controles, menús, diálogos y avisos.
   El sistema completo (cuándo usar cada pieza) está en docs/diseno.md.
   ========================================================================== */

/* Newsreader (títulos y cifras grandes, con tamaño óptico) e Instrument Sans (texto e interfaz, con
   ancho variable para etiquetas compactas). Las dos con licencia OFL y cifras tabulares. */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-latin-opsz-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin-wdth-normal.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  /* ---- Paleta «Tinta»: grafito cálido, marfil y latón ---- */
  --ink-950: #0b0b0c;
  --ink-900: #101012;
  --ink-850: #141416;
  --ink-800: #19191c;
  --ink-750: #202024;
  --ink-700: #29292e;
  --ink-600: #34343a;
  --ink-500: #46464d;
  --ivory: #eeece7;
  --ivory-2: #b6b3ac;
  --ivory-3: #8d8b85;
  --brass: #c9a35b;
  --brass-2: #e2c286;

  /* Papeles: fondo, pozos (campos, tablas) y superficies que suben */
  --bg: var(--ink-950);
  --bg-2: var(--ink-900);
  --surface: var(--ink-850);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-750);
  --surface-4: var(--ink-700);
  --overlay: rgba(20, 20, 22, .97); /* menús, avisos y paneles flotantes */
  --scrim: rgba(5, 5, 6, .74); /* fondo tras un diálogo */
  /* Líneas: filete fino, borde de control y borde al pasar por encima */
  --line: #232326;
  --line-2: #303035;
  --line-3: #4a4a51;
  --line-soft: rgba(255, 255, 255, .055); /* filas de tabla y separadores sobre cualquier fondo */
  /* Texto: principal, secundario y apagado (los tres con contraste AA sobre --surface) */
  --text: var(--ivory);
  --text-2: var(--ivory-2);
  --muted: var(--ivory-3);
  --faint: #5d5c58; /* solo adornos, nunca texto */

  /* ---- Acento: el del juego de cartas (ver [data-game] abajo). Por defecto, el latón de la marca ---- */
  --accent: var(--brass);
  --accent-2: var(--brass-2); /* texto y líneas de acento sobre fondo oscuro */
  --accent-ink: #1d1507; /* texto sobre un relleno de acento */
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 50%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 7%, transparent);

  /* Oro de verdad (no es el acento): rarezas, medallas, monedas y los juegos de la mesa */
  --gold: #e9b949;
  --gold-2: #f8d272;
  --gold-soft: rgba(233, 185, 73, .14);
  --gold-ink: #231903;

  /* ---- Semánticos: ganancia, pérdida, aviso e información ---- */
  --ok: #3fbf8c;
  --ok-2: #7fdcb4;
  --ok-ink: #04281a;
  --ok-soft: rgba(63, 191, 140, .12);
  --bad: #f06b6b;
  --bad-2: #ffa3a3;
  --bad-soft: rgba(240, 107, 107, .12);
  --warn: #e5a54b;
  --warn-soft: rgba(229, 165, 75, .12);
  --info: #79aaf2;
  --info-soft: rgba(121, 170, 242, .13);

  /* ---- Letra ---- */
  --font: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif; /* la de la marca: no cambia en ningún sitio */
  --display: var(--serif); /* títulos; la mesa la cambia por su letra grabada (mesa.css) */
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  /* Escala (11 solo para etiquetas en mayúsculas) */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  /* Etiqueta: mayúsculas compactas (tablas, KPIs, secciones) */
  --label-stretch: 88%;
  --label-track: .09em;

  /* ---- Espacio (base 4) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Radios: finos; la píldora solo para avatares, contadores e interruptores ---- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;
  --radius-s: var(--r-md);
  --radius: var(--r-lg);
  --radius-l: var(--r-xl);

  /* ---- Elevación: 1 controles, 2 menús y avisos, 3 diálogos ---- */
  --hairline-top: inset 0 1px 0 rgba(255, 255, 255, .04);
  --e-1: 0 1px 2px rgba(0, 0, 0, .35);
  --e-2: 0 12px 32px -6px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .25);
  --e-3: 0 32px 80px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .3);
  --shadow: var(--e-2);
  --shadow-l: var(--e-3);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, .45), 0 10px 24px -10px rgba(0, 0, 0, .6); /* cartas sueltas */

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-1: .12s;
  --dur-2: .2s;
  --dur-3: .32s;

  /* ---- Controles ---- */
  --control-h: 36px;
  --control-h-sm: 30px;
  --control-h-lg: 44px;
  --focus: var(--accent-2);

  /* Grano muy fino sobre el fondo */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --topbar-h: 60px;
  --catalog-w: 440px;
  color-scheme: dark;
  font-family: var(--font);
  font-feature-settings: 'kern', 'calt';
}

/* ---- Acento de cada juego de cartas (game.js pone data-game en <html>). Sin rojo ni verde: son
   pérdida y ganancia. La marca (logo, botón principal) no cambia. Los colores sueltos (--g-<juego>)
   sirven para pintar un juego fuera de su sección: el selector, la portada pública. ---- */
:root {
  --g-onepiece: #e2ae4d;
  --g-pokemon: #6aa6ff;
  --g-dbsfw: #f2913f;
  --g-digimon: #43c2e4;
  --g-yugioh: #a88bf4;
  --g-magic: #e27cb3;
  --g-lorcana: #8f97ff;
}
[data-game="onepiece"] { --accent: var(--g-onepiece); --accent-2: #f0ca7e; --accent-ink: #1f1505; }
[data-game="pokemon"] { --accent: var(--g-pokemon); --accent-2: #a6c9ff; --accent-ink: #07152b; }
[data-game="dbsfw"] { --accent: var(--g-dbsfw); --accent-2: #f9b77c; --accent-ink: #2a1303; }
[data-game="digimon"] { --accent: var(--g-digimon); --accent-2: #8fdcf0; --accent-ink: #03222b; }
[data-game="yugioh"] { --accent: var(--g-yugioh); --accent-2: #c9b6fa; --accent-ink: #170c33; }
[data-game="magic"] { --accent: var(--g-magic); --accent-2: #f0aed1; --accent-ink: #2d0a1c; }
[data-game="lorcana"] { --accent: var(--g-lorcana); --accent-2: #c3c8ff; --accent-ink: #0d1036; }

*, *::before, *::after { box-sizing: border-box; }
/* Una rejilla sin columnas propias (las que apilan cosas: paneles, filas, tarjetas) no pasa de su ancho:
   su columna implícita puede encoger hasta 0 en vez de crecer con un texto que no se parte, que es lo
   que sacaba la página por la derecha en el móvil (docs/diseno.md §10). Sin especificidad: cualquier
   regla con sus columnas manda */
:where(*) { grid-auto-columns: minmax(0, auto); }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.45;
  /* Un velo muy suave del color del juego arriba: cada juego se siente suyo sin cambiar la marca */
  background:
    radial-gradient(1400px 520px at 50% -260px, var(--accent-glow), transparent 70%),
    var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body::before { /* grano sutil de fondo */
  content: "";
  position: fixed;
  inset: 0;
  background: var(--noise);
  opacity: .035;
  pointer-events: none;
  z-index: 0;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: var(--accent-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { text-wrap: balance; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-xs); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Título con la letra de la marca y cifra grande */
.display { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; font-optical-sizing: auto; }
.label-caps { font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
kbd {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  padding: 1px 6px;
  color: var(--text-2);
}
code { font-family: var(--mono); background: var(--surface-3); border-radius: var(--r-xs); padding: 1px 6px; font-size: var(--fs-xs); }
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); color: #fff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Barras de desplazamiento ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--line-3); }

/* ---------- Botones ----------
   .btn secundario (el de siempre) · .btn-primary la acción principal de la vista: marfil, uno por
   vista · .btn-accent el color del juego, para lo propio del juego · .btn-ghost sin caja ·
   .btn-danger para borrar. Tamaños: .btn-sm, .btn-lg; .icon-btn cuadrado. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--control-h);
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  box-shadow: var(--hairline-top);
  color: var(--text);
  font-weight: 560;
  letter-spacing: .005em;
  white-space: nowrap;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform .1s, box-shadow var(--dur-1);
}
.btn:hover { background: var(--surface-3); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn .i { width: 17px; height: 17px; }
.btn-primary {
  background: var(--ivory);
  border-color: transparent;
  color: var(--ink-950);
  font-weight: 620;
  box-shadow: var(--e-1), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.btn-primary:hover { background: #fff; border-color: transparent; }
.btn-accent { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 620; box-shadow: var(--e-1); }
.btn-accent:hover { background: var(--accent-2); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.btn-danger { color: var(--bad-2); }
.btn-danger:hover { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.btn-sm { height: var(--control-h-sm); padding: 0 10px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-sm .i { width: 15px; height: 15px; }
.icon-btn { width: var(--control-h); padding: 0; }
.icon-btn.btn-sm { width: var(--control-h-sm); }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-2); font-weight: 560; text-underline-offset: 3px; }
.link-btn:hover { text-decoration: underline; }
.badge-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--surface-4);
  color: var(--text);
  font-size: var(--fs-2xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  display: inline-grid;
  place-items: center;
}

/* Control segmentado: elegir una opción de pocas */
.segmented { display: inline-flex; padding: 2px; gap: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.segmented button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-weight: 560;
  font-size: var(--fs-sm);
  transition: color var(--dur-1), background var(--dur-1);
}
.segmented button .i { width: 16px; height: 16px; }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2), var(--e-1); }

/* ---------- Campos ---------- */
.field { display: grid; gap: 6px; font-size: var(--fs-xs); color: var(--muted); font-weight: 550; }
.input, .select, textarea.input {
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 0 11px;
  color: var(--text);
  font-size: var(--fs-md);
  transition: border-color var(--dur-1), box-shadow var(--dur-1), background var(--dur-1);
}
.input::placeholder { color: var(--muted); opacity: .8; }
.input:hover, .select:hover { border-color: var(--line-3); }
textarea.input { height: auto; padding: 9px 11px; resize: vertical; line-height: 1.45; }
.input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d8b85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.select option, .select optgroup { background: var(--surface); }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); }
.check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.radio-list { display: grid; gap: 8px; }
.radio-list .check { align-items: flex-start; }
.radio-list .check small { display: block; color: var(--muted); font-size: var(--fs-xs); }

/* ---------- Chips: lo que se elige (filtros, atajos, tipos). Esquina fina, no píldora ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-2);
  border-radius: var(--r-sm);
  padding: 0 10px;
  font-size: var(--fs-xs);
  font-weight: 560;
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip.on { background: var(--accent-soft); color: var(--text); border-color: var(--accent-line); }
.chip.color-chip { width: 26px; height: 26px; padding: 0; border-width: 2px; border-color: rgba(255, 255, 255, .12); border-radius: var(--r-pill); }
.chip.color-chip.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Etiquetas de rareza y versión (colores del juego, no de la marca) ---------- */
.rar {
  display: inline-grid;
  place-items: center;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: .03em;
  background: var(--surface-4);
  color: var(--text);
  flex: none;
}
.rar.SEC { background: linear-gradient(90deg, #f6d36b, #f39c3c); color: #2a1700; }
.rar.TR { background: linear-gradient(90deg, #fb7185, #e11d48); color: #fff; }
.rar.SR { background: #6aa8ff; color: #06172e; }
.rar.L { background: #ff8080; color: #2c0606; }
.rar.PR { background: #4fd6a2; color: #04261a; }
.rar.DON { background: #c3c8d1; color: #111; }
/* Disney Lorcana: sus rarezas (Legendaria dorada, Épica, Enchanted e Icónica) */
[data-game="lorcana"] .rar.L, [data-game="lorcana"] .rdot.r-L { background: linear-gradient(90deg, #f6d36b, #e0a33c); color: #2a1700; }
[data-game="lorcana"] .rar.EP, [data-game="lorcana"] .rdot.r-EP { background: linear-gradient(90deg, #f08bd0, #b56cf2); color: #22062e; }
[data-game="lorcana"] .rar.E, [data-game="lorcana"] .rdot.r-E { background: linear-gradient(90deg, #7fe0ff, #b38bff, #ff9ad5); color: #12082a; }
[data-game="lorcana"] .rar.I, [data-game="lorcana"] .rdot.r-I { background: linear-gradient(90deg, #fff1b8, #ffd36b, #ff9a6b); color: #2a1300; }
[data-game="lorcana"] .rar.P, [data-game="lorcana"] .rdot.r-P { background: #4fd6a2; color: #04261a; }
.vtag { font-size: var(--fs-2xs); font-weight: 700; font-stretch: 92%; letter-spacing: .05em; color: var(--accent-2); flex: none; }

/* ---------- Menús ---------- */
.menu {
  position: fixed;
  z-index: 80;
  min-width: 230px;
  max-width: min(320px, calc(100vw - 16px));
  /* Nunca más alto que la pantalla: con muchas opciones (o el móvil en horizontal) se desplaza dentro */
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 5px;
  box-shadow: var(--e-2), var(--hairline-top);
  animation: pop-in .14s var(--ease);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-sm);
}
.menu-item .i { width: 16px; height: 16px; color: var(--muted); }
.menu-item:hover:not(:disabled), .menu-item.active { background: var(--surface-3); }
.menu-item:hover:not(:disabled) .i, .menu-item.active .i { color: var(--text); }
.menu-item:disabled { opacity: .38; cursor: default; }
.menu-item.danger, .menu-item.danger .i { color: var(--bad-2); }
.menu-item .grow { flex: 1; min-width: 0; }
.menu-item .hint { color: var(--muted); font-size: var(--fs-xs); }
.menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu-label { padding: 8px 10px 4px; color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; }
/* Banderas de los idiomas (flags.js) y su fila en el menú de idioma (lang-switch.js): en toda la app y en la mesa */
.flag { display: inline-block; flex: none; width: 18px; height: 12px; vertical-align: -1px; border-radius: 2px; }
.menu-lang { display: inline-flex; align-items: center; gap: 10px; }
.menu-lang .flag { width: 21px; height: 14px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---------- Diálogos ---------- */
.dialog {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  box-shadow: var(--e-3), var(--hairline-top);
  overflow: hidden;
}
/* Fijo a la pantalla, no a la página: si no, lo que asoma mientras entra (el cajón llega desde 40 px a
   la derecha) cuenta como ancho de la página y en el móvil Chrome la ensancha para siempre */
.dialog[open] { position: fixed; display: flex; flex-direction: column; animation: dialog-in var(--dur-2) var(--ease); }
.dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.dialog.wide { width: min(980px, calc(100vw - 32px)); }
.dialog.mid { width: min(760px, calc(100vw - 32px)); }
.dlg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px 24px;
  border-bottom: 1px solid var(--line);
}
.dlg-head h2 { margin: 0; flex: 1; font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
/* El subtítulo, siempre en su línea bajo el título (sin «·» delante) */
.dlg-head .sub { display: block; margin-top: 3px; color: var(--muted); font-family: var(--font); font-size: var(--fs-sm); font-weight: 450; letter-spacing: 0; }
.dlg-body { padding: 20px 24px; overflow: auto; flex: 1; min-height: 0; }
.dlg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.dlg-foot .spacer { flex: 1; }
.form-grid { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
/* Dirección de imagen + botón para subir una foto */
.img-pick { display: flex; gap: 8px; }
.img-pick .input { flex: 1; min-width: 0; }
.img-pick .btn { flex: none; cursor: pointer; }
.section-title { margin: 0 0 10px; font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.divider { height: 1px; background: var(--line); margin: 6px 0; }

/* ---------- Avisos ---------- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 90; pointer-events: none; justify-items: center; }
.toast {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 10px 12px 10px 14px;
  box-shadow: var(--e-2), var(--hairline-top);
  pointer-events: auto;
  animation: toast-in .22s var(--ease);
  font-size: var(--fs-sm);
}
.toast .i { color: var(--ok); width: 17px; height: 17px; }
.toast .link-btn { padding-left: 12px; border-left: 1px solid var(--line-2); }
.toast.out { animation: toast-out .2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---------- Ayuda ligera ---------- */
.tip {
  position: fixed;
  z-index: 95;
  pointer-events: none;
  background: var(--overlay);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-size: var(--fs-xs);
  padding: 6px 9px;
  border-radius: var(--r-sm);
  box-shadow: var(--e-2);
  max-width: 280px;
}

/* ---------- Marca: el símbolo (tres por tres fundas que dibujan una K) y el nombre ---------- */
.k-mark { display: block; flex: none; }
.k-mark .k-on { fill: var(--ivory); }
.k-mark .k-hit { fill: var(--brass); }
.k-mark .k-off { fill: none; stroke: var(--ivory); stroke-opacity: .28; stroke-width: 1; }
.k-word { font-family: var(--serif); font-weight: 560; font-size: 21px; line-height: 1; letter-spacing: -.012em; color: var(--text); }

/* Menos movimiento: sin transiciones de verdad (0 s, no .01 ms: con cualquier duración, cada cambio de
   tamaño se anima y lo que se mide justo después sale con el valor de antes; el libro se ajusta así,
   fitBinder en binder-pages.js, y salía con cartas de 40 px o de 330 px). Nadie espera a transitionend */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}