/* ==========================================================================
   DECKYARD TCG — LA MARCA APLICADA A LA WEB
   ==========================================================================

   ESTE ARCHIVO SE PUEDE EDITAR EN CALIENTE (Bloc de notas + F5).

   Es la última hoja que carga TODA página, después de global.css y de la
   hoja propia de cada una. Por eso manda sobre ellas sin tener que
   reescribirlas: si un día hubiera que volver al diseño anterior, basta con
   quitar la línea que carga este archivo (constante _HOJA_MARCA en
   app/server.py). La fuente de verdad es la GUÍA DE MARCA v1.0
   (bocetos/guia-de-marca-deckyard.html y Guia-de-marca-Deckyard.pdf).

   Índice
     1. Letras (alojadas en app/estilos/fuentes, licencia SIL OFL 1.1)
     2. Colores: modo noche (predeterminado) y modo día
     3. Base de todas las páginas: fondo con cuadrícula, texto, foco
     4. Cabecera
     5. Pie: cajetín de plano
     6+. Piezas y páginas (se van añadiendo por partes)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LETRAS · Barlow Semi Condensed (títulos y logotipo), Barlow (interfaz y
   lectura) y DM Mono (datos y etiquetas). Solo el juego latino: cubre los
   cinco idiomas de la web; lo demás (japonés, chino…) usa la del sistema.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fuentes/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/barlow-semi-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fuentes/barlow-semi-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fuentes/dm-mono-500.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   2. COLORES · Paleta «Plano» (guía, apartado 3)
   Las variables con nombre de la guía (--m-*) son las de la marca; debajo se
   reasignan las que ya usaba la web (--fondo, --panel, --acento…), para que
   todas las hojas anteriores pasen a la marca sin tocarlas.
   -------------------------------------------------------------------------- */
:root {
  --m-fondo: #0e1722;        --m-superficie: #152233;   --m-elevada: #1c2c40;
  --m-linea: #2a3d55;        --m-control: #62809f;
  --m-texto: #f2f3ef;        --m-texto-2: #a4b4c8;
  --m-acento: #f2f3ef;       --m-acento-texto: #0e1722; --m-acento-encima: #d9dbd4;
  --m-trazo: #7fb8e6;        --m-exito: #4cc98a;        --m-aviso: #f2c14e;
  --m-error: #ff7070;        --m-info: #7fb8e6;
  --m-cuadricula: rgba(127, 184, 230, .10);
  /* Encima de una carta: SIEMPRE los colores de noche, también de día. */
  --m-sobre-carta: rgba(14, 23, 34, .88);

  --m-titulos: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --m-letra: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --m-datos: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --m-radio: 2px;
  --m-pulsable: 40px;        /* escritorio: todo lo que se pulsa */
  --m-pulsable-movil: 44px;
  --m-movimiento: 140ms;

  /* Las variables de siempre, ahora con la marca */
  --fondo: var(--m-fondo);          --fondo-alto: var(--m-fondo);
  --panel: var(--m-superficie);     --panel-alto: var(--m-superficie);
  --borde: var(--m-linea);          --borde-brillo: var(--m-control);
  --texto: var(--m-texto);          --texto-suave: var(--m-texto-2);  --texto-tenue: var(--m-texto-2);
  --acento: var(--m-acento);        --acento-claro: var(--m-acento);  --acento-oscuro: var(--m-control);
  --radio: var(--m-radio);          --radio-campo: var(--m-radio);
  --transicion: var(--m-movimiento) ease;
  --fuente: var(--m-letra);
  --ancho-maximo: 1264px;
  color-scheme: dark;
}

/* Modo día: papel de plano. Se elige con el botón de la cabecera. */
html[data-modo="dia"] {
  --m-fondo: #f2f3ef;        --m-superficie: #ffffff;   --m-elevada: #e8eae4;
  --m-linea: #d3d7cf;        --m-control: #737f8c;
  --m-texto: #0e1722;        --m-texto-2: #4f5d6c;
  --m-acento: #0e1722;       --m-acento-texto: #f2f3ef; --m-acento-encima: #2a3d55;
  --m-trazo: #1f5fa8;        --m-exito: #1d7a4a;        --m-aviso: #8a5a00;
  --m-error: #b8322a;        --m-info: #1f5fa8;
  --m-cuadricula: rgba(31, 95, 168, .08);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   3. BASE · Plano a sangre: la cuadrícula ocupa todo el fondo y las cajas van
   lisas encima (guía, apartado 6).
   -------------------------------------------------------------------------- */
html { background: var(--m-fondo); }
body {
  font-family: var(--m-letra);
  font-size: 16px;
  color: var(--m-texto);
  background-color: var(--m-fondo);
  background-image:
    linear-gradient(var(--m-cuadricula) 1px, transparent 1px),
    linear-gradient(90deg, var(--m-cuadricula) 1px, transparent 1px);
  background-size: 24px 24px;
  background-repeat: repeat;
  background-attachment: scroll;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--m-texto); text-decoration-color: var(--m-trazo); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--m-trazo); outline-offset: 2px;
}
::selection { background: var(--m-trazo); color: var(--m-fondo); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* La grúa: siempre completa y de un color (el del texto que la rodea). */
.grua, .logo-grua { display: block; flex: none; }

/* --------------------------------------------------------------------------
   4. CABECERA · logotipo · menú · idiomas · noche/día
   -------------------------------------------------------------------------- */
.barra {
  background: var(--m-fondo);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--m-linea);
  font-family: var(--m-letra);
}
.barra-interior { max-width: var(--ancho-maximo); height: 64px; padding: 0 24px; gap: 26px; }

.logo { gap: 10px; color: var(--m-texto); }
.logo-grua { width: 30px; height: 30px; color: var(--m-texto); }
.logo-nombre {
  display: inline-flex; align-items: center;
  font-family: var(--m-titulos); font-weight: 700; font-size: 22px; line-height: 1;
  letter-spacing: 0; text-transform: none; color: var(--m-texto);
}
/* La placa «TCG»: la misma letra al 36 %, negrita, letras separadas y un borde
   del color del texto (guía, apartado 2). */
.logo-nombre .logo-placa, .logo-nombre > span {
  font-family: var(--m-titulos); font-weight: 700; color: var(--m-texto);
  font-size: .36em; letter-spacing: .14em; line-height: 1;
  border: .12em solid currentColor; border-radius: .2em;
  padding: .18em .32em .14em .46em; margin-left: .45em;
}

.barra nav { gap: 2px; }
.barra nav a {
  padding: 10px 10px; border-radius: 0;
  font-family: var(--m-letra); font-size: 14px; font-weight: 600; letter-spacing: 0;
  color: var(--m-texto-2);
  min-height: var(--m-pulsable); display: inline-flex; align-items: center;
}
.barra nav a:hover { background: none; color: var(--m-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.barra nav a.activo { color: var(--m-texto); }
.barra nav a.activo::after {
  left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 0; background: var(--m-texto);
}
.barra nav a.activo:hover { text-decoration: none; }

.barra-idiomas { gap: 12px; }
.bi-icono { color: var(--m-texto-2); width: 18px; height: 18px; }
.barra-idiomas select {
  height: var(--m-pulsable); border-radius: var(--m-radio);
  border: 1px solid var(--m-control);
  background-color: transparent;
  color: var(--m-texto); font-family: var(--m-letra); font-weight: 600; font-size: 13px;
  padding: 0 28px 0 10px;
}
.barra-idiomas select:hover { background-color: var(--m-elevada); }
.barra-idiomas option { background: var(--m-superficie); color: var(--m-texto); }

.barra-modo {
  flex: none; width: var(--m-pulsable); height: var(--m-pulsable);
  display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  background: transparent; color: var(--m-texto);
  border: 1px solid var(--m-control); border-radius: var(--m-radio);
  transition: background var(--m-movimiento) ease;
}
.barra-modo:hover { background: var(--m-elevada); }
.modo-icono { width: 20px; height: 20px; }
.modo-luna { display: none; }
html[data-modo="dia"] .modo-sol { display: none; }
html[data-modo="dia"] .modo-luna { display: block; }

@media (max-width: 1340px) { .barra-interior { gap: 18px; } .barra nav a { padding-left: 8px; padding-right: 8px; } }
@media (max-width: 1250px) { .barra-interior { height: auto; padding-top: 10px; padding-bottom: 10px; } }

/* --------------------------------------------------------------------------
   5. PIE · cajetín de plano (guía, apartado 6). Mismo orden de siempre:
   redes · marca · aviso independiente · aviso de Contenido de Fans · ©.
   -------------------------------------------------------------------------- */
.pie-global {
  margin-top: 56px;
  background: transparent;
  border-top: 1px solid var(--m-linea);
  color: var(--m-texto-2);
  font-family: var(--m-letra);
}
.pie-interior.pie-cajetin {
  max-width: calc(var(--ancho-maximo) - 48px);   /* mismo ancho que el contenido de la cabecera */
  margin: 40px auto 44px;
  padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0; text-align: left; align-items: stretch;
  border: 1px solid var(--m-control);
  background: var(--m-fondo);
  width: calc(100% - 48px);
}
.pie-cajetin > * { margin: 0; padding: 16px 20px; min-width: 0; }
.pie-cajetin .pie-redes { justify-content: flex-start; gap: 10px; }
.pie-cajetin .pie-marca { border-left: 1px solid var(--m-linea); justify-content: flex-end; gap: 10px; color: var(--m-texto); }
.pie-cajetin .pie-marca .logo-grua { width: 30px; height: 30px; }
.pie-cajetin .pie-marca .logo-nombre { font-size: 22px; }
.pie-cajetin .pie-legal {
  grid-column: 1 / -1; max-width: none; padding: 0; gap: 0;
  display: grid; border-top: 1px solid var(--m-linea);
}
.pie-cajetin .pie-legal .pie-aviso { padding: 14px 20px; }
.pie-cajetin .pie-legal .pie-aviso + .pie-aviso { border-top: 1px solid var(--m-linea); }
.pie-aviso { font-size: 13px; line-height: 1.55; color: var(--m-texto-2); }
.pie-aviso-destacado { font-size: 13px; font-weight: 600; color: var(--m-texto); letter-spacing: 0; }
.pie-aviso a { color: var(--m-texto-2); text-decoration: underline; text-decoration-color: var(--m-trazo); }
.pie-aviso a:hover { color: var(--m-texto); }
.pie-cajetin .pie-copyright {
  grid-column: 1 / -1; justify-self: stretch; text-align: right;
  border-top: 1px solid var(--m-linea);
  font-family: var(--m-datos); font-size: 12px; letter-spacing: .06em; color: var(--m-texto-2);
  padding: 12px 20px;
}

.rs {
  width: var(--m-pulsable); height: var(--m-pulsable); border-radius: var(--m-radio);
  background: var(--m-fondo); border: 1px solid var(--m-control); box-shadow: none;
  color: var(--m-texto-2);
}
.rs-pendiente { border-style: dashed; color: var(--m-texto-2); }
.rs-icono { font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .06em; }
a.rs:hover { color: var(--m-texto); border-color: var(--m-texto); transform: none; box-shadow: none; }

@media (max-width: 720px) {
  .pie-interior.pie-cajetin { grid-template-columns: minmax(0, 1fr); width: calc(100% - 32px); margin: 28px auto 32px; }
  .pie-cajetin .pie-marca { border-left: 0; border-top: 1px solid var(--m-linea); justify-content: flex-start; }
  .pie-cajetin .pie-copyright { text-align: left; }
  .rs { width: var(--m-pulsable-movil); height: var(--m-pulsable-movil); }
}

/* Portada y páginas que fijan html/body al alto de la ventana: la cuadrícula
   también en el lienzo, para que no se corte al bajar. */
html {
  background-image:
    linear-gradient(var(--m-cuadricula) 1px, transparent 1px),
    linear-gradient(90deg, var(--m-cuadricula) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pie-cajetin .pie-marca .logo-nombre { letter-spacing: 0; }

/* ==========================================================================
   6. PIEZAS COMUNES · Sistema visual «Plano técnico» (guía, apartado 5)
   Esquinas de 2 px, líneas de 1 px, sin sombras ni degradados. Todo lo que
   se pulsa, 40 px de alto en el escritorio. Un solo botón relleno por
   pantalla (el principal); lo activo, con subrayado, marco o ✓.
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--m-titulos); }

/* ---------- Títulos de página ---------- */
.titulo-pagina {
  font-family: var(--m-titulos); font-weight: 700; font-size: 36px; line-height: 1.1;
  letter-spacing: 0; text-transform: none;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--m-texto); -webkit-text-fill-color: currentColor;
  margin: 0 0 8px;
}
.subtitulo-pagina { font-size: 16px; line-height: 1.55; color: var(--m-texto-2); margin: 0 0 22px; max-width: 70ch; }

/* ---------- Cajas (antes «tarjetas» con degradado y sombra) ---------- */
.seccion {
  background: var(--m-superficie);
  border: 1px solid var(--m-linea);
  border-radius: var(--m-radio);
  box-shadow: none;
  padding: 24px;
}
.seccion:focus-within { border-color: var(--m-linea); box-shadow: none; }

/* Rótulo de caja: DM Mono en mayúsculas con una línea que sigue hasta el
   borde (guía, apartado 5). */
.seccion-titulo, .panel-cabecera h2 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--m-datos); font-weight: 500; font-size: 12px; line-height: 1.3;
  letter-spacing: .14em; text-transform: uppercase; color: var(--m-texto);
  margin: 0 0 16px;
}
.seccion-titulo::after { content: ""; flex: 1; height: 1px; background: var(--m-linea); }
.seccion-titulo .rotulo-n { color: var(--m-texto-2); }

/* ---------- Avisos: franja izquierda de 3 px + icono en marco + texto ---------- */
.nota-atajo {
  background: var(--m-superficie);
  border: 1px solid var(--m-linea); border-left: 3px solid var(--m-info);
  border-radius: var(--m-radio);
  font-size: 14px; color: var(--m-texto-2); padding: 14px 16px; gap: 12px;
}
.nota-atajo .icono { display: none; }
.nota-atajo::before, .caja-error::before {
  content: "i"; flex: none;
  width: 20px; height: 20px; display: inline-grid; place-items: center;
  border: 1px solid var(--m-info); border-radius: var(--m-radio); color: var(--m-info);
  font: 500 12px/1 var(--m-datos);
}
.nota-atajo strong, .nota-atajo b { color: var(--m-texto); }
.nota-atajo a { color: var(--m-texto); text-decoration-color: var(--m-trazo); }
.caja-error {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px;
  background: var(--m-superficie);
  border: 1px solid var(--m-linea); border-left: 3px solid var(--m-error);
  border-radius: var(--m-radio); padding: 14px 16px;
}
.caja-error::before { content: "✕"; border-color: var(--m-error); color: var(--m-error); grid-row: 1 / span 2; }
.caja-error p { color: var(--m-error); }
.caja-error ul { color: var(--m-texto); font-size: 14px; }
.mensaje-error { color: var(--m-error); font-size: 13px; }
.mensaje-error::before { content: "✕ "; }

/* ---------- Campos ---------- */
.campo label, .etiqueta { font-family: var(--m-letra); font-weight: 600; font-size: 14px; letter-spacing: 0; color: var(--m-texto); }
.ayuda { font-size: 13px; line-height: 1.45; color: var(--m-texto-2); }
input[type=text], input[type=number], input[type=search], input[type=email], select, textarea {
  background-color: var(--m-fondo);
  border: 1px solid var(--m-control);
  border-radius: var(--m-radio);
  color: var(--m-texto);
  font-family: var(--m-letra); font-size: 16px;
  min-height: var(--m-pulsable);
  padding: 8px 12px;
  box-shadow: none;
}
html[data-modo="dia"] input[type=text], html[data-modo="dia"] input[type=number],
html[data-modo="dia"] input[type=search], html[data-modo="dia"] select, html[data-modo="dia"] textarea { background-color: #ffffff; }
input::placeholder, textarea::placeholder { color: var(--m-texto-2); opacity: 1; }
input[type=text]:hover, input[type=number]:hover, select:hover, textarea:hover { border-color: var(--m-texto-2); }
input[type=text]:focus, input[type=number]:focus, input[type=search]:focus, select:focus, textarea:focus {
  outline: 2px solid var(--m-trazo); outline-offset: 2px;
  border-color: var(--m-control); background-color: var(--m-fondo); box-shadow: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--m-texto-2) 50%),
                    linear-gradient(135deg, var(--m-texto-2) 50%, transparent 50%);
}
textarea { font-family: var(--m-datos); font-size: 14px; line-height: 1.5; }

