:root {
            --bg:          #070c15;
            --surface:     #0c1524;
            --card:        #101e32;
            --border:      #192c46;
            --border-hi:   #243d5e;
            --accent:      #2563eb;
            --accent-lite: #3b82f6;
            --accent-glow: rgba(37,99,235,.22);
            --cyan:        #06b6d4;
            --green:       #10b981;
            --red:         #ef4444;
            --text:        #dce8f8;
            --dim:         #8ca5c0;
            --muted:       #3d5a7a;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background: var(--bg);
            font-family: 'DM Sans', sans-serif;
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* ── FONDO ANIMADO ── */
        .bg-layer {
            position: fixed; inset: 0; pointer-events: none; z-index: 0;
        }
        /* grid */
        .bg-layer::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(37,99,235,.04) 1px, transparent 1px);
            background-size: 44px 44px;
        }
        /* glow central */
        .bg-layer::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 700px; height: 700px;
            background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 70%);
            border-radius: 50%;
        }

        /* ── HEADER ── */
        header {
            position: relative; z-index: 10;
            padding: 1.4rem 2.5rem;
            display: flex; align-items: center; justify-content: space-between;
            border-bottom: 1px solid var(--border);
            background: rgba(7,12,21,.6);
            backdrop-filter: blur(10px);
        }
        .brand {
            display: flex; align-items: center; gap: .75rem;
        }
        .brand-mark {
            width: 36px; height: 36px;
            background: var(--accent);
            border-radius: 9px;
            display: grid; place-items: center;
            font-size: 1.1rem;
        }
        .brand-name {
            font-family: 'Syne', sans-serif;
            font-weight: 800; font-size: 1.05rem;
            letter-spacing: .03em;
        }
        .brand-name span { color: var(--cyan); }
        .header-meta {
            font-size: .72rem; color: var(--muted);
            text-transform: uppercase; letter-spacing: .1em;
        }

        /* ── MAIN WRAPPER ── */
        .page-wrap {
            position: relative; z-index: 1;
            flex: 1;
            display: flex; align-items: center; justify-content: center;
            padding: 2rem;
        }

        /* ── STEP CONTAINER ── */
        /* Dos "pasos" que se alternan: login → selección de puesto */
        .step {
            width: 100%; max-width: 440px;
            animation: fadeUp .4s cubic-bezier(.16,1,.3,1) both;
        }
        @keyframes fadeUp {
            from { opacity:0; transform:translateY(18px); }
            to   { opacity:1; transform:translateY(0); }
        }

        /* ── STEP HEADER ── */
        .step-eyebrow {
            font-size: .68rem; text-transform: uppercase; letter-spacing: .15em;
            color: var(--muted); margin-bottom: .5rem;
            display: flex; align-items: center; gap: .5rem;
        }
        .step-eyebrow::before {
            content:''; width:20px; height:1px; background:var(--muted);
        }
        .step-title {
            font-family: 'Syne', sans-serif;
            font-size: 1.85rem; font-weight: 800;
            letter-spacing: -.01em; line-height: 1.1;
            margin-bottom: .4rem;
        }
        .step-sub {
            font-size: .82rem; color: var(--dim);
            margin-bottom: 2rem; line-height: 1.5;
        }

        /* ── CARD BASE ── */
        .form-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 2rem;
        }

        /* ── INPUTS ── */
        .field { margin-bottom: 1.1rem; }
        .field-label {
            font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
            color: var(--muted); margin-bottom: .45rem; display: block;
        }
        .field-wrap {
            position: relative;
        }
        .field-icon {
            position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
            color: var(--muted); font-size: .95rem; pointer-events: none;
            transition: color .2s;
        }
        .field-input {
            width: 100%;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: .75rem 1rem .75rem 2.6rem;
            color: var(--text);
            font-family: 'DM Sans', sans-serif;
            font-size: .88rem;
            transition: border-color .2s, box-shadow .2s;
            outline: none;
        }
        .field-input::placeholder { color: var(--muted); }
        .field-input:focus {
            border-color: var(--accent-lite);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }
        .field-input:focus + .field-icon,
        .field-wrap:focus-within .field-icon { color: var(--accent-lite); }

        /* toggle password */
        .pass-toggle {
            position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted);
            cursor: pointer; font-size: .95rem; padding: .2rem;
            transition: color .15s;
        }
        .pass-toggle:hover { color: var(--dim); }

        /* ── ERROR MSG ── */
        .error-msg {
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            border-radius: 8px; padding: .65rem 1rem;
            font-size: .78rem; color: var(--red);
            display: none; align-items: center; gap: .5rem;
            margin-bottom: 1rem;
        }
        .error-msg.show { display: flex; animation: fadeUp .25s ease; }

        /* ── BTN PRINCIPAL ── */
        .btn-primary {
            width: 100%; background: var(--accent); color: #fff;
            border: none; border-radius: 11px;
            padding: .85rem; font-family: 'Syne', sans-serif;
            font-weight: 700; font-size: .9rem; letter-spacing: .04em;
            cursor: pointer; transition: all .18s;
            display: flex; align-items: center; justify-content: center; gap: .6rem;
            margin-top: .5rem;
        }
        .btn-primary:hover { background: var(--accent-lite); box-shadow: 0 6px 22px var(--accent-glow); transform: translateY(-1px); }
        .btn-primary:active { transform: translateY(0); }
        .btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

        /* spinner dentro del botón */
        .btn-spinner {
            width: 16px; height: 16px;
            border: 2px solid rgba(255,255,255,.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin .7s linear infinite;
            display: none;
        }
        @keyframes spin { to { transform:rotate(360deg); } }

        /* ── DIVIDER ── */
        .divider {
            display: flex; align-items: center; gap: .75rem;
            margin: 1.25rem 0; color: var(--muted); font-size: .7rem;
        }
        .divider::before, .divider::after {
            content:''; flex:1; height:1px; background:var(--border);
        }

        /* ════════════════════════════════
           PASO 2 — SELECCIÓN DE PUESTO
           ════════════════════════════════ */
        .worker-greeting {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem 1.25rem;
            display: flex; align-items: center; gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .wg-avatar {
            width: 44px; height: 44px;
            background: var(--accent);
            border-radius: 11px;
            display: grid; place-items: center;
            font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1rem;
            flex-shrink: 0;
        }
        .wg-name { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:700; }
        .wg-area { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:.15rem; }

        /* grid de puestos */
        .puestos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: .75rem;
            margin-bottom: 1.25rem;
        }

        .puesto-card {
            background: var(--surface);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 1.1rem .75rem;
            cursor: pointer;
            text-align: center;
            transition: all .18s;
            position: relative;
        }
        .puesto-card:hover {
            border-color: var(--accent-lite);
            background: var(--card);
            transform: translateY(-2px);
        }
        .puesto-card.selected {
            border-color: var(--accent-lite);
            background: rgba(37,99,235,.12);
            box-shadow: 0 0 0 1px var(--accent-lite), 0 6px 20px var(--accent-glow);
        }
        .puesto-card.occupied {
            opacity: .38;
            cursor: not-allowed;
            pointer-events: none;
        }
        .puesto-card.occupied::after {
            content: 'Ocupado';
            position: absolute; bottom: .4rem; left: 0; right: 0;
            font-size: .58rem; color: var(--red);
            text-transform: uppercase; letter-spacing: .08em;
        }

        .pc-icon {
            width: 38px; height: 38px;
            border-radius: 9px;
            display: grid; place-items: center;
            font-size: 1rem;
            margin: 0 auto .6rem;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--dim);
            transition: all .18s;
        }
        .puesto-card.selected .pc-icon {
            background: var(--accent); color: #fff; border-color: var(--accent);
        }
        .pc-nombre {
            font-family: 'Syne', sans-serif; font-weight: 700;
            font-size: .95rem; line-height: 1;
        }
        .pc-area {
            font-size: .62rem; color: var(--muted);
            text-transform: uppercase; letter-spacing: .07em;
            margin-top: .2rem;
        }

        /* check en tarjeta seleccionada */
        .pc-check {
            position: absolute; top: .45rem; right: .45rem;
            width: 18px; height: 18px;
            background: var(--accent); border-radius: 50%;
            display: none; place-items: center;
            font-size: .6rem; color: #fff;
        }
        .puesto-card.selected .pc-check { display: grid; }

        /* ── aviso sin puestos ── */
        .no-puestos {
            text-align: center; padding: 2rem 1rem;
            color: var(--muted); font-size: .82rem;
        }
        .no-puestos i { display:block; font-size:1.6rem; margin-bottom:.5rem; opacity:.3; }

        /* ── FOOTER ── */
        footer {
            position: relative; z-index: 10;
            text-align: center; padding: 1rem;
            font-size: .68rem; color: var(--muted);
            border-top: 1px solid var(--border);
        }

        /* scrollbar */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }