.en { --en-alto: 56px; --en-letra: 18px; --en-radio: 14px; font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); }
.en.-compacto { --en-alto: 46px; --en-letra: 15px; --en-radio: 10px; }
.en-texto { margin: 0 0 16px; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.en-texto[hidden] { display: none; }
.en-proveedores { display: flex; flex-direction: column; gap: 10px; }
.en-proveedor { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--en-alto); padding: 0 16px; border-radius: var(--en-radio); border: 1px solid var(--border); background: var(--card-2); color: var(--text); font: 600 var(--en-letra) "Plus Jakarta Sans", sans-serif; text-decoration: none; transition: border-color .15s, transform .15s; }
.en-proveedor:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.en-proveedor.-resaltar { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.en-proveedor img, .en-proveedor svg { width: 22px; height: 22px; }
.en.-compacto .en-proveedor img, .en.-compacto .en-proveedor svg { width: 18px; height: 18px; }
.en-o { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; color: var(--muted); font: 700 14px "Plus Jakarta Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.en-o::before, .en-o::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.en.-compacto .en-o { margin: 12px 0 10px; }
.en-campo { margin-bottom: 12px; }
.en-campo label { display: block; margin: 0 0 8px; font: 600 16px "Plus Jakarta Sans", sans-serif; color: var(--text); }
.en-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.en-campo input { width: 100%; box-sizing: border-box; height: var(--en-alto); padding: 0 16px; border-radius: var(--en-radio); border: 1px solid var(--border); background: var(--card-2); color: var(--text); font: 500 var(--en-letra) "IBM Plex Sans", sans-serif; outline: none; transition: border-color .15s, box-shadow .15s; }
.en-campo input::placeholder { color: var(--muted); }
.en-campo input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.en-campo input[aria-invalid="true"] { border-color: var(--danger); }
.en-campo small { display: block; margin: 6px 0 0; color: var(--danger); font-size: 14px; }
.en-campo small:empty { display: none; }
.en-pass { position: relative; }
.en-pass input { padding-right: 76px; }
.en-ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: calc(var(--en-alto) - 12px); padding: 0 12px; border-radius: calc(var(--en-radio) - 4px); border: 0; background: var(--card); color: var(--accent); font: 700 14px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.en-msg { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); font-size: 15px; }
.en-msg[hidden] { display: none; }
.en-msg.-ok { background: var(--ok-soft); color: var(--ok); }
.en-msg b { display: block; line-height: 1.35; }
.en-msg b + p { margin: 4px 0 0; line-height: 1.45; }
.en-msg.-aviso { background: var(--card-2); color: var(--text); border: 1px solid var(--border); }
.en-msg.-aviso b { font-size: 17px; }
.en-msg.-elegir { background: var(--card-2); color: var(--text); }
.en-msg.-elegir b { display: block; font-size: 17px; }
.en-msg.-elegir p { margin: 4px 0 10px; font-size: 14px; color: var(--muted); }
.en-cuenta { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; margin-top: 8px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font: inherit; cursor: pointer; min-height: 52px; transition: border-color .15s ease, background .15s ease; }
.en-cuenta:hover, .en-cuenta:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.en-cuenta .n { font-weight: 700; font-size: 15px; }
.en-cuenta .d { font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .en-cuenta { transition: none; } }
.en-entrar { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--en-alto); padding: 0 20px; border: 0; border-radius: var(--en-radio); background: var(--accent-fill); color: var(--texto-sobre-acento); font: 700 var(--en-letra) "Plus Jakarta Sans", sans-serif; cursor: pointer; transition: transform .15s, filter .15s; }
.en-entrar:hover { filter: brightness(1.06); transform: translateY(-1px); }
.en-entrar:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--accent-soft); }
.en-entrar[aria-busy="true"] { filter: saturate(.7); pointer-events: none; }
.en-olvide { display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 100%; margin-top: 12px; min-height: var(--en-alto); padding: 0 16px; border-radius: var(--en-radio); border: 2px solid var(--warn); background: var(--warn-soft); color: var(--warn-fill); font: 700 var(--en-letra) "Plus Jakarta Sans", sans-serif; text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s; }
.en-olvide:hover { filter: brightness(1.04); transform: translateY(-1px); color: var(--warn-fill); }
.en-olvide:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--warn-soft); }
.en-olvide svg { width: 22px; height: 22px; flex-shrink: 0; }
.en-olvide.-resaltar { box-shadow: 0 0 0 4px var(--warn-soft); }
.en-olvide.-volver { background: var(--card-2); border-color: var(--border); color: var(--text); }
.en.-compacto .en-olvide { font-size: 14px; }
.en [data-en-vista][hidden] { display: none; }
.en-registro { margin-top: 14px; text-align: center; color: var(--muted); font-size: 14px; }
.en-registro a { color: var(--accent); font-weight: 600; text-decoration: none; }
.em { border: 0; padding: 0; background: transparent; max-width: none; width: 100%; max-height: 100vh; }
.em::backdrop { background: var(--shadow-strong); }
.em[open] { display: grid; place-items: center; min-height: 100vh; margin: 0; }
.em-caja { position: relative; width: min(100% - 32px, 480px); background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 28px 24px 24px; box-shadow: 0 30px 80px var(--shadow-strong); }
.em-caja h2 { margin: 0 40px 10px 0; font: 800 24px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: -.02em; color: var(--text); }
.em-cerrar { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--card-2); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.em-cerrar svg { width: 20px; height: 20px; }