/* nadico-ui 0.4.1 · sistema de diseño «Plano» de las webs internas de Nadico (D-2026-09-30-Nadico-UI-Plano).
   CSS puro, sin framework. Todo va con prefijo nd- para convivir con el CSS antiguo mientras se migra cada web.
   Tema: el del sistema (prefers-color-scheme). Fuente: Archivo (OFL) en ./fuentes. Iconos: Phosphor (./iconos).
   Colores: dos escalas (azul de marca y neutros teñidos de navy) y tokens semánticos que eligen de ellas.
   Referencia viva: muestra.html. Uso: README.md. */

@font-face { font-family: 'Archivo ND'; src: url(fuentes/archivo-latin.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: 'Archivo ND'; src: url(fuentes/archivo-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F; }

/* ---------- Escalas (no se usan directamente en los componentes) ---------- */
:root {
  --nd-navy: #002554;
  --nd-az-50: #f0f3fc; --nd-az-100: #e1e7f8; --nd-az-200: #c6d0f1; --nd-az-300: #a9b8e8; --nd-az-400: #8196dd; --nd-az-500: #5f77d3;
  --nd-az-600: #435cc8; --nd-az-700: #3549a7; --nd-az-800: #2a3a85; --nd-az-900: #1f2c64; --nd-az-950: #121b42;
  --nd-n-0: #ffffff; --nd-n-25: #f7f9fc; --nd-n-50: #eef2f8; --nd-n-100: #e2e8f2; --nd-n-200: #cfd8e7; --nd-n-300: #aebbd2; --nd-n-400: #8494b3;
  --nd-n-500: #5f6f90; --nd-n-600: #475674; --nd-n-700: #33415c; --nd-n-800: #1f2b44; --nd-n-850: #152038; --nd-n-900: #0d172b; --nd-n-950: #070f1f;
}

/* ---------- Tokens semánticos: tema claro ---------- */
:root {
  --nd-pagina: var(--nd-n-50); --nd-sup: var(--nd-n-0); --nd-sup-2: var(--nd-n-25); --nd-realce: var(--nd-n-100);
  --nd-linea: var(--nd-n-100); --nd-linea-media: #75849f; --nd-linea-fuerte: var(--nd-navy);  /* #75849f: 3,5:1 sobre la página y 4:1 sobre blanco */
  --nd-tinta: #0d1f3c; --nd-tinta-2: var(--nd-n-600); --nd-enlace: var(--nd-az-700); --nd-foco: var(--nd-az-600);
  --nd-primario: var(--nd-navy); --nd-primario-h: #0b3a78; --nd-sobre-primario: #ffffff;
  /* La banda es navy en los dos temas: su tinta, su filete y su realce no cambian con el tema; el velo va detrás de los diálogos */
  --nd-sobre-navy: var(--nd-n-0); --nd-linea-navy: rgba(169, 184, 232, .35); --nd-realce-navy: rgba(169, 184, 232, .12); --nd-velo: rgba(3, 13, 31, .55);
  --nd-acento: var(--nd-az-600); --nd-seleccion: var(--nd-az-50);
  --nd-peligro: #b42318; --nd-peligro-h: #9a1d13;
  --nd-ok-f: #e6f4ec; --nd-ok: #1b6b3f; --nd-aviso-f: #fdf3dc; --nd-aviso: #8a5a00;
  --nd-error-f: #fdeceb; --nd-error: #b42318; --nd-info-f: var(--nd-az-50); --nd-info: var(--nd-az-700);
  --nd-sombra: 0 1px 2px rgba(0, 37, 84, .06), 0 8px 24px rgba(0, 37, 84, .10);
  --nd-e1: 4px; --nd-e2: 8px; --nd-e3: 12px; --nd-e4: 16px; --nd-e5: 20px; --nd-e6: 24px; --nd-e8: 32px; --nd-e10: 40px;
  --nd-r-s: 2px; --nd-r-m: 4px; --nd-r-l: 6px; --nd-alto: 38px;
  --nd-t-xs: 11px; --nd-t-s: 12px; --nd-t-m: 13px; --nd-t: 14px; --nd-t-l: 16px; --nd-t-xl: 22px; --nd-t-xxl: 30px;
  --nd-sans: 'Archivo ND', system-ui, sans-serif; --nd-mono: Consolas, 'Cascadia Mono', ui-monospace, monospace;
  --nd-curva: cubic-bezier(.23, 1, .32, 1);
  --nd-reticula: linear-gradient(rgba(169,184,232,.14) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(90deg, rgba(169,184,232,.14) 1px, transparent 1px) 0 0 / 80px 80px,
                 linear-gradient(rgba(169,184,232,.06) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(169,184,232,.06) 1px, transparent 1px) 0 0 / 16px 16px;
  color-scheme: light;
}
/* ---------- Tema oscuro: tres niveles de superficie y líneas que se ven ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --nd-pagina: var(--nd-n-950); --nd-sup: var(--nd-n-900); --nd-sup-2: var(--nd-n-850); --nd-realce: var(--nd-n-800);
    --nd-linea: var(--nd-n-800); --nd-linea-media: var(--nd-n-500); --nd-linea-fuerte: #3a5282;
    --nd-tinta: #e8eef8; --nd-tinta-2: #a3b1cc; --nd-enlace: var(--nd-az-300); --nd-foco: var(--nd-az-300);
    --nd-primario: var(--nd-az-600); --nd-primario-h: #4d66d1;
    --nd-acento: var(--nd-az-400); --nd-seleccion: var(--nd-az-950);
    --nd-peligro: #c9302c; --nd-peligro-h: #d63d38;
    --nd-ok-f: #0f2e20; --nd-ok: #7fd3a1; --nd-aviso-f: #33260a; --nd-aviso: #f2c66d;
    --nd-error-f: #3a1519; --nd-error: #ff9a92; --nd-info-f: #17224a; --nd-info: #b9c6f2;
    --nd-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
.nd, .nd *, .nd *::before, .nd *::after { box-sizing: border-box; }
body.nd { margin: 0; background: var(--nd-pagina); color: var(--nd-tinta); font: var(--nd-t)/1.45 var(--nd-sans); font-kerning: normal; -webkit-font-smoothing: antialiased; }
.nd :where(h1, h2, h3, p, dl, dd, figure, fieldset, ol, ul) { margin: 0; }
.nd :where(fieldset) { border: 0; padding: 0; min-width: 0; }
.nd :where(h1, h2, h3) { text-wrap: balance; }
.nd :where(p, dd, li) { text-wrap: pretty; }
/* :where() deja la regla sin peso: cualquier clase (banda, botón, tabla) la sustituye */
:where(.nd) a { color: var(--nd-enlace); text-underline-offset: 3px; }
.nd :focus-visible { outline: 2px solid var(--nd-foco); outline-offset: 2px; }
/* hidden gana siempre: un componente con display propio (p. ej. .nd-error-campo) no puede volver a enseñarse */
.nd [hidden] { display: none !important; }
.nd :where(button, a, input, select, summary, label) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nd .nd-num, .nd .nd-mono { font-variant-numeric: tabular-nums; }
.nd .nd-mono { font-family: var(--nd-mono); font-size: var(--nd-t-m); }
.nd .nd-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nd .nd-saltar { position: absolute; left: var(--nd-e2); top: -48px; z-index: 30; background: var(--nd-sup); color: var(--nd-tinta); padding: var(--nd-e2) var(--nd-e3); border-radius: var(--nd-r-m); }
.nd .nd-saltar:focus { top: var(--nd-e2); }
.nd i.ph { font-size: 18px; line-height: 1; }
.nd .nd-tenue { color: var(--nd-tinta-2); }
.nd code { font-family: var(--nd-mono); font-size: .92em; background: var(--nd-realce); padding: 1px 5px; border-radius: var(--nd-r-s); }

/* Apilar bloques con el espaciado del sistema (en vez de márgenes sueltos) */
.nd-apilar { display: grid; gap: var(--nd-e4); align-content: start; }
/* Rejilla de columnas que se reparten solas (formularios, grupos de tarjetas) */
.nd-rejilla { display: grid; gap: var(--nd-e4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); align-items: start; }

/* ---------- Estructura: banda, menú, página ---------- */
/* Con viewport-fit=cover, el relleno lateral no baja del área segura (muesca en horizontal) */
.nd-barra { background: var(--nd-reticula), var(--nd-navy); color: var(--nd-sobre-navy); display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 56px auto; align-items: center; column-gap: var(--nd-e6);
  padding: env(safe-area-inset-top) max(var(--nd-e6), env(safe-area-inset-right)) 0 max(var(--nd-e6), env(safe-area-inset-left)); }
.nd-barra :focus-visible { outline-color: var(--nd-sobre-navy); }
.nd-marca { display: flex; align-items: center; gap: var(--nd-e3); min-height: 44px; color: inherit; text-decoration: none; }
.nd-marca img { height: 24px; width: auto; display: block; }
.nd-app { font-size: 17px; font-weight: 620; font-stretch: 106%; letter-spacing: -.01em; padding-left: var(--nd-e3); border-left: 1px solid var(--nd-linea-navy); }
.nd-sesion { grid-column: 3; display: flex; align-items: center; gap: var(--nd-e4); }
.nd-yo { display: flex; align-items: center; gap: var(--nd-e2); color: var(--nd-az-200); }
.nd-avatar { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--nd-az-300); color: var(--nd-sobre-navy); display: grid; place-items: center; font-size: var(--nd-t-s); font-weight: 600; }
.nd-salir { color: var(--nd-sobre-navy); display: flex; gap: 6px; align-items: center; text-decoration: none; font-weight: 520; background: none; border: 0; font: inherit; cursor: pointer; min-height: 32px; }
.nd-menu { grid-column: 1 / -1; grid-row: 2; display: flex; gap: var(--nd-e1); margin-top: var(--nd-e1); overflow-x: auto; scrollbar-width: none; }
.nd-menu::-webkit-scrollbar { display: none; }
.nd-menu a { display: flex; align-items: center; gap: var(--nd-e2); padding: 10px 14px 12px; color: var(--nd-az-200); text-decoration: none; font-weight: 560; border-radius: var(--nd-r-l) var(--nd-r-l) 0 0; white-space: nowrap; }
.nd-menu a[aria-current="page"] { background: var(--nd-pagina); color: var(--nd-tinta); }
.nd-cuenta { font-size: var(--nd-t-xs); font-variant-numeric: tabular-nums; background: var(--nd-az-600); color: var(--nd-sobre-navy); border-radius: 3px; padding: 0 6px; line-height: 18px; }

.nd-pagina { max-width: 1440px; margin: 0 auto; padding: 28px max(var(--nd-e6), env(safe-area-inset-right)) max(var(--nd-e10), env(safe-area-inset-bottom)) max(var(--nd-e6), env(safe-area-inset-left)); }
.nd-cabeza { margin-bottom: var(--nd-e6); }
/* La cota bajo el título: el gesto de marca, uno por página */
.nd-cabeza h1, .nd-titulo { display: inline-block; font-size: var(--nd-t-xxl); line-height: 1.08; font-weight: 650; font-stretch: 96%; letter-spacing: -.02em; padding-bottom: var(--nd-e3);
  background: linear-gradient(var(--nd-acento), var(--nd-acento)) 0 100% / 100% 1px no-repeat,
              linear-gradient(135deg, transparent 42%, var(--nd-acento) 42% 58%, transparent 58%) 0 100% / 7px 7px no-repeat,
              linear-gradient(135deg, transparent 42%, var(--nd-acento) 42% 58%, transparent 58%) 100% 100% / 7px 7px no-repeat; }
.nd-sub { color: var(--nd-tinta-2); margin-top: 10px; max-width: 75ch; }
.nd-seccion { margin-top: var(--nd-e10); scroll-margin-top: var(--nd-e4); }
.nd-seccion-cab { margin-bottom: var(--nd-e4); max-width: 75ch; }
.nd-seccion-cab h2, .nd-seccion > h2 { font-size: 18px; font-weight: 650; letter-spacing: -.005em; }
.nd-seccion-cab p { color: var(--nd-tinta-2); margin-top: var(--nd-e1); }
.nd-zona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: var(--nd-e5); align-items: start; }

/* ---------- Superficies ---------- */
.nd-panel { background: var(--nd-sup); border: 1px solid var(--nd-linea); border-radius: var(--nd-r-l); }
.nd-panel-cuerpo { padding: var(--nd-e5); }
.nd-panel-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--nd-e3); padding: var(--nd-e3) var(--nd-e4); flex-wrap: wrap; border-bottom: 1px solid var(--nd-linea); }

