/* ═══ LA CAPA VIAJA CON LA HOJA ══════════════════════════════════════════════
   Esta hoja declara su @layer adentro, así cae en su capa se cargue como se
   cargue (lo que no tiene capa le gana a todo lo que la tiene), y el <head>
   puede usar <link> (paralelo; un fallo se ve en Network) en vez de @import
   (serial, bloqueante y falla en silencio).
   ═════════════════════════════════════════════════════════════════════════ */
@layer lib {
/*
 * Cx · CONTROLES de formulario (la piel compartida de los inputs).
 *
 * Fuente única de .cx-field / .cx-input para todos los componentes de entrada (CxInput, CxSelect,
 * CxAutocomplete…). Es global y no scoped: así cualquier <input|select class="cx-input"> queda
 * consistente sin duplicar reglas por componente.
 *
 * Sólo consume tokens (--mx-color-*, --mx-radius-*, --mx-space-*); el color y la forma activos
 * los deciden los otros ejes. No define tokens.
 */

/* ── campo (label + control + ayuda/error apilados) ── */
.cx-field {
    display: flex; flex-direction: column; gap: var(--mx-space-1);
    font-size: var(--mx-text-sm);
}
.cx-field__label { font-weight: 500; color: var(--mx-color-text); }
.cx-field__help  { font-size: var(--mx-text-xs); color: var(--mx-color-text-muted); }
.cx-field__error { font-size: var(--mx-text-xs); color: var(--mx-color-danger); }
/* marca de campo obligatorio en el label (* danger). */
.cx-field__req { color: var(--mx-color-danger); margin-left: 2px; }

/* ── mensaje unificado (un span; el color sigue al estado, default muted=Help) ── */
.cx-field__msg          { font-size: var(--mx-text-xs); color: var(--mx-color-text-muted); }
.cx-field__msg--error   { color: var(--mx-color-danger); }
.cx-field__msg--warning { color: var(--mx-color-warn); }
.cx-field__msg--success { color: var(--mx-color-success); }

/* ── control base (input / select / textarea) ── */
.cx-input {
    width: 100%; box-sizing: border-box;
    padding: 6px 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);
    color: var(--mx-color-text);
    font-family: var(--mx-font-sans);
    font-size: var(--mx-text-sm);
    line-height: 1.5;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.cx-input::placeholder { color: var(--mx-color-text-muted); }
.cx-input:hover:not(:disabled):not(:focus) { border-color: var(--mx-color-text-muted); }
.cx-input:focus {
    outline: none;
    border-color: var(--mx-color-primary);
    /* halo de foco derivado del eje color activo (verde en terminal, magenta en vibrant…). */
    box-shadow: var(--mx-shadow-focus);
}
.cx-input:disabled {
    background: var(--mx-color-surface-2); color: var(--mx-color-text-muted);
    cursor: not-allowed; opacity: 1;
}

/* ── input con addon (prefijo/sufijo pegado) ── */
.cx-input-wrap {
    display: flex; align-items: stretch; width: 100%; 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);
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.cx-input-wrap:focus-within {
    border-color: var(--mx-color-primary);
    /* mismo halo temable que el input base (ver .cx-input:focus). */
    box-shadow: var(--mx-shadow-focus);
}
/* ── estado de error/invalidez (borde rojo temable, voltea en oscuro) ── */
.cx-input--error { border-color: var(--mx-color-danger); }
.cx-input--error:focus {
    border-color: var(--mx-color-danger);
    /* halo de error con el tinte danger del eje color activo (el mismo token que
       CxBadge/CxChip/CxNotice/CxStatusPill): voltea en oscuro y sigue al tema. */
    box-shadow: 0 0 0 3px var(--mx-color-danger-light);
}
.cx-input-wrap--error { border-color: var(--mx-color-danger); }
.cx-input-wrap--error:focus-within {
    border-color: var(--mx-color-danger);
    /* mismo halo de error temable que el input base (ver .cx-input--error:focus). */
    box-shadow: 0 0 0 3px var(--mx-color-danger-light);
}

/* ── success / warning: el mismo idioma que --error, sólo cambia el token de estado.
   Bordes var(--mx-color-{success,warn}) + halo var(--mx-color-{success,warn}-light);
   son tokens del eje de estado → voltean en oscuro y siguen al tema. ── */
.cx-input--success { border-color: var(--mx-color-success); }
.cx-input--success:focus {
    border-color: var(--mx-color-success);
    box-shadow: 0 0 0 3px var(--mx-color-success-light);
}
.cx-input-wrap--success { border-color: var(--mx-color-success); }
.cx-input-wrap--success:focus-within {
    border-color: var(--mx-color-success);
    box-shadow: 0 0 0 3px var(--mx-color-success-light);
}
.cx-input--warning { border-color: var(--mx-color-warn); }
.cx-input--warning:focus {
    border-color: var(--mx-color-warn);
    box-shadow: 0 0 0 3px var(--mx-color-warn-light);
}
.cx-input-wrap--warning { border-color: var(--mx-color-warn); }
.cx-input-wrap--warning:focus-within {
    border-color: var(--mx-color-warn);
    box-shadow: 0 0 0 3px var(--mx-color-warn-light);
}

/* ── loading: borde primary sutil (la carga no es invalidez); halo del foco normal. ── */
.cx-input--loading,
.cx-input-wrap--loading { border-color: var(--mx-color-primary); }

/* ── color del icono de validez in-field (sigue al estado) ── */
.cx-input__icon--success { color: var(--mx-color-success); }
.cx-input__icon--warning { color: var(--mx-color-warn); }
.cx-input__icon--error   { color: var(--mx-color-danger); }

.cx-input--bare {
    width: auto; border: none; background: transparent; flex: 1; outline: none;
    box-shadow: none !important;
}
.cx-input--bare:focus { border: none; box-shadow: none; }
.cx-input__addon {
    display: inline-flex; align-items: center;
    padding: 0 var(--mx-space-2);
    color: var(--mx-color-text-muted);
    font-size: var(--mx-text-sm);
    background: var(--mx-color-surface-2);
}

/* ── afijos dentro del campo, sin fondo (a diferencia de __addon) ── */
/* icono decorativo (IconLeft / IconRight no accionable): hereda color del campo. */
.cx-input__icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 var(--mx-space-1);
    color: var(--mx-color-text-muted);
    background: transparent;
    flex: none;
}
/* acción in-field (Clear / Reveal / IconRight accionable): button limpio y temable. */
.cx-input__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 var(--mx-space-1);
    margin: 0;
    border: 0; background: none; cursor: pointer;
    color: var(--mx-color-text-muted);
    border-radius: var(--mx-radius-sm);
    flex: none;
    transition: color .12s ease, box-shadow .12s ease;
}
.cx-input__btn:hover:not(:disabled) { color: var(--mx-color-text); }
.cx-input__btn:focus-visible {
    outline: none;
    color: var(--mx-color-text);
    box-shadow: var(--mx-shadow-focus);
}

