/* ═══ 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(lib)`, 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 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…). Antes vivía scoped en CxInput.razor.css,
* por lo que sólo CxInput recibía estilo y los demás caían a control nativo feo.
* Al ser global (mismo contrato que cx-tokens/cx-themes), cualquier queda consistente sin duplicar reglas por componente.
*
* Sólo consume tokens (--mx-color-*, --mx-radius-*, --mx-space-*); el COLOR y la
* FORMA activos lo 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…); antes estaba cableado a --mx-color-info-light (azul fijo). */
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 (mismo token que
CxBadge/CxChip/CxNotice/CxStatusPill); voltea en oscuro y sigue al tema en
md3/terminal/vibrant. Antes usaba color-mix(in srgb, var(--mx-color-danger) calc(.25 * 100%), transparent), un triple
sólo definido en los bloques estáticos light/dark y que el motor no emite,
por lo que el halo quedaba pegado al rojo base y no acompañaba al tono. */
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: 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 IN-FIELD: flotan 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