/* ERP de MINSA ENERGY — v0.2.0. Tokens de color: los de la maqueta aprobada (2026-10-01) sobre los nombres de Proyectos. Lo que la piel (minsa-ui.css, --sin-paleta) NO trae: fuentes locales,
   paleta y el shim de tokens, copiados LITERAL de minsa-proyectos-app/app/estilo.css (lineas 9-130, v0.160.0), mas el
   acomodo minimo del esqueleto. Tipografia de la maqueta aprobada (plan, 2026-10-01): Saira 600 26 px en titulos,
   Barlow 14-15 px en el texto, la monoespaciada solo en montos. Las pantallas reales llegan en la fase 4. */

/* ---- fuentes locales (OFL). La piel solo trae las variables --font-*; los @font-face los pone la app. */
@font-face { font-family: "Saira"; font-weight: 500; font-display: swap; src: url("./vendor/fuentes/Saira-500.woff2") format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 600; font-display: swap; src: url("./vendor/fuentes/Saira-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("./vendor/fuentes/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("./vendor/fuentes/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("./vendor/fuentes/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("./vendor/fuentes/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("./vendor/fuentes/IBMPlexMono-500.woff2") format("woff2"); }
/* v0.12.1: rotulo «PROYECTOS» del rail (Carlos, 12-sep, opcion E30 del artifact). Solo el 700 latin; no entra a --font-*. */
@font-face { font-family: "Bai Jamjuree"; font-weight: 700; font-display: swap; src: url("./vendor/fuentes/BaiJamjuree-700.woff2") format("woff2"); }

/* ==== PALETA (copiada de minsa-tablero-app/app/src/estilos.css; si cambia alla, cambia aqui) ==== */
:root {
  --ink-900: #1c1c1c; --ink-700: #383d41;
  --blue-800: #072884; --blue-700: #0833a3; --blue-600: #0f45c4; --blue-100: #e4ecfe;
  --orange-700: #d4620f; --orange-500: #f0913f; --orange-100: #fdeee2;
  --teal-700: #0d9488; --teal-500: #22b8a6; --teal-100: #e0f5f2;
  --green-800: #1f6b28; --green-700: #2c8a37; --green-500: #61cd6a; --green-100: #e6f8e8;
  --sky-700: #0a76b4; --sky-600: #0f8fd6; --sky-400: #69c6ff; --sky-100: #e8f6ff;
  --slate-950: #171717; --slate-900: #262626; --slate-800: #333333; --slate-600: #5c5c5c;
  --slate-500: #767676; --slate-400: #9c9c9c; --slate-300: #c4c4c4; --slate-200: #e4e4e4;
  --slate-150: #ebebeb; --slate-100: #f2f2f2; --slate-50: #f7f7f7;
  --red-700: #9c211c; --red-600: #c8322b; --red-100: #fdeceb;
  --amber-700: #a86400; --amber-600: #e08c00; --amber-100: #fff5e2;

  --page: #f7f8fa; --card: #ffffff; --sunken: #f1f3f6; --banda: #f4f4f4;   /* v0.29.0: cebra de .dtabla, mas tenue que --sunken */
  --rail: #fbfbfc; --rail-on: #ffffff;   /* v0.44.0 (Carlos, 15-sep; artifact AHsKBeHt, R7 «Transparente»): la barra toma el gris de la pagina, sin filete; el activo es pastilla blanca con sombra corta */
  --rail-tx: var(--slate-800); --rail-tx-strong: var(--slate-950); --rail-tx-mute: var(--slate-500); --rail-tx-faint: var(--slate-400);
  --rail-line: transparent; --rail-hover: var(--slate-150); --rail-chip: var(--slate-200);
  --tx: #111111; --tx-body: #262b33; --tx-mute: #5c6470; --tx-faint: var(--slate-400);
  --line: #cfd4dc; --line-soft: #e3e6eb;
  --brand: var(--blue-700); --on-brand: #ffffff;
  --serie: var(--orange-700); --serie2: var(--teal-700);
  --ok-fg: var(--green-800); --ok-bg: var(--green-100); --ok-solid: var(--green-700);
  --warn-fg: var(--amber-700); --warn-bg: var(--amber-100); --warn-solid: var(--amber-600);
  --bad-fg: var(--red-700); --bad-bg: var(--red-100); --bad-solid: var(--red-600);
  --info-fg: var(--sky-700); --info-bg: var(--sky-100); --info-solid: var(--sky-600);
  --idle-fg: var(--slate-600); --idle-bg: var(--slate-100); --idle-solid: var(--slate-400);
  --sobre-solido: #ffffff;   /* v0.27.0: tinta sobre un relleno solido (icono de archivo, etiqueta de expediente) */
  --f-display: "Saira", "Barlow", system-ui, sans-serif;
  --f-ui: "Barlow", system-ui, -apple-system, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, monospace;

  /* Colores de EQUIPO (config.js los referencia por nombre). Los 4 primeros son los del rail del
     tablero; los 2 de Ventas son propuesta aceptada en el artifact c52cb229 (2026-09-12). */
  --eq-calytek: var(--ok-solid); --eq-pitepec: var(--serie); --eq-rabasa: var(--serie2);
  --eq-administracion: var(--info-solid); --eq-ventas-quimicos: var(--brand); --eq-ventas-ambiental: var(--warn-solid);
}
/* ---- shim: los 34 tokens semanticos que minsa-ui.css consume (vendorizar.py --sin-paleta los lista) ---- */
:root {
  --surface-page: var(--page); --surface-card: var(--card); --surface-sunken: var(--sunken);
  --surface-hover: var(--rail-hover); --surface-active: var(--rail-chip); --surface-selected: var(--sunken);
  --text-strong: var(--tx); --text-body: var(--tx-body); --text-muted: var(--tx-mute); --text-faint: var(--tx-faint);
  --text-link: var(--brand); --brand-primary: var(--brand); --brand-accent: var(--ok-solid); --text-on-brand: var(--on-brand);
  --focus-ring: var(--sky-400);
  --border-hairline: var(--line-soft); --border-default: var(--line);
  --status-ok-fg: var(--ok-fg); --status-ok-bg: var(--ok-bg); --status-ok-solid: var(--ok-solid);
  --status-warn-fg: var(--warn-fg); --status-warn-bg: var(--warn-bg); --status-warn-solid: var(--warn-solid);
  --status-danger-fg: var(--bad-fg); --status-danger-bg: var(--bad-bg); --status-danger-solid: var(--bad-solid);
  --status-info-fg: var(--info-fg); --status-info-bg: var(--info-bg); --status-info-solid: var(--info-solid);
  --status-idle-fg: var(--idle-fg); --status-idle-bg: var(--idle-bg); --status-idle-solid: var(--idle-solid);
  --font-display: var(--f-display); --font-ui: var(--f-ui); --font-data: var(--f-data);
}
/* Las DOS listas oscuras son la MISMA (media query y atributo); se cambian juntas, como en el tablero. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0b1220; --card: #131c2c; --sunken: #0e1626; --banda: #101a2a;
    --rail: #0e1626; --rail-on: #182338;
    --rail-tx: var(--slate-300); --rail-tx-strong: #ffffff; --rail-tx-mute: var(--slate-500); --rail-tx-faint: var(--slate-600);
    --rail-line: transparent; --rail-hover: rgba(255,255,255,.05); --rail-chip: rgba(255,255,255,.09);
    --tx: #ffffff; --tx-body: #e6ebf2; --tx-mute: #94a2b8; --tx-faint: #6b7a90;
    --line: rgba(255,255,255,.18); --line-soft: rgba(255,255,255,.10);
    --brand: #69c6ff; --on-brand: #04123d;
    --serie: var(--orange-500); --serie2: var(--teal-500);
    --ok-fg: #86efac; --ok-bg: rgba(97,205,106,.14); --ok-solid: var(--green-500);
    --warn-fg: #fbbf5c; --warn-bg: rgba(224,140,0,.18); --warn-solid: #fbbf5c;
    --bad-fg: #f4948b; --bad-bg: rgba(200,50,43,.20); --bad-solid: #f4948b;
    --info-fg: #8fd6ff; --info-bg: rgba(15,143,214,.16); --info-solid: #8fd6ff;
    --sobre-solido: #141414;
    --idle-fg: #bcc6d6; --idle-bg: rgba(255,255,255,.07); --idle-solid: #4a5a70;
    --shadow-pop: 0 10px 34px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40); --shadow-raise: 0 1px 3px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b1220; --card: #131c2c; --sunken: #0e1626; --banda: #101a2a;
  --rail: #0e1626; --rail-on: #182338;
  --rail-tx: var(--slate-300); --rail-tx-strong: #ffffff; --rail-tx-mute: var(--slate-500); --rail-tx-faint: var(--slate-600);
  --rail-line: transparent; --rail-hover: rgba(255,255,255,.05); --rail-chip: rgba(255,255,255,.09);
  --tx: #ffffff; --tx-body: #e6ebf2; --tx-mute: #94a2b8; --tx-faint: #6b7a90;
  --line: rgba(255,255,255,.18); --line-soft: rgba(255,255,255,.10);
  --brand: #69c6ff; --on-brand: #04123d;
  --serie: var(--orange-500); --serie2: var(--teal-500);
  --ok-fg: #86efac; --ok-bg: rgba(97,205,106,.14); --ok-solid: var(--green-500);
  --warn-fg: #fbbf5c; --warn-bg: rgba(224,140,0,.18); --warn-solid: #fbbf5c;
  --bad-fg: #f4948b; --bad-bg: rgba(200,50,43,.20); --bad-solid: #f4948b;
  --info-fg: #8fd6ff; --info-bg: rgba(15,143,214,.16); --info-solid: #8fd6ff;
  --sobre-solido: #141414;
  --idle-fg: #bcc6d6; --idle-bg: rgba(255,255,255,.07); --idle-solid: #4a5a70;
  --shadow-pop: 0 10px 34px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40); --shadow-raise: 0 1px 3px rgba(0,0,0,.35);
}
/* El rail toma los tokens --rail-* del tablero (blanco en claro, negro en oscuro). */
.rail { background: var(--rail); color: var(--rail-tx); border-color: var(--rail-line); }
/* v0.44.0: la pestaña activa del rail es una PASTILLA blanca con hairline y sombra corta (la barra ya no tiene fondo propio). Los equipos, al pasar y al filtrar, tambien en blanco. */
.rail nav button.is-on { background: var(--rail-on); color: var(--brand-primary); box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(20,24,32,.10), 0 4px 10px rgba(20,24,32,.07); }
.rail .equipos button.is-on, .rail .equipos button:hover { background: var(--rail-on); }
@media (max-width: 720px) { .rail { border-top-color: var(--border-hairline); background: var(--surface-card); } }   /* en celular la barra va ABAJO, fija: conserva fondo y hairline para separarse del contenido que pasa debajo */

/* ---- utilidades propias */
.oculto { display: none !important; }
/* Todo `display:` de la piel pisa el [hidden] del UA: «ver 50 más (0 restantes)» y «ver toda» se veian
   con .hidden = true (revisor, 2026-09-12), y las insignias del rail (Mensajes, Mis tareas, Proyectos)
   pintaban «0» aunque el JS las ocultara (`.mn-rail-hot { display: inline-grid }`; Carlos, 2026-09-14). */
[hidden] { display: none !important; }
.solo-oscuro { display: none; }
:root[data-theme="dark"] .solo-claro { display: none; }
:root[data-theme="dark"] .solo-oscuro { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .solo-claro { display: none; }
  :root:not([data-theme="light"]) .solo-oscuro { display: inline; }
}

/* ==== v0.2.0: armazon y pantallas (maqueta aprobada 2026-10-01: Main 1366 / Celular 390) ==== */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font: 400 15px/1.45 var(--font-ui); overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
/* entrada */
.entrar { max-width: 520px; margin: 0 auto; padding: 48px 16px; display: grid; gap: 16px; }
.entrar .logo { width: 180px; height: auto; }
.entrar h1 { font: 600 26px/1.2 var(--font-display); color: var(--text-strong); margin: 0; }
.entrar p { margin: 0; font-size: 14px; }
.entrar .pista { color: var(--text-muted); }
.entrar .mn-card { display: grid; gap: 12px; }
/* armazon: rail a la izquierda (264 px), pestañas abajo en celular (la piel .mn-shell/.mn-rail ya colapsa a 720 px) */
.erp.mn-shell { grid-template-columns: 264px minmax(0, 1fr); }
.erp .mn-rail { position: sticky; top: 0; height: 100dvh; background: var(--rail); color: var(--rail-tx); border-right: 1px solid var(--line-soft); padding: 22px 14px; gap: 4px; overflow-y: auto; }
.erp .marca-rail { display: flex; align-items: center; gap: 10px; padding: 0 6px 22px; }
.erp .marca-rail img { width: 110px; height: auto; }
.erp .nombre-app { font: 600 13px var(--font-ui); letter-spacing: .14em; color: var(--text-strong); border-left: 2px solid var(--ok-solid); padding-left: 10px; }
.erp .destinos { display: flex; flex-direction: column; gap: 4px; }
.erp .mn-rail .navb { position: relative; min-height: 44px; padding: 0 14px; gap: 14px; border-radius: 10px; color: var(--rail-tx); font: 500 15px var(--font-ui); width: 100%; }
.erp .mn-rail .navb .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.erp .mn-rail .navb.is-on { background: linear-gradient(90deg, rgba(105,150,255,.30), rgba(105,198,255,.06)); color: var(--brand); font-weight: 600; }
.erp .mn-rail .mn-rail-hot { font-family: var(--font-ui); font-size: 13px; }
.erp .grp { font: 600 11px var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); padding: 22px 14px 8px; }
.erp .mn-rail .pronto { opacity: .55; cursor: default; min-height: 40px; font: 500 14px var(--font-ui); color: var(--rail-tx); }
.erp .soon { margin-left: auto; font: 600 10.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.erp .pie-rail { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 12px; }
.erp .quien { color: var(--text-strong); font: 600 14px var(--font-ui); }
.erp .lbl, .vista .lbl { font: 600 11px var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.erp .seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.erp .seg button { flex: 1; border: 0; background: var(--card); color: var(--text-muted); font: 600 14px var(--font-ui); min-height: 36px; cursor: pointer; justify-content: center; }
.erp .seg button.on { background: var(--blue-700); color: #ffffff; }
.erp .pie { text-align: left; margin: 0; }
.erp .principal { min-width: 0; }
.erp .barra-movil { display: none; }
.vista { padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 22px; max-width: 1180px; }
/* tipografia de la maqueta: Saira 600 en titulos, Barlow el texto */
.vista .cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vista .ttl { font: 600 26px/1.15 var(--font-display); color: var(--text-strong); margin: 4px 0 0; overflow-wrap: anywhere; }
.vista .h2 { font: 600 17px var(--font-display); color: var(--text-strong); margin: 0; }
.vista .sub { color: var(--text-muted); font-size: 15px; margin-top: 6px; }
.vista .desc { max-width: 760px; }
.vista .muted { color: var(--text-muted); }
.vista .vacio { color: var(--text-muted); font-size: 14px; margin: 8px 0; }
.vista .card { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.vista .card-cab { display: flex; align-items: center; gap: 10px; }
.vista .mn-chip { height: 24px; border-radius: 5px; font: 600 12px var(--font-ui); }
/* el boton que dice que falta (maqueta: .btn.incomplete) */
.btn.incompleto { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 8px; background: var(--sunken); border: 1.5px dashed var(--line); color: var(--text-strong); font: 600 14px var(--font-ui); cursor: not-allowed; white-space: normal; text-align: center; }
/* Inicio · Mis pendientes */
.pendientes .grupo { display: flex; flex-direction: column; margin-top: 10px; }
.pendientes .sec { font: 600 11px var(--font-ui); letter-spacing: .09em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); display: flex; gap: 10px; color: var(--text-muted); }
.pendientes .sec.r { color: var(--bad-fg); }
.pendientes .sec.a { color: var(--warn-fg); }
.pendientes .sec.b { color: var(--info-fg); }
.pendientes .fila { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-soft); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.pendientes .fila:last-child { border-bottom: 0; }
.pendientes .fila:hover .titulo { color: var(--brand); }
.dia { text-align: right; line-height: 1.05; display: flex; flex-direction: column; }
.dia b { font: 600 17px var(--font-display); color: var(--text-strong); }
.dia .mes, .hoja .mes { font: 600 11px var(--font-ui); letter-spacing: .09em; color: var(--brand); }
.dia.sin b, .hoja.sin b { color: var(--text-muted); }
.dia.sin .mes, .hoja.sin .mes { color: var(--text-muted); font-size: 10px; text-transform: uppercase; }
.pendientes .titulo { color: var(--text-strong); font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.pendientes .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; margin-top: 2px; }
/* tarjeta de proyecto (Inicio y Proyectos) */
.rejilla-proyectos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lista-proyectos { display: grid; gap: 12px; }
.pcard { display: grid; grid-template-columns: 56px 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.pcard:hover { border-color: var(--line); background: var(--sunken); }
.hoja { text-align: center; display: flex; flex-direction: column; line-height: 1; gap: 2px; }
.hoja b { font: 600 26px/1 var(--font-display); color: var(--text-strong); }
.pc-tit .nombre { font: 500 15px/1.3 var(--font-ui); color: var(--text-strong); overflow-wrap: anywhere; }
.pc-tit .rama { font: 600 11px var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ok-fg); margin-top: 4px; }
.pcard .nums { display: grid; grid-template-columns: repeat(3, 64px); gap: 6px; }
.pcard .n { text-align: center; display: flex; flex-direction: column; }
.pcard .n b { font: 600 22px/1 var(--font-display); color: var(--text-strong); }
.pcard .n span { font: 600 10px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.cerrados summary { cursor: pointer; font: 600 13px var(--font-ui); color: var(--text-muted); padding: 8px 0; }
/* Proyecto: tablero */
.volver { align-self: flex-start; border: 0; background: none; color: var(--brand); font: 600 14px var(--font-ui); cursor: pointer; padding: 4px 0; }
.linea-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kanban { display: grid; grid-template-columns: repeat(var(--ncol, 4), minmax(170px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.kcol { background: var(--sunken); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kcol-cab { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; border-bottom: 3px solid var(--line); }
.kcol-cab h2 { margin: 0; }
.k-por-hacer .kcol-cab { border-bottom-color: var(--warn-solid); }
.k-en-curso .kcol-cab { border-bottom-color: var(--brand); }
.k-hecho .kcol-cab { border-bottom-color: var(--ok-solid); }
.kc { background: var(--card); border: 1px solid var(--line-soft); border-left: 4px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.k-por-hacer .kc { border-left-color: var(--warn-solid); }
.k-en-curso .kc { border-left-color: var(--brand); }
.k-hecho .kc { border-left-color: var(--ok-solid); }
.kc .titulo { color: var(--text-strong); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.kc-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.kc .quien { display: inline-flex; align-items: center; gap: 8px; }
.av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--info-bg); color: var(--brand); font: 700 11px var(--font-ui); flex: none; }
.nota-lectura { color: var(--text-muted); font-size: 13px; margin: 0; }
/* en construccion */
.construccion { align-items: flex-start; max-width: 720px; }
.construccion p { margin: 0; }
.construccion .personas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.construccion .personas li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); padding: 6px 0; }
@media (max-width: 1100px) { .rejilla-proyectos { grid-template-columns: minmax(0, 1fr); } }
/* celular: pestañas abajo (5 destinos); lo de «Después» y el pie del rail se ocultan; la barra de arriba trae el tema */
@media (max-width: 720px) {
  .erp.mn-shell { grid-template-columns: minmax(0, 1fr); }
  .erp .mn-rail { position: fixed; top: auto; height: auto; padding: 4px 4px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line-soft); background: var(--card); overflow: visible; }
  .erp .marca-rail, .erp .grp, .erp .pronto, .erp .pie-rail { display: none; }
  .erp .destinos { flex-direction: row; width: 100%; gap: 2px; }
  .erp .mn-rail .navb { flex: 1; flex-direction: column; gap: 4px; min-height: 60px; padding: 0 2px; font: 600 11px var(--font-ui); letter-spacing: 0; text-transform: none; }
  .erp .mn-rail .navb.is-on { background: var(--card); box-shadow: 0 0 0 1px var(--line-soft); }
  .erp .mn-rail .mn-rail-hot { position: absolute; top: 4px; right: 18%; margin: 0; }
  .erp .barra-movil { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); background: var(--card); }
  .erp .barra-movil img { width: 96px; height: auto; }
  .erp .barra-movil .mn-btn { min-height: 36px; font-size: 13px; }
  .vista { padding: 18px 16px 96px; gap: 18px; }
  .vista .ttl { font-size: 22px; }
  .vista .cabecera { flex-direction: column; }
  .vista .card { padding: 16px; border-radius: 14px; }
  .pcard { grid-template-columns: 44px 30px minmax(0, 1fr); padding: 12px; }
  .pcard .nums { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kanban { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
}
#avisos .mensaje { display: flex; gap: var(--sp-2, 8px); align-items: center; padding: var(--sp-2, 8px) var(--sp-3, 12px); border-radius: 8px; background: var(--status-info-bg); color: var(--status-info-fg); }
#avisos .mensaje.error { background: var(--status-danger-bg); color: var(--status-danger-fg); }
#avisos .mensaje .cerrar { margin-left: auto; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.pie { color: var(--text-faint); font-size: 12px; text-align: center; }

/* v0.3.0 — escrituras del kanban: la tarjeta es un boton (abre su ficha) y se arrastra en escritorio; los dialogos .mn-dialog. */
button.kc { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.kc:hover { border-color: var(--line); }
button.kc:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kc .titulo { display: block; }
.kc[draggable="true"] { cursor: grab; }
.kc.arrastrando { opacity: .45; }
.kcol.recibe { outline: 2px dashed var(--brand); outline-offset: -2px; }
.dlg-erp { width: min(34rem, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.dlg-erp .mn-dialog-head { align-items: flex-start; }
.dlg-erp .mn-dialog-head h2 { overflow-wrap: anywhere; }
.dlg-erp .ficha-cab { min-width: 0; }
.dlg-erp .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.dlg-erp .dos .mn-field + .mn-field { margin-top: 0; }
.dlg-erp .dos + .mn-field { margin-top: 12px; }
.dlg-erp .mn-dialog-foot { flex-wrap: wrap; }
.dlg-erp .borrar { margin-right: auto; color: var(--status-danger-solid); }
.dlg-erp .mover-caja { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.dlg-erp .mover { display: flex; flex-wrap: wrap; gap: 8px; }
.dlg-erp .mover .is-here { opacity: 1; font-weight: 600; }
.dlg-erp .dlg-avisos:empty { display: none; }
.dlg-erp .dlg-avisos { margin-bottom: 12px; }
.dlg-erp .fecha-campo { display: flex; gap: 8px; align-items: center; position: relative; }
.dlg-erp .fecha-campo input[type="text"] { flex: 1; min-width: 0; }
.dlg-erp .fecha-nativa { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; right: 0; bottom: 0; }
@media (max-width: 480px) { .dlg-erp .dos { grid-template-columns: 1fr; } }
.dlg-erp .fecha-cal { min-height: var(--control-h); min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.dlg-erp .fecha-cal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dlg-erp .mover-caja > .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--text-muted); }