/* Sistema visual v2 del ERP de Grupo Magma · «filas, no baldosas» · CANDIDATA 14-oct-2026 (sin aplicar)
 * ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 * Qué es: la capa de piezas que sustituye a las tarjetas con número gigante (bv-kpi, sl-kpi, mrh-kpi, mst-kpi…) y al
 * desplegable de notificaciones. Referencias: Holded (Inicio: «Acciones pendientes» como filas), Factorial (listas de
 * filas, saldo de 3 cifras en una banda, un botón principal abajo), MaintainX, Linear Inbox.
 * Reglas y patrones: SISTEMA-V2.md. Migración: MIGRACION.md.
 *
 * Ámbito: TODO bajo .m2 (una clase, no un id: vale en #mrh, en el portal y en una maqueta). Clases m2-*: no chocan con
 * v1 (mk-*), con el marco (mk-bar, mk-tab…) ni con las 130+ hojas del panel. v1 y v2 no se mezclan en una vista.
 * Tokens: los de v1 (tokens.css 1.1.0) se repiten aquí con LOS MISMOS VALORES para que v2.css se pueda incluir sola;
 * pruebas/verificar-v2.cjs los compara uno a uno con v1/tokens.css (claro y oscuro). Lo nuevo de v2 va en --m2-*.
 * Oscuro: el interruptor de siempre (html.theme-dark / body.theme-dark / html[data-theme=dark]); el portal
 * (body.marco-portal) siempre en claro, como v1. data-m2-tema="oscuro" en .m2 = oscuro forzado, solo maquetas y pruebas.
 * Doctrina heredada de v1: negro para actuar, rojo solo para romper, color siempre con palabra, sin morados, sin
 * pastillas (radios 4/6/8; 12 ventana; 16 solo arriba de la hoja), sin sombras difusas, sin degradados, Inter sin cursiva.
 * Índice: 0 tokens · 1 base · 2 página y cabecera · 3 botones · 4 chips, antigüedad y repetidos · 5 banda de resumen y
 * titular · 6 sección · 7 lista y fila · 8 acciones en la fila (en línea y al deslizar) · 9 bandeja · 10 vacío ·
 * 11 formulario de 2 toques · 12 hoja inferior · 13 tabla densa · 14 barra con el botón principal · 15 escritorio ·
 * 16 movimiento e impresión. */

/* ── 0 · Tokens ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Magma Inter";
  src: url("fuentes/Inter-roman.var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
.m2 {
  /* ── v1 (mismos nombres y valores que v1/tokens.css; NO se cambian aquí) ── */
  --mk-bg: #FFFFFF; --mk-side: #FAFAFA; --mk-subtle: #F4F4F5; --mk-hover: #F0F0F2; --mk-sel: #EBEBEE;
  --mk-line: #EBEBED; --mk-line2: #DEDEE2;
  --mk-fg: #1B1C1F; --mk-fg2: #5D5E66; --mk-fg3: #686A73;
  --mk-ink: #1B1C1F; --mk-on-ink: #FFFFFF; --mk-focus: #3B6EF6; --mk-brand: #FF2F30;
  --mk-g-bg: #E9F8EF; --mk-g: #1A7A4C; --mk-a-bg: #FFF4DB; --mk-a: #9A5B00;
  --mk-r-bg: #FFECEC; --mk-r: #C9292F; --mk-b-bg: #EEF3FF; --mk-b: #3456C7;
  --mk-v-magma: #E5484D; --mk-v-vulcano: #F06A1C; --mk-v-kao: #8E4EC6;
  --mk-v-tambora: #12A594; --mk-v-taka: #3E63DD; --mk-v-dutton: #A47A52;
  --mk-sh: 0 1px 2px rgba(16,17,20,.05);
  --mk-sh-pop: 0 1px 2px rgba(16,17,20,.08), 0 6px 16px -4px rgba(16,17,20,.16);
  --mk-veil: rgba(20,21,24,.24);
  --mk-f: "Magma Inter", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mk-t-xs: 12px; --mk-t-s: 13px; --mk-t-m: 14px; --mk-t-l: 15px; --mk-t-campo: 16px; --mk-t-xl: 20px; --mk-t-xxl: 26px;
  --mk-lh: 1.45; --mk-lh-tit: 1.2;
  --mk-e1: 4px; --mk-e2: 8px; --mk-e3: 12px; --mk-e4: 16px; --mk-e5: 20px; --mk-e6: 24px; --mk-e8: 32px; --mk-e10: 40px;
  --mk-r1: 4px; --mk-r2: 6px; --mk-r3: 8px; --mk-r4: 12px; --mk-r5: 16px;
  --mk-ctl: 30px; --mk-toque: 44px; --mk-barra: 58px;
  --mk-safe: env(safe-area-inset-bottom, 0px);
  --mk-abajo: 0px; --mk-margen: 20px;
  --mk-dur: .16s; --mk-curva: cubic-bezier(.2,.7,.3,1);
  --mk-z-pie: 30; --mk-z-fondo: 1075; --mk-z-hoja: 1076; --mk-z-aviso: 1080;

  /* ── v2 (nuevos) ── */
  --m2-t-titulo: 22px;      /* título de página (v1 usaba 20; 22 en móvil y escritorio) */
  --m2-t-fila: 14px;        /* título de fila en escritorio (15 en móvil) */
  --m2-t-cifra: 17px;       /* cifra de la banda de resumen: NUNCA más grande (ni 26, ni 40) */
  --m2-fila: 52px;          /* alto mínimo de una fila con subtítulo (56 en móvil) */
  --m2-ico: 32px;           /* icono o avatar de la fila */
  --m2-btn: 30px;           /* botón de oficina (= --mk-ctl); 44 en móvil */
  --m2-btn-peq: 28px;       /* botón en la fila, escritorio; 44 en móvil (mínimo táctil) */
  --m2-hueco: 24px;         /* entre secciones (28 en escritorio) */
  --m2-lectura: 760px;      /* ancho de una página de lista */
  --m2-ancha: 1180px;       /* ancho de una página con columna lateral o tabla */
  --m2-lat: 320px;          /* columna lateral en escritorio (≥ 1024) */

  color: var(--mk-fg);
}
@media (max-width: 767.98px), (max-height: 499.98px) {
  .m2 {
    --mk-ctl: var(--mk-toque); --mk-margen: 16px;
    --mk-abajo: calc(var(--mk-barra) + var(--mk-safe));
    --m2-t-fila: 15px; --m2-fila: 56px; --m2-btn: var(--mk-toque); --m2-btn-peq: var(--mk-toque); --m2-hueco: 24px;
  }
}
@media (pointer: coarse) and (min-width: 768px) { .m2 { --m2-btn: var(--mk-toque); --m2-btn-peq: var(--mk-toque); } }

