/* Login de Orden de Corte web — misma estetica "A · Taller" que la app (sin fuentes externas). */
:root { --bg:#f4f2ee; --surface:#fff; --ink:#1c1a17; --ink-soft:#6b665e; --border:#d9d3c9; --accent:#b4501e; --accent-hover:#8f3f18; --error:#a33f14; --error-bg:#f6e7e0; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); font:14px/1.4 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif; }
body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:28px 24px; display:flex; flex-direction:column; gap:18px; }
.marca { display:flex; align-items:baseline; gap:8px; }
.marca .nombre { font-weight:600; letter-spacing:.08em; }
.marca .anio { color:var(--ink-soft); font-family:'IBM Plex Mono','SF Mono',Menlo,monospace; }
form { display:flex; flex-direction:column; gap:8px; }
label { font-size:12px; color:var(--ink-soft); }
input { height:40px; border:1px solid var(--border); border-radius:6px; padding:0 12px; font:inherit; background:#fff; color:var(--ink); }
input:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { margin-top:8px; height:44px; border:0; border-radius:6px; background:var(--accent); color:#fff8f2; font:inherit; font-weight:600; cursor:pointer; }
button:hover { background:var(--accent-hover); }
.error { margin:4px 0 0; padding:8px 10px; border-radius:6px; background:var(--error-bg); color:var(--error); }
.nota { margin:0; font-size:12px; color:var(--ink-soft); }