/* Sugerencias de los buscadores en vivo: la marcada, con fondo y barra azul. */
.sugerencias {
  background: var(--m-superficie); border: 1px solid var(--m-control); border-top: none;
  border-radius: 0 0 var(--m-radio) var(--m-radio); box-shadow: none;
}
.sugerencias div { color: var(--m-texto-2); font-size: 15px; min-height: var(--m-pulsable); padding: 9px 12px; }
.sugerencias div:hover, .sugerencias div.activa {
  background: var(--m-elevada); color: var(--m-texto); box-shadow: inset 3px 0 0 var(--m-trazo);
}
.sugerencias div small { color: var(--m-texto-2); }

/* Fichas de lo elegido (cartas imprescindibles, a evitar…). */
.chip {
  background: transparent; border: 1px solid var(--m-control); border-radius: var(--m-radio);
  color: var(--m-texto); font-size: 14px; font-weight: 600; min-height: var(--m-pulsable);
  padding: 0 4px 0 12px;
}
.chip button { color: var(--m-texto-2); min-height: 32px; min-width: 32px; }
.chip button:hover { color: var(--m-error); background: none; }

/* Casillas y opciones */
.fila-checkbox {
  background: transparent; border: 1px solid var(--m-linea); border-radius: var(--m-radio);
  min-height: var(--m-pulsable); align-items: center; padding: 10px 12px;
}
.fila-checkbox:hover { border-color: var(--m-control); background: transparent; }
.fila-checkbox label { font-size: 14px; font-weight: 400; color: var(--m-texto-2); align-items: center; }
.fila-checkbox:has(input:checked) { border-color: var(--m-control); }
.fila-checkbox:has(input:checked) label { color: var(--m-texto); }
input[type=checkbox], input[type=radio] { accent-color: var(--m-acento); }
.fila-checkbox input[type=checkbox] { width: 18px; height: 18px; margin: 0; }

/* ---------- Botones: principal (relleno, uno por pantalla), secundario
   (borde de control), texto, icono y peligro (rojo con borde). ---------- */
button, .boton-enlace {
  font-family: var(--m-letra); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--m-texto);
  background: transparent;
  border: 1px solid var(--m-control);
  border-radius: var(--m-radio);
  min-height: var(--m-pulsable);
  padding: 0 16px;
  box-shadow: none; filter: none;
  transition: background var(--m-movimiento) ease, border-color var(--m-movimiento) ease, color var(--m-movimiento) ease;
}
.boton-enlace { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 20px; }
button:hover, .boton-enlace:hover { background: var(--m-elevada); border-color: var(--m-texto); color: var(--m-texto); transform: none; }
button:active, .boton-enlace:active { transform: none; }
button:disabled { opacity: .42; background: transparent; border-color: var(--m-control); color: var(--m-texto-2); }

.boton-principal, button.destacado, .boton-enlace.destacado {
  font-family: var(--m-letra); font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none;
  color: var(--m-acento-texto);
  background: var(--m-acento);
  border: 1px solid var(--m-acento);
  border-radius: var(--m-radio);
  box-shadow: none; filter: none;
  min-height: 44px; padding: 0 28px;
}
.boton-principal:hover, button.destacado:hover, .boton-enlace.destacado:hover {
  background: var(--m-acento-encima); border-color: var(--m-acento-encima); color: var(--m-acento-texto);
  transform: none; filter: none; box-shadow: none;
}
.boton-principal:focus-visible { outline: 2px solid var(--m-trazo); outline-offset: 2px; }

button.peligro, .boton-enlace.peligro, button.btn-eliminar {
  background: transparent; border-color: var(--m-error); color: var(--m-error);
}
button.peligro:hover, button.btn-eliminar:hover { background: transparent; border-color: var(--m-error); color: var(--m-error); text-decoration: underline; }

.btn-icono { width: var(--m-pulsable); height: var(--m-pulsable); padding: 0; color: var(--m-texto); border-color: var(--m-control); }
.btn-icono svg { width: 20px; height: 20px; }
.btn-icono[aria-expanded="true"] { background: var(--m-elevada); border-color: var(--m-texto); color: var(--m-texto); }
.btn-icono .marca-activa { background: var(--m-trazo); border: 1px solid var(--m-fondo); top: 6px; right: 6px; }

/* ---------- Pestañas: subrayadas (antes, botón dorado) ---------- */
.pestanas {
  display: flex; gap: 22px; padding: 0; margin-bottom: 24px;
  background: none; border: 0; border-bottom: 1px solid var(--m-linea); border-radius: 0;
}
.pestanas button {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  min-height: var(--m-pulsable); padding: 12px 1px 10px; margin-bottom: -1px;
  font-size: 15px; font-weight: 600; color: var(--m-texto-2);
}
.pestanas button:hover { background: none; color: var(--m-texto); border-color: transparent; border-bottom-color: var(--m-control); }
.pestanas button.activa { background: none; color: var(--m-texto); font-weight: 600; border-bottom-color: var(--m-texto); }
.pestanas button.activa:hover { color: var(--m-texto); }
.pestanas button .cuenta-p, .pestanas button.activa .cuenta-p { font-family: var(--m-datos); font-size: 12px; font-weight: 400; opacity: 1; color: var(--m-texto-2); }

/* ---------- Interruptor de vista: la elegida, con ✓ ---------- */
.vista-toggle {
  background: transparent; border: 1px solid var(--m-control); border-radius: var(--m-radio);
  padding: 3px; gap: 3px;
}
.vista-toggle button {
  border: 0; border-radius: 0; background: none;
  min-height: 32px; height: 100%; padding: 0 12px;
  font-size: 14px; font-weight: 600; color: var(--m-texto-2);
}
.vista-toggle button:hover { background: var(--m-elevada); color: var(--m-texto); }
.vista-toggle button.activa { background: var(--m-elevada); color: var(--m-texto); font-weight: 600; }
.vista-toggle button.activa::before { content: "✓ "; }
.fila-controles select, .fila-controles .vista-toggle { height: var(--m-pulsable); }
.fila-controles label { font-size: 14px; font-weight: 600; color: var(--m-texto); }

.contador-resultados { font-family: var(--m-datos); font-size: 13px; color: var(--m-texto-2); }
.contador-resultados strong { color: var(--m-texto); font-weight: 500; }

/* ---------- Paneles flotantes (filtros, opciones) y modal ---------- */
.panel-flotante, .modal-caja {
  background: var(--m-superficie);
  border: 1px solid var(--m-control); border-radius: var(--m-radio);
  box-shadow: none;
}
.panel-cabecera, .modal-cabecera {
  background: var(--m-superficie); border-bottom: 1px solid var(--m-linea); border-radius: 0;
}
.panel-cabecera h2 { margin: 0; }
.modal-cabecera h2 { font-family: var(--m-titulos); font-weight: 600; font-size: 22px; color: var(--m-texto); }
.panel-cerrar, .modal-cerrar {
  width: var(--m-pulsable); height: var(--m-pulsable); min-height: 0; padding: 0;
  border: 1px solid transparent; border-radius: var(--m-radio); color: var(--m-texto);
}
.panel-cerrar:hover, .modal-cerrar:hover { border-color: var(--m-control); background: var(--m-elevada); }
.modal-overlay { background: rgba(6, 10, 16, .72); backdrop-filter: none; -webkit-backdrop-filter: none; }
.carta-menu-acciones { border-top-color: var(--m-linea); }
.filtro-bloque > label { font-family: var(--m-datos); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--m-texto); }

/* ---------- Galerías de cartas ---------- */
.galeria-carta {
  border: 1px solid var(--m-linea); border-radius: var(--m-radio);
  background: var(--m-superficie);
}
.galeria-carta:hover { border-color: var(--m-control); transform: none; box-shadow: none; }
.galeria-imagen-wrap img { border-radius: 4.6% / 3.3%; }
/* Lo que va encima de una carta: siempre colores de noche (guía, apartado 3). */
.galeria-carta .cantidad, .galeria-carta .valor-orden {
  font-family: var(--m-datos); font-size: 12px; font-weight: 500;
  background: var(--m-sobre-carta); color: #f2f3ef; border: 1px solid #a4b4c8;
  border-radius: var(--m-radio); padding: 2px 7px;
}
.galeria-carta .etiqueta { font-size: 13px; color: var(--m-texto-2); }
.carta-menu-btn {
  width: 32px; height: 32px; min-height: 0; border-radius: var(--m-radio);
  background: var(--m-sobre-carta); border: 1px solid #62809f; color: #f2f3ef;
}
.carta-menu-btn:hover { border-color: #f2f3ef; color: #f2f3ef; background: rgba(14, 23, 34, .95); }
.carta-menu-btn.en-tabla { background: transparent; border-color: var(--m-control); color: var(--m-texto); min-height: var(--m-pulsable); }
.sin-imagen-aviso { font-family: var(--m-datos); font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--m-texto-2); }