/* ── select: matar el chrome nativo + caret propio (temable) ── */
.cx-select { position: relative; display: block; }
.cx-select > select.cx-input {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: calc(var(--mx-space-2) + 1.2em);
    cursor: pointer;
}
.cx-select > select.cx-input:disabled { cursor: not-allowed; }
/* caret chevron dibujado con bordes → hereda el color del tema, sin SVG */
.cx-select::after {
    content: ""; position: absolute; pointer-events: none;
    right: calc(var(--mx-space-2) + 2px); top: 50%;
    width: 0.45em; height: 0.45em;
    border-right: 2px solid var(--mx-color-text-muted);
    border-bottom: 2px solid var(--mx-color-text-muted);
    transform: translateY(-70%) rotate(45deg);
}
.cx-select:has(select:disabled)::after { opacity: 0.45; }
/* las <option> del menú nativo: al menos respetar el surface del tema */
.cx-select option { background: var(--mx-color-surface); color: var(--mx-color-text); }


/* ── Cx · the BUTTON ─────────────────────────────────────────────────────────
   Global, not scoped, like the inputs above: any <button class="cx-btn …"> gets it, also markup drawn
   outside CxButton (the ZHub Studio preview, a PDF, a .guiz screen). */
.cx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-space-2);
    font-family: var(--mx-font-sans);
    font-weight: 500;
    border-radius: var(--mx-radius-sm);
    /* Default surface + Default tone = botón neutro, en la base: las superficies
       (outlined/text/ghost) y los tonos lo pisan. */
    background: var(--mx-color-surface);
    color: var(--mx-color-text);
    border: 1px solid var(--mx-color-border);
    cursor: pointer;
    /* transición por tokens */
    transition: background var(--mx-transition-fast) var(--mx-ease-out),
                border-color var(--mx-transition-fast) var(--mx-ease-out),
                color var(--mx-transition-fast) var(--mx-ease-out),
                filter var(--mx-transition-fast) var(--mx-ease-out);
    white-space: nowrap;
}

.cx-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cx-btn--full { width: 100%; }

/* ── Focus-visible (WCAG 2.4.7 · teclado) ───────────────────────────── */
/* Usa el token --mx-shadow-focus, que voltea en oscuro. */
.cx-btn:focus-visible {
    outline: none;
    box-shadow: var(--mx-shadow-focus);
}