/* Oscuro (mismos valores que v1) */
html.theme-dark body:not(.marco-portal) .m2, body.theme-dark:not(.marco-portal) .m2,
html[data-theme="dark"] body:not(.marco-portal) .m2,
html.theme-dark body.m2:not(.marco-portal), body.m2.theme-dark:not(.marco-portal),
.m2[data-m2-tema="oscuro"]:not(.marco-portal) {
  --mk-bg: #141518; --mk-side: #18191C; --mk-subtle: #1E1F23; --mk-hover: #222328; --mk-sel: #2A2B30;
  --mk-line: #26272C; --mk-line2: #33343A;
  --mk-fg: #EDEDF0; --mk-fg2: #A4A5AD; --mk-fg3: #9698A3;
  --mk-ink: #EDEDF0; --mk-on-ink: #141518; --mk-focus: #7C9CFF;
  --mk-g-bg: #13301F; --mk-g: #5BD08F; --mk-a-bg: #33270E; --mk-a: #F5C26B;
  --mk-r-bg: #3A1719; --mk-r: #FF8A8F; --mk-b-bg: #1A2444; --mk-b: #9DB3FF;
  --mk-sh: 0 1px 2px rgba(0,0,0,.3);
  --mk-sh-pop: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px -4px rgba(0,0,0,.6);
  --mk-veil: rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ── 1 · Base ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.m2 { font-family: var(--mk-f); font-size: var(--mk-t-m); line-height: var(--mk-lh); background: var(--mk-bg);
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility; }
.m2 *, .m2 *::before, .m2 *::after { box-sizing: border-box; }
.m2 :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, blockquote) { margin: 0; }
.m2 :where(ul, ol) { padding: 0; list-style: none; }
.m2 :where(fieldset) { padding: 0; border: 0; min-width: 0; }
.m2 :where(a) { color: inherit; text-decoration: none; }
.m2 :where(button, input, select, textarea) { font: inherit; color: inherit; }
.m2 :where(em, i, cite) { font-style: normal; font-weight: 600; }          /* Inter sin cursiva: el énfasis es peso */
.m2 :where(b, strong) { font-weight: 600; }
.m2 :focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
.m2 .m2-svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }
.m2 .m2-num { font-variant-numeric: tabular-nums; }
.m2 .m2-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.m2 .m2-solo-movil { display: none !important; }
@media (max-width: 767.98px), (max-height: 499.98px) {
  .m2 { font-size: var(--mk-t-l); }
  .m2 .m2-solo-movil { display: revert !important; }
  .m2 .m2-pie.m2-solo-movil { display: flex !important; }
  .m2 .m2-solo-escritorio { display: none !important; }
}

/* ── 2 · Página y cabecera ──────────────────────────────────────────────────────────────────────────────────────
 * Cabecera = título + (opcional) UNA acción. Nada de eyebrow en mayúsculas, ni párrafo de ayuda, ni hero. */
.m2 .m2-pag { display: grid; gap: var(--m2-hueco); width: 100%; max-width: var(--m2-lectura); margin: 0 auto;
  padding: var(--mk-e4) var(--mk-margen) calc(var(--mk-e6) + var(--mk-abajo)); }
.m2 .m2-pag--ancha { max-width: var(--m2-ancha); }
.m2 .m2-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
.m2 .m2-cab__t { font-size: var(--m2-t-titulo); line-height: var(--mk-lh-tit); font-weight: 600; letter-spacing: -.015em; }
.m2 .m2-cab__sub { grid-column: 1 / -1; color: var(--mk-fg2); font-size: var(--mk-t-s); }
.m2 .m2-cab__acc { grid-row: 1; grid-column: 2; display: flex; gap: 8px; }
.m2 .m2-volver { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-bottom: 2px;
  color: var(--mk-fg2); font-size: var(--mk-t-s); font-weight: 500; }
/* paso de periodo: ‹ octubre 2026 › (mes o semana). Va debajo del título, nunca como formulario con «Ver mes». */
.m2 .m2-paso { display: inline-flex; align-items: center; gap: 2px; justify-self: start; border: 1px solid var(--mk-line);
  border-radius: var(--mk-r2); background: var(--mk-bg); }
.m2 .m2-paso__t { padding: 0 10px; font-size: var(--mk-t-s); font-weight: 600; white-space: nowrap; }
.m2 .m2-paso__t small { font-weight: 500; color: var(--mk-fg2); font-size: var(--mk-t-xs); margin-left: 4px; }
.m2 .m2-paso .m2-ib { border: 0; }
/* buscador de página (uno, arriba; el global es la paleta del marco) */
.m2 .m2-buscar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--mk-line2);
  border-radius: var(--mk-r2); background: var(--mk-bg); color: var(--mk-fg3); }
.m2 .m2-buscar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: 0; font-size: var(--mk-t-m); color: var(--mk-fg); }
.m2 .m2-buscar input::placeholder { color: var(--mk-fg3); }
.m2 .m2-buscar:focus-within { outline: 2px solid var(--mk-focus); outline-offset: 1px; }
@media (max-width: 767.98px), (max-height: 499.98px) {
  .m2 .m2-cab { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .m2 .m2-cab__acc { grid-row: auto; grid-column: 1 / -1; flex-wrap: wrap; }
  .m2 .m2-buscar { height: var(--mk-toque); }
  .m2 .m2-buscar input { font-size: var(--mk-t-campo); }    /* iOS no hace zoom */
}

/* ── 3 · Botones ────────────────────────────────────────────────────────────────────────────────────────────────
 * Verbo siempre. Una --pri por zona (cabecera, fila de «Te toca», hoja, barra de abajo). Nunca un botón negro a todo lo
 * ancho para «Ver todas»: eso es un enlace (.m2-enlace). */
.m2 .m2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--m2-btn);
  padding: 0 12px; border: 1px solid var(--mk-line2); border-radius: var(--mk-r2); background: var(--mk-bg); color: var(--mk-fg);
  font-size: var(--mk-t-s); font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background var(--mk-dur) var(--mk-curva), border-color var(--mk-dur) var(--mk-curva); }
.m2 .m2-btn:hover { background: var(--mk-hover); }
.m2 .m2-btn .m2-svg { width: 16px; height: 16px; }
.m2 .m2-btn--pri { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-on-ink); }
.m2 .m2-btn--pri:hover { background: var(--mk-ink); opacity: .9; }
.m2 .m2-btn--peligro { color: var(--mk-r); }
.m2 .m2-btn--peligro:hover { background: var(--mk-r-bg); border-color: var(--mk-r-bg); }
.m2 .m2-btn--fant { border-color: transparent; background: transparent; color: var(--mk-fg2); }
.m2 .m2-btn--fant:hover { color: var(--mk-fg); }
.m2 .m2-btn--peq { min-height: var(--m2-btn-peq); padding: 0 10px; }
.m2 .m2-btn--ancho { width: 100%; }
.m2 .m2-btn--grande { min-height: 48px; font-size: var(--mk-t-l); }
.m2 .m2-ib { display: inline-grid; place-items: center; width: var(--m2-btn); height: var(--m2-btn); padding: 0;
  border: 1px solid transparent; border-radius: var(--mk-r2); background: none; color: var(--mk-fg2); cursor: pointer; }
