:root {
  --bg-color: #000000;
  --card-bg: #1a1a1a;
  --input-bg: #242424;
  --text-main: #ffffff;
  --text-dim: #757575;
  --monster-stroke: #000000;
  --corp-blue: #035498;
  --corp-green: #1AA068;
}

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

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

/* Alertas de Feedback */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 0.85rem;
  line-height: 1.4;
  border: 1px solid transparent;
  animation: fadeIn 0.3s ease-out;
  text-align: center;
}

.alert-error {
  background-color: rgba(255, 77, 77, 0.1);
  border-color: rgba(255, 77, 77, 0.2);
  color: #ff6666;
}

.alert-success {
  background-color: rgba(26, 160, 104, 0.1);
  border-color: rgba(26, 160, 104, 0.2);
  color: #24d18b;
}

.alert ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.error-mensaje {
  color: #ff4d4d;
  font-size: 0.75rem;
  margin-top: 5px;
  margin-left: 12px; /* Alineado con el inicio visual del texto */
  display: block;
  text-align: left;
}

.btn-login-desabilitado {
  opacity: 0.5;
  cursor: not-allowed !important;
  filter: grayscale(1);
}

.background-city {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none"><path d="M0,300 L0,200 L30,200 L30,150 L60,150 L60,230 L100,230 L100,100 L140,100 L140,180 L180,180 L180,50 L220,50 L220,200 L260,200 L260,120 L300,120 L300,250 L340,250 L340,100 L380,100 L380,180 L420,180 L420,30 L460,30 L460,200 L500,200 L500,120 L540,120 L540,250 L580,250 L580,100 L620,100 L620,180 L660,180 L660,50 L700,50 L700,200 L740,200 L740,120 L780,120 L780,250 L820,250 L820,100 L860,100 L860,180 L900,180 L900,30 L940,30 L940,200 L1000,200 L1000,300 Z" fill="%231a1a1a"/></svg>');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  opacity: 0.5;
}

.login-card {
  width: 100%;
  max-width: 380px;
  position: relative;
  padding: 0 16px;
}

/* --- MASCOTA --- */
.yeti-wrapper {
  width: 170px;
  margin: 0 auto -12px;
  position: relative;
  z-index: 2;
}

.yeti-part {
  fill: #fff;
  stroke: var(--monster-stroke);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.suit-jacket {
  fill: var(--corp-blue);
  stroke: var(--monster-stroke);
  stroke-width: 3.5;
}

.suit-shirt {
  fill: #fff;
  stroke: var(--monster-stroke);
  stroke-width: 2.5;
}

.suit-tie {
  fill: var(--corp-green);
  stroke: var(--monster-stroke);
  stroke-width: 2.5;
}

#face-group {
  transition: transform 0.2s ease-out;
}

.hand {
  fill: #fff;
  stroke: var(--monster-stroke);
  stroke-width: 3.5;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hiding-pass .hand-l {
  transform: translate(35px, -72px);
}

.hiding-pass .hand-r {
  transform: translate(-35px, -72px);
}

.peek-active .hand-r {
  transform: translate(0, 0) !important;
}

/* --- FORM --- */
.form-content {
  background: var(--card-bg);
  padding: 45px 30px 30px;
  border-radius: 28px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  border: 1px solid #252525;
  text-align: center;
}

.logo-text {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 5px;
  display: block;
}

.subtitle {
  color: var(--text-dim);
  font-size: 0.7rem;
  margin-bottom: 30px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.input-wrapper {
  position: relative;
  margin-bottom: 18px;
}

input {
  width: 100%;
  padding: 15px 18px;
  background: var(--input-bg);
  border: 2px solid #2a2a2a;
  border-radius: 14px;
  color: white;
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
}

input:focus {
  border-color: var(--corp-blue);
}

.toggle-pass {
  position: absolute;
  right: 15px;
  top: 26px; /* Posición fija para que no se mueva con el error */
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
  display: flex; /* Asegura centrado del SVG */
  align-items: center;
}

.btn-submit {
  width: 100%;
  padding: 16px;
  background: white;
  color: black;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  font-size: 1rem;
}

.nav-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-decoration: none;
}

.nav-link b {
  color: var(--corp-blue);
}

@media (max-width: 480px) {
  .form-content {
    padding: 30px 20px 20px;
  }
}