/* ── Press-state base (:active) ─────────────────────────────────────── */
/* Feedback de presión ultra-compacto para todas las variants base; el
   gradient ya trae su propio :active en cx-themes.css. */
.cx-btn:active:not(:disabled) { filter: brightness(0.95); }

/* Hover neutro (Default surface + Default tone). Las superficies/tonos con
   :hover propio lo overridean por orden (misma especificidad, regla posterior). */
.cx-btn:hover:not(:disabled) {
    background: var(--mx-color-surface-2);
}

.cx-btn--sm { padding: 4px 10px; font-size: var(--mx-text-xs); }
.cx-btn--md { padding: 6px 14px; font-size: var(--mx-text-sm); }
.cx-btn--lg { padding: 10px 18px; font-size: var(--mx-text-base); }

/* ════════════════════════════════════════════════════════════════════
 * EJE SUPERFICIE (CnSurface) — tratamiento: sombra/borde/transparencia.
 * El color lo decide el eje Tono (abajo). Sin Tono, los acentos
 * (Elevated/Outlined/Text) caen a primary.
 * ════════════════════════════════════════════════════════════════════ */

/* Elevated — superficie + sombra (la FORMA aplana la sombra: terminal=none) */
.cx-btn--elevated {
    background: var(--mx-color-surface);
    color: var(--mx-color-primary);
    box-shadow: var(--mx-shadow-sm, 0 1px 3px rgba(0,0,0,.2));
}
.cx-btn--elevated:hover:not(:disabled) {
    background: var(--mx-color-surface-2);
    box-shadow: var(--mx-shadow-md, 0 4px 10px rgba(0,0,0,.22));
}

/* Outlined — transparente + borde outline + label primary */
.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); }

/* Text — solo label primary (énfasis bajo) */
.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); }

/* Ghost — transparente, label neutro (énfasis mínimo) */
.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); }

/* Glow — fill primario + halo. El halo (.cx-glow) lo añade la utilidad global;
   aquí sólo el fill primario. */
.cx-btn--glow {
    background: var(--mx-color-primary);
    color: var(--mx-color-primary-on);
    border-color: transparent;
}
.cx-btn--glow:hover:not(:disabled) { background: var(--mx-color-primary-dark); }

/* ════════════════════════════════════════════════════════════════════
 * EJE TONO (CnTone) — color semántico. Compone sobre la superficie.
 *   · Sobre Default surface (fill plano): tiñe fill + on-color.
 *   · Sobre Outlined/Text/Ghost (transparente): tiñe sólo el acento (texto/borde).
 * Default/Ghost tone no emiten clase (neutro). Secondary = filled-tonal MD3.
 * ════════════════════════════════════════════════════════════════════ */

/* Fill plano teñido (Default surface + tono); el on-color es --mx-color-primary-on en todos. */
.cx-btn--tone-primary {
    background: var(--mx-color-primary);
    color: var(--mx-color-primary-on);
}
.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);
}
.cx-btn--tone-danger:hover:not(:disabled) { filter: brightness(0.95); }

.cx-btn--tone-info {
    background: var(--mx-color-info);
    color: var(--mx-color-primary-on);
}
.cx-btn--tone-info:hover:not(:disabled) { filter: brightness(0.95); }

.cx-btn--tone-success {
    background: var(--mx-color-success);
    color: var(--mx-color-primary-on);
}
.cx-btn--tone-success:hover:not(:disabled) { filter: brightness(0.95); }

.cx-btn--tone-warn {
    background: var(--mx-color-warn);
    color: var(--mx-color-primary-on);
}
.cx-btn--tone-warn:hover:not(:disabled) { filter: brightness(0.95); }

/* Secondary = filled-tonal MD3 (secondary-container). */
.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(0.96); }

/* ── Tono sobre superficies transparentes (Outlined/Text/Ghost) ───────
   El fill sigue transparente; sólo cambia el acento (texto + borde). */
.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--text.cx-btn--tone-primary, .cx-btn--ghost.cx-btn--tone-primary { border-color: transparent; }

.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--text.cx-btn--tone-danger, .cx-btn--ghost.cx-btn--tone-danger { border-color: transparent; }

.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--text.cx-btn--tone-info, .cx-btn--ghost.cx-btn--tone-info { border-color: transparent; }

.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--text.cx-btn--tone-success, .cx-btn--ghost.cx-btn--tone-success { border-color: transparent; }

.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--text.cx-btn--tone-warn, .cx-btn--ghost.cx-btn--tone-warn { border-color: transparent; }

.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-secondary, .cx-btn--ghost.cx-btn--tone-secondary { border-color: transparent; }