.m2 .m2-ib:hover { background: var(--mk-hover); color: var(--mk-fg); }
.m2 .m2-ib[aria-disabled="true"] { color: var(--mk-line2); pointer-events: none; }
.m2 .m2-enlace { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--mk-fg); font-size: var(--mk-t-s);
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--mk-line2); text-underline-offset: 3px; }
.m2 .m2-enlace:hover { text-decoration-color: currentColor; }
@media (max-width: 767.98px), (max-height: 499.98px) {
  .m2 .m2-btn { font-size: var(--mk-t-m); }
  .m2 .m2-enlace { min-height: var(--mk-toque); font-size: var(--mk-t-m); }
}

/* ── 4 · Chips, antigüedad y repetidos ─────────────────────────────────────────────────────────────────────────── */
.m2 .m2-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: var(--mk-r1);
  background: var(--mk-subtle); color: var(--mk-fg2); font-size: var(--mk-t-xs); font-weight: 600; line-height: 1; white-space: nowrap; }
.m2 .m2-chip .m2-svg { width: 12px; height: 12px; stroke-width: 2; }
.m2 .m2-chip--toca { background: var(--mk-a-bg); color: var(--mk-a); }
.m2 .m2-chip--ok { background: var(--mk-g-bg); color: var(--mk-g); }
.m2 .m2-chip--error { background: var(--mk-r-bg); color: var(--mk-r); }
.m2 .m2-chip--info { background: var(--mk-b-bg); color: var(--mk-b); }
.m2 .m2-chip--neutro { font-weight: 500; }
/* antigüedad: el texto SIEMPRE dice el tiempo («hace 16 días»); el color sube con la espera.
   --1 < 24 h (neutro) · --2 de 1 a 2 días (ámbar) · --3 ≥ 3 días o dinero parado (rojo). Umbral por pantalla en SISTEMA-V2 §4. */
.m2 .m2-edad { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: var(--mk-r1);
  font-size: var(--mk-t-xs); font-weight: 600; line-height: 1; white-space: nowrap; background: var(--mk-subtle); color: var(--mk-fg2); }
.m2 .m2-edad--2 { background: var(--mk-a-bg); color: var(--mk-a); }
.m2 .m2-edad--3 { background: var(--mk-r-bg); color: var(--mk-r); }
.m2 .m2-edad .m2-svg { width: 12px; height: 12px; stroke-width: 2; }
/* repetidos colapsados: «×12» (el aviso se repitió 12 veces; se leen dentro) */
.m2 .m2-rep { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--mk-line2);
  border-radius: var(--mk-r1); color: var(--mk-fg2); font-size: var(--mk-t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
/* punto de «nuevo» (siempre con texto oculto «nuevo») y punto de local (8 px, solo identidad) */
.m2 .m2-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-b); flex: none; }
.m2 .m2-local { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mk-fg3); }
.m2 .m2-local[data-local="magma"] { background: var(--mk-v-magma); }   .m2 .m2-local[data-local="vulcano"] { background: var(--mk-v-vulcano); }
.m2 .m2-local[data-local="kao"] { background: var(--mk-v-kao); }       .m2 .m2-local[data-local="tambora"] { background: var(--mk-v-tambora); }
.m2 .m2-local[data-local="taka"] { background: var(--mk-v-taka); }     .m2 .m2-local[data-local="dutton"] { background: var(--mk-v-dutton); }

/* ── 5 · Banda de resumen y titular ────────────────────────────────────────────────────────────────────────────
 * Banda = cifras PEQUEÑAS (17) en UNA fila, separadas por una línea; etiqueta debajo en 12. Máx. 3 en móvil, 5 en
 * escritorio. Cada celda puede ser un enlace a su lista filtrada. Sustituye a TODAS las baldosas de número gigante.
 * Titular = UNA cifra de dinero por página como mucho (la razón de ser de la pantalla: «Venta de la semana»), 26 px. */
.m2 .m2-resumen { display: flex; flex-wrap: wrap; border: 1px solid var(--mk-line); border-radius: var(--mk-r3); background: var(--mk-bg); overflow: hidden; }
.m2 .m2-resumen__c { flex: 1 1 0; min-width: 0; display: grid; align-content: start; gap: 1px; padding: 10px 12px;
  border-left: 1px solid var(--mk-line); color: inherit; }
.m2 .m2-resumen__c:first-child { border-left: 0; }
.m2 a.m2-resumen__c:hover { background: var(--mk-hover); }
.m2 .m2-resumen__v { font-size: var(--m2-t-cifra); line-height: 1.25; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mk-fg); white-space: nowrap; }
.m2 .m2-resumen__v small { font-size: var(--mk-t-s); font-weight: 500; color: var(--mk-fg2); }
.m2 .m2-resumen__l { font-size: var(--mk-t-xs); line-height: 1.3; color: var(--mk-fg2); }
.m2 .m2-resumen__c.is-toca .m2-resumen__v { color: var(--mk-a); }
.m2 .m2-resumen__c.is-error .m2-resumen__v { color: var(--mk-r); }
/* variante frase: cuando no merece banda («4 vacaciones · 2 fichajes · 0 altas») */
.m2 .m2-resumen--frase { display: block; border: 0; background: none; color: var(--mk-fg2); font-size: var(--mk-t-s); }
.m2 .m2-resumen--frase b { color: var(--mk-fg); font-variant-numeric: tabular-nums; }
.m2 .m2-titular { display: grid; gap: 2px; }
.m2 .m2-titular__l { font-size: var(--mk-t-s); color: var(--mk-fg2); }
.m2 .m2-titular__v { font-size: var(--mk-t-xxl); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.m2 .m2-titular__s { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--mk-t-s); color: var(--mk-fg2); }
@media (max-width: 767.98px), (max-height: 499.98px) {
  .m2 .m2-resumen__c { flex-basis: 33.33%; min-width: 33.33%; overflow: hidden; }
  .m2 .m2-resumen__c:nth-child(3n+1) { border-left: 0; }
  .m2 .m2-resumen__c:nth-child(n+4) { border-top: 1px solid var(--mk-line); }
  .m2 .m2-resumen:has(> :nth-child(4)):not(:has(> :nth-child(5))) > .m2-resumen__c { flex-basis: 50%; min-width: 50%; }
  .m2 .m2-resumen:has(> :nth-child(4)):not(:has(> :nth-child(5))) > .m2-resumen__c:nth-child(3n+1) { border-left: 1px solid var(--mk-line); }
  .m2 .m2-resumen:has(> :nth-child(4)):not(:has(> :nth-child(5))) > .m2-resumen__c:nth-child(2n+1) { border-left: 0; }
  .m2 .m2-resumen:has(> :nth-child(4)):not(:has(> :nth-child(5))) > .m2-resumen__c:nth-child(n+3) { border-top: 1px solid var(--mk-line); }
}

/* ── 6 · Sección ───────────────────────────────────────────────────────────────────────────────────────────────
 * Título pequeño (13/600, gris, en frase normal: nunca MAYÚSCULAS con tracking) + contador + «Ver las N» a la derecha. */
