/* WP0 · base común de los módulos nuevos (estilo Notion). Solo se AGREGAN reglas; nadie edita app.css.
   Valores del tema oscuro: medidos en Notion real (docs/plan-maestro/investigacion/05 y docs/NOTION_medidas.md).
   Valores del tema claro: NO medidos todavía, son razonables y quedan marcados «verificar». */
:root {
  --nx-h-th: 36px; --nx-h-fila: 37px; --nx-radio-tag: 4px; --nx-radio-menu: 10px; --nx-radio-ctrl: 6px;
  --nx-linea: rgba(255,255,243,.082); --nx-hover: rgba(255,255,255,.055);
  --nx-menu-bg: rgb(37,37,37);
  --nx-sombra-menu: rgb(56,56,54) 0 0 0 1px, rgba(25,25,25,.2) 0 14px 28px -6px, rgba(25,25,25,.118) 0 2px 4px -1px;
  --nx-azul: #2783de; --nx-azul-hover: #1f76cc; --nx-azul-tx: #529cca; --nx-azul-bg: rgba(35,131,226,.15);
  --nx-chk-borde: rgba(255,255,255,.4); --nx-chk-tilde: #fff; --nx-sombra-chica: rgba(0,0,0,.18) 0 1px 2px;
  /* 10 colores de etiqueta · oscuro (gris, azul, rojo, violeta, verde, naranja y amarillo medidos; marrón, rosa y «sin color» aproximados · verificar) */
  --nx-c-default-bg: rgba(255,255,255,.1); --nx-c-default-tx: #e3e2e0; /* verificar */
  --nx-c-gray-bg: rgba(155,154,151,.4); --nx-c-gray-tx: #e3e2e0;
  --nx-c-brown-bg: rgba(186,133,111,.45); --nx-c-brown-tx: #f4eeee; /* verificar */
  --nx-c-orange-bg: rgba(255,163,68,.48); --nx-c-orange-tx: #fcf0e0;
  --nx-c-yellow-bg: rgba(255,214,79,.42); --nx-c-yellow-tx: #fff7da;
  --nx-c-green-bg: rgba(86,200,140,.42); --nx-c-green-tx: #e3f6ec;
  --nx-c-blue-bg: rgba(81,166,255,.494); --nx-c-blue-tx: #e5f2fc;
  --nx-c-purple-bg: rgba(208,147,255,.427); --nx-c-purple-tx: #f3ebf9;
  --nx-c-pink-bg: rgba(225,136,179,.44); --nx-c-pink-tx: #fbeff6; /* verificar */
  --nx-c-red-bg: rgba(255,116,105,.525); --nx-c-red-tx: #fce9e7;
}
html[data-tema=claro] {
  --nx-linea: rgba(55,53,47,.09); --nx-hover: rgba(55,53,47,.06); /* verificar */
  --nx-menu-bg: #ffffff; /* verificar */
  --nx-sombra-menu: rgba(15,15,15,.05) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 6px, rgba(15,15,15,.2) 0 9px 24px; /* verificar */
  --nx-azul-tx: #1f6fbf; --nx-azul-bg: rgba(35,131,226,.12); --nx-chk-borde: rgba(55,53,47,.45); --nx-chk-tilde: #fff; --nx-sombra-chica: rgba(0,0,0,.18) 0 1px 2px; /* verificar */
  --nx-c-default-bg: rgba(55,53,47,.08); --nx-c-default-tx: #32302c; /* verificar */
  --nx-c-gray-bg: #e3e2e0; --nx-c-gray-tx: #32302c; /* verificar */
  --nx-c-brown-bg: #eee0da; --nx-c-brown-tx: #603b2c; /* verificar */
  --nx-c-orange-bg: #fadec9; --nx-c-orange-tx: #854c1d; /* verificar */
  --nx-c-yellow-bg: #fdecc8; --nx-c-yellow-tx: #89632a; /* verificar */
  --nx-c-green-bg: #dbeddb; --nx-c-green-tx: #2b593f; /* verificar */
  --nx-c-blue-bg: #d3e5ef; --nx-c-blue-tx: #183347; /* verificar */
  --nx-c-purple-bg: #e8deee; --nx-c-purple-tx: #412454; /* verificar */
  --nx-c-pink-bg: #f5e0e9; --nx-c-pink-tx: #5c2b43; /* verificar */
  --nx-c-red-bg: #ffe2dd; --nx-c-red-tx: #6e3630; /* verificar */
}

