/* ═══ LA CAPA VIAJA CON LA HOJA (2026-07-20) ══════════════════════════════════
Esta hoja declara su @layer ACÁ ADENTRO. Antes la capa la ponía quien la
importaba —`@import url(...) layer(skin)`, repetido en 4 emisores— así que
la hoja caía en su capa SOLO si el importador acertaba, y cargarla por
la dejaba SIN CAPA: en CSS lo no-capado le gana a todo lo capado.
Con la capa acá la hoja es inmune a CÓMO se la cargue, y el puede
usar (paralelo, y un fallo se ve en Network) en vez de @import
(serial, render-blocking, y si falla se pierde EN SILENCIO — el defecto que
dejaba el shell sin `container-type` y tiraba el layout a flujo plano).
═════════════════════════════════════════════════════════════════════════ */
@layer skin {
/*! MxLite.UI · skin (components.css) · v2.0.0 · target net10.0 · baseline MxApp.UI.Cx unknown (--mx-*) · gen 2026-06-25 · src Pi8.Design@9ea43f8(main) */
/* Pi8 · components.css — skins BEM token-driven del kit completo. Contrato en anatomy.md.
Convención: clases BEM (cx-/cf-/cy-/ax-, 1:1 con las libs) + estados como data-state / aria-*.
Dos puentes a la capa funcional: (1) light-DOM/className con las clases BEM; (2) Shadow DOM con ::part. */
/* ===================== Cx · primitivos ===================== */
/* Button — variant × tono × size (el tono se inyecta en vars locales) */
/* Botón homologado al contrato de PRODUCCIÓN (MxApp.UI.Cx): dos ejes ortogonales tono × variante. */
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--mx-space-2,8px);font-family:var(--mx-font-sans);font-weight:500;font-size:var(--mx-text-sm,13px);line-height:1;
border-radius:var(--mx-radius-sm,6px);background:var(--mx-color-surface);color:var(--mx-color-text);border:1px solid var(--mx-color-border);padding:6px 14px;cursor:pointer;
transition:background var(--mx-transition-fast,120ms) var(--mx-ease-out,ease),border-color var(--mx-transition-fast,120ms) var(--mx-ease-out,ease),color var(--mx-transition-fast,120ms) var(--mx-ease-out,ease),filter var(--mx-transition-fast,120ms) var(--mx-ease-out,ease)}
.cx-btn:disabled,.cx-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}
.cx-btn:focus-visible{outline:none;box-shadow:var(--mx-shadow-focus,var(--mx-ring))}
.cx-btn:active:not(:disabled){filter:brightness(.95)}
.cx-btn:hover:not(:disabled){background:var(--mx-color-surface-2)}
.cx-btn--full,.cx-btn--block{width:100%}
.cx-btn__icon{display:inline-flex;width:1.05em;height:1.05em;flex:0 0 auto}.cx-btn__icon svg{width:100%;height:100%}
.cx-btn--sm{padding:4px 10px;font-size:var(--mx-text-xs,11px)}.cx-btn--md{padding:6px 14px;font-size:var(--mx-text-sm,13px)}.cx-btn--lg{padding:10px 18px;font-size:var(--mx-text-base,14px)}
/* variantes (superficie) */
.cx-btn--default{background:var(--mx-color-surface);color:var(--mx-color-text);border-color:var(--mx-color-border)}
.cx-btn--elevated{background:var(--mx-color-surface);color:var(--mx-color-primary);box-shadow:var(--mx-elevation-1,var(--mx-shadow-sm))}
.cx-btn--elevated:hover:not(:disabled){background:var(--mx-color-surface-2);box-shadow:var(--mx-elevation-2,var(--mx-shadow-md))}
.cx-btn--outlined{background:transparent;color:var(--mx-color-primary);border-color:var(--mx-color-border)}
.cx-btn--outlined:hover:not(:disabled){background:var(--mx-color-primary-light)}
.cx-btn--text{background:transparent;color:var(--mx-color-primary);border-color:transparent}
.cx-btn--text:hover:not(:disabled){background:var(--mx-color-primary-light)}
.cx-btn--ghost{background:transparent;color:var(--mx-color-text);border-color:transparent}
.cx-btn--ghost:hover:not(:disabled){background:var(--mx-color-surface-2)}
.cx-btn--glow{background:var(--mx-color-primary);color:var(--mx-color-primary-on);border-color:transparent;box-shadow:var(--mx-glow-primary)}
.cx-btn--glow:hover:not(:disabled){background:var(--mx-color-primary-dark)}
/* tonos (fill sólido = superficie default + tono) */
.cx-btn--tone-primary{background:var(--mx-color-primary);color:var(--mx-color-primary-on);border-color:transparent}
.cx-btn--tone-primary:hover:not(:disabled){background:var(--mx-color-primary-dark)}
.cx-btn--tone-danger{background:var(--mx-color-danger);color:var(--mx-color-primary-on);border-color:transparent}
.cx-btn--tone-info{background:var(--mx-color-info);color:var(--mx-color-primary-on);border-color:transparent}
.cx-btn--tone-success{background:var(--mx-color-success);color:var(--mx-color-primary-on);border-color:transparent}
.cx-btn--tone-warn{background:var(--mx-color-warn);color:var(--mx-color-primary-on);border-color:transparent}
.cx-btn--tone-danger:hover:not(:disabled),.cx-btn--tone-info:hover:not(:disabled),.cx-btn--tone-success:hover:not(:disabled),.cx-btn--tone-warn:hover:not(:disabled){filter:brightness(.95)}
.cx-btn--tone-secondary{background:var(--mx-color-secondary-light);color:var(--mx-color-secondary-dark);border-color:transparent}
.cx-btn--tone-secondary:hover:not(:disabled){filter:brightness(.96)}
/* tono sobre superficies transparentes: solo recolorea el acento */
.cx-btn--outlined.cx-btn--tone-primary,.cx-btn--text.cx-btn--tone-primary,.cx-btn--ghost.cx-btn--tone-primary{background:transparent;color:var(--mx-color-primary);border-color:var(--mx-color-primary)}
.cx-btn--outlined.cx-btn--tone-danger,.cx-btn--text.cx-btn--tone-danger,.cx-btn--ghost.cx-btn--tone-danger{background:transparent;color:var(--mx-color-danger);border-color:var(--mx-color-danger)}
.cx-btn--outlined.cx-btn--tone-info,.cx-btn--text.cx-btn--tone-info,.cx-btn--ghost.cx-btn--tone-info{background:transparent;color:var(--mx-color-info);border-color:var(--mx-color-info)}
.cx-btn--outlined.cx-btn--tone-success,.cx-btn--text.cx-btn--tone-success,.cx-btn--ghost.cx-btn--tone-success{background:transparent;color:var(--mx-color-success);border-color:var(--mx-color-success)}
.cx-btn--outlined.cx-btn--tone-warn,.cx-btn--text.cx-btn--tone-warn,.cx-btn--ghost.cx-btn--tone-warn{background:transparent;color:var(--mx-color-warn);border-color:var(--mx-color-warn)}
.cx-btn--outlined.cx-btn--tone-secondary,.cx-btn--text.cx-btn--tone-secondary,.cx-btn--ghost.cx-btn--tone-secondary{background:transparent;color:var(--mx-color-secondary);border-color:var(--mx-color-secondary)}
.cx-btn--text.cx-btn--tone-primary,.cx-btn--ghost.cx-btn--tone-primary,.cx-btn--text.cx-btn--tone-danger,.cx-btn--ghost.cx-btn--tone-danger,.cx-btn--text.cx-btn--tone-info,.cx-btn--ghost.cx-btn--tone-info,.cx-btn--text.cx-btn--tone-success,.cx-btn--ghost.cx-btn--tone-success,.cx-btn--text.cx-btn--tone-warn,.cx-btn--ghost.cx-btn--tone-warn,.cx-btn--text.cx-btn--tone-secondary,.cx-btn--ghost.cx-btn--tone-secondary{border-color:transparent}
.cx-btn--elevated.cx-btn--tone-primary{color:var(--mx-color-primary)}.cx-btn--elevated.cx-btn--tone-danger{color:var(--mx-color-danger)}.cx-btn--elevated.cx-btn--tone-success{color:var(--mx-color-success)}.cx-btn--elevated.cx-btn--tone-info{color:var(--mx-color-info)}.cx-btn--elevated.cx-btn--tone-warn{color:var(--mx-color-warn)}.cx-btn--elevated.cx-btn--tone-secondary{color:var(--mx-color-secondary)}
/* gradiente */
.cx-btn--gradient,.cx-btn--gradient-primary{background:var(--mx-gradient-primary);color:var(--mx-color-primary-on);border-color:transparent}
.cx-btn--gradient-secondary{background:var(--mx-gradient-secondary);color:var(--mx-color-primary-on);border-color:transparent}
.cx-btn--gradient-success{background:var(--mx-gradient-success);color:var(--mx-color-primary-on);border-color:transparent}
.cx-btn--gradient-danger{background:var(--mx-gradient-danger);color:var(--mx-color-primary-on);border-color:transparent}
.cx-btn--gradient-ocean{background:var(--mx-gradient-ocean);color:#fff;border-color:transparent}
.cx-btn--gradient-sunset{background:var(--mx-gradient-sunset);color:#fff;border-color:transparent}
.cx-btn--gradient:hover:not(:disabled),.cx-btn--gradient-primary:hover:not(:disabled),.cx-btn--gradient-secondary:hover:not(:disabled),.cx-btn--gradient-success:hover:not(:disabled),.cx-btn--gradient-danger:hover:not(:disabled),.cx-btn--gradient-ocean:hover:not(:disabled),.cx-btn--gradient-sunset:hover:not(:disabled){filter:brightness(1.06)}
.cx-btn[data-loading=true],.cx-btn--loading{color:transparent;position:relative;pointer-events:none}
.cx-btn[data-loading=true]::after,.cx-btn--loading::after{content:"";position:absolute;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:cx-spin .6s linear infinite;color:var(--mx-color-primary-on)}
/* StatusPill */
/* pill: tint con --_c (claro) y TEXTO con --_t (=paso -strong, legible sobre el tint) */
.cx-pill{--_c:var(--mx-color-info);--_t:var(--mx-color-info-strong,var(--mx-color-info));display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:var(--mx-radius-full,999px);font-family:var(--mx-font-sans);font-size:var(--mx-text-xs,11px);font-weight:var(--mx-font-weight-bold,700);line-height:1.6;background:color-mix(in srgb,var(--_c) 18%,transparent);color:var(--_t)}
.cx-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--_t)}
.cx-pill--primary{--_c:var(--mx-color-primary);--_t:var(--mx-color-primary-strong,var(--mx-color-primary))}
.cx-pill--info{--_c:var(--mx-color-info);--_t:var(--mx-color-info-strong,var(--mx-color-info))}
.cx-pill--success{--_c:var(--mx-color-success);--_t:var(--mx-color-success-strong,var(--mx-color-success))}
.cx-pill--warn{--_c:var(--mx-color-warn);--_t:var(--mx-color-warn-strong,var(--mx-color-warn))}
.cx-pill--danger{--_c:var(--mx-color-danger);--_t:var(--mx-color-danger-strong,var(--mx-color-danger))}
.cx-pill--neutral{--_c:var(--mx-color-text-muted);--_t:var(--mx-color-text-muted);background:var(--mx-color-surface-2)}
/* Chip */
.cx-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--mx-radius-full,999px);background:var(--mx-color-surface-2);color:var(--mx-color-text);font-family:var(--mx-font-sans);font-size:var(--mx-text-xs,11px);font-weight:var(--mx-font-weight-medium,500);border:1px solid var(--mx-color-border)}
.cx-chip--default{background:var(--mx-color-surface-2);color:var(--mx-color-text)}
.cx-chip--primary{background:var(--mx-color-primary-light);color:var(--mx-color-primary-text,var(--mx-color-primary));border-color:transparent}
.cx-chip--info{background:var(--mx-color-info-light);color:var(--mx-color-info-text,var(--mx-color-info));border-color:transparent}
.cx-chip--success{background:var(--mx-color-success-light);color:var(--mx-color-success-text,var(--mx-color-success));border-color:transparent}
.cx-chip--warn{background:var(--mx-color-warn-bg,var(--mx-color-warn-light));color:var(--mx-color-warn-text,var(--mx-color-warn));border-color:transparent}
.cx-chip--danger{background:var(--mx-color-danger-light);color:var(--mx-color-danger-text,var(--mx-color-danger));border-color:transparent}
.cx-chip--ghost{background:transparent;color:var(--mx-color-text-muted)}
.cx-chip__close{cursor:pointer;opacity:.6;display:inline-flex;width:.9em;height:.9em}.cx-chip__close:hover{opacity:1}
/* TagList */
.cx-taglist{display:flex;flex-direction:column;gap:7px}
.cx-taglist__title{font-size:var(--mx-text-xs,11px);font-weight:700;color:var(--mx-color-text-subtle);text-transform:uppercase;letter-spacing:.05em}
.cx-taglist__items{display:flex;flex-wrap:wrap;gap:6px}
/* Card */
.cx-card{display:flex;flex-direction:column;background:var(--mx-color-surface);color:var(--mx-color-text);border:1px solid var(--mx-color-border);border-radius:var(--mx-radius-lg,8px);box-shadow:var(--mx-shadow-sm);overflow:hidden}
.cx-card__header{padding:var(--mx-space-2,8px) var(--mx-space-3,12px);background:var(--mx-color-surface-alt);border-bottom:var(--mx-border-width,1px) solid var(--mx-color-border);font-size:var(--mx-text-sm,13px);font-weight:var(--mx-font-weight-semibold,600);letter-spacing:var(--mx-letter-spacing-tight,-.01em);color:var(--mx-color-text)}
.cx-card__body{padding:var(--mx-space-3,12px);color:var(--mx-color-text)}
.cx-card__footer{padding:var(--mx-space-2,8px) var(--mx-space-3,12px);background:var(--mx-color-surface-alt);border-top:var(--mx-border-width,1px) solid var(--mx-color-border);font-size:var(--mx-text-sm,13px);color:var(--mx-color-text-muted);display:flex;gap:var(--mx-space-2,8px);justify-content:flex-end}
/* Avatar */
.cx-avatar{--_size:40px;display:inline-flex;align-items:center;justify-content:center;width:var(--_size);height:var(--_size);border-radius:50%;background:var(--mx-gradient-primary,var(--mx-color-primary));color:#fff;font-weight:700;font-size:calc(var(--_size)*.4);font-family:var(--mx-font-sans)}
.cx-avatar--sm{--_size:28px}.cx-avatar--lg{--_size:56px}.cx-avatar--neutral{background:var(--mx-color-surface-2);color:var(--mx-color-text-muted)}
/* Divider */
.cx-divider{height:1px;background:var(--mx-color-border);border:0;margin:var(--mx-space-3,12px) 0}
.cx-divider--label{height:auto;background:none;display:flex;align-items:center;gap:12px;color:var(--mx-color-text-subtle);font-size:var(--mx-text-xs,11px);margin:var(--mx-space-3,12px) 0}
.cx-divider--label::before,.cx-divider--label::after{content:"";flex:1;height:1px;background:var(--mx-color-border)}
/* Input */
.cx-input{font-family:var(--mx-font-sans);font-size:var(--mx-text-base,14px);line-height:1.2;padding:9px 12px;border-radius:var(--mx-radius-md,6px);border:1px solid var(--mx-color-border);background:var(--mx-color-surface);color:var(--mx-color-text);outline:none;transition:border-color var(--mx-transition-fast,120ms),box-shadow var(--mx-transition-fast,120ms)}
.cx-input::placeholder{color:var(--mx-color-text-subtle)}
.cx-input:focus{border-color:var(--mx-color-primary);box-shadow:var(--mx-shadow-focus,0 0 0 3px rgba(99,102,241,.35))}
.cx-input[aria-invalid=true]{border-color:var(--mx-color-danger)}
.cx-input:disabled{opacity:.5}
/* Field (wrapper de campo) — estándar: .cx-field (CxSelect de prod) + alias .cf-field */
.cx-field,.cf-field{display:flex;flex-direction:column;gap:6px}
.cx-field__label,.cf-field__label{font-size:var(--mx-text-sm,13px);font-weight:var(--mx-font-weight-medium,500);color:var(--mx-color-text-muted)}
/* Select — estandar prod: el select lleva la clase cx-input dentro de .cx-select; alias .cx-select__control */
.cx-select{position:relative;display:block;width:100%}
.cx-select>.cx-input,.cx-select__control{appearance:none;-webkit-appearance:none;font-family:var(--mx-font-sans);font-size:var(--mx-text-base,14px);padding:9px 34px 9px 12px;border-radius:var(--mx-radius-md,6px);border:1px solid var(--mx-color-border);background:var(--mx-color-surface);color:var(--mx-color-text);outline:none;cursor:pointer;width:100%}
.cx-select>.cx-input:focus,.cx-select__control:focus{border-color:var(--mx-color-primary);box-shadow:var(--mx-shadow-focus,0 0 0 3px rgba(99,102,241,.35))}
.cx-select::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:2px solid var(--mx-color-text-muted);border-bottom:2px solid var(--mx-color-text-muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
/* Tabs — estándar prod: .cx-tabs__head (strip) + .cx-tabs__tab(--active) + .cx-tabs__panel + .cx-tabs__badge.
Compat: la forma plana antigua (tabs directos en .cx-tabs, sin __head) cae a fila vía :has(). */
.cx-tabs{display:flex;flex-direction:column}
.cx-tabs:not(:has(.cx-tabs__head)){flex-direction:row;gap:2px;border-bottom:1px solid var(--mx-color-border)}
.cx-tabs__head{display:flex;gap:2px;border-bottom:1px solid var(--mx-color-border)}
.cx-tabs__tab{padding:9px 14px;font-size:var(--mx-text-sm,13px);font-weight:var(--mx-font-weight-medium,500);color:var(--mx-color-text-muted);cursor:pointer;border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px}
.cx-tabs__tab:hover{color:var(--mx-color-text)}
.cx-tabs__tab--active,.cx-tabs__tab[aria-selected=true]{color:var(--mx-color-primary);border-bottom-color:var(--mx-color-primary)}
.cx-tabs__badge{font-size:var(--mx-text-xs,11px);background:var(--mx-color-primary-light,var(--mx-color-surface-alt));color:var(--mx-color-primary-strong,var(--mx-color-primary));padding:1px 7px;border-radius:999px;line-height:1.6}
.cx-tabs__panel{padding:14px 2px;color:var(--mx-color-text)}
/* Breadcrumb — estándar prod: .aw-breadcrumb__link + .aw-breadcrumb__current + .aw-breadcrumb__sep.
Alias: .aw-breadcrumb__item (forma antigua con aria-current). */
.aw-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mx-font-sans);font-size:var(--mx-text-sm,13px);color:var(--mx-color-text-muted)}
.aw-breadcrumb__link,.aw-breadcrumb__item{color:var(--mx-color-text-muted);text-decoration:none;cursor:pointer}
.aw-breadcrumb__link:hover,.aw-breadcrumb__item:hover{color:var(--mx-color-primary)}
.aw-breadcrumb__current,.aw-breadcrumb__item[aria-current=page]{color:var(--mx-color-text);font-weight:600;cursor:default}
.aw-breadcrumb__sep{color:var(--mx-color-text-subtle)}
/* Pagination */
.cx-pagination{display:inline-flex;gap:4px;align-items:center;font-family:var(--mx-font-sans)}
.cx-pagination__page{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--mx-color-border);background:var(--mx-color-surface);color:var(--mx-color-text);border-radius:var(--mx-radius-md,6px);cursor:pointer;font-size:var(--mx-text-sm,13px)}
.cx-pagination__page:hover{border-color:var(--mx-color-primary)}
.cx-pagination__page[aria-current=true]{background:var(--mx-color-primary);color:var(--mx-color-on-primary,#fff);border-color:var(--mx-color-primary)}
/* Segmented */
.cx-segmented{display:inline-flex;background:var(--mx-color-surface-2);border-radius:var(--mx-radius-full,999px);padding:3px}
.cx-segmented__opt{padding:6px 14px;border:0;background:none;color:var(--mx-color-text-muted);font-family:var(--mx-font-sans);font-size:var(--mx-text-sm,13px);font-weight:600;border-radius:var(--mx-radius-full,999px);cursor:pointer}
.cx-segmented__opt[aria-selected=true]{background:var(--mx-color-surface);color:var(--mx-color-primary);box-shadow:var(--mx-shadow-sm)}
/* Notice (callout) */
/* homologado al contrato de producción (CxNotice): {tone}-light bg · {tone} borde · {tone}-text · border-left 4px */
.cx-notice{display:flex;gap:10px;padding:var(--mx-space-3,12px);border-radius:var(--mx-radius-md,8px);border:1px solid transparent;border-left:calc(var(--mx-border-width,1px) * 4) solid;font-size:var(--mx-text-sm,13px);font-family:var(--mx-font-sans);background:var(--mx-color-info-light);border-color:var(--mx-color-info);color:var(--mx-color-info-text,var(--mx-color-info))}
.cx-notice--info{background:var(--mx-color-info-light);border-color:var(--mx-color-info);color:var(--mx-color-info-text,var(--mx-color-info))}
.cx-notice--primary{background:var(--mx-color-primary-light);border-color:var(--mx-color-primary);color:var(--mx-color-primary-text,var(--mx-color-primary))}
.cx-notice--tertiary{background:var(--mx-color-tertiary-light);border-color:var(--mx-color-tertiary);color:var(--mx-color-tertiary-text,var(--mx-color-tertiary))}
.cx-notice--success{background:var(--mx-color-success-light);border-color:var(--mx-color-success);color:var(--mx-color-success-text,var(--mx-color-success))}
.cx-notice--warn{background:var(--mx-color-warn-light);border-color:var(--mx-color-warn);color:var(--mx-color-warn-text,var(--mx-color-warn))}
.cx-notice--danger{background:var(--mx-color-danger-light);border-color:var(--mx-color-danger);color:var(--mx-color-danger-text,var(--mx-color-danger))}
.cx-notice--default,.cx-notice--ghost{background:var(--mx-color-surface-alt);border-color:var(--mx-color-border);color:var(--mx-color-text)}
.cx-notice__icon{flex:0 0 auto;display:inline-flex;width:18px;height:18px}
.cx-notice__title{font-weight:700;margin-bottom:2px}.cx-notice__text{font-size:var(--mx-text-sm,13px)}
/* Toast (familia Aw — ex cx-toast) */
.aw-toast{--_c:var(--mx-color-primary);display:inline-flex;gap:10px;align-items:center;padding:12px 16px;border-radius:var(--mx-radius-lg,10px);background:var(--mx-color-surface);color:var(--mx-color-text);box-shadow:var(--mx-shadow-lg);border-left:3px solid var(--_c);font-family:var(--mx-font-sans)}
.aw-toast__icon{color:var(--_c);display:inline-flex;width:18px;height:18px}
/* Modal */
.cx-modal{width:min(440px,92vw);background:var(--mx-color-surface);color:var(--mx-color-text);border-radius:var(--mx-radius-xl,12px);box-shadow:var(--mx-shadow-2xl);overflow:hidden;font-family:var(--mx-font-sans)}
.cx-modal__header{padding:16px 18px;font-weight:700;font-size:var(--mx-text-lg,18px)}
.cx-modal__body{padding:0 18px 16px;color:var(--mx-color-text-muted);font-size:var(--mx-text-sm,13px)}
.cx-modal__footer{padding:14px 18px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--mx-color-border)}
/* Tooltip */
.cx-tooltip{display:inline-block;background:var(--mx-color-text);color:var(--mx-color-surface,#fff);font-family:var(--mx-font-sans);font-size:var(--mx-text-xs,11px);padding:5px 9px;border-radius:var(--mx-radius-sm,4px);box-shadow:var(--mx-shadow-md)}
/* ProgressBar */
.cx-progress{display:flex;flex-direction:column;gap:6px;font-family:var(--mx-font-sans)}
.cx-progress__label{display:flex;justify-content:space-between;font-size:var(--mx-text-xs,11px);color:var(--mx-color-text-muted)}
.cx-progress__track{height:8px;background:var(--mx-color-surface-2);border-radius:var(--mx-radius-full,999px);overflow:hidden}
.cx-progress__bar{height:100%;width:50%;background:var(--mx-gradient-primary,var(--mx-color-primary));border-radius:inherit;transition:width var(--mx-transition-base,200ms)}
/* Spinner */
.cx-spinner{display:inline-flex;align-items:center;gap:8px;color:var(--mx-color-text-muted);font-family:var(--mx-font-sans);font-size:var(--mx-text-sm,13px)}
.cx-spinner::before{content:"";width:18px;height:18px;border:2.5px solid color-mix(in srgb,var(--mx-color-primary) 30%,transparent);border-top-color:var(--mx-color-primary);border-radius:50%;animation:cx-spin .7s linear infinite}
/* -- F3: gaps portados de los .razor.css reales -- */
/* ===================== Cx · GAPS (app-shell, nav, overlays, aliases) ===================== */
/* ToastHost (AwToastHost, familia Aw — ex CxToastHost) — host posicional + tonos del border-left + close */
.aw-toast-host{position:fixed;z-index:var(--mx-z-toast,1600);display:flex;flex-direction:column;gap:var(--mx-space-2,8px);pointer-events:none;padding:var(--mx-space-4,16px);max-width:100vw;box-sizing:border-box}
.aw-toast-host--top-r{top:0;right:0}.aw-toast-host--top-l{top:0;left:0}.aw-toast-host--bot-r{bottom:0;right:0}.aw-toast-host--bot-l{bottom:0;left:0}
.aw-toast{pointer-events:auto;border-left:4px solid;min-width:0;max-width:min(420px,calc(100vw - var(--mx-space-8,32px)))}
.aw-toast--info{border-left-color:var(--mx-color-info)}.aw-toast--success{border-left-color:var(--mx-color-success)}.aw-toast--warn{border-left-color:var(--mx-color-warn)}.aw-toast--danger{border-left-color:var(--mx-color-danger)}.aw-toast--primary{border-left-color:var(--mx-color-primary)}
.aw-toast--default,.aw-toast--ghost{border-left-color:var(--mx-color-border)}
.aw-toast__message{flex:1}
.aw-toast__close{background:none;border:none;cursor:pointer;font-size:var(--mx-text-lg,18px);line-height:1;color:var(--mx-color-text-muted);padding:var(--mx-space-1,4px) var(--mx-space-2,8px);border-radius:var(--mx-radius-sm,6px);transition:color var(--mx-transition-fast,120ms) var(--mx-ease-out,ease),background var(--mx-transition-fast,120ms) var(--mx-ease-out,ease)}
.aw-toast__close:hover{color:var(--mx-color-text);background:var(--mx-color-surface-hover,var(--mx-color-surface-2))}
.aw-toast__close:focus-visible{outline:none;box-shadow:var(--mx-shadow-focus)}
@media (max-width:520px){.aw-toast-host{left:0;right:0;max-width:none}.aw-toast{max-width:none}}
/* utilidad responsive: oculta el elemento en pantallas chicas (≤520px) */
@media (max-width:520px){.mx-sm-hide{display:none!important}}
/* Accordion (CxAccordion/CxAccordionItem) */
.cx-accordion{display:flex;flex-direction:column;border:1px solid var(--mx-color-border);border-radius:var(--mx-radius-md,8px);overflow:hidden}
.cx-accordion-item{border-bottom:1px solid var(--mx-color-border)}.cx-accordion-item:last-child{border-bottom:none}
.cx-accordion-item__head{width:100%;display:flex;align-items:center;gap:var(--mx-space-2,8px);padding:var(--mx-space-3,12px);background:none;border:none;cursor:pointer;text-align:left;font-family:var(--mx-font-sans);font-size:var(--mx-text-sm,13px);color:var(--mx-color-text);transition:background var(--mx-transition-fast,120ms) var(--mx-ease-out,ease)}
.cx-accordion-item__head:hover{background:var(--mx-color-surface-2)}
.cx-accordion-item__head:focus-visible{outline:none;box-shadow:var(--mx-shadow-focus);position:relative;z-index:1}
.cx-accordion-item__head:disabled{color:var(--mx-color-text-muted);cursor:not-allowed;opacity:.6}
.cx-accordion-item__arrow{color:var(--mx-color-text-muted);font-size:var(--mx-text-xs,11px);display:inline-flex;transition:transform var(--mx-transition-fast,120ms) var(--mx-ease-out,ease)}
.cx-accordion-item--open .cx-accordion-item__arrow{transform:rotate(90deg)}
.cx-accordion-item__title{flex:1;font-weight:500}
.cx-accordion-item__badge{font-size:var(--mx-text-xs,11px);padding:var(--mx-space-1,4px) var(--mx-space-2,8px);background:var(--mx-color-surface-2);border-radius:var(--mx-radius-full,999px)}
.cx-accordion-item--open .cx-accordion-item__head{background:var(--mx-color-surface-2);border-bottom:1px solid var(--mx-color-border)}
.cx-accordion-item__body{padding:var(--mx-space-3,12px)}
/* Autocomplete (CxAutocomplete) */
.cx-autocomplete{position:relative}
.cx-autocomplete__menu{position:absolute;top:100%;left:0;right:0;z-index:var(--mx-z-dropdown,1000);background:var(--mx-color-surface);border:var(--mx-border-width,1px) solid var(--mx-color-border);border-radius:var(--mx-radius-sm,6px);box-shadow:var(--mx-shadow-md);max-height:240px;overflow-y:auto;margin-top:var(--mx-space-px,1px)}
.cx-autocomplete__option{padding:var(--mx-space-1,4px) var(--mx-space-2,8px);cursor:pointer;font-size:var(--mx-text-sm,13px)}
.cx-autocomplete__option:hover{background:var(--mx-color-primary-bg,var(--mx-color-primary-light))}
.cx-autocomplete__empty{padding:var(--mx-space-1,4px) var(--mx-space-2,8px);color:var(--mx-color-text-muted);font-size:var(--mx-text-sm,13px)}
.cx-autocomplete__row{position:relative;display:block}
.cx-autocomplete__row .cx-input{width:100%;box-sizing:border-box}
.cx-autocomplete__spinner{position:absolute;right:var(--mx-space-2,8px);top:50%;transform:translateY(-50%);color:var(--mx-color-text-muted);pointer-events:none;display:inline-flex}
/* Select overlay (CxSelect modo Modal) — trigger + backdrop + panel + lista */
.cx-select-trigger{display:flex;align-items:center;text-align:left;padding-right:calc(var(--mx-space-2,8px) + 1.2em);cursor:pointer}
.cx-select-trigger__txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-select-trigger.is-empty .cx-select-trigger__txt{color:var(--mx-color-text-muted)}
.cx-selovl-backdrop{position:fixed;inset:0;z-index:var(--mx-z-modal-backdrop,1300);background:var(--mx-color-overlay,rgba(0,0,0,.45))}
.cx-selovl{position:fixed;z-index:var(--mx-z-modal,1400);top:50%;left:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 64px));display:flex;flex-direction:column;background:var(--mx-color-surface);border:var(--mx-border-width,1px) solid var(--mx-color-border);border-radius:var(--mx-radius-lg,10px);box-shadow:var(--mx-shadow-lg);overflow:hidden}
.cx-selovl__head{display:flex;align-items:center;justify-content:space-between;padding:var(--mx-space-3,12px) var(--mx-space-4,16px);border-bottom:1px solid var(--mx-color-border)}
.cx-selovl__head h3{margin:0;font-size:var(--mx-text-base,14px);font-weight:600}
.cx-selovl__x{background:none;border:none;cursor:pointer;font-size:22px;line-height:1;color:var(--mx-color-text-muted);padding:2px 6px;border-radius:var(--mx-radius-sm,6px)}
.cx-selovl__x:hover{background:var(--mx-color-surface-2);color:var(--mx-color-text)}
.cx-selovl__search{padding:var(--mx-space-2,8px) var(--mx-space-3,12px);border-bottom:1px solid var(--mx-color-border)}
.cx-selovl__list{flex:1;min-height:0;overflow-y:auto;padding:var(--mx-space-1,4px)}
.cx-selovl__group{padding:var(--mx-space-2,8px) var(--mx-space-2,8px) 4px;font-size:var(--mx-text-xs,11px);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mx-color-text-muted)}
.cx-selovl__opt{display:flex;align-items:center;gap:var(--mx-space-2,8px);width:100%;box-sizing:border-box;text-align:left;padding:var(--mx-space-2,8px);border:none;border-radius:var(--mx-radius-sm,6px);background:none;color:var(--mx-color-text);cursor:pointer;font-size:var(--mx-text-sm,13px);font-family:inherit}
.cx-selovl__opt:hover:not(:disabled),.cx-selovl__opt.is-on{background:var(--mx-color-primary-bg,var(--mx-color-surface-2))}
.cx-selovl__opt:disabled{opacity:.45;cursor:not-allowed}
.cx-selovl__check{flex:none;width:1.15em;height:1.15em;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--mx-color-border);border-radius:4px;font-size:.8em;color:var(--mx-color-primary-on);line-height:1}
.cx-selovl__opt.is-on .cx-selovl__check{background:var(--mx-color-primary);border-color:var(--mx-color-primary)}
.cx-selovl__ic{flex:none;display:inline-flex;color:var(--mx-color-text-muted)}
.cx-selovl__txt{flex:1;min-width:0;display:flex;flex-direction:column}
.cx-selovl__lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-selovl__desc{font-size:var(--mx-text-xs,11px);color:var(--mx-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-selovl__pick{flex:none;color:var(--mx-color-primary);display:inline-flex}
.cx-selovl__empty{padding:var(--mx-space-5,24px) var(--mx-space-3,12px);text-align:center;color:var(--mx-color-text-muted);font-size:var(--mx-text-sm,13px)}
.cx-selovl__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--mx-space-2,8px);padding:var(--mx-space-3,12px) var(--mx-space-4,16px);border-top:1px solid var(--mx-color-border);background:var(--mx-color-surface-2)}
.cx-selovl__count{font-size:var(--mx-text-sm,13px);color:var(--mx-color-text-muted)}
.cx-selovl__confirm{padding:6px var(--mx-space-4,16px);border:none;border-radius:var(--mx-radius-sm,6px);background:var(--mx-color-primary);color:var(--mx-color-primary-on);cursor:pointer;font-size:var(--mx-text-sm,13px);font-weight:600}
.cx-selovl__confirm:hover{filter:brightness(.95)}
/* StatusGrid + StatusField (CxStatusGrid/CxStatusField) */
.cx-status-grid{display:flex;flex-wrap:wrap;gap:var(--mx-space-3,12px) var(--mx-space-4,16px);align-items:center}
.cx-status-field{display:inline-flex;align-items:center;gap:var(--mx-space-2,8px);font-size:var(--mx-text-sm,13px)}
.cx-status-field.full{flex-basis:100%}
.cx-status-field-label{color:var(--mx-color-text-muted);font-weight:var(--mx-font-weight-medium,500)}
.cx-status-field-text{color:var(--mx-color-text)}
/* Badge (CxBadge) — 0 en la piel */
.cx-badge{display:inline-flex;align-items:center;gap:var(--mx-space-1,4px);border-radius:var(--mx-radius-sm,6px);font-weight:var(--mx-font-weight-medium,500);line-height:var(--mx-line-height-tight,1.2);padding:2px var(--mx-space-2,8px);font-size:var(--mx-text-xs,11px)}
.cx-badge--default{background:var(--mx-color-surface-2);color:var(--mx-color-text)}
.cx-badge--primary{background:var(--mx-color-primary-light);color:var(--mx-color-primary-text,var(--mx-color-primary-dark))}
.cx-badge--info{background:var(--mx-color-info-light);color:var(--mx-color-info-text,var(--mx-color-info))}
.cx-badge--success{background:var(--mx-color-success-light);color:var(--mx-color-success-text,var(--mx-color-success))}
.cx-badge--warn{background:var(--mx-color-warn-bg,var(--mx-color-warn-light));color:var(--mx-color-warn-text,var(--mx-color-warn))}
.cx-badge--danger{background:var(--mx-color-danger-light);color:var(--mx-color-danger-text,var(--mx-color-danger))}
.cx-badge--ghost{background:transparent;color:var(--mx-color-text-muted);box-shadow:inset 0 0 0 var(--mx-border-width,1px) var(--mx-color-border)}
.cx-badge--pill{border-radius:999px}
/* Brand (CxBrand) */
.cx-brand{display:inline-flex;align-items:center;gap:var(--mx-space-2,8px)}
.cx-brand--vertical{flex-direction:column;text-align:center}
.cx-brand--horizontal{flex-direction:row;text-align:left}
.cx-brand__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--mx-color-primary);flex-shrink:0}
.cx-brand__icon img,.cx-brand__icon svg{display:block;max-width:100%;height:auto}
.cx-brand__text{display:flex;flex-direction:column;gap:var(--mx-space-1,4px);min-width:0}
.cx-brand__title{font-weight:var(--mx-font-weight-bold,700);color:var(--mx-color-text);line-height:var(--mx-line-height-tight,1.2)}
.cx-brand__tagline{color:var(--mx-color-text-muted);line-height:var(--mx-line-height-normal,1.5)}
/* Icon + Text (CxIcon/CxText) */
.cx-icon{display:inline-block;vertical-align:middle;flex-shrink:0;color:inherit}
.cx-text{font-family:var(--mx-font-sans);color:var(--mx-color-text)}
.cx-text--body{font-size:var(--mx-text-base,14px);line-height:1.5}
.cx-text--caption{font-size:var(--mx-text-xs,11px);color:var(--mx-color-text-muted)}
.cx-text--label{font-size:var(--mx-text-sm,13px);font-weight:500}
.cx-text--code{font-family:var(--mx-font-mono);font-size:var(--mx-text-sm,13px);background:var(--mx-color-surface-2);padding:1px 6px;border-radius:var(--mx-radius-sm,6px)}
/* Tooltip bubble (CxTooltip emite __bubble, no el self-styled antiguo) */
.cx-tooltip{position:relative;display:inline-flex}
.cx-tooltip__bubble{position:absolute;z-index:var(--mx-z-tooltip,1700);background:var(--mx-color-text);color:var(--mx-color-surface);padding:var(--mx-space-1,4px) var(--mx-space-2,8px);border-radius:var(--mx-radius-sm,6px);font-size:var(--mx-text-xs,11px);white-space:nowrap;box-shadow:var(--mx-shadow-md);opacity:0;pointer-events:none;transition:opacity var(--mx-transition-fast,120ms) var(--mx-ease-out,ease)}
.cx-tooltip:hover .cx-tooltip__bubble,.cx-tooltip:focus-within .cx-tooltip__bubble{opacity:1}
.cx-tooltip--top .cx-tooltip__bubble{bottom:100%;left:50%;transform:translate(-50%,calc(-1 * var(--mx-space-1,4px)))}
.cx-tooltip--bottom .cx-tooltip__bubble{top:100%;left:50%;transform:translate(-50%,var(--mx-space-1,4px))}
.cx-tooltip--left .cx-tooltip__bubble{right:100%;top:50%;transform:translate(calc(-1 * var(--mx-space-1,4px)),-50%)}
.cx-tooltip--right .cx-tooltip__bubble{left:100%;top:50%;transform:translate(var(--mx-space-1,4px),-50%)}
/* Spinner variants (CxSpinner emite --ring/--dualring/--pulse/--dots/--bars; el const sólo tenía base) */
.cx-spinner-wrap{display:inline-flex;align-items:center;gap:var(--mx-space-2,8px)}
.cx-spinner{display:inline-block;line-height:0;--mx-spin-color:var(--mx-color-primary);--mx-spin-dur:700ms}
.cx-spinner--ring{width:1em;height:1em;border:.1em solid var(--mx-color-surface-2);border-top-color:var(--mx-spin-color);border-radius:50%;animation:cx-spin var(--mx-spin-dur) linear infinite}
.cx-spinner--dualring{width:1em;height:1em;border:.1em solid transparent;border-top-color:var(--mx-spin-color);border-bottom-color:var(--mx-spin-color);border-radius:50%;animation:cx-spin var(--mx-spin-dur) linear infinite}
.cx-spinner--pulse{width:1em;height:1em;border-radius:50%;background:var(--mx-spin-color);animation:cx-pulse var(--mx-spin-dur) ease-in-out infinite}
@keyframes cx-pulse{0%,100%{transform:scale(.5);opacity:.45}50%{transform:scale(1);opacity:1}}
.cx-spinner--dots{display:inline-flex;gap:.22em;align-items:center;height:1em}
.cx-spinner--dots i{width:.28em;height:.28em;border-radius:50%;background:var(--mx-spin-color);animation:cx-dot var(--mx-spin-dur) ease-in-out infinite}
.cx-spinner--dots i:nth-child(2){animation-delay:calc(var(--mx-spin-dur) * .2)}.cx-spinner--dots i:nth-child(3){animation-delay:calc(var(--mx-spin-dur) * .4)}
@keyframes cx-dot{0%,70%,100%{transform:scale(.5);opacity:.4}35%{transform:scale(1);opacity:1}}
.cx-spinner--bars{display:inline-flex;gap:.12em;align-items:center;height:1em}
.cx-spinner--bars i{width:.16em;height:1em;border-radius:.08em;background:var(--mx-spin-color);animation:cx-bar var(--mx-spin-dur) ease-in-out infinite}
.cx-spinner--bars i:nth-child(2){animation-delay:calc(var(--mx-spin-dur) * .15)}.cx-spinner--bars i:nth-child(3){animation-delay:calc(var(--mx-spin-dur) * .3)}.cx-spinner--bars i:nth-child(4){animation-delay:calc(var(--mx-spin-dur) * .45)}
@keyframes cx-bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.cx-spinner-label{font-size:var(--mx-text-sm,13px);color:var(--mx-color-text-muted)}
/* FormRow (CxFormRow) */
.cx-form-row{display:flex;align-items:flex-end;gap:var(--mx-space-3,12px);flex-wrap:wrap;margin-top:var(--mx-space-3,12px)}
.cx-form-row--stretch>:first-child{flex:1 1 280px}
/* SocialButton (CxSocialButton) */
.cx-social-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--mx-space-2,8px);padding:var(--mx-space-3,12px);font-family:var(--mx-font-sans);font-size:var(--mx-text-sm,13px);font-weight:500;color:var(--mx-color-text);background:var(--mx-color-surface);border:var(--mx-border-width,1px) solid var(--mx-color-border);border-radius:var(--mx-radius-md,8px);cursor:pointer;white-space:nowrap;transition:background var(--mx-transition-fast,120ms) var(--mx-ease-out,ease),border-color var(--mx-transition-fast,120ms) var(--mx-ease-out,ease)}
.cx-social-btn--full{width:100%}
.cx-social-btn__icon{display:inline-flex;align-items:center}
.cx-social-btn:hover:not(:disabled){background:var(--mx-color-surface-2)}
.cx-social-btn:active:not(:disabled){filter:brightness(.97)}
.cx-social-btn:focus-visible{outline:none;box-shadow:var(--mx-shadow-focus)}
.cx-social-btn:disabled{opacity:.5;cursor:not-allowed}
/* ── ALIAS de mismatch (el ESTILO ya existía con otro spelling; matcheo lo que el componente EMITE) ── */
/* Pagination: componente emite __btn/--active (la piel tenía __page + [aria-current]) */
.cx-pagination__btn{min-width:var(--mx-space-6,32px);height:var(--mx-space-6,32px);background:var(--mx-color-surface);border:var(--mx-border-width,1px) solid var(--mx-color-border);border-radius:var(--mx-radius-sm,6px);color:var(--mx-color-text);cursor:pointer;font-family:inherit;font-size:inherit;padding:0 var(--mx-space-2,8px);transition:background var(--mx-transition-fast,120ms) var(--mx-ease-out,ease),border-color var(--mx-transition-fast,120ms) var(--mx-ease-out,ease),box-shadow var(--mx-transition-fast,120ms) var(--mx-ease-out,ease)}
.cx-pagination__btn:hover:not(:disabled){background:var(--mx-color-surface-2)}
.cx-pagination__btn:focus-visible{outline:none;box-shadow:var(--mx-shadow-focus);position:relative;z-index:1}
.cx-pagination__btn:disabled{opacity:.5;cursor:not-allowed}
.cx-pagination__btn--active{background:var(--mx-color-primary);color:var(--mx-color-primary-on);border-color:var(--mx-color-primary)}
.cx-pagination__sep{padding:0 var(--mx-space-1,4px);color:var(--mx-color-text-muted)}
.cx-pagination__info{margin-left:var(--mx-space-3,12px);color:var(--mx-color-text-muted);font-variant-numeric:tabular-nums}
/* Card: componente emite --clickable (la piel tenía --interactive) + superficies + tonos */
.cx-card--clickable{cursor:pointer;transition:box-shadow var(--mx-transition-fast,120ms) var(--mx-ease-out,ease),border-color var(--mx-transition-fast,120ms) var(--mx-ease-out,ease),transform var(--mx-transition-fast,120ms) var(--mx-ease-out,ease)}
.cx-card--clickable:hover{border-color:var(--mx-color-border-strong,var(--mx-color-border));box-shadow:var(--mx-shadow-md);transform:translateY(-1px)}
.cx-card--clickable:active{transform:translateY(0);box-shadow:var(--mx-shadow-sm)}
.cx-card--clickable:focus-visible{outline:none;border-color:var(--mx-color-primary);box-shadow:var(--mx-shadow-focus)}
.cx-card--elevated{border-color:transparent;box-shadow:var(--mx-shadow-md)}
.cx-card--elevated.cx-card--clickable:hover{box-shadow:var(--mx-shadow-lg)}
.cx-card--outlined{box-shadow:none}
.cx-card--tone-primary{--tone:var(--mx-color-primary);--tone-tint:var(--mx-color-primary-light);--tone-text:var(--mx-color-primary-text,var(--mx-color-primary))}
.cx-card--tone-info{--tone:var(--mx-color-info);--tone-tint:var(--mx-color-info-light);--tone-text:var(--mx-color-info-text,var(--mx-color-info))}
.cx-card--tone-success{--tone:var(--mx-color-success);--tone-tint:var(--mx-color-success-light);--tone-text:var(--mx-color-success-text,var(--mx-color-success))}
.cx-card--tone-warn{--tone:var(--mx-color-warn);--tone-tint:var(--mx-color-warn-light);--tone-text:var(--mx-color-warn-text,var(--mx-color-warn))}
.cx-card--tone-danger{--tone:var(--mx-color-danger);--tone-tint:var(--mx-color-danger-light);--tone-text:var(--mx-color-danger-text,var(--mx-color-danger))}
.cx-card[class*="cx-card--tone-"]{background:var(--tone-tint);border-color:var(--tone);color:var(--tone-text)}
.cx-card[class*="cx-card--tone-"] .cx-card__header{background:color-mix(in srgb,var(--tone-tint),var(--tone) 18%);border-bottom-color:var(--tone);color:var(--tone-text)}
.cx-card[class*="cx-card--tone-"] .cx-card__footer{background:color-mix(in srgb,var(--tone-tint),var(--mx-color-surface) 55%);border-top-color:var(--tone);color:var(--tone-text)}
/* Divider: componente emite --labeled/__line/__label + --horizontal/--vertical (la piel tenía --label con ::before/::after) */
.cx-divider--horizontal{height:var(--mx-border-width,1px);width:100%;background:var(--mx-color-border);border:none}
.cx-divider--vertical{width:var(--mx-border-width,1px);height:100%;background:var(--mx-color-border);border:none;margin:0 var(--mx-space-2,8px);display:inline-block;vertical-align:middle}
.cx-divider--labeled{height:auto;display:flex;align-items:center;gap:var(--mx-space-3,12px);background:none}
.cx-divider__line{flex:1;height:0;border-top:var(--mx-border-width,1px) solid var(--mx-color-border)}
.cx-divider__label{color:var(--mx-color-text-muted);font-size:var(--mx-text-xs,11px);white-space:nowrap}
/* Modal: el componente real emite cx-modal-backdrop/__heading/__close; el kit usa cx-modal/__header */
.cx-modal-backdrop{position:fixed;inset:0;z-index:var(--mx-z-modal-backdrop,1300);background:var(--mx-color-overlay,rgba(0,0,0,.5))}
.cx-modal__heading{display:flex;align-items:center;justify-content:space-between;padding:var(--mx-space-3,12px) var(--mx-space-4,16px);border-bottom:var(--mx-border-width,1px) solid var(--mx-color-border)}
.cx-modal__heading h2{margin:0;font-size:var(--mx-text-lg,18px);font-weight:var(--mx-font-weight-semibold,600)}
.cx-modal__close{background:none;border:none;cursor:pointer;font-size:var(--mx-text-2xl,22px);line-height:1;color:var(--mx-color-text-muted);padding:var(--mx-space-1,4px) var(--mx-space-2,8px);border-radius:var(--mx-radius-sm,6px);transition:color var(--mx-transition-fast,120ms) var(--mx-ease-out,ease),background var(--mx-transition-fast,120ms) var(--mx-ease-out,ease)}
.cx-modal__close:hover{color:var(--mx-color-text);background:var(--mx-color-surface-hover,var(--mx-color-surface-2))}
.cx-modal__close:focus-visible{outline:none;box-shadow:var(--mx-shadow-focus)}
/* StatusPill: componente emite --active/--pending/--inactive/--error con ::before (la piel tenía tonos por rol) */
.cx-pill--active{background:var(--mx-color-success-light);color:var(--mx-color-success-text,var(--mx-color-success))}.cx-pill--active::before{background:var(--mx-color-success)}
.cx-pill--pending{background:var(--mx-color-warn-bg,var(--mx-color-warn-light));color:var(--mx-color-warn-text,var(--mx-color-warn))}.cx-pill--pending::before{background:var(--mx-color-warn)}
.cx-pill--inactive{background:var(--mx-color-surface-2);color:var(--mx-color-text-muted)}.cx-pill--inactive::before{background:var(--mx-color-text-muted)}
.cx-pill--error{background:var(--mx-color-danger-light);color:var(--mx-color-danger-text,var(--mx-color-danger))}.cx-pill--error::before{background:var(--mx-color-danger)}
/* Progress: componente CxProgressBar emite la barra como .cx-progress (track, height:8px) + __bar--{tono}; la piel tenía la forma con __track/__bar genérico */
.cx-progress{height:8px;background:var(--mx-color-surface-2);border-radius:999px;overflow:hidden;position:relative}
.cx-progress__bar{height:100%;border-radius:999px;transition:width var(--mx-transition-base,200ms) var(--mx-ease-out,ease)}
.cx-progress__bar--default{background:var(--mx-color-text-muted)}.cx-progress__bar--primary{background:var(--mx-color-primary)}.cx-progress__bar--info{background:var(--mx-color-info)}.cx-progress__bar--success{background:var(--mx-color-success)}.cx-progress__bar--warn{background:var(--mx-color-warn)}.cx-progress__bar--danger{background:var(--mx-color-danger)}.cx-progress__bar--ghost{background:var(--mx-color-text-muted)}
.cx-progress--indet .cx-progress__bar{animation:cx-progress-indet 1.4s ease-in-out infinite;position:absolute}
@keyframes cx-progress-indet{0%{left:-30%}100%{left:100%}}
.cx-progress__label{font-size:var(--mx-text-xs,11px);color:var(--mx-color-text-muted);text-align:right;margin-top:2px;font-variant-numeric:tabular-nums}
/* Avatar: aliases de talla faltantes + bg determinístico por hue (la piel tenía sm/lg/neutral) */
.cx-avatar{border-radius:var(--mx-radius-full,50%);color:var(--mx-color-text-inverse,#fff);--cx-avatar-l:48%;background:var(--cx-avatar-bg,hsl(var(--cx-avatar-hue,0),55%,var(--cx-avatar-l)))}
.cx-avatar img{width:100%;height:100%;object-fit:cover}
.cx-avatar__initials{line-height:1}
.cx-avatar--xs{width:20px;height:20px;font-size:9px}.cx-avatar--md{width:36px;height:36px;font-size:13px}.cx-avatar--xl{width:64px;height:64px;font-size:20px}
:root[data-mode="dark"] .cx-avatar{--cx-avatar-l:42%}
/* ===================== Cf · formularios ===================== */
.cf-field{display:flex;flex-direction:column;gap:6px;font-family:var(--mx-font-sans)}
.cf-field__label{font-size:var(--mx-text-sm,13px);font-weight:var(--mx-font-weight-medium,500);color:var(--mx-color-text-muted)}
.cf-field__help{font-size:var(--mx-text-xs,11px);color:var(--mx-color-text-subtle)}
.cf-field__error{font-size:var(--mx-text-xs,11px);color:var(--mx-color-danger)}
.cf-textarea{font-family:var(--mx-font-sans);font-size:var(--mx-text-base,14px);line-height:1.4;padding:9px 12px;border-radius:var(--mx-radius-md,6px);border:1px solid var(--mx-color-border);background:var(--mx-color-surface);color:var(--mx-color-text);outline:none;resize:vertical;min-height:80px}
.cf-textarea:focus{border-color:var(--mx-color-primary);box-shadow:var(--mx-shadow-focus,0 0 0 3px rgba(99,102,241,.35))}
.cf-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--mx-font-sans);font-size:var(--mx-text-sm,13px);color:var(--mx-color-text)}
.cf-checkbox__box{width:18px;height:18px;border-radius:var(--mx-radius-sm,4px);border:1.5px solid var(--mx-color-border-strong,var(--mx-color-border));display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.cf-checkbox__box svg{width:12px;height:12px;opacity:0}
.cf-checkbox[aria-checked=true] .cf-checkbox__box{background:var(--mx-color-primary);border-color:var(--mx-color-primary)}
.cf-checkbox[aria-checked=true] .cf-checkbox__box svg{opacity:1}
.cf-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--mx-font-sans);font-size:var(--mx-text-sm,13px)}
.cf-radio__dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--mx-color-border-strong,var(--mx-color-border));display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cf-radio[aria-checked=true] .cf-radio__dot{border-color:var(--mx-color-primary)}
.cf-radio[aria-checked=true] .cf-radio__dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--mx-color-primary)}
.cf-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--mx-font-sans);font-size:var(--mx-text-sm,13px)}
.cf-switch__track{width:38px;height:22px;border-radius:999px;background:var(--mx-color-surface-active,var(--mx-color-surface-2));position:relative;transition:background var(--mx-transition-fast,120ms);flex:0 0 auto}
.cf-switch__track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--mx-shadow-sm);transition:transform var(--mx-transition-fast,120ms)}
.cf-switch[aria-checked=true] .cf-switch__track{background:var(--mx-color-primary)}
.cf-switch[aria-checked=true] .cf-switch__track::after{transform:translateX(16px)}
.cf-slider{display:flex;flex-direction:column;gap:8px;font-family:var(--mx-font-sans)}
.cf-slider__track{height:6px;border-radius:999px;background:var(--mx-color-surface-2);position:relative}
.cf-slider__fill{height:100%;border-radius:999px;background:var(--mx-color-primary);width:50%}
.cf-slider__thumb{position:absolute;top:50%;left:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--mx-color-primary);box-shadow:var(--mx-shadow-sm);transform:translate(-50%,-50%)}
.cf-form{display:flex;flex-direction:column;gap:14px;font-family:var(--mx-font-sans)}
/* -- F3: gaps portados de los .razor.css reales -- */
/* ===================== Cf · GAPS (piel derivada incompleta) ===================== */
/* cf-checkbox — la piel tiene .cf-checkbox/__box (aria-checked); el componente emite .cf-check__row/__box/__label con nativo */
.cf-check{display:flex;flex-direction:column;gap:var(--mx-space-1);font-size:var(--mx-text-sm)}
.cf-check__row{display:flex;align-items:center;gap:var(--mx-space-2);cursor:pointer;color:var(--mx-color-text);line-height:1.4}
.cf-check__box{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:16px;height:16px;margin:0;box-sizing:border-box;border:var(--mx-border-width,1px) solid var(--mx-color-border);border-radius:var(--mx-radius-sm);background:var(--mx-color-surface);display:grid;place-content:center;cursor:pointer;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease}
.cf-check__box::after{content:"";width:9px;height:9px;transform:scale(0);transition:transform .12s ease;background-color:var(--mx-color-primary-on,var(--mx-color-surface));clip-path:polygon(14% 44%,0 65%,40% 100%,100% 16%,82% 0,38% 70%)}
.cf-check__box:checked{border-color:var(--mx-color-primary);background:var(--mx-color-primary)}
.cf-check__box:checked::after{transform:scale(1)}
.cf-check__box:indeterminate{border-color:var(--mx-color-primary);background:var(--mx-color-primary)}
.cf-check__box:indeterminate::after{transform:scale(1);clip-path:none;width:9px;height:2px;border-radius:1px}
.cf-check__box:hover:not(:disabled):not(:checked):not(:indeterminate){border-color:var(--mx-color-text-muted)}
.cf-check__box:focus-visible{outline:none;box-shadow:var(--mx-shadow-focus)}
.cf-check__box:disabled{cursor:not-allowed;opacity:.55}
.cf-check__row:has(.cf-check__box:disabled){cursor:not-allowed;color:var(--mx-color-text-muted)}
.cf-check__label{font-size:var(--mx-text-sm);color:inherit}
/* cf-checkgroup — lista de checkboxes nativos (no estaba en la piel) */
.cf-checkgroup__list{display:flex;flex-direction:column;gap:var(--mx-space-1)}
.cf-checkgroup__option{display:flex;align-items:center;gap:var(--mx-space-2);font-size:var(--mx-text-sm);color:var(--mx-color-text);cursor:pointer;user-select:none}
.cf-checkgroup__box{flex:none;margin:0;accent-color:var(--mx-color-primary);cursor:pointer}
.cf-checkgroup__box:focus-visible{outline:none;border-radius:var(--mx-radius-sm);box-shadow:var(--mx-shadow-focus)}
.cf-checkgroup__box:disabled,.cf-checkgroup__box:disabled + .cf-checkgroup__text{cursor:not-allowed;color:var(--mx-color-text-muted)}
.cf-checkgroup__option:has(.cf-checkgroup__box:disabled){cursor:not-allowed}
/* cf-radio (grupo) — la piel tiene .cf-radio/__dot inline; el componente emite .cf-radio__options/__option/__input/__label con nativo */
.cf-radio__options{display:flex;flex-direction:column;gap:var(--mx-space-1)}
.cf-radio__option{display:flex;align-items:center;gap:var(--mx-space-2);cursor:pointer;font-size:var(--mx-text-sm);color:var(--mx-color-text);line-height:1.3}
.cf-radio__option--disabled{cursor:not-allowed;opacity:.55}
.cf-radio__input{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;flex:0 0 auto;width:16px;height:16px;border:var(--mx-border-width,1px) solid var(--mx-color-border-strong);border-radius:var(--mx-radius-full);background:var(--mx-color-surface);display:grid;place-content:center;cursor:inherit;transition:border-color .12s ease,box-shadow .12s ease}
.cf-radio__input::before{content:"";width:8px;height:8px;border-radius:var(--mx-radius-full);background:var(--mx-color-primary-on);transform:scale(0);transition:transform .12s ease}
.cf-radio__input:checked{border-color:var(--mx-color-primary);background:var(--mx-color-primary)}
.cf-radio__input:checked::before{transform:scale(1)}
.cf-radio__input:focus-visible{outline:none;box-shadow:0 0 0 2px var(--mx-color-primary-light);border-color:var(--mx-color-primary)}
.cf-radio__input:disabled{cursor:not-allowed}
.cf-radio__label{user-select:none}
/* cf-switch (estado) — la piel usa [aria-checked]+__track::after; el componente emite .cf-switch--on/.cf-switch__thumb. ALIAS portado del .razor.css */
.cf-switch__track{--cf-switch-w:36px;--cf-switch-h:20px;--cf-switch-pad:2px;position:relative;flex:0 0 auto;display:inline-block;inline-size:var(--cf-switch-w);block-size:var(--cf-switch-h);border-radius:var(--mx-radius-full);background:var(--mx-color-border-strong);border:var(--mx-border-width,1px) solid var(--mx-color-border-strong);transition:background-color var(--mx-transition-base) ease}
.cf-switch__thumb{position:absolute;inset-block-start:var(--cf-switch-pad);inset-inline-start:var(--cf-switch-pad);inline-size:calc(var(--cf-switch-h) - (var(--cf-switch-pad) * 2));block-size:calc(var(--cf-switch-h) - (var(--cf-switch-pad) * 2));border-radius:var(--mx-radius-full);background:var(--mx-color-surface);box-shadow:var(--mx-shadow-sm);transition:transform var(--mx-transition-base) ease}
.cf-switch--on .cf-switch__track{background:var(--mx-color-primary);border-color:var(--mx-color-primary)}
.cf-switch--on .cf-switch__thumb{transform:translateX(calc(var(--cf-switch-w) - var(--cf-switch-h)));background:var(--mx-color-primary-on)}
.cf-switch:focus-visible .cf-switch__track{box-shadow:var(--mx-shadow-focus)}
/* cf-otp — input tipo PIN (sobre .cx-input base) */
.cf-otp__input{font-family:var(--mx-font-mono);text-align:center;font-size:var(--mx-text-xl);letter-spacing:.8em;text-indent:.8em;font-weight:600}
/* cf-password — medidor de fuerza (4 segmentos + etiqueta), recolor por nivel via --cf-pwd-color */
.cf-password__meter{display:flex;align-items:center;gap:var(--mx-space-2);margin-top:var(--mx-space-2)}
.cf-password__bar{display:flex;flex:1 1 auto;gap:var(--mx-space-1)}
.cf-password__seg{flex:1 1 0;height:var(--mx-space-1);border-radius:var(--mx-radius-full);background:var(--mx-color-border);transition:background-color .15s ease}
.cf-password__seg--on{background:var(--cf-pwd-color,var(--mx-color-border-strong))}
.cf-password__label{flex:0 0 auto;font-size:var(--mx-text-xs);font-weight:var(--mx-font-weight-medium);color:var(--cf-pwd-color,var(--mx-color-text-muted));white-space:nowrap}
.cf-password__meter--weak{--cf-pwd-color:var(--mx-color-danger)}
.cf-password__meter--fair{--cf-pwd-color:var(--mx-color-warn)}
.cf-password__meter--good{--cf-pwd-color:var(--mx-color-info)}
.cf-password__meter--strong{--cf-pwd-color:var(--mx-color-success)}
/* cf-taginput — caja editable que imita .cx-input pero envuelve chips + input que crece */
.cf-taginput__box{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-space-1);width:100%;box-sizing:border-box;min-height:var(--mx-space-7);padding:var(--mx-space-1) var(--mx-space-2);border:var(--mx-border-width,1px) solid var(--mx-color-border);border-radius:var(--mx-radius-sm);background:var(--mx-color-surface);cursor:text;transition:border-color .12s ease,box-shadow .12s ease}
.cf-taginput__box:focus-within{border-color:var(--mx-color-primary);box-shadow:var(--mx-shadow-focus)}
.cf-taginput__box--error{border-color:var(--mx-color-danger)}
.cf-taginput__box--error:focus-within{border-color:var(--mx-color-danger);box-shadow:0 0 0 3px var(--mx-color-danger-light)}
.cf-taginput__input{flex:1 1 6ch;min-width:6ch;border:none;outline:none;background:transparent;color:var(--mx-color-text);font-family:var(--mx-font-sans);font-size:var(--mx-text-sm);line-height:1.5;padding:var(--mx-space-1) 0}
.cf-taginput__input::placeholder{color:var(--mx-color-text-muted)}
.cf-taginput__input:disabled{cursor:not-allowed;color:var(--mx-color-text-muted)}
/* cf-repeater — pila de filas (campos crecen + botón quitar al tope) + botón agregar al pie */
.cf-repeater{display:flex;flex-direction:column;gap:var(--mx-space-2)}
.cf-repeater__row{display:flex;align-items:flex-start;gap:var(--mx-space-2)}
.cf-repeater__fields{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--mx-space-2)}
.cf-repeater__remove{flex:0 0 auto;padding-top:var(--mx-space-1)}
.cf-repeater__add{display:flex}
/* cf-submitbar — acciones a la derecha; variante sticky al pie */
.cf-submitbar{display:flex;align-items:center;justify-content:flex-end;gap:var(--mx-space-2);padding-top:var(--mx-space-2)}
.cf-submitbar--sticky{position:sticky;bottom:0;background:var(--mx-color-surface);border-top:var(--mx-border-width,1px) solid var(--mx-color-border);padding:var(--mx-space-3) var(--mx-space-1);margin-top:var(--mx-space-2)}
/* cf-fieldgroup — fieldset reseteado como columna + leyenda */
.cf-fieldgroup{display:flex;flex-direction:column;gap:var(--mx-space-3);margin:0;padding:0;border:0;min-inline-size:0}
.cf-fieldgroup__legend{padding:0;margin:0 0 var(--mx-space-1);font-size:var(--mx-text-sm);font-weight:var(--mx-font-weight-semibold);line-height:1.3;color:var(--mx-color-text)}
.cf-fieldgroup:disabled{opacity:.6}
/* cf-date-range — fila Desde/Hasta + separador */
.cf-date-range__row{display:flex;align-items:center;gap:var(--mx-space-2);flex-wrap:wrap}
.cf-date-range__sep{flex:0 0 auto;color:var(--mx-color-text-muted);font-size:var(--mx-text-sm);line-height:1;user-select:none}
/* cf-code — textarea monoespaciada con scroll horizontal */
.cf-code{font-family:var(--mx-font-mono);white-space:pre;overflow:auto;resize:vertical;line-height:1.45;tab-size:4}
/* cf-vsum — título + lista de errores (dentro de un CxNotice danger) */
.cf-vsum__title{margin:0 0 var(--mx-space-1);font-weight:var(--mx-font-weight-semibold)}
.cf-vsum__list{margin:0;padding-left:var(--mx-space-4);display:flex;flex-direction:column;gap:var(--mx-space-1)}
/* ===================== Cy · compuestos ===================== */
/* La celda del MetricGrid = CyStatCard real (.cx-card.cy-stat > .cx-card__body > .cy-stat__top/__value/__label).
El mockup (kit.pdfz) emite esa MISMA estructura → reusa la CSS de .cy-stat/.cx-card (no clases __cell propias). */
.cy-statcard{--_c:var(--mx-color-success);display:flex;gap:12px;align-items:center;background:var(--mx-color-surface);border:1px solid var(--mx-color-border);border-radius:var(--mx-radius-lg,10px);padding:16px;font-family:var(--mx-font-sans)}
.cy-statcard--primary{--_c:var(--mx-color-primary)}.cy-statcard--success{--_c:var(--mx-color-success)}.cy-statcard--warn{--_c:var(--mx-color-warn)}.cy-statcard--danger{--_c:var(--mx-color-danger)}
.cy-statcard--fill{background:var(--mx-gradient-primary);color:#fff;border-color:transparent}
.cy-statcard__icon{width:42px;height:42px;border-radius:var(--mx-radius-md,8px);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--_c) 16%,transparent);color:var(--_c);flex:0 0 auto}
.cy-statcard__icon svg{width:22px;height:22px}
.cy-statcard__value{font-size:var(--mx-text-xl,20px);font-weight:800;line-height:1.1}
.cy-statcard__label{font-size:var(--mx-text-xs,11px);color:var(--mx-color-text-muted)}
.cy-statcard__delta{font-size:var(--mx-text-xs,11px);font-weight:700;color:var(--mx-color-success)}
/* ── Homologado a prod ── Badge (CxBadge: cx-badge + --tono + --sm/md/lg + --pill) */
.cx-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--mx-font-sans);font-size:var(--mx-text-xs,11px);font-weight:600;line-height:1;padding:3px 8px;border-radius:var(--mx-radius-md,6px);background:var(--mx-color-surface-alt,var(--mx-color-surface));color:var(--mx-color-text);border:1px solid transparent}
.cx-badge--pill{border-radius:999px}
.cx-badge--sm{font-size:var(--mx-text-xs,11px);padding:2px 7px}
.cx-badge--lg{font-size:var(--mx-text-sm,13px);padding:4px 10px}
.cx-badge--primary{background:var(--mx-color-primary-light);color:var(--mx-color-primary-strong)}
.cx-badge--info{background:var(--mx-color-info-light);color:var(--mx-color-info-strong)}
.cx-badge--success{background:var(--mx-color-success-light);color:var(--mx-color-success-strong)}
.cx-badge--warn{background:var(--mx-color-warn-light);color:var(--mx-color-warn-strong)}
.cx-badge--danger{background:var(--mx-color-danger-light);color:var(--mx-color-danger-strong)}
.cx-badge--ghost{background:transparent;border-color:var(--mx-color-border);color:var(--mx-color-text-muted)}
/* Card tono (acento por tono — CxCard Tone / CyStatCard) */
.cx-card--tone-primary{border-left:3px solid var(--mx-color-primary)}
.cx-card--tone-secondary{border-left:3px solid var(--mx-color-secondary)}
.cx-card--tone-info{border-left:3px solid var(--mx-color-info)}
.cx-card--tone-success{border-left:3px solid var(--mx-color-success)}
.cx-card--tone-warn{border-left:3px solid var(--mx-color-warn)}
.cx-card--tone-danger{border-left:3px solid var(--mx-color-danger)}
/* StatCard (CyStatCard prod = .cy-stat dentro de un .cx-card) */
.cy-stat{display:flex;flex-direction:column;gap:6px;padding:16px}
.cy-stat__top{display:flex;align-items:center;gap:8px;min-height:4px}
.cy-stat__icon{width:38px;height:38px;border-radius:var(--mx-radius-md,8px);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mx-color-primary) 14%,transparent);color:var(--mx-color-primary)}
.cy-stat__icon svg{width:20px;height:20px}
.cy-stat__delta{margin-left:auto}
.cy-stat__value{font-family:var(--mx-font-display,var(--mx-font-sans));font-size:var(--mx-text-xl,22px);font-weight:800;line-height:1.1}
.cy-stat__label{font-size:var(--mx-text-xs,11px);color:var(--mx-color-text-muted)}
/* CyDataTable · card autocontenida (chrome + título) + tabla base cx-table + mejoras th/sort/cell/foot/loading */
.cy-datatable{background:var(--mx-color-surface);border:1px solid var(--mx-color-border);border-radius:var(--mx-radius-lg,10px);overflow:hidden;font-family:var(--mx-font-sans)}
.cy-datatable__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--mx-color-border)}
.cy-datatable__title{font-weight:700}
.cy-datatable__th{display:inline-flex;align-items:center;gap:var(--mx-space-1,4px)}
.cy-datatable__th--sortable{cursor:pointer;user-select:none}
.cy-datatable__sort{color:var(--mx-color-primary);font-size:var(--mx-text-xs,11px)}
.cy-datatable__cell--center{text-align:center}
.cy-datatable__cell--end{text-align:right}
.cy-datatable__foot{display:flex;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--mx-color-border)}
.cy-datatable__loading{display:flex;align-items:center;justify-content:center;gap:var(--mx-space-2,8px);padding:var(--mx-space-4,16px);color:var(--mx-color-text-muted)}
.cy-datatable__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cx-table{width:100%;border-collapse:collapse;font-size:var(--mx-text-sm,13px)}
.cx-table th{text-align:left;font-weight:700;background:var(--mx-color-surface-2);color:var(--mx-color-text);padding:9px 16px;border-bottom:1px solid var(--mx-color-border)}
.cx-table td{padding:9px 16px;border-bottom:1px solid var(--mx-color-border);color:var(--mx-color-text)}
.cx-table tr:last-child td{border-bottom:0}
.cx-table tbody tr:hover td{background:var(--mx-color-surface-hover,var(--mx-color-surface-2))}
/* CyKeyValue · card autocontenida (chrome + título) · pares clave→valor read-only, variantes inline/stacked */
.cy-keyvalue{background:var(--mx-color-surface);border:1px solid var(--mx-color-border);border-radius:var(--mx-radius-lg,10px);padding:16px;font-family:var(--mx-font-sans);font-size:var(--mx-text-sm,13px);color:var(--mx-color-text)}
.cy-keyvalue__row{padding-block:var(--mx-space-1)}
.cy-keyvalue__row + .cy-keyvalue__row{border-top:1px solid var(--mx-color-border)}
.cy-keyvalue__key{color:var(--mx-color-text-muted);font-weight:var(--mx-font-weight-medium);line-height:var(--mx-line-height-tight,1.25)}
.cy-keyvalue__val{margin:0;color:var(--mx-color-text);line-height:var(--mx-line-height-normal,1.5);min-width:0;word-break:break-word}
.cy-keyvalue--inline .cy-keyvalue__row{display:grid;grid-template-columns:minmax(0,max-content) 1fr;column-gap:var(--mx-space-4);align-items:baseline}
.cy-keyvalue--stacked .cy-keyvalue__key{display:block;font-size:var(--mx-text-xs,11px);margin-bottom:4px}
.cy-keyvalue--stacked .cy-keyvalue__row{padding-block:8px}
.cy-toolbar{display:flex;align-items:center;gap:var(--mx-space-3,12px);padding:var(--mx-space-2,8px) 0;font-family:var(--mx-font-sans)}
.cy-toolbar__zone{display:flex;align-items:center;gap:var(--mx-space-2,8px)}
.cy-toolbar__start{flex:1 1 auto;min-width:0}
.cy-toolbar__center{flex:0 1 auto}
.cy-toolbar__end{flex:0 0 auto;margin-left:auto}
.cy-toolbar__title{font-size:var(--mx-text-lg,18px);font-weight:var(--mx-font-weight-semibold,600);color:var(--mx-color-text)}
.cy-list{background:var(--mx-color-surface);border:1px solid var(--mx-color-border);border-radius:var(--mx-radius-lg,10px);overflow:hidden;font-family:var(--mx-font-sans)}
.cy-list__title{padding:12px 16px;font-weight:700;border-bottom:1px solid var(--mx-color-border)}
.cy-list__item{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--mx-color-border);font-size:var(--mx-text-sm,13px)}
.cy-list__item:last-child{border-bottom:0}
.cy-list__item:hover{background:var(--mx-color-surface-hover,var(--mx-color-surface-2))}
.cy-timeline{display:flex;flex-direction:column;font-family:var(--mx-font-sans)}
.cy-timeline__event{display:flex;gap:12px;padding-bottom:16px;position:relative}
.cy-timeline__event::before{content:"";position:absolute;left:7px;top:18px;bottom:0;width:2px;background:var(--mx-color-border)}
.cy-timeline__event:last-child::before{display:none}
.cy-timeline__dot{width:16px;height:16px;border-radius:50%;border:3px solid var(--mx-color-primary);background:var(--mx-color-surface);flex:0 0 auto;z-index:1}
.cy-timeline__body{font-size:var(--mx-text-sm,13px)}
.cy-timeline__time{font-size:var(--mx-text-xs,11px);color:var(--mx-color-text-subtle)}
.cy-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:40px 20px;color:var(--mx-color-text-muted);font-family:var(--mx-font-sans)}
.cy-empty__icon{width:48px;height:48px;color:var(--mx-color-text-subtle)}
.cy-empty__title{font-weight:700;color:var(--mx-color-text);font-size:var(--mx-text-lg,18px)}
.cy-empty__text{max-width:280px;font-size:var(--mx-text-sm,13px)}
.cy-tree{font-family:var(--mx-font-sans);font-size:var(--mx-text-sm,13px)}
.cy-tree__node{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;cursor:pointer;color:var(--mx-color-text)}
.cy-tree__node:hover{background:var(--mx-color-surface-2)}
.cy-tree__children{padding-left:18px;border-left:1px solid var(--mx-color-border);margin-left:11px}
.cy-kanban{display:flex;gap:14px;overflow-x:auto;font-family:var(--mx-font-sans)}
.cy-kanban__col{flex:0 0 240px;background:var(--mx-color-surface-2);border-radius:var(--mx-radius-lg,10px);padding:10px}
.cy-kanban__colhead{font-weight:700;font-size:var(--mx-text-sm,13px);padding:4px 6px 10px;color:var(--mx-color-text-muted)}
.cy-kanban__card{background:var(--mx-color-surface);border:1px solid var(--mx-color-border);border-radius:var(--mx-radius-md,8px);padding:10px;margin-bottom:8px;box-shadow:var(--mx-shadow-sm);font-size:var(--mx-text-sm,13px)}
.cy-menu{background:var(--mx-color-surface);border:1px solid var(--mx-color-border);border-radius:var(--mx-radius-md,8px);padding:6px;box-shadow:var(--mx-shadow-lg);min-width:180px;font-family:var(--mx-font-sans)}
.cy-menu__title{font-size:var(--mx-text-xs,11px);text-transform:uppercase;letter-spacing:.05em;color:var(--mx-color-text-subtle);padding:6px 10px;font-weight:700}
.cy-menu__item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--mx-color-text);font-size:var(--mx-text-sm,13px)}
.cy-menu__item:hover{background:var(--mx-color-surface-2)}
.cy-stepper{display:flex;align-items:flex-start;font-family:var(--mx-font-sans)}
.cy-stepper__step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;padding:0 6px}
.cy-stepper__num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--mx-text-sm,13px);background:var(--mx-color-surface-2);color:var(--mx-color-text-muted);border:2px solid var(--mx-color-border)}
.cy-stepper__label{font-size:var(--mx-text-xs,11px);color:var(--mx-color-text-muted)}
.cy-stepper__line{flex:1 1 auto;height:2px;background:var(--mx-color-border);margin-top:15px}
.cy-stepper__step[data-state=done] .cy-stepper__num{background:var(--mx-color-success);border-color:var(--mx-color-success);color:#fff}
.cy-stepper__step[data-state=active] .cy-stepper__num{background:var(--mx-color-primary);border-color:var(--mx-color-primary);color:var(--mx-color-on-primary,#fff)}
.cy-stepper__step[data-state=active] .cy-stepper__label{color:var(--mx-color-primary);font-weight:700}
.cy-bulkbar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--mx-color-primary);color:var(--mx-color-on-primary,#fff);border-radius:var(--mx-radius-md,8px);font-family:var(--mx-font-sans)}
.cy-bulkbar__count{font-weight:700}.cy-bulkbar__spacer{flex:1}
/* CySplitPane · contenedor flex (paneles iguales por defecto, separador entre ellos) + orientaciones/divisor/variantes de panel */
.cy-splitpane{display:flex;min-width:0;min-height:0;border:1px solid var(--mx-color-border);border-radius:var(--mx-radius-lg,10px);overflow:hidden;font-family:var(--mx-font-sans)}
.cy-splitpane--horizontal{flex-direction:row}
.cy-splitpane--vertical{flex-direction:column}
.cy-splitpane__pane{flex:1 1 0;min-width:0;min-height:0;padding:16px;overflow:auto;color:var(--mx-color-text)}
.cy-splitpane__pane--start{flex:0 0 auto}
.cy-splitpane__pane--end{flex:1 1 0}
.cy-splitpane__pane+.cy-splitpane__pane{border-left:1px solid var(--mx-color-border)}
.cy-splitpane--vertical .cy-splitpane__pane+.cy-splitpane__pane{border-left:0;border-top:1px solid var(--mx-color-border)}
.cy-splitpane__divider{flex:none;background:var(--mx-color-border)}
.cy-splitpane--horizontal .cy-splitpane__divider{width:var(--mx-border-width,1px);align-self:stretch}
.cy-splitpane--vertical .cy-splitpane__divider{height:var(--mx-border-width,1px)}
/* Auto · APILADO INTRÍNSECO (opt-in, espejo de CySplitPane.razor.css — el porqué completo está allá).
ESTE BLOQUE NO ES OPCIONAL: `.cy-splitpane__pane--start{flex:0 0 auto}` de acá arriba vive en
@layer skin, y skin le gana a lib sin importar especificidad. Con el bloque sólo en el .razor.css,
en el portal —que recibe esta hoja entera— no pasaría absolutamente nada, y parecería del código. */
.cy-splitpane--auto{--cy-split-gutter:var(--mx-border-width,1px);flex-direction:row;flex-wrap:wrap;gap:var(--cy-split-gutter);overflow-x:hidden;overflow-y:auto}
.cy-splitpane--auto>.cy-splitpane__pane{box-sizing:border-box;height:100%}
.cy-splitpane--auto>.cy-splitpane__pane--start{flex:var(--cy-split-start,50) 1 0;min-width:min(var(--cy-split-start-min,260px),100%);box-shadow:var(--cy-split-gutter) 0 0 0 var(--mx-color-border),0 var(--cy-split-gutter) 0 0 var(--mx-color-border)}
.cy-splitpane--auto>.cy-splitpane__pane--end{flex:var(--cy-split-end,50) 1 0;min-width:min(var(--cy-split-end-min,320px),100%)}
.cy-splitpane--auto>.cy-splitpane__divider{display:none}
.cy-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px;color:var(--mx-color-text-muted);font-family:var(--mx-font-sans)}
.cy-loading::before{content:"";width:28px;height:28px;border:3px solid color-mix(in srgb,var(--mx-color-primary) 30%,transparent);border-top-color:var(--mx-color-primary);border-radius:50%;animation:cx-spin .7s linear infinite}
/* -- F3: gaps portados de los .razor.css reales -- */
/* ===== Cy · gaps de compuestos (spelling BEM nuevo de mxapp-ui/cy) ===== */
/* CyMetricGrid · root real = .cy-metric-grid (homologado: mockup y componente real comparten la misma clase) */
.cy-metric-grid{display:grid;grid-template-columns:repeat(var(--cy-metricgrid-cols,4),minmax(0,1fr));gap:var(--mx-space-4)}
@media (max-width:1024px){.cy-metric-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
/* CyCommandPalette · overlay backdrop + panel centrado-arriba */
/* CyCarousel · viewport/track/slide + flechas + dots */
.cy-carousel{display:flex;flex-direction:column;gap:var(--mx-space-3);color:var(--mx-color-text)}
.cy-carousel__viewport{position:relative;overflow:hidden;border-radius:var(--mx-radius-lg)}
.cy-carousel__track{display:flex;transition:transform var(--mx-transition-slow) ease;will-change:transform}
.cy-carousel__slide{flex:0 0 100%;min-width:0;box-sizing:border-box;opacity:.35;transition:opacity var(--mx-transition-slow) ease}
.cy-carousel__slide.is-active{opacity:1}
.cy-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:var(--mx-z-fixed)}
.cy-carousel__arrow--prev{left:var(--mx-space-2)}
.cy-carousel__arrow--next{right:var(--mx-space-2)}
.cy-carousel__dots{display:flex;align-items:center;justify-content:center;gap:var(--mx-space-2)}
.cy-carousel__dot{width:var(--mx-space-2);height:var(--mx-space-2);padding:0;border:var(--mx-border-width) solid var(--mx-color-border);border-radius:var(--mx-radius-full);background:var(--mx-color-surface-alt);cursor:pointer}
.cy-carousel__dot:hover:not(:disabled){border-color:var(--mx-color-primary)}
.cy-carousel__dot.is-active{background:var(--mx-color-primary);border-color:var(--mx-color-primary);transform:scale(1.35)}
.cy-carousel__dot:disabled{cursor:not-allowed;opacity:.5}
.cy-carousel__register{display:none}
/* CyErrorState · estado de error centrado (tono danger) */
.cy-errorstate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--mx-space-3);padding:var(--mx-space-8) var(--mx-space-4);color:var(--mx-color-text-muted)}
.cy-errorstate__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--mx-color-danger)}
.cy-errorstate__title{margin:0;font-size:var(--mx-text-base);font-weight:var(--mx-font-weight-semibold);color:var(--mx-color-text)}
.cy-errorstate__desc{margin:0;font-size:var(--mx-text-sm);color:var(--mx-color-text-muted);max-width:44ch;line-height:var(--mx-line-height-normal,1.5)}
.cy-errorstate__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--mx-space-2);margin-top:var(--mx-space-2)}
/* AwActivityFeed (familia Aw — ex CyActivityFeed) · feed avatar + cuerpo + tiempo */
.aw-feed{display:flex;flex-direction:column;gap:var(--mx-space-1);margin:0;padding:0;list-style:none}
.aw-feed__item{display:flex;align-items:flex-start;gap:var(--mx-space-2);padding:var(--mx-space-2) var(--mx-space-1)}
.aw-feed__avatar{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:var(--mx-space-6);height:var(--mx-space-6);border-radius:var(--mx-radius-full);background:var(--mx-color-primary-bg);color:var(--mx-color-primary);font-size:var(--mx-text-xs);font-weight:var(--mx-font-weight-semibold);line-height:1}
.aw-feed__body{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:var(--mx-space-2)}
.aw-feed__text{min-width:0;font-size:var(--mx-text-sm);line-height:var(--mx-line-height-tight,1.3);color:var(--mx-color-text-muted)}
.aw-feed__actor{font-weight:var(--mx-font-weight-semibold);color:var(--mx-color-text)}
.aw-feed__action{color:var(--mx-color-text-muted)}
.aw-feed__time{flex:0 0 auto;font-size:var(--mx-text-xs);color:var(--mx-color-text-subtle,var(--mx-color-text-muted));white-space:nowrap}
.aw-feed__empty{list-style:none}
/* CyFilterBar · barra de filtros densa */
.cy-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-space-2)}
.cy-filterbar__search{flex:1 1 14rem;min-width:10rem}
.cy-filterbar__extra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-space-2)}
.cy-filterbar__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-space-1)}
@media (max-width:640px){.cy-filterbar__search{flex-basis:100%}}
/* CySearchResults · lista de resultados */
.cy-results{display:block}
.cy-results__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--mx-space-1)}
.cy-results__item{display:flex;align-items:center;gap:var(--mx-space-2);padding:var(--mx-space-2) var(--mx-space-3);border-radius:var(--mx-radius-sm);color:var(--mx-color-text);font-size:var(--mx-text-sm)}
.cy-results__loading{display:flex;align-items:center;justify-content:center;padding:var(--mx-space-6);color:var(--mx-color-text-muted)}
/* CyListDetail · lista maestra + filas + detalle */
.cy-listdetail__list{display:flex;flex-direction:column;gap:var(--mx-space-1);padding:var(--mx-space-2)}
.cy-listdetail__row{display:flex;align-items:center;gap:var(--mx-space-2);padding:var(--mx-space-2) var(--mx-space-3);border-radius:var(--mx-radius-sm);color:var(--mx-color-text);font-size:var(--mx-text-sm);cursor:pointer;user-select:none;transition:background var(--mx-transition-fast) var(--mx-ease-out),box-shadow var(--mx-transition-fast) var(--mx-ease-out)}
.cy-listdetail__row:hover{background:var(--mx-color-surface-2)}
.cy-listdetail__row:focus-visible{outline:none;box-shadow:var(--mx-shadow-focus)}
.cy-listdetail__row--selected{background:var(--mx-color-primary-bg);color:var(--mx-color-primary);box-shadow:inset 2px 0 0 0 var(--mx-color-primary);font-weight:var(--mx-font-weight-semibold)}
.cy-listdetail__row--disabled{cursor:default;opacity:.55;pointer-events:none}
.cy-listdetail__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cy-listdetail__detail{padding:var(--mx-space-4);color:var(--mx-color-text)}
/* CyTree · fila clickeable (la piel solo tenía cy-tree__node/__children) */
.cy-tree__row{display:flex;align-items:center;gap:var(--mx-space-1);padding-top:var(--mx-space-1);padding-bottom:var(--mx-space-1);padding-right:var(--mx-space-2);border-radius:var(--mx-radius-sm);cursor:pointer;transition:background var(--mx-transition-fast) var(--mx-ease-out),color var(--mx-transition-fast) var(--mx-ease-out)}
.cy-tree__row:hover{background:var(--mx-color-surface-2)}
.cy-tree__row:focus-visible{outline:none;box-shadow:var(--mx-shadow-focus)}
.cy-tree__row--selected{background:var(--mx-color-primary-bg);color:var(--mx-color-primary)}
.cy-tree__row--selected .cy-tree__text,.cy-tree__row--selected .cy-tree__label{color:var(--mx-color-primary);font-weight:var(--mx-font-weight-semibold)}
.cy-tree__chevron{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--mx-space-5);height:var(--mx-space-5);padding:0;border:none;background:transparent;color:var(--mx-color-text-muted);border-radius:var(--mx-radius-sm);cursor:pointer}
.cy-tree__chevron:hover{color:var(--mx-color-text);background:var(--mx-color-surface-2)}
.cy-tree__chevron--leaf{cursor:default}
.cy-tree__chevron--leaf:hover{background:transparent}
.cy-tree__label{display:inline-flex;align-items:center;gap:var(--mx-space-2);flex:1 1 auto;min-width:0;color:var(--mx-color-text-muted)}
.cy-tree__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mx-color-text)}
/* CyWizard · asistente multi-paso */
.cy-wizard{display:flex;flex-direction:column;gap:var(--mx-space-4);background:var(--mx-color-surface);border:var(--mx-border-width) solid var(--mx-color-border);border-radius:var(--mx-radius-lg);padding:var(--mx-space-4);color:var(--mx-color-text)}
.cy-wizard__head{padding-bottom:var(--mx-space-1)}
.cy-wizard__body{min-height:0;color:var(--mx-color-text)}
.cy-wizard__footer{display:flex;align-items:center;gap:var(--mx-space-2);padding-top:var(--mx-space-3);border-top:var(--mx-border-width) solid var(--mx-color-border)}
.cy-wizard__spacer{flex:1 1 auto}
.cy-wizard__register{display:none}
/* CyMenu · panel desplegable anclado (la piel solo tenía cy-menu flat + cy-menu__item) */
.cy-menu__trigger{display:inline-flex;cursor:pointer}
.cy-menu__backdrop{position:fixed;inset:0;z-index:var(--mx-z-dropdown,1000);background:transparent}
.cy-menu__panel{position:absolute;top:calc(100% + var(--mx-space-1));z-index:var(--mx-z-dropdown,1000);min-width:11rem;display:flex;flex-direction:column;gap:1px;padding:var(--mx-space-1);background:var(--mx-color-surface);border:var(--mx-border-width,1px) solid var(--mx-color-border);border-radius:var(--mx-radius-lg,12px);box-shadow:var(--mx-shadow-lg)}
.cy-menu__panel--start{left:0}
.cy-menu__panel--end{right:0}
.cy-menu__item{display:flex;align-items:center;gap:var(--mx-space-2);width:100%;box-sizing:border-box;text-align:left;padding:9px var(--mx-space-3);border:none;border-radius:var(--mx-radius-md,8px);background:none;color:var(--mx-color-text);cursor:pointer;font-size:var(--mx-text-sm);font-weight:500;font-family:inherit;line-height:1.35;white-space:nowrap;transition:background .12s,color .12s}
.cy-menu__item>svg{color:var(--mx-color-text-muted);transition:color .12s}
.cy-menu__item:hover:not(:disabled),.cy-menu__item:focus-visible{background:var(--mx-color-surface-2);outline:none}
.cy-menu__item:hover:not(:disabled)>svg,.cy-menu__item:focus-visible>svg{color:var(--mx-color-primary)}
.cy-menu__item:disabled{opacity:.45;cursor:not-allowed}
.cy-menu__item--danger,.cy-menu__item--danger>svg{color:var(--mx-color-danger,var(--mx-color-text))}
.cy-menu__item--danger:hover:not(:disabled),.cy-menu__item--danger:focus-visible{background:color-mix(in srgb,var(--mx-color-danger) 12%,transparent)}
.cy-menu__item--danger:hover:not(:disabled)>svg{color:var(--mx-color-danger)}
.cy-menu__sep{height:var(--mx-border-width,1px);margin:var(--mx-space-1) 0;background:var(--mx-color-border)}
/* CySectionPanel · superficie con borde + header + body */
.cy-section{display:block;background:var(--mx-color-surface);border:var(--mx-border-width) solid var(--mx-color-border);border-radius:var(--mx-radius-lg);overflow:hidden}
.cy-section__header{display:flex;align-items:center;gap:var(--mx-space-2);padding:var(--mx-space-2) var(--mx-space-3);background:var(--mx-color-surface-alt);border-bottom:var(--mx-border-width) solid var(--mx-color-border);font-size:var(--mx-text-sm);font-weight:var(--mx-font-weight-semibold);letter-spacing:var(--mx-letter-spacing-tight);color:var(--mx-color-text)}
.cy-section__header--toggle{width:100%;border-left:none;border-right:none;border-top:none;cursor:pointer;text-align:left;font-family:inherit;transition:background var(--mx-transition-fast) var(--mx-ease-out)}
.cy-section__header--toggle:hover{background:var(--mx-color-surface-2,var(--mx-color-surface-alt))}
.cy-section__header--toggle:focus-visible{outline:none;box-shadow:var(--mx-shadow-focus);position:relative;z-index:1}
.cy-section__title{flex:1;min-width:0}
.cy-section__actions{display:inline-flex;align-items:center;gap:var(--mx-space-1);flex:none;font-weight:var(--mx-font-weight-normal,400)}
.cy-section__chevron{display:inline-flex;align-items:center;flex:none;color:var(--mx-color-text-muted);transform:rotate(-90deg);transition:transform var(--mx-transition-fast) var(--mx-ease-out)}
.cy-section--open .cy-section__chevron{transform:rotate(0deg)}
.cy-section__body{padding:var(--mx-space-3);color:var(--mx-color-text)}
/* CyResourceSummary · media + cuerpo + acciones */
.cy-resource{display:flex;align-items:center;gap:var(--mx-space-3);min-width:0}
.cy-resource__media{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--mx-radius-md);background:var(--mx-color-surface-alt);color:var(--mx-color-text-muted)}
.cy-resource__initial{font-size:var(--mx-text-sm);font-weight:var(--mx-font-weight-semibold);color:var(--mx-color-text);line-height:1}
.cy-resource__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--mx-space-1)}
.cy-resource__title{font-size:var(--mx-text-sm);font-weight:var(--mx-font-weight-semibold);color:var(--mx-color-text);line-height:var(--mx-line-height-tight,1.25);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cy-resource__subtitle{font-size:var(--mx-text-xs);color:var(--mx-color-text-muted);line-height:var(--mx-line-height-tight,1.25);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cy-resource__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-space-1);margin-top:var(--mx-space-1)}
.cy-resource__actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--mx-space-1);margin-left:auto}
/* ===================== Ax · app-shell (LEGACY, ELIMINADO) ===================== */
/* La piel del shell Ax (DEPRECADA) — clon completo del shell/sidenav/nav-item con prefijo ax- —
vivía acá pero estaba MUERTA en el asset del kit Az (los componentes Az emiten az-*, nunca ax-*;
la lib Ax sirve su propio components/ax/wwwroot/ax.css). Copia muerta → ELIMINADA. La piel viva
del shell es la sección Az de abajo + el grid base en az.css. */
/* ===================== Az · app-shell (clon az-* — el shell que rinde el Motor B / monolito; espejo de Design/css/az.css) ===================== */
/* ⚠️ El GRID del shell (.az-shell-host + .az-shell + __topbar/__rail/__main + sus @container) NO vive
acá: es la FUENTE ÚNICA en components/az/wwwroot/az.css (@layer lib). Antes había acá un clon
DIVERGENTE (topbar-h:46px, hex evora hardcodeados en fallbacks, background plano)
que ganaba al scoped bueno y reintroducía el bug "blanco-frío" → ELIMINADO. Acá sólo queda la PIEL
BEM de los controles del nav (topbar/sidebar/nav-item/...) + el SKIN MkzShellAlign (§ más abajo),
que REFINA el grid base de az.css. Un guard test enforce que el grid viva sólo en az.css. */
/* AxTopBar — fila brand / center / end (las clases REALES; el const tenía __section/__spacer/__actions que el componente NO emite) */
/* base .az-topbar (raíz de AzTopBar): vivía SOLO en el scoped AzTopBar.razor.css → faltaba para consumidores
NO-scoped (el mockup Motor A reusa esta piel del kit). Copiado 1:1 del scoped para que el topbar calce. */
.az-topbar{display:flex;align-items:center;gap:var(--mx-space-3);width:100%;min-width:0}
.az-topbar__burger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:transparent;color:var(--mx-color-text);border-radius:var(--mx-radius-sm);cursor:pointer}
.az-topbar__burger:hover{background:var(--mx-color-surface-2)}
/* .az-topbar__brand: vivía SOLO en el scoped → en A (sin scoped) NO era flex y su hijo #mkz-title quedaba INLINE
(en B el scoped lo blockifica). Copiado 1:1 del scoped para que el título calce A⇄B (display/width/height). */
.az-topbar__brand{display:flex;align-items:center;font-weight:var(--mx-font-weight-semibold);color:var(--mx-color-text);white-space:nowrap}
.az-topbar__center{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.az-topbar__end{display:flex;align-items:center;gap:var(--mx-space-2);margin-left:auto}
@container (max-width:640px){.az-topbar__burger{display:inline-flex}}
/* AxSideNav — columna: items arriba, colapsar abajo (clases REALES; el const tenía __item/__section que no se emiten) */
/* base .az-sidebar (raíz de AzSidebar): vivía SOLO en el scoped AzSidebar.razor.css → faltaba para consumidores
NO-scoped (Motor A). Copiado del scoped (sin padding: §MkzShellAlign lo fija a 0 más abajo). */
.az-sidebar{position:relative;display:flex;flex-direction:column;height:100%;min-height:0}
.az-sidebar__brand{display:flex;align-items:center;gap:var(--mx-space-2);padding:var(--mx-space-4) 38px var(--mx-space-3) var(--mx-space-4);font-weight:var(--mx-font-weight-bold,700);white-space:nowrap;overflow:hidden}
/* 1.5c · slot del LOGO (.drwz brand-aware) que el host inyecta en el header del sidebar */
.az-brandlogo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto}
.az-brandlogo svg{width:100%;height:100%;display:block}
/* F1 · el placeholder se emite SIEMPRE: vacío no ocupa lugar (default idéntico); si el host lo llena con el
logo de la MARCA, el ícono de respaldo adyacente (CxIcon) se suprime — logo de marca GANA al ícono. */
.az-brandlogo:empty{display:none}
.az-brandlogo:not(:empty)+.cx-icon{display:none}
.az-sidebar__items{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--mx-space-1)}
/* EL PIN (2026-07-20): era una barra «Colapsar» al pie del rail; ahora es un pin absoluto en la
esquina de la fila de la marca. Espejo de AzSidebar.razor.css — el CSS scoped NO viaja al preview
ni al sitio (no cargan bundle scoped), así que la regla tiene que existir en las dos cascadas. */
.az-sidebar__collapse{position:absolute;top:var(--mx-space-3);right:10px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:transparent;color:var(--mx-color-text-muted);border-radius:var(--mx-radius-sm);cursor:pointer;opacity:.65;transition:opacity .15s,background .15s,color .15s}
.az-sidebar__collapse:hover,.az-sidebar__collapse:focus-visible{opacity:1;background:var(--mx-color-surface-2);color:var(--mx-color-text)}
.az-sidebar:not(.az-sidebar--collapsed) .az-sidebar__collapse{opacity:.9}
.az-sidebar--collapsed .az-sidebar__collapse{right:auto;left:50%;margin-left:-13px}
.az-sidebar--collapsed .az-sidebar__items{padding-top:30px}
@container (max-width:1024px){.az-sidebar__collapse{display:none}}
@container (min-width:641px) and (max-width:1024px){.az-sidebar__items{overflow:visible}}
/* AxNavSection — label de grupo + items */
.az-nav-section{display:flex;flex-direction:column;gap:var(--mx-space-1);margin-bottom:var(--mx-space-3)}
.az-nav-section__label{padding:var(--mx-space-2) var(--mx-space-2) var(--mx-space-1);font-size:var(--mx-text-xs);font-weight:var(--mx-font-weight-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--mx-color-sidebar-muted)}
.az-nav-section__items{display:flex;flex-direction:column;gap:var(--mx-space-1)}
.az-nav-section--collapsed .az-nav-section__label{display:none}
.az-nav-section--bottom{margin-top:auto;margin-bottom:0;padding-top:var(--mx-space-2);border-top:var(--mx-border-width,1px) solid var(--mx-color-border)}
@container (min-width:641px) and (max-width:1024px){.az-nav-section__label{display:none}.az-nav-section--bottom{padding-top:var(--mx-space-1)}}
/* AxNavItem — el /