.m2 .m2-sec { display: grid; gap: 8px; min-width: 0; }
.m2 .m2-sec__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; padding: 0 2px; }
.m2 .m2-sec__t { display: flex; align-items: center; gap: 6px; font-size: var(--mk-t-s); font-weight: 600; color: var(--mk-fg2); }
.m2 .m2-sec__n { color: var(--mk-fg3); font-weight: 500; font-variant-numeric: tabular-nums; }
.m2 .m2-sec__nota { padding: 0 2px; font-size: var(--mk-t-xs); color: var(--mk-fg3); }
/* banda de página: «antes, no después» (v1 §4.14). Una frase + lo que SÍ se puede hacer. No flota. */
.m2 .m2-banda { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 10px 12px;
  border-radius: var(--mk-r3); background: var(--mk-a-bg); font-size: var(--mk-t-s); line-height: 1.45; }
.m2 .m2-banda > .m2-svg { width: 16px; height: 16px; margin-top: 2px; color: var(--mk-a); }
.m2 .m2-banda--error { background: var(--mk-r-bg); } .m2 .m2-banda--error > .m2-svg { color: var(--mk-r); }
.m2 .m2-banda--info { background: var(--mk-b-bg); } .m2 .m2-banda--info > .m2-svg { color: var(--mk-b); }
.m2 .m2-banda .m2-enlace { grid-column: 2; min-height: 24px; }

/* ── 7 · Lista y fila ──────────────────────────────────────────────────────────────────────────────────────────
 * Fila = icono · título · subtítulo · meta/estado · chevron. El título NUNCA se corta con «…»: se parte en dos líneas.
 * Lo que sobra va al subtítulo; lo que sigue sobrando, a la ficha. */
.m2 .m2-lista { border: 1px solid var(--mk-line); border-radius: var(--mk-r3); background: var(--mk-bg); overflow: hidden; }
.m2 .m2-lista > li + li, .m2 .m2-lista > .m2-fila + .m2-fila { border-top: 1px solid var(--mk-line); }
.m2 .m2-lista--plana { border: 0; border-radius: 0; background: none; }
.m2 .m2-fila { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; row-gap: 8px; min-height: var(--m2-fila); padding: 10px 12px 10px 14px; color: inherit; background: var(--mk-bg); }
.m2 .m2-fila:has(> .m2-fila__ir) { grid-template-columns: auto minmax(0, 1fr) auto 16px; }
.m2 .m2-fila--sin-ico { grid-template-columns: minmax(0, 1fr) auto; }
.m2 .m2-fila--sin-ico:has(> .m2-fila__ir) { grid-template-columns: minmax(0, 1fr) auto 16px; }
.m2 a.m2-fila:hover, .m2 .m2-fila--enlace:hover, .m2 summary.m2-fila:hover { background: var(--mk-hover); }
.m2 .m2-fila.is-urgente::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mk-r); }
.m2 .m2-fila.is-hecha { opacity: .55; }
.m2 .m2-fila__ico { display: grid; place-items: center; width: var(--m2-ico); height: var(--m2-ico); border-radius: var(--mk-r3);
  background: var(--mk-subtle); color: var(--mk-fg2); align-self: start; margin-top: 1px; }
.m2 .m2-fila__ico--toca { background: var(--mk-a-bg); color: var(--mk-a); }
.m2 .m2-fila__ico--error { background: var(--mk-r-bg); color: var(--mk-r); }
.m2 .m2-fila__ico--ok { background: var(--mk-g-bg); color: var(--mk-g); }
.m2 .m2-fila__ico--info { background: var(--mk-b-bg); color: var(--mk-b); }
.m2 .m2-av { display: grid; place-items: center; width: var(--m2-ico); height: var(--m2-ico); border-radius: 50%; background: var(--mk-subtle);
  color: var(--mk-fg2); font-size: var(--mk-t-xs); font-weight: 600; letter-spacing: .02em; align-self: start; margin-top: 1px; }