/* ---------- Hueco de carta sin elegir: la grúa (guía, apartado 6) ---------- */
.silueta {
  border: 1px dashed var(--m-control); border-radius: var(--m-radio);
  background: transparent; padding: 0; display: grid; place-items: center;
}
.silueta i { display: none; }
.silueta .s-arte { display: block; flex: none; width: 34%; aspect-ratio: 1; background: var(--m-texto-2);
  -webkit-mask: url("grua.svg") center / contain no-repeat; mask: url("grua.svg") center / contain no-repeat; }
.silueta .s-arte::after { content: none; }

/* ---------- Distintivos y estados ---------- */
.distintivo {
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  border-radius: var(--m-radio); padding: 3px 8px; background: transparent;
  border: 1px solid var(--m-control); color: var(--m-texto);
}
.distintivo.ok { border-color: var(--m-exito); background: transparent; color: var(--m-exito); }
.distintivo.error { border-color: var(--m-error); background: transparent; color: var(--m-error); }
.lista-avisos li { font-size: 14px; color: var(--m-texto-2); }
.lista-avisos li.error { color: var(--m-error); }

/* ---------- Grupos por tipo: la cota de plano «|— CREATURE · 16 —|» ---------- */
.grupo-tipo h3 {
  justify-content: center; gap: 10px; margin: 0 0 12px;
  font-family: var(--m-datos); font-weight: 500; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--m-texto-2);
}
.grupo-tipo h3::before, .grupo-tipo h3::after {
  content: ""; flex: 1; height: 10px; background: linear-gradient(var(--m-texto-2), var(--m-texto-2)) center / 100% 1px no-repeat;
}
.grupo-tipo h3::before { border-left: 1px solid var(--m-texto-2); }
.grupo-tipo h3::after { border-right: 1px solid var(--m-texto-2); }
.grupo-tipo h3 .cuenta { font-family: var(--m-datos); font-size: 12px; color: var(--m-texto-2); background: none; border: 0; padding: 0; letter-spacing: .06em; }

/* ---------- Tablas ---------- */
.tabla-datos { border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: var(--m-superficie); padding: 0; }
.tabla-datos th { font-family: var(--m-datos); font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--m-texto-2); border-bottom: 1px solid var(--m-control); }
.tabla-datos td { color: var(--m-texto); font-size: 14px; border-bottom: 1px solid var(--m-linea); }
.tabla-datos tbody tr:hover td { background: var(--m-elevada); }

/* ---------- Paginación: «página 1 de 26» ---------- */
.paginacion { font-family: var(--m-datos); font-size: 13px; color: var(--m-texto-2); }
.paginacion button { font-family: var(--m-letra); font-size: 14px; }

/* ---------- Botón de ayuda «i» ---------- */
.tip {
  width: 18px; height: 18px; border-radius: var(--m-radio);
  background: transparent; border: 1px solid var(--m-trazo); color: var(--m-trazo);
  font: 500 12px/1 var(--m-datos);
}
.tip::after {
  background: var(--m-elevada); border: 1px solid var(--m-control); color: var(--m-texto);
  border-radius: var(--m-radio); box-shadow: none; font-family: var(--m-letra); font-size: 13px;
}

/* ---------- Plegables ---------- */
details.plegable > summary { font-family: var(--m-letra); }
details.plegable > summary:hover { color: var(--m-texto); }

/* Rótulos numerados (guía, apartado 5): 01, 02… en el orden de la página,
   salvo que el rótulo ya traiga su propio número. */
body { counter-reset: rotulo; }
.seccion-titulo:not(:has(.rotulo-n))::before {
  counter-increment: rotulo;
  content: counter(rotulo, decimal-leading-zero);
  color: var(--m-texto-2);
}

/* Zona del comandante en «Generar mazo»: plana, sin degradado ni sombra. */
.panel-comandante {
  background: var(--m-elevada); border: 1px solid var(--m-linea);
  border-radius: var(--m-radio); box-shadow: none;
}

/* ==========================================================================
   7. PÁGINAS CON EL ESQUELETO CLÁSICO (_page: «Jugar», avisos de «no
      encontrado»…). Su <style> interno era claro; aquí se pasa a la marca
      sin tocar su HTML. Todo acotado a body.pagina-clasica.
   ========================================================================== */
body.pagina-clasica { color: var(--m-texto); line-height: 1.5; }
.pagina-clasica main.contenido { max-width: 1264px; margin: 48px auto; padding: 0 24px; }
.pagina-clasica main.contenido > h1 {
  font-family: var(--m-titulos); font-weight: 700; font-size: 36px; line-height: 1.1;
  color: var(--m-texto); margin: 0 0 24px;
}
.pagina-clasica h2, .pagina-clasica h3 { color: var(--m-texto); font-family: var(--m-titulos); }
.pagina-clasica .contenido a { color: var(--m-texto); }
/* El `button {…}` genérico del esqueleto no debe alcanzar a la cabecera ni al pie. */
.pagina-clasica .barra button, .pagina-clasica .pie-global button { margin: 0; }
.pagina-clasica .barra form label { margin: 0; font-weight: inherit; }
.pagina-clasica .contenido button {
  min-height: 40px; padding: 0 16px; margin-top: 16px;
  font-family: var(--m-letra); font-size: 14px; font-weight: 600;
  background: transparent; color: var(--m-texto);
  border: 1px solid var(--m-control); border-radius: var(--m-radio); cursor: pointer;
}
.pagina-clasica .contenido button:hover { background: var(--m-elevada); border-color: var(--m-texto); }
.pagina-clasica .contenido button:disabled { opacity: .45; cursor: not-allowed; }
.pagina-clasica .contenido .btn-eliminar { border-color: var(--m-error); color: var(--m-error); }
.pagina-clasica form label { color: var(--m-texto); }
.pagina-clasica form input[type=text], .pagina-clasica form input[type=number],
.pagina-clasica form textarea, .pagina-clasica .contenido select {
  background: var(--m-fondo); color: var(--m-texto);
  border: 1px solid var(--m-control); border-radius: var(--m-radio);
  min-height: 40px; padding: 8px 12px; font-size: 16px;
}
.pagina-clasica table { border-collapse: collapse; }
.pagina-clasica th {
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--m-texto-2); border-bottom: 1px solid var(--m-control);
}
.pagina-clasica td { border-bottom: 1px solid var(--m-linea); }
.pagina-clasica .ok { color: var(--m-exito); }
.pagina-clasica .error { color: var(--m-error); }
.pagina-clasica .aviso { color: var(--m-aviso); }
.pagina-clasica .caja {
  background: var(--m-superficie); border: 1px solid var(--m-linea);
  border-radius: var(--m-radio); padding: 24px;
}
.pagina-clasica code {
  font-family: var(--m-datos); font-size: 13px;
  background: var(--m-elevada); color: var(--m-texto); border-radius: var(--m-radio);
}

/* ==========================================================================
   8. PORTADA (Plano a sangre, Fase 7): cuatro cajas lisas en 2 × 2 con un
      hueco de 150 px en medio para el círculo de Mesa; las cartas de arriba
      pegadas arriba, las de abajo pegadas abajo, siempre por encima del
      círculo. Sin degradados, sin sombras, sin mordiscos.
   ========================================================================== */
.portada .contenedor { max-width: var(--ancho-maximo); padding: 0 24px; }
.portada .hero { padding: 56px 0 40px; display: grid; gap: 14px; }
.portada .hero-etiqueta {
  margin: 0; gap: 10px; color: var(--m-texto-2);
  font-family: var(--m-datos); font-weight: 500; font-size: 12px; line-height: 1;
  letter-spacing: .14em;
}
.portada .hero-etiqueta::before { width: 28px; background: var(--m-texto-2); }
.portada .hero h1 {
  margin: 0; font-family: var(--m-titulos); font-weight: 700;
  font-size: 52px; line-height: 1.02; letter-spacing: 0;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--m-texto);
}
.portada .hero p { font-size: 18px; line-height: 1.55; color: var(--m-texto-2); max-width: 60ch; }

.portada .bloques {
  grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 24px 0; padding-bottom: 0;
  counter-reset: portada;
}
.portada .bloque {
  min-height: 370px; isolation: auto; transform: none; transition: none;
  border-radius: var(--m-radio);
}
.portada .bloque:hover { transform: none; }
.portada .bloque-fondo {
  background: var(--m-superficie); border: 1px solid var(--m-linea);
  border-radius: var(--m-radio); box-shadow: none;
  -webkit-mask-image: none; mask-image: none;
}
.portada .bloque-fondo::after, .portada .muesca { display: none; }
.portada .bloque:hover .bloque-fondo { border-color: var(--m-control); box-shadow: none; }
.portada .bloque:focus-visible { outline: 2px solid var(--m-trazo); outline-offset: 2px; }

.portada .bloque-texto {
  padding: 24px; max-width: calc(100% - 168px - 24px);
  gap: 0; min-height: 370px; box-sizing: border-box;
}
.portada .b-escoger .bloque-texto, .portada .b-bulk .bloque-texto { padding-left: 88px; }
.portada .b-mazos .bloque-texto { max-width: calc(100% - 222px - 24px); }
.portada .bloque-tipo {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--m-datos); font-weight: 500; font-size: 12px; line-height: 1.3;
  letter-spacing: .14em; color: var(--m-texto);
}
.portada .bloque-tipo::before {
  counter-increment: portada; content: counter(portada, decimal-leading-zero);
  color: var(--m-texto-2);
}
.portada .bloque-tipo::after { content: ""; flex: 1; height: 1px; background: var(--m-linea); }
.portada .bloque-titulo {
  margin: 0 0 10px; font-family: var(--m-titulos); font-weight: 700;
  font-size: 28px; line-height: 1.15; letter-spacing: 0; text-transform: none;
}
.portada .bloque-desc { font-size: 16px; line-height: 1.55; color: var(--m-texto-2); max-width: 36ch; }
.portada .bloque-entrar {
  margin-top: auto; padding-top: 20px; gap: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--m-texto);
}
.portada .bloque-entrar { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.portada .bloque-entrar .flecha { text-decoration: none; }

/* Las cartas: 168 px; las de arriba pegadas arriba, las de abajo pegadas abajo. */
.portada .bloques .carta {
  z-index: 5; width: 168px; border-radius: 4.6% / 3.3%;
  box-shadow: none; background: #141414; transition: none; will-change: auto;
}
.portada .bloques .carta::after { display: none; }
.portada .b-generar .carta, .portada .b-generar:hover .carta { right: 24px; top: 24px; transform: rotate(5deg); }
.portada .b-escoger .carta, .portada .b-escoger:hover .carta { right: 24px; top: 24px; transform: rotate(-4deg); }
.portada .b-bulk .carta,    .portada .b-bulk:hover .carta    { right: 24px; top: auto; bottom: 24px; transform: rotate(4deg); }
/* Abanico de Mis mazos: tres cartas de 142 px dentro de 222 × 252, abajo a la derecha. */
.portada .b-mazos .carta { width: 142px; top: auto; filter: none; }
.portada .b-mazos .carta-1, .portada .b-mazos:hover .carta-1 { right: 104px; bottom: 32px; transform: rotate(-9deg); filter: none; }
.portada .b-mazos .carta-2, .portada .b-mazos:hover .carta-2 { right: 66px;  bottom: 40px; transform: rotate(-2deg); filter: none; }
.portada .b-mazos .carta-3, .portada .b-mazos:hover .carta-3 { right: 28px;  bottom: 32px; transform: rotate(6deg); }

/* El círculo de Mesa: 200 px en el hueco central, con un anillo del color del
   fondo y las cuatro marcas de registro. */
.portada .nucleo, .portada .nucleo:hover, .portada .nucleo:focus-visible {
  z-index: 4; width: 200px; height: 200px; aspect-ratio: auto; padding: 20px; gap: 6px;
  background: var(--m-fondo); border: 1px solid var(--m-control);
  outline: 10px solid var(--m-fondo); outline-offset: 0;
  box-shadow: none; transform: none; transition: border-color .15s;
}
.portada .nucleo:hover { border-color: var(--m-texto); }
.portada .nucleo:focus-visible { border-color: var(--m-trazo); }
.portada .nucleo::before, .portada .nucleo::after {
  content: ""; position: absolute; inset: auto; border-radius: 0; opacity: 1; z-index: 0;
}
.portada .nucleo::before {
  left: 50%; top: -11px; width: 1px; height: 220px; transform: translateX(-50%);
  background: linear-gradient(var(--m-trazo) 0 16px, transparent 16px 204px, var(--m-trazo) 204px);
}
.portada .nucleo::after {
  top: 50%; left: -11px; height: 1px; width: 220px; transform: translateY(-50%);
  background: linear-gradient(90deg, var(--m-trazo) 0 16px, transparent 16px 204px, var(--m-trazo) 204px);
}
.portada .nucleo-tipo {
  font-family: var(--m-datos); font-weight: 500; font-size: 12px; line-height: 1;
  letter-spacing: .14em; color: var(--m-texto-2);
}
.portada .nucleo-titulo {
  font-family: var(--m-titulos); font-weight: 700; font-size: 22px; line-height: 1.1;
  text-transform: none; letter-spacing: 0;
}
.portada .nucleo-entrar {
  margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--m-texto);
  text-decoration: underline; text-underline-offset: 3px;
}
.portada .nucleo-entrar .flecha { text-decoration: none; }