/* Etiqueta (el «chip» de color de Notion): alto 20, relleno 0 6, radio 4. Se le suma una clase de color: nx-c-blue, nx-c-red… */
.nx-tag { display: inline-flex; align-items: center; max-width: 100%; height: 20px; padding: 0 6px; margin-right: 6px; border-radius: var(--nx-radio-tag); font-size: var(--fs); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; background: var(--nx-tag-bg, var(--nx-c-default-bg)); color: var(--nx-tag-tx, var(--nx-c-default-tx)); }
.nx-c-default { --nx-tag-bg: var(--nx-c-default-bg); --nx-tag-tx: var(--nx-c-default-tx); }
.nx-c-gray { --nx-tag-bg: var(--nx-c-gray-bg); --nx-tag-tx: var(--nx-c-gray-tx); }
.nx-c-brown { --nx-tag-bg: var(--nx-c-brown-bg); --nx-tag-tx: var(--nx-c-brown-tx); }
.nx-c-orange { --nx-tag-bg: var(--nx-c-orange-bg); --nx-tag-tx: var(--nx-c-orange-tx); }
.nx-c-yellow { --nx-tag-bg: var(--nx-c-yellow-bg); --nx-tag-tx: var(--nx-c-yellow-tx); }
.nx-c-green { --nx-tag-bg: var(--nx-c-green-bg); --nx-tag-tx: var(--nx-c-green-tx); }
.nx-c-blue { --nx-tag-bg: var(--nx-c-blue-bg); --nx-tag-tx: var(--nx-c-blue-tx); }
.nx-c-purple { --nx-tag-bg: var(--nx-c-purple-bg); --nx-tag-tx: var(--nx-c-purple-tx); }
.nx-c-pink { --nx-tag-bg: var(--nx-c-pink-bg); --nx-tag-tx: var(--nx-c-pink-tx); }
.nx-c-red { --nx-tag-bg: var(--nx-c-red-bg); --nx-tag-tx: var(--nx-c-red-tx); }

/* Píldora de filtro / propiedad activa (azul de acción de Notion). */
.nx-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--nx-radio-ctrl); font: inherit; font-size: var(--fs-chico); line-height: 24px; white-space: nowrap; cursor: pointer; background: var(--nx-azul-bg); color: var(--nx-azul-tx); }
.nx-chip:hover { background: var(--nx-hover); }

/* Casilla de 16 px (Notion). Uso: <span class="nx-chk" role="checkbox" aria-checked="true|false|mixed" tabindex="0"></span> */
.nx-chk { position: relative; display: inline-block; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid var(--nx-chk-borde); border-radius: 3px; vertical-align: middle; cursor: pointer; background: transparent; }
.nx-chk[aria-checked=true], .nx-chk[aria-checked=mixed] { background: var(--nx-azul); border-color: var(--nx-azul); }
.nx-chk[aria-checked=true]::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--nx-chk-tilde); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nx-chk[aria-checked=mixed]::after { content: ""; position: absolute; left: 2px; top: 5.5px; width: 8px; height: 2px; background: var(--nx-chk-tilde); }
.nx-chk:focus-visible { outline: 2px solid var(--nx-azul); outline-offset: 2px; }

/* Menú flotante anclado (NX.menu). Ancho 290, radio 10, relleno 6, fundido corto. En celular se vuelve una hoja pegada abajo. */
.nx-menu { position: fixed; z-index: 55; box-sizing: border-box; width: 290px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px; border-radius: var(--nx-radio-menu); background: var(--nx-menu-bg); color: var(--ink); box-shadow: var(--nx-sombra-menu); font-size: var(--fs); animation: nx-in .08s ease-out; }
.nx-menu-it { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 0 8px; border: 0; border-radius: var(--nx-radio-ctrl); font: inherit; color: inherit; text-align: left; cursor: pointer; background: transparent; transition: background .02s; }
.nx-menu-it:hover, .nx-menu-it:focus-visible { background: var(--nx-hover); outline: 0; }
@keyframes nx-in { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .nx-menu { animation: none } }
html[data-ancho=cel] .nx-menu { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: auto !important; max-width: none; max-height: 70vh; border-radius: var(--nx-radio-menu) var(--nx-radio-menu) 0 0; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
html[data-ancho=cel] .nx-menu-it { min-height: 44px; }