/* ---------- Botones ---------- */
.nd-btn { font: inherit; font-weight: 600; min-height: var(--nd-alto); padding: 0 var(--nd-e4); border-radius: var(--nd-r-m); display: inline-flex; align-items: center; justify-content: center; gap: var(--nd-e2);
  cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap; line-height: 1; }
.nd-btn i.ph { font-size: 16px; }
.nd-btn--primario { background: var(--nd-primario); color: var(--nd-sobre-primario); }
.nd-btn--secundario { background: var(--nd-sup); border-color: var(--nd-linea-media); color: var(--nd-tinta); }
.nd-btn--peligro { background: var(--nd-peligro); color: var(--nd-sobre-primario); }
.nd-btn--texto { background: none; color: var(--nd-enlace); padding: 0 var(--nd-e2); text-decoration: underline; min-height: 32px; }
.nd-btn--peque { min-height: 30px; padding: 0 var(--nd-e3); font-size: var(--nd-t-m); }
.nd-btn[disabled], .nd-btn[aria-disabled="true"] { background: var(--nd-sup-2); border-color: var(--nd-linea); color: var(--nd-tinta-2); cursor: not-allowed; }
.nd-btn[aria-busy="true"] { cursor: progress; }
.nd-btn[aria-busy="true"]::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.nd-acciones { display: flex; gap: var(--nd-e2); flex-wrap: wrap; align-items: center; }

