/* MADRE SELVA · Design System · capa de aplicación (18/10/2026).
   Se carga al final del <body> (features/design-system/integrate.mjs). Aplica los tokens de ms-design-tokens.css a las mismas funciones
   visuales en BASE, PRO, PREMIUM y MS EJECUTIVO. Solo tipografía, controles, tablas y cifras: no toca colores de identidad,
   logotipos, avatares, navegación aprobada, el login ni la landing. Prefijo html[data-ms-xp] body: alcanza a las cuatro
   experiencias y supera a los estilos que los módulos inyectan en ejecución sin recurrir a !important.
   Reversión: quitar la integración de build-evolution.mjs (o solo el <link> de esta hoja en integrate.mjs). */

/* ── E1 · Familias: Arial del módulo Evolución → Inter (los títulos y cifras pasan a Source Serif 4 más abajo) ─────── */
html[data-ms-xp] body .ms-main .ev{font-family:var(--ms-font-ui)}

/* ── E1 · Título de pantalla (nivel 1): misma escala responsive en todas las experiencias ────────────────────────── */
html[data-ms-xp] body .ms-main :is(.page-head h1,.home-hero h1,.msx-hero h1){
  font-family:var(--ms-font-title);font-size:var(--ms-fs-h1);font-weight:var(--ms-fw-h1);line-height:var(--ms-lh-tight);
  letter-spacing:var(--ms-ls-title);overflow-wrap:break-word}
html[data-ms-xp] body .ms-main :is(.page-head .sub,.page-head > div > p,.home-hero p,.msx-sub){
  font-size:var(--ms-fs-body);line-height:var(--ms-lh-body)}
/* ≤900 px la cabecera pasa a columna (styles-v2 pide align-items:stretch, pero una regla posterior la centra). Con el
   título responsive más corto quedaba centrada: se restituye la alineación a la izquierda, sin tocar la cabecera con reloj. */
@media (max-width:900px){html[data-ms-xp] body .ms-main .page-head:not(.ms-has-clock){align-items:stretch}}

/* PREMIUM: el módulo oculta la cabecera con display:none porque su héroe la reemplaza; el h1 «Panel del dueño» quedaba
   fuera del árbol de accesibilidad. Oculto solo visualmente: la pantalla se ve igual y los lectores de pantalla tienen su h1. */
html[data-ms-xp] body .ms-main .page:has(#ms-premium) > .page-head{
  display:block;position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── Antetítulos (eyebrow): 12 px, mayúsculas, mismo espaciado ─────────────────────────────────────────────────── */
html[data-ms-xp] body .ms-main :is(.eyebrow,.pm-eyebrow,.ev-eyebrow,.msx-eyebrow,.tm-hero small,.pm-lv,.pm-controls .pm-h3,.msx-insp small){
  font-family:var(--ms-font-ui);font-size:var(--ms-fs-eyebrow);font-weight:var(--ms-fw-ui);line-height:1.3;
  letter-spacing:var(--ms-ls-eyebrow);text-transform:uppercase}

/* ── E2 · Título de sección (nivel 2) y héroes de módulo ───────────────────────────────────────────────────────── */
html[data-ms-xp] body .ms-main :is(.section-title h2,.ms-sec-head h2,.home-panel-head h2,.ms-detect-brand h2,.msd-head h2,
  .pm-hero h2,.tm-hero h2,.ev-hero h2,.msp3-top h2){
  font-family:var(--ms-font-title);font-size:var(--ms-fs-h2);font-weight:var(--ms-fw-title);line-height:var(--ms-lh-title);
  letter-spacing:var(--ms-ls-title);overflow-wrap:break-word}

/* ── E2 · Título de tarjeta, modal o panel (nivel 3) ───────────────────────────────────────────────────────────── */
html[data-ms-xp] body .ms-main :is(.card-head h3,.ev h3,.msp3-modal-card h3),
html[data-ms-xp] body .ms-arca-dialog h3{
  font-family:var(--ms-font-title);font-size:var(--ms-fs-h3);font-weight:var(--ms-fw-title);line-height:var(--ms-lh-title);
  letter-spacing:var(--ms-ls-title);overflow-wrap:break-word}
/* Paneles densos (excepción justificada: muchas tarjetas por pantalla en PREMIUM, Equipo y MS EJECUTIVO). */
html[data-ms-xp] body .ms-main :is(.pm-h3:not(.pm-controls .pm-h3),.tm-h3,.msd h3){
  font-family:var(--ms-font-title);font-size:var(--ms-fs-h3-dense);font-weight:var(--ms-fw-title);line-height:1.25;
  letter-spacing:var(--ms-ls-title);overflow-wrap:break-word}

/* ── Párrafos, subtítulos de bloque y textos auxiliares ────────────────────────────────────────────────────────── */
html[data-ms-xp] body .ms-main :is(.pm-sub,.tm-sub,.pm-hero p,.card-head p){font-size:var(--ms-fs-body);line-height:var(--ms-lh-body)}
html[data-ms-xp] body .ms-main :is(.ev-muted,.ev-legend,.msx-meta,.msx-msg,.pm-warn,.pm-alert,.tm-item span,.msx-list li,.msd-na){
  font-size:var(--ms-fs-aux);line-height:var(--ms-lh-aux)}
html[data-ms-xp] body .ms-main :is(.pm-kpi small,.tm-kpi small,.msx-kpi .msd-label,.msx-kpi .msd-ctx,.pm-table td small){
  font-size:var(--ms-fs-caption)}

/* ── E1 · Etiquetas de formulario: 12 px, mayúsculas, peso 600 ─────────────────────────────────────────────────── */
html[data-ms-xp] body .ms-main :is(.field label,.pm-period label,.tm-form label,.tm-fix label,.msx-form label,.ev label){
  font-family:var(--ms-font-ui);font-size:var(--ms-fs-label);font-weight:var(--ms-fw-label);line-height:1.3;
  letter-spacing:var(--ms-ls-label);text-transform:uppercase}

/* ── E1 · Campos: Inter, 15 px (16 px en celular y pantallas táctiles), alto mínimo común ──────────────────────── */
html[data-ms-xp] body .ms-main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),select,textarea){
  font-family:var(--ms-font-ui);font-size:var(--ms-fs-input);font-weight:500;letter-spacing:normal;text-transform:none;
  min-height:var(--ms-control-h);border-radius:var(--ms-radius-control)}