.m2 .m2-fila__txt { min-width: 0; display: grid; gap: 2px; }
.m2 .m2-fila__t { font-size: var(--m2-t-fila); line-height: 1.35; font-weight: 600; color: var(--mk-fg); overflow-wrap: anywhere; }
.m2 .m2-fila__t .m2-punto { margin-right: 6px; vertical-align: 2px; }
.m2 .m2-fila__s { font-size: var(--mk-t-s); line-height: 1.4; color: var(--mk-fg2); overflow-wrap: anywhere; }
.m2 .m2-fila__s + .m2-fila__s { margin-top: 1px; }
.m2 .m2-fila__s--toca { color: var(--mk-a); font-weight: 500; }
.m2 .m2-fila__s--error { color: var(--mk-r); font-weight: 500; }
.m2 .m2-fila__cita { font-size: var(--mk-t-s); line-height: 1.4; color: var(--mk-fg2); overflow-wrap: anywhere; }
.m2 .m2-fila__cita::before { content: "«"; } .m2 .m2-fila__cita::after { content: "»"; }
.m2 .m2-fila__m { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; align-self: start; margin-top: 1px;
  font-size: var(--mk-t-xs); color: var(--mk-fg3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m2 .m2-fila__m b { font-size: var(--mk-t-s); color: var(--mk-fg); font-weight: 600; }
.m2 .m2-fila__ir { grid-column: -2; grid-row: 1; width: 16px; height: 16px; color: var(--mk-fg3); align-self: center; }
/* el enlace que abre la ficha cubre toda la fila (la fila sigue pudiendo tener botones encima) */
.m2 .m2-fila__abrir::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.m2 .m2-fila__abrir:focus-visible { outline: 0; }
.m2 .m2-fila:has(.m2-fila__abrir:focus-visible) { outline: 2px solid var(--mk-focus); outline-offset: -2px; }
.m2 .m2-fila__acc, .m2 .m2-fila .m2-btn, .m2 .m2-fila .m2-ib, .m2 .m2-fila details { position: relative; z-index: 1; }
/* banda dentro de una fila: «antes, no después» (v1 §4.14) */
.m2 .m2-fila__banda { grid-column: 2 / -1; display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--mk-r2);
  background: var(--mk-a-bg); color: var(--mk-fg); font-size: var(--mk-t-s); line-height: 1.4; }
.m2 .m2-fila__banda .m2-svg { width: 16px; height: 16px; color: var(--mk-a); margin-top: 1px; }
.m2 .m2-fila--sin-ico .m2-fila__banda { grid-column: 1 / -1; }

/* ── 8 · Acciones en la fila ───────────────────────────────────────────────────────────────────────────────────
 * En línea: botones pequeños bajo el texto en el móvil (dos de 44: «Denegar» · «Aprobar»), a la derecha en escritorio.
 * Al deslizar: .m2-desliza envuelve la fila y un panel de acciones; scroll-snap nativo, sin JS. En escritorio el panel
 * no se ve (las acciones salen en línea o al pasar el ratón). */
.m2 .m2-fila__acc { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.m2 .m2-fila--sin-ico .m2-fila__acc { grid-column: 1 / -1; }
@media (max-width: 767.98px), (max-height: 499.98px) {
  /* botones pequeños de verdad: ancho justo (mín. 96), alineados al texto; el alto llega a 44 solo por el toque */
  .m2 .m2-fila__acc .m2-btn { min-width: 96px; font-size: var(--mk-t-s); }
  .m2 .m2-banda .m2-enlace { min-height: var(--mk-toque); }
}
.m2 .m2-desliza { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.m2 .m2-desliza::-webkit-scrollbar { display: none; }
.m2 .m2-desliza > .m2-fila, .m2 .m2-desliza > details { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; }
.m2 .m2-desliza__acc { flex: 0 0 auto; display: flex; scroll-snap-align: end; }
.m2 .m2-desliza__acc > button { display: grid; place-items: center; align-content: center; gap: 4px; width: 80px; border: 0;
  font-size: var(--mk-t-xs); font-weight: 600; cursor: pointer; }
.m2 .m2-desliza__acc .m2-svg { width: 20px; height: 20px; }
.m2 .m2-desliza__posponer { background: var(--mk-a-bg); color: var(--mk-a); }
.m2 .m2-desliza__hecho { background: var(--mk-ink); color: var(--mk-on-ink); }
@media (min-width: 768px) and (min-height: 500px) {
  .m2 .m2-desliza { overflow: visible; }
  .m2 .m2-desliza__acc { display: none; }
}

/* ── 9 · Bandeja (avisos / inbox) ──────────────────────────────────────────────────────────────────────────────
 * Dos grupos fijos: «Te toca» (pide algo, más viejo arriba) y «Para saber» (informa, más nuevo arriba). Un aviso que se
 * repite se apila en UNA fila con «×N»; la fila dice la última versión (el número de hoy, no el de hace 3 días).
 * Acciones: Abrir (tocar la fila), Posponer, Hecho. Nada truncado: el título entero, en dos líneas si hace falta. */
.m2 .m2-bandeja { display: grid; gap: var(--m2-hueco); }
.m2 .m2-pila > summary { list-style: none; cursor: pointer; }
.m2 .m2-pila > summary::-webkit-details-marker { display: none; }
.m2 .m2-pila[open] > summary .m2-fila__ir { transform: rotate(90deg); }
.m2 .m2-pila__dentro { border-top: 1px solid var(--mk-line); background: var(--mk-side); }
.m2 .m2-pila__dentro li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 8px 12px 8px 58px;
  font-size: var(--mk-t-s); color: var(--mk-fg2); }
.m2 .m2-pila__dentro li + li { border-top: 1px solid var(--mk-line); }
.m2 .m2-pila__dentro time { color: var(--mk-fg3); font-variant-numeric: tabular-nums; }
.m2 .m2-aviso-acc { display: flex; gap: 4px; grid-column: 2 / -1; margin-left: -10px; }
.m2 .m2-aviso-acc .m2-btn { color: var(--mk-fg2); }
.m2 .m2-aviso-acc .m2-btn:hover { color: var(--mk-fg); }
@media (min-width: 768px) and (pointer: fine) {
  /* escritorio: las acciones aparecen encima de la meta al pasar o enfocar (Linear); no reservan hueco */
  .m2 .m2-bandeja .m2-aviso-acc { position: absolute; z-index: 2; top: 8px; right: 8px; margin: 0; padding: 2px; border-radius: var(--mk-r2);
    background: var(--mk-hover); opacity: 0; pointer-events: none; transition: opacity var(--mk-dur) var(--mk-curva); }
  .m2 .m2-bandeja :is(.m2-fila:hover, .m2-fila:focus-within) .m2-aviso-acc { opacity: 1; pointer-events: auto; }
}
.m2 .m2-bandeja__pie { display: flex; justify-content: center; }

/* ── 10 · Estado vacío ─────────────────────────────────────────────────────────────────────────────────────────
 * Una frase que diga por qué está vacío (y si es buena noticia, que lo diga). Sin ilustraciones, sin humor. */
.m2 .m2-vacio { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; text-align: center; color: var(--mk-fg2); font-size: var(--mk-t-s); }
.m2 .m2-vacio__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mk-subtle); color: var(--mk-fg2); }
.m2 .m2-vacio--bien .m2-vacio__ico { background: var(--mk-g-bg); color: var(--mk-g); }
.m2 .m2-vacio__t { font-size: var(--mk-t-m); font-weight: 600; color: var(--mk-fg); }
.m2 .m2-vacio--fila { display: flex; justify-items: start; align-items: center; gap: 10px; padding: 12px 14px; text-align: left; }
.m2 .m2-vacio--fila .m2-vacio__ico { width: 28px; height: 28px; }

/* ── 11 · Formulario de 2 toques ───────────────────────────────────────────────────────────────────────────────
 * Elegir (1 toque: opciones ya visibles, la más común marcada) + confirmar (1 toque: un botón negro con el verbo).
 * La nota es opcional y va plegada. Nada de desplegables para ≤ 6 opciones. */
.m2 .m2-rapido { display: grid; gap: 12px; }
.m2 .m2-rapido__t { font-size: var(--mk-t-s); font-weight: 600; color: var(--mk-fg2); }
.m2 .m2-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.m2 .m2-opc { position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--mk-toque); padding: 8px 12px;
  border: 1px solid var(--mk-line2); border-radius: var(--mk-r2); background: var(--mk-bg); font-size: var(--mk-t-s); font-weight: 500; line-height: 1.3; cursor: pointer; }
.m2 .m2-opc input { position: absolute; opacity: 0; pointer-events: none; }
.m2 .m2-opc:has(input:checked) { border-color: var(--mk-ink); box-shadow: inset 0 0 0 1px var(--mk-ink); font-weight: 600; }
.m2 .m2-opc:has(input:focus-visible) { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
.m2 .m2-opc--entera { grid-column: 1 / -1; }
.m2 .m2-nota > summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--mk-fg2); font-size: var(--mk-t-s); font-weight: 600; cursor: pointer; }
.m2 .m2-ta { width: 100%; min-height: 72px; padding: 8px 10px; border: 1px solid var(--mk-fg3); border-radius: var(--mk-r2); background: var(--mk-bg); font-size: var(--mk-t-m); resize: vertical; }
@media (max-width: 767.98px), (max-height: 499.98px) {
  .m2 .m2-opc { font-size: var(--mk-t-m); } .m2 .m2-ta { font-size: var(--mk-t-campo); }
  .m2 .m2-nota > summary { min-height: var(--mk-toque); }
}

/* ── 12 · Hoja inferior ─────────────────────────────────────────────────────────────────────────────────────────
 * <dialog class="m2-hoja"> (showModal(): foco atrapado y Esc nativos). Asa · título + × · cuerpo con scroll · pie con
 * UNA acción. Tapa la barra inferior a propósito. En escritorio sale centrada (480). */
.m2 .m2-hoja { position: fixed; inset: auto 0 0 0; z-index: var(--mk-z-hoja); display: none; flex-direction: column; width: 100%; max-width: 100%;
  max-height: 88vh; margin: 0; padding: 0; border: 1px solid var(--mk-line); border-bottom: 0; border-radius: var(--mk-r5) var(--mk-r5) 0 0;
  background: var(--mk-bg); color: var(--mk-fg); box-shadow: var(--mk-sh-pop); }