/* ---------- Campos ---------- */
.nd-campo { display: grid; gap: 6px; align-content: start; }
.nd-campo > label, .nd-campo > legend, .nd-etiqueta { font-size: var(--nd-t-m); font-weight: 560; color: var(--nd-tinta); padding: 0; }
.nd-campo > legend { margin-bottom: 6px; }
.nd-ayuda { font-size: var(--nd-t-s); color: var(--nd-tinta-2); }
.nd-error-campo { font-size: var(--nd-t-s); color: var(--nd-error); display: flex; gap: var(--nd-e1); align-items: center; }
.nd :where(.nd-input, .nd-campo input:not([type=checkbox]):not([type=radio]), .nd-campo select, .nd-campo textarea) {
  font: inherit; font-size: 15px; color: var(--nd-tinta); background: var(--nd-sup); border: 1px solid var(--nd-linea-media); border-radius: var(--nd-r-m); min-height: var(--nd-alto); padding: 6px 10px; width: 100%; }
.nd .nd-campo select { height: var(--nd-alto); padding-top: 0; padding-bottom: 0; }
.nd :where(.nd-input, .nd-campo input, .nd-campo select, .nd-campo textarea):focus-visible { outline: 2px solid var(--nd-foco); outline-offset: 0; border-color: var(--nd-foco); }
.nd [aria-invalid="true"] { border-color: var(--nd-error) !important; }
.nd input[type=checkbox], .nd input[type=radio] { width: 16px; height: 16px; accent-color: var(--nd-acento); margin: 0; flex: none; }
.nd-opcion { display: flex; gap: var(--nd-e2); align-items: center; min-height: var(--nd-alto); cursor: pointer; }
.nd-buscar { display: flex; align-items: center; gap: var(--nd-e2); border: 1px solid var(--nd-linea-media); border-radius: var(--nd-r-m); padding: 0 10px; min-height: var(--nd-alto); background: var(--nd-sup); color: var(--nd-tinta-2); }
/* Un solo anillo: el del contenedor (outline, que sí se ve con colores forzados); el del input se apaga con más especificidad que .nd :focus-visible. */
.nd-buscar:focus-within { border-color: var(--nd-foco); outline: 1px solid var(--nd-foco); outline-offset: 0; }
.nd .nd-buscar input:focus-visible { outline: 0; }
.nd-buscar input { border: 0; background: none; font: inherit; color: var(--nd-tinta); min-width: 0; flex: 1; }
.nd-buscar input::placeholder { color: var(--nd-tinta-2); }