.portada .nota-local {
  border-top: 0; margin-top: 28px; padding: 0; justify-content: center; text-align: center;
  font-size: 13px; color: var(--m-texto-2);
}

/* Pantallas estrechas: una sola columna y el círculo (170 px) entre la
   segunda y la tercera tarjeta (Fase 8). */
@media (max-width: 1080px) {
  .portada .bloques { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .portada .b-generar { grid-row: 1; } .portada .b-escoger { grid-row: 2; }
  .portada .nucleo, .portada .nucleo:hover, .portada .nucleo:focus-visible {
    grid-column: 1; grid-row: 3; justify-self: center;
    width: 170px; height: 170px; min-height: 0; border-radius: 50%;
    flex-direction: column; justify-content: center; text-align: center; flex-wrap: nowrap;
    padding: 16px; margin: 8px 0;
  }
  .portada .nucleo::before { height: 190px; top: -11px;
    background: linear-gradient(var(--m-trazo) 0 16px, transparent 16px 174px, var(--m-trazo) 174px); }
  .portada .nucleo::after { width: 190px; left: -11px;
    background: linear-gradient(90deg, var(--m-trazo) 0 16px, transparent 16px 174px, var(--m-trazo) 174px); }
  .portada .nucleo-tipo, .portada .nucleo-titulo, .portada .nucleo-entrar { order: 0; width: auto; margin: 0; }
  .portada .b-mazos { grid-row: 4; } .portada .b-bulk { grid-row: 5; }
  .portada .b-escoger .bloque-texto, .portada .b-bulk .bloque-texto { padding-left: 24px; }
}
@media (max-width: 720px) {
  .portada .contenedor { padding: 0 16px; }
  .portada .hero { padding: 32px 0 24px; }
  .portada .hero h1 { font-size: 34px; line-height: 1.05; }
  .portada .hero p { font-size: 16px; }
  .portada .bloque, .portada .bloque-texto { min-height: 300px; }
  .portada .bloque-texto, .portada .b-mazos .bloque-texto { max-width: 60%; padding-right: 8px; }
  .portada .bloque-titulo { font-size: 24px; }
  .portada .bloques .carta { width: 120px; }
  .portada .b-generar .carta, .portada .b-escoger .carta, .portada .b-generar:hover .carta, .portada .b-escoger:hover .carta { right: 16px; top: 24px; }
  .portada .b-bulk .carta, .portada .b-bulk:hover .carta { right: 16px; bottom: 24px; }
  .portada .b-mazos .bloque-texto { max-width: 54%; }
  .portada .b-mazos .carta { width: 88px; }
  .portada .b-mazos .carta-1, .portada .b-mazos:hover .carta-1 { right: 60px; bottom: 20px; }
  .portada .b-mazos .carta-2, .portada .b-mazos:hover .carta-2 { right: 38px; bottom: 26px; }
  .portada .b-mazos .carta-3, .portada .b-mazos:hover .carta-3 { right: 16px; bottom: 20px; }
}

/* ==========================================================================
   9. PÁGINAS CON MARCO (Generar mazo, Escoge tu Commander, Mis mazos, Crear
      mazo, Jugar…) y pantallas de mazo generado.
   ========================================================================== */
/* Contenido de 1264 px como en las maquetas. Los huecos laterales de
   publicidad se conservan: aparecen solos cuando la pantalla es lo bastante
   ancha para tenerlos sin estrechar el contenido (1216 + 2 × 250 + márgenes). */
:root { --central: calc(var(--ancho-maximo) - 48px); --radio-campo: var(--m-radio); }
.marco { padding: 48px 24px 0; }
@media (max-width: 1780px) {
  .marco { grid-template-columns: minmax(0, var(--central)); }
  .lateral { display: none; }
}
@media (max-width: 660px) { .marco { padding: 24px 16px 0; } }

/* Temas que se pueden pulsar: rectángulos con la cifra en DM Mono. */
.tag-btn {
  min-height: 40px; padding: 0 14px; border-radius: var(--m-radio);
  background: transparent; color: var(--m-texto); border: 1px solid var(--m-control);
  font-family: var(--m-letra); font-size: 14px; font-weight: 400; cursor: pointer;
}
.tag-btn small { font-family: var(--m-datos); font-size: 12px; color: var(--m-texto-2); }
.tag-btn:hover { background: var(--m-elevada); border-color: var(--m-texto); }
.tag-btn.mas { font-weight: 600; border-style: dashed; }
.tag-btn.seleccionado { background: var(--m-elevada); color: var(--m-texto); border-color: var(--m-texto); }
.tag-btn.seleccionado::before { content: "✓ "; }

/* En las casillas de opciones, el botón «i» va al final de la fila. */
.fila-checkbox label { width: 100%; }
.fila-checkbox .tip { margin-left: auto; flex-shrink: 0; }

/* ---------- Mazo generado: resumen en cuatro celdas + la carta ---------- */
.resumen { gap: 24px; align-items: stretch; }
.resumen-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.resumen-filas { display: contents; }
.contador-100, .resumen-fila {
  margin: 0; padding: 14px 16px; min-width: 0;
  background: var(--m-fondo); border: 1px solid var(--m-linea); border-radius: var(--m-radio);
}
.contador-100 {
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 4px 8px;
  font-family: var(--m-datos); font-weight: 400; font-size: 24px; letter-spacing: 0; color: var(--m-texto);
}
.contador-100 .de-cien { font-family: var(--m-datos); font-size: 14px; font-weight: 400; color: var(--m-texto-2); }
.contador-100 .estado {
  flex-basis: 100%; margin: 0; font-family: var(--m-datos); font-size: 12px; font-weight: 500;
  letter-spacing: .14em;
}
.contador-100.completo { background: var(--m-fondo); border-color: var(--m-exito); }
.contador-100.completo .estado { color: var(--m-exito); }
.contador-100.completo .estado::before { content: "✓ "; }
.contador-100.incompleto { background: var(--m-fondo); border-color: var(--m-error); }
.contador-100.incompleto .estado { color: var(--m-error); }
.resumen-fila { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.resumen-fila dt {
  min-width: 0; font-family: var(--m-datos); font-weight: 500; font-size: 12px;
  letter-spacing: .14em; color: var(--m-texto-2);
}
.resumen-fila dd { font-family: var(--m-datos); font-size: 24px; line-height: 1.2; color: var(--m-texto); }
.resumen-fila:first-child dd { font-family: var(--m-titulos); font-weight: 700; font-size: 22px; }
.resumen-fila dd small {
  display: block; margin-top: 4px; font-family: var(--m-letra); font-size: 13px;
  font-weight: 400; color: var(--m-texto-2);
}
.resumen-fila:first-child dd small { display: inline; font-family: var(--m-datos); font-size: 13px; margin: 0; }
.precio-dentro { color: var(--m-texto); font-weight: 400; }
.precio-fuera  { color: var(--m-error); font-weight: 400; }
.resumen-nota { font-size: 14px; color: var(--m-texto-2); }
.resumen-cartas img {
  width: 184px; border-radius: 4.6% / 3.3%; border: 0; box-shadow: none;
}

/* Avisos del generador: con la forma de aviso de la marca. */
.lista-avisos { padding: 0; list-style: none; gap: 8px; }
.lista-avisos li {
  position: relative; padding: 12px 16px 12px 48px; font-size: 14px; line-height: 1.55;
  color: var(--m-texto); background: var(--m-fondo);
  border: 1px solid var(--m-linea); border-left: 3px solid var(--m-aviso); border-radius: var(--m-radio);
}
.lista-avisos li::before {
  content: "!"; position: absolute; left: 16px; top: 13px;
  width: 18px; height: 18px; display: grid; place-items: center;
  border: 1px solid var(--m-aviso); color: var(--m-aviso); font: 500 12px/1 var(--m-datos);
}
.lista-avisos li.error { color: var(--m-texto); border-left-color: var(--m-error); }
.lista-avisos li.error::before { border-color: var(--m-error); color: var(--m-error); }
.distintivo.ok::before { content: "✓ "; }

/* La caja de decidir es la importante de la pantalla: borde de control. */
.seccion-decidir { border-color: var(--m-control); }

@media (max-width: 900px) {
  .resumen-datos { grid-template-columns: minmax(0, 1fr); }
}

/* Zona del comandante con comandante elegido. */
.tag-btn.seleccionado small { color: var(--m-texto-2); }
.panel-nombre { font-family: var(--m-titulos); font-weight: 700; font-size: 22px; line-height: 1.15; margin: 0 0 4px; }
.panel-segundo { font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--m-texto-2); }
.panel-tipo { font-size: 13px; color: var(--m-texto-2); margin: 0 0 12px; }
.panel-dato { font-size: 14px; margin-top: 6px; }
.panel-dato .clave { font-family: var(--m-datos); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--m-texto-2); }
.panel-dato .valor { color: var(--m-texto); font-weight: 600; }
.panel-temas { gap: 6px; margin-top: 14px; }
.panel-temas span {
  font-size: 12px; padding: 4px 8px; border-radius: var(--m-radio);
  background: transparent; border: 1px solid var(--m-linea); color: var(--m-texto-2);
}
.panel-carta { width: 168px; border-radius: 4.6% / 3.3%; box-shadow: none; }
.panel-carta::after { display: none; }
.panel-carta.sin-imagen { border: 1px dashed var(--m-control); font-size: 12px; color: var(--m-texto-2); }
.panel-cartas.dos .panel-carta { width: 120px; }

/* ---------- Confirmaciones de guardado y exportado ---------- */
.columna-central:has(.seccion-confirmacion) > .titulo-pagina,
.columna-central:has(.seccion-confirmacion) > .subtitulo-pagina { text-align: center; margin-left: auto; margin-right: auto; }
.seccion-confirmacion { max-width: 632px; margin-left: auto; margin-right: auto; padding: 24px; }
.confirmacion { text-align: left; display: grid; gap: 14px; }
.confirmacion-icono {
  justify-self: center; width: 46px; height: 46px; margin: 0; border-radius: var(--m-radio);
  display: grid; place-items: center; font-size: 22px;
  background: transparent; border: 1px solid var(--m-exito); color: var(--m-exito); box-shadow: none;
}
.confirmacion-nombre {
  margin: 0; font-family: var(--m-titulos); font-weight: 700; font-size: 22px; line-height: 1.2;
  color: var(--m-texto); text-align: left; word-break: break-word;
}
.confirmacion-filas { margin: 0; justify-items: stretch; }
.confirmacion-filas .resumen-fila { justify-content: flex-start; }
.confirmacion .ruta-etiqueta {
  margin: 4px 0 0; font-family: var(--m-datos); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--m-texto-2); text-align: left;
}
.confirmacion .ruta-carpeta {
  display: block; margin: 0; max-width: none; padding: 10px 12px; text-align: left;
  font-family: var(--m-datos); font-size: 13px; color: var(--m-texto); word-break: break-all;
  background: var(--m-fondo); border: 1px dashed var(--m-control); border-radius: var(--m-radio);
}
.confirmacion .lista-siguiente {
  margin: 0; max-width: none; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 8px; text-align: left;
}
.confirmacion .lista-siguiente li {
  position: relative; display: block; padding: 12px 14px 12px 48px;
  font-size: 14px; color: var(--m-texto-2); line-height: 1.5;
  background: var(--m-superficie); border: 1px solid var(--m-linea); border-radius: var(--m-radio);
}
.confirmacion .lista-siguiente li::before {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  position: absolute; left: 14px; top: 14px;
  font-family: var(--m-datos); font-size: 12px; color: var(--m-texto-2);
}
.lista-siguiente code, .confirmacion code {
  font-family: var(--m-datos); font-size: 13px; color: var(--m-texto);
  background: none; border: 0; padding: 0;
}
.confirmacion-botones { justify-content: center; margin-top: 6px; }
.confirmacion-aviso { font-size: 14px; color: var(--m-aviso); }
.seccion-confirmacion .resumen-datos, .seccion-confirmacion .resumen-filas { width: 100%; }
.confirmacion-filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.confirmacion-filas .resumen-fila:only-child { grid-column: 1 / -1; }
@media (max-width: 660px) { .confirmacion-filas { grid-template-columns: minmax(0, 1fr); } }

