:root{
  --overlay: rgba(0,0,0,0.45);
  --card-bg: rgba(255,255,255,0.9);
  --border: rgba(0,0,0,0.1);
  --ok: #0a6;
  --err: #b00;
  --footer-bg: #000;
  --footer-fg: #9ef5c2; /* verde claro */
}
*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; font-family: Arial, Helvetica, sans-serif; }

body{
  background-image: url('assets/img/img1.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: background-image 0.6s ease-in-out;
}

/* Login wrapper */
#login{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Overlay */
.bg-overlay{ position: fixed; inset:0; background: var(--overlay); z-index:0; }

/* Card */
.login-card{
  position: relative; z-index:2;
  width: min(92vw, 360px);
  background: var(--card-bg);
  padding: 18px;
  border-radius: 10px; border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* Alerts */
.alert{
  margin: 0 0 12px 0; padding: 10px 12px; border-radius: 8px;
  border:1px solid var(--border); background: #fff; color:#333; font-size: 0.95rem;
}
.alert.ok{ border-color:#cfe9dc; background:#f3fbf7; color:var(--ok); }
.alert.err{ border-color:#f0c9c9; background:#fff5f5; color:var(--err); }

/* Inputs / Buttons / Select (mismo tamaño) */
label.sr-only{ position:absolute; left:-9999px; }

input[type=text], input[type=password], select#projectSelect{
  width:100%; padding:10px 12px; margin:8px 0 10px 0;
  border-radius:8px; border:1px solid #bbb; font-size:1rem;
  background: #fff; color:#222;
}

select#projectSelect:disabled{
  background: #f0f0f0; color:#777; cursor: not-allowed;
}

.btn{
  display:inline-block; width:auto; padding:10px 14px; margin-top:6px;
  border-radius:8px; border:0; background:#007bff; color:#fff; font-weight:600; cursor:pointer;
}
.btn:disabled{ background:#9bbcf0; cursor:not-allowed; }
.btn-secondary{ padding:8px 12px; margin-left:8px; background:#e9ecef; color:#333; font-weight:600; }
.row{ display:flex; align-items:center; justify-content:flex-start; gap:8px; }

#stepCred{ display:none; }

/* Typewriter (arriba-izquierda) */
#typewriteWrap{
  position: fixed;
  top: 10px; left: 12px;
  z-index: 3;
  background: rgba(0,0,0,0.35);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .2px;
  max-width: 92vw;
}
#typewriter{
  border-right: 2px solid #fff;
  white-space: nowrap;
  overflow: hidden;
}

/* ===== Franja inferior ===== */
#login-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  background: var(--footer-bg);
  color: var(--footer-fg);
  z-index: 10;
  padding: 8px 12px;
  font-size: 0.9rem;
  line-height: 1.35;
}
#login-footer code {
  color: var(--footer-fg);
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", Consolas, monospace;
  font-size: 0.9rem;
}
#login-footer .footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
#login-footer .footer-item {
  white-space: nowrap;
}