/* ---------- Filtros (botones de conmutación) ---------- */
.nd-filtros { display: inline-flex; border: 1px solid var(--nd-linea-media); border-radius: var(--nd-r-m); overflow: hidden; background: var(--nd-sup); }
.nd-filtros button { white-space: nowrap; font: inherit; font-weight: 560; background: none; color: var(--nd-tinta); border: 0; border-right: 1px solid var(--nd-linea-media); padding: 0 var(--nd-e3); min-height: 34px; cursor: pointer; }
.nd-filtros button:last-child { border-right: 0; }
.nd-filtros button span { color: var(--nd-tinta-2); font-variant-numeric: tabular-nums; margin-left: var(--nd-e1); }
.nd-filtros button[aria-pressed="true"] { background: var(--nd-primario); color: var(--nd-sobre-primario); }
.nd-filtros button[aria-pressed="true"] span { color: var(--nd-sobre-primario); }

/* ---------- Tabla (en móvil se convierte en lista; cada td lleva data-t) ---------- */
.nd-tabla { width: 100%; border-collapse: collapse; }
.nd-tabla th { text-align: left; font-size: var(--nd-t-s); font-weight: 560; color: var(--nd-tinta-2); padding: var(--nd-e2) 14px 7px; border-bottom: 1.5px solid var(--nd-linea-fuerte); white-space: nowrap; }
.nd-tabla th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: var(--nd-e1); align-items: center; min-height: 24px; margin-block: -4px; }
.nd-tabla th[aria-sort] button { color: var(--nd-tinta); font-weight: 600; }
.nd-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--nd-linea); vertical-align: top; }
.nd-tabla tbody tr:last-child td { border-bottom: 0; }
.nd-tabla tr.nd-activa { background: var(--nd-seleccion); }
.nd-tabla tr.nd-activa td:first-child { box-shadow: inset 3px 0 0 var(--nd-acento); }
.nd-tabla td a:not(.nd-btn) { color: var(--nd-tinta); font-weight: 620; text-decoration: none; }
.nd-linea2 { display: block; font-size: var(--nd-t-s); color: var(--nd-tinta-2); }

/* ---------- Estados y marcas (siempre con texto, nunca solo color) ---------- */
.nd-estado { display: inline-block; font-size: var(--nd-t-s); font-weight: 600; padding: 2px var(--nd-e2); border-radius: var(--nd-r-s); white-space: nowrap; background: var(--nd-realce); color: var(--nd-tinta-2); line-height: 1.35; }
.nd-estado--aviso { background: var(--nd-aviso-f); color: var(--nd-aviso); }
.nd-estado--info { background: var(--nd-info-f); color: var(--nd-info); }
.nd-estado--error { background: var(--nd-error-f); color: var(--nd-error); }
.nd-estado--ok { background: var(--nd-ok-f); color: var(--nd-ok); }
.nd-tipo { font-size: var(--nd-t-s); font-weight: 620; color: var(--nd-tinta); padding-left: 11px; background: linear-gradient(var(--nd-tinta-2), var(--nd-tinta-2)) 0 50% / 5px 5px no-repeat; }
.nd-tipo--alta { background-image: linear-gradient(var(--nd-acento), var(--nd-acento)); }
.nd-tipo--baja { background-image: linear-gradient(var(--nd-peligro), var(--nd-peligro)); }

/* ---------- Cifras ----------
   Solo lectura: <ul class="nd-cifras"> con <li>. Si además filtran (0.4.0): <div class="nd-cifras" role="group" aria-label="Filtrar…">
   con <button type="button" aria-pressed="true|false"><strong>12</strong><span>Copiando</span></button>; la elegida lleva fondo y filete (forma, no solo color). */
