.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  background: #353434;
  padding: 25px;
  border-radius: 14px;
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  animation: fadeIn 0.25s ease-out;
  text-align: center;
}

/* LOGO CENTRADO */
.modal-logo img {
  width: 220px;
  margin: 0 auto 10px auto;
  display: block;
}

/* Inputs */
.modal-content input {
  padding: 10px;
  border-radius: 6px;
  border: none;
  outline: none;
  background: #4a4a4a;
  color: white;
  font-size: 15px;
}

.modal-content input::placeholder {
  color: #c9c9c9;
}

/* Buttons */
.btn-primary {
  background: #1e90ff;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
}

.btn-secondary {
  background: #696969;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
}

.btn-primary:hover { background: #1677d6; }
.btn-secondary:hover { background: #5c5c5c; }

/* Error text */
.error {
  color: red;
  height: 18px;
  font-size: 14px;
}

/* Animation */
@keyframes fadeIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Hide */
.hidden { display: none; }