:root{--fondo:#f6f6f7;--panel:#fff;--borde:#e4e4e7;--texto:#18181b;--suave:#52525b;--acento:#0f7a52;--acento-texto:#fff;--error:#b42318;--aviso:#fff4d6;--aviso-texto:#6b4b00;--ease:cubic-bezier(.23,1,.32,1)}
@media(prefers-color-scheme:dark){:root{--fondo:#09090b;--panel:#131316;--borde:#26262b;--texto:#ededef;--suave:#a1a1aa;--acento:#3ecf8e;--acento-texto:#07130d;--error:#f8a5a5;--aviso:#2a2211;--aviso-texto:#f5c451}}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:var(--fondo);color:var(--texto);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
h1{font-size:22px;letter-spacing:-.02em;margin:0 0 12px}
.marca{font-weight:700;color:var(--acento);margin:0 0 20px}
.acceso{display:grid;place-items:center;min-height:100dvh;padding:16px}
.tarjeta{width:min(420px,100%);background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:32px 28px}
label{display:block;font-size:13px;font-weight:600;margin:0 0 14px}
input{display:block;width:100%;margin-top:6px;padding:11px 12px;font:inherit;color:inherit;background:var(--fondo);border:1px solid var(--borde);border-radius:8px}
input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
button,.boton{display:inline-block;font:inherit;font-weight:600;padding:11px 16px;border-radius:8px;border:1px solid var(--borde);background:var(--panel);color:inherit;cursor:pointer;text-decoration:none;text-align:center;transition:transform .16s var(--ease)}
button:active,.boton:active{transform:scale(.97)}
.primario{width:100%;background:var(--acento);color:var(--acento-texto);border-color:transparent;margin-top:4px}
.enlace{background:none;border:0;padding:8px 0;color:var(--suave);font-weight:500;text-decoration:underline;margin-top:12px}
.ayuda{color:var(--suave);font-size:14px}
.error{color:var(--error);font-size:13px;margin:-6px 0 12px}
.pasos{padding-left:20px;color:var(--suave);font-size:14px}
.qr{background:#fff;border-radius:10px;padding:12px;width:220px;margin:8px auto 12px}.qr svg{display:block;width:100%;height:auto}
.secreto{word-break:break-all}
.codigos{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 20px}.codigos code{display:block;padding:8px;border:1px solid var(--borde);border-radius:6px;text-align:center;font-size:15px}
.lista-empresas{display:grid;gap:8px}.lista-empresas button{display:flex;justify-content:space-between;text-align:left}.lista-empresas span{color:var(--suave);font-weight:500;font-size:13px}
.avisos{list-style:none;padding:0;margin:0 0 16px}.aviso{padding:10px 12px;border-radius:8px;background:var(--aviso);color:var(--aviso-texto);font-size:14px}
.acceso .avisos{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 32px))}
.barra{display:flex;align-items:center;gap:16px;padding:12px 24px;background:var(--panel);border-bottom:1px solid var(--borde)}.barra .marca{margin:0}.barra .empresa{color:var(--suave);font-size:14px;margin-right:auto}.barra .enlace{margin:0}
.contenido{max-width:960px;margin:0 auto;padding:24px 16px}
.conversaciones{list-style:none;padding:0;margin:0;background:var(--panel);border:1px solid var(--borde);border-radius:12px}.conversaciones li{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--borde)}.conversaciones li:last-child{border-bottom:0}.conversaciones span{color:var(--suave);font-size:13px}.pendiente{margin-left:auto;background:var(--aviso);color:var(--aviso-texto)!important;padding:3px 8px;border-radius:5px;font-weight:600}
@media(prefers-reduced-motion:reduce){button:active,.boton:active{transform:none}}