.nd-cifras { list-style: none; padding: 0; margin: 0 0 var(--nd-e6); display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, auto); border: 1px solid var(--nd-linea-fuerte); background: var(--nd-sup); }
.nd-cifras > * { padding: var(--nd-e3) var(--nd-e6) var(--nd-e3) var(--nd-e4); border-right: 1px solid var(--nd-linea); display: grid; gap: 2px; }
.nd-cifras > :last-child { border-right: 0; }
.nd-cifras strong { font-size: var(--nd-t-xl); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.nd-cifras span { font-size: var(--nd-t-s); color: var(--nd-tinta-2); }
.nd-cifras .nd-mal strong { color: var(--nd-error); }
.nd-cifras > button { font: inherit; color: var(--nd-tinta); background: none; border: 0; border-right: 1px solid var(--nd-linea); align-content: center; text-align: left; cursor: pointer; }
.nd-cifras > button[aria-pressed="true"] { background: var(--nd-seleccion); box-shadow: inset 0 -3px 0 var(--nd-acento); }
.nd-cifras > button[aria-pressed="true"] span { color: var(--nd-tinta); font-weight: 620; }
.nd .nd-cifras > button:focus-visible { outline-offset: -4px; }

/* ---------- Cajetín (ficha de datos) ---------- */
.nd-cajetin { background: var(--nd-sup); border: 1px solid var(--nd-linea-fuerte); }
.nd-cajetin-cab { padding: var(--nd-e4) var(--nd-e5) var(--nd-e3); border-bottom: 1px solid var(--nd-linea-fuerte); }
.nd-cajetin-cab h2 { font-size: var(--nd-t-xl); font-weight: 650; font-stretch: 96%; letter-spacing: -.01em; margin-top: var(--nd-e1); }
.nd-datos { display: grid; grid-template-columns: 1fr 1fr; }
.nd-datos > div { padding: var(--nd-e2) var(--nd-e5); border-bottom: 1px solid var(--nd-linea); min-width: 0; }
.nd-datos > div:nth-child(odd):not(.nd-ancho) { border-right: 1px solid var(--nd-linea); }
.nd-datos > .nd-ancho { grid-column: 1 / -1; }
.nd-datos dt { font-size: var(--nd-t-xs); color: var(--nd-tinta-2); }
.nd-datos dd { font-weight: 540; margin-top: 2px; overflow-wrap: anywhere; }
.nd-cajetin-bloque { padding: var(--nd-e3) var(--nd-e5); border-bottom: 1px solid var(--nd-linea); }
.nd-cajetin-bloque:last-child { border-bottom: 0; }

/* ---------- Avisos (en línea y flotantes; sustituyen a alert()) ---------- */
.nd-aviso { display: flex; gap: var(--nd-e2); align-items: flex-start; padding: 10px var(--nd-e3); border: 1px solid color-mix(in srgb, currentColor 40%, transparent); background: var(--nd-info-f); color: var(--nd-info); font-size: var(--nd-t-m); border-radius: var(--nd-r-m); }
.nd-aviso i.ph { font-size: 17px; margin-top: 1px; flex: none; }
.nd-aviso--aviso { background: var(--nd-aviso-f); color: var(--nd-aviso); }
.nd-aviso--error { background: var(--nd-error-f); color: var(--nd-error); }
.nd-aviso--ok { background: var(--nd-ok-f); color: var(--nd-ok); }
.nd-aviso strong { font-weight: 650; }
.nd-flotantes { position: fixed; right: max(var(--nd-e4), env(safe-area-inset-right)); bottom: max(var(--nd-e4), env(safe-area-inset-bottom)); z-index: 40; display: grid; gap: var(--nd-e2); width: min(420px, calc(100vw - 32px)); }
.nd-flotantes .nd-aviso { box-shadow: var(--nd-sombra); background-clip: padding-box; }

/* ---------- Vacío y carga ---------- */
.nd-vacio { text-align: center; padding: var(--nd-e10) var(--nd-e6); color: var(--nd-tinta-2); display: grid; justify-items: center; gap: var(--nd-e2); }
.nd-vacio i.ph { font-size: 32px; color: var(--nd-acento); }
.nd-vacio strong { color: var(--nd-tinta); font-size: var(--nd-t-l); }
.nd-carga { padding: var(--nd-e6); display: grid; gap: var(--nd-e3); align-content: start; }
.nd-esqueleto { display: block; height: 14px; border-radius: var(--nd-r-s); background: var(--nd-realce); }

/* ---------- Diálogo (usar <dialog> nativo: foco y Escape de serie) ---------- */
.nd-dialogo { overscroll-behavior: contain; border: 1px solid var(--nd-linea-fuerte); border-radius: var(--nd-r-l); padding: 0; background: var(--nd-sup); color: var(--nd-tinta); width: min(520px, calc(100vw - 32px)); box-shadow: var(--nd-sombra);
  max-height: calc(100dvh - 32px); }  /* dvh: con interactive-widget=resizes-content en el viewport, encoge al abrir el teclado (Android) */
.nd-dialogo::backdrop { background: var(--nd-velo); }
.nd-dialogo > form, .nd-dialogo > div { padding: var(--nd-e5); display: grid; gap: var(--nd-e4); }
.nd-dialogo h2 { font-size: 18px; font-weight: 650; }

/* ---------- Pasos ---------- */
.nd-pasos { list-style: none; padding: 0; display: flex; gap: var(--nd-e2) var(--nd-e4); counter-reset: nd-paso; flex-wrap: wrap; }
.nd-pasos li { counter-increment: nd-paso; display: flex; align-items: center; gap: var(--nd-e2); color: var(--nd-tinta-2); font-weight: 560; }
.nd-pasos li::before { content: counter(nd-paso); width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: var(--nd-t-s); font-weight: 650; flex: none; }
.nd-pasos li[aria-current="step"] { color: var(--nd-tinta); }
.nd-pasos li[aria-current="step"]::before { background: var(--nd-primario); border-color: var(--nd-primario); color: var(--nd-sobre-primario); }
.nd-pasos li.nd-hecho { color: var(--nd-ok); }
.nd-pasos li.nd-hecho::before { content: '✓'; background: var(--nd-ok-f); border-color: var(--nd-ok); }

/* ---------- Progreso y registro en directo ---------- */
.nd-progreso { width: 100%; height: 8px; appearance: none; border: 0; border-radius: var(--nd-r-s); background: var(--nd-realce); overflow: hidden; }
.nd-progreso::-webkit-progress-bar { background: var(--nd-realce); }
.nd-progreso::-webkit-progress-value { background: var(--nd-acento); }
.nd-progreso::-moz-progress-bar { background: var(--nd-acento); }
.nd-registro { overscroll-behavior: contain; font-family: var(--nd-mono); font-size: var(--nd-t-s); line-height: 1.6; background: var(--nd-sup-2); border: 1px solid var(--nd-linea); border-radius: var(--nd-r-m); padding: var(--nd-e3); max-height: 240px; overflow: auto; white-space: pre-wrap; margin: 0; }

/* ---------- Fichas de grupo y selector ---------- */
.nd-fichas { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.nd-ficha { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nd-t-m); padding: 2px 3px 2px var(--nd-e2); border: 1px solid var(--nd-linea-media); border-radius: var(--nd-r-m); background: var(--nd-sup); }
.nd-ficha small { color: var(--nd-tinta-2); font-size: var(--nd-t-xs); }
.nd-ficha button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: none; color: var(--nd-tinta-2); border-radius: var(--nd-r-s); cursor: pointer; }
.nd-selector { display: grid; gap: var(--nd-e2); }
.nd-resultados { overscroll-behavior: contain; list-style: none; padding: 0; border: 1px solid var(--nd-linea-media); border-radius: var(--nd-r-m); background: var(--nd-sup); max-height: 280px; overflow: auto; box-shadow: var(--nd-sombra); }
.nd-resultados li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nd-e3); padding: 9px var(--nd-e3); border-bottom: 1px solid var(--nd-linea); cursor: pointer; }
.nd-resultados li:last-child { border-bottom: 0; }
.nd-resultados li[aria-selected="true"] { background: var(--nd-seleccion); box-shadow: inset 3px 0 0 var(--nd-acento); }
.nd-resultados li[aria-disabled="true"] { color: var(--nd-tinta-2); cursor: not-allowed; }

