@font-face {
  font-family: "Sora";
  src: url("fonts/sora-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/sora-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/sora-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --display: "Sora", "Segoe UI", sans-serif;
  --azul: #0a84ff;
  --azul-oscuro: #0067d6;
  --amarillo: #ffd200;
  --texto: #0f1b3d;
  --texto-2: #2c426b;
  --texto-3: #4a5f86;
  --borde: #dbe5f3;
}

* { box-sizing: border-box; }
body { margin: 0; }
.login-page { min-width: 1100px; min-height: 680px; height: 100vh; overflow: hidden; color: var(--texto); background: #f3f8fe; font-family: "Segoe UI", system-ui, sans-serif; }
.login-layout { display: grid; grid-template-columns: 58.71% 41.29%; height: 100%; }
.login-brand { position: relative; animation: brand-enter 900ms cubic-bezier(.2,.7,.2,1) both; overflow: hidden; background: #0089d4 var(--login-brand-image) left top / 170.33% 100% no-repeat; }
.login-panel { position: relative; overflow: hidden; isolation: isolate; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 32px; background: radial-gradient(ellipse at 48% 46%, #e4f2ff 0%, #f3f8fe 70%, #f7faff 100%); }
.login-form-container { position: relative; z-index: 1; width: 100%; max-width: 500px; }
.login-footer { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 360px; margin: 48px auto 0; font-size: 13px; color: #607ba7; white-space: nowrap; }
.login-footer::before, .login-footer::after { content: ""; flex: 1; height: 1px; background: #a4bad7; }
@keyframes card-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-card { animation: card-enter 700ms cubic-bezier(.2,.7,.2,1) 200ms both; position: relative; width: 100%; background: #fff; color: var(--texto); border-radius: 26px; padding: 48px 46px 44px; box-shadow: 0 40px 90px -20px rgb(0 20 70 / 55%), 0 0 0 1px rgb(255 255 255 / 8%); }
.login-card::before { transform-origin: center; animation: stripe-enter 600ms cubic-bezier(.2,.7,.2,1) 500ms both; content: ""; position: absolute; left: 46px; right: 46px; top: 0; height: 4px; border-radius: 0 0 6px 6px; background: var(--amarillo); }
.login-card h1 { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; margin: 0; }
.login-intro { font-size: 15.5px; line-height: 1.5; color: var(--texto-3); margin: 8px 0 32px; }
.login-field { margin-bottom: 20px; }
.login-field > label { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--texto-2); margin-bottom: 8px; }
.login-input-wrap { position: relative; display: flex; align-items: center; }
.login-icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field-icon { position: absolute; left: 16px; color: #6b7fa3; pointer-events: none; }
.login-input { width: 100%; min-width: 0; height: 54px; border-radius: 14px; border: 1.5px solid var(--borde); background: #f6f9fd; padding: 0 48px; font: inherit; font-size: 16px; color: var(--texto); transition: border-color .15s, background .15s, box-shadow .15s; }
.login-input::placeholder { color: #8a9bba; opacity: 1; }
.login-input:focus { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 4px rgb(10 132 255 / 14%); outline: none; }
.login-input[aria-invalid="true"] { border-color: #e57373; }
.login-page :is(input[type="checkbox"], button):focus-visible { outline: 2px solid #7cc8f5; outline-offset: 2px; }
.password-toggle { position: absolute; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #6b7fa3; cursor: pointer; }
.password-toggle:hover { background: #eef4fc; }
.hidden, [hidden] { display: none !important; }
.caps-lock-warning { color: #856210; font-size: 13px; line-height: 1.4; margin: 0; }
.caps-lock-warning:has(span:not([hidden])) { margin-top: 7px; }
.remember-session { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 4px 0 26px; font-size: 14px; line-height: 1.5; color: var(--texto-3); cursor: pointer; }
.remember-session input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--azul); cursor: pointer; }
.login-submit { display: flex; justify-content: center; align-items: center; gap: 18px; width: 100%; height: 56px; border: 0; border-radius: 14px; font-family: var(--display); font-size: 16px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--azul), var(--azul-oscuro)); box-shadow: 0 14px 30px -10px rgb(10 132 255 / 70%); cursor: pointer; transition: transform 200ms, translate 200ms, box-shadow 200ms; }
.login-submit .login-icon { width: 22px; height: 22px; transition: transform 200ms; }
.login-submit:hover:not(:disabled) { translate: 0 -1px; box-shadow: 0 18px 36px -10px rgb(10 132 255 / 85%); }
.login-submit:hover:not(:disabled) .login-icon { transform: translateX(3px); }
.login-submit:disabled { opacity: .75; cursor: wait; transform: none; translate: none; }
.login-error { display: flex; align-items: flex-start; gap: 10px; padding: 13px; margin-bottom: 22px; border: 1px solid #f5c2c2; border-radius: 8px; background: #fdecec; color: #a12828; font-size: 14px; line-height: 1.5; }
.login-error .login-icon { margin-top: 1px; }

.login-field:focus-within > label { color: var(--azul); }
.login-field > label { transition: color 150ms; }
.login-card:not(:has(.login-error)) > :is(h1, .login-intro, .login-field, .remember-session, .login-submit) {
  animation: child-enter 450ms cubic-bezier(.2,.7,.2,1) var(--entrance-delay, 350ms) both;
}
.login-intro { --entrance-delay: 410ms; }
.login-field { --entrance-delay: 470ms; }
.login-field + .login-field { --entrance-delay: 530ms; }
.remember-session { --entrance-delay: 590ms; }
.login-submit { --entrance-delay: 650ms; }
.login-card:has(.login-error) { animation: card-shake 400ms ease-out both; }
.login-card:has(.login-error)::before { animation: none; }
.login-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 16%) 50%, transparent 60%); background-size: 250% 100%; background-position: 150% 0; animation: brand-reflection 8s linear 1.2s infinite both; }
.login-ambient { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgb(10 132 255 / 18%), transparent 70%); }
.login-ambient-one { width: 420px; height: 420px; top: 8%; left: -120px; animation: ambient-one 18s ease-in-out infinite alternate; }
.login-ambient-two { width: 340px; height: 340px; bottom: 4%; right: -80px; animation: ambient-two 22s ease-in-out infinite alternate; }
.login-spinner { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; animation: spinner-turn .8s linear infinite; }
.login-spinner circle { opacity: .25; }
@keyframes brand-enter { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }
@keyframes child-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes stripe-enter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Barrido de 1.8s dentro de un ciclo de 8s; pausa el resto del ciclo. */
@keyframes brand-reflection { 0% { background-position: 150% 0; } 22.5%, 100% { background-position: -50% 0; } }
@keyframes ambient-one { from { translate: -40px -40px; } to { translate: 40px 40px; } }
@keyframes ambient-two { from { translate: 40px -40px; } to { translate: -40px 40px; } }
@keyframes spinner-turn { to { rotate: 360deg; } }
@keyframes card-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

@media (max-width: 1440px) {
  .login-form-container { max-width: 440px; }
  .login-card { padding: 40px 36px 36px; }
  .login-card::before { left: 36px; right: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .login-brand, .login-card, .login-card > :is(h1, .login-intro, .login-field, .remember-session, .login-submit) { opacity: 1; transform: none; }
  .login-brand::after { display: none; }
  .login-ambient { translate: none; }
  .login-spinner { rotate: none; }
  .login-submit, .login-submit .login-icon { transform: none !important; translate: none !important; }
}

/* Marca y textos HTML sobre fondo azul, con ilustración de facturación. */
.login-brand { display:flex; align-items:center; background:linear-gradient(145deg,#0558a8,#0877d4); isolation:isolate; }
.login-brand::before { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:radial-gradient(ellipse 48% 25% at 34% 35%,#0558a8 0%,rgb(5 88 168 / 96%) 48%,rgb(5 88 168 / 65%) 73%,transparent 100%),linear-gradient(90deg,rgb(5 88 168 / 92%),rgb(5 88 168 / 68%) 42%,rgb(5 88 168 / 12%) 100%); }
/* Coordenadas proporcionales a la composición de login-reference.png de Taxis.
   El texto sigue siendo HTML; la imagen de Taxis no se utiliza en este panel. */
.brand-copy { position:absolute; z-index:2; inset:0; color:white; }
.brand-logo { position:absolute; left:12.2%; top:26.1%; display:block; width:50%; height:auto; object-fit:contain; }
.brand-copy h2 { position:absolute; left:12.2%; top:47.3%; margin:0; font:700 3.2vw/1.2 "Segoe UI",sans-serif; letter-spacing:-.025em; white-space:nowrap; }
.brand-line { position:absolute; left:12.2%; top:55.5%; display:block; width:8.2%; height:.95vh; background:#ffd200; border-radius:999px; }
.brand-copy p { position:absolute; left:12.2%; top:59.2%; font:400 1.6vw/1.15 "Segoe UI",sans-serif; margin:0; color:#fff; }
.brand-illustration { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.brand-arc { position:absolute; width:420px; height:420px; border:40px solid #ffd200; border-radius:50%; pointer-events:none; }
.brand-arc-top { top:-290px; left:-230px; box-shadow:0 0 0 28px #0a84ff; }
.brand-arc-bottom { bottom:-290px; right:-230px; border-color:#0a84ff; box-shadow:0 0 0 28px #ffd200; }