/* Tablas del mazo (banquillo exportado…): planas. */
.tabla-mazo { border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: var(--m-fondo); overflow: auto; }
.tabla-mazo table { width: 100%; border-collapse: collapse; }
.tabla-mazo th {
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--m-texto-2); text-align: left;
  padding: 10px 14px; border-bottom: 1px solid var(--m-control); background: transparent;
}
.tabla-mazo td { padding: 10px 14px; font-size: 14px; color: var(--m-texto); border-bottom: 1px solid var(--m-linea); }
.tabla-mazo tr:last-child td { border-bottom: 0; }
.tabla-mazo .col-precio { font-family: var(--m-datos); }
/* En una fila de decisión, todos los botones a la altura del relleno (44 px). */
.decidir-botones > a, .decidir-botones > button { min-height: 44px; box-sizing: border-box; }

/* ==========================================================================
   10. LISTADOS DE CARTAS Y ESCOGE TU COMMANDER
   ========================================================================== */
/* Listados: 5 cartas por fila (Fase 7); 4 por debajo de ~1280 px; 2 en el
   móvil (Fase 8). */
.galeria { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 0; }
@media (max-width: 1279px) { .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.galeria-imagen-wrap { padding: 8px 8px 0; }

/* Etiquetas de los controles («Ordenar por», «Por página»): como las de un campo. */
.fila-controles { gap: 12px 16px; }
.fila-controles label {
  font-family: var(--m-letra); font-size: 14px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--m-texto); margin-bottom: 8px;
}
.fila-controles select, .fila-controles .vista-toggle { height: 40px; }

/* Tarjeta de comandante. */
.cc-pie { padding: 10px 12px 12px; }
.cc-nombre {
  font-family: var(--m-letra); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--m-texto);
  margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-precio { font-family: var(--m-datos); font-size: 13px; font-weight: 400; color: var(--m-texto); }
.cc-precio.sin-precio { font-family: var(--m-letra); color: var(--m-texto-2); }
/* «N temas» encima de la carta: colores de noche, rectángulo, DM Mono. */
.cc-badge-wrap { left: 14px; top: 14px; }
.badge {
  border-radius: var(--m-radio); padding: 2px 7px;
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  background: var(--m-sobre-carta);
}
.badge-con-datos { border: 1px solid #4cc98a; color: #4cc98a; }
.badge-sin-datos { border: 1px solid #a4b4c8; color: #a4b4c8; }
/* Con temas registrados pero sin estadísticas de cartas propias (27/09/2026). */
.badge-solo-temas { border: 1px solid #7fb8e6; color: #7fb8e6; }
.contador-resultados { font-family: var(--m-datos); font-size: 13px; color: var(--m-texto-2); }
.contador-resultados b, .contador-resultados strong { color: var(--m-texto); font-weight: 500; }

/* Pestaña Temas: la misma rejilla de 5. */
.temas-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 0; }
@media (max-width: 1279px) { .temas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .temas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.tema-rep { font-size: 12px; color: var(--m-texto-2); }
.tema-carta .tce-n {
  font-family: var(--m-datos); font-size: 12px; font-weight: 400; color: var(--m-texto);
  background: transparent; border: 1px solid var(--m-linea); border-radius: var(--m-radio); padding: 2px 7px;
}
.tema-carta:focus-visible, .commander-card:focus-visible { outline: 2px solid var(--m-trazo); }

/* Ficha del comandante: temas como botones rectangulares con la cifra en DM Mono. */
.tag-chip-explorador {
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
  background: transparent; color: var(--m-texto); border: 1px solid var(--m-control); border-radius: var(--m-radio);
  font-family: var(--m-letra); font-size: 14px; font-weight: 400;
}
.tag-chip-explorador:hover { background: var(--m-elevada); border-color: var(--m-texto); }
.tag-chip-explorador .tce-n { font-family: var(--m-datos); font-size: 12px; color: var(--m-texto-2); }

/* Panel de filtros: una casilla no es un rótulo; y el «i» nunca en mayúsculas. */
.filtro-bloque > label:has(input[type=checkbox]) {
  font-family: var(--m-letra); font-size: 14px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--m-texto); display: flex; align-items: center; gap: 10px;
}
.tip { text-transform: none; letter-spacing: 0; }
.color-btn.activo { box-shadow: none; outline: 2px solid var(--m-texto); outline-offset: 2px; }

/* ==========================================================================
   11. ESTADOS VACÍOS Y TARJETAS DE PASOS (Mis mazos, Crear mazo, Jugar)
   ========================================================================== */
.vacio-icono {
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: var(--m-radio);
  background: transparent; border: 1px solid var(--m-control); color: var(--m-texto);
}
.vacio-icono svg { width: 22px; height: 22px; }
.vacio h2 { font-family: var(--m-titulos); font-weight: 700; font-size: 28px; line-height: 1.15; margin: 0 0 10px; }
.vacio p { font-size: 16px; color: var(--m-texto-2); max-width: 48ch; }
.vacio-caminos { gap: 8px; max-width: 632px; }
.vacio-camino, .paso {
  padding: 20px; border: 1px solid var(--m-linea); border-radius: var(--m-radio);
  background: var(--m-fondo); transition: border-color .15s;
}
.vacio-camino:hover, .paso:hover { border-color: var(--m-control); background: var(--m-fondo); }
.vacio-camino h3, .paso h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-family: var(--m-datos); font-weight: 500; font-size: 12px; line-height: 1.3;
  letter-spacing: .14em; text-transform: uppercase; color: var(--m-texto);
}
.vacio-camino h3::after, .paso h3::after { content: ""; flex: 1; height: 1px; background: var(--m-linea); }
.vacio-camino p, .paso p { font-size: 14px; line-height: 1.5; color: var(--m-texto-2); }
.vacio-camino p { margin: 0 0 16px; }
.pasos { gap: 8px; }
.paso { padding-left: 20px; }
.paso-num {
  position: static; display: inline-block; width: auto; height: auto; margin-bottom: 8px;
  background: none; border: 0; border-radius: 0;
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; color: var(--m-texto-2);
}

/* ==========================================================================
   12. MIS MAZOS (lista, carpetas, importar, ficha de un mazo)
   ========================================================================== */
.lista-mazos { gap: 8px; }
.mazo-fila {
  grid-template-columns: auto 52px minmax(0, 1fr) auto auto; gap: 16px; padding: 12px 16px;
  background: var(--m-fondo); border: 1px solid var(--m-linea); border-radius: var(--m-radio);
  transition: border-color .15s;
}
.mazo-fila:hover { border-color: var(--m-control); box-shadow: none; }
.mazo-carta { border-radius: 4.6% / 3.3%; border: 0; }
.mazo-carta-hueco { border-radius: var(--m-radio); border: 1px dashed var(--m-control); background: none; }
.mazo-nombre { font-family: var(--m-titulos); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--m-texto); text-decoration: none; }
.mazo-nombre:hover { text-decoration: underline; text-underline-offset: 3px; }
.mazo-sub { font-size: 14px; color: var(--m-texto-2); }
.mazo-carpeta {
  font-family: var(--m-datos); font-size: 12px; border-radius: var(--m-radio);
  border: 1px solid var(--m-linea); background: transparent; color: var(--m-texto-2);
}
.mazo-cifras { gap: 24px; }
.mazo-cifra dt {
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--m-texto-2);
}
.mazo-cifra dd { font-family: var(--m-datos); font-size: 14px; font-weight: 400; color: var(--m-texto); }
.mazo-cifra dd small { font-family: var(--m-datos); font-size: 12px; color: var(--m-texto-2); }
.mazo-cifra dd.incompleto { color: var(--m-error); }