.m2 .m2-hoja[open] { display: flex; }
.m2 .m2-hoja::backdrop { background: var(--mk-veil, rgba(20,21,24,.24)); }
.m2 .m2-fondo { position: fixed; inset: 0; z-index: var(--mk-z-fondo); background: var(--mk-veil); }
.m2 .m2-hoja__asa { width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--mk-line2); flex: none; }
.m2 .m2-hoja__cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px var(--mk-margen) 4px; }
.m2 .m2-hoja__t { font-size: 17px; font-weight: 600; line-height: 1.3; }
.m2 .m2-hoja__sub { grid-column: 1 / -1; font-size: var(--mk-t-s); color: var(--mk-fg2); }
.m2 .m2-hoja__cuerpo { overflow: auto; padding: 12px var(--mk-margen); display: grid; gap: 16px; }
.m2 .m2-hoja__pie { display: grid; gap: 8px; padding: 12px var(--mk-margen) calc(12px + var(--mk-safe)); border-top: 1px solid var(--mk-line); }
.m2 .m2-hoja__nota { font-size: var(--mk-t-xs); color: var(--mk-fg2); text-align: center; }
@media (min-width: 768px) and (min-height: 500px) {
  .m2 .m2-hoja { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 480px; border-bottom: 1px solid var(--mk-line); border-radius: var(--mk-r4); }
  .m2 .m2-hoja__asa { display: none; }
}

/* ── 13 · Tabla densa con scroll propio ────────────────────────────────────────────────────────────────────────
 * La tabla se desplaza DENTRO de su caja (en los dos ejes); la página nunca se mueve de lado. Cabecera y primera
 * columna fijas. Para matrices (locales × semanas) y listas largas de oficina. */
.m2 .m2-tabla-caja { position: relative; max-height: min(64vh, 560px); overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--mk-line); border-radius: var(--mk-r3); background: var(--mk-bg); }
.m2 .m2-tabla { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--mk-t-s); font-variant-numeric: tabular-nums; }
.m2 .m2-tabla :is(th, td) { height: 40px; padding: 0 12px; border-bottom: 1px solid var(--mk-line); text-align: left; white-space: nowrap; vertical-align: middle; }
.m2 .m2-tabla tbody tr:last-child > * { border-bottom: 0; }
.m2 .m2-tabla thead th { position: sticky; top: 0; z-index: 2; height: 36px; background: var(--mk-side); color: var(--mk-fg2); font-size: var(--mk-t-xs); font-weight: 600; }
.m2 .m2-tabla :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--mk-bg); border-right: 1px solid var(--mk-line); }
.m2 .m2-tabla thead th:first-child { z-index: 3; background: var(--mk-side); }
.m2 .m2-tabla .m2-c-num { text-align: right; }
.m2 .m2-tabla .is-actual { background: var(--mk-side); }
.m2 .m2-tabla thead .is-actual { color: var(--mk-fg); }
.m2 .m2-tabla td:has(.m2-celda) { padding-block: 6px; }
.m2 .m2-tabla td .m2-celda { display: grid; justify-items: start; gap: 3px; line-height: 1.2; }
.m2 .m2-tabla td .m2-celda small { color: var(--mk-fg3); font-size: var(--mk-t-xs); }
.m2 .m2-tabla-pie { display: flex; justify-content: space-between; gap: 8px; padding: 6px 2px 0; font-size: var(--mk-t-xs); color: var(--mk-fg3); }

/* ── 14 · Barra con el botón principal (abajo) ─────────────────────────────────────────────────────────────────
 * Factorial: un botón principal único abajo. En el móvil se pega encima de la barra del marco (--mk-abajo). */
.m2 .m2-pie { position: sticky; bottom: var(--mk-abajo); z-index: var(--mk-z-pie); display: flex; justify-content: flex-end; gap: 8px;
  margin: 0 calc(-1 * var(--mk-margen)); padding: 12px var(--mk-margen); border-top: 1px solid var(--mk-line); background: var(--mk-bg); }
@media (max-width: 767.98px), (max-height: 499.98px) {
  .m2 .m2-pie .m2-btn--pri { flex: 1; min-height: 48px; font-size: var(--mk-t-l); }
}

/* ── 15 · Escritorio ───────────────────────────────────────────────────────────────────────────────────────────
 * ≥ 768: la fila con acciones las pone a la derecha, en la misma línea. ≥ 1024: dos columnas (lo que se decide a la
 * izquierda, lo que se consulta en una columna de 320 a la derecha). */
@media (min-width: 768px) and (min-height: 500px) {
  .m2 { --m2-hueco: 28px; }
  .m2 .m2-pag { padding-top: var(--mk-e6); }
  .m2 .m2-cab__t { font-size: 24px; }
  .m2 .m2-fila--acciones { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .m2 .m2-fila--acciones > .m2-fila__acc { grid-column: 4; grid-row: 1; flex-wrap: nowrap; align-self: start; }
  .m2 .m2-fila--acciones > .m2-fila__banda { grid-column: 2 / 4; }
}
.m2 .m2-cols { display: grid; gap: var(--m2-hueco); }
.m2 .m2-cols > * { display: grid; gap: var(--m2-hueco); align-content: start; min-width: 0; }
@media (min-width: 1024px) and (min-height: 500px) {
  .m2 .m2-cols { grid-template-columns: minmax(0, 1fr) var(--m2-lat); align-items: start; }
}

/* ── 17 · Persona: avatar, fila de persona y chips de contexto (r2 · 14-oct, pedido de Mario) ──────────────────
 * Avatar: la FOTO real (uploads/magma_rrhh/photos/<worker>_*.jpg vía la ruta de la ficha); sin foto, iniciales sobre el
 * color FIJO de su local (data-local), mezclado al 20 % con el fondo para que el texto siga ≥ 4,5:1 en claro y oscuro.
 * Fila de persona = avatar · «Nombre Apellido» · «Puesto · Local» · qué pide · chips de contexto · acciones. */
.m2 .m2-avatar { --av-c: var(--mk-fg3); position: relative; display: grid; place-items: center; flex: none; width: var(--m2-ico); height: var(--m2-ico);
  border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--av-c) 20%, var(--mk-bg)); color: var(--mk-fg);
  font-size: var(--mk-t-xs); font-weight: 600; letter-spacing: .02em; align-self: start; }