/* ---------- Interruptor (0.4.0): un ajuste que se aplica al momento, con la palabra del estado al lado ----------
   <label class="nd-interruptor"><input type="checkbox" role="switch" aria-label="Copiar 40-PDF">
     <span class="nd-interruptor-si" aria-hidden="true">Copiando</span><span class="nd-interruptor-no" aria-hidden="true">En pausa</span></label>
   El nombre accesible dice qué controla y no cambia; la palabra va con aria-hidden porque el lector ya dice activado o desactivado.
   Deshabilitado: sin transparencia; el mando y la palabra siguen leyéndose y el motivo va en texto al lado, no en title.
   Mejor aria-disabled="true" que disabled: sigue en el orden de tabulación y el lector dice el motivo (aria-describedby al texto visible);
   nadico.js impide el cambio. disabled se pinta igual, pero el teclado no llega y el motivo no se oye.
   El pomo es el ::before de la etiqueta (un input no admite ::before) y se mueve con transform, no con background-position. */
.nd-interruptor { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; cursor: pointer; font-weight: 560; color: var(--nd-tinta); }
.nd .nd-interruptor input { appearance: none; width: 40px; height: 24px; flex: none; margin: 0; cursor: inherit; border: 1.5px solid var(--nd-linea-media); border-radius: var(--nd-r-m); background: var(--nd-sup); }
.nd .nd-interruptor input:checked { border-color: var(--nd-acento); background: var(--nd-acento); }
.nd-interruptor::before { content: ''; position: absolute; left: 5.5px; top: calc(50% - 6px); width: 12px; height: 12px; background: var(--nd-tinta-2); pointer-events: none; }
.nd-interruptor:has(input:checked)::before { transform: translateX(17px); background: var(--nd-sup); }
.nd .nd-interruptor input:is(:disabled, [aria-disabled="true"]) { border-color: var(--nd-linea-media); background: var(--nd-realce); }
.nd-interruptor:has(input:is(:disabled, [aria-disabled="true"]))::before { background: var(--nd-tinta-2); }
.nd-interruptor:has(input:is(:disabled, [aria-disabled="true"])) { cursor: not-allowed; color: var(--nd-tinta-2); }
.nd-interruptor input:checked ~ .nd-interruptor-no, .nd-interruptor input:not(:checked) ~ .nd-interruptor-si { display: none; }
.nd-interruptor-no { color: var(--nd-tinta-2); }
@media (forced-colors: active) { .nd .nd-interruptor input { appearance: auto; width: 18px; height: 18px; } .nd-interruptor::before { content: none; } }