/* Disponibilidad: marco cuadrado con el icono, en el color de su estado. */
.disp-icono {
  width: 24px; height: 24px; border-radius: var(--m-radio); background: transparent;
  font-family: var(--m-datos); font-size: 12px; font-weight: 500;
}
.disp-ok    { background: transparent; border: 1px solid var(--m-exito); color: var(--m-exito); }
.disp-aviso { background: transparent; border: 1px solid var(--m-aviso); color: var(--m-aviso); }
.disp-error { background: transparent; border: 1px solid var(--m-error); color: var(--m-error); }
/* Encima de una carta: siempre en colores de noche. */
.galeria-carta .disp-icono { width: 24px; height: 24px; left: 14px; top: 14px; background: var(--m-sobre-carta); }
.galeria-carta .disp-ok    { border-color: #4cc98a; color: #4cc98a; }
.galeria-carta .disp-aviso { border-color: #f2c14e; color: #f2c14e; }
.galeria-carta .disp-error { border-color: #ff7070; color: #ff7070; }

/* Menú «⋮» de cada mazo. */
.menu-acciones > summary {
  width: 40px; height: 40px; border-radius: var(--m-radio);
  background: transparent; border: 1px solid var(--m-control); color: var(--m-texto);
}
.menu-acciones > summary:hover, .menu-acciones[open] > summary { border-color: var(--m-texto); color: var(--m-texto); background: var(--m-elevada); }
.menu-acciones-panel {
  background: var(--m-elevada); border: 1px solid var(--m-control); border-radius: var(--m-radio);
  box-shadow: none; gap: 4px;
}
.menu-acciones-panel button, .menu-acciones-panel select { min-height: 40px; font-size: 14px; }

/* Carpetas e importar. */
.carpetas-crear { gap: 8px; max-width: 520px; }
.carpetas-fila {
  border-radius: var(--m-radio); border: 1px solid var(--m-linea); background: var(--m-fondo);
  font-size: 14px;
}
.carpetas-fila button { min-height: 32px; border-radius: var(--m-radio); font-size: 13px; }
.mensaje-carpeta, .mensaje-importar { font-size: 14px; color: var(--m-texto-2); }
.importar-modos { gap: 8px; }
.importar-panel {
  border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: var(--m-fondo); box-shadow: none;
}
.importar-panel input[type=file]::file-selector-button {
  border-radius: var(--m-radio); border: 1px solid var(--m-control); background: transparent;
  color: var(--m-texto); font-family: var(--m-letra); font-weight: 600; min-height: 36px; padding: 0 14px;
}

/* Ficha de un mazo. */
.ficha-mazo-cartas img { width: 168px; border-radius: 4.6% / 3.3%; border: 0; box-shadow: none; }
.ficha-mazo-origen {
  border-radius: var(--m-radio); border: 1px solid var(--m-linea);
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--m-texto-2);
}
.disp-resumen {
  position: relative; padding: 12px 16px; gap: 12px; font-size: 14px; color: var(--m-texto);
  background: var(--m-fondo); border: 1px solid var(--m-linea); border-left-width: 3px; border-radius: var(--m-radio);
}
.disp-resumen.es-ok    { background: var(--m-fondo); border-color: var(--m-linea); border-left-color: var(--m-exito); }
.disp-resumen.es-aviso { background: var(--m-fondo); border-color: var(--m-linea); border-left-color: var(--m-aviso); }
.disp-resumen.es-error { background: var(--m-fondo); border-color: var(--m-linea); border-left-color: var(--m-error); }
.disp-cifras { gap: 8px; }
.disp-cifra { padding: 14px 16px; border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: var(--m-fondo); }
.disp-cifra dt {
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--m-texto-2);
}
.disp-cifra dd { font-family: var(--m-datos); font-size: 24px; font-weight: 400; color: var(--m-texto); }
.disp-cifra dd small { font-family: var(--m-letra); font-size: 13px; color: var(--m-texto-2); }
.disp-cifra.comprar dd { color: var(--m-aviso); }
.acciones-mazo { gap: 8px; }
@media (max-width: 760px) {
  .mazo-fila { grid-template-columns: auto 44px minmax(0, 1fr) auto; }
  .mazo-cifras { grid-column: 2 / -1; justify-content: flex-start; }
}

/* Textos grises y rojos que el HTML trae escritos a mano (style="color:#888",
   #666, #b3261e): se pasan a los colores de la marca sin tocar el HTML. */
body [style*="color:#888"], body [style*="color:#666"] { color: var(--m-texto-2) !important; }
body [style*="color:#b3261e"] { color: var(--m-error) !important; }

/* ==========================================================================
   13. MI COLECCIÓN (Bulk)
   ========================================================================== */
.btn-icono { border-radius: var(--m-radio); background: transparent; }
.btn-icono:hover { background: var(--m-elevada); border-color: var(--m-texto); }
.btn-icono .marca-activa { box-shadow: none; }
.bulk-cabecera .subtitulo-pagina b, .bulk-cabecera .subtitulo-pagina strong {
  font-family: var(--m-datos); font-weight: 500; color: var(--m-texto);
}
.bulk-controles label, .control > label {
  font-family: var(--m-letra); font-size: 14px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--m-texto);
}
.bulk-contador { font-family: var(--m-datos); font-size: 13px; color: var(--m-texto-2); }
.bulk-contador strong, .bulk-contador b { color: var(--m-texto); font-weight: 500; }
.fila-checkbox-suelta { font-size: 14px; color: var(--m-texto-2); }
.fila-checkbox-suelta input, .galeria-carta .gc-check { accent-color: var(--m-trazo); }
.seleccion-barra {
  background: var(--m-fondo); border: 1px solid var(--m-linea); border-left: 3px solid var(--m-trazo);
  border-radius: var(--m-radio); font-size: 14px;
}
.seleccion-barra button { min-height: 36px; }
.bulk-tabla { border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: var(--m-fondo); padding: 0; }
.bulk-tabla th {
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .14em;
  color: var(--m-texto-2); border-bottom: 1px solid var(--m-control);
}
.bulk-tabla td { border-bottom: 1px solid var(--m-linea); }
.opciones-sub { border-radius: var(--m-radio); border: 1px solid var(--m-linea); background: var(--m-fondo); }
.anadir-carta-previa { border-radius: 4.6% / 3.3%; box-shadow: none; }
.anadir-carta-previa::after { box-shadow: none; }
.anadir-vista .pie-previa { font-size: 12px; color: var(--m-texto-2); }
.anadir-vista .etiqueta-foil {
  border-radius: var(--m-radio); font-family: var(--m-datos); font-size: 12px; font-weight: 500;
  color: var(--m-texto); background: transparent; border: 1px solid var(--m-control);
}
.compartir-caja label, .mensaje-suave { font-size: 13px; color: var(--m-texto-2); }
.mensaje-suave.error { color: var(--m-error); }
.mensaje-suave.ok { color: var(--m-exito); }
.importar-panel { border-top-color: var(--m-linea); }
.importar-panel input[type=file] { background: var(--m-fondo); border: 1px dashed var(--m-control); border-radius: var(--m-radio); color: var(--m-texto-2); }
.modal-caja { background: var(--m-superficie); border: 1px solid var(--m-control); border-radius: var(--m-radio); box-shadow: none; animation: none; }
.modal-caja h2 { font-family: var(--m-titulos); font-size: 22px; }
.modal-cerrar { width: 40px; height: 40px; border-radius: var(--m-radio); }
.import-resumen-barra { font-size: 14px; }
.import-linea { border-radius: var(--m-radio); border: 1px solid var(--m-exito); background: var(--m-fondo); font-size: 12px; }
.import-linea.import-error { border-color: var(--m-error); }
.import-linea .il-sin-imagen { background: transparent; color: var(--m-error); font-size: 12px; }
.import-linea .il-check { border-radius: var(--m-radio); background: var(--m-sobre-carta); }
.import-linea:not(.import-error) .il-check { color: #4cc98a; }
.import-linea.import-error .il-check { color: #ff7070; }
.import-linea .il-cantidad {
  border-radius: var(--m-radio); background: var(--m-sobre-carta); border: 1px solid #a4b4c8; color: #f2f3ef;
  font-family: var(--m-datos); font-size: 12px;
}

/* Galería de ediciones (añadir carta, menú ⋮ de una carta). */
.anadir-printings-grid { border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: var(--m-fondo); }
.anadir-printings-grid[style*="#e3e7f0"] { border-color: var(--m-linea) !important; border-radius: var(--m-radio) !important; }
.anadir-printings-grid p { font-size: 13px; color: var(--m-texto-2); }
.anadir-printing { border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: var(--m-superficie); font-size: 12px; color: var(--m-texto-2); }
.anadir-printing:hover { border-color: var(--m-control); }
.anadir-printing.seleccionada { border-color: var(--m-texto); box-shadow: none; outline: 1px solid var(--m-texto); }
.anadir-printing .ap-badge {
  border-radius: var(--m-radio); background: var(--m-sobre-carta); color: #f2f3ef; border: 1px solid #a4b4c8;
  font-family: var(--m-datos); font-size: 12px; font-weight: 500;
}
/* Casillas y opciones dentro de los filtros: texto normal, no rótulo. */
.filtro-bloque label:has(input[type=checkbox]), .filtro-bloque label:has(input[type=radio]), .filtro-radio {
  font-family: var(--m-letra); font-size: 14px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--m-texto); display: flex; align-items: center; gap: 10px;
}
.filtro-bloque input[type=radio], .filtro-bloque input[type=checkbox] { accent-color: var(--m-trazo); width: 18px; height: 18px; margin: 0; }

/* ==========================================================================
   14. CREAR MAZO (constructor) y tarjetas de pasos numeradas 01, 02…
   ========================================================================== */
.pasos { counter-reset: paso; }
.paso { position: relative; }
.paso-num {
  position: absolute; left: 20px; top: 20px; margin: 0; font-size: 0; line-height: 1.3;
}
.paso-num::before {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; color: var(--m-texto-2);
}
.paso h3 { padding-left: 28px; }
/* Barra fija del pool: se pega justo debajo de la cabecera (64 px). */
.barra-pool {
  top: 64px; background: var(--m-superficie); border: 1px solid var(--m-control);
  border-radius: var(--m-radio); box-shadow: none; padding: 12px 16px;
}
.bp-contador {
  border-color: var(--m-control); background: var(--m-fondo); color: var(--m-texto);
  font-family: var(--m-datos); font-size: 12px; letter-spacing: .06em;
}
.bp-chips { -webkit-mask-image: none; mask-image: none; }
.chip-tipo {
  font-family: var(--m-datos); font-size: 12px; color: var(--m-texto-2);
  border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: transparent;
}
.chip-tipo b { color: var(--m-texto); font-weight: 500; }
.bp-boton { min-height: 44px; font-size: 14px; letter-spacing: 0; }
.basicas-fila { gap: 8px; }
.ctor-comandante-nombre { font-family: var(--m-titulos); font-weight: 700; font-size: 22px; line-height: 1.2; }
.ctor-comandante-nombre strong {
  font-family: var(--m-datos); font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--m-texto-2);
}
.hueco-sin-imagen { background: var(--m-fondo); border: 1px dashed var(--m-control); border-radius: var(--m-radio); }
.hueco-sin-imagen span { font-family: var(--m-datos); font-size: 12px; font-weight: 500; color: var(--m-texto-2); }
.cc-pista { font-family: var(--m-datos); font-size: 12px; font-weight: 400; color: var(--m-texto-2); margin: 4px 12px 10px; }
.lista-descartadas small { color: var(--m-texto-2); font-family: var(--m-datos); }
.caja-cabecera .distintivo {
  font-family: var(--m-datos); font-size: 12px; border-radius: var(--m-radio);
  border: 1px solid var(--m-linea); background: transparent; color: var(--m-texto-2);
}
button.chip-tipo, .chip-tipo { min-height: 32px; padding: 0 10px; font-family: var(--m-datos); font-size: 12px; font-weight: 400; color: var(--m-texto-2); }

/* ==========================================================================
   15. LA MESA (tapete «Mesa de dibujo», con la información como en Plano a
       sangre — Fase 7b). La cuadrícula se ve entre los asientos; cada asiento
       es una hoja con borde de control; campo y mano lisos; zonas numeradas
       01–04; cruz de registro en el centro; grúa en los asientos libres; dorso
       de Deckyard. Todo lo que va encima de una carta, en colores de noche.
   ========================================================================== */
.mesa-pantalla {
  gap: 10px; padding: 10px; background: transparent; border-top: 0;
  font-family: var(--m-letra);
}
.mesa-pantalla .cuadrante { background: var(--m-fondo); border: 1px solid var(--m-control); }
.mesa-pantalla .cuadrante.yo { background: var(--m-fondo); }
.mesa-pantalla .cuadrante .campo, .mesa-pantalla .cuadrante .mano { background: var(--m-superficie); }
.mesa-pantalla .zonas { background: var(--m-fondo); }
.mesa-pantalla .cuadrante.izq .zonas { border-left: 1px solid var(--m-linea); }
.mesa-pantalla .cuadrante.der .zonas { border-right: 1px solid var(--m-linea); }
.mesa-pantalla .cuadrante.abajo .mano { border-top: 1px solid var(--m-linea); }
.mesa-pantalla .cuadrante.arriba .mano { border-bottom: 1px solid var(--m-linea); }

/* Asiento libre: hoja discontinua con la grúa. */
.mesa-pantalla .cuadrante.vacio {
  background: transparent; border: 1px dashed var(--m-control);
  flex-direction: column; gap: 10px;
}
.mesa-pantalla .cuadrante.vacio::before {
  content: ""; width: 64px; height: 64px; background: var(--m-texto-2); opacity: .45;
  -webkit-mask: url(/estilos/grua.svg) center / contain no-repeat; mask: url(/estilos/grua.svg) center / contain no-repeat;
}
.mesa-pantalla .cuadrante.vacio span {
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--m-texto-2);
}

/* Cruz de registro en el centro de la mesa. */
.mesa-pantalla::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none;
  width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid var(--m-trazo); background:
    linear-gradient(var(--m-trazo), var(--m-trazo)) center / 1px 100% no-repeat,
    linear-gradient(var(--m-trazo), var(--m-trazo)) center / 100% 1px no-repeat;
  -webkit-mask: radial-gradient(circle, transparent 0 13px, #000 13px); mask: radial-gradient(circle, transparent 0 13px, #000 13px);
}
.mesa-pantalla::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none;
  width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--m-fondo);
}