.m2 .m2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m2 .m2-avatar--40 { width: 40px; height: 40px; font-size: var(--mk-t-s); }
.m2 .m2-avatar--64 { width: 64px; height: 64px; font-size: 20px; }
.m2 .m2-avatar[data-local="magma"] { --av-c: var(--mk-v-magma); }     .m2 .m2-avatar[data-local="vulcano"] { --av-c: var(--mk-v-vulcano); }
.m2 .m2-avatar[data-local="kao"] { --av-c: var(--mk-v-kao); }         .m2 .m2-avatar[data-local="tambora"] { --av-c: var(--mk-v-tambora); }
.m2 .m2-avatar[data-local="taka"] { --av-c: var(--mk-v-taka); }       .m2 .m2-avatar[data-local="dutton"] { --av-c: var(--mk-v-dutton); }
.m2 .m2-avatar[data-local="oficinas"] { --av-c: var(--mk-fg3); }
/* el local también en la foto: punto de 10 px abajo a la derecha (identidad, no estado) */
.m2 .m2-avatar-caja { position: relative; flex: none; align-self: start; }
.m2 .m2-avatar-caja > .m2-local { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--mk-bg); }
.m2 .m2-persona { grid-template-columns: auto minmax(0, 1fr) auto; }
.m2 .m2-persona .m2-fila__t { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.m2 .m2-persona__puesto { font-size: var(--mk-t-s); color: var(--mk-fg2); }
.m2 .m2-persona__pide { font-size: var(--mk-t-m); font-weight: 500; color: var(--mk-fg); margin-top: 2px; }
.m2 .m2-ctx { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.m2 .m2-ctx .m2-chip { font-weight: 500; }
.m2 .m2-ctx .m2-chip b { font-weight: 600; }
@media (min-width: 768px) and (min-height: 500px) {
  .m2 .m2-persona.m2-fila--acciones > .m2-ctx { grid-column: 2 / 4; }
}

/* botón de acento: la acción principal DISCRETA (Mario, 14-oct: «Aprobar» deja de ser negro macizo). Azul de info de v1
   (--mk-b sobre --mk-b-bg: 5,72 claro / 7,48 oscuro). El negro queda para el botón principal de página (.m2-pie) y hojas. */
.m2 .m2-btn--acento { background: var(--mk-b-bg); border-color: transparent; color: var(--mk-b); }
.m2 .m2-btn--acento:hover { background: var(--mk-b-bg); border-color: var(--mk-b); }

/* ── 18 · Ficha única (persona, local, proveedor, activo) ─────────────────────────────────────────────────────
 * UNA ficha por tipo de objeto, la misma desde cualquier sitio. Móvil: hoja a pantalla completa. ≥ 768: panel lateral de
 * 520 a la derecha con velo. Estructura fija: barra (Volver/cerrar + abrir en página) · cabecera (avatar, nombre, línea
 * de puesto/local, estado de hoy, contacto) · pestañas en orden fijo · cuerpo · (pie de la pestaña si hay acción). */
.m2 .m2-ficha { position: fixed; inset: 0; z-index: var(--mk-z-hoja); display: flex; flex-direction: column; background: var(--mk-bg); color: var(--mk-fg); }
.m2 .m2-ficha[hidden] { display: none; }
.m2 .m2-ficha__barra { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 8px; border-bottom: 1px solid var(--mk-line); flex: none; }
.m2 .m2-ficha__barra .m2-volver { margin: 0; min-height: var(--mk-toque); padding: 0 8px; }
.m2 .m2-ficha__barra .m2-espacio { flex: 1; }
.m2 .m2-ficha__scroll { flex: 1; overflow: auto; overscroll-behavior: contain; }
.m2 .m2-ficha__cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 16px var(--mk-margen) 12px; }
.m2 .m2-ficha__cab .m2-avatar-caja { grid-row: span 3; }
.m2 .m2-ficha__t { font-size: var(--m2-t-titulo); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.m2 .m2-ficha__linea { font-size: var(--mk-t-s); color: var(--mk-fg2); }
.m2 .m2-ficha__estado { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.m2 .m2-ficha__contacto { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 10px; }
.m2 .m2-ficha__contacto .m2-btn { flex: 1; }
/* pestañas: una fila con su propio scroll lateral; orden fijo por tipo; la elegida con raya de tinta */
.m2 .m2-pestanas { position: sticky; top: 0; z-index: 3; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 calc(var(--mk-margen) - 8px);
  border-bottom: 1px solid var(--mk-line); background: var(--mk-bg); }
.m2 .m2-pestanas::-webkit-scrollbar { display: none; }
.m2 .m2-pestana { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--mk-toque); padding: 0 8px; border: 0; background: none;
  color: var(--mk-fg2); font-size: var(--mk-t-s); font-weight: 500; white-space: nowrap; cursor: pointer; }
.m2 .m2-pestana[aria-selected="true"] { color: var(--mk-fg); font-weight: 600; }
.m2 .m2-pestana[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--mk-ink); }
.m2 .m2-pestana .m2-chip { height: 18px; padding: 0 5px; }
.m2 .m2-ficha__cuerpo { display: grid; gap: var(--m2-hueco); padding: 16px var(--mk-margen) 24px; }
@media (min-width: 768px) and (min-height: 500px) {
  .m2 .m2-ficha { inset: 0 0 0 auto; width: min(520px, 100vw); border-left: 1px solid var(--mk-line); box-shadow: var(--mk-sh-pop); }
  .m2 .m2-ficha__contacto .m2-btn { flex: none; }
}

/* ── 19 · Calendario de mes (ausencias, turnos) ─────────────────────────────────────────────────────────────── */
.m2 .m2-cal { border: 1px solid var(--mk-line); border-radius: var(--mk-r3); overflow: hidden; background: var(--mk-bg); }
.m2 .m2-cal__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 12px; border-bottom: 1px solid var(--mk-line); background: var(--mk-side); }
.m2 .m2-cal__mes { font-size: var(--mk-t-s); font-weight: 600; }
.m2 .m2-cal__rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 6px; gap: 2px; }
.m2 .m2-cal__ds { padding: 4px 0; text-align: center; font-size: var(--mk-t-xs); color: var(--mk-fg3); }
.m2 .m2-cal__d { position: relative; display: grid; place-items: center; height: 40px; border-radius: var(--mk-r2); font-size: var(--mk-t-s); font-variant-numeric: tabular-nums; color: var(--mk-fg); }
.m2 .m2-cal__d.is-fuera { color: var(--mk-fg3); }
.m2 .m2-cal__d.is-hoy { box-shadow: inset 0 0 0 1.5px var(--mk-ink); font-weight: 600; }
.m2 .m2-cal__d.is-pide { background: var(--mk-a-bg); color: var(--mk-a); font-weight: 600; }
.m2 .m2-cal__d.is-libra { background: var(--mk-g-bg); color: var(--mk-g); }
.m2 .m2-cal__d.is-festivo { color: var(--mk-r); }
.m2 .m2-cal__d.is-denegado { text-decoration: line-through; color: var(--mk-fg2); }
.m2 .m2-cal__d small { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 9px; line-height: 1; font-weight: 600; }
.m2 .m2-cal__ley { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; border-top: 1px solid var(--mk-line); font-size: var(--mk-t-xs); color: var(--mk-fg2); }
.m2 .m2-cal__ley i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; }

