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

:root{
  --primary-gradient:linear-gradient(135deg,#0A55FF 0%,#0037B3 100%);
  --secondary-gradient:linear-gradient(135deg,#00CD99 100%,#52FFD3 0%);
  --text-primary:#0b1f3a;
  --text-secondary:#475569;
  --success-color:#10b981;
  --error-color:#ef4444;
  --input-bg:#f9fafb;
  --shadow-light:0 8px 32px rgba(31,38,135,.10);
  --shadow-heavy:0 20px 40px rgba(0,0,0,.10);
}

body{
  font-family:'Poppins',sans-serif;
  background:#f9fafb;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  position:relative;
  overflow-x:hidden;
}

.background-elements{display:none}

.volver-btn{
  position:fixed;
  top:1.2rem;
  left:1.2rem;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:50px;
  color:var(--text-secondary);
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  transition:all .3s ease;
  box-shadow:var(--shadow-light);
  z-index:1000;
}
.volver-btn:hover{background:#f1f5f9}

.back-arrow{
  border:solid currentColor;
  border-width:0 3px 3px 0;
  display:inline-block;
  padding:5px;
  transform:rotate(135deg);
}

.login-container{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  width:100%;
  position:relative;
  z-index:1;
}

.login-box{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:24px;
  padding:2.5rem;
  max-width:420px;
  width:100%;
  box-shadow:var(--shadow-light);
  text-align:center;
  position:relative;
}

.login-header img{
  width:70px;height:70px;margin-bottom:10px;object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.15));
}

h4{font-size:1.8rem;font-weight:700;color:var(--text-primary);margin-bottom:2rem}

.form{display:flex;flex-direction:column;gap:1.3rem;margin-bottom:2rem}

.input-group input{
  width:100%;
  padding:1.2rem 1.3rem;
  border:2px solid #e2e8f0;
  border-radius:14px;
  font-size:1rem;
  background:var(--input-bg);
  color:var(--text-primary);
  transition:all .3s ease;
}
.input-group input::placeholder{color:var(--text-secondary)}
.input-group input:focus{
  outline:none;
  border-color:#165bfc;
  background:#fff;
  box-shadow:0 0 0 4px rgba(10,85,255,.1);
}

.password-container{position:relative}
.password-container input{padding-right:3.5rem}

.toggle-password{
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:1.1rem;
  color:var(--text-secondary);
  user-select:none;
  padding:6px;
  border-radius:8px;
}
.toggle-password:hover{color:#0A55FF;background:#f1f5f9}

.login-button{
  width:100%;
  padding:1.2rem;
  background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
  color:#fff;
  border:none;
  border-radius:14px;
  font-size:1.1rem;
  font-weight:600;
  cursor:pointer;
  transition:all .3s ease;
}
.login-button:hover{box-shadow:0 12px 28px rgba(0,55,179,.4);background:#00CD99}
.login-button:disabled{opacity:.7;cursor:not-allowed}

.forgot-password{margin-top:1rem}
.forgot-password a{color:#00a389;font-weight:500;text-decoration:none;font-size:1rem}
.forgot-password a:hover{text-decoration:underline}

.iniciar-registro{margin-top:1rem}
.iniciar-registro a{color:#0b1f3a;font-weight:500;text-decoration:none;font-size:1rem}
.iniciar-registro a:hover{text-decoration:underline}

.footer-text{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-top:2rem}
.footer-text b{color:var(--text-primary)}

@media (max-width:480px){
  .login-box{padding:1.8rem;border-radius:18px}
  h4{font-size:1.5rem}
  .volver-btn{font-size:.9rem;padding:10px 14px}
}
.public-stats-bar{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--shadow-light);
  font-family: 'Poppins', sans-serif;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: .55rem;
  z-index: 999;
}
.public-stats-bar b{ color: var(--text-primary); font-weight: 700; }
.public-stats-bar .stat-label{ font-weight: 500; }
.public-stats-bar .stat-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #00CD99 0%, #00a389 60%, #08916d 100%);
  box-shadow: 0 0 0 3px rgba(0,163,137,.10);
}
@media (max-width:480px){
  .public-stats-bar{
    bottom: 16px;
    font-size: .95rem;
    padding: 9px 12px;
  }
  .public-stats-bar .stat-label{
    display: inline;
  }
}
/* ===== Barra pública (desktop por defecto) ===== */
.public-stats-bar{
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom)); /* respeta notch */
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--shadow-light);
  font-family: 'Poppins', sans-serif;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: .55rem;
  z-index: 999;
}

.public-stats-bar b{ color: var(--text-primary); font-weight: 700; }
.public-stats-bar .stat-label{ font-weight: 500; }
.public-stats-bar .stat-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #00CD99 0%, #00a389 60%, #08916d 100%);
  box-shadow: 0 0 0 3px rgba(0,163,137,.10);
}

/* Dejá un respiro al final para que no "toque" la tarjeta */
.login-container{ padding-bottom: 80px; }

/* ===== Mobile (≤ 480–640px): ocupa ancho con márgenes, tipografía más chica ===== */
@media (max-width: 640px){
  .public-stats-bar{
    left: 12px; right: 12px;      /* ocupa ancho con márgenes */
    transform: none;              /* sin translate en mobile */
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 10px 12px;
    border-radius: 12px;
    justify-content: space-between;
    font-size: .95rem;
  }
}
@media (max-width: 480px){
  .public-stats-bar{
    padding: 9px 12px;
    font-size: .9rem;
  }
  /* Si querés ultra-compacto, ocultá el texto y dejá sólo el número */
  /* .public-stats-bar .stat-label{ display:none; } */
}

/* Cuando aparece el teclado (clase 'lifted' desde JS) */
.public-stats-bar.lifted{
  bottom: calc(env(safe-area-inset-bottom) + 64px); /* súbela para no tapar inputs */
}

/* Accesibilidad: sin animaciones bruscas si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .public-stats-bar{ transition: none; }
}