/* WP2 · aspecto de la Selección (menú de estados) y del campo «Etapa». Se apoya en los tokens de nx-base.css; no toca app.css.
   Los colores sólidos --nx-s-* son los «puntitos» de cada estado (tablero, calendario, lista); las etiquetas usan .nx-tag de nx-base. */
:root {
  --nx-s-default: #8c8a86; --nx-s-gray: #9b9a97; --nx-s-brown: #bf8a73; --nx-s-orange: #ffa344; --nx-s-yellow: #ffdc49;
  --nx-s-green: #4dab9a; --nx-s-blue: #529cca; --nx-s-purple: #9a6dd7; --nx-s-pink: #e255a1; --nx-s-red: #ff7369;
}
html[data-tema=claro] {
  --nx-s-default: #787774; --nx-s-gray: #9b9a97; --nx-s-brown: #9f6b53; --nx-s-orange: #d9730d; --nx-s-yellow: #cb912f;
  --nx-s-green: #448361; --nx-s-blue: #337ea9; --nx-s-purple: #9065b0; --nx-s-pink: #c14c8a; --nx-s-red: #d44c47;
}

/* El campo en la ficha de la pieza: una etiqueta de color que abre el menú. */
.nxs-wrap { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.nxs-campo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 2rem; padding: 0 .5rem; border: 1px solid transparent; border-radius: var(--r-ctrl, .5rem); background: none; color: var(--ink); font: inherit; cursor: pointer; }
button.nxs-campo:hover, button.nxs-campo:focus-visible { border-color: var(--line-2, var(--line)); background: var(--raised, var(--hover)); outline: none; }
.nxs-campo.ro { cursor: default; }
.nxs-campo .nx-tag { margin-right: 0; }
.nxs-caret { display: inline-flex; color: var(--mute); }

/* El menú. Va dentro de .nx-menu (nx-base.css): ancho 290, radio 10, sombra de Notion. */
.nxs { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs); }
.nxs-top { padding: 0 2px 4px; }
.nxs-in, .nxs-ren { box-sizing: border-box; width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--nx-linea); border-radius: var(--nx-radio-ctrl); background: transparent; color: var(--ink); font: inherit; outline: none; }
.nxs-in:focus, .nxs-ren:focus { border-color: var(--nx-azul); box-shadow: 0 0 0 1px var(--nx-azul); }
.nxs-in::placeholder { color: var(--mute); }
.nxs-tit { padding: 4px 8px 2px; color: var(--mute); font-size: var(--fs-chico, .75rem); }
.nxs-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; max-height: min(46vh, 320px); overflow-y: auto; }
.nxs-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; } /* los 10 colores juntos, sin deslizar */
.nxs-op { position: relative; display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 4px 0 2px; border-radius: var(--nx-radio-ctrl); cursor: pointer; user-select: none; }
.nxs-op.act, .nxs-op:hover { background: var(--nx-hover); }
.nxs-op.arrastrando { background: var(--nx-hover); box-shadow: 0 0 0 1px var(--nx-azul) inset; opacity: .9; }
.nxs-et { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding-left: 6px; }
.nxs-asa { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 24px; color: var(--mute); opacity: 0; cursor: grab; touch-action: none; }
.nxs-op:hover .nxs-asa, .nxs-op.act .nxs-asa { opacity: .8; }
html[data-ancho=cel] .nxs-asa { opacity: .6; }
.nxs-ok { flex: none; display: inline-flex; align-items: center; padding: 0 4px; color: var(--ink); }
.nxs-mas { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--nx-radio-ctrl); background: transparent; color: var(--mute); cursor: pointer; opacity: 0; }
.nxs-op:hover .nxs-mas, .nxs-op.act .nxs-mas, .nxs-mas:focus-visible { opacity: 1; }
html[data-ancho=cel] .nxs-mas { opacity: 1; width: max(2.75rem, 44px); height: max(2.75rem, 44px); }
.nxs-mas:hover { background: var(--nx-hover); color: var(--ink); }
.nxs-crear .nxs-et { gap: 6px; }
.nxs-nota { padding: 6px 8px; color: var(--mute); font-size: var(--fs-chico, .75rem); }
.nxs-err { margin: 4px 2px 2px; padding: 6px 8px; border-radius: var(--nx-radio-ctrl); background: color-mix(in srgb, var(--bad, #d44c47) 16%, transparent); color: var(--bad, #ff7369); font-size: var(--fs-chico, .75rem); }

/* Opciones de un estado: nombre, borrar y los 10 colores. */
.nxs-cab { display: flex; align-items: center; gap: 6px; padding: 0 2px 4px; }
.nxs-cab .nx-tag { margin-right: 0; }
.nxs-atras { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--nx-radio-ctrl); background: transparent; color: var(--mute); cursor: pointer; }
.nxs-atras:hover { background: var(--nx-hover); color: var(--ink); }
.nxs-ren { margin: 0 2px 4px; width: calc(100% - 4px); }
.nxs-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 0 8px; border: 0; border-radius: var(--nx-radio-ctrl); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nxs-btn:hover, .nxs-btn:focus-visible { background: var(--nx-hover); outline: none; }
.nxs-borrar { color: var(--bad, #ff7369); }
.nxs-borrar.conf { background: color-mix(in srgb, var(--bad, #d44c47) 16%, transparent); font-weight: 600; }
.nxs-sec { padding: 8px 8px 2px; color: var(--mute); font-size: var(--fs-chico, .75rem); }
.nxs-col { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 0 6px; border: 0; border-radius: var(--nx-radio-ctrl); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nxs-col:hover, .nxs-col:focus-visible { background: var(--nx-hover); outline: none; }
.nxs-cn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxs-cuad { flex: none; width: 18px; height: 18px; border-radius: 4px; background: var(--nx-tag-bg); box-shadow: 0 0 0 1px var(--nx-linea) inset; }
.nxs-aviso { margin: 0; padding: 4px 8px 6px; color: var(--ink); line-height: 1.35; }

html[data-ancho=cel] .nxs-op, html[data-ancho=cel] .nxs-col, html[data-ancho=cel] .nxs-btn { min-height: 44px; }
html[data-ancho=cel] .nxs-in, html[data-ancho=cel] .nxs-ren { height: max(2.75rem, 44px); font-size: 16px; }
html[data-ancho=cel] .nxs-lista { max-height: 38vh; }