/* ============================================================
   LOGIN.CSS · Estilos específicos del Login
   ============================================================ */

.login-bg { position: fixed; inset: 0; background: #f3f3f3; overflow: hidden; z-index: 0; }
.login-bg::before, .login-bg::after { display: none; }
.login-bg .grid { display: none; }
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; position: relative; z-index: 1; }
.login-card { display: grid; grid-template-columns: 1fr 1.1fr; max-width: 1080px; width: 100%; background: #fff; border: 1px solid #e2e2e2; border-radius: 28px; box-shadow: 0 10px 40px rgba(0,0,0,.08); overflow: hidden; min-height: 640px; animation: cardIn .6s cubic-bezier(.4,0,.2,1); }
@keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.login-left { padding: 48px 40px; background: #fff; border-right: 1px solid #e2e2e2; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.login-left::before, .login-left::after { display: none; }
.login-left > * { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { height: 60px; width: auto; object-fit: contain; }

/* FUENTE DEL SISTEMA APLICADA */
.brand-title { color: #000; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: 2px; display: inline-block; white-space: nowrap; line-height: 1.2; min-height: 1.2em; }

#brandText { white-space: pre; }
#brandText::after { content: '_'; display: inline; margin-left: 2px; animation: blink 1s step-end infinite; color: #000; }
@keyframes blink { 50% { opacity: 0; } }

/* FUENTE DEL SISTEMA APLICADA */
.login-hero h2 { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 12px; background: #000; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.login-hero p { color: #545454; font-size: 14px; line-height: 1.6; max-width: 340px; margin-bottom: 24px; }
.features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.feature { display: flex; align-items: center; gap: 12px; color: #545454; font-size: 13px; font-weight: 500; }
.feature .lucide-icon { width: 16px; height: 16px; color: #000; }
.login-footer { font-size: 12px; color: #757575; }
.login-right { padding: 40px 48px; display: flex; flex-direction: column; justify-content: center; background: #fff; position: relative; }
.login-divider { color: #999; }
.login-divider::before, .login-divider::after { border-color: #e2e2e2; }
.input-wrap input { background: #f3f3f3; border-color: #e2e2e2; color: #000; color-scheme: light; }
.input-wrap input:focus { border-color: #000; background: #fff; }
.input-wrap > i, .input-wrap > svg { color: #757575; }
.btn-passenger-link { border-color: #e2e2e2; color: #000; background: #f3f3f3; }
.btn-passenger-link:hover { background: #e2e2e2; border-color: #d1d1d1; }

/* Terminal */
/* FUENTE DEL SISTEMA APLICADA */
.terminal-window { background: #f3f3f3; border: 1px solid #e2e2e2; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 10px; color: #000; overflow: hidden; display: flex; flex-direction: column; height: 220px; }

.terminal-header { background: #e2e2e2; padding: 6px 10px; display: flex; gap: 6px; border-bottom: 1px solid #d1d1d1; flex-shrink: 0; }
.term-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5f56; }
.term-dot:nth-child(2) { background: #ffbd2e; }
.term-dot:nth-child(3) { background: #27c93f; }
.terminal-body { padding: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; color: #000; scrollbar-width: none; }
.terminal-body::-webkit-scrollbar { display: none; }
.term-line { opacity: 0; animation: appear 0.1s forwards; }
.term-line.success { color: #05A357; }
.term-line.warn { color: #d97706; }
.term-line.error { color: #d93025; }
.term-line.cmd { color: #000; font-weight: bold; }
.cursor-block { display: inline-block; width: 6px; height: 12px; background: #000; animation: blink .75s step-end infinite; vertical-align: bottom; margin-left: 4px; }
@keyframes appear { to { opacity: 1; } }

/* Win7 stage */
.w7-stage { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 0; }
.w7-idle, .w7-active { display: flex; flex-direction: column; align-items: center; width: 100%; }
.w7-idle[hidden], .w7-active[hidden] { display: none !important; }
.w7-idle { gap: 18px; animation: fadeUp .35s ease-out; }
.w7-active { gap: 12px; animation: fadeUp .3s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.w7-avatar { width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(135deg, #000 0%, #333 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(0,0,0,.06), 0 10px 32px rgba(0,0,0,.12); transition: transform .3s, box-shadow .3s, width .3s, height .3s; overflow: hidden; flex-shrink: 0; }
.w7-avatar svg { width: 56%; height: 56%; fill: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.w7-active .w7-avatar { width: 72px; height: 72px; }
.w7-user { background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 32px; border-radius: 14px; color: inherit; font-family: inherit; transition: background .25s, transform .25s; }
.w7-user:hover { background: #f3f3f3; transform: scale(1.02); }
.w7-user:hover .w7-avatar { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(0,0,0,.08), 0 14px 40px rgba(0,0,0,.18); }
.w7-user:focus-visible { outline: none; background: #f3f3f3; box-shadow: 0 0 0 3px rgba(0,0,0,.1); }

/* FUENTE DEL SISTEMA APLICADA */
.w7-title { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: .4px; color: #000; }

.w7-hint { font-size: .82rem; color: #444; font-weight: 500; letter-spacing: .3px; }
.w7-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.w7-field { display: flex; align-items: stretch; background: #f3f3f3; border: 1px solid #e2e2e2; border-radius: 6px; overflow: hidden; transition: border-color .2s, box-shadow .2s, background .2s; }
.w7-field:focus-within { border-color: #000; box-shadow: 0 0 0 3px rgba(0,0,0,.08); background: #fff; }
.w7-field input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #000; padding: 12px 14px; font-size: .92rem; font-family: inherit; }
.w7-field input::placeholder { color: #555; }

/* 🔥 BOTÓN CIRCULAR CENTRADO Y BLANCO 🔥 */
.w7-submit-wrap {
  display: flex;
  justify-content: center; /* Centrado horizontal */
  width: 100%;
  margin-top: 12px;
}
.w7-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #ffffff; /* Blanco */
  color: #000000; /* Ícono negro */
  border: 1px solid #e2e2e2; /* Borde para que resalte en el fondo blanco */
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra más sutil */
}
.w7-icon-btn:active {
  transform: scale(0.92);
  background: #f3f3f3; /* Gris claro al tocar */
}
.w7-icon-btn svg {
  width: 24px;
  height: 24px;
}

.w7-extras { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: #444; font-weight: 500; margin-top: 2px; gap: 10px; flex-wrap: wrap; }
.w7-extras label { display: flex; align-items: center; gap: 6px; cursor: pointer; transition: color .2s; }
.w7-extras label:hover { color: #000; }
.w7-extras input[type=checkbox] { accent-color: #000; width: 12px; height: 12px; cursor: pointer; }
.w7-extras a { color: #444; text-decoration: none; transition: color .2s; }
.w7-extras a:hover { color: #000; text-decoration: underline; }
.w7-error { margin-top: 6px; padding: 10px 14px; background: rgba(217,48,37,.08); border: 1px solid rgba(217,48,37,.25); color: #d93025; border-radius: 6px; font-size: .78rem; text-align: center; line-height: 1.4; animation: errorShake .3s ease-out; }
@keyframes errorShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.w7-back { margin-top: 10px; background: transparent; border: none; color: #444; font-size: .76rem; font-weight: 500; letter-spacing: .3px; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-family: inherit; transition: color .2s, background .2s; }
.w7-back:hover { color: #000; background: #f3f3f3; }
.w7-passenger { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border: 1px solid #e2e2e2; border-radius: 8px; color: #000; background: #f3f3f3; text-decoration: none; font-size: .8rem; transition: all .2s; }
.w7-passenger:hover { background: #e2e2e2; border-color: #d1d1d1; }
.w7-passenger svg { width: 16px; height: 16px; }
.w7-clock { position: fixed; right: 22px; bottom: 22px; text-align: right; z-index: 3; pointer-events: none; user-select: none; opacity: .75; }
.w7-clock-date { font-size: .7rem; color: #757575; letter-spacing: .4px; }
.w7-clock-time { font-size: 1.6rem; font-weight: 300; color: #000; letter-spacing: 1.2px; font-variant-numeric: tabular-nums; }

/* Pestañas y Paneles */
.login-tabs {
    display: flex;
    width: 100%;
    max-width: 320px;
    background: #f3f3f3;
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 8px;
}
.login-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: #6e6e73;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.login-tab.active {
    background: #fff;
    color: #000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.login-panel { display: none; width: 100%; flex-direction: column; align-items: center; }
.login-panel.active { display: flex; }

/* Captcha */
.math-captcha-box {
    margin-top: 4px;
    margin-bottom: 4px;
    text-align: center;
    background: #f3f3f3;
    padding: 12px;
    border-radius: 8px;
}
.math-captcha-box label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    display: block;
}
.math-captcha-box input {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    outline: none;
}
.math-captcha-box input:focus {
    border-color: #000;
}

@media (max-width: 900px) {
  .login-card { grid-template-columns: 1fr; min-height: unset; }
  .login-left { display: flex; padding: 32px 24px 10px; background: transparent; border: none; justify-content: center; }
  .login-left::before, .login-left::after { display: none; }
  .login-left .login-hero, .login-left .terminal-window, .login-left .login-footer { display: none; }
  .login-left .brand { flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; gap: 8px; }
  .login-left .brand-title { min-width: 200px; text-align: center; font-size: 1rem; }
  .login-right { padding: 0 24px 32px; justify-content: flex-start; }
  .w7-stage { justify-content: flex-start; padding-top: 10px; }
}

/* ============================================================
   TARJETAS SIMPLES (Para Entrada y Acceso)
   ============================================================ */
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: #f3f3f3; }
.login-card-single { background: #fff; border: 1px solid #e2e2e2; border-radius: 20px; width: 100%; max-width: 480px; box-shadow: 0 10px 40px rgba(0,0,0,.08); padding: 40px; }
.login-header-center { text-align: center; margin-bottom: 24px; }
.brand-centered { justify-content: center; display: flex; margin-bottom: 16px; }
.brand-logo-md { height: 50px; width: auto; object-fit: contain; }
.login-links { text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--tx-2); }
.login-links a { color: #000; font-weight: bold; text-decoration: none; }
.btn-block { width: 100%; padding: 16px; font-size: 1rem; }

/* Divisor "O" */
.login-divider { display: flex; align-items: center; text-align: center; color: #999; font-size: 12px; margin: 20px 0; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; border-bottom: 1px solid #e2e2e2; }
.login-divider::before { margin-right: 10px; }
.login-divider::after { margin-left: 10px; }