/* ── 16 · Movimiento e impresión ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { .m2 *, .m2 *::before, .m2 *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
  .m2 :is(.m2-pie, .m2-hoja, .m2-fondo, .m2-fila__acc, .m2-aviso-acc, .m2-desliza__acc) { display: none !important; }
  .m2 .m2-tabla-caja { max-height: none; overflow: visible; }
}
.m2 .m2-fila__txt > .m2-fila__banda { grid-column: auto; margin-top: 6px; }
.m2 .m2-cal__ley i.is-pide { background: var(--mk-a-bg); box-shadow: inset 0 0 0 1px var(--mk-a); }
.m2 .m2-cal__ley i.is-libra { background: var(--mk-g-bg); box-shadow: inset 0 0 0 1px var(--mk-g); }
.m2 .m2-fila__banda.m2-banda--info { background: var(--mk-b-bg); }
.m2 .m2-fila__banda.m2-banda--info .m2-svg { color: var(--mk-b); }
.m2 .m2-fila--sin-ico > .m2-ctx { grid-column: 1 / -1; }
@media (min-width: 768px) and (min-height: 500px) { .m2 .m2-fila--sin-ico.m2-fila--acciones > .m2-ctx { grid-column: 1 / 3; } }
@media (min-width: 768px) and (min-height: 500px) {
  .m2 .m2-fila--sin-ico.m2-fila--acciones { grid-template-columns: minmax(0, 1fr) auto auto; }
  .m2 .m2-fila--sin-ico.m2-fila--acciones > .m2-fila__acc { grid-column: 3; }
  .m2 .m2-fila--sin-ico.m2-fila--acciones > .m2-fila__banda { grid-column: 1 / 3; }
  /* dentro de la ficha (520) las filas se comportan como en el móvil: acciones debajo */
  .m2 .m2-ficha .m2-fila--acciones { grid-template-columns: auto minmax(0, 1fr) auto; }
  .m2 .m2-ficha .m2-fila--sin-ico.m2-fila--acciones { grid-template-columns: minmax(0, 1fr) auto; }
  .m2 .m2-ficha .m2-fila--acciones > .m2-fila__acc { grid-column: 1 / -1; grid-row: auto; }
  .m2 .m2-ficha .m2-fila--acciones > .m2-ctx { grid-column: 1 / -1; }
}

/* ── 20 · Campos (formularios de v2) ─────────────────────────────────────────────────────────────────────────── */
.m2 .m2-campo { display: grid; gap: 4px; min-width: 0; }
.m2 .m2-etq { font-size: var(--mk-t-s); font-weight: 600; color: var(--mk-fg); }
.m2 .m2-in { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--mk-fg3); border-radius: var(--mk-r2); background: var(--mk-bg); font-size: var(--mk-t-m); }
.m2 .m2-ta { font-family: inherit; }
.m2 .m2-ayuda { font-size: var(--mk-t-xs); line-height: 1.4; color: var(--mk-fg2); }
.m2 .m2-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.m2 .m2-form { display: grid; gap: 16px; }
.m2 .m2-paso-t { display: flex; align-items: center; gap: 8px; font-size: var(--mk-t-l); font-weight: 600; }
.m2 .m2-paso-t span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mk-ink); color: var(--mk-on-ink); font-size: var(--mk-t-xs); }
@media (max-width: 767.98px), (max-height: 499.98px) {
  .m2 .m2-in { height: var(--mk-toque); font-size: var(--mk-t-campo); }
  .m2 .m2-par { grid-template-columns: minmax(0, 1fr); }
  /* 17-oct-2026 · P1: cabecera móvil, mismas reglas que account_balances/hub.php */
  .m2 .m2-cab__acc { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  .m2 .m2-cab__sub { grid-row: 3; }
}

/* ── 21 · Escritorio de oficina: marcar, lote y atajos (benchmark Capterra: Payhawk, Kick) ──────────────────────
 * Casilla en cada fila (solo ≥ 768 con ratón); al marcar ≥ 1, la barra de lote sustituye a la cabecera de sección.
 * Regla Payhawk: lo que tiene aviso NO entra en el lote (se revisa a mano). Atajos visibles debajo de la lista. */
.m2 .m2-marca { display: none; }
.m2 .m2-lote { display: none; }
.m2 .m2-atajos { display: none; }
@media (min-width: 768px) and (min-height: 500px) {
  .m2 .m2-lista--lote > .m2-fila { padding-left: 44px; }
  .m2 .m2-marca { position: absolute; z-index: 2; left: 14px; top: 14px; display: grid; place-items: center; width: 18px; height: 18px; }
  .m2 .m2-marca input { width: 16px; height: 16px; margin: 0; accent-color: var(--mk-ink); }
  .m2 .m2-lote { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px;
    border-radius: var(--mk-r3); background: var(--mk-ink); color: var(--mk-on-ink); font-size: var(--mk-t-s); }
  .m2 .m2-lote b { font-weight: 600; }
  .m2 .m2-lote .m2-btn { min-height: 28px; border-color: transparent; }
  .m2 .m2-lote .m2-btn--fant { color: var(--mk-on-ink); opacity: .85; }
  .m2 .m2-lote__nota { flex-basis: 100%; font-size: var(--mk-t-xs); opacity: .85; }
  .m2 .m2-atajos { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 2px; font-size: var(--mk-t-xs); color: var(--mk-fg2); }
}
.m2 kbd.m2-tecla { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-right: 4px; border: 1px solid var(--mk-line2);
  border-bottom-width: 2px; border-radius: var(--mk-r1); background: var(--mk-bg); color: var(--mk-fg); font: 600 11px/1 var(--mk-f); }
/* detalle al lado, sin salir de la lista (≥ 1024): la lista a la izquierda, el detalle fijo a la derecha */
@media (min-width: 1024px) and (min-height: 500px) {
  .m2 .m2-cols--detalle { grid-template-columns: minmax(0, 1fr) 340px; }
  .m2 .m2-detalle { position: sticky; top: 16px; border: 1px solid var(--mk-line); border-radius: var(--mk-r3); background: var(--mk-bg); overflow: hidden; }
}
.m2 .m2-detalle__cab { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--mk-line); }
.m2 .m2-detalle__t { font-size: 17px; font-weight: 600; line-height: 1.3; }
.m2 .m2-detalle__cuerpo { display: grid; gap: 14px; padding: 14px 16px; }
.m2 .m2-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; font-size: var(--mk-t-s); }
.m2 .m2-kv dt { color: var(--mk-fg2); } .m2 .m2-kv dd { margin: 0; }
.m2 .m2-tabla tr.is-marcada > * { background: var(--mk-b-bg); }
.m2 .m2-tabla tr.is-abierta > * { background: var(--mk-sel); }
.m2 .m2-tabla td.m2-c-t { white-space: normal; min-width: 220px; }
.m2 .m2-tabla--ajustada { width: 100%; }
.m2 .m2-tabla--ajustada td:not(.m2-c-t) { width: 1%; }
.m2 .m2-tabla .m2-t1 { font-weight: 600; color: var(--mk-fg); }
.m2 .m2-tabla .m2-t2 { font-size: var(--mk-t-xs); color: var(--mk-fg2); }
/* fila para ELEGIR (marcar implicados, destinatarios…): toda la fila es la etiqueta de su casilla */
.m2 .m2-fila--elegir { cursor: pointer; }
.m2 .m2-fila--elegir > input { grid-row: 1; grid-column: -2; width: 22px; height: 22px; margin: 0; align-self: center; accent-color: var(--mk-ink); }
.m2 .m2-fila--elegir:has(> input:checked) { background: var(--mk-b-bg); }
.m2 .m2-fila--elegir:has(> input:focus-visible) { outline: 2px solid var(--mk-focus); outline-offset: -2px; }
.m2 .m2-fila--elegir > .m2-ctx { grid-column: 2 / -1; }
.m2 .m2-form--caja { padding: 16px; }
.m2 .m2-pie > .m2-ayuda { margin-right: auto; align-self: center; }
.m2 .m2-acciones-det { display: flex; flex-wrap: wrap; gap: 8px; }