/* Campo vacío y cartas. */
.mesa-pantalla .campo-vacio {
  border: 1px dashed var(--m-linea); border-radius: 0; padding: 8px 12px;
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--m-texto-2);
}
.mesa-pantalla .cara { border: 0; border-radius: 4.6% / 3.3%; background: #0e1722; }
.mesa-pantalla .cara img { border-radius: 4.6% / 3.3%; }
.mesa-pantalla .carta.girada .cara { border: 0; outline: 1px solid #7fb8e6; }
.mesa-pantalla button.carta:hover .cara { outline: 1px solid #f2f3ef; }
.mesa-pantalla button.carta:focus-visible { outline: 2px solid var(--m-trazo); }
.mesa-pantalla .carta .contador {
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; border-radius: var(--m-radio);
  background: var(--m-sobre-carta); color: #f2f3ef; border: 1px solid #a4b4c8; padding: 0 4px;
}
.mesa-pantalla .mano.propia .carta:hover { transform: translateY(-14px); }

/* Zonas: numeradas 01 Comandante · 02 Mazo · 03 Cementerio · 04 Exilio
   (rótulos de zona a 9 px: la excepción aprobada en la revisión). */
.mesa-pantalla .zonas { counter-reset: zona; }
.mesa-pantalla .zona { border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: var(--m-fondo); }
.mesa-pantalla .zona:not(:has(img, .dorso)) { border-style: dashed; border-color: var(--m-control); }
.mesa-pantalla .zona:hover { border-color: var(--m-texto); }
.mesa-pantalla .zona img { border-radius: 4.6% / 3.3%; }
.mesa-pantalla .zona-nombre {
  bottom: 0; left: -6px; right: -6px; border-radius: 0; padding: 3px 0 2px;
  background: rgba(14, 23, 34, .88); color: #f2f3ef;
  font-family: var(--m-datos); font-size: 9px; font-weight: 500; letter-spacing: .08em; line-height: 1;
  white-space: nowrap;
}
.mesa-pantalla .zona-nombre::before {
  counter-increment: zona; content: counter(zona, decimal-leading-zero) " "; color: #a4b4c8;
}
.mesa-pantalla .zona-cuenta {
  top: -6px; right: -8px; height: auto; min-width: 0; padding: 3px 5px; border-radius: var(--m-radio);
  background: #0e1722; border: 1px solid #62809f; color: #f2f3ef;
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; line-height: 1;
}

/* Dorso de Deckyard: la grúa sobre azul (siempre en colores de noche). */
.mesa-pantalla .dorso, .dorso-mano {
  background: #152233; border: 1px solid #62809f; border-radius: 4.6% / 3.3%; position: relative;
}
.mesa-pantalla .dorso::after, .dorso-mano::after {
  content: ""; position: absolute; inset: 22% 18%; border: 0; border-radius: 0;
  background: #a4b4c8;
  -webkit-mask: url(/estilos/grua.svg) center / contain no-repeat; mask: url(/estilos/grua.svg) center / contain no-repeat;
}

/* Vida: arriba a la derecha, pequeña; «− 40 +» y «Opciones de vida». */
.mesa-pantalla .vida { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 8px; }
.mesa-pantalla .vida-cifra { font-family: var(--m-datos); font-weight: 500; font-size: 26px; line-height: 1; min-width: 40px; }
.mesa-pantalla .vida button {
  width: 32px; height: 32px; border-radius: var(--m-radio); background: var(--m-fondo);
  border: 1px solid var(--m-control); color: var(--m-texto); font-size: 16px; font-weight: 600;
}
.mesa-pantalla .vida button:hover { border-color: var(--m-texto); color: var(--m-texto); background: var(--m-elevada); }
.mesa-pantalla .vida-opciones {
  border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: var(--m-fondo);
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  color: var(--m-texto-2); padding: 5px 8px;
}
.mesa-pantalla .vida-opciones:hover { border-color: var(--m-control); color: var(--m-texto); }
.mesa-pantalla .marca {
  font-family: var(--m-datos); font-size: 12px; border-radius: var(--m-radio);
  background: var(--m-fondo); border: 1px solid var(--m-linea); color: var(--m-texto-2);
}
.mesa-pantalla .marca-estado { border-color: var(--m-aviso); color: var(--m-aviso); font-weight: 500; }

/* Nombre con su punto de presencia, abajo a la izquierda. */
.mesa-pantalla .etiqueta {
  border: 1px solid var(--m-control); border-radius: 0; background: var(--m-fondo);
  font-size: 13px; font-weight: 600; color: var(--m-texto); padding: 4px 10px;
}
.mesa-pantalla .etiqueta .tu { color: var(--m-texto-2); font-weight: 400; }
.mesa-pantalla .cuadrante.yo .etiqueta { left: 12px; }
.presencia { border-radius: 50%; }
.presencia.dentro { background: var(--m-exito); border-color: var(--m-exito); box-shadow: 0 0 0 2px rgba(76, 201, 138, .25); }

/* Historial de partida, abajo a la derecha. */
.mesa-pantalla .historial {
  width: 222px; max-height: 104px; border-radius: 0; background: var(--m-fondo);
  border: 1px solid var(--m-linea); padding: 8px 10px; gap: 4px;
}
.mesa-pantalla .historial-titulo {
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--m-texto);
  margin: 0;
}
.mesa-pantalla .historial li { font-size: 12px; line-height: 1.4; color: var(--m-texto-2); }
.mesa-pantalla .historial li:first-child { color: var(--m-texto); font-weight: 600; }
.mesa-pantalla .mano-vacia, .mesa-pantalla .mano-cuenta {
  font-family: var(--m-datos); font-size: 12px; color: var(--m-texto-2);
}
.mesa-pantalla .mano-cuenta { border-radius: var(--m-radio); background: var(--m-fondo); border-color: var(--m-linea); }

/* Herramientas (arriba a la izquierda de tu asiento). */
.mesa-pantalla .herramientas summary {
  width: 40px; height: 40px; border-radius: var(--m-radio);
  background: var(--m-fondo); border: 1px solid var(--m-control); color: var(--m-texto);
  align-items: flex-start; padding-left: 12px;
}
.mesa-pantalla .herramientas summary i { border-radius: 0; }
.mesa-pantalla .herramientas[open] summary { border-color: var(--m-texto); color: var(--m-texto); background: var(--m-elevada); }
.herramientas-panel {
  width: 264px; background: var(--m-elevada); border: 1px solid var(--m-control);
  border-radius: var(--m-radio); box-shadow: none; padding: 14px;
}
.herramientas-panel h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--m-texto);
}
.herramientas-panel h3::after { content: ""; flex: 1; height: 1px; background: var(--m-linea); }
.herramientas-panel button {
  min-height: 36px; border-radius: var(--m-radio); background: transparent;
  border: 1px solid var(--m-control); color: var(--m-texto); font-family: var(--m-letra);
  font-size: 13px; font-weight: 600; padding: 0 10px;
}
.herramientas-panel button:hover { background: var(--m-fondo); border-color: var(--m-texto); color: var(--m-texto); }
.herramientas-panel .dados input {
  min-height: 36px; border-radius: var(--m-radio); background: var(--m-fondo);
  border: 1px solid var(--m-control); font-family: var(--m-datos); font-size: 14px;
}
.herramientas-panel .dados span { font-family: var(--m-datos); color: var(--m-texto-2); }
.compartir .aviso, .en-obras, .herramientas-panel .mull-coste { font-size: 12px; color: var(--m-texto-2); }
.compartir .copiar { border-color: var(--m-control); color: var(--m-texto); }
.compartir .mirando { color: var(--m-texto); border-top-color: var(--m-linea); }
.compartir .codigo { font-family: var(--m-datos); color: var(--m-texto); font-weight: 500; }
.salir button { border-color: var(--m-error); color: var(--m-error); }
.herramientas-panel .registro { border-radius: var(--m-radio); background: var(--m-fondo); border-color: var(--m-linea); }
.herramientas-panel .registro li { font-size: 12px; color: var(--m-texto-2); border-bottom-color: var(--m-linea); }
.herramientas-panel .estado-nombre { font-family: var(--m-datos); font-size: 12px; font-weight: 500; color: var(--m-texto-2); }
.herramientas-panel .e-quien { min-height: 32px; border-radius: var(--m-radio); font-size: 12px; background: transparent; border-color: var(--m-linea); }
.herramientas-panel .e-quien.activo { border-color: var(--m-texto); color: var(--m-texto); }
.herramientas-panel .e-quien.activo::before { content: "✓ "; }
.herramientas-panel .estado-otro input { border-radius: var(--m-radio); background: var(--m-fondo); border-color: var(--m-control); font-size: 13px; }

/* Capas encima de la mesa: lupa, carta grande, menú, visor, avisos. */
.mesa-lupa { border-radius: 4.6% / 3.3%; box-shadow: none; border: 0; }
.mesa-grande { background: rgba(6, 10, 16, .88); }
.mesa-grande img { border-radius: 4.6% / 3.3%; }
.mesa-menu {
  background: var(--m-elevada); border: 1px solid var(--m-control); border-radius: var(--m-radio);
  box-shadow: none; font-family: var(--m-letra); padding: 6px;
}
.mesa-menu .mm-opcion { min-height: 34px; border-radius: 0; font-size: 14px; color: var(--m-texto); }
.mesa-menu .mm-opcion.mm-chico { font-size: 13px; min-height: 30px; }
.mesa-menu .mm-opcion:hover, .mesa-menu .mm-token:hover { background: var(--m-fondo); color: var(--m-texto); }
.mesa-menu .mm-sep { background: var(--m-linea); }
.mesa-menu .mm-titulo { font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--m-texto-2); }
.mesa-menu .mm-fila { font-size: 14px; color: var(--m-texto); }
.mesa-menu .mm-mini { width: 32px; height: 32px; border-radius: var(--m-radio); background: var(--m-fondo); border-color: var(--m-control); color: var(--m-texto); }
.mesa-menu .mm-mini:hover { border-color: var(--m-texto); color: var(--m-texto); }
.mesa-menu .mm-cifra { font-family: var(--m-datos); font-size: 14px; }
.mesa-menu .mm-nota, .mesa-menu .mm-tokens-aviso { font-size: 12px; color: var(--m-texto-2); }
.mesa-menu .mm-escribir input, .mesa-menu .mm-tokens input { border-radius: var(--m-radio); background: var(--m-fondo); border-color: var(--m-control); font-size: 13px; }
.mesa-menu .mm-token { border-radius: 0; font-size: 13px; }
.mesa-menu .mm-token img { border-radius: 4.6% / 3.3%; }
.mesa-menu .mm-delta { font-family: var(--m-datos); font-size: 12px; }
.mesa-visor { background: rgba(6, 10, 16, .82); }
.visor-caja { background: var(--m-superficie); border: 1px solid var(--m-control); border-radius: var(--m-radio); box-shadow: none; }
.visor-cabecera { border-bottom-color: var(--m-linea); }
.visor-cabecera h3 { font-family: var(--m-datos); font-size: 12px; font-weight: 500; letter-spacing: .14em; }
.visor-cerrar, .visor-mover, .visor-barajar {
  min-height: 36px; border-radius: var(--m-radio); background: transparent; border-color: var(--m-control);
  color: var(--m-texto); font-family: var(--m-letra); font-size: 13px; font-weight: 600;
}
.visor-cerrar:hover, .visor-mover:hover, .visor-barajar:hover { border-color: var(--m-texto); color: var(--m-texto); background: var(--m-elevada); }
.visor-nota, .visor-cuenta, .visor-nombre { font-size: 12px; color: var(--m-texto-2); }
.visor-cara { border-radius: 4.6% / 3.3%; border-color: var(--m-linea); background: var(--m-fondo); }
.visor-cara:hover { border-color: var(--m-texto); }
.visor-carta.elegida .visor-cara { border-color: var(--m-texto); box-shadow: none; outline: 2px solid var(--m-texto); }
.visor-pie { border-top-color: var(--m-linea); }
.mesa-aviso, .mesa-caida {
  background: var(--m-elevada); color: var(--m-texto); border: 1px solid var(--m-control);
  border-radius: var(--m-radio); box-shadow: none; font-family: var(--m-letra); font-size: 14px;
}
.mull-aviso {
  background: var(--m-fondo); color: var(--m-texto); border: 1px solid var(--m-aviso);
  border-left-width: 3px; border-radius: var(--m-radio); box-shadow: none; font-family: var(--m-letra);
}
.mull-aviso strong { font-size: 14px; font-weight: 600; color: var(--m-aviso); }
.mull-aviso span { font-size: 13px; opacity: 1; color: var(--m-texto-2); }
/* Los rótulos de zona caben enteros («03 Cementerio»): columna de zonas con aire a los lados. */
.mesa-pantalla .zonas { padding: 8px 14px; }
.mesa-pantalla .zona-nombre { left: -12px; right: -12px; letter-spacing: .04em; }
.mesa-pantalla .vida { background: var(--m-fondo); padding: 2px 6px; }
.mesa-pantalla .vida-caja:has(button) .vida { padding: 0; background: transparent; }

/* ---------- Jugar: elegir mazo, entrar a una mesa ---------- */
.mazos-elegir { gap: 8px; }
.mazo-opcion {
  border: 1px solid var(--m-linea); border-radius: var(--m-radio); background: var(--m-fondo);
  padding: 14px 16px 14px 48px; transition: border-color .15s;
}
.mazo-opcion:hover { border-color: var(--m-control); background: var(--m-fondo); }
.mazo-opcion input[type=radio] { left: 16px; top: 16px; width: 18px; height: 18px; accent-color: var(--m-trazo); }
/* El mazo elegido: borde de control y las cuatro esquinas de registro. */
.mazo-opcion:has(input:checked) {
  border-color: var(--m-control); background-color: var(--m-fondo);
  background-image:
    linear-gradient(var(--m-trazo), var(--m-trazo)), linear-gradient(var(--m-trazo), var(--m-trazo)),
    linear-gradient(var(--m-trazo), var(--m-trazo)), linear-gradient(var(--m-trazo), var(--m-trazo)),
    linear-gradient(var(--m-trazo), var(--m-trazo)), linear-gradient(var(--m-trazo), var(--m-trazo)),
    linear-gradient(var(--m-trazo), var(--m-trazo)), linear-gradient(var(--m-trazo), var(--m-trazo));
  background-repeat: no-repeat;
  background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}
.mazo-opcion-nombre { font-family: var(--m-titulos); font-size: 18px; font-weight: 700; color: var(--m-texto); }
.mazo-opcion-datos { font-size: 14px; color: var(--m-texto-2); }
.mazo-opcion-datos .sep { color: var(--m-control); }
.aviso-alcance {
  border: 1px solid var(--m-linea); border-left: 3px solid var(--m-aviso);
  border-radius: var(--m-radio); background: var(--m-fondo);
}
.aviso-alcance p { font-size: 14px; color: var(--m-texto-2); }
.aviso-alcance strong { color: var(--m-texto); }
.mesa-codigo-campo { font-family: var(--m-datos); font-weight: 500; font-size: 22px; letter-spacing: .38em; }
.mesa-codigo-campo::placeholder { font-weight: 400; color: var(--m-texto-2); }
.mesa-nota { font-size: 13px; color: var(--m-texto-2); }
.mesa-rol-texto { font-size: 16px; color: var(--m-texto-2); }
.mesa-llena {
  border: 1px solid var(--m-linea); border-left: 3px solid var(--m-aviso); border-radius: var(--m-radio);
  background: var(--m-fondo); font-size: 14px; color: var(--m-texto);
}

