/* =============================================================
   VIGITOOLS - Estilos globales de inputs
   - Refactored: Notch effects moved to notch.css
   ============================================================= */

.notch-login {
  position: relative;
  margin-bottom: 1.25rem;
}

.notch-login input.form-control {
  width: 100%;
  padding: 18px 12px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid #157ba3 !important;
  /* azul cielo */
  border-radius: 8px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none !important;
  box-shadow: none !important;
}

.notch-login input.form-control::placeholder {
  color: transparent;
}

.notch-login label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.16s ease;
  color: rgba(16, 24, 40, 0.6);
  font-size: 0.95rem;
  pointer-events: none;
  background: transparent;
  padding: 0 6px;
}

/* Focus state */
.notch-login:focus-within input.form-control {
  border-color: #555a64 !important;
  /* gris semi-oscuro */
  box-shadow: none !important;
}

/* Label flotante al hacer focus o cuando hay valor */
.notch-login input.form-control:focus+label,
.notch-login input.form-control:not(:placeholder-shown)+label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.78rem;
  color: #555a64;
  background: white;
  padding: 0 6px;
}

/* Pequeño tweak para cards oscuras */
.card .notch-login input.form-control {
  background: rgba(255, 255, 255, 0.03);
}

/* Accesibilidad: asegurar que el outline de teclado sea visible pero no negro */
.notch-login input.form-control:focus {
  outline: none !important;
}

/* ------------------------------------------------------------------
   2. MODAL CLOSE BUTTON (Personalización de la "X")
   ------------------------------------------------------------------ */
.modal-header .btn-close {
  font-size: 1.2rem !important;
  padding: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  background-image: none !important;
  /* Quitar imagen de fondo si Bootstrap la pone */
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-header .btn-close span {
  font-size: 1.8rem !important;
  /* Tamaño más grande para la X */
  line-height: 1 !important;
  position: relative;
  top: -2px;
  /* Ajuste fino vertical */
}