/* Elevated mantiene su fill de superficie; el Tono sólo recolorea el label. */
.cx-btn--elevated.cx-btn--tone-primary   { background: var(--mx-color-surface); color: var(--mx-color-primary); }
.cx-btn--elevated.cx-btn--tone-danger    { background: var(--mx-color-surface); color: var(--mx-color-danger); }
.cx-btn--elevated.cx-btn--tone-info      { background: var(--mx-color-surface); color: var(--mx-color-info); }
.cx-btn--elevated.cx-btn--tone-success   { background: var(--mx-color-surface); color: var(--mx-color-success); }
.cx-btn--elevated.cx-btn--tone-warn      { background: var(--mx-color-surface); color: var(--mx-color-warn); }
.cx-btn--elevated.cx-btn--tone-secondary { background: var(--mx-color-surface); color: var(--mx-color-secondary); }

/* Respeto de prefers-reduced-motion en los estados propios del button (el giro del loader vive en
   cx-themes.css). */
@media (prefers-reduced-motion: reduce) {
    .cx-btn { transition: none; }
    .cx-btn:active:not(:disabled) { filter: none; }
}


/* ── Cx · the BADGE ────────────────────────────────────────────────────────────────────────────────────── */
.cx-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--mx-space-1);            /* token en vez de 4px hardcodeado */
    border-radius: var(--mx-radius-sm);
    font-weight: var(--mx-font-weight-medium);
    line-height: var(--mx-line-height-tight);
}
.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-info-alt-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); 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)); }
/* Ghost = sutil/sin fill: solo borde + texto muted (sello discreto). */
.cx-badge--ghost   { background: transparent; color: var(--mx-color-text-muted); box-shadow: inset 0 0 0 var(--mx-border-width) var(--mx-color-border); }

.cx-badge--sm { padding: 1px 6px;  font-size: 10px;                  gap: 3px; }
.cx-badge--md { padding: 2px var(--mx-space-2);  font-size: var(--mx-text-xs); }
.cx-badge--lg { padding: 3px 10px; font-size: var(--mx-text-sm);     gap: 5px; }

.cx-badge--pill { border-radius: 999px; }

/* ── Cx · the NOTICE ───────────────────────────────────────────────────────────────────────────────────── */
.cx-notice {
    padding: var(--mx-space-3);
    border-radius: var(--mx-radius-md);
    /* borde de acento — grosor token-driven (x4 sobre el ancho base) */
    border-left: calc(var(--mx-border-width) * 4) solid;
    font-size: var(--mx-text-sm);
}
/* Texto: token *-text, que sigue el modo (contraste AA sobre el tint *-light), con el
   acento de fallback para un tema que no emita *-text. */
.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--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--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--primary { background: var(--mx-color-primary-light); border-color: var(--mx-color-primary); color: var(--mx-color-primary-text, var(--mx-color-primary)); }
/* Default/Ghost (CnTone) — neutro: surface-alt + borde border, sin acento. */
.cx-notice--default,
.cx-notice--ghost   { background: var(--mx-color-surface-alt); border-color: var(--mx-color-border); color: var(--mx-color-text); }

/* ── Cx · the PAGINATION ───────────────────────────────────────────────────────────────────────────────── */
.cx-pagination {
    display: flex; align-items: center; gap: var(--mx-space-1);
    font-family: var(--mx-font-sans); font-size: var(--mx-text-sm);
}
.cx-pagination__btn {
    min-width: var(--mx-space-6); height: var(--mx-space-6);
    background: var(--mx-color-surface);
    border: var(--mx-border-width) solid var(--mx-color-border);
    border-radius: var(--mx-radius-sm);
    color: var(--mx-color-text); cursor: pointer;
    font-family: inherit; font-size: inherit;
    padding: 0 var(--mx-space-2);
    /* Transición de estado, alineada con CxButton/.cx-input. */
    transition: background var(--mx-transition-fast) var(--mx-ease-out),
                border-color var(--mx-transition-fast) var(--mx-ease-out),
                box-shadow var(--mx-transition-fast) var(--mx-ease-out);
}
.cx-pagination__btn:hover:not(:disabled) { background: var(--mx-color-surface-2); }
/* Indicador de foco de teclado (a11y) — mismo anillo que el resto del DS. */
.cx-pagination__btn:focus-visible {
    outline: none;
    box-shadow: var(--mx-shadow-focus);
    position: relative; z-index: 1;
}
.cx-pagination__btn:disabled { opacity: 0.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); color: var(--mx-color-text-muted); }
.cx-pagination__info {
    margin-left: var(--mx-space-3);
    color: var(--mx-color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Respeto de prefers-reduced-motion: sin animación de estado. */
@media (prefers-reduced-motion: reduce) {
    .cx-pagination__btn { transition: none; }
}

}