/* ==========================================================================
   16. PÁGINAS PÚBLICAS (mazo y colección compartidos, enlace no válido)
   ========================================================================== */
.banda-publica {
  background: var(--m-superficie); border: 1px solid var(--m-linea); border-left: 3px solid var(--m-info);
  border-radius: var(--m-radio); box-shadow: none;
}
.banda-publica .icono { color: var(--m-info); }
.banda-publica p { font-size: 14px; color: var(--m-texto-2); }
.banda-publica strong { color: var(--m-texto); }
.enlace-roto-icono {
  width: 46px; height: 46px; border-radius: var(--m-radio); margin: 0 auto 16px;
  background: transparent; border: 1px solid var(--m-error); color: var(--m-error); box-shadow: none;
}
.enlace-roto-icono svg { width: 22px; height: 22px; }
.enlace-roto h2 { font-family: var(--m-titulos); font-weight: 700; font-size: 28px; }
.enlace-roto p { font-size: 16px; color: var(--m-texto-2); }
.publico-carta, .publico-carta img { border-radius: 4.6% / 3.3%; box-shadow: none; border: 0; }
.col-mini img { border-radius: 4.6% / 3.3%; }
/* Firma: «Hecho con Deckyard TCG». */
.firma-publica {
  display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 18px 24px;
  background: var(--m-fondo); border: 1px solid var(--m-control); border-radius: var(--m-radio); color: var(--m-texto);
}
.firma-publica .firma-grua { width: 30px; height: auto; flex: none; color: var(--m-texto); }
.firma-publica .firma-texto { display: grid; gap: 3px; flex: 1; min-width: 0; }
.firma-publica .firma-texto b { font-family: var(--m-titulos); font-weight: 700; font-size: 18px; }
.firma-publica .firma-texto span { font-size: 14px; color: var(--m-texto-2); }
.firma-publica .boton-enlace { flex: none; }
@media (max-width: 660px) {
  .firma-publica { flex-wrap: wrap; padding: 16px; }
  .firma-publica .boton-enlace { width: 100%; justify-content: center; }
}

/* ==========================================================================
   17. MÓVIL (Fase 8): cabecera con menú desplegable; todo lo que se pulsa a
       44 px; galerías a 2 por fila (sección 10).
   ========================================================================== */
.barra-menu-btn, .barra-modo-seg { display: none; }
@media (max-width: 1100px) {
  .barra-interior {
    height: 56px; padding: 0 16px; flex-wrap: wrap; row-gap: 0; column-gap: 12px; align-content: center;
  }
  .barra-menu-btn {
    display: inline-grid; align-content: center; justify-items: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px; padding: 0; cursor: pointer;
    background: transparent; color: var(--m-texto); border: 1px solid var(--m-control); border-radius: var(--m-radio);
  }
  .barra-menu-btn i { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .15s, opacity .15s; }
  .barra.menu-abierto .barra-menu-btn { background: var(--m-elevada); border-color: var(--m-texto); }
  .barra.menu-abierto .barra-menu-btn i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .barra.menu-abierto .barra-menu-btn i:nth-child(2) { opacity: 0; }
  .barra.menu-abierto .barra-menu-btn i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .barra nav, .barra .barra-idiomas, .barra .barra-modo { display: none; }

  /* El menú abierto: las seis secciones en filas de 52 px (la actual con barra
     azul y ✓), los dos idiomas y «Noche | Día». */
  .barra.menu-abierto .barra-interior { height: auto; padding-top: 6px; padding-bottom: 16px; }
  .barra.menu-abierto .logo, .barra.menu-abierto .barra-menu-btn { margin-top: 0; }
  .barra.menu-abierto nav {
    display: flex; flex-direction: column; gap: 0; order: 3; width: 100%; margin-top: 6px;
    border-top: 1px solid var(--m-linea);
  }
  .barra.menu-abierto nav a {
    min-height: 52px; padding: 0 16px; font-size: 15px; color: var(--m-texto);
    border-bottom: 1px solid var(--m-linea); display: flex; align-items: center;
  }
  .barra.menu-abierto nav a.activo { box-shadow: inset 3px 0 0 var(--m-trazo); background: var(--m-superficie); }
  .barra.menu-abierto nav a.activo::after {
    content: "✓"; position: static; margin-left: auto; width: auto; height: auto;
    background: none; color: var(--m-trazo); font-size: 15px;
  }
  .barra.menu-abierto .barra-idiomas {
    display: flex; order: 4; width: 100%; margin: 14px 0 0; justify-content: flex-start; gap: 12px;
  }
  .barra.menu-abierto .barra-idiomas select { height: 44px; font-size: 15px; }
  .barra.menu-abierto .barra-modo-seg {
    display: flex; order: 5; width: 100%; margin-top: 12px;
    border: 1px solid var(--m-control); border-radius: var(--m-radio);
  }
  .barra-modo-seg button {
    flex: 1; min-height: 44px; border: 0; border-radius: 0; background: transparent; cursor: pointer;
    font-family: var(--m-letra); font-size: 15px; font-weight: 600; color: var(--m-texto-2);
  }
  .barra-modo-seg button + button { border-left: 1px solid var(--m-control); }
  .barra-modo-seg button[aria-pressed="true"] { background: var(--m-elevada); color: var(--m-texto); }
  .barra-modo-seg button[aria-pressed="true"]::before { content: "✓ "; }
}

/* ---------- La mesa en el móvil (Fase 8 · D con marcador) ---------- */
.mesa-girar, .mesa-cruceta, .mesa-marcador { display: none; }

/* En vertical: el aviso de girar el móvil, en vez de la mesa. */
@media (max-width: 900px) and (orientation: portrait) {
  .mesa-marco .mesa-pantalla { display: none; }
  .mesa-girar {
    display: grid; justify-items: center; align-content: center; text-align: center; gap: 12px;
    flex: 1; padding: 40px 24px; color: var(--m-texto-2);
  }
  .mesa-girar b { font-family: var(--m-titulos); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--m-texto); }
  .mesa-girar span { font-size: 16px; max-width: 30ch; }
}

/* En horizontal: un asiento a pantalla completa, flechas y marcador. */
@media (orientation: landscape) and (max-height: 520px) {
  body:has(.mesa-marco) .barra-interior { height: 56px; }
  .mesa-marco .mesa-pantalla {
    --carta: 56px; --carta-alto: calc(var(--carta) * 1.396);
    --mano-carta: 68px; --mano-carta-alto: calc(var(--mano-carta) * 1.396);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    padding: 6px; gap: 0;
  }
  .mesa-marco .mesa-pantalla::before, .mesa-marco .mesa-pantalla::after { display: none; }
  .mesa-marco .mesa-pantalla .cuadrante { display: none; }
  .mesa-pantalla[data-ver="abajo-izq"] .cuadrante.abajo.izq,
  .mesa-pantalla[data-ver="arriba-izq"] .cuadrante.arriba.izq,
  .mesa-pantalla[data-ver="arriba-der"] .cuadrante.arriba.der,
  .mesa-pantalla[data-ver="abajo-der"] .cuadrante.abajo.der { display: grid; grid-area: 1 / 1; }
  /* Las zonas, en 2 × 2 a un lado del campo. */
  .mesa-pantalla .cuadrante .zonas {
    display: grid; grid-template-columns: repeat(2, var(--zona)); grid-auto-rows: min-content;
    gap: 14px 22px; align-content: start; padding: 10px 14px;
  }
  .mesa-pantalla .historial { display: none; }
  .mesa-pantalla .cuadrante .mano { padding-left: 150px; padding-right: 160px; }
  .mesa-pantalla .cuadrante.yo .mano.propia { padding-right: 160px; }
  .mesa-pantalla .etiqueta { max-width: 140px; }
  .mesa-pantalla .herramientas { position: absolute; margin: 0; top: auto; bottom: 48px; left: 16px; }
  .mesa-pantalla .cuadrante.izq .vida-caja { right: calc(2 * var(--zona) + 70px); }
  .mesa-pantalla .cuadrante.der .vida-caja { left: calc(2 * var(--zona) + 70px); }
  .mesa-pantalla .cuadrante.arriba .vida-caja { bottom: auto; top: 76px; flex-direction: column; }
  .mesa-pantalla .herramientas summary { box-sizing: border-box; width: 44px; height: 44px; padding-left: 13px; }
  .mesa-pantalla .herramientas-panel { position: absolute; bottom: 50px; left: 0; max-height: 70vh; overflow: auto; }
  .mesa-pantalla .vida button { width: 44px; height: 44px; }

  .mesa-cruceta {
    display: grid; position: fixed; right: 10px; bottom: 10px; z-index: 20;
    grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); place-items: center;
  }
  .mc-arriba { grid-area: 1 / 2; } .mc-izquierda { grid-area: 2 / 1; }
  .mc-derecha { grid-area: 2 / 3; } .mc-abajo { grid-area: 3 / 2; } .mc-mapa { grid-area: 2 / 2; }
  .mc-flecha {
    width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
    background: var(--m-fondo); color: var(--m-texto); border: 1px solid var(--m-trazo); border-radius: var(--m-radio);
  }
  .mc-flecha:disabled { border-style: dashed; border-color: var(--m-linea); color: var(--m-texto-2); opacity: .45; cursor: default; }
  .mc-mapa { display: grid; grid-template-columns: 16px 16px; grid-template-rows: 16px 16px; gap: 3px; }
  .mc-mapa i { display: block; border: 1px solid var(--m-control); background: var(--m-fondo); }
  .mc-mapa i.lib { border-style: dashed; border-color: var(--m-linea); }
  .mc-mapa i.act { background: var(--m-trazo); border-color: var(--m-trazo); }
  .mc-mapa i.tu:not(.act) { box-shadow: inset 0 0 0 3px var(--m-fondo), inset 0 0 0 8px var(--m-exito); }

  /* Marcador en la cabecera, entre el logotipo y el menú. */
  .mesa-marcador {
    display: flex; position: fixed; top: 0; height: 56px; left: 190px; right: 76px; z-index: 60;
    align-items: center; justify-content: flex-end; gap: 10px; overflow: hidden; z-index: 60;
    font-family: var(--m-datos); font-size: 12px; color: var(--m-texto); white-space: nowrap; pointer-events: none;
  }
  .mesa-marcador span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--m-linea); padding: 5px 8px; background: var(--m-fondo); }
  .mesa-marcador span.lib { color: var(--m-texto-2); border-style: dashed; text-transform: capitalize; }
  .mesa-marcador i { font-style: normal; color: var(--m-trazo); }
  .mesa-marcador b { font-weight: 500; font-size: 14px; }
  body:has(.barra.menu-abierto) .mesa-marcador { display: none; }
}

/* Móvil: escala tipográfica de la Fase 5 y todo lo que se pulsa a 44 px. */
@media (max-width: 660px) {
  .titulo-pagina, .pagina-clasica main.contenido > h1 { font-size: 28px; }
  .seccion { padding: 16px; }
  input[type=text], input[type=number], input[type=search], select, textarea,
  button, .boton-enlace, .btn-icono, .tag-btn, .tag-chip-explorador, .menu-acciones > summary { min-height: 44px; }
  .btn-icono, .menu-acciones > summary { width: 44px; height: 44px; }
  .galeria-carta .carta-menu-btn { width: 44px; height: 44px; }
  .barra-idiomas select { font-size: 15px; }
  .tip { width: 24px; height: 24px; }
}

/* ==========================================================================
   18. AJUSTES DE LA REVISIÓN FINAL (auditoría de la web real, 27/09/2026):
       nada por debajo de 12 px y todo lo que se pulsa a 40 px (44 en móvil).
   ========================================================================== */
.pip { font-size: 12px; min-width: 18px; height: 18px; line-height: 18px; }
.galeria-carta .etiqueta small { font-size: 12px; }
.disp-icono { font-size: 12px; }
.cc-cifras { font-size: 12px; color: var(--m-texto-2); }
.cc-aviso { font-size: 12px; color: var(--m-aviso); font-weight: 600; }
.vista-toggle { padding: 0; gap: 0; }
.vista-toggle button { min-height: 40px; }
.carta-menu-btn { width: 40px; height: 40px; }
@media (max-width: 660px) {
  .vista-toggle button, .pestanas button, .menu-acciones-panel button, .menu-acciones-panel select { min-height: 44px; }
  .carta-menu-btn { width: 44px; height: 44px; }
}
.galeria-carta .disp-icono { font-size: 12px; }