/* ===== KM100 Fleet · izquierda futurista + formulario claro (der) — scoped ===== */
.km-login *{box-sizing:border-box}
.body.login-page{
    --marca:#E8392B; --azul:#173a6b; --azul-2:#0b1a33;
    --concreto:#F4F6F8; --acero:#5B6B7B; --linea:#E3E8EE; --tinta:#1B2430;
    position:fixed; inset:0; z-index:9999; overflow:auto;
    display:grid; grid-template-columns:minmax(0,1fr) 10px minmax(0,.95fr);
    background:var(--concreto); color:var(--tinta);
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ===== IZQUIERDA: futurista ===== */
.km-brand{position:relative;overflow:hidden;display:flex;align-items:center;padding:48px 56px;color:#EAF2FF;
    background:linear-gradient(115deg,#212A38 0%,#151A23 48%,#0D1116 100%)}
/* estrellas */
.km-stars{position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
      radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),
      radial-gradient(1.2px 1.2px at 28% 62%,#cfe0ff,transparent),
      radial-gradient(1.6px 1.6px at 46% 30%,#fff,transparent),
      radial-gradient(1.2px 1.2px at 66% 74%,#ffd0cb,transparent),
      radial-gradient(1.4px 1.4px at 82% 22%,#fff,transparent),
      radial-gradient(1.2px 1.2px at 90% 58%,#cfe0ff,transparent),
      radial-gradient(1.2px 1.2px at 38% 86%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 72% 44%,#fff,transparent),
      radial-gradient(1.2px 1.2px at 8% 78%,#ffd0cb,transparent);
    animation:km-twinkle 4.5s ease-in-out infinite}
/* anillos de radar */
.km-rings{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
    background:repeating-radial-gradient(circle at 80% 28%, transparent 0 43px, rgba(150,190,255,.09) 43px 44px);
    mask-image:radial-gradient(60% 60% at 80% 28%,#000,transparent 75%);
    -webkit-mask-image:radial-gradient(60% 60% at 80% 28%,#000,transparent 75%)}

/* escena holográfica (área derecha del panel) */
.km-livefeed{position:absolute;top:20px;right:24px;z-index:2;display:inline-flex;align-items:center;gap:7px;
    padding:6px 12px;border-radius:999px;background:rgba(232,57,43,.12);border:1px solid rgba(232,57,43,.45);
    font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:10px;letter-spacing:.16em;color:#F2A9A2;text-transform:uppercase}
.km-lf-dot{width:7px;height:7px;border-radius:50%;background:var(--marca);box-shadow:0 0 8px var(--marca);animation:km-blink 1.4s ease-in-out infinite}
.km-scene{position:absolute;top:0;bottom:0;right:0;width:60%;max-width:640px;z-index:0;pointer-events:none;opacity:.9}
.km-scene .van{transform-box:fill-box;transform-origin:center;animation:km-float 4.5s ease-in-out infinite;filter:drop-shadow(0 0 9px rgba(127,224,234,.5))}
.km-scene .flow path{animation:km-flow 2.6s linear infinite}
.km-scene .flow path:nth-of-type(2){animation-delay:.65s}
.km-scene .flow path:nth-of-type(3){animation-delay:1.3s}
.km-scene .flow path:nth-of-type(4){animation-delay:1.95s}
.km-scene .node{animation:km-blink 2.2s ease-in-out infinite}
.km-scene .hex{animation:km-hex 3.5s ease-in-out infinite}
.km-scene .orbit{transform-box:view-box;transform-origin:120px 520px;animation:km-spin 6s linear infinite}
.km-scene .chip{filter:drop-shadow(0 0 10px rgba(95,185,240,.55))}
.km-scene .core{transform-box:fill-box;transform-origin:center;animation:km-core 2s ease-in-out infinite}
.km-scene .flow2 path{animation:km-flow2 3s linear infinite}
.km-scene .flow2 path:nth-of-type(2){animation-delay:1.3s}

.km-brand-inner{position:relative;z-index:1;max-width:440px}
.km-logo-block{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.km-logo-tile{width:74px;height:60px;border-radius:14px;overflow:hidden;flex:0 0 auto;box-shadow:0 10px 30px -8px rgba(232,57,43,.5)}
.km-logo-tile img{width:100%;height:auto;display:block;object-fit:cover;object-position:top}
.km-word{display:flex;flex-direction:column;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;line-height:.92;font-size:34px;letter-spacing:.01em}
.km-word b{font-weight:700} .km-word .red{color:var(--marca)}

.km-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
    background:rgba(255,255,255,.06);border:1px solid rgba(150,190,255,.22);
    font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:10.5px;letter-spacing:.16em;color:#B9CEEF;text-transform:uppercase}
.km-pill-dot{width:7px;height:7px;border-radius:50%;background:var(--marca);box-shadow:0 0 0 3px rgba(232,57,43,.22);animation:km-blink 2s ease-in-out infinite}

.km-desc{color:#9DB4D6;font-size:15.5px;line-height:1.55;margin:20px 0 30px;max-width:40ch}

/* indicadores con iconos animados */
.km-inds{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:440px}
.km-ind{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 10px;border-radius:14px;
    background:rgba(255,255,255,.045);border:1px solid rgba(150,190,255,.16)}
.km-chart{width:100%;height:46px;display:flex;align-items:center;justify-content:center}
.km-chart svg{width:64px;height:40px;overflow:visible}
.km-ind-l{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:9.5px;letter-spacing:.08em;color:#8FA8CC;text-transform:uppercase;text-align:center}
/* barras */
.c-bars .cb{fill:var(--marca);transform-box:fill-box;transform-origin:center bottom;animation:km-bar 1.3s ease-in-out infinite}
.c-bars .cb:nth-child(2){fill:#7FB0FF;animation-delay:.18s;animation-duration:1.6s}
.c-bars .cb:nth-child(3){fill:#E7A13B;animation-delay:.36s;animation-duration:1.1s}
.c-bars .cb:nth-child(4){animation-delay:.5s;animation-duration:1.45s}
/* torta (pie) */
.c-pie{width:44px;height:44px;border-radius:50%;box-shadow:0 5px 16px rgba(0,0,0,.4);
    background:conic-gradient(var(--marca) 0 32%,#7FB0FF 32% 58%,#E7A13B 58% 80%,#3A4658 80% 100%);
    animation:km-spin 7s linear infinite}
/* lineal */
.c-line .cl-area{fill:rgba(232,57,43,.16);stroke:none}
.c-line .cl-line{fill:none;stroke:var(--marca);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:120;stroke-dashoffset:120;animation:km-draw 3s ease-in-out infinite alternate}
.c-line .cl-dot{fill:#fff;stroke:var(--marca);stroke-width:1.5;animation:km-blink 1.6s ease-in-out infinite}

/* ---- divisor: carretera ---- */
.km-road{background:#0D1116;
    background-image:repeating-linear-gradient(to bottom,var(--marca) 0 22px,transparent 22px 46px);
    background-size:100% 46px;background-repeat:repeat-y}

/* ===== DERECHA: formulario claro (SIN CAMBIOS) ===== */
.km-panel{display:flex;align-items:center;justify-content:center;padding:40px 34px;background:var(--concreto)}
.km-access{position:relative;width:100%;max-width:360px}
.km-logo{display:block;width:118px;height:auto;margin:0 auto 18px}
.km-card-head{text-align:center}
.km-card-head h2{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:28px;margin:0 0 4px;letter-spacing:.01em;color:var(--tinta)}
.km-card-head p{color:var(--acero);margin:0 0 24px;font-size:14px}
.km-group{margin-bottom:17px}
.km-group .control-label,.km-group label{display:block;font-size:12px;font-weight:600;color:var(--acero);margin:0 0 7px;letter-spacing:.06em;text-transform:uppercase}
.km-input{width:100%;height:46px;padding:0 14px;font-size:15px;font-family:inherit;color:var(--tinta);
    background:#fff;border:1.5px solid var(--linea);border-radius:10px;transition:border-color .15s,box-shadow .15s}
.km-input::placeholder{color:#B4BEC8}
.km-input:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 4px rgba(232,57,43,.14)}
.km-group.has-error .km-input{border-color:#E5484D;box-shadow:0 0 0 4px rgba(229,72,77,.12)}
.km-err{color:#E5484D;font-size:12.5px;margin-top:6px}
.km-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 20px}
.km-check{margin:0 0 16px}
.km-check label{display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:normal;font-weight:500;color:var(--tinta);font-size:14px;margin:0;cursor:pointer}
.km-check input{width:17px;height:17px;accent-color:var(--marca);cursor:pointer}
.km-check .km-err{display:none} .km-row .km-check{margin:0}
.km-forgot{color:var(--acero);font-size:13.5px;text-decoration:none;border-bottom:1px solid transparent;transition:.15s;white-space:nowrap}
.km-forgot:hover{color:var(--tinta);border-bottom-color:var(--marca)}
.km-btn{width:100%;height:47px;border:0;border-radius:10px;cursor:pointer;margin-top:2px;
    font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase;
    color:#fff;background:var(--marca);box-shadow:0 6px 16px rgba(232,57,43,.28);transition:filter .15s,transform .08s,box-shadow .15s}
.km-btn:hover{filter:brightness(1.05);box-shadow:0 8px 22px rgba(232,57,43,.4)}
.km-btn:active{transform:translateY(1px)}
.km-btn:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.km-signup{text-align:center;margin:20px 0 0;color:var(--acero);font-size:14px}
.km-signup a{color:var(--tinta);font-weight:600;text-decoration:none;border-bottom:2px solid var(--marca)}
.km-alert{padding:11px 14px;border-radius:9px;font-size:13.5px;margin-bottom:16px;border:1px solid}
.km-alert-error,.km-alert-danger{background:#FDECEC;border-color:#F3C0C2;color:#B42318}
.km-alert-success{background:#E9F7EE;border-color:#B8E6C8;color:#1B6B36}
.km-alert-info,.km-alert-warning{background:#FFF6E0;border-color:#F3DFA2;color:#8A6100}

/* animaciones */
@keyframes km-twinkle{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes km-blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes km-spin{to{transform:rotate(360deg)}}
@keyframes km-bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes km-radar{0%{opacity:.6;transform:scale(.5)}80%,100%{opacity:0;transform:scale(1)}}
@keyframes km-drive{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@keyframes km-draw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes km-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes km-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes km-flow2{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
@keyframes km-core{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
@keyframes km-hex{0%,100%{opacity:.5}50%{opacity:1}}

/* responsive */
@media (max-width:900px){
    .km-brand{padding:32px 34px}
    .km-inds{grid-template-columns:repeat(4,1fr);gap:10px}
    .km-word{font-size:28px}
}
@media (max-width:620px){
    .km-login{grid-template-columns:1fr;grid-template-rows:auto 6px 1fr}
    .km-brand{padding:26px 26px}
    .km-desc{display:none} .km-inds{grid-template-columns:repeat(4,1fr)}
    .km-road{background-image:repeating-linear-gradient(to right,var(--marca) 0 22px,transparent 22px 46px);background-size:46px 100%}
}
@media (max-width:480px){
    .km-brand{display:none} .km-road{display:none} .km-panel{padding:28px 18px}
}
@media (prefers-reduced-motion:reduce){
    .km-stars,.km-pill-dot,.c-bars .cb,.c-pie,.c-line .cl-line,.c-line .cl-dot,
    .km-lf-dot,.km-scene .flow path,.km-scene .flow2 path,.km-scene .node,.km-scene .core{animation:none}
}