/* ---------- Ruta (0.4.0): recorrido tenue y la carpeta final marcada; parte solo entre tramos ----------
   <span class="nd-ruta" translate="no"><span>30-Proyecto<span class="nd-ruta-sep">\</span></span><wbr><span class="nd-ruta-fin">40-PDF</span></span>
   Cada tramo es un bloque en línea: baja entero a la línea siguiente y solo se parte por dentro si no cabe solo en una línea.
   Los caracteres no se cambian (se copia como ruta válida); nada de word-break: break-all. */
.nd-ruta { color: var(--nd-tinta-2); }
.nd-ruta > span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.nd-ruta > .nd-ruta-fin { color: var(--nd-tinta); font-weight: 620; }
.nd-ruta-sep { margin: 0 .2em; }

/* ---------- Franja de estado (0.4.0): una línea bajo el título con el estado global ----------
   Reposo: solo texto (p. ej. la última copia). En curso: icono que gira, barra (role=progressbar con aria-valuenow) y cifra.
   Aviso: no se puede lanzar ni seguir (p. ej. ya hay otra en curso); ni barra ni rojo.
   El texto va en una región viva (role=status) para que se anuncien el fin y el error; la cifra queda fuera para no anunciar cada paso. */
.nd-franja { display: grid; gap: var(--nd-e2); padding: var(--nd-e2) var(--nd-e2) var(--nd-e2) 14px; background: var(--nd-sup); border: 1px solid var(--nd-linea); border-radius: var(--nd-r-m); }
.nd-franja-fila { display: flex; align-items: center; gap: var(--nd-e2) var(--nd-e3); flex-wrap: wrap; min-height: 28px; }
.nd-franja-texto { display: flex; align-items: center; gap: var(--nd-e2); font-weight: 560; min-width: 0; }
.nd-franja-texto i.ph { color: var(--nd-tinta-2); flex: none; }
.nd-franja[data-estado="curso"] .nd-franja-texto i.ph { color: var(--nd-acento); }
.nd-franja[data-estado="ok"] .nd-franja-texto i.ph { color: var(--nd-ok); }
.nd-franja[data-estado="aviso"] .nd-franja-texto i.ph { color: var(--nd-aviso); }
.nd-franja[data-estado="error"] { border-color: color-mix(in srgb, var(--nd-error) 40%, transparent); }
.nd-franja[data-estado="error"] .nd-franja-texto, .nd-franja[data-estado="error"] .nd-franja-texto i.ph { color: var(--nd-error); }
.nd-franja-barra { flex: 1 1 96px; height: 8px; border-radius: var(--nd-r-s); background: var(--nd-realce); overflow: hidden; }
.nd-franja-barra > span { display: block; height: 100%; background: var(--nd-acento); transform: scaleX(0); transform-origin: left; }
.nd-franja-cifra { font-size: var(--nd-t-m); color: var(--nd-tinta-2); font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; }
.nd-franja:not([data-estado="curso"]) :is(.nd-franja-barra, .nd-franja-cifra) { display: none; }
.nd-franja-detalle summary { width: max-content; max-width: 100%; min-height: 32px; display: flex; align-items: center; cursor: pointer; font-size: var(--nd-t-m); color: var(--nd-tinta-2); }
.nd-franja-detalle .nd-registro { margin-top: var(--nd-e1); }

/* ---------- Estados de puntero: solo con ratón (en táctil el toque deja el hover pegado) ---------- */
@media (hover: hover) and (pointer: fine) {
  .nd-menu a:hover { color: var(--nd-sobre-navy); background: var(--nd-realce-navy); }
  .nd-menu a[aria-current="page"]:hover { background: var(--nd-pagina); color: var(--nd-tinta); }
  .nd-btn--primario:hover { background: var(--nd-primario-h); }
  .nd-btn--secundario:hover { background: var(--nd-sup-2); border-color: var(--nd-tinta-2); }
  .nd-btn--peligro:hover { background: var(--nd-peligro-h); }
  .nd-btn--texto:hover { text-decoration-thickness: 2px; }
  .nd-btn[disabled]:hover, .nd-btn[aria-disabled="true"]:hover { background: var(--nd-sup-2); border-color: var(--nd-linea); }
  .nd-filtros button:not([aria-pressed="true"]):hover { background: var(--nd-sup-2); }
  .nd-tabla tbody tr:not(.nd-activa):hover { background: var(--nd-sup-2); }
  .nd-tabla td a:not(.nd-btn):hover { color: var(--nd-enlace); text-decoration: underline; }
  .nd-ficha button:hover { background: var(--nd-error-f); color: var(--nd-error); }
  .nd-resultados li:not([aria-disabled="true"]):hover { background: var(--nd-seleccion); }
  .nd-salir:hover span { text-decoration: underline; }
  .nd-interruptor:hover input:not(:disabled):not([aria-disabled="true"]):not(:checked) { border-color: var(--nd-tinta-2); }
  .nd-franja-detalle summary:hover { color: var(--nd-tinta); }
  .nd-cifras > button:not([aria-pressed="true"]):hover { background: var(--nd-sup-2); }
}

/* ---------- Táctil: zonas de 44 px y campos a 16 px (con menos, iOS amplía la página al enfocar el campo) ---------- */
@media (pointer: coarse) {
  .nd input:not([type=checkbox]):not([type=radio]):not([type=range]), .nd select, .nd textarea { font-size: 16px; }
  .nd-menu a, .nd-buscar, .nd-btn--texto, .nd-franja-detalle summary { min-height: 44px; }
  .nd-salir { min-height: 44px; min-width: 44px; justify-content: center; }
  .nd-btn, .nd-btn--peque { min-height: 44px; }
  .nd-tabla th { padding-block: 0; }
  .nd-tabla th button { min-height: 44px; margin-block: 0; }
}

/* ---------- Movimiento (solo si no se ha pedido reducirlo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .nd-btn { transition: transform 160ms var(--nd-curva), background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
  .nd-btn:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(.97); }
  .nd-cifras > button { transition: background-color 140ms ease; }
  .nd-filtros button, .nd-menu a, .nd-tabla tr, .nd-resultados li { transition: background-color 140ms ease, color 140ms ease; }
  .nd-esqueleto { background: linear-gradient(90deg, var(--nd-realce) 0%, var(--nd-sup-2) 50%, var(--nd-realce) 100%) 0 0 / 200% 100%; animation: nd-brillo 1.4s linear infinite; }
  @keyframes nd-brillo { to { background-position: -200% 0; } }
  .nd-btn[aria-busy="true"]::before { animation: nd-giro .7s linear infinite; }
  @keyframes nd-giro { to { transform: rotate(1turn); } }
  .nd-flotantes .nd-aviso { transition: opacity 220ms var(--nd-curva), transform 220ms var(--nd-curva); @starting-style { opacity: 0; transform: translateY(8px); } }
  /* Diálogo y velo: entran en 180 ms y salen en 120 ms; allow-discrete los deja en la capa superior mientras se van */
  .nd-dialogo { opacity: 0; transform: scale(.98); transition: opacity 120ms var(--nd-curva), transform 120ms var(--nd-curva), overlay 120ms allow-discrete, display 120ms allow-discrete; }
  .nd-dialogo[open] { opacity: 1; transform: none; transition-duration: 180ms; @starting-style { opacity: 0; transform: scale(.98); } }
  .nd-dialogo::backdrop { opacity: 0; transition: opacity 120ms var(--nd-curva), overlay 120ms allow-discrete, display 120ms allow-discrete; }
  .nd-dialogo[open]::backdrop { opacity: 1; transition-duration: 180ms; @starting-style { opacity: 0; } }
  .nd .nd-interruptor input { transition: background-color 120ms ease, border-color 120ms ease; }
  .nd-interruptor::before { transition: transform 120ms var(--nd-curva), background-color 120ms ease; }
  .nd-franja { transition: opacity 200ms var(--nd-curva), transform 200ms var(--nd-curva); @starting-style { opacity: 0; transform: translateY(-4px); } }
  .nd-franja-barra > span { transition: transform 240ms linear; }
  .nd-franja[data-estado="curso"] .nd-franja-texto i.ph { animation: nd-giro 1s linear infinite; }
}

/* Con colores forzados la sombra no se pinta: la cifra elegida lleva contorno */
@media (forced-colors: active) {
  .nd-cifras > button[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -4px; }
}

/* ---------- Tableta: la zona lista + cajetín se apila ---------- */
@media (max-width: 1100px) {
  .nd-zona { grid-template-columns: 1fr; }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .nd-barra { padding: env(safe-area-inset-top) max(var(--nd-e4), env(safe-area-inset-right)) 0 max(var(--nd-e4), env(safe-area-inset-left)); column-gap: var(--nd-e3); }
  .nd-app, .nd-yo .nd-nombre, .nd-salir span { display: none; }
  .nd-menu { margin: 0 calc(-1 * var(--nd-e4)); padding: 0 var(--nd-e4); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .nd-pagina { padding: var(--nd-e5) max(var(--nd-e4), env(safe-area-inset-right)) max(var(--nd-e8), env(safe-area-inset-bottom)) max(var(--nd-e4), env(safe-area-inset-left)); }
  .nd-cabeza h1, .nd-titulo { font-size: 26px; }
  .nd-cifras { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; width: 100%; }
  .nd-cifras > :nth-child(2n) { border-right: 0; }
  .nd-cifras > :nth-child(-n+2) { border-bottom: 1px solid var(--nd-linea); }
  .nd-filtros { display: flex; width: 100%; } .nd-filtros button { flex: 1; padding: 0 2px; font-size: var(--nd-t-m); }
  .nd-buscar { width: 100%; }
  .nd-tabla thead { display: none; }
  .nd-tabla, .nd-tabla tbody, .nd-tabla tr, .nd-tabla td { display: block; }
  .nd-tabla tr { padding: var(--nd-e3) 14px; border-bottom: 1px solid var(--nd-linea); }
  .nd-tabla tbody tr:last-child { border-bottom: 0; }
  .nd-tabla td { padding: 3px 0; border: 0 !important; box-shadow: none !important; }
  .nd-tabla td[data-t]::before { content: attr(data-t); display: block; font-size: var(--nd-t-xs); color: var(--nd-tinta-2); }
  .nd-tabla td.nd-sin-etiqueta::before { content: none; }
  .nd-tabla tr.nd-activa { box-shadow: inset 3px 0 0 var(--nd-acento); }
  .nd-datos { grid-template-columns: 1fr; }
  .nd-datos > div:nth-child(odd):not(.nd-ancho) { border-right: 0; }
  .nd-acciones > .nd-btn { flex: 1 1 auto; }
}