html[data-ms-xp] body .ms-main textarea{min-height:5.5rem;line-height:var(--ms-lh-body)}
/* Algunos formularios (p. ej. invitación de supervisores de PREMIUM) declaran font:inherit en línea: solo el tamaño y la
   familia de los campos se fuerzan (evitan el zoom automático de iPhone); el resto del diseño en línea se respeta. */
html[data-ms-xp] body .ms-main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),select,textarea)[style]{
  font-family:var(--ms-font-ui)!important;font-size:var(--ms-fs-input)!important}
html[data-ms-xp] body .ms-main input{font-family:var(--ms-font-ui)}
html[data-ms-xp] body .ms-main input[style]{font-family:var(--ms-font-ui)!important}
html[data-ms-xp] body .ms-main .pm-sv-invite label{font-size:var(--ms-fs-label)!important;font-weight:var(--ms-fw-label);letter-spacing:var(--ms-ls-label);text-transform:uppercase}

/* ── E1 · Botones: mismo texto en todas las experiencias; 44 px en pantallas táctiles y celulares ─────────────── */
html[data-ms-xp] body .ms-main :is(.btn,.pm button,.tm button,.msx-btn,.ev button,.msd-periods button){
  font-family:var(--ms-font-ui);font-size:var(--ms-fs-btn);font-weight:var(--ms-fw-ui);border-radius:var(--ms-radius-control)}
html[data-ms-xp] body .ms-main :is(.pm .pm-sig,.pm .pm-loc){border-radius:var(--ms-radius-pill)}
/* PRO oscuro (ms-pro-carbon.css) daba 700 al botón principal de Evolución: mismo peso que el resto de los botones. */
html[data-ms-xp] body .ms-main .ev button.primary{font-weight:var(--ms-fw-ui)}
@media (pointer:coarse),(max-width:640px){
  html[data-ms-xp] body .ms-main :is(.btn:not(.sm),.pm button:not(.pm-sig),.tm button:not(.tm-link),.msx-btn:not(.msx-small),.ev button){min-height:var(--ms-touch)}
  /* Excepción compacta accesible: acciones secundarias dentro de filas y chips. */
  html[data-ms-xp] body .ms-main :is(.btn.sm,.tm button.tm-link,.msx-small,.pm .pm-sig){min-height:var(--ms-touch-compact)}
}

/* ── E2 · Tablas y listados ─────────────────────────────────────────────────────────────────────────────────────── */
html[data-ms-xp] body .ms-main :is(.table th,.pm-table th,.tm-table th,.ev th,.msd th,.msx table th){
  font-family:var(--ms-font-ui);font-size:var(--ms-fs-th);font-weight:var(--ms-fw-ui);line-height:1.2;
  letter-spacing:var(--ms-ls-th);text-transform:uppercase}
html[data-ms-xp] body .ms-main :is(.pm-table,.tm-table,.ev table),
html[data-ms-xp] body .ms-main :is(.table td,.pm-table td,.tm-table td,.ev td,.msd td){font-size:var(--ms-fs-td)}
html[data-ms-xp] body .ms-main :is(.table td,.pm-table td,.tm-table td,.ev td,.msd td){font-variant-numeric:tabular-nums}

/* ── E2 · Cifras de indicadores: Source Serif 4, peso 500, números tabulares ───────────────────────────────────── */
html[data-ms-xp] body .ms-main :is(.pm-kpi b,.tm-kpi b,.msx-kpi .msx-v,.msd-kpi .msd-value,.ev-value){
  font-family:var(--ms-font-title);font-size:var(--ms-fs-kpi);font-weight:var(--ms-fw-kpi);line-height:1.15;
  letter-spacing:var(--ms-ls-title);font-variant-numeric:lining-nums tabular-nums}
/* Importes largos (ya marcados por el módulo para entrar en su tarjeta). */
html[data-ms-xp] body .ms-main .pm-kpi b.pm-l{font-size:calc(var(--ms-fs-kpi) * .88)}
html[data-ms-xp] body .ms-main .pm-kpi b.pm-xl{font-size:calc(var(--ms-fs-kpi) * .78)}

/* ── E3 · MS EJECUTIVO: misma escala; conserva su identidad negro y dorado (colores definidos en su módulo) ────── */
html[data-ms-xp] body .ms-main .msx-lead{font-size:var(--ms-fs-h3);line-height:1.35}
html[data-ms-xp] body .ms-main .msx-insp p{font-size:var(--ms-fs-body);line-height:var(--ms-lh-aux)}

/* ── Textos largos (PT-BR / EN) y zoom: los títulos y rótulos parten palabra antes de desbordar ─────────────────── */
html[data-ms-xp] body .ms-main :is(label,.pm-kpi small,.tm-kpi small,.msx-kpi .msd-label){overflow-wrap:break-word}